/* ==========================================================================
   TechSite - Sistema de diseño v148
   Dirección: negro y amarillo con ritmo oscuro/claro.
   Un solo amarillo, usado SOLO como fondo de acciones (texto siempre negro).
   Este archivo es la fuente de verdad: colores, tipografía, radios, botones.
   ========================================================================== */

@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ----- Color: superficies ----- */
  --ts-night:#0d0d0e;          /* lienzo oscuro principal */
  --ts-night-2:#151517;        /* banda oscura elevada */
  --ts-night-3:#1f1f22;        /* tarjeta sobre oscuro */
  --ts-night-line:#2c2c30;     /* bordes sobre oscuro */
  --ts-paper:#ffffff;
  --ts-fog:#f4f4f5;            /* banda clara de apoyo */
  --ts-line-light:#e4e4e7;

  /* ----- Color: marca ----- */
  --ts-yellow:#ffd500;         /* único amarillo del sitio */
  --ts-yellow-hover:#ffe14d;
  --ts-yellow-press:#f0c800;
  --ts-yellow-soft:rgba(255,213,0,.16);
  --ts-on-yellow:#0d0d0e;      /* texto sobre amarillo, siempre negro */
  --ts-accent-text:#7a5c00;     /* amarillo oscuro para texto/iconos sobre fondo claro */

  /* ----- Color: semántica ----- */
  --ts-success:#0f7a3d;
  --ts-success-soft:rgba(22,163,74,.12);
  --ts-whatsapp:#25d366;
  --ts-danger:#c62828;

  /* ----- Color: roles (tema claro) ----- */
  --ts-bg:var(--ts-paper);
  --ts-surface:var(--ts-paper);
  --ts-surface-2:var(--ts-fog);
  --ts-ink:#0d0d0e;
  --ts-muted:#5b5e66;
  --ts-line:var(--ts-line-light);
  --ts-focus:#0d0d0e;
  --ts-accent:var(--ts-yellow);        /* alias heredado */
  --ts-accent-ink:var(--ts-on-yellow); /* alias heredado */
  --ts-header-bg:rgba(13,13,14,.92);
  --ts-footer-bg:var(--ts-night);

  /* ----- Tipografía ----- */
  --ts-font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ts-fs-xs:.75rem;     /* 12 - mínimo absoluto */
  --ts-fs-sm:.8125rem;   /* 13 */
  --ts-fs-md:.875rem;      /* 14 - cuerpo */
  --ts-fs-lg:1rem;         /* 16 */
  --ts-fs-xl:1.125rem;     /* 18 */
  --ts-fs-2xl:1.375rem;    /* 22 */
  --ts-fs-3xl:clamp(1.25rem,1rem + .8vw,1.625rem);
  --ts-fs-4xl:clamp(1.5rem,1.1rem + 1.4vw,2.125rem);
  --ts-fs-display:clamp(1.875rem,1rem + 2.6vw,3rem);
  --ts-lh-tight:1.05;
  --ts-lh-snug:1.2;
  --ts-lh-body:1.55;
  --ts-track-tight:-.03em;
  --ts-track-snug:-.018em;
  --ts-track-caps:.08em;

  /* ----- Espaciado (escala de 4) ----- */
  --ts-s-1:.25rem;
  --ts-s-2:.5rem;
  --ts-s-3:.75rem;
  --ts-s-4:1rem;
  --ts-s-5:1.25rem;
  --ts-s-6:1.5rem;
  --ts-s-7:2rem;
  --ts-s-8:2.5rem;
  --ts-s-9:3.5rem;
  --ts-gutter:clamp(.75rem,.4rem + 1vw,1.25rem);
  --ts-shell:1320px;

  /* ----- Radios ----- */
  --ts-r-sm:8px;
  --ts-r-md:10px;
  --ts-r-lg:14px;
  --ts-r-xl:18px;
  --ts-r-pill:999px;

  /* ----- Elevación (casi plana: la jerarquía sale del color) ----- */
  --ts-shadow-1:0 1px 2px rgba(0,0,0,.05);
  --ts-shadow-2:0 12px 32px rgba(0,0,0,.10);

  /* ----- Movimiento ----- */
  --ts-ease-out:cubic-bezier(.23,1,.32,1);
  --ts-ease-in-out:cubic-bezier(.77,0,.175,1);
  --ts-ease-drawer:cubic-bezier(.32,.72,0,1);
  --ts-ease-pop:cubic-bezier(.34,1.56,.64,1);
  --ts-dur-1:140ms;
  --ts-dur-2:240ms;
  --ts-dur-3:420ms;

  --ts-header-h:56px;
  --ts-tap:36px;   /* alto de controles en escritorio; sube a 44px en pantallas táctiles */
  color-scheme:light;
}

:root[data-theme="dark"]{
  --ts-bg:var(--ts-night);
  --ts-surface:var(--ts-night-2);
  --ts-surface-2:var(--ts-night-3);
  --ts-ink:#f4f4f5;
  --ts-muted:#a1a1aa;
  --ts-line:var(--ts-night-line);
  --ts-focus:var(--ts-yellow);
  --ts-accent-text:var(--ts-yellow);
  --ts-header-bg:rgba(13,13,14,.94);
  --ts-footer-bg:#080809;
  --ts-shadow-1:none;
  --ts-shadow-2:0 12px 32px rgba(0,0,0,.5);
  color-scheme:dark;
}

/* ----- Base ----- */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--ts-font);
  font-size:var(--ts-fs-md);
  line-height:var(--ts-lh-body);
  color:var(--ts-ink);
  background:var(--ts-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{text-wrap:balance}
p{text-wrap:pretty}
::selection{background:var(--ts-yellow);color:var(--ts-on-yellow)}

/* Foco visible global: nunca se quita sin reemplazo. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ts-focus);
  outline-offset:2px;
  border-radius:var(--ts-r-sm);
}
.ts-on-dark :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible,
.ts-header :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible,
.ts-footer :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline-color:var(--ts-yellow);
}

/* Contenedor común */
.ts-shell{
  width:100%;
  max-width:var(--ts-shell);
  margin-inline:auto;
  padding-inline:var(--ts-gutter);
  box-sizing:border-box;
}

/* Superficies invertidas (siempre oscuras, también en modo claro) */
.ts-on-dark{
  background:var(--ts-night);
  color:#f4f4f5;
  --ts-ink:#f4f4f5;
  --ts-muted:#a1a1aa;
  --ts-line:var(--ts-night-line);
  --ts-focus:var(--ts-yellow);
}

/* ----- Botón (componente único) -----
   .ts-btn            base
   --primary          amarillo, texto negro (acción principal)
   --dark             negro, texto blanco
   --ghost            contorno
   Altura mínima táctil 44px. */
.ts-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:var(--ts-tap);
  padding:0 1rem;
  font:600 var(--ts-fs-sm)/1 var(--ts-font);
  letter-spacing:-.005em;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  border:1.5px solid transparent;
  border-radius:var(--ts-r-pill);
  transition:background-color var(--ts-dur-2) var(--ts-ease-out),
             color var(--ts-dur-2) var(--ts-ease-out),
             border-color var(--ts-dur-2) var(--ts-ease-out),
             transform var(--ts-dur-1) var(--ts-ease-out);
  -webkit-tap-highlight-color:transparent;
}
.ts-btn:active{transform:scale(.97)}
.ts-btn svg{width:18px;height:18px;flex:none}
.ts-btn--primary{background:var(--ts-yellow);color:var(--ts-on-yellow)}
.ts-btn--primary:hover{background:var(--ts-yellow-hover)}
.ts-btn--primary:active{background:var(--ts-yellow-press)}
.ts-btn--dark{background:var(--ts-night);color:#fff}
.ts-btn--dark:hover{background:var(--ts-night-3)}
.ts-btn--ghost{background:transparent;color:var(--ts-ink);border-color:var(--ts-line)}
.ts-btn--ghost:hover{border-color:var(--ts-ink)}
.ts-on-dark .ts-btn--ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.ts-on-dark .ts-btn--ghost:hover{border-color:#fff}
.ts-btn--lg{min-height:42px;padding:0 1.25rem;font-size:var(--ts-fs-md)}
.ts-btn--block{display:flex;width:100%}

/* Botón circular de icono (flechas de carrusel, cerrar, etc.) */
.ts-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--ts-tap);height:var(--ts-tap);padding:0;
  color:var(--ts-ink);
  background:var(--ts-surface);
  border:1.5px solid var(--ts-line);
  border-radius:50%;
  cursor:pointer;
  transition:border-color var(--ts-dur-2) var(--ts-ease-out),
             background-color var(--ts-dur-2) var(--ts-ease-out),
             opacity var(--ts-dur-2) var(--ts-ease-out),
             transform var(--ts-dur-1) var(--ts-ease-out);
}
.ts-icon-btn:hover:not(:disabled){border-color:var(--ts-ink)}
.ts-icon-btn:active:not(:disabled){transform:scale(.94)}
.ts-icon-btn:disabled{opacity:.35;cursor:default}
.ts-icon-btn svg{width:18px;height:18px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Etiqueta pequeña en mayúsculas (kicker). Mínimo 12px. */
.ts-kicker{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--ts-fs-xs);
  font-weight:600;
  letter-spacing:var(--ts-track-caps);
  text-transform:uppercase;
  color:var(--ts-muted);
}
.ts-kicker::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--ts-yellow);
}

/* Texto solo para lectores de pantalla */
.ts-sr-only{
  position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Reducir movimiento */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}

/* Pantallas táctiles: controles de 44px. */
@media (pointer:coarse){:root{--ts-tap:44px}}