/* =========================================================
   M3SOLARIS — sistema de diseño base (css/styles.css)
   =========================================================
   Theme base nativo Joomla 6 para tiendas EasyStore + SP Page Builder.
   SIN Bootstrap, SIN Lenis: CSS propio + vanilla JS (js/core.js).

   RE-SKIN POR PROYECTO: cambiar SOLO los tokens de §02 (:root).
   Mismo vocabulario que el proyecto 264 (--paper, --ink, --mute, --rule,
   --accent, --gutter, --display, --body, --mono) con valores neutros.

   Reglas anti-colisión (método del proyecto):
   - Clases nuevas con prefijo tb- (bs- es legado, solo secciones).
   - Estados propios .is-* — NUNCA .active, .show, .open, .hidden,
     .visible, .collapse (territorio Bootstrap/SPBuilder/Joomla).
   - background-color SIEMPRE en propiedad larga donde haya transición
     (el shorthand background + color-mix congela la animación).
   - Los wrappers de SPBuilder pueden traer position/overflow: cualquier
     absolute del snippet ancla al wrapper más cercano, no a la sección.
     Neutralizar con CSS quirúrgico (ver §13).

   ─────────────────────────────────────────────────────────
   ÍNDICE DEL ARCHIVO
   ─────────────────────────────────────────────────────────
   §01  Reset ligero + documento ................ L~45
   §01b Lenis (opt-in) + scrollbar oculta ....... L~72
   §02a Fuentes libres (@font-face, fonts/) ..... L~105
   §02  Tokens (:root) — RE-SKIN AQUÍ ........... L~135
   §02b Tinta automática (.is-over-dark/light) .. L~200
   §03  Accesibilidad (skip, focus, sr) ......... L~225
   §04  Tipografía base + .text-mono ............ L~255
   §04b Utilidades tipográficas (.tb-caps,
        .tb-display) y alto de pantalla (svh) ... L~320
   §05  Layout (container, main) ................ L~215
   §06–§08  NAVEGACIÓN → paquetes nav/<id>/ ...
        (promobar, topbar, logo, menú, drawer)
   §09  Botones (.tb-btn, .sppb-btn) ........... L~470
   §10  Formularios base (com_users, contacto) .. L~520
   §11  Core Joomla: mensajes, paginación,
        breadcrumbs ............................. L~560
   §12  Secciones bs-section--light/--dark ...... L~625
   §13  SPBuilder: notas de neutralización ...... L~665
   §14  Reveal on scroll ........................ L~700
   §14b Componentes base (tb-hero, tb-card) ... L~712
   §15  Módulos (chrome .tb-module) ............ L~750
   §16  Footer .................................. L~730
   §17  Responsive (≤768) + reduced-motion ...... L~780

   NOTA: añadir bloques nuevos al final de su sección temática
   y actualizar este índice. El orden respeta la cascada.
   ========================================================= */


/* ---------- §01 · Reset ligero + documento ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

/* Bloqueo de scroll horizontal (regla del proyecto):
   clip es más estricto que hidden (no crea scroll context);
   hidden queda como fallback para navegadores viejos.
   Aplicado a html Y body (iOS Safari ignora el de html solo). */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
  overflow-x: clip;
}

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

/* Anclas con scroll suave nativo (cuando Lenis está apagado) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}


/* ---------- §01b · Lenis (opt-in) + scrollbar oculta ---------- */
/* Clases que inyecta Lenis en <html> cuando el parámetro "Scroll suave"
   está activo. Inertes si Lenis no corre. Recordatorio 264: carruseles
   con scroll propio → data-lenis-prevent-touch (NUNCA data-lenis-prevent,
   que bloquea también la rueda vertical). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Scrollbar nativa oculta (parámetro "Ocultar barra de scroll").
   El scroll sigue funcionando: solo desaparece la barra. */
html.tb-noscrollbar {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge legacy */
}

html.tb-noscrollbar::-webkit-scrollbar {
  display: none;                /* WebKit/Blink */
  width: 0;
  height: 0;
}


/* ---------- §02a · Fuentes libres (@font-face) ---------- */
/* Dos familias VARIABLES con licencia SIL OFL 1.1 (libres para web y
   para redistribuir dentro del theme; licencias en fonts/LICENSE-*).
   Portado del registro de mut_mariona, que usa Univers + Franklin Gothic
   Condensed de Monotype —esas NO se pueden publicar sin licencia web—.
   Estas son las equivalentes libres más cercanas:

     tb-body     Inter   (neo-grotesca, eje wght 100–900)    → Univers
     tb-display  Archivo (grotesca, ejes wght 100–900 y
                          wdth 62–125 %)                     → Franklin
                                                               Condensed
   Un solo archivo por familia, subset latín (cubre ñ, á, ü, ç, €…).
   Nombres propios "tb-*" a propósito: si el visitante tiene Inter
   instalada en local no se mezcla con la nuestra.

   Cambiar de fuentes en un proyecto: NO se tocan estas reglas; se
   declaran las suyas en custom.css y se redefinen --body / --display.
   Si el proyecto no las usa, el navegador no las descarga (una
   @font-face solo se pide cuando algún elemento la usa). */
@font-face {
  font-family: "tb-body";
  src: url("../fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "tb-display";
  src: url("../fonts/archivo-latin-wdth.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}


/* ---------- §02 · Tokens (:root) — RE-SKIN AQUÍ ---------- */
/* Valores NEUTROS a propósito: el theme base no lleva identidad.
   Cada tienda redefine estos tokens (y solo estos) en su proyecto. */
:root {
  /* Color */
  --paper:  #ffffff;                  /* blanco puro — el theme NO pinta
                                         fondos de página por defecto */
  --ink:    #161513;                  /* texto principal */
  --mute:   #6f6b64;                  /* texto secundario */
  --rule:   rgba(0, 0, 0, 0.14);      /* separadores */
  --accent: #161513;                  /* acción/acento — neutro: cambiar por proyecto */

  /* Copia fija de la tinta clara: la usa .is-over-light (§02b) para
     volver a tinta oscura DENTRO de una zona que ya redefinió --ink. */
  --light-ink:  #161513;
  --light-mute: #6f6b64;

  /* Tema oscuro (secciones bs-section--dark y topbar en dark) */
  --dark-paper: #161513;
  --dark-ink:   #f4f2ee;
  --dark-mute:  #a9a49b;
  --dark-rule:  rgba(255, 255, 255, 0.18);

  /* Tipografía — fuentes libres de §02a con el stack de sistema detrás
     (si el woff2 no llega, la página se ve con la de sistema). */
  --display: "tb-display", "Arial Narrow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --body:    "tb-body", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:    ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --fs-base: 16px;

  /* Anchura de la display: 75 % = condensada (registro Franklin
     Condensed). 100 % = normal. Solo hace efecto con tb-display u otra
     fuente con eje wdth; con fuentes sin eje se ignora sin romper. */
  --display-stretch: 75%;

  /* CUERPO DE TODO EL TEXTO DE INTERFAZ — un solo número.
     Menú, marca, caption de la barra, etiquetas, pies de foto y
     .tb-caps cuelgan de --ui-fs. Subir o bajar el registro tipográfico
     del sitio entero es cambiar este valor y las proporciones se
     mantienen. (Patrón de mut_mariona; allí vale 9px.) */
  --ui-fs: 14px;

  /* Navegación (topbar + drawer) — ajustar por proyecto sin tocar reglas.
     El nav va en la fuente de texto en caja alta con tracking (registro
     mut_mariona). Para volver al nav monoespaciado: --nav-font: var(--mono). */
  --nav-font:     var(--body);
  --nav-fs:       var(--ui-fs);
  --nav-tracking: 0.08em;

  /* Layout */
  --container: 1280px;
  --gutter:    24px;
  --topbar-h:  64px;
  --radius:    2px;

  /* Transiciones */
  --t-theme: 0.35s ease;   /* cambio de tema topbar/secciones */
  --t-ui:    0.2s ease;    /* hovers, foco */
}


/* ---------- §02b · Tinta automática (.is-over-dark / .is-over-light) ---------- */
/* Las pone js/ui.js §01 en cualquier bloque marcado con .tb-inkauto
   (y en las zonas de la barra "Tres zonas" con tinta = Medir): mide la
   luminancia de la foto o del fondo que tiene DEBAJO y marca el bloque.
   No pintan un color suelto: REDEFINEN los tokens del bloque, así que
   todo lo que cuelga de var(--ink) / var(--mute) —enlaces, iconos,
   separadores, burger— cambia solo, sin una regla más. Un valor
   declarado en el propio elemento gana al heredado sin pelear por
   especificidad. */
.is-over-dark {
  --ink:  var(--dark-ink, #f4f2ee);
  --mute: var(--dark-mute, #a9a49b);
  --rule: var(--dark-rule, rgba(255, 255, 255, 0.18));
  color: var(--dark-ink, #f4f2ee);
}

.is-over-light {
  --ink:  var(--light-ink, #161513);
  --mute: var(--light-mute, #6f6b64);
  --rule: rgba(0, 0, 0, 0.14);
  color: var(--light-ink, #161513);
}


/* ---------- §03 · Accesibilidad ---------- */
.tb-skip {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 200;
  padding: 10px 16px;
  background-color: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
  text-decoration: none;
}

.tb-skip:focus-visible { top: 8px; }

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

/* Solo lectores de pantalla (NO usar .visually-hidden ni .sr-only:
   nombres reclamados por Bootstrap y otros starters) */
.tb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* ---------- §04 · Tipografía base + .text-mono ---------- */
/* SIN background-color de salida: página/main/footer van en blanco
   (fondo del navegador). Un fondo global se define, si acaso, en el
   re-skin del proyecto (custom.css). */
body {
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.6em;
  font-family: var(--display);
  font-stretch: var(--display-stretch, 100%);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }

p { margin: 0 0 1em; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-ui), color var(--t-ui);
}

a:hover { text-decoration-color: var(--accent); }

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: calc(var(--gutter) * 1.5) 0;
}

::selection {
  background-color: var(--ink);
  color: var(--paper);
}

/* Etiqueta mono — convención del proyecto para snippets SPBuilder */
.text-mono {
  color: var(--mute);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}


/* ---------- §04b · Utilidades tipográficas + alto de pantalla ---------- */
/* .tb-caps: el registro de interfaz (caja alta, tracking, --ui-fs).
   .tb-display: titular condensado en caja alta, interlínea apretada.
   Se usan como clase en snippets de SPBuilder; no llevan color. */
.tb-caps {
  font-family: var(--nav-font, var(--body));
  font-size: var(--ui-fs, 14px);
  letter-spacing: var(--nav-tracking, 0.08em);
  line-height: 1.5;
  text-transform: uppercase;
}

.tb-display {
  font-family: var(--display);
  font-stretch: var(--display-stretch, 100%);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* .tb-h-screen: un bloque de UNA pantalla que no salta en móvil.
   vh se mide con la barra de direcciones escondida, así que la página
   brinca cada vez que aparece; svh no. Dos líneas: la de vh es la de
   reserva para navegadores sin svh. --screen-n es el % (100 = entera;
   90 deja asomar el bloque siguiente, que invita a bajar). */
.tb-h-screen {
  height: calc(var(--screen-n, 100) * 1vh);
  height: calc(var(--screen-n, 100) * 1svh);
}


/* ---------- §05 · Layout (container, main) ---------- */
/* .tb-container es SOLO del core (main, breadcrumbs, footer-bottom,
   páginas de sistema). El nav NO la usa: topbar__inner define su
   propio contenedor en nav.css §N2 — no acoplar el nav a esta clase. */
.tb-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.tb-main {
  min-height: 55vh;   /* evita footers flotando en páginas cortas */
}

.tb-main-top,
.tb-main-bottom { padding-block: var(--gutter); }


/* ---------- §06–§08 · NAVEGACIÓN → paquetes nav/<id>/ ---------- */
/* Promobar, topbar sticky, logo, menú escritorio, utilidades y drawer
   móvil viven en el paquete nav/<id>/ elegido (+ js/nav.js): hojas INDEPENDIENTES
   para poder cambiar el nav entre themes sin tocar este core.
   Contrato: nav.css consume los tokens de §02 (con fallbacks) y el
   body[data-theme] que escribe core.js. */


/* ---------- §07 · Cabecera: modos y variables (pestaña Menú → Cabecera) ----------
   index.php pone en <body>: tb-cab--solida | tb-cab--transparente
   (+ tb-cab--scroll-solida) y tb-cab--oculta, según el estilo y las clases de
   página tb-cab-solida / tb-cab-transparente / tb-cab-oculta / tb-cab-clara
   (esta última arranca la página con data-theme="dark": tinta clara y logo
   para fondos oscuros hasta que una sección marcada diga otra cosa).
   Variables (en «Mis archivos» o «CSS personalizado», también por página):
     --tb-head-bg / --tb-head-bg-dark      fondo sólido (claro / sobre oscuro)
     --tb-head-line / --tb-head-line-dark  línea inferior
     --tb-head-blur                        desenfoque del fondo (efecto cristal), p.ej. 12px
     --tb-head-bg-over / --tb-head-line-over  fondo y línea en modo transparente (transparent)
     --tb-head-offset                      hueco arriba del contenido en modo transparente (0)
   .tb-tbar (Tres zonas) ya es transparente por diseño: aquí solo hueco y ocultar. */
body.tb-cab--transparente .topbar:not(.tb-tbar) {
  position: absolute;
  left: 0;
  right: 0;
  background-color: var(--tb-head-bg-over, transparent);
  border-bottom-color: var(--tb-head-line-over, transparent);
  box-shadow: none;
}

body.tb-cab--transparente .topbar.is-scrolled:not(.tb-tbar) { position: fixed; top: 0; }

body.tb-cab--transparente.tb-cab--scroll-solida .topbar.is-scrolled:not(.tb-tbar) {
  background-color: var(--tb-head-bg, var(--paper, #ffffff));
  border-bottom-color: var(--tb-head-line, var(--rule, rgba(0, 0, 0, 0.14)));
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.07);
}

body.tb-cab--transparente.tb-cab--scroll-solida[data-theme="dark"] .topbar.is-scrolled:not(.tb-tbar) {
  background-color: var(--tb-head-bg-dark, var(--dark-paper, #161513));
  border-bottom-color: var(--tb-head-line-dark, var(--rule));
}

body.tb-cab--transparente .tb-main,
body.tb-cab--transparente.tb-nav-zones .tb-main { padding-top: var(--tb-head-offset, 0px); }

body.tb-cab--oculta .topbar,
body.tb-cab--oculta .tb-promobar { display: none; }

body.tb-cab--oculta.tb-nav-zones .tb-main { padding-top: 0; }


/* ---------- §07b · Cabecera al hacer scroll, marca del enlace activo y botón ----------
   body.tb-cab--esconde  → .topbar.is-hidden (js/nav.js) sube fuera de la vista
   body.tb-cab--encoge   → al bajar, la barra pasa a --tb-head-h-scroll y el logo a --logo-h-scroll
   body.tb-navmarca--subrayado | --punto | --fondo | --color  (pestaña Menú → Primer nivel)
   .tb-cta (posición header-cta): enlaces como botón. Variables --tb-cta-bg, --tb-cta-color,
   --tb-cta-line, --tb-cta-radius, --tb-cta-pad, --tb-cta-fs. */
body.tb-cab--esconde .topbar { transition: transform 0.3s ease, background-color var(--t-theme, 0.35s ease), color var(--t-theme, 0.35s ease), border-color var(--t-theme, 0.35s ease), box-shadow var(--t-theme, 0.35s ease); }
body.tb-cab--esconde .topbar.is-hidden { transform: translateY(-100%); }

body.tb-cab--encoge .topbar__inner,
body.tb-cab--encoge .tb-tbar { transition: min-height 0.3s ease; }
body.tb-cab--encoge .topbar.is-scrolled .topbar__inner,
body.tb-cab--encoge .tb-tbar.is-scrolled { min-height: var(--tb-head-h-scroll, 52px); }
body.tb-cab--encoge .mark-logo img { transition: height 0.3s ease, opacity var(--t-theme, 0.35s ease); }
body.tb-cab--encoge .topbar.is-scrolled .mark-logo img { height: var(--logo-h-scroll, 22px); }

.tb-navmarca--punto .tb-nav li > a,
.tb-navmarca--fondo .tb-nav li > a,
.tb-navmarca--color .tb-nav li > a { border-bottom-color: transparent !important; }

.tb-navmarca--punto .tb-nav .mod-menu > li > a { position: relative; }
.tb-navmarca--punto .tb-nav .mod-menu > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -2px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0;
  transition: opacity var(--t-ui, 0.2s ease);
}
.tb-navmarca--punto .tb-nav .mod-menu > li > a:hover::after,
.tb-navmarca--punto .tb-nav .mod-menu > li.active > a::after { opacity: 1; }

.tb-navmarca--fondo .tb-nav .mod-menu > li > a {
  padding-inline: 12px;
  border-radius: 999px;
  transition: background-color var(--t-ui, 0.2s ease);
}
.tb-navmarca--fondo .tb-nav .mod-menu > li > a:hover,
.tb-navmarca--fondo .tb-nav .mod-menu > li.active > a { background-color: color-mix(in srgb, currentColor 10%, transparent); }

.tb-navmarca--color .tb-nav .mod-menu > li > a:hover,
.tb-navmarca--color .tb-nav .mod-menu > li.active > a { color: var(--accent, currentColor); }

:where(body:not(.tb-nav-limpio)) .tb-cta { display: flex; align-items: center; gap: 8px; }
:where(body:not(.tb-nav-limpio)) .tb-cta p { margin: 0; }
:where(body:not(.tb-nav-limpio)) .tb-cta a {
  display: inline-flex;
  align-items: center;
  padding: var(--tb-cta-pad, 9px 18px);
  background-color: var(--tb-cta-bg, var(--ink, #161513));
  color: var(--tb-cta-color, var(--paper, #ffffff));
  border: 1px solid var(--tb-cta-line, var(--tb-cta-bg, var(--ink, #161513)));
  border-radius: var(--tb-cta-radius, 999px);
  font-family: var(--nav-font, inherit);
  font-size: var(--tb-cta-fs, 12px);
  letter-spacing: var(--nav-tracking, 0.08em);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--t-ui, 0.2s ease);
}
:where(body:not(.tb-nav-limpio)) .tb-cta a:hover { opacity: 0.85; }
.tb-tbar--blend .tb-cta a { background-color: #ffffff; color: #000000; border-color: #ffffff; }


/* ---------- §08b · Joomla core (submenús, selector de idioma…) → css/joomla.css ---------- */


/* ---------- §09 · Botones (.tb-btn, .sppb-btn) ---------- */
.tb-btn {
  display: inline-block;
  padding: 12px 28px;
  background-color: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-ui), color var(--t-ui);
}

.tb-btn:hover {
  background-color: transparent;
  color: var(--accent);
}

.tb-btn--ghost {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

.tb-btn--ghost:hover {
  background-color: var(--ink);
  color: var(--paper);
}

/* Botones SPBuilder → tipografía del sistema.
   !important necesario: SPBuilder emite estilos por id de addon. */
.sppb-btn {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}


/* ---------- §10–§11 · Formularios, mensajes, paginación, migas → css/joomla.css ---------- */


/* ---------- §12 · Secciones bs-section--light/--dark ---------- */
/* MISMOS NOMBRES que en proyecto 264: la clase custom se escribe en la
   sección SPBuilder (Ajustes de sección → clase CSS) y core.js las usa
   como fallback de detección de tema. OJO con el typo histórico
   "--ligh" (sin t): aquí NO hay alias — si falta la t, no pinta.
   Solo color/tema: el padding de sección lo define el builder. */
.bs-section--light {
  /* SIN fondo por defecto (todo blanco): el fondo de una sección
     clara lo define el builder o el proyecto si lo quiere. La clase
     sigue siendo el marcador de tema para core.js. */
  color: var(--ink);
}

.bs-section--dark {
  --ink:  var(--dark-ink);
  --mute: var(--dark-mute);
  --rule: var(--dark-rule);
  background-color: var(--dark-paper);
  color: var(--ink);
}

.bs-section--dark a { color: var(--ink); }


/* ---------- §13 · SPBuilder: notas de neutralización ---------- */
/* El snippet nunca es hijo directo de .bs-section: hay 5-7 wrappers
   (.sppb-container-inner > .sppb-row > .sppb-row-column > .sppb-column
   > .sppb-column-addons > .sppb-addon-wrapper > .clearfix). Algunos
   traen position:relative y/o overflow:hidden.

   Si un componente debe romper hacia la sección (sticker, imagen
   flotante), neutralizar QUIRÚRGICAMENTE — nunca en global:

   .sppb-section:has(.tb-mi-componente) .sppb-addon-wrapper {
     position: static;
     overflow: visible;
   }

   Sticky dentro del row flex de SPBuilder: va en la COLUMNA —
   .sppb-row-column { position: sticky; top: X; align-self: flex-start; }
   y la sección con overflow: clip (no hidden).

   NUNCA redefinir display/anchos de .sppb-row/.sppb-row-column:
   el grid es del builder (fracciones de 12 emitidas por id). */


/* ---------- §14 · Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}


/* ---------- §14b · Componentes base (tb-hero, tb-card) ---------- */
/* Piezas mínimas de tienda para snippets SPBuilder (ver landing.html). */
.tb-hero { padding-block: clamp(24px, 6vw, 72px); }

.tb-hero h1 { margin-bottom: 0.4em; }

/* Card de producto genérica. El placeholder de imagen SPBuilder
   ({{ aN_image }}) va SIEMPRE dentro de .tb-card__media. */
.tb-card { margin: 0; }

.tb-card__media {
  display: block;
  overflow: hidden;
  margin-bottom: 12px;
  background-color: var(--rule);
}

.tb-card__media img {
  display: block;
  width: 100%;
  height: auto;
}

.tb-card__title {
  margin: 0 0 2px;
  font-size: 1rem;
  font-weight: 500;
}

.tb-card a { text-decoration: none; }


/* ---------- §15 · Módulos (chrome .tb-module) ---------- */
.tb-module { margin-bottom: var(--gutter); }

.tb-module__title {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}

.tb-module ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tb-module li { padding-block: 4px; }


/* ---------- §16 · Footer ---------- */
/* footer1-4 = franjas FULL WIDTH apiladas, SIN márgenes ni paddings
   por defecto: el módulo o la sección SPBuilder de dentro define su
   propio layout, fondos y espaciados. El theme solo apila. */
.tb-footer {
  margin: 0;
  padding: 0;
}

.tb-footer__area {
  width: 100%;
  margin: 0;
  padding: 0;
}

.tb-footer a {
  text-decoration: none;
  color: var(--mute);
  transition: color var(--t-ui);
}

.tb-footer a:hover { color: var(--ink); }

.tb-footer__bottom {
  border-top: 1px solid var(--rule);
  padding-block: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}

.tb-footer__bottom p { margin: 0; }

/* ---------- §16b · Pie (pestaña Pie) y Social (pestaña Social) ----------
   Va en styles.css justo después de .tb-footer__bottom p (§16).
   Sumario:
   - Colores y relleno del pie: SOLO con su estado en el <footer>
     (.is-bg / .is-color / .is-link / .is-pad, tb_pie_clases) y su token
     (--tb-footer-bg/-color/-link/-pad, en línea desde index.php). Sin
     estado no se declara nada: el pie se calcula igual que antes y no
     se pisa el CSS del sitio. Sin fondo por defecto.
   - .tb-footer__legal: fila final con copyright y redes, en contenedor,
     misma tipografía mono que footer-bottom.
   - .tb-social: lista de iconos (Font Awesome de Joomla). Tamaño por
     modificador --sm/--md/--lg; color = el de los enlaces del pie;
     foco visible; área de toque mínima por tamaño. */
.tb-footer.is-bg    { background-color: var(--tb-footer-bg); }
.tb-footer.is-color { color: var(--tb-footer-color); }
.tb-footer.is-pad   { padding-block: var(--tb-footer-pad); }

/* Con color de texto propio, lo apagado (--mute) del pie lo sigue */
.tb-footer.is-color a,
.tb-footer.is-color .tb-footer__bottom,
.tb-footer.is-color .tb-footer__legal { color: inherit; }

/* Color de enlaces propio: hover con subrayado (no hay --ink fiable sobre un fondo elegido) */
.tb-footer.is-link a { color: var(--tb-footer-link); }
.tb-footer.is-link a:hover { color: var(--tb-footer-link); text-decoration: underline; }

.tb-footer__legal {
  border-top: 1px solid var(--rule);
  padding-block: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}

.tb-footer__legal-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
}

.tb-footer__copy { margin: 0; }

.tb-social {
  --tb-social-i: 18px;
  --tb-social-t: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* El borde del icono (no el de su área de toque) se alinea con el contenedor */
.tb-footer__legal-in .tb-social { margin-inline: calc((var(--tb-social-i) - var(--tb-social-t)) / 2); }

.tb-social--sm { --tb-social-i: 14px; --tb-social-t: 32px; }
.tb-social--lg { --tb-social-i: 24px; --tb-social-t: 44px; }

.tb-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tb-social-t);
  min-height: var(--tb-social-t);
  font-size: var(--tb-social-i);
  line-height: 1;
  border-radius: 4px;
}

.tb-social__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ≤768: copyright y redes apilados y alineados a la izquierda */
@media (max-width: 768px) {
  .tb-footer__legal-in { flex-direction: column; align-items: flex-start; }
}


/* ---------- §17 · Responsive (≤768) + reduced-motion ---------- */
/* Breakpoint principal del método del proyecto: 768px. */
@media (max-width: 768px) {
  :root { --gutter: 16px; --topbar-h: 56px; }

  /* reglas de nav ≤768 → en cada paquete nav/<id>/nav.css */
  /* footer1-4 no necesitan reglas responsive: son franjas full width */
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}