/* =============================================================================
   DURATAPAS ECOLÓGICAS  ·  assets/css/styles.css
   Hoja de estilos única del sitio. Sin frameworks, sin CDN, sin @import.
   -----------------------------------------------------------------------------
   ÍNDICE
   00 · TOKENS (colores, tipografía, espaciado, sombras, movimiento)
   01 · RESET MODERNO + BASE
   02 · TIPOGRAFÍA BASE Y UTILIDADES DE TEXTO
   03 · LAYOUT ( .wrap, .sec, .grid )
   04 · HEADER ( .topbar, .site-header, .nav, menú móvil, .skip )
   05 · BOTONES ( .btn y variantes )
   06 · CHIPS
   07 · HERO
   08 · STATS
   09 · TARJETAS ( .card )
   10 · LISTAS
   11 · TABLAS · COMPARATIVA · MATRIZ
   12 · DESTACADO · SELLOS
   13 · MEDIA · VIDEO · GALERÍA · LIGHTBOX
   14 · TABS
   15 · PASOS
   16 · SECTORES
   17 · IMPACTO (sustentabilidad)
   18 · FAQ
   19 · FORMULARIOS
   20 · CONTACTO ( .datos, .mapa )
   21 · CTA FINAL
   22 · FOOTER
   23 · FLOTANTES ( .fab, .volver-arriba, .barra-progreso )
   24 · REVEAL (animaciones al hacer scroll)
   25 · UTILIDADES ( .u-* )
   26 · PÁGINAS DE UTILIDAD: .pagina, .migas
   27 · PROSA (lectura larga)
   28 · FICHA TÉCNICA
   29 · LEGAL (aviso de privacidad)
   30 · ERROR 404
   31 · GRACIAS
   32 · ACCESIBILIDAD · MOVIMIENTO REDUCIDO
   33 · PRINT
   -----------------------------------------------------------------------------
   NOTAS PARA DISEÑO:
   · Para cambiar el verde de marca, edita --dt-green en :root (sección 00).
   · Todos los grises, sombras y radios viven como variables en :root.
   · Los breakpoints son exactamente 640px, 960px y 1280px.
   · Todo el movimiento respeta @media (prefers-reduced-motion: reduce).
   ============================================================================= */

/* =============================================================================
   00 · TOKENS
   ============================================================================= */
:root {
  /* --- Paleta oficial de marca (BUILDSPEC §1) --- */
    --dt-green:        #44AE4F;   /* verde marca (logotipo) */
    --dt-green-600:    #2F8F3B;   /* hover / bordes */
    --dt-green-700:    #1E7A2E;   /* texto verde AA sobre blanco */
    --dt-green-050:    #EEF8EF;   /* fondos suaves */
    --dt-dark:         #14171A;   /* negro marca (logotipo #303030 oscurecido para profundidad) */
    --dt-dark-800:     #1D2126;
  --dt-dark-700:     #2A2F35;
  --dt-ink:          #1A1D1B;   /* texto principal */
    --dt-body:         #454C48;   /* texto de párrafo */
    --dt-muted:        #6B7470;   /* texto secundario */
    --dt-line:         #E2E6E3;   /* bordes claros */
    --dt-bg:           #FFFFFF;
  --dt-bg-soft:      #F5F7F5;   /* fondo gris muy claro */
    --dt-bg-dark:      #101312;
  --dt-amber:        #F5A623;   /* acento para destacados/sellos */
    --dt-wa:           #25D366;   /* WhatsApp oficial */
    --dt-wa-dark:      #128C4A;

  /* --- Derivados de accesibilidad y profundidad ---
    --dt-muted (#6B7470) cumple AA sobre blanco (4.8:1) pero queda al límite
    sobre --dt-bg-soft (4.48:1). Para texto pequeño sobre fondos grises
    usamos --dt-muted-2 (5.2:1) y --dt-body para párrafos. */
    --dt-muted-2:      #616A66;   /* secundario AA sobre fondo gris claro */
    --dt-ink-soft:     #333A36;
  --dt-line-dark:    rgba(255, 255, 255, .14);
  --dt-line-strong:  #CFD6D1;
  --dt-overlay:      rgba(16, 19, 18, .62);
  --dt-overlay-strong: rgba(16, 19, 18, .84);

  /* --- Tipografía ---
    Se intenta primero la fuente self-hosted (assets/fonts/*.woff2).
    Si el archivo no existe, el navegador cae al stack del sistema:
    jamás se ve texto roto. */
    --font-display: "Archivo", "Be Vietnam Pro", "Segoe UI Variable Display",
    "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui,
    -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
    Menlo, Consolas, monospace;
  /* Escala fluida (BUILDSPEC §1) */
    --fs-h1:    clamp(2.1rem, 1.2rem + 3.6vw, 4rem);
  --fs-h2:    clamp(1.65rem, 1.1rem + 2.1vw, 2.7rem);
  --fs-h3:    clamp(1.15rem, .95rem + .7vw, 1.5rem);
  --fs-h4:    clamp(1.05rem, .98rem + .3vw, 1.2rem);
  --fs-lead:  clamp(1.02rem, .95rem + .45vw, 1.22rem);
  --fs-body:  1rem;
  --fs-sm:    .9rem;
  --fs-xs:    .8rem;
  --fs-eyebrow: .78rem;
  --fs-stat:  clamp(2.3rem, 1.5rem + 3vw, 3.6rem);

  /* --- Layout --- */
    --wrap:          1200px;
  --wrap-estrecho: 880px;
  --gutter:        clamp(1rem, .5rem + 2vw, 2rem);
  --sp-section:    clamp(3.5rem, 2rem + 6vw, 7rem);
  --hdr-h:         4.25rem;   /* alto del nav pegado; sincroniza scroll-padding */
    --hdr-h-stuck:   3.6rem;

  /* --- Espaciado --- */
    --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* --- Radios --- */
    --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-full: 999px;

  /* --- Sombras --- */
    --sh-1: 0 1px 2px rgba(16, 19, 18, .05), 0 1px 3px rgba(16, 19, 18, .06);
  --sh-2: 0 6px 18px -6px rgba(16, 19, 18, .14), 0 2px 6px rgba(16, 19, 18, .06);
  --sh-3: 0 24px 48px -18px rgba(16, 19, 18, .28), 0 8px 20px -10px rgba(16, 19, 18, .12);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .06);

  /* --- Movimiento --- */
    --t-fast: .18s;
  --t-med:  .32s;
  --t-slow: .6s;
  --ease:   cubic-bezier(.22, .61, .36, 1);

  /* --- Íconos (data URI, sin URLs externas) --- */
    --ico-check: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --ico-x: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------------
FUENTES SELF-HOSTED (opcionales)
Si los .woff2 no existen, el navegador ignora el @font-face y usa el stack
del sistema definido en --font-display / --font-body. Nada se rompe.
-------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: local("Archivo ExtraBold"), local("Archivo Bold"), local("Archivo"),
    url("../fonts/archivo-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: local("Archivo Bold"), local("Archivo"),
    url("../fonts/archivo-700.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: local("Inter"), local("Inter Regular"),
    url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: local("Inter SemiBold"), local("Inter"),
    url("../fonts/inter-600.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: local("Inter Bold"), local("Inter"),
    url("../fonts/inter-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =============================================================================
   01 · RESET MODERNO + BASE
   ============================================================================= */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* Evita que el header pegado tape los anclajes (#medidas, #contacto…) */ scroll-padding-top: calc(var(--hdr-h) + 1rem); overflow-x: hidden; /* blindaje contra scroll horizontal de 320px a 1440px */; }
  body { min-height: 100dvh; background-color: var(--dt-bg); color: var(--dt-body); font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; line-height: 1.7; letter-spacing: .002em; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  img, picture, video, canvas, svg { max-width: 100%; }
  img, video { display: block; height: auto; }
  img { border-style: none; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  /* Sprites SVG inline: ocupan cero espacio pero siguen en el DOM */
    .sprite,
    svg.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
  }
  /* Iconos del sprite */
    .ico,
    svg.ico {
    display: inline-block;
    inline-size: 1.25em;
    block-size: 1.25em;
    flex: 0 0 auto;
    vertical-align: -.2em;
    pointer-events: none;
  }
  .ico--sm { inline-size: 1em; block-size: 1em; }
  .ico--lg { inline-size: 1.6em; block-size: 1.6em; }
  .ico--xl { inline-size: 2.1em; block-size: 2.1em; }
  /* Foco visible: anillo verde de marca en TODA la navegación por teclado */
    :focus-visible {
    outline: 3px solid var(--dt-green);
    outline-offset: 2px;
    border-radius: var(--r-sm);
  }
  :focus:not(:focus-visible) { outline: none; }
  ::selection { background-color: var(--dt-green); color: #fff; text-shadow: none; }
  /* Saltar al contenido (accesibilidad) */
    .skip {
    position: fixed;
    inset-block-start: .5rem;
    inset-inline-start: .5rem;
    z-index: 500;
    translate: 0 -180%;
    padding: .7rem 1.1rem;
    background: var(--dt-dark);
    color: #fff;
    font-weight: 600;
    font-size: var(--fs-sm);
    text-decoration: none;
    border-radius: var(--r-sm);
    box-shadow: var(--sh-2);
    transition: translate var(--t-fast) var(--ease);
  }
  .skip:focus-visible { translate: 0 0; }
  hr { border: 0; border-block-start: 1px solid var(--dt-line); margin-block: var(--sp-6); }
  /* Tablas base (las clases .tabla refinan después) */
    table { border-collapse: collapse; border-spacing: 0; inline-size: 100%; }
  th { text-align: start; }
  caption { text-align: start; }

/* =============================================================================
   02 · TIPOGRAFÍA BASE Y UTILIDADES DE TEXTO
   ============================================================================= */
h1, h2, h3, h4, h5, h6 {
  color: var(--dt-ink);
  font-family: var(--font-display);
  font-weight: 800;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); line-height: 1.12; letter-spacing: -.018em; }
h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
h4 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; }
p { text-wrap: pretty; }
a { color: var(--dt-green-700); text-decoration-thickness: 1px; text-underline-offset: .18em; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--dt-green-600); }
strong, b { font-weight: 700; color: var(--dt-ink); }
small { font-size: var(--fs-xs); }
code, kbd, samp { font-family: var(--font-mono); font-size: .9em; background: var(--dt-bg-soft); border: 1px solid var(--dt-line); border-radius: var(--r-sm); padding: .1em .4em; }
/* Bajada / entradilla de sección */
.lead { font-size: var(--fs-lead); line-height: 1.65; color: var(--dt-body); max-width: 62ch; }
.lead--dark { color: rgba(255, 255, 255, .82); }
.subtitulo { display: block; font-family: var(--font-display); font-size: clamp(1.05rem, .96rem + .5vw, 1.3rem); font-weight: 700; line-height: 1.35; color: var(--dt-ink); margin-block: var(--sp-6) var(--sp-4); }
.nota { font-size: var(--fs-sm); line-height: 1.6; color: var(--dt-muted-2); border-inline-start: 3px solid var(--dt-green); padding-inline-start: var(--sp-4); margin-block: var(--sp-4); }
/* Etiqueta pequeña en mayúsculas con regla verde corta */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--dt-green-700);
  margin-block-end: var(--sp-3);
}
.eyebrow::before { content: ""; inline-size: 1.75rem; block-size: 2px; flex: 0 0 auto; background: var(--dt-green); border-radius: var(--r-full); }
.sec--dark .eyebrow, .hero .eyebrow, .cta-final .eyebrow, .site-footer .eyebrow { color: #8FD79A; }
/* Enlace de WhatsApp en texto */
.link-wa {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--dt-wa-dark);
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.link-wa:hover { color: var(--dt-wa-dark); border-block-end-color: var(--dt-wa-dark); }

/* =============================================================================
   03 · LAYOUT
   ============================================================================= */
/* Contenedor principal: 1200px máximo, padding lateral fluido */
.wrap {
  inline-size: 100%;
  max-inline-size: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--estrecho { max-inline-size: var(--wrap-estrecho); }
/* Sección base */
.sec { padding-block: var(--sp-section); position: relative; scroll-margin-top: calc(var(--hdr-h) + .5rem); }
.sec--gris { background-color: var(--dt-bg-soft); }
.sec--dark { background-color: var(--dt-bg-dark); color: rgba(255, 255, 255, .78); }
.sec--dark h1, .sec--dark h2, .sec--dark h3, .sec--dark h4, .sec--dark .subtitulo { color: #fff; }
.sec--dark p, .sec--dark li { color: rgba(255, 255, 255, .78); }
.sec--dark .lead { color: rgba(255, 255, 255, .82); }
.sec--dark strong, .sec--dark b { color: #fff; }
/* El hero también es oscuro: el <strong> debe ser blanco, no tinta oscura */
.hero strong, .hero b { color: #fff; }
.sec--dark .nota { color: rgba(255, 255, 255, .72); border-inline-start-color: var(--dt-green); }
.sec--dark a { color: #9BDFA4; }
.sec--dark a:hover { color: #fff; }
.sec--dark hr { border-block-start-color: var(--dt-line-dark); }
/* Encabezado de sección centrado */
.sec__head {
  max-inline-size: 760px;
  margin-inline: auto;
  text-align: center;
  margin-block-end: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
}
.sec__head .lead { margin-inline: auto; }
.sec__head .eyebrow { justify-content: center; }
.sec__head h2 { margin-block-end: var(--sp-4); }
.sec__head > :last-child { margin-block-end: 0; }
/* Rejillas */
.grid { display: grid; gap: clamp(1rem, .55rem + 1.4vw, 1.75rem); align-items: start; }
/* Los hijos de una cuadrícula no deben poder forzar el ancho de la columna:
   sin esto, un video o una tabla anchos rompen el diseño en celular. */
.grid > * { min-inline-size: 0; }
.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Separación amplia (secciones con aire extra) */
.gap-lg { gap: clamp(1.5rem, 1rem + 2.5vw, 3rem); }

/* =============================================================================
   04 · HEADER — topbar, nav pegado, menú móvil, skip
   ============================================================================= */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 200;
  background: var(--dt-bg);
}

/* ------ 4.1 Topbar (barra oscura superior) ------ */
.topbar {
  background: var(--dt-dark);
  color: rgba(255, 255, 255, .74);
  font-size: var(--fs-xs);
  line-height: 1.4;
  border-block-end: 1px solid rgba(255, 255, 255, .06);
  max-block-size: 4rem;
  transition: max-block-size var(--t-med) var(--ease),
    opacity var(--t-med) var(--ease);
  overflow: hidden;
}
.topbar__in { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 1.25rem; min-block-size: 2.4rem; padding-block: .35rem; max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
.topbar__in::-webkit-scrollbar { display: none; }
.topbar__item { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; color: inherit; text-decoration: none; }
.topbar__item .ico { color: var(--dt-green); }
a.topbar__item:hover { color: #fff; }
.topbar__item + .topbar__item::before { content: ""; inline-size: 1px; block-size: .9em; background: rgba(255, 255, 255, .18); margin-inline-end: .8rem; }
.topbar__links { display: inline-flex; align-items: center; gap: 1.25rem; }
/* Al hacer scroll la barra desaparece y el nav se compacta */
.site-header.is-stuck .topbar { max-block-size: 0; opacity: 0; }

/* ------ 4.2 Nav ------ */
.nav {
  position: relative;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-block-end: 1px solid var(--dt-line);
  transition: box-shadow var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}
.site-header.is-stuck .nav { box-shadow: var(--sh-2); border-block-end-color: transparent; }
.nav__in { display: flex; align-items: center; gap: .75rem; min-block-size: var(--hdr-h); transition: min-block-size var(--t-med) var(--ease); }
.site-header.is-stuck .nav__in { min-block-size: var(--hdr-h-stuck); }
/* Logo / marca */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--dt-ink);
  margin-inline-end: auto;
  flex: 0 0 auto;
}
.brand img { block-size: 44px; inline-size: auto; max-inline-size: 180px; object-fit: contain; transition: block-size var(--t-med) var(--ease); }
.site-header.is-stuck .brand img { block-size: 38px; }
.brand span, .brand strong { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.1; letter-spacing: -.01em; color: var(--dt-ink); }
.brand small { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--dt-muted-2); }
/* Botón hamburguesa / cerrar */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex: 0 0 auto;
  border: 1px solid var(--dt-line-strong);
  border-radius: var(--r-sm);
  color: var(--dt-ink);
  cursor: pointer;
  background: var(--dt-bg);
  transition: border-color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.nav__toggle:hover { border-color: var(--dt-green); color: var(--dt-green-700); background: var(--dt-green-050); }
.nav__toggle .ico { inline-size: 1.5rem; block-size: 1.5rem; }
/* Intercambio hamburguesa ⇄ X */
.nav__toggle .ico-close,
.nav__toggle .ico-menu { transition: opacity var(--t-fast) var(--ease), scale var(--t-fast) var(--ease); }
.nav__toggle .ico-close { display: none; }
.nav.is-open .nav__toggle .ico-menu { display: none; }
.nav.is-open .nav__toggle .ico-close { display: inline-block; }
/* Enlace de idioma */
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .6rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dt-muted-2);
  text-decoration: none;
  border: 1px solid var(--dt-line);
  border-radius: var(--r-full);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav__lang:hover { color: var(--dt-green-700); border-color: var(--dt-green); }
/* CTA del nav */
.nav__cta { display: none; }

/* ------ 4.3 Menú: escritorio ------ */
.nav__menu { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav__menu a { display: inline-block; padding: .55rem .8rem; font-size: var(--fs-sm); font-weight: 600; color: var(--dt-ink-soft); text-decoration: none; border-radius: var(--r-sm); position: relative; transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.nav__menu a::after { content: ""; position: absolute; inset-inline: .8rem; inset-block-end: .28rem; block-size: 2px; background: var(--dt-green); border-radius: var(--r-full); scale: 0 1; transform-origin: left center; transition: scale var(--t-med) var(--ease); }
.nav__menu a:hover { color: var(--dt-green-700); }
.nav__menu a:hover::after, .nav__menu a[aria-current="page"]::after { scale: 1 1; }
.nav__menu a[aria-current="page"] { color: var(--dt-green-700); }
/* Acciones al final del nav */
.nav__in > .nav__cta, .nav__in > .btn { margin-inline-start: .35rem; }

/* ------ 4.4 Menú: móvil (< 960px) ------
Panel a pantalla completa anclado bajo el header. Se anima con opacity y
translateY (nunca con translateX) para no generar scroll horizontal. */
@media (max-width: 959.98px) {
  .nav__toggle { margin-inline-start: auto; }
  .nav__in .nav__cta { display: none; }
  .brand { margin-inline-end: 0; }
  .nav__menu {
    /* Se ancla al borde inferior real del nav (no a un valor fijo) para que
       el panel quede siempre pegado aunque el topbar cambie de alto. */
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: 190;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    inline-size: 100%;
    max-inline-size: 100vw;
    max-block-size: calc(100dvh - var(--hdr-h) - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem var(--gutter) 2rem;
    background: var(--dt-bg);
    border-block-end: 1px solid var(--dt-line);
    box-shadow: var(--sh-3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    translate: 0 -.75rem;
    transition: opacity var(--t-med) var(--ease),
      translate var(--t-med) var(--ease),
      visibility 0s linear var(--t-med);
  }
  .nav__menu a { display: flex; align-items: center; min-block-size: 3rem; padding: .6rem .5rem; font-size: 1.05rem; font-weight: 600; border-block-end: 1px solid var(--dt-line); border-radius: 0; }
  .nav__menu a::after { display: none; }
  .nav__menu li:last-child a { border-block-end: 0; }
  .nav__menu .nav__cta, .nav__menu .btn { display: inline-flex; inline-size: 100%; justify-content: center; margin-block-start: 1rem; min-block-size: 3rem; }
  /* Estado abierto */
  .nav.is-open .nav__menu,
  .nav__menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    translate: 0 0;
    transition-delay: 0s, 0s, 0s;
  }
  /* Bloqueo del scroll de fondo cuando el panel está abierto */
  body:has(.nav.is-open) { overflow: hidden; }
}
@media (max-width: 639.98px) {
  /* El topbar se vuelve una tira compacta: horario oculto, contacto visible */
  .topbar__in { justify-content: flex-start; gap: .9rem; }
  .topbar { font-size: .72rem; }
  .topbar__item + .topbar__item::before { margin-inline-end: .6rem; }
  .topbar__links { display: none; }
  /* El botón hamburguesa siempre cabe, incluso a 320px */
  .nav__in { gap: .4rem; }
}
/* Horario: es el primer dato del topbar (ver BUILDSPEC §6) y se oculta en
   pantallas angostas para que la tira respire. Se cubren las dos formas:
   por posición (:first-child, la que produce el HTML real) y por clase
   opcional .topbar__item--horario si el autor prefiere marcarla. */
@media (max-width: 959.98px) {
  .topbar__item:first-child,
  .topbar__item--horario { display: none; }
}
@media (max-width: 639.98px) {
  /* En la tira compacta los separadores verticales estorban */
  .topbar__item + .topbar__item::before { display: none; }
}
@media (min-width: 640px) {
  .nav__cta { display: inline-flex; }
}
@media (min-width: 960px) {
  .nav__toggle { display: none; }
  .nav__menu { position: static; }
  /* Entre 960 y 1279px el menú es horizontal pero estrecho: se comprime y se
     oculta solo el CTA secundario. El botón principal de cotizar siempre queda. */
  .nav__in { gap: .35rem; }
  .nav__in > .btn--ghost { display: none; }
  .nav__menu a { padding-inline: .5rem; font-size: .84rem; }
  .nav__menu a::after { inset-inline: .5rem; }
  .brand img { max-inline-size: 140px; }
  .brand span, .brand strong { font-size: .95rem; }
}
@media (min-width: 1280px) {
  .nav__in { gap: .75rem; }
  .nav__in > .btn--ghost { display: inline-flex; }
  .nav__menu a { padding-inline: .8rem; font-size: var(--fs-sm); }
  .nav__menu a::after { inset-inline: .8rem; }
}
/* El header pegado reduce el hueco de anclaje */
.site-header.is-stuck ~ main { scroll-margin-top: 0; }

/* =============================================================================
   05 · BOTONES
   ============================================================================= */
.btn {
  --btn-bg: var(--dt-bg);
  --btn-fg: var(--dt-ink);
  --btn-bd: var(--dt-line-strong);
  --btn-bg-h: var(--dt-bg-soft);
  --btn-fg-h: var(--dt-ink);
  --btn-bd-h: var(--dt-ink);
  --spin: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  position: relative;
  min-block-size: 2.9rem;
  padding: .72rem 1.35rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-full);
  background-color: var(--btn-bg);
  background-image: none;
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: .97rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    translate var(--t-fast) var(--ease);
}
.btn:hover { background-color: var(--btn-bg-h); border-color: var(--btn-bd-h); color: var(--btn-fg-h); translate: 0 -1px; }
.btn:active { translate: 0 0; }
.btn:focus-visible { outline: 3px solid var(--dt-green); outline-offset: 3px; }
.btn__ico { display: inline-flex; flex: 0 0 auto; inline-size: 1.15em; block-size: 1.15em; }
.btn__ico svg, .btn__ico .ico { inline-size: 100%; block-size: 100%; }

/* --- Botón primario: verde profundo para cumplir contraste AA con texto blanco --- */
.btn--primary {
  --btn-bg: linear-gradient(180deg, var(--dt-green-600), var(--dt-green-700));
  --btn-fg: #fff;
  --btn-bd: var(--dt-green-700);
  --btn-bg-h: linear-gradient(180deg, var(--dt-green-700), #15651F);
  --btn-fg-h: #fff;
  --btn-bd-h: #15651F;
  background-image: var(--btn-bg);
  box-shadow: var(--sh-1);
}
.btn--primary:hover { box-shadow: var(--sh-2); }
.btn--primary:focus-visible { outline-color: var(--dt-dark); }

/* --- WhatsApp (verde oficial de la marca WhatsApp) --- */
.btn--wa {
  --btn-bg: linear-gradient(180deg, #34DB74, var(--dt-wa));
  --btn-fg: #fff;
  --btn-bd: #1EB85A;
  --btn-bg-h: linear-gradient(180deg, var(--dt-wa), #1FC160);
  --btn-fg-h: #fff;
  --btn-bd-h: var(--dt-wa-dark);
  --spin: #fff;
  background-image: var(--btn-bg);
  text-shadow: 0 1px 1px rgba(0, 60, 25, .22);
  box-shadow: var(--sh-1);
}
.btn--wa:hover { box-shadow: var(--sh-2); }
.btn--wa:focus-visible { outline-color: var(--dt-wa-dark); }

/* --- Contorno verde: relleno al pasar el cursor --- */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--dt-green-700);
  --btn-bd: var(--dt-green);
  --btn-bg-h: var(--dt-green-700);
  --btn-fg-h: #fff;
  --btn-bd-h: var(--dt-green-700);
  --spin: var(--dt-green-700);
}
.btn--outline:hover { box-shadow: var(--sh-1); }

/* --- Ghost: para fondos oscuros. Nunca blanco sobre blanco. --- */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--dt-ink);
  --btn-bd: var(--dt-line-strong);
  --btn-bg-h: var(--dt-bg-soft);
  --btn-fg-h: var(--dt-ink);
  --btn-bd-h: var(--dt-ink);
  --spin: var(--dt-ink);
  border-style: solid;
}
.btn--ghost:hover { box-shadow: none; }
/* Overrides explícitos: cualquier ghost/outline sobre superficie oscura */
.sec--dark .btn--ghost,
.hero .btn--ghost,
.cta-final .btn--ghost,
.site-footer .btn--ghost,
.pagina__hero .btn--ghost {
  --btn-bg: rgba(255, 255, 255, .06);
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .42);
  --btn-bg-h: #fff;
  --btn-fg-h: var(--dt-ink);
  --btn-bd-h: #fff;
  --spin: #fff;
}
.sec--dark .btn--ghost:hover, .hero .btn--ghost:hover, .cta-final .btn--ghost:hover, .site-footer .btn--ghost:hover, .pagina__hero .btn--ghost:hover { box-shadow: var(--sh-2); }
.sec--dark .btn--outline, .hero .btn--outline, .cta-final .btn--outline, .pagina__hero .btn--outline { --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .5); --btn-bg-h: var(--dt-green-600); --btn-fg-h: #fff; --btn-bd-h: var(--dt-green-600); --spin: #fff; }
/* El outline sobre fondo oscuro rellena al hover y su texto debe seguir claro */
.sec--dark .btn--outline:hover, .hero .btn--outline:hover, .cta-final .btn--outline:hover, .pagina__hero .btn--outline:hover { color: #fff; }

/* --- Tamaño grande --- */
.btn--lg { min-block-size: 3.4rem; padding: .95rem 1.8rem; font-size: 1.05rem; }

/* --- Ancho completo --- */
.btn--block { display: flex; inline-size: 100%; }

/* --- Estado cargando (JS pone aria-busy="true" o .is-loading) --- */
.btn[aria-busy="true"],
.btn.is-loading {
  color: transparent;
  pointer-events: none;
  cursor: progress;
}
.btn[aria-busy="true"]::after, .btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 1.15rem; block-size: 1.15rem; border: 2px solid var(--spin); border-block-start-color: transparent; border-radius: 50%; animation: dt-girar .7s linear infinite; }
@keyframes dt-girar {
  to { rotate: 360deg; }
}

/* --- Deshabilitado --- */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  translate: none;
  box-shadow: none;
  filter: grayscale(.35);
}

/* =============================================================================
   06 · CHIPS
   ============================================================================= */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .85rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--dt-ink-soft);
  background: var(--dt-bg);
  border: 1px solid var(--dt-line);
  border-radius: var(--r-full);
  white-space: nowrap;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip::before { content: ""; inline-size: .95em; block-size: .95em; flex: 0 0 auto; background: var(--dt-green); -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; }
.chip:has(svg)::before, .chip:has(.ico)::before { display: none; }
.chip .ico { color: var(--dt-green-700); inline-size: 1em; block-size: 1em; }
.chip--strong { background: var(--dt-green-050); border-color: rgba(68, 174, 79, .35); color: var(--dt-green-700); font-weight: 700; }
/* Chips sobre fondo oscuro */
.sec--dark .chip,
.hero .chip,
.cta-final .chip {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .9);
}
.sec--dark .chip--strong, .hero .chip--strong { background: rgba(68, 174, 79, .18); border-color: rgba(68, 174, 79, .5); color: #A9E3B1; }

/* =============================================================================
   07 · HERO
   Fondo oscuro con textura industrial sutil (líneas repetidas a baja opacidad)
   más un resplandor verde radial. Sin imágenes de fondo externas.
   ============================================================================= */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--dt-bg-dark);
  color: rgba(255, 255, 255, .82);
  padding-block: clamp(2.75rem, 1.5rem + 5.5vw, 5.5rem) clamp(3rem, 1.5rem + 6vw, 6rem);
}
/* Textura: retícula fina + líneas diagonales apenas perceptibles */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 12px);
  pointer-events: none;
}
/* Resplandor verde suave arriba a la derecha */
.hero::after {
  content: "";
  position: absolute;
  inset-block-start: -45%;
  inset-inline-end: -25%;
  inline-size: min(90vw, 900px);
  aspect-ratio: 1;
  z-index: -1;
  background: radial-gradient(circle at center,
    rgba(68, 174, 79, .30) 0%,
    rgba(68, 174, 79, .10) 42%,
    transparent 70%);
  pointer-events: none;
}
.hero h1 { color: #fff; }
.hero .lead { color: rgba(255, 255, 255, .84); }
.hero__in { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); align-items: center; }
.hero__text > * + * { margin-block-start: var(--sp-4); }
.hero__text h1 { margin-block-start: var(--sp-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: var(--sp-6); }
.hero__cta .btn { flex: 1 1 auto; }
@media (min-width: 640px) {
  .hero__cta .btn { flex: 0 0 auto; }
}
.hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: var(--sp-5); padding: 0; list-style: none; }
.hero__chips li { margin: 0; }
.hero__note { margin-block-start: var(--sp-5); font-size: var(--fs-sm); line-height: 1.6; color: rgba(255, 255, 255, .68); max-inline-size: 52ch; }
.hero__note a, .hero__note .link-wa { color: #9BDFA4; }
.hero__note a:hover { color: #fff; }
/* Marco de la foto del hero */
.hero__media {
  position: relative;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3), 0 0 0 1px rgba(255, 255, 255, .08);
  background: var(--dt-dark-800);
}
.hero__media img, .hero__media picture { display: block; }
.hero__media img { inline-size: 100%; block-size: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-lg); }
.hero__media picture img { aspect-ratio: 3 / 2; object-fit: cover; }
/* Tarjeta flotante sobre la esquina de la imagen */
.hero__badge {
  position: absolute;
  inset-block-end: clamp(-1rem, -2vw, -.5rem);
  inset-inline-start: clamp(-.5rem, -2vw, 0rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .7rem 1rem;
  background: var(--dt-bg);
  color: var(--dt-ink);
  border: 1px solid var(--dt-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.25;
  max-inline-size: calc(100% - 2rem);
}
.hero__badge .ico, .hero__badge svg { inline-size: 1.4rem; block-size: 1.4rem; color: var(--dt-green-700); flex: 0 0 auto; }
.hero__badge strong { display: block; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.1; color: var(--dt-ink); }
.hero__badge small { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--dt-muted-2); }
/* Mini fila de confianza bajo la imagen */
.hero__mini {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.1rem;
  margin-block-start: 1.75rem;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .72);
}
.hero__mini li { display: inline-flex; align-items: center; gap: .4rem; }
.hero__mini .ico, .hero__mini svg { color: var(--dt-green); inline-size: 1.05rem; block-size: 1.05rem; }
/* Dos columnas desde 960px */
@media (min-width: 960px) {
  .hero__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2.5rem, 1rem + 4vw, 4.5rem); }
  .hero__cta .btn { flex: 0 0 auto; }
  .hero__media { margin-inline-end: .5rem; }
}

/* =============================================================================
   08 · STATS
   ============================================================================= */
.stats {
  position: relative;
  background: var(--dt-dark);
  color: rgba(255, 255, 255, .78);
  border-block-start: 1px solid rgba(255, 255, 255, .07);
  border-block-end: 1px solid rgba(255, 255, 255, .07);
  padding-block: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
}
.stats__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); text-align: center; }
@media (min-width: 640px) {
  .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 1.5vw, 2.75rem); }
  .stat + .stat { border-inline-start: 1px solid rgba(255, 255, 255, .1); }
}
.stat { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding-inline: .5rem; }
.stat__ico { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; margin-block-end: .35rem; border-radius: var(--r-full); background: rgba(68, 174, 79, .16); color: #8FD79A; }
.stat__ico .ico, .stat__ico svg { inline-size: 1.45rem; block-size: 1.45rem; }
.stat__num { display: block; font-family: var(--font-display); font-size: var(--fs-stat); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
.stat__lbl { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); max-inline-size: 22ch; }
/* Variante clara, por si los stats se usan dentro de `.sec` */
.sec .stats,
.stats--claro {
  background: var(--dt-bg);
  color: var(--dt-body);
  border-block-color: var(--dt-line);
}
.stats--claro .stat__num { color: var(--dt-ink); }
.stats--claro .stat__lbl { color: var(--dt-muted-2); }
.stats--claro .stat__ico { background: var(--dt-green-050); color: var(--dt-green-700); }
.stats--claro .stat + .stat { border-inline-start-color: var(--dt-line); }

/* =============================================================================
   09 · TARJETAS
   ============================================================================= */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: clamp(1.25rem, 1rem + .8vw, 1.75rem);
  background: var(--dt-bg);
  border: 1px solid var(--dt-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  transition: box-shadow var(--t-med) var(--ease),
    translate var(--t-med) var(--ease),
    border-color var(--t-med) var(--ease);
}
.card:hover { box-shadow: var(--sh-2); translate: 0 -3px; border-color: var(--dt-line-strong); }
.card > :first-child { margin-block-start: 0; }
.card > :last-child { margin-block-end: 0; }
/* Tarjeta con acento verde a la izquierda */
.card--borde {
  border-inline-start: 4px solid var(--dt-green);
  padding-inline-start: calc(clamp(1.25rem, 1rem + .8vw, 1.75rem) - 3px);
}
.card--borde:hover { border-inline-start-color: var(--dt-green-700); }
/* Tarjeta con imagen superior (sin padding alrededor de la media) */
.card--media { padding: 0; overflow: hidden; gap: 0; }
.card--media > .card__media { margin: 0; }
.card--media .card__t, .card--media .card__d { padding-inline: clamp(1.25rem, 1rem + .8vw, 1.75rem); }
.card--media .card__t { padding-block-start: clamp(1.1rem, 1rem + .5vw, 1.5rem); }
.card--media .card__d { padding-block-end: clamp(1.25rem, 1rem + .8vw, 1.75rem); }
.card__media { position: relative; overflow: hidden; background: var(--dt-bg-soft); border-block-end: 1px solid var(--dt-line); }
.card__media img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: scale var(--t-slow) var(--ease); }
.card--media:hover .card__media img { scale: 1.04; }
/* Etiqueta sobre la imagen */
.card__tag {
  position: absolute;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(16, 19, 18, .78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-full);
}
.card__tag--verde { background: var(--dt-green-700); border-color: transparent; }
/* Icono circular verde */
.card__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 48px;
  block-size: 48px;
  flex: 0 0 auto;
  margin-block-end: .35rem;
  border-radius: var(--r-full);
  background: var(--dt-green-050);
  color: var(--dt-green-700);
  border: 1px solid rgba(68, 174, 79, .18);
  transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
.card__ico .ico, .card__ico svg { inline-size: 1.4rem; block-size: 1.4rem; }
.card:hover .card__ico { background: var(--dt-green); color: #fff; border-color: var(--dt-green); }
/* Título y descripción de la tarjeta */
.card__t {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--dt-ink);
  margin: 0;
}
.card__d { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--dt-body); }
.card__d + .card__t { margin-block-start: .15rem; }
/* Tarjetas sobre fondo oscuro */
.sec--dark .card,
.cta-final .card {
  background: var(--dt-dark-800);
  border-color: var(--dt-line-dark);
  color: rgba(255, 255, 255, .78);
  box-shadow: none;
}
.sec--dark .card:hover { border-color: rgba(255, 255, 255, .28); box-shadow: var(--sh-3); }
.sec--dark .card__t { color: #fff; }
.sec--dark .card__d { color: rgba(255, 255, 255, .74); }
.sec--dark .card__ico { background: rgba(68, 174, 79, .18); color: #9BDFA4; border-color: rgba(68, 174, 79, .3); }
.sec--dark .card:hover .card__ico { background: var(--dt-green); color: #fff; }
.sec--dark .card__media { border-block-end-color: var(--dt-line-dark); background: var(--dt-dark-700); }

/* =============================================================================
   10 · LISTAS
   ============================================================================= */
.lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .7rem;
}
.lista li { position: relative; padding-inline-start: 1.6rem; line-height: 1.65; color: var(--dt-body); }
.lista li::before { content: ""; position: absolute; inset-block-start: .55em; inset-inline-start: 0; inline-size: .5rem; block-size: .5rem; border-radius: var(--r-full); background: var(--dt-green); }
/* Lista con palomitas verdes */
.lista--check li::before {
  inset-block-start: .18em;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  border-radius: 0;
  background: var(--dt-green-700);
  -webkit-mask: var(--ico-check) center / contain no-repeat;
  mask: var(--ico-check) center / contain no-repeat;
}
.lista--check li { padding-inline-start: 1.85rem; }
/* Lista numerada con círculos de marca */
.lista-num { list-style: none; padding: 0; margin: 0; counter-reset: dt-num; display: grid; gap: .85rem; }
.lista-num li { position: relative; counter-increment: dt-num; padding-inline-start: 2.6rem; line-height: 1.65; color: var(--dt-body); min-block-size: 1.9rem; }
.lista-num li::before { content: counter(dt-num); position: absolute; inset-block-start: .05em; inset-inline-start: 0; display: grid; place-items: center; inline-size: 1.9rem; block-size: 1.9rem; font-family: var(--font-display); font-size: .85rem; font-weight: 800; color: #fff; background: var(--dt-green-700); border-radius: var(--r-full); }
/* Dos columnas de lista desde 640px */
.lista-doble { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.lista-doble li { position: relative; padding-inline-start: 1.85rem; line-height: 1.65; color: var(--dt-body); }
.lista-doble li::before { content: ""; position: absolute; inset-block-start: .18em; inset-inline-start: 0; inline-size: 1.15rem; block-size: 1.15rem; background: var(--dt-green-700); -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; }
@media (min-width: 640px) {
  .lista-doble { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.5rem; }
}
/* Listas sobre fondo oscuro */
.lista--dark li,
.sec--dark .lista li,
.sec--dark .lista-num li,
.sec--dark .lista-doble li { color: rgba(255, 255, 255, .8); }
.lista--dark li::before, .sec--dark .lista li::before { background: #6FCF7C; }
.lista--dark.lista--check li::before, .sec--dark .lista--check li::before, .sec--dark .lista-doble li::before { background: #6FCF7C; }
.sec--dark .lista-num li::before { background: var(--dt-green); color: var(--dt-dark); }

/* =============================================================================
   11 · TABLAS · COMPARATIVA · MATRIZ
   ============================================================================= */
/* Envoltura con scroll horizontal en móvil y pista visual de "hay más" */
.tabla-wrap,
.matriz__wrap {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 1px solid var(--dt-line);
  border-radius: var(--r-md);
  background: var(--dt-bg);
  box-shadow: var(--sh-1);
  scrollbar-width: thin;
  scrollbar-color: var(--dt-line-strong) transparent;
  background-image:
    linear-gradient(to right, var(--dt-bg) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), var(--dt-bg) 70%),
    radial-gradient(farthest-side at 0 50%, rgba(16, 19, 18, .10), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(16, 19, 18, .10), transparent);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 2.5rem 100%, 2.5rem 100%, .9rem 100%, .9rem 100%;
  background-attachment: local, local, scroll, scroll;
}
.tabla-wrap::-webkit-scrollbar, .matriz__wrap::-webkit-scrollbar { block-size: 8px; inline-size: 8px; }
.tabla-wrap::-webkit-scrollbar-thumb, .matriz__wrap::-webkit-scrollbar-thumb { background: var(--dt-line-strong); border-radius: var(--r-full); }
/* Pista textual (opcional en el markup): "Desliza para ver más" */
.tabla-wrap::after,
.matriz__wrap::after {
  content: "Desliza para ver más →";
  position: sticky;
  inset-inline-start: 0;
  display: block;
  inline-size: max-content;
  padding: .45rem .75rem .55rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dt-muted-2);
  background: var(--dt-bg);
}
@media (min-width: 960px) {
  .tabla-wrap::after, .matriz__wrap::after { display: none; }
}
/* Tabla industrial */
.tabla {
  inline-size: 100%;
  min-inline-size: 34rem;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  color: var(--dt-body);
}
.tabla caption { padding: 1rem 1.15rem .25rem; font-weight: 700; font-size: var(--fs-sm); color: var(--dt-ink); text-align: start; }
.tabla th, .tabla td { padding: .8rem 1rem; text-align: start; vertical-align: middle; border-block-end: 1px solid var(--dt-line); }
.tabla thead th { position: sticky; inset-block-start: 0; z-index: 2; background: var(--dt-dark); color: #fff; font-family: var(--font-display); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; border-block-end: 2px solid var(--dt-green); }
.tabla tbody tr:nth-child(even) { background: var(--dt-bg-soft); }
.tabla tbody tr:hover { background: var(--dt-green-050); }
.tabla tbody tr:last-child th, .tabla tbody tr:last-child td { border-block-end: 0; }
.tabla td strong { color: var(--dt-ink); }
/* Columna destacada (verde tenue) */
.destacada-col {
  background: var(--dt-green-050);
  box-shadow: inset 1px 0 0 rgba(68, 174, 79, .25), inset -1px 0 0 rgba(68, 174, 79, .25);
}
.tabla thead th.destacada-col { background: var(--dt-green-700); color: #fff; border-block-end-color: var(--dt-green-700); }
.tabla tbody tr:nth-child(even) .destacada-col, .tabla tbody tr:nth-child(even) td.destacada-col { background: #E4F4E6; }
/* Celdas con ícono de aprobado / no aprobado */
.ok,
.no {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--dt-green-700);
}
.no { color: #A8402F; }
.ok::before, .no::before { content: ""; inline-size: 1.1em; block-size: 1.1em; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; }
.no::before { -webkit-mask: var(--ico-x) center / contain no-repeat; mask: var(--ico-x) center / contain no-repeat; }
.tabla .ok, .tabla .no { color: inherit; }
.tabla .ok { color: var(--dt-green-700); }
.tabla .no { color: #A8402F; }
.tabla th.ok, .tabla th.no { justify-content: center; }
/* Comparativa: resalta la columna del producto propio */
.tabla--comp { min-inline-size: 36rem; }
.tabla--comp th:first-child { inline-size: 30%; }
.tabla--comp thead th.destacada-col { background: linear-gradient(180deg, var(--dt-green-600), var(--dt-green-700)); }
/* Matriz de compatibilidad: compacta y centrada */
.matriz { margin-block-start: var(--sp-5); }
.matriz__wrap { border-radius: var(--r-md); }
.matriz__tabla { inline-size: 100%; min-inline-size: 30rem; border-collapse: collapse; font-size: var(--fs-sm); text-align: center; }
.matriz__tabla th, .matriz__tabla td { padding: .65rem .5rem; text-align: center; vertical-align: middle; border-block-end: 1px solid var(--dt-line); border-inline-end: 1px solid var(--dt-line); }
.matriz__tabla thead th { background: var(--dt-dark); color: #fff; font-family: var(--font-display); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.matriz__tabla tbody th { background: var(--dt-bg-soft); font-weight: 700; color: var(--dt-ink); text-align: start; white-space: nowrap; }
.matriz__tabla tbody tr:nth-child(even) td { background: #FAFBFA; }
.matriz__tabla tbody tr:last-child th, .matriz__tabla tbody tr:last-child td { border-block-end: 0; }
.matriz__tabla td:last-child, .matriz__tabla th:last-child { border-inline-end: 0; }
.matriz__tabla .ok, .matriz__tabla .no { justify-content: center; inline-size: 100%; gap: .3rem; }
/* En la matriz el texto se oculta para dejar solo el icono; pero las celdas
   que ocupan varias columnas (colspan) sí muestran su texto completo. */
.matriz__tabla td:not([colspan]) .ok,
.matriz__tabla td:not([colspan]) .no { font-size: 0; gap: 0; }
.matriz__tabla .ok::before, .matriz__tabla .no::before { font-size: 1rem; inline-size: 1.15rem; block-size: 1.15rem; }
.matriz__tabla td[colspan] { text-align: start; }
.matriz__tabla td[colspan] .ok { justify-content: flex-start; font-size: var(--fs-sm); }
/* Insignia de la matriz (leyenda "Disponible") */
.matriz__badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-block-start: var(--sp-4);
  padding: .4rem .85rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--dt-green-700);
  background: var(--dt-green-050);
  border: 1px solid rgba(68, 174, 79, .35);
  border-radius: var(--r-full);
}
.matriz__badge::before { content: ""; inline-size: 1em; block-size: 1em; background: currentColor; -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; }
/* Variante oscura de tablas (secciones .sec--dark) */
.sec--dark .tabla-wrap,
.sec--dark .matriz__wrap {
  background-color: var(--dt-dark-800);
  border-color: var(--dt-line-dark);
  box-shadow: none;
}
.sec--dark .tabla, .sec--dark .matriz__tabla, .sec--dark .matriz__tabla tbody th { color: rgba(255, 255, 255, .8); }
.sec--dark .tabla th, .sec--dark .tabla td, .sec--dark .matriz__tabla th, .sec--dark .matriz__tabla td { border-block-end-color: var(--dt-line-dark); border-inline-end-color: var(--dt-line-dark); }
.sec--dark .tabla tbody tr:nth-child(even) { background: rgba(255, 255, 255, .03); }
.sec--dark .tabla tbody tr:hover { background: rgba(68, 174, 79, .1); }
.sec--dark .tabla thead th { background: #0B0E0D; }
.sec--dark .matriz__tabla tbody th { background: rgba(255, 255, 255, .05); color: #fff; }
.sec--dark .matriz__tabla tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .03); }
.sec--dark .destacada-col { background: rgba(68, 174, 79, .14); }
.sec--dark .tabla .ok, .sec--dark .matriz__tabla .ok { color: #8FD79A; }
.sec--dark .tabla .no { color: #F0A08E; }
.sec--dark .tabla-wrap::after, .sec--dark .matriz__wrap::after { background: var(--dt-dark-800); color: rgba(255, 255, 255, .5); }

/* =============================================================================
   12 · DESTACADO (cita) · SELLOS
   ============================================================================= */
.destacado {
  position: relative;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 2.75rem);
  background: var(--dt-bg);
  border: 1px solid var(--dt-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.destacado::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 5px; block-size: 100%; background: linear-gradient(180deg, var(--dt-green), var(--dt-green-700)); }
.destacado__txt { margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem); font-weight: 700; line-height: 1.45; letter-spacing: -.012em; color: var(--dt-ink); text-wrap: pretty; }
.destacado__txt::before { content: "“"; }
.destacado__txt::after { content: "”"; }
.destacado__foot { display: flex; align-items: center; gap: .6rem; margin-block-start: var(--sp-4); font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dt-green-700); }
.destacado__foot::before { content: ""; inline-size: 1.75rem; block-size: 2px; background: var(--dt-green); border-radius: var(--r-full); }
/* Destacado sobre fondo oscuro */
.sec--dark .destacado { background: var(--dt-dark-800); border-color: var(--dt-line-dark); box-shadow: none; }
.sec--dark .destacado__txt { color: #fff; }
.sec--dark .destacado__foot { color: #9BDFA4; }

/* ---- Sellos / badges de confianza ---- */
.sellos { display: flex; flex-wrap: wrap; gap: .6rem; padding: 0; margin: 0; list-style: none; }
.sello { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--dt-ink); background: var(--dt-bg); border: 1px solid var(--dt-line); border-radius: var(--r-full); box-shadow: var(--sh-1); }
.sello__ico { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.6rem; block-size: 1.6rem; flex: 0 0 auto; border-radius: var(--r-full); background: var(--dt-green-050); color: var(--dt-green-700); }
.sello__ico .ico, .sello__ico svg { inline-size: .95rem; block-size: .95rem; }
/* Sello con acento ámbar (destacados especiales) */
.sello--wa .sello__ico { background: rgba(245, 166, 35, .16); color: #A96A00; }
.sec--dark .sello { background: rgba(255, 255, 255, .06); border-color: var(--dt-line-dark); color: #fff; box-shadow: none; }
.sec--dark .sello__ico { background: rgba(68, 174, 79, .2); color: #9BDFA4; }

/* =============================================================================
   13 · MEDIA · VIDEO · GALERÍA · LIGHTBOX
   ============================================================================= */
.media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--dt-dark-800);
  border: 1px solid var(--dt-line-dark);
  box-shadow: var(--sh-3);
}
.media__video, .media video, .media iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; border: 0; display: block; }
.media img.media__poster, .media__poster { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.media__badge {
  position: absolute;
  /* Arriba a la izquierda: así nunca choca con `.media figcaption` / `.media__cap`,
     que viven anclados abajo. */
  inset-block-start: .9rem;
  inset-inline-start: .9rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .4rem .85rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(16, 19, 18, .72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-full);
  pointer-events: none;
}
.media__play { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; inline-size: 100%; block-size: 100%; cursor: pointer; background: linear-gradient(180deg, rgba(16, 19, 18, .1), rgba(16, 19, 18, .45)); transition: background-color var(--t-med) var(--ease); }
.media__play::before { content: ""; inline-size: clamp(3.25rem, 2rem + 4vw, 4.75rem); block-size: clamp(3.25rem, 2rem + 4vw, 4.75rem); border-radius: var(--r-full); background: rgba(255, 255, 255, .95); box-shadow: var(--sh-3); transition: scale var(--t-med) var(--ease), background-color var(--t-med) var(--ease); }
.media__play:hover::before { scale: 1.08; background-color: #fff; }
.media__play .ico, .media__play svg { position: absolute; inline-size: clamp(1.1rem, .8rem + 1vw, 1.6rem); block-size: clamp(1.1rem, .8rem + 1vw, 1.6rem); color: var(--dt-green-700); translate: .12rem 0; pointer-events: none; }
.media figcaption, .media__cap { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 3; padding: 2.5rem 1rem .9rem; font-size: var(--fs-sm); color: rgba(255, 255, 255, .9); background: linear-gradient(180deg, transparent, rgba(16, 19, 18, .82)); }

/* ---- Galería tipo mosaico (CSS grid con distintas alturas) ---- */
.galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 8.5rem;
  gap: .75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.galeria__item { position: relative; overflow: hidden; border-radius: var(--r-md); background: var(--dt-bg-soft); border: 1px solid var(--dt-line); box-shadow: var(--sh-1); cursor: zoom-in; }
.galeria__item--alto { grid-row: span 2; }
.galeria__item--ancho { grid-column: span 2; }
.galeria__img, .galeria__item img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--t-slow) var(--ease), filter var(--t-med) var(--ease); }
.galeria__item:hover .galeria__img, .galeria__item:hover img { scale: 1.06; }
/* Pie de foto que sube al pasar el cursor */
.galeria__cap {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 2.25rem .85rem .75rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(16, 19, 18, .88));
  translate: 0 100%;
  opacity: 0;
  transition: translate var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
  pointer-events: none;
}
.galeria__item:hover .galeria__cap, .galeria__item:focus-within .galeria__cap, .galeria__item:focus-visible .galeria__cap { translate: 0 0; opacity: 1; }
.galeria__item:focus-visible { outline: 3px solid var(--dt-green); outline-offset: 2px; }
@media (min-width: 640px) {
  .galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 10rem; gap: 1rem; }
}
@media (min-width: 960px) {
  .galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 11rem; }
  .galeria__item--ancho { grid-column: span 2; }
  .galeria__item--alto { grid-row: span 2; }
}

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 3vw, 2.5rem);
  background: var(--dt-overlay-strong);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lightbox[hidden] { display: none !important; }
.lightbox__img { display: block; max-inline-size: min(1200px, 100%); max-block-size: calc(100dvh - 2 * clamp(.75rem, 3vw, 2.5rem) - 3rem); inline-size: auto; block-size: auto; object-fit: contain; border-radius: var(--r-md); box-shadow: var(--sh-3); background: var(--dt-dark-800); }
.lightbox__close,
.lightbox__prev,
.lightbox__next {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease);
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { background: #fff; color: var(--dt-ink); border-color: #fff; }
.lightbox__close .ico, .lightbox__prev .ico, .lightbox__next .ico, .lightbox__close svg, .lightbox__prev svg, .lightbox__next svg { inline-size: 1.35rem; block-size: 1.35rem; }
.lightbox__close { inset-block-start: 1rem; inset-inline-end: 1rem; }
.lightbox__prev { inset-block-start: 50%; inset-inline-start: 1rem; translate: 0 -50%; }
/* La flecha apunta a la derecha; en el botón "anterior" se refleja */
.lightbox__prev .ico,
.lightbox__prev svg { rotate: 180deg; }
.lightbox__next { inset-block-start: 50%; inset-inline-end: 1rem; translate: 0 -50%; }
/* Contador / pie opcional del lightbox */
.lightbox__cap {
  position: absolute;
  inset-block-end: clamp(.75rem, 3vw, 2rem);
  inset-inline: 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .78);
  pointer-events: none;
}
@media (max-width: 639.98px) {
  .lightbox__prev, .lightbox__next { inline-size: 2.6rem; block-size: 2.6rem; }
  .lightbox__prev { inset-inline-start: .5rem; }
  .lightbox__next { inset-inline-end: .5rem; }
}

/* =============================================================================
   14 · TABS
   ============================================================================= */
[data-tabs] {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  position: relative;
  border-block-end: 2px solid var(--dt-line);
  margin-block-end: var(--sp-5);
  overflow-x: auto;
  scrollbar-width: none;
}
[data-tabs]::-webkit-scrollbar { display: none; }
.tabs__btn { position: relative; flex: 0 0 auto; padding: .8rem 1.1rem; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 700; color: var(--dt-muted-2); background: none; border: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; cursor: pointer; white-space: nowrap; transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
.tabs__btn::after { content: ""; position: absolute; inset-inline: .5rem; inset-block-end: -2px; block-size: 2px; background: var(--dt-green); border-radius: var(--r-full); scale: 0 1; transform-origin: center; transition: scale var(--t-med) var(--ease); }
.tabs__btn:hover { color: var(--dt-ink); background: var(--dt-bg-soft); }
.tabs__btn[aria-selected="true"], .tabs__btn.is-active { color: var(--dt-green-700); background: var(--dt-bg); }
.tabs__btn[aria-selected="true"]::after, .tabs__btn.is-active::after { scale: 1 1; }
.tabs__btn:focus-visible { outline: 3px solid var(--dt-green); outline-offset: 2px; }
.tab-panel { animation: dt-fade-in var(--t-med) var(--ease) both; }
.tab-panel[hidden] { display: none !important; }
@keyframes dt-fade-in {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
.sec--dark [data-tabs] { border-block-end-color: var(--dt-line-dark); }
.sec--dark .tabs__btn { color: rgba(255, 255, 255, .62); }
.sec--dark .tabs__btn:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.sec--dark .tabs__btn[aria-selected="true"], .sec--dark .tabs__btn.is-active { color: #9BDFA4; background: transparent; }

/* =============================================================================
   15 · PASOS (proceso)
   ============================================================================= */
.pasos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: dt-paso;
}
.paso { position: relative; padding-inline-start: 3.6rem; padding-block: 1.1rem 1.5rem; counter-increment: dt-paso; }
.paso__n { position: absolute; inset-block-start: 1.1rem; inset-inline-start: 0; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: #fff; background: linear-gradient(180deg, var(--dt-green-600), var(--dt-green-700)); border-radius: var(--r-full); box-shadow: var(--sh-1); z-index: 1; }
.paso__linea { position: absolute; inset-block-start: 3.6rem; inset-block-end: 0; inset-inline-start: 1.25rem; inline-size: 2px; background: linear-gradient(180deg, var(--dt-line-strong), var(--dt-line)); translate: -50% 0; }
.paso:last-child .paso__linea { display: none; }
.paso__t { margin: 0 0 .3rem; font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; line-height: 1.3; color: var(--dt-ink); }
.paso__d { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--dt-body); max-inline-size: 52ch; }
@media (min-width: 960px) {
  .pasos { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 1.25rem; }
  .paso { padding-inline-start: 0; padding-block: 0; text-align: start; }
  .paso__n { position: static; margin-block-end: var(--sp-4); }
  .paso__linea { inset-block-start: 1.25rem; inset-block-end: auto; inset-inline-start: 3.25rem; inset-inline-end: -.75rem; inline-size: auto; block-size: 2px; translate: 0 -50%; background: linear-gradient(90deg, var(--dt-line-strong), var(--dt-line)); }
  .paso:last-child .paso__linea { display: block; }
}
/* Pasos dentro de una sección oscura */
.sec--dark .paso__t { color: #fff; }
.sec--dark .paso__d { color: rgba(255, 255, 255, .76); }
.sec--dark .paso__linea { background: linear-gradient(90deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .08)); }

/* =============================================================================
   16 · SECTORES
   ============================================================================= */
.sectores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.sector { display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; padding: clamp(1rem, .8rem + .7vw, 1.5rem); background: var(--dt-bg); border: 1px solid var(--dt-line); border-radius: var(--r-md); box-shadow: var(--sh-1); transition: box-shadow var(--t-med) var(--ease), translate var(--t-med) var(--ease), border-color var(--t-med) var(--ease); }
.sector:hover { box-shadow: var(--sh-2); translate: 0 -3px; border-color: rgba(68, 174, 79, .45); }
.sector__ico { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--r-full); background: var(--dt-green-050); color: var(--dt-green-700); border: 1px solid rgba(68, 174, 79, .2); transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease); }
.sector__ico .ico, .sector__ico svg { inline-size: 1.35rem; block-size: 1.35rem; }
.sector:hover .sector__ico { background: var(--dt-green); color: #fff; border-color: var(--dt-green); }
.sector__t { margin: 0; font-family: var(--font-display); font-size: .98rem; font-weight: 700; line-height: 1.3; color: var(--dt-ink); }
@media (min-width: 640px) {
  .sectores { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
}
@media (min-width: 960px) {
  .sectores { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
}
.sec--dark .sector { background: var(--dt-dark-800); border-color: var(--dt-line-dark); box-shadow: none; }
.sec--dark .sector__t { color: #fff; }
.sec--dark .sector__ico { background: rgba(68, 174, 79, .18); color: #9BDFA4; border-color: rgba(68, 174, 79, .3); }

/* =============================================================================
   17 · IMPACTO (sustentabilidad)
   ============================================================================= */
.impacto {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  align-items: start;
}
.impacto__grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.impacto__num { display: block; font-family: var(--font-display); font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums lining-nums; }
.impacto__lbl { display: block; margin-block-start: .35rem; font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; color: rgba(255, 255, 255, .68); }
.impacto__panel { padding: clamp(1.35rem, 1rem + 1.6vw, 2.25rem); background: rgba(255, 255, 255, .05); border: 1px solid var(--dt-line-dark); border-radius: var(--r-lg); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.impacto__panel > :first-child { margin-block-start: 0; }
.impacto__panel > :last-child { margin-block-end: 0; }
.impacto__grid > * { padding: clamp(1.1rem, .9rem + .8vw, 1.6rem); border-inline-start: 3px solid var(--dt-green); background: rgba(255, 255, 255, .03); border-radius: 0 var(--r-md) var(--r-md) 0; }
@media (min-width: 640px) {
  .impacto__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .impacto { grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
}

/* =============================================================================
   18 · FAQ (acordeón con <details> nativo)
   ============================================================================= */
.faqs {
  display: grid;
  gap: .75rem;
  max-inline-size: 860px;
  margin-inline: auto;
}
.faq { background: var(--dt-bg); border: 1px solid var(--dt-line); border-radius: var(--r-md); box-shadow: var(--sh-1); overflow: hidden; transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.faq[open] { border-color: rgba(68, 174, 79, .45); box-shadow: var(--sh-2); }
/* Cabecera: pregunta + icono +/− */
.faq__q,
.faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem clamp(1rem, .8rem + .8vw, 1.5rem);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--dt-ink);
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.faq__q::-webkit-details-marker, .faq > summary::-webkit-details-marker { display: none; }
.faq__q::marker, .faq > summary::marker { content: ""; }
.faq__q::before, .faq > summary::before { display: none; }
.faq__q:hover, .faq > summary:hover { background: var(--dt-bg-soft); color: var(--dt-green-700); }
.faq[open] .faq__q, .faq[open] > summary { color: var(--dt-green-700); background: var(--dt-green-050); }
/* Icono más/menos que rota al abrir */
.faq__ico {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: 1.85rem;
  block-size: 1.85rem;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  background: var(--dt-green-050);
  color: var(--dt-green-700);
  border: 1px solid rgba(68, 174, 79, .25);
  transition: rotate var(--t-med) var(--ease),
    background-color var(--t-med) var(--ease),
    color var(--t-med) var(--ease);
}
.faq__ico::before, .faq__ico::after { content: ""; position: absolute; background: currentColor; border-radius: var(--r-full); }
.faq__ico::before { inline-size: .85rem; block-size: 2px; }
.faq__ico::after { inline-size: 2px; block-size: .85rem; }
.faq__ico .ico, .faq__ico svg { inline-size: 1.1rem; block-size: 1.1rem; }
.faq__ico:has(.ico)::before, .faq__ico:has(.ico)::after { display: none; }
.faq[open] .faq__ico { background: var(--dt-green-700); color: #fff; rotate: 180deg; border-color: var(--dt-green-700); }
.faq[open] .faq__ico::after { scale: 1 0; }
/* Respuesta con entrada suave */
.faq__a {
  padding: 0 clamp(1rem, .8rem + .8vw, 1.5rem) 1.25rem;
  font-size: var(--fs-sm);
  line-height: 1.72;
  color: var(--dt-body);
  animation: dt-faq-in var(--t-med) var(--ease) both;
}
.faq__a > :first-child { margin-block-start: 0; }
.faq__a > :last-child { margin-block-end: 0; }
.faq__a p + p { margin-block-start: .8rem; }
@keyframes dt-faq-in {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}
/* FAQ sobre fondo oscuro */
.sec--dark .faq, .sec--gris .faq { background: var(--dt-bg); }
.sec--dark .faq { background: var(--dt-dark-800); border-color: var(--dt-line-dark); box-shadow: none; }
.sec--dark .faq__q, .sec--dark .faq > summary { color: #fff; }
.sec--dark .faq__q:hover, .sec--dark .faq > summary:hover { background: rgba(255, 255, 255, .05); color: #9BDFA4; }
.sec--dark .faq[open] .faq__q, .sec--dark .faq[open] > summary { background: rgba(68, 174, 79, .14); color: #9BDFA4; }
.sec--dark .faq__a { color: rgba(255, 255, 255, .78); }

/* =============================================================================
   19 · FORMULARIOS
   ============================================================================= */
.form-card {
  position: relative;
  padding: clamp(1.35rem, 1rem + 1.8vw, 2.5rem);
  background: var(--dt-bg);
  border: 1px solid var(--dt-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
}
.form-card__t { margin: 0 0 .4rem; font-family: var(--font-display); font-size: clamp(1.2rem, 1.05rem + .7vw, 1.55rem); font-weight: 800; line-height: 1.25; letter-spacing: -.012em; color: var(--dt-ink); }
.form-card__s { margin: 0 0 var(--sp-5); font-size: var(--fs-sm); line-height: 1.6; color: var(--dt-muted-2); }
/* Campos */
.campo { display: flex; flex-direction: column; gap: .4rem; margin-block-end: 1.05rem; }
.campo label { font-size: var(--fs-sm); font-weight: 600; line-height: 1.4; color: var(--dt-ink); }
.campo label .req, .campo .req { color: #C0392B; }
.campo input,
.campo select,
.campo textarea {
  inline-size: 100%;
  min-block-size: 2.9rem;
  padding: .7rem .9rem;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--dt-ink);
  background: var(--dt-bg);
  border: 1px solid var(--dt-line-strong);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 2px rgba(16, 19, 18, .04);
  transition: border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
  appearance: none;
  -webkit-appearance: none;
}
.campo textarea { min-block-size: 8rem; resize: vertical; line-height: 1.6; }
.campo select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23454C48' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 1.1rem; padding-inline-end: 2.5rem; }
.campo input::placeholder, .campo textarea::placeholder { color: #9AA39E; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #B6BFB9; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--dt-green); box-shadow: 0 0 0 3px rgba(68, 174, 79, .22); background: #FCFEFC; }
/* Dos columnas desde 640px */
.campo-2 { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 640px) {
  .campo-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Checkbox en línea */
.campo--check { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .6rem; margin-block-end: 1.05rem; }
.campo--check input[type="checkbox"] {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  min-block-size: 0;
  margin-block-start: .22rem;
  padding: 0;
  border: 1px solid var(--dt-line-strong);
  border-radius: 5px;
  background: var(--dt-bg);
  box-shadow: none;
  cursor: pointer;
  display: grid;
  place-content: center;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.campo--check input[type="checkbox"]::before { content: ""; inline-size: .7rem; block-size: .7rem; scale: 0; background: #fff; -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; transition: scale var(--t-fast) var(--ease); }
.campo--check input[type="checkbox"]:checked { background: var(--dt-green-700); border-color: var(--dt-green-700); }
.campo--check input[type="checkbox"]:checked::before { scale: 1; }
.campo--check input[type="checkbox"]:focus-visible { outline: 3px solid var(--dt-green); outline-offset: 2px; }
.campo--check label { font-size: var(--fs-sm); font-weight: 400; line-height: 1.6; color: var(--dt-body); }
.campo--check label a { font-weight: 600; }
/* Mensaje de error: oculto hasta que el campo falla */
.err {
  display: none;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.45;
  color: #B3261E;
}
.campo.has-error .err, .campo.has-error .err[aria-live], .err[role="alert"] { display: block; }
.campo.has-error input, .campo.has-error select, .campo.has-error textarea, .campo input[aria-invalid="true"], .campo select[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: #C0392B; background: #FEF6F5; }
.campo.has-error input:focus, .campo.has-error select:focus, .campo.has-error textarea:focus, .campo input[aria-invalid="true"]:focus, .campo select[aria-invalid="true"]:focus, .campo textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, .2); }
.campo.has-error label { color: #B3261E; }
/* Honeypot: invisible para personas, presente en el DOM.
NO usar display:none (los bots lo detectan). */
.hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
/* Acciones del formulario */
.form-acciones { display: flex; flex-direction: column; gap: .7rem; margin-block-start: var(--sp-5); }
.form-acciones .btn { inline-size: 100%; }
@media (min-width: 640px) {
  .form-acciones { flex-direction: row; flex-wrap: wrap; }
  .form-acciones .btn { inline-size: auto; flex: 1 1 auto; min-inline-size: 12rem; }
}
/* Mensajes generales de respuesta */
.form-msg {
  margin-block-start: var(--sp-4);
  padding: .85rem 1.1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.55;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
}
.form-msg:empty { display: none; }
.form-ok { color: #14532D; background: var(--dt-green-050); border-color: rgba(68, 174, 79, .4); }
.form-error { color: #7F1D1D; background: #FEF2F2; border-color: rgba(192, 57, 43, .35); }
.form-ok::before, .form-error::before { content: ""; display: inline-block; inline-size: 1em; block-size: 1em; margin-inline-end: .45rem; vertical-align: -.15em; background: currentColor; -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; }
.form-error::before { -webkit-mask: var(--ico-x) center / contain no-repeat; mask: var(--ico-x) center / contain no-repeat; }
.form-nota { margin: 0; padding-block-start: var(--sp-2); font-size: var(--fs-xs); line-height: 1.6; color: var(--dt-muted-2); }
/* Formulario dentro de tarjeta oscura */
.sec--dark .form-card {
  background: var(--dt-dark-800);
  border-color: var(--dt-line-dark);
  box-shadow: none;
}
.sec--dark .form-card__t { color: #fff; }
.sec--dark .form-card__s { color: rgba(255, 255, 255, .68); }
.sec--dark .campo label { color: rgba(255, 255, 255, .92); }
.sec--dark .campo input, .sec--dark .campo select, .sec--dark .campo textarea { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #fff; box-shadow: none; }
.sec--dark .campo select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.sec--dark .campo input::placeholder, .sec--dark .campo textarea::placeholder { color: rgba(255, 255, 255, .42); }
.sec--dark .campo input:focus, .sec--dark .campo select:focus, .sec--dark .campo textarea:focus { background: rgba(255, 255, 255, .1); }
.sec--dark .campo--check label { color: rgba(255, 255, 255, .8); }
.sec--dark .campo--check input[type="checkbox"] { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); }
.sec--dark .campo--check input[type="checkbox"]:checked { background: var(--dt-green-700); border-color: var(--dt-green-700); }
.sec--dark select option { color: #000; }

/* =============================================================================
   20 · CONTACTO — datos y mapa
   ============================================================================= */
.datos {
  display: grid;
  gap: .9rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.datos--bloque { gap: 0; }
.datos--bloque li { border-block-end: 1px solid var(--dt-line); }
.datos--bloque li:last-child { border-block-end: 0; }
.datos--bloque li { padding-block: .85rem; }
.dato { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .75rem; }
.dato__ico { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.6rem; block-size: 2.6rem; flex: 0 0 auto; border-radius: var(--r-full); background: var(--dt-green-050); color: var(--dt-green-700); border: 1px solid rgba(68, 174, 79, .2); }
.dato__ico .ico, .dato__ico svg { inline-size: 1.25rem; block-size: 1.25rem; }
.dato__t { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dt-muted-2); }
.dato__v, .dato__val { display: block; font-size: .97rem; font-weight: 600; line-height: 1.5; color: var(--dt-ink); text-decoration: none; }
a.dato__v:hover { color: var(--dt-green-700); }
.dato__v small, .dato__val small { display: block; font-size: var(--fs-xs); font-weight: 400; color: var(--dt-muted-2); }
/* Tarjeta contenedora de datos */
.datos--card {
  padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  background: var(--dt-bg);
  border: 1px solid var(--dt-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.sec--dark .datos--card { background: var(--dt-dark-800); border-color: var(--dt-line-dark); box-shadow: none; }
.sec--dark .dato__v, .sec--dark .dato__val { color: #fff; }
.sec--dark .dato__t { color: rgba(255, 255, 255, .58); }
.sec--dark .dato__ico { background: rgba(68, 174, 79, .18); color: #9BDFA4; border-color: rgba(68, 174, 79, .3); }
.sec--dark .datos--bloque li { border-block-end-color: var(--dt-line-dark); }
/* Mapa */
.mapa {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--dt-line);
  background: var(--dt-bg-soft);
  box-shadow: var(--sh-1);
}
.mapa iframe, .mapa img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; object-fit: cover; display: block; }

/* =============================================================================
   21 · CTA FINAL
   ============================================================================= */
.cta-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--dt-dark);
  color: rgba(255, 255, 255, .8);
  padding-block: clamp(3rem, 2rem + 4.5vw, 5.5rem);
}
.cta-final::before { content: ""; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(180deg, rgba(16, 19, 18, .93), rgba(16, 19, 18, .97)); }
.cta-final::after { content: ""; position: absolute; inset-block-start: -30%; inset-inline-start: -15%; inline-size: min(80vw, 720px); aspect-ratio: 1; z-index: -1; background: radial-gradient(circle at center, rgba(68, 174, 79, .28) 0%, transparent 68%); pointer-events: none; }
.cta-final.cta-final--foto::before { background-image: none; }
.cta-final h2 { color: #fff; margin-block-end: var(--sp-4); }
.cta-final__in { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); align-items: center; }
.cta-final__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: var(--sp-5); }
.cta-final__acciones .btn { flex: 1 1 auto; }
@media (min-width: 640px) {
  .cta-final__acciones .btn { flex: 0 0 auto; }
}
.cta-final__list { display: grid; gap: .7rem; padding: 0; margin: 0; list-style: none; }
.cta-final__list li { position: relative; padding-inline-start: 1.85rem; font-size: var(--fs-sm); line-height: 1.6; color: rgba(255, 255, 255, .82); }
.cta-final__list li::before { content: ""; position: absolute; inset-block-start: .18em; inset-inline-start: 0; inline-size: 1.15rem; block-size: 1.15rem; background: #6FCF7C; -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; }
@media (min-width: 960px) {
  .cta-final__in { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 3.5rem; }
  .cta-final__acciones .btn { flex: 0 0 auto; }
}

/* =============================================================================
   22 · FOOTER
   ============================================================================= */
.site-footer {
  background: var(--dt-dark);
  color: rgba(255, 255, 255, .68);
  font-size: var(--fs-sm);
  padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0;
  border-block-start: 1px solid rgba(255, 255, 255, .07);
}
.site-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer h3, .site-footer .footer__t { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
@media (min-width: 640px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .footer__grid { grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 2.5rem; }
}
.footer__col { display: flex; flex-direction: column; gap: .85rem; min-inline-size: 0; }
.footer__col:first-child { gap: 1rem; }
/* Logo sobre placa clara para que el logo a color se vea nítido */
.footer__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: .6rem .85rem;
  background: rgba(255, 255, 255, .96);
  border-radius: var(--r-md);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.footer__logo img { block-size: 46px; inline-size: auto; max-inline-size: 160px; object-fit: contain; }
.footer__txt { margin: 0; max-inline-size: 40ch; font-size: var(--fs-sm); line-height: 1.65; color: rgba(255, 255, 255, .62); }
.footer__t { margin: 0; font-family: var(--font-display); font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.footer__list li { min-inline-size: 0; }
.footer__list a, .footer__list span { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); line-height: 1.5; color: rgba(255, 255, 255, .72); text-decoration: none; transition: color var(--t-fast) var(--ease), translate var(--t-fast) var(--ease); }
.footer__list a:hover { color: #fff; translate: 3px 0; text-decoration: none; }
.footer__list .ico, .footer__list svg { color: var(--dt-green); inline-size: 1.05rem; block-size: 1.05rem; }
/* Redes sociales circulares */
.footer__redes { display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin: 0; list-style: none; }
.footer__redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border-radius: var(--r-full);
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  text-decoration: none;
  transition: background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    translate var(--t-fast) var(--ease);
}
.footer__redes a:hover { background: var(--dt-green-700); border-color: var(--dt-green-700); color: #fff; translate: 0 -2px; text-decoration: none; }
.footer__redes .ico, .footer__redes svg { inline-size: 1.2rem; block-size: 1.2rem; }
/* Sellos del footer */
.footer__badges { display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; list-style: none; }
.footer__badges li, .footer__badges span { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .7rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-full); }
/* Franja legal */
.footer__legal {
  margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-block: 1.25rem 1.5rem;
  border-block-start: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.25rem;
  font-size: var(--fs-xs);
  line-height: 1.6;
  color: rgba(255, 255, 255, .5);
}
.footer__legal p { margin: 0; color: inherit; }
.footer__legal a { color: rgba(255, 255, 255, .68); }

/* =============================================================================
   23 · FLOTANTES — .fab, .volver-arriba, .barra-progreso
   ============================================================================= */
/* Barra de progreso de lectura (3px, verde de marca) */
.barra-progreso {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 300;
  block-size: 3px;
  inline-size: 100%;
  transform-origin: left center;
  scale: 0 1;
  background: linear-gradient(90deg, var(--dt-green), var(--dt-green-600));
  pointer-events: none;
}
/* Burbuja de WhatsApp: abajo a la derecha, texto al pasar el cursor */
.fab {
  position: fixed;
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  inset-inline-end: 1rem;
  z-index: 250;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-block-size: 3.5rem;
  padding: .85rem 1.1rem;
  color: #fff;
  background: linear-gradient(180deg, #34DB74, var(--dt-wa));
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--r-full);
  box-shadow: 0 12px 28px -8px rgba(18, 140, 74, .55), 0 4px 12px rgba(0, 0, 0, .18);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-decoration: none;
  cursor: pointer;
  transition: max-inline-size var(--t-med) var(--ease),
    padding var(--t-med) var(--ease),
    background-color var(--t-fast) var(--ease),
    translate var(--t-fast) var(--ease);
  animation: dt-pulso 3.2s var(--ease) infinite;
}
.fab:hover { translate: 0 -2px; text-decoration: none; animation-play-state: paused; }
.fab__ico { display: inline-flex; flex: 0 0 auto; inline-size: 1.7rem; block-size: 1.7rem; }
.fab__ico .ico, .fab__ico svg { inline-size: 100%; block-size: 100%; }
.fab__txt { display: inline-block; max-inline-size: 14rem; white-space: nowrap; overflow: hidden; }
@keyframes dt-pulso {
  0%, 100% { box-shadow: 0 12px 28px -8px rgba(18, 140, 74, .55), 0 0 0 0 rgba(37, 211, 102, .5); }
  55% { box-shadow: 0 12px 28px -8px rgba(18, 140, 74, .55), 0 0 0 14px rgba(37, 211, 102, 0); }
}
/* En móvil el texto se muestra siempre (el hover no existe) */
@media (max-width: 639.98px) {
  .fab { font-size: var(--fs-xs); padding: .8rem 1rem; min-block-size: 3.25rem; }
  .fab__txt { max-inline-size: 9.5rem; }
}
/* Botón volver arriba: aparece con .is-visible después del scroll */
.volver-arriba {
  position: fixed;
  inset-inline-end: 1rem;
  /* Se coloca justo arriba del FAB para no empalmarse con él */
    inset-block-end: calc(max(1rem, env(safe-area-inset-bottom)) + 4.25rem);
  z-index: 249;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.9rem;
  block-size: 2.9rem;
  border-radius: var(--r-full);
  background: var(--dt-bg);
  color: var(--dt-ink);
  border: 1px solid var(--dt-line-strong);
  box-shadow: var(--sh-2);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  translate: 0 .5rem;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease),
    translate var(--t-med) var(--ease),
    visibility 0s linear var(--t-med),
    background-color var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease);
}
.volver-arriba.is-visible { opacity: 1; visibility: visible; translate: 0 0; pointer-events: auto; transition-delay: 0s, 0s, 0s; }
.volver-arriba:hover { background: var(--dt-green-700); border-color: var(--dt-green-700); color: #fff; }
.volver-arriba .ico, .volver-arriba svg { inline-size: 1.25rem; block-size: 1.25rem; }
@media (min-width: 960px) {
  .volver-arriba { inset-inline-end: 1.5rem; inset-block-end: calc(max(1rem, env(safe-area-inset-bottom)) + 4.75rem); }
  .fab { inset-inline-end: 1.5rem; }
}

/* =============================================================================
   24 · REVEAL (animación al entrar en viewport)
   El JS agrega .js a <html> y .is-visible a cada [data-reveal] / .reveal.
   Si NO hay JavaScript, html:not(.js) deja todo visible (nunca contenido oculto).
   ============================================================================= */
.reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity var(--t-slow) var(--ease), translate var(--t-slow) var(--ease);
  will-change: opacity, translate;
}
.reveal.is-visible { opacity: 1; translate: 0 0; will-change: auto; }
.reveal--d1 { transition-delay: .12s; }
.reveal--d2 { transition-delay: .24s; }
.reveal--d3 { transition-delay: .36s; }
/* Sin JS: contenido siempre visible */
html:not(.js) .reveal { opacity: 1; translate: none; }
/* Con movimiento reducido: sin desplazamiento ni retardo */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; translate: none; transition: none; }
  .reveal--d1, .reveal--d2, .reveal--d3 { transition-delay: 0s; }
}

/* =============================================================================
   25 · UTILIDADES
   ============================================================================= */
/* Solo para lectores de pantalla (técnica válida, NO display:none) */
.u-sr {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.u-mt { margin-block-start: var(--sp-6); }
.u-mb { margin-block-end: var(--sp-6); }
.u-center { text-align: center; }
.u-nowrap { white-space: nowrap; }
/* Scroll horizontal controlado (tablas, tiras de contenido) */
.u-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--dt-line-strong) transparent;
}
.u-scroll-x::-webkit-scrollbar { block-size: 8px; }
.u-scroll-x::-webkit-scrollbar-thumb { background: var(--dt-line-strong); border-radius: var(--r-full); }
/* Visibilidad por breakpoint */
.u-hide-sm { display: none; }
.u-hide-lg { display: initial; }
@media (min-width: 960px) {
  .u-hide-sm { display: initial; }
  .u-hide-lg { display: none; }
}

/* =============================================================================
   26 · PÁGINAS DE UTILIDAD — .pagina, .pagina__hero, .migas
   ============================================================================= */
.pagina {
  display: block;
}
/* Hero compacto oscuro (sin imagen grande) para páginas internas */
.pagina__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--dt-bg-dark);
  color: rgba(255, 255, 255, .8);
  padding-block: clamp(2.25rem, 1.4rem + 3.5vw, 4rem) clamp(2rem, 1.2rem + 3vw, 3.25rem);
  border-block-end: 1px solid rgba(255, 255, 255, .08);
}
.pagina__hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 46px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 46px); pointer-events: none; }
.pagina__hero::after { content: ""; position: absolute; inset-block-start: -55%; inset-inline-end: -20%; inline-size: min(70vw, 640px); aspect-ratio: 1; z-index: -1; background: radial-gradient(circle at center, rgba(68, 174, 79, .22), transparent 70%); pointer-events: none; }
.pagina__hero h1 { color: #fff; font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem); margin-block: .35rem .75rem; }
.pagina__hero .lead { color: rgba(255, 255, 255, .8); margin: 0; }
.pagina__hero .eyebrow { color: #8FD79A; }
/* Encabezado de contenido dentro de una página interna */
.pagina__head {
  max-inline-size: 760px;
  margin-block-end: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.pagina__head h2 { margin-block: 0 .75rem; }
.pagina__head > :last-child { margin-block-end: 0; }
/* Migas de pan */
.migas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .55rem;
  padding: 0;
  margin: 0 0 clamp(1.25rem, .8rem + 1.5vw, 2rem);
  list-style: none;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: rgba(255, 255, 255, .58);
}
.migas__item { display: inline-flex; align-items: center; gap: .4rem; }
.migas__item a { color: rgba(255, 255, 255, .72); text-decoration: none; border-block-end: 1px solid transparent; }
.migas__item a:hover { color: #fff; border-block-end-color: rgba(255, 255, 255, .5); }
.migas__item[aria-current="page"], .migas__item:last-child { color: rgba(255, 255, 255, .55); }
.migas__sep { color: rgba(255, 255, 255, .35); font-size: .9em; -webkit-user-select: none; user-select: none; }
/* Migas sobre fondo claro (páginas con .sec) */
.sec .migas, .migas--claro { color: var(--dt-muted-2); }
.sec .migas__item a, .migas--claro .migas__item a { color: var(--dt-green-700); }
.sec .migas__sep, .migas--claro .migas__sep { color: var(--dt-line-strong); }

/* =============================================================================
   27 · PROSA (lectura larga: ficha, legal, textos)
   ============================================================================= */
.prose {
  max-inline-size: 72ch;
  font-size: 1.02rem;
  line-height: 1.78;
  color: var(--dt-body);
}
.prose > :first-child { margin-block-start: 0; }
.prose > :last-child { margin-block-end: 0; }
.prose h2 { margin-block: 2.4em .7em; padding-block-end: .35em; font-size: clamp(1.35rem, 1.15rem + 1vw, 1.85rem); letter-spacing: -.015em; border-block-end: 1px solid var(--dt-line); }
.prose h3 { margin-block: 1.9em .55em; font-size: clamp(1.1rem, 1rem + .6vw, 1.35rem); }
.prose h4 { margin-block: 1.5em .5em; }
.prose p { margin-block: 0 1.15em; }
.prose p + p { margin-block-start: 0; }
.prose ul, .prose ol { margin-block: 0 1.25em; padding-inline-start: 1.4rem; display: grid; gap: .45em; }
.prose ul { list-style: none; padding-inline-start: 1.5rem; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: ""; position: absolute; inset-block-start: .62em; inset-inline-start: -1.25rem; inline-size: .45rem; block-size: .45rem; border-radius: var(--r-full); background: var(--dt-green); }
.prose ol { list-style: decimal; }
.prose ol > li::marker { color: var(--dt-green-700); font-weight: 700; }
.prose li > ul, .prose li > ol { margin-block-start: .45em; }
.prose a { color: var(--dt-green-700); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.prose a:hover { color: var(--dt-green-600); }
.prose strong { color: var(--dt-ink); }
.prose blockquote { position: relative; margin: 1.75em 0; padding: 1.15rem 1.35rem 1.15rem 1.75rem; background: var(--dt-bg-soft); border: 1px solid var(--dt-line); border-inline-start: 4px solid var(--dt-green); border-radius: 0 var(--r-md) var(--r-md) 0; font-family: var(--font-display); font-size: 1.06em; font-weight: 700; line-height: 1.55; color: var(--dt-ink); }
.prose blockquote > :first-child { margin-block-start: 0; }
.prose blockquote > :last-child { margin-block-end: 0; }
.prose blockquote cite { display: block; margin-block-start: .6em; font-family: var(--font-body); font-size: .82em; font-weight: 600; font-style: normal; letter-spacing: .04em; text-transform: uppercase; color: var(--dt-green-700); }
.prose code { font-family: var(--font-mono); font-size: .88em; padding: .12em .4em; background: var(--dt-bg-soft); border: 1px solid var(--dt-line); border-radius: var(--r-sm); color: var(--dt-ink); }
.prose hr { margin-block: 2.5em; }
.prose img, .prose figure img { border-radius: var(--r-md); box-shadow: var(--sh-1); margin-block: 1.5em; }
.prose figcaption { margin-block: -.8em 1.75em; font-size: var(--fs-sm); color: var(--dt-muted-2); text-align: center; }
/* Tablas dentro de prosa: el contenedor siempre scrollea si no cabe */
.prose table,
.prose__tabla {
  inline-size: 100%;
  min-inline-size: 0;       /* nunca fuerza desborde del párrafo contenedor */
  max-inline-size: 100%;
  margin-block: 1.5em;
  font-size: var(--fs-sm);
  border: 1px solid var(--dt-line);
  border-radius: var(--r-md);
  border-collapse: collapse;
}
/* La tabla en sí puede pedir más ancho, pero su contenedor scrollea:
   `.u-scroll-x` o `.tabla-wrap` alrededor de la tabla. */
.prose .tabla-wrap > table,
.prose .u-scroll-x > table { min-inline-size: 30rem; }
.prose > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table th, .prose__tabla th { padding: .7rem .9rem; text-align: start; background: var(--dt-bg-soft); color: var(--dt-ink); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; border-block-end: 2px solid var(--dt-green); }
.prose table td, .prose__tabla td { padding: .7rem .9rem; border-block-end: 1px solid var(--dt-line); vertical-align: top; }
.prose table tbody tr:nth-child(even), .prose__tabla tbody tr:nth-child(even) { background: #FAFBFA; }
.prose table tbody tr:last-child td, .prose__tabla tbody tr:last-child td { border-block-end: 0; }
/* Envoltura con scroll para tablas de prosa */
.prose .tabla-wrap { margin-block: 1.5em; }

/* =============================================================================
   28 · FICHA TÉCNICA
   ============================================================================= */
.ficha {
  display: block;
}
.ficha__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); align-items: start; }
@media (min-width: 960px) {
  .ficha__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2.5rem; }
}
.ficha__bloque { padding: clamp(1.25rem, 1rem + 1.2vw, 1.85rem); background: var(--dt-bg); border: 1px solid var(--dt-line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.ficha__bloque + .ficha__bloque { margin-block-start: 1.25rem; }
.ficha__bloque > :first-child { margin-block-start: 0; }
.ficha__bloque > :last-child { margin-block-end: 0; }
.ficha__t { margin: 0 0 var(--sp-4); padding-block-end: .6rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--dt-ink); border-block-end: 2px solid var(--dt-green); }
.ficha__tabla { inline-size: 100%; font-size: var(--fs-sm); border-collapse: collapse; }
.ficha__tabla th, .ficha__tabla td { padding: .6rem 0; text-align: start; vertical-align: top; border-block-end: 1px solid var(--dt-line); line-height: 1.55; }
.ficha__tabla th { inline-size: 42%; padding-inline-end: 1rem; font-weight: 600; color: var(--dt-muted-2); }
.ficha__tabla td { font-weight: 600; color: var(--dt-ink); }
.ficha__tabla tr:last-child th, .ficha__tabla tr:last-child td { border-block-end: 0; }
.ficha__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--dt-muted-2); }
.ficha__meta li { display: inline-flex; align-items: center; gap: .35rem; }
.ficha__meta .ico, .ficha__meta svg { color: var(--dt-green-700); inline-size: 1rem; block-size: 1rem; }
.ficha__acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin-block-start: var(--sp-5); }
.ficha__acciones .btn { flex: 1 1 auto; }
@media (min-width: 640px) {
  .ficha__acciones .btn { flex: 0 0 auto; }
}
/* Lista de especificaciones clave–valor */
.spec-lista {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  border: 1px solid var(--dt-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.spec-lista__item { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .35rem 1rem; padding: .75rem 1rem; font-size: var(--fs-sm); line-height: 1.55; border-block-end: 1px solid var(--dt-line); background: var(--dt-bg); }
.spec-lista__item:nth-child(even) { background: var(--dt-bg-soft); }
.spec-lista__item:last-child { border-block-end: 0; }
.spec-lista__k { font-weight: 600; color: var(--dt-muted-2); }
.spec-lista__v { font-weight: 700; color: var(--dt-ink); text-align: end; font-variant-numeric: tabular-nums; }
.sec--dark .ficha__bloque { background: var(--dt-dark-800); border-color: var(--dt-line-dark); box-shadow: none; }
.sec--dark .ficha__t { color: #fff; }
.sec--dark .ficha__tabla th { color: rgba(255, 255, 255, .58); }
.sec--dark .ficha__tabla td { color: #fff; }
.sec--dark .ficha__tabla th, .sec--dark .ficha__tabla td { border-block-end-color: var(--dt-line-dark); }
.sec--dark .spec-lista { border-color: var(--dt-line-dark); }
.sec--dark .spec-lista__item { background: var(--dt-dark-800); border-block-end-color: var(--dt-line-dark); }
.sec--dark .spec-lista__item:nth-child(even) { background: rgba(255, 255, 255, .03); }
.sec--dark .spec-lista__k { color: rgba(255, 255, 255, .6); }
.sec--dark .spec-lista__v { color: #fff; }

/* =============================================================================
   29 · LEGAL (aviso de privacidad)
   ============================================================================= */
.legal {
  display: block;
  max-inline-size: 72ch;
  font-size: 1rem;
  line-height: 1.78;
  color: var(--dt-body);
}
.legal__fecha { display: inline-flex; align-items: center; gap: .45rem; margin-block-end: var(--sp-5); padding: .4rem .85rem; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; color: var(--dt-muted-2); background: var(--dt-bg-soft); border: 1px solid var(--dt-line); border-radius: var(--r-full); }
.legal__fecha .ico, .legal__fecha svg { color: var(--dt-green-700); inline-size: 1rem; block-size: 1rem; }
.legal__bloque { margin-block-end: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); }
.legal__bloque:last-child { margin-block-end: 0; }
.legal__bloque h2, .legal__bloque h3 { margin-block: 0 .6em; font-size: clamp(1.15rem, 1.05rem + .7vw, 1.5rem); padding-block-end: .35em; border-block-end: 1px solid var(--dt-line); }
.legal__bloque h3 { font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem); }
.legal__bloque p { margin-block: 0 1em; }
.legal__bloque ul, .legal__bloque ol { margin-block: 0 1em; padding-inline-start: 1.4rem; display: grid; gap: .4em; }
.legal__bloque li::marker { color: var(--dt-green-700); }
.legal__bloque > :last-child { margin-block-end: 0; }
/* Caja de contacto del aviso */
.legal__contacto {
  margin-block-start: var(--sp-6);
  padding: clamp(1.15rem, 1rem + 1vw, 1.75rem);
  background: var(--dt-green-050);
  border: 1px solid rgba(68, 174, 79, .32);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--dt-ink-soft);
}
.legal__contacto > :first-child { margin-block-start: 0; }
.legal__contacto > :last-child { margin-block-end: 0; }
.legal__contacto a { font-weight: 600; }

/* =============================================================================
   30 · ERROR 404
   ============================================================================= */
.error404 {
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(3rem, 2rem + 6vw, 6.5rem);
  gap: .5rem;
}
.error404__code { display: block; font-family: var(--font-display); font-size: clamp(5rem, 2.5rem + 14vw, 11rem); font-weight: 800; line-height: .92; letter-spacing: -.04em; color: var(--dt-ink); margin: 0; background: linear-gradient(180deg, var(--dt-ink) 45%, var(--dt-green-600) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.error404__t { margin: .35rem 0 .5rem; font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2.1rem); font-weight: 800; line-height: 1.2; color: var(--dt-ink); max-inline-size: 24ch; }
.error404__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-block-start: var(--sp-5); }
.error404__acciones .btn { flex: 1 1 auto; }
@media (min-width: 640px) {
  .error404__acciones .btn { flex: 0 0 auto; }
}
.error404__sug { margin-block-start: var(--sp-6); padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.error404__sug li { margin: 0; }
.error404__sug a { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .85rem; font-size: var(--fs-sm); font-weight: 600; color: var(--dt-ink-soft); background: var(--dt-bg); border: 1px solid var(--dt-line); border-radius: var(--r-full); text-decoration: none; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.error404__sug a:hover { border-color: var(--dt-green); color: var(--dt-green-700); }
/* 404 dentro de una sección oscura */
.sec--dark .error404__code {
  background: linear-gradient(180deg, #fff 40%, #6FCF7C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sec--dark .error404__t { color: #fff; }
.sec--dark .error404__sug a { background: rgba(255, 255, 255, .07); border-color: var(--dt-line-dark); color: rgba(255, 255, 255, .85); }

/* =============================================================================
   31 · GRACIAS (confirmación de formulario)
   ============================================================================= */
.gracias {
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(2.5rem, 1.6rem + 5vw, 5.5rem);
  gap: .5rem;
  max-inline-size: 680px;
  margin-inline: auto;
}
.gracias__ico { display: grid; place-items: center; inline-size: clamp(4rem, 3rem + 5vw, 5.5rem); block-size: clamp(4rem, 3rem + 5vw, 5.5rem); margin-block-end: var(--sp-4); border-radius: var(--r-full); background: var(--dt-green-050); color: var(--dt-green-700); border: 1px solid rgba(68, 174, 79, .3); box-shadow: var(--sh-2); animation: dt-pop var(--t-slow) var(--ease) both; }
.gracias__ico .ico, .gracias__ico svg { inline-size: 45%; block-size: 45%; }
@keyframes dt-pop {
  0% { opacity: 0; scale: .6; }
  60% { scale: 1.06; }
  100% { opacity: 1; scale: 1; }
}
.gracias__t { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.8vw, 2.25rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--dt-ink); }
.gracias__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; margin-block-start: var(--sp-5); }
.gracias__acciones .btn { flex: 1 1 auto; }
@media (min-width: 640px) {
  .gracias__acciones .btn { flex: 0 0 auto; }
}
/* Siguientes pasos numerados */
.gracias__pasos {
  display: grid;
  gap: .85rem;
  margin-block-start: var(--sp-6);
  padding: 0;
  list-style: none;
  counter-reset: dt-gracias;
  text-align: start;
  inline-size: 100%;
}
.gracias__pasos li { position: relative; counter-increment: dt-gracias; padding-inline-start: 2.5rem; font-size: var(--fs-sm); line-height: 1.65; color: var(--dt-body); min-block-size: 1.8rem; }
.gracias__pasos li::before { content: counter(dt-gracias); position: absolute; inset-block-start: 0; inset-inline-start: 0; display: grid; place-items: center; inline-size: 1.8rem; block-size: 1.8rem; font-family: var(--font-display); font-size: .8rem; font-weight: 800; color: #fff; background: var(--dt-green-700); border-radius: var(--r-full); }

/* =============================================================================
   32 · ACCESIBILIDAD · MOVIMIENTO REDUCIDO
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .fab { animation: none; }
  .card:hover, .sector:hover, .btn:hover { translate: none; }
  .galeria__item:hover .galeria__img, .galeria__item:hover img, .card--media:hover .card__media img { scale: none; }
  .nav__menu a::after, .tabs__btn::after { transition: none; }
}
/* Foco visible garantizado en elementos interactivos clave */
.btn:focus-visible,
.nav__toggle:focus-visible,
.tabs__btn:focus-visible,
.faq__q:focus-visible,
.faq > summary:focus-visible,
.lightbox__close:focus-visible,
.lightbox__prev:focus-visible,
.lightbox__next:focus-visible,
.volver-arriba:focus-visible,
.fab:focus-visible,
.galeria__item:focus-visible,
.footer__redes a:focus-visible,
.error404__sug a:focus-visible {
  outline: 3px solid var(--dt-green);
  outline-offset: 3px;
}
.sec--dark .btn:focus-visible, .hero .btn:focus-visible, .cta-final .btn:focus-visible, .site-footer a:focus-visible { outline-color: #8FD79A; }

/* =============================================================================
   33 · PRINT
   ============================================================================= */
@media print {
  :root { --dt-bg: #fff; --dt-ink: #000; --dt-body: #000; --dt-muted: #333; --dt-muted-2: #333; --dt-line: #999; --dt-line-strong: #666; }
  @page { margin: 16mm 14mm; }
  html, body { background: #fff !important; color: #000 !important; font-size: 11pt; line-height: 1.5; }
  /* Fuera: navegación, elementos flotantes y llamadas a la acción */
    .site-header,
    .topbar,
    .nav,
    .skip,
    .fab,
    .volver-arriba,
    .barra-progreso,
    .cta-final,
    .site-footer,
    .lightbox,
    .media__play,
    .form-acciones,
    .hero__cta,
    .hero__media,
    .galeria,
    .sprite,
    .u-hide-print,
    [hidden] { display: none !important; }
  /* Contenido a todo lo ancho, sin sombras ni fondos */
    .wrap, .wrap--estrecho { max-inline-size: none !important; padding-inline: 0 !important; }
  .sec, .hero, .pagina__hero, .section { padding-block: 0.75rem !important; background: #fff !important; color: #000 !important; border: 0 !important; }
  .sec--dark, .sec--gris, .hero, .pagina__hero, .stats { background: #fff !important; color: #000 !important; }
  .sec--dark h1, .sec--dark h2, .sec--dark h3, .sec--dark h4, .sec--dark p, .sec--dark li, .sec--dark .lead, .hero h1, .hero .lead, .hero__note, .pagina__hero h1, .pagina__hero .lead, .stats .stat__num, .stats .stat__lbl { color: #000 !important; }
  .sec--dark .eyebrow, .hero .eyebrow, .pagina__hero .eyebrow { color: #000 !important; }
  h1 { font-size: 20pt; }
  h2 { font-size: 15pt; page-break-after: avoid; break-after: avoid; }
  h3 { font-size: 12.5pt; page-break-after: avoid; break-after: avoid; }
  a { color: #000 !important; text-decoration: underline; }
  /* Muestra el destino de los enlaces externos */
    a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    font-weight: 400;
    color: #444;
    word-break: break-all;
  }
  a[href^="#"]::after, a[href^="tel:"]::after, a[href^="mailto:"]::after { content: ""; }
  /* Tarjetas y bloques: borde fino, sin sombra, sin cortes raros */
    .card, .destacado, .form-card, .ficha__bloque, .legal__contacto,
    .sello, .spec-lista, .faq, .media, .mapa {
    box-shadow: none !important;
    border: 1px solid #999 !important;
    background: #fff !important;
    color: #000 !important;
    border-radius: 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .card--borde { border-inline-start: 4px solid #000 !important; }
  .card__d, .card__t, .destacado__txt, .destacado__foot { color: #000 !important; }
  /* Tablas legibles que no se parten */
    table {
    inline-size: 100% !important;
    min-inline-size: 0 !important;
    font-size: 9.5pt;
    border: 1px solid #666 !important;
    border-collapse: collapse !important;
    break-inside: auto;
  }
  thead { display: table-header-group; }
  tr, img { break-inside: avoid; page-break-inside: avoid; }
  th, td { border: 1px solid #999 !important; padding: 4pt 6pt !important; color: #000 !important; background: #fff !important; }
  thead th { background: #eee !important; color: #000 !important; border-block-end: 2px solid #000 !important; position: static !important; }
  .tabla-wrap, .matriz__wrap, .prose .tabla-wrap { overflow: visible !important; border: 0 !important; background: none !important; box-shadow: none !important; max-inline-size: none !important; }
  .tabla-wrap::after, .matriz__wrap::after { display: none !important; }
  .destacada-col { background: #f0f0f0 !important; box-shadow: none !important; }
  .tabla tbody tr:nth-child(even), .matriz__tabla tbody tr:nth-child(even) td, .spec-lista__item:nth-child(even) { background: #fff !important; }
  /* FAQ impreso: todo abierto y sin iconos */
    .faqs { max-inline-size: none; gap: .35rem; }
  .faq__ico { display: none !important; }
  .faq__a { padding-block-end: .5rem; }
  .faq__q, .faq > summary { background: none !important; padding: .5rem .6rem !important; }
  /* Listas y pasos: numeración visible, sin círculos de color */
    .paso__n, .lista-num li::before, .gracias__pasos li::before {
    color: #000 !important;
    background: #fff !important;
    border: 1px solid #666 !important;
  }
  .paso__linea { display: none !important; }
  .paso { padding-inline-start: 0 !important; }
  .prose { max-inline-size: none; }
  .prose blockquote { background: #fff !important; border: 1px solid #999 !important; }
  .prose blockquote, .prose blockquote cite { color: #000 !important; }
  .legal__fecha { border: 1px solid #999 !important; background: #fff !important; }
  .error404__code { -webkit-text-fill-color: #000 !important; color: #000 !important; background: none !important; }
  .gracias__ico { border: 1px solid #666 !important; background: #fff !important; }
  .form-msg { border: 1px solid #666 !important; background: #fff !important; color: #000 !important; }
  .form-msg::before { display: none !important; }
  /* Muestra las URLs de enlaces de contacto clave */
    .footer__list, .datos { display: none !important; }
}

/* =============================================================================
   FIN DEL ARCHIVO
   ============================================================================= */