/* =========================================================================
   silvanaramos.pe — Web pública
   Color principal de campaña: #0198c2 (celeste de Renovación Popular).
   El resto de la paleta se conserva del sitio anterior:
     celeste principal   #0198c2
     celeste oscuro      #017a9c   (hover, contrastes)
     celeste claro       #52c7e3
     dorado              #eabe12   (acentos, numeración)
     dorado suave        #e0b252
     rojo                #e01020   (alertas / "vieja política")
     texto               #242424 · gris #767676
   Tipografías: Roboto (títulos) + Inter (cuerpo), igual que el sitio actual.
   ========================================================================= */

:root {
    /* Celeste de campaña: botones, enlaces y acentos */
    --azul: #0198c2;
    --azul-osc: #017a9c;
    --azul-claro: #52c7e3;

    /* Azul marino del logotipo: cabeceras, fondos oscuros y pie */
    --marino: #1a3f66;
    --marino-osc: #102b48;
    --marino-claro: #2a5f96;

    /* Dorado del logotipo */
    --oro: #f0b020;
    --oro-suave: #f8d038;
    --oro-osc: #c98f0d;

    --rojo: #b80d19;
    --tinta: #242424;
    --gris: #5d5d5d;
    --gris-claro: #f2f8fa;
    --celeste-suave: #e4f4fa;      /* fondo de alternancia con presencia de celeste */
    --celeste-fondo: #017a9c;      /* fondo de sección: blanco encima da 4.9:1 */
    --celeste-fondo-osc: #01607d;  /* cierre del degradado: 7.2:1 */
    --borde: #e0eaee;

    /* Radios generosos, a tono con el logotipo redondeado */
    --radio: 26px;
    --radio-chico: 18px;
    --radio-pildora: 999px;

    --sombra: 0 10px 30px rgba(26, 63, 102, .13);
    --sombra-fuerte: 0 18px 46px rgba(26, 63, 102, .20);
    --ancho: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: Inter, Arial, Helvetica, sans-serif;
    color: var(--tinta);
    background: #fff;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    /* Ninguna sección puede empujar la página a lo ancho en móvil */
    overflow-x: hidden;
}
body.menu-abierto { overflow: hidden; }

/* =========================================================================
   ANIMACIONES
   Solo se ocultan los elementos si el JS está activo (clase `js` en <html>,
   puesta antes de pintar). Sin JS todo se ve, nada queda invisible.
   ========================================================================= */
.js [data-anim] {
    opacity: 0;
    will-change: opacity, transform;
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
                transform .7s cubic-bezier(.22, .61, .36, 1);
}
.js [data-anim="subir"]     { transform: translateY(34px); }
.js [data-anim="izquierda"] { transform: translateX(-40px); }
.js [data-anim="derecha"]   { transform: translateX(40px); }
.js [data-anim="zoom"]      { transform: scale(.94); }

.js [data-anim].visible {
    opacity: 1;
    transform: none;
}

/* Quien pidió menos movimiento en su sistema ve la página quieta */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js [data-anim] { opacity: 1 !important; transform: none !important; transition: none !important; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@keyframes flotar {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
@keyframes pulsoSuave {
    0%, 100% { transform: scale(1); opacity: .55; }
    50%      { transform: scale(1.06); opacity: .8; }
}
@keyframes entradaHero {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}

h1, h2, h3, h4, .display { font-family: Roboto, Arial, sans-serif; font-weight: 700; line-height: 1.15; margin: 0 0 .5em; }
a { color: var(--celeste-fondo); text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 22px; }
.seccion { padding: 84px 0; }
.seccion-gris { background: var(--celeste-suave); }
/* Bloques protagonistas: celeste pleno y letra blanca */
.seccion-azul {
    background: linear-gradient(140deg, var(--celeste-fondo) 0%, var(--celeste-fondo-osc) 100%);
    color: #fff;
}
.seccion-azul h2, .seccion-azul h3, .seccion-azul h4 { color: #fff; }

.antetitulo {
    display: inline-block;
    font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--celeste-fondo-osc); margin-bottom: 12px;
}
.seccion-azul .antetitulo { color: #fff; }
.titulo-seccion { font-size: clamp(26px, 3.4vw, 36px); color: var(--tinta); }
.seccion-azul .titulo-seccion { color: #fff; }
.bajada { color: var(--gris); max-width: 60ch; }
.seccion-azul .bajada { color: #fff; }

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 32px; border: 0; cursor: pointer;
    border-radius: var(--radio-pildora);
    font-family: Roboto, sans-serif; font-weight: 700; font-size: 14px;
    letter-spacing: .06em; text-transform: uppercase;
    position: relative; overflow: hidden;
    transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s ease, background .22s ease;
}
/* Destello que cruza el botón al pasar el cursor */
.btn::after {
    content: ""; position: absolute; top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
    transition: left .55s ease;
}
.btn:hover::after { left: 130%; }
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; }
.btn-azul { background: var(--celeste-fondo); color: #fff; box-shadow: 0 8px 20px rgba(1, 122, 156, .32); }
.btn-azul:hover { background: var(--celeste-fondo-osc); }
.btn-oro { background: var(--oro); color: var(--tinta); box-shadow: 0 8px 20px rgba(240, 176, 32, .38); }
.btn-oro:hover { background: var(--oro-suave); color: var(--marino-osc); }
.btn-linea { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .6); }
.btn-linea:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }

/* ---------- Barra superior ---------- */
.barra-tel {
    background: var(--celeste-fondo); color: #fff; font-size: 13.5px;
    padding: 9px 0;
}
.barra-tel .contenedor { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.barra-tel a { color: #fff; font-weight: 600; }
.barra-tel .lema { color: rgba(255, 255, 255, .92); }

/* ---------- Cabecera ---------- */
.cabecera {
    position: sticky; top: 0; z-index: 60;
    background: #fff; border-bottom: 1px solid var(--borde);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
    transition: box-shadow .3s ease, background .3s ease;
}
.cabecera.compacta {
    box-shadow: 0 6px 26px rgba(1, 122, 156, .14);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(8px);
}
.cabecera .contenedor {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; min-height: 86px;
    transition: min-height .3s ease;
}
.cabecera.compacta .contenedor { min-height: 68px; }
.marca img { height: 52px; width: auto; transition: height .3s ease, transform .3s ease; }
.cabecera.compacta .marca img { height: 40px; }
.marca:hover img { transform: scale(1.04); }
.menu { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.menu a {
    font-family: Roboto, sans-serif; font-weight: 600; font-size: 14.5px;
    color: var(--tinta); padding: 6px 0; position: relative;
}
.menu a::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
    background: var(--oro); transition: width .22s ease;
}
.menu a:hover::after, .menu a[aria-current="page"]::after { width: 100%; }
.menu a[aria-current="page"] { color: var(--celeste-fondo); }

.btn-menu { display: none; background: none; border: 0; font-size: 24px; color: var(--azul); cursor: pointer; padding: 6px 10px; }

/* ---------- Hero ---------- */
.hero {
    position: relative; overflow: hidden;
    background: var(--gris-claro) url("../img/hero-bg.jpg") center/cover no-repeat;
}
.hero::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .90) 45%, rgba(255, 255, 255, .40) 100%);
}
/* Halo celeste que late detrás del retrato */
.hero::after {
    content: ""; position: absolute; z-index: 0;
    right: 6%; bottom: 0;
    width: min(46vw, 520px); aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(1, 152, 194, .28) 0%, rgba(1, 152, 194, 0) 68%);
    animation: pulsoSuave 7s ease-in-out infinite;
    pointer-events: none;
}
.hero .contenedor { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 30px; min-height: 620px; }
.hero-texto { padding: 60px 0; }
.hero h1 { font-size: clamp(34px, 6vw, 76px); color: var(--azul); letter-spacing: -.02em; }
.hero h1 .apellido { display: block; font-weight: 400; color: var(--azul); }
.hero .lema-hero { font-size: clamp(16px, 2vw, 21px); font-weight: 600; color: var(--tinta); margin-bottom: 18px; }
.hero p { color: var(--gris); font-size: 16.5px; max-width: 52ch; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-foto { align-self: end; }
/* Nada de combinar max-width con max-height aquí: el navegador los aplica por
   separado sobre una imagen con width/height declarados y la deforma. Fijando
   solo el ancho y dejando height:auto, la proporción se respeta siempre. */
.hero-foto img {
    width: 100%; max-width: 465px; height: auto;
    margin-left: auto;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .22));
    animation: flotar 6s ease-in-out infinite;
}

/* Entrada escalonada del hero al cargar la página */
.js .hero-texto > * { animation: entradaHero .8s cubic-bezier(.22,.61,.36,1) backwards; }
.js .hero-texto > *:nth-child(1) { animation-delay: .05s; }
.js .hero-texto > *:nth-child(2) { animation-delay: .15s; }
.js .hero-texto > *:nth-child(3) { animation-delay: .25s; }
.js .hero-texto > *:nth-child(4) { animation-delay: .35s; }
.js .hero-texto > *:nth-child(5) { animation-delay: .45s; }
.js .hero-foto { animation: entradaHero 1s cubic-bezier(.22,.61,.36,1) .3s backwards; }

/* ---------- Propuestas numeradas ---------- */
.grilla-propuestas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 48px; }
.propuesta {
    background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 34px 26px 30px; position: relative; overflow: hidden;
    transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, border-color .28s ease;
}
/* Barra celeste que se despliega al pasar el cursor */
.propuesta::before {
    content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 0;
    background: linear-gradient(90deg, var(--azul), var(--oro));
    transition: width .38s cubic-bezier(.22,.61,.36,1);
}
.propuesta:hover { transform: translateY(-8px); box-shadow: var(--sombra); border-color: transparent; }
.propuesta:hover::before { width: 100%; }
.propuesta .numero {
    font-family: Roboto, sans-serif; font-size: 40px; font-weight: 700;
    color: var(--oro); line-height: 1; margin-bottom: 14px; display: block;
    transition: transform .28s ease, color .28s ease;
}
.propuesta:hover .numero { transform: scale(1.12); color: var(--azul); }
.propuesta h3 { font-size: 19px; }
.propuesta p { color: var(--gris); font-size: 15px; margin: 0; }

/* ---------- Bloques con imagen ---------- */
.bloque-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.bloque-2.invertido .col-texto { order: 2; }
.bloque-2 .col-foto img {
    border-radius: var(--radio);
    transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease;
}
.bloque-2 .col-foto:hover img { transform: scale(1.02); box-shadow: var(--sombra); }

/* ---------- Comparativa vieja política / gestión ---------- */
.comparativa { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 34px; }
.panel { border-radius: var(--radio); padding: 26px 28px; }
.panel h4 { font-size: 16px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li { position: relative; padding-left: 30px; margin-bottom: 11px; font-size: 15px; }
.panel li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.panel-malo { background: #fdf1f2; border: 1px solid #f7d4d7; }
.panel-malo h4 { color: var(--rojo); }
.panel-malo li::before { content: "\00d7"; color: var(--rojo); font-size: 19px; line-height: 1.4; }
.panel-bueno { background: #e8f7fb; border: 1px solid #bfe6f1; }
.panel-bueno h4 { color: var(--celeste-fondo-osc); }
.panel-bueno li::before { content: "\2713"; color: var(--azul); }

/* ---------- Ejes de trabajo ---------- */
.grilla-ejes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 46px; }
.eje { text-align: center; padding: 0 10px; }
.eje img {
    width: 74px; height: 74px; margin: 0 auto 20px;
    transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.eje:hover img { transform: translateY(-8px) scale(1.08); }
.eje h3 { font-size: 18px; }
.eje p { color: var(--gris); font-size: 15px; margin: 0; }

/* ---------- Software gratuito ---------- */
.grilla-software { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 44px; }
.software {
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radio); padding: 24px; text-align: center;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease, border-color .3s ease;
}
.software:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .38);
}
.software img {
    border-radius: 10px; margin-bottom: 18px;
    transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.software:hover img { transform: scale(1.06); }
.software h3 { font-size: 17px; margin-bottom: 6px; }
.software p { font-size: 14px; color: #fff; margin: 0; }

/* ---------- Franja de contacto rápido ---------- */
.franja-tel { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; text-align: center; }
.franja-tel img { width: 58px; }
.franja-tel .tel-num { font-family: Roboto, sans-serif; font-size: 30px; font-weight: 700; color: var(--celeste-fondo); }

/* ---------- Lista de canales / CTA final ---------- */
.lista-check { list-style: none; margin: 26px 0 0; padding: 0; }
.lista-check li { position: relative; padding-left: 36px; margin-bottom: 14px; font-size: 16px; font-weight: 500; }
.lista-check li::before {
    content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px;
    background: url("../img/check.svg") center/contain no-repeat;
}

/* ---------- Formulario ---------- */
.formulario { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: 34px; box-shadow: var(--sombra); }
.campo { margin-bottom: 18px; }
.campo label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
.campo input, .campo textarea, .campo select {
    width: 100%; padding: 13px 15px; font: inherit; font-size: 15px;
    border: 1px solid #d8d8d8; border-radius: var(--radio-chico); background: #fff; color: var(--tinta);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.campo input:focus, .campo textarea:focus, .campo select:focus {
    outline: 0; border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(82, 199, 227, .28);
}
.campo-consentimiento { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; color: var(--gris); margin-bottom: 22px; }
.campo-consentimiento input { width: 17px; height: 17px; margin-top: 3px; flex: 0 0 auto; }

/* Trampa anti-spam: fuera de la vista y del foco, pero sin sacar nada del
   lienzo (un left:-9999px puede provocar scroll lateral en algunos motores). */
.trampa {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.aviso { padding: 14px 20px; border-radius: var(--radio-chico); margin-bottom: 22px; font-size: 14.5px; font-weight: 500; }
.aviso-ok { background: #eaf6ee; border: 1px solid #bfe3cb; color: #1c6b37; }
.aviso-error { background: #fdf1f2; border: 1px solid #f7d4d7; color: #a3121d; }

/* ---------- Pie ---------- */
.pie { background: var(--celeste-fondo-osc); color: rgba(255, 255, 255, .85); padding: 34px 0; font-size: 14.5px; }
.pie-grilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.pie h4 { color: #fff; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 16px; }
.pie a { color: rgba(255, 255, 255, .7); }
.pie a:hover { color: var(--oro); }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 9px; }
.pie .logo-pie { display: inline-block; margin-bottom: 16px; }
/* `width: auto` es imprescindible: la etiqueta lleva width="700" y, si el CSS
   solo fija la altura, el navegador toma ese ancho del atributo y deforma el
   logotipo. Aquí sí es seguro porque la imagen no es diferida y sus dos
   dimensiones están declaradas, así que la proporción se calcula bien. */
.pie .logo-pie img { height: 56px; width: auto; }
.pie-legal {
    margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14);
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px;
}

/* ---------- Cifras del diagnóstico distrital ---------- */
.grilla-datos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
.dato {
    background: var(--gris-claro); border: 1px solid var(--borde);
    border-radius: var(--radio); padding: 26px 22px; text-align: center;
    transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, border-color .28s ease;
}
.dato:hover { transform: translateY(-6px); box-shadow: var(--sombra); border-color: var(--azul-claro); }
.dato .cifra {
    display: block; font-family: Roboto, sans-serif; font-weight: 700;
    font-size: clamp(28px, 3.2vw, 38px); color: var(--celeste-fondo); line-height: 1.1;
}
.dato .rotulo { display: block; font-size: 13.5px; color: var(--gris); margin-top: 8px; }
.nota-fuente { font-size: 13.5px; color: var(--gris); margin-top: 18px; font-style: italic; }

/* ---------- Ejes del plan de gobierno ---------- */
.ejes-plan { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 44px; }
.eje-plan {
    background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 30px 28px; transition: transform .2s ease, box-shadow .2s ease;
}
.eje-plan:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.eje-plan header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.eje-plan .eje-num {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
    background: var(--celeste-fondo); color: #fff;
    font-family: Roboto, sans-serif; font-weight: 700; font-size: 17px;
    display: flex; align-items: center; justify-content: center;
}
.eje-plan h3 { font-size: 20px; margin: 0; }
.eje-plan p { color: var(--gris); font-size: 15px; margin: 0; }
.eje-plan .lista-check { margin-top: 18px; }
.eje-plan .lista-check li { font-size: 14.5px; font-weight: 400; margin-bottom: 10px; }

/* ---------- Cabecera interna de páginas ---------- */
.cabecera-pagina {
    background: linear-gradient(140deg, var(--celeste-fondo) 0%, var(--celeste-fondo-osc) 100%);
    color: #fff; padding: 62px 0;
    border-radius: 0 0 var(--radio) var(--radio);
}
.cabecera-pagina h1 { color: #fff; font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 8px; }
.cabecera-pagina .miga { font-size: 14px; color: rgba(255, 255, 255, .72); }
.cabecera-pagina .miga a { color: rgba(255, 255, 255, .9); }

/* =========================================================================
   RESPONSIVE
   Puntos de corte pensados por contenido, no por dispositivo:
     1200  el contenedor empieza a respirar con menos margen
     1080  las grillas de 4 columnas pasan a 2 (los textos ya se apretaban)
      980  cae el menú de escritorio y desaparecen las dos columnas
      760  tablet en vertical: todo a una columna
      560  móvil: una sola columna en todo y tipografías más contenidas
      380  móviles pequeños
   ========================================================================= */

@media (max-width: 1200px) {
    .contenedor { padding: 0 26px; }
    .bloque-2 { gap: 44px; }
}

@media (max-width: 1080px) {
    .grilla-propuestas, .grilla-software { grid-template-columns: repeat(2, 1fr); }
    .menu { gap: 20px; }
    .menu a { font-size: 13.5px; }
    .hero .contenedor { min-height: 540px; }
}

@media (max-width: 980px) {
    .seccion { padding: 60px 0; }

    /* --- Cabecera y menú --- */
    .btn-menu { display: block; }
    .cabecera .contenedor { position: relative; }
    .menu {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; border-bottom: 1px solid var(--borde);
        padding: 8px 26px 18px; display: none;
        box-shadow: 0 14px 28px rgba(0, 0, 0, .10);
        max-height: calc(100vh - 86px); overflow-y: auto;
    }
    .menu.abierto { display: flex; animation: entradaHero .28s ease; }
    .menu li { width: 100%; }
    .menu a { display: block; padding: 14px 2px; border-bottom: 1px solid #f0f0f0; width: 100%; font-size: 15px; }
    .menu li:last-child a { border-bottom: 0; }
    .menu a::after { display: none; }
    .menu a[aria-current="page"] { color: var(--azul); font-weight: 700; }

    /* --- Hero --- */
    /* El retrato de la candidata es el activo principal de la página:
       en móvil se muestra igual, debajo del texto y a un tamaño contenido. */
    .hero .contenedor { grid-template-columns: 1fr; min-height: 0; text-align: left; }
    .hero-texto { padding: 40px 0 8px; }
    .hero-foto { align-self: center; }
    .hero-foto img {
        width: 100%; height: auto;
        max-width: 320px; max-height: none;
        margin: 0 auto;
    }
    .hero::after { right: 50%; transform: translateX(50%); width: min(74vw, 340px); }

    /* --- Grillas --- */
    .grilla-datos { grid-template-columns: repeat(2, 1fr); }
    .ejes-plan { grid-template-columns: 1fr; }
    .grilla-ejes { grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .bloque-2 { grid-template-columns: 1fr; gap: 36px; }
    .bloque-2.invertido .col-texto { order: 0; }
    .comparativa { grid-template-columns: 1fr; }
    .pie-grilla { grid-template-columns: 1fr 1fr; gap: 30px; }

    /* En una sola columna la foto se centra y se limita en alto.
       OJO: nada de `width: auto` aquí. Una imagen con loading="lazy" que aún
       no cargó no tiene dimensión propia, así que con width:auto colapsa a
       0x0; al medir cero el navegador nunca la ve "cerca del viewport" y no
       llega a cargarla nunca. Se queda invisible para siempre. */
    .bloque-2 .col-foto img {
        width: 100%; height: auto;
        max-width: 420px; margin-inline: auto;
    }
}

@media (max-width: 860px) {
    /* Tres ejes en 860px dan columnas de ~250px: el texto empieza a apretarse */
    .grilla-ejes { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 760px) {
    .seccion { padding: 48px 0; }
    .pie-grilla { grid-template-columns: 1fr; gap: 26px; }
    .franja-tel { justify-content: flex-start; text-align: left; gap: 16px; }
    .franja-tel .tel-num { font-size: 24px; }
    .cabecera-pagina { padding: 44px 0; }
}

@media (max-width: 560px) {
    .contenedor { padding: 0 18px; }
    .marca img { height: 46px; }
    .cabecera.compacta .marca img { height: 38px; }
    .seccion { padding: 42px 0; }

    .grilla-propuestas, .grilla-software, .grilla-datos { grid-template-columns: 1fr; }
    .barra-tel .lema { display: none; }
    .barra-tel .contenedor { justify-content: center; }
    .formulario { padding: 22px 18px; }

    /* iOS Safari hace zoom automático al enfocar un campo con letra menor a
       16px, y luego deja la página descuadrada. Con 16px no ocurre. */
    .campo input, .campo textarea, .campo select { font-size: 16px; padding: 14px 15px; }

    /* Botones a ancho completo: objetivo táctil cómodo */
    .hero-acciones { gap: 10px; }
    .hero-acciones .btn { width: 100%; }
    .btn { padding: 15px 22px; font-size: 13px; }

    .propuesta { padding: 26px 22px 24px; }
    .panel { padding: 22px 20px; }
    .eje-plan { padding: 24px 20px; }
    .eje-plan header { gap: 12px; }
    .eje-plan .eje-num { width: 40px; height: 40px; font-size: 15px; }

    .lista-check li { font-size: 15px; padding-left: 32px; }
    .pie { padding: 40px 0 20px; }
    .pie-legal { flex-direction: column; gap: 8px; }

    /* Las tablas o bloques anchos scrollean solos, no la página */
    .tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 380px) {
    .contenedor { padding: 0 14px; }
    .hero h1 { font-size: 32px; }
    .titulo-seccion { font-size: 23px; }
    /* El logotipo son dos líneas apiladas: por debajo de 40px "RAMOS"
       deja de leerse, así que no bajamos más de ahí. */
    .marca img { height: 42px; }
    .cabecera .contenedor { min-height: 72px; }
    .franja-tel .tel-num { font-size: 21px; }
}

/* Pantallas táctiles: los efectos de hover no aportan y pueden dejar
   elementos "pegados" en su estado activo tras un toque. */
@media (hover: none) {
    .propuesta:hover, .dato:hover, .software:hover, .eje-plan:hover { transform: none; }
    .btn:hover { transform: none; }
    .btn::after { display: none; }
    .eje:hover img { transform: none; }
    .bloque-2 .col-foto:hover img { transform: none; }
}

/* ---------- Caja de descarga del plan ---------- */
.caja-descarga {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    margin-top: 36px; padding: 26px 30px;
    background: linear-gradient(140deg, var(--celeste-fondo) 0%, var(--celeste-fondo-osc) 100%);
    border-radius: var(--radio); color: #fff;
    box-shadow: var(--sombra);
}
.caja-descarga h3 { color: #fff; font-size: 20px; margin-bottom: 4px; }
.caja-descarga p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 14.5px; }

/* ---------- Campos en pareja (formulario de personero) ---------- */
.campo-doble { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

@media (max-width: 560px) {
    .caja-descarga { padding: 22px; text-align: center; justify-content: center; }
    .caja-descarga .btn { width: 100%; }
    .campo-doble { grid-template-columns: 1fr; gap: 0; }
}

/* ---------- Franja de personeros en la portada ---------- */
.franja-personero { padding: 0; }
.personero-caja {
    display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; gap: 30px;
    padding: 46px 48px; border-radius: var(--radio);
    background: var(--gris-claro);
    border: 2px dashed var(--azul-claro);
    position: relative; overflow: hidden;
}
/* Marca de agua que respira detrás del bloque */
.personero-caja::before {
    content: ""; position: absolute; right: -60px; top: -60px;
    width: 280px; height: 280px; border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 176, 32, .22) 0%, rgba(240, 176, 32, 0) 70%);
    animation: pulsoSuave 8s ease-in-out infinite;
    pointer-events: none;
}
.personero-caja > * { position: relative; }
.personero-accion { display: flex; justify-content: flex-end; }

@media (max-width: 860px) {
    .personero-caja { grid-template-columns: 1fr; padding: 34px 26px; text-align: left; }
    .personero-accion { justify-content: flex-start; }
}
@media (max-width: 560px) {
    .personero-caja { padding: 28px 20px; }
    .personero-accion .btn { width: 100%; }
}

/* =========================================================================
   PIE SIMPLE — solo logotipo y copyright
   ========================================================================= */
.pie-simple {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
}
.pie-copy { color: rgba(255, 255, 255, .9); font-size: 14px; }

@media (max-width: 560px) {
    .pie-simple { flex-direction: column; justify-content: center; text-align: center; gap: 14px; }
}

/* =========================================================================
   TARJETAS SOBRE FONDO CELESTE
   Dentro de una sección celeste las tarjetas dejan de ser blancas: pasan a
   ser translúcidas con letra blanca, para que el celeste siga mandando y el
   texto conserve contraste suficiente.
   ========================================================================= */
.seccion-azul .propuesta,
.seccion-azul .dato,
.seccion-azul .eje-plan {
    background: rgba(0, 0, 0, .14);
    border-color: rgba(255, 255, 255, .26);
    color: #fff;
}
.seccion-azul .propuesta h3,
.seccion-azul .dato .cifra,
.seccion-azul .eje-plan h3 { color: #fff; }
.seccion-azul .propuesta p,
.seccion-azul .eje-plan p,
.seccion-azul .dato .rotulo { color: #fff; }
.seccion-azul .propuesta .numero { color: #ffd980; }
.seccion-azul .propuesta:hover { background: rgba(0, 0, 0, .22); }
.seccion-azul .propuesta:hover .numero { color: #fff; }
.seccion-azul .eje { color: #fff; }
.seccion-azul .eje h3 { color: #fff; }
.seccion-azul .eje p { color: #fff; }
.seccion-azul .eje-plan .eje-num { background: var(--oro); color: var(--marino-osc); }
.seccion-azul .lista-check li { color: #fff; }
.seccion-azul .nota-fuente { color: #e8f7fb; }
.seccion-azul a:not(.btn) { color: #fff; text-decoration: underline; }

/* Los iconos de los ejes son oscuros: sobre celeste se aclaran */
.seccion-azul .eje img { filter: brightness(0) invert(1); }

/* Los paneles de la comparativa mantienen su fondo claro (rosado y celeste
   suave) aunque estén dentro de una sección celeste. Si no forzamos el texto
   oscuro, heredan el blanco de la sección y se vuelven ilegibles. */
.seccion-azul .panel,
.seccion-azul .panel li,
.seccion-azul .panel p { color: var(--tinta); }
.seccion-azul .panel-malo h4 { color: var(--rojo); }
.seccion-azul .panel-bueno h4 { color: var(--celeste-fondo-osc); }

/* Misma razón para el formulario y la caja de avisos sobre fondo celeste */
.seccion-azul .formulario,
.seccion-azul .formulario label,
.seccion-azul .formulario p { color: var(--tinta); }
.seccion-azul .formulario h3 { color: var(--tinta); }

/* =========================================================================
   TARJETAS DE BLOG Y EVENTOS
   ========================================================================= */
.grilla-tarjetas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; }

.tarjeta {
    background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
    overflow: hidden; display: flex; flex-direction: column;
    transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease;
}
.tarjeta:hover { transform: translateY(-8px); box-shadow: var(--sombra-fuerte); }
.tarjeta-pasada { opacity: .82; }

.tarjeta-foto {
    position: relative; display: block; aspect-ratio: 16 / 10;
    background: var(--celeste-suave); overflow: hidden;
}
.tarjeta-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.tarjeta:hover .tarjeta-foto img { transform: scale(1.06); }
.tarjeta-sinfoto {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 40px; font-style: normal; color: var(--azul-claro);
}

/* Recuadro de fecha sobre la foto del evento */
.tarjeta-fecha {
    position: absolute; left: 16px; top: 16px;
    background: #fff; border-radius: var(--radio-chico);
    padding: 8px 14px; text-align: center; line-height: 1.1;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.tarjeta-fecha strong { display: block; font-family: Roboto, sans-serif; font-size: 21px; color: var(--celeste-fondo); }
.tarjeta-fecha span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gris); }

.tarjeta-cuerpo { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.tarjeta-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12.5px; color: var(--gris); }
.tarjeta-cuerpo h3 { font-size: 19px; margin-bottom: 10px; line-height: 1.25; }
.tarjeta-cuerpo h3 a { color: var(--tinta); }
.tarjeta-cuerpo h3 a:hover { color: var(--celeste-fondo); }
.tarjeta-cuerpo p { color: var(--gris); font-size: 14.5px; margin: 0 0 14px; }
.tarjeta-lugar { font-weight: 500; color: var(--tinta) !important; }
.enlace-mas { margin-top: auto; font-weight: 700; font-size: 14px; color: var(--celeste-fondo); }
.enlace-mas:hover { color: var(--celeste-fondo-osc); }

.etiqueta {
    display: inline-block; padding: 4px 12px; border-radius: var(--radio-pildora);
    background: var(--celeste-suave); color: var(--celeste-fondo-osc);
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.etiqueta-alerta { background: #fdecee; color: var(--rojo); }

/* =========================================================================
   ARTÍCULO Y FICHA DE EVENTO
   ========================================================================= */
.contenedor-lectura { max-width: 760px; }
.articulo-portada { width: 100%; border-radius: var(--radio); margin-bottom: 28px; }
.articulo-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--gris); font-size: 14px; margin-bottom: 20px; }
.articulo-entradilla { font-size: 18.5px; font-weight: 500; color: var(--tinta); line-height: 1.6; margin-bottom: 26px; }
.articulo-cuerpo p { font-size: 16.5px; line-height: 1.8; margin: 0 0 20px; }

.ficha-evento {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px;
    background: var(--celeste-suave); border-radius: var(--radio); padding: 26px 28px; margin-top: 8px;
}
.ficha-rotulo { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--celeste-fondo-osc); margin-bottom: 6px; }
.ficha-valor  { display: block; font-family: Roboto, sans-serif; font-weight: 700; font-size: 17px; color: var(--tinta); }
.ficha-extra  { display: block; font-size: 14px; color: var(--gris); margin-top: 2px; }

@media (max-width: 980px) {
    .grilla-tarjetas { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 640px) {
    .grilla-tarjetas { grid-template-columns: 1fr; }
    .ficha-evento { padding: 22px 20px; }
    .articulo-cuerpo p { font-size: 16px; }
}

/* =========================================================================
   El menú creció a 9 entradas. A 985px solo quedaban 93px de holgura antes
   de que se saliera, así que el menú desplegable entra ya en 1100px, no en
   980. El resto de la maquetación conserva sus propios puntos de corte.
   ========================================================================= */
@media (max-width: 1100px) {
    .btn-menu { display: block; }
    .cabecera .contenedor { position: relative; }
    .menu {
        position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: #fff; border-bottom: 1px solid var(--borde);
        padding: 8px 26px 18px; display: none;
        box-shadow: 0 14px 28px rgba(0, 0, 0, .10);
        max-height: calc(100vh - 86px); overflow-y: auto;
    }
    .menu.abierto { display: flex; }
    .menu li { width: 100%; }
    .menu a { display: block; padding: 14px 2px; border-bottom: 1px solid #f0f0f0; width: 100%; font-size: 15px; }
    .menu li:last-child a { border-bottom: 0; }
    .menu a::after { display: none; }
    .menu a[aria-current="page"] { color: var(--celeste-fondo); font-weight: 700; }
}

/* =========================================================================
   FORMULARIO DE PERSONEROS
   ========================================================================= */
.bloque-titulo {
    font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--celeste-fondo); margin: 30px 0 18px;
    padding-bottom: 10px; border-bottom: 1px solid var(--borde);
}
.formulario > form > .bloque-titulo:first-of-type { margin-top: 4px; }

/* Campo con el botón "Validar" pegado */
.campo-con-boton { display: flex; gap: 10px; align-items: stretch; }
.campo-con-boton input { flex: 1; min-width: 0; }
.btn-validar {
    flex: 0 0 auto; padding: 0 24px;
    background: var(--marino); color: #fff;
    border-radius: var(--radio-chico);
    font-size: 13px; letter-spacing: .04em;
}
.btn-validar:hover:not(:disabled) { background: var(--marino-osc); }
.btn-validar:disabled { opacity: .6; cursor: progress; transform: none; }

.ayuda-campo { font-size: 13px; margin: 7px 0 0; color: var(--gris); min-height: 1em; }
.ayuda-ok    { color: #1c6b37; font-weight: 600; }
.ayuda-error { color: var(--rojo); font-weight: 600; }

/* Nota informativa dentro del formulario */
.nota-destacada {
    background: var(--celeste-suave);
    border-left: 4px solid var(--celeste-fondo);
    border-radius: 0 var(--radio-chico) var(--radio-chico) 0;
    padding: 13px 18px; margin: 0 0 20px;
    font-size: 14px; color: var(--tinta);
}
.nota-destacada strong { color: var(--celeste-fondo-osc); text-transform: uppercase; font-size: 13px; }

.campo-triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }

/* Recuadro con las dos casillas */
.caja-casillas {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    background: var(--gris-claro); border: 1px solid var(--borde);
    border-radius: var(--radio-chico); padding: 16px 18px; margin-bottom: 20px;
}
.casilla { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; }
.casilla input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--celeste-fondo); }

/* Un campo deshabilitado debe verse deshabilitado */
.campo textarea:disabled, .campo input:disabled, .campo select:disabled {
    background: #f4f6f7; color: #9aa5aa; cursor: not-allowed;
}

@media (max-width: 760px) {
    .campo-triple { grid-template-columns: 1fr; gap: 0; }
    .caja-casillas { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
    .campo-con-boton { flex-direction: column; }
    .btn-validar { width: 100%; padding: 13px 24px; }
}