/* 
 * SEO H1 Fix - Solución para Google Search Console
 * Problema: Páginas "Rastreadas: actualmente sin indexar"
 * Causa: Falta de etiqueta H1 (requerida por Google)
 * Solución: H1 con apariencia visual de H2/H3 según contexto
 * Fecha: 17 de octubre 2025
 */

/* ============================================
   H1 con apariencia de H2 (para banners)
   ============================================ */
h1.h1-as-h2 {
    font-size: var(--font-size-14xl); /* 64px - mismo que h2 */
    line-height: var(--line-height-snug);
    font-weight: var(--font-weight-bold);
    margin: 0;
}

/* ============================================
   H1 con apariencia de H3 (para títulos internos)
   ============================================ */
h1.h1-as-h3 {
    font-size: var(--font-size-11xl); /* 46px - mismo que h3 */
    line-height: var(--line-height-snug);
    font-weight: var(--font-weight-bold);
    margin: 0;
}

/* ============================================
   Responsive: Ajuste automático en móviles
   ============================================ */
@media (max-width: 768px) {
    h1.h1-as-h2 {
        font-size: clamp(1.75rem, 5vw, 4rem); /* 28px-64px */
    }
    
    h1.h1-as-h3 {
        font-size: clamp(1.5rem, 4vw, 2.875rem); /* 24px-46px */
    }
}

@media (max-width: 480px) {
    h1.h1-as-h2 {
        font-size: clamp(1.5rem, 4vw, 3rem); /* 24px-48px */
    }
    
    h1.h1-as-h3 {
        font-size: clamp(1.25rem, 3.5vw, 2rem); /* 20px-32px */
    }
}

/* ============================================
   Compatibilidad con clase .title-heading
   ============================================ */
h1.title-heading.h1-as-h2,
h1.title-heading.h1-as-h3 {
    display: inline-block;
    -webkit-background-clip: text;
    background-clip: text;
    background-color: transparent;
    background-image: linear-gradient(284deg, var(--accent-transparent) 3%, var(--primary) 100%);
    -webkit-text-fill-color: transparent;
    -webkit-tap-highlight-color: transparent;
}

body.lightmode h1.title-heading.h1-as-h2,
body.lightmode h1.title-heading.h1-as-h3 {
    background-image: linear-gradient(284deg, var(--primary) 100%, var(--primary) 100%);
}

/* ============================================
   Notas de implementación:
   ============================================
   
   USO:
   1. Banner principal: <h1 class="title-heading h1-as-h2">Título</h1>
   2. Títulos internos: <h1 class="title-heading h1-as-h3">Título</h1>
   3. Mantener animaciones: data-animate="animate__fadeInRight"
   
   VENTAJAS:
   ✅ H1 presente = Google indexa correctamente
   ✅ Diseño visual = exactamente igual que antes
   ✅ Jerarquía SEO = correcta (h1 > h2 > h3 > h4)
   ✅ Responsive = se adapta automáticamente
   ✅ Compatibilidad = funciona con .title-heading existente
   
   PÁGINAS A CORREGIR:
   - aplicaciones_web.html
   - crm_erp.html  
   - integracion_apis.html
   - blog.html
   - contact.html
   - single_services.html
*/