/*
Theme Name:   Surtilec
Theme URI:    https://surtilec.com
Description:  Child theme de GeneratePress para Surtilec — catálogo B2B de cables especiales y automatización industrial.
Author:       Surtilec
Template:     generatepress
Version:      0.16.2
Text Domain:  surtilec
*/

/* ============================================================
   Self-hosted fonts (SIL OFL) — no Google CDN at runtime.
   Archivo + IBM Plex Sans are variable (one woff2 each).
   ============================================================ */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/archivo-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("assets/fonts/plexsans-var.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/plexmono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/plexmono-500.woff2") format("woff2");
}

:root {
  /* Paleta industrial */
  --color-dark:   #0F2A43; /* azul oscuro */
  --color-accent: #F2780C; /* naranja */

  /* Grises neutros */
  --gray-900: #1A1F26;
  --gray-700: #3D4753;
  --gray-500: #6B7682;
  --gray-300: #C2C9D1;
  --gray-100: #F2F4F6;

  /* Variantes de interacción */
  --color-dark-hover:   #163A5C;
  --color-accent-hover: #D8690A;

  /* Stack de fuentes del sistema (fallback) */
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  /* Tipografía autoalojada — dirección "Acero" */
  --font-display: "Archivo", var(--font-system);
  --font-body:    "IBM Plex Sans", var(--font-system);
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Tonos industriales (dark) para portada y chrome */
  --ink-900:  #0C1722; /* casi negro acero */
  --ink-800:  #0F2030;
  --ink-navy: #0F2A43; /* azul de marca */
  --paper:    #F4F5F2; /* corte claro para logos */
  --hairline: rgba(255, 255, 255, 0.10);

  /* Superficies claras (dirección híbrida: contenido claro entre chrome oscuro) */
  --surface:       #ffffff;
  --surface-alt:   var(--gray-100);
  --hairline-dark: rgba(15, 42, 67, 0.12); /* hairline sobre fondo claro */
  --card-shadow:   0 8px 24px rgba(15, 42, 67, 0.10);

  /* Escala tipográfica y espaciado */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --radius:  6px;
  --content-max: 1200px;
}

body {
  font-family: var(--font-body);
  color: var(--gray-900);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Tipografía — industrial, limpia, con aire
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-dark);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 800;
}
h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: var(--space-3); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem);   margin-bottom: var(--space-2); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }
p  { margin-bottom: var(--space-2); }

/* Ancho de contenido ~1200px */
.grid-container { max-width: var(--content-max); }

/* ============================================================
   Botones — CTA primario naranja, secundario azul
   ============================================================ */
.button,
button,
input[type="submit"],
.wp-block-button__link,
.wpcf7-submit,
.woocommerce a.button,
.woocommerce button.button {
  display: inline-block;
  background-color: var(--color-dark);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 0.7em 1.5em;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
.wpcf7-submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
  background-color: var(--color-dark-hover);
  color: #fff;
}

/* CTA primarios: cotizar, añadir a cotización, enviar formulario, .alt */
.add-request-quote-button,
.add-request-quote-button-addons,
.single_add_to_cart_button,
.wpcf7-submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--color-accent);
  color: #fff;
}
.add-request-quote-button:hover,
.add-request-quote-button-addons:hover,
.single_add_to_cart_button:hover,
.wpcf7-submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--color-accent-hover);
  color: #fff;
}

/* ============================================================
   Badge "Precio: solicitar cotización"
   ============================================================ */
.surtilec-precio-cotizar {
  display: inline-block;
  background: var(--gray-100);
  color: var(--color-accent);
  font-size: 0.85em;
  font-weight: 600;
  padding: 0.3em 0.7em;
  border-radius: var(--radius);
  border: 1px solid var(--gray-300);
  letter-spacing: 0.01em;
}

/* ============================================================
   Buscador de productos en el encabezado
   ============================================================ */
.surtilec-nav-search {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding: var(--space-1) var(--space-2);
}
.surtilec-product-search {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 360px;
}
.surtilec-product-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--gray-300);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  padding: 0.5em 0.8em;
  font-size: 0.95rem;
}
.surtilec-product-search input[type="search"]:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.surtilec-product-search button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: #fff;
  border: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0 0.9em;
}
.surtilec-product-search button:hover { background: var(--color-accent-hover); }

/* ============================================================
   Autocompletado de búsqueda (dropdown)
   ============================================================ */
.surtilec-nav-search { position: relative; }
.su-suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 400;
  background: #fff;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  overflow: hidden;
  max-height: min(70vh, 480px);
  overflow-y: auto;
}
.su-suggest-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.85rem;
  text-decoration: none;
  color: var(--color-text, #1f2a37);
  border-bottom: 1px solid var(--gray-100, #f1f3f5);
}
.su-suggest-item:last-child { border-bottom: 0; }
.su-suggest-item:hover,
.su-suggest-item[aria-selected="true"] { background: var(--gray-100, #f3f4f6); }
.su-suggest-thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--gray-100, #f1f3f5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.su-suggest-thumb img { width: 100%; height: 100%; object-fit: contain; }
.su-suggest-thumb--ph { box-shadow: inset 0 0 0 1px var(--gray-200, #e5e7eb); }
.su-suggest-text { min-width: 0; display: flex; flex-direction: column; }
.su-suggest-title {
  font-size: 0.92rem;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.su-suggest-title strong { color: var(--color-accent); font-weight: 700; }
.su-suggest-meta {
  font-size: 0.74rem;
  color: var(--gray-500, #6b7280);
  margin-top: 0.1rem;
}
.su-suggest-cat { justify-content: space-between; font-size: 0.88rem; }
.su-suggest-cat-label strong { color: var(--color-accent); }
.su-suggest-all {
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-accent);
  background: var(--gray-50, #fafafa);
}
.su-suggest-empty {
  padding: 0.85rem;
  font-size: 0.88rem;
  color: var(--gray-500, #6b7280);
  text-align: center;
}

/* ============================================================
   Encabezado fijo (sticky) — GP free no lo trae nativo
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  /* Above .main-navigation: GP "below header" nav can be sticky at the same
     z-index and, coming later in the DOM, would otherwise paint over the
     search autocomplete dropdown (which lives inside this header). */
  z-index: 300;
}
/* Compensar la barra de administración de WordPress al estar logueado */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* ============================================================
   Mobile-first: buscador y menú usables en teléfono
   ============================================================ */
@media (max-width: 768px) {
  .surtilec-nav-search {
    order: 1;
    width: 100%;
    margin-left: 0;
    padding: var(--space-1);
  }
  .surtilec-product-search { max-width: none; }
}

/* ============================================================
   Catálogo — ficha de producto: tabla de especificaciones
   ============================================================ */
.surtilec-specs { margin: var(--space-4) 0; clear: both; width: 100%; }
.surtilec-specs h2 { font-size: 1.4rem; margin-bottom: var(--space-2); }
.surtilec-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
}
.surtilec-spec-table th,
.surtilec-spec-table td {
  text-align: left;
  padding: 0.6em 0.9em;
  border: 1px solid var(--gray-300);
  vertical-align: top;
}
.surtilec-spec-table th {
  width: 38%;
  background: var(--gray-100);
  color: var(--color-dark);
  font-weight: 600;
}
.surtilec-spec-table tr:nth-child(even) td { background: #fafbfc; }
.surtilec-availability {
  margin-top: var(--space-2);
  font-weight: 600;
  color: var(--color-dark);
}

/* Botón WhatsApp (CTA secundario) */
.surtilec-wa-btn {
  display: inline-block;
  background: #25D366;
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius);
  padding: 0.7em 1.4em;
  margin-top: var(--space-2);
  text-decoration: none;
}
.surtilec-wa-btn:hover { background: #1ebe5b; color: #fff; }

/* ============================================================
   Mosaicos de categorías (pilar + subcategorías)
   ============================================================ */
.surtilec-tiles {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2);
}
.surtilec-tile a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: var(--space-2);
  text-decoration: none;
  color: var(--color-dark);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.surtilec-tile a:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 10px rgba(15, 42, 67, 0.08);
}
.surtilec-tile-img img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: var(--space-1);
}
.surtilec-tile-name { font-weight: 600; }
.surtilec-tile-count { font-size: 0.85rem; color: var(--gray-500); }

/* ============================================================
   FAQ por categoría (acordeón nativo) + bloque CTA
   ============================================================ */
.surtilec-faq { margin: var(--space-4) 0; }
.surtilec-faq h2 { font-size: 1.4rem; margin-bottom: var(--space-2); }
.surtilec-faq details {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius);
  padding: 0.2em 0.9em;
  margin-bottom: var(--space-1);
}
.surtilec-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-dark);
  padding: 0.6em 0;
}
.surtilec-faq-a { padding-bottom: 0.6em; }

.surtilec-cta-block {
  margin: var(--space-4) 0;
  padding: var(--space-3);
  background: var(--color-dark);
  border-radius: var(--radius);
  text-align: center;
  color: #fff;
}
.surtilec-cta-text {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: #fff;
}
.surtilec-cta-buttons {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  flex-wrap: wrap;
}
.surtilec-cta-primary {
  display: inline-block;
  background: var(--color-accent);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius);
  padding: 0.7em 1.5em;
  text-decoration: none;
}
.surtilec-cta-primary:hover { background: var(--color-accent-hover); color: #fff; }
.surtilec-cta-block .surtilec-wa-btn { margin-top: 0; }

@media (max-width: 600px) {
  .surtilec-spec-table th { width: 45%; }
}

/* ============================================================
   REDISEÑO "Acero" — barra utilitaria, mega menú, portada
   (dirección dark industrial; mobile-first)
   ============================================================ */

/* ---- Barra utilitaria superior ---- */
.surtilec-utilitybar {
  background: var(--ink-900);
  color: var(--gray-300);
  font-size: 0.8rem;
  border-bottom: 1px solid var(--hairline);
}
.surtilec-utilitybar-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.5rem clamp(1rem, 4vw, 2.5rem);
  flex-wrap: wrap;
}
.su-util-item { display: inline-flex; align-items: center; gap: 0.45em; }
.su-util-phone, .su-util-wa { color: #fff; text-decoration: none; font-weight: 500; }
.su-util-phone:hover, .su-util-wa:hover { color: var(--color-accent); }
.su-util-wa svg { color: #25d366; }
.su-util-sep { flex: 1 1 auto; }
.su-util-claim { color: var(--gray-300); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.02em; }
.su-util-strong { color: #fff; }
.su-util-strong::before { content: "● "; color: var(--color-accent); }

/* Tira de metales (cobre/aluminio) — valor de referencia en COP/kg */
.su-metals { display: inline-flex; align-items: center; gap: 1rem; font-family: var(--font-mono); font-size: 0.74rem; cursor: help; }
.su-metal { display: inline-flex; align-items: baseline; gap: 0.3em; white-space: nowrap; }
.su-metal-name { color: var(--gray-300); }
.su-metal-price { color: #fff; font-weight: 500; }
.su-metal-unit { color: var(--gray-500); font-size: 0.66rem; }
.su-metal-trend.up { color: #34d07f; }
.su-metal-trend.down { color: #ef6a5a; }
.su-metal-trend.flat { color: var(--gray-500); }
.su-metals-ref { color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.62rem; border: 1px solid var(--hairline); border-radius: 3px; padding: 0.1em 0.4em; }

@media (max-width: 980px) {
  .su-metals { display: none; } /* libera espacio en la barra utilitaria */
}
@media (max-width: 720px) {
  .su-util-sep, .su-util-claim { display: none; }
  .su-util-strong { display: inline-flex; }
  .su-util-strong::before { content: ""; }
}

/* ---- Menú principal: tipografía + mega panel ---- */
.main-navigation .main-nav ul li a { font-weight: 600; }
.main-navigation { position: relative; }

.surtilec-mega { list-style: none; }
.surtilec-mega-inner { padding: 0; }
/* Mobile-first: el mega se muestra apilado dentro del menú móvil */
.surtilec-mega .surtilec-mega-grid { display: grid; grid-template-columns: 1fr; }
.surtilec-mega-col { padding: 0.6rem 1rem; }
.surtilec-mega-head {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  padding: 0.3rem 0;
}
.surtilec-mega-head:hover { color: var(--color-accent); }
.surtilec-mega-list { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.surtilec-mega-list li a {
  display: block;
  color: var(--gray-300);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 0.28rem 0;
}
.surtilec-mega-list li a:hover { color: #fff; }
.surtilec-mega-all,
.surtilec-mega-cta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-accent);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.surtilec-mega-cta { display: inline-block; margin: 0.4rem 1rem 0.2rem; }

/* Desktop: panel desplegable oscuro a todo el ancho del nav */
@media (min-width: 769px) {
  .surtilec-has-mega { position: static !important; }
  .surtilec-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    display: block;
    background: var(--ink-900);
    border-top: 2px solid var(--color-accent);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    z-index: 200;
  }
  .surtilec-has-mega:hover > .surtilec-mega,
  .surtilec-has-mega:focus-within > .surtilec-mega {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .surtilec-mega-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 1.8rem clamp(1rem, 4vw, 2.5rem) 1.4rem;
  }
  .surtilec-mega .surtilec-mega-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.6rem;
  }
  .surtilec-mega-col {
    padding: 0;
    border-left: 1px solid var(--hairline);
    padding-left: 1.2rem;
  }
  .surtilec-mega-col:first-child { border-left: 0; padding-left: 0; }
  .surtilec-mega-head { border-bottom: 1px solid var(--hairline); padding-bottom: 0.5rem; margin-bottom: 0.5rem; }
}

/* ============================================================
   Botones del rediseño — el primario SIEMPRE naranja sólido
   ============================================================ */
.su-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 0.95em 1.7em;
  border-radius: var(--radius);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.su-btn-primary { background: var(--color-accent); color: #fff; }
.su-btn-primary:hover { background: var(--color-accent-hover); color: #fff; transform: translateY(-1px); }
.su-btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.su-btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }
.su-btn-whatsapp { background: #25d366; color: #06351c; }
.su-btn-whatsapp:hover { background: #1faa51; color: #fff; }
.su-btn-dark { background: var(--ink-900); color: #fff; }
.su-btn-dark:hover { background: #000; color: #fff; transform: translateY(-1px); }
.su-btn-ghost-dark { background: transparent; color: var(--ink-900); border-color: rgba(12, 23, 34, 0.4); }
.su-btn-ghost-dark:hover { border-color: var(--ink-900); background: rgba(12, 23, 34, 0.06); color: var(--ink-900); }

/* ============================================================
   Estructura de secciones — full-bleed + contenedor interno
   ============================================================ */
/* Portada a todo el ancho: liberar el contenedor 1200 de GP (separate-containers)
   SOLO en la home, para que las bandas full-bleed no desborden ni amplíen la página. */
body.home #page.grid-container.container {
  max-width: 100% !important;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}
body.home #content.site-content { padding: 0 !important; max-width: 100%; }
body.home #primary { max-width: 100%; width: 100%; margin: 0; }
.surtilec-home-acero { overflow-x: clip; } /* contiene cualquier sobre-ancho */
.surtilec-home-acero .su-section {
  width: 100%;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.surtilec-home-acero .su-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.su-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 500;
  margin: 0 0 1rem;
}
.su-eyebrow-center { text-align: center; }
.su-eyebrow-dark { color: var(--ink-navy); }
.su-h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin: 0; }
.su-h2-center { text-align: center; }

/* Bandas tonales */
.su-band-steel  { background: var(--ink-800); color: #fff; }
.su-band-navy   { background: var(--ink-navy); color: #fff; }
.su-band-paper  { background: var(--paper); color: var(--ink-navy); }
.su-band-accent { background: var(--color-accent); color: #fff; text-align: center; }

/* ---- 1. HERO ---- */
.su-hero { background: var(--ink-900); color: #fff; position: relative; overflow: hidden; padding-block: 0; }
.su-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(242, 120, 12, 0.20), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 26px),
    linear-gradient(160deg, #0C1722 0%, #0F2433 55%, #0A1320 100%);
  z-index: 0;
}
.su-hero.has-photo::before {
  background:
    linear-gradient(90deg, rgba(8, 16, 24, 0.92) 0%, rgba(8, 16, 24, 0.72) 45%, rgba(8, 16, 24, 0.45) 100%),
    var(--su-hero-bg);
  background-size: cover;
  background-position: center;
}
.su-hero-inner { position: relative; z-index: 1; padding-block: clamp(4rem, 12vh, 8.5rem); }
.su-hero-title { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.06; max-width: 18ch; margin: 0 0 1.2rem; }
.su-hero-sub { color: var(--gray-300); font-size: clamp(1.05rem, 2vw, 1.35rem); max-width: 46ch; margin: 0 0 2rem; }
.su-hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---- 2. VALUE PROPS ---- */
.su-vp-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.su-vp-icon { color: var(--color-accent); display: inline-flex; padding: 0.7em; border: 1px solid var(--hairline); border-radius: 10px; }
.su-vp-title { color: #fff; font-size: 1.1rem; margin: 0.9rem 0 0.3rem; }
.su-vp-text { color: var(--gray-300); margin: 0; font-size: 0.95rem; }

/* ---- 3. PILLARS (rejilla con hairlines tipo plano técnico) ---- */
.su-pillars { background: var(--ink-900); color: #fff; }
.su-pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: 2.5rem;
}
.su-pillar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.8rem;
  background: var(--ink-900);
  text-decoration: none;
  color: #fff;
  transition: background-color 0.18s ease;
}
.su-pillar:hover { background: var(--ink-800); }
.su-pillar-icon { color: var(--color-accent); }
.su-pillar-name { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: #fff; }
.su-pillar-desc { color: var(--gray-300); font-size: 0.95rem; flex: 1; margin: 0; }
.su-pillar-go { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.04em; color: var(--color-accent); opacity: 0; transform: translateX(-4px); transition: opacity 0.18s ease, transform 0.18s ease; }
.su-pillar:hover .su-pillar-go { opacity: 1; transform: none; }

/* ---- 4. STEPS ---- */
.su-step-grid { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 2rem; counter-reset: su; }
.su-step { text-align: left; }
.su-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  background: var(--color-accent); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
  margin-bottom: 0.8rem;
}
.su-step-title { color: #fff; font-size: 1.1rem; margin: 0 0 0.3rem; }
.su-step-text { color: var(--gray-300); margin: 0; font-size: 0.95rem; }

/* ---- 5. MARCAS ---- */
.su-brand-row { list-style: none; margin: 1.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; align-items: center; }
.su-brand-ph {
  display: flex; align-items: center; justify-content: center;
  height: 56px; min-width: 144px; padding: 0 1.4rem;
  border: 1px solid var(--gray-300); border-radius: 8px; background: #fff;
  color: var(--gray-500); font-family: var(--font-mono); letter-spacing: 0.05em; font-size: 0.95rem;
  filter: grayscale(1); transition: filter 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.su-brand-ph:hover { filter: none; color: var(--ink-navy); border-color: var(--gray-500); }

/* ---- 6. INDUSTRIAS ---- */
.su-industries { background: var(--ink-900); color: #fff; }
.su-industry-row { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.su-industry {
  border: 1px solid var(--hairline); border-radius: 999px; padding: 0.55em 1.2em;
  font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.02em; color: #fff;
  background: rgba(255, 255, 255, 0.03);
}

/* ---- 7. TRUST / ENTITY ---- */
.su-trust-inner { text-align: center; max-width: 64ch; margin: 0 auto; }
.su-trust-keyline { display: block; width: 48px; height: 3px; background: var(--color-accent); margin: 0 auto 1.6rem; }
.su-entity { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: clamp(1.2rem, 2.4vw, 1.7rem); line-height: 1.45; letter-spacing: -0.01em; margin: 0 0 1.8rem; }
.su-trust-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---- 8. FINAL CTA ---- */
.su-finalcta-title { color: #fff; font-size: clamp(2rem, 4vw, 3rem); margin: 0 0 0.6rem; }
.su-finalcta-text { color: rgba(255, 255, 255, 0.92); max-width: 46ch; margin: 0 auto 2rem; }
.su-finalcta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---- Reveal escalonado en carga (CSS puro) ---- */
.su-reveal { opacity: 0; transform: translateY(14px); animation: suReveal 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: calc(var(--d, 0) * 90ms); }
@keyframes suReveal { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .su-reveal { animation: none; opacity: 1; transform: none; } }

/* ---- Responsive ---- */
@media (min-width: 640px) {
  .su-vp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .su-step-grid { grid-template-columns: repeat(3, 1fr); }
  .su-pillar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .su-vp-grid { grid-template-columns: repeat(4, 1fr); }
  .su-pillar-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================================
   HEADER upgrade — wordmark, CTA botón, condensar al hacer scroll
   ============================================================ */
.main-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.main-title a { color: var(--color-dark); }
.main-title a::after { content: "."; color: var(--color-accent); } /* acento de marca */
.site-logo img { transition: max-height 0.2s ease; }

/* Botón CTA del header — siempre naranja sólido */
.su-header-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.7em 1.15em;
  margin-left: 0.9rem;
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.su-header-cta:hover { background: var(--color-accent-hover); color: #fff; transform: translateY(-1px); }
.su-header-cta svg { transition: transform 0.15s ease; }
.su-header-cta:hover svg { transform: translateX(2px); }

/* Condensar al hacer scroll (clase en body vía JS) */
.site-header { transition: box-shadow 0.2s ease; }
.inside-header { transition: padding-top 0.2s ease, padding-bottom 0.2s ease; }
.su-scrolled .site-header { box-shadow: 0 6px 22px rgba(15, 42, 67, 0.12); }
.su-scrolled .inside-header { padding-top: 10px !important; padding-bottom: 10px !important; }
.su-scrolled .main-title { font-size: 1.3rem; }
.su-scrolled .site-logo img { max-height: 38px; }

@media (max-width: 768px) {
  .su-header-cta { margin-left: 0; width: 100%; justify-content: center; order: 2; margin-top: var(--space-1); }
}

/* ============================================================
   FOOTER industrial (reemplaza el site-info de GP)
   ============================================================ */
.site-info { display: none !important; } /* oculta el bar de copyright por defecto de GP */

.surtilec-footer { background: var(--ink-900); color: var(--gray-300); }

.su-foot-cta { background: var(--ink-800); border-top: 2px solid var(--color-accent); }
.su-foot-cta-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.6rem clamp(1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.su-foot-cta-title { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1.4rem; margin: 0; }
.su-foot-cta-sub { margin: 0.2rem 0 0; color: var(--gray-300); }

.su-foot-main { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.su-foot-grid {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
}
.su-foot-logo { font-family: var(--font-display); font-weight: 800; color: #fff; font-size: 1.5rem; letter-spacing: -0.02em; }
.su-foot-logo::after { content: "."; color: var(--color-accent); }
.su-foot-tagline { margin: 0.9rem 0 0.5rem; color: var(--gray-300); max-width: 34ch; font-size: 0.95rem; }
.su-foot-nap { color: var(--gray-500); font-size: 0.9rem; margin: 0; }
.su-foot-social { margin-top: 1.1rem; display: flex; gap: 0.6rem; }
.su-foot-soc {
  display: inline-flex; width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border: 1px solid var(--hairline); border-radius: 8px; color: #fff;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.su-foot-soc:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.su-foot-head { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 1rem; }
.su-foot-col ul { list-style: none; margin: 0; padding: 0; }
.su-foot-col li { margin-bottom: 0.55rem; }
.su-foot-col a, .su-foot-contact li { color: var(--gray-300); text-decoration: none; font-size: 0.95rem; }
.su-foot-col a:hover { color: #fff; }
.su-foot-wa { margin-top: 1.1rem; }

.su-foot-legal { border-top: 1px solid var(--hairline); }
.su-foot-legal-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--gray-500);
}
.su-foot-legal-links a { color: var(--gray-500); text-decoration: none; }
.su-foot-legal-links a:hover { color: #fff; }

@media (min-width: 600px) {
  .su-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 920px) {
  .su-foot-grid { grid-template-columns: 1.7fr 1fr 1fr 1.2fr; }
}

/* ============================================================
   HEADER de dos filas (patrón Graybar/Nassau)
   Fila 1 (.inside-header): logo + buscador prominente + WhatsApp + Cotizar
   Fila 2 (.main-navigation, "below header"): banda de categorías + mega
   ============================================================ */
.inside-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.inside-header .site-branding { flex: 0 0 auto; }

.su-header-tools {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
}
.su-header-tools .surtilec-nav-search { flex: 1 1 auto; margin: 0; padding: 0; min-width: 0; }
.su-header-tools .surtilec-product-search { max-width: 640px; width: 100%; margin: 0 auto; }
.su-header-tools .surtilec-product-search input[type="search"] { padding: 0.72em 1em; font-size: 1rem; }
.su-header-tools .surtilec-product-search button { padding: 0 1.1em; }

.su-header-wa {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: #25d366; color: #06351c; text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.su-header-wa:hover { background: #1faa51; color: #fff; }
.su-header-tools .su-header-cta { margin-left: 0; flex: 0 0 auto; padding: 0.78em 1.2em; }

/* Fila 2 — banda de navegación de categorías */
.main-navigation { background: #fff; border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); }
.main-navigation .main-nav > ul > li > a { font-weight: 600; }

/* Pie del mega con dos CTAs */
.surtilec-mega-foot { display: flex; gap: 1.6rem; flex-wrap: wrap; }

/* Móvil: header compacto — buscador PRIMERO (acción principal del catálogo),
   Cotizar debajo. El botón verde de WhatsApp se oculta: ya está en la barra
   utilitaria y en el botón flotante (evita 3 WhatsApp y un bloque de más). */
@media (max-width: 880px) {
  .inside-header { gap: 0.6rem; }
  .su-header-tools { width: 100%; flex-wrap: wrap; gap: 0.55rem; }
  .su-header-tools .surtilec-nav-search { order: 1; flex: 1 1 100%; }
  .su-header-tools .surtilec-product-search { max-width: none; }
  .su-header-wa { display: none; }
  .su-header-tools .su-header-cta { order: 2; flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   RESTYLE HÍBRIDO — chrome oscuro (header/hero/footer) +
   secciones de CONTENIDO claras (blanco/gris) con tarjetas de
   hairline. Overrides al final para ganar por orden de cascada.
   ============================================================ */

/* Scroll suave para anclas (Servicios) + offset bajo header sticky */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Bandas claras */
.su-band-light { background: var(--surface); color: var(--gray-900); }
.su-band-gray  { background: var(--surface-alt); color: var(--gray-900); }

/* Títulos: oscuros por defecto, blancos sólo sobre bandas oscuras */
.su-h2 { color: var(--color-dark); }
.su-band-steel .su-h2,
.su-band-navy  .su-h2,
.su-hero .su-h2 { color: #fff; }

/* 2. VALUE PROPS → banda clara */
.su-band-light .su-vp-icon,
.su-valueprops .su-vp-icon { border-color: var(--hairline-dark); }
.su-band-light .su-vp-title,
.su-valueprops .su-vp-title { color: var(--color-dark); }
.su-band-light .su-vp-text,
.su-valueprops .su-vp-text { color: var(--gray-700); }

/* 3. PILLARS → banda blanca con rejilla hairline oscura */
.su-pillars { background: var(--surface); color: var(--gray-900); }
.su-pillars .su-eyebrow { color: var(--color-accent); }
.su-pillar-grid { background: var(--hairline-dark); border-color: var(--hairline-dark); }
.su-pillar { background: var(--surface); color: var(--color-dark); }
.su-pillar:hover { background: var(--surface-alt); }
.su-pillar-name { color: var(--color-dark); }
.su-pillar-desc { color: var(--gray-700); }

/* 4. STEPS → banda gris clara (círculo de número se mantiene naranja) */
.su-band-gray .su-step-title { color: var(--color-dark); }
.su-band-gray .su-step-text  { color: var(--gray-700); }

/* 6. INDUSTRIAS → banda clara, pastillas con hairline oscuro */
.su-industries { background: var(--surface); color: var(--gray-900); }
.su-industries .su-industry {
  border-color: var(--hairline-dark);
  color: var(--gray-700);
  background: var(--surface);
}

/* ---- StatBar (hero + Nosotros): <dl> semántico ---- */
.su-statbar {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.4rem, 4vw, 3rem);
  margin: 2.4rem 0 0;
  padding: 0;
}
.su-stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-top: 2px solid var(--color-accent);
  padding-top: 0.7rem;
}
.su-stat dt {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;
}
.su-stat dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-300);
  max-width: 24ch;
}
/* StatBar sobre superficie clara */
.su-band-light .su-stat dt,
.su-band-gray  .su-stat dt { color: var(--color-dark); }
.su-band-light .su-stat dd,
.su-band-gray  .su-stat dd { color: var(--gray-700); }

/* ---- Tarjetas claras reutilizables (.su-card) ---- */
.su-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: 2.4rem;
}
.su-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--surface);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--color-dark);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
a.su-card:hover { border-color: var(--color-accent); box-shadow: var(--card-shadow); transform: translateY(-2px); }
.su-card-icon { color: var(--color-accent); }
.su-card-title { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--color-dark); margin: 0; }
.su-card-text { color: var(--gray-700); margin: 0; font-size: 0.95rem; }
.su-card-list { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.su-card-list li { color: var(--gray-700); font-size: 0.92rem; padding: 0.2rem 0; }
.su-card-go { margin-top: auto; padding-top: 0.4rem; font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.04em; color: var(--color-accent); }
@media (min-width: 640px) {
  .su-card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
  .su-card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .su-card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .su-card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .su-card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Breadcrumbs (adapta su color al fondo: hereda currentColor) ---- */
.su-breadcrumb { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; margin: 0 0 1.2rem; }
.su-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0; padding: 0; }
.su-breadcrumb li { display: inline-flex; align-items: center; gap: 0.45rem; opacity: 0.85; }
.su-breadcrumb li + li::before { content: "/"; opacity: 0.5; }
.su-breadcrumb a { color: inherit; text-decoration: none; }
.su-breadcrumb a:hover { color: var(--color-accent); }
.su-breadcrumb [aria-current="page"] { opacity: 0.65; }

/* ---- Hero/landing de páginas internas (más bajo que el de portada) ---- */
.su-page-hero { background: var(--ink-900); color: #fff; position: relative; overflow: hidden; }
.su-page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 360px at 10% 0%, rgba(242, 120, 12, 0.16), transparent 60%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 26px),
    linear-gradient(160deg, #0C1722 0%, #0F2433 60%, #0A1320 100%);
  z-index: 0;
}
.su-page-hero > .su-inner { position: relative; z-index: 1; }
.su-page-hero .su-eyebrow { color: var(--color-accent); }
.su-page-hero h1 { color: #fff; max-width: 22ch; }
.su-page-hero .su-page-sub { color: var(--gray-300); font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 56ch; margin: 0 0 1.6rem; }

/* ---- Split 50/50 (Por qué Surtilec / cobertura) ---- */
.su-split { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
@media (min-width: 860px) { .su-split { grid-template-columns: 1fr 1fr; } }
.su-split-media { border-radius: var(--radius); overflow: hidden; background: var(--surface-alt); aspect-ratio: 4 / 3; }
.su-split-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.su-checklist { list-style: none; margin: 1.2rem 0 1.8rem; padding: 0; }
.su-checklist li { position: relative; padding-left: 1.8rem; margin-bottom: 0.7rem; color: var(--gray-700); }
.su-checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--color-accent); font-weight: 800; }

/* ---- Plantillas de página full-bleed (Nosotros / Industrias / Servicios) ----
   Libera el contenedor 1200 de GP igual que body.home, vía la clase su-fullbleed. */
body.su-fullbleed #page.grid-container.container { max-width: 100% !important; width: 100%; padding: 0 !important; margin: 0 !important; }
body.su-fullbleed #content.site-content { padding: 0 !important; max-width: 100%; }
body.su-fullbleed #primary { max-width: 100%; width: 100%; margin: 0; }
.surtilec-page { overflow-x: clip; }
.surtilec-page .su-section { width: 100%; padding-block: clamp(3rem, 6vw, 5rem); }
.su-inner { max-width: var(--content-max); margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.surtilec-page .su-page-hero { padding-block: clamp(3rem, 7vw, 5.5rem); }

/* Texto de presentación */
.su-prose { max-width: 68ch; }
.su-prose p { color: var(--gray-700); font-size: 1.05rem; }
.su-entity-line {
  margin-top: 1.6rem;
  padding-left: 1rem;
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-dark);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* ============================================================
   RECURSOS / BLOG — índice (home.php) + artículo (single.php)
   ============================================================ */

/* Pestañas de categoría */
.su-blog-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.su-blog-tab {
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.03em;
  padding: 0.5em 1em; border: 1px solid var(--hairline-dark); border-radius: 999px;
  color: var(--gray-700); text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.su-blog-tab:hover { border-color: var(--color-accent); color: var(--color-accent); }
.su-blog-tab.is-active { background: var(--color-dark); color: #fff; border-color: var(--color-dark); }

/* Rejilla + tarjetas de entrada */
.su-post-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2.5vw, 1.6rem); }
@media (min-width: 600px)  { .su-post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .su-post-grid { grid-template-columns: repeat(3, 1fr); } }
.su-post-card {
  background: var(--surface); border: 1px solid var(--hairline-dark); border-radius: var(--radius);
  overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.su-post-card:hover { border-color: var(--color-accent); box-shadow: var(--card-shadow); transform: translateY(-2px); }
.su-post-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--color-dark); }
.su-post-card-img img { width: 100%; height: 170px; object-fit: cover; display: block; }
.su-post-card-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.2rem; flex: 1; }
.su-post-card-tag {
  align-self: flex-start; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--color-accent); background: rgba(242, 120, 12, 0.10);
  padding: 0.25em 0.7em; border-radius: 4px; text-decoration: none;
}
.su-post-card-title { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; line-height: 1.2; color: var(--color-dark); }
.su-post-card-excerpt { color: var(--gray-700); font-size: 0.92rem; flex: 1; }
.su-post-card-meta { font-family: var(--font-mono); font-size: 0.72rem; color: var(--gray-500); display: flex; gap: 0.4rem; flex-wrap: wrap; }

.su-blog-empty { text-align: center; padding: clamp(2rem, 5vw, 4rem) 0; color: var(--gray-700); }
.su-blog-empty p { margin-bottom: 1.2rem; }

/* Paginación */
.su-pagination { margin-top: 2.5rem; }
.su-pagination .nav-links { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.su-pagination .page-numbers {
  display: inline-flex; min-width: 2.4em; height: 2.4em; align-items: center; justify-content: center;
  padding: 0 0.6em; border: 1px solid var(--hairline-dark); border-radius: var(--radius);
  color: var(--gray-700); text-decoration: none; font-family: var(--font-mono); font-size: 0.85rem;
}
.su-pagination .page-numbers.current { background: var(--color-dark); color: #fff; border-color: var(--color-dark); }
.su-pagination a.page-numbers:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* Artículo */
.su-article-head { max-width: 62ch; }
.su-article-head .su-post-card-tag { margin-bottom: 0.6rem; }
.su-article-title { margin: 0.4rem 0 0.8rem; }
.su-article-meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--gray-500); display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.su-article-layout { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); margin-top: 2rem; }
@media (min-width: 900px) { .su-article-layout { grid-template-columns: minmax(0, 1fr) 280px; } }

.su-article-body { font-size: 1.05rem; color: var(--gray-900); }
.su-article-body > * { max-width: 70ch; }
.su-article-body h2 { margin-top: 2rem; }
.su-article-body h3 { margin-top: 1.4rem; }
.su-article-body p, .su-article-body li { color: var(--gray-900); }
.su-article-body ul, .su-article-body ol { padding-left: 1.3rem; }
.su-article-body li { margin-bottom: 0.4rem; }
.su-article-body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.su-article-hero { max-width: none; margin: 0 0 1.6rem; }
.su-article-hero img { width: 100%; border-radius: var(--radius); }

/* Sidebar sticky: TOC + mini CTA */
.su-article-aside { align-self: start; }
@media (min-width: 900px) { .su-article-aside { position: sticky; top: 96px; } }
.su-toc { border-left: 2px solid var(--hairline-dark); padding-left: 1rem; }
.su-toc-head { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); margin: 0 0 0.6rem; }
.su-toc-list { list-style: none; margin: 0; padding: 0; }
.su-toc-item a { display: block; color: var(--gray-700); text-decoration: none; font-size: 0.88rem; padding: 0.25rem 0 0.25rem 1rem; margin-left: -1rem; border-left: 2px solid transparent; }
.su-toc-item.lvl-h3 a { padding-left: 1.8rem; font-size: 0.84rem; }
.su-toc-item a:hover { color: var(--color-accent); }
.su-toc-item a.is-active { color: var(--color-dark); border-left-color: var(--color-accent); font-weight: 600; }
.su-toc-cta { margin-top: 1.5rem; padding: 1.2rem; background: var(--surface-alt); border-radius: var(--radius); }
.su-toc-cta-text { font-weight: 700; color: var(--color-dark); margin: 0 0 0.7rem; }

/* ============================================================
   DROPDOWNS ESTÁNDAR — "Catálogo" e "Industrias" usan el mismo
   dropdown nativo de GeneratePress (mismo color y organización).
   Aquí sólo añadimos acento de marca: borde superior naranja, sombra,
   ancho cómodo para nombres largos y hover naranja. El mega custom se
   retiró; sus reglas `.surtilec-mega` quedan inertes (sin DOM).
   ============================================================ */
.main-navigation .main-nav ul ul { width: 260px; } /* > 200px de GP: cabe "Cables para variadores VFD" */
.main-navigation .sub-menu {
  border-top: 2px solid var(--color-accent);
  box-shadow: 0 18px 40px rgba(15, 42, 67, 0.16);
}
.main-navigation .main-nav ul ul li a { transition: color 0.15s ease, background-color 0.15s ease; }
.main-navigation .main-nav ul ul li a:hover,
.main-navigation .main-nav ul ul li.current-menu-item > a { color: var(--color-accent) !important; }

/* ============================================================
   FICHA DE PRODUCTO — moderna, minimalista, con jerarquía de CTA
   ============================================================ */
.single-product div.product .summary { padding-left: clamp(0px, 2vw, 1.5rem); }
.single-product .product_title { margin-bottom: 0.6rem; }

/* Marco de imagen sobrio */
.single-product div.product .woocommerce-product-gallery {
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius);
  background: #fff;
  padding: clamp(0.8rem, 2vw, 1.4rem);
}
/* Caja de dimensión fija: las imágenes del proveedor llegan en aspectos muy
   dispares (tiras verticales 211x1608, apaisadas 1542x1375). object-fit:contain
   sobre un cuadrado centra y muestra el producto completo sin estirar ni que una
   tira vertical ocupe toda la columna. */
.single-product div.product .woocommerce-product-gallery__image {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.single-product div.product .woocommerce-product-gallery__image a,
.single-product div.product .woocommerce-product-gallery__image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* Rejilla de producto (archivo de categoría + "productos relacionados"):
   misma caja cuadrada para toda imagen, sea cual sea su dimensión origen, con
   fondo blanco. Woo usa woocommerce_thumbnail (uncropped, estado de servidor)
   y aquí solo la encajamos sin recortar. */
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img.attachment-woocommerce_thumbnail {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  margin-bottom: 0.8em;
}

/* Chips de specs bajo el título */
.su-pchips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.2rem 0 1.4rem; }
.su-pchip {
  font-family: var(--font-mono); font-size: 0.74rem; color: var(--gray-700);
  background: var(--surface-alt); border: 1px solid var(--hairline-dark);
  border-radius: 999px; padding: 0.4em 0.85em;
}
.su-pchip-k { color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 0.35em; }

/* Precio = badge de cotización, más presencia */
.single-product .price .surtilec-precio-cotizar,
.single-product .surtilec-precio-cotizar {
  font-size: 0.95rem; padding: 0.55em 1em; border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface-alt);
}
.single-product .price { margin-bottom: 1.6rem; }

/* CTA primario: "Añadir a cotización" naranja sólido (vence el azul de YITH) */
.single-product .yith-ywraq-add-to-quote a,
.single-product a.add-request-quote-button,
.single-product .add-request-quote-button,
.single-product .add-request-quote-button-addons {
  display: block !important;
  width: 100%; max-width: 340px;
  background: var(--color-accent) !important;
  color: #fff !important;
  border: 1px solid var(--color-accent) !important;
  border-radius: var(--radius) !important;
  padding: 0.8em 1.4em !important;
  font-weight: 600; font-size: 0.98rem; line-height: 1.2;
  text-align: center; text-decoration: none; box-shadow: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.single-product .yith-ywraq-add-to-quote a:hover,
.single-product a.add-request-quote-button:hover,
.single-product .add-request-quote-button:hover {
  background: var(--color-accent-hover) !important; border-color: var(--color-accent-hover) !important; color: #fff !important;
}
.single-product .yith-ywraq-add-to-quote { margin: 0 0 0.85rem; } /* espacio entre botones */

/* CTA secundario: WhatsApp en outline (minimalista, no compite) */
.single-product .surtilec-wa-btn {
  display: block !important; width: 100%; max-width: 340px; margin: 0 0 0.7rem !important;
  background: #fff !important; color: #128c4b !important;
  border: 1px solid #cfe9d8 !important; border-radius: var(--radius) !important;
  padding: 0.8em 1.4em !important; font-weight: 600; font-size: 0.98rem; text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.single-product .surtilec-wa-btn:hover { background: #f1faf4 !important; border-color: #25D366 !important; color: #0b7a3b !important; }

/* Línea de confianza */
.su-ptrust {
  list-style: none; margin: 1.6rem 0 0; padding: 1.3rem 0 0;
  border-top: 1px solid var(--hairline-dark);
  display: flex; flex-direction: column; gap: 0.55rem; max-width: 420px;
}
.su-ptrust li { position: relative; padding-left: 1.7rem; color: var(--gray-700); font-size: 0.92rem; }
.su-ptrust li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--color-accent); font-weight: 800; }

/* Meta (SKU / categoría) discreto */
.single-product .product_meta {
  font-size: 0.85rem; color: var(--gray-500);
  border-top: 1px solid var(--hairline-dark); margin-top: 1.4rem; padding-top: 1rem;
}
.single-product .product_meta a { color: var(--color-dark); text-decoration: none; }
.single-product .product_meta a:hover { color: var(--color-accent); }