/* =================================================================
   «PARTE DE SITUACIÓN» (solo portada: lista de page.php en head.php)
   Réplica de material/mockup-parte-situacion.html. Las reglas sin
   .ps--armado son el ESTADO FINAL (sin JS o con movimiento reducido);
   assets/js/parte.js pone .ps--armado (estado inicial) y va añadiendo
   .is-in / .is-verde / .is-hecho con los tiempos de la maqueta.
   Negro #0D1411; verde vivo #1E9E5A solo en texto grande y detalles;
   en texto pequeño, verde oscuro #1A6B40.
   ================================================================= */

.ps {
    --ps-negro: #0D1411;
    --ps-verde: #1E9E5A;
    --ps-verde-osc: #1A6B40;
    --ps-gris: #587380;
    --ps-borde: #D9DFDD;
    position: relative;
    background: #fff;
    color: var(--ps-negro);
    overflow: hidden;
}

.ps-ancla { position: absolute; top: -80px; }

.ps__in {
    width: min(720px, calc(100% - 32px)); /* margen lateral en móvil */
    margin-inline: auto;
}

.ps-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.ps-ic {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

/* ---------- Cabecera ---------- */

.ps-eye {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 14px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ps-verde-osc);
}
.ps-radar {
    width: 15px;
    height: 15px;
}
.ps-radar__barrido {
    transform-origin: 12px 12px;
    transform: rotate(0deg);
}

.ps-h {
    margin: 0;
    font-family: var(--opogc-font-title);
    font-size: 46px;
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.03em;
    text-align: center;
}
.ps-t1 {
    display: block;
    color: var(--ps-negro);
}
.ps-t2wrap {
    display: block;
    margin: 0 0 2.5rem;
}
.ps-t2 {
    display: inline-block;
    color: var(--ps-verde);
}

/* Subrayado que se dibuja (de izquierda a derecha). */
.ps-ul {
    display: block;
    height: 5px;
    margin: 6px auto 0;
    border-radius: 4px;
    background: linear-gradient(90deg, #12693B, var(--ps-verde) 45%, #23A15E 70%, #12693B);
    transform-origin: left;
    scale: 1 1;
    transition: scale 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Efecto metálico en los titulares ----------
   Degradado de cromo recortado al texto (oscuro o verde, siempre ≥3:1 sobre
   blanco) y un brillo que cruza una vez al entrar. En reposo, el brillo
   queda fuera del texto. */
.ps-metal {
    background-image:
        linear-gradient(105deg, transparent 0 44%, rgba(255, 255, 255, 0.42) 50%, transparent 56% 100%),
        linear-gradient(180deg, #4A5853 0%, #1A2420 36%, #0D1411 50%, #2C3934 60%, #121A17 100%);
    background-size: 260% 100%, 100% 100%;
    background-position: 130% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9)) drop-shadow(0 2px 3px rgba(13, 20, 17, 0.14));
}
.ps-metal--verde,
.ps-metal .ps-v {
    background-image:
        linear-gradient(105deg, transparent 0 42%, rgba(255, 255, 255, 0.45) 50%, transparent 58% 100%),
        linear-gradient(180deg, #23A15E 0%, #1E9E5A 40%, #12693B 52%, #1A8F51 64%, #1E9E5A 100%);
    background-size: 260% 100%, 100% 100%;
    background-position: 130% 0, 0 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
@keyframes ps-brillo {
    from { background-position: -130% 0, 0 0; }
    to { background-position: 130% 0, 0 0; }
}

/* ---------- Comparativa: Hoy → Con OpoVinco ---------- */

.ps-cmp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.ps-lbl {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ps-gris);
}
.ps-lbl--verde {
    margin: 0 0 6px;
    color: var(--ps-verde-osc);
}

.ps-caos {
    position: relative;
    height: 232px;
}

.ps-nota {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #fff;
    border: 0.5px solid var(--ps-borde);
    border-radius: 10px;
    font-size: 0.875rem;
    color: #4E5E59;
    white-space: nowrap;
    /* Estado final: ya volaron a la flecha. */
    opacity: 0;
    visibility: hidden;
    /* Aparecer: rápido y con un pequeño rebote. */
    transition: opacity 0.35s, scale 0.5s cubic-bezier(0.2, 0.7, 0.3, 1.35);
}
/* Volar a la flecha: más lento, y se apaga al final del vuelo para que se siga. */
.ps-nota.is-vuela {
    transition: transform 0.9s cubic-bezier(0.6, 0, 0.4, 1), opacity 0.9s cubic-bezier(0.7, 0, 1, 1);
}
.ps-nota .ps-ic { font-size: 15px; }
.ps-nota--1 { top: 30px; left: 2px; rotate: -6deg; animation-delay: 0s; }
.ps-nota--2 { top: 74px; left: 120px; rotate: 5deg; animation-delay: -1.3s; }
.ps-nota--3 { top: 120px; left: 8px; rotate: 3deg; animation-delay: -2.1s; }
.ps-nota--4 { top: 164px; left: 96px; rotate: -4deg; animation-delay: -0.7s; }
.ps-ic--pdf { color: #D64545; }
.ps-ic--telegram { color: #2F86C9; }

@keyframes ps-flota {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -7px; }
}

.ps-tw {
    position: absolute;
    top: 206px;
    left: 18px;
    margin: 0;
    font-size: 1rem;
    white-space: nowrap;
}
.ps-tw__txt {
    color: var(--ps-gris);
    transition: color 0.3s;
}
.ps-tw__txt.is-respuesta { color: var(--ps-verde-osc); }
.ps-cursor {
    display: inline-block;
    width: 2px;
    height: 15px;
    margin-left: 2px;
    vertical-align: -2px;
    background: #5D6E72;
    animation: ps-parpadeo 1s steps(1) infinite;
}
@keyframes ps-parpadeo {
    50% { opacity: 0; }
}

.ps-flecha-col {
    display: flex;
    justify-content: center;
}
.ps-flecha {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ps-verde);
    color: #fff;
    font-size: 20px;
    transition: scale 0.25s, background 0.3s;
}

.ps-plan { perspective: 700px; }

.ps-card {
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid var(--ps-verde);
    border-radius: 14px;
    transition: transform 0.15s ease-out, border-color 0.5s;
}
.ps-card__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.ps-card__t {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ps-negro);
}
.ps-pct {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ps-verde-osc);
    font-variant-numeric: tabular-nums;
}
.ps-barra {
    height: 4px;
    margin-bottom: 6px;
    background: #EEF2F0;
    border-radius: 4px;
}
.ps-barra__fill {
    height: 4px;
    width: 100%;
    background: var(--ps-verde);
    border-radius: 4px;
    transition: width 0.6s ease-out;
}
.ps-tarea {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-top: 0.5px solid #EEF2F0;
    font-size: 1rem;
    color: var(--ps-negro);
}
.ps-tarea .ps-ic {
    font-size: 18px;
    transition: color 0.3s, scale 0.3s;
}
.ps-tarea__no { display: none; color: #B9C4C0; }
.ps-tarea__si { color: var(--ps-verde); }
.ps-tarea:not(.is-hecho) .ps-tarea__no { display: block; }
.ps-tarea:not(.is-hecho) .ps-tarea__si { display: none; }
.ps-tarea.is-pop .ps-tarea__si { scale: 1.25; }
.ps-tarea__d {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--ps-gris);
}
.ps-aviso {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 10px;
    background: #EAF6EF;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--ps-verde-osc);
}

/* ---------- 1 de cada N ---------- */

.ps-datos {
    margin: 3rem 0 0;
    text-align: center;
}
.ps-ratio {
    display: inline-block;
    margin: 0;
    font-family: var(--opogc-font-title);
    font-size: 64px;
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.04em;
}
.ps-gente {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 18px 0 12px;
    font-size: 28px;
}
.ps-persona {
    position: relative;
    display: inline-flex;
    color: #D5DDD9;
    transition: color 0.2s, scale 0.3s;
}
.ps-persona.is-paso { color: #7C8B86; }
.ps-persona.is-elegido {
    color: var(--ps-verde);
    scale: 1.3;
}
.ps-onda {
    position: absolute;
    inset: -4px;
    border: 2px solid var(--ps-verde);
    border-radius: 50%;
    animation: ps-onda 1.2s ease-out 2;
    pointer-events: none;
}
@keyframes ps-onda {
    from { scale: 0.6; opacity: 0.9; }
    to { scale: 2.2; opacity: 0; }
}
.ps-linea {
    margin: 0;
    font-size: 1rem;
    color: #5D6E72;
}
.ps-linea b {
    font-weight: 700;
    color: var(--ps-negro);
    font-variant-numeric: tabular-nums;
}

.ps-pills {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 1.75rem 0 0;
}
.ps-pill {
    padding: 6px 14px;
    border: 0.5px solid var(--ps-borde);
    border-radius: 999px;
    font-size: 0.875rem;
    color: #4E5E59;
}
.ps-pill b {
    font-weight: 700;
    color: var(--ps-negro);
}
.ps-pill--oscura {
    background: var(--ps-negro);
    border-color: var(--ps-negro);
    color: #fff;
}
.ps-pill--oscura b { color: #5BD08F; }

/* ---------- Frase final, palabra a palabra ---------- */

.ps-final {
    margin: 2.75rem 0 0;
    font-family: var(--opogc-font-title);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
}
.ps-w {
    display: inline-block;
    transition: opacity 0.4s, translate 0.4s;
}
.ps-w--v .ps-ul { margin-top: 6px; }

.ps-fuente {
    max-width: 640px;
    margin: 2.25rem auto 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--ps-gris);
    text-align: center;
}
.ps-guia {
    margin: 0.75rem 0 0;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}
.ps-guia a {
    color: var(--ps-verde-osc);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =================================================================
   ESTADO INICIAL (.ps--armado, lo pone parte.js) Y ANIMACIÓN
   ================================================================= */

@keyframes ps-sube {
    from { opacity: 0; translate: 0 22px; }
    to { opacity: 1; translate: 0 0; }
}

.ps--armado .ps-fx { opacity: 0; translate: 0 22px; }
.ps--armado .ps-fx.is-in {
    animation: ps-sube 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    animation-delay: var(--d, 0s);
}

.ps--armado .ps-ul:not(.is-in) { scale: 0 1; }

.ps--armado .ps-nota {
    opacity: 1;
    visibility: visible;
    animation: ps-flota 4s ease-in-out infinite;
}
.ps--armado .ps-nota:not(.is-in) {
    opacity: 0;
    scale: 0.7;
}

/* La comparativa se repite mientras se ve: se funde, se rebobina sin
   transiciones (.ps--quieto) y vuelve a aparecer. */
.ps--armado .ps-cmp > * { transition: opacity 0.4s; }
.ps--armado .ps-cmp.is-reinicio > * { opacity: 0; }
.ps--quieto *,
.ps--quieto *::before,
.ps--quieto *::after {
    transition: none !important;
}
.ps--armado .ps-tw__txt:not(.is-respuesta) { color: var(--ps-gris); }

.ps--armado .ps-flecha:not(.is-verde) { background: var(--ps-negro); }
.ps--armado .ps-flecha.is-pop { scale: 1.25; }
.ps--armado .ps-card:not(.is-verde) { border-color: var(--ps-borde); }

.ps--armado .ps-w:not(.is-in) { opacity: 0; translate: 0 10px; }

/* Extra: brillo del metal (una vez, cuando cada titular ya ha entrado) y
   barrido del radar mientras se monta la sección. */
.ps--armado .ps-t1.is-in {
    animation: ps-sube 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both, ps-brillo 1.4s ease-in-out both;
    animation-delay: var(--d, 0s), calc(var(--d, 0s) + 0.55s);
}
.ps--armado .ps-t2wrap.is-in .ps-t2 { animation: ps-brillo 1.4s ease-in-out 0.85s both; }
.ps--armado .ps-datos.is-in .ps-ratio,
.ps--armado .ps-datos.is-in .ps-ratio .ps-v { animation: ps-brillo 1.4s ease-in-out 1.2s both; }
.ps--armado .ps-w.is-in.ps-metal { animation: ps-brillo 1.1s ease-in-out 0.2s both; }
.ps--armado .ps-eye.is-in .ps-radar__barrido { animation: ps-radar 1.6s linear 3; }
@keyframes ps-radar {
    to { transform: rotate(360deg); }
}

/* ---------- Escritorio: dos columnas, como el hero ----------
   Cabecera y datos a la izquierda; la comparativa a la derecha, en vertical
   (el caos arriba y el plan debajo). Así la sección ocupa la mitad de alto. */

@media (min-width: 981px) {
    .ps__in {
        width: min(1120px, calc(100% - 48px));
        max-width: none;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
        grid-template-areas: "head vis" "cuerpo vis";
        grid-template-rows: auto auto;
        column-gap: 72px;
    }
    .ps__head { grid-area: head; align-self: end; }
    .ps__vis { grid-area: vis; align-self: center; }
    .ps__cuerpo { grid-area: cuerpo; align-self: start; }

    .ps-eye { justify-content: flex-start; }
    .ps-h { text-align: left; }
    .ps-ul { margin-left: 0; }
    .ps-t2wrap { margin-bottom: 1.75rem; }

    .ps-datos {
        margin: 0;
        text-align: left;
    }
    .ps-ratio { font-size: 56px; }
    .ps-gente {
        justify-content: flex-start;
        gap: 10px;
        margin: 14px 0 10px;
        font-size: 26px;
    }
    .ps-pills {
        justify-content: flex-start;
        margin-top: 1.25rem;
    }
    .ps-final {
        margin-top: 1.75rem;
        font-size: 26px;
        text-align: left;
    }
    .ps-w--v .ps-ul { margin-left: 0; }
    .ps-fuente {
        margin: 1.25rem 0 0;
        text-align: left;
    }
    .ps-guia { text-align: left; }

    .ps-cmp {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
    .ps-caos { height: 236px; }
    .ps-nota--2 { left: auto; right: 24px; }
    .ps-nota--4 { left: auto; right: 48px; }
    .ps-tw { left: 8px; }
    .ps-flecha { rotate: 90deg; }
}

/* ---------- Móvil: el caos arriba y el plan debajo ---------- */

@media (max-width: 720px) {
    .ps-h { font-size: clamp(2.1rem, 10vw, 2.875rem); }
    .ps-t2wrap { margin-bottom: 2rem; }
    .ps-cmp {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }
    .ps-caos { height: 236px; }
    /* Las notas se reparten por el ancho sin salirse de la pantalla. */
    .ps-nota--2 { left: auto; right: 2px; }
    .ps-nota--4 { left: auto; right: 10px; }
    .ps-flecha { rotate: 90deg; }
    .ps-ratio { font-size: clamp(2.6rem, 13vw, 4rem); }
    .ps-gente {
        gap: 6px;
        font-size: 26px;
    }
    .ps-final { font-size: clamp(1.4rem, 6.4vw, 1.75rem); }
}

/* ---------- Sin movimiento: el estado final, quieto ---------- */

@media (prefers-reduced-motion: reduce) {
    .ps *,
    .ps *::before,
    .ps *::after {
        animation: none !important;
        transition: none !important;
    }
}