/* ================================================================
   REGLA BASE — no tocar.
   Hace que el padding y el borde de un elemento se cuenten DENTRO
   de su ancho. Sin esto, cualquier elemento con width:100% y padding
   termina mas ancho que su contenedor y se desborda hacia la derecha.
   ================================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

:root {
    /* Fondo de marca y sus superficies.
       Todo negro del sitio sale de acá: si hay que ajustar el tono,
       se toca una sola vez. Van de la mas hundida a la mas elevada. */
    --bg-color: #050505;          /* fondo general */
    --sup-hundida: #04070a;       /* visor de la calculadora */
    --sup-ranura: #0a0a0d;        /* boca de la impresora */
    --sup-base: #0a0a0c;          /* columna fija de la tabla */
    --sup-tabla: #0d0d0d;         /* filas de la tabla */
    --sup-papel: #0e0e13;         /* papel del recibo */
    --sup-elevada: #101014;       /* fila resaltada al pasar el dedo */
    --sup-chasis: #111116;        /* cuerpo del aparato, abajo */
    --sup-chasis-alto: #1a1a21;   /* cuerpo del aparato, arriba */
    --sup-tecla: #23232c;         /* tecla, arriba */
    --sup-tecla-baja: #191920;    /* tecla, abajo */
    --sup-cian: #08181b;          /* encabezado de la tabla */
    --sup-cian-fuerte: #06222a;   /* fila que coincide con tu meta */

    /* Derivados del violeta y grises de texto */
    --violeta-claro: #c98bff;     /* violeta legible sobre negro */
    --violeta-brillo: #c04bff;    /* violeta del degradado de los botones */
    --gris-texto: #888888;        /* texto secundario */
    --rojo-error: #ff5050;        /* solo errores de formulario */
    --accent-blue: #00e8ff;
    --accent-violet: #9e00ff;
    --silver: #e0e0e0;
    --card-bg: rgba(255, 255, 255, 0.02);
    --glass-border: rgba(255, 255, 255, 0.1);
    --font-display: 'Bebas Neue', sans-serif;
    --font-clean: 'Inter', sans-serif;
}

body {
    background-color: var(--bg-color);
    color: #ffffff;
    font-family: var(--font-clean);
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    padding-top: 69px;
}

/* Fondo: pulso violeta neón (reemplaza el logo como marca de agua) */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://suitsagency.lat/Background.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    opacity: 0.22;
    z-index: -1;
}

header.main-header {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 64px;
    background: rgba(5, 5, 5, 0.98);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--glass-border);
    transition: background .35s ease, border-color .35s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4%;
    box-sizing: border-box;
    z-index: 10000;
}

.news-ticker {
    position: fixed;
    top: 64px;
    left: 0;
    width: 100%;
    background: rgba(5, 5, 5, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    padding: 6px 0;
    z-index: 9998;
}

.ticker-content {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: ticker 73s linear infinite;
}

.ticker-content span {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-right: 70px;
    font-weight: 400;
}

@keyframes ticker {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

.header-logo {
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
    gap: 15px;
}

.header-logo img {
    height: 36px;
    width: auto;
    filter: drop-shadow(0 0 12px rgba(0, 232, 255, 0.4));
}

.logo-text-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.header-logo .logo-title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    margin: 0;
    line-height: 1;
    letter-spacing: 5px;
    color: var(--accent-blue);
    text-shadow:
        0 0 6px rgba(0, 232, 255, 0.5),
        0 0 15px rgba(0, 232, 255, 0.25);
}

.header-logo .leyenda {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 3px;
    font-size: 0.45rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
}

.menu-toggle { color: white; font-size: 1.8rem; cursor: pointer; z-index: 10002; }

.header-nav {
    position: fixed;
    top: 0; right: 0; width: 75%; height: 100vh;
    transform: translateX(100%);
    visibility: hidden;
    /* Vidrio traslúcido con un solo halo lila arriba a la derecha,
       sobre el negro de la marca. */
    background:
        radial-gradient(85% 50% at 100% 0%, rgba(158, 0, 255, .16), transparent 70%),
        rgba(5, 5, 5, .82);
    backdrop-filter: blur(24px) saturate(1.1);
    -webkit-backdrop-filter: blur(24px) saturate(1.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 35px;
    transition: transform 0.4s ease-in-out, visibility 0.4s;
    z-index: 10001;
    border-left: 1px solid rgba(158, 0, 255, .18);
    box-shadow: -24px 0 60px rgba(0, 0, 0, .5);
}

.header-nav.active { transform: translateX(0); visibility: visible; }
.nav-link { text-decoration: none; color: #eee; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 2px; display: flex; align-items: center; gap: 15px; }
.nav-link.active { color: var(--accent-blue); }

.overlay-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(5,5,5,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; z-index: 9999; }
.overlay-bg.active { display: block; }

/* Mascota Bigo Dino: viene inyectada por header.html en TODAS las páginas,
   por eso su estilo vive acá (styles.css) y no en un <style> local. */
/* El Dino ya no flota sobre el contenido: vive en el pie de página.
   Liberar esa esquina deja el botón de WhatsApp donde el pulgar
   lo busca, que es lo que de verdad tiene que recibir el toque. */
.dino-mascot {
    display: block;
    width: 80px;
    height: auto;
    margin: 0 0 12px;
    filter: drop-shadow(0 0 16px rgba(0, 232, 255, 0.3));
    animation: dino-float 3.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes dino-float {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

@media (max-width: 500px) {
    .dino-mascot { width: 60px; bottom: 14px; right: 14px; }
}

/* Contenedor de páginas internas (Pagos, Registro).
   Vive acá porque es idéntico en ambas. */
.main-content {
    position: relative;
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ================================================================
   COLUMNA DE CONTENIDO
   Una sola definicion para todas las paginas. El margen lateral en
   celular es siempre el mismo, asi el contenido no "salta" al navegar.
   Lo unico que cambia por pagina es el ancho maximo en escritorio:
   cada una declara .container { --ancho: NNNpx; } en su propio <style>.
   ================================================================ */
.container {
    width: 100%;
    max-width: var(--ancho, 650px);
    margin: 0 auto;
    padding: 20px 16px;
}

.hero-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 20px 20px;
}

.slider-container {
    width: 75%;
    max-width: 260px;
    aspect-ratio: 9 / 16;
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    border: 1px solid var(--glass-border);
    margin: 20px auto 30px;
    background: transparent;
    box-shadow: 0 0 25px rgba(0, 232, 255, 0.15);
}

.slide {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.slide.active { opacity: 1; z-index: 2; }
.slide img { width: 100%; height: 100%; object-fit: cover; }

/* ================================================================
   SISTEMA DE BOTONES
   Todos los CTA del sitio comparten alto, ancho, radio y tipografia.
   Lo unico que cambia entre uno y otro es el color:
     - violeta solido  = accion principal (uno solo por pagina)
     - verde contorno  = WhatsApp, siempre secundario
   Para cambiar la forma de TODOS los botones, se tocan las tres
   variables de abajo y nada mas.
   ================================================================ */
:root {
    --btn-radio: 50px;
    --btn-padding: 15px 24px;
    --btn-ancho: 340px;
}

.cta-main,
.cred-cta,
.support-cta .action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: var(--btn-ancho);
    margin-left: auto;
    margin-right: auto;
    padding: var(--btn-padding);
    border-radius: var(--btn-radio);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    transition: .3s;
}

/* Accion principal: el unico boton lleno de cada pagina */
.cta-main,
.cred-cta {
    border: 2px solid var(--accent-violet);
    background: linear-gradient(90deg, var(--accent-violet), var(--violeta-brillo));
    color: #fff;
}

.cta-main:hover,
.cred-cta:hover { box-shadow: 0 0 25px rgba(158, 0, 255, .5); color: #fff; }

.nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    padding: 40px 10%;
    z-index: 1;
}

.nav-card {
    background: var(--card-bg);
    padding: 40px 25px;
    border-radius: 20px;
    text-decoration: none;
    color: white;
    border: 1px solid var(--glass-border);
    text-align: center;
    backdrop-filter: blur(10px);
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* Hover pasa a violeta: refuerza que es el color de "interacción" */
.nav-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-violet);
    box-shadow: 0 0 30px rgba(158, 0, 255, .18);
}
.nav-card:hover i { color: var(--accent-violet); }
.nav-card i { font-size: 2.2rem; color: var(--accent-blue); margin-bottom: 15px; transition: color 0.3s; }
.nav-card h3 { margin: 10px 0; font-size: 1.4rem; color: var(--silver); }

.countries-section { padding: 20px 10%; text-align: center; }
.countries-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 900px; margin: 0 auto; }
.country-item {
    background: rgba(255,255,255,0.05);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.6rem;
    font-weight: bold;
    border: 1px solid var(--glass-border);
    color: var(--silver);
    transition: 0.3s;
}
.country-item:hover {
    color: var(--accent-violet);
    border-color: var(--accent-violet);
    transform: translateY(-3px);
}
.country-item.highlight {
    background: rgba(158, 0, 255, 0.1);
    border-color: var(--accent-violet);
    color: var(--accent-violet);
    font-weight: 800;
}

.social-section { padding: 40px 10% 20px; text-align: center; position: relative; z-index: 10; }
.social-section h2 { font-family: var(--font-display); font-size: 3rem; color: #ffffff; margin: 0 0 25px; letter-spacing: 4px; }
.social-icons { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.social-link {
    text-decoration: none;
    color: var(--accent-blue) !important;
    font-size: 1.4rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--glass-border);
}
.social-link:hover { transform: scale(1.1) translateY(-5px); filter: drop-shadow(0 0 15px var(--accent-blue)); background: rgba(0, 232, 255, 0.1); border-color: var(--accent-blue); }

footer { text-align: center; padding: 30px; color: rgba(255,255,255,0.3); font-size: 0.75rem; position: relative; z-index: 1; }

@media (max-width: 768px) {
    .slider-container { width: 70%; max-width: 240px; }
    .social-section h2 { font-size: 2.5rem; }
}

/* ================================================================
   AJUSTES DE CONVERSION
   Botón flotante de WhatsApp, bloque anti-objeción y CTA de cierre.
   Todo vive acá para que las 6 páginas lo compartan.
   ================================================================ */

/* ---- Botón flotante de WhatsApp (lo inyecta include.js) ----
   Va abajo a la IZQUIERDA para no chocar con el Bigo Dino. */
.wa-float {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px 12px 14px;
    border-radius: 999px;
    background: #25d366;
    color: #06210f;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease, visibility .25s;
}

/* Mientras el CTA del hero esta en pantalla, el flotante se aparta:
   no puede tapar al boton principal, que es la conversion medida.
   La clase la pone include.js con un IntersectionObserver. */
.wa-float.a-un-lado {
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px) scale(.85);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .wa-float { transition: none; }
}

.wa-float i { font-size: 1.35rem; }
.wa-float:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(37, 211, 102, .35); color: #06210f; }
.wa-float:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* En pantallas chicas se reduce a un círculo: ocupa menos y no tapa contenido */
@media (max-width: 620px) {
    .wa-float { padding: 0; width: 54px; height: 54px; justify-content: center; right: 14px; bottom: 14px; }
    .wa-float span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .wa-float { transition: none; }
    .wa-float:hover { transform: none; }
}

/* ---- Bloque anti-objeción ("¿esto es real?") ---- */
.objeciones {
    width: 92%;
    max-width: 980px;
    margin: 70px auto;
    position: relative;
    z-index: 1;
}

.objeciones h2 {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 8px;
}

.objeciones .obj-sub {
    text-align: center;
    color: rgba(224, 224, 224, .6);
    font-size: .95rem;
    margin: 0 auto 34px;
    max-width: 560px;
}

.obj-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.obj-item {
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 22px 22px 24px;
}

.obj-item h3 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 1.02rem;
    line-height: 1.4;
    color: #fff;
}

.obj-item h3 i { color: var(--accent-blue); font-size: 1.05rem; margin-top: 3px; flex-shrink: 0; }
.obj-item p { margin: 0; color: var(--silver); font-size: .93rem; line-height: 1.65; opacity: .85; }
.obj-item strong { color: var(--accent-blue); }

/* ---- CTA de cierre (va al final de cada página) ---- */
.cta-cierre {
    width: 92%;
    max-width: 720px;
    margin: 70px auto 40px;
    text-align: center;
    padding: 40px 26px;
    border-radius: 20px;
    border: 1px solid rgba(158, 0, 255, .3);
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(158, 0, 255, .13), transparent 65%),
        rgba(255, 255, 255, .02);
    position: relative;
    z-index: 1;
}

.cta-cierre h2 {
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: clamp(1.9rem, 5.5vw, 2.8rem);
    letter-spacing: 1px;
    margin: 0 0 12px;
}

.cta-cierre > p {
    color: var(--silver);
    opacity: .8;
    font-size: 1rem;
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto 26px;
}

/* El CTA de cierre usa el mismo boton que el resto del sitio.
   No lleva override de tamano: sale del sistema de botones de arriba. */

/* Línea de "fricción cero" bajo el botón: mata las objeciones de costo */
.cta-nota {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin-top: 20px;
    font-size: .82rem;
    color: rgba(224, 224, 224, .55);
}

.cta-nota span { display: inline-flex; align-items: center; gap: 6px; }
.cta-nota i { color: var(--accent-blue); font-size: .8rem; }

/* Link secundario a WhatsApp: nunca es botón sólido, para no competir
   con el CTA principal (regla de marca: un solo botón sólido por página) */
.cta-alt {
    display: inline-block;
    margin-top: 18px;
    color: rgba(224, 224, 224, .75);
    font-size: .92rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    padding-bottom: 2px;
}

.cta-alt i { color: #25d366; margin-right: 6px; }
.cta-alt:hover { color: #fff; border-color: #25d366; }

/* ================================================================
   FORMULARIO DE CAPTACION (vive en /registro/)
   ================================================================ */
.form-card {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(0, 232, 255, .25);
    border-radius: 18px;
    padding: 28px 24px 30px;
    margin: 34px 0 10px;
}

.form-card h2 { margin: 0 0 8px; font-size: 1.15rem; color: #fff; }
.form-card h2 i { color: var(--accent-blue); margin-right: 8px; }
.form-sub { margin: 0 0 22px; font-size: .88rem; color: var(--silver); opacity: .75; line-height: 1.6; }

.form-field { margin-bottom: 16px; text-align: left; }
.form-row { display: flex; gap: 14px; }
.form-row .form-field { flex: 1; }

.form-field label {
    display: block;
    margin-bottom: 6px;
    font-size: .78rem;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgba(224, 224, 224, .6);
}

.form-field input,
.form-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 14px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-family: inherit;
    font-size: .95rem;
    transition: border-color .2s ease;
}

.form-field input::placeholder { color: rgba(255, 255, 255, .25); }
.form-field input:focus,
.form-field select:focus { outline: none; border-color: var(--accent-blue); }
.form-field select option { background: #101010; }

/* Campo trampa para bots: invisible para personas, no para scripts */
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.form-btn {
    width: 100%;
    margin-top: 8px;
    padding: 15px;
    border: 2px solid var(--accent-violet);
    border-radius: 50px;
    background: linear-gradient(90deg, var(--accent-violet), #c04bff);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: .92rem;
    cursor: pointer;
    transition: box-shadow .3s ease;
}

.form-btn:hover { box-shadow: 0 0 25px rgba(158, 0, 255, .5); }
.form-btn:disabled { opacity: .6; cursor: default; box-shadow: none; }

.form-legal { margin: 16px 0 0; font-size: .72rem; line-height: 1.6; color: rgba(224, 224, 224, .4); }
.form-legal a { color: rgba(0, 232, 255, .7); }

.form-ok { text-align: center; padding: 14px 0 4px; }
.form-ok i { font-size: 2.6rem; color: #25d366; margin-bottom: 12px; }
.form-ok h3 { margin: 0 0 8px; font-size: 1.1rem; color: #fff; }
.form-ok p { margin: 0; font-size: .9rem; color: var(--silver); opacity: .8; line-height: 1.6; }

.form-error {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 90, 90, .35);
    background: rgba(255, 90, 90, .08);
    color: #ffb3b3;
    font-size: .85rem;
    line-height: 1.5;
}

.form-error a { color: #fff; }

@media (max-width: 480px) {
    .form-row { flex-direction: column; gap: 0; }
}

.footer-link { color: rgba(0, 232, 255, .55); text-decoration: none; }
.footer-link:hover { color: var(--accent-blue); }

/* Con el menú abierto el header deja de ser un bloque opaco: si no,
   se dibuja un rectángulo negro al lado del panel traslúcido. */
header.main-header.nav-abierta {
    background: rgba(5, 5, 5, .55);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom-color: transparent;
}