/* =========================================================================
   GastroView · Bloque 4 · Preguntas frecuentes (v10 · tostado)
   Solo acordeón + foto. Sin título, sin bajada, sin CTA.
   La página alterna marfil → tostado → marfil → TOSTADO: este bloque cierra
   en el segundo color de marca, con la misma familia de ondas del Bloque 2,
   retícula fina y luz cálida. La foto es la única pieza clara: manda.
   ========================================================================= */

.faq {
  --tostado-1: #2B1F19;
  --tostado-2: #3E2E26;
  --marfil-rgb: 248 243 234;
  --caramelo-texto: #D7A574;          /* 7,2:1 sobre el tostado */
  --texto-claro-2: rgb(var(--marfil-rgb) / 0.74);
  --linea-faq: rgb(var(--marfil-rgb) / 0.14);
  --ola-alto: clamp(56px, 7vw, 120px);

  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--marfil);
  background:
    radial-gradient(120% 70% at 50% 0%, #46342B 0%, transparent 62%),
    linear-gradient(to bottom, var(--tostado-2) 0%, var(--tostado-1) 58%, #251A15 100%);
  padding: calc(var(--ola-alto) + clamp(52px, 7vw, 96px)) 0 calc(var(--ola-alto) + clamp(40px, 5vw, 72px));
}
.faq h3 { margin: 0; font-weight: 500; }

/* Ondas (mismas curvas que el Bloque 2) */
.faq__ola {
  position: absolute; left: 0; width: 100%; height: var(--ola-alto);
  z-index: 1; pointer-events: none;
}
.faq__ola--arriba { top: -1px; }
.faq__ola--abajo { bottom: -1px; }
.faq__ola--arriba .ola__frente { fill: var(--marfil); }
.faq__ola--arriba .ola__fondo { fill: #E6D3BD; opacity: 0.9; }
/* Abajo el bloque ya no vuelve al marfil: entrega directo el espresso del pie */
.faq__ola--abajo .ola__frente { fill: #34251E; }
.faq__ola--abajo .ola__fondo { fill: #4A362C; opacity: 0.75; }

/* Fondo: luz cálida + retícula casi invisible */
.faq__fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.faq__luz { position: absolute; border-radius: 50%; }
.faq__luz--a {
  width: min(820px, 88vw); aspect-ratio: 1; right: -14%; top: -8%;
  background: radial-gradient(closest-side, rgb(198 106 69 / 0.28), rgb(198 106 69 / 0.07) 55%, transparent);
}
.faq__luz--b {
  width: min(700px, 80vw); aspect-ratio: 1; left: -18%; bottom: -10%;
  background: radial-gradient(closest-side, rgb(215 165 116 / 0.16), transparent 70%);
}
.faq__reticula {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgb(var(--marfil-rgb) / 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--marfil-rgb) / 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 30% 40%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 65% 60% at 30% 40%, #000 0%, transparent 100%);
}

.faq__contenedor {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  align-items: center;
  gap: clamp(32px, 5vw, 88px);
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--margen);
}

/* ---------- Acordeón sobre el tostado ---------- */
.faq__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea-faq);
}
.faq__item {
  position: relative;
  border-bottom: 1px solid var(--linea-faq);
}
.faq__item::before {                       /* marca de la fila abierta */
  content: "";
  position: absolute;
  left: -14px; top: 22px;
  width: 2px; height: 22px;
  border-radius: 2px;
  background: var(--caramelo);
  opacity: 0;
  transition: opacity 260ms var(--ease);
}
.faq__item.is-abierta::before { opacity: 1; }

.faq__boton {
  display: grid;
  grid-template-columns: clamp(38px, 4vw, 54px) minmax(0, 1fr) 22px;
  align-items: start;
  column-gap: clamp(10px, 1.4vw, 18px);
  width: 100%;
  padding: clamp(18px, 2vw, 24px) 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.faq__num {
  font-family: var(--f-titulos);
  font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  font-variation-settings: "opsz" 72;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgb(215 165 116 / 0.65);
  transition: color var(--t) var(--ease);
}
.faq__item.is-abierta .faq__num { color: var(--caramelo-texto); }
.faq__pregunta {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--marfil);
  text-wrap: pretty;
}
/* Signo: cruz fina que gira a menos al abrir */
.faq__signo {
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 6px;
  justify-self: end;
}
.faq__signo::before,
.faq__signo::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 1.5px;
  margin: -0.75px 0 0 -8px;
  border-radius: 2px;
  background: rgb(var(--marfil-rgb) / 0.55);
  transition: transform 320ms var(--ease), background-color var(--t) var(--ease);
}
.faq__signo::after { transform: rotate(90deg); }
.faq__boton:hover .faq__pregunta { color: #FFFCF8; }
.faq__boton:hover .faq__signo::before,
.faq__boton:hover .faq__signo::after { background: var(--caramelo-texto); }
.faq__item.is-abierta .faq__signo::after { transform: rotate(0deg); }
.faq__item.is-abierta .faq__signo::before,
.faq__item.is-abierta .faq__signo::after { background: var(--caramelo-texto); }

/* Caja que abre y cierra (grid 0fr → 1fr: altura real, sin medir con JS) */
.faq__caja {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--ease);
}
.faq__item.is-abierta .faq__caja { grid-template-rows: 1fr; }
.faq__respuesta { overflow: hidden; }
.faq__respuesta p {
  max-width: 44ch;
  margin: 0;
  padding: 0 clamp(26px, 3vw, 40px) clamp(22px, 2.4vw, 28px) calc(clamp(38px, 4vw, 54px) + clamp(10px, 1.4vw, 18px));
  font-size: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  line-height: 1.65;
  color: var(--texto-claro-2);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 280ms var(--ease) 60ms, transform 280ms var(--ease) 60ms;
  text-wrap: pretty;
}
.faq__item.is-abierta .faq__respuesta p { opacity: 1; transform: none; }

/* Sin JS: todas visibles */
html:not(.js-faq) .faq__caja { grid-template-rows: 1fr; }
html:not(.js-faq) .faq__respuesta p { opacity: 1; transform: none; }
html:not(.js-faq) .faq__signo { display: none; }

/* ---------- Foto: la única pieza clara del bloque ---------- */
.faq__imagen {
  position: relative;
  margin: 0;
  isolation: isolate;
}
.faq__marco {                              /* filete caramelo corrido: joyería, no marco pesado */
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgb(248 243 234 / 0.28);
  pointer-events: none;
}
.faq__imagen > picture img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: 26px;
  box-shadow: 0 50px 90px -45px rgb(0 0 0 / 0.75);
}
/* (la tarjeta flotante se retiró: ahora el producto se ve en la propia pantalla del celular) */
/*
.faq__tarjeta {
  position: absolute;
  right: clamp(-24px, -1.8vw, -12px);
  bottom: clamp(18px, 2.6vw, 38px);
  width: clamp(200px, 58%, 300px);
  padding: 8px;
  border-radius: 16px;
  background: var(--blanco-calido);
  box-shadow:
    inset 0 0 0 1px rgb(var(--espresso-rgb) / 0.08),
    0 24px 44px -24px rgb(0 0 0 / 0.7);
}
.faq__tarjeta img { display: block; width: 100%; height: auto; border-radius: 10px; }
*/

/* =========================================================================
   Responsive
   ========================================================================= */

/* Tablet y celular: primero las preguntas, después la foto */
@media (max-width: 1023px) {
  .faq__contenedor {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(40px, 6vw, 56px);
    max-width: 44rem;
  }
  .faq__imagen { width: min(100%, 560px); margin-inline: auto; }
  .faq__marco { inset: 8px; }
}

@media (max-width: 599px) {
  .faq__boton { grid-template-columns: 32px minmax(0, 1fr) 20px; column-gap: 12px; padding: 16px 0; min-height: 56px; }
  .faq__respuesta p { padding-left: 44px; padding-right: 8px; }
  .faq__item::before { left: -10px; top: 20px; height: 18px; }
  .faq__imagen > picture img { border-radius: 20px; }
  .faq__marco { inset: 7px; border-radius: 18px; }

}

@media (max-width: 359px) {
  .faq__contenedor { padding-inline: 16px; }
  .faq__boton { grid-template-columns: 28px minmax(0, 1fr) 18px; column-gap: 10px; }
  .faq__respuesta p { padding-left: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq__caja, .faq__respuesta p { transition: none; }
}