/*
Theme Name: Veltian Child
Theme URI: https://veltian.es
Description: Tema hijo personalizado para VELTIAN con widgets de Elementor y Tailwind CSS
Author: VELTIAN
Author URI: https://veltian.es
Template: twentytwentyfour
Version: 1.0.3
Text Domain: veltian-child
*/

/* 
 * Este archivo es necesario para que WordPress reconozca el tema hijo.
 * Los estilos se cargan desde Tailwind CSS compilado o desde el tema padre.
 */

/* ============================================
   VARIABLES GLOBALES
   ============================================ */
:root {
    --wp--preset--font-family--heading: 'Azeret Mono', monospace !important;
    --wp--preset--font-family--body: 'Azeret Mono', monospace !important;
    --wp--preset--font-family--sans: 'Azeret Mono', monospace !important;
}

/* ============================================
   GLOBAL - Prevenir scroll horizontal
   ============================================ */
html {
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
}

/* ============================================
   TIPOGRAFÍA GLOBAL
   ============================================ */
body,
.font-sans {
    font-family: 'Azeret Mono', monospace !important;
}

.veltian-logo-text {
    font-family: 'Duhit', sans-serif !important;
}

/* ============================================
   HEADINGS DE WORDPRESS
   ============================================ */
.wp-block-heading {
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
}

/* ============================================
   HEADER - Tamaños logo y texto (control exacto)
   ============================================ */
.veltian-header-logo-img {
    height: 2.1rem;
}

.veltian-header .veltian-logo-text,
.elementor-widget-veltian_header .veltian-logo-text {
    font-size: 1.6rem;
}

@media (min-width: 768px) {
    .veltian-header-logo-img {
        height: 2.6rem;
    }

    .veltian-header .veltian-logo-text,
    .elementor-widget-veltian_header .veltian-logo-text {
        font-size: 2rem;
    }
}

/* ============================================
   HERO Y PROCESO - Imágenes sin recorte
   La altura la determina la imagen, no el contenedor
   ============================================ */
.veltian-hero-section {
    min-height: auto !important;
    height: auto !important;
}

.veltian-hero-bg-img,
.veltian-proceso-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================
   HEADER - Menú hamburguesa móvil
   ============================================ */
.veltian-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
    z-index: 10001;
    position: relative;
}

.veltian-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: currentColor;
    margin: 3px 0;
    transition: all 0.3s ease;
    border-radius: 1px;
}

.veltian-hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
}

.veltian-hamburger.active span:nth-child(2) {
    opacity: 0;
}

.veltian-hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.veltian-nav-links {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

/* Desktop: nav links más espaciados */
@media (min-width: 769px) {
    .veltian-nav-links {
        gap: 2.25rem;
    }
}

/* LinkedIn icon en header */
.veltian-linkedin-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.veltian-linkedin-icon svg {
    display: block;
}

/* ============================================
   CONTACTO - Items siempre en horizontal
   ============================================ */
#contacto .flex.items-center.group {
    flex-wrap: nowrap;
}

/* Contacto - Iconos proporcionales al ancho disponible */
#contacto .w-20.h-20 {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
}

#contacto .mr-6 {
    margin-right: 0.75rem;
}

/* Contacto - Título imagen proporcional */
#contacto .-m-24 {
    margin: -1.5rem;
}

#contacto .-ml-28 {
    margin-left: -1.5rem;
}

#contacto div[style*="max-width: 550px"] {
    max-width: 320px;
}

/* Contacto - Texto más pequeño para caber */
#contacto .text-xl {
    font-size: 0.95rem;
    line-height: 1.4;
}

/* ============================================
   RESPONSIVE - TABLET GRANDE (max-width: 1024px)
   ============================================ */
@media (max-width: 1024px) {

    /* Contacto - Grid de 7 columnas a 1 columna */
    .grid.grid-cols-7 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: 2rem !important;
    }

    .grid.grid-cols-7 > .col-span-5 {
        grid-column: span 1 / span 1 !important;
        width: 100% !important;
    }

    .grid.grid-cols-7 > .col-span-2.ml-8 {
        grid-column: span 1 / span 1 !important;
        margin-left: 0 !important;
        margin-top: 1rem;
    }

    /* Contacto - Corregir padding del container */
    #contacto .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* Contacto en 1 col - iconos pueden ser más grandes */
    #contacto .w-20.h-20 {
        width: 4rem !important;
        height: 4rem !important;
    }

    #contacto .mr-6 {
        margin-right: 1rem !important;
    }

    #contacto .text-xl {
        font-size: 1.05rem !important;
    }

    /* Contacto - Título sin márgenes negativos extremos */
    #contacto .-m-24 {
        margin: -1rem !important;
    }

    #contacto .-ml-28 {
        margin-left: -1rem !important;
    }

    #contacto div[style*="max-width: 550px"] {
        max-width: 100% !important;
    }

    /* Título images (flechas SVG) - Reducir tamaño */
    div[style*="width: 300px"][style*="height: 300px"] {
        width: 220px !important;
        height: 220px !important;
    }

    /* Servicios - Reducir altura de imágenes */
    .h-\[400px\] {
        height: 300px !important;
    }

    /* Servicios - Controlar watermarks que causan overflow */
    .pointer-events-none img[style*="30vw"] {
        width: 250px !important;
        height: 250px !important;
    }
}

/* ============================================
   RESPONSIVE - TABLET (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {

    /* Header - Mostrar hamburguesa */
    .veltian-hamburger {
        display: flex !important;
    }

    /* Header - Ocultar enlaces por defecto */
    .veltian-nav-links {
        display: none !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(6, 95, 70, 0.97);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        z-index: 10000;
        padding: 2rem;
    }

    .veltian-nav-links.active {
        display: flex !important;
    }

    .veltian-nav-links a {
        color: #ffffff !important;
        font-size: 1.25rem !important;
        text-align: center;
    }

    .veltian-nav-links a:hover {
        text-decoration: underline;
    }

    /* Header - Reducir logo en móvil/tablet */
    .veltian-header-logo-img {
        height: 1.8rem !important;
    }

    .veltian-header .veltian-logo-text {
        font-size: 1.4rem !important;
    }

    /* LinkedIn icon en menú móvil */
    .veltian-nav-links.active .veltian-linkedin-icon svg {
        width: 28px;
        height: 28px;
        fill: #ffffff;
    }

    /* Header nav - prevenir column layout del CSS en functions.php */
    .veltian-header nav {
        flex-direction: row !important;
        gap: 0 !important;
        padding-bottom: 0.5rem !important;
    }

    /* Transformación - Reducir margen inferior del título */
    .mb-32 {
        margin-bottom: 3rem !important;
    }

    /* Hero y Proceso - Las imágenes ya son <img> responsivas, no necesitan min-height */
    .veltian-hero-section {
        min-height: auto !important;
    }

    .veltian-proceso-section {
        padding: 0 !important;
    }

    /* Servicios - Reducir altura de imágenes */
    .h-\[400px\] {
        height: 250px !important;
    }

    /* Servicios - Reducir padding lateral */
    .pl-8 {
        padding-left: 0.5rem !important;
    }

    .pr-8 {
        padding-right: 0.5rem !important;
    }

    /* Servicios - Títulos más pequeños */
    #servicios .text-3xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }

    /* Servicios - Ocultar watermarks del favicon que causan overflow */
    .pointer-events-none img[style*="30vw"] {
        display: none !important;
    }

    /* Servicios y secciones - Ajustar título imagen (300px inline) */
    div[style*="width: 300px"][style*="height: 300px"] {
        width: 180px !important;
        height: 180px !important;
    }

    /* Transformacion - logo container (140x140 inline) */
    div[style*="width: 140px"][style*="height: 140px"] {
        width: 100px !important;
        height: 100px !important;
    }

    /* Equipo - Fotos responsivas */
    .w-80.h-80 {
        width: 100% !important;
        max-width: 280px !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
    }

    /* Casos de Éxito - Grid a 2 columnas en tablet */
    #casos-exito .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 2rem !important;
    }

    /* Equipo - Grid a 2 columnas en tablet */
    #equipo .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 2rem !important;
    }

    /* Reducir paddings verticales generales */
    .py-20 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Contacto - Márgenes negativos título */
    #contacto .-m-24 {
        margin: -1rem !important;
    }

    #contacto .-ml-28 {
        margin-left: -1rem !important;
    }

    /* Contacto - Iconos más pequeños */
    #contacto .w-20.h-20 {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }

    #contacto .mr-6 {
        margin-right: 1rem !important;
    }

    #contacto .text-xl {
        font-size: 1rem !important;
    }

    /* Contacto - Limitar max-width del título */
    #contacto div[style*="max-width: 550px"] {
        max-width: 300px !important;
    }

    /* Footer - Columnas stack */
    .veltian-footer .grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   RESPONSIVE - MÓVIL (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {

    /* Header - Logo aún más pequeño en móvil pequeño */
    .veltian-header-logo-img {
        height: 1.5rem !important;
    }

    .veltian-header .veltian-logo-text {
        font-size: 1.15rem !important;
    }

    /* Títulos principales - Escalar para móvil */
    .text-3xl {
        font-size: 1.375rem !important;
        line-height: 1.875rem !important;
    }

    .text-4xl,
    .md\:text-4xl {
        font-size: 1.5rem !important;
        line-height: 2rem !important;
    }

    /* Título images (flechas SVG) - Más pequeñas */
    div[style*="width: 300px"][style*="height: 300px"] {
        width: 140px !important;
        height: 140px !important;
    }

    div[style*="width: 140px"][style*="height: 140px"] {
        width: 80px !important;
        height: 80px !important;
    }

    /* Hero y Proceso - Imágenes ya son <img> responsivas */
    .veltian-hero-section,
    .veltian-proceso-section {
        min-height: auto !important;
    }

    /* Servicios - Imágenes más pequeñas */
    .h-\[400px\] {
        height: 200px !important;
    }

    /* Equipo - Grid a 1 columna */
    #equipo .grid {
        grid-template-columns: 1fr !important;
    }

    /* Casos éxito - Grid a 1 columna */
    #casos-exito .grid {
        grid-template-columns: 1fr !important;
    }

    /* Reducir gaps */
    .gap-12 {
        gap: 1.5rem !important;
    }

    .gap-16 {
        gap: 2rem !important;
    }

    /* Contacto - Imagen principal */
    #contacto .col-span-5 img {
        height: auto !important;
        max-height: 300px !important;
    }

    /* Contacto - Título sin márgenes negativos */
    #contacto .-m-24 {
        margin: 0 !important;
    }

    #contacto .-ml-28 {
        margin-left: 0 !important;
    }

    #contacto div[style*="max-width: 550px"] {
        max-width: 100% !important;
    }

    /* Footer - Reducir padding */
    .veltian-footer .py-12 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .veltian-footer .py-16 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* Transformación - Reducir margen */
    .mb-32 {
        margin-bottom: 2rem !important;
    }

    /* Padding general containers */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Equipo - Fotos más pequeñas */
    .w-80.h-80 {
        max-width: 220px !important;
    }

    /* Cajas de transformación */
    .border-2.border-veltian-green.rounded-lg.p-6,
    .bg-veltian-green.rounded-lg.p-6 {
        padding: 1.25rem !important;
    }

    /* Iconos contacto aún más pequeños */
    #contacto .w-20.h-20 {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    #contacto .space-y-8 > * + * {
        margin-top: 1.25rem !important;
    }

    /* Servicios - Servicio 2 (text-right) centrar en móvil */
    #servicios .text-right {
        text-align: left !important;
    }

    #servicios .ml-auto {
        margin-left: 0 !important;
    }
}