/* =========================================================================
   Tornillin · Componentes base
   Requiere tokens.css cargado antes.
   Convenciones:
     .tor-*  → componentes de marca Tornillin
     .is-*   → estados / modificadores
     .has-*  → contiene un elemento decorativo
   ========================================================================= */

/* ------- Reset ligero ------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

/* =========================================================
   TIPOGRAFÍA — clases utilitarias
   ========================================================= */
.tor-display-xl {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.tor-display-lg {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.tor-display-md {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-md);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}
.tor-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
}
.tor-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}
.tor-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
.tor-eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-allcaps);
  text-transform: uppercase;
  color: var(--tor-red-500);
}
.tor-kicker {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--ls-allcaps);
  text-transform: uppercase;
  color: var(--tor-steel-400);
}
.tor-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.tor-body    { font-size: var(--fs-body);    line-height: var(--lh-base); }
.tor-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-base); color: var(--tor-muted); }
.tor-caption { font-size: var(--fs-caption); color: var(--tor-muted); }
.tor-mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.tor-text-red    { color: var(--tor-red-500); }
.tor-text-steel  { color: var(--tor-steel-400); }
.tor-text-muted  { color: var(--tor-muted); }
.tor-text-ink    { color: var(--tor-ink); }
.tor-text-white  { color: #fff; }

/* =========================================================
   LAYOUT
   ========================================================= */
.tor-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.tor-container-narrow { max-width: var(--container-narrow); }
.tor-container-wide   { max-width: var(--container-wide); }

.tor-section {
  padding-block: clamp(56px, 8vw, 120px);
}
.tor-section.is-tight { padding-block: clamp(40px, 5vw, 80px); }

/* Patrón hexagonal de fondo */
.tor-bg-hex {
  background:
    radial-gradient(circle at 0 0, var(--tor-surface-3) 0, var(--tor-surface-3) 36px, transparent 36px) 0 0/72px 72px,
    radial-gradient(circle at 36px 36px, var(--tor-surface-3) 0, var(--tor-surface-3) 36px, transparent 36px) 0 0/72px 72px,
    var(--tor-surface);
  position: relative;
  isolation: isolate;
}
.tor-bg-hex::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(60deg, transparent 0 33%, var(--tor-border-soft) 33% 34%, transparent 34%),
    linear-gradient(-60deg, transparent 0 33%, var(--tor-border-soft) 33% 34%, transparent 34%),
    linear-gradient(0deg, transparent 0 49.5%, var(--tor-border-soft) 49.5% 50.5%, transparent 50.5%);
  background-size: 56px 32px;
  opacity: .55;
  z-index: -1;
  pointer-events: none;
}
.tor-bg-soft { background: var(--tor-surface-2); }
.tor-bg-dark { background: var(--tor-steel-900); color: #fff; }

/* =========================================================
   NAVEGACIÓN
   ========================================================= */
.tor-nav {
  background: var(--tor-surface);
  border-bottom: 1px solid var(--tor-border);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(10px);
  background-color: color-mix(in oklab, var(--tor-surface) 92%, transparent);
}
.tor-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.tor-nav__logo { height: 40px; width: auto; }
.tor-nav__links { display: flex; gap: var(--space-6); list-style: none; padding: 0; margin: 0; }
.tor-nav__links a {
  text-decoration: none;
  color: var(--tor-ink);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  padding: 8px 4px;
  position: relative;
  transition: color var(--t-fast) var(--ease-out);
}
.tor-nav__links a:hover { color: var(--tor-red-500); }
.tor-nav__links a.is-active { color: var(--tor-red-500); font-weight: var(--fw-bold); }
.tor-nav__links a.is-active::after {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: 0;
  height: 3px; background: var(--tor-red-500); border-radius: 2px;
}

/* =========================================================
   BOTONES
   ========================================================= */
.tor-btn {
  --btn-bg: var(--tor-red-500);
  --btn-fg: #fff;
  --btn-bg-hover: var(--tor-red-600);
  --btn-border: transparent;

  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.tor-btn:hover { background: var(--btn-bg-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.tor-btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.tor-btn:focus-visible { outline: 3px solid color-mix(in oklab, var(--btn-bg) 50%, white); outline-offset: 2px; }

.tor-btn--secondary {
  --btn-bg: var(--tor-steel-700);
  --btn-bg-hover: var(--tor-steel-900);
}
.tor-btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--tor-red-500);
  --btn-bg-hover: var(--tor-red-50);
  --btn-border: var(--tor-red-500);
  box-shadow: none;
}
.tor-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--tor-ink);
  --btn-bg-hover: var(--tor-surface-2);
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--fw-regular);
}
.tor-btn--lg  { padding: 18px 36px; font-size: var(--fs-body-lg); }
.tor-btn--sm  { padding: 10px 18px; font-size: var(--fs-body-sm); }
.tor-btn--block { display: flex; width: 100%; }

/* =========================================================
   RIBBON / BANNER — el elemento de marca distintivo
   Reproduce la cinta roja sheared del look & feel
   ========================================================= */
.tor-ribbon {
  display: inline-block;
  position: relative;
  background: var(--tor-red-500);
  color: #fff;
  padding: 10px 28px 10px 22px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body-lg);
  letter-spacing: var(--ls-allcaps);
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 16px 100%);
}
.tor-ribbon--lg {
  font-size: var(--fs-h2);
  padding: 16px 44px 16px 32px;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 100%, 24px 100%);
}
.tor-ribbon--dark { background: var(--tor-steel-900); }
.tor-ribbon--outline {
  background: transparent;
  color: var(--tor-red-500);
  border: 2px solid var(--tor-red-500);
}

/* Diagonal photo shear — recorta una foto con corte diagonal */
.tor-photo-shear {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 64px), 0 100%);
  overflow: hidden;
}
.tor-photo-shear--reverse {
  clip-path: polygon(0 64px, 100% 0, 100% 100%, 0 100%);
}

/* =========================================================
   CARDS
   ========================================================= */
.tor-card {
  background: var(--tor-surface);
  border: 1px solid var(--tor-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.tor-card:hover {
  border-color: var(--tor-red-200);
  box-shadow: var(--shadow-md);
}
.tor-card--lift  { box-shadow: var(--shadow-md); border-color: transparent; }
.tor-card--photo { padding: 0; overflow: hidden; }
.tor-card--photo .tor-card__body { padding: var(--space-6); }
.tor-card--photo img { width: 100%; height: 240px; object-fit: cover; }
.tor-card--soft  { background: var(--tor-surface-2); border: none; }

/* Card de categoría (residencial/comercial/industrial) */
.tor-card-service {
  background: var(--tor-surface);
  border: 1px solid var(--tor-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  position: relative;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-fast);
}
.tor-card-service:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tor-card-service__icon {
  width: 72px; height: 72px;
  display: grid; place-items: center;
  border-radius: var(--radius-lg);
  background: var(--tor-red-50);
  color: var(--tor-red-500);
}
.tor-card-service__icon.is-steel { background: var(--tor-steel-50); color: var(--tor-steel-700); }
.tor-card-service__icon.is-green { background: var(--tor-green-100); color: var(--tor-green-500); }
.tor-card-service__icon.is-amber { background: var(--tor-amber-100); color: #B07A1F; }
.tor-card-service__icon.is-blue  { background: var(--tor-blue-100);  color: var(--tor-blue-500); }
.tor-card-service h3 {
  margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: .02em;
}
.tor-card-service p { color: var(--tor-muted); margin: 0; }

/* Card de producto (catálogo) */
.tor-card-product {
  background: var(--tor-surface);
  border: 1px solid var(--tor-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base);
}
.tor-card-product:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.tor-card-product__media {
  aspect-ratio: 4/3;
  background: var(--tor-surface-2);
  position: relative;
  overflow: hidden;
}
.tor-card-product__media img { width: 100%; height: 100%; object-fit: cover; }
.tor-card-product__badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--tor-red-500); color: #fff;
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-allcaps); text-transform: uppercase;
}
.tor-card-product__body { padding: var(--space-4) var(--space-5) var(--space-5); }
.tor-card-product__code { font: var(--fs-caption)/1 var(--font-mono); color: var(--tor-muted); letter-spacing: .04em; }
.tor-card-product__title {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-h4); margin: 8px 0 4px; line-height: 1.2;
}
.tor-card-product__meta { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-3); }
.tor-card-product__price { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); color: var(--tor-ink); }
.tor-card-product__provider {
  font-size: var(--fs-micro); color: var(--tor-muted); letter-spacing: .04em; text-transform: uppercase;
}

/* =========================================================
   BADGES / PILLS / TAGS
   ========================================================= */
.tor-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-allcaps);
  text-transform: uppercase;
  background: var(--tor-steel-50);
  color: var(--tor-steel-700);
}
.tor-badge--red    { background: var(--tor-red-50);   color: var(--tor-red-600); }
.tor-badge--green  { background: var(--tor-green-100); color: #3F7019; }
.tor-badge--amber  { background: var(--tor-amber-100); color: #8A5F0E; }
.tor-badge--blue   { background: var(--tor-blue-100);  color: #1F4F87; }
.tor-badge--solid  { background: var(--tor-red-500);   color: #fff; }
.tor-badge--dark   { background: var(--tor-steel-900); color: #fff; }
.tor-badge--dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block;
}

/* =========================================================
   FORMULARIOS
   ========================================================= */
.tor-field { display: flex; flex-direction: column; gap: 6px; }
.tor-label {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  color: var(--tor-ink);
  letter-spacing: .01em;
}
.tor-input, .tor-textarea, .tor-select {
  font: inherit;
  color: var(--tor-ink);
  background: var(--tor-surface);
  border: 1.5px solid var(--tor-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
}
.tor-input::placeholder, .tor-textarea::placeholder { color: var(--tor-muted); }
.tor-input:focus, .tor-textarea:focus, .tor-select:focus {
  outline: none;
  border-color: var(--tor-red-500);
  box-shadow: 0 0 0 4px var(--tor-red-50);
}
.tor-textarea { min-height: 120px; resize: vertical; }
.tor-helper { font-size: var(--fs-caption); color: var(--tor-muted); }
.tor-input.is-error, .tor-textarea.is-error { border-color: var(--tor-danger); }

/* Checkbox / radio simples */
.tor-check {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-body-sm); color: var(--tor-ink);
  user-select: none;
}
.tor-check input { width: 18px; height: 18px; accent-color: var(--tor-red-500); }

/* =========================================================
   TABLAS
   ========================================================= */
.tor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
  background: var(--tor-surface);
  border: 1px solid var(--tor-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.tor-table thead {
  background: var(--tor-steel-900);
  color: #fff;
}
.tor-table th {
  text-align: left;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-allcaps);
  text-transform: uppercase;
  font-size: var(--fs-micro);
  padding: 14px 16px;
}
.tor-table td {
  padding: 14px 16px;
  border-top: 1px solid var(--tor-border);
  vertical-align: middle;
}
.tor-table tbody tr:hover { background: var(--tor-surface-2); }
.tor-table .is-mono { font-family: var(--font-mono); }

.tor-table--light thead {
  background: var(--tor-surface-2);
  color: var(--tor-ink);
}
.tor-table--light th {
  border-bottom: 1.5px solid var(--tor-steel-300);
}

/* =========================================================
   BANNERS / CAMPAÑAS
   ========================================================= */
.tor-banner-campaign {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--tor-surface-2);
  min-height: 320px;
  display: flex; align-items: center;
  padding: var(--space-12);
  isolation: isolate;
}
.tor-banner-campaign::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(28,28,31,.78) 0%, rgba(28,28,31,.42) 60%, transparent 100%);
  z-index: 1;
}
.tor-banner-campaign__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.tor-banner-campaign__content {
  position: relative; z-index: 2; color: #fff;
  max-width: 560px;
}
.tor-banner-campaign__content h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-md);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  margin: 0 0 var(--space-3);
}

/* =========================================================
   STAT — números grandes para landing/dashboards
   ========================================================= */
.tor-stat {
  display: flex; flex-direction: column; gap: 4px;
}
.tor-stat__num {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(40px, 4.5vw, 64px);
  color: var(--tor-red-500);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tor-stat__label { color: var(--tor-muted); font-size: var(--fs-body-sm); }

/* =========================================================
   FOOTER
   ========================================================= */
.tor-footer {
  background: var(--tor-steel-900);
  color: #fff;
  padding: var(--space-16) 0 var(--space-8);
}
.tor-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.tor-footer a:hover { color: #fff; }
.tor-footer h4 {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--ls-allcaps);
  font-size: var(--fs-caption); color: rgba(255,255,255,.6);
  margin: 0 0 var(--space-4);
}
.tor-footer__cols {
  display: grid; gap: var(--space-8);
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
@media (max-width: 820px) {
  .tor-footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .tor-footer__cols { grid-template-columns: 1fr; }
}
.tor-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  display: flex; justify-content: space-between; align-items: center;
  font-size: var(--fs-caption); color: rgba(255,255,255,.6);
}

/* =========================================================
   UTILIDADES rápidas
   ========================================================= */
.tor-grid    { display: grid; gap: var(--space-6); }
.tor-grid-2  { grid-template-columns: repeat(2, minmax(0,1fr)); }
.tor-grid-3  { grid-template-columns: repeat(3, minmax(0,1fr)); }
.tor-grid-4  { grid-template-columns: repeat(4, minmax(0,1fr)); }
.tor-stack   { display: flex; flex-direction: column; gap: var(--space-4); }
.tor-row     { display: flex; gap: var(--space-4); align-items: center; }
.tor-row.is-between { justify-content: space-between; }
.tor-row.is-wrap    { flex-wrap: wrap; }
.tor-divider {
  height: 1px; background: var(--tor-border); border: 0; margin-block: var(--space-6);
}
.tor-rule-red { height: 4px; width: 56px; background: var(--tor-red-500); border-radius: 4px; border: 0; margin-block: var(--space-4); }

/* Listas con bullets rojos estilo Tornillin */
.tor-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tor-list li { padding-left: 24px; position: relative; }
.tor-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 8px;
  background: var(--tor-red-500);
  border-radius: 50%;
}

/* Responsive shortcuts */
@media (max-width: 1024px) {
  .tor-grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tor-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .tor-grid-4, .tor-grid-3, .tor-grid-2 { grid-template-columns: 1fr; }
  .tor-nav__links { display: none; } /* sustituir por menú mobile real en cada implementación */
}