/* Class & Villas -- sistema de diseño global, Fase 1 (T296).
   Base real: producción actual (sass/modules/_variables.scss, extraído en
   T290) -- rojo corporativo #CB1A1A, Lato/Catamaran, escala 16px.
   Añadido para el mandato "premium, luminoso, mediterráneo, editorial":
   paleta cálida de acento (terracota, azul mediterráneo, arena) que no
   sustituye el rojo de marca, lo complementa. Ningún activo ni código de
   terceros. */

:root {
  /* --- Color: identidad real de producción --- */
  --cv-black: #000000;
  --cv-white: #ffffff;
  --cv-primary: #cb1a1a;       /* rojo corporativo real */
  --cv-secondary: #202020;
  --cv-text: #505050;
  --cv-list-bg: #ededed;

  /* --- Color: acento mediterráneo nuevo, complementario --- */
  --cv-terracotta: #c9703c;
  /* T297 -- variante oscurecida para texto pequeño: --cv-terracotta sobre
     blanco da 3.58:1 (falla AA 4.5:1 en texto normal); esta variante da
     ~5.2:1, coherente visualmente pero accesible en kickers/etiquetas. */
  --cv-terracotta-text: #a6582c;
  --cv-sea-blue: #1f5c73;
  --cv-sand: #f4ede1;
  --cv-success: #1fa826;       /* ya existía en producción ($color13) */
  --cv-amber: #d6851b;         /* ya existía en producción ($color11) */

  /* --- Tipografía --- */
  --cv-font-main: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cv-font-sub: 'Catamaran', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cv-size-base: 16px;

  /* --- Espaciado (escala 8px, nueva -- no documentada en el extracto de T290) --- */
  --cv-space-1: 4px;
  --cv-space-2: 8px;
  --cv-space-3: 16px;
  --cv-space-4: 24px;
  --cv-space-5: 32px;
  --cv-space-6: 48px;

  /* --- Rejilla --- */
  --cv-container-max: 1240px;
  /* T309 Recuperación 18 -- hallazgo de José: el legacy real no usa
     esquinas redondeadas en tarjetas/botones/paginación/CTA (auditoría de
     css/style.css real). --cv-radius pasaba 12px a .cv-card/.cv-btn/
     .cv-menu-summary y, vía var(--cv-radius), a las fotos de Portal/
     Recomendados/Noticias/revista y a los campos de formulario. Puesto a
     0 -- cantos rectos en todos los usos que lo heredan; las pocas
     excepciones reales (controles circulares de icono, marcadores de
     mapa) usan border-radius:50% explícito, no este token, y no se
     tocan aquí. */
  --cv-radius: 0;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--cv-font-main);
  font-size: var(--cv-size-base);
  color: var(--cv-text);
  background: var(--cv-white);
  line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--cv-font-sub); color: var(--cv-secondary); margin: 0 0 var(--cv-space-3); font-weight: 700; }
h1 { font-size: clamp(32px, 5vw, 63px); line-height: 1.1; letter-spacing: -0.01em; }
h2 { font-size: clamp(26px, 4vw, 38px); }
h3 { font-size: 28px; }
p { margin: 0 0 var(--cv-space-3); }
a { color: var(--cv-sea-blue); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--cv-terracotta);
  outline-offset: 2px;
}

/* T309 Recuperacion 34 -- utilidad reutilizable de accesibilidad (antes
   solo existia como estilo inline puntual en el selector de idioma de la
   cabecera). Oculta visualmente sin ocultar de lectores de pantalla; no
   afecta el diseno visual. */
.cv-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.cv-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--cv-secondary); color: var(--cv-white);
  padding: var(--cv-space-2) var(--cv-space-3); border-radius: 0 0 var(--cv-radius) 0;
}
.cv-skip-link:focus { left: 0; }

.cv-container { max-width: var(--cv-container-max); margin: 0 auto; padding: 0 var(--cv-space-3); }

/* --- Cabecera / navegación ---
   T305R2 -- la primera correccion dependia de "display:contents" sobre
   <details>/<summary> para que la navegacion de escritorio reapareciera
   como fila plana; en navegadores reales esa combinacion es fragil (el
   UA aplica "details:not([open]) > *:not(summary) { display:none }" con
   mas especificidad que nuestro "display:contents", asi que el panel
   nunca se mostraba en escritorio salvo que el usuario abriera el
   <details> a mano) -- reproducido y confirmado por supervision a 768/1440.
   Solucion robusta: DOS copias del mismo contenido (misma fuente Twig,
   components/_nav_links.html.twig y _lang_switch_links.html.twig), cada
   una controlada solo por "display" puro, sin pelear con el <details>:
   - .cv-nav-desktop / .cv-lang-switch-desktop: fila junto a la marca,
     oculta por defecto, visible solo desde el breakpoint de escritorio.
   - .cv-menu (<details>): unico responsable del colapso compacto, activo
     por defecto y oculto por completo (display:none) desde ese mismo
     breakpoint.

   T305R3 -- ese breakpoint estaba fijado en 768px, reproducido roto por
   supervision real: a 768px no cabe "Class & Villas" + los 4 enlaces + los
   6 idiomas + "Acceso CMS" en una sola fila sin truncar la marca
   (`text-overflow:ellipsis` la corta a "Class &...") ni forzar el enlace
   "Encuéntranos cerca de ti" a una segunda línea. Estimación real del
   ancho necesario (peor caso entre los 6 idiomas para nav.geo, que es
   "Trouvez-nous près de vous" en fr, ~26 caracteres): marca ~170px + 4
   enlaces con separación ~460px + 6 píldoras de idioma ~260px + CMS ~90px
   + huecos de la fila ~50px ≈ 1030px -- ya por encima de 768px e incluso
   de 1024px sin margen de seguridad frente a variación real de fuentes
   entre navegadores. Se sube el breakpoint a 1200px (por debajo del
   --cv-container-max de 1240px, con margen holgado sobre la estimación).
   Entre 0 y 1199px (incluye 768x1024, el caso reproducido) el menú
   compacto <details> sigue siendo el único mecanismo, con el mismo
   contrato táctil ya validado a 390px (panel de ancho completo debajo de
   la fila, enlaces ≥44px, sin desbordamiento). Desde 1200px en adelante
   (incluye 1440x900), la fila plana de escritorio es la única visible. */
/* T309 Recuperación 6 -- cabecera reconstruida en DOS filas (auditoría
   visual real de Codex a 1440/390 contra el legacy real: "header-top" con
   el logotipo centrado y grande, "header-bottom" con el menú debajo,
   header-wrap.html.twig/legacy_home.html). La fila anterior en una sola
   línea (marca pequeña a la izquierda + nav) es la causa raíz de dos
   defectos reproducidos: el logotipo SVG sin `width`/`height` propios
   (solo viewBox) se renderizaba a su tamaño intrínseco por defecto del
   navegador (muy superior a los ~18-20px de fuente de `.cv-brand`), sin
   ninguna regla que lo acotara -- desbordaba la fila y quedaba recortado
   por `.cv-brand { overflow:hidden }`; en móvil, esa misma fila sin
   marca visible correctamente dejaba solo el botón "Menú". Fila 1: marca
   centrada con altura fija en todos los anchos. Fila 2: navegación
   (mismo mecanismo doble-copia desktop/`<details>` que T305R2/R3, sin
   tocar esa lógica ya validada). */
.cv-header {
  padding: var(--cv-space-3) var(--cv-space-3) var(--cv-space-2);
  background: var(--cv-white);
  border-bottom: 1px solid var(--cv-list-bg);
  text-align: center;
}
.cv-header-brand-row { display: flex; justify-content: center; }
.cv-brand { display: inline-flex; flex-shrink: 0; }
/* T309 Recuperación 8 -- logotipo ~50% mayor que la versión previa (40px/56px)
   en ambos anchos, siguiendo el hallazgo de José de logo infravalorado
   frente a la cabecera legacy real. El SVG es vectorial (viewBox, sin
   raster) por lo que el aumento no pixela ni deforma. */
.cv-brand-logo { display: block; height: 60px; width: auto; }
.cv-header-row { display: flex; align-items: center; justify-content: center; gap: var(--cv-space-3); flex-wrap: nowrap; margin-top: var(--cv-space-2); }
.cv-nav-desktop, .cv-header-row .cv-lang-switch-desktop { display: none; }
.cv-cms-link {
  font-size: 12px; font-weight: 700; color: var(--cv-text); text-decoration: none; white-space: nowrap; flex-shrink: 0;
  padding: var(--cv-space-1) var(--cv-space-2); border: 1px solid var(--cv-list-bg); border-radius: 999px;
}

.cv-menu { display: block; margin-top: var(--cv-space-2); text-align: left; }
.cv-menu-summary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--cv-space-4);
  border: 1px solid var(--cv-list-bg); border-radius: var(--cv-radius);
  font-weight: 700; cursor: pointer; list-style: none;
}
.cv-menu-summary::-webkit-details-marker { display: none; }
.cv-menu-panel { display: flex; flex-direction: column; gap: var(--cv-space-4); padding-top: var(--cv-space-3); }
.cv-nav { display: flex; flex-direction: column; gap: var(--cv-space-1); list-style: none; margin: 0; padding: 0; }
/* T309 Recuperación 8 -- tipografía del menú fina/ligera como el legacy real
   (hallazgo de José: el menú se veía "bold/grueso"). font-weight 400 en vez
   de 600, versalitas con letter-spacing en vez de mayúsculas nativas del
   texto, mismo tamaño legible. El estado activo se distingue por color y un
   peso ligeramente mayor (600), nunca por un bloque de fondo. */
.cv-nav a {
  color: var(--cv-secondary); text-decoration: none; font-weight: 400;
  font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase;
}
.cv-nav a[aria-current="page"] { color: var(--cv-primary); font-weight: 600; }
.cv-nav a:hover, .cv-nav a:focus-visible { color: var(--cv-primary); }
.cv-menu-panel .cv-nav a { display: flex; align-items: center; min-height: 44px; }

/* --- T309 Recuperación 8 -- selector de idioma como desplegable único
   (hallazgo de José: 6 píldoras visibles simultáneamente no existen en el
   legacy real, que usa un único selector compacto). Estructura: botón
   .cv-lang-toggle (idioma actual) + panel .cv-lang-menu (oculto por
   defecto vía [hidden], mostrado por JS en assets/js/portada.js con
   soporte de teclado/Escape/clic-fuera). Sin JS, el panel permanece
   oculto -- degradación aceptable ya que cada página ya expone hreflang
   real en <head> para buscadores; la navegación humana requiere JS como
   el resto de la interacción de la cabecera). */
.cv-lang-switch { position: relative; display: inline-flex; justify-content: center; }
.cv-lang-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 2px 12px;
  border: 1px solid var(--cv-list-bg); border-radius: 999px;
  background: var(--cv-white); color: var(--cv-text);
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  cursor: pointer; font-family: var(--cv-font-main);
}
.cv-lang-caret { font-size: 10px; }
.cv-lang-menu {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  z-index: 20; margin: 0; padding: var(--cv-space-1);
  list-style: none; display: flex; flex-direction: column; gap: 2px;
  min-width: 120px;
  background: var(--cv-white); border: 1px solid var(--cv-list-bg); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.cv-lang-menu[hidden] { display: none; }
.cv-lang-menu a {
  display: flex; align-items: center; min-height: 40px; padding: 0 var(--cv-space-2);
  border-radius: 4px; font-size: 13px; font-weight: 700; color: var(--cv-text); text-decoration: none;
}
.cv-lang-menu a:hover, .cv-lang-menu a:focus-visible { background: var(--cv-list-bg); }
.cv-lang-menu a[aria-current="true"] { color: var(--cv-primary); }
.cv-menu-panel .cv-lang-switch { justify-content: flex-start; }
.cv-menu-panel .cv-lang-menu { left: 0; transform: none; }

@media (min-width: 1200px) {
  .cv-brand-logo { height: 84px; }
  .cv-nav-desktop, .cv-header-row .cv-lang-switch-desktop { display: flex; }
  .cv-nav-desktop .cv-nav { flex-direction: row; gap: var(--cv-space-4); flex-wrap: wrap; justify-content: center; }
  .cv-cms-link { order: 3; }
  .cv-menu { display: none; }
}

/* --- Rejilla de tarjetas --- */
.cv-grid { display: grid; gap: var(--cv-space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .cv-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cv-grid { grid-template-columns: repeat(3, 1fr); } }
.cv-card {
  border: 1px solid var(--cv-list-bg); border-radius: var(--cv-radius);
  padding: var(--cv-space-4); background: var(--cv-white);
}

/* --- Botón "Suscríbete" (franja editorial, components/_franja_editorial.html.twig) ---
   T309 Recuperación 18 -- hallazgo de José: aparecía crema y redondeado
   (heredaba .cv-btn/.cv-btn-secondary genéricos). Reconstruido con los
   valores reales del legacy (.right-blk .subscribe-btn, css/style.css
   real, ver portal-legacy.css): rectángulo negro macizo, texto blanco
   mayúsculas, hover a rojo corporativo. Clase única, sin depender de
   --cv-radius ni de --cv-sand. */
.cv-subscribe-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 145px; height: 38px; padding: 0 12px;
  background: #1c1c1c; color: #ffffff; border: 0; border-radius: 0;
  text-transform: uppercase; font-weight: 700; font-size: 13px;
  font-family: var(--cv-font-main); text-decoration: none;
}
.cv-subscribe-btn:hover, .cv-subscribe-btn:focus-visible, .cv-subscribe-btn:active {
  background: var(--cv-primary); color: #ffffff;
}

/* --- Botones --- */
.cv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--cv-space-2);
  min-height: 48px; padding: 0 var(--cv-space-4);
  border-radius: var(--cv-radius); border: 0; cursor: pointer;
  font-weight: 700; font-size: 15px; font-family: var(--cv-font-main);
  text-decoration: none;
}
.cv-btn-primary { background: var(--cv-primary); color: var(--cv-white); }
/* T309 Recuperación 24 -- José: ningún botón puede quedar crema/naranja.
   Antes: background: var(--cv-sand); border: 1px solid var(--cv-terracotta).
   Ahora: blanco/negro puro, sin :hover/:focus previos que redefinieran
   esto (no existían), radio ya es 0 vía .cv-btn. */
.cv-btn-secondary { background: var(--cv-white); color: var(--cv-secondary); border: 1px solid var(--cv-secondary); }

/* --- Formularios --- */
.cv-field { display: block; margin-bottom: var(--cv-space-3); }
.cv-field label { display: block; margin-bottom: var(--cv-space-1); font-weight: 700; color: var(--cv-secondary); }
.cv-field input, .cv-field select {
  width: 100%; min-height: 44px; padding: 0 var(--cv-space-2);
  border: 1px solid var(--cv-list-bg); border-radius: 0; font-size: 16px; font-family: inherit;
}
.cv-error-text { color: var(--cv-primary); font-size: 13px; margin-top: var(--cv-space-1); }

/* --- Estados vacíos / error --- */
.cv-empty-state {
  text-align: center; padding: var(--cv-space-6) var(--cv-space-3);
  color: var(--cv-text);
}
.cv-empty-state h2 { color: var(--cv-secondary); }
.cv-status-code {
  font-family: var(--cv-font-sub); font-weight: 800; color: var(--cv-list-bg);
  font-size: clamp(64px, 15vw, 140px); line-height: 1; margin: 0;
}

/* --- Pie --- */
.cv-footer {
  margin-top: var(--cv-space-6);
  padding: var(--cv-space-5) var(--cv-space-3);
  background: var(--cv-secondary); color: var(--cv-sand);
  font-size: 13px;
}
.cv-footer a { color: var(--cv-white); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}