/* =============================================================
   TECNET — VENTAS
   Se carga en todo el sitio (la barra movil sale en casi todas las paginas).
   Mobile-first. Depende de tokens.css y base.css.
   Contenido: ficha de producto (financiacion, sellos), barra inferior movil
   y pagina /compra-a-credito/.
   ============================================================= */

/* ---------- FICHA: FINANCIACION ---------- */
.tt-fin{
  display:flex;align-items:flex-start;gap:var(--s-3);
  margin-block:var(--s-3);padding:var(--s-3) var(--s-4);
  background:var(--tt-superficie);border:1px solid var(--tt-linea);border-radius:var(--radio);
}
.tt-fin-icono{flex:none;color:var(--tt-azul-claro)}
.tt-fin-icono .tt-icono{width:24px;height:24px}
.tt-fin-texto{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-small);color:var(--tt-texto-2)}
.tt-fin-texto strong{color:var(--tt-texto);font-size:.95rem}
.tt-fin-texto a{color:var(--tt-azul-claro);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- FICHA: SELLOS DE CONFIANZA + WHATSAPP ---------- */
.tt-confianza{margin-top:var(--s-4)}
.tt-sellos{display:grid;gap:var(--s-3);margin-bottom:var(--s-4)}
.tt-sello{display:flex;align-items:center;gap:var(--s-3)}
.tt-sello-icono{
  flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--tt-superficie);border:1px solid var(--tt-linea);color:var(--tt-azul-claro);
}
.tt-sello-icono .tt-icono{width:20px;height:20px}
.tt-sello-texto{display:flex;flex-direction:column;line-height:1.3;font-size:var(--fs-small);color:var(--tt-texto-2)}
.tt-sello-texto strong{color:var(--tt-texto);font-size:.95rem}
.tt-confianza-wa .tt-icono{width:20px;height:20px}
@media (min-width:480px){
  .tt-sellos{grid-template-columns:repeat(3,1fr);align-items:start}
  .tt-sello{flex-direction:column;align-items:flex-start;gap:var(--s-2)}
}

/* ---------- BARRA INFERIOR MOVIL ---------- */
.tt-bm,
.tt-bm-buscar{display:none}

@media (max-width:767px){
  /* Reserva el alto de la barra para que no tape el pie ni el ultimo boton. */
  body.tt-con-barra{padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px))}

  .tt-bm{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:var(--z-flotante);
    background:rgba(18,20,24,.97);border-top:1px solid var(--tt-linea);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  }
  .tt-bm-lista{display:grid;grid-template-columns:repeat(5,1fr)}
  .tt-bm-link{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    width:100%;min-height:64px;padding:var(--s-2) 0;
    color:var(--tt-texto-2);font-size:var(--fs-micro);font-weight:600;
  }
  .tt-bm-link .tt-icono{width:24px;height:24px}
  .tt-bm-link.is-activo{color:var(--tt-azul-claro)}
  .tt-bm-icono{position:relative;display:inline-flex}
  .tt-bm-num{
    position:absolute;top:-6px;right:-10px;min-width:18px;height:18px;padding-inline:4px;
    display:grid;place-items:center;border-radius:var(--radio-pill);
    background:var(--tt-naranja);color:var(--tt-texto-inv);font-size:11px;font-weight:800;line-height:1;
  }
  .tt-bm-num.is-vacio{display:none}

  /* Hoja del buscador: sube desde la barra, sobre un fondo que oscurece. */
  .tt-bm-buscar{
    position:fixed;inset:0;z-index:var(--z-modal);
    display:flex;align-items:flex-end;background:rgba(0,0,0,.6);
  }
  .tt-bm-buscar[hidden]{display:none}
  .tt-bm-buscar-caja{
    display:flex;align-items:center;gap:var(--s-2);width:100%;
    padding:var(--s-4) var(--s-3) calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    background:var(--tt-carbon);border-top:1px solid var(--tt-linea);
  }
  .tt-bm-buscar-caja .tt-buscador{flex:1}
  .tt-bm-cerrar{
    flex:none;display:grid;place-items:center;width:44px;height:44px;
    border-radius:50%;color:var(--tt-texto-2);
  }
  .tt-bm-cerrar .tt-icono{width:22px;height:22px}

  /* Botones flotantes de WhatsApp de plugins comunes: se suben sobre la barra
     para que no queden tapados. */
  body.tt-con-barra .joinchat,
  body.tt-con-barra .qlwapp,
  body.tt-con-barra #ht-ctc-chat,
  body.tt-con-barra .wa__btn_popup{
    bottom:calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ---------- /COMPRA-A-CREDITO/ ---------- */
.tt-cc-hero{
  padding-block:var(--s-7) var(--s-6);
  background:
    radial-gradient(800px 420px at 80% 0%, rgba(11,124,237,.18), transparent 62%),
    var(--tt-negro);
}
.tt-cc-titulo{margin-top:var(--s-3);max-width:20ch}
.tt-cc-sub{margin-top:var(--s-4);max-width:60ch;color:var(--tt-texto-2);font-size:1.05rem}
.tt-cc-acciones{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}

.tt-cc-opciones{display:grid;gap:var(--s-4);margin-top:var(--s-5)}
.tt-cc-opcion{
  padding:var(--s-5);background:var(--tt-superficie);
  border:1px solid var(--tt-linea);border-radius:var(--radio);
}
.tt-cc-marca{
  display:inline-block;padding:var(--s-1) var(--s-4);border-radius:var(--radio-pill);
  background:#fff;color:var(--tt-texto-inv);font-weight:800;font-size:1.1rem;line-height:1.4;
}
.tt-cc-opcion h3{margin-top:var(--s-4)}
.tt-cc-opcion p{margin-top:var(--s-2);color:var(--tt-texto-2)}
.tt-cc-banda{background:var(--tt-carbon)}

.tt-cc-pasos{display:grid;gap:var(--s-4);margin-top:var(--s-5);counter-reset:paso}
.tt-cc-paso{
  position:relative;padding:var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 56px);
  background:var(--tt-superficie);border:1px solid var(--tt-linea);border-radius:var(--radio);
}
.tt-cc-paso-num{
  position:absolute;left:var(--s-4);top:var(--s-4);
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--tt-azul-btn);color:#fff;font-weight:800;
}
.tt-cc-paso h3{font-size:1.05rem}
.tt-cc-paso p{margin-top:var(--s-1);color:var(--tt-texto-2);font-size:var(--fs-small)}

.tt-cc-req{margin-top:var(--s-4);display:grid;gap:var(--s-3);max-width:60ch}
.tt-cc-req li{
  display:flex;gap:var(--s-3);align-items:flex-start;
}
.tt-cc-req li::before{
  content:"";flex:none;width:10px;height:10px;margin-top:.55em;border-radius:50%;background:var(--tt-naranja);
}
.tt-cc-nota{margin-top:var(--s-4);font-size:var(--fs-small);color:var(--tt-texto-2)}

.tt-cc-faq{margin-top:var(--s-5);display:grid;gap:var(--s-3);max-width:760px}
.tt-cc-faq details{background:var(--tt-superficie);border:1px solid var(--tt-linea);border-radius:var(--radio)}
.tt-cc-faq summary{cursor:pointer;padding:var(--s-4);font-weight:700;list-style:none}
.tt-cc-faq summary::-webkit-details-marker{display:none}
.tt-cc-faq summary::after{content:"+";float:right;color:var(--tt-azul-claro);font-weight:800}
.tt-cc-faq details[open] summary::after{content:"\2212"}
.tt-cc-faq details p{padding:0 var(--s-4) var(--s-4);color:var(--tt-texto-2)}

.tt-cc-cierre{
  display:flex;flex-direction:column;gap:var(--s-4);align-items:flex-start;
  padding:var(--s-5);background:var(--tt-superficie);border:1px solid var(--tt-linea);border-radius:var(--radio);
}

@media (min-width:768px){
  .tt-cc-opciones{grid-template-columns:repeat(2,1fr)}
  .tt-cc-pasos{grid-template-columns:repeat(2,1fr)}
  .tt-cc-cierre{flex-direction:row;align-items:center;justify-content:space-between;padding:var(--s-6)}
}
@media (min-width:1100px){
  .tt-cc-pasos{grid-template-columns:repeat(4,1fr)}
}