/* v4.css — sobre v3-1.css + v3-2.css. Ronda del 24/10 con lo acordado con Ester el 22/10:
   tipografía de marca (Canela principal, Playfair Italic solo en citas y destacados), bloque central sin foto
   con frase y reseñas con aire, formulario con franja horaria y código postal, teléfono de recepción.
   Variantes por atributos en <html>: data-pausa="crema|dorado" · data-resenas="tarjetas|cita".

   TIPOGRAFÍA (24/10): la Canela que mandó Ester es TRIAL y le faltan glifos (p. ej. ó, 0, 7, ©): no se puede
   usar ni en vista previa. Mientras no haya licencia web, el papel de Canela lo hace Cormorant Garamond (OFL,
   autoalojada), que es la sustituta libre más parecida. Al licenciar Canela: descomentar los @font-face de abajo,
   poner Canela la primera en --serif y quitar Cormorant. */
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/CormorantGaramond[wght].woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("../fonts/CormorantGaramond-Italic[wght].woff2") format("woff2");font-style:italic;font-weight:300 700;font-display:swap}
/* @font-face{font-family:Canela;src:url(../fonts/canela-Light-TRIAL.otf) format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:Canela;src:url(../fonts/canela-Regular-TRIAL.otf) format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:Canela;src:url(../fonts/canela-Bold-TRIAL.otf) format("opentype");font-weight:700;font-display:swap} */
:root{--serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;--quote:Playfair,Georgia,serif;--sans:"Cormorant Garamond",Georgia,serif}
body{font-family:var(--serif);font-size:20px;line-height:1.45;font-weight:500}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
em{font-family:var(--quote);font-style:italic;font-weight:400}
.btn{font-family:var(--serif);font-weight:600;font-size:1.1rem;letter-spacing:.01em}
.top .btn{font-size:1rem}
.hero .lead strong{font-family:var(--quote)}
.steps li::before,.steps b{font-family:var(--serif)}
legend,.field span,.opts span,.consent,.help,.footnote,.form-status,footer{font-family:var(--serif)}
.door-text span,.band-text .btn{font-family:var(--serif)}
.hero .lead,.hero-note,.door-text p,.band-text p,.contact-side p,.cabina p{font-weight:500}
.form-subtitle,.help,.consent,.footnote,.resena figcaption span,.pausa-sub{font-weight:500}

/* Bloque central: frase sobre fondo plano, sin foto, y reseñas que no ocupan toda la banda */
.pausa{padding:var(--section) var(--gutter);text-align:center}
html[data-pausa="crema"] .pausa{background:var(--sand);color:var(--ink)}
html[data-pausa="dorado"] .pausa{background:var(--gold);color:var(--ink)}
.pausa-frase{font-size:clamp(2.4rem,7vw,5rem);line-height:1;max-width:14ch;margin:0 auto}
.pausa-frase em{font-size:.92em}
.pausa-sub{margin:18px auto 0;max-width:60ch;font-size:1.2rem;color:var(--muted);text-wrap:balance}
.nowrap{white-space:nowrap}
html[data-pausa="dorado"] .pausa-sub{color:#4a3a12}
.resenas{display:grid;grid-auto-flow:column;grid-auto-columns:min(80vw,320px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;max-width:1120px;margin:clamp(36px,6vw,64px) auto 0;padding:4px 4px 8px;text-align:left}
.resenas::-webkit-scrollbar{display:none}
.resena{margin:0;scroll-snap-align:center;background:#fff;border-radius:14px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:14px}
html[data-pausa="dorado"] .resena{background:var(--ivory)}
.resena blockquote{margin:0;font-family:var(--quote);font-style:italic;font-size:1.08rem;line-height:1.45;text-wrap:pretty}
.resena figcaption{font-size:1rem;margin-top:auto}
.resena figcaption span{display:block;color:var(--muted);font-size:.85rem;margin-top:2px}
@media(min-width:1100px){html[data-resenas="tarjetas"] .resenas{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible}}
/* Variante «cita»: una reseña cada vez, grande, con puntos */
html[data-resenas="cita"] .resenas{grid-auto-columns:100%;max-width:760px;gap:0;padding:0}
html[data-resenas="cita"] .resena{background:transparent;padding:8px 12px;text-align:center;align-items:center;scroll-snap-align:start}
html[data-resenas="cita"] .resena blockquote{font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.35;max-width:30ch}
.resenas-dots{display:none;justify-content:center;gap:4px;margin-top:16px}
html[data-resenas="cita"] .resenas-dots{display:flex}
.resenas-dots button{width:28px;height:28px;border:0;background:transparent;padding:0;cursor:pointer;display:grid;place-items:center;border-radius:50%}
.resenas-dots button i{width:10px;height:10px;border-radius:50%;border:1px solid var(--ink);display:block}
.resenas-dots button[aria-current="true"] i{background:var(--ink)}
.resenas-dots button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Repaso de densidad: puertas y bandas con menos texto, reseña de Pilar fuera de la foto */
.door-text span{margin-top:10px}
.band-text p{max-width:28ch}
.band-text .btn{margin-top:12px}
.hero .lead{margin-bottom:22px}
.cita-regalo{margin:0;padding:clamp(22px,4vw,40px) var(--gutter);background:var(--ivory);text-align:center;font-family:var(--quote);font-style:italic;font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.4;color:var(--ink);text-wrap:balance}
.cita-regalo cite{display:block;font-family:var(--serif);font-style:normal;font-size:.95rem;color:var(--muted);margin-top:8px}

/* Cita en la banda «Para regalar» (ya no se usa; se conserva por si vuelve) */
.band-quote{margin:14px 0 0;font-family:var(--quote);font-style:italic;font-size:.98rem;line-height:1.4;color:rgba(255,255,255,.92);max-width:36ch}
.band-quote cite{display:block;font-family:var(--serif);font-style:normal;font-size:.8rem;color:rgba(255,255,255,.75);margin-top:6px}

/* Formulario: franja horaria y código postal */
.field-row{display:grid;grid-template-columns:1fr;gap:0 16px}
@media(min-width:540px){.field-row{grid-template-columns:1fr 1fr}}
.field.optional span::after{content:" (opcional)";color:var(--muted);font-weight:400}

/* Puerta Corporal: foto fija (HIFU), sin vídeo */
.door[data-elige="corporal"] img{object-position:center 55%}