/* ═══════════════════════════════════════════════════════════════
   RUMBO · TEMA AZUL (25/08/2026)

   Qué hace: cambia el NEGRO por un AZUL MARINO, conservando la
   alternancia original de la web. Los bloques que eran negros siguen
   siendo oscuros; los claros siguen claros. Solo cambia el tono.

   Cómo sabe cuáles: en esta web toda sección oscura es la que NO
   lleva la clase `.claro`. Por eso basta `section:not(.claro)` y no
   hace falta marcar nada a mano en el HTML.

   ── Los colores, y por qué estos ──

   AZUL #0E263F · lo eligió Ricardo comparando cinco tonos en vivo.
   El de la propuesta de Diego (#0B1F33) tenía 12% de luz y se leía
   como negro sucio; este sube un paso y ya se lee como azul.

   TURQUESA #14B8B1 · el del logo. Los tres turquesas que había
   (#2DD4BF de la web, #19C6B3 de la propuesta, #14B8B1 del logo) son
   el mismo color a distinta luz — 172-177deg — y tres no pueden
   convivir. Ricardo decidió que mande el del logo.

   TURQUESA TEXTO #0D7873 · derivado del anterior, bajando la luz a
   26%. Hace falta porque sobre fondo claro el turquesa brillante da
   2.15 y no se lee. El #0F8F82 de la propuesta daba 3.98, también
   corto. Este da 5.31.

   DORADO #FFC300 · el de siempre. Ricardo pidió conservarlo.

   ── La regla que hay que respetar ──
   Sobre fondo CLARO el turquesa brillante y el dorado NO son tinta,
   son FONDO: dan 2.15 y 1.61. Como letra sobre claro solo va el azul
   y el turquesa oscuro. Sobre el AZUL sí pueden ser letra los dos
   (turquesa 6.2, dorado 9.5).

   Para revertir: quitar el <link> de tema-claro.css de las 5 páginas.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --t-azul:#0E263F;          /* el oscuro, antes era negro */
  --t-turquesa:#14B8B1;      /* el del logo · fondos y botones */
  --t-turquesa-txt:#0D7873;  /* el unico turquesa que sirve de letra sobre claro */
  --t-mint:#F2FBF9;          /* claro de segundo nivel */
  --t-dorado:#FFC300;
  --t-dorado-tinta:#1A1200;  /* la letra que va ENCIMA del dorado */
  --t-cuerpo:#41505F;        /* parrafo sobre claro */
  --t-tenue:#68788A;
  --t-claro-fuerte:#FFFFFF;  /* titulares sobre azul */
  --t-claro-cuerpo:#C3D0DC;  /* parrafo sobre azul */
  --t-claro-tenue:#93A4B5;
}

body{background:#FFFFFF;color:var(--t-cuerpo)}

/* ══════════════════════════════════════════════
   SECCIONES OSCURAS · las que NO llevan .claro
   (hero, borde-top, tinta2, cierre) — antes negras
   ══════════════════════════════════════════════ */
main section:not(.claro){
  --fondo:var(--t-azul);
  --texto-fuerte:var(--t-claro-fuerte);
  --texto-suave:var(--t-claro-cuerpo);
  --texto-tenue:var(--t-claro-tenue);
  --acento-txt:var(--t-turquesa);
  --superficie:rgba(255,255,255,.06);
  --superficie-2:rgba(255,255,255,.02);
  --borde:rgba(255,255,255,.14);
  --borde-fuerte:rgba(255,255,255,.28);
  background:var(--fondo);
  color:var(--texto-suave);
}
/* .tinta2 pinta con var(--tinta) directo, no con var(--fondo).
   El segundo nivel oscuro: un pelin mas claro, para dos oscuras seguidas */
main section.tinta2{--fondo:#122C48;background:#122C48}

/* ══════════════════════════════════════════════
   SECCIONES CLARAS · las que llevan .claro
   ══════════════════════════════════════════════ */
main section.claro{
  --fondo:#FFFFFF;
  --texto-fuerte:var(--t-azul);
  --texto-suave:var(--t-cuerpo);
  --texto-tenue:var(--t-tenue);
  --acento-txt:var(--t-turquesa-txt);
  --superficie:rgba(14,38,63,.026);
  --superficie-2:rgba(14,38,63,.008);
  --borde:rgba(14,38,63,.13);
  --borde-fuerte:rgba(14,38,63,.24);
  background:var(--fondo);
  color:var(--texto-suave);
}
main section.claro.papel2{--fondo:var(--t-mint);background:var(--t-mint)}

/* ── cabecera de paginas interiores: oscura, como antes ── */
.cabecera{background:var(--t-azul);border-bottom:1px solid rgba(255,255,255,.12)}
.cabecera h1{color:var(--t-claro-fuerte)}
.cabecera .parrafo{color:var(--t-claro-cuerpo)}
.cabecera .acento{color:var(--t-turquesa);font-weight:700}
.cabecera .migas{color:var(--t-claro-tenue)}
.cabecera .migas a{color:var(--t-turquesa)}

/* ── barra y pie ── */
.barra{background:rgba(14,38,63,.93);border-bottom:1px solid rgba(20,184,177,.28)}
.barra nav a{color:var(--t-claro-cuerpo)}
.barra nav a:hover,.barra nav a[aria-current=page]{color:var(--t-turquesa)}
.menu-toggle span{background:#FFFFFF}
.menu-movil{background:var(--t-azul)}
.menu-movil a{color:#FFFFFF}
/* `.menu-movil a` (dos clases) le gana a `.btn-wa` (una): sin esto el boton
   verde del menu de celular se queda con letra BLANCA sobre turquesa — 2.46 */
.menu-movil .btn-wa{color:var(--t-azul)}
footer{background:var(--t-azul);border-top:0;color:var(--t-claro-cuerpo)}
.pie h4{color:#FFFFFF}
.pie p,.pie a{color:var(--t-claro-cuerpo)}
.pie a:hover{color:var(--t-turquesa)}
/* el gris de siempre sobre el azul da 3.4 — no pasa. Se aclara. */
.pie-legal{border-top-color:rgba(255,255,255,.15);color:#9DACBB}
.pie-legal a{color:#9DACBB}
.pie-legal a:hover{color:var(--t-turquesa)}

/* ── la linea de marca entre secciones ── */
.rumbo-linea{background:linear-gradient(90deg,transparent,var(--t-turquesa),transparent);opacity:.55}
main section.claro.borde-top{border-top:1px solid rgba(14,38,63,.13)}
main section:not(.claro).borde-top{border-top:1px solid rgba(255,255,255,.12)}

/* ══ BOTONES ══
   El turquesa con letra BLANCA da 2.15 — ilegible, era el fallo de la
   propuesta. Con letra azul sube a 6.2. */
.btn-wa{background:var(--t-turquesa);color:var(--t-azul);
  box-shadow:0 8px 22px rgba(20,184,177,.32)}
.btn-wa:hover{background:#12A69F;box-shadow:0 10px 26px rgba(20,184,177,.4)}
main section.claro .btn-linea{color:var(--t-azul);border-color:rgba(14,38,63,.26)}
main section.claro .btn-linea:hover{border-color:var(--t-turquesa-txt);color:var(--t-turquesa-txt);
  background:rgba(20,184,177,.06)}
main section:not(.claro) .btn-linea,.cabecera .btn-linea{color:#FFFFFF;border-color:rgba(255,255,255,.4)}
main section:not(.claro) .btn-linea:hover{border-color:var(--t-turquesa);color:var(--t-turquesa);
  background:rgba(20,184,177,.12)}

/* ══ TEXTO DE MARCA ══
   En NEGRITA — lo pidio Ricardo: el color solo no bastaba para que las
   palabras destacaran dentro del parrafo. */
main section .acento{font-weight:700}
main section.claro .acento{color:var(--t-turquesa-txt)}
main section:not(.claro) .acento{color:var(--t-turquesa)}
/* .oro: sobre azul si puede ir dorado (9.5); sobre claro no (1.61) */
main section.claro .oro{color:var(--t-turquesa-txt);font-weight:700}
main section:not(.claro) .oro{color:var(--t-dorado)}
/* el resaltado amarillo funciona en los dos: es FONDO, no letra */
.resalte{background:var(--t-dorado);color:var(--t-dorado-tinta)}

/* ══ HERO · BLANCO ══
   Ricardo lo pidio blanco el 25/08/2026, con el resto de la alternancia
   en azul. Ojo: .hero pinta con `background:var(--tinta)` directo, no
   con var(--fondo) — por eso hay que apagarlo aqui a mano. */
.hero{background:#FFFFFF;border-bottom:1px solid rgba(14,38,63,.13)}
.hero h1{color:var(--t-azul)}
.hero h1 .punto{color:var(--t-turquesa-txt)}
.hero .parrafo{color:var(--t-cuerpo)}
.hero-marcas.tec{color:var(--t-tenue)}
.sello{color:var(--t-turquesa-txt)}
.sello::before{background:var(--t-turquesa);box-shadow:0 0 10px rgba(20,184,177,.75)}
.caja-diag .campo{background:#FFFFFF;border:1.5px solid rgba(14,38,63,.24)}
.caja-diag .campo:focus-within{border-color:var(--t-turquesa);box-shadow:0 0 0 4px rgba(20,184,177,.16)}
.caja-diag input{color:var(--t-azul)}
.caja-diag input::placeholder{color:var(--t-tenue)}
.caja-diag .pista{color:var(--t-tenue)}
.lecturas{border-top-color:rgba(14,38,63,.13)}
.lectura b{color:var(--t-azul)}
.lectura i{color:var(--t-tenue)}
.hero-pie{border-top-color:rgba(14,38,63,.13)}
.hero-pie .dato b{color:var(--t-azul)}
.hero-pie .flecha{color:var(--t-turquesa-txt);border-bottom-color:var(--t-turquesa-txt)}
/* el visor conserva su marco oscuro: es la pantalla de un celular */
.visor::before,.visor::after{border-color:var(--t-turquesa)}
.visor-marco{box-shadow:0 24px 60px rgba(14,38,63,.2),0 0 0 1px rgba(14,38,63,.08)}
.visor-nota{color:var(--t-tenue)}

/* el hero blanco deja a la seccion siguiente (tambien blanca) pegada sin
   separacion: se le pone mint para que la alternancia siga leyendose */
main section.hero + section.claro{--fondo:var(--t-mint);background:var(--t-mint)}

/* ══ TARJETAS · se adaptan solas via --superficie y --borde ══ */
.servicio,.tarjeta,.persona,.no-hacemos,.comp-caja{
  background:linear-gradient(165deg,var(--superficie),var(--superficie-2));border-color:var(--borde)}
main section.claro .servicio,
main section.claro .tarjeta,
main section.claro .persona,
main section.claro .no-hacemos{background:#FFFFFF}
main section.claro.papel2 .servicio,
main section.claro.papel2 .tarjeta,
main section.claro.papel2 .persona,
main section.claro.papel2 .no-hacemos{background:#FFFFFF}
.servicio .num,.tarjeta .ico{background:rgba(20,184,177,.15);border-color:rgba(20,184,177,.36);color:var(--acento-txt)}
.servicio .logro::before,.servicio li::before{color:var(--acento-txt);background:var(--acento-txt)}
.servicio .logro::before{background:none}
.servicio .precio-linea,.persona .rol{color:var(--acento-txt)}

/* ══ CAMINO Y ESCALONES · el dorado luce sobre el azul ══ */
main section:not(.claro) .paso .nodo{background:var(--t-azul);border-color:var(--t-dorado);color:var(--t-dorado)}
main section.claro .paso .nodo{background:var(--t-dorado);border-color:var(--t-dorado);color:var(--t-dorado-tinta);
  box-shadow:0 0 0 6px rgba(255,195,0,.18)}
main section:not(.claro) .stepper-flecha{color:var(--t-dorado);filter:drop-shadow(0 0 8px rgba(255,195,0,.4))}
main section.claro .stepper-flecha{color:#B98A00;filter:none}
.camino-curva,.camino-paso svg{color:var(--t-dorado)}
main section:not(.claro) .camino-paso{background:var(--t-azul);border-color:var(--t-dorado)}
main section.claro .camino-paso{background:#FFFFFF;border-color:var(--t-dorado)}
main section.claro .camino-curva,main section.claro .camino-paso svg{color:#B98A00}
.camino-lista .num{color:var(--acento-txt)}

/* ══ QUE NO HACEMOS ══ */
main section:not(.claro) .no-hacemos li::before{background:rgba(255,195,0,.18);color:var(--t-dorado);
  border-color:rgba(255,195,0,.44)}
main section.claro .no-hacemos li::before{background:rgba(255,195,0,.26);color:#5C4708;
  border-color:rgba(255,195,0,.6)}

/* ══ FICHAS DE PRECIO ══ */
.precio-fila{background:linear-gradient(158deg,var(--superficie),var(--superficie-2));border-color:var(--borde)}
main section.claro .precio-fila{background:#FFFFFF}
.precio-fila .que{color:var(--texto-fuerte)}
.precio-fila .cuanto{color:var(--acento-txt)}
.precio-fila .detalle{color:var(--texto-suave)}

/* ══ NOTAS Y LETRA CHICA ══ */
.notas{border-left-color:var(--acento-txt)}
.notas li b,.notas h3{color:var(--texto-fuerte)}
.letra-chica{color:var(--texto-tenue)}
.letra-chica b{color:var(--texto-suave)}

/* ══ CIERRE ══ */
main section.cierre::before{
  background:radial-gradient(ellipse 58% 72% at 50% 55%,rgba(20,184,177,.2),transparent 72%)}
.wa-grande{color:#FFFFFF}
.wa-grande:hover{color:var(--t-turquesa)}
.cierre .tel{color:#FFFFFF}
.cierre .nota{color:var(--t-claro-tenue)}

/* ══ TEXTO LEGAL (aviso y terminos) ══ */
.legal a{color:var(--acento-txt)}
.legal .fecha{color:var(--texto-tenue)}