:root {
    --bg-color: #0b347a;
    --text-color: #ffffff;
    --apple-btn-bg: rgba(255, 255, 255, 0.1);
    --apple-btn-hover: rgba(255, 255, 255, 0.2);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background-color: var(--dynamic-bg, #1e534f);
    background-image: radial-gradient(circle at 30% 50%, transparent 0%, rgba(0,0,0,0.7) 60%, rgba(0,0,0,0.9) 100%);
    color: var(--text-color);
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color 0.8s ease;
}

/* Navbar */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 140px; /* Separado de los bordes */
    background: transparent;
    position: relative;
    z-index: 100;
}
.logo {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.logo-text {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -1px;
    color: white;
}
.logo-highlight {
    color: #4da6ff; /* Color azul cian premium */
    animation: neon-short-circuit 5s infinite;
}

/* Efecto de cortocircuito (Flicker) para el 404 */
@keyframes neon-short-circuit {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        color: #4da6ff;
        text-shadow: 0 0 5px rgba(77, 166, 255, 0.8), 0 0 15px rgba(77, 166, 255, 0.4);
    }
    20%, 24%, 55% {
        color: #1a2a40; /* Apagado parcial */
        text-shadow: none;
    }
    70%, 72% {
        color: #050a12; /* Apagado por completo casi fundido con el fondo */
        text-shadow: none;
    }
}
.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
}
.nav-links a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.2px;
}
.nav-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}
.search-btn {
    background: var(--apple-btn-bg);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s;
}
.search-btn:hover { background: var(--apple-btn-hover); }
.search-btn svg { width: 18px; height: 18px; }
.apple-music-btn {
    background: var(--apple-btn-bg);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background 0.3s;
}
.apple-music-btn:hover { background: var(--apple-btn-hover); }

/* Hero Section */
.hero {
    display: flex;
    padding: 60px 140px 40px 140px; /* Reducido para no chocar con el navbar */
    height: calc(100vh - 90px);
    align-items: flex-start;
}
.hero-content {
    flex: 1;
    max-width: 600px;
    z-index: 10;
    margin-top: 0; /* Reseteado para evitar solapamiento */
}
.subtitle {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 20px;
    text-transform: uppercase;
    opacity: 0;
    animation: hero-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
.title {
    font-size: 72px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -2px;
    opacity: 0;
    animation: hero-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards;
}
.hero-carousel-container {
    opacity: 0;
    animation: hero-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

@keyframes hero-in {
    from {
        opacity: 0;
        transform: translateY(28px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Reveal on scroll (aplicado vía JS con IntersectionObserver) */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-stagger.is-visible > * {
    animation: hero-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.reveal-stagger.is-visible > *:nth-child(1) { animation-delay: 0s; }
.reveal-stagger.is-visible > *:nth-child(2) { animation-delay: 0.08s; }
.reveal-stagger.is-visible > *:nth-child(3) { animation-delay: 0.16s; }
.reveal-stagger.is-visible > *:nth-child(4) { animation-delay: 0.24s; }

/* 3D Roulette Carousel */
.hero-carousel-container {
    flex: 1.2;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    perspective: 1600px;
    margin-top: 0; /* Reseteado */
}

.scene {
    width: 540px;
    height: 420px;
    position: relative;
    margin-bottom: 40px; /* space for dots */
}

.carousel-positioner {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
}

.carousel-3d {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Nav Arrows */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    z-index: 10;
    transition: color 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-btn:hover {
    color: white;
}
.nav-btn svg { width: 30px; height: 30px; }
.prev-btn { left: -150px; }
.next-btn { right: -150px; }

/* Dots */
.carousel-pagination {
    display: flex;
    gap: 8px;
    z-index: 10;
}
.dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.3s;
}
.dot.active {
    background: white;
    transform: scale(1.3);
}

.carousel__cell {
    position: absolute;
    width: 540px;
    height: 420px;
    left: 0;
    top: -20px;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    padding: 20px;
    backface-visibility: hidden;
    transition: filter 1.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    /* bgColor is set via JS */
}

.carousel__cell.is-active {
    box-shadow: 0 25px 60px rgba(0,0,0,0.55), 0 0 40px rgba(77, 166, 255, 0.15);
}

.cell-img {
    width: 100%;
    aspect-ratio: 16 / 9; /* Formato panorámico 1920x1080 */
    object-fit: cover;
    border-radius: 16px;
}

.cell-info {
    color: white;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: left;
    margin-top: 15px;
}

.cell-title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 2px;
}

.cell-artist {
    font-size: 15px;
    color: rgba(255,255,255,0.75);
    margin-bottom: 12px;
}

.cell-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cell-stats {
    font-size: 13px;
    color: rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    font-weight: 600;
}
.cell-stats svg {
    width: 14px;
    height: 14px;
    margin-right: 6px;
}

.share-btn {
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    cursor: pointer;
    transition: background 0.3s;
}
.share-btn:hover {
    background: rgba(255,255,255,0.3);
}
.share-btn svg {
    width: 16px;
    height: 16px;
}

/* --- Marquee de Tecnologías --- */
.tech-marquee {
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    padding: 35px 0;
    overflow: hidden;
    position: relative;
    display: flex;
    z-index: 5;
    margin-top: -215px; /* Subido a petición del usuario para ocupar el espacio vacío */
}

/* Efecto de desvanecimiento en los bordes para que los logos no se corten bruscamente */
.tech-marquee::before,
.tech-marquee::after {
    content: '';
    position: absolute;
    top: 0;
    width: 150px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}
.tech-marquee::before {
    left: 0;
    background: linear-gradient(to right, rgba(6, 18, 45, 0.8) 0%, transparent 100%);
}
.tech-marquee::after {
    right: 0;
    background: linear-gradient(to left, rgba(6, 18, 45, 0.8) 0%, transparent 100%);
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: 80px;
    padding-right: 80px; /* Mismo espacio que el gap para unión perfecta */
    animation: scroll-marquee 25s linear infinite;
}

img.tech-logo {
    height: 60px; /* Un poco más grandes para que se lea la letra */
    width: auto;
    object-fit: contain;
    transition: transform 0.3s, filter 0.3s;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
    cursor: pointer;
}
img.tech-logo:hover {
    transform: scale(1.15);
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.2));
}

@keyframes scroll-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* --- Nuevas Secciones Portafolio --- */

.section-header {
    text-align: center;
    margin-bottom: 60px;
}
.section-header h2 {
    font-size: 42px;
    font-weight: 900;
    margin-bottom: 15px;
    letter-spacing: -1px;
}
.section-header p {
    font-size: 18px;
    color: rgba(255,255,255,0.7);
}

/* Servicios Section */
.services-section {
    padding: 100px 140px;
    position: relative;
    z-index: 2;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.4) 100%);
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}
.service-card.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px 30px;
    transition: transform 0.3s, background 0.3s;
}
.service-card.glass:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.1);
}
.service-card svg {
    width: 45px;
    height: 45px;
    color: #4da6ff;
    margin-bottom: 25px;
}
.service-card h3 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 15px;
}
.service-card p {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
}

/* About Section (Sobre mí) */
.about-section {
    padding: 100px 140px;
    position: relative;
    z-index: 2;
}
.about-content {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 70px;
}
.about-avatar {
    flex-shrink: 0;
}
.about-avatar-circle {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(77,166,255,0.4);
    box-shadow: 0 25px 60px rgba(77,166,255,0.2);
}
.about-text .subtitle {
    color: #4da6ff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.about-text h2 {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.5px;
    margin-bottom: 20px;
}
.about-text > p {
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    line-height: 1.7;
    margin-bottom: 35px;
}
.about-stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 35px;
}
.about-stat {
    display: flex;
    flex-direction: column;
}
.about-stat strong {
    font-size: 30px;
    font-weight: 900;
    color: white;
}
.about-stat span {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    max-width: 140px;
}
.about-cta {
    display: inline-block;
    background: #4da6ff;
    color: #050a12;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 28px;
    border-radius: 12px;
    text-decoration: none;
    transition: transform 0.2s, background 0.3s;
}
.about-cta:hover {
    background: #2a8bf2;
    transform: translateY(-2px);
}

/* FAQ Section */
.faq-section {
    padding: 100px 140px;
    background: rgba(0,0,0,0.6);
}
.faq-list {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.faq-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 5px 25px;
    transition: background 0.3s, border-color 0.3s;
}
.faq-item:hover {
    background: rgba(255, 255, 255, 0.05);
}
.faq-item[open] {
    background: rgba(77, 166, 255, 0.05);
    border-color: rgba(77, 166, 255, 0.25);
}
.faq-item summary {
    padding: 22px 30px 22px 0;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    font-weight: 400;
    color: #4da6ff;
    transition: transform 0.3s;
}
.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}
.faq-item p {
    font-size: 15px;
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
    padding-bottom: 24px;
    padding-right: 30px;
}

/* Benefits Section */
.benefits-section {
    padding: 100px 140px;
    background: rgba(0,0,0,0.6);
}
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.benefit-item .icon-wrapper {
    width: 70px;
    height: 70px;
    background: rgba(77, 166, 255, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 20px;
    color: #4da6ff;
}
.benefit-item svg { width: 30px; height: 30px; }
.benefit-item h4 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 10px;
}
.benefit-item p {
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
}

/* CTA Section */
.cta-section {
    padding: 120px 140px;
    text-align: center;
    background: linear-gradient(135deg, rgba(6,28,71,0.9) 0%, rgba(11,52,122,0.9) 100%);
    border-top: 1px solid rgba(255,255,255,0.05);
}
.cta-section h2 {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 20px;
    letter-spacing: -1px;
}
.cta-section p {
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.6;
}
.cta-btn {
    display: inline-block;
    background: #25D366; /* Verde oficial de WhatsApp */
    color: white;
    text-decoration: none;
    border: none;
    padding: 18px 40px;
    font-size: 18px;
    font-weight: 800;
    border-radius: 30px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
}
.cta-btn:hover {
    background: #128C7E;
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(37, 211, 102, 0.6);
}

/* Payment Methods */
.payment-methods {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.payment-methods p {
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
}
.payment-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}
.pay-logo {
    height: 35px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s;
    background: white;
    padding: 5px 10px;
    border-radius: 8px;
}
.pay-logo:hover {
    transform: scale(1.1);
}
.pay-logo-round {
    height: 45px;
    width: 45px;
    padding: 0;
    border-radius: 50%;
    object-fit: cover;
}

.local-pay {
    font-family: Arial, sans-serif;
    font-weight: 900;
    font-size: 24px;
    padding: 4px 18px;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: transform 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
}
.local-pay:hover {
    transform: scale(1.1);
}
.local-pay.yape { 
    background: #742384; /* Morado original Yape */
    letter-spacing: -1px;
}
.local-pay.plin { 
    background: #00d2d3; /* Celeste original Plin */
    color: #fff; 
    font-style: italic;
    padding: 4px 22px;
}

/* Footer */
.footer {
    padding: 60px 140px;
    background: #030a17;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer-content p {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}


/* FAB */
.fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    align-items: flex-end;
    gap: 15px;
    z-index: 100;
}
.fab-tooltip {
    background: white;
    color: black;
    padding: 15px 25px 15px 20px;
    border-radius: 12px;
    width: 260px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    position: relative;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 5px;
}
.fab-tooltip strong {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 800;
}
.fab-tooltip-short {
    display: none; /* Solo se usa en móvil, ver media query */
}
.close-tooltip {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #999;
}
.fab-button {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #25D366;
    border: none;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s;
}
.fab-button:hover { transform: scale(1.05); }
.fab-button svg { width: 35px; height: 35px; }

/* Modal de video (al hacer clic en una tarjeta del portafolio) */
.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5,10,18,0.95);
    z-index: 9999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
.video-modal-rotate-hint {
    display: none; /* Solo se muestra en móvil, ver media query */
}
.video-modal-close {
    position: absolute;
    top: 30px;
    right: 40px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
.video-modal-video {
    max-width: 80%;
    max-height: 80%;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}

/* --- RESPONSIVE DESIGN (MODO CELULAR) ---
   Se activa por ancho de pantalla NORMAL, pero también por "es una pantalla
   táctil sin mouse" (hover:none + pointer:coarse). Esto último cubre el caso
   de un celular con "Sitio de escritorio" activado en el navegador, que
   engaña al ancho de viewport para que parezca una PC, pero sigue siendo
   una pantalla táctil real y por eso lo detectamos igual. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) and (max-width: 1024px) {
    /* Navbar */
    .navbar {
        padding: 20px 20px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        transform: translateY(-100%);
        transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s;
    }
    .navbar.scrolled {
        transform: translateY(0);
        background: rgba(5, 10, 18, 0.9);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    .logo-text {
        font-size: 20px;
    }
    .nav-links {
        display: none; /* Minimalista: ocultamos los links en móvil */
    }
    .apple-music-btn {
        padding: 8px 15px;
        font-size: 12px;
    }
    /* Hero */
    .hero {
        flex-direction: column;
        padding: 40px 20px 40px 20px; /* Un poco más de espacio superior al no estar el navbar */
        height: auto;
        min-height: 100vh;
        align-items: center;
        text-align: center;
        overflow: hidden; /* Evitar scroll horizontal */
    }
    .hero-content {
        margin-top: 40px;
        margin-bottom: 20px;
    }
    .title {
        font-size: 42px;
        letter-spacing: -1px;
    }
    .subtitle {
        font-size: 12px;
        margin-bottom: 15px;
    }

    /* Ruleta 3D */
    .hero-carousel-container {
        width: 100%;
        margin-top: 20px;
    }
    /* La animación hero-in en el contenedor sobreescribe cualquier transform puesto ahí,
       por eso el escalado se aplica en .scene en su lugar */
    .scene {
        transform: scale(0.58);
        transform-origin: top center;
        margin-bottom: -180px; /* Compensar el espacio vacío que deja el escalado */
    }
    .nav-btn {
        display: none; /* Ocultar flechas, en móvil estorban y rompen el layout */
    }
    .carousel-pagination {
        transform: scale(1.2); /* Agrandar un poco los puntos */
        margin-top: 40px;
    }

    /* Marquee: sin margen negativo fijo, así siempre queda después del hero
       (que ocupa el 100vh completo) sin importar la altura de pantalla del celular */
    .tech-marquee {
        margin-top: 0;
        padding: 20px 0;
    }
    img.tech-logo {
        height: 40px;
    }
    .marquee-track {
        gap: 40px;
        padding-right: 40px;
    }

    /* Sections */
    .section-header h2 {
        font-size: 32px;
    }
    .services-section,
    .benefits-section,
    .about-section,
    .faq-section,
    .cta-section,
    .footer {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    /* Sobre mí: apilado en columna y centrado en móvil */
    .about-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .about-avatar-circle {
        width: 140px;
        height: 140px;
        font-size: 42px;
    }
    .about-text h2 {
        font-size: 26px;
    }
    .about-stats {
        justify-content: center;
    }
    .about-stat {
        align-items: center;
    }

    /* FAQ: menos padding para que quepa en pantallas chicas */
    .faq-item {
        padding: 5px 18px;
    }
    .faq-item summary {
        font-size: 15px;
        padding: 18px 26px 18px 0;
    }
    .faq-item p {
        font-size: 14px;
        padding-right: 26px;
    }

    .cta-section h2 {
        font-size: 32px;
    }
    .cta-section p {
        font-size: 15px;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    /* FAB */
    /* Apilar la burbuja arriba del botón (en vez de al lado) para que la colita apunte bien */
    .fab-container {
        flex-direction: column;
        align-items: flex-end;
    }
    /* Mensaje corto y compacto tipo burbuja de chat, no el cuadro grande de escritorio */
    .fab-tooltip {
        display: none;
        width: auto;
        max-width: 165px;
        padding: 10px 26px 10px 14px;
        border-radius: 14px;
        font-size: 12.5px;
        line-height: 1.3;
        margin-bottom: 10px;
        background: #1fae54;
        color: white;
        box-shadow: 0 12px 28px rgba(0,0,0,0.35);
    }
    /* Colita apuntando hacia el botón, como un globo de chat */
    .fab-tooltip::after {
        content: '';
        position: absolute;
        bottom: -7px;
        right: 22px;
        width: 14px;
        height: 14px;
        background: #1fae54;
        transform: rotate(45deg);
        border-radius: 0 0 4px 0;
    }
    .fab-tooltip strong {
        display: none; /* En móvil solo el mensaje corto, sin título */
    }
    .fab-tooltip-long {
        display: none;
    }
    .fab-tooltip-short {
        display: block;
        margin: 0;
        font-weight: 700;
    }
    .close-tooltip {
        top: 6px;
        right: 8px;
        font-size: 14px;
        color: rgba(255,255,255,0.8);
    }
    .fab-container.is-visible .fab-tooltip {
        display: block;
    }

    /* Oculto hasta que el usuario empiece a deslizar (solo en móvil) */
    .fab-container {
        opacity: 0;
        transform: translateY(20px);
        pointer-events: none;
        transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .fab-container.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Modal de video: ocupar casi toda la pantalla del celular */
    .video-modal-video {
        max-width: 94vw;
        max-height: 80vh;
        border-radius: 12px;
    }
    .video-modal-close {
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    .video-modal-rotate-hint {
        display: block;
        color: rgba(255,255,255,0.8);
        font-size: 13px;
        font-weight: 600;
        text-align: center;
        margin-bottom: 14px;
        padding: 0 20px;
    }
}

/* ============================================================
   LUNARO — Estilos añadidos: hero, planes, chips de tecnología
   ============================================================ */

/* --- Hero: titular más corto y llamada a la acción visible --- */
.hero-lead {
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    max-width: 46ch;
    margin: 22px 0 0;
    opacity: 0;
    animation: hero-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s forwards;
}
.hero-lead strong {
    color: #fff;
    font-weight: 800;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
    opacity: 0;
    animation: hero-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards;
}
.hero-btn-primary,
.hero-btn-ghost {
    display: inline-block;
    padding: 14px 26px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.hero-btn-primary {
    background: #25D366;
    color: #06301a;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.28);
}
.hero-btn-primary:hover {
    transform: translateY(-2px);
    background: #3ae07a;
}
.hero-btn-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
}
.hero-btn-ghost:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.8);
}

/* --- Chips de tecnología en las tarjetas del portafolio --- */
.cell-stats {
    flex-wrap: wrap;
    gap: 6px;
}
.tech-chip {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
}

/* --- Sección de planes --- */
.plans-section {
    padding: 100px 8vw;
}
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 22px;
    max-width: 1180px;
    margin: 0 auto;
    align-items: start;
}
.plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.plan-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.26);
}
.plan-featured {
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(37, 211, 102, 0.55);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.plan-badge {
    position: absolute;
    top: -13px;
    left: 28px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #25D366;
    color: #06301a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.plan-name {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 10px;
}
.plan-price {
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #fff;
}
.plan-cur {
    font-size: 24px;
    font-weight: 700;
    vertical-align: super;
    margin-right: 3px;
    color: rgba(255, 255, 255, 0.65);
}
.plan-for {
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.66);
    margin: 14px 0 20px;
}
.plan-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.plan-list li {
    position: relative;
    padding-left: 26px;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
}
.plan-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 8px;
    border-left: 2px solid #25D366;
    border-bottom: 2px solid #25D366;
    transform: rotate(-45deg);
}
.plan-note {
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 22px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.plan-note-in {
    color: rgba(37, 211, 102, 0.9);
}
.plan-btn {
    margin-top: auto;
    display: block;
    text-align: center;
    padding: 14px 20px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.plan-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.7);
}
.plan-btn-solid {
    background: #25D366;
    border-color: #25D366;
    color: #06301a;
}
.plan-btn-solid:hover {
    background: #3ae07a;
    border-color: #3ae07a;
    color: #06301a;
}
.plans-foot {
    text-align: center;
    margin: 36px auto 0;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.6);
}
.plans-foot a {
    color: #25D366;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(37, 211, 102, 0.45);
}

/* --- Footer --- */
.footer-line {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 6px;
}
.footer-line a {
    color: #25D366;
    text-decoration: none;
    font-weight: 700;
}

/* --- Celular: que el titular no se coma la pantalla --- */
@media (max-width: 900px) {
    .hero {
        height: auto;
        padding: 40px 22px 30px;
    }
    .title {
        font-size: 40px;
        letter-spacing: -1px;
    }
    .hero-lead {
        font-size: 16px;
        margin-top: 16px;
    }
    .hero-actions {
        margin-top: 20px;
        gap: 10px;
    }
    .hero-btn-primary,
    .hero-btn-ghost {
        flex: 1 1 100%;
        text-align: center;
        padding: 15px 20px;
    }
    .plans-section {
        padding: 70px 20px;
    }
    .plan-price {
        font-size: 44px;
    }
}

@media (max-width: 420px) {
    .title {
        font-size: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-lead,
    .hero-actions {
        animation: none;
        opacity: 1;
    }
}

/* --- Ajuste de altura del hero para que quepa el texto + los botones --- */
.hero {
    height: auto;
    min-height: calc(100vh - 90px);
    padding-bottom: 70px;
}
.title {
    font-size: 58px;
}
.hero-content {
    max-width: 560px;
}
@media (max-width: 900px) {
    .hero {
        min-height: 0;
    }
}

/* --- Titular: en celular deja que fluya solo, sin saltos forzados --- */
@media (max-width: 900px) {
    .t-br { display: none; }
    .title {
        font-size: 32px;
        line-height: 1.12;
        text-wrap: balance;
    }
}
@media (max-width: 420px) {
    .title { font-size: 29px; }
}


/* --- Redes sociales en el footer --- */
.footer-social {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 16px;
}
.social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.social-link svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}
.social-link:hover,
.social-link:focus-visible {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.07);
}

/* --- Footer: apilado y centrado ahora que lleva redes sociales --- */
.footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}
.footer-content .logo {
    margin-bottom: 10px;
}
.footer-social {
    margin: 4px 0 10px;
}
@media (max-width: 700px) {
    .footer {
        padding: 44px 20px;
    }
}

/* --- El boton de WhatsApp del hero acompana el color de la ruleta --- */
.hero-btn-primary {
    /* Respaldo para navegadores sin color-mix */
    background: #25D366;
    color: #06301a;
    box-shadow: none;
    transition: background 0.6s ease, color 0.6s ease, transform 0.2s ease;
}
@supports (background: color-mix(in srgb, red 50%, white)) {
    .hero-btn-primary {
        /* Aclarado sobre el color activo, para que resalte contra el fondo */
        background: color-mix(in srgb, var(--dynamic-bg, #1e534f) 38%, #ffffff);
        color: color-mix(in srgb, var(--dynamic-bg, #1e534f) 78%, #000000);
    }
    .hero-btn-primary:hover {
        background: color-mix(in srgb, var(--dynamic-bg, #1e534f) 20%, #ffffff);
    }
}