/* ============================================================
   IRONPULSE — theme.css
   Dirección de arte: DUALIDAD. Home/404 = negro puro cinematográfico.
   Tienda, ficha y comercio = blanco papel tipográfico.
   Display: Anton (mayúsculas, tracking apretado). Texto: Archivo variable.
   Fuentes self-hosted en assets/fonts/ — cero CDN externo.
   ============================================================ */

/* ---------- 1. FUENTES (self-hosted, subsets latin + latin-ext) ---------- */

/* Anton — display. Un solo peso (400). */
@font-face{
  font-family:'Anton';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/anton-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Anton';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/anton-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* Archivo — VARIABLE: un solo archivo por subset cubre 400–700.
   Declarar el peso como RANGO (no tres @font-face que bajan lo mismo 3 veces). */
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 700;
  font-stretch:100%;
  font-display:swap;
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';
  font-style:normal;
  font-weight:400 700;
  font-stretch:100%;
  font-display:swap;
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  font-style:italic;
  font-weight:400 700;
  font-stretch:100%;
  font-display:swap;
  src:url('../fonts/archivo-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo';
  font-style:italic;
  font-weight:400 700;
  font-stretch:100%;
  font-display:swap;
  src:url('../fonts/archivo-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- 2. TOKENS ---------- */
:root{
  /* Paleta cruda — monocroma + UN acento */
  --ink:#0A0A0A;          /* negro puro cinematográfico */
  --ink-2:#121212;
  --ink-3:#1A1A1A;
  --paper:#F2F0EC;        /* blanco papel cálido (no #fff clínico) */
  --paper-2:#E6E3DD;
  --paper-3:#D9D5CD;
  --accent:#C6301A;       /* rojo quirúrgico sobre papel (AA en texto grande) */
  --accent-dark:#FF4A2E;  /* su equivalente sobre negro */
  /* Tinta que va ENCIMA del acento. Un solo acento, dos tintas: sobre el rojo
     oscuro de papel el blanco da 5.5:1, pero sobre el rojo claro de negro sólo
     3.35:1 — ahí la tinta legible es el propio negro (5.9:1). */
  --acc-on:#fff;

  --font-display:'Anton','Arial Narrow',Impact,sans-serif;
  --font-body:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;

  /* Escala de espaciado */
  --sp-1:.5rem;  --sp-2:1rem;   --sp-3:1.5rem; --sp-4:2.5rem;
  --sp-5:4rem;   --sp-6:6rem;   --sp-7:9rem;

  --wrap:1360px;
  --wrap-text:74ch;
  --gutter:clamp(20px,4.5vw,72px);
  --header-h:74px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.16s; --t:.26s; --t-slow:.5s;
}

/* Modo NEGRO — home, 404, bandas invertidas */
.ip-mode-dark,
.ip-inv{
  --bg:var(--ink);
  --bg-2:var(--ink-2);
  --fg:#F2F0EC;
  --muted:#918C85;        /* 6.4:1 sobre #0A0A0A */
  --rule:rgba(242,240,236,.17);
  --rule-strong:rgba(242,240,236,.34);
  --num:#4A4744;          /* números decorativos (aria-hidden) */
  --acc:var(--accent-dark);
  --acc-on:var(--ink);
  --flip-acc:var(--accent); /* acento legible sobre la barra invertida (que acá es papel) */
}

/* Modo PAPEL — tienda, ficha, comercio, páginas */
.ip-mode-paper,
.ip-rev{
  --bg:var(--paper);
  --bg-2:var(--paper-2);
  --fg:#0E0E0E;
  --muted:#57534E;        /* 6.9:1 sobre #F2F0EC */
  --rule:rgba(14,14,14,.16);
  --rule-strong:rgba(14,14,14,.38);
  --num:#A8A29A;
  --acc:var(--accent);
  --acc-on:#fff;
  --flip-acc:var(--accent-dark); /* acento legible sobre la barra invertida (que acá es tinta) */
}

/* ---------- 3. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
/* clip en html mata el scroll horizontal SIN romper position:sticky */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* clip y no hidden: hidden convierte al body en scroll container
     y rompe el position:sticky del header en las páginas papel */
  overflow-x:clip;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;line-height:1.02;font-weight:400}
p{margin:0}
table{border-collapse:collapse}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
/* [hidden] es del navegador (display:none) y PIERDE contra cualquier regla
   de autor que fije display — .ip-btn{display:inline-flex} lo pisaría y el
   botón oculto seguiría a la vista. Se blinda una sola vez, acá. */
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
.ip-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.ip-sr:focus{
  position:fixed;top:10px;left:10px;width:auto;height:auto;clip:auto;
  margin:0;padding:.7rem 1.1rem;background:var(--acc);color:var(--acc-on);z-index:9999;
}

/* ---------- 4. LAYOUT ---------- */
.ip-wrap{width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto}
.ip-wrap--narrow{width:min(100% - var(--gutter)*2,980px);margin-inline:auto}
.ip-main{min-height:40vh;background:var(--bg)}
.ip-section{padding-block:clamp(60px,9vw,140px);background:var(--bg);color:var(--fg)}
.ip-section--tight{padding-block:clamp(40px,6vw,84px)}
/* Bandas invertidas: se pintan solas gracias a los tokens de .ip-inv/.ip-rev */
.ip-inv,.ip-rev{background:var(--bg);color:var(--fg)}

/* Cabecera de sección editorial: número diminuto + título, regla arriba */
.ip-shead{
  display:grid;grid-template-columns:1fr;gap:var(--sp-2);
  border-top:1px solid var(--rule);padding-top:var(--sp-3);
  margin-bottom:clamp(28px,4vw,56px);
}
.ip-shead__num{
  font-family:var(--font-body);font-size:.68rem;font-weight:600;
  letter-spacing:.24em;color:var(--num);font-variant-numeric:tabular-nums;
}
.ip-shead__title{
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:-.02em;line-height:.94;
  font-size:clamp(2rem,5.2vw,4.2rem);
}
.ip-shead__sub{color:var(--muted);max-width:52ch;font-size:1rem}

/* Microcaps: la etiqueta pequeña de todo el sitio */
.ip-caps{
  font-size:.66rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);
}
.ip-caps--acc{color:var(--acc)}

/* ---------- 5. TIPOGRAFÍA ---------- */
.ip-display{
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:-.022em;line-height:.9;
}
.ip-h1{font-size:clamp(2.7rem,.6rem + 9.4vw,8.4rem)}
.ip-h2{font-size:clamp(2rem,5.2vw,4.4rem)}
.ip-h3{font-size:clamp(1.35rem,3vw,2.1rem)}
.ip-lead{color:var(--muted);font-size:clamp(1.02rem,1.5vw,1.2rem);max-width:56ch}

/* El quiebre del titular: una palabra en ITÁLICA de la sans de texto.
   Archivo italic es más ancha que Anton: se compensa el cuerpo para que
   ópticamente lean del mismo tamaño. NO es serif (eso es de otro sitio). */
.ip-em{
  font-family:var(--font-body);
  font-style:italic;font-weight:600;
  text-transform:none;letter-spacing:-.035em;
  font-size:.9em;
}

/* Palabra larga del CMS no debe empujar la caja en flex/grid */
.ip-display,.ip-idx__name,.ip-shead__title{overflow-wrap:anywhere}

/* ---------- 6. BOTONES Y ENLACES ---------- */
.ip-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  padding:1rem 1.9rem;border-radius:0;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--fg);background:transparent;color:var(--fg);
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.ip-btn:hover,.ip-btn:focus-visible{background:var(--fg);color:var(--bg)}
.ip-btn--solid{background:var(--fg);color:var(--bg)}
.ip-btn--solid:hover,.ip-btn--solid:focus-visible{background:transparent;color:var(--fg)}
.ip-btn--acc{background:var(--acc);border-color:var(--acc);color:var(--acc-on)}
.ip-btn--acc:hover,.ip-btn--acc:focus-visible{background:transparent;color:var(--acc)}
.ip-btn--block{width:100%}
.ip-btn--sm{padding:.7rem 1.2rem;font-size:.68rem}
.ip-btn[disabled]{opacity:.45;pointer-events:none}
.ip-btn svg{width:15px;height:15px;flex:none}

/* Subrayado animado: la micro-interacción base del sitio */
.ip-ul{
  position:relative;display:inline-block;padding-bottom:2px;
}
.ip-ul::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform var(--t) var(--ease-out);
}
.ip-ul:hover::after,.ip-ul:focus-visible::after{transform:scaleX(1);transform-origin:left center}

.ip-arrow{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;font-size:.92rem}
.ip-arrow svg{width:16px;height:16px;transition:transform var(--t) var(--ease)}
.ip-arrow:hover svg{transform:translateX(5px)}

/* ---------- 7. REVEAL ON SCROLL ----------
   Progresivo: el contenido es VISIBLE por defecto. Sólo con JS activo
   (.js) y sin prefers-reduced-motion se oculta para animarse.
   El failsafe va POR ELEMENTO en JS: un failsafe global no cubre el
   caso de saltar el scroll y deja elementos en opacity:0. */
.ip-reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  .js .ip-reveal{
    opacity:0;transform:translateY(22px);
    transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
    transition-delay:calc(var(--d,0) * 70ms);
  }
  .js .ip-reveal.is-in{opacity:1;transform:none}
}

/* ---------- 8. HEADER ---------- */
.ip-topbar{
  background:var(--bg);color:var(--muted);
  border-bottom:1px solid var(--rule);
  font-size:.64rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
}
.ip-topbar__inner{
  width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto;
  padding-block:.65rem;display:flex;justify-content:space-between;gap:1rem;
}
.ip-topbar b{color:var(--fg);font-weight:700}
.ip-topbar__aside{display:none}

.ip-header{
  position:sticky;top:0;z-index:60;
  background:var(--bg);border-bottom:1px solid var(--rule);
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease);
}
/* En la home el header flota SOBRE la foto: transparente y sin regla */
.ip-front .ip-header{
  position:fixed;left:0;right:0;background:transparent;border-bottom-color:transparent;
}
.ip-front .ip-header.is-stuck{
  background:rgba(10,10,10,.92);border-bottom-color:var(--rule);
}
@supports (backdrop-filter:blur(8px)){
  .ip-front .ip-header.is-stuck{backdrop-filter:blur(10px)}
}
.ip-header__inner{
  width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto;
  min-height:var(--header-h);
  display:flex;align-items:center;gap:clamp(16px,3vw,48px);
}
.ip-wordmark{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:1.16rem;letter-spacing:.02em;line-height:1;
  color:var(--fg);flex:none;
}
.ip-wordmark:hover{color:var(--acc)}

.ip-nav{margin-left:auto}
.ip-nav ul{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px)}
.ip-nav a{
  position:relative;display:inline-block;padding:.35rem 0;
  font-size:.82rem;font-weight:500;letter-spacing:.01em;color:var(--fg);
}
.ip-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right center;
  transition:transform var(--t) var(--ease-out);
}
.ip-nav a:hover::after,.ip-nav a:focus-visible::after,
.ip-nav .current-menu-item>a::after{transform:scaleX(1);transform-origin:left center}
.ip-nav .current-menu-item>a{color:var(--fg)}

.ip-actions{display:flex;align-items:center;gap:clamp(12px,1.6vw,24px);flex:none}
.ip-act{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg);background:none;border:0;padding:.35rem 0;
}
.ip-act__n{font-variant-numeric:tabular-nums;color:var(--acc)}
.ip-act__n[data-empty="1"]{color:var(--muted)}

.ip-burger{display:none;background:none;border:0;padding:.4rem 0}
.ip-burger span{
  display:block;width:24px;height:1.5px;background:var(--fg);
  transition:transform var(--t) var(--ease),opacity var(--t) var(--ease);
}
.ip-burger span+span{margin-top:6px}
.ip-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.ip-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.ip-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Panel de búsqueda */
.ip-search{
  display:grid;grid-template-rows:0fr;
  overflow:hidden;background:var(--bg);border-bottom:1px solid transparent;
  transition:grid-template-rows var(--t) var(--ease),border-color var(--t) var(--ease);
}
.ip-search.is-open{grid-template-rows:1fr;border-bottom-color:var(--rule)}
.ip-search__in{min-height:0;overflow:hidden}
.ip-search form{
  width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto;
  display:flex;gap:1rem;padding-block:1.4rem;align-items:center;
}
.ip-search input[type="search"]{
  flex:1;min-width:0;background:transparent;border:0;
  border-bottom:1px solid var(--rule-strong);
  color:var(--fg);font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.2rem,3vw,2rem);letter-spacing:-.01em;padding:.4rem 0;
}
.ip-search input[type="search"]:focus{outline:0;border-bottom-color:var(--acc)}
.ip-search input::placeholder{color:var(--num)}

/* Header camaleónico (referencia RDA: nav con mix-blend-difference).
   El blend vive en el PROPIO sticky: un hijo no escapa del stacking
   context que sticky siempre crea. Exige barra sin fondo y contenido en
   blanco puro — difference lo invierte contra lo que pase por detrás
   (foto del hero, papel, filas del índice al scrollear).
   Con el buscador abierto el panel necesita fondo real: el JS marca
   .is-search-open y el header vuelve a componer normal. */
@supports (mix-blend-mode:difference){
  .ip-header:not(.is-search-open){
    background:transparent;border-bottom-color:transparent;
    mix-blend-mode:difference;
  }
  .ip-front .ip-header:not(.is-search-open).is-stuck{
    background:transparent;border-bottom-color:transparent;backdrop-filter:none;
  }
  .ip-header:not(.is-search-open) .ip-wordmark,
  .ip-header:not(.is-search-open) .ip-nav a,
  .ip-header:not(.is-search-open) .ip-nav .current-menu-item>a,
  .ip-header:not(.is-search-open) .ip-act{color:#fff}
  .ip-header:not(.is-search-open) .ip-burger span{background:#fff}
  .ip-header:not(.is-search-open) .ip-act__n{color:#fff}
  .ip-header:not(.is-search-open) .ip-act__n[data-empty="1"]{color:#9a9a9a}
  /* el rojo dentro de difference daría cian sobre papel: hover monocromo */
  .ip-header:not(.is-search-open) .ip-wordmark:hover{color:#fff;opacity:.66}
}

/* Drawer móvil — cerrado va con visibility:hidden o sus links siguen
   siendo focusables; el transition-delay evita matar la animación. */
.ip-drawer{
  position:fixed;inset:0 0 0 auto;width:min(88vw,420px);z-index:80;
  background:var(--ink);color:#F2F0EC;
  --bg:var(--ink);--fg:#F2F0EC;--muted:#918C85;--rule:rgba(242,240,236,.17);--acc:var(--accent-dark);--acc-on:var(--ink);
  transform:translateX(100%);visibility:hidden;
  display:flex;flex-direction:column;
  padding:var(--sp-3) var(--sp-3) var(--sp-4);
  transition:transform var(--t-slow) var(--ease-out),visibility 0s linear var(--t-slow);
}
.ip-drawer.is-open{transform:none;visibility:visible;transition-delay:0s}
.ip-drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4)}
.ip-drawer__close{background:none;border:0;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.ip-drawer nav ul{display:flex;flex-direction:column}
.ip-drawer nav a{
  display:block;padding:.85rem 0;border-bottom:1px solid var(--rule);
  font-family:var(--font-display);text-transform:uppercase;font-size:1.5rem;letter-spacing:-.01em;
}
.ip-drawer nav a:hover{color:var(--acc)}
.ip-drawer__foot{margin-top:auto;padding-top:var(--sp-3);display:grid;gap:.8rem}
.ip-drawer__foot .ip-caps{color:var(--muted)}
.ip-scrim{
  position:fixed;inset:0;z-index:70;background:rgba(10,10,10,.6);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-slow) var(--ease),visibility 0s linear var(--t-slow);
}
.ip-scrim.is-open{opacity:1;visibility:visible;transition-delay:0s}

/* ---------- 9. HERO (home, negro puro) ---------- */
.ip-hero{
  position:relative;isolation:isolate;
  min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  background:#000;color:#F2F0EC;overflow:hidden;
  padding-top:calc(var(--header-h) + 2rem);
  padding-bottom:clamp(28px,4vw,56px);
}
.ip-hero__media{position:absolute;inset:0;z-index:-2}
.ip-hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 38%;
  filter:brightness(1.06) contrast(1.04);
}
/* Velo en cuatro tramos: el superior es para que el nav no caiga sobre
   la parte clara de la foto. */
.ip-hero__veil{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(0deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.72) 34%,rgba(0,0,0,.28) 68%,rgba(0,0,0,.74) 100%),
    radial-gradient(120% 80% at 78% 30%,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 100%);
}
.ip-hero__inner{
  width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto;
  display:grid;gap:clamp(20px,3vw,40px);
}
.ip-hero__title{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(2.6rem,.2rem + 8.4vw,7.4rem);
  line-height:.88;letter-spacing:-.028em;
  max-width:15ch;
}
.ip-hero__title .ip-em{color:#F2F0EC}
.ip-hero__foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-3);border-top:1px solid rgba(242,240,236,.22);padding-top:var(--sp-3);
}
.ip-hero__sub{color:#C9C4BC;max-width:42ch;font-size:1rem}
.ip-hero__stats{display:flex;gap:clamp(20px,4vw,64px);flex-wrap:wrap}
.ip-hero__stat b{
  display:block;font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.4rem);
  letter-spacing:-.02em;line-height:1;font-weight:400;
}
.ip-hero__stat span{
  display:block;margin-top:.35rem;font-size:.62rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:#918C85;
}
.ip-hero__cta{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.ip-hero .ip-btn{border-color:rgba(242,240,236,.45);background:rgba(10,10,10,.25);color:#F2F0EC}
.ip-hero .ip-btn:hover,.ip-hero .ip-btn:focus-visible{background:#F2F0EC;color:#0A0A0A;border-color:#F2F0EC}

/* ---------- 10. MARQUEE (social proof) ----------
   La duración la calcula el JS a px/s constante: si el cliente carga más
   claims, la cinta NO acelera. --dur lo escribe JS sobre el track. */
.ip-marquee{
  border-block:1px solid var(--rule);
  padding-block:clamp(14px,1.6vw,22px);
  overflow:hidden;position:relative;
  background:var(--bg);color:var(--fg);
}
.ip-marquee__track{
  display:flex;width:max-content;
  will-change:transform;
  animation:ip-scroll var(--dur,40s) linear infinite;
}
.ip-marquee:hover .ip-marquee__track,
.ip-marquee:focus-within .ip-marquee__track{animation-play-state:paused}
.ip-marquee__grp{display:flex;flex:none}
.ip-marquee__item{
  display:inline-flex;align-items:center;gap:1.4rem;flex:none;
  padding-inline:1.6rem;
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1rem,2vw,1.5rem);letter-spacing:-.01em;white-space:nowrap;
}
.ip-marquee__item::after{content:"";width:6px;height:6px;background:var(--acc);flex:none}
@keyframes ip-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){
  .ip-marquee__track{animation:none;width:100%;overflow-x:auto}
  .ip-marquee__grp[aria-hidden="true"]{display:none}
}

/* ---------- 11. ÍNDICE TIPOGRÁFICO (tienda + equipos en home) ---------- */
.ip-idx{border-top:1px solid var(--rule)}
.ip-idx__row{
  position:relative;display:flex;align-items:baseline;gap:clamp(10px,1.6vw,22px);
  padding-block:clamp(12px,1.8vw,26px);
  border-bottom:1px solid var(--rule);
  color:var(--fg);
  transition:color var(--t) var(--ease),padding-left var(--t) var(--ease-out);
}
/* Alineación ALTERNADA — el gesto editorial de la referencia.
   :nth-child es el default sin JS; con JS filtrado se reasigna .is-aN
   porque display:none NO reindexa :nth-child y la alternancia se rompería.
   Las clases van DESPUÉS para ganar por orden de fuente (misma especificidad). */
.ip-idx__row:nth-child(3n+1){justify-content:flex-start}
.ip-idx__row:nth-child(3n+2){justify-content:center}
.ip-idx__row:nth-child(3n+3){justify-content:flex-end}
.ip-idx__row.is-a1{justify-content:flex-start}
.ip-idx__row.is-a2{justify-content:center}
.ip-idx__row.is-a3{justify-content:flex-end}
.ip-idx__num{
  font-size:.6rem;font-weight:600;letter-spacing:.1em;color:var(--num);
  font-variant-numeric:tabular-nums;align-self:flex-end;
  padding-bottom:.55em;flex:none;
}
.ip-idx__name{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.6rem,5.4vw,4.6rem);line-height:.92;letter-spacing:-.025em;
  min-width:0;
}
.ip-idx__meta{
  font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);align-self:flex-end;padding-bottom:.7em;flex:none;
}
.ip-idx__price{
  font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--acc);
  align-self:flex-end;padding-bottom:.65em;flex:none;font-variant-numeric:tabular-nums;
}
.ip-idx__row:hover,.ip-idx__row:focus-visible{color:var(--acc);outline:0}
.ip-idx__row:focus-visible .ip-idx__name{text-decoration:underline;text-underline-offset:.12em}
.ip-idx__thumb{display:none}

/* Imagen fantasma que sigue al cursor (escritorio, dispositivo con hover) */
.ip-idx__ghost{
  position:fixed;top:0;left:0;z-index:40;pointer-events:none;
  width:min(21vw,258px);aspect-ratio:4/5;
  opacity:0;transform:translate3d(-50%,-50%,0) scale(.94);
  transition:opacity .3s var(--ease),transform .45s var(--ease-out);
  overflow:hidden;background:var(--bg-2);
}
.ip-idx__ghost img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.ip-idx__ghost.is-on{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
.ip-idx__ghost.is-on img{filter:none;transition:filter .5s var(--ease)}
@media (hover:none),(prefers-reduced-motion:reduce){
  .ip-idx__ghost{display:none}
}

/* Filtros del índice (FLIP) */
.ip-filters{
  display:flex;flex-wrap:wrap;gap:0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  margin-bottom:clamp(24px,4vw,52px);
}
.ip-filter{
  background:none;border:0;padding:.95rem clamp(12px,1.8vw,24px);
  font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);position:relative;
  transition:color var(--t) var(--ease);
}
.ip-filter+.ip-filter{border-left:1px solid var(--rule)}
.ip-filter::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--acc);transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t) var(--ease-out);
}
.ip-filter:hover{color:var(--fg)}
.ip-filter[aria-pressed="true"]{color:var(--fg)}
.ip-filter[aria-pressed="true"]::after{transform:scaleX(1)}
/* --muted, no --num: el contador informa (cuántos ítems), no decora; con --num
   daba 2,2:1 sobre papel (qa-hover, 15-sep). --muted es 6,9:1 en papel y 6,4:1
   en negro, en las dos paletas. */
.ip-filter__n{color:var(--muted);margin-left:.5em;font-variant-numeric:tabular-nums}
.ip-idx__row.is-out{display:none}
.ip-idx__empty{
  padding-block:clamp(40px,7vw,90px);text-align:center;color:var(--muted);
  border-bottom:1px solid var(--rule);
}
.ip-idx__empty b{display:block;font-family:var(--font-display);text-transform:uppercase;
  font-size:1.6rem;color:var(--fg);margin-bottom:.5rem}

/* ---------- 12. MANIFIESTO / REJILLA DE REGLAS ---------- */
.ip-manifest{
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--rule);
}
.ip-manifest__item{
  border-bottom:1px solid var(--rule);
  padding:clamp(24px,3.4vw,48px) 0;
  display:grid;gap:.9rem;
}
.ip-manifest__k{
  font-size:.62rem;font-weight:600;letter-spacing:.24em;color:var(--num);
  font-variant-numeric:tabular-nums;
}
.ip-manifest__item h3{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.4rem,3vw,2.2rem);letter-spacing:-.02em;line-height:.96;
}
.ip-manifest__item p{color:var(--muted);max-width:46ch;font-size:.98rem}

/* Sección que ROMPE la grilla: cifras gigantes tiradas al margen */
.ip-figures{display:grid;gap:0;border-top:1px solid var(--rule)}
.ip-figure{
  border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:1fr;gap:.4rem;
  padding-block:clamp(22px,3vw,40px);
}
.ip-figure b{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(3.4rem,13vw,11rem);line-height:.82;letter-spacing:-.04em;
  color:var(--num);
}
.ip-figure span{color:var(--muted);font-size:.95rem;max-width:34ch}
.ip-figure:nth-child(even){text-align:right;justify-items:end}
.ip-figure:nth-child(even) span{text-align:right}

/* ---------- 13. WIZARD "ASESOR IRONPULSE" ---------- */
.ip-wiz{max-width:900px}
.ip-wiz__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-bottom:1px solid var(--rule);padding-bottom:.9rem;margin-bottom:var(--sp-4);
}
.ip-wiz__prog{
  font-size:.68rem;font-weight:700;letter-spacing:.2em;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.ip-wiz__prog b{color:var(--acc)}
.ip-wiz__bar{height:2px;background:var(--rule);position:relative;margin-bottom:var(--sp-4)}
.ip-wiz__bar i{
  position:absolute;inset:0 auto 0 0;background:var(--acc);
  width:calc(var(--p,1) / 3 * 100%);
  transition:width var(--t-slow) var(--ease-out);
}
/* <legend> tiene un box model propio y no participa del grid como un hijo
   normal: el fieldset va en block y los márgenes se reparten a mano. */
.ip-wiz__step{display:block}
.ip-wiz__legend{
  display:block;width:100%;float:left;
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,2.6rem);letter-spacing:-.02em;line-height:.96;
  padding:0;margin:0 0 .6rem;
}
.ip-wiz__legend:focus{outline:none}
.ip-wiz fieldset{border:0;padding:0;margin:0;min-width:0}
.ip-wiz__hint{color:var(--muted);font-size:.92rem;margin-bottom:1.6rem}
.ip-wiz__opts+.ip-caps{display:block;margin-top:1.8rem;margin-bottom:.6rem}
.ip-wiz__reco{margin-bottom:1.8rem}

/* Opciones: filas con regla de 1px, NO píldoras en serie */
.ip-wiz__opts{display:grid;gap:0;border-top:1px solid var(--rule)}
.ip-wiz__opt{
  display:flex;align-items:center;gap:1rem;
  padding:1rem .2rem;border-bottom:1px solid var(--rule);
  cursor:pointer;transition:padding-left var(--t) var(--ease-out),color var(--t) var(--ease);
}
.ip-wiz__opt:hover{padding-left:.9rem;color:var(--acc)}
.ip-wiz__opt input{
  appearance:none;width:14px;height:14px;flex:none;margin:0;
  border:1px solid var(--rule-strong);border-radius:50%;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.ip-wiz__opt input:checked{
  border-color:var(--acc);box-shadow:inset 0 0 0 3px var(--bg),inset 0 0 0 14px var(--acc);
}
.ip-wiz__opt input:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.ip-wiz__opt b{
  font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.05rem,2.1vw,1.5rem);letter-spacing:-.01em;line-height:1;
}
.ip-wiz__opt span{color:var(--muted);font-size:.85rem;margin-left:auto;text-align:right}
.ip-wiz__opt:has(input:checked){color:var(--acc)}
.ip-wiz__opt:has(input:checked) span{color:var(--muted)}

/* Campos de contacto */
.ip-fields{display:grid;gap:var(--sp-3);grid-template-columns:1fr}
.ip-field{display:grid;gap:.4rem;min-width:0}
.ip-field>label{
  font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.ip-field input,.ip-field textarea,.ip-field select{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule-strong);
  color:var(--fg);font-family:var(--font-body);font-size:1.02rem;padding:.6rem 0;border-radius:0;
  transition:border-color var(--t) var(--ease);
}
.ip-field input:focus,.ip-field textarea:focus{outline:0;border-bottom-color:var(--acc)}
.ip-field textarea{resize:vertical;min-height:90px}
.ip-field--full{grid-column:1/-1}
.ip-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ip-wiz__nav{
  display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding-top:var(--sp-3);margin-top:var(--sp-2);
}
.ip-wiz__nav .ip-wiz__back{margin-right:auto}
.ip-wiz__back{
  background:none;border:0;font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);padding:.5rem 0;
}
.ip-wiz__back:hover{color:var(--fg)}
.ip-wiz__back[hidden]{display:none}

/* Recomendación en vivo */
.ip-wiz__reco{
  border:1px solid var(--rule);padding:var(--sp-3);
  display:grid;gap:.5rem;
}
.ip-wiz__reco[hidden]{display:none}
.ip-wiz__reco b{
  font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:-.02em;
}
.ip-wiz__reco p{color:var(--muted);font-size:.9rem}

/* Aviso de resultado */
.ip-note{
  border-left:2px solid var(--acc);padding:1rem 1.2rem;background:var(--bg-2);
  display:grid;gap:.3rem;
}
.ip-note b{font-weight:700}
.ip-note p{color:var(--muted);font-size:.92rem}
.ip-note--err{border-left-color:#B3261E}
.ip-wiz__done{display:grid;gap:var(--sp-2);justify-items:start}

/* ---------- 14. FICHA DE PRODUCTO (papel) ---------- */
/* minmax(0,1fr), NUNCA 1fr a secas: el mínimo automático de una pista de
   grid es el min-content de sus ítems, y el carrusel de accesorios (fila
   flex de 7 tarjetas) arrastraba la columna a 1680px dentro de un
   contenedor de 637. No se veía como desbordo de página porque el
   overflow-x:hidden del body lo tapaba: sólo recortaba el contenido. */
.single-product div.product{
  display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,64px);
  padding-block:clamp(24px,3vw,48px);
}
.single-product div.product > *{min-width:0}
/* Sólo la galería y el resumen reparten las dos columnas. Todo lo que Woo
   inyecta después (ficha técnica, clases, conocé, detalles, FAQ, accesorios
   y la navegación prev/next) son hijos directos de div.product y, sin esto,
   se acomodaban de a dos por fila dentro del grid. */
.single-product div.product > .ip-rich,
.single-product div.product > .ip-pnav,
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .upsells{grid-column:1/-1}
.single-product .woocommerce-product-gallery{margin:0;min-width:0;float:none;width:auto}
.single-product .woocommerce-product-gallery__wrapper{margin:0}
.single-product .woocommerce-product-gallery__image{margin:0}
.single-product .woocommerce-product-gallery__image img{
  width:100%;height:auto;display:block;background:var(--bg-2);
}
.single-product .woocommerce-product-gallery__image a{display:block}
.single-product .flex-control-thumbs{
  display:flex;gap:.6rem;margin-top:.6rem;padding:0;list-style:none;flex-wrap:wrap;
}
.single-product .flex-control-thumbs li{width:72px}
.single-product .flex-control-thumbs img{
  width:100%;height:auto;cursor:pointer;opacity:.5;transition:opacity var(--t) var(--ease);
}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover{opacity:1}
.single-product .woocommerce-product-gallery__trigger{display:none}

.single-product .summary{margin:0;min-width:0;float:none;width:auto;display:grid;gap:1.1rem;align-content:start}
.single-product .product_title{
  font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(2.1rem,5vw,3.8rem);line-height:.9;letter-spacing:-.028em;margin:0;
  overflow-wrap:anywhere;
}
.single-product .price{
  font-family:var(--font-body);font-size:1.5rem;font-weight:700;color:var(--acc);
  margin:0;font-variant-numeric:tabular-nums;
}
.single-product .price del{color:var(--muted);font-weight:400;font-size:1rem;margin-right:.5rem}
.single-product .price ins{text-decoration:none}
.single-product .woocommerce-product-details__short-description{color:var(--muted);max-width:52ch}
.single-product .woocommerce-product-details__short-description p+p{margin-top:.7rem}

.single-product form.cart{display:grid;gap:1rem;margin:0;align-items:end}
.single-product form.cart .quantity{display:inline-flex;align-items:center}
.single-product .quantity input.qty{
  width:78px;background:transparent;border:1px solid var(--rule-strong);
  color:var(--fg);padding:.85rem .5rem;text-align:center;border-radius:0;font-family:var(--font-body);
}
.single-product form.cart .button,
.single-product .single_add_to_cart_button,
.single-product .ip-buy-now{
  display:inline-flex;align-items:center;justify-content:center;
  padding:1rem 1.9rem;border-radius:0;font-family:var(--font-body);
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--acc);background:var(--acc);color:#fff;
  transition:background var(--t) var(--ease),color var(--t) var(--ease);
}
.single-product .single_add_to_cart_button:hover,
.single-product form.cart .button:hover{background:transparent;color:var(--acc)}
.single-product .ip-buy-now{background:transparent;color:var(--fg);border-color:var(--fg)}
.single-product .ip-buy-now:hover{background:var(--fg);color:var(--bg)}
.single-product .variations{width:100%;margin:0;border:0}
.single-product .variations tr{display:grid;gap:.35rem;padding-block:.6rem}
.single-product .variations td,.single-product .variations th{
  display:block;padding:0;border:0;text-align:left;background:none;
}
.single-product .variations th.label label,
.single-product .variations td.label label{
  font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.single-product .variations select{
  width:100%;max-width:340px;background:transparent;border:0;
  border-bottom:1px solid var(--rule-strong);color:var(--fg);
  padding:.6rem 0;border-radius:0;font-family:var(--font-body);font-size:1rem;
}
.single-product .reset_variations{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.single-product .woocommerce-variation-price{margin-block:.6rem}
.single-product .product_meta{
  border-top:1px solid var(--rule);padding-top:1rem;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:grid;gap:.35rem;
}
.single-product .product_meta a{color:var(--fg)}
.single-product .product_meta a:hover{color:var(--acc)}

/* Checklist de garantías en el summary */
.ip-summary-feats{display:grid;gap:.55rem;border-top:1px solid var(--rule);padding-top:1rem}
.ip-summary-feats li{
  display:flex;gap:.7rem;align-items:flex-start;font-size:.92rem;color:var(--muted);
}
.ip-summary-feats li svg{width:14px;height:14px;flex:none;margin-top:.32rem;color:var(--acc)}
.ip-summary-pay{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.ip-summary-pay{color:var(--muted)}
.ip-summary-pay svg{height:22px;width:auto;opacity:.8}

/* Tabla de specs editorial — reglas finas, etiqueta / valor */
.ip-specs{width:100%;border-top:1px solid var(--rule)}
.ip-specs tr{border-bottom:1px solid var(--rule)}
.ip-specs th,.ip-specs td{
  padding:.95rem 0;text-align:left;vertical-align:baseline;font-weight:400;
}
.ip-specs th{
  width:42%;font-size:.66rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);padding-right:1rem;
}
.ip-specs td{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(.95rem,1.8vw,1.25rem);letter-spacing:-.005em;
  overflow-wrap:anywhere;
}

/* Secciones ricas de la ficha */
.ip-rich{padding-block:clamp(40px,6vw,90px);border-top:1px solid var(--rule)}
.ip-rich__grid{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule)}
.ip-rich-item{border-bottom:1px solid var(--rule);padding:clamp(20px,2.6vw,36px) 0;display:grid;gap:.7rem}
.ip-rich-item__k{font-size:.62rem;font-weight:600;letter-spacing:.24em;color:var(--num);font-variant-numeric:tabular-nums}
.ip-rich-item h3{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.2rem,2.4vw,1.8rem);letter-spacing:-.02em}
.ip-rich-item p{color:var(--muted);font-size:.96rem;max-width:48ch}

/* FAQ */
.ip-faq{border-top:1px solid var(--rule)}
.ip-faq__item{border-bottom:1px solid var(--rule)}
.ip-faq__q{
  width:100%;background:none;border:0;padding:1.2rem 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;
  font-family:var(--font-display);text-transform:uppercase;text-align:left;
  font-size:clamp(1rem,2vw,1.4rem);letter-spacing:-.01em;color:var(--fg);
  transition:color var(--t) var(--ease);
}
.ip-faq__q:hover{color:var(--acc)}
.ip-faq__sign{flex:none;font-family:var(--font-body);font-size:1.1rem;color:var(--acc);transition:transform var(--t) var(--ease)}
.ip-faq__item.is-open .ip-faq__sign{transform:rotate(45deg)}
.ip-faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-slow) var(--ease-out)}
.ip-faq__item.is-open .ip-faq__a{grid-template-rows:1fr}
.ip-faq__a>div{min-height:0;overflow:hidden}
.ip-faq__a p{color:var(--muted);padding-bottom:1.3rem;max-width:62ch}

/* Navegación producto anterior / siguiente */
.ip-pnav{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.ip-pnav__side{
  padding:clamp(20px,3vw,42px) clamp(14px,2vw,28px);display:grid;gap:.5rem;
  transition:background var(--t) var(--ease);min-width:0;
}
.ip-pnav__side+.ip-pnav__side{border-left:1px solid var(--rule)}
.ip-pnav__side:hover{background:var(--bg-2)}
.ip-pnav__side--next{text-align:right;justify-items:end}
/* El lado sin vecino se apaga con COLOR, no con opacity: un opacity:.4 sobre
   --muted deja el "← Anterior" en 1.87:1. Con --muted a plena opacidad son
   6.9:1 y la diferencia con el lado activo la marca el nombre en --muted
   (el activo va en --fg) más el guion largo como marcador. */
.ip-pnav__side--empty{color:var(--muted);pointer-events:none}
.ip-pnav__k{font-size:.62rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.ip-pnav__name{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.1rem,2.6vw,2rem);letter-spacing:-.02em;line-height:.96;
  overflow-wrap:anywhere;
}
.ip-pnav__side:hover .ip-pnav__name{color:var(--acc)}

/* Carrusel de accesorios */
.ip-carousel{position:relative}
.ip-carousel__track{
  display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
  border-top:1px solid var(--rule);scrollbar-width:thin;
}
.ip-acc{
  flex:0 0 clamp(200px,30vw,280px);scroll-snap-align:start;
  border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);
  padding:1.2rem;display:grid;gap:.5rem;align-content:start;min-width:0;
}
/* El enlace de la foto sangra la caja de la tarjeta: el negativo va en el
   <a> (hijo directo), no en el span, o el recorte no coincide. */
.ip-acc>a:first-child{display:block;margin:-1.2rem -1.2rem .8rem}
.ip-acc__media{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.ip-acc__media img,.ip-acc__media svg{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1);
  transition:filter var(--t-slow) var(--ease),transform var(--t-slow) var(--ease-out);
}
.ip-acc:hover .ip-acc__media img{filter:none;transform:scale(1.04)}
.ip-acc h3 a:hover{color:var(--acc)}
.ip-acc h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.05rem;letter-spacing:-.01em;overflow-wrap:anywhere}
.ip-acc__price{color:var(--acc);font-weight:700;font-size:.9rem}
.ip-carousel__nav{display:flex;gap:.5rem;margin-top:1rem;justify-content:flex-end}
.ip-carousel__btn{
  width:42px;height:42px;border:1px solid var(--rule-strong);background:transparent;
  display:grid;place-items:center;transition:background var(--t) var(--ease),color var(--t) var(--ease);
}
.ip-carousel__btn:hover:not(:disabled){background:var(--fg);color:var(--bg)}
.ip-carousel__btn:disabled{opacity:.3;cursor:default}
.ip-carousel__btn svg{width:16px;height:16px}
.ip-carousel__btn:first-child svg{transform:rotate(180deg)}

/* Poster de video (clases guiadas de la ficha) */
.ip-clases{display:grid;gap:clamp(20px,3vw,48px);align-items:center}
.ip-poster{
  position:relative;display:block;width:100%;padding:0;border:0;background:var(--bg-2);
  aspect-ratio:16/9;overflow:hidden;
}
.ip-poster img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter var(--t-slow) var(--ease),transform var(--t-slow) var(--ease-out)}
.ip-poster svg{width:min(50%,180px);height:auto;margin:auto;opacity:.35}
.ip-poster:hover img{filter:none;transform:scale(1.03)}
.ip-poster__play{
  position:absolute;inset:auto auto 1rem 1rem;
  width:56px;height:56px;border-radius:50%;background:var(--acc);color:#fff;
  display:grid;place-items:center;
  transition:transform var(--t) var(--ease-out);
}
.ip-poster:hover .ip-poster__play{transform:scale(1.1)}
.ip-poster__play svg{width:16px;height:16px;margin:0;opacity:1}
.ip-pay-icons{display:inline-flex;gap:.5rem;align-items:center}
.ip-pay-icons svg{height:20px;width:auto;opacity:.6}

/* Ordenamiento nativo de Woo, en clave editorial */
.woocommerce-ordering select{
  background:transparent;border:0;border-bottom:1px solid var(--rule-strong);
  color:var(--fg);font-family:var(--font-body);border-radius:0;
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:.5rem 0;
}
.woocommerce-result-count{display:none}

/* ---------- 15. WOOCOMMERCE GENÉRICO (papel) ---------- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,
.wc-block-components-notice-banner{
  border:0;border-left:2px solid var(--acc);background:var(--bg-2);
  color:var(--fg);padding:1rem 1.2rem;border-radius:0;margin-bottom:var(--sp-3);
  list-style:none;
}
.woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none}
.woocommerce-message a,.woocommerce-info a{text-decoration:underline;text-underline-offset:.2em}
.woocommerce-error{border-left-color:#B3261E}

.ip-page-title,.woocommerce-cart .entry-title,.woocommerce-checkout .entry-title{
  font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.026em;line-height:.94;
  margin-bottom:var(--sp-3);
}
.woocommerce table.shop_table{
  border:0;border-top:1px solid var(--rule);border-radius:0;width:100%;
}
.woocommerce table.shop_table th{
  font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);padding:.9rem .6rem;border-bottom:1px solid var(--rule);text-align:left;
}
.woocommerce table.shop_table td{padding:1.1rem .6rem;border-bottom:1px solid var(--rule);border-top:0}
.woocommerce table.shop_table td.product-name a{font-weight:600}
.woocommerce table.shop_table td.product-name a:hover{color:var(--acc)}
.woocommerce a.remove{color:var(--muted);font-size:1.1rem;border-radius:0}
.woocommerce a.remove:hover{color:var(--acc);background:none}
.woocommerce .cart_totals h2,.woocommerce-checkout h3,.woocommerce #order_review_heading{
  font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(1.3rem,2.6vw,1.9rem);letter-spacing:-.02em;margin-bottom:1rem;
}
.woocommerce .cart_totals .order-total .amount{color:var(--acc);font-size:1.25rem}
.ip-cart-thumb{display:block;width:64px}
.ip-cart-thumb svg{width:100%;height:auto}

/* Botones Woo clásicos → lenguaje IRONPULSE */
.woocommerce .button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button,.woocommerce #respond input#submit,
.woocommerce button.button.alt,.woocommerce #place_order,
.woocommerce .checkout-button,.woocommerce a.checkout-button{
  border-radius:0;font-family:var(--font-body);
  font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:1rem 1.7rem;border:1px solid var(--fg);background:transparent;color:var(--fg);
  transition:background var(--t) var(--ease),color var(--t) var(--ease);
}
.woocommerce .button:hover,.woocommerce button.button:hover,
.woocommerce a.button:hover,.woocommerce input.button:hover{background:var(--fg);color:var(--bg)}
.woocommerce button.button.alt,.woocommerce #place_order,
.woocommerce .checkout-button,.woocommerce a.checkout-button{
  background:var(--acc);border-color:var(--acc);color:#fff;
}
.woocommerce button.button.alt:hover,.woocommerce #place_order:hover,
.woocommerce a.checkout-button:hover{background:transparent;color:var(--acc)}

.woocommerce input.input-text,.woocommerce textarea,.woocommerce select,
.woocommerce-checkout input[type="text"],.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],.woocommerce-checkout textarea,
.woocommerce-checkout select,.select2-container .select2-selection{
  border-radius:0;border:0;border-bottom:1px solid var(--rule-strong);
  background:transparent;color:var(--fg);padding:.7rem 0;font-family:var(--font-body);
}
.woocommerce label,.woocommerce-checkout label{
  font-size:.64rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
/* Login / registro / recuperar contraseña: Woo los pinta con caja redondeada
   y sus selectores (`.woocommerce form .form-row input.input-text`, 0,3,1)
   ganan a los genéricos de arriba. Se igualan al lenguaje de reglas finas. */
.woocommerce form.login,.woocommerce form.register,
.woocommerce .woocommerce-ResetPassword{
  border:1px solid var(--rule);border-radius:0;padding:clamp(20px,3vw,32px);
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce .woocommerce-ResetPassword input.input-text{
  border:0;border-bottom:1px solid var(--rule-strong);border-radius:0;
  background:transparent;color:var(--fg);padding:.7rem 0;box-shadow:none;
}
.woocommerce form .form-row input.input-text:focus{outline:0;border-bottom-color:var(--acc)}
.woocommerce .woocommerce-form-login__rememberme{text-transform:none;letter-spacing:0}
.woocommerce .woocommerce-billing-fields h3,.woocommerce-additional-fields h3{
  border-top:1px solid var(--rule);padding-top:var(--sp-3);margin-top:var(--sp-3);
}

/* Bloques de Woo (carrito/checkout en bloques) sobre papel */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  border-radius:0!important;
  font-family:var(--font-body);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  font-size:.74rem!important;background:var(--acc)!important;color:#fff!important;
}
.wc-block-components-title,.wc-block-cart__totals-title,
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title{
  font-family:var(--font-display)!important;text-transform:uppercase;font-weight:400!important;
  letter-spacing:-.01em;
}
/* Excepción: el título de "Pago exprés" vive en un contenedor ABSOLUTO que
   hace de leyenda sobre el borde del fieldset. Con el cuerpo de display se
   sale de su caja y el botón de Stripe lo tapa. Se queda chico y en Archivo. */
/* Su contenedor es absoluto y el iframe de Stripe le pasa por encima:
   fondo propio + z-index para que la leyenda quede legible sobre la regla. */
.wc-block-components-express-payment__title-container{
  background:var(--bg);z-index:2;padding-inline:.6rem;
}
.wc-block-components-express-payment__title{
  font-family:var(--font-body)!important;
  font-size:.66rem!important;font-weight:600!important;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  line-height:1.2;
}
.wc-block-components-totals-footer-item .wc-block-formatted-money-amount{color:var(--acc)}
.wc-block-components-product-name{font-weight:600}
.wc-block-components-product-name:hover{color:var(--acc)}
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-blocks-components-select select{border-radius:0}

.woocommerce-order,.woocommerce-thankyou-order-received{padding-block:var(--sp-3)}
.woocommerce ul.order_details{
  display:grid;gap:0;border-top:1px solid var(--rule);margin:var(--sp-3) 0;padding:0;
}
.woocommerce ul.order_details li{
  border-bottom:1px solid var(--rule);padding:.9rem 0;margin:0;
  font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  display:flex;justify-content:space-between;gap:1rem;float:none;
}
.woocommerce ul.order_details li strong{
  font-size:1rem;letter-spacing:0;text-transform:none;color:var(--fg);font-weight:600;
}
.woocommerce-MyAccount-navigation ul li a{
  display:block;padding:.8rem 0;border-bottom:1px solid var(--rule);
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
}
.woocommerce-MyAccount-navigation ul li.is-active a{color:var(--acc)}

/* ---------- 16. EJERCICIOS ---------- */
.ip-ejgrid{
  display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--rule);
}
.ip-ej{
  border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:1rem;padding:1rem .2rem;
  text-align:left;background:none;border-left:0;border-right:0;border-top:0;width:100%;
  transition:padding-left var(--t) var(--ease-out),color var(--t) var(--ease);
  min-width:0;
}
.ip-ej:hover{padding-left:.9rem;color:var(--acc)}
.ip-ej.is-out{display:none}
.ip-ej__k{font-size:.6rem;font-weight:600;letter-spacing:.14em;color:var(--num);flex:none;font-variant-numeric:tabular-nums}
/* El nombre se come el espacio libre: así el músculo y el play quedan
   siempre pegados a la derecha, haya o no metadato de músculo. (Con
   margin-left:auto en el músculo, las fichas sin ese dato dejaban el
   botón de play pegado al título.) */
.ip-ej__name{
  flex:1 1 auto;
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.05rem,2.4vw,1.7rem);letter-spacing:-.015em;line-height:1;
  min-width:0;overflow-wrap:anywhere;
}
.ip-ej__muscle{
  color:var(--muted);font-size:.68rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;flex:none;
}
.ip-ej__play{
  flex:none;width:34px;height:34px;margin-left:.4rem;
  border:1px solid var(--rule-strong);display:grid;place-items:center;color:var(--fg);
  transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.ip-ej:hover .ip-ej__play{background:var(--acc);border-color:var(--acc);color:#fff}
.ip-ej__play svg{width:20px;height:20px;fill:currentColor}

/* Modal de video */
.ip-modal{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--gutter);
  opacity:0;visibility:hidden;transition:opacity var(--t) var(--ease),visibility 0s linear var(--t);
}
.ip-modal.is-open{opacity:1;visibility:visible;transition-delay:0s}
.ip-modal__scrim{position:absolute;inset:0;background:rgba(10,10,10,.9)}
.ip-modal__dialog{
  position:relative;width:min(100%,900px);background:var(--ink);color:#F2F0EC;
  --muted:#918C85;--rule:rgba(242,240,236,.17);
  border:1px solid rgba(242,240,236,.17);padding:var(--sp-3);
}
.ip-modal__close{
  position:absolute;top:.6rem;right:.8rem;background:none;border:0;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:#F2F0EC;
}
.ip-modal__close:hover{color:var(--accent-dark)}
.ip-modal__stage{aspect-ratio:16/9;background:#000;display:grid;place-items:center;overflow:hidden;min-height:0}
.ip-modal__stage iframe,.ip-modal__stage video{width:100%;height:100%;border:0}
.ip-modal__stage svg{width:min(60%,260px);height:auto;opacity:.5}
.ip-modal__poster{display:grid;place-items:center;gap:1rem;padding:1.5rem;width:100%}
.ip-modal__stage--video{display:block}
.ip-video-note{padding:1rem;color:#918C85;font-size:.88rem;text-align:center;max-width:46ch}
.ip-video-note b{color:#F2F0EC;display:block;margin-bottom:.3rem}
.ip-modal__caption{margin-top:1rem;display:grid;gap:.3rem}
.ip-modal__caption b{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:1.3rem;letter-spacing:-.01em}
.ip-modal__caption span{color:#918C85;font-size:.9rem}

/* ---------- 17. BIG FOOTER ---------- */
.ip-footer{
  background:var(--ink);color:#F2F0EC;
  --bg:var(--ink);--bg-2:var(--ink-2);--fg:#F2F0EC;--muted:#918C85;
  --rule:rgba(242,240,236,.17);--rule-strong:rgba(242,240,236,.34);--num:#4A4744;--acc:var(--accent-dark);--acc-on:var(--ink);
  padding-top:clamp(48px,7vw,110px);
}
.ip-footer__grid{
  display:grid;grid-template-columns:1fr;gap:var(--sp-4);
  border-bottom:1px solid var(--rule);padding-bottom:var(--sp-4);
}
.ip-footer__brand p{color:var(--muted);max-width:40ch;margin-top:.8rem;font-size:.95rem}
.ip-footer h4{
  font-size:.62rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1rem;
}
.ip-footer li+li{margin-top:.55rem}
.ip-footer li a{font-size:.95rem;color:#F2F0EC}
.ip-footer li a:hover{color:var(--acc)}
.ip-social{display:flex;gap:.8rem;margin-top:1.2rem}
.ip-social a{
  width:38px;height:38px;border:1px solid var(--rule);display:grid;place-items:center;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease);
}
.ip-social a:hover{background:#F2F0EC;color:var(--ink);border-color:#F2F0EC}
.ip-social svg{width:16px;height:16px}

/* Wordmark de remate: tiene que LLENAR el ancho del contenedor sin pasarse.
   "IRONPULSE" en Anton con este tracking mide 3,589× el cuerpo (medido en el
   navegador con la fuente ya cargada), así que el cuerpo sale de dividir el
   ancho de la caja por ese factor: 100/3,589 = 27,86 → 27,4cqw con holgura
   (el resto absorbe el redondeo subpíxel: a 390px de ancho el margen que
   dejaba 27,7 era de 2px, demasiado fino para fiarse).
   El cuerpo se saca del ANCHO REAL de la caja (cqw), no del viewport: atado
   a vw no descontaba los gutters de .ip-wrap y la última letra se cortaba.
   El valor en vw queda de reserva para navegadores sin container queries. */
.ip-footer__wordbox{width:100%}
.ip-footer__word{
  display:block;width:100%;padding-block:clamp(16px,2.4vw,38px);
  font-family:var(--font-display);text-transform:uppercase;
  font-size:min(22.5vw,364px);line-height:.78;letter-spacing:-.035em;
  color:#F2F0EC;overflow:hidden;
}
@supports (container-type:inline-size){
  .ip-footer__wordbox{container-type:inline-size}
  .ip-footer__word{font-size:27.4cqw}
}
.ip-footer__word span{display:block;transition:color var(--t-slow) var(--ease)}
.ip-footer__word:hover span{color:var(--acc)}
.ip-footer__legal{
  display:flex;flex-wrap:wrap;gap:1.4rem;border-top:1px solid var(--rule);padding-top:1.2rem;
}
.ip-footer__legal a{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ip-footer__legal a:hover{color:#F2F0EC}
.ip-footer__bottom{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  padding-block:1.2rem 2rem;color:var(--muted);font-size:.72rem;
}
.ip-footer__pay{display:flex;gap:.7rem;align-items:center}
.ip-footer__pay svg{height:20px;width:auto;opacity:.5}

/* ---------- 18. PÁGINAS Y 404 ---------- */
.ip-page{padding-block:clamp(36px,5vw,80px);max-width:var(--wrap-text)}
.ip-page .ip-entry{color:var(--muted);font-size:1.02rem}
.ip-page .ip-entry p+p,.ip-page .ip-entry ul{margin-top:1rem}
.ip-page .ip-entry ul{list-style:disc;padding-left:1.2rem}
.ip-page .ip-entry li+li{margin-top:.4rem}
.ip-page .ip-entry h2,.ip-page .ip-entry h3{
  font-family:var(--font-display);text-transform:uppercase;color:var(--fg);
  margin-top:2.2rem;margin-bottom:.7rem;letter-spacing:-.015em;
  font-size:clamp(1.3rem,2.6vw,1.9rem);
}
/* Sólo los enlaces de PROSA (los del editor, que no llevan clase). Sin el
   :not([class]) esta regla pintaba de rojo y subrayaba también los botones
   y los nombres de producto de los bloques de WooCommerce en carrito y
   checkout, que sí llevan clase. */
.ip-page .ip-entry a:not([class]){color:var(--acc);text-decoration:underline;text-underline-offset:.2em}
.ip-page .ip-entry a:not([class]):hover{color:var(--fg)}
.wc-block-components-product-name{color:var(--fg);text-decoration:none;font-weight:600}
.wc-block-components-product-name:hover{color:var(--acc)}

.ip-404{
  min-height:calc(100svh - var(--header-h));display:grid;align-content:center;gap:var(--sp-3);
  padding-block:var(--sp-5);
}
.ip-404__code{
  font-family:var(--font-display);font-size:clamp(6rem,26vw,20rem);line-height:.78;
  letter-spacing:-.05em;color:var(--num);
}
.ip-404 p{color:var(--muted);max-width:44ch}
.ip-404__cta{display:flex;gap:1rem;flex-wrap:wrap}

/* ---------- 18b. WOOCOMMERCE: CONTENEDOR Y ESPECIFICIDAD ----------
   La hoja de WooCommerce se encola en otro archivo y puede cargarse DESPUÉS
   de la nuestra: contra sus reglas no alcanza el orden de fuente, hay que
   ganar por especificidad. De ahí los selectores largos `.woocommerce
   div.product …` (0,3,1) que baten a los suyos.
   Síntomas que arreglan: precio en verde oliva (#77a464) y botón "Añadir al
   carrito" en lila (#a46497), ambos defaults de Woo. */

/* Contenedor de las vistas Woo. El <main> lo abre ip_woo_wrapper_start()
   con un .ip-container, y eso pasa SÓLO en is_woocommerce(): la tienda va
   a sangre (su plantilla trae .ip-wrap propio) y la ficha se acota acá.
   Carrito / checkout / cuenta NO pasan por acá: son page.php. */
.ip-woo-main{padding:0}
.ip-woo-main>.ip-container{width:100%}
.single-product .ip-woo-main>.ip-container{
  width:min(100% - var(--gutter)*2,var(--wrap));margin-inline:auto;
  padding-block:clamp(24px,4vw,56px);
}
/* Carrito/checkout/cuenta: page.php les da .ip-page--wide para que no
   hereden la columna de lectura de 74ch. */
.ip-page--wide{max-width:none}

/* Fuera los floats de Woo: la ficha la maqueta nuestro grid. */
.woocommerce div.product div.images,
.woocommerce div.product div.summary{width:auto;float:none;margin:0;min-width:0}
.woocommerce div.product div.images img{width:100%;height:auto}

/* Precio */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .woocommerce-variation-price .price{
  color:var(--acc);font-size:clamp(1.3rem,2.4vw,1.6rem);font-weight:700;
  font-family:var(--font-body);font-variant-numeric:tabular-nums;margin:0;
}
.woocommerce div.product p.price del,
.woocommerce div.product span.price del{color:var(--muted);font-weight:400;font-size:1rem;opacity:1}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins{text-decoration:none;background:none}

/* Botonera de compra */
.woocommerce div.product form.cart .button,
.woocommerce div.product form.cart button.button.alt,
.woocommerce a.button.alt,.woocommerce button.button.alt,
.woocommerce input.button.alt,.woocommerce #respond input#submit.alt{
  background:var(--acc);color:#fff;border:1px solid var(--acc);border-radius:0;
  font-family:var(--font-body);font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:1rem 1.9rem;
  transition:background var(--t) var(--ease),color var(--t) var(--ease);
}
.woocommerce div.product form.cart .button:hover,
.woocommerce div.product form.cart button.button.alt:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{background:transparent;color:var(--acc)}
/* "Comprar ahora" es el secundario (fantasma) y "Añadir al carrito" el
   primario. Ojo: el botón lleva las clases `button alt`, así que la regla
   de arriba `…form.cart button.button.alt` (0,5,3) le ganaba y salía rojo.
   Hay que igualarla o superarla, no basta con ir después. */
.woocommerce div.product form.cart button.ip-buy-now.button.alt{
  background:transparent;color:var(--fg);border-color:var(--fg);
}
.woocommerce div.product form.cart button.ip-buy-now.button.alt:hover{
  background:var(--fg);color:var(--bg);border-color:var(--fg);
}

/* Fila de compra: cantidad + botones en línea; variaciones a ancho completo. */
.woocommerce div.product form.cart{
  display:flex;flex-wrap:wrap;gap:.8rem;align-items:stretch;margin:0;
}
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .single_variation_wrap,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{flex:1 1 100%}
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart{
  display:flex;flex-wrap:wrap;gap:.8rem;align-items:stretch;
}
.woocommerce div.product form.cart .quantity{flex:none}
.woocommerce div.product form.cart .quantity input.qty{height:100%}
.woocommerce div.product .woocommerce-variation-price{margin-bottom:.6rem}

/* Título de la ficha */
.woocommerce div.product .product_title{
  font-family:var(--font-display);text-transform:uppercase;font-weight:400;
  font-size:clamp(2.1rem,5vw,3.8rem);line-height:.9;letter-spacing:-.028em;
  margin:0;overflow-wrap:anywhere;
}

/* ---------- 19. RESPONSIVE (SIEMPRE AL FINAL: la cascada manda) ---------- */

/* ≥ 620px */
@media (min-width:620px){
  .ip-fields{grid-template-columns:1fr 1fr}
  .ip-topbar__aside{display:block}
}

/* ≥ 860px */
@media (min-width:860px){
  .ip-manifest{grid-template-columns:repeat(2,1fr);column-gap:clamp(24px,4vw,72px)}
  .ip-rich__grid{grid-template-columns:repeat(3,1fr);column-gap:clamp(20px,3vw,56px)}
  .ip-figures{grid-template-columns:repeat(2,1fr);column-gap:clamp(24px,4vw,72px)}
  .ip-figure:nth-child(even){text-align:left;justify-items:start}
  .ip-figure:nth-child(even) span{text-align:left}
  .single-product div.product{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .ip-shead{grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:clamp(20px,3vw,48px)}
  .ip-shead__num{padding-top:.2rem}
  .ip-shead__sub{grid-column:2}
  .ip-footer__grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(20px,3vw,48px)}
}

/* ≤ 1023px — nav colapsa a drawer */
@media (max-width:1023px){
  .ip-nav{display:none}
  .ip-burger{display:block}
  .ip-actions{margin-left:auto}
  .ip-act--acct,.ip-act--search{display:none}
}

/* ≤ 767px — índice tipográfico degrada a lista con miniatura */
@media (max-width:767px){
  /* En móvil el índice degrada a lista compacta con miniatura: la alineación
     alternada no tiene sentido con 375px de ancho. Grid con áreas para que
     el precio no se caiga a una línea propia. */
  .ip-idx__row,
  .ip-idx__row:nth-child(3n+1),
  .ip-idx__row:nth-child(3n+2),
  .ip-idx__row:nth-child(3n+3),
  .ip-idx__row.is-a1,.ip-idx__row.is-a2,.ip-idx__row.is-a3{
    display:grid;
    grid-template-columns:56px minmax(0,1fr) auto;
    grid-template-areas:"thumb num price" "thumb name name";
    gap:.3rem .9rem;align-items:center;justify-content:stretch;
  }
  .ip-idx__thumb{
    grid-area:thumb;display:block;width:56px;height:70px;
    object-fit:cover;background:var(--bg-2);filter:grayscale(1);
  }
  .ip-idx__num{grid-area:num;align-self:end;padding-bottom:0;justify-self:start}
  .ip-idx__name{grid-area:name;align-self:start;font-size:clamp(1.2rem,5.8vw,1.8rem)}
  .ip-idx__price{grid-area:price;align-self:end;padding-bottom:0;justify-self:end}
  /* La categoría ya la comunican los filtros de arriba. */
  .ip-idx__meta{display:none}
  /* Sin miniatura (ej. resultados de búsqueda) la columna no debe reservar hueco. */
  .ip-idx__row:not(:has(.ip-idx__thumb)){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"num price" "name name"}
  .ip-hero__foot{flex-direction:column;align-items:flex-start}
  .ip-pnav{grid-template-columns:1fr}
  .ip-pnav__side+.ip-pnav__side{border-left:0;border-top:1px solid var(--rule)}
  .ip-specs th{width:50%}
  .ip-ej__muscle{display:none}
  .single-product form.cart{grid-template-columns:1fr}
}

/* ≤ 480px */
@media (max-width:480px){
  body{font-size:16px}
  .ip-topbar{font-size:.58rem}
  .ip-footer__bottom{flex-direction:column;align-items:flex-start}
  .ip-wiz__opt span{display:none}
  .ip-idx__meta{display:none}
}

/* ---------- 22. EFECTOS DE LA REFERENCIA (rda) ----------
   Tres gestos: (a) wipe invertido al hover de las filas índice, (b) sello
   que persigue al cursor en la biblioteca de ejercicios, (c) titulares
   "redactados" que se destapan línea a línea al entrar al viewport.
   El scramble de letras del nav/filas vive en effects.js (sin CSS propio).
   Todo queda fuera en táctil y con prefers-reduced-motion. */

@media (hover:hover) and (prefers-reduced-motion:no-preference){

  /* (a) Wipe invertido: la fila se pinta del color de la tinta del modo
     (negro en papel, papel en negro) entrando desde la izquierda; al salir
     se retira hacia la derecha cambiando el transform-origin. */
  .ip-ej{position:relative}
  .ip-idx__row::before,.ip-ej::before{
    content:"";position:absolute;inset:0;background:var(--fg);
    transform:scaleX(0);transform-origin:right center;
    transition:transform .38s var(--ease-out);
    pointer-events:none;
  }
  .ip-idx__row>*,.ip-ej>*{position:relative;z-index:1}
  .ip-idx__row:hover::before,.ip-idx__row:focus-visible::before,
  .ip-ej:hover::before,.ip-ej:focus-visible::before{
    transform:scaleX(1);transform-origin:left center;
  }
  .ip-idx__row:hover,.ip-idx__row:focus-visible,
  .ip-ej:hover,.ip-ej:focus-visible{color:var(--bg)}
  /* El número no baja de .7: en /ejercicios/ NO es decorativo (entra en el
     nombre accesible del botón), y a .45 quedaba en 3,1:1. */
  .ip-idx__row:hover .ip-idx__num,.ip-idx__row:focus-visible .ip-idx__num,
  .ip-ej:hover .ip-ej__k,.ip-ej:focus-visible .ip-ej__k{color:var(--bg);opacity:.7}
  .ip-idx__row:hover .ip-idx__meta,.ip-idx__row:focus-visible .ip-idx__meta,
  .ip-ej:hover .ip-ej__muscle,.ip-ej:focus-visible .ip-ej__muscle{color:var(--bg);opacity:.62}
  .ip-idx__row:hover .ip-idx__price,.ip-idx__row:focus-visible .ip-idx__price{color:var(--flip-acc)}
  .ip-ej:hover .ip-ej__play,.ip-ej:focus-visible .ip-ej__play{border-color:transparent}

  /* (b) Sello que sigue al cursor (solo /ejercicios/). La posición la pone
     JS en el transform; la transición larga es lo que produce el arrastre. */
  .ip-sticker{
    position:fixed;top:0;left:0;z-index:41;pointer-events:none;
    width:clamp(92px,10vw,128px);aspect-ratio:1;
    opacity:0;
    transform:translate3d(-50%,-50%,0) rotate(-8deg) scale(.5);
    transition:opacity .22s var(--ease),transform .5s var(--ease-out);
    will-change:transform;
  }
  .ip-sticker.is-on{opacity:1}
  .ip-sticker.is-on.is-away{opacity:0}
  .ip-sticker svg{width:100%;height:100%;display:block;filter:drop-shadow(0 2px 10px rgba(10,10,10,.28))}
}
@media (hover:none),(prefers-reduced-motion:reduce){
  .ip-sticker{display:none}
}

/* (c) Titulares redactados. effects.js parte el titular en líneas medidas;
   cada línea queda tapada por una barra del color de la tinta que se
   retira hacia la derecha con un escalón de retardo por línea (--rd). */
.ip-rl{display:block}
.ip-rl__in{display:inline-block;position:relative}
.ip-rl__in::after{
  content:"";position:absolute;inset:-.04em -.06em;background:var(--fg);
  transform-origin:left center;
}
.ip-rl.is-open .ip-rl__in::after{
  transform:scaleX(0);transform-origin:right center;
  transition:transform .55s var(--ease-out);
  transition-delay:var(--rd,0s);
}
@media (prefers-reduced-motion:reduce){
  .ip-rl__in::after{display:none}
}

/* (d) Persianas: la foto se abre en bandas horizontales que se retiran
   alternando dirección, como el reveal de las piezas de la referencia.
   Las bandas las genera effects.js (una por banda, con su retardo). */
.ip-blinds{position:relative;overflow:hidden}
.ip-blinds__b{
  position:absolute;left:-1px;right:-1px;background:var(--bg);
  transition:transform .6s var(--ease-out);
  transition-delay:var(--bd,0s);
  pointer-events:none;
}
.ip-blinds.is-open .ip-blinds__b{transform:translateX(-101%)}
.ip-blinds.is-open .ip-blinds__b:nth-child(even){transform:translateX(101%)}
@media (prefers-reduced-motion:reduce){
  .ip-blinds__b{display:none}
}