/* ==========================================================================
   MR.DIGITAL — Sistema de diseño
   Dirección: premium / minimalista.
   Paleta contenida (negro + verde de marca usado con moderación), tipografía
   con personalidad (serif de marca + sans utilitaria + monoespaciada para
   códigos), y un elemento propio: las tarjetas de plataforma como tarjetas
   de membresía, no botones genéricos con gradiente.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
    /* Superficie */
    --bg: #07080a;
    --surface: #0e100f;
    --surface-2: #131614;
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.14);

    /* Texto */
    --text: #f2f4f2;
    --text-muted: #93a19a;
    --text-faint: #5f6b66;

    /* Marca */
    --accent: #10b981;
    --accent-strong: #34d399;
    --accent-soft: rgba(16,185,129,0.12);
    --accent-border: rgba(16,185,129,0.35);

    /* Estados */
    --danger: #e5484d;
    --danger-soft: rgba(229,72,77,0.12);
    --warning: #d4a15c;
    --warning-soft: rgba(212,161,92,0.12);

    /* Ritmo */
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 20px;
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 40px;
    --space-5: 64px;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Fondo con degradado animado, sutil, en los tonos de la marca — mismo
       que ya usan la tienda y el portal de clientes. */
    background: linear-gradient(135deg, #07080a, #0a1f17, #07080a, #0d2a1e, #07080a);
    background-size: 400% 400%;
    animation: gradientShift 22s ease infinite;
}

@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

a { color: inherit; }

/* --- Tipografía de marca --- */
.brand-word {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(155deg, var(--surface-2), var(--bg));
    border: 1px solid var(--border-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.brand-mark span {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--accent-strong);
}

code, .mono, .code-display {
    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* --- NAVBAR --- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 28px;
    background: rgba(7,8,10,0.85);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(10px);
}
.navbar .menu-mobile { display: flex; align-items: center; gap: 12px; }
.navbar .brand-sub { color: var(--text-faint); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 1px; }
.navbar .links { display: flex; align-items: center; gap: 20px; }
.navbar .links a, .navbar .links span.link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color .15s ease;
}
.navbar .links a:hover { color: var(--text); }
.navbar .links a.active { color: var(--accent-strong); }
.navbar .divider { width: 1px; height: 16px; background: var(--border-strong); }
.navbar .whatsapp-link { color: #3ddc84 !important; }

/* --- SECCIÓN PRINCIPAL --- */
section#fondo1 { padding: 40px 20px 96px; position: relative; z-index: 10; min-height: calc(100vh - 200px); }
.container { max-width: 1080px; margin: 0 auto; }

.page-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-strong);
    margin-bottom: 10px;
    display: block;
}
.section-title {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 30px;
    line-height: 1.15;
    color: var(--text);
    margin: 0 0 24px 0;
}
.section-subtitle { color: var(--text-muted); font-size: 14px; margin-top: -12px; margin-bottom: 24px; max-width: 46ch; }

/* --- LAYOUT Y GRID --- */
.row { display: flex; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.col-sm-4 { flex: 0 0 300px; max-width: 300px; }
.col-sm-8 { flex: 1 1 620px; min-width: 280px; }

/* ==========================================================================
   TARJETAS DE PLATAFORMA — motivo "tarjeta de membresía"
   Elemento propio del diseño: cada plataforma se presenta como una tarjeta
   de acceso, no como un botón con gradiente. Barra de color fina (identidad
   real de cada marca), tipografía monoespaciada para el detalle tipo
   "número de socio", y un barrido de brillo sutil al pasar el mouse.
   ========================================================================== */
.keycard-list { display: flex; flex-direction: column; gap: 10px; }

.keycard {
    position: relative;
    display: block;
    text-decoration: none;
    background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.keycard::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--kc-color, var(--accent));
}
.keycard::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -60%;
    width: 40%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.06), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
    pointer-events: none;
}
.keycard:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.keycard:hover::after { left: 130%; }

.keycard-top { display: flex; align-items: center; justify-content: space-between; }
.keycard-name { font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; color: var(--text); margin: 0; }
.keycard-icon { color: var(--kc-color, var(--accent)); opacity: 0.85; font-size: 16px; }
.keycard-desc { color: var(--text-muted); font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
.keycard-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-top: 10px;
    display: block;
}

.keycard--netflix     { --kc-color: #e5484d; }
.keycard--disney      { --kc-color: #4a84d5; }
.keycard--prime       { --kc-color: #00a8e1; }
.keycard--hbo         { --kc-color: #9b6fd6; }
.keycard--paramount   { --kc-color: #2f7fd0; }
.keycard--crunchyroll { --kc-color: #f47521; }

/* --- RESULTADO / CONTENIDO DEL CORREO --- */
.result-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-top: 16px;
}
.email-body, .contenido-relevante {
    background: #fff;
    border-radius: var(--radius);
    padding: 24px;
    color: #111;
    margin-top: 16px;
    max-width: 100%;
    overflow-wrap: break-word;
}

/* --- ALERTAS --- */
.alertanocorreoborde { border: 1px solid var(--border); border-radius: var(--radius); margin-top: 16px; padding: 0; }
.alertanocorreo, .alert-warning {
    background: var(--warning-soft);
    border: 1px solid rgba(212,161,92,0.3);
    color: var(--warning);
    padding: 16px;
    border-radius: var(--radius);
    text-align: center;
    font-size: 13.5px;
}
.alert-danger {
    background: var(--danger-soft);
    color: #ff9a9d;
    border-radius: var(--radius);
    padding: 16px;
    border: 1px solid rgba(229,72,77,0.3);
    font-size: 13.5px;
}
.alert-success {
    background: var(--accent-soft);
    color: var(--accent-strong);
    border-radius: var(--radius);
    padding: 16px;
    border: 1px solid var(--accent-border);
    text-align: center;
    font-weight: 600;
    font-size: 13.5px;
}

/* --- AVISO DE PROVEEDOR DIRECTO — urgente pero sin parpadeo --- */
.alerta-premium {
    background: var(--surface);
    border: 1px solid var(--warning-soft);
    border-left: 3px solid var(--warning);
    border-radius: var(--radius);
    padding: 24px;
    text-align: left;
    margin: 0 auto 24px;
    max-width: 900px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.alerta-premium .icon { color: var(--warning); font-size: 22px; flex-shrink: 0; }
.alerta-premium h2 { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 600; color: var(--text); margin: 0 0 4px 0; }
.alerta-premium p { color: var(--text-muted); font-size: 13px; margin: 0; }
.btn-contacto {
    background: var(--accent);
    color: #04140d;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 18px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s ease;
    margin-left: auto;
}
.btn-contacto:hover { background: var(--accent-strong); }

/* --- FORMULARIO --- */
label.form-label { color: var(--text-muted); font-size: 12.5px; font-weight: 500; margin-bottom: 6px; }
input.form-control, select.form-select {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: var(--radius-sm) !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
}
input.form-control:focus, select.form-select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
input::placeholder { color: var(--text-faint); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- BOTONES --- */
.btn { font-size: 13.5px; font-weight: 600; border-radius: var(--radius-sm); padding: 10px 20px; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.btn-danger {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #04140d !important;
}
.btn-danger:hover, .btn-danger:focus {
    background: var(--accent-strong) !important;
    border-color: var(--accent-strong) !important;
}
.btn-dark {
    background: transparent !important;
    border-color: var(--border-strong) !important;
    color: var(--text) !important;
}
.btn-dark:hover { border-color: var(--text-muted) !important; }
.btn-outline-light { border: 1px solid var(--border-strong); color: var(--text); background: transparent; }
.btn-outline-light:hover { border-color: var(--accent); color: var(--accent-strong); }

/* --- Botón de copiar código --- */
.copy-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid var(--accent-border);
    color: var(--accent);
    background: transparent;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.copy-btn:hover { background: var(--accent-soft); }

/* --- FOOTER --- */
.site-footer { margin-top: 64px; padding: 24px 12px; color: var(--text-faint); text-align: center; border-top: 1px solid var(--border); font-size: 12.5px; }

/* --- RESPONSIVIDAD --- */
@media (max-width: 768px) {
    .row { flex-direction: column; gap: 24px; }
    .col-sm-4, .col-sm-8 { flex: 1 1 100%; max-width: 100%; }

    .navbar {
        flex-direction: column;
        align-items: flex-start;
        padding: 14px 16px;
        gap: 12px;
    }
    .navbar .menu-mobile { width: 100%; }
    .navbar .links {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px 14px;
        font-size: 12.5px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
    }
    .navbar .brand-sub { display: none; } /* en celular no hace falta, el espacio se aprovecha mejor */

    .section-title { font-size: 22px; }
    .result-card, .alerta-premium { padding: 18px; }
    .alerta-premium { flex-direction: column; text-align: center; }
    .btn-contacto { margin: 0; }

    /* El HTML de los correos (Netflix, Disney, etc.) suele venir armado con tablas
       de ancho fijo — no es "responsive" por sí solo. Se fuerza que quepa en la
       pantalla en vez de desbordarse o verse cortado. */
    .email-body { padding: 16px; font-size: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .email-body table { max-width: 100% !important; width: 100% !important; }
    .email-body img { max-width: 100% !important; height: auto !important; }
    .email-body td, .email-body th { word-break: break-word; }
}

@media (max-width: 400px) {
    .keycard-desc { display: none; } /* en pantallas muy chicas, solo nombre + ícono, más limpio */
    .keycard { padding: 14px 16px; }
}