/* =========================================
   SERVICIOS — ESTÉTICA PASTEL CELESTE
   ========================================= */

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #BEE6FF; /* Background color for the entire website, including individual sections */
  --default-color: #c5ffec; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #BEE6FF; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #8dff21; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #1E1E1E; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #2E2E2E; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}
/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #c5ffec;  /* The default color of the main navmenu links */
  --nav-hover-color: #FFA2FF; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #BEE6FF; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #BEE6FF; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #BEE6FF; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #FFA2FF; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}
/* === PÁGINA === */
.servicios-page {
  background: var(--serv-bg);
  padding-top: 0;
}

/* HERO BANNER */
.hero-banner img {
  border-radius: 0 0 0px 0px;
  box-shadow: 0 4px 18px var(--serv-shadow);
}

.category-card {
  background: var(--serv-white);
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 4px 10px var(--serv-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.category-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px var(--serv-shadow);
}

.category-card img {
  border-radius: 14px;
  margin-bottom: 10px;
}
/* === CATEGORY CARDS === */
.categories-carousel {
    padding: 40px 0px !important;
}

/* 💡 REGLAS A AÑADIR PARA CENTRAR EL CARRUSEL */
.categories-carousel .categoriesSwiper {
    /* 1. Asegura que ocupe todo el espacio disponible lateralmente */
    width: 100%; 
    /* 2. Centra el bloque si por alguna razón no ocupa el 100% */
    margin-left: 0px;
    margin-right: 0px;
}
/* ------------------------------------------- */

/* ... (el resto de tus estilos para .category-card, etc.) */
/* 💡 REGLAS OPCIONALES: Si quieres que el carrusel se extienda
   a los bordes del contenido principal y el descentrado se
   debe a la flecha pegada al borde, puedes probar esto. */

@media (min-width: 576px) {
    /* Esto cancela el padding lateral que Bootstrap agrega al .container */
    .categories-carousel .categoriesSwiper {
        width: calc(100% + 40px); /* Aumenta el ancho */
        margin-left: 0px;       /* Mueve 15px a la izquierda */
        margin-right: 0px;      /* Mueve 15px a la derecha */
    }
}
/* Los valores de 15px y 30px son típicos de Bootstrap. 
   Asegúrate de que coincidan con el padding de tu .container. */

/* Swiper Pagination */
.swiper-pagination-bullet {
  background: var(--serv-accent) !important;
  opacity: .5;
}
.swiper-pagination-bullet-active {
  opacity: 1;
}
/* 🎨 Estilos para las Flechas de Navegación */

.categoriesSwiper .swiper-button-next,
.categoriesSwiper .swiper-button-prev {
    /* Color de tu acento (o el que quieras que resalte) */
    color: #ffa3ff; /* El color de tu hover: #FFA2FF */
    
    /* Si las flechas son muy pequeñas, puedes aumentar su tamaño */
    font-size: 20px; 
}

.categoriesSwiper .swiper-button-next:hover,
.categoriesSwiper .swiper-button-prev:hover {
    color: var(--serv-dark); /* Color oscuro al pasar el mouse */
}
.categories-carousel {
    padding: 60px 50px!important; /* Padding superior e inferior, 0 lateral */
}

/* El Swiper ocupará el 100% de esta sección */
.categories-carousel .categoriesSwiper {
    width: 100%; 
    /* No es necesario auto-margin aquí, ya que queremos 100% de ancho */
}

/* === SECTION TITLES === */
.section-title h2 {
  font-weight: 600;
  font-size: 2rem;
  color: var(--serv-dark);
}

/* === SERVICE CARDS === */
.service-card {
  background: var(--serv-white);
  border-radius: 20px;
  overflow: visible!important;
  box-shadow: 0 4px 14px var(--serv-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding-bottom: 20px;
}

.service-card img {
  width: 100%;
  height: auto;
}

.service-card h3 {
  font-weight: 600;
  padding: 15px;
  margin: 0;
  color: var(--serv-dark);
}

.service-card p {
  margin: 0 15px;
  color: #333;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 26px var(--serv-shadow);
}

.service-card .btn {
  margin-left: 15px;
  margin-top: 10px;
  background: var(--serv-accent);
  border: none;
  color: var(--serv-dark);
  border-radius: 14px;
  padding: 8px 20px;
  transition: background 0.3s;
}

.service-card .btn:hover {
  background: #8CCFFF;
}

/* === COLLECTION HIGHLIGHT === */
.collection-highlight img {
  border-radius: 20px;
  box-shadow: 0 6px 20px var(--serv-shadow);
}

.collection-highlight h2 {
  color: var(--serv-dark);
  font-weight: 700;

}

.collection-highlight p {
  color: #333;
}

.collection-highlight .btn {
  background: #c61737;
  border: none;
  color:#1A1A1A;
  border-radius: 14px;
  padding: 10px 24px;
  font-weight: 800;
}

.collection-highlight .btn:hover {
  background: #8CCFFF;
}

/* === POPULAR SERVICES === */
.popular-card {
  background: var(--serv-white);
  border-radius: 18px;
  padding-bottom: 25px;
  box-shadow: 0 4px 12px var(--serv-shadow);
  transition: all 0.3s ease;
  text-align: center;
}

.popular-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.popular-card img {
  border-radius: 18px 18px 10px 10px;
  width: 100%; 
  height: auto;
  display: block;
}

/* === ANIMACIONES SUTILES === */
.section, .service-card, .popular-card, .category-card, .collection-highlight {
  animation: fadeUp 0.7s ease forwards;
  opacity: 1!important;
  visibility: visible !important;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Cambia color del menú SOLO en Servicios */
.servicios-page .navbar a,
.servicios-page .navbar li a {
    color: #1A1A1A !important; /* o el color que prefieras */
}

/* Si el menú tiene hover o active */
.servicios-page .navbar a:hover,
.servicios-page .navbar a:focus {
    color: #4A4A4A !important;
}
/* Cambia color del menú SOLO en la página Servicios */

/* enlaces principales */
.servicios-page #navmenu a,
.servicios-page .navmenu a,
.servicios-page nav#navmenu ul li a {
  color: #1A1A1A !important;    /* texto del menú */
  transition: color .18s ease;
}

/* enlace activo / dropdown label */
.servicios-page .navmenu li a.active,
.servicios-page .navmenu li a:hover,
.servicios-page .navmenu li a:focus,
.servicios-page .navmenu .dropdown > a {
  color: #0f0f0f !important;
}

/* icono de menu móvil (hamburger) */
.servicios-page .mobile-nav-toggle,
.servicios-page .mobile-nav-toggle i {
  color: #1A1A1A !important;
}

/* links de redes en header (si hace falta) */
.servicios-page .header-social-links a  {
  color: color-mix(in srgb, var(--nav-mobile-background-color), transparent 40%);
  padding-left: 6px;
  display: inline-block;
  transition: 0.3s;
  font-size: 16px;
}
.servicios-page .header-social-links a:hover {
  color: var(--nav-hover-color);
}

/* dropdown inside (subitems) */
.servicios-page .navmenu .dropdown ul li a {
  color: #1A1A1A !important;
}

/* si el header tiene un fondo semitransparente en main.css, asegúrate que el texto contraste */
.servicios-page .header.light-background {
  background: transparent; /* o el valor que quieras */
}

/* si querés forzar el hover del link dentro del dropdown con más especificidad */
.servicios-page nav#navmenu ul li .dropdown ul li a:hover {
  color: #0a0a0a !important;
}
/* HEADER EN SERVICIOS */
.servicios-page #header {
  background-color: #BEE6FF; /* mismo pastel del fondo */
  box-shadow: none !important;
  padding: 15px 0;
  transition: all 0.5s;
  z-index: 997;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}
/* LINK DEL MENÚ */
.servicios-page #navmenu a {
  color: #1A1A1A !important;
  font-weight: 500;
}
a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}
/* Hover */
.servicios-page #navmenu a:hover,
.servicios-page #navmenu li:hover > a {
  color: #ffa3ff!important; 
}
/* DROPDOWN */
.servicios-page #navmenu .dropdown ul {
  background-color: #BEE6FF !important;
  border-radius: 12px;
  padding: 12px 0;
}

/* Ítems del dropdown */
.servicios-page #navmenu .dropdown ul li a {
  color: #1A1A1A !important;
  background-color: #BEE6FF !important;
  font-weight: 500;
}

/* Hover dentro del dropdown */
.servicios-page #navmenu .dropdown ul li a:hover {
  background-color: #FFA2FF !important;
  color: #1A1A1A !important;
  border-radius: 8px;
}
.servicios-page .mobile-nav-toggle {
  color: #1A1A1A !important;
}

/* 2. El wrapper limita el ancho del CONTENIDO y lo centra */
.carousel-wrapper {
    max-width: 1200px; /* Ancho máximo de tu carrusel */
    margin-left: auto;
    margin-right: auto;
    
    /* Añadimos padding a este wrapper para que las flechas tengan espacio lateral */
    padding: 0 0 !important; /* CLAVE: Este espacio de 50px es donde flotarán las flechas */
}

/* 3. El contenedor Swiper debe tener overflow: hidden (por defecto) y width: 100% */
.categoriesSwiper {
    width: 100%!important;
    /* Mantenemos el overflow de Swiper */
    overflow: hidden; 
}

/* 4. CLAVE: Posicionamos las flechas respecto al .categories-carousel (el padre más lejano con position: relative) */
.categoriesSwiper .swiper-button-next,
.categoriesSwiper .swiper-button-prev {
    
    /* Le decimos a Swiper que ignore el .carousel-wrapper y use el .categories-carousel como referencia */
    position: absolute !important; 
    
    /* Mantenemos tus estilos de tamaño y color (círculos) */
    width: 44px !important;            
    height: 44px !important;           
    background-color: var(--serv-white) !important; 
    border-radius: 50% !important;     
    color: #ffa3ff !important; 
    
    top: 50% !important;
    transform: translateY(-50%) !important; 
    z-index: 10 !important;
}

/* 5. Posicionamos en el margen del wrapper (dentro de los 50px de padding) */
.categoriesSwiper .swiper-button-prev {
    /* La flecha izquierda se posiciona 5px desde el borde izquierdo del .categories-carousel */
    left: -10px !important; 
}

.categoriesSwiper .swiper-button-next {
    /* La flecha derecha se posiciona 5px desde el borde derecho del .categories-carousel */
    right: -10px !important; 
}
/* 1. Estilos Base para el Título del Producto y Transición */
.category-card p {
    /* Color base del texto (ejemplo) */
    color: #1A1A1A; 
    
    /* Tamaño y peso (ejemplo) */
    font-size: 1.1rem; 
    font-weight: 600; 
    
    /* CLAVE: Aplica una transición suave al color */
    transition: color 0.3s ease-in-out; 
    
    /* Espacio (ejemplo) */
    margin-top: 5px;
    margin-bottom: 0; 
}

/* 2. Estilo al pasar el ratón sobre la TARJETA */
.category-card:hover p {
    /* El color que tomará el texto al hacer hover sobre la tarjeta */
    color: #FFA2FF; /* Puedes usar tu color de acento pastel */
}
/* === COLLECTION HIGHLIGHT === */

/* Estilos para el párrafo dentro de la sección de destaque */
.collection-highlight p {
    color: #1A1A1A; /* ¡Usa el color pastel de tu paleta, por ejemplo! */
    font-size: 1.5rem; /* Opcional: para que se vea un poco más grande que el texto normal */
    font-weight: 700; /* Opcional: para que no sea tan delgado */
    margin-top: 5px; /* Opcional: para pegarlo un poco más al título */
}
/* === COLLECTION HIGHLIGHT === */

.collection-highlight h2 {
  /* Color actual: var(--serv-dark) */
  color: #1A1A1A; /* Puedes usar un color oscuro o tu color de acento pastel */
  
  /* Peso de la fuente (ya lo tenías, puedes aumentarlo) */
  font-weight: 700; 
  
  /* Nuevo tamaño de fuente */
  font-size: 2.2rem; /* Por ejemplo, para que sea un título más grande */
  margin-bottom: 5px;
}
/* Apuntamos al contenedor de la imagen */
.collection-highlight .col-lg-6:first-child img {
    /* CLAVE 1: Activar transiciones suaves */
    transition: transform 0.3s ease-in-out;
}

.collection-highlight .col-lg-6:first-child img:hover {
    /* CLAVE 2: Mover ligeramente hacia arriba y darle una sombra sutil */
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); 
}
/* Estilos Base del Botón (Asegura la Transición) */
.collection-highlight .btn {
    /* ... Tus estilos de color, fuente, etc. ... */
    
    /* CLAVE 1: Aplicar transición a todas las propiedades importantes (transform y shadow) */
    transition: all 0.3s ease-in-out; 
    
    /* Añadir una sombra sutil para profundidad */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
}

/* Estado Hover del Botón (Añadiendo Transformación) */
.collection-highlight .btn:hover {
    background: #8CCFFF; 
    
    /* CLAVE 2: Escalar ligeramente el botón (lo hace crecer un 3%) */
    transform: scale(1.03); 
    
    /* CLAVE 3: Elevar la sombra para que se vea "flotando" */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); 
}/* Estilos Base del Párrafo (Necesita la Transición) */
.collection-highlight p {
    /* ... Tus estilos de color, fuente, etc. ... */
    
    /* CLAVE 1: Aplicar transición al movimiento */
    transition: transform 0.3s ease-in-out;
}

/* Estado Hover (Cuando el ratón está sobre la tarjeta, movemos el párrafo) */
.collection-highlight .row:hover .collection-highlight p {
    /* Mueve el párrafo 5px a la derecha */
    transform: translateX(5px);
}
/* 1. Estilos Base del Párrafo (Asegura la Transición) */
.collection-highlight p {
    /* ... Tus estilos de color, font-weight, etc. ... */
    
    /* CLAVE 1: Aplicar transición al movimiento (Esto ya estaba bien) */
    transition: transform 0.3s ease-in-out;
}

/* 2. CLAVE: Aplicamos el hover al div que contiene el texto (col-lg-6) */
.collection-highlight .col-lg-6:hover p {
    /* ➡️ Mueve el párrafo 5px a la derecha */
    transform: translateX(5px);
}
/* Estilos para el título del producto */
.popular-card h3 {
  /* Asegura que el color sea visible */
  color:#1A1A1A;
  text-align: center;
  padding: 15px 10px 0 10px; 
  /* Agrega relleno para separar el texto de los bordes laterales de la tarjeta */
  
  /* Asegura que el texto no esté muy pegado a la imagen */
  margin-top: 0; 
  
  /* Estilizado opcional (negrita y tamaño) */
  font-weight: 600;
  font-size: 1.3rem;
}
/* Estilos para todos los títulos de sección (incluido "Productos Digitales") */
.section-title h2 {
    /* CLAVE: Cambiar el color aquí */
    color: #1A1A1A; 
    font-weight: 600;
    font-size: 2rem;
    transition: all 0.3s ease-in-out;
    
}
.section-title h2:hover {
    /* CLAVE 2: Color al pasar el ratón */
    color: #FFA2FF; 
    
    /* CLAVE 3: Escala ligeramente el texto (crece un 1.01%) */
    transform: scale(1.01); 
    
    /* CLAVE 4: Mueve ligeramente hacia arriba para dar énfasis */
    transform: translateY(-2px); 
}
/* Estilos Base del Título de Tarjeta Popular */
.popular-card h3 {
    /* ... Tus estilos de color, fuente, padding, etc. ... */
    
    /* CLAVE 1: Aplicar transición al color para que el cambio sea suave */
    transition: color 0.3s ease-in-out;
}
/* 1. Estilos Base y Ocultamiento del Precio */
.category-card .product-price-hover {
    /* CLAVE: Ocultar el elemento y prepararlo para la animación */
    opacity: 0; 
    max-height: 0; 
    color: #1A1A1A;
    font-size: 1rem;
    display: block;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}
/* Estado Hover: Cambio de Color del Título */
.popular-card:hover h3 {
    /* CLAVE 2: Color que tomará el título al hacer hover sobre la tarjeta */
    color: #FFA2FF; /* Usando tu color de acento pastel */
}
/* === FOOTER STYLES === */

/* 1. Estilo base del footer (Todo el texto general) */
#footer {
    /* Color de fuente oscuro para contraste con el fondo claro */
    color: #1A1A1A; 
    font-size: 0.95rem;
}

/* 2. Estilo para el texto de Copyright y el párrafo <p> */
.footer .copyright p {
    color: #1A1A1A; /* Negro/Gris muy oscuro */
}

/* 3. Estilo para la palabra destacada "FolioOne" */
.footer .copyright .sitename {
    /* Color de acento pastel para que destaque */
    color: #1A1A1A; 
    font-weight: 500;
}

/* 4. Estilos para los ENLACES de Redes Sociales */
.footer .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, #1A1A1A, transparent 50%);
    font-size: 16px;
    color: color-mix(in srgb, #1A1A1A, transparent 50%);
    margin: 0 5px;
    transition: 0.3s;
}

/* Efecto hover en los iconos de redes sociales */
.footer .social-links a:hover {
    color: #FFA2FF;
    border-color: #FFA2FF;
}

/* 5. Estilo para la sección de Créditos (Diseñador) */
.footer .credits {
    /* Color gris oscuro para que sea discreto */
    color: #4A4A4A; 
    font-size: 0.85rem;
}

/* 6. Enlace de BootstrapMade (mantener discreto y en negro) */
.footer .credits a {
    color: #000000; /* Negro puro, según tu solicitud de no destacarlo */
    text-decoration: none;
    font-weight: 500;
}


.category-card:hover .product-price-hover {
    /* Muestra el precio */
    opacity: 1; 
    max-height: 50px; 
    margin-top: 5px;
}
/* === ESTILOS PARA LA SECCIÓN "PRODUCTOS DIGITALES" (popular-card) === */

/* 1. Estilos BASE y Ocultamiento del Precio para Popular-Card */
.popular-card .product-price-hover {
    /* Estado base: Oculto */
    opacity: 0; 
    max-height: 0; 
    color: #1A1A1A; 
    font-size: 1rem;
    display: block;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

/* 2. Estado HOVER: Revelar y Animar el Precio para Popular-Card */
.popular-card:hover .product-price-hover {
    /* Muestra el precio */
    opacity: 1; 
    max-height: 50px; 
    margin-top: 5px; 
}
/* Asegura que el título H2 de la categoría sea oscuro y visible */
.products-area .section-title h2,
.products-area h2 {
    /* Usaremos un color oscuro para que contraste con el fondo #BEE6FF */
    color: #1A1A1A !important; 
    
    /* Si quieres que sea tu color pastel, pero el fondo lo es, no uses el pastel aquí */
    /* Si lo quieres pastel, debes cambiar el fondo de la sección a un color oscuro. */

    /* Altura de línea y márgenes para asegurar el espacio */
    line-height: 1.2;
    margin-bottom: 2rem !important;
}
/* Color de fondo pastel para la página entera */
.service-page {
    background-color: #BEE6FF; /* El fondo de la página */
}

/* Estilo del HEADER en la página de servicio */
.service-page #header {
    background-color: #BEE6FF !important; /* Mismo pastel del fondo para el header */
    box-shadow: none !important;
}

/* Color de los enlaces del menú (Texto oscuro sobre fondo claro) */
.service-page #navmenu a {
    color: #1A1A1A !important; 
    font-weight: 500;
}

/* Hover de los enlaces del menú */
.service-page #navmenu a:hover,
.service-page #navmenu li:hover > a {
    color: #FFA2FF !important; /* El color de acento rosa */
}
/* 1. Contenedor Principal del Dropdown (el <ul>) */
.service-page #navmenu .dropdown ul {
    /* Fondo pastel para el dropdown */
    background-color: #BEE6FF !important; 
    
    /* Le damos un poco de redondeo, si es lo que quieres */
    border-radius: 12px; 
    padding: 12px 0;
}


/* === ESTILOS PARA EL FILTRO DESPLEGABLE SIMPLE === */

/* Estilo del botón que activa el filtro */
.btn-filter-icon {
    background-color: transparent;
    color: #1A1A1A; 
    border: 1px solid rgba(0, 0, 0, 0.2); 
    border-radius: 50%; 
    padding: 0;
    width: 38px;
    height: 38px;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Hover del botón (Agregamos el toque rosa) */
.btn-filter-icon:hover {
    background-color: #FFA2FF !important; /* Color de acento rosa */
    color: #ffffff; /* Texto blanco para contraste con el fondo rosa */
    border-color: #FFA2FF !important;
}

/* Estilo del PANEL DESPLEGABLE (Contenido) */
.filter-options-content {
    /* ➡️ CLAVE 1: Fondo Verde Menta Específico */
    background-color: #c5ffec !important; 
    
    border: 1px solid #c5ffec; /* Borde del mismo color */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Estilo de los textos y etiquetas dentro del panel */
.filter-options-content h5, 
.filter-options-content label {
    /* ➡️ CLAVE 2: Texto Negro */
    color: #1A1A1A !important; 
    font-weight: 600;
}

/* Estilo del SELECT (Menú de Orden) dentro del panel */
.filter-options-content .form-select {
    /* Fondo transparente, borde suave */
    background-color: #79a797;
    border-color: #ffa3ff(0, 0, 0, 0.15);
    color: #1A1A1A; /* Texto Negro */
}
/* Estilo del precio en la malla de productos (Product Grid - Estado Normal) */
.popular-card .product-price {
    /* Forzar el color rosa pastel y sobrescribir el verde */
    color: #1A1A1A !important; 
    
    font-size: 1.1rem;
    font-weight: 700 !important;
    margin-bottom: 0; /* Asegura un buen espaciado */
}
/* Color base de los enlaces sociales en el HEADER (Íconos) */
#header .header-social-links a {
    /* ➡️ CLAVE: Forzar el color a negro para que contraste con el fondo pastel claro */
    color: #4A4A4A !important; 
    
    transition: color 0.3s; /* Asegura una transición suave */
}
/* Color de HOVER de los enlaces sociales en el HEADER */
#header .header-social-links a:hover {
    /* ➡️ CLAVE: Usar el color de acento rosa pastel */
    color: #FFA2FF !important; 
}
/* Color del Título Principal del Producto */
.product-page .project-title {
    color: #1A1A1A; /* Negro para alto contraste */
    font-weight: 800; /* Lo hacemos más grueso */
    font-size: 2.5rem;
    margin-bottom: 10px;
}

/* Color de la descripción (p.lead) */
.product-page .lead {
    color: #1A1A1A; /* Negro para la legibilidad del texto largo */
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Títulos de las características */
.product-page h3 {
    color: #1A1A1A; 
    font-weight: 700;
}
/* Botón Comprar (Base: Rojo) */
.product-page .btn-primary {
    /* Color base: Rojo fuerte (Hex: #C61737 o el que prefieras) */
    background-color: #bb1716; 
    border-color: #bb1716;
    color: #FFFFFF; /* Texto blanco para contraste */
    font-weight: 700;
    padding: 12px 30px;
    border-radius: 10px;
    transition: all 0.3s ease;
}

/* Botón Comprar (Hover: Violeta) */
.product-page .btn-primary:hover {
    /* Color hover: Violeta (Hex: #800080 o un tono pastel más oscuro) */
    background-color: #8CCFFF; 
    border-color: #8CCFFF;
    color: #FFFFFF;
}
/* Íconos y texto de características (Eliminar el verde) */
.product-page .feature-icon {
    /* Usaremos el color rosa pastel para los íconos de destaque */
    color: #FFA2FF !important; 
    font-size: 1.5rem;
}

/* Títulos de las características */
.product-page .feature-title {
    color: #1A1A1A;
    font-weight: 600;
}
/* Hover de las miniaturas */
.product-thumbs img:hover {
    border: 2px solid #FFA2FF; /* Borde rosa pastel en hover */
    opacity: 0.8;
}
.product-main-img { 
    width: 100%; 
    border-radius: 12px; 
    display: block; 
}
/* 1. Base de los enlaces principales (Black) */
.portfolio-details-page #navmenu a {
    color: #1A1A1A !important; /* Forzar el texto a negro */
    font-weight: 500;
}

/* 2. Hover de los enlaces principales (Pink) */
.portfolio-details-page #navmenu a:hover,
.portfolio-details-page #navmenu li:hover > a {
    color: #FFA2FF !important; /* Forzar el hover a rosa pastel */
}
/* 3. Contenedor del Dropdown (Fondo Pastel) */
.portfolio-details-page #navmenu .dropdown ul {
    /* Fondo azul pastel del menú (asumo que es el mismo que en servicios.html) */
    background-color: #BEE6FF !important; 
    border-radius: 12px;
    padding: 12px 0;
}

/* 4. Ítems del Dropdown (Texto Negro) */
.portfolio-details-page #navmenu .dropdown ul li a {
    color: #1A1A1A !important; /* Texto negro */
    background-color: #BEE6FF !important; /* Fondo que coincide con el contenedor */
    font-weight: 500;
}

/* 5. Hover dentro del Dropdown (Fondo Rosa) */
.portfolio-details-page #navmenu .dropdown ul li a:hover {
    background-color: #FFA2FF !important; /* Fondo rosa pastel en hover */
    color: #1A1A1A !important; /* Texto negro sobre fondo rosa */
    border-radius: 8px;
}
/* Estilo para la imagen principal de la galería */
.product-main-img {
    width: 100%; 
    height: auto; 
    
    /* ➡️ CLAVE: Definir una altura mínima para que se vea más grande */
    min-height: 450px; /* Por ejemplo, 450px para pantallas grandes */
    
    /* Asegura que la imagen se vea completa dentro de esa altura */
    object-fit: contain; 
    
    border-radius: 12px;
    display: block;
    
    /* Sombra sutil para destacarla, si quieres */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
}

.product-gallery { 
    display: block; /* Volvemos a un display normal, o mantenemos grid */
    
    /* Si mantienes grid, elimina la regla de 1fr 1fr para desktop */
}

    
    /* Small product-specific helpers (move to main.css later) */
    .product-page { padding: 60px 0; }
    .product-gallery { display: grid; grid-template-columns: 1fr; gap: 16px; }
    
    .product-main-img { width: 100%; border-radius: 12px; display: block; }
    .product-thumbs { display:flex; gap:8px; margin-top:8px; }
    .product-thumbs img{ width:72px; height:72px; object-fit:cover; border-radius:8px; cursor:pointer; }

    .product-info .meta { color: color-mix(in srgb, var(--default-color), transparent 50%); font-size:0.95rem; }
    .feature-list .feature-item { display:flex; gap:12px; align-items:flex-start; }
    .feature-icon { font-size:1.35rem; color:var(--accent-color); min-width:36px; }

    .related-grid { display:grid; grid-template-columns:repeat(1,1fr); gap:12px; }
    @media(min-width:768px){ .related-grid { grid-template-columns:repeat(3,1fr); } }

    .product-page .product-price .current-price {
    color: #1A1A1A; /* Color de acento rosa */
    font-size: 1.5rem !important; /* Lo hacemos más grande que el h1 para que destaque */
    display: inline-block;
    padding: 5px 15px;
    border-radius: 8px;
    background-color: #BEE6FF; /* Fondo sutil para que el precio resalte del blanco */
    } 
    /* ==== BOTÓN WHATSAPP ==== */
#whatsapp-btn {
    position: fixed !important; 
    right: 15px; 
    bottom: 15px;
    z-index: 9999;
    
    width: 60px; 
    height: 60px;
    background-color: #FFA2FF; 
    color: #1A1A1A; 
    border-radius: 50%;

    display: flex;            /* Centrado perfecto */
    align-items: center;
    justify-content: center;

    cursor: pointer;
    text-decoration: none;
}

#whatsapp-btn i {
    font-size: 28px;          /* Ajustá el tamaño si querés */
    margin: 0 !important;     /* Elimina márgenes random */
    padding: 0 !important;
}

#whatsapp-btn:hover {
    background-color: #8dff21;
}
/* 1. Fondo principal del menú móvil (Sidebar) */
.servicios-page .mobile-nav-active {
    /* El fondo del menú que ocupa toda la pantalla */
    background-color: #BEE6FF !important; 
}

/* 2. El contenedor del menú (navmenu) */
.servicios-page #navmenu {
    /* El contenedor interior debe tener el mismo fondo */
    background-color: #BEE6FF !important;
}
/* 3. Texto del Enlace y el separador (Base: Negro) */
.servicios-page .mobile-nav-active a {
    color: #1A1A1A !important; 
    /* Aseguramos que el separador sea sutil */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
    font-weight: 500;
}

/* 4. Color de los iconos de Chevron (Flechas desplegables) */
.servicios-page .mobile-nav-active .bi-chevron-down {
    color: #1A1A1A !important;
}
/* 5. Hover/Activo del enlace */
.servicios-page .mobile-nav-active a:hover,
.servicios-page .mobile-nav-active a.active,
.servicios-page .mobile-nav-active a:focus {
    /* El texto se vuelve rosa */
    color: #FFA2FF !important; 
    /* El fondo debe ser transparente o muy sutil para que no quede un bloque sólido oscuro */
    background-color: transparent !important; 
}