/*
 Theme Name:   Naturalisima Child
 Template:     generatepress
 Description:  Tema hijo con correcciones de la Guia Maestra v2.0
 Author:       Antigravity
 Version:      2.0.0
*/

/* ============================================
   TOKENS DE DISEÃ'O â?" Guía Maestra v2.0
   ============================================ */
:root {
  /* Paleta Principal */
  --nat-primario:       #2D5A27;
  --nat-primario-claro: #3A7A32;
  --nat-primario-suave: rgba(45, 90, 39, 0.08);
  --nat-secundario:     #2F6F23;
  --nat-texto:          #1C1C1C;
  --nat-texto-suave:    #555555;
  --nat-acento:         #E8941A;
  --nat-acento-hover:   #D4820F;
  --nat-fondo:          #FFFFFF;
  --nat-fondo-claro:    #F7FAF6;
  --nat-borde:          rgba(45, 90, 39, 0.15);
  --nat-borde-hover:    rgba(45, 90, 39, 0.35);
  --nat-sombra:         0 2px 8px rgba(0, 0, 0, 0.06);
  --nat-sombra-hover:   0 8px 24px rgba(45, 90, 39, 0.12);
  --nat-sombra-boton:   0 4px 14px rgba(232, 148, 26, 0.35);

  /* Transiciones */
  --nat-transicion-rapida:  180ms cubic-bezier(0.4, 0, 0.2, 1);
  --nat-transicion-media:   300ms cubic-bezier(0.4, 0, 0.2, 1);
  --nat-transicion-suave:   400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Bordes */
  --nat-radio-sm:  6px;
  --nat-radio-md:  10px;
  --nat-radio-lg:  14px;
  --nat-radio-xl:  20px;
  --nat-radio-full: 50px;
}

/* ============================================
   1. TIPOGRAFÍA GLOBAL
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

body {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  color: var(--nat-texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   2. CABECERA / HEADER
   ============================================ */

/* Logo */
.site-branding, .site-logo, .custom-logo-link {
  max-width: 250px !important;
  width: auto;
  overflow: visible !important;
}
.custom-logo {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Buscador del header */
.site-header input[type="search"],
.site-header .search-field,
header input[type="search"],
header .search-field {
  border: 1.5px solid var(--nat-borde) !important;
  border-radius: var(--nat-radio-full) !important;
  padding: 8px 18px !important;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  transition: all var(--nat-transicion-rapida);
  background-color: var(--nat-fondo) !important;
  outline: none !important;
}
.site-header input[type="search"]:focus,
.site-header .search-field:focus,
header input[type="search"]:focus,
header .search-field:focus {
  border-color: var(--nat-primario-claro) !important;
  box-shadow: 0 0 0 3px var(--nat-primario-suave) !important;
}

/* Ícono del carrito */
.shopping-cart .number-of-items,
.cart-contents .count,
.woocommerce .cart-contents span {
  background-color: var(--nat-acento) !important;
  border-radius: 50% !important;
  font-weight: 600;
}

/* ============================================
   3. MENÃs PRINCIPAL DE NAVEGACIÃ"N
   ============================================ */
.main-navigation ul,
.menu ul {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.main-navigation a,
.menu a {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding: 8px 16px !important;
  border-radius: var(--nat-radio-md) !important;
  transition: all var(--nat-transicion-rapida);
  position: relative;
}

.main-navigation a:hover,
.menu a:hover {
  color: var(--nat-acento) !important;
  background-color: var(--nat-primario-suave) !important;
}

/* Indicador de página activa */
.main-navigation .current-menu-item > a,
.menu .current-menu-item > a {
  color: var(--nat-acento) !important;
  font-weight: 600;
}
.main-navigation .current-menu-item > a::after,
.menu .current-menu-item > a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 3px;
  background-color: var(--nat-acento);
  border-radius: 2px;
}

/* Quitar el recuadro duro del item "Tienda" y similares */
.main-navigation .menu-item a,
.menu .menu-item a {
  border: none !important;
  box-shadow: none !important;
}

/* ============================================
   4. TARJETAS DE PRODUCTO (WooCommerce)
   ============================================ */
.woocommerce ul.products li.product,
ul.products li.product,
.wc-block-grid__product {
  border: 1.5px solid var(--nat-borde) !important;
  border-radius: var(--nat-radio-lg) !important;
  padding: 12px !important;
  background: var(--nat-fondo) !important;
  box-shadow: var(--nat-sombra) !important;
  transition: all var(--nat-transicion-media) !important;
  overflow: hidden;
}

.woocommerce ul.products li.product:hover,
ul.products li.product:hover,
.wc-block-grid__product:hover {
  border-color: var(--nat-borde-hover) !important;
  box-shadow: var(--nat-sombra-hover) !important;
  transform: translateY(-4px);
}

/* Imagen del producto en la card */
.woocommerce ul.products li.product img,
ul.products li.product img,
.wc-block-grid__product-image img {
  border-radius: var(--nat-radio-md) !important;
  transition: transform var(--nat-transicion-media);
}
.woocommerce ul.products li.product:hover img,
ul.products li.product:hover img {
  transform: scale(1.03);
}

/* Título del producto en la card */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: var(--nat-texto) !important;
  margin-top: 10px !important;
  line-height: 1.35 !important;
}

/* Precio del producto */
.woocommerce ul.products li.product .price,
ul.products li.product .price,
.wc-block-grid__product-price {
  color: var(--nat-primario) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin-top: 4px !important;
}

/* ============================================
   5. BOTONES â?" Estilo unificado
   ============================================ */

/* Botón "Añadir al carrito" */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
a.add_to_cart_button,
.add_to_cart_button,
button.single_add_to_cart_button,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: var(--nat-acento) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--nat-radio-md) !important;
  padding: 10px 22px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all var(--nat-transicion-rapida) !important;
  text-transform: none !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
a.add_to_cart_button:hover,
.add_to_cart_button:hover,
button.single_add_to_cart_button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: var(--nat-acento-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--nat-sombra-boton) !important;
}

.woocommerce a.button:active,
.add_to_cart_button:active,
button.single_add_to_cart_button:active {
  transform: translateY(0) scale(0.97) !important;
  box-shadow: none !important;
}

/* Botón WhatsApp (estilos complementarios) */
a[href*="whatsapp"],
a[href*="wa.me"],
.whatsapp-button {
  border-radius: var(--nat-radio-md) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  transition: all var(--nat-transicion-rapida) !important;
}
a[href*="whatsapp"]:hover,
a[href*="wa.me"]:hover,
.whatsapp-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3) !important;
}

/* ============================================
   6. BUSCADOR CENTRAL (en la grid de productos)
   ============================================ */
.dgwt-wcas-search-wrapp input[type="search"],
.woocommerce-product-search input[type="search"],
input.dgwt-wcas-search-input {
  border: 1.5px solid var(--nat-borde) !important;
  border-radius: var(--nat-radio-full) !important;
  padding: 12px 24px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  transition: all var(--nat-transicion-rapida) !important;
  box-shadow: var(--nat-sombra) !important;
}
.dgwt-wcas-search-wrapp input[type="search"]:focus,
.woocommerce-product-search input[type="search"]:focus,
input.dgwt-wcas-search-input:focus {
  border-color: var(--nat-primario-claro) !important;
  box-shadow: 0 0 0 3px var(--nat-primario-suave), var(--nat-sombra) !important;
  outline: none !important;
}

/* ============================================
   7. PAGINACIÃ"N
   ============================================ */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
nav.woocommerce-pagination ul li a,
nav.woocommerce-pagination ul li span,
.page-numbers li a,
.page-numbers li span {
  border: 1.5px solid var(--nat-borde) !important;
  border-radius: var(--nat-radio-sm) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  margin: 0 3px !important;
  transition: all var(--nat-transicion-rapida) !important;
  color: var(--nat-texto) !important;
  background: var(--nat-fondo) !important;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
nav.woocommerce-pagination ul li a:hover,
.page-numbers li a:hover {
  background-color: var(--nat-primario-suave) !important;
  border-color: var(--nat-primario-claro) !important;
  color: var(--nat-primario) !important;
}

/* Página activa */
.woocommerce nav.woocommerce-pagination ul li span.current,
nav.woocommerce-pagination ul li span.current,
.page-numbers li .current {
  background-color: var(--nat-primario) !important;
  border-color: var(--nat-primario) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* ============================================
   8. PÁGINA DE PRODUCTO INDIVIDUAL
   ============================================ */

/* Breadcrumbs */
.woocommerce-breadcrumb,
.breadcrumb,
nav.woocommerce-breadcrumb {
  font-size: 13px !important;
  color: var(--nat-texto-suave) !important;
  font-family: 'Montserrat', sans-serif !important;
  padding: 12px 0 !important;
}
.woocommerce-breadcrumb a {
  color: var(--nat-primario-claro) !important;
  text-decoration: none !important;
  transition: color var(--nat-transicion-rapida);
}
.woocommerce-breadcrumb a:hover {
  color: var(--nat-acento) !important;
}

/* Tabs del producto (Descripción, etc.) */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs li {
  border-radius: var(--nat-radio-md) var(--nat-radio-md) 0 0 !important;
  border: 1.5px solid var(--nat-borde) !important;
  border-bottom: none !important;
  transition: all var(--nat-transicion-rapida) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce-tabs ul.tabs li.active {
  background-color: var(--nat-fondo) !important;
  border-bottom: 2px solid var(--nat-fondo) !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  color: var(--nat-texto-suave) !important;
  font-size: 14px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--nat-primario) !important;
  font-weight: 600 !important;
}

/* Imagen del producto */
.woocommerce div.product div.images img,
.woocommerce-product-gallery img {
  border-radius: var(--nat-radio-lg) !important;
  box-shadow: var(--nat-sombra) !important;
}

/* Cantidad input */
.woocommerce .quantity input.qty {
  border: 1.5px solid var(--nat-borde) !important;
  border-radius: var(--nat-radio-sm) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  padding: 8px !important;
  width: 60px !important;
  text-align: center !important;
}

/* Precio en página individual */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--nat-primario) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  font-family: 'Montserrat', sans-serif !important;
}

/* ============================================
   9. FOOTER
   ============================================ */
.site-footer,
footer.site-footer,
#footer {
  border-top: 3px solid var(--nat-primario) !important;
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--nat-primario), var(--nat-acento), var(--nat-primario));
}

/* ============================================
   10. PLACEHOLDER DE IMÁGENES FALTANTES
   ============================================ */
.woocommerce ul.products li.product img.wp-post-image[src*="placeholder"],
img.wp-post-image[src*="woocommerce-placeholder"] {
  background: linear-gradient(135deg, var(--nat-fondo-claro) 0%, #e8f0e6 100%) !important;
  border: 1.5px dashed var(--nat-borde) !important;
  border-radius: var(--nat-radio-md) !important;
  object-fit: contain;
  padding: 20px !important;
}

/* ============================================
   11. ANIMACIONES DE ENTRADA (Fade-in al scroll)
   ============================================ */
.nat-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--nat-transicion-suave), transform var(--nat-transicion-suave);
}
.nat-fade-in.nat-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   12. OCULTAR PLACEHOLDERS EN NOSOTROS
   ============================================ */
.page-id-nosotros img[src*="placeholder"],
img[src*="logoipsum"] {
  display: none !important;
}

/* ============================================
   13. RESPONSIVE â?" Ajustes móviles
   ============================================ */
@media (max-width: 768px) {
  .woocommerce ul.products li.product,
  ul.products li.product {
    border-radius: var(--nat-radio-md) !important;
    padding: 8px !important;
  }

  .woocommerce a.button,
  .add_to_cart_button,
  a.add_to_cart_button {
    padding: 8px 16px !important;
    font-size: 13px !important;
    width: 100% !important;
    text-align: center !important;
  }

  .main-navigation a,
  .menu a {
    font-size: 14px !important;
    padding: 6px 12px !important;
  }

  /* ===== FIX: Botones de producto en móvil (Añadir al carrito + WhatsApp) ===== */
  /* Hacer que los botones se apilen verticalmente */
  .woocommerce div.product form.cart,
  .woocommerce div.product .cart {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  /* Input de cantidad */
  .woocommerce div.product form.cart .quantity {
    width: 80px !important;
    flex-shrink: 0 !important;
  }

  /* Botón Añadir al carrito en producto individual */
  .woocommerce div.product form.cart .single_add_to_cart_button,
  button.single_add_to_cart_button {
    flex: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
  }

  /* Botón WhatsApp de Chat to Order / cualquier plugin */
  .woocommerce div.product form.cart + a[href*="wa.me"],
  .woocommerce div.product form.cart + . suspended-btn,
  .woocommerce div.product .summary a[href*="wa.me"],
  .woocommerce div.product .summary .ctob_btn,
  .woocommerce div.product .summary [class*="whatsapp"],
  .woocommerce div.product .summary [class*="chat-to-order"],
  .woocommerce div.product .cart ~ a[href*="wa.me"],
  .woocommerce div.product a.ctob_btn,
  a.ctob_btn,
  .ctob_btn {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    white-space: normal !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin-top: 6px !important;
    gap: 6px !important;
    line-height: 1.3 !important;
    min-height: 44px !important;
  }

  /* Asegurar que la sección de relacionados esté al final */
  .nat-relacionados {
    padding: 2rem 1rem !important;
    margin-top: 2rem !important;
  }
  /* ===== FIX: Botones de producto en móvil (Añadir al carrito + WhatsApp) ===== */
  /* Hacer que los botones se apilen verticalmente con MUCHA especificidad */
  body.single-product #page .woocommerce div.product form.cart,
  body.single-product .site-content .woocommerce div.product form.cart {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: stretch !important;
    clear: both !important;
  }

  body.single-product #page .woocommerce div.product form.cart .quantity {
    width: 80px !important;
    flex-shrink: 0 !important;
  }

  body.single-product #page .woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
  }

  /* Botón WhatsApp: forzar 100% ancho y abajo del carrito.
     Agregamos las clases exactas del plugin que genera el botón en el DOM */
  body.single-product #page .woocommerce div.product form.cart + a[href*="wa.me"],
  body.single-product #page .woocommerce div.product .summary a[href*="wa.me"],
  body.single-product #page a.ctob_btn,
  body.single-product a.whatsapp-btn,
  body.single-product .wa-order-btn,
  body.single-product .wa-order-class,
  body.single-product .wa-order-button,
  form.cart .wa-order-class,
  .wa-order-button {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    white-space: normal !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin-top: 10px !important;
    clear: both !important;
  }

  /* Asegurar que la sección de relacionados esté al final */
  body.single-product .nat-relacionados {
    padding: 2rem 1rem !important;
    margin-top: 2rem !important;
    clear: both !important;
    width: 100% !important;
  }
}

/* ============================================================
   CHECKOUT PERSONALIZADO - Naturalisima v1.0
   ============================================================ */

/* --- Pregunta de entrega --- */
.pregunta-entrega {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2D5A27;
    margin: 20px 0 12px;
    padding-top: 10px;
}

/* --- Contenedor de tarjetas de método --- */
.opciones-entrega {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

/* --- Tarjeta individual --- */
.opcion-entrega {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
    border: 2px solid rgba(45, 90, 39, 0.2);
    border-radius: 12px;
    cursor: pointer;
    background: #fff;
    transition: all 200ms ease;
    text-align: center;
    user-select: none;
}

.opcion-entrega:hover {
    border-color: #2D5A27;
    background: #F7FAF6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(45, 90, 39, 0.12);
}

.opcion-entrega.seleccionado {
    border-color: #2D5A27;
    background: #eaf3e8;
    box-shadow: 0 4px 14px rgba(45, 90, 39, 0.18);
    transform: translateY(-2px);
}

.opcion-entrega .icono {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 6px;
}

.opcion-entrega .titulo {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1C1C1C;
    display: block;
    line-height: 1.2;
}

.opcion-entrega .subtitulo {
    font-size: 0.76rem;
    color: #666;
    display: block;
    margin-top: 3px;
}

/* --- Mensaje de info de envío --- */
#envio-mensaje {
    background: #F7FAF6;
    border-left: 3px solid #2D5A27;
    border-radius: 0 8px 8px 0;
    padding: 10px 14px;
    font-size: 0.88rem;
    color: #555;
    margin: 0 0 20px;
}

/* --- Botón WhatsApp finalizar pedido --- */
.btn-whatsapp-checkout,
#btn-whatsapp-finalizar {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
    margin-top: 16px;
    background: linear-gradient(135deg, #25D366, #1DA851);
    color: #fff !important;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 200ms ease;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
    gap: 8px;
    white-space: normal;
    line-height: 1.3;
    text-align: center;
}

.btn-whatsapp-checkout:hover,
#btn-whatsapp-finalizar:hover {
    background: linear-gradient(135deg, #20c55e, #189a47);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.45);
    color: #fff !important;
}

/* --- Responsive móvil --- */
@media (max-width: 600px) {
    .opciones-entrega {
        flex-direction: column;
        gap: 8px;
    }
    .opcion-entrega {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 12px 14px;
        text-align: left;
    }
    .opcion-entrega .icono {
        font-size: 1.5rem;
        margin-bottom: 0;
    }
}

/* ============================================================
   TABLA DE PEDIDO EN CHECKOUT - Naturalisima v2.0
   ============================================================ */

/* Imagen miniatura del producto */
.checkout-product-img {
    width: 52px !important;
    height: 52px !important;
    object-fit: contain !important;
    background: #F7FAF6 !important;
    border-radius: 8px !important;
    padding: 4px !important;
    margin-right: 10px !important;
    vertical-align: middle !important;
    border: none !important;
}

.checkout-product-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Tabla general */
.woocommerce-checkout-review-order-table {
    border: 1px solid rgba(45,90,39,0.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
    overflow: hidden;
    width: 100%;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

/* Celdas */
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(45,90,39,0.08) !important;
    font-size: 0.95rem;
    vertical-align: middle;
}

/* Encabezados */
.woocommerce-checkout-review-order-table thead th {
    font-family: 'Montserrat', sans-serif;
    color: #2D5A27;
    background: #F7FAF6;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

/* Fila de total */
.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total th {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #2D5A27;
    border-top: 2px solid #E8941A !important;
}

/* Ocultar botón nativo de pago con seguridad extra */
.wc-proceed-to-checkout,
.woocommerce-checkout .checkout-button,
#place_order {
    display: none !important;
}

/* ============================================================
   NUEVO CHECKOUT (TEMPLATE COMPLETO)
   ============================================================ */
:root {
  --verde-primario: #2D5A27;
  --verde-claro: #3A7A32;
  --naranja-acento: #E8941A;
  --naranja-hover: #D4820F;
  --texto: #1C1C1C;
  --texto-suave: #555555;
  --fondo: #FFFFFF;
  --fondo-claro: #F7FAF6;
  --fuente-titulo: 'Montserrat', system-ui, sans-serif;
  --fuente-cuerpo: 'Inter', system-ui, sans-serif;
  --sombra-sm: 0 1px 2px rgba(28, 28, 28, 0.05);
  --sombra-md: 0 4px 12px rgba(28, 28, 28, 0.08);
  --sombra-lg: 0 8px 24px rgba(28, 28, 28, 0.10);
  --sombra-acento: 0 4px 14px rgba(232, 148, 26, 0.35);
  --radio-sm: 6px;
  --radio-md: 12px;
  --radio-lg: 20px;
  --radio-pill: 999px;
  --transicion: 180ms ease;
}

.checkout-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  font-family: var(--fuente-cuerpo);
  font-size: 16px;
  color: var(--texto);
  background: var(--fondo-claro);
  line-height: 1.6;
}

.checkout-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.checkout-header .logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--verde-primario);
  text-decoration: none;
}
.checkout-header .logo:hover { color: var(--naranja-acento); }

.checkout-header .pasos {
  display: flex;
  gap: 1.5rem;
  font-size: 0.85rem;
  color: var(--texto-suave);
}
.checkout-header .pasos span.activo { color: var(--naranja-acento); font-weight: 700; }
.checkout-header .pasos span.completado { color: var(--verde-primario); }

.pregunta-entrega {
  font-family: var(--fuente-titulo);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--verde-primario);
  margin-bottom: 1.2rem;
}

.opciones-entrega {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (max-width: 700px) {
  .opciones-entrega { grid-template-columns: 1fr; }
}

.opcion-entrega {
  background: var(--fondo);
  border: 2px solid rgba(45, 90, 39, 0.12);
  border-radius: var(--radio-md);
  padding: 1.5rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--transicion);
}

.opcion-entrega:hover {
  border-color: var(--verde-claro);
  background: rgba(45, 90, 39, 0.03);
}

.opcion-entrega.seleccionado {
  border-color: var(--verde-claro);
  background: rgba(45, 90, 39, 0.06);
  box-shadow: 0 0 0 4px rgba(45, 90, 39, 0.15);
}

.opcion-entrega .icono {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.opcion-entrega .titulo {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  color: var(--verde-primario);
  font-size: 1.05rem;
}

.opcion-entrega .subtitulo {
  font-size: 0.8rem;
  color: var(--texto-suave);
  margin-top: 0.3rem;
}

.checkout-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2rem;
}

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

.checkout-grid .card {
  background: var(--fondo);
  border: 1px solid rgba(45, 90, 39, 0.10);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-sm);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

.checkout-grid .section-title {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--verde-primario);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.checkout-grid .section-title::before {
  content: '';
  width: 4px;
  height: 1.2rem;
  background: var(--naranja-acento);
  border-radius: 2px;
}

.checkout-grid .form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (max-width: 480px) {
  .checkout-grid .form-row { grid-template-columns: 1fr; }
}

.checkout-grid .field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.checkout-grid .field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--texto);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.checkout-grid .field input, 
.checkout-grid .field select, 
.checkout-grid .field textarea {
  padding: 0.75rem 1rem;
  border: 1.5px solid rgba(45, 90, 39, 0.15);
  border-radius: var(--radio-sm);
  font-size: 0.95rem;
  font-family: var(--fuente-cuerpo);
  transition: var(--transicion);
  background: var(--fondo);
  width: 100%;
}

.checkout-grid .field input:focus, 
.checkout-grid .field select:focus, 
.checkout-grid .field textarea:focus {
  outline: none;
  border-color: var(--verde-claro);
  box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.08);
}

.resumen {
  background: var(--fondo);
  border: 1px solid rgba(45, 90, 39, 0.10);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-sm);
  padding: 2rem;
  position: relative;
}

@media (min-width: 901px) {
  .resumen {
    position: sticky;
    top: 2rem;
  }
}

.resumen-titulo {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--verde-primario);
  margin-bottom: 1.2rem;
}

.resumen-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(45, 90, 39, 0.08);
}

.resumen-item:last-of-type { border-bottom: none; }

.resumen-item img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: var(--fondo-claro);
  border-radius: var(--radio-sm);
  padding: 4px;
}

.resumen-item-info { flex: 1; font-size: 0.9rem; }
.resumen-item-info strong { font-family: var(--fuente-titulo); }
.resumen-item-precio {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  color: var(--verde-primario);
}

.resumen-totales {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 2px solid var(--naranja-acento);
}

.resumen-linea {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
}

.resumen-linea.total {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--verde-primario);
  margin-top: 0.8rem;
}

.envio-gratis { color: var(--verde-claro); font-weight: 700; }

.confianza {
  background: linear-gradient(135deg, #F7FAF6 0%, #e8f0e6 100%);
  border: 1px solid rgba(45, 90, 39, 0.10);
  border-radius: var(--radio-md);
  padding: 1.2rem;
  margin-top: 1.5rem;
}

.confianza-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--texto-suave);
}

.confianza-item { display: flex; align-items: center; gap: 0.4rem; }

.terminos {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1.2rem 0;
  font-size: 0.78rem;
  color: var(--texto-suave);
}

.terminos a { color: var(--verde-primario); font-weight: 600; }
.terminos input[type="checkbox"] { accent-color: var(--naranja-acento); margin-top: 3px; }

.btn-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1rem;
  background: #25D366;
  color: white;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.05rem;
  border: none;
  border-radius: var(--radio-md);
  text-decoration: none;
  transition: var(--transicion);
  margin-top: 1rem;
  cursor: pointer;
  z-index: 100;
  position: relative;
}

.btn-whatsapp:hover { background: #1FB658; transform: translateY(-1px); }

.campo-oculto { display: none !important; }
.campo-visible { display: flex !important; flex-direction: column; }

/* ============================================================
   CROSS-SELLS DINAMICOS
   ============================================================ */
.cross-sells {
  margin-top: 2rem;
}
.cross-sells-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 600px) {
  .cross-sells-grid { grid-template-columns: 1fr; }
}
.cross-sell-item {
  background: var(--fondo);
  border: 1px solid rgba(45, 90, 39, 0.10);
  border-radius: var(--radio-md);
  padding: 1.25rem 1rem;
  text-align: center;
  transition: var(--transicion);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: var(--sombra-sm);
}
.cross-sell-item:hover {
  border-color: var(--verde-claro);
  box-shadow: var(--sombra-md);
}
.cross-sell-img {
  margin-bottom: 0.8rem;
}
.cross-sell-img img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  margin: 0 auto;
  border-radius: var(--radio-sm);
  background: var(--fondo-claro);
  padding: 6px;
  border: 1px solid rgba(45, 90, 39, 0.05);
}
.cross-sell-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--texto);
  margin-bottom: 0.4rem;
  line-height: 1.3;
  font-family: var(--fuente-titulo);
}
.cross-sell-price {
  color: var(--verde-primario);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 1rem;
}
.btn-agregar {
  display: inline-block;
  background: var(--verde-primario);
  color: white;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radio-pill);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transicion);
  width: 100%;
  font-family: var(--fuente-titulo);
}
.btn-agregar:hover {
  background: var(--naranja-acento);
  color: white;
  transform: translateY(-2px);
}
.btn-agregar.loading::after {
  content: '...';
}
.btn-agregar.added::after {
  content: ' ✓';
}

/* ============================================================
   CROSS-SELLS DINAMICOS - DROPDOWN Opciones
   ============================================================ */
.cross-sell-dropdown-container {
  position: relative;
  width: 100%;
}
.btn-opciones {
  width: 100%;
  cursor: default;
  display: block;
  text-align: center;
}
.cross-sell-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--fondo);
  border: 1px solid rgba(45, 90, 39, 0.15);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: all var(--transicion);
  z-index: 10;
  margin-top: 5px;
}
.cross-sell-dropdown-container:hover .cross-sell-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cross-sell-dropdown-menu .dropdown-item {
  padding: 0.85rem 1rem;
  color: var(--verde-primario);
  font-family: var(--fuente-titulo);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  border-bottom: 1px solid rgba(45, 90, 39, 0.08);
  transition: all var(--transicion);
  background: var(--fondo);
}
.cross-sell-dropdown-menu .dropdown-item:last-child {
  border-bottom: none;
}
.cross-sell-dropdown-menu .dropdown-item:hover {
  background: var(--naranja-acento);
  color: white;
}


/* ============================================================
   MI PERFIL (MY ACCOUNT) - NATURALÍSIMA
   ============================================================ */
.woocommerce-my-account-wrapper {
    background: var(--fondo-claro);
    padding: 2rem 1rem;
}
.woocommerce-account .woocommerce {
    display: flex;
    gap: 2.5rem;
    max-width: 1100px;
    margin: 0 auto;
    font-family: var(--fuente-cuerpo);
}

@media (max-width: 768px) {
    .woocommerce-account .woocommerce {
        flex-direction: column;
    }
}

/* Menú Lateral */
.woocommerce-MyAccount-navigation {
    flex: 0 0 280px;
    background: var(--fondo);
    border: 1px solid rgba(45, 90, 39, 0.10);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-sm);
    padding: 1.5rem 0;
    align-self: flex-start;
}
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.woocommerce-MyAccount-navigation li {
    margin: 0;
    border-bottom: 1px solid rgba(45, 90, 39, 0.05);
}
.woocommerce-MyAccount-navigation li:last-child {
    border-bottom: none;
}
.woocommerce-MyAccount-navigation a {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    color: var(--texto-suave);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transicion);
    font-family: var(--fuente-titulo);
    font-size: 0.95rem;
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation a:hover {
    color: var(--verde-primario);
    background: rgba(45,90,39,0.03);
    border-left: 4px solid var(--naranja-acento);
}

/* Área de Contenido */
.woocommerce-MyAccount-content {
    flex: 1;
    background: var(--fondo);
    border: 1px solid rgba(45, 90, 39, 0.10);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-sm);
    padding: 3rem;
    min-width: 0;
}
@media (max-width: 600px) {
    .woocommerce-MyAccount-content { padding: 1.5rem; }
}

.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    color: var(--verde-primario);
    font-family: var(--fuente-titulo);
    margin-bottom: 1.5rem;
    margin-top: 0;
}

/* Tablas de Pedidos */
.woocommerce-table--myaccount-orders,
.woocommerce-table--order-details,
.woocommerce-table--order-downloads {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2.5rem;
    font-size: 0.9rem;
}
.woocommerce-table--myaccount-orders th,
.woocommerce-table--order-details th {
    background: var(--fondo-claro);
    padding: 1.2rem;
    text-align: left;
    color: var(--verde-primario);
    font-weight: 700;
    font-family: var(--fuente-titulo);
    border-bottom: 2px solid rgba(45,90,39,0.1);
}
.woocommerce-table--myaccount-orders td,
.woocommerce-table--order-details td {
    padding: 1.2rem;
    border-bottom: 1px solid rgba(45, 90, 39, 0.08);
    color: var(--texto);
    vertical-align: middle;
}
.woocommerce-button {
    display: inline-block;
    background: var(--verde-claro);
    color: white !important;
    padding: 0.5rem 1.2rem;
    border-radius: var(--radio-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    transition: var(--transicion);
}
.woocommerce-button:hover {
    background: var(--verde-primario);
}

/* Formulario Direcciones y Cuenta */
.woocommerce-MyAccount-content form {
    max-width: 600px;
}
.woocommerce-MyAccount-content .form-row {
    margin-bottom: 1.2rem;
}
.woocommerce-MyAccount-content label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
}
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content input[type="email"] {
    width: 100%;
    padding: 0.8rem;
    border: 1px solid rgba(45, 90, 39, 0.2);
    border-radius: var(--radio-sm);
    font-family: var(--fuente-cuerpo);
}
.woocommerce-MyAccount-content button[type="submit"] {
    background: var(--naranja-acento);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--radio-sm);
    font-weight: 700;
    cursor: pointer;
    font-family: var(--fuente-titulo);
    transition: var(--transicion);
}
.woocommerce-MyAccount-content button[type="submit"]:hover {
    background: var(--naranja-hover);
}

/* Rastreador */
.naturalisima-estado-tracker {
    background:#F7FAF6;
    border:1px solid rgba(45,90,39,0.1);
    border-radius:12px;
    padding:2.5rem;
    text-align:center;
    font-family: var(--fuente-titulo);
    margin-bottom: 3rem;
    box-shadow: var(--sombra-sm);
}



/* ============================================================
   LOGIN PAGE - NATURALÍSIMA
   ============================================================ */
.naturalisima-login-wrapper {
    max-width: 520px;
    margin: 0 auto;
    padding: 2rem 1rem;
    font-family: var(--fuente-cuerpo);
}

.login-hero {
    text-align: center;
    margin-bottom: 2.5rem;
}
.login-hero-icon {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}
.login-hero h2 {
    color: var(--verde-primario);
    font-family: var(--fuente-titulo);
    font-size: 1.8rem;
    margin: 0 0 0.5rem 0;
}
.login-hero p {
    color: var(--texto-suave);
    font-size: 0.95rem;
    margin: 0;
}

.login-card {
    background: var(--fondo);
    border: 1px solid rgba(45, 90, 39, 0.10);
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-md);
    padding: 2.5rem;
}
.login-card-title {
    color: var(--verde-primario);
    font-family: var(--fuente-titulo);
    font-size: 1.3rem;
    margin: 0 0 1.5rem 0;
    border-left: 4px solid var(--naranja-acento);
    padding-left: 1rem;
}
.nat-field {
    margin-bottom: 1.2rem;
}
.nat-field label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--texto);
    font-family: var(--fuente-titulo);
}
.nat-field input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1.5px solid rgba(45, 90, 39, 0.15);
    border-radius: var(--radio-sm);
    font-family: var(--fuente-cuerpo);
    font-size: 0.95rem;
    transition: var(--transicion);
    background: var(--fondo-claro);
}
.nat-field input:focus {
    border-color: var(--verde-primario);
    outline: none;
    box-shadow: 0 0 0 3px rgba(45, 90, 39, 0.1);
}

.login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
}
.login-options label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--texto-suave);
    cursor: pointer;
}
.forgot-link {
    color: var(--naranja-acento);
    text-decoration: none;
    font-weight: 600;
}
.forgot-link:hover {
    text-decoration: underline;
}

.btn-login {
    width: 100%;
    padding: 1rem;
    background: var(--verde-primario);
    color: white;
    border: none;
    border-radius: var(--radio-sm);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--fuente-titulo);
    transition: var(--transicion);
}
.btn-login:hover {
    background: var(--verde-claro);
    transform: translateY(-2px);
    box-shadow: var(--sombra-md);
}

.login-divider {
    text-align: center;
    margin: 1.8rem 0;
    position: relative;
}
.login-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(45, 90, 39, 0.15);
}
.login-divider span {
    background: var(--fondo);
    padding: 0 1rem;
    position: relative;
    z-index: 1;
    color: var(--texto-suave);
    font-size: 0.85rem;
}

.btn-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    width: 100%;
    padding: 0.85rem;
    border: 2px solid rgba(45, 90, 39, 0.15);
    border-radius: var(--radio-sm);
    background: white;
    color: var(--texto);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    font-family: var(--fuente-titulo);
    transition: var(--transicion);
    cursor: pointer;
}
.btn-google:hover {
    border-color: var(--verde-primario);
    background: var(--fondo-claro);
    transform: translateY(-1px);
}

.register-prompt {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(45, 90, 39, 0.1);
}
.register-prompt p {
    color: var(--texto-suave);
    font-size: 0.85rem;
    margin: 0;
}
.register-prompt a {
    color: var(--naranja-acento);
    font-weight: 600;
    text-decoration: none;
}

/* Ocultar titulo feo "My Account" de WooCommerce */
.woocommerce-account .entry-title,
.woocommerce-account .page-title,
.woocommerce-account h1.entry-title {
    display: none !important;
}

/* Perfil (dashboard) bienvenida estilizada */
.perfil-welcome {
    background: linear-gradient(135deg, var(--fondo-claro) 0%, rgba(45,90,39,0.05) 100%);
    padding: 1.5rem 2rem;
    border-radius: var(--radio-md);
    border-left: 5px solid var(--naranja-acento);
    margin-bottom: 2rem;
    font-size: 1.1rem;
    color: var(--texto);
    line-height: 1.5;
}
.perfil-welcome strong {
    color: var(--verde-primario);
}
.perfil-welcome a {
    color: var(--naranja-acento);
    font-weight: 600;
}

/* Google Login Plugin Override (si se instala) */
.google-login-area .wp-google-login,
.google-login-area .wp-google-login__button {
    width: 100% !important;
    border-radius: var(--radio-sm) !important;
}


/* ============================================================
   PÁGINAS LEGALES - NATURALÍSIMA
   ============================================================ */
.legal-page-wrapper {
    background: var(--fondo);
    padding: 3rem 1rem;
    font-family: var(--fuente-cuerpo);
}
.legal-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-md);
    overflow: hidden;
}
.legal-header {
    background: linear-gradient(135deg, var(--verde-primario) 0%, var(--verde-oscuro) 100%);
    color: white;
    padding: 3rem 2rem;
    text-align: center;
}
.legal-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}
.legal-header h1 {
    color: white;
    font-family: var(--fuente-titulo);
    font-size: 2.2rem;
    margin: 0 0 1rem 0;
}
.legal-header p {
    color: rgba(255,255,255,0.9);
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}
.legal-content {
    padding: 3rem 2rem;
}
.legal-section {
    margin-bottom: 2.5rem;
}
.legal-section:last-child {
    margin-bottom: 0;
}
.legal-section h2 {
    color: var(--verde-primario);
    font-family: var(--fuente-titulo);
    font-size: 1.4rem;
    margin: 0 0 1rem 0;
    border-bottom: 2px solid rgba(45,90,39,0.1);
    padding-bottom: 0.5rem;
}
.legal-section p, .legal-section li {
    color: var(--texto);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1rem;
}
.legal-section ul {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}
.highlight-section {
    background: rgba(232, 148, 26, 0.05); /* Naranja acento muy suave */
    border-left: 4px solid var(--naranja-acento);
    padding: 1.5rem;
    border-radius: 0 var(--radio-md) var(--radio-md) 0;
}
.highlight-section h2 {
    color: var(--naranja-acento);
    border-bottom-color: rgba(232, 148, 26, 0.2);
}


/* ============================================================
   TARJETAS LEGALES (PÁGINA NOSOTROS)
   ============================================================ */
.legal-cards-container {
    max-width: 1000px;
    margin: 4rem auto;
    padding: 0 1rem;
    font-family: var(--fuente-cuerpo);
    text-align: center;
}
.legal-cards-title {
    color: var(--verde-primario);
    font-family: var(--fuente-titulo);
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.legal-cards-subtitle {
    color: var(--texto-suave);
    font-size: 1rem;
    margin-bottom: 3rem;
}
.legal-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}
.legal-card {
    background: white;
    border: 1px solid rgba(45,90,39,0.1);
    border-radius: var(--radio-md);
    padding: 2.5rem 1.5rem;
    text-decoration: none;
    transition: var(--transicion);
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.legal-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-md);
    border-color: var(--verde-claro);
}
.legal-card-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    background: var(--fondo-claro);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: transform 0.3s ease;
}
.legal-card:hover .legal-card-icon {
    transform: scale(1.1) rotate(5deg);
}
.legal-card h4 {
    color: var(--verde-primario);
    font-family: var(--fuente-titulo);
    font-size: 1.2rem;
    margin: 0 0 1rem 0;
}
.legal-card p {
    color: var(--texto);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}


/* ============================================================
   CUSTOM FOOTER - NATURALÍSIMA
   ============================================================ */
.site-footer-custom {
    background: var(--verde-oscuro, #1B3B16);
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--fuente-cuerpo);
    padding: 4rem 1rem 1rem;
    border-top: 4px solid var(--naranja-acento, #E8941A);
    margin-top: 3rem;
}
.footer-grid {
    max-width: 1200px;
    margin: 0 auto 3rem auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
}
.footer-col h4 {
    color: #fff;
    font-family: var(--fuente-titulo);
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 0.5rem;
}
.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--naranja-acento, #E8941A);
}
.footer-col p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-col ul li {
    margin-bottom: 0.8rem;
}
.footer-col ul li a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transicion);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.footer-col ul li a:hover {
    color: var(--naranja-acento, #E8941A);
    transform: translateX(5px);
}
.footer-brand h3 {
    font-size: 1.8rem;
    color: #fff;
    margin: 0 0 1rem 0;
    font-family: var(--fuente-titulo);
}
.footer-socials {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}
.footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    transition: var(--transicion);
}
.footer-socials a:hover {
    background: var(--naranja-acento, #E8941A);
    transform: translateY(-3px);
}
.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Ocultar el pie de página de GeneratePress si nuestro código no lo reemplazó en algún layout raro */
.site-footer:not(.site-footer-custom) {
    display: none !important;
}


/* ============================================================
   PÁGINA NOSOTROS - NATURALÍSIMA
   ============================================================ */
.nosotros-wrapper {
    background: var(--fondo);
    font-family: var(--fuente-cuerpo);
    padding-bottom: 4rem;
}
.nosotros-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}
.text-center { text-align: center; }

/* Hero */
.nosotros-hero {
    background: linear-gradient(135deg, var(--verde-oscuro) 0%, var(--verde-primario) 100%);
    color: white;
    padding: 6rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.nosotros-hero::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 60%);
    pointer-events: none;
}
.hero-badge {
    display: inline-block;
    background: rgba(232, 148, 26, 0.2);
    color: var(--naranja-acento);
    padding: 0.4rem 1.2rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(232, 148, 26, 0.5);
}
.nosotros-title {
    font-family: var(--fuente-titulo);
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    color: white;
}
.nosotros-title span {
    color: var(--naranja-acento);
}
.nosotros-hero-text {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.15rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.9);
}

/* Historia y Diferencia */
.nosotros-historia {
    padding: 5rem 0;
}
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
@media (max-width: 768px) {
    .grid-2 { grid-template-columns: 1fr; gap: 3rem; }
    .nosotros-title { font-size: 2.5rem; }
}
.historia-texto h2 {
    color: var(--verde-primario);
    font-family: var(--fuente-titulo);
    font-size: 2rem;
    margin-bottom: 1.5rem;
}
.historia-texto p {
    color: var(--texto);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.2rem;
}
.diferencia-caja {
    background: white;
    border-radius: var(--radio-lg);
    padding: 3rem 2rem;
    box-shadow: var(--sombra-md);
    border: 1px solid rgba(45,90,39,0.1);
}
.diferencia-caja h2 {
    color: var(--verde-primario);
    font-family: var(--fuente-titulo);
    font-size: 1.8rem;
    margin-bottom: 2rem;
    text-align: center;
}
.diferencia-caja ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.diferencia-caja li {
    display: flex;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}
.diferencia-icon {
    font-size: 1.8rem;
    background: var(--fondo-claro);
    width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}
.diferencia-caja strong {
    display: block;
    color: var(--texto);
    font-size: 1.1rem;
    margin-bottom: 0.3rem;
}
.diferencia-caja p {
    color: var(--texto-suave);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* Testimonios */
.nosotros-testimonios {
    padding: 5rem 0;
    background: var(--fondo-claro);
    border-top: 1px solid rgba(45,90,39,0.05);
}
.nosotros-testimonios h2 {
    color: var(--verde-primario);
    font-family: var(--fuente-titulo);
    font-size: 2.2rem;
    margin-bottom: 3rem;
}
.testimonios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.testimonio-card {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: var(--radio-md);
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    position: relative;
    border-top: 4px solid var(--verde-claro);
    transition: var(--transicion);
}
.testimonio-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-md);
}
.testimonio-quote {
    position: absolute;
    top: 10px; right: 20px;
    font-size: 5rem;
    font-family: serif;
    color: rgba(232, 148, 26, 0.15);
    line-height: 1;
}
.testimonio-estrellas {
    color: var(--naranja-acento);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    letter-spacing: 2px;
}
.testimonio-cita {
    color: var(--texto);
    font-size: 1rem;
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}
.testimonio-autor {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(45,90,39,0.1);
    padding-top: 1rem;
}
.testimonio-autor strong {
    color: var(--verde-oscuro);
    font-family: var(--fuente-titulo);
    font-size: 1.1rem;
}
.testimonio-autor span {
    color: var(--texto-suave);
    font-size: 0.85rem;
}



/* ============================================================
   SOLUCIONES MÓVILES (NOSOTROS Y WOOCOMMERCE)
   ============================================================ */
.nosotros-title {
    font-size: 3.2rem;
}
@media (max-width: 768px) {
    .nosotros-title {
        font-size: 2.2rem;
        word-break: keep-all;
        hyphens: none;
    }
    form.cart {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
}
/* Evitar que el botón de WhatsApp se aplaste en móvil */
form.cart .button {
    white-space: nowrap !important;
    flex-shrink: 0;
}


/* ============================================================
   ESTRUCTURA DE FICHA DE PRODUCTO PREMIUM (8 PASOS) - V2 INTERACTIVA
   ============================================================ */
.ficha-naturalisima {
    font-family: var(--fuente-cuerpo);
    color: var(--texto);
    line-height: 1.7;
    margin-top: 2rem;
}

/* 1. Hook (Ahora parece una alerta/mensaje destacado) */
.ficha-hook {
    background: linear-gradient(120deg, rgba(232, 148, 26, 0.1) 0%, rgba(255,255,255,0) 100%);
    border-left: 4px solid var(--naranja-acento);
    padding: 1.5rem;
    border-radius: 0 8px 8px 0;
    font-size: 1.3rem;
    font-style: italic;
    color: var(--verde-oscuro);
    margin-bottom: 2.5rem;
    font-family: var(--fuente-titulo);
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

/* 2. Promesa (Tarjetas interactivas con hover) */
.ficha-seccion-titulo {
    font-size: 1.4rem;
    color: var(--verde-primario);
    font-family: var(--fuente-titulo);
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}
.ficha-seccion-titulo::after {
    content: '';
    position: absolute;
    bottom: -5px; left: 0;
    width: 40%; height: 3px;
    background: var(--naranja-acento);
    border-radius: 2px;
}

.ficha-promesa ul {
    list-style: none;
    padding: 0;
    margin-bottom: 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.2rem;
}
.ficha-promesa li {
    background: white;
    padding: 1.2rem;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid rgba(45,90,39,0.08);
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    cursor: default;
}
.ficha-promesa li:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(45,90,39,0.1);
    border-color: var(--verde-claro);
}
.ficha-promesa li::before {
    content: "✨";
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* 3 & 6. Para quién es / No es (Diseño de Cajas Divididas) */
.ficha-grid-audiencia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 3rem;
}
@media (max-width: 768px) {
    .ficha-grid-audiencia { grid-template-columns: 1fr; }
}
.ficha-box {
    padding: 1.8rem;
    border-radius: 12px;
    transition: transform 0.3s ease;
}
.ficha-box:hover { transform: scale(1.02); }
.ficha-box-ideal {
    background: linear-gradient(135deg, #f0f7ef 0%, #ffffff 100%);
    border: 1px solid rgba(138, 194, 118, 0.3);
}
.ficha-box-ideal h4 { color: var(--verde-oscuro); margin-bottom: 1rem; display:flex; gap:8px; font-size:1.1rem; }
.ficha-box-ideal h4::before { content: "✅"; }
.ficha-box-ideal ul { padding-left: 1.2rem; color: var(--texto); }

.ficha-box-alerta {
    background: linear-gradient(135deg, #fffcf5 0%, #ffffff 100%);
    border: 1px solid rgba(232, 148, 26, 0.3);
}
.ficha-box-alerta h4 { color: #b36b00; margin-bottom: 1rem; display:flex; gap:8px; font-size:1.1rem; }
.ficha-box-alerta h4::before { content: "⚠️"; }
.ficha-box-alerta ul { padding-left: 1.2rem; color: var(--texto); }

/* 4 & 5. Composición y Uso */
.ficha-tecnica {
    background: white;
    border-left: 4px solid var(--verde-claro);
    border-radius: 8px;
    padding: 1.8rem;
    margin-bottom: 3rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}
.ficha-tecnica p { margin-bottom: 1rem; font-size: 1.05rem; }
.ficha-tecnica strong { color: var(--verde-oscuro); display:block; font-size:1.1rem; margin-bottom:5px; }

/* 7. FAQs (Acordeón Nativo Animado) */
.ficha-faq { margin-bottom: 3rem; }
.ficha-faq details {
    background: white;
    margin-bottom: 1rem;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.ficha-faq details[open] {
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border-color: var(--verde-claro);
}
.ficha-faq summary {
    padding: 1.2rem;
    font-weight: 600;
    color: var(--verde-oscuro);
    cursor: pointer;
    list-style: none; /* Hide default arrow */
    position: relative;
    outline: none;
}
.ficha-faq summary::-webkit-details-marker { display: none; }
.ficha-faq summary::after {
    content: "+";
    position: absolute;
    right: 1.5rem;
    font-size: 1.5rem;
    color: var(--naranja-acento);
    transition: transform 0.3s ease;
}
.ficha-faq details[open] summary::after {
    content: "-";
    transform: rotate(180deg);
}
.ficha-faq-a {
    padding: 0 1.2rem 1.2rem 1.2rem;
    color: var(--texto);
    border-top: 1px dashed #eee;
    margin-top: 10px;
    padding-top: 10px;
    animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn { from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);} }

/* 8. CTA WhatsApp */
.ficha-cta-box {
    text-align: center;
    background: radial-gradient(circle at center, var(--verde-oscuro) 0%, #11260e 100%);
    padding: 3rem 2rem;
    border-radius: 16px;
    color: white;
    box-shadow: 0 10px 30px rgba(27, 59, 22, 0.3);
    position: relative;
    overflow: hidden;
}
.ficha-cta-box::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(232,148,26,0.1) 0%, transparent 60%);
    pointer-events: none;
}
.ficha-cta-box h3 { color: white; margin-bottom: 1rem; font-family: var(--fuente-titulo); font-size: 1.8rem; }
.btn-whatsapp-ficha {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #25D366;
    color: white !important;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.2rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-top: 1.5rem;
    border: 2px solid #20bd5a;
}
.btn-whatsapp-ficha:hover {
    transform: translateY(-5px);
    background: #20bd5a;
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.4);
}

/* ========================================
   CHECKOUT — Bloque "Tus datos"
   Layout limpio: stack vertical full-width
   con tarjetas adheridas al ecosistema
   ======================================== */

/* Contenedor general */
.naturalisima-checkout .tus-datos,
.checkout-elementor-tus-datos,
form.checkout .woocommerce-billing-fields,
.tus-datos-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.5rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(20, 80, 40, 0.06);
    border: 1px solid #e8efe8;
}

/* Título del bloque */
.naturalisima-checkout .tus-datos h2,
.tus-datos-section > h2,
.tus-datos-section > .titulo {
    color: #1a5f2e;
    font-weight: 700;
    font-size: 1.15rem;
    margin: 0 0 0.5rem 0;
    padding-left: 0.6rem;
    border-left: 4px solid #f4a93a;
}

/* CADA CAMPO ocupa 100% del ancho — fin del zigzag */
.naturalisima-checkout .form-row,
.naturalisima-checkout .form-field,
.tus-datos-section p.form-row,
.tus-datos-section .form-row {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Labels — uniformes y legibles */
.naturalisima-checkout label,
.tus-datos-section label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #2d4a30;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
}

/* Asterisco rojo solo en obligatorios reales */
.naturalisima-checkout label .required,
.tus-datos-section label .required {
    color: #d63838;
    margin-left: 2px;
}

/* Texto auxiliar para campos opcionales */
.naturalisima-checkout label .opcional-hint,
.tus-datos-section label .opcional-hint {
    color: #7a8a7a;
    font-weight: 400;
    text-transform: none;
    font-size: 0.72rem;
    letter-spacing: 0;
    margin-left: 4px;
}

/* Inputs — full width, altura cómoda para adultos */
.naturalisima-checkout input[type="text"],
.naturalisima-checkout input[type="email"],
.naturalisima-checkout input[type="tel"],
.naturalisima-checkout textarea,
.tus-datos-section input,
.tus-datos-section textarea {
    width: 100% !important;
    box-sizing: border-box;
    min-height: 48px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    color: #1f2a1f;
    background: #fafdf9;
    border: 1.5px solid #d4e0d2;
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease,
                background 0.2s ease;
}

/* Focus — feedback claro */
.naturalisima-checkout input:focus,
.naturalisima-checkout textarea:focus,
.tus-datos-section input:focus,
.tus-datos-section textarea:focus {
    outline: none;
    border-color: #1a5f2e;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26, 95, 46, 0.12);
}

/* Estado error */
.naturalisima-checkout .form-row.error input,
.tus-datos-section .form-row.error input {
    border-color: #d63838;
    background: #fff5f5;
}

.naturalisima-checkout .form-row .error-message,
.tus-datos-section .error-message {
    color: #d63838;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Banner "comprando como X" si está logueado */
.naturalisima-user-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #eef7ec;
    border-left: 4px solid #1a5f2e;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #1a5f2e;
    margin-bottom: 0.5rem;
}

.naturalisima-user-banner a {
    color: #d97706;
    font-weight: 600;
    text-decoration: underline;
    font-size: 0.8rem;
}

/* RESPONSIVE — desktop opcional grid 2 columnas pares */
@media (min-width: 900px) {
    .tus-datos-section.grid-2col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem 1rem;
    }
    
    /* Título y banner ocupan toda la fila */
    .tus-datos-section.grid-2col > h2,
    .tus-datos-section.grid-2col > .naturalisima-user-banner,
    .tus-datos-section.grid-2col .form-row-full {
        grid-column: 1 / -1;
    }
}

/* ========================================
   CHECKOUT — Dropdown de productos sugeridos
   ======================================== */
.cross-sell-dropdown {
    position: relative;
}

.btn-dropdown-trigger {
    background: var(--verde-primario, #2D5A27);
    color: #fff;
    border: none;
    padding: 0.45rem 0.8rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.15s ease;
    white-space: nowrap;
}

.btn-dropdown-trigger:hover {
    background: var(--naranja-acento, #E8941A);
    transform: translateY(-1px);
}

.cross-sell-dropdown .dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid #e8efe8;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    min-width: 160px;
    overflow: hidden;
}

.cross-sell-dropdown.open .dropdown-menu {
    display: block;
    animation: dropdownFade 0.2s ease;
}

@keyframes dropdownFade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-option {
    display: block;
    padding: 0.6rem 1rem;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--verde-primario, #2D5A27);
    text-decoration: none;
    border-bottom: 1px solid #f0f5ef;
    transition: background 0.2s ease, color 0.2s ease;
}

.dropdown-option:last-child {
    border-bottom: none;
}

.dropdown-option:hover {
    background: rgba(232, 148, 26, 0.08);
    color: var(--naranja-acento, #E8941A);
}

/* ============================================================
   PRODUCTOS RELACIONADOS — "También te puede interesar..."
   Estilos 100% personalizados (clases .nat-relacionados)
   ============================================================ */

/* Contenedor general */
.nat-relacionados {
    margin-top: 3rem;
    padding: 2.5rem 1.5rem;
    border-top: 2px solid rgba(45, 90, 39, 0.08);
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Título */
.nat-relacionados-titulo {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: var(--nat-primario, #2D5A27) !important;
    text-align: center !important;
    margin-bottom: 2rem !important;
    position: relative;
    padding-bottom: 1rem;
}

.nat-relacionados-titulo::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--nat-acento, #E8941A), var(--nat-primario, #2D5A27));
    border-radius: 2px;
}

/* Grid */
.nat-relacionados-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
}

/* Tarjeta */
.nat-relacionado-card {
    border: 1.5px solid var(--nat-borde, rgba(45, 90, 39, 0.15));
    border-radius: 14px;
    padding: 10px; /* Reducido para dar más espacio interno */
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.nat-relacionado-card:hover {
    border-color: rgba(45, 90, 39, 0.35);
    box-shadow: 0 8px 24px rgba(45, 90, 39, 0.12);
    transform: translateY(-6px);
}

/* Imagen */
.nat-relacionado-img {
    display: block;
    text-decoration: none;
    margin-bottom: 8px;
}

.nat-relacionado-img img {
    width: 100%;
    border-radius: 10px;
    aspect-ratio: 1;
    object-fit: contain;
    background: var(--nat-fondo-claro, #F7FAF6);
    padding: 0; /* Eliminado el padding para que la imagen sea más grande */
    transition: transform 300ms ease;
}

.nat-relacionado-card:hover .nat-relacionado-img img {
    transform: scale(1.05);
}

/* Info */
.nat-relacionado-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Nombre */
.nat-relacionado-nombre {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--nat-texto, #1C1C1C);
    line-height: 1.35;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 36px;
    margin-bottom: 6px;
}

.nat-relacionado-nombre:hover {
    color: var(--nat-acento, #E8941A);
}

/* Precio */
.nat-relacionado-precio {
    color: var(--nat-primario, #2D5A27);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
}

/* Botón Añadir al carrito */
.nat-btn-carrito {
    background: var(--nat-acento, #E8941A) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 4px !important; /* Menos padding horizontal para evitar que se aplaste */
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'Montserrat', sans-serif !important;
    text-align: center !important;
    text-decoration: none !important;
    display: block !important;
    margin-top: auto;
    cursor: pointer;
    transition: all 180ms ease !important;
    word-break: normal !important; /* Evita que las palabras se rompan a la mitad */
    white-space: normal !important;
    line-height: 1.2 !important;
}

.nat-btn-carrito:hover {
    background: var(--nat-acento-hover, #D4820F) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(232, 148, 26, 0.35) !important;
    color: #fff !important;
}

/* "Ver carrito" después de agregar */
.nat-relacionado-card .added_to_cart {
    display: block;
    text-align: center;
    font-size: 11px;
    color: var(--nat-primario, #2D5A27);
    font-weight: 600;
    margin-top: 6px;
    text-decoration: none;
}

/* Responsive: 2 columnas en móvil */
@media (max-width: 768px) {
    .nat-relacionados-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.8rem;
    }
    
    .nat-relacionado-card {
        padding: 8px;
    }
    
    .nat-relacionado-nombre {
        font-size: 12px;
    }
    
    .nat-relacionados-titulo {
        font-size: 1.3rem !important;
    }
    
    .nat-btn-carrito {
        font-size: 11px !important;
        padding: 8px 2px !important;
    }
}
/* ============================================
   14. REDISEÑO DE FICHA DE CATEGORÍAS (PRODUCT GRID)
   ============================================ */
/* Estructura general de la tarjeta de producto para darle "Esencia Naturalisima" */
.woocommerce ul.products li.product,
ul.products li.product {
    background: #ffffff !important;
    border: 1px solid var(--nat-borde) !important;
    border-radius: 16px !important; /* Bordes más redondeados */
    padding: 15px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03) !important;
    transition: all var(--nat-transicion-media) !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.woocommerce ul.products li.product:hover,
ul.products li.product:hover {
    box-shadow: 0 8px 25px rgba(45,90,39,0.1) !important; /* Sombra verde sutil en hover */
    transform: translateY(-5px) !important;
    border-color: var(--nat-primario) !important;
}

/* Imagen del producto más amplia y limpia */
.woocommerce ul.products li.product a img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    margin-bottom: 15px !important;
}

/* Título del producto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 16px !important;
    color: var(--nat-texto) !important;
    margin-bottom: 8px !important;
    line-height: 1.3 !important;
    flex-grow: 1 !important;
}

/* Precio destacado */
.woocommerce ul.products li.product .price {
    font-size: 18px !important;
    color: var(--nat-primario) !important;
    margin-bottom: 15px !important;
}

/* Botón de añadir al carrito en la cuadrícula */
.woocommerce ul.products li.product .button {
    background: #E8941A !important; /* Anaranjado como solicitó el usuario */
    color: #ffffff !important;
    border-radius: 25px !important;
    padding: 10px 15px !important;
    font-weight: 600 !important;
    width: 100% !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    letter-spacing: 0.5px !important;
    transition: background var(--nat-transicion-rapida) !important;
}

.woocommerce ul.products li.product .button:hover {
    background: #d48315 !important;
}

/* Estilos de ordenamiento y contadores (Category Header) */
.woocommerce .woocommerce-result-count, 
.woocommerce-page .woocommerce-result-count {
    color: var(--nat-texto-claro) !important;
    font-size: 14px !important;
}

.woocommerce .woocommerce-ordering select {
    border: 1px solid var(--nat-borde) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: var(--nat-texto) !important;
    background-color: #f9fbf9 !important;
}

/* 📱 MÓVIL: Productos en 1 sola columna para que se vean MÁS GRANDES Y AMPLIOS */
@media (max-width: 768px) {
    .woocommerce ul.products[class*=columns-] li.product,
    .woocommerce-page ul.products[class*=columns-] li.product {
        width: 100% !important; /* Ocupa todo el ancho en móvil */
        float: none !important;
        margin-bottom: 20px !important;
        padding: 20px !important; /* Más espacio interior */
    }
    
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 18px !important; /* Título más grande en móvil */
    }
    
    .woocommerce ul.products li.product .price {
        font-size: 20px !important; /* Precio más visible */
    }
    
    .woocommerce ul.products li.product .button {
        padding: 12px 15px !important;
        font-size: 15px !important; /* Botón más tocable */
    }
}

/* 💻 ESCRITORIO: Forzar 4 columnas bien distribuidas */
@media (min-width: 769px) {
    /* Ocultar pseudo-elementos clearfix que rompen el CSS Grid ocupando 1 celda invisible */
    .woocommerce ul.products::before,
    .woocommerce ul.products::after,
    .woocommerce-page ul.products::before,
    .woocommerce-page ul.products::after,
    .wc-block-grid__products::before,
    .wc-block-grid__products::after {
        display: none !important;
    }

    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .wc-block-grid__products {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 25px !important;
    }
    
    .woocommerce ul.products li.product,
    .wc-block-grid__product {
        width: 100% !important;
        margin: 0 !important;
        float: none !important;
    }
}

/* Botón de "Mostrar más productos" (Load More) en Verde */
.wp-block-woocommerce-product-button a,
.wp-block-woocommerce-product-collection .wp-block-button__link,
.woocommerce-load-more,
.yith-wcan-load-more,
button[class*="load-more"],
a[class*="load-more"],
button.aww-load-more {
    background-color: var(--nat-primario) !important;
    border-color: var(--nat-primario) !important;
    color: #ffffff !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
}

.wp-block-woocommerce-product-button a:hover,
.wp-block-woocommerce-product-collection .wp-block-button__link:hover,
.woocommerce-load-more:hover,
.yith-wcan-load-more:hover,
button[class*="load-more"]:hover,
a[class*="load-more"]:hover {
    background-color: var(--nat-primario-oscuro) !important;
}

/* ============================================
   15. REDISEÑO DEL TÍTULO DE CATEGORÍA / BÚSQUEDA
   ============================================ */
.woocommerce-products-header__title,
.page-title {
    background: linear-gradient(135deg, var(--nat-primario) 0%, #1b3817 100%) !important;
    color: #ffffff !important;
    padding: 25px 30px !important;
    border-radius: 16px !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 20px rgba(45,90,39,0.15) !important;
    margin-bottom: 25px !important;
    display: flex !important;
    align-items: center !important;
    letter-spacing: -0.5px !important;
}

.woocommerce-products-header__title::before,
.page-title::before {
    content: "🌿" !important;
    margin-right: 15px !important;
    font-size: 32px !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)) !important;
}

/* ============================================
   16. ARREGLO DE CUADRÍCULA (4 COLUMNAS SIN HUECOS)
   ============================================ */
.woocommerce ul.products li.first,
.woocommerce-page ul.products li.first,
.woocommerce ul.products li.last,
.woocommerce-page ul.products li.last {
    clear: none !important;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none !important; /* Quita los clearfixes de float que rompen el grid */
}

@media (min-width: 769px) {
    .woocommerce ul.products li.product {
        clear: none !important; /* Asegura que ningún producto salte de línea antes de tiempo */
    }
}

/* ============================================
   15. FIX SCROLL BLOQUEADO EN MI PERFIL
   ============================================ */
/* Fuerza a que la página de Mi Cuenta permita el desplazamiento vertical 
   y anula cualquier bloqueo de Elementor o wrappers con height 100vh */
html, 
body.woocommerce-account,
body.woocommerce-account #page,
body.woocommerce-account #content,
body.woocommerce-account .site-content,
body.woocommerce-account .elementor-section,
body.woocommerce-account .elementor-container {
    overflow-y: auto !important;
    overflow-x: hidden !important; /* Mantiene el control horizontal */
    height: auto !important;
    touch-action: auto !important;
}

/* Evita que contenedores específicos de WooCommerce corten el contenido */
body.woocommerce-account .woocommerce {
    overflow: visible !important;
    height: auto !important;
}


/* =====================================================================
   NATURALÍSIMA · HEADER MÓVIL TEXTOS & DISCLAIMER FIX
   ===================================================================== */
.nat-disclaimer {
    display: none !important;
}

@media (max-width: 767px) {
    /* Menu Hamburger Text */
    .elementor-menu-toggle {
        min-width: 105px !important;
        justify-content: flex-start !important;
        padding-left: 14px !important;
        padding-right: 40px !important;
        position: relative;
    }
    .elementor-menu-toggle::before {
        content: "MENÚ";
        font-size: 11px;
        font-weight: 600;
        color: #fff;
        letter-spacing: 0.5px;
        z-index: 10;
        margin-right: 0 !important;
    }
    
    /* Ensure the custom absolute bars stay to the right */
    .elementor-menu-toggle .nat-bar {
        left: auto !important;
        right: 8px !important;
        margin-left: 11px !important;
    }
    .elementor-menu-toggle .nat-bar-2 {
        margin-left: 7.5px !important;
    }
    
    /* Cart Text */
    .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: auto !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle::after {
        content: "CARRITO";
        font-size: 11px;
        font-weight: 600;
        color: #fff;
        letter-spacing: 0.5px;
    }
}
\n
// Arreglo de posicion de flecha
add_action('wp_head', function() {
    echo '<style id="nat-caret-fix">
    .menu-item-93 > a.elementor-item-active::after,
    .menu-item-1559 > a.elementor-item-active::after {
        left: 100% !important;
        right: auto !important;
        transform: translateY(-50%) !important;
        top: 50% !important;
        bottom: auto !important;
        width: auto !important;
        height: auto !important;
        border: none !important;
        background: transparent !important;
        margin-left: 2px !important;
        content: " ⌄" !important;
        color: inherit !important;
    }
    </style>';
}, 9999);