/* ═══════════════════════════════════════════════════════════
   HOTEL MARCELO'S · style.css
   🎨 Para cambiar colores o tipografías edita SOLO las variables de :root.
   ═══════════════════════════════════════════════════════════ */
:root{
  --selva:#0F2A22;      /* verde casi negro: textos y fondos oscuros */
  --follaje:#1F5440;    /* verde medio */
  --neblina:#E9EFEA;    /* gris verdoso claro: fondos alternos */
  --papel:#FBFCFA;      /* fondo base */
  --senal:#F2B705;      /* amarillo de la línea central de la carretera */
  --senal-claro:#FFC929;
  --suave:#4B5B54;      /* texto secundario */
  --linea:#C3D0C8;
  --foco:#1F5440;
  --alto:68px;          /* altura del menú */
  --titulo:'Archivo','Arial Narrow',Arial,sans-serif;
  --texto:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --trazo:repeating-linear-gradient(90deg,var(--senal) 0 20px,transparent 20px 34px);
}

/* ── Base ── */
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--alto)}
body{font:400 1.0625rem/1.65 var(--texto);color:var(--selva);background:var(--papel);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
ul,dl{list-style:none;padding:0}
p{max-width:62ch}
:focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.oscuro{--foco:var(--senal)}
.oculto{display:none!important}
.wrap{width:min(1160px,100% - 2.5rem);margin-inline:auto}
h1,h2,h3{font-family:var(--titulo);font-stretch:110%;font-weight:750;line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:clamp(1.9rem,4.2vw,2.9rem)}
h3{font-size:1.25rem}
h4{font:700 1.05rem var(--texto);margin:2rem 0 .25rem}
.i{width:1.25rem;height:1.25rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.7rem 1.5rem;border:2px solid transparent;border-radius:4px;font:600 1rem var(--texto);text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.btn-senal{background:var(--senal);color:var(--selva)}
.btn-senal:hover{background:var(--senal-claro)}
.btn-oscuro{background:var(--selva);color:#fff}
.btn-oscuro:hover{background:var(--follaje)}
.btn-borde{border-color:rgba(255,255,255,.55);color:#fff}
.btn-borde:hover{background:rgba(255,255,255,.12)}
.btn:disabled{opacity:.7;cursor:wait}

/* ── Menú ── */
.header{position:fixed;inset:0 0 auto;z-index:20;color:#fff;transition:background .25s,color .25s,box-shadow .25s}
.header.scrolled,.header.abierto{background:var(--papel);color:var(--selva);box-shadow:0 1px 0 var(--linea);--foco:var(--follaje)}
.barra{display:flex;align-items:center;justify-content:space-between;height:var(--alto)}
.logo{display:flex;align-items:center;gap:.6rem;font:750 1.3rem var(--titulo);font-stretch:115%;text-decoration:none}
.logo::before{content:"";width:16px;height:4px;background:var(--senal)}
.menu ul{display:flex;gap:2rem}
.menu a{padding:.5rem 0;border-bottom:2px solid transparent;font-weight:500;text-decoration:none}
.menu a:hover{border-bottom-color:var(--senal)}
.toggle{display:none;position:relative;width:44px;height:44px;border:0;background:none;color:inherit;cursor:pointer}
.toggle span{position:absolute;left:11px;right:11px;height:2px;background:currentColor;transition:transform .25s,opacity .25s}
.toggle span:nth-child(1){top:15px}
.toggle span:nth-child(2){top:21px}
.toggle span:nth-child(3){top:27px}
.toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.flota{position:fixed;right:1rem;bottom:1rem;z-index:15;visibility:hidden;opacity:0;transform:translateY(12px);box-shadow:0 8px 24px rgba(15,42,34,.3);transition:opacity .25s,transform .25s,visibility .25s,background .2s}
.flota.visible{visibility:visible;opacity:1;transform:none}

/* ── Portada ── */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-height:min(100svh,880px);padding:calc(var(--alto) + 3rem) 0 3rem;background:var(--selva);color:#fff}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,42,34,.55),rgba(15,42,34,.9) 85%)}
.hero h1{max-width:18ch;font-size:clamp(2.4rem,7vw,5rem);font-stretch:112%;font-weight:800;line-height:1.02;margin-bottom:1.25rem}
.hero p{font-size:1.15rem;color:rgba(255,255,255,.88)}
.acciones{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}

/* La ruta: línea amarilla que se "dibuja" al cargar (único movimiento automático de la página) */
.ruta{margin-top:clamp(3rem,9vh,5.5rem)}
.ruta .ruta-nombre{margin-bottom:.9rem;font:600 .95rem var(--texto);color:var(--senal)}
.ruta ol{position:relative;display:grid;grid-template-columns:1fr auto 1fr;padding-top:1.9rem;list-style:none}
.ruta ol::before{content:"";position:absolute;inset:.45rem 0 auto;height:4px;background:var(--trazo);clip-path:inset(0 100% 0 0);animation:trazar 1.8s .4s cubic-bezier(.6,0,.2,1) forwards}
.ruta li{position:relative;font:700 1.05rem var(--titulo);font-stretch:110%}
.ruta li::before{content:"";position:absolute;top:-1.76rem;left:0;width:14px;height:14px;border:3px solid var(--senal);border-radius:50%;background:var(--selva)}
.ruta li:last-child{justify-self:end;text-align:right}
.ruta li:last-child::before{left:auto;right:0}
.ruta .aqui{font-size:1.5rem;text-align:center}
.ruta .aqui::before{top:-2.01rem;left:50%;width:22px;height:22px;background:var(--senal);border-color:var(--selva);box-shadow:0 0 0 6px rgba(242,183,5,.3);transform:translateX(-50%);animation:aparece .5s 1.3s backwards cubic-bezier(.3,1.6,.5,1)}
.ruta small{display:block;font:500 .85rem var(--texto);color:rgba(255,255,255,.8)}
@keyframes trazar{to{clip-path:inset(0)}}
@keyframes aparece{from{transform:translateX(-50%) scale(0)}}

/* ── Secciones ── */
.seccion{padding:clamp(4rem,9vw,7rem) 0}
.fondo-neblina{background:var(--neblina)}
.fondo-selva{background:var(--selva);color:#fff}
.encabezado{max-width:44rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.encabezado p{margin-top:1rem;color:var(--suave)}

/* Habitaciones */
.cuartos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:1.5rem}
.cuarto{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--linea);border-radius:6px;background:var(--papel)}
.foto{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--neblina)}
.foto img{width:100%;height:100%;object-fit:cover}
.ver{display:block;width:100%;padding:0;border:0;cursor:zoom-in}
.ver::before{content:"Ver fotos";position:absolute;left:.75rem;bottom:.75rem;z-index:1;padding:.25rem .7rem;border-radius:3px;background:var(--selva);color:#fff;font:600 .85rem var(--texto)}
.cuarto-cuerpo{display:flex;flex:1;flex-direction:column;gap:1rem;padding:1.5rem}
.cuarto-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.35rem 1rem}
.precio{font:800 1.75rem/1 var(--titulo);font-stretch:112%}
.precio small{font:500 .875rem var(--texto);color:var(--suave)}
.datos{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1rem;padding-top:1rem;border-top:1px dashed var(--linea);font-size:.95rem}
.datos li{display:flex;align-items:center;gap:.6rem}
.datos .i{color:var(--follaje)}
.cuarto .btn{margin-top:auto}

/* Servicios */
.servicios{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.servicios .encabezado{position:sticky;top:calc(var(--alto) + 2rem);margin:0}
.lista-serv{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 2rem}
.serv{display:grid;grid-template-columns:auto 1fr;column-gap:1rem;row-gap:.25rem;align-content:start}
.serv .i{grid-row:span 2;width:2.75rem;height:2.75rem;padding:.65rem;border-radius:4px;background:var(--selva);color:var(--senal)}
.serv h3{font-size:1.15rem}
.serv p{color:var(--suave);font-size:.98rem}

/* Convenios */
.convenios{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.convenios p{margin:1.25rem 0 2rem;color:rgba(255,255,255,.84)}
.logos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.logo-slot{display:grid;place-items:center;aspect-ratio:5/3;padding:1.25rem;overflow:hidden;border-radius:6px;background:#fff}
.logo-slot img{max-height:100%;object-fit:contain}

/* Contacto */
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.contacto h3{font-size:1.5rem;margin-bottom:.75rem}
.datos-adm>div{display:grid;grid-template-columns:9.5rem 1fr;gap:.25rem 1rem;padding:.9rem 0;border-bottom:1px dashed var(--linea)}
.datos-adm dt{font-weight:600}
.datos-adm a{font-weight:600;text-underline-offset:3px}
.mapa{aspect-ratio:16/10;margin-top:2rem;overflow:hidden;border:1px solid var(--linea);border-radius:6px;background:var(--papel)}
.mapa iframe{width:100%;height:100%;border:0}
.panel{padding:clamp(1.5rem,4vw,2.25rem);border:1px solid var(--linea);border-radius:6px;background:var(--papel)}
.panel>p{margin:.5rem 0 1.5rem;color:var(--suave)}
.campo{display:grid;gap:.4rem;margin-bottom:1.25rem}
.campo label{font-size:.95rem;font-weight:600}
input,textarea{width:100%;padding:.8rem 1rem;border:1.5px solid #7A9086;border-radius:4px;background:#fff;color:inherit;font:inherit}
input:focus-visible,textarea:focus-visible{outline:3px solid var(--senal);outline-offset:0;border-color:var(--selva)}
textarea{resize:vertical}
form .btn{width:100%}
.panel>.aviso{margin:1rem 0 0;padding:1rem 1.25rem;border-left:4px solid var(--follaje);border-radius:4px;background:#E3F1E8;color:var(--selva)}
.panel>.error{border-color:#B3261E;background:#FBE9E7}

/* Pie */
.pie{position:relative;padding:2.5rem 0;background:var(--selva);color:rgba(255,255,255,.8);font-size:.9rem;text-align:center}
.pie::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--trazo)}
.pie p{max-width:none}

/* ── Visor de fotos ── */
.visor{width:min(980px,94vw);max-height:94vh;padding:0;overflow:visible;border:0;background:none;color:#fff}
.visor::backdrop{background:rgba(8,22,17,.9)}
.visor-barra{display:flex;align-items:center;gap:.5rem;padding-bottom:.75rem}
.visor-barra p{flex:1;font:700 1.1rem var(--titulo);font-stretch:110%}
.visor.una .vnav{display:none}
.vbtn{width:44px;height:44px;border:1.5px solid rgba(255,255,255,.55);border-radius:50%;background:none;color:#fff;font:400 1.5rem/1 var(--texto);cursor:pointer}
.vbtn:hover{background:rgba(255,255,255,.14)}
.visor{--foco:var(--senal)}
.visor-tira{display:flex;overflow-x:auto;border-radius:6px;background:#000;scroll-snap-type:x mandatory;scrollbar-width:none}
.diap{flex:0 0 100%;max-height:78vh;scroll-snap-align:center}
.diap img{object-fit:contain}

/* ── Foto o logo que falta: recuadro que indica dónde ponerla (lo escribe script.js) ── */
.sin-foto{display:grid;place-items:center;background:repeating-linear-gradient(135deg,var(--neblina) 0 14px,#DFE8E1 14px 28px)}
.sin-foto>img{display:none}
.sin-foto::after{content:attr(data-ruta);max-width:90%;padding:.5rem .9rem;border:2px dashed var(--follaje);border-radius:4px;background:var(--papel);color:var(--follaje);font:600 .85rem/1.35 var(--texto);text-align:center;overflow-wrap:anywhere}
.hero-bg.sin-foto{display:block;background:radial-gradient(70% 90% at 85% 15%,var(--follaje),var(--selva))}
.hero-bg.sin-foto::after{position:absolute;z-index:2;top:calc(var(--alto) + 1rem);right:1.25rem;max-width:none}

/* ── Móvil y tablet ── */
@media (max-width:860px){
  .toggle{display:block}
  .menu{display:none;position:absolute;inset:var(--alto) 0 auto;padding:.5rem 1.25rem 1.5rem;background:var(--papel);box-shadow:0 12px 24px rgba(15,42,34,.12)}
  .menu.activo{display:block}
  .menu ul{flex-direction:column;gap:0}
  .menu a{display:block;padding:.9rem 0;border-bottom:1px dashed var(--linea)}
  .servicios,.convenios,.contacto{grid-template-columns:1fr}
  .servicios .encabezado{position:static}
  .hero p{font-size:1.05rem}
}
@media (max-width:560px){
  .lista-serv{grid-template-columns:1fr}
  .datos{grid-template-columns:1fr}
  .datos-adm>div{grid-template-columns:1fr}
}

/* ── Respeta a quien prefiere menos movimiento ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .ruta ol::before{clip-path:none}
}