/* =============================================================
   TECNET — SERVICIO TÉCNICO Y NOSOTROS

   Las dos páginas que sostienen la mitad del negocio que no pasa por
   el carrito: quien llega con un equipo dañado y quien quiere saber
   a quién le está comprando antes de pagar.
   ============================================================= */

/* =============================================================
   SERVICIO TÉCNICO
   ============================================================= */

.tt-st-hero{
  padding-block:var(--s-7);
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(230,105,3,.13), transparent 60%),
    var(--tt-carbon);
  border-bottom:1px solid var(--tt-linea);
}
.tt-st-hero-inner{display:grid;gap:var(--s-6)}
@media (min-width:960px){
  .tt-st-hero-inner{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start;gap:var(--s-7)}
}

.tt-st-titulo{
  font-family:var(--tt-font-display);text-transform:uppercase;
  font-size:var(--fs-h1);line-height:1.05;margin-block:var(--s-3);
}
.tt-st-sub{color:var(--tt-texto-2);font-size:1.05rem;max-width:56ch}

/* Las tres promesas son la respuesta a los tres miedos de quien deja
   un equipo: que le cobren de más, que se lo dañen y que no aparezca
   nadie después. Van arriba, no al pie. */
.tt-st-promesas{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:var(--s-2)}
.tt-st-promesas li{
  position:relative;padding-left:var(--s-5);
  color:var(--tt-texto);font-weight:600;font-size:var(--fs-small);
}
.tt-st-promesas li::before{
  content:'';position:absolute;left:0;top:.35em;
  width:16px;height:9px;
  border-left:2px solid var(--tt-naranja);border-bottom:2px solid var(--tt-naranja);
  transform:rotate(-45deg);
}

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

/* Ficha del local. Es un dato de negocio, no decoración: mucha gente
   entra solo a ver si queda cerca y a qué hora abren. */
.tt-st-ficha{
  background:var(--tt-superficie);border:1px solid var(--tt-linea);
  border-radius:var(--radio);padding:var(--s-4);
}
.tt-st-ficha-titulo{
  font-family:var(--tt-font-display);text-transform:uppercase;
  font-size:1.35rem;margin-bottom:var(--s-3);
}
.tt-st-ficha-datos{display:grid;gap:var(--s-1);margin:0}
.tt-st-ficha-datos dt{
  color:var(--tt-texto-2);font-size:var(--fs-micro);
  text-transform:uppercase;letter-spacing:.08em;margin-top:var(--s-3);
}
.tt-st-ficha-datos dt:first-child{margin-top:0}
.tt-st-ficha-datos dd{margin:0;line-height:1.5}
.tt-st-ficha-datos a{color:var(--tt-azul-claro)}
.tt-st-ficha-nota{color:var(--tt-texto-2);font-size:var(--fs-small)}

/* ---------- SERVICIOS ---------- */
.tt-st-servicios{
  list-style:none;margin:var(--s-5) 0 0;padding:0;
  display:grid;gap:var(--s-4);
}
@media (min-width:640px){.tt-st-servicios{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.tt-st-servicios{grid-template-columns:repeat(3,minmax(0,1fr))}}

.tt-st-servicio{
  background:var(--tt-carbon);border:1px solid var(--tt-linea);
  border-radius:var(--radio);padding:var(--s-4);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.tt-st-servicio:hover{border-color:var(--tt-azul);background:var(--tt-superficie)}
.tt-st-servicio-icono{
  display:grid;place-items:center;width:44px;height:44px;
  border-radius:var(--radio-sm);
  background:rgba(11,124,237,.12);color:var(--tt-azul-claro);
}
.tt-st-servicio-icono svg{width:22px;height:22px}
.tt-st-servicio-titulo{font-size:var(--fs-h3);margin-block:var(--s-3) var(--s-2)}
.tt-st-servicio-texto{color:var(--tt-texto-2);font-size:var(--fs-small);line-height:1.6}
.tt-st-servicio-puntos{
  list-style:none;margin:var(--s-3) 0 0;padding:var(--s-3) 0 0;
  border-top:1px solid var(--tt-linea);
  display:grid;gap:var(--s-2);
}
.tt-st-servicio-puntos li{
  position:relative;padding-left:var(--s-3);
  color:var(--tt-texto-2);font-size:var(--fs-small);
}
.tt-st-servicio-puntos li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:5px;height:5px;border-radius:50%;background:var(--tt-naranja);
}

/* ---------- CÓMO FUNCIONA ---------- */
.tt-st-pasos-banda{background:var(--tt-carbon);border-block:1px solid var(--tt-linea)}
.tt-st-pasos{
  list-style:none;margin:var(--s-5) 0 0;padding:0;
  display:grid;gap:var(--s-4);counter-reset:paso;
}
@media (min-width:640px){.tt-st-pasos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.tt-st-pasos{grid-template-columns:repeat(4,minmax(0,1fr))}}

.tt-st-paso{padding-top:var(--s-4);border-top:2px solid var(--tt-linea)}
.tt-st-paso-num{
  display:block;font-family:var(--tt-font-display);
  font-size:2.25rem;line-height:1;color:var(--tt-naranja);
}
.tt-st-paso-titulo{font-size:var(--fs-h3);margin-block:var(--s-2)}
.tt-st-paso-texto{color:var(--tt-texto-2);font-size:var(--fs-small);line-height:1.6}

/* ---------- FAQ ----------
   <details> nativo: se abre sin JavaScript, el navegador ya lo hace
   accesible con teclado y Google lo lee cerrado igual que abierto. */
.tt-faq-lista{display:grid;gap:var(--s-2);margin-top:var(--s-5);max-width:76ch}
.tt-faq-item{
  background:var(--tt-carbon);border:1px solid var(--tt-linea);
  border-radius:var(--radio-sm);
}
.tt-faq-p{
  cursor:pointer;list-style:none;
  padding:var(--s-3) var(--s-4);
  font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
}
.tt-faq-p::-webkit-details-marker{display:none}
.tt-faq-p::after{
  content:'';flex-shrink:0;
  width:9px;height:9px;
  border-right:2px solid var(--tt-texto-2);border-bottom:2px solid var(--tt-texto-2);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s var(--ease);
}
.tt-faq-item[open] .tt-faq-p::after{transform:rotate(225deg) translateY(-2px)}
.tt-faq-item[open] .tt-faq-p{color:var(--tt-azul-claro)}
.tt-faq-p:focus-visible{outline:2px solid var(--tt-azul);outline-offset:-2px}
.tt-faq-r{
  margin:0;padding:0 var(--s-4) var(--s-4);
  color:var(--tt-texto-2);line-height:1.7;
}

/* ---------- CIERRE ---------- */
.tt-st-cierre{
  padding-block:var(--s-7);text-align:center;
  background:
    radial-gradient(70% 140% at 50% 100%, rgba(11,124,237,.16), transparent 65%),
    var(--tt-carbon);
  border-top:1px solid var(--tt-linea);
}
.tt-st-cierre-titulo{
  font-family:var(--tt-font-display);text-transform:uppercase;
  font-size:var(--fs-h2);max-width:20ch;margin-inline:auto;
}
.tt-st-cierre-texto{color:var(--tt-texto-2);margin-block:var(--s-3) var(--s-5)}

/* =============================================================
   NOSOTROS + CONTACTO
   ============================================================= */

.tt-nos-hero{
  padding-block:var(--s-7);
  background:
    radial-gradient(85% 120% at 85% 0%, rgba(11,124,237,.14), transparent 60%),
    var(--tt-carbon);
  border-bottom:1px solid var(--tt-linea);
}
.tt-nos-titulo{
  font-family:var(--tt-font-display);text-transform:uppercase;
  font-size:var(--fs-h1);line-height:1.05;
  margin-block:var(--s-3);max-width:20ch;
}
.tt-nos-texto{max-width:62ch;display:grid;gap:var(--s-3)}
.tt-nos-texto p{color:var(--tt-texto-2);line-height:1.75}

/* Las cifras son las del negocio, no adornos: cada una responde a
   "¿por qué te compro a ti y no en un marketplace?". */
.tt-nos-cifras{
  list-style:none;margin:var(--s-6) 0 0;padding:0;
  display:grid;gap:var(--s-4);grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:768px){.tt-nos-cifras{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tt-nos-cifra{padding-top:var(--s-3);border-top:2px solid var(--tt-naranja)}
.tt-nos-cifra-num{
  display:block;font-family:var(--tt-font-display);
  font-size:clamp(1.9rem,5vw,2.75rem);line-height:1;
}
.tt-nos-cifra-texto{
  display:block;margin-top:var(--s-2);
  color:var(--tt-texto-2);font-size:var(--fs-small);line-height:1.4;
}

/* ---------- QUÉ HACEMOS ---------- */
.tt-nos-banda{background:var(--tt-negro)}
.tt-nos-que{
  list-style:none;margin:var(--s-5) 0 0;padding:0;
  display:grid;gap:var(--s-4);
}
@media (min-width:768px){.tt-nos-que{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tt-nos-que li{
  background:var(--tt-carbon);border:1px solid var(--tt-linea);
  border-radius:var(--radio);padding:var(--s-4);
}
.tt-nos-que h3{font-size:var(--fs-h3);margin-bottom:var(--s-2)}
.tt-nos-que p{color:var(--tt-texto-2);font-size:var(--fs-small);line-height:1.6}
.tt-nos-que a{
  display:inline-block;margin-top:var(--s-3);
  color:var(--tt-azul-claro);font-weight:600;font-size:var(--fs-small);
}
.tt-nos-que a::after{content:' →'}

/* ---------- CONTACTO ---------- */
.tt-nos-canales{
  list-style:none;margin:var(--s-5) 0 0;padding:0;
  display:grid;gap:var(--s-4);
}
@media (min-width:768px){.tt-nos-canales{grid-template-columns:repeat(3,minmax(0,1fr))}}

.tt-nos-canal{
  background:var(--tt-carbon);border:1px solid var(--tt-linea);
  border-radius:var(--radio);padding:var(--s-4);
}
.tt-nos-canal-icono{
  display:grid;place-items:center;width:44px;height:44px;
  border-radius:var(--radio-sm);
  background:rgba(230,105,3,.12);color:var(--tt-naranja);
}
.tt-nos-canal-icono svg{width:22px;height:22px}
.tt-nos-canal-titulo{
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.08em;
  color:var(--tt-texto-2);margin-block:var(--s-3) var(--s-1);
}
.tt-nos-canal-valor{
  display:block;font-weight:700;font-size:1.05rem;line-height:1.4;
  color:var(--tt-texto);word-break:break-word;
}
.tt-nos-canal-valor:hover{color:var(--tt-azul-claro)}
.tt-nos-canal-nota{color:var(--tt-texto-2);font-size:var(--fs-small);margin-top:var(--s-2)}

/* Horario y mapa van lado a lado: son la misma pregunta -- "¿dónde
   quedan y a qué hora abren?" -- y separarlas obliga a hacer scroll
   entre la respuesta y la otra mitad de la respuesta. */
.tt-nos-ubicacion{display:grid;gap:var(--s-4);margin-top:var(--s-5)}
@media (min-width:900px){
  .tt-nos-ubicacion{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:stretch}
}

.tt-nos-horario{
  padding:var(--s-4);
  background:var(--tt-superficie);border:1px solid var(--tt-linea);
  border-radius:var(--radio);
}
.tt-nos-horario-titulo{font-size:var(--fs-h3);margin-bottom:var(--s-3)}
.tt-nos-horario-lista{margin:0;display:grid;gap:var(--s-2)}
@media (min-width:560px){
  .tt-nos-horario-lista{
    grid-template-columns:auto 1fr;column-gap:var(--s-4);align-items:baseline;
  }
}
.tt-nos-horario-lista dt{font-weight:600;white-space:nowrap}
.tt-nos-horario-lista dd{margin:0;color:var(--tt-texto-2)}

.tt-nos-comollegar{
  margin-top:var(--s-4);padding-top:var(--s-4);
  border-top:1px solid var(--tt-linea);
  color:var(--tt-texto-2);font-size:var(--fs-small);line-height:1.6;
}
.tt-nos-comollegar-btn{margin-top:var(--s-3)}

/* El mapa llega de Google con fondo claro. Sin el filtro es un
   rectángulo blanco de 400 px en mitad de una página negra: se lleva
   toda la atención y deja el resto de la sección en segundo plano.
   El filtro lo oscurece sin tocar la legibilidad de las calles. */
.tt-nos-mapa{
  border:1px solid var(--tt-linea);border-radius:var(--radio);
  overflow:hidden;min-height:320px;background:var(--tt-superficie);
}
.tt-nos-mapa iframe{
  display:block;width:100%;height:100%;min-height:320px;border:0;
  filter:invert(90%) hue-rotate(180deg) contrast(.9) brightness(.95);
}

/* ---------- CONSULTA DE ORDEN ----------
   Tarjeta destacada: borde y brillo naranja suave, el boton CTA a la derecha
   en escritorio y a todo el ancho en celular. */
.tt-st-consulta{
  display:grid;gap:var(--s-4);align-items:center;
  background:var(--tt-superficie);border:1px solid var(--tt-linea);
  border-left:4px solid var(--tt-naranja);border-radius:var(--radio);
  padding:var(--s-5) var(--s-4);
}
.tt-st-consulta-titulo{
  font-family:var(--tt-font-display);text-transform:uppercase;
  font-size:clamp(1.4rem,4vw,2rem);line-height:1.1;margin:0;
}
.tt-st-consulta-btn{justify-content:center;width:100%}
@media (min-width:768px){
  .tt-st-consulta{grid-template-columns:minmax(0,1fr) auto;gap:var(--s-6);padding:var(--s-5)}
  .tt-st-consulta-btn{width:auto;white-space:nowrap}
}