/* =========================================================================
   custom.css — Personalizaciones sobre el sistema base (vibes.css)
   Hero con recorte, servicios, carrusel horizontal por scroll, sobre mí,
   contacto. Reutiliza los tokens de diseño de vibes.css.
   ========================================================================= */

/* ---------- HERO: recorte de Natanael AL LADO del texto ---------- */
html {
    scroll-padding-top: calc(var(--headerHeight) + 1rem);
}
body {
    overflow-x: hidden;
}
.me {
    color: inherit;
    font: inherit;
}
.skip-link {
    background: var(--color-fill);
    border-radius: .5rem;
    color: var(--color-bg);
    font-size: var(--size-s);
    font-weight: 700;
    left: 1rem;
    padding: .7rem 1rem;
    position: fixed;
    top: 1rem;
    transform: translateY(-140%);
    transition: transform .18s ease;
    z-index: 1000;
}
.skip-link:focus {
    transform: translateY(0);
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(var(--cb-highlight), .78);
    outline-offset: .22em;
}
.mast:before { display: none !important; }       /* sin foto de fondo */
.mast .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-l);
    min-height: min(820px, calc(100svh - var(--headerHeight)));
    padding-block: var(--size-l);
}
.mast h1 {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    overflow-wrap: anywhere;
}
.mast-photo {
    flex: 0 0 auto;
    width: clamp(300px, 42vw, 540px);
    position: relative;
    align-self: center;
}
.mast-photo img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 26px 48px rgba(6, 50, 57, .24));
}
.mast-photo:before {                              /* halo suave detrás del recorte */
    content: "";
    position: absolute;
    inset: 4% -8% -2% -8%;
    background: radial-gradient(56% 52% at 52% 44%, rgba(124,169,184,.5), transparent 72%);
    z-index: -1;
    border-radius: 50%;
    filter: blur(8px);
}
@media screen and (width < 900px) {
    .mast .wrap {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: var(--size-m);
        min-height: calc(100svh - var(--headerHeight));
        padding-block: 2.5rem 3rem;
        text-align: center;
    }
    .mast h1 {
        flex: none;
        max-width: 13.5em;
        text-align: center;
    }
    .mast-photo { flex: none; width: min(68vw, 320px); align-self: center; }
}
@media screen and (width < 480px) {
    .mast .wrap {
        gap: 1.1rem;
        min-height: calc(100svh - var(--headerHeight));
        padding-block-end: 2.25rem;
    }
    .mast h1 {
        font-size: 2rem;
        line-height: 1.16;
        max-width: 11.5em;
    }
    .mast-photo {
        width: min(70vw, 260px);
    }
}

/* ---------- INTRO centrado ---------- */
section[data-section=intro] {
    margin-inline-start: 0;
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}
section[data-section=intro] .btn-row { justify-content: center; }

/* ---------- REVEAL elegante al hacer scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* botones / CTA reutilizables */
.btn-row { display: flex; flex-wrap: wrap; gap: .75em 1em; margin-block-start: 1.5em; align-items: center; }
.btn {
    display: inline-block;
    font-weight: 600;
    font-size: var(--size-s);
    padding: .7em 1.25em;
    border-radius: .6em;
    background: rgba(var(--cb-highlight), 1);
    color: var(--color-bg);
    transition: transform .17s ease, box-shadow .21s ease, background .2s ease;
    box-shadow: rgba(var(--cb-highlight), .28) 0 8px 24px;
}
.btn:hover { transform: translateY(-2px); box-shadow: rgba(var(--cb-highlight), .36) 0 12px 30px; }
.btn:active { transform: translateY(0); }
.btn.ghost { background: transparent; color: var(--color-fill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-fill), transparent 70%); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-fill), transparent 40%); }
.cv-links { font-size: var(--size-s); color: var(--color-fill-light); margin-block-start: 1em; }
.cv-links a { font-weight: 600; }

/* ---------- SERVICIOS ---------- */
section[data-section=services] { margin-inline-start: 0; }
.services { display: grid; grid-template-columns: 1fr; }
.service {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    gap: 0 var(--size-m);
    padding-block: var(--size-m);
    border-block-start: 1px solid color-mix(in srgb, var(--color-fill), transparent 88%);
}
.service:first-child { border-block-start: none; padding-block-start: 0; }
.service .num { font-family: var(--font-mono); color: var(--color-fill-light); font-size: var(--size-s); padding-block-start: .35em; }
.service h3 { font-size: var(--size-m); margin-block-end: .35em; line-height: 1.25; }
.service p { font-size: var(--size-s); color: color-mix(in srgb, var(--color-fill), transparent 8%); }
.method { margin-block-start: var(--size-l); font-size: var(--size-s); color: color-mix(in srgb, var(--color-fill), transparent 8%); }
.method .tag { margin-inline-end: .4em; }
@media screen and (width < 768px) {
    .service { grid-template-columns: 1fr; gap: .2em; }
    .service .num { padding-block-start: 0; }
    .service h3 { font-size: 1.2rem; }
}

/* ---------- LANDINGS / PRUEBAS / FAQ ---------- */
.eyebrow {
    color: var(--color-fill-light);
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--size-s);
    margin-block-end: .8em;
}
.proof-section,
.faq-section {
    margin-inline-start: 0;
}
.proof-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: color-mix(in srgb, var(--color-fill), transparent 88%);
}
.proof-grid article {
    background: var(--color-bg);
    padding: clamp(1.1rem, 2vw, 1.8rem);
}
.proof-grid h3,
.case-grid h3 {
    font-size: 1.08rem;
    margin-block-end: .45em;
}
.proof-grid p,
.case-grid p,
.faq-list p,
.process-list span,
.route-card p,
.final-cta p {
    font-size: var(--size-s);
    color: color-mix(in srgb, var(--color-fill), transparent 10%);
}
.route-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-inline-start: 0;
    background: color-mix(in srgb, var(--color-fill), transparent 88%);
}
.route-card {
    background: var(--color-bg);
    padding: clamp(1.35rem, 3vw, 2.4rem);
}
.route-card h2 {
    font-size: clamp(1.55rem, 3.2vw, 2.8rem);
    margin-block-end: .45em;
}
.route-card .btn {
    margin-block-start: 1.3em;
}
.faq-list {
    border-block-start: 1px solid color-mix(in srgb, var(--color-fill), transparent 86%);
}
.faq-list details {
    border-block-end: 1px solid color-mix(in srgb, var(--color-fill), transparent 86%);
}
.faq-list summary {
    cursor: pointer;
    font-size: var(--size-m);
    font-weight: 700;
    line-height: 1.2;
    list-style: none;
    padding: .85em 2.1em .85em 0;
    position: relative;
}
.faq-list summary::-webkit-details-marker {
    display: none;
}
.faq-list summary:after {
    content: "+";
    color: var(--color-fill-light);
    font-family: var(--font-mono);
    position: absolute;
    right: .2em;
    top: .82em;
}
.faq-list details[open] summary:after {
    content: "-";
}
.faq-list p {
    max-width: 760px;
    padding-block: 0 1.15em;
}
.process-section {
    margin-inline-start: 0;
}
.process-section h2 {
    margin-block-end: var(--cvGap);
}
.process-list {
    --node: 2.75rem;
    --pgap: clamp(1.6rem, 3vw, 2.75rem);
    counter-reset: process;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pgap);
    list-style: none;
}
.process-list li {
    counter-increment: process;
    position: relative;
    padding-block-start: calc(var(--node) + 1.05rem);
}
.process-list li::before {                 /* nodo numerado */
    content: counter(process, decimal-leading-zero);
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    display: grid;
    place-items: center;
    width: var(--node);
    height: var(--node);
    border-radius: 50%;
    background: rgba(var(--cb-highlight), 1);
    color: var(--color-bg);
    font-family: var(--font-mono);
    font-size: .82rem;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(var(--cb-highlight), .26);
    z-index: 1;
}
.process-list li:not(:last-child)::after { /* conector de progresión */
    content: "";
    position: absolute;
    inset-block-start: calc(var(--node) / 2 - 1px);
    inset-inline-start: var(--node);
    inset-inline-end: calc(var(--pgap) * -1);
    height: 2px;
    background: linear-gradient(to right, rgba(var(--cb-highlight), .45), rgba(var(--cb-highlight), .12));
}
.process-list strong {
    display: block;
    font-size: var(--size-m);
    line-height: 1.2;
    margin-block-end: .35em;
}
.process-list span {
    display: block;
}
.final-cta {
    margin-inline-start: 0;
    max-width: 920px;
}
.final-cta h2 {
    margin-block-end: .45em;
}
.case-page .mast-photo img {
    aspect-ratio: 4 / 5;
    border-radius: 12px;
    object-fit: cover;
    object-position: top center;
    box-shadow: #00000012 0 0 0 1px, #0000002e 0 20px 54px;
}
.case-study {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: var(--innerPad);
    margin-inline-start: 0;
    align-items: start;
}
.case-study.flip {
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
}
.case-study.flip .case-copy {
    order: 2;
}
.case-study.flip .case-shot {
    order: 1;
}
.case-copy h2 {
    margin-block-end: .35em;
}
.case-copy .lead {
    font-size: var(--size-m);
    margin-block-end: var(--size-m);
}
.case-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem 1.6rem;
    margin-block: var(--size-m);
}
.case-shot {
    border-radius: 12px;
    box-shadow: #00000012 0 0 0 1px, #0000002e 0 20px 54px;
    height: min(70vh, 720px);
    max-height: 720px;
    overflow: hidden;
}
.case-shot img {
    height: 100%;
    object-fit: cover;
    object-position: top center;
}
@media screen and (width < 1100px) {
    .proof-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .case-study,
    .case-study.flip {
        grid-template-columns: 1fr;
        gap: var(--size-l);
    }
    .case-study.flip .case-copy,
    .case-study.flip .case-shot {
        order: initial;
    }
    .case-shot {
        height: min(62vh, 560px);
        max-height: 560px;
    }
}
@media screen and (width < 760px) {
    .proof-grid,
    .route-section,
    .case-grid {
        grid-template-columns: 1fr;
    }
    .faq-list summary {
        font-size: 1.2rem;
    }
}

/* Proceso: timeline vertical en pantallas estrechas */
@media screen and (width < 900px) {
    .process-list {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .process-list li {
        min-height: var(--node);
        padding: 0 0 var(--size-m) calc(var(--node) + 1.1rem);
    }
    .process-list li:last-child {
        padding-block-end: 0;
    }
    .process-list li:not(:last-child)::after {  /* línea vertical */
        inset-block-start: var(--node);
        inset-block-end: 0;
        inset-inline-start: calc(var(--node) / 2 - 1px);
        inset-inline-end: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(to bottom, rgba(var(--cb-highlight), .45), rgba(var(--cb-highlight), .12));
    }
}

/* ---------- CARRUSEL HORIZONTAL POR SCROLL ---------- */
.hscroll {
    position: relative;
    width: 100%;
    background:
        radial-gradient(900px 500px at 80% -10%, rgba(124,169,184,.16), transparent 60%),
        rgba(var(--cb-highlight), .05);
    /* height la fija el JS en escritorio */
}
.hscroll-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.hscroll-track {
    display: flex;
    align-items: center;
    gap: var(--size-l);
    padding-inline: var(--outerPad);
    will-change: transform;
}
.hpanel { flex: 0 0 auto; }
.hpanel-intro { width: min(36vw, 480px); }
.hpanel-intro .eyebrow { font-family: var(--font-mono); font-size: var(--size-s); color: var(--color-fill-light); }
.hpanel-intro h2 { font-size: clamp(var(--size-l), 5vw, 76px); line-height: 1.08; margin-block: .25em .4em; }
.hpanel-intro p { color: color-mix(in srgb, var(--color-fill), transparent 12%); font-size: var(--size-m); }
.hpanel-end { width: min(34vw, 420px); }
.hpanel-end h3 { font-size: var(--size-l); line-height: 1.15; margin-block-end: .6em; }

.hcard { flex: 0 0 auto; width: min(80vw, 440px); color: inherit; text-decoration: none; }
.hcard .frame {
    height: min(66vh, 600px);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: #00000012 0 0 0 1px, #0000002e 0 20px 54px;
    transition: transform .3s ease, box-shadow .3s ease;
}
.hcard:hover .frame { transform: translateY(-5px); box-shadow: #00000012 0 0 0 1px, #00000040 0 26px 64px; }
.hcard .bar { display: flex; align-items: center; gap: .5rem; padding: .55rem .8rem; background: #f3f4f3; border-bottom: 1px solid #0000000f; }
.hcard .dots { display: flex; gap: 5px; }
.hcard .dots i { width: 9px; height: 9px; border-radius: 50%; background: #d3d6d6; }
.hcard .url { font-family: var(--font-mono); font-size: .72rem; color: var(--color-fill-light); }
.hcard .shot { position: relative; height: calc(100% - 2.1rem); overflow: hidden; }
.hcard .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: object-position 5s ease; display: block; }
.hcard:hover .shot img { object-position: bottom center; }
.hcard .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; margin-block-start: .9em; }
.hcard h3 { font-size: var(--size-m); font-weight: 700; }
.hcard .cat { color: var(--color-fill-light); font-size: .8rem; font-weight: 500; white-space: nowrap; }

/* Fallback móvil: swipe nativo, sin pin */
@media screen and (width < 900px) {
    .hscroll { height: auto !important; }
    .hscroll-sticky { position: static; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-block: var(--size-l); }
    .hscroll-track { transform: none !important; }
    .hpanel-intro, .hpanel-end { width: 76vw; }
    .hcard { width: 80vw; scroll-snap-align: center; }
    .hcard .frame { height: 58vh; }
}
@media screen and (width < 520px) {
    .hscroll-track {
        gap: 1rem;
        padding-inline: 1rem;
    }
    .hpanel-intro, .hpanel-end,
    .hcard {
        width: calc(100vw - 2rem);
    }
    .hcard .frame {
        border-radius: 10px;
        height: min(62vh, 520px);
    }
    .hcard .url {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .hcard .meta {
        align-items: flex-start;
        flex-direction: column;
        gap: .25rem;
    }
    .hcard .cat {
        white-space: normal;
    }
}

/* ---------- SOBRE MÍ ---------- */
section[data-section=more] { margin-inline-start: 0; }
.about-grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: var(--innerPad); align-items: start; }
.about-bio p:not(:last-child) { margin-block-end: 1em; }
.about-facts { font-size: var(--size-s); }
.about-facts li { display: flex; justify-content: space-between; gap: 1.5em; padding: .7em 0; border-block-end: 1px solid color-mix(in srgb, var(--color-fill), transparent 88%); }
.about-facts li:last-child { border-block-end: none; }
.about-facts .k { color: var(--color-fill-light); font-weight: 500; white-space: nowrap; }
.about-facts .v { text-align: right; font-weight: 600; }
@media screen and (width < 900px) { .about-grid { grid-template-columns: 1fr; gap: var(--size-l); } }
@media screen and (width < 520px) {
    .about-facts li,
    .contact-list li {
        align-items: flex-start;
        flex-direction: column;
        gap: .2em;
    }
    .about-facts .v {
        text-align: left;
    }
}

/* ---------- CONTACTO ---------- */
section[data-section=contact] { margin-inline-start: 0; }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--innerPad); align-items: start; }
.contact-info p { font-size: var(--size-m); margin-block-end: var(--size-m); }
.contact-list { font-size: var(--size-s); }
.contact-list li { display: flex; justify-content: space-between; gap: 1em; padding: .65em 0; border-block-end: 1px solid color-mix(in srgb, var(--color-fill), transparent 88%); }
.contact-list li:last-child { border-block-end: none; }
.contact-list .k { color: var(--color-fill-light); font-weight: 500; }

.contact-form { display: flex; flex-direction: column; gap: .9em; }
.contact-form label { display: flex; flex-direction: column; gap: .35em; font-size: .8rem; font-weight: 600; color: var(--color-fill-light); }
.contact-form input, .contact-form textarea {
    font: inherit; font-size: var(--size-s); font-weight: 400; color: var(--color-fill);
    background: color-mix(in srgb, #fff, transparent 35%);
    border: 1px solid color-mix(in srgb, var(--color-fill), transparent 82%);
    border-radius: .55em; padding: .7em .85em; transition: border-color .2s ease, background .2s ease;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: rgba(var(--cb-highlight), .8); background: #fff; }
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .btn { border: 0; align-self: flex-start; cursor: pointer; }
.contact-form .hp { position: absolute; left: -9999px; }
.form-status { font-size: var(--size-s); min-height: 1.2em; }
.form-status.ok { color: #1c7a3f; }
.form-status.err { color: #b03636; }
@media screen and (width < 900px) { .contact-grid { grid-template-columns: 1fr; gap: var(--size-l); } }
@media screen and (width < 520px) {
    .btn-row {
        display: grid;
        grid-template-columns: 1fr;
    }
    .btn,
    .contact-form .btn {
        text-align: center;
        width: 100%;
    }
    .contact-list a,
    .contact-list span:last-child {
        overflow-wrap: anywhere;
    }
    .contact-form input,
    .contact-form textarea {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }