/* INICIO: paisaje volcánico y dispositivos proporcionados por el usuario. */
:root { --hero-unit: min(.09765625vw, 1.8px); }
.button-arrow { display: block; width: 1.1em; height: 1.1em; flex-shrink: 0; transition: transform .25s ease; }

.intro-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    isolation: isolate;
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100svh - var(--nav-h));
    background: #080c11;
}
.intro-screen::before {
    content: '';
    position: absolute;
    inset: 0 0 clamp(70px, 8vw, 135px);
    z-index: -1;
    /* Alejar el paisaje sin cambiar el encuadre de los recortes. */
    transform: scale(.94);
    transform-origin: right center;
    mask-image: linear-gradient(180deg, transparent, #000 5%);
    background:
        linear-gradient(90deg, #070b10f5 0%, #070b10db 25%, #070b1070 44%, transparent 62%),
        linear-gradient(0deg, #080c11 0%, #080c1140 7%, transparent 16%),
        url('../img/inicio-paisaje-volcanico.webp') center center / cover no-repeat;
    pointer-events: none;
}
.intro-screen .hero-stage { position: relative; display: flex; flex: 1; overflow: hidden; }
.intro-screen .hero-stage > .container,
.intro-screen .showcase-strip > .container { width: min(86%, 1560px); max-width: none; padding-inline: 0; }
.intro-screen .hero {
    position: relative;
    display: grid;
    grid-template-columns: 43% 57%;
    align-content: center;
    gap: 0;
    padding-block: clamp(40px, 4vw, 68px) clamp(28px, 3vw, 52px);
}
.intro-screen .hero > * { min-width: 0; }
.intro-screen .hero-left { position: relative; z-index: 3; align-self: center; }
.intro-screen .hero .overline { gap: 14px; margin-bottom: 20px; color: #a6aeba; font-size: clamp(9px, .72vw, 12px); font-weight: 500; letter-spacing: .19em; }
.intro-screen .hero .overline .line { width: 35px; height: 1px; }
.intro-screen .hero h1 { margin-bottom: 24px; font-size: clamp(32px, 3.6vw, 64px); font-weight: 750; line-height: 1.05; letter-spacing: -.04em; text-wrap: initial; }
.intro-screen .hero-headline-line { display: block; white-space: nowrap; }
.intro-screen .hero-rotating-word { display: inline-grid; vertical-align: baseline; white-space: nowrap; }
.intro-screen .hero-word-measure, .intro-screen .hero-word-text { grid-area: 1 / 1; }
.intro-screen .hero-word-measure { visibility: hidden; pointer-events: none; }
.intro-screen .hero-word-text::after, .intro-screen .hero-word-measure::after { content: ''; display: inline-block; height: .85em; margin-left: .08em; border-right: 2px solid currentColor; vertical-align: -.03em; }
.intro-screen .hero-word-text::after { animation: inicio-cursor 1s step-end infinite; }
@keyframes inicio-cursor { 50% { opacity: 0; } }
.intro-screen .hero-left > p { max-width: 540px; margin-bottom: 29px; color: #a9b0bc; font-size: clamp(14px, 1.15vw, 18px); line-height: 1.5; }

/* Botones de Inicio: acción principal y acceso al portafolio. */
.intro-screen .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.intro-screen .hero-actions .btn {
    width: auto; min-height: 54px; gap: 11px; padding: 15px 24px;
    border-radius: 12px; font-size: 15px; font-weight: 700;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.intro-screen .hero-actions .btn-primary {
    min-width: 226px; color: #fff; border-color: #ff6a8740;
    background: linear-gradient(135deg, #df224d, #cf2048);
    box-shadow: inset 0 1px 0 #ffffff20, 0 6px 22px #ff365936;
}
.intro-screen .hero-actions .btn-primary:hover {
    background: linear-gradient(135deg, #e12550, #db214d);
    box-shadow: inset 0 1px 0 #ffffff24, 0 8px 26px #ff36594a;
    transform: translateY(-2px);
}
.intro-screen .hero-actions .btn-outline {
    min-width: 166px; color: #e5e7eb; border-color: #8794a280;
    background: #0a1016e6; box-shadow: inset 0 1px 0 #ffffff08;
}
.intro-screen .hero-actions .btn-outline:hover { border-color: #b4becbd9; background: #17212bf2; }
.intro-screen .hero-actions .btn:active { transform: translateY(0); }
.intro-screen .hero-actions .btn:focus-visible { outline: 2px solid #f1f5f9; outline-offset: 4px; }
.intro-screen .hero-actions .btn:hover .button-arrow { transform: translateX(3px); }
.intro-screen .hero-projects-icon { width: 18px; height: 18px; flex-shrink: 0; color: #ff6b89; }

/* Recortes PNG: la superficie y la luz provienen del paisaje real. */
.intro-screen .hero-visual { position: relative; z-index: 1; isolation: isolate; grid-column: 2; grid-row: 1 / 3; align-self: center; width: 121%; height: clamp(350px, 40vw, 660px); margin-left: -12%; }
/* El PNG ya tiene la misma perspectiva que el canto de la roca. */
.intro-screen .laptop { position: absolute; z-index: 2; left: -8%; bottom: 4%; width: 84%; }
.intro-screen .laptop-photo { display: block; width: 100%; height: auto; filter: drop-shadow(0 5px 3px #000d) drop-shadow(0 14px 10px #0008); }
.intro-screen .phone { position: absolute; z-index: 4; right: 6%; bottom: 2%; width: 35%; transform: rotate(5deg); transform-origin: 50% 95%; }
.intro-screen .phone-photo { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 2px #000e) drop-shadow(-5px 9px 6px #0009); }
.intro-screen .device-shadow { position: absolute; z-index: 1; left: 0; bottom: 3%; width: 69%; height: 2%; border-radius: 50%; background: #000e; filter: blur(5px); transform: rotate(5deg); }
.intro-screen .phone-contact-shadow { position: absolute; z-index: 3; right: 14%; bottom: 3%; width: 19%; height: 2%; border-radius: 50%; background: #000e; filter: blur(3px); }

/* Beneficios de Inicio: icono y texto, sin recuadros exteriores. */
.intro-screen .hero-benefits { position: relative; z-index: 3; grid-column: 1 / -1; grid-row: 2; width: min(56%, 900px); margin-top: 48px; }
.intro-screen .hero-benefits .features-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px; padding: 0; border: 0; }
.intro-screen .hero-benefits .feature-item {
    display: flex; gap: 14px; align-items: flex-start; min-width: 0; padding: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.intro-screen .hero-benefits .feature-item > div { min-width: 0; }
.intro-screen .hero-benefits .feature-icon {
    width: 40px; height: 40px; flex-shrink: 0; margin: 0; padding: 8px;
    color: #ff5e7d; border: 1px solid #ff6b8940; border-radius: 10px;
    background: #15121a99; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.intro-screen .hero-benefits h4 { margin: 6px 0 5px; font-size: 15px; line-height: 1.35; font-weight: 600; text-wrap: initial; }
.intro-screen .hero-benefits p { margin: 0; color: #b7c0cc; font-size: 13px; line-height: 1.6; text-shadow: 0 1px 4px #0008; }

/* Marcas sobre la transición oscura del paisaje. */
.intro-screen .showcase-strip { position: relative; z-index: 2; flex-shrink: 0; padding-block: 23px 32px; }
.intro-screen .showcase-label { display: flex; align-items: center; gap: 35px; color: #a5afba; font-size: 9px; line-height: 1.4; font-weight: 500; letter-spacing: .22em; white-space: nowrap; }
.intro-screen .showcase-label span { flex: 1; height: 1px; background: #ffffff1c; }
.intro-screen .showcase-brands { width: 100%; overflow: hidden; margin-top: 30px; }
.intro-screen .showcase-track { display: flex; width: max-content; animation: inicio-marcas 36s linear infinite; }
.intro-screen.is-inactive .showcase-track,
.intro-screen.is-inactive .hero-word-text::after { animation-play-state: paused; }
.intro-screen .showcase-group { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-around; min-width: 100vw; gap: clamp(32px, 4vw, 64px); padding-right: clamp(32px, 4vw, 64px); }
.intro-screen .showcase-brands a { display: flex; flex-shrink: 0; align-items: center; gap: 10px; white-space: nowrap; color: #aeb8c7; font-size: clamp(12px, 1vw, 16px); letter-spacing: .14em; transition: color .2s; }
.intro-screen .showcase-brands a:hover { color: #fff; }
.intro-screen .showcase-brands a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.intro-screen .showcase-brand-logo { display: block; width: clamp(112px, 9vw, 145px); height: auto; }
.intro-screen .showcase-brands a:hover .showcase-brand-logo { filter: brightness(0) invert(1); }
@keyframes inicio-marcas { to { transform: translateX(-50%); } }
.intro-screen .showcase-mark { display: block; width: 27px; height: 27px; flex-shrink: 0; }

@media (min-width: 769px) and (max-width: 1100px) {
    .intro-screen .hero h1 { font-size: clamp(28px, 3.5vw, 40px); }
    .intro-screen .hero-left > p { font-size: 13px; }
    .intro-screen .hero-actions { gap: 12px; }
    .intro-screen .hero-actions .btn { min-width: 0; min-height: 52px; padding: 14px 18px; font-size: 15px; }
    .intro-screen .hero-benefits { width: 62%; margin-top: 35px; }
    .intro-screen .hero-benefits .features-bar { gap: 12px; }
    .intro-screen .hero-benefits .feature-item { flex-direction: column; gap: 10px; padding: 0; }
    .intro-screen .hero-benefits h4 { margin-top: 0; font-size: 14px; }
}
@media (max-width: 768px) {
    .intro-screen::before {
        inset: 0;
        transform: none;
        mask-image: none;
        background:
            linear-gradient(180deg, #080c11f5 0%, #080c11e6 30%, #080c1150 50%, #080c1110 66%, #080c11 91%),
            url('../img/inicio-paisaje-volcanico.webp') 65% 55% / auto 80% no-repeat;
    }
    .intro-screen .hero-stage > .container, .intro-screen .showcase-strip > .container { width: calc(100% - 40px); }
    .intro-screen .hero { grid-template-columns: 1fr; padding-block: 38px 20px; }
    .intro-screen .hero h1 { font-size: clamp(31px, 6.8vw, 49px); line-height: 1.07; }
    .intro-screen .hero-headline-line { white-space: normal; }
    .intro-screen .hero .overline { font-size: 9px; }
    .intro-screen .hero-left > p { max-width: 560px; font-size: 14px; }
    .intro-screen .hero-actions { gap: 12px; }
    .intro-screen .hero-actions .btn { min-width: 0; min-height: 52px; padding-inline: 20px; font-size: 15px; gap: 10px; }
    .intro-screen .hero-visual { grid-column: 1; grid-row: 2; width: 110%; height: auto; aspect-ratio: 1.2; margin: 24px 0 0 -6%; }
    .intro-screen .laptop { left: 0; bottom: 3%; width: 96%; transform: none; }
    .intro-screen .phone { right: -1%; bottom: -2%; width: 30%; transform: none; }
    .intro-screen .device-shadow { left: 9%; bottom: 3%; width: 77%; }
    .intro-screen .phone-contact-shadow { right: 5%; bottom: 1%; width: 18%; }
    .intro-screen .hero-benefits { grid-column: 1; grid-row: 3; width: 100%; margin-top: 26px; }
    .intro-screen .hero-benefits .features-bar { grid-template-columns: 1fr; gap: 22px; }
    .intro-screen .hero-benefits .feature-item { flex-direction: row; gap: 14px; padding: 0; }
    .intro-screen .hero-benefits h4 { font-size: 15px; }
    .intro-screen .showcase-strip { padding-block: 23px 28px; }
    .intro-screen .showcase-label { gap: 12px; font-size: 8px; letter-spacing: .14em; }
    .intro-screen .showcase-brands { margin-top: 25px; }
    .intro-screen .showcase-group { gap: 32px; padding-right: 32px; }
    .intro-screen .showcase-brand-logo { width: 112px; }
    .intro-screen .showcase-brands a { font-size: 10px; }
    .intro-screen .showcase-mark { width: 21px; height: 21px; }
}
@media (max-width: 380px) {
    .intro-screen .hero h1 { font-size: 29px; }
    .intro-screen .hero-actions .btn { padding-inline: 18px; }
    .intro-screen .hero-benefits .features-bar { gap: 12px; }
}

@media (max-width: 480px) {
    .intro-screen .hero-actions { flex-direction: column; }
    .intro-screen .hero-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .intro-screen .hero-actions .btn, .intro-screen .hero-actions .button-arrow { transition: none; }
    .intro-screen .hero-actions .btn:hover, .intro-screen .hero-actions .btn:hover .button-arrow { transform: none; }
}