.elementor-955 .elementor-element.elementor-element-0d8fbff{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-955 .elementor-element.elementor-element-4858f4c{--display:flex;--margin-top:-20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-955 .elementor-element.elementor-element-b523197{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-955 .elementor-element.elementor-element-b523197.elementor-element{--align-self:center;}.elementor-955 .elementor-element.elementor-element-87b5e33{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-955 .elementor-element.elementor-element-60639fe{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-955 .elementor-element.elementor-element-fd5ad1e{margin:-20px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-955 .elementor-element.elementor-element-726a64c{--display:flex;--margin-top:-20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-955 .elementor-element.elementor-element-2d1db70{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-955 .elementor-element.elementor-element-f7b8363{--display:flex;--margin-top:-2px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-955 .elementor-element.elementor-element-f7b8363:not(.elementor-motion-effects-element-type-background), .elementor-955 .elementor-element.elementor-element-f7b8363 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0E0D12;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-955 .elementor-element.elementor-element-7943f77{--divider-border-style:solid;--divider-color:#F6F4F021;--divider-border-width:1px;}.elementor-955 .elementor-element.elementor-element-7943f77 .elementor-divider-separator{width:100%;}.elementor-955 .elementor-element.elementor-element-7943f77 .elementor-divider{padding-block-start:15px;padding-block-end:15px;}/* Start custom CSS for html, class: .elementor-element-61c2b55 *//* ---------- Fuentes ---------- */
  @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

  /* ---------- Tokens de diseño ---------- */
  .dtf-hero{
    --ink:        #0E0D12; /* negro tinta, base del "taller de impresión" */
    --surface:    #17151D; /* tarjetas / capas */
    --line:       rgba(246,244,240,0.14);
    --cyan:       #35E1F0;
    --magenta:    #FF3D8A;
    --yellow:     #FFD23F;
    --text:       #F6F4F0; /* blanco cálido, tipo papel/film */
    --text-muted: #9C99A6;
    --font-display: 'Bricolage Grotesque', 'Arial Black', sans-serif;
    --font-body:    'Inter', -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', monospace;
  }

  .dtf-hero, .dtf-hero *{ box-sizing:border-box; }

  .dtf-hero{
    position:relative;
    isolation:isolate;
    min-height:100svh;
    background:
      radial-gradient(ellipse 60% 50% at 15% 10%, rgba(53,225,240,0.12), transparent 60%),
      radial-gradient(ellipse 55% 45% at 88% 82%, rgba(255,61,138,0.14), transparent 60%),
      var(--ink);
    color:var(--text);
    font-family:var(--font-body);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding: clamp(20px, 4vw, 48px);
  }

  /* grano cinematográfico sutil (textura de film) */
  .dtf-grain{
    position:absolute; inset:-20%;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
    opacity:.05;
    pointer-events:none;
    z-index:5;
    mix-blend-mode:overlay;
  }

  /* marcas de registro de impresión, en las 4 esquinas: refuerzan la idea
     de que todo el hero ES una hoja de film DTF lista para imprimir */
  .dtf-reg{
    position:absolute; width:26px; height:26px; z-index:6;
    border:1px solid rgba(246,244,240,0.35);
    opacity:.55;
  }
  .dtf-reg::before, .dtf-reg::after{ content:''; position:absolute; background:rgba(246,244,240,0.5); }
  .dtf-reg::before{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); }
  .dtf-reg::after{ top:50%; left:0; right:0; height:1px; transform:translateY(-50%); }
  .dtf-reg.tl{ top:18px; left:18px; }
  .dtf-reg.tr{ top:18px; right:18px; }
  .dtf-reg.bl{ bottom:18px; left:18px; }
  .dtf-reg.br{ bottom:18px; right:18px; }

  /* ---------- Nav ---------- */
  .dtf-nav{
    position:relative; z-index:7;
    display:flex; align-items:center; justify-content:space-between;
    padding: 8px clamp(28px, 4vw, 52px) 0;
    font-family:var(--font-mono);
    font-size:12.5px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--text-muted);
  }
  .dtf-logo{ color:var(--text); font-weight:600; letter-spacing:.02em; }
  .dtf-logo b{ color:var(--yellow); }
  .dtf-nav-tag{ display:flex; align-items:center; gap:8px; }
  .dtf-dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }

  /* ---------- Layout principal ---------- */
  .dtf-main{
    position:relative; z-index:7;
    flex:1;
    display:grid;
    grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);
    align-items:center;
    gap: clamp(24px, 4vw, 40px);
    padding: clamp(28px, 5vw, 52px);
    padding-top: clamp(24px, 4vw, 40px);
  }

  /* ---------- Columna de texto ---------- */
  .dtf-badge{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--text-muted);
    border:1px solid var(--line); border-radius:100px;
    padding:6px 14px;
    opacity:0; transform:translateY(10px);
    animation:dtf-rise .7s cubic-bezier(.16,1,.3,1) .1s forwards;
  }

  .dtf-title{
    font-family:var(--font-display);
    font-weight:700;
    font-size:clamp(2.6rem, 5.5vw, 6.0rem);
    line-height:.94;
    letter-spacing:-0.01em;
    margin:0 0 clamp(18px,3vw,26px);
    text-transform:uppercase;
  }
  .dtf-title .dtf-line{
    display:block;
    overflow:hidden;
  }
  .dtf-title .dtf-line span{
    display:block;
    opacity:0; transform:translateY(100%);
    animation:dtf-rise .8s cubic-bezier(.16,1,.3,1) forwards;
  }
  .dtf-title .dtf-line:nth-child(1) span{ animation-delay:.15s; }
  .dtf-title .dtf-line:nth-child(2) span{ animation-delay:.28s; }
  .dtf-title .dtf-line:nth-child(3) span{ animation-delay:.41s; }

  .dtf-title .dtf-accent{
    background:linear-gradient(90deg, var(--cyan), var(--magenta) 55%, var(--yellow));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  .dtf-sub{
    font-size:clamp(15px, 1.6vw, 18px);
    line-height:1.55;
    color:var(--text-muted);
    max-width:46ch;
    margin:0 0 clamp(26px,3.5vw,34px);
    opacity:0; transform:translateY(10px);
    animation:dtf-rise .7s cubic-bezier(.16,1,.3,1) .52s forwards;
  }

  .dtf-cta-row{
    display:flex; flex-wrap:wrap; gap:14px; align-items:center;
    margin-bottom:clamp(30px,4vw,44px);
    opacity:0; transform:translateY(10px);
    animation:dtf-rise .7s cubic-bezier(.16,1,.3,1) .64s forwards;
  }
  .dtf-btn-primary, .dtf-btn-secondary{
    font-family:var(--font-body); font-weight:600; font-size:15px;
    padding:15px 26px; border-radius:100px;
    text-decoration:none; display:inline-flex; align-items:center; gap:10px;
    transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, background .35s ease;
    cursor:pointer; border:1px solid transparent;
  }
  .dtf-btn-primary{
    background:var(--text); color:var(--ink);
  }
  .dtf-btn-primary:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(53,225,240,.18);
  }
  .dtf-btn-primary svg{ transition:transform .35s cubic-bezier(.16,1,.3,1); }
  .dtf-btn-primary:hover svg{ transform:translate(3px,-3px); }

  .dtf-btn-secondary{
    color:var(--text); border-color:var(--line);
  }
  .dtf-btn-secondary:hover{ border-color:rgba(246,244,240,0.5); background:rgba(246,244,240,0.05); }

  .dtf-hero a:focus-visible, .dtf-hero button:focus-visible{
    outline:2px solid var(--cyan); outline-offset:3px;
  }

  /* ficha técnica tipo "ticket de impresión" */
  .dtf-spec{
    display:flex; flex-wrap:wrap; gap:0;
    font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em;
    color:var(--text-muted); text-transform:uppercase;
    border-top:1px solid var(--line);
    padding-top:16px; max-width:520px;
    opacity:0; transform:translateY(10px);
    animation:dtf-rise .7s cubic-bezier(.16,1,.3,1) .76s forwards;
  }
  .dtf-spec span{
    padding:0 16px 0 0; margin-right:16px; border-right:1px solid var(--line);
    display:flex; align-items:center; gap:6px; white-space:nowrap;
  }
  .dtf-spec span:last-child{ border-right:none; margin-right:0; }
  .dtf-spec strong{ color:var(--text); font-weight:500; }
  .dtf-spec i{ width:5px; height:5px; border-radius:50%; background:var(--yellow); display:inline-block; }

  /* ---------- Columna visual: "mesa de impresión" ---------- */
  .dtf-stage-wrap{
    position:relative;
    perspective:1400px;
    display:flex; align-items:center; justify-content:center;
    min-height:340px;
    opacity:0;
    animation:dtf-fade 1s ease .3s forwards;
  }

  .dtf-glow{
    position:absolute; width:70%; height:70%; border-radius:50%;
    background:radial-gradient(circle, rgba(53,225,240,.22), transparent 70%);
    filter:blur(30px); z-index:0;
    animation:dtf-drift 9s ease-in-out infinite;
  }

  .dtf-stage{
    position:relative;
    width:min(340px, 82vw);
    aspect-ratio:3/3.5;
    transform-style:preserve-3d;
    transition:transform .25s ease-out;
    z-index:2;
  }

  .dtf-card{
    position:absolute; inset:0;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 40px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.02);
  }

  .dtf-shirt{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .dtf-shirt svg{ width:62%; height:auto; filter:drop-shadow(0 18px 30px rgba(0,0,0,.45)); }

  /* capa de "film" que se despega, revelando el estampado */
  .dtf-film{
    position:absolute; inset:0;
    background:
      linear-gradient(135deg, rgba(246,244,240,.09), rgba(246,244,240,.03));
    backdrop-filter:blur(1.5px);
    clip-path:polygon(0 0,100% 0,100% 100%,0% 100%);
    animation:dtf-peel 6s ease-in-out infinite;
    transform-origin:top right;
  }
  .dtf-film::after{
    content:'DTF FILM · 320G';
    position:absolute; top:14px; left:16px;
    font-family:var(--font-mono); font-size:9px; letter-spacing:.1em;
    color:rgba(246,244,240,.35);
  }
  .dtf-film-corner{
    position:absolute; top:-6%; right:-6%; width:46%; height:46%;
    background:linear-gradient(135deg, rgba(246,244,240,.16), rgba(246,244,240,.02) 60%);
    border-radius:0 0 0 40px;
    box-shadow:-10px 10px 24px rgba(0,0,0,.35);
    animation:dtf-corner 6s ease-in-out infinite;
    transform-origin:bottom left;
  }

  /* etiquetas flotantes */
  .dtf-tag{
    position:absolute;
    font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em;
    text-transform:uppercase; color:var(--text);
    background:rgba(23,21,29,.85);
    border:1px solid var(--line);
    border-radius:10px; padding:7px 11px;
    backdrop-filter:blur(6px);
    z-index:3;
    animation:dtf-float 5s ease-in-out infinite;
  }
  .dtf-tag-size{ top:8%; left:-8%; animation-delay:.4s; }
  .dtf-tag-time{ bottom:10%; right:-10%; animation-delay:1.1s; }

  /* .elementor-955 .elementor-element.elementor-element-61c2b55 de color */
  .dtf-swatches{
    position:absolute; left:50%; bottom:-38px; transform:translateX(-50%);
    display:flex; gap:10px; z-index:4;
    background:rgba(23,21,29,.85); border:1px solid var(--line);
    padding:9px 12px; border-radius:100px; backdrop-filter:blur(6px);
  }
  .dtf-swatch{
    width:16px; height:16px; border-radius:50%;
    border:2px solid rgba(246,244,240,.25);
    cursor:pointer; transition:transform .25s ease, border-color .25s ease;
    padding:0;
  }
  .dtf-swatch:hover, .dtf-swatch:focus-visible{ transform:scale(1.18); }
  .dtf-swatch.active{ border-color:var(--text); }

  /* ---------- Marquesina inferior ---------- */
  .dtf-marquee{
    position:relative; z-index:7;
    border-top:1px solid var(--line);
    padding:16px 0;
    overflow:hidden;
    margin-top:clamp(20px,3vw,32px);
  }
  .dtf-marquee-track{
    display:flex; width:max-content;
    gap:48px;
    font-family:var(--font-mono); font-size:12.5px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--text-muted);
    animation:dtf-scroll 26s linear infinite;
  }
  .dtf-marquee-track span{ display:flex; align-items:center; gap:48px; white-space:nowrap; }
  .dtf-marquee-track b{ color:var(--text); font-weight:500; }
  .dtf-marquee-track i{ width:4px; height:4px; border-radius:50%; background:var(--magenta); }

  /* ---------- Indicador de scroll ---------- */
  .dtf-scroll-cue{
    position:absolute; right:clamp(20px,4vw,48px); bottom:110px; z-index:7;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    font-family:var(--font-mono); font-size:10px; letter-spacing:.15em;
    color:var(--text-muted);
    writing-mode:vertical-rl;
  }
  .dtf-scroll-cue::after{
    content:''; writing-mode:horizontal-tb; width:1px; height:34px;
    background:linear-gradient(var(--text-muted), transparent);
    animation:dtf-cue 1.8s ease-in-out infinite;
  }

  /* ---------- Animaciones ---------- */
  @keyframes dtf-rise{ to{ opacity:1; transform:translateY(0); } }
  @keyframes dtf-fade{ to{ opacity:1; } }
  @keyframes dtf-drift{
    0%,100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(6%,-8%) scale(1.08); }
  }
  @keyframes dtf-peel{
    0%,100%{ clip-path:polygon(0 0,100% 0,100% 100%,0% 100%); }
    45%,60%{ clip-path:polygon(0 0,58% 0,72% 46%,0% 62%); }
  }
  @keyframes dtf-corner{
    0%,100%{ transform:rotate(0deg) translate(0,0); opacity:0; }
    45%,60%{ transform:rotate(-14deg) translate(-6%,6%); opacity:1; }
  }
  @keyframes dtf-float{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-8px); }
  }
  @keyframes dtf-scroll{ to{ transform:translateX(-50%); } }
  @keyframes dtf-cue{
    0%{ transform:scaleY(0); transform-origin:top; opacity:0; }
    50%{ transform:scaleY(1); transform-origin:top; opacity:1; }
    51%{ transform-origin:bottom; }
    100%{ transform:scaleY(0); transform-origin:bottom; opacity:0; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width:980px){
    .dtf-main{ grid-template-columns:1fr; }
    .dtf-stage-wrap{ order:-1; min-height:280px; }
    .dtf-scroll-cue{ display:none; }
  }
  @media (max-width:560px){
    .dtf-nav{ padding-left:20px; padding-right:20px; }
    .dtf-nav-tag span:not(.dtf-dot){ display:none; }
    .dtf-spec span{ padding-right:12px; margin-right:12px; }
    .dtf-reg{ display:none; }
    
    .dtf-swatches{
    position:absolute; left:50%; bottom:-0px; transform:translateX(-50%); }
  }

  /* ---------- Accesibilidad: reduce motion ---------- */
  @media (prefers-reduced-motion: reduce){
    .dtf-hero *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    .dtf-title .dtf-line span, .dtf-badge, .dtf-sub, .dtf-cta-row, .dtf-spec, .dtf-stage-wrap{ opacity:1; transform:none; }
  }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6f22ddd */@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
 
  .dtf-steps{
    --ink:        #0E0D12;
    --surface:    #17151D;
    --surface-2:  #1D1B24;
    --line:       rgba(246,244,240,0.14);
    --cyan:       #35E1F0;
    --magenta:    #FF3D8A;
    --yellow:     #FFD23F;
    --text:       #F6F4F0;
    --text-muted: #9C99A6;
    --font-display: 'Bricolage Grotesque', 'Arial Black', sans-serif;
    --font-body:    'Inter', -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', monospace;
  }
 
  .dtf-steps, .dtf-steps *{ box-sizing:border-box; }
 
  .dtf-steps{
    position:relative;
    isolation:isolate;
    background:
      radial-gradient(ellipse 50% 10% at 95% 0%, rgba(2255,61,138,0.14), transparent 60%),
      var(--ink);
    color:var(--text);
    font-family:var(--font-body);
    overflow:hidden;
    padding: clamp(30px, 10vw, 50px) clamp(20px, 4vw, 48px);
  }
 
  .dtf-steps-grain{
    position:absolute; inset:-20%;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
    opacity:.045; pointer-events:none; z-index:0; mix-blend-mode:overlay;
  }
 
  .dtf-steps-inner{ position:relative; z-index:1; max-width:1180px; margin:0 auto; }
 
  /* ---------- Encabezado ---------- */
  .dtf-steps-head{ text-align:center; max-width:640px; margin:0 auto clamp(56px,7vw,84px); }
 
  .dtf-badge{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--text-muted);
    border:1px solid var(--line); border-radius:100px;
    padding:6px 14px; margin-bottom:20px;
    opacity:0; transform:translateY(10px);
    animation:dtf-rise .7s cubic-bezier(.16,1,.3,1) .05s forwards;
  }
  .dtf-dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
 
  .dtf-steps-title{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(2rem, 4.6vw, 3.4rem);
    line-height:1.05; letter-spacing:-.01em;
    margin:0 0 16px; text-transform:uppercase;
    opacity:0; transform:translateY(12px);
    animation:dtf-rise .8s cubic-bezier(.16,1,.3,1) .15s forwards;
  }
 
  .dtf-steps-sub{
    font-size:clamp(15px,1.4vw,17px); line-height:1.6; color:var(--text-muted);
    margin:0;
    opacity:0; transform:translateY(10px);
    animation:dtf-rise .7s cubic-bezier(.16,1,.3,1) .28s forwards;
  }
 
  /* ---------- Riel de progreso (solo desktop) ---------- */
  .dtf-rail-row{ position:relative; height:44px; margin-bottom:8px; }
  .dtf-rail-track, .dtf-rail-fill{
    position:absolute; top:50%; left:16.6667%; right:16.6667%;
    height:1px; transform:translateY(-50%);
  }
  .dtf-rail-track{ background:var(--line); }
  .dtf-rail-fill{
    background:linear-gradient(90deg, var(--cyan), var(--magenta) 55%, var(--yellow));
    transform-origin:left center; transform:translateY(-50%) scaleX(0);
    transition:transform .1s linear;
  }
  .dtf-rail-nodes{
    position:relative; z-index:1;
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:clamp(28px,3vw,40px); /* debe coincidir con .dtf-steps-grid para alinear nodo↔tarjeta */
  }
  .dtf-node{
    width:44px; height:44px; margin:0 auto; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:13px; color:var(--text);
    background:var(--surface); border:1.5px solid var(--accent, var(--line));
    box-shadow:0 0 0 6px var(--ink);
  }
  .dtf-node[data-accent="cyan"]{ --accent:var(--cyan); }
  .dtf-node[data-accent="magenta"]{ --accent:var(--magenta); }
  .dtf-node[data-accent="yellow"]{ --accent:var(--yellow); }
 
  /* ---------- Grid de pasos ---------- */
  .dtf-steps-grid{
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:clamp(28px,3vw,40px);
    margin-bottom:clamp(48px,6vw,72px);
  }
 
  .dtf-step-card{
    position:relative;
    padding:28px clamp(18px,2vw,26px) 30px;
    border-radius:18px;
    border:1px solid var(--line);
    background:linear-gradient(180deg, var(--surface-2), var(--surface));
    opacity:0; transform:translateY(22px);
    transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease;
  }
  .dtf-step-card.dtf-in-view{ opacity:1; transform:translateY(0); animation:dtf-rise .7s cubic-bezier(.16,1,.3,1) forwards; }
  .dtf-step-card:nth-child(1){ transition-delay:.05s; }
  .dtf-step-card:nth-child(2){ transition-delay:.16s; }
  .dtf-step-card:nth-child(3){ transition-delay:.27s; }
 
  .dtf-step-card[data-accent="cyan"]{ --accent:var(--cyan); }
  .dtf-step-card[data-accent="magenta"]{ --accent:var(--magenta); }
  .dtf-step-card[data-accent="yellow"]{ --accent:var(--yellow); }
 
  .dtf-step-card:hover{
    transform:translateY(-6px);
    border-color:var(--accent);
    box-shadow:0 22px 40px -18px rgba(0,0,0,.6);
  }
 
  .dtf-step-mobile-label{ display:none; }
 
  .dtf-step-icon{
    width:52px; height:52px; border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    color:var(--accent);
    background:color-mix(in srgb, var(--accent) 14%, transparent);
    margin-bottom:22px;
  }
  .dtf-step-icon svg{ width:24px; height:24px; }
 
  .dtf-step-card h3{
    font-family:var(--font-display); font-weight:700; text-transform:uppercase;
    font-size:clamp(1.15rem,1.6vw,1.4rem); letter-spacing:-.005em;
    margin:0 0 10px; line-height:1.15;
  }
  .dtf-step-card p{
    font-size:14.5px; line-height:1.6; color:var(--text-muted); margin:0;
  }
 
  /* ---------- CTA final ---------- */
  .dtf-steps-cta{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:18px;
    opacity:0; transform:translateY(10px);
    animation:dtf-rise .7s cubic-bezier(.16,1,.3,1) .4s forwards;
  }
  .dtf-btn-primary{
    font-family:var(--font-body); font-weight:600; font-size:15px;
    padding:15px 26px; border-radius:100px;
    text-decoration:none; display:inline-flex; align-items:center; gap:10px;
    background:var(--text); color:var(--ink);
    transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
  }
  .dtf-btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(53,225,240,.18); }
  .dtf-btn-primary svg{ transition:transform .35s cubic-bezier(.16,1,.3,1); }
  .dtf-btn-primary:hover svg{ transform:translate(3px,-3px); }
  .dtf-steps-note{ font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); }
 
  .dtf-steps a:focus-visible, .dtf-steps button:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
 
  @keyframes dtf-rise{ to{ opacity:1; transform:translateY(0); } }
 
  /* ---------- Responsive ---------- */
  @media (max-width:900px){
    .dtf-rail-row{ display:none; }
    .dtf-steps-grid{ grid-template-columns:1fr; }
    .dtf-step-card{ padding-left:22px; border-left:3px solid var(--accent); }
    .dtf-step-mobile-label{
      display:inline-block; font-family:var(--font-mono); font-size:11px;
      letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
      margin-bottom:14px;
    }
  }
 
  @media (prefers-reduced-motion: reduce){
    .dtf-steps *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    .dtf-badge, .dtf-steps-title, .dtf-steps-sub, .dtf-step-card, .dtf-steps-cta{ opacity:1; transform:none; }
    .dtf-rail-fill{ transform:translateY(-50%) scaleX(1); }
  }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e1210c4 */@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

  .dtf-prod{
    --ink:        #0E0D12;
    --surface:    #17151D;
    --surface-2:  #1D1B24;
    --line:       rgba(246,244,240,0.13);
    --cyan:       #35E1F0;
    --magenta:    #FF3D8A;
    --yellow:     #FFD23F;
    --text:       #F6F4F0;
    --text-muted: #9C99A6;
    --font-display: 'Bricolage Grotesque','Arial Black',sans-serif;
    --font-body:    'Inter',-apple-system,sans-serif;
    --font-mono:    'JetBrains Mono',monospace;
  }
  .dtf-prod, .dtf-prod *{ box-sizing:border-box; margin:0; padding:0; }

  .dtf-prod{
    position:relative; isolation:isolate;
    background:
      radial-gradient(ellipse 60% 50% at 50% 50%, rgba(53,225,240,0.06), transparent 70%),
      radial-gradient(ellipse 40% 35% at 18% 80%, rgba(255,61,138,0.08), transparent 60%),
      var(--ink);
    color:var(--text);
    font-family:var(--font-body);
    overflow:hidden;
    padding: clamp(30px,10vw,50px) clamp(20px,4vw,48px);
  }

  /* grano */
  .dtf-prod::before{
    content:'';
    position:absolute; inset:-20%;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
    opacity:.045; pointer-events:none; mix-blend-mode:overlay; z-index:0;
  }

  .dtf-prod-inner{
    position:relative; z-index:1;
    max-width:1200px; margin:0 auto;
    display:grid;
    grid-template-columns: 1fr minmax(300px,420px) 1fr;
    gap:clamp(32px,4vw,60px);
    align-items:center;
  }

  /* ==============================
     COLUMNA IZQUIERDA
     ============================== */
  .dtf-prod-left{ display:flex; flex-direction:column; gap:32px; }

  .dtf-badge{
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--text-muted);
    border:1px solid var(--line); border-radius:100px;
    padding:6px 14px; width:fit-content;
    opacity:0; transform:translateY(10px);
    animation:dtf-rise .7s cubic-bezier(.16,1,.3,1) .1s forwards;
  }
  .dtf-dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan); flex-shrink:0; }

  .dtf-prod-title{
    font-family:var(--font-display); font-weight:700; text-transform:uppercase;
    font-size:clamp(2rem,3.8vw,3rem); line-height:.98; letter-spacing:-.01em;
    opacity:0; transform:translateY(12px);
    animation:dtf-rise .8s cubic-bezier(.16,1,.3,1) .2s forwards;
  }
  .dtf-prod-title em{
    font-style:normal;
    background:linear-gradient(90deg,var(--cyan),var(--magenta));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  .dtf-prod-body{
    font-size:clamp(14px,1.3vw,16px); line-height:1.65; color:var(--text-muted);
    max-width:38ch;
    opacity:0; transform:translateY(10px);
    animation:dtf-rise .7s cubic-bezier(.16,1,.3,1) .32s forwards;
  }

  /* ficha técnica */
  .dtf-tech{
    display:flex; flex-direction:column; gap:12px;
    border-top:1px solid var(--line); padding-top:24px;
    opacity:0; transform:translateY(10px);
    animation:dtf-rise .7s cubic-bezier(.16,1,.3,1) .44s forwards;
  }
  .dtf-tech-row{
    display:flex; align-items:center; gap:12px;
    font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase;
    color:var(--text-muted);
  }
  .dtf-tech-row span:first-child{
    width:28px; height:28px; border-radius:7px; flex-shrink:0;
    background:rgba(53,225,240,.1); border:1px solid rgba(53,225,240,.2);
    display:flex; align-items:center; justify-content:center;
  }
  .dtf-tech-row span:first-child svg{ width:14px; height:14px; color:var(--cyan); }
  .dtf-tech-val{ color:var(--text); font-weight:500; margin-left:auto; }

  /* CTA */
  .dtf-btn-primary{
    display:inline-flex; align-items:center; gap:10px; width:fit-content;
    font-family:var(--font-body); font-weight:600; font-size:15px;
    padding:15px 26px; border-radius:100px; text-decoration:none;
    background:var(--text); color:var(--ink);
    transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
    opacity:0; transform:translateY(10px);
    animation:dtf-rise .7s cubic-bezier(.16,1,.3,1) .56s forwards;
  }
  .dtf-btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(53,225,240,.18); }
  .dtf-btn-primary:hover svg{ transform:translate(3px,-3px); }
  .dtf-btn-primary svg{ transition:transform .35s cubic-bezier(.16,1,.3,1); }

  /* ==============================
     COLUMNA CENTRAL — camiseta 3D
     ============================== */
  .dtf-prod-center{
    display:flex; align-items:center; justify-content:center;
    position:relative;
    opacity:0;
    animation:dtf-fade 1s ease .15s forwards;
  }

  /* halo de luz de fondo */
  .dtf-halo{
    position:absolute; inset:-15%;
    background:radial-gradient(circle, rgba(53,225,240,.15) 0%, rgba(255,61,138,.1) 45%, transparent 70%);
    filter:blur(28px);
    animation:dtf-halo-spin 12s linear infinite;
    z-index:0;
  }

  /* escenario 3D CSS */
  .dtf-scene{
    position:relative; z-index:1;
    width:clamp(260px,28vw,380px);
    perspective:1200px;
  }

  /* plataforma circular reflectante debajo */
  .dtf-platform{
    position:absolute; bottom:-6%; left:50%; transform:translateX(-50%);
    width:75%; height:20px; border-radius:50%;
    background:radial-gradient(ellipse 100% 100%, rgba(53,225,240,.22), transparent 70%);
    filter:blur(10px);
    animation:dtf-platform-pulse 4s ease-in-out infinite;
  }

  /* wrapper que hace el giro 3D */
  .dtf-shirt-3d{
    width:100%; aspect-ratio:.82;
    transform-style:preserve-3d;
    animation:dtf-spin 14s ease-in-out infinite;
    position:relative;
  }

  /* "cara" frontal de la camiseta */
  .dtf-shirt-face{
    position:absolute; inset:0;
    backface-visibility:hidden;
  }

  /* SVG de la camiseta con estampado */
  .dtf-shirt-face svg{ width:100%; height:100%; overflow:visible; }

  /* sombra proyectada */
  .dtf-shirt-shadow{
    position:absolute; bottom:-12%; left:10%; right:10%; height:40px;
    background:radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%);
    filter:blur(12px);
    animation:dtf-shadow-sync 14s ease-in-out infinite;
  }

  /* etiquetas flotantes sobre la camiseta */
  .dtf-float-tag{
    position:absolute; z-index:3;
    font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em;
    text-transform:uppercase; color:var(--text);
    background:rgba(23,21,29,.9); border:1px solid var(--line);
    border-radius:10px; padding:7px 11px; backdrop-filter:blur(6px);
    display:flex; align-items:center; gap:7px;
    animation:dtf-float 5s ease-in-out infinite;
    white-space:nowrap;
  }
  .dtf-float-tag .dtf-dot{ background:var(--yellow); box-shadow:0 0 6px var(--yellow); }
  .dtf-float-tag.dtf-ft-left { left:-18%; top:18%; animation-delay:.3s; }
  .dtf-float-tag.dtf-ft-right{ right:-15%; bottom:22%; animation-delay:1.4s; }
  .dtf-float-tag.dtf-ft-top  { top:-3%; left:50%; transform:translateX(-50%); animation-delay:.8s; }

  /* ==============================
     COLUMNA DERECHA
     ============================== */
  .dtf-prod-right{ display:flex; flex-direction:column; gap:28px; }

  /* stat grande arriba */
  .dtf-stat-big{
    padding:24px 22px; border-radius:16px;
    background:var(--surface); border:1px solid var(--line);
    opacity:0; transform:translateY(14px);
    animation:dtf-rise .7s cubic-bezier(.16,1,.3,1) .25s forwards;
  }
  .dtf-stat-num{
    font-family:var(--font-display); font-weight:700; text-transform:uppercase;
    font-size:clamp(2.4rem,4vw,3.4rem); line-height:1;
    background:linear-gradient(90deg,var(--yellow),var(--magenta));
    -webkit-background-clip:text; background-clip:text; color:transparent;
    margin-bottom:6px;
  }
  .dtf-stat-label{
    font-size:13.5px; color:var(--text-muted); line-height:1.4; max-width:22ch;
  }

  /* separator */
  .dtf-prod-sep{ height:1px; background:var(--line); }

  /* lista de features */
  .dtf-feat-list{ display:flex; flex-direction:column; gap:0; }
  .dtf-feat{
    display:grid; grid-template-columns:40px 1fr; gap:14px;
    align-items:start;
    padding:18px 0; border-bottom:1px solid var(--line);
    opacity:0; transform:translateY(10px);
    animation:dtf-rise .65s cubic-bezier(.16,1,.3,1) forwards;
  }
  .dtf-feat:nth-child(1){ animation-delay:.35s; }
  .dtf-feat:nth-child(2){ animation-delay:.46s; }
  .dtf-feat:nth-child(3){ animation-delay:.57s; }
  .dtf-feat:last-child{ border-bottom:none; }
  .dtf-feat-icon{
    width:40px; height:40px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .dtf-feat-icon svg{ width:18px; height:18px; }
  .dtf-feat-icon.c{ background:rgba(53,225,240,.12); color:var(--cyan); }
  .dtf-feat-icon.m{ background:rgba(255,61,138,.12); color:var(--magenta); }
  .dtf-feat-icon.y{ background:rgba(255,210,63,.12); color:var(--yellow); }
  .dtf-feat-title{
    font-family:var(--font-display); font-size:15px; font-weight:700;
    text-transform:uppercase; letter-spacing:.01em; margin-bottom:4px; line-height:1.1;
  }
  .dtf-feat-desc{ font-size:13px; color:var(--text-muted); line-height:1.5; }

  /* ==============================
     ANIMACIONES
     ============================== */
  @keyframes dtf-rise{ to{ opacity:1; transform:translateY(0); } }
  @keyframes dtf-fade{ to{ opacity:1; } }
  @keyframes dtf-float{
    0%,100%{ transform:translateY(0); }
    50%{ transform:translateY(-8px); }
  }
  .dtf-ft-top{ transform:translateX(-50%); }
  .dtf-ft-top:is(.dtf-float-tag){ animation:dtf-float-centered 5s ease-in-out .8s infinite; }
  @keyframes dtf-float-centered{
    0%,100%{ transform:translateX(-50%) translateY(0); }
    50%{ transform:translateX(-50%) translateY(-8px); }
  }

  /* giro 3D lento: va de frente → leve giro derecho → frente → leve giro izquierdo */
  @keyframes dtf-spin{
    0%,100%{ transform:rotateY(0deg) rotateX(4deg); }
    25%{ transform:rotateY(22deg) rotateX(2deg); }
    50%{ transform:rotateY(0deg) rotateX(-2deg); }
    75%{ transform:rotateY(-22deg) rotateX(2deg); }
  }
  @keyframes dtf-shadow-sync{
    0%,100%{ transform:scaleX(1) translateX(0); opacity:.7; }
    25%{ transform:scaleX(.8) translateX(8%); opacity:.4; }
    50%{ transform:scaleX(1) translateX(0); opacity:.7; }
    75%{ transform:scaleX(.8) translateX(-8%); opacity:.4; }
  }
  @keyframes dtf-halo-spin{
    to{ transform:rotate(360deg); }
  }
  @keyframes dtf-platform-pulse{
    0%,100%{ opacity:.7; transform:translateX(-50%) scaleX(1); }
    50%{ opacity:.4; transform:translateX(-50%) scaleX(.85); }
  }

  /* ==============================
     RESPONSIVE
     ============================== */
  @media(max-width:1080px){
    .dtf-prod-inner{
      grid-template-columns:1fr 1fr;
      grid-template-areas:
        "center right"
        "left   left";
    }
    .dtf-prod-left{ grid-area:left; flex-direction:row; flex-wrap:wrap; gap:20px; }
    .dtf-prod-center{ grid-area:center; }
    .dtf-prod-right{ grid-area:right; }
    .dtf-prod-title, .dtf-badge{ flex:1 1 100%; }
    .dtf-prod-body{ max-width:100%; }
    .dtf-btn-primary{ margin-top:4px; }
  }

  @media(max-width:680px){
    .dtf-prod-inner{
      grid-template-columns:1fr;
      grid-template-areas: "center" "right" "left";
    }
    .dtf-float-tag.dtf-ft-left{ left:-5%; }
    .dtf-float-tag.dtf-ft-right{ right:-5%; }
    .dtf-prod-left{ flex-direction:column; }
  }

  @media(prefers-reduced-motion:reduce){
    .dtf-prod *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
    .dtf-badge,.dtf-prod-title,.dtf-prod-body,.dtf-tech,.dtf-btn-primary,
    .dtf-prod-center,.dtf-stat-big,.dtf-feat{ opacity:1; transform:none; }
    .dtf-shirt-3d{ animation:none; }
    .dtf-halo{ animation:none; }
  }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fd5ad1e */@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

  .dtf-band{
    --ink:        #0E0D12;
    --surface:    #17151D;
    --line:       rgba(246,244,240,.13);
    --cyan:       #35E1F0;
    --magenta:    #FF3D8A;
    --yellow:     #FFD23F;
    --text:       #F6F4F0;
    --text-muted: #9C99A6;
    --font-display:'Bricolage Grotesque','Arial Black',sans-serif;
    --font-body:   'Inter',-apple-system,sans-serif;
    --font-mono:   'JetBrains Mono',monospace;
  }
  .dtf-band,.dtf-band *{ box-sizing:border-box; margin:0; padding:0; }

  /* ── contenedor principal ─────────────────────────────── */
  .dtf-band{
    position:relative; isolation:isolate;
    background:var(--surface);
    overflow:hidden;
    padding: clamp(30px,7vw,50px) clamp(20px,4vw,48px);
    /* borde superior e inferior como separador fino */
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }

  /* ── ruido de fondo (mismo grano que el hero) ─────────── */
  .dtf-band-grain{
    position:absolute; inset:-20%;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
    opacity:.05; pointer-events:none; z-index:0; mix-blend-mode:overlay;
  }

  /* ── haz de luz diagonal (firma visual única) ─────────── */
  .dtf-band-beam{
    position:absolute;
    /* empieza en la esquina superior-izquierda y corre hacia la derecha */
    top:-40%; left:-10%; right:-10%; bottom:-40%;
    background:conic-gradient(
      from 8deg at 18% 50%,
      transparent 0deg,
      rgba(53,225,240,.055) 12deg,
      transparent 24deg
    );
    pointer-events:none; z-index:0;
    animation:dtf-beam-drift 9s ease-in-out infinite;
  }

  /* ── manchas de color (ambiente) ─────────────────────── */
  .dtf-band-blob1{
    position:absolute; width:420px; height:420px;
    top:-40%; left:30%;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,61,138,.10), transparent 70%);
    filter:blur(48px); pointer-events:none; z-index:0;
  }
  .dtf-band-blob2{
    position:absolute; width:300px; height:300px;
    bottom:-30%; right:18%;
    border-radius:50%;
    background:radial-gradient(circle, rgba(53,225,240,.10), transparent 70%);
    filter:blur(36px); pointer-events:none; z-index:0;
  }

  /* ── línea de acento horizontal (guiño a regla de impresión) */
  .dtf-band-rule{
    position:absolute; left:0; right:0; top:0; height:2px;
    background:linear-gradient(90deg,
      transparent 0%,
      var(--cyan) 25%,
      var(--magenta) 55%,
      var(--yellow) 80%,
      transparent 100%);
    z-index:1;
    animation:dtf-rule-slide 1.4s cubic-bezier(.16,1,.3,1) forwards;
    transform-origin:left;
    transform:scaleX(0);
  }

  /* ── inner wrapper ────────────────────────────────────── */
  .dtf-band-inner{
    position:relative; z-index:2;
    max-width:1180px; margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:clamp(28px,4vw,48px);
  }

  /* ── bloque de texto ──────────────────────────────────── */
  .dtf-band-copy{ flex:1 1 380px; }

  .dtf-band-eyebrow{
    font-family:var(--font-mono); font-size:11.5px;
    letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-muted);
    display:flex; align-items:center; gap:10px;
    margin-bottom:clamp(12px,2vw,18px);
    opacity:1; transform:translateY(8px);
    animation:dtf-rise .6s cubic-bezier(.16,1,.3,1) .1s forwards;
  }
  .dtf-band-dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--yellow); box-shadow:0 0 8px var(--yellow);
    flex-shrink:0;
  }

  .dtf-band-title{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(2rem,4.8vw,3.8rem);
    line-height:.95; letter-spacing:-.02em;
    text-transform:uppercase; color:var(--text);
    opacity:1; transform:translateY(0);
    animation:dtf-title-in .75s cubic-bezier(.16,1,.3,1) .2s;
  }

  /* la palabra clave en degradado */
  .dtf-band-title .dtf-hi{
    display:inline-block;
    background:linear-gradient(90deg, var(--cyan) 0%, var(--magenta) 55%, var(--yellow) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  .dtf-band-sub{
    font-size:clamp(14px,1.4vw,16px); line-height:1.6;
    color:var(--text-muted); margin-top:clamp(12px,1.8vw,18px);
    max-width:42ch;
    opacity:1; transform:translateY(0);
    animation:none;
  }

  /* ── bloque de acciones ───────────────────────────────── */
  .dtf-band-actions{
    display:flex; flex-direction:column;
    align-items:flex-end; gap:14px;
    flex-shrink:0;
    opacity:1; transform:translateY(0);
    animation:none;
  }

  /* botón principal */
  .dtf-band-btn{
    display:inline-flex; align-items:center; gap:11px;
    font-family:var(--font-body); font-weight:700; font-size:15px;
    padding:17px 30px; border-radius:100px; text-decoration:none;
    background:linear-gradient(90deg, var(--cyan), var(--magenta));
    color:#fff; letter-spacing:.01em;
    box-shadow:0 0 0 0 rgba(53,225,240,0);
    transition:transform .35s cubic-bezier(.16,1,.3,1),
                box-shadow .35s ease,
                filter .35s ease;
    position:relative; overflow:hidden;
  }
  /* brillo interior en hover */
  .dtf-band-btn::before{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(135deg, rgba(255,255,255,.18), transparent 60%);
    opacity:0; transition:opacity .35s ease;
  }
  .dtf-band-btn:hover{ transform:translateY(-3px) scale(1.025); filter:brightness(1.1); box-shadow:0 16px 36px rgba(53,225,240,.28); }
  .dtf-band-btn:hover::before{ opacity:1; }
  .dtf-band-btn:hover .dtf-arr{ transform:translate(3px,-3px); }
  .dtf-arr{ transition:transform .35s cubic-bezier(.16,1,.3,1); }

  /* enlace de WhatsApp */
  .dtf-band-wa{
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--font-mono); font-size:12px;
    letter-spacing:.06em; text-transform:uppercase;
    color:var(--text-muted); text-decoration:none;
    transition:color .25s ease;
  }
  .dtf-band-wa:hover{ color:var(--text); }
  .dtf-band-wa svg{ width:15px; height:15px; color:#25D366; flex-shrink:0; }

  /* separador vertical entre texto y acciones (solo desktop) */
  .dtf-band-divider{
    width:1px; height:clamp(60px,8vw,90px);
    background:var(--line); flex-shrink:0;
    align-self:center;
  }

  /* ── stat mini: refuerzo de urgencia ─────────────────── */
  .dtf-band-stats{
    display:flex; gap:clamp(16px,2.5vw,32px);
    flex-wrap:wrap;
    margin-top:clamp(20px,3vw,30px);
    border-top:1px solid var(--line);
    padding-top:clamp(16px,2.5vw,24px);
    opacity:1; transform:translateY(0);
    animation:none;
  }
  .dtf-band-stat{
    display:flex; flex-direction:column; gap:2px;
  }
  .dtf-band-stat-n{
    font-family:var(--font-display); font-weight:700;
    font-size:clamp(1.15rem,2vw,1.5rem);
    line-height:1; color:var(--text); text-transform:uppercase;
  }
  .dtf-band-stat-l{
    font-family:var(--font-mono); font-size:10.5px;
    letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted);
  }

  /* ── animaciones ──────────────────────────────────────── */
  @keyframes dtf-rise{ to{ opacity:1; transform:translateY(0); } }
  @keyframes dtf-beam-drift{
    0%,100%{ transform:rotate(0deg) scale(1); }
    50%{ transform:rotate(3deg) scale(1.04); }
  }
  @keyframes dtf-rule-slide{ to{ transform:scaleX(1); } }

  /* ── foco / accesibilidad ─────────────────────────────── */
  .dtf-band a:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

  /* ── responsive ───────────────────────────────────────── */
  @media(max-width:820px){
    .dtf-band-divider{ display:none; }
    .dtf-band-actions{ align-items:flex-start; }
    .dtf-band-title{ font-size:clamp(1.9rem,7vw,2.6rem); }
  }
  @media(max-width:560px){
    .dtf-band-inner{ flex-direction:column; }
    .dtf-band-stats{ gap:18px; }
    .dtf-band-btn{ width:100%; justify-content:center; }
  }

  @media(prefers-reduced-motion:reduce){
    .dtf-band *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
    .dtf-band-eyebrow,.dtf-band-title,.dtf-band-sub,.dtf-band-actions,.dtf-band-stats
      { opacity:1; transform:none; }
    .dtf-band-rule{ transform:scaleX(1); }
    .dtf-band-beam{ animation:none; }
  }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2d1db70 */@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

  .dtf-faq{
    --ink:        #0E0D12;
    --surface:    #17151D;
    --line:       rgba(246,244,240,.13);
    --cyan:       #35E1F0;
    --magenta:    #FF3D8A;
    --yellow:     #FFD23F;
    --text:       #F6F4F0;
    --text-muted: #9C99A6;
    --font-display:'Bricolage Grotesque','Arial Black',sans-serif;
    --font-body:   'Inter',-apple-system,sans-serif;
    --font-mono:   'JetBrains Mono',monospace;
  }
  .dtf-faq,.dtf-faq *{ box-sizing:border-box; margin:0; padding:0; }

  /* ── contenedor principal ─────────────────────────────── */
  .dtf-faq{
    position:relative; isolation:isolate;
    background:var(--ink);
    overflow:hidden;
    padding: clamp(64px,9vw,120px) clamp(20px,4vw,48px);
    border-top:1px solid var(--line);
  }
  
  .dtf-faq-trigger:hover,
.dtf-faq-trigger:focus,
.dtf-faq-trigger:focus-visible,
.dtf-faq-trigger:active{
  background-color: transparent !important;
  color: inherit !important;
}

  /* ── mismo grano de fondo que el resto del sitio ──────── */
  .dtf-faq-grain{
    position:absolute; inset:-20%;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
    opacity:.05; pointer-events:none; z-index:0; mix-blend-mode:overlay;
  }

  /* ── un único blob ambiental (más contenido que en el banner:
       aquí el protagonismo es la lectura, no el efecto) ──── */
  .dtf-faq-blob{
    position:absolute; width:460px; height:460px;
    top:-15%; right:-8%;
    border-radius:50%;
    background:radial-gradient(circle, rgba(53,225,240,.08), transparent 70%);
    filter:blur(56px); pointer-events:none; z-index:0;
  }

  /* ── misma regla de acento superior (firma de marca) ──── */
  .dtf-faq-rule{
    position:absolute; left:0; right:0; top:0; height:2px;
    background:linear-gradient(90deg,
      transparent 0%, var(--cyan) 25%, var(--magenta) 55%, var(--yellow) 80%, transparent 100%);
    z-index:1;
    transform-origin:left; transform:scaleX(0);
    animation:dtf-faq-rule-slide 1.4s cubic-bezier(.16,1,.3,1) forwards;
  }

  /* ── layout: cabecera fija + lista ────────────────────── */
  .dtf-faq-inner{
    position:relative; z-index:2;
    max-width:1180px; margin:0 auto;
    display:grid;
    grid-template-columns: minmax(0,0.82fr) minmax(0,1.18fr);
    gap: clamp(32px,5vw,64px);
    align-items:start;
  }

  .dtf-faq-head{ position:sticky; top:clamp(24px,4vw,48px); }

  .dtf-faq-eyebrow{
    font-family:var(--font-mono); font-size:11.5px;
    letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-muted);
    display:flex; align-items:center; gap:10px;
    margin-bottom:clamp(14px,2vw,20px);
  }
  .dtf-faq-dot{
    width:6px; height:6px; border-radius:50%;
    background:var(--yellow); box-shadow:0 0 8px var(--yellow);
    flex-shrink:0;
  }

  .dtf-faq-title{
    font-family:var(--font-display); font-weight:800;
    font-size:clamp(1.9rem,4vw,3rem);
    line-height:1.02; letter-spacing:-.02em;
    color:var(--text);
  }
  .dtf-faq-title .dtf-hi{
    display:inline-block;
    background:linear-gradient(90deg, var(--cyan) 0%, var(--magenta) 55%, var(--yellow) 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  .dtf-faq-sub{
    font-family:var(--font-body); font-size:clamp(14px,1.4vw,16px);
    line-height:1.6; color:var(--text-muted);
    margin-top:clamp(14px,2vw,20px); max-width:38ch;
  }

  .dtf-faq-wa{
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--font-mono); font-size:12px;
    letter-spacing:.05em; text-transform:uppercase;
    color:var(--text-muted); text-decoration:none;
    margin-top:clamp(24px,3vw,32px);
    padding-top:clamp(20px,3vw,26px);
    border-top:1px solid var(--line);
    transition:color .25s ease;
  }
  .dtf-faq-wa:hover{ color:var(--text); }
  .dtf-faq-wa svg{ width:15px; height:15px; color:#25D366; flex-shrink:0; }

  /* ── lista de acordeón ─────────────────────────────────── */
  .dtf-faq-list{ counter-reset: dtf-faq-count; }

  .dtf-faq-item{ border-bottom:1px solid var(--line); }
  .dtf-faq-item:first-child{ border-top:1px solid var(--line); }
  .dtf-faq-item{ counter-increment: dtf-faq-count; }

  .dtf-faq-q{ font-weight:400; }
  .dtf-faq-trigger{
    all:unset;
    display:flex; align-items:center; gap:clamp(14px,2.5vw,22px);
    width:100%; cursor:pointer;
    padding: clamp(20px,2.6vw,26px) 4px;
  }

  .dtf-faq-num{
    font-family:var(--font-mono); font-size:12.5px;
    color:var(--text-muted); flex-shrink:0;
    width:26px;
  }
  .dtf-faq-num::before{ content: counter(dtf-faq-count, decimal-leading-zero); }

  .dtf-faq-text{
    font-family:var(--font-display); font-weight:600;
    font-size:clamp(1rem,1.6vw,1.2rem);
    color:var(--text); text-align:left; flex:1;
    letter-spacing:-.01em;
  }

  .dtf-faq-icon{
    flex-shrink:0; width:28px; height:28px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line); color:var(--text-muted);
    transition: transform .4s cubic-bezier(.16,1,.3,1),
                border-color .3s ease, color .3s ease;
  }
  .dtf-faq-trigger:hover .dtf-faq-icon{ border-color:var(--cyan); color:var(--text); }
  .dtf-faq-item.is-open .dtf-faq-icon{
    transform: rotate(45deg);
    border-color:var(--magenta); color:var(--text);
  }

  .dtf-faq-panel-wrap{
    display:grid; grid-template-rows: 0fr;
    transition: grid-template-rows .5s cubic-bezier(.16,1,.3,1);
  }
  .dtf-faq-item.is-open .dtf-faq-panel-wrap{ grid-template-rows: 1fr; }

  .dtf-faq-panel-inner{ overflow:hidden; min-height:0; }

  .dtf-faq-a{
    font-family:var(--font-body); font-size:clamp(14px,1.3vw,15.5px);
    line-height:1.65; color:var(--text-muted);
    padding: 0 4px clamp(22px,2.8vw,28px) calc(26px + clamp(14px,2.5vw,22px));
    max-width:56ch;
    opacity:0; transition:opacity .3s ease;
  }
  .dtf-faq-item.is-open .dtf-faq-a{ opacity:1; transition-delay:.15s; }

  /* ── foco / accesibilidad ─────────────────────────────── */
  .dtf-faq :focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

  /* ── animaciones ──────────────────────────────────────── */
  @keyframes dtf-faq-rule-slide{ to{ transform:scaleX(1); } }

  /* ── responsive ───────────────────────────────────────── */
  @media(max-width:820px){
    .dtf-faq-inner{ grid-template-columns: 1fr; }
    .dtf-faq-head{ position:static; }
  }
  @media(max-width:560px){
    .dtf-faq-text{ font-size:1rem; }
    .dtf-faq-a{ padding-left:4px; }
  }

  @media(prefers-reduced-motion:reduce){
    .dtf-faq *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
    .dtf-faq-rule{ transform:scaleX(1); }
  }/* End custom CSS */