/* ==========================================================================
   PLANTILLA PREMIUM · hoja de estilos base
   No hace falta tocar nada aquí para un cliente nuevo: los colores y las
   tipografías salen de las variables, y esas las escribe contenido.js.
   ========================================================================== */

:root{
  /* Estos cuatro los pisa contenido.js con la paleta del cliente */
  --fondo:#0e1a12;      /* fondo general, siempre el más oscuro */
  --tinta:#f5f1e6;      /* texto sobre el fondo */
  --acento:#d3a75c;     /* dorado / color de marca: botones, kickers, cifras */
  --acento2:#7fc39a;    /* secundario: subtítulos, degradados */

  --serif:'Archivo',Impact,sans-serif;
  --sans:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);

  /* Derivados: no tocar */
  --tinta60:color-mix(in srgb,var(--tinta) 60%,transparent);
  --tinta45:color-mix(in srgb,var(--tinta) 45%,transparent);
  --linea:color-mix(in srgb,var(--tinta) 14%,transparent);
  --velo:color-mix(in srgb,var(--fondo) 96%,#000);
}

*{box-sizing:border-box;margin:0;padding:0}
/* clip y NO hidden: hidden rompe los position:sticky de las secciones 3D */
html,body{overflow-x:clip}
body{font-family:var(--sans);background:var(--fondo);color:var(--tinta);
  line-height:1.72;-webkit-font-smoothing:antialiased}
@media(pointer:fine){body.cursor-propio{cursor:none}}
img{display:block;max-width:100%}
canvas{display:block}
a{color:inherit}

.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
section{padding:clamp(74px,11vw,132px) 0;position:relative}
h1,h2,h3{font-family:var(--serif);font-weight:700;line-height:.98;letter-spacing:-.035em}
h2{font-size:clamp(2.3rem,7vw,4.8rem)}
h1 em,h2 em{font-style:normal;color:var(--acento)}
.kicker{font-size:.64rem;letter-spacing:.46em;text-transform:uppercase;color:var(--acento);
  margin-bottom:20px;font-weight:500}
.lead{color:var(--tinta60);max-width:46ch;font-size:clamp(1rem,2.3vw,1.13rem);font-weight:300}
.lead+.lead{margin-top:16px}
.pal{display:inline-block;will-change:transform,opacity}
.centrado{text-align:center}
.centrado .lead{margin-inline:auto}

/* ---------- intro de carga ---------- */
#carga{position:fixed;inset:0;z-index:400;background:var(--fondo);display:grid;
  place-items:center;overflow:hidden}
#carga .titulo{display:flex;gap:.02em;font-family:var(--serif);font-weight:700;
  font-size:clamp(2.4rem,11vw,6rem);letter-spacing:.06em;line-height:1}
#carga .titulo span{display:inline-block;will-change:transform,opacity}
#carga i{position:absolute;bottom:0;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--acento2),var(--acento))}

/* ---------- cursor y progreso ---------- */
#cur{position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;background:var(--acento);
  z-index:350;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:screen}
#aro{position:fixed;top:0;left:0;width:38px;height:38px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--acento) 50%,transparent);z-index:349;
  pointer-events:none;transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s}
#aro span{position:absolute;inset:0;display:grid;place-items:center;font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--acento);opacity:0;transition:.3s}
#aro.ver{width:76px;height:76px;background:color-mix(in srgb,var(--acento) 16%,transparent)}
#aro.ver span{opacity:1}
@media(pointer:coarse){#cur,#aro{display:none}}
#prog{position:fixed;top:0;left:0;height:2px;width:0;z-index:300;
  background:linear-gradient(90deg,var(--acento2),var(--acento))}
#particulas{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.55}

/* ---------- navegación ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:300;padding:14px 0;transform:none;
  transition:transform .5s var(--ease);background:color-mix(in srgb,var(--fondo) 80%,transparent);
  backdrop-filter:blur(18px);border-bottom:1px solid var(--linea)}
.nav.on{transform:none}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px}
.nav .marca{font-family:var(--serif);font-weight:700;letter-spacing:-.02em;font-size:1.18rem;text-decoration:none}
/* Con logotipo, el nombre no se escribe: ya está dentro de la imagen. */
.nav .marca.con-logo{display:flex;align-items:center}
.nav .marca.con-logo img{height:38px;width:auto;display:block}
@media(max-width:720px){ .nav .marca.con-logo img{height:32px} }
.logo-pie{height:52px;width:auto;display:block;margin:0 auto 22px}
.logo-cajon{height:34px;width:auto;display:block;margin:0 0 18px}
.nav ul{display:flex;gap:26px;list-style:none}
.nav ul a{text-decoration:none;font-size:.86rem;color:var(--tinta60);position:relative}
.nav ul a:after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;
  background:var(--acento);transition:width .35s var(--ease)}
.nav ul a:hover:after{width:100%}
.nav .res{border:1px solid var(--acento);color:var(--acento);padding:10px 20px;font-size:.8rem;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  transition:.3s var(--ease)}
.nav .res:hover{background:var(--acento);color:var(--fondo)}
@media(max-width:980px){.nav ul{display:none}}

/* ---------- portada ---------- */
.hero{height:100svh;position:relative;overflow:hidden;display:grid;place-items:center;
  text-align:center}
.hero .foto{position:absolute;inset:-6%;background-image:var(--foto);
  background-position:center 40%;background-size:cover;will-change:transform}
/* Dos capas: el degradado vertical de siempre + una sombra ovalada centrada
   detrás del texto. Sin ella, sobre una foto clara el kicker no se lee. */
.hero .velo{position:absolute;inset:0;background:
  radial-gradient(ellipse 68% 50% at 50% 50%,
    color-mix(in srgb,var(--fondo) 74%,transparent) 0%,
    color-mix(in srgb,var(--fondo) 40%,transparent) 62%,
    transparent 100%),
  linear-gradient(180deg,
  color-mix(in srgb,var(--fondo) 62%,transparent) 0%,
  color-mix(in srgb,var(--fondo) 18%,transparent) 32%,
  color-mix(in srgb,var(--fondo) 72%,transparent) 74%,
  var(--velo) 100%)}
.hero .cont{position:relative;z-index:2;padding:0 24px}
.hero .est{font-size:.66rem;letter-spacing:.5em;text-transform:uppercase;
  /* aclarado hacia el blanco: el acento solo no se lee sobre una foto clara */
  color:color-mix(in srgb,var(--acento) 45%,#fff);font-weight:500;
  margin-bottom:20px}
.hero h1{font-size:clamp(3rem,13vw,8.6rem);color:#fff}
.hero h1 span{display:block;font-style:normal;font-size:.34em;
  /* aclarado como el kicker: el acento2 solo se pierde sobre cielo claro */
  color:var(--acento);
  margin-top:6px;letter-spacing:-.02em}
.hero .sub{margin-top:22px;color:color-mix(in srgb,var(--tinta) 88%,transparent);font-weight:300;max-width:32ch;
  margin-inline:auto;font-size:clamp(1rem,2.4vw,1.18rem)}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ---------- móvil: el hero entero en una pantalla ----------
   Una foto apaisada recortada a vertical se queda en nada, así que en el
   móvil se sirve un recorte propio. Y los textos bajan de tamaño: si no,
   el kicker se parte en dos líneas y los botones se comen la pantalla.   */
@media(max-width:720px){
  /* menos la barra fija de abajo, para que quepa entero */
  .hero{height:calc(100svh - 74px);min-height:520px}
  .hero .foto{inset:0;background-image:var(--foto-movil,var(--foto));
    background-position:center 42%}
  .hero .cont{padding:0 20px}
  .hero .est{font-size:.58rem;letter-spacing:.28em;margin-bottom:14px}
  .hero h1{font-size:clamp(3.1rem,17vw,4.6rem)}
  .hero .sub{margin-top:16px;font-size:1rem;max-width:26ch}
  .cta{margin-top:24px;gap:10px;flex-direction:column;align-items:stretch}
  .cta .btn{padding:15px 22px;width:100%}
  /* el velo, más cerrado: en vertical hay menos sitio para separar del fondo */
  .hero .velo{background:
    radial-gradient(ellipse 96% 46% at 50% 48%,
      color-mix(in srgb,var(--fondo) 80%,transparent) 0%,
      color-mix(in srgb,var(--fondo) 45%,transparent) 70%,
      transparent 100%),
    linear-gradient(180deg,
      color-mix(in srgb,var(--fondo) 55%,transparent) 0%,
      color-mix(in srgb,var(--fondo) 20%,transparent) 26%,
      color-mix(in srgb,var(--fondo) 78%,transparent) 78%,
      var(--velo) 100%)}
}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:17px 34px;
  text-decoration:none;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;transition:.3s var(--ease);border:1px solid transparent;cursor:pointer}
.b1{background:var(--acento);color:var(--fondo)}
.b1:hover{filter:brightness(1.1)}
.b2{border-color:var(--tinta45);color:var(--tinta)}
.b2:hover{background:color-mix(in srgb,var(--tinta) 12%,transparent)}
.baja{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;font-size:.58rem;
  letter-spacing:.34em;text-transform:uppercase;color:var(--tinta45);
  display:flex;flex-direction:column;align-items:center;gap:10px}
.baja i{width:1px;height:42px;background:linear-gradient(var(--acento),transparent)}

/* ---------- tira de cifras ---------- */
.tira{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.tira div{padding:34px 20px;text-align:center;border-right:1px solid var(--linea)}
.tira div:last-child{border-right:0}
/* En móvil la tira se parte en dos columnas y los border-right quedan
   colgando a media altura: mejor separarlas por arriba. */
@media(max-width:640px){
  .tira div{border-right:0;border-top:1px solid var(--linea)}
  .tira div:first-child{border-top:0}
}
.tira b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,5vw,2.6rem);
  color:var(--acento);line-height:1;font-weight:400}
.tira span{display:block;margin-top:8px;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta45)}

/* ---------- bloque de dos columnas ---------- */
.dos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
@media(max-width:900px){.dos{grid-template-columns:1fr}
  .dos.invertido>*:first-child{order:2}}
/* la sección 'ancha' no lleva padding arriba para que la foto respire sola */
section.sin-lados{padding-top:clamp(30px,5vw,56px)}
/* sección 'ancha': foto a sangre + texto centrado debajo */
.ancha{position:relative;overflow:hidden;margin:0 0 clamp(38px,6vw,64px)}
.ancha img{width:100%;height:clamp(300px,52vh,620px);object-fit:cover;display:block}
.ancha-txt{max-width:760px;text-align:center}
.ancha-txt .lead{margin-inline:auto}

.marco{position:relative;overflow:hidden}
.marco img{width:100%;transition:transform 1.4s var(--ease)}
.marco:hover img{transform:scale(1.05)}

/* marco que turna fotos: todas apiladas, solo se ve la que lleva .on */
.marco.turna{display:grid}
.marco.turna img{grid-area:1/1;opacity:0;transition:opacity 1.1s var(--ease),transform 1.4s var(--ease)}
.marco.turna img.on{opacity:1}
@media(prefers-reduced-motion:reduce){
  .marco.turna img{transition:none}
}
/* la "tapa" se retira sola al entrar en pantalla: revela la foto */
.tapa{position:absolute;inset:0;background:var(--fondo);transform-origin:right}
/* La cortina la abre GSAP al hacer scroll. Con "reducir movimiento" no hay
   GSAP, así que si no la quitamos aquí las fotos se quedan tapadas. */
@media(prefers-reduced-motion:reduce){ .tapa{display:none} }

/* ---------- tarjetas (menús, planes, servicios con precio) ---------- */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;
  margin-top:44px}
.tarjeta{border:1px solid var(--linea);padding:36px 30px;
  background:color-mix(in srgb,var(--tinta) 3%,transparent);
  display:flex;flex-direction:column;transition:.4s var(--ease)}
.tarjeta:hover{border-color:var(--acento);transform:translateY(-6px)}
.tarjeta .et{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--acento);
  margin-bottom:14px}
.tarjeta h3{font-size:clamp(1.6rem,4vw,2rem);margin-bottom:20px}
.tarjeta ul{list-style:none;flex:1}
.tarjeta li{font-size:.93rem;color:var(--tinta60);font-weight:300;padding:11px 0;
  border-bottom:1px solid color-mix(in srgb,var(--tinta) 8%,transparent)}
.tarjeta .precio{margin-top:24px;font-family:var(--serif);font-weight:700;font-size:2.2rem;color:var(--acento);
  line-height:1}
.tarjeta .precio small{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta45);margin-top:6px}
/* variante con foto arriba */
.tarjeta.con-foto{padding:0;overflow:hidden}
.tarjeta.con-foto img{width:100%;aspect-ratio:16/10;object-fit:cover}
.tarjeta.con-foto .et{margin:28px 30px 14px}
.tarjeta.con-foto h3{margin:0 30px 20px}
.tarjeta.con-foto ul{margin:0 30px}
.tarjeta.con-foto .precio{margin:24px 30px 32px}

/* ---------- rejilla de servicios ---------- */
.serv{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:1px;
  background:var(--linea);border:1px solid var(--linea);margin-top:40px}
.serv div{background:var(--fondo);padding:30px 20px;text-align:center;transition:.35s var(--ease)}
.serv div:hover{background:color-mix(in srgb,var(--tinta) 5%,transparent)}
.serv .ic{display:block;font-size:1.4rem;color:var(--acento);margin-bottom:10px}
.serv b{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:600;letter-spacing:-.01em}
.serv span{display:block;margin-top:4px;font-size:.79rem;color:var(--tinta45)}

/* ---------- secciones 3D a pantalla completa ---------- */
.escena{position:relative;height:250vh}
.escena .fijo{position:sticky;top:0;height:100svh;overflow:hidden}
.escena canvas{position:absolute;inset:0;width:100%;height:100%}
.escena .txt{position:absolute;inset:0;display:grid;place-items:center;text-align:center;z-index:2;
  padding:0 24px;background:radial-gradient(ellipse at 50% 55%,
    color-mix(in srgb,var(--fondo) 30%,transparent),var(--velo) 80%)}

/* ---------- galería WebGL con transición líquida ---------- */
.cine{position:relative;height:340vh}
.cine .fijo{position:sticky;top:0;height:100svh;overflow:hidden}
.cine canvas{position:absolute;inset:0;width:100%;height:100%}
.cine .capa{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--fondo) 55%,transparent),
    transparent 30%,transparent 62%,var(--velo))}
.cine .rot{position:absolute;left:0;right:0;bottom:12vh;text-align:center;z-index:3;padding:0 26px}
.cine .rot h3{font-size:clamp(2rem,7vw,4.2rem);color:#fff;font-weight:300}
.cine .rot p{margin-top:10px;color:var(--tinta60);font-size:.9rem;letter-spacing:.16em;
  text-transform:uppercase}
.puntos{position:absolute;left:0;right:0;bottom:6vh;display:flex;gap:10px;justify-content:center;
  z-index:4}
.puntos i{width:34px;height:2px;background:var(--tinta45);display:block;cursor:pointer;
  transition:.4s var(--ease)}
.puntos i.on{background:var(--acento)}

/* ---------- mosaico de fotos ---------- */
.mosaico{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:40px}
.mosaico figure{margin:0;overflow:hidden;cursor:pointer;aspect-ratio:1;position:relative}
.mosaico figure.g2{grid-column:span 2;grid-row:span 2}
.mosaico img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.mosaico figure:hover img{transform:scale(1.08)}
@media(max-width:760px){.mosaico{grid-template-columns:repeat(2,1fr)}}

/* ---------- formulario y contacto ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px;text-align:left}
.form label{display:block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tinta45);margin-bottom:8px}
.form input,.form select,.form textarea{width:100%;padding:15px 16px;
  background:color-mix(in srgb,var(--tinta) 5%,transparent);border:1px solid var(--linea);
  color:var(--tinta);font-family:inherit;font-size:.95rem}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-color:var(--acento)}
.form .ancho{grid-column:1/-1}
.form button{grid-column:1/-1;padding:19px;background:var(--acento);color:var(--fondo);border:0;
  font-family:inherit;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;cursor:pointer;transition:.3s var(--ease)}
.form button:hover{filter:brightness(1.1)}
@media(max-width:640px){.form{grid-template-columns:1fr}}
.mapa-marco{margin-top:40px;border:1px solid var(--linea);overflow:hidden;
  filter:grayscale(.35) contrast(1.05)}
.mapa-marco iframe{width:100%;height:330px;border:0;display:block}
.tel{display:inline-block;font-family:var(--serif);font-weight:700;letter-spacing:-.03em;font-size:clamp(2.4rem,8vw,4.2rem);
  color:var(--acento);text-decoration:none;margin-top:12px}
.fichas{display:grid;gap:1px;margin-top:40px;background:var(--linea);border:1px solid var(--linea);
  text-align:left}
.fila{display:flex;gap:18px;padding:26px;background:var(--fondo);align-items:flex-start}
.fila .ic{color:var(--acento)}
.fila b{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:600;margin-bottom:2px}
.fila span{color:var(--tinta60);font-size:.93rem;font-weight:300}
.fila a{color:var(--acento);text-decoration:none}

footer{padding:44px 0;text-align:center;font-size:.82rem;color:var(--tinta45);
  border-top:1px solid var(--linea);font-weight:300}
footer b{color:var(--tinta);font-family:var(--serif);font-weight:600}
footer .aviso{margin-top:10px;opacity:.65}
/* los enlaces del pie y de las fichas se tienen que ver que son enlaces */
footer a,.fichas a{color:var(--acento);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--acento) 35%,transparent);
  transition:border-color .25s var(--ease)}
footer a:hover,.fichas a:hover{border-bottom-color:var(--acento)}

/* ---------- lupa (visor de fotos) ---------- */
.lupa{position:fixed;inset:0;z-index:330;background:color-mix(in srgb,var(--fondo) 95%,#000);
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;
  transition:opacity .35s var(--ease);padding:20px}
.lupa.on{opacity:1;pointer-events:auto}
.lupa img{max-width:94vw;max-height:86svh;object-fit:contain}
.lupa button{position:absolute;border:1px solid var(--tinta45);background:rgba(0,0,0,.3);
  color:var(--tinta);cursor:pointer;border-radius:50%;width:44px;height:44px;font-size:1.2rem}
.lupa .x{top:18px;right:18px}
.lupa .i{left:16px;top:50%;margin-top:-22px}
.lupa .d{right:16px;top:50%;margin-top:-22px}

/* ---------- botón de sonido y etiqueta de estación ---------- */
#sonido{position:fixed;left:16px;bottom:16px;z-index:295;width:52px;height:52px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--acento) 50%,transparent);
  background:color-mix(in srgb,var(--fondo) 80%,transparent);backdrop-filter:blur(10px);
  color:var(--acento);cursor:pointer;display:grid;place-items:center;transition:.35s var(--ease)}
#sonido:hover{background:color-mix(in srgb,var(--acento) 20%,transparent)}
#sonido .ondas{display:flex;gap:2px;align-items:center;height:16px}
#sonido .ondas i{width:2px;height:4px;background:var(--acento);display:block;border-radius:2px}
#sonido.on .ondas i{animation:sube 1s ease-in-out infinite}
#sonido.on .ondas i:nth-child(2){animation-delay:.15s}
#sonido.on .ondas i:nth-child(3){animation-delay:.3s}
#sonido.on .ondas i:nth-child(4){animation-delay:.45s}
@keyframes sube{0%,100%{height:4px}50%{height:15px}}
.estacion{position:fixed;left:16px;bottom:78px;z-index:294;font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinta45);writing-mode:vertical-rl}
/* en móvil el botón de sonido se montaba encima del CTA de la portada;
   además es un adorno que ahí solo estorba */
@media(max-width:859px){#sonido{display:none}.estacion{display:none}}

/* ---------- barra fija de móvil ---------- */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:290;display:flex;gap:9px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--fondo) 95%,#000);backdrop-filter:blur(14px);
  border-top:1px solid var(--linea)}
.barra .btn{flex:1;padding:14px 8px;font-size:.72rem}
@media(min-width:860px){.barra{display:none}}
@media(max-width:859px){body{padding-bottom:74px}}


/* ==========================================================================
   MULTIPÁGINA · portadillas, tarjetas de página y el cajón del menú
   ========================================================================== */

/* ---------- portadilla: la cabecera de las páginas interiores ---------- */
.portadilla{position:relative;overflow:hidden;padding:0;
  min-height:clamp(340px,54svh,520px);display:grid;align-items:end;text-align:center}
.portadilla .foto{position:absolute;inset:0;background-image:var(--foto);
  background-position:center 45%;background-size:cover}
/* la foto de una portadilla suele tener mucho detalle: hace falta bastante
   velo o el titular no se despega del fondo */
.portadilla .velo{position:absolute;inset:0;background:
  radial-gradient(ellipse 90% 60% at 50% 78%,
    color-mix(in srgb,var(--fondo) 72%,transparent) 0%,
    transparent 100%),
  linear-gradient(180deg,
    color-mix(in srgb,var(--fondo) 76%,transparent) 0%,
    color-mix(in srgb,var(--fondo) 48%,transparent) 30%,
    color-mix(in srgb,var(--fondo) 82%,transparent) 72%,
    var(--velo) 100%)}
.portadilla .cont{position:relative;z-index:2;padding-bottom:clamp(36px,6vw,60px)}
.portadilla h1{font-family:var(--serif);font-weight:700;color:#fff;
  font-size:clamp(2.6rem,8vw,5rem);letter-spacing:-.02em;line-height:1.02}
.portadilla .sub{margin:18px auto 0;max-width:46ch;color:var(--tinta60);font-weight:300}
@media(max-width:720px){
  .portadilla{min-height:340px}
  .portadilla .foto{background-image:var(--foto-movil,var(--foto))}
}

/* ---------- tarjetas que llevan a las demás páginas ---------- */
.rejilla-pag{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:18px;margin-top:44px;text-align:left}
.tarj-pag{position:relative;display:block;overflow:hidden;text-decoration:none;
  min-height:260px;border:1px solid var(--linea)}
.tarj-pag .f{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform 1.2s var(--ease)}
/* el degradado tiene que ser bastante duro abajo: estas fotos llevan mucho
   detalle justo donde va el texto y si no, no se lee nada */
.tarj-pag::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,
  color-mix(in srgb,var(--fondo) 15%,transparent) 0%,
  color-mix(in srgb,var(--fondo) 35%,transparent) 38%,
  color-mix(in srgb,var(--fondo) 88%,transparent) 68%,
  color-mix(in srgb,var(--fondo) 97%,transparent) 100%)}
.tarj-pag .t{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:24px}
.tarj-pag em{max-width:30ch}
.tarj-pag b{display:block;font-family:var(--serif);font-weight:700;letter-spacing:-.02em;
  font-size:1.55rem;color:var(--tinta)}
.tarj-pag em{display:block;font-style:normal;margin-top:5px;
  font-size:.86rem;color:var(--tinta60)}
.tarj-pag i{display:block;margin-top:14px;font-style:normal;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--acento);
  transition:transform .35s var(--ease)}
.tarj-pag:hover .f{transform:scale(1.06)}
.tarj-pag:hover i{transform:translateX(6px)}
.tarj-pag:focus-visible{outline:2px solid var(--acento);outline-offset:3px}

/* ---------- enlaces del pie ---------- */
.pie-menu{display:flex;flex-wrap:wrap;gap:6px 26px;justify-content:center;
  margin-bottom:22px}
.pie-menu a{border-bottom:0;color:var(--tinta60);font-size:.86rem}
.pie-menu a:hover,.pie-menu a.aqui{color:var(--acento)}

/* la página en la que estás, marcada en el menú de arriba */
.nav ul a.aqui{color:var(--acento)}

/* ---------- botón de menú en la barra de abajo ---------- */
.barra .menu-btn{flex:0 0 54px;display:grid;place-content:center;gap:4px;
  background:transparent;border:1px solid var(--tinta45);color:var(--tinta);
  cursor:pointer;padding:0;min-height:46px}
.barra .menu-btn i{display:block;width:19px;height:1.5px;background:currentColor;
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
.barra .menu-btn[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.barra .menu-btn[aria-expanded="true"] i:nth-child(2){opacity:0}
.barra .menu-btn[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---------- el cajón del menú ---------- */
.cajon{position:fixed;inset:0;z-index:288;background:color-mix(in srgb,var(--fondo) 82%,#000);
  backdrop-filter:blur(8px);opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease);display:grid;align-items:end}
.cajon.on{opacity:1;pointer-events:auto}
.cajon .hoja{background:var(--fondo);border-top:1px solid var(--linea);
  padding:30px 24px calc(84px + env(safe-area-inset-bottom));
  transform:translateY(14px);transition:transform .35s var(--ease)}
.cajon.on .hoja{transform:none}
.cajon .kicker{margin-bottom:22px}
.cajon a:not(.btn){display:block;font-family:var(--serif);font-weight:600;font-size:1.55rem;
  font-weight:300;padding:13px 0;text-decoration:none;color:var(--tinta);
  border-bottom:1px solid var(--linea)}
.cajon a.aqui{color:var(--acento)}
.cajon .btn{margin-top:22px;width:100%}
@media(prefers-reduced-motion:reduce){
  .cajon,.cajon .hoja{transition:none}
}
@media(min-width:860px){.cajon{display:none}}


/* ==========================================================================
   TEMA CLARO · body.claro
   La plantilla está pensada de origen para fondo oscuro: aquí se corrige
   todo lo que daba por hecho que el fondo era negro (textos en #fff, velos
   que oscurecen, el acento usado a la vez para rellenos y para texto).
   --acento  = rosa pastel, para rellenos y botones
   --acento-t = rosa oscuro, el único que vale para TEXTO sobre blanco
   ========================================================================== */
body.claro{
  --velo:var(--fondo);
  --tinta60:color-mix(in srgb,var(--tinta) 62%,transparent);
  --tinta45:color-mix(in srgb,var(--tinta) 48%,transparent);
  --linea:color-mix(in srgb,var(--tinta) 12%,transparent);
}

/* --- superficies: en claro, elevar es aclarar, no oscurecer --- */
body.claro .nav{background:color-mix(in srgb,var(--fondo) 85%,transparent)}
body.claro .tarjeta{background:var(--rosa)}
body.claro .serv div{background:var(--rosa)}
body.claro .fila{background:var(--fondo)}
body.claro .fichas{background:var(--linea)}
body.claro .form input,body.claro .form select,body.claro .form textarea{
  background:var(--rosa);border-color:color-mix(in srgb,var(--tinta) 14%,transparent)}
body.claro .cajon{background:color-mix(in srgb,var(--tinta) 34%,transparent)}
body.claro .cajon .hoja{background:var(--fondo)}
body.claro .barra{background:color-mix(in srgb,var(--fondo) 94%,transparent)}
body.claro .lupa{background:color-mix(in srgb,var(--fondo) 96%,transparent)}
body.claro #carga{background:var(--fondo)}

/* --- textos: el rosa pastel no se lee sobre blanco, va el oscuro --- */
body.claro .kicker,
body.claro .tarjeta .et,
body.claro .serv .ic,
body.claro .fila .ic,
body.claro .fila a,
body.claro .tarj-pag i,
body.claro footer a,
body.claro .fichas a,
body.claro .pie-menu a:hover,
body.claro .pie-menu a.aqui,
body.claro .nav ul a.aqui,
body.claro .cajon a.aqui,
body.claro h1 em,body.claro h2 em,
body.claro .precio,
body.claro .tel{color:var(--acento-t)}
body.claro .nav .res{color:var(--acento-t);border-color:var(--acento-t)}
body.claro .nav .res:hover{background:var(--acento-t);color:var(--fondo)}

/* --- botones: rosa pastel con texto oscuro, que sobre pastel el blanco no se lee --- */
body.claro .b1,body.claro .form button{background:var(--acento);color:#3d2630}
body.claro .b2{border-color:color-mix(in srgb,var(--tinta) 28%,transparent);color:var(--tinta)}
body.claro .b2:hover{border-color:var(--acento-t);color:var(--acento-t)}

/* --- fotos con texto encima: el velo aclara en vez de oscurecer --- */
body.claro .hero h1,body.claro .portadilla h1{color:var(--tinta);
  text-shadow:0 1px 30px color-mix(in srgb,var(--fondo) 80%,transparent)}
body.claro .hero .est{color:var(--acento-t);
  text-shadow:0 1px 16px color-mix(in srgb,var(--fondo) 90%,transparent)}
body.claro .hero h1 span{color:var(--acento-t)}
body.claro .hero .sub,body.claro .portadilla .sub{color:var(--tinta)}
body.claro .tarj-pag b{color:var(--tinta)}
body.claro .tarj-pag em{color:var(--tinta60)}

/* --- las bandas de secciones alternas, en rosa muy claro --- */
body.claro section.rosa{background:var(--rosa)}
body.claro section.rosa .tarjeta,
body.claro section.rosa .serv div{background:var(--fondo)}

/* En claro el velo tapaba demasiado y la foto quedaba lavada. Se baja, y el
   texto se sostiene con su propia sombra en vez de con un velo opaco. */
body.claro .hero .velo{background:
  radial-gradient(ellipse 74% 54% at 50% 50%,
    color-mix(in srgb,var(--fondo) 52%,transparent) 0%,
    color-mix(in srgb,var(--fondo) 22%,transparent) 68%,
    transparent 100%),
  linear-gradient(180deg,
    color-mix(in srgb,var(--fondo) 34%,transparent) 0%,
    color-mix(in srgb,var(--fondo) 8%,transparent) 34%,
    color-mix(in srgb,var(--fondo) 45%,transparent) 76%,
    var(--velo) 100%)}
/* El titular de una portadilla se apoya abajo, justo donde la foto suele
   tener el sujeto. Con el velo flojo el texto oscuro se perdía sobre las
   fotos oscuras, así que en claro se cierra donde se escribe y se deja
   abierto arriba, que es donde se ve la foto. */
body.claro .portadilla .velo{background:
  radial-gradient(ellipse 96% 62% at 50% 80%,
    color-mix(in srgb,var(--fondo) 70%,transparent) 0%,
    transparent 100%),
  linear-gradient(180deg,
    color-mix(in srgb,var(--fondo) 44%,transparent) 0%,
    color-mix(in srgb,var(--fondo) 20%,transparent) 26%,
    color-mix(in srgb,var(--fondo) 70%,transparent) 68%,
    var(--velo) 100%)}
body.claro .portadilla h1{text-shadow:0 1px 34px color-mix(in srgb,var(--fondo) 92%,transparent)}
body.claro .portadilla .sub{text-shadow:0 1px 18px color-mix(in srgb,var(--fondo) 92%,transparent)}
@media(max-width:720px){
  body.claro .hero .velo{background:
    radial-gradient(ellipse 100% 48% at 50% 46%,
      color-mix(in srgb,var(--fondo) 62%,transparent) 0%,
      color-mix(in srgb,var(--fondo) 26%,transparent) 74%,
      transparent 100%),
    linear-gradient(180deg,
      color-mix(in srgb,var(--fondo) 30%,transparent) 0%,
      color-mix(in srgb,var(--fondo) 10%,transparent) 28%,
      color-mix(in srgb,var(--fondo) 50%,transparent) 78%,
      var(--velo) 100%)}
}
/* las fotos con texto encima piden un pelín más de cuerpo en claro */
body.claro .hero .foto,body.claro .portadilla .foto{filter:saturate(1.06) contrast(1.04)}
body.claro .hero h1,body.claro .portadilla h1{
  text-shadow:0 2px 26px color-mix(in srgb,var(--fondo) 92%,transparent),
              0 1px 4px color-mix(in srgb,var(--fondo) 70%,transparent)}
body.claro .hero .sub,body.claro .portadilla .sub{
  text-shadow:0 1px 14px color-mix(in srgb,var(--fondo) 92%,transparent)}


/* ==========================================================================
   EMOJIS · tamaño y alineación (los emoji traen su propio color, así que
   el color del acento no les afecta: solo hay que darles cuerpo)
   ========================================================================== */
.serv .ic,.fila .ic,.tira b{line-height:1}
.serv .ic{font-size:1.75rem;margin-bottom:12px}
.fila .ic{font-size:1.25rem;flex:0 0 auto;margin-top:2px}
.tira b{font-size:clamp(1.7rem,5vw,2.2rem)}

/* ==========================================================================
   PROFUNDIDAD · las tarjetas se inclinan siguiendo el dedo o el ratón.
   Es 3D de verdad (perspectiva y rotación en dos ejes), pero con
   transformaciones del navegador: ni WebGL ni librerías, así que no
   calienta el móvil ni añade medio megabyte de descarga.
   ========================================================================== */
.tarjetas,.rejilla-pag{perspective:1100px}
.tarjeta,.tarj-pag{
  transform-style:preserve-3d;
  transition:transform .5s var(--ease),border-color .4s var(--ease),box-shadow .5s var(--ease);
  will-change:transform}
.tarjeta.inclina,.tarj-pag.inclina{transition:transform .12s linear}
/* lo que se levanta por encima de la tarjeta */
/* OJO: el precio no se levanta. Al hacerlo se dibujaba por delante del botón
   y le tapaba la nota de debajo. Se levanta la etiqueta, el título y el botón. */
.tarjeta .et,.tarjeta h3{transform:translateZ(26px)}
.tarjeta .btn{transform:translateZ(30px)}
.tarj-pag .t{transform:translateZ(34px)}
.tarj-pag .f{transform:scale(1.08)}

body.claro .tarjeta{box-shadow:0 1px 2px color-mix(in srgb,var(--tinta) 5%,transparent),
  0 6px 20px color-mix(in srgb,var(--tinta) 5%,transparent)}
body.claro .tarjeta:hover,body.claro .tarjeta.inclina{
  box-shadow:0 6px 14px color-mix(in srgb,var(--tinta) 8%,transparent),
             0 22px 50px color-mix(in srgb,var(--acento) 30%,transparent)}
body.claro .tarj-pag:hover,body.claro .tarj-pag.inclina{
  box-shadow:0 18px 46px color-mix(in srgb,var(--acento) 34%,transparent)}

/* nadie quiere que la pantalla se mueva si ha pedido que no se mueva */
@media(prefers-reduced-motion:reduce){
  .tarjeta,.tarj-pag{transform:none!important;transition:none}
  .tarjeta .et,.tarjeta h3,.tarjeta .btn,.tarj-pag .t{transform:none}
}


/* ==========================================================================
   ESTILO SEPEDA · el sistema visual de sepeda-hostel.vercel.app llevado aquí
   La firma es el contraste: titulares en Outfit muy negro y en mayúsculas,
   y solo la palabra acentuada en Fraunces cursiva rosa. Todo redondeado,
   botones en pastilla y sombras muy abiertas y suaves.
   ========================================================================== */
body.claro{
  --radio:22px;
  --radio-g:34px;
  --sombra-m:0 18px 50px -18px color-mix(in srgb,var(--tinta) 28%,transparent);
  --sombra-g:0 30px 80px -20px color-mix(in srgb,var(--tinta) 35%,transparent);
}

/* --- titulares: Outfit negrísima en mayúsculas, el <em> en cursiva rosa --- */
body.claro h1,body.claro h2,body.claro .hero h1,body.claro .portadilla h1{
  font-family:var(--sans);font-weight:800;text-transform:uppercase;
  letter-spacing:-.025em;line-height:.94}
body.claro h1 em,body.claro h2 em{
  font-family:var(--serif);font-style:italic;font-weight:400;
  text-transform:none;letter-spacing:-.01em;color:var(--acento-t)}
body.claro h3,body.claro .tarjeta h3,body.claro .fila b,body.claro .serv b,
body.claro .tarj-pag b{
  font-family:var(--sans);font-weight:700;text-transform:uppercase;
  letter-spacing:-.005em;font-size:1.12rem}
body.claro .tarjeta h3{font-size:1.3rem}
body.claro .hero h1 span{font-family:var(--serif);font-weight:400;
  text-transform:none;letter-spacing:-.01em}
body.claro .tira b{font-family:var(--sans);font-weight:800}
body.claro .precio{font-family:var(--sans);font-weight:800;letter-spacing:-.02em}
body.claro .tel{font-family:var(--sans);font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em}

/* --- kickers con el punto rosa de separación --- */
body.claro .kicker{font-weight:600;letter-spacing:.24em;font-size:.7rem}

/* --- botones en pastilla --- */
body.claro .btn,body.claro .form button,body.claro .nav .res{
  border-radius:100px;font-weight:600;letter-spacing:.1em}
body.claro .b1,body.claro .form button{
  background:var(--acento-t);color:var(--blanco);
  box-shadow:0 14px 34px -12px color-mix(in srgb,var(--acento-t) 65%,transparent)}
body.claro .b1:hover,body.claro .form button:hover{
  filter:none;transform:translateY(-2px);
  box-shadow:0 20px 42px -12px color-mix(in srgb,var(--acento-t) 75%,transparent)}
body.claro .b2{border-color:color-mix(in srgb,var(--tinta) 22%,transparent)}
body.claro .btn{transition:transform .35s var(--ease),box-shadow .35s var(--ease),
  background .35s var(--ease),color .35s var(--ease)}
/* el botón oscuro de dentro de las tarjetas, como en Sepeda */
body.claro .tarjeta .btn.b2{background:var(--tinta);color:var(--blanco);border-color:transparent}

/* --- superficies redondeadas --- */
body.claro .tarjeta{border-radius:var(--radio-g);border-color:transparent;
  background:var(--blanco);box-shadow:var(--sombra-m)}
body.claro .tarjeta:hover{box-shadow:var(--sombra-g)}
body.claro .serv{border-radius:var(--radio-g);overflow:hidden}
body.claro .fichas{border-radius:var(--radio-g);overflow:hidden;border-color:transparent;
  box-shadow:var(--sombra-m)}
body.claro .marco,body.claro .ancha,body.claro .tarj-pag,
body.claro .mosaico figure,body.claro .portadilla{border-radius:var(--radio-g);overflow:hidden}
body.claro .marco img,body.claro .ancha img{border-radius:var(--radio-g)}
body.claro .form input,body.claro .form select,body.claro .form textarea{
  border-radius:14px}
body.claro .cajon .hoja{border-radius:var(--radio-g) var(--radio-g) 0 0}
body.claro .barra .btn{border-radius:100px}
body.claro .barra .menu-btn{border-radius:100px}

/* --- las etiquetas de la lista de cada tarjeta, en pastillas rosas --- */
body.claro .tarjeta li{border:0;padding:0;margin:0 6px 8px 0;display:inline-block;
  background:var(--rosa);border-radius:100px;padding:7px 14px;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:var(--tinta)}
body.claro .tarjeta ul{display:flex;flex-wrap:wrap;margin-bottom:20px}

/* --- bandas alternas: una sección de cada dos en rosa --- */
body.claro main > section:nth-of-type(even){background:var(--rosa)}
body.claro main > section.portadilla,
body.claro main > section.sin-lados{background:transparent}

/* --- entradas al hacer scroll, con el mismo muelle --- */
@keyframes subeSuave{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* el botón de dentro de una tarjeta va abajo del todo y a lo ancho */
body.claro .tarjeta .btn{margin-top:26px;width:100%;padding:15px 20px;font-size:.74rem}
body.claro .tarjeta .precio{margin-top:auto;padding-top:22px}
/* el kicker sobre una foto necesita despegarse */
body.claro .portadilla .kicker{color:var(--acento-t);font-weight:700;
  text-shadow:0 1px 14px color-mix(in srgb,var(--fondo) 92%,transparent)}

/* el botón secundario y el kicker, sobre foto clara, se quedaban en nada */
body.claro .hero .b2,body.claro .portadilla .b2{
  background:color-mix(in srgb,var(--blanco) 82%,transparent);
  border-color:transparent;backdrop-filter:blur(6px);color:var(--tinta)}
body.claro .hero .b2:hover{background:var(--blanco);color:var(--acento-t)}
body.claro .hero .est{font-weight:700;letter-spacing:.22em;
  background:color-mix(in srgb,var(--blanco) 70%,transparent);
  backdrop-filter:blur(4px);border-radius:100px;padding:7px 16px;display:inline-block;
  text-shadow:none}

/* en claro el degradado de las tarjetas de página aclara, y el texto oscuro
   necesita bastante más blanco debajo para despegarse de la foto */
body.claro .tarj-pag::after{background:linear-gradient(180deg,
  transparent 0%,
  color-mix(in srgb,var(--blanco) 30%,transparent) 38%,
  color-mix(in srgb,var(--blanco) 88%,transparent) 62%,
  color-mix(in srgb,var(--blanco) 99%,transparent) 100%)}
body.claro .tarj-pag{min-height:300px}
body.claro .tarj-pag em{color:color-mix(in srgb,var(--tinta) 75%,transparent)}


/* ==========================================================================
   RESERVA · elegir clase → elegir día → datos → WhatsApp
   ========================================================================== */
.pasos{list-style:none;margin-top:44px;display:grid;gap:26px}
.paso{border-radius:var(--radio-g,22px);padding:clamp(22px,3.5vw,34px);
  background:var(--blanco,var(--fondo));box-shadow:var(--sombra-m);text-align:left}
.paso[hidden]{display:none}
.paso .num{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--acento-t,var(--acento));margin-bottom:18px}

/* --- las clases, en botones con foto --- */
.opc-clases{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.opc-clase{position:relative;display:block;padding:0;overflow:hidden;cursor:pointer;
  border:2px solid transparent;border-radius:18px;background:var(--rosa,transparent);
  text-align:left;font:inherit;color:inherit;
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.opc-clase .f{display:block;height:132px;background-size:cover;background-position:center}
.opc-clase .t{display:block;padding:16px 18px 18px}
.opc-clase b{display:block;font-weight:700;text-transform:uppercase;
  font-size:.95rem;letter-spacing:-.005em}
.opc-clase em{display:block;font-style:normal;margin-top:4px;font-size:.82rem;
  color:var(--tinta60)}
.opc-clase i{display:block;margin-top:10px;font-style:normal;font-weight:800;
  color:var(--acento-t,var(--acento))}
.opc-clase:hover{transform:translateY(-3px);box-shadow:var(--sombra-m)}
.opc-clase:focus-visible{outline:2px solid var(--acento-t,var(--acento));outline-offset:3px}
/* la elegida: se marca con el borde y una palomita, no solo con color */
.opc-clase[aria-pressed="true"]{border-color:var(--acento-t,var(--acento))}
.opc-clase[aria-pressed="true"]::after{content:'✓';position:absolute;top:12px;right:12px;
  width:30px;height:30px;border-radius:50%;display:grid;place-content:center;
  background:var(--acento-t,var(--acento));color:#fff;font-size:.85rem;font-weight:700}

/* --- los días, en pastillas --- */
.opc-dias{display:flex;flex-wrap:wrap;gap:10px}
.opc-dia{cursor:pointer;font:inherit;color:inherit;padding:13px 20px;border-radius:100px;
  border:1px solid var(--linea);background:transparent;font-size:.86rem;font-weight:500;
  min-height:46px;transition:.28s var(--ease)}
.opc-dia:hover{border-color:var(--acento-t,var(--acento))}
.opc-dia:focus-visible{outline:2px solid var(--acento-t,var(--acento));outline-offset:2px}
.opc-dia[aria-pressed="true"]{background:var(--acento-t,var(--acento));color:#fff;
  border-color:transparent}

.resumen{margin-top:22px;font-size:.92rem;color:var(--tinta60);line-height:1.6}
.resumen b{color:var(--tinta);font-weight:600}
.aviso-form{margin-top:12px;font-size:.84rem;color:var(--acento-t,var(--acento));min-height:1.2em}

@media(max-width:520px){
  .opc-clases{grid-template-columns:1fr}
  .opc-clase .f{height:150px}
}
@media(prefers-reduced-motion:reduce){
  .opc-clase,.opc-dia{transition:none}
  .opc-clase:hover{transform:none}
}

/* ==========================================================================
   RESEÑAS · la nota media real, tres opiniones y el enlace a Google
   ========================================================================== */
.nota-media{display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:32px}
.nota-media b{font-family:var(--serif);font-weight:700;font-size:clamp(2.6rem,8vw,3.6rem);
  line-height:1;color:var(--acento);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.nota-media div{text-align:left}
.nota-media .sub{display:block;font-size:.8rem;color:var(--tinta60);margin-top:2px}
.estrellas{color:var(--acento);letter-spacing:.18em;font-size:.95rem}

.resenas{display:grid;gap:16px;margin-top:48px;text-align:left;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.resenas blockquote{background:color-mix(in srgb,var(--tinta) 4%,transparent);
  border:1px solid var(--linea);border-radius:4px;padding:24px}
.resenas p{margin-top:12px;font-size:.97rem;line-height:1.6;
  color:color-mix(in srgb,var(--tinta) 88%,transparent)}
.resenas cite{display:block;margin-top:16px;font-style:normal;font-size:.82rem;
  color:var(--tinta60)}
.resenas cite span{display:block;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta45);margin-top:3px}
.resenas-pie{margin-top:32px}
.aviso-bloque{margin-top:24px;font-size:.76rem;color:var(--tinta45);
  max-width:56ch;margin-left:auto;margin-right:auto}

/* ==========================================================================
   CARRUSEL 3D · las fotos en perspectiva, se arrastran con el dedo
   ========================================================================== */
.carrusel{position:relative;margin-top:48px;perspective:1400px;
  overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.carrusel .pista{position:relative;transform-style:preserve-3d;
  height:clamp(280px,46vw,520px)}
.carrusel .lam{--an:clamp(250px,40vw,600px);
  position:absolute;top:0;left:50%;width:var(--an);height:100%;
  margin-left:calc(var(--an) / -2);border-radius:4px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--tinta) 10%,transparent);
  background:color-mix(in srgb,var(--tinta) 4%,transparent);
  will-change:transform,opacity;cursor:grab;margin-block:0}
.carrusel.agarrando .lam{cursor:grabbing}
.carrusel .lam img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.carrusel figcaption{position:absolute;left:0;right:0;bottom:0;padding:44px 20px 18px;
  background:linear-gradient(transparent,color-mix(in srgb,#000 82%,transparent));
  opacity:0;transition:opacity .25s cubic-bezier(.32,.72,0,1)}
.carrusel .lam.centro figcaption{opacity:1}
.carrusel figcaption b{display:block;font-family:var(--serif);font-weight:600;
  font-size:1.15rem;letter-spacing:-.01em}
.carrusel figcaption span{font-size:.82rem;color:color-mix(in srgb,#fff 68%,transparent)}
.carrusel .cl{position:absolute;top:50%;z-index:200;width:44px;height:44px;
  margin-top:-22px;border:1px solid var(--linea);border-radius:50%;
  background:color-mix(in srgb,var(--fondo) 72%,transparent);backdrop-filter:blur(10px);
  color:var(--tinta);font-size:1.5rem;line-height:1;cursor:pointer;
  transition:transform .15s cubic-bezier(.32,.72,0,1),border-color .15s}
.carrusel .cl:hover{border-color:var(--acento);color:var(--acento)}
.carrusel .cl:active{transform:scale(.94)}
.carrusel .cl:focus-visible{outline:2px solid var(--acento);outline-offset:3px}
.carrusel .cl.i{left:16px}
.carrusel .cl.d{right:16px}
.cpuntos{display:flex;gap:8px;justify-content:center;margin-top:28px}
.cpuntos i{width:6px;height:6px;border-radius:50%;
  background:color-mix(in srgb,var(--tinta) 22%,transparent);
  transition:transform .3s cubic-bezier(.32,.72,0,1),background .3s}
.cpuntos i.on{background:var(--acento);transform:scale(1.5)}
@media(max-width:760px){
  .carrusel .cl{display:none}
  .nota-media{gap:12px}
  .resenas{margin-top:32px}
}
@media(prefers-reduced-motion:reduce){
  .carrusel figcaption{transition:none}
}

/* ==========================================================================
   ANTES / DESPUÉS
   Dos fotos exactas del mismo encuadre. La de "después" va recortada con
   clip-path: mover un porcentaje no repinta la página, solo la capa.
   ========================================================================== */
.ad-lista{display:grid;gap:clamp(20px,3vw,34px);margin-top:clamp(38px,5vw,56px);
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));text-align:left}
.ad{position:relative;overflow:hidden;border-radius:20px;--corte:50%;
  border:1px solid var(--linea);background:var(--rosa);
  touch-action:pan-y;user-select:none;-webkit-user-select:none}
.ad img{width:100%;aspect-ratio:4/3;object-fit:cover;pointer-events:none}
.ad-b{position:absolute;inset:0;clip-path:inset(0 0 0 var(--corte))}
.ad-b img{height:100%}
.ad-et{position:absolute;top:14px;z-index:3;font-size:.6rem;letter-spacing:.28em;
  text-transform:uppercase;padding:7px 12px;border-radius:99px;
  background:color-mix(in srgb,#0b0f0d 62%,transparent);color:#fff;
  backdrop-filter:blur(8px);transition:opacity .3s}
.ad-et-a{left:14px}
.ad-et-b{right:14px}
.ad-tira{position:absolute;top:0;bottom:0;left:var(--corte);width:44px;z-index:4;
  transform:translateX(-50%);cursor:ew-resize;display:grid;place-items:center}
.ad-tira::before{content:'';position:absolute;top:0;bottom:0;width:2px;
  background:#fff;box-shadow:0 0 0 1px color-mix(in srgb,#000 22%,transparent)}
.ad-tira i{position:relative;width:44px;height:44px;border-radius:50%;background:#fff;
  box-shadow:0 6px 22px color-mix(in srgb,#000 28%,transparent);
  transition:transform .2s var(--ease)}
.ad-tira i::before,.ad-tira i::after{content:'';position:absolute;top:50%;
  width:0;height:0;border:5px solid transparent;margin-top:-5px}
.ad-tira i::before{left:9px;border-right-color:#1a211d}
.ad-tira i::after{right:9px;border-left-color:#1a211d}
.ad:hover .ad-tira i,.ad.ad-on .ad-tira i{transform:scale(1.12)}
.ad-tira:focus-visible{outline:2px solid var(--acento-t,var(--acento));outline-offset:-4px}
.ad figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:40px 18px 16px;
  font-size:.84rem;color:#fff;
  background:linear-gradient(transparent,color-mix(in srgb,#000 74%,transparent))}
.ad.ad-on .ad-et{opacity:0}
@media(prefers-reduced-motion:reduce){.ad-tira i{transition:none}}

/* ==========================================================================
   AJUSTES DE ESTA WEB · Conservas Rueda
   Tema claro con el verde de su logotipo. Dos cosas que hay que corregir del
   tema claro genérico: el botón principal, que allí lleva texto oscuro sobre
   pastel y aquí tiene que ser el elemento más visible de la pantalla, y el
   sitio del logotipo, que sustituye al nombre escrito.
   ========================================================================== */
body.claro .b1,
body.claro .form button,
body.claro .barra .b1{background:var(--acento-t);color:#fff;
  box-shadow:0 10px 30px color-mix(in srgb,var(--acento-t) 26%,transparent)}
body.claro .b1:hover,body.claro .form button:hover{
  background:color-mix(in srgb,var(--acento-t) 86%,#000);
  box-shadow:0 14px 38px color-mix(in srgb,var(--acento-t) 34%,transparent)}
body.claro .nav .res{background:var(--acento-t);color:#fff;border-color:var(--acento-t)}
body.claro .nav .res:hover{background:color-mix(in srgb,var(--acento-t) 86%,#000);color:#fff}
/* Los campos, en blanco puro: sobre la banda salvia, un campo del mismo
   color que el fondo no se lee como algo en lo que se pueda escribir. */
body.claro .form input,body.claro .form select,body.claro .form textarea{
  background:#fff;border-color:color-mix(in srgb,var(--tinta) 15%,transparent);
  border-radius:12px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
body.claro .form input:focus,body.claro .form select:focus,body.claro .form textarea:focus{
  border-color:var(--acento-t);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--acento-t) 14%,transparent)}
body.claro .form textarea{resize:vertical;min-height:120px}
.btn,.form button{border-radius:99px}
.mapa-marco{border-radius:20px}
/* El "desliza" de la portada, sobre foto clara */
body.claro .hero .baja{color:color-mix(in srgb,var(--tinta) 62%,transparent)}

/* Los números del proceso: en la rejilla de servicios el icono es el número */
body.claro .proceso .serv .ic{font-family:var(--serif);font-size:1.5rem;letter-spacing:-.03em;
  opacity:.5}
/* La frase de una tarjeta de servicio: un párrafo normal, no una lista de
   una sola viñeta en mayúsculas. */
.tarjeta .tp{color:var(--tinta60);font-size:.95rem;font-weight:300;margin-bottom:26px}
.tarjeta{flex:1}
.tarjeta .btn{margin-top:auto;width:100%}

/* ==========================================================================
   MÓVIL · dos cosas que se salían de la pantalla
   ========================================================================== */
@media(max-width:720px){
  /* El titular de la portada: a 17vw, "PROFESIONAL." no cabe en un iPhone
     y se salía por la derecha arrastrando con él a los botones. */
  .hero .cont{width:100%;max-width:100%}
  .hero h1{font-size:clamp(2rem,11vw,4.6rem)}
  .hero .sub{max-width:30ch}
}
@media(max-width:560px){
  /* "PROFESIONALIDAD" no entraba en media columna */
  .serv div{padding:24px 11px}
  .serv b{font-size:.9rem;letter-spacing:-.025em}
  .serv span{font-size:.76rem}
  .serv .ic{font-size:1.4rem;margin-bottom:8px}
}
/* Tarjeta de servicio con foto y sin etiqueta: el título pegaba con la foto */
.tarjeta.con-foto img+h3{margin-top:26px}
.tarjeta.con-foto .tp{margin:0 30px 26px}
.tarjeta.con-foto .btn{margin:0 30px 30px;width:auto}

/* --------------------------------------------------------------------------
   La portadilla de «Tienda y pedidos»
   Su foto es panorámica y lo que se quiere ver es la tienda entera, con el
   suelo y el techo. Con la altura de serie la banda se comía la mitad, y el
   velo de CSS remataba lavando lo poco que quedaba. Así que: más alta, y el
   velo casi transparente, porque el titular ya se apoya en un velo crema
   horneado dentro de la propia imagen (img/tienda-port.jpg).
   -------------------------------------------------------------------------- */
body[data-pagina="tienda"] .portadilla{
  min-height:clamp(420px,66svh,640px)}
body[data-pagina="tienda"].claro .portadilla .velo{background:
  linear-gradient(180deg,
    color-mix(in srgb,var(--fondo) 26%,transparent) 0%,
    transparent 22%,
    transparent 74%,
    color-mix(in srgb,var(--fondo) 55%,transparent) 100%)}
@media(max-width:720px){
  body[data-pagina="tienda"] .portadilla{min-height:clamp(360px,56svh,460px)}
}