/* =================================
   RESET Y VARIABLES
   ================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Colores principales - Tema verde natural */
    --primary-green: #4CAF50;
    --primary-green-dark: #2d5016;
    --primary-green-light: #81C784;
    --accent-green: #8BC34A;
    --accent-lime: #CDDC39;
    
    /* Colores de fondo */
    --bg-light: #F1F8E9;
    --bg-white: #FFFFFF;
    --bg-dark: #1B5E20;
    
    /* Colores de texto */
    --text-dark: #1B5E20;
    --text-medium: #33691E;
    --text-light: #558B2F;
    
    /* Sombras */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    
    /* Transiciones */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Espaciado */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    
    /* Bordes */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

/* =================================
   SPLASH SCREEN
   ================================= */

.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* Use dynamic viewport unit for mobile browsers (avoid 100vh issues) */
    height: calc(var(--vh, 1vh) * 100);
    background: linear-gradient(135deg, var(--primary-green-dark) 0%, var(--primary-green) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: splashFadeOut 0.5s ease 2s forwards;
}

.splash-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.splash-icon {
    width: 100px;
    height: 100px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Imagen del splash (reemplaza SVG) */
.splash-img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    animation: splashPulse 1.5s ease-in-out infinite;
}

/* HTML: <div class="loader"></div> */
.loader {
    width: 27.5px; /* reduced ~45% from 50px */
    aspect-ratio: 1;
    display: grid;
    border-radius: 50%;
    background:
        linear-gradient(0deg ,rgb(255 255 255 / 50%) 30%,#0000 0 70%,rgb(255 255 255 / 100%) 0) 50%/8% 100%,
        linear-gradient(90deg,rgb(255 255 255 / 25%) 30%,#0000 0 70%,rgb(255 255 255 / 75% ) 0) 50%/100% 8%;
    background-repeat: no-repeat;
    animation: l23 1s infinite steps(12);
}
.loader::before,
.loader::after {
     content: "";
     grid-area: 1/1;
     border-radius: 50%;
     background: inherit;
     opacity: 0.915;
     transform: rotate(30deg);
}
.loader::after {
     opacity: 0.83;
     transform: rotate(60deg);
}
@keyframes l23 {
    100% {transform: rotate(1turn)}
}

@keyframes splashFadeOut {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes splashPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* QR-specific loader (user-provided style, dark color) */
.qr-loader {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
}
.qr-loader::before,
.qr-loader::after {
    content: '';
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #222; /* dark color for contrast */
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    animation: animloader 2s ease-in-out infinite;
}
.qr-loader::after {
    animation-delay: 1s;
}

@keyframes animloader {
    0%, 100% {
      transform: scale(0);
      opacity: 1;
    }
    50% {
      transform: scale(1);
      opacity: 0;
    }
}

/* QR image fade-in */
.qr-image {
    opacity: 0;
    transition: opacity 360ms ease-in-out;
}
.qr-image.fade-in {
    opacity: 1;
}

/* =================================
   HEADER FULLSCREEN
   ================================= */

.header-fullscreen {
    position: relative;
    width: 100vw;
    /* Use dynamic viewport unit for mobile browsers (avoid 100vh issues) */
    height: calc(var(--vh, 1vh) * 100);
    background: linear-gradient(135deg, var(--primary-green-dark) 0%, var(--primary-green) 50%, var(--accent-green) 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md);
    opacity: 0;
    animation: headerFadeIn 1s ease 2.5s forwards;
}

@keyframes headerFadeIn {
    to {
        opacity: 1;
    }
}

/* =================================
   HEADER ITEMS ENTRANCE
   ================================= */
@keyframes headerEnter {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes iconEnter {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Initial state for header items */
.header-content > .logo-container,
.header-content > .slogan,
.header-content > .social-links,
.header-fullscreen .scroll-indicator {
    opacity: 0;
    transform: translateY(16px);
}

/* Staggered entrance */
/* Apply entrance animations only after `.anim-ready` is added to header */
.header-fullscreen.anim-ready .header-content > .logo-container { animation: headerEnter .6s cubic-bezier(.22,.9,.38,1) .18s forwards; }
.header-fullscreen.anim-ready .header-content > .slogan { animation: headerEnter .6s cubic-bezier(.22,.9,.38,1) .42s forwards; }
.header-fullscreen.anim-ready .header-content > .social-links { animation: headerEnter .6s cubic-bezier(.22,.9,.38,1) .66s forwards; }
.header-fullscreen.anim-ready .scroll-indicator { animation: headerEnter .6s cubic-bezier(.22,.9,.38,1) .9s forwards; }

/* Stagger icons inside social-links */
.header-fullscreen.anim-ready .social-links .social-icon {
    opacity: 0;
    transform: translateX(0) scale(0.98);
}

/* icons 1-2 enter from left, 3-4 from right, staggered */
.header-fullscreen.anim-ready .social-links .social-icon:nth-child(1) {
    animation: iconEnterLeft .45s cubic-bezier(.22,.9,.38,1) .68s forwards;
}
.header-fullscreen.anim-ready .social-links .social-icon:nth-child(2) {
    animation: iconEnterLeft .45s cubic-bezier(.22,.9,.38,1) .82s forwards;
}
.header-fullscreen.anim-ready .social-links .social-icon:nth-child(3) {
    animation: iconEnterRight .45s cubic-bezier(.22,.9,.38,1) .76s forwards;
}
.header-fullscreen.anim-ready .social-links .social-icon:nth-child(4) {
    animation: iconEnterRight .45s cubic-bezier(.22,.9,.38,1) .90s forwards;
}

@keyframes iconEnterLeft {
    from { opacity: 0; transform: translateX(-120%) scale(0.9); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes iconEnterRight {
    from { opacity: 0; transform: translateX(120%) scale(0.9); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}


.header-content {
    text-align: center;
    max-width: 600px;
    width: 100%;
}

/* Logo */
.logo-container {
    margin-bottom: 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px; /* reducido: menos espacio entre logo y texto */
}

.logo-main {
    width: 150px;
    height: 150px;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
}

/* Imagen del logo en header (reemplaza SVG) */
.logo-img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
    display: block;
    margin: 0 auto;
    animation: logoFloat 3s ease-in-out infinite;
    position: relative;
    top: 18px; /* mayor desplazamiento para superponer sobre el texto */
    z-index: 3;
}

/* Suavizado: pseudo-capa debajo del logo para mezclar con el texto */
.logo-img::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -12px;
    width: 120px;
    height: 40px;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.12), rgba(255,255,255,0));
    pointer-events: none;
    z-index: 2;
    filter: blur(6px);
}

@keyframes logoFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-10px) scale(1.05);
    }
}

/* Animación sutil del logo */
.logo-seed {
    animation: seedPulse 2s ease-in-out infinite;
}

@keyframes seedPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

/* Slogan */
.slogan {
    color: white;
    font-size: 1rem;
    font-weight: 500;
    margin-top: 0.25rem;
    margin-bottom: var(--spacing-lg);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

/* Logo text lines placed very close to the logo image */
.logo-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -12px; /* levantar texto para quedar parcialmente debajo del logo */
    gap: 2px;
    margin-bottom: 1.25rem;
    z-index: 1;
    position: relative;
}

.brand-line {
    color: white;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.5px;
}

.brand-line--primary {
    font-size: 1.6rem;
}

.brand-line--secondary {
    font-size: 1.2rem;
    opacity: 0.98;
}

.slogan-line {
    display: block;
}

/* Social Links */
.social-links {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.social-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-decoration: none;
    transition: all var(--transition-normal);
    cursor: pointer;
}

.social-icon:hover,
.social-icon:focus {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.social-icon:focus {
    outline: 2px solid white;
    outline-offset: 4px;
}

.social-icon svg {
    width: 24px;
    height: 24px;
}

/* Scroll Indicator */
.scroll-indicator {
    /* Keep the scroll indicator fixed at the bottom of the viewport so
       it always shows there is more content to scroll to. */
    position: fixed;
    bottom: calc(var(--spacing-lg) + 8px);
    left: 50%;
    transform: translateX(-50%);
    animation: scrollBounce 2s ease-in-out infinite;
    z-index: 9998; /* above header content but below modals (9999) and splash (10000) */
    pointer-events: none; /* let touches pass through */
    transition: opacity 320ms var(--transition-fast), transform 320ms var(--transition-fast);
    opacity: 1;
    visibility: visible;
}

/* While the splash screen is present, hide the scroll indicator so it
   doesn't appear above the splash. When the splash element is removed
   from the DOM the selector no longer matches and the indicator becomes visible. */
.splash-screen + .header-fullscreen .scroll-indicator {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(6px);
}

/* Hide during section entrance animations */
.scroll-indicator.hide-during-anim {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateX(-50%) translateY(8px) !important;
}

.scroll-arrow {
    width: 24px;
    height: 24px;
    border-right: 3px solid white;
    border-bottom: 3px solid white;
    transform: rotate(45deg);
}

@keyframes scrollBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* =================================
   MAIN CONTENT
   ================================= */

.main-content {
    position: relative;
    z-index: 1;
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Section */
.section {
    padding: var(--spacing-xl) 0;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-dark);
    text-align: center;
    margin-bottom: var(--spacing-lg);
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--primary-green);
    margin: var(--spacing-sm) auto 0;
    border-radius: 2px;
}

/* =================================
   SERVICIOS SECTION
   ================================= */

.services-section {
    background: var(--bg-white);
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

.service-card {
    background: var(--bg-light);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.service-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-md);
    background: var(--primary-green);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.service-icon svg {
    width: 32px;
    height: 32px;
}

.service-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--spacing-sm);
}

.service-description {
    color: var(--text-medium);
    line-height: 1.6;
}

/* =================================
   CONTACTO SECTION
   ================================= */

.contact-section {
    background: var(--bg-light);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
}

.contact-card {
    background: var(--bg-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
    border: none;
    cursor: pointer;
    width: 100%;
}

.contact-card:hover,
.contact-card:focus {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.contact-card:focus {
    outline: 2px solid var(--primary-green);
    outline-offset: 4px;
}

.contact-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--spacing-md);
    background: var(--primary-green-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.contact-icon svg {
    width: 28px;
    height: 28px;
}

.contact-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--spacing-xs);
}

.contact-text {
    color: var(--text-light);
    font-size: 0.9rem;
}

.whatsapp-contact .contact-icon {
    background: #25D366;
}

/* =================================
   UBICACIÓN SECTION
   ================================= */

.location-section {
    background: var(--bg-white);
}

.location-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.location-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--bg-light);
    border-radius: var(--radius-lg);
}

.location-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: var(--primary-green);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

.location-icon svg {
    width: 28px;
    height: 28px;
}

.location-text {
    text-align: left;
}

.location-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: var(--spacing-xs);
}

.location-address {
    color: var(--text-medium);
    line-height: 1.6;
}

/* Botones */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    color: white;
}

.btn svg {
    width: 20px;
    height: 20px;
}

.btn-primary {
    background: var(--primary-green);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary-green-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-primary:focus {
    outline: 2px solid var(--primary-green);
    outline-offset: 4px;
}

.btn-secondary {
    background: var(--bg-white);
    color: var(--primary-green);
    border: 2px solid var(--primary-green);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--primary-green);
    color: white;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary:focus {
    outline: 2px solid var(--primary-green);
    outline-offset: 4px;
}

/* =================================
   COMPARTIR SECTION
   ================================= */

.share-section {
    background: var(--bg-light);
}

.share-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.share-description {
    color: var(--text-medium);
    margin-bottom: var(--spacing-lg);
    font-size: 1.1rem;
}

.share-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* =================================
   FOOTER
   ================================= */

.footer {
    background: var(--primary-green-dark);
    color: white;
    padding: var(--spacing-xl) 0 var(--spacing-lg);
}

.footer-content {
    text-align: center;
}

.footer-info {
    margin-bottom: var(--spacing-lg);
}

.footer-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.footer-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.footer-credit {
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.footer-link {
    color: var(--accent-lime);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-link:hover,
.footer-link:focus {
    color: white;
    text-decoration: underline;
}

/* =================================
   MODALES
   ================================= */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md);
}

.modal.active {
    display: flex;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    animation: modalFadeIn var(--transition-normal);
}

.modal-content {
    position: relative;
    background: white;
    border-radius: var(--radius-xl);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    animation: modalSlideUp var(--transition-normal);
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalSlideUp {
    from {
        transform: translateY(50px) scale(1.1);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* Animación de cierre (fade-out + slide down) */
@keyframes modalFadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes modalSlideDown {
    from { transform: translateY(0) scale(1); opacity: 1; }
    to   { transform: translateY(50px) scale(1.1); opacity: 0; }
}

/* Estado cuando se está cerrando: reproducir las animaciones de salida
   Mantener `display:flex` hasta que terminen las animaciones. */
.modal.closing .modal-overlay {
    animation: modalFadeOut var(--transition-normal) forwards;
}

.modal.closing .modal-content {
    animation: modalSlideDown var(--transition-normal) forwards;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--bg-light);
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
}

.modal-close {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--bg-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: var(--text-dark);
}

.modal-close:hover,
.modal-close:focus {
    background: var(--primary-green);
    color: white;
    transform: rotate(90deg);
}

.modal-close:focus {
    outline: 2px solid var(--primary-green);
    outline-offset: 4px;
}

.modal-close svg {
    width: 24px;
    height: 24px;
}

.modal-body {
    padding: var(--spacing-lg);
}

.modal-description {
    color: var(--text-medium);
    margin-bottom: var(--spacing-lg);
}

/* WhatsApp List */
.whatsapp-list {
    list-style: none;
}

.whatsapp-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-normal);
    margin-bottom: var(--spacing-sm);
}

.whatsapp-item:hover,
.whatsapp-item:focus {
    background: #25D366;
    color: white;
    transform: translateX(8px);
    box-shadow: var(--shadow-md);
}

.whatsapp-item:focus {
    outline: 2px solid #25D366;
    outline-offset: 4px;
}

.whatsapp-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    transition: all var(--transition-normal);
}

.whatsapp-item:hover .whatsapp-icon,
.whatsapp-item:focus .whatsapp-icon {
    background: white;
    color: #25D366;
}

.whatsapp-icon svg {
    width: 24px;
    height: 24px;
}

.whatsapp-info {
    display: flex;
    flex-direction: column;
}

.whatsapp-name {
    font-weight: 600;
    font-size: 1.1rem;
}

.whatsapp-number {
    color: var(--text-light);
    font-size: 0.9rem;
}

.whatsapp-item:hover .whatsapp-number,
.whatsapp-item:focus .whatsapp-number {
    color: rgba(255, 255, 255, 0.9);
}

/* QR Container */
.qr-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    min-height: 300px;
}

.qr-container canvas {
    max-width: 100%;
    height: auto;
}

/* =================================
   RESPONSIVE - TABLET
   ================================= */

@media (min-width: 768px) {
    .logo-main {
        width: 200px;
        height: 200px;
    }
    
    .slogan {
        font-size: 2.5rem;
    }
    
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .share-buttons {
        flex-direction: row;
        justify-content: center;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
}

/* =================================
   RESPONSIVE - DESKTOP
   ================================= */

@media (min-width: 1024px) {
    .logo-main {
        width: 250px;
        height: 250px;
    }
    .logo-img {
        width: 250px;
        height: 250px;
    }
    
    .slogan {
        font-size: 3rem;
    }
    
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .contact-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .section {
        padding: var(--spacing-xl) * 1.5 0;
    }
}

/* =================================
   UTILIDADES
   ================================= */

/* Accesibilidad - Skip to content */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-green);
    color: white;
    padding: var(--spacing-sm) var(--spacing-md);
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) 0;
    z-index: 100;
}

.skip-to-content:focus {
    top: 0;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Focus visible */
:focus-visible {
    outline: 2px solid var(--primary-green);
    outline-offset: 4px;
}

/* Animación de fade-in para elementos */
.fade-in {
    /* Estado inicial: oculto y desplazado para evitar "jump" antes de iniciar la animación */
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn var(--transition-slow);
    animation-fill-mode: both;
}

/* Estado inicial oculto para elementos observados por IntersectionObserver
   Esto evita que aparezcan visibles en su posición antes de que se añada
   la clase `.fade-in` desde JavaScript. */
.section,
.service-card,
.contact-card,
.footer {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(1.1);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(20px) scale(1.1);
    }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print styles */
@media print {
    .splash-screen,
    .scroll-indicator,
    .social-links,
    .modal {
        display: none !important;
    }
    
    .header-fullscreen {
        height: auto;
        page-break-after: always;
    }
}