/* Página comercial de la plataforma (L-18 · 01 §3.1), dirección «Vitrina Grafito» de Chasis.
   Valores de docs/design-system/tokens.css (HTML estático: sin Tailwind). La firma es el
   parabrisas con el precio escrito a marcador, como en los patios dominicanos; lo demás, quieto.
   Rojo solo como verbo; WhatsApp, el relleno de cada vista; pensado para 360 px. */

@font-face {
  font-family: "Archivo Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("archivo.woff2") format("woff2-variations");
}

:root {
  --white: #FFFFFF;
  --g-50: #F5F6F8;
  --g-100: #ECEEF1;
  --g-200: #E1E4E9;
  --g-250: #A9AFB9;
  --g-300: #8A919D;
  --g-500: #5F6775;
  --g-700: #3A404B;
  --g-750: #2D333D;
  --g-800: #1E232B;
  --g-900: #161A21;
  --g-950: #0C0F14;
  --carmesi-50: #FDF2F4;
  --carmesi-400: #FF7088;
  --carmesi-600: #C8123A;
  --carmesi-700: #A30E30;
  --carmesi-950: #4A0E17;
  --whatsapp-500: #25D366;
  --whatsapp-600: #21BD5B;
  --whatsapp-ink: #0B141A;
  --success: #1F7A4D;
  --success-subtle: #E8F5EE;

  --fondo: var(--white);
  --lienzo: var(--g-50);
  --texto: var(--g-900);
  --texto-2: var(--g-700);
  --texto-3: var(--g-500);
  --borde: var(--g-200);
  --marca: var(--carmesi-600);
  --marca-texto: var(--carmesi-700);

  --font: "Archivo Variable", "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-salida: cubic-bezier(0.16, 1, 0.3, 1);
  --ancho: 76rem;
}

/* Zona grafito: los tokens cambian, los componentes no (Chasis 01 §1.9). */
.hero, .seccion--grafito, .barra, .cierre, .pie, .confiable {
  --fondo: var(--g-950);
  --lienzo: var(--g-950);
  --texto: var(--g-50);
  --texto-2: var(--g-250);
  --texto-3: var(--g-300);
  --borde: var(--g-750);
  --marca-texto: var(--carmesi-400);
  background: var(--fondo);
  color: var(--texto);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.55; color: var(--texto); background: var(--fondo); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3 { margin: 0; }
a { color: inherit; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; border-radius: var(--r-sm); }
.saltar { position: absolute; left: -999px; top: 0; z-index: 40; background: var(--g-900); color: var(--white); padding: 0.75rem 1rem; }
.saltar:focus { left: 1rem; top: 1rem; }
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 1rem; }
.contenedor--estrecho { max-width: 46rem; }
@media (min-width: 768px) { .contenedor { padding: 0 2rem; } }

/* --- Tipografía: Archivo estirada al límite ------------------------------------------------- */
.eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--marca-texto); margin-bottom: 1rem; font-stretch: 112%; }
.titular { font-size: clamp(2rem, 7vw, 3.5rem); line-height: 0.98; font-weight: 800; font-stretch: 70%; letter-spacing: -0.015em; margin-bottom: 1.25rem; text-wrap: balance; }
.titular--centrado { text-align: center; margin-left: auto; margin-right: auto; max-width: 18ch; }
.bajada { font-size: 1.125rem; color: var(--texto-2); max-width: 36rem; margin-bottom: 1.5rem; }
.bajada strong { color: var(--texto); }
.puntos { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.puntos li { padding-left: 1.5rem; position: relative; color: var(--texto-2); }
.puntos li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 0.75rem; height: 2px; background: var(--texto); }

/* --- Botones ----------------------------------------------------------------------------------- */
.acciones { display: flex; flex-direction: column; gap: 0.75rem; }
@media (min-width: 560px) { .acciones { flex-direction: row; flex-wrap: wrap; } }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 52px; padding: 0 1.375rem; border-radius: var(--r-md); border: 1px solid transparent; font: 600 1rem/1 var(--font); text-decoration: none; cursor: pointer; transition: background-color 150ms var(--ease), transform 150ms var(--ease), border-color 150ms var(--ease); white-space: nowrap; }
.boton:active { transform: translateY(1px); }
.boton--sm { min-height: 44px; padding: 0 1rem; font-size: 0.875rem; }
.boton--bloque { display: flex; width: 100%; }
.boton--whatsapp { background: var(--whatsapp-500); color: var(--whatsapp-ink); }
.boton--whatsapp:hover { background: var(--whatsapp-600); }
.boton--claro { border-color: var(--g-300); color: var(--texto); background: transparent; }
.boton--claro:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--texto); }
.boton--primario { background: var(--carmesi-600); color: var(--white); }
.boton--fijo { cursor: default; min-height: 46px; font-variant-numeric: tabular-nums; }
.icono { width: 1.25rem; height: 1.25rem; fill: currentColor; flex: none; }

/* --- Logo: la placa con la esquina cortada y la R que sale rodando --------------------------- */
.logo { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; }
.logo__simbolo { width: 2.125rem; height: 2.125rem; flex: none; }
.logo__placa { fill: var(--carmesi-600); }
.logo__r { fill: var(--white); }
.logo__nombre { font-weight: 800; font-stretch: 118%; font-size: 1.3125rem; letter-spacing: -0.035em; text-transform: lowercase; line-height: 1; }
.logo:hover .logo__simbolo { transform: rotate(-4deg); transition: transform 300ms var(--ease-salida); }

/* --- Barra --------------------------------------------------------------------------------------- */
.barra { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--borde); background: rgba(12, 15, 20, 0.86); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); }
.barra__fila { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.barra__nav { display: none; gap: 2rem; font-size: 0.875rem; font-weight: 600; }
.barra__nav a { text-decoration: none; color: var(--texto-2); padding: 0.75rem 0; transition: color 150ms var(--ease); }
.barra__nav a:hover { color: var(--texto); }
@media (min-width: 900px) { .barra__nav { display: flex; } }

/* --- HERO ---------------------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding: 2.5rem 0 4.5rem; }
.hero::after { content: ""; position: absolute; left: 50%; bottom: -30rem; width: 70rem; height: 40rem; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(200, 18, 58, 0.22), transparent); pointer-events: none; }
.hero__rejilla { position: relative; z-index: 1; display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .hero { padding: 4.5rem 0 6rem; } .hero__rejilla { grid-template-columns: 0.95fr 1.05fr; gap: 2rem; } }
.hero__titulo { font-size: clamp(3.25rem, 15vw, 6.75rem); line-height: 0.86; font-weight: 800; font-stretch: 62%; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: 1.75rem; }
.hero__linea { display: block; }
.hero__linea--acento { color: transparent; -webkit-text-stroke: 2px var(--carmesi-400); }
.hero__bajada { font-size: 1.125rem; color: var(--texto-2); max-width: 31rem; margin-bottom: 2rem; }
@media (min-width: 768px) { .hero__bajada { font-size: 1.25rem; } }
.js .hero__linea { opacity: 0; transform: translateY(0.4em); animation: entra 900ms var(--ease-salida) forwards; }
.js .hero__linea:nth-child(2) { animation-delay: 120ms; }
.js .hero__linea:nth-child(3) { animation-delay: 240ms; }
@keyframes entra { to { opacity: 1; transform: none; } }

/* La escena: parabrisas + teléfono + avisos */
.escena { position: relative; min-height: 31rem; }
@media (min-width: 640px) { .escena { min-height: 36rem; } }
.parabrisas { position: absolute; left: 0; right: 0; top: 0; height: 15rem; clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%); background: linear-gradient(172deg, #3A404B 0%, #161A21 36%, #0C0F14 70%, #1E232B 100%); overflow: hidden; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, 0.6)); }
.parabrisas::before { content: ""; position: absolute; inset: 0; border-top: 10px solid #05070A; border-bottom: 14px solid #05070A; pointer-events: none; }
@media (min-width: 640px) { .parabrisas { height: 19rem; right: 4rem; } }
.parabrisas__reflejo { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 0 22%, rgba(255, 255, 255, 0.10) 23% 31%, transparent 32% 39%, rgba(255, 255, 255, 0.05) 40% 43%, transparent 44%); }
.js .parabrisas__reflejo { animation: brillo 7s var(--ease) 2.6s infinite; }
@keyframes brillo { 0%, 70% { transform: translateX(0); } 85% { transform: translateX(18%); } 100% { transform: translateX(0); } }
.parabrisas__limpia { position: absolute; left: 50%; bottom: -1.5rem; width: 80%; height: 0.5rem; border-radius: 99px; background: #05070A; transform: translateX(-50%) rotate(-3deg); }
.marcador { position: absolute; left: 8%; top: 1.25rem; width: 78%; height: calc(100% - 2.5rem); transform: rotate(-4deg); }
.marcador__linea { font-family: var(--font); font-weight: 800; font-stretch: 62%; fill: rgba(255, 255, 255, 0.94); stroke: rgba(255, 255, 255, 0.94); stroke-width: 1.5; paint-order: stroke; letter-spacing: 0.01em; }
.marcador__linea--1 { font-size: 74px; }
.marcador__linea--2 { font-size: 46px; fill: rgba(255, 255, 255, 0.86); }
.marcador__linea--3 { font-size: 92px; fill: #FFF6D8; stroke: #FFF6D8; }
.marcador__subrayado { fill: none; stroke: #FFF6D8; stroke-width: 6; stroke-linecap: round; }
/* El marcador escribe: primero el trazo, después la tinta. */
.js .marcador__linea { fill-opacity: 0; stroke-dasharray: 900; stroke-dashoffset: 900; animation: trazo 1.1s var(--ease) forwards, tinta 400ms var(--ease) forwards; }
.js .marcador__linea--1 { animation-delay: 300ms, 1100ms; }
.js .marcador__linea--2 { animation-delay: 900ms, 1700ms; }
.js .marcador__linea--3 { animation-delay: 1500ms, 2300ms; }
.js .marcador__subrayado { stroke-dasharray: 360; stroke-dashoffset: 360; animation: trazo 600ms var(--ease) 2400ms forwards; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
@keyframes tinta { to { fill-opacity: 1; } }

.movil { position: relative; width: 15.5rem; border-radius: 2rem; padding: 0.5rem; background: linear-gradient(160deg, #3A404B, #161A21 45%, #0C0F14); box-shadow: 0 30px 70px -18px rgba(0, 0, 0, 0.85), inset 0 0 0 1px #2D333D; }
.movil__pantalla { border-radius: 1.6rem; overflow: hidden; background: var(--white); color: var(--g-900); }
.movil__nota { margin-top: 0.875rem; font-size: 0.75rem; color: var(--g-300); text-align: center; }
.movil--hero { position: absolute; right: 0; top: 12rem; z-index: 2; width: 13.5rem; }
@media (min-width: 640px) { .movil--hero { top: 13rem; right: 0; width: 15.5rem; } }
.js .movil--hero { opacity: 0; transform: translateY(3rem) rotate(4deg); animation: llega 1s var(--ease-salida) 2.9s forwards; }
@keyframes llega { to { opacity: 1; transform: rotate(4deg); } }
.ficha__foto { position: relative; height: 7.5rem; background: linear-gradient(180deg, #59616E, #1E232B); display: flex; align-items: flex-end; justify-content: center; }
.silueta { width: 82%; fill: #8A919D; margin-bottom: 0.5rem; }
.silueta--clara { fill: #C9CED6; }
.ficha__cuerpo { padding: 0.875rem; display: grid; gap: 0.375rem; }
.ficha__titulo { font-weight: 600; font-size: 0.9375rem; line-height: 1.25; }
.ficha__meta { font-size: 0.6875rem; color: var(--g-500); display: flex; gap: 0.375rem; align-items: center; flex-wrap: wrap; }
.usado { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.08em; border: 1px solid var(--g-700); color: var(--g-700); padding: 0 0.3rem; border-radius: var(--r-sm); }
.ficha__rotulo, .sala__rotulo { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--g-500); margin-top: 0.375rem; }
.ficha__precio { font-size: 1.5rem; font-weight: 800; font-stretch: 87.5%; font-variant-numeric: tabular-nums; line-height: 1.1; margin-bottom: 0.375rem; }
.moneda { font-size: 0.55em; font-weight: 700; color: var(--g-700); margin-right: 0.12em; vertical-align: 0.35em; }
.placa { position: absolute; top: 0.5rem; left: 0.5rem; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.2rem 0.45rem; border-radius: var(--r-sm); background: var(--g-900); color: var(--white); }
.placa--estatica { position: static; }
.punto-vivo { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--carmesi-400); }
.js .punto-vivo { animation: latido 1.6s ease-in-out infinite; }
@keyframes latido { 50% { opacity: 0.3; } }

.avisos { list-style: none; margin: 0; padding: 0; position: absolute; left: 0; bottom: 0; z-index: 3; width: min(17.5rem, 78%); }
@media (min-width: 640px) { .avisos { left: -1rem; bottom: 1rem; } }
.aviso { display: flex; gap: 0.625rem; align-items: center; padding: 0.75rem 0.875rem; border-radius: var(--r-lg); background: rgba(30, 35, 43, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid #2D333D; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.8); font-size: 0.8125rem; line-height: 1.3; color: var(--g-250); position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; transform: translateY(1rem) scale(0.97); transition: opacity 500ms var(--ease-salida), transform 500ms var(--ease-salida); }
.aviso strong { color: var(--white); }
.aviso.es-actual { opacity: 1; transform: none; }
.no-js .aviso:first-child, .quieto .aviso:first-child { opacity: 1; transform: none; }
.aviso__icono { width: 2rem; height: 2rem; border-radius: 50%; flex: none; display: grid; place-items: center; }
.aviso__icono::after { content: ""; width: 0.875rem; height: 0.875rem; border-radius: 2px; }
.aviso__icono--wa { background: var(--whatsapp-500); }
.aviso__icono--wa::after { background: var(--whatsapp-ink); border-radius: 50% 50% 50% 0; }
.aviso__icono--puja { background: var(--g-50); }
.aviso__icono--puja::after { background: var(--carmesi-600); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.aviso__icono--doc { background: var(--g-750); }
.aviso__icono--doc::after { background: var(--g-50); clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%); }

/* --- Secciones -------------------------------------------------------------------------------------- */
.seccion { padding: 4.5rem 0; }
@media (min-width: 768px) { .seccion { padding: 7rem 0; } }
.seccion--lienzo { background: var(--g-50); }
.dos-columnas { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .dos-columnas { grid-template-columns: 1fr 1fr; gap: 5rem; } }
.encabezado-centrado { text-align: center; max-width: 46rem; margin: 0 auto 3rem; }

/* El chat */
.chat { width: 100%; max-width: 24rem; justify-self: center; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--borde); box-shadow: 0 30px 70px -30px rgba(22, 26, 33, 0.35); background: #EFE9E1; }
.chat__cabecera { display: flex; gap: 0.75rem; align-items: center; padding: 0.75rem 1rem; background: #1F2C33; color: var(--white); font-size: 0.875rem; line-height: 1.2; }
.chat__cabecera small { color: #A7B3BA; }
.chat__avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--g-500); display: grid; place-items: center; font-weight: 700; font-size: 0.8125rem; }
.chat__cuerpo { padding: 1rem; display: grid; gap: 0.5rem; }
.burbuja { max-width: 85%; padding: 0.5rem 0.75rem; border-radius: 0.75rem; font-size: 0.9375rem; line-height: 1.35; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }
.burbuja--suya { background: var(--white); justify-self: start; border-top-left-radius: 0.25rem; }
.burbuja--mia { background: #D9FDD3; justify-self: end; border-top-right-radius: 0.25rem; }
.burbuja--enlace { padding: 0.375rem; display: grid; gap: 0.25rem; }
.burbuja--enlace > p:last-child { padding: 0.25rem 0.375rem 0.125rem; }
.enlace__foto { height: 6.5rem; border-radius: 0.5rem; background: linear-gradient(180deg, #59616E, #1E232B); display: flex; align-items: flex-end; justify-content: center; }
.enlace__titulo { font-weight: 600; font-size: 0.8125rem; padding: 0.125rem 0.375rem 0; font-variant-numeric: tabular-nums; }
.enlace__dominio { font-size: 0.75rem; color: #54656F; padding: 0 0.375rem; }
.js .chat .burbuja { opacity: 0; transform: translateY(0.75rem); }
.js .chat.es-visible .burbuja { animation: entra 500ms var(--ease-salida) forwards; }
.js .chat.es-visible .burbuja:nth-child(2) { animation-delay: 700ms; }
.js .chat.es-visible .burbuja:nth-child(3) { animation-delay: 1500ms; }

/* Subastas */
.subasta { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .subasta { grid-template-columns: 1.1fr 0.9fr; grid-template-areas: "reloj movil" "texto movil"; column-gap: 4rem; } .subasta__reloj { grid-area: reloj; } .subasta__texto { grid-area: texto; } .movil--subasta { grid-area: movil; } }
.reloj-gigante { font-size: clamp(5.5rem, 30vw, 13rem); line-height: 0.82; font-weight: 800; font-stretch: 62%; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; color: var(--g-50); transition: color 400ms var(--ease); }
.reloj-gigante.es-final { color: var(--carmesi-400); }
.reloj-gigante__nota { margin-top: 1rem; font-size: 0.9375rem; color: var(--texto-2); min-height: 1.55em; }
.reloj-gigante__nota.es-extension { color: var(--white); font-weight: 600; }
.puntos--claro li::before { background: var(--carmesi-400); }
.movil--subasta { justify-self: center; width: 17rem; }
.sala { padding: 1rem; display: grid; gap: 0.5rem; }
.sala__cabecera { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
.sala__lote { font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; background: var(--g-100); padding: 0.2rem 0.5rem; border-radius: var(--r-sm); clip-path: polygon(0 0, 100% 0, 100% 65%, 88% 100%, 0 100%); }
.sala__monto { font-size: 1.875rem; font-weight: 800; font-stretch: 87.5%; font-variant-numeric: tabular-nums; line-height: 1.05; }
.sala__monto.es-nueva { animation: sube 700ms var(--ease-salida); }
@keyframes sube { from { transform: translateY(0.35em); opacity: 0.25; } to { transform: none; opacity: 1; } }
.sala__quien { font-size: 0.75rem; color: var(--g-500); }
.sala__chips { display: flex; gap: 0.375rem; flex-wrap: wrap; margin: 0.25rem 0; }
.chip { font-size: 0.6875rem; font-weight: 600; padding: 0.3rem 0.55rem; border-radius: 99px; border: 1px solid var(--g-200); color: var(--g-700); font-variant-numeric: tabular-nums; }
.chip--sel { border: 1.5px solid var(--carmesi-600); color: var(--carmesi-700); background: var(--carmesi-50); }
.sala__historial { list-style: none; margin: 0.25rem 0 0; padding: 0.5rem 0 0; border-top: 1px solid var(--g-200); display: grid; gap: 0.25rem; font-size: 0.75rem; color: var(--g-500); font-variant-numeric: tabular-nums; }
.sala__historial li { display: flex; justify-content: space-between; }
.sala__historial li:first-child { color: var(--g-900); font-weight: 600; }

/* La venta: tablero y papeles */
.venta { display: grid; gap: 3rem; align-items: center; margin-bottom: 3.5rem; }
@media (min-width: 960px) { .venta { grid-template-columns: 1.1fr 0.9fr; gap: 4rem; } }
.tablero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; background: var(--g-50); border: 1px solid var(--borde); border-radius: var(--r-xl); padding: 0.75rem; position: relative; }
@media (min-width: 640px) { .tablero { gap: 0.75rem; padding: 1rem; } }
.tablero__columna { display: grid; gap: 0.5rem; align-content: start; min-height: 13rem; }
.tablero__titulo { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); display: flex; justify-content: space-between; padding: 0 0.125rem 0.25rem; }
.tablero__titulo span { font-variant-numeric: tabular-nums; }
.tarjeta-lead { background: var(--white); border: 1px solid var(--borde); border-radius: var(--r-lg); padding: 0.625rem; display: grid; gap: 0.125rem; font-size: 0.75rem; line-height: 1.3; color: var(--texto-3); min-width: 0; }
.tarjeta-lead strong { color: var(--texto); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta-lead span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta-lead--ganada { border-color: var(--success); background: var(--success-subtle); }
.js .tablero.es-visible .tarjeta-lead--viaja { animation: viaja 6s var(--ease) 600ms infinite; position: relative; z-index: 2; box-shadow: 0 10px 24px -12px rgba(22, 26, 33, 0.5); }
@keyframes viaja { 0%, 12% { transform: none; } 32%, 55% { transform: translateX(calc(100% + 0.75rem)) rotate(-2deg); } 75%, 92% { transform: translateX(calc(200% + 1.5rem)) rotate(0); } 100% { transform: none; } }

.papeles { position: relative; height: 22rem; max-width: 22rem; width: 100%; justify-self: center; }
.papel { position: absolute; inset: 0 1.5rem 0 0; background: var(--white); border: 1px solid var(--borde); border-radius: var(--r-sm); padding: 1.5rem 1.25rem; box-shadow: 0 24px 50px -28px rgba(22, 26, 33, 0.45); display: grid; align-content: start; gap: 0.5rem; transition: transform 600ms var(--ease-salida); }
.papel--3 { transform: rotate(-7deg) translate(-0.75rem, 1rem); }
.papel--2 { transform: rotate(-3deg) translate(-0.25rem, 0.5rem); }
.papel--1 { transform: rotate(2deg) translateX(1rem); }
.papeles:hover .papel--3 { transform: rotate(-12deg) translate(-2.5rem, 1.25rem); }
.papeles:hover .papel--2 { transform: rotate(-6deg) translate(-1.25rem, 0.5rem); }
.papeles:hover .papel--1 { transform: rotate(3deg) translateX(1.75rem); }
.papel__titulo { font-weight: 800; font-stretch: 80%; font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.02em; }
.papel__ref { font-family: var(--mono); font-size: 0.6875rem; color: var(--texto-3); }
.papel__dato { font-size: 0.75rem; color: var(--texto-2); display: grid; }
.papel__dato span { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); }
.papel__monto { font-size: 0.6875rem; line-height: 1.45; letter-spacing: 0.02em; background: var(--carmesi-50); border-left: 2px solid var(--carmesi-600); padding: 0.5rem 0.625rem; color: var(--g-900); }
.papel__monto b { font-variant-numeric: tabular-nums; }
.papel__linea { display: block; height: 0.375rem; border-radius: 99px; background: var(--g-100); }
.papel__linea--corta { width: 60%; }
.papel__pie { margin-top: 0.5rem; font-size: 0.5625rem; color: var(--texto-3); }
.pasos-venta { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .pasos-venta { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.pasos-venta li { color: var(--texto-2); border-top: 2px solid var(--texto); padding-top: 1rem; }
.pasos-venta strong { display: block; color: var(--texto); font-size: 1.125rem; margin-bottom: 0.25rem; }

/* Todo lo que trae */
.incluye { list-style: none; padding: 0; margin: 2.5rem auto 0; max-width: 62rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.incluye li { padding: 0.625rem 1rem; border: 1px solid var(--g-200); background: var(--white); border-radius: var(--r-md); font-weight: 600; font-size: 0.9375rem; color: var(--g-900); }

/* Confiable (breve) */
.confiable { padding: 3rem 0; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.confiable__fila { display: grid; gap: 1.5rem; }
@media (min-width: 960px) { .confiable__fila { grid-template-columns: 0.6fr 1.4fr; align-items: center; gap: 3rem; } }
.confiable__titulo { font-size: 1.75rem; line-height: 1; font-weight: 800; font-stretch: 70%; }
.confiable__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.875rem; font-size: 0.9375rem; color: var(--texto-2); }
@media (min-width: 640px) { .confiable__lista { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
.confiable__lista strong { color: var(--texto); }

/* Precio */
.precio { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 960px) { .precio { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.tarjeta-precio { border: 1px solid var(--borde); border-radius: var(--r-xl); background: var(--g-900); padding: 2rem 1.5rem; display: grid; gap: 1.5rem; position: relative; overflow: hidden; }
.tarjeta-precio::before { content: ""; position: absolute; right: -3rem; top: -3rem; width: 9rem; height: 9rem; background: var(--carmesi-600); clip-path: polygon(0 0, 100% 0, 100% 100%); opacity: 0.9; }
.tarjeta-precio__monto { font-size: clamp(4.5rem, 20vw, 6.5rem); line-height: 0.9; font-weight: 800; font-stretch: 62%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tarjeta-precio__monto .moneda { color: var(--g-250); }
.tarjeta-precio__periodo { display: block; font-size: 1rem; font-weight: 600; font-stretch: 100%; color: var(--g-250); letter-spacing: 0; margin-top: 0.5rem; }
.tarjeta-precio__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.625rem; color: var(--g-250); }
.tarjeta-precio__lista li { padding-left: 1.5rem; position: relative; }
.tarjeta-precio__lista li::before { content: ""; position: absolute; left: 0.125rem; top: 0.45em; width: 0.5rem; height: 0.85rem; border: solid var(--g-50); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Preguntas */
.faq { border-top: 1px solid var(--borde); }
.faq:last-of-type { border-bottom: 1px solid var(--borde); }
.faq summary { cursor: pointer; list-style: none; min-height: 48px; padding: 1.125rem 2.5rem 1.125rem 0; font-weight: 600; font-size: 1.0625rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.9rem; font-size: 1.5rem; line-height: 1; color: var(--texto-2); transition: transform 200ms var(--ease); }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--texto-2); padding-bottom: 1.25rem; max-width: 40rem; }

/* Cierre y pie */
.cierre { padding: 5rem 0; overflow: hidden; position: relative; }
.cierre::before { content: ""; position: absolute; right: -6rem; bottom: -6rem; width: 22rem; height: 22rem; background: var(--carmesi-600); clip-path: polygon(100% 0, 100% 100%, 0 100%); opacity: 0.85; }
@media (min-width: 768px) { .cierre { padding: 8rem 0; } }
.cierre__fila { position: relative; display: grid; gap: 2rem; }
.cierre__titulo { font-size: clamp(3rem, 13vw, 7rem); line-height: 0.86; font-weight: 800; font-stretch: 62%; text-transform: uppercase; letter-spacing: -0.02em; }
.cierre__titulo span { display: block; }
.cierre__titulo span:last-child { color: transparent; -webkit-text-stroke: 2px var(--carmesi-400); }
.pie { border-top: 1px solid var(--borde); padding: 2rem 0 3rem; }
.pie__fila { display: grid; gap: 0.75rem; }
@media (min-width: 960px) { .pie__fila { grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; } }
.pie__texto { font-size: 0.875rem; color: var(--texto-2); }
.pie a:not(.logo) { color: var(--texto); text-decoration: underline; text-underline-offset: 0.2em; }

/* Aparición al hacer scroll */
.js .aparece { opacity: 0; transform: translateY(18px); transition: opacity 800ms var(--ease-salida), transform 800ms var(--ease-salida); }
.js .aparece.es-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .hero__linea, .js .movil--hero, .js .aparece, .js .chat .burbuja { opacity: 1; transform: none; }
  .js .movil--hero { transform: rotate(4deg); }
  .js .marcador__linea { fill-opacity: 1; stroke-dashoffset: 0; }
  .js .marcador__subrayado { stroke-dashoffset: 0; }
  .aviso:first-child { opacity: 1; transform: none; }
}