/* laSama.co — hoja de estilo compartida
   Generada a partir del CSS que ya estaba repetido en las 40 páginas.
   Lo que sigue siendo propio de una página vive en su <style>. */

:root{
 --cielo:#55C1EF;
 --cielo-suave:#D9F0FC;
 --azul:#0F76AC;
 --azul-hondo:#0B5680;
 --arena:#F7EFE4;
 --blanco:#FFFFFF;
 --naranja:#E2712C;
 --naranja-osc:#B4520F;
 --verde:#38715A;
 --tinta:#0E4A6B;
 --gris:#5A7C8E;
 --linea:#E4D8C6;
 --display:"Instrument Serif",Georgia,serif;
 --lectura:"Source Serif 4",Georgia,serif;
 --body:"Archivo",system-ui,sans-serif;
 --util:"Space Grotesk",ui-monospace,monospace;

 --gutter:clamp(1.15rem,5vw,4rem);
 --maxw:1200px;
 }
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{
 margin:0;background:var(--arena);color:var(--tinta);
 font-family:var(--body);font-size:clamp(1rem,0.96rem + 0.2vw,1.0625rem);
 line-height:1.62;-webkit-font-smoothing:antialiased;
 }
a{color:inherit}
:focus-visible{outline:2px solid var(--naranja-osc);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;letter-spacing:-0.01em;line-height:1.06;margin:0}
.eyebrow{
 font-family:var(--util);font-size:0.7rem;font-weight:500;
 letter-spacing:0.18em;text-transform:uppercase;color:var(--gris);margin:0;
 }
/* ============ NAV ============ */
.nav{
 position:sticky;top:0;z-index:60;
 background:#fff;
 color:var(--tinta);border-bottom:1px solid var(--cielo);
 }
/* El desenfoque solo en escritorio: en móvil convierte a la barra en
 bloque contenedor y rompe el posicionamiento del panel. */
@media(min-width:900px){
 .nav{background:rgba(255,255,255,0.94);backdrop-filter:blur(10px)}
 }
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:0.7rem}
.brand{font-family:"Jost",var(--body);font-weight:200;font-size:1.7rem;letter-spacing:0.01em;
 text-decoration:none;line-height:1;color:var(--tinta);white-space:nowrap}
.brand span{color:inherit}
/* ---- botón de menú (solo móvil) ---- */
/* La casilla es el interruptor: el menú abre sin depender de JavaScript */
.nav__toggle{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.nav__btn{
 display:flex;align-items:center;gap:0.5rem;background:transparent;cursor:pointer;
 border:1px solid var(--cielo);border-radius:99px;padding:0.45rem 0.9rem;
 font-family:var(--util);font-size:0.76rem;letter-spacing:0.08em;text-transform:uppercase;
 color:var(--azul-hondo);user-select:none;
 }
.nav__toggle:focus-visible + .nav__btn{outline:2px solid var(--naranja-osc);outline-offset:3px}
.nav__btn b{display:block;width:16px;height:10px;position:relative}
.nav__btn b::before,.nav__btn b::after,.nav__btn b i{
 content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--azul-hondo);
 transition:transform .25s ease,opacity .2s ease;
 }
.nav__btn b::before{top:0}
.nav__btn b i{top:4.25px}
.nav__btn b::after{bottom:0}
.nav__toggle:checked + .nav__btn b::before{transform:translateY(4.25px) rotate(45deg)}
.nav__toggle:checked + .nav__btn b i{opacity:0}
.nav__toggle:checked + .nav__btn b::after{transform:translateY(-4.25px) rotate(-45deg)}
.nav__btn .cerrar{display:none}
.nav__toggle:checked + .nav__btn .abrir{display:none}
.nav__toggle:checked + .nav__btn .cerrar{display:inline}
/* ---- panel desplegable en móvil ---- */
.nav__panel{
 display:none;
 position:fixed;left:0;right:0;top:0;bottom:0;z-index:59;
 background:var(--arena);overflow-y:auto;
 padding:4.9rem var(--gutter) 4rem;
 -webkit-overflow-scrolling:touch;
 }
.nav__toggle:checked ~ .nav__panel{display:block}
html:has(.nav__toggle:checked){overflow:hidden}
/* el botón queda por encima del panel para poder cerrarlo */
.nav__in{position:relative;z-index:61}
.nav__links{list-style:none;margin:0;padding:0}
.nav__item{border-bottom:1px solid var(--linea)}
.nav__item > a{
 display:block;padding:1rem 0 0.55rem;text-decoration:none;
 font-family:var(--display);font-size:1.75rem;line-height:1.1;color:var(--azul-hondo);
 }
.nav__item > a[aria-current]{color:var(--naranja-osc)}
.nav__sub{list-style:none;margin:0 0 1rem;padding:0;
 display:grid;gap:0.4rem 1.6rem;grid-template-columns:1fr}
@media(min-width:520px){.nav__sub{grid-template-columns:1fr 1fr}}
@media(min-width:820px){.nav__item--ancho .nav__sub{grid-template-columns:repeat(3,1fr);
 grid-template-rows:repeat(6,auto);grid-auto-flow:column}}
.nav__sub a{
 display:block;text-decoration:none;font-family:var(--util);font-size:0.78rem;
 color:var(--gris);border:1px solid var(--linea);border-radius:99px;padding:0.35rem 0.75rem;
 }
.nav__sub a:active{background:var(--cielo-suave);color:var(--azul-hondo)}
/* ---- escritorio: barra horizontal con desplegables ---- */
@media(min-width:900px){
 .nav__btn,.nav__toggle{display:none}
 .nav__panel{display:block;position:static;background:transparent;padding:0;overflow:visible}
 .nav__links{display:flex;gap:clamp(0.85rem,2.4vw,1.9rem)}
 .nav__item{position:relative;border-bottom:0;padding-bottom:0.75rem;margin-bottom:-0.75rem}
 .nav__item > a{font-family:var(--body);font-size:0.88rem;white-space:nowrap;
 color:var(--gris);padding:0;transition:color .2s ease}
 .nav__item > a:hover,.nav__item > a[aria-current]{color:var(--naranja-osc)}
 .nav__sub{
 display:block;position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
 min-width:15rem;margin:0;padding:0.4rem 0;
 background:var(--blanco);border:1px solid var(--linea);border-top:2px solid var(--cielo);
 border-radius:0 0 5px 5px;box-shadow:0 14px 32px rgba(11,86,128,0.16);
 opacity:0;visibility:hidden;pointer-events:none;
 transition:opacity .18s ease,transform .18s ease;
 }
 .nav__item:hover .nav__sub,.nav__item:focus-within .nav__sub{
 opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
 }
 .nav__sub a{display:block;padding:0.5rem 1.15rem;font-size:0.85rem;font-family:var(--body);
 text-decoration:none;color:var(--tinta);white-space:nowrap;border:0;border-radius:0;
 transition:background .15s ease}
 .nav__sub a:hover{background:var(--cielo-suave);color:var(--azul-hondo)}
 }
/* ============ SECTIONS ============ */
.sec{padding-block:clamp(3.5rem,8vw,6rem)}
.sec + .sec{border-top:1px solid var(--linea)}
.sec__head{max-width:62ch;margin-bottom:clamp(2rem,5vw,3.25rem)}
.sec__head h2{font-size:clamp(2.2rem,6.5vw,4rem);margin-top:0.5rem}
.sec__head p{color:var(--tinta);margin:1rem 0 0;max-width:56ch}
/* encabezado de ficha */
.ficha{background:var(--azul-hondo);color:var(--arena);padding-block:clamp(2.5rem,7vw,4.5rem) 0}
.miga{font-family:var(--util);font-size:0.72rem;letter-spacing:0.1em;color:rgba(247,239,228,0.55)}
.miga a{text-decoration:none}
.miga a:hover{color:var(--cielo)}
.ficha h1{font-family:var(--display);font-weight:400;letter-spacing:-0.01em;
 font-size:clamp(2.4rem,7vw,4.6rem);line-height:0.98;margin:1.1rem 0 0}
.ficha__zona{font-family:var(--util);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
 color:var(--cielo);margin:0.9rem 0 0}
.ficha__dek{max-width:64ch;margin:1.2rem 0 0;color:rgba(247,239,228,0.82);
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
 margin-top:clamp(2rem,5vw,3rem);border-top:1px solid rgba(247,239,228,0.2)}
.dato{padding:1.1rem 1.2rem 1.3rem 0;border-bottom:1px solid rgba(247,239,228,0.12)}
.dato dt{font-family:var(--util);font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;
 color:rgba(247,239,228,0.5);margin:0 0 0.35rem}
.dato dd{margin:0;font-family:var(--display);font-size:1.5rem;line-height:1.1}
.dato dd small{font-family:var(--body);font-size:0.8rem;color:rgba(247,239,228,0.6);
 display:block;margin-top:0.25rem}
.dato .si{color:#8FD9A8}
.cuerpo{padding-block:clamp(2.5rem,6vw,4rem)}
.vuelta:hover{color:var(--naranja-osc)}
.vuelta em{font-family:var(--util);font-style:normal;font-size:0.7rem;letter-spacing:0.14em;
 text-transform:uppercase;color:var(--gris)}
.vuelta strong{font-family:var(--display);font-weight:400;font-size:1.5rem;display:block;margin-top:0.3rem}
/* ---- ficha de lugar ---- */
.bloque{margin-bottom:clamp(2.8rem,6vw,4.2rem)}
.bloque:last-child{margin-bottom:0}
.bloque > h2{font-family:var(--display);font-weight:400;letter-spacing:-0.005em;
 font-size:clamp(1.7rem,3.4vw,2.4rem);line-height:1.08;margin:0 0 1.2rem;
 color:var(--azul-hondo);padding-bottom:0.6rem;border-bottom:1px solid var(--cielo)}
.prosa{max-width:none}
.prosa p{margin:0 0 1.05rem;color:var(--tinta);
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.prosa p:last-child{margin-bottom:0}
.prosa strong{color:var(--tinta);font-weight:600}
/* banda de fotos horizontal */
/* fila 1 ancha · fila 2 dos cuadros · fila 3 ancha */
.marco{position:absolute;inset:0;display:flex;align-items:flex-end;padding:0.9rem;
 background:linear-gradient(200deg,#0B5680 0%,#0F76AC 50%,#38715A 120%)}
.marco span{font-family:var(--util);font-size:0.66rem;line-height:1.4;letter-spacing:0.05em;
 color:rgba(247,239,228,0.94);background:rgba(11,86,128,0.6);
 padding:0.3rem 0.55rem;border-radius:2px;max-width:30ch}
/* dato grande */
.cifra{display:grid;gap:1.2rem 2.5rem;grid-template-columns:1fr;align-items:center;
 background:var(--blanco);border:1px solid var(--linea);border-radius:3px;
 padding:1.8rem 1.6rem;margin:0 0 2rem}
@media(min-width:760px){.cifra{grid-template-columns:auto 1fr}}
.cifra b{font-family:var(--display);font-weight:400;font-size:clamp(3rem,8vw,5rem);
 line-height:0.9;color:var(--azul);display:block}
.cifra b small{display:block;font-family:var(--util);font-size:0.72rem;letter-spacing:0.14em;
 text-transform:uppercase;color:var(--gris);margin-top:0.5rem}
.cifra p{margin:0;color:var(--tinta);font-size:1rem;line-height:1.6;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* fauna en píldoras (Centro de Vida Marina) */
.fauna-pildoras{display:flex;flex-wrap:wrap;gap:0.45rem;margin:1.4rem 0 0;padding:0;list-style:none}
.fauna-pildoras li{font-family:var(--util);font-size:0.79rem;letter-spacing:0.02em;
 border:1px solid var(--cielo);border-radius:99px;padding:0.4rem 0.9rem;color:var(--azul-hondo)}
/* horarios de función */
.funciones{display:flex;flex-wrap:wrap;gap:0.45rem;margin:1rem 0 0;padding:0;list-style:none}
.funciones li{font-family:var(--util);font-size:0.86rem;font-variant-numeric:tabular-nums;
 background:var(--azul-hondo);color:var(--arena);border-radius:3px;padding:0.45rem 0.85rem}
/* rejilla práctica */
.rejilla{display:grid;gap:2.6rem 3rem;grid-template-columns:1fr;align-items:start}
@media(min-width:860px){.rejilla{grid-template-columns:1fr 1fr}}
.rejilla h3{font-family:var(--display);font-weight:400;letter-spacing:-0.005em;
 font-size:clamp(1.4rem,2.6vw,1.8rem);line-height:1.1;margin:0 0 1rem;
 color:var(--azul-hondo);padding-bottom:0.55rem;border-bottom:1px solid var(--cielo)}
.tabla tr:last-child td{border-bottom:0}
/* actividades opcionales */
.extras{display:grid;gap:0.9rem;grid-template-columns:1fr;margin-top:1.2rem}
@media(min-width:560px){.extras{grid-template-columns:1fr 1fr}}
.extra{background:var(--blanco);border:1px solid var(--linea);border-left:3px solid var(--naranja);
 border-radius:3px;padding:1.1rem 1.1rem 1.2rem}
.extra b{font-family:var(--display);font-weight:400;font-size:1.35rem;display:block;
 line-height:1.15;color:var(--tinta)}
.extra em{font-style:normal;font-family:var(--util);font-size:0.72rem;letter-spacing:0.08em;
 text-transform:uppercase;color:var(--gris);display:block;margin:0.35rem 0 0.6rem}
.extra span{font-family:var(--util);font-size:1.05rem;color:var(--naranja-osc)}
/* cómo llegar */
.llegada{background:var(--blanco);border:1px solid var(--linea);border-radius:3px;
 padding:clamp(1.4rem,3vw,2rem);scroll-margin-top:5.5rem}
.llegada h2{margin-top:0}
.pasos{list-style:none;counter-reset:paso;margin:1.4rem 0 0;padding:0}
.pasos li{counter-increment:paso;position:relative;padding:0 0 1.1rem 2.7rem;max-width:none;
 color:var(--tinta);font-size:0.96rem;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.pasos li::before{content:counter(paso);position:absolute;left:0;top:0;
 font-family:var(--util);font-size:0.72rem;font-weight:700;color:var(--naranja-osc);
 width:1.5rem;height:1.5rem;border:1px solid var(--naranja);border-radius:50%;
 display:flex;align-items:center;justify-content:center}
.pasos b{color:var(--tinta);font-weight:600}
.pasos a{color:var(--azul);text-underline-offset:3px}
.apunte-caja{background:rgba(56,113,90,0.09);border-left:2px solid var(--verde);
 padding:0.85rem 1rem;margin:1.4rem 0 0;font-size:0.9rem;color:var(--gris);
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.apunte-caja b{color:var(--verde);font-weight:600}
.nota-pie{font-size:0.84rem;color:var(--gris);margin:1rem 0 0;line-height:1.5;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* franja horaria continua */
.franja{display:grid;gap:0;grid-template-columns:1fr;margin:1.3rem 0 0;
 border-top:1px solid var(--linea)}
@media(min-width:640px){.franja{grid-template-columns:repeat(3,1fr);gap:0 2rem}}
.franja div{padding:0.85rem 0;border-bottom:1px solid var(--linea)}
.franja dt{font-family:var(--util);font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;
 color:var(--gris);margin:0 0 0.3rem}
.franja dd{margin:0;font-family:var(--display);font-size:1.4rem;line-height:1.1;color:var(--tinta)}
.franja dd small{display:block;font-family:var(--body);font-size:0.82rem;color:var(--gris);
 margin-top:0.25rem;line-height:1.45}
/* aviso discreto */
.ojo{background:rgba(226,113,44,0.08);border-left:2px solid var(--naranja);
 padding:0.8rem 1rem;margin:1.3rem 0 0;font-size:0.9rem;color:var(--gris);
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.ojo b{color:var(--naranja-osc);font-weight:600}
.chip-lg{display:inline-block;font-family:var(--util);font-size:0.8rem;letter-spacing:0.03em;
 text-decoration:none;padding:0.55rem 1.1rem;border-radius:99px;margin-top:1.1rem;
 background:var(--azul-hondo);color:var(--arena);transition:background .2s ease}
.chip-lg:hover{background:var(--naranja-osc)}
/* salas del museo */
.salas{list-style:none;counter-reset:sala;margin:1.6rem 0 0;padding:0;
 display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--linea)}
@media(min-width:860px){.salas{grid-template-columns:1fr 1fr;gap:0 3rem}}
.salas li{counter-increment:sala;position:relative;padding:1.15rem 0 1.15rem 2.5rem;
 border-bottom:1px solid var(--linea)}
.salas li::before{content:counter(sala,decimal-leading-zero);position:absolute;left:0;top:1.35rem;
 font-family:var(--util);font-size:0.72rem;font-weight:700;color:var(--naranja-osc)}
.salas b{font-family:var(--display);font-weight:400;font-size:1.3rem;display:block;
 line-height:1.15;margin-bottom:0.35rem;color:var(--tinta)}
.salas p{margin:0;color:var(--tinta);font-size:0.93rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.gratis-sello{display:inline-block;font-family:var(--util);font-size:0.74rem;letter-spacing:0.12em;
 text-transform:uppercase;background:var(--verde);color:#fff;
 padding:0.35rem 0.85rem;border-radius:99px;margin-bottom:1rem}
.enlace-interno{color:var(--azul);text-underline-offset:3px}
.enlace-interno:hover{color:var(--naranja-osc)}
/* ---- FOOTER ---- */
.foot{background:var(--azul);color:rgba(253,243,236,0.6);padding-block:3rem;font-size:0.875rem}
.foot__in{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:flex-end}
.foot__in > div > p{margin:0}
.foot a{text-decoration:none;margin-right:1.15rem}
.foot a:hover{color:var(--cielo-suave)}
.foot__mark{font-family:"Jost",var(--body);font-weight:200;font-size:2.1rem;color:var(--arena);line-height:1;margin:0}
.foot__mark i{font-style:normal;color:inherit}
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
@media(min-width:900px){
 .nav__item--ancho .nav__sub{min-width:min(48rem,88vw);columns:3;column-gap:0;
 padding:0.7rem 0.4rem;max-height:min(74vh,32rem);overflow:auto}
 .nav__item--ancho .nav__sub li{break-inside:avoid}
 .nav__item--ancho .nav__sub a{padding:0.32rem 0.9rem;font-size:0.82rem}
 }
.portada__in{position:relative;z-index:2}
.indice{display:flex;flex-wrap:wrap;gap:0.45rem;margin-top:2.25rem}
.indice a{font-family:var(--util);font-size:0.75rem;text-decoration:none;
 border:1px solid rgba(247,239,228,0.32);border-radius:99px;padding:0.4rem 0.85rem;
 color:rgba(247,239,228,0.85);transition:all .2s ease}
.horarios b{color:var(--azul-hondo)}
.horarios span{line-height:1.6}
/* horarios de misa */
.misas{list-style:none;margin:1.3rem 0 0;padding:0;border-top:1px solid var(--linea)}
.misas li{display:grid;gap:0.2rem 1.5rem;grid-template-columns:1fr;
 padding:0.85rem 0;border-bottom:1px solid var(--linea)}
@media(min-width:520px){.misas li{grid-template-columns:auto 1fr;align-items:baseline}}
.misas b{font-family:var(--display);font-weight:400;font-size:1.2rem;color:var(--tinta);
 white-space:nowrap}
.misas span{font-family:var(--util);font-size:0.86rem;color:var(--gris);
 font-variant-numeric:tabular-nums}
@media(min-width:520px){.misas span{text-align:right}}
/* recorrido de Bolívar */
.ruta-bolivar{list-style:none;counter-reset:hito;margin:1.5rem 0 0;padding:0}
.ruta-bolivar li{counter-increment:hito;position:relative;padding:0 0 1.4rem 3rem}
.ruta-bolivar li::before{content:counter(hito);position:absolute;left:0;top:0.05rem;
 width:1.7rem;height:1.7rem;border-radius:50%;background:var(--azul-hondo);color:var(--arena);
 font-family:var(--util);font-size:0.75rem;font-weight:700;
 display:flex;align-items:center;justify-content:center}
.ruta-bolivar li:not(:last-child)::after{content:"";position:absolute;left:0.83rem;top:2rem;bottom:0.2rem;
 width:1px;background:var(--cielo)}
.ruta-bolivar b{font-family:var(--display);font-weight:400;font-size:1.25rem;display:block;
 line-height:1.2;margin-bottom:0.25rem;color:var(--tinta)}
.ruta-bolivar p{margin:0;color:var(--tinta);font-size:0.93rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.ruta-bolivar a{color:var(--azul);text-underline-offset:3px}
.ruta-bolivar a:hover{color:var(--naranja-osc)}
/* planes de la noche */
.planes{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:820px){.planes{grid-template-columns:1fr 1fr}}
.plan{background:var(--blanco);border:1px solid var(--linea);border-radius:3px;
 padding:1.4rem 1.3rem;display:flex;flex-direction:column}
.plan--destacado{border-left:3px solid var(--naranja)}
.plan em{font-style:normal;font-family:var(--util);font-size:0.68rem;letter-spacing:0.12em;
 text-transform:uppercase;color:var(--verde);display:block;margin-bottom:0.45rem}
.plan--destacado em{color:var(--naranja-osc)}
.plan b{font-family:var(--display);font-weight:400;font-size:1.5rem;line-height:1.12;
 display:block;margin-bottom:0.5rem;color:var(--tinta)}
.plan p{margin:0;color:var(--tinta);font-size:0.93rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* música */
.ritmos{display:flex;flex-wrap:wrap;gap:0.45rem;margin:1.2rem 0 0;padding:0;list-style:none}
.ritmos li{font-family:var(--util);font-size:0.79rem;
 border:1px solid var(--cielo);border-radius:99px;padding:0.38rem 0.9rem;color:var(--azul-hondo)}
/* secuencia de la noche */
.secuencia{list-style:none;margin:1.5rem 0 0;padding:0}
.secuencia li{position:relative;padding:0 0 1.5rem 3.4rem}
.secuencia li:not(:last-child)::after{content:"";position:absolute;left:1.05rem;top:1.9rem;bottom:0.2rem;
 width:1px;background:var(--cielo)}
.secuencia em{font-style:normal;position:absolute;left:0;top:0;
 width:2.1rem;height:2.1rem;border-radius:50%;background:var(--azul-hondo);color:var(--arena);
 font-family:var(--util);font-size:0.62rem;font-weight:700;line-height:1;
 display:flex;align-items:center;justify-content:center;text-align:center}
.secuencia b{font-family:var(--display);font-weight:400;font-size:1.3rem;display:block;
 line-height:1.2;margin-bottom:0.3rem;color:var(--tinta)}
.secuencia p{margin:0;color:var(--tinta);font-size:0.93rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.secuencia a{color:var(--azul);text-underline-offset:3px}
.secuencia a:hover{color:var(--naranja-osc)}
/* línea de tiempo del lugar */
.historia{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:0;
 grid-template-columns:1fr;border-top:1px solid var(--linea)}
@media(min-width:700px){.historia{grid-template-columns:repeat(3,1fr);gap:0 2.5rem}}
.historia li{padding:1.1rem 0;border-bottom:1px solid var(--linea)}
.historia b{font-family:var(--util);font-size:0.72rem;letter-spacing:0.14em;
 color:var(--naranja-osc);display:block;margin-bottom:0.45rem}
.historia p{margin:0;color:var(--tinta);font-size:0.93rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* géneros musicales */
.generos{display:flex;flex-wrap:wrap;gap:0.5rem;margin:1.3rem 0 0;padding:0;list-style:none}
.generos li{font-family:var(--util);font-size:0.84rem;letter-spacing:0.03em;
 background:var(--azul-hondo);color:var(--arena);border-radius:3px;padding:0.45rem 0.95rem}
/* bloque de la azotea */
.azotea{background:var(--azul-hondo);color:var(--arena);border-radius:3px;
 padding:clamp(1.6rem,4vw,2.6rem);margin:1.8rem 0 0;position:relative;overflow:hidden}
.azotea::after{content:"";position:absolute;right:-8%;top:-40%;width:45%;aspect-ratio:1;
 border-radius:50%;background:radial-gradient(circle,rgba(85,193,239,0.22) 0%,rgba(85,193,239,0) 68%)}
.azotea > *{position:relative;z-index:2}
.azotea em{font-style:normal;font-family:var(--util);font-size:0.7rem;letter-spacing:0.14em;
 text-transform:uppercase;color:var(--cielo);display:block;margin-bottom:0.5rem}
.azotea h3{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3.6vw,2.4rem);
 line-height:1.08;margin:0 0 0.9rem;color:var(--arena)}
.azotea p{margin:0 0 0.9rem;color:rgba(247,239,228,0.85);font-size:1rem;max-width:64ch;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.azotea p:last-child{margin-bottom:0}
.azotea .generos li{background:rgba(247,239,228,0.14);color:var(--arena)}
/* pista de baile: ritmos en mosaico */
.pista{display:flex;flex-wrap:wrap;gap:0.5rem;margin:1.4rem 0 0;padding:0;list-style:none}
.pista li{font-family:var(--display);font-weight:400;font-size:clamp(1.05rem,2.4vw,1.45rem);
 line-height:1;padding:0.6rem 1.05rem;border-radius:3px;
 background:var(--blanco);border:1px solid var(--linea);color:var(--tinta)}
.pista li:nth-child(3n+1){border-left:3px solid var(--naranja)}
.pista li:nth-child(3n+2){border-left:3px solid var(--cielo)}
.pista li:nth-child(3n+3){border-left:3px solid var(--verde)}
/* quiénes van */
.publico{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:0;
 grid-template-columns:1fr;border-top:1px solid var(--linea)}
@media(min-width:760px){.publico{grid-template-columns:repeat(3,1fr);gap:0 2.5rem}}
.publico li{padding:1rem 0;border-bottom:1px solid var(--linea);
 color:var(--tinta);font-size:0.93rem}
.publico b{font-family:var(--display);font-weight:400;font-size:1.25rem;display:block;
 line-height:1.15;margin-bottom:0.3rem;color:var(--tinta)}
/* bloque del atardecer: texto junto a la fotografía */
.atardecer{display:grid;gap:1.6rem 2.6rem;grid-template-columns:1fr;align-items:center;
 margin:1.8rem 0 0;padding:clamp(1.5rem,3.5vw,2.2rem);
 background:var(--blanco);border:1px solid var(--linea);border-radius:3px}
@media(min-width:880px){.atardecer{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}}
.atardecer em{font-style:normal;font-family:var(--util);font-size:0.7rem;letter-spacing:0.14em;
 text-transform:uppercase;color:var(--naranja-osc);display:block;margin-bottom:0.5rem}
.atardecer h3{font-family:var(--display);font-weight:400;font-size:clamp(1.8rem,4vw,2.6rem);
 line-height:1.05;margin:0 0 0.9rem;color:var(--azul-hondo)}
.atardecer p{margin:0 0 0.9rem;color:var(--tinta);font-size:1rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.atardecer p:last-child{margin-bottom:0}
.atardecer figure{margin:0;position:relative;overflow:hidden;border-radius:2px;aspect-ratio:4/3}
.atardecer figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.8rem 0.9rem 0.7rem;
 font-family:var(--util);font-size:0.68rem;line-height:1.4;color:rgba(247,239,228,0.92);
 background:linear-gradient(to top,rgba(11,86,128,0.8) 0%,rgba(11,86,128,0) 100%)}
/* el orden de la tarde */
/* medidas de la playa */
.medidas{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:0;
 grid-template-columns:1fr;border-top:1px solid var(--linea)}
@media(min-width:700px){.medidas{grid-template-columns:repeat(3,1fr);gap:0 2.5rem}}
.medidas li{padding:1rem 0;border-bottom:1px solid var(--linea)}
.medidas b{font-family:var(--display);font-weight:400;font-size:1.9rem;line-height:1;
 display:block;color:var(--azul);margin-bottom:0.3rem}
.medidas span{color:var(--gris);font-size:0.9rem}
/* servicios de playa */
.servicios{list-style:none;margin:1.3rem 0 0;padding:0;display:grid;gap:0;
 grid-template-columns:1fr}
@media(min-width:640px){.servicios{grid-template-columns:1fr 1fr;gap:0 2.5rem}}
.servicios li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
 padding:0.7rem 0;border-bottom:1px solid var(--linea)}
.servicios b{font-weight:500;color:var(--tinta)}
.servicios span{font-family:var(--util);font-size:0.78rem;color:var(--gris);text-align:right}
/* aviso de autoridad */
.norma{background:var(--blanco);border:1px solid var(--linea);border-left:3px solid var(--cielo);
 border-radius:3px;padding:clamp(1.4rem,3.5vw,2.2rem);margin:1.6rem 0 0}
.norma em{font-style:normal;font-family:var(--util);font-size:0.7rem;letter-spacing:0.14em;
 text-transform:uppercase;color:var(--naranja-osc);display:block;margin-bottom:0.55rem}
.norma h3{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);
 line-height:1.1;margin:0 0 0.9rem;color:var(--azul-hondo)}
.norma p{margin:0 0 0.85rem;color:var(--tinta);font-size:0.97rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.norma p:last-child{margin-bottom:0}
.norma strong{color:var(--tinta);font-weight:600}
.horario-mar{display:flex;flex-wrap:wrap;gap:0.5rem;margin:1.1rem 0}
.horario-mar div{background:var(--cielo-suave);border-radius:3px;padding:0.75rem 1rem;flex:1 1 12rem}
.horario-mar dt{font-family:var(--util);font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;
 color:var(--azul);margin-bottom:0.25rem}
.horario-mar dd{margin:0;font-family:var(--display);font-size:1.35rem;color:var(--azul-hondo)}
/* recorrido del litoral */
.costa-nav{display:grid;gap:1px;grid-template-columns:1fr;background:var(--linea);
 border-block:1px solid var(--linea);margin-top:clamp(2.5rem,6vw,4rem)}
@media(min-width:700px){.costa-nav{grid-template-columns:1fr 1fr}}
.costa-nav a{background:var(--arena);padding:1.5rem;text-decoration:none;display:block;
 transition:background .2s ease}
.costa-nav a:hover{background:var(--blanco)}
.costa-nav em{font-family:var(--util);font-style:normal;font-size:0.7rem;letter-spacing:0.14em;
 text-transform:uppercase;color:var(--gris)}
.costa-nav strong{font-family:var(--display);font-weight:400;font-size:1.6rem;display:block;margin-top:0.3rem}
.costa-nav a:last-child{text-align:right}
/* actividades en el agua */
.agua{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:0;
 grid-template-columns:1fr;border-top:1px solid var(--linea)}
@media(min-width:700px){.agua{grid-template-columns:1fr 1fr;gap:0 2.5rem}}
.agua li{padding:1.1rem 0;border-bottom:1px solid var(--linea)}
.agua b{font-family:var(--display);font-weight:400;font-size:1.35rem;display:block;
 line-height:1.15;margin-bottom:0.35rem;color:var(--tinta)}
.agua p{margin:0;color:var(--tinta);font-size:0.93rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* origen del nombre */
.origen{background:var(--blanco);border:1px solid var(--linea);border-left:3px solid var(--naranja);
 border-radius:3px;padding:clamp(1.4rem,3.5vw,2.2rem);margin:1.8rem 0 0}
.origen em{font-style:normal;font-family:var(--util);font-size:0.7rem;letter-spacing:0.14em;
 text-transform:uppercase;color:var(--naranja-osc);display:block;margin-bottom:0.55rem}
.origen h3{font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3.2vw,2.1rem);
 line-height:1.1;margin:0 0 0.9rem;color:var(--azul-hondo)}
.origen p{margin:0 0 0.85rem;color:var(--tinta);font-size:0.98rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.origen p:last-child{margin-bottom:0}
.origen strong{color:var(--tinta);font-weight:600}
/* dos rutas de acceso */
.rutas{display:grid;gap:1rem;grid-template-columns:1fr;margin:1.6rem 0 0}
@media(min-width:860px){.rutas{grid-template-columns:1fr 1fr}}
.via{background:var(--blanco);border:1px solid var(--linea);border-radius:3px;
 padding:1.5rem 1.4rem;display:flex;flex-direction:column}
.via--facil{border-left:3px solid var(--cielo)}
.via--dura{border-left:3px solid var(--naranja)}
.via em{font-style:normal;font-family:var(--util);font-size:0.68rem;letter-spacing:0.12em;
 text-transform:uppercase;color:var(--gris);display:block;margin-bottom:0.4rem}
.via--facil em{color:var(--azul)}
.via--dura em{color:var(--naranja-osc)}
.via h3{font-family:var(--display);font-weight:400;font-size:1.6rem;line-height:1.1;
 margin:0 0 0.3rem;color:var(--azul-hondo)}
.via__tiempo{font-family:var(--util);font-size:0.78rem;color:var(--gris);margin:0 0 1rem}
.via p{margin:0 0 0.85rem;color:var(--tinta);font-size:0.94rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.via p:last-child{margin-bottom:0}
.via strong{color:var(--tinta);font-weight:600}
.via a{color:var(--azul);text-underline-offset:3px}
/* qué llevar */
.llevar{display:flex;flex-wrap:wrap;gap:0.45rem;margin:1rem 0 0;padding:0;list-style:none}
.llevar li{font-family:var(--util);font-size:0.76rem;border:1px solid var(--naranja);
 border-radius:99px;padding:0.35rem 0.8rem;color:var(--naranja-osc)}
/* elementos del paisaje */
.paisaje{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;gap:0;
 grid-template-columns:1fr;border-top:1px solid var(--linea)}
@media(min-width:820px){.paisaje{grid-template-columns:1fr 1fr;gap:0 3rem}}
.paisaje li{padding:1.3rem 0;border-bottom:1px solid var(--linea)}
.paisaje em{font-style:normal;font-family:var(--util);font-size:0.68rem;letter-spacing:0.12em;
 text-transform:uppercase;color:var(--naranja-osc);display:block;margin-bottom:0.35rem}
.paisaje b{font-family:var(--display);font-weight:400;font-size:1.55rem;display:block;
 line-height:1.12;margin-bottom:0.45rem;color:var(--tinta)}
.paisaje p{margin:0;color:var(--tinta);font-size:0.94rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* franja honesta */
.franqueza{background:var(--blanco);border:1px solid var(--linea);border-left:3px solid var(--naranja);
 border-radius:3px;padding:clamp(1.4rem,3.5vw,2.2rem);margin:1.6rem 0 0}
.franqueza em{font-style:normal;font-family:var(--util);font-size:0.7rem;letter-spacing:0.14em;
 text-transform:uppercase;color:var(--naranja-osc);display:block;margin-bottom:0.55rem}
.franqueza h3{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);
 line-height:1.1;margin:0 0 0.9rem;color:var(--azul-hondo)}
.franqueza p{margin:0 0 0.85rem;color:var(--tinta);font-size:0.97rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.franqueza p:last-child{margin-bottom:0}
.franqueza strong{color:var(--tinta);font-weight:600}
/* temporada alta */
.temporadas{background:var(--blanco);border:1px solid var(--linea);border-left:3px solid var(--naranja);
 border-radius:3px;padding:1.3rem 1.4rem;margin:1.4rem 0 0}
.temporadas em{font-style:normal;font-family:var(--util);font-size:0.68rem;letter-spacing:0.14em;
 text-transform:uppercase;color:var(--naranja-osc);display:block;margin-bottom:0.7rem}
.temporadas ul{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:640px){.temporadas ul{grid-template-columns:1fr 1fr;gap:0 2rem}}
.temporadas li{padding:0.5rem 0;border-bottom:1px solid var(--linea);color:var(--tinta);font-size:0.92rem}
.temporadas li:last-child{border-bottom:0}
.temporadas b{color:var(--tinta);font-weight:500}
/* lista simple: nombre y ubicación */
.lugares{list-style:none;margin:1.4rem 0 0;padding:0;border-top:1px solid var(--linea)}
.lugares li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
 padding:0.9rem 0;border-bottom:1px solid var(--linea);flex-wrap:wrap}
.lugares b{font-family:var(--display);font-weight:400;font-size:1.4rem;line-height:1.15;
 color:var(--tinta)}
.lugares a{font-family:var(--util);font-size:0.74rem;letter-spacing:0.04em;text-decoration:none;
 border:1px solid var(--verde);border-radius:99px;padding:0.32rem 0.8rem;color:var(--verde);
 white-space:nowrap;transition:background .2s ease,color .2s ease}
.lugares a:hover{background:var(--verde);color:#fff}
/* cursos de buceo */
.cursos{list-style:none;counter-reset:nivel;margin:1.4rem 0 0;padding:0;
 display:grid;gap:0;grid-template-columns:1fr;border-top:1px solid var(--linea)}
@media(min-width:760px){.cursos{grid-template-columns:1fr 1fr;gap:0 2.5rem}}
.cursos li{counter-increment:nivel;position:relative;padding:0.95rem 0 0.95rem 2.4rem;
 border-bottom:1px solid var(--linea);color:var(--tinta);font-size:0.93rem}
.cursos li::before{content:counter(nivel);position:absolute;left:0;top:1.05rem;
 font-family:var(--util);font-size:0.7rem;font-weight:700;color:var(--verde);
 width:1.4rem;height:1.4rem;border:1px solid var(--verde);border-radius:50%;
 display:flex;align-items:center;justify-content:center}
.cursos b{font-family:var(--display);font-weight:400;font-size:1.2rem;display:block;
 line-height:1.15;margin-bottom:0.2rem;color:var(--tinta)}
/* destinos de las lanchas */
.destinos{display:flex;flex-wrap:wrap;gap:0.5rem;margin:1.3rem 0 0;padding:0;list-style:none}
.destinos li a{display:block;font-family:var(--util);font-size:0.8rem;text-decoration:none;
 border:1px solid var(--cielo);border-radius:99px;padding:0.45rem 0.95rem;color:var(--azul-hondo);
 transition:background .2s ease,color .2s ease}
.destinos li a:hover{background:var(--azul-hondo);border-color:var(--azul-hondo);color:var(--arena)}
/* prohibiciones del parque */
.prohibido{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:0;
 grid-template-columns:1fr;border-top:1px solid var(--linea)}
@media(min-width:820px){.prohibido{grid-template-columns:1fr 1fr;gap:0 2.5rem}}
.prohibido li{padding:0.95rem 0 0.95rem 1.7rem;border-bottom:1px solid var(--linea);
 position:relative;color:var(--tinta);font-size:0.92rem}
.prohibido li::before{content:"×";position:absolute;left:0;top:0.85rem;
 font-family:var(--util);font-size:1rem;color:var(--naranja-osc);line-height:1}
.prohibido b{color:var(--tinta);font-weight:500;display:block;margin-bottom:0.15rem}
/* tarifas del parque */
.tarifas{width:100%;border-collapse:collapse;font-size:0.93rem;margin-top:1.2rem}
.tarifas th{text-align:left;font-family:var(--util);font-size:0.66rem;font-weight:500;
 letter-spacing:0.1em;text-transform:uppercase;color:var(--gris);padding:0 0 0.5rem}
.tarifas th:last-child{text-align:right}
.tarifas td{padding:0.6rem 0;border-bottom:1px solid var(--linea);color:var(--tinta)}
.tarifas td:last-child{text-align:right;white-space:nowrap;font-family:var(--util);
 font-size:0.88rem}
.tarifas tr:last-child td{border-bottom:0}
/* tabla de parqueo */
.parqueo{display:grid;gap:0.5rem;grid-template-columns:1fr;margin:1.2rem 0 0}
@media(min-width:480px){.parqueo{grid-template-columns:repeat(2,1fr)}}
@media(min-width:700px){.parqueo{grid-template-columns:repeat(4,1fr)}}
.parqueo div{background:var(--blanco);border:1px solid var(--linea);border-radius:3px;
 padding:0.9rem 1rem}
.parqueo dt{font-family:var(--util);font-size:0.66rem;letter-spacing:0.1em;text-transform:uppercase;
 color:var(--gris);margin-bottom:0.3rem}
.parqueo dd{margin:0;font-family:var(--display);font-size:1.45rem;color:var(--azul-hondo)}
/* recomendación de app offline */
.offline{border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
 padding:1rem 0;margin:1.6rem 0 0;display:grid;gap:0.3rem 1.2rem;grid-template-columns:1fr}
@media(min-width:640px){.offline{grid-template-columns:auto 1fr;align-items:baseline}}
.offline em{font-style:normal;font-family:var(--util);font-size:0.68rem;letter-spacing:0.12em;
 text-transform:uppercase;color:var(--naranja-osc);white-space:nowrap}
.offline p{margin:0;color:var(--tinta);font-size:0.9rem;line-height:1.55;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.offline strong{color:var(--tinta);font-weight:600}
/* tabla con dos temporadas */
.tarifas--dos td:nth-child(2),.tarifas--dos th:nth-child(2){text-align:right;white-space:nowrap;
 font-family:var(--util);font-size:0.86rem}
.tarifas--dos td:nth-child(3),.tarifas--dos th:nth-child(3){text-align:right;white-space:nowrap;
 font-family:var(--util);font-size:0.86rem;color:var(--naranja-osc)}
@media(max-width:560px){
 .tarifas--dos td:first-child{font-size:0.88rem}
 .tarifas--dos td:nth-child(2),.tarifas--dos td:nth-child(3){font-size:0.8rem}
 }
/* el letrero de la playa */
.letrero{background:var(--blanco);border:1px solid var(--linea);border-left:3px solid var(--naranja-osc);
 border-radius:3px;padding:clamp(1.4rem,3.5vw,2rem);margin:1.6rem 0 0;text-align:center}
.letrero em{font-style:normal;font-family:var(--util);font-size:0.66rem;letter-spacing:0.16em;
 text-transform:uppercase;color:var(--gris);display:block;margin-bottom:0.9rem}
.letrero p{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,3.4vw,2rem);
 line-height:1.25;margin:0 0 0.6rem;color:var(--azul-hondo);text-align:center}
.letrero .remate{font-family:var(--util);font-size:0.82rem;letter-spacing:0.14em;
 text-transform:uppercase;color:var(--naranja-osc);margin:1rem 0 0}
.letrero .pie{font-family:var(--body);font-size:0.8rem;color:var(--gris);margin:1rem 0 0;
 letter-spacing:0;text-transform:none}
/* etapas del recorrido */
/* el pueblo de la playa: negocios en orden de aparición */
.camino{list-style:none;counter-reset:parada;margin:1.6rem 0 0;padding:0}
.camino li{counter-increment:parada;position:relative;padding:0 0 1.5rem 3.4rem}
.camino li:not(:last-child)::after{content:"";position:absolute;left:1.05rem;top:2.3rem;bottom:0.1rem;
 width:1px;background:var(--linea)}
.camino li::before{content:counter(parada);position:absolute;left:0;top:0;
 width:2.1rem;height:2.1rem;border-radius:50%;background:var(--arena);color:var(--azul-hondo);
 border:1px solid var(--cielo);font-family:var(--util);font-size:0.75rem;font-weight:700;
 display:flex;align-items:center;justify-content:center}
.camino b{font-family:var(--display);font-weight:400;font-size:1.4rem;display:block;
 line-height:1.15;margin-bottom:0.35rem;color:var(--tinta)}
.camino p{margin:0 0 0.7rem;color:var(--tinta);font-size:0.94rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.camino a.mapa{font-family:var(--util);font-size:0.72rem;letter-spacing:0.04em;text-decoration:none;
 border:1px solid var(--verde);border-radius:99px;padding:0.3rem 0.75rem;color:var(--verde);
 display:inline-block;transition:background .2s ease,color .2s ease}
.camino a.mapa:hover{background:var(--verde);color:#fff}
/* cielo nocturno */
.cielo-noche{background:var(--azul-hondo);color:var(--arena);border-radius:3px;
 padding:clamp(1.6rem,4vw,2.6rem);margin:1.8rem 0 0;position:relative;overflow:hidden}
.cielo-noche::after{content:"";position:absolute;right:-10%;top:-45%;width:50%;aspect-ratio:1;
 border-radius:50%;background:radial-gradient(circle,rgba(143,205,234,0.25) 0%,rgba(143,205,234,0) 68%)}
.cielo-noche > *{position:relative;z-index:2}
.cielo-noche em{font-style:normal;font-family:var(--util);font-size:0.7rem;letter-spacing:0.14em;
 text-transform:uppercase;color:var(--cielo);display:block;margin-bottom:0.5rem}
.cielo-noche h3{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3.6vw,2.4rem);
 line-height:1.08;margin:0 0 0.9rem;color:var(--arena)}
.cielo-noche p{margin:0 0 0.9rem;color:rgba(247,239,228,0.85);font-size:1rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.cielo-noche p:last-child{margin-bottom:0}
.cielo-noche strong{color:var(--arena);font-weight:600}
.consejos-noche{display:grid;gap:0.6rem;grid-template-columns:1fr;margin-top:1.3rem}
@media(min-width:640px){.consejos-noche{grid-template-columns:1fr 1fr}}
.consejos-noche div{background:rgba(247,239,228,0.12);border-radius:3px;padding:0.85rem 1rem}
.consejos-noche dt{font-family:var(--util);font-size:0.66rem;letter-spacing:0.12em;
 text-transform:uppercase;color:var(--cielo);margin-bottom:0.3rem}
.consejos-noche dd{margin:0;font-size:0.92rem;color:rgba(247,239,228,0.9);line-height:1.5}
/* tabla de tiempos acumulados de caminata */
.tiempos{width:100%;border-collapse:collapse;font-size:0.92rem;margin-top:1.3rem}
.tiempos th{text-align:left;font-family:var(--util);font-size:0.64rem;font-weight:500;
 letter-spacing:0.1em;text-transform:uppercase;color:var(--gris);padding:0 0 0.55rem;
 border-bottom:1px solid var(--linea)}
.tiempos th:not(:first-child),.tiempos td:not(:first-child){text-align:right;white-space:nowrap;
 font-family:var(--util);font-size:0.85rem}
.tiempos td{padding:0.65rem 0;border-bottom:1px solid var(--linea);color:var(--tinta)}
.tiempos tr:last-child td{border-bottom:0;font-weight:600}
.tiempos tr:last-child td:first-child{font-family:var(--display);font-weight:400;font-size:1.15rem}
.tiempos .aqui{color:var(--naranja-osc)}
@media(max-width:540px){
 .tiempos th,.tiempos td{font-size:0.8rem}
 .tiempos td:first-child{font-size:0.85rem}
 }
/* antes y ahora */
.memoria{background:var(--blanco);border:1px solid var(--linea);border-left:3px solid var(--verde);
 border-radius:3px;padding:clamp(1.4rem,3.5vw,2.2rem);margin:1.8rem 0 0}
.memoria em{font-style:normal;font-family:var(--util);font-size:0.7rem;letter-spacing:0.14em;
 text-transform:uppercase;color:var(--verde);display:block;margin-bottom:0.55rem}
.memoria h3{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);
 line-height:1.1;margin:0 0 0.9rem;color:var(--azul-hondo)}
.memoria p{margin:0 0 0.85rem;color:var(--tinta);font-size:0.97rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.memoria p:last-child{margin-bottom:0}
.memoria strong{color:var(--tinta);font-weight:600}
/* fauna que se ve bajo el agua */
.fauna{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:0;
 grid-template-columns:1fr;border-top:1px solid var(--linea)}
@media(min-width:700px){.fauna{grid-template-columns:1fr 1fr;gap:0 2.5rem}}
.fauna li{padding:0.9rem 0;border-bottom:1px solid var(--linea);color:var(--tinta);font-size:0.93rem}
.fauna b{font-family:var(--display);font-weight:400;font-size:1.25rem;display:block;
 line-height:1.15;margin-bottom:0.2rem;color:var(--tinta)}
/* carta del restaurante */
.carta{width:100%;border-collapse:collapse;font-size:0.93rem;margin-top:1.2rem}
.carta th{text-align:left;font-family:var(--util);font-size:0.64rem;font-weight:500;
 letter-spacing:0.1em;text-transform:uppercase;color:var(--gris);padding:0 0 0.55rem;
 border-bottom:1px solid var(--linea)}
.carta th:last-child{text-align:right}
.carta td{padding:0.6rem 0;border-bottom:1px solid var(--linea);color:var(--tinta)}
.carta tr:last-child td{border-bottom:0}
/* dónde dormir */
.dormir{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:0;
 grid-template-columns:1fr;border-top:1px solid var(--linea)}
@media(min-width:760px){.dormir{grid-template-columns:1fr 1fr;gap:0 2.5rem}}
.dormir li{padding:1.1rem 0;border-bottom:1px solid var(--linea)}
.dormir b{font-family:var(--display);font-weight:400;font-size:1.35rem;display:block;
 line-height:1.15;margin-bottom:0.3rem;color:var(--tinta)}
.dormir p{margin:0;color:var(--tinta);font-size:0.93rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* territorio sagrado */
.sagrado{background:var(--blanco);border:1px solid var(--linea);border-left:3px solid var(--verde);
 border-radius:3px;padding:clamp(1.5rem,3.5vw,2.2rem);margin:1.8rem 0 0}
.sagrado em{font-style:normal;font-family:var(--util);font-size:0.7rem;letter-spacing:0.14em;
 text-transform:uppercase;color:var(--verde);display:block;margin-bottom:0.55rem}
.sagrado h3{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3vw,2.05rem);
 line-height:1.1;margin:0 0 0.9rem;color:var(--azul-hondo)}
.sagrado p{margin:0 0 0.85rem;color:var(--tinta);font-size:0.97rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.sagrado p:last-child{margin-bottom:0}
.sagrado strong{color:var(--tinta);font-weight:600}
.sagrado ul{margin:0.9rem 0;padding-left:1.1rem;color:var(--gris);font-size:0.94rem}
.sagrado li{margin-bottom:0.4rem}
/* aviso de orden en el recorrido */
.orden-aviso{background:var(--blanco);border:1px solid var(--naranja);border-left:3px solid var(--naranja);
 border-radius:3px;padding:1.2rem 1.4rem;margin:1.6rem 0 0}
.orden-aviso em{font-style:normal;font-family:var(--util);font-size:0.68rem;letter-spacing:0.14em;
 text-transform:uppercase;color:var(--naranja-osc);display:block;margin-bottom:0.5rem}
.orden-aviso p{margin:0;color:var(--tinta);font-size:0.94rem;line-height:1.6;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.orden-aviso a{color:var(--azul);text-underline-offset:3px}
/* nota sobre el nudismo */
.discreta h3{font-family:var(--display);font-weight:400;font-size:clamp(1.45rem,3vw,1.95rem);
 line-height:1.12;margin:0 0 0.9rem;color:var(--azul-hondo)}
.discreta p{margin:0 0 0.85rem;color:var(--tinta);font-size:0.96rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.discreta p:last-child{margin-bottom:0}
.discreta strong{color:var(--tinta);font-weight:600}
/* página de aviso legal */
.aviso{max-width:74ch;margin:0 auto}
.aviso__lead{font-family:var(--lectura);font-size:clamp(1.08rem,2.2vw,1.32rem);line-height:1.6;
 color:var(--tinta);margin:0 0 2.6rem;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.punto{border-top:1px solid var(--linea);padding:2rem 0 0;margin:0 0 2.2rem}
.punto:last-of-type{margin-bottom:0}
.punto__n{font-family:var(--util);font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;
 color:var(--naranja-osc);display:block;margin-bottom:0.5rem}
.punto h2{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3.2vw,2.1rem);
 line-height:1.12;margin:0 0 0.9rem;color:var(--azul-hondo)}
.punto p{margin:0;color:var(--tinta);font-size:1rem;line-height:1.7;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.aviso__pie{border-top:1px solid var(--linea);margin-top:3rem;padding-top:1.5rem;
 font-family:var(--util);font-size:0.76rem;letter-spacing:0.04em;color:var(--gris)}
/* pie en tres filas */
.foot__nav,.foot__legal{margin:0 0 0.6rem}
.foot__copy{margin:0;color:rgba(247,239,228,0.45)}
/* cabecera sin datos rápidos: necesita aire abajo */
.ficha--texto{padding-block:clamp(2.5rem,7vw,4.5rem) clamp(2.2rem,6vw,3.6rem)}
.ficha--texto .ficha__zona{margin-bottom:0}
/* ===== tablas de precios y tiempos en pantalla angosta ===== */
@media(max-width:620px){
/* la tabla deja de ser tabla y pasa a fichas apiladas */
.tarifas--dos,.tarifas--dos tbody,.tarifas--dos tr,.tarifas--dos td,.tarifas--dos th,
 .tiempos,.tiempos tbody,.tiempos tr,.tiempos td,.tiempos th{display:block;width:100%}

 .tarifas--dos tr:first-child,.tiempos tr:first-child{display:none}

 .tarifas--dos tr,.tiempos tr{border-bottom:1px solid var(--linea);padding:0.9rem 0}
 .tarifas--dos tr:last-child,.tiempos tr:last-child{border-bottom:0}

 .tarifas--dos td,.tiempos td{border:0;padding:0;text-align:left !important;
 white-space:normal !important}
/* primera celda: el nombre, como título de la ficha */
.tarifas--dos td:first-child,.tiempos td:first-child{
 font-family:var(--body);font-size:0.95rem;color:var(--tinta);
 margin-bottom:0.5rem;line-height:1.4}
/* celdas de valor: rótulo a la izquierda, cifra a la derecha */
.tarifas--dos td:nth-child(2),.tarifas--dos td:nth-child(3),
 .tiempos td:nth-child(2),.tiempos td:nth-child(3){
 display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
 font-family:var(--util);font-size:0.86rem;padding:0.2rem 0}
 .tarifas--dos td:nth-child(2)::before{content:"Temporada baja";
 font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gris)}
 .tarifas--dos td:nth-child(3)::before{content:"Temporada alta";
 font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--naranja-osc)}
 .tiempos td:nth-child(2)::before{content:"Ritmo suave";
 font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gris)}
 .tiempos td:nth-child(3)::before{content:"Ritmo ágil";
 font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--gris)}
/* fila de total, destacada */
.tiempos tr:last-child{background:var(--blanco);border:1px solid var(--linea);
 border-radius:3px;padding:1rem;margin-top:0.6rem}
 .tiempos tr:last-child td:first-child{font-family:var(--display);font-size:1.25rem;
 color:var(--naranja-osc)}
 .tiempos tr:last-child td:nth-child(2),.tiempos tr:last-child td:nth-child(3){
 color:var(--naranja-osc)}
/* la tabla simple de tarifas (una sola columna de precio) */
.tarifas td:last-child{font-size:0.82rem}
 }
/* ===== nada puede desbordar el ancho de la pantalla ===== */
html{overflow-x:hidden}
body{overflow-x:hidden;max-width:100%}
table{max-width:100%}
/* fotografía de la página */
.banda{margin:0 0 2.2rem}
.banda figure{margin:0;position:relative;overflow:hidden;border-radius:2px;aspect-ratio:3/2}
.marco img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.marco:has(img) span{display:none}
/* pilares ecológicos */
.pilares{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:0;
 grid-template-columns:1fr;border-top:1px solid var(--linea)}
@media(min-width:820px){.pilares{grid-template-columns:1fr 1fr;gap:0 2.8rem}}
.pilares li{padding:1.3rem 0;border-bottom:1px solid var(--linea)}
.pilares em{font-style:normal;font-family:var(--util);font-size:0.66rem;letter-spacing:0.12em;
 text-transform:uppercase;color:var(--verde);display:block;margin-bottom:0.35rem}
.pilares b{font-family:var(--display);font-weight:400;font-size:1.5rem;display:block;
 line-height:1.12;margin-bottom:0.45rem;color:var(--tinta)}
.pilares p{margin:0;color:var(--tinta);font-size:0.94rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* reservas de altura */
.reservas{list-style:none;counter-reset:res;margin:1.6rem 0 0;padding:0}
.reservas li{counter-increment:res;position:relative;padding:0 0 1.5rem 3.4rem}
.reservas li:not(:last-child)::after{content:"";position:absolute;left:1.05rem;top:2.3rem;bottom:0.1rem;
 width:1px;background:var(--verde);opacity:.4}
.reservas li::before{content:counter(res);position:absolute;left:0;top:0;
 width:2.1rem;height:2.1rem;border-radius:50%;background:var(--verde);color:var(--arena);
 font-family:var(--util);font-size:0.75rem;font-weight:700;
 display:flex;align-items:center;justify-content:center}
.reservas b{font-family:var(--display);font-weight:400;font-size:1.45rem;display:block;
 line-height:1.14;margin-bottom:0.35rem;color:var(--tinta)}
.reservas p{margin:0 0 0.7rem;color:var(--tinta);font-size:0.95rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.reservas p:last-child{margin-bottom:0}
/* bloque verde de conservación */
.verde-bloque{background:#EAF1ED;border:1px solid #C7DCD0;border-left:3px solid var(--verde);
 border-radius:3px;padding:clamp(1.4rem,3.5vw,2.2rem);margin:1.8rem 0 0}
.verde-bloque em{font-style:normal;font-family:var(--util);font-size:0.7rem;letter-spacing:0.14em;
 text-transform:uppercase;color:var(--verde);display:block;margin-bottom:0.55rem}
.verde-bloque h3{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3vw,2.05rem);
 line-height:1.1;margin:0 0 0.9rem;color:var(--azul-hondo)}
.verde-bloque p{margin:0 0 0.85rem;color:var(--tinta);font-size:0.97rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.verde-bloque p:last-child{margin-bottom:0}
.verde-bloque strong{font-weight:600}
/* ===== identidad verde de EcoTurismo ===== */
/* cabecera de ficha en verde */
/* el número grande de la ficha */
/* acentos de sección */
/* pie verde para las páginas de montaña */
/* aves emblemáticas */
.aves{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:0;
 grid-template-columns:1fr;border-top:1px solid var(--verde-linea)}
@media(min-width:640px){.aves{grid-template-columns:1fr 1fr;gap:0 2.5rem}}
.aves li{padding:0.85rem 0;border-bottom:1px solid var(--verde-linea);
 font-family:var(--display);font-size:1.3rem;color:var(--tinta);line-height:1.2}
/* tarifas del lodge */
.tarifas-eco{display:grid;gap:1rem;grid-template-columns:1fr;margin:1.4rem 0 0}
@media(min-width:760px){.tarifas-eco{grid-template-columns:1fr 1fr}}
.tarifa-caja{background:var(--blanco);border:1px solid var(--verde-linea);
 border-left:3px solid var(--verde-medio);border-radius:3px;padding:1.4rem 1.3rem}
.tarifa-caja em{font-style:normal;font-family:var(--util);font-size:0.66rem;letter-spacing:0.12em;
 text-transform:uppercase;color:var(--verde-medio);display:block;margin-bottom:0.4rem}
.tarifa-caja b{font-family:var(--display);font-weight:400;font-size:1.5rem;display:block;
 line-height:1.12;margin-bottom:0.2rem;color:var(--verde-hondo)}
.tarifa-caja .cifra{font-family:var(--util);font-size:1.05rem;color:var(--tinta);
 display:block;margin-bottom:0.7rem}
.tarifa-caja p{margin:0;color:var(--tinta);font-size:0.93rem;
 text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* tinta verde muy oscura para el cuerpo de texto */
.foto img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.foto:has(img) span{display:none}
/* ---- publicidad ---- */
.ad{
 border:1px dashed var(--naranja);border-radius:3px;background:rgba(226,113,44,0.08);
 padding:1.1rem 1.25rem;margin-top:1.5rem;
 }
.ad p{margin:0;font-family:var(--util);font-size:0.75rem;color:#8A4A0C;letter-spacing:0.04em}
.playas .ad{background:rgba(226,113,44,0.14)}

/* galería: la proporción de cada figura viaja en el propio marcado */
.banda--retrato figure{max-width:min(100%,520px);margin-inline:auto}
.banda--fila{display:grid;gap:3px;grid-template-columns:1fr;align-items:start}
.banda--fila.banda--rejilla{grid-template-columns:1fr 1fr}
@media(min-width:620px){
  .banda--fila{grid-template-columns:var(--cols)}
  .banda--fila.banda--rejilla{grid-template-columns:var(--cols)}
}
.marco img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.foto img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}