/* Camping El Carlitos — Home "mobil-home" (diseño 2a)
   Requiere: PT Sans, Caveat (Google Fonts, ya enlazadas en el <head>)
   Colocar en: assets/css/home-carlitos.css                                */

:root{
  --sea:#002e64; --sea-dark:#001c40; --terra:#ec7e28; --terra-dark:#d86f1c;
  --ink:#23302f; --ink-soft:#5c6968; --ink-mute:#8b9694;
  --cream:#fbf8f2; --sand:#f3ece0; --wood-a:#f4eee2; --wood-b:#ebe3d3;
  --pool:#e9f2f4; --night:#1c2a29;
  --shadow-card:0 20.8px 44.2px -28.6px rgba(35,48,47,.5);
  --shadow-soft:0 15.6px 33.8px -26px rgba(35,48,47,.5);
  --wrap:1508px;
  /* Mismo valor que --content-padding en style.css: padding lateral fluido
     (20.8px en móvil hasta 62.4px en pantallas grandes). */
  --content-padding: clamp(0.77rem, 3.08vw, 2.31rem);
}

*{box-sizing:border-box}
/* Sustituye al antiguo body{zoom:1.3} (bajaba a 1.12 en móvil). En vez de un
   zoom no estándar, escalamos el tamaño de fuente raíz: como el resto de la
   hoja usa "rem" (relativo a esta raíz) para casi todo el espaciado y la
   tipografía, esto reproduce el mismo resultado visual sin el hack. Los
   valores en px puro (anchos, altos, iconos...) sí se han multiplicado
   individualmente por el mismo factor donde hacía falta. */
html{scroll-behavior:smooth;font-size:130%}
@media (max-width:760px){ html{font-size:112%} }
.sr-only{position:absolute;width:1.3px;height:1.3px;padding:0;margin:-1.3px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* overflow-x en body, no en html: si "html" recorta un eje y no el otro, el
   navegador convierte html en su propio contenedor de scroll (en vez del
   viewport), y eso rompe position:sticky justo al saltar a una URL con
   #ancla (la cabecera deja de pegarse arriba). En body no pasa nada de eso. */
body{margin:0;background:var(--cream);color:var(--ink);font-family:'PT Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased;
  font-size:clamp(0.77rem, 0.736rem + 0.146vw, 0.865rem);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--sea);text-decoration:none}
a:hover{color:var(--sea-dark)}
/* Misma escala tipográfica que el resto de la web (h1/h2/h3, en rem: ya
   escala sola con el font-size de html de arriba). */
h1,h2,h3,h4{font-family:'PT Sans',Arial,sans-serif;font-weight:700;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(1.73rem, 1.255rem + 2.02vw, 3.08rem)}
h2{font-size:clamp(1.385rem, 1.154rem + 0.92vw, 2rem)}
h3{font-size:clamp(1.08rem, 0.97rem + 0.58vw, 1.46rem)}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--content-padding)}
.wrap--narrow{max-width:1300px}
.eyebrow{margin:0;font-size:14.95px;font-weight:700;letter-spacing:.18em;color:var(--terra);text-transform:uppercase}
.muted{color:#64716f}
.center{text-align:center}
.script{font-family:'Caveat',cursive}
.btn{display:inline-block;border:none;border-radius:15.6px;padding:19.5px 39px;font-family:'PT Sans',Arial,sans-serif;font-weight:700;font-size:22.1px;cursor:pointer;transition:background .18s,color .18s,border-color .18s,transform .18s}
.btn--sea{background:var(--sea);color:#fff;box-shadow:0 15.6px 31.2px -15.6px rgba(0,46,100,.6)}
.btn--sea:hover{background:var(--terra);color:#002e64}
.btn--terra{background:var(--terra);color:#fff;box-shadow:0 15.6px 31.2px -13px rgba(236,126,40,.6)}
.btn--terra:hover{background:var(--sea);color:#fff}
.btn--ghost{background:transparent;border:1.95px solid var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--terra);border-color:var(--terra);color:#002e64}

/* ---------- HEADER: alero de listones + canalón ---------- */
.mh-header{position:sticky;top:0;z-index:40;
  transition:max-height 1.8s cubic-bezier(.65,0,.35,1),opacity 1s ease,overflow 0s 1.8s}
/* La cabecera se descubre cuando termina el vídeo. Se colapsa con max-height
   (no con display) para poder animarla y para que no deje una franja vacía.
   IMPORTANTE: overflow no es animable — si pasara a "visible" en el mismo
   instante que empieza a crecer el max-height, el contenido dejaría de estar
   recortado y se vería completo de golpe (el despliegue no se notaría). Por
   eso "overflow" lleva su propio transition-delay igual a la duración del
   max-height: se queda en "hidden" recortando el contenido mientras crece,
   y solo pasa a "visible" (para no cortar el desplegable de idiomas) una vez
   terminada la animación. El valor final de max-height (140px) es solo un
   poco mayor que la altura real de la cabecera (~126px): así el crecimiento
   se nota durante TODA la animación en vez de completarse a mitad de
   camino y quedarse el resto del tiempo creciendo de forma invisible. */
.js .mh-header{max-height:0;opacity:0;overflow:hidden}
.js .mh-header.is-ready{max-height:140px;opacity:1;overflow:visible}
/* Barra blanca con botones de contorno azul y acento naranja en "Reservar".
   el fondo y el filete van en .mh-header (ancho completo) y no en __inner
   (que solo centra el contenido), para que la barra llegue de punta a
   punta aunque la pantalla sea más ancha que el contenido */
.mh-header{--nav-azul:var(--sea);--nav-azul-hondo:var(--sea-dark);--nav-tinta:rgba(0,46,100,.35);
  background:#fff;
  border-bottom:1.95px solid rgba(0,46,100,.1);
  box-shadow:0 3.9px 15.6px rgba(0,46,100,.08)}
.mh-header__inner{max-width:1872px;margin:0 auto;padding:18.2px 52px;display:flex;align-items:center;gap:18.2px}
/* flex-shrink:0 evita que el flex aplaste el logo y lo deforme */
/* flex-shrink:0 evita que el flex aplaste el logo y lo deforme */
.mh-brand{display:flex;align-items:center;gap:14.3px;flex-shrink:0}
.mh-brand img{height:88.4px;width:auto}
/* margin-left:auto empuja los tres botones a la derecha */
.mh-header__cta{margin-left:auto;display:flex;align-items:center;gap:14.3px}
/* ---- selector de idioma ---- */
/* Banderas en SVG: los emoji de bandera (🇪🇸) no se renderizan en Windows */
.mh-flag{display:inline-block;width:28.6px;height:20.8px;border-radius:3.9px;background-size:cover;background-position:center;box-shadow:0 0 0 1.3px rgba(0,0,0,.15);flex-shrink:0}
.mh-flag--es{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23c60b1e'/%3E%3Crect y='0.5' width='3' height='1' fill='%23ffc400'/%3E%3C/svg%3E")}
.mh-flag--ca{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Crect width='9' height='6' fill='%23FCDD09'/%3E%3Cg fill='%23DA121A'%3E%3Crect y='0.667' width='9' height='0.667'/%3E%3Crect y='2' width='9' height='0.667'/%3E%3Crect y='3.333' width='9' height='0.667'/%3E%3Crect y='4.667' width='9' height='0.667'/%3E%3C/g%3E%3C/svg%3E")}
.mh-flag--en{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Crect width='30' height='20'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='30' height='20' fill='%2300247d'/%3E%3Cpath d='M0,0 L30,20 M30,0 L0,20' stroke='%23fff' stroke-width='4'/%3E%3Cpath d='M0,0 L30,20 M30,0 L0,20' stroke='%23cf142b' stroke-width='1.6'/%3E%3Cpath d='M15,0 V20 M0,10 H30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M15,0 V20 M0,10 H30' stroke='%23cf142b' stroke-width='3.2'/%3E%3C/g%3E%3C/svg%3E")}
.mh-flag--fr{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%230055A4'/%3E%3Crect x='1' width='1' height='2' fill='%23FFFFFF'/%3E%3Crect x='2' width='1' height='2' fill='%23EF4135'/%3E%3C/svg%3E")}
.mh-flag--it{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='1' height='2' fill='%23009246'/%3E%3Crect x='1' width='1' height='2' fill='%23FFFFFF'/%3E%3Crect x='2' width='1' height='2' fill='%23CE2B37'/%3E%3C/svg%3E")}
.mh-flag--de{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='.667' fill='%23000000'/%3E%3Crect y='.667' width='3' height='.667' fill='%23DD0000'/%3E%3Crect y='1.333' width='3' height='.667' fill='%23FFCE00'/%3E%3C/svg%3E")}
.mh-flag--pl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23FFFFFF'/%3E%3Crect y='1' width='3' height='1' fill='%23DC143C'/%3E%3C/svg%3E")}
.mh-flag--nl{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='2' fill='%23FFFFFF'/%3E%3Crect width='3' height='.667' fill='%23AE1C28'/%3E%3Crect y='1.333' width='3' height='.667' fill='%2321468B'/%3E%3C/svg%3E")}
.mh-flag--uk{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 2'%3E%3Crect width='3' height='1' fill='%23005BBB'/%3E%3Crect y='1' width='3' height='1' fill='%23FFD500'/%3E%3C/svg%3E")}
.mh-lang{position:relative}
.mh-lang__menu{position:absolute;top:calc(100% + 10.4px);right:0;min-width:221px;background:#fff;border-radius:15.6px;box-shadow:0 20.8px 44.2px -23.4px rgba(35,48,47,.55);padding:7.8px;display:none;flex-direction:column;gap:2.6px;z-index:60}
.mh-lang.is-open .mh-lang__menu{display:flex}
.mh-lang__menu a{display:flex;align-items:center;gap:11.7px;padding:11.7px 14.3px;border-radius:10.4px;font-size:18.85px;font-weight:600;color:var(--ink);white-space:nowrap}
.mh-lang__menu a:hover{background:var(--sea);color:#fff}
.mh-lang__menu a.is-active{background:var(--pool)}
/* ---- botón "Menú": abre el mismo desplegable lateral de siempre ---- */
.mh-menubtn{box-sizing:border-box;height:62.4px;padding:0 23.4px;border:1.95px solid var(--nav-tinta);border-radius:13px;
  background:transparent;font-family:'PT Sans',Arial,sans-serif;font-weight:700;font-size:22.1px;color:var(--nav-azul);
  display:flex;align-items:center;gap:14.3px;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease}
.mh-menubtn__ico{font-size:26px;line-height:1}
.mh-menubtn__ico--cerrar{display:none;font-size:22.1px}
.mh-menubtn:hover{background:var(--nav-azul);border-color:var(--nav-azul);color:#fff}
/* con el desplegable abierto el botón se marca y el icono pasa a aspa */
.mh-menubtn[aria-expanded="true"]{background:rgba(0,46,100,.08);border-color:rgba(0,46,100,.08);color:var(--nav-azul)}
.mh-menubtn[aria-expanded="true"] .mh-menubtn__ico--abrir{display:none}
.mh-menubtn[aria-expanded="true"] .mh-menubtn__ico--cerrar{display:inline}

/* ---- botones cuadrados: reservar e idioma ---- */
.mh-iconbtn{box-sizing:border-box;width:62.4px;height:62.4px;flex-shrink:0;border:1.95px solid var(--nav-tinta);
  border-radius:13px;background:transparent;display:flex;align-items:center;justify-content:center;gap:5.2px;
  cursor:pointer;color:var(--nav-azul);transition:background .16s ease,color .16s ease,border-color .16s ease}
/* el cuadrado de reservar es el único acento: naranja, el mismo del logotipo */
.mh-iconbtn--book{background:var(--terra);border-color:var(--terra);color:#002e64;margin-right:3.9px}
.mh-iconbtn--book svg{width:29.9px;height:29.9px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.mh-iconbtn--book:hover{background:var(--terra-dark);border-color:var(--terra-dark);color:#fff}
.mh-lang__btn{width:auto;padding:0 14.3px;font:700 16.9px 'PT Sans',Arial,sans-serif;color:var(--nav-azul)}
.mh-lang__btn:hover{background:var(--nav-azul);border-color:var(--nav-azul);color:#fff}
.mh-lang.is-open .mh-lang__btn{background:rgba(0,46,100,.08);border-color:rgba(0,46,100,.08);color:var(--nav-azul)}
.mh-lang__code{letter-spacing:.02em}

/* ---------- HERO: vídeo a todo el ancho + curva ---------- */
/* La sección mide una pantalla completa. Antes se dividía por el zoom del
   sitio (1.3) para compensarlo; ahora que el zoom ya no existe, 100vh/svh
   directo produce el mismo resultado (vh nunca se vio afectado por el zoom). */
/* Foto de respaldo (misma que og:image) detrás del vídeo: mientras este carga
   —o si falla— se ve una foto real en vez de un rectángulo de color liso. */
.mh-hero{--hero-h:100vh;position:relative;height:var(--hero-h);height:100svh;overflow:hidden;
  background:#cfe3e8 url("../images/og-camping-el-carlitos.jpg") center/cover no-repeat}
/* El vídeo llena el hueco como un "cover"; mientras carga se ve la foto de .mh-hero. */
.mh-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;pointer-events:none}
.mh-hero__tint{position:absolute;inset:0;background:linear-gradient(rgba(35,48,47,.42),rgba(35,48,47,.12) 55%,rgba(35,48,47,.3))}
.mh-hero__stack{position:absolute;left:0;right:0;top:32%;text-align:center;animation:mhFadeUp .9s .2s both}
/* clamp en vez de un tamaño fijo: con un tamaño fijo el titulo (una sola
   palabra sin espacios) se recortaba en anchos intermedios tipo tablet
   (aprox. 761-900px, incluye el iPad en vertical). El 10.7vw mantiene el
   ancho del texto por debajo del viewport en todo el rango, con margen. */
.mh-hero__word{font-family:'PT Sans',Arial,sans-serif;font-weight:800;font-size:clamp(44.8px,10.7vw,104.68px);line-height:1;color:#fff;text-shadow:0 5.2px 31.2px rgba(21,40,45,.45)}
.mh-hero__word span{color:var(--terra)}
.mh-hero__claim{font-family:'Caveat',cursive;font-size:36.4px;color:#fff;margin-top:10.4px;text-shadow:0 2.6px 15.6px rgba(21,40,45,.5)}
@keyframes mhFadeUp{from{opacity:0;transform:translateY(18.2px)}to{opacity:1;transform:none}}

/* buscador flotante en el centro del vídeo; oculto hasta que el vídeo termina.
   Se usa visibility (no display) para poder animar la aparición. */
.mh-hero__search{position:absolute;left:50%;top:58%;z-index:5;width:min(702px,calc(100% - 62.4px));
  transform:translate(-50%,calc(-50% + 40px));opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity 1.4s cubic-bezier(.16,1,.3,1),transform 1.4s cubic-bezier(.16,1,.3,1),visibility 1.4s}
.mh-hero__search.is-ready{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%)}
/* panel translúcido y sin bordes: deja ver el vídeo por detrás en vez de taparlo */
.mh-search{position:relative;display:flex;align-items:center;gap:7.8px;
  background:rgba(255,255,255,.8);backdrop-filter:blur(18.2px) saturate(1.15);
  border:none;border-radius:16.9px;padding:9.1px 10.4px;
  box-shadow:0 20.8px 46.8px -26px rgba(10,38,50,.55)}
.mh-field{flex:1;border:none;background:transparent;border-radius:11.7px;padding:7.8px 14.3px;cursor:pointer}
.mh-field span{display:block;font-size:12.35px;font-weight:700;letter-spacing:.13em;color:var(--ink-mute)}
.mh-field input,.mh-field select{border:none;outline:none;background:transparent;width:100%;padding:1.3px 0 0;font:600 19.5px 'PT Sans',Arial,sans-serif;color:var(--ink);appearance:none;cursor:pointer}
.mh-field__btn{border:none;outline:none;background:transparent;width:100%;text-align:left;padding:1.3px 0 0;
  font:600 19.5px 'PT Sans',Arial,sans-serif;color:var(--ink);cursor:pointer}
.mh-field__btn:empty::before,.mh-field__btn.is-empty{color:var(--ink-mute)}
.mh-field--personas{flex:0 0 128px;text-align:center}
.mh-field--personas select{padding-left:18px;padding-right:18px;text-align:center;text-align-last:center;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239aa5a3' stroke-width='2'/%3E%3C/svg%3E") no-repeat right center/12px 8px}
.mh-search__arrow{font-size:20.8px;color:#9aa5a3}
.mh-search__submit{background:var(--terra);color:#fff;border:none;border-radius:11.7px;padding:14.3px 26px;font-family:'PT Sans',Arial,sans-serif;font-weight:700;font-size:18.85px;cursor:pointer;box-shadow:0 7.8px 18.2px -7.8px rgba(236,126,40,.6);transition:background .18s ease,box-shadow .18s ease}
.mh-search__submit:hover{background:var(--sea);box-shadow:0 7.8px 18.2px -7.8px rgba(0,46,100,.6)}

/* ---- calendario propio del buscador (sustituye a <input type=date>
   para poder pintar de azul el rango de noches elegido).
   position:fixed (no absolute): el hero tiene overflow:hidden y el
   calendario necesita poder salir de esos limites; su posicion (top/left/
   width) la calcula el JS a partir del rectangulo real del buscador. */
.mh-cal{position:fixed;z-index:80;overflow-y:auto;
  background:#fff;border-radius:16.9px;box-shadow:0 26px 57.2px -26px rgba(10,38,50,.45);
  padding:18.2px 18.2px 15.6px;opacity:0;visibility:hidden;transform:translateY(-7.8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s}
.mh-cal.is-open{opacity:1;visibility:visible;transform:none}
.mh-cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.mh-cal__title{font:700 16.9px 'PT Sans',Arial,sans-serif;color:var(--sea);text-transform:capitalize}
.mh-cal__nav{border:none;background:var(--cream);color:var(--sea);width:31.2px;height:31.2px;border-radius:50%;
  font-size:18.2px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .15s ease}
.mh-cal__nav:hover{background:var(--sand)}
.mh-cal__nav:disabled{opacity:.3;cursor:default;background:transparent}
.mh-cal__weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2.6px;margin-bottom:3.9px}
.mh-cal__weekdays span{text-align:center;font-size:11.7px;font-weight:700;color:var(--ink-mute);text-transform:uppercase}
.mh-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:36.4px;gap:2.6px 0}
.mh-cal__day{border:none;background:transparent;color:var(--ink);font:600 14.3px 'PT Sans',Arial,sans-serif;
  cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center}
.mh-cal__day:disabled{color:#c7cdcc;cursor:default}
.mh-cal__day.is-today{font-weight:800;color:var(--terra)}
/* banda azul clara que conecta entrada y salida */
.mh-cal__day.is-in-range::before{content:"";position:absolute;inset:0 -1.3px;background:rgba(0,46,100,.12)}
.mh-cal__day.is-range-start::before{left:50%;border-radius:999px 0 0 999px}
.mh-cal__day.is-range-end::before{right:50%;border-radius:0 999px 999px 0}
/* circulo solido en los extremos del rango (entrada y salida) */
.mh-cal__day.is-range-start .mh-cal__day__num,.mh-cal__day.is-range-end .mh-cal__day__num{
  background:var(--sea);color:#fff;border-radius:50%}
.mh-cal__day__num{position:relative;z-index:1;width:31.2px;height:31.2px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.mh-cal__day:not(:disabled):hover .mh-cal__day__num{background:rgba(0,46,100,.16)}
.mh-cal__day.is-range-start:not(:disabled):hover .mh-cal__day__num,
.mh-cal__day.is-range-end:not(:disabled):hover .mh-cal__day__num{background:var(--sea)}
.mh-cal__hint{margin:11.7px 0 0;text-align:center;font-size:13px;color:var(--ink-mute)}

@media (max-width:620px){
  .mh-cal__grid{grid-auto-rows:39px}
}

/* ---------- PARED DE LISTONES + acordeón colgado del riel ---------- */
/* El padding tiene que ser multiplo exacto de 24.7px (el ciclo del patron
   de rayas de fondo): si no lo es, el borde de la seccion corta una raya
   a la mitad en vez de coincidir con el limite de una raya completa. */
.mh-wall{margin-top:72.8px;padding:74.1px 0 83.16px;background:repeating-linear-gradient(var(--wood-a) 0 22.1px,var(--wood-b) 22.1px 24.7px)}
.mh-rail{height:7.8px;background:#2a3b3a;border-radius:3.9px;margin-bottom:44.2px;box-shadow:0 3.9px 10.4px rgba(35,48,47,.2)}
.mh-wall__grid{display:grid;grid-template-columns:559px 1fr;gap:62.4px;align-items:center}
.mh-frame{background:#fff;padding:15.6px 15.6px 26px;border-radius:5.2px;box-shadow:0 23.4px 44.2px -23.4px rgba(35,48,47,.45);transform:rotate(-.7deg)}
.mh-frame img{height:429px;width:100%;object-fit:cover;transition:opacity .3s}
.mh-frame__cap{font-family:'Caveat',cursive;font-size:29.9px;text-align:center;margin-top:20.8px}
.mh-wall h2{font-size:clamp(1.385rem, 1.154rem + 0.92vw, 2rem);line-height:1.05;margin:10.4px 0 28.6px}
.mh-acc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15.6px}
.mh-acc__item{background:#fff;border-radius:15.6px;box-shadow:0 10.4px 26px -18.2px rgba(35,48,47,.5);transition:transform .2s}
.mh-acc__item.is-open{transform:translateY(2.6px)}
.mh-acc__head{width:100%;display:flex;align-items:center;gap:16.9px;padding:22.1px 26px;background:transparent;border:none;cursor:pointer;text-align:left;font:inherit}
.mh-acc__icon{font-size:27.3px}
.mh-acc__title{flex:1;font-family:'PT Sans',Arial,sans-serif;font-weight:700;font-size:26px}
.mh-acc__sign{font-size:26px;color:#a9b2b0}
.mh-acc__body{display:none;padding:0 26px 24.7px 70.2px}
.mh-acc__item.is-open .mh-acc__body{display:block}
.mh-acc__body p{margin:0;font-size:20.15px;line-height:1.65;color:#54615f;text-wrap:pretty}
.mh-acc__link{display:inline-block;margin-top:15.6px;font-weight:700;font-size:18.85px}

/* ---------- MOBIL-HOMES: hilera de casitas ---------- */
.mh-models{padding:166.4px 0}
.mh-models__head{max-width:806px;margin:0 auto 44.2px}
.mh-models__head h2{font-size:clamp(1.385rem, 1.154rem + 0.92vw, 2rem);line-height:1;margin:10.4px 0 13px}
.mh-included{background:#fff;border:1.3px dashed rgba(35,48,47,.2);border-radius:20.8px;padding:26px 31.2px;margin-bottom:49.4px}
.mh-included__title{margin:0 0 18.2px;text-align:center;font-size:14.3px;font-weight:700;letter-spacing:.16em;color:var(--ink-mute)}
.mh-included__row{display:flex;flex-wrap:wrap;gap:15.6px;justify-content:center}
.mh-included__item{display:flex;align-items:center;justify-content:center}
.mh-included__ico{width:49.4px;height:49.4px;border-radius:50%;display:grid;place-items:center;font-size:23.4px;transition:transform .2s}
.mh-included__item:hover .mh-included__ico{transform:scale(1.1)}

/* Filas de 3 con la última centrada, de 2 en 2 en pantallas medianas: sirve para cualquier número de modelos */
.mh-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:33.8px}
.mh-grid>.mh-card{flex:0 1 calc((100% - 67.6px)/3);min-width:0}
@media (max-width:1080px){.mh-grid>.mh-card{flex-basis:calc(50% - 16.9px)}}
/* display:flex + flex:1 en cada nivel para que las tarjetas se estiren a la
   altura de la fila y el boton quede siempre pegado abajo (margin-top:auto),
   aunque la descripcion de cada mobil-home tenga distinta longitud */
.mh-card{color:inherit;display:flex;flex-direction:column}
.mh-card__roof{height:44.2px;width:100%;background:var(--sea);clip-path:polygon(50% 0,100% 100%,0 100%);transition:background-color .2s}
.mh-card:hover .mh-card__roof{background:var(--terra)}
.mh-card__box{background:#fff;border-radius:0 0 20.8px 20.8px;box-shadow:var(--shadow-card);overflow:hidden;transition:box-shadow .2s,transform .2s;display:flex;flex-direction:column;flex:1}
.mh-card:hover .mh-card__box{box-shadow:0 28.6px 52px -23.4px rgba(35,48,47,.55);transform:translateY(-2.6px)}
.mh-card__media{position:relative;margin:13px 13px 0;border-radius:10.4px;overflow:hidden}
.mh-card__media img{height:296.4px;width:100%;object-fit:cover}
.mh-card__tag{position:absolute;left:13px;top:13px;background:#fff;border-radius:999px;padding:6.5px 15.6px;font-size:15.6px;font-weight:700;box-shadow:0 3.9px 10.4px rgba(0,0,0,.12)}
.mh-card__body{padding:20.8px 23.4px 26px;display:flex;flex-direction:column;flex:1}
.mh-card__body h3{font-size:31.2px;margin:0 0 9.1px}
.mh-card__body p{margin:0;font-size:18.85px;line-height:1.55;color:#66736f;text-wrap:pretty}
.mh-stats{display:flex;gap:33.8px;margin:19.5px 0 20.8px;text-align:center}
.mh-stats strong{display:block;font-family:'PT Sans',Arial,sans-serif;font-size:28.6px;line-height:1}
.mh-stats span{font-size:16.25px;color:var(--ink-mute)}
.mh-card__btn{display:block;text-align:center;background:var(--sea);color:#fff;border-radius:13px;padding:15.6px;font-family:'PT Sans',Arial,sans-serif;font-weight:700;font-size:20.15px;margin-top:auto;transition:background-color .2s}
.mh-card:hover .mh-card__btn{background:var(--terra)}
.mh-card__skirt{height:11.7px;background:#e7dfcd;margin:0 18.2px 18.2px;border-radius:3.9px}
/* se estira a la altura de la fila; el margen superior de 44.2px compensa el
   tejado de las tarjetas, así queda exactamente igual que su recuadro blanco */
.mh-compare{flex:0 0 100%;margin-top:44.2px;background:var(--sand);border:1.3px dashed rgba(35,48,47,.24);border-radius:20.8px;padding:36.4px;display:flex;flex-direction:column;align-items:center;gap:15.6px;justify-content:center;text-align:center}
.mh-compare h3{font-size:33.8px;line-height:1.1}
.mh-compare p{margin:0;font-size:19.5px;line-height:1.6;color:#66736f;max-width:44em}
.mh-compare button{align-self:center;background:#fff;border:1.95px solid var(--ink);border-radius:13px;padding:14.3px 26px;font-family:'PT Sans',Arial,sans-serif;font-weight:700;font-size:19.5px;cursor:pointer}
.mh-compare button:hover{background:var(--ink);color:#fff}
.mh-models__foot{text-align:center;margin-top:52px}
.mh-guarantee{margin:18.2px 0 0;font-size:18.2px;color:#5f6c6a}
.mh-guarantee b{color:#3f8f5f}

/* ---------- CAMINO DE 5 PASOS ---------- */
.mh-steps{padding:169px 0}
.mh-steps__head{text-align:center;margin-bottom:44.2px}
.mh-steps__head h2{font-size:clamp(1.385rem, 1.154rem + 0.92vw, 2rem);line-height:1}
.mh-steps__script{margin:5.2px 0 15.6px;font-family:'Caveat',cursive;font-size:37.7px;color:var(--terra)}
.mh-steps__head p.muted{margin:0 auto;max-width:780px;font-size:20.8px;line-height:1.6}
.mh-phase{display:flex;align-items:center;gap:18.2px;margin:0 0 26px}
.mh-phase--arrival{margin-top:44.2px}
.mh-phase__pill{border-radius:999px;padding:9.1px 23.4px;font-family:'PT Sans',Arial,sans-serif;font-weight:700;font-size:18.85px;color:#fff;background:var(--sea)}
.mh-phase--arrival .mh-phase__pill{background:var(--terra)}
.mh-phase__line{flex:1;height:0;border-top:2.6px dashed rgba(35,48,47,.22)}
.mh-timeline{display:flex;flex-direction:column;gap:23.4px}
.mh-step{display:flex;gap:23.4px;align-items:flex-start}
.mh-step__num{flex:none;width:62.4px;height:62.4px;border-radius:15.6px;display:grid;place-items:center;font-family:'PT Sans',Arial,sans-serif;font-weight:800;font-size:28.6px;background:#e2eef2;color:var(--sea)}
.mh-step--arrival .mh-step__num{background:#f6e6d6;color:var(--terra)}
.mh-step__card{flex:1;background:#fff;border-radius:20.8px;padding:26px;display:grid;grid-template-columns:1fr 260px;gap:26px;align-items:center;box-shadow:var(--shadow-soft)}
.mh-step__card--reverse{grid-template-columns:260px 1fr}
.mh-step__card--wide{display:block;padding:28.6px}
.mh-step__card h3{font-size:29.9px;margin:0 0 9.1px}
.mh-step__card p{margin:0;font-size:19.5px;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
/* "mejor precio garantizado": chip en línea junto al texto, con borde azul
   y sin relleno, para que destaque sin parecer una medalla ni una pastilla maciza */
.mh-badge-garantia{display:inline-flex;align-items:center;gap:7.8px;vertical-align:middle;
  border:1.95px solid var(--sea);color:var(--sea);border-radius:999px;padding:5.2px 16.9px 5.2px 14.3px;
  font-family:'PT Sans',Arial,sans-serif;font-weight:700;font-size:17.55px}
.mh-step__media img{height:145.6px;width:100%;object-fit:cover;border-radius:13px}
.mh-polaroids{display:grid;grid-template-columns:repeat(3,1fr);gap:28.6px;margin-top:23.4px}
.mh-polaroid{background:#fff;padding:11.7px 11.7px 0;border-radius:3.9px;box-shadow:0 13px 28.6px -18.2px rgba(35,48,47,.55)}
.mh-polaroid:nth-child(1){transform:rotate(-2deg)}
.mh-polaroid:nth-child(2){transform:rotate(1.5deg);cursor:pointer}
.mh-polaroid:nth-child(3){transform:rotate(-1deg)}
/* pila de fotos que se turnan dentro de la polaroid: todas ocupan el mismo
   hueco, solo la .is-active es opaca */
.mh-polaroid__stack{position:relative;height:171.6px;overflow:hidden}
.mh-polaroid__stack img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease}
.mh-polaroid__stack img.is-active{opacity:1}
@media (prefers-reduced-motion:reduce){.mh-polaroid__stack img{transition:none}}
.mh-polaroid__cap{font-family:'Caveat',cursive;font-size:27.3px;text-align:center;padding:10.4px 0 15.6px}
.mh-info-bar{margin-top:33.8px;background:var(--sand);border:1.3px dashed rgba(35,48,47,.2);border-radius:18.2px;padding:20.8px 26px}
.mh-info-bar p{margin:0;font-size:18.85px;line-height:1.6;color:var(--ink-soft);text-wrap:pretty}
.mh-steps__actions{display:flex;gap:18.2px;justify-content:center;margin-top:33.8px}

/* ---------- FOOTER: parcela de noche ---------- */
.mh-footer{background:var(--night);color:#e9eeec;padding:75.4px 0 33.8px}
.mh-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:52px}
.mh-footer p{margin:20.8px 0 0;font-size:18.85px;line-height:1.65;color:rgba(233,238,236,.62);max-width:390px;text-wrap:pretty}
.mh-footer h4{margin:0 0 18.2px;font-size:22.1px}
.mh-footer__links{display:flex;flex-direction:column;gap:11.7px;font-size:18.85px}
.mh-footer__links a,.mh-footer__links span{color:rgba(233,238,236,.75)}
.mh-footer__links a:hover{color:#fff}
.mh-social{display:flex;gap:13px;margin-top:23.4px}
.mh-social a{width:46.8px;height:46.8px;border-radius:50%;border:1.3px solid rgba(233,238,236,.3);display:grid;place-items:center;color:#e9eeec}
.mh-social a:hover{background:rgba(233,238,236,.12);color:#fff}
.mh-social svg{width:22.1px;height:22.1px;fill:currentColor}
.mh-footer__bottom{margin-top:44.2px;padding-top:23.4px;border-top:1.3px solid rgba(233,238,236,.14);display:flex;justify-content:space-between;font-size:16.9px;color:rgba(233,238,236,.55)}

/* ---------- flotantes ---------- */
.mh-whatsapp{position:fixed;right:26px;bottom:26px;z-index:50;width:117px;height:117px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 13px 28.6px -10.4px rgba(0,0,0,.4)}
.mh-whatsapp svg{width:59.8px;height:59.8px;fill:currentColor}
.mh-totop{position:fixed;right:33.8px;bottom:158.6px;z-index:50;width:52px;height:52px;border-radius:50%;border:none;background:#fff;color:var(--ink);box-shadow:0 10.4px 23.4px -10.4px rgba(0,0,0,.35);cursor:pointer;font-size:22.1px}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(23.4px);transition:opacity .6s,transform .6s}
.reveal.is-in{opacity:1;transform:none}
html:not(.js) .reveal{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .mh-wall__grid{grid-template-columns:1fr;gap:36.4px}
  .mh-frame{transform:none}
  .mh-footer__grid{grid-template-columns:1fr 1fr;gap:36.4px}
}
@media (max-width:760px){
  /* .wrap ya usa padding-inline:var(--content-padding), fluido, sin necesidad
     de override aquí */
  /* la cabecera móvil va justa: se recorta el relleno, la etiqueta "ES" y el
     texto "Menú" para que el logo quepa entero, sin deformarse */
  .mh-header__inner{padding:12.32px 20.16px;gap:11.2px}
  .mh-brand img{height:58.24px}
  .mh-menubtn{height:49.28px;padding:0 15.68px;font-size:16.8px;gap:8.96px}
  .mh-iconbtn{width:49.28px;height:49.28px}
  .mh-lang__btn{padding:0 10.08px;font-size:14px}
  /* Ya no hace falta redeclarar --hero-h en móvil: sin zoom, 100vh vale igual en todos los tamaños */
  /* .mh-hero__word ya no se redeclara aquí: el clamp() de la regla base cubre el móvil */
  .mh-hero__claim{font-size:24.64px}
  .mh-hero__search{width:calc(100% - 35.84px);top:60%}
  .mh-search{flex-wrap:wrap;gap:11.2px;padding:13.44px}
  .mh-field{flex:1 1 100%}
  .mh-field--personas{flex:0 0 116px;padding-left:10px;padding-right:6px}
  .mh-search__arrow{display:none}
  .mh-search__submit{flex:1 1 0;min-width:0;padding-left:12px;padding-right:12px}
  /* En pantallas pequeñas el FAB de WhatsApp reduce su tamaño, igual que
     .whatsapp-float en style.css, para no resultar desproporcionado. */
  .mh-whatsapp{width:78.4px;height:78.4px;right:15.68px;bottom:15.68px}
  .mh-whatsapp svg{width:40.32px;height:40.32px}
  .mh-grid>.mh-card{flex-basis:100%}
  .mh-step__card,.mh-step__card--reverse{grid-template-columns:1fr}
  .mh-step__card--reverse .mh-step__media{order:2}
  .mh-polaroids{grid-template-columns:1fr}
  .mh-footer__grid{grid-template-columns:1fr}
  .mh-footer__bottom{flex-direction:column;gap:8.96px}
  .mh-steps__actions{flex-direction:column}
  .btn{width:100%;text-align:center}
}
/* En móviles estrechos la fila logo + idioma + Menú + Reservar no cabe:
   se aprietan relleno y separaciones en vez de esconder ninguna acción. */
@media (max-width:520px){
  .mh-header__inner{padding:10.08px 13.44px;gap:8.96px}
  .mh-brand img{height:51.52px}
  .mh-header__cta{gap:7.84px}
  /* en pantalla estrecha el botón se queda solo con el icono */
  .mh-menubtn{height:47.04px;padding:0 13.44px;gap:0}
  .mh-menubtn__txt{display:none}
  .mh-iconbtn{width:47.04px;height:47.04px}
  .mh-lang__code{display:none}
  .mh-lang__btn{width:47.04px;padding:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- COMPARADOR DE MOBIL-HOMES ---------- */
/* La home no carga style.css, asi que el comparador lleva aqui sus estilos */
.compare-modal{position:fixed;inset:0;z-index:300;background:rgba(12,26,38,.72);backdrop-filter:blur(3.9px);
  display:none;align-items:center;justify-content:center;padding:31.2px}
.compare-modal.is-open{display:flex}
.compare-modal-inner{position:relative;width:100%;max-width:1625px;max-height:86vh;overflow-y:auto;
  background:var(--cream);border-radius:26px;padding:39px 33.8px 31.2px;box-shadow:0 39px 104px rgba(0,0,0,.5)}
.compare-modal-inner h3{margin:0 0 26px;text-align:center;font-size:39px;color:var(--sea)}
.compare-modal-close{position:absolute;top:18.2px;right:18.2px;z-index:4;width:52px;height:52px;border:none;
  border-radius:50%;background:rgba(0,46,100,.1);color:var(--sea);font-size:22.1px;cursor:pointer;
  display:grid;place-items:center;transition:background .2s ease}
.compare-modal-close:hover{background:var(--terra);color:#002e64}
.compare-table-wrap{overflow-x:auto}
.compare-table{width:100%;border-collapse:collapse;font-size:18.2px}
.compare-table th,.compare-table td{padding:13px 15.6px;text-align:center;
  border-bottom:1.3px solid rgba(35,48,47,.12)}
/* solo la cabecera y la columna de nombres no parten: el resto envuelve
   para que las siete columnas quepan sin scroll en escritorio */
.compare-table th,.compare-table td:first-child{white-space:nowrap}
.compare-table td{min-width:119.6px;line-height:1.35}
.compare-table thead th{position:sticky;top:0;background:var(--sand);font-family:'PT Sans',Arial,sans-serif;
  font-size:16.9px;letter-spacing:.03em;color:var(--sea)}
.compare-table td:first-child,.compare-table th:first-child{position:sticky;left:0;background:var(--cream);
  font-weight:700;color:var(--ink)}
.compare-table thead th:first-child{background:var(--sand)}
.compare-table tbody tr:hover td{background:var(--pool)}
.compare-table tbody tr:hover td:first-child{background:var(--pool)}
.compare-nota{margin:20.8px 0 0;font-size:17.55px;line-height:1.6;color:var(--ink-mute);text-align:center}
@media (max-width:760px){
  .compare-modal{padding:13.44px}
  .compare-modal-inner{padding:26.88px 15.68px 20.16px;border-radius:17.92px}
  .compare-modal-inner h3{font-size:26.88px}
  .compare-table{font-size:15.12px}
  .compare-table th,.compare-table td{padding:10.08px 12.32px}
}

/* ---------- Tarjeta de un modelo sin foto todavia ---------- */
.mh-card__media--sinfoto{display:grid;place-items:center;height:296.4px;margin:13px 13px 0;border-radius:10.4px;
  background:repeating-linear-gradient(45deg,#f1ece1 0 13px,#ece6d9 13px 26px);
  border:2.6px dashed rgba(35,48,47,.22);font-size:44.2px}
.mh-card--pendiente .mh-stats div:last-child span{font-size:14.3px;letter-spacing:0}

/* Cabecera sin vídeo en móvil: queda la foto de fondo de .mh-hero */
@media (max-width:760px){.mh-hero__video{display:none}}

/* Enlace para saltar al contenido con el teclado */
.lp-skip{position:absolute;left:16px;top:-64px;z-index:200;background:#002e64;color:#fff;padding:12px 16px;border-radius:12px;font-weight:700;text-decoration:none;transition:top .7s cubic-bezier(.32,.72,0,1)}
.lp-skip:focus{top:16px}

/* Moviles bajos: el buscador no tapa el lema */
@media (max-width:760px) and (max-height:700px){.mh-hero__search{top:67%}}

/* Calendario: dias abiertos del camping */
.mh-cal__day.is-abierto:not(.is-range-start):not(.is-range-end) .mh-cal__day__num{background:#d6e6fa}
.mh-cal__day.is-abierto:disabled:not(.is-range-start):not(.is-range-end) .mh-cal__day__num{background:#eef4fc}
.mh-cal__day.is-abierto:not(:disabled):not(.is-range-start):not(.is-range-end):hover .mh-cal__day__num{background:#b9d3f5}
.mh-cal__leyenda{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px 0 0;font-size:13px;color:var(--ink-mute)}
.mh-cal__leyenda[hidden]{display:none}
.mh-cal__muestra{width:14px;height:14px;border-radius:50%;background:#e2e5e4}
.mh-cal__muestra--abierto{background:#d6e6fa}
.mh-cal__muestra:not(:first-child){margin-left:12px}

/* Boton del video de portada (solo ordenador: en movil no hay video) */
.mh-hero__toggle{position:absolute;left:24px;bottom:150px;z-index:6;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(0,46,100,.72);color:#fff;cursor:pointer;transition:background .15s ease}
.mh-hero__toggle[hidden]{display:none}
.mh-hero__toggle:hover{background:var(--terra)}
.mh-hero__toggle:focus-visible{outline:3px solid #fff;outline-offset:3px}
.mh-hero__ico{width:22px;height:22px;fill:currentColor;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mh-hero__ico--play,.mh-hero__toggle[aria-pressed="true"] .mh-hero__ico--pause{display:none}
.mh-hero__toggle[aria-pressed="true"] .mh-hero__ico--play{display:block}
@media (max-width:760px){.mh-hero__toggle{display:none}}

/* Calendario: textos con mas contraste */
.mh-cal__weekdays span,.mh-cal__hint,.mh-cal__leyenda{color:#566260}
.mh-cal__day:disabled{color:#87918f}
.mh-cal__day.is-abierto:disabled{color:#6b7674}