/*
 Theme Name: Astra Child
 Theme URI: 
 Description: Tema hijo de Astra para personalizaciones
 Author: Eric Capalbo
 Author URI: 
 Template: astra
 Version: 1.0.0
*/

/* Aquí podrás agregar tus estilos personalizados */


/* =================================================================================
============= PAGINA DE INICIO (LANDING PAGE) ======================================
==================================================================================== */

/* Barra Promocional estilo Hero */
.promo-hero {
  background-color: #400F9F;
  text-align: center;
  padding: 60px 20px;
  font-family: 'Montserrat', sans-serif;
}

.promo-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  margin: auto;
  color: #f9f9f9;
}

.promo-hero span {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  background: #fff;
  color: #400F9F;
  padding: 5px 12px;
  border-radius: 8px;
}

.promo-hero span:hover {
    background-color: #400F9F;
    color: #f9f9f9;
}

/* Sección de Iconos */
.benefits-section {
  padding: 40px 20px;
  background: #f9f9f9; /* Fondo claro para contraste */
}

.benefits-container {
  display: flex;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
  text-align: center;
}

.benefit-box {
  flex: 1 1 200px;
  max-width: 250px;
}

.benefit-box:hover {
    transition: 0.3s ease;
    transform: translateY(3px);
}
.benefit-icon {
  font-size: 40px;
  margin-bottom: 10px;
  color: #400F9F;
}

.benefit-box h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.4rem;
  margin: 5px 0;
  padding: 30px 0;
}

.benefit-box p {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  margin: 0;
  color: #444;
}

.benefit-box .descuento-benefits {
    background-color: #006600;
    padding: 10px;
    border-radius: 8px;
    color: #f9f9f9;
}
.benefit-box .highlight {
  color: #400F9F; 
  font-weight: 700;
  font-size: 1.1rem;
}


/* PRODUCTOS MAS VENDIDOS */

/* ==========================================================================
   CARRUSEL DE PRODUCTOS SWIPER - PERSONALIZACIONES
   ========================================================================== */

/* Estilos para el carrusel de productos */

/* 1. Contenedor principal de la sección del carrusel */
.carrusel-seccion-container {
    max-width: 1200px; /* ¡ESTA ES LA CLAVE! Define el ancho máximo del carrusel. Ajústalo a tu gusto. */
    margin-left: auto;  /* Centra el contenedor horizontalmente */
    margin-right: auto; /* Centra el contenedor horizontalmente */
    padding: 40px 15px; /* Espacio vertical y un pequeño padding lateral de seguridad */
    width: 100%;        /* Asegura que ocupe el 100% hasta llegar al max-width */
}

/* 2. Estilo para el título de la sección del carrusel */
.carrusel-titulo-seccion {
    text-align: center;
    font-size: 2.5rem;
    color: #400F9F;
    margin-top: 30px;
    margin-bottom: 30px; /* Espacio entre el título y el carrusel */
}

 
/* 1. Contenedor para el margen exterior */
.swiper-container-wrapper {
    margin-top: 40px;    /* Espacio superior */
    margin-bottom: 40px; /* Espacio inferior */
    padding-left: 30px;  /* Espacio lateral izquierdo */
    padding-right: 30px; /* Espacio lateral derecho */
    position: relative;  /* Necesario para posicionar las flechas fuera */
}

.mi-carrusel-productos {
    width: 100%;
    height: auto;
}

.mi-carrusel-productos .swiper-slide {
    text-align: center;
    background: transparent; /* Hacemos el fondo del slide transparente */
}

/* 2. Tarjeta de producto para un mejor diseño */
.mi-carrusel-productos .product-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Alinea el contenido */
    height: 100%; /* Ocupa toda la altura del slide */
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    padding-bottom: 20px; /* Espacio para el botón */
}

.mi-carrusel-productos .product-card a.product-link {
    text-decoration: none;
    color: #333;
}

.mi-carrusel-productos .product-card img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.mi-carrusel-productos .woocommerce-loop-product__title {
    font-size: 28px;
    margin: 15px 10px;
    padding: 0 10px;
    min-height: 40px; /* Evita saltos de altura si los títulos tienen 1 o 2 líneas */
}

.mi-carrusel-productos .price {
    font-size: 1.8rem;
    font-weight: bold;
    color: #f9f9f9; /* Verde de tu temática */
    background-color: #400F9F;
    margin: 0 20px 15px 20px;
}

/* 3. Estilos para el botón "Agregar al carrito" */
.mi-carrusel-productos .add_to_cart_button {
    margin: 0 auto !important; /* Centrar el botón */
    background-color: #f5f5f5 !important; /* Color de fondo */
    color: #003300 !important; /* Color del texto */
    border-radius: 5px !important;
    padding: 10px 20px !important;
    text-decoration: none !important;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    font-size: 20px !important; 
}

.mi-carrusel-productos .add_to_cart_button:hover {
  background-color: #003300 !important;
  color: #f9f9f9 !important;
  transition: ease 0.7s !important;
}
/* Estilo cuando se está añadiendo (AJAX) */
.mi-carrusel-productos .add_to_cart_button.loading {
    background-color: #ccc !important;
    opacity: 0.7;
}

/* Estilo cuando ya se ha añadido */
.mi-carrusel-productos .added_to_cart {
    display: none !important; /* Ocultamos el enlace "Ver carrito" para mantener limpio el diseño */
}

/* 4. Estilo y posición de las flechas de navegación */
.mi-carrusel-productos .swiper-button-next,
.mi-carrusel-productos .swiper-button-prev {
    color: #ffffff; /* Color de las flechas */
    background-color: #400F9F;
    border-radius: 50%;
    padding: 5px 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* Posicionar las flechas fuera del carrusel */
.swiper-container-wrapper .swiper-button-prev {
    left: 0; /* Ajusta este valor si necesitas más o menos espacio */
}
.swiper-container-wrapper .swiper-button-next {
    right: 0; /* Ajusta este valor si necesitas más o menos espacio */
}

/*
 * ===============================================================
 * ESTILOS PARA EL CAMPO DE CANTIDAD PERSONALIZADO
 * ===============================================================
 */

/* 1. Contenedor principal */
.mi-quantity-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px auto;
    max-width: 160px;
    border-radius: 8px;
    overflow: hidden; /* Para que los hijos respeten los bordes redondeados */
}

/* 2. Botones personalizados [+] y [-] */
.mi-quantity-btn {
    width: 60px;
    height: 60px;
    background-color: #003300;
    border: none;
    color: #f9f9f9;
    font-weight: bold;
    cursor: pointer;
    padding: 10px 10px;
    transition: background-color 0.2s ease;
    margin: 4px;
    
}

.mi-quantity-btn:hover {
    background-color: #400F9F;
    color: #f9f9f9;
}

/* 3. Campo del número */
.mi-quantity-input {
    width: 50px;
    height: 50px;
    text-align: center;
    font-weight: bold;
    border: none;
    -moz-appearance: textfield; /* Ocultar flechas en Firefox */
}

.woocommerce-js input[type="number"] {
    font-size: 1.2rem;
}

.mi-quantity-input::-webkit-outer-spin-button,
.mi-quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Ocultar flechas en Chrome/Safari */
    margin: 0;
}



/*
 * ----------------------------------------------------------------
 * Estilos para la Sección de Asesoramiento Gratuito
 * ----------------------------------------------------------------
 */

/* 1. Contenedor principal con efecto Parallax */
.seccion-asesoramiento-container {
    position: relative;
    padding: 80px 20px;
    color: #fff;
    text-align: center;
    
    /* --- Imagen de fondo y efecto Parallax --- */
    background-image: url('./img/hero.jpg'); /* <-- ¡REEMPLAZA ESTO! */
    background-attachment: fixed; /* ¡Esta es la propiedad que crea el efecto parallax! */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Capa oscura semitransparente para mejorar la legibilidad */
.seccion-asesoramiento-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7); /* 70% de oscuridad, ajústalo si es necesario */
    z-index: 1;
}

/* Contenido (título, párrafo, botón) */
.seccion-asesoramiento-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

/* 2. Estilos para el Título */
.seccion-asesoramiento-content .titulo-wrapper {
    display: inline-block; /* Para que el fondo se ajuste al texto */
    background-color: #fff;
    border-radius: 8px;
    padding: 10px 30px;
    margin-bottom: 40px;
}

.seccion-asesoramiento-content .titulo-wrapper h2 {
    color: #003300; /* Un verde oscuro, puedes ajustarlo */
    font-size: 2.4rem;
    margin: 0;
}

/* 3. Estilos para el Párrafo */
.seccion-asesoramiento-content p {
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 40px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Sombra de texto para mejorar legibilidad */
}

/* 4. Estilos para el Botón Violeta */
.boton-asesoramiento {
    display: inline-block;
    background-color: #400F9F; /* Color violeta principal */
    color: #fff; /* Texto blanco */
    padding: 15px 35px;
    border-radius: 50px; /* Bordes completamente redondeados para un look moderno */
    text-decoration: none !important;
    font-weight: bold;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid #f9f9f9; /* Borde del mismo color */
    transition: all 0.3s ease-in-out;
}

/* Efecto Hover: colores invertidos */
.boton-asesoramiento:hover {
    background-color: #fff; /* Fondo blanco */
    color: #673AB7; /* Texto violeta */
    border-color: #fff; /* Borde blanco */
    transform: translateY(-3px); /* Pequeño salto hacia arriba */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}


/*
 * ----------------------------------------------------------------
 * Estilos para la Sección de Medicina Ancestral
 * ----------------------------------------------------------------
 */

/* 1. Contenedor principal de la sección */
.seccion-ancestral-container {
    position: relative; /* Necesario para superponer el contenido sobre la imagen de fondo */
    padding: 60px 20px; /* Espaciado vertical y horizontal */
    background-image: url('./img/img1.jpg'); /* <-- ¡REEMPLAZA ESTO! */
    background-size: cover; /* La imagen cubre todo el contenedor */
    background-position: center center; /* La imagen se centra */
    background-attachment: fixed; /* Efecto parallax opcional, la imagen no se mueve al hacer scroll */
    color: #fff; /* Color de texto por defecto para esta sección */
    text-align: center;
}

/* Capa oscura semitransparente para mejorar la legibilidad del texto */
.seccion-ancestral-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6); /* Ajusta la opacidad (0.6 es 60% oscuro) */
    z-index: 1;
}

/* Contenido de la sección (título, texto, botones) */
.seccion-ancestral-content {
    position: relative; /* Para que se muestre por encima de la capa oscura */
    z-index: 2;
    max-width: 800px; /* Ancho máximo del contenido para que no sea demasiado ancho en pantallas grandes */
    margin: 0 auto; /* Centra el contenido */
}

.seccion-ancestral-content h2 {
    font-size: 2.8rem; /* Tamaño de fuente grande para el título */
    margin-bottom: 1rem;
    background-color: #f9f9f9;
    border-radius: 8px;
}

.seccion-ancestral-content p {
    font-size: 1.4rem;
    margin-bottom: 2rem;
}

/* 2. Contenedor de la fila de botones (la clave de la solución responsiva) */
.fila-botones {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Permite que los botones se apilen si no caben */
    gap: 20px; /* Espacio entre botones */
    margin-bottom: 20px;
}

/* 3. Estilos para cada botón */
.mi-boton {
    display: inline-block;
    padding: 12px 28px;
    border: 2px solid #fff;
    color: #fff;
    background-color: transparent;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: bold;
    text-transform: uppercase; /* Para que el texto esté en mayúsculas */
    letter-spacing: 1px;
    transition: all 0.3s ease;
    font-size: 1.4rem;
    min-width: 220px; /* Ancho mínimo para mantener la forma */
}

.mi-boton:hover {
    background-color: #fff;
    color: #003300;
}

/* Estilo específico para el botón de catálogo */
.boton-catalogo {
    background-color: #400F9F; /* Un color morado más vibrante */
    border-color: #f9f9f9;
    width: 100%;
    max-width: 460px; /* Ancho máximo del botón de catálogo */
    font-size: 1.8rem;
}

.boton-catalogo:hover {
    background-color: #f9f9f9;
    border-color: #400F9F;
    color: #400F9F;
}


/*
 * ===============================================================
 * ESTILOS PERSONALIZADOS PARA LA PÁGINA DE TIENDA (WOOCOMMERCE)
 * ===============================================================
 */

/* 1. Fondo de la página de la tienda y archivos de productos */
/* Usamos las clases de body que WordPress añade para ser específicos */
body.post-type-archive-product, 
body.tax-product_cat, 
body.tax-product_tag {
    background-color: #F5F5F5; /* Un gris muy claro, ¡cámbialo por el color que prefieras! */
}

/* 2. Estilos para la tarjeta de cada producto */
.woocommerce ul.products li.product {
    border: 1px solid #E0E0E0;
    border-radius: 12px; /* Bordes más redondeados */
    background-color: #FFFFFF; /* Fondo blanco para cada tarjeta de producto */
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* Sombra sutil */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px); /* Efecto de levantar la tarjeta al pasar el ratón */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 3. Título del producto (más grande) */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.4rem !important; /* Aumenta el tamaño del título. Ajusta '1.4rem' si lo quieres más grande o pequeño */
    color: #161616;
    min-height: 50px; /* Ayuda a alinear productos con títulos de 1 o 2 líneas */
    margin-bottom: 15px;
    text-align: center;
}

/* 4. Precio del producto (más grande y con color) */
.woocommerce ul.products li.product .price {
    font-size: 1.8rem !important; /* Aumenta significativamente el tamaño del precio */
    font-weight: bold;
    background-color: #400F9F;
    color: #f9f9f9 !important; /* ¡Tu color violeta de marca! */
    margin-bottom: 20px;
    border-radius: 8px;
    display: block; /* Asegura que ocupe su propia línea */
    text-align: center;
}



/* 5. Botón "Añadir al carrito" (más grande y estilizado) */
.woocommerce ul.products li.product .button.add_to_cart_button {
    width: 100%; /* Ocupa todo el ancho de la tarjeta */
    background-color: #003300 !important; /* Tu color verde de marca */
    color: #FFFFFF !important;
    font-size: 1.1rem !important;
    font-weight: bold;
    padding: 15px 10px !important; /* Más alto */
    border-radius: 8px !important;
    text-transform: uppercase;
    margin-top: auto; /* Empuja el botón hacia abajo si las tarjetas tienen alturas diferentes */
    transition: background-color 0.3s ease;
    text-align: center;
}

.woocommerce ul.products li.product .button.add_to_cart_button:hover {
    background-color: #F2F2F2 !important; /* Un verde un poco más oscuro al pasar el ratón */
    color: #003300 !important;
}

/* Ocultar el enlace "Ver carrito" que aparece después de añadir */
.woocommerce ul.products li.product .added_to_cart {
    display: none !important;
}

 
/* ================================================================
=== ESTILOS FORMULARIO DE FINALIZAR COMPRA ===
=================================================================== */
.woocommerce .checkout {
    max-width: 1200px !important;
}

/* 5. Media Query para Responsividad en Móviles */
@media (max-width: 768px) {
    .woocommerce .col2-set, 
    .woocommerce-checkout form.checkout {
        margin: 20px auto; /* Menos espacio vertical en móviles */
    }

    #order_review_heading {
        font-size: 1.5rem;
        margin-top: 30px;
        padding-top: 30px;
    }
}


/* Media Querys Portatil */

@media (max-width: 1366px) {
    .mi-carrusel-productos .woocommerce-loop-product__title {
        font-size: 24px;
    }
}

/* Media Query para adaptabilidad en móviles */
@media (max-width: 768px) {
    .seccion-asesoramiento-container {
        padding: 60px 15px;
        background-attachment: scroll; /* Desactivamos el parallax en móviles, ya que a veces da problemas de rendimiento */
    }
    .carrusel-titulo-seccion {
        font-size: 2rem;
    }
    .mi-carrusel-productos .woocommerce-loop-product__title {
        font-size: 20px;
       
    }

    .seccion-asesoramiento-content .titulo-wrapper h2 {
        font-size: 1.5rem;
    }

    .seccion-asesoramiento-content p {
        font-size: 1rem;
    }
    
    .boton-asesoramiento {
        width: 100%; /* El botón ocupa todo el ancho disponible */
        max-width: 350px; /* Pero no más de 350px */
        padding: 15px 20px;
    }
}