/* =========================================================================
   HOSTAL EL DESCANSO — portada, dos temas sobre una sola estructura
   tema "b" = La casa de tablas      → antofagastahostal.cl
   tema "a" = La pieza con la luz    → hostaleldescanso.cl
   Fuente única: /root/hostal-portada/  ·  build.sh genera los dos sitios
   ========================================================================= */

/* =========================================================================
   FUENTES PROPIAS (31 jul 2026)
   Antes se pedían a fonts.googleapis.com y ESA hoja BLOQUEABA el render
   797 ms — medido con Lighthouse, era la causa del LCP alto. Sirviéndolas
   desde el propio dominio desaparece la conexión a un tercero (DNS + TLS +
   CSS) y, de paso, la IP del visitante deja de viajar a Google.
   Bricolage y Karla son VARIABLES: un archivo cubre todos los pesos.
   Solo subconjunto latin: el sitio es en español.
   ========================================================================= */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;
  font-display:swap;src:url(/assets/fonts/BricolageGrotesque-var.woff2) format("woff2")}
@font-face{font-family:"Karla";font-style:normal;font-weight:400 700;
  font-display:swap;src:url(/assets/fonts/Karla-var.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;
  font-display:swap;src:url(/assets/fonts/InstrumentSerif-400-normal.woff2) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;
  font-display:swap;src:url(/assets/fonts/InstrumentSerif-400-italic.woff2) format("woff2")}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
img{max-width:100%;display:block;height:auto}
button,input,select{font:inherit;color:inherit}

/* ---------- TEMA B · La casa de tablas ---------- */
html[data-tema="b"]{
  --fondo:#FBF7EF; --fondo2:#F2EADB; --fondo3:#20211F;
  --tinta:#20211F; --tinta2:#4A4B47; --tinta3:#6B6A64;
  --acento:#0E6E9C; --acento-d:#0A5679; --acento-l:#5FB0DC;
  --madera:#B8763A; --linea:#DDD3C0; --borde:#20211F;
  --sobre-oscuro:#F6F1E6; --sobre-oscuro2:#C3BDB0;
  --radio:2px; --borde-g:2px;
  --disp:"Bricolage Grotesque",Georgia,serif; --body:"Karla",system-ui,sans-serif;
  --peso-disp:800; --track-disp:-.035em;
}
/* ---------- TEMA A · La pieza con la luz encendida ---------- */
html[data-tema="a"]{
  --fondo:#F6EFE4; --fondo2:#EDE3D3; --fondo3:#17120E;
  --tinta:#241D16; --tinta2:#5C5145; --tinta3:#726454;
  --acento:#5F6B52; --acento-d:#4A5440; --acento-l:#E8A33D;
  --madera:#B07C3A; --linea:#DFD3C0; --borde:#241D16;
  --sobre-oscuro:#F6EFE4; --sobre-oscuro2:#CFC2AE;
  --radio:0px; --borde-g:1px;
  --disp:"Instrument Serif",Georgia,serif; --body:"Karla",system-ui,sans-serif;
  --peso-disp:400; --track-disp:-.015em;
}

html{scroll-behavior:smooth}
body{
  background:var(--fondo);color:var(--tinta);font-family:var(--body);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:var(--disp);font-weight:var(--peso-disp);letter-spacing:var(--track-disp);line-height:1.06}
a{color:var(--acento);text-decoration-thickness:1px;text-underline-offset:3px}

.skip{position:absolute;left:-9999px;top:0;background:var(--tinta);color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--acento);outline-offset:2px}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:0;border-radius:var(--radio);padding:14px 22px;cursor:pointer;
  font-family:var(--body);font-weight:700;font-size:1rem;line-height:1.2;
  text-decoration:none;min-height:48px;transition:background .18s,transform .18s}
.btn svg{width:19px;height:19px;fill:currentColor;flex:none}
.btn-principal{background:var(--acento);color:#fff}
.btn-principal:hover{background:var(--acento-d)}
/* #128C4A daba 4,31:1 con texto blanco (mínimo 4,5). */
.btn-wa{background:#0E7A3F;color:#fff}
.btn-wa:hover{background:#0B6733}
.btn-linea{background:transparent;color:var(--tinta);border:var(--borde-g) solid var(--borde)}
.btn-linea:hover{background:var(--fondo2)}
.btn-ancho{width:100%}

/* ================= BARRA SUPERIOR ================= */
.bar{position:sticky;top:0;z-index:40;background:var(--fondo);border-bottom:var(--borde-g) solid var(--borde)}
html[data-tema="a"] .bar{background:var(--fondo3);border-bottom-color:rgba(246,239,228,.16)}
.bar-in{max-width:1180px;margin:0 auto;padding:11px 24px;display:flex;align-items:center;gap:22px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta);font-family:var(--disp);
  font-weight:var(--peso-disp);letter-spacing:var(--track-disp);font-size:1.16rem;flex:none}
html[data-tema="a"] .marca{color:var(--sobre-oscuro)}
.bar-nav{display:flex;gap:20px;margin-left:auto;font-size:.94rem}
.bar-nav a{color:var(--tinta2);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.bar-nav a:hover{color:var(--acento);border-bottom-color:var(--acento)}
html[data-tema="a"] .bar-nav a{color:var(--sobre-oscuro2)}
html[data-tema="a"] .bar-nav a:hover{color:var(--acento-l);border-bottom-color:var(--acento-l)}
.bar-cta{display:flex;align-items:center;gap:12px;flex:none}
.tel{display:flex;align-items:center;gap:7px;color:var(--tinta);text-decoration:none;font-size:.93rem}
.tel svg{width:17px;height:17px;fill:var(--acento)}
html[data-tema="a"] .tel{color:var(--sobre-oscuro)}
html[data-tema="a"] .tel svg{fill:var(--acento-l)}
.bar .btn-wa{padding:10px 17px;min-height:42px;font-size:.92rem}

/* ================= HERO ================= */
.hero{position:relative;background:var(--fondo)}

/* — tema B: partido, texto y foto lado a lado — */
html[data-tema="b"] .hero{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:1.02fr 1fr;border-bottom:3px solid var(--borde)}
/* texto a la izquierda y foto a la derecha, como la dirección aprobada */
html[data-tema="b"] .hero-txt{padding:52px 44px 46px 24px;min-width:0;order:1}
html[data-tema="b"] .hero-foto{position:relative;border-left:2px solid var(--borde);min-width:0;order:2}
html[data-tema="b"] .hero-foto img{width:100%;height:100%;object-fit:cover;min-height:480px}
html[data-tema="b"] .hero-pin{position:absolute;left:0;bottom:28px;background:var(--tinta);color:var(--fondo);
  padding:9px 17px;font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}

/* — tema A: foto de fondo, texto encima — */
html[data-tema="a"] .hero{background:var(--fondo3);color:var(--sobre-oscuro);overflow:hidden}
html[data-tema="a"] .hero-foto{position:absolute;inset:0}
/* 0.55 es el techo: con el gradiente de abajo, el peor caso (píxel blanco de la foto
   tras el texto) da 8,5:1 en el titular y 4,52:1 en el ámbar. A 0.60 el ámbar cae a 4,20 y falla AA. */
html[data-tema="a"] .hero-foto img{width:100%;height:100%;object-fit:cover;opacity:.55}
html[data-tema="a"] .hero-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(23,18,14,.62) 0%,rgba(23,18,14,.76) 48%,rgba(23,18,14,.95) 100%)}
html[data-tema="a"] .hero-pin{display:none}
html[data-tema="a"] .hero-txt{position:relative;max-width:1180px;margin:0 auto;padding:56px 24px 46px;min-width:0}

.ubica{font-size:.8rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--acento);
  margin-bottom:16px;display:flex;align-items:center;gap:10px}
.ubica::before{content:"";width:28px;height:3px;background:var(--madera);flex:none}
/* ⚠️ El ámbar del tema A SOLO funciona sobre fondo oscuro. Sobre los fondos
   claros da 1,70:1 y 1,89:1 (WCAG AA pide 4,5 para este tamaño). Medido el
   31 jul: fallaban los kickers de desayunos, «cómo llegar» y el bloque nuevo.
   Por defecto va musgo oscuro; el ámbar se reserva a las secciones oscuras. */
html[data-tema="a"] .ubica{color:var(--acento-d)}
html[data-tema="a"] .ubica::before{background:var(--madera)}
html[data-tema="a"] .hero .ubica,
html[data-tema="a"] .tarifa .ubica,
html[data-tema="a"] .empresas .ubica{color:var(--acento-l)}
/* El tema B tiene el problema espejo: su azul sobre el fondo oscuro de
   «empresas» daba 2,87:1. Ahí va la variante clara del acento. */
html[data-tema="b"] .empresas .ubica{color:var(--acento-l)}
html[data-tema="b"] .empresas .ubica::before{background:var(--acento-l)}
html[data-tema="a"] .hero .ubica::before,
html[data-tema="a"] .tarifa .ubica::before,
html[data-tema="a"] .empresas .ubica::before{background:var(--acento-l)}

.hero h1{font-size:clamp(2.1rem,5.4vw,3.65rem);margin-bottom:18px;max-width:16ch}
html[data-tema="b"] .hero h1 span{color:var(--acento);display:block}
html[data-tema="a"] .hero h1{max-width:19ch}
html[data-tema="a"] .hero h1 span{color:var(--acento-l);font-style:italic;display:block}
.hero .sub{font-size:clamp(1.02rem,2vw,1.16rem);color:var(--tinta2);max-width:46ch;margin-bottom:28px}
html[data-tema="a"] .hero .sub{color:#E2D8C8}

.cifras{list-style:none;display:grid;grid-template-columns:repeat(4,auto);gap:14px 30px;
  padding:19px 0;margin-bottom:26px;border-top:3px solid var(--borde);border-bottom:1px solid var(--linea)}
html[data-tema="a"] .cifras{border-top-color:rgba(246,239,228,.32);border-bottom-color:rgba(246,239,228,.14)}
.cifras b{display:block;font-family:var(--disp);font-weight:var(--peso-disp);font-size:1.55rem;
  letter-spacing:var(--track-disp);line-height:1}
.cifras b i{font-style:normal;font-size:.62em;color:var(--tinta3)}
.cifras span{font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta3);
  margin-top:5px;display:block;max-width:15ch}
html[data-tema="a"] .cifras b{color:var(--sobre-oscuro)}
html[data-tema="a"] .cifras span,html[data-tema="a"] .cifras b i{color:var(--sobre-oscuro2)}

/* ---------- buscador ---------- */
.buscador{background:var(--fondo2);border:var(--borde-g) solid var(--borde);padding:16px;
  display:grid;grid-template-columns:1fr 1fr .85fr;gap:12px;align-items:end}
html[data-tema="a"] .buscador{background:var(--fondo);border-color:var(--fondo);
  box-shadow:0 22px 54px rgba(0,0,0,.42)}
.buscador .campo{min-width:0}
.buscador label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--tinta2);margin-bottom:6px}
.buscador input,.buscador select{width:100%;min-width:0;background:#fff;color:var(--tinta);
  border:var(--borde-g) solid var(--borde);border-radius:var(--radio);padding:11px 12px;
  font-size:1rem;min-height:46px}
html[data-tema="a"] .buscador input,html[data-tema="a"] .buscador select{border-color:#CFC0A8}
.buscador .btn-principal{grid-column:1/-1;width:100%;font-size:1.04rem;padding:15px}

/* tema A en escritorio: el buscador no debe cruzar los 1180px ni dejar el botón
   a todo lo ancho — queda en línea con los campos. En móvil vuelve a apilarse. */
@media(min-width:901px){
  html[data-tema="a"] .buscador{max-width:880px;grid-template-columns:1fr 1fr .85fr auto;align-items:end}
  html[data-tema="a"] .buscador .btn-principal{grid-column:auto;width:auto;padding:14px 30px}
}
.garantia{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:.93rem;color:var(--tinta2);max-width:52ch}
.garantia span{flex:1;min-width:0}
.garantia svg{width:20px;height:20px;flex:none;stroke:var(--acento);margin-top:2px}
.garantia b{color:var(--tinta)}
html[data-tema="a"] .garantia{color:var(--sobre-oscuro2)}
html[data-tema="a"] .garantia b{color:var(--acento-l)}
html[data-tema="a"] .garantia svg{stroke:var(--acento-l)}

/* ================= SECCIONES ================= */
section{padding:64px 0}
.hero{padding:0}
.sec-head{margin-bottom:34px;max-width:60ch}
.sec-head h2{font-size:clamp(1.65rem,3.6vw,2.4rem);margin-bottom:12px}
.sec-head p{color:var(--tinta2);font-size:1.04rem}
.sec-head-claro h2{color:var(--sobre-oscuro)}
.sec-head-claro p{color:var(--sobre-oscuro2)}

/* ---------- galería ---------- */
.galeria{padding-bottom:0}
.tira-fotos{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:8px;
  border-top:3px solid var(--borde);border-bottom:3px solid var(--borde)}
.tira-fotos figure{position:relative;border-right:2px solid var(--borde);min-width:0;overflow:hidden}
.tira-fotos figure:nth-child(5n),.tira-fotos figure:last-child{border-right:0}
.tira-fotos img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:transform .5s ease}
.tira-fotos figure:hover img{transform:scale(1.05)}
.tira-fotos figcaption{position:absolute;left:8px;top:8px;background:var(--fondo);color:var(--tinta);
  font-size:.72rem;font-weight:700;padding:4px 9px;border-radius:var(--radio)}
/* gesto tema A: marco de ventana blanco */
html[data-tema="a"] .tira-fotos{border:0;gap:10px;padding:0 24px 4px;max-width:1180px;margin:8px auto 0}
html[data-tema="a"] .tira-fotos figure{border:8px solid var(--fondo);border-bottom-width:0}
html[data-tema="a"] .tira-fotos figcaption{left:0;top:auto;bottom:0;background:var(--fondo)}

/* ---------- tipos de habitación ---------- */
.tipos{background:var(--fondo2)}
.grid-tipos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tipo{background:var(--fondo);border:var(--borde-g) solid var(--borde);border-radius:var(--radio);
  overflow:hidden;display:flex;flex-direction:column;min-width:0}
html[data-tema="a"] .tipo{border-color:var(--linea);box-shadow:0 2px 0 rgba(36,29,22,.08)}
.tipo-foto img{aspect-ratio:4/3;object-fit:cover;width:100%}
.tipo-txt{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.tipo-tag{font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--madera);margin-bottom:8px}
.tipo h3{font-size:1.3rem;margin-bottom:9px}
.tipo p{color:var(--tinta2);font-size:.97rem;margin-bottom:14px}
.precio{margin-top:auto;padding-top:12px;border-top:1px solid var(--linea);
  display:flex;align-items:baseline;gap:8px;margin-bottom:0!important}
.precio b{font-family:var(--disp);font-weight:var(--peso-disp);font-size:1.5rem;
  letter-spacing:var(--track-disp);color:var(--tinta)}
.precio span{font-size:.82rem;color:var(--tinta3)}

.nota-precios{margin-top:20px;font-size:.93rem;color:var(--tinta2);background:var(--fondo);
  border:1px solid var(--linea);border-left:3px solid var(--madera);padding:12px 15px;border-radius:var(--radio)}
.nota-precios b{color:var(--tinta)}

/* =========================================================================
   VENTAJAS DEL HERO — el estacionamiento es diferenciador de mercado:
   casi ningún hostal de Antofagasta tiene, y los que sí (hoteles) cobran
   3-4 veces más. Por eso va arriba del pliegue y no enterrado en la lista.
   ========================================================================= */
.ventajas{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.ventajas li{display:flex;align-items:center;gap:9px;padding:9px 13px;
  border:var(--borde-g) solid var(--linea);border-radius:var(--radio);
  background:var(--fondo);min-width:0}
.ventajas svg{width:19px;height:19px;flex:none;stroke:var(--acento);fill:none}
.ventajas span{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ventajas b{font-size:.9rem;color:var(--tinta);white-space:nowrap}
.ventajas span{font-size:.76rem;color:var(--tinta2)}
/* La plaza de estacionamiento es LA ventaja: se marca con el color de acento */
.ventajas .v-parking{border-color:var(--acento);border-width:2px;background:var(--fondo2)}
html[data-tema="a"] .ventajas li{background:rgba(23,18,14,.42);border-color:rgba(246,239,228,.22);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
html[data-tema="a"] .ventajas b{color:var(--sobre-oscuro)}
html[data-tema="a"] .ventajas span{color:var(--sobre-oscuro2)}
html[data-tema="a"] .ventajas svg{stroke:var(--acento-l)}
html[data-tema="a"] .ventajas .v-parking{border-color:var(--acento-l);background:rgba(232,163,61,.16)}
.garantia a{color:var(--acento);font-weight:700;white-space:nowrap}
html[data-tema="a"] .garantia a{color:var(--acento-l)}

/* =========================================================================
   TARIFA POR PERMANENCIA — el deslizador
   Se alimenta de /api/landing/tramos, que sale de las MISMAS reglas de la BD
   que cobra el motor: la web no puede prometer un precio que caja no haga.
   ========================================================================= */
.tarifa{background:var(--fondo2);border-top:var(--borde-g) solid var(--borde);
  border-bottom:var(--borde-g) solid var(--borde);padding:56px 0}
html[data-tema="a"] .tarifa{background:var(--fondo3);border-color:rgba(246,239,228,.16)}
html[data-tema="a"] .tarifa .sec-head h2{color:var(--sobre-oscuro)}
html[data-tema="a"] .tarifa .sec-head p{color:var(--sobre-oscuro2)}
html[data-tema="a"] .tarifa .ubica{color:var(--acento-l)}

.calc{background:var(--fondo);border:var(--borde-g) solid var(--borde);border-radius:var(--radio);overflow:hidden}
html[data-tema="a"] .calc{border-color:var(--linea)}

/* --- pestañas de tipo de unidad --- */
.calc-tipos{display:flex;border-bottom:var(--borde-g) solid var(--borde)}
html[data-tema="a"] .calc-tipos{border-bottom-color:var(--linea)}
.calc-tipos button{flex:1;background:var(--fondo2);border:0;border-right:1px solid var(--linea);
  padding:15px 10px;cursor:pointer;font-weight:700;font-size:.95rem;color:var(--tinta2);
  min-height:52px;transition:background .16s,color .16s}
.calc-tipos button:last-child{border-right:0}
.calc-tipos button:hover{color:var(--tinta)}
.calc-tipos button.on{background:var(--fondo);color:var(--acento);box-shadow:inset 0 -3px 0 var(--acento)}
/* El ámbar como TEXTO sobre el crema da 1,89:1. Se queda solo como subrayado
   (decorativo, no necesita ratio) y el texto pasa a tinta: 13,4:1. */
html[data-tema="a"] .calc-tipos button.on{color:var(--tinta);box-shadow:inset 0 -3px 0 var(--acento-l)}

.calc-cuerpo{display:grid;grid-template-columns:1.15fr .85fr}
.calc-panel{padding:28px 26px}
.calc-panel+.calc-panel{border-left:var(--borde-g) solid var(--linea)}
/* --tinta3 sobre estos fondos da 3,44:1 en el tema B y 3,55:1 en el A: falla el
   mínimo 4,5:1 de WCAG AA para texto pequeño. Medido, no supuesto. Va --tinta2. */
.calc-lbl{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta2)}
.calc-noches{font-family:var(--disp);font-weight:var(--peso-disp);letter-spacing:var(--track-disp);
  font-size:clamp(2rem,5vw,2.9rem);line-height:1;margin:4px 0 22px;color:var(--tinta)}
.calc-noches b{font:inherit;color:var(--acento)}
.calc-noches span{font-size:.42em;color:var(--tinta3);font-family:var(--body);font-weight:400;letter-spacing:0}

/* --- el control deslizante --- */
.calc-rango{position:relative;padding-bottom:30px}
#rango-noches{
  -webkit-appearance:none;appearance:none;width:100%;height:34px;background:transparent;
  cursor:grab;display:block;touch-action:pan-y;   /* pan-y: el dedo arrastra el control, la página sigue bajando */
}
#rango-noches:active{cursor:grabbing}
/* La barra se pinta con un degradado que avanza: --avance lo escribe el JS */
#rango-noches::-webkit-slider-runnable-track{
  height:10px;border-radius:99px;border:1px solid var(--borde);
  background:linear-gradient(90deg,var(--acento) 0 var(--avance,0%),var(--fondo2) var(--avance,0%) 100%);
}
#rango-noches::-moz-range-track{
  height:10px;border-radius:99px;border:1px solid var(--borde);
  background:linear-gradient(90deg,var(--acento) 0 var(--avance,0%),var(--fondo2) var(--avance,0%) 100%);
}
#rango-noches::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-11px;
  border-radius:50%;background:var(--fondo);border:3px solid var(--acento);
  box-shadow:0 2px 8px rgba(0,0,0,.22);transition:transform .12s;
}
#rango-noches::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;background:var(--fondo);
  border:3px solid var(--acento);box-shadow:0 2px 8px rgba(0,0,0,.22);
}
#rango-noches:active::-webkit-slider-thumb{transform:scale(1.16)}
#rango-noches:focus-visible::-webkit-slider-thumb{outline:3px solid var(--acento);outline-offset:3px}
/* ⚠️ NO agrupar ::-webkit-* con ::-moz-* en una misma regla: el navegador que no
   reconoce uno de los dos selectores DESCARTA LA REGLA ENTERA. Agrupados, Chrome
   ignoraba esto y la barra del tema A salía verde musgo en vez de ámbar. */
html[data-tema="a"] #rango-noches::-webkit-slider-runnable-track{
  background:linear-gradient(90deg,var(--acento-l) 0 var(--avance,0%),var(--fondo2) var(--avance,0%) 100%);
}
html[data-tema="a"] #rango-noches::-moz-range-track{
  background:linear-gradient(90deg,var(--acento-l) 0 var(--avance,0%),var(--fondo2) var(--avance,0%) 100%);
}
html[data-tema="a"] #rango-noches::-webkit-slider-thumb{border-color:var(--acento-l)}
html[data-tema="a"] #rango-noches::-moz-range-thumb{border-color:var(--acento-l)}

/* marcas de tramo bajo la barra */
.calc-marcas{position:absolute;left:0;right:0;bottom:0;height:26px;pointer-events:none}
.calc-marcas span{position:absolute;left:var(--p);transform:translateX(-50%);
  font-size:.74rem;color:var(--tinta2);display:flex;flex-direction:column;align-items:center;gap:3px}
.calc-marcas i{width:1px;height:7px;background:var(--tinta3);display:block}
.calc-pista{font-size:.8rem;color:var(--tinta2);margin-top:6px}

/* --- resultado --- */
.calc-resultado{background:var(--fondo2);display:flex;flex-direction:column;gap:14px}
.calc-fila{display:flex;flex-direction:column;gap:1px}
.calc-precio,.calc-total{font-family:var(--disp);font-weight:var(--peso-disp);
  letter-spacing:var(--track-disp);line-height:1;color:var(--tinta)}
.calc-fila-alta .calc-precio{font-size:clamp(2.1rem,5.4vw,3rem);color:var(--acento)}
.calc-total{font-size:1.5rem}
.calc-neto{font-size:.85rem;color:var(--tinta2)}

/* TEMA A · el panel del precio va sobre la noche, que es donde el ámbar vive.
   Sobre el crema daba 1,70:1 (WCAG AA pide 3 para texto grande); sobre #17120E
   da 8,67:1. Además es la firma del tema: «la pieza con la luz encendida». */
html[data-tema="a"] .calc-resultado{background:var(--fondo3)}
html[data-tema="a"] .calc-resultado .calc-lbl{color:var(--sobre-oscuro2)}
html[data-tema="a"] .calc-resultado .calc-neto{color:var(--sobre-oscuro2)}
html[data-tema="a"] .calc-resultado .calc-total{color:var(--sobre-oscuro)}
html[data-tema="a"] .calc-fila-alta .calc-precio{color:var(--acento-l)}
html[data-tema="a"] .calc-parking{color:var(--sobre-oscuro2)}
html[data-tema="a"] .calc-parking b{color:var(--sobre-oscuro)}
html[data-tema="a"] .calc-ahorro{color:#8FD3A6;background:rgba(143,211,166,.12);border-color:rgba(143,211,166,.4)}
/* el precio parpadea al cambiar: confirma que el control respondió */
.calc-precio.pulso,.calc-total.pulso{animation:calcPulso .32s ease}
@keyframes calcPulso{0%{opacity:.35;transform:translateY(-3px)}100%{opacity:1;transform:none}}

/* #0F7A3D sobre su propio fondo verde daba 4,05:1 — bajo el 4,5 de AA. Oscurecido. */
.calc-ahorro{font-size:.92rem;font-weight:700;color:#0A5A2B;background:rgba(18,140,74,.1);
  border:1px solid rgba(18,140,74,.3);border-radius:var(--radio);padding:9px 12px}
/* Unidad de precio fijo (baño privado y departamentos): sin este aviso, el
   visitante mueve el control, ve el mismo número y cree que la página falla. */
.calc-ahorro.calc-plano{color:var(--tinta2);background:var(--fondo);
  border-color:var(--linea);font-weight:400}
html[data-tema="a"] .calc-ahorro.calc-plano{color:var(--sobre-oscuro2);
  background:rgba(246,239,228,.07);border-color:rgba(246,239,228,.22)}
/* El salto de tramo: quedarse UNA noche más puede costar MENOS en total
   (a 15 noches el total baja respecto de 14). Decirlo es la palanca más
   fuerte que tiene esta página para subir la estadía promedio. */
.calc-salto{font-size:.92rem;font-weight:700;color:var(--tinta);
  background:var(--acento);color:#fff;border-radius:var(--radio);padding:10px 12px;line-height:1.4}
html[data-tema="a"] .calc-salto{background:var(--acento-l);color:#241D16}
.calc-parking{font-size:.88rem;color:var(--tinta2);display:flex;gap:8px;align-items:flex-start}
.calc-parking b{color:var(--tinta)}
.calc-nota{font-size:.88rem;color:var(--tinta2);padding:15px 26px;
  border-top:1px solid var(--linea);background:var(--fondo)}
.calc-nota b{color:var(--tinta)}

/* =========================================================================
   BLOQUE PROPIO + PREGUNTAS — el contenido que hace distinto a cada dominio.
   Antes las dos portadas compartían el 93,8% del texto y Google mostraba solo
   una. Aquí antofagastahostal habla de estadía corta y hostaleldescanso de
   estadía larga, cada uno con el vocabulario que su público busca de verdad.
   ========================================================================= */
.propio{background:var(--fondo2);border-top:var(--borde-g) solid var(--borde)}
html[data-tema="a"] .propio{background:var(--fondo2);border-color:var(--linea)}
.propio-cols{display:grid;grid-template-columns:1fr 1fr;gap:34px}
.propio-cols h3{font-size:1.18rem;margin-bottom:9px;color:var(--tinta)}
.propio-cols p{color:var(--tinta2);margin-bottom:12px}
.propio-cols strong{color:var(--tinta)}
/* var(--acento) daba 4,45:1 en el tema A, justo bajo el mínimo de 4,5. */
.propio-cols a{font-weight:700;color:var(--acento-d)}

.faq-lista{display:flex;flex-direction:column;gap:10px;max-width:78ch}
.faq-i{border:var(--borde-g) solid var(--linea);border-radius:var(--radio);
  background:var(--fondo);overflow:hidden}
.faq-i summary{cursor:pointer;padding:14px 17px;list-style:none;display:flex;
  align-items:center;gap:11px;transition:background .16s}
.faq-i summary::-webkit-details-marker{display:none}
/* El signo lo dibuja el CSS, pero la pregunta se lee igual sin él: nada
   esencial puede depender de un pseudo-elemento. */
.faq-i summary::before{content:"+";flex:none;width:22px;height:22px;display:grid;
  place-items:center;border:1.5px solid var(--acento);border-radius:50%;
  color:var(--acento);font-weight:700;font-size:.95rem;line-height:1}
.faq-i[open] summary::before{content:"−"}
.faq-i summary:hover{background:var(--fondo2)}
.faq-i summary h3{font-size:1rem;font-family:var(--body);font-weight:700;
  letter-spacing:0;line-height:1.35;margin:0;color:var(--tinta)}
.faq-i>div{padding:0 17px 15px 50px}
.faq-i p{color:var(--tinta2);font-size:.96rem}
.faq-i strong{color:var(--tinta)}
html[data-tema="a"] .faq-i summary::before{border-color:var(--acento-l);color:var(--madera)}

/* =========================================================================
   AVISO DE COOKIES — no puede tapar el CTA de WhatsApp ni empujar el
   contenido. Se sitúa POR ENCIMA de la barra fija móvil, que se aparta
   mientras el aviso está visible (la clase .con-aviso la sube).
   ========================================================================= */
.cookies{position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--fondo3);color:var(--sobre-oscuro);
  border-top:3px solid var(--acento);
  padding:14px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  box-shadow:0 -6px 24px rgba(0,0,0,.24)}
.cookies[hidden]{display:none}
.cookies p{font-size:.92rem;line-height:1.45;flex:1;min-width:250px;margin:0;
  color:var(--sobre-oscuro)}
.cookies a{color:#9FD4F0;text-decoration:underline}
html[data-tema="a"] .cookies a{color:var(--acento-l)}
.cookies-btn{display:flex;gap:10px;flex:none}
.cookies .btn{padding:10px 20px;min-height:44px;font-size:.94rem}
.cookies .btn-linea{color:var(--sobre-oscuro);border-color:var(--sobre-oscuro2)}
.cookies .btn-linea:hover{background:rgba(246,241,230,.12)}
/* mientras el aviso está abajo, la barra fija se sube para no quedar tapada */
.stickybar.con-aviso{bottom:var(--alto-aviso,92px)}

/* ---------- desayunos «Cada Mañana» ---------- */
.desayunos .sec-head{max-width:64ch}
.grid-desayunos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.desayuno{background:var(--fondo);border:var(--borde-g) solid var(--borde);border-radius:var(--radio);
  overflow:hidden;display:flex;flex-direction:column;min-width:0;position:relative}
html[data-tema="a"] .desayuno{border-color:var(--linea)}
.desayuno.destacado{border-color:var(--acento);border-width:2px}
.desayuno-foto{background:var(--fondo2)}
.desayuno-foto img{aspect-ratio:4/3;object-fit:cover;width:100%}
.desayuno-txt{padding:16px 17px 19px;display:flex;flex-direction:column;flex:1}
.desayuno h3{font-size:1.12rem;margin-bottom:6px}
.etiqueta{display:inline-block;align-self:flex-start;background:var(--acento);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;margin-bottom:8px;border-radius:var(--radio)}
.precio-desayuno{font-family:var(--disp);font-weight:var(--peso-disp);font-size:1.5rem;
  letter-spacing:var(--track-disp);color:var(--acento);margin-bottom:11px}
.precio-desayuno span{font-family:var(--body);font-weight:400;font-size:.7rem;
  letter-spacing:0;color:var(--tinta3)}
.desayuno ul{list-style:none;margin-top:auto}
.desayuno li{font-size:.9rem;color:var(--tinta2);padding:5px 0 5px 16px;position:relative;
  border-top:1px solid var(--linea)}
.desayuno li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;
  background:var(--madera);border-radius:50%}
.nota-desayuno{margin-top:20px;font-size:.96rem;color:var(--tinta2);
  border-left:3px solid var(--madera);padding:10px 0 10px 14px}
.nota-desayuno a{font-weight:700}

/* ---------- formulario de cotización ---------- */
/* Sin min-width:0 los inputs del grid arrastran el ancho y rompen el móvil (medido en 375px). */
.emp-grid>*,.cf-fila>*,.grid-desayunos>*,.desayuno>*{min-width:0}
.cf{margin-bottom:11px;min-width:0}
.cf-fila{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.cf label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--sobre-oscuro2);margin-bottom:5px}
.cf input,.cf textarea{width:100%;min-width:0;background:#fff;color:#20211F;
  border:1px solid rgba(246,241,230,.3);border-radius:var(--radio);
  padding:11px 12px;font-size:1rem;min-height:46px;font-family:var(--body)}
.cf textarea{min-height:62px;resize:vertical}
.cf input:focus,.cf textarea:focus{outline:3px solid var(--acento-l);outline-offset:1px}
.cf-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-error{display:none;background:#FBE9E7;color:#8C2F1F;border-left:3px solid #8C2F1F;
  padding:9px 12px;font-size:.9rem;margin:4px 0 10px}
.cf-error.visible{display:block}
#form-cotizacion .btn-principal{margin-top:6px}
.cf-legal{font-size:.78rem;color:var(--sobre-oscuro2);margin-top:9px;line-height:1.5}
.cf-ok{text-align:center;padding:8px 0 4px}
.cf-check{width:52px;height:52px;margin:0 auto 12px;border-radius:50%;background:#128C4A;
  display:flex;align-items:center;justify-content:center}
.cf-check svg{width:28px;height:28px;stroke:#fff}
.cf-ok h4{font-family:var(--disp);font-weight:var(--peso-disp);font-size:1.35rem;
  letter-spacing:var(--track-disp);color:var(--sobre-oscuro);margin-bottom:8px}
.cf-ok p{color:var(--sobre-oscuro2);font-size:.95rem;margin-bottom:16px}
.emp-otra{margin-top:18px;padding-top:16px;border-top:1px solid rgba(246,241,230,.2)}
.emp-otra span{display:block;font-size:.85rem;color:var(--sobre-oscuro2);margin-bottom:9px}

/* ---------- tablero de disponibilidad ---------- */
.tablero{background:var(--fondo3);color:var(--sobre-oscuro)}
.board-idle{border:1px dashed rgba(246,241,230,.28);padding:46px 24px;text-align:center;color:var(--sobre-oscuro2)}
.board-idle svg{width:34px;height:34px;stroke:var(--acento-l);margin:0 auto 14px}
.board-idle b{color:var(--sobre-oscuro)}
.board-meta{display:flex;flex-wrap:wrap;gap:10px 26px;padding-bottom:16px;margin-bottom:20px;
  border-bottom:1px solid rgba(246,241,230,.2);font-size:.92rem;color:var(--sobre-oscuro2)}
.board-meta b{color:var(--sobre-oscuro)}
.floors{display:grid;gap:26px}
.floor-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:9px;
  margin-bottom:13px;border-bottom:1px solid rgba(246,241,230,.2)}
.floor-head .fn{font-family:var(--disp);font-weight:var(--peso-disp);font-size:1.15rem;color:var(--sobre-oscuro)}
.floor-head .fc{font-size:.8rem;color:#8FD3A6;letter-spacing:.05em;text-transform:uppercase}
.floor-head .fc.zero{color:var(--sobre-oscuro2)}
.cells{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:11px}
.cell{text-align:left;background:rgba(246,241,230,.07);border:1px solid rgba(246,241,230,.22);
  border-radius:var(--radio);padding:13px 14px;cursor:pointer;color:var(--sobre-oscuro);
  display:grid;gap:3px;min-height:48px;transition:background .16s,border-color .16s}
.cell:hover{background:rgba(246,241,230,.14);border-color:var(--acento-l)}
.cell .cc{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--sobre-oscuro2)}
.cell .cn{font-weight:700;font-size:.98rem}
.cell .cp{font-family:var(--disp);font-weight:var(--peso-disp);font-size:1.1rem;color:var(--acento-l)}
.cell .cx{font-size:.76rem;color:var(--sobre-oscuro2)}
.spinner{width:34px;height:34px;margin:40px auto;border:3px solid rgba(246,241,230,.25);
  border-top-color:var(--acento-l);border-radius:50%;animation:giro .8s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}

/* ---------- por qué directo ---------- */
.tabla-directo{border:var(--borde-g) solid var(--borde);border-radius:var(--radio);overflow:hidden}
.fila{display:grid;grid-template-columns:1.1fr 1.25fr 1.25fr;border-bottom:1px solid var(--linea)}
.fila:last-child{border-bottom:0}
.fila>span{padding:14px 16px;font-size:.96rem;display:flex;align-items:center;min-width:0}
.fila.cabecera{background:var(--tinta);color:var(--fondo);font-weight:700}
.fila.cabecera .col-nos{color:#fff}
.fila .qué{font-weight:700;color:var(--tinta2);background:var(--fondo2)}
.fila:not(.cabecera) .col-nos{background:var(--fondo);border-left:3px solid var(--acento)}
.fila:not(.cabecera) .col-ota{color:var(--tinta2)}
.fila.cabecera .col-nos{border-left:3px solid var(--acento-l)}
.nota-directo{margin-top:16px;font-size:.93rem;color:var(--tinta3);max-width:64ch}

/* ---------- empresas ---------- */
.empresas{background:var(--fondo3);color:var(--sobre-oscuro)}
.emp-grid{display:grid;grid-template-columns:1.25fr .85fr;gap:40px;align-items:start}
.empresas h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin-bottom:14px;color:var(--sobre-oscuro)}
.emp-sub{color:var(--sobre-oscuro2);margin-bottom:24px;max-width:52ch}
.emp-lista{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.emp-lista li{border-top:1px solid rgba(246,241,230,.24);padding-top:12px}
.emp-lista b{display:block;margin-bottom:4px;font-size:1rem}
.emp-lista span{color:var(--sobre-oscuro2);font-size:.92rem}
.emp-caja{background:rgba(246,241,230,.08);border:1px solid rgba(246,241,230,.2);padding:24px;border-radius:var(--radio)}
.emp-caja h3{font-size:1.3rem;margin-bottom:10px;color:var(--sobre-oscuro)}
.emp-caja p{color:var(--sobre-oscuro2);font-size:.95rem;margin-bottom:18px}
.emp-caja .btn-linea{color:var(--sobre-oscuro);border-color:rgba(246,241,230,.45);margin-top:10px}
.emp-caja .btn-linea:hover{background:rgba(246,241,230,.1)}

/* ---------- incluye ---------- */
.grid-incluye{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:0;
  border-top:3px solid var(--borde);border-bottom:1px solid var(--linea)}
.grid-incluye li{padding:20px 16px;border-right:1px solid var(--linea);min-width:0}
.grid-incluye li:last-child{border-right:0}
.grid-incluye b{display:block;font-family:var(--disp);font-weight:var(--peso-disp);
  font-size:1.12rem;letter-spacing:var(--track-disp);margin-bottom:4px}
/* --tinta3 daba 4,03:1 aquí (mínimo 4,5 para este tamaño). */
.grid-incluye span{font-size:.85rem;color:var(--tinta2)}

/* ---------- opiniones ---------- */
.opiniones{background:var(--fondo2)}
.rating-caja{display:grid;grid-template-columns:auto 1fr;gap:34px;align-items:center;
  background:var(--fondo);border:var(--borde-g) solid var(--borde);border-radius:var(--radio);padding:30px}
.rating-num{text-align:center;padding-right:30px;border-right:1px solid var(--linea)}
.rating-num b{display:block;font-family:var(--disp);font-weight:var(--peso-disp);font-size:3.5rem;line-height:1}
.rating-num>span{font-size:.82rem;color:var(--tinta3);letter-spacing:.06em;text-transform:uppercase}
.estrellas{color:var(--madera);font-size:1.15rem;letter-spacing:2px;margin-top:6px}
.estrellas i{color:var(--linea);font-style:normal}
.rating-txt h2{font-size:clamp(1.4rem,3vw,1.9rem);margin-bottom:10px}
.rating-txt p{color:var(--tinta2);font-size:.99rem}
.rating-links{margin-top:14px;display:flex;gap:12px 20px;flex-wrap:wrap}
/* WCAG 2.2: objetivo táctil >=24px — medido en 375px, quedaban en 21px */
.rating-links a{color:var(--acento);font-weight:700;font-size:.95rem;
  display:inline-flex;align-items:center;min-height:28px;padding:3px 0}

.resenas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.resenas blockquote{background:var(--fondo);border:var(--borde-g) solid var(--borde);
  border-radius:var(--radio);padding:22px 20px;display:flex;flex-direction:column;min-width:0}
html[data-tema="a"] .resenas blockquote{border-color:var(--linea)}
.resenas p{font-size:.98rem;color:var(--tinta2);margin-bottom:16px;flex:1}
.resenas footer{border-top:1px solid var(--linea);padding-top:11px}
.resenas footer b{display:block;font-size:.95rem}
.resenas footer span{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta3)}

/* ---------- cómo llegar ---------- */
.llegar-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:stretch}
.llegar-mapa{border:var(--borde-g) solid var(--borde);border-radius:var(--radio);overflow:hidden;min-height:400px}
.llegar-mapa iframe{width:100%;height:100%;min-height:400px;border:0;display:block}
.llegar h2{font-size:clamp(1.5rem,3.2vw,2.1rem);margin-bottom:12px}
.llegar-sub{color:var(--tinta2);margin-bottom:22px}
.datos-contacto{display:grid;gap:14px;margin-bottom:24px}
.datos-contacto div{border-top:1px solid var(--linea);padding-top:11px}
.datos-contacto dt{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta3);margin-bottom:3px}
.datos-contacto dd{font-size:1.04rem;font-weight:700}
.datos-contacto a{color:var(--tinta);text-decoration:none;border-bottom:2px solid var(--acento)}

/* ---------- pie ---------- */
.pie{background:var(--fondo3);color:var(--sobre-oscuro2);padding-top:52px}
.pie-in{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:34px;padding-bottom:38px}
.pie-marca{display:flex;gap:13px;align-items:flex-start}
.pie-marca img{flex:none;border-radius:var(--radio)}
.pie-marca b{color:var(--sobre-oscuro);font-family:var(--disp);font-weight:var(--peso-disp);
  font-size:1.1rem;letter-spacing:var(--track-disp)}
.pie-marca p{font-size:.92rem;max-width:42ch}
.pie-nav,.pie-contacto{display:flex;flex-direction:column;gap:9px;font-size:.93rem}
.pie-nav b,.pie-contacto b{color:var(--sobre-oscuro);font-size:.78rem;letter-spacing:.11em;
  text-transform:uppercase;margin-bottom:5px}
.pie-nav a,.pie-contacto a{color:var(--sobre-oscuro2);text-decoration:none}
.pie-nav a:hover,.pie-contacto a:hover{color:var(--acento-l)}
.pie-fin{border-top:1px solid rgba(246,241,230,.14);padding:16px 0;font-size:.85rem}

/* ---------- barra fija móvil ---------- */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:45;display:none;
  background:var(--fondo);border-top:2px solid var(--borde);padding:10px 16px;
  align-items:center;gap:14px;transform:translateY(110%);transition:transform .25s ease}
.stickybar.show{transform:none}
.sb-precio b{display:block;font-family:var(--disp);font-weight:var(--peso-disp);font-size:1.06rem;line-height:1.1}
.sb-precio span{font-size:.76rem;color:var(--tinta3)}
.stickybar .btn{margin-left:auto;padding:12px 18px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:60;background:rgba(20,16,12,.72);
  display:none;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
.modal.open{display:flex}
.modal-caja{background:var(--fondo);border-radius:var(--radio);max-width:470px;width:100%;
  padding:26px 24px 24px;position:relative;margin:auto;border:var(--borde-g) solid var(--borde)}
.modal-x{position:absolute;right:12px;top:9px;background:transparent;border:0;font-size:1.9rem;
  line-height:1;cursor:pointer;color:var(--tinta3);width:44px;height:44px}
.modal-caja h3{font-size:1.45rem;margin-bottom:5px;padding-right:34px}
#m-sub{color:var(--tinta3);font-size:.92rem;margin-bottom:18px}
.msum{border:1px solid var(--linea);border-radius:var(--radio);padding:13px 15px;margin-bottom:15px}
.msum .r{display:flex;justify-content:space-between;font-size:.95rem;color:var(--tinta2)}
.msum .r.tot{border-top:1px solid var(--linea);margin-top:9px;padding-top:9px;color:var(--tinta)}
.msum .r.tot b{font-family:var(--disp);font-weight:var(--peso-disp);font-size:1.3rem}
.cine{background:var(--fondo2);border-left:3px solid var(--acento);padding:12px 14px;
  font-size:.91rem;color:var(--tinta2);margin-bottom:16px}
.mfield{margin-bottom:13px}
.mfield label{display:block;font-size:.75rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta2);margin-bottom:5px}
.mfield input{width:100%;background:#fff;border:var(--borde-g) solid var(--borde);
  border-radius:var(--radio);padding:11px 12px;min-height:46px}
.m-err{display:none;background:#FBE9E7;color:#8C2F1F;border-left:3px solid #8C2F1F;
  padding:10px 12px;font-size:.9rem;margin-bottom:12px}
.btn-block{width:100%;margin-bottom:10px}
.btn-copper{background:var(--acento);color:#fff}
.success{text-align:center;padding:8px 0}
.success .check{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:#128C4A;
  display:flex;align-items:center;justify-content:center}
.success .check svg{width:30px;height:30px;stroke:#fff;fill:none}
.success h3{margin-bottom:10px}
.success .code{font-family:var(--disp);font-weight:var(--peso-disp);font-size:1.9rem;
  letter-spacing:.06em;background:var(--fondo2);padding:11px;margin-bottom:13px;border-radius:var(--radio)}
.success p{font-size:.95rem;color:var(--tinta2);margin-bottom:16px}

/* ---------- revelado (solo con JS; sin JS todo visible) ---------- */
.rv{opacity:1}
.js .rv{opacity:0;transform:translateY(22px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}

/* ================= RESPONSIVE ================= */
@media(max-width:1080px){
  .tira-fotos{grid-template-columns:repeat(4,1fr)}
  .tira-fotos figure:nth-child(n+9){display:none}
  .grid-incluye{grid-template-columns:repeat(3,1fr)}
  .grid-incluye li:nth-child(3n){border-right:0}
  .grid-incluye li:nth-child(-n+3){border-bottom:1px solid var(--linea)}
}
@media(max-width:900px){
  .bar-nav{display:none}
  .bar-cta{margin-left:auto}
  html[data-tema="b"] .hero{grid-template-columns:1fr}
  html[data-tema="b"] .hero-txt{padding:34px 24px 32px;order:2}
  html[data-tema="b"] .hero-foto{order:1}
  html[data-tema="b"] .hero-foto{order:1;border-left:0;border-bottom:2px solid var(--borde)}
  html[data-tema="b"] .hero-foto img{min-height:0;aspect-ratio:16/10}
  .emp-grid,.llegar-grid,.rating-caja,.propio-cols{grid-template-columns:1fr}
  .grid-desayunos{grid-template-columns:1fr 1fr}
  .grid-tipos{grid-template-columns:1fr}
  /* El deslizador pasa a una columna: control arriba, resultado abajo, para que
     al arrastrar con el dedo el precio quede visible sin hacer scroll. */
  .calc-cuerpo{grid-template-columns:1fr}
  .calc-panel+.calc-panel{border-left:0;border-top:var(--borde-g) solid var(--linea)}
  .tipo{display:grid;grid-template-columns:150px 1fr}
  .tipo-foto img{height:100%;aspect-ratio:auto;min-height:100%}
  .rating-num{border-right:0;border-bottom:1px solid var(--linea);padding:0 0 18px}
  .llegar-mapa{min-height:280px}
  .llegar-mapa iframe{min-height:280px}
}
@media(max-width:700px){
  body{font-size:16px}
  section{padding:46px 0}
  .wrap{padding:0 18px}
  .bar-in{padding:9px 18px;gap:12px}
  .marca span{font-size:1.02rem}
  .tel{display:none}
  html[data-tema="a"] .hero-txt{padding:38px 18px 34px}
  .cifras{grid-template-columns:1fr 1fr;gap:14px 18px}
  /* Las ventajas se apilan a ancho completo: a 390px, tres en fila las parte. */
  .ventajas{flex-direction:column;gap:8px}
  .ventajas li{width:100%}
  .ventajas b{white-space:normal}
  .calc-panel{padding:22px 18px}
  .calc-nota{padding:14px 18px}
  /* Pulgar más grande en táctil: 30px es el mínimo cómodo para arrastrar */
  #rango-noches::-webkit-slider-thumb{width:34px;height:34px;margin-top:-13px}
  #rango-noches::-moz-range-thumb{width:30px;height:30px}
  .calc-tipos button{font-size:.84rem;padding:13px 6px}
  .calc-marcas span{font-size:.7rem}
  .buscador{grid-template-columns:1fr 1fr}
  .buscador .campo:nth-child(3){grid-column:1/-1}
  .tira-fotos{grid-template-columns:1fr 1fr}
  .tira-fotos figure:nth-child(n+7){display:none}
  .tira-fotos figure:nth-child(2n){border-right:0}
  html[data-tema="a"] .tira-fotos{padding:0 18px 4px}
  .tipo{grid-template-columns:1fr}
  .tipo-foto img{aspect-ratio:16/9}
  .fila{grid-template-columns:1fr}
  .fila>span{padding:9px 14px;border-bottom:1px solid var(--linea)}
  .fila>span:last-child{border-bottom:0}
  .fila.cabecera{display:none}
  .fila .qué{background:var(--tinta);color:var(--fondo);font-size:.78rem;
    letter-spacing:.08em;text-transform:uppercase}
  .fila .col-nos::before{content:"Directo: ";font-weight:700;color:var(--acento)}
  .fila .col-ota::before{content:"Portal: ";font-weight:700}
  .emp-lista{grid-template-columns:1fr}
  .resenas{grid-template-columns:1fr}
  .grid-desayunos{grid-template-columns:1fr}
  .desayuno{display:grid;grid-template-columns:130px 1fr}
  .desayuno-foto img{height:100%;aspect-ratio:auto;min-height:100%}
  .grid-incluye{grid-template-columns:1fr 1fr}
  .grid-incluye li:nth-child(2n){border-right:0}
  .grid-incluye li{border-bottom:1px solid var(--linea)}
  .pie-in{grid-template-columns:1fr;gap:26px}
  .stickybar{display:flex}
  body{padding-bottom:74px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none}
  .tira-fotos figure:hover img{transform:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}