/*
  La piel del sitio de venta: la portada y «Nosotros».

  Vive en un archivo aparte y no adentro de cada página porque son dos páginas
  con la misma cara: duplicar seiscientas líneas de estilo es garantizar que
  dentro de un mes una tenga los botones de un color y la otra de otro. El
  enlace lleva la fecha del archivo en la dirección, así un cambio se ve al
  instante aunque el navegador tenga la versión vieja guardada.
*/

:root {
  --azul: #0b5fff; --azul-2: #2e8bff; --azul-3: #0a4fd8; --tint: #eaf1ff;
  --noche: #0a0c11; --noche-2: #0f131b; --noche-3: #161b25;
  --ink: #0b0d12; --ink-2: #4d5666; --ink-3: #7b8494;
  --line: #e5e8ef; --line-2: #eff1f6; --papel: #fff; --papel-2: #f7f8fa;
  --ok: #0f7a6c; --ok-soft: #e3f5f2; --danger: #c8322f;
  /* El verde de WhatsApp y su versión para botones con texto blanco encima. */
  --wa: #25d366; --wa-2: #1aa25f;
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px;
  --display: 'Inter Tight', Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --texto: Inter, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --salto: cubic-bezier(.16,.84,.44,1);
  --barra: 66px;
}
@media (max-width: 780px) { :root { --barra: 60px; } }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--papel); color: var(--ink);
  font: 400 15.5px/1.62 var(--texto);
  -webkit-font-smoothing: antialiased; letter-spacing: -0.008em;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
::selection { background: var(--tint); }

/*
  La tipografía de titular es una versión más angosta de la misma familia del
  panel. Es el recurso de las marcas grandes: una sola familia, dos anchos. El
  titular queda apretado y con carácter, y el texto largo sigue siendo cómodo de
  leer, que es lo contrario de poner una fuente decorativa arriba.
*/
h1, h2, h3, .cifra b, .precio, .logo b, .gran-cita {
  font-family: var(--display); font-weight: 600; line-height: 1.08;
  letter-spacing: -0.032em;
}
h1 { font-size: clamp(38px, 6.2vw, 66px); letter-spacing: -0.042em; }
h2 { font-size: clamp(27px, 3.7vw, 40px); letter-spacing: -0.036em; }
h3 { font-size: 17px; letter-spacing: -0.022em; }

.centro { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 24px; }
.num { font-variant-numeric: tabular-nums; }

/* ── animaciones ─────────────────────────────────────────────────────────── */
/*
  Una sola idea de movimiento en toda la página: lo que entra, sube un poco.
  Nada gira, nada rebota. El escalonado se hace con una variable por elemento
  para no escribir treinta reglas.
*/
.sube {
  opacity: 0; transform: translateY(16px);
  transition: opacity .75s var(--salto), transform .75s var(--salto);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.sube.entro { opacity: 1; transform: none; }

@keyframes aparece { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes late { 0%,100% { opacity: .35; transform: scale(1) } 50% { opacity: 1; transform: scale(1.25) } }
@keyframes puntos { 0%,60%,100% { opacity: .25; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-3px) } }

/* ── barra ───────────────────────────────────────────────────────────────── */
/*
  La barra flota sobre la portada, no arriba de ella: arranca sin fondo —se ve la
  luz de la portada por atrás— y recién se pinta de blanco cuando ya hay
  contenido pasando abajo. Por eso va fija y la portada se corre su altura hacia
  abajo; si fuera `sticky` ocuparía su propio renglón arriba de todo.
*/
.barra {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  background: rgba(255,255,255,0); border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.barra.pegada {
  background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--line); box-shadow: 0 1px 20px rgba(10,20,50,.05);
}
.barra .centro { display: flex; align-items: center; gap: 16px; height: 66px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.logo img { width: 30px; height: 30px; }
.logo b { font-size: 17.5px; font-weight: 600; letter-spacing: -0.03em; }
.barra nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.barra nav a {
  padding: 8px 13px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--ink-2);
  transition: color .16s, background .16s;
}
.barra nav a:hover { color: var(--ink); background: rgba(10,20,50,.05); }
.barra nav a.pri { background: var(--ink); color: #fff; padding: 10px 19px; margin-left: 8px; }
.barra nav a.pri:hover { background: var(--azul); color: #fff; transform: translateY(-1px); }
@media (max-width: 780px) { .barra nav a.oculta { display: none; } .barra .centro { height: 60px; } }

/* ── portada ─────────────────────────────────────────────────────────────── */
/*
  Fondo claro con una sola luz difusa arriba y una grilla finísima que se
  desvanece. La foto de producto —el teléfono— es lo oscuro, y por eso resalta.
  El alto lo maneja el contenido: si además valiera el relleno que traen todas
  las secciones, la portada tendría cien píxeles de vacío abajo.
*/
.portada {
  position: relative; overflow: hidden; padding: var(--barra) 0 0; text-align: center;
  background:
    radial-gradient(82% 58% at 50% -14%, #dfe9ff 0%, rgba(223,233,255,0) 62%),
    radial-gradient(48% 42% at 88% 4%, #ece6ff 0%, rgba(236,230,255,0) 60%),
    radial-gradient(40% 38% at 6% 12%, #e4f0ff 0%, rgba(228,240,255,0) 58%),
    #fcfdff;
}
.portada::before {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(transparent 95%, rgba(11,50,140,.055) 95%) 0 0 / 100% 52px,
    linear-gradient(90deg, transparent 95%, rgba(11,50,140,.055) 95%) 0 0 / 52px 100%;
  mask-image: radial-gradient(110% 80% at 50% 0%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(110% 80% at 50% 0%, #000 10%, transparent 72%);
}
.portada .centro { position: relative; z-index: 1; }
.portada > .centro { padding-top: 54px; padding-bottom: 0; }
@media (max-width: 760px) { .portada > .centro { padding-top: 34px; } }

.sello {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px;
  padding: 7px 16px 7px 11px; border-radius: 999px;
  background: rgba(255,255,255,.75); border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(10,20,50,.05);
  font-size: 13.5px; font-weight: 500; color: var(--ink-2);
}
.sello i { width: 7px; height: 7px; border-radius: 50%; background: #22c07d; animation: late 2.6s infinite ease-in-out; }

/*
  El titular es lo primero y lo más grande de la página. Una palabra con el
  degradado de la marca y otra sobre el bloque de color: dos acentos, no cinco.
*/
/* `balance` reparte los renglones parejos en vez de dejar una palabra sola
   colgando: en un titular de tres palabras por línea, se nota muchísimo. */
.portada h1 {
  max-width: 15ch; margin: 0 auto; font-weight: 700; letter-spacing: -0.045em; line-height: 1.06;
  text-wrap: balance;
}
.degrade {
  background: linear-gradient(96deg, #0b5fff 8%, #4f7bff 42%, #7b5cff 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.portada mark {
  background: var(--ink); color: #fff; border-radius: 12px;
  padding: .02em .15em .08em; margin: 0 -.04em;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.bajada { margin: 26px auto 0; font-size: 18.5px; line-height: 1.6; color: var(--ink-2); max-width: 49ch; text-wrap: pretty; }
.acciones { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: 999px; background: var(--azul); color: #fff;
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  /* Sombra gris y corta, no un resplandor del color del botón: un botón que
     brilla con su propio color se ve a cartel de neón, no a software. */
  box-shadow: 0 4px 14px -6px rgba(10,20,50,.4);
  transition: transform .16s var(--salto), background .16s, box-shadow .16s;
}
.btn:hover { background: var(--azul-2); transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(10,20,50,.45); }
.btn:active { transform: translateY(0); }
.btn.claro { background: #fff; color: var(--noche); box-shadow: none; }
.btn.claro:hover { background: #e8ecf4; }
/*
  El verde de WhatsApp, un punto más oscuro que el de la marca: el #25D366
  original sobre texto blanco se lee mal y encima se ve fosforescente.
*/
.btn.verde { background: var(--wa-2); }
.btn.verde:hover { background: #17915c; }
/* El segundo botón: contorno sobre claro, apenas presente. Dos botones llenos
   compiten entre ellos y el ojo no sabe cuál es el importante. */
.btn.linea { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(10,20,50,.06); }
.btn.linea:hover { background: #fff; border-color: var(--ink-3); }
.btn.fantasma { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); box-shadow: none; }
.btn.fantasma:hover { background: rgba(255,255,255,.13); }
.btn.grande { padding: 15px 30px; font-size: 16.5px; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn svg { width: 17px; height: 17px; }
.btn .flecha { transition: transform .2s var(--salto); }
.btn:hover .flecha { transform: translateX(3px); }
.sin-tarjeta { margin-top: 20px; font-size: 13.5px; color: var(--ink-3); }

/* ── el teléfono de la portada ───────────────────────────────────────────── */
/*
  Un teléfono dibujado con CSS, no una foto: pesa nada, se ve nítido en
  cualquier pantalla y la conversación de adentro es texto de verdad. La
  pantalla va en el WhatsApp oscuro porque el fondo de la portada es claro: si
  fuera clara también, el producto se perdería adentro de la página.
*/
.escenario { position: relative; margin-top: 56px; display: flex; justify-content: center; }
/* La sombra en el piso: es lo que despega el teléfono del fondo. */
.escenario::before {
  content: ''; position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  width: 420px; height: 90px; border-radius: 50%; filter: blur(34px);
  background: rgba(23,42,94,.30);
}
@media (max-width: 760px) { .escenario { margin-top: 40px; } .escenario::before { width: 280px; } }

.telefono {
  position: relative; width: 344px; max-width: 88vw; padding: 11px;
  border-radius: 54px; background: linear-gradient(155deg, #3a4150 0%, #171b24 38%, #0d1017 100%);
  box-shadow:
    0 40px 70px -28px rgba(13,26,64,.55),
    0 2px 6px rgba(13,26,64,.18),
    inset 0 0 0 1px rgba(255,255,255,.14);
  animation: entra-tel 1s .15s both var(--salto);
}
@keyframes entra-tel { from { opacity: 0; transform: translateY(34px) } to { opacity: 1; transform: none } }
/* Los botones del costado: dos rayitas que terminan de decir «esto es un teléfono». */
.telefono::after {
  content: ''; position: absolute; right: -2px; top: 148px; width: 3px; height: 62px;
  border-radius: 3px; background: linear-gradient(#4a5262, #262c38);
}
.pantalla {
  position: relative; overflow: hidden; border-radius: 44px; background: #0b141a;
  color: #e9edef; text-align: left;
}
.isla {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 92px; height: 26px; border-radius: 999px; background: #05070a;
}
.estado {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 24px 9px; font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em;
}
.estado .senal { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.estado .senal i { width: 3px; border-radius: 1px; background: #e9edef; }
.estado .bateria {
  width: 22px; height: 11px; border-radius: 3px; border: 1px solid rgba(233,237,239,.6);
  position: relative; padding: 1.5px;
}
.estado .bateria::after { content: ''; display: block; width: 72%; height: 100%; border-radius: 1px; background: #e9edef; }

.tel-top { display: flex; align-items: center; gap: 11px; padding: 10px 16px 12px; background: #1f2c34; }
.tel-top .av { width: 36px; height: 36px; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.tel-top b { font-size: 14.5px; font-weight: 600; }
.tel-top span { display: block; font-size: 11.5px; color: #8fa3ad; }
.tel-top .llamar { margin-left: auto; display: flex; gap: 15px; color: #8fa3ad; }
.tel-top .llamar svg { width: 17px; height: 17px; }

.chats {
  padding: 16px 12px 12px; display: flex; flex-direction: column; gap: 9px;
  min-height: 318px; background: #0b141a;
}
.glob {
  max-width: 84%; padding: 8px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.45;
  box-shadow: 0 1px 1px rgba(0,0,0,.25);
  animation: aparece .5s both var(--salto);
}
.glob.el { align-self: flex-start; background: #202c33; border-top-left-radius: 4px; }
.glob.yo { align-self: flex-end; background: #005c4b; border-top-right-radius: 4px; }
.glob small { display: block; margin-top: 3px; font-size: 10.5px; color: rgba(233,237,239,.5); text-align: right; }
.glob.audio { display: flex; align-items: center; gap: 9px; }
.glob.audio .play { width: 26px; height: 26px; border-radius: 50%; background: #8fa3ad; flex: none; display: grid; place-items: center; }
.glob.audio .play::after { content: ''; border: 5px solid transparent; border-left: 8px solid #202c33; margin-left: 3px; }
.onditas { display: flex; align-items: center; gap: 2px; height: 17px; }
.onditas i { width: 2px; border-radius: 2px; background: #6b7f8a; }
.onditas i:nth-child(-n+5) { background: #53bdeb; }
.glob.audio small { margin: 0; }
/* Los mensajes entran uno atrás de otro, como una conversación de verdad. */
.glob:nth-child(1) { animation-delay: .5s }
.glob:nth-child(2) { animation-delay: 1.3s }
.glob:nth-child(3) { animation-delay: 2.1s }
.glob:nth-child(4) { animation-delay: 2.9s }
/* El renglón de escribir, apagado: está para completar el teléfono. */
.tel-pie { display: flex; align-items: center; gap: 9px; padding: 9px 12px 20px; background: #0b141a; }
.tel-pie .campo {
  flex: 1; padding: 9px 14px; border-radius: 999px; background: #202c33;
  font-size: 13px; color: #6b7f8a;
}
.tel-pie .mic { width: 34px; height: 34px; border-radius: 50%; background: #00a884; display: grid; place-items: center; flex: none; }
.tel-pie .mic svg { width: 17px; height: 17px; color: #fff; }

/* ── secciones ───────────────────────────────────────────────────────────── */
section { padding: 96px 0; }
/* Con la barra fija, un enlace a «#planes» dejaría el título tapado abajo de
   ella. Esto le avisa al navegador dónde termina de verdad el techo. */
section[id] { scroll-margin-top: calc(var(--barra) + 10px); }
@media (max-width: 760px) { section { padding: 64px 0; } }
.gris { background: var(--papel-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.titulo { max-width: 660px; margin-bottom: 46px; }
.ojal {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--azul);
}
.ojal::before { content: ''; width: 22px; height: 1px; background: var(--azul); opacity: .5; }
.titulo p { margin-top: 16px; font-size: 17px; color: var(--ink-2); }

/* el problema */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cifra { background: var(--papel); padding: 30px 26px; }
.cifra b { display: block; font-size: 34px; color: var(--azul); }
.cifra span { display: block; margin-top: 10px; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }

/* funcionalidades */
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.tarjeta {
  background: var(--papel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 24px 28px; transition: border-color .2s, transform .2s var(--salto);
}
.tarjeta:hover { border-color: #c9d6ea; transform: translateY(-2px); }
.tarjeta .ico { width: 34px; height: 34px; color: var(--azul); margin-bottom: 18px; }
.tarjeta .ico svg { width: 24px; height: 24px; }
.tarjeta h3 { margin-bottom: 8px; }
.tarjeta p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
.tarjeta .desde { display: inline-block; margin-top: 14px; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }

/* pasos, sobre fondo oscuro */
.oscuro { background: var(--noche); color: #fff; }
.oscuro .titulo p { color: #aab3c2; }
.oscuro .ojal { color: var(--azul-2); }
.oscuro .ojal::before { background: var(--azul-2); }
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); overflow: hidden; counter-reset: paso; }
.paso { background: var(--noche); padding: 30px 26px; counter-increment: paso; }
.paso::before { content: '0' counter(paso); display: block; margin-bottom: 16px; font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--azul-2); }
.paso h3 { margin-bottom: 9px; }
.paso p { font-size: 14.5px; color: #aab3c2; }

/* ── el plan de prueba ───────────────────────────────────────────────────── */
/*
  Va aparte de la fila de precios, a lo ancho y sobre fondo oscuro: no es una
  opción más de la comparación —no tiene precio que comparar— y con el ancho
  entero se entiende de una que es la puerta de entrada.
*/
.prueba-banda {
  display: grid; grid-template-columns: 1fr auto; gap: 34px; align-items: center;
  margin-bottom: 22px; padding: 30px 34px;
  border-radius: var(--r-lg); background: var(--noche); color: #fff;
}
@media (max-width: 860px) { .prueba-banda { grid-template-columns: 1fr; gap: 24px; padding: 26px 24px; } }
.prueba-banda .etiqueta {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14);
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #cbd3e0;
}
.prueba-banda b {
  display: block; margin: 14px 0 0; font-family: var(--display);
  font-size: 34px; font-weight: 600; letter-spacing: -0.035em;
}
.prueba-banda p { margin-top: 10px; font-size: 15px; color: #aab3c2; max-width: 54ch; }
.prueba-banda ul {
  list-style: none; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 22px;
}
.prueba-banda li { position: relative; padding-left: 22px; font-size: 14px; color: #cbd3e0; }
.prueba-banda li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 13px; height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e8bff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.prueba-botones { display: flex; flex-direction: column; gap: 10px; }
.prueba-botones .btn { white-space: nowrap; }
@media (max-width: 860px) { .prueba-botones { flex-direction: row; flex-wrap: wrap; } }

/* planes */
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 20px; align-items: stretch; }
.plan {
  position: relative; background: var(--papel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 30px 26px; display: flex; flex-direction: column;
  transition: border-color .2s, transform .2s var(--salto);
}
.plan:hover { border-color: #c9d6ea; transform: translateY(-2px); }
.plan.destacado { border-color: var(--azul); box-shadow: 0 14px 44px -14px rgba(11,95,255,.35); }
.plan .etiqueta {
  position: absolute; top: -11px; left: 26px; padding: 4px 12px; border-radius: 999px;
  background: var(--azul); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
}
.plan b.nombre { display: block; font-size: 16px; font-weight: 600; }
.plan .precio { margin: 14px 0 5px; font-size: 36px; }
.plan .precio i { font-family: var(--texto); font-style: normal; font-size: 14px; font-weight: 400; letter-spacing: normal; color: var(--ink-3); }
.plan .creditos { font-size: 13px; color: var(--ink-3); }
.plan ul { list-style: none; margin-top: 24px; display: flex; flex-direction: column; gap: 11px; }
.plan li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--ink-2); }
.plan li::before {
  content: ''; position: absolute; left: 0; top: 6px; width: 15px; height: 15px;
  border-radius: 50%; background: var(--ok-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a6c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 10px; background-repeat: no-repeat; background-position: center;
}
.plan .elegir { margin-top: auto; padding-top: 26px; display: block; text-align: center; }
.plan .elegir span {
  display: block; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line);
  font-size: 14.5px; font-weight: 500; transition: border-color .16s, background .16s, color .16s;
}
.plan .elegir:hover span { border-color: var(--azul); color: var(--azul); background: var(--tint); }
.plan.destacado .elegir span { background: var(--azul); border-color: var(--azul); color: #fff; }
.plan.destacado .elegir:hover span { background: var(--azul-2); border-color: var(--azul-2); color: #fff; }

/* preguntas */
#preguntas .titulo { text-align: center; margin-inline: auto; }
#preguntas .ojal { justify-content: center; }
.preguntas { max-width: 780px; margin: 0 auto; }
details { border-bottom: 1px solid var(--line); }
details summary {
  list-style: none; cursor: pointer; padding: 21px 0; font-size: 16.5px; font-weight: 500;
  display: flex; align-items: center; gap: 16px; transition: color .16s;
}
details summary:hover { color: var(--azul); }
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: ''; margin-left: auto; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .22s var(--salto);
}
details[open] summary::after { transform: rotate(225deg) translate(-1px, -1px); }
details p { padding-bottom: 22px; margin-top: -4px; font-size: 15px; color: var(--ink-2); max-width: 66ch; animation: aparece .35s both; }

/* ── el pedido de prueba ─────────────────────────────────────────────────── */
#probar .centro { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { #probar .centro { grid-template-columns: 1fr; gap: 36px; } }
.lista-si { list-style: none; margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.lista-si li { position: relative; padding-left: 30px; font-size: 15px; color: var(--ink-2); }
.lista-si li b { color: var(--ink); font-weight: 600; }
.lista-si li::before {
  content: ''; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b5fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.o-wa { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.o-wa a { color: var(--azul); font-weight: 500; }

.caja-pedido {
  background: var(--papel); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -24px rgba(10,14,24,.22); padding: 30px;
}
.caja-pedido h3 { font-size: 20px; margin-bottom: 5px; }
.caja-pedido .sub { font-size: 14px; color: var(--ink-3); margin-bottom: 22px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .dos { grid-template-columns: 1fr; } }
label { display: block; margin-bottom: 15px; }
label > span { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
label > span i { font-style: normal; color: var(--ink-3); }
input, textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--papel); outline: 0; transition: border-color .16s, box-shadow .16s;
}
textarea { resize: vertical; min-height: 76px; }
input:focus, textarea:focus { border-color: var(--azul-2); box-shadow: 0 0 0 3px rgba(11,95,255,.12); }
.caja-pedido .btn { width: 100%; margin-top: 4px; }
/* El campo señuelo: invisible para una persona, irresistible para un robot. */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.letra-chica { margin-top: 16px; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.error { background: #fdecec; color: var(--danger); border-radius: var(--r-sm); padding: 11px 13px; font-size: 13.5px; margin-bottom: 15px; }

.listo { text-align: center; padding: 12px 0; animation: aparece .5s both var(--salto); }
.tilde { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: grid; place-items: center; font-size: 27px; }
.listo h3 { font-size: 21px; margin-bottom: 8px; }
.listo p { font-size: 14.5px; color: var(--ink-2); max-width: 34ch; margin: 0 auto 22px; }

/* ── Nosotros ────────────────────────────────────────────────────────────── */
.portada.simple > .centro { padding-top: 64px; padding-bottom: 88px; max-width: 940px; }
.portada.simple h1 { font-size: clamp(34px, 5.6vw, 58px); max-width: 18ch; }
.portada.simple .bajada { max-width: 56ch; }
@media (max-width: 760px) { .portada.simple > .centro { padding-top: 44px; padding-bottom: 56px; } }

/* El texto largo va angosto: sesenta y pico de caracteres por renglón es lo que
   se lee sin perder el hilo. Más ancho, el ojo salta de línea. */
.texto { max-width: 68ch; margin: 0 auto; }
.texto p { margin-bottom: 20px; font-size: 17px; line-height: 1.68; color: var(--ink-2); }
.texto p:last-child { margin-bottom: 0; }
.texto p b, .texto p strong { color: var(--ink); font-weight: 600; }
.texto h3 { margin: 38px 0 14px; font-size: 20px; }

/* Va con `.texto p` adelante porque si no gana la regla del párrafo común y la
   cita queda del mismo tamaño que el texto: una cita chica no es una cita. */
.texto p.gran-cita, .gran-cita {
  font-size: clamp(22px, 2.9vw, 30px); line-height: 1.3; color: var(--ink);
  border-left: 3px solid var(--azul); padding-left: 26px; margin: 44px 0;
}
.oscuro .gran-cita { color: #fff; }

/* Son cuatro: entran las cuatro en una fila, o dos y dos. Tres arriba y una
   sola abajo es lo único que no puede pasar. */
.principios { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px 24px; }
.principio { border-top: 2px solid var(--ink); padding-top: 20px; }
.oscuro .principio { border-top-color: var(--azul-2); }
.principio h3 { margin-bottom: 9px; }
.principio p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; }
.oscuro .principio p { color: #aab3c2; }

/* ── la rueda de la marca, girando ───────────────────────────────────────── */
/*
  Es la misma rueda que gira en el panel mientras la IA trabaja, con las mismas
  chispas y el mismo ritmo: acelera, se estira, afloja medio segundo y vuelve a
  tirar. Una rueda a velocidad constante es una rueda que gira; una que cambia de
  ritmo es una rueda que está haciendo fuerza.
*/
.motor {
  --base: 112px;
  --r0: calc(var(--base) * 0.3);
  --d: calc(var(--base) * 0.78);
  position: relative; display: inline-grid; place-items: center;
  width: var(--base); height: var(--base); margin-bottom: 30px;
}
@media (max-width: 760px) { .motor { --base: 88px; margin-bottom: 22px; } }
.motor::before {
  content: ''; position: absolute; inset: -18%; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(46,139,255,.3), transparent 68%);
  animation: latir 2.6s ease-in-out infinite;
}
@keyframes latir {
  0%, 100% { opacity: .5; transform: scale(.92) }
  50% { opacity: 1; transform: scale(1.06) }
}
.motor .rueda { position: relative; z-index: 2; width: 100%; height: 100%; animation: rodar 3.6s infinite; }
@keyframes rodar {
  0% { transform: rotate(0deg); animation-timing-function: cubic-bezier(.45,0,.35,1) }
  40% { transform: rotate(400deg); animation-timing-function: cubic-bezier(.4,0,.6,1) }
  56% { transform: rotate(455deg); animation-timing-function: cubic-bezier(.4,0,.3,1) }
  100% { transform: rotate(1080deg) }
}
/* Las chispas nacen escondidas atrás del neumático y salen disparadas. */
.motor .chispas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.motor .chispas i {
  position: absolute; top: 50%; left: 50%;
  width: calc(var(--base) * var(--f)); height: calc(var(--base) * var(--f));
  margin: calc(var(--base) * var(--f) / -2);
  opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20' fill='%232e8bff'%3E%3Cpath d='M11 2.6l2.1 5.1 5.1 2.1-5.1 2.1L11 17l-2.1-5.1L3.8 9.8l5.1-2.1z'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(46,139,255,.55));
  animation: volar var(--dur) cubic-bezier(.2,.5,.3,1) infinite;
  animation-delay: var(--esp);
}
@keyframes volar {
  0% { opacity: 0; transform: rotate(var(--a)) translateX(var(--r0)) rotate(calc(-1 * var(--a))) scale(.25) rotate(0deg) }
  20% { opacity: 1 }
  68% { opacity: .95 }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) rotate(calc(-1 * var(--a))) scale(1) rotate(160deg) }
}

/* ── cierre y pie ────────────────────────────────────────────────────────── */
.cierre { text-align: center; }
.cierre h2 { max-width: 17ch; margin: 0 auto; }
.cierre p { margin: 18px auto 0; font-size: 17px; color: #aab3c2; max-width: 50ch; }
.cierre .acciones { justify-content: center; }

footer { background: var(--noche-2); color: #79818f; padding: 40px 0; font-size: 13.5px; border-top: 1px solid rgba(255,255,255,.07); }
footer .centro { display: flex; flex-wrap: wrap; gap: 16px 26px; align-items: center; justify-content: space-between; }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
footer a { color: #aab3c2; transition: color .16s; }
footer a:hover { color: #fff; }

/* ── la burbuja de WhatsApp ──────────────────────────────────────────────── */
.wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  display: flex; align-items: center;
  height: 56px; padding: 0 15px; border-radius: 999px; background: var(--wa-2); color: #fff;
  /* Sombra gris, como la de cualquier cosa que flota. El halo verde encima del
     verde hacía que se viera encendido en vez de apoyado. */
  box-shadow: 0 6px 18px rgba(10,20,50,.22), 0 1px 3px rgba(10,20,50,.16);
  animation: aparece .5s 1.1s both var(--salto);
  transition: transform .2s var(--salto), box-shadow .2s, background .2s;
}
.wa:hover { transform: translateY(-2px); background: #17915c; box-shadow: 0 10px 24px rgba(10,20,50,.26); }
.wa svg { width: 27px; height: 27px; flex: none; }
.wa span {
  max-width: 0; overflow: hidden; white-space: nowrap; font-size: 14.5px; font-weight: 500;
  transition: max-width .3s var(--salto), margin-left .3s var(--salto);
}
.wa:hover span { max-width: 190px; margin-left: 10px; }
@media (max-width: 760px) { .wa { right: 14px; bottom: 14px; height: 52px; padding: 0 13px; } .wa span { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .sube { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}


/*
  La tarjeta de MercadoLibre, marcada.

  Es la funcion nueva y la que sube de plan, asi que se distingue del resto sin
  romper la grilla: el mismo borde y la misma sombra que las demas, con el color
  de la marca y una cinta chica arriba.
*/
.tarjeta.destacada {
  position: relative;
  border-color: color-mix(in srgb, var(--azul) 34%, transparent);
  box-shadow: 0 1px 2px rgba(10, 14, 24, .05), 0 10px 30px color-mix(in srgb, var(--azul) 12%, transparent);
}
.tarjeta.destacada .cinta {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--azul);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* ── teléfonos angostos ──────────────────────────────────────────────────── */
/*
  El sitio se veía bien en iPhone y apretado en Android, y la razón no es el
  sistema operativo: es el ancho. Los iPhone que hay dando vueltas miden 375 px
  de CSS para arriba —el SE chico, 375; del 12 en adelante, 390 o más—. Buena
  parte de los Android miden 360 (Galaxy A y S, Redmi, Moto G), y cualquier
  teléfono con el «tamaño de pantalla» de Android subido baja todavía más,
  porque esa opción achica el viewport de verdad y no solo la letra.

  Medido, no supuesto: a 375 la barra entra justa; a 360 le faltan cinco píxeles
  y «Pedir una prueba» se partía en dos renglones, así que la píldora crecía a
  67 px adentro de una barra de 60 y salía cortada arriba y abajo.

  Abajo de 370 px se recuperan esos píxeles y se le da aire al titular. Nada de
  esto toca 375 ni para arriba: lo que ya se veía bien queda igual.
*/

/* Un enlace de la barra antes se achica que hacer dos renglones. Vale a
   cualquier ancho: una píldora de dos líneas adentro de una barra de altura
   fija siempre se va a ver rota. */
.barra nav a, .logo b { white-space: nowrap; }

@media (max-width: 370px) {
  /* Veinticuatro píxeles de margen a cada lado son el 13% de la pantalla. */
  .centro { padding: 0 18px; }

  /* El logo y el botón, un punto más chicos: lo justo para que «Pedir una
     prueba» entre en un renglón, que era todo el problema. */
  .logo img { width: 27px; height: 27px; }
  .logo b { font-size: 16.5px; }
  .barra nav a.pri { padding: 9px 15px; font-size: 14px; }

  /*
    El titular tenía piso de 38 px y no bajaba nunca, así que en 360 quedaba
    pegado a los dos bordes y el bloque negro del «24/7» tocaba el filo. Ahora
    acompaña el ancho de la pantalla en vez de ignorarlo.
  */
  h1 { font-size: clamp(30px, 9.3vw, 38px); }
  .bajada { font-size: 17px; }
}

/*
  Y en los verdaderamente chicos —un SE viejo, o un Android con el zoom de
  pantalla al máximo, que baja el viewport a 320— el sello de arriba se partía
  en dos renglones y el puntito verde quedaba flotando al costado del hueco. Un
  punto menos de letra y entra entero.
*/
@media (max-width: 340px) {
  .sello { font-size: 12.5px; padding: 6px 13px 6px 10px; }
}

/* ── la pagina de privacidad ─────────────────────────────────────────────── */
/*
  Un texto legal se lee salteado: nadie empieza arriba y termina abajo. Va con
  las mismas anclas visuales que el resto del sitio —el mismo ancho de lectura,
  los mismos subtitulos— y con listas que se puedan barrer con el ojo, porque
  la alternativa es el parrafo de nueve renglones que nadie lee.
*/
.lista-legal {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.lista-legal li {
  position: relative;
  padding-left: 20px;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink-2);
}
/* Un guion y no un punto: el punto redondo empuja a leerlo como una enumeracion
   con orden, y aca no hay orden. */
.lista-legal li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 1.5px;
  background: var(--azul);
  opacity: 0.55;
}
.lista-legal li b { color: var(--ink); font-weight: 600; }

.fecha-legal {
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-3);
}

/* El nombre legal, en el pie. Discreto pero presente: es un dato que casi nadie
   va a leer y que tiene que estar igual. */
footer .centro > span em {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: 12.5px;
  color: #626b7a;
}