/* ==========================================================================
   PIEL «MAR CARIBE» PARA LAS PÁGINAS INTERNAS DE SIEMPRE (26-sep-2026)
   Planes, contacto, cotizador HSEQ, diagnóstico, blog, legales, acceso,
   registro, cuenta, feria, formación, calculadora de tráfico y las fichas que
   aún no tienen página nueva (Empresa, Esencial, Tráfico por su puerta).

   🔑 NO toca su HTML ni su lógica: las páginas siguen igual por dentro. Esto
      solo cambia las variables de color y letra de vitrina.css (la misma técnica
      que usó paleta-amiga.css el 14-sep) y quita lo que era del menú lateral.
   🔑 Todo va bajo body.cb-interna: la portada y las páginas de producto nuevas
      no se enteran. Quitar esta hoja = el contenido vuelve a sus colores viejos
      dentro del marco nuevo.
   ========================================================================== */

body.cb-interna{
  --bone:#F5FBFE;--paper:#FFFFFF;--ink:#062638;--ink-soft:#395A69;
  --esmeralda:#0077B6;--esmeralda-deep:#003B5C;--esmeralda-glow:rgba(0,119,182,.12);
  --oro:#00A896;--bruma:#D8F1FB;--line:#D3E9F2;
  --c-hseq:#003B5C;--c-tienda:#C9412F;--c-empresa:#A83327;--c-equipos:#0E8A6E;--c-trafico:#E8594A;--c-esencial:#0077B6;
  --font-display:'Lexend',system-ui,sans-serif;
  --font-body:'Lexend',system-ui,sans-serif;
  --font-mono:'Lexend',system-ui,sans-serif;
  background:#F5FBFE;font-family:var(--cb-font);color:#062638;line-height:1.6
}
/* lo que existía solo por el menú lateral viejo */
body.cb-interna::before{display:none}
body.cb-interna #progress,body.cb-interna .rail,body.cb-interna .barra-top{display:none!important}
body.cb-interna main{margin-left:0!important;position:relative;z-index:1}

/* títulos: Lexend fuerte, y lo que va en cursiva con la voz humana (Lora) */
body.cb-interna main h1,body.cb-interna main h2,body.cb-interna main h3{font-family:'Lexend',system-ui,sans-serif;color:#003B5C;letter-spacing:-.025em}
body.cb-interna main h1{font-weight:700}
body.cb-interna main h1 em,body.cb-interna main h2 em,body.cb-interna .eco-title em{font-family:'Lora',Georgia,serif;font-style:italic;font-weight:500;color:#0077B6}
body.cb-interna main .eyebrow{color:#00A896;font-family:'Lexend',system-ui,sans-serif;font-weight:700;letter-spacing:.12em}
body.cb-interna main .eyebrow::before{background:#00A896}
body.cb-interna main .lead{color:#395A69}

/* botones de siempre con la forma «Sandía»: píldora, anillo interior y brillo */
body.cb-interna main .btn{border-radius:999px;font-family:'Lexend',system-ui,sans-serif;font-weight:700}
body.cb-interna main .btn--solid,body.cb-interna main .btn--vivo{background:#0077B6;color:#fff;box-shadow:inset 0 0 0 3px rgba(255,255,255,.3),0 14px 28px -12px rgba(0,119,182,.75)}
body.cb-interna main .btn--solid:hover,body.cb-interna main .btn--vivo:hover{box-shadow:inset 0 0 0 3px rgba(255,255,255,.5),0 18px 30px -12px rgba(0,59,92,.7);color:#fff}
body.cb-interna main .btn--ghost{border:1.5px solid #003B5C;color:#003B5C;background:transparent}
body.cb-interna main .btn--ghost:hover{background:#003B5C;color:#fff;border-color:#003B5C}
body.cb-interna main a:not(.btn):not(.cb-btn){color:#0077B6}
body.cb-interna main a:not(.btn):not(.cb-btn):hover{color:#E8594A}

/* tarjetas y formularios en el tono Mar Caribe */
body.cb-interna main .tarjeta{background:#fff;border:1px solid #D3E9F2;border-radius:24px;box-shadow:none}
body.cb-interna main .tarjeta--hover:hover{box-shadow:0 22px 40px -18px rgba(0,59,92,.35)}
body.cb-interna main .campo label{font-family:'Lexend',system-ui,sans-serif;color:#003B5C}
body.cb-interna main .campo input,body.cb-interna main .campo select,body.cb-interna main .campo textarea{border:1.5px solid #D3E9F2;border-radius:14px;background:#fff;font-family:'Lexend',system-ui,sans-serif;color:#062638}
body.cb-interna main .campo input:focus,body.cb-interna main .campo select:focus,body.cb-interna main .campo textarea:focus{border-color:#0077B6;box-shadow:0 0 0 4px rgba(0,119,182,.14);outline:none}
body.cb-interna main .tag{background:#D8F1FB;color:#003B5C}

/* la «a» de las puertas de entrar / crear cuenta, en el azul de la marca */
body.cb-interna .puerta__marca{background:linear-gradient(135deg,#0077B6,#003B5C)!important;box-shadow:0 10px 22px -12px rgba(0,59,92,.5)!important}

/* franjas de cierre que eran lavanda/esmeralda → azul mar */
body.cb-interna #contacto.cta-final--viva,body.cb-interna .cta-final{background:#003B5C!important;color:#fff}
body.cb-interna .cta-final h2{color:#fff}
body.cb-interna .cta-final .btn--blanco{color:#003B5C!important}

/* el primer bloque no se esconde detrás del encabezado fijo */
body.cb-interna main > section:first-child,body.cb-interna main > div:first-child{scroll-margin-top:130px}

/* 9-oct-2026 (paquete 84) · en las puertas de entrar / crear cuenta / recuperar, Ami turquesa en vez de la «a» en un cuadro azul */
body.cb-interna .puerta__marca--ami{width:84px;height:84px;background:none!important;box-shadow:none!important;border-radius:50%;margin-bottom:16px}
body.cb-interna .puerta__marca--ami img{width:84px;height:84px;display:block;filter:drop-shadow(0 12px 18px rgba(0,119,182,.22))}
/* 9-oct-2026 (paquete 84) · sin el brillo verde que sigue al cursor (vitrina.js): en el panel parecía una mancha */
body.cb-interna .aura{display:none!important}

/* 10-oct-2026 (p112) · páginas internas en celular (blog, legales, acceso, formación): letra mínima 12 px.
   Los rótulos y fechas venían con font-size .58-.66rem escrito en la propia etiqueta (9-10,5 px). */
@media (max-width:720px){
  body.cb-interna .etiqueta,body.cb-interna a.chip,body.cb-interna .crumb,body.cb-interna .campo label,body.cb-interna .articulo__meta,
  body.cb-interna main [style*="font-size:.58rem"],body.cb-interna main [style*="font-size:.6rem"],body.cb-interna main [style*="font-size:.62rem"],
  body.cb-interna main [style*="font-size:.64rem"],body.cb-interna main [style*="font-size:.66rem"],body.cb-interna main [style*="font-size:.68rem"]{font-size:12px!important}
}