/* ==========================================================================
   Convocatoria de envío de resúmenes — /convocatoria

   EL TEXTO ES EL DEL DOCUMENTO OFICIAL del comité ("Convocatoria envía tu
   resumen_21congips_final_GM.docx") y no se toca. Lo que vive en este archivo
   es la puesta en página: el documento repartido en bandas para que se lea de
   corrido en pantalla —portada de marca, ejes en rejilla, recepción con la
   tarjeta del plazo, dictaminación sobre fondo hondo, resultados y cierre.

   La página es INFORMATIVA: no hay botones ni contador. Si aparece un
   .lp-btn o un [data-countdown] dentro de <main>, es una regresión.

   Subpágina de la portada: SE CARGA DESPUÉS de landing.css y sólo añade lo
   propio (prefijo cv-). Paleta, tipografías, barra y pie vienen de allí; las
   apariciones al desplazar ([data-reveal]) las gobierna el mismo
   public/landing/js/landing.js y sólo existen bajo
   prefers-reduced-motion: no-preference.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Rejilla común de sección
   -------------------------------------------------------------------------- */

.cv-seccion {
    padding: clamp(64px, 8vw, 110px) 22px;
}

.cv-seccion__inner {
    max-width: 1020px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Portada: "El Comité Organizador… / CONVOCA / A la comunidad…"
   -------------------------------------------------------------------------- */

.cv-portada {
    position: relative;
    background: var(--lp-degradado);
    color: #fff;
    padding: clamp(140px, 17vw, 210px) 22px clamp(76px, 9vw, 120px);
    overflow: hidden;
}

/* Resplandores del degradado: los mismos de la banda de convocatoria de la
   portada del sitio, para que las dos páginas se sientan de la misma familia. */
.cv-portada::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 45% 60% at 88% 8%, rgba(255, 255, 255, .14), transparent 70%),
        radial-gradient(ellipse 55% 70% at 4% 96%, rgba(21, 42, 54, .38), transparent 70%);
    pointer-events: none;
}

.cv-portada__inner {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.cv-portada__comite {
    margin: 0;
    font-family: var(--lp-font-display);
    font-weight: 500;
    font-size: clamp(18px, 2.4vw, 26px);
    line-height: 1.35;
    color: #d9ecdf;
    text-wrap: balance;
}

.cv-portada__convoca {
    margin: 10px 0 0;
    font-family: var(--lp-font-display);
    font-weight: 600;
    font-size: clamp(44px, 8vw, 104px);
    line-height: 1;
    letter-spacing: .14em;
    /* El sangrado óptico del letter-spacing: sin esto la palabra se ve
       descentrada hacia la izquierda. */
    text-indent: .14em;
}

.cv-portada__convoca::after {
    content: "";
    display: block;
    width: 92px;
    height: 4px;
    margin: clamp(18px, 2.4vw, 28px) auto 0;
    border-radius: 2px;
    background: var(--lp-verde);
}

.cv-portada__entrada {
    margin: clamp(28px, 4vw, 44px) auto 0;
    max-width: 62ch;
    font-size: clamp(16px, 1.75vw, 20px);
    font-weight: 600;
    line-height: 1.68;
    color: #eaf4ee;
}

/* El lema del congreso, dentro de la misma oración del documento. */
.cv-lema {
    display: block;
    margin-top: 18px;
    font-size: 1.12em;
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;
    color: #f2ffe1;
}

/* --------------------------------------------------------------------------
   Ejes temáticos
   -------------------------------------------------------------------------- */

.cv-seccion--ejes {
    background: #fff;
}

.cv-entradilla {
    margin: 0 auto clamp(34px, 4.5vw, 52px);
    max-width: 66ch;
    text-align: center;
    font-size: clamp(17px, 1.9vw, 21px);
    line-height: 1.6;
    color: #3c525e;
    text-wrap: pretty;
}

.cv-ejes {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin: 0;
    padding: 0;
}

.cv-eje {
    position: relative;
    padding: 24px 22px 22px;
    background: var(--lp-neutro);
    border: 1px solid rgba(21, 42, 54, .07);
    border-radius: 16px;
    overflow: hidden;
}

/* Filete de color que crece al pasar el cursor: el único adorno de la
   tarjeta, para no competir con el texto. */
.cv-eje::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--lp-verde);
    transform: scaleY(0);
    transform-origin: top;
}

/* Cifra de agua: es decorativa (el rótulo "Eje N." ya está en el texto). */
.cv-eje__cifra {
    position: absolute;
    right: 14px;
    bottom: -14px;
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 68px;
    line-height: 1;
    color: rgba(28, 93, 110, .07);
    pointer-events: none;
}

.cv-eje__texto {
    position: relative;
    margin: 0;
    font-size: 16.5px;
    line-height: 1.55;
    color: var(--lp-tinta);
}

.cv-eje__texto b {
    color: var(--lp-teal);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Encabezados y texto corrido
   -------------------------------------------------------------------------- */

.cv-h2 {
    margin: 0 0 18px;
    font-family: var(--lp-font-display);
    font-weight: 600;
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1.15;
    letter-spacing: -.01em;
    color: var(--lp-azul-hondo);
    text-wrap: balance;
}

/* Los dos encabezados que el documento escribe en mayúsculas. */
.cv-h2--versal {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: clamp(22px, 2.6vw, 32px);
}

.cv-h2--claro {
    color: #fff;
}

.cv-p {
    margin: 0 0 16px;
    font-size: clamp(16px, 1.7vw, 18.5px);
    line-height: 1.7;
    color: #3c525e;
}

.cv-p:last-child {
    margin-bottom: 0;
}

.cv-p--claro {
    color: #d6e6dd;
}

.cv-p--ancho {
    max-width: 68ch;
}

/* Párrafo que el documento pone en negrita (publicación de resultados). */
.cv-p--guia {
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 600;
    line-height: 1.6;
    color: var(--lp-azul-hondo);
}

.cv-enlace {
    font-weight: 700;
    color: var(--lp-teal);
    background: linear-gradient(var(--lp-verde), var(--lp-verde)) 0 100% / 100% 2px no-repeat;
    padding-bottom: 2px;
}

/* Aviso al margen: mismo texto, sólo separado del cuerpo. */
.cv-destacado {
    margin-top: 26px;
    padding: 18px 22px;
    border-radius: 14px;
    border: 1px solid rgba(140, 198, 63, .5);
    background: rgba(140, 198, 63, .12);
    color: #33505c;
}

/* --------------------------------------------------------------------------
   Recepción de resúmenes + tarjeta del plazo
   -------------------------------------------------------------------------- */

.cv-seccion--recepcion {
    background: var(--lp-neutro);
}

.cv-recepcion {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

.cv-plazo {
    padding: clamp(26px, 3vw, 38px);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 50px -30px rgba(21, 42, 54, .4);
    border-top: 4px solid var(--lp-verde);
}

.cv-h2--plazo {
    font-size: clamp(19px, 2.1vw, 24px);
    margin-bottom: 14px;
}

.cv-plazo__fecha {
    margin: 0;
    font-family: var(--lp-font-display);
    font-weight: 600;
    font-size: clamp(22px, 2.7vw, 30px);
    line-height: 1.2;
    color: var(--lp-teal);
    text-wrap: balance;
}

.cv-plazo__aviso {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(21, 42, 54, .1);
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #b4472f;
}

/* --------------------------------------------------------------------------
   Dictaminación: banda honda
   -------------------------------------------------------------------------- */

.cv-seccion--dictamen {
    background: var(--lp-azul-hondo);
    /* Textura sutil para que la banda no se vea plana. */
    background-image:
        radial-gradient(ellipse 40% 60% at 92% 0%, rgba(140, 198, 63, .16), transparent 70%),
        radial-gradient(ellipse 50% 60% at 0% 100%, rgba(42, 138, 153, .28), transparent 70%);
}

.cv-criterios {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 26px;
    margin: clamp(24px, 3vw, 34px) 0 0;
    padding: 0;
}

.cv-criterio {
    position: relative;
    padding: 12px 0 12px 34px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: clamp(15.5px, 1.6vw, 17.5px);
    line-height: 1.5;
    color: #e7f1ea;
}

/* El guion de la lista del documento, en verde. */
.cv-criterio::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22px;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: var(--lp-verde);
}

/* --------------------------------------------------------------------------
   Publicación de resultados
   -------------------------------------------------------------------------- */

.cv-seccion--resultados {
    background: #fff;
}

/* La medida se limita en los párrafos, no en el contenedor: si se acota el
   .cv-seccion__inner, el bloque se centra y el margen izquierdo deja de
   coincidir con el de las demás bandas. */
.cv-resultados .cv-p {
    max-width: 74ch;
}

/* --------------------------------------------------------------------------
   Cierre: información adicional
   -------------------------------------------------------------------------- */

.cv-cierre {
    padding: clamp(52px, 6vw, 84px) 22px clamp(60px, 7vw, 96px);
    background: var(--lp-neutro);
    border-top: 1px solid rgba(21, 42, 54, .08);
}

.cv-cierre__inner {
    text-align: center;
}

.cv-cierre__rotulo {
    margin: 0;
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--lp-cta);
}

.cv-cierre__correo {
    margin: 12px 0 0;
    font-family: var(--lp-font-display);
    font-weight: 600;
    font-size: clamp(22px, 3.2vw, 34px);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.cv-cierre__correo a {
    color: var(--lp-azul-hondo);
    background: linear-gradient(var(--lp-verde), var(--lp-verde)) 0 100% / 100% 3px no-repeat;
    padding-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Móvil / tableta
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {

    .cv-ejes {
        grid-template-columns: 1fr 1fr;
    }

    .cv-recepcion {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {

    .cv-ejes,
    .cv-criterios {
        grid-template-columns: 1fr;
    }

    .cv-portada {
        padding: 120px 18px 64px;
    }

    .cv-criterio {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .cv-criterio::before {
        top: 20px;
    }
}

/* --------------------------------------------------------------------------
   Movimiento — todo opcional y sólo si el sistema no pide reducirlo.

   La portada entra sola al cargar (no depende de JS). Lo demás usa los
   [data-reveal] de landing.js; aquí sólo se escalonan por posición para que
   las rejillas no aparezcan de golpe.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

    .cv-portada__comite,
    .cv-portada__convoca,
    .cv-portada__entrada {
        animation: cv-entra .9s var(--lp-ease) backwards;
    }

    .cv-portada__comite {
        animation-delay: .05s;
    }

    .cv-portada__convoca {
        animation-delay: .18s;
    }

    .cv-portada__entrada {
        animation-delay: .34s;
    }

    /* La pleca bajo CONVOCA se dibuja de dentro hacia fuera. */
    .cv-portada__convoca::after {
        animation: cv-pleca .7s var(--lp-ease) .7s backwards;
    }

    @keyframes cv-entra {
        from {
            opacity: 0;
            transform: translateY(18px);
        }
    }

    @keyframes cv-pleca {
        from {
            transform: scaleX(0);
        }
    }

    /* Escalonado de las rejillas al entrar en pantalla. */
    .cv-ejes [data-reveal]:nth-child(3n + 2),
    .cv-criterios [data-reveal]:nth-child(2n) {
        transition-delay: .1s;
    }

    .cv-ejes [data-reveal]:nth-child(3n) {
        transition-delay: .2s;
    }

    /* Los párrafos de resultados se encadenan de arriba abajo. */
    .cv-resultados [data-reveal]:nth-child(2) {
        transition-delay: .08s;
    }

    .cv-resultados [data-reveal]:nth-child(3) {
        transition-delay: .16s;
    }

    .cv-resultados [data-reveal]:nth-child(4) {
        transition-delay: .24s;
    }

    /* --- Micro-interacciones --- */

    .cv-eje,
    .cv-eje::before,
    .cv-enlace,
    .cv-cierre__correo a {
        transition: transform .45s var(--lp-ease), box-shadow .45s var(--lp-ease),
            background-size .35s var(--lp-ease), border-color .45s var(--lp-ease);
    }

    .cv-eje:hover {
        transform: translateY(-4px);
        border-color: rgba(140, 198, 63, .5);
        box-shadow: 0 18px 36px -24px rgba(21, 42, 54, .5);
    }

    .cv-eje:hover::before {
        transform: scaleY(1);
    }

    /* El subrayado se retira y vuelve: pista de que es un enlace. */
    .cv-enlace:hover,
    .cv-cierre__correo a:hover {
        background-size: 100% 100%;
        background-position: 0 100%;
    }
}

/* Sin JavaScript (o con movimiento reducido) el filete de las tarjetas se
   queda visible: es parte del diseño, no sólo un estado de hover. */
@media (prefers-reduced-motion: reduce) {

    .cv-eje::before {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Impresión: la convocatoria se imprime y se reparte. Fuera bandas, barra y
   pie; queda el documento en negro sobre blanco.
   -------------------------------------------------------------------------- */

@media print {

    .lp-nav,
    .lp-pie {
        display: none;
    }

    .cv-portada,
    .cv-seccion--dictamen {
        background: none;
        color: #000;
    }

    .cv-portada::before,
    .cv-eje__cifra {
        display: none;
    }

    .cv-portada,
    .cv-seccion,
    .cv-cierre {
        padding: 0 0 18pt;
    }

    .cv-portada__comite,
    .cv-portada__convoca,
    .cv-portada__entrada,
    .cv-lema,
    .cv-h2--claro,
    .cv-p--claro,
    .cv-criterio,
    .cv-cierre__rotulo,
    .cv-cierre__correo a {
        color: #000;
    }

    .cv-portada__inner,
    .cv-cierre__inner,
    .cv-entradilla {
        text-align: left;
    }

    .cv-ejes,
    .cv-criterios,
    .cv-recepcion {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .cv-eje,
    .cv-plazo,
    .cv-destacado {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }

    .cv-eje,
    .cv-criterio,
    .cv-plazo__fecha,
    .cv-p {
        font-size: 11pt;
    }
}