/* La página de currículum.
 *
 * El marcado viene de `construir-resume.py`, que parte de `clientes/index.html`
 * para heredar cabecera, menú y pie. Todo lo propio va aquí, con el prefijo
 * `cv-`, de modo que borrar este fichero y su <link> devuelve la página a la
 * plantilla sin estilo propio.
 *
 * Colores tomados del sitio: el fondo oscuro es el mismo que usa el portfolio y
 * el azul es el de los enlaces del tema.
 */

.cv {
    --cv-texto: #d9dee5;
    --cv-tenue: #98a2b0;
    --cv-borde: #2b3340;
    --cv-tarjeta: #171b21;
    --cv-azul: #2f7fd4;

    max-width: 940px;
    margin: 0 auto;
    padding: 0 4px 40px;
    color: var(--cv-texto);
}

/* ── Cabecera ─────────────────────────────────────────────────────────── */

.cv-cabecera {
    margin-bottom: 2.5rem;
}

.cv-titulo {
    margin: 0 0 .35rem;
    font-size: 2.4rem;
    line-height: 1.1;
    font-weight: 600;
}

.cv-puesto {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--cv-tenue);
}

/* ── Bloques ──────────────────────────────────────────────────────────── */

.cv-bloque {
    margin-bottom: 2.75rem;
}

.cv-bloque > h2 {
    margin: 0 0 1.15rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cv-azul);
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--cv-borde);
}

.cv-perfil p {
    margin: 0 0 .9rem;
    /* 68ch es donde se lee cómodo; a ancho completo el ojo pierde el renglón
     * al volver, que es lo que pasaba en las páginas de itcom.es. */
    max-width: 68ch;
    line-height: 1.65;
}

/* ── Experiencia ──────────────────────────────────────────────────────── */

.cv-trabajo {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--cv-borde);
}

.cv-trabajo:last-of-type {
    border-bottom: 0;
}

.cv-trabajo__cuando {
    font-size: .875rem;
    color: var(--cv-tenue);
    padding-top: .2rem;
    white-space: nowrap;
}

.cv-trabajo__empresa {
    margin: 0;
    font-size: 1.1875rem;
    font-weight: 600;
}

.cv-trabajo__puesto {
    margin: .15rem 0 .7rem;
    font-size: .9375rem;
    color: var(--cv-tenue);
}

.cv-lista {
    margin: 0;
    padding-left: 1.1rem;
}

.cv-lista li {
    margin-bottom: .4rem;
    line-height: 1.6;
    max-width: 66ch;
}

/* ── Tecnologías ──────────────────────────────────────────────────────── */

.cv-grupos {
    display: grid;
    gap: 1.5rem;
}

.cv-grupo h3 {
    margin: 0 0 .6rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--cv-tenue);
}

.cv-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.cv-tag {
    display: inline-block;
    padding: .35rem .75rem;
    background: var(--cv-tarjeta);
    border: 1px solid var(--cv-borde);
    border-radius: 3px;
    font-size: .875rem;
}

/* ── Listas de datos (certificaciones, formación, idiomas) ────────────── */

.cv-datos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cv-datos li {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 1.5rem;
    padding: .7rem 0;
    border-bottom: 1px solid var(--cv-borde);
}

.cv-datos li:last-child {
    border-bottom: 0;
}

.cv-cuando {
    font-size: .875rem;
    color: var(--cv-tenue);
}

.cv-que em {
    display: block;
    font-style: normal;
    font-size: .875rem;
    color: var(--cv-tenue);
    margin-top: .1rem;
}

/* ── Descarga ─────────────────────────────────────────────────────────── */

.cv-descarga__intro {
    margin: 0 0 1.1rem;
    color: var(--cv-tenue);
}

.cv-descarga__botones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin: 0;
}

.cv-boton {
    display: inline-block;
    padding: .85rem 1.6rem;
    background: var(--cv-azul);
    color: #fff !important;
    border-radius: 3px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color .15s ease;
}

.cv-boton:hover,
.cv-boton:focus {
    background: #245f9f;
}

.cv-otro {
    font-size: .9375rem;
    color: var(--cv-tenue) !important;
}

/* ── Móvil ────────────────────────────────────────────────────────────── */
/*
 * Las dos rejillas pasan a una columna: con 150 px reservados para el año, el
 * texto se quedaba en un canal muy estrecho y se partía palabra a palabra.
 */
@media (max-width: 640px) {
    .cv-trabajo,
    .cv-datos li {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .cv-titulo {
        font-size: 1.9rem;
    }

    .cv-descarga__botones {
        gap: .9rem;
    }

    .cv-boton {
        width: 100%;
        text-align: center;
    }
}

/* El enlace al detalle de cada etapa, que vive en /experience/. */
.cv-mas {
    margin: 1.1rem 0 0;
    font-size: .9375rem;
}

.cv-mas a {
    color: var(--cv-azul) !important;
    text-decoration: none !important;
}

.cv-mas a:hover,
.cv-mas a:focus {
    text-decoration: underline !important;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Móvil
 *
 * Medido a 390 px: el texto empezaba a 4 px del borde de la pantalla —los
 * 4 px de padding de `.cv`, pensados para escritorio, donde el bloque va
 * centrado y sobra sitio de sobra a los lados—. En un móvil eso deja el
 * renglón pegado al canto y se lee mal. El resto del sitio usa 16 px: la
 * portada y `/experience/` ya lo hacían, y `/resume/` era la única que no.
 * ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .cv {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Objetivos táctiles. Medido: 17 px de alto, la mitad de lo que se puede
     * tocar con el pulgar sin fallar. El texto no cambia de tamaño; lo que se
     * amplía es la zona que responde. */
    .cv-mas a,
    .cv-otro {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
 * Los botones, con la misma luz que los de la portada
 *
 * Los colores salen de la fotografía del hero: el azul de las tiras de luz de
 * los racks es #2851a0 y los reflejos vivos llegan a #4a7fd8. Se repiten aquí
 * para que las tres páginas se vean del mismo sitio.
 * ───────────────────────────────────────────────────────────────────────── */
.cv-boton {
    display: inline-flex;
    /* Sin esto el `min-height` mide la caja de CONTENIDO, no la del borde: el
     * botón de /resume/ salía a 76 px en vez de 48 porque le sumaba los 25,6 px
     * de padding vertical. El sitio no trae un `border-box` general. */
    box-sizing: border-box;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .8rem 1.5rem;
    background: linear-gradient(180deg, #3a86df, #2761b4);
    border: 1px solid #4a90e6;
    border-radius: 4px;
    letter-spacing: .01em;
    box-shadow: 0 8px 20px -10px rgba(47, 127, 212, .8);
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.cv-boton:hover,
.cv-boton:focus-visible {
    background: linear-gradient(180deg, #4a93ea, #2f6cc4);
    border-color: #7fb6ff;
    box-shadow: 0 10px 24px -8px rgba(74, 144, 230, .95);
}

.cv-boton:focus-visible,
.cv-mas a:focus-visible,
.cv-otro:focus-visible {
    outline: 2px solid #7fb6ff;
    outline-offset: 2px;
}


/* El fondo de la página, el mismo que en /experiencia/.
 *
 * Esta sección no declaraba ninguno, así que se veía el negro puro del <body>
 * mientras que /experiencia/ usa #12151a. Dos páginas hermanas con dos fondos
 * distintos: se nota al pasar de una a otra.
 *
 * Se apunta a la sección que envuelve al bloque `.cv`, que es el equivalente de
 * `.xp-seccion` — la del currículum no tiene clase propia, así que se localiza
 * por el contenido.
 */
.wp-block-kubio-section:has(> * > .cv),
.wp-block-kubio-section:has(> * > * > .cv) {
    background: #12151a;
}

/* ── Las empresas, enlazadas ──────────────────────────────────────────────
 *
 * Mismo criterio que en `experiencia.css`: subrayado discreto, color solo al
 * pasar por encima. Las dos páginas tienen que parecer hermanas.
 */
.cv-enlace {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(47, 127, 212, .6);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .15s, text-decoration-color .15s;
}

.cv-enlace:hover,
.cv-enlace:focus-visible {
    color: var(--cv-azul);
    text-decoration-color: var(--cv-azul);
}

.cv-enlace:focus-visible {
    outline: 2px solid var(--cv-azul);
    outline-offset: 2px;
}