/* ==========================================================================
   Acelera Safety - capa de componentes.
   Los tokens viven en tailwind.config.js; aca solo lo que Tailwind no expresa
   bien: gradientes de escena, vidrio, y los mocks rotados del bento.
   ========================================================================== */

:root {
    --font-sans: "Inter Variable", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, monospace;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    background: #F4F2EC;
    color: #101720;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

:focus-visible {
    outline: 2px solid #C96A43;
    outline-offset: 3px;
    border-radius: 6px;
}

::selection {
    background: #F3E1D5;
    color: #984A28;
}

/* --------------------------------------------------------------------------
   Display: sans pesada y compacta. Es el cambio que mas separa esta landing
   del sistema editorial de acelera.agency.
   -------------------------------------------------------------------------- */

.display {
    font-weight: 750;
    letter-spacing: -0.045em;
    line-height: 0.94;
    text-wrap: balance;
}

.h1 {
    font-size: clamp(2.375rem, 5.4vw, 4.5rem);
    letter-spacing: -0.05em;
    line-height: 0.95;
}

.h2 {
    font-size: clamp(2.125rem, 4.4vw, 3.75rem);
    letter-spacing: -0.05em;
}

.h3 {
    font-size: clamp(1.25rem, 1.8vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.kicker {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.lede {
    font-size: clamp(1rem, 1.5vw, 1.1875rem);
    line-height: 1.6;
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
   Escena oscura del hero: malla de gradientes en lugar de fotografia.
   Para un producto de seguridad lee mejor que un stock photo.
   -------------------------------------------------------------------------- */

.night-scene {
    position: relative;
    isolation: isolate;
    background: #0A1016;
    overflow: hidden;
}

/* Malla de gradientes: luz calida arriba a la izquierda, ambar arriba a la derecha,
   y un azul profundo abajo que hace de horizonte. La vineta cierra los bordes para
   que el contenido central gane peso. */
.night-scene::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        /* halo suave detras del titular, para que el texto tenga escenario */
        radial-gradient(64% 40% at 50% 3%, rgba(255, 172, 112, 0.17), transparent 68%),
        /* esquina calida: el ancla de color de la escena */
        radial-gradient(54% 42% at 6% -8%, rgba(201, 106, 67, 0.52), transparent 64%),
        radial-gradient(44% 34% at 93% 4%, rgba(255, 178, 122, 0.17), transparent 62%),
        /* horizonte frio abajo: da el contraste calido/frio que evita el look turbio */
        radial-gradient(84% 44% at 50% 97%, rgba(46, 92, 138, 0.42), transparent 66%),
        radial-gradient(34% 26% at 84% 60%, rgba(201, 106, 67, 0.10), transparent 64%),
        /* vineta apenas insinuada */
        radial-gradient(132% 106% at 50% 40%, transparent 56%, rgba(2, 5, 9, 0.50) 100%),
        linear-gradient(178deg, #0E151E 0%, #090E15 55%, #06090E 100%);
}

/* Grano fino. Es lo que evita que la malla de gradientes se vea como una mancha
   sucia o con banding en pantallas de 8 bits. Sin assets: turbulencia SVG inline. */
.night-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.42;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px clamp(16px, 4vw, 58px);
}

.brand-capsule {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 6px 20px rgba(3, 16, 8, 0.18);
}

.brand-capsule img {
    display: block;
    width: 68px;
    height: auto;
}

.brand-capsule span {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #C96A43;
    border-left: 1px solid #DED9CD;
    padding-left: 10px;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-link {
    padding: 9px 13px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 180ms ease, color 180ms ease;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: transform 180ms var(--ease-out), background 180ms ease, box-shadow 180ms ease;
}

.btn--primary {
    background: #C96A43;
    color: #fff;
    box-shadow: 0 10px 26px rgba(201, 106, 67, 0.34);
}

.btn--primary:hover {
    background: #B2572F;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(201, 106, 67, 0.42);
}

.btn--onDark {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.btn--onDark:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
}

.btn--ink {
    background: #101720;
    color: #fff;
    box-shadow: 0 10px 26px rgba(16, 23, 32, 0.22);
}

.btn--ink:hover {
    background: #1B2531;
    transform: translateY(-2px);
}

.btn--ghost {
    background: #fff;
    border-color: #C4BEB0;
    color: #101720;
}

.btn--ghost:hover {
    border-color: #101720;
    transform: translateY(-2px);
}

.btn:disabled {
    opacity: 0.6;
    cursor: default;
    transform: none;
}

/* --------------------------------------------------------------------------
   Vidrio: tarjetas flotantes del hero y panel de producto.
   -------------------------------------------------------------------------- */

.glass {
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 18px 44px rgba(3, 12, 20, 0.28);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.float-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 210px;
    padding: 12px 14px;
    color: #101720;
}

.float-card small {
    display: block;
    color: #6B7280;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.float-card strong {
    display: block;
    margin-top: 3px;
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.float-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.float-icon--danger {
    background: #FDEEED;
    color: #C4453F;
}

.float-icon--safe {
    background: #E3F5EA;
    color: #2F8B62;
}

/* Flanquean el panel de producto, no el titulo: sobre el H1 competian por atencion. */
.panel-stage {
    position: relative;
    display: flex;
    justify-content: center;
}

.float-left {
    right: calc(100% - 40px);
    top: 14%;
    animation: floaty 7s ease-in-out infinite;
}

.float-right {
    left: calc(100% - 40px);
    bottom: 16%;
    animation: floaty 8s ease-in-out infinite reverse;
}

@keyframes floaty {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-9px);
    }
}

/* --------------------------------------------------------------------------
   Panel de producto (traza del agente)
   -------------------------------------------------------------------------- */

.panel {
    width: min(720px, 100%);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 34px 70px rgba(2, 10, 18, 0.45);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    padding: 8px;
    text-align: left;
}

.panel__inner {
    border-radius: 14px;
    background: rgba(8, 13, 19, 0.72);
    overflow: hidden;
}

.panel__bar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.panel__pulse {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #3FA97A;
    box-shadow: 0 0 0 3px rgba(63, 169, 122, 0.22);
}

.trace-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 12px;
    align-items: baseline;
    padding: 11px 15px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
    border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.trace-row:last-child {
    border-bottom: 0;
}

.trace-row__t {
    color: rgba(255, 255, 255, 0.32);
    font-variant-numeric: tabular-nums;
}

.trace-row__v {
    min-width: 3.2rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.5);
}

.trace-row__m {
    color: rgba(255, 255, 255, 0.78);
    word-break: break-word;
}

.trace-row--flag {
    background: rgba(176, 125, 26, 0.13);
}

.trace-row--flag .trace-row__v {
    color: #E9B44C;
}

.trace-row--block {
    background: rgba(196, 69, 63, 0.16);
}

.trace-row--block .trace-row__v {
    color: #F0857F;
}

.tag {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tag--block {
    color: #F0857F;
}

.tag--flag {
    color: #E9B44C;
}

/* Cascada: se lee como una traza corriendo. */
.trace-row {
    opacity: 0;
    animation: rowIn 0.5s var(--ease-out) both;
    animation-delay: calc(0.85s + var(--row) * 0.14s);
}

@keyframes rowIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Pasos: los tres que explican el servicio
   -------------------------------------------------------------------------- */

.step {
    position: relative;
    padding: 30px 28px 32px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(33, 36, 27, 0.09);
    transition: transform 220ms var(--ease-out), box-shadow 220ms ease;
}

.step:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(33, 36, 27, 0.13);
}

.step__n {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-bottom: 18px;
    border-radius: 12px;
    background: #FAF1EA;
    color: #C96A43;
    font-size: 0.9375rem;
    font-weight: 750;
}

/* --------------------------------------------------------------------------
   Bento
   -------------------------------------------------------------------------- */

.bento {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
}

.bento > article {
    grid-column: span 12;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(33, 36, 27, 0.09);
}

@media (min-width: 900px) {
    .bento > article {
        grid-column: span 6;
    }

    .bento > article:nth-child(3) {
        grid-column: 3 / span 8;
    }
}

.bento__visual {
    min-height: 300px;
    display: grid;
    place-items: center;
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.bento__visual--attack {
    background:
        radial-gradient(110% 90% at 20% 10%, rgba(196, 69, 63, 0.42), transparent 58%),
        linear-gradient(160deg, #1A1013 0%, #0B0F14 100%);
}

.bento__visual--limit {
    background:
        radial-gradient(110% 90% at 80% 12%, rgba(201, 106, 67, 0.48), transparent 58%),
        linear-gradient(160deg, #1B1310 0%, #0C0F13 100%);
}

.bento__visual--watch {
    background:
        radial-gradient(110% 90% at 50% 8%, rgba(43, 92, 130, 0.48), transparent 58%),
        linear-gradient(160deg, #0F1620 0%, #0A0E13 100%);
}

.bento__copy {
    padding: 24px 26px 28px;
}

.bento__copy > span {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #A29C90;
}

.bento__copy h3 {
    margin: 10px 0 8px;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.bento__copy p {
    max-width: 54ch;
    margin: 0;
    color: #4B5563;
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Mocks rotados dentro del visual: dan sensacion de producto real. */
.mock {
    width: min(400px, 96%);
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 44px rgba(4, 10, 16, 0.34);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: #101720;
    padding: 16px;
}

.mock--tiltL {
    transform: rotate(-2deg);
}

.mock--tiltR {
    transform: rotate(1.8deg);
}

.mock__label {
    display: block;
    margin-bottom: 12px;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #A29C90;
}

.mock__line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    border-radius: 10px;
    background: #F5F4F0;
    font-size: 0.75rem;
    color: #4B5563;
}

.mock__line + .mock__line {
    margin-top: 7px;
}

.mock__line b {
    color: #101720;
    font-weight: 650;
}

.mock__line .ml-auto {
    margin-left: auto;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pill--danger {
    background: #FDEEED;
    color: #C4453F;
}

.pill--safe {
    background: #E3F5EA;
    color: #2F8B62;
}

.pill--warn {
    background: #F8EFD9;
    color: #96690F;
}

.pill--off {
    background: #EFEDE7;
    color: #8A8F98;
}

.toggle {
    width: 30px;
    height: 17px;
    border-radius: 999px;
    position: relative;
    flex-shrink: 0;
}

.toggle::after {
    content: "";
    position: absolute;
    top: 2.5px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #fff;
}

.toggle--on {
    background: #3FA97A;
}

.toggle--on::after {
    right: 2.5px;
}

.toggle--off {
    background: #CFCCC4;
}

.toggle--off::after {
    left: 2.5px;
}

/* --------------------------------------------------------------------------
   Riesgos
   -------------------------------------------------------------------------- */

.risk {
    padding: 24px 24px 26px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(40, 33, 22, 0.07);
    transition: transform 200ms var(--ease-out), box-shadow 200ms ease;
}

.risk:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(33, 36, 27, 0.11);
}

.risk__icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    margin-bottom: 15px;
    border-radius: 11px;
    background: #FAF1EA;
    color: #C96A43;
}

/* --------------------------------------------------------------------------
   Planes
   -------------------------------------------------------------------------- */

.plan {
    display: flex;
    flex-direction: column;
    padding: 28px 26px 30px;
    border: 1px solid #E9E5DB;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(40, 33, 22, 0.07);
}

.plan--featured {
    border-color: #C96A43;
    box-shadow: 0 20px 48px rgba(201, 106, 67, 0.18);
}

.plan__badge {
    position: absolute;
    top: -11px;
    left: 26px;
    padding: 4px 11px;
    border-radius: 999px;
    background: #C96A43;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.plan__price {
    font-size: 1.75rem;
    font-weight: 750;
    letter-spacing: -0.04em;
}

/* margin va aca y no como clase de Tailwind: `.plan ul` (0,1,1) le gana a `.mb-7` (0,1,0).
   flex-shrink:0 porque como item de un flex column el ul se encogia debajo de su contenido
   y el boton con mt-auto terminaba encima del ultimo li. */
.plan ul {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: grid;
    gap: 11px;
    flex-shrink: 0;
}

.plan li {
    display: flex;
    gap: 10px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #4B5563;
}

.plan li svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: #3FA97A;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(40, 33, 22, 0.07);
    overflow: hidden;
}

.faq + .faq {
    margin-top: 10px;
}

.faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq__icon {
    flex-shrink: 0;
    color: #C96A43;
    transition: transform 240ms var(--ease-out);
}

.faq[open] .faq__icon {
    transform: rotate(45deg);
}

.faq__body {
    padding: 0 24px 22px;
    max-width: 64ch;
    color: #4B5563;
    font-size: 0.9375rem;
    line-height: 1.65;
}

/* --------------------------------------------------------------------------
   Formulario
   -------------------------------------------------------------------------- */

.lead-form label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.75rem;
    font-weight: 650;
    color: #4B5563;
}

.lead-form input[type="text"],
.lead-form input[type="email"],
.lead-form select,
.lead-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #D8D3C7;
    border-radius: 10px;
    background: #FBFAF7;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: #101720;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.lead-form input::placeholder,
.lead-form textarea::placeholder {
    color: #A29C90;
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
    outline: none;
    border-color: #C96A43;
    box-shadow: 0 0 0 3px rgba(201, 106, 67, 0.16);
}

.lead-form .consent label {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.55;
    margin-bottom: 0;
}

.lead-form input[type="checkbox"] {
    border-radius: 4px;
    border-color: #C4BEB0;
    color: #C96A43;
}

.lead-form input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px rgba(201, 106, 67, 0.16);
    border-color: #C96A43;
}

.form-feedback:empty {
    display: none;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
    background: linear-gradient(180deg, #101821 0%, #070B10 100%);
    color: rgba(255, 255, 255, 0.7);
}

.footer a {
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.875rem;
    transition: color 160ms ease;
}

.footer a:hover {
    color: #FFB27A;
}

/* --------------------------------------------------------------------------
   Reveals
   -------------------------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.hero-in {
    opacity: 0;
    animation: rowIn 0.85s var(--ease-out) both;
    animation-delay: var(--d, 0s);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal,
    .hero-in,
    .trace-row {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 1100px) {
    .float-card {
        display: none;
    }
}

/* A 390px la traza a tres columnas parte los mensajes en dos lineas.
   Se cae la hora (es decorativa) y queda verbo + mensaje. */
@media (max-width: 640px) {
    .trace-row {
        grid-template-columns: auto 1fr;
        gap: 9px;
        padding: 10px 13px;
        font-size: 0.6875rem;
    }

    .trace-row__t {
        display: none;
    }

    .trace-row__v {
        min-width: 2.9rem;
    }

    .panel {
        padding: 6px;
    }

    .panel__bar {
        padding: 11px 13px;
        font-size: 0.625rem;
    }
}