/* ==========================================================
   AAM · Sistema de diseño v1 — Base y componentes
   Requiere css/aam-tokens.css. Clases con prefijo aam-.
   ========================================================== */

/* ---------- Reset y base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-header) + var(--esp-4)); }
body {
    margin: 0;
    font: 400 16px/24px var(--font-sans);
    color: var(--texto);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--enlace); text-underline-offset: 3px; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--texto); text-wrap: balance; }
:focus-visible { outline: 3px solid var(--primario); outline-offset: 2px; }
.aam-visualmente-oculto {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.aam-saltar {
    position: absolute; left: var(--esp-4); top: -60px; z-index: 1000;
    background: var(--primario); color: var(--sobre-primario); padding: var(--esp-2) var(--esp-4);
    border-radius: var(--radio-control); font-weight: 600; text-decoration: none;
}
.aam-saltar:focus { top: var(--esp-2); }

/* Temas de sección: aplican fondo y color del modo */
[data-theme] { background: var(--fondo); color: var(--texto); }

/* ---------- Layout ---------- */
.aam-contenedor { width: 100%; max-width: var(--ancho-max); margin: 0 auto; padding: 0 var(--esp-6); }
.aam-seccion { padding: var(--esp-16) 0; }
.aam-seccion--superficie { background: var(--superficie); }
.aam-grilla { display: grid; gap: var(--esp-6); }
.aam-grilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aam-grilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aam-grilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) {
    .aam-grilla--3, .aam-grilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .aam-contenedor { padding: 0 var(--esp-4); }
    .aam-seccion { padding: var(--esp-12) 0; }
    .aam-grilla--2, .aam-grilla--3 { grid-template-columns: 1fr; }
}

/* ---------- Íconos (Lucide, trazo) ---------- */
.aam-icono { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aam-icono--chico { width: 16px; height: 16px; }
.aam-icono--grande { width: 28px; height: 28px; }

/* ---------- Botón ---------- */
.aam-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
    font: 600 15px/20px var(--font-sans); letter-spacing: .02em;
    padding: var(--esp-3) var(--esp-6); min-height: 44px;
    border-radius: var(--radio-control); border: 1px solid transparent;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s;
}
.aam-btn--primario { background: var(--primario); color: var(--sobre-primario); }
.aam-btn--primario:hover { background: var(--primario-hover); }
.aam-btn--secundario { background: transparent; color: var(--texto); border-color: var(--borde-control); }
.aam-btn--secundario:hover { border-color: var(--texto); }
.aam-btn--texto { background: transparent; color: var(--enlace); padding-left: 0; padding-right: 0; text-decoration: underline; text-underline-offset: 3px; min-height: 0; }
.aam-btn--claro { background: #fff; color: var(--marca-azul); }
.aam-btn--claro:hover { background: var(--marca-azul-tinte); }
.aam-btn--chico { min-height: 36px; padding: var(--esp-2) var(--esp-4); font-size: 14px; }
.aam-btn[disabled], .aam-btn--deshabilitado { opacity: .45; cursor: not-allowed; }
[data-theme="dark"] .aam-btn--mayus { text-transform: uppercase; letter-spacing: .06em; }
.aam-acciones { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; }

/* ---------- Etiqueta ---------- */
.aam-tag {
    display: inline-flex; align-items: center; gap: var(--esp-1);
    font: 500 12px/16px var(--font-sans); padding: var(--esp-1) var(--esp-3);
    border-radius: var(--radio-pildora); background: var(--marca-azul-tinte); color: var(--marca-azul);
}
[data-theme="dark"] .aam-tag { background: var(--superficie); color: var(--texto); border: 1px solid var(--linea); }
.aam-tag.aam-tag--exito { background: var(--exito-fondo); color: var(--exito); border-color: transparent; }
.aam-tag.aam-tag--alerta { background: var(--alerta-fondo); color: var(--alerta); border-color: transparent; }
.aam-tag.aam-tag--error { background: var(--error-fondo); color: var(--error); border-color: transparent; }

/* ---------- Encabezado de sección ---------- */
.aam-encabezado { display: flex; flex-direction: column; gap: var(--esp-3); margin-bottom: var(--esp-8); }
.aam-encabezado--centro { align-items: center; text-align: center; }
.aam-eyebrow { font: 600 13px/16px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--acento); }
.aam-titulo { font: 600 32px/1.15 var(--font-display); color: var(--texto); }
.aam-titulo--h1 { font-size: 44px; line-height: 1.05; }
.aam-titulo--display { font-size: 64px; line-height: .95; font-weight: 700; text-transform: uppercase; letter-spacing: -.01em; }
.aam-titulo__apagado { color: var(--texto-suave); }
[data-theme="dark"] .aam-titulo__apagado { color: var(--mercurio-petroleo); }
.aam-titulo__luz { color: var(--acento); display: block; }
.aam-bajada { font: 400 18px/28px var(--font-sans); color: var(--texto-suave); max-width: 60ch; }
.aam-texto { color: var(--texto-suave); max-width: 68ch; }
.aam-texto + .aam-texto { margin-top: var(--esp-4); }
@media (max-width: 640px) {
    .aam-titulo { font-size: 26px; }
    .aam-titulo--h1 { font-size: 34px; }
    .aam-titulo--display { font-size: 40px; }
    .aam-bajada { font-size: 17px; line-height: 26px; }
}

/* ---------- Tarjeta ---------- */
.aam-card {
    background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta); overflow: hidden; display: flex; flex-direction: column;
    color: var(--texto); text-decoration: none;
}
/* Filete superior de color (manual Mercurio, «Próximos pasos») */
.aam-card--filete { border-top: 4px solid var(--acento); }
a.aam-card { transition: border-color .15s, transform .15s; }
a.aam-card:hover { border-color: var(--borde-control); transform: translateY(-2px); }
a.aam-card:hover .aam-card__mas { text-decoration: underline; }
.aam-card__media { aspect-ratio: 4 / 3; background: var(--marca-azul-tinte); overflow: hidden; }
.aam-card__media img { width: 100%; height: 100%; object-fit: cover; }
[data-theme="dark"] .aam-card__media { background: var(--mercurio-petroleo); }
.aam-card__cuerpo { padding: var(--esp-6); display: flex; flex-direction: column; gap: var(--esp-2); flex: 1; }
.aam-card__icono {
    width: 48px; height: 48px; border-radius: var(--radio-control); display: grid; place-items: center;
    background: var(--marca-azul-tinte); color: var(--marca-azul); margin-bottom: var(--esp-2);
}
[data-theme="dark"] .aam-card__icono { background: var(--mercurio-petroleo); color: var(--mercurio-lima); }
.aam-card__titulo { font: 600 22px/1.25 var(--font-display); color: var(--texto); }
.aam-card__texto { font: 400 14px/20px var(--font-sans); color: var(--texto-suave); }
.aam-card__mas { margin-top: auto; padding-top: var(--esp-2); font: 600 14px/20px var(--font-sans); color: var(--enlace); display: inline-flex; align-items: center; gap: var(--esp-1); }

/* ---------- Aviso ---------- */
.aam-aviso {
    display: flex; gap: var(--esp-4); align-items: flex-start;
    padding: var(--esp-4) var(--esp-6); border-radius: var(--radio-tarjeta);
    background: var(--marca-azul-tinte); color: var(--marca-azul);
}
[data-theme="dark"] .aam-aviso { background: var(--superficie); color: var(--texto); }
.aam-aviso.aam-aviso--exito { background: var(--exito-fondo); color: var(--exito); }
.aam-aviso.aam-aviso--alerta { background: var(--alerta-fondo); color: var(--alerta); }
.aam-aviso.aam-aviso--error { background: var(--error-fondo); color: var(--error); }
.aam-aviso__titulo { font: 600 15px/20px var(--font-sans); margin: 0 0 var(--esp-1); }
.aam-aviso__texto { font: 400 14px/20px var(--font-sans); color: var(--texto); }

/* ---------- Degradés del Mercurio (solo en piezas del Mercurio) ---------- */
.aam-aurora {
    background:
        radial-gradient(60% 70% at 72% 45%, rgba(0, 91, 101, .95) 0%, rgba(0, 91, 101, .35) 45%, rgba(0, 11, 31, 0) 75%),
        var(--mercurio-noche);
}
.aam-revelado { background: radial-gradient(circle at 50% 50%, var(--mercurio-noche) 0 28%, var(--mercurio-petroleo) 55%, var(--mercurio-lima) 100%); }
.aam-bruma { background: radial-gradient(circle at 50% 45%, #fbffef 0 20%, var(--mercurio-lima-palido) 45%, #6f9c97 100%); }

/* Logotipo «Premio / MERCURIO» (mientras no esté el vector oficial) */
.aam-logotipo-mercurio { font-family: var(--font-display); line-height: .95; color: var(--mercurio-lima); }
.aam-logotipo-mercurio span { display: block; font-weight: 300; font-size: .62em; letter-spacing: .01em; }
.aam-logotipo-mercurio strong { display: block; font-weight: 600; text-transform: uppercase; letter-spacing: .01em; }

/* =========================================================
   HEADER
   ========================================================= */
.aam-header {
    position: sticky; top: 0; z-index: 900;
    background: var(--superficie); border-bottom: 1px solid var(--linea);
}
.aam-header__barra { display: flex; align-items: center; gap: var(--esp-6); height: var(--alto-header); }
.aam-header__logo { display: block; flex: none; }
.aam-header__logo img { height: 36px; width: auto; }
.aam-nav { flex: 1; display: flex; justify-content: center; }
.aam-nav__lista { list-style: none; display: flex; align-items: center; gap: var(--esp-1); padding: 0; }
.aam-nav__item { position: relative; }
.aam-nav__link {
    display: inline-flex; align-items: center; gap: var(--esp-1);
    font: 500 15px/20px var(--font-sans); color: var(--texto); text-decoration: none;
    padding: var(--esp-2) var(--esp-3); border-radius: var(--radio-control);
    background: none; border: 0; cursor: pointer;
}
.aam-nav__link:hover, .aam-nav__link[aria-expanded="true"] { background: var(--marca-azul-tinte); color: var(--marca-azul); }
.aam-nav__link[aria-current="page"] { color: var(--marca-azul); box-shadow: inset 0 -2px 0 var(--marca-azul); border-radius: 0; }
.aam-nav__link .aam-icono { transition: transform .15s; }
.aam-nav__link[aria-expanded="true"] .aam-icono { transform: rotate(180deg); }
.aam-submenu {
    list-style: none; padding: var(--esp-2); margin: 0;
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px;
    background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio-tarjeta);
    box-shadow: var(--sombra-tarjeta); display: none;
}
.aam-submenu.abierto { display: block; }
.aam-submenu a {
    display: block; padding: var(--esp-2) var(--esp-3); border-radius: var(--radio-control);
    color: var(--texto); text-decoration: none; font-size: 15px;
}
.aam-submenu a:hover { background: var(--marca-azul-tinte); color: var(--marca-azul); }
.aam-submenu small { display: block; color: var(--texto-suave); font-size: 13px; line-height: 18px; }
.aam-header__acciones { display: flex; align-items: center; gap: var(--esp-4); flex: none; }
.aam-header__asociate { font: 600 15px/20px var(--font-sans); color: var(--marca-azul); text-decoration: none; }
.aam-header__asociate:hover { text-decoration: underline; }
.aam-header__menu-btn {
    display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
    background: none; border: 1px solid var(--linea); border-radius: var(--radio-control); color: var(--texto); cursor: pointer;
}
.aam-header__menu-btn .aam-icono--cerrar { display: none; }
.aam-header__menu-btn[aria-expanded="true"] .aam-icono--abrir { display: none; }
.aam-header__menu-btn[aria-expanded="true"] .aam-icono--cerrar { display: block; }
.aam-nav__solo-movil { display: none; }

@media (max-width: 1080px) {
    .aam-header__menu-btn { display: inline-flex; }
    .aam-header__acciones .aam-header__asociate, .aam-header__acciones .aam-btn { display: none; }
    .aam-header__barra { justify-content: space-between; }
    .aam-nav {
        display: none; position: fixed; inset: var(--alto-header) 0 0 0; z-index: 899;
        background: var(--superficie); overflow-y: auto; padding: var(--esp-4) var(--esp-4) var(--esp-12);
        justify-content: flex-start;
    }
    .aam-nav.abierto { display: block; }
    .aam-nav__lista { flex-direction: column; align-items: stretch; gap: 0; }
    .aam-nav__item { border-bottom: 1px solid var(--linea); }
    .aam-nav__link { width: 100%; justify-content: space-between; padding: var(--esp-4) var(--esp-2); font-size: 17px; border-radius: 0; }
    .aam-nav__link[aria-current="page"] { box-shadow: none; }
    .aam-submenu { position: static; box-shadow: none; border: 0; padding: 0 0 var(--esp-3) var(--esp-2); min-width: 0; }
    .aam-nav__solo-movil { display: flex; flex-direction: column; gap: var(--esp-3); padding-top: var(--esp-6); }
    body.menu-abierto { overflow: hidden; }
    body.menu-abierto .floating-wpp { display: none; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.aam-footer { padding: var(--esp-16) 0 var(--esp-8); }
.aam-footer__grilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--esp-8); }
.aam-footer__logo img { height: 40px; width: auto; }
.aam-footer__texto { color: var(--texto-suave); font-size: 14px; line-height: 20px; margin-top: var(--esp-4); max-width: 34ch; }
.aam-footer__titulo { font: 600 13px/16px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--acento); margin-bottom: var(--esp-4); }
.aam-footer__lista { list-style: none; padding: 0; display: grid; gap: var(--esp-2); }
.aam-footer__lista a { color: var(--texto); text-decoration: none; font-size: 15px; }
.aam-footer__lista a:hover { color: var(--enlace); text-decoration: underline; }
.aam-redes { display: flex; gap: var(--esp-2); margin-top: var(--esp-6); }
.aam-redes a {
    width: 40px; height: 40px; display: grid; place-items: center; color: var(--texto);
    border: 1px solid var(--linea); border-radius: var(--radio-control);
}
.aam-redes a:hover { border-color: var(--primario); color: var(--primario); }
.aam-footer__base {
    margin-top: var(--esp-12); padding-top: var(--esp-6); border-top: 1px solid var(--linea);
    display: flex; flex-wrap: wrap; gap: var(--esp-4); justify-content: space-between;
    font-size: 13px; line-height: 18px; color: var(--texto-suave);
}
.aam-footer__base a { color: var(--texto-suave); }
@media (max-width: 900px) { .aam-footer__grilla { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .aam-footer__grilla { grid-template-columns: 1fr; } }

/* Botón de WhatsApp: que no tape el contenido del pie en móvil */
@media (max-width: 640px) { .floating-wpp { transform: scale(.85); transform-origin: bottom right; } }

/* =========================================================
   FORMULARIOS
   ========================================================= */
.aam-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--esp-4) var(--esp-4); }
.aam-form__completo { grid-column: 1 / -1; }
.aam-campo { display: flex; flex-direction: column; gap: var(--esp-1); }
.aam-campo label, .aam-campo legend { font: 600 14px/20px var(--font-sans); color: var(--texto); padding: 0; }
.aam-campo .aam-opcional { font-weight: 400; color: var(--texto-suave); }
.aam-input {
    width: 100%; min-height: 44px; padding: 10px var(--esp-3);
    font: 400 16px/24px var(--font-sans); color: var(--texto);
    background: var(--superficie); border: 1px solid var(--borde-control); border-radius: var(--radio-control);
}
[data-theme="dark"] .aam-input { background: var(--fondo); }
textarea.aam-input { min-height: 112px; resize: vertical; }
.aam-input:focus { outline: 3px solid var(--primario); outline-offset: 0; border-color: var(--primario); }
.aam-input::placeholder { color: var(--texto-suave); opacity: .8; }
fieldset.aam-campo { border: 0; margin: 0; padding: 0; min-width: 0; }
.aam-opciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-top: var(--esp-1); }
.aam-opcion { position: relative; }
.aam-opcion input { position: absolute; opacity: 0; inset: 0; }
.aam-opcion span {
    display: inline-flex; align-items: center; min-height: 40px; padding: var(--esp-2) var(--esp-4);
    border: 1px solid var(--borde-control); border-radius: var(--radio-pildora);
    font: 500 14px/20px var(--font-sans); color: var(--texto); cursor: pointer;
}
.aam-opcion input:checked + span { background: var(--primario); color: var(--sobre-primario); border-color: var(--primario); }
.aam-opcion input:focus-visible + span { outline: 3px solid var(--primario); outline-offset: 2px; }
.aam-form__nota { font-size: 13px; line-height: 18px; color: var(--texto-suave); }
.aam-trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .aam-form { grid-template-columns: 1fr; } }