/* ==========================================================================
   Secciones compartidas · FAQ + Contacto (Home y Proyectos)
   FAQ: contenedor con degradado (blanco 7% → 0) y esquinas superiores redondeadas,
   120/0 (teléfono 60/0/120); lista de 856px.
   Contacto: dos tarjetas de radio 56px (gap 12), titular abajo a la izquierda.
   ========================================================================== */

@layer sections {
  /* --- FAQ --- */
  .faq {
    position: relative;
    z-index: 3;
    max-width: 1920px;
    margin-inline: auto;
    padding: 0 12px;
  }

  .faq__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    padding: 60px 0 120px;
    border-radius: 40px 40px 0 0;
    background: linear-gradient(0deg, var(--palette-white-0) 0%, var(--palette-white-7) 100%), var(--color-bg);
  }

  .faq__top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding-inline: 12px;
    text-align: center;
  }

  .faq__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 856px;
    padding-inline: 12px;
  }

  .faq-item {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--palette-smoky-black);
    interpolate-size: allow-keywords;

    /* Animación de apertura donde el navegador la soporta (mejora progresiva) */
    &::details-content {
      height: 0;
      overflow: clip;
      transition: height 0.2s cubic-bezier(0.44, 0, 0.56, 1), content-visibility 0.2s allow-discrete;
    }

    &[open]::details-content {
      height: auto;
    }
  }

  .faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--color-text-soft);
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    list-style: none;
    cursor: pointer;

    &::-webkit-details-marker {
      display: none;
    }

    span:first-child {
      max-width: 512px;
    }
  }

  .faq-item__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    background-color: var(--color-text);
    box-shadow: inset 1.5px 1.5px 2px 0 var(--palette-white-15);
    color: var(--color-text-inverse);

    svg {
      width: 20px;
      height: 20px;
    }

    .icon-plus__v {
      transition: transform 0.2s ease;
      transform-origin: center;
    }
  }

  /* Abierto: el "+" se convierte en "−" */
  .faq-item[open] .icon-plus__v {
    transform: scaleY(0);
  }

  .faq-item__answer p {
    max-width: 752px;
    padding-top: 28px;
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 24px;
  }

  /* --- Contacto --- */
  .contact {
    position: relative;
    z-index: 3;
    max-width: 1920px;
    margin-inline: auto;
    padding: 0 12px;
  }

  .contact__container {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .contact__intro {
    position: relative;
    isolation: isolate;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 480px;
    padding: 390px 0 48px 12px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 56px;
    background:
      linear-gradient(135deg, rgb(20 20 20 / 60%) 0%, rgb(21 21 21 / 60%) 100%) padding-box,
      linear-gradient(315deg, var(--palette-charcoal-gray) 74%, var(--palette-medium-gray) 103%) border-box;
  }

  /* Capa "BG" de Framer (gris 60%) sobre el patrón de puntos */
  .contact__intro::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, rgb(20 20 20 / 60%) 0%, rgb(21 21 21 / 60%) 100%);
  }

  .contact__pattern {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top left;
  }

  /* "Blur": brillo blanco difuminado abajo a la derecha */
  .contact__glow {
    position: absolute;
    right: -161px;
    bottom: -346px;
    z-index: -1;
    width: 486px;
    height: 486px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgb(255 255 255 / 20%) 0%, rgb(255 255 255 / 0%) 100%);
    filter: blur(150px);
  }

  .contact__title {
    display: flex;
    flex-direction: column;
  }

  .contact__title-main {
    color: var(--color-text);
    font-size: 41px;
    font-weight: 500;
    line-height: 42px;
    letter-spacing: -1.92px;
  }

  .contact__title-accent {
    color: var(--color-accent);
    font-family: var(--font-serif);
    font-size: 36px;
    font-style: italic;
    font-weight: 400;
    line-height: 48px;
    letter-spacing: -1.92px;
  }

  .contact__form {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 54px;
    padding: 98px 24px;
    border: 1px solid var(--palette-smoky-black);
    border-radius: 56px;
    background-color: var(--color-bg);
  }

  .contact__form-title {
    color: var(--color-text-muted);
    font-size: 32px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -0.32px;
  }

  /* Formulario CF7 */
  .contact-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 14px;

    label {
      color: var(--color-text-soft);
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
    }

    &:has(textarea) {
      gap: 20px;
    }
  }

  .contact-form .wpcf7-form-control-wrap {
    display: block;
  }

  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form textarea {
    width: 100%;
    padding: 0 0 6px;
    border: 0;
    border-bottom: 1px solid var(--palette-white-20);
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    font-size: 16px;
    line-height: 24px;
    outline: none;
    transition: border-color var(--duration) var(--ease-out);

    &::placeholder {
      color: var(--palette-white-50);
    }

    &:focus {
      border-bottom-color: var(--color-accent);
    }
  }

  .contact-form textarea {
    height: 96px;
    font-size: 14px;
    resize: vertical;
  }

  /* Botón "Enviar Mensaje" (Framer "Contact Button" con estados) */
  .contact-form__submit {
    width: 100%;
    height: 52px;
    margin-top: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out);

    &:hover,
    &:focus-visible {
      background-color: var(--color-accent-hover);
    }

    &:disabled {
      opacity: 0.6;
      cursor: progress;
    }
  }

  .contact-form.submitting .contact-form__submit {
    opacity: 0.6;
  }

  .contact-form .hidden-fields-container {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .contact-form .wpcf7-spinner {
    display: none;
  }

  .contact-form .wpcf7-not-valid-tip {
    display: block;
    margin-top: 6px;
    color: #ff6b6b;
    font-size: 13px;
  }

  .contact-form .wpcf7-not-valid {
    border-bottom-color: #ff6b6b !important;
  }

  .contact-form .wpcf7-response-output {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--color-line-strong);
    border-radius: 12px;
    color: var(--color-text-soft);
    font-size: 14px;
    line-height: 20px;

    &:empty {
      display: none;
    }
  }

  .contact-form.sent .wpcf7-response-output {
    border-color: rgb(16 185 129 / 60%);
    color: rgb(110 231 183);
  }

  .contact-form.invalid .wpcf7-response-output,
  .contact-form.failed .wpcf7-response-output {
    border-color: rgb(255 107 107 / 60%);
  }

  .contact-form .screen-reader-response {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  /* --- Tablet --- */
  @media (min-width: 810px) {
    .faq,
    .contact {
      padding-inline: 24px;
    }

    .faq__container {
      padding-block: 120px;
      border-radius: 56px 56px 0 0;
    }

    .contact__intro {
      padding: 480px 0 66px 48px;
    }

    .contact__title-main {
      font-size: 51px;
      line-height: 52px;
    }

    .contact__title-accent {
      font-size: 48px;
      line-height: 60px;
    }

    .contact__form {
      padding-inline: 48px;
    }
  }

  /* --- Desktop --- */
  @media (min-width: 1440px) {
    .contact__container {
      flex-direction: row;
      align-items: stretch;
    }

    .contact__form {
      max-width: 690px;
    }

    .contact__title-main {
      font-size: 64px;
      line-height: 72px;
    }

    .contact__title-accent {
      font-size: 60px;
      line-height: 72px;
    }
  }
}