/* =========================================================
   Correctores.es — Design System (Fase 2)
   Scopeado a .dsx: solo afecta a páginas con la plantilla page-ds.php.
   Paleta plana índigo/ámbar, sin gradientes, sin fotos.
   Tipografía: Space Grotesk + Manrope + IBM Plex Mono.
   Ancho único 1280px. Fuente de verdad: /referencia/*-v2.html
   ========================================================= */

:root{
  --ds-bg:#FFFFFF;
  --ds-bg-alt:#F4F5F8;
  --ds-ink:#12131A;
  --ds-ink-soft:#585C67;
  --ds-ink-faint:#9599A3;
  --ds-line:#E5E7EB;
  --ds-human:#E29A3A;
  --ds-human-soft:#FBEEDB;
  --ds-tech:#3552EF;
  --ds-tech-soft:#E9ECFE;
  /* Marca editorial de cambios. Categoría propia: no reutiliza --ds-tech
     (índigo = curso) ni --ds-human (ámbar = tu trabajo), porque «esto se quitó»
     y «esto se añadió» no son ninguna de las dos cosas.
     Contraste comprobado: 6,5:1 y 5,4:1 sobre blanco, y 5,6:1 y 4,8:1 sobre su
     propio tinte. Los dos pasan AA como texto normal. */
  --ds-edit-out:#B3261E;      /* quitado */
  --ds-edit-out-soft:#FBE9E7;
  --ds-edit-in:#12794F;       /* añadido */
  --ds-edit-in-soft:#E6F4EC;
  --ds-radius:16px;
  --ds-radius-sm:10px;
  --ds-display:"Space Grotesk",-apple-system,BlinkMacSystemFont,sans-serif;
  --ds-sans:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ds-mono:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;
  --ds-maxw:1200px;
}

/* ---------- Reset acotado ---------- */
.dsx *{box-sizing:border-box;}
.dsx{background:var(--ds-bg);color:var(--ds-ink);font-family:var(--ds-sans);font-size:17.5px;line-height:1.65;-webkit-font-smoothing:antialiased;}
.dsx img{max-width:100%;height:auto;display:block;}
.dsx a{color:inherit;text-decoration:none;}
.dsx ul{margin:0;padding:0;list-style:none;}
.dsx h1,.dsx h2,.dsx h3,.dsx h4{font-family:var(--ds-display);font-weight:600;margin:0;letter-spacing:-0.02em;color:var(--ds-ink);}
.dsx p{margin:0;}
.dsx ::selection{background:var(--ds-tech);color:#fff;}
.dsx :focus-visible{outline:2px solid var(--ds-tech);outline-offset:3px;}
@media (prefers-reduced-motion: reduce){.dsx *{animation-duration:.01ms !important;transition-duration:.01ms !important;}}

/* ---------- Layout base: wrap 1280 + full-bleed ---------- */
.dsx .wrap{max-width:var(--ds-maxw);margin:0 auto;padding:0 32px;}
/* romper a ancho completo (técnica completa: fija left + márgenes juntos,
   para no chocar con el .alignfull propio del theme que usa left:50%) */
.dsx .alignfull,.dsx .full{position:relative;left:50%;right:50%;width:100vw;max-width:100vw;margin-left:-50vw;margin-right:-50vw;}
.dsx-main{overflow-x:hidden;}
.dsx .ds-section{padding:84px 0;}
.dsx .section-alt{background:var(--ds-bg-alt);}
.dsx .section-head{max-width:640px;margin-bottom:52px;}
.dsx .section-head h2{font-size:clamp(28px,3vw,36px);line-height:1.16;}
.dsx .section-head .lede{margin-top:16px;font-size:19.5px;color:var(--ds-ink-soft);line-height:1.68;}
/* Override ÚNICO del espaciado interno del section-head (más ajustado que el universal de 36px).
   Aplica a TODOS los section-head del sitio. Especificidad (0,3,0) > universal (0,2,0). */
.dsx .section-head :is(.wp-block-group__inner-container, [class*="is-layout-flow"], [class*="is-layout-constrained"]) > * + *,
.dsx .section-head > * + *{margin-top:16px;}

/* ---------- Eyebrow (dos puntos tech+human) ---------- */
.dsx .eyebrow{display:inline-flex;align-items:center;gap:6px;font-family:var(--ds-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ds-ink-soft);margin-bottom:16px;}
.dsx .eyebrow::before,.dsx .eyebrow::after{content:"";width:7px;height:7px;border-radius:50%;flex:none;}
.dsx .eyebrow::before{background:var(--ds-tech);}
.dsx .eyebrow::after{background:var(--ds-human);}
.dsx .eyebrow.on-dark{color:rgba(255,255,255,0.82);}

/* ---------- Header ---------- */
.dsx .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.85);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--ds-line);}
.dsx .site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:32px;}
.dsx .logo{font-family:var(--ds-display);font-weight:700;font-size:20px;color:var(--ds-ink);display:flex;align-items:center;gap:5px;white-space:nowrap;}
.dsx .logo .dots{display:inline-flex;gap:3px;margin-right:3px;}
.dsx .logo .dots span{width:7px;height:7px;border-radius:50%;}
.dsx .logo .dots span:first-child{background:var(--ds-tech);}
.dsx .logo .dots span:last-child{background:var(--ds-human);}
.dsx .main-nav{display:flex;align-items:center;gap:2px;flex:1;justify-content:center;}
.dsx .main-nav > ul{display:flex;align-items:center;gap:2px;}
/* margin:0 explícito: el tema base (Orbital) tiene "ol li, ul li{margin-bottom:1rem}" con más
   especificidad que su propio reset universal, así que sin esto cada opción del menú arrastra
   16px de margen inferior invisible que descuadra el centrado vertical frente al logotipo y el
   teléfono/botón (detectado 15-sep-2026, medido con getBoundingClientRect: centrado a 30px en vez
   de 38px). */
.dsx .main-nav > ul > li{position:relative;margin:0;}
.dsx .main-nav > ul > li > a{display:flex;align-items:center;gap:5px;padding:10px 14px;font-size:15.5px;font-weight:600;color:var(--ds-ink-soft);border-radius:8px;}
.dsx .main-nav > ul > li > a:hover{color:var(--ds-ink);background:var(--ds-bg-alt);}
.dsx .main-nav > ul > li.menu-item-has-children > a::after{content:"";width:8px;height:8px;margin-left:2px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.6;}
.dsx .main-nav .sub-menu{position:absolute;top:100%;left:0;min-width:270px;background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius-sm);box-shadow:0 16px 32px rgba(18,19,26,.10);padding:8px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease,visibility .15s;}
.dsx .main-nav > ul > li:hover > .sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.dsx .main-nav .sub-menu a{display:block;padding:9px 12px;font-size:15px;color:var(--ds-ink-soft);border-radius:6px;}
.dsx .main-nav .sub-menu a:hover{background:var(--ds-bg-alt);color:var(--ds-ink);}
.dsx .header-cta{display:flex;align-items:center;gap:10px;}
/* AULA como logo en la cabecera (28-sep-2026): distintivo de marca, no un
   enlace de menú más — fondo de color (el índigo de las piezas del aula,
   --ds-tech) y texto blanco, para que se lea como puerta a otra sección, no
   como una opción igual que «Blog» o «Servicios». Oculto por debajo de
   1001px: en el desplegable móvil sale su gemelo .nav-aula (ver más abajo). */
.dsx .aula-badge{display:none;align-items:center;gap:6px;background:var(--ds-tech);color:#fff;font-family:var(--ds-sans);font-weight:800;font-size:13px;letter-spacing:.02em;padding:8px 14px 8px 11px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:background .15s ease,box-shadow .15s ease;}
.dsx .aula-badge svg{flex:none}
.dsx .aula-badge:hover{background:#2b44cc;box-shadow:0 8px 18px rgba(53,82,239,.3);}
@media (min-width:1001px){.dsx .aula-badge{display:inline-flex}}
/* Versión del desplegable móvil: mismo icono y mismo fondo, pero como fila
   del menú (ancho completo, como el resto de enlaces de .main-nav), no como
   píldora suelta — así no compite en tamaño con las demás entradas. */
.dsx .nav-aula{display:none;align-items:center;gap:8px;margin-top:4px;padding:10px 14px;font-family:var(--ds-sans);font-weight:700;font-size:15.5px;color:#fff;background:var(--ds-tech);border-radius:8px;text-decoration:none;}
.dsx .nav-aula svg{flex:none}
@media (max-width:1000px){.dsx .nav-aula{display:flex}}
/* Teléfono de la cabecera (14/09/2026, auditoría de competencia: casi ninguna
   página de servicio propia lo mostraba y era el canal más repetido en la
   competencia). Mismo mono que el resto de la cabecera, sin fondo: no compite
   con el botón primario. Oculto por debajo de 1001px, donde el menú pasa a
   desplegable y el teléfono es el elemento que menos falta hace —queda
   WhatsApp, más visible en móvil según la propia auditoría, y Contactar. */
.dsx .tel{display:none;align-items:center;gap:6px;color:var(--ds-ink-soft);text-decoration:none;font-family:var(--ds-mono);font-size:13.5px;font-weight:500;white-space:nowrap;transition:color .15s ease}
.dsx .tel svg{flex:none;color:var(--ds-tech)}
.dsx .tel:hover{color:var(--ds-ink)}
@media (min-width:1001px){.dsx .tel{display:inline-flex}}
/* Rayita que separa el menú del bloque de la derecha. Va en el ::before del
   grupo, no como elemento aparte, para que no entre en el orden de lectura de
   un lector de pantalla: es decoración, no contenido.
   Alto fijo de 22px, muy por debajo de los 76 del header: la idea es marcar la
   junta, no partir la barra en dos. Solo desde 1000px, que es donde el menú
   deja de ser un desplegable y hay algo que separar. */
.dsx .header-cta::before{content:"";display:none;width:1px;height:22px;background:var(--ds-line);flex:none}
@media (min-width:1001px){.dsx .header-cta::before{display:block}}
.dsx .nav-toggle{display:none;background:none;border:1px solid var(--ds-line);border-radius:8px;width:42px;height:40px;cursor:pointer;align-items:center;justify-content:center;}
.dsx .nav-toggle span,.dsx .nav-toggle span::before,.dsx .nav-toggle span::after{content:"";display:block;width:18px;height:2px;background:var(--ds-ink);position:relative;}
.dsx .nav-toggle span::before{position:absolute;top:-6px;}
.dsx .nav-toggle span::after{position:absolute;top:6px;}

/* ---------- Botones ---------- */
.dsx .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--ds-sans);font-weight:700;font-size:15.5px;padding:13px 25px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;white-space:nowrap;line-height:1;}
.dsx .btn:active{transform:translateY(1px) scale(.99);}
.dsx .btn-primary{background:var(--ds-ink);color:#fff;}
.dsx .btn-primary:hover{background:var(--ds-tech);box-shadow:0 8px 20px rgba(53,82,239,.28);}
.dsx .btn-secondary{background:transparent;color:var(--ds-ink);border-color:var(--ds-line);}
.dsx .btn-secondary:hover{border-color:var(--ds-ink);}
.dsx .btn-ghost{background:transparent;color:var(--ds-tech);padding-left:0;padding-right:0;border-radius:0;}
.dsx .btn-ghost::after{content:"→";margin-left:2px;transition:margin .15s ease;}
.dsx .btn-ghost:hover::after{margin-left:7px;}
.dsx .on-dark.btn-secondary{border-color:rgba(255,255,255,.35);color:#fff;}
.dsx .on-dark.btn-secondary:hover{border-color:#fff;}
.dsx .on-dark.btn-primary{background:#fff;color:var(--ds-ink);}
.dsx .on-dark.btn-primary:hover{background:var(--ds-human);color:#fff;box-shadow:0 8px 20px rgba(226,154,58,.3);}

/* ---------- Hero ---------- */
.dsx .hero-panel{background:var(--ds-ink);color:#fff;overflow:hidden;}
.dsx .hero-panel .wrap{padding-top:60px;padding-bottom:60px;display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;}
.dsx .hero-panel.compact .wrap{padding-top:40px;padding-bottom:128px;display:block;}
/* equilibrio vertical del hero: neutraliza la regla universal margin-top:36px que se cuela en el
   stack breadcrumb->eyebrow->H1 (hijos directos de .wrap en el hero compacto) y aprieta ese cluster
   superior, para que "borde superior -> H1" no pese mucho más que "botón -> borde inferior". */
.dsx .hero-panel .breadcrumb{margin-top:0;margin-bottom:25px;}
.dsx .hero-panel .eyebrow{margin-top:0;margin-bottom:50px;}
.dsx .hero-panel h1{margin-top:0;margin-bottom:30px;font-size:clamp(30px,3.8vw,46px);line-height:1.1;max-width:17ch;color:#fff;}
.dsx .hero-panel.compact h1{max-width:24ch;}
.dsx .hero-panel .lede{margin-top:18px;font-size:19px;line-height:1.58;color:rgba(255,255,255,.82);max-width:50ch;}
.dsx .hero-panel .cta-row{display:flex;gap:16px;margin-top:28px;flex-wrap:wrap;align-items:center;}
@media (max-width:900px){.dsx .hero-panel .wrap{grid-template-columns:1fr;}}

/* subrayado de firma tech+human */
.dsx .signal{position:relative;color:inherit;display:inline-block;}
.dsx .signal::before,.dsx .signal::after{content:"";position:absolute;bottom:-6px;height:4px;border-radius:2px;}
.dsx .signal::before{left:0;width:50%;background:var(--ds-tech);}
.dsx .signal::after{right:0;width:50%;background:var(--ds-human);}

/* animación "corrección en vivo" */
.dsx .doc-mock{background:#fff;border-radius:var(--ds-radius);padding:32px 30px;display:flex;flex-direction:column;gap:15px;}
.dsx .doc-mock .doc-line{font-family:var(--ds-sans);font-size:15px;color:var(--ds-ink-soft);line-height:1.6;}
.dsx .doc-mock .doc-line.dim{color:var(--ds-ink-faint);}
.dsx .doc-mock .word-swap{position:relative;display:inline-grid;vertical-align:baseline;}
.dsx .doc-mock .word-swap span{grid-area:1/1;white-space:nowrap;}
.dsx .doc-mock .w-before{color:var(--ds-ink-faint);text-decoration:wavy underline var(--ds-human);text-underline-offset:3px;animation:dsSwapBefore 7s ease-in-out infinite;}
.dsx .doc-mock .w-after{color:var(--ds-tech);font-weight:600;opacity:0;animation:dsSwapAfter 7s ease-in-out infinite;}
.dsx .doc-mock .word-swap.d2 .w-before,.dsx .doc-mock .word-swap.d2 .w-after{animation-delay:3.4s;}
@keyframes dsSwapBefore{0%,30%{opacity:1;}38%,90%{opacity:0;}98%,100%{opacity:1;}}
@keyframes dsSwapAfter{0%,30%{opacity:0;}38%,90%{opacity:1;}98%,100%{opacity:0;}}
.dsx .doc-mock .cursor-row{display:flex;align-items:center;gap:8px;margin-top:2px;}
.dsx .doc-mock .cursor{width:2px;height:15px;background:var(--ds-tech);flex:none;animation:dsBlink 1.1s steps(1) infinite;}
@keyframes dsBlink{50%{opacity:0;}}
@media (prefers-reduced-motion: reduce){
  .dsx .doc-mock .cursor{animation:none;}
  .dsx .doc-mock .w-before{animation:none;opacity:0;}
  .dsx .doc-mock .w-after{animation:none;opacity:1;}
}

/* ---------- Hero Maquetación: doble página armándose (solo CSS, sin imágenes) ---------- */
.dsx .book-mock{background:#fff;border-radius:var(--ds-radius);padding:34px 30px;display:grid;grid-template-columns:1fr 1fr;gap:18px;position:relative;}
.dsx .book-mock .page{position:relative;aspect-ratio:3/4;}
.dsx .book-mock .guide{position:absolute;border:1px dashed var(--ds-tech);opacity:0;animation:dsGuideIn 6s ease-in-out infinite;}
.dsx .book-mock .guide.margin{inset:6% 8%;}
.dsx .book-mock .guide.col{top:6%;bottom:6%;width:1px;border-left:1px dashed var(--ds-tech);border-top:none;}
.dsx .book-mock .page.right .guide{border-color:var(--ds-human);}
.dsx .book-mock .tblock{position:absolute;left:8%;height:6%;border-radius:2px;background:#D8DBE2;animation:dsSnapIn 6s ease-in-out infinite;}
.dsx .book-mock .page.right .tblock{background:#EFDEC2;}
.dsx .book-mock .tblock:nth-child(4){animation-delay:.15s;}
.dsx .book-mock .tblock:nth-child(5){animation-delay:.3s;}
.dsx .book-mock .tblock:nth-child(6){animation-delay:.45s;}
.dsx .book-mock .tblock:nth-child(7){animation-delay:.6s;}
.dsx .book-mock .folio{position:absolute;bottom:2%;font-family:var(--ds-mono);font-size:9px;color:var(--ds-ink-faint);}
.dsx .book-mock .page.left .folio{right:8%;}
.dsx .book-mock .page.right .folio{left:8%;}
@keyframes dsGuideIn{0%,8%{opacity:0;}20%,80%{opacity:1;}92%,100%{opacity:0;}}
@keyframes dsSnapIn{0%{transform:translateX(14px) rotate(-1.2deg);opacity:.35;}25%,78%{transform:translateX(0) rotate(0);opacity:1;}92%,100%{transform:translateX(14px) rotate(-1.2deg);opacity:.35;}}
@media (prefers-reduced-motion: reduce){
  .dsx .book-mock .guide,.dsx .book-mock .tblock{animation:none!important;opacity:1!important;transform:none!important;}
}

/* ---------- Trust strip ---------- */
.dsx .trust-strip{padding:36px 0;background:var(--ds-bg);}
.dsx .trust-strip .wrap{display:flex;align-items:center;gap:10px;justify-content:flex-start;flex-wrap:wrap;}
/* La regla genérica de separación entre hermanos —.dsx-main :is(.wrap,…) > * + *
   {margin-top:36px}, más abajo en este mismo fichero— alcanza al segundo <span>
   de la franja y lo baja 18px respecto al primero. No se veía cuando los dos
   estaban en puntas opuestas; con ellos juntos, sí. Hace falta (0,3,0) para
   ganarle, así que no vale ponerlo en la regla de .trust-clients. */
.dsx .trust-strip .wrap > * + *{margin-top:0;}
.dsx .trust-strip .trust-label{font-family:var(--ds-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ds-ink-faint);white-space:nowrap;}
.dsx .trust-strip .trust-clients{font-family:var(--ds-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ds-ink-faint);}

/* ---------- Service cards ---------- */
.dsx .card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.dsx .service-card{background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:30px 26px;display:flex;flex-direction:column;gap:14px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
/* la tarjeta es un <a>: no debe verse como link de texto (azul/subrayado) */
.dsx a.service-card,.dsx a.service-card:hover{color:var(--ds-ink);text-decoration:none;}
.dsx a.service-card h3,.dsx a.service-card p,.dsx a.service-card .go{text-decoration:none;}
.dsx .service-card h3{color:var(--ds-ink);}
.dsx .service-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(18,19,26,.08);border-color:transparent;}
.dsx .service-card .ic{width:38px;height:38px;border-radius:10px;background:var(--ds-tech-soft);display:flex;align-items:center;justify-content:center;color:var(--ds-tech);}
.dsx .service-card .ic svg{width:19px;height:19px;}
.dsx .service-card h3{font-size:19.5px;line-height:1.32;}
.dsx .service-card p{font-size:17px;color:var(--ds-ink-soft);line-height:1.58;flex:1;}
.dsx .service-card .go{font-family:var(--ds-mono);font-size:13px;color:var(--ds-ink);font-weight:500;}
.dsx .service-card .go::after{content:" →";color:var(--ds-tech);}
@media (max-width:980px){.dsx .card-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.dsx .card-grid{grid-template-columns:1fr;}}

/* ---------- Duo humano+tecnología ---------- */
.dsx .duo{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ds-line);border:1px solid var(--ds-line);border-radius:var(--ds-radius);overflow:hidden;}
.dsx .duo-panel{background:#fff;padding:44px 40px;position:relative;}
.dsx .duo-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;}
.dsx .duo-panel.human::before{background:var(--ds-human);}
.dsx .duo-panel.tech::before{background:var(--ds-tech);}
.dsx .duo-panel .tag{font-family:var(--ds-mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;display:inline-block;}
.dsx .duo-panel.human .tag{color:var(--ds-human);}
.dsx .duo-panel.tech .tag{color:var(--ds-tech);}
.dsx .duo-panel h3{font-size:25px;margin-bottom:14px;}
.dsx .duo-panel p{font-size:18px;color:var(--ds-ink-soft);line-height:1.72;}
.dsx .duo-panel ul{margin-top:18px;display:flex;flex-direction:column;gap:10px;}
.dsx .duo-panel li{font-size:17px;color:var(--ds-ink-soft);padding-left:20px;position:relative;}
.dsx .duo-panel.human li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--ds-human);}
.dsx .duo-panel.tech li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--ds-tech);}
@media (max-width:760px){.dsx .duo{grid-template-columns:1fr;}}

/* ---------- Value grid ---------- */
.dsx .value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ds-line);border:1px solid var(--ds-line);border-radius:var(--ds-radius);overflow:hidden;}
.dsx .value-item{background:#fff;padding:32px 28px;}
.dsx .value-item h3{font-size:18px;margin-bottom:10px;}
.dsx .value-item p{font-size:17px;color:var(--ds-ink-soft);line-height:1.62;}
@media (max-width:860px){.dsx .value-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.dsx .value-grid{grid-template-columns:1fr;}}

/* ---------- CTA banner ---------- */
.dsx .cta-banner{background:var(--ds-ink);color:#fff;padding:88px 0;text-align:center;position:relative;}
.dsx .cta-banner .duo-bar{position:absolute;top:0;left:0;right:0;height:5px;display:flex;}
.dsx .cta-banner .duo-bar span{flex:1;}
.dsx .cta-banner .duo-bar span:first-child{background:var(--ds-tech);}
.dsx .cta-banner .duo-bar span:last-child{background:var(--ds-human);}
.dsx .cta-banner h2{color:#fff;font-size:clamp(30px,3.8vw,44px);}
.dsx .cta-banner .lede{color:rgba(255,255,255,.75);max-width:52ch;margin:18px auto 0;font-size:19.5px;}
.dsx .cta-banner .cta-row{margin-top:32px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}

/* ---------- Reviews (rating badge + grid propio) ---------- */
.dsx .reviews-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:36px;}
.dsx .rating-badge{display:flex;align-items:center;gap:12px;background:var(--ds-bg-alt);border:1px solid var(--ds-line);border-radius:999px;padding:10px 18px 10px 14px;}
.dsx .rating-badge .score{font-family:var(--ds-display);font-weight:700;font-size:19px;color:var(--ds-ink);}
.dsx .rating-badge .stars{display:flex;gap:2px;}
.dsx .star{width:15px;height:15px;fill:var(--ds-human);flex:none;}
.dsx .rating-badge .meta{font-family:var(--ds-mono);font-size:12.5px;color:var(--ds-ink-faint);}
/* Grilla de reseñas NATIVAS (renderizadas por reviews.js con datos reales de Google) */
.dsx .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.dsx .review-card{background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:22px 22px 24px;display:flex;flex-direction:column;gap:14px;}
.dsx .review-card .rc-head{display:flex;align-items:center;gap:12px;}
.dsx .review-card .rc-avatar{width:38px;height:38px;border-radius:50%;background:var(--ds-tech-soft);color:var(--ds-tech);display:flex;align-items:center;justify-content:center;font-family:var(--ds-display);font-weight:700;font-size:16px;line-height:1;flex:none;}
.dsx .review-card .rc-who{min-width:0;}
.dsx .review-card .rc-name{font-family:var(--ds-display);font-weight:600;font-size:15px;color:var(--ds-ink);line-height:1.2;}
.dsx .review-card .rc-sub{font-family:var(--ds-mono);font-size:11px;color:var(--ds-ink-faint);margin-top:2px;}
.dsx .review-card .rc-google{margin-left:auto;flex:none;display:flex;}
.dsx .review-card .rc-stars{display:flex;gap:2px;}
.dsx .review-card .rc-stars svg{width:15px;height:15px;}
.dsx .review-card .rc-stars .on svg{fill:var(--ds-human);}
.dsx .review-card .rc-stars .off svg{fill:var(--ds-line);}
.dsx .review-card .rc-text{font-size:14.5px;line-height:1.6;color:var(--ds-ink-soft);margin:0;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;}
@media (max-width:900px){.dsx .reviews-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.dsx .reviews-grid{grid-template-columns:1fr;}}
/* Salida a la ficha completa de Google: deliberadamente más discreta que
   .btn-ghost (mono, sin negrita, tono ink-soft) — es un enlace de salida, no
   una llamada a la acción del negocio. */
.dsx .reviews-more{display:flex;justify-content:center;margin-top:28px;}
.dsx .reviews-more a{display:inline-flex;align-items:center;gap:5px;font-family:var(--ds-mono);font-size:12.5px;letter-spacing:.02em;color:var(--ds-ink-soft);text-decoration:none;transition:color .15s ease;}
.dsx .reviews-more a:hover{color:var(--ds-tech);}
.dsx .reviews-more a::after{content:"→";transition:margin .15s ease;}
.dsx .reviews-more a:hover::after{margin-left:3px;}
/* Cuando reviews.js renderiza OK, oculta el slider visual de Trustindex (el shortcode/template siguen presentes para sincronizar) */
/* Ocultar SIEMPRE el widget crudo de Trustindex (slider + su mensaje de error
   "Widget not found", que el JS del CDN inyecta client-side en .ti-widget-container
   cuando el widget falla al cargar). Mostramos nuestras tarjetas nativas .review-card
   vía reviews.js; así el error nunca se filtra visible, en ninguna página ds. */
.dsx .ti-widget,.dsx .ti-widget-container{display:none!important;}
.dsx .case-strip{margin-top:32px;padding-top:28px;border-top:1px solid var(--ds-line);display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.dsx .case-strip .case{font-size:16px;color:var(--ds-ink-soft);line-height:1.6;}
.dsx .case-strip .case strong{color:var(--ds-ink);}
@media (max-width:760px){.dsx .case-strip{grid-template-columns:1fr;}}

/* ---------- Reviews (restyle del widget Trustindex a la paleta) ---------- */
/* Oculta SOLO el bloque de resumen (EXCELENTE + estrella grande + "A base de X
   reseñas" + logo Google). Es el hijo directo .ti-footer-grid de .ti-widget-container;
   el slider es el otro hijo (.ti-reviews-container) y queda intacto.
   NOTA: si en tu panel de Trustindex existe el toggle nativo del header, usá ese y borrá esta regla. */
.dsx .ti-widget-container > .ti-footer.ti-footer-grid{display:none !important;}
.dsx .ti-widget .ti-review-item,.dsx .ti-widget .ti-inner{background:#fff !important;border:1px solid var(--ds-line) !important;border-radius:var(--ds-radius) !important;box-shadow:none !important;}
.dsx .ti-widget .ti-name{font-family:var(--ds-display) !important;color:var(--ds-ink) !important;font-weight:600 !important;}
.dsx .ti-widget .ti-review-content,.dsx .ti-widget .ti-review-text-container{color:var(--ds-ink) !important;font-family:var(--ds-sans) !important;font-size:14px !important;line-height:1.5 !important;}
/* Tarjetas más discretas: menos padding, avatar más chico, texto compacto */
.dsx .ti-widget .ti-inner{padding:16px 18px !important;}
.dsx .ti-widget .ti-name{font-size:13.5px !important;}
.dsx .ti-widget .ti-profile-img,.dsx .ti-widget .ti-profile-img img{width:34px !important;height:34px !important;min-width:34px !important;}
.dsx .ti-widget .ti-review-header{margin-bottom:8px !important;}
.dsx .ti-widget .ti-date,.dsx .ti-widget .ti-rating-text .nowrap{font-family:var(--ds-mono) !important;font-size:11.5px !important;color:var(--ds-ink-faint) !important;}
.dsx .ti-widget .ti-star{width:13px !important;height:13px !important;}
.dsx .ti-widget .ti-review-item{max-width:100% !important;}
.dsx .ti-widget .ti-rating{font-family:var(--ds-display) !important;color:var(--ds-ink) !important;}
.dsx .ti-widget .ti-star svg,.dsx .ti-widget .ti-star{color:var(--ds-human) !important;}

/* ---------- Footer ---------- */
.dsx .site-footer{background:#fff;border-top:1px solid var(--ds-line);padding:64px 0 28px;}
.dsx .footer-top{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr .85fr;gap:36px;padding-bottom:44px;}
.dsx .footer-brand p{margin-top:16px;font-size:15px;line-height:1.62;color:var(--ds-ink-faint);max-width:34ch;}
.dsx .site-footer h4{font-family:var(--ds-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ds-ink-faint);margin-bottom:18px;}
.dsx .footer-col ul{display:flex;flex-direction:column;gap:8px;}
.dsx .footer-col li{margin:0;} /* Orbital pone margin-bottom:16px en los <li>: dominaba el interlineado */
.dsx .footer-col a{font-size:15px;line-height:1.3;color:var(--ds-ink-soft);}
.dsx .footer-col a:hover{color:var(--ds-tech);}
.dsx .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid var(--ds-line);font-size:14px;color:var(--ds-ink-faint);flex-wrap:wrap;gap:12px;}
/* 1080 y no 900: con la quinta columna (Aula), entre 900 y 1080 caben las
   cinco pero cada enlace parte en dos líneas y el pie se lee peor que
   apilado. */
@media (max-width:1080px){.dsx .footer-top{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.dsx .footer-top{grid-template-columns:1fr;}}

/* ---------- Bloques core dentro de .dsx (normalización) ---------- */
.dsx-main .wp-block-buttons{display:flex;gap:16px;flex-wrap:wrap;}
.dsx-main .wp-block-image img{border-radius:var(--ds-radius);}

/* ---------- Breadcrumb (hero compact) ---------- */
.dsx .breadcrumb{font-family:var(--ds-mono);font-size:13px;color:rgba(255,255,255,.65);margin-bottom:18px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.dsx .breadcrumb a{color:rgba(255,255,255,.65);}
.dsx .breadcrumb a:hover{color:#fff;}

/* ---------- Pricing ---------- */
.dsx .pricing-block{margin-bottom:44px;}
.dsx .pricing-block:last-child{margin-bottom:0;}
.dsx .pricing-block-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:20px;flex-wrap:wrap;}
.dsx .pricing-block-head h3{font-size:22px;}
.dsx .pricing-block-head .tag{font-family:var(--ds-mono);font-size:12.5px;color:var(--ds-tech);background:var(--ds-tech-soft);padding:5px 12px;border-radius:20px;text-transform:uppercase;letter-spacing:.05em;}
/* price-table -> TARJETA (mismo espíritu que .review-card): fondo blanco, borde 1px, radius 16px,
   ancho propio ~540px. Las filas van APILADAS adentro, con separador fino (border-top) entre cada una.
   Rango a la izq + "Palabras" mono debajo; precio en píldora ámbar (índigo para "Consultar"). Importes intactos. */
.dsx .wp-block-table.price-table{margin-bottom:0;} /* el figure es solo el wrapper (contiene la tarjeta + el figcaption a ancho completo); OJO: antes era "margin:0" a secas, y de paso se comía el margin-top:36px que .dsx-main pone entre bloques seguidos — la tabla quedaba pegada al párrafo de arriba (15-sep-2026) */
.dsx .price-table table,.dsx .wp-block-table.price-table table{display:block;width:100%;max-width:540px;background:#fff;border:1px solid var(--ds-line);border-radius:16px;overflow:hidden;border-collapse:collapse;box-shadow:0 1px 2px rgba(18,19,26,.03);}
.dsx .price-table thead{display:none;}
.dsx .price-table tbody{display:block;}
.dsx .price-table tbody tr:has(td strong){display:none;} /* oculta la fila de encabezado (Cantidad palabras / Tipo / Tarifa) */
.dsx .price-table tbody tr{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:16px;padding:15px 22px;border-top:1px solid var(--ds-line);transition:background .12s ease;}
.dsx .price-table tbody tr:hover{background:var(--ds-bg-alt);}
.dsx .price-table tbody tr:first-child,.dsx .price-table tbody tr:has(td strong)+tr{border-top:0;} /* primera fila visible sin línea superior */
.dsx .price-table td{display:block;border:0!important;padding:0;background:transparent;}
.dsx .price-table td:first-child{grid-column:1;grid-row:1;font-family:var(--ds-sans);font-size:17.5px;font-weight:600;color:var(--ds-ink);white-space:nowrap;text-transform:none;letter-spacing:0;}
.dsx .price-table td:nth-child(2):not(:last-child){grid-column:1;grid-row:2;font-family:var(--ds-mono);font-size:11px;letter-spacing:.03em;color:var(--ds-ink-faint);margin-top:3px;text-transform:none;}
.dsx .price-table td:last-child{grid-column:2;grid-row:1 / -1;justify-self:end;align-self:center;font-family:var(--ds-mono);font-weight:500;font-size:17px;line-height:1;color:#7c5411;background:var(--ds-human-soft);padding:8px 16px;border-radius:999px;white-space:nowrap;text-align:center;}
.dsx .price-table tbody tr:last-child td:last-child{color:var(--ds-tech);background:var(--ds-tech-soft);} /* "Consultar" en índigo */
.dsx .price-note{margin-top:16px;font-size:16px;color:var(--ds-ink-faint);line-height:1.62;}

/* price-matrix -> CUADRO COMPARATIVO ÚNICO (los 3 servicios en columnas; "Palabras" = encabezado de la 1ª columna,
   no repetido por fila). Filas compactas. Precios en texto plano mono SIN negrita. Columna destacada = tech-soft
   con badge "Más solicitado". Pie con nota + CTA. Fuente: pricing-section-mockup. Importes intactos (solo estructura/CSS). */
.dsx .price-matrix{background:#fff;border:1px solid var(--ds-line);border-radius:20px;overflow:hidden;box-shadow:0 24px 48px -24px rgba(18,19,26,.10);}
.dsx .matrix-scroll{overflow-x:auto;}
.dsx table.matrix{width:100%;border-collapse:collapse;min-width:760px;background:transparent;margin:0;}
.dsx .matrix thead th{padding:16px 20px 13px;text-align:center;border-bottom:1px solid var(--ds-line);vertical-align:bottom;}
.dsx .matrix thead th:first-child{text-align:left;width:180px;}
.dsx .matrix th.unit-col{font-family:var(--ds-mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--ds-ink-faint);}
.dsx .matrix .svc-name{font-family:var(--ds-display);font-size:16px;color:var(--ds-ink);font-weight:600;display:block;margin-bottom:5px;line-height:1.18;letter-spacing:-.01em;}
.dsx .matrix .svc-tag{font-family:var(--ds-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ds-ink-faint);}
.dsx .matrix th.featured,.dsx .matrix td.featured{background:var(--ds-tech-soft);}
.dsx .matrix th.featured .svc-tag{color:var(--ds-tech);}
.dsx .matrix .badge{display:inline-block;margin:0 auto 9px;background:var(--ds-ink);color:#fff;font-family:var(--ds-mono);font-size:10px;text-transform:uppercase;letter-spacing:.05em;padding:5px 14px;border-radius:999px;white-space:nowrap;}
.dsx .matrix tbody td{padding:10px 20px;text-align:center;border-bottom:1px solid var(--ds-line);line-height:1.1;}
.dsx .matrix tbody tr:last-child td{border-bottom:none;}
.dsx .matrix tbody tr:hover td{background:#FAFAFB;}
.dsx .matrix tbody tr:hover td.featured{background:#E2E7FE;}
.dsx .matrix .range{text-align:left;font-family:var(--ds-sans);font-size:14.5px;color:var(--ds-ink);font-weight:600;line-height:1.15;}
.dsx .matrix .price{font-family:var(--ds-mono);font-weight:400;font-size:15.5px;color:var(--ds-ink);}
.dsx .matrix .price.consult{color:var(--ds-human);font-weight:500;}
.dsx .matrix-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 24px;background:var(--ds-bg-alt);border-top:1px solid var(--ds-line);}
.dsx .matrix-foot p{margin:0;font-size:15px;color:var(--ds-ink-faint);max-width:52ch;line-height:1.5;}
.dsx .matrix-foot .cta-pill{font-family:var(--ds-sans);font-weight:700;font-size:14px;color:#fff!important;background:var(--ds-ink);padding:11px 22px;border-radius:999px;white-space:nowrap;text-decoration:none;transition:background .15s ease;}
.dsx .matrix-foot .cta-pill:hover{background:var(--ds-tech);}
@media (max-width:640px){.dsx .matrix-foot{flex-direction:column;align-items:flex-start;}}

/* ---------- Precios: alternativas de forma (A lista / B tarjetas) ---------- */
/* A) Lista compacta angosta: rango a la izq, precio en píldora a la der */
.dsx .price-list{max-width:640px;margin:0 auto;}
.dsx .price-list .prow{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 8px;border-bottom:1px solid var(--ds-line);}
.dsx .price-list .prow:first-child{border-top:1px solid var(--ds-line);}
.dsx .price-list .prange{font-family:var(--ds-sans);font-size:15.5px;color:var(--ds-ink-soft);}
.dsx .price-list .pval{font-family:var(--ds-mono);font-weight:600;font-size:19px;line-height:1;color:var(--ds-tech);background:var(--ds-tech-soft);padding:9px 18px;border-radius:999px;white-space:nowrap;}
.dsx .price-list .pval.is-consultar{color:var(--ds-ink-soft);background:var(--ds-bg-alt);font-size:14px;}

/* B) Grid de tarjetas por franja: precio grande arriba, rango como etiqueta */
.dsx .price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.dsx .price-cards .pcard{background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:22px 16px;text-align:center;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.dsx .price-cards .pcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(18,19,26,.07);border-color:transparent;}
.dsx .price-cards .pcard .pval{font-family:var(--ds-mono);font-weight:600;font-size:26px;line-height:1;color:var(--ds-ink);}
.dsx .price-cards .pcard.is-consultar .pval{font-size:18px;color:var(--ds-tech);}
.dsx .price-cards .pcard .prange{font-family:var(--ds-sans);font-size:13px;color:var(--ds-ink-faint);margin-top:10px;letter-spacing:.02em;}
@media (max-width:760px){.dsx .price-cards{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.dsx .price-cards{grid-template-columns:1fr;}}

/* ---------- Callout ---------- */
.dsx .callout{background:var(--ds-tech-soft);border:1px solid rgba(53,82,239,.12);border-radius:var(--ds-radius);padding:28px 32px;font-size:18px;color:var(--ds-ink);line-height:1.68;}
.dsx .callout strong{color:var(--ds-tech);}

/* ---------- content-list (2 columnas) ---------- */
.dsx .content-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;margin-top:8px;list-style:none;padding:0;}
.dsx .content-list li{font-size:18px;color:var(--ds-ink-soft);line-height:1.58;padding-left:22px;position:relative;}
.dsx .content-list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--ds-tech);}
@media (max-width:760px){.dsx .content-list{grid-template-columns:1fr;}}
/* content-list.numbered -> lista de 1 columna con círculo numerado (claves/pasos con título + descripción) */
.dsx .content-list.numbered{grid-template-columns:1fr;counter-reset:clave;gap:18px;margin-top:12px;}
.dsx .content-list.numbered li{padding-left:46px;font-size:18px;color:var(--ds-ink-soft);}
.dsx .content-list.numbered li::before{counter-increment:clave;content:counter(clave);top:0;left:0;width:30px;height:30px;border-radius:50%;background:var(--ds-tech-soft);color:var(--ds-tech);font-family:var(--ds-mono);font-weight:600;font-size:13.5px;display:flex;align-items:center;justify-content:center;}
.dsx .content-list.numbered li strong{color:var(--ds-ink);}

/* ---------- FAQ (estiliza el bloque RankMath, preserva el schema) ---------- */
.dsx .rank-math-list-item{border-bottom:1px solid var(--ds-line);padding:26px 0;}
.dsx .rank-math-list-item:first-child{border-top:1px solid var(--ds-line);}
.dsx .rank-math-question{font-size:18px;margin:0 0 10px;font-family:var(--ds-sans);font-weight:700;color:var(--ds-ink);}
.dsx .rank-math-answer{font-size:17.5px;color:var(--ds-ink-soft);line-height:1.68;}

/* ---------- Compare table (comparativa Sí/No con pills — mockup 2026-07-19) ---------- */
.dsx .compare-table{margin:0;}
.dsx .compare-table table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);overflow:hidden;font-size:17px;}
.dsx .compare-table th,.dsx .compare-table td{padding:15px 18px;border-bottom:1px solid var(--ds-line);border-left:0;border-right:0;border-top:0;text-align:left;color:var(--ds-ink-soft);vertical-align:middle;}
.dsx .compare-table td:first-child,.dsx .compare-table th:first-child{color:var(--ds-ink);}
.dsx .compare-table td:not(:first-child),.dsx .compare-table th:not(:first-child){text-align:center;}
.dsx .compare-table thead th{font-family:var(--ds-mono);font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--ds-ink-faint);background:var(--ds-bg-alt);}
.dsx .compare-table tbody tr:last-child td{border-bottom:none;}
.dsx .compare-table .pill{display:inline-block;padding:4px 12px;border-radius:20px;font-size:13px;font-weight:600;line-height:1.45;}
.dsx .compare-table .pill.yes{background:var(--ds-tech-soft);color:var(--ds-tech);}
.dsx .compare-table .pill.no{background:#FBE2E1;color:#B3261E;border:1px solid #F4C6C4;font-weight:700;}
.dsx .compare-table figcaption{margin-top:16px;font-size:15.5px;color:var(--ds-ink-faint);line-height:1.6;text-align:left;}
.dsx .compare-table a{color:var(--ds-tech);font-weight:600;}

/* ---------- Example block (diff antes/después) ---------- */
.dsx .example-block{background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:36px;}
.dsx .example-block .ex-label{font-family:var(--ds-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ds-ink-faint);margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.dsx .example-block .ex-label .sw{width:7px;height:7px;border-radius:50%;}
.dsx .example-original{font-size:18px;line-height:1.78;color:var(--ds-ink-soft);padding-bottom:26px;border-bottom:1px dashed var(--ds-line);margin-bottom:26px;}
.dsx .example-final{font-size:18.5px;line-height:1.82;color:var(--ds-ink);}
.dsx .example-final .fix{color:var(--ds-tech);font-weight:700;background:var(--ds-tech-soft);padding:1px 4px;border-radius:4px;}

/* ---------- Related cards ---------- */
.dsx .related-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.dsx .related-card{background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:32px;transition:box-shadow .18s ease,transform .18s ease;}
.dsx .related-card:hover{box-shadow:0 18px 36px rgba(18,19,26,.08);transform:translateY(-3px);}
.dsx .related-card h3{font-size:20.5px;margin-bottom:10px;}
.dsx .related-card p{font-size:17.5px;color:var(--ds-ink-soft);line-height:1.62;margin-bottom:18px;}
@media (max-width:700px){.dsx .related-grid{grid-template-columns:1fr;}}
.dsx .related-grid.related-3{grid-template-columns:repeat(3,1fr);}

/* ---------- Maquetación (Fase 3): pasos, consejos, callout-CTA, form single ---------- */
.dsx .steps{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.dsx .step{background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:26px 24px;}
.dsx .step h3{font-family:var(--ds-display);font-size:19px;color:var(--ds-ink);margin:0 0 4px;}
.dsx .step .step-sub{font-family:var(--ds-mono);font-size:12.5px;color:var(--ds-tech);margin:0 0 12px;}
.dsx .step > p{font-size:16.5px;color:var(--ds-ink-soft);line-height:1.6;margin:0 0 12px;}
.dsx .step ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;}
.dsx .step li{font-size:16px;color:var(--ds-ink-soft);line-height:1.55;}
.dsx .tips-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px;}
.dsx .tip h3{font-family:var(--ds-display);font-size:17px;color:var(--ds-ink);margin:0 0 8px;}
.dsx .tip > p{font-size:16.5px;color:var(--ds-ink-soft);line-height:1.65;margin:0 0 10px;}
.dsx .tip ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px;}
.dsx .tip li{font-size:16px;color:var(--ds-ink-soft);line-height:1.55;}
.dsx .callout.callout-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.dsx .callout-cta h3{margin:0;font-family:var(--ds-display);font-size:19px;color:var(--ds-ink);max-width:44ch;}
.dsx .callout-cta .btn{flex:none;}
.dsx .presupuesto.single{display:block;max-width:640px;margin:0 auto;}
@media (max-width:820px){.dsx .steps,.dsx .tips-grid,.dsx .related-grid.related-3{grid-template-columns:1fr;}}

/* ---------- Presupuesto: beneficios (izq) + tarjeta de formulario (der) ---------- */
/* align-items:start -> ambas columnas arrancan a la MISMA altura (antes 'center' bajaba la de texto) */
.dsx .presupuesto{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}
.dsx .presupuesto .benefits h2{font-size:19px;line-height:1.3;margin:0 0 12px;} /* acorde al form compacto */
.dsx .presupuesto .benefits > p{font-size:17.5px;color:var(--ds-ink-soft);line-height:1.65;margin:0 0 20px;max-width:44ch;}
.dsx .benefit-list{display:flex;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none;}
.dsx .benefit-list li{position:relative;padding-left:32px;font-size:17.5px;color:var(--ds-ink);line-height:1.45;}
.dsx .benefit-list li::before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--ds-tech-soft);}
.dsx .benefit-list li::after{content:"";position:absolute;left:6px;top:5px;width:7px;height:4px;border-left:2px solid var(--ds-tech);border-bottom:2px solid var(--ds-tech);transform:rotate(-45deg);}
/* Tarjeta de formulario — diseño aprobado (form-mockup.html): tinte superior + barra bicolor tech/human */
.dsx .form-card{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--ds-tech-soft) 0,#fff 140px);background-color:#fff;border:1px solid var(--ds-line);border-radius:16px;box-shadow:0 20px 44px rgba(18,19,26,.10);padding:30px 28px 26px;}
.dsx .form-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--ds-tech) 0 50%,var(--ds-human) 50% 100%);z-index:1;}
.dsx .form-card .form-head{margin-bottom:20px;}
.dsx .form-card .form-head .eyebrow{color:var(--ds-tech);margin-bottom:8px;}
.dsx .form-card .form-head h3{font-family:var(--ds-display);font-size:20px;line-height:1.2;color:var(--ds-ink);margin:0;font-weight:600;}
.dsx .form-card .form-legal{font-family:var(--ds-mono);font-size:11px;line-height:1.5;color:var(--ds-ink-faint);margin-top:14px;text-align:center;}
.dsx .form-card .form-legal a{color:var(--ds-ink-faint);text-decoration:underline;}
@media (max-width:860px){.dsx .presupuesto{grid-template-columns:1fr;gap:32px;}}

/* ---------- WPForms skin (diseño aprobado: compacto, grid 2 columnas) ---------- */
.dsx .form-card .wpforms-container{margin:0;}
/* grid 2 col: inputs cortos a media columna; select/textarea/checkbox a ancho completo */
/* align-items:start evita que una celda se estire a la altura de su vecina (con hint largo) */
.dsx .form-card .wpforms-field-container{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;align-items:start;}
.dsx .form-card .wpforms-field{grid-column:1 / -1;padding:0;margin:0;}
.dsx .form-card .wpforms-field-name,
.dsx .form-card .wpforms-field-text,
.dsx .form-card .wpforms-field-email,
.dsx .form-card .wpforms-field-phone,
.dsx .form-card .wpforms-field-number{grid-column:span 1;}
.dsx .form-card .wpforms-field-hidden,.dsx .form-card .wpforms-field-hp{display:none!important;}
/* WPForms limita el ancho de los inputs (tamaño "medium" ~60%): forzar ancho completo de la celda */
.dsx .form-card :is(.wpforms-field-medium,.wpforms-field-large,.wpforms-field-small,.wpforms-field-row,.wpforms-field-row-block){max-width:100%!important;width:100%!important;}
.dsx .wpforms-field-label{display:block;font-family:var(--ds-sans);font-weight:600;font-size:12.5px;color:var(--ds-ink);margin:0 0 5px!important;line-height:1.25!important;} /* WPForms fuerza mb:15px/lh:19px -> !important para ritmo compacto */
.dsx .wpforms-field-description{font-family:var(--ds-mono);font-size:10.5px;color:var(--ds-ink-faint);margin-top:5px;}
.dsx .wpforms-required-label{color:var(--ds-human)!important;}
.dsx .wpforms-container input[type=text],
.dsx .wpforms-container input[type=email],
.dsx .wpforms-container input[type=tel],
.dsx .wpforms-container input[type=number],
.dsx .wpforms-container input[type=url],
.dsx .wpforms-container textarea,
.dsx .wpforms-container select,
.dsx .wpforms-container .choices__inner{width:100%!important;max-width:100%!important;border:1px solid var(--ds-line)!important;border-radius:8px!important;background:#fff!important;font-family:var(--ds-sans)!important;font-size:14.5px!important;color:var(--ds-ink)!important;padding:10px 12px!important;box-shadow:none!important;min-height:0!important;}
.dsx .wpforms-container textarea{min-height:72px!important;resize:vertical;}
.dsx .wpforms-container input:focus,.dsx .wpforms-container textarea:focus,.dsx .wpforms-container select:focus,.dsx .wpforms-container .choices.is-focused .choices__inner{outline:none!important;border-color:var(--ds-tech)!important;box-shadow:0 0 0 3px var(--ds-tech-soft)!important;}
/* Checkbox de consentimiento con estilo del sistema (tilde tech; texto legal chico mono ink-faint como el aviso reCAPTCHA) */
.dsx .form-card .wpforms-field-checkbox fieldset,.dsx .form-card .wpforms-field-payment-checkbox fieldset,.dsx .form-card .wpforms-field-gdpr-checkbox fieldset{border:0;margin:0;padding:0;min-width:0;}
.dsx .form-card :is(.wpforms-field-checkbox,.wpforms-field-payment-checkbox,.wpforms-field-gdpr-checkbox) ul{list-style:none;margin:0;padding:0;}
.dsx .form-card :is(.wpforms-field-checkbox,.wpforms-field-payment-checkbox,.wpforms-field-gdpr-checkbox) li{display:flex;align-items:flex-start;gap:9px;margin:0;}
.dsx .form-card :is(.wpforms-field-checkbox,.wpforms-field-payment-checkbox,.wpforms-field-gdpr-checkbox) input[type=checkbox]{appearance:none;-webkit-appearance:none;flex:none;width:16px;height:16px;margin:1px 0 0!important;border:1.5px solid var(--ds-line);border-radius:4px;background:#fff;cursor:pointer;position:relative;transition:background .12s ease,border-color .12s ease;}
.dsx .form-card :is(.wpforms-field-checkbox,.wpforms-field-payment-checkbox,.wpforms-field-gdpr-checkbox) input[type=checkbox]:checked{background:var(--ds-tech-soft);border-color:var(--ds-tech);}
.dsx .form-card :is(.wpforms-field-checkbox,.wpforms-field-payment-checkbox,.wpforms-field-gdpr-checkbox) input[type=checkbox]:checked::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid var(--ds-tech);border-width:0 2px 2px 0;transform:rotate(45deg);}
.dsx .form-card :is(.wpforms-field-checkbox,.wpforms-field-payment-checkbox,.wpforms-field-gdpr-checkbox) .wpforms-field-label-inline,
.dsx .form-card :is(.wpforms-field-checkbox,.wpforms-field-payment-checkbox,.wpforms-field-gdpr-checkbox) .wpforms-field-description{font-family:var(--ds-mono)!important;font-size:10.5px!important;line-height:1.5!important;color:var(--ds-ink-faint)!important;font-weight:400!important;margin:0!important;}
.dsx .form-card :is(.wpforms-field-checkbox,.wpforms-field-payment-checkbox,.wpforms-field-gdpr-checkbox) .wpforms-field-description{margin-top:7px!important;}
.dsx .form-card :is(.wpforms-field-checkbox,.wpforms-field-payment-checkbox,.wpforms-field-gdpr-checkbox) .wpforms-field-description a,.dsx .form-card :is(.wpforms-field-checkbox,.wpforms-field-payment-checkbox,.wpforms-field-gdpr-checkbox) .wpforms-field-label-inline a{color:var(--ds-ink-faint);text-decoration:underline;}
.dsx .form-card .wpforms-submit-container{margin-top:6px;}
.dsx .wpforms-container button[type=submit],.dsx .wpforms-container .wpforms-submit{width:100%;background:var(--ds-ink)!important;color:#fff!important;border:none!important;border-radius:999px!important;font-family:var(--ds-sans)!important;font-weight:700!important;font-size:14.5px!important;padding:13px 28px!important;cursor:pointer;transition:background .15s ease,box-shadow .15s ease;}
.dsx .wpforms-container button[type=submit]:hover,.dsx .wpforms-container .wpforms-submit:hover{background:var(--ds-tech)!important;box-shadow:0 8px 20px rgba(53,82,239,.28);}
@media (max-width:560px){.dsx .form-card .wpforms-field-container{grid-template-columns:1fr;}}
/* oculta el badge flotante de reCAPTCHA (el aviso legal va en .form-legal) */
/* Google renombró/añadió esta clase en algún momento tras escribir la regla de arriba: la insignia
   real que pinta hoy es .grecaptcha-logo (con su iframe dentro), no .grecaptcha-badge — por eso llevaba
   tiempo visible sin que nadie lo notara, hasta que el botón de WhatsApp (15-sep) se sentó justo encima
   con solo 14px de hueco. El aviso «protegido por reCAPTCHA» ya está en el formulario, así que ocultar
   el icono no deja un hueco de cumplimiento. */
.grecaptcha-badge,.grecaptcha-logo{visibility:hidden!important;}
.grecaptcha-logo iframe{visibility:hidden!important;} /* el iframe de Google reafirma su propia visibilidad, hay que ocultarlo también a él y no solo al contenedor */

/* ---------- Blog: post individual (lectura larga) ---------- */
.dsx .post-hero{background:var(--ds-ink);color:#fff;}
.dsx .post-hero .wrap{padding-top:56px;padding-bottom:56px;max-width:900px;}
.dsx .post-hero .post-cat{font-family:var(--ds-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ds-human);margin-bottom:16px;display:inline-block;}
.dsx .post-hero h1{font-size:clamp(30px,3.6vw,44px);line-height:1.14;color:#fff;max-width:24ch;}
.dsx .post-hero .post-meta{margin-top:20px;font-family:var(--ds-mono);font-size:13px;color:rgba(255,255,255,.7);display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.dsx .post-hero .post-meta .dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4);}

/* columna de lectura cómoda (~720px), a propósito más angosta que 1280 */
.dsx .ds-article{max-width:860px;margin:0 auto;padding:64px 24px 24px;}
.dsx .ds-article .entry-content > *{margin-bottom:1.35em;}
.dsx .ds-article p{font-size:19px;line-height:1.78;color:#26272E;}
.dsx .ds-article h2{font-size:28px;line-height:1.2;margin-top:1.9em;margin-bottom:.5em;}
.dsx .ds-article h3{font-size:22px;line-height:1.25;margin-top:1.6em;margin-bottom:.4em;}
.dsx .ds-article ul,.dsx .ds-article ol{padding-left:1.3em;}
.dsx .ds-article li{font-size:19px;line-height:1.7;color:#26272E;margin-bottom:.5em;}
.dsx .ds-article a{color:var(--ds-tech);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
.dsx .ds-article img{border-radius:var(--ds-radius);margin:1.2em auto;}
.dsx .ds-article figure{margin:1.6em 0;}
.dsx .ds-article figcaption{font-size:14px;color:var(--ds-ink-faint);text-align:center;margin-top:8px;}
.dsx .ds-article blockquote{border-left:3px solid var(--ds-tech);padding:4px 0 4px 24px;margin:1.6em 0;font-size:21px;line-height:1.6;color:var(--ds-ink);font-family:var(--ds-display);font-weight:500;}
.dsx .ds-article h2::before{content:"";display:block;width:32px;height:4px;border-radius:2px;background:var(--ds-tech);margin-bottom:18px;}
.dsx .ds-article code{font-family:var(--ds-mono);font-size:.9em;background:var(--ds-bg-alt);padding:2px 6px;border-radius:4px;}
/* CTA no invasivo hacia servicios */
.dsx .post-cta{max-width:860px;margin:56px auto;padding:0 24px;}
.dsx .post-cta .inner{background:var(--ds-bg-alt);border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:28px 30px;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.dsx .post-cta .inner p{font-size:18px;color:var(--ds-ink);margin:0;max-width:44ch;}
.dsx .post-cta .inner strong{font-family:var(--ds-display);}

/* ==========================================================
   SISTÉMICO (Fase 2.1) — corrige overflow, tipografía de contenido
   genérico de Gutenberg, y tablas sin estilo. Aplica en todo el scope.
   ========================================================== */

/* --- 1) Contención de overflow (full-bleed + barra de scroll, y bloques viejos anchos) --- */
.dsx-main,.dsx .ds-post{overflow-x:clip;}                 /* contiene el 100vw; clip no rompe el sticky */
.dsx-main,.dsx .ds-article .entry-content{overflow-wrap:break-word;}
.dsx :where(img,figure,iframe,video,embed,object){max-width:100% !important;height:auto;}
.dsx .wp-block-image img{width:auto;}
.dsx .wp-block-columns{flex-wrap:wrap;}                   /* columnas viejas envuelven en vez de desbordar */
.dsx .wp-block-column{min-width:min(100%,300px);}
.dsx .wp-block-table{max-width:100%;overflow-x:auto;}     /* tablas anchas -> scroll interno, no desbordan */

/* --- 2) Tipografía base para bloques core genéricos dentro del contenido claro.
   :where() mantiene la especificidad en (0,2,0): pisa los defaults del theme y
   los inline-style comunes, pero deja ganar a los componentes (.service-card p = 0,2,1). --- */
.dsx-main :where(p){font-family:var(--ds-sans);font-size:18.5px;line-height:1.75;color:var(--ds-ink-soft);margin:0 0 1.15em;}
/* #3 ESPACIADO UNIVERSAL: margin-top mínimo entre bloques de contenido a CUALQUIER
   profundidad de wrapper de Gutenberg. Se usa :is() (NO :where()) para superar el
   reset `.dsx h1..h4/p{margin:0}` (0,1,1); esta regla queda en (0,2,0). Y apunta a
   los CONTENEDORES DE FLUJO reales de Gutenberg (.wp-block-group__inner-container /
   .is-layout-flow / columns), donde viven de verdad los h/p, no a `.wrap` (que solo
   contiene el inner-container). Los márgenes colapsan al mayor: no duplica. */
.dsx-main :is(.wrap, .wp-block-group__inner-container, .entry-content, .wp-block-column, [class*="is-layout-flow"], [class*="is-layout-constrained"]) > * + *{margin-top:36px;}
.dsx-main > *:not(.alignfull):not(.full) + *:not(.alignfull):not(.full){margin-top:36px;}
.dsx-main :where(h2){font-family:var(--ds-display);font-size:clamp(26px,3vw,36px);line-height:1.18;letter-spacing:-.02em;color:var(--ds-ink);margin:0 0 .5em;}
.dsx-main :where(h3){font-family:var(--ds-display);font-size:21px;line-height:1.26;color:var(--ds-ink);margin:1.5em 0 .45em;font-weight:600;}
.dsx-main :where(h4){font-family:var(--ds-display);font-size:18px;line-height:1.3;color:var(--ds-ink);margin:1.3em 0 .4em;font-weight:600;}
.dsx-main :where(ul,ol){margin:0 0 1.1em;padding-left:1.25em;}
.dsx-main :where(ul){list-style:disc;}
.dsx-main :where(ol){list-style:decimal;}
.dsx-main :where(li){font-family:var(--ds-sans);font-size:18.5px;line-height:1.7;color:var(--ds-ink-soft);margin-bottom:.4em;}
/* links SOLO dentro de texto (no en <a> estructurales tipo tarjeta) */
.dsx-main :where(p,li,h2,h3,h4,blockquote,figcaption,.ds-lead-p,.lede) a:not(.btn){color:var(--ds-tech);text-decoration:underline;text-underline-offset:2px;}
.dsx-main :where(blockquote){border-left:3px solid var(--ds-tech);padding-left:22px;margin:1.4em 0;color:var(--ds-ink);font-family:var(--ds-display);font-weight:500;}
/* neutraliza tamaños de fuente inline/preset viejos SOLO en contenido genérico (no componentes) */
.dsx-main :where(.has-small-font-size){font-size:17px;}
.dsx-main :where(.has-medium-font-size){font-size:18.5px;}
.dsx-main :where(.has-large-font-size){font-size:20px;}

/* blog: neutraliza tamaños inline viejos para lectura consistente (el .ds-article ya da la base) */
.dsx .ds-article .entry-content{font-size:19px;}
.dsx .ds-article .entry-content :where(p,li)[style*="font-size"]{font-size:inherit !important;}
.dsx .ds-article .entry-content :where(.has-small-font-size){font-size:16px;}
.dsx .ds-article .entry-content :where(.has-medium-font-size){font-size:19px;}
.dsx .ds-article .entry-content :where(.has-large-font-size){font-size:23px;}

/* --- 3) Tablas genéricas (contenido existente) al lenguaje visual del sistema --- */
.dsx-main .wp-block-table:not(.price-table):not(.compare-table) table,
.dsx .ds-article .entry-content .wp-block-table table{
  width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--ds-line);
  border-radius:var(--ds-radius);overflow:hidden;font-size:15.5px;font-family:var(--ds-sans);
}
.dsx-main .wp-block-table:not(.price-table):not(.compare-table) td,
.dsx .ds-article .entry-content .wp-block-table td{padding:13px 18px;border-top:1px solid var(--ds-line);color:var(--ds-ink-soft);vertical-align:top;}
.dsx-main .wp-block-table:not(.price-table):not(.compare-table) tr:first-child td,
.dsx .ds-article .entry-content .wp-block-table tr:first-child td{background:var(--ds-bg-alt);font-family:var(--ds-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ds-ink-faint);border-top:none;}
.dsx .wp-block-table figcaption{font-size:15.5px;color:var(--ds-ink-faint);margin-top:10px;line-height:1.6;}

/* ==========================================================
   FASE 2.2 — Cobertura completa de bloques Gutenberg del sitio
   (separator, button, cover, quote, embed, image caption).
   Basado en el inventario real de post_content de todo el sitio.
   ========================================================== */

/* --- wp:separator (380) --- */
.dsx-main .wp-block-separator,
.dsx .ds-article .wp-block-separator{border:0;border-top:1px solid var(--ds-line);background:none;height:0;max-width:100%;margin:2.2em auto;opacity:1;}
.dsx .wp-block-separator.is-style-dots{border-top:0;}

/* --- wp:button / wp:buttons (104) → sistema de botones --- */
.dsx .wp-block-buttons{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:1.2em 0;}
.dsx .wp-block-button__link{display:inline-flex;align-items:center;gap:8px;font-family:var(--ds-sans);font-weight:700;font-size:15.5px;line-height:1;padding:13px 25px;border-radius:999px!important;border:1px solid transparent;background:var(--ds-ink)!important;color:#fff!important;text-decoration:none!important;transition:background .15s ease,box-shadow .15s ease,border-color .15s ease;}
.dsx .wp-block-button__link:hover{background:var(--ds-tech)!important;box-shadow:0 8px 20px rgba(53,82,239,.28);}
/* variantes: secondary / outline */
.dsx .wp-block-button.btn-secondary .wp-block-button__link,
.dsx .wp-block-button.is-style-outline .wp-block-button__link{background:transparent!important;color:var(--ds-ink)!important;border-color:var(--ds-line)!important;}
.dsx .wp-block-button.btn-secondary .wp-block-button__link:hover,
.dsx .wp-block-button.is-style-outline .wp-block-button__link:hover{border-color:var(--ds-ink)!important;background:transparent!important;}
/* neutraliza fondos/colores de preset viejos (ámbar, etc.) */
.dsx .wp-block-button__link.has-background,.dsx .wp-block-button__link[class*="background-color"]{background:var(--ds-ink)!important;}
.dsx .wp-block-button__link[style*="border-radius"]{border-radius:999px!important;}

/* --- wp:cover (72) → callout on-palette (neutraliza bg lavanda #f6f1f9) --- */
.dsx-main .wp-block-cover,.dsx .ds-article .wp-block-cover{min-height:0!important;padding:0;border-radius:var(--ds-radius);overflow:hidden;color:var(--ds-ink);align-items:stretch;justify-content:flex-start;}
.dsx .wp-block-cover .wp-block-cover__background,.dsx .wp-block-cover .wp-block-cover__gradient-background{background:var(--ds-tech-soft)!important;opacity:1!important;}
.dsx .wp-block-cover img.wp-block-cover__image-background{display:none;}
.dsx .wp-block-cover .wp-block-cover__inner-container{width:100%;padding:26px 30px;color:var(--ds-ink);}
.dsx .wp-block-cover.is-light .wp-block-cover__inner-container,.dsx .wp-block-cover .wp-block-cover__inner-container :where(p,h2,h3,h4,li){color:var(--ds-ink)!important;}
.dsx .wp-block-cover .wp-block-cover__inner-container a{color:var(--ds-tech)!important;}

/* --- wp:quote (24) --- */
.dsx-main .wp-block-quote,.dsx .ds-article .wp-block-quote{border-left:3px solid var(--ds-tech);border-right:0;padding:6px 0 6px 24px;margin:1.6em 0;font-family:var(--ds-display);font-weight:500;color:var(--ds-ink);font-style:normal;}
.dsx .wp-block-quote cite,.dsx .wp-block-quote .wp-block-quote__citation{display:block;margin-top:10px;font-family:var(--ds-mono);font-size:13px;color:var(--ds-ink-faint);font-style:normal;font-weight:400;}

/* --- wp:embed (6) responsive --- */
.dsx .wp-block-embed{margin:1.6em 0;}
.dsx .wp-block-embed iframe{max-width:100%;width:100%;border-radius:var(--ds-radius);}
.dsx .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper{position:relative;aspect-ratio:16/9;}
.dsx .wp-block-embed.wp-embed-aspect-16-9 iframe{position:absolute;inset:0;height:100%;}

/* --- wp:image caption + alineaciones --- */
.dsx .wp-block-image figcaption{font-family:var(--ds-sans);font-size:15.5px;color:var(--ds-ink-faint);text-align:center;margin-top:8px;}
.dsx .wp-block-image.aligncenter{margin-left:auto;margin-right:auto;}
.dsx .wp-block-image.alignleft{float:left;margin:0 24px 16px 0;}
.dsx .wp-block-image.alignright{float:right;margin:0 0 16px 24px;}

/* --- [orbital_cluster] related links (2) — estilo ligero --- */
.dsx-main .orbital-cluster a,.dsx .ds-article .orbital-cluster a{color:var(--ds-tech);}

/* ---------- Mobile ---------- */
@media (max-width:1000px){
  .dsx .main-nav{position:absolute;top:76px;left:0;right:0;background:#fff;border-bottom:1px solid var(--ds-line);flex-direction:column;padding:12px 20px 20px;display:none;box-shadow:0 16px 32px rgba(18,19,26,.08);}
  .dsx .site-header.nav-open .main-nav{display:flex;align-items:stretch;}
  .dsx .main-nav > ul{flex-direction:column;align-items:stretch;gap:0;width:100%;}
  .dsx .main-nav .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;padding:0 0 8px 14px;min-width:0;}
  .dsx .nav-toggle{display:inline-flex;}
  .dsx .ds-section{padding:44px 0;}
  .dsx .hero-panel .wrap{grid-template-columns:1fr;}
  /* «Presupuesto en 24 h» es más largo que «Contactar»: con el logo a la
     izquierda y el icono de menú a la derecha, a 390px no cabe con el
     tamaño normal del botón (probado: desbordaba ~53px). Se reduce SOLO
     este botón, solo aquí — el resto de .btn-primary del sitio no cambia. */
  .dsx .header-cta{gap:7px;}
  .dsx #header-cta-contactar{padding:9px 13px;font-size:12.5px;}
  .dsx .nav-toggle{width:38px;height:38px;}
}
@media (max-width:560px){
  .dsx .wrap{padding:0 20px;}
}

/* ============================================================
   BLOG — listado (home.php / archive.php) y bloque service-cta.
   Fuente: blog-redesign-mockup. Sin fotos, cero gradientes, ancho 1200.
   ============================================================ */
.dsx .blog-hero{background:var(--ds-ink);color:#fff;padding:56px 0 120px;}
.dsx .blog-hero .eyebrow{color:rgba(255,255,255,.8);margin-bottom:14px;}
.dsx .blog-hero h1{font-family:var(--ds-display);font-size:clamp(34px,4.2vw,48px);line-height:1.1;margin:0 0 16px;max-width:19ch;color:#fff;letter-spacing:-.01em;}
.dsx .blog-hero p{font-size:17px;color:rgba(255,255,255,.75);max-width:52ch;line-height:1.6;margin:0;}

.dsx .blog-layout{display:grid;grid-template-columns:1fr 300px;gap:40px;margin-top:-72px;padding-bottom:80px;align-items:start;}
.dsx .post-list{display:flex;flex-direction:column;gap:16px;}
.dsx .post-card{background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:26px 26px 24px 24px;position:relative;overflow:hidden;transition:box-shadow .18s ease,transform .18s ease;}
.dsx .post-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;}
.dsx .post-card.cat-tech::before{background:var(--ds-tech);}
.dsx .post-card.cat-human::before{background:var(--ds-human);}
.dsx .post-card:hover{box-shadow:0 20px 40px -20px rgba(18,19,26,.14);transform:translateY(-2px);}
.dsx .post-card .body{padding-left:8px;}
.dsx .post-card .post-cat{font-family:var(--ds-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;display:block;text-decoration:none;}
.dsx .post-card.cat-tech .post-cat{color:var(--ds-tech);}
.dsx .post-card.cat-human .post-cat{color:var(--ds-human);}
.dsx .post-card h2{font-family:var(--ds-display);font-size:28px;margin:0 0 8px;line-height:1.28;}
.dsx .post-card h2 a{color:var(--ds-ink);text-decoration:none;}
.dsx .post-card h2 a:hover{color:var(--ds-tech);}
.dsx .post-card .post-excerpt{font-size:16px;color:var(--ds-ink-soft);line-height:1.62;margin:0 0 14px;}
.dsx .post-card .post-meta{display:flex;gap:14px;align-items:center;font-family:var(--ds-mono);font-size:11.5px;color:var(--ds-ink-faint);}
.dsx .post-card .post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ds-ink-faint);}
/* --- portadas del blog (2026-09-16): tarjeta con imagen a la izquierda y portada a ancho de columna en el post --- */
.dsx .post-card.has-cover{display:grid;grid-template-columns:236px minmax(0,1fr);gap:22px;align-items:center;padding:18px 26px 18px 18px;}
.dsx .post-card .post-cover{display:block;border-radius:12px;overflow:hidden;background:var(--ds-bg-alt);aspect-ratio:1200/630;}
.dsx .post-card .post-cover img{display:block;width:100%;height:100%;object-fit:cover;}
.dsx .post-card.has-cover .body{padding-left:0;min-width:0;}
.dsx .post-card.has-cover h2{font-size:24px;}
@media (max-width:640px){
  .dsx .post-card.has-cover{grid-template-columns:1fr;gap:14px;padding:16px 20px 20px 18px;}
  .dsx .post-card.has-cover h2{font-size:22px;}
}
.dsx .post-cover-single{display:block;width:100%;max-width:860px;box-sizing:border-box;margin:-40px auto 0;padding:0 24px;position:relative;left:auto;transform:none;z-index:1;}
.dsx .post-cover-single img{display:block;width:100%;height:auto;border-radius:var(--ds-radius);box-shadow:0 24px 48px -28px rgba(18,19,26,.35);}
.dsx .post-cover-single + .ds-article{padding-top:40px;}

.dsx .blog-layout .sidebar{display:flex;flex-direction:column;gap:20px;position:sticky;top:96px;}
.dsx .side-card{background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:22px;}
.dsx .side-card h2{font-family:var(--ds-mono);font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--ds-ink-faint);margin:0 0 16px;}
.dsx .cat-list{display:flex;flex-direction:column;gap:2px;}
.dsx .cat-list a{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:14.5px;color:var(--ds-ink);text-decoration:none;border-bottom:1px solid var(--ds-line);}
.dsx .cat-list a:last-child{border-bottom:none;}
.dsx .cat-list a span{font-family:var(--ds-mono);font-size:12px;color:var(--ds-ink-faint);}
.dsx .cat-list a:hover{color:var(--ds-tech);}
.dsx .tag-cloud{display:flex;flex-wrap:wrap;gap:8px;}
.dsx .tag-cloud a{font-family:var(--ds-mono);font-size:11.5px;color:var(--ds-ink-soft);background:var(--ds-bg-alt);padding:6px 12px;border-radius:999px;text-decoration:none;border:1px solid var(--ds-line);transition:background .12s ease,color .12s ease;}
.dsx .tag-cloud a:hover{background:var(--ds-tech-soft);color:var(--ds-tech);border-color:transparent;}
.dsx .side-card.side-cta{background:var(--ds-ink);color:#fff;border:none;}
.dsx .side-cta h2{color:rgba(255,255,255,.6);}
.dsx .side-cta p{font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.85);margin:0 0 16px;}
.dsx .side-cta a.btn{display:inline-block;background:#fff;color:var(--ds-ink)!important;font-family:var(--ds-sans);font-weight:700;font-size:13.5px;padding:10px 18px;border-radius:999px;text-decoration:none;}
.dsx .side-cta a.btn:hover{background:var(--ds-human-soft);}

.dsx .blog-pagination{margin-top:28px;}
.dsx .blog-pagination .nav-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;}
.dsx .blog-pagination .page-numbers{font-family:var(--ds-mono);font-size:13px;color:var(--ds-ink);border:1px solid var(--ds-line);border-radius:8px;padding:7px 12px;text-decoration:none;min-width:38px;text-align:center;}
.dsx .blog-pagination .page-numbers.current{background:var(--ds-ink);color:#fff;border-color:var(--ds-ink);}
.dsx .blog-pagination a.page-numbers:hover{border-color:var(--ds-tech);color:var(--ds-tech);}

@media (max-width:900px){
  .dsx .blog-layout{grid-template-columns:1fr;}
  .dsx .blog-layout .sidebar{position:static;}
}

/* --- bloque "Servicio relacionado" dentro del post (single.php) --- */
.dsx .service-cta{background:var(--ds-tech-soft);border-radius:var(--ds-radius);padding:26px 28px;margin:32px 0;position:relative;overflow:hidden;}
.dsx .service-cta .service-cta-bar{position:absolute;top:0;left:0;right:0;height:4px;display:flex;}
.dsx .service-cta .service-cta-bar span{flex:1;}
.dsx .service-cta .service-cta-bar span:first-child{background:var(--ds-tech);}
.dsx .service-cta .service-cta-bar span:last-child{background:var(--ds-human);}
.dsx .service-cta .tag{font-family:var(--ds-mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ds-tech);margin-bottom:8px;display:block;}
.dsx .service-cta .service-title{font-family:var(--ds-display);font-weight:600;font-size:19px;margin:0 0 8px;color:var(--ds-ink);line-height:1.25;}
.dsx .service-cta p{font-size:16px;color:var(--ds-ink-soft);margin:0 0 16px;line-height:1.55;}
.dsx .service-cta a.btn{display:inline-flex;align-items:center;gap:6px;background:var(--ds-ink);color:#fff!important;font-family:var(--ds-sans);font-weight:700;font-size:13.5px;padding:11px 20px;border-radius:999px;text-decoration:none;}
.dsx .service-cta a.btn:hover{background:var(--ds-tech);}

/* ============================================================
 * Calculadora-diagnóstico de precios (Tarifas) — 2026-07-18
 * Widget autocontenido, scopeado en .diag-calc. Tokens DS.
 * ============================================================ */
.dsx .diag-calc{max-width:none;width:100%;margin:0 0 8px;background:var(--ds-bg-alt);border:1px solid var(--ds-line);border-radius:var(--ds-radius);box-shadow:0 30px 60px -30px rgba(18,19,26,.16);overflow:hidden;font-family:var(--ds-sans);color:var(--ds-ink);}
.dsx .diag-calc .dc-head{padding:24px 30px 18px;border-bottom:1px solid var(--ds-line);}
.dsx .diag-calc .dc-eyebrow{display:inline-flex;align-items:center;gap:6px;font-family:var(--ds-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ds-ink-soft);margin-bottom:12px;}
.dsx .diag-calc .dc-eyebrow::before,.dsx .diag-calc .dc-eyebrow::after{content:"";width:6px;height:6px;border-radius:50%;}
.dsx .diag-calc .dc-eyebrow::before{background:var(--ds-tech);}
.dsx .diag-calc .dc-eyebrow::after{background:var(--ds-human);}
.dsx .diag-calc .dc-progress{display:flex;gap:6px;}
.dsx .diag-calc .dc-progress span{flex:1;height:4px;border-radius:2px;background:var(--ds-line);transition:background .25s ease;}
.dsx .diag-calc .dc-progress span.is-done{background:var(--ds-tech);}
.dsx .diag-calc .dc-body{padding:32px 30px 28px;min-height:270px;}
.dsx .diag-calc .dc-step{display:none;}
.dsx .diag-calc .dc-step.is-active{display:block;animation:dcFade .3s ease;}
@keyframes dcFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.dsx .diag-calc .dc-step h3{font-family:var(--ds-display);font-size:22px;margin:0 0 20px;line-height:1.3;color:var(--ds-ink);}
.dsx .diag-calc .dc-options{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));}
.dsx .diag-calc .dc-opt{border:1.5px solid var(--ds-line);border-radius:14px;padding:15px 18px;font-family:var(--ds-sans);font-size:15px;font-weight:600;color:var(--ds-ink);cursor:pointer;text-align:left;background:#fff;transition:border-color .15s ease,background .15s ease;width:100%;}
.dsx .diag-calc .dc-opt:hover{border-color:var(--ds-tech);background:var(--ds-tech-soft);}
.dsx .diag-calc .dc-opt.is-sel{border-color:var(--ds-tech);background:var(--ds-tech-soft);color:var(--ds-tech);}
.dsx .diag-calc .dc-opt small{display:block;font-weight:400;font-size:12.5px;color:var(--ds-ink-faint);margin-top:3px;}
.dsx .diag-calc .dc-opt.is-sel small{color:var(--ds-tech);opacity:.85;}
.dsx .diag-calc .dc-word{margin-top:6px;}
.dsx .diag-calc .dc-word-value{font-family:var(--ds-mono);font-size:32px;font-weight:600;color:var(--ds-ink);margin-bottom:10px;}
.dsx .diag-calc .dc-word-value span:last-child{font-size:14px;color:var(--ds-ink-faint);font-weight:400;}
.dsx .diag-calc .dc-slider{width:100%;accent-color:var(--ds-tech);height:6px;}
.dsx .diag-calc .dc-word-scale{display:flex;justify-content:space-between;font-family:var(--ds-mono);font-size:11px;color:var(--ds-ink-faint);margin-top:6px;}
.dsx .diag-calc .dc-nav{display:flex;justify-content:space-between;align-items:center;padding:0 30px 26px;}
.dsx .diag-calc .dc-btn{font-family:var(--ds-sans);font-weight:700;font-size:14px;padding:12px 22px;border-radius:999px;border:none;cursor:pointer;text-decoration:none;display:inline-block;}
.dsx .diag-calc .dc-back{background:transparent;color:var(--ds-ink-faint);}
.dsx .diag-calc .dc-back:hover{color:var(--ds-ink);}
.dsx .diag-calc .dc-next{background:var(--ds-ink);color:#fff;}
.dsx .diag-calc .dc-next:hover{background:var(--ds-tech);}
.dsx .diag-calc .dc-next:disabled{background:var(--ds-line);color:var(--ds-ink-faint);cursor:not-allowed;}
.dsx .diag-calc .dc-result{padding:32px 30px 28px;}
.dsx .diag-calc .dc-tag{font-family:var(--ds-mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ds-tech);display:block;margin-bottom:10px;}
.dsx .diag-calc .dc-rtitle{font-family:var(--ds-display);font-size:25px;margin:0 0 16px;line-height:1.2;color:var(--ds-ink);}
.dsx .diag-calc .dc-diagnosis{background:var(--ds-tech-soft);border-radius:16px;padding:19px 22px;font-size:15px;line-height:1.65;color:var(--ds-ink);margin-bottom:20px;}
.dsx .diag-calc .dc-diagnosis strong{color:var(--ds-tech);}
.dsx .diag-calc .dc-pricebox{border-top:1px solid var(--ds-line);margin-bottom:22px;}
.dsx .diag-calc .dc-price-row{display:flex;align-items:baseline;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--ds-line);font-size:14px;color:var(--ds-ink-soft);}
.dsx .diag-calc .dc-price-row.dc-surcharge{color:var(--ds-human);font-weight:600;}
.dsx .diag-calc .dc-price-row.dc-total{padding:16px 0;}
.dsx .diag-calc .dc-base{font-family:var(--ds-mono);font-size:16px;color:var(--ds-ink);}
.dsx .diag-calc .dc-amount{font-family:var(--ds-mono);font-size:30px;font-weight:600;color:var(--ds-ink);}
.dsx .diag-calc .dc-amount .dc-cur{font-size:16px;color:var(--ds-human);}
.dsx .diag-calc .dc-price-note{font-size:13px;color:var(--ds-ink-soft);line-height:1.55;margin:12px 0 0;}
.dsx .diag-calc .dc-cta-row{display:flex;gap:12px;flex-wrap:wrap;}
.dsx .diag-calc .dc-solid{background:var(--ds-ink);color:#fff!important;}
.dsx .diag-calc .dc-solid:hover{background:var(--ds-tech);}
.dsx .diag-calc .dc-restart{background:transparent;border:1.5px solid var(--ds-line);color:var(--ds-ink);}
.dsx .diag-calc .dc-legal{font-size:11.5px;color:var(--ds-ink-faint);margin-top:18px;line-height:1.5;}
@media(max-width:680px){.dsx .diag-calc .dc-options{grid-template-columns:1fr;}}
@media(max-width:520px){.dsx .diag-calc .dc-body,.dsx .diag-calc .dc-result{padding-left:20px;padding-right:20px;}.dsx .diag-calc .dc-head,.dsx .diag-calc .dc-nav{padding-left:20px;padding-right:20px;}}

/* ============================================================
 * Hero animado — Corrección en catalán (5901) — 2026-07-18
 * EXCEPCIÓN INTENCIONAL de paleta: colores de la SENYERA (rojo/dorado)
 * en vez de tech/human, por el contexto cultural de la página.
 * La palabra corregida usa el azul del sistema. Sin fotos, colores planos.
 * Congela en el estado final si reduce-motion está activo.
 * ============================================================ */
.dsx .hero-panel.hero-catalan .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding-top:48px;padding-bottom:60px;}
.dsx .hero-catalan-copy{min-width:0;}
.dsx .hero-catalan .eyebrow.on-dark::before{background:#C41E3A;}
.dsx .hero-catalan .eyebrow.on-dark::after{background:#F4C430;}
.dsx .hero-catalan .signal::before{background:#C41E3A;}
.dsx .hero-catalan .signal::after{background:#F4C430;}
.dsx .senyera-mock{--sy-red:#C41E3A;--sy-gold:#FBEBB8;background:var(--sy-gold);border-radius:16px;overflow:hidden;aspect-ratio:4/3;display:flex;flex-direction:column;box-shadow:0 30px 60px -30px rgba(0,0,0,.55);}
.dsx .senyera-mock .stripe{flex:1;position:relative;display:flex;align-items:center;}
.dsx .senyera-mock .stripe.red{background:var(--sy-red);}
.dsx .senyera-mock .stripe.gold{background:var(--sy-gold);}
.dsx .senyera-mock .stripe.gold .textline{margin:0 auto;width:80%;height:9px;border-radius:5px;background:rgba(18,19,26,.14);}
.dsx .senyera-mock .stripe.gold.active-line{padding:0 8%;}
.dsx .senyera-mock .word-swap{position:relative;display:inline-grid;font-family:var(--ds-sans);font-weight:700;font-size:clamp(14px,1.5vw,17px);}
.dsx .senyera-mock .word-swap span{grid-area:1/1;white-space:nowrap;}
.dsx .senyera-mock .w-before{color:var(--ds-ink);opacity:.55;text-decoration:wavy underline var(--sy-red);text-underline-offset:3px;animation:senyeraBefore 6s ease-in-out infinite;}
.dsx .senyera-mock .w-after{color:var(--ds-tech);opacity:0;animation:senyeraAfter 6s ease-in-out infinite;}
@keyframes senyeraBefore{0%,30%{opacity:.55;}38%,90%{opacity:0;}98%,100%{opacity:.55;}}
@keyframes senyeraAfter{0%,30%{opacity:0;}38%,90%{opacity:1;}98%,100%{opacity:0;}}
@media (prefers-reduced-motion: reduce){.dsx .senyera-mock .w-before{animation:none;opacity:0;}.dsx .senyera-mock .w-after{animation:none;opacity:1;}}
@media(max-width:820px){.dsx .hero-panel.hero-catalan .wrap{grid-template-columns:1fr;gap:30px;}.dsx .senyera-mock{max-width:440px;}}

/* ---------- Guías / contenido pilar (Fase 3) ---------- */
.dsx .ds-prose{max-width:760px;margin-left:auto;margin-right:auto;}
.dsx .ds-prose h2{font-size:26px;margin-top:14px;}
.dsx .ds-prose h3{font-size:20px;}
.dsx .ds-prose img{border-radius:var(--ds-radius);margin:10px 0;height:auto;}
.dsx .ds-prose ol,.dsx .ds-prose ul{padding-left:1.2em;}

/* ============================================================
 * Guías pilar (blog informacional) — TOC + guías relacionadas — 2026-07-19
 * ============================================================ */
.dsx .guide-toc{background:var(--ds-bg-alt);border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:22px 26px;margin:10px 0 34px;}
.dsx .guide-toc-title{font-family:var(--ds-mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ds-ink-soft);margin:0 0 14px;}
.dsx .guide-toc ol{margin:0;padding-left:22px;}
.dsx .guide-toc ol > li{margin-bottom:10px;color:var(--ds-ink-faint);}
.dsx .guide-toc ol > li > a{color:var(--ds-tech);text-decoration:none;font-weight:600;font-size:15px;line-height:1.4;}
.dsx .guide-toc ul{list-style:disc;margin:8px 0 2px;padding-left:20px;}
.dsx .guide-toc ul li{margin-bottom:6px;color:var(--ds-ink-faint);}
.dsx .guide-toc ul a{color:var(--ds-ink-soft);text-decoration:none;font-weight:500;font-size:14px;line-height:1.4;}
.dsx .guide-toc a:hover{text-decoration:underline;color:var(--ds-tech);}
.dsx .guides-related{margin:44px 0 8px;border-top:1px solid var(--ds-line);padding-top:32px;}
.dsx .guides-related .eyebrow{margin-bottom:6px;}
.dsx .guides-related-h{font-family:var(--ds-display);font-size:24px;margin:0 0 22px;color:var(--ds-ink);}
.dsx .guides-related .related-grid{gap:16px;}
.dsx .guide-rcard{display:flex;flex-direction:column;justify-content:space-between;gap:14px;text-decoration:none;min-height:120px;}
.dsx .guide-rcard h3{font-size:17px;line-height:1.35;margin:0;color:var(--ds-ink);}
.dsx .guide-rlink{font-family:var(--ds-sans);font-weight:700;font-size:13.5px;color:var(--ds-tech);}
.dsx .guides-related .guide-rcard,.dsx .guides-related .guide-rcard h3,.dsx .guides-related .guide-rlink{text-decoration:none;}
.dsx .guides-related .guide-rcard:hover h3{color:var(--ds-tech);}
/* Footer: títulos de columna como NO-heading (navegación, no contenido) — evita salto H2->H4 site-wide (audit 2026-07-19) */
.dsx .footer-col .footer-title{font-family:var(--ds-mono);font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ds-ink-faint);margin:0 0 18px;}


/* ---------- Hero Empresas: documento + candado que se cierra (confidencialidad / NDA) ---------- */
.dsx .hero-panel.hero-empresas .wrap{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:60px;}
.dsx .hero-empresas-copy{min-width:0;}
.dsx .doc-lock-mock{background:#fff;border-radius:16px;padding:40px 34px;position:relative;display:flex;flex-direction:column;justify-content:center;gap:14px;width:100%;max-width:400px;min-height:330px;justify-self:center;}
.dsx .doc-lock-mock .doc-line{height:9px;border-radius:5px;background:#E5E7EB;}
.dsx .doc-lock-mock .doc-line.w1{width:88%;}
.dsx .doc-lock-mock .doc-line.w2{width:65%;}
.dsx .doc-lock-mock .doc-line.w3{width:78%;}
.dsx .doc-lock-mock .doc-line.w4{width:50%;}
.dsx .doc-lock-mock .lock-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
.dsx .doc-lock-mock .lock{position:relative;width:64px;height:56px;}
.dsx .doc-lock-mock .lock .shackle{position:absolute;top:0;left:12px;width:40px;height:34px;border:7px solid var(--ds-tech);border-bottom:none;border-radius:22px 22px 0 0;transform-origin:8px 30px;animation:heroEmpShackle 5s ease-in-out infinite;}
.dsx .doc-lock-mock .lock .body{position:absolute;bottom:0;left:0;width:64px;height:34px;background:var(--ds-ink);border-radius:8px;}
.dsx .doc-lock-mock .lock .keyhole{position:absolute;bottom:11px;left:28px;width:8px;height:8px;border-radius:50%;background:var(--ds-human);opacity:0;animation:heroEmpKeyhole 5s ease-in-out infinite;}
.dsx .doc-lock-mock .lock .badge{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);font-family:var(--ds-mono);font-size:10.5px;color:var(--ds-tech);background:var(--ds-tech-soft);padding:4px 10px;border-radius:20px;white-space:nowrap;opacity:0;animation:heroEmpBadge 5s ease-in-out infinite;}
@keyframes heroEmpShackle{0%,20%{transform:rotate(-35deg) translateX(-6px);}40%,100%{transform:rotate(0deg) translateX(0);}}
@keyframes heroEmpKeyhole{0%,35%{opacity:0;}45%,100%{opacity:1;}}
@keyframes heroEmpBadge{0%,40%{opacity:0;transform:translateX(-50%) translateY(4px);}50%,100%{opacity:1;transform:translateX(-50%) translateY(0);}}
@media (prefers-reduced-motion: reduce){.dsx .doc-lock-mock .lock .shackle{animation:none;transform:rotate(0deg) translateX(0);}.dsx .doc-lock-mock .lock .keyhole{animation:none;opacity:1;}.dsx .doc-lock-mock .lock .badge{animation:none;opacity:1;transform:translateX(-50%) translateY(0);}}
@media(max-width:820px){.dsx .hero-panel.hero-empresas .wrap{grid-template-columns:1fr;gap:30px;}.dsx .doc-lock-mock{max-width:360px;}}
/* ---------- Ghostwriter hero — manuscrito que se escribe (reconstruido 2026-07-20) ---------- */
.dsx .hero-panel.hero-ghost .wrap{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:60px;}
.dsx .hero-ghost .hero-ghost-copy{min-width:0;}
.dsx .hero-ghost .ghost-manuscript{position:relative;padding:36px 40px;border:1px solid rgba(255,255,255,.14);border-radius:var(--ds-radius);background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:hidden;}
.dsx .hero-ghost .ghost-manuscript::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--ds-tech),var(--ds-human));opacity:.85;}
.dsx .hero-ghost .ghost-manuscript .gline{height:9px;border-radius:6px;background:rgba(255,255,255,.18);margin:0 0 18px;width:0;animation:ghostwrite 7s ease-in-out infinite;}
.dsx .hero-ghost .ghost-manuscript .gline:nth-child(1){--gw:96%;animation-delay:.15s;}
.dsx .hero-ghost .ghost-manuscript .gline:nth-child(2){--gw:88%;animation-delay:.5s;}
.dsx .hero-ghost .ghost-manuscript .gline:nth-child(3){--gw:93%;animation-delay:.85s;}
.dsx .hero-ghost .ghost-manuscript .gline:nth-child(4){--gw:71%;animation-delay:1.2s;}
.dsx .hero-ghost .ghost-manuscript .gline:nth-child(5){--gw:84%;animation-delay:1.55s;}
@keyframes ghostwrite{0%{width:0;opacity:0;}4%{opacity:1;}14%{width:var(--gw);}82%{width:var(--gw);opacity:1;}92%,100%{width:var(--gw);opacity:0;}}
.dsx .hero-ghost .ghost-manuscript .ghost-sign{margin:26px 0 0;font-family:var(--ds-display);font-style:italic;font-size:23px;line-height:1;color:rgba(255,255,255,.92);opacity:0;animation:ghostsign 7s ease-in-out infinite;animation-delay:.15s;}
@keyframes ghostsign{0%,28%{opacity:0;transform:translateY(6px);}36%,82%{opacity:1;transform:none;}92%,100%{opacity:0;}}
@media (max-width:860px){
  .dsx .hero-panel.hero-ghost .wrap{grid-template-columns:1fr;gap:30px;}
  .dsx .hero-ghost .ghost-manuscript{max-width:420px;}
}
@media (prefers-reduced-motion:reduce){
  .dsx .hero-ghost .ghost-manuscript .gline{animation:none;width:var(--gw);opacity:.6;}
  .dsx .hero-ghost .ghost-manuscript .ghost-sign{animation:none;opacity:.9;transform:none;}
}
/* ---------- Banda de tiendas/plataformas (portado de Gutter, 2026-07-20 · v2) ---------- */
.dsx .stores-band{border-top:1px solid var(--ds-line);border-bottom:1px solid var(--ds-line);background:#fff;}
.dsx .stores-band .wrap{padding:30px 0;}
.dsx .stores-band .store-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:22px 30px;}
.dsx .stores-band .store{display:inline-flex;align-items:center;gap:11px;color:var(--ds-ink-soft);}
.dsx .stores-band .store svg{height:27px;width:auto;display:block;flex:none;}
.dsx .stores-band .store .nm{font-weight:600;font-size:15px;letter-spacing:.005em;white-space:nowrap;line-height:1.05;text-transform:none;color:var(--ds-ink-soft);}
.dsx .stores-band .store .nm small{display:block;font-weight:400;font-size:10.5px;letter-spacing:.06em;color:var(--ds-ink-faint);text-transform:uppercase;margin-top:2px;}
@media (max-width:820px){.dsx .stores-band .store-row{justify-content:center;gap:20px 30px;}}
/* ---------- Caja discreta "hazlo tú mismo" -> Gutter (2026-07-21) ---------- */

/* --- Sección a dos columnas (.ds-2col) — additive, 2026-08-01 ---
   Grid propio en vez del flex del núcleo: el tema fuerza .dsx .wp-block-columns{flex-wrap:wrap}
   y .dsx .wp-block-column{min-width:min(100%,300px)}, y dos columnas al 50% + gap desbordan
   y se apilan. Con grid el reparto es exacto y no depende de esa cadena. */
.dsx .ds-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 48px;align-items:start;}
.dsx .ds-2col>.wp-block-column{min-width:0;flex-basis:auto;margin:0;}
.dsx .ds-2col .diy-gutter{margin:28px 0 0;max-width:none;}
@media(max-width:860px){.dsx .ds-2col{grid-template-columns:1fr;gap:0;}}

.dsx .diy-gutter{margin:40px 0;background:linear-gradient(135deg,#00AEEF,#E5157A);padding:2px;border-radius:12px;border:none;max-width:760px;}
.dsx .diy-gutter-inner{background:#fff;border-radius:10px;padding:20px 22px;}
.dsx .diy-gutter-brand{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:17px;color:#000;display:block;line-height:1;margin-bottom:11px;letter-spacing:-.01em;}
.dsx .diy-gutter-brand .dot{color:#E5157A;}
.dsx .diy-gutter p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ds-ink-soft);}
.dsx .diy-gutter strong{color:var(--ds-ink);font-weight:600;}
.dsx .diy-gutter a{color:#E5157A;font-weight:700;text-decoration:none;white-space:nowrap;}

/* --- Muestras de maquetación (.sample-grid) — additive, 2026-07-22 --- */
.dsx .sample-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.dsx .sample-card{background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius-sm);padding:14px;transition:box-shadow .18s ease,transform .18s ease;}
.dsx .sample-card:hover{box-shadow:0 14px 28px rgba(18,19,26,.08);transform:translateY(-3px);}
.dsx .sample-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;object-position:center;background:var(--ds-bg-alt);border-radius:6px;}
.dsx .sample-card figcaption{margin-top:12px;font-family:var(--ds-mono);font-size:11.5px;line-height:1.35;letter-spacing:.02em;color:var(--ds-ink-soft);text-align:center;}
.dsx figure.sample-card{margin:0;}
@media (max-width:1000px){.dsx .sample-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:620px){.dsx .sample-grid{grid-template-columns:repeat(2,1fr);gap:14px;}}

/* ---------- Hero Corrección de Estilo (1631): párrafo que se corrige solo — 2026-07-23 ----------
   Fuente: ~/Downloads/hero-estilo-mockup-v2 (1).html. Mapeado a tokens ds.
   4 correcciones escalonadas sobre un párrafo real: 1 recorte + 3 sustituciones. Sin fotos, sin gradientes. */
.dsx .hero-panel.hero-estilo .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:60px;}
.dsx .hero-estilo-copy{min-width:0;}
.dsx .style-mock{background:#fff;border-radius:var(--ds-radius);padding:34px 32px;display:flex;flex-direction:column;gap:18px;}
.dsx .style-mock .style-para{font-family:var(--ds-sans);font-size:17px;line-height:1.85;color:var(--ds-ink-soft);margin:0;}
/* A) palabra redundante: se encoge y desaparece */
.dsx .style-mock .w-cut{display:inline-block;overflow:hidden;white-space:nowrap;color:var(--ds-human);text-decoration:wavy underline var(--ds-human);text-underline-offset:3px;max-width:80px;opacity:1;animation:estiloCut 9s ease-in-out infinite;}
@keyframes estiloCut{0%,10%{max-width:80px;opacity:1;}20%,85%{max-width:0;opacity:0;}96%,100%{max-width:80px;opacity:1;}}
/* B) palabra que se transforma en otra (overlay antes/después) */
.dsx .style-mock .w-swap{position:relative;display:inline-grid;vertical-align:baseline;font-weight:600;}
.dsx .style-mock .w-swap span{grid-area:1/1;white-space:nowrap;}
.dsx .style-mock .w-before{color:var(--ds-ink-faint);text-decoration:wavy underline var(--ds-human);text-underline-offset:3px;animation:estiloBefore 9s ease-in-out infinite;}
.dsx .style-mock .w-after{color:var(--ds-tech);opacity:0;animation:estiloAfter 9s ease-in-out infinite;}
.dsx .style-mock .w-swap.d2 .w-before,.dsx .style-mock .w-swap.d2 .w-after{animation-delay:2.2s;}
.dsx .style-mock .w-swap.d3 .w-before,.dsx .style-mock .w-swap.d3 .w-after{animation-delay:4.4s;}
@keyframes estiloBefore{0%,10%{opacity:1;}20%,85%{opacity:0;}96%,100%{opacity:1;}}
@keyframes estiloAfter{0%,10%{opacity:0;}20%,85%{opacity:1;}96%,100%{opacity:0;}}
.dsx .style-mock .style-status{display:flex;align-items:center;gap:8px;font-family:var(--ds-mono);font-size:12px;color:var(--ds-ink-faint);padding-top:16px;border-top:1px dashed var(--ds-line);}
.dsx .style-mock .style-status .dot{width:5px;height:5px;border-radius:50%;background:var(--ds-tech);flex:none;animation:estiloPulse 1.4s ease-in-out infinite;}
@keyframes estiloPulse{0%,100%{opacity:.3;}50%{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .dsx .style-mock .w-cut{animation:none;max-width:0;opacity:0;}
  .dsx .style-mock .w-before{animation:none;opacity:0;}
  .dsx .style-mock .w-after{animation:none;opacity:1;}
  .dsx .style-mock .style-status .dot{animation:none;opacity:1;}
}
@media (max-width:860px){.dsx .hero-panel.hero-estilo .wrap{grid-template-columns:1fr;gap:30px;}.dsx .style-mock{max-width:520px;}}

/* ---------- WPForms: tamaño de etiquetas — 2026-07-23 ----------
   OJO: `.dsx .wpforms-field-label{font-size:12.5px}` (arriba) es CÓDIGO MUERTO: pierde contra
   `div.wpforms-container-full .wpforms-field-label` (0,2,1 > 0,2,0), que resuelve el tamaño con
   la variable de WPForms. La palanca REAL son las variables, no esa regla. Sin !important. */
.dsx .wpforms-container{
  --wpforms-label-size-font-size:14px;            /* era 16px */
  --wpforms-label-size-line-height:17px;          /* era 19px */
  --wpforms-label-size-sublabel-font-size:12px;   /* era 14px (descripción bajo el campo) */
  --wpforms-label-size-sublabel-line-height:15px; /* era 17px */
}

/* ---------- HERO GALERADAS 3394 — 2026-07-23 (additive) ----------
   Corrección de pruebas/galeradas: pila de pruebas impresas; la de arriba
   recibe una marca de galerada, se confirma "Revisada" y se desliza fuera.
   Fuente: ~/Downloads/hero-galeradas-mockup-v2.html. Mapeado a tokens ds.
   Keyframes prefijados gal* y selectores bajo .galeradas-mock (sin colisión
   con .doc-mock/.senyera-mock/.style-mock). */
.dsx .hero-panel.hero-galeradas .wrap{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:60px;}
.dsx .galeradas-copy{min-width:0;}
.dsx .galeradas-mock{position:relative;width:100%;max-width:460px;margin:0 auto;aspect-ratio:4/3.1;}
.dsx .galeradas-mock .proof-page{position:absolute;inset:0;background:#fff;border-radius:14px;padding:26px 24px;display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 40px -24px rgba(18,19,26,.35);}
.dsx .galeradas-mock .proof-page::after{content:"";position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 22px 22px 0;border-color:transparent var(--ds-line) transparent transparent;border-radius:0 14px 0 0;}
.dsx .galeradas-mock .proof-page.back{transform:translate(10px,10px) rotate(2deg);opacity:.55;z-index:1;}
.dsx .galeradas-mock .proof-page.front{z-index:2;animation:galPageCycle 8s ease-in-out infinite;}
@keyframes galPageCycle{0%,55%{transform:translate(0,0) rotate(0deg);opacity:1;}75%{transform:translate(120px,-40px) rotate(14deg);opacity:0;}76%,100%{transform:translate(0,0) rotate(0deg);opacity:1;}}
.dsx .galeradas-mock .pdf-badge{align-self:flex-start;font-family:var(--ds-mono);font-size:15px;font-weight:700;letter-spacing:.03em;color:#fff;background:var(--ds-ink);padding:5px 12px;border-radius:6px;margin-bottom:4px;}
.dsx .galeradas-mock .pg-line{height:7px;border-radius:4px;background:var(--ds-line);}
.dsx .galeradas-mock .pg-line.w1{width:88%;}
.dsx .galeradas-mock .pg-line.w2{width:64%;}
.dsx .galeradas-mock .pg-line.w3{width:76%;}
.dsx .galeradas-mock .pg-line.w4{width:50%;}
.dsx .galeradas-mock .mark{position:absolute;top:63px;left:34%;display:flex;align-items:center;gap:3px;opacity:0;animation:galMarkFade 8s ease-in-out infinite;}
.dsx .galeradas-mock .mark .circle{width:24px;height:15px;border:2px solid var(--ds-human);border-radius:50%;}
.dsx .galeradas-mock .mark .caret{font-family:var(--ds-mono);font-size:10px;font-weight:700;color:var(--ds-human);}
@keyframes galMarkFade{0%,10%{opacity:0;}20%,42%{opacity:1;}50%,100%{opacity:0;}}
.dsx .galeradas-mock .pg-check{position:absolute;bottom:22px;right:24px;font-family:var(--ds-mono);font-size:11px;font-weight:600;color:var(--ds-tech);display:flex;align-items:center;gap:4px;opacity:0;animation:galCheckIn 8s ease-in-out infinite;}
.dsx .galeradas-mock .pg-check::before{content:"\2713";}
@keyframes galCheckIn{0%,44%{opacity:0;}50%,54%{opacity:1;}60%,100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){
  .dsx .galeradas-mock .proof-page.front{animation:none;}
  .dsx .galeradas-mock .mark{animation:none;opacity:0;}
  .dsx .galeradas-mock .pg-check{animation:none;opacity:0;}
}
@media (max-width:860px){.dsx .hero-panel.hero-galeradas .wrap{grid-template-columns:1fr;gap:30px;}.dsx .galeradas-mock{max-width:420px;}}
.dsx .ds-updated{max-width:760px;margin:0 auto;padding-top:26px;font-family:var(--ds-mono);font-size:13px;color:var(--ds-ink-faint);}

/* ---------- reseña citada dentro de una entrada ----------
   Solo en el blog: las páginas de servicio llevan el widget real de Trustindex
   y no citan a mano. Aquí la cita ES la única prueba social de la entrada, así
   que se le da forma propia en vez de dejarla con el <blockquote> genérico de
   WordPress, que la hacía parecer una cita del texto y no un testimonio.

   Reutiliza el patrón del sistema —barra de acento, fondo tenue— en el ámbar de
   lo humano (--ds-human), que es el color con el que el sistema marca lo que
   dice una persona, frente al índigo de lo técnico.

   El ámbito es .ds-article y NO .dsx-main: ese contenedor solo existe en las
   páginas (page-ds.php). En las entradas, single.php monta .dsx >
   article.ds-post > .ds-article, sin .dsx-main, así que un selector colgado de
   ahí no casa con nada — y no avisa: la regla se carga, se ve en el navegador
   y sencillamente no pinta.

   Hacen falta las tres clases (0,3,1) para ganarle a
   `.dsx .ds-article .wp-block-quote{border-left:3px solid var(--ds-tech)}`,
   que es (0,3,0) y le imponía el índigo al borde. */
.dsx .ds-article blockquote.resena{background:var(--ds-human-soft);border-left:3px solid var(--ds-human);border-radius:0 var(--ds-radius-sm) var(--ds-radius-sm) 0;padding:22px 26px;margin:1.6em 0;font-family:var(--ds-sans);font-weight:400;color:var(--ds-ink);}
.dsx .ds-article blockquote.resena p{font-size:17px;line-height:1.6;font-style:italic;color:var(--ds-ink);margin:0;}
.dsx .ds-article blockquote.resena cite{display:block;margin-top:12px;font-family:var(--ds-mono);font-size:12.5px;font-style:normal;letter-spacing:.04em;color:#8a5b12;}
.dsx .ds-article blockquote.resena cite strong{font-weight:600;color:inherit;}
/* Las cinco estrellas se pintan con CSS: no son una imagen ni una fuente de
   iconos, y así no dependen de nada externo ni se cuelan en el texto copiado. */
.dsx .ds-article blockquote.resena cite::before{content:"★★★★★";display:block;margin-bottom:5px;font-size:13px;letter-spacing:2px;color:var(--ds-human);}

/* ── Clientes (4058): tarjetas de caso con logotipo ─────────────────────────
   Los logotipos son CONTENIDO, no adorno: son la prueba de con quién se ha
   trabajado. Misma excepción a la regla de «cero fotografía» que .sample-card
   en Maquetación de libros — funcional sí, decorativo no.

   Los siete PNG ya vienen normalizados a 183x56 desde 2022, así que la caja
   del logotipo fija esa altura y el ancho se deja libre: si algún día se sube
   uno con otra proporción, object-fit lo encaja en vez de deformarlo o de
   sacarlo tres veces más grande que el resto.

   La rejilla es de 2 columnas, no de 3: cada tarjeta lleva dos párrafos de
   texto real y a 3 columnas la línea de lectura se queda en nada. */
.dsx .client-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.dsx .client-card{background:#fff;border:1px solid var(--ds-line);
  border-radius:var(--ds-radius);padding:30px 28px;
  transition:transform .18s ease,box-shadow .18s ease;}
.dsx .client-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(18,19,26,.08);}
.dsx .client-logo{height:56px;display:flex;align-items:center;margin-bottom:22px;}
.dsx .client-logo img{max-height:56px;width:auto;max-width:100%;
  object-fit:contain;object-position:left center;display:block;}
/* El primer párrafo pega con el logotipo; los siguientes respiran. El margin-top
   genérico de 36px (línea 559) es para bloques de sección, aquí sobra. */
.dsx .client-card p{margin-top:14px;color:var(--ds-ink-soft);}
.dsx .client-card p:first-of-type{margin-top:0;}
@media (max-width:820px){
  .dsx .client-grid{grid-template-columns:1fr;gap:18px;}
  .dsx .client-card{padding:26px 22px;}
}

/* ── Negritas sobre fondo oscuro ────────────────────────────────────────────
   El tema padre pinta TODAS las negritas de azul marino (`b, strong` →
   rgb(24,49,83)). Sobre el fondo del hero (#12131A) eso da un contraste de
   1.3:1: el texto está ahí y no se lee.

   No se había visto porque hasta ahora ningún hero del sistema llevaba
   negritas dentro del .lede — el de clientes es el primero. Se arregla para
   todos los bloques oscuros, no solo para esta página, porque el mismo texto
   se puede pegar mañana en cualquier otro hero o en el CTA de cierre. */
.dsx .hero-panel strong,.dsx .hero-panel b,
.dsx .cta-banner strong,.dsx .cta-banner b{color:#fff;}

/* ---------- Tarjetas de precio por servicio (Tarifas, 2026-08-14) ----------
   3 tarjetas en fila (IA / ortotipográfica / ortotipográfica y estilo), la 3ª
   destacada como recomendada con el mismo lenguaje visual que .matrix.featured
   (fondo/borde índigo + badge). Icono reutiliza la caja de .service-card .ic.
   Checklist con marca ✓/✗ en vez de las pills de .compare-table (aquí es una
   lista de una sola tarjeta, no una comparativa fila a fila). */
.dsx .pricing-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.dsx .plan-card{background:#fff;border:1px solid var(--ds-line);border-radius:var(--ds-radius);
  padding:34px 28px;display:flex;flex-direction:column;}
.dsx .plan-card.featured{background:var(--ds-tech-soft);border-color:var(--ds-tech);}
.dsx .plan-card .plan-badge{align-self:flex-start;margin-bottom:14px;background:var(--ds-ink);
  color:#fff;font-family:var(--ds-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;padding:5px 14px;border-radius:999px;white-space:nowrap;}
.dsx .plan-card .ic{width:40px;height:40px;border-radius:10px;background:var(--ds-tech-soft);
  display:flex;align-items:center;justify-content:center;color:var(--ds-tech);margin-bottom:16px;}
.dsx .plan-card.featured .ic{background:#fff;}
.dsx .plan-card .ic svg{width:20px;height:20px;}
.dsx .plan-card h3{font-family:var(--ds-display);font-size:21px;font-weight:600;
  letter-spacing:-.01em;color:var(--ds-ink);margin-bottom:4px;}
.dsx .plan-card .plan-sub{font-size:16px;color:var(--ds-ink-soft);margin-bottom:14px;line-height:1.4;}
.dsx .plan-card .plan-desc{font-size:17px;color:var(--ds-ink-soft);line-height:1.6;margin-bottom:22px;}
.dsx .plan-card .plan-price{font-family:var(--ds-mono);font-size:30px;font-weight:600;
  color:var(--ds-ink);line-height:1;}
.dsx .plan-card .plan-price .from{font-family:var(--ds-sans);font-size:14.5px;font-weight:500;
  color:var(--ds-ink-faint);margin-right:4px;}
.dsx .plan-card .plan-price-note{font-size:12.5px;color:var(--ds-ink-faint);margin-top:6px;}
.dsx .plan-card .plan-list{list-style:none;margin:22px 0 0;padding:18px 0 0;
  border-top:1px solid var(--ds-line);display:flex;flex-direction:column;gap:11px;}
.dsx .plan-card.featured .plan-list{border-top-color:rgba(53,82,239,.18);}
.dsx .plan-card .plan-list li{display:flex;align-items:flex-start;gap:10px;font-size:16px;
  line-height:1.5;color:var(--ds-ink-soft);}
.dsx .plan-card .plan-list li .mk{flex:0 0 auto;width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;margin-top:1px;}
.dsx .plan-card .plan-list li.yes .mk{background:var(--ds-tech-soft);color:var(--ds-tech);}
.dsx .plan-card.featured .plan-list li.yes .mk{background:#fff;}
.dsx .plan-card .plan-list li.no{color:var(--ds-ink-faint);}
.dsx .plan-card .plan-list li.no .mk{background:var(--ds-bg-alt);color:var(--ds-ink-faint);}
.dsx .plan-card .plan-foot{margin-top:auto;padding-top:18px;font-size:12.5px;
  color:var(--ds-ink-faint);line-height:1.55;}
@media (max-width:860px){.dsx .pricing-cards{grid-template-columns:1fr;}}

/* Botón flotante de WhatsApp (15/09/2026). Vive FUERA de .dsx (se pinta en wp_footer, ya cerrado el
   contenedor — ver footer-ds.php), así que no hereda las variables --ds-*: color fijo del verde oficial
   de WhatsApp, que es justo lo que conviene aquí, se reconoce igual en cualquier página sea cual sea su
   paleta. No se ve en el aula (whatsapp-float.php ya lo comprueba en PHP, esto es solo por si acaso). */
.wa-float{position:fixed;right:20px;bottom:96px;z-index:120;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:none;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.22);transition:transform .15s ease,box-shadow .15s ease;
  text-decoration:none;}
/* display:none por defecto (24-sep-2026): el horario laboral (9-19h Madrid)
   lo activa un script en pie de pagina, ver whatsapp-float.php. */
.wa-float:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.28);}
.wa-float:focus-visible{outline:2px solid #128C7E;outline-offset:3px;}
@media (max-width:480px){.wa-float{right:14px;bottom:88px;width:52px;height:52px;}}

/* ---------- Sello «Garantía de corrección» (2026-08-31) ----------
   Componente del sitio principal (no del aula). Solo tokens ya existentes:
   índigo --ds-tech, ámbar --ds-human, tinta --ds-ink y Space Grotesk
   (--ds-display) en el título. Una sola vez por página, junto al CTA.
   El contenido se coloca en la banda 15%–68% del escudo, que es donde los
   lados son rectos: por debajo la figura se estrecha hacia la punta y el
   texto se saldría del contorno ámbar. */
.dsx .sello-garantia{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin:56px auto;max-width:400px;}
.dsx .sello-escudo{position:relative;width:176px;flex:none;}
.dsx .sello-forma{display:block;width:100%;height:auto;overflow:visible;}
.dsx .sello-forma polygon{fill:none;stroke-linejoin:round;}
.dsx .sello-borde-ext{stroke:var(--ds-tech);stroke-width:2.6;}
.dsx .sello-borde-int{stroke:var(--ds-human);stroke-width:1.4;}
.dsx .sello-contenido{position:absolute;top:20%;bottom:34%;left:11%;right:11%;display:flex;flex-direction:column;align-items:center;}
.dsx .sello-marca{font-family:var(--ds-mono);font-size:8px;line-height:1;letter-spacing:.13em;text-transform:uppercase;color:var(--ds-ink-faint);}
.dsx .sello-nucleo{margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:9px;}
.dsx .sello-check{display:block;width:30px;height:30px;flex:none;}
.dsx .sello-check circle{fill:none;stroke:var(--ds-tech);stroke-width:1.9;}
.dsx .sello-check path{fill:none;stroke:var(--ds-tech);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.dsx .sello-titulo{font-family:var(--ds-display);font-weight:600;font-size:13px;line-height:1.24;letter-spacing:.01em;text-transform:uppercase;color:var(--ds-ink);}
.dsx .sello-condicion{font-size:14px;line-height:1.55;color:var(--ds-ink-soft);max-width:360px;}

/* Dentro del banner oscuro de CTA el sello invierte tinta y contorno. */
.dsx .cta-banner .sello-garantia .sello-marca{color:rgba(255,255,255,.62);}
.dsx .cta-banner .sello-garantia .sello-titulo{color:#fff;}
.dsx .cta-banner .sello-garantia .sello-condicion{color:rgba(255,255,255,.82);}
.dsx .cta-banner .sello-borde-ext{stroke:#fff;}
.dsx .cta-banner .sello-check circle,.dsx .cta-banner .sello-check path{stroke:#fff;}

@media (max-width:640px){
  .dsx .sello-garantia{margin:44px auto;}
  .dsx .sello-escudo{width:158px;}
  .dsx .sello-titulo{font-size:12px;}
}

/* --- Texto a dos columnas en pilares (2026-09-17; piloto en /correccion-de-estilo/, aprobado y
   extendido a todas las páginas de la plantilla page-ds). Bajo cada .section-head los párrafos van
   sueltos a todo el ancho del .wrap (1.136 px): en monitores grandes salen líneas de 150+ caracteres.
   Solo entra en columnas el contenedor que tiene AL MENOS DOS párrafos directos (:has): un párrafo
   suelto de dos o tres líneas partido en dos columnas se leía peor. Dentro, fluyen párrafos y listas
   sin clase; todo lo demás (section-head, tablas, rejillas, FAQ, callouts, ejemplos, listas con
   rejilla propia como .content-list) ocupa las dos columnas. El espaciado va por DEBAJO de cada
   bloque para que las dos columnas arranquen en la misma línea. Los párrafos NO se parten entre
   columnas (break-inside:avoid): partirlos dejaba huecos enormes entre párrafos en Safari y el texto
   se leía a saltos (visto por Nicolás el 18-sep en correccion-ortografica-en-catalan). Excluida /precios-correccion-texto-baratos/
   (page-id-1336): es una página de tarjetas, tablas y calculadora, no de texto corrido. --- */
@media (min-width:960px){
  .page-template-page-ds:not(.page-id-1336) .dsx .ds-section > .wp-block-group__inner-container > .wrap > .wp-block-group__inner-container:has(> p + p){columns:2;column-gap:56px;}
  .page-template-page-ds:not(.page-id-1336) .dsx .ds-section > .wp-block-group__inner-container > .wrap > .wp-block-group__inner-container:has(> p + p) > :not(p):not(ul:not([class])):not(ol:not([class])){column-span:all;}
  .page-template-page-ds:not(.page-id-1336) .dsx .ds-section > .wp-block-group__inner-container > .wrap > .wp-block-group__inner-container:has(> p + p) > p{break-inside:avoid;margin-top:0;margin-bottom:26px;}
  .page-template-page-ds:not(.page-id-1336) .dsx .ds-section > .wp-block-group__inner-container > .wrap > .wp-block-group__inner-container:has(> p + p) > :is(ul:not([class]),ol:not([class])){margin-top:0;margin-bottom:26px;}
  .page-template-page-ds:not(.page-id-1336) .dsx .ds-section > .wp-block-group__inner-container > .wrap > .wp-block-group__inner-container:has(> p + p) > :is(ul:not([class]),ol:not([class])) > li{break-inside:avoid;}
  .page-template-page-ds:not(.page-id-1336) .dsx .ds-section > .wp-block-group__inner-container > .wrap > .wp-block-group__inner-container:has(> p + p) > :not(p):not(ul:not([class])):not(ol:not([class])):not(:last-child){margin-bottom:36px;}
  .page-template-page-ds:not(.page-id-1336) .dsx .ds-section > .wp-block-group__inner-container > .wrap > .wp-block-group__inner-container:has(> p + p) > .section-head{margin-bottom:52px;}
  .page-template-page-ds:not(.page-id-1336) .dsx .ds-section > .wp-block-group__inner-container > .wrap > .wp-block-group__inner-container:has(> p + p) > :last-child{margin-bottom:0;}
}

/* --- Sello «Corrección garantizada» (2026-09-17; sello-garantia-postal.php). Timbre redondo inclinado
   como un sello postal, pegado a la esquina del contenedor relativo más cercano (.form-card) o en flujo. --- */
.dsx .sello-postal{display:inline-block;width:var(--sello-tam,96px);height:var(--sello-tam,96px);color:var(--ds-ink);transform:rotate(-12deg);opacity:.92;line-height:0;}
.dsx .sello-postal svg{width:100%;height:100%;display:block;overflow:visible;}
.dsx .sello-postal .sp-arc{font-family:var(--ds-display);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;}
.dsx .sello-postal .sp-arc--b{font-size:15px;letter-spacing:.1em;}
.dsx .sello-postal .sp-cien{font-family:var(--ds-display);font-weight:700;font-size:30px;letter-spacing:.02em;}
.dsx .sello-postal--rojo{color:var(--ds-edit-out);}
.dsx .sello-postal--flotante{position:absolute;top:14px;right:16px;z-index:2;pointer-events:none;}
.dsx .form-card:has(> .sello-postal--flotante) .form-head{padding-right:calc(var(--sello-tam,96px) + 12px);}
@media (max-width:560px){.dsx .sello-postal--flotante{--sello-tam:72px;top:10px;right:10px;}}
.dsx .plan-card{position:relative;}
.dsx .plan-card > .sello-postal--flotante{top:14px;right:14px;}
.dsx .plan-card:has(> .sello-postal--flotante) > h3{padding-right:calc(var(--sello-tam,84px) + 4px);}

/* ============================================================
   Héroes de pilares sin ilustración (1-oct-2026): 12 mocks CSS
   nuevos, uno por pilar, con el mismo lenguaje visual que ya
   usan senyera-mock/doc-lock-mock/ghost-manuscript/book-mock/
   galeradas-mock/style-mock — tarjeta blanca o cristal oscuro,
   2-4 elementos en bucle de 6-9s, --ds-tech (corrección) /
   --ds-human (autor), prefers-reduced-motion con estado final
   fijo, breakpoint móvil a 1 columna. Keyframes de recursos ya
   existentes (dsGuideIn/dsSnapIn, dsSwapBefore/After, estiloPulse)
   se REUTILIZAN tal cual en vez de duplicarse.
   Alto: aspect-ratio:1.4 en cada tarjeta (el mismo ~1.43 que da
   book-mock de forma natural con sus dos páginas 3/4) + flex
   column para repartir el contenido en todo el alto, igual que
   el gráfico de referencia en maquetacion-de-libros/ (1-oct-2026,
   2ª pasada: las tarjetas quedaban correctas en ancho pero mucho
   más bajas que la referencia).
   ============================================================ */

/* ---- 1-2. geo-mock: Barcelona / Canarias (pin + skyline/volcán) ---- */
.dsx .hero-panel.hero-geo .wrap{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:60px;}
.dsx .hero-geo-copy{min-width:0;}
.dsx .geo-mock{background:#fff;border-radius:var(--ds-radius);overflow:hidden;position:relative;color:var(--ds-ink);aspect-ratio:1.4;display:flex;flex-direction:column;}
.dsx .geo-mock .geo-sky{flex:1;min-height:0;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--ds-tech-soft),#fff);}
.dsx .geo-mock .geo-sky svg{position:absolute;bottom:0;left:0;width:100%;height:60%;fill:var(--ds-ink);opacity:.88}
.dsx .geo-mock .geo-pin{position:absolute;left:50%;top:10%;width:30px;height:30px;transform:translateX(-50%);animation:geoPinDrop 6s ease-in-out infinite;}
.dsx .geo-mock .geo-pin svg{width:30px;height:30px;fill:var(--ds-human);filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));}
@keyframes geoPinDrop{0%{top:-20%;opacity:0;}14%{top:10%;opacity:1;}18%{top:13%;}22%{top:10%;}70%{top:10%;opacity:1;}84%,100%{top:-20%;opacity:0;}}
.dsx .geo-mock .geo-body{flex:none;padding:24px 26px 28px;display:flex;flex-direction:column;gap:12px;}
.dsx .geo-mock .geo-line{height:9px;border-radius:5px;background:#E5E7EB;}
.dsx .geo-mock .geo-line.w1{width:86%;}
.dsx .geo-mock .geo-line.w2{width:62%;}
.dsx .geo-mock .geo-badge{margin-top:6px;display:inline-flex;align-self:flex-start;align-items:center;gap:6px;font-family:var(--ds-mono);font-size:12px;color:var(--ds-tech);background:var(--ds-tech-soft);padding:6px 12px;border-radius:20px;opacity:0;animation:geoBadge 6s ease-in-out infinite;}
.dsx .geo-mock .geo-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ds-tech);}
@keyframes geoBadge{0%,18%{opacity:0;transform:translateY(4px);}26%,78%{opacity:1;transform:none;}88%,100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){.dsx .geo-mock .geo-pin{animation:none;top:10%;opacity:1;}.dsx .geo-mock .geo-badge{animation:none;opacity:1;transform:none;}}
@media (max-width:860px){.dsx .hero-panel.hero-geo .wrap{grid-template-columns:1fr;gap:30px;}}

/* ---- 3. edit-mock: Edición de textos (marcas de editor) ---- */
.dsx .hero-panel.hero-edicion .wrap{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:60px;}
.dsx .hero-edicion-copy{min-width:0;}
.dsx .edit-mock{background:#fff;border-radius:var(--ds-radius);padding:36px 34px;color:var(--ds-ink);position:relative;aspect-ratio:1.4;display:flex;flex-direction:column;justify-content:space-between;}
.dsx .edit-mock .ed-line{font-family:var(--ds-sans);font-size:17px;color:var(--ds-ink-soft);line-height:2.3;position:relative;}
.dsx .edit-mock .strike{position:relative;color:var(--ds-ink-faint);}
.dsx .edit-mock .strike::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:var(--ds-human);transform:scaleX(0);transform-origin:left;animation:edStrike 7s ease-in-out infinite;}
@keyframes edStrike{0%,8%{transform:scaleX(0);}18%,78%{transform:scaleX(1);}90%,100%{transform:scaleX(0);}}
.dsx .edit-mock .insert .caret{display:inline-block;font-family:var(--ds-mono);color:var(--ds-tech);font-size:12px;font-weight:700;opacity:0;margin:0 1px;animation:edCaret 7s ease-in-out infinite;}
.dsx .edit-mock .insert .ins-word{display:inline-block;background:var(--ds-tech-soft);color:var(--ds-tech);padding:2px 8px;border-radius:5px;font-family:var(--ds-mono);font-size:13px;font-weight:600;opacity:0;transform:translateY(2px);animation:edWord 7s ease-in-out infinite;}
@keyframes edCaret{0%,22%{opacity:0;}30%,78%{opacity:1;}90%,100%{opacity:0;}}
@keyframes edWord{0%,24%{opacity:0;transform:translateY(2px);}32%,78%{opacity:1;transform:none;}90%,100%{opacity:0;}}
.dsx .edit-mock .circled{position:relative;}
.dsx .edit-mock .circled::after{content:"";position:absolute;left:-5px;right:-5px;top:-6px;bottom:-4px;border:2px solid var(--ds-human);border-radius:50%;transform:scale(.6);opacity:0;animation:edCircle 7s ease-in-out infinite;animation-delay:3.6s;}
@keyframes edCircle{0%,8%{opacity:0;transform:scale(.6);}16%,78%{opacity:1;transform:scale(1);}90%,100%{opacity:0;transform:scale(.6);}}
.dsx .edit-mock .ed-status{flex:none;display:flex;align-items:center;gap:8px;padding-top:18px;border-top:1px dashed var(--ds-line);font-family:var(--ds-mono);font-size:12.5px;color:var(--ds-ink-faint);}
.dsx .edit-mock .ed-status .dot{width:5px;height:5px;border-radius:50%;background:var(--ds-tech);animation:estiloPulse 1.4s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.dsx .edit-mock .strike::after{animation:none;transform:scaleX(1);}.dsx .edit-mock .insert .caret,.dsx .edit-mock .insert .ins-word{animation:none;opacity:1;transform:none;}.dsx .edit-mock .circled::after{animation:none;opacity:1;transform:scale(1);}.dsx .edit-mock .ed-status .dot{animation:none;}}
@media (max-width:860px){.dsx .hero-panel.hero-edicion .wrap{grid-template-columns:1fr;gap:30px;}}

/* ---- 4. kdp-mock: Maquetación para Amazon KDP (e-reader) ---- */
.dsx .hero-panel.hero-kdp .wrap{display:grid;grid-template-columns:1.2fr 0.8fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:60px;}
.dsx .hero-kdp-copy{min-width:0;}
.dsx .kdp-mock{background:#fff;border-radius:22px;padding:14px;box-shadow:0 24px 50px -26px rgba(18,19,26,.4);width:100%;max-width:300px;margin:0 auto;}
.dsx .kdp-mock .kdp-bezel-top{display:flex;justify-content:space-between;align-items:center;padding:2px 6px 10px;}
.dsx .kdp-mock .kdp-dot{width:7px;height:7px;border-radius:50%;background:var(--ds-line);}
.dsx .kdp-mock .kdp-sig{font-family:var(--ds-mono);font-size:9px;color:var(--ds-ink-faint);letter-spacing:.06em;}
.dsx .kdp-mock .kdp-screen{background:#fff;border:1px solid var(--ds-line);border-radius:8px;padding:18px 16px;position:relative;aspect-ratio:3/4;overflow:hidden;}
.dsx .kdp-mock .guide{position:absolute;border:1px dashed var(--ds-tech);opacity:0;animation:dsGuideIn 6s ease-in-out infinite;}
.dsx .kdp-mock .guide.margin{inset:7% 9%;}
.dsx .kdp-mock .tblock{position:absolute;left:9%;height:6.5%;border-radius:2px;background:#D8DBE2;animation:dsSnapIn 6s ease-in-out infinite;}
.dsx .kdp-mock .kdp-bezel-bottom{display:flex;justify-content:center;padding-top:10px;}
.dsx .kdp-mock .kdp-home{width:34px;height:3px;border-radius:3px;background:var(--ds-line);}
@media (prefers-reduced-motion:reduce){.dsx .kdp-mock .guide,.dsx .kdp-mock .tblock{animation:none!important;opacity:1!important;transform:none!important;}}
@media (max-width:860px){.dsx .hero-panel.hero-kdp .wrap{grid-template-columns:1fr;gap:30px;}.dsx .kdp-mock{max-width:230px;}}

/* ---- 5. tesis-mock: Corrección de tesis académicas ---- */
.dsx .hero-panel.hero-tesis .wrap{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:60px;}
.dsx .hero-tesis-copy{min-width:0;}
.dsx .tesis-mock{background:#fff;border-radius:var(--ds-radius);padding:36px 32px;color:var(--ds-ink);position:relative;aspect-ratio:1.4;display:flex;flex-direction:column;justify-content:space-between;}
.dsx .tesis-mock .ts-line{height:9px;border-radius:5px;background:#E5E7EB;position:relative;}
.dsx .tesis-mock .ts-line.w1{width:92%;}
.dsx .tesis-mock .ts-line.w2{width:80%;}
.dsx .tesis-mock .ts-line.w3{width:86%;}
.dsx .tesis-mock .ts-note{position:absolute;top:-8px;width:17px;height:17px;border-radius:50%;background:var(--ds-tech);color:#fff;font-family:var(--ds-mono);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5);animation:tsNote 7s ease-in-out infinite;}
.dsx .tesis-mock .ts-line.w1 .ts-note{right:10%;animation-delay:0s;}
.dsx .tesis-mock .ts-line.w2 .ts-note{right:4%;animation-delay:.5s;}
.dsx .tesis-mock .ts-line.w3 .ts-note{right:18%;animation-delay:1s;}
@keyframes tsNote{0%,4%{opacity:0;transform:scale(.5);}14%,86%{opacity:1;transform:scale(1);}96%,100%{opacity:0;transform:scale(.5);}}
.dsx .tesis-mock .ts-badge{flex:none;margin-top:18px;display:flex;align-items:center;gap:8px;font-family:var(--ds-mono);font-size:12.5px;color:var(--ds-ink-soft);padding-top:18px;border-top:1px dashed var(--ds-line);}
.dsx .tesis-mock .ts-badge svg{width:17px;height:17px;fill:var(--ds-human);flex:none;}
@media (prefers-reduced-motion:reduce){.dsx .tesis-mock .ts-note{animation:none;opacity:1;transform:scale(1);}}
@media (max-width:860px){.dsx .hero-panel.hero-tesis .wrap{grid-template-columns:1fr;gap:30px;}}

/* ---- 6. lit-mock: Corrección literaria (libro abierto) ----
   Mismas páginas 3/4 que book-mock: así el alto sale igual que
   en el gráfico de referencia, no solo el ancho. */
.dsx .hero-panel.hero-literaria .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:60px;}
.dsx .hero-literaria-copy{min-width:0;}
.dsx .lit-mock{background:#fff;border-radius:var(--ds-radius);padding:34px 30px;position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.dsx .lit-mock::before{content:"";position:absolute;top:0;left:50%;width:14px;height:50px;background:var(--ds-human);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);transform:translateX(-50%);}
.dsx .lit-mock .lit-page{position:relative;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:center;gap:13px;}
.dsx .lit-mock .lit-ln{height:7px;border-radius:4px;background:#E7E8EC;}
.dsx .lit-mock .lit-ln:nth-child(1){width:92%}
.dsx .lit-mock .lit-ln:nth-child(2){width:78%}
.dsx .lit-mock .lit-ln:nth-child(3){width:86%}
.dsx .lit-mock .lit-ln:nth-child(4){width:65%}
.dsx .lit-mock .lit-ln:nth-child(5){width:82%}
.dsx .lit-mock .lit-page.right{overflow:hidden;}
.dsx .lit-mock .lit-sweep{position:absolute;left:-20%;right:-20%;height:32px;background:linear-gradient(180deg,rgba(226,154,58,0),rgba(226,154,58,.28),rgba(226,154,58,0));top:-40px;animation:litSweep 6s ease-in-out infinite;}
@keyframes litSweep{0%{top:-40px;}60%{top:180px;}100%{top:180px;}}
@media (prefers-reduced-motion:reduce){.dsx .lit-mock .lit-sweep{animation:none;opacity:0;}}
@media (max-width:860px){.dsx .hero-panel.hero-literaria .wrap{grid-template-columns:1fr;gap:30px;}.dsx .lit-mock{max-width:420px;margin:0 auto;}}
@media (max-width:520px){.dsx .lit-mock{grid-template-columns:1fr}.dsx .lit-mock .lit-page.left{display:none}}

/* ---- 7. seo-mock: Corrección de contenidos SEO ---- */
.dsx .hero-panel.hero-seo .wrap{display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:60px;}
.dsx .hero-seo-copy{min-width:0;}
.dsx .seo-mock{background:#fff;border-radius:var(--ds-radius);padding:0;overflow:hidden;color:var(--ds-ink);aspect-ratio:1.4;display:flex;flex-direction:column;}
.dsx .seo-mock .seo-bar{flex:none;display:flex;align-items:center;gap:6px;padding:16px 18px;border-bottom:1px solid var(--ds-line);}
.dsx .seo-mock .seo-dot{width:8px;height:8px;border-radius:50%;background:var(--ds-line);}
.dsx .seo-mock .seo-input{flex:1;margin-left:10px;background:var(--ds-bg-alt);border-radius:20px;padding:8px 14px;display:flex;align-items:center;gap:7px;font-family:var(--ds-mono);font-size:13px;color:var(--ds-ink-soft);}
.dsx .seo-mock .seo-input svg{width:12px;height:12px;flex:none;stroke:var(--ds-ink-faint);fill:none;stroke-width:2;}
.dsx .seo-mock .seo-typed{white-space:nowrap;overflow:hidden;width:0;animation:seoType 7s ease-in-out infinite;border-right:1px solid var(--ds-tech);}
@keyframes seoType{0%,6%{width:0;}42%,80%{width:15ch;}96%,100%{width:0;}}
.dsx .seo-mock .seo-body{flex:1;padding:22px 24px;display:flex;flex-direction:column;justify-content:space-evenly;}
.dsx .seo-mock .seo-result{display:flex;align-items:center;gap:12px;opacity:0;transform:translateY(5px);animation:seoResult 7s ease-in-out infinite;}
.dsx .seo-mock .seo-result:nth-child(1){animation-delay:.1s}
.dsx .seo-mock .seo-result:nth-child(2){animation-delay:.3s}
.dsx .seo-mock .seo-result:nth-child(3){animation-delay:.5s}
@keyframes seoResult{0%,46%{opacity:0;transform:translateY(5px);}58%,82%{opacity:1;transform:none;}94%,100%{opacity:0;}}
.dsx .seo-mock .seo-rank{flex:none;width:24px;height:24px;border-radius:7px;background:var(--ds-tech-soft);color:var(--ds-tech);font-family:var(--ds-mono);font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:center;}
.dsx .seo-mock .seo-rline{flex:1;height:8px;border-radius:4px;background:#E7E8EC;}
@media (prefers-reduced-motion:reduce){.dsx .seo-mock .seo-typed{animation:none;width:15ch;}.dsx .seo-mock .seo-result{animation:none;opacity:1;transform:none;}}
@media (max-width:860px){.dsx .hero-panel.hero-seo .wrap{grid-template-columns:1fr;gap:30px;}}

/* ---- 8. auto-mock: Corrección de libros autopublicados ---- */
.dsx .hero-panel.hero-autopub .wrap{display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:60px;}
.dsx .hero-autopub-copy{min-width:0;}
.dsx .auto-mock{background:#fff;border-radius:var(--ds-radius);padding:36px 30px;color:var(--ds-ink);display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;position:relative;aspect-ratio:1.4;}
.dsx .auto-mock .auto-stack{display:flex;flex-direction:column;gap:7px;width:72%;}
.dsx .auto-mock .auto-ln{height:7px;border-radius:4px;background:#E7E8EC;}
.dsx .auto-mock .auto-ln:nth-child(1){width:100%}
.dsx .auto-mock .auto-ln:nth-child(2){width:84%}
.dsx .auto-mock .auto-ln:nth-child(3){width:92%}
.dsx .auto-mock .auto-arrow{width:24px;height:24px;animation:autoArrow 6s ease-in-out infinite;}
.dsx .auto-mock .auto-arrow svg{width:100%;height:100%;stroke:var(--ds-human);stroke-width:2.4;fill:none;}
@keyframes autoArrow{0%,10%{opacity:0;transform:translateY(6px);}24%,46%{opacity:1;transform:translateY(0);}56%,100%{opacity:0;transform:translateY(-6px);}}
.dsx .auto-mock .auto-cover{width:92px;height:120px;border-radius:6px;background:linear-gradient(135deg,var(--ds-tech),#2640C4);box-shadow:0 16px 30px -10px rgba(53,82,239,.5);position:relative;opacity:0;transform:scale(.7);animation:autoCover 6s ease-in-out infinite;}
.dsx .auto-mock .auto-cover::before{content:"";position:absolute;left:10px;right:10px;top:17px;height:4px;background:rgba(255,255,255,.55);border-radius:2px;}
.dsx .auto-mock .auto-cover::after{content:"";position:absolute;left:10px;right:26px;top:27px;height:4px;background:rgba(255,255,255,.3);border-radius:2px;}
@keyframes autoCover{0%,46%{opacity:0;transform:scale(.7);}60%,88%{opacity:1;transform:scale(1);}98%,100%{opacity:0;transform:scale(.7);}}
.dsx .auto-mock .auto-badge{font-family:var(--ds-mono);font-size:12px;color:var(--ds-tech);opacity:0;animation:autoBadge 6s ease-in-out infinite;}
@keyframes autoBadge{0%,62%{opacity:0;}70%,88%{opacity:1;}98%,100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){.dsx .auto-mock .auto-arrow{animation:none;opacity:0;}.dsx .auto-mock .auto-cover,.dsx .auto-mock .auto-badge{animation:none;opacity:1;transform:scale(1);}}
@media (max-width:860px){.dsx .hero-panel.hero-autopub .wrap{grid-template-columns:1fr;gap:30px;}}

/* ---- 9. informe-mock: Informe de lectura ---- */
.dsx .hero-panel.hero-informe .wrap{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:60px;}
.dsx .hero-informe-copy{min-width:0;}
.dsx .informe-mock{background:#fff;border-radius:var(--ds-radius);padding:32px 30px;color:var(--ds-ink);aspect-ratio:1.4;display:flex;flex-direction:column;justify-content:space-evenly;}
.dsx .informe-mock .inf-head{flex:none;display:flex;justify-content:space-between;align-items:center;}
.dsx .informe-mock .inf-title{font-family:var(--ds-display);font-weight:600;font-size:16px;}
.dsx .informe-mock .inf-stars{display:flex;gap:3px;}
.dsx .informe-mock .inf-stars svg{width:14px;height:14px;fill:var(--ds-line);animation:infStar 7s ease-in-out infinite;}
.dsx .informe-mock .inf-stars svg:nth-child(1){animation-delay:0s}
.dsx .informe-mock .inf-stars svg:nth-child(2){animation-delay:.15s}
.dsx .informe-mock .inf-stars svg:nth-child(3){animation-delay:.3s}
.dsx .informe-mock .inf-stars svg:nth-child(4){animation-delay:.45s}
.dsx .informe-mock .inf-stars svg:nth-child(5){animation-delay:.6s}
@keyframes infStar{0%,10%{fill:var(--ds-line);}20%,88%{fill:var(--ds-human);}96%,100%{fill:var(--ds-line);}}
.dsx .informe-mock .inf-row{display:flex;align-items:center;gap:12px;}
.dsx .informe-mock .inf-label{font-family:var(--ds-mono);font-size:12px;color:var(--ds-ink-faint);width:84px;flex:none;}
.dsx .informe-mock .inf-track{flex:1;height:7px;border-radius:4px;background:var(--ds-bg-alt);overflow:hidden;}
.dsx .informe-mock .inf-fill{height:100%;border-radius:4px;background:var(--ds-tech);width:0;animation:infFill 7s ease-in-out infinite;}
.dsx .informe-mock .inf-row:nth-child(2) .inf-fill{--w:86%;animation-delay:.1s}
.dsx .informe-mock .inf-row:nth-child(3) .inf-fill{--w:70%;animation-delay:.3s}
.dsx .informe-mock .inf-row:nth-child(4) .inf-fill{--w:92%;animation-delay:.5s}
@keyframes infFill{0%,14%{width:0;}40%,82%{width:var(--w);}96%,100%{width:0;}}
@media (prefers-reduced-motion:reduce){.dsx .informe-mock .inf-stars svg{animation:none;fill:var(--ds-human);}.dsx .informe-mock .inf-fill{animation:none;width:var(--w);}}
@media (max-width:860px){.dsx .hero-panel.hero-informe .wrap{grid-template-columns:1fr;gap:30px;}}

/* ---- 10. legal-mock: Corrección de textos legales ---- */
.dsx .hero-panel.hero-legal .wrap{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:60px;}
.dsx .hero-legal-copy{min-width:0;}
.dsx .legal-mock{background:#fff;border-radius:var(--ds-radius);padding:34px 32px;color:var(--ds-ink);position:relative;overflow:hidden;aspect-ratio:1.4;display:flex;flex-direction:column;justify-content:space-evenly;}
.dsx .legal-mock .lg-line{height:9px;border-radius:5px;background:#E5E7EB;}
.dsx .legal-mock .lg-line.w1{width:94%}
.dsx .legal-mock .lg-line.w2{width:72%}
.dsx .legal-mock .lg-line.w3{width:84%}
.dsx .legal-mock .lg-line.w4{width:60%}
.dsx .legal-mock .lg-stamp{position:absolute;right:26px;bottom:24px;width:100px;height:100px;border-radius:50%;border:3px solid var(--ds-tech);display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--ds-mono);font-size:11px;font-weight:700;color:var(--ds-tech);letter-spacing:.04em;transform:scale(2.2) rotate(0deg);opacity:0;animation:lgStamp 7s ease-in-out infinite;}
.dsx .legal-mock .lg-stamp::before{content:"";position:absolute;inset:7px;border:1px solid var(--ds-tech);border-radius:50%;}
@keyframes lgStamp{0%,26%{opacity:0;transform:scale(2.2) rotate(0deg);}34%{opacity:1;transform:scale(.92) rotate(-10deg);}40%{transform:scale(1.04) rotate(-8deg);}46%,84%{opacity:1;transform:scale(1) rotate(-8deg);}94%,100%{opacity:0;transform:scale(2.2) rotate(0deg);}}
@media (prefers-reduced-motion:reduce){.dsx .legal-mock .lg-stamp{animation:none;opacity:1;transform:scale(1) rotate(-8deg);}}
@media (max-width:860px){.dsx .hero-panel.hero-legal .wrap{grid-template-columns:1fr;gap:30px;}}

/* ---- 11. poesia-mock: Corrección de poesía ---- */
.dsx .hero-panel.hero-poesia .wrap{display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:60px;}
.dsx .hero-poesia-copy{min-width:0;}
.dsx .poesia-mock{background:#fff;border-radius:var(--ds-radius);padding:38px 34px;color:var(--ds-ink);aspect-ratio:1.4;display:flex;flex-direction:column;justify-content:space-evenly;}
.dsx .poesia-mock .po-ln{height:8px;border-radius:4px;background:#E7E8EC;}
.dsx .poesia-mock .po-ln.i0{width:58%;margin-left:0}
.dsx .poesia-mock .po-ln.i1{width:44%;margin-left:32px}
.dsx .poesia-mock .po-ln.i2{width:62%;margin-left:0}
.dsx .poesia-mock .po-ln.i3{width:36%;margin-left:48px}
.dsx .poesia-mock .po-word{display:inline-flex;position:relative;font-family:var(--ds-display);font-style:italic;font-size:19px;}
.dsx .poesia-mock .po-swap{position:relative;display:inline-grid;margin-left:9px;}
.dsx .poesia-mock .po-swap span{grid-area:1/1;white-space:nowrap;}
.dsx .poesia-mock .po-before{color:var(--ds-ink-faint);text-decoration:wavy underline var(--ds-human);text-underline-offset:3px;animation:dsSwapBefore 7s ease-in-out infinite;}
.dsx .poesia-mock .po-after{color:var(--ds-tech);opacity:0;animation:dsSwapAfter 7s ease-in-out infinite;}
@media (prefers-reduced-motion:reduce){.dsx .poesia-mock .po-before{animation:none;opacity:0;}.dsx .poesia-mock .po-after{animation:none;opacity:1;}}
@media (max-width:860px){.dsx .hero-panel.hero-poesia .wrap{grid-template-columns:1fr;gap:30px;}}

/* ---- 12. orto-mock: Corrección ortotipográfica (tildes/comas/mayúsculas) ---- */
.dsx .hero-panel.hero-orto .wrap{display:grid;grid-template-columns:1.15fr 0.85fr;gap:56px;align-items:center;padding-top:48px;padding-bottom:60px;}
.dsx .hero-orto-copy{min-width:0;}
.dsx .orto-mock{background:#fff;border-radius:var(--ds-radius);padding:38px 34px;color:var(--ds-ink);display:flex;flex-direction:column;justify-content:space-evenly;aspect-ratio:1.4;}
.dsx .orto-mock .or-word{font-family:var(--ds-display);font-size:30px;font-weight:600;position:relative;display:inline-block;}
.dsx .orto-mock .or-accent{position:absolute;top:-16px;left:62px;font-size:22px;font-weight:700;color:var(--ds-human);opacity:0;animation:orAccent 7s ease-in-out infinite;}
@keyframes orAccent{0%,10%{opacity:0;transform:translateY(5px);}20%,80%{opacity:1;transform:none;}92%,100%{opacity:0;}}
.dsx .orto-mock .or-row{display:flex;align-items:baseline;gap:3px;font-family:var(--ds-display);font-size:24px;color:var(--ds-ink-soft);position:relative;}
.dsx .orto-mock .or-caret{position:relative;width:1px;}
.dsx .orto-mock .or-caret::after{content:"^";position:absolute;bottom:-22px;left:-4px;color:var(--ds-tech);font-weight:700;font-size:16px;opacity:0;animation:orCaret 7s ease-in-out infinite;animation-delay:2.3s;}
.dsx .orto-mock .or-caret::before{content:",";position:absolute;bottom:4px;left:-2px;color:var(--ds-tech);font-weight:700;font-size:22px;opacity:0;animation:orCaret 7s ease-in-out infinite;animation-delay:2.3s;}
@keyframes orCaret{0%,8%{opacity:0;}18%,82%{opacity:1;}92%,100%{opacity:0;}}
.dsx .orto-mock .or-cap{position:relative;}
.dsx .orto-mock .or-cap::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-6px;height:5px;background-image:repeating-linear-gradient(115deg,var(--ds-human) 0 3px,transparent 3px 6px);opacity:0;animation:orCap 7s ease-in-out infinite;animation-delay:4.4s;}
@keyframes orCap{0%,8%{opacity:0;}18%,82%{opacity:1;}92%,100%{opacity:0;}}
.dsx .orto-mock .or-status{flex:none;padding-top:18px;border-top:1px dashed var(--ds-line);font-family:var(--ds-mono);font-size:12.5px;color:var(--ds-ink-faint);}
@media (prefers-reduced-motion:reduce){.dsx .orto-mock .or-accent,.dsx .orto-mock .or-caret::before,.dsx .orto-mock .or-caret::after,.dsx .orto-mock .or-cap::after{animation:none;opacity:1;}}
@media (max-width:860px){.dsx .hero-panel.hero-orto .wrap{grid-template-columns:1fr;gap:30px;}}