/* =========================================================
   Suministros Navales Santa Tecla
   Sistema de diseño — reescritura limpia
   =========================================================
   Direccion: limpio tipo Apple. UNA sola familia tipografica, fondos
   claros, tarjetas con esquina redondeada y sombra suave en vez de
   retículas de líneas, y movimiento discreto pero cuidado.

   Se reescribe entero a proposito: la version anterior habia acumulado
   ocho bloques de parches encima y las reglas se peleaban entre si.
   ========================================================= */

:root {
  /* --- Color -----------------------------------------------------------
     Sin verde. Grises casi neutros con una pizca de azul y azul marino
     de marca, que ademas es el color del sector: las dos webs de
     referencia van en azul. */
  --ink:        #1D1D1F;   /* texto principal, nunca #000 */
  --ink-2:      #55575C;
  --ink-3:      #86868B;   /* meta, contadores */
  --bg:         #FFFFFF;
  --bg-2:       #F5F5F7;   /* bandas alternas */
  --bg-3:       #FAFAFC;
  --line:       rgba(0, 0, 0, 0.09);
  --line-2:     rgba(0, 0, 0, 0.16);

  --navy-900:   #0A2540;   /* cabecera, pie, hero */
  --navy-800:   #0E3358;
  --accent:     #0071E3;   /* azul de accion, relleno */
  --accent-600: #0062C4;   /* el mismo, apto como texto sobre blanco */
  --accent-300: #6CB6FF;   /* sobre fondo oscuro */
  --accent-wash: rgba(0, 113, 227, 0.08);

  --on-dark:      #F5F7FA;
  --on-dark-mut:  rgba(245, 247, 250, 0.68);
  --on-dark-line: rgba(245, 247, 250, 0.16);

  /* --- Tipografia ------------------------------------------------------
     UNA familia. En Mac y iPhone resuelve a San Francisco de verdad;
     fuera, Inter, que es su equivalente mas cercano. Las cifras usan
     tabular-nums de la misma familia: antes habia una monoespaciada
     aparte solo para eso y se leian como tres tipografias distintas. */
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --t-xs:   12.5px;
  --t-sm:   14px;
  --t-base: 16px;
  --t-md:   clamp(17px, 1.3vw, 19px);
  --t-lg:   clamp(24px, 2.8vw, 34px);
  --t-xl:   clamp(34px, 5.2vw, 62px);

  /* --- Espacio --------------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;
  --s20: 80px; --s24: 96px;

  /* --- Forma: esquinas generosas, sombras suaves ------------------------ */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.045);
  --sh-2: 0 2px 6px rgba(0, 0, 0, 0.05), 0 12px 28px rgba(0, 0, 0, 0.08);
  --sh-3: 0 8px 20px rgba(0, 0, 0, 0.07), 0 28px 60px rgba(0, 0, 0, 0.12);

  /* La curva de Apple: sale rapido y se posa despacio. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

  --wrap: 1200px;
}

/* =========================================================
   Base
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

body,
body.woocommerce-page,
body.home {
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}

/* Storefront impone Source Sans Pro en varios sitios: se unifica todo. */
body, button, input, select, textarea, optgroup,
h1, h2, h3, h4, h5, h6,
.site-title, .widget-title, .button, .price,
.woocommerce-loop-product__title, .product_title {
  font-family: var(--font);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  letter-spacing: -0.028em;
  line-height: 1.08;
  font-weight: 600;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--s4); }

a { color: var(--accent-600); text-decoration: none; transition: color 200ms var(--ease-soft); }
a:hover { color: var(--accent); }

img { max-width: 100%; height: auto; }

svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }

/* Foco.
   Storefront pinta el anillo de foco con el morado de WooCommerce
   (`a:focus, input:focus, textarea:focus, button:focus { outline:
   #7f54b3 solid 2px }`). Ese selector gana a un `:focus-visible` suelto,
   y ademas `:focus` sí se dispara al hacer clic con el raton, asi que el
   lila aparecia al pulsar el desplegable de orden. Se anula con la misma
   lista de selectores y se deja el anillo solo para teclado. */
a:focus,
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Con raton no se pinta anillo; con teclado sí. */
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* El resalte al seleccionar texto tambien en azul de marca. */
::selection { background: rgba(0, 113, 227, 0.22); color: var(--ink); }
::-moz-selection { background: rgba(0, 113, 227, 0.22); color: var(--ink); }

/* Casillas, radios y barras nativas: sin esto Windows usa su propio
   color de sistema, que en algunos equipos tambien tira a morado. */
:root { accent-color: var(--accent); }

.col-full { max-width: var(--wrap); }

/* Cifras siempre alineadas en columna. */
.snst-cat__count, .snst-filter__chip i, .snst-cat-more a i,
.woocommerce-result-count, .snst-facts dd, .snst-qty__input,
.snst-basket__count, .snst-spec-scroll td, .snst-spec-scroll th {
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   Movimiento
   ---------------------------------------------------------
   Un solo gesto, repetido: los bloques entran subiendo unos pocos
   pixeles al aparecer. Nada rebota ni gira.
   ========================================================= */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* =========================================================
   Etiquetas y titulares de seccion
   ========================================================= */

.snst-eyebrow {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accent-600);
  margin: 0 0 var(--s2);
}
.snst-eyebrow--on-deep { color: var(--accent-300); }

.snst-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--on-dark-mut);
  margin: 0 0 var(--s4);
}
.snst-tag svg { width: 15px; height: 15px; }

.snst-section { padding: clamp(64px, 7vw, 112px) var(--s6); }
.snst-section__inner { max-width: var(--wrap); margin: 0 auto; }

.snst-section__head { max-width: 680px; margin: 0 0 var(--s12); }
.snst-section__head--row {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s6);
  flex-wrap: wrap;
}
.snst-section__title { font-size: var(--t-lg); font-weight: 600; margin: 0 0 var(--s3); }
.snst-section__desc { color: var(--ink-2); font-size: var(--t-md); margin: 0; max-width: 60ch; }

/* =========================================================
   Botones
   ========================================================= */

.snst-btn,
.button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: var(--font);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  padding: 13px 24px;
  border: none;
  border-radius: 980px;            /* pastilla completa */
  background: var(--accent);
  color: #fff;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  transition: background 220ms var(--ease-soft), transform 220ms var(--ease),
              box-shadow 220ms var(--ease), opacity 220ms var(--ease-soft);
}
.snst-btn:hover,
.button:hover, button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover {
  background: var(--accent-600);
  color: #fff;
  transform: translateY(-1px);
}
.snst-btn:active, .button:active, button:active { transform: translateY(0) scale(0.985); }

.snst-btn--signal { background: var(--accent); color: #fff; }
.snst-btn--signal:hover { background: var(--accent-600); color: #fff; }
.snst-btn--deep { background: var(--navy-900); color: var(--on-dark); }
.snst-btn--deep:hover { background: var(--navy-800); color: var(--on-dark); }
.snst-btn--ghost {
  background: rgba(245, 247, 250, 0.12);
  color: var(--on-dark);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
}
.snst-btn--ghost:hover { background: rgba(245, 247, 250, 0.22); color: #fff; }

.snst-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--accent-600);
  white-space: nowrap;
}
.snst-link-arrow svg { width: 15px; height: 15px; transition: transform 260ms var(--ease); }
.snst-link-arrow:hover svg { transform: translateX(4px); }

/* =========================================================
   Barra superior + cabecera
   ========================================================= */

.snst-topbar {
  background: var(--navy-900);
  color: var(--on-dark-mut);
  font-size: var(--t-xs);
}
.snst-topbar__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 10px var(--s6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
}
.snst-topbar__place { display: inline-flex; align-items: center; gap: 6px; }
.snst-topbar__place svg { width: 14px; height: 14px; }
.snst-topbar__contacts { display: flex; gap: var(--s6); flex-wrap: wrap; }
.snst-topbar__contacts a { color: var(--on-dark); display: inline-flex; align-items: center; gap: 6px; }
.snst-topbar__contacts a:hover { color: #fff; }
.snst-topbar__contacts svg { width: 14px; height: 14px; }

/**
 * Storefront pone `.site { overflow-x: hidden }`, y eso convierte al
 * contenedor en un ambito de scroll: cualquier `position: sticky` de dentro
 * deja de pegarse (la cabecera se iba con el scroll en todos los tamaños).
 * `clip` recorta igual el desbordamiento horizontal pero NO crea ambito de
 * scroll, asi que el sticky vuelve a funcionar.
 */
.site { overflow-x: clip; }

/* Cabecera translucida: se desenfoca lo que pasa por debajo. */
#masthead.site-header {
  background: rgba(10, 37, 64, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--on-dark-line);
  box-shadow: none;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}
#masthead.site-header .col-full {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s8);
  padding-top: var(--s3);
  padding-bottom: var(--s3);
  transition: padding 220ms var(--ease-soft);
}

/* --- Cabecera compacta al bajar --------------------------------------
   Fija ocupaba 166px (23% de una pantalla de portatil) de forma
   permanente. Pasado el umbral queda una sola fila con lo unico que se usa
   navegando el catalogo: buscador y presupuesto. El menu de paginas se
   pliega. La clase la pone assets/js/motion.js; sin JavaScript la cabecera
   se queda como esta, que es un estado valido. */
#masthead.site-header.is-compact .col-full {
  padding-top: var(--s2);
  padding-bottom: var(--s2);
}
#masthead.site-header.is-compact .site-branding img.snst-mark__logo {
  height: 40px;
}
#masthead.site-header.is-compact .storefront-primary-navigation {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  border-top-color: transparent;
  pointer-events: none;
}
.storefront-primary-navigation {
  max-height: 120px;
  opacity: 1;
  transition: max-height 220ms var(--ease-soft), opacity 160ms var(--ease-soft);
}
.site-header .site-branding img.snst-mark__logo {
  transition: height 220ms var(--ease-soft);
}

@media (prefers-reduced-motion: reduce) {
  #masthead.site-header .col-full,
  .storefront-primary-navigation,
  .site-header .site-branding img.snst-mark__logo { transition: none; }
}
.site-header .site-branding { margin: 0; width: auto; float: none; }

.snst-mark { display: block; line-height: 1.15; }
.snst-mark__over,
.snst-mark__under {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--on-dark-mut);
}
.snst-mark__name {
  display: block;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 1px 0;
}
.snst-mark__under { color: var(--accent-300); }
.snst-mark:hover .snst-mark__name { color: rgba(255, 255, 255, 0.85); }

/* --- Logo -----------------------------------------------------------
   La altura manda (la cabecera es una banda de altura fija); el ancho
   se deja libre para no deformar la estrella del logotipo. */
.snst-mark--image { display: flex; align-items: center; }

/* Storefront trae `.site-header .site-branding img { height:auto; max-width:230px }`
   dentro de una media query, y gana por especificidad (0,2,1) a un simple
   `.snst-mark__logo`. Por eso la regla se escribe al mismo nivel en vez de
   recurrir a !important. */
.site-header .site-branding img.snst-mark__logo {
  display: block;
  /* La estrella del logotipo sobresale bastante por arriba y por abajo del
     texto, asi que a 46px el rotulo "SANTA TECLA" quedaba ilegible. */
  height: 64px;
  width: auto;
  max-width: none;
  object-fit: contain;
  transition: opacity 200ms var(--ease);
}
.snst-mark--image:hover .snst-mark__logo { opacity: 0.82; }

/* --- Buscador y cesta: misma altura, alineados ----------------------- */
.snst-header-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 1 1 auto;
  justify-content: flex-end;
  max-width: 620px;
}

.snst-search {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  max-width: 360px;
  height: 44px;
  /* El <form> hereda margin-bottom de Storefront: inflaba la fila a 70px
     y dejaba el buscador pegado arriba mientras la cesta se centraba, de
     ahi los 13px de desfase entre uno y otro. */
  margin: 0;
  background: rgba(245, 247, 250, 0.14);
  border: 1px solid transparent;
  border-radius: 980px;
  padding: 0 4px 0 14px;
  transition: background 220ms var(--ease-soft), border-color 220ms var(--ease-soft);
}
.snst-search:focus-within { background: rgba(245, 247, 250, 0.2); border-color: var(--accent-300); }
.snst-search > svg { width: 16px; height: 16px; color: var(--on-dark-mut); }
.snst-search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0 10px;
  font-family: var(--font);
  font-size: var(--t-sm);
  color: var(--on-dark);
  box-shadow: none;
}
.snst-search input[type="search"]:focus { outline: none; box-shadow: none; }
.snst-search input::placeholder { color: rgba(245, 247, 250, 0.6); }
.snst-search button { height: 34px; padding: 0 16px; font-size: var(--t-xs); border-radius: 980px; flex: 0 0 auto; }

/* El envoltorio tiene que ser flex: con el <a> en inline-flex dentro de
   un bloque, el ancla se apoyaba en la linea base y caia 15px por debajo
   del buscador. */
.snst-basket-wrap { position: relative; display: flex; align-items: center; }

.snst-basket {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 44px;             /* misma altura que el buscador */
  padding: 0 18px;
  border: 1px solid var(--on-dark-line);
  border-radius: 980px;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--on-dark);
  white-space: nowrap;
  transition: background 220ms var(--ease-soft), border-color 220ms var(--ease-soft);
}
.snst-basket:hover { background: rgba(245, 247, 250, 0.12); border-color: rgba(245, 247, 250, 0.4); color: #fff; }
.snst-basket svg { width: 16px; height: 16px; }
.snst-basket__count {
  font-size: 11px;
  font-weight: 600;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 980px;
  background: rgba(245, 247, 250, 0.18);
  color: var(--on-dark);
}
.snst-basket.is-filled { border-color: var(--accent); background: rgba(0, 113, 227, 0.24); }
.snst-basket.is-filled .snst-basket__count { background: var(--accent); color: #fff; }

/* --- Navegacion ------------------------------------------------------ */
.storefront-primary-navigation {
  background: rgba(10, 37, 64, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--on-dark-line);
}
.main-navigation ul.menu > li > a,
.main-navigation ul#primary-menu > li > a {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--on-dark);
  padding-top: 15px;
  padding-bottom: 15px;
  transition: color 200ms var(--ease-soft);
}
.main-navigation ul.menu > li > a:hover { color: #fff; }
.main-navigation ul.menu > li.current-menu-item > a { color: var(--accent-300); }
.main-navigation .menu-toggle {
  font-size: var(--t-sm);
  font-weight: 500;
  background: rgba(245, 247, 250, 0.1);
  color: var(--on-dark);
  border: none;
  border-radius: 980px;
  /* Storefront dibuja el icono de hamburguesa con un ::before absoluto en
     left:14px y 14px de ancho (ocupa hasta los 28px). Con un padding
     izquierdo de 18px el texto "Menú" se le montaba encima; se deja sitio
     al icono mas un respiro. */
  padding: 10px 18px 10px 38px;
}
.main-navigation .menu-toggle:hover { background: rgba(245, 247, 250, 0.18); color: #fff; }

/* =========================================================
   Hero fotografico
   ========================================================= */

.snst-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: min(80vh, 760px);
  padding: clamp(72px, 10vw, 148px) var(--s6) clamp(48px, 5vw, 76px);
  background: var(--navy-900);
  overflow: hidden;
}
.snst-hero__bg { position: absolute; inset: 0; z-index: -2; display: block; }
.snst-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 42%;
  display: block;
  margin: 0;
  max-width: none;
  /* Entrada: la foto se posa desde un ligero zoom. Un gesto, lento. */
  animation: snst-hero-in 1700ms var(--ease) both;
}
@keyframes snst-hero-in {
  from { transform: scale(1.07); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.snst-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10, 37, 64, 0.62) 0%, rgba(10, 37, 64, 0.22) 40%, rgba(10, 37, 64, 0.6) 74%, rgba(10, 37, 64, 0.92) 100%),
    linear-gradient(96deg, rgba(10, 37, 64, 0.84) 0%, rgba(10, 37, 64, 0.44) 50%, rgba(10, 37, 64, 0.05) 100%);
}
.snst-hero__inner { position: relative; width: 100%; max-width: var(--wrap); margin: 0 auto; }
.snst-hero__body { max-width: 760px; }

.snst-hero__title {
  font-size: var(--t-xl);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #fff;
  max-width: 15ch;
  margin: 0 0 var(--s6);
  text-shadow: 0 2px 30px rgba(4, 18, 32, 0.4);
}
.snst-hero__lead {
  font-size: var(--t-md);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  max-width: 52ch;
  margin: 0 0 var(--s8);
  text-shadow: 0 1px 18px rgba(4, 18, 32, 0.45);
}

.snst-hero__search {
  display: flex;
  align-items: center;
  margin: 0;
  height: 60px;
  max-width: 620px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 980px;
  padding: 0 6px 0 22px;
  box-shadow: var(--sh-3);
}
.snst-hero__search > svg { width: 19px; height: 19px; color: var(--ink-3); }
.snst-hero__search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0 14px;
  font-family: var(--font);
  font-size: var(--t-base);
  color: var(--ink);
  box-shadow: none;
}
.snst-hero__search input[type="search"]:focus { outline: none; box-shadow: none; }
.snst-hero__search input::placeholder { color: var(--ink-3); }
.snst-hero__search button { height: 48px; padding: 0 28px; font-size: var(--t-sm); }

.snst-hero__quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s6);
}
.snst-hero__quick-label { font-size: var(--t-sm); color: var(--on-dark-mut); margin-right: var(--s2); }
.snst-hero__quick a {
  font-size: var(--t-sm);
  font-weight: 500;
  color: #fff;
  padding: 8px 16px;
  border-radius: 980px;
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background 220ms var(--ease-soft), transform 220ms var(--ease);
}
.snst-hero__quick a:hover { background: rgba(255, 255, 255, 0.28); color: #fff; transform: translateY(-1px); }

.snst-hero__credit {
  margin: var(--s8) 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.45);
  max-width: 64ch;
}
.snst-hero__credit a { color: rgba(255, 255, 255, 0.68); text-decoration: underline; }
.snst-hero__credit a:hover { color: #fff; }

/* =========================================================
   Categorias — tarjetas, no retícula de líneas
   ========================================================= */

.snst-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }

.snst-cat {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
}
.snst-cat:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }

.snst-cat__img {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Blanco, no gris: las fotos heredadas traen su propio fondo blanco
     y sobre un gris se recortaban como un cuadrado. */
  background: var(--bg);
  aspect-ratio: 5 / 4;
  padding: var(--s8);
  overflow: hidden;
}
/* Regla del catalogo: la foto se reduce, nunca se amplia. Un tercio de
   las imagenes heredadas son de 102px y estirarlas las deja borrosas. */
.snst-cat__img img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  display: block;
  transition: transform 620ms var(--ease);
}
.snst-cat:hover .snst-cat__img img { transform: scale(1.07); }

.snst-cat__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s6) var(--s6);
}
.snst-cat__name { font-size: var(--t-base); font-weight: 500; color: var(--ink); letter-spacing: -0.015em; }
.snst-cat__count { font-size: var(--t-sm); color: var(--ink-3); flex-shrink: 0; }

.snst-cat-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s8); }
.snst-cat-more__label { font-size: var(--t-sm); color: var(--ink-3); margin-right: var(--s2); }
.snst-cat-more a {
  font-size: var(--t-sm);
  color: var(--ink-2);
  background: var(--bg-2);
  border-radius: 980px;
  padding: 8px 16px;
  transition: background 220ms var(--ease-soft), color 220ms var(--ease-soft);
}
.snst-cat-more a i { font-style: normal; color: var(--ink-3); margin-left: 4px; }
.snst-cat-more a:hover { background: var(--accent-wash); color: var(--accent-600); }

/* =========================================================
   Lineas de negocio
   ========================================================= */

.snst-lines { padding: 0 var(--s6) clamp(64px, 7vw, 112px); background: var(--bg); }
.snst-lines__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
}
.snst-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s8);
  background: var(--bg-2);
  border-radius: var(--r-lg);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease), background 300ms var(--ease-soft);
}
.snst-line:hover { transform: translateY(-6px); box-shadow: var(--sh-2); background: var(--bg-3); }
.snst-line__icon {
  width: 44px;
  height: 44px;
  border-radius: 980px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.snst-line__icon svg { width: 21px; height: 21px; }
.snst-line h3 { font-size: var(--t-md); font-weight: 600; margin: 0; }
.snst-line p { font-size: var(--t-sm); color: var(--ink-2); margin: 0; line-height: 1.55; }
.snst-line__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--s2);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--accent-600);
}
.snst-line__go svg { width: 15px; height: 15px; transition: transform 260ms var(--ease); }
.snst-line:hover .snst-line__go svg { transform: translateX(4px); }

/* =========================================================
   Sobre nosotros
   ========================================================= */

.snst-about { padding: clamp(64px, 7vw, 112px) var(--s6); background: var(--bg-2); }
.snst-about__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: var(--s16);
  align-items: start;
}
.snst-about__lead { font-size: var(--t-md); line-height: 1.55; color: var(--ink); margin: 0 0 var(--s4); }
.snst-about__body p { color: var(--ink-2); margin: 0 0 var(--s4); }

.snst-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s6);
  margin: var(--s8) 0 0;
  padding-top: var(--s8);
  border-top: 1px solid var(--line);
}
.snst-facts dt { font-size: var(--t-sm); color: var(--ink-3); margin: 0 0 var(--s1); }
.snst-facts dd { font-size: var(--t-md); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; margin: 0; }

.snst-card-contact {
  background: var(--navy-900);
  color: var(--on-dark);
  border-radius: var(--r-xl);
  padding: var(--s8);
  font-style: normal;
  position: sticky;
  top: 120px;
  box-shadow: var(--sh-2);
}
.snst-card-contact__label { display: block; font-size: var(--t-sm); color: var(--on-dark-mut); margin-bottom: var(--s4); }
.snst-card-contact__addr { font-size: var(--t-sm); line-height: 1.6; color: var(--on-dark); margin: 0 0 var(--s6); }
.snst-card-contact__row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 12px 0;
  border-top: 1px solid var(--on-dark-line);
  font-size: var(--t-sm);
  color: var(--on-dark);
  word-break: break-word;
}
.snst-card-contact__row:hover { color: #fff; }
.snst-card-contact__row svg { width: 16px; height: 16px; color: var(--on-dark-mut); }
.snst-card-contact__map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s4);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--accent-300);
}
.snst-card-contact__map svg { width: 15px; height: 15px; transition: transform 260ms var(--ease); }
.snst-card-contact__map:hover svg { transform: translateX(4px); }

/* =========================================================
   Catalogo — tarjetas de producto
   ========================================================= */

/* Storefront maqueta el bucle con floats y anchos en % mediante
   selectores de hasta 5 clases; al pasar a grid ese width se resuelve
   contra la columna y deja las fichas en 63px. */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* El clearfix de Storefront se convertia en celda del grid (salia 3+4+1
   en vez de 4+4). Ojo: la portada no lleva la clase .woocommerce. */
ul.products::before, ul.products::after { content: none !important; display: none !important; }

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.product {
  width: auto !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease), border-color 420ms var(--ease);
}
.woocommerce ul.products li.product:hover,
ul.products li.product:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }

.snst-plate__img,
.snst-plate__img--loop {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--bg);   /* mismo motivo que en las categorias */
  padding: var(--s6);
  overflow: hidden;
}
.snst-plate__img img,
.woocommerce ul.products li.product a img,
ul.products li.product a img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  display: block;
  border-radius: 0;
  box-shadow: none;
  transition: transform 620ms var(--ease);
}
.woocommerce ul.products li.product:hover a img,
ul.products li.product:hover a img { transform: scale(1.07); }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
  font-size: var(--t-base);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-align: left;
  padding: var(--s6) var(--s6) var(--s1);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(2 * 1.35em + var(--s6) + var(--s1));
}
.woocommerce ul.products li.product .price,
ul.products li.product .price {
  display: block;
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--ink-3);
  text-align: left;
  padding: 0 var(--s6) var(--s4);
  margin: 0;
}
.snst-poa-price { color: var(--ink-3); }
.woocommerce ul.products li.product .star-rating { display: none; }

/* =========================================================
   Cantidad + añadir al presupuesto
   ========================================================= */

.snst-qty {
  display: inline-flex;
  align-items: center;
  height: 40px;
  background: var(--bg-2);
  border-radius: 980px;
  padding: 0 2px;
  flex: 0 0 auto;
}
.snst-qty__step {
  width: 32px;
  height: 34px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1;
  border-radius: 980px;
  box-shadow: none;
}
.snst-qty__step:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); transform: none; }
/* Storefront estiliza input[type=number] con fondo #F2F2F2 y sombra interior
   superior: sobre la pildora se veia un recuadro con una linea oscura encima.
   Su selector (0,1,1) ganaba al nuestro (0,1,0); hay que subir especificidad. */
.snst-qty input.snst-qty__input {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 0;
  font-variant-numeric: tabular-nums;
  background: transparent;
  text-align: center;
  font-family: var(--font);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink);
  padding: 0;
  box-shadow: none;
  -moz-appearance: textfield;
}
.snst-qty__input::-webkit-outer-spin-button,
.snst-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.snst-qty__input:focus { outline: none; box-shadow: none; }

/* La fila necesita ~198px (cantidad + boton) y la tarjeta no siempre los
   tiene. Sin envolver, el boton se salia y "Añadir" aparecia cortado. */
.snst-add {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: auto 0 0 !important;
  padding: 0 var(--s6) var(--s6);
}
.snst-add .snst-quote-btn { flex: 1 1 120px; min-width: 0; }
.snst-quote-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 var(--s4);
  border: none;
  border-radius: 980px;
  background: var(--bg-2);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 220ms var(--ease-soft), color 220ms var(--ease-soft), transform 220ms var(--ease);
}
.snst-quote-btn:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.snst-quote-btn svg { width: 15px; height: 15px; }
.snst-quote-btn.is-busy { opacity: 0.55; cursor: wait; }
.snst-quote-btn.is-done { background: var(--accent); color: #fff; }

.snst-add--single { padding: 0; margin: var(--s6) 0 0; gap: var(--s3); }
.snst-add--single .snst-qty { height: 50px; padding: 0 4px; }
.snst-add--single .snst-qty__step { width: 40px; height: 42px; font-size: 18px; }
.snst-add--single .snst-qty__input { width: 44px; height: 42px; font-size: var(--t-base); }
.snst-add--single .snst-quote-btn {
  flex: 0 0 auto;
  height: 50px;
  padding: 0 32px;
  background: var(--accent);
  color: #fff;
  font-size: var(--t-base);
}
.snst-add--single .snst-quote-btn:hover { background: var(--accent-600); }

/* =========================================================
   Panel de presupuesto
   ========================================================= */

.snst-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  z-index: 200;
  width: min(392px, calc(100vw - 32px));
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 280ms var(--ease), transform 280ms var(--ease), visibility 280ms;
}
.snst-panel.is-open { opacity: 1; visibility: visible; transform: none; }

.snst-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4) var(--s6);
  border-bottom: 1px solid var(--line);
}
.snst-panel__title { font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.snst-panel__close {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--bg-2);
  border-radius: 980px;
  padding: 0;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.snst-panel__close svg { width: 15px; height: 15px; }
.snst-panel__close:hover { background: rgba(0, 0, 0, 0.09); color: var(--ink); transform: none; }

.snst-panel__empty { padding: var(--s8) var(--s6); text-align: center; }
.snst-panel__empty p { font-size: var(--t-sm); color: var(--ink-2); margin: 0 0 var(--s2); }
.snst-panel__hint { font-size: var(--t-xs) !important; color: var(--ink-3) !important; }
.snst-panel__empty .snst-btn { margin-top: var(--s4); }

.snst-panel__list { list-style: none; margin: 0; padding: var(--s2) 0; max-height: min(46vh, 340px); overflow-y: auto; }
.snst-panel__item { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s6); margin: 0; }
.snst-panel__thumb {
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.snst-panel__thumb img { width: auto; height: auto; max-width: 100%; max-height: 100%; margin: 0; }
.snst-panel__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.snst-panel__name { font-size: var(--t-sm); font-weight: 500; color: var(--ink); line-height: 1.35; }
.snst-panel__name:hover { color: var(--accent-600); }
.snst-qty--panel { align-self: flex-start; height: 32px; }
.snst-qty--panel .snst-qty__step { width: 26px; height: 28px; font-size: 14px; }
.snst-qty--panel .snst-qty__input { width: 28px; height: 28px; font-size: var(--t-xs); }

.snst-panel__remove {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 980px;
  color: var(--ink-3);
  transition: background 200ms var(--ease-soft), color 200ms var(--ease-soft);
}
.snst-panel__remove svg { width: 14px; height: 14px; }
.snst-panel__remove:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); }

.snst-panel__foot { padding: var(--s4) var(--s6) var(--s6); border-top: 1px solid var(--line); }
.snst-panel__note { font-size: var(--t-xs); color: var(--ink-3); margin: 0 0 var(--s3); }
.snst-panel__foot .snst-btn { width: 100%; }

.snst-flash {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 14px);
  z-index: 1000;
  max-width: calc(100vw - 32px);
  padding: 13px 22px;
  border-radius: 980px;
  background: rgba(29, 29, 31, 0.92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 500;
  box-shadow: var(--sh-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.snst-flash.is-on { opacity: 1; transform: translate(-50%, 0); }
.snst-flash.is-error { background: rgba(176, 32, 32, 0.94); }

/* =========================================================
   Cierre y pie
   ========================================================= */

.snst-cta { background: var(--navy-900); color: var(--on-dark); padding: clamp(64px, 7vw, 104px) var(--s6); }
.snst-cta__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: var(--s12);
  align-items: center;
}
.snst-cta__title { font-size: var(--t-lg); font-weight: 600; color: #fff; margin: 0 0 var(--s3); }
.snst-cta__desc { font-size: var(--t-md); color: var(--on-dark-mut); margin: 0; max-width: 54ch; }
.snst-cta__actions { display: flex; flex-direction: column; gap: var(--s3); }

.site-footer { background: var(--bg-2); color: var(--ink-2); padding: 0; font-size: var(--t-sm); }
.snst-footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(56px, 6vw, 80px) var(--s6) var(--s12);
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s8);
}
.snst-footer__logo {
  display: block;
  height: 58px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  margin-bottom: var(--s4);
}

.snst-mark--footer { display: block; margin-bottom: var(--s4); }
.snst-mark--footer .snst-mark__over { color: var(--ink-3); }
.snst-mark--footer .snst-mark__name { color: var(--ink); font-size: 20px; }
.snst-footer__col address { font-style: normal; line-height: 1.6; color: var(--ink-2); margin: 0 0 var(--s3); }
.snst-footer__cif { font-size: var(--t-xs); color: var(--ink-3); margin: 0; }
.snst-footer__col h4 { font-size: var(--t-sm); font-weight: 600; color: var(--ink); margin: 0 0 var(--s4); }
.snst-footer__col ul { list-style: none; margin: 0; padding: 0; }
.snst-footer__col li { margin: 0 0 10px; }
.snst-footer__col a { color: var(--ink-2); }
.snst-footer__col a:hover { color: var(--accent-600); }
.snst-footer__hours { margin: var(--s4) 0 0; font-size: var(--t-xs); color: var(--ink-3); }
.snst-footer__social { display: flex; gap: var(--s3); margin-top: var(--s4); }
.snst-footer__social svg { width: 19px; height: 19px; }
.snst-footer__bottom { border-top: 1px solid var(--line); }
.snst-footer__bottom-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s6);
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  font-size: var(--t-xs);
  color: var(--ink-3);
}

/* =========================================================
   Paginas de catalogo
   ========================================================= */

/* Storefront centra la cabecera de archivo y le mete 98px de padding
   desde dentro de un @media con selector de 3 clases. */
.woocommerce-products-header,
.storefront-full-width-content .woocommerce-products-header {
  padding-bottom: 0 !important;
  text-align: left !important;
  margin-bottom: var(--s8);
}
.woocommerce-products-header__title,
.woocommerce-products-header .snst-shop-tagline,
.woocommerce .page-title,
.woocommerce div.product .product_title,
.term-description { text-align: left; }
.woocommerce-products-header__title,
.woocommerce .page-title { font-size: var(--t-lg); font-weight: 600; margin-bottom: var(--s3); }
.snst-shop-tagline { font-size: var(--t-md); color: var(--ink-2); max-width: 62ch; margin: 0; }

.woocommerce-breadcrumb { font-size: var(--t-sm); color: var(--ink-3); }
.woocommerce-breadcrumb a { color: var(--ink-3); }
.woocommerce-breadcrumb a:hover { color: var(--accent-600); }

.snst-filter { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s6); padding: 0; }
.snst-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: none;
  border-radius: 980px;
  background: var(--bg-2);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--ink-2);
  transition: background 220ms var(--ease-soft), color 220ms var(--ease-soft), transform 220ms var(--ease);
}
.snst-filter__chip i { font-style: normal; font-size: var(--t-xs); color: var(--ink-3); }
.snst-filter__chip:hover { background: rgba(0, 0, 0, 0.07); color: var(--ink); transform: translateY(-1px); }
.snst-filter__chip.is-active { background: var(--ink); color: #fff; }
.snst-filter__chip.is-active i { color: rgba(255, 255, 255, 0.62); }

.storefront-sorting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s6);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.woocommerce-ordering select {
  font-family: var(--font);
  font-size: var(--t-sm);
  color: var(--ink);
  background-color: var(--bg-2);
  border: none;
  border-radius: 980px;
  padding: 10px 36px 10px 16px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
}
.woocommerce-result-count { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }

.woocommerce nav.woocommerce-pagination ul { border: none; display: inline-flex; gap: var(--s1); }
.woocommerce nav.woocommerce-pagination ul li { border: none; margin: 0; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--font);
  font-size: var(--t-sm);
  min-width: 38px;
  padding: 9px 12px;
  border-radius: 980px;
  background: transparent;
  color: var(--ink-2);
}
.woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--bg-2); color: var(--ink); }
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--ink); color: #fff; font-weight: 500; }

/* =========================================================
   Ficha de producto
   ========================================================= */

.woocommerce div.product .product_title { font-size: var(--t-lg); font-weight: 600; }
.woocommerce div.product p.price,
.woocommerce div.product span.price { font-size: var(--t-md); color: var(--ink-3); font-weight: 400; }

.woocommerce div.product div.images.woocommerce-product-gallery {
  background: var(--bg-2);
  border: none;
  border-radius: var(--r-xl);
  padding: var(--s8);
  overflow: hidden;
}
.woocommerce div.product div.images .woocommerce-product-gallery__image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}
.woocommerce div.product div.images img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 440px;
  margin: 0 auto;
  display: block;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.woocommerce div.product .flex-direction-nav { display: none; }
.woocommerce div.product div.images .flex-control-thumbs { margin: var(--s4) 0 0; gap: var(--s2); display: flex; flex-wrap: wrap; }
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; margin: 0; float: none; }
.woocommerce div.product div.images .flex-control-thumbs img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  background: var(--bg);
  border-radius: var(--r-sm);
  padding: 4px;
  opacity: 0.6;
  transition: opacity 220ms var(--ease-soft), transform 220ms var(--ease);
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover { opacity: 1; transform: translateY(-2px); }

.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: var(--s6);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: var(--font); font-weight: 500; font-size: var(--t-sm); }
.woocommerce div.product .woocommerce-tabs ul.tabs { align-self: start; }

.woocommerce .related > h2, .woocommerce .upsells > h2, .related.products > h2 {
  text-align: left;
  font-size: var(--t-lg);
  font-weight: 600;
  margin-bottom: var(--s6);
}

/* --- Tablas de especificaciones -------------------------------------- */
.snst-spec-title {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink);
  margin: var(--s8) 0 var(--s3);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}
.snst-spec-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 var(--s4);
  border-radius: var(--r);
  background: var(--bg-2);
}
.woocommerce div.product .snst-spec-scroll table,
.snst-spec-scroll table {
  width: 100%;
  min-width: max-content;
  border-collapse: collapse;
  margin: 0;
  border: none;
  font-size: var(--t-sm);
}
.snst-spec-scroll thead th {
  font-size: var(--t-xs);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  color: var(--ink-2);
  background: transparent;
  padding: 14px 18px 10px;
  border: none;
}
.snst-spec-scroll tbody td {
  font-size: var(--t-sm);
  color: var(--ink);
  padding: 11px 18px;
  border: none;
  border-top: 1px solid var(--line);
  white-space: nowrap;
}
.snst-spec-scroll tbody td:first-child { font-weight: 500; }

.snst-cta-line {
  font-size: var(--t-sm);
  color: var(--ink-2);
  background: var(--bg-2);
  border-radius: var(--r);
  padding: var(--s4) var(--s6);
  margin-top: var(--s6);
}

/* =========================================================
   Presupuesto: pagina y formulario
   ========================================================= */

.snst-quote-page { padding: clamp(48px, 5vw, 76px) var(--s6); }
.snst-quote-page__inner { max-width: var(--wrap); margin: 0 auto; }
.snst-quote-page__head { max-width: 640px; margin: 0 0 var(--s12); }
.snst-quote-page__head p { color: var(--ink-2); font-size: var(--t-md); margin: 0; }
.snst-quote-page__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--s12); align-items: start; }
.snst-quote-page__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}
.snst-quote-page__contacts a { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 500; font-size: var(--t-sm); }
.snst-quote-page__contacts svg { width: 16px; height: 16px; }

.snst-quote-cart { background: var(--bg-2); border-radius: var(--r-lg); padding: var(--s6); }
.snst-quote-cart--empty { background: transparent; border: 1px dashed var(--line-2); }
.snst-quote-cart--empty p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); }
.snst-quote-cart__title { font-size: var(--t-sm); font-weight: 600; color: var(--ink); margin: 0 0 var(--s4); }
.snst-quote-cart__list { list-style: none; margin: 0; padding: 0; }
.snst-quote-cart__item { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.snst-quote-cart__item:first-child { border-top: none; padding-top: 0; }
.snst-quote-cart__thumb {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.snst-quote-cart__thumb img { width: auto; height: auto; max-width: 100%; max-height: 100%; margin: 0; }
.snst-quote-cart__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.snst-quote-cart__name { font-size: var(--t-sm); font-weight: 500; color: var(--ink); line-height: 1.35; }
.snst-quote-cart__meta { font-size: var(--t-xs); color: var(--ink-3); }
.snst-quote-cart__remove {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 980px;
  color: var(--ink-3);
}
.snst-quote-cart__remove svg { width: 15px; height: 15px; }
.snst-quote-cart__remove:hover { background: rgba(0, 0, 0, 0.06); color: var(--ink); }

.snst-form { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s8); box-shadow: var(--sh-1); }
.snst-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.snst-form__row + .snst-form__row { margin-top: var(--s4); }
.snst-form label { display: block; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.snst-form input[type="text"], .snst-form input[type="email"], .snst-form input[type="tel"],
.snst-form select, .snst-form textarea {
  width: 100%;
  font-family: var(--font);
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--bg-2);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 13px 15px;
  box-shadow: none;
  transition: border-color 220ms var(--ease-soft), background 220ms var(--ease-soft);
}
.snst-form input:focus, .snst-form select:focus, .snst-form textarea:focus {
  border-color: var(--accent);
  background: var(--bg);
  outline: none;
}
.snst-form textarea { min-height: 130px; resize: vertical; }
.snst-form__submit { margin-top: var(--s6); }
.snst-form__submit button { width: 100%; height: 52px; font-size: var(--t-base); }
.snst-form__notice { padding: var(--s4); border-radius: var(--r); font-size: var(--t-sm); margin-bottom: var(--s6); }
.snst-form__notice--success { background: rgba(0, 113, 227, 0.09); color: var(--accent-600); }
.snst-form__notice--error { background: rgba(176, 32, 32, 0.08); color: #A11B1B; }

.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top: none;
  border-radius: var(--r);
  background: var(--bg-2);
  font-size: var(--t-sm);
  color: var(--ink);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--accent); }

/* =========================================================
   Barra fija de movil
   ========================================================= */

.snst-actionbar { display: none; }
.storefront-handheld-footer-bar { display: none !important; }

/* =========================================================
   Sangre completa en la portada
   ========================================================= */

body.home #content.site-content > .col-full {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
/* Storefront reserva 4,23em sobre el contenido de la portada con un
   selector de 3 clases; hay que igualarlo o queda una franja blanca. */
body.home.page-template-template-homepage .site-main,
body.home.page-template-template-homepage #primary.content-area {
  width: 100%;
  float: none;
  margin: 0;
  padding: 0;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1100px) {
  .snst-cat-grid { grid-template-columns: repeat(3, 1fr); }
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, 1fr); }
  .snst-about__inner { grid-template-columns: 1fr; gap: var(--s12); }
  .snst-card-contact { position: static; }
}

@media (max-width: 900px) {
  .snst-hero { min-height: 0; padding-top: clamp(56px, 9vw, 88px); }
  .snst-lines__inner { grid-template-columns: 1fr; }
  .snst-cta__inner { grid-template-columns: 1fr; gap: var(--s8); }
  .snst-cta__actions { flex-direction: row; flex-wrap: wrap; }
  .snst-footer__inner { grid-template-columns: 1fr 1fr; }
  .snst-quote-page__grid { grid-template-columns: 1fr; gap: var(--s8); }
  .snst-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 782px) {
  #masthead.site-header .col-full { flex-wrap: wrap; gap: var(--s3); }
  .snst-header-actions { max-width: none; width: 100%; }

  /* En movil el placeholder no cabia: entre la lupa de la izquierda y el
     boton "Buscar" solo quedaban 191px para un texto de 194px, y se cortaba
     a media palabra. Se quita la lupa (el boton ya dice que es una busqueda)
     y se estrecha el boton. */
  .snst-search { max-width: none; padding-left: 14px; }
  .snst-search > svg { display: none; }
  .snst-search input[type="search"] { padding-left: 0; }
  .snst-search button { padding: 0 14px; }
  .snst-basket { display: none; }     /* vive en la barra fija inferior */
  .snst-topbar__place { display: none; }
  /* Con el buscador en su propia fila, la cabecera ya es alta: el logo
     baja a 48px para no comerse un cuarto de la pantalla. */
  .site-header .site-branding img.snst-mark__logo { height: 48px; }

  /* En movil la cabecera envuelve en tres filas (marca, buscador, menu) y
     se iba a ~190px. Fija, eso dejaba un tercio de la pantalla permanente-
     mente ocupado. Aqui deja de ser fija y se va con el scroll: las dos
     acciones que importan (llamar y presupuesto) ya viven siempre visibles
     en la barra inferior. */
  #masthead.site-header { position: static; }
  #masthead.site-header .col-full { padding-top: var(--s2); padding-bottom: var(--s2); }
  .snst-topbar__inner { justify-content: center; }
  .snst-topbar__contacts a[href^="mailto"] { display: none; }

  .snst-section, .snst-about, .snst-cta, .snst-lines, .snst-hero,
  .snst-quote-page { padding-left: var(--s4); padding-right: var(--s4); }

  .snst-actionbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s2);
    position: fixed;
    left: var(--s3);
    right: var(--s3);
    bottom: var(--s3);
    z-index: 999;
    padding: 8px;
    background: rgba(255, 255, 255, 0.84);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    backdrop-filter: saturate(180%) blur(24px);
    border-radius: 980px;
    box-shadow: var(--sh-3);
  }
  .snst-actionbar__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: 46px;
    border-radius: 980px;
    background: transparent;
    color: var(--ink);
    font-size: var(--t-sm);
    font-weight: 500;
  }
  .snst-actionbar__btn svg { width: 17px; height: 17px; }
  .snst-actionbar__btn--signal { background: var(--accent); color: #fff; }
  .snst-actionbar__btn--signal:hover { color: #fff; }

  body { padding-bottom: 78px; }

  .snst-panel {
    position: fixed;
    left: var(--s3);
    right: var(--s3);
    bottom: 78px;
    top: auto;
    width: auto;
    transform-origin: bottom center;
  }
  .snst-flash { bottom: 92px; }
}

@media (max-width: 640px) {
  /* El pie bajaba de 4 a 2 columnas y ahi se quedaba: en un movil de 375px
     esas dos columnas no caben y el contenido se salia mas de 120px por la
     derecha. En pantalla estrecha va en una sola columna. */
  .snst-footer__inner {
    grid-template-columns: 1fr;
    gap: var(--s8);
    padding-left: var(--s4);
    padding-right: var(--s4);
  }
  .snst-footer__bottom-inner { flex-direction: column; align-items: flex-start; gap: var(--s3); }

  .snst-cat-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
  .snst-form { padding: var(--s6); }
  .snst-form__row { grid-template-columns: 1fr; }
  .snst-cat__img, .snst-plate__img--loop { padding: var(--s4); }
  .snst-cat__meta { flex-direction: column; align-items: flex-start; gap: 4px; padding: var(--s3) var(--s4) var(--s4); }
  .woocommerce ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product .woocommerce-loop-product__title {
    padding: var(--s4) var(--s4) var(--s1);
    font-size: var(--t-sm);
    min-height: calc(2 * 1.35em + var(--s4) + var(--s1));
  }
  .woocommerce ul.products li.product .price, ul.products li.product .price { padding: 0 var(--s4) var(--s3); }
  .snst-add { padding: 0 var(--s4) var(--s4); flex-wrap: wrap; gap: 6px; }
  .snst-add .snst-quote-btn { flex: 1 1 100%; }
  .snst-hero__search { height: 52px; padding-left: 16px; }
  .snst-hero__search button { height: 42px; padding: 0 20px; }
}

/* Moviles estrechos (iPhone SE y similares). Ni con el boton estrechado
   cabia el texto del buscador, asi que se cambian los papeles: vuelve la
   lupa y desaparece el boton "Buscar" — el teclado del movil ya trae tecla
   de busqueda en un input[type=search], y Enter envia igual. */
@media (max-width: 400px) {
  .snst-search > svg { display: block; }
  .snst-search input[type="search"] { padding-left: 10px; }
  .snst-search button { display: none; }
}

/* =========================================================
   Resumen (TL;DR)
   ========================================================= */

.snst-tldr {
  background: var(--bg-2);
  border-radius: var(--r-lg);
  padding: var(--s6);
  margin: 0 0 var(--s6);
}
.snst-tldr--ancho { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); margin-bottom: var(--s8); }
.snst-tldr--ancho .snst-tldr__list { margin-bottom: 0; }
.snst-tldr__label {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--accent-600);
  margin-bottom: var(--s3);
}
.snst-tldr__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); }
.snst-tldr__list li { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; padding-left: 20px; position: relative; }
.snst-tldr__list li::before {
  content: "";
  position: absolute;
  left: 4px; top: 8px;
  width: 5px; height: 5px;
  border-radius: 980px;
  background: var(--accent);
}
.snst-tldr__list b { color: var(--ink); font-weight: 600; }

/* =========================================================
   Preguntas frecuentes
   ========================================================= */

.snst-faq { background: var(--bg-2); }
.snst-faq__list { display: flex; flex-direction: column; gap: var(--s2); max-width: 860px; }

.snst-faq__item {
  background: var(--bg);
  border-radius: var(--r);
  overflow: hidden;
  transition: box-shadow 300ms var(--ease-soft);
}
.snst-faq__item[open] { box-shadow: var(--sh-1); }

.snst-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s6);
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.snst-faq__q::-webkit-details-marker { display: none; }
.snst-faq__q:hover { color: var(--accent-600); }
.snst-faq__q svg {
  width: 18px; height: 18px;
  color: var(--ink-3);
  flex-shrink: 0;
  transition: transform 300ms var(--ease);
}
.snst-faq__item[open] .snst-faq__q svg { transform: rotate(180deg); }

.snst-faq__a { padding: 0 var(--s6) var(--s6); }
.snst-faq__a p { margin: 0; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.6; max-width: 68ch; }

/* =========================================================
   Compartir y cluster de enlaces
   ========================================================= */

.snst-share { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.snst-share__label { font-size: var(--t-xs); color: var(--ink-3); margin-right: var(--s1); }
.snst-share__btn {
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 980px;
  background: var(--bg-2);
  color: var(--ink-2);
  padding: 0;
  cursor: pointer;
  transition: background 220ms var(--ease-soft), color 220ms var(--ease-soft), transform 220ms var(--ease);
}
.snst-share__btn svg { width: 17px; height: 17px; }
.snst-share__btn:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }

.snst-cluster {
  font-size: var(--t-sm);
  color: var(--ink-2);
  background: var(--bg-2);
  border-radius: var(--r);
  padding: var(--s4) var(--s6);
  margin: var(--s6) 0;
}

/* =========================================================
   Banner de cookies
   =========================================================
   Los dos botones tienen el mismo tamaño y peso visual: la AEPD exige
   que rechazar cueste lo mismo que aceptar.
   ========================================================= */

.snst-cookies {
  position: fixed;
  left: var(--s4);
  right: var(--s4);
  bottom: var(--s4);
  z-index: 1200;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  animation: snst-cookies-in 520ms var(--ease) both 400ms;
}
.snst-cookies[hidden] { display: none; }
@keyframes snst-cookies-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.snst-cookies__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s8);
  flex-wrap: wrap;
}
.snst-cookies__texto { flex: 1 1 380px; }
.snst-cookies__t { font-size: var(--t-base); font-weight: 600; color: var(--ink); margin: 0 0 var(--s1); }
.snst-cookies__d { font-size: var(--t-sm); color: var(--ink-2); margin: 0; line-height: 1.55; max-width: 74ch; }
.snst-cookies__acciones { display: flex; gap: var(--s3); flex: 0 0 auto; }
.snst-cookies__acciones .snst-btn { min-width: 132px; }
.snst-btn--neutro { background: var(--bg-2); color: var(--ink); }
.snst-btn--neutro:hover { background: rgba(0, 0, 0, 0.09); color: var(--ink); }

/* =========================================================
   Paginas legales
   ========================================================= */

.snst-legal-nota {
  background: #FFF6E5;
  border-radius: var(--r);
  padding: var(--s4) var(--s6);
  margin-bottom: var(--s8);
}
.snst-legal-nota p { margin: 0; font-size: var(--t-sm); color: #6B4E00; }
.snst-legal-nota code { background: rgba(0, 0, 0, 0.06); padding: 1px 5px; border-radius: 4px; }
.snst-legal-fecha { font-size: var(--t-xs); color: var(--ink-3); margin-top: var(--s8); }

.snst-footer__legal { display: flex; gap: var(--s4); flex-wrap: wrap; }
.snst-footer__legal a { color: var(--ink-3); }
.snst-footer__legal a:hover { color: var(--accent-600); }

@media (max-width: 782px) {
  .snst-cookies { left: var(--s3); right: var(--s3); bottom: 78px; }
  .snst-cookies__inner { padding: var(--s4); gap: var(--s4); }
  .snst-cookies__acciones { width: 100%; }
  .snst-cookies__acciones .snst-btn { flex: 1 1 0; min-width: 0; }
}

/* Storefront reparte el morado de WooCommerce (#7f54b3) por el foco en
   tres sitios, y estos tres llevan DOS clases, asi que ganan a un
   `button:focus` suelto. Se igualan uno a uno. */
.button.alt:focus,
.button.added_to_cart:focus,
.button.wc-forward:focus,
.woocommerce a.button.alt:focus,
.woocommerce button.button.alt:focus,
.woocommerce input.button.alt:focus,
.woocommerce #respond input#submit.alt:focus {
  outline-color: var(--accent);
}

/* =========================================================
   Pagina "Sobre nosotros"
   =========================================================
   La pagina se pinta desde `the_content`, o sea DENTRO de la columna de
   1200px de Storefront. Las bandas que van a sangre salen de ahi con el
   truco de `margin-inline: calc(50% - 50vw)`, que funciona porque el
   contenedor esta centrado.

   Nota sobre 100vw: incluye la barra de scroll, asi que la banda se pasa
   unos 15px por la derecha. No se ve porque `.site` ya lleva
   `overflow-x: clip` (ver arriba: es lo que sustituyo al `hidden` de
   Storefront, que rompia todos los `position: sticky`).
   ========================================================= */

/* La pagina trae su propio H1 dentro del hero: el titulo generico de
   Storefront sobra, y dos H1 en la misma pagina son un H1 de menos. */
.snst-body-sobre .entry-header { display: none; }
.snst-body-sobre .site-main { margin-bottom: 0; }
.snst-body-sobre .hentry { margin-bottom: 0; }
.snst-body-sobre .storefront-breadcrumb { margin-bottom: 0; padding-bottom: var(--s4); }

.snst-sobre { max-width: none; }
.snst-sobre p { margin: 0 0 var(--s4); }

/* Storefront subraya TODO enlace del contenido con `.hentry
   .entry-content a` (0,2,1), asi que los botones, las tarjetas de familia
   y los enlaces con flecha salian subrayados. Repetir la declaracion no
   sirve: hay que ganarle en especificidad. */
.hentry .entry-content .snst-sobre a { text-decoration: none; }
/* Los creditos de las fotos si son texto enlazado y llevan subrayado. */
.hentry .entry-content .snst-sficha__creditos a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* La cabecera es fija: sin esto los enlaces internos (#cronologia,
   #donde-estamos) dejan el titulo debajo de la barra. */
.snst-sobre [id] { scroll-margin-top: 104px; }

/* Banda a sangre. */
.snst-sh,
.snst-scrit,
.snst-scron,
.snst-scat,
.snst-sproc,
.snst-slug,
.snst-sficha,
.snst-scta {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: clamp(56px, 6.5vw, 104px) var(--s6);
}

/* Envoltorio interior: recupera la retícula de 1200px. */
.snst-sh__inner,
.snst-scrit__inner,
.snst-scron__inner,
.snst-scat__inner,
.snst-sproc__inner,
.snst-slug__inner,
.snst-sficha__inner,
.snst-scta__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Titulo de seccion comun a toda la pagina. */
.snst-h2 {
  font-size: var(--t-lg);
  font-weight: 600;
  margin: 0 0 var(--s3);
  letter-spacing: -0.028em;
}
.snst-h2--on-deep { color: var(--on-dark); }

/* ---------------------------------------------------------
   1. Hero
   --------------------------------------------------------- */

.snst-sh {
  background: var(--navy-900);
  color: var(--on-dark);
  padding-top: clamp(64px, 7vw, 112px);
  padding-bottom: 0;
}

/* La foto: a sangre dentro de la banda (de ahi el margen negativo, que
   cancela el padding lateral) y con pie propio. Alto fijo por `clamp` +
   `object-fit` para que no se coma la pantalla en portatiles bajos. */
.snst-sh__foto {
  margin: clamp(48px, 5vw, 80px) calc(var(--s6) * -1) 0;
}
.snst-sh__foto picture { display: block; }
.snst-sh__foto img {
  display: block;
  width: 100%;
  height: clamp(200px, 24vw, 400px);
  object-fit: cover;
  object-position: 50% 58%;
}
.snst-sh__foto figcaption {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s4) var(--s6) var(--s6);
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--on-dark-mut);
}

.snst-sh__title {
  font-size: var(--t-xl);
  font-weight: 600;
  color: #fff;
  margin: 0 0 var(--s6);
  max-width: 16ch;
}
.snst-sh__lead {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--on-dark);
  max-width: 62ch;
  margin: 0 0 var(--s12);
}

.snst-sh__cifras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s6);
  max-width: 860px;
  margin: 0 0 var(--s8);
  padding-top: var(--s6);
  border-top: 1px solid var(--on-dark-line);
}
.snst-sh__cifras div { min-width: 0; }
.snst-sh__cifras dt {
  font-size: var(--t-xs);
  font-weight: 500;
  color: var(--on-dark-mut);
  margin: 0 0 var(--s2);
}
.snst-sh__cifras dd {
  font-size: var(--t-md);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}

.snst-sh__acciones { display: flex; flex-wrap: wrap; gap: var(--s3); }
.snst-sh__acciones svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------
   2. Criterio: lo que si / lo que no
   --------------------------------------------------------- */

.snst-scrit { background: var(--bg); }
.snst-scrit__head { max-width: 680px; margin: 0 0 var(--s12); }

.snst-scrit__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6);
  align-items: start;
}

.snst-scrit__col {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--sh-1);
}
/* La columna de los "no" va apagada a proposito: informa, no compite. */
.snst-scrit__col--no {
  background: var(--bg-2);
  border-color: transparent;
  box-shadow: none;
}

.snst-scrit__label {
  font-size: var(--t-sm);
  font-weight: 600;
  margin: 0 0 var(--s6);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.snst-scrit__label--si { color: var(--accent-600); }
.snst-scrit__label--no { color: var(--ink-3); }

.snst-scrit__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s6); }
.snst-scrit__item { display: flex; gap: var(--s4); align-items: flex-start; }
.snst-scrit__item b { display: block; font-weight: 600; color: var(--ink); margin-bottom: var(--s1); }
.snst-scrit__item p { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); }

.snst-scrit__icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-wash);
  color: var(--accent-600);
}
.snst-scrit__icon svg { width: 17px; height: 17px; }
.snst-scrit__icon--no { background: rgba(0, 0, 0, 0.06); color: var(--ink-3); }

/* ---------------------------------------------------------
   3. Cronologia
   --------------------------------------------------------- */

.snst-scron { background: var(--bg-2); }
.snst-scron__head { max-width: 680px; margin: 0 0 var(--s12); }
.snst-scron__desc { color: var(--ink-2); font-size: var(--t-md); margin: 0; max-width: 56ch; }

.snst-scron__lista { list-style: none; margin: 0; padding: 0; }

.snst-scron__hito {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: var(--s8);
  position: relative;
  padding: 0 0 var(--s12);
}
/* El raíl: una línea continua entre hitos, cortada en el último. */
.snst-scron__hito::before {
  content: "";
  position: absolute;
  left: 178px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: var(--line-2);
}
.snst-scron__hito:last-child { padding-bottom: 0; }
.snst-scron__hito:last-child::before { display: none; }

/* El punto del raíl. */
.snst-scron__hito::after {
  content: "";
  position: absolute;
  left: 173px;
  top: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--line-2);
}
.snst-scron__hito--ahora::after {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-wash);
}

.snst-scron__marca {
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: var(--s6);
  padding-top: 1px;
}
.snst-scron__hito--ahora .snst-scron__marca { color: var(--accent-600); }

.snst-scron__cuerpo { padding-left: var(--s6); max-width: 62ch; }
.snst-scron__titulo {
  font-size: var(--t-md);
  font-weight: 600;
  margin: 0 0 var(--s3);
  letter-spacing: -0.02em;
}
.snst-scron__cuerpo p { color: var(--ink-2); margin: 0 0 var(--s3); }

.snst-scron__fuente {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin: 0 !important;
}
.snst-scron__fuente svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ---------------------------------------------------------
   4. Que servimos
   --------------------------------------------------------- */

.snst-scat { background: var(--bg); }
.snst-scat__head { max-width: 680px; margin: 0 0 var(--s12); }
.snst-scat__desc { color: var(--ink-2); font-size: var(--t-md); margin: 0; max-width: 56ch; }

.snst-scat__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s8);
}

.snst-scat__card {
  display: block;
  border-radius: var(--r);
  padding: var(--s4);
  background: var(--bg-2);
  color: var(--ink);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), background 220ms var(--ease-soft);
}
.snst-scat__card:hover {
  transform: translateY(-3px);
  background: var(--bg);
  box-shadow: var(--sh-2);
  color: var(--ink);
}

.snst-scat__img {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg);
  margin-bottom: var(--s3);
}
.snst-scat__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.snst-scat__nombre { display: block; font-size: var(--t-sm); font-weight: 600; line-height: 1.3; }
.snst-scat__num {
  display: block;
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------
   5. Como trabajamos
   --------------------------------------------------------- */

.snst-sproc { background: var(--bg-2); }
.snst-sproc__head { max-width: 680px; margin: 0 0 var(--s12); }

.snst-sproc__pasos {
  list-style: none;
  margin: 0 0 var(--s8);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6);
}
.snst-sproc__paso {
  background: var(--bg);
  border-radius: var(--r-xl);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--sh-1);
}
.snst-sproc__n {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--accent-600);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s6);
}
.snst-sproc__paso h3 { font-size: var(--t-md); font-weight: 600; margin: 0 0 var(--s3); }
.snst-sproc__paso p { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); }

.snst-sproc__nota {
  display: flex;
  gap: var(--s4);
  align-items: flex-start;
  background: var(--accent-wash);
  border-radius: var(--r-lg);
  padding: var(--s6);
}
.snst-sproc__nota p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; max-width: 78ch; }
.snst-sproc__nota b { color: var(--ink); }
.snst-sproc__nota-icon { color: var(--accent-600); flex-shrink: 0; }
.snst-sproc__nota-icon svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------
   6. Donde estamos
   --------------------------------------------------------- */

.snst-slug {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  color: var(--on-dark);
  isolation: isolate;
}
.snst-slug__bg { position: absolute; inset: 0; z-index: 0; }
.snst-slug__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.snst-slug::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* El texto ocupa hasta el 61% del ancho: el velo se mantiene opaco
     hasta ahi y se abre despues, que es donde la foto no estorba. */
  background: linear-gradient(90deg,
    rgba(10, 37, 64, 0.95) 0%,
    rgba(10, 37, 64, 0.90) 46%,
    rgba(10, 37, 64, 0.62) 72%,
    rgba(10, 37, 64, 0.34) 100%);
}

.snst-slug__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.snst-slug__texto p { color: var(--on-dark-mut); max-width: 56ch; }
.snst-slug__mapas { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s6) 0 0 !important; }
.snst-slug__mapas svg { width: 15px; height: 15px; }

/* La tarjeta de contacto es `sticky` en la portada; aqui va dentro de una
   banda corta y quedaria flotando a destiempo. Ademas el navy macizo
   sobre foto oscura desaparece: se cambia por vidrio con borde. */
.snst-card-contact--sobre {
  position: static;
  top: auto;
  background: rgba(6, 24, 43, 0.72);
  border: 1px solid var(--on-dark-line);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
}

/* ---------------------------------------------------------
   7. Ficha de empresa
   --------------------------------------------------------- */

.snst-sficha { background: var(--bg); }
.snst-sficha__head { max-width: 680px; margin: 0 0 var(--s8); }

.snst-sficha__tabla {
  margin: 0;
  border-top: 1px solid var(--line);
  columns: 2;
  column-gap: var(--s12);
}
.snst-sficha__fila {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
}
.snst-sficha__fila dt { font-size: var(--t-sm); color: var(--ink-3); margin: 0; }
.snst-sficha__fila dd {
  font-size: var(--t-sm);
  color: var(--ink);
  font-weight: 500;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.snst-sficha__creditos {
  font-size: var(--t-xs);
  color: var(--ink-3);
  line-height: 1.6;
  margin: var(--s8) 0 0;
  max-width: 80ch;
}
.snst-sficha__creditos a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.snst-sficha__creditos a:hover { color: var(--accent-600); }

/* ---------------------------------------------------------
   8. Cierre
   --------------------------------------------------------- */

.snst-scta { background: var(--navy-900); color: var(--on-dark); }
.snst-scta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s12);
  flex-wrap: wrap;
}
.snst-scta__title { font-size: var(--t-lg); font-weight: 600; color: #fff; margin: 0 0 var(--s3); }
.snst-scta__desc { color: var(--on-dark-mut); font-size: var(--t-md); margin: 0; max-width: 52ch; }
.snst-scta__acciones { display: flex; flex-wrap: wrap; gap: var(--s3); }
.snst-scta__acciones svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------
   Adaptacion a pantallas estrechas
   --------------------------------------------------------- */

@media (max-width: 1024px) {
  .snst-scat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .snst-sficha__tabla { columns: 1; }
  .snst-slug__inner { grid-template-columns: 1fr; }
  .snst-sh__title { max-width: none; }
}

@media (max-width: 860px) {
  .snst-scrit__cols { grid-template-columns: 1fr; }
  .snst-sproc__pasos { grid-template-columns: 1fr; }
  .snst-sh__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }

  /* El raíl pasa de columna lateral a línea a la izquierda: en móvil no
     hay sitio para reservar 170px a una fecha. */
  .snst-scron__hito {
    grid-template-columns: 1fr;
    gap: var(--s2);
    padding-left: var(--s6);
    padding-bottom: var(--s8);
  }
  .snst-scron__hito::before { left: 4px; top: 24px; }
  .snst-scron__hito::after { left: 0; top: 6px; }
  .snst-scron__marca { text-align: left; padding-right: 0; font-size: var(--t-sm); }
  .snst-scron__cuerpo { padding-left: 0; }
}

@media (max-width: 560px) {
  .snst-scat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .snst-sficha__fila { grid-template-columns: 1fr; gap: 2px; }
  .snst-sh__acciones .snst-btn,
  .snst-scta__acciones .snst-btn { flex: 1 1 100%; }
}

/* Sin animacion para quien la ha desactivado en el sistema. */
@media (prefers-reduced-motion: reduce) {
  .snst-scat__card { transition: none; }
  .snst-scat__card:hover { transform: none; }
}