/* ==========================================================================
   DSEO — Diseño Web & SEO
   Capa de marca sobre el sistema Pixora.
   No se toca main.css: todo se redefine por variables + componentes propios.
   --------------------------------------------------------------------------
   1. Tokens de marca
   2. Tipografía combinada (Thunder · Inter Tight · Inter · Instrument Serif · JetBrains Mono)
   3. Ajustes al sistema heredado
   4. Componentes DSEO
   5. WhatsApp flotante (aparece al 30% del scroll)
   6. Responsive
   ========================================================================== */

/* ---------------------------------------------------------------
   1. TOKENS DE MARCA
   --------------------------------------------------------------- */
:root {
   /* El sitio está diseñado en claro/oscuro por sección: se declara el esquema
      para que ningún navegador aplique su modo oscuro automático e invierta la paleta. */
   color-scheme: light;

   /* Paleta DSEO */
   --dseo-ink: #0A0A0A;
   --dseo-ink-2: #16161A;
   --dseo-paper: #F2F0EC;
   --dseo-paper-2: #FAF9F7;
   --dseo-primary: #4B2BEF;
   --dseo-primary-dark: #3A1FD0;
   --dseo-primary-soft: #E8E3FF;
   --dseo-accent: #C8FF3D;
   --dseo-accent-dark: #A8DE1C;
   --dseo-line: #E2DFD9;
   --dseo-line-dark: #26262C;
   --dseo-muted: #6B6B76;

   /* Sobrescritura del sistema heredado */
   --tp-common-px-orange: #4B2BEF;
   --tp-common-px-orange-dark: #3A1FD0;
   --tp-common-px-red: #4B2BEF;
   --tp-theme-px-1: #4B2BEF;
   --tp-text-px-body: #5B5B66;
   --tp-grey-px-1: #F2F0EC;
   --tp-border-px-1: #E2DFD9;

   /* Familias */
   --tp-ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
   --tp-ff-inter: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
   --tp-ff-p: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
   --tp-ff-heading: 'Inter Tight', 'Inter', system-ui, sans-serif;
   --dseo-ff-display: 'Thunder', 'Inter Tight', sans-serif;
   --dseo-ff-display-med: 'ThunderMed', 'Inter Tight', sans-serif;
   --dseo-ff-editorial: 'Instrument Serif', Georgia, 'Times New Roman', serif;
   --dseo-ff-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------------------------------------------------------------
   2. TIPOGRAFÍA COMBINADA
   Cuatro voces con roles distintos:
   · Thunder       -> titulares monumentales (impacto)
   · Inter Tight   -> títulos de sección y jerarquía media (claridad)
   · Inter         -> texto corrido y UI (legibilidad)
   · Instrument Serif -> palabras enfatizadas dentro de titulares (carácter editorial)
   · JetBrains Mono   -> etiquetas, numeración, datos (credibilidad técnica)
   --------------------------------------------------------------- */
body {
   font-family: var(--tp-ff-body);
   font-feature-settings: "cv05" 1, "cv08" 1, "ss03" 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
   font-family: var(--tp-ff-heading);
   letter-spacing: -0.035em;
}

.px-section-title,
.px-footer-widget-title,
.px-about-title,
.px-contact-title {
   font-family: var(--tp-ff-heading);
   font-weight: 600;
}

/* Palabra enfatizada en cursiva editorial dentro de un titular */
.dseo-em {
   font-family: var(--dseo-ff-editorial);
   font-weight: 400;
   font-style: italic;
   letter-spacing: -0.01em;
   text-transform: none;
}
.px-section-title .dseo-em { font-size: 1.02em; }
.dseo-em--accent { color: var(--dseo-primary); }

/* Etiquetas técnicas monoespaciadas */
.dseo-mono,
.px-section-subtitle,
.px-capsule-subtitle,
.px-footer-widget-title-sm {
   font-family: var(--dseo-ff-mono);
   font-weight: 500;
   font-size: 12px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
}
.px-section-subtitle i { transform: translateY(1px); }
.dseo-mono--sm { font-size: 11px; letter-spacing: 0.16em; }

/* Titulares display */
.dseo-display {
   font-family: var(--dseo-ff-display);
   font-weight: 700;
   line-height: 0.86;
   letter-spacing: -0.01em;
   text-transform: uppercase;
}

/* Párrafo de entrada, un punto más grande */
.dseo-lead {
   font-size: 20px;
   line-height: 1.55;
   color: var(--tp-text-px-body);
   letter-spacing: -0.015em;
}

/* ---------------------------------------------------------------
   3. AJUSTES AL SISTEMA HEREDADO
   --------------------------------------------------------------- */
.px-hero-service-item span:last-child,
.px-service-category span { font-family: var(--dseo-ff-mono); letter-spacing: 0.02em; }

.px-copyright-big-text { color: var(--dseo-primary); font-family: var(--tp-ff-heading); }
.px-inner-service-big-text { color: var(--dseo-primary); }

/* El acento lima se reserva para llamadas a la acción y datos */
.px-btn-zikzak .zikzak-bg svg path { fill: var(--dseo-accent); }
.px-btn-zikzak .btn-text { color: var(--dseo-ink); font-family: var(--dseo-ff-mono); font-weight: 600; }

.px-capsule-item { font-family: var(--tp-ff-heading); font-weight: 600; letter-spacing: -0.02em; }

/* Selección de texto */
::selection { background: var(--dseo-accent); color: var(--dseo-ink); }

/* Sin preloader: el contenido debe pintarse de inmediato (LCP).
   Si algún día se reactiva, esta es su marca. */
.loader__wrapper { background: var(--dseo-ink); }
.loader__count { font-family: var(--dseo-ff-display); }

/* ---------------------------------------------------------------
   4. COMPONENTES DSEO
   --------------------------------------------------------------- */

/* 4.1 Logotipo -------------------------------------------------- */
.dseo-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.dseo-logo__mark { flex: 0 0 auto; display: block; }
.dseo-logo__text { display: flex; flex-direction: column; line-height: 1; }
.dseo-logo__name {
   font-family: var(--tp-ff-heading);
   font-weight: 700; font-size: 24px; letter-spacing: -0.045em;
   color: var(--dseo-ink); line-height: 1;
}
.dseo-logo__tag {
   font-family: var(--dseo-ff-mono);
   font-size: 8.5px; letter-spacing: 0.2em; text-transform: uppercase;
   color: var(--dseo-muted); margin-top: 4px;
}
.dseo-logo--light .dseo-logo__name { color: #fff; }
.dseo-logo--light .dseo-logo__tag { color: rgba(255,255,255,.6); }
.dseo-logo__mark .mark-bg { fill: var(--dseo-primary); }
.dseo-logo__mark .mark-fg { fill: #fff; }
.dseo-logo__mark .mark-dot { fill: var(--dseo-accent); }

/* 4.2 Píldoras y etiquetas -------------------------------------- */
.dseo-pill {
   display: inline-flex; align-items: center; gap: 8px;
   padding: 7px 14px 6px; border-radius: 100px;
   border: 1px solid var(--dseo-line);
   font-family: var(--dseo-ff-mono); font-size: 11px;
   letter-spacing: 0.14em; text-transform: uppercase; color: var(--dseo-ink);
   background: transparent;
}
.dseo-pill--ai { border-color: var(--dseo-primary); color: var(--dseo-primary); }
.dseo-pill--ai::before {
   content: ""; width: 6px; height: 6px; border-radius: 50%;
   background: var(--dseo-primary); animation: dseo-pulse 2s infinite;
}
.dseo-pill--light { border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.85); }
.dseo-pill--accent { background: var(--dseo-accent); border-color: var(--dseo-accent); color: var(--dseo-ink); }
@keyframes dseo-pulse {
   0%, 100% { opacity: 1; transform: scale(1); }
   50% { opacity: .35; transform: scale(.7); }
}

/* 4.3 Botones DSEO ---------------------------------------------- */
.dseo-btn {
   position: relative; display: inline-flex; align-items: center; gap: 12px;
   padding: 17px 30px; border-radius: 100px; border: 1px solid var(--dseo-ink);
   background: var(--dseo-ink); color: #fff; overflow: hidden;
   font-family: var(--tp-ff-body); font-weight: 500; font-size: 15px;
   letter-spacing: -0.01em; text-decoration: none;
   transition: color .35s ease, border-color .35s ease;
}
.dseo-btn > span { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px; }
.dseo-btn::after {
   content: ""; position: absolute; inset: 0; z-index: 1;
   background: var(--dseo-accent); transform: translateY(101%);
   transition: transform .45s cubic-bezier(.25,1,.5,1);
}
.dseo-btn:hover { color: var(--dseo-ink); border-color: var(--dseo-accent); }
.dseo-btn:hover::after { transform: translateY(0); }
.dseo-btn svg { transition: transform .35s ease; }
.dseo-btn:hover svg { transform: translate(3px,-3px); }
.dseo-btn--primary { background: var(--dseo-primary); border-color: var(--dseo-primary); }
.dseo-btn--ghost { background: transparent; color: var(--dseo-ink); }
.dseo-btn--ghost:hover { color: var(--dseo-ink); }
.dseo-btn--light { background: transparent; border-color: rgba(255,255,255,.28); color: #fff; }
.dseo-btn--light:hover { color: var(--dseo-ink); border-color: var(--dseo-accent); }

/* 4.4 Cabecera de sección --------------------------------------- */
.dseo-sechead { margin-bottom: 60px; }
.dseo-sechead__kicker {
   display: inline-flex; align-items: center; gap: 10px;
   font-family: var(--dseo-ff-mono); font-size: 11px; letter-spacing: 0.18em;
   text-transform: uppercase; color: var(--dseo-muted); margin-bottom: 22px;
}
.dseo-sechead__kicker::before {
   content: ""; width: 28px; height: 1px; background: currentColor; opacity: .5;
}
.dseo-sechead__title {
   font-family: var(--tp-ff-heading); font-weight: 600;
   font-size: clamp(38px, 5.2vw, 82px); line-height: 0.98;
   letter-spacing: -0.045em; color: var(--dseo-ink); margin: 0;
}
.dseo-sechead__text {
   font-size: 17px; line-height: 1.65; color: var(--tp-text-px-body);
   max-width: 52ch; margin-top: 26px;
}
.dseo-sechead--light .dseo-sechead__title { color: #fff; }
.dseo-sechead--light .dseo-sechead__kicker { color: rgba(255,255,255,.55); }
.dseo-sechead--light .dseo-sechead__text { color: rgba(255,255,255,.62); }

/* 4.5 Pilares de servicio (4 bloques) --------------------------- */
.dseo-pillar {
   position: relative; display: flex; flex-direction: column; height: 100%;
   padding: 38px 34px 32px; background: #fff;
   border: 1px solid var(--dseo-line); border-radius: 4px;
   transition: transform .5s cubic-bezier(.25,1,.5,1), border-color .4s ease, background .4s ease;
   overflow: hidden;
}
.dseo-pillar::before {
   content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
   background: var(--dseo-primary); transition: width .5s cubic-bezier(.25,1,.5,1);
}
.dseo-pillar:hover { transform: translateY(-8px); border-color: var(--dseo-ink); }
.dseo-pillar:hover::before { width: 100%; }
.dseo-pillar__num {
   font-family: var(--dseo-ff-mono); font-size: 11px; letter-spacing: 0.16em;
   color: var(--dseo-primary); margin-bottom: 26px; display: block;
}
.dseo-pillar__title {
   font-family: var(--tp-ff-heading); font-weight: 600; font-size: 30px;
   line-height: 1.05; letter-spacing: -0.04em; color: var(--dseo-ink); margin: 0 0 12px;
}
.dseo-pillar__claim {
   font-family: var(--dseo-ff-editorial); font-style: italic; font-size: 19px;
   color: var(--dseo-primary); margin: 0 0 18px; line-height: 1.25;
}
.dseo-pillar__text { font-size: 15px; line-height: 1.6; color: var(--tp-text-px-body); margin: 0 0 26px; }
.dseo-pillar__list { list-style: none; padding: 0; margin: 0 0 26px; border-top: 1px solid var(--dseo-line); }
.dseo-pillar__list li { border-bottom: 1px solid var(--dseo-line); }
.dseo-pillar__list a {
   display: flex; align-items: center; justify-content: space-between; gap: 12px;
   padding: 13px 0; font-size: 15px; color: var(--dseo-ink); text-decoration: none;
   letter-spacing: -0.015em; transition: padding .35s ease, color .3s ease;
}
.dseo-pillar__list a i { opacity: 0; transform: translateX(-6px); transition: all .35s ease; line-height: 0; }
.dseo-pillar__list a:hover { padding-left: 10px; color: var(--dseo-primary); }
.dseo-pillar__list a:hover i { opacity: 1; transform: translateX(0); }
.dseo-pillar__foot { margin-top: auto; }

/* 4.6 Tarjeta de servicio individual ---------------------------- */
.dseo-svc {
   position: relative; display: flex; flex-direction: column; height: 100%;
   padding: 34px 30px 30px; background: #fff;
   border: 1px solid var(--dseo-line); border-radius: 4px; text-decoration: none;
   transition: transform .5s cubic-bezier(.25,1,.5,1), border-color .4s ease, box-shadow .4s ease;
}
.dseo-svc:hover { transform: translateY(-6px); border-color: var(--dseo-ink); box-shadow: 0 18px 50px -30px rgba(10,10,10,.55); }
.dseo-svc__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 30px; }
.dseo-svc__icon {
   width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
   background: var(--dseo-primary-soft); color: var(--dseo-primary);
   transition: background .4s ease, color .4s ease;
}
.dseo-svc:hover .dseo-svc__icon { background: var(--dseo-primary); color: #fff; }
.dseo-svc__num { font-family: var(--dseo-ff-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--dseo-muted); }
.dseo-svc__title {
   font-family: var(--tp-ff-heading); font-weight: 600; font-size: 23px;
   letter-spacing: -0.035em; color: var(--dseo-ink); margin: 0 0 10px; line-height: 1.15;
}
.dseo-svc__text { font-size: 14.5px; line-height: 1.6; color: var(--tp-text-px-body); margin: 0 0 24px; }
.dseo-svc__link {
   margin-top: auto; display: inline-flex; align-items: center; gap: 9px;
   font-family: var(--dseo-ff-mono); font-size: 11px; letter-spacing: 0.14em;
   text-transform: uppercase; color: var(--dseo-ink);
}
.dseo-svc:hover .dseo-svc__link { color: var(--dseo-primary); }
.dseo-svc__link svg { transition: transform .35s ease; }
.dseo-svc:hover .dseo-svc__link svg { transform: translate(3px,-3px); }
.dseo-svc--ai { border-color: var(--dseo-primary); background: linear-gradient(180deg,#fff 0%, #F7F5FF 100%); }
.dseo-svc__flag {
   position: absolute; top: -1px; right: 24px; padding: 5px 11px 4px;
   background: var(--dseo-primary); color: #fff; border-radius: 0 0 4px 4px;
   font-family: var(--dseo-ff-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
}

/* 4.7 Problema -> Solución -------------------------------------- */
.dseo-pain { border-top: 1px solid var(--dseo-line-dark); }
.dseo-pain__row {
   display: grid; grid-template-columns: 64px 1fr 1fr; gap: 40px; align-items: start;
   padding: 42px 0; border-bottom: 1px solid var(--dseo-line-dark);
   transition: background .4s ease;
}
.dseo-pain__row:hover { background: rgba(255,255,255,.03); }
.dseo-pain__num { font-family: var(--dseo-ff-mono); font-size: 11px; letter-spacing: 0.14em; color: rgba(255,255,255,.35); padding-top: 6px; }
.dseo-pain__q {
   font-family: var(--tp-ff-heading); font-weight: 500; font-size: 27px; line-height: 1.22;
   letter-spacing: -0.035em; color: rgba(255,255,255,.62); margin: 0;
}
.dseo-pain__q::before { content: "“"; color: var(--dseo-primary); margin-right: 2px; }
.dseo-pain__q::after { content: "”"; color: var(--dseo-primary); }
.dseo-pain__a { margin: 0; }
.dseo-pain__label {
   display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px;
   font-family: var(--dseo-ff-mono); font-size: 10.5px; letter-spacing: 0.16em;
   text-transform: uppercase; color: var(--dseo-accent);
}
.dseo-pain__label::before { content: ""; width: 16px; height: 1px; background: var(--dseo-accent); }
.dseo-pain__a p { font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.78); margin: 0 0 14px; }
.dseo-pain__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.dseo-pain__tags a {
   padding: 6px 13px 5px; border: 1px solid rgba(255,255,255,.18); border-radius: 100px;
   font-family: var(--dseo-ff-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
   color: rgba(255,255,255,.8); text-decoration: none; transition: all .3s ease;
}
.dseo-pain__tags a:hover { background: var(--dseo-accent); border-color: var(--dseo-accent); color: var(--dseo-ink); }

/* 4.8 Certificaciones Google ------------------------------------ */
.dseo-cert {
   position: relative; display: flex; flex-direction: column; align-items: center;
   text-align: center; gap: 16px; height: 100%;
   padding: 34px 24px; background: #fff; border: 1px solid var(--dseo-line); border-radius: 4px;
   transition: transform .45s cubic-bezier(.25,1,.5,1), border-color .35s ease;
}
.dseo-cert:hover { transform: translateY(-6px); border-color: var(--dseo-primary); }
.dseo-cert__img {
   width: 96px; height: 96px; object-fit: contain; display: block;
}
.dseo-cert__name {
   font-family: var(--tp-ff-heading); font-weight: 600; font-size: 16px;
   letter-spacing: -0.025em; color: var(--dseo-ink); margin: 0; line-height: 1.25;
}
.dseo-cert__meta { font-family: var(--dseo-ff-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dseo-muted); }

/* Escalas de titular de sección.
   Estaban repetidas como `style="font-size:clamp(...)"` en 113 sitios del HTML:
   cambiar la escala obligaba a tocar 113 líneas repartidas en 22 páginas, y cada
   página cargaba con el peso de repetirlo. Aquí se declaran una vez. */
.dseo-sechead__title--xl { font-size: clamp(32px, 3.6vw, 58px); }
.dseo-sechead__title--l  { font-size: clamp(32px, 3.6vw, 54px); }
.dseo-sechead__title--m  { font-size: clamp(30px, 3.2vw, 50px); }
.dseo-sechead__title--cita { line-height: 1.08; }

/* 4.9 Métricas / datos ------------------------------------------ */
.dseo-metric { padding: 32px 0; border-top: 1px solid var(--dseo-line); }
.dseo-metric__val {
   font-family: var(--dseo-ff-display); font-weight: 700; font-size: clamp(56px, 7vw, 104px);
   line-height: 0.85; letter-spacing: -0.01em; color: var(--dseo-ink); margin: 0 0 12px;
}
.dseo-metric__val em { font-family: var(--tp-ff-heading); font-style: normal; font-size: .42em; color: var(--dseo-primary); }
.dseo-metric__label { font-size: 15px; line-height: 1.5; color: var(--tp-text-px-body); margin: 0; max-width: 24ch; }
.dseo-metric--light { border-color: var(--dseo-line-dark); }
.dseo-metric--light .dseo-metric__val { color: #fff; }
.dseo-metric--light .dseo-metric__label { color: rgba(255,255,255,.6); }

/* 4.10 Proceso -------------------------------------------------- */
.dseo-step__title { font-family: var(--tp-ff-heading); font-weight: 600; font-size: 26px; letter-spacing: -0.035em; margin: 0 0 10px; color: var(--dseo-ink); }

/* 4.11 Bloque IA ------------------------------------------------ */
.dseo-ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--dseo-line-dark); border: 1px solid var(--dseo-line-dark); }
.dseo-ai-cell { background: var(--dseo-ink); padding: 34px 30px; transition: background .4s ease; }
.dseo-ai-cell:hover { background: var(--dseo-ink-2); }
.dseo-ai-cell__i { color: var(--dseo-accent); margin-bottom: 26px; display: block; line-height: 0; }
/* Los iconos venían a 24 px y se perdían en una celda de 34 px de relleno.
   El tamaño se fija aquí y no en los ocho SVG: así se cambia en un sitio. */
.dseo-ai-cell__i svg { width: 42px; height: 42px; }
.dseo-ai-cell__t { font-family: var(--tp-ff-heading); font-weight: 600; font-size: 19px; letter-spacing: -0.03em; color: #fff; margin: 0 0 10px; }
.dseo-ai-cell__p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.6); margin: 0; }

/* 4.12 Franja CTA ------------------------------------------------ */
/* El CTA final era un rectángulo violeta plano con la mitad derecha vacía.
   Ahora tiene profundidad —un destello lima arriba y una sombra abajo, más la
   retícula que usa el resto del sitio— y la columna de la derecha es una tarjeta
   de contacto de verdad, con los datos que la gente busca justo antes de escribir. */
.dseo-cta {
   position: relative; overflow: hidden;
   background: var(--dseo-primary); padding: 110px 0;
}
.dseo-cta::before {
   content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
   /* El lima va abajo a la izquierda, llenando el hueco que dejan los botones.
      Detrás de la tarjeta estorbaba: la deslavaba y parecía una mancha gris.
      El oscurecido va arriba a la derecha, justo donde la tarjeta necesita
      contraste para que su fondo translúcido se lea. */
   background-image:
      radial-gradient(52% 62% at 14% 104%, rgba(200,255,61,.20) 0%, rgba(200,255,61,0) 66%),
      radial-gradient(62% 66% at 92% -6%, rgba(10,10,10,.34) 0%, rgba(10,10,10,0) 70%);
}
.dseo-cta::after {
   content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
   background-image: repeating-linear-gradient(to right,
      rgba(255,255,255,.07) 0 1px, transparent 1px 200px);
   -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
           mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.dseo-cta > * { position: relative; z-index: 1; }

/* Tarjeta de contacto */
.dseo-cta__card {
   padding: 34px 32px 30px; border-radius: 6px;
   background: rgba(255,255,255,.08);
   border: 1px solid rgba(255,255,255,.18);
}
.dseo-cta__card-head {
   font-family: var(--dseo-ff-mono); font-size: 10px; letter-spacing: .16em;
   text-transform: uppercase; color: rgba(255,255,255,.55); margin: 0 0 18px;
}
.dseo-cta__line {
   display: flex; align-items: center; justify-content: space-between; gap: 16px;
   padding: 16px 0; border-top: 1px solid rgba(255,255,255,.16);
   color: #fff; text-decoration: none;
   font-family: var(--tp-ff-heading); font-weight: 600;
   font-size: clamp(19px, 1.9vw, 26px); letter-spacing: -.035em; line-height: 1.15;
   transition: color .3s ease;
}
.dseo-cta__line svg {
   flex: 0 0 auto; opacity: 0; transform: translateX(-6px);
   transition: opacity .3s ease, transform .3s ease;
}
.dseo-cta__line:hover { color: var(--dseo-accent); }
.dseo-cta__line:hover svg,
.dseo-cta__line:focus-visible svg { opacity: 1; transform: translateX(0); }

.dseo-cta__facts {
   display: grid; gap: 20px; margin-top: 28px;
   padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16);
}
.dseo-cta__facts p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.82); }
.dseo-cta__facts span {
   display: block; margin-bottom: 4px;
   font-family: var(--dseo-ff-mono); font-size: 9.5px; letter-spacing: .14em;
   text-transform: uppercase; color: rgba(255,255,255,.45);
}

/* Sobre violeta, el negro pesa demasiado. El lima es el acento de la marca
   y es el que más contrasta con el fondo; el relleno del hover pasa a tinta
   para que el mecanismo del sistema siga funcionando. */
.dseo-btn--accent { background: var(--dseo-accent); border-color: var(--dseo-accent); color: var(--dseo-ink); }
.dseo-btn--accent::after { background: var(--dseo-ink); }
.dseo-btn--accent:hover { color: #fff; border-color: var(--dseo-ink); }
.dseo-cta__title {
   font-family: var(--tp-ff-heading); font-weight: 600; font-size: clamp(36px, 5vw, 74px);
   line-height: 1; letter-spacing: -0.045em; color: #fff; margin: 0 0 22px;
}
.dseo-cta__text { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.8); margin: 0 0 34px; max-width: 46ch; }
.dseo-cta__actions { position: relative; display: flex; flex-wrap: wrap; gap: 14px; }

/* 4.13 Migas ---------------------------------------------------- */
.dseo-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; list-style: none; padding: 0; margin: 0 0 30px; }
.dseo-crumbs li, .dseo-crumbs a { font-family: var(--dseo-ff-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dseo-muted); text-decoration: none; }
.dseo-crumbs a:hover { color: var(--dseo-primary); }
.dseo-crumbs li[aria-current] { color: var(--dseo-ink); }
.dseo-crumbs--light li, .dseo-crumbs--light a { color: rgba(255,255,255,.5); }
.dseo-crumbs--light li[aria-current] { color: #fff; }

/* 4.14 Utilidades ------------------------------------------------ */
.dseo-rule { height: 1px; background: var(--dseo-line); border: 0; margin: 0; }
.dseo-rule--dark { background: var(--dseo-line-dark); }
.dseo-bg-ink { background: var(--dseo-ink); }
.dseo-bg-paper { background: var(--dseo-paper); }
.dseo-bg-soft { background: var(--dseo-primary-soft); }
.dseo-check { list-style: none; padding: 0; margin: 0; }
.dseo-check li { position: relative; padding-left: 30px; margin-bottom: 14px; font-size: 15.5px; line-height: 1.6; color: var(--tp-text-px-body); }
.dseo-check li::before {
   content: ""; position: absolute; left: 0; top: 8px; width: 14px; height: 8px;
   border-left: 2px solid var(--dseo-primary); border-bottom: 2px solid var(--dseo-primary);
   transform: rotate(-45deg);
}
.dseo-check--light li { color: rgba(255,255,255,.72); }
.dseo-check--light li::before { border-color: var(--dseo-accent); }

/* ---------------------------------------------------------------
   5. WHATSAPP FLOTANTE
   Aparece cuando el usuario ha recorrido el 30% de la página.
   Vive fuera de #smooth-wrapper para no ser transformado por ScrollSmoother.
   --------------------------------------------------------------- */
.dseo-wa {
   position: fixed; right: 40px; bottom: 40px; z-index: 999;
   display: flex; align-items: flex-end; gap: 14px;
   opacity: 0; visibility: hidden; transform: translateY(26px) scale(.85);
   transition: opacity .5s cubic-bezier(.25,1,.5,1),
               transform .5s cubic-bezier(.25,1,.5,1),
               visibility .5s;
   pointer-events: none;
}
.dseo-wa.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }

.dseo-wa__btn {
   position: relative; flex: 0 0 auto; width: 62px; height: 62px; border-radius: 50%;
   display: grid; place-items: center; background: #25D366; color: #fff;
   text-decoration: none; box-shadow: 0 14px 34px -10px rgba(37,211,102,.75);
   transition: transform .35s cubic-bezier(.25,1,.5,1), box-shadow .35s ease;
}
.dseo-wa__btn:hover { transform: scale(1.07); color: #fff; box-shadow: 0 18px 40px -10px rgba(37,211,102,.9); }
.dseo-wa__btn svg { width: 31px; height: 31px; }
.dseo-wa__btn::before {
   content: ""; position: absolute; inset: 0; border-radius: 50%;
   border: 2px solid #25D366; animation: dseo-wa-ring 2.6s ease-out infinite;
}
@keyframes dseo-wa-ring {
   0%   { transform: scale(1);   opacity: .8; }
   70%  { transform: scale(1.55); opacity: 0; }
   100% { transform: scale(1.55); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
   .dseo-wa__btn::before { animation: none; opacity: 0; }
   .dseo-wa { transition: opacity .3s linear; transform: none; }
   .dseo-wa.is-visible { transform: none; }
}

/* Globo de invitación */
.dseo-wa__bubble {
   position: relative; max-width: 262px; padding: 16px 42px 16px 18px;
   background: #fff; border: 1px solid var(--dseo-line); border-radius: 14px 14px 2px 14px;
   box-shadow: 0 20px 45px -25px rgba(10,10,10,.5);
   transform-origin: bottom right;
   animation: dseo-wa-in .55s .35s cubic-bezier(.25,1,.5,1) both;
}
.dseo-wa.is-dismissed .dseo-wa__bubble { display: none; }
@keyframes dseo-wa-in {
   from { opacity: 0; transform: translateX(14px) scale(.9); }
   to   { opacity: 1; transform: translateX(0) scale(1); }
}
.dseo-wa__bubble strong {
   display: block; font-family: var(--tp-ff-heading); font-weight: 600; font-size: 15px;
   letter-spacing: -0.025em; color: var(--dseo-ink); margin-bottom: 4px;
}
.dseo-wa__bubble span { display: block; font-size: 13px; line-height: 1.45; color: var(--tp-text-px-body); }
.dseo-wa__bubble a { color: var(--dseo-primary); text-decoration: none; }
.dseo-wa__close {
   position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; padding: 0;
   border: 0; border-radius: 50%; background: var(--dseo-paper); color: var(--dseo-muted);
   cursor: pointer; display: grid; place-items: center; line-height: 0;
   transition: background .3s ease, color .3s ease;
}
.dseo-wa__close:hover { background: var(--dseo-ink); color: #fff; }
.dseo-wa__status {
   display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
   font-family: var(--dseo-ff-mono); font-size: 9.5px; letter-spacing: 0.12em;
   text-transform: uppercase; color: #12A150;
}
.dseo-wa__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #25D366; }

/* El botón "volver arriba" se apila encima del de WhatsApp */
.back-to-top-wrapper { right: 49px; }
.back-to-top-wrapper.back-to-top-btn-show { bottom: 130px; }
.back-to-top-btn { background: var(--dseo-ink); color: #fff; box-shadow: 0 8px 20px rgba(10,10,10,.28); }

@media (max-width: 767px) {
   .dseo-wa { right: 16px; bottom: 16px; }
   .dseo-wa__btn { width: 56px; height: 56px; }
   .dseo-wa__btn svg { width: 28px; height: 28px; }
   .dseo-wa__bubble { display: none; }
   .back-to-top-wrapper { right: 22px; }
   .back-to-top-wrapper.back-to-top-btn-show { bottom: 88px; }
}

/* ---------------------------------------------------------------
   6. RESPONSIVE
   --------------------------------------------------------------- */
@media (max-width: 1199px) {
   .dseo-pain__row { grid-template-columns: 48px 1fr; gap: 14px 28px; }
   .dseo-pain__num { grid-row: 1; }
   .dseo-pain__a { grid-column: 2; }
}
@media (max-width: 767px) {
   .dseo-sechead { margin-bottom: 40px; }
   .dseo-pillar, .dseo-svc { padding: 30px 24px 26px; }
   .dseo-pain__row { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; }
   .dseo-pain__a { grid-column: 1; }
   .dseo-pain__q { font-size: 22px; }
         .dseo-cta { padding: 70px 0; }
   .dseo-cta__card { padding: 26px 22px 24px; }
   .dseo-lead { font-size: 17px; }
}

/* Accesibilidad: foco visible coherente con la marca */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
   outline: 2px solid var(--dseo-primary); outline-offset: 3px; border-radius: 2px;
}
.dseo-skip {
   position: absolute; left: -9999px; top: 0; z-index: 1000;
   background: var(--dseo-ink); color: #fff; padding: 12px 20px;
   font-family: var(--dseo-ff-mono); font-size: 12px;
}
.dseo-skip:focus { left: 12px; top: 12px; color: #fff; }

/* ---------------------------------------------------------------
   7. HERO PROPIO
   Sin fotografía: composición tipográfica sobre fondo oscuro.
   Evita depender de banco de imágenes y carga casi nada.
   --------------------------------------------------------------- */
.dseo-hero {
   position: relative; overflow: hidden;
   background: var(--dseo-ink); color: #fff;
   padding: 190px 0 0;
   isolation: isolate;
}
.dseo-hero::before {
   content: ""; position: absolute; z-index: 0; inset: 0;
   background:
      radial-gradient(58% 46% at 82% 8%, rgba(75,43,239,.55) 0%, rgba(75,43,239,0) 70%),
      radial-gradient(42% 40% at 8% 92%, rgba(200,255,61,.16) 0%, rgba(200,255,61,0) 70%);
}
.dseo-hero::after {
   content: ""; position: absolute; z-index: 0; inset: 0; opacity: .5;
   background-image:
      linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
   background-size: 96px 96px;
   -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%);
           mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%);
}
.dseo-hero > * { position: relative; z-index: 1; }

.dseo-hero__kicker {
   display: inline-flex; align-items: center; gap: 12px; margin-bottom: 30px;
   font-family: var(--dseo-ff-mono); font-size: 11.5px; letter-spacing: 0.2em;
   text-transform: uppercase; color: var(--dseo-accent);
}
.dseo-hero__kicker::before { content: ""; width: 34px; height: 1px; background: var(--dseo-accent); }

.dseo-hero__title {
   font-family: var(--dseo-ff-display); font-weight: 700;
   font-size: clamp(56px, 8.6vw, 168px); line-height: .84;
   letter-spacing: -0.012em; text-transform: uppercase; color: #fff;
   margin: 0 0 30px;
}
.dseo-hero__title .dseo-em { color: var(--dseo-accent); text-transform: none; font-size: .92em; }

.dseo-hero__lead {
   font-size: clamp(16px, 1.35vw, 20px); line-height: 1.55; letter-spacing: -0.015em;
   color: rgba(255,255,255,.72); max-width: 54ch; margin: 0 0 36px;
}
.dseo-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.dseo-hero__aside {
   border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
   padding: 26px 24px; background: rgba(255,255,255,.03);
   backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.dseo-hero__aside h2 {
   font-family: var(--tp-ff-heading); font-weight: 600; font-size: 20px;
   letter-spacing: -0.035em; color: #fff; margin: 18px 0 10px; line-height: 1.2;
}
.dseo-hero__aside p { font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.62); margin: 0; }
.dseo-hero__aside hr { border: 0; height: 1px; background: rgba(255,255,255,.12); margin: 22px 0; }
.dseo-hero__aside .dseo-hero__ask {
   font-family: var(--dseo-ff-editorial); font-style: italic; font-size: 18px;
   color: rgba(255,255,255,.9); line-height: 1.35; margin: 0 0 10px;
}
.dseo-hero__aside .dseo-hero__ans {
   display: inline-flex; align-items: center; gap: 8px;
   font-family: var(--dseo-ff-mono); font-size: 10.5px; letter-spacing: 0.14em;
   text-transform: uppercase; color: var(--dseo-accent);
}

.dseo-hero__ticker {
   margin-top: 86px; border-top: 1px solid rgba(255,255,255,.14);
   display: grid; grid-template-columns: repeat(4, 1fr);
}
.dseo-hero__tick {
   padding: 26px 26px 30px; border-right: 1px solid rgba(255,255,255,.14);
   display: flex; flex-direction: column; gap: 10px; text-decoration: none;
   transition: background .4s ease;
}
.dseo-hero__tick:last-child { border-right: 0; }
.dseo-hero__tick:hover { background: rgba(255,255,255,.05); }
.dseo-hero__tick span:first-child {
   font-family: var(--dseo-ff-mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--dseo-accent);
}
.dseo-hero__tick span:last-child {
   font-family: var(--tp-ff-heading); font-weight: 500; font-size: 18px;
   letter-spacing: -0.03em; color: rgba(255,255,255,.9);
}

@media (max-width: 991px) {
   .dseo-hero { padding-top: 150px; }
   .dseo-hero__ticker { grid-template-columns: repeat(2, 1fr); margin-top: 56px; }
   .dseo-hero__tick:nth-child(2n) { border-right: 0; }
   .dseo-hero__tick:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.14); }
}
@media (max-width: 575px) {
   .dseo-hero { padding-top: 130px; }
   .dseo-hero__ticker { grid-template-columns: 1fr; }
   .dseo-hero__tick { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
   .dseo-hero__actions .dseo-btn { width: 100%; justify-content: center; }
}

/* Cabecera fija sobre hero oscuro */
/* El color del logo lo decide ahora .dseo-on-dark, que mira qué sección
   queda detrás de la cabecera transparente. */
.dseo-header-on-dark .px-header-menu nav > ul > li > a { color: rgba(255,255,255,.85); }
.dseo-header-on-dark .px-header-menu nav > ul > li > a:hover { color: #fff; }
.dseo-header-on-dark .px-header-bar span { background: #fff; }
.dseo-nav-current { color: var(--dseo-primary) !important; }
.dseo-header-on-dark .dseo-nav-current { color: var(--dseo-accent) !important; }

/* Cabecera interna sobre fondo claro */
.dseo-pagehead { padding: 170px 0 70px; background: var(--dseo-paper); }
.dseo-pagehead__title {
   font-family: var(--dseo-ff-display); font-weight: 700;
   font-size: clamp(48px, 7vw, 132px); line-height: .86; letter-spacing: -0.012em;
   text-transform: uppercase; color: var(--dseo-ink); margin: 0 0 24px;
}
.dseo-pagehead__title .dseo-em { text-transform: none; color: var(--dseo-primary); font-size: .9em; }
.dseo-pagehead__lead { font-size: clamp(16px,1.3vw,19px); line-height: 1.6; color: var(--tp-text-px-body); max-width: 60ch; margin: 0; }
.dseo-pagehead--dark { background: var(--dseo-ink); }
.dseo-pagehead--dark .dseo-pagehead__title { color: #fff; }
.dseo-pagehead--dark .dseo-pagehead__title .dseo-em { color: var(--dseo-accent); }
.dseo-pagehead--dark .dseo-pagehead__lead { color: rgba(255,255,255,.7); }

/* Al fijarse, la cabecera gana fondo claro: el texto blanco debe volver a oscuro */
.header-fixed::after {
   background-color: rgba(250, 249, 247, .82);
   box-shadow: 0 1px 0 0 rgba(10, 10, 10, .07);
   border-radius: 0 0 8px 8px;
}
.dseo-header-on-dark.sticky-bg .px-header-menu nav > ul > li > a { color: var(--dseo-ink); }
.dseo-header-on-dark.sticky-bg .px-header-menu nav > ul > li > a:hover { color: var(--dseo-primary); }
.dseo-header-on-dark.sticky-bg .px-header-bar span { background: var(--dseo-ink); }
.dseo-header-on-dark.sticky-bg .dseo-nav-current { color: var(--dseo-primary) !important; }

/* El megamenú siempre sobre fondo claro */
.px-header-menu .px-megamenu .px-megamenu-title {
   font-family: var(--dseo-ff-mono); font-size: 10.5px; letter-spacing: 0.16em;
   text-transform: uppercase; color: var(--dseo-primary);
}
.px-header-menu .tp-submenu li a { letter-spacing: -0.015em; }

/* ---------------------------------------------------------------
   8. FORMULARIO DE CONTACTO
   --------------------------------------------------------------- */
#contact-form .tp-contact-form-input { display: flex; flex-direction: column; gap: 8px; }
#contact-form label.dseo-mono { color: var(--dseo-muted); font-size: 10.5px; }
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="tel"],
#contact-form select,
#contact-form textarea {
   width: 100%; padding: 15px 18px; border-radius: 8px;
   border: 1px solid var(--dseo-line); background: #fff;
   font-family: var(--tp-ff-body); font-size: 15.5px; color: var(--dseo-ink);
   letter-spacing: -0.01em; line-height: 1.4;
   transition: border-color .3s ease, box-shadow .3s ease;
   appearance: none; -webkit-appearance: none;
}
#contact-form select {
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B6B76' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat; background-position: right 18px center;
   padding-right: 44px; cursor: pointer;
}
#contact-form textarea { min-height: 140px; resize: vertical; }
#contact-form input::placeholder,
#contact-form textarea::placeholder { color: #A5A5AE; }
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
   outline: none; border-color: var(--dseo-primary);
   box-shadow: 0 0 0 3px rgba(75, 43, 239, .12);
}
#contact-form .has-error { border-color: #D6342C !important; box-shadow: 0 0 0 3px rgba(214,52,44,.10) !important; }
#contact-form input[type="checkbox"] {
   width: 18px; height: 18px; flex: 0 0 18px; border-radius: 4px;
   border: 1px solid var(--dseo-line); background: #fff; cursor: pointer; appearance: none;
}
#contact-form input[type="checkbox"]:checked {
   background: var(--dseo-primary); border-color: var(--dseo-primary);
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' fill='none'%3E%3Cpath d='M1 4.5 4.3 7.8 11 1.2' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   background-repeat: no-repeat; background-position: center;
}
#contact-form input[type="checkbox"].has-error { border-color: #D6342C; }

#contact-form .tp-contact-form-btn button {
   position: relative; overflow: hidden; border: 0; cursor: pointer;
   padding: 19px 34px; border-radius: 100px;
   background: var(--dseo-ink); color: #fff;
   font-family: var(--tp-ff-body); font-weight: 500; font-size: 16px; letter-spacing: -0.01em;
   transition: background .35s ease, color .35s ease;
}
#contact-form .tp-contact-form-btn button:hover { background: var(--dseo-primary); color: #fff; }
#contact-form .tp-contact-form-btn button .text-2 { display: none; }

.ajax-response { font-family: var(--dseo-ff-mono); font-size: 12px; letter-spacing: .04em; margin-top: 14px; }
.ajax-response.success { color: #12A150; }
.ajax-response.error   { color: #D6342C; }
.ajax-response.info    { color: var(--dseo-muted); }

/* ---------------------------------------------------------------
   9. PÁGINAS LEGALES
   --------------------------------------------------------------- */
.dseo-legal h2 {
   font-family: var(--tp-ff-heading); font-weight: 600; font-size: 26px;
   letter-spacing: -0.035em; color: var(--dseo-ink); margin: 44px 0 14px;
}
.dseo-legal h2:first-child { margin-top: 0; }
.dseo-legal p { font-size: 16.5px; line-height: 1.7; color: var(--tp-text-px-body); margin: 0 0 14px; }
.dseo-legal a { color: var(--dseo-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Enlace activo del menú y detalles del megamenú */
.px-megamenu-box li a { font-size: 15px; }

/* Encabezado de página: variante con lead destacado (páginas de servicio) */
.dseo-pagehead__lead--big {
   font-size: clamp(20px, 2.2vw, 30px); line-height: 1.3; letter-spacing: -0.03em;
   font-family: var(--tp-ff-heading); font-weight: 500; max-width: 24ch;
}
.dseo-pagehead--dark .dseo-pagehead__lead--big { color: rgba(255,255,255,.92); }
.dseo-pagehead { padding-bottom: 96px; }

/* El template pone las pistas de los campos en mayúsculas; se normalizan para leer mejor */
#contact-form .tp-contact-form-input input::placeholder,
#contact-form .tp-contact-form-input textarea::placeholder,
.px-contact-wrapper .tp-contact-form-input input::placeholder,
.px-contact-wrapper .tp-contact-form-input textarea::placeholder {
   text-transform: none; font-size: 15px; letter-spacing: -0.01em; color: #A5A5AE; opacity: 1;
}
/* El formulario propio vuelve a campos con caja, no líneas */
.px-contact-wrapper #contact-form .tp-contact-form-input input,
.px-contact-wrapper #contact-form .tp-contact-form-input textarea {
   border: 1px solid var(--dseo-line); border-radius: 8px;
   background: #fff; padding: 15px 18px; height: auto; text-transform: none;
}
.px-contact-wrapper #contact-form .tp-contact-form-input textarea { min-height: 140px; }
.px-contact-wrapper #contact-form .tp-contact-form-input input:focus,
.px-contact-wrapper #contact-form .tp-contact-form-input textarea:focus {
   border-color: var(--dseo-primary); box-shadow: 0 0 0 3px rgba(75,43,239,.12);
}
.px-contact-wrapper { background-color: #fff; }

/* ---------------------------------------------------------------
   10. CONTENCIÓN HORIZONTAL
   El marquee usa la nomenclatura .swiper-container (Swiper 6) mientras la
   librería incluida estiliza .swiper, así que el contenedor se queda sin
   recorte y desborda en móvil. Se recorta aquí.
   `clip` en lugar de `hidden`: no crea contexto de scroll, así que no
   interfiere con los anclajes de ScrollTrigger.
   --------------------------------------------------------------- */
.swiper-container { overflow: hidden; }
html, body { overflow-x: clip; max-width: 100%; }
@supports not (overflow: clip) {
   body { overflow-x: hidden; }
}

/* ---------------------------------------------------------------
   11. ICONOS SIN FONT AWESOME
   Se retiró Font Awesome (465 KB de CSS + hasta 400 KB de fuentes) porque
   solo alimentaba cuatro iconos sociales y dos flechas. Los sociales pasaron
   a SVG en línea; estas dos flechas se dibujan con CSS.
   --------------------------------------------------------------- */

/* Flecha del desplegable en el menú principal */
.tp-header-dropdown nav ul li.has-dropdown > a::after {
   content: ""; font-family: inherit;
   width: 8px; height: 8px; margin-left: 8px;
   border-right: 1.6px solid currentColor;
   border-bottom: 1.6px solid currentColor;
   transform: translateY(-2px) rotate(45deg);
   transform-origin: center;
   transition: transform .3s ease;
}
.tp-header-dropdown nav ul li.has-dropdown:hover > a::after {
   transform: translateY(1px) rotate(-135deg);
}

/* Botón +/- del menú móvil (lo inyecta main.js) */
.tp-offcanvas-menu .tp-menu-close {
   position: absolute; right: 0; top: 6px;
   width: 34px; height: 34px; padding: 0;
   border: 1px solid var(--dseo-line); border-radius: 50%;
   background: transparent; cursor: pointer;
}
.tp-offcanvas-menu .tp-menu-close i { display: none; }
.tp-offcanvas-menu .tp-menu-close::before,
.tp-offcanvas-menu .tp-menu-close::after {
   content: ""; position: absolute; left: 50%; top: 50%;
   background: var(--dseo-ink); border-radius: 2px;
   transform: translate(-50%, -50%); transition: transform .3s ease, opacity .3s ease;
}
.tp-offcanvas-menu .tp-menu-close::before { width: 12px; height: 1.6px; }
.tp-offcanvas-menu .tp-menu-close::after  { width: 1.6px; height: 12px; }
.tp-offcanvas-menu li.active > .tp-menu-close::after { opacity: 0; transform: translate(-50%,-50%) rotate(90deg); }
.tp-offcanvas-menu nav > ul > li { position: relative; }

/* Iconos sociales en SVG */
.tp-offcanvas-social ul a,
.px-footer-widget-social a { display: inline-flex; align-items: center; justify-content: center; }

/* ---------------------------------------------------------------
   12. FUENTES PROPIAS, REDECLARADAS
   main.css declara Thunder y Morganite con el orden eot → woff → woff2 y sin
   font-display, así que el navegador descarga el .woff (más pesado) y oculta
   el texto mientras carga. Como el titular del hero usa Thunder, eso golpea
   directamente al LCP. Estas declaraciones llegan después y sustituyen a las
   anteriores: woff2 primero y `swap` para que el texto nunca desaparezca.
   --------------------------------------------------------------- */
@font-face {
   font-family: "Thunder";
   src: url("../fonts/Thunder-BoldLC.woff2") format("woff2"),
        url("../fonts/Thunder-BoldLC.woff") format("woff");
   font-style: normal; font-weight: bold; font-display: swap;
}
@font-face {
   font-family: "ThunderMed";
   src: url("../fonts/Thunder-MediumLC.woff2") format("woff2"),
        url("../fonts/Thunder-MediumLC.woff") format("woff");
   font-style: normal; font-weight: normal; font-display: swap;
}
@font-face {
   font-family: "Morganite-Bold";
   src: url("../fonts/Morganite-ExtraBold.woff2") format("woff2"),
        url("../fonts/Morganite-ExtraBold.woff") format("woff");
   font-style: normal; font-weight: 800; font-display: swap;
}

/* ---------------------------------------------------------------
   13. METODOLOGÍA — PANEL FIJADO + TARJETAS QUE SE APILAN
   Reutiliza el mecanismo del template (.px-step-item se fija,
   .px-step-card se fija y rota ±5°, ver main.js) y lo reviste con la
   identidad DSEO. El panel es claro a propósito: el vídeo se funde con
   él mediante mix-blend-mode: multiply, igual que en el original.
   --------------------------------------------------------------- */
.dseo-steps { background: var(--dseo-paper-2); }
.dseo-steps-outro { background: var(--dseo-paper-2); }

/* --- panel que se fija --- */
.dseo-steps__stage {
   height: 100vh; min-height: 640px;
   background: var(--dseo-paper-2); overflow: hidden; isolation: isolate;
}
.dseo-steps__stage::before {
   content: ""; position: absolute; inset: 0; z-index: 0;
   background:
      radial-gradient(46% 40% at 78% 16%, rgba(75,43,239,.10) 0%, rgba(75,43,239,0) 70%),
      radial-gradient(38% 34% at 10% 88%, rgba(200,255,61,.20) 0%, rgba(200,255,61,0) 70%);
}
.dseo-steps__stage::after {
   content: ""; position: absolute; inset: 0; z-index: 0; opacity: .8;
   background-image:
      linear-gradient(to right, rgba(10,10,10,.035) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(10,10,10,.035) 1px, transparent 1px);
   background-size: 96px 96px;
   -webkit-mask-image: radial-gradient(70% 70% at 42% 46%, #000 24%, transparent 100%);
           mask-image: radial-gradient(70% 70% at 42% 46%, #000 24%, transparent 100%);
}
.dseo-steps__stage > * { position: relative; z-index: 1; }

/* --- vídeo --- */
.dseo-steps__media {
   position: absolute; z-index: 1;
   top: 52%; left: 7%; transform: translateY(-50%);
   width: min(46vw, 680px); pointer-events: none;
   mix-blend-mode: multiply;      /* debe ir aquí, no en el <video>: el z-index
                                     del hijo crea un contexto de apilamiento
                                     que dejaría la mezcla aislada del panel */
}
.dseo-steps__media video { width: 100%; height: auto; display: block; }

/* --- palabra grande --- */
.dseo-steps__word {
   position: absolute; z-index: 2; top: 120px; left: 46px; bottom: auto;
}
.dseo-steps__word span {
   font-family: var(--dseo-ff-display); font-weight: 700;
   font-size: clamp(64px, 10vw, 172px); line-height: .82; letter-spacing: -.02em;
   text-transform: uppercase; color: var(--dseo-ink); display: block;
}
.dseo-steps__word small {
   display: block; margin-bottom: 14px;
   font-family: var(--dseo-ff-mono); font-size: 11px; letter-spacing: .2em;
   text-transform: uppercase; color: var(--dseo-primary);
}

/* --- indicador de etapa --- */
.dseo-steps__rail {
   list-style: none; margin: 0; padding: 0;
   display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px;
}
.dseo-steps__rail li {
   display: flex; align-items: center; gap: 9px;
   font-family: var(--dseo-ff-mono); font-size: 10.5px; letter-spacing: .14em;
   text-transform: uppercase; color: rgba(10,10,10,.32);
   transition: color .4s ease;
}
.dseo-steps__rail li::before {
   content: ""; width: 6px; height: 6px; border-radius: 50%;
   background: currentColor; transition: transform .45s cubic-bezier(.34,1.2,.4,1);
}
.dseo-steps__rail li.is-active { color: var(--dseo-primary); }
.dseo-steps__rail li.is-active::before { transform: scale(1.9); }
.dseo-steps__rail li.is-past { color: rgba(10,10,10,.55); }

/* --- barra inferior --- */
.dseo-steps__bar {
   padding: 12px 46px; border-top: 1px solid rgba(10,10,10,.16);
   border-bottom: 1px solid rgba(10,10,10,.16);
}
.dseo-steps__bar span {
   font-family: var(--dseo-ff-mono); font-size: 11px; letter-spacing: .16em;
   text-transform: uppercase; color: var(--dseo-muted);
}
.dseo-steps__bar .text-2 { margin-left: 0; color: var(--dseo-ink); }

/* --- tarjetas --- */
.dseo-steps .px-step-card-wrap { position: relative; z-index: 4; }
.dseo-steps .px-step-card {
   max-width: 520px; padding: 46px 46px 38px; margin-bottom: 220px;
   border-radius: 6px; box-shadow: 0 40px 90px -55px rgba(10,10,10,.7);
}
.dseo-steps .px-step-card-badge {
   font-family: var(--dseo-ff-mono); font-size: 10px; font-weight: 500;
   letter-spacing: .16em; text-transform: uppercase;
   padding: 7px 13px 6px; border-radius: 100px; display: inline-block;
   background: rgba(10,10,10,.1); color: inherit;
}
.dseo-steps .px-step-card-content { margin-bottom: 44px; }
.dseo-steps .px-step-card-content span {
   font-family: var(--dseo-ff-display-med); font-weight: 500;
   font-size: clamp(120px, 15vw, 210px); line-height: .68;
   letter-spacing: -.01em; color: inherit; display: block;
}
.dseo-steps .px-step-card-content p {
   font-family: var(--tp-ff-body); font-size: 16.5px; line-height: 1.5;
   color: inherit; opacity: .84; margin: 14px 0 0;
}
.dseo-steps .px-step-title {
   font-family: var(--dseo-ff-display); font-weight: 700;
   font-size: clamp(44px, 5vw, 76px); line-height: .88; letter-spacing: -.012em;
   text-transform: uppercase; color: inherit; margin: 0 0 14px;
}
.dseo-steps .px-step-meta {
   font-family: var(--dseo-ff-mono); font-size: 10.5px; letter-spacing: .16em;
   text-transform: uppercase; margin: 0; opacity: .78;
}
/* Sobre las tarjetas oscuras el plazo se marca en lima: a .78 de blanco
   apenas se leía. */
.dseo-card-03 .px-step-meta,
.dseo-card-04 .px-step-meta { color: var(--dseo-accent); opacity: 1; }

/* Secuencia cromática de las etapas, alternando claro y oscuro */
.dseo-card-01 { background: var(--dseo-accent);       color: var(--dseo-ink); }
.dseo-card-02 { background: var(--dseo-primary-soft); color: var(--dseo-ink); }
.dseo-card-03 { background: var(--dseo-primary);      color: #fff; }
.dseo-card-04 { background: var(--dseo-ink);          color: #fff; }
.dseo-card-05 { background: var(--dseo-accent);       color: var(--dseo-ink); }
.dseo-card-03 .px-step-card-badge,
.dseo-card-04 .px-step-card-badge { background: rgba(255,255,255,.16); }

/* --- por debajo de 1200px el template no fija ni rota: lista limpia --- */
@media (max-width: 1199px) {
   .dseo-steps__stage { height: auto; min-height: 0; padding-top: 80px; }
   .dseo-steps__media { position: relative; top: auto; left: auto; transform: none;
                        width: min(86%, 520px); margin: 0 auto 20px; }
   .dseo-steps__word  { position: relative; top: auto; left: auto; padding: 0 24px 36px; }
   .dseo-steps__rail  { gap: 8px 16px; padding: 6px 0; }
   .dseo-steps__bar   { padding: 14px 24px; }
   .dseo-steps__bar .text-2 { display: none; }
   .dseo-steps .px-step-card-wrap { padding: 56px 0 16px; }
   .dseo-steps .px-step-card { max-width: none; margin-bottom: 24px; padding: 34px 30px 30px; }
   /* A todo el ancho, el párrafo alineado a la derecha deja un borde izquierdo
      irregular difícil de leer: se alinea a la izquierda. */
   .dseo-steps .px-step-card-content { margin-bottom: 24px; text-align: left !important; }
}
@media (max-width: 575px) {
   .dseo-steps__word span { font-size: 58px; }
   .dseo-steps .px-step-card-content span { font-size: 104px; }
}

/* Título accesible que no se dibuja: la sección lo necesita para el índice
   de encabezados, pero visualmente ya está en el panel. */
.visually-hidden-dseo {
   position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
   overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------
   14. MENÚ A PANTALLA COMPLETA
   Mecanismo tomado de index-2: el fondo se revela con un clip-path
   circular desde la esquina superior derecha y las columnas entran
   escalonadas (main.js alterna .menu-open sobre .px-offcanvas-2-area).
   Aquí solo se reviste con la identidad DSEO.
   --------------------------------------------------------------- */

/* --- botón hamburguesa --- */
.tp-hamburger-btn {
   width: 54px; height: 54px; padding: 0; border-radius: 50%;
   display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
   gap: 7px; cursor: pointer;
   background: var(--dseo-ink); border: 1px solid rgba(255,255,255,.16);
   transition: background .35s ease, border-color .35s ease, transform .35s ease;
}
.tp-hamburger-btn:hover { transform: scale(1.06); }
.tp-hamburger-btn span {
   display: block; width: 22px; height: 2px; border-radius: 2px; margin: 0;
   background: #fff; transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.tp-hamburger-btn.active { background: transparent; border-color: rgba(255,255,255,.35); }
.tp-hamburger-btn.active span:nth-child(1) { transform: rotate(45deg) translate(3px, 3px); }
.tp-hamburger-btn.active span:nth-child(2) { transform: rotate(-45deg) translate(3px, -3px); }

/* --- fondo que se abre en círculo --- */
.dseo-menu .offcanvas-bg { background: var(--dseo-ink); margin: 14px; border-radius: 18px; }
.dseo-menu .px-offcanvas-2-wrapper { padding: 150px 60px 0; margin-bottom: 48px; }

/* --- ítems del menú --- */
.dseo-menu .tp-offcanvas-menu { margin-bottom: 56px; }
.dseo-menu .px-offcanvas-2-left .tp-offcanvas-menu { margin-bottom: 56px; }
.dseo-menu .px-offcanvas-2-left .tp-offcanvas-menu ul {
   max-height: min(62vh, 640px); padding-right: 10px;
   -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
           mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
}
.dseo-menu .px-offcanvas-2-wrapper .tp-offcanvas-menu > nav > ul > li > a {
   font-family: var(--dseo-ff-display); font-weight: 700;
   font-size: clamp(46px, 7.4vw, 116px); line-height: .82; letter-spacing: -.012em;
   text-transform: uppercase; color: #fff; padding: 0;
   display: inline-block; transition: color .3s ease, transform .45s cubic-bezier(.22,1,.36,1);
}
.dseo-menu .px-offcanvas-2-wrapper .tp-offcanvas-menu > nav > ul > li > a:hover {
   color: var(--dseo-accent); transform: translateX(16px);
}
/* La página actual se marca en lima: el violeta de la cabecera pierde
   contraste sobre el fondo oscuro del panel. */
.dseo-menu .tp-offcanvas-menu a.dseo-nav-current { color: var(--dseo-accent) !important; }
.dseo-menu .px-offcanvas-2-wrapper .tp-offcanvas-menu > nav > ul > li .submenu { margin-bottom: 26px; padding-top: 10px; }
.dseo-menu .px-offcanvas-2-wrapper .tp-offcanvas-menu > nav > ul > li .submenu > li > a {
   font-family: var(--tp-ff-heading); font-weight: 500; font-size: 19px;
   letter-spacing: -.025em; color: rgba(255,255,255,.5); padding: 7px 0;
}
.dseo-menu .px-offcanvas-2-wrapper .tp-offcanvas-menu > nav > ul > li .submenu > li > a:hover { color: #fff; }
/* El megamenú del escritorio se aplana dentro del panel.
   Sin regla para .active a propósito: main.js añade esa clase ANTES de llamar
   a slideToggle(), así que si el estado abierto se forzara por CSS, jQuery
   leería "visible" en ese instante y cerraría el desplegable en vez de abrirlo.
   La visibilidad la gobierna jQuery con estilo en línea. */
.dseo-menu .tp-offcanvas-menu .px-megamenu { display: none; }
.dseo-menu .tp-offcanvas-menu .px-megamenu .row { --bs-gutter-x: 24px; }
.dseo-menu .tp-offcanvas-menu .px-megamenu-box { padding: 6px 0 14px; }
.dseo-menu .tp-offcanvas-menu .px-megamenu-title {
   font-family: var(--dseo-ff-mono); font-size: 10px; letter-spacing: .18em;
   text-transform: uppercase; color: var(--dseo-accent); display: block; margin-bottom: 6px;
}
.dseo-menu .tp-offcanvas-menu .px-megamenu-box li a {
   font-family: var(--tp-ff-heading); font-weight: 500; font-size: 16px;
   letter-spacing: -.02em; color: rgba(255,255,255,.55); padding: 6px 0; border-radius: 0;
}
.dseo-menu .tp-offcanvas-menu .px-megamenu-box li a:hover { background: transparent; color: #fff; }

/* Cada ítem es una fila flexible: el título y su botón se alinean solos y el
   desplegable salta a una línea completa. Así el + no se descoloca al abrirse. */
.dseo-menu .tp-offcanvas-menu > nav > ul > li {
   display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px;
}
/* main.js añade el botón DESPUÉS del desplegable, así que el orden visual se
   fija aquí: título, botón y, en una línea propia, el desplegable. */
.dseo-menu .tp-offcanvas-menu > nav > ul > li > a { flex: 0 0 auto; order: 1; }
.dseo-menu .tp-offcanvas-menu > nav > ul > li > .tp-menu-close { order: 2; }
.dseo-menu .tp-offcanvas-menu > nav > ul > li > .submenu { flex: 1 0 100%; order: 3; }

/* Botón + / − de los desplegables, sobre fondo oscuro */
.dseo-menu .tp-offcanvas-menu .tp-menu-close {
   position: relative; top: auto; right: auto;
   margin-left: auto; flex: 0 0 auto; transform: none;
   width: 42px; height: 42px; border-color: rgba(255,255,255,.22);
   transition: border-color .3s ease, transform .35s ease;
}
.dseo-menu .tp-offcanvas-menu .tp-menu-close:hover { transform: scale(1.08); }
.dseo-menu .tp-offcanvas-menu .tp-menu-close::before,
.dseo-menu .tp-offcanvas-menu .tp-menu-close::after { background: #fff; }
.dseo-menu .tp-offcanvas-menu .tp-menu-close::before { width: 15px; height: 2px; }
.dseo-menu .tp-offcanvas-menu .tp-menu-close::after  { width: 2px; height: 15px; }
.dseo-menu .tp-offcanvas-menu li.active > .tp-menu-close { border-color: var(--dseo-accent); }
.dseo-menu .tp-offcanvas-menu li.active > .tp-menu-close::before,
.dseo-menu .tp-offcanvas-menu li.active > .tp-menu-close::after { background: var(--dseo-accent); }

/* --- botonera --- */
.dseo-menu .px-offcanvas-2-left-btn-box { gap: 12px; flex-wrap: wrap; }
.dseo-menu .px-offcanvas-2-left-btn-box .dseo-btn { flex: 1 1 220px; justify-content: center; }

/* --- columna derecha --- */
.dseo-menu .tp-offcanvas-social ul { justify-content: flex-end; }
.dseo-menu .tp-offcanvas-social ul li a {
   width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
   color: rgba(255,255,255,.85); background: rgba(255,255,255,.06);
   border: 1px solid rgba(255,255,255,.14); border-radius: 50%;
}
.dseo-menu .tp-offcanvas-social ul li a:hover {
   background: var(--dseo-accent); border-color: var(--dseo-accent); color: var(--dseo-ink);
}

.dseo-menu-card {
   margin-left: auto; max-width: 520px;
   padding: 34px 34px 30px; border-radius: 16px;
   background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.13);
   backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.dseo-menu-card__k {
   display: block; margin-bottom: 16px;
   font-family: var(--dseo-ff-mono); font-size: 10.5px; letter-spacing: .18em;
   text-transform: uppercase; color: var(--dseo-accent);
}
.dseo-menu-card__t {
   font-family: var(--tp-ff-heading); font-weight: 600; font-size: clamp(24px, 2.2vw, 34px);
   line-height: 1.06; letter-spacing: -.04em; color: #fff; margin: 0 0 14px;
}
.dseo-menu-card__t em {
   font-family: var(--dseo-ff-editorial); font-style: italic; font-weight: 400;
   color: var(--dseo-accent); letter-spacing: -.01em;
}
.dseo-menu-card__p { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.6); margin: 0 0 22px; }
.dseo-menu-card__c { display: grid; gap: 4px; margin-bottom: 22px; }
.dseo-menu-card__c a {
   font-family: var(--tp-ff-heading); font-weight: 500; font-size: 20px;
   letter-spacing: -.03em; color: #fff; text-decoration: none; width: fit-content;
   border-bottom: 1px solid transparent; transition: border-color .3s ease;
}
.dseo-menu-card__c a:hover { border-color: var(--dseo-accent); color: #fff; }
.dseo-menu-card__wa {
   display: inline-flex; align-items: center; gap: 9px;
   font-family: var(--dseo-ff-mono); font-size: 11px; letter-spacing: .14em;
   text-transform: uppercase; color: var(--dseo-accent); text-decoration: none;
}
.dseo-menu-card__wa svg { transition: transform .35s ease; }
.dseo-menu-card__wa:hover { color: var(--dseo-accent); }
.dseo-menu-card__wa:hover svg { transform: translate(3px,-3px); }

/* --- la cabecera se aparta mientras el menú está abierto --- */
.dseo-menu-open .px-header-menu,
.dseo-menu-open .px-header-action .dseo-btn {
   opacity: 0; visibility: hidden; pointer-events: none;
   transition: opacity .3s ease, visibility .3s ease;
}
.dseo-menu-open .dseo-logo__name { color: #fff; }
.dseo-menu-open .dseo-logo__tag { color: rgba(255,255,255,.55); }
.dseo-menu-open .header-fixed::after { opacity: 0 !important; visibility: hidden !important; }
.dseo-menu-open .back-to-top-wrapper, .dseo-menu-open .dseo-wa { opacity: 0 !important; visibility: hidden !important; }

@media (max-width: 991px) {
   /* En pantallas pequeñas desplaza el panel completo, no la lista: así el
      último ítem no queda cortado bajo el desvanecido. */
   .dseo-menu .px-offcanvas-2-wrapper {
      padding: 110px 26px 40px; margin-bottom: 0;
      max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
   }
   .dseo-menu .px-offcanvas-2-left .tp-offcanvas-menu ul {
      max-height: none; overflow: visible;
      -webkit-mask-image: none; mask-image: none;
   }
   .dseo-menu .tp-offcanvas-menu,
   .dseo-menu .px-offcanvas-2-left .tp-offcanvas-menu { margin-bottom: 34px; }
   .dseo-menu .px-offcanvas-2-left-btn-box .dseo-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
   .dseo-menu .offcanvas-bg { transition: none; }
   .dseo-menu .px-offcanvas-2-left, .dseo-menu .px-offcanvas-2-right { transition: none; }
}

/* ---------------------------------------------------------------
   15. CABECERA POR ENCIMA DEL MENÚ
   La cabecera se sirve fuera de #smooth-wrapper. Dentro, el transform de
   ScrollSmoother crea un contexto de apilamiento del que ningún z-index
   puede salir, y el panel del menú tapaba el logo y el botón de cierre.
   --------------------------------------------------------------- */
.header-fixed { z-index: 20; }

/* ---------------------------------------------------------------
   16. TESTIMONIOS
   Tarjetas ligeramente giradas que se enderezan al pasar el cursor.
   --------------------------------------------------------------- */
.dseo-tst { position: relative; overflow: hidden; background: var(--dseo-ink); padding: 110px 0 130px; }
.dseo-tst::before {
   content: ""; position: absolute; inset: 0; z-index: 0;
   background:
      radial-gradient(50% 44% at 26% 6%, rgba(75,43,239,.5) 0%, rgba(75,43,239,0) 70%),
      radial-gradient(44% 40% at 88% 96%, rgba(200,255,61,.14) 0%, rgba(200,255,61,0) 70%);
}
.dseo-tst::after {
   content: ""; position: absolute; inset: 0; z-index: 0; opacity: .4;
   background-image:
      linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
   background-size: 88px 88px;
   -webkit-mask-image: radial-gradient(72% 72% at 50% 40%, #000 24%, transparent 100%);
           mask-image: radial-gradient(72% 72% at 50% 40%, #000 24%, transparent 100%);
}
.dseo-tst > * { position: relative; z-index: 1; }

.dseo-tst__kicker {
   display: flex; align-items: center; justify-content: center; gap: 12px;
   font-family: var(--dseo-ff-mono); font-size: 11px; letter-spacing: .2em;
   text-transform: uppercase; color: var(--dseo-accent); margin: 0 0 18px;
}
.dseo-tst__title {
   font-family: var(--tp-ff-heading); font-weight: 600;
   font-size: clamp(56px, 13vw, 210px); line-height: .9; letter-spacing: -.05em;
   text-align: center; color: #fff; margin: 0 0 14px;
}
.dseo-tst__lead {
   text-align: center; max-width: 56ch; margin: 0 auto 70px;
   font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.6);
}

.dseo-tst__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; }

.dseo-tst__card {
   position: relative; background: #fff; border-radius: 18px;
   padding: 46px 34px 30px; color: var(--dseo-ink);
   box-shadow: 0 42px 90px -50px rgba(0,0,0,.9);
   transition: transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease;
}
.dseo-tst__card:nth-child(1) { transform: rotate(-4.5deg) translateY(18px); }
.dseo-tst__card:nth-child(2) { transform: rotate(1.5deg); }
.dseo-tst__card:nth-child(3) { transform: rotate(4deg) translateY(26px); }
.dseo-tst__card:hover {
   transform: rotate(0deg) translateY(-6px);
   box-shadow: 0 50px 100px -46px rgba(0,0,0,1);
}
@media (prefers-reduced-motion: reduce) {
   .dseo-tst__card, .dseo-tst__card:hover { transform: none; transition: none; }
}

/* Comillas que sobresalen por la esquina */
.dseo-tst__mark {
   position: absolute; top: -22px; left: 26px;
   font-family: var(--tp-ff-heading); font-weight: 700; font-size: 92px; line-height: 1;
   color: var(--dseo-ink); letter-spacing: -.04em; pointer-events: none;
}
.dseo-tst__quote {
   font-size: 16px; line-height: 1.62; color: var(--dseo-ink); margin: 0 0 28px;
   letter-spacing: -.012em;
}
.dseo-tst__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dseo-tst__avatar {
   width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
   display: grid; place-items: center;
   background: var(--dseo-primary-soft); color: var(--dseo-primary);
   font-family: var(--dseo-ff-mono); font-size: 13px; font-weight: 600; letter-spacing: .04em;
}
.dseo-tst__who { display: grid; }
.dseo-tst__name {
   font-family: var(--tp-ff-heading); font-weight: 600; font-size: 16px;
   letter-spacing: -.03em; color: var(--dseo-ink);
}
.dseo-tst__role { font-family: var(--dseo-ff-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dseo-muted); }
.dseo-tst__stars { margin-left: auto; display: flex; gap: 3px; color: var(--dseo-primary); }
.dseo-tst__stars svg { width: 15px; height: 15px; }

@media (max-width: 991px) {
   .dseo-tst { padding: 80px 0 90px; }
   .dseo-tst__grid { grid-template-columns: 1fr; gap: 34px; max-width: 520px; margin: 0 auto; }
   .dseo-tst__card:nth-child(1),
   .dseo-tst__card:nth-child(2),
   .dseo-tst__card:nth-child(3) { transform: none; }
   .dseo-tst__lead { margin-bottom: 50px; }
}

/* ---------------------------------------------------------------
   17. BANDERA DE CHILE
   Detalle discreto donde se menciona el país.
   --------------------------------------------------------------- */
.dseo-flag {
   display: inline-block; vertical-align: -2px;
   width: 19px; height: auto; border-radius: 2px; overflow: hidden;
   box-shadow: 0 0 0 1px rgba(10,10,10,.12);
   flex: 0 0 auto;
}
.dseo-flag--light { box-shadow: 0 0 0 1px rgba(255,255,255,.28); }
.dseo-flag--sm { width: 15px; }

/* ---------------------------------------------------------------
   18. CABECERA TRANSPARENTE
   Sin barra de fondo: el logo y el botón cambian de color según la
   sección que quede detrás (lo resuelve dseo.js marcando .dseo-on-dark).
   --------------------------------------------------------------- */
.header-fixed::after { display: none !important; }
.header-fixed.sticky-bg .px-header-logo { padding-top: 0; }

.px-header-logo .dseo-logo__name { color: var(--dseo-ink); transition: color .35s ease; }
.px-header-logo .dseo-logo__tag  { color: var(--dseo-muted); transition: color .35s ease; }
.dseo-on-dark .px-header-logo .dseo-logo__name,
.dseo-menu-open .px-header-logo .dseo-logo__name { color: #fff; }
.dseo-on-dark .px-header-logo .dseo-logo__tag,
.dseo-menu-open .px-header-logo .dseo-logo__tag { color: rgba(255,255,255,.6); }

/* El botón vive en la esquina exacta: su centro coincide con el origen del
   recorte circular del menú (45px, 45px), así la apertura nace de él. */
.px-header-action .tp-hamburger-btn {
   position: fixed; top: 18px; right: 18px; z-index: 21;
}
.tp-hamburger-btn { background: var(--dseo-ink); border-color: transparent; }
.dseo-on-dark .tp-hamburger-btn,
.dseo-menu-open .tp-hamburger-btn {
   background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3);
   backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* El botón de cotizar deja sitio al de la esquina */
.px-header-action .dseo-btn { margin-right: 72px !important; }
.dseo-on-dark .px-header-action .dseo-btn {
   background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.28); color: #fff;
}
.dseo-on-dark .px-header-action .dseo-btn:hover { color: var(--dseo-ink); border-color: var(--dseo-accent); }

@media (max-width: 767px) {
   .px-header-action .tp-hamburger-btn { top: 14px; right: 14px; }
}

/* Seis testimonios: la segunda fila invierte los giros para que no parezca
   una repetición de la primera. */
.dseo-tst__grid { row-gap: 64px; }
.dseo-tst__card:nth-child(4) { transform: rotate(3.5deg) translateY(-6px); }
.dseo-tst__card:nth-child(5) { transform: rotate(-2deg) translateY(14px); }
.dseo-tst__card:nth-child(6) { transform: rotate(-4.5deg) translateY(2px); }
.dseo-tst__card:nth-child(4):hover,
.dseo-tst__card:nth-child(5):hover,
.dseo-tst__card:nth-child(6):hover { transform: rotate(0deg) translateY(-6px); }
@media (max-width: 991px) {
   .dseo-tst__grid { row-gap: 34px; }
   .dseo-tst__card:nth-child(4),
   .dseo-tst__card:nth-child(5),
   .dseo-tst__card:nth-child(6) { transform: none; }
}

/* El fondo del menú tiene 14px de margen, así que su origen de recorte se
   corrige para que el círculo nazca justo del centro del botón. */
.dseo-menu .offcanvas-bg { clip-path: circle(0% at calc(100% - 31px) 31px); }
.dseo-menu.menu-open .offcanvas-bg { clip-path: circle(150% at calc(100% - 31px) 31px); }
.dseo-menu:not(.menu-open) .offcanvas-bg { clip-path: circle(0% at calc(100% - 31px) 31px); }

/* ---------------------------------------------------------------
   19. AJUSTES FINOS
   --------------------------------------------------------------- */

/* Cápsulas: el texto del template va a 32px y en una línea, así que las
   etiquetas largas se salían del círculo. Se reduce y se deja envolver. */
.px-capsule-item {
   font-size: 15px; line-height: 1.16; font-weight: 600;
   padding: 0 18px; text-align: center;
   white-space: normal; overflow-wrap: break-word; hyphens: auto;
   letter-spacing: -0.015em;
}
@media (max-width: 767px) {
   .px-capsule-item { font-size: 13px; padding: 0 14px; }
}

/* El vídeo del proceso, con más presencia */
.dseo-steps__media { width: min(56vw, 860px); left: 4%; }
@media (max-width: 1399px) { .dseo-steps__media { width: min(52vw, 700px); left: 3%; } }

/* ---------------------------------------------------------------
   20. DECLARACIÓN TIPOGRÁFICA
   Bloque monumental con deriva horizontal al hacer scroll: el
   mecanismo .title-box / .tp-text-right-scroll ya viene en main.js.
   --------------------------------------------------------------- */
.dseo-claim {
   position: relative; overflow: hidden;
   background: var(--dseo-paper); padding: 130px 0 120px;
}
/* Retícula punteada vertical, como en la referencia */
.dseo-claim::before {
   content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
   background-image: repeating-linear-gradient(to right,
      rgba(10,10,10,.10) 0 1px, transparent 1px 200px);
   -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
           mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
   opacity: .5;
}
.dseo-claim > * { position: relative; z-index: 1; }

.dseo-claim__inner {
   display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
   gap: 20px; align-items: center;
}

.dseo-claim__title { margin: 0; display: grid; gap: 0; }
.dseo-claim__row { display: flex; align-items: flex-end; gap: 18px; line-height: .78; }
.dseo-claim__word {
   font-family: var(--dseo-ff-display); font-weight: 700;
   font-size: clamp(58px, 11.5vw, 190px); line-height: .78;
   letter-spacing: -.015em; text-transform: uppercase; color: var(--dseo-ink);
   display: inline-block;
}
.dseo-claim__word--accent { color: var(--dseo-primary); }
.dseo-claim__sup {
   font-family: var(--dseo-ff-display); font-weight: 700;
   font-size: clamp(18px, 2.4vw, 40px); line-height: 1;
   letter-spacing: -.01em; text-transform: uppercase; color: var(--dseo-primary);
   padding-bottom: .34em; white-space: nowrap;
}
.dseo-claim__cursor { display: inline-block; width: clamp(34px, 4.6vw, 74px); flex: 0 0 auto; padding-bottom: .1em; }
.dseo-claim__cursor svg { width: 100%; height: auto; display: block; transform: rotate(-12deg); }

.dseo-claim__aside {
   display: grid; justify-items: end; gap: 10px;
}
.dseo-claim__torus {
   width: min(38vw, 400px); height: auto; display: block;
   animation: dseo-float 7s ease-in-out infinite;
}
@keyframes dseo-float {
   0%, 100% { transform: translateY(-10px) rotate(-1.5deg); }
   50%      { transform: translateY(10px) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) { .dseo-claim__torus { animation: none; } }

.dseo-claim__from {
   display: flex; align-items: flex-end; gap: 20px; margin: 0;
   font-family: var(--dseo-ff-display); font-weight: 700;
   font-size: clamp(30px, 4vw, 66px); line-height: .84;
   letter-spacing: -.015em; text-transform: uppercase; color: var(--dseo-ink);
}
.dseo-claim__rule { display: block; width: clamp(60px, 9vw, 150px); height: 5px; background: var(--dseo-ink); margin-bottom: .22em; }
.dseo-claim__from .dseo-flag { width: 30px; vertical-align: -1px; margin-left: 6px; }

.dseo-claim__note {
   margin: 54px 0 0; max-width: 60ch;
   font-size: 17px; line-height: 1.6; color: var(--tp-text-px-body);
}

@media (max-width: 1199px) {
   .dseo-claim { padding: 90px 0 80px; }
   .dseo-claim__inner { grid-template-columns: 1fr; gap: 40px; }
   .dseo-claim__aside { justify-items: start; }
   .dseo-claim__torus { width: min(60vw, 300px); }
}
@media (max-width: 575px) {
   .dseo-claim__row { gap: 10px; flex-wrap: wrap; }
   .dseo-claim__from { font-size: 34px; }
}

/* ---------------------------------------------------------------
   21. FONDO ANIMADO DEL HERO (GhostFibers)
   El lienzo va detrás de todo el contenido del hero. Si WebGL2 no está
   disponible no se añade la clase .is-on y el degradado CSS sigue mandando.
   --------------------------------------------------------------- */
.dseo-hero__fibers {
   position: absolute; inset: 0; z-index: 0; overflow: hidden;
   opacity: 0; transition: opacity 1.1s ease;
   pointer-events: none;
}
.dseo-hero__fibers.is-on { opacity: 1; }
/* Con las fibras activas, los degradados del hero se repliegan para no
   competir con ellas; la retícula se queda, muy tenue. */
.dseo-hero:has(.dseo-hero__fibers.is-on)::before { opacity: .28; }
.dseo-hero:has(.dseo-hero__fibers.is-on)::after  { opacity: .22; }

/* Velo sobre el lienzo: las fibras quedan de fondo y el titular manda. */
.dseo-hero__fibers::after {
   content: ""; position: absolute; inset: 0;
   background:
      linear-gradient(100deg, rgba(10,10,10,.88) 0%, rgba(10,10,10,.66) 38%,
                      rgba(10,10,10,.28) 70%, rgba(10,10,10,.42) 100%),
      linear-gradient(to bottom, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 26%,
                      rgba(10,10,10,0) 66%, rgba(10,10,10,.6) 100%);
}
@media (max-width: 991px) {
   .dseo-hero__fibers::after {
      background: linear-gradient(to bottom, rgba(10,10,10,.78) 0%, rgba(10,10,10,.6) 45%, rgba(10,10,10,.8) 100%);
   }
}

/* ---------------------------------------------------------------
   22. EL MENÚ CERRADO NO OCUPA SITIO
   El template solo fija el panel cuando está abierto, así que cerrado
   empujaba ~755px de contenido hacia abajo en cada página. Con
   ScrollSmoother no se veía (el wrapper va fijo), pero alargaba el
   documento y desviaba todo cálculo basado en el scroll.
   --------------------------------------------------------------- */
.dseo-menu {
   position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;
}
/* Cerrado, el panel seguía contando para el CLS. `main.js` clona dentro los
   enlaces de la cabecera al arrancar, y ese cambio de layout Chrome lo mide
   como movimiento real aunque nadie lo vea: 0,15 de CLS regalados en todas
   las páginas, por encima del umbral de 0,1 que Google da por bueno.
   De todas las formas de ocultar algo, `visibility: hidden` es la única que
   la especificación de Layout Instability excluye. El retardo mantiene el
   panel visible mientras se cierra; al abrir entra sin esperar. */
.dseo-menu:not(.menu-open) { pointer-events: none; visibility: hidden; }
.dseo-menu { transition: visibility 0s linear .6s; }
.dseo-menu.menu-open { visibility: visible; transition-delay: 0s; }

/* El logo se alineaba con el borde superior. Se le da a la cabecera la misma
   banda que ocupa el botón (18 + 54 + 18) y se centra dentro: así el logo y el
   botón quedan a la misma altura sea cual sea el tamaño del logotipo. */
.header-fixed > .container > .row { min-height: 90px; }
@media (max-width: 767px) {
   .header-fixed > .container > .row { min-height: 82px; }
}

/* Las piezas del bloque de declaración son vídeo con el fondo del papel
   horneado: sin canal alfa comprimen ~50 veces mejor. Por eso la retícula
   punteada se limita a la mitad izquierda, para que no la corte el vídeo. */
.dseo-claim::before {
   -webkit-mask-image: linear-gradient(to right, #000 0 46%, transparent 56%);
           mask-image: linear-gradient(to right, #000 0 46%, transparent 56%);
}
.dseo-claim__torus { width: min(40vw, 430px); height: auto; display: block; border-radius: 2px; }
.dseo-claim__cursor { width: clamp(46px, 6.2vw, 104px); }
.dseo-claim__cursor video { width: 100%; height: auto; display: block; transform: rotate(-8deg); }
@media (max-width: 1199px) { .dseo-claim__torus { width: min(62vw, 320px); } }

/* ---------------------------------------------------------------
   23. MARCO QUE SE ABRE AL HACER SCROLL (ScrollExpand)
   Estilos del componente de React Bits adaptados a la identidad.
   El escenario NO usa `position: sticky` —inerte bajo ScrollSmoother—:
   lo fija ScrollTrigger desde dseo-scroll.js.
   --------------------------------------------------------------- */
.dseo-expand { position: relative; width: 100%; background: var(--dseo-ink); }
.dseo-expand__stage {
   position: relative; width: 100%; height: 100vh; overflow: hidden;
   background: var(--dseo-ink);
}
.dseo-expand__frame {
   position: absolute; inset: 0;
   clip-path: inset(21% 29% 21% 29% round 24px);
   will-change: clip-path;
}
.dseo-expand__media {
   position: absolute; inset: 0; width: 100%; height: 100%;
   object-fit: cover; transform-origin: center; will-change: transform;
   user-select: none; -webkit-user-drag: none;
}
.dseo-expand__scrim {
   position: absolute; inset: 0; pointer-events: none; opacity: 0;
   background: linear-gradient(to top, rgba(10,10,10,.8), rgba(10,10,10,.12) 45%, rgba(10,10,10,.4));
}
.dseo-expand__overlay {
   position: absolute; inset: 0; display: flex; flex-direction: column;
   align-items: center; justify-content: center; text-align: center;
   padding: 6%; opacity: 0; will-change: opacity, transform;
}
.dseo-expand__overlay h3 {
   font-family: var(--dseo-ff-display); font-weight: 700;
   font-size: clamp(38px, 6vw, 104px); line-height: .86; letter-spacing: -.015em;
   text-transform: uppercase; color: #fff; margin: 0 0 18px; text-shadow: 0 2px 30px rgba(0,0,0,.5);
}
.dseo-expand__overlay h3 em {
   font-family: var(--dseo-ff-editorial); font-style: italic; font-weight: 400;
   text-transform: none; color: var(--dseo-accent);
}
.dseo-expand__overlay p {
   font-size: clamp(15px, 1.5vw, 19px); line-height: 1.6; color: rgba(255,255,255,.82);
   max-width: 52ch; margin: 0 0 28px;
}
.dseo-expand__title {
   position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
   margin: 0; padding: 0 6%; text-align: center; pointer-events: none;
   font-family: var(--dseo-ff-display); font-weight: 700;
   font-size: clamp(46px, 8vw, 150px); line-height: .86; letter-spacing: -.015em;
   text-transform: uppercase; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.5);
   will-change: opacity, transform;
}
.dseo-expand__hint {
   position: absolute; left: 0; right: 0; bottom: 34px; text-align: center;
   pointer-events: none; will-change: opacity, transform;
   font-family: var(--dseo-ff-mono); font-size: 11px; letter-spacing: .2em;
   text-transform: uppercase; color: rgba(255,255,255,.55);
}
.dseo-expand__hint::after {
   content: ""; display: block; width: 1px; height: 26px; margin: 12px auto 0;
   background: linear-gradient(to bottom, rgba(255,255,255,.5), transparent);
}
@media (max-width: 767px) {
   .dseo-expand__stage { height: 78vh; }
   .dseo-expand__title { font-size: clamp(38px, 13vw, 64px); }
}
@media (prefers-reduced-motion: reduce) {
   .dseo-expand__frame { clip-path: inset(0 round 0) !important; }
   .dseo-expand__media { transform: none !important; }
   .dseo-expand__title { opacity: 0 !important; }
   .dseo-expand__overlay { opacity: 1 !important; transform: none !important; }
   .dseo-expand__scrim { opacity: .45 !important; }
}

/* El lienzo de fibras dentro del marco se comporta como el medio */
.dseo-expand__media[data-dseo-fibers] { background: var(--dseo-ink); }
.dseo-expand__media[data-dseo-fibers] canvas { width: 100%; height: 100%; display: block; }
.dseo-expand__media[data-dseo-fibers].is-on { opacity: 1; }

/* main.css aplica `transition: all .3s` a todo <p>, <a>, <li>… Sobre los
   elementos que gobierna el scroll eso pelea con el scrub: cada fotograma
   arranca una transición nueva y el valor real nunca alcanza al objetivo.
   Aquí mandan los estilos en línea que escribe dseo-scroll.js. */
.dseo-expand__title,
.dseo-expand__hint,
.dseo-expand__overlay,
.dseo-expand__scrim,
.dseo-expand__frame,
.dseo-expand__media { transition: none !important; }

/* ---------------------------------------------------------------
   24. CERTIFICACIONES — CARRUSEL
   Cada tarjeta es un enlace a la verificación oficial en Skillshop.

   Las siete iban en rejilla, pequeñas y todas con el mismo peso.
   Ahora van en un carrete centrado: la del medio se agranda, recupera
   el color y enciende el enlace de verificación; las laterales se
   quedan atenuadas y en segundo plano. Se lee una a la vez, que es
   como se leen las credenciales.

   El carrusel es progresivo: el marcado por sí solo es una rejilla
   centrada. Solo cuando dseo.js arranca Swiper se añade `.is-ready`
   y la sección se convierte en carrete. Si el JS falla, se ven las
   siete igual que antes.
   --------------------------------------------------------------- */
.dseo-certs { position: relative; margin-top: 54px; }

/* --- Sin JS (o antes de arrancar): rejilla centrada de siempre --- */
.dseo-certs:not(.is-ready) .dseo-certs__viewport { overflow: visible; }
.dseo-certs:not(.is-ready) .swiper-wrapper {
   flex-wrap: wrap; justify-content: center; gap: 22px; transform: none !important;
}
.dseo-certs:not(.is-ready) .swiper-slide { width: 178px; }
.dseo-certs:not(.is-ready) .dseo-cert { padding: 26px 18px 20px; gap: 12px; }
.dseo-certs:not(.is-ready) .dseo-cert__img { width: 104px; height: 104px; }
.dseo-certs:not(.is-ready) .dseo-cert__name { font-size: 15px; }
.dseo-certs:not(.is-ready) .dseo-certs__nav { display: none; }

/* --- El carrete --------------------------------------------------
   El desvanecido lateral insinúa que el carrete sigue más allá del
   borde; el relleno vertical deja sitio a la tarjeta ampliada y a su
   sombra, que si no `overflow: hidden` recortaría.                  */
.dseo-certs__viewport {
   padding: 30px 0 40px;
   -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
           mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.dseo-certs .swiper-slide {
   width: 268px; height: auto; display: flex;
}

/* Estado de reposo: fuera de foco. */
.dseo-certs .dseo-cert {
   width: 100%; text-decoration: none; padding: 40px 26px 30px; gap: 18px;
   border-radius: 6px; overflow: hidden;
   transition: transform .7s cubic-bezier(.22,1,.36,1),
               opacity .55s ease, filter .55s ease,
               border-color .4s ease, box-shadow .6s ease;
}
.dseo-certs.is-ready .dseo-cert { transform: scale(.84); opacity: .42; filter: saturate(.25); }
/* Las dos vecinas: a medio camino, para dar profundidad. */
.dseo-certs .swiper-slide-prev .dseo-cert,
.dseo-certs .swiper-slide-next .dseo-cert {
   transform: scale(.9); opacity: .72; filter: saturate(.6);
}
/* La del centro: tamaño real, color real, borde de marca. */
.dseo-certs .swiper-slide-active .dseo-cert {
   transform: scale(1); opacity: 1; filter: none;
   border-color: var(--dseo-primary);
   box-shadow: 0 26px 60px -30px rgba(75, 43, 239, .5);
}
/* El subrayado lima crece bajo la tarjeta activa. */
.dseo-certs .dseo-cert::after {
   content: ""; position: absolute; left: 50%; bottom: 0; height: 3px; width: 0;
   background: var(--dseo-accent); transform: translateX(-50%);
   transition: width .75s cubic-bezier(.22,1,.36,1) .1s;
}
.dseo-certs .swiper-slide-active .dseo-cert::after { width: 58%; }

/* El hover del sistema (`translateY`) pelearía con la escala. */
.dseo-certs.is-ready .dseo-cert:hover { transform: scale(.86); }
.dseo-certs.is-ready .swiper-slide-prev .dseo-cert:hover,
.dseo-certs.is-ready .swiper-slide-next .dseo-cert:hover { transform: scale(.92); }
.dseo-certs.is-ready .swiper-slide-active .dseo-cert:hover { transform: scale(1.035); }

.dseo-certs .dseo-cert__img {
   width: 134px; height: 134px; object-fit: contain; display: block;
   transition: transform .55s cubic-bezier(.34,1.2,.4,1);
}
.dseo-certs .swiper-slide-active .dseo-cert:hover .dseo-cert__img { transform: scale(1.05); }
.dseo-certs .dseo-cert__name { font-size: 19px; line-height: 1.2; }
.dseo-certs .dseo-cert__meta { font-size: 10.5px; }
.dseo-certs .dseo-cert__verify {
   display: inline-flex; align-items: center; gap: 6px; margin-top: 2px;
   font-family: var(--dseo-ff-mono); font-size: 10px; letter-spacing: .14em;
   text-transform: uppercase; color: var(--dseo-primary);
   opacity: 0; transform: translateY(6px);
   transition: opacity .4s ease .15s, transform .4s ease .15s;
}
.dseo-certs .swiper-slide-active .dseo-cert__verify,
.dseo-certs:not(.is-ready) .dseo-cert:hover .dseo-cert__verify,
.dseo-certs .dseo-cert:focus-visible .dseo-cert__verify { opacity: 1; transform: translateY(0); }

/* --- Flechas y barra de avance ----------------------------------- */
.dseo-certs__nav {
   display: flex; align-items: center; justify-content: center; gap: 24px;
}
.dseo-certs__arrow {
   flex: 0 0 auto; width: 46px; height: 46px; padding: 0; border-radius: 50%;
   display: grid; place-items: center; cursor: pointer;
   background: transparent; border: 1px solid var(--dseo-line); color: var(--dseo-ink);
   transition: background .35s ease, border-color .35s ease, color .35s ease, transform .35s ease;
}
.dseo-certs__arrow:hover {
   background: var(--dseo-ink); border-color: var(--dseo-ink); color: #fff; transform: scale(1.07);
}
.dseo-certs__arrow.swiper-button-disabled { opacity: .3; pointer-events: none; }
.dseo-certs__rail {
   position: relative; width: min(260px, 36vw); height: 2px;
   background: var(--dseo-line); overflow: hidden;
}
.dseo-certs__bar {
   position: absolute; inset: 0; background: var(--dseo-primary);
   transform: scaleX(0); transform-origin: left center;
   transition: transform .6s cubic-bezier(.22,1,.36,1);
}

@media (max-width: 767px) {
   .dseo-certs { margin-top: 34px; }
   .dseo-certs__viewport { padding: 22px 0 32px; }
   .dseo-certs .swiper-slide { width: 216px; }
   .dseo-certs .dseo-cert { padding: 30px 18px 24px; gap: 14px; }
   .dseo-certs .dseo-cert__img { width: 104px; height: 104px; }
   .dseo-certs .dseo-cert__name { font-size: 17px; }
   .dseo-certs__nav { gap: 16px; }
}

/* Con movimiento reducido no hay carrete animado: se ve la rejilla. */
@media (prefers-reduced-motion: reduce) {
   .dseo-certs .dseo-cert,
   .dseo-certs .dseo-cert__img,
   .dseo-certs .dseo-cert::after,
   .dseo-certs__bar { transition: none; }
}

/* ---------------------------------------------------------------
   25. PIEZAS DE VÍDEO, MÁS PRESENCIA
   Los tres vídeos se muestran más grandes. Los topes coinciden con la
   resolución nativa de cada archivo, para no escalar por encima de ella:
   toro 640px · cursor 260px · proceso 1080px.
   --------------------------------------------------------------- */
.dseo-claim__torus { width: min(48vw, 620px); }
.dseo-claim__cursor { width: clamp(62px, 8.6vw, 148px); }
.dseo-steps__media { width: min(64vw, 1000px); left: 3%; }

@media (max-width: 1599px) { .dseo-steps__media { width: min(62vw, 880px); } }
@media (max-width: 1399px) {
   .dseo-steps__media { width: min(60vw, 780px); left: 2.5%; }
   .dseo-claim__torus { width: min(46vw, 500px); }
}
@media (max-width: 1199px) {
   .dseo-steps__media { position: relative; width: min(92%, 620px); left: auto; }
   .dseo-claim__torus { width: min(76vw, 420px); }
   .dseo-claim__cursor { width: clamp(56px, 11vw, 104px); }
}
@media (max-width: 575px) {
   .dseo-claim__torus { width: 88vw; }
   .dseo-claim__cursor { width: 62px; }
}

/* ---------------------------------------------------------------
   26. AGENDA — reserva directa (Google Calendar)
   El calendario es un iframe de Google, y un iframe de Google es
   ~un megabyte de terceros y sus cookies. Cargarlo de entrada
   penalizaría la métrica que vendemos y dejaría cookies a quien
   solo pasaba por ahí, así que se carga a petición: primero una
   tarjeta propia, y el iframe entra al pulsar el botón.
   El montaje está en el bloque 6 de `dseo.js`.
   --------------------------------------------------------------- */
.dseo-agenda { margin-top: 44px; }
.dseo-agenda__card {
   display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
   max-width: 660px; margin: 0 auto; padding: 56px 34px 48px;
   background: #fff; border: 1px solid var(--dseo-line); border-radius: 6px;
   transition: border-color .35s ease, box-shadow .5s ease;
}
.dseo-agenda__card:hover {
   border-color: var(--dseo-primary);
   box-shadow: 0 26px 60px -34px rgba(75, 43, 239, .45);
}
.dseo-agenda__icon { color: var(--dseo-primary); }
.dseo-agenda__t {
   font-family: var(--tp-ff-heading); font-weight: 600; font-size: 24px;
   letter-spacing: -.03em; color: var(--dseo-ink); margin: 0;
}
.dseo-agenda__d {
   font-size: 15px; line-height: 1.6; color: var(--tp-text-px-body);
   margin: 0; max-width: 48ch;
}
.dseo-agenda__alt {
   font-family: var(--dseo-ff-mono); font-size: 10.5px; letter-spacing: .14em;
   text-transform: uppercase; color: var(--dseo-muted); text-decoration: none;
   border-bottom: 1px solid var(--dseo-line); padding-bottom: 2px;
   transition: color .3s ease, border-color .3s ease;
}
.dseo-agenda__alt:hover { color: var(--dseo-primary); border-color: var(--dseo-primary); }

/* El iframe ya montado. */
.dseo-agenda__frame {
   max-width: 900px; margin: 0 auto; background: #fff;
   border: 1px solid var(--dseo-line); border-radius: 6px; overflow: hidden;
}
.dseo-agenda__frame iframe { display: block; width: 100%; height: 640px; border: 0; }

@media (max-width: 767px) {
   .dseo-agenda { margin-top: 30px; }
   .dseo-agenda__card { padding: 40px 22px 36px; gap: 13px; }
   .dseo-agenda__t { font-size: 21px; }
   .dseo-agenda__frame iframe { height: 620px; }
}

/* ---------------------------------------------------------------
   27. PÁGINAS DE SERVICIO
   Las de detalle eran un muro de texto: ocho tarjetas que repetían
   la palabra «Incluye» y poco más. Aquí viven los cuatro bloques que
   las convierten en una página de venta: el desglose de lo que entra,
   el proceso con plazos, el filtro de para quién es y el precio.
   --------------------------------------------------------------- */

/* 27.1 Qué incluye — lista numerada -------------------------------
   Dos columnas en escritorio. El número manda la jerarquía y el
   texto explica; antes solo había un sustantivo suelto.            */
.dseo-inc {
   list-style: none; margin: 40px 0 0; padding: 0;
   display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 60px;
}
.dseo-inc__item {
   display: grid; grid-template-columns: 62px 1fr; gap: 8px;
   padding: 30px 0; border-top: 1px solid var(--dseo-line);
}
.dseo-inc__n {
   font-family: var(--dseo-ff-mono); font-size: 12px; letter-spacing: .12em;
   color: var(--dseo-muted); padding-top: 5px;
   transition: color .35s ease;
}
.dseo-inc__item:hover .dseo-inc__n { color: var(--dseo-primary); }
.dseo-inc__t {
   font-family: var(--tp-ff-heading); font-weight: 600; font-size: 21px;
   letter-spacing: -.035em; color: var(--dseo-ink); margin: 0 0 10px; line-height: 1.2;
}
.dseo-inc__d {
   font-size: 15.5px; line-height: 1.65; color: var(--tp-text-px-body);
   margin: 0; max-width: 46ch;
}

/* 27.2 Proceso — la barra se llena al hacer scroll -----------------
   El relleno se controla con la propiedad `--p` (0 a 1) que escribe
   `dseo-scroll.js`. Una sola variable sirve para las dos
   orientaciones: ancho en escritorio, alto en móvil. Sin JS se queda
   en 0 y la línea se ve como una guía gris, que es lo correcto.     */
.dseo-flow {
   list-style: none; margin: 50px 0 0; padding: 0; position: relative;
   display: grid; grid-template-columns: repeat(5, 1fr); gap: 26px;
   --p: 0;
}
.dseo-flow__rail {
   position: absolute; top: 7px; left: 0; right: 0; height: 2px;
   background: var(--dseo-line);
}
.dseo-flow__fill {
   display: block; height: 100%; width: calc(var(--p) * 100%);
   background: var(--dseo-primary);
}
.dseo-flow__step { position: relative; padding-top: 34px; }
.dseo-flow__dot {
   position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%;
   background: var(--dseo-paper-2); border: 2px solid var(--dseo-line);
   transition: background .4s ease, border-color .4s ease, transform .4s ease;
}
.dseo-flow__step.is-done .dseo-flow__dot {
   background: var(--dseo-primary); border-color: var(--dseo-primary); transform: scale(1.15);
}
.dseo-flow__when {
   display: block; font-family: var(--dseo-ff-mono); font-size: 10.5px;
   letter-spacing: .14em; text-transform: uppercase; color: var(--dseo-primary);
   margin-bottom: 10px;
}
.dseo-flow__t {
   font-family: var(--tp-ff-heading); font-weight: 600; font-size: 20px;
   letter-spacing: -.035em; color: var(--dseo-ink); margin: 0 0 10px; line-height: 1.2;
}
.dseo-flow__d {
   font-size: 15px; line-height: 1.6; color: var(--tp-text-px-body); margin: 0;
}

/* 27.3 Para quién es / para quién no ------------------------------ */
.dseo-fit {
   height: 100%; padding: 40px 34px 36px; border-radius: 4px;
   background: #fff; border: 1px solid var(--dseo-line);
   border-top: 3px solid var(--dseo-line);
   transition: border-color .35s ease, transform .45s cubic-bezier(.25,1,.5,1);
}
.dseo-fit:hover { transform: translateY(-4px); }
.dseo-fit--yes { border-top-color: var(--dseo-accent); }
.dseo-fit--no { background: transparent; border-top-color: var(--dseo-line-dark); }
.dseo-fit__head {
   font-family: var(--dseo-ff-mono); font-size: 10.5px; letter-spacing: .14em;
   text-transform: uppercase; color: var(--dseo-muted); margin: 0 0 22px;
}
.dseo-fit--yes .dseo-fit__head { color: var(--dseo-ink); }
.dseo-fit__list { list-style: none; margin: 0; padding: 0; }
.dseo-fit__list li {
   position: relative; padding: 0 0 16px 30px; margin-bottom: 16px;
   font-size: 16px; line-height: 1.6; color: var(--tp-text-px-body);
   border-bottom: 1px solid var(--dseo-line);
}
.dseo-fit__list li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.dseo-fit__list li::before {
   position: absolute; left: 0; top: -1px; font-size: 17px; line-height: 1.6;
}
.dseo-fit--yes .dseo-fit__list li::before { content: "+"; color: var(--dseo-primary); }
.dseo-fit--no .dseo-fit__list li::before { content: "–"; color: var(--dseo-muted); }
.dseo-fit__list a { color: var(--dseo-primary); text-decoration: none; border-bottom: 1px solid currentcolor; }
.dseo-fit__list a:hover { color: var(--dseo-ink); }

/* 27.4 Inversión --------------------------------------------------- */
.dseo-price {
   background: #fff; border: 1px solid var(--dseo-line); border-radius: 4px;
   padding: 44px 40px 40px;
}
.dseo-price__from {
   font-family: var(--dseo-ff-mono); font-size: 10.5px; letter-spacing: .14em;
   text-transform: uppercase; color: var(--dseo-muted); margin: 0 0 6px;
}
.dseo-price__val {
   font-family: var(--dseo-ff-display); font-weight: 700;
   font-size: clamp(52px, 6vw, 88px); line-height: .9; letter-spacing: -.01em;
   color: var(--dseo-ink); margin: 0 0 14px;
}
.dseo-price__val span {
   display: inline-block; margin-left: 12px; vertical-align: middle;
   font-family: var(--dseo-ff-mono); font-size: 11px; font-weight: 400;
   letter-spacing: .14em; color: var(--dseo-muted);
}
.dseo-price__note {
   font-size: 15.5px; line-height: 1.6; color: var(--tp-text-px-body);
   margin: 0 0 30px; padding-bottom: 26px; border-bottom: 1px solid var(--dseo-line);
   max-width: 46ch;
}
.dseo-price__sub {
   font-family: var(--dseo-ff-mono); font-size: 10.5px; letter-spacing: .14em;
   text-transform: uppercase; color: var(--dseo-primary); margin: 0 0 16px;
}
.dseo-price__list { list-style: none; margin: 0 0 26px; padding: 0; }
.dseo-price__list li {
   position: relative; padding-left: 22px; margin-bottom: 12px;
   font-size: 15.5px; line-height: 1.6; color: var(--tp-text-px-body);
}
.dseo-price__list li::before {
   content: ""; position: absolute; left: 0; top: 10px;
   width: 8px; height: 1px; background: var(--dseo-primary);
}
.dseo-price__list strong { color: var(--dseo-ink); font-weight: 600; }
.dseo-price__foot {
   font-size: 14px; line-height: 1.6; color: var(--dseo-muted); margin: 0;
   padding-top: 22px; border-top: 1px solid var(--dseo-line);
}

@media (max-width: 1199px) {
   .dseo-inc { column-gap: 40px; }
   .dseo-flow { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
   .dseo-flow__rail { display: none; }
   .dseo-flow__dot { background: var(--dseo-primary); border-color: var(--dseo-primary); }
}
@media (max-width: 767px) {
   .dseo-inc { grid-template-columns: 1fr; }
   .dseo-inc__item { grid-template-columns: 46px 1fr; padding: 24px 0; }
   .dseo-flow { grid-template-columns: 1fr; row-gap: 0; }
   .dseo-flow__step { padding: 0 0 30px 30px; }
   .dseo-flow__step:last-child { padding-bottom: 0; }
   /* En vertical la guía vuelve, ahora pegada al costado. */
   .dseo-flow__rail {
      display: block; top: 8px; bottom: 8px; left: 7px; right: auto; width: 2px; height: auto;
   }
   .dseo-flow__fill { width: 100%; height: calc(var(--p) * 100%); }
   .dseo-flow__dot { top: 2px; background: var(--dseo-paper-2); border-color: var(--dseo-line); }
   .dseo-fit { padding: 32px 24px 28px; }
   .dseo-price { padding: 32px 24px 28px; }
}

/* ---------------------------------------------------------------
   28. TEXTURAS DE FONDO
   El sitio ya tenía un vocabulario propio en la sección Declaración:
   retícula de líneas verticales sobre papel y destellos radiales en
   violeta y lima sobre tinta, siempre difuminados en los bordes con
   una máscara. Aquí se extrae a dos clases reutilizables para que
   cualquier sección pueda usarlo sin repetir el CSS.
   --------------------------------------------------------------- */
.dseo-tex { position: relative; overflow: hidden; }
.dseo-tex::before {
   content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.dseo-tex > * { position: relative; z-index: 1; }

/* Retícula vertical sobre papel. */
.dseo-tex--rule::before {
   background-image: repeating-linear-gradient(to right,
      rgba(10,10,10,.10) 0 1px, transparent 1px 200px);
   -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
           mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
   opacity: .45;
}
/* Destellos de marca sobre tinta. */
.dseo-tex--glow::before {
   background-image:
      radial-gradient(48% 42% at 84% 10%, rgba(75,43,239,.30) 0%, rgba(75,43,239,0) 70%),
      radial-gradient(40% 38% at 8% 94%, rgba(200,255,61,.10) 0%, rgba(200,255,61,0) 70%);
}

/* ---------------------------------------------------------------
   29. MÓVIL — lista de comprobación y maqueta del teléfono
   --------------------------------------------------------------- */
.dseo-check { list-style: none; margin: 34px 0 0; padding: 0; }
.dseo-check li {
   position: relative; padding: 0 0 18px 34px; margin-bottom: 18px;
   font-size: 16px; line-height: 1.6; color: var(--tp-text-px-body);
   border-bottom: 1px solid var(--dseo-line);
}
.dseo-check li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.dseo-check li::before {
   content: ""; position: absolute; left: 2px; top: 8px;
   width: 13px; height: 7px; border-left: 2px solid var(--dseo-primary);
   border-bottom: 2px solid var(--dseo-primary); transform: rotate(-45deg);
}
.dseo-check strong { color: var(--dseo-ink); font-weight: 600; }

/* El marco del teléfono. Dentro va una captura real; el esquema en CSS que
   hubo aquí (barra, titular, botones falsos) se retiró al llegar la primera
   captura de verdad: diez clases que ya no pintaba nadie. */
/* La maqueta es un esquema en CSS, no una captura. Cuando haya
   proyectos reales, `.dseo-phone__screen` se sustituye por un <img>
   y el marco sigue sirviendo igual. */
.dseo-phone {
   position: relative; width: min(280px, 78%); margin: 0 auto;
   aspect-ratio: 9 / 19; padding: 10px;
   background: var(--dseo-ink); border-radius: 34px;
   box-shadow: 0 40px 80px -40px rgba(10,10,10,.55);
}
.dseo-phone::after {
   content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
   width: 62px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25);
}
.dseo-phone__screen {
   position: relative; width: 100%; height: 100%; overflow: hidden;
   border-radius: 26px; background: var(--dseo-paper-2);
   display: flex; flex-direction: column; padding: 34px 16px 16px;
}
/* Con una captura real dentro, el relleno del esquema estorba. */
.dseo-phone__screen:has(img) { padding: 0; }
.dseo-phone__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.dseo-phone__screen > span { display: block; border-radius: 3px; flex: 0 0 auto; }

/* ---------------------------------------------------------------
   30. CORE WEB VITALS MEDIDOS EN VIVO
   Las cifras no están escritas en el HTML: las mide `dseo.js` en el
   navegador de quien visita, con la misma API que usa Chrome para
   reportárselas a Google. En el sitio de una agencia que vende
   velocidad, un número medido delante del cliente vale más que
   cualquier captura de PageSpeed, que siempre puede ser del día bueno.

   El precio de esto es que obliga a mantener el sitio rápido: si
   alguna vez sale en rojo, lo verá el cliente antes que nadie.
   --------------------------------------------------------------- */
.dseo-cwv {
   display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 46px;
}
.dseo-cwv__card {
   padding: 30px 26px 26px; border-radius: 4px;
   background: rgba(255,255,255,.03); border: 1px solid var(--dseo-line-dark);
   transition: border-color .4s ease;
}
.dseo-cwv__code {
   font-family: var(--dseo-ff-mono); font-size: 11px; letter-spacing: .16em;
   color: var(--dseo-accent); margin: 0 0 10px;
}
.dseo-cwv__name {
   font-family: var(--tp-ff-heading); font-weight: 500; font-size: 16px;
   letter-spacing: -.02em; color: rgba(255,255,255,.72); margin: 0 0 18px;
}
.dseo-cwv__val {
   font-family: var(--dseo-ff-display); font-weight: 700;
   font-size: clamp(40px, 4.4vw, 66px); line-height: .9; letter-spacing: -.01em;
   color: #fff; margin: 0 0 18px;
}
/* Mientras no hay cifra, el rótulo no puede gritar como una cifra. */
.dseo-cwv__val:not(.is-medido) {
   font-family: var(--dseo-ff-mono); font-size: 13px; font-weight: 400;
   letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4);
   line-height: 1.4; padding: 14px 0 22px;
}
.dseo-cwv__val span {
   display: inline-block; margin-left: 8px;
   font-family: var(--dseo-ff-mono); font-size: 12px; font-weight: 400;
   letter-spacing: .12em; color: rgba(255,255,255,.45); vertical-align: middle;
}
.dseo-cwv__bar {
   position: relative; height: 4px; border-radius: 2px; overflow: hidden;
   background: linear-gradient(to right,
      var(--dseo-accent) 0 50%, #E8B21C 50% 80%, #E0523E 80% 100%);
   opacity: .32; transition: opacity .5s ease;
}
.dseo-cwv__card.is-medido .dseo-cwv__bar { opacity: 1; }
.dseo-cwv__mark {
   position: absolute; top: -3px; left: 0; width: 2px; height: 10px;
   background: #fff; box-shadow: 0 0 0 2px var(--dseo-ink);
   opacity: 0; transition: left .8s cubic-bezier(.22,1,.36,1), opacity .4s ease;
}
.dseo-cwv__card.is-medido .dseo-cwv__mark { opacity: 1; }
.dseo-cwv__scale {
   display: flex; justify-content: space-between; margin: 10px 0 20px;
   font-family: var(--dseo-ff-mono); font-size: 9.5px; letter-spacing: .1em;
   color: rgba(255,255,255,.35);
}
.dseo-cwv__d {
   font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.6); margin: 0;
}
/* El veredicto tiñe el borde de la tarjeta y la cifra. */
.dseo-cwv__card.is-bueno { border-color: rgba(200,255,61,.45); }
.dseo-cwv__card.is-bueno .dseo-cwv__val { color: var(--dseo-accent); }
.dseo-cwv__card.is-mejorable { border-color: rgba(232,178,28,.5); }
.dseo-cwv__card.is-mejorable .dseo-cwv__val { color: #E8B21C; }
.dseo-cwv__card.is-malo { border-color: rgba(224,82,62,.5); }
.dseo-cwv__card.is-malo .dseo-cwv__val { color: #E0523E; }

.dseo-cwv__foot {
   margin: 34px 0 0; max-width: 74ch;
   font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.45);
}

@media (max-width: 991px) {
   .dseo-cwv { grid-template-columns: 1fr; gap: 16px; }
   .dseo-cwv__card { padding: 26px 22px 22px; }
   .dseo-cwv__val { font-size: 46px; margin-bottom: 14px; }
   .dseo-phone { margin-top: 50px; }
}

/* ---------------------------------------------------------------
   31. PORTAFOLIO
   Las capturas van dentro de un marco de navegador con la barra y el
   dominio. Sin ese marco, una captura de web parece una imagen suelta;
   con él se lee de inmediato como «esto es un sitio publicado», que es
   justo lo que hay que comunicar.
   --------------------------------------------------------------- */
.dseo-work {
   display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; margin-top: 50px;
}
.dseo-work__item {
   display: block; text-decoration: none; color: inherit;
   transition: transform .5s cubic-bezier(.25,1,.5,1);
}
.dseo-work__item:hover { transform: translateY(-6px); }

.dseo-work__frame {
   border: 1px solid var(--dseo-line); border-radius: 8px; overflow: hidden;
   background: #fff; box-shadow: 0 30px 60px -40px rgba(10,10,10,.45);
   transition: border-color .4s ease, box-shadow .5s ease;
}
.dseo-work__item:hover .dseo-work__frame {
   border-color: var(--dseo-primary);
   box-shadow: 0 36px 70px -36px rgba(75,43,239,.4);
}
/* Barra del navegador: tres puntos y el dominio real. */
.dseo-work__chrome {
   display: flex; align-items: center; gap: 6px;
   padding: 10px 14px; background: var(--dseo-paper);
   border-bottom: 1px solid var(--dseo-line);
}
.dseo-work__chrome i {
   width: 9px; height: 9px; border-radius: 50%; background: var(--dseo-line);
   flex: 0 0 auto;
}
.dseo-work__chrome em {
   flex: 1; margin-left: 10px; padding: 3px 12px; border-radius: 20px;
   background: #fff; border: 1px solid var(--dseo-line);
   font-family: var(--dseo-ff-mono); font-style: normal; font-size: 10px;
   letter-spacing: .04em; color: var(--dseo-muted);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dseo-work__frame img {
   display: block; width: 100%; height: auto;
   transition: transform .8s cubic-bezier(.25,1,.5,1);
}
.dseo-work__item:hover .dseo-work__frame img { transform: scale(1.03); }

.dseo-work__meta {
   display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
   padding: 22px 2px 0;
}
.dseo-work__name {
   font-family: var(--tp-ff-heading); font-weight: 600; font-size: 23px;
   letter-spacing: -.035em; color: var(--dseo-ink); margin: 0;
}
.dseo-work__tag {
   font-family: var(--dseo-ff-mono); font-size: 10px; letter-spacing: .14em;
   text-transform: uppercase; color: var(--dseo-muted); margin: 0;
}
.dseo-work__go {
   margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
   font-family: var(--dseo-ff-mono); font-size: 10px; letter-spacing: .14em;
   text-transform: uppercase; color: var(--dseo-primary);
   opacity: 0; transform: translateX(-6px);
   transition: opacity .35s ease, transform .35s ease;
}
.dseo-work__item:hover .dseo-work__go,
.dseo-work__item:focus-visible .dseo-work__go { opacity: 1; transform: translateX(0); }

@media (max-width: 991px) {
   .dseo-work { grid-template-columns: 1fr; gap: 34px; margin-top: 34px; }
   .dseo-work__name { font-size: 20px; }
   .dseo-work__go { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------
   32. ANOTACIONES
   Subrayados, círculos, flechas y destellos dibujados a mano en SVG.
   La idea viene de Odoo, pero su registro es rotulador gordo y letra
   manuscrita; aquí se traslada el mecanismo —anotar la palabra clave
   para que el ojo caiga ahí— al lenguaje del sitio: trazo fino, violeta
   y lima, y la itálica editorial que ya usamos para las notas.

   Tres reglas que conviene respetar:
   · El texto sigue siendo texto. El trazo va detrás, en posición
     absoluta. Google lee el titular entero y se puede seleccionar.
     Si esto fueran imágenes, perderíamos el titular de cara al
     posicionamiento, que es justo lo que vendemos.
   · Nada de esto ocupa sitio en el layout, así que no puede provocar
     CLS. Si alguna vez añades una anotación que no vaya `absolute`,
     la estarías pagando en la métrica que enseñamos en pantalla.
   · Una por sección como mucho. Odoo mete una cada dos pantallas y a
     la tercera dejan de llamar la atención.

   `pathLength="1"` normaliza cualquier curva, así que el mismo par
   dasharray/dashoffset sirve para todas sin medir nada.
   --------------------------------------------------------------- */
.dseo-mk { position: relative; display: inline-block; white-space: nowrap; --mk: var(--dseo-primary); }
.dseo-mk--lima { --mk: var(--dseo-accent); }
/* Sobre una palabra que ya va en lima, el trazo lima se emborrona con la
   letra. En blanco se lee como lo que es: una anotación encima. */
.dseo-mk--blanco { --mk: rgba(255,255,255,.92); }
.dseo-mk svg {
   position: absolute; left: 50%; transform: translateX(-50%);
   overflow: visible; pointer-events: none;
}
.dseo-mk path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dseo-mk path[data-draw] {
   stroke-dasharray: 1; stroke-dashoffset: 1;
   transition: stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1);
}
.dseo-mk.is-in path[data-draw] { stroke-dashoffset: 0; }
.dseo-mk path[data-draw="2"] { transition-delay: .22s; }

/* Subrayado, una y dos pasadas */
.dseo-mk--sub svg { bottom: -.14em; width: 104%; height: .34em; }
.dseo-mk--sub path { stroke: var(--mk); stroke-width: 5; }
.dseo-mk--sub2 svg { bottom: -.22em; width: 106%; height: .5em; }
.dseo-mk--sub2 path { stroke: var(--mk); stroke-width: 4.5; }

/* Marcador detrás de la palabra */
.dseo-mk--hl svg { top: 50%; translate: 0 -50%; width: 110%; height: 1.34em; z-index: -1; mix-blend-mode: multiply; }
.dseo-mk--hl path {
   fill: var(--dseo-accent); stroke: none;
   clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.65,0,.35,1);
}
.dseo-mk--hl.is-in path { clip-path: inset(0 0 0 0); }

/* Círculo alrededor */
.dseo-mk--circ svg { top: 50%; translate: 0 -50%; width: 132%; height: 2.2em; }
.dseo-mk--circ path { stroke: var(--mk); stroke-width: 3.4; }

/* Flecha suelta y destellos: se colocan con `style` en cada sitio */
.dseo-arrow { position: absolute; pointer-events: none; overflow: visible; }
.dseo-arrow path {
   fill: none; stroke: var(--dseo-primary); stroke-width: 2.6;
   stroke-linecap: round; stroke-linejoin: round;
   stroke-dasharray: 1; stroke-dashoffset: 1;
   transition: stroke-dashoffset 1s cubic-bezier(.65,0,.35,1) .2s;
}
.dseo-arrow--lima path { stroke: var(--dseo-accent); }
.dseo-arrow.is-in path { stroke-dashoffset: 0; }

.dseo-burst { position: absolute; pointer-events: none; overflow: visible; }
.dseo-burst line {
   stroke: var(--dseo-accent); stroke-width: 3.4; stroke-linecap: round;
   opacity: 0; scale: .3; transform-origin: center;
   transition: opacity .5s ease, scale .6s cubic-bezier(.34,1.56,.64,1);
}
.dseo-burst.is-in line { opacity: 1; scale: 1; }
.dseo-burst.is-in line:nth-child(2n) { transition-delay: .12s; }
.dseo-burst.is-in line:nth-child(3n) { transition-delay: .22s; }

/* Nota al margen, en la itálica editorial del sitio */
.dseo-note {
   position: absolute; margin: 0;
   font-family: var(--dseo-ff-editorial); font-style: italic;
   font-size: 18px; line-height: 1.35; color: var(--dseo-primary);
   opacity: 0; transform: translateY(8px);
   transition: opacity .6s ease .5s, transform .6s ease .5s;
}
.dseo-note--claro { color: rgba(255,255,255,.85); }
.dseo-note.is-in { opacity: 1; transform: none; }

/* Las anotaciones sueltas se apoyan en la posición de otra cosa: por debajo
   de escritorio no hay sitio y estorbarían más de lo que aportan. */
@media (max-width: 1199px) {
   .dseo-arrow, .dseo-burst, .dseo-note { display: none; }
}

/* Con movimiento reducido se ven ya dibujadas, sin animación. */
@media (prefers-reduced-motion: reduce) {
   .dseo-mk path[data-draw] { stroke-dashoffset: 0; transition: none; }
   .dseo-mk--hl path { clip-path: inset(0 0 0 0); transition: none; }
   .dseo-arrow path { stroke-dashoffset: 0; transition: none; }
   .dseo-burst line { opacity: 1; scale: 1; transition: none; }
   .dseo-note { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------
   33. EL SIGUIENTE PASO — enlaces entre pilares
   «Suele combinarse con» enlaza a los hermanos del mismo pilar, así
   que el grafo interno eran cuatro islas casi incomunicadas: Google
   leía cuatro grupos temáticos sin relación y la autoridad se quedaba
   encerrada en cada uno. Esta sección es la que los cruza.

   El texto ancla es el nombre exacto del servicio y nada más: la
   etiqueta del pilar va fuera del enlace a propósito, para no diluirlo.
   El motivo de debajo es lo que convierte el enlace en información en
   vez de en relleno, y es lo que hace que alguien lo pulse.
   --------------------------------------------------------------- */
.dseo-next {
   list-style: none; margin: 46px 0 0; padding: 0;
   display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px;
}
.dseo-next__item { padding-top: 26px; border-top: 1px solid var(--dseo-line); }
.dseo-next__pill {
   display: block; margin-bottom: 14px;
   font-family: var(--dseo-ff-mono); font-size: 9.5px; letter-spacing: .16em;
   text-transform: uppercase; color: var(--dseo-muted);
}
.dseo-next__h { margin: 0 0 12px; }
.dseo-next__h a {
   font-family: var(--tp-ff-heading); font-weight: 600; font-size: 21px;
   letter-spacing: -.035em; line-height: 1.2; color: var(--dseo-ink);
   text-decoration: none; background-image: linear-gradient(var(--dseo-primary), var(--dseo-primary));
   background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
   transition: color .3s ease, background-size .45s cubic-bezier(.25,1,.5,1);
}
.dseo-next__h a:hover { color: var(--dseo-primary); background-size: 100% 1px; }
.dseo-next__why {
   font-size: 15px; line-height: 1.6; color: var(--tp-text-px-body); margin: 0;
}
@media (max-width: 991px) {
   .dseo-next { grid-template-columns: 1fr; gap: 0; margin-top: 30px; }
   .dseo-next__item { padding: 22px 0; }
}

/* Enlaces dentro del texto corrido. Son los que más pesan para el
   posicionamiento y la portada no tenía ninguno: todos sus enlaces
   vivían dentro de rejillas de tarjetas. */
.dseo-lead a, .dseo-check a, .dseo-sechead__text a {
   color: var(--dseo-primary); text-decoration: none;
   background-image: linear-gradient(currentcolor, currentcolor);
   background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
   transition: color .3s ease, background-size .35s ease;
}
.dseo-lead a:hover, .dseo-check a:hover, .dseo-sechead__text a:hover {
   color: var(--dseo-ink); background-size: 100% 2px;
}

/* ---------------------------------------------------------------
   34. HUECOS DE IMAGEN PENDIENTE
   Marcadores para las imágenes que faltan. Están hechos para dos cosas
   a la vez: que se vea qué va ahí y con qué medidas, y que sea imposible
   publicarlos por accidente sin notarlo. Por eso llevan borde discontinuo,
   trama diagonal y la palabra «Falta imagen» en grande.

   Todos llevan `data-dseo-slot`, así que se encuentran de un grep.
   Al poner la imagen real se sustituye el div entero por un <picture>
   con AVIF, WebP y JPG, como el portafolio.
   --------------------------------------------------------------- */
.dseo-slot {
   position: relative; display: flex; flex-direction: column;
   align-items: center; justify-content: center; text-align: center;
   gap: 10px; padding: 34px 26px; border-radius: 6px;
   border: 2px dashed var(--dseo-line-dark); background: var(--dseo-paper-2);
   background-image: repeating-linear-gradient(45deg,
      rgba(10,10,10,.035) 0 10px, transparent 10px 20px);
   color: var(--dseo-muted);
}
.dseo-slot__tag {
   font-family: var(--dseo-ff-mono); font-size: 10px; letter-spacing: .18em;
   text-transform: uppercase; color: var(--dseo-primary);
   padding: 5px 12px; border: 1px solid var(--dseo-primary); border-radius: 100px;
}
.dseo-slot__what {
   font-family: var(--tp-ff-heading); font-weight: 600; font-size: 17px;
   letter-spacing: -.03em; color: var(--dseo-ink); margin: 4px 0 0; max-width: 30ch;
}
.dseo-slot__spec {
   font-family: var(--dseo-ff-mono); font-size: 10.5px; line-height: 1.6;
   letter-spacing: .04em; margin: 0; max-width: 34ch;
}

/* Antes y después */
.dseo-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 46px; }
.dseo-ba__cap {
   display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px;
   font-family: var(--dseo-ff-mono); font-size: 10px; letter-spacing: .16em;
   text-transform: uppercase; color: var(--dseo-muted);
}
.dseo-ba__cap b { font-weight: 400; color: var(--dseo-ink); }
.dseo-ba__cap--despues b { color: var(--dseo-primary); }
.dseo-ba > div > .dseo-slot,
.dseo-ba > div > picture img { aspect-ratio: 16 / 10; width: 100%; }
.dseo-ba > div > picture img { display: block; height: auto; border-radius: 6px; border: 1px solid var(--dseo-line); }

@media (max-width: 767px) {
   .dseo-ba { grid-template-columns: 1fr; gap: 24px; margin-top: 30px; }
   .dseo-slot { padding: 26px 18px; }
}

/* En las páginas de servicio la galería va a tres columnas: son piezas de
   apoyo, no el portafolio completo de la portada. */
.dseo-work--tres { grid-template-columns: repeat(3, 1fr); gap: 26px; }
.dseo-work--tres .dseo-work__name { font-size: 19px; }
@media (max-width: 991px) { .dseo-work--tres { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------
   35. HERRAMIENTAS — carrete continuo
   Los nombres van tipografiados, no como logos: recrear marcas
   registradas a mano sale mal y además no hace falta. Cada pieza
   admite igual un <img> con el logotipo oficial el día que estén.

   La animación es CSS puro a propósito. Si el JavaScript falla, el
   carrete se queda quieto pero los nombres siguen ahí: ninguna
   herramienta desaparece porque una animación no corra.
   --------------------------------------------------------------- */
.dseo-tools { position: relative; overflow: hidden; padding: 6px 0; }
.dseo-tools::before, .dseo-tools::after {
   content: ""; position: absolute; top: 0; bottom: 0; width: 12%; z-index: 2; pointer-events: none;
}
.dseo-tools::before { left: 0; background: linear-gradient(to right, var(--dseo-ink), transparent); }
.dseo-tools::after { right: 0; background: linear-gradient(to left, var(--dseo-ink), transparent); }

.dseo-tools__track {
   display: flex; width: max-content; align-items: center;
   animation: dseo-marquee 46s linear infinite;
}
.dseo-tools:hover .dseo-tools__track { animation-play-state: paused; }
@keyframes dseo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.dseo-tools__item {
   display: inline-flex; align-items: center; gap: 16px; padding: 0 30px;
   font-family: var(--tp-ff-heading); font-weight: 600;
   font-size: clamp(20px, 2.1vw, 30px); letter-spacing: -.035em; white-space: nowrap;
   color: rgba(255,255,255,.5); transition: color .35s ease;
}
.dseo-tools__item:hover { color: #fff; }
.dseo-tools__item::after {
   content: ""; width: 5px; height: 5px; border-radius: 50%;
   background: var(--dseo-accent); opacity: .45; flex: 0 0 auto;
}
.dseo-tools__item img { height: 30px; width: auto; display: block; }

/* Variante sobre fondo claro. Existe porque la sección quedaba pegada a
   Compromisos, que es oscura, y dos bandas negras seguidas convierten media
   portada en un muro. */
.dseo-tools--claro::before { background: linear-gradient(to right, var(--dseo-paper-2), transparent); }
.dseo-tools--claro::after  { background: linear-gradient(to left,  var(--dseo-paper-2), transparent); }
.dseo-tools--claro .dseo-tools__item { color: var(--dseo-muted); }
.dseo-tools--claro .dseo-tools__item:hover { color: var(--dseo-ink); }
.dseo-tools--claro .dseo-tools__item::after { background: var(--dseo-primary); opacity: .5; }

/* Si el carrete no se mueve, esconde la mitad de las herramientas detrás del
   borde: se pierde información, que es justo lo que no puede pasar. Cuando eso
   ocurre —por movimiento reducido o porque la animación nunca llega a correr—
   pasa a rejilla y se ven todas. El segundo caso lo detecta el bloque 10 de
   `dseo.js`, que compara el reloj de la propia animación. */
.dseo-tools.is-quieto .dseo-tools__track {
   animation: none; flex-wrap: wrap; width: 100%; justify-content: center; row-gap: 12px;
}
.dseo-tools.is-quieto::before, .dseo-tools.is-quieto::after { display: none; }
.dseo-tools.is-quieto .dseo-tools__item[aria-hidden="true"] { display: none; }

@media (prefers-reduced-motion: reduce) {
   .dseo-tools__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; row-gap: 12px; }
   .dseo-tools::before, .dseo-tools::after { display: none; }
   .dseo-tools__item[aria-hidden="true"] { display: none; }
}
@media (max-width: 767px) {
   .dseo-tools__item { padding: 0 20px; gap: 12px; }
}

/* ---------------------------------------------------------------
   36. MURO DE CAPTURAS EN PERSPECTIVA (DriftWall)
   Adaptación del componente DriftWall de React Bits. Se conserva su
   parte visual —la perspectiva, el recorte por máscara elíptica, el
   levantamiento de la tesela— y se cambian los colores por los de la
   marca. El movimiento lo lleva `dseo-driftwall.js`.

   Vive dentro del marco que se abre en la portada. Es decoración: las
   teselas no son enlaces, porque pulsar un objetivo en movimiento es
   incómodo y el portafolio de verdad está en su propia página.
   --------------------------------------------------------------- */
.dseo-wall {
   position: relative; width: 100%; height: 100%; overflow: hidden;
   perspective: 1200px; perspective-origin: 50% 50%;
   background: var(--dseo-ink);
   --w-tesela: 200px; --w-alto: 132px; --w-hueco: 18px;
   -webkit-mask-image:
      radial-gradient(ellipse 78% 82% at 50% 46%, #000 40%, transparent 100%),
      linear-gradient(to top, #000 40%, transparent 100%);
   -webkit-mask-composite: source-in;
   mask-image:
      radial-gradient(ellipse 78% 82% at 50% 46%, #000 40%, transparent 100%),
      linear-gradient(to top, #000 40%, transparent 100%);
   mask-composite: intersect;
}
.dseo-wall__plano {
   position: absolute; top: 50%; left: 50%; display: flex;
   transform-style: preserve-3d; transform-origin: 50% 50%; will-change: transform;
}
.dseo-wall__col {
   position: relative; width: calc(var(--w-tesela) + var(--w-hueco));
   transform-style: preserve-3d;
}
.dseo-wall__pista { display: flex; flex-direction: column; will-change: transform; transform-style: preserve-3d; }
.dseo-wall__tesela {
   position: relative; width: 100%; height: calc(var(--w-alto) + var(--w-hueco));
   flex: 0 0 auto; transform-style: preserve-3d;
}
.dseo-wall__caja {
   position: absolute; inset: calc(var(--w-hueco) / 2);
   border-radius: 8px; overflow: hidden; background: var(--dseo-ink-2);
   opacity: .55; transform: translateZ(0); pointer-events: none;
   transition: transform .42s cubic-bezier(.22,1,.36,1),
               opacity .42s cubic-bezier(.22,1,.36,1),
               box-shadow .42s cubic-bezier(.22,1,.36,1);
}
.dseo-wall__caja img {
   width: 100%; height: 100%; object-fit: cover; display: block;
   filter: saturate(.85); transition: filter .42s cubic-bezier(.22,1,.36,1);
   user-select: none; -webkit-user-drag: none;
}
/* La tesela bajo el cursor sale hacia adelante y recupera el color. */
.dseo-wall__tesela.is-alta .dseo-wall__caja {
   opacity: 1; transform: translateZ(64px);
   box-shadow: 0 26px 60px -18px rgba(0,0,0,.75), 0 0 0 1px rgba(200,255,61,.35);
}
.dseo-wall__tesela.is-alta img { filter: saturate(1.05); }

@media (max-width: 991px) {
   .dseo-wall { --w-tesela: 150px; --w-alto: 100px; --w-hueco: 12px; }
}
@media (prefers-reduced-motion: reduce) {
   .dseo-wall__plano, .dseo-wall__pista { will-change: auto; }
}

/* Logotipos dentro del carrete. Van en `currentColor` a propósito: cada marca
   tiene su color y su forma, y ocho paletas distintas girando juntas se ven
   como un panel de patrocinadores, no como una marca. En monocromo el conjunto
   se lee como uno solo y hereda el estado de hover del elemento. */
.dseo-tools__item svg { height: .82em; width: auto; flex: 0 0 auto; }
.dseo-tools__item--marca svg { height: .62em; }
.dseo-tools__item span { line-height: 1; }