/* Final editorial refinements: compact hero, high-impact display and unified sans text. */
.intro{padding-top:4.6vw;padding-bottom:7vw}
.intro .lockup .resilience{display:block}
.intro .lockup .technology{display:block;font-family:"Bubbler One",sans-serif;font-size:.68em;font-style:normal;font-weight:400;letter-spacing:.02em;line-height:1;margin-left:.05em;text-align:right}
.currently{display:inline-block;font-family:"DM Sans",Arial,sans-serif;font-weight:700;font-size:.9em;letter-spacing:.01em;padding:.08rem .32rem;border:1px solid currentColor;border-radius:999px}
.social-mark{display:inline-grid;place-items:center;width:1.25rem;height:1.25rem;border:1px solid currentColor;border-radius:50%;font:700 .64rem/1 "DM Sans",sans-serif}
.intro .lockup{font-family:"Arial Black",Impact,"DM Sans",sans-serif;font-weight:900;font-stretch:condensed;letter-spacing:-.105em;line-height:.76;transform:scaleX(.94);transform-origin:left center;margin-bottom:0}
.role li,.credential-content p{font-family:"DM Sans",Arial,sans-serif;font-size:.78rem;line-height:1.62}
.role-head p,.credential-content h3{font-family:"DM Sans",Arial,sans-serif}
@media (min-width:651px) and (max-width:900px){.intro{padding-top:5.5vw;padding-bottom:6.5vw}.intro .lockup{letter-spacing:-.1em}}
@media (max-width:650px){
    .intro{
        padding-top:3.1rem;
        padding-bottom:4.4rem
    }

.intro .lockup{
    letter-spacing:-.08em;
    line-height:.88;
    padding-top:.35rem;
    padding-bottom:.35rem;
}

    .header{
        display:grid;
        grid-template-columns:1fr auto;
        align-items:center;
        gap:.8rem
    }

    .header .wordmark{
        white-space:nowrap
    }

    .header nav{
        grid-column:1 / -1;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:.5rem;
        width:100%
    }

    .header nav a{
        font-size:.53rem;
        white-space:nowrap
    }
    .header nav .btn-cv svg{
        width:13px;
        height:13px
    }

    .header .linkedin-icon{
        grid-column:2;
        grid-row:1
    }
}
.portrait{position:relative}
.whatsapp-fab{position:absolute;right:-1.05rem;bottom:2.6rem;display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.1rem;background:var(--black);color:var(--white);border-radius:999px;text-decoration:none;font:600 .74rem "DM Sans",sans-serif;box-shadow:0 8px 24px rgba(17,17,15,.28);transition:background-color .25s ease,color .25s ease,transform .25s ease}
.whatsapp-fab svg{width:16px;height:16px;fill:currentColor}
.whatsapp-fab:hover,.whatsapp-fab:focus-visible{background:#25D366;color:var(--black);transform:translateY(-2px)}
@media(max-width:650px){.whatsapp-fab{position:static;margin-top:1rem;box-shadow:none}}
.modal-overlay{position:fixed;inset:0;background:rgba(17,17,15,.75);display:flex;align-items:center;justify-content:center;padding:1.5rem;z-index:50}
.modal-overlay[hidden]{display:none}
.modal{background:var(--white);color:var(--black);max-width:640px;width:100%;padding:0;border-radius:14px;position:relative;overflow:hidden}
.modal-grid{display:grid;grid-template-columns:.85fr 1.15fr}
.modal-photo{width:100%;height:100%;min-height:280px;object-fit:cover;display:block}
.modal-body{padding:2.2rem}
.modal-close{position:absolute;top:1rem;right:1rem;background:var(--white);width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;border:0;font-size:1rem;line-height:1;cursor:pointer;color:var(--black);z-index:2}
.modal h3{font-size:1.4rem;margin-bottom:1.4rem;font-weight:700;letter-spacing:-.02em}
.modal form{display:flex;flex-direction:column;gap:1rem}
.modal label{font:500 .68rem "DM Mono",monospace;text-transform:uppercase;display:flex;flex-direction:column;gap:.4rem;color:var(--gray)}
.modal input,.modal textarea{font:400 .9rem "DM Sans",sans-serif;padding:.6rem .7rem;border:1px solid var(--hair);border-radius:8px;background:var(--white);color:var(--black)}
.modal input:focus,.modal textarea:focus{outline:2px solid var(--black);outline-offset:1px}
.modal button[type="submit"]{margin-top:.4rem;padding:.75rem 1rem;background:var(--black);color:var(--white);border:0;border-radius:999px;font:600 .8rem "DM Sans",sans-serif;cursor:pointer;transition:opacity .2s}
.modal button[type="submit"]:hover{opacity:.8}
.modal-success{font-size:.95rem;line-height:1.6}
@media(max-width:560px){.modal-grid{grid-template-columns:1fr}.modal-photo{min-height:150px}}
/* DOWNLOAD CV — DISEÑO FINAL */
.header nav a.btn-cv {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    background: var(--black) !important;
    color: var(--white) !important;

    border: 0 !important;
    border-radius: 999px !important;

    padding: 10px 16px !important;
    margin-left: 10px !important;

    font-family: "DM Sans", Arial, sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .06em !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    text-decoration: none !important;

    box-shadow: 0 8px 24px rgba(17,17,15,.20) !important;

    transition:
        transform .25s ease,
        background-color .25s ease,
        color .25s ease !important;
}

.header nav a.btn-cv svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
    transition: transform .25s ease !important;
}

.header nav a.btn-cv:hover {
    background: #25D366 !important;
    color: var(--black) !important;
    transform: translateY(-2px) !important;
}

.header nav a.btn-cv:hover svg {
    transform: translateY(2px) !important;
}

@media (max-width:650px) {

    .header nav a.btn-cv {
        padding: 8px 12px !important;
        margin-left: 0 !important;
        font-size: 9px !important;
        gap: 5px !important;
    }

    .header nav a.btn-cv svg {
        width: 13px !important;
        height: 13px !important;
    }
}
@media (max-width:650px) {
    .intro .lockup .resilience {
        letter-spacing: -0.04em;
    }
}
#contactForm[hidden] {
    display: none !important;
}
/* SECCIÓN 04 — TAMAÑO DEL TITULAR */
.contact-headline {
    font-size: 7.4rem !important;
    line-height: 0.95 !important;
}
/* SECCIÓN 04 — MÓVIL */
@media (max-width: 650px) {
    .contact-headline {
        font-size: 5.24rem !important;
        line-height: 0.95 !important;
    }
}

/* Enlace a la página de perfil, en su propia línea bajo el resumen */
.summary .profile-link{margin:1.15rem 0 0}
.summary .profile-link a{
    display:inline-block;
    font:600 .75rem "DM Sans",Arial,sans-serif;
    color:var(--black);
    text-decoration:none;
    border-bottom:1px solid var(--black);
    padding-bottom:.25rem;
}
.summary .profile-link a:hover{opacity:.5}


/* ============================================================
   Enlaces: el sitio no tenía reset, así que el wordmark, el menú
   y los enlaces del cuerpo salían con el estilo por defecto del
   navegador (azul y subrayados). Heredan el color del contexto,
   lo que los deja negros sobre fondo claro y blancos sobre el
   negro de la sección de contacto. El subrayado del pie se
   conserva: `footer a` gana por especificidad.
   ============================================================ */
a{
    color:inherit;
    text-decoration:none;
}

a:focus-visible{
    outline:2px solid currentColor;
    outline-offset:3px;
}


/* ============================================================
   El nombre del header ES el H1 de la página: visible, pequeño,
   como el membrete de una hoja carta. El lockup gigante pasa a
   H2 y conserva su aspecto porque ahora se identifica por clase.
   El h1 solo envuelve; no aporta tamaño ni margen propios.
   ============================================================ */
.header .wordmark-h1{
    margin:0;
    font-size:inherit;
    font-weight:inherit;
    line-height:inherit;
}


/* ============================================================
   Recomendaciones. Reutiliza la retícula de .ruled-section y el
   mismo patrón de filas de la sección de experiencia: línea
   superior sólida, separadores finos entre citas.
   ============================================================ */
.quotes{border-top:1px solid var(--black)}
.quote{
    margin:0;
    padding:1.3rem 0 1.7rem;
    border-bottom:1px solid var(--hair);
}
.quote:last-of-type{border-bottom:none}
.quote p{
    font:400 .82rem/1.68 "DM Sans",Arial,sans-serif;
    margin:0 0 .85rem;
    max-width:600px;
    text-align:justify;
    hyphens:auto;
    -webkit-hyphens:auto;
    text-wrap:pretty;
}
.quote p:last-of-type{margin-bottom:1.1rem}
/* Atribución: retrato circular a la izquierda, nombre y cargo apilados
   a la derecha. La imagen ocupa las dos filas del grid, así que el
   bloque se mantiene alineado aunque el cargo pase a dos líneas. */
.quote cite{
    font-style:normal;
    display:grid;
    grid-template-columns:44px 1fr;
    column-gap:.85rem;
    align-items:center;
}
.quote-face{
    grid-row:1 / span 2;
    width:44px;
    height:44px;
    border-radius:50%;
    object-fit:cover;
    background:var(--hair);
}
.quote cite b{
    align-self:end;
    font:600 .82rem "DM Sans",Arial,sans-serif;
}
.quote cite span{
    align-self:start;
    margin-top:.2rem;
    font:500 .68rem/1.5 "DM Mono",monospace;
    text-transform:uppercase;
    letter-spacing:.02em;
    color:var(--gray);
}
.quotes-note{
    font:400 .74rem/1.6 "DM Sans",Arial,sans-serif;
    color:var(--gray);
    margin:1.5rem 0 0;
}
.quotes-note a{border-bottom:1px solid var(--hair)}

/* Justificado también en columna angosta, a pedido: puede abrir
   pequeños huecos entre palabras («ríos») en pantallas muy chicas,
   pero se mantiene consistente con el resto del sitio. */
@media (max-width:650px){
    .quote p{
        max-width:none;
    }
    .quote cite{
        grid-template-columns:38px 1fr;
        column-gap:.7rem;
        align-items:start;
    }
    .quote-face{width:38px;height:38px}
    .quote cite b{align-self:start}
    .quote cite span{font-size:.63rem}
}