/* styles.css (VERSIÓN COMPLETA Y CORREGIDA) */

/* ===== @FONT-FACE DECLARATIONS ===== */
@font-face { font-family: 'Halogen'; src: url('fonts/Halogen-Thin.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Halogen'; src: url('fonts/Halogen-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Halogen'; src: url('fonts/Halogen-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Halogen'; src: url('fonts/Halogen-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Halogen'; src: url('fonts/Halogen-Bold.otf') format('opentype');  font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Halogen'; src: url('fonts/Halogen-Black.otf') format('opentype');  font-weight: 900; font-style: normal; font-display: swap; }

/* ===== RESET BÁSICO Y ESTILOS GLOBALES ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100vw;
    overflow-x: hidden; 
    background-color: #ffffff;
    color: #3c3c3c;
    font-family: 'Halogen', Arial, sans-serif;
    font-weight: 400;
}

img {
    max-width: 100%;
    height: auto;
    display: block; 
}

/* ===== HEADER STYLES ===== */
.main-header {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%;
    height: 50px;
    background-color: #FFFFFF; 
    padding: 0.8em 2em;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    z-index: 1000; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    opacity: 0; 
    transform: translateY(-100%);
    pointer-events: none;
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}
.main-header.visible { 
    opacity: 1; 
    transform: translateY(0); 
    pointer-events: auto; 
}
.header-logo a { 
    display: inline-block; 
    text-decoration: none; 
}
.header-logo img { 
    height: 25px; 
    width: auto; 
    display: block; 
    align-self: center;
}
.header-nav ul { 
    list-style: none; 
    display: flex; 
    margin: 0; 
    padding: 0; 
    align-items: center; 
}
.header-nav ul li { 
    margin-left: 2em; 
}
.header-nav ul li a {
    font-family: 'Halogen', Arial, sans-serif; 
    text-decoration: none;
    font-weight: 700; 
    color: #2E5A44; 
    text-transform: uppercase; 
    padding: 0.5em 0; 
    transition: color 0.3s ease;
}
.header-nav ul li a:hover { 
    color: #F7B81E; 
}

.header-nav {
  margin-left: auto; /* Empuja el nav hacia la derecha */
  display: flex;
  align-items: center;
}


/* ===== HERO SECTION STYLES ===== */
.hero {
    position: relative;
    text-align: center; 
    height: 100vh;
    overflow: hidden; 
    z-index: 1; 
}

.hero-background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
    z-index: 1; 
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F7B81E; 
    opacity: 0.85; 
    z-index: 2; 
}

.hero .model {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;   
    height: 100%;   
    display: flex; 
    justify-content: center;
    align-items: center;
    pointer-events: none; 
    z-index: 3; 
    overflow: visible;
}

.hero .model canvas {
    pointer-events: auto; 
}

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    color: #2E5A44; 
    position: relative; 
    z-index: 4; 
    margin-top: 65vh; 
    line-height: 1.0;
}

.white-text {
  color: #ffffff;
}

/* ===== ESTILOS PARA FLECHAS DE SCROLL ===== */
.scroll-indicator-container {
    position: absolute;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    align-items: center;
    z-index: 4;
}
.scroll-arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 6px solid #020502;
    opacity: 0;
    margin-bottom: 4px;
    animation: scrollArrowVerticalPulse 2s infinite ease-out;
}
.scroll-arrow:nth-child(1) { animation-delay: 0s; }
.scroll-arrow:nth-child(2) { animation-delay: 0.25s; }
.scroll-arrow:nth-child(3) { animation-delay: 0.5s; }

@keyframes scrollArrowVerticalPulse {
    0% { opacity: 0; transform: translateY(-15px); }
    30% { opacity: 1; }
    70% { opacity: 1; transform: translateY(0px); }
    100% { opacity: 0; transform: translateY(10px); }
}

/* ===== ESTILOS SECCIÓN ABOUT ===== */
.about-section {
    position: relative; 
    min-height: 450vh; 
    background-color: #FFFFFF; 
    color: #020502; 
    font-family: 'Halogen', sans-serif; 
    overflow: hidden; 
    z-index: 5; 
    display: block; 
    padding: 0; 
}
.about-sticky-container {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center; 
    justify-content: center; 
    text-align: center;
    overflow: visible; 
}
.about-content {
    position: relative; 
    padding: 20px; 
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    width: 95%; 
    max-width: 1100px; 
}
.greeting-container {
    position: relative; 
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; 
    margin-bottom: 50px;
}
.greeting-container .line1 {
    display: flex;
    justify-content: center;
    align-items: baseline;   
    width: 100%;
    flex-wrap: nowrap; 
    margin-top: 100px;
    gap: 0.2em;
}
.greeting-container .line2 {
    display: flex;
    align-items: baseline;
    justify-content: center; 
    width: 100%;
    flex-wrap: nowrap; 
    margin-top: -0.1em; 
}
.word-container {
    opacity: 1; 
    display: inline-block; 
}
.text-hi { margin-left: 50px; }
.char { 
    display: inline-block; 
    opacity: 0;
    font-weight: 700; 
    line-height: 1.0; 
    text-transform: uppercase;
    color: #020502;
    position: relative; 
    padding: 0 0.02em; 
}
.text-hi .char, .text-im .char { font-size: clamp(4.5rem, 10vw, 7rem); }
.text-giovanni .char { font-size: clamp(4.5rem, 10vw, 7rem); color: #2E5A44; }
.bio-container {
    width: 70%;
    max-width: 90vw;
    opacity: 0;
    position: relative;
    visibility: hidden;
    margin: 0 auto;
    padding: 0 10px;
    text-align: center;
}
.bio-container p {
    font-size: clamp(0.8rem, 1.8vw, 1rem);
    line-height: 1.6;
    font-weight: 400;
    color: #2E5A44;
    text-transform: none;
    letter-spacing: 0.05em;
    margin-bottom: 1.2em;
}

/* ===== ESTILOS SECCIÓN SCROLL INFINITO DE TEXTO ===== */
.infinite-text-bars-section {
    padding: 0; 
    background-color: #ffffff;
    overflow-x: hidden;
}
.scroll-bar {
    overflow: hidden;
    padding: clamp(0.6rem, 1.5vw, 1.2rem) 0;
    white-space: nowrap; 
    display: flex;
}
.scroll-text-content {
    display: flex;
    white-space: nowrap;
    will-change: transform;
}
.scroll-text-content span.text-segment {
    font-family: 'Halogen', Arial, sans-serif; 
    font-weight: 700;
    font-size: clamp(1.5rem, 3.5vw, 2.8rem);
    text-transform: uppercase; 
    display: inline-block;
}
.scroll-bar.bar-1 { background-color: #2E5A44; color: #FFFFFF; }
.scroll-bar.bar-2 { background-color: #F7B81E; color: #ffffff; }
.scroll-bar.bar-3 { background-color: #98D4E2; color: #ffffff; }

/* ===== LOGO 3D HORIZONTAL===== */
.work-desde-cero-section {
    position: relative;
    min-height: 300vh;
    background-color: #ffffff;
    overflow: hidden;
}
.wdc-pin-container {
    height: 100vh;
    width: 100%;
    position: sticky;
    top: 0;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wdc-content-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.wdc-model-container {
    width: 75vh;
    height: 75vh;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wdc-model-container canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.wdc-title {
    color: #2E5A44; 
    font-family: 'Halogen', Arial, sans-serif; 
    font-weight: 700;
    font-size: clamp(2.5rem, 8vw, 5rem);
    text-align: center;
    white-space: nowrap;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    will-change: opacity, transform;
    z-index: 10;
}

/* ===== SECCIÓN "WORK" ===== */
#work {
    padding: 120px 0;
    text-align: center;
    background-color: #fff;
}
#work .work-title {
    font-family: 'Halogen', sans-serif;
    font-weight: 900;
    font-size: 3rem;
    margin-bottom: 60px;
    color: #2E5A44;
    text-transform: uppercase;
}

#work .work-container {
    height: 70vh;
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
    margin: 0 30px;
    position: relative;
    overflow: hidden;
    background-color: #F7B81E;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.4s ease;
}
#work .cards-wrapper {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    flex-wrap: wrap;
}
#work .paint-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}
.paint-circle {
    position: absolute;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: paint-fill 0.7s ease-out forwards;
}
@keyframes paint-fill {
    0% { width: 0; height: 0; opacity: 1; }
    100% { width: 300vw; height: 300vw; opacity: 1; }
}
.project-card-link { text-decoration: none; }
.card-scene { width: 250px; height: 160px; perspective: 1200px; cursor: pointer; }
.card-cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); }
.card-scene:hover .card-cube { transform: rotateX(-90deg); }
.card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; padding: 20px; font-family: 'Halogen', sans-serif; font-weight: 700; font-size: 1.2rem; line-height: 1.4; text-align: center; color: #FFFFFF; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);}
.card-front { background-color: #2E5A44; transform: rotateY(0deg) translateZ(80px); }
.card-back { transform: rotateX(90deg) translateZ(80px); }
.card-back img { height: 70px; width: auto; }
.card--green { background-color: #ffffff; }
.card--blue { background-color: #F7B81E; }
.card--black { background-color: #98D4E2; }

/* ===== FOOTER - VERSIÓN DEFINITIVA ===== */

/* --- Contenedor Principal --- */
.footer {
    background-color: #020502; 
    color: #FFFFFF;
    text-transform: none;
    overflow: hidden;
    position: relative;
    padding: 12vh 0 6rem 5vw; 
}

/* --- Layout del Grid --- */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5vw;
}

/* --- Contenido de Texto --- */
.footer-text-content {
    text-align: left;
}

.footer-text-content h3 {
    font-family: 'Halogen', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 1rem;
    text-transform: none !important;
    line-height: 1.1; /* Añade espacio entre las líneas del párrafo */
}

.footer-text-content p {
    font-size: 1rem;
    line-height: 1.6; /* AÑADIDO: Espaciado para evitar que el texto se pegue */
    margin-bottom: 1.5rem;
    opacity: 0.8;
    max-width: 450px;
}

/* --- Botón "Get in Touch" --- */

.footer-email {
    display: inline-flex; /* CAMBIO CLAVE: Usa inline-flex para que el botón no ocupe todo el ancho */
    justify-content: center; /* Centra el texto y la flecha horizontalmente */
    align-items: center; /* Centra el texto y la flecha verticalmente */
    
    position: relative;
    font-size: 1.1rem;
    font-weight: 600;
    color: #FFFFFF;
    text-decoration: none;
    padding: 8px 18px; /* MANTENIDO: El padding original para el tamaño correcto */
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    overflow: hidden;
    transition: color 0.4s ease, border-color 0.4s ease, padding-right 0.4s ease;
}

/* El pseudo-elemento para el efecto de barrido de color */
.footer-email::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #FFFFFF;
    z-index: -1;
    transition: width 0.4s ease;
    border-radius: 20px;
}

/* El texto dentro del botón */
.footer-email span {
    position: relative;
    z-index: 1;
    transition: color 0.4s ease;
}

/* Flecha (oculta por defecto) */
.footer-email::after {
    content: '→';
    opacity: 0;
    width: 0;
    transition: opacity 0.3s ease, width 0.3s ease, margin-left 0.4s ease;
    margin-left: 0;
    font-size: 3.5rem;
    line-height: 1;
}

/* Efecto Hover */
.footer-email:hover {
    background-color: #F7B81E;
}

/* Barrido de color */
.footer-email:hover::before {
    width: 100%;
}

/* Color del texto al hacer hover */
.footer-email:hover span {
    color: #2E5A44;
    font-weight: 600;
}

/* Muestra la flecha al hacer hover */
.footer-email:hover::after {
    opacity: 1;
    width: auto;
    margin-left: 25px;
    color: #2E5A44;
}

/* --- Hexágono Animado (Columna Derecha) --- */
.footer-image-content {
    display: none;
    justify-content: flex-end; /* AÑADIDO: Para alinear a la derecha */
    align-items: center;
    padding-right: 5vw;
}

.footer-hexagon {
    max-width: 250px;
    animation: spin 25s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- Línea de Copyright --- */
.footer-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 0;
    text-align: center;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.6rem;
    opacity: 0.6;
    text-transform: none;
}

/* --- Media Query para Escritorio --- */
@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-image-content {
        display: flex;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
  #work .cards-wrapper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px !important;
    flex-wrap: nowrap !important;
  }

  #work .card-front {
    font-size: 0.8rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }
}

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

/* ===== FRANJAS DE COLORES ===== */
.stripe { width: 100%; height: 8vh; }
.stripe.stripe-white { height: 20vh; background-color: #ffffff; }
.stripe.stripe-orange { height: 15vh; background-color: #F7B81E; }
.stripe.stripe-blue { background-color: #98D4E2; height: 9vh; }
.stripe.stripe-green { background-color: #6fb767; height: 6vh; }


  .my-work-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Espacio entre cards, ajustable */
    padding: 0 20px;
  }

  .work-card {
    max-width: 300px;
    width: 100%;
  }

@media (min-width: 768px) and (max-width: 1024px) {
  #work .cards-wrapper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px !important;
    flex-wrap: nowrap !important;
  }

  #work .card-scene {
    width: 180px !important;
    height: 120px !important;
    flex-shrink: 0 !important;
    perspective: none !important;
  }

  #work .card {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    height: 100% !important;
  }

  #work .card:hover,
  #work .card-scene:hover,
  #work .card-face:hover,
  #work .card-front:hover,
  #work .card-back:hover {
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  #work .card-face {
    backface-visibility: visible !important;
    transform: none !important;
    position: relative !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
    padding: 10px !important;
    text-align: center !important;
  }

  #work .card-front {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    height: 100% !important;
  }

  #work .card-back {
    display: none !important;
  }

  #work .card-front p {
    font-size: 0.55rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }
  
}


/* ================================================================== */
/* ===== INICIO DE TODO EL CÓDIGO PARA LA VERSIÓN MÓVIL ===== */
/* ================================================================== */

@media (max-width: 768px) {

    /* ===== HEADER Y MENÚ HAMBURGUESA ===== */
    .main-header {
        padding: 0.5em 1em;
        display: flex;
        align-items: center;
    }
    .header-logo img {
        height: 20px;
    }
    .header-nav {
        display: none;
    }
    .hamburger-menu {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        z-index: 1010;
        position: relative;
        width: 40px;
        height: 100px;
    }
    .hamburger-line {
        display: block;
        width: 25px;
        height: 3px;
        background-color: #2E5A44;
        margin: 5px 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    
.header-nav.nav-open {
    display: flex;
    flex-direction: column;
    justify-content: center;       /* Centra el contenido verticalmente */
    align-items: center;           /* Centra el contenido horizontalmente */
    position: absolute;
    top: 100%;                     /* Justo debajo del header */
    right: 0;                      /* Pegado al borde derecho */
    background-color: white;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    width: 150px; /* ← Esta línea nueva */
}
    .header-nav.nav-open ul {
        display: flex;
        text-align: center;
        flex-direction: column;
        text-align: center;
        gap: 30px;
        margin-right: 25px;
    }
    
    .header-nav.nav-open ul li a {
        font-size: 1rem;
    }
    .hamburger-menu.is-active .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger-menu.is-active .hamburger-line:nth-child(2) { opacity: 0; }
    .hamburger-menu.is-active .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* ===== HERO ===== */

 .hero {
        position: relative;
        height: 100vh; /* Cambiado de max-height a height para forzar 100vh */
        max-height: 100vh; /* Mantenemos para doble seguridad */
        display: flex;
        flex-direction: column; /* Añadido para mejor control del flujo */
        align-items: center;
        justify-content: center;
    }
    
    .hero h1 {
        font-size: clamp(2rem, 8vw, 3rem);
        /* * ELIMINAR O REDUCIR EL MARGIN-TOP.
        * Usaremos una posición absoluta para centrarlo verticalmente 
        * o simplemente confiaremos en flexbox/el valor por defecto.
        * Si el contenido 3D/video está en el fondo, 
        * podemos simplemente reubicar el h1. 
        */
        margin-top: 40vh; /* Reducido a 40vh. Si todavía falla, usa margin-top: auto; o elimínalo. */
        line-height: 1.2;
        max-width: 300px;
        text-align: center; /* Asegura que el texto esté centrado si salta de línea */
    }
    
    /* Asegurar que las flechas se mantengan en el fondo */
    .scroll-indicator-container {
        bottom: 2vh; 
    }


    /* ===== ABOUT ===== */
    .about-section .greeting-container .char {
        font-size: clamp(2.5rem, 10vw, 3.5rem) !important;
        line-height: 0.8;
        padding-top: 15px;
    }
    .text-hi {
        margin-left: 30px;
    }
    .about-section .bio-container {
        width: 95% !important;
        max-width: 500px;
        margin: 0 auto;
    }
    .bio-container p {
    font-size: 0.8rem !important;
  }
    #about-section .about-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    #about-section .greeting-container {
        margin-bottom: 30px !important;
    }
    
    /* ===== OCULTAR SECCIÓN LOGO 3D ===== */
    .work-desde-cero-section {
        display: none !important;
    }

    /* ===== SECCIÓN WORK ===== */
    #work {
        max-height: 100vh !important;
        padding: 20px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
        margin-top: 250px;
        margin-bottom: 200px;
    }
    #work .work-title {
        font-size: clamp(2rem, 8vw, 2rem) !important;
        font-weight: 600;
        margin-bottom: 60px !important;
        flex-shrink: 0;
    }
    #work .work-container {
        width: 100% !important;
        overflow-y: auto !important;
        background-color: #6fb767 !important;
        padding: 20px !important;
        margin: 0 !important;
        height: 550px !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        border-radius: 20px !important;
        box-sizing: border-box;
    }
    #work .cards-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 30px !important;
    }
    .card-scene {
        width: 200px !important;
        height: 100px !important;
        flex-shrink: 0 !important;
    }
    #work .paint-container {
        display: none !important;
    }
    .card-scene:hover .card-cube {
        transform: none !important;
    }

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

@media (max-width: 768px) {
  .footer-text-content h3 {
    word-break: break-word; /* Rompe el título en dos líneas en pantallas pequeñas */
    line-height: 1.4; /* Añade espacio entre las líneas del párrafo */
  }

  .footer-text-content p {
    text-transform: none; /* Cambia el texto a letras normales */
    line-height: 1.6; /* Añade espacio entre las líneas del párrafo */
  }

  .footer-email {
    display: inline-flex !important;   /* <-- AÑADIDO */
    align-items: center !important;   /* <-- AÑADIDO */
    justify-content: center !important; /* <-- AÑADIDO */
    font-size: 0.75rem !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    background-color: #F7B81E !important;
    color: #020502 !important;
    transition: none !important;
    pointer-events: auto !important;
  }

  .footer-email:hover,
  .footer-email:focus,
  .footer-email:active {
    background-color: #F7B81E !important;
    color: #020502 !important;
    border-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: default !important;
    transition: none !important;
  }

  .footer-email::before,
  .footer-email::after {
    display: none !important;
    content: none !important;
    transition: none !important;
  }

  /* Extra: desactiva cualquier animación residual */
  .footer-email *,
  .footer-email *:hover {
    animation: none !important;
    transition: none !important;
  }
  .footer-text-content h3 {
    width: 65%; /* Ajusta el ancho para forzar el salto de línea */
}
}

} /* --- FIN DEL MEDIA QUERY --- */