/* ==========================================================================
   Sistema visual de deliamalta.com
   --------------------------------------------------------------------------
   Capa de chasis que se carga DESPUES de la hoja propia de cada pagina y la
   reviste: fondo beige, navegacion en pastilla flotante, secciones como
   paneles redondeados, rotulo "// SECCION", titular con acento en degradado
   y pie como panel oscuro.

   Se apoya en el marcado que ya existe (.nav, .ed, .ctaband, .footer,
   .card...) en lugar de sustituirlo: los componentes de contenido se heredan
   y solo se les ajusta el acabado. Por eso hay bastantes selectores que
   pisan reglas anteriores; cuando hace falta ganar a un style="" del HTML se
   marca con !important y se explica por que.

   Orden del archivo:
     1. fichas          2. base            3. navegacion
     4. portadas        5. secciones .ed   6. componentes heredados
     7. cierre y pie    8. responsive
   ========================================================================== */

/* ------------------------------------------------------------- 1. fichas */
:root{
  --bg:#F1EFE9;--card-bg:#FBFAF7;
  --grad:linear-gradient(103deg,var(--teal-d) 0%,var(--teal) 48%,var(--mint) 100%);
  --grad-osc:linear-gradient(103deg,var(--teal-l) 0%,var(--mint) 100%);
  --r-panel:34px;
  --gut:clamp(14px,2.4vw,34px);
  --maxw:1300px;
}

/* --------------------------------------------------------------- 2. base */
body{background:var(--bg)}
.wrap{width:min(var(--maxw),100% - var(--gut)*2)}

/* el acento del titular */
.gr{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.dark .gr,.ed.dark .gr,.ctaband .gr,.phero .gr{background:var(--grad-osc);
  -webkit-background-clip:text;background-clip:text}

/* botones: pastilla con degradado y flecha diagonal */
.btn{--bg:none;background:var(--grad)!important;color:#fff!important;
  border:1px solid transparent;border-radius:100px;font-weight:600;
  box-shadow:none;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px -16px rgba(0,175,165,.75)}
.btn.light{background:#fff!important;color:var(--onix)!important}
.btn.light:hover{box-shadow:0 16px 34px -18px rgba(0,0,0,.45)}
.btn.ghost{background:none!important;color:var(--onix)!important;
  border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--teal);color:var(--teal-d)!important;box-shadow:none}
.btn.olight{background:none!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.3)}
.btn.olight:hover{border-color:var(--mint);color:var(--mint)!important;box-shadow:none}
/* la flecha pasa de "->" a diagonal, como en el home nuevo */
.btn .ar{font-size:0;width:15px;height:15px;flex:none;position:relative;
  transition:transform .45s var(--ease)}
.btn .ar::after{content:"";position:absolute;inset:0;background:currentColor;
  -webkit-mask:var(--flecha) center/contain no-repeat;
  mask:var(--flecha) center/contain no-repeat}
.btn:hover .ar{transform:translate(3px,-3px)}
:root{--flecha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E")}

/* --------------------------------------------------------- 3. navegacion */
.nav{position:sticky!important;top:0;padding:.7rem 0 0;background:none!important;
  box-shadow:none!important;z-index:80}
.nav.scrolled{padding:.7rem 0 0;background:none!important;box-shadow:none!important}
.nav-in{background:rgba(16,42,51,.93);backdrop-filter:blur(14px);border-radius:100px;
  padding:.5rem .55rem .5rem 1.3rem;gap:1rem;
  box-shadow:0 18px 44px -30px rgba(8,26,32,.9)}
.brand{flex:none}
.brand .logo{height:30px;width:auto}
/* dentro de la pastilla oscura siempre va el logotipo claro */
.brand .logo-dark{display:none}
.brand .logo-light{display:block}
.nav-links{margin-left:.4rem;gap:.1rem}
.nav-links>li>a{color:rgba(255,255,255,.78);font-size:.85rem;padding:.5rem .7rem;
  border-radius:100px;white-space:nowrap}
.nav-links>li>a:hover,.nav-links>li.active>a{color:#fff;background:rgba(255,255,255,.1)}
.nav-links .caret{border-top-color:rgba(255,255,255,.6)}
.dropdown{background:var(--onix);border:1px solid rgba(255,255,255,.12);
  border-radius:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.dropdown a{color:rgba(255,255,255,.85)}
.dropdown a small{color:rgba(255,255,255,.5)}
.dropdown a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-cta{margin-left:auto;gap:.6rem}
.nav-cta .btn{padding:.72rem 1.2rem;font-size:.84rem;white-space:nowrap}
.burger span{background:#fff}

/* ----------------------------------------------------------- 4. portadas */
/* La portada pasa a ser un panel redondeado. Las que ya eran oscuras
   (.phero) se quedan oscuras; las claras (.hero) se vuelven panel claro,
   porque su texto lleva colores oscuros puestos a mano en el HTML y
   volverlas oscuras las dejaria ilegibles. */
.hero,.phero{width:calc(100% - var(--gut)*2);margin:.9rem auto 0;
  border-radius:var(--r-panel);overflow:hidden;isolation:isolate}
.phero{padding:clamp(4.5rem,9vw,7.5rem) 0 clamp(2.6rem,4vw,3.6rem)!important}
.hero{min-height:0!important;padding:clamp(4.5rem,9vw,7rem) 0 clamp(3rem,4.5vw,4rem)!important;
  background:linear-gradient(150deg,#fff,var(--card-bg))!important;
  border:1px solid var(--line)}
.hero .wrap,.phero .wrap{width:min(calc(var(--maxw) - 80px),100% - clamp(24px,5vw,80px)*2)}
/* la palabra fantasma del fondo competia con el titular sobre panel claro */
.bg-word{opacity:.45}
.hero .bg-word{opacity:.28}

/* migas y rotulo de portada */
.crumbs{font-size:.8rem}
.kicker{font-size:.7rem;letter-spacing:.16em}
.kicker .pn{display:none}          /* la numeracion sale del sistema nuevo */
.kicker::before{content:"//";color:var(--teal);font-weight:800;margin-right:.15rem}
.phero .kicker::before{color:var(--mint)}

/* ------------------------------------------------------ 5. secciones .ed */
/* Claras: van directas sobre el beige. Oscuras y arena: panel redondeado. */
.ed{padding:clamp(3.6rem,6.5vw,6rem) 0}
.ed.dark,.ed.sand{width:calc(100% - var(--gut)*2);margin-inline:auto;
  border-radius:var(--r-panel);overflow:hidden}
.ed.sand{background:linear-gradient(160deg,var(--sand),#f4eee4)}
.ed .wrap{width:min(calc(var(--maxw) - 80px),100% - clamp(24px,5vw,80px)*2)}

/* cabecera: fuera la numeracion, entra el rotulo "//" y el titular grande */
.ed-head{grid-template-columns:1fr;gap:0}
.ed-num{display:none}
.ed-eyebrow{font-size:.7rem;letter-spacing:.16em;color:var(--onix);
  margin-bottom:1.1rem;display:inline-flex;align-items:center;gap:.5rem}
.ed-eyebrow::before{content:"//";color:var(--teal);font-weight:800;letter-spacing:0}
.ed.dark .ed-eyebrow{color:#fff}
.ed.dark .ed-eyebrow::before{color:var(--mint)}
.ed-h{font-size:clamp(1.9rem,3.7vw,3.1rem);font-weight:500;letter-spacing:-.032em;
  line-height:1.09;max-width:21ch}
.ed-lead{margin-top:1.3rem;line-height:1.7}
/* el cuerpo ya no se desplaza: sin la columna del numero no hay eje que seguir */
.ed-body,.ed-body.offset{margin-left:0;margin-top:clamp(2.4rem,4vw,3.4rem)}

/* rotulo interno de las secciones fusionadas */
.ed-sub{margin-top:clamp(3rem,5vw,4.5rem)}
.ed-sub-h{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:600;letter-spacing:-.028em}

/* la foto a sangre se vuelve panel */
.banda{width:calc(100% - var(--gut)*2);margin-inline:auto;border-radius:var(--r-panel);
  overflow:hidden}
/* dos fotos seguidas se tocaban y parecian una sola pieza partida */
.banda + .banda{margin-top:var(--gut)}
.ed-fig{border-radius:var(--r-panel)}

/* Reticulas de dos columnas que las fusiones dejaron con un solo hijo: sin
   esto reservan la segunda columna y queda medio bloque vacio. */
.g-metodo:has(> *:only-child),.ed-body .g2:has(> *:only-child),
.ed-sub-body .g-metodo:has(> *:only-child){grid-template-columns:1fr}

/* franja de credibilidad */
.cred{background:none!important;border:0!important}
.cred .wrap{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* la etiqueta cabia en 14ch y salia en cuatro lineas apretadas */
.cred .lab{color:var(--muted);max-width:22ch}
.cred .wrap{grid-template-columns:auto 1fr;gap:2.8rem}

/* Logotipos reales en todas las franjas de confianza. Las alturas son
   opticas: compensan marcas horizontales, apiladas y con distinta densidad. */
.dm-client-logos .wrap{grid-template-columns:minmax(155px,210px) minmax(0,1fr)}
.dm-client-logos ul{display:grid;grid-template-columns:repeat(2,minmax(110px,180px));
  gap:clamp(1.2rem,3vw,3rem);align-items:center;justify-content:start;margin:0;padding:0}
.dm-client-logos .dm-client-logo{display:grid;place-items:center;min-width:0;height:56px;
  padding:0;opacity:.78;transition:opacity .25s ease,transform .25s ease}
.dm-client-logos .dm-client-logo:hover{opacity:1;transform:translateY(-2px)}
.dm-client-logos .dm-client-logo img{display:block;width:auto;height:auto;max-width:100%;
  object-fit:contain;filter:none}
.dm-client-logos .dm-client-afirme img{max-height:34px}
.dm-client-logos .dm-client-alibaba img{max-height:29px}
.dm-client-logos-expanded ul{grid-template-columns:repeat(6,minmax(68px,1fr));
  gap:clamp(.8rem,1.5vw,1.7rem)}
.dm-client-logos .dm-client-keypack img{max-height:34px}
.dm-client-logos .dm-client-prolec img{max-height:33px}
.dm-client-logos .dm-client-ge img{max-height:48px}
.dm-client-logos .dm-client-tennant img{max-height:36px}
@media (max-width:1280px){
  .dm-client-logos-expanded ul{grid-template-columns:repeat(3,minmax(90px,1fr));
    gap:1.2rem 2rem}
}

/* Hero de Sobre Delia: las tres pruebas visuales se leen como una sola
   composicion, con una pieza principal y una columna de reconocimientos. */
.dm-about-hero-art{height:auto!important;min-height:500px;display:grid;
  grid-template-columns:minmax(310px,1fr) 142px;grid-template-rows:1fr auto;
  gap:18px;align-items:center;padding:18px;border:1px solid rgba(8,32,31,.07);
  border-radius:32px;background:linear-gradient(145deg,rgba(255,255,255,.8),rgba(240,249,247,.58));
  box-shadow:0 34px 80px -58px rgba(8,32,31,.62)}
.dm-about-hero-art::before{content:"";position:absolute;z-index:-1;width:220px;
  height:220px;right:-5%;bottom:-8%;border-radius:50%;filter:blur(12px);
  background:radial-gradient(circle,rgba(125,227,209,.24),transparent 68%)}
.dm-about-hero-art .post{position:relative;inset:auto!important;grid-column:1;
  grid-row:1 / 3;width:100%;max-width:none;padding:clamp(1.15rem,2vw,1.4rem);
  animation:dm-about-card-breathe 7s ease-in-out infinite}
.dm-about-hero-art .badge-tv.sello{position:relative;inset:auto!important;
  grid-column:2;grid-row:1;width:104px;justify-self:center;align-self:end;
  padding:8px;animation:none}
.dm-about-hero-art .chip-stat{position:relative;inset:auto!important;grid-column:2;
  grid-row:2;width:100%;padding:1.15rem 1rem;animation:none;align-self:start}
.dm-about-hero-art .chip-stat .num{font-size:2.2rem}
.dm-about-hero-art .chip-stat .spark{height:32px}
@keyframes dm-about-card-breathe{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
@media (max-width:1080px){
  .dm-about-hero-art{width:min(100%,560px);max-width:560px!important;
    grid-template-columns:minmax(290px,1fr) 132px;min-height:470px;margin-inline:auto}
}

/* --------------------------------------------- 6. componentes heredados */
/* Mismo acabado que el home nuevo: radios mas suaves, borde tenue y los
   circulos de icono en degradado. */
.card,.case,.route,.ep-card,.res-card,.tcard,.trans,.form-card{border-radius:22px}
.card,.case,.route,.ep-card{border-color:var(--line)}
.card:hover,.case:hover,.route:hover,.ep-card:hover{border-color:rgba(0,175,165,.4)}
.fband,.method,.mock{border-radius:22px}

/* el cuadrado con icono pasa a circulo en degradado */
.ic-box,.big-ic,.ricon{background:var(--grad)!important;border-radius:50%!important;
  width:48px;height:48px;margin-bottom:1.1rem}
.big-ic{width:58px;height:58px}
.ic-box svg,.big-ic svg,.ricon svg{stroke:#fff!important;color:#fff}
.ic-box svg[fill]:not([fill="none"]),.big-ic svg[fill]:not([fill="none"]){fill:#fff!important}
/* dentro de una tarjeta ya oscura el degradado se apaga un poco */
.prog.feat .ic-box,.res-card.dk .ricon{background:rgba(255,255,255,.14)!important}

/* pastillas */
.chip,.atag{border-radius:100px}
.ed:not(.dark) .chip,.ed.sand .chip{background:rgba(8,32,31,.05);
  border-color:rgba(8,32,31,.14);color:var(--graphite)}
.ed .prog.feat .chip,.ed .method .chip,.ed .tealblock .chip,.ed .res-card.dk .chip,
.ed .fband.onix .chip{background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.16);color:rgba(247,248,246,.92)}
.ed .prog.feat .blist li,.ed .method .blist li,.ed .res-card.dk .blist li{
  color:rgba(247,248,246,.82)}

/* numeros grandes: mismo degradado que el titular */
.metric .v,.stat .num,.cnum,.step{font-variant-numeric:tabular-nums}
.metric .v{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.dark .metric .v,.phero .metric .v{background:var(--grad-osc);
  -webkit-background-clip:text;background-clip:text}

/* al levantar la cabecera de la columna izquierda, las reticulas g2 se
   quedaban con un resto pequeno centrado y un hueco enorme debajo */
.ed-body .g2,.ed-body .g2.wide-l{align-items:start}

/* ------------------------------------------------- columna de texto anclada */
/* .ed-fija: el bloque de texto entero (rotulo, titular, entradilla y lista)
   se queda quieto mientras la columna de imagenes sigue subiendo, hasta que
   esta termina. En movil las columnas se apilan y anclar taparia la foto,
   asi que solo se activa con sitio de sobra. */
@media (min-width:900px){
  .ed-fija .col-texto{
    position:sticky;
    top:6rem;                /* despeja la pastilla de navegacion */
    align-self:start;
  }
}
/* el titular ocupa media columna: a tamano de seccion completa se comia el
   alto que necesita el anclaje para funcionar dentro de la ventana */
.ed-fija .ed-h{font-size:clamp(1.8rem,2.8vw,2.45rem);max-width:15ch}
.ed-fija .ed-head{margin-bottom:1.5rem}
.ed-fija .ed-lead{margin-top:1.1rem}
/* separacion entre las piezas apiladas de la columna de imagenes */
.col-fotos>*+*{margin-top:1.4rem}
/* overflow-x:hidden en el body convierte a la pagina en contenedor de scroll y
   position:sticky deja de anclarse a la ventana. clip recorta igual sin crear
   ese contenedor, que es justo lo que hace falta aqui. */
body{overflow-x:clip}

/* desplazamiento suave de las fotos, lo pone dm.js y se apaga solo si el
   sistema pide menos movimiento */
.ed-fija .par{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .ed-fija .par{transform:none!important}
}

/* -------------------------------------------------------- 7. cierre y pie */
.ctaband{width:calc(100% - var(--gut)*2);margin:0 auto;border-radius:var(--r-panel);
  background:var(--onix)!important;padding:clamp(3.6rem,6vw,5.4rem) 0}
.ctaband::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 520px at 88% 6%,rgba(0,175,165,.2),transparent 62%)}
.ctaband>*{position:relative;z-index:1}
.ctaband .eyebrow.light{font-size:.7rem;letter-spacing:.16em}
.ctaband h2{font-weight:500;letter-spacing:-.032em;
  font-size:clamp(1.9rem,3.7vw,3.1rem);line-height:1.09}
/* el acento del cierre iba en menta en unas paginas y en coral en otras;
   con el sistema nuevo el acento es siempre el mismo degradado */
.ctaband .mint,.ctaband .coral{background:var(--grad-osc);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent}

.footer{width:calc(100% - var(--gut)*2);margin:var(--gut) auto;
  border-radius:var(--r-panel);background:var(--onix)!important;
  padding:clamp(3rem,5vw,4.2rem) 0 2rem;position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 460px at 90% 4%,rgba(0,175,165,.16),transparent 62%)}
.footer>*{position:relative;z-index:1}
.footer .brand .logo{height:32px}
.footer-top{border-bottom-color:rgba(255,255,255,.1)}
.footer-col h5{color:#fff}
.socials a{border-radius:50%;border:1px solid rgba(255,255,255,.16)}
.socials a:hover{background:var(--grad);border-color:transparent}

/* --------------------------------------------------- Calendly / agenda B2B */
.dm-calendly-shell{width:100%;max-width:1040px;margin-inline:auto;background:#fff;
  border:1px solid rgba(16,42,51,.1);border-radius:24px;overflow:hidden;
  box-shadow:0 24px 70px -34px rgba(16,42,51,.38)}
.dm-calendly-intro{padding:1.55rem 1.8rem 1.2rem;border-bottom:1px solid rgba(16,42,51,.08);
  background:linear-gradient(135deg,#fff 15%,rgba(95,219,201,.11))}
.dm-calendly-intro .eyebrow{margin-bottom:.55rem}
.dm-calendly-intro h3{font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.12;
  letter-spacing:-.025em;color:var(--onix);margin:0 0 .4rem}
.dm-calendly-intro p{color:var(--muted);font-size:.92rem;line-height:1.55;margin:0;max-width:58ch}
.dm-calendly-shell .calendly-inline-widget{width:100%!important;min-width:0!important;background:#fff}
.dm-calendly-shell .calendly-inline-widget iframe{border:0!important}
.dm-calendly-fallback{margin:0;padding:1rem 1.4rem;text-align:center;font-size:.8rem;
  color:var(--muted);border-top:1px solid rgba(16,42,51,.07)}
.dm-calendly-fallback a{color:var(--teal-d);font-weight:700;text-decoration:underline;
  text-underline-offset:3px}

.dm-agenda-page .phero .g2{align-items:start!important;grid-template-columns:minmax(0,.82fr) minmax(520px,1.18fr)!important}
.dm-agenda-page .phero .h-xl{font-size:clamp(2.7rem,5.6vw,5.5rem);max-width:10ch}
.dm-agenda-page .phero .psub{max-width:52ch}
.dm-agenda-page .dm-calendly-card.form-card{padding:0;background:transparent;border:0;
  box-shadow:none;overflow:visible}
/* El calendario ya cumple la funcion de conversion: se retiran las cinco
   secciones explicativas y el segundo cierre para dejar una pagina directa. */
.dm-agenda-page > section.ed,.dm-agenda-page > figure.banda,.dm-agenda-page > section.ctaband{display:none!important}

.dm-contacto-calendly #form .ed-body{margin-left:0}
.dm-contacto-calendly #form .dm-calendly-shell{max-width:980px}

/* Contacto: una sola seccion y una sola decision. El calendario reemplaza
   formulario, rutas y cierres repetidos; el panel funciona como portada. */
.dm-contacto-simple #form{width:calc(100% - var(--gut)*2);max-width:var(--maxw);
  margin:clamp(1rem,2vw,1.6rem) auto var(--gut);padding:clamp(4.6rem,8vw,7rem) 0;
  background:
    radial-gradient(circle at 92% 5%,rgba(95,219,201,.2),transparent 25rem),
    linear-gradient(145deg,#fff 0%,#fbfaf7 68%,#f4f1e9 100%);
  border:1px solid rgba(16,42,51,.09);box-shadow:0 32px 80px -60px rgba(16,42,51,.45)}
.dm-contacto-simple #form .wrap{width:min(1080px,100% - clamp(28px,7vw,96px)*2)}
.dm-contacto-simple #form .ed-head{display:block;text-align:center;margin:0 auto;
  max-width:850px}
.dm-contacto-simple #form .ed-eyebrow{justify-content:center;color:var(--onix);
  margin-bottom:1rem}
.dm-contacto-simple #form .ed-h{max-width:16ch;margin-inline:auto;
  font-size:clamp(2.45rem,5.5vw,4.8rem);line-height:.98;font-weight:600}
.dm-contacto-simple #form .ed-lead{max-width:66ch;margin:1.5rem auto 0;
  font-size:clamp(1rem,1.45vw,1.2rem);line-height:1.65;color:var(--graphite)}
.dm-contacto-simple #form .ed-body{margin-top:clamp(2.6rem,5vw,4rem)}
.dm-contacto-simple #form .dm-calendly-shell{max-width:980px;border-radius:28px}
.dm-contacto-simple #form .dm-calendly-intro{text-align:center;padding:1.7rem 2rem 1.35rem}
.dm-contacto-simple #form .dm-calendly-intro .eyebrow{justify-content:center}
.dm-contacto-simple #form .dm-calendly-intro p{margin-inline:auto}

/* Capturas reales que hacen más digeribles los bloques conceptuales de
   Sobre Delia sin convertirlos en otra retícula de tarjetas. */
.dm-story-gallery{display:grid;gap:1rem;margin:clamp(2.5rem,5vw,4.5rem) 0 0}
.dm-story-two{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.dm-story-gallery figure{margin:0;border-radius:22px;overflow:hidden;background:#fff;
  border:1px solid rgba(16,42,51,.1);box-shadow:0 26px 60px -42px rgba(16,42,51,.55)}
.dm-story-gallery figure:nth-child(even){margin-top:clamp(1.5rem,5vw,4rem)}
.dm-story-gallery img{display:block;width:100%;height:auto;max-height:720px;object-fit:contain}
.ed.dark .dm-story-gallery figure{border-color:rgba(255,255,255,.14);box-shadow:0 28px 70px -42px #000}

/* Sobre Delia: evidencia de LinkedIn a la derecha, con una lista mas corta y
   legible a la izquierda. */
.dm-linkedin-proof .ed-body{display:grid;grid-template-columns:minmax(0,.78fr) minmax(440px,1.22fr);
  gap:clamp(2rem,5vw,5rem);align-items:center}
.dm-linkedin-proof .topics{grid-template-columns:1fr}
.dm-linkedin-proof-copy>p{margin-top:1.6rem!important}
.dm-linkedin-proof-image{margin:0;overflow:hidden;border-radius:24px;background:#fff;
  border:1px solid rgba(255,255,255,.16);box-shadow:0 34px 80px -42px #000}
.dm-linkedin-proof-image picture,.dm-linkedin-proof-image img{display:block;width:100%}
.dm-linkedin-proof-image img{height:auto;object-fit:contain}

/* Mi enfoque: componentes a media pagina y evidencia visual a la derecha. */
.dm-enfoque-lead{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.dm-enfoque-lead .checklist{min-width:0}
.dm-enfoque-image{height:clamp(440px,44vw,620px);min-height:0;margin:0;display:grid;
  place-items:center;overflow:hidden}
.dm-enfoque-image picture{display:grid;place-items:center;width:100%;height:100%;min-height:0;
  overflow:hidden}
.dm-enfoque-image img{display:block;width:100%!important;height:100%!important;
  min-height:0!important;max-width:100%;max-height:100%!important;
  object-fit:contain;object-position:center;
  border-radius:22px;box-shadow:0 30px 70px -40px rgba(16,42,51,.65)}
.dm-diferencia-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.78fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:clamp(4.5rem,8vw,7rem);
  padding:clamp(1.5rem,3vw,3rem);border:1px solid rgba(16,42,51,.08);border-radius:28px;
  background:rgba(255,255,255,.64);box-shadow:0 30px 80px -58px rgba(16,42,51,.55)}
.dm-diferencia-grid .ed-sub{margin:0;align-self:center}
.dm-diferencia-grid .ed-sub-h{max-width:17ch}
.dm-diferencia-image{height:auto;margin:0;display:grid;place-items:center}
.dm-diferencia-image picture{display:grid;place-items:center;width:100%}
.dm-diferencia-image img{display:block;width:auto;height:clamp(400px,34vw,520px);max-width:100%;object-fit:contain;
  border-radius:18px;border:1px solid rgba(16,42,51,.09);box-shadow:0 28px 60px -38px rgba(16,42,51,.7)}
.dm-diferencia-grid + .ed-sub-body{position:relative;z-index:1;clear:both;
  margin-top:clamp(2rem,4vw,3rem)}
.dm-diferencia-grid + .ed-sub-body .method{padding:clamp(1.8rem,3vw,2.6rem)}

/* Metodologia integral: sistema orbital 3D en lugar de una fila de etiquetas. */
.dm-methodology-3d{isolation:isolate;padding:clamp(2rem,4vw,3.4rem)!important;
  background:
    radial-gradient(circle at 50% 48%,rgba(54,220,204,.18),transparent 24%),
    radial-gradient(circle at 88% 8%,rgba(0,175,165,.28),transparent 24%),
    linear-gradient(145deg,#0a252e 0%,#10353c 55%,#0b2932 100%)!important;
  border:1px solid rgba(104,224,210,.22);box-shadow:0 36px 80px -48px rgba(8,32,31,.88)}
.dm-methodology-3d::before{right:-8%;top:-30%;width:42%;height:82%;
  background:radial-gradient(circle,rgba(84,222,207,.24),transparent 66%)}
.dm-methodology-3d>h3{z-index:5;margin-bottom:.4rem!important}
.dm-method-diagram{position:relative!important;display:block!important;height:clamp(430px,37vw,540px);
  margin-top:.4rem;perspective:1100px;transform-style:preserve-3d}
.dm-method-diagram::after{content:"";position:absolute;left:50%;bottom:8%;width:36%;height:8%;
  translate:-50% 0;border-radius:50%;background:rgba(0,0,0,.32);filter:blur(18px);z-index:0}
.dm-method-ring{position:absolute;left:50%;top:50%;border:1px solid rgba(106,231,217,.3);
  border-radius:50%;transform-style:preserve-3d;pointer-events:none;z-index:1}
.dm-ring-a{width:54%;height:54%;transform:translate(-50%,-50%) rotateX(67deg) rotateZ(-8deg);
  box-shadow:0 0 34px rgba(0,175,165,.16),inset 0 0 24px rgba(0,175,165,.12);
  animation:dm-orbit-a 15s linear infinite}
.dm-ring-b{width:72%;height:66%;transform:translate(-50%,-50%) rotateX(72deg) rotateZ(22deg);
  border-style:dashed;animation:dm-orbit-b 22s linear infinite}
.dm-ring-c{width:29%;height:84%;transform:translate(-50%,-50%) rotateY(68deg) rotateZ(9deg);
  border-color:rgba(255,255,255,.15)}
.dm-method-core{position:absolute;left:50%;top:50%;width:clamp(132px,13vw,174px);
  aspect-ratio:1;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;border-radius:50%;z-index:4;color:#fff;text-align:center;
  background:radial-gradient(circle at 35% 28%,#75e7db 0 4%,#19bfb1 25%,#068d87 66%,#07575d 100%);
  border:1px solid rgba(255,255,255,.42);box-shadow:0 0 0 12px rgba(74,220,205,.07),
  0 24px 54px -18px rgba(0,0,0,.78),inset -16px -18px 28px rgba(2,45,53,.38),
  inset 10px 10px 20px rgba(255,255,255,.2);transform:translateZ(72px)}
.dm-method-core::after{content:"";position:absolute;inset:12%;border:1px solid rgba(255,255,255,.2);
  border-radius:50%}
.dm-method-core small{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;opacity:.74}
.dm-method-core strong{font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.05}
.dm-method-core b{font-size:clamp(1.45rem,2.6vw,2rem);line-height:1;color:#b9fff5}
.dm-method-node{position:absolute!important;z-index:5;display:flex!important;align-items:center;
  width:max-content;max-width:25%;min-height:54px;padding:.72rem 1rem .72rem .72rem!important;
  border:1px solid rgba(129,232,220,.28)!important;border-radius:16px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.055))!important;
  color:#f7fffd!important;box-shadow:0 18px 34px -24px rgba(0,0,0,.9),
  inset 0 1px rgba(255,255,255,.12);backdrop-filter:blur(10px);font-size:clamp(.72rem,1.05vw,.9rem)!important;
  line-height:1.25;white-space:normal;transition:transform .35s ease,background .35s ease,
  border-color .35s ease,box-shadow .35s ease!important;transform-style:preserve-3d}
.dm-method-node::before{content:attr(data-index);display:grid;place-items:center;flex:0 0 32px;
  width:32px;height:32px;margin-right:.62rem;border-radius:50%;color:#073c43;font-size:.67rem;
  font-weight:800;letter-spacing:.04em;background:linear-gradient(145deg,#86f3e7,#24c5b7);
  box-shadow:0 8px 20px -8px rgba(58,224,208,.95)}
.dm-method-node:hover{background:linear-gradient(135deg,rgba(101,231,216,.28),rgba(255,255,255,.08))!important;
  border-color:rgba(141,245,233,.7)!important;box-shadow:0 24px 44px -22px rgba(0,0,0,.9),
  0 0 26px rgba(58,224,208,.17)!important}
.dm-node-1{left:2%;top:9%;transform:translateZ(28px) rotateY(5deg)}
.dm-node-2{left:39%;top:2%;transform:translateZ(4px)}
.dm-node-3{right:1%;top:15%;transform:translateZ(34px) rotateY(-6deg)}
.dm-node-4{left:0;top:47%;transform:translateZ(50px) rotateY(7deg)}
.dm-node-5{right:0;top:51%;transform:translateZ(58px) rotateY(-7deg)}
.dm-node-6{left:9%;bottom:5%;transform:translateZ(20px) rotateY(5deg)}
.dm-node-7{right:5%;bottom:2%;transform:translateZ(38px) rotateY(-5deg)}
.dm-node-1:hover,.dm-node-2:hover,.dm-node-3:hover,.dm-node-4:hover,
.dm-node-5:hover,.dm-node-6:hover,.dm-node-7:hover{transform:translateY(-5px) translateZ(80px)}
.dm-method-connectors{position:absolute;inset:0;z-index:2;pointer-events:none}
.dm-method-connectors i{position:absolute;left:50%;top:50%;height:1px;width:31%;
  transform-origin:left center;background:linear-gradient(90deg,rgba(104,230,216,.7),transparent)}
.dm-method-connectors i::after{content:"";position:absolute;left:20%;top:50%;width:5px;height:5px;
  translate:0 -50%;border-radius:50%;background:#82f1e5;box-shadow:0 0 12px #48d8c8}
.dm-method-connectors i:nth-child(1){transform:rotate(211deg)}
.dm-method-connectors i:nth-child(2){width:34%;transform:rotate(267deg)}
.dm-method-connectors i:nth-child(3){transform:rotate(327deg)}
.dm-method-connectors i:nth-child(4){width:36%;transform:rotate(179deg)}
.dm-method-connectors i:nth-child(5){width:36%;transform:rotate(3deg)}
.dm-method-connectors i:nth-child(6){width:33%;transform:rotate(145deg)}
.dm-method-connectors i:nth-child(7){width:34%;transform:rotate(39deg)}
.dm-methodology-3d .goal{z-index:5;margin:clamp(2rem,4vw,3.2rem) auto 0!important;
  padding-top:clamp(1.5rem,2.5vw,2rem);
  max-width:72ch;text-align:center;color:rgba(247,255,253,.78)!important;
  border-top:1px solid rgba(130,235,223,.16)}
@keyframes dm-orbit-a{to{transform:translate(-50%,-50%) rotateX(67deg) rotateZ(352deg)}}
@keyframes dm-orbit-b{to{transform:translate(-50%,-50%) rotateX(72deg) rotateZ(-338deg)}}

@media (prefers-reduced-motion:reduce){.dm-method-ring{animation:none}}
@media (max-width:900px){
  .dm-method-diagram{height:auto;min-height:0;display:grid!important;grid-template-columns:1fr 1fr;
    gap:.7rem;padding-top:190px;margin-top:1.2rem}
  .dm-method-ring{left:50%;top:78px}.dm-ring-a{width:190px;height:120px}.dm-ring-b{width:250px;height:150px}
  .dm-ring-c{width:100px;height:165px}.dm-method-core{top:78px;width:132px}
  .dm-method-connectors{display:none}.dm-method-diagram .dm-method-node{position:relative!important;
    inset:auto!important;max-width:none;width:100%;transform:none!important}
  .dm-method-diagram .dm-method-node:hover{transform:translateY(-3px)!important}
}
@media (max-width:560px){
  .dm-methodology-3d{padding:1.35rem!important}.dm-method-diagram{grid-template-columns:1fr;padding-top:180px}
  .dm-method-node{min-height:50px}.dm-methodology-3d .goal{margin-top:1.5rem!important;text-align:left}
}

/* -------------------------------------------------- Podcast simplificado */
.dm-podcast-simple>.pod-hero,.dm-podcast-simple>.cred,.dm-podcast-simple>section.ed,
.dm-podcast-simple>figure.banda,.dm-podcast-simple>section.ctaband{display:none!important}
.podcast-cliente{display:grid;gap:var(--gut);padding:clamp(7.5rem,11vw,9rem) 0 var(--gut)}
.podcast-cliente>section{width:calc(100% - var(--gut)*2);max-width:var(--maxw);margin-inline:auto;
  border-radius:var(--r-panel);overflow:hidden}
.pod-simple-hero{position:relative;min-height:610px;padding:clamp(3rem,6vw,6rem);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(390px,1fr);align-items:center;gap:clamp(2rem,4vw,4rem);
  background:var(--onix);color:#fff;isolation:isolate}
.pod-simple-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(650px 460px at 88% 10%,rgba(0,175,165,.24),transparent 65%)}
.pod-simple-kicker{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:1rem;
  font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-d)}
.pod-simple-hero .pod-simple-kicker,.pod-simple-close .pod-simple-kicker{color:var(--mint)}
.pod-simple-kicker::before{content:"//";color:var(--teal)}
.pod-simple-copy{min-width:0}.pod-simple-copy h1{max-width:100%;font-size:clamp(2.65rem,4vw,4.8rem);line-height:.98;
  letter-spacing:-.052em;color:#fff}
.pod-simple-copy h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.pod-simple-copy>p{max-width:53ch;margin:1.4rem 0 2rem;color:rgba(247,248,246,.75);
  font-size:clamp(1rem,1.35vw,1.18rem);line-height:1.7}
.pod-simple-cover{margin:0;border-radius:24px;overflow:hidden;box-shadow:0 34px 90px -38px #000;
  transform:rotate(1.2deg)}
.pod-simple-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.pod-video-intro{position:relative;aspect-ratio:16/9;background:#071c23;border:1px solid rgba(255,255,255,.14)}
.pod-video-intro iframe{display:block;width:100%;height:100%;border:0}
.pod-video-label,.pod-video-open{position:absolute;z-index:2;top:.85rem;display:inline-flex;
  align-items:center;gap:.45rem;border:1px solid rgba(255,255,255,.16);border-radius:999px;
  background:rgba(7,28,35,.82);backdrop-filter:blur(10px);color:#fff;font-size:.68rem;
  font-weight:750;line-height:1;padding:.58rem .76rem;box-shadow:0 12px 28px -18px #000}
.pod-video-label{left:.85rem;text-transform:uppercase;letter-spacing:.1em}
.pod-video-label i{width:7px;height:7px;border-radius:50%;background:var(--coral);
  box-shadow:0 0 0 5px rgba(255,107,95,.14)}
.pod-video-open{right:.85rem;transition:background .25s ease,transform .25s ease}
.pod-video-open b{color:var(--mint);font-size:.85rem}
.pod-video-open:hover,.pod-video-open:focus-visible{background:rgba(0,175,165,.92);transform:translateY(-2px)}
.pod-feature{padding:clamp(2rem,5vw,5rem);display:grid;grid-template-columns:minmax(360px,1.05fr) 1fr;
  gap:clamp(2rem,5vw,5rem);align-items:center;background:#fff;border:1px solid var(--line)}
.pod-feature figure{margin:0;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px -42px rgba(16,42,51,.7)}
.pod-feature figure img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.pod-feature h2,.pod-guests h2,.pod-simple-close h2{font-size:clamp(2rem,4vw,4.2rem);
  line-height:1.02;letter-spacing:-.045em;color:var(--onix)}
.pod-feature p{max-width:54ch;margin:1.2rem 0;color:var(--slate);line-height:1.7}
.pod-topics{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1.6rem}
.pod-topics span{padding:.5rem .8rem;border-radius:999px;background:var(--sand);font-size:.76rem;font-weight:700}
.pod-guests{padding:clamp(3rem,6vw,6rem);background:var(--sand)}
.pod-guests-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2rem}
.pod-guests-head h2{max-width:17ch}
.pod-guests-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pod-guests-grid figure{position:relative;margin:0;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#fff}
.pod-guests-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.pod-guests-grid figure:hover img{transform:scale(1.035)}
.pod-guests-grid figcaption{position:absolute;inset:auto .8rem .8rem;padding:.55rem .8rem;border-radius:999px;
  background:rgba(16,42,51,.86);backdrop-filter:blur(8px);color:#fff;font-size:.8rem;font-weight:700}
.pod-episode-card{position:absolute;inset:0;display:block;color:#fff;isolation:isolate}
.pod-episode-card::after{content:"";position:absolute;z-index:1;inset:28% 0 0;
  background:linear-gradient(180deg,transparent 0%,rgba(7,25,31,.34) 38%,rgba(7,25,31,.96) 100%);
  pointer-events:none}
.pod-guests-grid .pod-episode-card figcaption{z-index:2;inset:auto 0 0;display:grid;gap:.32rem;
  padding:clamp(1rem,2vw,1.35rem);border-radius:0;background:transparent;backdrop-filter:none;
  font-size:inherit;font-weight:inherit}
.pod-episode-guest{font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mint)}
.pod-episode-card strong{max-width:27ch;font-size:clamp(.92rem,1.35vw,1.08rem);line-height:1.22;
  letter-spacing:-.018em;color:#fff}
.pod-episode-link{display:flex;align-items:center;gap:.4rem;margin-top:.2rem;font-size:.72rem;
  font-weight:700;color:rgba(255,255,255,.72);transition:color .25s ease}
.pod-episode-link b{font-size:.92rem;color:var(--mint);transition:transform .25s ease}
.pod-episode-card:hover .pod-episode-link,.pod-episode-card:focus-visible .pod-episode-link{color:#fff}
.pod-episode-card:hover .pod-episode-link b,.pod-episode-card:focus-visible .pod-episode-link b{
  transform:translate(2px,-2px)}
.pod-episode-card:focus-visible{outline:3px solid var(--mint);outline-offset:-5px}
.pod-simple-close{padding:clamp(3.5rem,7vw,6rem);text-align:center;background:var(--onix);color:#fff}
.pod-simple-close h2{max-width:18ch;margin:0 auto 2rem;color:#fff}

/* ---------------------------------------------------------- 8. responsive */
/* Programas es un enlace directo; se oculta el submenu antes de que el JS
   compartido limpie el marcado para evitar cualquier destello al cargar. */
.nav-links>li:has(>a[href$="/programas/"])>.dropdown,
.nav-links>li:has(>a[href$="/programas/"])>a .caret,
.mobile>a.sub[href$="/conferencias/"]{display:none!important}

@media (max-width:1080px){
  .nav-links{display:none}
  .burger{display:block}
}
@media (max-width:820px){
  :root{--r-panel:26px}
  .ed-body,.ed-body.offset{margin-left:0}
  .dm-agenda-page .phero .g2{grid-template-columns:1fr!important;gap:2rem!important}
  .dm-agenda-page .phero .h-xl{max-width:13ch}
  .pod-simple-hero,.pod-feature{grid-template-columns:1fr}
  .pod-simple-hero{padding-top:4rem}
  .pod-simple-cover{transform:none}
  .pod-guests-head{display:block}
  .pod-guests-grid{grid-template-columns:1fr 1fr}
  .dm-linkedin-proof .ed-body{grid-template-columns:1fr}
  .dm-enfoque-lead{grid-template-columns:1fr}
  .dm-diferencia-grid{grid-template-columns:1fr}
  .dm-client-logos .wrap{grid-template-columns:1fr;gap:1.5rem}
  .dm-client-logos ul{grid-template-columns:repeat(2,minmax(105px,180px));gap:1.1rem 2rem}
  .dm-client-logos-expanded ul{grid-template-columns:repeat(3,minmax(105px,1fr))}
}
@media (max-width:620px){
  .nav-in{gap:.5rem;padding:.45rem .45rem .45rem 1rem}
  .brand .logo{height:26px}
  .nav-cta{gap:.35rem}
  .nav-cta .btn{padding:.6rem .85rem;font-size:.76rem}
  .nav-cta .btn .ar{display:none}
  .dm-calendly-intro{padding:1.25rem 1.1rem 1rem}
  .dm-calendly-shell{border-radius:18px}
  .dm-calendly-shell .calendly-inline-widget{height:660px!important}
  .dm-contacto-simple #form{padding:4rem 0 2rem}
  .dm-contacto-simple #form .wrap{width:min(100% - 24px,1080px)}
  .dm-contacto-simple #form .ed-h{font-size:clamp(2.25rem,12vw,3.25rem)}
  .dm-contacto-simple #form .dm-calendly-intro{padding:1.35rem 1rem 1.1rem}
  .podcast-cliente{padding-top:6.8rem}
  .pod-simple-hero,.pod-feature,.pod-guests{padding:1.25rem}
  .pod-guests-grid{grid-template-columns:1fr}
  .dm-story-two{grid-template-columns:1fr}
  .dm-story-gallery figure:nth-child(even){margin-top:0}
  .dm-diferencia-grid{padding:1rem;border-radius:22px}
  .dm-diferencia-image img{width:100%;height:auto}
  .dm-client-logos ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.5rem}
  .dm-client-logos .dm-client-logo{height:48px}
}