, y sin él el enlace de
regreso quedaría pegado al logotipo en vez de al borde derecho. */
.barra__nav { display: flex; }
/* Aquí sí cabe: el marcador vuelve a ser texto normal. */
.barra__acciones [data-wa-pendiente] {
position: static;
width: auto; height: auto;
margin: 0;
overflow: visible;
clip-path: none;
}
}
/* ── Hero ───────────────────────────────────────────────────────────────────
Una foto, una frase y un botón. Es la proporción de petinsurance.com, que fue
la referencia, y es también lo que la foto aguanta: cuanto menos texto va
encima, menos hace falta oscurecerla para que se lea.
El precio ya no vive aquí — vive en #precios, que es a donde apunta el botón. */
.hero {
--alto: clamp(460px, 52vw, 660px);
position: relative;
isolation: isolate;
background: var(--navy-950); /* piso mientras carga */
color: var(--blanco);
min-height: var(--alto);
display: grid;
align-items: center; /* la frase, a media altura */
padding-block: 64px;
overflow: hidden;
}
/* ── La foto ──
Las dos ocupan la misma caja; el conmutador de #precios esconde una con
[hidden]. Ocupa el hero entero, a sangre. */
.hero__fondo { position: absolute; inset: 0; z-index: -1; }
.hero__fondo picture { display: block; position: absolute; inset: 0; }
.hero__fondo picture[hidden] { display: none; }
.hero__fondo img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center 40%;
display: block;
}
/* Por debajo de 768px se sirve el recorte vertical, que encuadra distinto. */
@media (max-width: 767px) {
.hero__fondo img { object-position: 46% 34%; }
}
/* El oscurecido. Va DENTRO de .hero__fondo y después de las dos fotos, así que
pinta sobre ellas y nunca sobre el texto.
Ya NO es el velo plano navy al 56%: teñía la foto entera de azul y Pedro lo
quitó (25-ago-2026). Es una escrima NEUTRA y direccional: sostiene el titular
y el botón en la franja izquierda y deja la derecha de la foto en sus colores
reales. Negro y no navy a propósito: el negro oscurece sin teñir. El titular
lleva además un text-shadow como refuerzo local donde la escrima ya afloja. */
.hero__fondo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(0,0,0,.62) 0%,
rgba(0,0,0,.52) 38%,
rgba(0,0,0,.44) 62%,
rgba(0,0,0,0) 88%);
}
/* En angosto el texto ocupa casi todo el ancho: la escrima no puede soltar. */
@media (max-width: 767px) {
.hero__fondo::after {
background: linear-gradient(90deg,
rgba(0,0,0,.62) 0%,
rgba(0,0,0,.50) 55%,
rgba(0,0,0,.38) 100%);
}
}
.hero__contenido { position: relative; z-index: 1; }
/* El bloque de contenido comparte elemento con `.contenedor`: si se le pusiera
un max-width propio, el texto del hero dejaría de alinearse con el de las
secciones de abajo. Se limita la MEDIDA de sus hijos, no la caja — salvo la
reja, que existe justamente para ocupar el ancho entero. */
.hero__titulo {
color: var(--blanco);
font-size: clamp(2.5rem, 5.6vw, 4rem);
line-height: 1.04;
/* Renglones cortos, como los de la referencia: la frase pega más partida en
tres que estirada en uno solo. */
max-width: 15ch;
margin: 0 0 32px;
/* Refuerzo local: la cola del titular alcanza la zona donde la escrima ya
bajó; el halo mantiene legible el peor píxel sin velar más foto. */
text-shadow: 0 1px 2px rgba(0,0,0,.38), 0 6px 28px rgba(0,0,0,.38);
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
/* El botón va sobre una foto y su borde no puede fiarse del relleno: medido, el
cian se quedaba en 2.38:1 contra los claros de la foto del gato, y la 1.4.11
pide 3:1 para el contorno de un control.
El anillo es BLANCO y no navy. Con navy queda un hueco: el cian sólo despega
sobre fondos con luminancia ≤0.154 y el navy sólo sobre ≥0.163, así que en esa
franja de en medio fallan los dos —medido, 2.93:1 en las dos fotos, que es el
peor caso geométrico de esa pareja, no un accidente de la imagen—. El blanco
no tiene hueco: con la escrima direccional (25-ago-2026) el peor píxel bajo
el botón compone a 8.5:1 en escritorio y 5.0:1 en móvil contra el anillo,
medido en las dos fotos con el canvas (el botón vive en la franja izquierda,
donde la escrima nunca baja de ~.50). El titular, mismo método: 4.65/3.60 en
escritorio y 4.59/3.81 en móvil (perro/gato) — todo arriba del 3:1 de texto
grande. Si se mueven los topes del degradado o cambian las fotos, SE VUELVE
A MEDIR; los números no sobreviven solos.
Va en box-shadow y no en border para no mover la caja del botón. */
.hero .btn--primario {
box-shadow: 0 0 0 2px var(--blanco);
}
/* ── Conmutador de especie (bajó del hero: hoy vive en #precios) ──────────
Rediseño 25-ago-2026 (Pedro): del riel de pastillas a DOS TARJETAS con
recorte sin fondo, como el selector de petinsurance.com — la referencia
original del sitio. Siguen siendo los mismos dos radios: app.js sólo toca
atributos. Los recortes son PNG de Pixabay (licencia libre comercial,
fuente y comprobante en 04-Marca/ del proyecto, fuera del repo). El
animalito asoma por ENCIMA del borde de la tarjeta a propósito: es el
gesto de la referencia. La tarjeta conserva radio de tarjeta — la regla
del cliente de botones nunca redondos sigue en pie. */
.conmutador {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
max-width: 560px;
/* La separación con las tarjetas la daba la nota que colgaba debajo; al
quitarla el bloque de precios arrancaba pegado (0px medidos). Sube a
36px: el recorte asoma 24px por arriba y pide su propio aire. */
margin: 24px auto 28px;
}
.conmutador__opcion {
position: relative; /* ancla del recorte */
display: flex;
align-items: center;
min-height: 76px;
/* El hueco derecho es del recorte; el texto no se le mete debajo. */
padding: 16px 108px 16px 20px;
/* 2px SIEMPRE: el activo sólo cambia el color, así la caja no salta. */
border: 2px solid var(--linea);
border-radius: var(--r-tarjeta);
background: var(--blanco);
color: var(--grafito);
font-family: var(--f-titulo);
font-weight: 800;
font-size: clamp(1.125rem, 2.6vw, 1.5rem);
text-align: left;
cursor: pointer;
box-shadow: var(--sombra-suave);
transition: border-color .18s var(--curva), color .18s var(--curva),
box-shadow .18s var(--curva);
}
.conmutador__opcion:hover { color: var(--navy-950); border-color: var(--sky); }
.conmutador__foto {
position: absolute;
right: 10px;
bottom: 0;
width: 100px;
pointer-events: none; /* el clic es de la tarjeta entera */
}
.conmutador__foto img {
display: block;
width: 100%;
height: auto;
/* La sombra la pone el CSS, no la imagen: cae sobre cualquier fondo. */
filter: drop-shadow(0 6px 10px rgba(19, 60, 94, .18));
}
/* El estado activo se estiliza con el atributo, no con una clase aparte.
El borde sigue el tema de especie: navy con Lomito, café con Michi. */
.conmutador__opcion[aria-checked="true"] {
border-color: var(--pq-acento); /* navy 5.9:1 · café 4.8:1 */
color: var(--navy-hondo); /* 11.44:1 */
box-shadow: var(--sombra-media);
}
@media (max-width: 480px) {
.conmutador { gap: 10px; }
.conmutador__opcion { min-height: 64px; padding: 12px 78px 12px 14px; }
.conmutador__foto { width: 72px; right: 6px; }
}
/* ── Pastillas de transparencia ("Ni la raza · Ni la edad · Ni tu CP") ────── */
.pastillas {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
padding: 0;
margin: 0;
list-style: none;
}
.pastilla {
display: inline-flex;
align-items: center;
gap: .4rem;
border-radius: var(--r-chip); /* aquí SÍ: es pastilla */
padding: 8px 16px;
background: var(--azul-50);
border: 1px solid var(--azul-palido);
color: var(--navy-hondo);
font-family: var(--f-titulo);
font-weight: 700;
font-size: .875rem;
white-space: nowrap;
}
.seccion--oscura .pastilla,
.cierre .pastilla {
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.26);
color: var(--blanco);
}
/* ── Botones ────────────────────────────────────────────────────────────────
Radio 12px SIEMPRE. Ninguno redondo del todo (regla del cliente). Blanco de
toque de 44px de alto como mínimo, incluidos los .btn--sm. */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
min-height: 44px;
padding: 12px 22px;
border: 2px solid transparent;
border-radius: var(--r-control);
font-family: var(--f-titulo);
font-weight: 700;
font-size: 1rem;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color .18s var(--curva), border-color .18s var(--curva),
color .18s var(--curva), box-shadow .18s var(--curva), transform .18s var(--curva);
}
.btn:active { transform: scale(.98); }
.btn--primario {
background: var(--navy); /* blanco encima: 8.45:1 */
color: var(--blanco);
box-shadow: var(--sombra-cta);
}
.btn--primario:hover { background: var(--navy-hondo); }
/* Los CTA de las tarjetas de paquete siguen el tema de especie (Pedro,
25-ago-2026): navy con Lomito, café con Michi (blanco sobre café: 5.6:1).
Sombra y hover se derivan del acento con color-mix — la misma fórmula de
--sombra-cta (60% del color) y del navy-hondo, sin hex nuevos. La
transición ya la trae .btn. */
.paquete .btn--primario {
background: var(--pq-acento);
box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--pq-acento) 60%, transparent);
}
.paquete .btn--primario:hover {
background: color-mix(in srgb, var(--pq-acento) 80%, black);
}
.btn--secundario {
background: var(--blanco);
color: var(--navy);
border-color: var(--azul-palido);
}
.btn--secundario:hover { border-color: var(--navy); background: var(--azul-50); }
.btn--fantasma {
background: transparent;
color: var(--navy);
padding-inline: 12px;
}
.btn--fantasma:hover { background: var(--azul-50); }
/* WhatsApp sin el verde de WhatsApp: el único verde del sistema es #157A52
(5.33:1 con texto blanco). El ícono es `chat`, no el logotipo de la marca. */
/* ⚠️ EL VERDE DE WHATSAPP, EL MISMO QUE LA LANDING DE CMB. Antes usaba `--ok`, que es el
* verde de «correcto» del sistema y no el de la marca: dos verdes parecidos en la misma
* pantalla se leen como un error de impresión. CMB lo tiene en
* src/components/WhatsAppFab.tsx como bg-[#25D366] con hover #1FB855. */
.btn--wa {
background: #25D366;
color: var(--blanco);
}
.btn--wa:hover { background: #1FB855; }
.btn--sm { padding: 8px 14px; font-size: .875rem; }
.btn--lg { padding: 16px 28px; font-size: 1.125rem; min-height: 52px; }
.btn--bloque { display: flex; width: 100%; }
/* Un botón de WhatsApp sin número todavía no lleva a ningún lado: se ve
apagado, pero legible (grafito sobre mist ≈ 7.8:1). */
.btn[aria-disabled="true"] {
background: var(--mist);
color: var(--grafito);
border-color: var(--linea);
box-shadow: none;
cursor: not-allowed;
}
.btn[aria-disabled="true"]:active { transform: none; }
/* Sobre oscuro el CTA navy desaparece: se invierte a cian sólido con tinta
--navy-950 (8.6:1). El degradado cian con texto blanco (2.61:1) NO se usa. */
.hero .btn--primario,
.seccion--oscura .btn--primario,
.cierre .btn--primario {
background: var(--cian);
color: var(--navy-950);
box-shadow: none;
}
.hero .btn--primario:hover,
.seccion--oscura .btn--primario:hover,
.cierre .btn--primario:hover { background: var(--cian-suave); }
.seccion--oscura .btn--secundario,
.cierre .btn--secundario {
background: transparent;
color: var(--blanco);
border-color: rgba(255,255,255,.55);
}
.seccion--oscura .btn--secundario:hover,
.cierre .btn--secundario:hover { background: rgba(255,255,255,.12); border-color: var(--blanco); }
/* ── Segmentado (elige paquete en móvil) ────────────────────────────────────
Sólo existe por debajo de 820px, donde las tres tarjetas no caben lado a
lado, y sólo cuando el JS le quita el atributo `hidden`. */
.segmentado { display: none; }
.segmentado:not([hidden]) {
display: flex;
gap: 4px;
padding: 4px;
margin-bottom: 24px;
border-radius: 14px;
background: var(--mist);
border: 1px solid var(--linea);
}
.segmento {
flex: 1 1 0;
min-height: 44px;
padding: 10px 8px;
border: 0;
border-radius: 10px; /* botón: nunca 999px */
background: transparent;
color: var(--grafito);
font-family: var(--f-titulo);
font-weight: 700;
font-size: .9375rem;
cursor: pointer;
transition: background .18s var(--curva), color .18s var(--curva);
}
.segmento[aria-checked="true"] {
background: var(--navy);
color: var(--blanco);
box-shadow: var(--sombra-suave);
}
@media (min-width: 820px) {
/* Con las tres tarjetas visibles, el selector sobra y confundiría. */
.segmentado, .segmentado:not([hidden]) { display: none; }
}
/* ── Paquetes ───────────────────────────────────────────────────────────────
Una columna en móvil; tres desde 820px con la de en medio elevada. El pie va
pegado abajo (margin-top:auto) para que los tres precios y los tres botones
queden alineados aunque las frases midan distinto. */
.paquetes {
display: grid;
grid-template-columns: 1fr;
gap: 28px; /* 28 y no 20: la insignia sobresale */
align-items: stretch;
/* Los 28 de abajo los ponía el `margin-top` del bloque de saltos entre
paquetes; al quitarlo, la nota siguiente quedaba pegada a las tarjetas. */
margin-bottom: 28px;
}
/* ── Tema de tarjetas por especie ──────────────────────────────────────────
Pedido de Pedro (25-ago-2026), a partir de las infografías «Protege al
Consentido»: paneles suaves RELLENOS —no tarjetas blancas con borde— que
cambian de familia con el conmutador. Perro = familia azul del brandbook;
gato = la familia crema/café que ya estaba declarada (derivada de --aviso).
NI UN HEX NUEVO: solo variables locales apuntando a tokens existentes.
El atributo lo pone app.js en ; sin JS no hay atributo y el CSS
asume perro, así que el sitio sin JS se ve completo igual.
Contrastes medidos sobre los paneles tintados:
· azul-50 #E8F4FA: gris 5.2:1 · tinta 11.3:1 · navy-hondo 9.6:1
· crema-hondo #F4EAE1: gris 4.9:1 · tinta 10.9:1 · aviso-tinta 4.8:1 */
body {
--pq-panel: var(--azul-50);
--pq-linea: var(--azul-palido);
--pq-acento: var(--navy);
--pq-precio: var(--navy-hondo);
--pq-huella: var(--navy);
/* El VIVO del destacado (marco, insignia, pulso). Tinta navy-950 encima:
8.6:1 sobre cian, 6.8:1 sobre naranja — los dos pares pasan. */
--pq-vivo: var(--cian);
--pq-vivo-tinta: var(--navy-950);
}
body[data-especie="gato"] {
--pq-panel: var(--crema-hondo);
--pq-linea: var(--arena);
--pq-acento: var(--aviso-tinta);
--pq-precio: var(--aviso-tinta);
--pq-huella: var(--aviso-tinta);
/* ⚠️ Excepción declarada a la decisión #3 de esta hoja («el naranja nunca
decora»), 25-ago-2026: el cian chocaba con la familia crema (lo señaló
Pedro) y el naranja ES el vivo del que deriva toda esta familia. Aplica
SOLO al destacado; los estados «con condiciones» siguen siendo suyos. */
--pq-vivo: var(--aviso);
}
.paquete {
position: relative; /* ancla de la insignia flotante */
display: flex;
flex-direction: column;
background: var(--pq-panel);
border: 2px solid transparent; /* reserva del grosor del destacado */
border-radius: var(--r-bloque); /* panel amplio, como la infografía */
padding: 24px;
transition: background .25s var(--curva), border-color .25s var(--curva);
/* Sin franja lateral de color y sin tarjetas anidadas: regla del cliente. */
}
/* El destacado (Extendido desde el 25-ago-2026, pedido de Pedro) lleva marco
en el VIVO del tema —cian con Lomito, naranja de marca con Michi; ver la
excepción declarada en --pq-vivo— y un pulso de anillo que se expande y se
desvanece. El pulso anima SOLO box-shadow (pintado, no layout) y el bloque
global de prefers-reduced-motion lo apaga. */
@keyframes pulso-destacado {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pq-vivo) 55%, transparent), var(--sombra-media); }
100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--pq-vivo) 0%, transparent), var(--sombra-media); }
}
.paquete--destacado {
border-color: var(--pq-vivo);
box-shadow: var(--sombra-media);
animation: pulso-destacado 2.2s var(--curva) infinite;
}
/* La insignia FLOTA montada sobre el borde superior de la tarjeta (Pedro,
25-ago-2026): así no roba espacio interior y el contenido de las tres
tarjetas arranca exactamente a la misma altura. Es PASTILLA redonda — los
chips y pastillas sí pueden serlo, regla del cliente. El hueco de 28px que
ya dejaba el conmutador arriba le da el aire a la mitad que sobresale. */
.paquete__insignia {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
padding: 8px 18px;
/* El mismo vivo del marco, así insignia y marco se leen como una sola
pieza: cian/navy-950 (8.6:1) con Lomito, naranja/navy-950 (6.8:1) con
Michi. */
background: var(--pq-vivo);
color: var(--pq-vivo-tinta);
font-family: var(--f-titulo);
font-weight: 700;
font-size: .8125rem;
letter-spacing: .02em;
text-align: center;
white-space: nowrap;
border-radius: var(--r-chip);
box-shadow: var(--sombra-suave);
}
/* La estrellita: rellena y con un titileo suave. El transform no mueve layout
y el bloque de reduced-motion lo apaga junto con el pulso. */
@keyframes estrella-titila {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.25) rotate(12deg); }
}
.paquete__insignia .ico {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
animation: estrella-titila 2.2s var(--curva) infinite;
}
.paquete__nombre {
font-family: var(--f-titulo);
font-weight: 800;
font-size: 1.25rem;
color: var(--pq-acento);
margin: 0 0 8px;
}
.paquete__precio {
font-family: var(--f-titulo);
font-weight: 800;
font-size: clamp(2.25rem, 2.8vw, 3rem);
line-height: 1.05;
color: var(--pq-precio);
font-variant-numeric: tabular-nums;
margin: 0;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: .375rem;
}
.paquete__precio small {
font-family: var(--f-texto);
font-weight: 700;
font-size: 1rem;
color: var(--gris);
}
.paquete__anual {
margin: 4px 0 0;
font-size: .875rem;
color: var(--gris);
font-variant-numeric: tabular-nums;
}
.paquete__sumas {
list-style: none;
/* 24 arriba: los 16 los ponía la frase que iba encima y ya no está. */
margin: 24px 0 0;
padding: 16px 0 0;
border-top: 1px solid var(--pq-linea);
display: grid;
gap: 10px;
}
.suma {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
/* 17 y no 15: al quitar la frase de presentación, las sumas pasan a ser lo
primero que se lee de la tarjeta y son lo que de verdad se compara. */
font-size: 1.0625rem;
}
.suma__etiqueta { color: var(--grafito); }
/* La fila con chip de estado (Robo con violencia): etiqueta en su propio
renglón y el chip colgado a la DERECHA debajo — el mismo gesto del
«deducible 0%» que cuelga bajo su cifra, así todo lo valuable vive en el
riel derecho de la tarjeta. Igual en las tres tarjetas; antes la etiqueta
se partía distinto en cada una según el ancho del chip (Pedro, 25-ago). */
.suma--estado {
flex-direction: column;
align-items: stretch;
gap: 6px;
}
.suma--estado .estado { align-self: flex-end; }
/* La huellita por renglón viene de la infografía. Es ::before con ligadura de
Material Symbols (mismo mecanismo que .ico) para no tocar el HTML de las
tarjetas; decorativa, así que los lectores de pantalla no la ven. */
.suma__etiqueta::before {
content: "pets";
font-family: 'Material Symbols Rounded', sans-serif;
font-weight: normal;
font-size: .9375rem;
line-height: 1;
letter-spacing: normal;
display: inline-block;
vertical-align: -0.12em;
margin-right: 8px;
color: var(--pq-huella);
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
}
.suma__valor {
font-family: var(--f-titulo);
font-weight: 700;
color: var(--tinta);
font-variant-numeric: tabular-nums;
text-align: right;
white-space: nowrap;
}
/* El deducible cuelga bajo la cifra en vez de ir en la misma línea: con
`white-space: nowrap` se comía el ancho y dejaba «Gastos médicos
veterinarios» partido en tres renglones. */
.suma__valor small {
display: block;
margin-top: 2px;
font-family: var(--f-texto);
font-weight: 600;
font-size: .8125rem;
color: var(--gris); /* 5.74:1 sobre blanco */
}
/* Las asistencias son el argumento del producto: van en verde y arriba del
pie, no escondidas en una lista al final. Sin caja propia — una caja dentro
de la tarjeta sería una tarjeta anidada. */
.paquete__asistencias {
display: flex;
align-items: flex-start;
gap: .5rem;
margin: 16px 0 0;
padding-top: 16px;
border-top: 1px solid var(--linea);
font-size: 1rem;
line-height: 1.5;
color: var(--tinta);
}
.paquete__asistencias .ico { color: var(--ok); margin-top: .1rem; }
.paquete__asistencias strong { color: var(--ok); } /* 5.33:1 sobre blanco */
/* Las carencias, en la tarjeta y no en la letra chica. */
.paquete__espera {
margin: 12px 0 0;
font-size: .875rem;
line-height: 1.5;
color: var(--gris); /* 5.74:1 */
}
.paquete__pie {
margin-top: auto; /* alinea los tres botones */
padding-top: 20px;
}
@media (min-width: 820px) {
.paquetes {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: start;
}
.paquete { height: 100%; }
/* El destacado ya NO se levanta con translateY: las tres tarjetas quedan
exactamente parejas (Pedro, 25-ago-2026) y la insignia + el marco vivo
hacen todo el trabajo de destacar. */
}
/* ── Deltas (qué compras al subir de paquete) ───────────────────────────── */
/* ── Tabla (asistencias) ────────────────────────────────────────────────────
Desde 720px, tabla real con caption, thead y th scope. Por debajo, tarjetas:
nunca scroll horizontal en el teléfono. Las dos NUNCA a la vez. */
.tabla__envoltura { display: none; }
@media (min-width: 720px) {
.tabla__envoltura {
display: block;
overflow-x: auto; /* si no cabe, rueda ELLA */
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r-tarjeta);
box-shadow: var(--sombra-suave);
}
}
.tabla {
width: 100%;
min-width: 640px; /* antes de apretar, rueda */
border-collapse: collapse;
font-size: .9375rem;
}
.tabla caption {
caption-side: top;
text-align: left;
padding: 16px 18px 12px;
font-family: var(--f-titulo);
font-weight: 700;
font-size: .9375rem;
color: var(--navy);
}
.tabla th, .tabla td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid var(--linea);
vertical-align: top;
}
.tabla thead th {
font-family: var(--f-titulo);
font-weight: 700;
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--gris);
background: var(--fondo);
white-space: nowrap;
}
.tabla tbody th {
font-family: var(--f-texto);
font-weight: 700;
color: var(--tinta);
}
.tabla tbody tr:last-child th,
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover td,
.tabla tbody tr:hover th { background: var(--fondo); }
.tabla .cifra, .tabla td[data-num] { font-variant-numeric: tabular-nums; }
.tarjetas-tabla { display: grid; gap: 12px; }
@media (min-width: 720px) { .tarjetas-tabla { display: none; } }
.fila-tarjeta {
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r-tarjeta);
padding: 16px 18px;
box-shadow: var(--sombra-suave);
}
.fila-tarjeta__titulo {
font-family: var(--f-titulo);
font-weight: 700;
font-size: 1rem;
color: var(--navy);
margin: 0 0 10px;
}
.fila-tarjeta__dato {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 8px 0 0;
margin: 8px 0 0;
border-top: 1px solid var(--linea);
font-size: .9375rem;
color: var(--grafito);
}
.fila-tarjeta__dato > :last-child {
font-family: var(--f-titulo);
font-weight: 700;
color: var(--tinta);
text-align: right;
font-variant-numeric: tabular-nums;
}
.fila-tarjeta dl, .fila-tarjeta dd { margin: 0; }
/* ── Comparación (nuestro armado contra el más común del producto) ───────── */
.comparacion {
display: grid;
gap: 16px;
}
.comparacion__col {
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r-tarjeta);
padding: 24px;
}
.comparacion__col--nuestra {
border: 2px solid var(--navy);
background: var(--azul-50);
box-shadow: var(--sombra-media);
}
.comparacion__titulo {
font-family: var(--f-titulo);
font-weight: 800;
font-size: 1.0625rem;
color: var(--navy-hondo);
margin: 0 0 14px;
}
.comparacion__col ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
font-size: .9375rem;
}
.comparacion__col li { display: flex; align-items: flex-start; gap: .5rem; }
@media (min-width: 720px) {
.comparacion { grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
}
/* ── Coberturas ─────────────────────────────────────────────────────────── */
.rejilla-coberturas {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.cobertura {
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r-tarjeta);
padding: 20px;
box-shadow: var(--sombra-suave);
}
/* ── Franja de beneficios (arriba del kicker de #precios) ─────────────────
Pedida por Pedro el 25-ago-2026, estilo petinsurance.com: ícono grande en
trazo fino, título navy, texto corto. Tres columnas; apila en angosto. */
.beneficios {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
max-width: 56rem;
margin: 0 auto 48px;
padding: 0;
list-style: none;
text-align: center;
}
.beneficio__icono {
font-size: 2.75rem;
color: var(--navy);
/* Trazo fino y óptica grande, como el lineal de la referencia. */
font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;
}
.beneficio__titulo {
display: block;
font-family: var(--f-titulo);
font-weight: 800;
font-size: 1.1875rem;
color: var(--navy);
margin: 10px 0 6px;
}
.beneficio__texto {
margin: 0 auto;
max-width: 26ch;
font-size: .9375rem;
color: var(--gris); /* #666666 sobre blanco = 5.74:1 */
line-height: 1.5;
}
@media (max-width: 640px) {
.beneficios { grid-template-columns: 1fr; gap: 28px; }
}
.cobertura__icono {
display: grid;
place-items: center;
width: 44px; height: 44px;
border-radius: var(--r-control);
background: var(--azul-50);
color: var(--navy);
margin-bottom: 14px;
}
.cobertura__icono .ico { width: 1.5rem; height: 1.5rem; }
.cobertura__titulo {
font-family: var(--f-titulo);
font-weight: 700;
font-size: 1.0625rem;
color: var(--navy);
margin: 0 0 6px;
}
.cobertura p { font-size: .9375rem; color: var(--grafito); }
/* La letra que normalmente sería chica —franquicia, deducible sobre la suma,
esperas— va en lista y a tamaño de lectura, no escondida. */
.cobertura ul {
margin: 12px 0 0;
padding-left: 1.15rem;
display: grid;
gap: 8px;
font-size: .875rem;
line-height: 1.55;
color: var(--grafito);
}
.cobertura li::marker { color: var(--gris-azul); }
.cobertura li strong { color: var(--tinta); }
.cobertura dl { margin: 12px 0 0; font-size: .875rem; }
.cobertura dt { font-weight: 700; color: var(--tinta); }
.cobertura dd { margin: 0 0 8px; color: var(--gris); }
@media (min-width: 720px) { .rejilla-coberturas { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (min-width: 1024px) { .rejilla-coberturas { grid-template-columns: repeat(4, 1fr); } }
/* ── Estados ────────────────────────────────────────────────────────────────
El color NUNCA comunica solo: cada estado lleva su ícono (palomita,
triángulo, cruz) y su texto para lector de pantalla en el marcado. */
.estado {
display: inline-flex;
align-items: center;
gap: .375rem;
padding: 4px 10px;
border-radius: var(--r-chip); /* chip: aquí sí va redondo */
font-family: var(--f-titulo);
font-weight: 700;
font-size: .8125rem;
white-space: nowrap;
}
.estado .ico { width: 1rem; height: 1rem; }
/* Fondo BLANCO con borde del color del estado (25-ago-2026): los rellenos
pastel se perdían contra los paneles tintados de las tarjetas de paquete
(lo señaló Pedro). El texto conserva sus contrastes documentados sobre
blanco: ok 5.33:1 · aviso-tinta 5.07:1 · no 7.49:1. */
.estado--si { background: var(--blanco); color: var(--ok); border: 1.5px solid var(--ok); }
.estado--condicion { background: var(--blanco); color: var(--aviso-tinta); border: 1.5px solid var(--aviso-tinta); }
.estado--no { background: var(--blanco); color: var(--no); border: 1.5px solid var(--no); }
/* ── Línea de tiempo (esperas e inspección) ──────────────────────────────── */
.linea-tiempo {
position: relative;
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 24px;
}
/* El hilo que une los hitos. Va detrás de las marcas. */
.linea-tiempo::before {
content: "";
position: absolute;
left: 15px; /* centro de la marca de 32px */
top: 12px; bottom: 12px;
width: 2px;
background: var(--azul-palido);
}
.hito {
position: relative;
display: grid;
grid-template-columns: 32px 1fr;
column-gap: 16px;
row-gap: 2px;
align-items: start;
}
.hito__marca {
grid-column: 1;
grid-row: 1 / span 2;
display: grid;
place-items: center;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--blanco);
border: 2px solid var(--navy);
color: var(--navy);
}
.hito__marca .ico { width: 1rem; height: 1rem; }
.hito__dia {
grid-column: 2;
font-family: var(--f-titulo);
font-weight: 800;
font-size: .875rem;
color: var(--navy-hondo);
margin: 0; /* suele ser un */
padding-top: 5px;
}
.hito__texto {
grid-column: 2;
margin: 0;
font-size: .9375rem;
line-height: 1.55;
color: var(--grafito);
}
.seccion--oscura .linea-tiempo::before { background: rgba(255,255,255,.28); }
.seccion--oscura .hito__marca { background: transparent; border-color: var(--cian); color: var(--cian); }
.seccion--oscura .hito__dia { color: var(--blanco); }
.seccion--oscura .hito__texto { color: var(--azul-palido); }
/* ── Avisos (lo incómodo, dicho sin letra chica) ─────────────────────────── */
.aviso {
display: grid;
gap: 8px;
padding: 24px;
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r-bloque);
box-shadow: var(--sombra-suave);
/* Sin franja lateral de color: regla del cliente, también aquí. */
}
.aviso__titulo {
display: flex;
align-items: center;
gap: .5rem;
font-family: var(--f-titulo);
font-weight: 700;
font-size: 1.125rem;
color: var(--navy-hondo);
margin: 0;
}
.aviso__cuerpo {
margin: 0;
font-size: .9375rem;
line-height: 1.6;
color: var(--tinta);
}
/* Ámbar = "con condiciones". Es el único uso del naranja, y nunca de fondo de
botón (2.19:1 con blanco). */
.aviso--ambar {
background: var(--aviso-fondo);
border-color: var(--aviso);
box-shadow: none;
}
.aviso--ambar .aviso__titulo { color: var(--aviso-tinta); } /* 5.07:1 */
.aviso--ambar .aviso__cuerpo { color: var(--tinta); } /* 11:1 sobre #FFEFE3 */
.seccion--oscura .aviso {
background: rgba(255,255,255,.06);
border-color: rgba(255,255,255,.20);
box-shadow: none;
}
.seccion--oscura .aviso__titulo { color: var(--blanco); }
.seccion--oscura .aviso__cuerpo { color: var(--azul-palido); }
/* ── Pasos (cómo se contrata) ───────────────────────────────────────────── */
.pasos {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
padding: 0;
margin: 0;
list-style: none;
}
.paso {
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r-tarjeta);
padding: 20px;
box-shadow: var(--sombra-suave);
}
.paso__num {
display: grid;
place-items: center;
width: 36px; height: 36px;
border-radius: var(--r-chip); /* no es un botón: puede ir redondo */
background: var(--navy);
color: var(--blanco);
font-family: var(--f-titulo);
font-weight: 800;
font-size: 1rem;
font-variant-numeric: tabular-nums;
margin-bottom: 14px;
}
.paso__titulo {
font-family: var(--f-titulo);
font-weight: 700;
font-size: 1.0625rem;
color: var(--navy);
margin: 0 0 6px;
}
/* El `:not(.paso__num)` no es cosmético: `.paso p` (0,1,1) le gana a
`.paso__num` (0,1,0), así que sin él el número sale grafito sobre el círculo
navy — #4D4D4D sobre #19507D es 1.0:1, o sea invisible. */
.paso p:not(.paso__num) { font-size: .9375rem; color: var(--grafito); }
@media (min-width: 720px) {
.pasos { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
}
/* ── Preguntas (acordeón con ) ──────────────────────────────────── */
.preguntas { display: grid; gap: 12px; }
.pregunta {
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r-tarjeta);
}
.pregunta[open] { border-color: var(--sky); box-shadow: var(--sombra-suave); }
.pregunta__titulo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 56px;
padding: 16px 20px;
cursor: pointer;
list-style: none; /* quita el triángulo del UA */
font-family: var(--f-titulo);
font-weight: 700;
font-size: 1rem;
line-height: 1.4;
color: var(--navy-hondo);
}
.pregunta__titulo::-webkit-details-marker { display: none; }
/* Chevron dibujado con dos bordes: sin SVG extra y sin data: URI (la CSP del
portal puede bloquear los data: en fondos sin decir nada). */
.pregunta__titulo::after {
content: "";
flex: none;
width: 9px; height: 9px;
margin-right: 4px;
border-right: 2px solid var(--navy);
border-bottom: 2px solid var(--navy);
transform: translateY(-2px) rotate(45deg);
transition: transform .2s var(--curva);
}
.pregunta[open] .pregunta__titulo::after { transform: translateY(2px) rotate(-135deg); }
.pregunta__cuerpo {
padding: 0 20px 20px;
font-size: 1rem;
line-height: 1.65;
color: var(--grafito);
}
.pregunta__cuerpo > :last-child { margin-bottom: 0; }
/* ── Formulario ─────────────────────────────────────────────────────────────
Hoy no envía a ningún servidor (PENDIENTE: endpoint). Termina en
"te contactamos" y en el botón de WhatsApp. */
.formulario {
display: grid;
gap: 20px;
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--r-bloque);
padding: 24px;
box-shadow: var(--sombra-media);
}
.formulario fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.formulario legend {
padding: 0;
margin-bottom: 8px;
font-family: var(--f-titulo);
font-weight: 700;
font-size: .875rem;
color: var(--grafito);
}
.campo { display: grid; gap: 6px; align-content: start; }
.campo__etiqueta {
font-family: var(--f-titulo);
font-weight: 700;
font-size: .875rem;
color: var(--grafito);
}
.campo__control {
width: 100%;
min-height: 48px;
padding: 12px 14px;
font: inherit;
font-size: 1rem; /* NUNCA menos: por debajo de 16px iOS Safari
hace zoom al enfocar y rompe el embudo. */
color: var(--tinta);
background: var(--blanco);
border: 1.5px solid var(--linea);
border-radius: var(--r-control);
transition: border-color .15s var(--curva), box-shadow .15s var(--curva);
}
/* El conserva su flecha nativa a propósito: dibujarla exigiría una
imagen de fondo en data: URI y la CSP del portal puede tirarla en silencio. */
select.campo__control { padding-right: 10px; }
textarea.campo__control { min-height: 110px; resize: vertical; }
.campo__control:hover { border-color: var(--sky); }
.campo__control:focus { border-color: var(--navy); }
.campo__control[aria-invalid="true"] { border-color: var(--no); background: var(--no-fondo); }
.campo__control::placeholder { color: var(--gris); opacity: 1; }
.campo__pista { margin: 0; font-size: .8125rem; color: var(--gris); }
.campo__error {
display: flex;
align-items: center;
gap: .375rem;
margin: 0;
font-size: .8125rem;
font-weight: 700;
color: var(--no); /* 7.49:1 */
}
/* Grupo de radios (especie): la etiqueta entera es zona de toque, no el
círculo de 13px. */
.opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.opciones label {
display: inline-flex;
align-items: center;
gap: .5rem;
min-height: 44px;
padding: 10px 16px;
border: 1.5px solid var(--linea);
border-radius: var(--r-control);
font-weight: 700;
font-size: .9375rem;
cursor: pointer;
transition: border-color .15s var(--curva), background .15s var(--curva);
}
.opciones label:hover { border-color: var(--sky); background: var(--fondo); }
.opciones input { width: 20px; height: 20px; cursor: pointer; }
/* Las opciones suelen escribirse como .casilla; ahí el control va centrado con
su texto, no alineado arriba. */
.opciones .casilla input { margin: 0; }
/* Mejora progresiva: donde `:has` no exista, el radio nativo sigue mostrando
el estado; aquí sólo se refuerza. */
.opciones label:has(input:checked) { border-color: var(--navy); background: var(--azul-50); }
.casilla {
display: flex;
align-items: flex-start;
gap: .625rem;
padding: 12px;
border: 1px solid var(--linea);
border-radius: var(--r-control);
font-size: .9375rem;
line-height: 1.5;
color: var(--grafito);
cursor: pointer;
}
.casilla:hover { background: var(--fondo); }
.casilla input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; cursor: pointer; }
.casilla a { font-weight: 700; }
/* Confirmación: la escribe el JS con textContent. Verde de relleno, borde
verde, sin sombra — no es una tarjeta dentro de otra. */
.confirmacion {
display: grid;
gap: 12px;
padding: 24px;
background: var(--ok-fondo);
border: 1px solid var(--ok);
border-radius: var(--r-bloque);
color: var(--tinta);
}
.confirmacion__titulo {
font-family: var(--f-titulo);
font-weight: 800;
font-size: 1.25rem; /* texto grande: 3:1 basta, da ~5:1 */
color: var(--ok);
margin: 0;
}
.confirmacion p { margin: 0; font-size: .9375rem; line-height: 1.6; }
@media (min-width: 720px) {
.formulario { grid-template-columns: 1fr 1fr; gap: 20px 24px; padding: 32px; }
/* Los campos van a dos columnas; todo lo demás (botón, párrafos, cualquier
bloque suelto) ocupa el ancho completo. */
.formulario > :not(.campo) { grid-column: 1 / -1; }
/* El consentimiento es una frase larga con enlace: partida a media columna se
lee peor y es justo la casilla que nadie debe marcar sin leer. */
.formulario > .campo:has(input[type="checkbox"]) { grid-column: 1 / -1; }
}
/* ── Cierre ─────────────────────────────────────────────────────────────── */
.cierre {
background: radial-gradient(52% 113% at 55% 54%, var(--navy-hondo) 0%, var(--navy-950) 100%);
color: var(--azul-palido);
padding-block: 64px;
text-align: center;
}
.cierre h2 { color: var(--blanco); }
.cierre p { color: var(--azul-palido); font-size: 1.125rem; }
.cierre .hero__acciones,
.cierre .pastillas { justify-content: center; }
@media (min-width: 768px) { .cierre { padding-block: 96px; } }
/* ── Pie ────────────────────────────────────────────────────────────────── */
.pie {
background: var(--navy-950);
color: var(--azul-palido);
padding-block: 48px 28px;
font-size: .9375rem;
}
.pie a { color: var(--azul-palido); text-decoration: none; }
.pie a:hover { color: var(--blanco); text-decoration: underline; }
/* El logotipo va en blanco sobre el navy, igual que en las consolas internas.
`--dibujo` es el alto visible de la marca (ver el recorte en .barra__marca). */
.pie img:not(.logo-gnp) { filter: brightness(0) invert(1); --dibujo: 40px; }
/* El logo de GNP NO se recolorea: se publica con autorización de uso y alterar
el color de una marca de tercero es justo lo que esa autorización no cubre.
Las dos reglas de arriba se escribieron para el SVG monocromo de CMB, que ya
no está en este sitio; se acotan con :not() para que no lo alcancen. */
.pie__cols { display: grid; gap: 28px; }
.pie__col h2, .pie__col h3 {
font-family: var(--f-titulo);
font-weight: 700;
font-size: .8125rem;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--sky); /* 8.4:1 sobre #0D2A42 */
margin: 0 0 12px;
}
.pie__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie__col li { line-height: 1.5; }
.pie__legal {
margin-top: 32px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,.14);
font-size: .8125rem;
line-height: 1.6;
color: var(--sky);
}
.pie__legal p { margin: 0 0 .5rem; }
.pie__legal .pendiente { color: var(--aviso); } /* ámbar claro: sobre navy el
tinta ámbar no se leería */
@media (min-width: 720px) {
.pie__cols { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px; }
}
/* ── Fijos: barra inferior y botón flotante ─────────────────────────────────
La barra sólo existe por debajo de 820px y sólo cuando el JS le quita el
`hidden`. Lleva el paquete elegido y su mensualidad. */
.barra-fija {
position: fixed;
inset: auto 0 0 0;
z-index: 60;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
padding-bottom: calc(10px + env(safe-area-inset-bottom));
background: var(--blanco);
border-top: 1px solid var(--linea);
}
.barra-fija__texto {
flex: 1 1 auto;
min-width: 0;
margin: 0;
font-size: .875rem;
line-height: 1.35;
color: var(--tinta);
}
.barra-fija__texto strong { color: var(--navy); }
.barra-fija .btn { flex: none; }
/* Hueco al final del documento para que la barra no tape el pie. `:has` es
mejora progresiva: sin él sólo se pierde el respiro final. */
body:has(.barra-fija:not([hidden])) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
.fab-wa {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 55;
display: grid;
place-items: center;
width: 56px; height: 56px;
border-radius: var(--r-tarjeta); /* NO redondo del todo: sigue siendo un botón */
background: var(--ok);
color: var(--blanco);
box-shadow: var(--sombra-media);
text-decoration: none;
}
.fab-wa .ico { font-size: 1.5rem; } /* fuente, no SVG: se dimensiona con font-size */
.fab-wa:hover { background: color-mix(in srgb, var(--ok) 84%, var(--navy-950)); }
/* Con la barra fija abajo, el flotante se aparta para no montarse encima. */
body:has(.barra-fija:not([hidden])) .fab-wa {
bottom: calc(88px + env(safe-area-inset-bottom));
}
@media (min-width: 820px) {
.barra-fija, .barra-fija:not([hidden]) { display: none; }
body:has(.barra-fija:not([hidden])) { padding-bottom: 0; }
body:has(.barra-fija:not([hidden])) .fab-wa { bottom: 24px; }
.fab-wa { right: 24px; bottom: 24px; }
}
/* ============================================================================
* 7. MOVIMIENTO REDUCIDO
* Apaga TODO: transiciones, animaciones y los hovers que mueven cosas. Nada
* de contenido que sólo aparezca al animarse; las barras y rellenos quedan
* LLENOS, no invisibles.
* ========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
/* Hovers y estados que MUEVEN algo: quietos. El desplazamiento estático de la
tarjeta destacada se conserva —no es movimiento, es maquetación—. */
.btn:active { transform: none; }
.salto-contenido { transition: none; }
/* Red de seguridad: cualquier barra de progreso o relleno queda LLENO, nunca
invisible. Un dato que sólo existe si corre una animación no es un dato. */
[class*="relleno"], [class*="progreso"] { width: 100% !important; }
}
/* ============================================================================
* 8. IMPRESIÓN (mínima)
* Alguien va a imprimir esto para enseñárselo a su pareja antes de comprar.
* ========================================================================== */
@media print {
.barra, .barra-fija, .fab-wa, .salto-contenido, .segmentado { display: none !important; }
body { background: var(--blanco); color: var(--tinta); padding-bottom: 0; }
.hero, .seccion--oscura, .cierre, .pie {
background: var(--blanco) !important;
color: var(--tinta);
}
/* La foto del hero NO se imprime: es decorativa, se come el tóner y, sobre
todo, el titular pasa a tinta oscura en papel y quedaría encima de ella.
Sin foto, el hero tampoco necesita reservar media hoja en blanco. */
.hero__fondo { display: none !important; }
.hero { min-height: 0; padding-block: 24px; }
.hero__titulo,
.seccion--oscura h2, .seccion--oscura h3,
.cierre h2, .cierre p, .pie, .pie a { color: var(--tinta); }
.pie img { filter: none; }
.seccion { padding-block: 24px; }
.paquete, .cobertura, .paso, .pregunta, .formulario, .aviso, .fila-tarjeta {
box-shadow: none;
break-inside: avoid;
}
/* El destacado ya no lleva transform en pantalla; en papel tampoco animación. */
.paquete--destacado { animation: none; }
/* La tabla completa, no las tarjetas: en papel no hay ancho de teléfono. */
.tabla__envoltura { display: block; overflow: visible; }
.tarjetas-tabla { display: none; }
.tabla { min-width: 0; }
a { text-decoration: underline; }
}
/* ⚠️ SIN LOGO DE CMB. Pedro, 14-ago-2026: aunque el sitio se monte en la plataforma de CMB,
* es público y no puede llevar su marca. En su lugar va el nombre del producto. La
* identificación legal del intermediario y la cédula SÍ se quedan —son obligatorias— pero
* viven en el pie y en las páginas legales, no como marca en la barra. */
.marca__nombre {
font-family: var(--f-titulo);
font-weight: 700;
font-size: 1.0625rem;
color: var(--navy);
letter-spacing: -0.01em;
white-space: nowrap;
}
/* ⚠️ EL ÍCONO DE WHATSAPP ES SVG, no Material Symbols. Pedro, 14-ago-2026: «usa el mismo
* que está en la landing de CMB». Es el glifo oficial de la marca, y CMB ya lo lleva así
* en src/components/WhatsAppFab.tsx — copiarlo mantiene los dos sitios diciendo lo mismo.
* Por eso esta clase deshace lo que .ico impone para una fuente. */
.ico--wa {
font-size: 0; /* .ico es una fuente; aquí no hay texto que dibujar */
width: 1.25rem; height: 1.25rem;
fill: currentColor;
stroke: none;
vertical-align: -0.2em;
}
.ico--wa.ico--sm { width: 1rem; height: 1rem; }
.ico--wa.ico--lg { width: 1.75rem; height: 1.75rem; }
.fab-wa .ico--wa { width: 1.75rem; height: 1.75rem; }
/* El flotante, con el verde y la forma de la landing de CMB. */
.fab-wa { background: #25D366; }
.fab-wa:hover { background: #1FB855; }
/* El logotipo de GNP, recortado de su propio material comercial (Diferenciadores 2026) y
* limpiado de fondo. Se usa porque el sitio vende SU producto y hay que decir de quién es
* la póliza; el alcance de ese uso lo marca el contrato de agente. */
.logo-gnp {
height: 40px; width: auto;
display: block;
}