/* ==========================================================================
   Acción Republicana — MARCO COMÚN
   Lo que comparten los dos layouts públicos: tipografía, paleta (:root),
   contenedor .p-wrap, botones .p-btn y el encabezado (barra superior +
   cabecera pegajosa) de views/partials/encabezado.php.
   layouts/portada.php la carga antes que portada.css; layouts/public.php,
   después de app.css. Las reglas salieron tal cual de portada.css.
   ========================================================================== */

/* --- Tipografía autoalojada (ya presente en /assets/fonts) ---------------- */
@font-face { font-family:'Barlow Condensed'; src:url('/assets/fonts/barlow-condensed-600-latin.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Barlow Condensed'; src:url('/assets/fonts/barlow-condensed-700-latin.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Manrope'; src:url('/assets/fonts/manrope-400-latin.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Manrope'; src:url('/assets/fonts/manrope-700-latin.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

:root {
    /* Paleta institucional (brandbook AR) + neutros de apoyo */
    --p-void:      #08111F;
    --p-navy:      #0F2547;
    --p-navy-2:    #12305E;
    --p-azul:      #204C97;
    --p-azul-hot:  #2E5FB7;
    --p-azul-soft: #EDF2FB;
    --p-rojo:      #D14B45;
    --p-rojo-hot:  #C8102E;
    --p-oro:       #C9A961;
    --p-oro-soft:  #F6EFDF;

    --p-white:     #FFFFFF;
    --p-paper:     #F5F7FB;
    --p-paper-2:   #EDF1F7;
    --p-line:      #E3E9F3;
    --p-line-2:    #D3DCEA;
    --p-ink:       #0F1B2E;
    --p-ink-2:     #56637A;
    --p-ink-3:     #8C99AD;

    --p-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
    --p-sans:    'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

    --p-r-sm: 8px;
    --p-r:    14px;
    --p-r-lg: 20px;

    --p-sh-sm: 0 2px 10px rgba(15,37,71,.06);
    --p-sh:    0 12px 34px rgba(15,37,71,.10);
    --p-sh-lg: 0 28px 70px rgba(15,37,71,.18);

    --p-ease: cubic-bezier(.22,.61,.36,1);
    --p-t:    .32s var(--p-ease);
    --p-head: 76px;
}

.p-wrap { width: min(1240px, 100% - 2.6rem); margin-inline: auto; }

/* --- Botones ------------------------------------------------------------- */
.p-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .82rem 1.5rem; border: 1px solid transparent; border-radius: var(--p-r-sm);
    font-family: var(--p-sans); font-weight: 700; font-size: .88rem; letter-spacing: .015em;
    cursor: pointer; white-space: nowrap; transition: background var(--p-t), color var(--p-t), border-color var(--p-t), transform var(--p-t), box-shadow var(--p-t);
}
.p-btn svg { width: 17px; height: 17px; flex: none; }
.p-btn:hover { transform: translateY(-2px); }
.p-btn--primary { background: var(--p-azul); color: #fff; box-shadow: 0 10px 24px rgba(32,76,151,.28); }
.p-btn--primary:hover { background: var(--p-azul-hot); box-shadow: 0 14px 30px rgba(32,76,151,.36); }
.p-btn--red { background: var(--p-rojo); color: #fff; box-shadow: 0 10px 24px rgba(209,75,69,.3); }
.p-btn--red:hover { background: var(--p-rojo-hot); }
.p-btn--gold { background: var(--p-oro); color: #2B2110; box-shadow: 0 10px 24px rgba(201,169,97,.34); }
.p-btn--gold:hover { filter: brightness(1.06); }
.p-btn--dark { background: var(--p-navy); color: #fff; }
.p-btn--dark:hover { background: var(--p-navy-2); }
.p-btn--line { border-color: var(--p-line-2); color: var(--p-navy); background: #fff; }
.p-btn--line:hover { border-color: var(--p-azul); color: var(--p-azul); background: var(--p-azul-soft); }
.p-btn--ghost { border-color: rgba(255,255,255,.34); color: #fff; background: rgba(255,255,255,.05); backdrop-filter: blur(6px); }
.p-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.14); }
.p-btn--white { background: #fff; color: var(--p-navy); }
.p-btn--white:hover { background: var(--p-azul-soft); }
.p-btn--lg { padding: 1rem 1.85rem; font-size: .95rem; }
.p-btn--sm { padding: .58rem 1rem; font-size: .8rem; }
.p-btn--block { width: 100%; }

/* ==========================================================================
   1. Barra superior + Encabezado
   ========================================================================== */
.p-top {
    background: var(--p-navy); color: rgba(255,255,255,.72);
    font-size: .76rem; letter-spacing: .02em;
}
.p-top__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 38px; }
.p-top__msg { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.p-top__msg svg { width: 15px; height: 15px; color: var(--p-oro); flex: none; }
.p-top__msg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-top__msg a { color: #fff; font-weight: 700; border-bottom: 1px solid rgba(201,169,97,.6); }
.p-top__msg a:hover { color: var(--p-oro); }
.p-top__right { display: flex; align-items: center; gap: 1.1rem; flex: none; }
.p-top__soc { display: flex; gap: .55rem; }
.p-top__soc a { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: rgba(255,255,255,.66); transition: var(--p-t); }
.p-top__soc a:hover { background: rgba(255,255,255,.12); color: #fff; }
.p-top__soc svg { width: 14px; height: 14px; }
.p-top__link { color: rgba(255,255,255,.8); font-weight: 700; }
.p-top__link:hover { color: var(--p-oro); }
@media (max-width: 900px) { .p-top__msg { display: none; } .p-top__in { justify-content: flex-end; } }

.p-head {
    position: sticky; top: 0; z-index: 60; background: #fff;
    border-bottom: 1px solid var(--p-line);
    transition: box-shadow var(--p-t), height var(--p-t);
}
.p-head.is-stuck { box-shadow: 0 10px 30px rgba(15,37,71,.10); }
.p-head__in { position: relative; }
.p-head__in { display: flex; align-items: center; gap: 1.4rem; height: var(--p-head); transition: height var(--p-t); }
.p-head.is-stuck .p-head__in { height: 64px; }

.p-brand { display: block; flex: none; }
.p-brand__logo {
    display: block; width: 210px; aspect-ratio: 842 / 183; background-color: var(--p-navy);
    -webkit-mask: url('/assets/img/logo-brand.png') left center / contain no-repeat;
            mask: url('/assets/img/logo-brand.png') left center / contain no-repeat;
    transition: width var(--p-t);
}
.p-head.is-stuck .p-brand__logo { width: 170px; }

.p-nav { display: flex; align-items: center; gap: .2rem; margin-left: auto; }
.p-nav a {
    position: relative; padding: .55rem .75rem; white-space: nowrap; border-radius: var(--p-r-sm);
    font-weight: 700; font-size: .88rem; color: var(--p-navy); transition: var(--p-t);
}
.p-nav a::after {
    content: ''; position: absolute; left: .75rem; right: .75rem; bottom: .18rem; height: 2px;
    background: var(--p-rojo); transform: scaleX(0); transform-origin: left; transition: transform var(--p-t);
}
.p-nav a:hover { color: var(--p-azul); }
.p-nav a:hover::after, .p-nav a.is-on::after { transform: scaleX(1); }
.p-nav a.is-on { color: var(--p-azul); }

.p-head__cta { display: flex; align-items: center; gap: .5rem; flex: none; }

.p-burger { display: none; flex: none; width: 44px; height: 44px; border: 1px solid var(--p-line-2); border-radius: var(--p-r-sm); background: #fff; cursor: pointer; position: relative; margin-left: auto; }
.p-burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--p-navy); transition: var(--p-t); }
.p-burger span:nth-child(1) { top: 15px; } .p-burger span:nth-child(2) { top: 21px; } .p-burger span:nth-child(3) { top: 27px; }
body.p-open .p-burger span:nth-child(1) { top: 21px; rotate: 45deg; }
body.p-open .p-burger span:nth-child(2) { opacity: 0; }
body.p-open .p-burger span:nth-child(3) { top: 21px; rotate: -45deg; }

/* Con Academia el menú tiene siete entradas y en una sola fila no cabe bajo
   ~1045 px: desde 1080 hacia abajo pasa al botón de tres rayas. */
@media (max-width: 1080px) {
    .p-burger { display: block; }
    .p-head__panel {
        position: absolute; top: 100%; left: 0; right: 0; background: #fff;
        border-bottom: 1px solid var(--p-line); box-shadow: var(--p-sh);
        display: grid; gap: .4rem; padding: 1.2rem 1.3rem 1.6rem;
        transform: translateY(-14px); opacity: 0; pointer-events: none; transition: var(--p-t);
    }
    body.p-open .p-head__panel { transform: none; opacity: 1; pointer-events: auto; }
    .p-nav { flex-direction: column; align-items: stretch; margin: 0; }
    .p-nav a { padding: .8rem .4rem; border-bottom: 1px solid var(--p-line); border-radius: 0; font-size: 1rem; }
    .p-nav a::after { display: none; }
    .p-head__cta { margin-top: .8rem; }
    body.p-open { overflow: hidden; }
    .p-head__cta .p-btn { flex: 1; }
}
@media (min-width: 1081px) { .p-head__panel { display: contents; } }
@media (min-width: 1081px) and (max-width: 1240px) { .p-nav a { padding: .55rem .5rem; } .p-nav a::after { left: .5rem; right: .5rem; } }

/* --- Encabezado dentro de las páginas con app.css ------------------------
   En la portada estas propiedades las hereda de body.p-body; en las páginas de
   layouts/public.php el body lleva la letra y el interlineado de app.css, así
   que el encabezado se las fija a sí mismo para verse igual en todas. */
.p-top, .p-head {
    font-family: var(--p-sans); line-height: 1.65;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html { scroll-padding-top: calc(64px + 20px); }

/* El encabezado antiguo (.site-header) iba fijo encima de la página, y las
   vistas de app.css le dejaban sitio arriba con var(--header-h). El nuevo va
   en el flujo —la barra superior se va con el scroll y la cabecera se pega—,
   así que ya no hay nada que esquivar: --header-h vale 0 y los rellenos
   quedan en su aire propio. Lo que se pega bajo la cabecera usa --head-stick,
   la altura que tiene ya encogida (.p-head.is-stuck). */
:root { --header-h: 0px; --head-stick: 64px; }

/* Celular: el logo del encabezado va centrado; el botón de menú sigue a la
   derecha. El logo se saca del flujo y se centra sobre la barra. */
@media (max-width: 760px) {
    .p-brand { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
    .p-brand__logo { -webkit-mask-position: center; mask-position: center; }
}