/* ============================================================================
   Landing pública firm.la — estilos autónomos (mobile-first, sin frameworks).
   Paleta tomada del logotipo: azul marino profundo + acero, con acento azul
   para las llamadas a la acción.
   ============================================================================ */

:root {
    --azul-900: #041f3f;
    --azul-800: #06376b;
    --azul-700: #0a4a8f;
    --azul-500: #1f63c4;
    --acc-500:  #4f8ff7;
    --acc-400:  #7eafff;
    --acero:    #838d93;
    --ink:      #17203a;
    --muted:    #5b6478;
    --line:     #e6e9f2;
    --bg:       #ffffff;
    --bg-alt:   #f4f7fb;
    --white:    #ffffff;
    --radius:   16px;
    --shadow:   0 10px 30px rgba(4, 31, 63, .08);
    --shadow-lg:0 22px 48px rgba(4, 31, 63, .16);
    /* Degradados de marca: el acento no es un color plano, para que los
       elementos que mandan (botón, nodo, sello) tengan volumen. */
    --grad-acc: linear-gradient(135deg, #4f8ff7 0%, #1f63c4 100%);
    --grad-dark:linear-gradient(150deg, #041f3f 0%, #0a4a8f 70%, #1f63c4 130%);
    --ease:     cubic-bezier(.22, 1, .36, 1);
    --maxw:     1120px;
    --font:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--azul-500); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 20px;
}

/* Etiqueta solo para lectores de pantalla (el campo de verificación la usa). */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* -------------------- Botones -------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 600;
    font-size: .95rem;
    padding: .65rem 1.2rem;
    border-radius: 999px;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-lg { padding: .85rem 1.6rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--grad-acc); color: var(--white); border-color: transparent; box-shadow: 0 6px 16px rgba(31,99,196,.28); }
.btn-primary:hover { color: var(--white); box-shadow: 0 12px 26px rgba(79, 143, 247, .42); }
.btn-outline { background: transparent; color: var(--white); border-color: rgba(255,255,255,.6); }
.btn-outline:hover { background: rgba(255,255,255,.12); }
.btn-ghost { background: transparent; color: var(--white); border-color: transparent; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }

/* -------------------- Header / Nav -------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--azul-900);
    color: var(--white);
}
.nav-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 64px;
}
.brand { display: inline-flex; align-items: center; }
.brand:hover { text-decoration: none; }
.brand img { height: 40px; width: auto; }
.main-nav { display: none; margin-left: auto; gap: 1.4rem; }
.main-nav a { color: rgba(255,255,255,.85); font-weight: 500; }
.main-nav a:hover { color: var(--white); text-decoration: none; }
.nav-cta { display: none; gap: .6rem; margin-left: 1rem; }

.nav-toggle {
    margin-left: auto;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 42px; height: 42px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 10px;
    cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--white); border-radius: 2px; }

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .8rem 20px 1.2rem;
    background: var(--azul-800);
    border-top: 1px solid rgba(255,255,255,.08);
}
.mobile-nav a { color: rgba(255,255,255,.9); padding: .6rem 0; font-weight: 500; }
.mobile-nav a:hover { text-decoration: none; }
.mobile-nav .btn { margin-top: .5rem; }

/* -------------------- Aviso discreto -------------------- */
.notice { background: #fff7e6; border-bottom: 1px solid #f2dca8; }
.notice .container { display: flex; align-items: flex-start; gap: .6rem; padding-top: .8rem; padding-bottom: .8rem; font-size: .92rem; color: #6b5410; }
.notice .ico { font-style: normal; }

/* -------------------- Hero -------------------- */
.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(900px 420px at 12% 110%, rgba(31,99,196,.55) 0%, transparent 60%),
        radial-gradient(1200px 500px at 80% -10%, var(--azul-700) 0%, var(--azul-900) 55%);
    color: var(--white);
    padding: 3rem 0 3.5rem;
}
/* Retícula tenue: le da materia al fondo plano sin competir con el texto. */
.hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 0%, transparent 75%);
            mask-image: radial-gradient(70% 60% at 50% 35%, #000 0%, transparent 75%);
    pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }
.hero-grid { display: grid; gap: 2rem; align-items: center; }
.eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    font-weight: 700;
    color: var(--acc-400);
    margin: 0 0 .6rem;
}
.hero h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 1rem; font-weight: 800; }
.hero .hl { color: var(--acc-400); }
.lead { font-size: 1.08rem; color: rgba(255,255,255,.85); margin: 0 0 1.6rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.4rem; }
.hero-badges { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; padding: 0; margin: 0; }
.hero-badges li {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .86rem; color: rgba(255,255,255,.88);
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px; padding: .3rem .8rem .3rem .65rem;
    backdrop-filter: blur(4px);
}
.hero-badges .ico { color: var(--acc-400); }

/* Escenario del arte: halo, flotación y dos acuses colgados de las esquinas. */
.hero-stage { position: relative; display: block; }

/* -------------------- Video del héroe --------------------
   🔴 NO ES UN REPRODUCTOR, y lo que lo impide es esta máscara. El material
   comparte fondo con el héroe (el mismo azul marino, la misma retícula de
   piso), así que basta disolverle los cuatro bordes para que deje de haber un
   rectángulo: el centro —donde pasa todo— queda opaco y lo que se desvanece
   son los márgenes, que en este video son fondo liso. Sin controles, sin
   marco y sin esquinas, se lee como parte de la ilustración.
   El `aspect-ratio` reserva el alto antes de que baje nada: sin él, el cartel
   al cargar empujaría el héroe entero hacia abajo. */
.hero-media {
    position: relative; z-index: 1;
    aspect-ratio: 16 / 9;
    animation: flota 7s var(--ease) infinite;
    /* 🔴 DOS GRADIENTES LINEALES INTERSECADOS, no uno radial. Un radial con
       radios mayores que la caja deja el borde del elemento DENTRO de la zona
       opaca y lo que se ve es un rectángulo de esquinas duras —se probó—. Así
       cada borde se desvanece por su cuenta en un porcentaje que se controla,
       y la intersección hace que las esquinas se vayan antes, que es lo que
       quita la forma de caja. */
    -webkit-mask-image:
        linear-gradient(to right,  transparent 0, #000 14%, #000 86%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
            mask-image:
        linear-gradient(to right,  transparent 0, #000 14%, #000 86%, transparent 100%),
        linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
    /* Safari sigue necesitando su palabra (`source-in`); Chrome y Firefox ya
       entienden la estándar. Sin esta línea los dos gradientes se SUMAN en vez
       de intersecarse y no se desvanece ningún borde. */
    -webkit-mask-composite: source-in;
            mask-composite: intersect;
}
.hero-media > img,
.hero-media > video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    margin: 0; border: 0;
}
/* El cartel se queda debajo y el video entra encima con un fundido. Sin él se
   ve el corte entre el fotograma fijo y el primer cuadro de la reproducción,
   que es justo el detalle que delata un video pegado. */
.hero-media-video { opacity: 0; transition: opacity .55s var(--ease); }
.hero-media.is-playing .hero-media-video { opacity: 1; }

.hero-glow {
    position: absolute; z-index: 0; left: 50%; top: 50%;
    width: 96%; aspect-ratio: 16 / 9; transform: translate(-50%,-50%);
    background: radial-gradient(circle, rgba(79,143,247,.55) 0%, rgba(79,143,247,0) 68%);
    filter: blur(6px); pointer-events: none;
}
.hero-chip {
    position: absolute; z-index: 2;
    display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(255,255,255,.96); color: var(--azul-800);
    font-size: .82rem; font-weight: 600;
    padding: .5rem .85rem; border-radius: 999px;
    box-shadow: 0 12px 26px rgba(4,31,63,.28);
}
.hero-chip .ico { color: #12b886; }
/* Van MORDIENDO el borde de la hoja, no encima de su contenido: tapar el
   encabezado o el QR del documento es tapar justo lo que se está presumiendo. */
.hero-chip--1 { left: -5%;  top: -1%;    animation: flota 6s var(--ease) infinite .4s; }
.hero-chip--2 { right: -6%; bottom: 2%;  animation: flota 6.6s var(--ease) infinite 1.1s; }
.hero-chip--2 .ico { color: var(--acc-500); }

@keyframes flota { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* -------------------- Secciones -------------------- */
.section { padding: 4rem 0; }
.section-alt { background: var(--bg-alt); }
.section-title { font-size: 1.7rem; font-weight: 800; text-align: center; margin: 0 0 .7rem; color: var(--azul-900); letter-spacing: -.01em; }
/* Subrayado corto bajo el título: ancla la sección sin una línea de separación
   a todo lo ancho, que es lo que hace que una página parezca un formulario. */
.section-title::after {
    content: ""; display: block; width: 54px; height: 4px; border-radius: 2px;
    margin: .7rem auto 0; background: var(--grad-acc);
}
.section-sub { text-align: center; color: var(--muted); max-width: 720px; margin: 0 auto 2.4rem; font-size: 1.02rem; }

/* Antetítulo (el renglón corto en versalitas sobre el título). */
.eyebrow-center { display: block; text-align: center; margin-bottom: .5rem; color: var(--acc-500); }
.section-dark .eyebrow-center { color: var(--acc-400); }

/* -------------------- Iconos (sprite inline) -------------------- */
.sprite { display: none; }
.ico {
    width: 24px; height: 24px; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}
.ico-xs { width: 16px; height: 16px; stroke-width: 2.1; }

/* Problema -> solución */
.ps-grid { display: grid; gap: 1.2rem; }
.ps-col { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.4rem 1rem; box-shadow: var(--shadow); }
.ps-col h3 { margin: 0 0 .8rem; font-size: 1.15rem; }
.ps-col ul { margin: 0; padding-left: 1.1rem; }
.ps-col li { margin-bottom: .5rem; color: #37405a; }
.ps-problem h3 { color: #b04a2f; }
.ps-problem li::marker { color: #d1836f; }
.ps-solution h3 { color: var(--azul-700); }
.ps-solution li::marker { color: var(--acc-500); }

/* Tarjetas de capacidades */
.cards-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.card {
    position: relative; overflow: hidden;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.5rem; box-shadow: var(--shadow);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
/* Filo de acento que se desliza al pasar el puntero: movimiento con sentido
   —señala la tarjeta activa— y no adorno que se mueve solo. */
.card::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: var(--grad-acc); transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: #d7e2f5; }
.card:hover::before { transform: scaleX(1); }
.card-ico {
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #eaf2ff 0%, #dbe8ff 100%);
    color: var(--azul-500); border-radius: 14px; margin-bottom: 1rem;
    transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.card:hover .card-ico, .seg:hover .card-ico { background: var(--grad-acc); color: var(--white); transform: scale(1.06); }
.card h3 { margin: 0 0 .5rem; font-size: 1.1rem; color: var(--azul-900); }
.card p { margin: 0; color: var(--muted); font-size: .96rem; }

/* Perfiles */
.perf-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.perf { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.perf-ico { font-size: 1.5rem; }
.perf h3 { margin: .4rem 0 .3rem; font-size: 1.02rem; color: var(--azul-800); }
.perf p { margin: 0; color: var(--muted); font-size: .92rem; }

/* Verificación pública */
.verify-box {
    text-align: center; max-width: 720px;
    background: var(--white); border: 1px solid var(--line); border-radius: 22px;
    padding: 2.4rem 1.6rem 2rem; box-shadow: var(--shadow-lg);
}
.verify-box .section-sub { margin-bottom: 1.6rem; }
.verify-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 58px; height: 58px; border-radius: 16px; margin-bottom: 1rem;
    background: var(--grad-acc); color: var(--white);
    box-shadow: 0 12px 26px rgba(31,99,196,.3);
}
.verify-ico .ico { width: 28px; height: 28px; }
.verify-form {
    display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
    max-width: 560px; margin: 0 auto .8rem;
}
.verify-form input {
    font: inherit; flex: 1 1 260px; min-width: 0;
    padding: .75rem 1rem;
    border: 1.5px solid var(--line); border-radius: 999px;
    background: var(--white); color: var(--ink);
    font-family: "SFMono-Regular", Consolas, monospace; letter-spacing: .04em;
    text-align: center;
}
.verify-form input:focus { outline: none; border-color: var(--azul-500); box-shadow: 0 0 0 3px rgba(31,99,196,.15); }
.verify-hint { color: var(--muted); font-size: .92rem; margin: 0; }

/* Acceso / subdominio */
.login-box { text-align: center; }
.login-url {
    display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .1rem;
    background: var(--white); border: 1.5px dashed var(--azul-500); border-radius: 12px;
    padding: .8rem 1.2rem; font-size: 1.25rem; font-family: "SFMono-Regular", Consolas, monospace;
    margin: .4rem auto 1rem; color: var(--muted); max-width: 100%; word-break: break-word;
}
.login-url strong { color: var(--azul-700); }
.login-hint { max-width: 640px; margin: 0 auto; color: var(--muted); font-size: .96rem; }

/* CTA / contacto */
.cta-section { background: linear-gradient(180deg, var(--bg-alt) 0%, var(--white) 70%); }
.contact-card {
    position: relative;
    max-width: 660px; margin: 1.2rem auto 0; text-align: center;
    background: var(--grad-dark); border: 0; border-radius: 22px;
    padding: 2.6rem 1.8rem 2.2rem; box-shadow: 0 26px 60px rgba(4,31,63,.28);
    color: rgba(255,255,255,.88); overflow: hidden;
}
.contact-card::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(520px 220px at 50% -20%, rgba(126,175,255,.3), transparent 70%);
    pointer-events: none;
}
.contact-card > * { position: relative; z-index: 1; }
.contact-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 16px; margin-bottom: 1rem;
    background: rgba(255,255,255,.12); color: var(--white);
    border: 1px solid rgba(255,255,255,.22);
}
.contact-card .contact-label { color: rgba(255,255,255,.6); }
.contact-card .contact-mail a { color: var(--white); }
.contact-card .contact-note { color: rgba(255,255,255,.72); }
.contact-card .btn-primary { background: var(--white); color: var(--azul-800); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.contact-card .btn-primary:hover { color: var(--azul-900); }
.contact-label { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.contact-mail { margin: .3rem 0 1rem; font-size: 1.45rem; font-weight: 700; word-break: break-word; }
.contact-mail a { color: var(--azul-700); }
.contact-note { margin: 0 auto 1.4rem; max-width: 480px; color: var(--muted); font-size: .96rem; }

/* -------------------- Footer -------------------- */
.site-footer { background: var(--azul-900); color: rgba(255,255,255,.85); padding-top: 2.4rem; }
.footer-grid { display: grid; gap: 1.4rem; padding-bottom: 1.6rem; }
.footer-brand img { height: 36px; width: auto; }
.footer-brand p { margin: .5rem 0 0; color: rgba(255,255,255,.6); font-size: .9rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-links a { color: rgba(255,255,255,.8); font-size: .92rem; }
.footer-legal { border-top: 1px solid rgba(255,255,255,.1); padding: 1rem 0; }
.footer-legal .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .85rem; color: rgba(255,255,255,.6); }
.muted { color: rgba(255,255,255,.45); }
.muted a { color: rgba(255,255,255,.7); }

/* -------------------- Nota bajo el CTA del héroe -------------------- */
.hero-nota { margin: -.6rem 0 1.2rem; font-size: .92rem; color: rgba(255,255,255,.72); }

/* -------------------- Cómo funciona: tres pasos -------------------- */
.pasos { list-style: none; display: grid; gap: 1.6rem; padding: 0; margin: 0; position: relative; }
.paso { position: relative; text-align: center; padding: 0 .6rem; }

/* El nodo: icono dentro de un disco con halo y el número colgado en la esquina.
   Es lo que convierte tres cuadros en una secuencia. */
.paso-nodo {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 76px; height: 76px; border-radius: 50%;
    background: var(--white); color: var(--azul-500);
    border: 1px solid #dde7f7;
    box-shadow: 0 10px 26px rgba(31,99,196,.16);
    margin-bottom: 1.1rem;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease);
}
.paso-nodo .ico { width: 30px; height: 30px; }
.paso-num {
    position: absolute; right: -4px; bottom: -4px;
    width: 28px; height: 28px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--grad-acc); color: var(--white);
    font-size: .84rem; font-weight: 800;
    border: 3px solid var(--bg);
}
.paso:hover .paso-nodo { transform: translateY(-4px) scale(1.04); box-shadow: 0 16px 34px rgba(31,99,196,.26); }
.paso h3 { margin: 0 0 .45rem; font-size: 1.12rem; color: var(--azul-900); }
.paso p { margin: 0 auto; max-width: 34ch; color: var(--muted); font-size: .96rem; }

/* -------------------- Segmentos -------------------- */
.seg-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.seg {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.6rem 1.5rem; box-shadow: var(--shadow);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.seg:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: #d7e2f5; }
.seg h3 { margin: 0 0 .5rem; font-size: 1.12rem; color: var(--azul-900); }
.seg p { margin: 0; color: var(--muted); font-size: .96rem; }

/* -------------------- Precios -------------------- */
.pr-toggle {
    display: inline-flex; margin: 0 auto 1rem; padding: 4px;
    background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px;
}
.pr-toggle { display: flex; width: fit-content; }
.pr-tab {
    appearance: none; border: 0; background: transparent; cursor: pointer;
    font: inherit; font-weight: 600; color: var(--muted);
    padding: .5rem 1.2rem; border-radius: 999px;
}
.pr-tab.is-on { background: var(--white); color: var(--azul-800); box-shadow: 0 2px 8px rgba(4,31,63,.12); }
.pr-ahorro { text-align: center; color: var(--azul-700); font-weight: 600; font-size: .92rem; margin: 0 0 1.4rem; }

.pr-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; align-items: stretch; }
.pr-card {
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.5rem 1.4rem; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.pr-card { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.pr-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.pr-card--destacado { border-color: var(--acc-500); box-shadow: 0 16px 36px rgba(79,143,247,.22); position: relative; }
/* La tarjeta recomendada se nota ANTES de leerla: sello arriba y un dedo más
   de altura que las demás. */
.pr-badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--grad-acc); color: var(--white);
    font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: .3rem .85rem; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 8px 18px rgba(31,99,196,.32);
}
.pr-nombre { margin: 0 0 .6rem; font-size: 1.15rem; color: var(--azul-900); }
.pr-precio { margin: 0 0 .2rem; display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.pr-monto { font-size: 2rem; font-weight: 800; color: var(--azul-800); line-height: 1.1; }
.pr-periodo { color: var(--muted); font-size: .92rem; }
.pr-cotiza { font-size: 1.5rem; font-weight: 800; color: var(--azul-800); }
.pr-desde { margin: .1rem 0 0; color: var(--muted); font-size: .86rem; }
.pr-desc { margin: .7rem 0 1rem; color: var(--muted); font-size: .94rem; }
.pr-lims { list-style: none; padding: 0; margin: 0 0 1.3rem; display: grid; gap: .45rem; }
.pr-lims li { font-size: .94rem; color: #37405a; position: relative; padding-left: 1.3rem; }
.pr-lims li::before { content: "✓"; position: absolute; left: 0; color: var(--acc-500); font-weight: 700; }
.pr-lims strong { color: var(--azul-900); }
.pr-card .btn { margin-top: auto; }
.btn-outline-dark { background: transparent; color: var(--azul-700); border-color: var(--azul-700); }
.btn-outline-dark:hover { background: var(--azul-700); color: var(--white); }
.pr-incluye { text-align: center; margin: 1.6rem auto .4rem; max-width: 640px; color: var(--azul-700); font-weight: 600; font-size: .95rem; }
.pr-nota { text-align: center; margin: 0 auto; max-width: 720px; color: var(--muted); font-size: .86rem; }

/* -------------------- Evidencia (sección obscura) --------------------
   El corte de color a media página es intencional: la evidencia es el centro
   del producto y merece un respiro visual, no otra franja blanca más. */
.section-dark {
    background: var(--grad-dark);
    color: rgba(255,255,255,.9);
    position: relative; overflow: hidden;
}
.section-dark::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(700px 320px at 15% 0%, rgba(126,175,255,.22), transparent 65%);
    pointer-events: none;
}
.section-dark > .container { position: relative; z-index: 1; }
.section-dark .section-title { color: var(--white); }
.section-dark .section-sub { color: rgba(255,255,255,.72); }

.ev-box { max-width: 1000px; }

/* La cadena: cuatro eslabones unidos por una línea punteada. */
.ev-chain { list-style: none; padding: 0; margin: 0 0 1.8rem; display: grid; gap: 1.4rem; position: relative; }
.ev-eslabon {
    position: relative;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius);
    padding: 1.3rem 1.2rem;
    backdrop-filter: blur(6px);
    transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.ev-eslabon:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.26); }
.ev-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 13px;
    background: rgba(126,175,255,.18); color: var(--acc-400);
    border: 1px solid rgba(126,175,255,.3);
    margin-bottom: .85rem;
}
.ev-eslabon h3 { margin: 0 0 .4rem; font-size: 1.02rem; color: var(--white); }
.ev-eslabon p { margin: 0; font-size: .92rem; color: rgba(255,255,255,.72); line-height: 1.6; }
.ev-nota {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--radius); padding: 1rem 1.2rem;
    color: rgba(255,255,255,.74); font-size: .9rem; margin: 0; text-align: center;
}

/* -------------------- Acceso: las dos puertas -------------------- */
.acc-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; margin-bottom: 1.4rem; }
.acc { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; text-align: center; }
.acc h3 { margin: 0 0 .3rem; font-size: 1.05rem; color: var(--azul-800); }
.acc-d { margin: 0 0 .6rem; color: var(--muted); font-size: .92rem; }
.acc .login-url { margin: 0; }

/* -------------------- Preguntas frecuentes --------------------
   El acordeón es <details>/<summary> del navegador, así que casi todo el CSS de
   aquí es quitarle el triángulo nativo (que cada sistema dibuja distinto) y
   poner el galón propio, más la rotación al abrir. No hay una sola línea de JS
   detrás. */
.faq-box { max-width: 820px; }

.faq-grupo { margin-bottom: 1.6rem; }
.faq-grupo:last-of-type { margin-bottom: 0; }
.faq-grupo-t {
    margin: 0 0 .7rem;
    font-size: .82rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--acc-500);
}

.faq-item {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    margin-bottom: .6rem;
    overflow: hidden;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.faq-item:last-child { margin-bottom: 0; }
.faq-item[open] { border-color: #cdddf5; box-shadow: var(--shadow); }

.faq-q {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: .95rem 1.1rem;
    font-weight: 600; color: var(--azul-800); line-height: 1.45;
    cursor: pointer;
    list-style: none;                 /* Firefox */
}
.faq-q::-webkit-details-marker { display: none; }   /* Safari/Chrome viejos */
.faq-q::marker { content: ""; }
.faq-q:hover { color: var(--azul-500); }

.faq-chev { color: var(--acc-500); margin-top: .25rem; transition: transform .22s var(--ease); }
.faq-item[open] .faq-chev { transform: rotate(180deg); }

.faq-a {
    margin: 0;
    padding: 0 1.1rem 1.05rem;
    color: var(--muted); font-size: .96rem;
}

.faq-mas { text-align: center; color: var(--muted); margin: 1.8rem 0 0; font-size: .95rem; }
.faq-mas a { font-weight: 600; }

/* -------------------- Responsive -------------------- */
@media (min-width: 720px) {
    .ev-chain { grid-template-columns: 1fr 1fr; }
    .ps-grid { grid-template-columns: 1fr 1fr; }
    .cards-grid { grid-template-columns: 1fr 1fr; }
    .perf-grid { grid-template-columns: 1fr 1fr; }
    .seg-grid { grid-template-columns: 1fr 1fr; }
    /* La línea que une los tres nodos solo existe cuando los pasos están en
       fila: apilados, la secuencia ya la da el orden de lectura. */
    .pasos { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
    .pasos::before {
        content: ""; position: absolute; top: 38px; left: 16%; right: 16%; height: 2px;
        background: linear-gradient(90deg, transparent, #cdddf5 12%, #cdddf5 88%, transparent);
    }
    .pr-grid { grid-template-columns: repeat(var(--pr-cols-sm, 2), minmax(0, 1fr)); }
    .acc-grid { grid-template-columns: 1fr 1fr; }
    .hero h1 { font-size: 2.6rem; }
    .section-title { font-size: 2rem; }
}

@media (min-width: 992px) {
    .ev-chain { grid-template-columns: repeat(4, 1fr); }
    .pr-card--destacado { transform: translateY(-10px); }
    .pr-card--destacado:hover { transform: translateY(-14px); }
    .nav-toggle { display: none; }
    .mobile-nav { display: none !important; }
    /* Con el enlace de «Preguntas» el menú son seis renglones más los dos
       botones: a esta anchura exacta no caben con el espaciado grande, y lo que
       se rompe es la fila entera del encabezado. Se aprieta aquí y se devuelve
       en el corte de 1200px. */
    .main-nav { display: flex; gap: 1rem; font-size: .95rem; }
    .nav-cta { display: inline-flex; }
    .hero-grid { grid-template-columns: 1.05fr .95fr; }
    .hero { padding: 4.5rem 0 5rem; }
    /* El video es 16:9 y la columna del arte da ~500px: a esa anchura la pieza
       queda mucho más baja que la columna de texto. Se deja crecer por encima
       de su columna —hacia el margen que sobra fuera del contenedor, que a
       partir de aquí siempre existe— y como los bordes están difuminados, lo
       que se asoma no parece desbordado sino sangrado. `.hero` recorta, así
       que en ningún caso aparece un scroll horizontal. */
    .hero-media { width: 116%; }
    .cards-grid { grid-template-columns: repeat(3, 1fr); }
    .perf-grid { grid-template-columns: repeat(4, 1fr); }
    .seg-grid { grid-template-columns: repeat(3, 1fr); }
    /* El número de columnas lo manda el catálogo: main/index.php emite
       --pr-cols-sm/-md/--pr-cols con cuántas tarjetas hay de verdad, y el 3 de
       aquí es solo el respaldo. A esta anchura cinco columnas dejarían cada
       tarjeta en ~210px, que no alcanza para el precio más la lista de
       volúmenes, así que el tope son tres y lo que sobra baja de renglón (con
       cuatro planes se reparten 2 y 2, que cuadra mejor que 3 y 1). La fila
       única se arma hasta 1200px, donde sí caben. */
    .pr-grid { grid-template-columns: repeat(var(--pr-cols-md, 3), minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    /* La sección de precios es la única que se sale del ancho del sitio: cinco
       tarjetas dentro de los 1120px del contenedor general quedan estrechas.
       🔴 Las columnas son las del catálogo (--pr-cols), nunca un cinco quemado:
       con un plan menos —hoy solo se pinta UN peldaño institucional, y mañana
       puede desactivarse otro desde system/?view=plans— la quinta columna
       quedaba vacía y la reja entera se recargaba a la izquierda. */
    .main-nav { gap: 1.4rem; font-size: 1rem; }
    #precios .container { max-width: 1280px; }
    .pr-grid { grid-template-columns: repeat(var(--pr-cols, 5), minmax(0, 1fr)); }
    .pr-card { padding: 1.4rem 1.1rem; }
}

/* -------------------- Accesibilidad / preferencias -------------------- */
/* -------------------- Aparición al desplazar --------------------
   El contenido entra cuando entra en pantalla, no al cargar: así la página se
   siente viva mientras se recorre. Nace VISIBLE y el JS la esconde solo si va
   a poder mostrarla (ver landing.js): sin JS no se queda una página en blanco. */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); }
.js-reveal .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .6s var(--ease) var(--d, 0ms), transform .6s var(--ease) var(--d, 0ms);
}

/* -------------------- Encabezado al desplazar -------------------- */
.site-header { transition: box-shadow .25s var(--ease), background .25s var(--ease); }
.site-header.is-scrolled {
    background: rgba(4,31,63,.92);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 26px rgba(4,31,63,.28);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn, .card, .seg, .pr-card, .paso-nodo, .ev-eslabon, .card-ico { transition: none; }
    /* Nada se mueve solo: ni la flotación del héroe ni las apariciones. */
    .hero-media, .hero-chip { animation: none; }
    /* El video tampoco se descarga (lo decide landing.js): lo que se ve es el
       cartel, que cuenta lo mismo quieto. */
    .hero-media-video { display: none; }
    .js-reveal .reveal { opacity: 1; transform: none; }
}
:focus-visible { outline: 3px solid var(--acc-400); outline-offset: 2px; border-radius: 4px; }