/* ============================================================
   RED TEAM DEFENSE — Theme Base
   Dark Operations Center aesthetic · Apple-style elevated design
   ============================================================
   Aplica:
   - elevated-design: 8px grid, light weights, generous whitespace
   - apple-ui-skills: Inter, escalas dramáticas, focus 2px accent
   - motion-designer: arcs, anticipation, slow in/out
   - dramatic-2000ms-plus: hero reveal, cinematic
   ============================================================ */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    /* ── PALETA — Dark Operations Center ── */
    --rtd-bg-deep:       #050811;   /* fondo absoluto */
    --rtd-bg-base:       #0a0e1a;   /* fondo principal */
    --rtd-bg-surface:    #11151f;   /* cards, modales */
    --rtd-bg-elevated:   #161b26;   /* hover, raised */
    --rtd-bg-glass:      rgba(10, 14, 26, 0.72); /* glass nav */

    /* ── TEXTO ── */
    --rtd-text:          #e8eaed;   /* texto principal — nunca #fff puro */
    --rtd-text-muted:    #a0a4ad;   /* texto secundario */
    --rtd-text-subtle:   #6b7280;   /* texto terciario, labels */
    --rtd-text-dim:      #4a5060;   /* texto muy sutil, copyright */

    /* ── ACENTO CARMESÍ — Red Team brand ── */
    --rtd-crimson:       #c8102e;   /* acento principal */
    --rtd-crimson-soft:  #d63b54;   /* hover */
    --rtd-crimson-deep:  #8b0a1f;   /* sombras, profundidad */
    --rtd-crimson-glow:  rgba(200, 16, 46, 0.18); /* glow sutil */

    /* ── ACENTOS SECUNDARIOS ── */
    --rtd-cyan:          #5ac8fa;   /* cyan tech accent */
    --rtd-amber:         #ff9f0a;   /* warning, alertas */
    --rtd-emerald:       #30d158;   /* success, OK */

    /* ── BORDES Y LÍNEAS ── */
    --rtd-line:          rgba(255, 255, 255, 0.08);
    --rtd-line-strong:   rgba(255, 255, 255, 0.14);
    --rtd-line-crimson:  rgba(200, 16, 46, 0.32);

    /* ── ESPACIADO — 8px grid (Apple) ── */
    --rtd-space-1:  4px;
    --rtd-space-2:  8px;
    --rtd-space-3:  12px;
    --rtd-space-4:  16px;
    --rtd-space-5:  24px;
    --rtd-space-6:  32px;
    --rtd-space-7:  48px;
    --rtd-space-8:  64px;
    --rtd-space-9:  80px;
    --rtd-space-10: 96px;
    --rtd-space-11: 128px;
    --rtd-space-12: 160px;

    /* ── BORDER RADIUS ── */
    --rtd-r-sm:    8px;
    --rtd-r-md:    12px;
    --rtd-r-lg:    16px;
    --rtd-r-xl:    24px;
    --rtd-r-2xl:   32px;
    --rtd-r-full:  9999px;

    /* ── EASING — cinematic curves ── */
    --rtd-ease-out:        cubic-bezier(0.22, 0.61, 0.36, 1);
    --rtd-ease-in-out:     cubic-bezier(0.65, 0.05, 0.36, 1);
    --rtd-ease-emphasized: cubic-bezier(0.25, 1, 0.5, 1);  /* satisfacción */
    --rtd-ease-anticipate: cubic-bezier(0.55, 0.06, 0.68, 0.19); /* wind-up */

    /* ── DURATIONS ── */
    --rtd-dur-quick:   150ms;  /* hover, focus */
    --rtd-dur-base:    280ms;  /* transitions estándar */
    --rtd-dur-smooth:  400ms;  /* scroll reveals — motion priority */
    --rtd-dur-slow:    800ms;  /* énfasis */
    --rtd-dur-cinema:  2400ms; /* hero cinematic reveal */

    /* ── SHADOWS — sutiles, dirección desde arriba ── */
    --rtd-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
    --rtd-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.5);
    --rtd-shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.6);
    --rtd-shadow-xl:  0 24px 60px rgba(0, 0, 0, 0.7);
    --rtd-shadow-crimson: 0 0 40px rgba(200, 16, 46, 0.25);

    /* ── LAYOUT ── */
    --rtd-content-narrow:   720px;
    --rtd-content-default:  1200px;
    --rtd-content-wide:     1440px;

    /* ── TYPOGRAPHY ── */
    --rtd-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --rtd-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    color-scheme: dark;
}

body {
    margin: 0;
    font-family: var(--rtd-font-sans);
    font-weight: 300;
    font-size: 17px;
    line-height: 1.6;
    color: var(--rtd-text);
    background: var(--rtd-bg-deep);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }

a {
    color: var(--rtd-text);
    text-decoration: none;
    transition: color var(--rtd-dur-base) var(--rtd-ease-out);
}
a:hover { color: var(--rtd-crimson-soft); }

button {
    font: inherit;
    cursor: pointer;
    color: inherit;
    background: none;
    border: 0;
}

::selection { background: var(--rtd-crimson); color: #fff; }

/* Focus accesible — siempre visible, color carmesí */
:focus-visible {
    outline: 2px solid var(--rtd-crimson);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ============================================================
   SCROLL PROGRESS BAR — top of viewport
   ============================================================ */
.rtd-scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, var(--rtd-crimson), var(--rtd-crimson-soft));
    z-index: 200;
    transform-origin: left;
    transform: scaleX(0);
    will-change: transform;
    box-shadow: 0 0 8px var(--rtd-crimson-glow);
    pointer-events: none;
}

/* ============================================================
   GRADIENT TEXT ACCENT — para palabras clave en headlines
   ============================================================ */
.rtd-accent-grad {
    background: linear-gradient(120deg, var(--rtd-crimson) 0%, var(--rtd-crimson-soft) 55%, #ff7088 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding-right: 0.05em;
}

/* Screen reader only */
.rtd-sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ============================================================
   TIPOGRAFÍA — escala dramática Apple
   ============================================================ */

/* Hero headline — text-7xl/text-8xl */
.rtd-display {
    font-size: clamp(48px, 7vw, 96px);
    font-weight: 200;
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: var(--rtd-text);
}

/* Section heading — text-5xl/text-6xl */
.rtd-h1 {
    font-size: clamp(36px, 4.5vw, 60px);
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -0.028em;
    margin: 0 0 var(--rtd-space-6) 0;
}

.rtd-h2 {
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 300;
    line-height: 1.15;
    letter-spacing: -0.022em;
    margin: 0 0 var(--rtd-space-5) 0;
}

.rtd-h3 {
    font-size: clamp(20px, 1.8vw, 24px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.012em;
    margin: 0 0 var(--rtd-space-4) 0;
}

.rtd-h4 {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
    margin: 0 0 var(--rtd-space-3) 0;
}

/* Eyebrow — micro label uppercase mono */
.rtd-eyebrow {
    font-family: var(--rtd-font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rtd-crimson);
    margin: 0 0 var(--rtd-space-4) 0;
}

/* Lead paragraph — large body */
.rtd-lead {
    font-size: clamp(18px, 1.4vw, 22px);
    font-weight: 300;
    line-height: 1.6;
    color: var(--rtd-text-muted);
    max-width: 640px;
}

/* Body normal */
.rtd-body {
    font-size: 17px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--rtd-text-muted);
}

/* Caption — pequeño meta */
.rtd-caption {
    font-size: 13px;
    color: var(--rtd-text-subtle);
    font-weight: 400;
}

/* Mono accents — para datos técnicos */
.rtd-mono {
    font-family: var(--rtd-font-mono);
    font-size: 0.92em;
    letter-spacing: 0.02em;
}

/* Text balance for headlines */
.rtd-h1, .rtd-h2, .rtd-display { text-wrap: balance; }
.rtd-body, .rtd-lead { text-wrap: pretty; }

/* ============================================================
   LAYOUT — containers
   ============================================================ */

.rtd-container {
    width: 100%;
    max-width: var(--rtd-content-default);
    margin: 0 auto;
    padding: 0 var(--rtd-space-5);
}
.rtd-container-narrow { max-width: var(--rtd-content-narrow); }
.rtd-container-wide   { max-width: var(--rtd-content-wide); }

.rtd-section {
    padding: var(--rtd-space-10) 0;
    position: relative;
}
.rtd-section-tight  { padding: var(--rtd-space-9) 0; }
.rtd-section-loose  { padding: var(--rtd-space-12) 0; }

/* Section header pattern (eyebrow + h1 + lead) */
.rtd-section-head {
    max-width: 720px;
    margin: 0 0 var(--rtd-space-9) 0;
}
.rtd-section-head--center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ============================================================
   BUTTONS — sistema completo
   ============================================================ */

.rtd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rtd-space-2);
    padding: 14px 28px;
    font-family: var(--rtd-font-sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.005em;
    border-radius: var(--rtd-r-full);
    transition: all var(--rtd-dur-base) var(--rtd-ease-out);
    cursor: pointer;
    min-height: 48px;       /* touch target Apple 44px+ */
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

/* Primary — gradient carmesí */
.rtd-btn-primary {
    background: linear-gradient(135deg, var(--rtd-crimson), var(--rtd-crimson-deep));
    color: #fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.1) inset,
        var(--rtd-shadow-md);
}
.rtd-btn-primary:hover {
    background: linear-gradient(135deg, var(--rtd-crimson-soft), var(--rtd-crimson));
    color: #fff;
    transform: translateY(-1px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.15) inset,
        var(--rtd-shadow-lg),
        var(--rtd-shadow-crimson);
}
.rtd-btn-primary:active {
    transform: translateY(0);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        var(--rtd-shadow-sm);
}

/* Secondary — ghost con borde */
.rtd-btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--rtd-line-strong);
    color: var(--rtd-text);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.rtd-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--rtd-line-crimson);
    color: var(--rtd-text);
    transform: translateY(-1px);
}

/* WhatsApp variant — emerald accent */
.rtd-btn-wa {
    background: linear-gradient(135deg, #25d366, #1da851);
    color: #fff;
    box-shadow: var(--rtd-shadow-md);
}
.rtd-btn-wa:hover {
    background: linear-gradient(135deg, #2eea73, #25d366);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--rtd-shadow-lg);
}

/* Text link — Apple style */
.rtd-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--rtd-crimson-soft);
    font-size: 15px;
    font-weight: 500;
    transition: gap var(--rtd-dur-base) var(--rtd-ease-out),
                color var(--rtd-dur-base) var(--rtd-ease-out);
}
.rtd-link-arrow:hover {
    color: var(--rtd-crimson);
    gap: 10px;
}
.rtd-link-arrow svg {
    width: 14px;
    height: 14px;
    transition: transform var(--rtd-dur-base) var(--rtd-ease-out);
}

/* Size variants */
.rtd-btn-lg { padding: 18px 36px; font-size: 16px; min-height: 56px; }
.rtd-btn-sm { padding: 10px 20px; font-size: 14px; min-height: 40px; }

/* ============================================================
   REVEAL ANIMATIONS — scroll triggered (motion priority: smooth)
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
    .rtd-reveal {
        opacity: 0;
        transform: translateY(20px);
        transition:
            opacity var(--rtd-dur-smooth) var(--rtd-ease-out),
            transform var(--rtd-dur-smooth) var(--rtd-ease-out);
        will-change: opacity, transform;
    }
    .rtd-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

    /* Variantes con stagger via data-delay */
    .rtd-reveal-fade {
        opacity: 0;
        transition: opacity var(--rtd-dur-slow) var(--rtd-ease-out);
    }
    .rtd-reveal-fade.is-visible { opacity: 1; }
}

/* Mobile: reducir animaciones (priority de UX) */
@media (max-width: 768px) {
    .rtd-reveal,
    .rtd-reveal-fade {
        transition-duration: 280ms !important;
        transform: translateY(12px);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   CARDS — base sistema
   ============================================================ */

.rtd-card {
    position: relative;
    background: var(--rtd-bg-surface);
    border: 1px solid var(--rtd-line);
    border-radius: var(--rtd-r-lg);
    padding: var(--rtd-space-6);
    transition:
        background var(--rtd-dur-base) var(--rtd-ease-out),
        border-color var(--rtd-dur-base) var(--rtd-ease-out),
        transform var(--rtd-dur-base) var(--rtd-ease-out),
        box-shadow var(--rtd-dur-base) var(--rtd-ease-out);
}
.rtd-card:hover {
    background: var(--rtd-bg-elevated);
    border-color: var(--rtd-line-crimson);
    transform: translateY(-2px);
    box-shadow: var(--rtd-shadow-lg);
}

.rtd-card-feature {
    padding: var(--rtd-space-7);
    border-radius: var(--rtd-r-xl);
}

/* Card con accent crimson en hover */
.rtd-card-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rtd-r-md);
    background: var(--rtd-crimson-glow);
    border: 1px solid var(--rtd-line-crimson);
    color: var(--rtd-crimson);
    margin-bottom: var(--rtd-space-5);
    transition:
        background var(--rtd-dur-base) var(--rtd-ease-out),
        transform var(--rtd-dur-slow) var(--rtd-ease-emphasized);
}
.rtd-card:hover .rtd-card-icon {
    background: var(--rtd-crimson);
    color: #fff;
    transform: scale(1.05);
}

/* ============================================================
   GRID — sistema 12 columnas
   ============================================================ */

.rtd-grid {
    display: grid;
    gap: var(--rtd-space-5);
}
.rtd-grid-12 { grid-template-columns: repeat(12, 1fr); }
.rtd-grid-2  { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.rtd-grid-3  { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rtd-grid-4  { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Asymmetric 7-5 split — elevated-design */
.rtd-grid-7-5 {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: var(--rtd-space-6);
}
@media (max-width: 900px) {
    .rtd-grid-7-5 { grid-template-columns: 1fr; }
}

/* Col helpers */
.col-span-12 { grid-column: span 12; }
.col-span-8  { grid-column: span 8;  }
.col-span-7  { grid-column: span 7;  }
.col-span-6  { grid-column: span 6;  }
.col-span-5  { grid-column: span 5;  }
.col-span-4  { grid-column: span 4;  }
.col-span-3  { grid-column: span 3;  }
@media (max-width: 900px) {
    .col-span-8, .col-span-7, .col-span-6,
    .col-span-5, .col-span-4, .col-span-3 { grid-column: span 12; }
}

/* ============================================================
   BACKGROUNDS — atmosféricos sutiles
   ============================================================ */

/* Glow radial sutil — para anclar secciones */
.rtd-glow-bg {
    position: relative;
    overflow: hidden;
}
.rtd-glow-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 20% 20%, var(--rtd-crimson-glow), transparent 60%),
        radial-gradient(ellipse 50% 30% at 80% 80%, rgba(90, 200, 250, 0.08), transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.rtd-glow-bg > * { position: relative; z-index: 1; }

/* Divider sutil */
.rtd-divider {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--rtd-line), transparent);
    margin: var(--rtd-space-10) 0;
}

/* ============================================================
   UTILITIES
   ============================================================ */

.rtd-text-center  { text-align: center; }
.rtd-text-muted   { color: var(--rtd-text-muted); }
.rtd-text-subtle  { color: var(--rtd-text-subtle); }
.rtd-text-crimson { color: var(--rtd-crimson); }
.rtd-text-cyan    { color: var(--rtd-cyan); }

.rtd-mt-1 { margin-top: var(--rtd-space-1); }
.rtd-mt-2 { margin-top: var(--rtd-space-2); }
.rtd-mt-4 { margin-top: var(--rtd-space-4); }
.rtd-mt-5 { margin-top: var(--rtd-space-5); }
.rtd-mt-6 { margin-top: var(--rtd-space-6); }
.rtd-mt-8 { margin-top: var(--rtd-space-8); }

.rtd-flex { display: flex; }
.rtd-flex-wrap { flex-wrap: wrap; }
.rtd-gap-3 { gap: var(--rtd-space-3); }
.rtd-gap-4 { gap: var(--rtd-space-4); }
.rtd-gap-5 { gap: var(--rtd-space-5); }
.rtd-items-center { align-items: center; }
.rtd-justify-center { justify-content: center; }