/*
 * Header y footer 2026 — todo el CSS del layout nuevo vive aca.
 *
 * REGLA DE ORO: cada selector cuelga de .dl-header-2026 o de .dl-footer-2026. Sin excepcion.
 * La maqueta original traia reglas globales -*, body, a, button, ul- que en un sitio con
 * Bootstrap habrian desarmado las 242 paginas: un solo *{margin:0;padding:0} suelto alcanza.
 * Por eso se tradujeron a descendientes de las raices en vez de copiarse tal cual.
 *
 * Las variables llevan prefijo --dl26- por lo mismo: --verde o --border son nombres demasiado
 * probables como para arriesgarse a pisar los de otra hoja.
 *
 * De html y body solo sobrevivio lo que tiene sentido dentro de un bloque -tipografia, color,
 * interlineado-, y quedaron en la raiz misma, no como descendientes: body es ancestro nuestro,
 * asi que ".dl-header-2026 body" no matchearia nunca. Se descartaron color-scheme,
 * scroll-behavior y el background de pagina, que son de documento y no del bloque.
 *
 * Se carga en el head DESPUES de bundle.min.css: misma especificidad, gana el ultimo. Va en el
 * head y no al final del body para que el header no se dibuje sin estilos y salte.
 *
 * Generado a partir de la maqueta depilife-header-footer-v1.html.
 */

.dl-header-2026,
.dl-footer-2026{
    --dl26-blanco:#FFF3EE;
    --dl26-crema:#EFD7CB;
    --dl26-verde:#759947;
    --dl26-verde-oscuro:#171C08;
    --dl26-gris-bg:#F5F5F3;
    --dl26-border:rgba(23,28,8,.1);
    --dl26-border-soft:rgba(23,28,8,.06);
    --dl26-font:'Inter',system-ui,-apple-system,sans-serif;
    font-family:var(--dl26-font);
    color:var(--dl26-verde-oscuro);
    line-height:1.5;
}
.dl-header-2026 *, .dl-footer-2026 *{box-sizing:border-box;margin:0;padding:0}
.dl-header-2026 button, .dl-footer-2026 button{font-family:inherit;cursor:pointer;border:none;background:none}
.dl-header-2026 a, .dl-footer-2026 a{text-decoration:none;color:inherit}
.dl-header-2026 ul, .dl-footer-2026 ul{list-style:none}
.dl-header-2026{position:sticky;top:0;z-index:100; background:white; border-bottom:1px solid var(--dl26-border-soft);}
.dl-header-2026 .dl-header-inner{max-width:1240px;margin:0 auto; display:flex;align-items:center; padding:0 40px;height:64px;}
.dl-header-2026 .dl-logo{margin-right:40px;flex-shrink:0;display:flex;align-items:center}
.dl-header-2026 .dl-logo-img{height:28px;width:auto}
.dl-header-2026 .dl-nav{display:flex;align-items:center;gap:4px;flex:1;justify-content:center}
.dl-header-2026 .dl-nav-item{position:relative;padding:8px 14px;font-size:13px;font-weight:500; border-radius:8px;transition:background .2s;cursor:pointer; display:flex;align-items:center;gap:4px;white-space:nowrap;}
.dl-header-2026 .dl-nav-item:hover{background:rgba(23,28,8,.04)}
.dl-header-2026 .dl-nav-item.active{color:var(--dl26-verde);font-weight:600}
.dl-header-2026 .dl-nav-item.active .dl-nav-icon svg{opacity:1}
.dl-header-2026 .dl-nav-item svg.dl-chev{width:12px;height:12px;opacity:.35;transition:transform .2s}
.dl-header-2026 .dl-nav-item.open svg.dl-chev{transform:rotate(180deg)}
.dl-header-2026 .dl-nav-icon{width:24px;height:24px; display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dl-header-2026 .dl-nav-icon svg{width:16px;height:16px;stroke:var(--dl26-verde);opacity:.6}
.dl-header-2026 .dl-dropdown{display:none;position:absolute;top:calc(100% + 8px);left:0; background:white;border-radius:14px;padding:8px;min-width:220px; box-shadow:0 8px 30px rgba(23,28,8,.12),0 0 0 1px rgba(23,28,8,.06); z-index:200;}
.dl-header-2026 .dl-dropdown.open{display:block}
.dl-header-2026 .dl-dropdown.right{left:auto;right:0}
.dl-header-2026 .dl-drop-item{display:flex;align-items:center;gap:10px; padding:10px 14px;border-radius:8px;font-size:13px;font-weight:500; transition:background .15s;cursor:pointer;}
.dl-header-2026 .dl-drop-item:hover{background:rgba(23,28,8,.04)}
.dl-header-2026 .dl-drop-item .dl-drop-icon{width:32px;height:32px;border-radius:8px;background:var(--dl26-gris-bg); display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dl-header-2026 .dl-drop-item .dl-drop-icon svg{width:16px;height:16px;opacity:.5}
.dl-header-2026 .dl-drop-item .dl-drop-text{flex:1}
.dl-header-2026 .dl-drop-item .dl-drop-label{font-size:13px;font-weight:500}
.dl-header-2026 .dl-drop-item .dl-drop-desc{font-size:10px;opacity:.4;margin-top:1px}
.dl-header-2026 .dl-drop-divider{height:1px;background:var(--dl26-border-soft);margin:4px 8px}
.dl-header-2026 .dl-drop-group-label{font-size:9px;font-weight:600;letter-spacing:1px; text-transform:uppercase;color:var(--dl26-verde);opacity:.7; padding:8px 14px 4px;}
.dl-header-2026 .dl-drop-item.indented{padding-left:24px}
.dl-header-2026 .dl-header-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.dl-header-2026 .dl-mi-btn{display:flex;align-items:center;gap:7px; padding:8px 14px;border-radius:999px;font-size:12px;font-weight:600; background:var(--dl26-verde);color:white;text-decoration:none; transition:background .2s;cursor:pointer;}
.dl-header-2026 .dl-mi-btn:hover{background:#648538}
.dl-header-2026 .dl-mi-btn:active{transform:scale(.97)}
.dl-header-2026 .dl-mi-btn svg{width:15px;height:15px;opacity:.8}
.dl-header-2026 .dl-cart-btn{position:relative;width:40px;height:40px;border-radius:50%; display:flex;align-items:center;justify-content:center; transition:background .2s;cursor:pointer;}
.dl-header-2026 .dl-cart-btn:hover{background:rgba(23,28,8,.04)}
.dl-header-2026 .dl-cart-btn svg{width:20px;height:20px;opacity:.8}
.dl-header-2026 .dl-cart-count{position:absolute;top:4px;right:2px; width:16px;height:16px;border-radius:50%; background:var(--dl26-verde);color:white; font-size:9px;font-weight:700; display:flex;align-items:center;justify-content:center;}
.dl-header-2026 .dl-hamburger{display:none;width:40px;height:40px; align-items:center;justify-content:center;cursor:pointer;}
.dl-header-2026 .dl-hamburger svg{width:22px;height:22px;opacity:.6}
.dl-header-2026 .dl-drawer-overlay{display:none;position:fixed;inset:0;background:rgba(23,28,8,.35); z-index:300;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.dl-header-2026 .dl-drawer-overlay.open{display:block}
.dl-header-2026 .dl-drawer{position:fixed;top:8px;right:8px;bottom:8px;width:300px; background:white;z-index:301;border-radius:20px; box-shadow:0 20px 60px rgba(23,28,8,.15); transition:right .3s cubic-bezier(.4,0,.2,1); right:-320px; display:flex;flex-direction:column; overflow:hidden;}
.dl-header-2026 .dl-drawer.open{right:8px}
.dl-header-2026 .dl-drawer-close{position:absolute;top:12px;right:12px;z-index:5; width:32px;height:32px;border-radius:50%; background:rgba(23,28,8,.05); display:flex;align-items:center;justify-content:center; cursor:pointer;transition:background .2s;}
.dl-header-2026 .dl-drawer-close:hover{background:rgba(23,28,8,.1)}
.dl-header-2026 .dl-drawer-close svg{width:16px;height:16px;opacity:.4}
.dl-header-2026 .dl-drawer-header{display:none}
.dl-header-2026 .dl-drawer-body{padding:48px 20px 20px;flex:1;overflow-y:auto}
.dl-header-2026 .dl-drawer-section{margin-bottom:20px}
.dl-header-2026 .dl-drawer-section-label{font-size:10px;font-weight:600;letter-spacing:1px; text-transform:uppercase;color:var(--dl26-verde);opacity:.7;margin-bottom:8px;}
.dl-header-2026 .dl-drawer-action{display:flex;align-items:center;gap:12px; padding:11px 0;font-size:15px;font-weight:500; cursor:pointer;transition:opacity .15s;}
.dl-header-2026 .dl-drawer-action:hover{opacity:.6}
.dl-header-2026 .dl-drawer-action-icon{width:32px;height:32px;border-radius:10px; background:rgba(117,153,71,.08); display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dl-header-2026 .dl-drawer-action-icon svg{width:16px;height:16px;stroke:var(--dl26-verde);opacity:.8}
.dl-header-2026 .dl-drawer-link{display:flex;align-items:center;gap:10px; padding:10px 0;font-size:14px;font-weight:500; cursor:pointer;transition:opacity .15s;}
.dl-header-2026 .dl-drawer-link:hover{opacity:.5}
.dl-header-2026 .dl-drawer-mas-toggle{display:flex;align-items:center;justify-content:center;gap:6px; padding:10px 16px;border-radius:999px;font-size:13px;font-weight:600; cursor:pointer;color:var(--dl26-verde-oscuro); border:1.5px solid rgba(23,28,8,.15); transition:all .2s;margin-top:4px;}
.dl-header-2026 .dl-drawer-mas-toggle:hover{border-color:rgba(23,28,8,.25)}
.dl-header-2026 .dl-drawer-mas-toggle svg{width:12px;height:12px;transition:transform .2s}
.dl-header-2026 .dl-drawer-user-card{display:flex;align-items:center;gap:12px; padding:14px 16px;border-radius:14px; background:rgba(117,153,71,.06); transition:background .2s;}
.dl-header-2026 .dl-drawer-user-card:hover{background:rgba(117,153,71,.1)}
.dl-header-2026 .dl-drawer-footer{padding:16px 20px;border-top:1px solid rgba(23,28,8,.06); flex-shrink:0;}
.dl-header-2026 .dl-drawer-mi{display:flex;align-items:center;justify-content:center;gap:8px; padding:12px;border-radius:999px;font-size:13px;font-weight:600; background:var(--dl26-verde-oscuro);color:var(--dl26-blanco);width:100%; cursor:pointer;transition:background .2s;}
.dl-header-2026 .dl-drawer-mi:hover{background:#000}
.dl-header-2026 .dl-drawer-mi svg{width:16px;height:16px}
.dl-footer-2026{max-width:1240px;margin:0 auto;padding:0 40px 40px;margin-top:80px}
.dl-footer-2026 .dl-footer-card{background:var(--dl26-verde-oscuro);border-radius:28px; padding:48px;color:rgba(255,243,238,.5); overflow:hidden;position:relative;}
.dl-footer-2026 .dl-footer-card::before{content:"";position:absolute;top:-60px;right:-60px; width:300px;height:300px;border-radius:50%; background:radial-gradient(circle,rgba(117,153,71,.15) 0%,transparent 70%); pointer-events:none;}
.dl-footer-2026 .dl-footer-top{display:flex;justify-content:space-between;gap:48px;margin-bottom:40px;position:relative;z-index:1}
.dl-footer-2026 .dl-footer-left{flex:1;max-width:480px}
.dl-footer-2026 .dl-footer-logo{margin-bottom:20px}
.dl-footer-2026 .dl-footer-logo img{height:28px;filter:brightness(10)}
.dl-footer-2026 .dl-footer-claim{font-size:26px;font-weight:300;letter-spacing:-.5px; color:var(--dl26-blanco);line-height:1.25;margin-bottom:6px;}
.dl-footer-2026 .dl-footer-claim em{font-style:italic;color:var(--dl26-verde)}
.dl-footer-2026 .dl-footer-news-title{font-size:16px;font-weight:600;color:var(--dl26-blanco); letter-spacing:-.2px;margin-top:28px;margin-bottom:4px;}
.dl-footer-2026 .dl-footer-sub{font-size:13px;opacity:.6;margin-bottom:20px}
.dl-footer-2026 .dl-footer-news{display:flex;gap:8px;max-width:400px}
.dl-footer-2026 .dl-footer-news-input{flex:1;padding:12px 18px;border-radius:999px;border:none; font-size:13px;font-family:var(--dl26-font); background:rgba(255,243,238,.12);color:var(--dl26-blanco);outline:none;}
.dl-footer-2026 .dl-footer-news-input::placeholder{color:rgba(255,243,238,.4)}
.dl-footer-2026 .dl-footer-news-input:focus{background:rgba(255,243,238,.16)}
.dl-footer-2026 .dl-footer-news-btn{padding:12px 22px;border-radius:999px;border:none; font-size:13px;font-weight:600;font-family:var(--dl26-font); background:var(--dl26-verde);color:white;cursor:pointer;white-space:nowrap;}
.dl-footer-2026 .dl-footer-news-btn:hover{background:#648538}
.dl-footer-2026 .dl-footer-right{display:flex;gap:48px;flex-shrink:0}
.dl-footer-2026 .dl-footer-col-title{font-size:10px;font-weight:600;letter-spacing:1.2px; text-transform:uppercase;color:rgba(255,243,238,.5);margin-bottom:12px;}
.dl-footer-2026 .dl-footer-link{display:block;font-size:13px;padding:4px 0;transition:color .2s;color:rgba(255,243,238,.7)}
.dl-footer-2026 .dl-footer-link:hover{color:var(--dl26-blanco)}
.dl-footer-2026 .dl-footer-wa{display:inline-flex;align-items:center;gap:6px; font-size:11px;font-weight:500;color:var(--dl26-verde); padding:5px 12px;border-radius:999px; background:rgba(117,153,71,.12);transition:background .2s;}
.dl-footer-2026 .dl-footer-wa:hover{background:rgba(117,153,71,.2)}
.dl-footer-2026 .dl-footer-wa svg{width:13px;height:13px;fill:var(--dl26-verde)}
.dl-footer-2026 .dl-footer-bottom{display:flex;align-items:center;justify-content:space-between; padding-top:24px;border-top:1px solid rgba(255,243,238,.1); font-size:11px;color:rgba(255,243,238,.5);position:relative;z-index:1;}
.dl-footer-2026 .dl-footer-bottom-right{display:flex;align-items:center;gap:14px}
.dl-footer-2026 .dl-footer-bottom a{transition:color .2s}
.dl-footer-2026 .dl-footer-bottom a:hover{color:var(--dl26-blanco)}
.dl-footer-2026 .dl-footer-social{display:flex;gap:5px}
.dl-footer-2026 .dl-footer-social a{width:28px;height:28px;border-radius:50%; background:rgba(117,153,71,.12); display:flex;align-items:center;justify-content:center; transition:background .2s;}
.dl-footer-2026 .dl-footer-social a:hover{background:rgba(117,153,71,.22)}
.dl-footer-2026 .dl-footer-social a svg{width:14px;height:14px;stroke:var(--dl26-verde);opacity:.8}

@media(max-width:1023px) {
  .dl-header-2026 .dl-header-inner{padding:0 20px;height:56px}
  .dl-header-2026 .dl-nav{display:none}
  .dl-header-2026 .dl-mi-btn{font-size:11px;padding:7px 12px}
  .dl-header-2026 .dl-hamburger{display:flex}
  .dl-header-2026 .dl-logo{margin-right:auto}
  .dl-footer-2026{padding:0 16px 24px;margin-top:60px}
  .dl-footer-2026 .dl-footer-card{padding:32px 24px;border-radius:20px}
  .dl-footer-2026 .dl-footer-top{flex-direction:column;gap:28px}
  .dl-footer-2026 .dl-footer-claim{font-size:22px}
  .dl-footer-2026 .dl-footer-right{gap:32px}
  .dl-footer-2026 .dl-footer-bottom{flex-direction:column;gap:12px;text-align:center}
  .dl-footer-2026 .dl-footer-bottom-right{flex-direction:column;gap:10px}
}

@media(max-width:480px) {
  .dl-footer-2026 .dl-footer-news{flex-direction:column}
  .dl-footer-2026 .dl-footer-news-btn{width:100%}
  .dl-footer-2026 .dl-footer-right{flex-direction:column;gap:24px}
  .dl-footer-2026 .dl-footer-contact-lines{display:flex;flex-direction:column;gap:0}
  .dl-footer-2026 .dl-footer-contact-sep{display:none}
}

/* ==========================================================================
   PUENTE — nuestra estructura con el aspecto de la maqueta

   Todo lo de arriba viene de la maqueta y usa SUS nombres de clase. Lo de aca
   abajo apunta a los selectores que ya tiene el sitio, para no reescribir el
   markup ni romper el JavaScript que depende de esos ids y clases.

   Se usa cuando agregar una clase era riesgoso: el menu mobile tiene toda la
   logica de sesion y de tratamientos colgando de #menuToggle, #menu-principal y
   #menu-midepilife, y ahi conviene no tocar una letra del HTML.
   ========================================================================== */

/* --- Barra de escritorio --- */
.dl-header-2026 .navbar.style-navbar-depilife{
  background:#fff;
  border-bottom:1px solid var(--dl26-border-soft);
  box-shadow:none;
  padding:0;
}
/* Se apunta a .dl-header-inner y NO a .container-nav: adentro de #menuDesktopToggle hay otro
   div con la clase container-nav, y con el selector generico se comia el display:flex y el
   height:64px del header, aplastando el desplegable y tirando los items sobre la pagina. */
.dl-header-2026 .dl-header-inner{
  max-width:1240px;margin:0 auto;
  display:flex;align-items:center;
  padding:0 40px;height:64px;
}

/* --- Logo --- */
.dl-header-2026 .dl-logo-img{height:28px;width:auto}

/* --- Menu de escritorio: el ul hace de .dl-nav y cada a.btn de .dl-nav-item --- */
.dl-header-2026 .desktop-menu > ul{
  display:flex;align-items:center;gap:4px;
  margin:0;padding:0;list-style:none;
}
.dl-header-2026 .desktop-menu > ul > li{position:relative}
.dl-header-2026 .desktop-menu > ul > li > a.btn{
  position:relative;padding:8px 14px;
  font-size:13px;font-weight:500;line-height:1.5;
  border-radius:8px;border:0;
  color:var(--dl26-verde-oscuro);
  background:none;
  transition:background .2s;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
}
.dl-header-2026 .desktop-menu > ul > li > a.btn:hover{background:rgba(23,28,8,.04)}
.dl-header-2026 .desktop-menu > ul > li > a.btn i.fas{
  position:static !important;
  font-size:14px;color:var(--dl26-verde);opacity:.7;
}
.dl-header-2026 .desktop-menu > ul > li > a.ver-mas-menu i.fa-chevron-down{
  font-size:11px;opacity:.35;transition:transform .2s;
}

/* --- Desplegable de "Mas": una columna con rotulos, como la maqueta --- */
.dl-header-2026 .desktop-menu-desplegar-mas{position:relative}
.dl-header-2026 #menuDesktopToggle{
  position:absolute;top:calc(100% + 8px);left:0;right:auto;
  /* width:max-content y no shrink-to-fit: un absolute no supera el ancho de su contenedor, y el
     <li> mide unos 60px. Sin esto el panel queda angosto y los items se desbordan. */
  width:max-content;min-width:245px;max-width:300px;
  background:#fff;border-radius:14px;padding:8px;
  box-shadow:0 10px 34px rgba(23,28,8,.13),0 0 0 1px rgba(23,28,8,.06);
  z-index:200;text-align:left;
}
.dl-header-2026 #menuDesktopToggle .dl-drop-group-label{
  font-size:10px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;
  color:var(--dl26-verde);opacity:.85;
  padding:14px 14px 6px;
}
.dl-header-2026 #menuDesktopToggle .dl-drop-group-label:first-child{padding-top:6px}
.dl-header-2026 #menuDesktopToggle .dl-drop-item{
  display:block;padding:11px 14px;border-radius:8px;
  font-size:13px;font-weight:500;line-height:1.35;
  color:var(--dl26-verde-oscuro);
  transition:background .15s;
}
.dl-header-2026 #menuDesktopToggle .dl-drop-item:hover{background:rgba(23,28,8,.04)}

/* --- Bloque derecho: MiDepiLife y carrito --- */
.dl-header-2026 .dl-header-right{
  display:flex;align-items:center;gap:8px;margin-left:auto;
  position:static;
}
.dl-header-2026 .dl-mi-btn{
  display:flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:999px;border:0;
  font-size:12px;font-weight:600;line-height:1.5;
  background:var(--dl26-verde);color:#fff;
  transition:background .2s;
}
.dl-header-2026 .dl-mi-btn:hover{background:#648538;color:#fff}
.dl-header-2026 .dl-mi-btn i{font-size:14px;opacity:.85}
.dl-header-2026 .dl-cart-btn{
  position:relative;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.dl-header-2026 .dl-cart-btn:hover{background:rgba(23,28,8,.04)}
.dl-header-2026 .dl-cart-btn img.carrito{width:20px;height:auto;opacity:.8}
/* Regla vieja del contador. La que manda esta mas abajo, donde se repone todo lo que define
   .carrito-fill en bundle.min.css. Se muestra siempre, tambien en 0. */
.dl-header-2026 .dl-cart-count{
  position:absolute;top:2px;right:0;
  min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--dl26-verde);color:#fff;
  font-size:9px;font-weight:700;line-height:16px;
  text-align:center;
}

/* --- Sin subrayado en los items del menu ---
   El CSS viejo les pone una linea verde abajo, con border-bottom en unos casos y con un ::after
   en otros. La maqueta no la tiene: el estado se comunica con el fondo y el color del texto. */
.dl-header-2026 .desktop-menu > ul > li > a.btn,
.dl-header-2026 .desktop-menu > ul > li > a.btn:hover,
.dl-header-2026 .desktop-menu > ul > li > a.btn:focus,
.dl-header-2026 .desktop-menu > ul > li > a.btn.active{
  border-bottom:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
}
.dl-header-2026 .desktop-menu > ul > li > a.btn::after,
.dl-header-2026 .desktop-menu > ul > li > a.btn::before{
  display:none !important;
  content:none !important;
}

/* --- Estado activo, como en la maqueta: verde y en negrita, sin linea --- */
.dl-header-2026 .desktop-menu > ul > li > a.btn.active,
.dl-header-2026 .desktop-menu > ul > li.active > a.btn{
  color:var(--dl26-verde);
  font-weight:600;
  background:none;
}

/* El chevron de "Mas" gira cuando el panel esta abierto. La clase la pone el JS del footer. */
.dl-header-2026 .desktop-menu-desplegar-mas > a.ver-mas-menu i.fa-chevron-down{
  transition:transform .2s;
}
.dl-header-2026 .desktop-menu-desplegar-mas.abierto > a.ver-mas-menu i.fa-chevron-down{
  transform:rotate(180deg);
}

/* --- Sin subrayado tampoco en las opciones del desplegable ---
   Los items del panel son <a> dentro de un <li> dentro del <ul> del menu, asi que tambien caen
   bajo la regla .desktop-menu ul li a::after de bundle.min.css, que dibuja la linea verde al
   pasar el mouse. La regla anterior solo cubria los items de la barra. */
.dl-header-2026 #menuDesktopToggle .dl-drop-item::after,
.dl-header-2026 #menuDesktopToggle .dl-drop-item::before,
.dl-header-2026 #menuDesktopToggle a::after,
.dl-header-2026 #menuDesktopToggle a::before{
  display:none !important;
  content:none !important;
}
.dl-header-2026 #menuDesktopToggle .dl-drop-item,
.dl-header-2026 #menuDesktopToggle .dl-drop-item:hover,
.dl-header-2026 #menuDesktopToggle .dl-drop-item:focus{
  border-bottom:0 !important;
  text-decoration:none !important;
  box-shadow:none !important;
}

/* ==========================================================================
   Desplegable de Tratamientos
   Mismo panel que el de "Mas", pero cada item lleva una descripcion debajo,
   como en la maqueta. Se usa una clase y no un id -a diferencia del de "Mas",
   que ya tenia #menuDesktopToggle- para que el mismo JS sirva para los dos.
   ========================================================================== */
.dl-header-2026 .dl-nav-drop{position:relative}
.dl-header-2026 .dl-drop-panel{
  position:absolute;top:calc(100% + 8px);left:0;right:auto;
  width:max-content;min-width:245px;max-width:320px;
  background:#fff;border-radius:14px;padding:8px;
  box-shadow:0 10px 34px rgba(23,28,8,.13),0 0 0 1px rgba(23,28,8,.06);
  z-index:200;text-align:left;
}
.dl-header-2026 .dl-drop-panel .dl-drop-item{
  display:block;padding:11px 14px;border-radius:8px;
  color:var(--dl26-verde-oscuro);
  transition:background .15s;
}
.dl-header-2026 .dl-drop-panel .dl-drop-item:hover{background:rgba(23,28,8,.04)}
.dl-header-2026 .dl-drop-panel .dl-drop-label{
  display:block;font-size:13px;font-weight:500;line-height:1.35;
}
.dl-header-2026 .dl-drop-panel .dl-drop-desc{
  display:block;font-size:10px;line-height:1.35;opacity:.4;margin-top:2px;
}
/* La linea verde de bundle.min.css tambien alcanza a estos <a> */
.dl-header-2026 .dl-drop-panel a::after,
.dl-header-2026 .dl-drop-panel a::before{display:none !important;content:none !important}
.dl-header-2026 .dl-drop-panel a{border-bottom:0 !important;text-decoration:none !important}

/* El chevron de Tratamientos gira igual que el de "Mas" */
.dl-header-2026 .dl-nav-drop > a.dl-nav-drop-toggle i.fa-chevron-down{
  font-size:11px;opacity:.35;transition:transform .2s;
}
.dl-header-2026 .dl-nav-drop.abierto > a.dl-nav-drop-toggle i.fa-chevron-down{
  transform:rotate(180deg);
}

/* --- Sin anillo de foco en los items del menu ---
   Bootstrap le pone a .btn un box-shadow de spread al recibir foco. Como los desplegables ahora
   abren por clic, ese anillo aparece siempre alrededor del boton y se ve como un halo gris.
   La maqueta solo usa el fondo para marcar el estado. Se cubren tambien :active y outline,
   porque segun el navegador el anillo llega por una u otra via. */
.dl-header-2026 .desktop-menu a.btn,
.dl-header-2026 .desktop-menu a.btn:hover,
.dl-header-2026 .desktop-menu a.btn:focus,
.dl-header-2026 .desktop-menu a.btn:active,
.dl-header-2026 .desktop-menu a.btn.focus,
.dl-header-2026 .desktop-menu a.btn:focus-visible{
  box-shadow:none !important;
  outline:0 !important;
  -webkit-tap-highlight-color:transparent;
}

/* --- La flecha, mas chica y mas clara, como la maqueta --- */
.dl-header-2026 .desktop-menu a.btn i.fa-chevron-down{
  font-size:9px !important;
  opacity:1 !important;
  color:rgba(23,28,8,.3);
  margin-left:2px;
  transition:transform .2s;
}
.dl-header-2026 .desktop-menu-desplegar-mas.abierto > a.btn i.fa-chevron-down,
.dl-header-2026 .dl-nav-drop.abierto > a.btn i.fa-chevron-down{
  transform:rotate(180deg);
}

/* --- El submenu arranca donde termina el boton, no donde termina la barra ---
   Los <li> son hijos de un ul flex, asi que por defecto se estiran a toda la altura del header
   (64px). Como los paneles se posicionan con top:calc(100% + 8px) tomando al <li> de referencia,
   quedaban 15px mas abajo que en la maqueta. Con align-self:center el <li> mide lo que mide su
   boton y el 100% vuelve a ser el que corresponde. */
.dl-header-2026 .desktop-menu > ul > li{
  align-self:center;
  display:flex;align-items:center;
}

/* --- El <li> del menu no tiene relleno propio ---
   bundle.min.css le pone .desktop-menu ul li{padding:10px 0}. Ese relleno hacia que el panel,
   que se posiciona con top:100% desde el <li>, arrancara 10px mas abajo que en la maqueta.
   El alto de la barra ya lo da .dl-header-inner, el <li> no necesita aportar nada. */
.dl-header-2026 .desktop-menu > ul > li{padding:0 !important}

/* --- Ni anillo de foco ni sombra en ningun elemento del header ---
   .btn:focus de Bootstrap pinta box-shadow:0 0 0 .2rem rgba(0,123,255,.25). Es azul al 25%, que
   sobre blanco se lee como un halo gris. Se apaga en todo el bloque y no solo en .desktop-menu,
   porque el foco puede quedar en el <li>, en el <a> o en el propio contenedor segun el navegador. */
.dl-header-2026 a,
.dl-header-2026 a:focus,
.dl-header-2026 a:active,
.dl-header-2026 a.focus,
.dl-header-2026 li,
.dl-header-2026 li:focus,
.dl-header-2026 .btn,
.dl-header-2026 .btn:focus,
.dl-header-2026 .btn:active,
.dl-header-2026 .btn.focus{
  box-shadow:none !important;
  outline:0 !important;
}
/* El panel si conserva su sombra: la regla de arriba es solo para <a>, <li> y .btn */
.dl-header-2026 #menuDesktopToggle,
.dl-header-2026 .dl-drop-panel{
  box-shadow:0 10px 34px rgba(23,28,8,.13),0 0 0 1px rgba(23,28,8,.06) !important;
}

/* --- El <li> de "Mas" no lleva fondo propio ---
   bundle.min.css le pone .desktop-menu-desplegar-mas{background-color:#f5f5f5}, un fondo gris
   permanente sobre el <li>. Como el <li> es mas alto y mas ancho que el boton, se veia como un
   halo alrededor. No era el anillo de foco: por eso solo aparecia en "Mas" y no en Tratamientos.
   El estado lo marca el fondo del propio boton, igual que en la maqueta. */
.dl-header-2026 .desktop-menu-desplegar-mas,
.dl-header-2026 .desktop-menu ul li:hover.desktop-menu-desplegar-mas,
.dl-header-2026 .desktop-menu ul li.desktop-menu-desplegar-mas:hover,
.dl-header-2026 .desktop-menu ul li.dl-nav-drop:hover{
  background-color:transparent !important;
  border-radius:0 !important;
}

/* --- Boton de MiDepiLife: icono, texto y flecha ---
   El texto va en su propio <span> para poder controlar la separacion: antes era un nodo de texto
   suelto y quedaba a merced del espacio del HTML mas el gap del flex. La flecha anticipa que el
   boton abre un menu, como en la maqueta. */
.dl-header-2026 .dl-mi-btn{gap:6px}
.dl-header-2026 .dl-mi-btn i.fa-user-circle{font-size:15px;opacity:.9;margin:0}
.dl-header-2026 .dl-mi-btn .dl-mi-texto{line-height:1}
.dl-header-2026 .dl-mi-btn i.dl-mi-chev{
  font-size:9px;opacity:.55;margin-left:1px;
  transition:transform .2s;
}
.dl-header-2026 .dl-mi-drop.abierto .dl-mi-btn i.dl-mi-chev{transform:rotate(180deg)}

/* --- Iconos en SVG, los mismos de la maqueta ---
   Reemplazan a FontAwesome en el header y al webp del carrito. Se dimensionan por CSS y toman el
   color por currentColor, asi acompanan al texto sin declarar el color dos veces.
   FontAwesome sigue cargando: lo usan otras pantallas del sitio. */
.dl-header-2026 .dl-nav-icono{
  width:16px;height:16px;flex-shrink:0;
  stroke:var(--dl26-verde);opacity:.75;
}
.dl-header-2026 .desktop-menu > ul > li > a.btn:hover .dl-nav-icono{opacity:1}
.dl-header-2026 .dl-mi-icono{
  width:15px;height:15px;flex-shrink:0;opacity:.9;
}
.dl-header-2026 .dl-cart-icono{
  width:20px;height:20px;opacity:.8;
  display:block;
}
.dl-header-2026 .dl-cart-btn a{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
}

/* ============================================================
   CARRITO — bloque unico y definitivo
   ============================================================
   Estaba definido en cinco lugares del archivo y cada arreglo pisaba al anterior.
   Todo lo del carrito vive aca. Valores tomados de la maqueta.

   Contra que hay que pelear (bundle.min.css):
   - ".navbar.style-navbar-depilife .carrito-fill" son TRES clases, mas que las nuestras: por eso
     los selectores repiten esa cadena. Si no, sobrevive el diseno viejo -circulo blanco, borde
     #313131, anclado con left:17px- y como si ganabamos el color, quedaba blanco sobre blanco.
   - padding y left llevan !important porque los del bundle tambien lo llevan.

   Por que el globo va en top:4/right:2 y no en la esquina del boton:
   el boton mide 40x40 pero el icono mide 20x20 y esta CENTRADO, o sea que ocupa de 10 a 30.
   Anclado en 0,0 el globo queda flotando en el aire, despegado del dibujo. En 4,2 se apoya
   sobre la esquina superior derecha de la bolsa, como en la maqueta.

   z-index: el <p> del contador esta ANTES del <svg> en el HTML, asi que sin capa explicita
   el trazo de la bolsa le pasa por encima y lo corta. */

.dl-header-2026 .navbar.style-navbar-depilife .dl-cart-btn,
.dl-header-2026 .dl-cart-btn,
.dl-header-2026 .dl-cart-btn:hover,
.dl-header-2026 .dl-cart-btn:focus{
  position:relative;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
  cursor:pointer;
  /* Sin fondo en hover: la maqueta no lo tiene y alrededor del globo verde se leia como un halo gris. */
  background:transparent !important;
  border-radius:50%;
}

.dl-header-2026 .dl-cart-btn a{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  position:relative;overflow:visible;
}

.dl-header-2026 .dl-cart-icono{
  width:20px;height:20px;
  opacity:.8;
  display:block;
  position:relative;z-index:1;
}

.dl-header-2026 .navbar.style-navbar-depilife .dl-cart-count,
.dl-header-2026 .dl-cart-btn .dl-cart-count{
  position:absolute;
  top:4px !important; right:2px !important; left:auto !important; bottom:auto !important;
  z-index:2;
  min-width:16px; height:16px;
  padding:0 4px !important;
  margin:0 !important;
  border:0 !important;
  border-radius:999px;
  /* opacity:1 forzado: el contenedor lleva la clase .wow, que anima la opacidad, y el hijo la heredaba. */
  background:#759947 !important;
  opacity:1 !important;
  box-shadow:none !important;
  color:#fff !important;
  font-family:inherit;
  font-size:9px; font-weight:700; line-height:16px;
  text-align:center;
}

/* ============================================================
   DESPLEGABLE DE MIDEPILIFE
   ============================================================
   Cuelga del boton verde y se alinea a la derecha -right:0- porque el boton esta pegado al
   borde de la pantalla: alineado a la izquierda, el panel se saldria del viewport.
   Los rotulos vienen del config con su propio <i class="fas ...">, asi que el item es flex
   para que icono y texto queden alineados, y se anula el mr-1 de Bootstrap en favor del gap. */
.dl-header-2026 .dl-mi-drop{
  position:relative;
  display:flex;align-items:center;
}
.dl-header-2026 .dl-mi-panel{
  left:auto; right:0;
  min-width:215px;
}
.dl-header-2026 .dl-mi-panel .dl-drop-item{
  display:flex;align-items:center;gap:9px;
  font-size:13px;font-weight:500;
  color:var(--dl26-verde-oscuro);
  white-space:nowrap;
}
.dl-header-2026 .dl-mi-panel .dl-drop-item i{
  width:16px;flex-shrink:0;text-align:center;
  font-size:13px;opacity:.45;
  margin-right:0 !important;
}
/* Cerrar sesion va separado del resto: es la accion destructiva del menu */
.dl-header-2026 .dl-mi-panel .dl-drop-item[href*="cerrarSesion"]{
  margin-top:4px;padding-top:12px;
  border-top:1px solid rgba(23,28,8,.08);
  border-radius:0 0 8px 8px;
}

/* ============================================================================
   FOOTER 2026
   ============================================================================
   Valores tomados de la maqueta. Todo cuelga de .dl-footer-2026: el footer viejo usaba
   .footer-bs, que bundle.min.css pinta entero, asi que al cambiar la clase raiz nos
   despegamos de esos estilos en vez de pelearlos regla por regla.

   Lo unico que sigue alcanzando a estos <a> es lo que bundle define para "a" a secas
   -la linea verde de ::after y el border-bottom-, que se neutraliza al final del bloque.
   ============================================================================ */

.dl-footer-2026{
  max-width:1240px;margin:80px auto 0;
  padding:0 40px 40px;
  font-family:var(--dl26-font);
}
.dl-footer-2026 .dl-footer-panel{
  background:var(--dl26-verde-oscuro);
  border-radius:28px;padding:48px;
  color:rgba(255,243,238,.5);
  overflow:hidden;position:relative;
}
/* El halo verde de la esquina superior derecha, decorativo */
.dl-footer-2026 .dl-footer-panel::before{
  content:"";position:absolute;top:-60px;right:-60px;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(117,153,71,.15) 0%,transparent 70%);
  pointer-events:none;
}
.dl-footer-2026 .dl-footer-top{
  display:flex;justify-content:space-between;gap:48px;
  margin-bottom:40px;position:relative;z-index:1;
}

/* --- Marca y newsletter --- */
.dl-footer-2026 .dl-footer-brand{flex:1;max-width:480px}
.dl-footer-2026 .dl-footer-logo{display:inline-block;margin-bottom:20px}
.dl-footer-2026 .dl-footer-logo img{height:28px;width:auto}
.dl-footer-2026 .dl-footer-claim{
  font-size:26px;font-weight:300;letter-spacing:-.5px;
  color:var(--dl26-blanco);line-height:1.25;margin:0 0 6px;
}
.dl-footer-2026 .dl-footer-claim em{font-style:italic;color:var(--dl26-verde)}
.dl-footer-2026 .dl-news-titulo{
  font-size:16px;font-weight:600;color:var(--dl26-blanco);
  letter-spacing:-.2px;margin:28px 0 4px;
}
.dl-footer-2026 .dl-news-bajada{font-size:13px;opacity:.6;margin:0 0 20px}
.dl-footer-2026 .dl-news-form{display:flex;gap:8px;max-width:400px}
.dl-footer-2026 .dl-news-input{
  flex:1;padding:12px 18px;border-radius:999px;border:none;
  font-size:13px;font-family:var(--dl26-font);
  background:rgba(255,243,238,.12);color:var(--dl26-blanco);outline:none;
}
.dl-footer-2026 .dl-news-input::placeholder{color:rgba(255,243,238,.4)}
.dl-footer-2026 .dl-news-input:focus{background:rgba(255,243,238,.16)}
/* El boton es un <p>, no un <button>: asi lo espera el JS que ya existe */
.dl-footer-2026 .dl-news-btn{
  margin:0;padding:12px 22px;border-radius:999px;border:none;
  font-size:13px;font-weight:600;font-family:var(--dl26-font);
  background:var(--dl26-verde);color:#fff;cursor:pointer;white-space:nowrap;
  transition:background .2s;
}
.dl-footer-2026 .dl-news-btn:hover{background:#648538}
.dl-footer-2026 .dl-news-msj{font-size:12px;margin-top:10px}

/* --- Columnas de enlaces --- */
.dl-footer-2026 .dl-footer-cols{display:flex;gap:48px;flex-shrink:0}
.dl-footer-2026 .dl-footer-tit{
  font-size:10px;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;color:rgba(255,243,238,.5);
  margin:0 0 12px;
}
.dl-footer-2026 .dl-footer-col a{
  display:block;font-size:13px;padding:4px 0;
  color:rgba(255,243,238,.7);transition:color .2s;
}
.dl-footer-2026 .dl-footer-col a:hover{color:var(--dl26-blanco)}

/* --- Centros por zona ---
   No esta en la maqueta: se agrega para no perder los 25 enlaces a las fichas.
   Antes era un parrafo con los 25 nombres separados por barras, ilegible. */
.dl-footer-2026 .dl-footer-centros{
  position:relative;z-index:1;
  padding-top:28px;margin-bottom:28px;
  border-top:1px solid rgba(255,243,238,.1);
}
.dl-footer-2026 .dl-centros-zonas{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:20px 32px;margin-top:14px;
}
.dl-footer-2026 .dl-centros-zona-tit{
  display:block;font-size:11px;font-weight:600;
  color:var(--dl26-verde);margin-bottom:6px;
}
.dl-footer-2026 .dl-centros-lista{display:flex;flex-direction:column}
.dl-footer-2026 .dl-centros-lista a{
  font-size:12px;padding:2px 0;
  color:rgba(255,243,238,.55);transition:color .2s;
}
.dl-footer-2026 .dl-centros-lista a:hover{color:var(--dl26-blanco)}

/* --- Barra inferior --- */
.dl-footer-2026 .dl-footer-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:24px;border-top:1px solid rgba(255,243,238,.1);
  font-size:11px;color:rgba(255,243,238,.5);
  position:relative;z-index:1;
}
.dl-footer-2026 .dl-footer-legal{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dl-footer-2026 .dl-footer-contacto{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dl-footer-2026 .dl-footer-bottom a{color:rgba(255,243,238,.5);transition:color .2s}
.dl-footer-2026 .dl-footer-bottom a:hover{color:var(--dl26-blanco)}
/* Dispara el modal de arrepentimiento: no es un enlace, pero tiene que parecerlo */
.dl-footer-2026 .dl-footer-arrep{cursor:pointer;transition:color .2s}
.dl-footer-2026 .dl-footer-arrep:hover{color:var(--dl26-blanco)}
.dl-footer-2026 .dl-footer-sep{opacity:.4}
.dl-footer-2026 .dl-footer-wa{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:500;color:var(--dl26-verde) !important;
  padding:5px 12px;border-radius:999px;
  background:rgba(117,153,71,.12);transition:background .2s;
}
.dl-footer-2026 .dl-footer-wa:hover{background:rgba(117,153,71,.2);color:var(--dl26-verde) !important}
.dl-footer-2026 .dl-footer-social{display:flex;gap:5px}
.dl-footer-2026 .dl-footer-social a{
  width:28px;height:28px;border-radius:50%;
  background:rgba(117,153,71,.12);
  display:flex;align-items:center;justify-content:center;
  color:var(--dl26-verde) !important;font-size:13px;
  transition:background .2s;
}
.dl-footer-2026 .dl-footer-social a:hover{background:rgba(117,153,71,.22)}
/* El QR de AFIP es obligatorio (RG 4004). Va chico y al final, pero legible */
.dl-footer-2026 .dl-footer-afip{display:inline-block;line-height:0}
.dl-footer-2026 .dl-footer-afip img{width:44px;height:auto;opacity:.85;transition:opacity .2s}
.dl-footer-2026 .dl-footer-afip:hover img{opacity:1}

/* --- Neutralizar lo que bundle.min.css le hace a cualquier "a" ---
   Es la misma linea verde de ::after que hubo que apagar en el header. */
.dl-footer-2026 a::after,
.dl-footer-2026 a::before{display:none !important;content:none !important}
.dl-footer-2026 a{border-bottom:0 !important;text-decoration:none !important}
.dl-footer-2026 p{margin-bottom:0}

/* --- Mobile: pendiente de ajuste fino, por ahora el apilado de la maqueta --- */
@media (max-width:900px){
  .dl-footer-2026{padding:0 16px 24px;margin-top:60px}
  .dl-footer-2026 .dl-footer-panel{padding:32px 24px;border-radius:20px}
  .dl-footer-2026 .dl-footer-top{flex-direction:column;gap:28px}
  .dl-footer-2026 .dl-footer-claim{font-size:22px}
  .dl-footer-2026 .dl-footer-cols{flex-direction:column;gap:24px}
  .dl-footer-2026 .dl-news-form{flex-direction:column}
  .dl-footer-2026 .dl-news-btn{width:100%;text-align:center}
  .dl-footer-2026 .dl-footer-bottom{flex-direction:column;gap:12px;text-align:center}
  .dl-footer-2026 .dl-footer-legal,
  .dl-footer-2026 .dl-footer-contacto{justify-content:center}
}

/* --- Centros, plegados ---
   El <summary> trae una flechita propia del navegador que hay que apagar por dos vias:
   list-style en los que lo respetan y ::-webkit-details-marker en Safari/Chrome viejos. */
.dl-footer-2026 .dl-centros-det{border:0}
.dl-footer-2026 .dl-centros-sum{
  display:flex;align-items:center;gap:10px;
  cursor:pointer;list-style:none;
  padding:2px 0;
  transition:opacity .2s;
}
.dl-footer-2026 .dl-centros-sum::-webkit-details-marker{display:none}
.dl-footer-2026 .dl-centros-sum::marker{content:""}
.dl-footer-2026 .dl-centros-sum:hover{opacity:.75}
.dl-footer-2026 .dl-centros-sum .dl-footer-tit{margin:0}
.dl-footer-2026 .dl-centros-cant{
  font-size:11px;color:rgba(255,243,238,.35);
}
.dl-footer-2026 .dl-centros-chev{
  font-size:10px;color:rgba(255,243,238,.35);
  margin-left:auto;
  transition:transform .2s;
}
.dl-footer-2026 .dl-centros-det[open] .dl-centros-chev{transform:rotate(180deg)}
/* Sin el margen de arriba la primera zona queda pegada al titulo al desplegarse */
.dl-footer-2026 .dl-centros-det[open] .dl-centros-zonas{margin-top:20px}

/* --- Modal del boton de arrepentimiento ---
   Se apunta por el id del modal y no por .seguir-comprando-cart: esa clase la comparten el
   carrito, el checkout y una decena de vistas mas, y ahi los botones tienen que seguir como
   estan. Solo se redondea; los colores los sigue poniendo bundle.min.css. */
#botonArrepentimientoModal .modal-content{
  border-radius:20px;border:0;overflow:hidden;
}
#botonArrepentimientoModal .seguir-comprando-cart{
  border-radius:999px !important;
  font-weight:600;
}

/* ============================================================
   BARRA INFERIOR DEL FOOTER — ajuste fino y mobile
   ============================================================ */

/* Separadores del renglon legal. La maqueta los pone con un punto medio.
   Van por ::before y no como <span>&middot;</span> en el markup para que, al hacer wrap
   en pantallas angostas, ningun punto quede colgando al final de una linea.
   Necesita !important porque mas arriba se apagan todos los ::before de los <a> del footer
   -es lo que neutraliza la linea verde de bundle.min.css- y estos hay que devolverlos. */
.dl-footer-2026 .dl-footer-legal{gap:8px}
.dl-footer-2026 .dl-footer-legal > *:not(:first-child)::before{
  content:"\00B7" !important;
  display:inline !important;
  margin-right:8px;opacity:.45;
}
.dl-footer-2026 .dl-footer-datos{display:inline-flex;align-items:center;gap:6px}
/* El QR venia demasiado grande al lado de un renglon de 11px */
.dl-footer-2026 .dl-footer-afip img{width:38px}

@media (max-width:900px){
  /* Todo apilado y centrado, como la maqueta:
     legales / mail y telefono / WhatsApp / redes / QR, un renglon cada uno */
  .dl-footer-2026 .dl-footer-bottom{
    flex-direction:column;gap:16px;text-align:center;
  }
  .dl-footer-2026 .dl-footer-legal{
    justify-content:center;gap:0 8px;line-height:1.9;
  }
  .dl-footer-2026 .dl-footer-contacto{
    flex-direction:column;gap:14px;justify-content:center;
  }
  .dl-footer-2026 .dl-footer-datos{justify-content:center;flex-wrap:wrap}
  .dl-footer-2026 .dl-footer-wa{padding:8px 18px;font-size:12px}
  .dl-footer-2026 .dl-footer-social{justify-content:center;gap:8px}
  .dl-footer-2026 .dl-footer-social a{width:32px;height:32px;font-size:14px}
  .dl-footer-2026 .dl-footer-afip img{width:52px}

  /* Los centros, en una sola columna: con dos, los nombres largos se cortaban */
  .dl-footer-2026 .dl-centros-zonas{grid-template-columns:1fr;gap:18px}
  .dl-footer-2026 .dl-centros-cant{display:none}
  .dl-footer-2026 .dl-centros-sum{gap:8px}

  /* El halo decorativo se come media pantalla en 375px */
  .dl-footer-2026 .dl-footer-panel::before{width:180px;height:180px;top:-40px;right:-40px}
}

/* --- Renglon legal en mobile: el copyright arriba, los tres enlaces abajo ---
   El flex:0 0 100% sobre el primer hijo lo obliga a ocupar la fila entera, asi los tres
   enlaces caen juntos en la siguiente. El nowrap evita que se parta "Boton de arrepentimiento"
   por la mitad y quede una palabra suelta en un tercer renglon. */
@media (max-width:900px){
  .dl-footer-2026 .dl-footer-legal{flex-wrap:wrap;gap:0 8px}
  .dl-footer-2026 .dl-footer-legal > span:first-child{flex:0 0 100%;margin-bottom:7px}
  .dl-footer-2026 .dl-footer-legal > *:not(:first-child){white-space:nowrap}
}
/* En pantallas de 375px los tres no entran a 11px: se achican apenas */
@media (max-width:430px){
  .dl-footer-2026 .dl-footer-legal{font-size:10px;gap:0 6px}
  .dl-footer-2026 .dl-footer-legal > *:not(:first-child)::before{margin-right:6px}
}

/* ============================================================
   HEADER EN MOBILE
   ============================================================
   La hamburguesa de bundle.min.css es un #menuToggle en position:fixed (top:24 right:25) con
   tres <span> de 35x2. Al estar fuera del flujo de la barra no "empuja" nada, y por eso se
   montaba sobre el carrito. Se resuelve por los dos lados: se achican las lineas a la medida
   de la maqueta y se le reserva el hueco a la derecha con padding en .dl-header-inner.
   El selector lleva .dl-header-2026 delante para ganarle en especificidad al #menuToggle pelado. */
@media (max-width:1023px){
  /* Logo mas pegado al borde y hueco a la derecha para la hamburguesa fija */
  .dl-header-2026 .dl-header-inner{
    padding-left:12px;
    padding-right:52px;
  }
  .dl-header-2026 #menuToggle{
    top:24px;right:16px;
  }
  .dl-header-2026 #menuToggle span{
    width:20px;height:2px;margin-bottom:5px;
  }
  /* El <input> invisible es el area clickeable: se ajusta al icono nuevo,
     si no queda una zona muerta alrededor que igual abre el menu */
  .dl-header-2026 #menuToggle input{
    width:28px;height:22px;top:-3px;left:-4px;
  }
}

/* --- Panel de MiDepiLife con sesion iniciada ---
   Los tres primeros items llevan bajada, asi que reusan .dl-drop-label / .dl-drop-desc del
   panel de Tratamientos. Despues va una division, "Ir a MiDepiLife" destacado en verde y
   Cerrar sesion. */
.dl-header-2026 .dl-mi-panel{min-width:230px}
.dl-header-2026 .dl-mi-panel .dl-drop-label{
  display:block;font-size:13px;font-weight:500;line-height:1.35;
}
.dl-header-2026 .dl-mi-panel .dl-drop-desc{
  display:block;font-size:10px;line-height:1.35;opacity:.4;margin-top:2px;
}
.dl-header-2026 .dl-mi-div{
  display:block;height:1px;margin:6px 14px;
  background:rgba(23,28,8,.09);
}
.dl-header-2026 .dl-mi-panel .dl-mi-ir{
  color:var(--dl26-verde) !important;font-weight:600;
}
.dl-header-2026 .dl-mi-panel .dl-mi-salir{opacity:.55}
.dl-header-2026 .dl-mi-panel .dl-mi-salir:hover{opacity:1}
/* La division ahora la pone .dl-mi-div; la regla vieja colgaba una linea de mas
   arriba de Cerrar sesion */
.dl-header-2026 .dl-mi-panel .dl-drop-item[href*="cerrarSesion"]{
  margin-top:0;padding-top:11px;border-top:0;border-radius:8px;
}

/* --- La sombrita del header en mobile ---
   La 2025 la trae de bundle.min.css: .style-navbar-depilife lleva box-shadow 0 0 10px rgba(0,0,0,.13).
   Mas arriba la apagamos con box-shadow:none para que en escritorio la barra quede al ras, con
   el hilo de abajo y nada mas. En mobile si suma: despega la barra del contenido cuando se
   scrollea por debajo. Va un poco mas suave que la original y solo hacia abajo. */
@media (max-width:1023px){
  .dl-header-2026 .navbar.style-navbar-depilife{
    box-shadow:0 2px 8px rgba(23,28,8,.10);
    border-bottom:0;
  }
}

/* ============================================================================
   PANEL DE LA HAMBURGUESA (mobile)
   ============================================================================
   El mecanismo no se toca: sigue siendo el #menuToggle de bundle.min.css, un checkbox
   invisible que con :checked ~ #menu desliza el panel. Aca solo se lo viste.

   Las solapas Menu / MiDepiLife quedan ocultas: la cuenta ahora esta en la tarjeta del pie
   y en el desplegable del boton verde. El markup y su JS siguen en su lugar, sin usarse.
   Como consecuencia hay que forzar #menu-principal visible: en las pantallas de MiDepiLife
   el PHP le mete style="display:none" inline, y sin las solapas no habria como volver a
   mostrarlo. El !important le gana al inline.
   ============================================================================ */
@media (max-width:1023px){

  .dl-header-2026 #selector-menu-opciones{display:none !important}
  .dl-header-2026 #menu-principal{display:block !important}
  .dl-header-2026 #menu-midepilife{display:none !important}

  /* --- El panel --- */
  .dl-header-2026 #menuToggle #menu{
    background:#fff;
    border-radius:20px 0 0 20px;
    box-shadow:-20px 0 60px rgba(23,28,8,.15);
    padding:44px 20px 20px;
    width:300px;max-width:88vw;
  }
  .dl-header-2026 #menuToggle #menu li{list-style:none;padding:0;margin:0}

  /* --- Accesos destacados, con el chip verde --- */
  .dl-header-2026 .dl-dw-acciones{margin-bottom:22px}
  .dl-header-2026 .dl-dw-accion{
    display:flex !important;align-items:center;gap:12px;
    padding:11px 0;font-size:15px;font-weight:500;
    color:var(--dl26-verde-oscuro) !important;
    text-align:left;
  }
  .dl-header-2026 .dl-dw-chip{
    width:32px;height:32px;border-radius:10px;
    background:rgba(117,153,71,.08);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .dl-header-2026 .dl-dw-chip svg{width:16px;height:16px;stroke:var(--dl26-verde);opacity:.8}

  /* --- Secciones rotuladas --- */
  .dl-header-2026 .dl-dw-seccion{margin-bottom:20px}
  .dl-header-2026 .dl-dw-label{
    font-size:10px;font-weight:600;letter-spacing:1px;
    text-transform:uppercase;color:var(--dl26-verde);opacity:.7;
    margin-bottom:8px;
  }
  .dl-header-2026 .dl-dw-link{
    display:block !important;
    padding:10px 0;font-size:14px;font-weight:500;
    color:var(--dl26-verde-oscuro) !important;
    text-align:left;
  }

  /* --- Ver mas --- */
  .dl-header-2026 .dl-dw-mas-det{margin-bottom:20px;border:0}
  .dl-header-2026 .dl-dw-mas{
    display:flex;align-items:center;justify-content:center;gap:6px;
    padding:10px 16px;border-radius:999px;
    font-size:13px;font-weight:600;
    color:var(--dl26-verde-oscuro);
    border:1.5px solid rgba(23,28,8,.15);
    cursor:pointer;list-style:none;
  }
  .dl-header-2026 .dl-dw-mas::-webkit-details-marker{display:none}
  .dl-header-2026 .dl-dw-mas::marker{content:""}
  .dl-header-2026 .dl-dw-mas i{font-size:10px;transition:transform .2s}
  .dl-header-2026 .dl-dw-mas-det[open] .dl-dw-mas i{transform:rotate(180deg)}
  /* Los del desplegable van mas apagados, como en la maqueta */
  .dl-header-2026 .dl-dw-mas-cont{padding-top:6px}
  .dl-header-2026 .dl-dw-mas-cont .dl-dw-link{opacity:.5;font-size:13px}

  /* --- Tarjeta de cuenta --- */
  .dl-header-2026 .dl-dw-cuenta{
    margin-top:4px;padding-top:16px;
    border-top:1px solid rgba(23,28,8,.06);
    position:relative;
  }
  .dl-header-2026 .dl-dw-cuenta-card{
    display:flex !important;align-items:center;gap:10px;
    padding:12px 14px;border-radius:12px;
    background:rgba(117,153,71,.08);
    color:var(--dl26-verde-oscuro) !important;
    text-align:left;
  }
  .dl-header-2026 .dl-dw-avatar{
    width:32px;height:32px;border-radius:50%;
    background:var(--dl26-verde);color:#fff;
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .dl-header-2026 .dl-dw-avatar svg{width:16px;height:16px}
  .dl-header-2026 .dl-dw-cuenta-txt{flex:1;min-width:0}
  .dl-header-2026 .dl-dw-cuenta-rot{
    display:block;font-size:9px;font-weight:600;letter-spacing:.8px;
    text-transform:uppercase;opacity:.35;margin-bottom:1px;
  }
  .dl-header-2026 .dl-dw-cuenta-nom{display:block;font-size:13px;font-weight:600}
  /* Va encima de la tarjeta, a la derecha: es un <a> aparte porque anidar
     un enlace dentro de otro no es HTML valido */
  .dl-header-2026 .dl-dw-salir{
    position:absolute;right:14px;bottom:26px;
    font-size:10px;opacity:.35;
    color:var(--dl26-verde-oscuro) !important;
    white-space:nowrap;
  }
  .dl-header-2026 .dl-dw-salir:hover{opacity:.7}
  .dl-header-2026 .dl-dw-ingresar{
    display:flex !important;align-items:center;justify-content:center;gap:8px;
    padding:14px;border-radius:999px;
    background:var(--dl26-verde);color:#fff !important;
    font-size:13px;font-weight:600;
  }
  .dl-header-2026 .dl-dw-ingresar svg{width:16px;height:16px}

  /* La linea verde de bundle.min.css tambien alcanza a estos <a> */
  .dl-header-2026 #menu a::after,
  .dl-header-2026 #menu a::before{display:none !important;content:none !important}
  .dl-header-2026 #menu a{border-bottom:0 !important;text-decoration:none !important}
}

/* ============================================================================
   PANEL DE LA HAMBURGUESA — correcciones sobre bundle.min.css
   ============================================================================
   Tres problemas, los tres heredados del CSS viejo:

   1) "#menuToggle span" pinta CUALQUIER span de adentro como una barrita de hamburguesa
      (height:2px, background oscuro). Como #menu esta dentro de #menuToggle, eso alcanzaba
      a los chips, al avatar y al nombre de la cuenta. Un id le gana a cualquier clase, asi
      que hay que resetearlos con un selector que tambien lleve ids.

   2) #menu es position:absolute con width:350px y margin-left:125px, y al abrirse se corre
      con translate(-100%): quedaba pasado del borde derecho y se cortaba.

   3) height:120vh, mas alto que la pantalla: por eso no scrolleaba adentro y el gesto se
      iba a la pagina de atras.
   ============================================================================ */
@media (max-width:1023px){

  /* --- 1) Devolver los span del panel a su estado neutro --- */
  .dl-header-2026 #menuToggle #menu span{
    display:inline;
    width:auto;height:auto;
    margin:0;
    background:none;
    border-radius:0;
    transform:none;
    transition:none;
    transform-origin:initial;
    opacity:1;
  }

  /* --- 2 y 3) El panel, como cajon fijo a la derecha --- */
  .dl-header-2026 #menuToggle #menu{
    position:fixed;
    top:0;right:0;left:auto;bottom:0;
    width:300px;max-width:88vw;
    height:100vh;height:100dvh;
    margin:0;
    padding:58px 20px 28px;
    border-radius:20px 0 0 20px;
    box-shadow:-20px 0 60px rgba(23,28,8,.15);
    background:#fff;
    z-index:400;
    /* overscroll-behavior:contain corta el encadenamiento: al llegar al final de la lista
       el gesto NO sigue scrolleando la pagina de atras. Es lo que faltaba. */
    overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    transform:translateX(100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  /* Le gana a "#menuToggle input:checked~ul{transform:translate(-100%,0)}" */
  .dl-header-2026 #menuToggle input:checked ~ #menu{
    transform:translateX(0) !important;
  }

  /* La X queda flotando sobre el panel, como el boton de cerrar de la maqueta */
  .dl-header-2026 #menuToggle{z-index:401}

  /* --- Rehacer los span del panel, ahora con ids para ganar la especificidad --- */
  .dl-header-2026 #menuToggle #menu .dl-dw-chip{
    display:flex;
    width:32px;height:32px;border-radius:10px;
    background:rgba(117,153,71,.08);
    align-items:center;justify-content:center;flex-shrink:0;
  }
  .dl-header-2026 #menuToggle #menu .dl-dw-chip svg{
    width:16px;height:16px;stroke:var(--dl26-verde);opacity:.8;
  }
  .dl-header-2026 #menuToggle #menu .dl-dw-avatar{
    display:flex;
    width:32px;height:32px;border-radius:50%;
    background:var(--dl26-verde);color:#fff;
    align-items:center;justify-content:center;flex-shrink:0;
  }
  .dl-header-2026 #menuToggle #menu .dl-dw-avatar svg{width:16px;height:16px}
  .dl-header-2026 #menuToggle #menu .dl-dw-cuenta-txt{display:block;flex:1;min-width:0}
  .dl-header-2026 #menuToggle #menu .dl-dw-cuenta-rot{
    display:block;font-size:9px;font-weight:600;letter-spacing:.8px;
    text-transform:uppercase;opacity:.35;margin-bottom:1px;
  }
  .dl-header-2026 #menuToggle #menu .dl-dw-cuenta-nom{
    display:block;font-size:13px;font-weight:600;
  }
}

/* --- El boton verde no se oscurece con el menu abierto ---
   Bootstrap le mete background-color:#545b62 por .btn-secondary:active y un box-shadow gris
   por :focus. En mobile ese estado queda pegado despues del toque. La maqueta lo mantiene en
   verde normal con el desplegable abierto. */
.dl-header-2026 .dl-mi-drop.abierto .dl-mi-btn,
.dl-header-2026 .dl-mi-btn:focus,
.dl-header-2026 .dl-mi-btn:active,
.dl-header-2026 .dl-mi-btn:not(:disabled):not(.disabled):active{
  background:var(--dl26-verde) !important;
  border-color:var(--dl26-verde) !important;
  color:#fff !important;
  box-shadow:none !important;
  outline:0;
}
/* El oscurecido queda solo para el hover real, con el menu cerrado */
.dl-header-2026 .dl-mi-drop:not(.abierto) .dl-mi-btn:hover{background:#648538 !important}

/* --- Correcciones del cajon ---
   1) Se le saca el z-index al panel. #menu es hijo de #menuToggle, asi que ambos comparten
      contexto de apilado: con z-index:400 el panel tapaba los <span> que forman la X, que
      valen z-index:1. Sin z-index propio (auto = 0) los span vuelven a quedar arriba, que es
      como funcionaba antes. La capa por encima de la pagina ya la da #menuToggle con 999999.
   2) El panel flota, como en la maqueta: 8px de aire arriba, abajo y a la derecha, y las
      cuatro esquinas redondeadas. El alto sale de top+bottom, no de una altura fija.
      La X queda adentro: va en right:16 y el panel corta en 8, o sea que no se sale. */
@media (max-width:1023px){
  .dl-header-2026 #menuToggle{z-index:999999}
  .dl-header-2026 #menuToggle #menu{
    z-index:auto;
    top:8px;right:8px;bottom:8px;left:auto;
    height:auto;
    border-radius:20px;
    box-shadow:0 20px 60px rgba(23,28,8,.18);
    transform:translateX(calc(100% + 8px));
  }
  .dl-header-2026 #menuToggle input:checked ~ #menu{
    transform:translateX(0) !important;
  }
}

/* --- El panel scrollea por dentro y la tarjeta queda fija abajo ---
   Es como lo resuelve la maqueta: el cajon es una columna flex con overflow:hidden, el cuerpo
   se lleva el flex:1 y el overflow-y, y el pie no encoge. Antes scrolleaba el panel entero,
   asi que la tarjeta de cuenta se iba con el contenido y habia que bajar hasta el final.
   El min-height:0 del <li> es imprescindible: sin el, un hijo flex no baja de su altura de
   contenido y el overflow del cuerpo nunca se activa. */
@media (max-width:1023px){
  .dl-header-2026 #menuToggle #menu{
    display:flex;flex-direction:column;
    overflow:hidden;
    padding:0;
  }
  .dl-header-2026 #menuToggle #menu > li{
    display:flex;flex-direction:column;
    flex:1;min-height:0;
  }
  .dl-header-2026 #menu-principal{
    flex:1;min-height:0;
    overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:58px 20px 16px;
  }
  .dl-header-2026 #menuToggle #menu .dl-dw-cuenta{
    flex-shrink:0;
    margin-top:0;
    padding:16px 20px;
    border-top:1px solid rgba(23,28,8,.06);
    background:#fff;
    border-radius:0 0 20px 20px;
  }
  /* La tarjeta ya no scrollea, asi que "Ver mas" no necesita margen extra abajo */
  .dl-header-2026 .dl-dw-mas-det{margin-bottom:8px}
}

/* --- Cruz de cerrar del panel ---
   Antes se usaba la propia hamburguesa transformada en X, pero eso obliga a moverla de lugar
   para que no caiga sobre la esquina redondeada, y la hamburguesa cerrada ya estaba bien donde
   estaba. Ahora el panel tiene su propia cruz, en circulo, como la maqueta.
   Es un <label for="checkMenuToggle">, o sea que cierra sin JS.
   Con el menu abierto las tres barras se ocultan y el <input> deja de recibir toques
   -pointer-events:none-, para que no compita con la cruz, que le queda encima. */
@media (max-width:1023px){
  .dl-header-2026 #menuToggle input:checked ~ span{opacity:0 !important}
  /* El <input> invisible se superpone con la cruz y queda por encima. No se lo anula: se lo
     agranda para que cubra todo el circulo. Tocarlo destilda el checkbox, o sea que cierra
     igual que el label. Asi el toque siempre da en algo, caiga donde caiga. */
  .dl-header-2026 #menuToggle input:checked{
    width:40px;height:40px;top:-10px;left:-12px;
    cursor:pointer;
  }

  .dl-header-2026 #menu .dl-dw-cerrar{
    position:absolute;top:12px;right:12px;z-index:5;
    width:32px;height:32px;border-radius:50%;
    background:rgba(23,28,8,.05);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;margin:0;
    transition:background .2s;
  }
  .dl-header-2026 #menu .dl-dw-cerrar:hover{background:rgba(23,28,8,.1)}
  .dl-header-2026 #menu .dl-dw-cerrar svg{width:16px;height:16px;opacity:.4}
}

/* --- Hamburguesa sin animacion ---
   bundle.min.css le pone a cada barra un transition de transform/background/opacity y, al
   abrir, un rotate(45deg) con translate para armar la X. Ahora la cruz es un elemento propio
   del panel, asi que ese giro no aporta nada: se ve a las barras rotando y desvaneciendose
   justo cuando entra el panel. Se apagan las dos cosas, la transicion y el transform. */
@media (max-width:1023px){
  .dl-header-2026 #menuToggle span{
    transition:none !important;
    transform:none !important;
  }
  .dl-header-2026 #menuToggle input:checked ~ span{
    opacity:0 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* --- La cruz, sin circulo y mas marcada --- */
@media (max-width:1023px){
  .dl-header-2026 #menu .dl-dw-cerrar,
  .dl-header-2026 #menu .dl-dw-cerrar:hover{
    background:none;
  }
  .dl-header-2026 #menu .dl-dw-cerrar svg{
    width:20px;height:20px;
    opacity:1;
    color:var(--dl26-verde-oscuro);
  }
}

/* --- Nombres largos no pueden romper la barra ---
   Con sesion iniciada el boton crece con el nombre. Un nombre compuesto -"Sebastian Ignacio"-
   sumado al logo, el carrito y el hueco de la hamburguesa no entra en 375px, y la barra se
   partia en dos renglones. En el markup ya se recorta al primer nombre; esto es la red de
   seguridad para un primer nombre largo de por si.
   El min-width:0 es necesario: sin el, un item flex no achica por debajo del ancho de su
   contenido y el text-overflow nunca llega a aplicarse. */
@media (max-width:1023px){
  .dl-header-2026 .dl-header-inner{flex-wrap:nowrap}
  .dl-header-2026 .dl-mi-btn{min-width:0;flex-shrink:1}
  .dl-header-2026 .dl-mi-texto{
    display:inline-block;
    max-width:96px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    vertical-align:middle;
  }
  /* En la tarjeta del panel si va el nombre completo: hay lugar. Pero se recorta contra
     "Cerrar sesion", que esta posicionado encima a la derecha. */
  .dl-header-2026 #menuToggle #menu .dl-dw-cuenta-nom{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    padding-right:72px;
  }
}

/* --- Iconos del desplegable de MiDepiLife --- */
.dl-header-2026 .dl-mi-panel{min-width:252px}
.dl-header-2026 .dl-mi-panel .dl-mi-ico{
  width:26px;height:26px;border-radius:8px;flex-shrink:0;
  background:rgba(117,153,71,.08);
  display:flex;align-items:center;justify-content:center;
}
.dl-header-2026 .dl-mi-panel .dl-mi-ico svg{
  width:14px;height:14px;stroke:var(--dl26-verde);opacity:.85;
}

/* --- Tarjeta de cuenta del panel mobile ---
   "Cerrar sesion" estaba en position:absolute y se salia del panel, que tiene overflow:hidden:
   quedaba recortado contra el borde y la parte visible no recibia el clic. Ahora las dos piezas
   viven en una fila flex: la tarjeta se achica (min-width:0, con el nombre recortado en "...")
   y el boton no encoge nunca, asi que siempre entra y siempre es clickeable.
   El fondo verde pasa a la caja, porque los dos <a> no pueden anidarse. */
@media (max-width:1023px){
  .dl-header-2026 #menuToggle #menu .dl-dw-cuenta-box{
    display:flex;align-items:center;gap:10px;
    padding:12px 14px;border-radius:12px;
    background:rgba(117,153,71,.08);
  }
  .dl-header-2026 #menuToggle #menu .dl-dw-cuenta-card{
    display:flex !important;align-items:center;gap:10px;
    flex:1;min-width:0;
    padding:0;background:none;
  }
  .dl-header-2026 #menuToggle #menu .dl-dw-cuenta-nom{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    padding-right:0;
  }
  .dl-header-2026 #menuToggle #menu .dl-dw-salir{
    position:static;flex-shrink:0;
    font-size:10px;opacity:.45;
    color:var(--dl26-verde-oscuro) !important;
    white-space:nowrap;
  }
  .dl-header-2026 #menuToggle #menu .dl-dw-salir:hover{opacity:.8}
}

/* --- El boton del header cambia de destino segun la pantalla ---
   Escritorio: carrito con ruedas -> /cart/, con el contador.
   Mobile: bolsa -> tienda online, para dejar el catalogo a un toque. En mobile la barra no
   tiene ningun otro acceso directo a la tienda; en escritorio ya es el primer item del menu.
   Van los dos enlaces en el HTML porque el destino no se puede cambiar por CSS. */
.dl-header-2026 .dl-cart-a{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  position:relative;overflow:visible;
}
.dl-header-2026 .dl-cart-a-mobile{display:none}
@media (max-width:1023px){
  .dl-header-2026 .dl-cart-a-desktop{display:none}
  .dl-header-2026 .dl-cart-a-mobile{display:flex}
}

/* --- Un solo carrito visible por pantalla ---
   La regla de mas arriba ".dl-header-2026 .dl-cart-btn a" vale (0,0,2,1) por el selector de
   tipo, y le ganaba a ".dl-header-2026 .dl-cart-a-mobile" (0,0,2,0): el display:flex se
   imponia y en escritorio se veian los DOS botones, cada uno con su globo.
   Se suben las dos reglas a tres clases para que la especificidad quede pareja y mande el orden. */
.dl-header-2026 .dl-cart-btn .dl-cart-a-mobile{display:none}
.dl-header-2026 .dl-cart-btn .dl-cart-a-desktop{display:flex}
@media (max-width:1023px){
  .dl-header-2026 .dl-cart-btn .dl-cart-a-desktop{display:none}
  .dl-header-2026 .dl-cart-btn .dl-cart-a-mobile{display:flex}
}

/* --- El desplegable de MiDepiLife, centrado en mobile ---
   En escritorio se ancla al boton (right:0) y esta bien: hay lugar de sobra a la izquierda.
   En mobile el boton queda muy cerca del borde derecho, asi que el panel se estiraba hasta
   pegarse al borde izquierdo y se leia como cortado.
   Se pasa a position:fixed para poder centrarlo contra la PANTALLA y no contra el boton
   -con position:absolute solo se puede centrar respecto del padre-. El top es fijo porque
   la barra en mobile mide 56px; el panel arranca justo debajo. */
@media (max-width:1023px){
  .dl-header-2026 .dl-mi-panel{
    position:fixed;
    top:62px;
    left:50%;right:auto;
    transform:translateX(-50%);
    width:calc(100vw - 24px);
    min-width:0;max-width:340px;
    max-height:calc(100vh - 80px);
    overflow-y:auto;overscroll-behavior:contain;
  }
}

/* --- Menos aire arriba del panel ---
   Los 58px de arriba estaban para no chocar con la cruz de cerrar, que va en top:12 y mide 32:
   termina en 44. Con 44 el contenido arranca justo debajo y no se pierden ~14px de pantalla.
   El primer item aporta sus propios 11px de padding, asi que igual no queda pegado. */
@media (max-width:1023px){
  .dl-header-2026 #menu-principal{padding-top:44px}
}

/* --- Cabecera de centros, igual en las dos pantallas ---
   Se saca el "25 centros para elegir" tambien en escritorio: el rotulo y la flecha alcanzan
   para entender que hay algo para desplegar, y el numero competia con el titulo.
   La flecha deja de irse al extremo derecho -margin-left:auto- y queda pegada al texto: en
   escritorio el pie es ancho y la flecha terminaba a media pantalla del rotulo. */
.dl-footer-2026 .dl-centros-cant{display:none}
.dl-footer-2026 .dl-centros-sum{justify-content:flex-start}
.dl-footer-2026 .dl-centros-chev{margin-left:0}

/* --- Degradado al pie del panel mobile ---
   position:sticky con bottom:0 lo mantiene clavado al borde inferior VISIBLE del area que
   scrollea; el margin-top negativo lo saca del flujo, para que no agregue alto ni empuje al
   ultimo item. pointer-events:none es imprescindible: sin eso se come los toques del enlace
   que queda debajo.
   El JS le pone la clase dl-dw-fin al llegar al final -o si no hay nada que scrollear- y ahi
   se desvanece. */
@media (max-width:1023px){
  .dl-header-2026 #menu-principal .dl-dw-fade{
    position:sticky;bottom:-16px;
    height:56px;margin-top:-56px;
    pointer-events:none;
    background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 80%);
    transition:opacity .25s;
    opacity:1;
  }
  .dl-header-2026 #menu-principal.dl-dw-fin .dl-dw-fade{opacity:0}
}

/* La flecha acompana la animacion en vez de saltar de golpe */
.dl-footer-2026 .dl-centros-chev{transition:transform .22s ease}

/* --- Degradado del panel, mas alto y mas marcado ---
   56px se perdian contra el blanco. Con 88px y un punto intermedio al 45% el blanco entra
   antes y la ultima linea se ve mas atenuada, que es lo que hace legible el "sigue habiendo". */
@media (max-width:1023px){
  .dl-header-2026 #menu-principal .dl-dw-fade{
    height:88px;margin-top:-88px;
    background:linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.82) 45%,
      #fff 88%);
  }
}

/* --- La bajada del newsletter, en un solo renglon en mobile ---
   A 13px "Promos exclusivas, tips y novedades directo a tu mail" no entra en 375px y se
   partia en dos, dejando la palabra "mail" sola. A 11px entra completa.
   Se acompana bajando el padding lateral del panel de 24 a 20: son 8px mas de ancho util
   que ayudan a este renglon y a los nombres largos de los centros. */
@media (max-width:900px){
  .dl-footer-2026 .dl-footer-panel{padding-left:20px;padding-right:20px}
  .dl-footer-2026 .dl-news-bajada{
    font-size:11px;line-height:1.45;
  }
}

/* --- El degradado, mas alto y con una rampa mas suave ---
   Con 88px y el blanco entrando al 45% el corte se notaba como una banda. Ahora sube hasta
   130px pero arranca mucho mas transparente: a mitad de camino todavia deja leer, y el blanco
   pleno queda solo en el borde de abajo. El efecto llega mas arriba y se siente menos duro,
   y la ultima opcion se sigue viendo. */
@media (max-width:1023px){
  .dl-header-2026 #menu-principal .dl-dw-fade{
    height:130px;margin-top:-130px;
    background:linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.22) 32%,
      rgba(255,255,255,.60) 58%,
      rgba(255,255,255,.88) 80%,
      #fff 100%);
  }
}

/* --- Cuatro columnas en el pie ---
   Con la columna nueva no entraban a 48px de separacion: "Preguntas frecuentes" se partia en
   dos renglones. Se achica el bloque de marca y la separacion entre columnas para darles aire.
   El wrap es la red de seguridad en anchos intermedios. */
@media (min-width:901px){
  .dl-footer-2026 .dl-footer-brand{max-width:400px}
  .dl-footer-2026 .dl-footer-cols{gap:34px;flex-wrap:wrap}
  .dl-footer-2026 .dl-footer-col{min-width:132px}
}