/* =============================================================
   TECNET — BASE
   Reset, tipografia, botones y utilidades. Depende de tokens.css.
   ============================================================= */

*{margin:0;padding:0;box-sizing:border-box}

/* El scroll suave lo hace main.js con duracion FIJA. scroll-behavior:smooth
   escala la duracion con la distancia en Chrome, y en trayectos largos parece
   que el boton no responde. */
html{scroll-behavior:auto;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + var(--s-3))}

body{
  font-family:var(--tt-font);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--tt-texto);
  background:var(--tt-negro);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video,iframe{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}

h1,h2,h3,h4{line-height:1.15;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:700}
p{max-width:65ch}                  /* 65-75 caracteres por linea */

/* Foco visible en naranja: es el color con mas contraste sobre el fondo oscuro
   y no se confunde con ningun estado azul de la interfaz. */
:focus-visible{outline:3px solid var(--tt-naranja);outline-offset:3px;border-radius:var(--radio-sm)}

/* Enlace de salto para teclado y lector de pantalla. */
.tt-skip{
  position:absolute;left:-9999px;top:0;z-index:var(--z-modal);
  padding:var(--s-3) var(--s-4);background:var(--tt-naranja);color:var(--tt-texto-inv);font-weight:700;
}
.tt-skip:focus{left:var(--s-3);top:var(--s-3)}

.tt-sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- LAYOUT ---------- */
.tt-contenedor{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--s-3)}
@media (min-width:768px){.tt-contenedor{padding-inline:var(--s-4)}}

.tt-seccion{padding-block:var(--s-7)}
@media (min-width:768px){.tt-seccion{padding-block:var(--s-8)}}
.tt-seccion--alterna{background:var(--tt-carbon)}

/* ---------- TIPOGRAFIA DE SECCION ---------- */
.tt-eyebrow{
  display:inline-flex;align-items:center;gap:var(--s-2);
  font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tt-azul-claro);
}
.tt-seccion-titulo{margin-top:var(--s-2)}
.tt-seccion-sub{margin-top:var(--s-3);color:var(--tt-texto-2)}

/* ---------- BOTONES ----------
   Dos niveles y nada mas. Si hace falta un tercero, el problema es la pagina,
   no la paleta. Los colores de texto salen del analisis de contraste de
   tokens.css: el naranja lleva texto casi negro, el azul lleva blanco. */
.tt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;                              /* objetivo tactil comodo */
  padding:var(--s-3) var(--s-5);
  border-radius:var(--radio-pill);
  font-weight:700;line-height:1;text-align:center;
  transition:transform .18s var(--ease), background-color .18s var(--ease), box-shadow .18s var(--ease);
}
.tt-btn:active{transform:translateY(1px)}

.tt-btn--cta{background:var(--tt-naranja);color:var(--tt-texto-inv)}
.tt-btn--cta:hover{background:#FF7A0F}

.tt-btn--primario{background:var(--tt-azul-btn);color:#fff}
.tt-btn--primario:hover{background:var(--tt-azul);box-shadow:var(--brillo-azul)}

.tt-btn--fantasma{background:transparent;color:var(--tt-texto);box-shadow:inset 0 0 0 1px var(--tt-linea)}
.tt-btn--fantasma:hover{background:var(--tt-superficie);box-shadow:inset 0 0 0 1px var(--tt-azul)}

.tt-btn--bloque{width:100%}

/* ---------- TARJETA ---------- */
.tt-card{
  background:var(--tt-superficie);
  border:1px solid var(--tt-linea);
  border-radius:var(--radio);
  overflow:hidden;
  transition:border-color .2s var(--ease), transform .2s var(--ease);
}
.tt-card:hover{border-color:var(--tt-azul);transform:translateY(-2px)}

/* ---------- CHIP ---------- */
.tt-chip{
  display:inline-flex;align-items:center;gap:var(--s-2);
  padding:var(--s-1) var(--s-3);
  border-radius:var(--radio-pill);
  background:var(--tt-superficie);border:1px solid var(--tt-linea);
  font-size:var(--fs-small);color:var(--tt-texto-2);
}

/* ---------- FORMULARIOS ---------- */
.tt-campo{display:flex;flex-direction:column;gap:var(--s-2)}
.tt-campo label{font-size:var(--fs-small);font-weight:600}   /* label visible, no solo placeholder */
.tt-campo input,.tt-campo select,.tt-campo textarea{
  min-height:48px;padding:var(--s-3);
  background:var(--tt-superficie);color:var(--tt-texto);
  border:1px solid var(--tt-linea);border-radius:var(--radio-sm);
}
.tt-campo input::placeholder,.tt-campo textarea::placeholder{color:var(--tt-texto-2)}
.tt-campo input:focus,.tt-campo select:focus,.tt-campo textarea:focus{border-color:var(--tt-azul);outline-offset:1px}
.tt-campo-error{color:var(--tt-error);font-size:var(--fs-small)}

/* ---------- REVEAL AL HACER SCROLL ----------
   El estado inicial lo pone main.js con la clase .is-reveal, para que sin JS
   el contenido se vea igualmente en vez de quedar invisible. */
.is-reveal{opacity:0;transform:translateY(16px)}
.is-reveal.is-visible{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}

/* ---------- ICONOS ----------
   Trazo, no emoji: se colorean con la marca y se ven igual en todos los
   sistemas. Heredan el color con currentColor. */
.tt-icono{width:26px;height:26px;display:block}
.tt-categoria-icono,.tt-beneficio-icono{
  display:inline-flex;color:var(--tt-azul-claro);margin-bottom:var(--s-2);
}
.tt-categoria-link:hover .tt-categoria-icono{color:var(--tt-naranja)}
.tt-beneficio-icono{color:var(--tt-naranja)}

.tt-eyebrow--naranja{color:var(--tt-naranja)}
.tt-eyebrow .tt-icono{width:16px;height:16px}

/* ---------- LOGO ---------- */
/* El logo es muy apaisado (757x387 con los trazos finos del script): por
   debajo de 44px las letras "ec" y "et" se empastan y no se leen. */
.tt-logo{display:block;flex-shrink:0}
.tt-logo img{height:52px;width:auto;max-width:none}
@media (min-width:900px){.tt-logo img{height:62px}}

/* ---------- PAGINAS DE TEXTO ----------
   Nosotros, Contacto, politicas y terminos. La medida de lectura se corta
   en 68 caracteres: a lo ancho del contenedor (1200px) una linea de texto
   corrido queda de 150 caracteres y el ojo pierde el renglon al saltar. */
.tt-pagina-cabecera{padding-block:var(--s-7) var(--s-4)}
.tt-pagina-titulo{
  font-family:var(--tt-font-display);text-transform:uppercase;
  font-size:clamp(2rem,6vw,3.25rem);line-height:.95;letter-spacing:.01em;
}
.tt-pagina-portada{margin-bottom:var(--s-5)}
.tt-pagina-portada img{width:100%;height:auto;border-radius:var(--radio)}

.tt-pagina-contenido{padding-bottom:var(--s-8);max-width:68ch}
.tt-pagina-contenido>*+*{margin-top:var(--s-3)}
.tt-pagina-contenido h2{
  font-family:var(--tt-font-display);text-transform:uppercase;
  font-size:clamp(1.4rem,3.5vw,2rem);margin-top:var(--s-6);
}
.tt-pagina-contenido h3{font-size:1.15rem;margin-top:var(--s-5)}
.tt-pagina-contenido a{color:var(--tt-azul-claro);text-underline-offset:3px}
.tt-pagina-contenido ul,.tt-pagina-contenido ol{padding-left:var(--s-4)}
.tt-pagina-contenido li+li{margin-top:var(--s-1)}
.tt-pagina-contenido img{max-width:100%;height:auto;border-radius:var(--radio-sm)}
.tt-pagina-contenido blockquote{
  border-left:3px solid var(--tt-naranja);padding-left:var(--s-3);
  color:var(--tt-texto-2);font-style:italic;
}
.tt-pagina-contenido table{width:100%;border-collapse:collapse}
.tt-pagina-contenido th,.tt-pagina-contenido td{
  border:1px solid var(--tt-linea);padding:var(--s-2);text-align:left;
}
.tt-pagina-contenido th{background:var(--tt-superficie)}

/* ---------- PAGINAS LEGALES ---------- */
.tt-legal-vigencia{margin-top:var(--s-2);color:var(--tt-texto-2);font-size:var(--fs-small)}
.tt-legal-resumen{
  padding:var(--s-4);background:var(--tt-superficie);
  border:1px solid var(--tt-linea);border-radius:var(--radio-sm);
}
.tt-legal-resumen>*+*{margin-top:var(--s-2)}
.tt-legal-otros{margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--tt-linea)}
.tt-legal-otros h2{font-size:1.1rem;margin-top:0}

/* Casillas de autorizacion (checkout, registro, resenas). El enlace a la
   politica va subrayado: dentro de un texto legal tiene que verse que es
   un enlace sin depender del color. */
/* La casilla de terminos la pinta WooCommerce: se iguala a las propias para
   que las tres se lean como un mismo bloque y no como dos estilos. */
.tt-casilla-legal,
.woocommerce-terms-and-conditions-wrapper .validate-required{font-size:var(--fs-small);color:var(--tt-texto-2)}
.tt-casilla-legal label,
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox{
  display:flex;gap:var(--s-2);align-items:flex-start;cursor:pointer;font-weight:400;line-height:1.5;
}
.tt-casilla-legal input[type="checkbox"],
.woocommerce-terms-and-conditions-wrapper input[type="checkbox"]{width:20px;height:20px;flex-shrink:0;margin:2px 0 0;accent-color:var(--tt-naranja)}
.tt-casilla-legal a,
.woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox a{color:var(--tt-azul-claro);text-decoration:underline;text-underline-offset:3px}
.tt-casilla-legal abbr.required,
.woocommerce-terms-and-conditions-wrapper abbr.required{text-decoration:none;color:var(--tt-naranja)}

/* Entradas del blog, si algun dia se usan. */
.tt-entrada+.tt-entrada{margin-top:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--tt-linea)}
.tt-entrada-titulo{font-family:var(--tt-font-display);text-transform:uppercase;font-size:1.6rem}
.tt-entrada-contenido{max-width:68ch}
.tt-entrada-contenido>*+*{margin-top:var(--s-3)}

/* ---------- 404 ----------
   Quien cae aqui venia a comprar. Se le dan salidas, no disculpas. */
.tt-404{text-align:center;max-width:720px}
.tt-404-buscador{margin-block:var(--s-5);display:flex;justify-content:center}
.tt-404-buscador form{width:min(420px,100%)}
.tt-404-acciones{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center}
.tt-404-categorias{
  display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center;
  margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--tt-linea);
}
.tt-404-categorias a{text-decoration:none}

.tt-paginas-internas{display:flex;gap:var(--s-2);margin-top:var(--s-5)}