/*
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
   ========================================================================== */
@font-face { font-family: "Berenhart"; src: url("assets/fonts/Berenhart-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mosvita"; src: url("assets/fonts/Mosvita-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Mosvita"; src: url("assets/fonts/Mosvita-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mosvita"; src: url("assets/fonts/Mosvita-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Mosvita"; src: url("assets/fonts/Mosvita-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Mosvita"; src: url("assets/fonts/Mosvita-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Mosvita Expanded"; src: url("assets/fonts/Mosvita-Expanded.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Mosvita Expanded"; src: url("assets/fonts/Mosvita-MediumExpanded.woff2") format("woff2"); font-weight: 500; 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: multiply; }
.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; }