/* ==========================================================================
   Compumaib — hoja de estilos global
   Sistema de diseño: tokens de color (claro/oscuro), tipografía, layout,
   componentes reutilizables. Sin frameworks, CSS plano.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Color — modo claro (por defecto) */
  --color-bg: #F7F5F1;
  --color-bg-alt: #EFEBE3;
  --color-surface: #FFFFFF;
  --color-ink: #1A1817;
  --color-ink-soft: #57534E;
  --color-ink-faint: #8A857D;
  --color-border: #E1DCD1;
  --color-border-strong: #CFC8BA;

  --color-red: #C4282C;
  --color-red-dark: #96201F;
  --color-red-soft: #F5E3E1;
  --color-red-ink: #7A1917;

  --color-focus: #2563EB;

  /* Tipografía */
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.15rem;
  --text-lg: 1.4rem;
  --text-xl: clamp(1.75rem, 1.45rem + 1.3vw, 2.5rem);
  --text-2xl: clamp(2.1rem, 1.55rem + 2.3vw, 3.4rem);
  --text-3xl: clamp(2.5rem, 1.6rem + 3.8vw, 4.6rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.65;

  /* Layout */
  --content-width: 1200px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --space-2xs: 0.375rem;
  --space-xs: 0.625rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;

  --shadow-sm: 0 1px 3px rgba(26, 24, 23, 0.08);
  --shadow-md: 0 8px 24px rgba(26, 24, 23, 0.10);

  color-scheme: light;

  /* Íconos monocromáticos de Soluciones: rojo en modo claro */
  --icon-mono: var(--color-red);
}

[data-theme="dark"] {
  --icon-mono: var(--color-ink); /* en modo oscuro, --color-ink ya es casi blanco */
  --color-bg: #171514;
  --color-bg-alt: #1F1B19;
  --color-surface: #221E1C;
  --color-ink: #F3EFE9;
  --color-ink-soft: #C2BBB1;
  --color-ink-faint: #8D857B;
  --color-border: #322C28;
  --color-border-strong: #453D37;

  --color-red: #DE4A44;
  --color-red-dark: #E9736E;
  --color-red-soft: #3A211F;
  --color-red-ink: #F5B4B0;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Reset y base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}

img, svg { display: block; max-width: 100%; }

/* El atributo hidden debe ganar siempre, incluso sobre la regla anterior.
   Sin esto, elementos como las <img data-slide hidden> del carrusel del
   hero se muestran igual y rompen el layout. */
[hidden] { display: none !important; }

a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p { margin: 0 0 var(--space-sm); color: var(--color-ink-soft); }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: 1.2em; color: var(--color-ink-soft); }
li + li { margin-top: 0.4em; }

/* Foco visible siempre — accesibilidad de teclado */
:focus-visible {
  outline: 2.5px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-red);
  color: #fff;
  padding: 0.75em 1.25em;
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Layout utilitario
   -------------------------------------------------------------------------- */

.wrap {
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--space-2xl);
}
.section--tight { padding-block: var(--space-xl); }
.section--alt { background: var(--color-bg-alt); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-red);
  margin-bottom: var(--space-sm);
}
.eyebrow::before {
  content: "";
  width: 1.5em;
  height: 1.5px;
  background: currentColor;
}

.section-head {
  max-width: 42rem;
  margin-bottom: var(--space-lg);
}
.section-head--center { margin-inline: auto; text-align: center; }

.grid {
  display: grid;
  gap: var(--space-md);
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) {
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
}

/* Cuadrícula asimétrica para la sección de servicios: una tarjeta protagonista
   más grande y el resto en apoyo, en vez de tres cajas idénticas */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(160px, auto);
  gap: var(--space-md);
}
.bento .card--lead { grid-column: span 4; grid-row: span 2; display: flex; flex-direction: column; justify-content: flex-end; }
.bento .card--sub { grid-column: span 2; }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .bento .card--lead, .bento .card--sub { grid-column: span 1; grid-row: auto; }
}

/* --------------------------------------------------------------------------
   4. Botones y enlaces de acción
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: 0.9em 1.6em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-red);
  color: #fff;
}
.btn--primary:hover { background: var(--color-red-dark); }

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

.btn--on-dark {
  background: #fff;
  color: #171514; /* siempre oscuro: este botón vive sobre la foto/overlay del hero, que siempre es oscura, sin importar el tema del sitio */
}
.btn--on-dark:hover { background: #F5E3E1; }

/* --------------------------------------------------------------------------
   5. Encabezado del sitio
   -------------------------------------------------------------------------- */

site-header { display: block; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 0.9rem;
}

/* El logo actúa como botón de regreso a inicio, en el extremo derecho del header */
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  order: 3;
  margin-left: var(--space-sm);
  padding: 0.3rem 0.7rem 0.3rem 0.3rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.site-header__logo:hover { border-color: var(--color-border-strong); background: var(--color-bg-alt); }
.site-header__logo .logo-icon { height: 40px; width: 40px; flex: none; }
.site-header__logo .logo-icon svg { width: 100%; height: 100%; display: block; }
.site-header__logo .logo-wordmark { font-size: var(--text-md); }

/* Color de la marca: sigue el tema del sitio (data-theme), no el del sistema operativo */
.brand-mark .cls-1 { fill: var(--color-red); }
.brand-mark .cls-2 { fill: var(--color-ink); transition: fill 0.2s ease; }
/* El pie de página siempre tiene fondo oscuro, sin importar el tema activo del sitio,
   así que aquí se fuerza el color claro para que el ícono nunca se vuelva invisible */
.brand-mark--on-dark .cls-2 { fill: #F3EFE9; }
.brand-mark--on-dark .cls-1 { fill: var(--color-red); }
.site-header__logo .logo-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-ink);
  white-space: nowrap;
}
.site-header__logo .logo-wordmark span { color: var(--color-red); }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  order: 1;
}

.site-header__actions { order: 2; }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 500;
}

.site-nav__list a {
  text-decoration: none;
  color: var(--color-ink-soft);
  padding: 0.4em 0.1em;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.site-nav__list a:hover,
.site-nav__list a[aria-current="page"] {
  color: var(--color-ink);
  border-color: var(--color-red);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover { border-color: var(--color-red); color: var(--color-red); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    height: 100vh;
    background: var(--color-surface);
    flex-direction: column;
    align-items: stretch;
    padding: 5.5rem var(--gutter) var(--space-lg);
    gap: var(--space-lg);
    transform: translateX(100%);
    transition: transform 0.28s ease;
    border-left: 1px solid var(--color-border);
  }
  .site-nav[data-open="true"] { transform: translateX(0); }
  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: var(--text-md);
  }
  .site-header__actions { gap: 0.5rem; }
}

.nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 17, 0.4);
  z-index: 90;
}
.nav-scrim[data-open="true"] { display: block; }

/* --------------------------------------------------------------------------
   6. Pie de página
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--color-ink);
  color: #E7E2DB;
  padding-block: var(--space-xl) var(--space-lg);
}
[data-theme="dark"] .site-footer { background: #100E0D; }

.site-footer a { text-decoration: none; }
.site-footer .wrap { color: #E7E2DB; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(231, 226, 219, 0.15);
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-grid h4 {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: #C9C2B7;
  margin-bottom: var(--space-sm);
}

.footer-grid ul { list-style: none; padding: 0; margin: 0; color: #E7E2DB; }
.footer-grid li { margin: 0 0 0.6em; color: #E7E2DB; }
.footer-grid a { color: #E7E2DB; opacity: 0.92; text-decoration: none; }
.footer-grid a:hover { opacity: 1; color: var(--color-red-dark); }

.footer-logo { margin-bottom: var(--space-sm); }
.footer-tagline { color: #CFC8BD; max-width: 26rem; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  font-size: var(--text-xs);
  color: #C9C2B7;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   7. Componentes de contenido reutilizables
   -------------------------------------------------------------------------- */

/* Tarjeta de oferta/servicio */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); transform: translateY(-2px); }

.card__tile {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--color-red);
  margin-bottom: var(--space-sm);
  animation: tile-breathe 4.5s ease-in-out infinite;
}
@keyframes tile-breathe {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50% { transform: rotate(4deg) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .card__tile { animation: none; transform: rotate(-6deg); }
}

/* Foto dentro de una tarjeta (Inicio, Servicios): imagen arriba, contenido abajo */
.card--photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--photo .card__photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.card--photo .card__body { padding: var(--space-md); }
.bento .card--photo.card--lead .card__photo { aspect-ratio: 16 / 9; }
.bento .card--photo.card--lead { justify-content: flex-start; }

.card h3 { margin-bottom: 0.5em; }
.card p { font-size: var(--text-sm); }
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-red);
  text-decoration: none;
}
.card__link svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
.card__link:hover svg { transform: translateX(3px); }

/* Bloque destacado con cita */
.quote {
  border-left: 3px solid var(--color-red);
  padding-left: var(--space-md);
}
.quote p {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--color-ink);
  font-weight: 500;
}
.quote cite {
  display: block;
  margin-top: var(--space-sm);
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-ink-faint);
}

/* Franja CTA final — foto de fondo con un velo oscuro suave, la misma en todo el sitio */
.cta-band {
  position: relative;
  color: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(23,21,20,0.66) 0%, rgba(23,21,20,0.78) 100%),
    url('/assets/img/cta/cta-fondo.jpg') center / cover no-repeat;
  background-color: var(--color-ink); /* respaldo mientras no exista la foto */
}
.cta-band h2 { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,0.35); }
.cta-band p { color: #EDE8E1; max-width: 34rem; margin-inline: auto; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
.cta-band .btn { margin-top: var(--space-md); }

/* Lista de verificación (para páginas de soluciones) */
.check-list { list-style: none; padding: 0; }
.check-list li {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}
.check-list li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.5em;
  border-radius: 2px;
  background: var(--color-red);
  transform: rotate(45deg);
}

/* Términos técnicos explicados inline */
.term {
  border-bottom: 1px dotted var(--color-ink-faint);
  text-decoration: none;
  cursor: help;
}

/* Tarjetas de "sector atendido" / chips */
.chip-list { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; list-style: none; }
.chip {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  padding: 0.5em 0.9em;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------------
   8. Hero dinámico: video de fondo o carrusel de fotos
   -------------------------------------------------------------------------- */

.hero-media {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
}

.hero-media__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media__bg video,
.hero-media__bg .carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel__slide {
  opacity: 0;
  transition: opacity 1400ms ease;
  background-size: cover;
  background-position: center;
}
.carousel__slide[data-active="true"] { opacity: 1; }

/* Marcador de posición: patrón geométrico en tonos de marca, hasta que haya
   fotos/video reales del taller o del equipo para reemplazarlo */
.hero-media__placeholder {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--color-red) 55%, transparent) 0%, transparent 45%),
    repeating-linear-gradient(-35deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 34px),
    linear-gradient(160deg, #241f1c 0%, #171514 65%);
}

.hero-media__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Oscurecido consistente en toda la franja del texto (no solo el borde
     inferior), para que funcione igual con fotos claras u oscuras. Además
     un velo leve parejo (::after de la regla siguiente) evita que una foto
     muy blanca "lave" el texto incluso en la franja superior. */
  background:
    linear-gradient(0deg, rgba(8,7,6,0.94) 0%, rgba(8,7,6,0.82) 35%, rgba(8,7,6,0.5) 75%, rgba(8,7,6,0.32) 100%);
}

.hero-media__content {
  position: relative;
  z-index: 2;
  padding-block: var(--space-xl) var(--space-lg);
  width: 100%;
}

.hero-media__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-red-dark);
  margin-bottom: var(--space-sm);
  display: block;
}

.hero-media h1 {
  color: #fff;
  max-width: 18ch;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.hero-media__subtitle {
  color: #F1EDE6;
  font-size: var(--text-md);
  max-width: 38ch;
  margin-bottom: var(--space-md);
  text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}
.hero-media__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.carousel-dots {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-lg);
  z-index: 2;
  display: flex;
  gap: 0.5rem;
}
.carousel-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  background: transparent;
  padding: 0; cursor: pointer;
}
.carousel-dots button[data-active="true"] { background: #fff; }

/* --------------------------------------------------------------------------
   8b. Ensamblado del logo real — elemento de firma fuera del hero
   -------------------------------------------------------------------------- */

.logo-build {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}
.logo-build svg { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   10. Acordeón (hub de Soluciones): resumen expandible sin salir de la página
   -------------------------------------------------------------------------- */

.acc-list { border-top: 1px solid var(--color-border); }

.acc-item {
  border-bottom: 1px solid var(--color-border);
}

.acc-item summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 1.4rem 0;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary::marker { content: ""; }

.acc-item__tile {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 9px;
  background: var(--color-red);
  transform: rotate(-6deg);
  animation: tile-breathe 4.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .acc-item__tile { animation: none; }
}

/* Cuando el cuadrado rojo se reemplaza por un ícono SVG propio */
.acc-item__icon {
  flex: none;
  width: 38px; height: 38px;
  display: block;
}

/* Ícono monocromático de Soluciones: rojo en modo claro, blanco en oscuro.
   Se aplica sobre SVGs incrustados en el HTML (no archivos externos), porque
   solo así puede leer el data-theme del sitio y no el del sistema operativo. */
.solution-icon path,
.solution-icon rect,
.solution-icon circle,
.solution-icon ellipse {
  fill: var(--icon-mono);
  transition: fill 0.2s ease;
}

.card__icon {
  width: 44px; height: 44px;
  margin-bottom: var(--space-sm);
  display: block;
}

.acc-item__title {
  flex: 1;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--color-ink);
}

.acc-item summary svg {
  flex: none;
  width: 20px; height: 20px;
  color: var(--color-ink-faint);
  transition: transform 0.25s ease;
}
.acc-item[open] summary svg { transform: rotate(180deg); }

.acc-item__body {
  padding: 0 0 1.75rem;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-md);
}
@media (max-width: 720px) {
  .acc-item__body { grid-template-columns: 1fr; }
}
.acc-item__body p { font-size: var(--text-sm); }
.acc-item__body .check-list li { font-size: var(--text-sm); }

.acc-item__detail-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-red);
  text-decoration: none;
}
.acc-item__detail-link svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
.acc-item__detail-link:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   13. Blog (conectado a WordPress vía API — ver assets/js/blog.js)
   -------------------------------------------------------------------------- */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card { text-decoration: none; color: inherit; display: block; }
.blog-card__photo {
  width: 100%; aspect-ratio: 16/10; object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}
.blog-card__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  margin-top: var(--space-sm);
}
.blog-card h3 { margin: 0.3em 0 0.4em; font-size: var(--text-md); }
.blog-card p { font-size: var(--text-sm); }

.blog-state {
  text-align: center;
  padding: var(--space-lg) 0;
  color: var(--color-ink-faint);
  font-size: var(--text-sm);
}

/* Tipografía del cuerpo de un artículo (contenido que llega desde WordPress) */
.article-content { max-width: 56rem; margin-inline: auto; }
.article-content h2 { font-size: var(--text-lg); margin-top: 2em; }
.article-content h3 { font-size: var(--text-md); margin-top: 1.6em; }
.article-content p { font-size: var(--text-base); line-height: var(--leading-normal); margin-bottom: 1.2em; }
.article-content img { width: 100%; border-radius: var(--radius-md); margin: 1.5em 0; }
.article-content ul, .article-content ol { margin-bottom: 1.2em; }
.article-content a { color: var(--color-red); }
.article-content blockquote {
  border-left: 3px solid var(--color-red);
  padding-left: var(--space-md);
  margin: 1.5em 0;
  font-style: italic;
  color: var(--color-ink-soft);
}
.article-header__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  margin-bottom: var(--space-sm);
}
.article-header__photo {
  width: 100%; max-height: 420px; object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
}

/* Título pequeño en rojo/mayúsculas: la línea se dibuja y el texto entra.
   Solo se ve "oculto antes de animar" si confirmamos que JS está activo
   (ver [data-js] en el <head>) — así nunca queda invisible sin JavaScript. */
[data-js] .eyebrow {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.eyebrow { position: relative; }
.eyebrow::before {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.eyebrow.is-visible,
.eyebrow.is-visible::before { transform: none; }
.eyebrow.is-visible { opacity: 1; }
[data-js] .eyebrow.is-visible::before { transform: scaleX(1); }

/* Tarjetas, filas del acordeón y franja CTA: entran suave y en cascada */
[data-js] .card, [data-js] .acc-item, [data-js] .cta-band {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.card.is-visible, .acc-item.is-visible, .cta-band.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow, .eyebrow::before, .card, .acc-item, .cta-band {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* Botón flotante "volver arriba" */
.back-to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 80;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--color-ink);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}
[data-theme="dark"] .back-to-top { background: var(--color-red); }
.back-to-top[data-show="true"] { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--color-red); }
.back-to-top svg { width: 20px; height: 20px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.stat-row {
  display: flex;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}
.stat { font-family: var(--font-mono); }
.stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-red);
  font-weight: 600;
}
.stat span { font-size: var(--text-xs); color: var(--color-ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }

.breadcrumb {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-faint);
  margin-bottom: var(--space-md);
}
.breadcrumb a { color: var(--color-ink-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-red); }
/* ==========================================================================
   ARREGLO: scroll horizontal fantasma en móvil
   Causa: el menú deslizante (#site-nav) usa position:fixed + transform
   para esconderse fuera de pantalla, pero algunos navegadores móviles
   igual reservan ese espacio al calcular el ancho de la página.
   Esta regla es la red de seguridad estándar para este problema exacto.
   Agregar al FINAL de assets/css/styles.css
   ========================================================================== */
html, body { overflow-x: hidden; max-width: 100%; } .site-nav__cta { display: none; } @media (max-width: 860px) { .site-header__actions .btn--primary { display: none; } .site-nav__cta { margin-top: var(--space-md); display: block; } .site-nav__cta .btn, .site-nav__cta a.btn { display: flex; justify-content: center; color: #FFFFFF !important; background-color: var(--color-red) !important; border-color: var(--color-red) !important; } .site-nav__cta .btn:hover, .site-nav__cta a.btn:hover { background-color: var(--color-red-dark) !important; } } .nav-toggle svg { width: 20px; height: 20px; } html, body { position: relative; touch-action: pan-y; }

.social-link {
    
      display: inline-flex;
      
        align-items: center;
        
          justify-content: center;
          
            width: 36px;
            
              height: 36px;
              
                border-radius: 50%;
                
                  background: rgba(231, 226, 219, 0.12);
                  
                    color: #E7E2DB;
                    
                      margin-right: 0.5rem;
                      
                        transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
                        
}

.social-link:hover {
    
      background: #C4282C;
      
        color: #FFFFFF;
        
          transform: translateY(-2px);
          
}

.social-link svg {
    
      width: 17px;
      
        height: 17px;
        
          display: block;
          
}
}
}
}
/* --------------------------------------------------------------------------
   Legibilidad de artículos del blog en modo oscuro
   El contenido llega desde WordPress con colores fijos en línea
   (style="color:...", style="background:..."), pensados solo para fondo
   claro. Esta regla los neutraliza en modo oscuro sin tocar el HTML del
   artículo ni el modo claro.
   -------------------------------------------------------------------------- */
[data-theme="dark"] .article-content [style*="background"] {
  background: var(--color-bg-alt) !important;
}

[data-theme="dark"] .article-content [style*="color"]:not(a):not(strong) {
  color: var(--color-ink) !important;
}

[data-theme="dark"] .article-content a[style*="color"] {
  color: var(--color-red) !important;
}

[data-theme="dark"] .article-content strong[style*="color"] {
  color: var(--color-red) !important;
}