/*
Theme Name: Astra Child - Stella Pharm
Theme URI: https://stellapharm.com.pe
Description: Child theme de Astra para Stella Pharm. Carga las tipograficas licenciadas (Mosvita, Mosvita Expanded, Berenhart), los tokens del design system y las clases utilitarias que Elementor no puede expresar con sus controles nativos.
Author: Stella Pharm
Template: astra
Version: 1.0.0
Text Domain: astra-child-stella
*/

/* ==========================================================================
   1. Webfonts licenciadas - archivos provistos por Stella Pharm
   ========================================================================== */
/* Tipografias. 03/10/2026: los archivos originales de Berenhart y Mosvita nunca
   se subieron (daban error en todo el sitio). Se sirven dos sustitutas variables
   desde el propio servidor, con los MISMOS nombres de familia, para no tener que
   tocar ni una sola regla del resto de la hoja ni de Elementor:
     Berenhart -> Fraunces (titulares)   |   Mosvita -> DM Sans (cuerpo)
   Cuando lleguen los archivos reales, basta con sustituir los .woff2 de
   assets/fonts/ y volver a poner una declaracion por peso. */
/* Fuentes de marca REALES, entregadas por el cliente el 07/10/2026.
   Mosvita es la principal (texto) y Berenhart la secundaria (titulares).
   Mosvita-Regular.woff2 es la version VARIABLE del original: eje wght de
   300 a 900 y eje wdth de 100 a 125, asi que un solo archivo cubre todos
   los pesos y tambien la variante Expanded. Subconjunto latino (35 KB).
   Las sustitutas del 03/10 quedan como *.woff2.sustituta. */
@font-face {
  font-family: "Mosvita";
  src: url("assets/fonts/Mosvita-Regular.woff2") format("woff2");
  font-weight: 300 900;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mosvita Expanded";
  src: url("assets/fonts/Mosvita-Regular.woff2") format("woff2");
  font-weight: 300 900;
  font-stretch: 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Berenhart";
  src: url("assets/fonts/Berenhart-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



/* ==========================================================================
   2. Tokens del design system Stella Pharm
   ========================================================================== */
:root {
  /* Rampa de marca */
  --sp-magenta-900: #7d0e46;
  --sp-magenta-800: #a51159;
  --sp-magenta-700: #cc1774;
  --sp-magenta-600: #db2265;
  --sp-magenta-500: #e34b86;
  --sp-magenta-300: #f3abb9;
  --sp-magenta-200: #fbe0e3;
  --sp-magenta-100: #fdf1f3;

  /* Neutros calidos */
  --sp-ink-1000: #0d0b0c;
  --sp-ink-900: #161315;
  --sp-ink-800: #2a2427;
  --sp-ink-700: #453d41;
  --sp-ink-600: #6b6165;
  --sp-ink-500: #928a8d;
  --sp-ink-400: #b8b1b3;
  --sp-ink-300: #d8d2d4;
  --sp-ink-200: #eae6e7;
  --sp-ink-100: #f5f2f2;
  --sp-ink-050: #faf8f8;

  /* Alias semanticos usados por las utilidades */
  --sp-primary: var(--sp-magenta-700);
  --sp-primary-hover: var(--sp-magenta-800);
  --sp-primary-press: var(--sp-magenta-900);
  --sp-accent: var(--sp-magenta-300);
  --sp-blush: var(--sp-magenta-200);
  --sp-surface: var(--sp-magenta-100);
  --sp-secondary: var(--sp-ink-900);
  --sp-ink-muted: var(--sp-ink-600);
  --sp-hairline: var(--sp-ink-200);
  --sp-border-strong: var(--sp-ink-300);

  /* Tipografia */
  --sp-font-main: "Mosvita", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sp-font-heading: "Berenhart", "Iowan Old Style", Georgia, serif;
  --sp-font-expanded: "Mosvita Expanded", var(--sp-font-main);

  /* Forma y ritmo */
  --sp-radius-xs: 4px;
  --sp-radius-sm: 6px;
  --sp-radius-lg: 12px;
  --sp-radius-pill: 999px;
  --sp-unit: 8px;

  /* Elevacion */
  --sp-shadow-xs: 0 1px 2px rgba(22, 19, 21, .05);
  --sp-shadow-md: 0 6px 16px rgba(22, 19, 21, .08);
  --sp-shadow-lg: 0 16px 40px rgba(22, 19, 21, .12);
  --sp-shadow-brand: 0 8px 20px rgba(204, 23, 116, .22);
}

/* ==========================================================================
   3. Base tipografica
   ========================================================================== */
body,
.elementor-widget-text-editor,
.elementor-widget-heading {
  text-wrap: pretty;
}

body {
  font-family: var(--sp-font-main);
  font-weight: 400;
  line-height: 1.65;
  color: var(--sp-ink-800);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
  font-family: var(--sp-font-heading);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.08;
}

h3, .entry-content h3 { line-height: 1.16; }

a { color: var(--sp-primary); text-decoration: none; }
a:hover { color: var(--sp-primary-hover); }

:focus-visible {
  outline: 2px solid var(--sp-magenta-500);
  outline-offset: 2px;
  border-radius: var(--sp-radius-xs);
}

/* ==========================================================================
   4. Utilidades tipograficas (clases CSS para widgets de Elementor)
   ========================================================================== */
.sp-eyebrow {
  font-family: var(--sp-font-expanded) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--sp-primary);
}
.sp-eyebrow--muted { color: var(--sp-ink-muted); }
.sp-eyebrow--accent { color: var(--sp-accent); }

.sp-lead {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  font-weight: 300;
  line-height: 1.6;
  color: var(--sp-ink-muted);
}
.sp-lead--on-ink { color: rgba(255, 255, 255, .72); }

.sp-num {
  font-family: var(--sp-font-expanded);
  font-variant-numeric: tabular-nums;
}

.sp-serif-quote p,
.sp-serif-quote {
  font-family: var(--sp-font-heading);
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  line-height: 1.28;
  color: var(--sp-ink-900);
}

.sp-caption { font-size: 13px; color: var(--sp-ink-muted); }
.sp-caption--on-ink { color: rgba(255, 255, 255, .6); }
.sp-small { font-size: 14px; }
.sp-muted { color: var(--sp-ink-muted); }

/* ==========================================================================
   5. Botones - se aplican sobre el widget Button nativo de Elementor
   ========================================================================== */
.sp-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 calc(var(--sp-unit) * 3.5);
  border-radius: var(--sp-radius-pill);
  border: 1px solid transparent;
  font-family: var(--sp-font-expanded);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background 140ms cubic-bezier(.22,.61,.36,1), color 140ms, border-color 140ms, box-shadow 140ms, transform 140ms;
}

.sp-btn--primary .elementor-button { background-color: var(--sp-primary); color: #fff; }
.sp-btn--primary .elementor-button:hover { background-color: var(--sp-primary-hover); color: #fff; box-shadow: var(--sp-shadow-brand); }
.sp-btn--primary .elementor-button:active { background-color: var(--sp-primary-press); box-shadow: none; transform: translateY(1px); }

.sp-btn--secondary .elementor-button { background-color: transparent; color: var(--sp-secondary); border-color: var(--sp-border-strong); }
.sp-btn--secondary .elementor-button:hover { background-color: var(--sp-surface); border-color: var(--sp-accent); color: var(--sp-primary); }

.sp-btn--ghost .elementor-button { background-color: transparent; color: var(--sp-primary); padding-inline: calc(var(--sp-unit) * 2); }
.sp-btn--ghost .elementor-button:hover { background-color: var(--sp-surface); }

.sp-btn--light .elementor-button { background-color: #fff; color: var(--sp-secondary); }
.sp-btn--light .elementor-button:hover { background-color: var(--sp-blush); color: var(--sp-primary-hover); }

.sp-btn--on-ink .elementor-button { background-color: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.sp-btn--on-ink .elementor-button:hover { background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .55); color: #fff; }

.sp-btn--block .elementor-button { width: 100%; }

/* Enlace con flecha */
.sp-link-arrow a,
.sp-link-arrow .elementor-button {
  font-family: var(--sp-font-expanded);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sp-primary);
  background: transparent;
  padding: 0;
  min-height: 0;
  border: 0;
}
.sp-link-arrow .elementor-button:hover { background: transparent; color: var(--sp-primary-hover); }

/* ==========================================================================
   6. Badges y chips
   ========================================================================== */
.sp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-blush);
  color: var(--sp-primary-press);
  font-family: var(--sp-font-expanded);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.6;
}

.sp-icon-chip .elementor-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--sp-radius-pill);
  background: var(--sp-surface);
  color: var(--sp-primary);
}
.sp-icon-chip .elementor-icon svg { width: 22px; height: 22px; }

/* ==========================================================================
   7. Tarjetas - se aplican sobre containers de Elementor
   ========================================================================== */
.sp-card {
  background: #fff;
  border: 1px solid var(--sp-hairline);
  border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-xs);
  transition: box-shadow 220ms cubic-bezier(.16,1,.3,1), transform 220ms cubic-bezier(.16,1,.3,1), border-color 220ms;
}
.sp-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sp-shadow-lg);
  border-color: var(--sp-accent);
}
.sp-card--static:hover { transform: none; box-shadow: var(--sp-shadow-xs); border-color: var(--sp-hairline); }

/* ==========================================================================
   8. Media wells - fondo blush detras de cada foto
   ========================================================================== */
.sp-well {
  position: relative;
  background: linear-gradient(180deg, var(--sp-blush), var(--sp-surface));
  border-radius: var(--sp-radius-lg);
  overflow: hidden;
}
.sp-well img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-well--4x3 { aspect-ratio: 4 / 3; }
.sp-well--4x5 { aspect-ratio: 4 / 5; }
.sp-well--flush { border-radius: 0; }
.sp-well--flush img { border-radius: 0; }

.sp-well--4x3 .elementor-widget-container,
.sp-well--4x5 .elementor-widget-container,
.sp-well--4x3 .elementor-widget-image,
.sp-well--4x5 .elementor-widget-image { height: 100%; }
.sp-well--4x3 .elementor-widget-image img,
.sp-well--4x5 .elementor-widget-image img { height: 100%; }

/* ==========================================================================
   9. Statbar - valor grande sobre etiqueta
   ========================================================================== */
.sp-stat__value {
  font-family: var(--sp-font-expanded);
  font-weight: 500;
  font-size: 1.7rem;
  letter-spacing: .02em;
  line-height: 1.2;
  color: var(--sp-ink-900);
}
.sp-stat__label { font-size: 13px; color: var(--sp-ink-muted); line-height: 1.5; }

/* ==========================================================================
   10. Tabla comparativa
   ========================================================================== */
.sp-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--sp-hairline);
  border-radius: var(--sp-radius-lg);
  background: #fff;
}
.sp-table-wrap table {
  border-collapse: collapse;
  width: 100%;
  min-width: 560px;
  font-size: 15px;
  margin: 0;
}
.sp-table-wrap th,
.sp-table-wrap td {
  text-align: left;
  padding: calc(var(--sp-unit) * 2) calc(var(--sp-unit) * 2.5);
  border-bottom: 1px solid var(--sp-hairline);
  vertical-align: top;
}
.sp-table-wrap thead th {
  font-family: var(--sp-font-expanded);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sp-ink-muted);
  background: var(--sp-surface);
}
.sp-table-wrap thead th:last-child { color: var(--sp-primary-press); }
.sp-table-wrap tbody tr:last-child td { border-bottom: 0; }
.sp-table-wrap tbody tr:hover { background: var(--sp-surface); }
.sp-table-wrap th[scope="row"] { font-weight: 500; width: 30%; }
.sp-table-wrap td:last-child { background: rgba(251, 224, 227, .35); font-weight: 500; }
.sp-table-wrap caption {
  caption-side: bottom;
  padding: calc(var(--sp-unit) * 2);
  font-size: 13px;
  color: var(--sp-ink-muted);
  text-align: left;
}

/* ==========================================================================
   11. FAQ - acordeon nativo de Elementor con el lenguaje visual Stella
   ========================================================================== */
.sp-faq .elementor-accordion-item,
.sp-faq .e-n-accordion-item {
  background: #fff;
  border: 1px solid var(--sp-hairline) !important;
  border-radius: var(--sp-radius-lg);
  margin-bottom: calc(var(--sp-unit) * 1.5);
  overflow: hidden;
}
.sp-faq .elementor-accordion-item:last-child,
.sp-faq .e-n-accordion-item:last-child { margin-bottom: 0; }

.sp-faq .elementor-tab-title,
.sp-faq .e-n-accordion-item-title {
  padding: calc(var(--sp-unit) * 2.5) calc(var(--sp-unit) * 3) !important;
  font-family: var(--sp-font-main);
  font-weight: 500;
  font-size: 1.02rem;
  color: var(--sp-ink-800);
  border: 0 !important;
}
.sp-faq .elementor-tab-title:hover,
.sp-faq .e-n-accordion-item-title:hover { color: var(--sp-primary); }
.sp-faq .elementor-tab-title.elementor-active,
.sp-faq .e-n-accordion-item[open] > .e-n-accordion-item-title { color: var(--sp-primary); }
.sp-faq .elementor-accordion-item:has(.elementor-active),
.sp-faq .e-n-accordion-item[open] {
  border-color: var(--sp-accent) !important;
  box-shadow: var(--sp-shadow-xs);
}
.sp-faq .elementor-tab-content,
.sp-faq .e-n-accordion-item-content {
  padding: 0 calc(var(--sp-unit) * 3) calc(var(--sp-unit) * 3) !important;
  border: 0 !important;
  color: var(--sp-ink-muted);
  max-width: 72ch;
}
.sp-faq .elementor-accordion-icon { color: var(--sp-primary); }

/* ==========================================================================
   12. Sparkle rule - marca + linea degradada
   ========================================================================== */
.sp-sparkle-rule { display: flex; align-items: center; gap: calc(var(--sp-unit) * 1.5); }
.sp-sparkle-rule img { width: 18px; height: 18px; flex: none; }
.sp-sparkle-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--sp-primary), var(--sp-accent));
}
.sp-sparkle-rule .elementor-widget-container { display: flex; align-items: center; width: 100%; }

/* ==========================================================================
   13. Superficies de seccion
   ========================================================================== */
.sp-section--blush { background-color: var(--sp-surface); }
.sp-section--well { background-image: linear-gradient(180deg, var(--sp-surface), #fff); }
.sp-section--hero { background-image: linear-gradient(180deg, var(--sp-surface), #fff); border-bottom: 1px solid var(--sp-hairline); }
.sp-section--ink { background-color: var(--sp-secondary); color: #fff; }
.sp-section--ink h1,
.sp-section--ink h2,
.sp-section--ink h3 { color: #fff; }

/* Regla hairline entre parrafos apilados */
.sp-rule { height: 1px; background: var(--sp-hairline); border: 0; margin: 0; }

/* Lista "a quien abastecemos" - negrita inicial destacada */
.sp-supply strong { color: var(--sp-ink-900); font-weight: 600; }

/* ==========================================================================
   14. Barra de utilidad y header (XPRO)
   ========================================================================== */
.sp-utility {
  background-color: var(--sp-secondary);
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
}
.sp-utility a { color: #fff; }
.sp-utility a:hover { color: var(--sp-accent); }
.sp-utility .elementor-icon-list-item { font-size: 13px; }

.sp-header {
  background-color: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sp-hairline);
}

/* Footer */
.sp-footer { background-color: var(--sp-secondary); color: rgba(255, 255, 255, .72); }
.sp-footer h2, .sp-footer h3, .sp-footer h4 { color: #fff; }
.sp-footer a { color: rgba(255, 255, 255, .82); font-size: 15px; }
.sp-footer a:hover { color: #fff; }
.sp-footer__title {
  font-family: var(--sp-font-expanded) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #fff !important;
}
.sp-footer__base {
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
}

/* ==========================================================================
   14b. Header XPRO - detalle
   ========================================================================== */
.xpro-theme-builder-header { position: relative; z-index: 99; }
.xtb-header-sticky .sp-header__main { background-color: rgba(255, 255, 255, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--sp-hairline); }
.sp-header { background: transparent; border: 0; backdrop-filter: none; }
.sp-utility__text p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .78); }
.sp-utility__list .elementor-icon-list-text { font-size: 13px; }
.sp-nav .xpro-elementor-horizontal-navbar-nav > li > a { position: relative; }
.sp-nav .xpro-elementor-horizontal-navbar-nav > li > a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1px;
  background: linear-gradient(90deg, var(--sp-primary), var(--sp-accent));
  transform: scaleX(0); transform-origin: left; transition: transform 220ms cubic-bezier(.16,1,.3,1);
}
.sp-nav .xpro-elementor-horizontal-navbar-nav > li:hover > a::after,
.sp-nav .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a::after { transform: scaleX(1); }
.sp-nav .sub-menu { border: 1px solid var(--sp-hairline); border-radius: var(--sp-radius-lg); padding: 8px 0; overflow: hidden; }
.sp-header-icon .elementor-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--sp-radius-pill); transition: background-color 140ms; }
.sp-header-icon .elementor-icon:hover { background-color: var(--sp-surface); }
.sp-search .xpro-elementor-search-toggle, .sp-search .xpro-search-toggle { width: 40px; height: 40px; border-radius: var(--sp-radius-pill); display: grid; place-items: center; }
.sp-search .xpro-elementor-search-toggle:hover { background: var(--sp-surface); }
.sp-logo img { display: block; }

/* Hero: el titular cabe en dos lineas */
.sp-section--hero h1, .sp-section--hero .elementor-heading-title.elementor-size-default:is(h1) { font-size: clamp(40px, 4.6vw, 58px); line-height: 1.06; }
.sp-section--hero .sp-lead { max-width: 56ch; }

/* Tarjeta blush */
.sp-card--blush { background: var(--sp-surface); border-color: var(--sp-accent); }

/* Botones de salto a lineas */
.sp-jump .sp-btn .elementor-button { min-height: 38px; padding: 0 18px; font-size: 11px; }

/* Pasos y filas de familia */
.sp-step { border-top: 1px solid var(--sp-ink-900); }
.sp-step__num { color: var(--sp-primary); }
.sp-family-row h3 { margin: 0; }
.sp-family-row .elementor-widget-text-editor p { margin: 0; }

/* Registro (plantilla para popup) */
.sp-register__intro { background: var(--sp-surface); border-right: 1px solid var(--sp-hairline); }
@media (max-width: 767px) { .sp-register__intro { border-right: 0; border-bottom: 1px solid var(--sp-hairline); } }

/* ==========================================================================
   14c. Productos - grid XPRO con el lenguaje Stella
   ========================================================================== */
.sp-products .xpro-woo-product-grid-item > .xpro-woo-product-grid-title-wrapper,
.sp-products .xpro-woo-product-grid-item { background: transparent; }
.sp-products .xpro-woo-prodcuts-layouts {
  background: #fff; border: 1px solid var(--sp-hairline); border-radius: var(--sp-radius-lg);
  box-shadow: var(--sp-shadow-xs); overflow: hidden;
  transition: box-shadow 220ms cubic-bezier(.16,1,.3,1), transform 220ms cubic-bezier(.16,1,.3,1), border-color 220ms;
}
.sp-products .xpro-woo-prodcuts-layouts:hover { transform: translateY(-2px); box-shadow: var(--sp-shadow-lg); border-color: var(--sp-accent); }
.sp-products .xpro-woo-product-img-section { background: linear-gradient(180deg, var(--sp-blush), var(--sp-surface)); aspect-ratio: 1 / 1; }
.sp-products .xpro-woo-product-img-section img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: normal; }
.sp-products .xpro-woo-product-grid-content-sec { padding: 20px 22px 24px; text-align: left; }
.sp-products .xpro-woo-product-grid-category-wrapper,
.sp-products .xpro-woo-product-grid-category-wrapper a {
  font-family: var(--sp-font-expanded); font-size: 11px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sp-primary); margin: 0 0 8px;
}
.sp-products .xpro-woo-product-grid-title { font-family: var(--sp-font-heading); font-weight: 400; font-size: 22px; line-height: 1.16; letter-spacing: -.02em; color: var(--sp-ink-900); margin: 0 0 12px; }
.sp-products .xpro-woo-product-grid-price-wrapper,
.sp-products .xpro-woo-product-grid-price-wrapper .price { font-family: var(--sp-font-expanded); font-size: 15px; font-weight: 500; color: var(--sp-ink-900); font-variant-numeric: tabular-nums; }
.sp-products .xpro-woo-product-grid-btn-section .button {
  border-radius: var(--sp-radius-pill); background: var(--sp-primary); color: #fff;
  font-family: var(--sp-font-expanded); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 12px 20px;
}
.sp-products .xpro-woo-product-grid-btn-section .button:hover { background: var(--sp-primary-hover); box-shadow: var(--sp-shadow-brand); }

/* ==========================================================================
   14d. Fluent Forms - campos del design system
   ========================================================================== */
.sp-form .ff-el-input--label label { font-family: var(--sp-font-main); font-weight: 500; font-size: 14px; color: var(--sp-ink-800); }
.sp-form .ff-el-is-required.asterisk-right label::after { color: var(--sp-primary); }
.sp-form .ff-el-form-control {
  font-family: var(--sp-font-main); font-size: 15px; color: var(--sp-ink-900); background: #fff;
  border: 1px solid var(--sp-border-strong); border-radius: var(--sp-radius-sm); padding: 11px 14px; min-height: 46px;
  transition: border-color 140ms, box-shadow 140ms;
}
.sp-form .ff-el-form-control::placeholder { color: var(--sp-ink-500); }
.sp-form .ff-el-form-control:focus { outline: 0; border-color: var(--sp-primary); box-shadow: 0 0 0 3px var(--sp-blush); }
.sp-form .ff-el-group { margin-bottom: 18px; }
.sp-form .ff-el-tc label, .sp-form .ff_tc_checkbox + div { font-size: 13px; color: var(--sp-ink-muted); }
.sp-form .ff-btn-submit, .sp-form button[type="submit"] {
  background: var(--sp-primary) !important; color: #fff !important; border: 0; border-radius: var(--sp-radius-pill) !important;
  font-family: var(--sp-font-expanded); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  min-height: 48px; padding: 0 28px; transition: background-color 140ms, box-shadow 140ms, transform 140ms;
}
.sp-form .ff-btn-submit:hover { background: var(--sp-primary-hover) !important; box-shadow: var(--sp-shadow-brand); }
.sp-form .ff-btn-submit:active { background: var(--sp-primary-press) !important; box-shadow: none; transform: translateY(1px); }
.sp-form .ff-message-success { border: 1px solid var(--sp-accent); background: var(--sp-surface); border-radius: var(--sp-radius-lg); color: var(--sp-ink-800); padding: 20px 24px; }
.sp-form .error.text-danger { color: #a8202a; font-size: 13px; }

/* ==========================================================================
   14e. WooCommerce - carrito, checkout, cuenta y tienda
   ========================================================================== */
.woocommerce-cart .site-content, .woocommerce-checkout .site-content, .woocommerce-account .site-content { background: #fff; }
.woocommerce h1.entry-title, .woocommerce-page h1.entry-title, .woocommerce-products-header__title { font-family: var(--sp-font-heading); font-weight: 400; letter-spacing: -.02em; }
.woocommerce table.shop_table { border: 1px solid var(--sp-hairline); border-radius: var(--sp-radius-lg); border-collapse: separate; overflow: hidden; }
.woocommerce table.shop_table th { font-family: var(--sp-font-expanded); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--sp-ink-muted); background: var(--sp-surface); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th { border-color: var(--sp-hairline) !important; }
.woocommerce .amount, .woocommerce .quantity .qty { font-family: var(--sp-font-expanded); font-variant-numeric: tabular-nums; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce .checkout-button, .woocommerce #place_order {
  background: var(--sp-primary); color: #fff; border: 0; border-radius: var(--sp-radius-pill);
  font-family: var(--sp-font-expanded); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; padding: 15px 28px;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce .checkout-button:hover, .woocommerce #place_order:hover { background: var(--sp-primary-hover); color: #fff; box-shadow: var(--sp-shadow-brand); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select,
.woocommerce-page form .form-row .select2-container .select2-selection {
  border: 1px solid var(--sp-border-strong); border-radius: var(--sp-radius-sm); padding: 10px 14px; min-height: 46px; background: #fff;
}
.woocommerce form .form-row input.input-text:focus, .woocommerce form .form-row textarea:focus { border-color: var(--sp-primary); box-shadow: 0 0 0 3px var(--sp-blush); outline: 0; }
.woocommerce form .form-row label { font-weight: 500; font-size: 14px; color: var(--sp-ink-800); }
.woocommerce .cart-collaterals .cart_totals, .woocommerce-checkout-review-order, #customer_login .u-column1, #customer_login .u-column2 {
  background: #fff; border: 1px solid var(--sp-hairline); border-radius: var(--sp-radius-lg); padding: 28px; box-shadow: var(--sp-shadow-xs);
}
.woocommerce-info, .woocommerce-message { border-top-color: var(--sp-primary); background: var(--sp-surface); color: var(--sp-ink-800); }
.woocommerce-info::before, .woocommerce-message::before { color: var(--sp-primary); }
.woocommerce-error { border-top-color: #a8202a; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--sp-hairline); border-radius: var(--sp-radius-lg); overflow: hidden; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 12px 18px; border-bottom: 1px solid var(--sp-hairline); color: var(--sp-ink-800); }
.woocommerce-MyAccount-navigation li.is-active a, .woocommerce-MyAccount-navigation li a:hover { background: var(--sp-surface); color: var(--sp-primary); }
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--sp-font-heading); font-weight: 400; font-size: 20px; color: var(--sp-ink-900); }
.woocommerce ul.products li.product .price { font-family: var(--sp-font-expanded); color: var(--sp-ink-900); }
.woocommerce span.onsale { background: var(--sp-primary); border-radius: var(--sp-radius-pill); }
.single-product div.product .product_title { font-family: var(--sp-font-heading); font-weight: 400; letter-spacing: -.02em; }
.single-product div.product p.price { font-family: var(--sp-font-expanded); color: var(--sp-ink-900); }

/* Ocultar en movil (clase aplicada desde Elementor) */
@media (max-width: 767px) { .sp-utility__text { display: none; } }

/* ==========================================================================
   15. Accesibilidad - respeta la preferencia de movimiento reducido
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .sp-card,
  .sp-btn .elementor-button { transition-duration: 0ms !important; }
  .sp-card:hover { transform: none; }
}

/* ==========================================================================
   16. Ajustes de widgets Heading (el kit asigna Berenhart y magenta por defecto)
   ========================================================================== */
body { background-color: #fff; }
body .elementor-widget-heading .elementor-heading-title { color: var(--sp-ink-900); }
body .sp-section--ink .elementor-widget-heading .elementor-heading-title, body .sp-footer .elementor-widget-heading .elementor-heading-title { color: #fff; }
body .sp-eyebrow .elementor-heading-title { font-family: var(--sp-font-expanded); font-weight: 500; font-size: 12px; line-height: 1.4; letter-spacing: .18em; text-transform: uppercase; color: var(--sp-primary); }
body .sp-eyebrow--muted .elementor-heading-title { color: var(--sp-ink-muted); }
body .sp-eyebrow--accent .elementor-heading-title, body .sp-section--ink .sp-eyebrow .elementor-heading-title { color: var(--sp-accent); }
body .sp-stat__value .elementor-heading-title { font-family: var(--sp-font-expanded); font-weight: 500; font-size: 1.7rem; line-height: 1.2; letter-spacing: .02em; color: var(--sp-ink-900); font-variant-numeric: tabular-nums; }
body .sp-step__num .elementor-heading-title { color: var(--sp-primary); }
body .sp-footer__title .elementor-heading-title { font-family: var(--sp-font-expanded); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.sp-stat__label p, .sp-caption p, .sp-lead p, .sp-muted p { margin-bottom: 0; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.sp-section--hero .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(40px, 4.4vw, 58px); line-height: 1.06; }

/* Producto: padding y color de categoria por encima del CSS inline de XPRO */
.elementor-widget-xpro-woo-product-grid.sp-products .xpro-woo-product-grid-content-sec { padding: 20px 22px 24px !important; }
.elementor-widget-xpro-woo-product-grid.sp-products .xpro-woo-product-grid-category-wrapper a, .elementor-widget-xpro-woo-product-grid.sp-products .xpro_elementor_category_term_name { color: var(--sp-primary) !important; }
.elementor-widget-xpro-woo-product-grid.sp-products .xpro-woo-product-grid-title { color: var(--sp-ink-900) !important; }

/* Evita scroll horizontal por el menu off-canvas de XPRO (clip no rompe el sticky) */
html, body { overflow-x: clip; }
@media (max-width: 767px) { .sp-section--hero .elementor-widget-heading h1.elementor-heading-title { font-size: 38px; } .sp-header__main .sp-btn { display: none; } }

/* Header movil: logo a la izquierda, acciones y menu a la derecha */
@media (max-width: 1024px) {
  .sp-header__main .sp-nav { order: 3; flex: 0 0 auto !important; width: auto !important; }
  .sp-header__main .sp-logo { margin-right: auto; }
  .sp-nav .xpro-elementor-horizontal-menu-toggler { background: transparent !important; color: var(--sp-ink-900) !important; border: 1px solid var(--sp-hairline); border-radius: var(--sp-radius-pill); width: 44px; height: 44px; padding: 0; }
  .sp-nav .xpro-elementor-horizontal-menu-toggler i, .sp-nav .xpro-elementor-horizontal-menu-toggler svg { color: var(--sp-ink-900) !important; fill: var(--sp-ink-900) !important; font-size: 18px; }
}
@media (max-width: 767px) { .sp-utility { display: none; } }

.sp-header__main .e-con-inner > .e-con, .sp-header__main > .e-con > .e-con-inner > .e-con { width: auto !important; flex: 0 0 auto !important; }
.sp-header__main .sp-search, .sp-header__main .sp-search .elementor-widget-container { width: auto !important; }
@media (max-width: 1024px) { .sp-header__main .sp-logo { flex: 1 1 auto; } .sp-header__main .sp-logo img { max-width: 120px; } }

/* ==========================================================================
   17. Carrito lateral
   ========================================================================== */
.sp-header-icon a { position: relative; }
.sp-cart-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--sp-primary); color: #fff; font-family: var(--sp-font-expanded); font-size: 10px; line-height: 18px; text-align: center; }
.sp-cart-count.is-empty { display: none; }
.sp-cart-overlay { position: fixed; inset: 0; z-index: 99998; background: rgba(13,11,12,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transition: opacity 220ms cubic-bezier(.16,1,.3,1); }
.sp-cart-open .sp-cart-overlay { opacity: 1; }
.sp-cart-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 99999; width: min(420px, 100vw); background: #fff; display: flex; flex-direction: column; box-shadow: 0 24px 56px rgba(22,19,21,.14); transform: translateX(100%); transition: transform 260ms cubic-bezier(.16,1,.3,1); outline: 0; }
.sp-cart-open .sp-cart-drawer { transform: translateX(0); }
.sp-cart-open, .sp-cart-open body { overflow: hidden; }
.sp-cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--sp-hairline); }
.sp-cart-drawer__title { margin: 0; font-family: var(--sp-font-heading); font-size: 26px; letter-spacing: -.02em; color: var(--sp-ink-900); }
.sp-cart-drawer__close { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--sp-hairline); border-radius: 999px; background: #fff; color: var(--sp-ink-900); cursor: pointer; padding: 0; }
.sp-cart-drawer__close:hover { background: var(--sp-surface); color: var(--sp-primary); }
.sp-cart-drawer__body { flex: 1; overflow-y: auto; padding: 8px 24px 24px; }
.sp-cart-drawer__note { margin: 0; padding: 14px 24px; font-size: 13px; color: var(--sp-ink-muted); background: var(--sp-surface); border-top: 1px solid var(--sp-hairline); }
.sp-cart-drawer .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; }
.sp-cart-drawer .woocommerce-mini-cart-item { position: relative; display: block; padding: 16px 28px 16px 0; border-bottom: 1px solid var(--sp-hairline); font-family: var(--sp-font-main); font-size: 15px; color: var(--sp-ink-900); }
.sp-cart-drawer .woocommerce-mini-cart-item > a:not(.remove) { display: flex; align-items: center; gap: 14px; color: var(--sp-ink-900); font-weight: 500; }
.sp-cart-drawer .woocommerce-mini-cart-item img { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; background: var(--sp-surface); margin: 0; float: none; }
.sp-cart-drawer .woocommerce-mini-cart-item .quantity { display: block; margin: 6px 0 0 78px; font-family: var(--sp-font-expanded); font-size: 13px; color: var(--sp-ink-muted); }
.sp-cart-drawer .woocommerce-mini-cart-item a.remove { position: absolute; right: 0; top: 18px; width: 22px; height: 22px; line-height: 20px; text-align: center; border-radius: 999px; color: var(--sp-ink-muted) !important; font-size: 16px; }
.sp-cart-drawer .woocommerce-mini-cart-item a.remove:hover { background: var(--sp-surface); color: var(--sp-primary) !important; }
.sp-cart-drawer .woocommerce-mini-cart__total { display: flex; justify-content: space-between; margin: 20px 0 16px; font-size: 15px; color: var(--sp-ink-900); }
.sp-cart-drawer .woocommerce-mini-cart__total .amount { font-family: var(--sp-font-expanded); font-weight: 500; }
.sp-cart-drawer .woocommerce-mini-cart__buttons { display: grid; gap: 10px; margin: 0; }
.sp-cart-drawer .woocommerce-mini-cart__buttons a.button { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0; border-radius: 999px; font-family: var(--sp-font-expanded); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; background: #fff; color: var(--sp-ink-900); border: 1px solid var(--sp-border-strong); }
.sp-cart-drawer .woocommerce-mini-cart__buttons a.button:hover { background: var(--sp-surface); color: var(--sp-primary); border-color: var(--sp-accent); }
.sp-cart-drawer .woocommerce-mini-cart__buttons a.checkout { background: var(--sp-primary); color: #fff; border-color: var(--sp-primary); }
.sp-cart-drawer .woocommerce-mini-cart__buttons a.checkout:hover { background: var(--sp-primary-hover); color: #fff; box-shadow: var(--sp-shadow-brand); }
.sp-cart-drawer .woocommerce-mini-cart__empty-message { margin: 40px 0; text-align: center; color: var(--sp-ink-muted); }
@media (prefers-reduced-motion: reduce) { .sp-cart-drawer, .sp-cart-overlay { transition: none; } }

/* Opciones marcables de Fluent Forms */
.sp-form .ff-el-form-check { margin: 0 0 10px; }
.sp-form .ff-el-form-check-label { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--sp-border-strong); border-radius: var(--sp-radius-sm); cursor: pointer; font-size: 15px; color: var(--sp-ink-800); transition: border-color 140ms, background-color 140ms; }
.sp-form .ff-el-form-check-label:hover { border-color: var(--sp-accent); background: var(--sp-surface); }
.sp-form .ff-el-form-check.ff_item_selected .ff-el-form-check-label { border-color: var(--sp-primary); background: var(--sp-surface); }
.sp-form input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--sp-primary); margin: 0; }
.sp-form .ff-el-help-message { font-size: 13px; color: var(--sp-ink-muted); }

body .sp-cart-drawer .sp-cart-drawer__close { background: #fff !important; color: var(--sp-ink-900) !important; border: 1px solid var(--sp-hairline) !important; box-shadow: none !important; }
body .sp-cart-drawer .sp-cart-drawer__close:hover { background: var(--sp-surface) !important; color: var(--sp-primary) !important; }
.sp-cart-drawer .woocommerce-mini-cart-item .quantity { margin-left: 78px; text-align: left; }

/* Filas icono + texto (Contacto, Trabaja con nosotros): el icono no se encoge */
.e-con:has(> .elementor-widget.sp-icon-chip + .e-con) { flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 16px !important; }
.e-con:has(> .elementor-widget.sp-icon-chip + .e-con) > .elementor-widget.sp-icon-chip { flex: 0 0 44px !important; width: 44px !important; max-width: 44px !important; margin: 0 !important; }
.e-con:has(> .elementor-widget.sp-icon-chip + .e-con) > .e-con { flex: 1 1 0 !important; min-width: 0; width: auto !important; padding-top: 2px; }
.e-con:has(> .elementor-widget.sp-icon-chip + .e-con) .sp-eyebrow .elementor-heading-title { line-height: 1.2; }
.e-con:has(> .elementor-widget.sp-icon-chip + .e-con) .elementor-widget-text-editor p { margin: 0; }

/* Tarjeta de producto: sin espacio en blanco bajo la imagen (XPRO fija min-height:360px) */
.sp-products .xpro-woo-product-grid-img, .sp-products img.xpro-woo-product-grid-img { min-height: 0 !important; height: auto !important; }
.sp-products div.xpro-woo-product-grid-img { aspect-ratio: 1 / 1; background: linear-gradient(180deg, var(--sp-blush), var(--sp-surface)); overflow: hidden; }
.sp-products .xpro-woo-product-img-section { height: 100%; aspect-ratio: auto; }
.sp-products img.xpro-woo-product-grid-img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block; }

/* ==========================================================================
   18. Catalogo con filtros (tienda y categorias de WooCommerce)
   ========================================================================== */
.woocommerce.archive .site-content, .post-type-archive-product .site-content, .tax-product_cat .site-content { background: #fff; padding-top: 56px; padding-bottom: 96px; }
.woocommerce-products-header { margin-bottom: 24px; }
.woocommerce-products-header__title.page-title { font-family: var(--sp-font-heading); font-weight: 400; font-size: clamp(36px, 4vw, 52px); letter-spacing: -.02em; line-height: 1.08; color: var(--sp-ink-900); }
.woocommerce-products-header .term-description p, .woocommerce-products-header .page-description p { color: var(--sp-ink-muted); max-width: 60ch; }
.woocommerce-result-count { font-size: 14px; color: var(--sp-ink-muted); }
.woocommerce-ordering select { border: 1px solid var(--sp-border-strong); border-radius: 999px; padding: 8px 36px 8px 16px; font-family: var(--sp-font-main); font-size: 14px; background-color: #fff; }
/* Barra lateral de filtros */
.ast-left-sidebar #secondary, .ast-left-sidebar .secondary { padding-right: 32px; border-right: 1px solid var(--sp-hairline); }
#secondary .widget { background: #fff; border: 1px solid var(--sp-hairline); border-radius: var(--sp-radius-lg); padding: 22px 22px 18px; margin-bottom: 20px; box-shadow: var(--sp-shadow-xs); }
#secondary .widget-title, #secondary .widget .wp-block-heading { font-family: var(--sp-font-expanded) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: .16em; text-transform: uppercase; color: var(--sp-ink-muted); margin: 0 0 14px; }
#secondary .widget_product_categories ul { list-style: none; margin: 0; padding: 0; }
#secondary .widget_product_categories li { display: flex; justify-content: space-between; align-items: center; margin: 0; border-bottom: 1px solid var(--sp-hairline); }
#secondary .widget_product_categories li:last-child { border-bottom: 0; }
#secondary .widget_product_categories li a { flex: 1; padding: 10px 0; color: var(--sp-ink-800); font-size: 15px; }
#secondary .widget_product_categories li a:hover, #secondary .widget_product_categories li.current-cat > a { color: var(--sp-primary); }
#secondary .widget_product_categories li.current-cat > a { font-weight: 600; }
#secondary .widget_product_categories .count { font-family: var(--sp-font-expanded); font-size: 11px; color: var(--sp-ink-muted); background: var(--sp-surface); border-radius: 999px; padding: 2px 9px; }
#secondary .widget_price_filter .price_slider_wrapper { padding-top: 6px; }
#secondary .widget_price_filter .ui-slider { background: var(--sp-hairline); height: 4px; border-radius: 999px; margin: 8px 8px 22px; }
#secondary .widget_price_filter .ui-slider .ui-slider-range { background: var(--sp-primary); }
#secondary .widget_price_filter .ui-slider .ui-slider-handle { width: 18px; height: 18px; top: -7px; border-radius: 999px; background: #fff; border: 2px solid var(--sp-primary); box-shadow: var(--sp-shadow-xs); cursor: grab; }
#secondary .widget_price_filter .price_slider_amount { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
#secondary .widget_price_filter .price_label { font-family: var(--sp-font-expanded); font-size: 13px; color: var(--sp-ink-900); order: -1; width: 100%; }
#secondary .widget_price_filter .button { background: var(--sp-primary); color: #fff; border-radius: 999px; font-family: var(--sp-font-expanded); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; padding: 10px 18px; }
#secondary .widget_price_filter .button:hover { background: var(--sp-primary-hover); }
#secondary .widget_layered_nav_filters ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
#secondary .widget_layered_nav_filters li a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--sp-surface); border: 1px solid var(--sp-accent); color: var(--sp-primary); font-size: 13px; }
/* Tarjetas del listado nativo */
.woocommerce ul.products li.product { background: #fff; border: 1px solid var(--sp-hairline); border-radius: var(--sp-radius-lg); box-shadow: var(--sp-shadow-xs); overflow: hidden; padding: 0 0 22px !important; text-align: left; transition: box-shadow 220ms cubic-bezier(.16,1,.3,1), transform 220ms cubic-bezier(.16,1,.3,1), border-color 220ms; }
.woocommerce ul.products li.product:hover { transform: translateY(-2px); box-shadow: var(--sp-shadow-lg); border-color: var(--sp-accent); }
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap { background: linear-gradient(180deg, var(--sp-blush), var(--sp-surface)); aspect-ratio: 1 / 1; margin: 0 0 18px; overflow: hidden; }
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img { width: 100%; height: 100%; object-fit: contain; margin: 0 !important; mix-blend-mode: normal; }
.woocommerce ul.products li.product .astra-shop-summary-wrap { padding: 0 20px; }
.woocommerce ul.products li.product .ast-woo-product-category { font-family: var(--sp-font-expanded); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--sp-primary); }
.woocommerce ul.products li.product .button { margin-top: 12px; }
@media (max-width: 921px) { .ast-left-sidebar #secondary { padding-right: 0; border-right: 0; margin-top: 32px; } }

/* ==========================================================================
   19. Tarjetas de producto simetricas: misma altura y botones alineados
   ========================================================================== */
/* Listado nativo (tienda y categorias) */
.woocommerce ul.products li.product { display: flex; flex-direction: column; height: auto; }
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap { flex: 0 0 auto; }
.woocommerce ul.products li.product .astra-shop-summary-wrap { display: flex; flex-direction: column; flex: 1 1 auto; }
.woocommerce ul.products li.product .ast-woo-product-category { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; margin-bottom: 6px; }
.woocommerce ul.products li.product .ast-loop-product__link { display: block; }
.woocommerce ul.products li.product .woocommerce-loop-product__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.2 !important; min-height: 2.4em; margin-bottom: 10px !important; }
.woocommerce ul.products li.product .price { display: block; min-height: 1.6em; margin-bottom: 16px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button { margin-top: auto !important; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; padding: 12px 16px !important; white-space: nowrap; text-align: center; line-height: 1.2; }

/* Grid XPRO (Inicio y Productos) */
.sp-products .xpro-woo-prodcuts-layouts .cbp-item-wrapper { position: relative; }
.sp-products .xpro-woo-product-grid-content-sec { padding-bottom: 88px !important; }
.sp-products .xpro-woo-product-grid-category-wrapper { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }
.sp-products .xpro-woo-product-grid-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.32em; }
.sp-products .xpro-woo-product-grid-price-wrapper { min-height: 1.6em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-products .xpro-woo-product-img-section, .sp-products div.xpro-woo-product-grid-img { position: static !important; }
.sp-products .xpro-woo-product-grid-btn-section { position: absolute !important; left: 22px !important; right: 22px !important; bottom: 24px !important; top: auto !important; transform: none !important; opacity: 1 !important; visibility: visible !important; margin: 0 !important; padding: 0 !important; background: none !important; z-index: 3; }
.sp-products .xpro-woo-product-grid-add-to-cart-btn { width: 100%; margin: 0 !important; }
.sp-products .xpro-woo-product-grid-btn-section .button { background: var(--sp-primary) !important; color: #fff !important; border: 0 !important; border-radius: var(--sp-radius-pill) !important; display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 46px; padding: 12px 16px !important; white-space: nowrap; text-align: center; line-height: 1.2; }
.sp-products .xpro-woo-product-grid-btn-section .added_to_cart { display: none !important; }

.sp-products .xpro-woo-product-grid-btn-section .button:hover { background: var(--sp-primary-hover) !important; color: #fff !important; }
.elementor-widget-xpro-woo-product-grid.sp-products .xpro-woo-product-grid-content-sec { padding-bottom: 90px !important; }
.elementor-widget-xpro-woo-product-grid.sp-products .xpro-woo-product-grid-btn-section { width: auto !important; }

/* 19b. Tarjetas: tipografia mas ligera y textos de boton que siempre calzan */
.sp-products .cbp-item-wrapper, .woocommerce ul.products li.product { container-type: inline-size; }
.elementor-widget-xpro-woo-product-grid.sp-products .xpro-woo-product-grid-category-wrapper,
.elementor-widget-xpro-woo-product-grid.sp-products .xpro-woo-product-grid-category-wrapper a,
.elementor-widget-xpro-woo-product-grid.sp-products .xpro_elementor_category_term_name,
.woocommerce ul.products li.product .ast-woo-product-category { font-weight: 400 !important; font-size: 11px !important; letter-spacing: .12em !important; }
.elementor-widget-xpro-woo-product-grid.sp-products .xpro-woo-product-grid-price-wrapper,
.elementor-widget-xpro-woo-product-grid.sp-products .xpro-woo-product-grid-price-wrapper .price,
.elementor-widget-xpro-woo-product-grid.sp-products .xpro-woo-product-grid-price-wrapper bdi,
.woocommerce ul.products li.product .price, .woocommerce ul.products li.product .price bdi { font-weight: 400 !important; }
.elementor-widget-xpro-woo-product-grid.sp-products .xpro-woo-product-grid-btn-section .button,
.woocommerce ul.products li.product .astra-shop-summary-wrap > .button { font-weight: 400 !important; font-size: clamp(10px, 6.2cqi, 12px) !important; letter-spacing: .08em !important; padding: 10px 12px !important; overflow: hidden; text-overflow: ellipsis; }
.elementor-widget-xpro-woo-product-grid.sp-products .xpro-woo-product-grid-btn-section { left: 18px !important; right: 18px !important; }
/* 20. Paginacion del catalogo con el lenguaje Stella */
.woocommerce nav.woocommerce-pagination, .woocommerce .woocommerce-pagination { margin-top: 48px; text-align: center; }
.woocommerce nav.woocommerce-pagination ul.page-numbers, .woocommerce .ast-woocommerce-container .woocommerce-pagination ul.page-numbers { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 10px; border: 0 !important; margin: 0; padding: 0; }
.woocommerce nav.woocommerce-pagination ul.page-numbers li, .woocommerce .ast-woocommerce-container .woocommerce-pagination ul.page-numbers li { border: 0 !important; margin: 0 !important; float: none; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers, .woocommerce .ast-woocommerce-container .woocommerce-pagination ul.page-numbers li .page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px !important; margin: 0 !important;
  border-radius: 999px !important; border: 1px solid var(--sp-hairline) !important; background: #fff !important; color: var(--sp-ink-900) !important;
  font-family: var(--sp-font-expanded); font-size: 13px; font-weight: 400; line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  box-shadow: var(--sp-shadow-xs); transition: background 180ms, border-color 180ms, color 180ms, box-shadow 180ms;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover, .woocommerce .ast-woocommerce-container .woocommerce-pagination ul.page-numbers li a.page-numbers:hover { border-color: var(--sp-accent) !important; color: var(--sp-primary) !important; background: var(--sp-surface) !important; }
.woocommerce nav.woocommerce-pagination ul.page-numbers li span.current, .woocommerce .ast-woocommerce-container .woocommerce-pagination ul.page-numbers li span.current { background: var(--sp-primary) !important; border-color: var(--sp-primary) !important; color: #fff !important; box-shadow: var(--sp-shadow-brand); }
.woocommerce nav.woocommerce-pagination ul.page-numbers li .dots { border-color: transparent !important; box-shadow: none; background: transparent !important; }
.woocommerce nav.woocommerce-pagination ul.page-numbers li .prev, .woocommerce nav.woocommerce-pagination ul.page-numbers li .next { font-size: 16px; color: var(--sp-primary) !important; }
/* 21. Textos de WooCommerce en negro puro (Astra los pintaba azul pizarra) */
.woocommerce div.product .product_title, .woocommerce div.product .summary .variations label, .woocommerce div.product .summary .variations th,
.woocommerce div.product .summary .price, .woocommerce div.product .summary .price bdi, .woocommerce div.product .summary .price .woocommerce-Price-currencySymbol,
.woocommerce div.product .woocommerce-variation-price .price, .woocommerce div.product .woocommerce-variation-price bdi,
.woocommerce div.product .summary .variations select, .woocommerce div.product .summary .variations select option, .woocommerce div.product .summary .quantity .qty,
.woocommerce div.product .summary .woocommerce-product-details__short-description, .woocommerce div.product .summary .woocommerce-product-details__short-description p,
.woocommerce div.product .summary .product_meta, .woocommerce div.product .summary .product_meta > span, .woocommerce div.product .summary .product_meta .sku,
.woocommerce div.product .summary .reset_variations,
.woocommerce div.product .woocommerce-tabs ul.tabs li a, .woocommerce div.product .woocommerce-tabs .panel, .woocommerce div.product .woocommerce-tabs .panel h2, .woocommerce div.product .woocommerce-tabs .panel p,
.woocommerce .related.products > h2, .woocommerce .upsells.products > h2,
.woocommerce-cart .cart_totals h2, .woocommerce-checkout h3, .woocommerce-checkout #order_review_heading, .woocommerce-account .woocommerce-MyAccount-content h2 { color: #000 !important; }
.woocommerce div.product .summary .product_meta a, .woocommerce div.product .summary .posted_in a, .woocommerce div.product .summary .tagged_as a { color: var(--sp-primary) !important; }
/* 22. Tarjeta XPRO clicable y pestañas de producto sin azul */
.sp-products .xpro-woo-product-grid-item { cursor: pointer; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce-js div.product .woocommerce-tabs ul.tabs li.active::before { background: var(--sp-primary) !important; background-color: var(--sp-primary) !important; border-color: var(--sp-primary) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li:not(.active)::before { background: transparent !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active, .woocommerce div.product .woocommerce-tabs ul.tabs li.active a { border-top-color: var(--sp-primary) !important; color: #000 !important; }
/* 23. Descripción corta en las tarjetas de producto (2 líneas, alto fijo para mantener la simetría) */
.sp-products .xpro-woo-product-grid-excerpt, .woocommerce ul.products li.product .ast-woo-shop-product-description, .woocommerce ul.products li.product .ast-woo-shop-product-description p {
  font-family: var(--sp-font-main); font-size: 13.5px !important; line-height: 1.45 !important; font-weight: 400; color: var(--sp-ink-muted) !important;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.9em; margin: 8px 0 0 !important;
}
.woocommerce ul.products li.product .ast-woo-shop-product-description { margin-bottom: 16px !important; }
.woocommerce ul.products li.product .ast-woo-shop-product-description p { margin: 0 !important; }
.woocommerce ul.products li.product .price { margin-bottom: 0 !important; }
.sp-products .xpro-woo-product-grid-excerpt strong, .sp-products .xpro-woo-product-grid-excerpt b, .woocommerce ul.products li.product .ast-woo-shop-product-description strong, .woocommerce ul.products li.product .ast-woo-shop-product-description b { font-weight: 400 !important; color: inherit !important; }

/* ==========================================================================
   24. Encabezado de sección con botón a la derecha (Ver toda la línea / Filtrar por precio)
   El bloque de texto crecía sin encogerse y dejaba el botón con ancho 0 fuera del contenedor.
   ========================================================================== */
@media (min-width: 768px) {
	.e-con:has(> .elementor-widget.sp-link-arrow) > .e-con { flex: 1 1 0% !important; min-width: 0; }
}
.e-con:has(> .elementor-widget.sp-link-arrow) > .elementor-widget.sp-link-arrow { flex: 0 0 auto !important; width: auto !important; max-width: 100%; }
.elementor-widget.sp-link-arrow .elementor-button { white-space: nowrap; }
@media (max-width: 767px) {
	.e-con:has(> .elementor-widget.sp-link-arrow) > .elementor-widget.sp-link-arrow { align-self: flex-start; }
}

/* =========================================
   26. Tarjetas: el producto no se funde con el fondo (sp-26-no-blend)
   ========================================= */
.sp-products .xpro-woo-product-img-section,
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
  padding: 14px;
  box-sizing: border-box;
}
.sp-products .xpro-woo-product-img-section img,
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
  mix-blend-mode: normal;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
}
.single-product .woocommerce-product-gallery__image img { mix-blend-mode: normal; }

.single-product .woocommerce-product-gallery__image img { background: transparent; }

/* =========================================
   27. Aviso de venta restringida a RUC (sp-ruc-aviso)
   ========================================= */
.sp-ruc-aviso {
  border: 1px solid var(--sp-border-strong, #e7cfd8);
  border-left: 3px solid var(--sp-primary);
  background: var(--sp-magenta-100, #fdf1f3);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 20px 0;
}
.sp-ruc-aviso__t {
  font-family: var(--sp-font-expanded, inherit);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sp-primary);
  margin: 0 0 6px;
}
.sp-ruc-aviso__d {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--sp-ink-900);
}
.sp-ruc-aviso__a { margin: 14px 0 0; }
.sp-ruc-aviso__a .sp-btn--primary {
  display: inline-block;
  background: var(--sp-primary);
  color: #fff;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: var(--sp-radius-pill, 999px);
  font-size: 13px;
  letter-spacing: .04em;
}
.sp-ruc-aviso__a .sp-btn--primary:hover { background: var(--sp-primary-hover); color: #fff; }
.sp-ruc-aviso--linea, .sp-ruc-aviso--archivo { max-width: 880px; margin-inline: auto; }
.sp-ruc-fieldset { margin: 24px 0; }
.sp-ruc-fieldset legend { font-weight: 600; }

/* ==========================================================================
   29. Telefonos y tablets (sp-29-responsive)
   Una sola seccion con todo lo que cambia por debajo de 1024 px.
   ========================================================================== */

/* 29a. Nada se sale del ancho de la pantalla.
   overflow: clip (no hidden) para no romper el header fijo ni position: sticky. */
@media (max-width: 1024px) {
  /* Nada de overflow-x en html/body: se propaga al viewport y mata el scroll
     vertical de la pagina. El recorte se hace en el contenedor de Astra. */
  #page, .site-content, .ast-container { overflow-x: clip; }
  img, video, iframe, canvas, svg { max-width: 100%; height: auto; }
}

/* 29b. Titulos que caben: tamano fluido en moviles */
@media (max-width: 767px) {
  body .elementor-widget-heading h1.elementor-heading-title,
  .woocommerce div.product .product_title,
  .woocommerce-products-header .page-title,
  body h1.entry-title {
    font-size: clamp(28px, 8.2vw, 38px) !important;
    line-height: 1.14 !important;
    overflow-wrap: break-word;
  }
  body .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(24px, 6.9vw, 30px) !important; line-height: 1.2 !important; }
  body .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(18px, 4.8vw, 22px) !important; line-height: 1.3 !important; }
  .sp-eyebrow { overflow-wrap: anywhere; }
}

/* 29c. Menu movil legible: los enlaces salian en gris #b5b5b5 sobre gris claro */
@media (max-width: 1024px) {
  .xpro-elementor-horizontal-navbar-wrapper .xpro-elementor-nav-link,
  .xpro-elementor-horizontal-navbar-wrapper li > a,
  .xpro-elementor-horizontal-navbar-wrapper .xpro-dropdown-menu-toggle,
  .xpro-elementor-horizontal-navbar-wrapper .dropdown-menu-toggle { color: var(--sp-ink-900) !important; }
  .xpro-elementor-horizontal-navbar-wrapper .sub-menu li > a { color: var(--sp-ink-600) !important; }
  .xpro-elementor-horizontal-navbar-wrapper li > a:hover,
  .xpro-elementor-horizontal-navbar-wrapper li > a:focus,
  .xpro-elementor-horizontal-navbar-wrapper .current-menu-item > a,
  .xpro-elementor-horizontal-navbar-wrapper .current_page_item > a,
  .xpro-elementor-horizontal-navbar-wrapper .current-menu-ancestor > a { color: var(--sp-primary) !important; }
  .xpro-elementor-horizontal-navbar-wrapper li > a { min-height: 48px; }
}

/* 29d. Tarjetas de producto: el precio y la linea ya no se cortan con puntos suspensivos */
@media (max-width: 767px) {
  .woocommerce ul.products li.product .price,
  .elementor-widget-xpro-woo-product-grid.sp-products .xpro-woo-product-grid-price-wrapper {
    white-space: normal !important; text-overflow: clip !important; overflow: visible !important;
    min-height: 2.8em; line-height: 1.35;
  }
  .woocommerce ul.products li.product .ast-woo-product-category,
  .elementor-widget-xpro-woo-product-grid.sp-products .xpro-woo-product-grid-category-wrapper,
  .elementor-widget-xpro-woo-product-grid.sp-products .xpro_elementor_category_term_name {
    font-size: 10px !important; letter-spacing: .05em !important;
    white-space: normal !important; text-overflow: clip !important; overflow: hidden !important;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  }
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 17px !important; }
}

/* 29e. Ficha de producto: boton de compra a lo ancho y sin zoom de imagen en tactil */
@media (max-width: 767px) {
  .woocommerce div.product .woocommerce-product-gallery img.zoomImg { display: none !important; }
  .woocommerce div.product form.cart:not(.variations_form),
  .woocommerce div.product .woocommerce-variation-add-to-cart {
    display: flex !important; flex-wrap: wrap; gap: 10px; align-items: stretch;
  }
  .woocommerce div.product form.cart .quantity { flex: 0 0 92px; margin: 0 !important; }
  .woocommerce div.product form.cart .quantity .qty { width: 100% !important; height: 52px !important; font-size: 16px !important; }
  .woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 1 150px; width: auto !important; min-height: 52px; font-size: 13px !important;
    padding: 14px 18px !important; letter-spacing: .06em;
  }
  .woocommerce div.product .summary .variations select { min-height: 48px !important; font-size: 16px !important; }
  .woocommerce div.product .summary .variations td { display: block; width: 100%; }
  .woocommerce div.product .summary .reset_variations { display: inline-block; padding: 6px 0; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li { width: 100%; }
  .woocommerce div.product .woocommerce-tabs ul.tabs li a { display: block; padding: 12px 0 !important; }
}

/* 29f. Carrito y pago: botones a lo ancho y campos apilados */
@media (max-width: 767px) {
  .woocommerce #place_order, .woocommerce-page #place_order,
  .woocommerce .checkout-button, .woocommerce-page .checkout-button {
    width: 100% !important; min-height: 54px; font-size: 14px !important;
  }
  .woocommerce .place-order, .woocommerce-page .place-order,
  .woocommerce .wc-proceed-to-checkout, .woocommerce-page .wc-proceed-to-checkout {
    width: 100% !important; float: none !important; padding-left: 0 !important; padding-right: 0 !important;
  }
  .woocommerce .cart input.button, .woocommerce .cart button.button { width: 100%; min-height: 48px; }
  .woocommerce .cart .coupon { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
  .woocommerce .cart .coupon #coupon_code { flex: 1 1 100%; width: 100% !important; min-height: 48px; }
  .woocommerce form .form-row-first, .woocommerce form .form-row-last,
  .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last {
    width: 100% !important; float: none !important; margin-right: 0 !important;
  }
  .woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width: 100% !important; float: none !important; }
}

/* 29g. Formularios: 16 px minimo para que Safari de iOS no haga zoom al tocar un campo */
@media (max-width: 767px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="password"], input[type="search"], input[type="url"], input[type="date"],
  select, textarea,
  .fluentform .ff-el-form-control, .fluentform input, .fluentform select, .fluentform textarea,
  .woocommerce form .input-text, .woocommerce-page form .input-text { font-size: 16px !important; }
  .fluentform .ff-el-form-control { min-height: 48px; }
  .fluentform .ff-btn-submit { width: 100%; min-height: 50px; }
  .woocommerce-account form .input-text,
  .woocommerce-account form input[type="text"], .woocommerce-account form input[type="email"],
  .woocommerce-account form input[type="password"], .woocommerce-account form input[type="tel"] {
    width: 100% !important; max-width: 100% !important;
  }
}

/* 29h. Catalogo: los filtros suben encima de los productos y se pliegan
   (Astra los mandaba al final de la pagina con flex-direction: column-reverse) */
@media (max-width: 921px) {
  .ast-left-sidebar #secondary { margin: 0 0 26px !important; padding-right: 0; border-right: 0; }
}
.sp-filtros { border: 1px solid var(--sp-hairline); border-radius: var(--sp-radius-lg); background: #fff; box-shadow: var(--sp-shadow-xs); overflow: hidden; }
.sp-filtros > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 14px 20px; margin: 0;
  font-family: var(--sp-font-expanded); font-size: 12px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sp-ink-900);
}
.sp-filtros > summary::-webkit-details-marker { display: none; }
.sp-filtros > summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--sp-primary); }
.sp-filtros[open] > summary::after { content: "\2013"; }
.sp-filtros[open] > summary { border-bottom: 1px solid var(--sp-hairline); }
.sp-filtros .sp-filtros__body { padding: 18px 20px 4px; }
.sp-filtros .sp-filtros__body .widget:last-child { margin-bottom: 8px; }
.sp-sidebar-vacia { display: none !important; }
@media (min-width: 922px) {
  .sp-filtros { border: 0; background: transparent; box-shadow: none; overflow: visible; }
  .sp-filtros > summary { display: none; }
  .sp-filtros .sp-filtros__body { padding: 0; }
}

/* 29i. Tabla comparativa: en movil cada fila es una tarjeta, sin scroll horizontal */
@media (max-width: 767px) {
  .sp-table-wrap { overflow-x: visible !important; }
  table.xpro-table.xpro-table-responsive { min-width: 0 !important; width: 100% !important; border-collapse: separate; border-spacing: 0; }
  table.xpro-table.xpro-table-responsive thead { display: none !important; }
  table.xpro-table.xpro-table-responsive tbody { display: block; width: 100%; }
  table.xpro-table.xpro-table-responsive tr.xpro-table-body-row {
    display: block; width: 100%; background: #fff; margin: 0 0 14px;
    border: 1px solid var(--sp-hairline); border-radius: var(--sp-radius-lg);
    box-shadow: var(--sp-shadow-xs); overflow: hidden;
  }
  table.xpro-table.xpro-table-responsive td.xpro-table-body-row-cell {
    display: block !important; width: 100% !important; max-width: 100% !important;
    border: 0 !important; border-top: 1px solid var(--sp-ink-100) !important;
    padding: 12px 18px !important; background: transparent !important;
  }
  table.xpro-table.xpro-table-responsive tr.xpro-table-body-row > td:first-child {
    border-top: 0 !important; background: var(--sp-surface) !important; padding: 14px 18px !important;
  }
  table.xpro-table.xpro-table-responsive tr.xpro-table-body-row > td:first-child .xpro-table-head-column-cell { display: none !important; }
  table.xpro-table.xpro-table-responsive tr.xpro-table-body-row > td:first-child .xpro-table-body-row-cell-content {
    font-family: var(--sp-font-heading) !important; font-size: 19px !important; line-height: 1.25 !important; color: var(--sp-ink-900) !important;
  }
  table.xpro-table.xpro-table-responsive td .xpro-table-head-column-cell {
    display: block !important; width: 100% !important; min-width: 0 !important; flex: none !important;
    background: transparent !important; background-color: transparent !important;
    border: 0 !important; margin: 0 !important; padding: 0 0 4px !important; text-align: left !important;
  }
  table.xpro-table.xpro-table-responsive td .xpro-table-head-column-cell-inner { justify-content: flex-start !important; padding: 0 !important; }
  table.xpro-table.xpro-table-responsive td .xpro-table-head-column-cell-content {
    color: var(--sp-primary) !important; font-family: var(--sp-font-expanded) !important; font-weight: 400 !important;
    font-size: 10px !important; letter-spacing: .14em !important; text-transform: uppercase !important;
  }
  table.xpro-table.xpro-table-responsive td .xpro-table-body-row-cell-inner {
    display: block !important; width: 100% !important; min-width: 0 !important; flex: none !important;
    padding: 0 !important; text-align: left !important;
  }
  table.xpro-table.xpro-table-responsive td .xpro-table-body-row-cell-content {
    color: var(--sp-ink-900) !important; font-size: 15px !important; line-height: 1.5 !important; white-space: normal !important;
  }
}

/* 29j. Zonas tocables: enlaces del pie y botones de texto */
@media (max-width: 767px) {
  footer .elementor-icon-list-item > a, .sp-footer .elementor-icon-list-item > a { padding-block: 7px; }
  .elementor-widget-button .elementor-button-link.elementor-size-sm { padding-block: 9px; }
  .sp-ruc-aviso { padding: 16px 18px; }
}

/* 29k. Avisos de WooCommerce: el boton salia azul en vez de magenta */
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button,
.woocommerce-message a.button, .woocommerce-info a.button {
  background: var(--sp-primary) !important; color: #fff !important;
  border-radius: var(--sp-radius-pill) !important; border: 0 !important;
}
.woocommerce-message .button:hover, .woocommerce-info .button:hover { background: var(--sp-primary-hover) !important; color: #fff !important; }

/* ===================== 30. Tarjetas de linea alineadas ===================== */
/* Las tarjetas de una misma fila ya miden lo mismo de alto (align-items: stretch).
   Aqui se empuja el boton al fondo de la tarjeta, para que todos los botones
   queden a la misma altura aunque el texto de cada linea sea mas largo o mas corto. */
.sp-card .elementor-widget-button.sp-btn--wa { margin-top: auto; padding-top: 6px; }
.sp-card .elementor-widget-button.sp-btn--wa .elementor-button { width: 100%; justify-content: center; }
/* El icono de WhatsApp, un pelin mas grande que el texto del boton */
.sp-btn--wa .elementor-button-icon i, .sp-btn--wa .elementor-button-icon svg { font-size: 1.15em; }
/* El texto de la tarjeta no empuja al boton: ocupa el espacio sobrante */
.sp-card .elementor-widget-text-editor + .elementor-widget-button.sp-btn--wa { margin-top: auto; }

/* Rejilla de las nueve lineas: todas las tarjetas del mismo alto, no solo las de
   la misma fila. Con grid-auto-rows:1fr las tres filas miden lo mismo, asi que
   los nueve recuadros y los nueve botones quedan alineados entre si. */
@media (min-width: 768px) {
  .sp-lineas-grid { display: grid !important; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 24px; }
  .sp-lineas-grid > .sp-card { width: auto !important; max-width: none !important; flex: none !important; }
}
@media (min-width: 1025px) {
  .sp-lineas-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===================== 31. Refinamiento visual (03/10/2026) =====================
   Mismos colores de marca. Lo que cambia es la tipografia, el aire y el acabado
   de las piezas: titulares con mas presencia, textos mas legibles, tarjetas con
   mejor relieve, acordeon en plan editorial y pasos numerados.
   Va despues de arreglar las tipografias (Berenhart/Mosvita ya cargan). */

/* -- 31a. Escala tipografica con mas caracter -------------------------------- */
body .elementor-widget-heading h1.elementor-heading-title {
  font-size: clamp(34px, 4.9vw, 60px);
  line-height: 1.05;
  letter-spacing: -.015em;
}
body .elementor-widget-heading h2.elementor-heading-title {
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.12;
  letter-spacing: -.012em;
}
body .elementor-widget-heading h3.elementor-heading-title {
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.32;
  letter-spacing: -.004em;
}
/* El titular aprovecha el tamano optico de la fuente: mas contraste en grande */
h1, h2, .sp-section--hero .elementor-heading-title { font-optical-sizing: auto; }

/* -- 31b. Mas aire en la lectura --------------------------------------------- */
body { line-height: 1.7; }
.elementor-widget-text-editor p { line-height: 1.72; }
.sp-lead { max-width: 64ch; line-height: 1.62; font-weight: 300; }
.sp-small { font-size: 14.5px; line-height: 1.68; }
.sp-card .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* -- 31c. Antetitulo con filete ---------------------------------------------- */
body .sp-eyebrow .elementor-heading-title::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 1px;
  margin-right: 12px;
  vertical-align: middle;
  background: currentColor;
  opacity: .55;
}

/* -- 31d. Tarjetas: borde mas fino, esquina mas suave, relieve mejor ---------- */
.sp-card {
  border-radius: 16px;
  border-color: rgba(22, 19, 21, .08);
  box-shadow: 0 1px 2px rgba(22, 19, 21, .04), 0 10px 28px -20px rgba(22, 19, 21, .30);
}
/* Las tarjetas de linea llevan boton, asi que tambien responden al puntero */
.sp-lineas-grid > .sp-card--static:hover,
.sp-pasos > .sp-card--static:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(22, 19, 21, .04), 0 18px 36px -22px rgba(204, 23, 116, .45);
  border-color: var(--sp-magenta-200);
}

/* -- 31e. Chip de icono mas presente ----------------------------------------- */
.sp-icon-chip .elementor-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(145deg, var(--sp-magenta-100), var(--sp-magenta-200));
  box-shadow: inset 0 0 0 1px rgba(204, 23, 116, .10);
}
.sp-icon-chip .elementor-icon svg { width: 24px; height: 24px; }
.sp-icon-chip .elementor-icon i { font-size: 22px; }

/* -- 31f. Botones con mejor peso --------------------------------------------- */
.sp-btn .elementor-button {
  font-weight: 500;
  letter-spacing: .05em;
}
.sp-btn--primary .elementor-button { box-shadow: 0 8px 20px -10px rgba(204, 23, 116, .60); }
.sp-btn--secondary .elementor-button { border-width: 1px; }

/* -- 31g. Pasos del proceso con numeral grande de fondo ----------------------- */
.sp-pasos { counter-reset: sp-paso; }
.sp-pasos > .sp-card {
  counter-increment: sp-paso;
  position: relative;
  overflow: hidden;
}
.sp-pasos > .sp-card::before {
  content: counter(sp-paso, decimal-leading-zero);
  position: absolute;
  top: 2px;
  right: 14px;
  font-family: var(--sp-font-heading);
  font-size: 64px;
  line-height: 1;
  color: rgba(204, 23, 116, .13);
  pointer-events: none;
  user-select: none;
}
.sp-pasos > .sp-card > * { position: relative; }

/* -- 31h. Preguntas frecuentes en plan editorial ------------------------------ */
.sp-faq .elementor-accordion-item {
  background: transparent;
  border: 0 !important;
  border-bottom: 1px solid var(--sp-hairline) !important;
  border-radius: 0;
  margin-bottom: 0;
}
.sp-faq .elementor-accordion-item:first-child { border-top: 1px solid var(--sp-hairline) !important; }
.sp-faq .elementor-tab-title {
  padding: 20px 4px !important;
  font-size: 1.04rem;
  line-height: 1.45;
}
.sp-faq .elementor-tab-content {
  padding: 0 44px 22px 4px !important;
  border: 0 !important;
  background: transparent !important;
}
/* Rotulo de cada grupo de preguntas */
body .sp-faq-grupo .elementor-heading-title {
  font-family: var(--sp-font-expanded);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sp-primary);
}
.sp-faq-grupo { margin-top: 18px; }
.sp-faq-grupo:first-of-type { margin-top: 0; }

/* -- 31i. Hero a dos columnas (texto + fotografia) ---------------------------- */
.sp-hero-media .elementor-widget-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 20px;
  box-shadow: 0 30px 60px -30px rgba(22, 19, 21, .45);
}
@media (min-width: 1025px) {
  .sp-hero-media .elementor-widget-image img { aspect-ratio: 4 / 5; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .sp-hero-media .elementor-widget-image img { aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  .sp-hero-media .elementor-widget-image img { aspect-ratio: 4 / 5; }
}

/* -- 31j. Banda oscura de cierre de seccion ----------------------------------- */
.sp-banda .elementor-heading-title { color: #fff; }
.sp-banda .sp-lead, .sp-banda .sp-lead p { color: rgba(255, 255, 255, .78); }

/* -- 31k. Ajustes en pantallas pequenas --------------------------------------- */
@media (max-width: 767px) {
  .sp-pasos > .sp-card::before { font-size: 52px; right: 12px; }
  .sp-faq .elementor-tab-content { padding-right: 8px !important; }
  .sp-lead { max-width: none; }
}

/* La fila de pasos tambien en rejilla: cuatro columnas iguales, sin que el
   cuarto paso se quede solo estirado a todo el ancho. */
@media (min-width: 768px) {
  .sp-pasos { display: grid !important; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 24px; }
  .sp-pasos > .sp-card { width: auto !important; max-width: none !important; flex: none !important; }
}
@media (min-width: 1025px) {
  .sp-pasos { grid-template-columns: repeat(4, 1fr); }
}

/* Algunos contenedores de Elementor llevan un ancho fijo en pixeles mayor que su
   contenedor (en el hero de Nosotros habia uno de 820 px dentro de uno de 740):
   el texto se salia por la derecha en pantallas medianas. Ningun contenedor ni
   widget debe superar a su padre. */
.e-con-inner > .e-con,
.e-con-inner > .elementor-widget,
.e-con > .e-con,
.e-con > .elementor-widget { max-width: 100%; }

/* ============ 32. Foto de producto y pagina de preguntas (05/10/2026) ============ */
/* La tarjeta de linea muestra la foto real del producto en vez de un icono. */
.sp-card--linea .elementor-widget-image { margin-bottom: 2px; }
.sp-card--linea .elementor-widget-image img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: contain;
  background: linear-gradient(160deg, var(--sp-magenta-100), var(--sp-magenta-200));
  border-radius: 14px;
  padding: 10px;
}
/* Indice por temas de /preguntas-frecuentes/ */
.sp-faq-indice .elementor-icon-list-items { gap: 8px 10px; }
.sp-faq-indice .elementor-icon-list-item > a {
  background: #fff; border: 1px solid var(--sp-hairline); border-radius: var(--sp-radius-pill);
  padding: 7px 15px; font-size: 13px; color: var(--sp-ink-800);
}
.sp-faq-indice .elementor-icon-list-item > a:hover { border-color: var(--sp-magenta-300); color: var(--sp-primary); }
.sp-faq-indice .elementor-icon-list-icon { color: var(--sp-magenta-300); }
/* Titulo de cada bloque de preguntas en su pagina */
body .sp-faq-seccion .elementor-heading-title { font-size: clamp(19px, 2vw, 25px); line-height: 1.2; }
.sp-faq-seccion { padding-top: 10px; border-top: 2px solid var(--sp-magenta-200); }

/* ==========================================================================
   33. Nosotros: cierre "Nuestro compromiso" con la foto recortada.
   La figura tiene un desvanecido en la base, asi que debe quedar pegada al
   borde inferior de la banda oscura: de ahi el margen negativo igual al
   padding de la seccion.
   ========================================================================== */
.sp-compromiso { align-items: flex-end; }
.sp-compromiso-foto { margin-bottom: -96px; align-self: flex-end; }
.sp-compromiso-foto .elementor-widget-image,
.sp-compromiso-foto figure,
.sp-compromiso-foto img { display: block; width: 100%; height: auto; margin: 0; }
@media (max-width: 1024px) {
  .sp-compromiso { align-items: flex-end; }
  .sp-compromiso-foto { margin-bottom: -96px; }
}
@media (max-width: 767px) {
  .sp-compromiso { align-items: stretch; }
  /* Elementor fija el ancho del contenedor, asi que aqui solo se ajusta el
     margen negativo al padding movil de la seccion. */
  .sp-compromiso-foto { margin-bottom: -64px; }
}

/* ==========================================================================
   34. Contacto: columna de datos (telefonos, correo, horario, cobertura).
   Cada dato tiene un valor principal y una nota secundaria. Los numeros y el
   correo no se parten nunca a mitad de linea.
   ========================================================================== */
.sp-dato p { margin: 0; }
.sp-dato .sp-dato-valor {
  font-size: 17px; line-height: 1.35; font-weight: 500;
  color: var(--sp-ink-900); letter-spacing: -0.005em;
}
.sp-dato .sp-dato-nota {
  margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--sp-ink-muted);
}
.sp-dato a { color: var(--sp-primary); text-decoration: none; border-bottom: 1px solid transparent; }
.sp-dato a:hover { border-bottom-color: var(--sp-magenta-300); }
.sp-dato .sp-dato-nota a { color: var(--sp-ink-800); }
.sp-dato .sp-dato-nota a:hover { color: var(--sp-primary); }
.sp-dato a[href^='tel:'] { white-space: nowrap; }
.sp-dato a[href^='mailto:'] { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .sp-dato .sp-dato-valor { font-size: 16px; }
}

/* ==========================================================================
   35. Libro de Reclamaciones
   ========================================================================== */
.sp-ff-grupo{font-family:var(--sp-font-heading);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#6B6268;margin:30px 0 2px;padding-top:22px;border-top:1px solid #EAE6E7;}
.sp-form--libro .ff-el-group:first-child .sp-ff-grupo{margin-top:0;padding-top:0;border-top:0;}
.sp-form--libro .ff-el-form-check{margin:2px 0;}
.sp-form--libro .ff-el-tc,.sp-form--libro .ff_tc_checkbox_wrapper{font-size:13.5px;line-height:1.55;}
.sp-libro-pie p{margin:0;}
.sp-libro-pie a.sp-libro-enlace{display:inline-block;border:1px solid rgba(255,255,255,.38);border-radius:8px;padding:8px 14px;font-size:13px;line-height:1;letter-spacing:.02em;text-decoration:none;white-space:nowrap;}
.sp-libro-pie a.sp-libro-enlace:hover{border-color:#fff;}
@media (max-width:767px){.sp-ff-grupo{margin-top:24px;padding-top:18px;}}

/* ==========================================================================
   36. Politica de privacidad
   ========================================================================== */
.sp-priv-indice{border:1px solid #EAE6E7;border-radius:12px;padding:22px 26px;}
.sp-priv-indice ul{list-style:none;margin:0;padding:0;columns:2;column-gap:36px;}
.sp-priv-indice li{margin:0 0 9px;break-inside:avoid;}
.sp-priv-indice a{text-decoration:none;}
.sp-priv-indice a:hover{text-decoration:underline;}
.sp-priv-cuerpo h2{scroll-margin-top:120px;}
.sp-priv-texto h3{font-size:17px;margin:24px 0 6px;}
.sp-priv-texto .elementor-widget-container > h3:first-child{margin-top:4px;}
.sp-priv-texto p{margin:0 0 12px;}
.sp-priv-texto ul{margin:0 0 12px;padding-left:20px;}
.sp-priv-texto li{margin:0 0 7px;}
@media (max-width:767px){.sp-priv-indice ul{columns:1;}.sp-priv-indice{padding:18px 20px;}}