/* manda — landing con lista de espera.
Portado del lenguaje de tengo-web (sx-nav / sx-hero / sx-mod / sx-rail / sx-footer),
con los tokens de manda. Se porta la ESTRUCTURA, no los valores: el morado de tengo
y su tipografia de marca no cruzan. Todo color sale de tokens.css. */
/* tokens.css entra como versionado en el HTML: un @import se sirve
de cache aunque esta hoja cambie, y el sintoma es que un token nuevo resuelve
a VACIO sin ningun error. Medido: --manda-select-alto daba "" y el desplegable
renderizaba a 24px en vez de 52. */
/* La fuente la declara tokens.css, que es la fuente del sistema. Declararla
otra vez acá con otro nombre de familia hacía que el navegador bajara el
mismo TTF DOS veces, medido en performance.getEntriesByType("resource"). */
:root {
--web-container: 1180px;
--web-gutter: clamp(16px, 4vw, 40px);
--sx-gap: clamp(44px, 5.5vw, 76px);
--sx-seam: clamp(40px, 5vw, 72px);
/* El titular del heroe sale del token `displayMarketing`, que ahora existe en
tokens.source.json. Antes era un 76px inventado acá, fuera del sistema —
el mismo error que el desplegable. El escalon movil (62px) no es opcional:
medido con la Inter real, a 76px el titular se pasa 1,2-1,4x del ancho util
de un telefono de 375px. */
--sx-h1: var(--manda-size-displayMarketing);
--sx-modtitle: clamp(30px, 4.4vw, 50px);
--sx-modsub: clamp(16px, 1.5vw, 19px);
--tap: 52px; /* objetivo tactil de manda, sobre el minimo de 44 */
/* ---- CAPA WEB ----
Tokens que la landing AGREGA sobre el sistema del app, con el mismo patron que
tengo-web/DESIGN-WEB.md seccion 7. Ninguno inventa un color: los cuatro derivan
de primitivos que ya existen en tokens.css. Existen porque una superficie sobre
FOTOGRAFIA no la cubre un sistema calibrado contra fondos planos: el gris de texto
secundario esta medido contra #FAFAFB, no contra una calle de Lisboa. */
--web-sobre-foto: var(--manda-neutral-0); /* titular sobre foto */
--web-sobre-foto-suave: color-mix(in srgb, var(--manda-neutral-0) 88%, transparent); /* bajada sobre foto */
--web-sobre-foto-tenue: color-mix(in srgb, var(--manda-neutral-0) 82%, transparent); /* antetitulo y nav sobre foto */
--web-velo: var(--manda-neutral-950); /* tinte del gradiente: antracita de marca, no negro */
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; } /* le gana a cualquier display de clase */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
margin: 0; background: var(--manda-bg); color: var(--manda-texto);
font-family: var(--manda-font-ui);
font-size: var(--manda-size-cuerpo); line-height: var(--manda-lh-cuerpo);
}
a { color: inherit; }
img { max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--manda-superficie-marca); color: var(--manda-texto); }
:root { accent-color: var(--manda-primario); caret-color: var(--manda-primario); }
/* El foco es un salto de TAMANO. La sombra al 35% del sistema mide 1,70:1 compuesta. */
:where(a, button, input, select, [tabindex]):focus-visible {
outline: 3px solid var(--manda-foco); outline-offset: 2px; border-radius: var(--manda-radio-sm);
}
.wrap { width: 100%; max-width: var(--web-container); margin-inline: auto; padding-inline: var(--web-gutter); }
.saltar { position: absolute; left: -9999px; background: var(--manda-superficie);
padding: var(--manda-space-3) var(--manda-space-4); border-radius: var(--manda-radio-md); z-index: 50; }
.saltar:focus { left: var(--manda-space-4); top: var(--manda-space-4); }
.antetitulo {
font-size: var(--manda-size-micro); font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; color: var(--manda-texto-secundario); margin: 0 0 var(--manda-space-3);
}
.bajada { font-size: var(--sx-modsub); color: var(--manda-texto-secundario); line-height: 1.55; max-width: 46ch; }
/* ---------- Barra ---------- */
.barra { position: absolute; top: 0; left: 0; right: 0; z-index: 40; background: transparent; }
.barra.pegada { position: sticky; background: color-mix(in srgb, var(--manda-bg) 92%, transparent);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--manda-borde); }
.barra .wrap { display: flex; align-items: center; gap: var(--manda-space-6); min-height: 72px; }
/* El logo es un ARCHIVO. No se recompone escribiendo «manda» en ninguna tipografia. */
.marca { display: inline-flex; align-items: center; min-height: 44px; }
.marca img { height: 36px; width: auto; display: block; } /* piso medido del repo: 35px */
/* Dos logos, uno por FONDO: sobre la foto manda la foto, con la barra solida manda el tema. */
.barra .logo-tema { display: none; }
.barra.pegada .logo-claro { display: none; }
.barra.pegada .logo-tema { display: inline-flex; }
.barra nav { display: flex; gap: var(--manda-space-6); margin-left: auto; align-items: center; }
.barra nav a { font-size: var(--manda-size-detalle); font-weight: 500; color: var(--web-sobre-foto-tenue); text-decoration: none; }
.barra nav a:hover { color: var(--web-sobre-foto); }
.cta {
display: inline-flex; align-items: center; justify-content: center;
min-height: var(--tap); padding-inline: var(--manda-space-6);
border-radius: var(--manda-radio-pill);
background: var(--manda-boton-primario-bg); color: var(--manda-boton-primario-fg);
font-weight: 600; text-decoration: none; border: 0; cursor: pointer;
transition: background var(--manda-motion-rapido) var(--manda-motion-curva);
}
@media (hover: hover) { .cta:hover { background: var(--manda-boton-primario-bg-hover); } }
.cta:active { background: var(--manda-boton-primario-bg-activo); }
@media (max-width: 48em) { .barra nav a { display: none; } }
/* ---------- Heroe: DOS COLUMNAS ----------
Corrige el error de montar la tarjeta ENCIMA de la foto, que tapaba al sujeto
y dejaba la composicion partida. tengo-web/DESIGN-WEB.md lo tiene escrito:
«dos columnas asimetricas, texto a la IZQUIERDA... nada centrado en el hero».
Retorna, Curiara y Taptap hacen los tres lo mismo: texto izquierda, cotizador
derecha. El velo sigue midiendose: check-heroe-contraste.py. */
.heroe { position: relative; isolation: isolate; overflow: hidden;
display: flex; align-items: center; }
.heroe__foto { position: absolute; inset: 0; z-index: -2;
background-size: cover; background-position: 50% 35%; }
.heroe__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 38%; display: block; }
.heroe::after { content: ''; position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(100deg,
color-mix(in srgb, var(--web-velo) 90%, transparent) 0%,
color-mix(in srgb, var(--web-velo) 76%, transparent) 40%,
color-mix(in srgb, var(--web-velo) 34%, transparent) 72%,
color-mix(in srgb, var(--web-velo) 18%, transparent) 100%),
linear-gradient(180deg,
color-mix(in srgb, var(--web-velo) 40%, transparent) 0%,
transparent 34%,
color-mix(in srgb, var(--web-velo) 30%, transparent) 100%); }
.heroe .wrap { padding-block: clamp(96px, 12vw, 148px) clamp(40px, 6vw, 80px); }
.heroe__grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px);
align-items: center; }
@media (min-width: 62em) {
.heroe__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
}
.heroe h1 { margin: 0 0 var(--manda-space-4);
font-size: var(--sx-h1); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700;
color: var(--web-sobre-foto); }
/* Los cortes van FORZADOS con
, no por `text-wrap`. Medido: con corte
automatico dos de las tres lineas se pasan del ancho util. */
@media (max-width: 34em) { .heroe h1 { font-size: 62px; } }
.heroe__sub { margin: 0; max-width: 34ch;
color: var(--web-sobre-foto-suave); font-size: var(--sx-modsub); }
.heroe .antetitulo { color: var(--web-sobre-foto-tenue); }
.heroe .marca img { height: 40px; }
/* ---------- Franja de corredor ---------- */
.riel { border-block: 1px solid var(--manda-borde); }
.riel .wrap { display: flex; align-items: center; gap: var(--manda-space-5);
padding-block: var(--manda-space-4); flex-wrap: wrap; }
.pais { display: inline-flex; align-items: center; gap: var(--manda-space-2); }
.pais i { font-style: normal; font-size: 22px; line-height: 1; }
.pais span { font-weight: 600; font-size: var(--manda-size-detalle); }
.pais b { display: block; font-weight: 500; font-size: var(--manda-size-micro); color: var(--manda-texto-secundario); }
.riel .flecha { color: var(--manda-texto-tenue); font-size: 20px; }
/* ---------- Modulos ---------- */
.mod { padding-block: var(--sx-gap); }
/* El separador necesita aire de los dos lados: el detector lo marco como
`cramped-padding` x3 — hijos pegados al borde superior sin margen interno. */
.mod + .mod > .wrap { border-top: 1px solid var(--manda-borde); padding-top: var(--sx-seam); }
.mod + .mod > .wrap > * { margin-top: 0; }
/* align-items:start, no center: sin las capturas de app que tengo pone en esa columna,
centrar deja huecos verticales grandes que se leen como secciones sin terminar. */
.mod__grid { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; }
@media (min-width: 62em) {
.mod__grid { grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); }
.mod--flip .mod__grid { grid-template-columns: minmax(0,1.14fr) minmax(0,.86fr); }
.mod--flip .mod__visual { order: -1; }
}
.mod h2 { margin: 0; font-size: var(--sx-modtitle); font-weight: 700;
letter-spacing: -0.028em; line-height: 1.12; max-width: 16ch; }
.mod__sub { margin-top: var(--manda-space-4); }
.acento { color: var(--manda-texto-marca); } /* solo en titulares: es marca, no accion */
.viñetas { display: grid; gap: var(--manda-space-4); margin-top: 0; }
.viñetas li { display: flex; gap: var(--manda-space-3); align-items: flex-start; }
.viñetas li::before { content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 9px;
border-radius: 50%; background: var(--manda-borde-fuerte); }
.viñetas b { display: block; }
/* Cifras: el numero es el dato y carga la jerarquia. Tabular por regla del sistema:
todo numero de manda lleva tabular-nums. */
.cifras { display: grid; gap: var(--manda-space-5); }
/* El numero va ARRIBA y la etiqueta debajo, no en dos columnas: a 56px, «130» no entra
en una columna de 4,5ch y se montaba encima del texto. Medido en pantalla, no supuesto. */
.cifras li { display: block; padding-bottom: var(--manda-space-4);
border-bottom: 1px solid var(--manda-borde); }
.cifras b + span { display: block; margin-top: var(--manda-space-2); max-width: 34ch; }
.cifras li:last-child { border-bottom: 0; padding-bottom: 0; }
.cifras b { font-size: clamp(38px, 4.4vw, 56px); font-weight: 700; line-height: 1;
letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cifras span { color: var(--manda-texto-secundario); font-size: var(--manda-size-detalle); }
/* Lo que todavia depende del contrato se marca en el marcado, no en un comentario que
nadie lee: si el dato no se confirma, el gate lo encuentra. */
[data-pendiente] { border-bottom: 2px dotted var(--manda-borde-fuerte); }
.viñetas span { color: var(--manda-texto-secundario); font-size: var(--manda-size-detalle); }
/* ---------- Los cuatro estados ---------- */
.fila-estado { display: grid; grid-template-columns: 56px 1fr; gap: var(--manda-space-4);
align-items: start; padding-block: var(--manda-space-4); border-top: 1px solid var(--manda-borde); }
.fila-estado:last-child { border-bottom: 1px solid var(--manda-borde); }
.glifo { display: flex; align-items: center; justify-content: center; }
/* El punto a tamano hero: el sistema se detiene en 14px. 40 es multiplo de 4 y
conserva la relacion de borde 2/10 -> 8/40. */
.punto { width: 40px; height: 40px; border-radius: var(--manda-radio-pill); flex: none; }
.p-pendiente { border: 8px solid var(--manda-punto-estado-pendiente); }
.p-procesando { border: 8px solid var(--manda-punto-estado-procesando); animation: latido var(--manda-motion-latido) var(--manda-motion-curva) infinite; }
.p-entregado { background: var(--manda-punto-estado-entregado); }
.p-desconocido { border: 8px solid var(--manda-punto-estado-desconocido);
background: linear-gradient(90deg, var(--manda-punto-estado-desconocido) 50%, transparent 50%); }
/* El latido es MOVIMIENTO, no forma: apagado, «en camino» y «llego» colapsan.
Por eso el icono es obligatorio y no decorativo. */
@media (prefers-reduced-motion: reduce) { .p-procesando { animation: none; } }
@keyframes latido { 50% { transform: scale(1.1); } }
.fila-estado h3 { margin: 0 0 var(--manda-space-1); font-size: var(--manda-size-titulo3);
display: flex; align-items: center; gap: var(--manda-space-2); }
.fila-estado p { margin: 0; color: var(--manda-texto-secundario); font-size: var(--manda-size-detalle); }
.ic { width: 18px; height: 18px; color: var(--manda-texto-secundario); flex: none; }
/* ---------- Formulario ---------- */
.espera { background: var(--manda-superficie); border: 1px solid var(--manda-borde);
border-radius: var(--manda-radio-lg); padding: var(--manda-space-5); }
.espera__campos { display: grid; gap: var(--manda-space-4); margin-bottom: var(--manda-space-4); }
label, .leyenda { display: block; margin-bottom: var(--manda-space-2);
font-size: var(--manda-size-detalle); font-weight: 500; }
input[type="email"], input[type="text"] {
width: 100%; height: var(--manda-campo-alto); padding-inline: var(--manda-campo-padding-x);
font: inherit; color: var(--manda-campo-fg); background: var(--manda-campo-bg);
border: 1px solid var(--manda-campo-borde); border-radius: var(--manda-campo-radio);
}
input::placeholder { color: var(--manda-campo-placeholder); }
input[aria-invalid="true"] { border-color: var(--manda-campo-borde-error); border-width: 2px; }
fieldset { margin: 0 0 var(--manda-space-4); padding: 0; border: 0; }
.paises { display: flex; gap: var(--manda-space-2); }
.paises label { flex: 1; margin: 0; display: flex; align-items: center; justify-content: center;
min-height: var(--tap); border: 1px solid var(--manda-boton-terciario-borde);
border-radius: var(--manda-radio-pill); background: var(--manda-boton-terciario-bg);
color: var(--manda-boton-terciario-fg); font-weight: 500; cursor: pointer;
transition: background var(--manda-motion-rapido) var(--manda-motion-curva); }
.paises input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.paises label:has(input:checked) { background: var(--manda-superficie-marca);
border-color: var(--manda-primario); color: var(--manda-texto-marca); font-weight: 600; }
.paises label:has(input:focus-visible) { outline: 3px solid var(--manda-foco); outline-offset: 2px; }
.consent { display: flex; gap: var(--manda-space-3); align-items: flex-start; min-height: var(--tap);
margin-bottom: var(--manda-space-4); font-size: var(--manda-size-detalle);
color: var(--manda-texto-secundario); cursor: pointer; }
.consent input { width: 24px; height: 24px; margin: 0; flex: none; }
.espera .cta { width: 100%; }
/* Cargando NO encoge: conserva ancho y palabra. */
.cta[data-cargando="si"]::after { content: ""; display: inline-block; margin-left: var(--manda-space-2);
width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent;
border-radius: 50%; animation: giro var(--manda-motion-giro) linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
.nota { margin: var(--manda-space-3) 0 0; font-size: var(--manda-size-micro); color: var(--manda-texto-secundario); }
.error-campo { display: flex; gap: var(--manda-space-2); align-items: center;
margin-top: var(--manda-space-2); font-size: var(--manda-size-detalle); color: var(--manda-error-texto); }
.ok h3 { margin: 0 0 var(--manda-space-2); font-size: var(--manda-size-titulo2); }
.ok p { margin: 0 0 var(--manda-space-2); color: var(--manda-texto-secundario); }
.ref { font-family: var(--manda-font-mono); font-variant-numeric: tabular-nums; font-size: var(--manda-size-detalle); }
/* ---------- Pie ---------- */
.pie { background: var(--manda-superficie-inversa); color: var(--manda-texto-sobre-inversa); margin-top: var(--sx-gap); }
.pie .wrap { padding-block: var(--manda-space-8); }
.pie__grid { display: grid; grid-template-columns: 1fr; gap: var(--manda-space-6); }
@media (min-width: 48em) { .pie__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.pie h3 { font-size: var(--manda-size-micro); font-weight: 600; letter-spacing: .08em;
text-transform: uppercase; margin: 0 0 var(--manda-space-3); opacity: .8; }
.pie li + li { margin-top: var(--manda-space-2); }
.pie a { color: inherit; }
.pie__nota { margin: 0; font-size: var(--manda-size-micro); line-height: 1.8;
color: color-mix(in srgb, var(--manda-texto-sobre-inversa) 80%, transparent); }
.pie__abajo { margin-top: var(--manda-space-6); padding-top: var(--manda-space-4);
border-top: 1px solid color-mix(in srgb, var(--manda-texto-sobre-inversa) 25%, transparent);
font-size: var(--manda-size-micro); line-height: 1.8; }
.bloqueo { margin-top: var(--manda-space-4); padding: var(--manda-space-3);
border: 1px dashed color-mix(in srgb, var(--manda-texto-sobre-inversa) 45%, transparent);
border-radius: var(--manda-radio-md); font-size: var(--manda-size-micro); }
padding: var(--manda-space-2) var(--manda-space-3); border: 1px solid var(--manda-borde-fuerte);
border-radius: var(--manda-radio-pill); background: var(--manda-superficie); color: var(--manda-texto); cursor: pointer; }
/* ═══════════════════════════════════════════════════════════════════
CALCULADORA — cáscara completa con la tasa en blanco (decisión D3).
Montada sobre el borde inferior de la foto en escritorio; en móvil
asoma bajo el pliegue, porque ahí la foto manda (decisión 7).
Prohibido calc() con división en esta página: el navegador del founder
descarta la declaración entera y falla MUDO.
═══════════════════════════════════════════════════════════════════ */
.cotizador { position: relative; z-index: 5; }
.cotizador__tarjeta {
width: 100%;
background: var(--manda-superficie);
border: 0;
border-radius: var(--manda-radio-lg);
/* Sombra con OFFSET y tinte de antracita, no un halo: una tarjeta sobre una
fotografia necesita separarse por profundidad, no por un borde gris. */
box-shadow: 0 24px 60px color-mix(in srgb, var(--web-velo) 38%, transparent),
0 2px 8px color-mix(in srgb, var(--web-velo) 18%, transparent);
padding: var(--manda-space-5);
}
/* En escritorio sube sobre la foto. El margen negativo es un valor plano,
no una división: el número se precalcula. */
@media (min-width: 48em) { .cotizador__tarjeta { padding: var(--manda-space-6); } }
.cot__fila { display: grid; gap: var(--manda-space-3); margin-bottom: var(--manda-space-4); align-items: stretch; }
.cot__fila--montos .cot__campo { display: flex; flex-direction: column; }
.cot__fila--montos .cot__campo > .cot__monto, .cot__fila--montos .cot__recibe { flex: 1; }
/* Los dos desplegables lado a lado incluso en móvil: apilarlos suma 76px
y la tarjeta deja de asomar bajo el pliegue. Medido. */
.cot__fila--paises { grid-template-columns: 1fr 1fr; align-items: end; }
.cot__fila--montos { grid-template-columns: 1fr; }
@media (min-width: 34em) { .cot__fila--montos { grid-template-columns: 1fr 1fr; } }
.cot__campo label, .cot__campo .leyenda {
display: block; margin-bottom: var(--manda-space-2);
font-size: var(--manda-size-detalle); font-weight: 500; color: var(--manda-texto-secundario);
}
/* El desplegable: componente nuevo del sistema, heredado de `campo`. */
.cot__select {
position: relative; display: block;
}
.cot__select select {
width: 100%; height: var(--manda-select-alto);
padding-left: var(--manda-select-padding-x);
padding-right: var(--manda-space-6);
font: inherit; font-size: var(--manda-select-size);
color: var(--manda-select-fg);
background: var(--manda-select-bg);
border: 1px solid var(--manda-select-borde);
border-radius: var(--manda-select-radio);
appearance: none; -webkit-appearance: none;
cursor: pointer;
text-overflow: ellipsis;
}
/* La bandera necesita aire: sin esto se lee «EspañaEspaña» pegado. */
.cot__select select option { padding-block: 4px; }
/* La opción sin elegir NO usa el placeholder del campo: medido, texto-tenue
sobre superficie da 3,15:1 — alcanza para un borde (3,0) y no para texto (4,5). */
.cot__select select:invalid, .cot__select select option[value=""] { color: var(--manda-select-fg-sin-elegir); }
.cot__select::after {
content: ""; position: absolute; right: 14px; top: 22px;
width: 9px; height: 9px; pointer-events: none;
border-right: 2px solid var(--manda-select-cheuron);
border-bottom: 2px solid var(--manda-select-cheuron);
transform: rotate(45deg);
}
.cot__select select:focus-visible { outline: 3px solid var(--manda-foco); outline-offset: 2px; }
/* El campo de monto reusa `monto-entrada`, que el sistema ya tenía. */
.cot__monto { position: relative; }
.cot__monto input {
width: 100%; height: var(--manda-campo-alto);
padding-left: var(--manda-campo-padding-x); padding-right: 64px;
font: inherit; font-size: var(--manda-size-titulo3); font-weight: 600;
font-variant-numeric: tabular-nums;
color: var(--manda-campo-fg); background: var(--manda-campo-bg);
border: 1px solid var(--manda-campo-borde); border-radius: var(--manda-campo-radio);
}
.cot__monto .moneda {
position: absolute; right: 14px; top: 17px;
font-size: var(--manda-size-detalle); font-weight: 600;
color: var(--manda-texto-secundario); font-variant-numeric: tabular-nums;
}
/* El hueco de la tasa: dice QUÉ FALTA, en antracita, no en gris de
deshabilitado. El hueco es información, no ausencia (decisión 3). */
/* El hueco de la tasa es INFORMACION, no alarma. El tinte rosa con borde
punteado se leia como un estado de error: el rosa es marca y accion, nunca
estado. Va sobre el fondo general, con borde solido y un filete de marca
a la izquierda que lo marca como «esto viene». */
/* El campo de recibir es el ESPEJO del de enviar: misma altura, misma tipografia
de cifra, tabular. Lo que lo distingue es que no se escribe. */
.cot__recibe {
position: relative; display: flex; align-items: center;
min-height: var(--manda-campo-alto);
padding-left: var(--manda-campo-padding-x); padding-right: 64px;
background: var(--manda-bg);
border: 1px solid var(--manda-borde);
border-radius: var(--manda-campo-radio);
}
.cot__recibe b {
font-size: var(--manda-size-titulo3); font-weight: 600;
font-variant-numeric: tabular-nums; color: var(--manda-texto);
}
.cot__moneda-destino {
position: absolute; right: 14px; top: 17px;
font-size: var(--manda-size-detalle); font-weight: 600;
color: var(--manda-texto-secundario); font-variant-numeric: tabular-nums;
}
/* La linea de tasa. El «tasa de ejemplo» NO es letra chica decorativa: es lo que
impide que una cifra de marcador se lea como la tasa de manda. Va al lado del
numero, no en un pie que nadie mira. */
.cot__tasa {
display: flex; align-items: baseline; gap: var(--manda-space-2);
flex-wrap: wrap; margin: 0;
font-size: var(--manda-size-detalle); color: var(--manda-texto-secundario);
font-variant-numeric: tabular-nums;
}
.cot__tasa b { color: var(--manda-texto); font-weight: 600; }
.cot__tasa em {
font-style: normal; font-size: var(--manda-size-micro); font-weight: 600;
letter-spacing: .04em; text-transform: uppercase;
color: var(--manda-texto-secundario);
border: 1px solid var(--manda-borde-fuerte);
border-radius: var(--manda-radio-pill);
padding: 2px var(--manda-space-2);
}
/* Los tiempos suben acá (decisión 8): el gesto que no puede dar la tasa
devuelve algo verdadero en el acto. */
.cot__tiempos { margin: 0; }
.cot__tiempos li {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--manda-space-4); padding-block: var(--manda-space-4);
border-bottom: 1px solid var(--manda-borde);
}
.cot__tiempos li:last-child { border-bottom: 0; }
.cot__tiempos b { font-weight: 500; font-size: var(--manda-size-detalle); }
/* Decision 5: el TIEMPO es el dato y manda la jerarquia. Mientras no haya tasa,
esta es la unica cifra verdadera de la tarjeta. */
.cot__tiempos i {
font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums;
font-size: var(--manda-size-titulo3); letter-spacing: -0.02em;
white-space: nowrap; line-height: 1.1;
}
.cot__tiempos small { display: block; color: var(--manda-texto-secundario); font-size: var(--manda-size-micro); }
.cot__accion { margin-top: var(--manda-space-4); }
.cot__accion .cta { width: 100%; }
/* Insignias: activos oficiales, geometría de tengo-web/DESIGN-WEB.md §8.
Apple 44px de alto visible; Google 57,3 porque trae 29px transparentes
arriba y abajo (15% de su alto visible). El gap de 20 cubre los dos
espacios libres exigidos (Apple 4,4 · Google 11). */
.tiendas { margin: var(--manda-space-4) 0 0; text-align: center; }
/* Las dos insignias SIEMPRE en fila: apiladas se ven desproporcionadas y rompen
el ritmo de la tarjeta. El pie va aparte, no compitiendo por el flex. */
.tiendas__par { display: flex; gap: 16px; align-items: center; justify-content: center; }
.tiendas img { display: block; width: auto; }
.tiendas .apple { height: 36px; }
.tiendas .google { height: 46.9px; } /* 36 x 250/192, la compensacion de §8 */
@media (min-width: 34em) {
.tiendas .apple { height: 44px; }
.tiendas .google { height: 57.3px; }
}
.tiendas figcaption { width: 100%; text-align: center; margin-top: var(--manda-space-2);
font-size: var(--manda-size-micro); color: var(--manda-texto-secundario); }
/* ── T4 · grilla de los 30 orígenes ──────────────────────────────── */
.banderas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--manda-space-3) var(--manda-space-4); }
@media (min-width: 34em) { .banderas { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 62em) { .banderas { grid-template-columns: repeat(3, 1fr); } }
.banderas li { display: flex; align-items: center; gap: var(--manda-space-2);
font-size: var(--manda-size-detalle); }
.banderas i { font-style: normal; font-size: 19px; line-height: 1; flex: none; }
.banderas span { color: var(--manda-texto-secundario); }
/* La banda de cobertura va sobre superficie inversa: es el único bloque oscuro
de la página y por eso ancla la mitad inferior. No lleva estados adentro. */
.cobertura { background: var(--manda-superficie-inversa); color: var(--manda-texto-sobre-inversa); }
.cobertura .antetitulo,
.cobertura .bajada,
.cobertura .banderas span { color: color-mix(in srgb, var(--manda-texto-sobre-inversa) 80%, transparent); }
.cobertura h2 { color: var(--manda-texto-sobre-inversa); }
.cobertura .acento { color: var(--manda-texto-sobre-inversa); text-decoration: underline;
text-decoration-color: var(--manda-primario); text-underline-offset: 6px; text-decoration-thickness: 3px; }
.cobertura + .mod > .wrap { border-top: 0; }
/* ── T5 · hechos verificables, en vez de testimonios ─────────────── */
.hechos { display: grid; gap: var(--manda-space-5); }
.hechos li { padding-bottom: var(--manda-space-4); border-bottom: 1px solid var(--manda-borde); }
.hechos li:last-child { border-bottom: 0; padding-bottom: 0; }
.hechos b { display: block; margin-bottom: var(--manda-space-1); }
.hechos span { color: var(--manda-texto-secundario); font-size: var(--manda-size-detalle); }
/* El botón del héroe deja de competir con el del cotizador: uno solo es primario. */
.cta--fantasma {
background: transparent; color: var(--web-sobre-foto);
border: 1px solid color-mix(in srgb, var(--manda-neutral-0) 55%, transparent);
}
@media (hover: hover) {
.cta--fantasma:hover { background: color-mix(in srgb, var(--manda-neutral-0) 14%, transparent); }
}
/* La pildora de la barra no parte en dos lineas en movil. */
.cta--chico { padding-inline: var(--manda-space-4); font-size: var(--manda-size-detalle);
white-space: nowrap; min-height: 44px; }
@media (min-width: 34em) { .cta--chico { padding-inline: var(--manda-space-5); min-height: var(--tap); } }
/* El boton del cotizador tampoco. */
.cot__accion .cta { font-size: var(--manda-size-detalle); text-align: center; line-height: 1.25;
padding-inline: var(--manda-space-3); height: auto; min-height: var(--tap); }
/* A 390px el select mide 133 y «Venezuela» con bandera pide ~110: el cheuron
rozaba la ultima letra. Baja un escalon de tipografia solo en movil. */
.cot__select select { font-size: var(--manda-size-detalle); }
@media (min-width: 34em) {
.cot__select select { padding-right: var(--manda-select-padding-derecha); font-size: var(--manda-select-size); }
}
/* ── Próximamente ────────────────────────────────────────────────
Europa va como HECHO; esto va como intención, y la diferencia tiene que
verse sin leer: las banderas van atenuadas y la sección lo dice literal.
Nunca en ámbar ni en rojo — no es una alerta, es un plan. */
.proximo .banderas--prox li { opacity: .62; }
.proximo .banderas--prox i { filter: grayscale(1); }
.nota-prox {
margin: var(--manda-space-4) 0 0;
font-size: var(--manda-size-detalle);
color: var(--manda-texto-secundario);
border-top: 1px solid var(--manda-borde);
padding-top: var(--manda-space-3);
}
/* ── Formulario en espera ─────────────────────────────────────────
Decision del founder, 2026-10-07: la pagina se publica en mandale.co SIN
recoger datos. Sin recoleccion no nace la obligacion de nombrar una sociedad
responsable del tratamiento, que hoy no existe. Se ve igual: los campos estan,
inactivos, y la nota dice que la lista abre pronto. El dia que exista la
sociedad se quita `disabled` y se enciende. */
.espera input:disabled, .espera select:disabled {
background: var(--manda-deshabilitado-bg);
color: var(--manda-deshabilitado-fg);
border-color: var(--manda-deshabilitado-borde);
cursor: not-allowed;
}
.espera .paises label:has(input:disabled) {
background: var(--manda-deshabilitado-bg);
border-color: var(--manda-deshabilitado-borde);
color: var(--manda-deshabilitado-fg);
cursor: not-allowed;
}
.espera .consent:has(input:disabled) { cursor: not-allowed; }
.cta[disabled] {
background: var(--manda-deshabilitado-bg);
color: var(--manda-deshabilitado-fg);
border: 1px solid var(--manda-deshabilitado-borde);
cursor: not-allowed;
}