/* ======================================================
    ESTILOS PARA index.html
   ====================================================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 8rem 3rem 4rem;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 15% 30%, rgba(255, 51, 102, 0.07) 0%, transparent 45%),
        radial-gradient(circle at 75% 70%, rgba(255, 214, 10, 0.05) 0%, transparent 45%),
        radial-gradient(circle at 50% 10%, rgba(255, 51, 102, 0.08) 0%, transparent 40%);
    z-index: -1;
    animation: heroBackground 20s infinite alternate;
}

@keyframes heroBackground {
    0% {
        transform: scale(1) rotate(0deg);
    }

    100% {
        transform: scale(1.1) rotate(1deg);
    }
}

.hero-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-content {
    transform-style: preserve-3d;
}

/* Hero badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 51, 102, 0.06);
    border: 1px solid rgba(255, 51, 102, 0.2);
    border-radius: 999px;
    padding: 6px 16px 6px 10px;
    margin-bottom: 1.8rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    animation: fadeInDown 0.8s ease-out both;
}

.badge-dot {
    width: 7px;
    height: 7px;
    background: var(--accent-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-color);
    flex-shrink: 0;
    animation: pulseDot 1.8s ease-in-out infinite;
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 51, 102, 0.5); }
    50%       { box-shadow: 0 0 0 6px rgba(255, 51, 102, 0); }
}

.hero-title {
    font-size: clamp(2.4rem, 4.5vw, 3.4rem);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    animation: slideInRight 1s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px) rotateY(10deg);
    }

    to {
        opacity: 1;
        transform: translateX(0) rotateY(0deg);
    }
}

.hero-title-line1 {
    display: block;
    color: var(--text-tertiary);
    font-weight: 300;
}

.hero-title-accent {
    color: var(--text-primary);
    font-weight: 500;
    position: relative;
    display: inline-block;
}

.hero-title-accent::after {
    content: '';
    position: absolute;
    bottom: -0.05em;
    left: 0;
    width: 100%;
    height: 0.07em;
    background: linear-gradient(90deg, var(--accent-color), #ff6b8a);
    box-shadow: 0 0 12px var(--accent-color);
    transform: scaleX(0);
    transform-origin: left;
    animation: accentReveal 1.5s ease forwards;
    animation-delay: 0.5s;
    border-radius: 2px;
}

@keyframes accentReveal {
    to {
        transform: scaleX(1.05);
    }
}

.hero-h1 {
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.6;
    max-width: 600px;
    animation: fadeInUp 1.5s ease-out 0.3s both;
    position: relative;
    padding-left: 1rem;
}

.hero-h1::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--accent-color), #ff6b8a);
    border-radius: 2px;
    box-shadow: 0 0 20px var(--accent-color), 0 0 40px rgba(255, 51, 102, 0.3);
}

.hero-h1::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background: var(--accent-color);
    filter: blur(20px);
    opacity: 0.3;
    z-index: -1;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero CTAs */
.hero-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 2rem;
    animation: fadeInUp 1.2s ease-out 0.5s both;
}

.btn-hero-primary {
    padding: 14px 28px;
    background: linear-gradient(135deg, #ff3366, #ff6b8a);
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    box-shadow: 0 0 30px rgba(255, 51, 102, 0.3), 0 8px 20px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-hero-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 50px rgba(255, 51, 102, 0.5), 0 12px 30px rgba(0, 0, 0, 0.5);
}

.btn-hero-secondary {
    padding: 13px 24px;
    background: transparent;
    color: var(--text-primary);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-hero-secondary:hover {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
}

.btn-hero-secondary i {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.btn-hero-secondary:hover i {
    transform: translateX(4px);
}

/* Hero trust indicators */
.hero-trust {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 1.6rem;
    animation: fadeInUp 1.2s ease-out 0.8s both;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-tertiary);
    letter-spacing: 0.02em;
}

.trust-item i {
    color: var(--accent-color);
    font-size: 0.72rem;
}

/* ── Browser mockup (hero visual) ── */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 20px;
}

@keyframes floatImage {
    0%, 100% {
        transform: perspective(1400px) rotateY(-18deg) rotateX(5deg) translateY(0px);
    }
    50% {
        transform: perspective(1400px) rotateY(-18deg) rotateX(5deg) translateY(-14px);
    }
}

.browser-mockup {
    position: relative;
    width: 480px;
    border-radius: 14px;
    background: #0e0e0e;
    border: 1px solid rgba(255, 255, 255, 0.07);
    box-shadow:
        0 0 0 1px rgba(255, 51, 102, 0.05),
        0 50px 100px rgba(0, 0, 0, 0.75),
        0 0 80px rgba(255, 51, 102, 0.08),
        20px 20px 60px rgba(0, 0, 0, 0.5);
    overflow: visible;
    animation: floatImage 7s ease-in-out infinite;
    transform-style: preserve-3d;
    transform: perspective(1400px) rotateY(-18deg) rotateX(5deg);
}

.browser-bar {
    background: #161616;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px 14px 0 0;
}

.browser-dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.browser-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
}

.browser-dots span:nth-child(1) { background: #ff5f57; box-shadow: 0 0 6px #ff5f57; }
.browser-dots span:nth-child(2) { background: #febc2e; box-shadow: 0 0 6px #febc2e; }
.browser-dots span:nth-child(3) { background: #28c840; box-shadow: 0 0 6px #28c840; }

.browser-url {
    flex: 1;
    background: #1c1c1c;
    border-radius: 6px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.browser-url i {
    font-size: 0.62rem;
    color: #28c840;
    flex-shrink: 0;
}

.browser-body {
    overflow: hidden;
    border-radius: 0 0 14px 14px;
    position: relative;
}

/* Scan line que atraviesa el browser */
.browser-body::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent 10%, rgba(255, 51, 102, 0.7) 50%, transparent 90%);
    animation: scanBrowserLine 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
}

@keyframes scanBrowserLine {
    0%   { transform: translateY(0px);   opacity: 0; }
    8%   { opacity: 0.8; }
    88%  { opacity: 0.4; }
    100% { transform: translateY(520px); opacity: 0; }
}

/* Fake website wireframe */
.fake-site {
    background: #080808;
}

.fake-nav {
    height: 38px;
    background: #101010;
    border-bottom: 1px solid #181818;
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

/* Barra de carga animada en el nav de la fake web */
.fake-nav::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -40%;
    width: 40%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 214, 10, 0.8), transparent);
    animation: navLoadBar 3s ease-in-out infinite;
}

@keyframes navLoadBar {
    0%   { left: -40%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 0.7; }
    100% { left: 100%; opacity: 0; }
}

.fake-logo-bar {
    width: 52px;
    height: 7px;
    background: linear-gradient(90deg, var(--accent-color), transparent);
    border-radius: 4px;
    opacity: 0.85;
}

.fake-nav-links {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.fake-nav-links span {
    display: block;
    width: 28px;
    height: 5px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

.fake-hero-section {
    padding: 22px 18px 14px;
}

.fake-heading {
    height: 11px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    margin-bottom: 8px;
    animation: shimmer 2.5s ease-in-out infinite;
    position: relative;
}

/* Cursor parpadeante en el primer heading */
.fake-heading:not(.short)::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 80%;
    background: var(--accent-color);
    border-radius: 1px;
    box-shadow: 0 0 6px var(--accent-color);
    animation: cursorBlink 1.1s step-end infinite;
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

.fake-heading.short {
    width: 62%;
    background: rgba(255, 255, 255, 0.06);
    height: 8px;
}

.fake-cta-row {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.fake-btn {
    height: 24px;
    border-radius: 6px;
    width: 76px;
}

.fake-btn.primary-btn {
    background: linear-gradient(135deg, var(--accent-color), #ff6b8a);
    box-shadow: 0 0 18px rgba(255, 51, 102, 0.45);
    animation: glowPulse 2.5s ease-in-out infinite;
}

.fake-btn.ghost-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ======================================================
   BROWSER: LOADING PROGRESS BAR
====================================================== */
.browser-progress {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 2px;
    z-index: 20;
    pointer-events: none;
}

.browser-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-secondary));
    border-radius: 2px;
    animation: browserPageLoad 6s ease-in-out infinite;
    animation-delay: 1.2s;
}

@keyframes browserPageLoad {
    0%   { width: 0%;   opacity: 1; }
    35%  { width: 55%;  opacity: 1; }
    65%  { width: 88%;  opacity: 1; }
    78%  { width: 100%; opacity: 1; }
    86%  { width: 100%; opacity: 0; }
    100% { width: 0%;   opacity: 0; }
}

/* ======================================================
   BROWSER: CYCLING FEATURE BADGE
====================================================== */
.fake-feature-badge {
    position: relative;
    height: 14px;
    margin-bottom: 8px;
    overflow: hidden;
}

.ffb {
    position: absolute;
    top: 0; left: 0;
    font-size: 6.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--accent-color);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(5px);
    animation: ffbCycle 15s linear infinite;
    animation-delay: calc(var(--fi) * 3s);
}

.ffb:nth-child(odd)  { color: var(--accent-color); }
.ffb:nth-child(even) { color: var(--accent-secondary); }

@keyframes ffbCycle {
    0%   { opacity: 0; transform: translateY(5px); }
    4%   { opacity: 1; transform: translateY(0); }
    16%  { opacity: 1; transform: translateY(0); }
    20%  { opacity: 0; transform: translateY(-5px); }
    100% { opacity: 0; transform: translateY(5px); }
}

/* ======================================================
   BROWSER: EXTRA FAKE CONTENT (makes browser taller)
====================================================== */
.fake-content-section {
    display: flex;
    gap: 10px;
    padding: 10px 18px 14px;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.04);
}

.fake-content-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.fake-line-block {
    height: 5px;
    background: rgba(255,255,255,0.07);
    border-radius: 3px;
    animation: shimmer 3s ease-in-out infinite;
}

.fake-line-block.w75 { width: 75%; animation-delay: 0.1s; }
.fake-line-block.w55 { width: 55%; animation-delay: 0.3s; }
.fake-line-block.w85 { width: 85%; animation-delay: 0.5s; }
.fake-line-block.w45 { width: 45%; animation-delay: 0.7s; }

.fake-content-image {
    width: 62px;
    height: 50px;
    background: #111;
    border-radius: 7px;
    border: 1px solid #1e1e1e;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.fake-content-image::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--accent-secondary);
    opacity: 0.6;
    box-shadow: 0 0 5px var(--accent-secondary);
}

.fake-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 0 18px 18px;
}

.fake-stat-block {
    height: 36px;
    background: #0e0e0e;
    border-radius: 6px;
    border: 1px solid #1a1a1a;
    position: relative;
    overflow: hidden;
}

.fake-stat-block::before {
    content: '';
    position: absolute;
    top: 6px; left: 8px;
    width: 16px; height: 3px;
    background: rgba(255,255,255,0.12);
    border-radius: 2px;
}

.fake-stat-block::after {
    content: '';
    position: absolute;
    bottom: 6px; left: 8px;
    width: 28px; height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
}

.fake-stat-block:nth-child(1)::before { background: rgba(255,51,102,0.4); }
.fake-stat-block:nth-child(2)::before { background: rgba(255, 214, 10,0.4); }
.fake-stat-block:nth-child(3)::before { background: rgba(168,85,247,0.4); }
.fake-stat-block:nth-child(4)::before { background: rgba(245,158,11,0.4); }

/* ======================================================
   FAKE CARDS ROW
====================================================== */
.fake-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 0 18px 10px;
}

.fake-card {
    height: 58px;
    background: #111;
    border-radius: 8px;
    border: 1px solid #1e1e1e;
    position: relative;
    overflow: hidden;
}

.fake-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
}

.fake-card:nth-child(1)::before { background: var(--accent-color); opacity: 0.7; box-shadow: 0 0 6px var(--accent-color); }
.fake-card:nth-child(2)::before { background: var(--accent-secondary); opacity: 0.7; box-shadow: 0 0 6px var(--accent-secondary); }
.fake-card:nth-child(3)::before { background: #a855f7; opacity: 0.7; box-shadow: 0 0 6px #a855f7; }

/* Metric pills flotando fuera del browser (efecto 3D) */
.browser-metrics {
    position: absolute;
    bottom: 40px;
    left: -85px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10;
}

.metric-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(14, 14, 14, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 12px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    min-width: 130px;
}

.metric-pill.perf-pill {
    border-color: rgba(255, 149, 0, 0.3);
    box-shadow: 0 0 20px rgba(255, 149, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.5);
}

.metric-pill.seo-pill {
    border-color: rgba(255, 214, 10, 0.3);
    box-shadow: 0 0 20px rgba(255, 214, 10, 0.1), 0 8px 24px rgba(0, 0, 0, 0.5);
}

.metric-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.perf-pill .metric-icon { color: #ff9500; }
.seo-pill .metric-icon { color: #ffd60a; }

.metric-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.metric-val {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
}

.metric-lbl {
    display: block;
    font-size: 0.62rem;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@keyframes shimmer {
    0%, 100% { opacity: 0.45; }
    50%       { opacity: 1; }
}

@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 14px rgba(255, 51, 102, 0.4); }
    50%       { box-shadow: 0 0 28px rgba(255, 51, 102, 0.7); }
}

/* ======================================================
    SECCIÓN SOBRE NOSOTROS
   ====================================================== */
.about {
    background-color: var(--bg-secondary);
    position: relative;
    overflow: hidden;
    padding: 100px 0;
}

.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--text-primary), var(--accent-color), transparent);
    animation: scanLine 4.5s linear infinite;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    transform-style: preserve-3d;
}

.about-subtitle {
    color: var(--text-primary);
    margin-top: 25px;
    margin-bottom: 12px;
    font-size: 1.5rem;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.about-text p {
    color: var(--text-secondary);
}

.about-subtitle:first-child {
    margin-top: 0;
}
.about-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 720px;
    gap: 40px;
}

.about-timeline {
    max-width: 760px;
    margin: 0;
    position: relative;
}

.about-timeline::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, #ff6b6b, transparent);
}

.about-timeline .timeline-item {
    display: flex;
    gap: 30px;
    margin-bottom: 34px;
    position: relative;
}

.about-timeline .timeline-item:last-child {
    margin-bottom: 0;
}

.about-timeline .timeline-number {
    width: 40px;
    height: 40px;
    background: var(--bg-secondary);
    border: 2px solid #ff6b6b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    color: #ff6b6b;
    position: relative;
    z-index: 2;
    flex: 0 0 40px;
    transition: all 0.2s ease;
}

.about-timeline .timeline-content {
    flex: 1;
    padding-bottom: 10px;
}

.about-timeline .timeline-content h3 {
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 10px;
    position: relative;
    display: inline-block;
}

.about-timeline .timeline-content h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.1em;
    background: linear-gradient(to right, var(--text-primary), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.2s ease-in;
}

.about-timeline .timeline-content p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.about-timeline .timeline-item:hover .timeline-number {
    color: var(--text-primary);
    border-radius: 8px;
    transform: scale(1.12);
}

.about-timeline .timeline-item:hover .timeline-content h3::after {
    transform: scaleX(1.05);
}

.btn-about {
    text-decoration: none;
    border: solid 1px var(--text-tertiary);
    padding: 13px 40px;
    border-radius: 30px;
    width: fit-content;
    text-align: center;
    color: var(--text-primary);
    background: var(--bg-secondary);
    z-index: 3;
    position: relative;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.btn-about:hover {
    border-radius: var(--border-radius);
    background-color: var(--bg-elevated);
    border-color: var(--accent-color);
}

.about-image {
    perspective: 1000px;
}

.about-placeholder {
    height: fit-content;
    width: fit-content;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
    transform: perspective(1000px) rotateY(-15deg);
    transition: transform 0.5s ease;
    backdrop-filter: blur(10px);
    box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.5), -10px -10px 20px rgba(255, 255, 255, 0.02);
}

.about-placeholder:hover {
    transform: perspective(1000px) rotateY(-10deg) rotateX(-3deg) translateZ(20px);
}

.about-placeholder video {
    width: 400px;
    height: 350px;
    margin: 20px 20px 13px 20px;
    object-fit: cover;
    border-radius: var(--border-radius);
    pointer-events: none;
}

/* ======================================================
   SECCIÓN SERVICIOS
====================================================== */
.services {
    background: var(--bg-primary);
    position: relative;
    padding: 90px 0;
    overflow: hidden;
}

.services-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

.services-grid-visual {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    margin: 3.2rem 0 0;
}

/* ======================================================
   CARD BASE
====================================================== */
.service-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 340px;
    padding: 2rem;
    border-radius: 22px;
    background: #141414;
    border: 1px solid #262626;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    overflow: hidden;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.service-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.35s ease;
}

.service-visual::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    pointer-events: none;
}

/* Glow/control visual por tarjeta */
.service-web::before {
    box-shadow:
        inset 0 0 0 1px rgba(255, 131, 131, 0.04),
        0 0 0 0 rgba(255, 131, 131, 0);
}

.service-seo::before {
    box-shadow:
        inset 0 0 0 1px rgba(255, 214, 10, 0.05),
        0 0 0 0 rgba(255, 214, 10, 0);
}

.service-visual:hover {
    transform: translateY(-8px);
}

.service-web:hover {
    border-color: rgba(255, 131, 131, 0.22);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.42),
        0 0 28px rgba(255, 131, 131, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.service-seo:hover {
    border-color: rgba(255, 214, 10, 0.24);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.42),
        0 0 28px rgba(255, 214, 10, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

/* Línea/acento superior */
.service-visual .service-accent-line {
    display: none;
}

.service-visual.service-web {
    background-image:
        linear-gradient(180deg, rgba(255, 131, 131, 0.025), transparent 22%);
}

.service-visual.service-seo {
    background-image:
        linear-gradient(180deg, rgba(255, 214, 10, 0.025), transparent 22%);
}

/* ======================================================
   ICONO
====================================================== */
.service-icon-large {
    width: 74px;
    height: 74px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    background: #191919;
    border: 1px solid #2a2a2a;
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
    position: relative;
    overflow: hidden;
}

.service-icon-large::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 1;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.service-web .service-icon-large::before {
    background: linear-gradient(135deg, rgba(255, 131, 131, 0.10), transparent 70%);
}

.service-seo .service-icon-large::before {
    background: linear-gradient(135deg, rgba(255, 214, 10, 0.12), transparent 70%);
}

.service-icon-large i {
    position: relative;
    z-index: 1;
    font-size: 1.95rem;
    color: var(--text-primary);
    transition:
        transform 0.35s ease,
        color 0.35s ease,
        text-shadow 0.35s ease;
}

.service-web .service-icon-large i {
    color: #ff9a9a;
    text-shadow: 0 0 14px rgba(255, 131, 131, 0.14);
}

.service-seo .service-icon-large i {
    color: #ffd60a;
    text-shadow: 0 0 18px rgba(255, 214, 10, 0.35);
}

.service-web:hover .service-icon-large {
    border-color: rgba(255, 131, 131, 0.22);
    box-shadow:
        0 0 22px rgba(255, 131, 131, 0.08),
        0 10px 18px rgba(0, 0, 0, 0.24);
}

.service-seo:hover .service-icon-large {
    border-color: rgba(255, 214, 10, 0.24);
    box-shadow:
        0 0 22px rgba(255, 214, 10, 0.15),
        0 10px 18px rgba(0, 0, 0, 0.24);
}

.service-visual:hover .service-icon-large {
    transform: translateY(-2px) scale(1.03);
}

.service-visual:hover .service-icon-large::before {
    transform: scale(1.08);
}

.service-visual:hover .service-icon-large i {
    transform: scale(1.05);
}

/* ======================================================
   TÍTULO
====================================================== */
.service-visual h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.85rem 0;
    letter-spacing: -0.03em;
    line-height: 1.15;
    position: relative;
    display: inline-block;
    width: fit-content;
}

.service-visual h3::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 0;
    width: 38px;
    height: 2px;
    border-radius: 999px;
    transition: width 0.35s ease, opacity 0.35s ease;
    opacity: 0.95;
}

.service-web h3::after {
    background: linear-gradient(90deg, rgba(255, 131, 131, 0.95), transparent);
}

.service-seo h3::after {
    background: linear-gradient(90deg, rgba(255, 214, 10, 0.95), transparent);
}

.service-visual:hover h3::after {
    width: 100%;
}

/* ======================================================
   TEXTO
====================================================== */
.service-visual p {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 1.6rem 0;
    opacity: 0.9;
    max-width: 34ch;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.service-visual:hover p {
    color: #cfcfcf;
    opacity: 1;
}

/* ======================================================
   BOTÓN (VERSIÓN LLAMATIVA PRO)
====================================================== */
.service-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: auto;
    background: #181818;
    color: var(--text-primary);
    border: 1px solid #2e2e2e;
    padding: 0.82rem 1.2rem;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 500;
    position: relative;
    overflow: hidden;

    transition:
        transform 0.5s ease,
        border-color 0.5s ease,
        box-shadow 0.5s ease,
        background 0.5s ease,
        color 0.5s ease;
}

/* 🔴 Glow base SIEMPRE activo */
.service-web .service-link-btn {
    border-color: rgba(255, 131, 131, 0.25);
    box-shadow: 0 0 12px rgba(255, 131, 131, 0.08);
}

.service-seo .service-link-btn {
    border-color: rgba(255, 214, 10, 0.25);
    box-shadow: 0 0 12px rgba(255, 214, 10, 0.10);
}

/* ✨ EFECTO SHINE (la clave) */
.service-link-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );
    transform: skewX(-20deg);
    transition: none;
}

/* se activa SOLO en hover */
.service-link-btn:hover::after {
    animation: shine 0.8s ease forwards;
}

@keyframes shine {
    0% {
        left: -120%;
    }
    100% {
        left: 140%;
    }
}

/* 🚀 Hover potente */
.service-link-btn:hover {
    transform: translateY(-3px) scale(1.04);
}

/* 👉 Flecha con vida */
.service-link-btn i {
    font-size: 0.9rem;
    transition: transform 0.3s ease;
}

.service-link-btn:hover i {
    transform: translateX(6px);
}

/* 🔥 Pulso suave continuo (muy sutil) */
@keyframes pulseGlowWeb {
    0%, 100% {
        box-shadow: 0 0 12px rgba(255, 131, 131, 0.08);
    }
    50% {
        box-shadow: 0 0 18px rgba(255, 131, 131, 0.14);
    }
}

@keyframes pulseGlowSEO {
    0%, 100% {
        box-shadow: 0 0 12px rgba(255, 214, 10, 0.10);
    }
    50% {
        box-shadow: 0 0 22px rgba(255, 214, 10, 0.20);
    }
}

.service-web .service-link-btn {
    animation: pulseGlowWeb 2.8s ease-in-out infinite;
}

.service-seo .service-link-btn {
    animation: pulseGlowSEO 2.8s ease-in-out infinite;
}

/* ======================================================
   RESPONSIVE
====================================================== */
@media (max-width: 992px) {
    .services-grid-visual {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .service-visual {
        min-height: unset;
    }
}

@media (max-width: 768px) {
    .services {
        padding: 75px 0;
    }

    .services-container {
        padding: 0 20px;
    }

    .services-grid-visual {
        margin-top: 2.5rem;
    }

    .service-visual {
        padding: 1.5rem;
        border-radius: 18px;
    }

    .service-icon-large {
        width: 66px;
        height: 66px;
        border-radius: 16px;
        margin-bottom: 1.2rem;
    }

    .service-icon-large i {
        font-size: 1.7rem;
    }

    .service-visual h3 {
        font-size: 1.55rem;
    }

    .service-visual p {
        font-size: 0.96rem;
        line-height: 1.65;
        margin-bottom: 1.35rem;
    }

    .service-link-btn {
        padding: 0.78rem 1.05rem;
        font-size: 0.93rem;
    }
}

/* ======================================================
    SECCIÓN CONTACTO
   ====================================================== */
.contact {
    background-color: var(--bg-primary);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    perspective: 1000px;
}

.contact-info h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: var(--text-primary);
    font-weight: 400;
}

.contact-details {
    margin-top: 25px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0 10px 10px 0;
    border-top: 1px solid rgba(255,255,255,0.04);
    border-right: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    border-left: 2px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
    transition: all 0.25s ease;
}

.contact-item:hover {
    transform: translateX(4px);
    border-left-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 5%, transparent);
}

.contact-item i {
    font-size: 1rem;
    color: var(--accent-color);
    width: 38px;
    height: 38px;
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.contact-item a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: 0.3s ease;
}

.contact-item a:hover {
    color: var(--text-primary);
}

.contact-email:hover i { transform: rotateZ(-14deg); }
.contact-phone:hover i { transform: rotateZ(23deg); }
.contact-location:hover i { transform: translateY(-4px); }

.contact-item h4 {
    margin-bottom: 5px;
    font-size: 1.1rem;
    color: var(--text-primary);
    font-weight: 400;
}

.contact-item p {
    margin-bottom: 0;
    color: var(--text-secondary);
}

.social-contact {
    padding: 20px 16px;
    background: rgba(255,255,255,0.02);
    border-radius: 0 10px 10px 0;
    border-top: 1px solid rgba(255,255,255,0.04);
    border-right: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.04);
    border-left: 2px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
    transition: all 0.25s ease;
    margin-top: 4px;
}

.social-contact:hover {
    border-left-color: var(--accent-color);
    transform: translateX(4px);
}

/* LinkedIn */
.social-contact:hover .social-links a[href*="linkedin"] {
    color: #b4e1ff;
}

/* Instagram */
.social-contact:hover .social-links a[href*="instagram"] {
    color: #e654b5;
}

/* Twitter / X */
.social-contact:hover .social-links a[href*="x.com"],
.social-contact:hover .social-links a[href*="twitter"] {
    color: #1DA1F2;
}

.social-contact p {
    margin-bottom: 20px;
    color: var(--text-secondary);
}

.social-links {
    display: flex;
    gap: 20px;
}

.social-links a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--text-primary);
    text-decoration: none;
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.4s ease
}

.social-links a:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    color: var(--text-primary);
}

/* FORMULARIO DE CONTACTO */
.contact.contact-hero {
    background-color: transparent;
    position: relative;
    overflow: hidden;
}

.contact.contact-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--accent-color) 12%, transparent) 0%, transparent 55%),
        radial-gradient(circle at 75% 80%, color-mix(in srgb, var(--accent-color) 5%, transparent) 0%, transparent 45%);
    z-index: -1;
    animation: heroBackground 20s infinite alternate;
}

/* decorative large word in the background */
.contact.contact-hero::after {
    content: 'CONTACT';
    position: absolute;
    bottom: -0.12em;
    right: -0.04em;
    font-size: clamp(6rem, 14vw, 13rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.04);
    pointer-events: none;
    user-select: none;
    z-index: 0;
    line-height: 1;
}

/* badge above the h3 */
.contact-info-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
    border-radius: 999px;
    padding: 5px 14px 5px 10px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--accent-color);
    letter-spacing: 0.02em;
    margin-bottom: 16px;
}

.contact-info-badge i { font-size: 0.68rem; }

.contact-form-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.95), rgba(18, 18, 18, 0.95));
    padding: 0;
    border-radius: var(--border-radius);
    border: 1px solid rgba(255,255,255,0.07);
    backdrop-filter: blur(20px);
    box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.5), -10px -10px 20px rgba(255, 255, 255, 0.02);
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.contact-form-container:hover {
    border-color: color-mix(in srgb, var(--accent-color) 35%, transparent);
    box-shadow: 0 0 36px color-mix(in srgb, var(--accent-color) 12%, transparent);
}

.contact-form-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 26px;
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent-color) 18%, transparent);
}

.contact-form-header-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--accent-color) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.contact-form-header-icon i { color: var(--accent-color); font-size: 0.9rem; }

.contact-form-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-form-header-text strong {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.contact-form-header-text span {
    font-size: 0.73rem;
    color: var(--text-tertiary);
}

.form-title {
    display: none;
}

.contact-form-body {
    padding: 26px 28px 28px;
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px 18px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border-light);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #ff6b6b;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2);
    background: rgba(0, 0, 0, 0.8);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--text-tertiary);
    font-weight: 300;
}

.contact-form .checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.contact-form .checkbox input {
    width: 18px;
    height: 18px;
    accent-color: #ff6b6b;
    margin: 0;
    flex-shrink: 0;
}

.contact-form .checkbox label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    cursor: pointer;
    margin: 0;
    line-height: 1.4;
}

.btn-submit {
    width: 100%;
    background: linear-gradient(135deg, #ff6b6b, #ff8a8a);
    color: #000;
    border: none;
    padding: 16px 24px;
    border-radius: var(--border-radius);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 10px 10px rgba(255, 107, 107, 0.15);
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 15px rgba(255, 107, 107, 0.15);
    background: linear-gradient(135deg, #ff8a8a, #ff9f9f);
}

.btn-submit i {
    font-size: 1.2rem;
}

.form-status {
    display: none;
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 500;
    transform: translateY(10px);
    transition: all 0.4s ease;
    text-align: center;
    backdrop-filter: blur(10px);
}

.form-status.show {
    display: block;
    transform: translateY(0);
}

.form-status.success {
    background: rgba(46, 204, 113, 0.08);
    border: 1px solid rgba(46, 204, 113, 0.4);
    color: #2ecc71;
}

.form-status.error {
    background: rgba(255, 107, 107, 0.08);
    border: 1px solid rgba(255, 107, 107, 0.4);
    color: #ff6b6b;
}

/* ======================================================
    SECCIÓN LEGAL
   ====================================================== */
.legal {
    background-color: var(--bg-secondary);
    position: relative;
    overflow: hidden;
    padding: 30px 0px;
}

.legal .section-header {
    margin: 0px 0px 30px;
}

.legal-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    perspective: 1000px;
}

.legal-card {
    background: var(--bg-elevated);
    border-radius: var(--border-radius);
    padding: 20px 25px 20px 15px;
    border: 1px solid var(--border-color);
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    text-decoration: none;
    color: inherit;
    flex: 1 1 300px;
    max-width: 360px;
}

.legal-card:hover {
    transform: perspective(1000px) rotateY(5deg) translateZ(10px);
    border-color: var(--text-primary);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.legal-card h3 {
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.25rem;
    transition: transform 0.5s ease;
    font-weight: 500;
}

.legal-card:hover h3 {
    transform: translateX(5px);
}

.legal-card h3 i {
    font-size: 1.5rem;
    color: var(--accent-color);
    transition: transform 0.5s ease;
}

.legal-card:hover h3 i {
    transform: scale(1.1) rotate(5deg);
}

.legal-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--text-primary);
    transition: transform 0.2s ease, opacity 0.5s ease;
    opacity: 0.7;
}

.legal-card:hover .legal-link {
    transform: translateX(8px) rotate(90deg) scale(1.4);
    color: var(--accent-color);
    opacity: 1;
}

.legal-link:hover {
    gap: 15px;
    opacity: 1;
}

@keyframes float {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    100% {
        transform: translate(20px, -23px) scale(1.02) rotate(10deg);
    }
}

@keyframes floatReverse {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    100% {
        transform: translate(-15px, 15px) rotate(-8deg);
    }
}

@keyframes heroBackground {
    0% {
        transform: scale(1) rotate(0deg);
    }

    100% {
        transform: scale(1.1) rotate(1deg);
    }
}
/* RESPONSIVE */
@media (max-width: 1200px) {
    .about-content {
        gap: 10px;
    }

    .legal-card {
        flex: 0 0 calc(50% - 25px);
        justify-content: center;
        max-width: calc(50% - 25px);
    }

    .legal-card h3 {
        font-size: 1.15rem;
    }

    .legal-card {
        flex: 0 0 calc(50% - 25px);
        max-width: calc(50% - 25px);
    }
}

@media (max-width: 1060px) {
    .about-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-image {
        order: -1;
    }

    .about-image,
    .about-placeholder {
        perspective: none;
    }

    .about-placeholder {
        transform: none !important;
        max-width: 500px;
        margin: 0 auto;
        padding: 10px;
        box-sizing: border-box;
    }

    .about-placeholder .placeholder-content {
        width: 100%;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-radius: var(--border-radius);
    }

    .about-placeholder:hover {
        transform: none !important;
    }

    .about-text {
        text-align: left;
        max-width: 760px;
        margin: 0 auto;
    }

    .about-placeholder video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
        margin: 0;
        display: block;
    }

    .about {
        padding: 80px 0;
    }
}

@media (max-width: 1200px) {
    .browser-mockup {
        width: 440px;
    }

    .browser-metrics {
        left: -70px;
        bottom: 30px;
    }
}

@media (max-width: 992px) {
    .hero-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 3rem;
    }

    .hero-visual {
        order: -1;
        padding-right: 0;
        justify-content: center;
    }

    .hero-badge {
        margin: 0 auto 1.8rem;
    }

    .hero-ctas {
        justify-content: center;
    }

    .hero-trust {
        justify-content: center;
    }

    .browser-mockup {
        width: 400px;
        /* Sin rotación 3D en tablet/móvil para mejor legibilidad */
        transform: none !important;
        animation: floatImageFlat 7s ease-in-out infinite;
    }

    .browser-metrics {
        left: auto;
        right: -10px;
        bottom: -60px;
        flex-direction: row;
        gap: 8px;
    }

    .metric-pill {
        min-width: unset;
    }

    .hero-h1 {
        margin: 0 auto;
        margin-top: 1.5rem;
        padding-left: 0;
        padding-top: 1.2rem;
        font-weight: 200;
    }

    .hero-h1::before {
        left: 50%;
        top: 0;
        bottom: auto;
        transform: translateX(-50%);
        width: 50%;
        height: 2px;
        border-radius: 2px;
        background: var(--accent-color);
        box-shadow: 0 0 15px var(--accent-color);
    }

    .hero-h1::after {
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);
        width: 50%;
        height: 3px;
        filter: blur(40px);
        opacity: 0.75;
        background: var(--accent-color);
        z-index: -1;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .service-icon-large {
        width: 70px;
        height: 70px;
    }

    .service-icon-large i {
        font-size: 2.2rem;
    }

    .service-visual h3 {
        font-size: 1.5rem;
    }
}

/* Animación flat para móvil (sin 3D) */
@keyframes floatImageFlat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

@media (max-width: 520px) {
    .browser-mockup {
        width: calc(100vw - 40px);
        max-width: 360px;
    }

    .browser-metrics {
        right: 0;
        bottom: -55px;
        flex-direction: row;
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 400px) {
    .browser-metrics {
        flex-direction: column;
        align-items: center;
        bottom: -100px;
    }
}

@media (max-width: 798px) {
    .logos-grid {
        gap: 2rem;
    }

    .logo-card {
        font-size: 1rem;
    }

    .logo-card span {
        display: none;
    }

    .legal-content {
        gap: 14px;
    }

    .legal-card {
        flex: 0 0 100%;
        max-width: 500px;
        padding: 10px 25px 10px 15px;
        justify-content: space-between;
    }
}

@media (max-width: 768px) {
    .services-grid-visual {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .service-visual {
        align-items: center;
        text-align: center;
    }
    
    .service-visual h3::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .service-visual:hover h3::after {
        width: 60px;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .btn-services-all {
        padding: 0.8rem 2rem;
        font-size: 0.95rem;
    }
}


@media (max-width: 768px) {
    .about-timeline .timeline-item {
        gap: 18px;
    }

    .about-timeline::before {
        left: 15px;
    }

    .about-timeline .timeline-number {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: 0.95rem;
    }
}
@media (max-width: 600px) {
    .form-group {
        margin-bottom: 16px;
    }

    .form-group-title {
        font-size: 0.92rem;
        margin-bottom: 0.45rem;
    }

    #contacto .container {
        padding: 0 25px;
    }

    .contact-item {
        padding: 10px;
        gap: 10px;
    }

    .social-contact {
        padding: 20px;
    }

    .contact-item i {
        font-size: 1.2rem;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-h1 {
        font-size: 1.2rem;
    }

    .hero {
        min-height: 95vh;
        padding: 5.5rem 2rem 4rem;
    }

    .hero-container {
        gap: 3rem;
    }

    .about-placeholder {
        width: 100%;
    }

    .section-header {
        margin-bottom: 30px;
    }

    .btn-about {
        font-size: 1.1rem;
    }
}

@media (max-width: 465px) {
    .section-title {
        font-size: 1.8rem;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .about-timeline .timeline-item {
        gap: 14px;
        margin-bottom: 24px;
    }

    .about-timeline .timeline-number {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
        font-size: 0.95rem;
    }

    .about-timeline::before {
        left: 17px;
    }

    .about-timeline .timeline-content h3 {
        font-size: 1.1rem;
    }

    .about-timeline .timeline-content p {
        font-size: 0.95rem;
    }

    .legal-card h3 {
        font-size: 1rem;
    }

    .legal-card h3 i {
        font-size: 1.2rem;
    }

    .legal-link {
        font-size: 1rem;
    }
}

@media (max-width: 400px) {
    .hero-visual {
        margin-top: 45px;
    }
}

.closer-return-button {
  position: fixed;
  left: 17px;
  top: 120px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(18, 18, 18, 0.92);
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.closer-return-button:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 131, 131, 0.35);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
}

.closer-return-button i {
  color: var(--accent-color, #ff8383);
}

@media (max-width: 998px) {
  .closer-return-button {
    top: 110px;
    padding: 6px 14px;
    font-size: 0.9rem;
  }
}

/* ======================================================
   SERVICES SHOWCASE — HORIZONTAL ROW LAYOUT
====================================================== */
.services-showcase {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 3rem;
}

.service-item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 2.8rem;
    align-items: center;
    padding: 2.6rem 2.8rem;
    background: #131313;
    border: 1px solid #232323;
    border-radius: 22px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    text-decoration: none;
    color: inherit;
}

/* Left accent bar */
.service-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 3px; height: 100%;
    border-radius: 22px 0 0 22px;
    transition: width 0.3s ease;
}

.service-web::before {
    background: var(--accent-color);
    box-shadow: 0 0 20px rgba(255, 51, 102, 0.5);
}

.service-seo::before {
    background: var(--accent-secondary);
    box-shadow: 0 0 20px rgba(255, 214, 10, 0.5);
}

/* Background decorative number */
.service-web::after  { content: '01'; color: rgba(255, 51, 102, 0.035); }
.service-seo::after  { content: '02'; color: rgba(255, 214, 10, 0.035); }

.service-item::after {
    position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    pointer-events: none;
    line-height: 1;
    user-select: none;
}

/* Hover states */
.service-web:hover {
    border-color: rgba(255, 51, 102, 0.2);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 30px rgba(255,51,102,0.06);
    transform: translateX(4px);
}

.service-seo:hover {
    border-color: rgba(255, 214, 10, 0.2);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 30px rgba(255, 214, 10,0.06);
    transform: translateX(4px);
}

/* Icon */
.service-item-icon {
    width: 66px;
    height: 66px;
    border-radius: 18px;
    background: #1c1c1c;
    border: 1px solid #2c2c2c;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.service-item-icon i {
    font-size: 1.75rem;
    transition: text-shadow 0.3s ease;
}

.service-web .service-item-icon i      { color: var(--accent-color); }
.service-seo .service-item-icon i      { color: var(--accent-secondary); }

.service-web:hover .service-item-icon {
    border-color: rgba(255, 51, 102, 0.3);
    box-shadow: 0 0 22px rgba(255,51,102,0.14);
}

.service-seo:hover .service-item-icon {
    border-color: rgba(255, 214, 10, 0.3);
    box-shadow: 0 0 22px rgba(255, 214, 10,0.14);
}

/* Body text */
.service-item-body h3 {
    font-size: 1.45rem;
    font-weight: 650;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
    letter-spacing: -0.025em;
}

.service-item-body p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 0 1rem;
    max-width: 520px;
}

/* Tags row */
.service-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.service-item-tags span {
    font-size: 0.71rem;
    padding: 3px 11px;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.service-web .service-item-tags span {
    background: rgba(255, 51, 102, 0.07);
    border: 1px solid rgba(255, 51, 102, 0.18);
    color: rgba(255, 100, 130, 0.9);
}

.service-seo .service-item-tags span {
    background: rgba(255, 214, 10, 0.07);
    border: 1px solid rgba(255, 214, 10, 0.18);
    color: rgba(0, 210, 110, 0.9);
}

/* CTA button */
.service-item-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.87rem;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.service-web .service-item-cta {
    border: 1px solid rgba(255, 51, 102, 0.3);
    color: var(--accent-color);
    background: rgba(255, 51, 102, 0.07);
}

.service-seo .service-item-cta {
    border: 1px solid rgba(255, 214, 10, 0.3);
    color: var(--accent-secondary);
    background: rgba(255, 214, 10, 0.07);
}

.service-web:hover .service-item-cta {
    background: rgba(255, 51, 102, 0.15);
    border-color: rgba(255, 51, 102, 0.6);
    box-shadow: 0 0 20px rgba(255,51,102,0.2);
}

.service-seo:hover .service-item-cta {
    background: rgba(255, 214, 10, 0.15);
    border-color: rgba(255, 214, 10, 0.6);
    box-shadow: 0 0 20px rgba(255, 214, 10,0.2);
}

.service-item-cta i {
    transition: transform 0.3s ease;
}

.service-item:hover .service-item-cta i {
    transform: translateX(4px);
}

/* ======================================================
   SERVICES — Strip Expansion Layout (redesigned)
   ====================================================== */

.services-strip-list {
    margin-top: 4rem;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.svc-strip {
    position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    overflow: hidden;
    transition: background 0.3s;
}

.svc-strip:hover {
    background: rgba(255,255,255,0.013);
}

/* accent left reveal bar */
.svc-strip::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0;
    background: var(--accent-color);
    transition: width 0.22s ease;
    z-index: 4;
}
.svc-strip:hover::before,
.svc-strip.open::before { width: 3px; }

/* large watermark number */
.svc-strip-watermark {
    position: absolute;
    right: -0.03em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18vw;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.022);
    pointer-events: none;
    line-height: 1;
    letter-spacing: -0.05em;
    z-index: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    will-change: opacity;
}
.svc-strip.open .svc-strip-watermark {
    opacity: 0;
    transform: translateY(-50%) scale(1.06);
}

/* clickable header row */
.svc-strip-head {
    display: grid;
    grid-template-columns: 36px 1fr auto auto;
    align-items: center;
    gap: 1.8rem;
    padding: 1.6rem 2rem 1.6rem 2rem;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.svc-strip-num {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent-color);
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
    line-height: 1;
}

.svc-strip-name {
    font-size: clamp(1.15rem, 2.2vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.022em;
    color: var(--text-primary);
    line-height: 1.1;
    margin: 0;
    transition: color 0.22s;
}
.svc-strip:hover .svc-strip-name,
.svc-strip.open .svc-strip-name {
    color: var(--accent-color);
}

.svc-strip-summary {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    letter-spacing: 0.02em;
    transition: opacity 0.22s;
}
.svc-strip.open .svc-strip-summary {
    opacity: 0;
    pointer-events: none;
}

.svc-strip-btn {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.10);
    background: transparent;
    color: var(--text-tertiary);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 1rem;
    transition: all 0.32s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.svc-strip:hover .svc-strip-btn {
    border-color: color-mix(in srgb, var(--accent-color) 50%, transparent);
    color: var(--accent-color);
    transform: scale(1.06);
}
.svc-strip.open .svc-strip-btn {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #000;
    transform: rotate(45deg) scale(1.06);
}

/* expandable body */
.svc-strip-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}
.svc-strip.open .svc-strip-body {
    max-height: 440px;
}

.svc-strip-body-inner {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: 3.5rem;
    padding: 0.2rem 2rem 2.8rem 5.6rem;
    align-items: start;
}

.svc-strip-desc {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.78;
    margin: 0 0 2rem;
}

.svc-strip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 2.2rem;
}
.svc-strip-tags span {
    font-size: 0.73rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--accent-color) 90%, white);
    background: color-mix(in srgb, var(--accent-color) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
    border-radius: 999px;
    padding: 4px 13px;
    letter-spacing: 0.01em;
}

.svc-strip-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-color);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
    transition: gap 0.25s;
}
.svc-strip-cta:hover { gap: 18px; }
.svc-strip-cta i { font-size: 0.78rem; transition: transform 0.25s; }
.svc-strip-cta:hover i { transform: translateX(5px); }

/* right column */
.svc-strip-visual {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-top: 0.4rem;
}

.svc-strip-icon {
    width: 70px; height: 70px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
    display: flex; align-items: center; justify-content: center;
}
.svc-strip-icon i {
    font-size: 1.65rem;
    color: var(--accent-color);
}

.svc-strip-stat {
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-left: 2px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
    padding-left: 1rem;
}
.ssv { /* stat value */
    font-size: 2.6rem;
    font-weight: 900;
    letter-spacing: -0.05em;
    color: var(--accent-color);
    line-height: 1;
}
.ssv em { font-size: 1rem; font-style: normal; opacity: 0.7; }
.ssl { /* stat label */
    font-size: 0.72rem;
    color: var(--text-tertiary);
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* responsive */
@media (max-width: 1024px) {
    .svc-strip-body-inner {
        grid-template-columns: 1fr 220px;
        gap: 3rem;
        padding: 0.5rem 2.5rem 3rem 6.5rem;
    }
}
@media (max-width: 768px) {
    .svc-strip-head {
        grid-template-columns: 34px 1fr auto;
        gap: 1.2rem;
        padding: 2rem 1.5rem 2rem 1.2rem;
    }
    .svc-strip-summary { display: none; }
    .svc-strip-body-inner {
        grid-template-columns: 1fr;
        gap: 1.8rem;
        padding: 0 1.5rem 2.5rem 3.2rem;
    }
    .svc-strip-visual { flex-direction: row; align-items: center; gap: 2.5rem; }
    .svc-strip-watermark { font-size: 28vw; }
}
@media (max-width: 520px) {
    .svc-strip-name { font-size: clamp(1.05rem, 5vw, 1.4rem); }
    .svc-strip-body-inner { padding: 0 1rem 2rem 1rem; }
    .svc-strip-watermark { display: none; }
}

/* Responsive */
@media (max-width: 860px) {
    .service-item {
        grid-template-columns: 60px 1fr;
        grid-template-rows: auto auto;
        gap: 1.5rem 1.8rem;
        padding: 2rem 1.8rem;
    }
    .service-item-cta {
        grid-column: 1 / -1;
        justify-content: center;
    }
    .service-item::after {
        font-size: 5rem;
        right: 1.5rem;
    }
}

@media (max-width: 560px) {
    .service-item {
        grid-template-columns: 1fr;
        gap: 1.2rem;
        padding: 1.8rem 1.5rem;
    }
    .service-item::after { display: none; }
    .service-item-icon { width: 54px; height: 54px; border-radius: 14px; }
    .service-item-icon i { font-size: 1.5rem; }
    .service-item-body h3 { font-size: 1.2rem; }
}

/* ======================================================
   SERVICES ITEMS — SLIDE-IN ANIMATION
====================================================== */
.service-item.slide-ready {
    will-change: transform, opacity;
    transition:
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        opacity   0.7s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.3s ease,
        box-shadow   0.3s ease;
}

.service-item.slide-from-left.slide-off  { transform: translateX(-60px); opacity: 0; }
.service-item.slide-from-right.slide-off { transform: translateX(60px);  opacity: 0; }
.service-item.slide-ready:not(.slide-off) { transform: translateX(0); opacity: 1; }

/* Override the hover translateX when slide is done */
.service-web.slide-ready:not(.slide-off):hover  { transform: translateX(4px); }
.service-seo.slide-ready:not(.slide-off):hover  { transform: translateX(4px); }

/* ======================================================
   SERVICES CARDS — SLIDE-IN ANIMATION (legacy .service-visual)
====================================================== */
.service-visual.slide-ready {
    will-change: transform, opacity;
    transition:
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        opacity    0.65s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.35s ease,
        box-shadow   0.35s ease;
}

.service-visual.slide-ready.slide-delay {
    transition-delay: 0.12s;
}

/* ======================================================
   SERVICE CARD VARIANTS — E-COMMERCE & LANDING
====================================================== */
.service-ecommerce:hover {
    border-color: rgba(168, 85, 247, 0.24);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.42),
        0 0 28px rgba(168, 85, 247, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.service-landing:hover {
    border-color: rgba(245, 158, 11, 0.24);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.42),
        0 0 28px rgba(245, 158, 11, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.service-visual.service-ecommerce {
    background-image: linear-gradient(180deg, rgba(168, 85, 247, 0.03), transparent 22%);
}

.service-visual.service-landing {
    background-image: linear-gradient(180deg, rgba(245, 158, 11, 0.03), transparent 22%);
}

.service-ecommerce .service-icon-large::before {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), transparent 70%);
}

.service-landing .service-icon-large::before {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), transparent 70%);
}

.service-ecommerce .service-icon-large i {
    color: #c084fc;
    text-shadow: 0 0 14px rgba(168, 85, 247, 0.3);
}

.service-landing .service-icon-large i {
    color: #fbbf24;
    text-shadow: 0 0 14px rgba(245, 158, 11, 0.3);
}

.service-ecommerce:hover .service-icon-large {
    border-color: rgba(168, 85, 247, 0.22);
    box-shadow: 0 0 22px rgba(168, 85, 247, 0.12), 0 10px 18px rgba(0,0,0,0.24);
}

.service-landing:hover .service-icon-large {
    border-color: rgba(245, 158, 11, 0.22);
    box-shadow: 0 0 22px rgba(245, 158, 11, 0.12), 0 10px 18px rgba(0,0,0,0.24);
}

.service-ecommerce h3::after {
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.95), transparent);
}

.service-landing h3::after {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.95), transparent);
}

.service-ecommerce .service-link-btn {
    border-color: rgba(168, 85, 247, 0.25);
    animation: pulseGlowEcommerce 2.8s ease-in-out infinite;
}

.service-landing .service-link-btn {
    border-color: rgba(245, 158, 11, 0.25);
    animation: pulseGlowLanding 2.8s ease-in-out infinite;
}

@keyframes pulseGlowEcommerce {
    0%, 100% { box-shadow: 0 0 12px rgba(168, 85, 247, 0.08); }
    50%       { box-shadow: 0 0 22px rgba(168, 85, 247, 0.18); }
}

@keyframes pulseGlowLanding {
    0%, 100% { box-shadow: 0 0 12px rgba(245, 158, 11, 0.08); }
    50%       { box-shadow: 0 0 22px rgba(245, 158, 11, 0.18); }
}

/* ======================================================
   SECCIÓN PROCESO (CÓMO TRABAJAMOS)
====================================================== */
.process {
    background: var(--bg-secondary);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}

.process::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    animation: scanLine 4s linear infinite;
}

.process-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.process-step {
    flex: 1 1 200px;
    max-width: 230px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.2rem 1.4rem 2rem;
    background: #141414;
    border: 1px solid #252525;
    border-radius: 20px;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.process-step:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 51, 102, 0.25);
    box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 24px rgba(255, 51, 102, 0.08);
}

.process-step--highlight {
    border-color: rgba(255, 51, 102, 0.2);
    background: linear-gradient(160deg, rgba(255,51,102,0.05), #141414 60%);
}

.process-step-number {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-color);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    padding: 3px 11px;
    border-radius: 999px;
    line-height: 1.5;
    box-shadow: 0 0 12px rgba(255,51,102,0.35);
}

.process-step-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: #1c1c1c;
    border: 1px solid #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
    margin-top: 0.4rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.process-step:hover .process-step-icon {
    border-color: rgba(255, 51, 102, 0.25);
    box-shadow: 0 0 18px rgba(255,51,102,0.1);
}

.process-step-icon i {
    font-size: 1.5rem;
    color: var(--accent-color);
}

.process-step h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.6rem;
}

.process-step p {
    font-size: 0.87rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.process-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 1rem;
    background: rgba(255, 51, 102, 0.1);
    border: 1px solid rgba(255, 51, 102, 0.28);
    color: var(--accent-color);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    letter-spacing: 0.04em;
}

.process-step-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.8rem;
    color: var(--text-tertiary);
    font-size: 0.95rem;
    margin-top: 76px;
    flex-shrink: 0;
    opacity: 0.35;
}

.process-cta {
    text-align: center;
    margin-top: 3.5rem;
}

@media (max-width: 900px) {
    .process-steps {
        gap: 1.5rem;
    }
    .process-step-arrow {
        display: none;
    }
    .process-step {
        flex: 1 1 calc(50% - 0.75rem);
        max-width: calc(50% - 0.75rem);
    }
}

@media (max-width: 540px) {
    .process-step {
        flex: 1 1 100%;
        max-width: 320px;
        margin: 0 auto;
    }
}

/* ======================================================
   SECCIÓN ADDONS (QUÉ PUEDES AÑADIR)
====================================================== */
.addons {
    background: var(--bg-primary);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}

.addons-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 2.5rem;
    margin-bottom: 3rem;
}

.addon-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: #141414;
    border: 1px solid #282828;
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 0.86rem;
    letter-spacing: 0.02em;
    transition: all 0.25s ease;
    cursor: default;
}

.addon-chip:hover {
    border-color: rgba(255, 51, 102, 0.3);
    color: var(--text-primary);
    background: rgba(255, 51, 102, 0.06);
    transform: translateY(-2px);
}

.addon-chip i {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    transition: color 0.25s ease;
}

.addon-chip:hover i {
    color: var(--accent-color);
}

/* ======================================================
   ADDON CARDS — visual preview grid
   ====================================================== */
.addon-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 11px;
    margin-top: 2.5rem;
    margin-bottom: 3rem;
}

.addon-card {
    background: #141414;
    border: 1px solid #242424;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    cursor: pointer;
}

.addon-card:hover {
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.4),
                0 0 18px color-mix(in srgb, var(--accent-color) 8%, transparent);
}

.addon-preview {
    height: 86px;
    background: #0d0d0d;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 8px 10px;
}

/* subtle top glow line */
.addon-card:hover .addon-preview::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    opacity: 0.5;
}

.addon-card-label {
    padding: 8px 11px;
    display: flex;
    align-items: center;
    gap: 7px;
    border-top: 1px solid #1d1d1d;
}

.addon-card-label i {
    font-size: 0.74rem;
    color: var(--accent-color);
    flex-shrink: 0;
}

.addon-card-label span {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-weight: 500;
    line-height: 1.3;
}

/* ── Bar chart (dashboard, analytics) ── */
.ap-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 56px;
    width: 90%;
}

.ap-bars b {
    flex: 1;
    display: block;
    background: var(--accent-color);
    border-radius: 3px 3px 0 0;
    height: var(--h, 40%);
    opacity: 0.45;
    font-style: normal;
    font-weight: normal;
}

.ap-bars b.hi { opacity: 1; box-shadow: 0 0 8px var(--accent-color); }

/* ── Database / table ── */
.ap-table {
    width: 92%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ap-tr {
    display: flex;
    gap: 5px;
    align-items: center;
}

.ap-tr s {
    display: block;
    height: 5px;
    background: #2c2c2c;
    border-radius: 2px;
    text-decoration: none;
}

.ap-tr:first-child s { background: color-mix(in srgb, var(--accent-color) 50%, transparent); height: 6px; }
.ap-tr s:nth-child(1) { flex: 1.2; }
.ap-tr s:nth-child(2) { flex: 2; }
.ap-tr s:nth-child(3) { flex: 0.9; }

/* ── Blog card ── */
.ap-blog {
    width: 80%;
    background: #1a1a1a;
    border-radius: 6px;
    overflow: hidden;
}

.ap-blog-img {
    height: 30px;
    background: #242424;
    position: relative;
}

.ap-blog-img::after {
    content: '';
    position: absolute;
    top: 7px; left: 8px;
    width: 14px; height: 10px;
    background: color-mix(in srgb, var(--accent-color) 45%, transparent);
    border-radius: 2px;
}

.ap-blog-lines {
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ap-blog-lines s {
    display: block; height: 4px;
    background: #2c2c2c; border-radius: 2px;
    text-decoration: none;
}

.ap-blog-lines s:nth-child(1) { width: 90%; }
.ap-blog-lines s:nth-child(2) { width: 60%; }

/* ── Store / product grid ── */
.ap-store-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    width: 68%;
}

.ap-product {
    background: #1e1e1e;
    border-radius: 5px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ap-product-img { height: 18px; background: #2a2a2a; border-radius: 3px; }
.ap-product-price {
    height: 4px; width: 55%;
    background: color-mix(in srgb, var(--accent-color) 55%, transparent);
    border-radius: 2px;
}

/* ── Calendar ── */
.ap-cal {
    width: 82%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ap-cal-head {
    height: 6px;
    background: color-mix(in srgb, var(--accent-color) 30%, transparent);
    border-radius: 2px;
    width: 50%;
    margin: 0 auto 2px;
}

.ap-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.ap-cal-grid s {
    height: 8px;
    background: #222;
    border-radius: 2px;
    display: block;
    text-decoration: none;
}

.ap-cal-grid s.on {
    background: var(--accent-color);
    box-shadow: 0 0 5px var(--accent-color);
}

/* ── User profile ── */
.ap-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.ap-profile-av {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #1e1e1e;
    border: 1.5px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
    display: flex; align-items: center; justify-content: center;
}

.ap-profile-av i { color: var(--accent-color); font-size: 0.7rem; }

.ap-profile-lines {
    display: flex; flex-direction: column;
    align-items: center; gap: 3px;
}

.ap-profile-lines s {
    display: block; height: 4px;
    background: #2c2c2c; border-radius: 2px;
    text-decoration: none;
}

.ap-profile-lines s:nth-child(1) { width: 52px; }
.ap-profile-lines s:nth-child(2) { width: 34px; background: color-mix(in srgb, var(--accent-color) 35%, transparent); }

/* ── Language switch ── */
.ap-langs {
    display: flex;
    gap: 7px;
}

.ap-lang-b {
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 7px;
    padding: 5px 8px;
    display: flex; flex-direction: column;
    align-items: center; gap: 3px;
}

.ap-lang-flag {
    width: 18px; height: 11px;
    border-radius: 2px;
}

.ap-lang-b em {
    font-size: 0.5rem;
    color: #555;
    font-weight: 700;
    font-style: normal;
}

.ap-lang-b.active {
    border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
    background: color-mix(in srgb, var(--accent-color) 8%, transparent);
}

.ap-lang-b.active em { color: var(--accent-color); }
.ap-lang-flag.es { background: linear-gradient(to bottom, #e30613 33%, #f9c500 33% 66%, #e30613 66%); }
.ap-lang-flag.en { background: linear-gradient(to bottom, #012169 33%, #fff 33% 66%, #c8102e 66%); }

/* ── SEO ranking ── */
.ap-seo {
    width: 92%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 2px;
}

.ap-seo-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ap-seo-n {
    font-size: 0.6rem;
    font-weight: 800;
    color: #444;
    width: 10px;
    text-align: right;
    font-style: normal;
}

.ap-seo-row:first-child .ap-seo-n { color: var(--accent-color); }

.ap-seo-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ap-seo-lines s {
    display: block; height: 4px;
    background: #262626; border-radius: 2px;
    text-decoration: none;
}

.ap-seo-row:first-child .ap-seo-lines s { background: #333; }
.ap-seo-lines s:nth-child(1) { width: 90%; }
.ap-seo-lines s:nth-child(2) { width: 60%; }

/* ── Email envelope ── */
.ap-envelope-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.ap-env {
    width: 52px; height: 36px;
    background: #1e1e1e;
    border: 1.5px solid color-mix(in srgb, var(--accent-color) 30%, transparent);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.ap-env::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 0;
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
    border-top: 18px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.ap-env-lines {
    width: 75%;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ap-env-lines s {
    display: block; height: 4px;
    background: #262626; border-radius: 2px;
    text-decoration: none;
}

.ap-env-lines s:nth-child(1) { width: 100%; }
.ap-env-lines s:nth-child(2) { width: 65%; }

/* ── Map / location ── */
.ap-map {
    position: relative;
    width: 60px; height: 60px;
    display: flex; align-items: center; justify-content: center;
}

.ap-map-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
    animation: mapPulse 2.4s ease-in-out infinite;
}

.ap-map-ring:nth-child(1) { width: 18px; height: 18px; animation-delay: 0s; }
.ap-map-ring:nth-child(2) { width: 34px; height: 34px; animation-delay: 0.5s; border-color: color-mix(in srgb, var(--accent-color) 14%, transparent); }
.ap-map-ring:nth-child(3) { width: 54px; height: 54px; animation-delay: 1s; border-color: color-mix(in srgb, var(--accent-color) 7%, transparent); }

.ap-map-pin {
    width: 9px; height: 9px;
    background: var(--accent-color);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--accent-color);
    z-index: 1;
    position: relative;
}

@keyframes mapPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%       { opacity: 1;   transform: scale(1.07); }
}

/* ── Line chart (analytics) ── */
.ap-chart-svg {
    width: 90%;
    height: 55px;
    overflow: visible;
}

/* ── Login form ── */
.ap-form {
    width: 76%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ap-field {
    height: 13px;
    background: #1c1c1c;
    border: 1px solid #2c2c2c;
    border-radius: 4px;
}

.ap-field-btn {
    height: 13px;
    background: color-mix(in srgb, var(--accent-color) 20%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
    border-radius: 4px;
    margin-top: 2px;
}

/* ── Payment card ── */
.ap-paycard {
    width: 80px; height: 50px;
    background: linear-gradient(135deg, #1e1e1e, #2a2a2a);
    border: 1px solid #333;
    border-radius: 7px;
    padding: 7px 9px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ap-paycard-chip {
    width: 14px; height: 10px;
    background: rgba(255,210,0,0.2);
    border: 1px solid rgba(255,210,0,0.3);
    border-radius: 2px;
}

.ap-paycard-dots {
    display: flex; gap: 3px;
}

.ap-paycard-dots s {
    width: 5px; height: 5px;
    background: #3a3a3a;
    border-radius: 50%;
    display: block;
    text-decoration: none;
}

.ap-paycard-dots s.accent { background: color-mix(in srgb, var(--accent-color) 55%, transparent); }

/* ── Stars rating ── */
.ap-stars-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.ap-stars {
    display: flex;
    gap: 3px;
}

.ap-stars i { color: rgba(255,210,0,0.8); font-size: 0.85rem; }
.ap-stars i.off { color: #333; }

.ap-rating {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.04em;
    line-height: 1;
    font-style: normal;
}

/* ── Push notification ── */
.ap-push {
    width: 88%;
    background: #1a1a1a;
    border: 1px solid #2a2a2a;
    border-radius: 9px;
    padding: 7px 9px;
}

.ap-push-head {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}

.ap-push-ico {
    width: 14px; height: 14px;
    background: color-mix(in srgb, var(--accent-color) 20%, transparent);
    border-radius: 3px;
    display: flex; align-items: center; justify-content: center;
}

.ap-push-ico i { color: var(--accent-color); font-size: 0.5rem; }
.ap-push-title { height: 5px; flex: 1; background: #333; border-radius: 2px; }
.ap-push-body  { height: 4px; width: 75%; background: #242424; border-radius: 2px; }

/* ── PWA Phone ── */
.ap-phone {
    width: 36px; height: 60px;
    background: #0e0e0e;
    border: 2px solid #2e2e2e;
    border-radius: 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.ap-phone::before {
    content: '';
    position: absolute;
    top: 5px;
    width: 12px; height: 3px;
    background: #252525;
    border-radius: 2px;
}

.ap-phone-screen {
    margin-top: 12px;
    width: 86%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 2px;
}

.ap-app-ico {
    height: 11px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--accent-color) 25%, transparent);
}

.ap-app-ico:nth-child(2) { background: rgba(59,130,246,0.25); }
.ap-app-ico:nth-child(3) { background: rgba(245,158,11,0.25); }
.ap-app-ico:nth-child(4) { background: rgba(168,85,247,0.25); }

/* ── Responsive ── */
@media (max-width: 640px) {
    .addon-cards {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 9px;
    }
    .addon-preview { height: 76px; }
}

/* ======================================================
   ADDON DETAIL PANEL (inline card on card click)
   ====================================================== */

.addon-card.active {
    border-color: color-mix(in srgb, var(--accent-color) 55%, transparent);
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--accent-color) 30%, transparent),
        0 8px 28px rgba(0,0,0,0.35);
}

.addon-inline-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, margin-top 0.3s ease;
    margin-top: 0;
}

.addon-inline-panel.open {
    max-height: 180px;
    opacity: 1;
    pointer-events: auto;
    margin-top: 2rem;
}

/* Horizontal strip — header/body/footer are flattened via display:contents */
.addon-detail-panel {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: #131313;
    border: 1px solid #242424;
    border-left: 3px solid var(--accent-color);
    border-radius: 14px;
    width: 100%;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

.adp-header {
    display: contents;
}

.adp-header::before { display: none; }

.adp-body {
    display: contents;
}

.adp-footer {
    order: 5;
    flex-shrink: 0;
    padding: 0;
}

.adp-icon-wrap {
    order: 1;
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.adp-icon-wrap i {
    font-size: 0.95rem;
    color: var(--accent-color);
}

.adp-title {
    order: 2;
    flex-shrink: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
    padding-right: 12px;
    border-right: 1px solid rgba(255,255,255,0.07);
}

.adp-close {
    order: 6;
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 7px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-tertiary);
    font-size: 0.78rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.adp-close:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
}

.adp-desc {
    order: 3;
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.adp-features {
    order: 4;
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-width: 260px;
}

.adp-features span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--accent-color) 90%, white);
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
    border-radius: 999px;
    padding: 3px 9px;
}

.adp-features span::before {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--accent-color);
    opacity: 0.7;
    flex-shrink: 0;
}

.adp-cta {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent-color) 80%, black),
        var(--accent-color));
    color: #000;
    font-weight: 700;
    font-size: 0.8rem;
    border-radius: 9px;
    text-decoration: none;
    white-space: nowrap;
    transition: filter 0.2s, box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--accent-color) 25%, transparent);
}

.adp-cta:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

.adp-cta i { font-size: 0.82rem; }

@media (max-width: 700px) {
    .addon-inline-panel.open { max-height: 400px; }
    .addon-detail-panel {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
    }
    .adp-title {
        max-width: none;
        flex: 1;
        padding-right: 0;
        border-right: none;
    }
    .adp-close { order: 1; margin-left: auto; }
    .adp-desc  { order: 4; min-width: 100%; -webkit-line-clamp: 3; }
    .adp-features { order: 5; max-width: 100%; }
    .adp-footer { order: 6; width: 100%; }
    .adp-cta { width: 100%; justify-content: center; }
}

/* KOR.AI block */
.addons-korai {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    margin-top: 4.5rem;
    background: linear-gradient(135deg, rgba(255, 214, 10, 0.04), transparent);
    border: 1px solid rgba(255, 214, 10, 0.15);
    border-radius: 22px;
    padding: 2.2rem 2.8rem;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.addons-korai:hover {
    border-color: rgba(255, 214, 10, 0.3);
    box-shadow: 0 0 40px rgba(255, 214, 10, 0.06), 0 16px 40px rgba(0,0,0,0.28);
}

.addons-korai::before {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 214, 10, 0.5), transparent);
}

.korai-badge {
    flex-shrink: 0;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.04em;
    line-height: 1;
    white-space: nowrap;
}

.korai-badge span {
    color: var(--accent-secondary);
}

.korai-content h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.55rem;
    letter-spacing: -0.02em;
}

.korai-content p {
    color: var(--text-secondary);
    font-size: 0.93rem;
    line-height: 1.65;
    margin: 0 0 1.1rem;
    max-width: 540px;
}

.korai-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.korai-features span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: rgba(255, 214, 10, 0.85);
    background: rgba(255, 214, 10, 0.07);
    border: 1px solid rgba(255, 214, 10, 0.15);
    padding: 4px 12px;
    border-radius: 999px;
}

.korai-features span i {
    font-size: 0.72rem;
}

@media (max-width: 768px) {
    .addons-korai {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.8rem 1.6rem;
        gap: 1.2rem;
    }
    .korai-badge {
        font-size: 1.9rem;
    }
}

@media (max-width: 560px) {
    .addons-chips { gap: 7px; }
    .addon-chip {
        font-size: 0.8rem;
        padding: 7px 13px;
    }
}

/* ======================================================
   SECCIÓN POR QUÉ NECESITAS UNA WEB
====================================================== */
.why-web {
    background: var(--bg-secondary);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
}

.why-web::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    animation: scanLine 5s linear infinite;
}

.why-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0 3.5rem;
}

.why-stat {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: #141414;
    border: 1px solid #252525;
    border-radius: 20px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.why-stat:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 51, 102, 0.2);
}

.why-stat-number {
    display: block;
    font-size: clamp(2.8rem, 6vw, 4.2rem);
    font-weight: 800;
    background: linear-gradient(135deg, #ffffff, rgba(255,255,255,0.65));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 0.8rem;
}

.why-stat-pct {
    font-size: 0.5em;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent-color), rgba(255,51,102,0.7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.why-stat p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

.why-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

.why-feature-card {
    background: #141414;
    border: 1px solid #222;
    border-radius: 16px;
    padding: 1.8rem;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.why-feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 51, 102, 0.18);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35), 0 0 20px rgba(255,51,102,0.05);
}

.why-feature-card i {
    font-size: 1.55rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
    display: block;
}

.why-feature-card h4 {
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem;
}

.why-feature-card p {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 992px) {
    .why-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.2rem;
    }
    .why-features {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .why-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 380px;
        margin-left: auto;
        margin-right: auto;
    }
    .why-features {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    .why-stat {
        padding: 2rem 1.2rem;
    }
}

.service-visual.slide-ready.slide-off.slide-from-left  { transform: translateX(-70px); opacity: 0; }
.service-visual.slide-ready.slide-off.slide-from-right { transform: translateX(70px);  opacity: 0; }
/* ======================================================
   WHY-WEB REDESIGN — UNIFIED PANELS
====================================================== */

/* Stats: un solo contenedor con separadores internos */
.why-stats-panel {
    display: flex;
    align-items: stretch;
    background: #131313;
    border: 1px solid #252525;
    border-radius: 22px;
    overflow: hidden;
    margin: 3rem 0 1.2rem;
    position: relative;
}

.why-stats-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    animation: scanLine 4s linear infinite;
}

.why-stat-row {
    flex: 1;
    padding: 3rem 2.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    transition: background 0.3s ease;
}

.why-stat-row:hover {
    background: rgba(255,255,255,0.015);
}

.why-stat-sep {
    width: 1px;
    background: #252525;
    margin: 2rem 0;
    flex-shrink: 0;
    align-self: stretch;
}

.why-stat-big {
    display: block;
    font-size: clamp(3rem, 5.5vw, 4.8rem);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.04em;
    line-height: 1;
}

.why-stat-big em {
    font-style: normal;
    font-size: 0.42em;
    color: var(--accent-color);
    font-weight: 700;
    vertical-align: super;
}

.why-stat-row p {
    font-size: 0.86rem;
    color: var(--text-secondary);
    line-height: 1.55;
    max-width: 175px;
    margin: 0;
}

/* Tabla de razones: contenedor unificado con grid interno */
.why-table {
    background: #131313;
    border: 1px solid #252525;
    border-radius: 22px;
    overflow: hidden;
    margin-bottom: 3rem;
}

.why-table-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #1d1d1d;
}

.why-table-row:last-child {
    border-bottom: none;
}

.why-table-cell {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.9rem 2.2rem;
    transition: background 0.25s ease;
    position: relative;
}

.why-table-cell:first-child {
    border-right: 1px solid #1d1d1d;
}

.why-table-cell:hover {
    background: rgba(255, 255, 255, 0.018);
}

.why-table-cell i {
    font-size: 1.2rem;
    color: var(--accent-color);
    flex-shrink: 0;
    margin-top: 3px;
    width: 20px;
    transition: text-shadow 0.3s ease;
}

.why-table-cell:hover i {
    text-shadow: 0 0 12px rgba(255, 51, 102, 0.6);
}

.why-table-cell h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.3rem;
}

.why-table-cell p {
    font-size: 0.84rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .why-stats-panel {
        flex-direction: column;
    }
    .why-stat-sep {
        width: auto;
        height: 1px;
        margin: 0 2rem;
        align-self: auto;
    }
    .why-stat-row {
        padding: 2.2rem 2rem;
    }
}

@media (max-width: 700px) {
    .why-table-row {
        grid-template-columns: 1fr;
    }
    .why-table-cell:first-child {
        border-right: none;
        border-bottom: 1px solid #1d1d1d;
    }
    .why-table-cell {
        padding: 1.5rem 1.6rem;
    }
}

/* ============================================================
   FAQ SECTION
   ============================================================ */
.faq-section {
    padding: 7rem 0;
    background: #0a0a0a;
}

.faq-list {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.faq-item {
    border-bottom: 1px solid #1a1a1a;
}

.faq-item:first-child {
    border-top: 1px solid #1a1a1a;
}

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 0;
    background: transparent;
    border: none;
    color: #e0e0e0;
    font-size: 1.05rem;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: color 0.2s;
}

.faq-q:hover {
    color: var(--accent-color, #ff3366);
}

.faq-q i {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--accent-color, #ff3366);
    transition: transform 0.3s ease;
}

.faq-item.open .faq-q i {
    transform: rotate(180deg);
}

.faq-item.open .faq-q {
    color: var(--accent-color, #ff3366);
}

.faq-a {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.35s ease, padding 0.3s ease;
}

.faq-item.open .faq-a {
    max-height: 300px;
}

.faq-a p {
    padding: 0 0 1.5rem;
    color: #888;
    font-size: 0.97rem;
    line-height: 1.75;
    margin: 0;
}

@media (max-width: 768px) {
    .faq-section {
        padding: 4rem 0;
    }
    .faq-q {
        font-size: 0.97rem;
        padding: 1.3rem 0;
    }
}

/* ============================================================
   PORTFOLIO — carrusel 3D interactivo
   ============================================================ */
.portfolio {
    padding: 7rem 0 8rem;
    background: #080808;
    position: relative;
}
.portfolio::before,
.portfolio::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 160px;
    z-index: 20;
    pointer-events: none;
}
.portfolio::before { left: 0;  background: linear-gradient(to right, #080808 15%, transparent); }
.portfolio::after  { right: 0; background: linear-gradient(to left,  #080808 15%, transparent); }

.portfolio .container {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
}
.pb-eyebrow {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-color);
    opacity: 0.8;
    margin: 0 0 0.6rem;
}
.pb-title {
    font-size: clamp(1.3rem, 2.8vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.028em;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.1;
}
.pb-title span {
    color: transparent;
    -webkit-text-stroke: 1px rgba(255,255,255,0.42);
}

/* wrapper: contiene flechas + carrusel */
.pb-wrap {
    position: relative;
    max-width: 1060px;
    margin: 0 auto;
    padding: 0 64px;
}

/* flechas de navegación */
.pb-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.55);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.22s;
}
.pb-prev { left: 10px; }
.pb-next { right: 10px; }
.pb-nav:hover {
    background: rgba(255, 51, 102, 0.12);
    border-color: rgba(255, 51, 102, 0.45);
    color: #ff3366;
    transform: translateY(-50%) scale(1.1);
}

/* escenario 3D: posiciona las tarjetas con absolute */
.pb-carousel {
    position: relative;
    height: 445px;
    perspective: 1100px;
    perspective-origin: 50% 44%;
    overflow: visible;
    user-select: none;
}

/* === tarjetas === */
.pb-card {
    position: absolute;
    top: 0;
    left: 50%;
    width: 400px;
    margin-left: -200px;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border: 1px solid transparent;
    will-change: transform, filter;
    transition:
        transform    0.52s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        filter       0.52s ease,
        box-shadow   0.52s ease,
        border-color 0.52s ease;
}

/* centro — brillo neon rojo */
.pb-card[data-pos="0"] {
    transform: translateZ(30px) scale(1.04);
    z-index: 5;
    cursor: default;
    border-color: rgba(255, 51, 102, 0.65);
    box-shadow:
        0 0 16px  rgba(255, 51, 102, 0.6),
        0 0 50px  rgba(255, 51, 102, 0.3),
        0 0 100px rgba(255, 51, 102, 0.12),
        0 28px 65px rgba(0,0,0,0.7);
    filter: none;
}

/* izquierda */
.pb-card[data-pos="1"] {
    transform: translateX(-285px) rotateY(-22deg) translateZ(-55px) scale(0.92);
    z-index: 2;
    filter: brightness(0.48) saturate(0.5);
    box-shadow: 0 14px 40px rgba(0,0,0,0.5);
}

/* derecha */
.pb-card[data-pos="2"] {
    transform: translateX(285px) rotateY(22deg) translateZ(-55px) scale(0.92);
    z-index: 2;
    filter: brightness(0.48) saturate(0.5);
    box-shadow: 0 14px 40px rgba(0,0,0,0.5);
}

.pb-card[data-pos="1"]:hover,
.pb-card[data-pos="2"]:hover {
    filter: brightness(0.68) saturate(0.75);
    cursor: pointer;
}

/* chrome interior */
.pbc-chrome {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 11px;
    background: #181818;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pbc-chrome span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    flex-shrink: 0;
}
.pbc-url {
    flex: 1;
    background: rgba(255,255,255,0.06);
    border-radius: 5px;
    padding: 3px 9px;
    font-size: 0.62rem;
    color: rgba(255,255,255,0.3);
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* iframe preview */
.pbc-preview {
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: var(--pbc-fallback, #111);
    flex-shrink: 0;
    position: relative;
}
.pbc-preview .pbc-shot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    border: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.pbc-preview.loaded .pbc-shot { opacity: 1; }

/* skeleton shimmer mientras carga la demo */
.pbc-skeleton {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(100deg,
            rgba(255,255,255,0) 30%,
            rgba(255,255,255,0.06) 50%,
            rgba(255,255,255,0) 70%),
        var(--pbc-fallback, #111);
    background-size: 220% 100%, 100% 100%;
    animation: pbcShimmer 1.4s ease-in-out infinite;
    transition: opacity 0.4s ease;
}
.pbc-preview.loaded .pbc-skeleton {
    opacity: 0;
    pointer-events: none;
}
@keyframes pbcShimmer {
    0%   { background-position: 180% 0, 0 0; }
    100% { background-position: -80% 0, 0 0; }
}

/* info */
.pbc-info {
    padding: 12px 15px 14px;
    background: #111;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.pbc-cat {
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-color);
    opacity: 0.85;
}
.pbc-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.pbc-desc {
    font-size: 0.67rem;
    color: rgba(255,255,255,0.3);
    line-height: 1.55;
    margin: 0;
    flex: 1;
}
.pbc-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 7px;
    font-size: 0.69rem;
    font-weight: 600;
    color: var(--accent-color);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.2s, gap 0.2s;
    width: fit-content;
}
.pbc-link:hover { opacity: 1; gap: 8px; }
.pbc-link i { font-size: 0.6rem; }

/* dots */
.pb-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 2.2rem;
    position: relative;
    z-index: 2;
}
.pb-dot-btn {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s, width 0.3s, border-radius 0.3s;
    flex-shrink: 0;
}
.pb-dot-btn.active {
    width: 22px;
    border-radius: 3.5px;
    background: var(--accent-color);
}

/* responsive */
@media (max-width: 860px) {
    .pb-wrap { max-width: 100%; padding: 0 52px; }
    .pb-carousel { height: 420px; }
    .pb-card { width: 340px; margin-left: -170px; }
    .pb-card[data-pos="1"] { transform: translateX(-230px) rotateY(-20deg) translateZ(-45px) scale(0.9); }
    .pb-card[data-pos="2"] { transform: translateX(230px)  rotateY(20deg)  translateZ(-45px) scale(0.9); }
    .pbc-preview { height: 213px; }
}

@media (max-width: 580px) {
    .portfolio::before, .portfolio::after { width: 60px; }
    .pb-wrap { padding: 0 44px; }
    .pb-carousel { height: 390px; }
    .pb-card { width: 300px; margin-left: -150px; }
    .pb-card[data-pos="0"] { transform: translateZ(20px) scale(1.03); }
    .pb-card[data-pos="1"] { transform: translateX(-180px) rotateY(-18deg) translateZ(-35px) scale(0.88); }
    .pb-card[data-pos="2"] { transform: translateX(180px)  rotateY(18deg)  translateZ(-35px) scale(0.88); }
    .pbc-preview { height: 188px; }
}

/* ============================================================
   SECTORES — Para quién trabajamos
   ============================================================ */
.sectors {
    padding: 7rem 0;
    background: #0a0a0a;
}
.sectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 16px;
    margin-top: 3.5rem;
}
.sector-card {
    background: #111;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    padding: 1.7rem 1.5rem;
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    text-decoration: none;
    display: block;
}
.sector-card:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
    background: #141414;
}
.sector-ico {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 22%, transparent);
    margin-bottom: 1.1rem;
    transition: background 0.3s ease, transform 0.3s ease;
}
.sector-card:hover .sector-ico {
    background: color-mix(in srgb, var(--accent-color) 20%, transparent);
    transform: scale(1.06);
}
.sector-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.4rem;
    letter-spacing: -0.01em;
}
.sector-card p {
    font-size: 0.82rem;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin: 0;
}

/* tarjeta CTA destacada */
.sector-card-cta {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color) 10%, transparent), transparent);
    border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}
.sector-card-cta h3 { color: var(--accent-color); }
.sector-card-cta p i {
    font-size: 0.7rem;
    margin-left: 4px;
    transition: transform 0.25s ease;
}
.sector-card-cta:hover p i { transform: translateX(4px); }

@media (max-width: 600px) {
    .sectors { padding: 5rem 0; }
    .sectors-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .sector-card { padding: 1.3rem 1.1rem; }
    .sector-ico { width: 40px; height: 40px; font-size: 1rem; margin-bottom: 0.9rem; }
    .sector-card h3 { font-size: 0.9rem; }
    .sector-card p { font-size: 0.76rem; }
}

/* =====================================================
   SISTEMA ORBITAL DE MÓDULOS (addons) — KORA como sol
   ===================================================== */
.addon-orbit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    margin: 1rem 0 2.5rem;
}
.orbit-stage {
    position: relative;
    width: min(440px, 100%);
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    container-type: inline-size;   /* el radio (cqw) se mide respecto a la esfera */
    margin-inline: auto;
}
/* Anillos. "outer" = anillo base de los 8 originales (se encoge al expandir).
   "inner" = anillo exterior de los 8 nuevos (aparece hacia fuera al expandir). */
.orbit-ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--accent-color) 26%, transparent);
    pointer-events: none;
    transition: width .55s cubic-bezier(.2, .8, .2, 1), height .55s cubic-bezier(.2, .8, .2, 1), opacity .5s ease;
}
.orbit-ring-outer { width: 80%; height: 80%; animation: orbit-ring-spin 80s linear infinite; }
.addon-orbit.is-expanded .orbit-ring-outer { width: 56%; height: 56%; }
.orbit-ring-inner {
    width: 96%; height: 96%;
    border-color: color-mix(in srgb, var(--accent-color) 16%, transparent);
    opacity: 0;
    animation: orbit-ring-spin 60s linear infinite reverse;
}
.addon-orbit.is-expanded .orbit-ring-inner { opacity: 1; }
@keyframes orbit-ring-spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Núcleo: el "sol" KORA */
.orbit-sun {
    position: relative;
    width: clamp(90px, 22%, 126px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 40%, #1d1d1d, #0b0b0b 70%);
    border: 1px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
    box-shadow: 0 0 40px var(--accent-glow), 0 0 80px rgba(255, 51, 102, 0.18);
    z-index: 5;
}
.orbit-sun-logo { width: 56%; height: 56%; object-fit: contain; z-index: 2; filter: drop-shadow(0 0 8px rgba(255, 51, 102, 0.35)); }
.orbit-sun-glow { position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 51, 102, 0.35), transparent 65%); animation: orbit-pulse 3.2s ease-in-out infinite; }
@keyframes orbit-pulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.14); opacity: 1; } }

/* Sistema rotatorio: los nodos orbitan y su contenido se contra-rota para quedar recto.
   Al pasar el ratón por la esfera, la órbita se pausa para poder clicar cómodo. */
.orbit-system { position: absolute; inset: 0; transform-origin: 50% 50%; animation: orbit-spin 120s linear infinite; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.on-spin { position: relative; display: grid; place-items: center; width: 100%; height: 100%; animation: orbit-spin 120s linear infinite reverse; }
.orbit-stage:hover .orbit-system,
.orbit-stage:hover .on-spin { animation-play-state: paused; }

/* Nodos */
.orbit-node {
    --count: 8;
    --radius: 40cqw;
    --off: 0deg;
    position: absolute;
    top: 50%; left: 50%;
    width: 58px; height: 58px;
    margin: -29px 0 0 -29px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    cursor: pointer;
    z-index: 4;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1), scale .28s ease, background .25s, border-color .25s, color .25s, box-shadow .25s;
    transform: rotate(calc(var(--i) * (360deg / var(--count)) + var(--off)))
               translate(var(--radius))
               rotate(calc(var(--i) * (-360deg / var(--count)) - var(--off)));
}
/* Originales: se encogen hacia dentro al expandir */
.addon-orbit.is-expanded .orbit-node:not(.orbit-node--inner) { --radius: 28cqw; }
/* Nuevos: ocultos en el mismo radio; al expandir SALEN HACIA FUERA */
.orbit-node--inner { --radius: 40cqw; --off: 22.5deg; scale: 0; pointer-events: none; z-index: 3; }
.addon-orbit.is-expanded .orbit-node--inner { --radius: 48cqw; scale: 1; pointer-events: auto; }
.orbit-node i { font-size: 1.2rem; }
.orbit-node-label {
    position: absolute;
    bottom: -1.5rem;
    font-size: 0.66rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-primary);
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}
/* Hover sutil: pequeño aumento + glow (sin saltos bruscos) */
.orbit-node:hover,
.orbit-node:focus-visible,
.orbit-node.active {
    background: linear-gradient(135deg, var(--accent-color), #ff6b8a);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 16%, transparent), 0 0 22px var(--accent-glow);
    z-index: 7;
    scale: 1.16;
}
.orbit-node:hover .orbit-node-label,
.orbit-node:focus-visible .orbit-node-label,
.orbit-node.active .orbit-node-label { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .orbit-ring-outer, .orbit-ring-inner, .orbit-sun-glow, .orbit-system, .on-spin { animation: none; }
    .orbit-node, .orbit-ring { transition: none; }
}

/* Botón ver todos */
.orbit-toggle {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem 1.4rem;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: border-color .25s, color .25s, background .25s;
}
.orbit-toggle:hover { border-color: var(--accent-color); color: var(--accent-color); }

@media (max-width: 600px) {
    .orbit-node { width: 50px; height: 50px; margin: -25px 0 0 -25px; }
    .orbit-node i { font-size: 1.02rem; }
    .orbit-node-label { font-size: 0.58rem; bottom: -1.3rem; }
    .addon-orbit.is-expanded .orbit-node:not(.orbit-node--inner) { --radius: 30cqw; }
    .addon-orbit.is-expanded .orbit-node--inner { --radius: 47cqw; }
}

/* =====================================================
   SECTORES — rediseño "nicho abierto" (statement + marquee)
   ===================================================== */
.sectors { padding: clamp(4rem, 10vh, 7rem) 0; overflow: hidden; }
.sectors-statement { text-align: center; max-width: 760px; margin: 0 auto clamp(2.5rem, 6vh, 4rem); }
.sectors-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem 1rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--accent-color) 40%, transparent);
    color: var(--accent-color);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.sectors-headline {
    font-size: clamp(1.9rem, 5vw, 3.4rem);
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 1.2rem;
}
.sectors-headline .rotator {
    color: var(--accent-color);
    display: inline-block;
    min-width: 1ch;
    border-bottom: 3px solid color-mix(in srgb, var(--accent-color) 50%, transparent);
    transition: opacity .25s, transform .25s;
}
.sectors-headline .rotator.swap { opacity: 0; transform: translateY(8px); }
.sectors-sub {
    color: var(--text-secondary);
    font-size: clamp(1rem, 2vw, 1.18rem);
    max-width: 60ch;
    margin: 0 auto 2rem;
    line-height: 1.6;
}
.sectors-cta { display: inline-flex; align-items: center; gap: .5rem; }

/* Marquee */
.sectors-marquee {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.sm-track {
    display: flex;
    gap: 1.1rem;
    width: max-content;
    will-change: transform;
}
.sm-track-left  { animation: sm-scroll-left  38s linear infinite; }
.sm-track-right { animation: sm-scroll-right 44s linear infinite; }
.sectors-marquee:hover .sm-track { animation-play-state: paused; }
.sm-chip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    white-space: nowrap;
    padding: .8rem 1.4rem;
    border-radius: 999px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-light);
    font-weight: 600;
    font-size: .95rem;
    transition: border-color .25s, color .25s, background .25s;
}
.sm-chip i { color: var(--accent-color); }
.sm-chip:hover { border-color: var(--accent-color); color: var(--text-primary); }
@keyframes sm-scroll-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sm-scroll-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
    .sm-track-left, .sm-track-right { animation: none; }
    .sectors-headline .rotator { transition: none; }
}

/* ===================================================== */
/*  TESTIMONIOS / RESEÑAS                                */
/* ===================================================== */
.testimonials { padding: var(--section-spacing) 0; }
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 48px;
}
.testimonial-card {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
    padding: 28px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
.testimonial-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .45);
}
.testimonial-stars { color: var(--accent-color); display: flex; gap: 4px; font-size: .95rem; }
.testimonial-quote {
    margin: 0;
    color: var(--text-light);
    font-size: 1.05rem;
    line-height: 1.7;
    font-style: italic;
    flex: 1;
}
.testimonial-author { display: flex; align-items: center; gap: 14px; }
.testimonial-avatar {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    color: var(--accent-color);
}
.testimonial-meta { display: flex; flex-direction: column; line-height: 1.4; }
.testimonial-meta strong { color: var(--text-primary); font-size: .98rem; }
.testimonial-meta em { color: var(--text-tertiary); font-style: normal; font-size: .86rem; }
.testimonials-foot { display: flex; justify-content: center; margin-top: 40px; }
.testimonials-foot .btn-about i { margin-right: .5rem; }

/* ===================================================== */
/*  ÚLTIMO DEL BLOG (home)                                */
/* ===================================================== */
.blog-latest { padding: var(--section-spacing) 0; }
.blog-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 48px;
}
.blog-latest .blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}
.blog-latest .blog-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-color);
    box-shadow: 0 20px 30px rgba(0, 0, 0, .5);
}
.blog-latest .blog-card-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.blog-latest .blog-card-body { padding: 18px; display: flex; flex-direction: column; height: 100%; }
.blog-latest .blog-card-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin-bottom: 14px; font-size: .85rem; color: var(--text-secondary);
}
.blog-latest .blog-tag {
    display: inline-flex; padding: 6px 12px; border-radius: 14px;
    color: var(--accent-color);
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .03);
}
.blog-latest .blog-card h3 { color: var(--text-primary); font-size: 1.25rem; line-height: 1.3; margin: 0 0 12px; }
.blog-latest .blog-card h3 a { color: inherit; text-decoration: none; }
.blog-latest .blog-card p { color: var(--text-secondary); line-height: 1.7; margin: 0 0 16px; }
.blog-latest .blog-card-link {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: auto; color: var(--accent-color); text-decoration: none; font-weight: 600;
}
.blog-latest-foot { display: flex; justify-content: center; margin-top: 40px; }

@media (max-width: 900px) {
    .testimonials-grid,
    .blog-preview-grid { grid-template-columns: 1fr; }
}

/* ===================================================== */
/*  SHOWCASE DE MÓDULOS (demo animada + info)            */
/* ===================================================== */
.addon-inline-panel.open { max-height: 540px; }

.addon-detail-panel {
    display: grid;
    grid-template-columns: minmax(0, 300px) 1fr;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg, #141414, #0f0f0f);
    border: 1px solid #242424;
    border-left: 3px solid var(--accent-color);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}
.adp-close {
    position: absolute;
    top: 12px; right: 12px; z-index: 6;
    order: 0;
    width: 30px; height: 30px; border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    max-width: none;
}
.adp-demo {
    position: relative;
    min-height: 240px;
    display: grid;
    place-items: center;
    padding: 24px;
    background: radial-gradient(circle at 30% 18%, rgba(255, 51, 102, 0.12), transparent 60%), #0c0c0c;
    border-right: 1px solid #1e1e1e;
    overflow: hidden;
}
.adp-demo::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(circle at center, #000 35%, transparent 78%);
    mask-image: radial-gradient(circle at center, #000 35%, transparent 78%);
    pointer-events: none;
}
.adp-info {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 13px; padding: 28px 30px;
}
.adp-head { display: flex; align-items: center; gap: 12px; }
.adp-info .adp-icon-wrap {
    order: 0; width: 46px; height: 46px; border-radius: 13px;
}
.adp-info .adp-icon-wrap i { font-size: 1.15rem; }
.adp-info .adp-title {
    order: 0; max-width: none; white-space: normal;
    border-right: none; padding-right: 0; overflow: visible;
    font-size: 1.3rem; line-height: 1.15;
}
.adp-info .adp-desc {
    order: 0; display: block; overflow: visible;
    -webkit-line-clamp: unset; -webkit-box-orient: unset;
    font-size: 0.92rem; line-height: 1.62; color: var(--text-secondary);
}
.adp-info .adp-features { order: 0; max-width: none; gap: 7px; }
.adp-info .adp-features span { font-size: 0.72rem; padding: 4px 11px; }
.adp-info .adp-cta { margin-top: 6px; padding: 11px 20px; font-size: 0.9rem; }

@media (max-width: 760px) {
    .addon-inline-panel.open { max-height: 660px; }
    .addon-detail-panel { grid-template-columns: 1fr; }
    .adp-demo { min-height: 200px; border-right: none; border-bottom: 1px solid #1e1e1e; }
    .adp-info { padding: 22px; }
}

/* ---- Lienzo común de las demos ---- */
.dmo { width: 100%; max-width: 232px; font-family: var(--font-sans); position: relative; z-index: 1; }
@keyframes dmoUp   { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes dmoPop  { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.18); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes dmoToast{ from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Reservas */
.dmo-cal { background: #161616; border: 1px solid #262626; border-radius: 14px; padding: 14px; }
.dmo-cal-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; font-weight: 600; color: var(--text-primary); margin-bottom: 11px; }
.dmo-cal-head i { color: var(--accent-color); }
.dmo-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.dmo-days b { aspect-ratio: 1; display: grid; place-items: center; font-size: 0.72rem; font-weight: 600; color: var(--text-secondary); background: #1e1e1e; border-radius: 8px; }
.dmo-days b.pick { color: #000; background: var(--accent-color); animation: dmoPop 0.5s 0.3s both; }
.dmo-slots { display: flex; gap: 6px; }
.dmo-slots span { flex: 1; text-align: center; font-size: 0.68rem; padding: 6px 0; border-radius: 8px; background: #1e1e1e; color: var(--text-secondary); border: 1px solid #2a2a2a; opacity: 0; animation: dmoUp 0.4s both; }
.dmo-slots span:nth-child(1) { animation-delay: 0.5s; }
.dmo-slots span:nth-child(2) { animation-delay: 0.62s; }
.dmo-slots span:nth-child(3) { animation-delay: 0.74s; }
.dmo-slots span.sel { color: #000; background: var(--accent-color); border-color: var(--accent-color); }
.dmo-confirm { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 0.74rem; font-weight: 700; color: #000; background: linear-gradient(135deg, #15d27a, #0fae63); padding: 8px; border-radius: 10px; opacity: 0; animation: dmoToast 0.5s 1.05s both; box-shadow: 0 8px 20px rgba(21, 210, 122, 0.3); }

/* Tienda */
.dmo-shop { max-width: 230px; }
.dmo-shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dmo-prod { background: #161616; border: 1px solid #262626; border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; opacity: 0; animation: dmoUp 0.4s both; }
.dmo-prod:nth-child(1) { animation-delay: 0.05s; }
.dmo-prod:nth-child(2) { animation-delay: 0.15s; }
.dmo-prod:nth-child(3) { animation-delay: 0.25s; }
.dmo-prod-img { aspect-ratio: 1; border-radius: 6px; background: linear-gradient(135deg, #2a2a2a, #1b1b1b); }
.dmo-prod b { font-size: 0.7rem; color: var(--text-secondary); }
.dmo-prod.hot { border-color: var(--accent-color); box-shadow: 0 0 0 1px var(--accent-color); }
.dmo-prod.hot b { color: var(--accent-color); }
.dmo-cart { position: absolute; right: -4px; bottom: -12px; width: 42px; height: 42px; border-radius: 12px; background: var(--accent-color); color: #000; display: grid; place-items: center; font-size: 1rem; box-shadow: 0 8px 20px rgba(255, 51, 102, 0.4); animation: dmoPop 0.4s 0.9s both; }
.dmo-badge { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #000; font-size: 0.62rem; font-weight: 800; display: grid; place-items: center; opacity: 0; animation: dmoPop 0.3s 1.25s both; }
.dmo-fly { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--accent-color); opacity: 0; animation: dmoFly 1s 0.55s both; }
@keyframes dmoFly { 0% { opacity: 0; left: 46%; top: 16%; transform: scale(1); } 15% { opacity: 1; } 100% { opacity: 0; left: 88%; top: 92%; transform: scale(0.3); } }

/* SEO */
.dmo-seo { max-width: 230px; }
.dmo-serp { display: flex; flex-direction: column-reverse; gap: 6px; }
.dmo-row { display: flex; align-items: center; gap: 8px; background: #161616; border: 1px solid #242424; border-radius: 8px; padding: 8px 10px; }
.dmo-row em { font-style: normal; font-size: 0.7rem; font-weight: 700; color: var(--text-tertiary); width: 14px; flex-shrink: 0; }
.dmo-row s { flex: 1; height: 7px; border-radius: 4px; background: #2a2a2a; }
.dmo-row.you { border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 12%, #161616); animation: dmoClimb 1s 0.3s both; }
.dmo-row.you em { color: var(--accent-color); }
.dmo-row.you span { font-size: 0.72rem; font-weight: 700; color: var(--text-primary); flex: 1; }
.dmo-row.you i { color: var(--accent-color); font-size: 0.7rem; margin-left: auto; animation: dmoUpArrow 1s 1.2s infinite; }
@keyframes dmoClimb { 0% { transform: translateY(120px); opacity: 0; } 55% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes dmoUpArrow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.dmo-seo-badge { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; color: #000; background: var(--accent-color); padding: 6px 12px; border-radius: 999px; opacity: 0; animation: dmoPop 0.4s 1.2s both; }

/* Reseñas */
.dmo-rev { max-width: 230px; text-align: center; }
.dmo-stars { display: flex; justify-content: center; gap: 7px; font-size: 1.4rem; margin-bottom: 10px; }
.dmo-stars i { color: #333; transform: scale(0.7); animation: dmoStar 0.4s both; }
.dmo-stars i:nth-child(1) { animation-delay: 0.1s; }
.dmo-stars i:nth-child(2) { animation-delay: 0.22s; }
.dmo-stars i:nth-child(3) { animation-delay: 0.34s; }
.dmo-stars i:nth-child(4) { animation-delay: 0.46s; }
.dmo-stars i:nth-child(5) { animation-delay: 0.58s; }
@keyframes dmoStar { to { transform: scale(1); color: var(--accent-color); } }
.dmo-score { font-size: 2.4rem; font-weight: 800; color: var(--text-primary); line-height: 1; opacity: 0; animation: dmoPop 0.5s 0.7s both; }
.dmo-rev-list { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; }
.dmo-rev-list span { height: 9px; border-radius: 5px; background: #1e1e1e; opacity: 0; animation: dmoUp 0.4s both; }
.dmo-rev-list span:nth-child(1) { width: 88%; animation-delay: 0.9s; }
.dmo-rev-list span:nth-child(2) { width: 72%; animation-delay: 1s; }
.dmo-rev-list span:nth-child(3) { width: 80%; animation-delay: 1.1s; }

/* Base de datos */
.dmo-db { max-width: 230px; }
.dmo-db-bar { display: flex; align-items: center; gap: 8px; background: #161616; border: 1px solid #2a2a2a; border-radius: 9px; padding: 9px 11px; margin-bottom: 10px; }
.dmo-db-bar i { color: var(--text-tertiary); font-size: 0.8rem; }
.dmo-db-q { height: 8px; border-radius: 4px; background: var(--accent-color); width: 0; animation: dmoType 1s 0.2s both; }
@keyframes dmoType { to { width: 58%; } }
.dmo-db-caret { width: 2px; height: 14px; background: var(--accent-color); animation: dmoBlink 0.7s steps(1) infinite; }
@keyframes dmoBlink { 50% { opacity: 0; } }
.dmo-db-rows { display: flex; flex-direction: column; gap: 6px; }
.dmo-db-rows span { height: 11px; border-radius: 5px; background: #1c1c1c; border: 1px solid #262626; opacity: 0; animation: dmoUp 0.35s both; }
.dmo-db-rows span:nth-child(1) { animation-delay: 1.05s; }
.dmo-db-rows span:nth-child(2) { animation-delay: 1.18s; }
.dmo-db-rows span:nth-child(3) { animation-delay: 1.31s; }
.dmo-db-rows span:nth-child(4) { animation-delay: 1.44s; }
.dmo-db-rows span:nth-child(5) { animation-delay: 1.57s; }
.dmo-db-rows span.hit { background: color-mix(in srgb, var(--accent-color) 18%, #1c1c1c); border-color: var(--accent-color); }

/* Pasarela de pago */
.dmo-pay { max-width: 218px; }
.dmo-card { aspect-ratio: 1.6; border-radius: 14px; background: linear-gradient(135deg, #2b2b2b, #141414); border: 1px solid #333; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; animation: dmoCardIn 0.6s both; }
.dmo-card::after { content: ''; position: absolute; top: -50%; left: -60%; width: 55%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent); transform: rotate(20deg); animation: dmoShine 2.6s 1s infinite; }
@keyframes dmoCardIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes dmoShine { 0% { left: -60%; } 55%, 100% { left: 150%; } }
.dmo-chip { width: 32px; height: 24px; border-radius: 6px; background: linear-gradient(135deg, #d9a441, #b8842a); }
.dmo-num { display: flex; gap: 8px; }
.dmo-num s { flex: 1; height: 8px; border-radius: 3px; background: #3a3a3a; transform: scaleX(0); transform-origin: left; animation: dmoFill 0.3s both; }
.dmo-num s:nth-child(1) { animation-delay: 0.5s; }
.dmo-num s:nth-child(2) { animation-delay: 0.62s; }
.dmo-num s:nth-child(3) { animation-delay: 0.74s; }
.dmo-num s:nth-child(4) { animation-delay: 0.86s; }
@keyframes dmoFill { to { transform: scaleX(1); } }
.dmo-card-foot { display: flex; justify-content: space-between; align-items: center; }
.dmo-card-foot em { width: 46px; height: 7px; border-radius: 4px; background: #3a3a3a; }
.dmo-card-foot i { color: #fff; font-size: 1.3rem; opacity: 0.85; }
.dmo-pay-ok { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 0.76rem; font-weight: 700; color: #000; background: linear-gradient(135deg, #15d27a, #0fae63); padding: 8px; border-radius: 10px; opacity: 0; animation: dmoToast 0.5s 1.15s both; box-shadow: 0 8px 20px rgba(21, 210, 122, 0.3); }

/* Multiidioma */
.dmo-lang { max-width: 220px; text-align: center; }
.dmo-globe { font-size: 1.8rem; color: var(--accent-color); margin-bottom: 10px; animation: dmoSpin 7s linear infinite; }
@keyframes dmoSpin { to { transform: rotate(360deg); } }
.dmo-words { position: relative; height: 40px; }
.dmo-words span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; color: var(--text-primary); opacity: 0; animation: dmoWord 6s infinite; }
.dmo-words .w0 { animation-delay: 0s; }
.dmo-words .w1 { animation-delay: 1.5s; }
.dmo-words .w2 { animation-delay: 3s; }
.dmo-words .w3 { animation-delay: 4.5s; }
@keyframes dmoWord { 0% { opacity: 0; transform: translateY(8px); } 4%, 20% { opacity: 1; transform: none; } 25%, 100% { opacity: 0; transform: translateY(-8px); } }
.dmo-flags { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.dmo-flags b { font-size: 0.62rem; font-weight: 700; padding: 4px 9px; border-radius: 6px; background: #1c1c1c; border: 1px solid #2a2a2a; color: var(--text-tertiary); animation: dmoFlag 6s infinite; }
.dmo-flags .w0 { animation-delay: 0s; }
.dmo-flags .w1 { animation-delay: 1.5s; }
.dmo-flags .w2 { animation-delay: 3s; }
.dmo-flags .w3 { animation-delay: 4.5s; }
@keyframes dmoFlag { 0%, 25%, 100% { background: #1c1c1c; color: var(--text-tertiary); border-color: #2a2a2a; } 4%, 20% { background: var(--accent-color); color: #000; border-color: var(--accent-color); } }

/* Analytics */
.dmo-an { max-width: 230px; }
.dmo-an-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.dmo-an-val { font-size: 1.7rem; font-weight: 800; color: var(--text-primary); opacity: 0; animation: dmoUp 0.5s 0.2s both; }
.dmo-an-up { font-size: 0.72rem; font-weight: 700; color: #15d27a; opacity: 0; animation: dmoUp 0.5s 0.4s both; }
.dmo-an-svg { width: 100%; height: 56px; display: block; }
.dmo-an-area { fill: rgba(255, 51, 102, 0.12); opacity: 0; animation: dmoFade 0.8s 0.5s both; }
.dmo-an-line { fill: none; stroke: var(--accent-color); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 320; stroke-dashoffset: 320; animation: dmoDraw 1.2s 0.4s forwards; }
@keyframes dmoDraw { to { stroke-dashoffset: 0; } }
@keyframes dmoFade { to { opacity: 1; } }
.dmo-an-bars { display: flex; gap: 7px; align-items: flex-end; height: 34px; margin-top: 8px; }
.dmo-an-bars b { flex: 1; background: #262626; border-radius: 3px 3px 0 0; height: 0; animation: dmoBar 0.5s both; }
.dmo-an-bars b:nth-child(1) { --h: 40%; animation-delay: 0.7s; }
.dmo-an-bars b:nth-child(2) { --h: 65%; animation-delay: 0.8s; }
.dmo-an-bars b:nth-child(3) { --h: 50%; animation-delay: 0.9s; }
.dmo-an-bars b:nth-child(4) { --h: 80%; animation-delay: 1s; }
.dmo-an-bars b:nth-child(5) { --h: 58%; animation-delay: 1.1s; }
.dmo-an-bars b:nth-child(6) { --h: 95%; animation-delay: 1.2s; }
.dmo-an-bars b:last-child { background: var(--accent-color); }
@keyframes dmoBar { to { height: var(--h); } }

/* Default (módulos sin demo propia: usa su icono) */
.dmo-def { width: 120px; height: 120px; display: grid; place-items: center; }
.dmo-def-core { width: 60px; height: 60px; border-radius: 18px; background: color-mix(in srgb, var(--accent-color) 14%, #161616); border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent); display: grid; place-items: center; color: var(--accent-color); font-size: 1.5rem; z-index: 2; animation: dmoPop 0.5s both; }
.dmo-def-ring { position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--accent-color); opacity: 0; animation: dmoRing 2.4s infinite; }
.dmo-def-ring:nth-child(2) { animation-delay: 0.8s; }
.dmo-def-ring:nth-child(3) { animation-delay: 1.6s; }
@keyframes dmoRing { 0% { opacity: 0.55; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.3); } }

/* Panel de administración */
.dmo-admin { display: grid; grid-template-columns: 44px 1fr; gap: 10px; width: 100%; max-width: 232px; height: 150px; background: #161616; border: 1px solid #262626; border-radius: 12px; padding: 12px; }
.dmo-admin-side { display: flex; flex-direction: column; gap: 7px; }
.dmo-admin-side s { height: 9px; border-radius: 4px; background: #242424; opacity: 0; animation: dmoUp 0.35s both; }
.dmo-admin-side s:nth-child(1) { animation-delay: 0.1s; }
.dmo-admin-side s:nth-child(2) { animation-delay: 0.2s; }
.dmo-admin-side s:nth-child(3) { animation-delay: 0.3s; }
.dmo-admin-side s:nth-child(4) { animation-delay: 0.4s; }
.dmo-admin-side s.on { background: var(--accent-color); }
.dmo-admin-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dmo-admin-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.dmo-admin-cards b { height: 30px; border-radius: 7px; background: #1e1e1e; border: 1px solid #2a2a2a; opacity: 0; animation: dmoPop 0.4s both; }
.dmo-admin-cards b:nth-child(1) { animation-delay: 0.45s; }
.dmo-admin-cards b:nth-child(2) { animation-delay: 0.55s; }
.dmo-admin-cards b:nth-child(3) { animation-delay: 0.65s; }
.dmo-admin-chart { display: flex; align-items: flex-end; gap: 6px; height: 46px; }
.dmo-admin-chart i { flex: 1; background: #2a2a2a; border-radius: 3px 3px 0 0; height: 0; animation: dmoBar 0.5s both; }
.dmo-admin-chart i:nth-child(1) { --h: 45%; animation-delay: 0.7s; }
.dmo-admin-chart i:nth-child(2) { --h: 70%; animation-delay: 0.8s; }
.dmo-admin-chart i:nth-child(3) { --h: 55%; animation-delay: 0.9s; }
.dmo-admin-chart i:nth-child(4) { --h: 85%; animation-delay: 1s; }
.dmo-admin-chart i:nth-child(5) { --h: 65%; animation-delay: 1.1s; }
.dmo-admin-chart i:last-child { background: var(--accent-color); }

/* Blog / Noticias */
.dmo-blog { width: 100%; max-width: 210px; background: #161616; border: 1px solid #262626; border-radius: 12px; padding: 12px; position: relative; }
.dmo-blog-img { aspect-ratio: 16 / 8; border-radius: 8px; background: linear-gradient(135deg, #2a2a2a, #1b1b1b); margin-bottom: 12px; opacity: 0; animation: dmoUp 0.5s both; }
.dmo-blog-tag { position: absolute; top: 20px; left: 20px; font-size: 0.6rem; font-weight: 700; color: #000; background: var(--accent-color); padding: 3px 9px; border-radius: 999px; opacity: 0; animation: dmoPop 0.4s 0.4s both; }
.dmo-blog-lines { display: flex; flex-direction: column; gap: 7px; }
.dmo-blog-lines s { height: 8px; border-radius: 4px; background: #242424; opacity: 0; animation: dmoUp 0.35s both; }
.dmo-blog-lines s:nth-child(1) { width: 95%; animation-delay: 0.5s; }
.dmo-blog-lines s:nth-child(2) { width: 80%; animation-delay: 0.62s; }
.dmo-blog-lines s:nth-child(3) { width: 88%; animation-delay: 0.74s; }

/* Área de clientes */
.dmo-area { width: 100%; max-width: 220px; }
.dmo-area-top { display: flex; align-items: center; gap: 10px; background: #161616; border: 1px solid #262626; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.dmo-area-av { width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--accent-color) 16%, #1e1e1e); border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent); display: grid; place-items: center; color: var(--accent-color); flex-shrink: 0; animation: dmoPop 0.4s both; }
.dmo-area-top s { flex: 1; height: 9px; border-radius: 4px; background: #242424; opacity: 0; animation: dmoUp 0.4s 0.3s both; }
.dmo-area-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dmo-area-menu b { aspect-ratio: 1.3; border-radius: 10px; background: #1a1a1a; border: 1px solid #262626; display: grid; place-items: center; color: var(--text-tertiary); font-size: 1rem; opacity: 0; animation: dmoUp 0.4s both; }
.dmo-area-menu b:nth-child(1) { animation-delay: 0.5s; }
.dmo-area-menu b:nth-child(2) { animation-delay: 0.62s; color: var(--accent-color); border-color: color-mix(in srgb, var(--accent-color) 30%, transparent); }
.dmo-area-menu b:nth-child(3) { animation-delay: 0.74s; }

/* Email marketing */
.dmo-email { width: 100%; max-width: 200px; text-align: center; }
.dmo-env { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 18px; background: color-mix(in srgb, var(--accent-color) 14%, #161616); border: 1px solid color-mix(in srgb, var(--accent-color) 28%, transparent); display: grid; place-items: center; color: var(--accent-color); font-size: 1.5rem; animation: dmoEnvPop 0.6s both; }
@keyframes dmoEnvPop { 0% { opacity: 0; transform: translateY(10px) rotate(-8deg); } 60% { transform: rotate(4deg); } 100% { opacity: 1; transform: none; } }
.dmo-env i { animation: dmoPlane 1.8s 0.8s infinite; }
@keyframes dmoPlane { 0%, 100% { transform: translate(0, 0); } 45% { transform: translate(4px, -4px); } }
.dmo-email-stat { display: flex; align-items: center; gap: 9px; }
.dmo-email-bar { flex: 1; height: 8px; border-radius: 4px; background: #242424; position: relative; overflow: hidden; }
.dmo-email-bar::after { content: ''; position: absolute; inset: 0; width: 0; background: var(--accent-color); border-radius: 4px; animation: dmoMail 1.2s 0.5s both; }
@keyframes dmoMail { to { width: 68%; } }
.dmo-email-stat em { font-size: 0.74rem; font-weight: 700; color: var(--accent-color); font-style: normal; opacity: 0; animation: dmoUp 0.4s 1.5s both; }

/* Google Maps */
.dmo-map { position: relative; width: 174px; height: 150px; border-radius: 14px; overflow: hidden; background: #12161c; border: 1px solid #262626; }
.dmo-map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 26px 26px; }
.dmo-map-pulse { position: absolute; left: 50%; top: 54%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: color-mix(in srgb, var(--accent-color) 40%, transparent); animation: dmoMapPulse 2s 0.5s infinite; }
@keyframes dmoMapPulse { 0% { transform: scale(0.5); opacity: 0.7; } 100% { transform: scale(3.6); opacity: 0; } }
.dmo-map-pin { position: absolute; left: 50%; top: 54%; color: var(--accent-color); font-size: 1.8rem; animation: dmoPinDrop 0.6s 0.2s both; }
@keyframes dmoPinDrop { 0% { opacity: 0; transform: translate(-50%, -260%); } 60% { transform: translate(-50%, -85%); } 100% { opacity: 1; transform: translate(-50%, -100%); } }

/* Login / Registro */
.dmo-login { width: 100%; max-width: 200px; }
.dmo-login-field { display: flex; align-items: center; gap: 9px; background: #161616; border: 1px solid #2a2a2a; border-radius: 9px; padding: 10px 12px; margin-bottom: 9px; }
.dmo-login-field i { color: var(--text-tertiary); font-size: 0.8rem; }
.dmo-login-field s { flex: 1; height: 8px; border-radius: 4px; background: #242424; position: relative; overflow: hidden; }
.dmo-login-field s::after { content: ''; position: absolute; inset: 0; width: 0; background: var(--accent-color); border-radius: 4px; }
.dmo-login-field:nth-child(1) s::after { animation: dmoTypeA 0.6s 0.3s both; }
.dmo-login-field:nth-child(2) s::after { animation: dmoTypeB 0.6s 0.9s both; }
@keyframes dmoTypeA { to { width: 72%; } }
@keyframes dmoTypeB { to { width: 55%; } }
.dmo-login-btn { height: 38px; border-radius: 9px; background: #242424; display: grid; place-items: center; color: #242424; margin-top: 4px; animation: dmoLoginOk 0.4s 1.5s both; }
@keyframes dmoLoginOk { to { background: linear-gradient(135deg, #15d27a, #0fae63); color: #000; } }

/* Móvil compartido (push + PWA) */
.dmo-push, .dmo-pwa { display: grid; place-items: center; }
.dmo-phone { width: 112px; height: 152px; border-radius: 20px; background: #0e0e0e; border: 2px solid #2a2a2a; padding: 16px 10px 10px; position: relative; overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); }
.dmo-phone-notch { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 34px; height: 5px; border-radius: 3px; background: #2a2a2a; }
/* Notificaciones push */
.dmo-push-notif { display: flex; align-items: center; gap: 8px; background: #1c1c1c; border: 1px solid #303030; border-radius: 10px; padding: 8px; margin-top: 6px; animation: dmoNotif 0.6s 0.5s both; }
@keyframes dmoNotif { 0% { opacity: 0; transform: translateY(-44px); } 100% { opacity: 1; transform: none; } }
.dmo-push-ico { width: 24px; height: 24px; border-radius: 7px; background: var(--accent-color); color: #000; display: grid; place-items: center; font-size: 0.68rem; flex-shrink: 0; }
.dmo-push-lines { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.dmo-push-lines s { height: 5px; border-radius: 3px; background: #333; }
.dmo-push-lines s:first-child { width: 80%; }
.dmo-push-lines s:last-child { width: 55%; }
/* App PWA */
.dmo-pwa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.dmo-pwa-grid b { aspect-ratio: 1; border-radius: 11px; background: #1e1e1e; border: 1px solid #2c2c2c; opacity: 0; animation: dmoPop 0.4s both; }
.dmo-pwa-grid b:nth-child(1) { animation-delay: 0.2s; }
.dmo-pwa-grid b:nth-child(2) { animation-delay: 0.3s; }
.dmo-pwa-grid b:nth-child(4) { animation-delay: 0.45s; }
.dmo-pwa-grid b:nth-child(5) { animation-delay: 0.55s; }
.dmo-pwa-grid b:nth-child(6) { animation-delay: 0.65s; }
.dmo-pwa-grid b.install { background: var(--accent-color); color: #000; display: grid; place-items: center; font-size: 0.8rem; animation: dmoInstall 0.7s 0.85s both; }
@keyframes dmoInstall { 0% { opacity: 0; transform: scale(0); } 55% { transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
.dmo-pwa-grid b.install i { animation: dmoDown 1.5s 1.5s infinite; }
@keyframes dmoDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

@media (prefers-reduced-motion: reduce) {
    .dmo *, .dmo { animation-duration: 0.001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

/* ===================================================== */
/*  HOME · Sobre nosotros (preview de equipo)            */
/* ===================================================== */
.about-team {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: center;
}
.about-team-kicker {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--accent-color);
    margin-bottom: 18px;
}
.about-team-title {
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1.1;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 18px;
}
.about-team-title .hl {
    background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent-color) 32%, transparent) 0);
    padding: 0 3px;
}
.about-team-sub {
    color: var(--text-secondary);
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0 0 28px;
    max-width: 46ch;
}
.about-team-faces {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: start;
}
.atp-face {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    text-decoration: none;
    margin-top: calc((2 - var(--i)) * 22px);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease, box-shadow 0.45s ease;
}
.atp-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.9);
    transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.atp-face::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.78));
    z-index: 1;
}
.atp-face:hover {
    transform: translateY(-8px);
    border-color: var(--accent-color);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5);
}
.atp-face:hover img {
    filter: grayscale(0) brightness(1);
    transform: scale(1.06);
}
.atp-face-meta {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
}
.atp-face-meta strong { color: #fff; font-size: 0.98rem; line-height: 1.2; }
.atp-face-meta em { color: var(--accent-color); font-style: normal; font-size: 0.72rem; margin-top: 2px; }

@media (max-width: 860px) {
    .about-team { grid-template-columns: 1fr; gap: 34px; }
    .atp-face { margin-top: 0; }
}
@media (max-width: 480px) {
    .about-team-faces { gap: 10px; }
    .atp-face-meta strong { font-size: 0.82rem; }
    .atp-face-meta em { font-size: 0.62rem; }
}

/* ===================================================== */
/*  Layout "Qué puedes añadir": órbita (izq) + demo (der) */
/* ===================================================== */
.addon-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 30px;
    align-items: center;
    margin-top: 24px;
}
.addon-layout .addon-orbit { margin: 0; gap: 1.4rem; }
.addon-layout .orbit-stage { width: min(430px, 100%); }
/* El panel deja de colapsar: siempre visible junto a la órbita */
.addon-layout .addon-inline-panel.open {
    max-height: none;
    margin-top: 0;
    overflow: visible;
}
.addon-layout .addon-detail-panel { grid-template-columns: minmax(0, 248px) 1fr; }

@media (max-width: 980px) {
    .addon-layout { grid-template-columns: 1fr; gap: 26px; }
    .addon-layout .orbit-stage { width: min(420px, 86vw); }
    .addon-layout .addon-detail-panel { grid-template-columns: minmax(0, 300px) 1fr; }
}