/* ═══════════════════════════════════════════════════════════════════════════
   Secciones de la landing que no cubre base.css: bandas alternadas, maquetas,
   selector de rubro, bloque de dolores y pasos de la oferta.
   Se apoya en base.css + theme-chat.css (variables, .sec, .wrap, .card, .btn…).
   Cargado por la landing y por las vistas de /concepto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Bandas alternadas (en vez de la fila de 3 tarjetas iguales) ─────────── */
.banda{padding:76px 0;position:relative}
.banda .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
/* El zigzag se marca a mano con .media-izq y no con :nth-of-type: si mañana se
   agrega una sección antes, la cuenta cambiaría y el orden se rompería solo. */
.banda.media-izq .media{order:-1}
.banda h2{font-size:clamp(1.9rem,3.6vw,2.9rem);margin:14px 0 0;text-wrap:balance;letter-spacing:-.02em}
.banda .bajada{color:var(--muted);font-size:1.05rem;line-height:1.65;margin-top:16px;max-width:52ch}
.banda .num{
  font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.16em;color:var(--lime);
  display:inline-flex;align-items:center;gap:9px
}
.banda .num::before{content:"";width:26px;height:1px;background:var(--lime);opacity:.55}

.lista-check{list-style:none;margin:24px 0 26px;display:flex;flex-direction:column;gap:11px}
.lista-check li{position:relative;padding-left:29px;color:var(--muted);font-size:.95rem;line-height:1.5}
.lista-check li b{color:var(--head);font-weight:600}
.lista-check li::before{
  content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:6px;
  background:color-mix(in srgb,var(--lime) 16%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d7c0f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:11px;background-repeat:no-repeat;background-position:center
}

/* ── Maqueta de conversación (estática, sin JS) ──────────────────────────── */
.mock-chat{
  border-radius:26px;padding:22px;background:var(--glass-bg);border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  /* sombra teñida con el violeta de marca, no negro plano */
  box-shadow:0 40px 90px -45px color-mix(in srgb,var(--accent) 85%,#000)
}
.mock-chat .hora{
  display:block;text-align:center;font-family:"Space Mono",monospace;font-size:.64rem;
  letter-spacing:.12em;color:var(--muted);margin-bottom:16px
}
.burbuja{max-width:82%;padding:11px 15px;font-size:.92rem;line-height:1.45;margin-bottom:10px;position:relative}
.burbuja.de-ellos{background:rgba(255,255,255,.07);border-radius:16px 16px 16px 5px;color:var(--text)}
.burbuja.de-nosotros{
  margin-left:auto;border-radius:16px 16px 5px 16px;color:#0d1f00;
  background:linear-gradient(160deg,var(--lime),color-mix(in srgb,var(--lime) 78%,#7fd400))
}
.burbuja small{display:block;font-size:.64rem;opacity:.62;margin-top:5px;font-family:"Space Mono",monospace}
.mock-pie{
  margin-top:16px;padding-top:14px;border-top:1px solid var(--glass-brd);
  display:flex;align-items:center;gap:9px;font-size:.78rem;color:var(--muted)
}
.mock-pie .pip{width:7px;height:7px;border-radius:50%;background:var(--lime);flex:0 0 7px}

/* ── Maqueta de cobro ────────────────────────────────────────────────────── */
.mock-cobro{
  border-radius:24px;padding:30px;background:var(--glass-bg);border:1px solid var(--glass-brd);
  box-shadow:0 40px 90px -45px color-mix(in srgb,var(--accent) 85%,#000)
}
.mock-cobro .fila{display:flex;justify-content:space-between;align-items:center;padding:13px 0;font-size:.92rem;color:var(--muted)}
.mock-cobro .fila + .fila{border-top:1px solid var(--glass-brd)}
.mock-cobro .fila b{color:var(--head);font-weight:600}
.mock-cobro .total{margin-top:6px;padding-top:16px;border-top:1px solid var(--glass-brd);display:flex;justify-content:space-between;align-items:baseline}
.mock-cobro .total .n{font-family:"Space Grotesk",system-ui,sans-serif;font-weight:800;font-size:2rem;color:var(--head);font-variant-numeric:tabular-nums}
.mock-cobro .sello{
  margin-top:18px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
  background:color-mix(in srgb,var(--lime) 14%,transparent);color:var(--lime);
  font-family:"Space Mono",monospace;font-size:.7rem;letter-spacing:.08em
}

/* ── El hilo: "todo es tuyo" ─────────────────────────────────────────────── */
.tuyo-in{position:relative}
.tuyo-lista{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px;position:relative
}
.tuyo-lista div{
  padding:16px 14px;border-radius:16px;background:rgba(255,255,255,.14);
  color:#fff;font-size:.9rem;line-height:1.4;text-align:left
}
.tuyo-lista b{display:block;font-family:"Space Grotesk",system-ui,sans-serif;font-size:1rem;margin-bottom:3px}

/* ── Concepto B: la oferta y el selector de rubro ────────────────────────── */
.oferta{
  display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;
  background:color-mix(in srgb,var(--lime) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--lime) 40%,transparent);
  color:var(--lime);font-family:"Space Mono",monospace;font-size:.72rem;letter-spacing:.08em
}
.rubros{margin:26px 0 8px}
/* La pregunta se lee como una pregunta de verdad, no como una etiqueta de
   sistema: la misma letra del cuerpo, en tamaño normal y sin versalitas. En
   Space Mono y todo en mayúsculas parecía el rótulo de un formulario. */
.rubros .rot{
  display:block;font-family:Inter,system-ui,sans-serif;font-size:1rem;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--text);margin-bottom:14px
}
.rubro-chips{display:flex;flex-wrap:wrap;gap:9px}
.rubro-chips button{
  font:inherit;font-size:.88rem;cursor:pointer;padding:9px 16px;border-radius:999px;
  background:var(--glass-bg);border:1px solid var(--glass-brd);color:var(--text);
  transition:transform .2s cubic-bezier(.32,.72,0,1),background-color .2s,border-color .2s,color .2s
}
.rubro-chips button:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--lime) 45%,var(--glass-brd))}
.rubro-chips button:active{transform:scale(.97)}
.rubro-chips button[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--lime-ink);font-weight:600}

/* ── Concepto B: lo que te cuesta hoy ────────────────────────────────────── */
.cuesta{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.cuesta article{
  padding:26px 28px;border-radius:22px;background:var(--glass-bg);border:1px solid var(--glass-brd);
  display:flex;gap:16px;align-items:flex-start
}
.cuesta .marca{
  flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);font-size:1.15rem
}
.cuesta h3{font-size:1.02rem;margin:0 0 6px;color:var(--head)}
.cuesta p{color:var(--muted);font-size:.92rem;line-height:1.55;margin:0}
.cuesta .arregla{display:block;margin-top:10px;font-size:.86rem;color:var(--lime);font-weight:600}

/* ── Concepto B: los pasos de la oferta ──────────────────────────────────── */
.pasos-oferta{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:p}
.pasos-oferta article{
  position:relative;padding:30px 26px 26px;border-radius:22px;
  background:var(--glass-bg);border:1px solid var(--glass-brd)
}
.pasos-oferta article::before{
  counter-increment:p;content:counter(p);
  position:absolute;top:-15px;left:26px;width:36px;height:36px;border-radius:12px;
  background:var(--lime);color:var(--lime-ink);display:flex;align-items:center;justify-content:center;
  font-family:"Space Mono",monospace;font-weight:700
}
.pasos-oferta h3{font-size:1.05rem;margin:6px 0 8px;color:var(--head)}
.pasos-oferta p{color:var(--muted);font-size:.93rem;line-height:1.55;margin:0}
.pasos-oferta .cuando{
  display:block;margin-top:12px;font-family:"Space Mono",monospace;font-size:.7rem;
  letter-spacing:.08em;color:var(--lime)
}

/* ── Concepto B: barra de cierre pegada al fondo en móvil ────────────────── */
.barra-cierre{display:none}

/* ── Las dos píldoras del menú ───────────────────────────────────────────────
   Regla que se está aplicando: una sola acción principal por pantalla, y las
   secundarias subordinadas. Dos botones del mismo verde y del mismo peso
   competían y el ojo no sabía cuál era cuál.
   La jerarquía se hace con RELLENO y CONTRASTE, no sólo con color: las dos
   siguen siendo verdes, pero sólo la de la demo va rellena. */
.nav-cr{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:11px 18px;border-radius:999px;font-size:.92rem;font-weight:600;
  border:1.5px solid transparent;
  transition:transform .2s cubic-bezier(.32,.72,0,1),background-color .2s,box-shadow .2s,border-color .2s
}
/* Principal: la acción que persigue toda la página. */
.nav-cr{
  background:var(--lime);color:var(--lime-ink);border-color:var(--lime);
  box-shadow:0 14px 30px -12px rgba(154,230,0,.5)
}
.nav-cr:hover{
  background:#a6f20a;color:var(--lime-ink);border-color:#a6f20a;
  transform:translateY(-2px);box-shadow:0 20px 40px -12px rgba(154,230,0,.6)
}
/* Secundaria: mismo verde, mismo tamaño, pero hueca. Se ve, no compite. */
.nav-cr-360{
  background:transparent;color:var(--lime);
  border-color:color-mix(in srgb,var(--lime) 55%,transparent);
  box-shadow:none
}
.nav-cr-360:hover{
  background:color-mix(in srgb,var(--lime) 14%,transparent);
  color:var(--lime);border-color:var(--lime);box-shadow:none
}
.nav-cr:active{transform:scale(.97)}
.nav-right{display:flex;align-items:center;gap:10px}

/* Enlace que sólo existe dentro del menú desplegable de móvil: en pantalla
   grande el mismo destino ya está como píldora a la derecha. */
.solo-movil{display:none}

@media(max-width:1080px){
  .nav-cr{padding:10px 15px;font-size:.86rem;gap:6px}
}
@media(max-width:900px){
  /* Con el menú en hamburguesa no caben dos píldoras y el logo. Se queda la de
     la demo, que es la acción principal, y los recorridos pasan al desplegable
     (por eso el enlace .solo-movil existe). */
  .nav-cr-360{display:none}
  .solo-movil{display:block}
  .nav-links a.solo-movil{color:var(--lime);font-weight:600}
}
@media(max-width:420px){
  .nav-cr{padding:9px 12px;font-size:.78rem}
}

/* ── Detalles compartidos ────────────────────────────────────────────────── */
.hero-prueba{
  margin-top:22px;color:var(--muted);font-size:.9rem;line-height:1.55;max-width:46ch;
  padding-left:14px;border-left:2px solid color-mix(in srgb,var(--lime) 45%,transparent)
}
/* Las garantías, justo debajo del botón: es donde se decide. Se subieron de
   .85rem a .95rem porque a 13 px se leían como letra chica de contrato. */
.sin-riesgo{
  display:flex;flex-wrap:wrap;gap:9px 20px;margin-top:24px;color:var(--text);font-size:.95rem
}
.sin-riesgo span:first-child{color:var(--lime);font-weight:600}
.sin-riesgo span{display:inline-flex;align-items:center;gap:7px}
.sin-riesgo span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime)}
.video-lado{
  width:100%;max-width:290px;aspect-ratio:9/16;object-fit:cover;display:block;margin:0 auto;
  border-radius:24px;border:1px solid var(--glass-brd);background:#05010f;
  box-shadow:0 40px 90px -45px color-mix(in srgb,var(--accent) 85%,#000)
}

@media(max-width:900px){
  .banda{padding:54px 0}
  .banda .wrap{grid-template-columns:1fr;gap:32px}
  .banda.media-izq .media{order:0}
  .tuyo-lista{grid-template-columns:1fr 1fr;gap:10px}
  .cuesta{grid-template-columns:1fr}
  .pasos-oferta{grid-template-columns:1fr;gap:26px}
}
@media(max-width:520px){
  .tuyo-lista{grid-template-columns:1fr}
}

/* ── Pantalla previa al demo ─────────────────────────────────────────────────
   Se muestra al tocar un rubro que tiene demo. Reusa .modal-ov/.modal de
   grad-extras.css, así que hereda el fondo, la animación y el bloqueo de
   scroll; acá sólo va lo propio del contenido. */
.modal.intro{max-width:520px;text-align:left}
.modal.intro h3{margin:10px 0 10px;font-size:1.45rem}
.intro-que{
  color:var(--text);font-size:1rem;line-height:1.6;margin:0 0 20px;
  padding:14px 16px;border-radius:14px;
  background:color-mix(in srgb,var(--lime) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--lime) 26%,transparent)
}
.intro-pasos{list-style:none;counter-reset:i;margin:0 0 18px;display:flex;flex-direction:column;gap:13px}
.intro-pasos li{
  counter-increment:i;position:relative;padding-left:40px;
  color:var(--muted);font-size:.95rem;line-height:1.55
}
.intro-pasos li b{color:var(--head);font-weight:600}
.intro-pasos li::before{
  content:counter(i);position:absolute;left:0;top:-1px;
  width:28px;height:28px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--lime);color:var(--lime-ink);
  font-family:"Space Mono",monospace;font-weight:700;font-size:.85rem;
  font-variant-numeric:tabular-nums
}
.intro-nota{color:var(--muted);font-size:.88rem;line-height:1.55;margin:0 0 22px}
.modal.intro .btn{width:100%;justify-content:center}
.modal.intro .intro-cerrar{margin-top:10px}

/* La flecha que avisa que el rubro abre algo aparte. */
.rubro-chips .mini{font-size:.78em;opacity:.65;margin-left:1px}

/* ── Cuarta caja de la sección de demos: "Demo personalizado" ────────────────
   Las otras tres abren un asistente que ya existe; esta pide el propio. Ocupa
   la fila completa a propósito: así las tres de arriba quedan exactamente del
   mismo tamaño que siempre, sin tener que apretarlas para meter una cuarta. */
.demo-propio{grid-column:1/-1;display:grid;grid-template-columns:1.25fr auto;
  gap:26px;align-items:center}
.demo-propio .dp-txt p{margin:8px 0 0;max-width:52ch}
.demo-propio .dp-elige{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.demo-propio label{width:100%;color:var(--muted);font-size:.9rem}
.demo-propio select{
  font:inherit;font-size:.95rem;cursor:pointer;padding:12px 40px 12px 16px;border-radius:14px;
  background-color:var(--surface);color:var(--text);border:1px solid var(--glass-brd);
  -webkit-appearance:none;appearance:none;
  /* La flechita se dibuja acá porque el select nativo la pinta en negro sobre
     el fondo oscuro y no se ve. */
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.demo-propio select:hover{border-color:color-mix(in srgb,var(--lime) 45%,var(--glass-brd))}
.demo-propio select:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
@media(max-width:900px){
  .demo-propio{grid-template-columns:1fr;gap:18px}
  .demo-propio .dp-elige .btn{width:100%;justify-content:center}
  .demo-propio select{width:100%}
}