/* FIX CRÍTICO: Este bloque debe ir al principio de tu CSS para eliminar el espacio a la derecha */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}
a,button,h1,h2,h3,p,span {
    font-weight:var(--font-weight-normal)
}
.cookie-container,.header-principal {
    position:fixed;
    display:flex;
    left:0;
    width:100%
}
.logo a,.menu li a {
    font-family:"DM Serif Display",serif;
    font-size:3rem;
    letter-spacing:-.06rem;
    transition:.3s
}
.btn-enviar,.cabecera-seccion h2,.card-engranaje,.columna-texto p strong,.lobo-fase-mirada h3,.menu-cerrar,.menu-hamburguesa,.nombre-autor,.t5 {
    text-transform:uppercase
}
.acto-info,.contenido-oculto {
    box-sizing:border-box;
    bottom:0
}
:root {
    --foundation-colores-fondo-fondo-50:#e7e7e7;
    --foundation-colores-fondo-fondo-100:#b6b6b6;
    --foundation-colores-fondo-fondo-200:#929292;
    --foundation-colores-fondo-fondo-300:#606060;
    --foundation-colores-fondo-fondo-400:#414141;
    --foundation-colores-fondo-fondo-500:#121212;
    --foundation-colores-fondo-fondo-600:#101010;
    --foundation-colores-fondo-fondo-700:#0d0d0d;
    --foundation-colores-fondo-fondo-800:#0a0a0a;
    --foundation-colores-fondo-fondo-900:#080808;
    --foundation-colores-texto-principal-texto-principal-50:#fefefe;
    --foundation-colores-texto-principal-texto-principal-100:#fcfcfd;
    --foundation-colores-texto-principal-texto-principal-200:#fafafb;
    --foundation-colores-texto-principal-texto-principal-300:#f8f8fa;
    --foundation-colores-texto-principal-texto-principal-400:#f7f7f9;
    --foundation-colores-texto-principal-texto-principal-500:#f5f5f7;
    --foundation-colores-texto-principal-texto-principal-600:#dfdfe1;
    --foundation-colores-texto-principal-texto-principal-700:#aeaeaf;
    --foundation-colores-texto-principal-texto-principal-800:#878788;
    --foundation-colores-texto-principal-texto-principal-900:#676768;
    --foundation-colores-texto-secundario-texto-secundario-50:#f6f6f7;
    --foundation-colores-texto-secundario-texto-secundario-100:#e2e2e5;
    --foundation-colores-texto-secundario-texto-secundario-200:#d4d4d8;
    --foundation-colores-texto-secundario-texto-secundario-300:#c0c0c6;
    --foundation-colores-texto-secundario-texto-secundario-400:#b4b4bb;
    --foundation-colores-texto-secundario-texto-secundario-500:#a1a1aa;
    --foundation-colores-texto-secundario-texto-secundario-600:#93939b;
    --foundation-colores-texto-secundario-texto-secundario-700:#727279;
    --foundation-colores-texto-secundario-texto-secundario-800:#59595e;
    --foundation-colores-texto-secundario-texto-secundario-900:#444447;
    --foundation-colores-descomponedores-descomponedores-50:#f1efee;
    --foundation-colores-descomponedores-descomponedores-100:#d5ceca;
    --foundation-colores-descomponedores-descomponedores-200:#c0b6b0;
    --foundation-colores-descomponedores-descomponedores-300:#a3958c;
    --foundation-colores-descomponedores-descomponedores-400:#918175;
    --foundation-colores-descomponedores-descomponedores-500:#766153;
    --foundation-colores-descomponedores-descomponedores-600:#6b584c;
    --foundation-colores-descomponedores-descomponedores-700:#54453b;
    --foundation-colores-descomponedores-descomponedores-800:#41352e;
    --foundation-colores-descomponedores-descomponedores-900:#322923;
    --foundation-colores-polinizadores-polinizadores-50:#fdf9f0;
    --foundation-colores-polinizadores-polinizadores-100:#f8edd1;
    --foundation-colores-polinizadores-polinizadores-200:#f5e4ba;
    --foundation-colores-polinizadores-polinizadores-300:#f0d79b;
    --foundation-colores-polinizadores-polinizadores-400:#edd088;
    --foundation-colores-polinizadores-polinizadores-500:#e9c46a;
    --foundation-colores-polinizadores-polinizadores-600:#d4b260;
    --foundation-colores-polinizadores-polinizadores-700:#a58b4b;
    --foundation-colores-polinizadores-polinizadores-800:#806c3a;
    --foundation-colores-polinizadores-polinizadores-900:#62522d;
    --foundation-colores-ingenieros-ingenieros-50:#eaf5f4;
    --foundation-colores-ingenieros-ingenieros-100:#bde1dc;
    --foundation-colores-ingenieros-ingenieros-200:#9dd2cb;
    --foundation-colores-ingenieros-ingenieros-300:#70bdb4;
    --foundation-colores-ingenieros-ingenieros-400:#55b1a5;
    --foundation-colores-ingenieros-ingenieros-500:#2a9d8f;
    --foundation-colores-ingenieros-ingenieros-600:#268f82;
    --foundation-colores-ingenieros-ingenieros-700:#1e6f66;
    --foundation-colores-ingenieros-ingenieros-800:#17564f;
    --foundation-colores-ingenieros-ingenieros-900:#12423c;
    --foundation-colores-depredadores-depredadores-50:#f5e9e9;
    --foundation-colores-depredadores-depredadores-100:#e0babc;
    --foundation-colores-depredadores-depredadores-200:#d1999b;
    --foundation-colores-depredadores-depredadores-300:#bc6b6e;
    --foundation-colores-depredadores-depredadores-400:#af4e51;
    --foundation-colores-depredadores-depredadores-500:#9b2226;
    --foundation-colores-depredadores-depredadores-600:#8d1f23;
    --foundation-colores-depredadores-depredadores-700:#6e181b;
    --foundation-colores-depredadores-depredadores-800:#551315;
    --foundation-colores-depredadores-depredadores-900:#410e10;
    --foundation-colores-dispersores-dispersores-50:#edf2ee;
    --foundation-colores-dispersores-dispersores-100:#c7d6cc;
    --foundation-colores-dispersores-dispersores-200:#acc3b3;
    --foundation-colores-dispersores-dispersores-300:#86a790;
    --foundation-colores-dispersores-dispersores-400:#6e967a;
    --foundation-colores-dispersores-dispersores-500:#4a7c59;
    --foundation-colores-dispersores-dispersores-600:#437151;
    --foundation-colores-dispersores-dispersores-700:#35583f;
    --foundation-colores-dispersores-dispersores-800:#294431;
    --foundation-colores-dispersores-dispersores-900:#1f3425;
    --font-display:"DM Serif Display",Georgia,serif;
    --font-body:"Source Serif 4",Times,serif;
    --font-weight-normal:normal;
    --desktop-display-h1-font-size:90px;
    --desktop-display-h1-line-height:1.1;
    --desktop-display-h2-font-size:48px;
    --desktop-display-h2-line-height:1.2;
    --desktop-display-h3-font-size:32px;
    --desktop-display-h3-line-height:1.2;
    --desktop-serif-body-l-font-size:20px;
    --desktop-serif-body-l-line-height:1.6;
    --desktop-serif-body-s-font-size:16px;
    --desktop-serif-body-s-line-height:1.6;
    --desktop-serif-button-nav-font-size:14px;
    --desktop-serif-button-nav-line-height:1.5;
    --movil-display-h1-hero-s-font-size:43px;
    --movil-display-h1-hero-s-line-height:1.1;
    --movil-display-h2-secciones-font-size:32px;
    --movil-display-h2-secciones-line-height:1.2;
    --movil-display-h3-categorias-font-size:24px;
    --movil-display-h3-categorias-line-height:1.3;
    --movil-serif-body-l-s-font-size:18px;
    --movil-serif-body-l-s-line-height:1.55;
    --movil-serif-body-s-font-size:16px;
    --movil-serif-body-s-line-height:1.6;
    --movil-serif-button-nav-s-font-size:16px;
    --movil-serif-button-nav-s-line-height:1;
    --movil-0-pattern:columns;
    --movil-0-gutter-size:20px;
    --movil-0-count:4;
    --movil-0-alignment:stretch;
    --movil-0-section-size:auto;
    --tablet-0-pattern:columns;
    --tablet-0-gutter-size:24px;
    --tablet-0-count:8;
    --tablet-0-alignment:stretch;
    --tablet-0-section-size:auto;
    --desktop-0-pattern:columns;
    --desktop-0-gutter-size:20px;
    --desktop-0-count:12;
    --desktop-0-alignment:stretch;
    --desktop-0-section-size:auto;
    --rojo-animaladas:#9b1c1c;
    --gris-oscuro:#1f2937;
    --gris-claro:#f3f4f6;
    --texto-suave:#666;
    --shadow-standard:0 4px 6px rgba(0,0,0,0.1)
}
body {
    margin:0;
    padding:0;
    overflow-x:hidden;
    width:100%;
    background-color:var(--foundation-colores-fondo-fondo-500);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
h1,h2,h3 {
    font-family:var(--font-display)
}
a,button,p,span {
    font-family:var(--font-body)
}
h1 {
    font-size:var(--desktop-display-h1-font-size);
    line-height:var(--desktop-display-h1-line-height)
}
.cookie-container {
    bottom:-100%;
    background:rgba(18,18,18,.95);
    color:#f5f5f7;
    padding:1.5rem 2rem;
    justify-content:space-between;
    align-items:center;
    z-index:9999;
    transition:bottom .5s ease-in-out;
    border-top:1px solid var(--foundation-colores-depredadores-depredadores-500)
}
.cookie-container.active {
    bottom:0;
    width:90%
}
.btn-cookies {
    background:var(--foundation-colores-depredadores-depredadores-500);
    color:#fff;
    border:none;
    padding:.8rem 2rem;
    cursor:pointer;
    font-weight:700;
    border-radius:2px
}
.btn-cookies:hover {
    opacity:.9
}
html {
    scroll-behavior:smooth
}
section {
    scroll-margin-top:8rem
}
.header-principal {
    box-sizing:border-box;
    justify-content:center;
    background-color:rgba(0,0,0,.9);
    top:0;
    z-index:10000
}
.menu li a::after,.menu-cerrar,.menu-hamburguesa {
    background:var(--foundation-colores-depredadores-depredadores-500)
}
.topnav {
    box-sizing:border-box;
    display:flex;
    width:100%;
    max-width:1440px;
    justify-content:space-between;
    align-items:center;
    padding:0 2rem;
    height:8rem;
    z-index:10001
}
.logo a {
    color:var(--Foundation-Colores-Texto-Principal-texto-principal-500,#f5f5f7);
    font-weight:400;
    text-decoration-color:var(--foundation-colores-depredadores-depredadores-500)
}
.footer-links a:hover,.footer-links h3,.footer-social h3,.logo span,.logo-footer span {
    color:var(--foundation-colores-depredadores-depredadores-500)
}
.logo svg {
    margin-left:1rem
}
.logo.en-menu {
    opacity:.3;
    transition:opacity .5s
}
.logo span {
    font-size:5.625rem;
    letter-spacing:.50625rem
}
.logo a:hover span {
    color:var(--foundation-colores-texto-principal-texto-principal-500)
}
.menu-cerrar,.menu-hamburguesa {
    display:flex;
    height:3rem;
    padding:.25rem 2rem;
    align-items:center;
    gap:1rem;
    border-radius:.125rem;
    border:1px solid rgba(0,0,0,.39);
    box-shadow:0 2px 18.6px 3px rgba(0,0,0,.25),0 0 7.7px 9px rgba(0,0,0,.25) inset;
    color:#f5f5f7;
    cursor:pointer;
    z-index:10002;
    position:relative;
    font-weight:700
}
.menu-hamburguesa:hover {
    background:var(--foundation-colores-texto-secundario-texto-secundario-900)
}
.menu-cerrar {
    display:none!important;
    position:fixed;
    top:2.5rem
}
.menu {
    opacity:0;
    visibility:hidden;
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    background-color:var(--foundation-colores-fondo-fondo-500,#121212);
    z-index:9999;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    margin:0;
    list-style:none;
    transition:opacity .8s,visibility .5s,transform .5s;
    transform:scale(1.1)
}
.menu.active {
    opacity:1;
    visibility:visible;
    transform:scale(1)
}
.menu li {
    width:100%;
    text-align:center
}
.menu li a {
    line-height:0.5;
    margin:2rem 0;
    color:#f5f5f7;
    text-decoration:none;
    display:inline-block;
    position:relative
}
.menu li a::after {
    content:'';
    position:absolute;
    bottom:-5px;
    left:50%;
    width:0;
    height:2px;
    transition:.3s;
    transform:translateX(-50%)
}
.menu li a:hover {
    color:#f5f5f7
}
.menu li a:hover::after {
    width:80%
}
@media (max-width:1024px) {
    .menu-cerrar {
        right:2rem
    }
}
@media (max-width:780px) {
    .cookie-container {
        flex-direction:column;
        text-align:center;
        gap:1rem
    }
    .logo a {
        font-family:"DM Serif Display",serif;
        font-size:clamp(0.85rem, 4vw, 1.15rem);
        line-height:normal
    }
    .logo {
        text-align:center;
        box-sizing:border-box;
        max-width:75%;
        display:flex;
        align-items:center;
        justify-content:center
    }
    .logo,.logo.en-menu {
        font-size:clamp(1rem, 5vw, 1.4rem);
        line-height:normal;
        padding:.25rem 0
    }
    .logo-svg,.logo svg {
        width:clamp(22px, 6vw, 32px);
        height:auto;
        margin-left:.25rem;
        flex-shrink:0
    }
    .topnav {
        box-sizing:border-box;
        height:6.5rem;
        padding:0 0.75rem;
        width:100%;
        overflow:hidden
    }
    .logo span {
        font-size:clamp(1.1rem, 5vw, 1.5rem);
        letter-spacing:.05rem
    }
    .menu-cerrar,.menu-hamburguesa {
        box-sizing:border-box;
        padding:.25rem .5rem;
        font-size:.65rem;
        gap:.25rem;
        flex-shrink:0;
        height:2.6rem
    }
    .menu-hamburguesa img,.menu-cerrar img {
        width:22px;
        height:22px;
        pointer-events:none
    }
    .menu li a {
        font-size:2rem;
        margin:.7rem 0
    }
}
@media (max-height:750px) {
    .menu {
        padding-top:15vh;
        justify-content:flex-start;
        overflow-y:auto
    }
    .menu li a {
        line-height:3rem;
        font-size:1.6rem
    }
}
.footer-principal {
    background-color:#0a0a0a;
    color:#f5f5f7;
    padding:5rem 2rem 2rem;
    border-top:1px solid rgba(155,34,38,.3);
    font-family:'DM Serif Display',serif
}
.footer-contenido {
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:4rem
}
.logo-footer {
    font-size:2rem;
    margin-bottom:1.5rem
}
.footer-info p {
    font-family:sans-serif;
    font-size:.95rem;
    line-height:1.6;
    opacity:.7;
    max-width:400px
}
.footer-links h4,.footer-social h4 {
    font-size:1.3rem;
    margin-bottom:1.5rem;
    text-transform:uppercase;
    letter-spacing:2px
}
.footer-links a,.icon-link {
    color:#f5f5f7;
    text-decoration:none
}
.footer-links ul {
    list-style:none;
    padding:0
}
.footer-links li {
    margin-bottom:.8rem
}
.footer-links a {
    font-family:sans-serif;
    opacity:.6;
    transition:opacity .3s,color .3s
}
.footer-links a:hover {
    opacity:1
}
.email-footer a:hover {
    opacity:1;
    color:var(--foundation-colores-texto-principal-texto-principal-500)
}
.social-icons {
    display:flex;
    gap:1.5rem
}
.icon-link {
    display:flex;
    align-items:center;
    justify-content:center;
    width:45px;
    height:45px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:50%;
    font-size:1.2rem;
    transition:.4s cubic-bezier(.175,.885,.32,1.275)
}
.email-footer a,.subtitulo-contacto {
    color:var(--foundation-colores-depredadores-depredadores-500)
}
.icon-link:hover {
    background-color:var(--foundation-colores-depredadores-depredadores-500);
    border-color:var(--foundation-colores-depredadores-depredadores-500);
    transform:translateY(-5px) scale(1.1);
    color:#fff
}
.icon-link[aria-label=Instagram]:hover {
    background-color:#e1306c;
    border-color:#e1306c
}
.icon-link[aria-label=YouTube]:hover {
    background-color:red;
    border-color:red
}
.icon-link[aria-label=TikTok]:hover {
    background-color:#000;
    border-color:#000
}
.footer-copyright {
    text-align:center;
    margin-top:5rem;
    padding-top:2rem;
    border-top:1px solid rgba(255,255,255,.05);
    font-family:sans-serif;
    font-size:.8rem;
    opacity:.4
}
.acto-info h4,.columna-texto h2,.columna-texto p::first-letter,.comillas,.lobo-fase-titulo h2,.manifiesto-texto h3,.seccion-contacto h2,.seccion-mascotas h2,.subtitulo-contacto {
    font-family:"DM Serif Display",serif
}
.email-footer a {
    text-decoration:none;
    font-weight:700
}
@media (max-width:780px) {
    .footer-contenido {
        grid-template-columns:1fr;
        text-align:center;
        gap:3rem
    }
    .footer-info p {
        margin:0 auto
    }
    .social-icons {
        justify-content:center
    }
    .footer-principal {
        padding:4rem 1.5rem 2rem
    }
    .seccion-contacto h2 {
        font-size:2.5rem
    }
}
.seccion-contacto {
    background-color:var(--foundation-colores-fondo-fondo-500);
    padding:6rem 2rem;
    text-align:center
}
.subtitulo-contacto {
    font-style:italic;
    font-size:1.5rem;
    margin-bottom:1rem
}
.seccion-contacto h2 {
    font-size:3.5rem;
    color:#f5f5f7;
    margin-bottom:3rem
}
.formulario {
    max-width:600px;
    margin:0 auto 5rem;
    display:flex;
    flex-direction:column;
    gap:1.5rem
}
.formulario input,.formulario textarea {
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    padding:1.2rem;
    color:#fff;
    font-family:"DM Serif Display",serif;
    font-size:1.1rem;
    border-radius:4px;
    transition:.3s
}
.formulario input:focus,.formulario textarea:focus {
    outline:0;
    border-color:var(--foundation-colores-depredadores-depredadores-500);
    background:rgba(255,255,255,.1)
}
.btn-enviar {
    background:var(--foundation-colores-depredadores-depredadores-500);
    color:#fff;
    border:none;
    padding:1.2rem;
    font-weight:700;
    letter-spacing:2px;
    cursor:pointer;
    transition:transform .3s,background .3s
}
.btn-enviar:hover {
    background:#d62828;
    transform:translateY(-3px)
}
.formulario input::placeholder,.formulario textarea::placeholder {
    color:rgba(255,255,255,.5);
    font-family:"DM Serif Display",serif;
    font-style:italic
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border-width:0
}
.contenedor-testimonios {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
    gap:2rem;
    margin-top:3rem;
    text-align:left
}
.card-testimonio {
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.1);
    border-left:2px solid var(--foundation-colores-depredadores-depredadores-500);
    padding:2.5rem 2rem;
    border-radius:8px;
    transition:transform .3s
}
#loboBar,.progress-bar {
    transition:width .1s ease-out
}
.card-testimonio:hover,.paso:hover {
    transform:translateY(-5px)
}
.comillas {
    display:block;
    color:var(--foundation-colores-depredadores-depredadores-500);
    font-size:4rem;
    line-height:.5;
    margin-bottom:1rem
}
.texto-cita {
    color:#f5f5f7!important;
    font-style:italic;
    font-size:1.1rem;
    line-height:1.6;
    margin-bottom:1.5rem
}
.nombre-autor,.subtitulo-comunidad {
    text-align:center;
    color:var(--foundation-colores-depredadores-depredadores-500)!important
}
.nombre-autor {
    font-weight:700;
    font-size:.9rem;
    margin:0
}
.titulo-comunidad {
    text-align:center;
    color:#fff;
    font-size:2rem;
    letter-spacing:.3rem
}
.subtitulo-comunidad {
    font-size:var(--desktop-serif-body-l-font-size)
}
.lobo-fase-titulo h2,.texto-hero {
    color:var(--foundation-colores-texto-principal-texto-principal-500);
    text-align:center
}
.seccion-hero {
    position:relative;
    width:100%;
    height:100vh;
    background:#000;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center
}
.overlay-video,.video-fondo {
    position:absolute;
    top:0;
    left:0;
    width:100%
}
.overlay-video {
    height:100%;
    background:rgba(0,0,0,.4);
    z-index:2
}
.animacion-scroll,.seccion-lobo {
    background-color:var(--foundation-colores-fondo-fondo-500)
}
.video-fondo {
    height:100%;
    object-fit:cover;
    display:block;
    z-index:1
}
#add-form,.texto-hero {
    top:50%;
    transform:translate(-50%,-50%)
}
.texto-final,.texto-hero {
    left:50%;
    position:absolute
}
.textos-animados-contenedor {
    position:relative;
    z-index:3;
    width:100%;
    height:100%
}
.texto-hero {
    width:85%;
    max-width:1000px;
    opacity:0;
    font-size:var(--desktop-display-h1-font-size);
    font-family:var(--desktop-display-h1-font-family);
    font-weight:var(--desktop-display-h1-font-weight);
    margin:0;
    pointer-events:none
}
.texto-final {
    bottom:5%;
    transform:translateX(-50%);
    width:90%;
    max-width:1100px;
    text-align:center;
    color:var(--foundation-colores-depredadores-depredadores-100);
    font-family:var(--desktop-display-h3-font-family);
    font-size:var(--desktop-display-h3-font-size);
    font-weight:700;
    opacity:0;
    z-index:4;
    animation:2.5s 19s forwards aparecerSuave
}
@keyframes entradaSalida {
    0% {
        opacity:0;
        transform:translate(-50%,-100%)
    }
    15%,85% {
        opacity:1;
        transform:translate(-50%,-50%)
    }
    100% {
        opacity:0;
        transform:translate(-50%,0)
    }
}
@keyframes entradaYQuedarse {
    0% {
        opacity:0;
        transform:translate(-50%,-100%)
    }
    100% {
        opacity:1;
        transform:translate(-50%,-50%)
    }
}
@keyframes aparecerSuave {
    from {
        opacity:0
    }
    to {
        opacity:1
    }
}
.t1 {
    animation:4s forwards entradaSalida
}
.t2 {
    animation:4s 4s forwards entradaSalida
}
.t3 {
    animation:4s 8s forwards entradaSalida
}
.t4 {
    animation:4s 12s forwards entradaSalida
}
.t5 {
    animation:4s 18s forwards entradaYQuedarse;
    color:var(--foundation-colores-depredadores-depredadores-500);
    font-weight:700
}
.seccion-lobo {
    padding:0
}
.animacion-scroll {
    position:sticky;
    top:0;
    height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    overflow:hidden
}
.lobo-fase-titulo h2 {
    font-size:4.5rem;
    max-width:900px
}
.lobo-fase-mirada {
    background:radial-gradient(circle,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 100%)
}
.lobo-fase-mirada img {
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    z-index:1;
    filter:brightness(.6)
}
.lobo-fase-mirada h3 {
    position:relative;
    z-index:2;
    font-size:3rem;
    color:var(--foundation-colores-depredadores-depredadores-500);
    text-shadow:0 0 20px #000;
    letter-spacing:5px
}
.lobo-fase-actos {
    flex-direction:row;
    gap:20px;
    padding:0 50px
}
.acto-card {
    flex:1;
    height:70%;
    position:relative;
    overflow:hidden;
    border-bottom:2px solid var(--foundation-colores-depredadores-depredadores-500);
    background-color:#0a0a0a
}
.acto-card img {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s,filter .5s
}
.acto-info {
    position:absolute;
    left:0;
    width:100%;
    padding:40px 20px;
    background:linear-gradient(to top,rgba(0,0,0,.95) 40%,transparent);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    z-index:2
}
.acto-info h3 {
    color:var(--foundation-colores-texto-principal-texto-principal-500);
    margin:0;
    font-size:1.4rem
}
.acto-info p,.manifiesto-texto p {
    color:#f5f5f7;
    font-size:.95rem;
    line-height:1.4;
    margin-top:0;
    max-height:0;
    opacity:0;
    overflow:hidden;
    transform:translateY(20px);
    transition:.8s cubic-bezier(.4,0,.2,1)
}
.acto-card.revelado .acto-info p,.lobo-fase-final.revelado .manifiesto-texto p {
    max-height:400px;
    opacity:1;
    transform:translateY(0);
    margin-top:20px
}
.acto-card.revelado img {
    filter:brightness(.4);
    transform:scale(1.05)
}
.seccion-lobo .lobo-fase-final.animacion-scroll {
    justify-content:center!important;
    padding-top:0!important
}
.lobo-fase-final .img-grande {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:1;
    opacity:.3
}
.manifiesto-texto {
    position:relative;
    z-index:10;
    text-align:center;
    max-width:1000px;
    padding:2rem
}
.manifiesto-texto h3 {
    font-size:4rem;
    color:var(--foundation-colores-texto-principal-texto-principal-500);
    text-shadow:0 4px 15px rgba(0,0,0,.8)
}
.progress-container {
    position:fixed;
    top:8rem;
    left:0;
    width:100%;
    height:4px;
    background:rgba(255,255,255,.1);
    z-index:9998
}
.progress-bar {
    height:4px;
    background:var(--foundation-colores-depredadores-depredadores-500);
    width:0%;
    box-shadow:0 0 10px rgba(155,34,38,.8)
}
.widget-ultimo-sitio,.zona-mapa {
    box-shadow:var(--shadow-standard)
}
#loboBar {
    will-change:width
}
@media(max-width:780px) {
    .animacion-scroll {
        position:relative;
        height:auto;
        min-height:100vh;
        padding:6rem 1rem
    }
    .lobo-fase-titulo h2,.manifiesto-texto h3 {
        font-size:2.5rem
    }
    .lobo-fase-mirada h3 {
        font-size:1.8rem;
        text-align:center;
        letter-spacing:2px
    }
    .lobo-fase-actos {
        display:flex;
        flex-direction:column;
        gap:2.5rem;
        padding:2rem 1rem
    }
    .acto-card {
        height:450px;
        flex:none;
        border-bottom:3px solid var(--foundation-colores-depredadores-depredadores-500)
    }
    .revelado .manifiesto-texto p {
        font-size:1.1rem;
        width:100%
    }
}
.seccion-mapa-home {
    background-color:var(--foundation-colores-fondo-fondo-500);
    padding:60px 20px;
    text-align:center
}
.contenedor-interno {
    max-width:1200px;
    margin:0 auto
}
.cabecera-seccion h2 {
    color:#9b1c1c;
    font-size:2.5rem;
    margin-bottom:10px;
    font-weight:800
}
.subtitulo-mapa {
    color:var(--foundation-colores-fondo-fondo-100);
    font-size:1.1rem;
    max-width:800px;
    margin:0 auto 40px;
    line-height:1.6
}
.pasos-manada {
    display:flex;
    justify-content:space-around;
    gap:30px;
    margin-bottom:50px
}
.paso {
    flex:1;
    padding:20px;
    transition:transform .3s
}
.paso h3 {
    color:var(--foundation-colores-ingenieros-ingenieros-500);
    font-size:1.3rem;
    margin:15px 0 10px;
    font-weight:700
}
.paso p {
    color:var(--foundation-colores-fondo-fondo-100);
    font-size:.95rem;
    line-height:1.5;
    letter-spacing:.09rem
}
.acciones-mapa {
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap
}
.boton-mapa-añadir,.boton-mapa-explorar,.btn-urgencias {
    display:inline-flex;
    align-items:center;
    padding:15px 30px;
    border-radius:50px;
    text-decoration:none;
    font-weight:700;
    font-size:1rem;
    transition:.3s
}
.btn-urgencias {
    background-color:#9b1c1c;
    color:#fff;
    border:2px solid #410e10
}
.btn-urgencias:hover {
    background-color:#410e10;
    box-shadow:0 4px 15px rgba(155,28,28,.3);
    transform:scale(1.05)
}
.boton-mapa-explorar {
    background-color:#12423c;
    color:#fff;
    border:2px solid #2a9d8f
}
.boton-mapa-explorar:hover {
    background-color:#7f1d1d;
    box-shadow:0 4px 15px rgba(155,28,28,.3);
    transform:scale(1.05)
}
.boton-mapa-añadir {
    background-color:#62522d;
    color:#fff;
    border:2px solid #e9c46a
}
.boton-mapa-añadir:hover {
    background-color:#7f1d1d;
    box-shadow:0 4px 15px rgba(155,28,28,.3);
    transform:scale(1.05)
}
.icono-boton {
    margin-right:10px;
    font-size:1.2rem
}
.seccion-mascotas {
    padding:80px 50px;
    background-color:#0a0a0a;
    color:#f5f5f7
}
.seccion-mascotas h2 {
    font-size:3.5rem;
    text-align:center;
    margin-bottom:60px;
    color:var(--foundation-colores-texto-principal-texto-principal-500)
}
.bloque-mascotas h3 {
    font-size:1.8rem;
    margin:40px 0 20px;
    border-left:4px solid #ff3e3e;
    padding-left:15px
}
#btn-mi-ubicacion,.mascota-card h4 {
    position:absolute;
    font-size:1.2rem
}
.grid-mascotas-actuales,.grid-mascotas-siempre {
    display:grid;
    gap:30px;
    margin-bottom:60px
}
.grid-mascotas-actuales {
    grid-template-columns:repeat(3,1fr)
}
.grid-mascotas-siempre {
    grid-template-columns:repeat(2,1fr);
    max-width:900px;
    margin-left:auto;
    margin-right:auto
}
.mascota-card {
    position:relative;
    border-radius:15px;
    overflow:hidden;
    aspect-ratio:4/5;
    background:#1a1a1a;
    transition:transform .4s
}
#btn-mi-ubicacion,.btn-filtro {
    transition:.3s;
    cursor:pointer
}
.mascota-card img {
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(30%);
    transition:.5s
}
.mascota-card h4 {
    bottom:0;
    width:100%;
    padding:20px;
    background:linear-gradient(transparent,rgba(0,0,0,.9));
    margin:0;
    text-align:center
}
.card-engranaje:hover h3,.mascota-card:hover {
    transform:translateY(-10px)
}
.card-engranaje:hover img,.mascota-card:hover img {
    filter:grayscale(0);
    transform:scale(1.05)
}
.grid-mascotas-siempre .mascota-card img {
    filter:grayscale(100%) sepia(20%) brightness(.8);
    transition:.8s cubic-bezier(.25,1,.5,1)
}
.grid-mascotas-siempre .mascota-card:hover img {
    filter:grayscale(0) sepia(0) brightness(1);
    transform:scale(1.03)
}
.grid-mascotas-siempre .mascota-card {
    border:1px solid rgba(255,215,0,.1);
    box-shadow:0 0 20px rgba(0,0,0,.5)
}
.grid-mascotas-siempre .mascota-card::before {
    content:"❤";
    position:absolute;
    top:15px;
    right:15px;
    z-index:5;
    color:rgba(255,255,255,.3);
    font-size:1.2rem
}
.grid-mascotas-siempre h4 {
    font-style:italic;
    font-weight:300;
    letter-spacing:1px;
    background:linear-gradient(transparent,rgba(20,20,20,.95))
}
.banner-bienvenida {
    background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)) center bottom/cover no-repeat,url(assets/img/lobo-mirada.webp) center bottom/cover no-repeat;
    color:#fff;
    padding:3rem 1.5rem;
    text-align:center
}
.banner-bienvenida h3 {
    font-size:3rem;
    margin-bottom:.5rem;
    padding-top:2rem;
    color:#fff
}
#add-form h3,#btn-mi-ubicacion,.widget-ultimo-sitio h3 {
    color:var(--rojo-animaladas)
}
.contenedor-mapa-mixto {
    display:flex;
    flex-wrap:wrap;
    max-width:1400px;
    margin:2rem auto;
    gap:1.5rem;
    padding:0 1.5rem;
    align-items:flex-start
}
.zona-mapa {
    flex:0 0 70%;
    min-width:300px;
    height:600px;
    position:relative;
    background:#e5e7eb;
    border-radius:12px;
    overflow:hidden
}
#mapa-interactivo {
    width:100%!important;
    height:600px!important;
    z-index:1
}
.panel-lateral {
    flex:1;
    min-width:280px;
    display:flex;
    flex-direction:column;
    gap:1.5rem
}
.widget-ultimo-sitio {
    background:#fff;
    padding:1.5rem;
    border-radius:12px;
    border-top:4px solid var(--rojo-animaladas)
}
.widget-ultimo-sitio h3 {
    margin-top:0;
    border-bottom:1px solid var(--gris-claro);
    padding-bottom:.75rem
}
.instrucciones-breves {
    background:var(--gris-oscuro);
    color:#fff;
    padding:1.25rem;
    border-radius:12px;
    font-size:.9rem
}
#add-form {
    display:none;
    position:absolute;
    left:50%;
    z-index:1001;
    background:#fff;
    padding:25px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
    width:280px;
    border:1px solid #eee
}
#btn-mi-ubicacion:hover,#save-btn,.btn-filtro.activo {
    background:var(--rojo-animaladas)
}
#add-form h3 {
    margin-top:0
}
#add-form input,#add-form select,#place-desc {
    width:100%;
    padding:10px;
    margin-top:5px;
    border:1px solid #ddd;
    border-radius:6px;
    box-sizing:border-box
}
#place-desc {
    min-height:80px;
    resize:vertical
}
#save-btn {
    width:100%;
    color:#fff;
    border:none;
    padding:12px;
    border-radius:6px;
    cursor:pointer;
    font-weight:700;
    margin-top:10px
}
#btn-mi-ubicacion {
    bottom:20px;
    right:20px;
    z-index:1000;
    background:#fff;
    border:2px solid var(--rojo-animaladas);
    width:45px;
    height:45px;
    border-radius:50%;
    box-shadow:0 4px 10px rgba(0,0,0,.3);
    display:flex;
    align-items:center;
    justify-content:center
}
#btn-mi-ubicacion:hover {
    color:#fff
}
.leaflet-control-geocoder {
    z-index:1001!important;
    border:none!important;
    box-shadow:0 2px 10px rgba(0,0,0,.2)!important
}
.leaflet-control-geocoder-icon {
    background-color:var(--rojo-animaladas)!important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E")!important;
    background-repeat:no-repeat!important;
    background-position:center!important;
    width:40px!important;
    height:40px!important;
    border-radius:4px!important
}
.contenedor-filtros {
    display:flex;
    justify-content:center;
    gap:10px;
    padding:15px;
    background:var(--gris-oscuro);
    position:relative;
    z-index:1000;
    flex-wrap:wrap;
    border-bottom:2px solid var(--rojo-animaladas)
}
.btn-filtro {
    background:#374151;
    color:#fff;
    border:none;
    padding:10px 18px;
    border-radius:25px;
    font-weight:600
}
.btn-animaladas,.promo-content h3 {
    font-weight:700
}
.btn-filtro.activo {
    box-shadow:0 0 10px rgba(155,28,28,.5)
}
@media (max-width:992px) {
    .contenedor-mapa-mixto {
        flex-direction:column-reverse
    }
    .zona-mapa {
        flex:0 0 100%;
        height:450px
    }
    #mapa-interactivo {
        height:450px!important
    }
    .banner-bienvenida h3 {
        font-size:1.8rem
    }
}
.section-app-promo {
    padding:30px 20px 60px;
    text-align:center;
    background-color:#121212;
    color:#fff
}
.section-app-promo h2 {
    color:#00f2ff;
    font-size:2.5rem;
    margin-bottom:20px
}
.btn-animaladas {
    display:inline-block;
    padding:15px 30px;
    background-color:#00f2ff;
    color:#121212;
    text-decoration:none;
    border-radius:50px;
    transition:transform .3s,background-color .3s;
    margin-top:20px
}
.btn-animaladas:hover {
    background-color:#00d4df;
    transform:scale(1.05)
}
.grid-promo {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    padding:60px 0
}
.promo-visual {
    flex:1;
    text-align:center
}
.promo-visual img {
    max-width:100%;
    height:auto;
    border-radius:20px
}
.promo-content {
    flex:1;
    text-align:left
}
.promo-content h2 {
    color:#00f2ff;
    font-size:2.8rem;
    margin-bottom:15px
}
.card-engranaje.depredadores,.columna-texto p strong,.columna-texto p::first-letter,.promo-content h3 {
    color:var(--foundation-colores-depredadores-depredadores-500)
}
.promo-content p {
    font-size:1.1rem;
    line-height:1.6;
    margin-bottom:25px
}
.card-engranaje,.columna-texto h2 {
    color:var(--foundation-colores-texto-principal-texto-principal-500)
}
@media (max-width:768px) {
    h1 {
        font-size:var(--movil-display-h1-hero-s-font-size);
        line-height:var(--movil-display-h1-hero-s-line-height)
    }
    .pasos-manada {
        flex-direction:column
    }
    .cabecera-seccion h2 {
        font-size:1.8rem
    }
    .acciones-mapa {
        flex-direction:column;
        align-items:center
    }
    .boton-mapa-añadir,.boton-mapa-explorar,.btn-urgencias {
        width:100%;
        max-width:300px;
        justify-content:center
    }
    .btn-filtro {
        padding:8px 12px;
        font-size:.8rem
    }
    .grid-promo {
        flex-direction:column-reverse;
        text-align:center;
        gap:25px
    }
    .promo-content {
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center
    }
    .promo-content h2 {
        font-size:1.8rem;
        margin-bottom:10px
    }
    .promo-content p {
        font-size:.95rem;
        margin-bottom:20px;
        max-width:90%
    }
    .promo-visual img {
        max-width:70%;
        margin-bottom:10px
    }
}
.seccion-sobre-mi {
    padding:120px 10% 80px;
    background-color:#050505
}
.layout-dos-columnas {
    display:flex;
    align-items:center;
    gap:80px;
    max-width:1200px;
    margin:0 auto
}
.columna-imagen {
    flex:1;
    position:relative
}
.columna-imagen img {
    width:100%;
    border-radius:8px;
    filter:sepia(20%) contrast(1.1);
    box-shadow:5px 5px 0 var(--foundation-colores-depredadores-depredadores-500)
}
.columna-texto {
    flex:1.2
}
.columna-texto h2 {
    font-size:3rem;
    margin-bottom:30px;
    line-height:1.1
}
.columna-texto p {
    font-size:1.15rem;
    line-height:1.8;
    color:#ccc;
    font-weight:300;
    text-align:justify
}
.columna-texto p::first-letter {
    font-size:3rem;
    float:left;
    margin-right:15px;
    line-height:1
}
.columna-texto p strong {
    font-weight:600;
    letter-spacing:1px
}
.card-engranaje.depredadores,.card-engranaje.ingenieros {
    border:1px solid var(--foundation-colores-ingenieros-ingenieros-500)
}
* {
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation
}
.seccion-vida-salvaje h2 {
    color:var(--Foundation-Colores-Texto-Principal-texto-principal-500,#f5f5f7);
    padding-bottom:both;
    text-box-edge:cap;
    margin-top:9rem;
    font-family:"DM Serif Display";
    font-size:3rem;
    font-style:normal;
    font-weight:400;
    line-height:7.5rem;
    letter-spacing:-.06rem;
    text-align:center
}
.contenido-oculto h3,.contenido-oculto p {
    font-family:var(--desktop-display-h3-font-family)
}
.contenedor-cards-horizontales {
    display:flex;
    width:100%;
    height:500px;
    gap:4px;
    overflow:hidden;
    align-items:stretch
}
.card-engranaje {
    position:relative;
    flex:1;
    height:100%;
    transition:flex 2.4s ease-in-out;
    overflow:hidden;
    cursor:pointer;
    font-family:"DM Serif Display";
    font-size:1.5rem;
    margin-bottom:10px
}
.contenedor-cards-horizontales:hover .card-engranaje {
    flex:.5
}
.contenedor-cards-horizontales .card-engranaje:hover {
    flex:5
}
.card-engranaje img {
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(80%);
    transition:filter .5s,transform .5s
}
.contenido-oculto {
    position:absolute;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(to top,rgba(0,0,0,.9) 20%,transparent 80%);
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:30px;
    opacity:0;
    visibility:hidden;
    transition:opacity .4s;
    z-index:2
}
.contenido-oculto h3 {
    margin-bottom:20px;
    font-size:1.8rem;
    line-height:1.1;
    color:var(--Foundation-Colores-Texto-Principal-texto-principal-500)
}
.contenido-oculto p {
    margin:2rem;
    line-height:3.5;
    font-size:1rem;
    letter-spacing:.43125rem;
    font-weight:700
}
.card-engranaje:hover .contenido-oculto {
    opacity:1;
    visibility:visible
}
.card-engranaje h3 {
    position:absolute;
    bottom:20px;
    left:20px;
    z-index:3;
    font-family:"DM Serif Display",serif;
    font-size:1.5rem;
    text-shadow:2px 2px 10px rgba(0,0,0,.8);
    margin:0;
    pointer-events:none;
    transition:transform .3s
}
.card-engranaje.ingenieros {
    color:var(--foundation-colores-ingenieros-ingenieros-500)
}
.card-engranaje.dispersores {
    color:var(--foundation-colores-dispersores-dispersores-500);
    border:1px solid var(--foundation-colores-dispersores-dispersores-500)
}
.card-engranaje.descomponedores {
    color:var(--foundation-colores-descomponedores-descomponedores-500);
    border:1px solid var(--foundation-colores-descomponedores-descomponedores-500)
}
.card-engranaje.polinizadores {
    color:var(--foundation-colores-polinizadores-polinizadores-500);
    border:1px solid var(--foundation-colores-polinizadores-polinizadores-500)
}
.card-engranaje.dispersores img {
    object-position:80% 50%
}
.card-engranaje.dispersores:hover img {
    object-position:50% 50%;
    transition:object-position .7s
}
.card-engranaje.tutorial-abrir .contenido-oculto {
    opacity:1!important;
    visibility:visible!important
}
@media (max-width:780px) {
    .texto-hero {
        font-size:clamp(1.8rem,7vw,2.5rem);
        line-height:1.1;
        width:95%
    }
    .texto-final {
        font-size:1.2rem;
        bottom:8%;
        line-height:1.3
    }
    .progress-container {
        top:7rem
    }
    .grid-mascotas-actuales,.grid-mascotas-siempre {
        display:grid;
        gap:20px;
        margin-bottom:40px;
        padding:0 1rem;
        grid-template-columns:1fr
    }
    .grid-mascotas-actuales img,.grid-mascotas-siempre img {
        width:100%;
        height:auto;
        aspect-ratio:2/3;
        object-fit:cover;
        border-radius:8px
    }
    .seccion-mascotas {
        padding:100px 10px;
        margin:0 auto
    }
    .layout-dos-columnas {
        display:flex;
        flex-direction:column-reverse;
        align-items:center;
        gap:30px;
        padding:0 1.5rem;
        text-align:center
    }
    .layout-dos-columnas img {
        width:90%;
        max-width:500px;
        height:auto;
        border-radius:10%
    }
    .contenedor-cards-horizontales {
        flex-direction:column!important;
        height:auto!important;
        gap:20px!important;
        padding:10px!important
    }
    .card-engranaje {
        height:350px!important;
        border-radius:15px;
        flex:none!important
    }
    .indicador-movil {
        position:absolute;
        top:20px;
        right:20px;
        z-index:10;
        background-color:#d62828!important;
        box-shadow:0 4px 15px rgba(0,0,0,.5);
        padding:8px 16px;
        border-radius:20px
    }
    .indicador-movil span {
        color:#fff!important;
        font-weight:800!important;
        font-size:.75rem!important;
        text-transform:uppercase;
        letter-spacing:1.5px;
        text-shadow:1px 1px 2px rgba(0,0,0,.8);
        display:block;
        font-family:sans-serif
    }
    @keyframes pulso-indicador {
        0%,100% {
            transform:scale(1);
            opacity:.8
        }
        50% {
            transform:scale(1.1);
            opacity:1
        }
    }
    .contenido-oculto {
        background:linear-gradient(to top,#000 30%,rgba(0,0,0,.6) 100%)!important;
        justify-content:center!important;
        padding:25px!important;
        text-align:center
    }
    .contenido-oculto p {
        line-height:1.6!important;
        font-size:1.1rem!important;
        letter-spacing:normal!important;
        font-weight:400!important;
        margin:0!important
    }
    .card-engranaje:active .contenido-oculto,.card-engranaje:hover .contenido-oculto {
        opacity:1!important;
        visibility:visible!important
    }
    .card-engranaje:active .indicador-movil,.card-engranaje:hover .indicador-movil {
        display:none
    }
}
.body-estado {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    background-color:#000;
    margin:0;
    padding:20px
}
.mensaje-box {
    background:#111;
    padding:40px;
    border-radius:8px;
    border:1px solid #9b1c1c;
    text-align:center;
    max-width:500px;
    box-shadow:0 10px 30px rgba(0,0,0,.5);
    animation:fadeIn .5s ease-in-out
}
.mensaje-box .huella {
    font-size:3rem;
    margin-bottom:20px;
    display:block
}
.mensaje-box h1 {
    margin-top:0;
    font-family:inherit
}
.btn-volver {
    display:inline-block;
    margin-top:25px;
    padding:12px 25px;
    background:#9b1c1c;
    color:#fff!important;
    text-decoration:none;
    border-radius:4px;
    transition:background .3s ease;
    text-transform:uppercase;
    font-weight:700;
    font-size:.9rem
}
.btn-volver:hover {
    background:#7a1515
}
.error-log {
    color:#ff6b6b;
    font-size:.8rem;
    margin-top:15px;
    background:rgba(255,107,107,.1);
    padding:10px;
    border-radius:4px
}
@keyframes fadeIn {
    from {
        opacity:0;
        transform:translateY(10px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
.contenedor-mapa-mixto {
    display:grid;
    grid-template-columns:1fr 300px;
    gap:20px;
    padding:20px;
    max-width:1200px;
    margin:0 auto;
    background:#0a0a0a
}
.zona-mapa {
    position:relative;
    background:#111;
    border-radius:12px;
    padding:15px;
    border:1px solid #333
}
#contenedor-relativo-mapa {
    position:relative;
    height:550px;
    border-radius:8px;
    overflow:hidden;
    border:2px solid #222;
    width:100%
}
#mapa-interactivo {
    height:100%;
    width:100%;
    z-index:1
}
.contenedor-filtros {
    display:flex;
    gap:10px;
    margin-bottom:15px;
    flex-wrap:wrap
}
.btn-filtro {
    padding:8px 16px;
    border-radius:20px;
    border:1px solid #9b1c1c;
    background:0 0;
    color:#fff;
    cursor:pointer;
    transition:.3s;
    font-size:.9rem
}
.btn-filtro.activo,.btn-filtro:hover {
    background:#9b1c1c;
    box-shadow:0 0 10px rgba(155,28,28,.4)
}
#btn-mi-ubicacion {
    position:absolute;
    top:70px;
    right:10px;
    z-index:1000;
    background:#fff;
    border:none;
    width:35px;
    height:35px;
    border-radius:4px;
    cursor:pointer;
    color:#333;
    box-shadow:0 2px 5px rgba(0,0,0,.5);
    display:flex;
    align-items:center;
    justify-content:center
}
.card-formulario-mapa {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:1001;
    background:#1a1a1a;
    padding:25px;
    border-radius:12px;
    border:1px solid #9b1c1c;
    width:90%;
    max-width:350px;
    display:none;
    box-shadow:0 0 30px rgba(0,0,0,.8)
}
.campo-formulario {
    margin-bottom:15px
}
.campo-formulario label {
    display:block;
    color:#aaa;
    font-size:.8rem;
    margin-bottom:5px
}
.campo-formulario input,.campo-formulario select,.campo-formulario textarea {
    width:100%;
    padding:10px;
    background:#222;
    border:1px solid #444;
    color:#fff;
    border-radius:5px
}
.boton-guardar {
    width:100%;
    padding:12px;
    background:#9b1c1c;
    border:none;
    color:#fff;
    font-weight:700;
    border-radius:5px;
    cursor:pointer;
    margin-bottom:10px
}
.panel-lateral {
    display:flex;
    flex-direction:column;
    gap:20px
}
.widget-ultimo-sitio {
    background:#111;
    padding:20px;
    border-radius:12px;
    border-left:4px solid #9b1c1c
}
.instrucciones-breves {
    color:#888;
    font-size:.85rem;
    line-height:1.5;
    padding:10px
}
@media (max-width:900px) {
    .contenedor-mapa-mixto {
        grid-template-columns:1fr
    }
    .panel-lateral {
        order:-1
    }
}
.menu-cerrar:hover {
    background-color:var(--foundation-colores-texto-secundario-texto-secundario-600)
}
.mascota-card h4  {
    font-size: 1rem;
}
.marker-urgencia {
    background:#9b1c1c;
    border:2px solid #fff;
    border-radius:50%;
    box-shadow:0 0 10px rgba(155,28,28,0.6);
    display:flex;
    align-items:center;
    justify-content:center
}
.marker-urgencia svg {
    width:14px;
    height:14px;
    fill:#fff
}
.widget-ultimo-sitio {
    background:rgba(255,255,255,0.05);
    border-radius:10px;
    padding:15px;
    border:1px solid rgba(255,255,255,0.1);
    box-shadow:0 4px 15px rgba(0,0,0,0.3)
}
.widget-ultimo-sitio h3 {
    color:#fff;
    font-size:1.1rem;
    margin-bottom:12px;
    border-bottom:2px solid #9b1c1c;
    padding-bottom:5px;
    display:inline-block
}
.aside-urgencias {
    color: #fff;
    background-color: #121212;
    border-radius: 10px;
    ;
    border-bottom:2px solid #9b1c1c;
    padding-bottom:5px
}
.layout-dos-columnas {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:40px;
    max-width:1200px;
    margin:30px auto;
    padding:20px
}
.columna-imagen,.columna-texto {
    flex:1 1 450px;
    min-width:300px
}
.columna-imagen img {
    display:block;
    width:100%;
    height:auto;
    border-radius:15px;
    object-fit:cover
}
.columna-texto h2 {
    font-size:2rem;
    margin-bottom:20px;
    color:#fff
}
.columna-texto p {
    line-height:1.6;
    font-size:1.1rem;
    color:var(--foundation-colores-fondo-fondo-100)
}
.grid-mascotas-siempre .mascota-card h4 {
    top:0;
    width:100%;
    padding:20px;
    background:linear-gradient(transparent,rgba(0,0,0,.9));
    margin:0;
    text-align:center;
    font-weight:700
}
.seccion-sobre-mi {
    padding:60px 10% 20px;
    background-color:#050505
}
.menu-hamburguesa img,.menu-cerrar img {
    pointer-events:none
}
@media (max-width: 780px)  {
    /* Evita que la sección principal cree un scroll invisible */
    .topnav, .header-principal  {
        max-width: 100vw;
    }
    /* FIX: El contenedor de cookies se salía de la pantalla */
    .cookie-container  {
        width: 100%;
        left: 0;
        /* El box-sizing añadido arriba soluciona el problema de su padding */
    }
    .cookie-container.active  {
        width: 100%;
        /* Antes estaba en 90%, lo cual con left: 0 quedaba raro */
    }
    /* FIX: Las grillas rígidas forzaban el ancho de la pantalla */
    .grid-mascotas-actuales,
    .grid-mascotas-siempre  {
        grid-template-columns: 1fr;
        /* Pasa de múltiples columnas a 1 sola en móvil */
        gap: 20px;
    }
    /* FIX: Los pasos se mostraban uno al lado del otro */
    .pasos-manada  {
        flex-direction: column;
        /* Apila los elementos en vertical */
        gap: 20px;
    }
    /* FIX: Reducir los paddings horizontales enormes en móvil */
    .seccion-mascotas  {
        padding: 40px 20px;
    }
    .seccion-mapa-home  {
        padding: 40px 15px;
    }
    /* Asegurar que el menú ocupa exactamente la pantalla */
    .menu  {
        width: 100vw;
        max-width: 100vw;
        box-sizing: border-box;
    }
}

body {
/* ... existing code ... */
/* FIXES FINALES PARA EL MENÚ (Añadir al final de tu CSS) */
.menu {
    width: 100% !important; /* Cambiamos 100vw por 100% para no generar scroll horizontal */
    z-index: 10005 !important; /* Lo ponemos por encima del topnav para que los clics funcionen */
}

.menu-cerrar {
    z-index: 10006 !important; /* La X para cerrar debe estar por encima de todo */
}
}