/**
 * Page Crioterapia Styles - Kenkatsu
 * Estilos específicos para la página de Crioterapia
 * 
 * @package KenkatsuTheme
 * @version 1.0
 */

/* ============================================
   RESPONSIVE GRID BENEFICIOS
   ============================================ */

@media (min-width: 768px) {
    .kenkatsu-page-crioterapia .kenkatsu-section-beige > .kenkatsu-container > div[style*="grid-template-columns: 1fr"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 992px) {
    .kenkatsu-page-crioterapia .kenkatsu-section-beige > .kenkatsu-container > div[style*="grid-template-columns: 1fr"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ============================================
   RESPONSIVE GRID OPCIONES
   ============================================ */

@media (min-width: 768px) {
    .kenkatsu-page-crioterapia .kenkatsu-section > .kenkatsu-container > div[style*="grid-template-columns: 1fr"]:not(.kenkatsu-section-light) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 992px) {
    .kenkatsu-page-crioterapia .kenkatsu-section > .kenkatsu-container > div[style*="grid-template-columns: 1fr"]:not(.kenkatsu-section-light) {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* ============================================
   MEJORAS DE ESPACIADO Y READABILIDAD
   ============================================ */

.kenkatsu-page-crioterapia .kenkatsu-card {
    height: 100%;
}

.kenkatsu-page-crioterapia .kenkatsu-card h3 {
    margin-top: 0;
}

/* ============================================
   HERO SECTION ESPECÍFICO
   ============================================ */

.kenkatsu-page-crioterapia .kenkatsu-hero-section {
    min-height: 70vh;
}

/* Imagen hero centrada (criosauna eCabin) */
.kenkatsu-page-crioterapia .kenkatsu-hero-section .hero-bg-image {
    object-position: center center !important;
    object-fit: cover !important;
}

/* 
 * Estilos específicos para Crioterapia
 * El fondo, overlay y visibilidad se controlan desde hero-unified.css
 * Solo agregar overrides específicos si es necesario
 */

@media (max-width: 768px) {
    .kenkatsu-page-crioterapia .kenkatsu-hero-section {
        min-height: 60vh;
    }
    
    .kenkatsu-page-crioterapia .hero-content {
        padding-top: 80px !important;
    }
    
    .kenkatsu-page-crioterapia .hero-background {
        background: linear-gradient(135deg, #0d0d0d 0%, #0d9488 50%, #0b8378 100%) !important;
    }
    
    .kenkatsu-page-crioterapia .hero-bg-image {
        opacity: 0.2;
    }
    
    .kenkatsu-page-crioterapia .hero-overlay {
        background: linear-gradient(
            to bottom, 
            rgba(0, 0, 0, 0.85) 0%, 
            rgba(13, 148, 136, 0.7) 50%,
            rgba(0, 0, 0, 0.9) 100%
        ) !important;
    }
}