/* ============================================================
   SOS Mi Gente: mg-brand.css — fundamentos de la marca publica
   Tokens, tipografia, botones, etiqueta y foto del sistema de los
   mockups. Lo comparten la portada y el ingreso, y cualquier
   pantalla publica que se sume despues.
   Se activa poniendo la clase "marca" en el body, y se carga
   DESPUES de mg-app.css. Los portales no lo cargan.
   ============================================================ */

body.marca {
    --page:   #FBF9F6;   /* hueso calido */
    --paper:  #FFFFFF;
    --surface:#FFFFFF;
    --ink:    #0E1211;
    --ink-2:  #3D4642;
    /* #767F79 del mockup daba 4.13:1 sobre blanco: por debajo del 4.5 que
       pide WCAG AA para texto normal, y por eso todo se veia desvaido.
       #646D67 conserva el gris calido y da 5.35:1 y 5.09:1. */
    --ink-3:  #646D67;
    --muted:  #646D67;
    --hairline:#E7E2DA;
    --line-2: #F1EDE6;

    --sos:      #F0402A;   /* el unico color de accion: botones y activo */
    /* Tono de dato: el rojo de marca en un area grande grita. Este es el mismo
       familia pero menos saturado, y da 4.33:1 sobre blanco (marca grafica
       necesita 3:1). */
    --dato:      #C9553F;
    --dato-alto: #B3462F;
    --dato-suave:#F6E4DF;
    --sos-2:    #FF6A4D;
    --sos-soft: #FFEEEA;
    --sos-ink:  #A32414;
    --primary:  #F0402A;
    --primary-dn:#A32414;
    --primary-soft:#FFEEEA;

    --verde:     #0E9F6E;  /* cubierto, confirmado: nunca es un boton */
    --verde-soft:#E4F6EE;
    --verde-ink: #0A6B4A;
    --azul:      #2F5FE0;
    --azul-soft: #EDF2FE;
    --azul-ink:  #1E3E9E;

    --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:36px; --r-full:999px;
    --sh-1: 0 1px 2px rgba(14,18,17,.04), 0 4px 14px rgba(14,18,17,.05);
    --sh-2: 0 2px 6px rgba(14,18,17,.05), 0 14px 36px rgba(14,18,17,.09);
    --ancho: 1240px;

    background: var(--page); color: var(--ink);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px; line-height: 1.55;
}
body.marca img { max-width: 100%; display: block; }
/* El atributo hidden lo pisa cualquier regla con display: hay que forzarlo. */
body.marca [hidden] { display: none !important; }
/* mg-app.css no resetea los margenes de titulo y parrafo; aqui el ritmo lo
   pone el gap de cada grid, asi que se quitan para que no se sumen. */
body.marca h1, body.marca h2, body.marca h3, body.marca h4,
body.marca p, body.marca ul, body.marca ol,
body.marca figure, body.marca figcaption { margin: 0; }
body.marca ul, body.marca ol { padding: 0; list-style: none; }
body.marca .main-content { padding: 0; max-width: none; }
/* la portada usa un contenedor mas ancho: la barra lo sigue */
body.marca .pubnav { --pn-ancho: 1240px; }
body.marca .wrapper { overflow-x: clip; }

/* ---------------- tipografia ---------------- */
body.marca .display {
    font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 800; line-height: 1.02; letter-spacing: -.035em;
}
body.marca h1.display { font-size: clamp(38px, 6.2vw, 78px); }
body.marca h2.display { font-size: clamp(29px, 3.9vw, 48px); line-height: 1.06; letter-spacing: -.03em; }
body.marca h3 { font-family: 'Bricolage Grotesque', 'Plus Jakarta Sans', sans-serif;
    font-weight: 800; letter-spacing: -.025em; line-height: 1.15; font-size: clamp(19px, 2vw, 24px); }
body.marca .lede { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; color: var(--ink-2); }

/* ---------------- envoltura y secciones ---------------- */
.h-in { width: min(var(--ancho), calc(100% - 36px)); margin-inline: auto; }
.h-sec { padding-block: clamp(38px, 4.4vw, 68px); }
.h-sec-papel { background: var(--paper); border-block: 1px solid var(--hairline); }
.h-cab { display: grid; gap: 11px; max-width: min(62ch, 100%); margin-bottom: 24px; }

/* etiqueta */
.eti {
    display: inline-flex; align-items: center; gap: 8px;
    justify-self: start; width: fit-content;
    padding: 7px 14px; border-radius: var(--r-full);
    background: var(--sos-soft); color: var(--sos-ink);
    font-size: 12.5px; font-weight: 700;
}
.eti.vidrio { background: rgba(255,255,255,.16); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.eti.verde { background: var(--verde-soft); color: var(--verde-ink); }

/* botones, en pildora (dentro de body.marca se redefine .btn de mg-app.css) */
body.marca .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 52px; padding: 0 26px; border: 1.5px solid transparent; border-radius: var(--r-full);
    font-size: 15px; font-weight: 700; letter-spacing: -.01em;
    transition: transform .18s cubic-bezier(.2,.8,.25,1), box-shadow .18s, background .18s, border-color .18s;
}
body.marca .btn:hover { transform: translateY(-2px); text-decoration: none; }
body.marca .btn-primary { background: var(--sos); color: #fff; box-shadow: 0 8px 22px rgba(240,64,42,.30); }
body.marca .btn-primary:hover { background: #DE3520; box-shadow: 0 14px 32px rgba(240,64,42,.38); }
body.marca .btn-outline { background: var(--paper); border-color: var(--hairline); color: var(--ink); }
body.marca .btn-outline:hover { border-color: var(--ink); }
.btn-vidrio {
    background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.30); color: #fff;
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.btn-vidrio:hover { background: rgba(255,255,255,.24); color: #fff; }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { color: #fff; }

/* foto: la imagen va fuera del flujo para que el aspect-ratio mande */
.foto { position: relative; overflow: hidden; background: #E7E2DA; }
.foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto .velo { position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(8,11,10,.86) 0%, rgba(8,11,10,.34) 46%, rgba(8,11,10,.06) 100%); }

/* ============================================================
   Aparicion al bajar. Solo se esconde si el guion confirmo que
   puede animar: sin JS, el contenido se ve igual.
   ============================================================ */
html.anima body.marca .revela { opacity: 0; transform: translateY(18px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.25,1); }
html.anima body.marca .revela.visible { opacity: 1; transform: none; }

/* ---------------- iconos ----------------
   SVG de linea en vez de emoji: heredan el color y no cambian de forma
   segun el sistema. Sin esto el navegador los pinta rellenos de negro. */
body.marca .ico { width: 1.15em; height: 1.15em; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 1.75;
    stroke-linecap: round; stroke-linejoin: round; }
.h-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------------- selector propio ----------------
   El desplegable nativo no se puede estilar, asi que se pinta uno
   con semantica de combobox. El <select> real sigue en el DOM y es
   la fuente de verdad: el guion de la pagina no cambia. */
.sel-nativo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sel { position: relative; }
.form-group > .sel { display: grid; gap: 6px; }
.sel-boton { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
    padding: 12px 14px; border: 1.5px solid var(--hairline); border-radius: var(--r-sm);
    background: var(--paper); font: inherit; font-size: 16px; color: var(--ink);
    text-align: left; cursor: pointer; transition: border-color .16s, box-shadow .16s; }
.sel-boton:hover { border-color: #CFC8BC; }
.sel-boton[aria-expanded="true"], .sel-boton:focus-visible { outline: none;
    border-color: var(--sos); box-shadow: 0 0 0 3px rgba(240,64,42,.14); }
.sel-boton.vacio { color: #9AA29D; }
.sel-boton .flecha { margin-left: auto; width: 16px; height: 16px; color: var(--ink-3);
    transition: transform .2s; flex: 0 0 16px; }
.sel-boton[aria-expanded="true"] .flecha { transform: rotate(180deg); }
.sel-lista { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px);
    max-height: 250px; overflow-y: auto; padding: 6px; margin: 0; list-style: none;
    border: 1px solid var(--hairline); border-radius: var(--r-sm);
    background: var(--paper); box-shadow: var(--sh-2);
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .16s, transform .16s; }
.sel-lista.abierta { opacity: 1; transform: none; pointer-events: auto; }
/* Hacia arriba cuando no cabe debajo, que en un movil es casi siempre en el
   ultimo campo del formulario. */
.sel-lista.arriba { top: auto; bottom: calc(100% + 6px); transform: translateY(6px); }
.sel-lista.arriba.abierta { transform: none; }
.sel-opcion { display: flex; align-items: center; gap: 9px; padding: 10px 11px; border-radius: 10px;
    font-size: 14.5px; color: var(--ink); cursor: pointer; }
.sel-opcion small { margin-left: auto; font-size: 12px; color: var(--ink-2); }
.sel-opcion:hover, .sel-opcion.marcada { background: var(--page); }
.sel-opcion[aria-selected="true"] { background: var(--sos-soft); color: var(--sos-ink); font-weight: 700; }
.sel-opcion[aria-selected="true"] small { color: var(--sos-ink); }
.sel-opcion .tic { width: 15px; height: 15px; flex: 0 0 15px; opacity: 0; color: var(--sos); }
.sel-opcion[aria-selected="true"] .tic { opacity: 1; }

/* ============================================================
   Modal (openModal de utils.js). Vive aqui y no en una hoja de
   portal porque lo usan por igual las pantallas publicas y las
   privadas: una sola definicion.
   Cabecera con color: el modal blanco sobre fondo blanco no se
   distinguia del contenido de detras.
   ============================================================ */
body.marca .modal { border-radius: var(--r-xl); }
body.marca .modal-head {
    padding: 18px 22px; border-bottom: 0;
    background: linear-gradient(120deg, var(--ink) 0%, #241A18 60%, #3A1E19 100%);
    color: #fff;
}
body.marca .modal-title { font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 19px; font-weight: 800; letter-spacing: -.025em; color: #fff; }
/* 40 y no 34: es el unico camino para cerrar un modal con el pulgar. */
body.marca .modal-close { width: 40px; height: 40px; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.14); color: #fff; font-size: 15px; cursor: pointer;
    transition: background .16s; }
body.marca .modal-close:hover { background: rgba(255,255,255,.26); }
body.marca .modal-body { padding: 22px; }
body.marca .modal-foot { padding: 16px 22px; gap: 10px; background: var(--page); border-color: var(--hairline); }

/* aviso dentro de un modal o de una tarjeta */
body.marca .notice { padding: 12px 14px; border-radius: var(--r-sm);
    background: #FFF4E2; color: #8A5A12; font-size: 13px; line-height: 1.5; }
body.marca .notice.azul { background: var(--azul-soft); color: var(--azul-ink); }

/* Dentro de un modal la lista tiene que quedar por encima de todo. El recorte
   del cuerpo lo libera el propio selector mientras la lista esta abierta. */
body.marca .modal .sel-lista { z-index: 300; }