/* ============================================================
   REFINAMIENTOS COMPARTIDOS — tarjetas de proyecto y secciones
   Se carga DESPUÉS de styles.css en index.html y works.html,
   para que ambas páginas compartan la misma estética.
   ============================================================ */

/* ---------- Sección "Mis trabajos" (home) ---------- */
.works { padding: 124px 0 132px; }

/* El fantasma "PORTFOLIO" se pisaba con el título */
.works .section-bg-title { display: none; }

/* Encabezado alineado a la grilla (como /SERVICIOS), no centrado */
.works-sticky-header {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}

.works .section-heading {
    text-align: left;
    font-size: clamp(34px, 4vw, 54px);
    letter-spacing: -0.03em;
    line-height: 1.04;
    color: #0f172a;
    margin-bottom: 58px;
}


.works-grid { gap: 30px; }

/* La fila "peek" quedaba como cajas grises cortadas */
.works-peek-row { display: none !important; }

.load-more-container,
.works-grid-wrap.has-peek .load-more-container { margin-top: 56px; }

/* ---------- Página "Ver todo" (works.html) ---------- */
.works-page { padding: 150px 0 120px; }

.works-page-grid { gap: 30px; }

.works-page-title {
    font-size: clamp(34px, 5vw, 54px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.04;
    color: #0f172a;
}

.works-page-title span {
    color: #9aa3b2;
    font-weight: 400;
}


.works-count-badge {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 9999px;
    padding: 7px 15px;
    font-size: 12.5px;
    letter-spacing: .01em;
    color: #5b6472;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.works-count-badge strong { color: #0f172a; }

.works-back-link { color: #8792a4; }
.works-back-link:hover { color: #0f172a; }

.works-page-divider { background: rgba(15, 23, 42, .08); }

.works-page-footer { border-top: 1px solid rgba(15, 23, 42, .08); }

/* ---------- Tarjeta de proyecto (compartida) ---------- */
.work-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .07);
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
    padding: 0;
    overflow: hidden;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1),
                box-shadow .5s cubic-bezier(.16, 1, .3, 1),
                border-color .5s ease;
}

.work-card:hover {
    transform: translateY(-6px);
    border-color: rgba(15, 23, 42, .12);
    box-shadow: 0 30px 60px -32px rgba(15, 23, 42, .28);
}

/* Imagen a sangre, proporción constante */
.work-img-box {
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 0;
    background: #eef0f3;
}

.work-card:hover .work-img-box img { transform: scale(1.05); }

/* Flecha que aparece al pasar el mouse */
.work-img-box::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.5 11.5L11.5 4.5M11.5 4.5H6M11.5 4.5V10' stroke='%230f172a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
    opacity: 0;
    transform: translateY(-6px) scale(.9);
    transition: opacity .4s cubic-bezier(.16, 1, .3, 1),
                transform .4s cubic-bezier(.16, 1, .3, 1);
    z-index: 2;
    box-shadow: 0 8px 20px -10px rgba(15, 23, 42, .45);
    pointer-events: none;
}

.work-card:hover .work-img-box::after { opacity: 1; transform: translateY(0) scale(1); }

/* Tipografía del pie de tarjeta */
.work-meta { padding: 22px 22px 26px; gap: 9px; }
.work-eyebrow { font-size: 10.5px; letter-spacing: .14em; color: #8792a4; font-weight: 600; }
.work-title { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: #0f172a; line-height: 1.3; }
.work-desc { font-size: 14.5px; line-height: 1.6; color: #5b6472; opacity: 1; }

/* Reveals más fluidos */
.fade-in { transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1); }

@media (max-width: 768px) {
    .works { padding: 36px 0 60px; }
    .works-sticky-header { padding: 12px 20px; }
    .works .section-heading { margin-bottom: 0; }
    .works-grid { gap: 22px; }
    .works-page { padding: 112px 0 80px; }
    .works-page-grid { gap: 22px; }
}

/* El mazo de tarjetas en mobile crece desde arriba, no desde el centro */
@media (max-width: 768px) {
    .works-grid .work-card { transform-origin: top center; will-change: transform, filter; }
}

/* ============================================================
   NAVBAR — barra completa arriba, cápsula al scrollear
   Sobre el hero queda pegada al borde (si flota deja un hueco feo encima
   de la regla). Al scrollear se transforma en cápsula de vidrio flotante.
   ============================================================ */
.header {
    top: 0;
    padding-top: 0;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 1px solid rgba(15, 23, 42, .07);
    pointer-events: none; /* el aire lateral no bloquea clics */
    transition: transform .45s cubic-bezier(.16, 1, .3, 1),
                padding-top .5s cubic-bezier(.16, 1, .3, 1),
                background .45s ease,
                border-color .45s ease;
}

.header-flex {
    pointer-events: auto;
    height: 80px;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 40px;
    overflow: visible;
    border-radius: 0;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    transition: height .5s cubic-bezier(.16, 1, .3, 1),
                max-width .5s cubic-bezier(.16, 1, .3, 1),
                padding .5s cubic-bezier(.16, 1, .3, 1),
                border-radius .5s cubic-bezier(.16, 1, .3, 1),
                background .45s ease,
                box-shadow .45s ease,
                border-color .45s ease;
}

/* ---- Al scrollear: cápsula flotante ---- */
.header.is-scrolled,
.header.scrolled {
    padding-top: 14px;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
}

.header.is-scrolled .header-flex,
.header.scrolled .header-flex {
    height: 62px;
    max-width: min(780px, calc(100% - 28px));
    padding: 0 12px 0 20px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border-color: rgba(15, 23, 42, .08);
    box-shadow: 0 16px 40px -24px rgba(15, 23, 42, .45);
}

.logo img {
    height: 44px;
    transition: height .5s cubic-bezier(.16, 1, .3, 1);
}

.header.is-scrolled .logo img,
.header.scrolled .logo img { height: 32px; }

/* Links: pill al pasar y estado activo, en vez del subrayado */
.nav { gap: 2px; }

.nav-link {
    padding: 9px 15px;
    border-radius: 9999px;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    transition: color .25s ease, background .25s ease;
}

.nav-link::after { display: none; }
.nav-link:hover { color: #0f172a; background: rgba(15, 23, 42, .055); }
.nav-link.is-active { color: #0f172a; background: rgba(15, 23, 42, .08); }

/* CTA */
.btn-header {
    background: #0f172a;
    padding: 10px 22px;
    border: 1.5px solid transparent; /* reserva el borde para el estado "acá" */
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 8px 20px -14px rgba(15, 23, 42, .8);
    transition: background .25s ease, transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}

.btn-header:hover {
    background: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 16px 30px -16px rgba(15, 23, 42, .8);
}

/* Hamburguesa más fina */
.hamburger,
.hamburger::before,
.hamburger::after {
    background: #0f172a;
    height: 1.8px;
    width: 20px;
    border-radius: 2px;
}

@media (max-width: 768px) {
    /* Sin backdrop-filter en .header-flex: crearía un bloque contenedor y el
       menú fullscreen (position:fixed) quedaría atrapado dentro de la cápsula. */
    .header { padding-top: 0; }
    .header.is-scrolled, .header.scrolled { padding-top: 8px; }

    .header-flex { height: 60px; padding: 0 20px; }

    .header.is-scrolled .header-flex,
    .header.scrolled .header-flex {
        height: 54px;
        max-width: calc(100% - 20px);
        padding: 0 10px 0 14px;
        border-radius: 9999px;
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .logo img { height: 34px; }
    .header.is-scrolled .logo img, .header.scrolled .logo img { height: 28px; }

    .header.header-hidden { transform: translateY(calc(-100% - 24px)); }

    /* En el menú abierto los links vuelven a ser tipografía grande */
    .nav-link { padding: 0; border-radius: 0; color: #0f172a; }
    .nav-link:hover,
    .nav-link.is-active { background: transparent; }
}

/* "Ya estás en esta sección" para el CTA del navbar.
   Mantiene su color sólido. El estado lo dan un anillo pegado al borde, que es
   lo que de verdad se lee como "seleccionado", más un glow difuso alrededor.
   Un glow solo quedaría ambiguo: sobre fondo claro se confunde con la sombra
   que el botón ya tiene. */
.btn-header.is-here {
    box-shadow: 0 0 0 3px rgba(15, 23, 42, .15),
                0 0 20px 2px rgba(15, 23, 42, .25),
                0 8px 20px -14px rgba(15, 23, 42, .8);
}

.btn-header.is-here:hover {
    box-shadow: 0 0 0 3px rgba(15, 23, 42, .2),
                0 0 24px 3px rgba(15, 23, 42, .3),
                0 16px 30px -16px rgba(15, 23, 42, .8);
}

/* ============================================================
   SERVICIOS — filas editoriales, sin acordeón
   El acordeón dejaba todo colapsado: se veían cinco títulos y nada más.
   Con descripciones de 3-4 líneas no hay nada que valga esconder.
   ============================================================ */
.services-group {
    margin-top: 48px;
    border-top: 1px solid rgba(15, 23, 42, .1);
}

.service-item {
    border-bottom: 1px solid rgba(15, 23, 42, .1);
    transition: background .4s ease;
}

.service-item:hover { background: rgba(15, 23, 42, .022); }

.service-row {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 48px;
    align-items: start;
    padding: 38px 0;
}

.service-head {
    display: flex;
    /* Por línea de base: el número queda alineado con la primera línea del
       título en cualquier tamaño. Con un margin-top fijo se descolgaba en
       mobile, donde el título achica. */
    align-items: baseline;
    gap: 18px;
}

.service-num {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .12em;
    color: #9aa3b2;
    flex-shrink: 0;
}

.service-name {
    margin: 0;
    font-size: clamp(21px, 2.5vw, 36px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: #0f172a;
}

.service-desc {
    margin: 0;
    padding-left: 0; /* anula la sangría que alineaba con el acordeón */
    max-width: 58ch;
    font-size: 16px;
    line-height: 1.65;
    color: #5b6472;
}

/* Chips de capacidades: escaneables y, de paso, keywords para un reclutador */
.service-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 20px 0 0;
    padding: 0;
}

.service-tags li {
    font-size: 12px;
    letter-spacing: .01em;
    color: #475569;
    background: rgba(15, 23, 42, .05);
    border: 1px solid rgba(15, 23, 42, .06);
    padding: 6px 11px;
    border-radius: 9999px;
}

@media (max-width: 860px) {
    .service-row { grid-template-columns: 1fr; gap: 18px; padding: 30px 0; }
    .service-desc { font-size: 15px; }
    .services-group { margin-top: 34px; }
}

/* ============================================================
   TRAYECTORIA — experiencia a ancho completo, educación en grilla
   Antes eran dos columnas con 2 ítems contra 4: la de experiencia
   terminaba y dejaba medio viewport vacío. Apilado se resuelve de raíz.
   ============================================================ */
.tray-grid { display: block; }

/* Venía topada en 800px, de cuando era una de dos columnas angostas */
.exp-timeline { max-width: none; }

.tray-block + .tray-block { margin-top: 76px; }

.tray-col-label { margin-bottom: 26px; }

/* Educación: cursos cortos no necesitan cronología visual */
.edu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.edu-card {
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    padding: 26px 24px 24px;
    background: rgba(255, 255, 255, .025);
    transition: background .4s ease, border-color .4s ease;
}

.edu-card:hover {
    background: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .16);
}

.edu-date {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
    margin-bottom: 12px;
}

/* Chips con el mismo lenguaje que Servicios, adaptados a fondo oscuro:
   relleno sutil con hairline, en vez del contorno suelto de antes. */
.exp-tag {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .72);
    border-radius: 9999px;
    font-size: 12px;
    padding: 6px 11px;
}

@media (max-width: 1024px) {
    .edu-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
    .edu-grid { grid-template-columns: 1fr; }
    .tray-block + .tray-block { margin-top: 52px; }
}

/* Tarjeta de experiencia en dos columnas, como las filas de Servicios:
   así usa el ancho completo sin que la línea de texto se vuelva ilegible. */
.exp-timeline-card {
    display: grid;
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    gap: 40px;
    align-items: start;
}

.exp-card-head { display: block; }
.exp-card-body { display: block; }
.exp-card-body .exp-desc { margin-top: 0; }

@media (max-width: 860px) {
    .exp-timeline-card { grid-template-columns: 1fr; gap: 14px; }
}

/* ============================================================
   NAVBAR MOBILE — mismo lenguaje que la cápsula de desktop
   Era un "liquid glass" con diez capas de sombras internas y un celeste
   (#2563eb) que no aparece en ningún otro lado del sitio.
   ============================================================ */
@media (max-width: 768px) {
    .mobile-nav-container,
    .mobile-nav-container.on-dark {
        /* Mismos colores que los links del navbar de desktop */
        --c-content: #475569;
        --c-action: #0f172a;
    }

    .mobile-nav-liquid,
    .mobile-nav-container.on-dark .mobile-nav-liquid {
        height: 62px;
        background: rgba(255, 255, 255, .82);
        -webkit-backdrop-filter: blur(18px) saturate(180%);
        backdrop-filter: blur(18px) saturate(180%);
        border: 1px solid rgba(15, 23, 42, .08);
        box-shadow: 0 16px 40px -24px rgba(15, 23, 42, .45);
    }

    /* La píldora deslizante usa el mismo relleno que el link activo de desktop */
    .mobile-nav-liquid::after,
    .mobile-nav-container.on-dark .mobile-nav-liquid::after {
        top: 5px;
        background-color: rgba(15, 23, 42, .08);
        box-shadow: none;
    }

    /* Trazo fino, como el resto de la iconografía del sitio */
    .mobile-nav__icon { stroke-width: 1.7; }
}

/* ============================================================
   CONTACTO Y FOOTER
   ============================================================ */

/* Las píldoras eran oscuras sobre fondo oscuro y casi no se veían.
   Es la vía de conversión de quien no quiere llenar el formulario. */
.cta-section .social-side-pill {
    background: rgba(255, 255, 255, .96);
    color: #0f172a;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .7);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .25s ease;
}

.cta-section .social-side-pill:hover {
    background: #fff;
    transform: translateY(-2px);
}

.cta-section .social-side-pill img {
    filter: brightness(0) saturate(100%); /* iconos en oscuro sobre píldora clara */
}

/* El footer y la sección de contacto eran dos negros casi idénticos pegados:
   se leían como un único bloque. Una hairline los separa. */
.footer { border-top: 1px solid rgba(255, 255, 255, .08); }

/* Medía ~150px contra los 36px del navbar */
.footer-brand img { height: 84px; width: auto; }

.footer-legal { margin-top: 8px; }

.footer-legal a {
    color: inherit;
    opacity: .6;
    font-size: .9em;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity .2s ease;
}

.footer-legal a:hover { opacity: 1; }

@media (max-width: 768px) {
    .footer-brand img { height: 64px; }
}

/* ============================================================
   TRAYECTORIA — el año como marcador
   Los puntos estaban equiespaciados aunque Americold duró 7 años y Monto
   menos de 1: la línea fingía representar tiempo. Y el dato que importa, el
   año, vivía en un label de 12px mientras un círculo se llevaba el peso
   visual. Se invierte: el año es el marcador y la línea pasa a ser un eje
   silencioso.
   ============================================================ */
.exp-timeline { padding-left: 0; max-width: none; }

.exp-timeline-item {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding-left: 0;
}

/* El riel: años alineados a la derecha, contra el eje */
.exp-timeline-date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 2px;
    padding-top: 2px;
}

.exp-year {
    font-size: 30px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, .92);
    font-variant-numeric: tabular-nums;
}

.exp-period {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .4);
}

/* Eje: hairline que se desvanece en los dos extremos */
.exp-timeline-line {
    left: 128px;
    top: 0;
    width: 1px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, .2) 40px,
        rgba(255, 255, 255, .1) 62%,
        rgba(255, 255, 255, 0) 100%);
}

/* El punto deja de ser el protagonista: queda como nodo sobre el eje,
   a la altura del año */
.exp-timeline-dot {
    left: 124px;
    top: 10px;
    width: 9px;
    height: 9px;
    border-width: 1px;
}

.exp-timeline-dot.active { box-shadow: 0 0 0 4px rgba(255, 255, 255, .09); }

@media (max-width: 860px) {
    .exp-timeline-item { grid-template-columns: 64px minmax(0, 1fr); gap: 20px; }
    .exp-year { font-size: 22px; }
    .exp-period { font-size: 10px; letter-spacing: .1em; }
    .exp-timeline-line { left: 74px; }
    .exp-timeline-dot { left: 70px; top: 7px; }
}

/* El nodo del item pasado quedaba casi invisible */
.exp-timeline-dot:not(.active) {
    border-color: rgba(255, 255, 255, .38);
    background: #272727;
}

/* La columna izquierda de la tarjeta sobraba de ancho para empresa + rol,
   y le robaba espacio a la descripción. Solo en desktop: en mobile la tarjeta
   va en una sola columna. */
@media (min-width: 861px) {
    .exp-timeline-card { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); }
}

/* ---- v5: el rango como par de iguales + el año anclado al nombre ----------
   Dos problemas. (1) Mientras el "hasta" fuera más chico que el "desde" iba a
   seguir leyéndose como epígrafe, no como la otra punta del rango: la jerarquía
   la daba el tamaño. Ahora los dos extremos tienen el mismo rango tipográfico y
   se diferencian solo por color, que alcanza para marcar cuál es el ancla.
   (2) El año se alineaba con el BORDE de la tarjeta, mientras el primer
   contenido real (el nombre) estaba 28px más abajo, empujado por el badge: el
   ojo conecta contenido con contenido, no con un marco, y por eso el riel
   flotaba suelto a la izquierda.
   ------------------------------------------------------------------------- */

/* El badge deja de empujar el nombre hacia abajo: pasa a calificarlo en línea.
   "Monto · PRODUCTO PROPIO", "Alkimiaz · ACTUAL", "Americold · 7 años". */
.exp-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
}

.exp-card-head .exp-company { order: 1; }

.exp-card-head .exp-timeline-badge,
.exp-card-head .exp-timeline-duration {
    order: 2;
    margin-bottom: 0;
    position: relative;
    top: 1px;
}

.exp-card-head .exp-role {
    order: 3;
    flex-basis: 100%;
    margin: 7px 0 0;
}

/* Ahora el año puede alinearse con el nombre de la empresa */
.exp-timeline-date { padding-top: 30px; gap: 0; }
.exp-timeline-dot { top: 39px; }

/* Los dos extremos, mismo cuerpo y mismo peso. Apilados y pegados leen como
   un rango de corrido; no hace falta ningún conector entre medio. */
.exp-year,
.exp-period {
    font-size: 22px;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: none;
    font-variant-numeric: tabular-nums;
}

.exp-year { color: rgba(255, 255, 255, .95); }
.exp-period { color: rgba(255, 255, 255, .42); }

/* Conector del eje a la tarjeta: 15px exactos, del borde del nodo al borde
   de la tarjeta. Antes moría en el aire a .08 de opacidad. */
.exp-timeline-dot::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    width: 15px;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(to right, rgba(255, 255, 255, .38), rgba(255, 255, 255, .16));
    transition: background .4s ease;
}

/* Hover: se enciende todo el recorrido rango → nodo → conector → tarjeta */
.exp-timeline-item:hover .exp-timeline-dot::after {
    background: linear-gradient(to right, rgba(255, 255, 255, .75), rgba(255, 255, 255, .35));
}

.exp-timeline-item:hover .exp-timeline-dot:not(.active) {
    border-color: rgba(255, 255, 255, .7);
}

.exp-timeline-item:hover .exp-year { color: #fff; }
.exp-timeline-item:hover .exp-period { color: rgba(255, 255, 255, .66); }

.exp-timeline-item:hover .exp-timeline-card {
    border-left-color: rgba(255, 255, 255, .26);
}

.exp-year, .exp-period, .exp-timeline-dot, .exp-timeline-card {
    transition: color .4s ease, border-color .4s ease, background .4s ease;
}

@media (max-width: 860px) {
    /* Padding de tarjeta 16px y empresa 16px: el ancla es más alta */
    .exp-timeline-date { padding-top: 23px; }
    .exp-timeline-dot { top: 30px; }
    .exp-year, .exp-period { font-size: 18px; letter-spacing: -0.01em; }
    /* El gap riel-tarjeta baja a 5px: el conector sobra */
    .exp-timeline-dot::after { display: none; }
    .exp-card-head { gap: 0 8px; }
    .exp-card-head .exp-role { margin-top: 5px; }
}

/* ---- Varios trabajos en curso: el rango se muestra una sola vez ----------
   Claro, Monto y Digifort comparten "2026 / Hoy". Repetido tres veces seguidas
   el riel se volvía ruido; se muestra en el primero y los demás lo heredan,
   con los nodos rellenos marcando que siguen en curso. El dato queda en un
   texto oculto para lectores de pantalla. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Links a los casos dentro de la descripción: un poco más claros que el texto
   para que se descubran al escanear, sin competir con el nombre de la empresa */
.exp-desc a {
    color: rgba(255, 255, 255, .72);
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .25);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .3s ease, text-decoration-color .3s ease;
}

.exp-desc a:hover {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, .7);
}