/*
Theme Name: Tropigold Theme
Theme URI: http://www.tropi-gold.com/
Author: Acierto creativo
Author URI: https://aciertocreativo.com/
Description: Tema personalizado para Tropigold, desarrollado a medida.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Tropigold
*/


body {
    margin: 0;
    font-family: "Maven Pro", sans-serif;

    background-image: url('images/fnd-right.png'), url('images/fnd-left.png');
    background-position: right top, left top;
    background-repeat: repeat-y, repeat-y;
    background-size: auto;
}

header {
    color: white;
    text-align: center;
}

.top-bar {
  width: 100%;
  background-color: #7f1c42;
  padding: 10px 0;
  height: 60px;
}

.top-bar .sticky {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1333333;
}

/* Cuando el admin bar está visible */
.admin-bar .sticky {
  top: 32px; /* espacio para el admin bar en desktop */
}

.top-bar-wrapper {
  max-width: 1320px;
  /*width: 100%;*/
  margin: 0 auto;
  padding: 0 20px;
  /*display: flex;*/
  justify-content: space-between;
  align-items: center;
}

.banner-button {
  display: inline-block;
  margin-top: 20px;
  padding: 18px 40px;
  background-color: #139047;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.banner-button:hover {
  background-color: #ef9032;
}

.banner-container {
  position: relative;
  width: 100%;
  height: 600px;
  overflow: hidden;
  border-bottom: solid 10px #ef9032;
}

.banner-slider {
  display: flex;
  height: 100%;
  transition: transform 0.6s ease;
  will-change: transform;
}

.banner-slide {
  flex: 0 0 100%;
  height: 600px;
  background-size: cover;
  background-position: center;
  position: relative;
  transition: transform 0.3s ease;
}

.banner-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0);
}

.banner-content {
    display:none;
    position: absolute;
    bottom: 30%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    text-align: center;
    z-index: 2;
}

.banner-content h2 {
  color: #f4f1ec;
    font-size: 3em;
    margin: 0;
    text-transform: uppercase;
}

.banner-content p {
  font-size: 1.6em;
  margin: 8px 0;
}

.banner-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  z-index: 1;
}

.banner-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2em;
  color: #fff;
  background: #139047;
  border-radius:50px;
  padding: 2px 12px;
  cursor: pointer;
  z-index: 10;
}

.banner-nav.prev {
  left: 10px;
}

.banner-nav.next {
  right: 10px;
}

.banner-dots {
  position: absolute;
  bottom: 20px;
  width: 100%;
  text-align: center;
  z-index: 10;
}

.banner-dots .dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 4px;
  background: #ef9032;
  border-radius: 50%;
  opacity: 0.5;
  cursor: pointer;
}

.banner-dots .dot.active {
  opacity: 1;
  background: #8dbd4d;
}

.logo {
  position: relative;
  z-index: 2;
}

.logo img {
  height: 70px; /* Aumenta el tamaño del logo */    
}

.logo-fijo {
  position: fixed;
  top: 40px;   /* siempre a 100px del borde superior */
  left: 0;      /* pegado al borde izquierdo */
  z-index: 10000; /* para que quede encima del contenido */
}

.logo-fijo img{
  width: 250px;
  height: auto;
}

.menu {
  display: flex;
  /*gap: 15px;*/
  list-style: none;
  margin: 0;
  margin-top: 20px;
  padding: 0;
  align-items: center;
  margin-left: auto;
}

.menu li a {
  background-color: #7f1c42;
  color: white;
  text-decoration: none;
  padding: 14px 20px;
  transition: background 0.3s ease;
}

.menu li a:hover {
  background-color: #ef9032;
  text-decoration: none;
}

.wrapper {
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
  padding: 30px 0;
}


/* ===== Sección de Cajas Destacadas ===== */
.cajas-section {
    background: #7f1c42; /* tono beige como en la imagen */
    padding: 50px 20px;
    text-align: center;
}

.cajas-section h2{
    font-size: 44px;
    color: #fff; /* verde oscuro */
    font-weight: 600;
    margin:0 0 30px;
}

.cajas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    max-width: 1320px;
    margin: 0 auto;
}

.caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px;
}

.caja-icono img {
    width: 70%;
    height: auto;
    margin-bottom: 10px;
}


.caja-texto p {
    font-size: 1.1rem;
    color: #fff;
    line-height: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .cajas-section .cajas-titulo {
        font-size: 22px;
    }

    .caja-icono img {
        width: 60px;
    }
}

/* ===== Sección: Productos categoría (overlay como en la imagen) ===== */
.productos-categoria {
  padding: 48px 20px;
  text-align: center;
}
.productos-categoria .container {
  max-width: 1200px;
  margin: 0 auto;
}
.productos-categoria__title {
  color: #139047;
  font-size: 44px;
  margin: 0 0 30px 0;
  font-weight: 600;
}

/* Grid: intenta mostrar 5 columnas en desktop */
.productos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: start;
}

/* Card */
.producto-card { text-align: center; }
.producto-link { text-decoration: none; color: inherit; display:block; }
.producto-thumb { position: relative; overflow: hidden; border-radius: 4px; background: #fff; }
.producto-thumb img {
  width: 100%;
  height: auto;           /* ajusta la altura */
  object-fit: cover;       /* recorta la imagen manteniendo proporción */
  display: block;
}

/* overlay naranja en la parte inferior (como tu imagen) */
.producto-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ef9032; /* naranja */
  padding: 12px 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.producto-name {
  color: #fff;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
}

/* fallback cuando no hay imagen */
.producto-thumb--noimg {
  height: 220px;
  background: #ddd;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
  .productos-grid { grid-template-columns: repeat(3, 1fr); }
  .producto-thumb img, .producto-thumb--noimg { height: 180px; }
}
@media (max-width: 700px) {
  .productos-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .producto-thumb img, .producto-thumb--noimg { height: 150px; }
  .productos-categoria__title { font-size: 22px; }
}
@media (max-width: 420px) {
  .productos-grid { grid-template-columns: 1fr; }
  .producto-thumb img, .producto-thumb--noimg { height: 180px; }
  .producto-name { font-size: 16px; }
}


/* ----- Sección: Recetas 4 cajas ----- */
.recetas-cuatro {
    background-color: #7d1d43;
}

.recetas-cuatro__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}
.recetas-cuatro__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: start;
}

/* Caja intro */
.recetas-cuatro__item--intro {
    padding: 22px;
}
.recetas-intro {
    font-size: 3rem;
    color: #fff;
    line-height: 0.9;
    text-align: center;
}

/* Cajas receta */
.recetas-cuatro__item--receta {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.receta-card { display:block; color:inherit; text-decoration:none; }
.receta-card__thumb img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}
.receta-card__noimg {
    width: 100%;
    height: 160px;
    background: #e6e6e6;
}
.receta-card__body {
    padding: 14px;
}
.receta-card__title {
    font-size: 2.6rem;
    margin: 0 0 20px;
    color: #fff;
    font-weight: 400;
    line-height: 0.8;
    text-align: center;
}
.receta-card__excerpt {
    margin: 0;
    color: #444;
    font-size: 13px;
    line-height: 1.4;
}

/* Ver todas */
.recetas-cuatro__ver-todas {
    margin-top: 22px;
    text-align: center;
}
.ver-todas-btn {
    display: inline-block;
    padding: 10px 18px;
    background: #e9922b;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
}

.receta-card__btn {
    display: block;
    margin-top: 10px;
    padding: 8px 16px;
    background-color: #f28c28; /* Naranja o el color que quieras */
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.receta-card__btn:hover {
    background-color: #d97315; /* tono más oscuro en hover */
}


/* Responsive */
@media (max-width: 1024px) {
    .recetas-cuatro__grid { grid-template-columns: repeat(2, 1fr); }
    .receta-card__thumb img,
    .receta-card__noimg { height: 180px; }
}
@media (max-width: 600px) {
    .recetas-cuatro__grid { grid-template-columns: 1fr; }
    .receta-card__thumb img,
    .receta-card__noimg { height: 220px; }
    .recetas-cuatro__container { padding: 24px 12px; }
}

/* Fondo verde solo para la sección de cosecha */
.productos-cosecha {
  background-color:  #7c1f43; /* verde oscuro, ajusta según tu diseño */
  color: #fff; /* texto blanco */
  padding: 60px 0; /* mismo espaciado que la sección de destacadas */
}

.productos-cosecha .productos-categoria__title {
  color: #fff;
}


/* ===== Sección Home Portfolio (Shortcode) ===== */
.home-portfolio {
  padding: 48px 20px;
  background: transparent; /* cambia si quieres otro fondo */
}
.home-portfolio .container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Mensajes */
.home-portfolio__empty,
.home-portfolio__error {
  padding: 18px;
  background: #fff7e6;
  border: 1px solid #f0d1a0;
  border-radius: 6px;
  color: #333;
  text-align: center;
}

.home-portfolio__title {
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  margin: 0;
  margin-bottom: 20px;
  color: #2e7d32;
}


/* Responsive helpers */
@media (max-width: 768px){
  .home-portfolio { padding: 30px 12px; }
}


/* Footer layout */
.site-footer {
  background: #139047; /* fondo oscuro como en la imagen */
  color: #fff;
  padding: 50px 0;
}
.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Grid: 3 columnas (logo + menu + menu/social) */
.site-footer__grid {
  display: grid;
  grid-template-columns: 280px 1fr 1fr;
  gap: 40px;
  align-items: start;
}

/* Columna logo */
.site-footer__col--logo {
  display: flex;
  align-items: flex-start;
}
.site-footer__logo {
  max-width: 210px;
  height: auto;
  display: block;
}
.site-footer__brand {
  font-weight: 700;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}

/* Menús */
.footer-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-menu li {
  margin-bottom: 10px;
  list-style: none;
}
.footer-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 1.2rem;
}
.footer-menu a:hover {
  color: #e9922b; /* acento naranja */
}

/* Column 3: social items styling via menu item classes */
.footer-menu--mix .menu-item.social a {
  display: inline-flex;
  align-items: center;
}

/* pseudo-icon circle before link */
.footer-menu--mix .menu-item.social a:before {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff10; /* ligero fondo */
  color: #fff;
  text-align: center;
  line-height: 32px;
  margin-right: 10px;
  font-weight: 700;
  font-size: 14px;
}

/* Facebook */
.footer-menu--mix .menu-item.social.facebook a:before { 
    content: "\f09a"; 
    font-family: "Font Awesome 5 Brands"; 
}

/* Instagram */
.footer-menu--mix .menu-item.social.instagram a:before { 
    content: "\f16d"; 
    font-family: "Font Awesome 5 Brands"; 
}

/* WhatsApp */
.footer-menu--mix .menu-item.social.whatsapp a:before { 
    content: "\f232"; 
    font-family: "Font Awesome 5 Brands"; 
}

/* TikTok */
.footer-menu--mix .menu-item.social.tiktok a:before { 
    content: "\e07b"; 
    font-family: "Font Awesome 5 Brands"; 
}

/* Responsive */
@media (max-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
  .site-footer__col--logo {
    margin-bottom: 20px;
  }
}


/* single product basic layout */
.single-product__wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: start;
  padding: 40px 0 10px;
}

.single-product__media {
  /* el contenedor de la galería */
}

.single-product__summary {
  /* caja donde sale título, precio, add-to-cart */
}

/* Tabs / related */
.single-product__tabs {
  margin-top: 40px;
}

/* Responsive */
@media (max-width: 900px) {
  .single-product__wrap {
    grid-template-columns: 1fr;
  }
}


/*Woocommerce*/

.woocommerce-breadcrumb {
  text-align: center; /* Centra el texto */
  margin: 20px 0; /* Espacio arriba y abajo */
  font-size: 1rem; /* Tamaño del texto */
  color: #555; /* Color del texto */
}

.woocommerce-breadcrumb a {
  color: #2e7d32 !important;
  text-decoration: none;
  transition: color 0.3s ease;
  font-weight: 700;
}

.woocommerce-breadcrumb a:hover {
  color: #8dbd4d !important; /* Cambia el color al pasar el mouse */
}

.product-scientific-name{
    color: #7d1e42;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 400;
    display: flex; /* Para alinear el ícono con el texto */
}

/* Contenedor del ícono */
.icono-name {
    margin-right: 8px;
    color: #7d1e42; /* Color del ícono */
}

/* * Código para el ícono (Usando Dashicons: Corazón f110)
 */
.icono-name:before {
    content: "\f323"; /* Código Unicode de Dashicon (Ojo) */
    font-family: dashicons; /* Usamos la fuente de Dashicons */
    font-size: 1.2em;
    line-height: 1;
}

.single-product h1{
  color: #2e7d32;
  font-size: 3.6rem !important;
  font-weight: 400;
  margin: 0;
  margin-bottom: 10px;
}

.woocommerce-product-details__short-description p
{
  color: #3e3e3e;
  font-size: 1.2rem;
  line-height: 1.6;
}

.woocommerce div.product {
    width:100% !important;
}

.woocommerce #content div.product div.images,.woocommerce div.product div.images,.woocommerce-page #content div.product div.images,.woocommerce-page div.product div.images {
    width:100% !important;
}


/* Estilos generales del contenedor */
.disponibilidad-meses {
    margin: 0;
    margin-top: 20px;
    font-size: 1.2rem;
    font-weight: 700;
    border-top: 1px solid #eee; /* Línea separadora */
}

/* Estilos generales del título */
.disponibilidad-meses h4{
    color: #7d1e42;
    margin: 20px 0;
    font-size: 1.2rem;
    font-weight: 400;
    display: flex; /* Para alinear el ícono con el texto */
}

/* Contenedor del ícono */
.icono-disponibilidad {
    margin-right: 8px;
    color: #7d1e42; /* Color del ícono */
}

/* * Código para el ícono (Usando Dashicons: Corazón f110)
 */
.icono-disponibilidad:before {
    content: "\f177"; /* Código Unicode de Dashicon (Ojo) */
    font-family: dashicons; /* Usamos la fuente de Dashicons */
    font-size: 1.2em;
    line-height: 1;
}

.icono-embalaje {
    margin-right: 8px;
    color: #7d1e42; /* Color del ícono */
}

/* * Código para el ícono (Usando Dashicons: Corazón f110)
 */
.icono-embalaje:before {
    content: "\f480"; /* Código Unicode de Dashicon (Ojo) */
    font-family: dashicons; /* Usamos la fuente de Dashicons */
    font-size: 1.2em;
    line-height: 1;
}

/* Estilos de la lista de meses */
.disponibilidad-lista {
    list-style: none; /* Quita los puntos de la lista */
    display: flex; /* Habilita el flexbox */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea */
    gap: 8px; /* Espacio entre los elementos */
    padding: 0;
    margin: 10px 0;
}

/* Estilos para cada elemento de la lista (cada mes) */
.disponibilidad-lista li {
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase; /* Asegura que se vean en mayúsculas */
    /* Para controlar el número de elementos por fila */
    /* Aquí se utiliza un ancho base del 12% para que quepan 8 o 9 en una fila */
    flex: 0 0 auto; 
}

/* Estilo para los meses DISPONIBLES */
.mes-disponible {
    background-color: #8dbd4d; /* Naranja disponible */
    color: #fff;
}

/* Estilo para los meses NO DISPONIBLES */
.mes-no-disponible {
    background-color: #f2f2f2; /* Gris no disponible */
    color: #999;
}

/*Sección beneficios del producto*/

/* --- Estilos para la sección de Beneficios --- */

.beneficios-producto {
    margin-top: 30px;
    padding-top: 10px;
    border-top: 1px solid #eee; /* Línea separadora */
}

.beneficios-titulo {
    font-size: 1.2em;
    font-weight: 400;
    color: #7d1e42; /* Color verde para el título */
    display: flex; /* Para alinear el ícono con el texto */
    align-items: center;
    margin: 10px 0;
}

/* Contenedor del ícono */
.icono-beneficios {
    margin-right: 8px;
    color: #7d1e42; /* Color del ícono */
}

/* * Código para el ícono (Usando Dashicons: Corazón f110)
 * Reemplázalo con FontAwesome si lo prefieres
 */
.icono-beneficios:before {
    content: "\f487"; /* Código Unicode de Dashicon (Corazón) */
    font-family: dashicons; /* Usamos la fuente de Dashicons */
    font-size: 1.2em;
    line-height: 1;
}

/* Estilos para el contenido, si es un editor WYSIWYG */
.beneficios-contenido p, 
.beneficios-contenido ul, 
.beneficios-contenido li {
    color: #3e3e3e;
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* ======================================================= */
/* ESTILOS DE PESTAÑAS TIPO TYMPANUS (WooCommerce Tabs)    */
/* ======================================================= */

/* 1. Contenedor principal de las pestañas */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    border-bottom: none !important;
    list-style: none outside !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background-color: #f7f7f7; /* Fondo gris claro */
}

.single-product__tabs{
  margin-top: 5px;
}

.single-product__tabs h2 {
    font-size: 1.2em;
    font-weight: 700;
    color: #7d1e42; /* Color vinotinto para el título */
    display: flex; /* Para alinear el ícono con el texto */
    align-items: center;
    margin: 10px 0;
}

.single-product__tabs p {
      color: #3e3e3e;
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 10px;
}

/* 2. Estilo base de cada LI (Elemento de la pestaña) */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block;
    float: left; /* Ponerlos en línea */
    width: 20%; /* Ajusta el porcentaje según el número de pestañas que tengas */
    text-align: center;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
}

/* 3. Estilo del ENLACE (A) dentro del LI */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 20px 10px;
    text-decoration: none !important;
    color: #333; /* Color verde para texto/ícono inactivo */
    font-weight: 500;
    line-height: 1.2;
    transition: color 0.3s;
}

/* 4. Estilo de la pestaña ACTIVA */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background-color: #fff !important; 
    border-bottom: 3px solid #4CAF50 !important; /* La línea verde inferior */
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #4CAF50; /* Color de texto oscuro para la pestaña activa */
}

.woocommerce-tabs ul.tabs li a::before {
    font-family: 'dashicons' !important; /* Fuerza el uso de la fuente */
    content: '' !important;              /* Previene que otros estilos lo anulen */
    display: block !important;           /* CRUCIAL: Obliga a mostrar el elemento */
    font-size: 24px !important;
    line-height: 1;
    margin: 0 auto 5px auto;
    color: inherit;
}

/* ÍCONOS ESPECÍFICOS SEGÚN LA CLASE DE LA PESTAÑA */

.woocommerce div.product .woocommerce-tabs ul.tabs li.description_tab a::before {
    content: '\f163' !important; 
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.lugar_produccion_tab a::before {
    content: '\f319' !important;
}


.woocommerce-tabs{
  background-color: #f3f3f3;
}

.woocommerce-tabs .panel{
  padding: 2% 4%!important;
}

/* ======================================================= */
/* ESTILO PARA EL CONTENIDO CÓMO SE CONSUME*/
/* ======================================================= */

.contenido-consumo {
    /* Define el ancho máximo si es necesario y centra el contenedor */
    max-width: 1000px; 
    margin: 20px auto 50px; /* Espacio superior, centrado, y espacio inferior antes de las tabs */
    padding: 0 15px; /* Padding para evitar que el texto toque los bordes */
    text-align: center;
}

.contenido-consumo h2{
    font-size: 2rem; /* Ajusta según el diseño de tu tema */
    font-weight: 400;
    line-height: 1.2;
    margin:0 0 20px;
    color: #2e7d32;
    display: block;
}

.contenido-consumo p {
    font-size: 1.1rem!important;
    color: #666;
    line-height: 1.4;
    margin: 0 auto;
}

/* ======================================================= */
/* ESTILO BASE Y DIMENSIONES */
/* ======================================================= */

.related.products .product a.button, 
.related.products .product a.added_to_cart {
    /* Reseteo y visualización */
    display: block; /* Ocupa todo el ancho */
    width: 100%;
    margin-top: 10px; /* Espacio entre el precio y el botón */
    padding: 10px 15px;

    /* Tipografía */
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;

    /* Fondo y Bordes */
    background-color: #4CAF50; /* Color primario (Verde) */
    color: #FFFFFF; /* Color del texto (Blanco) */
    border: 2px solid #4CAF50; /* Borde del mismo color */
    border-radius: 5px; /* Bordes ligeramente redondeados */
    
    /* Transiciones */
    transition: all 0.3s ease; /* Transición suave para el efecto hover */
}

.related.products .product a.button:hover,
.related.products .product a.added_to_cart:hover {
    background-color: #FFFFFF; /* Invierte el fondo (Blanco) */
    color: #4CAF50; /* Invierte el color del texto (Verde) */
    border-color: #4CAF50; /* Mantiene el color del borde */
}

.pageint {
  padding: 48px 20px;
  text-align: center;
}
.pageint .container {
  max-width: 1200px;
  margin: 0 auto;
}

.pageint h1 {
  font-size: 3rem;
  color: #327c36;
  margin: 0;
  margin-bottom: 60px; /* Espacio debajo del título y la línea */
  font-weight: 400;
  position: relative; 
  text-align: center;
}

.pageint h1::after {
  content: ""; 
  display: block;
  width: 100px; /* Ajusta el largo de la línea (subrayado parcial) */
  height: 4px; /* Ajusta el grosor de la línea */
  background-color: #327c36; /* Mismo color verde */
  position: absolute;
  bottom: -20px; /* Mueve la línea 20px debajo del texto */
  left: 50%; /* Mueve el inicio de la línea al 50% del contenedor */
  transform: translateX(-50%);
}

.pageint h2 {
  font-size: 1.4rem;
  color: #e75c35;
  margin: 0;
  margin-bottom: 40px; /* Espacio debajo del título y la línea */
  font-weight: 600;
  position: relative; 
  text-align: center;
}

.pageint h2::after {
  content: ""; 
  display: block;
  width: 100px; /* Ajusta el largo de la línea (subrayado parcial) */
  height: 3px; /* Ajusta el grosor de la línea */
  background-color: #e75c35; /* Mismo color verde */
  position: absolute;
  bottom: -20px; /* Mueve la línea 20px debajo del texto */
  left: 50%; /* Mueve el inicio de la línea al 50% del contenedor */
  transform: translateX(-50%);
}

.pageint p{
  line-height: 1.6;
}

.receta {
  background: #f3f0e7; /* fondo beige como en tu referencia */
  padding: 48px 20px;
}
.receta .container {
  max-width: 1200px;
  margin: 0 auto;
}

.receta h1 {
  font-size: 3rem;
  color: #327c36;
  margin: 0;
  margin-bottom: 60px; /* Espacio debajo del título y la línea */
  font-weight: 400;
  position: relative; 
  text-align: center;
}

.receta h1::after {
  content: ""; 
  display: block;
  width: 100px; /* Ajusta el largo de la línea (subrayado parcial) */
  height: 4px; /* Ajusta el grosor de la línea */
  background-color: #327c36; /* Mismo color verde */
  position: absolute;
  bottom: -20px; /* Mueve la línea 20px debajo del texto */
  left: 50%; /* Mueve el inicio de la línea al 50% del contenedor */
  transform: translateX(-50%);
}

.receta h2 {
  font-size: 1.4rem;
  color: #e75c35;
  margin: 0;
  margin-bottom: 40px; /* Espacio debajo del título y la línea */
  font-weight: 600;
  position: relative; 
  text-align: center;
}

.receta h2::after {
  content: ""; 
  display: block;
  width: 100px; /* Ajusta el largo de la línea (subrayado parcial) */
  height: 3px; /* Ajusta el grosor de la línea */
  background-color: #e75c35; /* Mismo color verde */
  position: absolute;
  bottom: -20px; /* Mueve la línea 20px debajo del texto */
  left: 50%; /* Mueve el inicio de la línea al 50% del contenedor */
  transform: translateX(-50%);
}

.receta p{
  line-height: 1.6;
}

.receta .thumb{
  
}

.receta .thumb img{
  margin-left: 10%;
  width: 80%;
  height: auto;
}

.destinos-tropigold .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 0;
}

.destinos-tropigold .container img{
  width: 100%;
  height: auto;
}

/* =================================================== */
/* A. ESTILOS BASE DEL CARRUSEL Y TRANSICIÓN DE VISTA */
/* =================================================== */

/* Contenedor principal del carrusel/cuadrícula */
.productos-carrusel {
    margin: 0 -15px; /* Compensa el padding que Slick añade por defecto */
    
    /* 🔑 ESTILOS DE TRANSICIÓN: Permiten el fade-out/fade-in */
    opacity: 1;
    transition: opacity 0.5s ease-in-out; 
}

/* 🔑 CLASE DE TRANSICIÓN ACTIVA (usada por JavaScript) */
.productos-carrusel.is-transitioning {
    opacity: 0 !important; /* Forzamos la opacidad a 0 para el desvanecimiento */
}

/* Estilos para cada item dentro del carrusel/cuadrícula */
.producto-item {
    padding: 0 15px; /* Espacio entre los productos */
    text-align: center;
}

/* Ajustes para que las imágenes sean responsivas */
.producto-item img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 10px; /* Centrar y añadir margen */
}

/* =================================================== */
/* B. ESTILOS DE NAVEGACIÓN (PUNTOS Y FLECHAS) */
/* =================================================== */

/* Color de los puntos de navegación */
.slick-dots li button:before {
    color: #327c36; 
}

/* Color de las flechas de navegación */
.slick-prev:before, 
.slick-next:before {
    color: #327c36; 
}

/* =================================================== */
/* C. ESTILOS DE CUADRÍCULA (GRID VIEW) */
/* =================================================== */

/* Estilos de la Cuadrícula: Se aplican cuando Slick se destruye y JS añade .is-grid */
.productos-carrusel.is-grid {
    display: grid; 
    grid-template-columns: repeat(4, 1fr); /* 4 columnas por defecto */
    gap: 30px; 
    
    /* Limpiamos propiedades de Slick que podrían interferir con la cuadrícula */
    transform: none !important;
    padding: 0 0 30px 0;
}

/* Restablecemos el ancho del ítem del producto en modo cuadrícula */
.productos-carrusel.is-grid .producto-item {
    width: 100% !important; /* Cada ítem ocupa su columna */
    padding: 0;
    margin: 0;
}

/* Estilos responsivos para la cuadrícula */
@media (max-width: 1024px) {
    .productos-carrusel.is-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 600px) {
    .productos-carrusel.is-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .productos-carrusel.is-grid {
        grid-template-columns: 1fr;
    }
}

.btn-ver-todos {
    display: inline-block;
    padding: 10px 18px;
    background: #7d1d43;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
}

.btn-ver-todos:hover {
    background: #4f0c27;
    color: #fff;
}

/* =================================================== */
/* A. Estilo de Tarjetas de Producto (Cuadrícula) */
/* =================================================== */

.woocommerce ul.products li.product {
    /* Opcional: Elimina bordes o padding por defecto si existen */
    border: none;
    box-shadow: none;
    position: relative; /* Necesario para que el título sea un overlay */
    overflow: hidden; /* Asegura que el borde del overlay sea limpio */
    padding: 0;
    margin-bottom: 2.92em; 
}

/* 1. Contenedor del nombre de la fruta (el bloque naranja) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    /* Estilos del "botón" naranja */
    background-color: #7d1e42; 
    color: #ffffff; 
    
    /* Posicionamiento como overlay en la parte inferior */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    
    /* Estilos de Texto */
    text-align: center;
    margin: 0; /* Quita el margen que WooCommercé pueda añadir */
    font-size: 1.1em; 
    z-index: 10; /* Asegura que esté por encima de otros elementos */
}

/* 2. El enlace de la miniatura (cubre toda la tarjeta) */
.woocommerce ul.products li.product a:first-child {
    display: block;
    text-decoration: none;
    height: 100%; /* Asegura que el enlace cubra toda la tarjeta */
}

/* 3. Ajustes de la imagen */
.woocommerce ul.products li.product img {
    border: none;
    box-shadow: none;
    /* Esto es clave para el diseño de overlay */
    display: block;
    width: 100%;
    height: auto;
}

/* 4. Asegura que el título (el overlay naranja) es cliqueable */
.woocommerce ul.products li.product .woocommerce-loop-product__title a {
    /* El título es un enlace por defecto. Le quitamos el subrayado */
    text-decoration: none;
    color: inherit;
}

.woocommerce ul.products li.product .button {
    margin-top:0;
}

.woocommerce ul.products li.product a img {
    margin: 0;
}

.frutas-indice-productos.alinear-derecha {
    margin-bottom: 25px; 
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    
    /* PROPIEDADES PARA ALINEAR A LA DERECHA Y EN LÍNEA */
    /*display: flex;  Habilita Flexbox */
    /*justify-content: flex-end;  Alinea los elementos a la derecha del contenedor */
    /*align-items: center;  Centra verticalmente el texto y el select */
    gap: 10px; /* Espacio entre el texto y el select */
}

/* Estilo para la etiqueta de texto */
.frutas-indice-productos .selector-label {
    color: #139047;
    font-size: 1em;
    font-weight: 600; /* Opcional: Hace el texto más visible */
    white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
    text-transform: uppercase;
}

/* Estilo para el select */
.selector-frutas {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    min-width: 200px; 
}


#menu-menu-principal { 
    position: relative; /* Base para el posicionamiento del submenú */
}

/* 2. Elemento Raíz del Mega Menú (el <li> con la clase trigger) */
#menu-menu-principal li.has-mega-menu {
    position: static !important; /* Esencial para el despliegue de borde a borde */
    padding: 0 !important;
    margin: 0 !important;
    background: none !important; /* Eliminar fondo verde */
}

/* 3. El Panel del Mega Menú (el submenú .sub-menu) */
#menu-menu-principal li.has-mega-menu > .sub-menu {
    /* POSICIONAMIENTO Y TAMAÑO DE CAJA COMPLETA */
    position: absolute !important;
    top: 30px !important; 
    left: 0 !important;
    right: 0 !important;
    
    /* ESTILO VISUAL */
    background: #fff !important; 
    border-top: 2px solid #139047 !important; /* Borde superior verde Tropigold */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
    padding: 25px 60px !important;
    
    /* DISPOSICIÓN DE COLUMNAS (Flexbox) */
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px; /* Espacio entre columnas */
    
    /* CONTROL DE VISIBILIDAD */
    z-index: 9999 !important; 
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s, visibility 0.3s;
    
    list-style: none !important;
}

/* Muestra el Mega Menú al hacer hover */
#menu-menu-principal li.has-mega-menu:hover > .sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 4. Estructura de Columnas (Elementos de Nivel 2) */
/* Todos los elementos de Nivel 2 actúan como columnas (ej. Arándanos, Curuba, etc.) */
#menu-menu-principal li.has-mega-menu > .sub-menu > li {
    /* 5 Columnas (18% es 100% / 5 columnas - margen) */
    flex: 1 1 18% !important; 
    min-width: 120px !important;
    margin-right: 2% !important;
    padding: 0 !important;
    border: none !important;
    float: none !important;
    display: block !important;
    background: none !important; /* Eliminar fondo verde */
}

/* 5. Estilos de Títulos de Columna (Nivel 2) */
#menu-menu-principal li.has-mega-menu > .sub-menu > li > a {
    color: #333 !important; 
    font-size: 1em !important;
    padding: 0 !important;
    display: block !important;
    background: none !important; 
}

/* 6. Estilos de Enlaces de Producto (Nivel 3) */
/* El contenedor de la lista de productos */
#menu-menu-principal li.has-mega-menu .sub-menu .sub-menu {
    position: static !important;
    display: block !important;
    background: none !important;
    padding: 0 !important;
    margin-top: 5px !important;
}

/* Enlaces individuales de producto */
#menu-menu-principal li.has-mega-menu .sub-menu .sub-menu li {
    flex: auto !important;
    margin: 0 0 5px 0 !important;
    background: none !important;
    display: block !important;
    width: 100% !important;
}

#menu-menu-principal li.has-mega-menu .sub-menu .sub-menu li a {
    color: #666 !important;
    font-size: 0.9em !important;
    padding: 2px 0 !important;
    background: none !important;
    text-transform: none !important;
    display: block !important;
}

#menu-menu-principal li.has-mega-menu .sub-menu .sub-menu li a:hover {
    color: #ef9032 !important; 
    background: none !important;
    text-decoration: underline !important;
}

/* --- FIN CÓDIGO MEGA MENÚ (CSS - FORZANDO POR ID ÚNICO) --- */

/* Estilo básico para Contact Form 7 */
.wpcf7-form label {
    display: block;
    margin-bottom: 15px;
    font-weight: bold;
    color: #333;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 5px;
    box-sizing: border-box; /* Asegura que no se salga del contenedor */
}

.wpcf7-form input[type="submit"] {
    background-color: #25d366; /* Color verde tipo WhatsApp o corporativo */
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s ease;
}

.wpcf7-form input[type="submit"]:hover {
    background-color: #128c7e;
}