/*
Theme Name:       hidro-k
Theme URI:        https://hidro-k.com
Author:           Gerardo Isaias
Author URI:       https://hidro-k.com
Description:      Tema personalizado y moderno para el sitio web hidro-k.com.
Version:          1.0.0
Requires at least: 6.0
Tested up to:     7.1.1
Requires PHP:     7.4
License:          GNU General Public License v2 or later
License URI:      http://gnu.org
Text Domain:      hidro-k
*/

/* ==========================================================================
   Tus estilos personalizados a partir de aquí
   ========================================================================== */

body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: #f4f4f4;
    color: #333;
}


/* ==========================================================================
   CONFIGURACIÓN GENERAL Y VARIABLES
   ========================================================================== */
:root {
    --color-primary: #8cd0be;
    --color-primary-hover: #79beac;
    --color-text-dark: #5a5a5a;
    --color-text-muted: #8c8c8c;
    --color-bg-light: #f7fafb;
    --color-title-dark: #2b303a;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--color-text-dark);
    overflow-x: hidden;
}

/* ==========================================================================
   COMPORTAMIENTO GLOBAL DE BOTONES ("AIRE" ASEGURADO)
   ========================================================================== */
/* Forzamos el padding horizontal de 2rem (~32px) para que NUNCA se pegue el texto a los bordes */
.btn-hero-primary, .btn-hero-secondary, .btn-contact, .btn-submit, .btn-cta-white {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    white-space: nowrap; /* Impide que el texto colapse o se divida en dos renglones */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto sutil al hacer clic */
.btn-hero-primary:active, .btn-hero-secondary:active, .btn-contact:active, .btn-submit:active, .btn-cta-white:active {
    transform: scale(0.96);
}

/* Manejo limpio y estandarizado del padding vertical superior/inferior */
.py-2-5 { 
    padding-top: 0.75rem !important; 
    padding-bottom: 0.75rem !important; 
}

/* ==========================================================================
   HEADER, NAVEGACIÓN Y CONTROL DE LOGO
   ========================================================================== */
.header-main { background-color: #ffffff; }

/* Contenedor del logo adaptado para archivo de 195x150px sin romper el menú */
.logo-navbar-container {
    height: 60px; /* Altura máxima controlada para el Navbar */
    display: flex;
    align-items: center;
}

.logo-img {
    height: 100%;
    width: auto; /* Ajusta proporcionalmente el ancho a ~78px para evitar deformaciones */
    object-fit: contain;
    display: block;
}

/* Vínculos de navegación */
.navbar-nav .nav-link {
    color: var(--color-text-dark);
    font-weight: 500;
    font-size: 1.05rem;
    padding: 0.5rem 12px !important;
    transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--color-primary) !important; }

/* Botón Destacado del Menú (Contáctanos) */
.btn-contact {
    background-color: var(--color-primary);
    color: #ffffff;
    border: none;
}
.btn-contact:hover {
    background-color: var(--color-primary-hover);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(140, 208, 190, 0.3);
}

/* ==========================================================================
   SECCIÓN HERO
   ========================================================================== */
.hero-section {
    background-color: var(--color-bg-light);
}

.hero-title {
    font-size: calc(1.8rem + 1.4vw);
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--color-title-dark);
}
.hero-text {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 540px;
}

.btn-hero-primary {
    background-color: var(--color-primary);
    color: #ffffff;
    border: none;
}
.btn-hero-primary:hover { background-color: var(--color-primary-hover); color: #ffffff; }

.btn-hero-secondary {
    background-color: transparent;
    color: var(--color-title-dark);
    border: 2px solid var(--color-primary) !important;
}
.btn-hero-secondary:hover { background-color: var(--color-primary); color: #ffffff; }

.hero-image-container {
    width: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   SECCIÓN SOBRE LA MARCA (ABOUT)
   ========================================================================== */
.about-subtitle, .portfolio-subtitle {
    color: var(--color-primary);
    font-size: 0.9rem;
    letter-spacing: 1.5px;
}
.about-title, .portfolio-title { 
    font-size: calc(1.5rem + 1.1vw); 
    line-height: 1.25; 
    color: var(--color-title-dark);
}

.about-text {
    font-size: 1.05rem;
    line-height: 1.7;
}
.about-image-container {
    width: 100%;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.02);
}

/* ==========================================================================
   PORTAFOLIO DE PRODUCTOS
   ========================================================================== */
.products-portfolio-section { background-color: var(--color-bg-light); }

.custom-product-card {
    background-color: #ffffff;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}
.custom-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06) !important;
}
.custom-product-card .card-title { color: var(--color-title-dark); font-size: 1.25rem; }

.custom-card-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   DIFERENCIALES (FEATURES CON BI-ICONS)
   ========================================================================== */
.features-section { background-color: #eaf5f6; }

.icon-circle {
    width: 60px;
    height: 60px;
    background-color: #ffffff;
    border-radius: 50%;
    color: var(--color-primary);
    font-size: 1.4rem; /* Escala correcta para los Bootstrap Icons */
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.feature-title { color: var(--color-title-dark); font-size: 1.15rem; }
.feature-text { line-height: 1.4; max-width: 260px; }

.feature-item:hover .icon-circle {
    transform: scale(1.1);
    background-color: var(--color-primary);
    color: #ffffff;
}

/* ==========================================================================
   CALL TO ACTION INTERMEDIO
   ========================================================================== */
.cta-intermediate-section { background-color: var(--color-primary); }
.cta-title { font-size: calc(1.6rem + 1.2vw); letter-spacing: -0.5px; }
.cta-text { font-size: 1.15rem; line-height: 1.6; max-width: 680px; }

.btn-cta-white {
    background-color: #ffffff;
    color: var(--color-title-dark);
    border: 2px solid #ffffff !important;
}
.btn-cta-white:hover { background-color: transparent; color: #ffffff; }

/* ==========================================================================
   SECCIÓN CONTACTO
   ========================================================================== */
.contact-form-card { background-color: #f2f2f2; }
.form-card-title, .contact-info-title { color: var(--color-title-dark); font-size: 1.6rem; }

.custom-input {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 0.8rem 1rem;
    font-size: 0.95rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.custom-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.25rem rgba(140, 208, 190, 0.2);
    outline: 0;
}

.btn-submit {
    background-color: var(--color-primary);
    color: #ffffff;
    border: none;
}
.btn-submit:hover { background-color: var(--color-primary-hover); color: #ffffff; }

.contact-info-list li { font-size: 1.05rem; }
.info-icon-wrapper {
    width: 32px;
    height: 32px;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    color: var(--color-primary);
    font-size: 0.95rem;
    flex-shrink: 0;
}
.hover-link { transition: color 0.3s ease; }
.hover-link:hover { color: var(--color-primary) !important; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer-main { background-color: #3d4246; }
.footer-link { color: #ffffff; transition: opacity 0.3s ease, color 0.3s ease; opacity: 0.7; }
.footer-link:hover { opacity: 1 !important; color: var(--color-primary); }

/* ==========================================================================
   MEDIA QUERIES (COMPACTO Y RESPONSIVO)
   ========================================================================== */
@media (max-width: 991.98px) {
    .hero-text, .about-text { margin-left: auto; margin-right: auto; }
    .hero-text { max-width: 540px; }
    .about-text { text-align: center; }
}


/* Integración de botones de WooCommerce con el estilo Hidro-K */
.woocommerce a.button, 
.woocommerce button.button, 
.woocommerce input.button,
.woocommerce #respond input#submit.alt, 
.woocommerce a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt {
    background-color: var(--bs-primary, #0d6efd); /* O el color principal de tus botones */
    color: #fff;
    border-radius: 0.375rem;
    padding: 0.5rem 1rem;
    font-weight: 600;
    border: none;
    transition: all 0.2s ease-in-out;
}

.woocommerce a.button:hover, 
.woocommerce button.button:hover {
    opacity: 0.9;
    color: #fff;
}