/* ============================================================
   DARK MODE FIX — Disfruta Saludable
   Garantiza que TODO el texto sea visible sobre fondo verde oscuro
   + Efecto glassmorphism en secciones y tarjetas
   ============================================================ */

/* ── 0. BOTONES — corrección crítica fondo blanco ───────── */

/* Botón secundario: fondo blanco → transparente con borde verde */
.btn-secondary {
    background-color: transparent !important;
    color: #4CAF50 !important;
    border: 2px solid #4CAF50 !important;
}

.btn-secondary:hover {
    background-color: #4CAF50 !important;
    color: #FFFFFF !important;
    border-color: #4CAF50 !important;
}

/* Botón primario: siempre texto blanco */
.btn-primary {
    background-color: #4CAF50 !important;
    color: #FFFFFF !important;
    border-color: #4CAF50 !important;
}

.btn-primary:hover {
    background-color: #2e7d32 !important;
    color: #FFFFFF !important;
}

/* Badge flotante experiencia: fondo blanco → glass verde oscuro */
.experience-badge {
    background: rgba(13, 43, 15, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(76, 175, 80, 0.45) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.experience-badge .number {
    color: #81C784 !important;
}

.experience-badge .text {
    color: #C8E6C9 !important;
}

/* Tarjeta destacada de servicios */
.service-card.featured {
    background: rgba(76, 175, 80, 0.18) !important;
    border-color: rgba(76, 175, 80, 0.5) !important;
}

/* Tags blancos de recetas/categorías */
.recipe-tag,
.category-tag {
    background: rgba(76, 175, 80, 0.2) !important;
    color: #A5D6A7 !important;
    border: 1px solid rgba(76, 175, 80, 0.3) !important;
}

/* ── 1. Reset de colores de texto: TODO visible ─────────── */

*,
body,
p,
span,
li,
a,
label,
td,
th,
input,
select,
textarea,
option {
    color: #D4EDDA;
}

/* ── EXCEPCIÓN: FAQ spans siempre verde oscuro ── */
.faq-question span,
.faq-question>span,
section#faq span:not(.section-subtitle):not(.faq-icon) {
    color: #1B5E20 !important;
}


h1,
h2,
h3,
h4,
h5,
h6 {
    color: #FFFFFF !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Texto secundario: verde claro visible */
.section-description,
.about-text,
.service-desc,
.recipe-desc,
.product-desc,
.meal-desc,
.mission-desc,
.result-disclaimer,
p {
    color: #C8E6C9 !important;
}

/* Subtítulos de sección */
.section-subtitle {
    color: #D4AF37 !important;
    background: rgba(212, 175, 55, 0.12) !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
}

/* Nombre/título de producto o receta */
.product-name,
.recipe-title,
.service-title,
.meal-title,
.mission-title {
    color: #FFFFFF !important;
}

/* Precio */
.product-price {
    color: #81C784 !important;
    font-weight: 700;
}

/* Tags/etiquetas */
.meal-tag,
.recipe-time {
    background: rgba(76, 175, 80, 0.25) !important;
    color: #A5D6A7 !important;
    border-color: rgba(76, 175, 80, 0.3) !important;
}

/* ── 2. Navegación visible ─────────────────────────────── */

.nav-link {
    color: #C8E6C9 !important;
}

.nav-link:hover,
.nav-link.active {
    color: #81C784 !important;
}

.logo {
    color: #FFFFFF !important;
}

.logo span {
    color: #81C784 !important;
}

/* ── 3. Hero section: texto completamente visible ────────── */

.hero-subtitle {
    color: #81C784 !important;
    background: rgba(76, 175, 80, 0.12) !important;
    border-color: rgba(76, 175, 80, 0.3) !important;
}

.hero-title {
    color: #FFFFFF;
    /* El gradiente del animaciones.css maneja el color */
}

.hero-description,
.hero .hero-content p {
    color: #C8E6C9 !important;
}

/* ── 4. Glassmorphism para secciones y contenedores ────── */

/* Contenedor de "Sobre Mí" */
.about-content,
.about-container>.about-content {
    background: rgba(255, 255, 255, 0.04) !important;
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid rgba(76, 175, 80, 0.12);
}

/* Sección del equipo (info) */
.info-equipo .about-content {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(76, 175, 80, 0.15);
    border-radius: 20px;
    padding: 2.5rem;
}

/* ── 5. Cards con glassmorphism premium ─────────────────── */

.service-card {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(76, 175, 80, 0.20) !important;
    border-radius: 20px !important;
}

.recipe-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(76, 175, 80, 0.18) !important;
}

.product-card {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(76, 175, 80, 0.18) !important;
}

.day-card {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(76, 175, 80, 0.18) !important;
    border-radius: 16px !important;
}

/* FAQ — preguntas en verde oscuro, respuestas en verde legible */
.faq-question {
    color: #1B5E20 !important;
    font-weight: 700 !important;
}

.faq-answer,
.faq-answer * {
    color: #2E7D32 !important;
}


/* ── 6. Calculadora – fondo glass ────────────────────────── */

.calculator-box,
.imc-form,
.calc-form {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(76, 175, 80, 0.2) !important;
    border-radius: 20px !important;
}

/* ── 7. Formulario de contacto ──────────────────────────── */

.contact-form-wrapper,
.contact-info-wrapper,
.contact-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(76, 175, 80, 0.2) !important;
    border-radius: 20px !important;
}

label {
    color: #A5D6A7 !important;
    font-weight: 500;
}

input,
select,
textarea {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(76, 175, 80, 0.3) !important;
    color: #E8F5E9 !important;
    border-radius: 10px !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(165, 214, 167, 0.5) !important;
}

input:focus,
select:focus,
textarea:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: #4CAF50 !important;
}

/* ── 8. Íconos de servicio y misión ─────────────────────── */

.service-icon {
    background: rgba(76, 175, 80, 0.15) !important;
    border: 1px solid rgba(76, 175, 80, 0.25) !important;
}

.check-icon {
    color: #81C784 !important;
}

.service-features li {
    color: #C8E6C9 !important;
}

/* ── 9. Footer visible ──────────────────────────────────── */

.footer-title,
.footer-col h3,
.footer-col h4 {
    color: #FFFFFF !important;
}

.footer-col p,
.footer-col li,
.footer-col a,
.footer-link,
.footer-text {
    color: #A5D6A7 !important;
}

.footer-col a:hover,
.footer-link:hover {
    color: #81C784 !important;
}

/* ── 10. Plan semanal: hora de comida ───────────────────── */

.meal-time {
    color: #81C784 !important;
    font-weight: 700 !important;
    background: rgba(76, 175, 80, 0.15) !important;
    border-radius: 8px;
    padding: 0.3rem 0.8rem;
}

/* ── 11. Badges y etiquetas de servicios ────────────────── */

.featured-badge {
    background: linear-gradient(135deg, #D4AF37, #F0C840) !important;
    color: #1a1a1a !important;
}

/* ── 12. Filtros de categorías ──────────────────────────── */

.filter-btn {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(76, 175, 80, 0.25) !important;
    color: #C8E6C9 !important;
    border-radius: 30px !important;
}

.filter-btn.active,
.filter-btn:hover {
    background: rgba(76, 175, 80, 0.25) !important;
    border-color: #4CAF50 !important;
    color: #FFFFFF !important;
}

/* ── 13. Resultados de calculadora ──────────────────────── */

.imc-result,
.calc-result,
.water-result {
    background: rgba(76, 175, 80, 0.12) !important;
    border: 1px solid rgba(76, 175, 80, 0.3) !important;
    border-radius: 16px !important;
    color: #E8F5E9 !important;
}

.result-number,
.result-number span {
    color: #81C784 !important;
}

.result-category {
    color: #A5D6A7 !important;
}

/* ── 14. Herramientas / Tools Section ───────────────────── */

.tool-card {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(76, 175, 80, 0.18) !important;
    border-radius: 18px !important;
}

.tool-title,
.tool-card h3 {
    color: #FFFFFF !important;
}

.tool-desc,
.tool-card p {
    color: #C8E6C9 !important;
}

/* ── 15. Botón CTA del header ───────────────────────────── */

.btn-cta-outline {
    border-color: #81C784 !important;
    color: #81C784 !important;
}

.btn-cta-outline:hover {
    background: #4CAF50 !important;
    color: #FFFFFF !important;
}

/* ── 16. Texto de "Sobre mí" y equipo ───────────────────── */

.about-text {
    color: #C8E6C9 !important;
}

/* Span con fondo de "Nutrición Clínica y Deportiva" */
.info-equipo span[style] {
    background: rgba(212, 175, 55, 0.15) !important;
    color: #D4AF37 !important;
}

/* ── 17. Experience badge ───────────────────────────────── */

.experience-badge {
    background: rgba(76, 175, 80, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(76, 175, 80, 0.4) !important;
}

.experience-badge .text {
    color: #C8E6C9 !important;
}

/* ── 18. Sección de video ───────────────────────────────── */

.video-section-title,
.video-section h2 {
    color: #FFFFFF !important;
}

/* ── 19. Links de recetas ───────────────────────────────── */

.recipe-link {
    color: #81C784 !important;
}

.recipe-link:hover {
    color: #A5D6A7 !important;
}

/* ── 20. Menú móvil oscuro ──────────────────────────────── */

@media (max-width: 768px) {
    .nav-menu {
        background: rgba(8, 24, 10, 0.98) !important;
        backdrop-filter: blur(16px) !important;
    }

    .nav-link {
        color: #C8E6C9 !important;
    }
}

/* ── 21. Sección hero: fondo glass sutil ─────────────────── */

.hero-content {
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    border-radius: 24px;
    padding: 2.5rem;
    border: 1px solid rgba(76, 175, 80, 0.08);
}

/* ── 22. Línea separadora entre secciones ───────────────── */

hr,
.divider {
    border-color: rgba(76, 175, 80, 0.2) !important;
}

/* ── 23. Modal de cita ──────────────────────────────────── */

.product-modal-backdrop {
    background: rgba(0, 0, 0, 0.75) !important;
}

.product-modal,
.modal-content {
    background: rgba(18, 40, 20, 0.97) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(76, 175, 80, 0.25) !important;
    color: #E8F5E9 !important;
}

.modal-content h3,
.modal-content p {
    color: #E8F5E9 !important;
}

/* ── 24. Plan semanal: caja de CTA ─────────────────────── */

.plan-cta {
    background: rgba(76, 175, 80, 0.1) !important;
    border: 1px solid rgba(76, 175, 80, 0.25) !important;
    border-radius: 16px !important;
    padding: 2rem !important;
}

.plan-cta p,
.plan-cta h3 {
    color: #C8E6C9 !important;
}

/* ═══════════════════════════════════════════════════════════
   BLOQUE 25 — SECCIÓN CONTACTO completa (fondo blanco → dark)
   ═══════════════════════════════════════════════════════════ */

.contact {
    background: rgba(8, 24, 10, 0.6) !important;
    backdrop-filter: blur(8px) !important;
}

.contact-wrapper {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(76, 175, 80, 0.2) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
    border-radius: 24px !important;
}

/* Formulario de cita */
.contact-form-wrapper {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(76, 175, 80, 0.2) !important;
    border-radius: 16px !important;
}

/* Campos del formulario */
.form-group input,
.form-group select,
.form-group textarea {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(76, 175, 80, 0.3) !important;
    color: #E8F5E9 !important;
    border-radius: 10px !important;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(165, 214, 167, 0.45) !important;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background: rgba(255, 255, 255, 0.11) !important;
    border-color: #4CAF50 !important;
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2) !important;
}

/* Labels */
.form-group label,
.contact-form-wrapper label {
    color: #A5D6A7 !important;
}

/* Texto descriptivo de contacto */
.contact-desc,
.contact-info p,
.contact-info h4,
.info-item p,
.info-item h4,
.contact-info h3,
.contact-info h2,
.contact-card h3,
.contact-card h4,
.contact-card p,
.contact-card span,
.contact-card li {
    color: #0D3B12 !important;
    font-weight: 500;
}

/* "Síguenos en nuestras Redes" y textos secundarios */
.contact-social-title,
.social-title,
.contact-info .social-section p,
.contact-wrapper p,
.contact-wrapper span,
.contact-wrapper li,
.contact-wrapper a:not(.btn) {
    color: #145214 !important;
}

/* Título principal de la tarjeta */
.contact-info .section-title,
.contact-info h2,
.contact-card .card-title {
    color: #0A2010 !important;
    -webkit-text-fill-color: #0A2010 !important;
    background: none !important;
    font-weight: 800 !important;
}


/* bloques de info (íconos de contacto) */
.info-icon {
    background: rgba(76, 175, 80, 0.15) !important;
    border: 1px solid rgba(76, 175, 80, 0.3) !important;
    color: #81C784 !important;
}

/* ═══════════════════════════════════════════════════════════
   BLOQUE 26 — ÍCONOS SVG DE LLAMADA / WHATSAPP
   ═══════════════════════════════════════════════════════════ */

/* SVGs inline en botones de producto (teléfono/WhatsApp) */
.btn-icon-cart svg,
.btn-icon-cart svg path,
.btn-icon-cart svg line,
.btn-icon-cart svg polyline {
    stroke: #4CAF50 !important;
}

.btn-icon-cart {
    color: #4CAF50 !important;
    border: 2px solid rgba(76, 175, 80, 0.4) !important;
    border-radius: 50% !important;
    padding: 0.5rem !important;
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(76, 175, 80, 0.1) !important;
    transition: all 0.3s ease !important;
}

.btn-icon-cart:hover {
    background: #4CAF50 !important;
    border-color: #4CAF50 !important;
}

.btn-icon-cart:hover svg,
.btn-icon-cart:hover svg path {
    stroke: #FFFFFF !important;
}

/* SVGs genéricos en secciones (contacto, social, etc.) */
svg path[stroke],
svg line[stroke],
svg polyline[stroke],
svg circle[stroke] {
    stroke: currentColor;
}

/* ícono de teléfono en sección de contacto */
.info-icon svg,
.info-icon svg path {
    stroke: #81C784 !important;
    fill: none !important;
}

/* ═══════════════════════════════════════════════════════════
   BLOQUE 27 — NUEVAS ANIMACIONES PREMIUM
   ═══════════════════════════════════════════════════════════ */

/* 27a. Neon border en cards al hacer hover */
@keyframes neonBorder {

    0%,
    100% {
        border-color: rgba(76, 175, 80, 0.3);
        box-shadow: 0 0 5px rgba(76, 175, 80, 0.1);
    }

    50% {
        border-color: rgba(76, 175, 80, 0.8);
        box-shadow: 0 0 20px rgba(76, 175, 80, 0.4), 0 0 40px rgba(76, 175, 80, 0.15);
    }
}

.service-card:hover,
.recipe-card:hover,
.product-card:hover {
    animation: neonBorder 2s ease-in-out infinite !important;
}

/* 27b. Shake suave en botones CTA para llamar la atención */
@keyframes gentleShake {

    0%,
    100% {
        transform: translateX(0) translateY(-2px);
    }

    20% {
        transform: translateX(-3px) translateY(-2px);
    }

    40% {
        transform: translateX(3px) translateY(-2px);
    }

    60% {
        transform: translateX(-2px) translateY(-2px);
    }

    80% {
        transform: translateX(2px) translateY(-2px);
    }
}

/* 27c. Texto de subtítulos con brillo pulsante */
@keyframes subtitleGlow {

    0%,
    100% {
        text-shadow: 0 0 8px rgba(212, 175, 55, 0.3);
    }

    50% {
        text-shadow: 0 0 20px rgba(212, 175, 55, 0.7), 0 0 40px rgba(212, 175, 55, 0.3);
    }
}

.section-subtitle {
    animation: subtitleGlow 3s ease-in-out infinite !important;
}

/* 27d. Cards entrando con perspectiva 3D */
@keyframes card3DEnter {
    from {
        opacity: 0;
        transform: perspective(800px) rotateX(15deg) translateY(30px);
    }

    to {
        opacity: 1;
        transform: perspective(800px) rotateX(0deg) translateY(0);
    }
}

/* 27e. Línea de progreso animada en botones submit */
.btn-submit::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #81C784, transparent);
    animation: shimmerLine 2s ease-in-out infinite;
    border-radius: 0 0 30px 30px;
}

@keyframes shimmerLine {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

/* 27f. Íconos de misión con rotación sutil al hover */
.mission-item:hover .mission-icon {
    animation: spinSlow 0.6s ease forwards !important;
    transform: scale(1.2);
}

@keyframes spinSlow {
    from {
        transform: rotate(0deg) scale(1);
    }

    to {
        transform: rotate(15deg) scale(1.2);
    }
}

/* 27g. Scroll indicator pulsante en la sección hero */
@keyframes scrollBounce {

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

    50% {
        transform: translateY(8px);
        opacity: 0.5;
    }
}

.scroll-indicator,
.hero-scroll {
    animation: scrollBounce 1.8s ease-in-out infinite !important;
}

/* 27h. FAQ ícono de flecha girando al abrir */
.faq-question[aria-expanded="true"] .faq-icon,
.faq-question[aria-expanded="true"] span:last-child {
    transform: rotate(180deg) !important;
    color: #4CAF50 !important;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 27i. Efecto typing en el subtítulo hero */
.hero-subtitle {
    overflow: hidden;
    border-right: 2px solid #4CAF50;
    white-space: nowrap;
    animation:
        subtitleGlow 3s ease-in-out infinite,
        typingBlink 0.8s step-end infinite !important;
    max-width: fit-content;
}

@keyframes typingBlink {

    0%,
    100% {
        border-color: #4CAF50;
    }

    50% {
        border-color: transparent;
    }
}

/* 27j. Hover tilt en imágenes de receta */
.recipe-image img,
.product-image img {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.recipe-card:hover .recipe-image img {
    transform: scale(1.08) rotate(1deg) !important;
}

.product-card:hover .product-image img {
    transform: scale(1.06) !important;
}

/* 27k. Partícula verde decorativa en section-subtitle */
.section-subtitle::before {
    content: '🌿';
    margin-right: 0.4rem;
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }
}

/* ═══════════════════════════════════════════════════════════
   BLOQUE 28 — SECCIONES CON FONDO CLARO: texto verde oscuro
   El fondo claro persiste en FAQ, Herramientas y tarjetas de
   temporada — les ponemos texto verde oscuro legible y bonito
   ═══════════════════════════════════════════════════════════ */

/* ── 28a. FAQ — fondo crema claro ─────────────────────── */

.faq {
    background: linear-gradient(135deg, #E8F5E9 0%, #F1F8E9 100%) !important;
    border-top: 3px solid rgba(46, 125, 50, 0.3);
    border-bottom: 3px solid rgba(46, 125, 50, 0.3);
}

.faq .section-title,
.faq h2 {
    color: #1B5E20 !important;
    -webkit-text-fill-color: #1B5E20 !important;
    background: none !important;
    text-shadow: 0 2px 8px rgba(46, 125, 50, 0.15) !important;
}

.faq .section-description,
.faq .section-subtitle+p {
    color: #2E7D32 !important;
}

.faq-item {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(46, 125, 50, 0.2) !important;
    backdrop-filter: blur(8px) !important;
}

.faq-item:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: #4CAF50 !important;
    box-shadow: 0 8px 30px rgba(46, 125, 50, 0.15) !important;
}

.faq-question {
    color: #1B5E20 !important;
    font-weight: 700 !important;
}

.faq-question:hover {
    color: #2E7D32 !important;
}

.faq-answer,
.faq-answer-inner,
.faq-answer-inner p {
    color: #2E7D32 !important;
    background: transparent !important;
}

.faq-icon {
    color: #4CAF50 !important;
    background: rgba(76, 175, 80, 0.12) !important;
    border: 1px solid rgba(76, 175, 80, 0.3) !important;
}

/* ── 28b. Herramientas (Calculadora + Hidratación) ─────── */

.interactive-tools {
    background: linear-gradient(135deg, #E8F5E9 0%, #F1F8E9 50%, #E0F2F1 100%) !important;
}

.interactive-tools .section-title,
.interactive-tools h2 {
    color: #1B5E20 !important;
    -webkit-text-fill-color: #1B5E20 !important;
    background: none !important;
    text-shadow: 0 2px 8px rgba(46, 125, 50, 0.15) !important;
}

.interactive-tools .section-description,
.interactive-tools p {
    color: #2E7D32 !important;
}

/* Tarjetas de herramientas */
.tool-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(46, 125, 50, 0.15) !important;
    backdrop-filter: blur(10px) !important;
}

.tool-card:hover {
    box-shadow: 0 20px 50px rgba(46, 125, 50, 0.15) !important;
    border-color: rgba(76, 175, 80, 0.4) !important;
}

.tool-header h3,
.tool-card h3 {
    color: #1B5E20 !important;
}

.tool-header p,
.tool-card>p {
    color: #2E7D32 !important;
}

/* Labels de formularios en herramientas */
.form-group-tool label {
    color: #1B5E20 !important;
    font-weight: 700 !important;
}

/* Inputs de herramientas */
.form-group-tool input,
.form-group-tool select {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #1B5E20 !important;
    border: 2px solid rgba(76, 175, 80, 0.3) !important;
}

.form-group-tool input::placeholder {
    color: rgba(46, 125, 50, 0.5) !important;
}

.form-group-tool input:focus,
.form-group-tool select:focus {
    border-color: #4CAF50 !important;
    background: #FFFFFF !important;
    color: #1B5E20 !important;
}

/* Radio button grupo (Normal / Mucho Calor) */
.radio-group {
    background: rgba(255, 255, 255, 0.7) !important;
    border: 2px solid rgba(76, 175, 80, 0.25) !important;
}

.radio-label span {
    color: #2E7D32 !important;
    font-weight: 600 !important;
}

.radio-label input[type="radio"]:checked+span {
    background: #4CAF50 !important;
    color: #FFFFFF !important;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3) !important;
}

/* Tips de hidratación */
.hydration-tips {
    background: rgba(255, 255, 255, 0.7) !important;
    border-color: rgba(76, 175, 80, 0.4) !important;
}

.hydration-tips h5 {
    color: #1B5E20 !important;
}

.hydration-tips ul li {
    color: #2E7D32 !important;
}

.hydration-tips ul li::before {
    color: #4CAF50 !important;
}

.result-note {
    color: #388E3C !important;
}

/* ── 28c. Tarjetas de Temporada (Verano/Otoño) ─────────── */

/* Tarjeta de Verano — fondo amarillo/dorado cálido */
.season-card,
.season-card.summer-card,
[class*="summer"],
[class*="verano"],
.season-card:first-child {
    background: linear-gradient(135deg, #FFF9C4 0%, #FFF176 30%, #FFFDE7 100%) !important;
    border: 1px solid rgba(245, 196, 0, 0.4) !important;
}

/* Tarjeta de Otoño — fondo rosa/mauve suave */
.season-card.autumn-card,
[class*="autumn"],
[class*="otono"],
.season-card:last-child {
    background: linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 30%, #FCEDF4 100%) !important;
    border: 1px solid rgba(236, 64, 122, 0.2) !important;
}

/* Texto de las tarjetas de temporada — verde oscuro en ambas */
.season-card h3,
.season-card h4,
.season-card .season-title {
    color: #1B5E20 !important;
    -webkit-text-fill-color: #1B5E20 !important;
    background: none !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.season-card p,
.season-card li,
.season-card .season-desc {
    color: #2E7D32 !important;
}

.season-card .season-subtitle,
.season-card h5 {
    color: #388E3C !important;
    font-weight: 700 !important;
}

/* Links con texto de bebidas (ej. "Agua de coco natural:") */
.season-card strong,
.season-card b,
.season-card a {
    color: #1B5E20 !important;
    font-weight: 700 !important;
}

/* Checkmarks en la lista de bebidas */
.season-card li::before {
    color: #4CAF50 !important;
}

/* ── 28d. Guías rápidas / blog tips (fondo azul claro) ─── */

.hydration-tips,
.quick-tips,
[class*="tip"] {
    color: #1B5E20 !important;
}

.hydration-tips *:not(button) {
    color: #2E7D32 !important;
}

/* ═══════════════════════════════════════════════════════════
   BLOQUE 29 — SECCIÓN DE GUÍAS / BLOG (index.html)
   .guides-section y .guide-card
   ═══════════════════════════════════════════════════════════ */

/* Sección completa: fondo translúcido sobre el verde oscuro del body */
.guides-section {
    background: rgba(13, 43, 15, 0.30) !important;
    backdrop-filter: blur(4px) !important;
    padding: 6rem 0 !important;
    position: relative;
}

/* Orbe decorativo sutil */
.guides-section::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -5%;
    width: 45vw;
    height: 45vw;
    background: radial-gradient(circle, rgba(76, 175, 80, 0.07) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}

/* Título de la sección */
.guides-section .section-title {
    color: #1B5E20 !important;
    -webkit-text-fill-color: #1B5E20 !important;
    background: none !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    font-weight: 800 !important;
}

/* Descripción de la sección */
.guides-section .section-description {
    color: #2E7D32 !important;
}

/* Grid */
.guides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

/* Tarjeta de guía */
.guide-card {
    background: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(76, 175, 80, 0.22) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease !important;
}

.guide-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(76, 175, 80, 0.6) !important;
    box-shadow:
        0 0 20px rgba(76, 175, 80, 0.25),
        0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

/* Imagen de la tarjeta */
.guide-image {
    position: relative;
    overflow: hidden;
}

.guide-image img {
    transition: transform 0.5s ease !important;
}

.guide-card:hover .guide-image img {
    transform: scale(1.07) !important;
}

/* Badge de categoría */
.guide-category {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #2E7D32, #4CAF50) !important;
    color: #FFFFFF !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 0.3rem 0.9rem !important;
    border-radius: 20px !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4) !important;
}

/* Contenido de texto */
.guide-content {
    padding: 1.5rem !important;
}

/* Meta (tiempo de lectura) */
.guide-meta span {
    color: #81C784 !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
}

/* Título del artículo */
.guide-title {
    color: #1B5E20 !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    margin: 0.6rem 0 0.8rem !important;
    line-height: 1.4 !important;
}

.guide-title a {
    color: #1B5E20 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    transition: color 0.3s ease !important;
}

.guide-title a:hover {
    color: #2E7D32 !important;
    text-decoration: underline !important;
}

/* Párrafo del extracto */
.guide-excerpt {
    color: #2E7D32 !important;
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    margin-bottom: 1.2rem !important;
}

/* Link "Leer artículo" */
.read-more {
    color: #4CAF50 !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    transition: gap 0.3s ease, color 0.3s ease !important;
}

.read-more:hover {
    color: #81C784 !important;
    gap: 0.6rem !important;
}