/* ══════════════════════════════════════════════════════════════════
   Donde el Tío Cirilo · hoja de estilos
   Los colores y tipografías están todos en el bloque :root de abajo.
   Cambia ahí un valor y cambia en toda la web.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════ TOKENS ══════════════════════ */
:root{
  --tinta:#0F1714;        /* casi negro, con verde */
  --hueso:#F3F0E8;        /* blanco roto cálido */
  --hueso-2:#EAE5DA;
  --anil:#1B3A57;         /* azul de los cercos manchegos */
  --laton:#A9834B;        /* latón viejo */
  --salvia:#6E7D68;
  --suave:rgba(15,23,20,.66);
  --linea:rgba(15,23,20,.14);
  --fondo:var(--hueso);
  --texto:var(--tinta);
  --panel:#FFFFFF;
  --sombra:0 1px 2px rgba(15,23,20,.04), 0 12px 40px -12px rgba(15,23,20,.16);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --fondo:#0D1411; --texto:#EDEAE1; --hueso-2:#151E1A;
    --anil:#8FB6D4; --laton:#CBA36A; --salvia:#93A489;
    --suave:rgba(237,234,225,.66); --linea:rgba(237,234,225,.16);
    --panel:#141D19;
    --sombra:0 1px 2px rgba(0,0,0,.4), 0 12px 40px -12px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --fondo:#0D1411; --texto:#EDEAE1; --hueso-2:#151E1A;
  --anil:#8FB6D4; --laton:#CBA36A; --salvia:#93A489;
  --suave:rgba(237,234,225,.66); --linea:rgba(237,234,225,.16);
  --panel:#141D19;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 12px 40px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:'Jost',system-ui,sans-serif; font-weight:300;
  font-size:16.5px; line-height:1.72; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{font-family:'Prata',Georgia,serif; font-weight:400; margin:0; line-height:1.12}
p{margin:0 0 1.15em}
::selection{background:var(--laton); color:#0F1714}
:focus-visible{outline:2px solid var(--laton); outline-offset:4px}

.env{max-width:1240px; margin:0 auto; padding:0 28px}
.estrecho{max-width:760px; margin:0 auto; padding:0 28px}
.rotulo{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  font-weight:400; color:var(--laton); margin:0 0 20px;
}
.filete{width:48px; height:1px; background:var(--laton); border:0; margin:0 0 26px}
.filete.centro{margin-inline:auto}
.medida{max-width:60ch}

/* revelado suave al bajar */
.rev{opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1)}
.rev.visto{opacity:1; transform:none}

/* ══════════════════════ AVISO ══════════════════════ */
#aviso{
  position:fixed; bottom:0; left:0; right:0; z-index:90;
  background:var(--tinta); color:var(--hueso);
  font-size:12.5px; letter-spacing:.02em; padding:10px 20px;
  display:flex; gap:14px; align-items:center; justify-content:center; text-align:center;
}
#aviso button{background:none; border:1px solid rgba(243,240,232,.5); color:inherit;
  font:inherit; padding:3px 12px; cursor:pointer; flex-shrink:0}

/* ══════════════════════ MENÚ ══════════════════════ */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  padding:22px 0; transition:background .4s, padding .4s, box-shadow .4s;
  color:var(--hueso);
}
header.nav .env{display:flex; align-items:center; justify-content:space-between; gap:24px}
header.nav.pegado{
  background:color-mix(in srgb, var(--fondo) 95%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  color:var(--texto); padding:13px 0; box-shadow:0 1px 0 var(--linea);
}
.logo{font-family:'Prata',serif; font-size:19px; letter-spacing:.01em; white-space:nowrap}
.logo small{display:block; font-family:'Jost',sans-serif; font-size:9.5px;
  letter-spacing:.3em; text-transform:uppercase; opacity:.7; margin-top:3px; font-weight:300}
nav.enlaces{display:flex; gap:30px; font-size:13.5px; letter-spacing:.06em}
nav.enlaces a{padding:4px 0; border-bottom:1px solid transparent; transition:border-color .3s}
nav.enlaces a:hover{border-color:currentColor}

.boton{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:'Jost',sans-serif; font-size:12.5px; letter-spacing:.16em;
  text-transform:uppercase; padding:15px 30px; min-height:48px;
  background:var(--laton); color:#0F1714; border:1px solid var(--laton);
  cursor:pointer; transition:background .3s, color .3s; font-weight:400;
}
.boton:hover{background:transparent; color:var(--laton)}
.boton.linea{background:transparent; border-color:currentColor; color:inherit}
.boton.linea:hover{background:currentColor; color:var(--fondo)}
.boton.compacto{padding:12px 22px; min-height:44px}

#abrirMenu{display:none; width:46px; height:46px; border:1px solid currentColor;
  background:none; color:inherit; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px}
#abrirMenu i{display:block; width:18px; height:1px; background:currentColor; transition:transform .3s, opacity .3s}
body.menu-abierto #abrirMenu i:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu-abierto #abrirMenu i:nth-child(2){opacity:0}
body.menu-abierto #abrirMenu i:nth-child(3){transform:translateY(-3px) rotate(-45deg)}

#panelMenu{
  position:fixed; inset:0; z-index:79; background:var(--tinta); color:var(--hueso);
  display:flex; flex-direction:column; justify-content:center; padding:0 32px;
  transform:translateY(-100%); transition:transform .5s cubic-bezier(.6,0,.2,1);
}
body.menu-abierto #panelMenu{transform:translateY(0)}
#panelMenu a{font-family:'Prata',serif; font-size:clamp(28px,8vw,44px);
  padding:11px 0; border-bottom:1px solid rgba(243,240,232,.12)}
#panelMenu .pie{margin-top:36px; font-size:14px; letter-spacing:.06em; opacity:.75}

@media (max-width:1040px){
  nav.enlaces, header.nav .boton{display:none}
  #abrirMenu{display:flex}
}

/* ══════════════════════ PORTADA ══════════════════════ */
.portada{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  color:var(--hueso); overflow:hidden;
}
.portada .lienzo{position:absolute; inset:0}
.portada .lienzo img{width:100%; height:100%; object-fit:cover;
  animation:deriva 26s ease-in-out infinite alternate}
@keyframes deriva{from{transform:scale(1.04)} to{transform:scale(1.13) translateY(-1.5%)}}
.portada .velo{position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,13,11,.86) 0%, rgba(8,13,11,.38) 46%, rgba(8,13,11,.44) 100%)}
.portada .env{position:relative; padding-bottom:clamp(64px,11vh,120px); padding-top:140px}
.portada h1{font-size:clamp(3rem,10.5vw,7.2rem); letter-spacing:-.015em}
.portada h1 em{font-style:normal; display:block}
.portada .bajada{max-width:38ch; margin-top:26px; font-size:clamp(16px,2.1vw,19px);
  color:rgba(243,240,232,.86)}
.portada .acciones{display:flex; gap:14px; flex-wrap:wrap; margin-top:34px}
.portada .rotulo{color:rgba(243,240,232,.72)}
.baja{position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(243,240,232,.6); display:flex; flex-direction:column; align-items:center; gap:9px}
.baja::after{content:''; width:1px; height:34px; background:linear-gradient(rgba(243,240,232,.6),transparent);
  animation:cae 2.4s ease-in-out infinite}
@keyframes cae{0%,100%{opacity:.25; transform:scaleY(.5)} 50%{opacity:1; transform:scaleY(1)}}
@media (max-width:760px){ .baja{display:none} .portada .env{padding-bottom:118px} }

/* ══════════════════════ CIFRAS ══════════════════════ */
.cifras{background:var(--tinta); color:var(--hueso)}
.cifras .env{display:grid; grid-template-columns:repeat(4,1fr); padding-block:54px}
.cifras div{text-align:center; padding:6px 16px}
.cifras div + div{border-left:1px solid rgba(243,240,232,.14)}
.cifras b{display:block; font-family:'Prata',serif; font-weight:400;
  font-size:clamp(2rem,4.4vw,3.1rem); color:var(--laton); line-height:1}
.cifras span{display:block; margin-top:11px; font-size:11px; letter-spacing:.17em;
  text-transform:uppercase; color:rgba(243,240,232,.68)}
@media (max-width:760px){
  .cifras .env{grid-template-columns:repeat(2,1fr); padding-block:34px; gap:26px 0}
  .cifras div:nth-child(odd){border-left:none}
  .cifras div:nth-child(n+3){border-top:1px solid rgba(243,240,232,.14); padding-top:26px}
}

/* ══════════════════════ SECCIONES ══════════════════════ */
section{padding:clamp(76px,11vw,140px) 0}
section.claro{background:var(--hueso-2)}
h2{font-size:clamp(2.1rem,5.2vw,3.5rem)}
.intro{font-size:clamp(17px,2.2vw,20px); color:var(--suave); margin-top:26px}

/* relato: texto + imagen alternos */
.relato{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(34px,6vw,84px)}
.relato.invertido .texto{order:2}
.relato img{width:100%; aspect-ratio:4/5; object-fit:cover}
.relato + .relato{margin-top:clamp(64px,9vw,120px)}
@media (max-width:900px){
  .relato{grid-template-columns:1fr; gap:30px}
  .relato.invertido .texto{order:0}
  .relato img{aspect-ratio:3/2}
}

/* banda a sangre */
.banda{position:relative; min-height:72svh; display:flex; align-items:center;
  color:var(--hueso); overflow:hidden; padding:96px 0}
.banda img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.banda .velo{position:absolute; inset:0; background:linear-gradient(105deg, rgba(8,13,11,.88), rgba(8,13,11,.3))}
.banda .env{position:relative}
.banda .rotulo{color:rgba(243,240,232,.7)}
.banda p{color:rgba(243,240,232,.86)}

/* ficha */
.ficha{display:grid; grid-template-columns:repeat(2,1fr); gap:0 48px; margin-top:8px}
.ficha div{display:flex; justify-content:space-between; gap:18px; padding:15px 0;
  border-bottom:1px solid var(--linea); font-size:14.5px}
.ficha dt{color:var(--suave); letter-spacing:.04em; flex-shrink:0}
.ficha dd{margin:0; text-align:right}
@media (max-width:820px){ .ficha{grid-template-columns:1fr} }

/* ══════════════════════ GALERÍA ══════════════════════ */
.galeria{display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.galeria button{border:0; padding:0; background:var(--linea); cursor:pointer;
  overflow:hidden; position:relative}
.galeria img{width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.galeria button:hover img{transform:scale(1.06)}
.galeria figcaption{position:absolute; left:0; right:0; bottom:0; padding:16px 18px;
  text-align:left; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:#F3F0E8; background:linear-gradient(transparent,rgba(8,13,11,.8));
  opacity:0; transform:translateY(8px); transition:.4s}
.galeria button:hover figcaption, .galeria button:focus-visible figcaption{opacity:1; transform:none}
.g-a{grid-column:span 4; aspect-ratio:16/10}
.g-b{grid-column:span 2; aspect-ratio:4/5}
.g-c{grid-column:span 2; aspect-ratio:1}
.g-d{grid-column:span 3; aspect-ratio:3/2}
@media (max-width:860px){
  /* en móvil: carrusel que se arrastra con el dedo */
  .galeria{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    padding-inline:28px; margin-inline:-28px; scrollbar-width:none}
  .galeria::-webkit-scrollbar{display:none}
  .galeria button{flex:0 0 78%; aspect-ratio:3/4!important; scroll-snap-align:center}
  .galeria figcaption{opacity:1; transform:none}
}
.pista{display:none; margin-top:14px; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--suave)}
@media (max-width:860px){ .pista{display:block} }

#visor{position:fixed; inset:0; z-index:95; background:rgba(8,13,11,.97);
  display:none; align-items:center; justify-content:center; padding:24px}
#visor.on{display:flex}
#visor img{max-height:80svh; width:auto; object-fit:contain}
#visor figcaption{margin-top:18px; text-align:center; font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(243,240,232,.7)}
#visor button{position:absolute; background:none; border:0; color:#F3F0E8; cursor:pointer;
  width:56px; height:56px; font-size:30px; line-height:1}
#visor .izq{left:4px} #visor .der{right:4px} #visor .x{top:10px; right:14px}

/* ══════════════════════ ESTANCIAS ══════════════════════ */
.estancias{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,34px)}
.estancia{background:var(--panel); box-shadow:var(--sombra)}
.estancia img{width:100%; aspect-ratio:4/3; object-fit:cover}
.estancia .cuerpo{padding:26px 26px 30px}
.estancia h3{font-size:1.45rem}
.estancia .cama{margin:10px 0 0; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--suave)}
.estancia .nota{margin:14px 0 0; font-size:14.5px; color:var(--salvia)}
@media (max-width:980px){ .estancias{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .estancias{grid-template-columns:1fr} }

/* ══════════════════════ ALREDEDORES ══════════════════════ */
.entorno{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(24px,4vw,44px)}
.sitio{position:relative; overflow:hidden; min-height:300px; display:flex;
  align-items:flex-end; color:#F3F0E8}
.sitio img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.sitio:hover img{transform:scale(1.05)}
.sitio .velo{position:absolute; inset:0;
  background:linear-gradient(to top,rgba(8,13,11,.9),rgba(8,13,11,.15))}
.sitio .txt{position:relative; padding:30px}
.sitio h3{font-size:1.6rem}
.sitio .km{font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--laton); margin-bottom:10px}
.sitio p{margin:12px 0 0; font-size:14.8px; color:rgba(243,240,232,.84)}
@media (max-width:760px){ .entorno{grid-template-columns:1fr} }

/* ══════════════════════ TARIFAS ══════════════════════ */
.tarifas{overflow-x:auto; margin-top:44px; scrollbar-width:none}
.tarifas::-webkit-scrollbar{display:none}
table{width:100%; border-collapse:collapse; min-width:600px; font-size:14.5px}
th{font-family:'Jost',sans-serif; font-weight:400; font-size:11px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--suave); text-align:left;
  padding:0 10px 16px; border-bottom:1px solid var(--linea)}
td{padding:19px 10px; border-bottom:1px solid var(--linea)}
td.temp{font-family:'Prata',serif; font-size:17px}
th.num,td.num{text-align:right}
td .precio{font-family:'Prata',serif; font-size:19px}

/* ══════════════════════ RESERVA ══════════════════════ */
.motor{background:var(--panel); box-shadow:var(--sombra); padding:clamp(24px,4vw,44px)}
.motor .cabeza{display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding-bottom:22px; border-bottom:1px solid var(--linea)}
.motor h3{font-size:1.5rem}
.flechas{display:flex; gap:8px}
.flechas button{width:44px; height:44px; border:1px solid var(--linea); background:none;
  color:inherit; cursor:pointer; font-size:16px}
.flechas button:disabled{opacity:.25; cursor:not-allowed}
.meses{display:grid; grid-template-columns:1fr 1fr; gap:38px; margin-top:28px}
@media (max-width:680px){ .meses{grid-template-columns:1fr; gap:30px} }
.mes h4{font-family:'Jost',sans-serif; font-weight:400; font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--suave); margin:0 0 16px}
.dow{display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:6px}
.dow span{text-align:center; font-size:10px; letter-spacing:.1em; color:var(--suave); opacity:.7}
.dias{display:grid; grid-template-columns:repeat(7,1fr); gap:3px}
.dias button{aspect-ratio:1; min-height:40px; border:0; background:none; color:inherit;
  cursor:pointer; font-family:'Jost',sans-serif; font-size:14px; font-weight:300;
  transition:background .2s, color .2s}
.dias button:hover:not(:disabled){background:color-mix(in srgb,var(--laton) 22%,transparent)}
.dias button:disabled{opacity:.25; text-decoration:line-through; cursor:not-allowed}
.dias button.extremo{background:var(--anil); color:var(--hueso)}
.dias button.medio{background:color-mix(in srgb,var(--anil) 16%,transparent)}
.dias .hueco{aspect-ratio:1}
.leyenda{display:flex; gap:20px; flex-wrap:wrap; margin-top:20px; font-size:11.5px;
  letter-spacing:.1em; color:var(--suave); text-transform:uppercase}
.leyenda i{display:inline-block; width:11px; height:11px; margin-right:7px;
  vertical-align:-1px; background:var(--anil)}
.leyenda i.libre{background:color-mix(in srgb,var(--laton) 30%,transparent)}
.pax{display:flex; align-items:center; gap:16px; margin-top:24px; padding-top:22px;
  border-top:1px solid var(--linea); font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--suave)}
select,input,textarea{font-family:'Jost',sans-serif; font-weight:300; font-size:15px;
  padding:14px 15px; min-height:48px; border:1px solid var(--linea);
  background:var(--fondo); color:inherit; width:100%; border-radius:0}
select{max-width:110px; min-height:44px; padding:10px 12px}
.resumen{margin-top:28px; padding-top:26px; border-top:1px solid var(--linea)}
.linea-precio{display:flex; justify-content:space-between; gap:20px; padding:7px 0; font-size:15px}
.linea-precio.total{margin-top:14px; padding-top:18px; border-top:1px solid var(--linea);
  align-items:baseline}
.linea-precio.total span:first-child{font-family:'Prata',serif; font-size:19px}
.linea-precio.total b{font-family:'Prata',serif; font-weight:400; font-size:28px; color:var(--laton)}
.campos{display:grid; gap:12px; margin-top:26px}
.par{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:560px){ .par{grid-template-columns:1fr} }
.apunte{font-size:13.5px; padding:16px 20px; border-left:2px solid var(--laton);
  background:color-mix(in srgb,var(--laton) 11%,transparent); margin-top:20px; color:var(--suave)}

/* otros canales */
.canales{margin-top:44px; text-align:center}
.canales .rotulo{margin-bottom:14px}
.canales p{font-size:14.5px; color:var(--suave); max-width:46ch; margin:0 auto 24px}
.canales .par-btn{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.externo{
  display:inline-flex; align-items:center; gap:10px; min-height:52px;
  padding:14px 26px; border:1px solid var(--linea); background:var(--panel);
  font-size:13.5px; letter-spacing:.06em; transition:border-color .3s, transform .3s;
}
.externo:hover{border-color:var(--laton); transform:translateY(-2px)}
.externo .marca{width:9px; height:9px; border-radius:50%; flex-shrink:0}
.externo .b{background:#003580} .externo .a{background:#FF5A5F}
.externo .sale{opacity:.45; font-size:15px}
@media (max-width:560px){ .canales .par-btn{flex-direction:column} .externo{justify-content:center} }

/* ══════════════════════ PREGUNTAS ══════════════════════ */
details{border-bottom:1px solid var(--linea)}
summary{cursor:pointer; list-style:none; padding:24px 0; display:flex;
  justify-content:space-between; gap:26px; align-items:center;
  font-family:'Prata',serif; font-size:clamp(17px,2.4vw,20px); min-height:56px}
summary::-webkit-details-marker{display:none}
summary .mas{font-family:'Jost',sans-serif; font-weight:300; color:var(--laton);
  font-size:24px; line-height:1; transition:transform .3s; flex-shrink:0}
details[open] summary .mas{transform:rotate(45deg)}
details p{margin:0; padding:0 56px 26px 0; color:var(--suave)}
@media(max-width:600px){ details p{padding-right:0} }

/* ══════════════════════ CIERRE Y PIE ══════════════════════ */
.cierre{position:relative; text-align:center; color:var(--hueso); overflow:hidden;
  padding:clamp(90px,14vw,160px) 0}
.cierre img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.cierre .velo{position:absolute; inset:0; background:rgba(8,13,11,.72)}
.cierre .env{position:relative}
.cierre h2{font-size:clamp(2rem,5vw,3.2rem)}
.cierre p{max-width:46ch; margin:22px auto 34px; color:rgba(243,240,232,.84)}

footer{background:var(--tinta); color:rgba(243,240,232,.72); padding:70px 0 130px; font-size:14px}
footer .env{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
footer .logo{color:var(--hueso); margin-bottom:18px}
footer h4{font-family:'Jost',sans-serif; font-weight:400; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--laton); margin:0 0 16px}
footer a:hover{color:var(--hueso)}
footer .legal{grid-column:1/-1; border-top:1px solid rgba(243,240,232,.14);
  padding-top:24px; font-size:12.5px; opacity:.75}
@media (max-width:820px){ footer .env{grid-template-columns:1fr; gap:34px} }

/* ══════════════════════ BARRA MÓVIL ══════════════════════ */
#barra{
  position:fixed; left:0; right:0; bottom:0; z-index:85; display:none;
  background:color-mix(in srgb,var(--fondo) 96%, transparent); backdrop-filter:blur(14px);
  border-top:1px solid var(--linea); padding:11px 18px calc(11px + env(safe-area-inset-bottom));
  align-items:center; justify-content:space-between; gap:14px;
}
#barra .desde{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--suave)}
#barra .desde b{display:block; font-family:'Prata',serif; font-weight:400; font-size:19px;
  letter-spacing:0; text-transform:none; color:var(--texto); margin-top:2px}
@media (max-width:1040px){ #barra{display:flex} body{padding-bottom:0} }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  html{scroll-behavior:auto}
  .rev{opacity:1; transform:none}
}