:root{
    /* ============================================================
       DESIGN SYSTEM — GABRIEL GARMENDIA · Landing BAN.sport
       Tema derivado del Design System Base v1 de Crecelatam.
       Tokens sustituidos según Dirección Visual — Landing BAN.sport
       (Notion, alumno Gabriel Garmendia). Fuente de la paleta:
       imagen de referencia DHAD (packaging navy/beige/dorado).

       V2 de paleta (corrección de Markus, 29 jul): el dorado deja de
       ser el color de acción exclusivo y pasa a ser color de MARCA
       activo (--acento) — aparece en toda la interfaz: enlaces,
       viñetas, badges, checks, citas. El color de acción exclusivo
       de CTA y formularios (--lavanda, nombre histórico del token)
       pasa a ser un verde Caribe fuerte, deliberadamente contrario
       a la paleta cálida navy/beige/dorado.
    ============================================================ */

    /* ---- Base (fondo y surface) ---- */
    --fondo:       #E8DCC8;   /* warm beige — Dirección Visual */
    --superficie:  #FFFFFF;

    /* ---- Tipografía: negros y grises (tinte navy cálido, coherente con --marca) ---- */
    --negro:    #1B1F2E;      /* títulos y texto principal */
    --gris-800: #3D4152;
    --gris-600: #6B6F80;      /* texto secundario */
    --gris-400: #9C9FAE;
    --gris-200: #DAD9D2;
    --blanco:   #FFFFFF;      /* texto sobre fondos oscuros */

    /* ---- Marca (único color de marca) ---- */
    --marca:    #1F2A44;      /* Navy — Dirección Visual */

    /* ---- Acento (segundo color de marca — dorado activo, NO reservado a CTA) ---- */
    --acento:   #C6A75E;      /* Soft Gold — enlaces, viñetas, badges, checks, citas */
    --linea:    #D9CBB0;      /* línea fina cálida */
    --marcador: #F1E9D8;      /* highlight cálido */
    --card:     #141C30;      /* navy oscuro — tarjetas oscuras (testimonio video) */

    /* ---- Derivados de trabajo (estructurales, no se cambian por cliente) ---- */
    --sombra:    0 14px 34px -18px rgba(0,0,0,.22);
    --sombra-lg: 0 26px 60px -24px rgba(0,0,0,.30);
    --r-card:    16px;
    --r-media:   14px;
    --sobre-oscuro:   rgba(250,246,238,.88);   /* texto sobre bandas oscuras */
    --sobre-oscuro-2: rgba(250,246,238,.62);   /* texto secundario sobre oscuro */

    /* ---- Gradientes de ícono/tarjeta (160deg diagonal) ---- */
    --grad-claro:  linear-gradient(160deg, #FFFFFF, #EFE6D3);
    --grad-oscuro: linear-gradient(160deg, #1F2A44, #10182B);
    --grad-medio:  linear-gradient(160deg, #9C9FAE, #FFFFFF);

    /* ---- Lavanda — SOLO CTA y formularios (token histórico "lavanda" = verde Caribe) ---- */
    --lavanda:       #0E9C82;   /* Verde Caribe fuerte — deliberadamente contrario al dorado/navy */
    --lavanda-hover: #0B7A66;
    --lavanda-suave: #DFF4EE;   /* focus ring de formularios */
    --grad-lavanda:  linear-gradient(135deg, #14B396, #0B7A66);

    /* ---- Tipografía — Lora (títulos) + Merriweather (cuerpo), serif+serif ---- */
    --fuente-titulo: 'Lora', serif;
    --fuente-cuerpo: 'Merriweather', serif;
    --fuente-mono:   'IBM Plex Mono', ui-monospace, "SF Mono", Consolas, monospace;
    --tamano-cuerpo: 20px;
    --interlineado:  1.55;
    --separacion-parrafo: 1.4em;

    /* ---- Layout — estructura compartida, no se cambia por cliente ---- */
    --medida:        680px;
    --medida-ancha:  880px;
    --sangria:       28px;

    /* ---- Motion ---- */
    --reveal-distance: 16px;
    --reveal-duration: 600ms;
  }

  *{ box-sizing: border-box; }

  /* ===================== CHROME EXTERIOR (no forma parte del sistema) ===================== */
  html,body{ margin:0; }
  body.shell{
    background:#EDEDEB; color:var(--negro);
    font-family: var(--fuente-cuerpo);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  }
  .topbar{
    position: sticky; top:0; z-index: 50;
    background: rgba(247,247,246,.85); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linea);
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    padding: 12px 22px;
  }
  .topbar .brand{ font-family:var(--fuente-titulo); font-weight:800; letter-spacing:-.02em; font-size:1.05rem; color:var(--marca); flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  @media (max-width:1439px){ .topbar .brand span{ display:none; } }
  .topbar .brand span{ color:var(--gris-400); font-weight:500; }
  .tabs{ display:flex; gap:6px; margin-left:auto; background:#E4E4E1; padding:4px; border-radius:999px; }
  .tab{
    font-family:var(--fuente-titulo); font-weight:600; font-size:.9rem;
    border:none; background:transparent; color:var(--gris-600);
    padding:8px 20px; border-radius:999px; cursor:pointer; transition:all .18s ease;
  }
  .tab.active{ background:var(--superficie); color:var(--marca); box-shadow:0 2px 8px -3px rgba(0,0,0,.2); }
  .stage{ padding: 30px 20px 80px; }
  .view{ display:none; }
  .view.active{ display:block; }

  @media (max-width:900px){
    .topbar{ padding:12px 16px; }
    .tabs{ margin-left:0; width:100%; overflow-x:auto; justify-content:flex-start; }
    .tab{ padding:8px 14px; font-size:.84rem; white-space:nowrap; }
  }

  /* Conmutador escritorio / móvil */
  .swd{ display:flex; gap:4px; background:#E4E4E1; padding:3px; border-radius:999px; }
  .sw{
    font-family:var(--fuente-titulo); font-weight:600; font-size:.8rem;
    border:none; background:transparent; color:var(--gris-600);
    padding:6px 14px; border-radius:999px; cursor:pointer; transition:all .18s ease; white-space:nowrap;
  }
  .sw.active{ background:var(--superficie); color:var(--marca); box-shadow:0 2px 8px -3px rgba(0,0,0,.2); }

  /* Contador del carrito */
  .carrito-chip{
    display:inline-flex; align-items:center; gap:7px;
    font-family:var(--fuente-mono); font-size:.82rem; color:var(--marca);
    background:var(--superficie); border:1px solid var(--linea);
    padding:7px 13px; border-radius:999px; white-space:nowrap;
  }
  .carrito-chip svg{ width:16px; height:16px; stroke:currentColor; stroke-width:1.7; fill:none; stroke-linecap:round; stroke-linejoin:round; }

  /* Desktop: la "página" del sistema, centrada */
  .view.catalogo .host .mount,
  #view-glosario .mount{
    max-width: 960px; margin:0 auto;
    background: var(--fondo);
    border:1px solid var(--linea); border-radius:16px; overflow:hidden;
    box-shadow: 0 30px 60px -40px rgba(0,0,0,.4);
    container-type: inline-size; container-name: ds;
  }
  .view.catalogo .host .mount{ min-width:0; }
  /* Dentro del marco de teléfono el mount pierde su marco propio */
  .mount.en-device{
    max-width:none; margin:0; border:0; border-radius:0; box-shadow:none;
    container-type:normal; container-name:none;
  }
  .catalog.oculto{ display:none; }

  /* Índice lateral (solo los catálogos) */
  .view.catalogo .catalog{ position:relative; }
  .toc{ position:fixed; left:24px; top:calc(var(--topbar-h, 60px) + 22px); width:208px; max-height:calc(100vh - var(--topbar-h, 60px) - 50px); overflow-y:auto; padding:2px 8px 20px 0; transition:transform .25s ease, opacity .2s ease; z-index:30; }
  .toc.collapsed{ transform:translateX(-280px); opacity:0; pointer-events:none; }
  .toc .toc-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 12px; }
  .toc .toc-top .toc-h{ margin:0; }
  .toc-x, .toc-open{ font-family:var(--fuente-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gris-600); background:var(--superficie); border:1px solid var(--linea); border-radius:8px; padding:4px 8px; cursor:pointer; transition:color .15s,border-color .15s; }
  .toc-x:hover, .toc-open:hover{ color:var(--marca); border-color:var(--acento); }
  .toc-open{ position:fixed; left:24px; top:calc(var(--topbar-h, 60px) + 22px); z-index:30; display:none; }
  .toc-open.show{ display:inline-block; }
  .toc .toc-h{ font-family:var(--fuente-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#8A8A8A; margin:0 0 12px; }
  .toc a{ display:block; text-decoration:none; font-family:var(--fuente-titulo); border-left:2px solid var(--linea); transition:color .15s, border-color .15s; }
  .toc a.sec{ font-weight:600; font-size:.85rem; color:#333; padding:5px 0 5px 12px; margin-top:4px; }
  .toc a.item{ font-weight:400; font-size:.79rem; color:#5C5C5C; padding:3px 0 3px 22px; }
  .toc a .tn{ font-family:var(--fuente-mono); color:var(--acento); font-weight:500; font-size:.85em; margin-right:7px; }
  .toc a:hover{ color:var(--marca); border-color:var(--acento); }
  .toc a.active{ color:var(--marca); border-color:var(--marca); }
  .toc a.sec .tk{ display:none; }
  .toc a.sec.en-carrito .tk{ display:inline; }
  .toc a.sec.en-carrito .tk::before{ content:"·"; color:var(--gris-400); margin:0 5px; }
  .toc a.sec.en-carrito .tk::after{ content:"✓"; color:var(--acento); font-weight:700; }
  @media (max-width:900px){ .view.catalogo .catalog{ display:block; } .toc{ display:none; } }

  /* Mobile: marco de dispositivo */
  .device{
    display:none;
    width: 402px; max-width: 100%; margin: 0 auto;
    background:#111; border-radius: 46px; padding: 12px;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.55);
  }
  .device.on{ display:block; }
  .device .screen{
    background: var(--fondo); border-radius: 34px; overflow:hidden; position:relative;
    container-type: inline-size; container-name: ds;
  }
  .device .notch{
    position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:150px; height:26px; background:#111; border-radius:0 0 18px 18px; z-index:20;
  }


  /* ===================== CONTROLES DE CADA BLOQUE (chrome, no forma parte del sistema) ===================== */
  .ds .bloque-cab{
    display:flex; align-items:flex-start; justify-content:space-between;
    flex-wrap:wrap; gap:10px 18px; margin-bottom:16px;
  }
  .ds .bloque-cab h1.seccion-h{ margin:0; flex:1 1 260px; min-width:0; }
  .ds .bloque-acciones{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:6px; }

  .ds .btn-copiar, .ds .btn-carrito{
    font-family:var(--fuente-titulo); font-weight:600; font-size:.76rem; line-height:1;
    border:1px solid var(--linea); background:var(--superficie); color:var(--gris-600);
    padding:8px 13px; border-radius:999px; cursor:pointer; white-space:nowrap;
    transition:color .15s, border-color .15s, background .15s;
  }
  .ds .btn-copiar:hover, .ds .btn-carrito:hover{ color:var(--marca); border-color:var(--acento); }
  .ds .btn-copiar.ok{ color:var(--marca); border-color:var(--marca); }
  .ds .btn-carrito.dentro{ background:var(--marca); border-color:var(--marca); color:#fff; }
  .ds .btn-carrito.dentro:hover{ color:#fff; opacity:.88; }

  /* Copiar de un subcomponente: vive dentro del propio h2 */
  .ds .comp .btn-copiar.sub{
    margin-left:auto; font-size:.7rem; padding:6px 11px;
    opacity:0; transition:opacity .15s, color .15s, border-color .15s;
  }
  .ds .comp:hover .btn-copiar.sub,
  .ds .comp .btn-copiar.sub:focus{ opacity:1; }
  @media (hover:none){ .ds .comp .btn-copiar.sub{ opacity:1; } }

  /* Pie del catálogo */
  .ds footer.pie-ds p{ font-family:var(--fuente-mono); font-size:.82rem; }