/* ==========================================================================
   Ipnosi Professional — layout y componentes
   ========================================================================== */

.screen-reader-text {
  position: absolute;
  left: -9999px;
}

/* ---------- Announcement bar ---------- */
.ipnosi-announce {
  background: linear-gradient(90deg, var(--brand-violet-dark) 0%, var(--accent) 100%);
}
.ipnosi-announce p {
  margin: 0;
  padding-block: 0.6rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  max-width: none;
}

/* ---------- Banner de sugerencia de mercado (geo-IP) ---------- */
.ipnosi-market-banner {
  background: var(--brand-violet-dark);
  border-bottom: 1px solid var(--line);
}
.ipnosi-market-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 0.7rem;
}
.ipnosi-market-banner__inner p {
  margin: 0;
  color: #fff;
  font-size: 0.85rem;
  max-width: none;
}
.ipnosi-market-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* ---------- Banner de consentimiento de cookies ---------- */
.ipnosi-cookie-banner {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  background: var(--brand-violet-dark);
  border-top: 1px solid var(--line);
}
.ipnosi-cookie-banner.is-visible { display: block; }
.ipnosi-cookie-banner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: 0.85rem;
}
.ipnosi-cookie-banner__inner p {
  margin: 0;
  color: #fff;
  font-size: 0.85rem;
  max-width: 60ch;
}
.ipnosi-cookie-banner__inner a { color: #fff; text-decoration: underline; }
.ipnosi-cookie-banner__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

/* ---------- Página individual de producto (Fase 5) ---------- */
.ipnosi-product-learn-more { margin-top: 0.5rem; }
.ipnosi-product-learn-more a { font-weight: 600; }

/* Tema claro — EXCLUSIVO de las páginas de producto de Styling (pedido
   explícito del cliente: "exclusivamente Styling, las demás quedan igual").
   Ipnocare conserva el tema oscuro del resto del sitio. Nav y footer quedan
   fuera de este contenedor en cualquier caso. Redefine las variables en vez
   de pintar cada sección a mano: todo lo que ya usa
   var(--text)/var(--text-muted)/var(--line)/var(--bg) hereda el cambio
   automáticamente — EXCEPTO los <p>, que en el CSS base no declaran su
   propio color (heredan el valor ya resuelto de <body>, no la variable), así
   que se fuerza aparte. */
.ipnosi-product-page--light {
  background: #fff;
  --bg: #fff;
  --text: #1A181C;
  --text-muted: #5A5560;
  --line: rgba(0,0,0,0.1);
}
.ipnosi-product-page--light p { color: var(--text); }
.ipnosi-product-page--light .eyebrow { color: var(--product-accent); }

/* El fondo de foto del hero usa z-index negativo (ver .ipnosi-hero__media
   más abajo) para quedar detrás de su propio contenido de texto — pero sin
   un stacking context propio en .ipnosi-hero, ese z-index negativo podía
   "escaparse" y pintarse detrás del fondo blanco nuevo de
   .ipnosi-product-page--light, dejando la foto invisible (bug reportado).
   isolation:isolate fuerza el stacking context en el hero mismo. */
.ipnosi-hero--product { isolation: isolate; }

/* Pedido del cliente: "Por qué funciona" debe ocupar el 100% del alto de
   pantalla, pero la FOTO debe mantenerse 1:1 (el intento anterior la
   estiraba a toda la altura de la columna, lo que —combinada con un bug de
   cascada— la hacía desbordar; ver commit anterior). La foto cuadrada queda
   centrada verticalmente dentro de la sección de 100vh, con el texto
   centrado a su misma altura — no se obliga a la foto a ocupar todo el alto.
   El selector combinado (las 3 clases que ya trae la sección) le da más
   especificidad que .ipnosi-content / .ipnosi-content--tight para que gane
   sin pelear por orden en la hoja. */
.ipnosi-content.ipnosi-content--tight.ipnosi-product-page__why-section {
  padding-block: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}
/* Selector combinado: .ipnosi-split (align-items:start) se define más abajo
   en la hoja y ganaría por orden con la misma especificidad — combinar las 2
   clases sube la especificidad para que esta sí gane. center (no stretch):
   la foto cuadrada es más baja que la sección de 100vh, así que el texto se
   centra A SU ALTURA, no a la del contenedor completo. */
.ipnosi-split.ipnosi-product-page__why { align-items: center; width: 100%; }
/* pedido del cliente (solo tema oscuro: Ipnocare + Black Wax, móvil y
   desktop): la sección de beneficios que sigue es negro puro y el fondo de
   esta es el gris de la página, se notaba el corte. El fondo se funde a
   negro en el tramo final de la sección (más largo en desktop, donde la
   sección es más ancha y el corte se nota más). */
.ipnosi-product-page:not(.ipnosi-product-page--light) .ipnosi-content.ipnosi-content--tight.ipnosi-product-page__why-section {
  background: linear-gradient(to bottom, transparent calc(100% - 10rem), #000000 100%);
}
@media (min-width: 761px) {
  .ipnosi-product-page:not(.ipnosi-product-page--light) .ipnosi-content.ipnosi-content--tight.ipnosi-product-page__why-section {
    background: linear-gradient(to bottom, transparent calc(100% - 14rem), #000000 100%);
  }
}
/* Pedido del cliente: mismo radio que las otras fotos grandes del sitio
   (.ipnosi-product-gallery__image, la foto de la ficha de producto, ya usa
   var(--radius-lg)) — .ipnosi-photo base no trae radio propio porque se
   reusa en contextos que no lo quieren (sku-cards, placeholders de línea),
   así que se limita a esta sección en vez de tocar la clase base. */
.ipnosi-product-page__why .ipnosi-photo {
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ipnosi-product-page__why-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* Hero con foto real — reusa .ipnosi-hero del home, con <img> en vez de
   <video> de fondo. La fotografía de producto es clara/luminosa (no la
   cinemática oscura del home), así que el hero rompe a propósito con el
   tema oscuro del resto del sitio: fondo claro, texto oscuro, igual que el
   mockup de referencia del cliente. */
.ipnosi-hero--product { min-height: 86vh; min-height: 86svh; }
.ipnosi-hero--image .ipnosi-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}
.ipnosi-hero--light::before { display: none; }
.ipnosi-hero--light .ipnosi-hero__media::after {
  background: linear-gradient(90deg, #FAF8FC 0%, rgba(250,248,252,0.92) 32%, rgba(250,248,252,0.35) 58%, rgba(250,248,252,0) 78%);
}
.ipnosi-hero--light .ipnosi-hero__lede {
  color: #4A4552;
  font-family: 'Miranda Sans', var(--font-body);
  font-weight: 400;
  font-size: 1.15rem;
}
/* Pedido del cliente tras ver que un recuadro blanco tapando la foto no era
   la solución: en vez de ocultar la foto, en móvil se usa un recorte propio
   9:16 (product-page-hero-{slug}-mobile.webp, mismo patrón ya probado en
   ipnosi_line_section_hero/profile-{line}-mobile.webp) con el producto
   arriba y el texto anclado abajo sobre un velo degradado, igual que esa
   banda — solo que con los colores claros de este hero en vez de los
   oscuros del home/líneas. Sin recorte móvil (archivo inexistente), sigue
   el comportamiento de antes para no dejar otros productos peor. */
@media (max-width: 760px) {
  /* Antes solo aplicaba con .ipnosi-hero--light (único caso cuando se
     escribió: Hydra Milk, tema claro) — ahora que casi la mitad de las 14
     páginas restantes con hero-mobile son de tema oscuro (Ipnocare +
     Black Wax), se generaliza: el ajuste de viewport (54px de la barra de
     anuncio, botón "Comprar" visible sin scroll) es el mismo problema sin
     importar el tema. */
  .ipnosi-hero--has-mobile-photo {
    /* padding-bottom ya estaba en 0 — no había más margen ahí para bajarlo
       más. aspect-ratio:9/16 podía dejar la caja más baja que el viewport
       real del teléfono (según su proporción), con hueco debajo antes de la
       siguiente sección. min-height:100svh en vez de aspect-ratio hace que
       el hero llene literalmente toda la pantalla — PERO medido en vivo
       (430x933: hero de top=54 a bottom=987, 54px de más) el hero arranca
       54px más abajo de y=0: el margin-top negativo de .ipnosi-hero solo
       descuenta el alto del nav (--header-h), no el de la barra morada de
       arriba (.ipnosi-announce) que empuja todo ese stack hacia abajo. Sin
       restar esos 54px, un 100svh completo se pasaba de la pantalla y el
       botón "Comprar" quedaba fuera. */
    min-height: calc(100svh - 54px);
    /* Antes align-items:flex-end (ancla el bloque de texto al fondo): esto
       asume que el producto siempre deja el mismo hueco libre abajo, cierto
       en Hydra Milk/Black Wax (recortadas a mano) pero NO en las 14 fotos
       nuevas en conjunto — en varias (ej. Ipnoclean, botellas más bajas en
       el encuadre) el texto, al anclarse por SU PROPIA altura desde el
       fondo, terminaba empezando más arriba que el producto y se le
       encimaba. Un punto fijo desde arriba (ver margin-top en .ipnosi-hero__content)
       no depende de dónde termine el producto en cada foto. */
    align-items: flex-start;
    padding-top: var(--header-h, 76px);
  }
  .ipnosi-hero--has-mobile-photo .ipnosi-hero__photo { object-position: center top; }
  /* var(--bg) en vez de un rgba() fijo claro — mismo criterio que el velo
     del CTA final: se adapta solo al tema claro (Styling) u oscuro
     (Ipnocare/Black Wax) de cada página, en vez de dejar un lavado blanco
     sobre fotos de fondo oscuro. Velo reforzado (antes 24/48/68%): con 14
     fotos de composición variable, un velo corto dejaba el producto nítido
     justo donde empieza el texto. */
  /* pedido del cliente: en Hydra Milk (velo propio, ver más abajo) se ve
     sutil, pero este velo general tapaba demasiado la foto en los otros 12
     — igualado a los mismos valores de Hydra Milk. */
  .ipnosi-hero--has-mobile-photo .ipnosi-hero__media::after {
    background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 22%, color-mix(in srgb, var(--bg) 50%, transparent) 38%, transparent 55%);
  }
  .ipnosi-hero--has-mobile-photo .ipnosi-hero__content {
    max-width: none;
    text-align: center;
    /* Zona de seguridad fija (en vez de anclar por altura propia desde el
       fondo) — así el texto siempre empieza por debajo de donde termina el
       producto en CUALQUIERA de las 14 fotos, sin tener que medir cada una
       a mano. Subido de 28vh a 36vh: el cliente lo quiere notablemente más
       abajo (mismo criterio ya aplicado a mano en Hydra Milk/Hydra Milk Cold
       Violet) — a este nivel vuelve a acercarse al banner de cookies en
       la primera visita (mismo trade-off ya aceptado para esos 2 productos),
       no solo "casi sin margen" como con 28vh. */
    margin-top: 35vh;
    padding-bottom: 1.5rem;
  }
  /* Ipnocare (6 de los 12 restantes) tiene una línea de slogan extra arriba
     del título que la mayoría de Styling no tiene (medido en vivo:
     keratin-repair quedaba -12px detrás del banner de cookies vs. apenas
     -2.5px en spray-head, que no la tiene) — se recorta el margen de esa
     línea específicamente en móvil para parejar ambos casos. */
  .ipnosi-hero--has-mobile-photo .ipnosi-product-page__hero-category {
    margin-top: 0.05em;
    /* line-height:1.6 (heredado del body) le sumaba medio interlineado de
       sobra arriba/abajo a una etiqueta de una sola línea corta — quedaban
       todavía -6.5px detrás del banner tras el recorte de margin-top de
       arriba. 1.1 recupera ese espacio sin tocar el tamaño de letra. */
    line-height: 1.1;
  }
  .ipnosi-hero--has-mobile-photo .ipnosi-hero__ctas {
    justify-content: center;
    margin-top: 0.25rem;
  }
  /* Espaciado interno más apretado (título/lede con menos margin-bottom):
     libera alto real dentro del mismo bloque de texto, para poder bajar el
     margin-top de cada producto sin que el botón "Comprar" vuelva a quedar
     detrás del banner de cookies. */
  .ipnosi-hero--has-mobile-photo .ipnosi-product-page__hero-title {
    margin-bottom: 0.5rem;
  }
  .ipnosi-hero--has-mobile-photo .ipnosi-hero__lede {
    margin-bottom: 0.5rem;
  }
  /* 40vh (primer intento) empujaba el botón detrás del banner de cookies —
     se achica el título/lede específicamente aquí (no afecta el hero de
     escritorio ni el graphic-hero de Styling) para que el bloque completo
     quepa entre el producto y el banner. */
  .ipnosi-hero--has-mobile-photo .ipnosi-product-page__hero-title {
    font-size: clamp(2.2rem, 1.6rem + 5vw, 2.8rem);
  }
  /* pedido del cliente: en móvil, el nombre debería poder quedar en 1 línea
     cuando quepa (en vez del <br> fijo que fuerza 2 líneas siempre, pensado
     para el tratamiento tipográfico de escritorio) — se oculta el <br> y se
     deja que envuelva de forma natural; los nombres largos (ej.
     "Hydra Milk Cold Violet") van a seguir cayendo en 2+ líneas solos. */
  .ipnosi-hero--has-mobile-photo .ipnosi-product-page__hero-title br { display: none; }
  .ipnosi-hero--has-mobile-photo .ipnosi-hero__lede { font-size: 1rem; }
  /* hydra-milk-cold-violet es el único nombre de 4 palabras del catálogo
     (el resto son 2) — "MILK COLD VIOLET" todavía envolvía a 2 líneas con
     el tamaño de arriba, dejando el título completo en 3 líneas en vez de 2
     y empujando el botón -33px detrás del banner (medido en vivo). Achicado
     solo para este producto en vez de reducir el título de los otros 13. */
  .ipnosi-product-page--hydra-milk-cold-violet .ipnosi-hero--has-mobile-photo .ipnosi-product-page__hero-title {
    font-size: clamp(1.7rem, 1.1rem + 4vw, 2.15rem);
  }
  /* pedido del cliente tras ver el resultado en vivo: todavía quedaba muy
     arriba — con el <br> oculto el título ya envuelve en 2 líneas
     balanceadas ("HYDRA MILK" / "COLD VIOLET") en vez de 3, así que hay más
     margen real para bajarlo que cuando se fijó 28vh general. */
  .ipnosi-product-page--hydra-milk-cold-violet .ipnosi-hero--has-mobile-photo .ipnosi-hero__content {
    margin-top: 40vh;
  }
  /* Hydra Milk (modelo base): su recorte móvil deja el frasco arriba con
     mucho espacio libre abajo, así que puede bajar más que el ajuste general
     sin riesgo de encimarse con el producto ni con el banner de cookies.
     (El velo ya no necesita override propio — el general se igualó a estos
     mismos valores, ver arriba.) */
  .ipnosi-product-page--hydra-milk .ipnosi-hero--has-mobile-photo .ipnosi-hero__content {
    margin-top: 38vh;
  }
  /* 38vh (primer intento) tapaba el botón "Comprar" con el banner de
     cookies (medido en vivo: botón 822-876px, banner empieza en 793px) —
     Hydra Milk es el único producto con slogan Y variant dentro del h1
     (2 líneas extra de alto vs. el resto), así que no puede bajar tanto
     como los demás sin topar con el banner. Se compensa achicando el
     título aquí también (mismo criterio que hydra-milk-cold-violet) para
     que el bloque completo quepa más abajo sin empujar el botón detrás
     del banner. */
  .ipnosi-product-page--hydra-milk .ipnosi-hero--has-mobile-photo .ipnosi-product-page__hero-title {
    font-size: clamp(1.9rem, 1.4rem + 4vw, 2.4rem);
  }
  .ipnosi-product-page--hydra-milk .ipnosi-hero--has-mobile-photo .ipnosi-hero__lede {
    font-size: 0.95rem;
  }
}
/* color: var(--text), no un hex fijo — este hero se escribió pensando solo
   en el tema claro de Styling (texto oscuro), pero Ipnocare usa foto de hero
   con el tema oscuro del sitio: el hex fijo quedaba casi invisible (texto
   casi negro sobre fondo oscuro, visto en captura real de Keratin Repair).
   var(--text) ya cambia solo entre claro/oscuro vía .ipnosi-product-page--light,
   igual que el resto de la página. */
.ipnosi-product-page__hero-title {
  color: var(--text);
  font-size: clamp(3.2rem, 2.4rem + 3.5vw, 5.8rem);
  line-height: 0.92;
}
.ipnosi-product-page__hero-category {
  display: block;
  color: var(--product-accent);
  font-family: 'Miranda Sans', var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 0.4em;
  margin-top: 0.15em;
}
.ipnosi-product-page__hero-variant {
  display: block;
  font-family: 'Miranda Sans', var(--font-body);
  font-size: 0.28em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 0.25em;
}

/* Hero gráfico sin foto (hoy: los 9 Styling) — tipografía condensada
   enorme inspirada en el propio catálogo de Styling, no una foto inventada. */
.ipnosi-product-page__graphic-hero {
  background: linear-gradient(135deg, var(--bg) 0%, color-mix(in srgb, var(--product-accent) 28%, var(--bg)) 100%);
  padding-block: var(--space-xl);
  overflow: hidden;
}
.ipnosi-product-page__graphic-hero-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-lg);
}
.ipnosi-product-page__graphic-title {
  font-size: clamp(2.6rem, 2rem + 3vw, 4.8rem);
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.ipnosi-product-page__graphic-tag {
  display: inline-block;
  background: var(--product-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-sm);
}
.ipnosi-product-page__graphic-shot {
  display: flex;
  justify-content: center;
}
.ipnosi-product-page__graphic-shot img {
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.35));
}
@media (max-width: 860px) {
  .ipnosi-product-page__graphic-hero-inner { grid-template-columns: 1fr; text-align: center; }
  .ipnosi-product-page__graphic-shot { order: -1; }
}

/* Beneficios como tarjetas con ícono (pedido del cliente tras ver
   referencias con ícono por beneficio, ej. Melaleuca) — en vez del punto de
   color plano de antes. */
.ipnosi-product-page__benefits { margin-top: var(--space-lg); }
.ipnosi-product-page__benefits-title {
  text-align: center;
  margin-bottom: var(--space-md);
}
/* auto-fit dejaba una rejilla "a lo que quepa" (7+2 con 9 beneficios) sin
   ninguna lógica visible — --lp-cols la fija desde PHP (ipnosi_grid_cols)
   para que caiga en filas completas y parejas. */
.ipnosi-product-page__benefit-grid {
  display: grid;
  grid-template-columns: repeat(var(--lp-cols, 3), 1fr);
  gap: 1.25rem;
  max-width: 900px;
  margin-inline: auto;
}
@media (max-width: 760px) {
  .ipnosi-product-page__benefit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ipnosi-product-page__benefit-grid { grid-template-columns: 1fr; }
}
.ipnosi-product-page__benefit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  padding: 1.2rem 0.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--product-accent) 6%, transparent);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.ipnosi-product-page__benefit-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--product-accent) 18%, transparent);
}
.ipnosi-product-page__benefit-card p { margin: 0; font-size: 0.88rem; line-height: 1.3; }
.ipnosi-product-page__benefit-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--product-accent) 14%, transparent);
  color: var(--product-accent);
}
.ipnosi-product-page__benefit-icon svg { width: 1.5rem; height: 1.5rem; }

/* Variante con foto de fondo (pedido del cliente, referencia beneficios.png):
   el producto queda centrado en su propia foto de ambientación y los
   beneficios se reparten en 2 columnas a los lados, flotando sobre la foto
   (sin tarjeta) en vez de en la rejilla plana de arriba — misma pareja
   ícono+texto, solo activa cuando existe foto para ese producto (ver
   $ipnosi_has_benefits_bg en page-producto.php; sin foto, se usa la rejilla
   de siempre). justify-content:space-between dejo el hueco central a
   propósito: ahí se ve el producto de la foto de fondo, no hace falta un
   3er elemento "espaciador". */
.ipnosi-product-page__benefits-section--photo {
  position: relative;
  /* La foto es un <img> real (no background-image) para poder reordenarla
     con position en vez de pelear con un background-image inline en el
     breakpoint móvil (eso fue lo que obligaba a !important antes). El
     aspect-ratio viene de --benefits-ratio (custom property inline,
     page-producto.php, calculada con getimagesize() de la foto real) para
     que nunca se recorte ni un borde. min-height es solo red de seguridad
     si getimagesize() llegara a fallar (var sin valor => aspect-ratio:auto). */
  aspect-ratio: var(--benefits-ratio, auto);
  padding-block: var(--space-md);
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ipnosi-product-page__benefits-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
}
/* BUG real visto en producción: .benefits-desktop (el wrapper nuevo del
   <img> + .container, agregado para la variante móvil con foto dedicada)
   pasó a ser el hijo flex DIRECTO de la sección — sin ancho propio, un div
   de flex sin stretch explícito se encoge a su contenido en vez de llenar
   la fila, así que las 2 columnas de beneficios quedaban pegadas a la
   izquierda en vez de abrirse a los 2 lados del producto. */
.ipnosi-product-page__benefits-desktop { width: 100%; }
.ipnosi-product-page__benefits-section--photo .container { position: relative; z-index: 1; width: 100%; }
.ipnosi-product-page__benefit-flanks {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
}
.ipnosi-product-page__benefit-col {
  display: flex;
  flex-direction: column;
  /* pedido del cliente: que entre todo en 1 sola pantalla — con var(--space-lg)
     (4rem) de separación, 5 beneficios en una columna se iban más alto que un
     viewport típico. */
  gap: var(--space-sm);
  justify-content: center;
  flex: 0 1 300px;
}
.ipnosi-product-page__benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}
.ipnosi-product-page__benefit-item p {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1A181C;
  line-height: 1.3;
  /* halo blanco en vez de tarjeta opaca: mantiene el texto legible sobre
     zonas movidas/oscuras de la foto sin tapar la ambientación. */
  text-shadow: 0 1px 14px rgba(255,255,255,0.9), 0 1px 3px rgba(255,255,255,0.95), 0 0 2px rgba(255,255,255,0.95);
}
/* pedido del cliente: en páginas de tema oscuro (Ipnocare + Black Wax) el
   halo blanco se veía como un resplandor que ensuciaba el texto — ahí el
   texto va blanco sólido, sin sombra. */
.ipnosi-product-page:not(.ipnosi-product-page--light) .ipnosi-product-page__benefit-item p {
  color: #fff;
  text-shadow: none;
}
/* pedido del cliente: mismo criterio que la versión móvil — círculo violeta
   sólido, ícono blanco (antes el círculo era blanco con ícono violeta). */
.ipnosi-product-page__benefits-section--photo .ipnosi-product-page__benefit-icon {
  background: var(--product-accent);
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--product-accent) 35%, transparent);
}
/* BUG real visto en captura móvil (intento anterior): superponer los
   beneficios sobre la foto con aspect-ratio+min-height+flex-center dejaba la
   caja más baja de lo que el contenido necesitaba y todo se salía por
   arriba, pisando la sección anterior; la "solución" de quitar la foto en
   móvil tampoco servía (el cliente la quiere SIEMPRE visible). La solución
   real: la foto deja de ser un fondo superpuesto y pasa a flujo normal
   (position:static, alto automático) ARRIBA de los beneficios — se ve
   completa, sin recortes ni superposición — y los beneficios, ya sin la
   foto detrás, se aplanan en una rejilla de 2 columnas simple debajo. */
@media (max-width: 760px) {
  .ipnosi-product-page__benefits-section--photo {
    aspect-ratio: auto;
    min-height: 0;
    display: block;
    padding-block: var(--space-lg);
  }
  /* pedido del cliente: en tema oscuro (Black Wax + Ipnocare) ese
     padding-block quedaba como un espacio gris visible (el --bg de la
     página) entre los beneficios y la ficha técnica, porque la sección
     en sí no tiene fondo propio. Pensado solo para el fallback SIN foto
     móvil dedicada (ver comentario arriba) — cuando sí existe
     .benefits-mobile (la mayoría de los 15 productos), la foto ya trae su
     propio espacio en blanco integrado, así que aquí no debe sumarse
     padding extra. */
  .ipnosi-product-page__benefits-section--has-mobile-photo {
    padding-block: 0;
  }
  .ipnosi-product-page__benefits-photo {
    position: static;
    width: 100%;
    height: auto;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-lg);
  }
  .ipnosi-product-page__benefit-flanks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
  }
  .ipnosi-product-page__benefit-col {
    display: contents;
  }
}

/* Foto vertical dedicada para móvil (pedido del cliente: "4 beneficios en la
   parte superior de la imagen y 4 en la parte inferior") — cuando existe
   product-page-benefits-bg-{slug}-mobile.webp, reemplaza por completo al
   bloque de arriba en este breakpoint (ver
   .ipnosi-product-page__benefits-desktop--hide-mobile).
   Dos intentos previos fallaron: (1) top/bottom en % DENTRO de la foto — en
   12 de 15 fotos el splash/espuma/reflejo ocupa ~75-85% del alto, no hay
   margen real ahí sin importar el %; (2) padding-top/bottom en rem FIJO por
   línea, estimado a mano — quitó el choque pero la estimación quedó por
   encima del contenido real, dejando un hueco visible. Solución final: las
   filas dejan de estar en position:absolute sobre la foto y pasan a flujo
   normal — bloque ANTES de la <img> (fila de arriba) y bloque DESPUÉS (fila
   de abajo), ver orden en page-producto.php. El navegador calcula el alto
   de cada fila según su contenido real (1, 2 o 3 líneas de íconos), sin
   fórmula ni estimación — se adapta solo a cada producto/imagen/cantidad de
   beneficios, que es justamente lo pedido. */
.ipnosi-product-page__benefits-mobile { display: none; }
@media (max-width: 760px) {
  .ipnosi-product-page__benefits-desktop--hide-mobile { display: none; }
  .ipnosi-product-page__benefits-mobile {
    display: block;
    background: var(--bg);
  }
  /* var(--bg) en tema oscuro es #1A181C (gris de fondo general), no negro
     puro — contra la foto y la sección de ficha técnica, que SÍ son
     #000000, se veía como una costura gris (bug reportado). En tema claro
     var(--bg) ya resuelve a #fff correctamente, así que el override es
     solo para el oscuro. */
  .ipnosi-product-page:not(.ipnosi-product-page--light) .ipnosi-product-page__benefits-mobile {
    background: #000000;
  }
  .ipnosi-product-page__benefits-mobile-photo {
    width: 100%;
    height: auto;
    display: block;
  }
  .ipnosi-product-page__benefits-mobile-crop {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* difumina el borde inferior del recorte: el brillo/reflejo del piso
       seguía llegando al corte y dejaba una línea horizontal visible */
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
  }
  .ipnosi-product-page__benefits-mobile-crop .ipnosi-product-page__benefits-mobile-photo {
    position: absolute;
    left: 0;
  }
  .ipnosi-product-page__benefits-mobile-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 0.5rem;
    padding: 1.5rem;
  }
  /* pedido del cliente: cuando una fila tiene cantidad impar (3 beneficios
     arriba en la mayoría de productos, 5 en Hydra Milk Cold Violet), la
     rejilla de 2 columnas deja el último suelto, pegado a la izquierda —
     debe quedar centrado. :last-child:nth-child(odd) solo atrapa el caso en
     que el total de la fila es impar (el último elemento ocupa una posición
     impar únicamente cuando el conteo total es impar). */
  .ipnosi-product-page__benefits-mobile-row .ipnosi-product-page__benefit-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .ipnosi-product-page__benefits-mobile .ipnosi-product-page__benefit-item p {
    font-size: 0.78rem;
    text-shadow: none;
  }
  /* pedido del cliente: invertir el color — círculo violeta sólido, ícono
     blanco (antes era al revés: círculo claro, ícono violeta). */
  .ipnosi-product-page__benefits-mobile .ipnosi-product-page__benefit-icon {
    width: 2.4rem;
    height: 2.4rem;
    background: var(--product-accent);
    color: #fff;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--product-accent) 35%, transparent);
  }
  .ipnosi-product-page__benefits-mobile .ipnosi-product-page__benefit-icon svg {
    width: 1.2rem;
    height: 1.2rem;
  }
}

/* Ficha técnica básica + descarga del PDF completo (pedido del cliente) —
   tarjeta simple, specs a la izquierda (reusa .ipnosi-ficha__specs, mismo
   dt/dd que la ficha de compra real) y el botón de descarga a la derecha,
   bien visible en vez de perderse como un link de texto suelto. Pedido del
   cliente: fondo violeta (el acento del producto) "para que resalte" — el
   bloque que antes tenía ese tratamiento (el CTA final) pasa a blanco, ver
   abajo. dt/dd de .ipnosi-ficha__specs vienen en var(--text-muted)/var(--text)
   por defecto (pensados para fondo claro normal), así que aquí se fuerzan a
   blanco/semi-blanco para que se lean sobre el violeta. */
.ipnosi-product-page__techsheet {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  background: var(--product-accent);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
}
/* pedido del cliente: la SECCIÓN que envuelve la ficha técnica (entre la
   sección de beneficios y el CTA final) va en negro #000000, a todo el
   ancho, sin ser una tarjeta flotante con esquinas redondeadas (mockup del
   cliente: negro a banda completa, igual que las demás secciones oscuras de
   la página) — la tarjeta violeta de adentro (.ipnosi-product-page__techsheet)
   se queda igual, esto es solo el fondo que la rodea. SOLO en páginas de
   tema oscuro (Ipnocare + Black Wax): en las de tema claro (el resto de
   Styling) este fondo debe quedarse como estaba, sin forzar negro. */
.ipnosi-product-page:not(.ipnosi-product-page--light) .ipnosi-product-page__techsheet-section {
  background: #000000;
}
/* pedido del cliente: pegada al límite de la foto de beneficios, sin el
   padding-top de .ipnosi-content--tight (se declara después en la hoja y
   ganaba la cascada) — doble clase para subir la especificidad y que sí
   gane aquí. */
.ipnosi-content--tight.ipnosi-product-page__techsheet-section {
  padding-top: 0;
}
/* pedido del cliente: el contenedor solo lleva el título a la izquierda y el
   botón de descarga a la derecha — nada de la lista de specs (línea,
   formato, SKU), que ya vive en la ficha de producto de WooCommerce
   (single-product.php). */
.ipnosi-product-page__techsheet-title { margin-bottom: 0; color: #fff; }
.ipnosi-product-page__techsheet-download {
  flex: 0 0 auto;
  border-color: #fff;
  background: #fff;
  color: var(--product-accent);
}
.ipnosi-product-page__techsheet-download:hover { filter: brightness(0.96); }
.ipnosi-product-page__techsheet-download svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
/* pedido del cliente: en móvil el botón con el texto completo se partía en 3
   líneas y se veía enorme — ahí solo ícono + "Descargar". */
.ipnosi-product-page__techsheet-label-short { display: none; }
/* Perfect Blonde (página de línea) — ajustes de un solo slug.
   Móvil: el hero con 4 botes grandes deja poco aire; texto bajo el título más
   corto + fuente chica + bloque un poco más arriba, para que "Comprar ahora"
   quede sobre el banner de cookies en la primera visita. */
@media (max-width: 760px) {
  :is(.ipnosi-product-page--perfect-blonde, .ipnosi-product-page--attiva, .ipnosi-product-page--goccia-viva, .ipnosi-product-page--shockolor) .ipnosi-hero--has-mobile-photo .ipnosi-hero__content { margin-top: 29vh; }
  :is(.ipnosi-product-page--perfect-blonde, .ipnosi-product-page--attiva, .ipnosi-product-page--goccia-viva, .ipnosi-product-page--shockolor) .ipnosi-hero--has-mobile-photo .ipnosi-hero__lede { font-size: 0.95rem; }
  /* El texto cae sobre el reflejo del mármol, que es más claro que el fondo de
     las demás fotos: el degradado general (transparente a 55%) no lo oscurece
     lo suficiente. Aquí sube más y es más denso en la zona del texto. */
  :is(.ipnosi-product-page--perfect-blonde, .ipnosi-product-page--attiva, .ipnosi-product-page--goccia-viva, .ipnosi-product-page--shockolor) .ipnosi-hero--has-mobile-photo .ipnosi-hero__media::after {
    background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 30%, color-mix(in srgb, var(--bg) 78%, transparent) 40%, color-mix(in srgb, var(--bg) 40%, transparent) 48%, transparent 58%);
  }
}
/* Desktop: la foto de beneficios tiene 4 botes anchos en el centro (22%-78% del
   ancho); las columnas del .container (1240px) caían encima de ellos. Se sacan
   a todo el ancho de la ventana, cada columna dentro del margen libre. */
/* Goccia Viva, móvil: sus 14 botellas bajan hasta ~63% del alto (en Attiva /
   Perfect Blonde ~54%) y el título caía encima de la fila de abajo, tapando
   etiquetas. Bajar el texto no cabe (el botón quedaría detrás del banner de
   cookies), así que se sube la foto: el 13% de arriba es oscuro y vacío. */
@media (max-width: 760px) {
  .ipnosi-product-page--goccia-viva .ipnosi-hero--has-mobile-photo .ipnosi-hero__photo { transform: translateY(-8vh); }
  /* Shockolor: tubo + caja llegan a ~58% del alto (reflejo hasta ~70%); el
     título del 29vh caería sobre el reflejo/base — la parte de arriba (hasta
     ~32%) es oscura y vacía, se sube la foto como en Goccia Viva. */
  .ipnosi-product-page--shockolor .ipnosi-hero--has-mobile-photo .ipnosi-hero__photo { transform: translateY(-6vh); }
  /* la foto de beneficios de Shockolor arranca en roca rosa sobre negro: el
     recorte dejaba una línea dura arriba; se difumina también el borde superior */
  .ipnosi-product-page--shockolor .ipnosi-product-page__benefits-mobile-crop {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
  }
}
/* Attiva, desktop: la primera botella arranca a ~38% del ancho, justo donde
   llegaba el párrafo del hero (ocupaba hasta 596px a 1440 y la botella
   empieza en ~545) — se limita el ancho del texto bajo el título. */
@media (min-width: 761px) {
  :is(.ipnosi-product-page--attiva, .ipnosi-product-page--goccia-viva) .ipnosi-hero__lede { max-width: min(24rem, 28vw); }
  /* el eslogan azul es un span en una línea: a ~1100px cruzaba las botellas */
  :is(.ipnosi-product-page--attiva, .ipnosi-product-page--goccia-viva) .ipnosi-product-page__hero-category { display: block; max-width: min(24rem, 28vw); }
}
@media (min-width: 761px) {
  :is(.ipnosi-product-page--perfect-blonde, .ipnosi-product-page--attiva, .ipnosi-product-page--goccia-viva, .ipnosi-product-page--shockolor) .ipnosi-product-page__benefit-flanks {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-inline: 2vw;
  }
  :is(.ipnosi-product-page--perfect-blonde, .ipnosi-product-page--attiva, .ipnosi-product-page--goccia-viva, .ipnosi-product-page--shockolor) .ipnosi-product-page__benefit-col { flex: 0 1 19vw; }
}
/* Páginas de línea: una descarga por producto (ej. los 4 polvos de Perfect
   Blonde), en fila a la derecha del título y centradas al apilarse en móvil. */
/* Página de cuadrícula de fichas técnicas (page-fichas.php): una tarjeta por
   tono/producto con muestra de color, SKU y descarga del PDF. */
.ipnosi-sheets__head { padding-bottom: var(--space-md); }
.ipnosi-sheets__back { display: inline-block; margin-bottom: 1.25rem; font-size: 0.9rem; color: var(--text-muted); }
.ipnosi-sheets__back:hover { color: var(--accent-soft); }
.ipnosi-sheets__sub { color: var(--text-muted); max-width: 52ch; }
.ipnosi-sheets__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem;
}
.ipnosi-sheets__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1rem 1.2rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.ipnosi-sheets__card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--swatch-hover, var(--product-accent)) 70%, transparent); }
.ipnosi-sheets__swatch {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.5), transparent 45%), var(--swatch);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 10px 26px color-mix(in srgb, var(--swatch) 45%, transparent);
  margin-bottom: 0.4rem;
}
.ipnosi-sheets__name { font-family: var(--font-display); font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.1; min-height: 2.2em; display: flex; align-items: center; justify-content: center; }
.ipnosi-sheets__sku { font-size: 0.72rem; letter-spacing: 0.14em; color: var(--text-muted); }
.ipnosi-sheets__sub-name { font-size: 0.8rem; line-height: 1.3; color: var(--text-muted); min-height: 2.6em; }
/* Shockolor: agrupado por familias (carta oficial) con chips de salto rápido */
.ipnosi-sheets__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.ipnosi-sheets__chips a {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.9rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ipnosi-sheets__chips a:hover { border-color: var(--product-accent); color: var(--text); }
.ipnosi-sheets__group { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.8rem); margin: 2.5rem 0 1rem; scroll-margin-top: calc(var(--header-h, 76px) + 1rem); }
.ipnosi-sheets__group:first-child { margin-top: 0; }
.ipnosi-sheets__download {
  margin-top: 0.7rem;
  padding: 0.6rem 1.3rem;
  font-size: 0.85rem;
  background: #fff;
  border-color: #fff;
  color: var(--product-accent);
}
.ipnosi-sheets__download:hover { filter: brightness(0.96); }
.ipnosi-sheets__download svg { width: 1rem; height: 1rem; flex-shrink: 0; }
@media (max-width: 760px) {
  .ipnosi-sheets__grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .ipnosi-sheets__card { padding: 1.2rem 0.6rem 1rem; }
  .ipnosi-sheets__swatch { width: 3.6rem; height: 3.6rem; }
  .ipnosi-sheets__name { font-size: 1.05rem; }
  /* con cantidad impar, la última tarjeta queda sola: centrada, del ancho de una columna */
  .ipnosi-sheets__card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.375rem); }
}
/* Páginas de línea: UN botón (igual que en las de producto) que abre un
   dropdown para elegir la ficha. <details> nativo: accesible por teclado sin
   JS; main.js solo lo cierra al hacer clic fuera o con Escape. */
.ipnosi-product-page__techsheet-dropdown { position: relative; flex: 0 0 auto; }
.ipnosi-product-page__techsheet-dropdown > summary { list-style: none; cursor: pointer; }
.ipnosi-product-page__techsheet-dropdown > summary::-webkit-details-marker { display: none; }
.ipnosi-product-page__techsheet-chevron { transition: transform 0.2s ease; }
.ipnosi-product-page__techsheet-dropdown[open] .ipnosi-product-page__techsheet-chevron { transform: rotate(180deg); }
.ipnosi-product-page__techsheet-menu {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 100%;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
  z-index: 30;
}
.ipnosi-product-page__techsheet-menu a {
  display: block;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  color: var(--product-accent);
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
}
.ipnosi-product-page__techsheet-menu a:hover,
.ipnosi-product-page__techsheet-menu a:focus-visible { background: color-mix(in srgb, var(--product-accent) 12%, transparent); }
/* el menú se abre hacia abajo y se sale de la tarjeta: la sección debe quedar
   por encima del CTA que sigue */
.ipnosi-product-page__techsheet-section { position: relative; z-index: 2; }
@media (max-width: 760px) {
  .ipnosi-product-page__techsheet-dropdown { align-self: center; }
  .ipnosi-product-page__techsheet-menu { right: auto; left: 50%; transform: translateX(-50%); min-width: 14rem; }
}
@media (max-width: 760px) {
  .ipnosi-product-page__techsheet-label-full { display: none; }
  .ipnosi-product-page__techsheet-label-short { display: inline; }
}

/* CTA final de cierre — a propósito distinto del resto de bandas del sitio
   (.ipnosi-distributor/.ipnosi-cta-panel, siempre con el mismo violeta de
   marca): aquí, en vez de un bloque de color sólido, queda blanco/claro
   (pedido del cliente, para no repetir el tratamiento de la ficha técnica de
   arriba), con el color de acento solo en los detalles (eyebrow, botón) —
   su protagonismo lo lleva el producto, no el fondo.

   Variante "--photo" (pedido del cliente: "no me gusta que tenga una imagen
   del producto en un recuadro, quisiera que la imagen cubriera el total del
   contenedor del CTA"): reusa el mismo patrón ya probado en
   .ipnosi-hero--image (foto de fondo a pantalla completa + velo degradado
   detrás del texto), con color-mix sobre var(--bg) en vez de los tonos fijos
   del hero claro, para que el degradado se adapte solo tanto al tema claro
   de Styling como al oscuro de Ipnocare. Sin imagen dedicada
   (product-page-cta-{slug}.webp inexistente), cae al layout anterior de
   packshot en recuadro — "mejora opcional por archivo", mismo criterio que
   el resto de fotos de esta página. */
.ipnosi-product-page__final-cta {
  position: relative;
  background: color-mix(in srgb, var(--product-accent) 6%, var(--bg));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.ipnosi-product-page__final-cta-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  gap: var(--space-lg);
  padding-block: var(--space-xl);
}
.ipnosi-product-page__final-cta-visual { display: flex; justify-content: center; }
.ipnosi-product-page__final-cta-visual img {
  max-width: 100%;
  max-height: 380px;
  width: auto;
  filter: drop-shadow(0 20px 30px color-mix(in srgb, var(--product-accent) 25%, transparent));
}
.ipnosi-product-page__final-cta-eyebrow {
  color: var(--product-accent);
  font-family: 'Miranda Sans', var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.ipnosi-product-page__final-cta-headline {
  color: var(--text);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.2rem);
  max-width: 16ch;
  margin-bottom: var(--space-md);
}
/* El botón reusa .btn.btn-primary tal cual (pedido del cliente: "debería ser
   igual al del hero") — sin clase/color propios que lo diferencien. */
@media (max-width: 860px) {
  .ipnosi-product-page__final-cta-inner { grid-template-columns: 1fr; text-align: center; }
  .ipnosi-product-page__final-cta-headline { max-width: none; margin-inline: auto var(--space-md); }
  .ipnosi-product-page__final-cta-visual { order: -1; }
}

/* La foto de referencia (Hydra Milk) deja el modelo+producto a la izquierda y
   un espacio despejado a la derecha a propósito para el texto — el degradado
   y el bloque de texto van del lado derecho para aprovechar ese espacio
   (si una foto futura deja el espacio del otro lado, este patrón necesitará
   un modificador aparte; no se generaliza todavía porque solo existe esta
   foto). object-position sesgado hacia arriba: en pantallas muy anchas el
   recuadro es más ancho que la foto (2:1), así que cover recorta
   verticalmente, no lateralmente — sesgar hacia arriba evita que ese recorte
   se coma la cara del modelo. */
/* pedido del cliente: 480px recortaba de más en pantallas anchas — varios
   productos (los pares de Ipnocare, composiciones más altas) quedaban
   cortados. Más alto reduce cuánto recorta cover verticalmente. */
.ipnosi-product-page__final-cta--photo { min-height: 720px; display: flex; align-items: center; }
.ipnosi-product-page__final-cta--photo .ipnosi-product-page__final-cta-inner {
  grid-template-columns: 1fr;
  padding-block: var(--space-xl);
  justify-items: end;
}
/* pedido del cliente: el bloque (eyebrow+título+botón) va del lado derecho
   del contenedor, pero centrado respecto a sí mismo, no con el texto en
   "bandera" pegado al borde derecho. */
.ipnosi-product-page__final-cta--photo .ipnosi-product-page__final-cta-content {
  max-width: 440px;
  text-align: center;
}
.ipnosi-product-page__final-cta-media { position: absolute; inset: 0; z-index: 0; }
.ipnosi-product-page__final-cta-media img,
.ipnosi-product-page__final-cta-media picture { display: block; width: 100%; height: 100%; }
.ipnosi-product-page__final-cta-media img { object-fit: cover; object-position: center 25%; }
.ipnosi-product-page__final-cta-media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* pedido del cliente: el velo llegaba hasta cubrir parte del producto —
     se acorta para que quede confinado al cuarto derecho de la imagen,
     justo debajo del texto, sin tocar el frasco. */
  background: linear-gradient(270deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 75%, transparent) 16%, transparent 40%);
}
/* Móvil: la foto (recorte propio -mobile.webp, modelo+producto sin el
   espacio en blanco sobrante) deja de ser fondo superpuesto y pasa a flujo
   normal arriba del bloque de texto — mismo criterio ya aplicado a la foto
   de beneficios: "la imagen se debe mostrar completa", no recortada a la
   fuerza detrás de un velo que en una columna angosta tapa al modelo. */
@media (max-width: 760px) {
  .ipnosi-product-page__final-cta--photo { min-height: 0; display: block; }
  .ipnosi-product-page__final-cta--photo .ipnosi-product-page__final-cta-media {
    position: static;
    aspect-ratio: 10 / 9;
  }
  .ipnosi-product-page__final-cta--photo .ipnosi-product-page__final-cta-media img { object-position: center top; }
  .ipnosi-product-page__final-cta--photo .ipnosi-product-page__final-cta-media::after { display: none; }
  .ipnosi-product-page__final-cta--photo .ipnosi-product-page__final-cta-inner {
    display: block;
    padding-block: var(--space-lg);
    text-align: center;
  }
  .ipnosi-product-page__final-cta--photo .ipnosi-product-page__final-cta-content {
    max-width: none;
    text-align: center;
  }
}
@media (max-width: 600px) {
  .ipnosi-product-page__techsheet { flex-direction: column; align-items: stretch; text-align: center; }
  .ipnosi-product-page__techsheet-download { justify-content: center; }
}

/* Modo de uso, numerado */
.ipnosi-product-page__usage {
  max-width: 70ch;
  margin: var(--space-sm) auto 0;
  padding-left: 0;
  list-style: none;
}
.ipnosi-product-page__usage li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.ipnosi-product-page__usage-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--product-accent);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}

/* ---------- Header ---------- */
/* El backdrop-filter:blur del header, justo debajo del degradado sólido de
   .ipnosi-announce, deja una línea de 1px visible en el borde (el blur
   muestrea el píxel límite de la barra de arriba y el redondeo de la capa
   GPU del sticky no cierra perfecto contra ella — pedido del cliente: "se
   alcanza a notar"). Subir el header 1px con margin-top negativo y devolver
   ese mismo 1px como padding-top lo monta sobre el borde sin mover el
   contenido ni cambiar el alto visible. */
.ipnosi-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* 1px no alcanzaba a cubrirlo en móvil (mayor densidad de píxel = el
     redondeo de la capa GPU del sticky necesita más margen). 2px sigue
     siendo imperceptible en el alto del header. */
  margin-top: -2px;
  padding-top: 2px;
  background: rgba(33, 30, 37, 0.55);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.ipnosi-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: 1rem;
}
.ipnosi-header__logo img { height: 42px !important; width: auto !important; max-width: 220px !important; }
.ipnosi-header__nav { flex: 1; order: 2; }
.ipnosi-header__mobile-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  order: 4;
}
.ipnosi-nav__list {
  list-style: none;
  display: flex;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  font-size: 0.92rem;
  font-weight: 600;
}
.ipnosi-nav__list a {
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.ipnosi-nav__item--has-submenu { position: relative; }
.ipnosi-nav__submenu {
  list-style: none;
  margin: 0;
  padding: 0.4rem;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 20;
}
.ipnosi-nav__item--has-submenu:hover > .ipnosi-nav__submenu,
.ipnosi-nav__item--has-submenu:focus-within > .ipnosi-nav__submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* Productos > Línea > Producto: el segundo nivel se abre hacia la derecha del
   primero (desktop). El nivel interno solapa un poco al padre para que el
   cursor no pierda el hover al cruzar el hueco. */
.ipnosi-nav__label { cursor: default; }
.ipnosi-nav__item--has-flyout > a::after { content: "\203A"; float: right; margin-left: 0.8rem; opacity: 0.6; }
.ipnosi-nav__submenu .ipnosi-nav__submenu--products {
  top: -0.4rem;
  left: calc(100% - 0.3rem);
  min-width: 190px;
}
.ipnosi-nav__submenu a { display: block; padding: 0.5rem 0.6rem; border-bottom: none; border-radius: var(--radius-md); }
.ipnosi-nav__submenu a:hover { background: rgba(154, 77, 235, 0.12); color: var(--accent-soft); }
.ipnosi-line-profile__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
@media (max-width: 800px) { .ipnosi-line-profile__gallery { grid-template-columns: 1fr; } }
.ipnosi-line-profile__badges { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ipnosi-line-profile__badges li { border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.4rem 0.9rem; font-size: 0.8rem; color: var(--text-muted); }
.ipnosi-line-profile__hero .eyebrow { color: var(--line-accent, var(--accent-soft)); }
.ipnosi-nav__list a:hover,
.ipnosi-nav__list .current-menu-item > a {
  border-color: var(--accent);
  color: var(--accent-soft);
}

.ipnosi-header__cta {
  padding: 0;
  width: 40px;
  height: 40px;
  justify-content: center;
  border-radius: var(--radius-md);
}
.ipnosi-header__cta-icon { display: block; flex-shrink: 0; }
.ipnosi-header__cta-label { position: absolute; left: -9999px; }

.ipnosi-cart-btn-wrap { position: relative; display: inline-flex; }
.ipnosi-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  border: 1px solid var(--line);
  color: var(--text);
}
.ipnosi-cart-btn::after { display: none; }
.ipnosi-cart-btn:hover,
.ipnosi-cart-btn:active { transform: none; filter: none; }
.ipnosi-cart-btn__icon { display: block; flex-shrink: 0; }
.ipnosi-cart-btn__count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand-violet-dark);
  box-shadow: 0 0 0 2px var(--bg);
  z-index: 2;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ipnosi-lang-switch { position: relative; }
.ipnosi-market-switch { position: relative; }

.ipnosi-lang-switch__toggle,
.ipnosi-market-switch__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.ipnosi-lang-switch__list,
.ipnosi-market-switch__list {
  display: none;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.3rem;
  gap: 0.15rem;
  z-index: 10;
}
.ipnosi-lang-switch.is-open .ipnosi-lang-switch__list,
.ipnosi-market-switch.is-open .ipnosi-market-switch__list { display: flex; }

.ipnosi-lang-switch__item,
.ipnosi-market-switch__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-md);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ipnosi-lang-switch__item:hover,
.ipnosi-market-switch__item:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.ipnosi-lang-switch__item.is-current,
.ipnosi-market-switch__item.is-current {
  background: var(--accent);
  color: #fff;
}

@media (min-width: 901px) {
  .ipnosi-cart-btn-wrap { order: 0; }
  .ipnosi-market-switch { order: 1; }
  .ipnosi-header__cta { order: 2; }
  .ipnosi-lang-switch { order: 3; }
  .ipnosi-cart-btn {
    border-radius: 50% !important;
    border: none;
    background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 45%, var(--brand-violet-dark) 75%, var(--accent) 100%) !important;
    color: #fff;
  }
  .ipnosi-cart-btn::after { display: block; }
  .ipnosi-cart-btn:hover { filter: brightness(1.12); }
  .ipnosi-cart-btn:active { transform: scale(0.97) !important; filter: brightness(1.15) !important; }
  .ipnosi-lang-switch__toggle,
  .ipnosi-market-switch__toggle { display: none; }
  .ipnosi-lang-switch__list,
  .ipnosi-market-switch__list {
    display: inline-flex;
    flex-direction: row;
    position: static;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 0.2rem;
    gap: 0.15rem;
  }
  .ipnosi-lang-switch__item,
  .ipnosi-market-switch__item {
    border-radius: var(--radius-pill);
    min-width: 2rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
  }

  .ipnosi-header__cta {
    padding: 0.9rem 1.9rem;
    width: auto;
    height: auto;
    border-radius: var(--radius-pill);
  }
  .ipnosi-header__cta-icon { display: none; }
  .ipnosi-header__cta-label { position: static; left: auto; }
}

.ipnosi-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: transparent;
  flex-shrink: 0;
}
.ipnosi-header__toggle-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.ipnosi-header__toggle.is-active .ipnosi-header__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ipnosi-header__toggle.is-active .ipnosi-header__toggle-bar:nth-child(2) { opacity: 0; }
.ipnosi-header__toggle.is-active .ipnosi-header__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ipnosi-header__panel { display: contents; }

@media (max-width: 900px) {
  .ipnosi-header__toggle { display: flex; }
  .ipnosi-header__panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: var(--space-sm);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: var(--space-sm) var(--space-md) var(--space-md);
    /* con los submenús de productos el panel mide más que la pantalla:
       debe tener su propio scroll o los últimos productos son inalcanzables */
    /* 140px = peor caso medido: la barra superior (~83px) + el header, con la
       página en scroll 0; así el panel nunca se sale por abajo */
    max-height: calc(100vh - 140px);
    max-height: calc(100dvh - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ipnosi-header__panel.is-open { display: flex; }
  .ipnosi-header__panel .ipnosi-header__nav { display: block; }
  .ipnosi-header__panel .ipnosi-nav__list {
    flex-direction: column;
    gap: 0.25rem;
    font-size: 1rem;
  }
  .ipnosi-header__panel .ipnosi-nav__list a { display: block; padding: 0.6rem 0; }
  /* Sin hover en táctil — el submenú de Productos queda siempre visible,
     como una lista anidada en vez de un popup. */
  .ipnosi-header__panel .ipnosi-nav__submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    box-shadow: none;
    background: none;
    padding: 0 0 0 var(--space-sm);
    margin-top: 0.15rem;
  }
  .ipnosi-header__panel .ipnosi-nav__item--has-flyout > a::after { display: none; }
  .ipnosi-header__panel .ipnosi-nav__submenu .ipnosi-nav__submenu--products {
    min-width: 0;
    font-size: 0.92rem;
    font-weight: 500;
  }
}

/* ---------- Buttons (override) ---------- */
.btn { position: relative; overflow: hidden; }

/* ---------- Photo placeholder ---------- */
.ipnosi-photo {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background-color: var(--bg);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.035) 0px,
    rgba(255,255,255,0.035) 1px,
    transparent 1px,
    transparent 14px
  );
}
.ipnosi-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ipnosi-photo__label {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  font-family: monospace;
  font-size: 0.7rem;
  color: var(--text-muted);
  opacity: 0.7;
}

/* ---------- Hero ---------- */
.ipnosi-hero {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: calc(-1 * var(--header-h, 76px));
  padding-top: calc(var(--header-h, 76px) + var(--space-xl));
  padding-bottom: var(--space-xl);
  min-height: 100vh;
  min-height: 100svh;
  box-sizing: border-box;
  overflow: hidden;
}
.ipnosi-hero > .container { width: 100%; }
.ipnosi-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 55% at 20% 15%, rgba(154,77,235,0.22), transparent 70%);
  z-index: -2;
}
.ipnosi-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.ipnosi-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 50%;
}
.ipnosi-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(26,24,28,0.65) 30%, rgba(26,24,28,0) 62%);
}
.ipnosi-hero__content { max-width: 640px; }
.ipnosi-hero__highlight {
  background: linear-gradient(90deg, var(--accent-soft), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ipnosi-hero__lede { color: var(--text-muted); font-size: 1.1rem; max-width: 46ch; }
.ipnosi-hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: var(--space-sm); }

/* ---------- Audience (B2B / B2C) ---------- */
.ipnosi-audience { padding-block: var(--space-lg); }
.ipnosi-audience__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-md);
}
.ipnosi-audience__card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ipnosi-audience__card--featured {
  background: linear-gradient(160deg, rgba(154,77,235,0.14) 0%, var(--surface) 55%);
}
.ipnosi-audience__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(154, 77, 235, 0.2);
}
.ipnosi-audience__body { display: block; padding: var(--space-md); }
.ipnosi-audience__link { display: inline-block; margin-top: 0.4rem; font-weight: 700; color: var(--accent-soft); }

/* ---------- Product lines ---------- */
.ipnosi-lines { padding-block: var(--space-lg); background: var(--surface); }
.ipnosi-lines__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.ipnosi-lines__viewall { font-weight: 700; color: var(--accent-soft); }
.ipnosi-lines__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.ipnosi-line-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-accent, var(--accent));
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.ipnosi-line-card__body { padding: var(--space-sm) var(--space-md) var(--space-md); }
.ipnosi-line-card__body h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  font-size: 1.4rem;
}
.ipnosi-line-card__badge {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--line-accent, var(--accent-soft));
  border: 1px solid var(--line-accent, var(--accent));
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.6rem;
}
.ipnosi-line-card:hover {
  transform: translateY(-4px);
  border-left-color: var(--line-accent, var(--accent));
  box-shadow: 0 16px 34px rgba(154, 77, 235, 0.18);
}
.ipnosi-line-card--shockolor,
.ipnosi-line-card--curacolor,
.ipnosi-line-card--blonde,
.ipnosi-line-card--goccia,
.ipnosi-line-card--styling,
.ipnosi-line-card--ipnocare,
.ipnosi-line-card--attiva { --line-accent: #9A4DEB; }

@media (min-width: 901px) {
  .ipnosi-lines__grid { grid-template-columns: repeat(12, 1fr); }
  .ipnosi-lines__grid > .ipnosi-line-card { grid-column: span var(--card-span, 4); }
}
@media (max-width: 900px) {
  .ipnosi-lines__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ipnosi-lines__grid { grid-template-columns: 1fr; }
}

/* ---------- Catálogo (página Productos) ---------- */
.ipnosi-catalog-filters {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: var(--space-md);
}
.ipnosi-catalog-filter {
  padding: 0.65rem 1.3rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ipnosi-catalog-filter:hover { border-color: var(--accent); color: var(--text); }
.ipnosi-catalog-filter.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ipnosi-catalog-subfilters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.65rem;
}
.ipnosi-catalog-subfilters[hidden] { display: none; }
.ipnosi-catalog-subfilter {
  padding: 0.4rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ipnosi-catalog-subfilter:hover { border-color: var(--accent-soft); color: var(--text); }
.ipnosi-catalog-subfilter.is-active { background: var(--accent-soft); border-color: var(--accent-soft); color: #fff; }

/* Tercer nivel: familias de tono dentro de Shockolor (ver
   ipnosi_render_catalog_filters). Un peldaño más chico que el subfiltro de
   línea, para que se lea como "dentro de" en vez de "al lado de". */
.ipnosi-catalog-families {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.65rem;
}
.ipnosi-catalog-families__break {
  flex-basis: 100%;
  width: 0;
  height: 0;
}
.ipnosi-catalog-family {
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ipnosi-catalog-family:hover { border-color: var(--line-accent, var(--accent-soft)); color: var(--text); }
.ipnosi-catalog-family.is-active { background: var(--line-accent, var(--accent-soft)); border-color: var(--line-accent, var(--accent-soft)); color: #fff; }

.ipnosi-catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.ipnosi-sku-card {
  display: block;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-accent, var(--accent));
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg);
}
.ipnosi-sku-card.is-hidden { display: none; }
.ipnosi-sku-card__body { padding: var(--space-sm) var(--space-sm) var(--space-md); }
.ipnosi-sku-card__eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--line-accent, var(--accent-soft));
  margin-bottom: 0.3rem;
}
.ipnosi-sku-card__body h3 { font-size: 1.1rem; margin-bottom: 0.2rem; }
.ipnosi-sku-card__size { display: block; font-size: 0.82rem; color: var(--text-muted); }
.ipnosi-sku-card__price { display: block; margin-top: 0.3rem; font-weight: 700; color: var(--accent-soft); }
.ipnosi-sku-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}
.ipnosi-sku-card__usage { font-size: 0.78rem; color: var(--text-muted); }
.btn-sm { padding: 0.55rem 1.1rem; font-size: 0.78rem; }

.ipnosi-sku-card--shockolor,
.ipnosi-sku-card--curacolor,
.ipnosi-sku-card--blonde,
.ipnosi-sku-card--goccia,
.ipnosi-sku-card--styling,
.ipnosi-sku-card--ipnocare,
.ipnosi-sku-card--attiva { --line-accent: #9A4DEB; }

@media (max-width: 1100px) { .ipnosi-catalog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .ipnosi-catalog-grid { grid-template-columns: repeat(2, 1fr); } }
/* Por debajo de 520px se mantienen las 2 columnas con la tipografía reducida
   — ver el bloque "Grid de producto en móvil" al final del archivo. */

/* ---------- Tecnología italiana ---------- */
.ipnosi-tech { padding-block: var(--space-lg); }
.ipnosi-tech--accent { background: var(--brand-violet-dark); }
.ipnosi-tech--accent h2,
.ipnosi-tech--accent h4,
.ipnosi-tech--accent p,
.ipnosi-tech--accent .ipnosi-tech__num { color: #fff; }
.ipnosi-tech--accent .ipnosi-tech__features,
.ipnosi-tech--accent .ipnosi-tech__feature { border-color: rgba(255, 255, 255, 0.25); }
.ipnosi-tech__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.ipnosi-tech__intro p:last-child { color: var(--text-muted); }
.ipnosi-tech__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.ipnosi-tech__feature {
  padding: var(--space-md);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ipnosi-tech__feature:nth-child(2n) { border-right: none; }
.ipnosi-tech__feature:nth-last-child(-n+2) { border-bottom: none; }
.ipnosi-tech__num { display: block; font-weight: 700; color: var(--accent-soft); margin-bottom: 0.35rem; }
.ipnosi-tech__feature h4 { font-family: var(--font-body); font-size: 0.98rem; font-weight: 700; color: var(--text); margin: 0 0 0.3rem; }
.ipnosi-tech__feature p { font-size: 0.9rem; color: var(--text-muted); margin: 0; }

@media (max-width: 900px) {
  .ipnosi-tech__grid { grid-template-columns: 1fr; }
}

/* ---------- Testimonios ---------- */
.ipnosi-testimonials { padding-block: var(--space-lg); }
.ipnosi-testimonials .eyebrow,
.ipnosi-testimonials h2 { text-align: center; }
.ipnosi-testimonials h2 { max-width: none; margin-inline: auto; }
.ipnosi-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.ipnosi-testimonial {
  margin: 0;
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.ipnosi-testimonial__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.ipnosi-testimonial blockquote { margin: 0 0 var(--space-md); font-size: 0.95rem; color: var(--text); }
.ipnosi-testimonial figcaption { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; }
.ipnosi-testimonial__role { display: block; color: var(--text-muted); }

/* ---------- CTA panel (newsletter, distribuidor) ---------- */
.ipnosi-cta-panel {
  margin-top: var(--space-lg);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: radial-gradient(60% 100% at 50% 0%, rgba(154,77,235,0.18), var(--surface) 70%);
}
.ipnosi-cta-panel h2 { margin-bottom: 0.5rem; }
.ipnosi-cta-panel > p { margin-inline: auto; color: var(--text-muted); }
.ipnosi-cta-panel .ipnosi-form { margin-inline: auto; text-align: left; margin-top: var(--space-sm); }
.ipnosi-cta-panel__inline-form {
  margin-top: var(--space-sm);
  display: inline-flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}
.ipnosi-cta-panel__inline-form input {
  min-width: 260px;
  padding: 0.9rem 1.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.ipnosi-cta-panel__inline-form input::placeholder { color: var(--text-muted); }

/* ---------- Generic content pages ---------- */
.ipnosi-content { padding-block: var(--space-lg); }
.ipnosi-content--page { max-width: 800px; }
.ipnosi-content--tight { padding-top: var(--space-sm); }

.ipnosi-photo--square { aspect-ratio: 1 / 1; }
.ipnosi-legal { max-width: 68ch; }
.ipnosi-legal h2 { margin-top: var(--space-md); font-size: 1.2rem; }
.ipnosi-legal p { color: var(--text-muted); }
.ipnosi-ficha__back { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--accent-soft); font-weight: 600; font-size: 0.85rem; margin-bottom: var(--space-sm); }
.ipnosi-ficha__back:hover { color: var(--text); }
.ipnosi-ficha__specs { margin: var(--space-md) 0; border-top: 1px solid var(--line); }
.ipnosi-ficha__specs > div { display: flex; justify-content: space-between; padding: 0.7rem 0; border-bottom: 1px solid var(--line); }
.ipnosi-ficha__specs dt { color: var(--text-muted); font-size: 0.85rem; margin: 0; }
.ipnosi-ficha__specs dd { margin: 0; font-weight: 600; font-size: 0.9rem; }
.ipnosi-ficha__ctas { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.ipnosi-page-hero {
  padding-block: calc(var(--space-xl) * 0.55) var(--space-lg);
  border-bottom: 1px solid var(--line);
}
.ipnosi-page-hero__lede { color: var(--text-muted); max-width: 60ch; margin-top: var(--space-xs); }
.ipnosi-page-hero--center { text-align: center; }
.ipnosi-page-hero--center .ipnosi-page-hero__lede { margin-inline: auto; max-width: none; }
.ipnosi-page-hero--center .ipnosi-catalog-filters { justify-content: center; }
.ipnosi-page-hero--center .ipnosi-catalog-subfilters { justify-content: center; }
.ipnosi-page-hero--center .ipnosi-catalog-families { justify-content: center; }
.ipnosi-page-hero--flush { border-bottom: none; padding-bottom: var(--space-xs); }
.ipnosi-page-hero--glow { position: relative; overflow: hidden; }
.ipnosi-page-hero--glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(55% 65% at 20% 20%, rgba(154,77,235,0.22), transparent 70%);
  z-index: -1;
}
.ipnosi-page-hero--photo {
  display: flex;
  align-items: center;
  margin-top: calc(-1 * var(--header-h, 76px));
  padding-top: calc(var(--header-h, 76px) + var(--space-lg));
  padding-bottom: var(--space-lg);
  min-height: 100vh;
  min-height: 100svh;
  box-sizing: border-box;
}
.ipnosi-page-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.ipnosi-page-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 80% 25%;
}
@media (max-width: 900px) {
  .ipnosi-page-hero__media img { object-position: 75% 20%; }
}
.ipnosi-page-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(26,24,28,0.9) 45%, rgba(26,24,28,0.55) 75%, rgba(26,24,28,0.2) 100%);
}

/* ---------- Sistemas técnicos (página Profesionales) ---------- */
.ipnosi-tech-system {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}
.ipnosi-tech-system + .ipnosi-tech-system { margin-top: var(--space-sm); }
.ipnosi-tech-system__body { padding: var(--space-lg) var(--space-md); }
.ipnosi-tech-system__tag {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--line-accent, var(--accent-soft));
  margin-bottom: 0.6rem;
}
.ipnosi-tech-system__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-accent, var(--accent)); flex: 0 0 auto; }
.ipnosi-tech-system__badges { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: var(--space-sm); }
.ipnosi-tech-system__badges span {
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  color: var(--text-muted);
}
@media (max-width: 800px) {
  .ipnosi-tech-system { grid-template-columns: 1fr; }
}

/* ---------- CTA panel split (distribuidor) ---------- */
.ipnosi-cta-panel__list { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: grid; gap: 0.6rem; }
.ipnosi-cta-panel__list li { display: flex; gap: 0.75rem; align-items: baseline; font-size: 0.92rem; }
.ipnosi-cta-panel__list-num { color: var(--accent-soft); font-weight: 700; font-family: var(--font-body); }

/* ---------- Distribuidor (full-bleed, como .ipnosi-tech--accent) ---------- */
.ipnosi-distributor { background: var(--brand-violet-dark); padding-block: var(--space-lg); }
.ipnosi-distributor .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-lg);
  align-items: center;
}
.ipnosi-distributor h2,
.ipnosi-distributor p,
.ipnosi-distributor .ipnosi-cta-panel__list li,
.ipnosi-distributor .ipnosi-cta-panel__list-num { color: #fff; }
.ipnosi-distributor .ipnosi-form input {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.ipnosi-distributor .ipnosi-form input::placeholder { color: rgba(255, 255, 255, 0.65); }
@media (max-width: 900px) {
  .ipnosi-distributor .container { grid-template-columns: 1fr; }
}

.ipnosi-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-lg);
  align-items: start;
}
.ipnosi-split--middle { align-items: center; }
@media (max-width: 900px) {
  .ipnosi-split { grid-template-columns: 1fr; }
}

.ipnosi-features-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.ipnosi-features-row__item {
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.ipnosi-features-row__item h3 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; margin: 0 0 0.4rem; text-transform: none; }
.ipnosi-features-row__item p { color: var(--text-muted); margin: 0; font-size: 0.9rem; }
.ipnosi-features-row__num {
  display: block;
  font-family: var(--font-display);
  font-size: 2.5rem;
  color: var(--accent-soft);
  margin-bottom: 0.3rem;
}
.ipnosi-features-row__index {
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--accent-soft);
  margin-bottom: 0.4rem;
}

.ipnosi-brand-icon { height: 64px !important; width: auto !important; max-width: 64px !important; margin: 0 auto var(--space-sm); display: block; }
@media (max-width: 800px) {
  .ipnosi-features-row { grid-template-columns: 1fr; }
}

.ipnosi-form { display: grid; gap: 1rem; max-width: 480px; }
.ipnosi-form label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.ipnosi-form input,
.ipnosi-form textarea {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.92rem;
}
.ipnosi-form textarea { min-height: 120px; resize: vertical; }
.ipnosi-form input::placeholder,
.ipnosi-form textarea::placeholder { color: var(--text-muted); }
.ipnosi-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ipnosi-form__feedback { margin: 0; font-size: 0.85rem; min-height: 1.2em; }
.ipnosi-form__feedback.is-success { color: #4FBE8B; }
.ipnosi-form__feedback.is-error { color: #E85D9C; }

.ipnosi-form--card {
  max-width: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
}
.ipnosi-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) {
  .ipnosi-form__row { grid-template-columns: 1fr; }
}
.btn-block { width: 100%; justify-content: center; }

.ipnosi-contact-block { margin-bottom: var(--space-md); }
.ipnosi-contact-block__value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--text);
  margin-top: 0.3rem;
}
a.ipnosi-contact-block__value:hover { color: var(--accent-soft); }

/* ---------- Footer ---------- */
.ipnosi-footer {
  background: var(--footer-bg);
  color: rgba(255,255,255,0.82);
  padding-top: var(--space-lg);
}
.ipnosi-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--space-md);
  padding-bottom: var(--space-md);
}
.ipnosi-footer a:hover { color: #fff; }
.ipnosi-footer .eyebrow { color: var(--accent-soft); }
.ipnosi-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-block: var(--space-sm);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
}
.ipnosi-footer__legal p { margin: 0; }
.ipnosi-footer__legal-right { display: flex; align-items: center; gap: var(--space-md); }
.ipnosi-footer__legal-nav { display: flex; gap: var(--space-sm); }
/* !important: wc-blocks.css (solo cargado en páginas de tienda) trae un
   reset global "img { width:100%; height:auto; max-width:100% }" que agranda
   cualquier <img> sin clase de tamaño propia — no controlamos ese CSS. */
img.ipnosi-footer__legal-logo {
  height: 26px !important;
  width: auto !important;
  max-width: 150px !important;
  opacity: 0.9;
}
@media (max-width: 600px) {
  .ipnosi-footer__legal { flex-direction: column; align-items: flex-start; }
  .ipnosi-footer__legal-right { width: 100%; justify-content: space-between; }
}
@media (max-width: 900px) {
  .ipnosi-footer__grid { grid-template-columns: 1fr 1fr; }
  .ipnosi-footer__brand { grid-column: 1 / -1; }
}

.ipnosi-shop-empty { text-align: center; max-width: 560px; margin-inline: auto; }
.ipnosi-shop-empty p { color: var(--text-muted); margin-bottom: var(--space-sm); }

/* ---------- WooCommerce (sin diseño de referencia, base consistente con el resto del sitio) ---------- */
/* Cuadrado a propósito, aunque los packshots vengan en 16/10 (2000x1250):
   están compuestos con aire de sobra a los lados para tolerar el recorte
   central. En Shockolor la etiqueta del tono termina en x=1415 y el recorte
   1:1 conserva hasta x=1625, así que no se pierde nada. */
.ipnosi-product-gallery__image { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 1 / 1; object-fit: cover; }
.ipnosi-product-gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: var(--space-xs) 0 0;
  padding: 0;
  list-style: none;
}
.ipnosi-product-gallery__thumb {
  display: block;
  width: 5.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  opacity: 0.6;
  transition: opacity 150ms ease, border-color 150ms ease;
}
.ipnosi-product-gallery__thumb img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ipnosi-product-gallery__thumb:hover,
.ipnosi-product-gallery__thumb:focus-visible { opacity: 1; }
.ipnosi-product-gallery__thumb.is-current { opacity: 1; border-color: var(--accent); }
/* h1 global es tamaño de hero (clamp hasta 4.5rem) — demasiado dominante
   junto a una foto de producto en un layout de 2 columnas. */
.ipnosi-product-summary h1 { font-size: clamp(1.7rem, 1.4vw + 1.3rem, 2.4rem); margin-bottom: 0.2rem; }
.ipnosi-product-price { font-family: var(--font-display); font-size: 1.6rem; color: var(--accent-soft); margin: var(--space-xs) 0 var(--space-sm); }
.ipnosi-product-price del { color: var(--text-muted); opacity: 0.7; margin-right: 0.5rem; }
.ipnosi-product-price ins { text-decoration: none; }
.ipnosi-product-desc { color: var(--text-muted); margin: var(--space-md) 0; padding-top: var(--space-md); border-top: 1px solid var(--line); }
.ipnosi-product-desc p { max-width: none; }
/* descarga de la ficha técnica en PDF, debajo del botón de compra */
.ipnosi-product-sheet { margin-top: var(--space-xs); }
.ipnosi-product-sheet svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.ipnosi-product-desc p:last-child { margin-bottom: 0; }
.ipnosi-product-form { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; margin-bottom: var(--space-sm); }
.ipnosi-product-form .quantity { display: inline-flex; }
/* Tres clases + elemento (0,3,1) para ganarle a `.woocommerce .quantity .qty`
   de woocommerce.css (0,3,0), que lo dejaba en 3.6em — con las flechitas
   nativas dentro casi no quedaba espacio para el número. */
.ipnosi-product-form .quantity input.qty {
  width: 5.5rem;
  min-height: 3.1rem;
  padding: 0.85rem 0.5rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
/* Las flechas nativas son diminutas y de otro color; se ocultan y la cantidad
   se ajusta con el teclado o desde el carrito. */
.ipnosi-product-form .quantity input.qty::-webkit-outer-spin-button,
.ipnosi-product-form .quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* El botón lo pinta WooCommerce con sus propias clases, así que aquí se le da
   el mismo tratamiento que a .btn/.btn-primary del theme. Selector largo a
   propósito: woocommerce.css trae reglas muy genéricas para button.button. */
.ipnosi-product-form button.single_add_to_cart_button,
.ipnosi-product-form button.single_add_to_cart_button.button.alt {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.9rem;
  min-height: 3.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 45%, var(--brand-violet-dark) 75%, var(--accent) 100%);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.ipnosi-product-form button.single_add_to_cart_button:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 45%, var(--brand-violet-dark) 75%, var(--accent) 100%);
}
.ipnosi-product-stock { font-size: 0.8rem; font-weight: 600; }
.ipnosi-product-stock.is-in-stock { color: #4FBE8B; }
.ipnosi-product-stock.is-out-of-stock { color: #E85D9C; }

.ipnosi-shop .woocommerce-products-header__title { margin-bottom: var(--space-sm); }
.ipnosi-shop ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
}
/* WooCommerce le pone ::before/::after de clearfix (content:" "; display:table)
   pensado para su grid clásico con float — en un grid CSS real, esos
   pseudo-elementos se cuelan como una celda invisible extra y corren todas
   las tarjetas una posición. */
.ipnosi-shop ul.products::before,
.ipnosi-shop ul.products::after { content: none; }
.ipnosi-shop ul.products li.product {
  /* !important: WooCommerce's clásico sistema de columnas (ul.products.columns-4)
     pone width:22%/float:left en cada tarjeta — choca con nuestro CSS Grid y
     las deja angostas dentro de su propia celda. El resto del look (borde
     violeta, eyebrow, etc.) lo da .ipnosi-sku-card — ver content-product.php. */
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
.ipnosi-shop .star-rating { color: var(--accent-soft); }
/* :not(.ipnosi-add-to-cart) — el botón "Agregar al carrito" del grid de
   Tienda usa .btn.btn-outline.btn-sm (mismo formato que "Ver ficha" en
   Productos) en vez de este estilo plano genérico; el resto de los botones
   de WooCommerce (single product, cupón, etc.) lo siguen usando igual. */
.ipnosi-shop a.button:not(.ipnosi-add-to-cart),
.ipnosi-shop button.button:not(.ipnosi-add-to-cart),
.ipnosi-shop input.button:not(.ipnosi-add-to-cart) {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.4rem;
  border: none;
  font-weight: 600;
  font-family: var(--font-body);
  cursor: pointer;
}
.ipnosi-shop a.button:not(.ipnosi-add-to-cart):hover,
.ipnosi-shop button.button:not(.ipnosi-add-to-cart):hover,
.ipnosi-shop input.button:not(.ipnosi-add-to-cart):hover { background: var(--accent-soft); color: var(--bg); }

/* Paginación de Tienda — el markup por defecto de WooCommerce trae su propio
   look claro (borde gris, fondo blanco) que no combina con el tema oscuro. */
.ipnosi-shop nav.woocommerce-pagination { text-align: center; margin-top: var(--space-lg); }
.ipnosi-shop nav.woocommerce-pagination ul.page-numbers {
  display: inline-flex;
  gap: 0.4rem;
  border: none;
  margin: 0;
  padding: 0;
  background: none;
}
.ipnosi-shop nav.woocommerce-pagination ul.page-numbers li { border: none; float: none; display: block; }
.ipnosi-shop nav.woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.3rem;
  height: 2.3rem;
  padding: 0 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 0.85rem;
}
.ipnosi-shop nav.woocommerce-pagination a.page-numbers:hover,
.ipnosi-shop nav.woocommerce-pagination a.page-numbers:focus {
  border-color: var(--accent);
  color: var(--accent-soft);
  background: transparent;
}
.ipnosi-shop nav.woocommerce-pagination .page-numbers.current {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 45%, var(--brand-violet-dark) 75%, var(--accent) 100%);
  border-color: transparent;
  color: #fff;
}

/* WooCommerce trae sus propias reglas para ul.products li.product (imagen,
   h3, precio) con selectores del tipo ".woocommerce ul.products li.product X"
   / "ul.products li.product X" — más específicas que nuestras clases sueltas
   .ipnosi-sku-card__*, así que le ganaban a la tarjeta: la imagen no
   respetaba el recorte 16:10 (crecía a su tamaño natural y tapaba el resto
   de la tarjeta) y el botón mostraba el barrido de brillo siempre visible
   (WooCommerce fuerza overflow:visible en .button). Se resuelve anclando
   todo a ".ipnosi-shop ul.products li.ipnosi-sku-card", que siempre tiene
   más clases que cualquier selector propio de WooCommerce. */
.ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}
.ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-sku-card__body h3 {
  padding: 0;
  margin: 0 0 0.2rem;
  font-size: 1.1rem;
}
.ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-sku-card__footer {
  /* .ipnosi-sku-card__footer trae justify-content:space-between pensado para
     2 elementos (precio + botón "Ver ficha"); en Tienda puede haber 3
     (precio + Agregar al carrito + Ver carrito tras el alta), y
     space-between los separaba de más. El precio se empuja con
     margin-right:auto y los botones quedan juntos con el gap normal. */
  justify-content: flex-start;
}
.ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-sku-card__price,
.ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-sku-card__price .price {
  display: inline;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--accent-soft);
}
.ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-sku-card__price { margin-right: auto; }
.ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-sku-card__price del { opacity: 0.6; font-weight: 400; margin-right: 0.35rem; }
.ipnosi-shop ul.products li.ipnosi-sku-card a.ipnosi-add-to-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  margin: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent-soft);
  cursor: pointer;
}
.ipnosi-shop ul.products li.ipnosi-sku-card a.ipnosi-add-to-cart::after {
  content: "";
  position: absolute;
  inset: 0;
  left: -75%;
  width: 50%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.ipnosi-shop ul.products li.ipnosi-sku-card a.ipnosi-add-to-cart:hover {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 45%, var(--brand-violet-dark) 75%, var(--accent) 100%);
  border-color: transparent;
  color: #fff;
}
.ipnosi-shop ul.products li.ipnosi-sku-card a.ipnosi-add-to-cart:hover::after { left: 125%; }
.ipnosi-shop ul.products li.ipnosi-sku-card a.ipnosi-add-to-cart:active { transform: scale(0.97); }
.ipnosi-add-to-cart__icon { width: 16px; height: 16px; }

.ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-qty-picker { display: inline-flex; align-items: center; gap: 0.5rem; }
.ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-qty-stepper {
  display: inline-flex;
  align-items: center;
  height: 2.3rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0 0.2rem;
  gap: 0.1rem;
}
.ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-qty-stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-pill);
}
.ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-qty-stepper__btn:hover { background: var(--surface); color: var(--accent-soft); }
.ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-qty-stepper__value {
  min-width: 1.3rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

/* "Ver carrito"/"View cart" — lo inyecta wc-add-to-cart.js después de un alta
   AJAX exitosa (no pasa por content-product.php), con el texto localizado
   como único contenido y también como atributo title. Incluye "carrito"
   (icono simple, sin +, ya que es "ver" no "agregar") pintado con mask para
   poder usar currentColor igual que los otros íconos; el texto se conserva
   en el DOM (accesible vía title/lectores) pero se oculta visualmente. */
.ipnosi-shop ul.products li.ipnosi-sku-card a.added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  width: 2.3rem;
  height: 2.3rem;
  margin: 0;
  padding: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent-soft);
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
}
.ipnosi-shop ul.products li.ipnosi-sku-card a.added_to_cart::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ipnosi-shop ul.products li.ipnosi-sku-card a.added_to_cart:hover {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 45%, var(--brand-violet-dark) 75%, var(--accent) 100%);
  border-color: transparent;
  color: #fff;
}

/* Carrito vacío (bloque woocommerce/empty-cart-block) — cara triste por
   defecto de WooCommerce y grid de "New in store" (bloque de productos
   nuevos, no pasa por content-product.php) con estilos claros propios que
   no coinciden con el resto del sitio. */
.ipnosi-shop .wc-block-cart__empty-cart__title.with-empty-cart-icon::before { display: none; }
.ipnosi-shop .wp-block-woocommerce-empty-cart-block .wp-block-heading { color: var(--text); }
.ipnosi-shop .wp-block-woocommerce-empty-cart-block hr.wp-block-separator { border-color: var(--line); opacity: 0.6; }
.ipnosi-shop .wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
}
.ipnosi-shop .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title { color: var(--text); font-weight: 600; margin-top: var(--space-xs); }
.ipnosi-shop .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price { color: var(--accent-soft); font-weight: 700; }
.ipnosi-shop .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image img { border-radius: var(--radius-md); }
.ipnosi-shop .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link {
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 45%, var(--brand-violet-dark) 75%, var(--accent) 100%);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.2rem;
  display: inline-block;
  font-weight: 600;
  border: none;
}
.ipnosi-shop .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-add-to-cart .wp-block-button__link:hover { filter: brightness(1.12); }

.ipnosi-shop input.input-text,
.ipnosi-shop select,
.ipnosi-shop textarea {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: 0.7rem 1rem;
}
.ipnosi-shop table.shop_table { border-color: var(--line); }
.ipnosi-shop table.shop_table th,
.ipnosi-shop table.shop_table td { border-color: var(--line); color: var(--text-muted); }

/* ---------- WooCommerce Blocks (Cart/Checkout modernos) — pasada base, sin pedido/pago real que verificar todavía ---------- */
.ipnosi-shop .empty-cart-icon { display: none; }
.ipnosi-shop .wc-block-cart,
.ipnosi-shop .wc-block-checkout,
.ipnosi-shop .wc-block-components-panel,
.ipnosi-shop .wc-block-components-order-summary,
.ipnosi-shop .wc-block-cart-items,
.ipnosi-shop .wc-block-components-totals-wrapper { color: var(--text); }
.ipnosi-shop .wc-block-components-product-metadata,
.ipnosi-shop .wc-block-components-totals-item,
.ipnosi-shop .wc-block-components-product-name { color: var(--text); }
.ipnosi-shop .wc-block-components-totals-item__description,
.ipnosi-shop .wc-block-components-product-metadata__description { color: var(--text-muted); }
.ipnosi-shop .wc-block-cart-item,
.ipnosi-shop .wc-block-components-panel,
.ipnosi-shop .wc-block-components-express-payment,
.ipnosi-shop .wc-block-components-totals-wrapper::before { border-color: var(--line) !important; }
.ipnosi-shop input[type="text"],
.ipnosi-shop input[type="email"],
.ipnosi-shop input[type="tel"],
.ipnosi-shop input[type="number"],
.ipnosi-shop input[type="search"],
.ipnosi-shop .wc-block-components-text-input input,
.ipnosi-shop select {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
  border-radius: var(--radius-md);
}
.ipnosi-shop .wc-block-components-button:not(.is-link) {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 45%, var(--brand-violet-dark) 75%, var(--accent) 100%);
  color: #fff;
  border-radius: var(--radius-pill);
  transition: transform 0.2s ease, filter 0.2s ease;
}
/* Misma barrida de brillo metálico que .btn::after, para que "Proceder al
   pago"/"Realizar el pedido" (botones de WooCommerce Blocks, no de .btn)
   tengan el mismo efecto que el resto de los botones del sitio. */
.ipnosi-shop .wc-block-components-button:not(.is-link)::after {
  content: "";
  position: absolute;
  inset: 0;
  left: -75%;
  width: 50%;
  background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.ipnosi-shop .wc-block-components-button:not(.is-link):hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.ipnosi-shop .wc-block-components-button:not(.is-link):hover::after { left: 125%; }
.ipnosi-shop .wc-block-components-button:not(.is-link):active { transform: scale(0.97); filter: brightness(1.15); }

/* ---------- Scroll reveal ---------- */
.ipnosi-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ipnosi-reveal.is-visible { opacity: 1; transform: translateY(0); }
.ipnosi-reveal--delay-1.is-visible { transition-delay: 0.1s; }
.ipnosi-reveal--delay-2.is-visible { transition-delay: 0.22s; }
.ipnosi-reveal--delay-3.is-visible { transition-delay: 0.34s; }

.ipnosi-observe {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.ipnosi-observe.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .ipnosi-reveal, .ipnosi-observe { opacity: 1; transform: none; transition: none; }
}

/* ---------- Perfil de línea (page-linea-*.php + inc/line-sections.php) ---------- */
/* Hero de perfil: siempre imagen a sangre de fondo con el texto encima a la
   izquierda — misma estructura haya o no foto real todavía, para que el
   placeholder muestre exactamente el encuadre que tendrá la foto final.
   La banda se fija a 21/9 para que el master de imagen tenga un solo target
   estable (2520x1080) y no dependa del largo del lede de cada línea; el
   min-height evita que el texto se desborde en pantallas angostas. */
.ipnosi-line-hero,
.ipnosi-line-cta {
  position: relative;
  display: flex;
  align-items: center;
  aspect-ratio: 21 / 9;
  min-height: 24rem;
  overflow: hidden;
}
.ipnosi-line-hero { border-bottom: 1px solid var(--line); }
.ipnosi-line-cta { border-top: 1px solid var(--line); }
.ipnosi-line-hero__inner,
.ipnosi-line-cta__inner { position: relative; z-index: 2; width: 100%; }
.ipnosi-line-hero__content { max-width: 46ch; }
.ipnosi-line-hero__lede { color: var(--text-muted); margin: var(--space-xs) 0 0; }
.ipnosi-line-hero__bg,
.ipnosi-line-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* El placeholder hereda el rayado de .ipnosi-photo, pero no su aspect-ratio:
   aquí lo manda la banda. */
.ipnosi-line-hero__bg--empty,
.ipnosi-line-cta__bg--empty {
  aspect-ratio: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ipnosi-line-hero::after,
.ipnosi-line-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Hero: contenido a la izquierda, así que el velo oscurece de izquierda a
   derecha y deja respirar el producto del lado derecho de la foto. */
.ipnosi-line-hero::after {
  background: linear-gradient(90deg, rgba(26, 24, 28, 0.94) 0%, rgba(26, 24, 28, 0.88) 28%, rgba(26, 24, 28, 0.45) 45%, rgba(26, 24, 28, 0.05) 60%, transparent 72%);
}
/* CTA: el botón va a la derecha, así que el velo va espejeado. La foto de
   esta banda debe llevar el peso visual del lado IZQUIERDO. */
.ipnosi-line-cta::after {
  background: linear-gradient(270deg, rgba(26, 24, 28, 0.94) 0%, rgba(26, 24, 28, 0.88) 28%, rgba(26, 24, 28, 0.45) 45%, rgba(26, 24, 28, 0.05) 60%, transparent 72%);
}
@media (max-width: 900px) {
  /* Sin arte vertical: la banda 21/9 queda demasiado baja, manda el
     min-height y el encuadre se corre al motivo en vez de quedarse en el
     fondo vacío. */
  .ipnosi-line-hero__bg { object-position: 72% center; }
  .ipnosi-line-cta__bg { object-position: 28% center; }
  .ipnosi-line-hero::after,
  .ipnosi-line-cta::after { background: rgba(26, 24, 28, 0.82); }

  /* Con arte vertical (1080x1920) la banda pasa a 9:16: el motivo va arriba y
     el contenido se ancla abajo, centrado, sobre un velo vertical. El
     max-height evita que en tablet en vertical se vuelva larguísima. */
  .ipnosi-band--has-mobile {
    aspect-ratio: 9 / 16;
    max-height: 100svh;
    align-items: flex-end;
    /* En escritorio el contenido va centrado y no hace falta padding; aquí
       está anclado al fondo, así que sin esto queda pegado al borde. */
    padding-bottom: var(--space-lg);
  }
  .ipnosi-band--has-mobile .ipnosi-line-hero__bg,
  .ipnosi-band--has-mobile .ipnosi-line-cta__bg { object-position: center top; }
  .ipnosi-band--has-mobile::after {
    background: linear-gradient(0deg, rgba(26, 24, 28, 0.96) 0%, rgba(26, 24, 28, 0.88) 22%, rgba(26, 24, 28, 0.35) 45%, transparent 65%);
  }
  /* El hero sube más que el CTA: su bloque es más alto (título + lede) y con
     el mismo padding quedaba demasiado cerca del borde inferior. Va con doble
     clase para ganarle en especificidad a la regla compartida de arriba. */
  .ipnosi-line-hero.ipnosi-band--has-mobile { padding-bottom: var(--space-xl); }
  .ipnosi-band--has-mobile .ipnosi-line-hero__content {
    max-width: none;
    text-align: center;
  }
  .ipnosi-band--has-mobile .ipnosi-line-hero__lede { margin-inline: auto; }
}

/* A pantalla completa: min-height (no height) para que en móvil, donde el
   contenido apilado supera el viewport, la sección crezca en vez de recortar. */
.ipnosi-line-why {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-lg);
  min-height: 100vh;
  display: flex;
  align-items: center;
}
/* Texto al centro flanqueado por dos fotos cuadradas: la de la izquierda
   suele ser producto/textura y la de la derecha el resultado en cabello. */
.ipnosi-line-why__inner {
  display: grid;
  grid-template-columns: 1fr 1.7fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
/* Mismo redondeo que las tarjetas de "Qué lleva la fórmula". El overflow es
   imprescindible: la <img> va en position:absolute dentro de .ipnosi-photo y
   sin recorte se sale por las esquinas, anulando el border-radius. */
.ipnosi-line-why__photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.ipnosi-line-why__text { text-align: center; }
.ipnosi-line-why__text h2 { margin: 0.3rem 0 var(--space-sm); }
.ipnosi-line-why__text p { color: var(--text-muted); margin: 0 auto; }
@media (max-width: 900px) {
  /* Una sola columna en el orden natural del DOM: foto 1, texto, foto 2 — el
     texto queda enmarcado por las dos imágenes en vez de encabezar la
     sección. */
  .ipnosi-line-why__inner { grid-template-columns: 1fr; }
}

/* Pedido del cliente: se veía apretada con el padding-top chico de
   .ipnosi-content--tight (pensado para secciones que ya vienen después de
   otra con su propio padding-bottom). Selector combinado para ganar sin
   pelear por orden en la hoja, mismo criterio que el resto de estos fixes. */
.ipnosi-content.ipnosi-content--tight.ipnosi-line-products-section { padding-block: var(--space-lg); }

.ipnosi-line-products__title,
.ipnosi-line-features__title { margin-bottom: var(--space-md); text-align: center; }
/* Antes era flex-wrap con tarjetas angostas de ancho fijo (140px): a 1240px
   de contenedor caían 7 por fila y dejaban 1 sola huérfana en la fila
   siguiente (pedido del cliente: "no dejemos 1 solo producto en la segunda
   línea"). Ahora es una rejilla con nº de columnas fijado desde PHP
   (ipnosi_grid_cols, --lp-cols) que siempre reparte en filas completas, y de
   paso las tarjetas quedan más grandes/vistosas al repartir el ancho total
   entre menos columnas. */
.ipnosi-line-products__strip {
  display: grid;
  grid-template-columns: repeat(var(--lp-cols, 4), 1fr);
  gap: var(--space-sm);
}
.ipnosi-line-products__item {
  text-align: center;
  color: var(--text);
}
@media (max-width: 760px) {
  .ipnosi-line-products__strip { grid-template-columns: repeat(2, 1fr); }
}

/* Slider de "Descubre la línea completa" (pedido del cliente: "1 fila y 4
   productos pero en un slider que se mueva de 4 en 4") — reemplaza la
   rejilla de arriba en los 2 puntos donde esta franja está en uso
   (inc/line-sections.php::ipnosi_line_section_product_pages y la de
   "productos de esta línea" en page-producto.php). .ipnosi-line-products__strip
   sigue ahí solo por la función sin uso actual que la referencia. El
   movimiento es scroll nativo con snap (ver initLineProductsSlider en
   main.js para las flechas) — así el swipe/touch funciona gratis, sin JS. */
.ipnosi-line-products__slider { position: relative; }
/* Pedido del cliente: al hacer swipe, la última tarjeta de una página y la
   primera de la siguiente quedaban pegadas (el track no tenía gap entre
   páginas, solo las tarjetas DENTRO de cada página lo tenían). El gap entre
   páginas también mueve los puntos de snap, así que initLineProductsSlider
   en main.js ya no asume que cada página mide exactamente
   track.clientWidth — calcula la distancia real entre 2 páginas del DOM. */
.ipnosi-line-products__track {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ipnosi-line-products__track::-webkit-scrollbar { display: none; }
.ipnosi-line-products__page {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
}
@media (max-width: 760px) {
  .ipnosi-line-products__page { grid-template-columns: repeat(2, 1fr); }
}
/* Pedido del cliente: las flechas solo en desktop (en móvil el swipe nativo
   ya mueve el track, y los puntos de abajo avisan que hay más páginas — ver
   .ipnosi-line-products__dots), fuera del área de las tarjetas (no
   montadas sobre el borde de la primera/última, como antes) y centradas a la
   altura de los recuadros de producto, no del bloque completo (que incluye
   el nombre debajo). El track mete thumb (cuadrado) + nombre; 45% en vez de
   50% aproxima el centro del cuadrado solo, restando el espacio del nombre —
   no es exacto para cualquier nº de columnas, pero es una referencia visual
   razonable sin medir con JS. */
.ipnosi-line-products__arrow {
  display: none;
}
@media (min-width: 761px) {
  /* var(--surface)/var(--text) se veían como un círculo negro sólido sin
     flecha visible: esta franja cae dentro de secciones donde algún
     ancestro redefine --text a oscuro para su propio fondo claro sin tocar
     --surface (que sigue oscuro por el tema dark de base) — oscuro sobre
     oscuro, flecha invisible. En vez de perseguir ese override, el botón usa
     colores fijos propios (no depende del tema de la sección en la que caiga,
     clara u oscura): círculo claro con borde sutil, flecha oscura, y en
     hover SOLO la flecha pasa a violeta (pedido explícito del cliente). */
  .ipnosi-line-products__arrow {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.92);
    color: #1A181C;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transition: color 180ms ease, opacity 180ms ease;
    z-index: 2;
  }
  .ipnosi-line-products__arrow:hover { color: var(--accent); }
  .ipnosi-line-products__arrow:disabled { opacity: 0.3; cursor: default; }
  .ipnosi-line-products__arrow--prev { left: -3.25rem; }
  .ipnosi-line-products__arrow--next { right: -3.25rem; }
}

/* Puntos de paginación — solo en móvil (desktop ya tiene las flechas). */
.ipnosi-line-products__dots {
  display: none;
}
@media (max-width: 760px) {
  .ipnosi-line-products__dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: var(--space-sm);
  }
  .ipnosi-line-products__dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: var(--line);
    cursor: pointer;
    transition: background-color 180ms ease, transform 180ms ease;
  }
  .ipnosi-line-products__dot.is-active {
    background: var(--accent-soft, var(--accent));
    transform: scale(1.25);
  }
}

.ipnosi-line-products__thumb {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: 0.5rem;
  background: var(--surface);
}
.ipnosi-line-products__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ipnosi-line-products__name { font-size: 0.82rem; line-height: 1.3; }
.ipnosi-line-products__cta { margin-top: var(--space-md); text-align: center; }

/* Fórmula: activos reales de la línea, uno por tarjeta. También a pantalla
   completa, y cierra con la frase de estándar de marca (antes era una banda
   aparte). */
.ipnosi-line-formula {
  padding-block: var(--space-lg);
  min-height: 100vh;
  display: flex;
  align-items: center;
}
.ipnosi-line-formula__inner { width: 100%; }
.ipnosi-line-formula__standard {
  max-width: 56ch;
  margin: var(--space-lg) auto 0;
  text-align: center;
  color: var(--text-muted);
}
.ipnosi-line-formula__title { margin-bottom: var(--space-md); text-align: center; }
/* El mínimo de 300px topa la rejilla en 3 columnas dentro del contenedor de
   1240px: así Ipnocare, que tiene 6 activos, cae 3+3 en vez de 4+2, y las
   líneas de 3 activos siguen ocupando una sola fila. El min() evita que la
   tarjeta se desborde en pantallas más angostas que ese mínimo. */
.ipnosi-line-formula__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--space-sm);
}
.ipnosi-line-formula__item {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-accent, var(--accent-soft));
  border-radius: var(--radius-md);
  padding: var(--space-md);
  background: var(--surface);
}
.ipnosi-line-formula__item h3 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.ipnosi-line-formula__item p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }

/* Ficha técnica: banda de pares etiqueta/valor */
.ipnosi-line-specs {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-lg);
}
.ipnosi-line-specs__title { margin-bottom: var(--space-md); text-align: center; }
.ipnosi-line-specs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-sm);
  margin: 0;
}
.ipnosi-line-specs__item { text-align: center; padding: var(--space-sm); }
.ipnosi-line-specs__item dt {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.ipnosi-line-specs__item dd { margin: 0; font-size: 1.05rem; }

.ipnosi-line-features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-sm); }
.ipnosi-line-features__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-accent, var(--accent));
  border-radius: var(--radius-md);
  padding: var(--space-sm);
}
.ipnosi-line-features__item p { margin: 0; color: var(--text-muted); font-size: 0.88rem; }
.ipnosi-line-features__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-accent, var(--accent)); flex: 0 0 auto; margin-top: 0.4rem; }

.ipnosi-line-quality { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: var(--space-lg); }
.ipnosi-line-quality__inner { max-width: 56ch; margin: 0 auto; text-align: center; }
.ipnosi-line-quality__inner p { color: var(--text-muted); }

/* Dos columnas: la imagen de fondo carga su peso en la izquierda y el bloque
   de hook + botón ocupa la derecha, con su contenido centrado dentro de esa
   columna (no alineado al borde). */
.ipnosi-line-cta__inner { display: grid; grid-template-columns: 1fr 1fr; }
/* La medida va en rem, no en ch: el ch se resuelve contra el tamaño de fuente
   de ESTE elemento (texto de cuerpo), no contra el del titular que va dentro,
   y dejaba la columna a menos de la mitad del ancho previsto. */
.ipnosi-line-cta__content {
  grid-column: 2;
  justify-self: center;
  max-width: 36rem;
  text-align: center;
}
.ipnosi-line-cta__hook {
  font-size: clamp(1.8rem, 1.2rem + 2vw, 3.2rem);
  line-height: 1.12;
  margin: 0 0 var(--space-md);
  /* Los h1-h4 del theme traen text-wrap:balance, que reparte el texto en
     líneas cortas de largo parejo en vez de llenar cada línea. Aquí queremos
     que ocupe el ancho disponible, así que se anula. */
  text-wrap: pretty;
}
/* 900px, igual que el corte de las bandas y que el media del <picture>: si no
   coinciden, entre 800 y 900 la banda sería vertical pero el bloque seguiría
   en dos columnas. */
@media (max-width: 900px) {
  .ipnosi-line-cta__inner { grid-template-columns: 1fr; }
  .ipnosi-line-cta__content { grid-column: 1; justify-self: center; }
}

/* ---------- Grid de producto en móvil: 2 columnas ----------
   Tiene que ir AL FINAL del archivo. Las reglas de la tarjeta en Tienda usan
   ".ipnosi-shop ul.products li.ipnosi-sku-card ..." (especificidad 0,4,2);
   escribirlas aquí con un selector más corto no las ganaría, así que se
   repite el mismo selector y se apoya en el orden del cascade.

   Ojo: el grid de Tienda NO es .ipnosi-catalog-grid sino .ipnosi-shop
   ul.products, y caía a una columna por su minmax(240px) — no por la regla
   de columnas de 520px. Hay que tocar los dos. */
@media (max-width: 520px) {
  .ipnosi-shop ul.products,
  .ipnosi-catalog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  /* Cuadrada en móvil: a 2 columnas la tarjeta mide ~155px y en 16/10 la foto
     quedaba de apenas 97px de alto, una franja. Va acotado a las tarjetas del
     grid porque .ipnosi-photo también la usan los perfiles de línea, donde el
     16/10 sí corresponde. */
  .ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-photo,
  .ipnosi-catalog-grid .ipnosi-sku-card .ipnosi-photo {
    aspect-ratio: 1 / 1;
  }

  /* A dos columnas cada tarjeta mide ~155px en un móvil de 360px, así que
     todo el bloque de texto baja de escala. */
  .ipnosi-sku-card__body,
  .ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-sku-card__body {
    padding: 0.6rem 0.6rem 0.75rem;
  }
  .ipnosi-sku-card__eyebrow { font-size: 0.58rem; margin-bottom: 0.2rem; }
  .ipnosi-sku-card__body h3,
  .ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-sku-card__body h3 {
    font-size: 0.85rem;
    line-height: 1.25;
    margin-bottom: 0.15rem;
  }
  .ipnosi-sku-card__size { font-size: 0.7rem; }
  .ipnosi-sku-card__price,
  .ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-sku-card__price,
  .ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-sku-card__price .price {
    font-size: 0.82rem;
  }

  /* Precio y botón no caben lado a lado en 155px: el footer se apila y el
     botón ocupa todo el ancho en vez de partirse en dos líneas. */
  .ipnosi-sku-card__footer,
  .ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-sku-card__footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    margin-top: 0.5rem;
  }
  .ipnosi-sku-card__price,
  .ipnosi-shop ul.products li.ipnosi-sku-card .ipnosi-sku-card__price {
    margin-right: 0;
  }
  .btn-sm,
  .ipnosi-shop ul.products li.ipnosi-sku-card a.ipnosi-add-to-cart {
    padding: 0.5rem 0.6rem;
    font-size: 0.7rem;
    text-align: center;
  }
  .ipnosi-sku-card__usage { font-size: 0.68rem; }
}

/* ---- Página de Descargas (page-descargas.php) ---- */
.ipnosi-downloads__feature {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--line); border-radius: var(--radius-lg, 16px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
}
.ipnosi-downloads__feature h2 { margin: 0 0 0.35rem; }
.ipnosi-downloads__feature p { margin: 0; color: var(--text-muted); max-width: 52ch; }
.ipnosi-downloads__feature .btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.5rem; }
.ipnosi-downloads__feature svg, .ipnosi-downloads__list svg { width: 1rem; height: 1rem; flex-shrink: 0; }
.ipnosi-downloads__sheets > .container > h2 { margin-bottom: var(--space-sm); }
.ipnosi-downloads__line {
  display: block; border-top: 1px solid var(--line);
}
.ipnosi-downloads__line:last-of-type { border-bottom: 1px solid var(--line); }
.ipnosi-downloads__line > summary, .ipnosi-downloads__line--link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 0.25rem; cursor: pointer; list-style: none; color: var(--text);
}
.ipnosi-downloads__line > summary::-webkit-details-marker { display: none; }
.ipnosi-downloads__line-name { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); text-transform: uppercase; letter-spacing: 0.01em; }
.ipnosi-downloads__count { font-size: 0.85rem; color: var(--text-muted); }
.ipnosi-downloads__line > summary .ipnosi-downloads__count::after { content: "\002B"; margin-left: 0.9rem; color: var(--accent-soft); }
.ipnosi-downloads__line[open] > summary .ipnosi-downloads__count::after { content: "\2212"; }
.ipnosi-downloads__line > summary:hover .ipnosi-downloads__line-name,
.ipnosi-downloads__line--link:hover .ipnosi-downloads__line-name { color: var(--accent-soft); }
.ipnosi-downloads__list { list-style: none; margin: 0; padding: 0 0.25rem 1rem; display: grid; gap: 0.5rem; }
.ipnosi-downloads__list li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-top: 1px dashed var(--line); }
.ipnosi-downloads__list .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 1rem; font-size: 0.85rem; flex-shrink: 0; }
@media (max-width: 640px) {
  .ipnosi-downloads__feature { flex-direction: column; align-items: flex-start; }
  .ipnosi-downloads__list li { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}
.ipnosi-sheets__thumb { width: 100%; max-width: 9rem; aspect-ratio: 1; object-fit: contain; border-radius: 12px; }
@media (max-width: 640px) { .ipnosi-sheets__thumb { max-width: 7rem; } }

/* ---- Registro de usuarios y productos exclusivos para profesionales ---- */
.ipnosi-register .container { max-width: 760px; }
.ipnosi-register__notice { padding: 1rem 1.25rem; border-radius: var(--radius-md); border: 1px solid var(--line); margin: 0 0 var(--space-sm); }
.ipnosi-register__notice--ok { border-color: #4FBE8B; color: #4FBE8B; }
.ipnosi-register__notice--error { border-color: #E85D9C; color: #E85D9C; }
.ipnosi-register__form { max-width: none; }
.ipnosi-register__types { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; border: 0; padding: 0; margin: 0; }
.ipnosi-register__type {
  display: flex; align-items: flex-start; gap: 0.75rem; margin: 0; padding: 1rem 1.1rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-md); transition: border-color var(--duration-fast, 150ms), background var(--duration-fast, 150ms);
}
.ipnosi-register__type input { width: auto; margin-top: 0.25rem; accent-color: var(--accent); }
.ipnosi-register__type strong { display: block; color: var(--text); font-size: 0.95rem; }
.ipnosi-register__type small { display: block; margin-top: 0.15rem; color: var(--text-muted); font-size: 0.8rem; font-weight: 400; }
.ipnosi-register__type:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.ipnosi-register__pro { display: grid; gap: 1rem; padding-top: 0.5rem; border-top: 1px dashed var(--line); }
.ipnosi-register__pro[hidden], .ipnosi-register__docs[hidden], [data-no-doc-fields][hidden] { display: none; }
.ipnosi-register__docs { display: grid; gap: 1rem; }
.ipnosi-register select {
  width: 100%; padding: 0.85rem 1.1rem; border-radius: var(--radius-md); border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-family: var(--font-body); font-size: 0.92rem;
}
.ipnosi-register__hint { display: block; margin-top: 0.3rem; font-size: 0.75rem; color: var(--text-muted); }
.ipnosi-register .ipnosi-register__check { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0; font-size: 0.85rem; font-weight: 400; cursor: pointer; }
.ipnosi-register__check input { width: auto; margin-top: 0.2rem; accent-color: var(--accent); flex-shrink: 0; }
.ipnosi-register__check a { color: var(--accent-soft); text-decoration: underline; }
.ipnosi-register__login { margin: 0; text-align: center; font-size: 0.88rem; color: var(--text-muted); }
@media (max-width: 560px) { .ipnosi-register__types { grid-template-columns: 1fr; } }

.ipnosi-pro-only {
  margin: var(--space-sm) 0; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.ipnosi-pro-only__title { margin: 0 0 0.4rem; font-family: var(--font-display); font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.01em; }
.ipnosi-pro-only p { margin: 0 0 0.9rem; color: var(--text-muted); font-size: 0.92rem; }
.ipnosi-pro-only p:last-child { margin-bottom: 0; }
.ipnosi-pro-price__tag { display: block; margin-top: 0.15rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-soft); }
.ipnosi-pro-status { padding: 0.9rem 1.1rem; border-radius: var(--radius-md); border: 1px solid var(--line); }
.ipnosi-pro-status--approved { border-color: #4FBE8B; }
.ipnosi-pro-status--rejected { border-color: #E85D9C; }
.ipnosi-footer__legal-nav { flex-wrap: wrap; }
@media (max-width: 600px) { .ipnosi-footer__legal-right { flex-wrap: wrap; gap: var(--space-sm); } }
.ipnosi-shop ul.products li.ipnosi-sku-card a.ipnosi-pro-only-link { margin-right: auto; width: auto; height: auto; padding: 0.4rem 0.9rem; font-size: 0.75rem; }
.ipnosi-product-form:has(.ipnosi-pro-only) + .ipnosi-product-stock { display: none; }

/* Páginas de línea oscuras: el slider se funde a negro para que el cambio a la franja negra de Ficha técnica no se note */
.ipnosi-product-page:not(.ipnosi-product-page--light) .ipnosi-line-products-section:has(+ .ipnosi-product-page__techsheet-section) {
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 55%, #000000 100%);
  padding-bottom: clamp(3rem, 8vw, 6rem);
}

/* ---- Sección Profesionales: acceso (inicio de sesión + registro) ---- */
.ipnosi-pro-access { scroll-margin-top: calc(var(--header-h, 76px) + 1rem); }
.ipnosi-pro-access__title { margin: 0 0 var(--space-sm); }
.ipnosi-pro-access__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); align-items: stretch; }
.ipnosi-pro-access__card { max-width: none; padding: var(--space-md); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); display: grid; gap: 1rem; align-content: start; }
.ipnosi-pro-access__card h3 { margin: 0; font-size: 1.4rem; }
.ipnosi-pro-access__card p { margin: 0; color: var(--text-muted); }
.ipnosi-pro-access__card--new { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 75%), var(--surface); justify-items: start; }
.ipnosi-pro-access__card--welcome { grid-template-columns: 1fr; }
.ipnosi-pro-access__welcome { font-family: var(--font-display); font-size: 1.5rem; color: var(--text) !important; }
.ipnosi-pro-access__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ipnosi-pro-access__link { color: var(--accent-soft); font-size: 0.88rem; text-decoration: underline; }
.ipnosi-distributor__cta { display: grid; gap: 1rem; justify-items: start; align-content: center; }
@media (max-width: 760px) { .ipnosi-pro-access__grid { grid-template-columns: 1fr; } }
/* Casillas y avisos del registro/acceso con el estilo del tema */
.ipnosi-register__check input[type="checkbox"], .ipnosi-register__type input[type="radio"] {
  appearance: none; -webkit-appearance: none; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; flex-shrink: 0; padding: 0;
  border: 1.5px solid var(--text-muted); background: transparent; display: inline-grid; place-content: center; cursor: pointer;
}
.ipnosi-register__check input[type="checkbox"] { border-radius: 4px; }
.ipnosi-register__type input[type="radio"] { border-radius: 50%; }
.ipnosi-register__check input:checked, .ipnosi-register__type input:checked { background: var(--accent); border-color: var(--accent); }
.ipnosi-register__check input[type="checkbox"]:checked::after { content: ""; width: 0.35rem; height: 0.65rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.ipnosi-register__type input[type="radio"]:checked::after { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #fff; }
.ipnosi-register__check input:focus-visible, .ipnosi-register__type input:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.ipnosi-register__notice--error { background: rgba(232, 93, 156, 0.12); color: #FF8DBB; }
.ipnosi-register__notice--ok { background: rgba(79, 190, 139, 0.12); }

/* Acceso profesional dentro del hero: una sola tarjeta (inicio de sesión + cuenta nueva) */
.ipnosi-register__check { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0; font-size: 0.85rem; font-weight: 400; cursor: pointer; }
.ipnosi-pro-access--hero { margin-top: var(--space-md); max-width: 440px; scroll-margin-top: calc(var(--header-h, 76px) + 1rem); }
.ipnosi-pro-access--hero .ipnosi-pro-access__card {
  background: rgba(26, 24, 28, 0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  padding: var(--space-md); gap: 0.9rem;
}
.ipnosi-pro-access--hero h2 { margin: 0; font-size: 1.6rem; }
.ipnosi-pro-access__new { display: grid; gap: 0.75rem; justify-items: stretch; margin-top: 0.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); text-align: left; }
.ipnosi-pro-access__new h3 { margin: 0; font-size: 1.15rem; }
.ipnosi-pro-access__new .ipnosi-pro-access__link { justify-self: center; }
@media (max-width: 560px) { .ipnosi-pro-access--hero { max-width: none; } }
.ipnosi-form .ipnosi-register__check, .ipnosi-register .ipnosi-register__check { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 0.88rem; font-weight: 400; color: var(--text-muted); }
.ipnosi-register__check input[type="checkbox"], .ipnosi-register__type input[type="radio"] { border-color: var(--accent-soft); margin-top: 0; }
.ipnosi-register .ipnosi-register__check { align-items: flex-start; }
.ipnosi-register .ipnosi-register__check input[type="checkbox"] { margin-top: 0.15rem; }

/* Sección "Conviértete en distribuidor": composición centrada (título, texto, 3 ventajas en fila, botón) */
.ipnosi-distributor--center { padding-block: var(--space-xl, 5rem); }
.ipnosi-distributor--center .container { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); text-align: center; }
.ipnosi-distributor__head { max-width: 62ch; }
.ipnosi-distributor__head h2 { margin: 0 0 var(--space-xs); }
.ipnosi-distributor__head p { margin: 0; }
.ipnosi-distributor__perks { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 900px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.ipnosi-distributor__perks li {
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.4rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.06);
  color: #fff; font-size: 0.95rem; line-height: 1.35;
}
.ipnosi-distributor__num { font-family: var(--font-display); font-size: 1.6rem; color: var(--accent-soft); }
.ipnosi-distributor--center .ipnosi-distributor__cta { justify-items: center; }
@media (max-width: 700px) { .ipnosi-distributor__perks { grid-template-columns: 1fr; } .ipnosi-distributor__perks li { flex-direction: row; justify-content: center; } }
@media (max-width: 700px) { .ipnosi-distributor__perks li { flex-direction: column; text-align: center; } }

/* Profesionales: encabezado de la sección de líneas (antes en el hero) */
.ipnosi-pro-intro { max-width: 62ch; margin: 0 auto var(--space-lg); text-align: center; }
.ipnosi-pro-intro h1 { margin: 0 0 var(--space-xs); }
.ipnosi-pro-intro .ipnosi-page-hero__lede { margin-inline: auto; max-width: none; }
/* Encabezado de Profesionales: título en 1 línea (2 máx.) y texto en 2 (3 máx.) en escritorio */
.ipnosi-pro-intro { max-width: 1180px; }
.ipnosi-pro-intro h1 { font-size: clamp(1.9rem, 0.9rem + 3.3vw, 3.4rem); line-height: 1.1; text-wrap: balance; }
.ipnosi-pro-intro .ipnosi-page-hero__lede { max-width: 960px; font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem); text-wrap: pretty; }

.ipnosi-pro-intro .ipnosi-page-hero__lede { max-width: 1060px; }
/* Profesionales (escritorio): las cards 2 y 4 llevan la foto a la izquierda para alternar la lectura */
@media (min-width: 801px) {
  #perfect-blonde.ipnosi-tech-system > .ipnosi-photo,
  #ipnocare-plus.ipnosi-tech-system > .ipnosi-photo { order: -1; }
}

/* ---- Panel de solicitudes del equipo ---- */
.ipnosi-panel__tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--space-sm); }
.ipnosi-panel__tabs a { padding: 0.5rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--text-muted); font-size: 0.9rem; }
.ipnosi-panel__tabs a.is-current, .ipnosi-panel__tabs a:hover { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ipnosi-panel__notice { padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--text-muted); }
.ipnosi-panel__scroll { overflow-x: auto; }
.ipnosi-panel__table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.ipnosi-panel__table th { text-align: left; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--line); }
.ipnosi-panel__table td { padding: 0.8rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ipnosi-panel__back { color: var(--accent-soft); }
.ipnosi-panel__details { margin: 0 0 var(--space-md); max-width: 760px; border: 1px solid var(--line); border-radius: var(--radius-md); }
.ipnosi-panel__details > div { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
.ipnosi-panel__details > div:last-child { border-bottom: 0; }
.ipnosi-panel__details dt { color: var(--text-muted); font-size: 0.85rem; }
.ipnosi-panel__details dd { margin: 0; overflow-wrap: anywhere; }
.ipnosi-panel__decision { max-width: 760px; display: grid; gap: 1rem; }
.ipnosi-panel__decision label { display: block; font-size: 0.85rem; color: var(--text-muted); }
.ipnosi-panel__decision textarea { width: 100%; min-height: 90px; padding: 0.85rem 1.1rem; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); color: var(--text); font-family: var(--font-body); }
.ipnosi-panel__decision button + button { margin-left: 0.5rem; }
@media (max-width: 640px) { .ipnosi-panel__details > div { grid-template-columns: 1fr; gap: 0.2rem; } }
.ipnosi-panel__decision { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.ipnosi-panel__decision p { flex-basis: 100%; margin: 0; }
.ipnosi-panel__decision button + button { margin-left: 0; }
.ipnosi-panel__decision textarea { margin-top: 0.4rem; }

/* ---- Dashboard del equipo ---- */
.ipnosi-dash__ranges, .ipnosi-dash__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 var(--space-sm); color: var(--text-muted); font-size: 0.9rem; }
.ipnosi-dash__ranges a, .ipnosi-dash__sub a { padding: 0.3rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--text-muted); }
.ipnosi-dash__ranges a.is-current, .ipnosi-dash__sub a.is-current, .ipnosi-dash__ranges a:hover, .ipnosi-dash__sub a:hover { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ipnosi-dash__kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; margin-bottom: var(--space-md); }
.ipnosi-dash__kpi { display: grid; gap: 0.35rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.ipnosi-dash__kpi.is-accent { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.ipnosi-dash__kpi-label { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.ipnosi-dash__kpi strong { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1vw, 2rem); font-weight: 400; line-height: 1.1; }
.ipnosi-dash__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 0.75rem; margin-bottom: var(--space-md); }
.ipnosi-dash__card { padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); min-width: 0; }
.ipnosi-dash__card h2 { margin: 0 0 var(--space-xs); font-size: 1.25rem; }
.ipnosi-dash__card--wide { grid-column: 1 / -1; }
.ipnosi-dash__grid > .ipnosi-dash__card--wide:first-child { grid-column: auto; }
.ipnosi-dash__card--full { margin-bottom: var(--space-md); }
.ipnosi-dash__chart { width: 100%; height: 170px; display: block; }
.ipnosi-dash__chart rect { fill: var(--accent); }
.ipnosi-dash__chart rect:hover { fill: var(--accent-soft); }
.ipnosi-dash__empty { margin: 0.5rem 0 0; color: var(--text-muted); font-size: 0.9rem; }
@media (max-width: 1100px) { .ipnosi-dash__kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .ipnosi-dash__grid { grid-template-columns: 1fr; } .ipnosi-dash__kpis { grid-template-columns: repeat(2, 1fr); } }
.ipnosi-dash__grid:has(> .ipnosi-dash__card--wide:only-child) { grid-template-columns: 1fr; }
.ipnosi-dash__card:has(.ipnosi-dash__chart) { display: flex; flex-direction: column; }
.ipnosi-dash__chart { flex: 1; min-height: 200px; height: auto; }

.ipnosi-panel__warn { flex-basis: 100%; margin: 0; padding: 0.8rem 1rem; border: 1px solid #E85D9C; border-radius: var(--radius-md); color: #FF8DBB; font-size: 0.9rem; }
.cf-turnstile { min-height: 65px; }

.ipnosi-ac__verify { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0 0 var(--space-sm); padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); }
.ipnosi-ac__verify p { margin: 0; color: var(--text-muted); font-size: 0.9rem; }
.ipnosi-ac__privacy { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--line); }

.ipnosi-header__account {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  color: var(--text); transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ipnosi-header__account:hover { background: rgba(255,255,255,0.06); border-color: var(--accent); }
@media (min-width: 901px) {
  .ipnosi-header__account { order: 4; border-radius: 50%; }
}

/* Registro: tarjetas de tipo alineadas arriba y campo de archivo con el botón de la marca */
.ipnosi-register__type { align-items: flex-start; }
.ipnosi-register input[type="file"] { padding: 0.55rem 0.7rem; color: var(--text-muted); font-size: 0.88rem; cursor: pointer; }
.ipnosi-register input[type="file"]::file-selector-button {
  margin-right: 0.9rem; padding: 0.5rem 1.1rem; border: 1px solid var(--accent); border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--text);
  font: 600 0.82rem/1 inherit; font-family: inherit; letter-spacing: 0.02em; cursor: pointer; transition: background-color 0.2s ease;
}
.ipnosi-register input[type="file"]::file-selector-button:hover { background: var(--accent); color: #fff; }
.ipnosi-register .ipnosi-register__type { display: flex; align-items: flex-start; align-content: flex-start; }
.ipnosi-register .ipnosi-register__type > span { align-self: flex-start; }

@media (max-width: 600px) {
  .ipnosi-announce__extra { display: none; }
}
@media (max-width: 600px) {
  .ipnosi-announce p { padding-block: 0.45rem; font-size: 0.64rem; letter-spacing: 0.06em; }
}

/* El enlace "¿Ya tienes cuenta?" ocupa todo el ancho del formulario para quedar centrado bajo el botón */
.ipnosi-register__form .ipnosi-register__login { grid-column: 1 / -1; width: 100%; max-width: none; justify-self: stretch; }

/* ---- Mi cuenta (acceso, contraseña olvidada, panel) con el estilo del sitio ---- */
.woocommerce-account .ipnosi-page__header { text-align: center; padding-top: var(--space-md); }
.woocommerce-account:not(.logged-in) .ipnosi-page__body .woocommerce { max-width: 520px; margin: 0 auto; }
.woocommerce-account:not(.logged-in) .ipnosi-page__body h2 { text-align: center; font-size: 1.6rem; margin: 0 0 var(--space-sm); }
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register,
.woocommerce-account form.lost_reset_password {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md); margin: 0 0 var(--space-sm); display: grid; gap: 1rem;
}
.woocommerce-account form .form-row { margin: 0; padding: 0; width: 100%; float: none; }
.woocommerce-account form .form-row label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin: 0 0 0.35rem; }
.woocommerce-account form .required { color: var(--accent-soft); text-decoration: none; }
.woocommerce-account form input.input-text,
.woocommerce-account form input[type="text"],
.woocommerce-account form input[type="email"],
.woocommerce-account form input[type="password"] {
  width: 100%; padding: 0.85rem 1.1rem; border-radius: var(--radius-md); border: 1px solid var(--line);
  background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 0.92rem;
}
.woocommerce-account form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.woocommerce-account .password-input { display: block; position: relative; }
.woocommerce-account .show-password-input { position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; opacity: 0.7; filter: invert(1); width: 1.4rem; height: 1.4rem; }
.woocommerce-account form .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; font-weight: 400; color: var(--text-muted); margin: 0; cursor: pointer; }
.woocommerce-account form .woocommerce-form-login__rememberme input {
  appearance: none; -webkit-appearance: none; width: 1.15rem; height: 1.15rem; border: 1.5px solid var(--text-muted); border-radius: 4px;
  background: transparent; display: inline-grid; place-content: center; cursor: pointer; padding: 0;
}
.woocommerce-account form .woocommerce-form-login__rememberme input:checked { background: var(--accent); border-color: var(--accent); }
.woocommerce-account form .woocommerce-form-login__rememberme input:checked::after { content: ""; width: 0.35rem; height: 0.65rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.woocommerce-account form button.woocommerce-button,
.woocommerce-account form button.button {
  width: 100%; display: flex; align-items: center; justify-content: center; padding: 0.95rem 1.5rem; border: 0; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 45%, var(--brand-violet-dark) 75%, var(--accent) 100%);
  color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; cursor: pointer; transition: filter 0.2s ease;
}
.woocommerce-account form button.woocommerce-button:hover,
.woocommerce-account form button.button:hover { filter: brightness(1.12); color: #fff; background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 45%, var(--brand-violet-dark) 75%, var(--accent) 100%); }
.woocommerce-account .woocommerce-LostPassword { text-align: center; margin: 0; }
.woocommerce-account .woocommerce-LostPassword a,
.ipnosi-account-alt a { color: var(--accent-soft); text-decoration: underline; }
.ipnosi-account-alt { text-align: center; color: var(--text-muted); font-size: 0.88rem; margin: 0; }
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info {
  list-style: none; margin: 0 0 var(--space-sm); padding: 1rem 1.25rem; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 0.9rem;
}
.woocommerce-account .woocommerce-error { border-color: #E85D9C; background: rgba(232, 93, 156, 0.12); color: #FF8DBB; }
.woocommerce-account .woocommerce-message { border-color: #4FBE8B; background: rgba(79, 190, 139, 0.12); }
.woocommerce-account .woocommerce-error::before, .woocommerce-account .woocommerce-message::before, .woocommerce-account .woocommerce-info::before { display: none; }
/* Panel (con sesión): menú lateral en tarjeta */
.woocommerce-account.logged-in .woocommerce { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-md); align-items: start; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); display: grid; gap: 0.2rem; }
.woocommerce-account .woocommerce-MyAccount-navigation a { display: block; padding: 0.65rem 0.9rem; border-radius: var(--radius-md); color: var(--text-muted); font-weight: 600; font-size: 0.9rem; }
.woocommerce-account .woocommerce-MyAccount-navigation a:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--accent); color: #fff; }
.woocommerce-account .woocommerce-MyAccount-content { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-md); }
.woocommerce-account .woocommerce-MyAccount-content a:not(.button) { color: var(--accent-soft); text-decoration: underline; }
@media (max-width: 760px) { .woocommerce-account.logged-in .woocommerce { grid-template-columns: 1fr; } }

/* Mi cuenta: especificidad suficiente para ganarle a los estilos por defecto de WooCommerce y a .ipnosi-shop button.button */
body.woocommerce-account .ipnosi-shop form .form-row input.input-text,
body.woocommerce-account .ipnosi-shop form .form-row input[type="text"],
body.woocommerce-account .ipnosi-shop form .form-row input[type="email"],
body.woocommerce-account .ipnosi-shop form .form-row input[type="password"] {
  background: var(--bg) !important; color: var(--text) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-md) !important;
  padding: 0.85rem 1.1rem !important; height: auto !important; box-shadow: none;
}
body.woocommerce-account .ipnosi-shop form .form-row input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
body.woocommerce-account .ipnosi-shop form button.button:not(.ipnosi-add-to-cart) {
  width: 100%; border: 0; border-radius: var(--radius-pill); padding: 0.95rem 1.5rem; color: #fff;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 45%, var(--brand-violet-dark) 75%, var(--accent) 100%);
}
body.woocommerce-account .ipnosi-shop form button.button:not(.ipnosi-add-to-cart):hover { color: #fff; filter: brightness(1.12);
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 45%, var(--brand-violet-dark) 75%, var(--accent) 100%); }
body.woocommerce-account .ipnosi-shop form .woocommerce-form-login__rememberme { display: flex !important; flex-direction: row; align-items: center; gap: 0.6rem; }
body.woocommerce-account .ipnosi-shop form .woocommerce-form-login__rememberme span { font-size: 0.85rem; font-weight: 400; color: var(--text-muted); }
body.woocommerce-account .ipnosi-shop form .show-password-input { background: none !important; border: 0 !important; width: 1.4rem !important; height: 1.4rem !important; padding: 0 !important; }
body.woocommerce-account .ipnosi-shop form .password-input input { padding-right: 3rem !important; }

/* Encabezado en pantallas medianas dentro de la tienda: menos aire para que quepan carrito, mercado, comprar, idioma y cuenta */
@media (min-width: 901px) and (max-width: 1260px) {
  .ipnosi-header__inner { gap: 0.6rem; }
  .ipnosi-nav__list { gap: 0.9rem; }
  .ipnosi-header .btn.ipnosi-header__cta { padding-inline: 1.1rem; }
}

/* En móvil, dentro de la tienda el encabezado ya está lleno (carrito, mercado, comprar, idioma, menú): el icono de cuenta se oculta ahí */
@media (max-width: 900px) {
  body.woocommerce-page .ipnosi-header__account { display: none; }
}

@media (max-width: 480px) {
  body.woocommerce-page .ipnosi-header__mobile-actions { gap: 0.3rem; }
  body.woocommerce-page .ipnosi-header__logo img { width: 100px; height: auto; }
  body.woocommerce-page .ipnosi-lang-switch__toggle, body.woocommerce-page .ipnosi-market-switch__toggle { min-width: 36px; padding: 0 0.4rem; }
  body.woocommerce-page .ipnosi-header__toggle, body.woocommerce-page .ipnosi-cart-btn, body.woocommerce-page .ipnosi-header__cta { width: 38px; min-width: 38px; }
}

/* Mi cuenta con sesión: WooCommerce flota el menú y el contenido; dentro de la rejilla se anula para que ocupen su columna completa */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; }
body.woocommerce-account.logged-in .ipnosi-page__body .woocommerce { grid-template-columns: 220px minmax(0, 1fr); }
@media (max-width: 760px) { body.woocommerce-account.logged-in .ipnosi-page__body .woocommerce { grid-template-columns: minmax(0, 1fr); } }
body.woocommerce-account.logged-in .ipnosi-page__body .woocommerce::before,
body.woocommerce-account.logged-in .ipnosi-page__body .woocommerce::after { content: none; display: none; }
body.woocommerce-account.logged-in .ipnosi-page__body .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
body.woocommerce-account.logged-in .ipnosi-page__body .woocommerce > .woocommerce-notices-wrapper:empty { display: none; }

/* ---- Mi cuenta: ancho en escritorio, direcciones, tablas y formularios internos ---- */
body.woocommerce-account .ipnosi-content--page { max-width: 1120px; }
body.woocommerce-account.logged-in .ipnosi-page__body .woocommerce { grid-template-columns: 240px minmax(0, 1fr); }
body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3 { font-size: 1.35rem; margin: 0 0 var(--space-xs); letter-spacing: 0.02em; }
body.woocommerce-account .woocommerce-Addresses,
body.woocommerce-account .u-columns.col2-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); width: 100%; }
body.woocommerce-account .woocommerce-Addresses::before, body.woocommerce-account .woocommerce-Addresses::after,
body.woocommerce-account .u-columns.col2-set::before, body.woocommerce-account .u-columns.col2-set::after { content: none; display: none; }
body.woocommerce-account .woocommerce-Address,
body.woocommerce-account .u-column1, body.woocommerce-account .u-column2 {
  float: none; width: auto; max-width: none; padding: var(--space-sm); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg);
}
body.woocommerce-account .woocommerce-Address-title { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: var(--space-xs); }
body.woocommerce-account .woocommerce-Address-title h2, body.woocommerce-account .woocommerce-Address-title h3 { margin: 0; }
body.woocommerce-account .woocommerce-Address-title a.edit { float: none; font-size: 0.85rem; }
body.woocommerce-account address { font-style: normal; color: var(--text-muted); line-height: 1.7; }
@media (max-width: 760px) { body.woocommerce-account .woocommerce-Addresses, body.woocommerce-account .u-columns.col2-set { grid-template-columns: minmax(0, 1fr); } }
/* Pedidos y descargas */
body.woocommerce-account .woocommerce-MyAccount-content table { width: 100%; border-collapse: collapse; border: 0; }
body.woocommerce-account .woocommerce-MyAccount-content table th,
body.woocommerce-account .woocommerce-MyAccount-content table td { padding: 0.75rem 0.6rem; border: 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.9rem; }
body.woocommerce-account .woocommerce-MyAccount-content table th { color: var(--text-muted); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
/* Formularios dentro de la cuenta (detalles, direcciones) */
body.woocommerce-account .woocommerce-MyAccount-content form .form-row { margin-bottom: 1rem; }
body.woocommerce-account .woocommerce-MyAccount-content form .form-row-first,
body.woocommerce-account .woocommerce-MyAccount-content form .form-row-last { width: calc(50% - 0.5rem); float: left; }
body.woocommerce-account .woocommerce-MyAccount-content form .form-row-first { margin-right: 1rem; }
body.woocommerce-account .woocommerce-MyAccount-content form .form-row-wide { clear: both; }
body.woocommerce-account .woocommerce-MyAccount-content form::after { content: ""; display: table; clear: both; }
body.woocommerce-account .woocommerce-MyAccount-content select { width: 100%; padding: 0.85rem 1.1rem; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--bg); color: var(--text); }
body.woocommerce-account .woocommerce-MyAccount-content fieldset { border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-sm); margin: var(--space-sm) 0; }
body.woocommerce-account .woocommerce-MyAccount-content legend { padding: 0 0.5rem; color: var(--text-muted); }
@media (max-width: 560px) { body.woocommerce-account .woocommerce-MyAccount-content form .form-row-first, body.woocommerce-account .woocommerce-MyAccount-content form .form-row-last { width: 100%; float: none; margin-right: 0; } }

/* Primera opción del menú móvil: Mi cuenta / Iniciar sesión */
.ipnosi-header__nav-account { display: none; }
@media (max-width: 900px) {
  .ipnosi-header__nav-account { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0; margin-bottom: 0.35rem; font-weight: 700; color: var(--accent-soft); border-bottom: 1px solid var(--line); }
}
body.woocommerce-account .woocommerce-MyAccount-content .u-columns .u-column1,
body.woocommerce-account .woocommerce-MyAccount-content .u-columns .u-column2,
body.woocommerce-account .woocommerce-MyAccount-content .addresses .col-1,
body.woocommerce-account .woocommerce-MyAccount-content .addresses .col-2 { float: none !important; width: auto !important; max-width: none; }
body.woocommerce-account .woocommerce-Address-title a.edit { float: none !important; }
body.woocommerce-account .woocommerce-MyAccount-content .u-column1, body.woocommerce-account .woocommerce-MyAccount-content .u-column2 { text-align: left; }
body.woocommerce-account .woocommerce-MyAccount-content form .form-row-wide input.input-text { width: 100%; }
body.woocommerce-account .woocommerce-MyAccount-content form em, body.woocommerce-account .woocommerce-MyAccount-content form span em { display: block; margin-top: 0.35rem; font-size: 0.8rem; color: var(--text-muted); }

/* Mi cuenta (ajuste): mismo ancho que el resto del sitio, títulos de direcciones alineados, móvil en una columna (va al final para ganar el orden) */
body.woocommerce-account .ipnosi-content--page { max-width: 1240px; }
body.woocommerce-account.logged-in .ipnosi-page__body .woocommerce { grid-template-columns: 260px minmax(0, 1fr); }
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title { display: block; text-align: left; }
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h2,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title h3 { float: none; width: auto; text-align: left; font-size: 1.15rem; margin: 0 0 0.4rem; }
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Address-title a.edit { display: inline-block; margin: 0 0 var(--space-xs); text-align: left; }
@media (max-width: 760px) {
  body.woocommerce-account.logged-in .ipnosi-page__body .woocommerce { grid-template-columns: minmax(0, 1fr); }
  body.woocommerce-account .woocommerce-MyAccount-content { padding: var(--space-sm); }
  body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Addresses,
  body.woocommerce-account .woocommerce-MyAccount-content .u-columns.col2-set { grid-template-columns: minmax(0, 1fr); }
}

/* Mi cuenta (ajuste 2): campos anchos completos y aviso de "sin pedidos" centrado */
body.woocommerce-account .woocommerce-MyAccount-content form .form-row.form-row-wide { width: 100% !important; float: none !important; }
body.woocommerce-account .woocommerce-MyAccount-content form .form-row.form-row-wide input.input-text { width: 100%; }
body.woocommerce-account .woocommerce-MyAccount-content form .password-input { width: 100%; }
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-align: center; padding: var(--space-md) var(--space-sm);
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.button,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message a.button {
  float: none !important; margin: 0 !important; display: inline-flex; align-items: center; justify-content: center; padding: 0.85rem 1.8rem; border: 0; border-radius: var(--radius-pill); color: #fff;
  font-weight: 700; font-size: 0.92rem; text-decoration: none;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent) 45%, var(--brand-violet-dark) 75%, var(--accent) 100%);
}
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info a.button:hover { filter: brightness(1.12); color: #fff; }

/* Los párrafos tienen max-width: 65ch; las filas de formulario de la cuenta son <p> y deben ocupar todo el ancho */
body.woocommerce-account .woocommerce-MyAccount-content form .form-row,
body.woocommerce-account .woocommerce-MyAccount-content form p { max-width: none; }
body.woocommerce-account .woocommerce-MyAccount-content form em { max-width: none; }

/* Mi cuenta: vínculos sin subrayado (se distinguen por el color) */
body.woocommerce-account .ipnosi-page__body a:not(.button):not(.woocommerce-Button) { text-decoration: none; }
body.woocommerce-account .ipnosi-page__body a:not(.button):not(.woocommerce-Button):hover { color: #fff; }
body.woocommerce-account .woocommerce-MyAccount-navigation a:hover { color: var(--text); }

/* Botón "Usar dirección de facturación" */
.ipnosi-ship-copy { margin: var(--space-xs) 0 0; }
.ipnosi-ship-copy__btn {
  display: inline-flex; align-items: center; padding: 0.55rem 1.1rem; border: 1px solid var(--accent); border-radius: var(--radius-pill);
  background: transparent; color: var(--accent-soft); font-family: inherit; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.02em; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ipnosi-ship-copy__btn:hover { background: var(--accent); color: #fff; }
.ipnosi-ship-copy__hint { margin: 0 0 0.4rem; color: var(--text-muted); font-size: 0.9rem; }
.ipnosi-ship-copy__ok { display: inline-block; margin-bottom: 0.6rem; color: #4FBE8B; font-weight: 600; }
body.woocommerce-account .woocommerce-MyAccount-content form.ipnosi-ship-copy { margin: var(--space-xs) 0 var(--space-sm); display: block; }