/* ==========================================================================
   Landings de los sistemas de AMSS: Torque y Nexo.

   Una sola hoja. La estructura es común y cada producto define su paleta y su
   tipografía en .producto--<nombre>. Los colores salen del sistema de diseño
   de cada aplicación —«Bahía» en Torque, «Índice» en Nexo—: quien entra a la
   landing ve el mismo mundo que después va a usar todos los días.

   No pasa por Vite a propósito: producción no compila, y esta hoja se sirve tal
   cual con ?v=filemtime en el layout.
   ========================================================================== */

/* ── Tokens por producto ─────────────────────────────────────────────────── */

.producto--torque {
    /* Piso de taller, tiza y ámbar de señalización industrial. */
    --fondo: #15130f;
    --superficie: #1d1a15;
    --superficie-2: #25211b;
    --linea: #3b352c;
    --tinta: #f0ebe2;
    --tinta-suave: #b3aa9c;
    --acento: #e8a317;
    --sobre-acento: #15130f;
    --alerta: #e8a317;
    --ok: #62b07b;
    --error: #ff8a80;
    --display: 'Archivo', system-ui, sans-serif;
    --display-ancho: 72%;
    --texto: 'Archivo', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
    --radio: 6px;
    color-scheme: dark;
}

.producto--nexo {
    /* Chapa galvanizada, acero pavonado, pátina de cobre y óxido. */
    --fondo: #eaeef1;
    --superficie: #ffffff;
    --superficie-2: #f3f5f7;
    --linea: #c7d0d6;
    --tinta: #0f1820;
    --tinta-suave: #4a5864;
    --acento: #0b6e61;
    --sobre-acento: #ffffff;
    --alerta: #b4470e;
    --ok: #0b6e61;
    --error: #a82318;
    --display: 'Archivo', system-ui, sans-serif;
    --display-ancho: 100%;
    --texto: 'IBM Plex Sans', system-ui, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
    --radio: 4px;
    color-scheme: light;
}

/* ── Base ────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-family: var(--texto);
    font-size: 1.0625rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.envoltura { width: 100%; max-width: 74rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 48rem) { .envoltura { padding-inline: 2rem; } }

.saltar {
    position: absolute; left: -9999px; top: .5rem; z-index: 50;
    background: var(--acento); color: var(--sobre-acento);
    padding: .5rem 1rem; border-radius: var(--radio); font-weight: 700;
}
.saltar:focus { left: .5rem; }

/* ── Botones ─────────────────────────────────────────────────────────────── */

.boton {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .9rem 1.4rem;
    border: 1px solid transparent; border-radius: var(--radio);
    font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2;
    text-decoration: none; cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.boton--principal { background: var(--acento); color: var(--sobre-acento); }
.boton--principal:hover { background: color-mix(in srgb, var(--acento) 85%, var(--tinta)); }
.boton--secundario { background: transparent; color: var(--tinta); border-color: var(--linea); }
.boton--secundario:hover { border-color: var(--tinta-suave); }
.boton--chico { padding: .6rem 1rem; font-size: .9rem; }

/* ── Cabecera ────────────────────────────────────────────────────────────── */

.cabecera {
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--fondo) 90%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linea);
}
.cabecera__fila { display: flex; align-items: center; gap: 1rem; min-height: 4rem; }
.cabecera__amss {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .9rem; color: var(--tinta-suave); text-decoration: none;
}
.cabecera__amss:hover { color: var(--tinta); }
.cabecera__marca { margin-inline: auto; display: inline-flex; align-items: baseline; gap: .45rem; text-decoration: none; }
.marca__nombre {
    font-family: var(--display); font-stretch: var(--display-ancho);
    font-weight: 800; font-size: 1.4rem; letter-spacing: -.01em; line-height: 1;
}
.marca__firma { font-size: .8rem; color: var(--tinta-suave); }
@media (max-width: 40rem) {
    .cabecera__amss span, .marca__firma { display: none; }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 6.5rem); }
.hero__grilla { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 62rem) {
    .hero__grilla { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; }
}
.hero__rubro { font-size: .95rem; font-weight: 600; color: var(--tinta-suave); margin-bottom: 1rem; }

.titular {
    font-family: var(--display); font-stretch: var(--display-ancho); font-weight: 800;
    font-size: clamp(2.7rem, 6.4vw, 5rem); line-height: 1; letter-spacing: -.02em;
    text-wrap: balance;
}
.producto--nexo .titular { font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.06; letter-spacing: -.025em; }

.bajada { margin-top: 1.35rem; max-width: 34rem; font-size: clamp(1.08rem, 1.5vw, 1.2rem); color: var(--tinta-suave); }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero__nota { margin-top: 1.5rem; max-width: 30rem; font-size: .92rem; color: var(--tinta-suave); }

/* La firma de cada producto, al lado del titular; la captura real, debajo y a lo ancho.
   Encimadas, la tarjeta tapaba la mitad de la captura y ninguna de las dos se leía. */
.firma { width: 100%; max-width: 27rem; justify-self: center; }
@media (min-width: 62rem) { .firma { justify-self: end; } }

.hero__pantalla { margin-top: clamp(3rem, 6vw, 4.5rem); }
.pantalla__marco {
    overflow: hidden; background: var(--superficie);
    border: 1px solid var(--linea); border-radius: calc(var(--radio) + 4px);
    box-shadow: 0 40px 90px -45px rgba(0, 0, 0, .75);
}
.producto--nexo .pantalla__marco { box-shadow: 0 40px 80px -50px rgba(15, 24, 32, .5); }
.pantalla__marco img { width: 100%; }


/* ── Torque: la patente que se escribe sola ──────────────────────────────── */

.buscador {
    padding: 1.4rem 1.5rem 1.5rem;
    background: var(--superficie-2); border: 1px solid var(--linea); border-radius: 10px;
    box-shadow: 0 28px 60px -24px rgba(0, 0, 0, .9);
}
.buscador__etiqueta { font-size: .92rem; color: var(--tinta-suave); margin-bottom: .6rem; }

/* Patente Mercosur: franja azul con el país, fondo blanco, caracteres negros. */
.patente { max-width: 21rem; overflow: hidden; background: #fff; color: #111; border: 2px solid #111; border-radius: 7px; }
.patente__franja {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .2rem .5rem; background: #1c3f94; color: #fff;
    font-family: var(--texto); font-stretch: 100%; font-size: .7rem; font-weight: 700; letter-spacing: .14em;
}
.bandera { width: 1.25rem; height: .78rem; flex: none; background: linear-gradient(#74acdf 33%, #fff 33% 66%, #74acdf 66%); }
.patente__numero {
    min-height: 4rem; padding: .45rem .6rem .55rem; text-align: center; white-space: nowrap;
    font-family: var(--mono); font-weight: 600; font-size: clamp(2rem, 4vw, 2.6rem); letter-spacing: .06em; line-height: 1.2;
}
.patente__cursor {
    display: inline-block; width: 3px; height: 1.9rem; margin-left: 2px;
    vertical-align: -.2rem; background: #111; animation: parpadeo 1s steps(1) infinite;
}
@keyframes parpadeo { 50% { opacity: 0; } }
.js [data-tipear] { visibility: hidden; }
.js [data-tipear].tipeando { visibility: visible; }

.resultado { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
.js .resultado { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.js .resultado.visible { opacity: 1; transform: none; }
.resultado__vehiculo { font-weight: 700; font-size: 1.15rem; }
.resultado__dato { font-size: .95rem; color: var(--tinta-suave); }
.estado {
    display: inline-block; margin-top: .5rem; padding: .1rem .45rem;
    border: 1px solid #6fa8e6; border-radius: 3px; color: #8fbdf0;
    font-family: var(--mono); font-size: .72rem;
}

/* ── Nexo: la regla graduada ─────────────────────────────────────────────── */

.reponer {
    padding: 1.4rem 1.5rem 1.5rem;
    background: var(--superficie); border: 1px solid var(--linea); border-radius: 6px;
    box-shadow: 0 28px 60px -30px rgba(15, 24, 32, .5);
}
.reponer__titulo { font-weight: 700; font-size: 1.05rem; margin-bottom: 1rem; }
.articulo + .articulo { margin-top: 1.15rem; }
.articulo__fila { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-size: .95rem; }
.articulo__codigo {
    flex: none; padding: 0 .3rem;
    border: 1px solid var(--linea); border-radius: 3px;
    font-family: var(--mono); font-size: .7rem; color: var(--tinta-suave);
}
/* Escala de acero: una marca cada 10 %, y el mínimo como tope. */
.medidor {
    position: relative; height: .9rem; margin-top: .45rem;
    background-color: var(--superficie-2); border: 1px solid var(--linea);
    background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--linea) calc(10% - 1px) 10%);
}
.medidor__nivel {
    position: absolute; inset: 0 auto 0 0; width: var(--nivel); background: var(--alerta);
    transition: width 1s cubic-bezier(.2, .8, .2, 1);
}
.js .medidor:not(.lleno) .medidor__nivel { width: 0; }
.medidor__minimo { position: absolute; top: -.3rem; bottom: -.3rem; left: var(--minimo); width: 2px; background: var(--tinta); }
.articulo__cifras { margin-top: .35rem; font-family: var(--mono); font-size: .8rem; color: var(--tinta-suave); }
.articulo__cifras strong { color: var(--alerta); font-weight: 600; }

/* Filete separador: la misma regla, a lo ancho. */
.regla {
    height: 14px; border-top: 1px solid var(--tinta); opacity: .5;
    background-image:
        repeating-linear-gradient(90deg, var(--tinta) 0 1px, transparent 1px 12px),
        repeating-linear-gradient(90deg, var(--tinta) 0 1px, transparent 1px 60px);
    background-size: 100% 6px, 100% 12px;
    background-repeat: no-repeat;
}

/* ── Secciones ───────────────────────────────────────────────────────────── */

.seccion { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.seccion--alterna { background: var(--superficie); }
.producto--torque .seccion--alterna { background: #1a1813; }

.seccion__cabeza { max-width: 46rem; margin-bottom: 2.75rem; }
.subtitulo {
    font-family: var(--display); font-stretch: var(--display-ancho); font-weight: 800;
    font-size: clamp(1.95rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.015em;
    text-wrap: balance;
}
.producto--nexo .subtitulo { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.12; }
.seccion__bajada { margin-top: 1rem; max-width: 40rem; font-size: 1.1rem; color: var(--tinta-suave); }

/* Lo que dice el dueño del negocio, con sus palabras. */
.dolores { display: grid; gap: 2rem 3rem; }
@media (min-width: 48rem) { .dolores { grid-template-columns: 1fr 1fr; } }
.dolor { padding: .15rem 0 .15rem 1.25rem; border-left: 4px solid var(--alerta); }
.dolor__frase {
    font-family: var(--display); font-stretch: var(--display-ancho); font-weight: 700;
    font-size: clamp(1.35rem, 2.3vw, 1.7rem); line-height: 1.2;
}
.dolor p + p { margin-top: .6rem; color: var(--tinta-suave); max-width: 36rem; }
.remate { margin-top: 3rem; max-width: 42rem; font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 600; }

/* Video */
.video {
    aspect-ratio: 16 / 9; overflow: hidden; background: #000;
    border: 1px solid var(--linea); border-radius: calc(var(--radio) + 4px);
}
.video video { width: 100%; height: 100%; object-fit: contain; }
.video__pie { margin-top: .85rem; font-size: .92rem; color: var(--tinta-suave); }

/* Recorrido: es una secuencia de verdad, por eso lleva número. */
.recorrido { list-style: none; padding: 0; display: grid; gap: 2.25rem 2rem; }
@media (min-width: 40rem) { .recorrido { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68rem) { .recorrido { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 48rem) { .recorrido--tres { grid-template-columns: repeat(3, 1fr); } }
.paso { position: relative; padding-top: 1.1rem; border-top: 1px solid var(--linea); }
.paso::before { content: ''; position: absolute; top: -2px; left: 0; width: 3rem; height: 3px; background: var(--acento); }
.paso__numero { font-family: var(--mono); font-size: .9rem; font-weight: 600; color: var(--acento); }
.paso h3 {
    margin: .35rem 0 .5rem;
    font-family: var(--display); font-stretch: var(--display-ancho); font-weight: 700;
    font-size: 1.3rem; line-height: 1.2;
}
.paso p { font-size: .98rem; color: var(--tinta-suave); }

.capturas { display: grid; gap: 2rem; margin-top: 3.5rem; }
@media (min-width: 48rem) { .capturas { grid-template-columns: 1fr 1fr; } }
.captura img { width: 100%; border: 1px solid var(--linea); border-radius: calc(var(--radio) + 2px); }
.captura figcaption { margin-top: .65rem; font-size: .92rem; color: var(--tinta-suave); }

/* Qué cambia, agrupado por lo que le importa al dueño. */
.grupos { display: grid; gap: 2.5rem; }
@media (min-width: 62rem) { .grupos { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.grupo__titulo {
    padding-bottom: .85rem; margin-bottom: .25rem; border-bottom: 2px solid var(--acento);
    font-family: var(--display); font-stretch: var(--display-ancho); font-weight: 800;
    font-size: 1.45rem; line-height: 1.15;
}
.funciones { list-style: none; padding: 0; }
.funciones li { padding-block: 1rem; border-bottom: 1px solid var(--linea); }
.funciones strong { display: block; margin-bottom: .2rem; }
.funciones span { font-size: .97rem; color: var(--tinta-suave); }

/* Confianza */
.confianza { list-style: none; padding: 0; display: grid; gap: 1.25rem 3rem; max-width: 64rem; }
@media (min-width: 48rem) { .confianza { grid-template-columns: 1fr 1fr; } }
.confianza li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .8rem; align-items: start; }
.confianza svg { width: 1.3rem; height: 1.3rem; margin-top: .2rem; color: var(--ok); }
.confianza span { color: var(--tinta-suave); }

/* Preguntas: lo único que se mueve es lo que la persona abre. */
.preguntas { max-width: 50rem; border-top: 1px solid var(--linea); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1.15rem 0; list-style: none; cursor: pointer;
    font-weight: 700; font-size: 1.08rem;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
    content: ''; flex: none; width: .85rem; height: .85rem;
    background:
        linear-gradient(var(--acento), var(--acento)) center / 100% 2px no-repeat,
        linear-gradient(var(--acento), var(--acento)) center / 2px 100% no-repeat;
    transition: transform .2s;
}
.pregunta[open] summary::after { transform: rotate(45deg); }
.pregunta p { max-width: 44rem; padding-bottom: 1.3rem; color: var(--tinta-suave); }

/* ── Contacto ────────────────────────────────────────────────────────────── */

.contacto__grilla { display: grid; gap: 2.5rem; }
@media (min-width: 62rem) { .contacto__grilla { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4rem; align-items: start; } }

.canales { display: grid; gap: .75rem; margin-top: 2rem; max-width: 26rem; }
.canal {
    display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem;
    background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio);
    text-decoration: none; transition: border-color .15s;
}
.canal:hover { border-color: var(--acento); }
.canal svg { width: 1.6rem; height: 1.6rem; flex: none; color: var(--acento); }
.canal strong { display: block; }
.canal span span { font-size: .92rem; color: var(--tinta-suave); }

.formulario {
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--fondo); border: 1px solid var(--linea); border-radius: calc(var(--radio) + 4px);
}
.campos { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .campos { grid-template-columns: 1fr 1fr; } .campo--ancho { grid-column: 1 / -1; } }
.campo label { display: block; margin-bottom: .35rem; font-size: .92rem; font-weight: 600; }
.campo label span { font-weight: 400; color: var(--tinta-suave); }
.campo input, .campo textarea {
    width: 100%; padding: .75rem .85rem;
    font: inherit; font-size: 1rem; color: var(--tinta);
    background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio);
}
.campo textarea { min-height: 7.5rem; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-suave); opacity: .8; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--acento); outline-offset: 0; border-color: var(--acento); }
.campo [aria-invalid="true"] { border-color: var(--error); }
.campo__error { margin-top: .35rem; font-size: .88rem; color: var(--error); }

.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.formulario__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }
.formulario__aclaracion { max-width: 22rem; font-size: .88rem; color: var(--tinta-suave); }

.aviso-ok {
    margin-bottom: 1.4rem; padding: 1rem 1.15rem;
    border: 1px solid var(--ok); border-left-width: 4px; border-radius: var(--radio);
}
.aviso-ok strong { display: block; }

/* ── Pie ─────────────────────────────────────────────────────────────────── */

.pie { padding-block: 2.5rem; border-top: 1px solid var(--linea); font-size: .92rem; color: var(--tinta-suave); }
.pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 2rem; }
.pie a { color: var(--tinta); text-underline-offset: 3px; }
.pie a:hover { color: var(--acento); }