/* ==========================================================================
   Luz Travel World · sistema de diseño «hora dorada»
   Un solo fichero, sin dependencias. Orden: fuentes · fichas · base · rejilla ·
   componentes · secciones · portal y back office · movimiento · impresión
   ========================================================================== */

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("/estatico/fuentes/fraunces-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 800; font-display: swap;
  src: url("/estatico/fuentes/fraunces-latin-opsz-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("/estatico/fuentes/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("/estatico/fuentes/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  /* marca */
  --noche: #06284E; --noche-prof: #041B36; --noche-suave: #0D3B6E;
  --luz: #F2A922; --luz-viva: #F7BC4B; --ambar: #8A5200; --miel: #FCEFD2;
  --crema: #FBF6EC; --arena: #F4ECDD; --linea: #E6DDCB;
  /* papel */
  --fondo: #FFFDF9; --superficie: #FFFFFF; --superficie-2: var(--crema);
  --tinta: #121B27; --texto: #2B3645; --suave: #5B6778; --borde: var(--linea);
  /* estado */
  --bien: #067647; --bien-f: #E6F6EE; --aviso: #B54708; --aviso-f: #FEF4E4; --mal: #B42318; --mal-f: #FDEDEA; --info: #175CD3; --info-f: #EAF2FE;
  /* tipografía fluida */
  --f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs: clamp(.76rem, .74rem + .1vw, .82rem);
  --t-s: clamp(.86rem, .84rem + .12vw, .93rem);
  --t-m: clamp(1rem, .97rem + .16vw, 1.08rem);
  --t-l: clamp(1.16rem, 1.08rem + .4vw, 1.36rem);
  --t-xl: clamp(1.5rem, 1.3rem + 1vw, 2.05rem);
  --t-2xl: clamp(1.95rem, 1.5rem + 2.2vw, 3.1rem);
  --t-3xl: clamp(2.5rem, 1.7rem + 3.9vw, 4.6rem);
  /* espacio */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 72px; --e9: clamp(72px, 9vw, 128px);
  --margen: clamp(18px, 4.5vw, 44px); --ancho: 1180px; --ancho-texto: 68ch;
  --radio-s: 8px; --radio: 14px; --radio-g: 24px; --radio-pildora: 999px;
  --sombra-1: 0 1px 2px rgba(6,40,78,.06), 0 2px 8px rgba(6,40,78,.05);
  --sombra-2: 0 2px 4px rgba(6,40,78,.06), 0 12px 32px rgba(6,40,78,.10);
  --sombra-3: 0 8px 16px rgba(4,27,54,.10), 0 28px 64px rgba(4,27,54,.18);
  --anillo: 0 0 0 3px #fff, 0 0 0 6px var(--noche-suave);
  --curva: cubic-bezier(.2,.7,.2,1);
  --alto-cabecera: 72px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-cabecera) + 16px); }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 var(--t-m)/1.62 var(--f-texto); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, iframe { max-width: 100%; display: block; }
h1, h2, h3, h4 { color: var(--tinta); margin: 0; font-family: var(--f-display); font-weight: 480; line-height: 1.12; letter-spacing: -.012em; font-variation-settings: "opsz" 96; text-wrap: balance; }
h1 { font-size: var(--t-3xl); letter-spacing: -.022em; }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-l); font-variation-settings: "opsz" 36; line-height: 1.25; }
h4 { font: 600 var(--t-m)/1.3 var(--f-texto); letter-spacing: 0; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--noche-suave); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--noche); text-decoration-thickness: 2px; }
strong, b { font-weight: 620; color: var(--tinta); }
small { font-size: var(--t-s); }
hr { border: 0; border-top: 1px solid var(--borde); margin: var(--e6) 0; }
ul, ol { padding-left: 1.2em; }
:focus-visible { outline: none; box-shadow: var(--anillo); border-radius: 6px; }
::selection { background: var(--luz); color: var(--noche-prof); }
[hidden] { display: none !important; }
.solo-lectores { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--noche); color: #fff; padding: 10px 16px; border-radius: var(--radio-s); transition: top .15s; }
.saltar:focus { top: 12px; color: #fff; }

.ico { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; display: inline-block; vertical-align: middle; }

/* ---------- rejilla ---------- */
.contenedor { width: min(var(--ancho), 100% - 2 * var(--margen)); margin-inline: auto; }
.contenedor.estrecho { --ancho: 820px; }
.seccion { padding-block: var(--e9); }
.seccion.compacta { padding-block: var(--e8); }
.seccion.crema { background: var(--crema); }
.seccion.noche { background: var(--noche); color: #D8E2EE; }
.seccion.noche h2, .seccion.noche h3, .seccion.noche strong { color: #fff; }
.rejilla { display: grid; gap: var(--e5); }
.rejilla.c2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.rejilla.c3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.rejilla.c4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.dos { display: grid; gap: var(--e7); align-items: center; }
@media (min-width: 900px) { .dos { grid-template-columns: 1.05fr .95fr; } .dos.invertida > :first-child { order: 2; } }
.pila > * + * { margin-top: var(--e4); }
.pila.g > * + * { margin-top: var(--e6); }
.fila { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.centro { text-align: center; }
.centro .entradilla { margin-inline: auto; }

.antetitulo { font: 600 var(--t-xs)/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--ambar); display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--e4); }
.antetitulo::before { content: ""; width: 22px; height: 2px; background: var(--luz); border-radius: 2px; }
.noche .antetitulo, .heroe .antetitulo { color: var(--luz-viva); }
.entradilla { font-size: var(--t-l); line-height: 1.5; color: var(--suave); max-width: 60ch; font-weight: 380; }
.noche .entradilla { color: #C5D2E2; }
.cabecera-seccion { margin-bottom: var(--e7); max-width: 760px; }
.cabecera-seccion.centro { margin-inline: auto; }
.cabecera-seccion h2 + .entradilla { margin-top: var(--e4); }

/* ---------- botones ---------- */
.boton { --bg: var(--noche); --fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: var(--radio-pildora); border: 1.5px solid transparent; background: var(--bg); color: var(--fg); font: 600 var(--t-s)/1 var(--f-texto); letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: transform .18s var(--curva), box-shadow .18s var(--curva), background .18s; white-space: nowrap; }
.boton:hover { color: var(--fg); transform: translateY(-1px); box-shadow: var(--sombra-2); }
.boton:active { transform: translateY(0); }
.boton.luz { --bg: var(--luz); --fg: var(--noche-prof); }
.boton.luz:hover { --bg: var(--luz-viva); }
.boton.linea { --bg: transparent; --fg: var(--noche); border-color: color-mix(in srgb, var(--noche) 28%, transparent); }
.boton.linea:hover { --bg: var(--noche); --fg: #fff; }
.boton.claro { --bg: rgba(255,255,255,.1); --fg: #fff; border-color: rgba(255,255,255,.34); backdrop-filter: blur(6px); }
.boton.claro:hover { --bg: #fff; --fg: var(--noche); }
.boton.whatsapp { --bg: #128C4A; --fg: #fff; }
.boton.g { min-height: 56px; padding: 0 28px; font-size: var(--t-m); }
.boton.p { min-height: 38px; padding: 0 16px; font-size: var(--t-xs); }
.boton.ancho { width: 100%; }
.boton[disabled], .boton.cargando { opacity: .65; pointer-events: none; }
.enlace-flecha { font-weight: 600; font-size: var(--t-s); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; color: var(--noche); }
.enlace-flecha .ico { transition: transform .2s var(--curva); }
.enlace-flecha:hover .ico { transform: translateX(4px); }
.noche .enlace-flecha { color: var(--luz-viva); }

/* ---------- cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 90; height: var(--alto-cabecera); background: color-mix(in srgb, var(--fondo) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s, background .2s; }
.cabecera.con-sombra { border-bottom-color: var(--borde); box-shadow: 0 6px 24px rgba(6,40,78,.06); }
.cabecera .contenedor { height: 100%; display: flex; align-items: center; gap: var(--e5); }
.marca { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: var(--noche); flex: none; }
.marca svg { width: 38px; height: 38px; }
.marca-texto { display: grid; line-height: 1; }
.marca-texto b { font: 560 1.42rem/1 var(--f-display); letter-spacing: -.02em; color: var(--noche); font-variation-settings: "opsz" 40; }
.marca-texto span { font: 600 .58rem/1 var(--f-texto); letter-spacing: .3em; text-transform: uppercase; color: var(--ambar); margin-top: 5px; }
.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.nav a { display: block; padding: 10px 13px; border-radius: var(--radio-pildora); font: 520 var(--t-s)/1 var(--f-texto); color: var(--texto); text-decoration: none; transition: background .15s, color .15s; }
.nav a:hover { background: var(--arena); color: var(--noche); }
.nav a[aria-current="page"] { color: var(--noche); background: var(--miel); }
.cabecera-acciones { display: flex; align-items: center; gap: 10px; }
.boton-menu { display: none; width: 46px; height: 46px; border: 1.5px solid var(--borde); border-radius: 50%; background: var(--superficie); color: var(--noche); cursor: pointer; align-items: center; justify-content: center; }
@media (max-width: 1060px) {
  .boton-menu { display: inline-flex; margin-left: auto; }
  .nav { position: fixed; inset: var(--alto-cabecera) 0 0 0; margin: 0; background: var(--fondo); padding: var(--e5) var(--margen) var(--e7); overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s var(--curva), visibility .2s; }
  .nav.abierta { opacity: 1; visibility: visible; transform: none; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { padding: 18px 4px; border-radius: 0; border-bottom: 1px solid var(--borde); font: 460 1.5rem/1.1 var(--f-display); }
  .nav a[aria-current="page"] { background: none; color: var(--ambar); }
  .cabecera-acciones .boton:not(.siempre) { display: none; }
  .nav .acciones-movil { display: grid; gap: 12px; margin-top: var(--e6); }
}
@media (min-width: 1061px) { .nav .acciones-movil { display: none; } }

/* ---------- héroe ---------- */
.heroe { position: relative; isolation: isolate; color: #E5ECF5; background: var(--noche-prof); overflow: clip; margin-top: calc(-1 * var(--alto-cabecera)); padding-top: var(--alto-cabecera); }
.heroe-arte { position: absolute; inset: 0; z-index: -2; }
.heroe-arte svg { width: 100%; height: 100%; }
.heroe::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,27,54,.86) 0%, rgba(4,27,54,.55) 46%, rgba(4,27,54,.05) 78%), linear-gradient(0deg, rgba(4,27,54,.55), transparent 38%); }
.heroe .contenedor { padding-block: clamp(64px, 11vw, 148px) clamp(150px, 17vw, 230px); }
.heroe h1 { color: #fff; max-width: 15ch; }
.heroe h1 em { font-style: italic; color: var(--luz-viva); font-weight: 420; }
.heroe .entradilla { color: #D3DEEB; margin-top: var(--e5); max-width: 50ch; }
.heroe .fila { margin-top: var(--e6); }
/* Enlaces de texto dentro de un héroe: el color de enlace general es azul noche y sobre el héroe oscuro no se leería.
   Solo dentro de párrafos: las migas (nav > ol > li > a) tienen su propio color, más discreto, y no deben heredarlo. */
.heroe p a:not(.boton) { color: #fff; text-decoration-color: rgba(255,255,255,.55); }
.heroe p a:not(.boton):hover { color: var(--luz-viva); }
.heroe.bajo .contenedor { padding-block: clamp(48px, 7vw, 96px) clamp(56px, 7vw, 96px); }
.heroe.bajo h1 { font-size: var(--t-2xl); max-width: 22ch; }
.heroe.con-buscador + .buscador-marco { margin-top: clamp(-170px, -12vw, -96px); }
.cabecera.sobre-heroe:not(.con-sombra) { background: transparent; backdrop-filter: none; }
.cabecera.sobre-heroe:not(.con-sombra) .marca, .cabecera.sobre-heroe:not(.con-sombra) .marca-texto b { color: #fff; }
.cabecera.sobre-heroe:not(.con-sombra) .marca-texto span { color: var(--luz-viva); }
.cabecera.sobre-heroe:not(.con-sombra) .nav a { color: #E9EFF6; }
.cabecera.sobre-heroe:not(.con-sombra) .nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
/* La página actual, sobre el héroe oscuro: sin esto heredaba el fondo crema de la regla general con el texto blanco de la de arriba, y no se leía. */
@media (min-width: 1061px) { .cabecera.sobre-heroe:not(.con-sombra) .nav a[aria-current="page"] { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); } }
.cabecera.sobre-heroe:not(.con-sombra) .boton.linea { --fg: #fff; border-color: rgba(255,255,255,.4); }
.cabecera.sobre-heroe:not(.con-sombra) .boton-menu { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }
@media (max-width: 1060px) { .cabecera.sobre-heroe .nav a { color: var(--texto) !important; } }

.migas { font-size: var(--t-xs); color: #B9C7D8; margin-bottom: var(--e5); }
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.migas li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.migas a { color: inherit; text-decoration: none; }
.migas a:hover { color: #fff; text-decoration: underline; }
.migas.oscuras { color: var(--suave); }

/* ---------- buscador ---------- */
.buscador-marco { position: relative; z-index: 5; }
.buscador { background: var(--superficie); border-radius: var(--radio-g); box-shadow: var(--sombra-3); border: 1px solid rgba(6,40,78,.06); overflow: hidden; }
.buscador-pestanas { display: flex; gap: 4px; padding: 10px 10px 0; overflow-x: auto; scrollbar-width: none; }
.buscador-pestanas::-webkit-scrollbar { display: none; }
.pestana { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 13px 18px; border: 0; background: none; border-radius: var(--radio) var(--radio) 0 0; font: 560 var(--t-s)/1 var(--f-texto); color: var(--suave); cursor: pointer; position: relative; text-decoration: none; }
.pestana:hover { color: var(--noche); background: var(--crema); }
.pestana[aria-selected="true"] { color: var(--noche); background: var(--crema); }
.pestana[aria-selected="true"]::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--luz); }
.buscador-cuerpo { background: var(--crema); padding: clamp(14px, 2.4vw, 26px); }
/* El alto lo pone luz.js por producto (--alto-movil / -tableta / -escritorio): el widget es de otro dominio y no puede avisar de cuánto mide. */
.buscador-marco-iframe { position: relative; height: var(--alto-movil, 420px); min-height: 230px; border-radius: var(--radio); overflow: hidden; background: var(--superficie); border: 1px solid var(--borde); transition: height .3s var(--curva); }
@media (min-width: 640px) { .buscador-marco-iframe { height: var(--alto-tableta, 360px); } }
@media (min-width: 1000px) { .buscador-marco-iframe { height: var(--alto-escritorio, 300px); } }
.buscador-marco-iframe iframe { display: block; width: 100%; height: 100%; border: 0; }
.buscador-espera { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: var(--e5); background: var(--superficie); }
.buscador-espera p { color: var(--suave); font-size: var(--t-s); max-width: 44ch; margin: 0; }
.buscador-nota { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 14px clamp(14px, 2.4vw, 26px) 18px; font-size: var(--t-xs); color: var(--suave); background: var(--crema); border-top: 1px solid var(--borde); }
.buscador-nota span { display: inline-flex; align-items: center; gap: 7px; }
.buscador-nota .ico { color: var(--bien); }

/* ---------- tarjetas ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-g); padding: var(--e6); box-shadow: var(--sombra-1); }
.tarjeta.plana { box-shadow: none; }
.tarjeta h3 + p { margin-top: var(--e2); color: var(--suave); font-size: var(--t-s); }
.icono-caja { width: 48px; height: 48px; border-radius: 14px; background: var(--miel); color: var(--ambar); display: grid; place-content: center; margin-bottom: var(--e4); }
.noche .icono-caja { background: rgba(242,169,34,.16); color: var(--luz-viva); }

.destino { position: relative; display: block; border-radius: var(--radio-g); overflow: hidden; text-decoration: none; color: #fff; aspect-ratio: 4 / 5; isolation: isolate; background: var(--noche-prof); box-shadow: var(--sombra-1); transition: transform .35s var(--curva), box-shadow .35s var(--curva); }
.destino.ancha { aspect-ratio: 16 / 10; }
.destino > svg, .destino > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .8s var(--curva); }
.destino::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(4,27,54,.92) 0%, rgba(4,27,54,.35) 46%, transparent 70%); }
.destino:hover { transform: translateY(-4px); box-shadow: var(--sombra-3); color: #fff; }
.destino:hover > svg, .destino:hover > img { transform: scale(1.05); }
.destino-texto { position: absolute; inset: auto 0 0 0; padding: var(--e5); }
.destino-texto small { font: 600 var(--t-xs)/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--luz-viva); }
.destino-texto h3 { color: #fff; font-size: var(--t-xl); margin-top: 8px; }
.destino-texto p { font-size: var(--t-s); color: #CFDAE7; margin-top: 6px; }
.destino-ir { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.14); backdrop-filter: blur(6px); display: grid; place-content: center; border: 1px solid rgba(255,255,255,.3); transition: background .2s, color .2s; }
.destino:hover .destino-ir { background: var(--luz); color: var(--noche-prof); border-color: var(--luz); }
.mosaico { display: grid; gap: var(--e5); grid-template-columns: repeat(12, 1fr); }
.mosaico > * { grid-column: span 12; }
@media (min-width: 640px) { .mosaico > * { grid-column: span 6; } }
/* Las dobles llevan proporción propia: su contenido es absoluto y con «auto» una fila de dos dobles mediría cero. */
@media (min-width: 1000px) { .mosaico > * { grid-column: span 3; } .mosaico > .doble { grid-column: span 6; aspect-ratio: 16 / 10; } }

.oferta { display: grid; grid-template-columns: 116px 1fr; gap: var(--e4); align-items: center; text-decoration: none; color: inherit; padding: 12px; border-radius: var(--radio-g); background: var(--superficie); border: 1px solid var(--borde); transition: box-shadow .2s, transform .2s var(--curva); }
.oferta:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
.oferta-arte { aspect-ratio: 1; border-radius: var(--radio); overflow: hidden; }
.oferta-arte svg { width: 100%; height: 100%; }
.oferta h3 { font-size: var(--t-m); font-family: var(--f-texto); font-weight: 620; letter-spacing: 0; }
.oferta p { font-size: var(--t-xs); color: var(--suave); margin: 4px 0 0; }
.precio { font: 560 var(--t-xl)/1 var(--f-display); color: var(--noche); font-variation-settings: "opsz" 48; }
.precio small { font: 500 var(--t-xs)/1.3 var(--f-texto); color: var(--suave); display: block; margin-top: 5px; }

.etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--radio-pildora); font: 620 var(--t-xs)/1.2 var(--f-texto); background: var(--arena); color: var(--texto); }
.etiqueta.luz { background: var(--miel); color: var(--ambar); }
.etiqueta.bien { background: var(--bien-f); color: var(--bien); }
.etiqueta.aviso { background: var(--aviso-f); color: var(--aviso); }
.etiqueta.mal { background: var(--mal-f); color: var(--mal); }
.etiqueta.info { background: var(--info-f); color: var(--info); }
.etiqueta.noche { background: var(--noche); color: #fff; }

.lista-limpia { list-style: none; margin: 0; padding: 0; }

/* ---------- lo que trae el robot: climatología por meses ---------- */
.clima { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; margin: var(--e4) 0 0; padding: 0; }
.clima li { list-style: none; text-align: center; display: grid; gap: 5px; padding: 10px 2px 8px; border-radius: var(--radio-s); background: var(--arena); }
.clima li.senalado { background: var(--miel); box-shadow: inset 0 0 0 1.5px var(--luz); }
.clima .mes { font: 620 .62rem/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--ambar); }
.clima .grados { font: 700 var(--t-s)/1 var(--f-texto); color: var(--noche); }
.clima .lluvia { height: 3px; border-radius: 2px; background: var(--info); margin: 0 auto; }
@media (max-width: 760px) { .clima { grid-template-columns: repeat(6, 1fr); } }

/* ---------- ficha de datos (página de destino) ---------- */
.ficha { margin: var(--e4) 0 0; display: grid; }
.ficha > div { padding: var(--e4) 0; border-bottom: 1px solid var(--borde); display: grid; gap: 6px; }
.ficha > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ficha dt { display: flex; align-items: center; gap: 8px; font: 620 var(--t-xs)/1.2 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--ambar); }
.ficha dd { margin: 0; font-size: var(--t-s); color: var(--texto); display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- pasos ---------- */
.pasos { counter-reset: paso; display: grid; gap: var(--e5); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.paso { counter-increment: paso; position: relative; padding-top: var(--e7); }
.paso::before { content: counter(paso, decimal-leading-zero); position: absolute; top: 0; left: 0; font: 420 2.3rem/1 var(--f-display); color: var(--luz); font-variation-settings: "opsz" 96; }
.paso::after { content: ""; position: absolute; top: 20px; left: 62px; right: -12px; height: 1px; background: linear-gradient(90deg, rgba(242,169,34,.6), transparent); }
.paso:last-child::after { display: none; }
.paso h3 { font-size: var(--t-l); margin-bottom: 8px; }
.paso p { font-size: var(--t-s); color: var(--suave); }
.noche .paso p { color: #B9C7D8; }

/* ---------- lista de comprobación ---------- */
.lista-ok { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lista-ok li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.lista-ok .ico { color: var(--bien); margin-top: 3px; }
.noche .lista-ok .ico, .heroe .lista-ok .ico { color: var(--luz-viva); }

/* ---------- franja de confianza ---------- */
.confianza { display: grid; gap: var(--e5); grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); padding: var(--e6); border-radius: var(--radio-g); background: var(--superficie); border: 1px solid var(--borde); }
.confianza div { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.confianza .ico { color: var(--ambar); margin-top: 2px; }
.confianza h4 { margin-bottom: 3px; }
.confianza p { font-size: var(--t-xs); color: var(--suave); line-height: 1.5; }

/* ---------- acordeón ---------- */
.acordeon { border-top: 1px solid var(--borde); }
.acordeon details { border-bottom: 1px solid var(--borde); }
.acordeon summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font: 560 var(--t-m)/1.4 var(--f-texto); color: var(--tinta); }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; border-right: 2px solid var(--ambar); border-bottom: 2px solid var(--ambar); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--curva); }
.acordeon details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.acordeon .respuesta { padding: 0 44px 24px 0; color: var(--suave); max-width: var(--ancho-texto); }

/* ---------- formularios ---------- */
.formulario { display: grid; gap: var(--e4); }
.campos-2 { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.campo { display: grid; gap: 7px; }
.campo label, .campo .rotulo { font: 600 var(--t-xs)/1.2 var(--f-texto); color: var(--tinta); letter-spacing: .01em; }
.campo .opcional { color: var(--suave); font-weight: 400; }
.control { width: 100%; min-height: 50px; padding: 12px 15px; border-radius: var(--radio); border: 1.5px solid var(--borde); background: var(--superficie); color: var(--tinta); font: 400 var(--t-m)/1.4 var(--f-texto); transition: border-color .15s, box-shadow .15s; appearance: none; }
textarea.control { min-height: 120px; resize: vertical; }
select.control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2306284E' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }
.control:hover { border-color: color-mix(in srgb, var(--noche) 35%, var(--borde)); }
.control:focus-visible { border-color: var(--noche-suave); box-shadow: 0 0 0 4px color-mix(in srgb, var(--noche-suave) 18%, transparent); }
.campo.error .control { border-color: var(--mal); }
.campo .mensaje-error { color: var(--mal); font-size: var(--t-xs); font-weight: 520; }
.casilla { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: var(--t-s); color: var(--suave); }
.casilla input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--noche); }
.cepo { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opciones label { cursor: pointer; }
.opciones input { position: absolute; opacity: 0; }
.opciones span { display: inline-flex; min-height: 42px; align-items: center; padding: 0 16px; border-radius: var(--radio-pildora); border: 1.5px solid var(--borde); background: var(--superficie); font: 520 var(--t-s)/1 var(--f-texto); color: var(--texto); transition: all .15s; }
.opciones input:checked + span { background: var(--noche); border-color: var(--noche); color: #fff; }
.opciones input:focus-visible + span { box-shadow: var(--anillo); }
.aviso-caja { padding: 14px 16px; border-radius: var(--radio); font-size: var(--t-s); background: var(--info-f); color: #123C82; border: 1px solid color-mix(in srgb, var(--info) 22%, transparent); }
.aviso-caja.bien { background: var(--bien-f); color: #054F31; border-color: color-mix(in srgb, var(--bien) 25%, transparent); }
.aviso-caja.mal { background: var(--mal-f); color: #7A1A12; border-color: color-mix(in srgb, var(--mal) 25%, transparent); }
.aviso-caja.aviso { background: var(--aviso-f); color: #7A3306; border-color: color-mix(in srgb, var(--aviso) 25%, transparent); }

/* ---------- banda de llamada ---------- */
.banda { position: relative; isolation: isolate; border-radius: var(--radio-g); overflow: hidden; padding: clamp(32px, 6vw, 72px); color: #DCE6F1; background: var(--noche); }
.banda > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .9; }
.banda::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,27,54,.92), rgba(4,27,54,.5) 60%, rgba(4,27,54,.15)); }
.banda h2 { color: #fff; max-width: 18ch; }
.banda p { max-width: 52ch; margin-top: var(--e4); }

/* ---------- pie ---------- */
.pie { background: var(--noche-prof); color: #A9B9CC; padding-block: var(--e8) var(--e6); font-size: var(--t-s); }
.pie a { color: #DDE6F0; text-decoration: none; }
.pie a:hover { color: var(--luz-viva); text-decoration: underline; }
.pie-rejilla { display: grid; gap: var(--e7) var(--e6); grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.pie-rejilla > :first-child { grid-column: span 2; max-width: 40ch; }
@media (max-width: 520px) { .pie-rejilla > :first-child { grid-column: auto; } }
.pie h4 { color: #fff; font: 600 var(--t-xs)/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--e4); }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pie .marca, .pie .marca-texto b { color: #fff; }
/* El ámbar de la marca es para fondo claro; sobre el azul del pie no llega al contraste mínimo (axe, 17-09-2026). */
.pie .marca-texto span { color: var(--luz-viva); }
.pie-legal { margin-top: var(--e7); padding-top: var(--e5); border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; font-size: var(--t-xs); color: #8C9EB5; }

/* ---------- WhatsApp flotante y cookies ---------- */
.flotante { position: fixed; right: clamp(14px, 3vw, 28px); bottom: clamp(14px, 3vw, 28px); z-index: 80; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 16px; border-radius: var(--radio-pildora); background: #128C4A; color: #fff; font: 600 var(--t-s)/1 var(--f-texto); text-decoration: none; box-shadow: var(--sombra-3); transition: transform .2s var(--curva); }
.flotante:hover { color: #fff; transform: translateY(-2px) scale(1.02); }
/* La etiqueta solo cabe fuera de la columna de contenido (1180 px) en pantallas muy anchas. Por debajo, solo el icono:
   con etiqueta tapaba el borde derecho de formularios y tarjetas al desplazarse. */
@media (max-width: 1560px) { .flotante span { display: none; } .flotante { width: 56px; padding: 0; justify-content: center; } }
.cookies { position: fixed; z-index: 120; left: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); bottom: clamp(12px, 3vw, 28px); max-width: 640px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-g); box-shadow: var(--sombra-3); padding: var(--e5); display: grid; gap: var(--e4); }
.cookies p { font-size: var(--t-s); color: var(--suave); margin: 0; }
.cookies .fila { justify-content: flex-end; }
.cookies .boton { flex: 1 1 140px; }

/* ---------- texto largo y legales ---------- */
.prosa { max-width: var(--ancho-texto); }
.prosa h2 { font-size: var(--t-xl); margin: var(--e7) 0 var(--e4); }
.prosa h3 { margin: var(--e6) 0 var(--e3); }
.prosa ul, .prosa ol { display: grid; gap: 8px; margin: 0 0 1.2em; }
.prosa table { width: 100%; border-collapse: collapse; font-size: var(--t-s); margin: var(--e4) 0 var(--e5); }
.prosa th, .prosa td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.prosa th { font-weight: 620; color: var(--tinta); background: var(--crema); }
.tabla-scroll { overflow-x: auto; }
.legal-indice { position: sticky; top: calc(var(--alto-cabecera) + 24px); display: grid; gap: 4px; align-content: start; }
.legal-indice a { padding: 10px 14px; border-radius: var(--radio); text-decoration: none; font-size: var(--t-s); color: var(--texto); }
.legal-indice a:hover { background: var(--arena); }
.legal-indice a[aria-current="page"] { background: var(--miel); color: var(--ambar); font-weight: 620; }
.con-indice { display: grid; gap: var(--e7); }
@media (min-width: 900px) { .con-indice { grid-template-columns: 250px 1fr; } }

/* ---------- portal (Mi Luz) y back office (Puente) ---------- */
.app { display: grid; min-height: calc(100vh - var(--alto-cabecera)); background: var(--crema); }
@media (min-width: 960px) { .app { grid-template-columns: 264px 1fr; } }
.app-lateral { background: var(--superficie); border-right: 1px solid var(--borde); padding: var(--e5) var(--e4); }
.app-lateral nav { display: grid; gap: 4px; }
.app-lateral a, .app-lateral button.enlace { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: var(--radio); border: 0; background: none; text-align: left; cursor: pointer; text-decoration: none; color: var(--texto); font: 520 var(--t-s)/1.2 var(--f-texto); }
.app-lateral a:hover, .app-lateral button.enlace:hover { background: var(--crema); color: var(--noche); }
.app-lateral a[aria-current="page"] { background: var(--noche); color: #fff; }
.app-lateral .quien { padding: 6px 14px 18px; border-bottom: 1px solid var(--borde); margin-bottom: 14px; font-size: var(--t-xs); color: var(--suave); overflow-wrap: anywhere; }
.app-lateral .quien b { display: block; font: 560 var(--t-l)/1.2 var(--f-display); color: var(--noche); margin-bottom: 4px; }
@media (max-width: 959px) { .app-lateral { border-right: 0; border-bottom: 1px solid var(--borde); padding: 12px var(--margen); } .app-lateral nav { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; } .app-lateral a, .app-lateral button.enlace { white-space: nowrap; width: auto; } .app-lateral .quien { display: none; } }
.app-principal { padding: clamp(20px, 4vw, 48px); min-width: 0; }
.app-principal > header { margin-bottom: var(--e6); display: flex; flex-wrap: wrap; gap: var(--e4); align-items: end; justify-content: space-between; }
.app-principal h1 { font-size: var(--t-2xl); }
.app-principal h2 { font-size: var(--t-xl); margin-bottom: var(--e4); }
.panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-g); padding: clamp(18px, 3vw, 30px); }
.panel + .panel { margin-top: var(--e5); }
.cifras { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.cifra { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-g); padding: var(--e5); }
.cifra b { display: block; font: 480 var(--t-2xl)/1 var(--f-display); color: var(--noche); font-variation-settings: "opsz" 72; }
.cifra span { display: block; margin-top: 8px; font-size: var(--t-xs); color: var(--suave); }
.cifra.alerta b { color: var(--mal); }
.cifra.bien b { color: var(--bien); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tabla th { text-align: left; font: 620 var(--t-xs)/1.2 var(--f-texto); letter-spacing: .04em; text-transform: uppercase; color: var(--suave); padding: 12px 14px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
.tabla td { padding: 14px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: var(--crema); }
.tabla a { font-weight: 600; text-decoration: none; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--e5); }
.filtros a { padding: 9px 15px; border-radius: var(--radio-pildora); border: 1.5px solid var(--borde); background: var(--superficie); font: 560 var(--t-xs)/1 var(--f-texto); text-decoration: none; color: var(--texto); }
.filtros a[aria-current="true"] { background: var(--noche); border-color: var(--noche); color: #fff; }
.reloj { font-variant-numeric: tabular-nums; font-weight: 620; }
.reloj.tarde { color: var(--mal); }
.reloj.bien { color: var(--bien); }
.progreso { height: 8px; border-radius: 8px; background: var(--arena); overflow: hidden; }
.progreso i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--luz), var(--luz-viva)); transition: width .5s var(--curva); }
.hitos { list-style: none; margin: 0; padding: 0; display: grid; }
.hito { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--borde); }
.hito:last-child { border-bottom: 0; }
.hito input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--bien); margin-top: 2px; }
.hito.hecho h4 { text-decoration: line-through; color: var(--suave); }
.hito p { font-size: var(--t-s); color: var(--suave); margin-top: 4px; }
.hito .cuando { font-size: var(--t-xs); color: var(--ambar); font-weight: 620; }
.opcion-propuesta { position: relative; display: grid; gap: var(--e4); align-content: start; }
.opcion-propuesta.elegida { border-color: var(--bien); box-shadow: 0 0 0 3px var(--bien-f); }
.cronologia { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cronologia li { position: relative; padding: 0 0 20px 26px; border-left: 2px solid var(--borde); margin-left: 7px; font-size: var(--t-s); }
.cronologia li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--superficie); border: 2px solid var(--luz); }
.cronologia li:last-child { border-left-color: transparent; padding-bottom: 0; }
.cronologia time { display: block; font-size: var(--t-xs); color: var(--suave); }
.vacio { text-align: center; padding: var(--e7) var(--e5); color: var(--suave); }
.vacio svg { margin: 0 auto var(--e4); color: var(--luz); }

/* ---------- Mi Luz: piezas del área de cliente ---------- */
.proximo { position: relative; isolation: isolate; overflow: hidden; padding: 0; border: 0; color: #DCE6F1; background: var(--noche); min-height: 240px; display: grid; align-items: end; }
.proximo-arte { position: absolute; inset: 0; z-index: -2; }
.proximo-arte svg { width: 100%; height: 100%; }
.proximo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4,27,54,.9), rgba(4,27,54,.55) 58%, rgba(4,27,54,.1)); }
.proximo-texto { padding: clamp(20px, 3.4vw, 36px); }
.proximo-texto h1, .proximo-texto h2 { color: #fff; font-size: var(--t-2xl); margin: 0 0 var(--e2); }
.proximo-texto .antetitulo { color: var(--luz-viva); }
.proximo-texto p { margin: 0; }
.proximo-texto b { color: #fff; }
.proximo-texto small { display: block; margin-top: 6px; font-size: var(--t-xs); color: #C5D2E2; }
.proximo .progreso { background: rgba(255,255,255,.2); }
.lista-simple { list-style: none; margin: var(--e4) 0 0; padding: 0; display: grid; }
.lista-simple li + li { border-top: 1px solid var(--borde); }
.lista-simple a { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); padding: 14px 4px; text-decoration: none; color: inherit; border-radius: var(--radio-s); }
.lista-simple a:hover { background: var(--crema); }
.lista-simple a > span:first-child { display: grid; gap: 2px; min-width: 0; }
.lista-simple b { overflow-wrap: anywhere; }
.lista-simple small { color: var(--suave); font-size: var(--t-xs); }
.fila-enlace { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s var(--curva); }
.fila-enlace:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); color: inherit; }
.fila-enlace > span:first-child { display: grid; gap: 4px; min-width: 0; }
.fila-enlace b { font: 560 var(--t-l)/1.25 var(--f-display); color: var(--tinta); }
.fila-enlace small { color: var(--suave); font-size: var(--t-s); }
.viaje-tarjeta { display: grid; grid-template-columns: 84px 1fr auto; gap: var(--e4); align-items: center; padding: 10px; border-radius: var(--radio-g); border: 1px solid var(--borde); background: var(--superficie); text-decoration: none; color: inherit; transition: box-shadow .2s, transform .2s var(--curva); }
.viaje-tarjeta:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); color: inherit; }
.viaje-arte { aspect-ratio: 1; border-radius: var(--radio); overflow: hidden; }
.viaje-arte svg { width: 100%; height: 100%; }
.viaje-texto { display: grid; gap: 4px; min-width: 0; }
.viaje-texto b { font: 560 var(--t-l)/1.25 var(--f-display); color: var(--tinta); overflow-wrap: anywhere; }
.viaje-texto small { color: var(--suave); font-size: var(--t-s); }
.viaje-rejilla { grid-template-columns: 1fr; }
@media (min-width: 1100px) { .viaje-rejilla { grid-template-columns: 1.35fr 1fr; } }
.opciones-propuesta { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); }
.opcion-propuesta { display: flex; flex-direction: column; gap: var(--e4); }
.opcion-propuesta + .opcion-propuesta { margin-top: 0; }
.opcion-propuesta > div:first-child { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; }
.rotulo-mini { font: 620 var(--t-xs)/1.2 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); margin: 0 0 8px; }
.lista-ok.compacta { gap: 7px; font-size: var(--t-s); }
.lista-ok.compacta li { grid-template-columns: 20px 1fr; gap: 8px; }
.lista-avisos { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; font-size: var(--t-s); color: #7A3306; }
.lista-avisos li::marker { color: var(--aviso); }
.elegir summary { list-style: none; cursor: pointer; }
.elegir summary::-webkit-details-marker { display: none; }
.elegir[open] summary { --bg: var(--arena); }
.hito-agencia { display: grid; place-content: center; width: 24px; height: 24px; margin-top: 2px; color: var(--ambar); }
.hito.hecho .hito-agencia { color: var(--bien); }
.hito form { margin: 0; }

/* ---------- Puente: piezas del back office ---------- */
.importar { position: relative; }
.importar summary { list-style: none; cursor: pointer; }
.importar summary::-webkit-details-marker { display: none; }
.importar > .panel { margin-top: var(--e4); width: min(520px, calc(100vw - 2 * var(--margen))); }
@media (min-width: 960px) { .importar[open] > .panel { position: absolute; right: 0; z-index: 30; box-shadow: var(--sombra-3); } }
.marcar { border: 0; background: none; padding: 0; cursor: pointer; color: var(--ambar); display: grid; place-content: center; width: 24px; height: 24px; margin-top: 2px; }
.marcar:hover { color: var(--noche); }
.hito.hecho .marcar { color: var(--bien); }
.panel.urgente { border-color: color-mix(in srgb, var(--mal) 35%, var(--borde)); box-shadow: 0 0 0 3px var(--mal-f); }

/* ---------- termómetro de precios (ficha de destino) ---------- */
.termometro { margin-top: var(--e5); padding-top: var(--e5); border-top: 1px solid var(--borde); }
.termometro ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.termometro li { display: grid; grid-template-columns: 6.6em auto; gap: 12px; align-items: center; font-size: var(--t-s); }
.termometro ul.con-barras li { grid-template-columns: 6.6em minmax(60px, 1fr) auto; }
.termometro li > b { font-weight: 620; color: var(--tinta); line-height: 1.25; }
.termometro .barra { height: 6px; border-radius: 6px; background: var(--arena); overflow: hidden; }
.termometro .barra i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--bien), var(--luz) 55%, var(--aviso)); opacity: .7; min-width: 4px; }
.termometro .cifras-mes { text-align: right; display: grid; gap: 2px; }
.termometro .cifras-mes b { font: 560 var(--t-l)/1 var(--f-display); color: var(--noche); font-variation-settings: "opsz" 36; }
.termometro .cifras-mes small { font-size: var(--t-xs); color: var(--suave); white-space: nowrap; }
.nota-termometro { margin-top: var(--e4); font-size: var(--t-xs); color: var(--suave); line-height: 1.55; }

/* ---------- acceso ---------- */
.acceso { min-height: calc(100vh - var(--alto-cabecera)); display: grid; place-items: center; padding: var(--e7) var(--margen); background: var(--crema); position: relative; isolation: isolate; overflow: hidden; }
.acceso > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .16; }
.acceso .tarjeta { width: min(480px, 100%); padding: clamp(24px, 5vw, 44px); box-shadow: var(--sombra-3); }

/* ---------- canales de contacto ---------- */
.canales { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e5); }
.canales li { display: grid; grid-template-columns: 48px 1fr; gap: var(--e4); align-items: start; }
.canales .icono-caja { margin-bottom: 0; }
.canales li > span:last-child { display: grid; gap: 3px; }
.canales b { font: 620 var(--t-xs)/1.2 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--ambar); }
.canales a { font-weight: 600; font-size: var(--t-l); text-decoration: none; overflow-wrap: anywhere; }
.canales a:hover { text-decoration: underline; }
.canales small { color: var(--suave); font-size: var(--t-s); }
.canales small a { font-size: inherit; font-weight: 600; }

/* ---------- página de gracias ---------- */
.pasos-gracias { list-style: none; counter-reset: g; margin: var(--e6) 0; padding: 0; display: grid; gap: var(--e4); text-align: left; }
.pasos-gracias li { counter-increment: g; display: grid; grid-template-columns: 34px 1fr; gap: 14px; font-size: var(--t-s); color: var(--suave); }
.pasos-gracias li::before { content: counter(g); width: 34px; height: 34px; border-radius: 50%; background: var(--miel); color: var(--ambar); display: grid; place-content: center; font: 620 var(--t-s)/1 var(--f-texto); }
.pasos-gracias b { display: block; color: var(--tinta); }

/* ---------- aterrizajes ---------- */
.solo-movil { display: none !important; }
@media (max-width: 979px) { .solo-movil { display: flex !important; } }
.pie.minimo { padding-block: var(--e6); }
.pie.minimo .pie-legal { margin-top: 0; padding-top: 0; border-top: 0; }
.aterrizaje-rejilla { display: grid; gap: var(--e6); align-items: start; }
@media (min-width: 980px) { .aterrizaje-rejilla { grid-template-columns: 1.1fr .9fr; } }
.aterrizaje-formulario { background: var(--superficie); border-radius: var(--radio-g); padding: clamp(20px, 3.4vw, 36px); box-shadow: var(--sombra-3); color: var(--texto); }
.aterrizaje-formulario h2 { font-size: var(--t-xl); }

/* ---------- movimiento ---------- */
.aparecer { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--curva), transform .7s var(--curva); }
.aparecer.visible { opacity: 1; transform: none; }
@keyframes respirar { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes deriva { from { transform: translateX(-3%); } to { transform: translateX(3%); } }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.heroe-arte .sol-halo { transform-origin: center; transform-box: fill-box; animation: respirar 9s ease-in-out infinite; }
.heroe-arte .bruma { animation: deriva 26s ease-in-out infinite alternate; }
.girar { animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .aparecer { opacity: 1; transform: none; } }

/* ---------- impresión ---------- */
@media print { .cabecera, .pie, .flotante, .cookies, .app-lateral, .boton { display: none !important; } body { background: #fff; } .heroe { background: none; color: #000; margin: 0; padding: 0; } .heroe::after, .heroe-arte { display: none; } .heroe h1 { color: #000; } }

/* ---------- buscador propio: formulario, filtros y resultados ---------- */
.campos-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--e4); }
.buscador-propio { max-width: none; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-g); padding: var(--e5); box-shadow: var(--sombra-1); }
.con-filtros { display: grid; grid-template-columns: 250px 1fr; gap: var(--e6); align-items: start; margin-top: var(--e5); }
.filtros { position: sticky; top: calc(var(--alto-cabecera) + 12px); display: grid; gap: var(--e2); }
.filtros .lista-limpia { display: grid; gap: 4px; }
.filtro { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: var(--radio-s); text-decoration: none; color: var(--texto); font-size: var(--t-s); border: 1px solid transparent; }
.filtro:hover { background: var(--arena); }
.filtro.activo { background: var(--miel); border-color: var(--luz); color: var(--noche); font-weight: 600; }
.filtro i { margin-left: auto; font-style: normal; font-size: var(--t-xs); color: var(--suave); }
/* Filtros puestos: se ven de un vistazo y se quitan de uno en uno. Un buscador
   que no te enseña qué filtros llevas encima es un buscador que te deja perdido. */
.seccion.pegada { padding-top: 0; }
/* Un filtro que dejaría la lista vacía sigue a la vista —saber que no hay nada por ahí
   también es información— pero apagado, para que no compita con los que sí llevan a algo. */
.filtro.vacio { opacity: .42; }
.filtro.vacio:hover { background: transparent; }
.ampliar { display: flex; flex-wrap: wrap; gap: var(--e4); align-items: center; margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--borde); }
.ampliar .casilla { margin: 0; }
.ampliar .pista { flex: 1 1 260px; font-size: var(--t-xs); color: var(--suave); margin: 0; }
/* De qué consulta hermana salió el resultado: «1 día antes», «desde Girona». Se dice
   siempre, porque una oferta que llega moviendo la fecha no es la que pidió el cliente. */
.variante { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-xs); font-weight: 620; color: var(--noche); background: var(--miel); border-radius: var(--radio-pildora); padding: 3px 9px; margin: 0; align-self: start; justify-self: start; width: fit-content; }
.chips-filtro { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--e2); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radio-pildora); text-decoration: none; font-size: var(--t-xs); font-weight: 560; border: 1px solid var(--luz); background: var(--miel); color: var(--noche); }
.chip:hover { background: var(--luz); }
.chip span { font-size: var(--t-s); line-height: 1; opacity: .7; }
.chip.limpiar { background: transparent; border-color: var(--borde); color: var(--suave); }
.chip.limpiar:hover { background: var(--arena); color: var(--texto); }
.chip.quitar { background: var(--noche); border-color: var(--noche); color: #fff; }
.chip.quitar span { opacity: .85; }
.chip.quitar:hover { background: var(--mal); border-color: var(--mal); }
.cuenta-filtros { font-size: var(--t-xs); color: var(--suave); margin: 0 0 var(--e4); }
.resultados { display: grid; gap: var(--e4); }
.resultado { position: relative; display: grid; grid-template-columns: 1fr 230px; gap: var(--e5); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-g); padding: var(--e5); }
.resultado.destacada { border-color: var(--luz); box-shadow: 0 0 0 1px var(--luz) inset; }
.resultado .cinta { position: absolute; top: -10px; left: var(--e5); background: var(--luz); color: var(--noche-prof); font: 700 var(--t-xs)/1 var(--f-texto); padding: 6px 12px; border-radius: var(--radio-pildora); text-transform: uppercase; letter-spacing: .06em; }
.resultado .vuelos { display: grid; gap: var(--e3); min-width: 0; }
.linea-vuelo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e3); }
.linea-vuelo .horas { display: grid; line-height: 1.1; }
.linea-vuelo .horas b { font: 700 var(--t-l)/1 var(--f-texto); color: var(--noche); }
.linea-vuelo .horas span { font-size: var(--t-xs); color: var(--suave); }
.linea-vuelo .horas.fin { text-align: right; }
.linea-vuelo .trazo { position: relative; display: grid; justify-items: center; gap: 3px; }
.linea-vuelo .trazo span { display: block; width: 100%; height: 2px; background: var(--linea); border-radius: 2px; }
.linea-vuelo .trazo i { font-style: normal; font-size: var(--t-xs); color: var(--suave); }
.linea-vuelo .escalas { grid-column: 1 / -1; }
.resultado .companias { margin: 0; font-size: var(--t-s); color: var(--suave); }
.resultado .razones { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.resultado .razones li { display: flex; gap: 7px; align-items: center; font-size: var(--t-xs); color: var(--bien); }
.precio-bloque { display: grid; gap: 8px; align-content: start; justify-items: stretch; text-align: right; border-left: 1px solid var(--borde); padding-left: var(--e5); }
.precio-bloque .precio { font: 700 var(--t-2xl)/1 var(--f-texto); color: var(--noche); }
.precio-bloque .por, .precio-bloque .fuente { font-size: var(--t-xs); color: var(--suave); }
.precio-bloque .etiqueta { justify-self: end; }
.calendario-precios { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(74px, 1fr); gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.calendario-precios .dia { display: grid; gap: 3px; justify-items: center; padding: 10px 6px; border-radius: var(--radio-s); background: var(--arena); text-decoration: none; color: var(--texto); }
.calendario-precios .dia span { font-size: var(--t-xs); color: var(--suave); }
.calendario-precios .dia b { font-size: var(--t-s); color: var(--noche); }
.calendario-precios .dia:hover { background: var(--miel); }
.calendario-precios .dia.elegido { background: var(--noche); }
.calendario-precios .dia.elegido span, .calendario-precios .dia.elegido b { color: #fff; }
.marco-buscador { border: 1px solid var(--borde); border-radius: var(--radio-g); overflow: hidden; background: var(--superficie); }
@media (max-width: 1060px) {
  .campos-4 { grid-template-columns: repeat(2, 1fr); }
  .con-filtros { grid-template-columns: 1fr; }
  .filtros { position: static; }
}
@media (max-width: 680px) {
  .campos-4 { grid-template-columns: 1fr; }
  .resultado { grid-template-columns: 1fr; }
  .precio-bloque { border-left: 0; border-top: 1px solid var(--borde); padding-left: 0; padding-top: var(--e4); text-align: left; }
  .precio-bloque .etiqueta { justify-self: start; }
}

/* ---------- back office: qué se busca ---------- */
.barra-tabla { display: block; height: 8px; background: var(--arena); border-radius: 4px; overflow: hidden; }
.barra-tabla i { display: block; height: 100%; background: var(--luz); }
.barras-mes { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; height: 180px; margin-top: var(--e4); }
/* Columna flexible: así el alto en % de la barra se mide contra el alto de la caja y no
   contra una fila automática, que lo dejaba en una rayita. */
.barras-mes .mes { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; }
.barras-mes .mes i { display: block; width: 68%; min-height: 4px; background: var(--luz); border-radius: 5px 5px 0 0; flex: 0 0 auto; }
.barras-mes .mes span { font-size: var(--t-xs); color: var(--suave); text-transform: capitalize; }
.barras-mes .mes b { font-size: var(--t-xs); color: var(--noche); }

/* ---------- back office: calidad por compañía ---------- */
.rejilla-companias { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--e3); }
.compania { display: grid; grid-template-columns: 1fr 78px; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio-s); background: var(--superficie); font-size: var(--t-s); }
.compania.propia { border-color: var(--luz); background: var(--miel); }
.compania .control { min-height: 36px; padding: 0 8px; text-align: right; }