/**
 * DTF Madrid · Chrome (header + footer global)
 * Wow Creative Design System v2 · cero emojis · fucsia + lime + Bricolage/Outfit/Caveat
 *
 * Carga: includes/class-chrome.php
 * Tokens base: ya vienen en core.css
 */

:root{
    --header-h:78px;
    --topbar-h:36px;
}

/* ════════════════════════════════════════════════════
   SUPRESIÓN DEL CHROME LEGACY (Astra + UAE Header/Footer Elementor)
   ════════════════════════════════════════════════════ */
body.dtfm-chrome-active #masthead,
body.dtfm-chrome-active .ast-primary-header-bar,
body.dtfm-chrome-active .ast-above-header-bar,
body.dtfm-chrome-active .ast-below-header-bar,
body.dtfm-chrome-active .site-header.elementor-section-wrap,
body.dtfm-chrome-active .elementor-location-header,
body.dtfm-chrome-active header[data-elementor-type="header"],
body.dtfm-chrome-active #colophon,
body.dtfm-chrome-active .site-footer.elementor-section-wrap,
body.dtfm-chrome-active .elementor-location-footer,
body.dtfm-chrome-active footer[data-elementor-type="footer"],
body.dtfm-chrome-active .ast-footer-overlay{display:none!important}

/* Astra wrappers que dejan padding fantasma */
body.dtfm-chrome-active .ast-primary-header-break-point.ast-header-break-point .main-header-bar-wrap{display:none!important}

/* ════════════════════════════════════════════════════
   TOP BAR · mobile-first
   ──────────────────────────────────────────────────────
   Móvil (<600px): solo "Tarifa Pro -10%" centrado.
     El mensaje "Pide antes de las 11h" ya aparece en el marquee
     lima de abajo, no merece la pena duplicarlo en una franja
     que se rompería a 4 líneas en pantallas pequeñas.
   Tablet (600px+): aparece el deal con dot animado a la izquierda.
   Desktop (860px+): aparecen también los links de teléfono y horarios.
   ════════════════════════════════════════════════════ */
.dtfm-topbar{
    background:var(--black);
    color:var(--white);
    font-family:var(--ff-body);
    font-size:12px;
    min-height:var(--topbar-h);
    display:flex;
    align-items:center;
    border-bottom:1px solid var(--gray-800);
}
.dtfm-topbar .container{
    max-width:1440px;margin:0 auto;padding:0 16px;width:100%;
}
.dtfm-topbar__inner{
    display:flex;justify-content:center;align-items:center;gap:12px;
    min-height:var(--topbar-h);
}
.dtfm-topbar__deal{display:none}
.dtfm-topbar__deal .dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--lime-500);
    box-shadow:0 0 0 0 rgba(153,204,0,.6);
    animation:dtfm-pulse 1.8s infinite;
    flex-shrink:0;
}
@keyframes dtfm-pulse{
    0%{box-shadow:0 0 0 0 rgba(153,204,0,.6)}
    70%{box-shadow:0 0 0 8px rgba(153,204,0,0)}
    100%{box-shadow:0 0 0 0 rgba(153,204,0,0)}
}
.dtfm-topbar__deal strong{color:var(--lime-500);font-weight:700}
.dtfm-topbar__links{display:none}
.dtfm-topbar__links a{
    color:var(--white);transition:color .15s;display:inline-flex;align-items:center;gap:6px;text-decoration:none;
}
.dtfm-topbar__links a:hover{color:var(--pink-300)}
.dtfm-topbar__links svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.dtfm-topbar__sep{color:var(--gray-700)}
/* "Tarifa Pro -10%" — fucsia con destello pulsante (efecto neón).
   Vive directamente bajo .dtfm-topbar__inner, NO dentro de __links, para
   que siga visible en mobile cuando los links se ocultan. */
.dtfm-topbar__pro{
    color:var(--pink-500);
    font-weight:700;font-size:12px;
    text-decoration:none;white-space:nowrap;flex-shrink:0;
    text-shadow:
        0 0 4px rgba(230,13,130,.85),
        0 0 10px rgba(230,13,130,.55),
        0 0 18px rgba(230,13,130,.35);
    animation:dtfm-pro-glow 2.4s ease-in-out infinite;
    transition:color .15s;
}
.dtfm-topbar__pro:hover{
    color:#ff5ba8;
    text-shadow:
        0 0 6px rgba(230,13,130,1),
        0 0 14px rgba(230,13,130,.7),
        0 0 24px rgba(230,13,130,.5);
}
@keyframes dtfm-pro-glow{
    0%,100%{text-shadow:0 0 4px rgba(230,13,130,.85),0 0 10px rgba(230,13,130,.55),0 0 18px rgba(230,13,130,.35)}
    50%{text-shadow:0 0 8px rgba(230,13,130,1),0 0 18px rgba(230,13,130,.8),0 0 32px rgba(230,13,130,.5)}
}
@media (prefers-reduced-motion:reduce){
    .dtfm-topbar__pro{animation:none}
    .dtfm-topbar__deal .dot{animation:none}
}

/* ─── 600px+ tablet ─── */
@media (min-width:600px){
    .dtfm-topbar .container{padding:0 24px}
    .dtfm-topbar__inner{
        justify-content:space-between;gap:24px;
    }
    .dtfm-topbar__deal{
        display:inline-flex;align-items:center;gap:8px;font-weight:500;
        min-width:0;
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    }
}

/* ─── 860px+ desktop: links de contacto ─── */
@media (min-width:860px){
    .dtfm-topbar{font-size:13px}
    .dtfm-topbar__deal{font-size:13px}
    .dtfm-topbar__links{
        display:flex;gap:24px;align-items:center;font-size:12px;color:var(--gray-300);
        flex-shrink:0;
    }
}

/* ════════════════════════════════════════════════════
   HEADER · sticky
   ════════════════════════════════════════════════════ */
.dtfm-header{
    position:sticky;top:0;z-index:200;background:var(--white);
    border-bottom:1px solid var(--gray-200);
    transition:box-shadow .2s, border-color .2s;
    font-family:var(--ff-body);
}
.dtfm-header.is-scrolled{box-shadow:0 2px 8px rgba(10,10,10,.06);border-color:transparent}
.dtfm-header .container{max-width:1440px;margin:0 auto;padding:0 24px}
.dtfm-header__inner{
    display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:24px;
}

/* Logo */
.dtfm-brand{display:inline-flex;align-items:center;line-height:0;text-decoration:none;flex-shrink:0}
.dtfm-brand img{
    height:42px !important;width:auto !important;
    max-width:none !important;
    object-fit:contain;display:block;
    aspect-ratio:auto;
}
.dtfm-brand:hover img{opacity:.85;transition:opacity .15s}
.dtfm-brand--footer img{height:52px !important}

/* Nav primary */
.dtfm-nav{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.dtfm-nav__item{position:relative}
.dtfm-nav__link{
    display:inline-flex;align-items:center;gap:5px;padding:10px 14px;
    font-weight:500;font-size:15px;color:var(--gray-900);
    border-radius:8px;transition:background .15s, color .15s;white-space:nowrap;text-decoration:none;
}
.dtfm-nav__link:hover,
.dtfm-nav__link[aria-expanded="true"]{background:var(--pink-50);color:var(--pink-500)}
.dtfm-nav__link .caret{
    width:10px;height:10px;transition:transform .2s;
    stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
}
.dtfm-nav__item:hover .caret{transform:rotate(180deg)}
.dtfm-nav__link .wow-dot{width:6px;height:6px;border-radius:50%;background:var(--lime-500);display:inline-block}

/* Item destacado permanente */
.dtfm-nav__link--featured{background:var(--pink-50);color:var(--pink-500);font-weight:600}
.dtfm-nav__link--featured::before{
    content:"";width:6px;height:6px;border-radius:50%;background:var(--lime-500);
    display:inline-block;margin-right:4px;animation:dtfm-pulse 2s infinite;
}
.dtfm-nav__link--featured:hover{background:var(--pink-500);color:var(--white)}
.dtfm-nav__link--featured:hover::before{background:var(--white)}

/* Item destacado IA · gradient pink→lime con pill IA */
.dtfm-nav__link--featured-ia{
    position:relative;
    background:linear-gradient(135deg,#fff5fa 0%,#f7fde8 100%);
    color:#1a0a14;font-weight:700;
    border:1.5px solid transparent;
    background-clip:padding-box;
    transition:all .25s;
}
.dtfm-nav__link--featured-ia::before{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
    background:linear-gradient(135deg,var(--pink-500) 0%,var(--lime-500) 100%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    pointer-events:none;
}
.dtfm-nav__link--featured-ia:hover{
    background:linear-gradient(135deg,var(--pink-500) 0%,#b3e600 100%);
    color:var(--white);
    transform:translateY(-1px);
    box-shadow:0 8px 20px -6px rgba(230,13,130,.4);
}
.dtfm-nav__link--featured-ia .caret{margin-left:2px}

.dtfm-nav__pill-ia{
    display:inline-flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--pink-500) 0%,var(--lime-500) 100%);
    color:var(--white);
    font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
    font-size:10px;letter-spacing:.08em;
    padding:2px 7px;border-radius:6px;
    margin-left:4px;
    text-transform:uppercase;
    box-shadow:0 2px 6px rgba(230,13,130,.3);
}
.dtfm-nav__link--featured-ia:hover .dtfm-nav__pill-ia{
    background:var(--white);color:var(--pink-500);box-shadow:0 2px 6px rgba(0,0,0,.15);
}

/* Mega menu tools acento gradient pink→lime en footer */
.dtfm-mega--tools .dtfm-mega__foot{
    background:linear-gradient(135deg,#fff5fa 0%,#f7fde8 100%);
    border-top:2px solid transparent;
    border-image:linear-gradient(90deg,var(--pink-500),var(--lime-500)) 1;
}

/* Mega menu */
.dtfm-mega{
    position:absolute;top:calc(100% + 12px);left:50%;
    transform:translateX(-50%) translateY(8px);
    background:var(--white);border-radius:20px;
    box-shadow:0 18px 48px rgba(10,10,10,.18);
    border:1px solid var(--gray-200);padding:24px;
    min-width:680px;opacity:0;visibility:hidden;
    transition:opacity .2s, transform .2s, visibility .2s;z-index:300;
}
.dtfm-mega--wide{min-width:880px}
.dtfm-mega--areas{min-width:760px}
.dtfm-nav__item:hover > .dtfm-mega,
.dtfm-nav__item:focus-within > .dtfm-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dtfm-nav__item:hover > .dtfm-mega::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}

/* Megas anclados según posición del item en el nav, para que NUNCA se salgan
   por el borde de la pantalla en viewports medianos/anchos.
   - --left: items del lado izquierdo (DTF Textil, DTF UV) → ancla al borde izquierdo del item, crece hacia la derecha
   - --right: items del lado derecho (Soluciones, Recursos) → ancla al borde derecho del item, crece hacia la izquierda
   - default (sin modificador): centrado, para items del medio (Herramientas IA) */
.dtfm-mega--left{left:0;transform:translateY(8px)}
.dtfm-nav__item:hover > .dtfm-mega--left,
.dtfm-nav__item:focus-within > .dtfm-mega--left{transform:translateY(0)}
.dtfm-mega--right{left:auto;right:0;transform:translateY(8px)}
.dtfm-nav__item:hover > .dtfm-mega--right,
.dtfm-nav__item:focus-within > .dtfm-mega--right{transform:translateY(0)}

.dtfm-mega__grid{display:grid;grid-template-columns:1fr 1fr 240px;gap:24px}
.dtfm-mega__grid--2{grid-template-columns:1fr 1fr}
.dtfm-mega__grid--areas{grid-template-columns:1fr 1fr 1fr;align-items:start}
/* Heading visual de columnas mega-menú — NO es <h6> para no romper jerarquía SEO */
.dtfm-mega__section .dtfm-mega__h{
    font-family:var(--ff-body);font-size:11px;font-weight:700;color:var(--pink-500);
    letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;
    padding-bottom:8px;border-bottom:1px solid var(--gray-200);
    line-height:1.2;
}
.dtfm-mega__list{display:flex;flex-direction:column;gap:2px;list-style:none;padding:0;margin:0}
.dtfm-mega__item{
    display:flex;align-items:center;gap:14px;padding:10px;border-radius:10px;
    transition:background .15s;color:var(--gray-900);text-decoration:none;
}
.dtfm-mega__item:hover{background:var(--pink-50)}
.dtfm-mega__item:hover .dtfm-mega__icon{background:var(--pink-500);color:var(--white)}
.dtfm-mega__icon{
    flex-shrink:0;width:44px;height:44px;border-radius:11px;
    background:var(--pink-50);color:var(--pink-500);
    display:grid;place-items:center;transition:all .15s;
}
.dtfm-mega__icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dtfm-mega__text{min-width:0;flex:1}
.dtfm-mega__title{
    display:block;
    font-family:var(--ff-display);font-weight:700;font-size:14px;color:var(--black);
    line-height:1.2;margin-bottom:2px;
}
/* Descripción del item inyectada vía data-desc para que Google AI Overview
   no la indexe como contenido (queda fuera del DOM textual). Visualmente
   idéntico al antiguo <span class="dtfm-mega__desc">. */
.dtfm-mega__title[data-desc]::after{
    content:attr(data-desc);
    display:block;
    font-family:var(--ff-text, inherit);
    font-weight:400;
    font-size:12px;color:var(--gray-500);line-height:1.4;
    margin-top:2px;
}
/* Compat: si algún template legacy aún imprime mega__desc, se ve igual. */
.dtfm-mega__desc{font-size:12px;color:var(--gray-500);line-height:1.4}
.dtfm-mega__pill{
    background:var(--lime-500);color:var(--black);font-size:9px;font-weight:700;
    padding:2px 6px;border-radius:4px;margin-left:6px;letter-spacing:.05em;
    text-transform:uppercase;vertical-align:middle;
}

/* Featured panel oscuro */
.dtfm-mega__feature{
    background:var(--black);color:var(--white);border-radius:12px;padding:24px;
    display:flex;flex-direction:column;justify-content:space-between;
    background-image:
        radial-gradient(circle at 80% 0%, rgba(230,13,130,.25), transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(153,204,0,.18), transparent 50%);
}
/* Título visual del feature panel — NO es <h4> para no romper jerarquía SEO */
.dtfm-mega__feature .dtfm-mega__feature-title{
    display:block;
    font-family:var(--ff-display);font-size:18px;font-weight:800;line-height:1.15;
    margin:0 0 8px;color:var(--white);
}
.dtfm-mega__feature .dtfm-mega__feature-title em{color:var(--lime-500);font-style:normal;font-weight:800}
.dtfm-mega__feature p{font-size:12px;color:var(--gray-300);line-height:1.5;margin:0 0 12px}
.dtfm-mega__feature ul{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;list-style:none;padding:0}
.dtfm-mega__feature li{font-size:12px;display:flex;gap:8px;align-items:flex-start;color:var(--gray-200)}
.dtfm-mega__feature li::before{content:"\2713";color:var(--lime-500);font-weight:700}
/* CTA dentro de los mega-menús.
   Selector con especificidad alta (.dtfm-header .dtfm-mega) para vencer
   reglas de Astra (.entry-content a:hover, etc) sin usar !important. */
.dtfm-header .dtfm-mega .dtfm-mega__btn,
.dtfm-header .dtfm-mega .dtfm-mega__btn:visited{
    display:inline-flex;align-items:center;gap:8px;padding:10px 18px;
    background:var(--pink-500);color:var(--white);border:2px solid var(--pink-500);
    border-radius:99px;
    font-weight:700;font-size:13px;line-height:1.2;
    white-space:nowrap;text-decoration:none;
    box-shadow:0 4px 14px -2px rgba(230,13,130,.4);
    transition:background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.dtfm-header .dtfm-mega .dtfm-mega__btn svg{
    width:14px;height:14px;
    stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
    flex-shrink:0;color:currentColor;
}
/* Hover INVERSO sobre mega claro (Herramientas IA, fondo gradient pink-50→lime-50):
   bg blanco + texto fucsia + borde fucsia. Destaca sobre el claro sin saturar. */
.dtfm-header .dtfm-mega .dtfm-mega__btn:hover,
.dtfm-header .dtfm-mega .dtfm-mega__btn:focus-visible{
    background:var(--white);color:var(--pink-600);border-color:var(--pink-500);
    transform:translateX(2px);
    box-shadow:0 8px 22px -4px rgba(230,13,130,.55);
    text-decoration:none;
}
/* Hover sobre mega OSCURO (DTF Textil, .dtfm-mega--wide tiene .mega__foot dark):
   el blanco se "fundiría" con el glow del shadow. Aquí va pink-700 saturado. */
.dtfm-header .dtfm-mega--wide .dtfm-mega__btn:hover,
.dtfm-header .dtfm-mega--wide .dtfm-mega__btn:focus-visible{
    background:var(--pink-700);color:var(--white);border-color:var(--pink-700);
    transform:translateX(2px);
    box-shadow:0 8px 22px -4px rgba(230,13,130,.7);
    text-decoration:none;
}

/* Áreas chips · grid 2 cols uniforme, alinea arriba.
   !important para vencer reglas heredadas de Astra (.entry-content a, etc). */
.dtfm-mega .dtfm-area-chips{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:6px 8px !important;
    align-content:start !important;
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
}
.dtfm-mega .dtfm-area-chip{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    padding:6px 12px !important;
    background:var(--gray-100) !important;
    border-radius:99px !important;
    font-size:12.5px !important;
    line-height:1.2 !important;
    color:var(--gray-900) !important;
    white-space:nowrap !important;
    text-decoration:none !important;
    min-height:30px !important;
    transition:background .15s, color .15s;
    box-shadow:none !important;
    text-transform:none !important;
}
.dtfm-mega .dtfm-area-chip:hover{
    background:var(--pink-500) !important;
    color:var(--white) !important;
}
.dtfm-mega__foot{
    margin-top:16px;padding-top:16px;border-top:1px solid var(--gray-200);
    display:flex;justify-content:space-between;align-items:center;
    font-size:12px;color:var(--gray-500);
}
.dtfm-mega__foot a{color:var(--pink-500);font-weight:600;text-decoration:none}

/* CTA principal nav */
.dtfm-nav__cta{
    display:inline-flex;align-items:center;gap:8px;padding:11px 18px;
    background:var(--lime-500);color:var(--black);border-radius:99px;
    font-weight:700;font-size:14px;
    transition:background .15s, transform .15s, box-shadow .15s, color .15s, border-color .15s;
    border:2px solid var(--black);white-space:nowrap;text-decoration:none;
}
.dtfm-nav__cta:hover{
    background:var(--pink-500);color:var(--white);border-color:var(--pink-500);
    transform:translateY(-1px);box-shadow:0 6px 16px rgba(230,13,130,.30);
}
.dtfm-nav__cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5}

/* Hamburguesa mobile.
   Usamos selector .dtfm-header .dtfm-nav__toggle para subir especificidad
   sobre las reglas de Astra (que pintan SVG en grey y color en slate-700).
   NO usamos !important. */
.dtfm-header .dtfm-nav__toggle{
    display:none;width:44px;height:44px;border-radius:10px;
    align-items:center;justify-content:center;
    background:var(--pink-50);border:1.5px solid var(--pink-300);cursor:pointer;
    color:var(--pink-600);padding:0;
    transition:background .15s,border-color .15s,color .15s;
}
.dtfm-header .dtfm-nav__toggle svg{
    width:24px;height:24px;
    stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;
    flex-shrink:0;
}
.dtfm-header .dtfm-nav__toggle:hover{background:var(--pink-100);border-color:var(--pink-500);color:var(--pink-700)}

/* Drawer móvil */
.dtfm-drawer{
    position:fixed;top:0;left:0;right:0;bottom:0;background:var(--white);z-index:400;
    transform:translateX(100%);transition:transform .3s ease-out;overflow-y:auto;padding:24px;
}
.dtfm-drawer.is-open{transform:translateX(0)}
.dtfm-drawer__head{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:32px;padding-bottom:16px;border-bottom:1px solid var(--gray-200);
}
.dtfm-drawer__close{
    width:44px;height:44px;border-radius:10px;
    background:var(--pink-50);border:1.5px solid var(--pink-300);
    color:var(--pink-600);
    display:grid;place-items:center;cursor:pointer;padding:0;
    transition:background .15s,border-color .15s,color .15s;
}
.dtfm-drawer__close:hover,.dtfm-drawer__close:focus-visible{
    background:var(--pink-100);border-color:var(--pink-500);color:var(--pink-700);
    outline:none;
}
.dtfm-drawer__close svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.dtfm-drawer details{border-bottom:1px solid var(--gray-200)}
.dtfm-drawer details summary{
    padding:16px 0;font-family:var(--ff-display);font-size:18px;font-weight:700;
    cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
}
.dtfm-drawer details summary::-webkit-details-marker{display:none}
.dtfm-drawer details summary::after{
    content:"+";font-weight:300;font-size:24px;color:var(--pink-500);transition:transform .2s;
}
.dtfm-drawer details[open] summary::after{transform:rotate(45deg)}
.dtfm-drawer details ul{padding:0 0 16px;display:flex;flex-direction:column;gap:6px;list-style:none;margin:0}
.dtfm-drawer details li a{display:block;padding:8px 0;font-size:15px;color:var(--gray-700);text-decoration:none}
.dtfm-drawer details li a:hover{color:var(--pink-500)}
.dtfm-drawer__simple{
    display:flex;align-items:center;gap:10px;
    padding:10px 4px;font-family:var(--ff-display);font-size:13px;font-weight:500;
    border-bottom:1px solid var(--gray-200);text-decoration:none;color:inherit;line-height:1.4;
    letter-spacing:0.04em;
}
.dtfm-drawer__simple .wow-dot{
    width:7px;height:7px;border-radius:50%;background:var(--lime-500);display:inline-block;flex-shrink:0;
}
/* Calculadora destacada — equivalente al --featured del desktop */
.dtfm-drawer__simple--featured{
    background:var(--pink-50);color:var(--pink-500);
    border-radius:10px;padding:14px;
    border-bottom:0;margin:14px 0 4px;
}
.dtfm-drawer__simple--featured::before{
    content:"";width:7px;height:7px;border-radius:50%;background:var(--lime-500);
    display:inline-block;flex-shrink:0;
}
/* Herramientas IA destacada — gradient pink-lime */
.dtfm-drawer__simple--ia{
    padding:14px;margin:0 0 14px;border-bottom:0;
    background:linear-gradient(135deg,#fff5fa 0%,#f7fde8 100%);
    border-radius:10px;
    position:relative;border:1.5px solid transparent;background-clip:padding-box;
}
.dtfm-drawer__simple--ia::before{
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
    background:linear-gradient(135deg,var(--pink-500) 0%,var(--lime-500) 100%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
/* Override summary inside drawer to match the new typography */
.dtfm-drawer details summary{
    padding:10px 4px;font-size:13px;font-weight:500;line-height:1.4;letter-spacing:0.04em;
}
.dtfm-drawer__cta{margin-top:24px;display:flex;flex-direction:column;gap:8px}
.dtfm-drawer__cta a{display:block;padding:16px;border-radius:12px;text-align:center;font-weight:700;text-decoration:none}
.dtfm-drawer__cta .primary{background:var(--lime-500);color:var(--black);border:2px solid var(--black)}
.dtfm-drawer__cta .secondary{background:var(--pink-500);color:var(--white)}
.dtfm-drawer__logout{
    margin-top:16px;display:block;padding:14px;text-align:center;
    background:#fafafa;border:1px solid var(--gray-200);border-radius:12px;
    color:#8e7783;text-decoration:none;font-weight:600;font-size:13px;
}

/* ════════════════════════════════════════════════════
   ACCESO CUENTA · WALLET · DROPDOWN
   ════════════════════════════════════════════════════ */
.dtfm-nav__right{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}

.dtfm-nav__account,
.dtfm-nav__cart{
    display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:50%;
    background:var(--white);border:1.5px solid var(--gray-200);
    color:var(--gray-900);text-decoration:none;flex-shrink:0;
    transition:background .15s,border-color .15s,color .15s;
    position:relative;
}
.dtfm-nav__account:hover,
.dtfm-nav__cart:hover{background:var(--pink-50);border-color:var(--pink-500);color:var(--pink-500)}
.dtfm-nav__account svg,
.dtfm-nav__cart svg{width:18px;height:18px}
.dtfm-nav__cart.has-items{border-color:var(--pink-500);color:var(--pink-500)}
.dtfm-nav__cart__badge{
    position:absolute;top:-4px;right:-4px;
    min-width:18px;height:18px;padding:0 5px;
    background:var(--pink-500);color:#fff;
    font-size:11px;font-weight:700;line-height:18px;
    border-radius:9px;text-align:center;
    box-shadow:0 1px 4px rgba(230,13,130,.35);
}

.dtfm-nav__user-wrap{position:relative;display:inline-flex}
/* Botón usuario: sin fondo blanco que se confunda con el header — solo avatar + chevron */
.dtfm-nav__user{
    display:inline-flex;align-items:center;gap:4px;
    padding:0;border:0;background:transparent;
    font-family:inherit;font-size:13px;font-weight:600;color:var(--gray-900);
    cursor:pointer;flex-shrink:0;border-radius:999px;
}
.dtfm-nav__user:focus-visible{outline:2px solid var(--pink-500);outline-offset:3px}
.dtfm-nav__user:hover .dtfm-nav__user__avatar{transform:scale(1.04);box-shadow:0 4px 14px -2px rgba(230,13,130,.45)}
.dtfm-nav__user:hover .dtfm-nav__user__chev{color:var(--pink-500)}
.dtfm-nav__user__avatar{
    width:36px;height:36px;border-radius:50%;
    background:linear-gradient(135deg,var(--pink-500) 0%,var(--pink-700) 100%);
    color:var(--white);display:flex;align-items:center;justify-content:center;
    font-family:var(--ff-display);font-weight:800;font-size:13px;letter-spacing:-.02em;
    box-shadow:0 2px 8px -2px rgba(230,13,130,.35);
    transition:transform .15s,box-shadow .15s;
}
.dtfm-nav__user__chev{width:13px;height:13px;color:#888;transition:transform .2s}
.dtfm-nav__user[aria-expanded="true"] .dtfm-nav__user__chev{transform:rotate(180deg)}

.dtfm-nav__wallet{
    display:inline-flex;align-items:center;gap:7px;
    background:linear-gradient(135deg,#FFD6E9 0%,#fff5fa 100%);
    border:1.5px solid var(--pink-300);
    padding:6px 14px 6px 12px;border-radius:999px;
    white-space:nowrap;flex-shrink:0;line-height:1.1;text-decoration:none;
    box-shadow:0 2px 8px -2px rgba(230,13,130,.25);
    transition:box-shadow .15s,border-color .15s,transform .15s;
}
.dtfm-nav__wallet:hover{
    border-color:var(--pink-500);
    box-shadow:0 4px 14px -2px rgba(230,13,130,.4);
    transform:translateY(-1px);
}
.dtfm-nav__wallet::before{
    content:"";width:6px;height:6px;border-radius:50%;
    background:var(--lime-500);box-shadow:0 0 0 2.5px rgba(153,204,0,.35);flex-shrink:0;
}
.dtfm-nav__wallet__amount{
    font-family:var(--ff-display);font-weight:800;font-size:14px;
    color:var(--pink-700);letter-spacing:-.01em;
}
.dtfm-nav__wallet__label{
    font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--pink-600);margin-left:2px;
}

/* Dropdown del avatar */
.dtfm-dropdown{
    position:absolute;top:calc(100% + 8px);right:0;width:280px;
    background:var(--white);border:1px solid #f0e5ec;border-radius:18px;
    box-shadow:0 20px 50px -15px rgba(20,8,30,.18);padding:10px;z-index:50;
    font-size:13.5px;font-weight:500;
}
.dtfm-dropdown[hidden]{display:none}
.dtfm-dropdown__head{padding:10px 12px 14px;border-bottom:1px solid #f5ecf2;margin-bottom:8px}
.dtfm-dropdown__name{font-family:var(--ff-display);font-weight:800;font-size:15px;color:var(--gray-900);margin:0 0 2px}
.dtfm-dropdown__email{font-size:12px;color:#8e7783;word-break:break-all}
.dtfm-dropdown__wallet{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    background:linear-gradient(135deg,#fff5fa 0%,#f7fde8 100%);
    border:1px solid var(--pink-100);padding:10px 14px;border-radius:14px;margin:4px 4px 8px;
    text-decoration:none;
}
.dtfm-dropdown__wallet-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#5a4452;display:block}
.dtfm-dropdown__wallet-amount{font-family:var(--ff-display);font-weight:800;font-size:18px;color:var(--pink-500);margin-top:2px;display:block}
.dtfm-dropdown__wallet-cta{font-size:12px;color:var(--pink-500);font-weight:700;letter-spacing:.04em}
.dtfm-dropdown a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--gray-900);font-weight:500}
.dtfm-dropdown a:hover{background:#faf6fa}
.dtfm-dropdown a svg{width:16px;height:16px;color:#8e7783;flex-shrink:0}
.dtfm-dropdown a.is-pro{color:var(--lime-700)}
.dtfm-dropdown a.is-pro svg{color:var(--lime-700)}
.dtfm-dropdown a.is-pro-active{color:var(--pink-600);font-weight:700;background:linear-gradient(90deg,#fff5fa 0%,#fbfff0 100%);border:1px solid var(--pink-200)}
.dtfm-dropdown a.is-pro-active svg{color:var(--pink-600)}
.dtfm-dropdown a.is-logout{color:#8e7783}
.dtfm-dropdown__sep{height:1px;background:#f5ecf2;margin:6px 8px}

/* Pill IA reutilizable */
.dtfm-nav__pill-ia{
    display:inline-flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--pink-500) 0%,var(--lime-500) 100%);
    color:var(--white);font-family:var(--ff-display);font-weight:800;
    font-size:10px;letter-spacing:.08em;padding:2px 7px;border-radius:6px;margin-left:4px;text-transform:uppercase;
    box-shadow:0 2px 6px rgba(230,13,130,.3);
}

/* Bloque cuenta del drawer móvil */
.dtfm-drawer__account{
    display:flex;align-items:center;gap:12px;
    padding:14px;border-radius:16px;text-decoration:none;color:var(--black);
    margin:0 0 12px;
    background:linear-gradient(135deg,#fff5fa 0%,#fff 100%);
    border:1px solid var(--pink-100);
}
.dtfm-drawer__account--out{background:#fafafa;border-color:var(--gray-200)}
.dtfm-drawer__account__avatar{
    width:44px;height:44px;border-radius:50%;
    background:linear-gradient(135deg,var(--pink-500),var(--pink-600));color:var(--white);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--ff-display);font-weight:800;font-size:16px;flex-shrink:0;
}
.dtfm-drawer__account--out .dtfm-drawer__account__avatar{background:#e9e0e6;color:#6a4d5d}
.dtfm-drawer__account--out .dtfm-drawer__account__avatar svg{width:22px;height:22px}
.dtfm-drawer__account__name{font-family:var(--ff-display);font-weight:800;font-size:16px;line-height:1.1}
.dtfm-drawer__account__sub{font-size:12px;color:#5a4452;margin-top:3px;word-break:break-all}
.dtfm-drawer__account__arrow{margin-left:auto;color:var(--pink-500);font-size:18px;flex-shrink:0}

/* Wallet pill bonito en el drawer móvil */
.dtfm-drawer__wallet{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    background:linear-gradient(135deg,#fff5fa 0%,#f7fde8 100%);
    border:1px solid var(--pink-100);
    padding:14px 16px;border-radius:14px;
    margin:0 0 18px;text-decoration:none;
}
.dtfm-drawer__wallet__left{display:flex;align-items:center;gap:10px;line-height:1.1}
.dtfm-drawer__wallet__left::before{
    content:"";width:7px;height:7px;border-radius:50%;
    background:var(--lime-500);box-shadow:0 0 0 3px rgba(153,204,0,.3);flex-shrink:0;
}
.dtfm-drawer__wallet__amount{font-family:var(--ff-display);font-weight:800;font-size:18px;color:var(--pink-600);letter-spacing:-.01em}
.dtfm-drawer__wallet__label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8e7783;margin-left:2px}
.dtfm-drawer__wallet__cta{font-size:12px;font-weight:700;color:var(--pink-500);text-transform:uppercase;letter-spacing:.06em}

@media (max-width:1100px){
    .dtfm-nav{display:none}
    .dtfm-header .dtfm-nav__toggle{display:inline-flex}
    .dtfm-nav__cta{display:none}
    /* En mobile compactamos el wallet pill: solo importe, sin label */
    .dtfm-nav__wallet__label{display:none}
    .dtfm-nav__user__chev{display:none}
}

/* ════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════ */
.dtfm-footer{
    background:var(--black);color:var(--gray-300);padding:64px 0 24px;
    background-image:
        radial-gradient(circle at 10% 0%, rgba(230,13,130,.10), transparent 50%),
        radial-gradient(circle at 90% 100%, rgba(153,204,0,.06), transparent 50%);
    margin-top:64px;font-family:var(--ff-body);
}
.dtfm-footer .container{max-width:1440px;margin:0 auto;padding:0 24px}
.dtfm-footer__inner{
    display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px;
}
.dtfm-footer__brand .dtfm-brand--footer{margin-bottom:16px;display:inline-block}
.dtfm-footer__brand p{font-size:14px;line-height:1.6;color:var(--gray-300);margin:0 0 16px;max-width:340px}
.dtfm-footer__brand strong{color:var(--white);font-weight:700}
.dtfm-footer__contact{font-size:13px;line-height:1.7;color:var(--gray-400)}
.dtfm-footer__contact a{color:var(--gray-200);transition:color .15s;text-decoration:none}
.dtfm-footer__contact a:hover{color:var(--pink-300)}
.dtfm-footer__contact .phone{color:var(--lime-500);font-weight:700;font-size:15px}
.dtfm-footer__contact .phone:hover{color:var(--pink-300)}

.dtfm-footer__social{display:flex;gap:8px;margin-top:16px}
.dtfm-footer__social a{
    width:36px;height:36px;border-radius:8px;background:var(--gray-800);
    display:grid;place-items:center;transition:background .15s, transform .15s;text-decoration:none;
}
.dtfm-footer__social a:hover{background:var(--pink-500);transform:translateY(-2px)}
.dtfm-footer__social svg{width:16px;height:16px;fill:var(--white)}

/* Heading visual de columnas footer — NO es <h5> para no romper jerarquía SEO */
.dtfm-footer__col .dtfm-footer__h{
    font-family:var(--ff-display);font-size:14px;font-weight:700;color:var(--white);
    margin:0 0 16px;letter-spacing:.02em;position:relative;padding-bottom:8px;
    line-height:1.2;
}
.dtfm-footer__col .dtfm-footer__h::after{
    content:"";position:absolute;bottom:0;left:0;width:24px;height:2px;background:var(--lime-500);
}
.dtfm-footer__col ul{display:flex;flex-direction:column;gap:8px;list-style:none;padding:0;margin:0}
.dtfm-footer__col li a{font-size:13px;color:var(--gray-400);transition:color .15s, padding-left .15s;text-decoration:none}
.dtfm-footer__col li a:hover{color:var(--pink-300);padding-left:4px}

.dtfm-footer__locations{
    border-top:1px solid var(--gray-800);border-bottom:1px solid var(--gray-800);
    padding:32px 0;margin-bottom:24px;font-size:12.5px;line-height:2;color:var(--gray-400);
}
.dtfm-footer__locations-row{margin-bottom:16px}
.dtfm-footer__locations-row:last-child{margin-bottom:0}
.dtfm-footer__locations strong{
    display:block;color:var(--white);font-family:var(--ff-display);
    font-size:13px;font-weight:700;margin-bottom:6px;letter-spacing:.02em;
}
.dtfm-footer__locations strong .pink{color:var(--pink-300)}
.dtfm-footer__locations strong .lime{color:var(--lime-500)}
.dtfm-footer__locations a{color:var(--gray-300);transition:color .15s;margin-right:4px;text-decoration:none}
.dtfm-footer__locations a:hover{color:var(--pink-300)}
.dtfm-footer__locations .sep{color:var(--gray-700);margin:0 4px}
.dtfm-footer__locations a.see-all{color:var(--pink-300);font-weight:600}
.dtfm-footer__locations a.see-all:hover{color:var(--white)}

.dtfm-footer__bottom{
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
    font-size:12px;color:var(--gray-500);padding-top:24px;border-top:1px solid var(--gray-800);
}
.dtfm-footer__bottom-links{display:flex;gap:24px;flex-wrap:wrap}
.dtfm-footer__bottom-links a{transition:color .15s;color:inherit;text-decoration:none}
.dtfm-footer__bottom-links a:hover{color:var(--pink-300)}

.dtfm-footer__trust{
    display:flex;gap:16px;align-items:center;flex-wrap:wrap;
    margin-top:16px;padding-top:16px;
    border-top:1px dashed var(--gray-800);font-size:11.5px;color:var(--gray-500);
}
.dtfm-footer__trust-chip{
    display:inline-flex;align-items:center;gap:6px;padding:6px 10px;
    background:var(--gray-900);border:1px solid var(--gray-800);
    border-radius:99px;color:var(--gray-300);
}
.dtfm-footer__trust-chip strong{color:var(--white)}
.dtfm-footer__trust-chip .star{color:var(--lime-500)}

@media (max-width:1100px){
    .dtfm-footer__inner{grid-template-columns:1fr 1fr 1fr}
    .dtfm-footer__brand{grid-column:1 / -1}
}
@media (max-width:680px){
    .dtfm-footer__inner{grid-template-columns:1fr 1fr;gap:24px}
    .dtfm-footer__brand{grid-column:1 / -1}
    .dtfm-footer__bottom{flex-direction:column;align-items:flex-start}
}

/* Float CTA — esquina IZQUIERDA para no chocar con el botón flotante de WhatsApp (que ocupa bottom-right) */
.dtfm-float-cta{
    position:fixed;bottom:24px;left:24px;
    background:var(--pink-500);color:var(--white);padding:14px 22px;
    border-radius:99px;font-weight:700;font-size:14px;font-family:var(--ff-body);
    box-shadow:0 14px 40px rgba(230,13,130,.4);
    display:inline-flex;align-items:center;gap:8px;z-index:150;
    transition:transform .15s, background .15s;text-decoration:none;
}
.dtfm-float-cta:hover{background:var(--lime-500);color:var(--black);box-shadow:0 14px 40px rgba(153,204,0,.4);transform:translateY(-2px)}
.dtfm-float-cta svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5}

@media (max-width:680px){
    .dtfm-float-cta{bottom:16px;left:16px;padding:12px 16px;font-size:13px}
}

/* Ocultar el indicador flotante "Privacidad" del banner de cookies (plugin Adapta-RGPD).
   Su JS hace $('#cookies-eu-banner-closed').show() inline, así que necesita !important
   (un único override justificado, no apilado). El link de política sigue en el footer. */
#cookies-eu-banner-closed{display:none !important}