/* =============================================================================================
   vitrina.css — la portada con la imagen corporativa de 360 Success (21-oct-2026)

   La orden del 21-oct: «ya todos los productos deben adecuarse a la imagen corporativa».
   La meta es `Imagen Corporativa 360 success espanol.png` (inbox/platform/logos-2026-09-30) y la
   paleta del Board Brand. Se eligió la versión B («Pilares») entre tres capturadas.

   Va DESPUÉS de base.css y de tokens.css (copia exacta de platform/marca/tokens.css). Hace de
   «producto.css» de ADR-054: el acento y los colores que sólo usa la vitrina viven aquí, en :root,
   y en ningún otro sitio de esta hoja.

   EL AZUL. Aprobado el 21-oct (#126BFF, 360 Blue del manual). Con texto blanco encima da
   4,47:1 y no llega al AA (medido por Capa 0 el 21-oct). Por eso se parte en dos:
     · --azul-marca #126BFF: iconos y detalles, sin texto encima (3,88:1 sobre medianoche ≥ 3:1).
     · --acento     #0B57D0: botones y enlaces (6,22:1 con --blanco encima; 6,0:1 sobre --nube).
   ============================================================================================= */

:root {
  --acento: #0b57d0;
  --acento-hover: #0947ab;
  --azul-marca: #126bff;
  --medianoche: #07182d;     /* 360 Midnight: fondos grandes */
  --medianoche-2: #0c2340;   /* la banda de Max, un punto más clara */
  --cian: #18c7eb;           /* 360 Cyan: rayas, lemas y realces sobre oscuro (8,84:1) */
  --nube: #f5f8fc;           /* 360 Cloud: fondo claro */
  --sobre-oscuro: #e8eef6;
  --sobre-oscuro-suave: #a9b8cc; /* 8,84:1 sobre medianoche */
  --linea-oscura: rgba(255, 255, 255, .14);
}

.portada { margin: 0; font-family: var(--sans); font-size: var(--texto); line-height: var(--interlineado); color: var(--tinta); background: var(--nube); }
.portada .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 600px) { .portada .wrap { padding: 0 18px; } }
.portada .rej > * { min-width: 0; }
.mayus { text-transform: uppercase; letter-spacing: .32em; font-size: 12px; font-weight: 500; }
.raya { display: block; width: 40px; height: 2px; background: var(--cian); margin-top: 14px; }

.portada a:focus-visible, .portada button:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--medianoche), 0 0 0 4px var(--cian); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--acento); color: var(--blanco); font: inherit; font-weight: 600; font-size: 15px; padding: 12px 22px; border-radius: var(--radio); border: 0; cursor: pointer; }
.btn:hover { background: var(--acento-hover); }

/* ── Cabecera ─────────────────────────────────────────────────────────────────────────────── */
.cab { background: var(--medianoche); border-bottom: 1px solid var(--linea-oscura); position: sticky; top: 0; z-index: 20; }
.cab .wrap { display: flex; align-items: center; height: 68px; gap: 24px; }
.cab img { height: 40px; width: auto; display: block; }
.cab .menu { margin-left: auto; display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--sobre-oscuro-suave); }
.cab .menu a:hover { color: var(--blanco); }
.cab .menu .btn { color: var(--blanco); }
@media (max-width: 760px) { .cab .menu a:not(.btn) { display: none; } .cab img { height: 34px; } }

/* ── Primer viewport: el panorama ──────────────────────────────────────────────────────────
   La curva de la Tierra y el amanecer de la imagen corporativa, dibujados en CSS (no hay foto
   nuestra que se pueda usar). Arriba a la derecha, sin cruzar el texto. */
.panorama { position: relative; overflow: hidden; background: var(--medianoche); color: var(--sobre-oscuro); padding: 72px 0 64px; }
.panorama::before { content: ""; position: absolute; width: 1100px; height: 1100px; border-radius: 50%; right: -900px; top: -700px;
  background: radial-gradient(circle at 35% 70%, var(--medianoche-2) 0%, var(--medianoche) 70%);
  box-shadow: -2px 4px 0 0 rgba(24, 199, 235, .7), -12px 18px 40px rgba(18, 107, 255, .55), -40px 60px 140px rgba(18, 107, 255, .25); }
.panorama::after { content: ""; position: absolute; width: 240px; height: 240px; right: 40px; top: 40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 240, 215, .9) 0%, rgba(255, 205, 140, .35) 14%, rgba(18, 107, 255, .12) 40%, transparent 65%); }
.panorama > .wrap { position: relative; z-index: 2; }
.panorama .rej { display: grid; grid-template-columns: 1.4fr .6fr; gap: 48px; align-items: center; }
.panorama .grande { height: clamp(80px, 11vw, 150px); width: auto; display: block; margin-bottom: 18px; }
.panorama .lema { margin: 0; font-size: clamp(14px, 1.6vw, 20px); font-weight: 400; letter-spacing: .2em; text-transform: uppercase; line-height: 1.5; }
.panorama .lema b { display: block; color: var(--cian); font-weight: 500; }
.panorama h1 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 700; color: var(--blanco); letter-spacing: -.02em; line-height: 1.1; margin: 26px 0 14px; }
.panorama .lede { color: var(--sobre-oscuro); font-size: var(--texto-grande); max-width: 56ch; margin: 0; overflow-wrap: anywhere; }
.panorama .lede em { font-style: normal; color: var(--cian); font-weight: 600; }

/* Los pilares, como la columna derecha de la imagen. */
.pilares { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.pilares li { display: flex; gap: 16px; align-items: center; }
.pilares .aro { width: 56px; height: 56px; border-radius: 50%; border: 1.5px solid var(--cian); display: grid; place-items: center; flex: none; box-shadow: 0 0 18px rgba(24, 199, 235, .25); }
.pilares svg { width: 26px; height: 26px; color: var(--cian); }
.pilares b { display: block; text-transform: uppercase; letter-spacing: .12em; font-size: 14px; color: var(--blanco); font-weight: 600; }
.pilares small { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--sobre-oscuro-suave); }

/* Los cuatro pasos: icono de línea, verbo en mayúsculas, separadores verticales. */
.ciclo { display: grid; grid-template-columns: repeat(4, 1fr); margin: 44px 0 0; padding: 0; list-style: none; }
.ciclo li { padding: 4px 22px; border-left: 1px solid var(--linea-oscura); }
.ciclo li:first-child { border-left: 0; }
.ciclo svg { width: 34px; height: 34px; color: var(--azul-marca); display: block; margin: 0 0 10px; }
.ciclo .v { display: block; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; color: var(--blanco); }
.ciclo .c { display: block; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; color: var(--sobre-oscuro-suave); margin-top: 4px; }

@media (max-width: 900px) {
  .panorama .rej { grid-template-columns: 1fr; gap: 28px; }
  .panorama::before { width: 700px; height: 700px; right: -520px; top: -470px; }
  .panorama::after { right: 60px; top: 150px; width: 160px; height: 160px; }
}
@media (max-width: 760px) {
  .ciclo { grid-template-columns: 1fr 1fr; row-gap: 22px; }
  .ciclo li { text-align: center; }
  .ciclo li:nth-child(3) { border-left: 0; }
  .ciclo svg { margin: 0 auto 10px; }
}

/* ── Max, en su banda ─────────────────────────────────────────────────────────────────────── */
.banda-max { background: var(--medianoche-2); color: var(--sobre-oscuro); padding: 56px 0; border-top: 1px solid var(--linea-oscura); }
.banda-max .rej { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }
.banda-max h2 { color: var(--blanco); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; margin: 10px 0 12px; }
.banda-max .mayus { color: var(--cian); }
.banda-max p { color: var(--sobre-oscuro); overflow-wrap: anywhere; }
.banda-max .rutas { margin-top: 20px; gap: 8px; }
.banda-max .rutas .lbl { width: 100%; font-size: var(--texto-pequeno); color: var(--sobre-oscuro-suave); }
.banda-max .rutas button { font: inherit; font-size: 14px; background: rgba(255, 255, 255, .04); color: var(--sobre-oscuro); border: 1px solid rgba(24, 199, 235, .35); border-radius: var(--radio-s); padding: 8px 13px; }
.banda-max .rutas button:hover { border-color: var(--cian); color: var(--blanco); background: rgba(24, 199, 235, .08); }
.banda-max .chatbox { margin: 0; max-width: none; border: 0; border-top: 3px solid var(--cian); border-radius: var(--radio-l); color: var(--tinta); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); }
.banda-max .chat-top { background: none; }
.banda-max .chat-top .av { background: var(--medianoche); color: var(--cian); }
.banda-max .chat-in input { min-width: 0; }
.banda-max .chat-in button { background: var(--acento); }
.banda-max .voz { border-top-color: var(--linea-oscura); }
.banda-max .voz-aviso { color: var(--sobre-oscuro-suave); font-size: var(--texto-pequeno); }
@media (max-width: 900px) { .banda-max .rej { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 600px) { .banda-max .cmsg { max-width: 92%; } }

/* ── Productos: lista con reglas, no rejilla de tarjetas iguales ───────────────────────────── */
.productos { padding: 72px 0; }
.productos .mayus, .escribir .mayus { color: var(--acento); }
.productos h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.01em; margin: 10px 0 0; color: var(--medianoche); }
.lista { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--regla); }
.lista li a { display: grid; grid-template-columns: 230px 1fr auto; gap: 28px; align-items: center; padding: 20px 8px; border-bottom: 1px solid var(--regla); }
.lista li a:hover { background: var(--blanco); }
.lista img { height: 64px; width: auto; max-width: 100%; }
.lista .q { font-size: 16px; color: var(--tinta); }
.lista .ir { font-weight: 600; color: var(--acento); font-size: 14px; white-space: nowrap; }
@media (max-width: 760px) { .lista li a { grid-template-columns: 1fr; gap: 8px; } .lista img { height: 48px; } .lista .ir { white-space: normal; } }

/* ── Si prefiere escribir ─────────────────────────────────────────────────────────────────── */
.escribir { background: var(--blanco); border-top: 1px solid var(--regla); padding: 72px 0; }
.escribir .rej { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; }
.escribir h2 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; margin: 10px 0 12px; color: var(--medianoche); }
.escribir p { color: var(--tinta-suave); font-size: 16px; }
.escribir .form { margin: 0; max-width: none; box-shadow: var(--sombra-2); border: 1px solid var(--regla); border-radius: var(--radio-l); }
.escribir .campo input, .escribir .campo select, .escribir .campo textarea { font-size: 16px; border-color: var(--borde-control); }
.escribir #l-enviar { background: var(--acento); color: var(--blanco); border-radius: var(--radio); }
.escribir #l-enviar:hover { background: var(--acento-hover); }
@media (max-width: 860px) { .escribir .rej { grid-template-columns: 1fr; gap: 20px; } }

/* ── Pie, como la franja inferior de la imagen ────────────────────────────────────────────── */
.pie { background: var(--medianoche); color: var(--sobre-oscuro-suave); padding: 34px 0; font-size: 14px; }
.pie .wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.pie img { height: 44px; width: auto; }
.pie .lema { letter-spacing: .3em; text-transform: uppercase; font-size: 12px; flex: 1; display: flex; align-items: center; gap: 18px; }
.pie .lema::before, .pie .lema::after { content: ""; height: 1px; width: 56px; background: var(--linea-oscura); }
.pie a { color: var(--sobre-oscuro); }
.pie .legal { width: 100%; font-size: var(--texto-pequeno); }
@media (max-width: 600px) { .pie .lema::before, .pie .lema::after { display: none; } .pie .lema { letter-spacing: .2em; } }

/* base.css le pone a todo <form> 460px de ancho (línea `form{…max-width:460px}`): aquí ocupan su tarjeta. */
.escribir #leadf, .banda-max .chat-in { max-width: none; }
/* En 390px el estado de Max («Entiende su caso… · en línea») se cortaba: que baje de línea. */
.banda-max .chat-top > div { min-width: 0; }
.banda-max .chat-top .st { white-space: normal; flex-wrap: wrap; }

/* =============================================================================================
   LAS PÁGINAS DE PRODUCTO (PR 2, 21-oct-2026). El marco es de la casa (cabecera y pie medianoche,
   como la portada); el cuerpo es claro, como la imagen corporativa de cada producto, con su logo y
   su acento. El acento es el aprobado en platform/marca/acentos.json; quien no tiene fila todavía
   usa el de la vitrina. Todos dan ≥ 4,9:1 con --blanco encima y sobre --nube.
   ============================================================================================= */
.pagina { --prod: var(--acento); --prod-hover: var(--acento-hover); }
.p-anticipa2  { --prod: #b3470a; --prod-hover: #96390a; }
.p-autonomous { --prod: #007a58; --prod-hover: #006348; }
.p-clickpay   { --prod: #1466c9; --prod-hover: #1054a6; }

.ficha { background: var(--nube); padding: 64px 0 56px; border-bottom: 1px solid var(--regla); }
.ficha .rej { display: grid; grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: start; }
.ficha .lp-logo { width: min(400px, 78vw); margin: 0 0 18px; }
.ficha h1 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; color: var(--medianoche); margin: 0 0 16px; }
.ficha h1 b { color: var(--prod); font-weight: 700; }
.ficha .lede { font-size: var(--texto-grande); color: var(--tinta); max-width: 58ch; margin: 0 0 26px; }
.pagina .cta { background: var(--prod); color: var(--blanco); border-radius: var(--radio); font-weight: 600; padding: 12px 22px; }
.pagina .cta:hover { background: var(--prod-hover); }
.pagina .cta.ghost { background: var(--blanco); color: var(--tinta); border: 1px solid var(--borde-control); }
.pagina .cta.ghost:hover { border-color: var(--prod); color: var(--prod); background: var(--blanco); }
.ficha .rutas { margin-top: 24px; gap: 8px; }
.ficha .rutas .lbl { width: 100%; font-size: var(--texto-pequeno); color: var(--tinta-suave); }
.ficha .rutas button { font: inherit; font-size: 14px; background: var(--blanco); color: var(--tinta); border: 1px solid var(--borde-control); border-radius: var(--radio-s); padding: 8px 13px; }
.ficha .rutas button:hover { border-color: var(--prod); color: var(--prod); background: var(--blanco); }
.ficha .voz { border-top: 1px solid var(--regla); margin-top: 22px; padding-top: 14px; }
.ficha .voz-aviso { color: var(--tinta-suave); font-size: var(--texto-pequeno); }

/* Los tres beneficios: numerados y con regla, no tres tarjetas iguales. */
.ficha-ben { padding-top: 8px; }
.ficha-ben .mayus { color: var(--tinta-suave); }
.beneficios { counter-reset: beneficio; list-style: none; margin: 18px 0 0; padding: 0; border-top: 2px solid var(--prod); }
.beneficios li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--regla); }
.beneficios li { counter-increment: beneficio; }
/* El número lo pone el CSS: es numeración, no una cifra publicada (cifras-publicadas.json). */
.beneficios li::before { content: "0" counter(beneficio); font-family: var(--cifra); font-size: 15px; font-weight: 500; color: var(--prod); padding-top: 2px; }
.beneficios h3 { font-size: 18px; font-weight: 600; color: var(--medianoche); margin: 0 0 6px; }
.beneficios p { font-size: var(--texto); color: var(--tinta-suave); margin: 0; }

.para { background: var(--blanco); padding: 64px 0; }
.para .lp-para { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.para .eyebrow { color: var(--prod); text-transform: uppercase; letter-spacing: .32em; font-size: 12px; font-weight: 500; }
.para h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; color: var(--medianoche); margin: 10px 0 0; }
.para p { font-size: 16px; color: var(--tinta); margin: 0 0 14px; max-width: 64ch; }

.pagina .escribir { background: var(--nube); }
.pagina .escribir .mayus { color: var(--prod); }
.pagina .escribir #l-enviar { background: var(--prod); }
.pagina .escribir #l-enviar:hover { background: var(--prod-hover); }
.pagina .escribir .volver { display: inline-block; margin-top: 14px; color: var(--acento); font-weight: 600; font-size: 14px; }
.pagina .lp-firma { color: var(--tinta-suave); font-size: var(--texto-pequeno); margin: 16px 0 0; text-align: center; }

@media (max-width: 900px) {
  .ficha .rej, .para .lp-para { grid-template-columns: 1fr; gap: 28px; }
}

/* La voz de Max sobre fondo claro (base.css la pinta para el oscuro). */
.ficha .voz-btn { background: var(--blanco); border-color: var(--prod); color: var(--prod); }
.ficha .voz-btn:hover { background: var(--nube); }
.ficha .voz-texto { color: var(--acento); }
.ficha .voz-esperando { color: var(--tinta-suave); }
/* Y sobre la banda oscura de la portada: el cian de la casa, no el violeta. */
.banda-max .voz-btn { background: rgba(24, 199, 235, .08); border-color: rgba(24, 199, 235, .5); color: var(--sobre-oscuro); }
.banda-max .voz-texto { color: var(--cian); }

/* Negocios de servicio: página de la casa, con el primer viewport de la portada. */
.casa .panorama h1 { font-size: clamp(30px, 3.8vw, 48px); max-width: 22ch; }
.casa .panorama h1 b, .casa .panorama .lede b { color: var(--cian); font-weight: 600; }
.casa .panorama .lede { margin-bottom: 8px; }
.casa .panorama .rutas { margin-top: 22px; gap: 8px; }
.casa .panorama .rutas .lbl { width: 100%; font-size: var(--texto-pequeno); color: var(--sobre-oscuro-suave); }
.casa .panorama .rutas button { font: inherit; font-size: 14px; background: rgba(255, 255, 255, .04); color: var(--sobre-oscuro); border: 1px solid rgba(24, 199, 235, .35); border-radius: var(--radio-s); padding: 8px 13px; }
.casa .panorama .rutas button:hover { border-color: var(--cian); color: var(--blanco); }
.casa .panorama .voz { border-top-color: var(--linea-oscura); max-width: 640px; }
.casa .panorama .voz-aviso { color: var(--sobre-oscuro-suave); font-size: var(--texto-pequeno); }
.casa .panorama .voz-btn { background: rgba(24, 199, 235, .08); border-color: rgba(24, 199, 235, .5); color: var(--sobre-oscuro); }
.casa .panorama .voz-texto { color: var(--cian); }
.casa .panorama .hero-cta { margin-top: 26px; }
.casa .cta { background: var(--acento); color: var(--blanco); border-radius: var(--radio); font-weight: 600; }
.casa .cta:hover { background: var(--acento-hover); }
.casa .cta.ghost { background: transparent; color: var(--sobre-oscuro); border: 1px solid rgba(255, 255, 255, .3); }
.casa .escribir .volver { display: inline-block; margin-top: 14px; color: var(--acento); font-weight: 600; font-size: 14px; }

/* ── El planeta y la franja de fotos (21-oct-2026, encargo de Capa 0) ──────────────────────
   El planeta es la Black Marble de la NASA (FUENTES.md). Su fondo es negro: con `screen` el negro
   desaparece sobre la medianoche y sólo queda la Tierra y su borde iluminado. Donde hay planeta, el
   arco dibujado en CSS sobra. */
.panorama:has(.planeta)::before { display: none; }
.planeta { position: absolute; z-index: 1; width: min(900px, 64vw); height: auto; right: -12%; top: -10%;
  transform: rotate(-38deg); mix-blend-mode: screen; pointer-events: none; user-select: none; }
.panorama:has(.planeta)::after { z-index: 1; right: 2%; top: -16%; width: 320px; height: 320px; }
/* Velo hacia la izquierda: el texto nunca va encima de la Tierra iluminada. */
.panorama:has(.planeta) > .wrap::before { content: ""; position: absolute; inset: -80px 30% -80px -100vw; z-index: -1;
  background: linear-gradient(90deg, var(--medianoche) 0%, var(--medianoche) 70%, transparent 100%); }
/* Los pilares van encima de la Tierra, como en la imagen. Detrás, un velo de medianoche al 85 % con
   el borde difuminado: aunque debajo haya una ciudad encendida (blanco puro), --sobre-oscuro-suave
   queda a 5,67:1 y el blanco a 11,1:1 (mezcla #2c3b4c, medido el 21-oct). */
.panorama .pilares { position: relative; }
.panorama:has(.planeta) .pilares::before { content: ""; position: absolute; inset: -8px -4px; z-index: -1; border-radius: 40px;
  background: rgba(7, 24, 45, .85); box-shadow: 0 0 36px 28px rgba(7, 24, 45, .85); }
@media (max-width: 900px) {
  .planeta { width: 130vw; right: -78vw; top: -62vw; opacity: .7; }
  .panorama:has(.planeta)::after { right: -10%; top: -30px; width: 160px; height: 160px; }
  .panorama:has(.planeta) > .wrap::before { display: none; }
}

/* Para quién: cinco fotos de borde a borde, con su nombre y su «más …» como en la imagen. */
.publicos { padding: 0; background: var(--medianoche); border-top: 1px solid var(--linea-oscura); }
.publicos ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.publicos li { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-left: 1px solid var(--linea-oscura); }
.publicos li:first-child { border-left: 0; }
.publicos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.publicos li:nth-child(1) img { object-position: 80% 40%; }
.publicos li:nth-child(3) img { object-position: 50% 30%; }
/* El velo deja el texto blanco por encima de 4,5:1 aunque debajo haya blanco puro: en la franja del
   texto el velo es medianoche al 88 % (mezcla con #fff → #253446; #fbfcfd encima 12,3:1, --sobre-oscuro 10,9:1). */
.publicos .velo { position: absolute; inset: auto 0 0 0; padding: 48px 18px 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(7, 24, 45, .88) 52%, rgba(7, 24, 45, .88) 100%); }
.publicos b { display: block; color: var(--blanco); text-transform: uppercase; letter-spacing: .14em; font-size: 14px; font-weight: 600; }
.publicos small { display: block; color: var(--sobre-oscuro); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; margin-top: 2px; }
.publicos small::after { content: ""; display: block; width: 28px; height: 2px; background: var(--cian); margin-top: 10px; }
/* En el móvil, dos columnas y la quinta a lo ancho: se ven las cinco sin deslizar (se comparó en
   captura con la franja que se desliza, que dejaba tres y media fuera de la vista). */
@media (max-width: 760px) {
  .publicos ul { grid-template-columns: 1fr 1fr; }
  .publicos li:nth-child(odd) { border-left: 0; }
  .publicos li:last-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  .publicos .velo { padding: 36px 14px 12px; }
  .publicos b { font-size: 13px; letter-spacing: .1em; }
  .publicos small { font-size: 11px; letter-spacing: .1em; }
}

/* =============================================================================================
   MAX CON LA IMAGEN CORPORATIVA (PR 3, 21-oct-2026). base.css pinta el chat, el botón flotante,
   el panel y el cierre con --acc (violeta) y --em. En las páginas de la marca nueva esas dos
   variables pasan a ser las de la casa: el azul de la vitrina y el verde de la base. El verde
   viejo (#0FA974) daba 2,9:1 sobre blanco en el «en línea» de 12px; --exito da 6,3:1.
   Max es de 360 Success: lleva el azul de la casa también en las páginas de producto.
   ============================================================================================= */
.portada { --acc: var(--acento); --acc-d: var(--acento-hover); --acc-soft: var(--info-fondo); --em: var(--exito); --em-soft: var(--exito-fondo); }
.portada .chatbox { border-radius: var(--radio-l); border-color: var(--regla); }
.portada .chat-top { background: var(--blanco); }
.portada .chat-top .av, .portada .max-fab .av { background: var(--medianoche); color: var(--cian); font-weight: 700; }
.portada .chat-top .nm { color: var(--medianoche); }
.portada .chat-top .st { font-weight: 500; }
/* En el panel flotante la cabecera es estrecha: el avatar no se encoge y el estado baja de línea
   en vez de cortarse (como ya se hizo en .banda-max). */
.portada .chat-top .av { flex: none; }
.portada .chat-top > div { min-width: 0; }
.portada .chat-top .st { display: block; white-space: normal; }
.portada .chat-top .st .d { display: inline-block; margin-right: 5px; vertical-align: 1px; }
.portada .cmsg { font-size: 15px; }
.portada .cmsg.s { background: var(--nube); border-color: var(--regla); color: var(--tinta); }
.portada .chat-in input { border-color: var(--borde-control); font-size: 16px; }
.portada .chat-in input:focus { border-color: var(--acento); box-shadow: var(--anillo); }
.portada .cbtn { background: var(--blanco); font-weight: 600; }

/* El botón flotante: la medianoche de la marca con el aro cian, como los pilares. */
.portada .max-fab { background: var(--medianoche); color: var(--blanco); border: 1px solid rgba(24, 199, 235, .55);
  font-weight: 600; box-shadow: 0 14px 34px -12px rgba(7, 24, 45, .7), 0 0 18px rgba(24, 199, 235, .18); }
.portada .max-fab:hover { background: var(--medianoche-2); border-color: var(--cian); }
.portada .max-fab .av { box-shadow: inset 0 0 0 1.5px var(--cian); }
.portada .max-panel .chatbox { box-shadow: var(--sombra-3); border-top: 3px solid var(--cian); }

/* Los :hover de la voz que base.css deja en violeta, o en blanco sobre la página clara (ahí
   «Prefiero escribir» desaparecía al pasar el ratón). */
.ficha .voz-texto:hover { color: var(--acento-hover); }
.banda-max .voz-btn:hover, .casa .panorama .voz-btn:hover { background: rgba(24, 199, 235, .16); border-color: var(--cian); color: var(--blanco); }
.banda-max .voz-texto:hover, .casa .panorama .voz-texto:hover { color: var(--blanco); }

/* ── 360 Cargo (PR 4, 21-oct-2026) ─────────────────────────────────────────────────────────────
   En pausa hasta el 1-dic, pero se sigue sirviendo: la misma casa que servicios.html, con el
   embarque de ejemplo a la derecha (es lo que enseña el producto). */
.carga .panorama .rej { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.carga .panorama .modos { margin-top: 22px; color: var(--sobre-oscuro-suave); font-size: var(--texto-pequeno); }
.carga .panorama .nota { margin-top: 12px; max-width: 54ch; padding-left: 13px; border-left: 2px solid var(--cian);
  color: var(--sobre-oscuro-suave); font-size: var(--texto-pequeno); }
.carga .panorama .nota strong { color: var(--sobre-oscuro); font-weight: 600; }
.carga .ship { background: var(--medianoche-2); border: 1px solid var(--linea-oscura); border-radius: var(--radio-l);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(24, 199, 235, .08); }
.carga .ship-id { color: var(--blanco); font-weight: 600; }
.carga .ship-ruta { font-size: 13px; color: var(--sobre-oscuro-suave); margin-top: 2px; }
.carga .pill.tr { background: rgba(24, 199, 235, .12); color: var(--cian); border-color: rgba(24, 199, 235, .4); }
.carga .kv dt, .carga .track-lab, .carga .ship-note { color: var(--sobre-oscuro-suave); }
.carga .kv dd { color: var(--sobre-oscuro); }
.carga .track i.on { background: var(--cian); }
@media (max-width: 900px) { .carga .panorama .rej { grid-template-columns: 1fr; gap: 36px; } }
.carga .pill { white-space: nowrap; }

/* ── El idioma (22-oct-2026) ──────────────────────────────────────────────────────────────────
   La puerta se pinta una vez, al entrar por primera vez (decisión del 20-ago: se pregunta y se
   respeta); el selector de la cabecera deja cambiar de idea sin borrar el navegador. Los dos los
   pinta `assets/idioma.js`. */
.idioma-sel { display: flex; align-items: center; gap: 2px; font-size: 12px; }
.idioma-sel-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.idioma-sel-op { background: none; border: 0; color: var(--sobre-oscuro-suave); font: inherit; font-weight: 600; letter-spacing: .08em; padding: 6px; cursor: pointer; border-radius: var(--radio-s); }
.idioma-sel-op:hover { color: var(--blanco); }
.idioma-sel-op.es-este { color: var(--blanco); box-shadow: inset 0 -2px 0 var(--cian); }
.idioma-puerta { position: fixed; inset: 0; z-index: 50; background: rgba(7, 24, 45, .78); display: flex; align-items: center; justify-content: center; padding: 16px; }
.idioma-caja { background: var(--blanco); color: var(--tinta); border-radius: var(--radio-l); padding: 28px 24px; width: 100%; max-width: 420px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.idioma-preg { margin: 0 0 20px; font-size: 16px; font-weight: 600; line-height: 1.55; }
.idioma-ops { display: flex; flex-direction: column; gap: 10px; }
.idioma-op { background: var(--acento); color: var(--blanco); border: 0; font: inherit; font-weight: 600; font-size: 16px; padding: 13px 18px; border-radius: var(--radio); cursor: pointer; }
.idioma-op:hover { background: var(--acento-hover); }