:root{

            --guau-azul:#00C2FF;
            --guau-azul-oscuro:#009FD0;

            --guau-azul-suave:#EAF9FF;

            --guau-negro:#172033;
            --guau-gris:#64748B;

            --guau-beige:#F8EBDD;

            --guau-verde:#22C55E;
            --guau-verde-suave:#ECFDF3;

            --guau-amarillo:#F6C453;
            --guau-amarillo-suave:#FFF8E6;

            --guau-coral:#FF8A65;
            --guau-coral-suave:#FFF1EC;

            --guau-blanco:#FFFFFF;

            --guau-radio:24px;

            --guau-sombra:
                0 18px 50px rgba(15,23,42,.09);

        }


        *{
            box-sizing:border-box;
        }


        html{
            scroll-behavior:smooth;
        }


        body{

            margin:0;

            font-family:
                "Inter",
                Arial,
                sans-serif;

            color:var(--guau-negro);

            background:#FFFFFF;

            overflow-x:hidden;
        }


        a{
            text-decoration:none;
        }


        button{
            font-family:inherit;
        }


        .home-section{

            padding:
                85px 0;
        }


        .home-container{

            width:
                min(1160px, calc(100% - 32px));

            margin:auto;
        }


        .home-kicker{

            display:inline-flex;

            align-items:center;

            gap:8px;

            padding:
                8px 14px;

            border-radius:999px;

            background:var(--guau-azul-suave);

            color:var(--guau-azul-oscuro);

            font-size:12px;

            font-weight:800;

            letter-spacing:.04em;

            text-transform:uppercase;
        }


        .home-title{

            margin:
                12px 0 10px;

            font-size:
                clamp(30px, 5vw, 48px);

            line-height:1.04;

            font-weight:900;

            letter-spacing:-.04em;
        }


        .home-description{

            margin:0;

            max-width:650px;

            color:var(--guau-gris);

            line-height:1.7;

            font-size:16px;
        }


        .section-header{

            margin-bottom:35px;
        }


        .section-header.center{

            text-align:center;
        }


        .section-header.center
        .home-description{

            margin:
                0 auto;
        }


        /* =====================================================
           NAVBAR
        ====================================================== */

        .navbar-guau{

            position:sticky;

            top:12px;

            z-index:1000;

            margin:
                12px auto 0;

            width:
                min(1180px, calc(100% - 24px));

            background:
                rgba(255,255,255,.94);

            backdrop-filter:
                blur(18px);

            border:
                1px solid rgba(15,23,42,.07);

            box-shadow:
                0 10px 35px rgba(15,23,42,.08);

            border-radius:22px;
        }


        .navbar-container{

            min-height:74px;
        }


        .logo-guau img{

            width:48px;

            height:48px;

            object-fit:contain;
        }


        .logo-texto h1{

            font-size:21px !important;

            margin:0 !important;
        }


        .logo-texto span{

            font-size:11px !important;
        }


        .menu-guau a{

            transition:
                .25s ease;
        }


        .menu-guau a:hover{

            transform:
                translateY(-1px);
        }


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

        .hero{

            position:relative;

            min-height:
                570px;

            margin-top:18px;

            display:flex;

            align-items:center;

            overflow:hidden;

            background:
                linear-gradient(
                    135deg,
                    #F8EBDD 0%,
                    #FFF8F2 45%,
                    #EAF9FF 100%
                );

            border-radius:
                0 0 42px 42px;
        }


        .hero::before{

            content:"";

            position:absolute;

            width:420px;

            height:420px;

            border-radius:50%;

            background:
                rgba(0,194,255,.10);

            right:-130px;

            top:-120px;
        }


        .hero::after{

            content:"";

            position:absolute;

            width:260px;

            height:260px;

            border-radius:50%;

            background:
                rgba(246,196,83,.15);

            left:-90px;

            bottom:-100px;
        }


        .hero-carousel{

            position:relative;

            z-index:2;

            width:100%;
        }


        .hero-slide{

            display:none;

            min-height:500px;

            align-items:center;
        }


        .hero-slide.active{

            display:flex;

            animation:
                heroIn .55s ease;
        }


        @keyframes heroIn{

            from{
                opacity:0;
                transform:translateX(20px);
            }

            to{
                opacity:1;
                transform:translateX(0);
            }

        }


        .hero-grid{

            width:
                min(1160px, calc(100% - 32px));

            margin:auto;

            display:grid;

            grid-template-columns:
                1.05fr .95fr;

            align-items:center;

            gap:45px;
        }


        .hero-badge{

            display:inline-flex;

            align-items:center;

            gap:8px;

            padding:9px 15px;

            border-radius:999px;

            background:#FFFFFF;

            color:var(--guau-azul-oscuro);

            font-size:12px;

            font-weight:800;

            box-shadow:
                0 8px 25px rgba(15,23,42,.07);
        }


        .hero h2{

            margin:
                20px 0 18px;

            font-size:
                clamp(42px, 6vw, 74px);

            line-height:.96;

            letter-spacing:-.055em;

            font-weight:900;
        }


        .hero h2 span{

            display:inline-block;

            color:var(--guau-azul);

        }


        .hero-text{

            max-width:570px;

            color:var(--guau-gris);

            font-size:17px;

            line-height:1.65;
        }


        .hero-actions{

            display:flex;

            flex-wrap:wrap;

            gap:12px;

            margin-top:28px;
        }


        .hero-btn{

            display:inline-flex;

            align-items:center;

            justify-content:center;

            min-height:50px;

            padding:
                0 22px;

            border-radius:15px;

            font-size:14px;

            font-weight:800;

            transition:.25s ease;

            border:0;
        }


        .hero-btn.primary{

            color:#FFFFFF;

            background:
                var(--guau-azul);

            box-shadow:
                0 10px 25px rgba(0,194,255,.25);
        }


        .hero-btn.primary:hover{

            color:#FFFFFF;

            background:
                var(--guau-azul-oscuro);

            transform:
                translateY(-2px);
        }


        .hero-btn.secondary{

            color:var(--guau-negro);

            background:#FFFFFF;

            border:
                1px solid rgba(15,23,42,.08);
        }


        .hero-btn.secondary:hover{

            color:var(--guau-negro);

            transform:
                translateY(-2px);

            box-shadow:
                0 10px 25px rgba(15,23,42,.08);
        }


        .hero-visual{

            position:relative;

            min-height:430px;

            display:flex;

            align-items:center;

            justify-content:center;
        }


        .hero-circle{

            position:absolute;

            width:390px;

            height:390px;

            border-radius:50%;

            background:
                rgba(255,255,255,.72);

            box-shadow:
                0 30px 70px rgba(15,23,42,.08);
        }


        .hero-mascota{

            position:relative;

            z-index:2;

            width:min(100%,440px);

            max-height:430px;

            object-fit:contain;

            filter:
                drop-shadow(
                    0 25px 25px rgba(15,23,42,.12)
                );
        }


        .hero-floating{

            position:absolute;

            z-index:4;

            display:flex;

            align-items:center;

            gap:9px;

            padding:
                11px 14px;

            background:#FFFFFF;

            border-radius:15px;

            box-shadow:
                0 14px 35px rgba(15,23,42,.12);

            font-size:12px;

            font-weight:800;
        }


        .hero-floating.one{

            left:5%;

            top:22%;
        }


        .hero-floating.two{

            right:2%;

            bottom:18%;
        }


        .hero-dots{

            position:absolute;

            z-index:10;

            bottom:28px;

            left:50%;

            transform:
                translateX(-50%);

            display:flex;

            gap:7px;
        }


        .hero-dot{

            width:8px;

            height:8px;

            padding:0;

            border:0;

            border-radius:50%;

            background:
                rgba(23,32,51,.20);

            transition:.25s ease;
        }


        .hero-dot.active{

            width:28px;

            border-radius:99px;

            background:
                var(--guau-azul);
        }


        /* =====================================================
           GUAU EN 4 COSAS
        ====================================================== */

        .four-grid{

            display:grid;

            grid-template-columns:
                repeat(4,1fr);

            gap:14px;
        }


        .four-card{

            position:relative;

            padding:25px;

            border:
                1px solid #EDF2F7;

            border-radius:22px;

            background:#FFFFFF;

            box-shadow:
                0 12px 35px rgba(15,23,42,.05);

            transition:.25s ease;
        }


        .four-card:hover{

            transform:
                translateY(-5px);

            box-shadow:
                var(--guau-sombra);
        }


        .four-icon{

            width:52px;

            height:52px;

            display:flex;

            align-items:center;

            justify-content:center;

            border-radius:16px;

            font-size:24px;

            margin-bottom:17px;
        }


        .four-card:nth-child(1)
        .four-icon{

            background:#EAF9FF;
        }


        .four-card:nth-child(2)
        .four-icon{

            background:#FFF8E6;
        }


        .four-card:nth-child(3)
        .four-icon{

            background:#ECFDF3;
        }


        .four-card:nth-child(4)
        .four-icon{

            background:#FFF1EC;
        }


        .four-card h3{

            margin:
                0 0 7px;

            font-size:18px;

            font-weight:850;
        }


        .four-card p{

            margin:0;

            color:var(--guau-gris);

            font-size:13px;

            line-height:1.6;
        }


        /* =====================================================
           CARRUSEL GENERAL
        ====================================================== */

        .carousel-wrapper{

            position:relative;
        }


        .carousel-track{

            display:flex;

            gap:18px;

            overflow-x:auto;

            scroll-behavior:smooth;

            scrollbar-width:none;

            padding:
                5px 2px 18px;
        }


        .carousel-track::-webkit-scrollbar{

            display:none;
        }


        .carousel-card{

            flex:
                0 0 calc(33.333% - 12px);

            min-width:280px;
        }


        .carousel-arrow{

            position:absolute;

            top:50%;

            transform:
                translateY(-50%);

            z-index:5;

            width:44px;

            height:44px;

            border:0;

            border-radius:50%;

            background:#FFFFFF;

            box-shadow:
                0 10px 25px rgba(15,23,42,.12);

            font-size:20px;

            cursor:pointer;

            transition:.2s ease;
        }


        .carousel-arrow:hover{

            transform:
                translateY(-50%) scale(1.05);
        }


        .carousel-arrow.left{

            left:-22px;
        }


        .carousel-arrow.right{

            right:-22px;
        }


        /* =====================================================
           PRODUCTOS
        ====================================================== */

        .products-section{

            background:#F8FBFD;
        }


        .product-card{

            min-height:330px;

            overflow:hidden;

            position:relative;

            background:#FFFFFF;

            border:
                1px solid #EDF2F7;

            border-radius:26px;

            box-shadow:
                0 12px 35px rgba(15,23,42,.05);

            transition:.25s ease;
        }


        .product-card:hover{

            transform:
                translateY(-5px);

            box-shadow:
                var(--guau-sombra);
        }


        .product-image{

            height:190px;

            display:flex;

            align-items:center;

            justify-content:center;

            font-size:76px;

            background:
                linear-gradient(
                    135deg,
                    #EAF9FF,
                    #F8EBDD
                );
        }


        .product-content{

            padding:20px;
        }


        .product-content h3{

            margin:0 0 7px;

            font-size:20px;

            font-weight:850;
        }


        .product-content p{

            margin:
                0 0 16px;

            color:var(--guau-gris);

            font-size:13px;

            line-height:1.6;
        }


        .small-link{

            color:var(--guau-azul-oscuro);

            font-size:13px;

            font-weight:800;
        }


        /* =====================================================
           QR / PROTECCIÓN
        ====================================================== */

        .protection{

            background:
                var(--guau-beige);
        }


        .protection-grid{

            display:grid;

            grid-template-columns:
                .9fr 1.1fr;

            gap:50px;

            align-items:center;
        }


        .protection-visual{

            min-height:330px;

            position:relative;

            display:flex;

            align-items:center;

            justify-content:center;
        }


        .protection-circle{

            width:280px;

            height:280px;

            border-radius:50%;

            background:#FFFFFF;

            display:flex;

            align-items:center;

            justify-content:center;

            box-shadow:
                0 25px 60px rgba(15,23,42,.09);
        }


        .qr-big{

            width:150px;

            height:150px;

            border-radius:20px;

            background:
                repeating-linear-gradient(
                    45deg,
                    #172033 0,
                    #172033 5px,
                    #FFFFFF 5px,
                    #FFFFFF 10px
                );

            border:
                12px solid #FFFFFF;

            box-shadow:
                0 10px 30px rgba(15,23,42,.15);
        }


        .protection-bubble{

            position:absolute;

            padding:
                11px 15px;

            border-radius:15px;

            background:#FFFFFF;

            box-shadow:
                0 12px 30px rgba(15,23,42,.10);

            font-size:12px;

            font-weight:800;
        }


        .protection-bubble.one{

            top:5%;

            right:8%;
        }


        .protection-bubble.two{

            bottom:7%;

            left:4%;
        }


        .protection-list{

            display:grid;

            gap:13px;

            margin-top:25px;
        }


        .protection-item{

            display:flex;

            gap:12px;

            align-items:flex-start;

            padding:15px;

            background:
                rgba(255,255,255,.72);

            border-radius:16px;
        }


        .protection-check{

            width:30px;

            height:30px;

            flex:0 0 30px;

            display:flex;

            align-items:center;

            justify-content:center;

            border-radius:10px;

            background:
                var(--guau-azul);

            color:#FFFFFF;

            font-size:14px;

            font-weight:900;
        }


        .protection-item strong{

            display:block;

            font-size:14px;

            margin-bottom:3px;
        }


        .protection-item span{

            color:var(--guau-gris);

            font-size:12px;

            line-height:1.5;
        }


        /* =====================================================
           SOCIOS Y CONVENIOS
        ====================================================== */

        .partners{

            background:#FFFFFF;
        }


        .partner-card{

            position:relative;

            min-height:300px;

            padding:22px;

            background:#FFFFFF;

            border:
                1px solid #EDF2F7;

            border-radius:24px;

            box-shadow:
                0 12px 35px rgba(15,23,42,.06);
        }


        .partner-top{

            display:flex;

            align-items:center;

            gap:13px;

            margin-bottom:22px;
        }


        .partner-logo{

            width:58px;

            height:58px;

            border-radius:17px;

            display:flex;

            align-items:center;

            justify-content:center;

            background:
                var(--guau-azul-suave);

            color:
                var(--guau-azul-oscuro);

            font-size:25px;

            font-weight:900;
        }


        .partner-name{

            font-size:16px;

            font-weight:850;
        }


        .partner-type{

            display:block;

            color:var(--guau-gris);

            font-size:11px;

            margin-top:3px;
        }


        .partner-benefit{

            padding:16px;

            border-radius:17px;

            background:
                var(--guau-amarillo-suave);

            margin-bottom:17px;
        }


        .partner-benefit strong{

            display:block;

            font-size:23px;

            margin-bottom:3px;
        }


        .partner-benefit span{

            font-size:12px;

            color:#6B5A28;
        }


        .partner-card p{

            color:var(--guau-gris);

            font-size:12px;

            line-height:1.6;

            margin-bottom:18px;
        }


        .partner-button{

            display:inline-flex;

            padding:
                10px 15px;

            border-radius:12px;

            background:
                var(--guau-azul-suave);

            color:
                var(--guau-azul-oscuro);

            font-size:12px;

            font-weight:800;
        }


        .future-badge{

            display:inline-flex;

            margin-top:8px;

            padding:6px 9px;

            border-radius:999px;

            background:#F1F5F9;

            color:#64748B;

            font-size:10px;

            font-weight:700;
        }


        /* =====================================================
           MEMBRESÍA
        ====================================================== */

        .membership{

            position:relative;

            overflow:hidden;

            background:
                linear-gradient(
                    135deg,
                    #00C2FF,
                    #008FBE
                );

            color:#FFFFFF;
        }


        .membership::before{

            content:"";

            position:absolute;

            width:400px;

            height:400px;

            border-radius:50%;

            right:-130px;

            top:-190px;

            background:
                rgba(255,255,255,.10);
        }


        .membership-grid{

            position:relative;

            z-index:2;

            display:grid;

            grid-template-columns:
                1.2fr .8fr;

            gap:35px;

            align-items:center;
        }


        .membership .home-kicker{

            background:
                rgba(255,255,255,.16);

            color:#FFFFFF;
        }


        .membership h2{

            margin:
                14px 0;

            font-size:
                clamp(32px,5vw,52px);

            line-height:1;

            font-weight:900;

            letter-spacing:-.04em;
        }


        .membership-text{

            max-width:630px;

            color:
                rgba(255,255,255,.88);

            line-height:1.65;

            font-size:15px;
        }


        .membership-benefits{

            display:flex;

            flex-wrap:wrap;

            gap:9px;

            margin-top:23px;
        }


        .membership-chip{

            padding:
                9px 12px;

            border-radius:999px;

            background:
                rgba(255,255,255,.14);

            border:
                1px solid rgba(255,255,255,.16);

            font-size:11px;

            font-weight:700;
        }


        .membership-actions{

            display:flex;

            flex-wrap:wrap;

            gap:10px;

            margin-top:25px;
        }


        .membership-button{

            border:0;

            padding:
                13px 18px;

            border-radius:14px;

            background:#FFFFFF;

            color:
                var(--guau-azul-oscuro);

            font-size:13px;

            font-weight:850;

            cursor:pointer;
        }


        .membership-button.alt{

            background:
                rgba(255,255,255,.13);

            color:#FFFFFF;

            border:
                1px solid rgba(255,255,255,.25);
        }


        .membership-card{

            padding:26px;

            border-radius:25px;

            background:
                rgba(255,255,255,.12);

            border:
                1px solid rgba(255,255,255,.18);

            backdrop-filter:
                blur(10px);
        }


        .membership-card-icon{

            font-size:42px;

            margin-bottom:12px;
        }


        .membership-card h3{

            margin:
                0 0 7px;

            font-size:20px;

            font-weight:850;
        }


        .membership-card p{

            margin:0;

            color:
                rgba(255,255,255,.83);

            font-size:13px;

            line-height:1.6;
        }


        /* =====================================================
           DIDÁCTICO
        ====================================================== */

        .didactic{

            background:#F8FBFD;
        }


        .didactic-grid{

            display:grid;

            grid-template-columns:
                repeat(3,1fr);

            gap:16px;
        }


        .didactic-card{

            position:relative;

            padding:26px;

            background:#FFFFFF;

            border-radius:23px;

            border:
                1px solid #EDF2F7;

            min-height:210px;

            overflow:hidden;
        }


        .didactic-number{

            position:absolute;

            right:20px;

            top:10px;

            font-size:70px;

            font-weight:900;

            color:#F1F5F9;

            line-height:1;
        }


        .didactic-card h3{

            position:relative;

            z-index:2;

            margin:
                0 0 9px;

            font-size:18px;

            font-weight:850;
        }


        .didactic-card p{

            position:relative;

            z-index:2;

            margin:0;

            color:var(--guau-gris);

            font-size:13px;

            line-height:1.65;
        }


        .didactic-card strong{

            display:block;

            margin-top:18px;

            color:
                var(--guau-azul-oscuro);

            font-size:12px;
        }


        /* =====================================================
           CÓMO FUNCIONA
        ====================================================== */

        .steps{

            display:grid;

            grid-template-columns:
                repeat(3,1fr);

            gap:18px;

            counter-reset:step;
        }


        .step{

            position:relative;

            padding:27px;

            border-radius:24px;

            background:#FFFFFF;

            border:
                1px solid #EDF2F7;

            box-shadow:
                0 12px 35px rgba(15,23,42,.05);
        }


        .step-number{

            width:45px;

            height:45px;

            display:flex;

            align-items:center;

            justify-content:center;

            border-radius:14px;

            background:
                var(--guau-azul);

            color:#FFFFFF;

            font-weight:900;

            margin-bottom:18px;
        }


        .step h3{

            margin:
                0 0 8px;

            font-size:18px;

            font-weight:850;
        }


        .step p{

            margin:0;

            color:var(--guau-gris);

            font-size:13px;

            line-height:1.65;
        }


        /* =====================================================
           RED DE AYUDA
        ====================================================== */

        .help-section{

            padding:
                70px 0;

            background:
                linear-gradient(
                    135deg,
                    #FFF5D9,
                    #FFF9ED
                );
        }


        .help-box{

            position:relative;

            overflow:hidden;

            display:grid;

            grid-template-columns:
                1.1fr .9fr;

            gap:30px;

            align-items:center;

            padding:
                45px;

            border-radius:32px;

            background:
                #FFF3C4;

            border:
                1px solid #F3D98A;

            box-shadow:
                0 18px 50px rgba(128,91,15,.08);
        }


        .help-box::after{

            content:"🐾";

            position:absolute;

            right:30px;

            bottom:-45px;

            font-size:180px;

            opacity:.08;

            transform:
                rotate(-15deg);
        }


        .help-badge{

            display:inline-flex;

            padding:
                8px 12px;

            border-radius:999px;

            background:
                rgba(255,255,255,.65);

            color:#856A18;

            font-size:11px;

            font-weight:850;

            text-transform:uppercase;
        }


        .help-box h2{

            margin:
                13px 0 9px;

            font-size:
                clamp(30px,5vw,48px);

            line-height:1;

            font-weight:900;

            letter-spacing:-.04em;
        }


        .help-box p{

            margin:0;

            max-width:600px;

            color:#725E28;

            font-size:14px;

            line-height:1.7;
        }


        .help-actions{

            display:flex;

            flex-wrap:wrap;

            gap:10px;

            margin-top:22px;
        }


        .help-button{

            border:0;

            cursor:pointer;

            padding:
                13px 17px;

            border-radius:14px;

            font-size:12px;

            font-weight:850;

            background:#FFFFFF;

            color:#66531B;

            box-shadow:
                0 7px 20px rgba(0,0,0,.06);
        }


        .help-button.primary{

            background:
                #22A65A;

            color:#FFFFFF;
        }


        .help-button.share{

            background:
                #FFFFFF;

            color:#172033;
        }


        .help-mini{

            position:relative;

            z-index:2;

            display:grid;

            gap:10px;
        }


        .help-mini-item{

            display:flex;

            align-items:center;

            gap:12px;

            padding:14px;

            border-radius:17px;

            background:
                rgba(255,255,255,.68);
        }


        .help-mini-icon{

            width:38px;

            height:38px;

            flex:0 0 38px;

            display:flex;

            align-items:center;

            justify-content:center;

            border-radius:12px;

            background:#FFFFFF;

            font-size:18px;
        }


        .help-mini-item strong{

            display:block;

            font-size:12px;

            margin-bottom:2px;
        }


        .help-mini-item span{

            display:block;

            color:#77652B;

            font-size:10px;

        }


        /* =====================================================
           EMERGENCIA
        ====================================================== */

        .emergency{

            background:
                #172033;

            color:#FFFFFF;
        }


        .emergency-grid{

            display:grid;

            grid-template-columns:
                1fr .75fr;

            gap:40px;

            align-items:center;
        }


        .emergency .home-kicker{

            background:
                rgba(255,255,255,.09);

            color:
                #FFFFFF;
        }


        .emergency h2{

            margin:
                14px 0;

            font-size:
                clamp(30px,5vw,48px);

            font-weight:900;

            line-height:1;

            letter-spacing:-.04em;
        }


        .emergency p{

            color:
                rgba(255,255,255,.72);

            font-size:14px;

            line-height:1.7;

            max-width:650px;
        }


        .emergency-button{

            display:inline-flex;

            align-items:center;

            gap:8px;

            margin-top:17px;

            padding:
                13px 18px;

            border:0;

            border-radius:14px;

            background:
                var(--guau-azul);

            color:#FFFFFF;

            font-size:12px;

            font-weight:850;

            cursor:pointer;
        }


        .emergency-card{

            padding:30px;

            border-radius:25px;

            background:
                rgba(255,255,255,.07);

            border:
                1px solid rgba(255,255,255,.10);

            text-align:center;
        }


        .emergency-play{

            width:78px;

            height:78px;

            margin:
                0 auto 16px;

            display:flex;

            align-items:center;

            justify-content:center;

            border-radius:50%;

            background:
                var(--guau-azul);

            font-size:25px;

            box-shadow:
                0 12px 30px rgba(0,194,255,.20);
        }


        .emergency-card strong{

            display:block;

            font-size:16px;

            margin-bottom:5px;
        }


        .emergency-card span{

            color:
                rgba(255,255,255,.60);

            font-size:11px;
        }


        /* =====================================================
           CTA FINAL
        ====================================================== */

        .final-cta{

            padding:
                75px 0;
        }


        .final-box{

            position:relative;

            overflow:hidden;

            padding:
                55px 35px;

            border-radius:32px;

            text-align:center;

            background:
                linear-gradient(
                    135deg,
                    #EAF9FF,
                    #F8EBDD
                );
        }


        .final-box h2{

            margin:
                0 0 12px;

            font-size:
                clamp(32px,5vw,52px);

            font-weight:900;

            line-height:1;

            letter-spacing:-.04em;
        }


        .final-box p{

            max-width:650px;

            margin:
                0 auto 23px;

            color:var(--guau-gris);

            font-size:14px;

            line-height:1.7;
        }


        .final-actions{

            display:flex;

            flex-wrap:wrap;

            justify-content:center;

            gap:10px;
        }


        /* =====================================================
           MENSAJE FLOTANTE MEMBRESÍA
        ====================================================== */

        .floating-membership{

            position:fixed;

            z-index:1500;

            right:22px;

            bottom:22px;

            width:
                min(330px, calc(100% - 44px));

            padding:17px;

            background:#FFFFFF;

            border:
                1px solid rgba(15,23,42,.08);

            border-radius:20px;

            box-shadow:
                0 20px 50px rgba(15,23,42,.18);

            transform:
                translateY(130%);

            opacity:0;

            transition:
                .45s ease;
        }


        .floating-membership.show{

            transform:
                translateY(0);

            opacity:1;
        }


        .floating-close{

            position:absolute;

            right:10px;

            top:9px;

            width:25px;

            height:25px;

            border:0;

            border-radius:50%;

            background:#F1F5F9;

            cursor:pointer;

            font-size:13px;

            color:#64748B;
        }


        .floating-membership .mini-title{

            display:flex;

            align-items:center;

            gap:8px;

            padding-right:25px;

            font-size:13px;

            font-weight:900;

            margin-bottom:6px;
        }


        .floating-membership p{

            margin:
                0 0 12px;

            color:var(--guau-gris);

            font-size:11px;

            line-height:1.5;
        }


        .floating-membership button{

            border:0;

            padding:
                9px 12px;

            border-radius:11px;

            background:
                var(--guau-azul);

            color:#FFFFFF;

            font-size:11px;

            font-weight:850;

            cursor:pointer;
        }


        /* =====================================================
           BARRA FLOTANTE MÓVIL
        ====================================================== */

        .mobile-actions{

            display:none;

            position:fixed;

            z-index:1400;

            left:10px;

            right:10px;

            bottom:10px;

            padding:7px;

            border-radius:18px;

            background:
                rgba(255,255,255,.95);

            backdrop-filter:
                blur(15px);

            box-shadow:
                0 15px 40px rgba(15,23,42,.18);

            border:
                1px solid rgba(15,23,42,.07);

            grid-template-columns:
                repeat(4,1fr);

            gap:4px;
        }


        .mobile-action{

            display:flex;

            flex-direction:column;

            align-items:center;

            justify-content:center;

            gap:3px;

            min-height:48px;

            border:0;

            background:transparent;

            color:#64748B;

            font-size:9px;

            font-weight:800;

            cursor:pointer;

            border-radius:12px;
        }


        .mobile-action span:first-child{

            font-size:18px;
        }


        .mobile-action:hover{

            background:#F1F5F9;
        }


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

        .guau-modal{

            position:fixed;

            inset:0;

            z-index:3000;

            display:none;

            align-items:center;

            justify-content:center;

            padding:18px;

            background:
                rgba(15,23,42,.60);

            backdrop-filter:
                blur(7px);
        }


        .guau-modal.open{

            display:flex;

            animation:
                modalFade .2s ease;
        }


        @keyframes modalFade{

            from{
                opacity:0;
            }

            to{
                opacity:1;
            }

        }


        .guau-modal-box{

            width:
                min(620px, 100%);

            max-height:
                calc(100vh - 36px);

            overflow:auto;

            position:relative;

            padding:30px;

            border-radius:27px;

            background:#FFFFFF;

            box-shadow:
                0 30px 80px rgba(0,0,0,.25);

            animation:
                modalUp .25s ease;
        }


        @keyframes modalUp{

            from{
                opacity:0;
                transform:translateY(15px) scale(.98);
            }

            to{
                opacity:1;
                transform:none;
            }

        }


        .modal-close{

            position:absolute;

            right:14px;

            top:14px;

            width:36px;

            height:36px;

            border:0;

            border-radius:50%;

            background:#F1F5F9;

            color:#64748B;

            cursor:pointer;

            font-size:18px;
        }


        .modal-icon{

            width:55px;

            height:55px;

            display:flex;

            align-items:center;

            justify-content:center;

            border-radius:17px;

            background:
                var(--guau-azul-suave);

            font-size:25px;

            margin-bottom:15px;
        }


        .guau-modal-box h2{

            margin:
                0 35px 8px 0;

            font-size:27px;

            font-weight:900;

            letter-spacing:-.03em;
        }


        .guau-modal-box > p{

            color:var(--guau-gris);

            font-size:13px;

            line-height:1.65;

            margin-bottom:20px;
        }


        .modal-options{

            display:grid;

            grid-template-columns:
                repeat(2,1fr);

            gap:10px;
        }


        .modal-option{

            display:flex;

            align-items:center;

            gap:10px;

            padding:14px;

            border:
                1px solid #E8EDF2;

            border-radius:15px;

            background:#FFFFFF;

            color:var(--guau-negro);

            cursor:pointer;

            text-align:left;

            transition:.2s ease;
        }


        .modal-option:hover{

            border-color:
                rgba(0,194,255,.4);

            background:
                #F8FDFF;

            transform:
                translateY(-2px);
        }


        .modal-option-icon{

            width:37px;

            height:37px;

            display:flex;

            align-items:center;

            justify-content:center;

            border-radius:11px;

            background:#F1F5F9;

            font-size:17px;
        }


        .modal-option strong{

            display:block;

            font-size:12px;

            margin-bottom:2px;
        }


        .modal-option span{

            display:block;

            color:var(--guau-gris);

            font-size:10px;
        }


        .modal-main-button{

            width:100%;

            margin-top:17px;

            min-height:48px;

            border:0;

            border-radius:14px;

            background:
                var(--guau-azul);

            color:#FFFFFF;

            font-weight:850;

            cursor:pointer;
        }


        /* =====================================================
           FORMULARIO COMUNIDAD DENTRO DEL MODAL
        ====================================================== */

        #modalComunidad .guau-modal-box{

            width:
                min(700px,100%);
        }


        #form-comunidad{

            margin-top:10px;
        }


        /* =====================================================
           VIDEO
        ====================================================== */

        .video-placeholder{

            min-height:280px;

            display:flex;

            flex-direction:column;

            align-items:center;

            justify-content:center;

            border-radius:20px;

            background:
                linear-gradient(
                    135deg,
                    #172033,
                    #26364F
                );

            color:#FFFFFF;

            text-align:center;

            padding:30px;
        }


        .video-placeholder .play{

            width:70px;

            height:70px;

            display:flex;

            align-items:center;

            justify-content:center;

            border-radius:50%;

            background:
                var(--guau-azul);

            font-size:23px;

            margin-bottom:14px;
        }


        .video-placeholder strong{

            font-size:16px;

            margin-bottom:5px;
        }


        .video-placeholder span{

            color:
                rgba(255,255,255,.65);

            font-size:11px;
        }


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

        .guau-footer{

            padding:
                35px 0;

            background:#172033;

            color:#FFFFFF;
        }


        .footer-inner{

            width:
                min(1160px, calc(100% - 32px));

            margin:auto;

            display:flex;

            justify-content:space-between;

            align-items:center;

            gap:20px;
        }


        .footer-brand{

            display:flex;

            align-items:center;

            gap:11px;
        }


        .footer-brand img{

            width:45px;

            height:45px;

            object-fit:contain;
        }


        .footer-brand strong{

            display:block;

            font-size:15px;
        }


        .footer-brand span{

            display:block;

            margin-top:3px;

            color:
                rgba(255,255,255,.55);

            font-size:10px;
        }


        .footer-links{

            display:flex;

            flex-wrap:wrap;

            gap:14px;
        }


        .footer-links a{

            color:
                rgba(255,255,255,.70);

            font-size:11px;

            font-weight:600;
        }


        .footer-links a:hover{

            color:#FFFFFF;
        }


        /* =====================================================
           RESPONSIVE
        ====================================================== */

        @media(max-width:1000px){

            .hero-grid{

                grid-template-columns:
                    1fr;

                text-align:center;

                gap:10px;
            }


            .hero-text{

                margin:auto;
            }


            .hero-actions{

                justify-content:center;
            }


            .hero-visual{

                min-height:310px;
            }


            .hero-circle{

                width:280px;

                height:280px;
            }


            .hero-mascota{

                width:330px;

                max-height:310px;
            }


            .four-grid{

                grid-template-columns:
                    repeat(2,1fr);
            }


            .protection-grid,
            .membership-grid,
            .emergency-grid{

                grid-template-columns:
                    1fr;
            }


            .protection-visual{

                order:2;
            }


            .didactic-grid{

                grid-template-columns:
                    1fr;
            }


            .help-box{

                grid-template-columns:
                    1fr;
            }


            .steps{

                grid-template-columns:
                    1fr;
            }

        }


        @media(max-width:768px){

            .navbar-guau{

                top:7px;

                margin-top:7px;

                width:
                    calc(100% - 14px);

                border-radius:18px;
            }


            .home-section{

                padding:
                    60px 0;
            }


            .hero{

                min-height:
                    auto;

                border-radius:
                    0 0 28px 28px;

                padding:
                    25px 0 60px;
            }


            .hero-slide{

                min-height:
                    auto;
            }


            .hero-grid{

                width:
                    calc(100% - 28px);
            }


            .hero h2{

                font-size:
                    clamp(39px,12vw,58px);
            }


            .hero-text{

                font-size:14px;
            }


            .hero-visual{

                min-height:260px;

                margin-top:5px;
            }


            .hero-circle{

                width:235px;

                height:235px;
            }


            .hero-mascota{

                width:280px;

                max-height:260px;
            }


            .hero-floating{

                font-size:9px;

                padding:8px 10px;
            }


            .hero-floating.one{

                left:1%;
            }


            .hero-floating.two{

                right:1%;
            }


            .hero-dots{

                bottom:16px;
            }


            .carousel-card{

                flex:
                    0 0 82%;
            }


            .carousel-arrow{

                display:none;
            }


            .four-grid{

                grid-template-columns:
                    1fr 1fr;

                gap:10px;
            }


            .four-card{

                padding:17px;

                border-radius:18px;
            }


            .four-card h3{

                font-size:15px;
            }


            .four-card p{

                font-size:11px;
            }


            .four-icon{

                width:43px;

                height:43px;

                font-size:20px;

                margin-bottom:12px;
            }


            .protection-grid{

                gap:10px;
            }


            .protection-visual{

                min-height:250px;
            }


            .protection-circle{

                width:220px;

                height:220px;
            }


            .qr-big{

                width:120px;

                height:120px;
            }


            .membership{

                padding:
                    60px 0;
            }


            .membership-card{

                margin-top:8px;
            }


            .help-section{

                padding:
                    45px 0;
            }


            .help-box{

                padding:
                    30px 20px;

                border-radius:25px;
            }


            .help-actions{

                display:grid;

                grid-template-columns:
                    1fr 1fr;
            }


            .help-button{

                width:100%;
            }


            .modal-options{

                grid-template-columns:
                    1fr;
            }


            .guau-modal-box{

                padding:24px 18px;

                border-radius:22px;
            }


            .floating-membership{

                bottom:75px;

                right:12px;

                width:
                    calc(100% - 24px);
            }


            .mobile-actions{

                display:grid;
            }


            .footer-inner{

                flex-direction:column;

                text-align:center;
            }


            .footer-brand{

                justify-content:center;
            }


            .footer-links{

                justify-content:center;
            }


            body{

                padding-bottom:65px;
            }

        }


        @media(max-width:420px){

            .four-grid{

                grid-template-columns:
                    1fr;
            }


            .hero-actions{

                flex-direction:column;
            }


            .hero-btn{

                width:100%;
            }


            .help-actions{

                grid-template-columns:
                    1fr;
            }


            .membership-actions{

                flex-direction:column;
            }


            .membership-button{

                width:100%;
            }

        }



/* =========================================================
   FASE 1 + 2 — HERO / CARRUSEL GUAU
   Reglas adicionales: flechas, accesibilidad y touch.
========================================================= */

.hero {
    position: relative;
}

.hero-carousel {
    position: relative;
    touch-action: pan-y;
}

.hero-arrow {
    position: absolute;
    top: 50%;
    z-index: 20;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 50%;
    background: rgba(255,255,255,.82);
    color: #172033;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 12px 30px rgba(15,23,42,.12);
    backdrop-filter: blur(10px);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

.hero-arrow:hover {
    background: #FFFFFF;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 16px 35px rgba(15,23,42,.16);
}

.hero-arrow.left {
    left: 22px;
}

.hero-arrow.right {
    right: 22px;
}

.hero-dot {
    cursor: pointer;
}

.hero-slide {
    user-select: none;
}

@media (max-width: 1000px) {
    .hero-arrow {
        width: 40px;
        height: 40px;
        font-size: 25px;
    }

    .hero-arrow.left {
        left: 12px;
    }

    .hero-arrow.right {
        right: 12px;
    }
}

@media (max-width: 700px) {
    .hero-arrow {
        top: auto;
        bottom: 20px;
        width: 38px;
        height: 38px;
        font-size: 23px;
        transform: none;
    }

    .hero-arrow:hover {
        transform: scale(1.04);
    }

    .hero-arrow.left {
        left: 18px;
    }

    .hero-arrow.right {
        right: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .hero-mascota,
    .hero-circle,
    .hero-floating {
        animation: none !important;
        transition: none !important;
    }
}