/* ═══════════════════════════════════════════════════════════
   makeweb.com — estilos propios
   Animaciones del hero, componentes y efectos visuales
   ═══════════════════════════════════════════════════════════ */

/* ---------- Tema: variables (oscuro por defecto, claro opcional) ---------- */

:root {
    color-scheme: dark;

    /* Fondos */
    --page-bg:      #050310;
    --section-alt:  #070514;
    --footer-bg:    #04020c;
    --card-bg:      #0d0a1e;   /* tarjetas, FAQ, pasos… */
    --scene-bg:     var(--scene-bg);   /* escenas de features */
    --glass:        rgba(13, 10, 30, .75);
    --glass-2:      rgba(13, 10, 30, .82);
    --chatw-bg:     rgba(13, 10, 30, .92);
    --header-bg:    rgba(6, 4, 16, .82);

    /* Canales RGB (para utilidades Tailwind bg-surf/… y alfas CSS) */
    --c-night-rgb:  5 3 16;          /* fondo de página */
    --c-panel-rgb:  13 10 30;        /* paneles */
    --c-surf-rgb:      255 255 255;  /* velo claro sobre fondo oscuro */
    --c-surf-deep-rgb: 0 0 0;        /* velo oscuro */

    /* Líneas */
    --c-line:        rgba(255, 255, 255, .08);
    --c-line-strong: rgba(255, 255, 255, .12);

    /* Texto */
    --ink:       #f4f2ff;
    --ink-soft:  #b9b4d6;
    --ink-mute:  #8a85ad;
    --link:      #c4b5fd;
    --link-hover:#22d3ee;
    --violet:    #d8caff;
    --kicker:    #c4b5fd;
    --placeholder:var(--placeholder);

    /* Degradados de texto */
    --grad-text:  linear-gradient(90deg, #a78bfa 0%, #e879f9 45%, #22d3ee 100%);
    --lina-grad:  linear-gradient(90deg, #e879f9, #a78bfa);

    /* Detalles */
    --grid-dot:       rgba(255, 255, 255, .14);
    --c-lime-rgb:     163 230 53;   /* lima (oscuro) */
    --lime-done:      #d6ffb8;      /* texto de tarea completada */
    --kicker-bg:      rgba(139, 92, 246, .08);
    --kicker-border:  rgba(167, 139, 250, .35);
    --aurora-opacity: .5;
}

[data-theme='light'] {
    color-scheme: light;

    --page-bg:      #f7f6fc;
    --section-alt:  #f0edf9;
    --footer-bg:    #efecf8;
    --card-bg:      #ffffff;
    --scene-bg:     #f6f4fd;
    --glass:        rgba(255, 255, 255, .72);
    --glass-2:      rgba(255, 255, 255, .88);
    --chatw-bg:     rgba(255, 255, 255, .94);
    --header-bg:    rgba(247, 246, 252, .85);

    --c-night-rgb:  247 246 252;
    --c-panel-rgb:  255 255 255;
    --c-surf-rgb:      24 16 60;   /* velo oscuro sobre fondo claro */
    --c-surf-deep-rgb: 24 16 60;

    --c-line:        rgba(24, 16, 60, .1);
    --c-line-strong: rgba(24, 16, 60, .16);

    --ink:       #181233;
    --ink-soft:  #4e4870;
    --ink-mute:  #7b7699;
    --link:      #7c3aed;
    --link-hover:#0e7490;
    --violet:    #6d28d9;
    --kicker:    #6d28d9;
    --placeholder:#9c97b8;

    --grad-text:  linear-gradient(90deg, #7c3aed 0%, #c026d3 45%, #0e7490 100%);
    --lina-grad:  linear-gradient(90deg, #c026d3, #7c3aed);

    --grid-dot:       rgba(30, 20, 70, .16);
    --c-lime-rgb:     77 124 15;    /* verde lima oscuro, legible en claro */
    --lime-done:      #3f6212;      /* texto de tarea completada en claro */
    --kicker-bg:      rgba(139, 92, 246, .07);
    --kicker-border:  rgba(124, 58, 237, .3);
    --aurora-opacity: .3;
}

/* ---------- Utilidades visuales ---------- */

/* El atributo hidden siempre gana (con Tailwind compilado, las clases propias
   cargan después que las utilidades y podrían anularlo) */
[hidden] { display: none !important; }

.grad-text {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kicker {
    display: inline-block;
    padding: .4rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--kicker-border);
    background: var(--kicker-bg);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--kicker);
}

.section-alt {
    background:
        radial-gradient(60% 40% at 50% 0%, rgba(139, 92, 246, .06), transparent 70%),
        var(--section-alt);
}

/* ---------- Botón primario ---------- */

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    border-radius: .8rem;
    color: #fff;
    background: linear-gradient(120deg, #7c3aed, #c026d3 55%, #0891b2 130%);
    background-size: 180% 180%;
    box-shadow: 0 8px 30px -6px rgba(139, 92, 246, .55);
    transition: transform .25s ease, box-shadow .25s ease, background-position .5s ease;
    animation: btnGlow 3.2s ease-in-out infinite;
}
.btn-primary:hover {
    transform: translateY(-2px);
    background-position: 90% 50%;
    box-shadow: 0 14px 44px -6px rgba(192, 38, 211, .65);
}
.btn-primary:active { transform: translateY(0) scale(.98); }

@keyframes btnGlow {
    0%, 100% { box-shadow: 0 8px 30px -6px rgba(139, 92, 246, .45); }
    50%      { box-shadow: 0 10px 42px -4px rgba(34, 211, 238, .55); }
}

.btn-primary .sparkle {
    display: inline-block;
    font-size: 1rem;
    animation: sparkleSpin 4s linear infinite;
}
@keyframes sparkleSpin {
    0%   { transform: rotate(0deg) scale(1); }
    25%  { transform: rotate(90deg) scale(1.25); }
    50%  { transform: rotate(180deg) scale(1); }
    75%  { transform: rotate(270deg) scale(1.25); }
    100% { transform: rotate(360deg) scale(1); }
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    color: var(--link);
    transition: color .2s, gap .2s;
}
.link-arrow:hover { color: var(--link-hover); gap: .7rem; }

.chip {
    padding: .45rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--c-line-strong);
    background: rgb(var(--c-surf-rgb) / .04);
    font-size: .85rem;
    font-weight: 500;
    color: var(--ink-soft);
    backdrop-filter: blur(6px);
    transition: all .25s ease;
}
.chip:hover {
    border-color: rgba(232, 121, 249, .6);
    background: rgba(232, 121, 249, .12);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -6px rgba(232, 121, 249, .4);
}

/* Estrellas doradas */
.stars {
    background: linear-gradient(90deg, #fbbf24 88%, rgba(251, 191, 36, .25) 88%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: 2px;
    font-size: .95rem;
}

/* ---------- Reveal on scroll ---------- */

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .8, .3, 1), transform .7s cubic-bezier(.22, .8, .3, 1);
    transition-delay: inherit;
}
.reveal.in { opacity: 1; transform: none; }

/* ═══════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════ */

/* Cabecera al hacer scroll */
#siteHeader.scrolled {
    background: var(--header-bg);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
}

.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Blobs de aurora */
.aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: var(--aurora-opacity);
    will-change: transform;
}
.aurora-1 {
    width: 46vw; height: 46vw;
    left: -12vw; top: -14vw;
    background: radial-gradient(circle at 30% 30%, #7c3aed 0%, transparent 65%);
    animation: auroraA 16s ease-in-out infinite alternate;
}
.aurora-2 {
    width: 40vw; height: 40vw;
    right: -10vw; top: -6vw;
    background: radial-gradient(circle at 60% 40%, #c026d3 0%, transparent 65%);
    animation: auroraB 19s ease-in-out infinite alternate;
}
.aurora-3 {
    width: 36vw; height: 36vw;
    left: 32vw; bottom: -18vw;
    background: radial-gradient(circle at 50% 50%, #0e7490 0%, transparent 65%);
    animation: auroraC 22s ease-in-out infinite alternate;
}

@keyframes auroraA {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(6vw, 4vw) scale(1.15); }
    100% { transform: translate(-3vw, 7vw) scale(.95); }
}
@keyframes auroraB {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-5vw, 6vw) scale(1.1); }
    100% { transform: translate(4vw, -2vw) scale(.9); }
}
@keyframes auroraC {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-6vw, -5vw) scale(1.12); }
    100% { transform: translate(5vw, -8vw) scale(.92); }
}

#particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Rejilla de puntos */
.dots-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
    opacity: .5;
}

/* Degradado hacia el fondo de la página */
.hero-fade {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 160px;
    background: linear-gradient(to bottom, transparent, var(--page-bg));
}

/* ---------- Mockup de chat ---------- */

.phone-mock {
    border-radius: 1.5rem;
    border: 1px solid var(--c-line-strong);
    background: var(--glass);
    backdrop-filter: blur(18px);
    box-shadow:
        0 0 0 1px rgba(139, 92, 246, .12),
        0 30px 80px -20px rgba(124, 58, 237, .35),
        0 8px 30px rgba(0, 0, 0, .5);
    overflow: hidden;
    animation: mockFloat 7s ease-in-out infinite;
    transform-style: preserve-3d;
}
@keyframes mockFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-12px) rotate(.4deg); }
}

/* Cursor de escritura */
.caret {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: #e879f9;
    animation: caretBlink 1s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* Mensajes (inyectados por JS) */
.msg {
    max-width: 85%;
    padding: .6rem .9rem;
    border-radius: 1.1rem;
    font-size: .85rem;
    line-height: 1.45;
    opacity: 0;
    transform: translateY(10px) scale(.96);
    animation: msgIn .35s cubic-bezier(.2, .9, .3, 1.2) forwards;
}
@keyframes msgIn { to { opacity: 1; transform: none; } }

.msg-user {
    align-self: flex-end;
    border-bottom-right-radius: .35rem;
    background: linear-gradient(120deg, #7c3aed, #a21caf);
    color: #fff;
    box-shadow: 0 6px 18px -6px rgba(124, 58, 237, .6);
}

.msg-bot {
    align-self: flex-start;
    border-bottom-left-radius: .35rem;
    background: rgb(var(--c-surf-rgb) / .07);
    border: 1px solid var(--c-line);
    color: var(--ink);
}

/* Puntos de "escribiendo" */
.typing-dots { display: inline-flex; gap: 4px; padding: .25rem .1rem; }
.typing-dots span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #a78bfa;
    animation: dotBounce 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes dotBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30%           { transform: translateY(-6px); opacity: 1; }
}

/* Tarjeta de progreso de construcción */
.build-card {
    align-self: flex-start;
    width: 92%;
    padding: .8rem .95rem;
    border-radius: 1rem;
    background: rgba(139, 92, 246, .1);
    border: 1px solid rgba(139, 92, 246, .35);
    opacity: 0;
    transform: translateY(10px);
    animation: msgIn .35s ease forwards;
}
.build-card .bc-title {
    font-size: .78rem;
    font-weight: 700;
    color: var(--violet);
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .55rem;
}
.build-card .bc-title .mini-spin {
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .25);
    border-top-color: #e879f9;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.b-step {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    color: var(--ink-mute);
    padding: .14rem 0;
    transition: color .3s;
}
.b-step .b-ico {
    width: 15px; height: 15px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, .2);
    display: grid;
    place-items: center;
    font-size: 9px;
    flex-shrink: 0;
    transition: all .3s;
}
.b-step.done { color: var(--lime-done); }
.b-step.done .b-ico {
    background: rgb(var(--c-lime-rgb) / .18);
    border-color: rgb(var(--c-lime-rgb));
    color: rgb(var(--c-lime-rgb));
}

.b-bar {
    margin-top: .6rem;
    height: 5px;
    border-radius: 999px;
    background: rgb(var(--c-surf-rgb) / .10);
    overflow: hidden;
}
.b-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #8b5cf6, #e879f9, #22d3ee);
    background-size: 200% 100%;
    animation: gradFlow 1.4s linear infinite;
    transition: width .5s ease;
}
@keyframes gradFlow { to { background-position: 200% 0; } }

/* Vista previa del sitio generado */
.site-preview {
    align-self: center;
    width: 96%;
    border-radius: .9rem;
    overflow: hidden;
    border: 1px solid rgba(34, 211, 238, .3);
    background: #0b0920;
    box-shadow: 0 10px 40px -10px rgba(34, 211, 238, .35);
    opacity: 0;
    transform: translateY(14px) scale(.92);
    animation: previewIn .5s cubic-bezier(.2, .9, .3, 1.25) forwards;
}
@keyframes previewIn { to { opacity: 1; transform: none; } }

.sp-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .6rem;
    background: rgb(var(--c-surf-rgb) / .05);
}
.sp-bar .bb-dots { transform: scale(.8); }
.sp-url {
    font-family: ui-monospace, monospace;
    font-size: .6rem;
    color: #67e8f9;
    background: rgba(34, 211, 238, .08);
    border-radius: 999px;
    padding: .1rem .55rem;
}
.sp-hero {
    height: 52px;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    background: linear-gradient(120deg, rgba(124, 58, 237, .5), rgba(192, 38, 211, .4), rgba(8, 145, 178, .45));
}
.sp-rows { padding: .5rem .65rem .65rem; display: grid; gap: .3rem; }
.sp-rows i {
    display: block;
    height: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .12);
    transform-origin: left;
    animation: spGrow .5s ease both;
}
.sp-rows i:nth-child(1) { width: 70%; animation-delay: .15s; }
.sp-rows i:nth-child(2) { width: 92%; animation-delay: .28s; }
.sp-rows i:nth-child(3) { width: 45%; height: 14px; margin-top: .2rem; border-radius: 6px; background: linear-gradient(90deg, #8b5cf6, #c026d3); animation-delay: .4s; }
@keyframes spGrow { from { transform: scaleX(0); } }

/* ---------- Badges flotantes ---------- */

.float-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--c-line-strong);
    background: var(--glass-2);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .6);
    z-index: 5;
}
.float-badge-wa {
    top: 4%;
    right: -2%;
    animation: floatY 5s ease-in-out infinite;
}
.float-badge-ig {
    bottom: 27%;
    left: -10%;
    animation: floatY2 6s ease-in-out infinite;
}
.float-badge-go {
    bottom: -3%;
    right: -2%;
    animation: floatY 5.5s ease-in-out 1s infinite;
}
@keyframes floatY  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes floatY2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

.ib {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
}
.ib svg { width: 16px; height: 16px; }
.ib-wa { background: #25D366; color: #fff; box-shadow: 0 0 16px rgba(37, 211, 102, .55); }
.ib-ig {
    background: conic-gradient(from 210deg, #f9ce34, #ee2a7b, #6228d7, #f9ce34);
    color: #fff;
    box-shadow: 0 0 16px rgba(238, 42, 123, .55);
}
.ib-go { background: #fff; box-shadow: 0 0 16px rgba(66, 133, 244, .45); }

/* Anillo de 60 s */
.time-badge {
    position: absolute;
    bottom: -4%;
    left: 2%;
    width: 92px; height: 92px;
    z-index: 5;
    display: grid;
    place-items: center;
    animation: floatY2 6s ease-in-out .5s infinite;
}
.time-badge svg {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    transform: rotate(-90deg);
}
.ring-bg { fill: var(--card-bg); stroke: var(--c-line-strong); stroke-width: 5; }
.ring-val {
    fill: none;
    stroke: url(#tbGrad), #22d3ee;
    stroke: #22d3ee;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 213.6;
    stroke-dashoffset: 213.6;
    animation: ringFill 6s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(34, 211, 238, .8));
}
@keyframes ringFill {
    0%   { stroke-dashoffset: 213.6; }
    55%  { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: 0; }
}

/* ---------- Indicador scroll ---------- */
.mouse-anim { animation: mouseNudge 1.8s ease-in-out infinite; }
@keyframes mouseNudge {
    0%, 100% { transform: translateY(0);   opacity: .9; }
    50%      { transform: translateY(7px); opacity: .4; }
}

/* ---------- Nombre Lina con brillo ---------- */
.lina-text {
    position: relative;
    display: inline;
    background: var(--lina-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
}

/* ═══════════════════════════════════════════
   TARJETAS DE EJEMPLOS
   ═══════════════════════════════════════════ */

.example-card {
    display: block;
    border-radius: 1.25rem;
    border: 1px solid var(--c-line);
    background: var(--card-bg);
    overflow: hidden;
    transition: transform .35s cubic-bezier(.2, .8, .3, 1.2), box-shadow .35s, border-color .35s;
}
.example-card:hover {
    transform: translateY(-8px) rotate(-.4deg);
    border-color: hsla(var(--h), 85%, 65%, .5);
    box-shadow: 0 24px 60px -18px hsla(var(--h), 85%, 55%, .45);
}

.browser-bar {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .9rem;
    border-bottom: 1px solid var(--c-line);
    background: rgb(var(--c-surf-rgb) / .04);
}
.bb-dots { display: flex; gap: 5px; }
.bb-dots i {
    width: 8px; height: 8px;
    border-radius: 50%;
}
.bb-dots i:nth-child(1) { background: #ff5f57; }
.bb-dots i:nth-child(2) { background: #febc2e; }
.bb-dots i:nth-child(3) { background: #28c840; }
.bb-url {
    font-family: ui-monospace, monospace;
    font-size: .65rem;
    color: var(--ink-mute);
    background: rgb(var(--c-surf-rgb) / .05);
    border-radius: 999px;
    padding: .18rem .7rem;
}

.example-preview {
    position: relative;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(90% 120% at 50% 0%, hsla(var(--h), 80%, 60%, .28), transparent 70%),
        linear-gradient(180deg, hsla(var(--h), 45%, 14%, .9), #0b0920);
}
.ep-glow {
    position: absolute;
    width: 130px; height: 130px;
    border-radius: 50%;
    background: hsla(var(--h), 90%, 62%, .3);
    filter: blur(45px);
    animation: epPulse 4s ease-in-out infinite;
}
@keyframes epPulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.3); opacity: 1; } }

.ep-emoji {
    position: relative;
    font-size: 3rem;
    z-index: 1;
    transition: transform .4s cubic-bezier(.2, .8, .3, 1.4);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, .5));
}
.example-card:hover .ep-emoji { transform: scale(1.2) rotate(6deg); }

.ep-skeleton {
    position: absolute;
    left: 1rem; right: 1rem; bottom: .9rem;
    display: grid;
    gap: .35rem;
    z-index: 1;
}
.ep-title, .ep-line, .ep-btn { border-radius: 4px; }
.ep-title { height: 9px; width: 45%; background: rgba(255, 255, 255, .3); }
.ep-line  { height: 6px; background: rgba(255, 255, 255, .14); }
.ep-line.w-3\/4 { width: 75%; }
.ep-line.w-1\/2 { width: 50%; }
.ep-btn {
    margin-top: .2rem;
    height: 16px; width: 34%;
    border-radius: 8px;
    background: linear-gradient(90deg, hsla(var(--h), 85%, 65%, .9), hsla(calc(var(--h) + 40), 85%, 65%, .9));
}

.try-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .8rem;
    font-weight: 600;
    color: hsl(var(--h), 85%, 72%);
    opacity: .75;
    transition: all .25s;
}
.example-card:hover .try-btn { opacity: 1; gap: .55rem; }

/* ═══════════════════════════════════════════
   TARJETAS DE CARACTERÍSTICAS + ESCENAS
   ═══════════════════════════════════════════ */

.feature-card {
    border-radius: 1.5rem;
    border: 1px solid var(--c-line);
    background: var(--card-bg);
    overflow: hidden;
    transition: transform .35s ease, border-color .35s, box-shadow .35s;
}
.feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(139, 92, 246, .4);
    box-shadow: 0 24px 60px -20px rgba(124, 58, 237, .4);
}

.feature-scene {
    position: relative;
    height: 170px;
    overflow: hidden;
    border-bottom: 1px solid var(--c-line);
    background:
        radial-gradient(80% 100% at 50% 0%, rgba(139, 92, 246, .14), transparent 70%),
        var(--scene-bg);
}

.feature-tag {
    display: inline-block;
    padding: .3rem .8rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    background: rgba(139, 92, 246, .12);
    border: 1px solid rgba(139, 92, 246, .3);
    color: var(--kicker);
}

/* --- Escena WhatsApp --- */
.wa-chat {
    position: absolute;
    inset: 0;
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    justify-content: center;
    background:
        radial-gradient(60% 80% at 80% 10%, rgba(37, 211, 102, .12), transparent 70%);
}
.wa-bubble {
    max-width: 82%;
    padding: .5rem .8rem;
    border-radius: .9rem;
    font-size: .68rem;
    line-height: 1.35;
    opacity: 0;
}
.wa-bubble.wa-in {
    align-self: flex-start;
    border-bottom-left-radius: .3rem;
    background: rgb(var(--c-surf-rgb) / .09);
    color: var(--ink-soft);
    animation: waCycle 6s ease infinite;
}
.wa-bubble.wa-in.wa-reply { color: #d6ffe4; animation-delay: 0s; background: rgba(37, 211, 102, .16); border: 1px solid rgba(37, 211, 102, .3); }
.wa-bubble.wa-out {
    align-self: flex-end;
    border-bottom-right-radius: .3rem;
    background: #1f7a4d;
    color: #eafff2;
    box-shadow: 0 4px 14px -4px rgba(37, 211, 102, .5);
    animation: waCycle 6s ease infinite;
}
.wa-bubble.wa-out { animation-delay: 0s; }
.wa-chat .wa-bubble:nth-child(1) { animation-delay: 0s; }
.wa-chat .wa-bubble:nth-child(2) { animation-delay: .8s; }
.wa-chat .wa-bubble:nth-child(3) { animation-delay: 1.8s; }

.wa-bubble.wa-in span {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #8a85ad;
    margin-right: 3px;
    animation: dotBounce 1.1s ease-in-out infinite;
}
.wa-bubble.wa-in span:nth-child(2) { animation-delay: .15s; }
.wa-bubble.wa-in span:nth-child(3) { animation-delay: .3s; }

/* aparece y se queda hasta el fin del ciclo */
@keyframes waCycle {
    0%      { opacity: 0; transform: translateY(8px) scale(.95); }
    5%      { opacity: 1; transform: none; }
    88%     { opacity: 1; transform: none; }
    96%,100%{ opacity: 0; transform: translateY(-4px); }
}

/* --- Escena Instagram --- */
.ig-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    padding: 1.6rem 2.2rem;
}
.ig-grid span {
    border-radius: 8px;
    background: linear-gradient(135deg,
        hsl(320 + var(--i) * 22, 70%, 55%),
        hsl(280 + var(--i) * 18, 65%, 40%));
    opacity: 0;
    animation: igPop 5.4s ease infinite;
    animation-delay: calc(var(--i) * .22s);
}
@keyframes igPop {
    0%   { opacity: 0; transform: scale(.6) rotate(-4deg); }
    8%   { opacity: 1; transform: scale(1) rotate(0); }
    85%  { opacity: 1; }
    95%, 100% { opacity: 0; transform: scale(.95); }
}
.ig-heart {
    position: absolute;
    right: 18%;
    top: 22%;
    color: #ee2a7b;
    font-size: 1.15rem;
    text-shadow: 0 0 14px rgba(238, 42, 123, .8);
    animation: heartBeat 5.4s ease infinite 1.6s;
    opacity: 0;
}
@keyframes heartBeat {
    0%   { opacity: 0; transform: scale(.4); }
    8%   { opacity: 1; transform: scale(1.25); }
    16%  { transform: scale(1); }
    30%  { opacity: 1; }
    45%, 100% { opacity: 0; transform: scale(.9) translateY(-8px); }
}

/* --- Escena GEO / radar --- */
.geo-radar {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}
.geo-ring {
    position: absolute;
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(34, 211, 238, .55);
    animation: radar 3s cubic-bezier(.1, .6, .3, 1) infinite;
}
.geo-ring:nth-child(2) { animation-delay: 1s; }
.geo-ring:nth-child(3) { animation-delay: 2s; }
@keyframes radar {
    0%   { transform: scale(.5); opacity: .9; }
    100% { transform: scale(3.4); opacity: 0; }
}
.geo-dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0891b2, #7c3aed);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 0 24px rgba(34, 211, 238, .6);
    animation: mockFloat 4s ease-in-out infinite;
}
.geo-chip {
    position: absolute;
    font-size: .62rem;
    font-weight: 700;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: rgba(34, 211, 238, .12);
    border: 1px solid rgba(34, 211, 238, .4);
    color: #67e8f9;
    animation: floatY 3.5s ease-in-out infinite;
}
.geo-chip-1 { top: 26%; left: 16%; animation-delay: .4s; }
.geo-chip-2 { bottom: 24%; right: 14%; animation-delay: 1.2s; }

/* ═══════════════════════════════════════════
   LINA + PROCESO
   ═══════════════════════════════════════════ */

.lina-avatar {
    position: relative;
    width: 96px; height: 96px;
    display: grid;
    place-items: center;
}
.lina-avatar > span:first-child {
    display: grid;
    place-items: center;
    width: 72px; height: 72px;
    border-radius: 50%;
    font-size: 1.8rem;
    background: linear-gradient(135deg, #7c3aed, #c026d3 55%, #0891b2);
    color: #fff;
    box-shadow: 0 0 40px rgba(139, 92, 246, .55);
    animation: mockFloat 4.5s ease-in-out infinite;
}
.lina-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(232, 121, 249, .5);
    animation: spin 14s linear infinite;
}
.lina-ring-2 {
    inset: -12px;
    border-color: rgba(34, 211, 238, .35);
    animation-direction: reverse;
    animation-duration: 20s;
}

.steps-line {
    position: absolute;
    top: 40px;
    left: 16%;
    right: 16%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #8b5cf6 20%, #e879f9 50%, #22d3ee 80%, transparent);
    background-size: 200% 100%;
    border-radius: 2px;
    animation: gradFlow 3s linear infinite;
    opacity: .6;
}
.step-num { filter: drop-shadow(0 4px 18px rgba(139, 92, 246, .5)); }
.step-icon {
    position: relative;
    z-index: 1;
    margin-top: -28px;
    width: 64px; height: 64px;
    border-radius: 1.1rem;
    display: grid;
    place-items: center;
    color: var(--violet);
    background: var(--card-bg);
    border: 1px solid rgba(139, 92, 246, .35);
    box-shadow: 0 12px 34px -10px rgba(124, 58, 237, .5);
    transition: transform .3s, box-shadow .3s;
}
.step-icon:hover {
    transform: translateY(-4px) rotate(-3deg);
    box-shadow: 0 18px 44px -10px rgba(192, 38, 211, .6);
}

/* ═══════════════════════════════════════════
   MARQUEE DE INTEGRACIONES
   ═══════════════════════════════════════════ */

.marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    padding-right: 1rem;
    animation: marquee 36s linear infinite;
}
.marquee-rev .marquee-track { animation: marqueeRev 36s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

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

.int-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem 1.15rem;
    border-radius: 999px;
    border: 1px solid var(--c-line);
    background: rgb(var(--c-surf-rgb) / .04);
    font-size: .85rem;
    font-weight: 500;
    color: var(--ink-soft);
    white-space: nowrap;
    transition: all .25s;
}
.int-pill:hover {
    border-color: rgb(var(--c-surf-rgb) / .3);
    background: rgb(var(--c-surf-rgb) / .07);
    color: #fff;
}
.int-pill i {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   PRECIOS / FAQ / CTA
   ═══════════════════════════════════════════ */

.price-card {
    border-radius: 1.5rem;
    border: 1px solid var(--c-line);
    background: var(--card-bg);
    padding: 2rem;
    transition: transform .3s ease, box-shadow .3s ease;
}
.price-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6); }
.price-card-hot { background: var(--card-bg); position: relative; overflow: hidden; }
.price-card-hot::before {
    content: "";
    position: absolute;
    inset: -60% -20% auto;
    height: 220%;
    background: radial-gradient(50% 40% at 50% 0%, rgba(192, 38, 211, .14), transparent 70%);
    pointer-events: none;
}

/* FAQ */
.faq-item {
    border: 1px solid var(--c-line);
    border-radius: 1rem;
    background: var(--card-bg);
    overflow: hidden;
    transition: border-color .3s;
}
.faq-item.open { border-color: rgba(139, 92, 246, .45); }
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    padding: 1.05rem 1.3rem;
    color: var(--ink);
    font-size: .95rem;
}
.faq-icon {
    display: grid;
    place-items: center;
    width: 28px; height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--c-line-strong);
    color: var(--kicker);
    transition: transform .35s, background .35s, border-color .35s;
}
.faq-icon svg { width: 14px; height: 14px; }
.faq-item.open .faq-icon {
    transform: rotate(135deg);
    background: rgba(139, 92, 246, .2);
    border-color: rgba(139, 92, 246, .5);
}
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s cubic-bezier(.3, .8, .3, 1), opacity .4s;
    opacity: 0;
}
.faq-item.open .faq-a { max-height: 300px; opacity: 1; }
.faq-a p { padding: 0 1.3rem 1.15rem; }

/* CTA final: borde cónico giratorio */
.cta-panel {
    background: linear-gradient(var(--page-bg), var(--page-bg)) padding-box,
                conic-gradient(from var(--ca, 0deg), #7c3aed, #e879f9, #22d3ee, #7c3aed) border-box;
    animation: conicTurn 6s linear infinite;
}
@property --ca { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes conicTurn { to { --ca: 360deg; } }

.cta-aurora {
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(30% 40% at 25% 30%, rgba(124, 58, 237, .25), transparent 70%),
        radial-gradient(30% 45% at 75% 65%, rgba(34, 211, 238, .18), transparent 70%),
        radial-gradient(25% 35% at 55% 20%, rgba(232, 121, 249, .16), transparent 70%);
    animation: auroraB 14s ease-in-out infinite alternate;
    pointer-events: none;
}

/* ═══════════════════════════════════════════
   AUTH (login / registro / dashboard)
   ═══════════════════════════════════════════ */

.auth-input {
    width: 100%;
    border-radius: .8rem;
    border: 1px solid var(--c-line-strong);
    background: rgb(var(--c-surf-rgb) / .04);
    padding: .85rem 1.1rem;
    font-size: .925rem;
    color: var(--ink);
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.auth-input::placeholder { color: var(--placeholder); }
.auth-input:focus {
    outline: none;
    border-color: rgba(139, 92, 246, .65);
    background: rgba(139, 92, 246, .06);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, .15);
}

.auth-check {
    width: 16px; height: 16px;
    accent-color: #8b5cf6;
}

/* Avisos */
.alert {
    border-radius: .9rem;
    padding: .85rem 1.1rem;
    font-size: .875rem;
    animation: msgIn .3s ease forwards;
}
.alert-error {
    border: 1px solid rgba(244, 63, 94, .4);
    background: rgba(244, 63, 94, .1);
    color: #fda4af;
}
.alert-success {
    border: 1px solid rgb(var(--c-lime-rgb) / .5);
    background: rgb(var(--c-lime-rgb) / .1);
    color: var(--lime-done);
}

/* Panel lateral de auth */
.auth-side {
    border-radius: 1.5rem;
    border: 1px solid var(--c-line-strong);
    background: var(--glass);
    backdrop-filter: blur(18px);
    padding: 2.5rem;
    box-shadow: 0 30px 80px -20px rgba(124, 58, 237, .3);
    position: relative;
    overflow: hidden;
    animation: mockFloat 8s ease-in-out infinite;
}
.auth-side::before {
    content: "";
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(30% 40% at 20% 20%, rgba(124, 58, 237, .22), transparent 70%),
        radial-gradient(30% 40% at 80% 70%, rgba(34, 211, 238, .16), transparent 70%);
    pointer-events: none;
}
.auth-side-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 1rem;
    font-size: 1.5rem;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #c026d3 55%, #0891b2);
    box-shadow: 0 0 30px rgba(139, 92, 246, .5);
    margin-bottom: 1.25rem;
}
.auth-side > * { position: relative; }

/* ═══════════════════════════════════════════
   WIDGET CHAT DE LINA (flotante)
   ═══════════════════════════════════════════ */

.chatw-btn {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 60;
    display: grid;
    place-items: center;
    width: 60px; height: 60px;
    border-radius: 50%;
    color: #fff;
    font-size: 1.5rem;
    background: linear-gradient(135deg, #7c3aed, #c026d3 55%, #0891b2);
    box-shadow: 0 12px 34px -6px rgba(124, 58, 237, .7);
    animation: btnGlow 3.2s ease-in-out infinite;
    transition: transform .25s cubic-bezier(.2, .8, .3, 1.4);
}
.chatw-btn:hover { transform: scale(1.1) rotate(-6deg); }
.chatw-btn.active { transform: scale(.92); }
/* Con el aviso de cookies abierto, el chat se eleva sobre la barra */
.cookie-open .chatw-btn {
    z-index: 75;
    bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px));
    transition: bottom .3s ease, transform .25s cubic-bezier(.2, .8, .3, 1.4);
}
.chatw-btn-icon { animation: sparkleSpin 6s linear infinite; }
.chatw-btn-dot {
    position: absolute;
    top: 4px; right: 4px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #a3e635;
    border: 2px solid var(--card-bg);
}

.chatw-panel {
    position: fixed;
    right: 1.25rem;
    bottom: 6.25rem;
    z-index: 61;
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 2.5rem));
    height: min(560px, calc(100vh - 9.5rem));
    border-radius: 1.4rem;
    border: 1px solid var(--c-line-strong);
    background: var(--chatw-bg);
    backdrop-filter: blur(20px);
    box-shadow: 0 30px 80px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(139, 92, 246, .12);
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(.96);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity .28s ease, transform .28s cubic-bezier(.2, .8, .3, 1.2);
}
.chatw-panel.open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.chatw-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--c-line);
}

.chatw-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    justify-content: flex-end;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, .4) transparent;
}
.chatw-body .msg { font-size: .84rem; }

.chatw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .6rem 1rem 0;
}
.chatw-chip {
    padding: .35rem .75rem;
    border-radius: 999px;
    border: 1px solid rgba(139, 92, 246, .35);
    background: rgba(139, 92, 246, .1);
    color: var(--kicker);
    font-size: .72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}
.chatw-chip:hover {
    background: rgba(139, 92, 246, .25);
    color: #fff;
    transform: translateY(-1px);
}
a.chatw-chip-cta {
    background: linear-gradient(120deg, #7c3aed, #c026d3);
    border-color: transparent;
    color: #fff;
}

.chatw-form {
    display: flex;
    gap: .6rem;
    padding: .8rem 1rem 1rem;
}
.chatw-input {
    flex: 1;
    border-radius: 999px;
    border: 1px solid var(--c-line-strong);
    background: rgb(var(--c-surf-rgb) / .05);
    padding: .65rem 1rem;
    font-size: .85rem;
    color: var(--ink);
    transition: border-color .25s, box-shadow .25s;
}
.chatw-input::placeholder { color: var(--placeholder); }
.chatw-input:focus {
    outline: none;
    border-color: rgba(139, 92, 246, .65);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .18);
}
.chatw-send {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #7c3aed, #c026d3);
    box-shadow: 0 6px 18px -4px rgba(124, 58, 237, .6);
    transition: transform .2s, opacity .2s;
}
.chatw-send:hover { transform: scale(1.08); }
.chatw-send:disabled { opacity: .5; transform: none; }

/* ═══════════════════════════════════════════
   PANEL WHATSAPP (dashboard)
   ═══════════════════════════════════════════ */

.wa-phone {
    position: relative;
    border-radius: 1rem;
    border: 1px solid rgba(37, 211, 102, .3);
    overflow: hidden;
    background:
        radial-gradient(70% 90% at 80% 0%, rgba(37, 211, 102, .1), transparent 70%),
        #0b1526;
    padding: 1rem;
}
.wa-bubbles { display: flex; flex-direction: column; gap: .5rem; }
.wb {
    max-width: 88%;
    padding: .5rem .8rem;
    border-radius: .9rem;
    font-size: .75rem;
    line-height: 1.4;
}
.wb-in {
    align-self: flex-start;
    border-bottom-left-radius: .3rem;
    background: rgb(var(--c-surf-rgb) / .08);
    color: #d5d1ec;
}
.wb-out {
    align-self: flex-end;
    border-bottom-right-radius: .3rem;
    background: #1f7a4d;
    color: #eafff2;
    box-shadow: 0 4px 14px -4px rgba(37, 211, 102, .5);
}
.wa-live {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 700;
    color: rgb(var(--c-lime-rgb));
}
.wa-live::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgb(var(--c-lime-rgb));
    box-shadow: 0 0 10px rgb(var(--c-lime-rgb));
    animation: dotBounce 1.6s ease-in-out infinite;
}

@media (max-width: 640px) {
    .chatw-panel {
        right: .75rem;
        left: .75rem;
        width: auto;
        bottom: 5.5rem;
    }
    .chatw-btn { right: .9rem; bottom: .9rem; }
}

@media (max-width: 1023px) {
    .float-badge-go { right: -1%; bottom: -2%; }
    .float-badge-ig { left: -3%; }
    .float-badge-wa { right: -1%; }
    .steps-line { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════
   TEMA CLARO / OSCURO — botón conmutador
   ═══════════════════════════════════════════ */

#themeBtn .icon-sun,
#themeBtn .icon-moon { width: 18px; height: 18px; }
[data-theme='dark']  #themeBtn .icon-moon { display: none; }
[data-theme='light'] #themeBtn .icon-sun  { display: none; }

/* ═══════════════════════════════════════════
   PRECIOS — conmutador y variantes
   ═══════════════════════════════════════════ */

.billing-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1.15rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ink-soft);
    transition: all .25s;
}
.billing-btn:hover { color: var(--ink); }
.billing-active {
    background: linear-gradient(120deg, #7c3aed, #c026d3);
    color: #fff;
    box-shadow: 0 6px 18px -6px rgba(124, 58, 237, .6);
}
.billing-badge {
    padding: .12rem .5rem;
    border-radius: 999px;
    background: rgb(var(--c-lime-rgb) / .18);
    border: 1px solid rgb(var(--c-lime-rgb) / .5);
    color: rgb(var(--c-lime-rgb));
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
}
.billing-active .billing-badge {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

.plan-var {
    padding: .32rem .7rem;
    border-radius: 999px;
    border: 1px solid var(--c-line-strong);
    background: rgb(var(--c-surf-rgb) / .05);
    font-size: .7rem;
    font-weight: 700;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    transition: all .2s;
}
.plan-var:hover { border-color: rgba(139, 92, 246, .5); color: var(--ink); }
.plan-var-active {
    background: rgba(139, 92, 246, .18);
    border-color: rgba(139, 92, 246, .6);
    color: var(--link);
}

[data-theme='light'] .plan-var-active { color: #6d28d9; }
/* billing-badge adapta su color vía --c-lime-rgb */

/* Tarjetas de planes: compactas para caber 4 en una fila */
#planGrid .price-card {
    padding: 1.5rem 1.3rem;
}
#planGrid .price-card .plan-price { font-size: 2.1rem; line-height: 1.1; }
@media (max-width: 640px) {
    #planGrid .price-card { padding: 1.35rem 1.15rem; }
}
/* ═══════════════════════════════════════════
   ADMIN — tablas y badges de estado
   ═══════════════════════════════════════════ */

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
}
.admin-table th {
    text-align: left;
    padding: .55rem .75rem;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-mute);
    border-bottom: 1px solid var(--c-line-strong);
    white-space: nowrap;
}
.admin-table td {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--c-line);
    color: var(--ink-soft);
    vertical-align: middle;
}
.admin-table tbody tr:hover { background: rgb(var(--c-surf-rgb) / .03); }

.pay-badge {
    display: inline-block;
    padding: .18rem .6rem;
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.pay-paid {
    background: rgb(var(--c-lime-rgb) / .15);
    border: 1px solid rgb(var(--c-lime-rgb) / .45);
    color: rgb(var(--c-lime-rgb));
}
.pay-pending {
    background: rgba(251, 191, 36, .12);
    border: 1px solid rgba(251, 191, 36, .4);
    color: #fbbf24;
}
[data-theme='light'] .pay-pending { color: #92400e; }
.pay-failed, .pay-refunded {
    background: rgba(244, 63, 94, .1);
    border: 1px solid rgba(244, 63, 94, .4);
    color: #fda4af;
}

/* ═══════════════════════════════════════════
   ADMIN — menú lateral plegable
   ═══════════════════════════════════════════ */

.admin-sb {
    position: fixed;
    inset-block: 0;
    left: 0;
    z-index: 55;
    width: 252px;
    display: flex;
    flex-direction: column;
    background: var(--card-bg);
    border-right: 1px solid var(--c-line);
    transition: width .25s cubic-bezier(.3, .8, .3, 1), transform .28s ease;
}
.admin-sb-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: 1rem 1rem 1rem 1.1rem;
    border-bottom: 1px solid var(--c-line);
    overflow: hidden;
    white-space: nowrap;
}
.admin-sb-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .9rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}
.admin-link {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .68rem .85rem;
    border-radius: .8rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--ink-soft);
    white-space: nowrap;
    transition: background .2s, color .2s;
}
.admin-link:hover { background: rgb(var(--c-surf-rgb) / .05); color: var(--ink); }
.admin-link.active {
    background: linear-gradient(120deg, #7c3aed, #c026d3);
    color: #fff;
    box-shadow: 0 8px 22px -8px rgba(124, 58, 237, .6);
}

.admin-sb-foot {
    padding: .8rem;
    border-top: 1px solid var(--c-line);
}
.admin-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 38px;
    border-radius: .7rem;
    border: 1px solid var(--c-line-strong);
    color: var(--ink-mute);
    transition: all .2s;
}
.admin-collapse:hover { color: var(--ink); background: rgb(var(--c-surf-rgb) / .05); }
.admin-collapse .chev { transition: transform .25s; }

.admin-sb.collapsed { width: 74px; }
.admin-sb.collapsed .label { display: none; }
.admin-sb.collapsed .admin-link { justify-content: center; padding-inline: 0; }
.admin-sb.collapsed .admin-sb-head { justify-content: center; padding-inline: .5rem; }
.admin-sb.collapsed .admin-collapse .chev { transform: rotate(180deg); }

.admin-main {
    margin-left: 252px;
    transition: margin-left .25s cubic-bezier(.3, .8, .3, 1);
}
.admin-main.collapsed-margin { margin-left: 74px; }

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: .8rem;
    height: 64px;
    padding-inline: 1.1rem;
    background: var(--header-bg);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--c-line);
}

.admin-backdrop {
    position: fixed;
    inset: 0;
    z-index: 54;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
}

@media (max-width: 1023px) {
    .admin-sb,
    .admin-sb.collapsed { transform: translateX(-100%); width: 252px; }
    .admin-sb.mobile-open { transform: none; }
    .admin-sb.mobile-open .label { display: inline; }
    .admin-sb.mobile-open .admin-link { justify-content: flex-start; padding-inline: .85rem; }
    .admin-main,
    .admin-main.collapsed-margin { margin-left: 0; }
}

/* ═══════════════════════════════════════════
   Aviso de cookies (RGPD) — barra a ancho completo
   ═══════════════════════════════════════════ */
.cookie-bar {
    position: fixed;
    z-index: 70;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .9rem 1.25rem;
    padding-bottom: calc(.9rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--c-line-strong);
    background: var(--chatw-bg);
    backdrop-filter: blur(16px);
    box-shadow: 0 -20px 50px -12px rgba(0, 0, 0, .6);
    animation: msgIn .4s ease forwards;
}
.cookie-bar-in {
    max-width: 80rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.1rem;
}
.cookie-bar-txt {
    flex: 1;
    margin: 0;
    font-size: .8rem;
    line-height: 1.55;
    color: var(--ink-soft);
}
.cookie-bar-actions {
    display: flex;
    gap: .55rem;
    flex-shrink: 0;
}
@media (max-width: 720px) {
    .cookie-bar-in { flex-direction: column; align-items: stretch; gap: .65rem; }
    .cookie-bar-actions { flex-wrap: wrap; }
    .cookie-bar-actions .cookie-btn { flex: 1 1 auto; }
}

/* Botones del aviso */
.cookie-btn {
    padding: .55rem 1.05rem;
    border-radius: .65rem;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    color: var(--ink-soft);
    background: rgb(var(--c-surf-rgb) / .35);
    border: 1px solid var(--c-line-strong);
    transition: color .15s, border-color .15s, background .15s;
}
.cookie-btn:hover {
    color: var(--ink);
    border-color: rgb(var(--c-lime-rgb) / .55);
    background: rgb(var(--c-surf-rgb) / .6);
}
.cookie-btn-primary {
    color: #fff;
    background: linear-gradient(120deg, #7c3aed, #c026d3 55%, #0891b2 130%);
    border-color: transparent;
    box-shadow: 0 8px 30px -6px rgba(139, 92, 246, .55);
}
.cookie-btn-primary:hover {
    color: #fff;
    background: linear-gradient(120deg, #7c3aed, #c026d3 55%, #0891b2 130%);
    filter: brightness(1.08);
}

/* Panel de preferencias */
.cookie-prefs-overlay {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(3px);
}
.cookie-prefs {
    width: 100%;
    max-width: 33rem;
    max-height: 85vh;
    overflow: auto;
    padding: 1.6rem 1.6rem 1.3rem;
    border-radius: 1.1rem;
    border: 1px solid var(--c-line-strong);
    background: var(--chatw-bg);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    animation: msgIn .25s ease forwards;
}
.cookie-cat {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .8rem;
    padding: .85rem 1rem;
    border: 1px solid var(--c-line);
    border-radius: .8rem;
    background: rgb(var(--c-surf-rgb) / .18);
}
.cookie-always {
    flex-shrink: 0;
    margin-top: .1rem;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-mute);
}

/* Interruptor de categorías */
.cookie-switch {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    margin: .15rem 0 0;
    width: 42px;
    height: 23px;
    border-radius: 999px;
    background: rgb(var(--c-surf-rgb) / .55);
    border: 1px solid var(--c-line-strong);
    position: relative;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.cookie-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--ink-mute);
    transition: transform .2s, background .2s;
}
.cookie-switch:checked {
    background: rgb(var(--c-lime-rgb) / .85);
    border-color: rgb(var(--c-lime-rgb) / 1);
}
.cookie-switch:checked::after {
    transform: translateX(19px);
    background: #0b2a12;
}
.cookie-switch:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Banderas del selector de idioma (SVG locales) */
.lang-flag {
    display: inline-block;
    width: 20px;
    height: 14px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14);
    vertical-align: -2px;
}

/* ═══════════════════════════════════════════
   Simulación de web de ejemplo (páginas de sector)
   Mini sitio con apariencia real propia (fondo claro,
   acento según sector vía --sim-h). ═══════════════════════ */
.sim {
    overflow: hidden;
    background: #fdfdfe;
    color: #1c1a2e;
    font-size: .8rem;
    text-align: left;
}
.sim-nav {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .8rem;
    background: hsl(var(--sim-h) 65% 97%);
    border-bottom: 1px solid hsl(var(--sim-h) 40% 90%);
}
.sim-logo {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: hsl(var(--sim-h) 70% 92%);
    font-size: .75rem;
}
.sim-name {
    font-weight: 700;
    font-size: .74rem;
    color: #26233b;
}
.sim-links {
    margin-left: auto;
    display: flex;
    gap: .45rem;
}
.sim-links i {
    width: 26px;
    height: 5px;
    border-radius: 3px;
    background: hsl(var(--sim-h) 30% 84%);
}
.sim-hero {
    padding: 1.15rem .9rem 1rem;
    text-align: center;
    background: linear-gradient(180deg, hsl(var(--sim-h) 70% 95%), #fff);
}
.sim-hero h4 {
    margin: 0;
    font-size: .98rem;
    font-weight: 800;
    color: #26233b;
}
.sim-cta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .6rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
    background: #25d366;
    box-shadow: 0 4px 12px rgba(37, 211, 102, .35);
}
.sim-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    padding: .8rem;
}
.sim-card {
    padding: .55rem .45rem;
    border-radius: .55rem;
    border: 1px solid hsl(var(--sim-h) 35% 91%);
    background: hsl(var(--sim-h) 60% 98%);
    font-size: .64rem;
    line-height: 1.45;
    color: #3c3956;
    text-align: center;
}
.sim-card b {
    display: block;
    color: hsl(var(--sim-h) 60% 36%);
}
.sim-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem .8rem;
    border-top: 1px solid hsl(var(--sim-h) 35% 91%);
    background: hsl(var(--sim-h) 50% 96%);
    font-size: .64rem;
    color: #55516e;
}
.sim-stars {
    color: #f5a623;
    letter-spacing: .1em;
}
@media (max-width: 560px) {
    .sim-services { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════
   OJO mostrar/ocultar contraseña
   ═══════════════════════════════════════════ */

.pw-wrap {
    position: relative;
}
.pw-wrap .auth-input {
    padding-right: 3rem;
}
.pw-eye {
    position: absolute;
    right: .55rem;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: .55rem;
    border: none;
    background: transparent;
    color: var(--ink-mute);
    cursor: pointer;
    transition: color .2s, background .2s;
}
.pw-eye:hover {
    color: var(--ink);
    background: rgb(var(--c-surf-rgb) / .06);
}
.pw-eye svg {
    width: 19px;
    height: 19px;
}
.pw-eye .eye-off { display: none; }
.pw-eye.shown .eye-off { display: block; }
.pw-eye.shown .eye-on  { display: none; }

/* ══════════ Constructor IA (dashboard) ══════════ */
.bld-chat {
    height: 420px;
    overflow-y: auto;
    scrollbar-width: thin;
}
@media (max-width: 1023px) { .bld-chat { height: 340px; } }
.bld-chat .wb { max-width: 85%; }

.bld-tab {
    border: 1px solid var(--c-line);
    color: var(--ink-soft);
    background: transparent;
    transition: all .15s;
}
.bld-tab:hover { color: var(--ink); background: rgb(var(--c-surf-rgb) / .1); }
.bld-tab-on {
    background: linear-gradient(120deg, #8b5cf6, #d946ef);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 14px -6px rgb(139 92 246 / .5);
}

.bld-tpl { cursor: pointer; position: relative; }
.bld-tpl:focus-visible { outline: 2px solid #8b5cf6; }
.bld-tpl-on {
    border-color: #8b5cf6 !important;
    background: rgb(var(--c-surf-rgb) / .12) !important;
    box-shadow: 0 0 0 1px #8b5cf6, 0 8px 24px -10px rgb(139 92 246 / .45);
}
.bld-tpl-on::after {
    content: "✓";
    position: absolute;
    top: .6rem;
    right: .7rem;
    width: 1.35rem;
    height: 1.35rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: linear-gradient(120deg, #8b5cf6, #d946ef);
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
}

.bld-typing::after {
    content: "…";
    animation: bldDots 1.2s steps(4) infinite;
}
@keyframes bldDots {
    0% { content: ""; }
    25% { content: "·"; }
    50% { content: "··"; }
    75% { content: "···"; }
}

#bldFrame { background: #fff; }
html[data-theme="dark"] #bldFrame { background: #fff; }

#bldDrop.dragover, #bldDrop.\!border-brand-500 { border-color: #8b5cf6 !important; background: rgb(var(--c-surf-rgb) / .1); }