/* Laumar Premium Host Family — propuesta de rediseño (T356–T359), 2026-08-25 */

:root {
  --blanco: #ffffff;
  --marfil: #faf7f1;
  --marfil-2: #f3ede1;
  --tinta: #1c1c1a;
  --tinta-suave: #4a4842;
  --gris: #756f65;
  --linea: #e6dfd0;
  --oro: #8a6a3a; /* oscurecido a propósito: ratio ~5:1 sobre blanco/marfil, cumple WCAG AA en texto pequeño */
  --oro-suave: #c9a877; /* solo para uso decorativo sobre fondos oscuros o elementos grandes, nunca como texto pequeño sobre claro */
  --exito: #3f6b4f;
  --font-serif: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --header-h: 124px;
  --radius: 2px;
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--tinta);
  background: var(--blanco);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-serif); font-weight: 600; line-height: 1.15;
  margin: 0 0 0.5em; color: var(--tinta); text-wrap: balance; hyphens: none;
}
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
p { margin: 0 0 1em; color: var(--tinta-suave); text-wrap: pretty; }
li, dd, summary, figcaption { text-wrap: pretty; }
.nowrap { white-space: nowrap; }

a { color: inherit; }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

.kicker {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oro);
  font-weight: 600;
  margin-bottom: 0.9em;
}

.section { padding: clamp(56px, 9vw, 108px) 0; }
.section--marfil { background: var(--marfil); }
.section-head { max-width: 720px; margin: 0 0 clamp(28px, 4vw, 44px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* Accesibilidad: foco visible */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--oro);
  outline-offset: 2px;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--tinta); color: var(--blanco);
  padding: 12px 20px; z-index: 1000; font-size: 0.9rem;
}
.skip-link:focus { left: 12px; top: 12px; }

/* Scroll offset para anclas bajo cabecera fija */
section[id] { scroll-margin-top: calc(var(--header-h) + 14px); }

/* ---------- Cabecera ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 500;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
  height: var(--header-h);
}
.nav-grid {
  position: relative;
  max-width: 1200px; margin: 0 auto; padding: 0 clamp(22px, 2.5vw, 36px);
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 2.5vw, 42px);
}
.nav-side {
  min-width: 0; width: min(100%, 304px); display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.nav-side > li { min-width: 0; text-align: center; }
.nav-side--left { justify-self: end; }
.nav-side--right { justify-self: start; }
.nav-menu-item { display: none; }
.nav-link {
  font-size: 0.7rem; letter-spacing: 0.17em; text-transform: uppercase; font-weight: 600;
  text-decoration: none; color: var(--tinta-suave); white-space: nowrap;
  padding: 6px 2px; border-bottom: 1px solid transparent;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--oro); border-bottom-color: var(--oro); }
.nav-cta {
  font-weight: 700; color: var(--tinta); border-bottom-color: var(--tinta);
}
.nav-logo { display: flex; justify-content: center; align-items: center; justify-self: center; }
.nav-logo img { height: 104px; width: auto; }
.nav-logo a { display: flex; align-items: center; justify-content: center; }

.nav-menu-btn { display: none; }

@media (max-width: 1180px) and (min-width: 701px) {
  :root { --header-h: 108px; }
  .nav-grid { padding-left: 20px; padding-right: 20px; gap: 18px; }
  .nav-side { width: min(100%, 262px); }
  .nav-link { font-size: 0.64rem; letter-spacing: 0.12em; }
  .nav-logo img { height: 88px; }
}

@media (max-width: 700px) {
  :root { --header-h: 88px; }
  /* T368-B: .nav-side--left sale del flujo de la rejilla al llevar
     display:none, así que sin columna explícita el navegador recoloca
     nav-logo y nav-right-wrap en las columnas 1 y 2 (descentrando el
     logo). Se fija la columna de cada uno para que la rejilla simétrica
     1fr/auto/1fr centre el logo de verdad, sea cual sea el contenido
     oculto. gap/padding recortados respecto al valor base (28px/22px)
     el mínimo imprescindible para que el botón de menú y el selector de
     idiomas quepan uno junto al otro sin solaparse, verificado con
     métricas reales de la fuente Inter (no una aproximación a mano) en
     los 7 idiomas a 390 y 360 px — ver INFORME_FINAL de T368-B. */
  .nav-grid { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 6px; padding-left: 10px; padding-right: 10px; }
  .nav-side--left { display: none; }
  .nav-logo { grid-column: 2; }
  .nav-side--right > li:not(.nav-menu-item) { display: none; }
  .nav-side--right { display: flex; justify-content: flex-end; justify-self: end; width: auto; }
  .nav-menu-item { display: block; }
  .nav-menu-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: none; border: 1px solid var(--linea); border-radius: var(--radius);
    padding: 6px 7px; font-family: var(--font-sans); font-size: 0.58rem;
    letter-spacing: 0.01em; text-transform: uppercase; font-weight: 600; cursor: pointer;
  }
  .nav-logo img { height: 66px; }
}

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0 0; background: var(--blanco); z-index: 490;
  display: none; overflow-y: auto; padding: 28px clamp(20px, 6vw, 48px) 48px;
}
.mobile-menu.is-open { display: block; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu li { border-bottom: 1px solid var(--linea); }
.mobile-menu a {
  display: block; padding: 18px 4px; text-decoration: none; font-family: var(--font-serif);
  font-size: 1.3rem; color: var(--tinta);
}
.mobile-menu .nav-cta-mobile { margin-top: 24px; display: inline-block; }

/* ---------- Selector de idiomas visible en cabecera (T366, movido al extremo derecho en T368) ----------
   Vive dentro de un envoltorio (.nav-right-wrap) que sustituye a la <ul>
   nav-side--right como hijo directo de .nav-grid, para no romper la rejilla
   de 3 columnas ni el centrado del logotipo: .nav-grid sigue teniendo
   exactamente 3 hijos directos (nav-side--left, nav-logo, nav-right-wrap),
   y los dos grupos de navegación (izquierda y derecha) conservan
   exactamente 3 enlaces cada uno, sin tocar. Dentro del envoltorio, el
   selector va DESPUÉS del grupo Colegios·Admisión·Contacto (más cerca del
   borde de la ventana), tal y como pidió José. */
.nav-right-wrap {
  display: flex; align-items: center; gap: clamp(8px, 1.2vw, 18px);
  justify-self: start; min-width: 0;
}

.lang-switch { position: relative; flex-shrink: 0; }
.lang-switch summary {
  display: flex; align-items: center; gap: 5px; cursor: pointer; list-style: none;
  padding: 6px 10px; border: 1px solid var(--linea); border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--tinta-suave); background: var(--blanco); user-select: none;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover { border-color: var(--oro); color: var(--oro); }
.lang-switch[open] summary { border-color: var(--oro); color: var(--oro); }
.lang-switch-caret {
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid currentColor; transition: transform 160ms ease; flex-shrink: 0;
}
.lang-switch[open] .lang-switch-caret { transform: rotate(180deg); }

/* El disparador vive ahora cerca del borde derecho de la ventana: el
   desplegable se abre hacia la izquierda (borde derecho alineado con el
   disparador) para no salirse nunca de pantalla. */
.lang-switch-menu {
  position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 600;
  min-width: 178px; margin: 0; padding: 8px 0; list-style: none;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radius);
}
.lang-switch-menu li { border-bottom: none; }
.lang-switch-menu a, .lang-switch-menu span {
  display: block; padding: 8px 16px; font-family: var(--font-sans); font-size: 0.78rem;
  letter-spacing: 0.02em; text-transform: none; font-weight: 500; color: var(--tinta-suave); text-decoration: none;
}
.lang-switch-menu a:hover, .lang-switch-menu a:focus-visible { color: var(--oro); background: var(--marfil); }
.lang-switch-menu span[aria-current] { color: var(--oro); font-weight: 700; }

@media (max-width: 1180px) and (min-width: 701px) {
  .lang-switch summary { padding: 5px 8px; font-size: 0.62rem; gap: 4px; }
}

@media (max-width: 700px) {
  /* A este ancho, nav-side--right ya solo muestra el botón de menú (el resto
     de sus enlaces se ocultan con una regla existente). El envoltorio se fija
     en la columna 3 explícita (ver arriba) y se ancla al borde derecho de la
     ventana (igual que antes lo hacía nav-side--right en solitario), con el
     selector como último elemento, junto al botón, sin solapar el logotipo.
     Botón y selector se compactaron (T368-B) lo mínimo imprescindible,
     verificado con métricas reales de fuente en los 7 idiomas: el peor caso
     (francés, "Ouvrir le menu") deja un margen positivo de ≈8px incluso a
     360px de ancho. */
  .nav-right-wrap { grid-column: 3; justify-self: end; gap: 3px; }
  .lang-switch summary { padding: 3px 4px; font-size: 0.5rem; letter-spacing: 0.02em; gap: 0; }
  .lang-switch-caret { display: none; }
  .lang-switch-menu { min-width: 168px; }
}

/* ---------- Hero: fotografía real a sangre completa y aval editorial ---------- */
.hero {
  position: relative; margin-top: var(--header-h);
  /* Encuadre validado por Jose: Montgo completo, cielo moderado y comienzo
     del texto inferior visible en la primera pantalla. */
  height: min(66svh, 720px);
  min-height: 620px;
  max-height: 720px;
  display: flex; align-items: flex-end; justify-content: center;
  color: var(--blanco);
  overflow: hidden;
}
.hero picture, .hero img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; z-index: 0;
}
/* El titular se presenta después de la fotografía, sobre fondo blanco. */
.hero-title {
  position: static;
  max-width: none; margin: 0 0 16px; padding: 0;
  text-align: center;
  color: var(--tinta);
  font-size: clamp(2.2rem, 3.7vw, 3.5rem);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-shadow: none; text-wrap: nowrap;
}

@media (max-width: 700px) {
  .hero { height: min(68svh, 620px); min-height: 480px; }
  .hero picture, .hero img { object-position: center 50%; }
  .hero-title {
    max-width: none;
    color: var(--tinta);
    font-size: clamp(2.15rem, 11vw, 3.3rem);
    text-shadow: none; text-wrap: balance;
  }
}

/* Bloque blanco compacto justo debajo del hero: explicación corta sin CTA prematura */
.hero-intro { padding: clamp(32px, 5vw, 56px) 0; background: var(--blanco); text-align: center; }
.hero-intro-inner { max-width: 980px; margin: 0 auto; }
.hero-intro p {
  font-family: var(--font-serif); font-size: clamp(1.15rem, 2vw, 1.42rem); font-weight: 500;
  color: var(--tinta); line-height: 1.4; max-width: 920px; margin: 0 auto;
}

.btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: 0.92rem;
  padding: 14px 26px; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer;
  font-family: var(--font-sans); letter-spacing: 0.02em;
}
.btn--primario { background: var(--blanco); color: var(--tinta); }
.btn--primario:hover { background: var(--oro-suave); }
.btn--secundario { background: transparent; color: var(--blanco); border-color: rgba(255,255,255,0.7); }
.btn--secundario:hover { border-color: var(--blanco); }
.btn--oscuro { background: var(--tinta); color: var(--blanco); }
.btn--oscuro:hover { background: var(--oro); }
.btn--fantasma { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.btn--fantasma:hover { border-color: var(--oro); color: var(--oro); }

/* ---------- Franja de confianza: banda clara, sin caja oscura ---------- */
.trust-strip { background: var(--marfil); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 34px 0; }
.trust-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; text-align: center;
}
.trust-grid dt { font-family: var(--font-serif); font-size: 1.5rem; color: var(--oro); margin-bottom: 4px; }
.trust-grid dd { margin: 0; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--tinta-suave); }
@media (max-width: 800px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); text-align: left; }
}

/* ---------- Familia / anfitriones ---------- */
.familia-grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center;
}
.familia-foto { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/4; }
.familia-foto img { width: 100%; height: 100%; object-fit: cover; }
.familia-lista { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 10px; }
.familia-lista li { padding-left: 1.4em; position: relative; color: var(--tinta-suave); }
.familia-lista li::before { content: "—"; position: absolute; left: 0; color: var(--oro); }
@media (max-width: 820px) {
  .familia-grid { grid-template-columns: 1fr; }
  .familia-foto { max-width: 380px; margin: 0 auto; }
}

/* ---------- Cuidado y acompañamiento: secuencia editorial, sin tarjetas ---------- */
.cuidado-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 48px); }
.cuidado-card { border-top: 2px solid var(--oro); padding-top: 18px; }
.cuidado-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.cuidado-card p { font-size: 0.94rem; margin-bottom: 0; }
@media (max-width: 900px) { .cuidado-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .cuidado-grid { grid-template-columns: 1fr; } }

/* ---------- Galería suites: bloques grandes, sin caja ---------- */
.galeria-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 32px); }
.galeria-grid figure {
  margin: 0; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.galeria-grid img {
  width: 100%; height: auto; flex: 0 0 auto;
  object-fit: cover; aspect-ratio: 3/2; border-radius: var(--radius);
}
.galeria-grid figcaption {
  font-family: var(--font-serif); font-style: italic; font-size: 0.98rem; color: var(--tinta-suave);
  margin: 0; line-height: 1.35;
}
@media (max-width: 640px) {
  .galeria-grid { grid-template-columns: 1fr; gap: 28px; }
  .galeria-grid img { aspect-ratio: 4/3; }
}

/* Franja de especificaciones: una sola línea editorial, no una lista de catálogo */
.specs-franja {
  margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--linea);
  font-size: 0.92rem; color: var(--tinta-suave); letter-spacing: 0.01em;
}

/* ---------- Servicios y comodidades: bloque principal de valor ---------- */
.servicios-section { background: #1b1b19; color: var(--blanco); }
.servicios-head { max-width: 820px; }
.servicios-head h2 { color: var(--blanco); max-width: 22ch; }
.servicios-head p { color: rgba(255,255,255,0.72); max-width: 66ch; }
.servicios-section .kicker { color: var(--oro-suave); }
.servicios-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.servicio-item {
  min-height: 236px; padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(201,168,119,0.38); background: rgba(255,255,255,0.035);
}
.servicio-icono {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px;
  border: 1px solid rgba(201,168,119,0.68); border-radius: 50%; color: var(--oro-suave);
}
.servicio-icono svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.servicio-item h3 { color: var(--blanco); font-size: clamp(1.3rem, 2.2vw, 1.65rem); margin-bottom: 9px; }
.servicio-item p { color: rgba(255,255,255,0.7); font-size: 0.92rem; margin: 0; }
.servicios-nota {
  max-width: 760px; margin: clamp(30px, 5vw, 54px) auto 0; padding-top: 24px;
  border-top: 1px solid rgba(201,168,119,0.44); color: rgba(255,255,255,0.78);
  font-family: var(--font-serif); font-size: 1.18rem; text-align: center;
}
@media (max-width: 860px) { .servicios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .servicios-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- Vida en Laumar ---------- */
.vida-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.vida-foto-perros { overflow: hidden; border-radius: var(--radius); }
.vida-grid img {
  border-radius: var(--radius); width: 100%; height: auto;
  aspect-ratio: auto; object-fit: contain;
}
@media (max-width: 820px) { .vida-grid { grid-template-columns: 1fr; } }

/* Fotografías reales de convivencia: una imagen narrativa y tres detalles */
.vida-real {
  margin-top: clamp(48px, 7vw, 82px); padding-top: clamp(34px, 5vw, 52px);
  border-top: 1px solid var(--linea);
}
.vida-real-head { max-width: 760px; margin: 0 0 clamp(26px, 4vw, 42px); }
.vida-real-head h3 { font-size: clamp(1.75rem, 3vw, 2.4rem); }
.vida-real-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 26px);
}
.vida-real-grid figure { margin: 0; min-width: 0; }
.vida-real-grid img {
  width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover;
  border-radius: var(--radius);
}
.vida-real-grid figcaption {
  margin-top: 10px; color: var(--tinta-suave);
  font-family: var(--font-serif); font-size: 0.98rem; font-style: italic;
}
.vida-real-principal { grid-column: 1 / -1; }
.vida-real-grid .vida-real-principal img { aspect-ratio: 16/9; object-position: center 48%; }
.vida-real-grid--temporal { max-width: 720px; }
.vida-real-grid--temporal .vida-real-principal img { aspect-ratio: 4/3; object-position: center 72%; }
.vida-real-grid figure:nth-child(2) img { object-position: center 58%; }
.vida-real-grid figure:nth-child(3) img { object-position: center 48%; }
.vida-real-grid figure:nth-child(4) img { object-position: center 72%; }
@media (max-width: 760px) {
  .vida-real-grid { grid-template-columns: 1fr; }
  .vida-real-principal { grid-column: auto; }
  .vida-real-grid .vida-real-principal img { aspect-ratio: 4/3; }
}

/* ---------- Colegios ---------- */
.colegios-head { max-width: 760px; }
.colegios-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 38px);
}
.colegio-card {
  display: flex; flex-direction: column; min-height: 390px;
  border: 1px solid var(--linea); border-top: 3px solid var(--oro);
  background: var(--marfil); padding: clamp(28px, 4vw, 42px);
}
.colegio-card h3 { margin-bottom: 8px; font-size: clamp(1.45rem, 2.2vw, 1.85rem); }
.colegio-card .distancia {
  color: var(--oro); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px;
}
.colegio-sub { color: var(--gris); font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase; margin-bottom: 20px; }
.colegio-descripcion { max-width: 52ch; margin-bottom: 24px; line-height: 1.7; }
.colegio-card a.enlace-oficial {
  width: fit-content; margin-top: auto; padding-bottom: 3px;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid var(--tinta);
}
.ubicacion-resumen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(44px, 7vw, 76px); padding: 26px 0;
  border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
}
.ubicacion-item { padding: 0 clamp(16px, 3vw, 34px); }
.ubicacion-item + .ubicacion-item { border-left: 1px solid var(--linea); }
.ubicacion-item span,
.ubicacion-item strong { display: block; }
.ubicacion-item span { margin-bottom: 7px; color: var(--gris); font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase; }
.ubicacion-item strong { color: var(--tinta); font-family: var(--font-serif); font-size: 1.18rem; font-weight: 600; }
.disclaimer-colegios { max-width: 860px; margin: 22px auto 0; font-size: 0.8rem; line-height: 1.6; color: var(--gris); text-align: center; }
@media (max-width: 700px) {
  .colegios-grid { grid-template-columns: 1fr; gap: 40px; }
  .colegio-card { min-height: 0; }
  .colegio-card a.enlace-oficial { margin-top: 4px; }
  .ubicacion-resumen { grid-template-columns: 1fr; padding: 0; }
  .ubicacion-item { padding: 18px 4px; }
  .ubicacion-item + .ubicacion-item { border-left: 0; border-top: 1px solid var(--linea); }
  .disclaimer-colegios { text-align: left; }
}

/* ---------- Todo incluido: lista tranquila, sin iconos ni rejilla densa ---------- */
.incluye-lista { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.incluye-lista li { break-inside: avoid; padding: 7px 0; font-size: 0.98rem; color: var(--tinta-suave); }
@media (max-width: 600px) { .incluye-lista { columns: 1; } }
.precio-caja {
  margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--linea);
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.precio-caja p { color: var(--tinta-suave); margin: 0; max-width: 46ch; }

/* ---------- Admisión ---------- */
.pasos-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: paso; }
.pasos-lista li { counter-increment: paso; border-top: 2px solid var(--oro); padding-top: 14px; }
.pasos-lista li::before {
  content: "0" counter(paso); display: block; font-family: var(--font-serif); font-size: 1.8rem; color: var(--oro); margin-bottom: 6px;
}
@media (max-width: 800px) { .pasos-lista { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pasos-lista { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--linea); }
.faq-item summary {
  cursor: pointer; padding: 18px 4px; font-family: var(--font-serif); font-size: 1.12rem; font-weight: 600;
  list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-sans); font-size: 1.4rem; color: var(--oro); flex-shrink: 0; }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding-bottom: 18px; }

/* ---------- Formulario ---------- */
.contacto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); }
@media (max-width: 900px) { .contacto-grid { grid-template-columns: 1fr; } }
.campo { margin-bottom: 18px; }
.campo label { display: block; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; color: var(--tinta-suave); }
.campo input, .campo select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radius);
  font-family: var(--font-sans); font-size: 0.96rem; background: var(--blanco); color: var(--tinta);
}
.campo .opcional { font-weight: 400; text-transform: none; color: var(--gris); }
.form-privacidad { font-size: 0.82rem; color: var(--gris); display: flex; gap: 10px; align-items: flex-start; margin: 18px 0; }
.form-privacidad input { margin-top: 3px; }
.form-estado { margin-top: 16px; font-size: 0.9rem; color: var(--exito); }
.form-estado[hidden] { display: none; }

.contacto-lateral { border-top: 2px solid var(--oro); padding-top: 22px; }
.contacto-lateral .whatsapp { display: flex; align-items: center; gap: 12px; margin-top: 18px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--tinta); color: rgba(255,255,255,0.82); padding: 56px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid h4 { color: var(--blanco); font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-grid a { text-decoration: none; color: rgba(255,255,255,0.78); font-size: 0.9rem; }
.footer-grid a:hover { color: var(--oro-suave); }
.footer-logo img { width: min(100%, 180px); height: auto; margin-bottom: 18px; }
.footer-bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.78rem; color: rgba(255,255,255,0.55);
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-logo img { width: 164px; }
}

.aviso-independencia {
  background: var(--marfil-2); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  padding: 14px 0; font-size: 0.82rem; color: var(--gris); text-align: center;
}

.banda-cv { background: var(--marfil); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.banda-cv .container {
  display: grid; grid-template-columns: minmax(130px, 176px) minmax(320px, 1fr);
  align-items: center; gap: clamp(34px, 6vw, 82px); padding-top: clamp(48px, 7vw, 78px); padding-bottom: clamp(48px, 7vw, 78px);
}
.banda-cv-portada {
  display: block; text-decoration: none; transform: rotate(-1.5deg);
  box-shadow: 0 18px 42px rgba(35,29,19,0.2); transition: transform 180ms ease;
}
.banda-cv-portada:hover { transform: rotate(0deg) translateY(-3px); }
.banda-cv-portada img { width: 100%; height: auto; }
.banda-cv-copy { max-width: 720px; padding-left: clamp(20px, 3vw, 38px); border-left: 2px solid var(--oro); }
.banda-cv-copy .kicker { margin-bottom: 12px; }
.banda-cv-copy h2 { font-size: clamp(2rem, 3.6vw, 3.1rem); max-width: 18ch; margin-bottom: 18px; }
.banda-cv-copy p { margin: 0 0 12px; max-width: 64ch; }
.banda-cv-copy p strong { color: var(--tinta); }
.banda-cv-enlace {
  display: inline-block; margin-top: 10px; color: var(--tinta); text-decoration: none;
  font-size: 0.76rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700;
  border-bottom: 1px solid var(--oro); padding-bottom: 4px;
}
.banda-cv-enlace:hover { color: var(--oro); }
@media (max-width: 700px) {
  .banda-cv .container { grid-template-columns: 96px 1fr; gap: 24px; align-items: start; }
  .banda-cv-copy { padding-left: 18px; }
  .banda-cv-copy h2 { font-size: clamp(1.65rem, 8vw, 2.25rem); }
}
@media (max-width: 480px) {
  .banda-cv .container { grid-template-columns: 78px 1fr; gap: 18px; padding-left: 18px; padding-right: 18px; }
  .banda-cv-copy { padding-left: 14px; }
  .banda-cv-copy .kicker { font-size: 0.64rem; letter-spacing: 0.13em; }
}

/* ---------- Selector de idiomas (T365): pie de página y menu movil ----------
   Anadido sin tocar ningun estilo existente. Discreto a proposito: no forma
   parte de los dos grupos simetricos de la cabecera, para no alterar el
   diseno de navegacion ya aprobado. */
.footer-lang {
  padding-top: 22px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 0.76rem; letter-spacing: 0.03em; color: rgba(255,255,255,0.6);
  display: flex; flex-wrap: wrap; gap: 6px 4px;
}
.footer-lang a { color: rgba(255,255,255,0.78); text-decoration: none; }
.footer-lang a:hover, .footer-lang a:focus-visible { color: var(--oro-suave); }
.footer-lang span[aria-current] { color: var(--oro-suave); font-weight: 600; }

.mobile-menu-lang {
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--linea);
}
.mobile-menu-lang ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px;
}
.mobile-menu-lang li { border-bottom: none; }
.mobile-menu-lang a, .mobile-menu-lang span {
  display: inline-block; padding: 4px 2px; font-family: var(--font-sans);
  font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  color: var(--tinta-suave); text-decoration: none;
}
.mobile-menu-lang a:hover, .mobile-menu-lang a:focus-visible { color: var(--oro); }
.mobile-menu-lang span[aria-current] { color: var(--oro); }

/* T455 (2026-08-31): el aviso de cookies se creaba por JavaScript pero no
   tenía ni una regla de estilo, así que aparecía como texto suelto al final
   de la página. Un consentimiento que no se ve no es consentimiento. */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;
  padding:16px 22px;background:#0f1f38;color:#f4f1ea;
  box-shadow:0 -6px 24px rgba(0,0,0,.28);font-size:14px;line-height:1.5}
.cookiebar p{margin:0;max-width:70ch}
.cookiebar a{color:#d9b25f;text-decoration:underline}
.cookiebar-btns{display:flex;gap:10px;flex-shrink:0}
.cookiebar button{cursor:pointer;border:1px solid rgba(244,241,234,.45);
  background:transparent;color:#f4f1ea;padding:9px 18px;border-radius:999px;
  font:inherit;font-weight:600;white-space:nowrap}
.cookiebar button:hover{border-color:#d9b25f}
.cookiebar button.ok{background:#d9b25f;border-color:#d9b25f;color:#0f1f38}
@media (max-width:640px){.cookiebar{flex-direction:column;align-items:stretch;text-align:center}
  .cookiebar-btns{justify-content:center}}

/* T456 (2026-08-31): formulario de solicitud de información.
   Hasta ahora la web solo ofrecía salir a WhatsApp o al correo, lo que
   además no dejaba medir nada. */
.solicitud-card{background:#fff;border:1px solid rgba(15,31,56,.12);border-radius:14px;
  padding:28px 26px;margin-bottom:28px;box-shadow:0 6px 26px rgba(15,31,56,.07)}
.solicitud-card h3{margin:0 0 8px}
.solicitud-intro{margin:0 0 20px;opacity:.85}
.solicitud-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px}
.solicitud-campos label,.solicitud-privacidad{display:flex;flex-direction:column;gap:6px;
  font-size:.9rem;font-weight:600}
.solicitud-ancho{grid-column:1/-1}
.solicitud-campos input,.solicitud-campos textarea{font:inherit;font-weight:400;
  padding:11px 13px;border:1px solid rgba(15,31,56,.22);border-radius:8px;background:#fdfdfb;
  width:100%;box-sizing:border-box}
.solicitud-campos input:focus,.solicitud-campos textarea:focus{outline:2px solid #d9b25f;
  outline-offset:1px;border-color:#d9b25f}
.solicitud-privacidad{flex-direction:row;align-items:flex-start;gap:10px;margin:18px 0 20px;
  font-weight:400;font-size:.88rem}
.solicitud-privacidad input{margin-top:3px;flex-shrink:0}
.solicitud-obl{margin:12px 0 0;font-size:.8rem;opacity:.65}
.solicitud-trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:720px){.solicitud-campos{grid-template-columns:1fr}
  .solicitud-card{padding:22px 18px}}

/* T458 (2026-09-01) · Dos arreglos de fotografía.
   1. La foto del baño es vertical (900x1200) pero la galería imponía
      aspect-ratio 3/2 con object-fit:cover, así que recortaba media ducha.
      Se le respeta su proporción real. */
.galeria-grid img[src*="suite-bano"] { aspect-ratio: 3 / 4; }
@media (max-width: 640px) { .galeria-grid img[src*="suite-bano"] { aspect-ratio: 3 / 4; } }
.galeria-grid figure { justify-content: flex-start; }

/* 2. Ampliar la foto al pulsarla. */
.ampliable { cursor: zoom-in; }
.visor-foto{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  background:rgba(9,17,30,.92);padding:24px;opacity:0;transition:opacity .18s ease}
.visor-foto.visible{opacity:1}
.visor-foto img{max-width:min(96vw,1400px);max-height:88vh;width:auto;height:auto;
  border-radius:10px;box-shadow:0 18px 60px rgba(0,0,0,.5);cursor:zoom-out}
.visor-foto figcaption{position:absolute;left:0;right:0;bottom:22px;text-align:center;color:#f4f1ea;
  font-size:.95rem;padding:0 24px}
.visor-cerrar{position:absolute;top:16px;right:20px;background:transparent;border:0;color:#f4f1ea;
  font-size:2.1rem;line-height:1;cursor:pointer;padding:6px 12px;border-radius:8px}
.visor-cerrar:hover{background:rgba(255,255,255,.12)}
@media (max-width:640px){.visor-foto{padding:12px}.visor-foto img{max-height:80vh}}