/* ==========================================================
   VOTE360 — CAPA MÓVIL "APP" (agosto 2026)
   ----------------------------------------------------------
   Convierte el sitio público en una experiencia tipo app en
   ≤820px (mismo breakpoint que el nav móvil y el sticky CTA
   que esta capa reemplaza):

     1. Dock inferior de 5 posiciones con CTA central elevado
        (reemplaza a .mobile-sticky-cta y al .wa-fab en móvil).
     2. Bottom sheet de contacto (WhatsApp / demo / llamada).
     3. Carruseles con scroll-snap para tarjetas (casos,
        testimonios, relacionadas) en vez de pilas verticales.
     4. Tablas de calendario → tarjetas; comparativas → pares
        apilados ×/✓.
     5. Índice de secciones (.m-toc) sticky en páginas de
        contenido.
     6. Compactación tipográfica y de espaciado + zonas táctiles
        de 48px, safe-areas iOS y estados :active.

   Se carga DESPUÉS de pages-index-landing-2026-r2.css y de
   contenido.css: a igual especificidad gana esta capa. Es
   AUTOCONTENIDA (fallbacks en cada var()) para poder usarse
   también en las páginas legales, que no cargan el CSS del
   landing. El desktop NO se toca: todo vive bajo @media.
   ========================================================== */

/* ----------------------------------------------------------
   Componentes nuevos: ocultos por defecto (desktop)
   ---------------------------------------------------------- */
.m-dock,
.m-sheet,
.m-toc { display: none; }
.m-more { display: none; }
.m-dots { display: none; }

/* Scroll suave global (el JS del landing ya lo hace con offset;
   esto cubre las páginas de contenido y los chips del índice). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ==========================================================
   CAPA MÓVIL
   ========================================================== */
@media (max-width: 820px) {

  /* ---------- Base táctil ---------- */
  html { -webkit-tap-highlight-color: transparent; }
  body {
    /* El landing nunca resetea el margin del body (8px del UA): en desktop
       es imperceptible, en móvil desalinea el contenido del dock fijo. */
    margin: 0;
    overflow-x: hidden;
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
  a, button { touch-action: manipulation; }

  /* El dock reemplaza al sticky CTA y al FAB de WhatsApp:
     un solo sistema de acción persistente, no tres capas. */
  .mobile-sticky-cta { display: none; }
  .wa-fab { display: none; }

  /* ========================================================
     1. DOCK INFERIOR — navegación de app con CTA central
     ======================================================== */
  .m-dock {
    display: block;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 260;
    background: linear-gradient(180deg, rgba(4, 8, 46, 0.88), rgba(0, 4, 46, 0.97));
    -webkit-backdrop-filter: blur(18px) saturate(140%);
            backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid var(--line-strong, rgba(233, 213, 154, 0.28));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    animation: m-dock-in 480ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  @keyframes m-dock-in {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  .m-dock-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    max-width: 560px;
    margin: 0 auto;
  }

  .m-dock-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 2px 9px;
    min-height: 56px;
    justify-content: flex-end;
    font-family: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(250, 250, 247, 0.55);
    text-decoration: none;
    -webkit-user-select: none;
            user-select: none;
    transition: color 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
  }
  .m-dock-item svg { width: 22px; height: 22px; display: block; }
  .m-dock-item:active { transform: scale(0.94); }
  .m-dock-item.on { color: var(--gold-2, #e9d59a); }
  .m-dock-item.on::after {
    content: "";
    position: absolute;
    bottom: 4px; left: 50%;
    transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--gold-2, #e9d59a);
    box-shadow: 0 0 8px var(--gold-2, #e9d59a);
  }

  /* CTA central elevado: el gesto de conversión siempre bajo el pulgar */
  .m-dock-demo { overflow: visible; color: var(--gold-2, #e9d59a); }
  .m-dock-fab {
    display: grid;
    place-items: center;
    width: 52px; height: 52px;
    margin-top: -24px;
    border-radius: 50%;
    background: linear-gradient(180deg, var(--gold-2, #e9d59a), var(--gold-4, #c7a563));
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.4) inset,
      0 -1px 0 rgba(0, 0, 0, 0.15) inset,
      0 10px 26px -8px rgba(221, 197, 135, 0.65);
    border: 3px solid rgba(0, 4, 46, 0.9);
  }
  .m-dock-fab img { width: 26px; height: 26px; border-radius: 6px; display: block; }
  .m-dock-demo:active .m-dock-fab { transform: scale(0.92); }

  /* Tras el 45% de scroll (intención demostrada) el FAB "respira" */
  .m-dock.is-hot .m-dock-fab { animation: m-fab-pulse 2.2s ease-in-out infinite; }
  @keyframes m-fab-pulse {
    0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 -1px 0 rgba(0,0,0,0.15) inset, 0 10px 26px -8px rgba(221,197,135,0.65), 0 0 0 0 rgba(233,213,154,0.45); }
    50%      { box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 -1px 0 rgba(0,0,0,0.15) inset, 0 10px 26px -8px rgba(221,197,135,0.75), 0 0 0 12px rgba(233,213,154,0); }
  }

  /* ========================================================
     2. BOTTOM SHEET — hub de contacto (WhatsApp/demo/llamada)
     ======================================================== */
  .m-sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 320;
    visibility: hidden;
    pointer-events: none;
  }
  .m-sheet.open { visibility: visible; pointer-events: auto; }

  .m-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 2, 22, 0.62);
    -webkit-backdrop-filter: blur(3px);
            backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 260ms ease-out;
  }
  .m-sheet.open .m-sheet-backdrop { opacity: 1; }

  .m-sheet-panel {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    max-height: 82vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, #0b1140, #04082e 70%);
    border-top: 1px solid var(--line-strong, rgba(233, 213, 154, 0.28));
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -24px 70px -20px rgba(0, 0, 0, 0.85);
    padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateY(102%);
    transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
    font-family: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
    color: #fafaf7;
    outline: none;
  }
  .m-sheet.open .m-sheet-panel { transform: translateY(0); }

  .m-sheet-grip {
    width: 42px; height: 4px;
    border-radius: 999px;
    background: rgba(250, 250, 247, 0.22);
    margin: 4px auto 12px;
  }
  .m-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .m-sheet-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #fafaf7;
  }
  .m-sheet-x {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: 1px solid rgba(233, 213, 154, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(250, 250, 247, 0.7);
    font-size: 14px;
    cursor: pointer;
  }
  .m-sheet-sub {
    margin: 6px 0 14px;
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(250, 250, 247, 0.55);
  }

  .m-sheet-act {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    margin-top: 10px;
    border: 1px solid var(--line, rgba(233, 213, 154, 0.14));
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
    text-decoration: none;
    color: #fafaf7;
    transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 160ms;
  }
  .m-sheet-act:active { transform: scale(0.975); }
  .m-sheet-act strong {
    display: block;
    font-size: 15.5px;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .m-sheet-act span {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: rgba(250, 250, 247, 0.5);
    line-height: 1.4;
  }
  .m-sheet-ico {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 50%;
  }
  .m-sheet-ico svg { width: 22px; height: 22px; }
  .m-act-wa .m-sheet-ico { background: rgba(37, 211, 102, 0.14); color: #25D366; }
  .m-act-wa .m-sheet-ico svg { fill: #25D366; }
  .m-act-demo { border-color: rgba(233, 213, 154, 0.4); background: rgba(233, 213, 154, 0.06); }
  .m-act-demo .m-sheet-ico {
    background: linear-gradient(180deg, var(--gold-2, #e9d59a), var(--gold-4, #c7a563));
    color: #1a1407;
  }
  .m-act-tel .m-sheet-ico { background: rgba(233, 213, 154, 0.1); color: var(--gold-2, #e9d59a); }
  .m-sheet-arrow { color: rgba(233, 213, 154, 0.6); font-size: 16px; }

  .m-sheet-trust {
    margin: 16px 0 0;
    text-align: center;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(250, 250, 247, 0.35);
  }

  /* ========================================================
     3. ÍNDICE DE SECCIONES (.m-toc) — páginas de contenido
     ======================================================== */
  .m-toc {
    display: block;
    position: sticky;
    top: 67px; /* justo bajo el nav fijo de 68px */
    z-index: 90;
    background: linear-gradient(180deg, rgba(0, 4, 46, 0.94), rgba(0, 4, 46, 0.88));
    -webkit-backdrop-filter: blur(14px) saturate(130%);
            backdrop-filter: blur(14px) saturate(130%);
    border-bottom: 1px solid var(--line, rgba(233, 213, 154, 0.14));
  }
  .m-toc-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 10px var(--gutter, 20px);
  }
  .m-toc-track::-webkit-scrollbar { display: none; }
  .m-toc a {
    flex: 0 0 auto;
    font-family: "Geist Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.04em;
    color: rgba(250, 250, 247, 0.55);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--line, rgba(233, 213, 154, 0.16));
    border-radius: 999px;
    padding: 7px 13px;
    max-width: 62vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    transition: color 160ms, background 160ms, border-color 160ms;
  }
  .m-toc a:active { transform: scale(0.96); }
  .m-toc a.on {
    color: #1a1407;
    font-weight: 600;
    background: linear-gradient(180deg, var(--gold-2, #e9d59a), var(--gold-4, #c7a563));
    border-color: transparent;
  }
  .m-toc a.m-toc-demo {
    color: var(--gold-2, #e9d59a);
    border-color: rgba(233, 213, 154, 0.45);
    background: rgba(233, 213, 154, 0.07);
  }

  /* ========================================================
     4. TIPOGRAFÍA Y RITMO — menos scroll, más aire útil
     ======================================================== */
  .content-home h1 { font-size: clamp(36px, 10.5vw, 46px); }
  .content-home h2 { font-size: clamp(26px, 7.6vw, 34px); }
  .content-home h3 { font-size: 20px; }
  .content-home p.lead { font-size: 15.5px; }
  .content-home section { scroll-margin-top: 82px; }
  .section-head { margin-bottom: 30px; }

  .proof { padding: 36px 0; }
  .metrics, .network, .product, .solutions, .compare,
  .cases, .testimonials, .faq, .licencia, .diae { padding: 64px 0; }
  .final { padding: 72px 0; }

  /* Botones: zona táctil completa, apilados y con feedback */
  .btn { min-height: 48px; padding: 12px 20px; }
  .btn:active { transform: scale(0.97); }
  .hero-ctas, .cont-hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn, .cont-hero-ctas .btn,
  .cont-cta .btn, .lic-foot .btn { width: 100%; justify-content: center; }
  .case-card:active, .testi-card:active,
  .cont-rel-card:active, .solution-card:active { transform: scale(0.985); }

  /* "Leer más" del párrafo de entrada (el texto completo queda
     SIEMPRE en el DOM: el recorte es solo visual). */
  .m-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .m-clamp.is-open {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .m-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 0;
    background: none;
    border: 0;
    color: var(--gold-2, #e9d59a);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
  }

  /* ========================================================
     5. HERO (home) — primera pantalla vendedora
     ======================================================== */
  .hero { min-height: auto; padding: 94px 0 40px; }
  .hero-v-watermark { display: none; }
  .hero-grid { gap: 28px; }
  /* min-width:0 mata el "grid blowout": sin esto, el mantra nowrap infla
     el mínimo intrínseco del track y .hero-copy se clava en su max-width
     (640px), desbordando el viewport. */
  .hero-grid > * { min-width: 0; }

  /* CTA antes que la retórica: eyebrow → H1 → lead → CTAs */
  .hero-copy { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
  .hero-copy .eyebrow { order: 0; }
  .hero-copy h1 { order: 1; margin: 14px 0 12px; }
  .hero-copy .lead-answer { order: 2; }
  .hero-copy .m-more { order: 3; }
  .hero-copy .hero-ctas { order: 4; margin-top: 18px; }
  .hero-copy .hero-mantra { order: 5; }
  .hero-copy .hero-pill { order: 6; margin-top: 14px; }

  /* Mantra: de lista vertical a ticker horizontal deslizable */
  .hero-mantra {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    margin: 18px calc(-1 * var(--gutter, 20px)) 0;
    padding: 2px var(--gutter, 20px);
  }
  .hero-mantra::-webkit-scrollbar { display: none; }
  .hero-mantra li {
    flex: 0 0 auto;
    padding: 8px 14px 8px 28px;
    border: 1px solid var(--line, rgba(233, 213, 154, 0.14));
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    white-space: nowrap;
    font-size: 13px;
  }
  .hero-mantra li::before { left: 12px; top: 50%; transform: translateY(-50%); }

  /* Tarjetas del hero: estáticas y apiladas (sin superposición) */
  .hero-side {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
  }
  .hero-card { position: static; animation: none; }
  .hero-card-map { padding: 16px; }
  .hero-card-stat { padding: 14px 16px; }
  .hero-map { height: 150px; }
  .hc-foot { gap: 10px; padding-top: 12px; }
  .hc-foot strong { font-size: 19px; }

  /* ========================================================
     6. MÉTRICAS — cuadrícula 2×2 glanceable
     ======================================================== */
  .metric-card { min-height: 0; padding: 20px 16px; }
  .metric-num { font-size: 34px; }
  .metric-label { font-size: 12.5px; margin-top: 8px; }
  .metric-vmark { display: none; }

  /* ---------- Red multinivel: indentación proporcional ---------- */
  .net-node { padding: 14px 16px; }
  .net-node-1 { margin-left: 12px; }
  .net-node-2 { margin-left: 24px; }
  .net-node-3 { margin-left: 36px; }
  .net-node-4 { margin-left: 48px; }
  .net-node strong { font-size: 15.5px; }
  .net-node .ink-3 { font-size: 12.5px; }
  .net-viz { padding: 20px 16px; gap: 16px; }
  .net-stat strong { font-size: 22px; }

  /* ========================================================
     7. PRODUCTO — el rail de módulos se vuelve chips deslizables
     ======================================================== */
  .product-grid { display: block; }
  .product-rail {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    margin: 0 calc(-1 * var(--gutter, 20px)) 16px;
    padding: 2px var(--gutter, 20px) 6px;
  }
  .product-rail::-webkit-scrollbar { display: none; }
  .prod-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    flex: 0 0 auto;
    padding: 9px 15px;
    border-radius: 999px;
    border: 1px solid var(--line, rgba(233, 213, 154, 0.14));
    background: rgba(255, 255, 255, 0.02);
    white-space: nowrap;
  }
  .prod-tab:active { transform: scale(0.96); }
  .prod-tab .prod-tab-arrow { display: none; }
  .prod-tab-t { font-size: 13.5px; }
  .prod-tag { font-size: 10px; }
  .prod-tab.on {
    background: linear-gradient(180deg, rgba(233, 213, 154, 0.16), rgba(233, 213, 154, 0.05));
    border-color: rgba(233, 213, 154, 0.45);
  }
  .product-stage { padding: 20px 16px; min-height: 0; }
  .prod-stage-head h3 { font-size: 22px; }
  .prod-bullets { margin: 16px 0 20px; }
  .prod-bullets li { font-size: 12px; padding: 7px 12px; }

  /* ========================================================
     8. DÍA E — war room compacto
     ======================================================== */
  .diae-feed { height: 240px; }
  .feed-line { font-size: 12.5px; padding: 7px 12px; gap: 10px; }
  .diae-fact { grid-template-columns: 74px 1fr; padding: 14px; gap: 12px; }
  .diae-fact strong { font-size: 22px; }
  .diae-fact span { font-size: 13px; }
  .diae-cta-row .btn { flex: 1 1 auto; justify-content: center; }

  /* ========================================================
     9. CARRUSELES SNAP — tarjetas deslizables a lo ancho
        (casos, testimonios y relacionadas dejan de apilarse)
     ======================================================== */
  .cases-grid, .testi-grid, .cont-rel-grid {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter, 20px);
    scrollbar-width: none;
    gap: 12px;
    margin-left: calc(-1 * var(--gutter, 20px));
    margin-right: calc(-1 * var(--gutter, 20px));
    padding: 4px var(--gutter, 20px) 8px;
  }
  .cases-grid::-webkit-scrollbar,
  .testi-grid::-webkit-scrollbar,
  .cont-rel-grid::-webkit-scrollbar { display: none; }
  .cases-grid > *, .testi-grid > *, .cont-rel-grid > * {
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: start;
  }
  .testi-card { min-height: 0; padding: 20px; }
  .testi-q { font-size: 18px; }
  .case-card { padding: 20px; gap: 14px; }
  .case-lift strong { font-size: 38px; }
  .case-lift { padding: 14px 0; }

  /* Puntos de progreso del carrusel (los genera mobile-app.js) */
  .m-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
  }
  .m-dots i {
    width: 6px; height: 6px;
    border-radius: 999px;
    background: rgba(250, 250, 247, 0.18);
    transition: width 200ms cubic-bezier(0.2, 0.8, 0.2, 1), background 200ms;
  }
  .m-dots i.on {
    width: 18px;
    background: linear-gradient(90deg, var(--gold-2, #e9d59a), var(--gold-4, #c7a563));
  }

  /* ========================================================
     10. COMPARATIVA — de tabla 2 columnas a pares ×/✓ apilados
     ======================================================== */
  .compare-table {
    border: 0;
    border-radius: 0;
    overflow: visible;
    display: grid;
    gap: 10px;
  }
  .compare-cols { display: none; }
  .compare-row {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line, rgba(233, 213, 154, 0.14));
    border-radius: 14px;
    overflow: hidden;
  }
  .compare-cell {
    padding: 13px 14px;
    font-size: 13.5px;
    border-right: 0;
    border-bottom: 0;
  }
  .compare-cell-bad {
    background: rgba(240, 98, 98, 0.045);
    border-bottom: 1px solid var(--line, rgba(233, 213, 154, 0.12));
  }
  .compare-cell-good { background: rgba(233, 213, 154, 0.05); }

  /* ---------- Licencia ---------- */
  .lic-card { padding: 22px 18px; }
  .lic-grid { gap: 14px; }
  .lic-item strong { font-size: 26px; }
  .lic-item span { font-size: 12px; }
  .lic-foot { margin-top: 18px; padding-top: 18px; }
  .lic-inc { font-size: 9.5px; line-height: 1.7; }

  /* ---------- FAQ ---------- */
  .faq-q { padding: 16px 0; gap: 12px; }
  .faq-text { font-size: 15px; }
  .faq-num { font-size: 11px; }
  .faq-a { padding: 0 0 18px; font-size: 14.5px; }

  /* ---------- Cierre / formulario ---------- */
  .final-title { font-size: clamp(30px, 9vw, 40px); }
  .final-grid { gap: 32px; }
  .final-checklist li { font-size: 14px; }
  .final-stats { gap: 20px; margin-top: 24px; padding-top: 20px; }
  .final-stats strong { font-size: 28px; }
  .final-form-wrap { padding: 12px; }
  .iframe-frame { padding: 4px; }

  /* ---------- Footer ---------- */
  .footer-landing { padding: 44px 0 20px; }
  .footer-row { grid-template-columns: 1fr; gap: 18px; padding-bottom: 22px; }
  .footer-tag { font-size: 20px; }
  .footer-links { gap: 12px 18px; font-size: 11px; }
  .footer-links a { padding: 4px 0; }
  .footer-bot { flex-direction: column; gap: 6px; padding-top: 16px; }

  /* ========================================================
     11. PÁGINAS DE CONTENIDO — documento legible con pulgar
     ======================================================== */
  .content-page .cont-hero { padding-top: 88px; }
  .content-page .cont-hero h1 { font-size: clamp(28px, 8.6vw, 36px); max-width: none; }
  .cont-sec { scroll-margin-top: 122px; margin-bottom: 48px; }
  .cont-cta { scroll-margin-top: 122px; padding: 26px 18px; }
  .cont-body { padding-top: 40px; }

  /* Migas: una sola línea deslizable, nunca envuelven */
  .cont-trail {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    margin: 0 calc(-1 * var(--gutter, 20px)) 18px;
    padding: 0 var(--gutter, 20px);
    font-size: 10px;
  }
  .cont-trail::-webkit-scrollbar { display: none; }

  .cont-lista li { padding: 14px; gap: 4px; }
  .cont-lista strong { font-size: 15px; }
  .cont-lista span { font-size: 14px; }
  .cont-pasos li { grid-template-columns: 34px 1fr; padding: 16px 4px; gap: 12px; }
  .cont-pasos strong { font-size: 15.5px; }
  .cont-pasos span { font-size: 14px; }
  .cont-datos { padding: 18px; gap: 14px; border-radius: 18px; }
  .cont-dato strong { font-size: 24px; }
  .cont-dato span { font-size: 12px; }
  .cont-rel-card { padding: 18px; }
  .cont-rel-card strong { font-size: 17px; }

  /* ========================================================
     12. CALENDARIO ELECTORAL — tablas → tarjetas
         (una tabla con scroll horizontal no es una app)
     ======================================================== */
  .cal-wrap {
    overflow: visible;
    border: 0;
    border-radius: 0;
    margin-top: 18px;
  }
  .cal-table { min-width: 0; display: block; font-size: 14px; }
  .cal-table thead { display: none; }
  .cal-table tbody { display: grid; gap: 10px; }
  .cal-table tr {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 14px 12px;
    border: 1px solid var(--line, rgba(233, 213, 154, 0.14));
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.02);
  }
  .cal-table td { display: block; padding: 0; border: 0; }
  .cal-table tbody tr:hover td { background: transparent; }
  .cal-table tbody tr:last-child td { border: 0; }
  /* El chip de estado va anclado a la esquina superior derecha */
  .cal-table td:last-child { position: absolute; top: 12px; right: 12px; }
  .cal-pais { order: -2; font-size: 12.5px; padding-right: 104px; }
  .cal-fecha { order: -1; font-size: 12px; padding-right: 104px; }
  .cal-titulo strong { font-size: 15.5px; line-height: 1.3; }
  .cal-nota { font-size: 12px; }
  .cal-cargos { font-size: 12.5px; color: var(--ink-3, rgba(250, 250, 247, 0.48)); }
  .cal-anio { margin-top: 30px; font-size: 19px; }
  .cal-fuente { font-size: 12px; }

  /* ========================================================
     13. PÁGINAS LEGALES — documento compacto bajo el dock
         (body > .legal-top + main + footer)
     ======================================================== */
  .legal-top { padding: 16px 0; }
  .legal-top + main { padding: 28px 0 44px; }
  .legal-top + main h1 { font-size: 25px; }
}

/* ----------------------------------------------------------
   Teléfonos pequeños
   ---------------------------------------------------------- */
@media (max-width: 380px) {
  .content-home h1 { font-size: 32px; }
  .m-dock-item { font-size: 9px; }
  .m-dock-fab { width: 48px; height: 48px; margin-top: -22px; }
  .cases-grid > *, .testi-grid > *, .cont-rel-grid > * { flex-basis: 88%; max-width: 88%; }
  .metric-num { font-size: 28px; }
}

/* ----------------------------------------------------------
   Movimiento reducido: la capa app respeta la preferencia
   (el CSS del landing ya cubre .content-home; esto cubre el
   dock, el sheet y las páginas legales).
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .m-dock, .m-dock *, .m-sheet, .m-sheet *, .m-toc a, .m-dots i {
    animation: none !important;
    transition: none !important;
  }
}