/* ══════════════════════════════════════════════════════════
   PREVIEW 2 · 5 oct 2026
   Base: aviana.qodeinteractive.com/spa-resort
   Medido de la propia página: titulares Prata en mayúsculas con
   tracking de 2-3 px, cuerpo Open Sans 15 px en gris #909090,
   dorado #D6B981, botones blancos sobre dorado sin redondeo,
   fondo blanco y secciones muy aireadas.
   Encargo de Emilio: reproducir esa base, no el sistema de marca.
   ══════════════════════════════════════════════════════════ */

:root{
  --oro:#D6B981;
  --oro-hondo:#C2A164;
  --negro:#000;
  --tinta:#1C1C1C;
  --texto:#909090;
  --texto-claro:rgba(255,255,255,.78);
  --blanco:#fff;
  --hueso:#F7F5F2;
  --linea:#E8E4DD;
  --display:"Prata",Georgia,"Times New Roman",serif;
  --cuerpo:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ancho:1200px;
  --gutter:clamp(1.25rem,5vw,3rem);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}
body{margin:0;background:var(--blanco);color:var(--texto);
  font-family:var(--cuerpo);font-size:15px;line-height:1.86;font-weight:400}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}

.env{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}
.seccion{padding-block:clamp(4.5rem,9vw,7.5rem)}
.seccion-hueso{background:var(--hueso)}
.medio{text-align:center}
.angosto{max-width:720px;margin-inline:auto}

/* ── tipografía ───────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;color:var(--negro);
  text-transform:uppercase;margin:0;line-height:1.35}
.t-grande{font-size:clamp(1.5rem,.9rem + 2.3vw,2.25rem);letter-spacing:3px}
.t-media{font-size:clamp(1.05rem,.95rem + .6vw,1.3rem);letter-spacing:2px}
.t-chica{font-size:.8125rem;letter-spacing:2px}
p{margin:0}
.parrafo{margin-top:1.6rem;color:var(--texto);font-size:15px;line-height:1.95}
.sobre-oscuro h1,.sobre-oscuro h2,.sobre-oscuro h3{color:var(--blanco)}
.sobre-oscuro .parrafo{color:var(--texto-claro)}

/* el adorno dorado que Aviana pone sobre cada título */
.adorno{width:42px;height:auto;margin:0 auto 1.9rem;display:block;opacity:.95}
.regla{width:240px;max-width:60%;height:1px;background:var(--linea);
  margin:0 auto 2rem;border:0}
.sobre-oscuro .regla{background:rgba(255,255,255,.42)}

/* ── botones ──────────────────────────────────────────── */
.btn{display:inline-block;background:var(--oro);color:var(--blanco);text-decoration:none;
  font-family:var(--cuerpo);font-size:13px;letter-spacing:2.6px;text-transform:uppercase;
  font-weight:400;padding:15px 46px;border:1px solid var(--oro);
  transition:background .3s ease,border-color .3s ease,color .3s ease}
.btn:hover{background:var(--oro-hondo);border-color:var(--oro-hondo)}
.btn-hueco{background:transparent;color:var(--blanco);border-color:rgba(255,255,255,.55)}
.btn-hueco:hover{background:var(--blanco);border-color:var(--blanco);color:var(--negro)}
.btn-hueco-oscuro{background:transparent;color:var(--negro);border-color:var(--linea)}
.btn-hueco-oscuro:hover{background:var(--negro);border-color:var(--negro);color:var(--blanco)}
.botones{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:2.5rem}

/* ── cabecera ─────────────────────────────────────────── */
.cabecera{position:absolute;inset:0 0 auto;z-index:50;background:transparent;
  transition:background .35s ease,box-shadow .35s ease}
.cabecera.fija{position:fixed;background:var(--blanco);box-shadow:0 1px 0 var(--linea)}
.cabecera .env{display:flex;align-items:center;gap:2rem;height:86px;max-width:1360px}
.logo{height:34px;flex:none;display:flex;align-items:center;text-decoration:none}
.logo svg,.logo img{height:100%;width:auto}
.nav{display:none;margin-left:auto;gap:2.5rem;font-size:12px;letter-spacing:2px;
  text-transform:uppercase}
.nav a{text-decoration:none;color:var(--blanco);transition:color .3s ease}
.cabecera.fija .nav a{color:var(--negro)}
.nav a:hover{color:var(--oro)}
.cabecera .btn{padding:12px 30px;font-size:12px;letter-spacing:2px}
@media (min-width:66rem){.nav{display:flex}}
@media (max-width:66rem){.cabecera .btn{margin-left:auto}}

/* ── 1 · portada ──────────────────────────────────────── */
.portada{position:relative;min-height:min(760px,100svh);display:grid;place-items:center;
  text-align:center;overflow:hidden;isolation:isolate;padding-block:9rem 5rem}
.portada-foto{position:absolute;inset:0;z-index:-2}
.portada-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 50%} /* 8 oct 13:50: banner H, ella a la izquierda y él a la derecha; en móvil se ve el centro (agua y piedra) con ambos a los lados */
.portada-velo{position:absolute;inset:0;z-index:-1;background:rgba(20,16,13,.46)}
.portada h1{color:var(--blanco);font-size:clamp(1.6rem,1rem + 2.9vw,2.75rem);
  letter-spacing:clamp(3px,.5vw,7px);line-height:1.45}
.portada .parrafo{color:var(--texto-claro);max-width:540px;margin-inline:auto}
.portada .apunte{margin-top:2.6rem;font-size:12px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--oro)}

/* ── 2 · mosaico de servicios ─────────────────────────── */
.mosaico{display:grid;grid-template-columns:1fr;margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:38rem){.mosaico{grid-template-columns:repeat(2,1fr)}}
@media (min-width:64rem){.mosaico{grid-template-columns:repeat(3,1fr)}}
.celda{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  text-decoration:none;background:var(--tinta)}
.celda img{width:100%;height:100%;object-fit:cover;
  transition:transform 1s ease,opacity .45s ease}
.celda::after{content:"";position:absolute;inset:0;background:rgba(20,16,13,.42);
  transition:background .45s ease}
.celda:hover img{transform:scale(1.06)}
.celda:hover::after{background:rgba(20,16,13,.62)}
.celda-txt{position:absolute;inset:0;z-index:2;display:grid;align-content:center;
  justify-items:center;padding:1.5rem;text-align:center}
.celda-txt h3{color:var(--blanco);font-size:1.0625rem;letter-spacing:2px}
.celda-txt span{margin-top:.7rem;font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--oro)}

/* ── 3 · la oferta ────────────────────────────────────── */
.oferta{position:relative;isolation:isolate;overflow:hidden}
.oferta-foto{position:absolute;inset:0;z-index:-2}
.oferta-foto img{width:100%;height:100%;object-fit:cover}
.oferta-velo{position:absolute;inset:0;z-index:-1;background:rgba(16,13,11,.72)}
.oferta-int{display:grid;gap:2rem;align-items:center;justify-items:center;
  padding-block:clamp(4rem,8vw,6.5rem);text-align:center}
@media (min-width:60rem){
  .oferta-int{grid-template-columns:1fr 1fr;text-align:left;justify-items:start;gap:4rem}
  .oferta-int .cifra{justify-self:end}
}
.cifra{font-family:var(--display);color:var(--blanco);line-height:.9;
  font-size:clamp(3.6rem,2rem + 7.5vw,7.5rem);letter-spacing:-2px}
.cifra small{font-size:.42em;letter-spacing:0}
.cifra s{display:block;font-family:var(--cuerpo);font-size:.14em;letter-spacing:2.6px;
  color:var(--texto-claro);margin-bottom:.9rem;text-transform:uppercase}
.oferta h2{color:var(--blanco);font-size:clamp(1.4rem,.9rem + 2.1vw,2.1rem);letter-spacing:3px}
.oferta .parrafo{color:var(--texto-claro);max-width:38ch}

/* ── 4 · tarifas ──────────────────────────────────────── */
.tarifas{list-style:none;margin:clamp(2.5rem,5vw,3.5rem) auto 0;padding:0;max-width:760px}
.tarifa{display:grid;grid-template-columns:1fr auto;gap:.4rem 1.5rem;align-items:baseline;
  padding-block:1.6rem;border-bottom:1px solid var(--linea)}
.tarifa:first-child{border-top:1px solid var(--linea)}
.tarifa h3{font-size:1rem;letter-spacing:2px;text-align:left}
.tarifa p{grid-column:1/2;color:var(--texto);font-size:14px;line-height:1.7}
.tarifa .importe{font-family:var(--display);color:var(--negro);font-size:1.5rem;
  letter-spacing:1px;white-space:nowrap;font-variant-numeric:tabular-nums}
.tarifa .importe s{color:var(--texto);font-family:var(--cuerpo);font-size:.82rem;
  margin-right:.5rem;letter-spacing:0}
.tarifa .importe em{font-style:normal;color:var(--oro)}
.tarifa-pendiente .importe{font-family:var(--cuerpo);font-size:12px;letter-spacing:2px;
  text-transform:uppercase;color:var(--oro)}

/* ── 5 · el circuito, en columnas ─────────────────────── */
.paradas{list-style:none;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;display:grid;
  gap:clamp(2rem,4vw,3rem);text-align:center}
@media (min-width:38rem){.paradas{grid-template-columns:repeat(2,1fr)}}
@media (min-width:62rem){.paradas{grid-template-columns:repeat(3,1fr)}}
.parada b{display:block;font-family:var(--display);font-size:13px;letter-spacing:3px;
  color:var(--oro)}
.parada h3{margin-top:.9rem;font-size:.9375rem;letter-spacing:2px}
.parada p{margin-top:.8rem;font-size:14px;line-height:1.8;max-width:30ch;margin-inline:auto}

/* ── 6 · la diferencia ────────────────────────────────── */
.motivos{list-style:none;margin:clamp(2.5rem,5vw,4rem) 0 0;padding:0;display:grid;
  gap:clamp(2.5rem,5vw,3.5rem);text-align:center}
@media (min-width:60rem){.motivos{grid-template-columns:repeat(3,1fr)}}
.motivo h3{font-size:1rem;letter-spacing:2px;line-height:1.6}
.motivo p{margin-top:1.1rem;font-size:14px;line-height:1.9;max-width:34ch;margin-inline:auto}
.motivo .cola{color:var(--oro);font-style:italic;font-family:var(--display);
  text-transform:none;font-size:14px;letter-spacing:.5px;margin-top:1rem}

/* ── 7 · historia ─────────────────────────────────────── */
.historia-int{display:grid;gap:clamp(2.5rem,5vw,4.5rem);align-items:center}
@media (min-width:60rem){.historia-int{grid-template-columns:minmax(0,.9fr) minmax(0,1fr)}}
.retrato{aspect-ratio:4/5;overflow:hidden;background:var(--hueso)}
.retrato img{width:100%;height:100%;object-fit:cover}
.historia .parrafo + .parrafo{margin-top:1.1rem}
.hitos{margin:2.5rem 0 0}
.hitos dt{font-family:var(--display);font-size:12px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--negro);padding-top:1.2rem;border-top:1px solid var(--linea)}
.hitos dd{margin:.5rem 0 1.2rem;font-size:14px;line-height:1.8}

/* ── 8 · dónde estamos (patrón de 4 columnas) ─────────── */
.visita{position:relative;isolation:isolate;overflow:hidden;
  padding-block:clamp(4.5rem,9vw,7.5rem)}
.visita-foto{position:absolute;inset:0;z-index:-2}
.visita-foto img{width:100%;height:100%;object-fit:cover}
.visita-velo{position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.93)}
.visita-foto img{filter:saturate(.35)}
.columnas{list-style:none;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;display:grid;
  gap:clamp(2rem,4vw,2.5rem);text-align:center;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.columna dt{font-family:var(--display);font-size:.875rem;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--negro)}
.columna dd{margin:1rem 0 0;font-size:14px;line-height:1.95}
.columna a{color:var(--texto);text-decoration:none;border-bottom:1px solid var(--linea)}
.columna a:hover{color:var(--negro);border-bottom-color:var(--oro)}

/* ── 9 · pie ──────────────────────────────────────────── */
.pie{background:var(--tinta);color:var(--texto-claro);
  padding-block:clamp(3rem,6vw,4.5rem) 2rem;text-align:center}
.pie .logo-pie{width:170px;max-width:60vw;height:auto;margin:0 auto 1.8rem}
.pie p{font-size:14px;line-height:1.95}
.pie-legal{margin-top:2.5rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;flex-wrap:wrap;gap:.5rem 1.75rem;justify-content:center;font-size:12px;
  letter-spacing:1px}
.pie-legal a{color:var(--texto-claro);text-decoration:none}
.pie-legal a:hover{color:var(--oro)}

/* ══════════════════════════════════════════════════════════
   BONO REGALO · 5 oct 2026
   El cheque se dibuja en el móvil del comprador (canvas → JPG) y
   se comparte con el menú nativo (Web Share API nivel 2), que
   adjunta la imagen. No hay envío automático al destinatario:
   Meta exige su opt-in y no lo tenemos. Ver CONTEXTO.md §4 duodecies.
   ══════════════════════════════════════════════════════════ */
.regalo-int{display:grid;gap:clamp(2.5rem,5vw,4rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
@media (min-width:64rem){.regalo-int{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  align-items:start}}

.formulario{display:grid;gap:1.4rem}
.campo{display:grid;gap:.55rem}
.campo label{font-family:var(--display);font-size:.75rem;letter-spacing:2.2px;
  text-transform:uppercase;color:var(--negro)}
.campo input,.campo select,.campo textarea{font-family:var(--cuerpo);font-size:15px;
  color:var(--negro);background:var(--blanco);border:1px solid var(--linea);border-radius:0;
  padding:14px 16px;width:100%;transition:border-color .3s ease}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--oro);outline:none}
.campo textarea{resize:vertical;min-height:84px;line-height:1.7}
.campo .pista{font-size:12px;color:var(--texto);line-height:1.6}
.campo-doble{display:grid;gap:1.4rem}
@media (min-width:30rem){.campo-doble{grid-template-columns:1fr 1fr}}
.formulario .btn{justify-self:start;cursor:pointer;font-family:var(--cuerpo)}
.formulario button.btn{-webkit-appearance:none;appearance:none}

.cheque-caja{display:grid;gap:1.25rem;justify-items:center}
.cheque-lienzo{width:100%;max-width:560px;border:1px solid var(--linea);background:var(--hueso)}
.cheque-lienzo canvas{width:100%;height:auto;display:block}
.cheque-acciones{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.cheque-acciones .btn{cursor:pointer;font-family:var(--cuerpo);-webkit-appearance:none;appearance:none}
.cheque-aviso{font-size:13px;line-height:1.75;color:var(--texto);text-align:center;max-width:46ch}
.cheque-aviso b{color:var(--negro);font-weight:600}
[hidden]{display:none!important}

/* ══════════════════════════════════════════════════════════
   PÁGINAS INTERIORES · 5 oct 2026
   Mismo lenguaje que la portada (base Aviana): Prata en
   versalitas espaciadas, Open Sans gris, dorado #D6B981 y
   mucho aire. Lo que cambia es el ritmo: aquí se lee.
   ══════════════════════════════════════════════════════════ */

/* cabecera de página: más baja que la portada, no compite con el contenido */
.portadilla{position:relative;isolation:isolate;overflow:hidden;text-align:center;
  padding-block:clamp(9rem,15vw,13rem) clamp(4rem,8vw,6rem);display:grid;place-items:center}
.portadilla-foto{position:absolute;inset:0;z-index:-2}
.portadilla-foto img{width:100%;height:100%;object-fit:cover}
.portadilla-velo{position:absolute;inset:0;z-index:-1;background:rgba(20,16,13,.55)}
.portadilla h1{color:var(--blanco);font-size:clamp(1.5rem,1rem + 2.6vw,2.5rem);
  letter-spacing:clamp(3px,.5vw,6px)}
.portadilla .parrafo{color:var(--texto-claro);max-width:52ch;margin-inline:auto}

/* índice de la página */
.indice{list-style:none;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;display:grid;
  gap:1px;background:var(--linea);border-block:1px solid var(--linea)}
@media (min-width:46rem){.indice{grid-template-columns:repeat(3,1fr)}}
.indice a{display:block;background:var(--blanco);padding:1.5rem 1.25rem;text-decoration:none;
  text-align:center;transition:background .3s ease}
.indice a:hover{background:var(--hueso)}
.indice b{display:block;font-family:var(--display);font-size:12px;letter-spacing:3px;
  color:var(--oro)}
.indice span{display:block;margin-top:.6rem;font-family:var(--display);font-size:.9375rem;
  letter-spacing:2px;text-transform:uppercase;color:var(--negro)}

/* bloque de servicio: foto a un lado, texto al otro, alternando */
.servicio{padding-block:clamp(4rem,8vw,6.5rem)}
.servicio:nth-child(even){background:var(--hueso)}
.servicio-int{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:start}
@media (min-width:62rem){
  .servicio-int{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .servicio:nth-child(even) .servicio-foto{order:2}
}
.servicio-foto{position:sticky;top:2rem;aspect-ratio:4/5;overflow:hidden;background:var(--hueso)}
.servicio-foto img{width:100%;height:100%;object-fit:cover}
@media (max-width:62rem){.servicio-foto{position:static;aspect-ratio:16/10}}
.servicio h2{font-size:clamp(1.4rem,1rem + 1.9vw,2.1rem);letter-spacing:3px;line-height:1.3}
.servicio h2 em{font-style:normal;display:block;color:var(--oro)}

/* fichas dentro de cada servicio */
.ficha{border-top:1px solid var(--linea);padding-top:1.75rem;margin-top:2.25rem}
.ficha h3{font-size:1rem;letter-spacing:2px}
.ficha .lema{margin-top:.6rem;font-family:var(--display);font-style:italic;color:var(--oro);
  font-size:.9375rem;text-transform:none;letter-spacing:.3px}
.ficha .parrafo{margin-top:1rem}
.marcas{list-style:none;margin:1.4rem 0 0;padding:0}
.marcas li{position:relative;padding-left:1.4rem;padding-block:.5rem;font-size:14px;
  line-height:1.7;color:var(--texto)}
.marcas li::before{content:"";position:absolute;left:0;top:1.1rem;width:.35rem;height:.35rem;
  background:var(--oro);transform:rotate(45deg)}
.para-ti{margin-top:1.4rem;padding:1.1rem 1.25rem;background:var(--hueso);font-size:14px;
  line-height:1.75;border-left:2px solid var(--oro)}
.servicio:nth-child(even) .para-ti{background:var(--blanco)}
.para-ti b{color:var(--negro);font-weight:600}
.pares{display:grid;gap:1rem;margin-top:1.6rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.par dt{font-size:11px;letter-spacing:2.2px;text-transform:uppercase;color:var(--oro);
  font-family:var(--display)}
.par dd{margin:.5rem 0 0;font-size:14px;color:var(--negro);line-height:1.6}
.par .sin{color:var(--texto);font-style:italic}

/* cierre de página */
.remate{text-align:center;padding-block:clamp(4rem,8vw,6.5rem);background:var(--hueso)}
.remate h2{font-size:clamp(1.4rem,1rem + 1.9vw,2.1rem);letter-spacing:3px}


/* ══════════════════════════════════════════════════════════
   HERO HÍBRIDO · 8 oct 2026 — Verónica eligió el banner de la
   preview 1 (oscuro, claim grande, «el agua» en dorado) y, de ahí
   para abajo, la preview 2. Solo el h1 va en Cinzel, que es la
   tipografía de su marca; el resto sigue en Prata/Open Sans.
   ══════════════════════════════════════════════════════════ */
.portada{min-height:min(46rem,100svh);padding-block:9rem 5rem;text-align:center}
.portada-velo{background:linear-gradient(180deg,rgba(26,21,17,.74) 0%,rgba(26,21,17,.6) 38%,
  rgba(26,21,17,.76) 78%,#221D18 100%)} /* 8 oct: +0.1 en el centro, los albornoces blancos de la foto nueva restaban contraste */
.portada .epigrafe{color:var(--oro);letter-spacing:.3em;font-size:11px;margin-bottom:1.6rem}
.portada h1{font-family:"Cinzel",Georgia,"Times New Roman",serif;font-weight:400;color:var(--blanco);
  text-transform:uppercase;font-size:clamp(2.1rem,1.1rem + 4.4vw,4.4rem);line-height:1.14;
  letter-spacing:.03em;text-wrap:balance}
.portada h1 em{font-style:normal;color:var(--oro)}
.portada .parrafo{max-width:40ch;margin-inline:auto}
.portada .apunte{margin-top:clamp(2.5rem,5vw,3.5rem);line-height:1.9}

/* El descriptor «Centro Nature» va como texto bajo el logotipo (el logo completo
   lleva «Centro de Bienestar» dibujado en curvas y ya no vale). */
.logo{flex-direction:column;align-items:flex-start;gap:.3rem;height:auto}
.logo svg{height:26px;width:auto} /* 8 oct: 22→26 px, el logotipo tiene ahora sitio arriba para la tilde de la Ó y las letras quedan del mismo tamaño */
.logo-desc{font-family:var(--display);font-size:9px;letter-spacing:3px;text-transform:uppercase;
  color:var(--oro);line-height:1;white-space:nowrap}
.pie-marca{display:grid;justify-items:center;gap:.6rem;margin:0 auto 1.8rem}
.pie-marca .logo-pie{width:220px;max-width:70vw;height:auto;margin:0}
.pie-marca .logo-desc{font-size:10px;letter-spacing:4px}

/* el menú no se parte en dos líneas: compacto, como el de Aviana */
.nav{gap:1.6rem;font-size:11px}
.nav a{white-space:nowrap}

/* cabecera compacta en móvil: con el descriptor bajo el logo, el botón se salía */
@media (max-width:34rem){
  .cabecera .env{gap:.75rem;height:72px;padding-inline:1rem}
  .logo svg{height:20px}
  .logo-desc{font-size:8px;letter-spacing:2.4px}
  .cabecera .btn{padding:10px 14px;font-size:10px;letter-spacing:1.6px;flex:none}
}

/* retrato de Verónica: la foto es 2:3 y el marco 4:5; el recorte se hace por abajo, no por la cabeza */
/* 8 oct 2026 · el retrato (933×1400, 2:3) iba en una caja 4:5 y se comía la cabeza.
   La caja toma la proporción real de la foto: se ve entera, sin recorte. */
.historia .retrato{aspect-ratio:933/1400}
.historia .retrato img{object-position:50% 0}

/* celda con foto clara (tarjeta regalo): velo más denso para que el texto blanco se lea */
.celda-clara::after{background:rgba(20,16,13,.58)}
.celda-clara:hover::after{background:rgba(20,16,13,.7)}

/* 8 oct 2026 · portadilla con el retrato de Verónica (regalos): el título baja por debajo de la cara */
.portadilla-retrato{padding-block:clamp(19rem,36vw,31rem) clamp(4rem,8vw,6rem)}


/* ══════════════════════════════════════════════════════════
   PORTADA COMO /preview/ · 8 oct 2026 — Verónica quiere el banner
   de veronicacastillo.es/preview/ (texto abajo a la izquierda,
   titular grande en Cinzel, bajada y dos botones), con la foto de
   Vidu en lugar de la fachada. Medidas copiadas de su estilo.css.
   ══════════════════════════════════════════════════════════ */
.portada-izq{--borde:max(clamp(1.25rem,5vw,4.5rem),calc((100vw - 80rem)/2 + clamp(1.25rem,5vw,4.5rem)));
  display:block;height:100svh;min-height:38rem;padding:0;text-align:left;background:#221D18}
.portada-izq .portada-velo{background:
  linear-gradient(180deg,rgba(34,29,24,.52) 0%,rgba(34,29,24,.1) 24%,rgba(34,29,24,0) 34%),
  linear-gradient(0deg,rgba(34,29,24,.88) 0%,rgba(34,29,24,.72) 26%,
    rgba(34,29,24,.44) 48%,rgba(34,29,24,.1) 72%,rgba(34,29,24,0) 100%),
  linear-gradient(90deg,rgba(34,29,24,.5) 0%,rgba(34,29,24,.16) 46%,rgba(34,29,24,0) 72%)}
.portada-int{position:absolute;inset:auto 0 0;padding:0 var(--borde) clamp(4rem,9vh,6.5rem);
  display:grid;gap:clamp(1.25rem,2.5vw,2rem);justify-items:start;color:#F6F0E6}
.simbolo-hero{width:min(4.5rem,13vw);height:auto;display:block}
.portada-izq h1{font-family:"Cinzel",Georgia,serif;font-weight:400;text-transform:none;margin:0;
  font-size:clamp(2.4rem,1.1rem + 6vw,6rem);line-height:.98;letter-spacing:-.035em;
  max-width:14ch;color:#F6F0E6;text-wrap:balance}
.portada-izq h1 em{font-style:normal;color:#D7B56D}
.portada-bajada{max-width:40ch;margin:0;color:#D6C9B6;
  font-family:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:clamp(1rem,.95rem + .35vw,1.1875rem);line-height:1.6}
.portada-acc{display:flex;flex-wrap:wrap;gap:.9rem 1rem;margin-top:.5rem}
.portada-acc .btn{display:inline-flex;align-items:center;
  font-family:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:600;font-size:.9375rem;letter-spacing:.02em;text-transform:none;
  padding:1rem 1.7rem;border-radius:2px;
  transition:background .35s,color .35s,transform .35s,box-shadow .35s,border-color .35s}
.portada-acc .btn-oro{background:#D7B56D;border:1px solid #D7B56D;color:#221D18;
  box-shadow:0 2px 6px rgba(0,0,0,.22),0 18px 40px -18px rgba(215,181,109,.8)}
.portada-acc .btn-oro:hover{background:#E6C98A;border-color:#E6C98A;transform:translateY(-2px)}
.portada-acc .btn-fantasma{background:transparent;color:#F6F0E6;border:1px solid rgba(246,240,230,.36)}
.portada-acc .btn-fantasma:hover{border-color:#D7B56D;color:#D7B56D;background:rgba(215,181,109,.1)}
.cue{position:absolute;left:var(--borde);bottom:1.5rem;display:flex;align-items:center;
  gap:.75rem;font-size:.6875rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,240,230,.68);font-family:"Karla",-apple-system,BlinkMacSystemFont,sans-serif}
.cue i{display:block;width:1px;height:2.5rem;background:linear-gradient(#D7B56D,transparent);
  transform-origin:top;animation:cae 2.4s cubic-bezier(.16,1,.3,1) infinite}
@keyframes cae{0%{transform:scaleY(0);opacity:0}30%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.cue i{animation:none}}

/* ══ CIRCUITO CON FOTO DE FONDO · 8 oct 2026 ══════════════════
   Emilio: «ponme una imagen de fondo estilo banner, que si no la web
   se ve muy simple». Foto de Vidu (tumbonas térmicas y pared de piedra
   con agua), velo oscuro como el de .oferta y textos en claro. */
.seccion-foto{position:relative;isolation:isolate;overflow:hidden;background:#221D18}
.seccion-foto-img{position:absolute;inset:0;z-index:-2}
.seccion-foto-img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.seccion-foto-velo{position:absolute;inset:0;z-index:-1;background:rgba(20,16,13,.76)}
.seccion-foto h2,.seccion-foto .parada h3{color:var(--blanco)}
.seccion-foto .parrafo,.seccion-foto .parada p{color:var(--texto-claro)}
.seccion-foto .parada b{color:var(--oro)}