/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.5.20260129-footer
*/

/* ============================================
   API CARE - CSS COMPLETO PARA FLATSOME
   Cosmética Natural Chilena
   Header optimizado - Resto sin cambios
   ============================================ */

/* ===== VARIABLES CSS ===== */
:root {
  --api-primary: #5b7c4a;
  --api-secondary: #8b7355;
  --api-accent: #d4a574;
  --api-dark: #2c3e2d;
  --api-light: #f5f0e8;
  --api-white: #ffffff;
  --api-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --api-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --api-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --api-transition: all 0.3s ease;
  --api-font-serif: Georgia, "Times New Roman", serif;
}

/* ============================================
   HEADER

   El header usa los estilos nativos de Flatsome.
   Configurar en: Apariencia → Personalizar → Header

   CSS personalizado solo si es necesario.
   ============================================ */


/* ============================================
   A PARTIR DE AQUÍ TODO PERMANECE IGUAL
   ============================================ */

/* ===== HERO SLIDER ===== */

/* El hero usa los estilos nativos de Flatsome.
   Configurar en la página con shortcodes y estilos inline.
   CSS personalizado solo si es necesario. */

/* ===== TRUST BAR V2 - Diseño Vertical (Ícono → Título → Subtítulo) ===== */
/* Inspirado en diseños modernos como tabishop.cl */

.trust-item-v2 {
  text-align: center;
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
}

.trust-item-v2:hover {
  transform: translateY(-4px);
}

.trust-icon-v2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(91, 124, 74, 0.1);
  margin-bottom: 16px;
  color: var(--api-primary);
  transition: all 0.3s ease;
}

.trust-item-v2:hover .trust-icon-v2 {
  background-color: var(--api-primary);
  color: white;
  transform: scale(1.1);
}

.trust-icon-v2 svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
}

.trust-title-v2 {
  font-weight: 600;
  color: var(--api-dark);
  margin: 0 0 6px 0;
  font-size: 16px;
  line-height: 1.3;
}

.trust-subtitle-v2 {
  font-size: 14px;
  color: var(--api-secondary);
  margin: 0;
  line-height: 1.4;
  opacity: 0.85;
}

/* Responsive móvil - ajustes sutiles */
@media (max-width: 767px) {
  .trust-item-v2 {
    padding: 18px 12px;
  }

  .trust-icon-v2 {
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
  }

  .trust-icon-v2 svg {
    width: 24px;
    height: 24px;
  }

  .trust-title-v2 {
    font-size: 15px;
  }

  .trust-subtitle-v2 {
    font-size: 13px;
  }
}



/* ===== TÍTULOS DE SECCIÓN ===== */
.api-section-title {
  text-align: center;
  margin-bottom: 2rem;
}

.api-section-title h2 {
  font-size: 2rem;
  font-family: var(--api-font-serif);
  font-weight: bold;
  color: var(--api-dark);
  margin-bottom: 1rem;
  text-wrap: balance;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .api-section-title h2 {
    font-size: 2.5rem;
  }
}

/* ===== TRUST BAR V2 - Fondo con Textura (Versión Segura) ===== */

.trust-bar-custom {
  background:
    radial-gradient(circle at 20% 30%, rgba(212, 165, 116, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(91, 124, 74, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(245, 240, 232, 0.5) 0%, transparent 60%),
    linear-gradient(135deg, #fafaf8 0%, #f5f0e8 50%, #fafaf8 100%) !important;
  position: relative;
}

/* Textura de puntos sutiles usando box-shadow */
.trust-bar-custom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: 4px 4px;
  background-image:
    radial-gradient(circle, rgba(139, 115, 85, 0.08) 1px, transparent 1px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

.trust-bar-custom .section-content {
  position: relative;
  z-index: 1;
}


.api-section-subtitle {
  font-size: 1.125rem;
  color: #666;
  max-width: 600px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

.api-title-divider {
  width: 6rem;
  height: 0.25rem;
  background-color: var(--api-accent);
  margin: 1rem auto 0;
  border-radius: 9999px;
}

/* ===== BADGE LABEL ===== */
.api-badge-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: rgba(91, 124, 74, 0.1);
  border-radius: 9999px;
  margin-bottom: 1rem;
}

.api-badge-label svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--api-primary);
  stroke: currentColor;
}

.api-badge-label span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--api-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===== INGREDIENTES ESTRELLA ===== */
.api-ingredient-card {
  background: var(--api-white);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--api-shadow-lg);
  transition: var(--api-transition);
  height: 100%;
}

.api-ingredient-card:hover {
  box-shadow: var(--api-shadow-xl);
  transform: translateY(-4px);
}

.api-ingredient-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  width: 100%;
}

.api-ingredient-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.5s ease;
}

.api-ingredient-card:hover .api-ingredient-image img {
  transform: scale(1.1);
}

/* Overlay blanco limpio - diseño moderno con glassmorphism */
.api-ingredient-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.65rem 1.25rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Título del ingrediente - verde oscuro sobre fondo blanco */
.api-ingredient-name {
  font-size: 1.05rem;
  font-family: var(--api-font-serif);
  font-weight: bold;
  color: var(--api-dark);
  margin: 0 0 0.1rem 0;
  line-height: 1.2;
}

/* Nombre latino - color dorado */
.api-ingredient-latin {
  font-size: 0.75rem;
  color: var(--api-accent);
  font-style: italic;
  margin: 0;
  line-height: 1.1;
}

.api-ingredient-content {
  padding: 1.5rem;
}

.api-ingredient-content p {
  color: #666;
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0 0 1rem;
}

.api-ingredient-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.api-ingredient-tags span {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.375rem 0.75rem;
  background-color: rgba(91, 124, 74, 0.1);
  color: var(--api-primary);
  border-radius: 9999px;
}

/* ===== CATEGORÍAS - VERSIÓN MINIMALISTA ===== */
/* Solo ajustes esenciales para móvil */

/* Móvil: asegurar visualización correcta */
@media (max-width: 767px) {
  /* FORZAR visualización del contenedor */
  .product-categories,
  .product-categories .row-small,
  .product-categories .row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* FORZAR columnas visibles */
  .product-categories .col,
  .product-categories .col-sm-6,
  .product-categories [class*="col"] {
    flex: 0 0 calc(50% - 7.5px) !important;
    max-width: calc(50% - 7.5px) !important;
    width: calc(50% - 7.5px) !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* FORZAR cards de categoría visibles */
  .product-category,
  .product-category a,
  .product-category .col-inner {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-bottom: 0 !important;
  }

  /* Imágenes con altura adecuada */
  .product-category .box-image,
  .product-category .img-inner {
    display: block !important;
    height: 200px !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .product-category img {
    display: block !important;
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    visibility: visible !important;
  }

  /* Texto del overlay */
  .product-category .box-text,
  .product-category .box-text-inner {
    display: block !important;
    padding: 10px !important;
    visibility: visible !important;
  }

  .product-category h3,
  .product-category .category-title,
  .product-category .name {
    font-size: 14px !important;
    display: block !important;
    color: white !important;
    text-align: center !important;
    visibility: visible !important;
  }
}

/* ===== VALUE PROPOSITION ===== */
.api-value-item {
  padding: 1.5rem;
  text-align: center;
}

.api-value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background-color: var(--api-accent);
  border-radius: 50%;
  margin-bottom: 1rem;
}

.api-value-icon svg {
  width: 2rem;
  height: 2rem;
  color: var(--api-dark);
  stroke: currentColor;
}

.api-value-title {
  font-weight: bold;
  font-size: 1.125rem;
  color: var(--api-dark);
  margin: 0 0 0.5rem;
}

.api-value-text {
  font-size: 0.875rem;
  color: rgba(44, 62, 45, 0.7);
  margin: 0;
  text-wrap: balance;
}

/* ===== BRAND STORY - CONOCE API CARE ===== */
.api-founder-wrapper {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
}

.api-founder-image {
  width: 100%;
  border-radius: 1rem;
  box-shadow: var(--api-shadow-xl);
}

.api-founder-badge {
  position: absolute;
  bottom: -1rem;
  right: -1rem;
  background-color: var(--api-accent);
  color: var(--api-white);
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  box-shadow: var(--api-shadow-xl);
  text-align: center;
}

.api-founder-years {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
}

.api-founder-text {
  display: block;
  font-size: 0.875rem;
}

.api-brand-story {
  padding-left: 0;
}

@media (min-width: 768px) {
  .api-brand-story {
    padding-left: 2rem;
  }
}

.api-label-accent {
  color: var(--api-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  display: block;
  margin-bottom: 0.5rem;
}

.api-brand-title {
  font-size: 2rem;
  font-family: var(--api-font-serif);
  font-weight: bold;
  color: var(--api-dark);
  margin: 0 0 1.5rem;
}

@media (min-width: 768px) {
  .api-brand-title {
    font-size: 2.25rem;
  }
}

.api-brand-text {
  color: rgba(44, 62, 45, 0.8);
  line-height: 1.7;
  margin: 0 0 1rem;
}

.api-quote-box {
  background-color: var(--api-light);
  border-left: 4px solid var(--api-accent);
  padding: 1.5rem;
  border-radius: 0 0.75rem 0.75rem 0;
  margin: 1.5rem 0 2rem;
}

.api-quote-box blockquote {
  font-style: italic;
  font-size: 1.125rem;
  color: var(--api-dark);
  line-height: 1.6;
  margin: 0 0 0.75rem;
}

.api-quote-box cite {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--api-primary);
  font-style: normal;
}

/* ===== BOTONES OUTLINE - ESTILO API CARE ===== */
/* Botones con estilo outline: fondo blanco, borde y texto verde */
/* Según diseño de imagen de referencia nuestra-historia.png */

/* Todos los botones outline */
.button.is-outline,
a.button.is-outline,
button.is-outline,
.button.is-outline-white,
a.button-outline,
.btn-outline,
/* Selectores específicos para Flatsome */
.section-content .button,
.col-inner .button,
[class*="col"]>.button {
  background-color: #ffffff !important;
  border: 2px solid var(--api-primary) !important;
  color: var(--api-primary) !important;
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
}

/* Hover: fondo verde, texto blanco */
.button.is-outline:hover,
a.button.is-outline:hover,
button.is-outline:hover,
.button.is-outline-white:hover,
a.button-outline:hover,
.btn-outline:hover,
.section-content .button:hover,
.col-inner .button:hover,
[class*="col"]>.button:hover {
  background-color: var(--api-primary) !important;
  border-color: var(--api-primary) !important;
  color: #ffffff !important;
}

/* Botones en secciones específicas - NUESTRA HISTORIA */
.api-brand-story~.button,
.api-brand-story+.button {
  background-color: #ffffff !important;
  border: 2px solid var(--api-primary) !important;
  color: var(--api-primary) !important;
}

.api-brand-story~.button:hover,
.api-brand-story+.button:hover {
  background-color: var(--api-primary) !important;
  color: #ffffff !important;
}

/* Botones en Shop Showcase con fondo verde */
.api-shop-content+.button,
[bg_color="#5B7C4A"] .button,
[bg_color="#5B7C4A"] a.button {
  background-color: #ffffff !important;
  border: 2px solid #ffffff !important;
  color: var(--api-primary) !important;
}

.api-shop-content+.button:hover,
[bg_color="#5B7C4A"] .button:hover,
[bg_color="#5B7C4A"] a.button:hover {
  background-color: var(--api-primary) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* ===== SHOP SHOWCASE ===== */
.api-shop-content {
  height: 100%;
}

.api-shop-title-white {
  font-size: 2rem;
  font-family: var(--api-font-serif);
  font-weight: bold;
  color: var(--api-white);
  margin: 0 0 1.5rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .api-shop-title-white {
    font-size: 2.5rem;
  }
}

.api-shop-text-white {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

@media (min-width: 768px) {
  .api-shop-text-white {
    font-size: 1.125rem;
  }
}

.api-shop-title-dark {
  font-size: 2rem;
  font-family: var(--api-font-serif);
  font-weight: bold;
  color: var(--api-dark);
  margin: 0 0 1.5rem;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .api-shop-title-dark {
    font-size: 2.5rem;
  }
}

.api-shop-text-dark {
  color: rgba(44, 62, 45, 0.8);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1rem;
}

@media (min-width: 768px) {
  .api-shop-text-dark {
    font-size: 1.125rem;
  }
}

.api-shop-highlight {
  color: var(--api-dark);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  border-top: 1px solid rgba(44, 62, 45, 0.2);
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}

/* ===== PRODUCTOS - VERSIÓN MINIMALISTA (Solo Colores de Marca) ===== */
/* Flatsome maneja layouts, hover effects y responsive */

/* Badges "En Oferta" en dorado Api Care */
.products .product-small .onsale,
.products .product-small .badge-container .callout {
  background-color: var(--api-accent) !important;
  color: var(--api-white) !important;
}

/* Categorías en marrón secundario */
.products .product-small .product-cat,
.products .product-small .category {
  color: var(--api-secondary) !important;
}

/* Títulos de productos en verde oscuro */
.products .product-small .product-title,
.products .product-small .name {
  color: var(--api-dark) !important;
  font-weight: 600 !important;
}

/* Precios en verde primario */
.products .product-small .price,
.products .product-small .price ins {
  color: var(--api-primary) !important;
  font-weight: 700 !important;
}

/* Precios tachados en marrón */
.products .product-small .price del {
  color: var(--api-secondary) !important;
  opacity: 0.6;
}

/* Estrellas de rating en dorado */
.products .product-small .star-rating span::before,
.products .product-small .star-rating::before {
  color: var(--api-accent) !important;
}

/* ===== TABS DE PRODUCTOS ===== */

/* Tabs inactivos en marrón */
.tabbed-content .nav-tabs li a {
  color: var(--api-secondary) !important;
}

/* Tab activo en verde oscuro */
.tabbed-content .nav-tabs li.active a {
  color: var(--api-dark) !important;
  font-weight: 600;
}

/* Línea dorada arriba del tab activo */
.tabbed-content .nav-tabs li.active a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--api-accent);
  border-radius: 0 0 2px 2px;
}

/* ===== TESTIMONIOS ===== */
.api-testimonial-card {
  text-align: center;
  padding: 3rem 2.5rem;
  max-width: 700px;
  margin: 0 auto;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Avatar wrapper - centrado arriba */
.api-testimonial-avatar-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.api-testimonial-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--api-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.api-testimonial-stars {
  color: var(--api-accent);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.25em;
}

.api-testimonial-text {
  font-size: 1.125rem;
  font-style: italic;
  color: var(--api-dark);
  line-height: 1.8;
  margin-bottom: 2rem;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .api-testimonial-text {
    font-size: 1.25rem;
  }
}

/* Info centrada abajo */
.api-testimonial-info {
  text-align: center;
}

.api-testimonial-info h4 {
  font-weight: 600;
  color: var(--api-dark);
  margin: 0;
  font-size: 1rem;
}

.api-testimonial-info p {
  font-size: 0.875rem;
  color: var(--api-secondary);
  margin: 0.25rem 0;
}

.api-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--api-primary);
  font-size: 0.75rem;
  font-weight: 600;
}

/* Flechas de navegación del slider de testimonios */
.section:has(.api-testimonial-card) .flickity-button {
  background: var(--api-primary) !important;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.section:has(.api-testimonial-card) .flickity-button:hover {
  background: var(--api-dark) !important;
  transform: scale(1.05);
}

.section:has(.api-testimonial-card) .flickity-button svg {
  fill: white;
}

.section:has(.api-testimonial-card) .flickity-button:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ===== NEWSLETTER ===== */
.api-newsletter {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.api-newsletter-title {
  font-size: 2rem;
  font-family: var(--api-font-serif);
  font-weight: bold;
  color: var(--api-white);
  margin: 0 0 1rem;
}

@media (min-width: 768px) {
  .api-newsletter-title {
    font-size: 2.5rem;
  }
}

.api-newsletter-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1.5rem;
}

@media (min-width: 768px) {
  .api-newsletter-text {
    font-size: 1.125rem;
  }
}

.api-newsletter-badge {
  display: inline-block;
  background-color: var(--api-accent);
  color: var(--api-white);
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

/* Newsletter Form Styles */
.api-newsletter+.wpcf7 input[type="email"],
.api-newsletter+form input[type="email"] {
  width: 100%;
  max-width: 400px;
  padding: 1rem 1.5rem;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
  color: var(--api-white);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.api-newsletter+.wpcf7 input[type="email"]::placeholder,
.api-newsletter+form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.api-newsletter+.wpcf7 input[type="submit"],
.api-newsletter+form input[type="submit"] {
  padding: 1rem 2rem;
  border-radius: 9999px;
  background-color: var(--api-accent) !important;
  color: var(--api-white) !important;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: var(--api-transition);
}

.api-newsletter+.wpcf7 input[type="submit"]:hover,
.api-newsletter+form input[type="submit"]:hover {
  background-color: var(--api-secondary) !important;
  /* Cambiado de #c49563 a var(--api-secondary) para consistencia */
}

/* ===== RESPONSIVE ===== */
@media (max-width: 767px) {
  .trust-bar-flex {
    flex-direction: column;
    gap: 1.5rem;
  }

  .trust-item {
    width: 100%;
    max-width: 280px;
  }

  .api-section-title h2 {
    font-size: 1.75rem;
  }

  .api-founder-badge {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 1rem;
    display: inline-block;
  }

  .api-founder-wrapper {
    text-align: center;
    margin-bottom: 2rem;
  }

  .api-brand-story {
    text-align: center;
  }

  .api-quote-box {
    text-align: left;
  }

  .tabbed-content .nav.nav-line,
  .tabbed-content .nav-tabs {
    gap: 1rem;
  }

  .tabbed-content .nav.nav-line .tab a,
  .tabbed-content .nav-tabs li a {
    font-size: 0.75rem;
  }

}

/* ============================================
   FOOTER

   El footer usa los estilos nativos de Flatsome.
   Configurar en: Apariencia → Personalizar → Footer

   UX Block del footer: Flatsome → UX Blocks → Footer
   CSS personalizado solo si es necesario.
   ============================================ */

/* ============================================
   ELEMENTOS GLOBALES ADICIONALES
   ============================================ */

/* Formularios */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
textarea,
select {
  border: 1px solid rgba(212, 165, 116, 0.3);
  border-radius: 4px;
  color: var(--api-dark);
  transition: var(--api-transition);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--api-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(91, 124, 74, 0.1);
}

/* Links generales */
/* Enlaces globales - REMOVIDO para permitir configuración desde Theme Customizer
   Los enlaces específicos de componentes (header, footer, etc.) se mantienen */

/* Breadcrumbs */
.breadcrumbs {
  color: rgba(44, 62, 45, 0.7);
  font-size: 14px;
}

.breadcrumbs a {
  color: var(--api-primary);
}

.breadcrumbs a:hover {
  color: var(--api-dark);
}

/* Badges y etiquetas globales - REMOVIDO para permitir configuración desde Theme Customizer
   Los badges específicos de productos (.products .product-small .onsale) se mantienen más abajo */

/* Paginación - REMOVIDO para permitir configuración desde Theme Customizer */

/* Tabs */
.nav-tabs>li.active>a,
.nav-tabs>li>a:hover {
  color: var(--api-primary) !important;
  border-bottom-color: var(--api-primary) !important;
}

/* Alerts y notificaciones */
.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--api-primary) !important;
  background-color: rgba(91, 124, 74, 0.1) !important;
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--api-primary) !important;
}

/* Tooltips */
/* Tooltip - REMOVIDO para permitir configuración desde Theme Customizer */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* ============================================
   AJUSTES DE ANCHOS Y SECCIONES
   ============================================ */

/*
  PROBLEMA:
  - La sección "Sets y Ediciones Especiales" NO usa [section], está directo en page-wrapper
  - Las secciones con [section bg_color] tienen .section-content con max-width más estrecho

  SOLUCIÓN:
  - Igualar el max-width de .section-content al del contenido directo en page-wrapper
  - Flatsome usa max-width: 1170px para el contenido principal
*/

/* Asegurar que todas las secciones [section] tengan el mismo ancho que el contenido normal */
.page-wrapper>.section .section-content {
  max-width: 1170px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Mantener el padding lateral estándar de Flatsome */
.page-wrapper>.section .section-content {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* En pantallas grandes, aumentar padding */
@media (min-width: 850px) {
  .page-wrapper>.section .section-content {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
}

/* Ajuste específico para sliders dentro de sections - mismo ancho contenedor */
.page-wrapper>.section .section-content>.flickity-viewport,
.page-wrapper>.section .section-content>.ux-slider-wrapper,
.page-wrapper>.section .section-content .flickity-slider {
  max-width: 100% !important;
}

/* Asegurar que el slider de testimonios respete el ancho de la sección */
.page-wrapper>.section .section-content .slider-wrapper {
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* ============================================
   AJUSTES DE IMÁGENES
   ============================================ */

/* Asegurar que las imágenes del shop showcase ocupen todo el alto */
.api-shop-content~[class*="col"] img,
.ux_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Imagen de fundadora con badge */
.api-founder-image {
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: var(--api-shadow-lg);
}

.api-founder-wrapper {
  position: relative;
}

.api-founder-badge {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  background-color: var(--api-accent);
  color: var(--api-dark);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--api-shadow-xl);
  font-weight: bold;
  min-width: 120px;
}

.api-founder-years {
  font-size: 2.5rem;
  line-height: 1;
  margin: 0;
  font-weight: 700;
}

.api-founder-text {
  font-size: 0.85rem;
  margin: 0;
  line-height: 1.2;
  font-weight: 400;
}

/* ============================================
   ICONOS SVG
   ============================================ */

/* Asegurar que los SVGs se muestren correctamente */
.trust-icon-circle svg,
.api-value-icon svg,
.api-badge-label svg {
  display: inline-block !important;
  width: 24px;
  height: 24px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.api-value-icon svg {
  width: 32px !important;
  height: 32px !important;
  display: block !important;
}

/* Color de los iconos */
.trust-icon-circle {
  color: var(--api-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(91, 124, 74, 0.1);
  margin-bottom: 0.75rem;
}

.api-value-icon {
  color: var(--api-accent);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.api-badge-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(212, 165, 116, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  margin-bottom: 1rem;
  color: var(--api-accent);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.api-badge-label svg {
  color: var(--api-accent);
  flex-shrink: 0;
}

/* ============================================
   PÁGINA SHOP - COLOR DE ENCABEZADO
   ============================================ */

/* Cambiar color de fondo del encabezado shop al verde oscuro Api Care */
.shop-page-title .title-bg,
.shop-page-title .page-title-bg .title-bg,
.category-page-title .title-bg,
.woocommerce .shop-page-title .title-bg,
.page-title-bg .title-bg.fill {
  background-color: #2C3E2D !important;
  /* Verde oscuro Api Care */
  background-image: none !important;
  /* Quitar cualquier imagen de fondo */
}

/* Ajustar el overlay para mantener legibilidad */
.shop-page-title .title-overlay,
.category-page-title .title-overlay,
.page-title .title-overlay {
  background-color: rgba(44, 62, 45, 0.2) !important;
  /* Overlay suave */
  background-image: none !important;
}

/* Forzar el color desde el elemento padre también */
.shop-page-title.page-title,
.category-page-title.page-title,
.woocommerce .shop-page-title {
  background-color: #2C3E2D !important;
}

/* Asegurar que el texto sea blanco y legible */
.shop-page-title h1,
.shop-page-title .shop-page-title,
.shop-page-title .woocommerce-breadcrumb,
.shop-page-title .breadcrumbs {
  color: #ffffff !important;
}

/* Enlaces del breadcrumb en blanco */
.shop-page-title .woocommerce-breadcrumb a,
.shop-page-title .breadcrumbs a {
  color: #D4A574 !important;
  /* Dorado Api Care para enlaces */
}

.shop-page-title .woocommerce-breadcrumb a:hover,
.shop-page-title .breadcrumbs a:hover {
  color: #F5F0E8 !important;
  /* Beige claro al hover */
}

/* Botón de filtro en color Api Care */
.shop-page-title .filter-button {
  color: #ffffff !important;
  border-color: rgba(212, 165, 116, 0.5) !important;
}

.shop-page-title .filter-button:hover {
  background-color: rgba(212, 165, 116, 0.2) !important;
  border-color: #D4A574 !important;
}

/* ============================================
   BOTONES DE PRODUCTOS - COLORES API CARE
   ============================================ */

/* Botón Quick View - Cambiar de azul a verde Api Care */
.quick-view,
.quick-view-button,
button.quick-view,
a.quick-view {
  background-color: var(--api-primary) !important;
  /* Verde Api Care */
  color: var(--api-white) !important;
  border: none !important;
}

.quick-view:hover,
.quick-view-button:hover,
button.quick-view:hover,
a.quick-view:hover {
  background-color: var(--api-dark) !important;
  /* Verde oscuro al hover */
  color: var(--api-white) !important;
}

/* Botón de Wishlist/Favoritos (corazón) */
.wishlist-button,
.button.wishlist-button,
.product-small .wishlist-button,
.add_to_wishlist,
.yith-wcwl-add-to-wishlist a,
.tinvwl_add_to_wishlist_button {
  background-color: transparent !important;
  color: var(--api-secondary) !important;
  /* Marrón secundario */
  border: 2px solid var(--api-secondary) !important;
  transition: var(--api-transition) !important;
}

.wishlist-button:hover,
.button.wishlist-button:hover,
.product-small .wishlist-button:hover,
.add_to_wishlist:hover,
.yith-wcwl-add-to-wishlist a:hover,
.tinvwl_add_to_wishlist_button:hover {
  background-color: var(--api-accent) !important;
  /* Dorado al hover */
  color: var(--api-white) !important;
  border-color: var(--api-accent) !important;
}

/* Wishlist cuando está activo/añadido */
.wishlist-button.added,
.add_to_wishlist.added,
.yith-wcwl-add-to-wishlist a.added {
  background-color: var(--api-accent) !important;
  color: var(--api-white) !important;
  border-color: var(--api-accent) !important;
}

/* Icono del corazón en color */
.wishlist-button i,
.add_to_wishlist i {
  color: inherit !important;
}

/* Botón "Añadir al carrito" en productos */
.product-small .add_to_cart_button,
.product .add_to_cart_button,
.button.product_type_simple,
.button.product_type_variable {
  background-color: var(--api-primary) !important;
  color: var(--api-white) !important;
  border: none !important;
  transition: var(--api-transition) !important;
}

.product-small .add_to_cart_button:hover,
.product .add_to_cart_button:hover,
.button.product_type_simple:hover,
.button.product_type_variable:hover {
  background-color: var(--api-dark) !important;
  color: var(--api-white) !important;
}

/* Botón "Ver opciones" para productos variables */
.product .button.product_type_variable {
  background-color: var(--api-secondary) !important;
}

.product .button.product_type_variable:hover {
  background-color: var(--api-dark) !important;
}

/* Badge "Añadido al carrito" */
.added_to_cart,
.added_to_cart.wc-forward {
  background-color: var(--api-accent) !important;
  color: var(--api-dark) !important;
}

.added_to_cart:hover {
  background-color: var(--api-primary) !important;
  color: var(--api-white) !important;
}

/* Iconos de acciones rápidas en hover del producto */
.box-overlay .button,
.product-small .box-overlay .button {
  background-color: var(--api-primary) !important;
  color: var(--api-white) !important;
  border: none !important;
}

.box-overlay .button:hover,
.product-small .box-overlay .button:hover {
  background-color: var(--api-dark) !important;
}

/* Compare button si existe */
.compare-button,
.button.compare {
  background-color: transparent !important;
  color: var(--api-secondary) !important;
  border: 2px solid var(--api-secondary) !important;
}

.compare-button:hover,
.button.compare:hover {
  background-color: var(--api-secondary) !important;
  color: var(--api-white) !important;
}

/* ============================================
   MEJORAS HOMEPAGE - OPCIÓN A
   Ajustes de estilos y espaciados optimizados
   Puede revertirse con: git reset --hard HEAD~1
   ============================================ */

/* ===== ESPACIADOS CONSISTENTES ENTRE SECCIONES ===== */

/* Espaciado estándar para secciones */
.page-wrapper>section,
.page-wrapper>.section {
  margin-bottom: 0 !important;
}

/* Gap entre secciones - usando gap en vez de margin para mejor rendimiento */
.page-wrapper {
  display: flex;
  flex-direction: column;
}

/* ===== ANIMACIONES OPTIMIZADAS (GPU-accelerated) ===== */

/* Fade-in para secciones - solo transform y opacity para rendimiento */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Aplicar animación solo en viewport (Intersection Observer nativo del navegador) */
.trust-bar-section,
.api-section-title,
.api-ingredient-card,
.api-value-item,
.api-testimonial-card {
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
}

/* Delays escalonados para efecto cascada ligero */
.api-ingredient-card:nth-child(1) {
  animation-delay: 0.1s;
}

.api-ingredient-card:nth-child(2) {
  animation-delay: 0.2s;
}

.api-ingredient-card:nth-child(3) {
  animation-delay: 0.3s;
}

.api-ingredient-card:nth-child(4) {
  animation-delay: 0.4s;
}


/* ===== MEJORAS DE PADDING RESPONSIVE ===== */

/* Secciones con fondo - padding mejorado */
section[bg_color="#F5F0E8"],
section[bg_color="#5B7C4A"],
.section.dark {
  padding: clamp(40px, 8vw, 80px) 0 !important;
}

/* Trust Bar - padding responsive */
.trust-bar-section {
  padding: clamp(30px, 6vw, 60px) 0;
}

/* Ingredientes y categorías - mejor espaciado en móvil */
@media (max-width: 767px) {

  .api-ingredient-card {
    margin-bottom: 1.5rem;
  }

  .row {
    gap: 1.5rem;
  }
}

/* ===== HOVER STATES MEJORADOS ===== */

/* Trust Bar items - hover sutil */
.trust-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.trust-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(91, 124, 74, 0.15);
}

/* Cards de ingredientes - hover mejorado */
.api-ingredient-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.api-ingredient-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}


/* Testimonios - hover en card */
.api-testimonial-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.api-testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* ===== TÍTULOS DE SECCIONES - MEJORAS ===== */

.api-section-title {
  margin-bottom: clamp(30px, 5vw, 60px);
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

.api-section-title h2 {
  margin-bottom: 1rem;
  line-height: 1.3;
}

.api-section-subtitle {
  max-width: 700px;
  margin: 1rem auto 0;
  line-height: 1.6;
}

/* Divider mejorado */
.api-title-divider {
  margin: 1.5rem auto;
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--api-accent), transparent);
  border-radius: 2px;
}

/* ===== VALUE ITEMS - ESPACIADO ===== */

.api-value-item {
  padding: clamp(20px, 4vw, 40px);
  transition: transform 0.3s ease;
}

.api-value-item:hover {
  transform: translateY(-4px);
}

.api-value-icon {
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease;
}

.api-value-item:hover .api-value-icon {
  transform: scale(1.1);
}

/* ===== BRAND STORY - MEJORADO ===== */

.api-brand-story {
  padding: clamp(20px, 4vw, 40px);
}

.api-quote-box {
  margin-top: 2rem;
  padding: clamp(20px, 4vw, 30px);
  border-left: 4px solid var(--api-accent);
  background: rgba(245, 240, 232, 0.3);
  border-radius: 8px;
}

.api-quote-box blockquote {
  font-style: italic;
  color: var(--api-dark);
  margin-bottom: 1rem;
  line-height: 1.7;
}

.api-quote-box cite {
  display: block;
  color: var(--api-primary);
  font-weight: 600;
  font-style: normal;
}

/* ===== SHOP SHOWCASE - RESPONSIVE ===== */

.api-shop-content {
  padding: clamp(40px, 6vw, 60px);
}

.api-shop-title-white,
.api-shop-title-dark {
  margin-bottom: 1.5rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.2;
}

.api-shop-text-white,
.api-shop-text-dark {
  margin-bottom: 1rem;
  line-height: 1.7;
  font-size: clamp(0.95rem, 2vw, 1.05rem);
}

/* ===== NEWSLETTER - ESPACIADO ===== */

.api-newsletter {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.api-newsletter-title {
  margin-bottom: 1.5rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.api-newsletter-text {
  margin-bottom: 2rem;
  line-height: 1.7;
}

.api-newsletter-badge {
  display: inline-block;
  margin-bottom: 2rem;
  padding: 12px 28px;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }
}

/* ===== GAPS ENTRE ELEMENTOS - CONSISTENCIA ===== */

[gap] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Gap estándar después de títulos */
.api-section-title+[gap] {
  display: block;
  height: clamp(30px, 5vw, 60px);
}

/* ===== RESPONSIVE IMPROVEMENTS ===== */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) and (min-width: 768px) {

  .api-ingredient-card,
  .api-value-item {
    margin-bottom: 2rem;
  }

  .trust-bar-flex {
    gap: 2rem;
  }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {

  /* Deshabilitar animaciones en móvil para mejor rendimiento */
  .trust-bar-section,
  .api-section-title,
  .api-ingredient-card,
  .api-value-item,
  .api-testimonial-card {
    animation: none;
    opacity: 1 !important;
  }

  /* Padding reducido en móvil */
  section[bg_color] {
    padding: 40px 0 !important;
  }

  .api-shop-content {
    padding: 30px 20px;
  }

  /* Títulos más pequeños en móvil */
  .api-section-title h2 {
    font-size: 1.75rem;
  }

  .api-newsletter-title,
  .api-shop-title-white,
  .api-shop-title-dark {
    font-size: 1.5rem;
  }
}

/* ===== OPTIMIZACIONES DE RENDIMIENTO ===== */

/* Contain para aislar repaint/reflow */
.api-ingredient-card,
.api-testimonial-card,
.trust-item {
  contain: layout style paint;
}

/* Will-change solo para elementos que se animan activamente */
.api-ingredient-card:hover,
.trust-item:hover {
  will-change: transform;
}

/* Remover will-change después de la animación */
.api-ingredient-card,
.trust-item {
  will-change: auto;
}

/* ===== SMOOTH SCROLL MEJORADO ===== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  /* Espacio para header sticky */
}

/* ===== FIN DE MEJORAS HOMEPAGE ===== */

/* ============================================
   SOBREESCRIBIR COLORES PRIMARIOS DE FLATSOME
   Para evitar azules en toda la tienda
   ============================================ */

/* Cambiar color primario de Flatsome de azul a verde Api Care */
.primary-color,
.color-primary,
.primary {
  color: var(--api-primary) !important;
}

.bg-primary,
.primary-bg {
  background-color: var(--api-primary) !important;
}

/* Botones primarios en verde */
.button.primary,
.button-primary,
button[type="submit"].primary {
  background-color: var(--api-primary) !important;
  border-color: var(--api-primary) !important;
}

.button.primary:hover,
.button-primary:hover,
button[type="submit"].primary:hover {
  background-color: var(--api-dark) !important;
  border-color: var(--api-dark) !important;
}

/* Enlaces primarios */
a.primary-color,
a.color-primary {
  color: var(--api-primary) !important;
}

a.primary-color:hover,
a.color-primary:hover {
  color: var(--api-dark) !important;
}

/* Badges y etiquetas primarias */
.badge.primary,
.label.primary {
  background-color: var(--api-primary) !important;
  color: var(--api-white) !important;
}

/* Tabs activos */
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
  color: var(--api-primary) !important;
  border-bottom-color: var(--api-accent) !important;
}

/* Iconos primarios */
.icon-primary,
i.primary-color {
  color: var(--api-primary) !important;
}

/* Progress bars y sliders */
.progress-bar,
.ui-slider-range {
  background-color: var(--api-primary) !important;
}

/* ============================================
   EL PODER DE LA COLMENA - GRADIENTE FONDO
   Implementa gradiente del prototipo: beige → blanco
   ============================================ */

/* Target: La sección que contiene el badge de ingredientes estrella */
/* Usamos el contenedor padre del badge */
.api-badge-label {
  /* El badge existe, ahora target su ancestro section */
}

/* Aplicar gradiente a la sección contenedora */
.section.dark-bg {
  background: linear-gradient(to bottom, #F5F0E8 0%, #ffffff 100%) !important;
}

/* Más específico: sección con padding 80px (El Poder de la Colmena) */
.page-wrapper .section.dark-bg[style*="padding: 80px"] {
  background: linear-gradient(to bottom, #F5F0E8 0%, #ffffff 100%) !important;
}

/* Selector universal para todas las secciones beige excepto categorías */
body .section[style*="#F5F0E8"] {
  background: linear-gradient(to bottom, #F5F0E8 0%, #ffffff 100%) !important;
}

/* Evitar que el gradiente afecte a la sección de categorías (tiene padding diferente) */
body .section[style*="#F5F0E8"][style*="padding: 0px 0px 80px 0px"] {
  background-color: #F5F0E8 !important;
  background-image: none !important;
}

/* ============================================
   OPTIMIZACIONES MÓVIL - API CARE
   Mejoras significativas para viewport < 768px
   NO afecta desktop
   ============================================ */

@media (max-width: 767px) {

  /* ===== ESPACIADOS GLOBALES ===== */

  /* Reducir padding de secciones en móvil */
  .section,
  section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  /* Container padding móvil */
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Gap entre secciones */
  .page-wrapper [class*="gap-"] {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }

  /* Hero: sin CSS personalizado - controlado desde shortcodes */

  /* ===== TRUST BAR ===== */

  /* Ya está optimizado, solo ajustes menores */
  .trust-bar-section {
    padding: 30px 20px !important;
  }

  .trust-icon-circle {
    width: 50px !important;
    height: 50px !important;
  }

  .trust-icon-circle svg {
    width: 22px !important;
    height: 22px !important;
  }

  .trust-title {
    font-size: 15px !important;
  }

  .trust-subtitle {
    font-size: 13px !important;
  }

  /* ===== TÍTULOS DE SECCIÓN ===== */

  .api-section-title {
    padding: 0 20px !important;
    margin-bottom: 30px !important;
  }

  .api-section-title h2 {
    font-size: 28px !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
    font-weight: 700 !important;
    color: var(--api-dark) !important;
  }

  /* Divider del título más visible en móvil */
  .api-title-divider {
    width: 80px !important;
    height: 3px !important;
    margin: 15px auto 0 !important;
    display: block !important;
  }

  .api-section-subtitle {
    font-size: 15px !important;
    line-height: 1.6 !important;
    padding: 0 10px !important;
  }

  .api-badge-label {
    font-size: 11px !important;
    padding: 8px 16px !important;
  }

  .api-badge-label svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* ===== EL PODER DE LA COLMENA - INGREDIENTES ===== */

  /* Cards de ingredientes: 1 columna en móvil */
  .api-ingredient-card {
    margin-bottom: 30px !important;
    max-width: 100% !important;
  }

  /* Aspecto más vertical en móvil para mostrar mejor las imágenes */
  .api-ingredient-image {
    aspect-ratio: 3 / 4 !important;
    height: auto !important;
    min-height: unset !important;
  }

  /* Enfocar la parte superior de la imagen donde está el contenido importante */
  .api-ingredient-image img {
    object-position: center 30% !important;
  }

  /* Overlay compacto en móvil - sin espacios innecesarios */
  .api-ingredient-overlay {
    padding: 0.6rem 1rem !important;
  }

  /* Título del ingrediente en móvil */
  .api-ingredient-name {
    font-size: 1.05rem !important;
    margin: 0 0 0.15rem 0 !important;
    line-height: 1.25 !important;
  }

  /* Nombre latino en móvil */
  .api-ingredient-latin {
    font-size: 0.75rem !important;
    margin: 0 !important;
    line-height: 1.1 !important;
  }

  /* Contenido optimizado en móvil */
  .api-ingredient-content {
    padding: 1.25rem !important;
  }

  .api-ingredient-content p {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .api-ingredient-tags span {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  /* ===== CATEGORÍAS ===== */
  /* Manejado por shortcode de Flatsome */

  /* ===== VALUE PROPOSITION (¿Por qué Api Care?) ===== */

  .api-value-item {
    margin-bottom: 30px !important;
    padding: 0 15px !important;
  }

  .api-value-icon {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 15px !important;
  }

  .api-value-icon svg {
    width: 28px !important;
    height: 28px !important;
  }

  .api-value-title {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }

  .api-value-text {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  /* ===== BRAND STORY (Conoce Api Care) ===== */

  .api-brand-story {
    padding: 20px 15px !important;
  }

  .api-brand-title {
    font-size: 26px !important;
    margin-bottom: 15px !important;
  }

  .api-brand-text {
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin-bottom: 15px !important;
  }

  .api-quote-box {
    padding: 20px 15px !important;
    margin: 20px 0 !important;
  }

  .api-quote-box blockquote {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  .api-founder-image {
    max-height: 300px !important;
    margin-bottom: 30px !important;
    object-fit: cover !important;
  }

  /* Badge del fundador en móvil - más pequeño y mejor posicionado */
  .api-founder-badge {
    position: absolute !important;
    bottom: 1rem !important;
    right: 1rem !important;
    padding: 0.75rem 1rem !important;
    min-width: 90px !important;
    border-radius: 8px !important;
  }

  .api-founder-years {
    font-size: 1.75rem !important;
  }

  .api-founder-text {
    font-size: 0.7rem !important;
    line-height: 1.1 !important;
  }

  /* Wrapper del fundador con mejor espaciado */
  .api-founder-wrapper {
    max-width: 100% !important;
    margin: 0 auto 2rem !important;
    padding: 0 15px !important;
  }

  /* Label accent más pequeño */
  .api-label-accent {
    font-size: 0.75rem !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 0.75rem !important;
  }

  /* Quote box con cite más pequeño */
  .api-quote-box cite {
    font-size: 0.8rem !important;
  }

  /* Botones en la sección Nuestra Historia - ancho completo en móvil */
  .api-brand-story~.button,
  .api-brand-story+.button,
  [class*="col"]>.button {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    margin-top: 1rem !important;
  }

  /* Eliminar padding izquierdo de la columna de texto en móvil */
  [class*="col"][padding*="40px"] {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Sección completa de Nuestra Historia con mejor espaciado */
  section[padding*="80px"] {
    padding: 40px 0 !important;
  }

  /* ===== SHOP SHOWCASE ===== */

  .api-shop-content {
    padding: 30px 20px !important;
  }

  .api-shop-title-white,
  .api-shop-title-dark {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
  }

  .api-shop-text-white,
  .api-shop-text-dark {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 12px !important;
  }

  .api-shop-highlight {
    font-size: 15px !important;
  }

  /* ===== TESTIMONIOS ===== */

  .api-testimonial-card {
    padding: 30px 20px !important;
    margin: 0 10px !important;
  }

  .api-testimonial-avatar-wrapper {
    margin-bottom: 20px !important;
  }

  .api-testimonial-avatar {
    width: 70px !important;
    height: 70px !important;
  }

  .api-testimonial-stars {
    font-size: 20px !important;
    margin-bottom: 15px !important;
  }

  .api-testimonial-text {
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
  }

  .api-testimonial-info h4 {
    font-size: 16px !important;
  }

  .api-testimonial-info p {
    font-size: 14px !important;
  }

  .api-verified {
    font-size: 12px !important;
  }

  /* Flechas de navegación más pequeñas en móvil */
  .section:has(.api-testimonial-card) .flickity-button {
    width: 40px !important;
    height: 40px !important;
  }

  /* ===== NEWSLETTER ===== */

  .api-newsletter {
    padding: 30px 20px !important;
  }

  .api-newsletter-title {
    font-size: 24px !important;
    line-height: 1.3 !important;
    margin-bottom: 15px !important;
  }

  .api-newsletter-text {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
  }

  .api-newsletter-badge {
    font-size: 14px !important;
    padding: 10px 20px !important;
  }

  /* Formulario de newsletter */
  .api-newsletter input[type="email"] {
    font-size: 15px !important;
    padding: 12px 15px !important;
    margin-bottom: 15px !important;
  }

  .api-newsletter button,
  .api-newsletter .button {
    font-size: 15px !important;
    padding: 12px 25px !important;
    width: 100% !important;
  }

  /* ===== BOTONES GLOBALES ===== */

  .button,
  .btn {
    font-size: 14px !important;
    padding: 12px 24px !important;
  }

  .button.large,
  .button[size="large"] {
    font-size: 15px !important;
    padding: 14px 28px !important;
  }

  /* ===== TABS DE PRODUCTOS ===== */

  .tab-panels .tab-panel {
    padding: 20px 10px !important;
  }

  .nav-tabs li {
    margin: 0 5px !important;
  }

  .nav-tabs li a {
    font-size: 14px !important;
    padding: 10px 15px !important;
  }

  /* Footer: sin CSS personalizado - controlado desde Customizer y UX Block */

  /* ===== MEJORAS DE LEGIBILIDAD ===== */

  /* Aumentar line-height general en móvil */
  body,
  p,
  li {
    line-height: 1.7 !important;
  }

  /* Mejor espaciado entre párrafos */
  p+p {
    margin-top: 15px !important;
  }

  /* Links más grandes para mejor touch target */
  a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* ===== IMÁGENES RESPONSIVE ===== */

  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ===== OCULTAR ELEMENTOS INNECESARIOS EN MÓVIL ===== */

  /* Ocultar animaciones complejas en móvil */
  .api-ingredient-card,
  .api-value-item {
    animation: none !important;
  }

  /* Reducir sombras para mejor rendimiento */
  .box-shadow,
  .shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  }

}

/* ===== MEDIA QUERY ADICIONAL: MÓVILES MUY PEQUEÑOS ===== */
@media (max-width: 374px) {

  /* Ajustes para iPhone SE, Galaxy Fold, etc. */
  .api-section-title h2 {
    font-size: 24px !important;
  }

  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Productos en 1 columna en pantallas muy pequeñas */
  .row.large-columns-4,
  .row.small-columns-2,
  .products {
    justify-content: center !important;
  }

  .row.large-columns-4>.col,
  .row.small-columns-2>.col,
  .products .product-small,
  .products .col {
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto 20px !important;
  }

  .trust-item {
    padding: 15px !important;
  }

  /* Badge fundador aún más compacto */
  .api-founder-badge {
    bottom: 0.5rem !important;
    right: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    min-width: 80px !important;
  }

  .api-founder-years {
    font-size: 1.5rem !important;
  }

  .api-founder-text {
    font-size: 0.65rem !important;
  }

  /* Título de la sección más pequeño */
  .api-brand-title {
    font-size: 22px !important;
  }

  /* Quote box más compacto */
  .api-quote-box {
    padding: 15px 12px !important;
    margin: 15px 0 !important;
  }

  .api-quote-box blockquote {
    font-size: 14px !important;
  }

}

/* ===== MEDIA QUERY: MÓVILES PEQUEÑOS (480px) ===== */
@media (max-width: 480px) {

  /* Sección Nuestra Historia - optimizaciones adicionales */
  .api-founder-wrapper {
    padding: 0 10px !important;
  }

  .api-founder-image {
    max-height: 280px !important;
    border-radius: 0.75rem !important;
  }

  .api-brand-story {
    padding: 15px 10px !important;
  }

  .api-brand-title {
    font-size: 24px !important;
  }

  .api-brand-text {
    font-size: 14px !important;
  }

  /* Badge con mejor visibilidad */
  .api-founder-badge {
    bottom: 0.75rem !important;
    right: 0.75rem !important;
    padding: 0.6rem 0.9rem !important;
  }

  /* Botones con padding optimizado */
  .api-brand-story~.button,
  .api-brand-story+.button {
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

}

/* ===== SHOP SHOWCASE - SECCIONES "CONOCE NUESTROS PRODUCTOS" Y "API CARE COSMÉTICA NATURAL" ===== */

/* Estilos para las filas que contienen .api-shop-content */
.api-shop-content {
  max-width: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Contenedor de las filas del shop showcase */
.row:has(.api-shop-content),
.row:has(.api-shop-title-white),
.row:has(.api-shop-title-dark) {
  min-height: 500px;
  display: flex;
  align-items: stretch;
}

/* Columnas dentro de estas filas */
.row:has(.api-shop-content)>.col,
.row:has(.api-shop-title-white)>.col,
.row:has(.api-shop-title-dark)>.col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 500px;
  align-items: stretch;
}

/* Columnas que contienen solo imágenes (sin padding) */
.row:has(.api-shop-content)>.col:has(.ux_image),
.row:has(.api-shop-title-white)>.col:has(.ux_image),
.row:has(.api-shop-title-dark)>.col:has(.ux_image) {
  padding: 0 !important;
  overflow: hidden;
}

/* Imágenes dentro de estas columnas deben llenar todo el espacio */
.row:has(.api-shop-content) .ux_image,
.row:has(.api-shop-title-white) .ux_image,
.row:has(.api-shop-title-dark) .ux_image {
  height: 100%;
  min-height: 500px;
  position: relative;
}

.row:has(.api-shop-content) .img-inner,
.row:has(.api-shop-title-white) .img-inner,
.row:has(.api-shop-title-dark) .img-inner {
  height: 100%;
  min-height: 500px;
}

.row:has(.api-shop-content) .ux_image img,
.row:has(.api-shop-title-white) .ux_image img,
.row:has(.api-shop-title-dark) .ux_image img {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Fallback para navegadores que no soportan :has() */
@supports not (selector(:has(*))) {

  /* Usar clases directas en las filas */
  .shop-showcase-section .row {
    min-height: 500px;
  }

  .shop-showcase-section .row>.col {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .shop-showcase-section .ux_image,
  .shop-showcase-section .img-inner {
    height: 100%;
    min-height: 500px;
  }

  .shop-showcase-section .ux_image img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
  }
}

/* Responsive - Tablet (768px - 991px) */
@media (max-width: 991px) {

  .row:has(.api-shop-content),
  .row:has(.api-shop-title-white),
  .row:has(.api-shop-title-dark) {
    min-height: 400px;
  }

  .row:has(.api-shop-content)>.col,
  .row:has(.api-shop-title-white)>.col,
  .row:has(.api-shop-title-dark)>.col {
    min-height: 400px;
  }

  .row:has(.api-shop-content) .ux_image,
  .row:has(.api-shop-content) .img-inner,
  .row:has(.api-shop-content) .ux_image img,
  .row:has(.api-shop-title-white) .ux_image,
  .row:has(.api-shop-title-white) .img-inner,
  .row:has(.api-shop-title-white) .ux_image img,
  .row:has(.api-shop-title-dark) .ux_image,
  .row:has(.api-shop-title-dark) .img-inner,
  .row:has(.api-shop-title-dark) .ux_image img {
    min-height: 400px;
  }
}

/* Responsive - Móvil (menos de 768px) */
@media (max-width: 767px) {

  .row:has(.api-shop-content),
  .row:has(.api-shop-title-white),
  .row:has(.api-shop-title-dark) {
    min-height: auto;
    flex-direction: column;
  }

  .row:has(.api-shop-content)>.col,
  .row:has(.api-shop-title-white)>.col,
  .row:has(.api-shop-title-dark)>.col {
    min-height: auto;
  }

  .row:has(.api-shop-content) .ux_image,
  .row:has(.api-shop-content) .img-inner,
  .row:has(.api-shop-title-white) .ux_image,
  .row:has(.api-shop-title-white) .img-inner,
  .row:has(.api-shop-title-dark) .ux_image,
  .row:has(.api-shop-title-dark) .img-inner {
    min-height: 300px;
    height: 300px;
  }

  .row:has(.api-shop-content) .ux_image img,
  .row:has(.api-shop-title-white) .ux_image img,
  .row:has(.api-shop-title-dark) .ux_image img {
    min-height: 300px;
    height: 300px;
  }
}

/* ===== FIN OPTIMIZACIONES MÓVIL ===== */

/* ============================================
   AJUSTE DE ANCHO - SLIDER DE TESTIMONIOS
   Para que ocupe el mismo ancho que las demás secciones
   ============================================ */

/* Contenedor del slider de testimonios */
.section:has(.api-testimonial-card) .ux_slider,
.section:has(.api-testimonial-card) .slider-wrapper {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* Ajuste en tablets */
@media (max-width: 992px) {

  .section:has(.api-testimonial-card) .ux_slider,
  .section:has(.api-testimonial-card) .slider-wrapper {
    max-width: 900px;
  }
}

/* Full width en móvil */
@media (max-width: 768px) {

  .section:has(.api-testimonial-card) .ux_slider,
  .section:has(.api-testimonial-card) .slider-wrapper {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* ============================================
   API Care - Ocultar mensajes de puntos en carrito
   Plugin: Points and Rewards for WooCommerce (WP Swings)
   Fecha: Marzo 2026
   Nota: Se ocultan temporalmente para lanzamiento limpio.
   Para reactivar, eliminar o comentar estas reglas.
   ============================================ */

/* Mensaje 1: "Aquí está la regla de descuento..." */
.wps_wpr_cart_redemption__notice {
    display: none !important;
}

/* Mensajes 2 y 3: "Haz un pedido y gana puntos..." + "Recibirá 10 puntos..." */
#wps_wpr_order_notice {
    display: none !important;
}

/* Campos ocultos del plugin */
.wps_rwpr_settings_display_none_notice {
    display: none !important;
}

/* Enlace "Add a points" en el resumen del carrito */
#wps_wpr_button_to_add_points_section {
    display: none !important;
}