/* Sitio corporativo groupdmc.com — design system DMC (header vidrio + Superficies v2), mismo lenguaje que las landings:
   lienzo slate, paneles blancos radio 28, tarjetas radio 22, botones píldora navy, solo Inter. Mobile-first.
   Tokens base en ds/tokens.css; header en ds/dmc-header.css; íconos en ds/dmc-icons.css. Movimiento (nov 2026): GSAP
   desde /static + ds/dmc-motion.js (atributos) + sitio.js (logo, mapa, recorrido). Sin JS todo se ve completo. */
:root {
  --navy: #0F3460; --navy-h: #1B4F8A; --page: #E8ECF1; --tile: #F1F4F8; --ink: #0F172A; --ink-2: #475569; --ink-3: #566377;
  --line: rgba(15, 23, 42, .07); --line-2: rgba(15, 35, 96, .18); --dark: #0E1522; --ok-bg: #DCFCE7; --ok-tx: #14532D;
  --r-panel: 28px; --r-tile: 22px; --dh-max: 1200px; --dh-pad: 16px; --s-max: 1200px; --s-gut: 12px;
  /* Escala fluida (responsive nov 2026): 320 → 1920 sin saltos; techos para que en 1920 no se vea gigante */
  --fs-h1: clamp(30px, 1.25rem + 3.4vw, 64px); --fs-h2: clamp(24px, 1rem + 1.6vw, 40px); --fs-lead: clamp(17px, 1rem + .35vw, 20px);
  --fs-p: clamp(16px, .95rem + .2vw, 18px); --fs-eti: 13px; --ease: cubic-bezier(.22, .61, .36, 1);
  --celeste: #6DCDF4; --celeste-2: #BFE6F9; --celeste-3: #E4F4FC; --oro: #FFCA05; --oro-2: #F6C944;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body.s-body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
html.dh-lock body { overflow-x: visible; }
a { color: var(--navy-h); }
h1, h2, h3 { margin: 0; color: var(--ink); }
.s-i { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-i-flecha { width: 15px; height: 15px; stroke-width: 2.2; transition: transform .3s var(--ease); }
:focus-visible { outline: 2px solid var(--navy-h); outline-offset: 2px; }
.s-saltar { position: absolute; left: 12px; top: -60px; z-index: 200; background: #fff; color: var(--navy); padding: 10px 16px; border-radius: 999px; font-weight: 600; }
.s-saltar:focus { top: 10px; }

/* Header: nav en píldoras (≥1080), hoja móvil por debajo */
.s-nav { gap: 2px; margin-left: 12px; display: none; }
.s-nav-a { height: 34px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--dh-b); text-decoration: none; white-space: nowrap; transition: background-color .15s, color .15s; }
.s-nav-a:hover { background: rgba(15, 23, 42, .05); color: var(--dh-h); }
.s-nav-a[aria-current="page"] { background: var(--navy); color: #fff; }
.dh-btn.s-cta { padding: 0 16px; border-radius: 999px; font-weight: 600; text-decoration: none; background: var(--navy); border-color: var(--navy); color: #fff; }
.dh-btn.s-cta:hover { background: var(--navy-h); }
.dh-act[aria-current="page"] { background: var(--dh-s2); color: var(--dh-h); font-weight: 600; }
.s-act-pri { color: var(--navy); font-weight: 600; }
@media (min-width: 768px) and (max-width: 1079px) {
  .s-body .dh-burger { display: inline-flex; }
  .s-body .dh-sheet { display: block; top: 56px; }
  .s-body .dh-right > .s-cta { display: none; }
}
@media (min-width: 1080px) { .s-nav { display: flex; } }

/* Lienzo y paneles */
.s-lienzo { max-width: calc(var(--s-max) + 2 * var(--s-gut)); margin: 0 auto; padding: 8px var(--s-gut) 16px; display: flex; flex-direction: column; gap: 12px; }
.s-panel { background: #fff; border-radius: 24px; padding: 28px clamp(16px, 5vw, 22px); border: 1px solid var(--line); }
.s-migas ol { list-style: none; margin: 0; padding: 0 8px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--ink-3); }
.s-migas li + li::before { content: "/"; margin-right: 6px; color: #94A3B8; }
.s-migas li { display: inline-flex; align-items: center; }
.s-migas a, .s-migas span { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.2; }
.s-migas a { color: var(--ink-2); text-decoration: none; }
.s-migas a:hover { color: var(--navy); text-decoration: underline; }

.s-hero { padding: 36px 8px 28px; }
.s-pre { margin: 0 0 10px; font-size: var(--fs-eti); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.s-h1 { font-size: var(--fs-h1); line-height: 1.06; text-wrap: balance; letter-spacing: -.035em; font-weight: 600; max-width: 18ch; }
.s-lead { margin: 18px 0 0; font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
.s-h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -.025em; font-weight: 600; max-width: 24ch; text-wrap: balance; }
.s-h3 { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; }
.s-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.s-cab .s-h2 { margin: 0; }
.s-panel > .s-h2 { margin-bottom: 20px; }
.s-dos { display: grid; gap: 16px; }
.s-prosa p, .s-prosa-p { margin: 0 0 12px; color: var(--ink-2); font-size: var(--fs-p); max-width: 66ch; overflow-wrap: break-word; }
.s-prosa p:last-child { margin-bottom: 0; }
.s-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.s-lista li { position: relative; padding: 14px 16px 14px 40px; background: var(--tile); border-radius: 16px; color: var(--ink-2); }
.s-lista li::before { content: ""; position: absolute; left: 17px; top: 23px; width: 8px; height: 8px; border-radius: 50%; background: var(--navy-h); }

/* Botones píldora (un primario por zona) */
.s-acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.s-btn:active { transform: scale(.98); }
.s-btn-sm { min-height: 44px; padding: 0 16px; font-size: 14px; }
.s-btn-pri { background: var(--navy); color: #fff; }
.s-btn-pri:hover { background: var(--navy-h); }
.s-btn-sec { background: #fff; color: var(--navy); border-color: var(--line-2); }
.s-btn-sec:hover { border-color: var(--navy); }
.s-btn-blanco { background: #fff; color: var(--ink); }
.s-btn-blanco:hover { background: #E2E8F0; }
.s-btn-vidrio { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .34); overflow-wrap: anywhere; }
.s-btn-vidrio:hover { background: rgba(255, 255, 255, .2); }
.s-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; overflow-wrap: anywhere; font-weight: 600; color: var(--navy); text-decoration: none; }
.s-link:hover .s-i-flecha, .s-cong-a:hover .s-i-flecha { transform: translate(2px, -2px); }

/* Tarjetas */
.s-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.s-tile { background: var(--tile); border-radius: var(--r-tile); padding: 22px 20px; }
.s-tile h3 { font-size: 17px; line-height: 1.3; margin-bottom: 8px; }
.s-tile p { margin: 0 0 6px; color: var(--ink-2); font-size: 15px; }
.s-tile-grande { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.s-tile-grande p { font-size: 20px; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }

.s-serv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; align-items: start; }
.s-num { font-size: 15px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 6px; }
.s-serv .s-h2 { margin-bottom: 10px; }

/* Congresos */
.s-congs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.s-cong-a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px; border-radius: var(--r-tile); background: var(--tile); color: var(--ink); text-decoration: none; border: 1px solid transparent; transition: border-color .2s, box-shadow .2s, background-color .2s; }
a.s-cong-a:hover { background: #fff; border-color: var(--line); box-shadow: 0 10px 28px -12px rgba(15, 23, 42, .16); }
.s-cong-fecha { font-size: 13px; font-weight: 600; color: var(--navy-h); }
.s-cong-nombre { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.s-cong-sub { font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.s-cong-pie { margin-top: auto; padding-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; color: var(--ink-3); }
.s-cong-ir { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--navy); }
.s-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: var(--fs-eti); font-weight: 600; }
.s-chip-ok { background: var(--ok-bg); color: var(--ok-tx); }
.s-vacio { margin: 0; color: var(--ink-2); }

/* FAQ */
.s-faq details { border-bottom: 1px solid var(--line); }
.s-faq details:last-child { border-bottom: 0; }
.s-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary::after { content: "+"; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--tile); display: grid; place-items: center; font-size: 20px; color: var(--navy); transition: transform .25s var(--ease); }
.s-faq details[open] summary::after { transform: rotate(45deg); }
.s-faq p { margin: 0 0 18px; color: var(--ink-2); max-width: 70ch; }

/* Bloque oscuro (CTA) */
.s-oscuro { background: var(--dark); border-color: var(--dark); color: #fff; }
.s-oscuro .s-h2 { color: #fff; }
.s-oscuro p { color: rgba(255, 255, 255, .78); max-width: 58ch; margin: 12px 0 0; }
.s-oscuro :focus-visible { outline-color: #fff; }

/* Sobre DMC (ficha citable) */
.s-sobre-cab { margin-bottom: 18px; }
.s-ficha { margin: 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
.s-ficha > div { background: var(--tile); border-radius: 16px; padding: 14px 16px; }
.s-ficha dt { font-size: var(--fs-eti); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
.s-ficha dd { margin: 0; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }

/* Pie */
.s-pie { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--dark); color: #fff; border-radius: 24px; padding: 30px 20px 20px; }
.s-pie-marca { grid-column: 1 / -1; }
.s-pie-logo { display: block; width: 92px; height: 26px; background: #fff; -webkit-mask: url(ds/logo-dmc-mark.png) left center / contain no-repeat; mask: url(ds/logo-dmc-mark.png) left center / contain no-repeat; }
.s-pie-marca p { margin: 14px 0 0; font-size: 20px; line-height: 1.25; font-weight: 500; letter-spacing: -.02em; max-width: 18ch; }
.s-pie-col h2 { margin: 4px 0 6px; font-size: var(--fs-eti); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .66); }
.s-pie-col a { display: flex; align-items: center; min-height: 44px; width: fit-content; max-width: 100%; padding: 4px 0; font-size: 14px; line-height: 1.3; color: #fff; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.s-pie-col a:hover { text-decoration-color: #fff; }
.s-pie-col p { margin: 7px 0 0; font-size: 14px; color: rgba(255, 255, 255, .8); }
.s-pie-base { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: var(--fs-eti); color: rgba(255, 255, 255, .66); }
.s-pie-base a { color: inherit; text-underline-offset: 3px; }
.s-pie :focus-visible { outline-color: #fff; }

@media (min-width: 640px) {
  .s-grid-2, .s-grid-3, .s-grid-serv, .s-congs, .s-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  :root { --s-gut: 24px; --dh-pad: var(--s-gut); }
  .s-lienzo { padding: 12px var(--s-gut) 20px; gap: 14px; }
  .s-panel { border-radius: var(--r-panel); padding: 40px; }
  .s-hero { padding: 56px 16px 36px; }
    .s-pie { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 44px 40px 24px; border-radius: var(--r-panel); }
  .s-pie-base { flex-direction: row; justify-content: space-between; }
}
@media (min-width: 1024px) {
  .s-dos { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; }
  .s-grid-3, .s-grid-serv, .s-congs, .s-ficha { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .s-hero { padding: clamp(64px, 6vw, 96px) 24px clamp(44px, 4vw, 60px); }
  .s-serv { grid-template-columns: 80px minmax(0, 1fr); }
}


/* ── Nov 2026: animaciones, íconos, ilustraciones y fotos ─────────────────────────────────────────────── */
/* Movimiento: la clase html.dm-m (script en línea del <head>) oculta la portada ANTES de pintar; GSAP la hace entrar.
   Sin JS, sin GSAP (1,5 s), con reduced-motion o al imprimir: todo visible y quieto. */
[data-m-w] { display: inline-block; }
html.dm-m [data-m-w], html.dm-m [data-m-in], html.dm-m [data-m-poster], html.dm-m [data-m-arte] { opacity: 0; }
@media print {
  [data-m-w], [data-m-in], [data-m-poster], [data-m-arte], [data-reveal], [data-reveal] > * { opacity: 1 !important; visibility: visible !important; transform: none !important; }
}

/* Íconos en caja (Superficies: caja 44, radio 14) */
.s-ibox { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px; background: #fff; color: var(--navy); box-shadow: 0 1px 0 rgba(15, 23, 42, .05), 0 6px 16px -10px rgba(15, 35, 96, .35); }
.s-ibox .ic { width: 22px; height: 22px; stroke-width: 1.8; }
.s-ibox-sm { width: 36px; height: 36px; border-radius: 12px; }
.s-ibox-sm .ic { width: 18px; height: 18px; }
.s-ibox-lg { width: 56px; height: 56px; border-radius: 18px; background: var(--tile); box-shadow: none; }
.s-ibox-lg .ic { width: 26px; height: 26px; }
.s-tile-ic .s-ibox { margin-bottom: 16px; }
.s-tile-ic { transition: background-color .25s var(--ease), box-shadow .25s var(--ease); }
.s-tile-ic:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px -18px rgba(15, 23, 42, .25); }
.s-tile-ic:hover .s-ibox { background: var(--navy); color: #fff; }
.s-ibox { transition: background-color .25s var(--ease), color .25s var(--ease); }
.s-tile-grande .s-ibox { margin-bottom: 4px; }
.s-btn .ic { width: 18px; height: 18px; }

/* Portada de inicio: texto + logo animado + cifras */
.s-hero-inicio { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.s-hero-arte { position: relative; max-width: 560px; width: 100%; margin: 0 auto; }   /* logo libre, sin caja (pedido de Andrés) */
.s-logo { position: relative; display: block; width: 100%; height: auto; }
.s-logo-blanco .lg-letra { fill: #fff; }
.s-kpis { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-kpis li { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.s-kpi-n { font-size: clamp(30px, 1.2rem + 2.2vw, 48px); line-height: 1; font-weight: 600; letter-spacing: -.03em; color: var(--navy); font-variant-numeric: tabular-nums; }
.s-kpi-t { font-size: 13px; line-height: 1.35; color: var(--ink-2); text-wrap: balance; }
.s-kpis .s-kpi-pre { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* Portada con foto (si el manifiesto trae uso "hero") */
.s-hero-foto { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; background: var(--dark); color: #fff; padding: 40px 20px 56px; }
.s-hero-fondo { position: absolute; inset: 0; margin: 0; z-index: -1; }
.s-hero-fondo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-hero-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 21, 34, .78), rgba(14, 21, 34, .9)); }
.s-hero-foto .s-h1 { color: #fff; }
.s-hero-foto .s-pre, .s-hero-foto .s-lead { color: rgba(255, 255, 255, .86); }
.s-hero-foto .s-btn-sec { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .4); }
.s-hero-foto .s-btn-sec:hover { background: rgba(255, 255, 255, .2); border-color: #fff; }
.s-hero-foto .s-btn-pri { background: #fff; color: var(--ink); }
.s-hero-foto .s-btn-pri:hover { background: #E2E8F0; }
.s-hero-foto .s-logo { filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .35)); }
.s-hero-foto .s-kpis li { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.s-hero-foto .s-kpi-n { color: #fff; }
.s-hero-foto .s-kpi-t { color: rgba(255, 255, 255, .8); }
.s-hero-foto :focus-visible { outline-color: #fff; }
.s-foto-pie { position: absolute; left: 20px; right: 14px; bottom: 14px; text-align: right; z-index: 1; font-size: 13px; line-height: 1.35; color: rgba(255, 255, 255, .8); }

/* Índice de servicios (píldoras con ícono) */
.s-indice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.s-indice a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 14px; line-height: 1.25; font-weight: 500; text-decoration: none; transition: border-color .2s, background-color .2s; }
.s-indice a:hover { border-color: var(--navy); }
.s-indice .ic { width: 18px; height: 18px; color: var(--navy); }
.s-serv-lado { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.s-serv .s-num { padding-top: 0; }

/* Recorrido del congreso (ilustraciones de línea) */
.s-ruta-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); counter-reset: paso; }
.s-ruta-paso { position: relative; background: var(--tile); border-radius: var(--r-tile); padding: 18px 20px 22px; }
.s-ruta-arte { background: #fff; border-radius: 16px; padding: 10px; margin-bottom: 14px; }
.s-ruta-il { display: block; width: 100%; height: auto; max-height: 150px; }
.s-ruta-n { margin: 0 0 6px; display: flex; align-items: center; gap: 10px; font-size: var(--fs-eti); font-weight: 600; letter-spacing: .1em; color: var(--ink-3); }
.s-ruta-n::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.s-ruta-paso h3 { font-size: 17px; line-height: 1.3; margin-bottom: 6px; }
.s-ruta-paso p:last-child { margin: 0; color: var(--ink-2); font-size: 15px; }
.il-t, .il-tb, .il-os { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.il-t { stroke: var(--navy); }
.il-tb { stroke: #fff; stroke-width: 2.6; }
.il-os { stroke: var(--oro); stroke-width: 3; }
.il-c { fill: var(--celeste-3); }
.il-w { fill: #fff; }
.il-o { fill: var(--oro); }

/* Mapa Ecuador–Perú–Colombia (mismo celeste y punto dorado del logo) */
.s-mapa { display: block; width: 100%; height: auto; overflow: visible; }
.s-mapa-tierra { fill: #E6EBF1; }
.s-mapa-pais { fill: var(--celeste-2); stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.s-mapa .s-mapa-pais.es-activo { fill: var(--navy-h); }
.s-mapa-ruta { fill: none; stroke: #C99400; stroke-width: 1.6; stroke-dasharray: 3 5; stroke-linecap: round; opacity: .85; }
.s-mapa-pe .s-mapa-et-pe, .s-mapa-co .s-mapa-et-co { fill: #fff; }
.s-mapa-ciudad { fill: var(--navy); stroke: #fff; stroke-width: 2; }
.s-mapa-casa { fill: var(--oro-2); stroke: #fff; stroke-width: 2.5; }
.s-mapa-anillo { fill: none; stroke: var(--oro-2); stroke-width: 1.5; opacity: .9; }
.s-mapa-viajero { fill: var(--oro); }
.s-mapa-et { font-family: var(--font-body, Inter, sans-serif); font-size: 10px; font-weight: 600; letter-spacing: .12em; fill: var(--ink-3); }
.s-mapa-et-c { letter-spacing: 0; font-size: 11px; fill: var(--ink); }
.s-paises-in { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.s-paises-mapa { background: var(--tile); border-radius: var(--r-tile); padding: 18px 24px; overflow: hidden; max-width: 360px; width: 100%; margin: 0 auto; }
.s-paises-lista { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.s-pais-a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px 12px 12px; border-radius: 18px; background: var(--tile); color: var(--ink); text-decoration: none; transition: background-color .2s, box-shadow .2s; }
.s-pais-a:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 10px 24px -16px rgba(15, 23, 42, .25); }
.s-pais-a > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.s-pais-a strong { font-size: 16px; }
.s-pais-a strong + span { font-size: 14px; color: var(--ink-2); }
.s-pais-a .s-i-flecha { color: var(--navy); }
.s-pais-a:hover .s-i-flecha { transform: translate(2px, -2px); }
.s-hero-pais { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.s-hero-mapa { max-width: 280px; width: 76%; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 18px 22px; overflow: hidden; }
@media (max-width: 639px) { .s-hero-mapa { max-width: 230px; } }
.s-contacto-lineas a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; overflow-wrap: anywhere; }
.s-donde-cab { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

/* Etiqueta discreta Congreso / Acto académico o campaña */
.s-foto-tipo { position: absolute; top: 12px; left: 12px; z-index: 1; height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .01em; background: rgba(255, 255, 255, .92); color: var(--navy); }
.s-foto-tipo.es-acto { background: rgba(14, 21, 34, .72); color: #fff; }
.s-bento-mas { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; }
.s-bento-mas figure { position: relative; margin: 0; height: 100%; border-radius: var(--r-tile); overflow: hidden; background: var(--tile); }
.s-bento-mas img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s-bento-mas figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 16px 14px; display: flex; flex-direction: column; gap: 2px; background: linear-gradient(180deg, transparent, rgba(14, 21, 34, .82)); color: #fff; font-size: 13px; line-height: 1.35; }
.s-bento-mas figcaption strong { font-size: 14px; font-weight: 600; }
.s-serv-img { grid-column: 1 / -1; margin: 6px 0 0; border-radius: var(--r-tile); overflow: hidden; position: relative; aspect-ratio: 16 / 10; background: var(--tile); }
.s-serv-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s-serv-img figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 10px; font-size: 13px; line-height: 1.35; color: #fff; background: linear-gradient(180deg, transparent, rgba(14, 21, 34, .78)); }
.s-paises-txt { margin: 14px 0 0; color: var(--ink-2); font-size: 15px; max-width: 60ch; }
.s-mapa-latam .s-mapa-pais { fill: var(--celeste-2); stroke: none; }
.s-mapa-et-l { font-size: 9px; letter-spacing: .02em; fill: var(--ink-2); font-weight: 600; }
.s-mapa-latam .s-mapa-et-c { fill: var(--ink); font-size: 9.5px; }
.s-mapa-latam .s-mapa-ruta { stroke-width: 1.1; }

/* Pies de foto largos: dos líneas como máximo */
.s-bento figcaption strong, .s-bento-mas figcaption strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Portafolio de afiches (static/afiches/congresos.json): póster vertical + texto debajo */
.s-cuenta { margin: 0; font-size: 14px; color: var(--ink-3); }
.s-afiches { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.s-afiche-a { display: flex; flex-direction: column; gap: 10px; color: var(--ink); text-decoration: none; border-radius: 18px; }
.s-afiche-a img, .s-afiche-tipo { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--tile); box-shadow: 0 1px 0 rgba(15, 23, 42, .05), 0 12px 26px -18px rgba(15, 23, 42, .35); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
a.s-afiche-a:hover img, a.s-afiche-a:hover .s-afiche-tipo, a.s-afiche-a:focus-visible img { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(15, 23, 42, .05), 0 18px 34px -18px rgba(15, 23, 42, .45); }
.s-afiche-tipo { aspect-ratio: 3 / 4; position: relative; overflow: hidden; background: var(--navy); color: #fff; padding: 18px 16px; display: flex; flex-direction: column; justify-content: space-between; }
.s-afiche-tipo::after { content: ""; position: absolute; right: -30%; bottom: -18%; width: 90%; aspect-ratio: 1; border-radius: 50%; border: 10px solid var(--oro); opacity: .9; }
.s-afiche-tipo-n { position: relative; font-size: clamp(16px, 2.2vw, 20px); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.s-afiche-tipo-m { position: relative; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--celeste); }
.s-afiche-txt { display: flex; flex-direction: column; gap: 3px; padding: 0 2px; }
.s-afiche-txt strong { font-size: 14px; line-height: 1.3; font-weight: 600; }
.s-afiche-txt span { font-size: 13px; color: var(--ink-3); }

/* Fotos: galería bento + tiras (solo si el manifiesto trae fotos). Celdas de alto fijo: sin saltos de diseño. */
.s-bento, .s-tira { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; }
.s-bento-i, .s-tira li { min-width: 0; }
.s-bento figure, .s-tira figure { position: relative; margin: 0; height: 100%; border-radius: var(--r-tile); overflow: hidden; background: var(--tile); }
.s-bento img, .s-tira img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.s-bento figure:hover img, .s-tira figure:hover img { transform: scale(1.03); }
.s-bento figcaption, .s-tira figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 16px 14px; display: flex; flex-direction: column; gap: 2px; background: linear-gradient(180deg, transparent, rgba(14, 21, 34, .82)); color: #fff; font-size: 13px; line-height: 1.35; }
.s-bento figcaption strong { font-size: 15px; font-weight: 600; }
.s-bento figcaption span { color: rgba(255, 255, 255, .85); }

@media (min-width: 640px) {
  .s-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s-ruta-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-bento, .s-tira { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
  .s-bento .s-bento-i:first-child { grid-column: 1 / -1; grid-row: span 2; }
  .s-bento-2 > .s-bento-i:last-child, .s-bento-4 > .s-bento-i:last-child, .s-bento-6 > .s-bento-i:last-child { grid-column: 1 / -1; }
  .s-tira-1 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 360px; }
  .s-hero-mapa { width: 100%; }
  .s-bento-mas { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
  .s-afiches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .s-hero-foto { border-radius: var(--r-panel); }
  .s-hero-foto { padding: 64px 40px 48px; }
  .s-hero-fondo::after { background: linear-gradient(100deg, rgba(14, 21, 34, .92) 0%, rgba(14, 21, 34, .78) 48%, rgba(14, 21, 34, .45) 100%); }
}
@media (min-width: 1024px) {
  .s-hero-inicio { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 48px; row-gap: 40px; }
  .s-hero-inicio .s-kpis { grid-column: 1 / -1; }
  .s-hero-pais { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 56px; }
  .s-hero-mapa { max-width: 340px; padding: 24px 30px; }
  .s-ruta-pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s-paises-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; }
  .s-paises-mapa { max-width: 400px; }
  .s-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; }
  .s-bento .s-bento-i:first-child { grid-column: span 2; grid-row: span 2; }
  .s-bento .s-bento-i:last-child { grid-column: auto; }
  .s-bento-1 .s-bento-i:first-child { grid-column: 1 / -1; }
  .s-bento-2 .s-bento-i:last-child { grid-column: span 2; grid-row: span 2; }
  .s-bento-3 .s-bento-i:not(:first-child), .s-bento-4 .s-bento-i:nth-child(2) { grid-column: span 2; }
  .s-bento-6 .s-bento-i:nth-child(6) { grid-column: 1 / -1; }
  .s-bento-7 .s-bento-i:nth-child(n+6) { grid-column: span 2; }
  .s-bento-mas { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; }
  .s-afiches { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 18px; }
  .s-serv.s-serv-foto { grid-template-columns: 80px minmax(0, 1fr) minmax(0, 400px); }
  .s-serv-img { grid-column: auto; margin: 0; }
  .s-tira-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 300px; }
  .s-tira-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .s-bento figure:hover img, .s-tira figure:hover img { transform: none; }
}

/* ── Responsive (nov 2026): "que no se vea tan grande ni tan pequeño" ─────────────────────────────────────────
   Contenedor 1200 → 1280 en pantallas grandes, márgenes 12 / 24 / 32, escala fluida (tokens --fs-* en :root),
   grillas que se reacomodan sin huérfanas y áreas táctiles de 44 px. Probado en 320–1920 (tests/test_responsive.py). */
.s-body { --dh-max: calc(var(--s-max) + 2 * var(--s-gut)); }
.s-body .dh-burger { width: 44px; height: 44px; }
.s-tile p, .s-ruta-paso p:last-child, .s-paises-txt { font-size: 15px; }
.s-faq p, .s-oscuro p { font-size: var(--fs-p); }
.s-panel p:not([class]) { max-width: 70ch; }
.s-cab .s-h2 { max-width: 28ch; }
.s-hero .s-h1 { max-width: 20ch; }
.s-hero-inicio .s-h1 { max-width: 17ch; }

/* Botones del hero y del bloque oscuro: ancho completo en teléfonos (mejor toque, el correo no se parte) */
@media (max-width: 479px) {
  .s-acciones .s-btn { flex: 1 1 100%; }
  .s-btn-vidrio { overflow-wrap: normal; }
}

/* Portada: el logo acompaña, no tapa (móvil ≤ 300 px, tablet ≤ 380 px, escritorio ≤ 480 px) */
.s-hero-arte { max-width: min(300px, 78%); }
@media (min-width: 640px) { .s-hero-arte { max-width: 380px; } }
@media (min-width: 1024px) { .s-hero-arte { max-width: 480px; } }
.s-kpis li { min-width: 0; }
.s-kpi-t { overflow-wrap: normal; hyphens: manual; }

/* Servicios: en teléfono el ícono y el número van en fila arriba (el texto usa todo el ancho) */
@media (max-width: 639px) {
  .s-serv { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .s-serv-lado { flex-direction: row; align-items: center; gap: 12px; }
  .s-ibox-lg { width: 48px; height: 48px; border-radius: 16px; }
}

/* Recorrido: 2 columnas desde 480 */
@media (min-width: 480px) and (max-width: 639px) { .s-ruta-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Galería: 2 columnas también en teléfono (la primera foto a lo ancho); la última impar ocupa la fila */
@media (max-width: 639px) {
  .s-bento, .s-bento-mas { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(176px, 50vw, 220px); }
  .s-bento .s-bento-i:first-child { grid-column: 1 / -1; grid-row: span 2; }
  .s-bento > .s-bento-i:last-child:nth-child(even), .s-bento-mas > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .s-bento figcaption, .s-bento-mas figcaption { padding: 28px 10px 10px; font-size: 13px; }
  .s-bento figcaption strong, .s-bento-mas figcaption strong { font-size: 13px; }
  .s-bento figcaption span, .s-bento-mas figcaption span { display: none; }
  .s-bento .s-bento-i:first-child figcaption span { display: block; }
  .s-foto-tipo { top: 8px; left: 8px; }
}
@media (min-width: 640px) and (max-width: 1023px) { .s-bento-mas > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .s-bento-mas > li:last-child:nth-child(4n+3) { grid-column: span 2; } }

/* Afiches: 2 (teléfono) · 3 (tablet) · 4 (escritorio) · 5 en pantallas grandes si la lista es larga */
@media (min-width: 1280px) { .s-afiches:has(> li:nth-child(9)) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Ficha "Sobre DMC" (5 tarjetas): sin huérfana. Tablet 2+2+1 a lo ancho; escritorio 3 arriba + 2 abajo. */
@media (min-width: 640px) and (max-width: 1023px) { .s-ficha > div:last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .s-ficha { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .s-ficha > div { grid-column: span 2; }
  .s-ficha > div:nth-child(n+4) { grid-column: span 3; }
}

/* Pie: en teléfonos angostos Participantes y Contacto van a lo ancho (el correo no se corta) */
@media (max-width: 479px) {
  .s-pie { gap: 18px 16px; padding: 28px 18px 18px; }
  .s-pie-col:nth-child(4), .s-pie-col:nth-child(5) { grid-column: 1 / -1; }
  .s-pie-col a { overflow-wrap: normal; }
}

/* Tablet y escritorio */
@media (min-width: 768px) { .s-hero-mapa { max-width: 300px; } }
@media (min-width: 1024px) {
  :root { --s-gut: 32px; }
  .s-panel { padding: clamp(40px, 3.6vw, 52px); }
}
@media (min-width: 1440px) {
  :root { --s-max: 1280px; }
  .s-tile p, .s-ruta-paso p:last-child { font-size: 16px; }
}
.s-body .dh-brand { min-height: 44px; display: inline-flex; align-items: center; }
.s-pie-base a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 768px) { .s-pie-base { align-items: center; } }

.s-tile p { overflow-wrap: break-word; }
/* Servicios del inicio: 2 columnas hasta 1199 (en 4 columnas angostas el texto se apretaba), 4 desde 1200 */
@media (min-width: 1024px) { .s-grid-serv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
  .s-grid-serv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s-pie { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); }
  .s-pie-marca { grid-column: auto; }
}
/* Portada del inicio entre 1024 y 1279: más aire para el título, logo más chico */
@media (min-width: 1024px) and (max-width: 1279px) {
  .s-hero-inicio { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); column-gap: 40px; }
  .s-hero-inicio .s-h1 { font-size: min(var(--fs-h1), 4.9vw); }
  .s-hero-arte { max-width: 340px; }
}
/* Tablet: listas de 4 u 8 afiches en 4 columnas (en 3 dejaban una fila coja); "Por qué DMC" en 3 desde 768 */
@media (min-width: 640px) and (max-width: 1023px) {
  .s-afiches:has(> li:nth-child(4):last-child), .s-afiches:has(> li:nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) { .s-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Móvil compacto (3 nov 2026): textos más chicos y listas largas en carril horizontal */
.s-carril { display: flex !important; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--carril-pad, 0px); margin-inline: calc(-1 * var(--carril-pad, 0px)); padding: 2px var(--carril-pad, 0px) 10px;
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.s-carril > li { flex: 0 0 auto; scroll-snap-align: start; min-width: 0; }
.s-carril::-webkit-scrollbar { height: 6px; }
.s-carril::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
.s-afiches.s-carril > li { width: 132px; }
.s-afiches.s-carril .s-afiche-a { gap: 6px; }
.s-afiches.s-carril .s-afiche-txt strong { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.s-afiches.s-carril .s-afiche-txt span { font-size: 12px; }
.s-afiches.s-carril .s-afiche-tipo { padding: 12px 10px; }
.s-afiches.s-carril .s-afiche-tipo-n { font-size: 13px; }
@media (min-width: 768px) { .s-afiches.s-carril > li { width: 160px; } .s-panel { --carril-pad: 40px; } }
@media (min-width: 1024px) { .s-afiches.s-carril > li { width: 172px; } .s-panel { --carril-pad: clamp(40px, 3.6vw, 52px); } }

@media (max-width: 639px) {
  :root { --fs-h1: clamp(25px, 18px + 2.2vw, 28px); --fs-h2: clamp(19px, 16px + 1vw, 21px); --fs-lead: 15px; --fs-p: 15px; --fs-eti: 11.5px; }
  body.s-body { font-size: 15px; line-height: 1.55; }
  .s-lienzo { gap: 10px; }
  .s-panel { --carril-pad: 16px; padding: 22px 16px; border-radius: 20px; }
  .s-panel > .s-h2 { margin-bottom: 14px; }
  .s-cab { margin-bottom: 14px; gap: 10px; }
  .s-pre { margin-bottom: 6px; }
  .s-lead { margin-top: 12px; }
  .s-hero { padding: 22px 6px 18px; }
  .s-hero-foto { padding: 28px 16px 52px; }
  .s-hero-inicio { gap: 18px; }
  .s-hero-arte { max-width: 170px; }
  .s-kpis { gap: 8px; }
  .s-kpis li { padding: 12px 14px; border-radius: 16px; }
  .s-kpi-n { font-size: 24px; }
  .s-kpi-t { font-size: 12px; }
  .s-acciones { gap: 8px; margin-top: 18px; }
  .s-tile { padding: 16px; border-radius: 18px; }
  .s-tile h3, .s-ruta-paso h3 { font-size: 15.5px; margin-bottom: 4px; }
  .s-tile p, .s-ruta-paso p:last-child, .s-paises-txt { font-size: 14px; }
  .s-tile-ic .s-ibox { margin-bottom: 10px; }
  .s-ibox { width: 38px; height: 38px; border-radius: 12px; }
  .s-prosa p, .s-prosa-p { margin-bottom: 10px; }
  .s-lista li { padding: 11px 14px 11px 36px; }
  .s-lista li::before { left: 15px; top: 19px; }

  .s-afiches, .s-bento, .s-bento-mas, .s-grid-serv, .s-ruta-pasos, .s-grid-3 { display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin-inline: -16px; padding: 2px 16px 10px; scrollbar-width: none; }
  .s-afiches > li, .s-bento > li, .s-bento-mas > li, .s-grid-serv > li, .s-ruta-pasos > li, .s-grid-3 > li { flex: 0 0 auto; scroll-snap-align: start; min-width: 0; }
  .s-afiches > li { width: 40vw; max-width: 170px; }
  .s-afiches.s-carril > li { width: 31vw; max-width: 132px; }
  .s-afiche-txt strong { font-size: 13px; }
  .s-afiche-txt span { font-size: 12px; }
  .s-bento, .s-bento-mas { grid-auto-rows: auto; }
  .s-bento > li, .s-bento-mas > li { width: 72vw; height: 200px; grid-column: auto !important; grid-row: auto !important; }
  .s-bento-mas { margin-top: 0; }
  .s-bento > li:first-child { width: 80vw; }
  .s-grid-serv > li { width: 76vw; }
  .s-ruta-pasos > li, .s-grid-3 > li { width: 72vw; }
  .s-ruta-arte { padding: 6px; margin-bottom: 10px; }
  .s-ruta-il { max-height: 96px; }
  .s-ruta-paso { padding: 14px 16px 16px; }
  .s-pie { padding: 24px 16px 16px; gap: 16px; }
}
@media (max-width: 639px) {
  .s-paises-mapa { max-width: 220px; margin-inline: auto; }
  .s-paises-lista li { padding-block: 8px; }
  .s-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .s-ficha > div { padding: 10px 12px; border-radius: 14px; }
  .s-ficha > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .s-ficha dt { font-size: 10.5px; }
  .s-ficha dd { font-size: 13.5px; line-height: 1.45; }
  .s-pie { gap: 12px 14px; }
  .s-pie-col:nth-child(4) { grid-column: auto; }
  .s-pie-col li, .s-pie-col a { font-size: 13.5px; }
}