/* ===== fa-single-product-premium-final-v8.css ===== */
/* =========================================================
   PRODUCTO INDIVIDUAL PREMIUM - FAUSTO ALFARO
   CSS COMPLETO LIMPIO V6
   Shortcode: [fa_single_product_layout]

   Instrucciones:
   - Sustituye TODO el CSS anterior del producto individual por este.
   - No añadas fixes sueltos de producto encima.
   - Este CSS ya incluye el botón de carrito sin flecha rara.
   ========================================================= */


/* =========================================================
   1. LIMPIEZA WOOCOMMERCE / DIVI SOLO EN PRODUCTO
   ========================================================= */

body.single-product,
body.single-product #page-container,
body.single-product #et-main-area,
body.single-product #main-content,
body.single-product .et-l,
body.single-product .et-l--body,
body.single-product .et_builder_inner_content,
body.single-product .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

body.single-product #main-content > .container {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ocultar estructura WooCommerce original, pero NO lo que usamos dentro del shortcode */
body.single-product .product > .woocommerce-product-gallery,
body.single-product .product > div.images,
body.single-product .product > .summary,
body.single-product .product > div.summary,
body.single-product .woocommerce-tabs,
body.single-product .related.products,
body.single-product .upsells.products,
body.single-product .product_meta,
body.single-product .woocommerce-breadcrumb {
  display: none !important;
}

/* Si Divi mete módulos WooCommerce antiguos dentro de la plantilla */
body.single-product .et_pb_wc_images,
body.single-product .et_pb_wc_title,
body.single-product .et_pb_wc_rating,
body.single-product .et_pb_wc_price,
body.single-product .et_pb_wc_description,
body.single-product .et_pb_wc_add_to_cart,
body.single-product .et_pb_wc_meta,
body.single-product .et_pb_wc_tabs,
body.single-product .et_pb_wc_related_products,
body.single-product .et_pb_wc_breadcrumb {
  display: none !important;
}

/* Si el módulo que contiene el shortcode está dentro de Divi */
body.single-product .et_pb_section:has(.fa-sp-page),
body.single-product .et_pb_row:has(.fa-sp-page),
body.single-product .et_pb_column:has(.fa-sp-page),
body.single-product .et_pb_module:has(.fa-sp-page),
body.single-product .et_pb_text:has(.fa-sp-page),
body.single-product .et_pb_text_inner:has(.fa-sp-page) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}


/* =========================================================
   2. BASE
   ========================================================= */

.fa-sp-page,
.fa-sp-page * {
  box-sizing: border-box;
}

.fa-sp-page {
  --fa-yellow: #e3aa00;
  --fa-yellow-light: #ffca08;
  --fa-black: #050505;
  --fa-dark: #0b0b0b;
  --fa-white: #ffffff;
  --fa-soft: #f5f3ed;
  --fa-text-dark: rgba(5,5,5,.72);
  --fa-text-light: rgba(255,255,255,.78);
  --fa-border-dark: rgba(5,5,5,.10);
  --fa-border-light: rgba(255,255,255,.11);

  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--fa-black);
}

.fa-sp-page a {
  transition: all .22s ease;
}

.fa-sp-wrap {
  width: min(1180px, calc(100% - 44px));
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.fa-sp-kicker {
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--fa-yellow);
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.fa-sp-kicker span {
  width: 38px;
  height: 2px;
  display: inline-block;
  background: var(--fa-yellow);
}

.fa-sp-section-head {
  max-width: 820px;
  margin-bottom: clamp(34px, 4.5vw, 56px);
}

.fa-sp-section-title {
  margin: 0;
  color: var(--fa-black);
  font-size: clamp(38px, 4.6vw, 72px);
  line-height: .94;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.fa-sp-section-title strong {
  color: var(--fa-yellow);
  font-weight: 950;
  font-style: italic;
}

.fa-sp-section-head p {
  width: min(760px, 100%);
  margin: 20px 0 0;
  color: var(--fa-text-dark);
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.62;
  font-weight: 500;
}


/* =========================================================
   3. HERO PRODUCTO
   ========================================================= */

.fa-sp-hero {
  width: 100%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 84% 10%, rgba(227,170,0,.20) 0 10%, transparent 34%),
    radial-gradient(circle at 6% 88%, rgba(255,255,255,.06) 0 7%, transparent 28%),
    linear-gradient(135deg, #050505 0%, #090909 50%, #111111 100%);
  color: #ffffff;
  padding: clamp(92px, 8vw, 136px) 0 clamp(76px, 7vw, 116px);
}

.fa-sp-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    linear-gradient(115deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 48%, rgba(0,0,0,.32) 100%),
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.024) 0px,
      rgba(255,255,255,.024) 1px,
      transparent 1px,
      transparent 12px
    );
  pointer-events: none;
}

.fa-sp-hero::after {
  content: "";
  position: absolute;
  right: -180px;
  top: -150px;
  width: 470px;
  height: 620px;
  z-index: -2;
  background: linear-gradient(135deg, rgba(227,170,0,.58), rgba(227,170,0,.06));
  clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%);
  opacity: .48;
  pointer-events: none;
}

.fa-sp-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, .72fr);
  gap: clamp(42px, 5.6vw, 78px);
  align-items: center;
}

.fa-sp-hero__content,
.fa-sp-hero__visual {
  min-width: 0;
}

.fa-sp-hero__title {
  margin: 0;
  color: #ffffff;
  font-size: clamp(42px, 5.2vw, 78px);
  line-height: .90;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -.06em;
  text-transform: uppercase;
  max-width: 850px;
}

.fa-sp-hero__desc {
  width: min(760px, 100%);
  margin: 24px 0 0;
  color: rgba(255,255,255,.80);
  font-size: clamp(16px, 1.22vw, 19px);
  line-height: 1.62;
  font-weight: 500;
}

.fa-sp-hero__desc p {
  margin: 0 0 14px;
  color: inherit !important;
}

.fa-sp-hero__desc p:last-child {
  margin-bottom: 0;
}

.fa-sp-hero__purchase {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.fa-sp-price {
  min-height: 58px;
  padding: 0 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.14);
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.02em;
}

.fa-sp-price del {
  color: rgba(255,255,255,.46);
  font-size: 16px;
  margin-right: 8px;
}

.fa-sp-price ins {
  color: #ffffff;
  text-decoration: none;
}

.fa-sp-addcart {
  display: flex;
  align-items: center;
}

.fa-sp-addcart form.cart {
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 12px !important;
}

.fa-sp-addcart .quantity {
  margin: 0 !important;
}

.fa-sp-addcart .quantity input.qty {
  width: 76px !important;
  height: 58px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  text-align: center !important;
}

.fa-sp-addcart button.single_add_to_cart_button,
.fa-sp-addcart .single_add_to_cart_button,
.fa-sp-addcart button.button,
.fa-sp-addcart .button {
  min-height: 58px !important;
  padding: 0 30px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #ffca08 0%, #e3aa00 100%) !important;
  color: #050505 !important;
  border: none !important;
  text-decoration: none !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  box-shadow: 0 18px 38px rgba(227,170,0,.24) !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: visible !important;
}

.fa-sp-addcart button.single_add_to_cart_button:hover,
.fa-sp-addcart .single_add_to_cart_button:hover,
.fa-sp-addcart button.button:hover,
.fa-sp-addcart .button:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}

/* Anula flechas raras de Divi en botón carrito */
.fa-sp-addcart button.single_add_to_cart_button::before,
.fa-sp-addcart button.single_add_to_cart_button::after,
.fa-sp-addcart .single_add_to_cart_button::before,
.fa-sp-addcart .single_add_to_cart_button::after,
.fa-sp-addcart button.button::before,
.fa-sp-addcart button.button::after,
.fa-sp-addcart .button::before,
.fa-sp-addcart .button::after {
  display: none !important;
  content: none !important;
}

.fa-sp-hero__trust {
  width: min(780px, 100%);
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.fa-sp-hero__trust div {
  padding: 16px 15px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
}

.fa-sp-hero__trust span {
  display: block;
  margin-bottom: 6px;
  color: var(--fa-yellow);
  font-size: 10px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.fa-sp-hero__trust strong {
  display: block;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.24;
  font-weight: 850;
}

.fa-sp-hero__visual {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 0%, rgba(227,170,0,.18) 0 12%, transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.028) 100%);
  border: 1px solid rgba(227,170,0,.26);
  box-shadow: 0 30px 78px rgba(0,0,0,.28);
}

.fa-sp-hero__visual img {
  width: 100%;
  height: 100%;
  min-height: 440px;
  object-fit: cover;
  display: block;
}

.fa-sp-hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.26), rgba(0,0,0,0));
  pointer-events: none;
}

.fa-sp-hero__placeholder {
  min-height: 440px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px;
}

.fa-sp-hero__placeholder span {
  color: #e3aa00;
  font-size: 12px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.fa-sp-hero__placeholder strong {
  margin-top: 12px;
  color: #ffffff;
  font-size: 44px;
  line-height: .95;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -.05em;
  text-transform: uppercase;
}


/* =========================================================
   4. QUÉ INCLUYE - CLARO
   ========================================================= */

.fa-sp-includes {
  position: relative;
  overflow: hidden;
  padding: clamp(76px, 7vw, 112px) 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(227,170,0,.12) 0 10%, transparent 32%),
    radial-gradient(circle at 92% 90%, rgba(5,5,5,.08) 0 10%, transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f5f3ed 100%);
}

.fa-sp-includes::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(5,5,5,.027) 0px,
      rgba(5,5,5,.027) 1px,
      transparent 1px,
      transparent 13px
    );
  opacity: .62;
  pointer-events: none;
}

.fa-sp-includes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.fa-sp-include-item {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  padding: 28px 24px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 0%, rgba(227,170,0,.13) 0 12%, transparent 36%),
    linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
  border: 1px solid rgba(5,5,5,.09);
  box-shadow: 0 24px 64px rgba(0,0,0,.08);
}

.fa-sp-include-item::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, #ffca08 0%, #e3aa00 100%);
}

.fa-sp-include-item > span {
  display: block;
  margin-bottom: 18px;
  color: var(--fa-yellow);
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.fa-sp-include-item h3 {
  margin: 0;
  color: var(--fa-black);
  font-size: clamp(22px, 1.7vw, 29px);
  line-height: 1.02;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.fa-sp-include-item p {
  margin: 16px 0 0;
  color: var(--fa-text-dark);
  font-size: 14px;
  line-height: 1.58;
  font-weight: 500;
}

.fa-sp-longdesc {
  margin-top: clamp(34px, 5vw, 58px);
  padding: clamp(24px, 3vw, 36px);
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid rgba(5,5,5,.09);
  box-shadow: 0 22px 60px rgba(0,0,0,.08);
  color: rgba(5,5,5,.76);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
}

.fa-sp-longdesc h2,
.fa-sp-longdesc h3,
.fa-sp-longdesc h4 {
  color: #050505;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.fa-sp-longdesc p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   5. CÓMO FUNCIONA - OSCURO
   ========================================================= */

.fa-sp-process {
  position: relative;
  overflow: hidden;
  padding: clamp(76px, 7vw, 112px) 0;
  background:
    radial-gradient(circle at 88% 14%, rgba(227,170,0,.18) 0 10%, transparent 34%),
    radial-gradient(circle at 10% 88%, rgba(255,255,255,.055) 0 8%, transparent 30%),
    linear-gradient(135deg, #050505 0%, #090909 52%, #111111 100%);
  color: #ffffff;
}

.fa-sp-process::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.024) 0px,
      rgba(255,255,255,.024) 1px,
      transparent 1px,
      transparent 12px
    );
  pointer-events: none;
}

.fa-sp-process .fa-sp-section-title {
  color: #ffffff;
}

.fa-sp-process .fa-sp-section-title strong {
  color: var(--fa-yellow);
}

.fa-sp-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.fa-sp-process-card {
  position: relative;
  overflow: hidden;
  min-height: 215px;
  padding: 28px 24px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 92% 0%, rgba(227,170,0,.16) 0 12%, transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.026) 100%);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 24px 64px rgba(0,0,0,.18);
}

.fa-sp-process-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, #ffca08 0%, #e3aa00 100%);
}

.fa-sp-process-card > span {
  display: block;
  margin-bottom: 18px;
  color: var(--fa-yellow);
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.fa-sp-process-card h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(22px, 1.7vw, 29px);
  line-height: 1.02;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.fa-sp-process-card p {
  margin: 16px 0 0;
  color: rgba(255,255,255,.74);
  font-size: 14px;
  line-height: 1.58;
  font-weight: 500;
}


/* =========================================================
   6. CTA DUDAS
   ========================================================= */

.fa-sp-doubt {
  padding: clamp(56px, 5.5vw, 86px) 0;
  background:
    radial-gradient(circle at 12% 0%, rgba(227,170,0,.12) 0 10%, transparent 32%),
    linear-gradient(180deg, #ffffff 0%, #f5f3ed 100%);
}

.fa-sp-doubt__inner {
  padding: clamp(26px, 3.2vw, 38px);
  border-radius: 30px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  background:
    radial-gradient(circle at 92% 0%, rgba(227,170,0,.18) 0 12%, transparent 34%),
    linear-gradient(135deg, #050505 0%, #111111 100%);
  border: 1px solid rgba(227,170,0,.32);
  box-shadow: 0 28px 76px rgba(0,0,0,.20);
}

.fa-sp-doubt span {
  display: block;
  margin-bottom: 10px;
  color: var(--fa-yellow);
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.fa-sp-doubt h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(28px, 3vw, 48px);
  line-height: .98;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

.fa-sp-doubt p {
  width: min(720px, 100%);
  margin: 12px 0 0;
  color: rgba(255,255,255,.76);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 500;
}

.fa-sp-doubt a {
  min-height: 58px;
  padding: 0 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  white-space: nowrap;
  background: linear-gradient(135deg, #ffca08 0%, #e3aa00 100%);
  color: #050505 !important;
  text-decoration: none !important;
  font-size: 13px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 18px 38px rgba(227,170,0,.24);
}

.fa-sp-doubt a:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}


/* =========================================================
   7. RELACIONADOS
   ========================================================= */

.fa-sp-related {
  position: relative;
  overflow: hidden;
  padding: clamp(76px, 7vw, 112px) 0;
  background:
    radial-gradient(circle at 88% 14%, rgba(227,170,0,.18) 0 10%, transparent 34%),
    linear-gradient(135deg, #050505 0%, #090909 52%, #111111 100%);
  color: #ffffff;
}

.fa-sp-related::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255,255,255,.024) 0px,
      rgba(255,255,255,.024) 1px,
      transparent 1px,
      transparent 12px
    );
  pointer-events: none;
}

.fa-sp-related .fa-sp-section-title {
  color: #ffffff;
}

.fa-sp-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.fa-sp-related-card {
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 92% 0%, rgba(227,170,0,.12) 0 12%, transparent 36%),
    linear-gradient(180deg, rgba(19,23,31,.96) 0%, rgba(10,12,17,.98) 100%);
  box-shadow: 0 24px 64px rgba(0,0,0,.22);
}

.fa-sp-related-card__image {
  height: 190px;
  display: block;
  overflow: hidden;
  background: #111;
}

.fa-sp-related-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fa-sp-related-card__content {
  padding: 24px 22px;
}

.fa-sp-related-card h3 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(22px, 1.8vw, 30px);
  line-height: 1.02;
  font-weight: 950;
  font-style: italic;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.fa-sp-related-card h3 a {
  color: inherit !important;
  text-decoration: none !important;
}

.fa-sp-related-card__price {
  margin-top: 14px;
  color: var(--fa-yellow);
  font-size: 18px;
  line-height: 1;
  font-weight: 950;
}

.fa-sp-related-card__link {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--fa-yellow) !important;
  text-decoration: none !important;
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}


/* =========================================================
   8. RESPONSIVE
   ========================================================= */

@media (max-width: 1080px) {
  .fa-sp-hero__inner {
    grid-template-columns: 1fr;
  }

  .fa-sp-hero__visual {
    max-width: 760px;
  }

  .fa-sp-includes-grid,
  .fa-sp-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fa-sp-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fa-sp-doubt__inner {
    grid-template-columns: 1fr;
  }

  .fa-sp-doubt a {
    width: fit-content;
  }
}

@media (max-width: 780px) {
  .fa-sp-wrap {
    width: min(100% - 30px, 1180px);
  }

  .fa-sp-hero {
    padding: 78px 0 70px;
  }

  .fa-sp-kicker {
    font-size: 10px;
    letter-spacing: .21em;
  }

  .fa-sp-kicker span {
    width: 28px;
  }

  .fa-sp-hero__title {
    font-size: clamp(34px, 9.5vw, 50px);
    line-height: .94;
    letter-spacing: -.052em;
  }

  .fa-sp-hero__desc {
    font-size: 15px;
    line-height: 1.58;
  }

  .fa-sp-hero__purchase {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .fa-sp-price,
  .fa-sp-addcart,
  .fa-sp-addcart form.cart,
  .fa-sp-addcart button.single_add_to_cart_button,
  .fa-sp-addcart .single_add_to_cart_button,
  .fa-sp-addcart button.button,
  .fa-sp-addcart .button {
    width: 100% !important;
  }

  .fa-sp-addcart form.cart {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .fa-sp-addcart .quantity input.qty {
    width: 100% !important;
  }

  .fa-sp-hero__trust {
    grid-template-columns: 1fr;
  }

  .fa-sp-hero__visual,
  .fa-sp-hero__visual img,
  .fa-sp-hero__placeholder {
    min-height: 300px;
  }

  .fa-sp-section-title {
    font-size: clamp(32px, 9.5vw, 48px);
    line-height: .98;
  }

  .fa-sp-section-head p {
    font-size: 15px;
    line-height: 1.58;
  }

  .fa-sp-includes,
  .fa-sp-process,
  .fa-sp-related {
    padding: 64px 0 70px;
  }

  .fa-sp-includes-grid,
  .fa-sp-process-grid,
  .fa-sp-related-grid {
    grid-template-columns: 1fr;
  }

  .fa-sp-include-item,
  .fa-sp-process-card {
    min-height: auto;
    padding: 26px 22px;
    border-radius: 22px;
  }

  .fa-sp-longdesc {
    padding: 24px 20px;
    border-radius: 22px;
    font-size: 15px;
    line-height: 1.62;
  }

  .fa-sp-doubt__inner {
    padding: 26px 22px;
    border-radius: 22px;
  }

  .fa-sp-doubt h2 {
    font-size: 28px;
  }

  .fa-sp-doubt p {
    font-size: 14px;
    line-height: 1.55;
  }

  .fa-sp-doubt a {
    width: 100%;
    min-height: 56px;
  }

  .fa-sp-related-card__image {
    height: 180px;
  }
}

@media (max-width: 420px) {
  .fa-sp-wrap {
    width: min(100% - 24px, 1180px);
  }

  .fa-sp-hero__title {
    font-size: clamp(32px, 9vw, 42px);
  }
}


/* =========================================================
   V7 - OCULTAR CAJA DE DESCRIPCIÓN LARGA VACÍA
   Esa caja blanca aparecía porque WooCommerce estaba sacando una
   descripción larga sin contenido útil.
   ========================================================= */

.fa-sp-longdesc {
  display: none !important;
}

/* =========================================================
   V8 FINAL - CONTROL DEFINITIVO DE TARJETAS Y TÍTULOS
   Corrige cortes de palabras en tarjetas de producto.
   Mantiene títulos legibles, compactos y sin partir palabras.
   ========================================================= */

/* Evitar cortes raros en todos los títulos de tarjetas del producto */
body.single-product .fa-sp-page .fa-sp-include-item h3,
body.single-product .fa-sp-page .fa-sp-process-card h3,
body.single-product .fa-sp-page .fa-sp-related-card h3,
body.single-product .fa-sp-page .fa-sp-doubt h2 {
  overflow: visible !important;
  display: block !important;
  max-height: none !important;
  min-height: 0 !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-wrap: balance !important;
}

/* Tarjetas "Qué incluye": más aire y tamaño controlado */
body.single-product .fa-sp-page .fa-sp-include-item {
  min-height: 240px !important;
  padding: 30px 24px 28px !important;
}

body.single-product .fa-sp-page .fa-sp-include-item h3 {
  font-size: clamp(20px, 1.38vw, 25px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.035em !important;
}

/* Tarjetas "Cómo funciona": evita que instrucciones se parta */
body.single-product .fa-sp-page .fa-sp-process-grid {
  gap: 18px !important;
}

body.single-product .fa-sp-page .fa-sp-process-card {
  min-height: 235px !important;
  padding: 30px 24px 28px !important;
}

body.single-product .fa-sp-page .fa-sp-process-card h3 {
  font-size: clamp(19px, 1.28vw, 24px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.032em !important;
}

body.single-product .fa-sp-page .fa-sp-process-card p,
body.single-product .fa-sp-page .fa-sp-include-item p {
  font-size: 14px !important;
  line-height: 1.62 !important;
}

/* En escritorio medio, las 4 columnas siguen, pero con tipografía más segura */
@media (max-width: 1280px) and (min-width: 1081px) {
  body.single-product .fa-sp-page .fa-sp-process-card,
  body.single-product .fa-sp-page .fa-sp-include-item {
    padding: 28px 22px 26px !important;
  }

  body.single-product .fa-sp-page .fa-sp-process-card h3 {
    font-size: 21px !important;
    line-height: 1.06 !important;
  }

  body.single-product .fa-sp-page .fa-sp-include-item h3 {
    font-size: 23px !important;
    line-height: 1.06 !important;
  }
}

/* Tablet: 2 columnas amplias, sin cortes */
@media (max-width: 1080px) {
  body.single-product .fa-sp-page .fa-sp-includes-grid,
  body.single-product .fa-sp-page .fa-sp-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  body.single-product .fa-sp-page .fa-sp-process-card h3,
  body.single-product .fa-sp-page .fa-sp-include-item h3 {
    font-size: clamp(22px, 3vw, 30px) !important;
    line-height: 1.05 !important;
  }
}

/* Móvil: 1 columna, títulos fuertes pero limpios */
@media (max-width: 780px) {
  body.single-product .fa-sp-page .fa-sp-includes-grid,
  body.single-product .fa-sp-page .fa-sp-process-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body.single-product .fa-sp-page .fa-sp-include-item,
  body.single-product .fa-sp-page .fa-sp-process-card {
    min-height: auto !important;
    padding: 26px 22px !important;
  }

  body.single-product .fa-sp-page .fa-sp-process-card h3,
  body.single-product .fa-sp-page .fa-sp-include-item h3 {
    font-size: clamp(23px, 7.2vw, 31px) !important;
    line-height: 1.02 !important;
    letter-spacing: -.038em !important;
  }

  body.single-product .fa-sp-page .fa-sp-process-card p,
  body.single-product .fa-sp-page .fa-sp-include-item p {
    font-size: 14px !important;
    line-height: 1.58 !important;
  }
}

/* Caja de descripción larga vacía siempre fuera */
body.single-product .fa-sp-page .fa-sp-longdesc {
  display: none !important;
}


/* =========================================================
   PRODUCTO INDIVIDUAL - FIX TÍTULO HERO + PRECIO
   FAUSTO ALFARO V9

   Pegar al FINAL del CSS personalizado.
   Corrige:
   - Títulos de producto que se parten: ENTRENAMIENT / O
   - Precio pegado a "IVA incluido"
   ========================================================= */


/* =========================================================
   1. TÍTULO DEL HERO DEL PRODUCTO
   ========================================================= */

body.single-product .fa-sp-page .fa-sp-hero__inner {
  grid-template-columns: minmax(0, 1.16fr) minmax(320px, .66fr) !important;
  gap: clamp(38px, 5vw, 70px) !important;
}

body.single-product .fa-sp-page .fa-sp-hero__title {
  max-width: 780px !important;
  font-size: clamp(38px, 4.45vw, 66px) !important;
  line-height: .96 !important;
  letter-spacing: -.052em !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-wrap: balance !important;
}

/* Ajuste para escritorio medio, donde más se suelen partir los títulos */
@media (max-width: 1320px) and (min-width: 981px) {
  body.single-product .fa-sp-page .fa-sp-hero__title {
    font-size: clamp(38px, 4.15vw, 60px) !important;
    line-height: .98 !important;
    letter-spacing: -.048em !important;
  }

  body.single-product .fa-sp-page .fa-sp-hero__inner {
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, .62fr) !important;
  }
}

/* Tablet y móvil: una columna y título grande pero sin cortes feos */
@media (max-width: 980px) {
  body.single-product .fa-sp-page .fa-sp-hero__inner {
    grid-template-columns: 1fr !important;
  }

  body.single-product .fa-sp-page .fa-sp-hero__title {
    max-width: 100% !important;
    font-size: clamp(36px, 8.5vw, 54px) !important;
    line-height: .98 !important;
    letter-spacing: -.048em !important;
  }
}

@media (max-width: 520px) {
  body.single-product .fa-sp-page .fa-sp-hero__title {
    font-size: clamp(31px, 8.2vw, 42px) !important;
    line-height: 1 !important;
    letter-spacing: -.04em !important;
  }
}


/* =========================================================
   2. ESPACIO ENTRE PRECIO E IVA INCLUIDO
   ========================================================= */

/* WooCommerce suele sacar el texto IVA como .woocommerce-price-suffix */
body.single-product .fa-sp-page .fa-sp-price .woocommerce-price-suffix,
body.single-product .fa-sp-page .fa-sp-price small.woocommerce-price-suffix,
body.single-product .fa-sp-page .fa-sp-price .includes_tax {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: .38em !important;
  color: inherit !important;
  font-size: .82em !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

/* Si Woo lo pega sin espacio real, forzamos separación visual */
body.single-product .fa-sp-page .fa-sp-price .woocommerce-price-suffix::before,
body.single-product .fa-sp-page .fa-sp-price small.woocommerce-price-suffix::before,
body.single-product .fa-sp-page .fa-sp-price .includes_tax::before {
  content: "" !important;
}

/* Evita que el precio se rompa en dos líneas raras */
body.single-product .fa-sp-page .fa-sp-price {
  gap: 0 !important;
  white-space: nowrap !important;
  letter-spacing: -.025em !important;
}

/* En móvil, si no cabe todo, que respire y no se monte */
@media (max-width: 520px) {
  body.single-product .fa-sp-page .fa-sp-price {
    font-size: 21px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body.single-product .fa-sp-page .fa-sp-price .woocommerce-price-suffix,
  body.single-product .fa-sp-page .fa-sp-price small.woocommerce-price-suffix,
  body.single-product .fa-sp-page .fa-sp-price .includes_tax {
    font-size: .78em !important;
    margin-left: .34em !important;
  }
}