/* El Candelario: página de scroll, sacada del Figma «Experiencia scroll». Primero móvil.
   Las escenas compuestas usan las medidas del Figma: 390 × 844 en móvil y 1440 × 900 en escritorio.
   --u es lo que vale un píxel del Figma ajustado a la ventana entera; --uw solo mira el ancho. */
   Lo común (fuentes, colores, botones) está en base.css, que se carga antes.

/* Cada pantalla ocupa el 100 % del alto. Si su contenido no cabe, scroll.js la reduce con --z. */
main > section:not(.cafe):not(.partes):not(.faq) { zoom: var(--z, 1); min-height: calc(100svh / var(--z, 1)) !important; }
main > section.midiendo { zoom: 1 !important; min-height: 0 !important; }
@media (max-width: 899px) { main > section:not(.cafe):not(.partes):not(.portada):not(.faq) { align-content: center; } }

/* Fondo de papel con puntos */
/* En Por partes va en la capa fija: si fuera en la sección, los puntos se moverían mientras la escena está parada. */
.portada, .partes .fijo, .como, .fondo { background: var(--papel) url("img/papel-cuaderno.png") 0 0 / 48px 48px; }


/* Cabecera fija */
.cabecera { position: fixed; z-index: 40; top: var(--cab-aire); left: var(--cab-aire); right: var(--cab-aire); height: var(--cab-alto); display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 16px 0 22px; border: 2px solid var(--tinta); border-radius: 99px; background: var(--blanco); box-shadow: var(--sombra); }
.cab-marca { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cab-preventa { padding: 0 6px; border: 1.5px solid var(--tinta); background: var(--menta); font-weight: 600; font-size: 10px; line-height: 13px; }
.cab-logo { position: relative; display: block; }
.cab-logo::after { content: ""; position: absolute; inset: -11px -4px; } /* zona de toque de 44 px */
.cab-logo img { width: min(98px, 22vw); height: auto; }
/* Puede partirse en más líneas: si no encoge, empuja el botón de reservar fuera de la pantalla en móviles estrechos. */
.cab-aviso { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; font-weight: 600; font-size: 11px; line-height: 14px; }
.cab-aviso img { width: 20px; height: 20px; }
.boton-cab { flex: none; min-height: 44px; padding: 0 14px; font-size: 15px; flex-direction: column; gap: 0; line-height: 1.15; }
/* Regla de la página: solo los botones llevan esquinas redondas; todo lo demás es recto. El mensaje de la carga, además, va plano. */
.boton-cab .precios { font-size: 11px; gap: 4px; }
.boton-cab::after { content: ""; position: absolute; inset: -6px -4px; }
@media (max-width: 359px) { .cabecera { padding: 0 10px 0 14px; } .cab-aviso { font-size: 10px; gap: 4px; } .cab-aviso img { display: none; } .boton-cab { padding: 0 10px; font-size: 14px; } }
@media (min-width: 900px) {
  .cabecera { left: 24px; right: 24px; padding: 0 16px 0 24px; }
  .cab-marca { flex-direction: row; align-items: center; gap: 12px; }
  .cab-preventa { padding: 0 10px; font-size: 13px; line-height: 20px; }
  .cab-logo img { width: 150px; }
  .cab-regalo { display: flex !important; align-items: center; gap: 8px; font-weight: 600; font-size: 16px; }
  .boton-cab { flex-direction: row; gap: 12px; min-height: 44px; padding: 0 24px; font-size: 18px; }
  .boton-cab .precios { font-size: 16px; gap: 6px; }
}

/* En la primera y la última pantalla no hay barra: cada una ya tiene su botón de Reservar */
.cabecera { transition: transform var(--dur-enter) var(--ease-enter), visibility 0s; }
.cabecera.oculta { transform: translateY(calc(-100% - 24px)); visibility: hidden; transition: transform var(--dur-leave) var(--ease-in), visibility 0s var(--dur-leave); }

/* Escenas: lienzo con las medidas del Figma */
.fijo { position: sticky; top: 0; height: 100svh; display: grid; place-items: end center; overflow: clip; }
@media (min-width: 900px) { .fijo { place-items: center; } }
.lienzo { position: relative; width: calc(var(--W) * var(--u)); height: calc(var(--H) * var(--u)); }
.a { position: absolute; left: calc(var(--mx, 0) * var(--u)); top: calc(var(--my, 0) * var(--u)); width: calc(var(--mw, 0) * var(--u)); height: auto; max-width: none; }
.texto-a { font-size: calc(var(--mfs) * var(--u)); text-align: center; }
.centro { text-align: center; }
@media (min-width: 900px) {
  .a { left: calc(var(--x, 0) * var(--u)); top: calc(var(--y, 0) * var(--u)); width: calc(var(--w, 0) * var(--u)); }
  .texto-a { font-size: calc(var(--fs) * var(--u)); text-align: left; }
  .texto-a.centro { text-align: center; }
}
.lineas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

/* 0 · Carga */
.carga { display: none; }
.vuelta .carga { display: none !important; }
.js:not(.reducido) .carga { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-columns: repeat(5, 1fr); animation: carga-fin 0s 15s forwards; } /* si el script fallase, la carga no se queda puesta */
@keyframes carga-fin { to { visibility: hidden; } }
.carga i { transition: transform var(--dur-enter) var(--ease-in); }
.carga i:nth-child(1) { background: var(--rosa); }
.carga i:nth-child(2) { background: var(--rosa-claro); transition-delay: 40ms; }
.carga i:nth-child(3) { background: var(--menta); transition-delay: 80ms; }
.carga i:nth-child(4) { background: var(--amarillo); transition-delay: 120ms; }
.carga i:nth-child(5) { background: var(--azul); transition-delay: 160ms; }
.carga.fuera i { transform: translateY(-101%); }
.carga-centro { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; transition: opacity var(--dur-leave) linear; }
.carga.fuera .carga-centro { opacity: 0; pointer-events: none; }
.carga-boton { max-width: min(340px, 86vw); padding-block: 10px; text-wrap: balance; text-align: center; line-height: 1.25; }
/* Cafetera y humo de Candela: comparten marco. La cafetera tiembla sobre su base; el humo sale del pico, sube y se desvanece. */
.carga-anim { position: relative; width: 205px; aspect-ratio: 717 / 837; }
.carga-anim img { position: absolute; inset: 0; width: 100%; height: 100%; }
.carga-cafetera { transform-origin: 71% 100%; animation: tiembla .4s ease-in-out infinite; }
/* El humo crece desde su punta (abajo a la derecha, junto al pico): ese punto es el transform-origin, medido en la imagen (42 % 38 %). */
.carga-humo { transform-origin: 42% 38%; animation: humo 1.8s var(--ease-out) infinite; }
@keyframes humo { 0% { opacity: 0; transform: scale(.15); } 20% { opacity: 1; } 60% { transform: scale(1); } 100% { opacity: 0; transform: translateY(-8%) scale(1.12); } }
@keyframes tiembla { 0%, 100% { transform: rotate(0); } 25% { transform: translateX(-2px) rotate(-2deg); } 75% { transform: translateX(2px) rotate(2deg); } }
.carga-centro p { width: min(300px, 80vw); padding: 14px; border: 2px solid var(--tinta); background: var(--blanco); font-weight: 600; font-size: 18px; text-align: center; }
@media (min-width: 900px) { .carga-anim { width: 275px; } .carga-centro p { width: 400px; } }

/* 1 · Portada */
/* En móvil la portada sigue la altura del Figma: si dependiera de la ventana, los objetos pisarían el texto en pantallas bajas. */
.portada { position: relative; min-height: max(100svh, calc(780 * var(--uw))); display: grid; justify-items: center; align-content: start; padding: calc(124 * var(--uw)) var(--lado) 64px; z-index: 1; }
/* La portada no recorta nada (lo que se sale por los lados ya lo recorta `html, body` en base.css): con «overflow-x: clip;
   overflow-y: visible», Safari y Chrome del iPhone recortaban a ratos también por abajo mientras se desplazaba la página,
   y las galletas, que montan sobre la sección azul, parpadeaban por detrás de ella (Javi, 14 nov 2026). */
/* Al hacer scroll los objetos bajan un poco (paralaje): en móvil las galletas de abril pasan el borde inferior.
   Por eso la portada no recorta por abajo y va por encima de la sección azul del café (Javi, 10 nov). */
.flota { position: absolute; z-index: 1; height: auto; left: calc(var(--mx) / 390 * 100%); top: calc(var(--my) * var(--uw)); width: calc(var(--mw) / 390 * 100%); max-width: none; }
.flota { transition: translate var(--dur-enter) var(--ease-out), rotate var(--dur-enter) var(--ease-out); }
.flota.toque { translate: 0 -8px; rotate: -3deg; }
.flota:nth-of-type(even).toque { rotate: 3deg; }
@media (hover: hover) and (pointer: fine) {
  .flota:hover { translate: 0 -8px; rotate: -3deg; }
  .flota:nth-of-type(even):hover { rotate: 3deg; }
}
/* Enlace al otro idioma (/ y /en/), arriba a la izquierda de la portada: ahí no hay ilustraciones en ningún ancho
   y la cabecera fija está oculta en esta pantalla. */
.idioma { position: absolute; z-index: 3; top: 12px; left: var(--lado); display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
/* Solo en /en/: aviso de que el calendario está en español, en el flujo y antes que nada (spec_ingles.md). */
/* Solo en /en/: franja a todo lo ancho, pegada arriba de la sección verde «Turn the page» (Javi, 12 nov). */
.aviso-idioma { margin: 0; padding: 12px var(--lado); border-block: 2px solid var(--tinta); background: var(--amarillo); text-align: center; text-wrap: balance; font-weight: 600; font-size: 15px; line-height: 1.35; }
.preventa { padding: 3px 16px; border: 2px solid var(--tinta); background: var(--menta); font-weight: 600; font-size: 15px; }
.portada .regalo { position: absolute; z-index: 2; left: calc(205 / 390 * 100%); top: calc(546 * var(--uw)); width: calc(170 * var(--uw)); padding: calc(30 * var(--uw)) calc(14 * var(--uw)); font-size: max(10.5px, calc(12.5 * var(--uw))); /* crece con la estrella */ background-image: url("img/estrella-amarilla.svg"); }
/* Por debajo de 360 px el título ocupa una línea más y el botón baja: la estrella baja con él para no quedar debajo. */
@media (max-width: 359px) { .portada .regalo { top: calc(625 * var(--uw)); } }
/* En inglés el título ocupa aún una línea más por debajo de 360 px («Illustrated» no cabe con «wall»): la estrella baja otra vez. */
@media (max-width: 359px) { :lang(en) .portada .regalo { top: calc(675 * var(--uw)); } }
/* Aviso de que se puede bajar: en el flujo, justo debajo del botón de reservar. Con una posición fija lo
   pisaba en algunos anchos, porque el botón sube o baja según cómo se parte el título (Javi, 11 nov). */
/* En móvil debajo del botón está la estrella del regalo: la flecha se aparta a su izquierda, encima del perro. */
.sigue { width: 36px; translate: calc(-60 * var(--uw)) 0; pointer-events: none; animation: sigue 1.6s var(--ease-out) infinite alternate; transition: opacity var(--dur-leave) linear; }
.sigue.fuera { opacity: 0; animation-play-state: paused; }
@keyframes sigue { to { transform: translateY(8px); } }
.portada-texto { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; text-align: center; }
.portada-logo { width: calc(320 * var(--uw)); }
h1 { max-width: calc(310 * var(--uw)); font-size: clamp(38px, calc(44 * var(--uw)), 60px); }
.entradilla { max-width: calc(260 * var(--uw)); font-size: 18px; }
@media (min-width: 900px) {
  /* Igual que en móvil: altura ligada al ancho, para que en ventanas bajas los objetos no pisen el texto. */
  .portada { min-height: max(100svh, calc(780 * var(--uw))); padding: calc(80 * var(--uw)) var(--lado) 64px; }
  .flota { left: calc(var(--x) / 1440 * 100%); top: calc(var(--y) * var(--uw)); width: calc(var(--w) / 1440 * 100%); }
  .portada .regalo { left: calc(1000 / 1440 * 100%); top: calc(22 * var(--uw)); width: calc(200 * var(--uw)); padding: calc(38 * var(--uw)) calc(20 * var(--uw)); font-size: calc(13 * var(--uw)); }
  .sigue { translate: none; }
  .portada-texto { gap: 24px; }
  .preventa { font-size: 17px; }
  .portada-logo { width: calc(500 * var(--uw)); }
  h1 { max-width: calc(780 * var(--uw)); font-size: calc(88 * var(--uw)); line-height: 1.04; }
  .entradilla { max-width: none; font-size: calc(22 * var(--uw)); }
}

/* 2 · Café */
/* z-index 0: la sección azul se apila por debajo de la portada (z-index 1). Sin él, su bloque fijo (sticky) va en una capa
   propia que el navegador pinta encima, y tapa las galletas que bajan desde la portada (Javi, 11 nov). */
.cafe { position: relative; z-index: 0; height: 240svh; background: var(--azul); }
/* Las piezas del café se apilan con el mismo marco; scroll.js enseña las que tocan con la clase .ver */
.escena-cafe { z-index: 2; aspect-ratio: 856 / 1107; }
.escena-cafe img { position: absolute; inset: 0; width: 100%; height: 100%; visibility: hidden; }
.escena-cafe img.ver { visibility: visible; }
.reducido .cafe, html:not(.js) .cafe { height: auto; }
.reducido .cafe .fijo, html:not(.js) .cafe .fijo { position: static; }

/* 3 · Pasa la hoja */
.hoja-sec { min-height: 100svh; display: grid; justify-items: center; align-content: start; gap: 32px; padding: 96px var(--lado) 64px; background: var(--menta); overflow: clip; }
.hoja-sec h2 { font-size: 36px; text-align: center; }
.hoja-texto p { margin-top: 8px; text-align: center; text-wrap: balance; }
.hojas { position: relative; width: calc(310 * var(--uw)); aspect-ratio: 1000 / 1414; margin-right: calc(12 * var(--uw)); touch-action: pan-y; cursor: grab; user-select: none; }
.hojas.arrastrando { cursor: grabbing; }
.hoja-cal { position: absolute; inset: 0; width: 100%; height: 100%; border: 1.5px solid var(--tinta); background: var(--blanco); transform-origin: 50% 110%; transform: translate(calc(var(--p, 0) * 10px), calc(var(--p, 0) * 8px)); }
.hoja-cal.gira { transition: transform var(--dur-hoja) var(--ease-enter), opacity var(--dur-hoja) linear; }
.dedo { position: absolute; z-index: 9; left: calc(220 * var(--uw)); top: calc(350 * var(--uw)); width: calc(110 * var(--uw)); pointer-events: none; transition: opacity var(--dur-leave) linear; }
.js:not(.reducido) .dedo { animation: dedo 2.4s var(--ease-enter) infinite; }
@keyframes dedo { 0%, 30% { transform: none; } 70% { transform: translateX(-28%) rotate(-8deg); } 100% { transform: none; } }
.dedo.usado { opacity: 0; animation: none !important; }
.pestanas { display: flex; justify-content: center; }
/* Círculos de navegación: se ven de 14 px, pero la zona que se puede tocar es de 44 px */
.pestanas button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.pestanas button::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--tinta); border-radius: 50%; background: var(--blanco); transition: background-color var(--dur-leave) linear; }
.pestanas button[aria-pressed="true"]::before { background: var(--rosa); }
@media (min-width: 900px) {
  .hoja-sec { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "texto hojas" "sofa hojas" ". botones"; grid-template-rows: auto auto auto; align-content: center; justify-items: start; column-gap: 48px; row-gap: 12px; padding: 96px calc(168 * var(--uw)) 40px var(--lado); }
  .hoja-pie { display: contents; }
  .hoja-texto { grid-area: texto; align-self: end; }
  .hoja-sec h2 { font-size: calc(64 * var(--uw)); text-align: left; }
  .hoja-texto p { margin-top: 20px; max-width: 520px; font-size: calc(22 * var(--uw)); text-align: left; }
  .aviso-idioma { font-size: 17px; }
  .hojas { grid-area: hojas; width: calc(440 * var(--u)); margin: 0; }
  .dedo { left: calc(280 * var(--u)); top: calc(260 * var(--u)); width: calc(200 * var(--u)); }
  .pestanas { grid-area: botones; justify-self: center; }
  .hoja-sofa { grid-area: sofa; width: calc(460 * var(--u)); margin-top: calc(28 * var(--u)); }
}

/* 4 · Por partes */
.partes { position: relative; height: 340svh; }
/* Toda la escena baja un poco y el título algo menos, para separarlo de la barra sin pisar el gancho */
#partes-lienzo { transform: translateY(calc(16 * var(--u))); }
#t-partes { transform: translateY(calc(-4 * var(--u))); }
@media (min-width: 900px) { #partes-lienzo { transform: translateY(calc(24 * var(--u))); } }
.papel { display: block; aspect-ratio: 841.89 / 1190.55; border: 2px solid var(--tinta); background: var(--blanco); }
.papel img { width: 100%; height: 100%; }
/* El rótulo «Febrero» solo se pinta una vez. La hoja lo deja fuera (un hueco en su recorte) y lo pone la capa de
   encima (.mes-encima), que enseña justo ese trozo, para que el sofá pase entre la hoja y el rótulo. Pintado en las
   dos, las dos copias nunca caían exactamente en el mismo píxel en el iPhone y se veía doble (Javi, 14 nov 2026).
   El hueco y el trozo son el mismo rectángulo: si cambia uno, cambiar el otro. */
div.papel img { clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 56% 24%, 100% 24%, 100% 46%, 56% 46%, 56% 24%); }
.sale { transform-origin: 0 0; }
/* El «Febrero» de encima tiene que caer justo sobre el de la hoja. La hoja lleva un borde de 2 px y su imagen ocupa
   lo de dentro: esta capa lleva el mismo borde (transparente) para medir lo mismo. Sin él era 4 px más grande y en el
   móvil el rótulo se veía doble (Javi, 14 nov 2026). */
.mes-encima { aspect-ratio: 841.89 / 1190.55; box-sizing: border-box; border: 2px solid transparent; clip-path: inset(24% 0 54% 56%); pointer-events: none; }
.linea path { fill: none; stroke: var(--tinta); stroke-width: 2; stroke-dasharray: 1; }
.linea circle { fill: var(--rosa); stroke: var(--tinta); stroke-width: 2; }
.js:not(.reducido) .linea { opacity: 0; }
.etiquetas b { display: block; font-family: var(--serif); font-weight: 900; font-size: 24px; line-height: 1.1; text-wrap: balance; }
.etiquetas span { display: block; margin-top: 8px; font-size: 16px; line-height: 1.35; text-wrap: pretty; }
/* Móvil: una tarjeta que va cambiando con el scroll */
.etiquetas { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(676 * var(--u)); height: calc(130 * var(--u)); }
.etiquetas li { position: absolute; inset: 0; display: grid; align-content: center; padding: 8px 16px; border: 2px solid var(--tinta); background: var(--blanco); box-shadow: var(--sombra); }
.js:not(.reducido) .etiquetas li { opacity: 0; visibility: hidden; }
.reducido .etiquetas, html:not(.js) .etiquetas { position: static; height: auto; display: grid; gap: 12px; padding: calc(676 * var(--u)) 20px 32px; }
.reducido .etiquetas li, html:not(.js) .etiquetas li { position: static; }
/* Móvil con flechas (scroll.js pone .flechas, y .abierta cuando el scroll ha sacado los objetos): la sección mide
   1,5 pantallas y las tarjetas se pasan con las flechas o deslizando. Sin JavaScript, con menos movimiento o en
   escritorio, todo sigue como antes. */
.partes-nav { display: none; }
.partes.flechas { height: 150svh; touch-action: pan-y; }
html:not(.reducido) .partes.flechas .linea path { transition: stroke-dashoffset 450ms var(--ease-out) 150ms; }
html:not(.reducido) .partes.flechas .etiquetas li { transition: opacity var(--dur-enter) linear, visibility 0s var(--dur-enter); }
html:not(.reducido) .partes.flechas .etiquetas li.vista { transition: opacity var(--dur-enter) linear 120ms, visibility 0s; }
/* Las flechas montan sobre el borde de abajo de la tarjeta, y las dos quedan dentro de la pantalla: el lienzo puede
   salirse por abajo (baja 16u y en tableta es más alto que la pantalla); scroll.js mide cuánto en --sobra.
   La tarjeta crece hacia arriba si el texto no cabe (la línea pasa por detrás). */
.partes.flechas .etiquetas { top: auto; bottom: calc(var(--sobra, 0px) + 34px); }
.partes.flechas .etiquetas li { inset: auto 0 0; min-height: 100%; padding-bottom: 28px; }
.partes.flechas .partes-nav:not([hidden]) { position: absolute; z-index: 2; left: 50%; bottom: calc(var(--sobra, 0px) + 8px); translate: -50% 0; display: flex; align-items: center; gap: 4px; padding: 0 4px; border: 2px solid var(--tinta); border-radius: 99px; background: var(--rosa); box-shadow: var(--sombra); transition: opacity var(--dur-enter) linear, visibility 0s; }
.partes.flechas:not(.abierta) .partes-nav { opacity: 0; visibility: hidden; transition: opacity var(--dur-leave) linear, visibility 0s var(--dur-leave); }
.partes-nav button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform var(--dur-press) var(--ease-out); }
.partes-nav button:active { transform: scale(.94); }
.partes-nav button:disabled { opacity: .35; cursor: default; }
.partes-nav svg { width: 24px; height: 24px; }
/* Móvil en horizontal: la escena se queda pequeña en el centro y la tarjeta, al crecer hacia arriba, tapaba el
   calendario (Javi, 13 nov). La tarjeta y las flechas van a su derecha, en el hueco libre; las líneas no llegarían
   a la tarjeta, así que solo queda el punto que marca el objeto. El ancho sale del hueco: (pantalla − lienzo) / 2,
   con el lienzo medido igual que --u en base.css. */
@media (max-width: 899px) and (orientation: landscape) {
  .partes.flechas { --tarjeta: min(320px, calc((100vw - (100svh - 80px) * .5132) / 2 - 48px)); }
  .partes.flechas .etiquetas { left: calc(100% + 24px); right: auto; width: var(--tarjeta); }
  .partes.flechas .partes-nav:not([hidden]) { left: calc(100% + 24px + var(--tarjeta) / 2); }
  .partes.flechas .lineas.solo-m path { display: none; }
}
.partes-cuenta { min-width: 3.2em; font-weight: 600; font-size: 15px; text-align: center; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) {
  .reducido .partes, html:not(.js) .partes { height: auto; }
  .reducido .partes .fijo, html:not(.js) .partes .fijo { position: static; height: auto; overflow: visible; }
  .reducido .partes .lienzo, html:not(.js) .partes .lienzo { height: auto; }
  .etiquetas b { font-size: clamp(20px, calc(24 * var(--u)), 24px); }
  .etiquetas span { font-size: clamp(14px, calc(16 * var(--u)), 16px); }
}
@media (min-width: 900px) {
  .etiquetas { position: static; height: auto; padding: 0 !important; display: block !important; }
  .etiquetas li { position: absolute; inset: auto; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(230 * var(--u)); display: block; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .etiquetas b { font-size: calc(24 * var(--u)); }
  .etiquetas span { font-size: max(14px, calc(16 * var(--u))); }
  .reducido .partes { height: auto; }
  .reducido .partes .fijo { position: static; }
}

/* 5 · Cómo funciona */
.como { display: grid; gap: 40px; align-content: start; padding: 96px var(--lado) 64px; }
.como h2 { font-size: 32px; }
.pasos { display: grid; gap: 20px; }
.pasos li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; padding: 18px 20px 20px 24px; border: 2px solid var(--tinta); background: var(--c); box-shadow: var(--sombra); }
.pasos b { font-family: var(--serif); font-weight: 900; font-size: 36px; line-height: 1.1; }
.pasos h3 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.pasos p { margin-top: 10px; font-size: 16px; }
.enlace-reservar { position: relative; display: inline-block; margin-top: 8px; font-weight: 600; color: var(--tinta); }
.enlace-reservar::after { content: ""; position: absolute; inset: -12px -8px; }
@media (min-width: 900px) {
  .como { min-height: 100svh; grid-template-columns: calc(440 * var(--uw)) minmax(0, 720px); column-gap: calc(84 * var(--uw)); justify-content: start; align-items: start; padding: 150px var(--lado) 96px; }
  .como h2 { font-size: calc(52 * var(--uw)); }
  .pasos { gap: 30px; }
  .pasos li { grid-template-columns: 48px minmax(0, 1fr); gap: 24px; padding: 28px 32px 36px 24px; }
  .pasos b { font-size: 48px; }
  .pasos h3 { font-size: 26px; margin-top: 6px; }
  .pasos p { font-size: 19px; }
}
.js:not(.reducido) .aparece { opacity: 0; transform: translateY(24px); }
.js:not(.reducido) .aparece.vista { opacity: 1; transform: none; transition: opacity var(--dur-aparece) var(--ease-enter), transform var(--dur-aparece) var(--ease-enter); }
.pasos li:nth-child(2) { transition-delay: 90ms !important; }
.pasos li:nth-child(3) { transition-delay: 180ms !important; }

/* 6 · Tu merienda ideal */
.merienda { display: grid; justify-items: center; gap: 12px; padding: 92px 0 40px; background: var(--rosa-claro); overflow: clip; }
.merienda-mesa { width: 100%; }
.merienda-texto { padding-inline: var(--lado); text-align: center; }
.merienda h2 { font-size: 36px; }
.merienda-texto p { margin-top: 8px; min-height: 1.45em; }
/* La escena empieza en la altura del contador: móvil (0, 300) y escritorio (20, 470) del Figma */
.mesa-escena { --e: var(--uw); position: relative; width: calc(390 * var(--e)); height: calc(232 * var(--e)); margin: 16px auto 0; }
.m-alfombra { position: absolute; left: calc(20 * var(--e)); top: calc(100 * var(--e)); width: calc(350 * var(--e)); max-width: none; }
.m-mesa { position: absolute; left: calc(45 * var(--e)); top: calc(60 * var(--e)); width: calc(300 * var(--e)); max-width: none; }
.contador-3 { position: absolute; z-index: 5; left: calc(145 * var(--e)); top: 0; width: calc(100 * var(--e)); min-width: 88px; padding: 6px 0; border: 2px solid var(--tinta); background: var(--amarillo); font-weight: 600; font-size: 16px; text-align: center; }
.en-mesa { position: absolute; z-index: 3; top: calc(var(--base) * var(--e)); --k: .5; --alza: calc(var(--sube, 0) * var(--k) * var(--e)); width: calc(var(--ancho) * .5 * var(--e)); max-width: none; transform: translate(-50%, calc(-100% - var(--alza))); animation: posa var(--dur-enter) var(--ease-enter) backwards; }
@keyframes posa { from { opacity: 0; transform: translate(-50%, calc(-100% - var(--alza) - 24px)); } }
/* Tres huecos iguales y centrados en la mesa: el objeto más ancho cabe junto a otro igual sin tocarse */
/* La mesa está en perspectiva: el borde delantero baja hacia la derecha, así que cada hueco tiene su propia altura. */
.en-mesa[data-hueco="0"] { --base: 99; left: calc(109 * var(--e)); }
.en-mesa[data-hueco="1"] { --base: 112; left: calc(195 * var(--e)); }
.en-mesa[data-hueco="2"] { --base: 116; left: calc(281 * var(--e)); }
.opciones { display: grid; grid-template-columns: repeat(4, calc(80 * var(--uw))); gap: calc(10 * var(--uw)); }
.opcion { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 2px solid var(--tinta); border-radius: 14px; background: var(--blanco); box-shadow: var(--sombra); cursor: pointer; transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-leave) linear; }
.opcion:active { transform: scale(.97); }
/* Posición absoluta: una imagen alta no debe estirar la casilla */
.opcion img { position: absolute; inset: 14%; width: 72%; height: 72%; object-fit: contain; }
.opcion[aria-pressed="true"] { background: var(--rosa); }
.asiente { animation: asiente var(--dur-enter) var(--ease-enter); }
@keyframes asiente { 40% { transform: scale(1.12); } }
@media (min-width: 900px) {
  .merienda { min-height: 100svh; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; column-gap: 40px; padding: calc(var(--cab-alto) + var(--cab-aire) + 24px) calc(104 * var(--uw)) 24px 0; }
  .merienda-mesa { display: flex; flex-direction: column; justify-content: space-between; }
  .merienda-texto { padding-inline: calc(96 * var(--uw)) 0; text-align: left; }
  .merienda h2 { font-size: calc(56 * var(--uw)); }
  .merienda-texto p { margin-top: 16px; font-size: calc(20 * var(--uw)); }
  /* Escena al 82 %: deja sitio a la parrilla de 4 columnas sin que se toquen */
  .mesa-escena { --e: calc(var(--u) * .82);width: calc(740 * var(--e)); height: calc(420 * var(--e)); margin: 24px 0 0 calc(20 * var(--e)); }
  .m-alfombra { left: 0; top: calc(160 * var(--e)); width: calc(720 * var(--e)); }
  .m-mesa { left: calc(40 * var(--e)); top: calc(50 * var(--e)); width: calc(640 * var(--e)); }
  .contador-3 { left: calc(290 * var(--e)); top: calc(300 * var(--e)); }
  .en-mesa { --k: 1; width: calc(var(--ancho) * var(--e)); }
  .en-mesa[data-hueco="0"] { --base: 132; left: calc(188 * var(--e)); }
  .en-mesa[data-hueco="1"] { --base: 160; left: calc(360 * var(--e)); }
  .en-mesa[data-hueco="2"] { --base: 168; left: calc(532 * var(--e)); }
  /* Parrilla 4 × 3 (Javi, 10 nov): más ancha y menos alta que la 3 × 4 anterior; las 3 filas caben siempre en la altura de la ventana */
  .opciones { --c: min(calc(150 * var(--uw)), calc((100svh - 190px) / 3.3)); grid-template-columns: repeat(4, var(--c)); gap: calc(var(--c) * .1); align-content: center; }
  @media (hover: hover) and (pointer: fine) { .opcion:hover { background: var(--rosa-claro); } .opcion[aria-pressed="true"]:hover { background: var(--rosa); } }
}

/* 8 · Fondo de pantalla */
.fondo { display: grid; gap: 24px; padding: 92px var(--lado) 24px; }
.fondo h2 { font-size: 26px; }
.fondo-texto p { margin-top: 24px; }
/* El libro que toca: vacío hasta que se elige la fecha. */
/* La explicación y el libro que toca van en la misma casilla, uno encima del otro: el sitio mide siempre lo que el
   más alto (scroll.js mete los cuatro libros, invisibles, para medirlo), así que al cambiar uno por otro no se mueve
   nada en la sección. */
.fondo-cambia { display: grid; margin-top: 24px; }
.fondo-cambia > * { grid-area: 1 / 1; }
.fondo-intro p:first-child { margin-top: 0; }
.fondo-intro, .fondo-resultado { transition: opacity var(--dur-enter) linear, visibility 0s; }
.fondo-intro.fuera, .fondo-resultado:not(.ver) { opacity: 0; visibility: hidden; transition: opacity var(--dur-leave) linear, visibility 0s var(--dur-leave); }
.fondo-medida { visibility: hidden; pointer-events: none; }
.fondo-resultado h3 { font-family: var(--serif); font-weight: 900; font-size: 20px; line-height: 1.15; text-wrap: balance; }
.fondo-resultado p { margin-top: 12px; text-wrap: pretty; }
.fondo-frase { font-weight: 600; }
#fondo-form { display: grid; gap: 22px; margin-top: 22px; }
.campos { display: grid; grid-template-columns: minmax(0, 90fr) minmax(0, 140fr) minmax(0, 100fr); gap: 10px; }
/* Esquinas cortadas como las de los fines de semana del calendario */
.campo { --c: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); position: relative; display: block; height: 52px; background: var(--tinta); clip-path: var(--c); }
/* El corte interior es algo menor que el exterior (10 px − grosor × 0,586): con el mismo corte, las diagonales salían más finas que los lados. */
.campo::before { --d: 8.83px; content: ""; position: absolute; inset: 2px; background: var(--blanco); clip-path: polygon(var(--d) 0, calc(100% - var(--d)) 0, 100% var(--d), 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, var(--d) 100%, 0 calc(100% - var(--d)), 0 var(--d)); }
.campo:focus-within { background: var(--rosa); }
.campo:focus-within::before { --d: 8.24px; inset: 3px; }
.campo select { position: relative; width: 100%; height: 100%; padding: 0 26px 0 14px; border: 0; outline: 0; appearance: none; -webkit-appearance: none; background: url("img/chevron-select.svg") right 8px center / 16px no-repeat; }
/* La segunda fila guarda el sitio del botón de descarga, para que el móvil no salte cuando aparece. */
.fondo-movil { position: relative; display: grid; grid-template-rows: auto 56px; justify-items: center; gap: 20px; }
/* .boton pone su propio display, que gana al [hidden] del navegador: sin esto el botón se vería antes de tiempo. */
.fondo-movil [hidden] { display: none; }
.movil { width: 150px; aspect-ratio: 290 / 595; padding: 6px; border-radius: 28px; background: var(--tinta); }
.movil-pantalla { display: grid; place-items: center; height: 100%; padding: 12px; border-radius: 22px; background: var(--blanco); font-size: 15px; text-align: center; position: relative; overflow: hidden; }
/* Fuera del flujo: dentro, el alto propio de la imagen estiraba el móvil más allá de su proporción. */
.movil-pantalla img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Fecha y hora de muestra sobre el fondo, como en la pantalla de bloqueo. Las medidas van con el ancho del móvil. */
.movil-pantalla { container-type: inline-size; }
.movil-reloj { z-index: 1; position: absolute; inset: 9% 0 auto; display: grid; justify-items: center; gap: 1cqw; color: var(--tinta); line-height: 1; pointer-events: none; }
.movil-reloj span { font-size: 6.4cqw; font-weight: 600; }
.movil-reloj b { font-size: 25cqw; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .fondo { min-height: 100svh; grid-template-columns: minmax(0, 600px) auto; column-gap: 48px; justify-content: space-between; align-items: center; padding: 96px calc(230 * var(--uw)) 64px var(--lado); }
  .fondo h2 { font-size: calc(38 * var(--uw)); }
  .fondo-texto p { font-size: 20px; }
  .fondo-resultado h3 { font-size: 26px; }
  #fondo-form { justify-items: start; margin-top: 44px; }
  .campos { grid-template-columns: 110px 190px 130px; gap: 12px; }
  /* El móvil encoge en las pantallas de escritorio estrechas (900 a 1300 px): a 290 px fijos pisaba el texto. */
  .movil { width: clamp(190px, 22vw, 290px); padding: 3.1%; border-radius: 15% / 7.4%; }
  .movil-pantalla { border-radius: 13% / 6.3%; }
}

/* 9 · Gato */
.gato-sec { display: grid; gap: 40px; padding: 110px var(--lado) 32px; background: var(--gato); overflow: clip; }
.gato-sec h2 { font-size: 44px; }
.gato-texto p { margin-top: 12px; font-size: 18px; }
.caricias { font-family: var(--serif); font-weight: 900; font-size: 24px !important; }
.gato { position: relative; display: block; width: calc(300 * var(--uw)); max-width: 100%; aspect-ratio: 975 / 856; margin-inline: auto; padding: 0; border: 0; background: none; cursor: grab; touch-action: pan-y; }
.gato img { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-cerrado { visibility: hidden; }
.gato.mimos .g-cerrado { visibility: visible; }
.gato.mimos .g-abierto { visibility: hidden; }
@media (min-width: 900px) {
  .gato-sec { min-height: 100svh; grid-template-columns: minmax(0, 480px) auto; justify-content: space-between; align-items: center; padding: 96px calc(100 * var(--uw)) 48px var(--lado); }
  .gato-sec h2 { font-size: calc(72 * var(--uw)); }
  .gato-texto p { margin-top: 22px; max-width: 430px; font-size: calc(22 * var(--uw)); }
  .caricias { font-size: calc(28 * var(--uw)) !important; margin-top: 36px !important; }
  .gato { width: calc(500 * var(--u)); margin: 0; }
}

/* 10 · Notas */
.notas { padding: 92px var(--lado) 24px; background: var(--menta); overflow: clip; }
.notas h2 { font-size: 32px; text-align: center; }
.notas-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 40px; }
/* La pared: notas esparcidas y montadas unas sobre otras. scroll.js da a cada una su sitio (--x, --y, de 0 a 1),
   su giro (--r) y a todas el lado (--lado), que encoge cuantas más hay. La pared no crece. Como el sitio se calcula
   sobre el hueco que deja la nota, ninguna se sale de la pared, tampoco agrandada. */
.pared-caja { position: relative; }
.pared { position: relative; height: 300px; list-style: none; }
.pared li { --s: var(--lado); position: absolute; left: calc((100% - var(--s)) * var(--x)); top: calc((100% - var(--s)) * var(--y)); width: var(--s); height: var(--s); rotate: var(--r); font-size: calc(var(--s) / 9.5); }
html:not(.reducido) .pared li { transition: width var(--dur-enter) var(--ease-out), height var(--dur-enter) var(--ease-out), left var(--dur-enter) var(--ease-out), top var(--dur-enter) var(--ease-out), font-size var(--dur-enter) var(--ease-out), rotate var(--dur-enter) var(--ease-out); }
/* Al frente: agrandada (--k veces) y recta, para leerla entera. Crece el lado y no una escala, para que el borde
   y la sombra sigan igual de finos. Solo esta se arrastra con el dedo. */
.pared li.activa { --s: calc(var(--lado) * var(--k)); rotate: 0deg; touch-action: none; font-size: calc(var(--s) / 15); } /* letra más pequeña en proporción: caben los 100 caracteres */
html .pared li.arrastrando { transition: none; }
.nota { display: grid; grid-template-rows: minmax(0, 1fr); align-content: space-between; gap: .3em; width: 100%; height: 100%; padding: .8em; border: 2px solid var(--tinta); border-radius: 0; background: var(--c); box-shadow: var(--sombra); color: var(--tinta); font: 700 1em/1.12 var(--mano); text-align: left; overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none; }
.arrastrando .nota { cursor: grabbing; }
.nota:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
/* En la pared, el texto largo acaba en «…» tras 3 líneas (antes se cortaba a media línea y asomaban trozos de letras);
   al frente se lee entero. */
.nota-cuerpo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; font-size: 1.3em; overflow: hidden; overflow-wrap: anywhere; }
.activa .nota-cuerpo { -webkit-line-clamp: unset; line-clamp: none; }
.nota-dibujo { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.nota-firma { font-size: .95em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nota-puestos { display: flex; gap: .25em; }
.nota-puestos img { width: 1.4em; height: 1.4em; }
/* Sin notas todavía (y solo cuando el servidor ya ha contestado, para que no parpadee al cargar). */
.pared-vacia { display: none; position: absolute; inset: 0; place-items: center; font: 700 22px/1.2 var(--mano); text-align: center; }
.cargada .pared:empty + .pared-vacia { display: grid; }
.tu-nota .boton:disabled { opacity: .5; cursor: default; }
.tu-nota { display: grid; gap: 14px; padding: 18px 20px 20px; border: 2px solid var(--tinta); background: var(--blanco); box-shadow: var(--sombra); }
.tu-nota h3 { font-family: var(--serif); font-weight: 900; font-size: 24px; line-height: 1.1; }
.nota-area { position: relative; height: 130px; border: 2px solid var(--tinta); background: var(--papel); overflow: hidden; }
.nota-area textarea { display: block; width: 100%; height: 100%; padding: 12px 16px; border: 0; outline: 0; background: none; resize: none; font-family: var(--mano); font-weight: 700; font-size: 21px; line-height: 1.2; }
.nota-area:focus-within { outline: 3px solid var(--tinta); outline-offset: 2px; }
.nota-area canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.nota-area.dibujando canvas { pointer-events: auto; touch-action: none; cursor: crosshair; }
.nota-modo { position: absolute; z-index: 2; right: 4px; bottom: 4px; min-height: 44px; padding: 0 14px; border: 0; background: none; font-weight: 600; font-size: 14px; text-decoration: underline; cursor: pointer; }
.nota-gracias:empty { display: none; }
.nota-gracias { font-weight: 600; font-size: 15px; }
.tu-nota .boton { width: 100%; }
.nota-nombre { width: 100%; min-height: 48px; padding: 0 16px; border: 2px solid var(--tinta); border-radius: 0; background: var(--papel); font-family: var(--mano); font-weight: 700; font-size: 19px; }
.nota-nombre:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.nota-nombre:disabled { opacity: .5; }
/* En móviles de 320 px los seis emojis no caben en una fila con su zona de toque de 44 px: pasan a dos filas. */
.nota-emojis { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; }
@media (max-width: 359px) { .nota-emojis { justify-content: center; } }
.nota-emojis button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-leave) linear; }
.nota-emojis button:active { transform: scale(.97); }
.nota-emojis button[aria-pressed="true"] { background: var(--rosa-claro); }
.nota-emojis button:disabled { opacity: .5; cursor: default; }
.nota-emojis img { width: 26px; height: 26px; }
@media (min-width: 900px) {
  .notas { min-height: 100svh; padding: 104px calc(90 * var(--uw)) 64px calc(110 * var(--uw)); }
  .notas h2 { font-size: calc(52 * var(--uw)); }
  .notas-rejilla { grid-template-columns: minmax(0, 700px) minmax(0, 470px); justify-content: space-between; align-items: center; }
  .pared { height: min(560px, 62svh); }
  .pared-vacia { font-size: 30px; }
  .tu-nota h3 { font-size: 32px; }
  .nota-area { height: 310px; }
}

/* 11 · Hola */
.hola { display: grid; justify-items: center; gap: 24px; padding: 92px var(--lado) 24px; background: var(--amarillo); overflow: clip; }
.hola-foto { width: 200px; height: auto; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--tinta); border-radius: 50%; background: var(--blanco); box-shadow: var(--sombra); }
.hola h2 { font-size: 40px; }
.hola-texto p { margin-top: 16px; font-size: 16px; }
.hola-perro { width: calc(230 * var(--uw)); margin: 24px 0 0 auto; }
@media (min-width: 900px) {
  .hola { min-height: 100svh; grid-template-columns: calc(420 * var(--uw)) minmax(0, 720px); column-gap: calc(104 * var(--uw)); justify-content: start; align-items: start; align-content: center; justify-items: start; padding: 120px var(--lado) 48px; }
  .hola-foto { width: 100%; }
  .hola h2 { font-size: calc(64 * var(--uw)); }
  .hola-texto p { margin-top: 28px; font-size: calc(21 * var(--uw)); }
  .hola-perro { width: calc(380 * var(--uw)); margin-top: calc(80 * var(--uw)); }
}

/* 12 · Reservar */
.final { position: relative; display: grid; justify-items: center; align-content: start; gap: 24px; min-height: 100svh; padding: 100px var(--lado) 48px; background: var(--rosa-claro); text-align: center; overflow: clip; }
.final-logo { width: calc(266 * var(--uw)); }
/* El texto se corta solo donde marcan los <br> del HTML (Javi, 11 nov), para que la forma encaje en la estrella. */
.regalo span { white-space: nowrap; }
.regalo { display: grid; place-items: center; text-align: center; width: 200px; aspect-ratio: 170 / 174.366; padding: 40px 20px; background: url("img/estrella-diciembre.svg") center / contain no-repeat; transform: rotate(8deg); font-family: var(--serif); font-weight: 900; font-size: 13px; line-height: 1.1; }
/* La reserva final es la acción principal de la página: más grande que los demás botones */
.final .boton-reservar { min-height: 68px; flex-direction: column; gap: 2px; padding: 10px 24px; font-size: 20px; line-height: 1.2; }
.final-bolso { width: calc(130 * var(--uw)); }
.subir { position: absolute; right: 20px; bottom: 24px; display: grid; place-items: center; width: 52px; height: 52px; border: 2px solid var(--tinta); border-radius: 50%; background: var(--blanco); box-shadow: var(--sombra); transition: transform var(--dur-press) var(--ease-out); }
.subir:active { transform: scale(.97); }
.subir svg { width: 26px; }
@media (min-width: 900px) {
  .final { align-content: center; gap: 28px; }
  .subir { right: 48px; bottom: 40px; }
  .final-logo { width: calc(440 * var(--uw)); }
  .final-sub { max-width: 800px; font-size: calc(22 * var(--uw)); }
  .regalo { position: absolute; left: calc(1120 * var(--uw)); top: calc(140 * var(--uw)); width: calc(250 * var(--uw)); padding: calc(52 * var(--uw)) calc(26 * var(--uw)); font-size: calc(15 * var(--uw)); }
  .final .boton-reservar { min-height: 76px; flex-direction: row; gap: 14px; padding: 0 44px; font-size: 24px; }
  .final-bolso { position: absolute; left: calc(140 * var(--uw)); bottom: calc(165 * var(--uw)); width: calc(240 * var(--uw)); }
}

/* Pie */
.pie { display: grid; justify-items: center; gap: 20px; padding: 40px var(--lado) 32px; background: var(--tinta); color: var(--papel); text-align: center; font-size: 15px; }
.pie a { color: inherit; }
.pie-ig { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 17px; text-decoration: none; }
.pie-ig svg { width: 26px; flex: none; }
.pie-ig span { text-align: left; }
.pie-ig b { display: block; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; }
.pie-legal a { display: inline-flex; align-items: center; min-height: 44px; }
.pie-creditos { font-size: 13px; opacity: .8; }
@media (hover: hover) and (pointer: fine) { .pie a:hover { opacity: .75; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Preguntas frecuentes ---------- */
.faq { display: grid; gap: 24px; padding: 92px var(--lado) 64px; }
.faq h2 { font-size: 30px; text-align: center; }
.faq-lista { display: grid; gap: 16px; width: 100%; max-width: 760px; margin-inline: auto; }
.faq details { border: 2px solid var(--tinta); background: var(--blanco); box-shadow: var(--sombra); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 20px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 20px; height: 20px; transition: transform var(--dur-leave) var(--ease-out); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { padding: 0 20px 20px; text-wrap: pretty; }
.faq details a { color: var(--tinta); }
@media (min-width: 900px) { .faq { padding-top: 120px; padding-bottom: 96px; } .faq h2 { font-size: 44px; } }