/* =============================================================
   TECNET — PORTADA
   Mobile-first. Depende de tokens.css y base.css.
   ============================================================= */

/* ---------- HERO ---------- */
.tt-hero{
  position:relative;
  padding-block:var(--s-7) var(--s-6);
  background:
    radial-gradient(900px 500px at 78% 18%, rgba(11,124,237,.16), transparent 62%),
    radial-gradient(600px 420px at 12% 92%, rgba(230,105,3,.10), transparent 60%),
    var(--tt-negro);
  overflow:hidden;
}
.tt-hero-inner{display:grid;gap:var(--s-6)}

.tt-hero-badge{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-1) var(--s-3);
  border:1px solid var(--tt-linea);border-radius:var(--radio-pill);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tt-texto-2);
}
.tt-hero-punto{
  width:7px;height:7px;border-radius:50%;background:var(--tt-naranja);
  box-shadow:0 0 0 4px rgba(230,105,3,.18);
}

.tt-hero-titulo{margin-top:var(--s-4);display:flex;flex-direction:column;line-height:.9}
.tt-hero-linea{
  font-family:var(--tt-font-display);
  font-size:var(--fs-display);
  font-weight:800;letter-spacing:.005em;text-transform:uppercase;
  color:var(--tt-texto);
}
/* Una sola palabra en naranja: la que dice el negocio. El resto del titular
   en blanco, para que el acento tenga algo que destacar sobre. */
.tt-hero-linea--acento{color:var(--tt-naranja)}

.tt-hero-tagline{
  margin-top:var(--s-4);
  font-size:var(--fs-small);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tt-texto-2);
}
.tt-hero-desc{margin-top:var(--s-4);color:var(--tt-texto-2);font-size:1.05rem}
.tt-hero-desc strong{color:var(--tt-texto)}

.tt-hero-acciones{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-5)}
.tt-hero-chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}

/* ---------- VIDEO DEL HERO ---------- */
.tt-hero-video{display:flex;flex-direction:column;align-items:center;gap:var(--s-3)}

/* =============================================================
   TELÉFONO DEL HERO
   Marco de móvil con el reel dentro y controles propios.
   ============================================================= */

/* Ancho ajustado al teléfono, no al contenedor: así las insignias, que se
   posicionan contra este elemento, caen pegadas al aparato y no en la esquina
   de la columna. */
.tt-telefono{
  position:relative;
  width:fit-content;
  margin-inline:auto;
  padding-block:var(--s-5);
}

/* Resplandor detrás del aparato. Da profundidad sin recurrir a una sombra
   dura, que sobre negro se ve sucia. */
.tt-telefono-resplandor{
  position:absolute;top:50%;left:50%;
  width:min(420px,90%);aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(11,124,237,.30) 0%, rgba(230,105,3,.10) 45%, transparent 70%);
  filter:blur(6px);
  pointer-events:none;
}

.tt-telefono-marco{
  position:relative;z-index:1;
  width:min(300px,78vw);
  aspect-ratio:9/19;                 /* proporción de un móvil actual */
  padding:9px;
  border-radius:38px;
  background:linear-gradient(160deg,#2B3038 0%,#12141A 40%,#2B3038 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 28px 60px rgba(0,0,0,.6);
  animation:tt-flota 7s ease-in-out infinite;
}
@keyframes tt-flota{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.tt-telefono-pantalla{
  position:relative;overflow:hidden;
  width:100%;height:100%;
  border-radius:30px;
  background:var(--tt-negro);
}
/* La muesca superior. Es lo que hace que se lea como un teléfono y no como
   un rectángulo redondeado cualquiera. */
.tt-telefono-pantalla::before{
  content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:76px;height:20px;border-radius:12px;
  background:#0A0B0D;z-index:3;
}

.tt-reel-video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .28s var(--ease);
}
.tt-reel-video.is-cambiando{opacity:0}

/* ---------- BADGES ---------- */
.tt-telefono-seguir{
  position:absolute;top:0;right:-10px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:var(--s-2) var(--s-3);
  border-radius:var(--radio-pill);
  background:var(--tt-naranja);color:var(--tt-texto-inv);
  font-size:var(--fs-micro);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 8px 24px rgba(230,105,3,.35);
  animation:tt-latido 2.6s ease-in-out infinite;
}
.tt-telefono-seguir-icono{font-size:.7em}
@keyframes tt-latido{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}

.tt-telefono-seguidores{
  position:absolute;bottom:0;left:-10px;z-index:2;
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-2) var(--s-3);
  border-radius:var(--radio-pill);
  background:rgba(18,20,24,.92);border:1px solid var(--tt-linea);
  font-size:var(--fs-micro);font-weight:700;color:var(--tt-texto);
  backdrop-filter:blur(6px);
}
.tt-telefono-punto{
  width:7px;height:7px;border-radius:50%;background:var(--tt-error);
  animation:tt-parpadeo 1.8s ease-in-out infinite;
}
@keyframes tt-parpadeo{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- CONTROLES ----------
   Aparecen sobre el video, abajo. El botón de sonido es el importante: el
   autoplay obliga a empezar en silencio, así que sin este botón el visitante
   no tiene forma de oír nada. */
.tt-telefono-controles{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;align-items:center;gap:var(--s-2);
  padding:var(--s-3) var(--s-3) var(--s-4);
  background:linear-gradient(to top, rgba(0,0,0,.78), transparent);
  color:#fff;
}
.tt-ctrl{
  width:32px;height:32px;flex-shrink:0;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  color:#fff;
  transition:background-color .15s var(--ease);
}
.tt-ctrl:hover{background:rgba(255,255,255,.26)}
.tt-ctrl svg{width:17px;height:17px}

/* Se enseña un icono u otro según el estado, sin duplicar botones. */
.tt-ico-play{display:none}
[data-estado="pausado"] .tt-ico-play{display:block}
[data-estado="pausado"] .tt-ico-pausa{display:none}

.tt-ico-mudo{display:none}
[aria-pressed="true"] .tt-ico-mudo{display:block}
[aria-pressed="true"] .tt-ico-ondas{display:none}

.tt-ctrl-barra{
  flex:1;height:3px;border-radius:2px;
  background:rgba(255,255,255,.25);overflow:hidden;
}
.tt-ctrl-progreso{
  display:block;height:100%;width:0;
  background:var(--tt-naranja);
  transition:width .2s linear;
}
.tt-ctrl-tiempo{
  flex-shrink:0;
  font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.85);
}

/* ---------- INDICADOR DE CLIP ---------- */
.tt-reel-puntos{
  position:absolute;left:0;right:0;bottom:52px;z-index:4;
  display:flex;justify-content:center;gap:6px;
}
.tt-reel-punto{
  width:20px;height:3px;border-radius:2px;
  background:rgba(242,244,247,.32);
  transition:background-color .3s var(--ease);
}
.tt-reel-punto.is-activo{background:var(--tt-naranja)}

/* ---------- HUECO SIN VIDEO ---------- */
.tt-video-hueco{
  display:grid;place-items:center;
  color:var(--tt-texto-2);text-align:center;padding:var(--s-4);
}
.tt-video-hueco p{max-width:22ch}

.tt-hero-social{font-size:var(--fs-small);font-weight:600;color:var(--tt-azul-claro)}
.tt-hero-social:hover{text-decoration:underline}

@media (min-width:900px){
  .tt-hero{padding-block:var(--s-8)}
  .tt-hero-inner{grid-template-columns:1.15fr .85fr;align-items:center;gap:var(--s-7)}
  
}

/* ---------- MARQUEE ---------- */
.tt-marquee{
  border-block:1px solid var(--tt-linea);
  background:var(--tt-carbon);
  overflow:hidden;padding-block:var(--s-3);
}
.tt-marquee-pista{
  display:flex;gap:var(--s-6);width:max-content;
  animation:tt-desliza 38s linear infinite;
}
.tt-marquee-item{
  font-size:var(--fs-small);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tt-texto-2);white-space:nowrap;
}
.tt-marquee-item::after{content:"\00b7";margin-left:var(--s-6);color:var(--tt-naranja)}
@keyframes tt-desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- SECCIONES ---------- */
.tt-seccion-header{max-width:60ch;margin-bottom:var(--s-6)}

/* ---------- CATEGORIAS ---------- */
.tt-categorias-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
.tt-categoria-link{
  display:flex;flex-direction:column;gap:var(--s-1);
  padding:var(--s-4);height:100%;
  background:var(--tt-superficie);border:1px solid var(--tt-linea);border-radius:var(--radio);
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}
.tt-categoria-link:hover{border-color:var(--tt-azul);transform:translateY(-2px)}
.tt-categoria-icono{font-size:1.75rem}
.tt-categoria-nombre{font-weight:700}
.tt-categoria-num{font-size:var(--fs-small);color:var(--tt-texto-2)}
@media (min-width:768px){.tt-categorias-grid{grid-template-columns:repeat(3,1fr);gap:var(--s-4)}}

/* Las tarjetas de ensamble viven en ensambles.css: las comparten esta
   portada y la pagina /ensambles/, y duplicarlas garantizaba que una de
   las dos se quedara sin el badge de agotado o sin las chips. */

/* ---------- BENEFICIOS ---------- */
.tt-beneficios-grid{display:grid;gap:var(--s-4)}
.tt-beneficio{
  padding:var(--s-4);
  background:var(--tt-superficie);border:1px solid var(--tt-linea);border-radius:var(--radio);
}
.tt-beneficio-icono{font-size:1.75rem}
.tt-beneficio-titulo{margin-block:var(--s-2)}
.tt-beneficio-texto{color:var(--tt-texto-2);font-size:var(--fs-small)}
@media (min-width:640px){.tt-beneficios-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.tt-beneficios-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- SERVICIO TECNICO ----------
   Banda propia, no "otra seccion mas". Fondo con la diagonal del logo y borde
   naranja arriba para separarla visualmente del resto de la pagina. */
.tt-servicios{
  position:relative;
  padding-block:var(--s-8);
  border-top:2px solid var(--tt-naranja);
  background:
    linear-gradient(115deg, rgba(230,105,3,.10) 0%, transparent 45%),
    var(--tt-carbon);
}

.tt-servicios-cabecera{
  display:flex;flex-direction:column;gap:var(--s-4);
  margin-bottom:var(--s-6);
}
.tt-servicios-intro{max-width:56ch}
.tt-servicios-titulo{
  font-family:var(--tt-font-display);
  font-size:clamp(2.25rem,6vw,3.75rem);
  text-transform:uppercase;letter-spacing:.01em;line-height:.95;
  margin-top:var(--s-2);
}
.tt-servicios-sub{margin-top:var(--s-3);color:var(--tt-texto-2);font-size:1.05rem}
.tt-servicios-cta{align-self:flex-start}

.tt-servicios-grid{display:grid;gap:var(--s-4);counter-reset:servicio}
.tt-servicio{
  position:relative;padding:var(--s-5) var(--s-4) var(--s-4);
  background:var(--tt-negro);
  border:1px solid var(--tt-linea);
  border-radius:var(--radio);
  transition:border-color .2s var(--ease)}
.tt-servicio:hover{border-color:var(--tt-naranja)}
.tt-servicio-num{
  position:absolute;top:var(--s-3);right:var(--s-4);
  font-family:var(--tt-font-display);font-size:2.75rem;font-weight:800;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(230,105,3,.45);
}
.tt-servicio-titulo{margin-bottom:var(--s-2);padding-right:var(--s-7)}
.tt-servicio-texto{color:var(--tt-texto-2);font-size:var(--fs-small)}

@media (min-width:640px){.tt-servicios-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:768px){
  .tt-servicios-cabecera{flex-direction:row;align-items:flex-end;justify-content:space-between}
  .tt-servicios-cta{flex-shrink:0}
}
@media (min-width:1000px){.tt-servicios-grid{grid-template-columns:repeat(4,1fr)}}

/* ---------- CTA COTIZADOR ---------- */
.tt-cta-inner{
  display:flex;flex-direction:column;gap:var(--s-4);align-items:flex-start;
  padding:var(--s-6) var(--s-4);
  border:1px solid var(--tt-linea);border-radius:var(--radio);
  background:linear-gradient(120deg, rgba(11,124,237,.12), rgba(230,105,3,.08));
}
@media (min-width:768px){
  .tt-cta-inner{flex-direction:row;align-items:center;justify-content:space-between;padding:var(--s-6)}
  .tt-cta-inner .tt-btn{flex-shrink:0}
}

/* ---------- REELS ---------- */
.tt-reels-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s-4);justify-items:center}
.tt-reels-cta{margin-top:var(--s-6);text-align:center}

/* ---------- FAQ ---------- */
.tt-faq-inner{max-width:760px}
.tt-faq-item{border-bottom:1px solid var(--tt-linea)}
.tt-faq-p{
  display:flex;justify-content:space-between;gap:var(--s-3);align-items:center;
  padding-block:var(--s-4);
  font-weight:700;cursor:pointer;list-style:none;
}
.tt-faq-p::-webkit-details-marker{display:none}
.tt-faq-p::after{content:"+";font-size:1.5rem;font-weight:400;color:var(--tt-naranja);flex-shrink:0}
.tt-faq-item[open] .tt-faq-p::after{content:"\2212"}
.tt-faq-r{padding-bottom:var(--s-4);color:var(--tt-texto-2)}
.tt-faq-cta{margin-top:var(--s-5);color:var(--tt-texto-2)}
.tt-faq-cta a{color:var(--tt-azul-claro);font-weight:600}
.tt-faq-cta a:hover{text-decoration:underline}

/* ---------- TRAYECTORIA Y RESEÑAS ----------
   Va pegada al hero a propósito: es la respuesta a "¿y estos quiénes
   son?", y esa pregunta se hace antes de mirar el primer precio. */
.tt-tray{padding-block:var(--s-7);background:var(--tt-carbon);border-block:1px solid var(--tt-linea)}
.tt-tray-inner{display:grid;gap:var(--s-6)}
@media (min-width:960px){
  .tt-tray-inner{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:center;gap:var(--s-7)}
}

.tt-tray-titulo{
  font-family:var(--tt-font-display);text-transform:uppercase;
  font-size:var(--fs-h2);line-height:1.08;margin-block:var(--s-2) var(--s-3);
  max-width:22ch;
}
.tt-tray-sub{color:var(--tt-texto-2);max-width:56ch;line-height:1.7}

.tt-tray-hitos{
  list-style:none;margin:var(--s-5) 0 0;padding:0;
  display:grid;gap:var(--s-4);grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:768px){.tt-tray-hitos{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tt-tray-hito{padding-top:var(--s-3);border-top:2px solid var(--tt-naranja)}
.tt-tray-hito-num{
  display:block;font-family:var(--tt-font-display);
  font-size:clamp(1.8rem,4.5vw,2.5rem);line-height:1;
}
.tt-tray-hito-texto{
  display:block;margin-top:var(--s-1);
  color:var(--tt-texto-2);font-size:var(--fs-small);line-height:1.4;
}

/* Tarjeta de reseñas. La cifra manda; las estrellas solo la ilustran. */
.tt-tray-google{
  padding:var(--s-5) var(--s-4);text-align:center;
  background:var(--tt-superficie);border:1px solid var(--tt-linea);
  border-radius:var(--radio);
}
.tt-tray-google-eyebrow{
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.1em;
  color:var(--tt-texto-2);
}
.tt-tray-google-nota{display:flex;align-items:baseline;justify-content:center;gap:var(--s-2);margin-top:var(--s-2)}
.tt-tray-google-num{font-family:var(--tt-font-display);font-size:3.5rem;line-height:1}
.tt-tray-google-sobre{color:var(--tt-texto-2);font-size:var(--fs-small)}

.tt-tray-google-estrellas{margin-top:var(--s-1);font-size:1.25rem;letter-spacing:.15em;color:var(--tt-linea)}
.tt-estrella.is-llena{color:var(--tt-alerta)}

.tt-tray-google-cuenta{color:var(--tt-texto-2);font-size:var(--fs-small);margin-block:var(--s-2) var(--s-4)}