/* =============================================================================
   IKARASPORT — REDISEÑO ficha producto + listado categoría
   Cargado solo en controllers `product` y `category` desde el módulo
   ikarasport_customassets (hookActionFrontControllerSetMedia).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* Cross-document View Transitions: en navegadores que lo soportan (Chrome 126+,
   Safari 18+) cada navegación same-origin se cross-fadea suavemente en vez del
   flash blanco habitual. En navegadores sin soporte el comportamiento es el
   mismo de siempre (degradación silenciosa). */
@view-transition { navigation: auto; }

/* Tunear la animación por defecto: un fade limpio en 180ms es más "premium"
   que el slide blanco que algunos navegadores hacen. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.18s;
  animation-timing-function:cubic-bezier(.4,0,.2,1);
}

/* === Skeleton shimmer state ===
   .products gets `.is-refreshing` toggled by redesign.js around PrestaShop's
   faceted-search AJAX cycle. Each card gets a sweeping highlight overlay so
   the user has visible feedback that the list is updating, instead of
   "frozen page then sudden swap". */
@keyframes ikara-shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}
.products.is-refreshing .product-card{
  position:relative;
  pointer-events:none;
}
.products.is-refreshing .product-card > *{
  opacity:.45;
  transition:opacity .2s;
}
.products.is-refreshing .product-card::after{
  content:"";
  position:absolute;inset:0;
  border-radius:inherit;
  background:linear-gradient(110deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 70%);
  background-size:200% 100%;
  animation:ikara-shimmer 1.4s ease-in-out infinite;
  pointer-events:none;
  z-index:5;
}
@keyframes ikara-spin{to{transform:rotate(360deg);}}
@keyframes ikara-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.5);}
  50%{box-shadow:0 0 0 6px rgba(22,163,74,0);}
}

@keyframes ikara-toast-in{
  from{transform:translateX(20px);opacity:0;}
  to{transform:translateX(0);opacity:1;}
}
@keyframes ikara-fadeIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
@keyframes bsheet-cta-spin{to{transform:rotate(360deg);}}
@keyframes cat-apply-spin{to{transform:rotate(360deg);}}

/* =============================================================================
   QTY INPUT — Ocultar spinners nativos del navegador
   El selector +/- ya está dibujado en el rediseño; los spinners por defecto
   del input[type=number] aparecían encima al pasar el ratón.
   ========================================================================== */
.qty-selector input[type="number"],
input#quantity_wanted{
  -moz-appearance:textfield;
  appearance:textfield;
}
.qty-selector input[type="number"]::-webkit-inner-spin-button,
.qty-selector input[type="number"]::-webkit-outer-spin-button,
input#quantity_wanted::-webkit-inner-spin-button,
input#quantity_wanted::-webkit-outer-spin-button{
  -webkit-appearance:none;
  appearance:none;
  margin:0;
}

/* =============================================================================
   HEADER REDESIGN (V1 Classic Pro) + MOBILE MENU V2 LIGHT
   The redesigned markup is rendered directly inside the theme's <header
   id="header"> by _partials/header.tpl. We use :has() to apply sticky +
   reset background only when the redesigned content is present, so the
   legacy header (checkout / account) is left untouched.
   ========================================================================== */

#header:has(.hpv1__top){
  position:sticky;top:0;z-index:1000;
  background:#fff;border-bottom:1px solid #f5f5f4;
  font-family:'Inter',sans-serif;color:#0c0a09;
  /* Default: subtle shadow so the sticky header always reads against white
     content below. Home overrides this at the top of the page. */
  box-shadow:0 6px 20px -10px rgba(12,10,9,.18);
  transition:box-shadow .2s ease,border-color .2s ease,background .2s ease;
}

/* Home header used to be transparent over the hero banner — now it always
   keeps the same white surface as the rest of the site (decision: too much
   contrast variance between top and scrolled state). */
/* Strip any padding/box that the theme may apply to the <header> shell so
   the redesigned bar sits flush. */
#header:has(.hpv1__top).header{padding:0;margin:0;border:0;}
.hpv1__top{background:#0c0a09;color:#fff;font-size:.78rem;letter-spacing:.05em;}
.hpv1__top-inner{
  padding:.55rem 2rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.hpv1__top-left{display:inline-flex;align-items:center;gap:.6rem;flex-wrap:wrap;}
.hpv1__top-item{
  display:inline-flex;align-items:center;gap:.35rem;
  color:#fff;text-decoration:none;opacity:.85;
  transition:opacity .15s,color .15s;
}
.hpv1__top-item:hover{opacity:1;color:#fff;}
.hpv1__top-item .material-icons{font-size:14px;}
.hpv1__top-sep{opacity:.4;margin:0 .25rem;}

.hpv1__top-right{display:flex;align-items:center;gap:1rem;}
/* Native <select> from ps_languageselector — make it sit cleanly on the dark bar */
.hpv1__top-right .ps-languageselector{margin:0;padding:0;background:transparent;}
.hpv1__top-right .js-language-selector{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25);
  padding:.2rem 1.6rem .2rem .6rem;font-size:.74rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  border-radius:.3rem;cursor:pointer;
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23ffffff' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat:no-repeat;background-position:right .5rem center;
  transition:border-color .15s,color .15s;
}
.hpv1__top-right .js-language-selector:hover{border-color:#fff;color:#fff;}
.hpv1__top-right .js-language-selector option{
  color:#0c0a09;background:#fff;
}

.hpv1__main{
  padding:.95rem 2rem;
  display:flex;align-items:center;gap:2rem;
}
.hpv1__brand{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0;}
.hpv1__logo{max-height:56px;width:auto;display:block;}

.hpv1__nav{
  flex:1;display:flex;align-items:center;min-width:0;
}

/* --- Layout-only adjustments to the injected ets_megamenu ------------------- */
/* The megamenu brings its own .container that re-centers and limits width;
   strip it so the menu spans the available space inside the header. */
.hpv1__nav .ets_mm_megamenu{background:transparent;width:100%;}
.hpv1__nav .ets_mm_megamenu .container{
  max-width:none;width:100%;padding:0;
}
.hpv1__nav .ets_mm_megamenu_content,
.hpv1__nav .ets_mm_megamenu_content_content{background:transparent;padding:0;}
/* Hide bits we don't need in desktop preview (mobile toggle and back arrow) */
.hpv1__nav .ybc-menu-toggle,
.hpv1__nav .close_menu{display:none;}
/* Top-level menu items: solid black text + Space Grotesk to match the
   dropdown titles (.ikmm-disc__eyebrow / .ikmm-prod__title). The megamenu
   inherits Inter from the theme; this aligns the visual language between
   top items and the panel they open. */
.hpv1__nav .mm_menus_li > a.ets_mm_url,
.hpv1__nav .mm_menus_li > a.ets_mm_url .mm_menu_content_title{
  color:#0c0a09;
  font-family:'Space Grotesk','Inter',sans-serif!important;
  font-weight:700!important;
  letter-spacing:.02em;
}

.hpv1__actions{display:flex;align-items:center;gap:1.15rem;flex-shrink:0;margin-left:auto;}

/* Search slot — render the real ps_searchbar widget for doofinder hooks but
   collapse it visually to look like just a circular magnifier button matching
   the rest of .hpv1__icon (cart, menu toggle, signin). */
.hpv1__search-slot{display:inline-flex;align-items:center;}
.hpv1__search-slot #_desktop_ps_searchbar{
  padding:0!important;margin:0!important;display:inline-flex;align-items:center;
  /* Reset bootstrap col/order/ms-auto utilities the widget tpl applies. */
  flex:0 0 auto!important;width:auto!important;
}
.hpv1__search-slot .ps-searchbar{
  position:relative;background:transparent;border:none;padding:0;
  display:inline-flex;align-items:center;
  /* Theme base sets min-width:19rem on .ps-searchbar — collapse it. */
  min-width:0!important;width:auto!important;margin:0!important;
}
/* Mobile-only widget block must stay hidden on desktop and not push siblings. */
.hpv1__search-slot .ps-searchbar--mobile{display:none!important;}
.hpv1__search-slot .ps-searchbar__form{
  display:inline-flex;align-items:center;background:transparent;
  border:none;padding:0;margin:0;position:relative;
}
/* The magnifier icon styled to match the rest of .hpv1__icon (transparent
   bg, color-only hover). */
.hpv1__search-slot .ps-searchbar__magnifier{
  position:static;transform:none;left:auto;
  width:42px;height:42px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:#0c0a09;cursor:pointer;
  transition:color .15s;
}
.hpv1__search-slot .ps-searchbar__magnifier:hover{color:#dc2626;}
.hpv1__search-slot .ps-searchbar__magnifier::before{display:none;}
/* Input hidden visually but kept in the DOM so doofinder & friends can hook
   `input[name="s"]`. width:0 + opacity:0 keeps it interactable enough for
   external scripts that listen on focus/click. */
.hpv1__search-slot .ps-searchbar__input{
  width:0;padding:0;border:none;opacity:0;
  position:absolute;left:0;top:0;height:100%;pointer-events:none;
}
.hpv1__search-slot .ps-searchbar__clear,
.hpv1__search-slot .ps-searchbar__dropdown{display:none!important;}

/* --- ps_customersignin widget styled as a circular icon ------------------- */
/* The widget brings .header-block / .header-block__action-btn / .dropdown-menu
   markup. We flatten the wrappers and force the trigger to a 42px circle so it
   matches .hpv1__icon next to it. The dropdown menu keeps the theme's native
   look (only the trigger is restyled). */
.hpv1__signin{display:inline-flex;align-items:center;flex-shrink:0;}
.hpv1__signin .ps-customersignin,
.hpv1__signin .header-block{
  margin:0!important;padding:0!important;background:transparent!important;
  display:inline-block!important;position:relative;
}
.hpv1__signin .header-block__action-btn{
  width:42px!important;height:42px!important;
  border-radius:50%!important;background:transparent!important;
  border:none!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  cursor:pointer;color:#0c0a09!important;text-decoration:none!important;
  padding:0!important;margin:0!important;gap:0!important;
  position:relative!important;font:inherit;
}
/* Hover only re-tints the icon — never the whole button color, otherwise
   the dropdown menu items inherit white text and become unreadable. */
.hpv1__signin .header-block__action-btn:hover .header-block__icon{
  color:#dc2626!important;
}
.hpv1__signin .header-block__icon{
  font-size:20px!important;line-height:1!important;color:#0c0a09!important;
  margin:0!important;
  transition:color .15s;
}
/* Hide the widget's text label next to the icon — both logged-out
   ("Iniciar sesión") and logged-in ("Claude" / customer name). The widget
   ships `d-none d-md-inline` Bootstrap classes that re-show it from md+,
   so we override every variant. */
.hpv1__signin .header-block__title,
.hpv1__signin .ps-customersignin .header-block__title,
.hpv1__signin .header-block .header-block__action-btn .header-block__title,
.hpv1__signin span.d-none.d-md-inline.header-block__title{
  display:none!important;width:0!important;height:0!important;
  font-size:0!important;visibility:hidden!important;overflow:hidden!important;
  position:absolute!important;left:-9999px!important;
}
.hpv1__signin .dropdown-toggle::after{display:none!important;}

/* --- ps_customersignin dropdown menu (logged in) -------------------------- */
/* Editorial light: rounded panel, eyebrow with red skewed bar at the top,
   flat list of items (Inter, black) with a hover that nudges right and turns
   red. The "Cerrar sesión" link gets a top divider + red treatment. */
.hpv1__signin .dropdown-menu{
  border:1px solid #e7e5e4!important;
  border-radius:1rem!important;
  background:#fff!important;
  box-shadow:0 24px 60px -20px rgba(12,10,9,.18)!important;
  min-width:260px!important;
  padding:2.4rem 0 .25rem!important;
  margin-top:.65rem!important;
  font-family:'Inter',sans-serif!important;
  position:relative;
}
/* Eyebrow header — split into two absolute pseudos so the skewed bar and the
   "Mi cuenta" label don't overlap. The wrapper reserves 2.4rem padding-top
   for them, plus the first item carries a top border. */
.hpv1__signin .dropdown-menu::before{
  content:"";position:absolute;left:1.1rem;top:1rem;
  width:24px;height:3px;background:#dc2626;transform:skewX(-20deg);
}
.hpv1__signin .dropdown-menu::after{
  content:"Mi cuenta";
  position:absolute;left:calc(1.1rem + 24px + .55rem);top:.7rem;
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:#0c0a09;
  line-height:1.3;
}
.hpv1__signin .dropdown-menu > a.dropdown-item:first-of-type,
.hpv1__signin .dropdown-menu > .dropdown-item:first-of-type{
  border-top:1px solid #e7e5e4;
  padding-top:.85rem!important;
  margin-top:.4rem;
}
.hpv1__signin .dropdown-menu .dropdown-divider{
  display:none;
}
.hpv1__signin .dropdown-menu .dropdown-item{
  display:flex;align-items:center;gap:.65rem;
  padding:.6rem 1.1rem!important;
  font-size:.88rem!important;font-weight:500!important;
  color:#0c0a09!important;background:transparent!important;
  text-decoration:none!important;letter-spacing:0!important;
  text-transform:none!important;
  transition:color .15s,background .15s,padding-left .2s;
  border:none!important;
}
.hpv1__signin .dropdown-menu .dropdown-item .material-icons{
  font-size:18px;color:#78716c;flex-shrink:0;margin:0!important;
  transition:color .15s;
}
.hpv1__signin .dropdown-menu .dropdown-item:hover,
.hpv1__signin .dropdown-menu .dropdown-item:focus{
  background:#fafaf9!important;color:#dc2626!important;
  padding-left:1.4rem!important;
}
.hpv1__signin .dropdown-menu .dropdown-item:hover .material-icons,
.hpv1__signin .dropdown-menu .dropdown-item:focus .material-icons{
  color:#dc2626;
}
/* Logout — last item, separated, red */
.hpv1__signin .dropdown-menu .dropdown-item[href*="logout"]{
  color:#dc2626!important;font-weight:600!important;
  margin-top:.4rem;padding-top:.85rem!important;
  border-top:1px solid #e7e5e4!important;
}
.hpv1__signin .dropdown-menu .dropdown-item[href*="logout"] .material-icons{
  color:#dc2626;
}
.hpv1__signin .dropdown-menu .dropdown-item[href*="logout"]:hover{
  background:#fef2f2!important;
}
.hpv1__icon{
  width:42px;height:42px;border-radius:50%;background:transparent;
  border:none;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;color:#0c0a09;text-decoration:none;position:relative;
  transition:color .15s;
}
.hpv1__icon:hover{color:#dc2626;}
.hpv1__badge{
  position:absolute;top:-4px;right:-4px;background:#dc2626;color:#fff;
  font-size:.62rem;font-weight:700;width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.hpv1__menu-toggle{display:none;}

/* The megamenu's own mobile toggle (ybc-menu-toggle) lives inside both our
   .hpv1__nav and .mmpv2 wrappers — but the module also tries to materialise
   it on its own at small viewports. Hide it globally; we drive the mobile
   menu from .hpv1__menu-toggle + .mmpv2 instead. */
.ybc-menu-toggle, .ybc-menu-vertical-button, .close_menu{display:none!important;}

/* Tablet + mobile share the same mode: hide the horizontal nav, show the
   hamburger toggle that opens the .mmpv2 drawer. Threshold 1199 covers up to
   landscape tablets (Bootstrap xl-). */
@media (max-width:1199px){
  .hpv1__top-right{display:none;}
  .hpv1__nav{display:none;}
  .hpv1__menu-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:50%;background:transparent;
    border:none;cursor:pointer;color:#0c0a09;
    transition:color .15s;
  }
  .hpv1__menu-toggle:hover{color:#dc2626;}
  .hpv1__main{padding:.7rem 1rem;gap:1rem;}
  .hpv1__logo{max-height:42px;}
  .hpv1__top-inner{padding:.45rem 1rem;justify-content:center;text-align:center;}
}

/* Header is fully sticky on mobile too — the dark topbar and the white nav
   strip both ride the scroll together. The previous collapse-on-scroll rule
   caused glitches on some viewports (and the user prefers the full chrome
   always visible), so we keep #header.is-scrolled as a hook for shadows only. */

/* --- Scroll-to-top floating button ----------------------------------------- */
.ikara-back-to-top{
  position:fixed;right:1rem;bottom:1rem;z-index:1030;
  width:42px;height:42px;border-radius:50%;
  background:rgba(12,10,9,.78);color:#fff;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 12px 28px -10px rgba(0,0,0,.4);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .2s ease,transform .25s ease,background .15s;
}
.ikara-back-to-top.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.ikara-back-to-top:hover{background:#0c0a09;}
.ikara-back-to-top .material-icons{font-size:22px;}
/* Lift above the mobile buy bar on product pages so it doesn't overlap the
   sticky CTA. The bar is ~70px tall plus safe-area. */
/* Lifted above the pill buy-bar (bottom:.75rem + ~120px tall) so the two
   controls don't visually collide on product pages. */
body.page-product .ikara-back-to-top{bottom:calc(140px + env(safe-area-inset-bottom));}
@media(min-width:992px){
  .ikara-back-to-top{right:1.5rem;bottom:1.5rem;width:46px;height:46px;}
  .ikara-back-to-top .material-icons{font-size:24px;}
}

/* --- Mobile menu V2 — full-screen overlay big-typography (light) ------------ */
.mmpv2{
  position:fixed;inset:0;z-index:1090;
  height:100vh;height:100dvh;
  background:#fff;color:#0c0a09;
  /* Scroll the whole panel and pin head/foot with sticky. More reliable than
     scrolling a flex/grid child: the megamenu injects nested wrappers that
     break overflow-y on a constrained child container. */
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  /* New stacking context so head/foot z-indexes win against any z-index the
     megamenu's nested elements (.mm_menus_li hover bg z:100, etc.) bring. */
  isolation:isolate;
  font-family:'Inter',sans-serif;
}
.mmpv2[hidden]{display:none;}
.mmpv2__head{
  position:sticky;top:0;z-index:9999;background:#fff;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.1rem 1.25rem .25rem;
}
.mmpv2__brand img{max-height:36px;width:auto;display:block;}
.mmpv2__head-actions{
  display:flex;align-items:center;gap:.5rem;
}
.mmpv2__action,
.mmpv2__close{
  background:transparent;border:1px solid #e7e5e4;color:#0c0a09;
  width:38px;height:38px;border-radius:50%;
  line-height:1;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
  transition:background .15s,color .15s,border-color .15s;
  position:relative;
}
.mmpv2__action .material-icons,
.mmpv2__close .material-icons{font-size:20px;}
.mmpv2__action:hover,
.mmpv2__action:active,
.mmpv2__close:hover,
.mmpv2__close:active{background:#0c0a09;color:#fff;border-color:#0c0a09;}
.mmpv2__action--lang.is-active{background:#0c0a09;color:#fff;border-color:#0c0a09;}
.mmpv2__action-badge{
  position:absolute;top:-4px;right:-4px;
  background:#dc2626;color:#fff;font-size:.6rem;font-weight:700;
  min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;line-height:1;
  font-family:'Inter',sans-serif;
}

/* Language popover — anchored under the head, slides down with a tiny fade.
   Sits above .mmpv2__list (z-index higher) so the list isn't clickable while
   the popover is open. Outside-click handler closes it. */
.mmpv2__lang-popover{
  position:absolute;top:calc(100% - .25rem);right:1.25rem;z-index:10000;
  background:#fff;border:1px solid #e7e5e4;border-radius:1rem;
  box-shadow:0 18px 40px -20px rgba(12,10,9,.25);
  min-width:220px;max-width:calc(100% - 2.5rem);
  padding:.85rem;
  animation:mmpv2-lang-in .18s ease both;
}
.mmpv2__lang-popover[hidden]{display:none;}
@keyframes mmpv2-lang-in{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:translateY(0);}
}
.mmpv2__lang-popover-title{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:700;font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;
  color:#78716c;
  padding:.1rem .35rem .6rem;
}
.mmpv2__lang-popover-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:.15rem;
}
.mmpv2__lang-link{
  display:flex;align-items:center;gap:.7rem;
  padding:.6rem .65rem;border-radius:.55rem;
  text-decoration:none;color:#0c0a09;
  transition:background .15s,color .15s;
}
.mmpv2__lang-link:hover{background:#fafaf9;color:#0c0a09;}
.mmpv2__lang-link.is-current{background:#0c0a09;color:#fff;}
.mmpv2__lang-iso{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:700;font-size:.7rem;letter-spacing:.12em;
  min-width:2.2rem;
  padding:.18rem .45rem;border-radius:.35rem;
  background:#fafaf9;color:#0c0a09;
  text-align:center;line-height:1;
}
.mmpv2__lang-link.is-current .mmpv2__lang-iso{background:rgba(255,255,255,.18);color:#fff;}
.mmpv2__lang-name{
  font-family:'Inter',sans-serif;font-weight:500;font-size:.95rem;flex:1;
}
.mmpv2__lang-check{font-size:18px!important;color:#fff;}
/* Flag emoji rendered inside the toggle button. Sized to fill the 38px
   circle nicely (emoji glyphs have generous internal padding). */
.mmpv2__lang-current-flag{
  font-size:18px;line-height:1;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif;
}
/* Flag emoji prepended to each language row in the popover. */
.mmpv2__lang-flag{
  font-size:18px;line-height:1;flex-shrink:0;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Twemoji Mozilla',sans-serif;
}
.mmpv2__list{
  padding:1.5rem 1.25rem .5rem;
  position:relative;
}
/* Tiny editorial eyebrow above the menu list — red skewed bar plus label,
   for visual continuity with the rest of the redesign. The bar lives as a
   linear-gradient background since CSS can't nest pseudos. */
.mmpv2__list::before{
  content:"Navegación";
  display:block;
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#78716c;
  margin-bottom:1.1rem;
  padding-left:32px;line-height:1.3;position:relative;
}
.mmpv2__list::after{
  content:"";position:absolute;left:1.25rem;top:calc(1.5rem + .15rem);
  width:24px;height:3px;background:#dc2626;transform:skewX(-20deg);
}
.mmpv2__list ul{list-style:none;margin:0;padding:0;}

/* The megamenu (ets_megamenu) drops its desktop markup in here. Flatten its
   wrappers and turn each top-level item into a big typographic row with a
   trailing arrow. */
.mmpv2 .ets_mm_megamenu,
.mmpv2 .ets_mm_megamenu_content,
.mmpv2 .ets_mm_megamenu_content_content,
.mmpv2 .container{
  background:transparent;width:100%;max-width:none;padding:0;margin:0;
  display:block;position:static;
}
.mmpv2 .ybc-menu-toggle,
.mmpv2 .close_menu,
.mmpv2 .mm_arrow,
.mmpv2 .arrow{display:none!important;}
.mmpv2 .mm_menus_ul{
  display:block!important;list-style:none;margin:0;padding:0;
  position:static!important;visibility:visible!important;opacity:1!important;
  background:transparent;border:none;box-shadow:none;
  max-height:none!important;
  /* Force the menu list to behave as a vertical stack regardless of how the
     megamenu lays out floated children. overflow:hidden alone won't clip in
     a sticky drawer context — we also clear floats with an inline ::after. */
  width:100%!important;
}
.mmpv2 .mm_menus_ul::after{
  content:"";display:block;clear:both;
}
.mmpv2 .mm_menus_li{
  display:block!important;margin:0!important;padding:0!important;background:transparent;
  border-bottom:1px solid #e7e5e4;
  /* When a section is open, drop both its own and the previous sibling's
     border-bottom so the expanded sublist doesn't read as a framed box. */
  /* The megamenu's own CSS sets float:left on top-level <li> (so they sit
     horizontally in the desktop nav). At ≥768px viewports the float wins
     against our `display:block` and the drawer collapses into 2-3 columns
     after the layout reflows on the second open. Strip all positioning. */
  float:none!important;clear:both!important;
  width:100%!important;max-width:100%!important;min-width:0!important;
  position:static!important;
}
.mmpv2 .mm_menus_li.is-open,
.mmpv2 .mm_menus_li:has(+ .mm_menus_li.is-open){
  border-bottom-color:transparent!important;
}
.mmpv2 .mm_menus_li > a.ets_mm_url{
  font-family:'Space Grotesk','Inter',sans-serif!important;
  font-weight:700!important;font-size:1.9rem!important;
  color:#0c0a09!important;text-decoration:none!important;
  padding:.6rem 0!important;
  display:flex!important;align-items:center;justify-content:space-between;
  border:none!important;
  letter-spacing:-.02em!important;line-height:1.15!important;
  background:transparent!important;border-radius:0!important;
  text-transform:none!important;
  /* Same float reset on the inner <a> — the megamenu's `.mm_menus_li > a`
     rule is float:left and a flex display alone doesn't override it. */
  float:none!important;width:100%!important;min-height:0!important;
  transition:color .15s,padding-left .25s;
}
.mmpv2 .mm_menus_li > a.ets_mm_url::after{
  content:"arrow_forward";
  font-family:'Material Icons';
  font-weight:normal;font-size:28px;letter-spacing:0;opacity:.4;
  margin-left:1rem;flex-shrink:0;
  transition:transform .25s,opacity .15s,color .15s;
}
.mmpv2 .mm_menus_li.mm_has_sub > a.ets_mm_url::after{content:"expand_more";}
.mmpv2 .mm_menus_li.is-open > a.ets_mm_url::after{transform:rotate(180deg);opacity:1;color:#dc2626;}
.mmpv2 .mm_menus_li > a.ets_mm_url:hover{color:#dc2626!important;padding-left:.5rem!important;}
.mmpv2 .mm_menus_li > a.ets_mm_url:hover::after{opacity:1;color:#dc2626;}
.mmpv2 .mm_menus_li > a.ets_mm_url .mm_menu_content_title{
  font:inherit!important;color:inherit!important;
  display:inline;
}

/* Submenu (mm_columns_ul) — collapsed by default, shown when the parent <li>
   gets .is-open via the accordion JS. We override every common visibility
   property the megamenu CSS may apply, since it ships rules for hover/desktop
   modes that can leave the submenu hidden even when display:block. */
.mmpv2 .mm_columns_ul{
  display:none!important;
  list-style:none;margin:0!important;padding:.5rem 0 .8rem!important;
  width:auto!important;max-width:none!important;min-width:0!important;
  position:static!important;top:auto!important;left:auto!important;right:auto!important;
  background:transparent!important;box-shadow:none!important;border:none!important;
  font-size:1rem!important;
  visibility:visible!important;opacity:1!important;
  max-height:none!important;height:auto!important;overflow:visible!important;
  transform:none!important;clip:auto!important;
}
.mmpv2 .mm_menus_li.is-open > .mm_columns_ul{display:block!important;}
.mmpv2 .mm_columns_li,
.mmpv2 .mm_blocks_ul,
.mmpv2 .mm_blocks_li{
  display:block!important;margin:0!important;padding:0!important;
  width:auto!important;float:none!important;list-style:none;
  border:none!important;background:transparent!important;
  min-height:0!important;
}
/* Drop blocks that don't fit a narrow drawer entirely (image previews and
   raw HTML/markdown decoration). Their parent <li.mm_blocks_li> is also
   collapsed so they don't leave a vertical gap. */
.mmpv2 .mm_block_type_image,
.mmpv2 .mm_block_type_html{display:none!important;}
.mmpv2 .mm_blocks_li:has(> .mm_block_type_image),
.mmpv2 .mm_blocks_li:has(> .mm_block_type_html){display:none!important;}
/* Generic .ets_mm_block reset — kill any padding/border the megamenu adds */
.mmpv2 .ets_mm_block,
.mmpv2 .ets_mm_block_content{
  padding:0!important;margin:0!important;border:none!important;
  background:transparent!important;
}
.mmpv2 .clearfix{display:none!important;}
/* Block titles act as group labels when present */
.mmpv2 .ets_mm_block h4{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:700;font-size:.72rem!important;
  letter-spacing:.18em;text-transform:uppercase;
  color:#78716c!important;
  margin:.6rem 0 .2rem!important;padding:0!important;
}
/* Category links inside submenu */
.mmpv2 .ets_mm_categories{
  list-style:none;margin:0!important;padding:0!important;
  /* Kill the box-shadow the megamenu adds on .has-sub > .ets_mm_categories
     and any border the layouts may stack. We want a flat list inside the
     drawer, no outer frame. */
  box-shadow:none!important;border:none!important;background:transparent!important;
  display:block!important;
  /* Reset any column rules the megamenu CSS may apply at certain breakpoints
     so the list always renders as a single vertical stack. */
  columns:auto!important;column-count:1!important;column-gap:0!important;
}
.mmpv2 .ets_mm_categories li,
.mmpv2 .ets_mm_block_content ul li,
.mmpv2 .ets_mm_block_content ul li:not(.item_has_img){
  /* Megamenu's own CSS sets float:left + clear:both on these li, which
     mostly stacks them — but jQuery's slideDown leaves inline styles on the
     parent that, on tablet, leak through and let the floats wrap into 2/3
     columns on reopen. Force a vertical stack unconditionally. */
  display:block!important;float:none!important;clear:none!important;
  width:100%!important;max-width:100%!important;min-width:0!important;
  margin:0!important;padding:0!important;
  position:static!important;
}
.mmpv2 .ets_mm_categories a{
  display:block!important;
  padding:.4rem 0!important;
  font-family:'Inter',sans-serif!important;
  font-size:1rem!important;font-weight:500!important;
  color:#57534e!important;text-decoration:none!important;
  letter-spacing:0!important;
  transition:color .15s,padding-left .2s;
}
.mmpv2 .ets_mm_categories a:hover{color:#0c0a09!important;padding-left:.4rem!important;}

/* Static fallback links rendered when the megamenu is unavailable */
.mmpv2__list > a{
  font-family:'Space Grotesk','Inter',sans-serif;
  font-weight:700;font-size:1.9rem;color:#fff;text-decoration:none;
  padding:.6rem 0;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid #292524;
  letter-spacing:-.02em;
  transition:color .15s,padding-left .25s;
}
.mmpv2__list > a:hover{color:#dc2626;padding-left:.5rem;}

/* =============================================================================
   FOOTER V3 — RACING / BIG TYPO
   Applied through _partials/footer.tpl. The <footer id="footer" class="footer">
   wrapper from the layout stays, we only style its inner content.
   ========================================================================== */
.f3{
  background:#0c0a09;color:#fff;position:relative;overflow:hidden;
  font-family:'Inter',sans-serif;
}
.f3::before{
  content:"IKARASPORT";
  position:absolute;bottom:-3rem;left:-1rem;
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:800;
  font-size:18rem;color:#fff;opacity:.04;letter-spacing:-.05em;line-height:1;
  white-space:nowrap;pointer-events:none;
}
.f3__main{padding:5rem 2rem 3rem;position:relative;z-index:1;}
.f3__main-inner{
  max-width:1400px;margin:0 auto;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:3rem;
}
.f3__hero h2{
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:800;
  font-size:2.8rem;letter-spacing:-.04em;line-height:1.05;
  margin:0 0 1rem;color:#fff!important;
}
.f3__hero h2 em{font-style:normal;color:inherit;}
.f3__hero p{
  color:#a8a29e;font-size:.95rem;max-width:340px;margin:0 0 1.6rem;
}
/* Social row — wraps the ps_socialfollow widget. The module renders an <ul>
   of <li><a><i class="icon-..."></i></a></li>; we flatten to a flex row of
   round buttons. */
.f3__social .block-social,
.f3__social ul{
  display:flex;gap:.5rem;list-style:none;margin:0;padding:0;
}
.f3__social li{margin:0;padding:0;list-style:none;}
.f3__social a{
  width:42px;height:42px;border-radius:50%;
  background:#1c1917;color:#fff;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;border:1px solid #292524;
  transition:background .2s,border-color .2s,transform .2s;
}
.f3__social a:hover{background:#dc2626;border-color:#dc2626;transform:translateY(-2px);}
.f3__social a span,
.f3__social a i{color:#fff;font-size:1rem;}

.f3__col h4{
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;
  color:#fff!important;font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 1.2rem;
  display:flex;align-items:center;gap:.5rem;
}
.f3__col h4::before{
  content:"";width:24px;height:3px;background:#dc2626;
  transform:skewX(-20deg);flex-shrink:0;
}
.f3__col ul{list-style:none;margin:0;padding:0;}
.f3__col li{margin:0 0 .65rem;}
.f3__col a{
  color:#d6d3d1;text-decoration:none;font-size:.88rem;display:block;
  transition:color .15s,padding-left .2s;
}
.f3__col a:hover{color:#fff;padding-left:.4rem;}

.f3__after{padding:1rem 2rem;position:relative;z-index:1;}

.f3__bottom{
  padding:1.5rem 2rem;border-top:1px solid #292524;
  background:rgba(0,0,0,.4);position:relative;z-index:1;
}
.f3__bottom-inner{
  max-width:1400px;margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  color:#fff;font-size:.76rem;flex-wrap:wrap;gap:1rem;
}
.f3__copy a{color:#d6d3d1;text-decoration:none;margin-left:.85rem;}
.f3__copy a:hover{color:#fff;}
.f3__pay{display:flex;gap:.45rem;}
.f3__pay span{
  background:#1c1917;color:#d6d3d1;
  padding:.3rem .55rem;border-radius:.25rem;
  font-size:.7rem;font-weight:600;border:1px solid #292524;
  letter-spacing:.05em;
}

/* The legacy <footer id="footer" class="footer"> shell may have its own
   padding/background from the theme — neutralise it so f3 owns the chrome. */
#footer.footer:has(.f3){padding:0;background:transparent;}

@media (max-width:991px){
  .f3__main-inner{grid-template-columns:1fr 1fr;gap:2.5rem;}
  .f3__hero{grid-column:1 / -1;}
  .f3__hero h2{font-size:2.2rem;}
}
@media (max-width:600px){
  .f3__main{padding:3.5rem 1.25rem 2rem;}
  /* 2 columns instead of 1 — the previous full-stack made the footer way
     too long on iPhone-class screens. The 3 link blocks flow row 1: cols
     1+2, row 2: col 3 (alone, left-aligned). Hero stays full-width. */
  .f3__main-inner{grid-template-columns:1fr 1fr;gap:1.75rem 1.25rem;}
  .f3__hero{grid-column:1 / -1;}
  .f3__hero h2{font-size:1.85rem;}
  .f3__col h4{font-size:.72rem;letter-spacing:.16em;margin-bottom:.9rem;}
  .f3__col a{font-size:.82rem;}
  .f3__col li{margin-bottom:.5rem;}
  .f3::before{font-size:10rem;bottom:-1.5rem;}
  .f3__bottom{padding:1.2rem 1.25rem;}
  .f3__bottom-inner{flex-direction:column;align-items:flex-start;}
}

/* --- Newsletter (ps_emailsubscription) inside footer V3 ---------------------
   Editorial light: flat dark background continuous with the footer, eyebrow
   with red skewed bar, big title on the left and the input + submit on the
   right (single row on desktop, stacked on mobile). No white panel, no
   contrast break — the form sits inline on the footer. */
.f3__newsletter{
  padding:0 2rem 3.5rem;
  position:relative;z-index:1;
}
.f3__newsletter-inner{
  max-width:1400px;margin:0 auto;
  border-top:1px solid #292524;
  padding-top:3rem;
  display:grid;grid-template-columns:1fr minmax(340px,520px);
  gap:3rem;align-items:start;
}
.f3__newsletter-copy{display:flex;flex-direction:column;gap:.85rem;}
/* Eyebrow */
.f3__newsletter h4{
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:700;
  color:#fff!important;font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;margin:0;
  display:flex;align-items:center;gap:.55rem;
}
.f3__newsletter h4::before{
  content:"";width:24px;height:3px;background:#dc2626;
  transform:skewX(-20deg);flex-shrink:0;display:inline-block;
}
.f3__newsletter h3{
  font-family:'Space Grotesk','Inter',sans-serif;font-weight:800;
  font-size:1.85rem;color:#fff!important;letter-spacing:-.025em;
  line-height:1.1;margin:0;max-width:560px;
  text-transform:none;
}
.f3__newsletter-form{align-self:end;}
/* Strip the PS module's wrappers — we render its <form> as a flat row. */
.f3 .f3__newsletter-form .ps-emailsubscription,
.f3 .f3__newsletter-form .ps-emailsubscription.bg-body-tertiary,
.f3 .f3__newsletter-form section.ps-emailsubscription{
  /* Force the footer's own dark color — Bootstrap's .bg-body-tertiary
     cascades through some layer/CSS-var setup that makes a plain `transparent`
     not stick, so we paint it explicitly with the footer background. */
  background:#0c0a09!important;background-color:#0c0a09!important;
  --bs-bg-opacity:0!important;
  border:none!important;border-radius:0!important;
  padding:0!important;margin:0!important;box-shadow:none!important;
}
.f3 .f3__newsletter-form .ps-emailsubscription .container,
.f3 .f3__newsletter-form .ps-emailsubscription .row{
  max-width:none!important;width:auto!important;margin:0!important;padding:0!important;
  display:block!important;
}
/* Hide the module's stock copy — our copy lives on the left column. */
.f3 .f3__newsletter-form .ps-emailsubscription .h3,
.f3 .f3__newsletter-form .ps-emailsubscription h3,
.f3 .f3__newsletter-form .block_newsletter h4,
.f3 .f3__newsletter-form .email_subscription h4{display:none!important;}
.f3 .f3__newsletter-form form{
  display:block!important;width:100%!important;margin:0!important;padding:0!important;
}
/* Form row: positioning context for the absolute submit. */
.f3 .f3__newsletter-form form > div,
.f3 .f3__newsletter-form form > div.d-flex{
  display:block!important;position:relative!important;
  background:transparent!important;border:none!important;
  margin:0!important;padding:0!important;gap:0!important;
}
/* Input — pill, transparent dark with white border (continuous with footer) */
.f3 .f3__newsletter-form input[type="email"],
.f3 .f3__newsletter-form .form-control{
  width:100%!important;display:block!important;
  background:transparent!important;background-color:transparent!important;
  color:#fff!important;
  border:1px solid #fff!important;border-radius:999px!important;
  padding:1rem 10rem 1rem 1.5rem!important;margin:0!important;
  font-family:'Inter',sans-serif!important;font-size:.95rem!important;
  outline:none!important;box-shadow:none!important;
  height:auto!important;line-height:1.4!important;
  transition:border-color .15s,box-shadow .15s;
}
.f3 .f3__newsletter-form input[type="email"]::placeholder,
.f3 .f3__newsletter-form .form-control::placeholder{color:#fff!important;opacity:1;}
.f3 .f3__newsletter-form input[type="email"]:focus,
.f3 .f3__newsletter-form .form-control:focus{
  background:transparent!important;color:#fff!important;
  border-color:#dc2626!important;
  box-shadow:0 0 0 3px rgba(220,38,38,.18)!important;
}
/* Submit — red pill inside the input on the right. */
.f3 .f3__newsletter-form input[type="submit"],
.f3 .f3__newsletter-form .btn,
.f3 .f3__newsletter-form .btn-primary{
  position:absolute!important;top:50%!important;right:.35rem!important;
  transform:translateY(-50%)!important;
  background:#dc2626!important;background-color:#dc2626!important;
  color:#fff!important;border:none!important;
  border-radius:999px!important;
  padding:.7rem 1.4rem!important;margin:0!important;
  font-family:'Space Grotesk','Inter',sans-serif!important;
  font-weight:700!important;font-size:.72rem!important;
  letter-spacing:.15em!important;text-transform:uppercase!important;
  cursor:pointer;line-height:1.4!important;white-space:nowrap;
  height:auto!important;min-height:0!important;
  box-shadow:none!important;
  transition:background .2s,color .2s;
}
.f3 .f3__newsletter-form input[type="submit"]:hover,
.f3 .f3__newsletter-form .btn-primary:hover{
  background:#fff!important;color:#0c0a09!important;
}
/* Disclaimer — white. Bootstrap renders `.text-body-secondary` as
   `color: var(--bs-secondary-color) !important`, so plain rule overrides
   lose to it under some cascade ordering. We override the CSS variable on
   the newsletter wrapper instead — the !important rule resolves the var to
   white and our color sticks. */
.f3 .f3__newsletter-form{
  --bs-secondary-color:#fff;
  --bs-body-secondary-color-rgb:255,255,255;
}
.f3 .f3__newsletter-form .ps-emailsubscription p,
.f3 .f3__newsletter-form .text-body-secondary,
.f3 .f3__newsletter-form .gdpr_consent{
  color:#fff!important;
}
.f3 .f3__newsletter-form .ps-emailsubscription p{
  font-size:.72rem!important;
  margin:.85rem 0 0!important;line-height:1.55;padding:0!important;
}
.f3 .f3__newsletter-form .ps-emailsubscription a{
  color:#fff!important;text-decoration:underline;
}
.f3__newsletter-form .notification,
.f3__newsletter-form .alert{
  margin:.65rem 0 0!important;padding:.65rem 1rem!important;
  font-size:.82rem!important;border-radius:.6rem!important;display:block;border:none!important;
}
.f3__newsletter-form .notification-success,
.f3__newsletter-form .alert-success{background:rgba(34,197,94,.12)!important;color:#86efac!important;}
.f3__newsletter-form .notification-error,
.f3__newsletter-form .alert-danger{background:rgba(220,38,38,.12)!important;color:#fca5a5!important;}

/* Tablet & mobile: stack copy/form, and break the submit pill onto its own
   row below the input. The PS9 widget wraps input+submit in a `.d-flex`
   row — we flip the direction to column so the submit drops below instead
   of squeezing next to the input. */
@media (max-width:991px){
  .f3__newsletter-inner{grid-template-columns:1fr;gap:1.5rem;}
  .f3__newsletter-form{align-self:auto;}
  .f3__newsletter h3{font-size:1.45rem;}
  .f3 .f3__newsletter .f3__newsletter-form form > div,
  .f3 .f3__newsletter .f3__newsletter-form form > div.d-flex{
    display:flex!important;flex-direction:column!important;
    align-items:stretch!important;gap:.6rem!important;
  }
  .f3 .f3__newsletter-form input[type="email"],
  .f3 .f3__newsletter-form .form-control{
    width:100%!important;padding:.95rem 1.25rem!important;
  }
  .f3 .f3__newsletter-form input[type="submit"],
  .f3 .f3__newsletter-form .btn,
  .f3 .f3__newsletter-form .btn-primary{
    position:static!important;transform:none!important;
    width:100%!important;margin:0!important;
    padding:.95rem 1rem!important;font-size:.78rem!important;
  }
}
@media (max-width:600px){
  .f3__newsletter{padding:0 1.25rem 2.5rem;}
  .f3__newsletter-inner{padding-top:2.25rem;}
  .f3__newsletter h3{font-size:1.25rem;line-height:1.15;}
}

/* =============================================================================
   ets_megamenu — DISCIPLINAS dropdown (V1 Editorial cards)
   Activated when the BO menu has custom_class="ikara-disciplinas" or its title
   contains "DISCIPLIN". The override template emits BOTH the V1 card AND the
   module's default mobile markup; CSS shows one or the other by viewport.
   Everything is scoped under `.mm_menus_li.ikara-disciplinas` so it doesn't
   leak into other menus.
   ========================================================================== */
/* Mobile: hide V1 card, default markup stays */
.mm_menus_li.ikara-disciplinas .ikmm-disc__card{display:none;}
.mm_menus_li.ikara-disciplinas .ikmm-disc__mobile{display:block;}

@media (min-width:992px){
  /* Desktop: show V1 card, hide the default-render fallback */
  .mm_menus_li.ikara-disciplinas .ikmm-disc__card{display:flex;}
  .mm_menus_li.ikara-disciplinas .ikmm-disc__mobile{display:none!important;}
  /* Grid container layout — `display:grid` is applied only by the :hover/.open
     rule below, so the panel stays hidden (display:none from the module) when
     the trigger isn't hovered. */
  .mm_menus_li.ikara-disciplinas .mm_columns_ul.ikmm-disc{
    grid-template-columns:repeat(4,1fr)!important;
    gap:2.4rem!important;
    width:100%!important;max-width:1400px;margin:0 auto;
    padding:2.4rem!important;
    background:#fff!important;
    border:none!important;list-style:none;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.25);
  }
  /* Reset the column li (the module's CSS adds flex/border/padding) */
  .mm_menus_li.ikara-disciplinas .mm_columns_ul.ikmm-disc > .mm_columns_li.ikmm-disc__cell{
    width:auto!important;flex:none!important;
    padding:0!important;margin:0!important;border:none!important;
    background:transparent!important;list-style:none;
  }
  /* The card — editorial light layout aligned with PRODUCTOS:
     image on top, eyebrow + title + subcategory list stacked below on white */
  .mm_menus_li.ikara-disciplinas .ikmm-disc__card{
    display:flex;flex-direction:column;
    background:transparent;
    color:#0c0a09;
    padding:0;
  }

  /* Thumbnail — keeps the image but presented as a discrete tile, not a card-fill */
  .mm_menus_li.ikara-disciplinas .ikmm-disc__thumb{
    display:block;
    aspect-ratio:4/3;
    background-color:#1c1917;
    background-size:cover;background-position:center;
    margin-bottom:1rem;
    position:relative;overflow:hidden;
    transition:transform .25s;
  }
  .mm_menus_li.ikara-disciplinas .ikmm-disc__thumb::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(220,38,38,0) 60%,rgba(220,38,38,.18));
    opacity:0;transition:opacity .25s;
  }
  .mm_menus_li.ikara-disciplinas .ikmm-disc__card:hover .ikmm-disc__thumb::after{opacity:1;}
  .mm_menus_li.ikara-disciplinas .ikmm-disc__card:hover .ikmm-disc__thumb{transform:scale(1.02);}

  /* Eyebrow — same red skewed bar pattern used by .ikmm-prod__title */
  .mm_menus_li.ikara-disciplinas .ikmm-disc__eyebrow{
    font-family:'Space Grotesk','Inter',sans-serif!important;font-weight:700!important;
    font-size:.78rem!important;letter-spacing:.18em!important;
    text-transform:uppercase!important;color:#0c0a09!important;
    margin:0 0 .65rem!important;padding:0!important;
    display:flex;align-items:center;gap:.5rem;line-height:1.3;
    background:transparent!important;border:none!important;
  }
  .mm_menus_li.ikara-disciplinas .ikmm-disc__eyebrow::before{
    content:"";width:24px;height:3px;background:#dc2626;
    transform:skewX(-20deg);flex-shrink:0;display:inline-block;
  }

  /* Title — black, bold, Space Grotesk */
  .mm_menus_li.ikara-disciplinas .ikmm-disc__title{
    font-family:'Space Grotesk','Inter',sans-serif!important;font-weight:800!important;
    font-size:1.25rem!important;letter-spacing:-.02em!important;line-height:1.1!important;
    margin:0 0 .85rem!important;color:#0c0a09!important;
    text-transform:none!important;
  }
  .mm_menus_li.ikara-disciplinas .ikmm-disc__title a{
    color:#0c0a09!important;text-decoration:none!important;
    background:transparent!important;padding:0!important;
    transition:color .15s;
  }
  .mm_menus_li.ikara-disciplinas .ikmm-disc__title a:hover{color:#dc2626!important;}
  .mm_menus_li.ikara-disciplinas .ikmm-disc__card:hover .ikmm-disc__title a{color:#dc2626!important;}

  /* Subcategory list — same look as .ikmm-prod__list */
  .mm_menus_li.ikara-disciplinas .ikmm-disc__list{display:block;}
  .mm_menus_li.ikara-disciplinas .ikmm-disc__list .ets_mm_categories{
    list-style:none;margin:0;padding:0;
  }
  .mm_menus_li.ikara-disciplinas .ikmm-disc__list .ets_mm_categories > li{
    margin:0 0 .5rem;padding:0;list-style:none;background:transparent!important;
  }
  .mm_menus_li.ikara-disciplinas .ikmm-disc__list .ets_mm_categories a,
  .mm_menus_li.ikara-disciplinas .ikmm-disc__list .ets_mm_categories a.ets_mm_url{
    display:inline-flex!important;align-items:center;gap:.4rem;
    font-size:.85rem!important;color:#44403c!important;font-weight:500!important;
    text-decoration:none!important;letter-spacing:0!important;
    padding:0!important;margin:0!important;background:transparent!important;
    border:none!important;text-transform:none!important;
    transition:color .15s,gap .2s;
  }
  .mm_menus_li.ikara-disciplinas .ikmm-disc__list .ets_mm_categories a::after{
    content:"arrow_forward";font-family:'Material Icons';font-weight:normal;
    font-size:16px;line-height:1;color:#dc2626;
    opacity:0;transform:translateX(-6px);
    transition:opacity .18s,transform .18s;
  }
  .mm_menus_li.ikara-disciplinas .ikmm-disc__list .ets_mm_categories a:hover{
    color:#dc2626!important;gap:.65rem;
  }
  .mm_menus_li.ikara-disciplinas .ikmm-disc__list .ets_mm_categories a:hover::after{
    opacity:1;transform:translateX(0);
  }
  /* Hide nested category arrows/sublists if present (keep the list flat) */
  .mm_menus_li.ikara-disciplinas .ikmm-disc__list .arrow,
  .mm_menus_li.ikara-disciplinas .ikmm-disc__list .ets_mm_categories ul{display:none!important;}

  /* Module's outer hover panel: keep a clean page-wide white background. */
  .mm_menus_li.ikara-disciplinas:hover > .mm_columns_ul.ikmm-disc,
  .mm_menus_li.ikara-disciplinas.open > .mm_columns_ul.ikmm-disc{display:grid!important;}
}

/* =============================================================================
   ets_megamenu — full-viewport-width dropdown panels (desktop only)
   The module positions .mm_columns_ul absolutely. We want the panel anchored
   against the full-width #header so it spans the viewport.
   Two pieces are needed:
   1. #header must establish a containing block — position:sticky alone does
      not, so we add `contain: layout` (creates a CB without altering sticky).
   2. The intermediate wrapper `.ets_mm_megamenu_content_content` carries
      position:relative from the module/theme, which would capture our absolute
      panel. We override it to static on desktop so the panel reaches #header.
   We also strip the default 10px gap and add a hover bridge so the cursor can
   cross from the trigger to the panel without losing :hover.
   Show-on-hover is enforced here because the module's only "open" trigger is
   `.mm_menus_li.hover:hover .mm_columns_ul { display:block }`, and we need
   `display:grid` to keep the V1/V2 layouts working.
   ========================================================================== */
@media (min-width:992px){
  /* Establish containing block on #header for the absolute panel */
  #header{contain:layout;}
  /* Neutralize the module's intermediate `position:relative` and the wrapper's
     `position:sticky` (it would otherwise capture our absolute panel and limit
     its width to the wrapper, ~1065px instead of full viewport). */
  .hpv1__nav .ets_mm_megamenu{position:static!important;}
  .hpv1__nav .ets_mm_megamenu_content_content{position:static!important;}

  .hpv1__nav .ets_mm_megamenu .mm_menus_li.ikara-disciplinas,
  .hpv1__nav .ets_mm_megamenu .mm_menus_li.ikara-productos{
    position:static!important;
  }
  .hpv1__nav .ets_mm_megamenu .mm_menus_li.ikara-disciplinas > .mm_columns_ul.ikmm-disc,
  .hpv1__nav .ets_mm_megamenu .mm_menus_li.ikara-productos > .mm_columns_ul.ikmm-prod{
    position:absolute!important;
    left:0!important;right:0!important;top:100%!important;
    width:auto!important;max-width:none!important;
    margin:0!important;padding-top:0!important;
    border:none!important;
    border-top:1px solid #e7e5e4!important;
  }
  .hpv1__nav .ets_mm_megamenu .mm_menus_li.ikara-disciplinas > .mm_columns_ul.ikmm-disc{
    padding:2rem max(2rem, calc((100% - 1400px) / 2))!important;
  }
  .hpv1__nav .ets_mm_megamenu .mm_menus_li.ikara-productos > .mm_columns_ul.ikmm-prod{
    padding:2.4rem max(2rem, calc((100% - 1400px) / 2))!important;
  }
  /* Show on hover/.open — overrides the module's display:block with grid so
     the V1/V2 layouts apply, and beats the base display:none. */
  .hpv1__nav .ets_mm_megamenu .mm_menus_li.ikara-disciplinas:hover > .mm_columns_ul.ikmm-disc,
  .hpv1__nav .ets_mm_megamenu .mm_menus_li.ikara-disciplinas.open > .mm_columns_ul.ikmm-disc,
  .hpv1__nav .ets_mm_megamenu .mm_menus_li.ikara-productos:hover > .mm_columns_ul.ikmm-prod,
  .hpv1__nav .ets_mm_megamenu .mm_menus_li.ikara-productos.open > .mm_columns_ul.ikmm-prod{
    display:grid!important;visibility:visible!important;opacity:1!important;
    pointer-events:auto!important;
  }
  /* Hover bridge: a transparent strip just above the panel that captures the
     mouse while it crosses from the link to the dropdown. Sits inside the
     panel so it inherits its hover/visibility state. */
  .hpv1__nav .ets_mm_megamenu .mm_menus_li.ikara-disciplinas > .mm_columns_ul.ikmm-disc::before,
  .hpv1__nav .ets_mm_megamenu .mm_menus_li.ikara-productos > .mm_columns_ul.ikmm-prod::before{
    content:"";position:absolute;left:0;right:0;top:-24px;height:24px;
    background:transparent;pointer-events:auto;
  }
  /* Strip the module's default 10px gap on every dropdown so hover never
     breaks while moving down from the trigger. */
  .hpv1__nav .ets_mm_megamenu .mm_columns_ul{
    margin-top:0!important;
  }
  /* Extend the trigger's clickable area downwards so the link itself reaches
     the panel — the :hover state on the li never lapses. */
  .hpv1__nav .ets_mm_megamenu .mm_menus_li.mm_has_sub > a.ets_mm_url{
    position:relative;
  }
  .hpv1__nav .ets_mm_megamenu .mm_menus_li.mm_has_sub > a.ets_mm_url::after{
    content:"";position:absolute;left:0;right:0;bottom:-24px;height:24px;
    background:transparent;z-index:1;
  }
}

/* =============================================================================
   ets_megamenu — PRODUCTOS dropdown (V2 Magazine index)
   Same dual-emit pattern as DISCIPLINAS: V1 group on desktop, default mobile
   markup preserved underneath. Activated by custom_class="ikara-productos" or
   title containing "PRODUCTO".
   ========================================================================== */
/* Mobile: hide V2 group, default markup stays */
.mm_menus_li.ikara-productos .ikmm-prod__group,
.mm_menus_li.ikara-productos .ikmm-prod__cta-li{display:none;}
.mm_menus_li.ikara-productos .ikmm-prod__mobile{display:block;}

@media (min-width:992px){
  .mm_menus_li.ikara-productos .ikmm-prod__group{display:block;}
  .mm_menus_li.ikara-productos .ikmm-prod__cta-li{display:block;}
  .mm_menus_li.ikara-productos .ikmm-prod__mobile{display:none!important;}

  /* `display:grid` is applied only on hover (see the rule near the bottom of
     this block) — without it the module's `display:none` keeps the panel
     collapsed. */
  .mm_menus_li.ikara-productos .mm_columns_ul.ikmm-prod{
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr))!important;
    gap:2rem 2.4rem!important;
    width:100%!important;max-width:1400px;margin:0 auto;
    padding:2.4rem!important;
    background:#fff!important;
    border:none!important;list-style:none;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.25);
  }
  .mm_menus_li.ikara-productos .mm_columns_ul.ikmm-prod > .mm_columns_li.ikmm-prod__cell{
    width:auto!important;flex:none!important;
    padding:0!important;margin:0!important;border:none!important;
    background:transparent!important;list-style:none;
  }

  .mm_menus_li.ikara-productos .ikmm-prod__title{
    font-family:'Space Grotesk','Inter',sans-serif!important;font-weight:700!important;
    font-size:.78rem!important;letter-spacing:.18em!important;
    text-transform:uppercase!important;color:#0c0a09!important;
    margin:0 0 1rem!important;padding:0!important;
    display:flex;align-items:center;gap:.5rem;line-height:1.3;
    background:transparent!important;border:none!important;
  }
  .mm_menus_li.ikara-productos .ikmm-prod__title::before{
    content:"";width:24px;height:3px;background:#dc2626;
    transform:skewX(-20deg);flex-shrink:0;display:inline-block;
  }
  .mm_menus_li.ikara-productos .ikmm-prod__list{display:block;}
  .mm_menus_li.ikara-productos .ikmm-prod__list .ets_mm_categories{
    list-style:none;margin:0 0 .55rem;padding:0;
  }
  .mm_menus_li.ikara-productos .ikmm-prod__list .ets_mm_categories > li{
    margin:0 0 .55rem;padding:0;list-style:none;background:transparent!important;
  }
  .mm_menus_li.ikara-productos .ikmm-prod__list .ets_mm_categories a,
  .mm_menus_li.ikara-productos .ikmm-prod__list .ets_mm_categories a.ets_mm_url{
    display:inline-flex!important;align-items:center;gap:.4rem;
    font-size:.85rem!important;color:#44403c!important;font-weight:500!important;
    text-decoration:none!important;letter-spacing:0!important;
    padding:0!important;margin:0!important;background:transparent!important;
    border:none!important;text-transform:none!important;
    transition:color .15s,gap .2s;
  }
  .mm_menus_li.ikara-productos .ikmm-prod__list .ets_mm_categories a::after{
    content:"arrow_forward";font-family:'Material Icons';font-weight:normal;
    font-size:16px;line-height:1;color:#dc2626;
    opacity:0;transform:translateX(-6px);
    transition:opacity .18s,transform .18s;
  }
  .mm_menus_li.ikara-productos .ikmm-prod__list .ets_mm_categories a:hover{
    color:#dc2626!important;gap:.65rem;
  }
  .mm_menus_li.ikara-productos .ikmm-prod__list .ets_mm_categories a:hover::after{
    opacity:1;transform:translateX(0);
  }
  .mm_menus_li.ikara-productos .ikmm-prod__list .arrow,
  .mm_menus_li.ikara-productos .ikmm-prod__list .ets_mm_categories ul{display:none!important;}

  /* Bottom CTA spans all columns */
  .mm_menus_li.ikara-productos .ikmm-prod__cta-li{
    grid-column:1 / -1;
    border-top:1px solid #e7e5e4;
    margin:.5rem 0 0!important;padding:1.4rem 0 0!important;
    list-style:none;background:transparent!important;
  }
  .mm_menus_li.ikara-productos .ikmm-prod__cta{
    display:inline-flex;align-items:center;gap:.5rem;
    font-family:'Space Grotesk','Inter',sans-serif!important;
    font-weight:700!important;font-size:.78rem!important;
    letter-spacing:.15em!important;text-transform:uppercase!important;
    color:#0c0a09!important;text-decoration:none!important;
    transition:color .15s,gap .2s;
    background:transparent!important;border:none!important;padding:0!important;
  }
  .mm_menus_li.ikara-productos .ikmm-prod__cta:hover{color:#dc2626!important;gap:.85rem;}
  .mm_menus_li.ikara-productos .ikmm-prod__cta .material-icons{font-size:18px;}
}

/* =============================================================================
   Password input toggle eye — the theme's `data-ps-action="toggle-password"`
   button inherits .btn-primary which makes it a giant red square next to the
   password field. Slim it down to a square with a subtle border and a grey
   icon that turns red on hover, matching the rest of the form chrome.
   ========================================================================== */
.input-group.password-field{position:relative;}
.input-group.password-field button[data-ps-action="toggle-password"],
.input-group.password-field button.btn.btn-primary[data-ps-action="toggle-password"]{
  background:transparent!important;background-color:transparent!important;
  border:1px solid #e7e5e4!important;color:#78716c!important;
  border-radius:.5rem!important;
  padding:0!important;margin-left:.4rem!important;
  width:42px;height:42px;flex:0 0 42px;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:none!important;
  transition:color .15s,border-color .15s,background .15s;
}
.input-group.password-field button[data-ps-action="toggle-password"]:hover,
.input-group.password-field button[data-ps-action="toggle-password"]:focus{
  background:transparent!important;color:#dc2626!important;
  border-color:#0c0a09!important;
}
.input-group.password-field button[data-ps-action="toggle-password"] .material-icons{
  font-size:20px!important;color:inherit;line-height:1;
}