/* ===================== SISTEMA (aplica dentro de .mount / .screen) ===================== */
  .ds{
    background: var(--fondo); color: var(--gris-600);
    font-family: var(--fuente-cuerpo); font-size: var(--tamano-cuerpo); line-height: var(--interlineado);
  }
  .ds .wrap{ max-width: 860px; margin: 0 auto; padding: 0 28px; }
  .ds .medida{ max-width: var(--medida); }

  /* --- Sistema breakout (680 / 880 / full) --- */
  .ds .articulo{
    display:grid;
    grid-template-columns:
      [completo-inicio] minmax(var(--sangria),1fr)
      [cards-inicio]    minmax(0,100px)
      [texto-inicio]    min(var(--medida),100%)
      [texto-fin]       minmax(0,100px)
      [cards-fin]       minmax(var(--sangria),1fr)
      [completo-fin];
    row-gap: 1.4em;
  }
  .ds .articulo > *{ grid-column: texto-inicio / texto-fin; }
  .ds .articulo > .col-ancho{ grid-column: texto-inicio / texto-fin; }  /* 680px, igual que texto */
  .ds .articulo > .col-cards{ grid-column: cards-inicio / cards-fin; }   /* 880px, imágenes y tarjetas */
  .ds .articulo > .col-completo{ grid-column: completo-inicio / completo-fin; }

  .ds .video-wrap{ position:relative; padding-top:56.25%; background:#E9E9E6; border-radius:12px; overflow:hidden; }
  .ds .video-wrap iframe, .ds .video-wrap video{ position:absolute; inset:0; width:100%; height:100%; border:0; }
  .ds .img-breakout{ width:100%; height:auto; display:block; border-radius:12px; border:1px solid var(--linea); }
  .ds .caption{ font-family:var(--fuente-mono); font-size:.78rem; color:var(--gris-600); text-align:center; margin-top:10px; }

  .ds .texto-ui{ font-family:var(--fuente-cuerpo); font-size:var(--tamano-cuerpo); line-height:var(--interlineado); color:var(--gris-600); }
  .ds .texto-meta{ font-family:var(--fuente-mono); font-size:.875rem; color:var(--gris-600); letter-spacing:.02em; }

  /* --- Portada --- */
  .ds .cover{ padding:80px 0 40px; border-bottom:1px solid var(--linea); }
  .ds .gradbar{ height:8px; width:120px; border-radius:999px; background:linear-gradient(90deg,var(--marca),var(--acento),var(--linea)); margin-bottom:26px; }
  .ds .eyebrow{ font-family:var(--fuente-mono); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--acento); margin:0 0 16px; }
  .ds .cover h1{ font-family:var(--fuente-titulo); font-weight:800; font-size:clamp(2.8rem,7vw,4rem); line-height:1.02; letter-spacing:-.03em; margin:0 0 .35em; color:var(--marca); }
  .ds .cover p{ font-size:1.3rem; line-height:1.55; color:var(--negro); max-width:560px; margin:0; }

  /* --- Secciones --- */
  .ds section.bloque{ padding:64px 0; border-bottom:1px solid var(--linea); scroll-margin-top:calc(var(--topbar-h, 60px) + 20px); }
  .ds .seccion-titulo{ font-family:var(--fuente-mono); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gris-600); margin:0 0 28px; }
  .ds .seccion-titulo b{ color:var(--acento); font-weight:500; }
  /* Título de sección (H1 por bloque) — nueva jerarquía V2 */
  .ds h1.seccion-h{ font-family:var(--fuente-titulo); font-weight:800; font-size:clamp(2rem,5vw,2.7rem); letter-spacing:-.025em; line-height:1.08; margin:0 0 16px; color:var(--marca); }
  .ds h1.seccion-h .sn{ color:var(--acento); font-weight:800; }
  /* Subcomponente numerado (5.1, 5.2, …) */
  .ds .comp{ font-family:var(--fuente-titulo); font-weight:700; font-size:1.75rem; line-height:1.2; color:var(--marca); margin:40px 0 12px; display:flex; align-items:baseline; gap:10px; scroll-margin-top:calc(var(--topbar-h, 60px) + 24px); }
  .ds .comp .n{ font-family:var(--fuente-mono); font-size:.8rem; color:var(--acento); font-weight:500; }
  .ds [data-toc-item]{ scroll-margin-top:calc(var(--topbar-h, 60px) + 24px); }
  .ds h2.h{ font-family:var(--fuente-titulo); font-weight:700; font-size:1.9rem; letter-spacing:-.02em; line-height:1.15; margin:0 0 8px; color:var(--marca); }
  .ds .nota{ color:var(--gris-600); font-size:1.05rem; line-height:1.6; margin:0 0 28px; max-width:640px; }
  .ds .mini{ font-family:var(--fuente-mono); font-size:.78rem; color:var(--gris-600); letter-spacing:.04em; text-transform:uppercase; margin:0 0 12px; }
  .ds code.tok{ font-family:var(--fuente-mono); font-size:.85em; background:#EDEDEA; padding:1px 6px; border-radius:5px; }

  /* --- Color --- */
  .ds .muestras{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; }
  .ds .muestra{ border:1px solid var(--linea); border-radius:8px; overflow:hidden; background:var(--superficie); }
  .ds .muestra .chip{ height:70px; }
  .ds .muestra .info{ padding:10px 12px; font-family:var(--fuente-mono); font-size:.76rem; }
  .ds .muestra .info .nombre{ display:block; color:var(--negro); margin-bottom:3px; }
  .ds .muestra .info .hex{ color:var(--gris-600); text-transform:uppercase; }
  /* --- Glosario --- */
  .ds .gl{ display:grid; grid-template-columns:1fr; gap:0; margin:0 0 6px; }
  .ds .gl > div{ display:grid; grid-template-columns:210px 1fr; gap:18px; padding:13px 0; border-bottom:1px solid var(--linea); align-items:baseline; }
  .ds .gl dt{ font-family:var(--fuente-titulo); font-weight:700; font-size:.95rem; color:var(--marca); margin:0; letter-spacing:-.01em; }
  .ds .gl dd{ font-family:var(--fuente-cuerpo); font-size:.95rem; line-height:1.55; color:var(--gris-600); margin:0; }
  .ds .gl dd code{ font-family:var(--fuente-mono); font-size:.85em; background:#EDEDEA; padding:1px 5px; border-radius:5px; color:var(--gris-800); }
  @media (max-width:620px){ .ds .gl > div{ grid-template-columns:1fr; gap:4px; } }
  .ds .cta-aviso{ margin-top:22px; display:flex; gap:14px; align-items:center; background:var(--lavanda-suave); border:1px solid #C9CAF0; border-radius:10px; padding:14px 18px; }
  .ds .cta-aviso .punto{ width:26px; height:26px; border-radius:999px; background:var(--lavanda); flex:0 0 auto; }
  .ds .cta-aviso p{ margin:0; font-size:.98rem; color:var(--marca); }

  /* --- Escala tipográfica --- */
  .ds .fila-tipo{ display:grid; gap:6px; padding:22px 0; border-top:1px solid var(--linea); }
  .ds .fila-tipo:first-child{ border-top:none; }
  .ds .spec-tipo{ font-family:var(--fuente-mono); font-size:.76rem; color:var(--gris-600); }
  .ds .spec-tipo b{ color:var(--acento); font-weight:500; }
  .ds .demo-h1{ font-family:var(--fuente-titulo); font-weight:800; font-size:clamp(2.6rem,6vw,3.4rem); line-height:1.08; letter-spacing:-.03em; color:var(--marca); }
  .ds .demo-h2{ font-family:var(--fuente-titulo); font-weight:700; font-size:1.75rem; line-height:1.2; letter-spacing:-.02em; color:var(--marca); }
  .ds .demo-h3{ font-family:var(--fuente-titulo); font-weight:600; font-size:1.3rem; line-height:1.3; letter-spacing:-.01em; color:var(--marca); }
  .ds .demo-stand{ font-family:var(--fuente-cuerpo); font-size:1.3rem; line-height:1.55; color:var(--negro); }
  .ds .demo-body{ font-family:var(--fuente-cuerpo); font-size:20px; line-height:1.55; color:var(--gris-600); }
  .ds .demo-small{ font-family:var(--fuente-mono); font-size:.875rem; color:var(--gris-600); }

  /* --- Código / tokens --- */
  .ds pre{ background:#23352F; color:#E7EEEA; border-radius:10px; padding:22px 24px; overflow-x:auto; font-family:var(--fuente-mono); font-size:.82rem; line-height:1.65; margin:0; }
  .ds pre .c{ color:#89A197; } .ds pre .k{ color:#C9CFDF; }

  /* --- Elementos de texto --- */
  .ds a.enlace{ color:var(--negro); text-decoration:underline; text-decoration-color:var(--acento); text-decoration-thickness:2px; text-underline-offset:3px; border-radius:2px; transition:background .18s ease; }
  .ds a.enlace:hover{ background:#ECECE8; }
  .ds mark.hl{ background:var(--marcador); color:var(--negro); padding:.05em .25em; border-radius:4px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
  .ds blockquote{ margin:1.4em 0; padding:4px 0 4px 24px; border-left:3px solid var(--acento); font-family:var(--fuente-cuerpo); }
  .ds blockquote p{ margin:0; }
  .ds ul.styled{ padding-left:1.2em; margin:0 0 var(--separacion-parrafo); }
  .ds ul.styled li{ margin-bottom:.5em; }
  .ds ul.styled li::marker{ color:var(--acento); }
  .ds sup.fn{ font-family:var(--fuente-titulo); font-size:.7em; line-height:0; }
  .ds sup.fn a{ color:var(--acento); text-decoration:none; font-weight:600; }
  .ds .notas-pie{ border-top:1px solid var(--linea); margin-top:20px; padding-top:14px; }
  .ds .notas-pie li{ font-family:var(--fuente-mono); font-size:.82rem; color:var(--gris-600); line-height:1.55; margin-bottom:6px; }

  /* --- Stat inline --- */
  .ds .stats{ display:flex; flex-wrap:wrap; gap:40px; }
  .ds .stat .num{ font-family:var(--fuente-titulo); font-weight:800; font-size:2.8rem; line-height:1; letter-spacing:-.03em; color:var(--marca); }
  .ds .stat .num.ac{ color:var(--acento); }
  .ds .stat .etq{ font-family:var(--fuente-mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gris-600); margin-top:8px; }

  /* --- Pills (neutras) --- */
  .ds .pill{ display:inline-flex; align-items:center; font-family:var(--fuente-titulo); border-radius:999px; }
  .ds .pill.compacta{ font-weight:600; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; padding:5px 12px; }
  .ds .pill.larga{ font-weight:500; font-size:.95rem; padding:9px 18px; gap:8px; }
  .ds .pill.larga .punto{ width:7px; height:7px; border-radius:999px; background:currentColor; opacity:.8; }
  .ds .pill.claro{ background:#EDEDEA; color:var(--marca); }
  .ds .pill.medio{ background:#DDE2E8; color:var(--marca); }
  .ds .pill.oscuro{ background:var(--marca); color:#fff; }
  .ds .pill.contorno{ background:transparent; border:1px solid var(--gris-200); color:var(--gris-600); }
  .ds .fila{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

  /* --- Callouts --- */
  .ds .callout{ border-radius:12px; padding:18px 20px; display:flex; gap:14px; margin-bottom:16px; }
  .ds .callout .ic{ font-size:1.1rem; line-height:1.7; flex:0 0 auto; }
  .ds .callout .ct .t{ font-family:var(--fuente-titulo); font-weight:600; font-size:1rem; margin-bottom:2px; color:var(--marca); }
  .ds .callout .ct p{ margin:0; font-size:.98rem; line-height:1.6; }
  .ds .callout.blanco{ background:#fff; border:1px solid var(--linea); border-left:4px solid var(--marca); }
  .ds .callout.blanco p{ color:var(--negro); }
  .ds .callout.gris{ background:#EFEFEC; border-left:4px solid var(--acento); }
  .ds .callout.gris p{ color:var(--negro); }
  .ds .callout.oscuro{ background:var(--marca); border-left:4px solid #fff; }
  .ds .callout.oscuro .t{ color:#fff; }
  .ds .callout.oscuro p{ color:#CBD3E0; }
  .ds .callout.oscuro .ic{ color:#fff; }
  .ds .callout.gris800{ background:var(--gris-800); border-left:4px solid #fff; }
  .ds .callout.gris800 .t{ color:#fff; }
  .ds .callout.gris800 p{ color:#D4D4D4; }
  .ds .callout.gris800 .ic{ color:#fff; }

  /* --- Tarjetas --- */
  .ds .seccion-sangria{ width:100%; }
  .ds .cards{ max-width:var(--medida-ancha); margin:0 auto; padding:0 28px; display:grid; gap:20px; }
  .ds .cards.cols-1{ grid-template-columns:1fr; max-width:var(--medida); }
  .ds .cards.cols-2{ grid-template-columns:repeat(2,1fr); }
  .ds .cards.cols-3{ grid-template-columns:repeat(3,1fr); }
  .ds .card{ background:var(--superficie); border:1px solid var(--linea); border-radius:16px; padding:26px; transition:transform .2s ease, box-shadow .2s ease; }
  .ds .card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px -18px rgba(0,0,0,.22); }
  .ds .beneficio .icono{ width:48px; height:48px; border-radius:12px; display:grid; place-items:center; font-size:1.3rem; margin-bottom:16px; background:var(--grad-claro); border:1px solid var(--linea); color:var(--marca); }
  .ds .beneficio:nth-child(2) .icono{ background:var(--grad-oscuro); border-color:transparent; color:#fff; }
  .ds .beneficio:nth-child(3) .icono{ background:var(--grad-medio); }
  .ds .card .ctitle{ font-family:var(--fuente-titulo); font-weight:700; font-size:1.2rem; letter-spacing:-.01em; margin:0 0 8px; color:var(--marca); }
  .ds .card .cbody{ font-family:var(--fuente-cuerpo); font-size:.98rem; line-height:1.6; color:var(--gris-600); margin:0; }
  .ds .feature .ftag{ display:inline-block; font-family:var(--fuente-titulo); font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--acento); margin-bottom:12px; }
  .ds .feature .flink{ display:inline-block; margin-top:14px; font-family:var(--fuente-titulo); font-weight:600; font-size:.92rem; color:var(--negro); text-decoration:underline; text-decoration-color:var(--acento); text-underline-offset:3px; }

  /* --- Testimonial (estilo Google, se mantiene) --- */
  .ds .resena{ background:var(--superficie); border:1px solid var(--linea); border-radius:16px; padding:24px; max-width:460px; }
  .ds .resena .top{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
  .ds .resena .avatar{ width:44px; height:44px; border-radius:999px; display:grid; place-items:center; font-family:var(--fuente-titulo); font-weight:700; color:#fff; background:var(--grad-oscuro); }
  .ds .resena .quien .nombre-r{ font-family:var(--fuente-titulo); font-weight:600; font-size:1rem; color:var(--marca); }
  .ds .resena .quien .fecha{ font-family:var(--fuente-mono); font-size:.78rem; color:var(--gris-600); }
  .ds .resena .gmarca{ margin-left:auto; font-family:var(--fuente-titulo); font-weight:700; font-size:.95rem; letter-spacing:-.01em; }
  .ds .resena .gmarca b{ color:#4285F4; } .ds .resena .gmarca .g2{ color:#EA4335; } .ds .resena .gmarca .g3{ color:#FBBC05; } .ds .resena .gmarca .g4{ color:#34A853; }
  .ds .estrellas{ color:#FBBC04; letter-spacing:2px; font-size:1.05rem; margin-bottom:10px; }
  .ds .resena .texto{ font-family:var(--fuente-cuerpo); font-size:.98rem; line-height:1.6; margin:0; color:var(--negro); }
  /* Muro de reseñas: cascada / masonry cuando hay 2+ reseñas */
  .ds .muro-resenas{ column-count:3; column-gap:22px; }
  .ds .muro-resenas .resena{ max-width:none; width:100%; margin:0 0 22px; display:inline-block; break-inside:avoid; -webkit-column-break-inside:avoid; }
  @media (max-width:980px){ .ds .muro-resenas{ column-count:2; } }
  @media (max-width:600px){ .ds .muro-resenas{ column-count:1; } }

  /* --- CTA + formularios (LAVANDA) --- */
  .ds .btn-cta{ display:inline-flex; align-items:center; gap:8px; font-family:var(--fuente-titulo); font-weight:600; font-size:1rem; color:var(--marca); background:var(--lavanda); border:none; border-radius:999px; padding:13px 26px; cursor:pointer; text-decoration:none; box-shadow:0 10px 24px -12px rgba(108,92,231,.5); transition:background .18s ease, transform .18s ease; }
  .ds .btn-cta:hover{ background:var(--lavanda-hover); transform:translateY(-2px); }
  .ds .btn-cta.lg{ font-size:1.1rem; padding:16px 34px; }
  .ds .btn-cta.grad{ background:var(--grad-lavanda); }
  .ds .btn-cta.fantasma{ background:transparent; color:var(--marca); border:2px solid var(--lavanda); box-shadow:none; }
  .ds .btn-cta.fantasma:hover{ background:var(--lavanda-suave); }
  .ds .formdemo{ display:flex; gap:10px; flex-wrap:wrap; max-width:520px; margin-top:20px; }
  .ds .formdemo input{ flex:1 1 220px; font-family:var(--fuente-cuerpo); font-size:1rem; padding:13px 16px; border:1px solid var(--linea); border-radius:999px; background:var(--superficie); color:var(--negro); }
  .ds .formdemo input:focus{ outline:3px solid var(--lavanda-suave); border-color:var(--lavanda); }

  /* --- Fondos de sección full-bleed (relativos al contenedor con cqw) --- */
  .ds .fullbleed{ width:100cqw; margin-left:calc(50% - 50cqw); }
  .ds .banda{ padding:54px 28px; }
  .ds .banda .interior{ max-width:680px; margin:0 auto; }
  .ds .banda .etiqueta{ font-family:var(--fuente-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; margin:0 0 8px; }
  .ds .banda .texto{ font-family:var(--fuente-titulo); font-weight:700; font-size:1.5rem; letter-spacing:-.02em; margin:0; }
  .ds .banda.claro{ background:var(--fondo); }
  .ds .banda.oscuro{ background:var(--marca); }
  .ds .banda.claro .etiqueta{ color:var(--gris-600); } .ds .banda.claro .texto{ color:var(--marca); }
  .ds .banda.oscuro .etiqueta{ color:#C7CCCA; } .ds .banda.oscuro .texto{ color:#fff; }
  /* Etiqueta-chip legible sobre cualquier punto del gradiente (demos) */
  .ds .banda.demo{ text-align:center; padding:42px 28px; }
  .ds .chip-label{ display:inline-block; background:rgba(255,255,255,.9); color:var(--marca); font-family:var(--fuente-mono); font-size:.74rem; letter-spacing:.03em; padding:8px 16px; border-radius:999px; border:1px solid rgba(0,0,0,.06); box-shadow:0 2px 8px -4px rgba(0,0,0,.3); }

  /* --- Motion --- */
  .ds .reveal{ opacity:0; transform:translateY(var(--reveal-distance)); transition:opacity var(--reveal-duration) ease-out, transform var(--reveal-duration) ease-out; }
  .ds .reveal.visible{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){ .ds .reveal{ opacity:1; transform:none; transition:none; } }
  .ds .util-pill{ font-family:var(--fuente-titulo); font-weight:600; font-size:.88rem; color:var(--marca); background:#EDEDEA; border:none; border-radius:999px; padding:9px 18px; cursor:pointer; margin-top:18px; }

  .ds footer{ padding:56px 0 70px; }
  .ds footer p{ color:var(--gris-600); font-size:1.02rem; }

  /* ===================== COMPONENTES V2 ===================== */

  /* --- Píldoras de contorno punteado suave (SVG). Sin punto interno; fluyen tipo collage. --- */
  .ds .pills-wrap{ display:flex; flex-wrap:wrap; gap:10px; }
  .ds .pill-dash{ display:inline-flex; align-items:center; gap:8px; font-family:var(--fuente-titulo); font-weight:500; font-size:.82rem; letter-spacing:.01em; padding:7px 14px; border-radius:11px; background-color:var(--superficie); background-repeat:no-repeat; color:var(--gris-600); }
  .ds .pill-dash .ico{ display:grid; place-items:center; width:15px; height:15px; flex:0 0 auto; }
  .ds .pill-dash .ico svg{ width:14px; height:14px; }
  .ds .pill-dash.neutro{ color:#9A9D9A; background-color:#FBFBFA; background-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' rx='10' stroke='%23C9CDC9' stroke-width='2' stroke-dasharray='6,11' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .ds .pill-dash.neutro .ico{ color:#9AA39D; }
  .ds .pill-dash.salvia{ color:#6E8C81; background-color:#F4F8F6; background-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' rx='10' stroke='%23B7CDC4' stroke-width='2' stroke-dasharray='6,11' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .ds .pill-dash.salvia .ico{ color:#7FA093; }
  .ds .pill-dash.marca{ color:#5E8175; background-color:#EFF5F2; background-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' rx='10' stroke='%23A9C6BB' stroke-width='2' stroke-dasharray='6,11' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .ds .pill-dash.marca .ico{ color:#557E70; }
  .ds .pill-dash.azul{ color:#8399BE; background-color:#F1F5FC; background-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' rx='10' stroke='%23B7CBEA' stroke-width='2' stroke-dasharray='6,11' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .ds .pill-dash.azul .ico{ color:#7C9AD0; }
  .ds .pill-dash.marca{ color:#5C6B7A; background-color:#F1F3F6; background-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' rx='10' stroke='%23C2CBD5' stroke-width='2' stroke-dasharray='6,11' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .ds .pill-dash.marca .ico{ color:#7C8A99; }
  .ds .pill-dash.ambar{ color:#B29A5A; background-color:#FBF6E8; background-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' rx='10' stroke='%23E7D39B' stroke-width='2' stroke-dasharray='6,11' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .ds .pill-dash.ambar .ico{ color:#C9A94E; }
  .ds .pill-dash.rosa{ color:#BC8A99; background-color:#FBF0F3; background-image:url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='none' rx='10' stroke='%23E6C3CC' stroke-width='2' stroke-dasharray='6,11' stroke-linecap='round'/%3E%3C/svg%3E"); }
  .ds .pill-dash.rosa .ico{ color:#CE8A9C; }
  .ds .pill-dash.activo{ background-image:none; border:1.5px solid var(--marca); background-color:#EBF1EE; color:var(--marca); }
  .ds .pill-dash.activo .ico{ color:var(--marca); }

  /* --- Tarjetas horizontales (A/B/C/D) --- */
  .ds .cards-h{ display:grid; gap:16px; max-width:700px; margin:0 auto; }
  .ds .card-h{ display:flex; align-items:stretch; background:var(--superficie); border:1px solid var(--linea); border-radius:16px; overflow:hidden; transition:transform .2s ease, box-shadow .2s ease; }
  .ds .card-h:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -20px rgba(0,0,0,.22); }
  .ds .card-h .txt{ flex:1 1 auto; min-width:0; align-self:center; padding:22px 26px 22px 24px; }
  .ds .card-h .titulo{ font-family:var(--fuente-titulo); font-weight:700; font-size:1.18rem; letter-spacing:-.01em; color:var(--marca); margin:0 0 7px; }
  .ds .card-h .desc{ font-family:var(--fuente-cuerpo); font-size:.98rem; line-height:1.55; color:var(--gris-600); margin:0; }
  .ds .card-h .media{ flex:0 0 190px; align-self:stretch; min-height:140px; background:var(--grad-claro); border-left:1px solid var(--linea); display:grid; place-items:center; color:var(--gris-600); font-family:var(--fuente-mono); font-size:.72rem; background-size:cover; background-position:center top; }
  /* B: imagen anclada al borde inferior */
  .ds .card-h.b{ padding:20px; min-height:172px; }
  .ds .card-h.b .txt{ padding:0 26px 0 4px; }
  .ds .card-h.b .media{ flex:0 0 175px; align-self:flex-end; height:132px; min-height:0; margin-bottom:-20px; border:1px solid var(--linea); border-bottom:none; border-radius:12px 12px 0 0; }
  /* C: espejo de A (imagen a la izquierda) */
  .ds .card-h.c .txt{ padding:22px 24px 22px 26px; }
  .ds .card-h.c .media{ border-left:none; border-right:1px solid var(--linea); }
  /* D: espejo de B (imagen a la izquierda) */
  .ds .card-h.d{ padding:20px; min-height:172px; }
  .ds .card-h.d .txt{ padding:0 4px 0 26px; }
  .ds .card-h.d .media{ flex:0 0 175px; align-self:flex-end; height:132px; min-height:0; margin-bottom:-20px; border:1px solid var(--linea); border-bottom:none; border-radius:12px 12px 0 0; }

  /* --- Testimonio en video --- */
  .ds .vt-grid{ display:flex; flex-wrap:wrap; gap:22px; justify-content:center; max-width:940px; margin:0 auto; padding:0 20px; }
  .ds .vt{ width:320px; max-width:100%; background:var(--card); color:#fff; border-radius:18px; overflow:hidden; }
  .ds .vt-media{ position:relative; aspect-ratio:1/1; overflow:hidden; }
  .ds .vt-poster{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .35s ease; }
  .ds .vt:hover .vt-poster{ transform:scale(1.05); }
  .ds .vt-fade{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, var(--card) 2%, rgba(34,51,46,0) 52%); }
  .ds .vt-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:66px; height:66px; border-radius:999px; border:none; cursor:pointer; background:rgba(255,255,255,.92); display:grid; place-items:center; box-shadow:0 10px 28px -10px rgba(0,0,0,.55); transition:transform .18s ease, background .18s ease; }
  .ds .vt-play:hover{ transform:translate(-50%,-50%) scale(1.08); background:#fff; }
  .ds .vt-play svg{ width:24px; height:24px; margin-left:3px; color:var(--marca); }
  .ds .vt-body{ padding:0 20px 22px; }
  .ds .vt-quote{ font-family:var(--fuente-cuerpo); font-weight:500; font-size:1rem; line-height:1.5; margin:0; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.18); }
  .ds .vt-id{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; margin:14px 0 0; }
  .ds .vt-name{ font-family:var(--fuente-titulo); font-weight:600; font-size:.98rem; white-space:nowrap; }
  .ds .vt-role{ flex:1 1 auto; text-align:right; line-height:1; letter-spacing:-.01em; font-family:var(--fuente-titulo); font-weight:700; font-size:1.28rem; background:linear-gradient(90deg,#AEB9C3,#75828E,#C2CBD3); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .ds .vt-pills{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
  .ds .vt-pill{ display:inline-flex; align-items:center; font-family:var(--fuente-titulo); font-weight:500; font-size:.76rem; letter-spacing:.01em; color:#D8E7E1; background:rgba(110,151,137,.16); border:1px solid rgba(155,198,184,.34); border-radius:999px; padding:5px 12px; }
  .ds .vt-media iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

    /* --- Video horizontal (hero/central) 16:9 — beam + play grande --- */
  .ds .vh{position:relative;width:100%;max-width:var(--medida-ancha);margin:0 auto;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--linea);box-shadow:0 30px 60px -34px rgba(0,0,0,.4);}
  .ds .vh .vt-poster{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;}
  .ds .vh iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  .ds .vh .vh-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:122px;height:122px;border-radius:999px;border:none;cursor:pointer;background:var(--marca);display:grid;place-items:center;box-shadow:0 16px 44px -10px rgba(53,92,83,.6);transition:transform .18s ease, background .18s ease;}
  .ds .vh .vh-play:hover{transform:translate(-50%,-50%) scale(1.08);background:#2c4d45;}
  .ds .vh .vh-play svg{width:47px;height:47px;margin-left:6px;color:#fff;}
  .ds .vh-beam{--size:220;--duration:21;--anchor:90;--bw:2;--cf:#AEB9C3;--ct:#3E4A56;position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;border:calc(var(--bw)*1px) solid transparent;-webkit-mask:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff);mask:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff);-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-composite:source-in;mask-composite:intersect;}
  .ds .vh-beam::after{content:"";position:absolute;aspect-ratio:1;width:calc(var(--size)*1.5*1px);offset-anchor:calc(var(--anchor)*1%) 50%;offset-path:rect(0 auto auto 0 round calc(var(--size)*1px));background:linear-gradient(to left,var(--cf),var(--ct),transparent);animation:border-beam calc(var(--duration)*1s) linear infinite;}
  @keyframes border-beam{to{offset-distance:100%;}}
  @media (prefers-reduced-motion:reduce){.ds .vh-beam::after{animation:none;}}

  /* --- Barra de navegación flotante (glass, no fija) --- */
  .ds .navbar-demo{position:relative;background:#0d100e;border-radius:16px;height:220px;overflow:hidden;margin-top:8px;}
  .ds .navbar-demo::before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side at 50% -10%, rgba(110,151,137,.45), transparent 70%);}
  .ds .navbar{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:auto;max-width:min(720px, calc(100% - 32px));background:rgba(26,32,29,.5);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.16);border-radius:999px;box-shadow:0 12px 36px -12px rgba(0,0,0,.55);display:flex;align-items:center;gap:16px;padding:9px 12px 9px 20px;}
  .ds .navbar .brand{font-family:var(--fuente-titulo);font-weight:800;color:#fff;font-size:1rem;letter-spacing:-.01em;}
  .ds .navbar .nlinks{display:flex;gap:16px;margin-left:12px;}
  .ds .navbar .nlinks a{font-family:var(--fuente-titulo);font-weight:500;font-size:.88rem;color:#DDE3E0;text-decoration:none;}
  .ds .navbar .nlinks a:hover{color:#fff;}
  .ds .navbar .ncta{margin-left:auto;font-family:var(--fuente-titulo);font-weight:600;font-size:.88rem;color:var(--marca);background:var(--lavanda);border-radius:999px;padding:8px 18px;text-decoration:none;}
  @container ds (max-width:620px){
    .ds .navbar .nlinks{ display:none; }
    .ds .navbar{ gap:10px; padding:8px 10px 8px 16px; }
    .ds .navbar .brand .logo-crece{ height:30px; }
  }

  /* --- Tarjeta horizontal E: imagen que sobresale del marco (retrato) --- */
  .ds .card-h.e{align-items:stretch;overflow:visible;padding:20px;min-height:172px;margin-top:40px;}
  .ds .card-h.e .txt{align-self:center;padding:0 4px 0 26px;}
  .ds .card-h.e .media{position:relative;flex:0 0 175px;align-self:stretch;background:none;border:none;min-height:0;overflow:visible;}
  .ds .card-h.e .media .retrato{position:absolute;left:0;right:0;top:-48px;bottom:-20px;border-radius:12px 12px 0 0;background:var(--grad-claro);border:1px solid var(--linea);border-bottom:none;}
  .ds .card-h.e .media .retrato::after{content:"▢ retrato";position:absolute;left:0;right:0;bottom:14px;text-align:center;font-family:var(--fuente-mono);font-size:.72rem;color:var(--gris-600);}