:root{--teal:#00a995;--teal-dark:#008677;--dark:#090d0f;--ink:#15191d;--muted:#667085;--line:#e7edf0;--soft:#f7fbfb;--white:#fff;--shadow:0 24px 70px rgba(10,20,30,.12);--radius:24px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Poppins,Arial,sans-serif;background:#fff;color:var(--ink)}a{text-decoration:none;color:inherit}.topbar{position:sticky;top:0;z-index:30;background:linear-gradient(135deg,#050707,#121719 78%,var(--teal) 78%);color:#fff;box-shadow:0 8px 30px rgba(0,0,0,.16)}.nav{max-width:1240px;margin:auto;height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 28px}.brand{display:flex;align-items:center;gap:14px}.brand img{width:165px;max-height:54px;object-fit:contain}.menu{display:flex;gap:28px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.menu a{opacity:.92}.menu a:hover{color:var(--teal)}.nav-cta,.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;border-radius:10px;padding:14px 22px;font-weight:800;font-size:13px;cursor:pointer;transition:.2s ease}.nav-cta,.btn-primary{background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;box-shadow:0 12px 30px rgba(0,169,149,.26)}.btn-secondary,.btn-outline{border:2px solid var(--teal);color:var(--teal);background:#fff}.btn:hover{transform:translateY(-2px)}.borrar{position:relative;overflow:hidden;background:linear-gradient(130deg,#fff 0 72%,#0c0f11 72%);min-height:720px}.borrar:before{content:"";position:absolute;right:18%;bottom:0;width:420px;height:220px;background:var(--teal);border-radius:260px 260px 0 0;opacity:.95}.borrar-inner{position:relative;max-width:1240px;margin:auto;padding:86px 28px 150px;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}.eyebrow{color:var(--teal);font-weight:900;text-transform:uppercase;font-size:14px;letter-spacing:.04em}.borrar h1{font-size:70px;line-height:.96;margin:18px 0 20px;letter-spacing:-.05em;font-weight:900}.borrar h1 span{display:block;color:var(--teal)}.borrar p{max-width:530px;color:#46515a;font-size:17px;line-height:1.7}.borrar-badges{display:flex;gap:20px;flex-wrap:wrap;margin:30px 0}.mini-badge{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800}.mini-badge i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--teal);color:var(--teal)}.borrar-actions{display:flex;gap:18px;flex-wrap:wrap}.social-proof{display:flex;align-items:center;gap:10px;margin-top:24px;color:#667085;font-weight:700;font-size:13px}.avatar-stack span{display:inline-grid;place-items:center;margin-left:-8px;width:28px;height:28px;border-radius:50%;background:#e5f7f5;border:2px solid #fff}.borrar-media{position:relative;min-height:470px}.borrar-mark{position:absolute;right:15px;top:0;width:260px;opacity:.95}.borrar-dogs{
    
    position:absolute;
    left:0;
    bottom:-35px;
    width:470px;
    max-width:100%;
    filter:drop-shadow(0 25px 35px rgba(0,0,0,.18));
    border-radius:0;
    background:transparent;
    object-fit:contain;

}.calculator-shell{position:relative;z-index:5;max-width:1180px;margin:-108px auto 0;padding:0 28px}.calc-panel{background:#fff;border:1px solid #dfe9ec;border-radius:18px;box-shadow:var(--shadow);padding:30px}.section-head{text-align:center;margin-bottom:24px}.section-head h2{font-size:32px;margin:0 0 8px;font-weight:900;letter-spacing:-.03em}.section-head span{color:var(--teal)}.section-head p{margin:0;color:var(--muted)}.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:68px;align-items:start}.form-card,.result-card{border-radius:16px;padding:26px;border:1px solid var(--line)}.form-card h3,.result-card h3{margin:0 0 18px;font-size:16px;text-transform:uppercase}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:12px;font-weight:800;color:#334155}.field input,.field select,.field textarea,.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #d8e2e6;border-radius:9px;background:#fff;padding:13px 14px;font-family:inherit;outline:none}.field input:focus,.field select:focus,.field textarea:focus,.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--teal);box-shadow:0 0 0 4px rgba(0,169,149,.1)}.calc-btn{width:100%;border:0;border-radius:10px;margin-top:18px;padding:15px;background:linear-gradient(135deg,var(--teal),var(--teal-dark));color:#fff;font-weight:900;cursor:pointer}.summary-inline{background:#f2fbfa;border:1px solid #ccefeb;border-radius:10px;padding:12px;color:#315056;font-size:13px}.mini-note{font-size:12px;color:var(--muted)}.result-card{background:linear-gradient(135deg,#eafbfa,#f8ffff);position:relative;overflow:hidden}.result-card:after{content:"";position:absolute;right:20px;top:65px;width:220px;height:220px;background:url('../images/logo_black.png') center/contain no-repeat;opacity:.035}.result-title{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.pet-title{margin:0;font-size:18px;color:var(--teal-dark)}.badge{display:inline-flex;padding:6px 12px;border-radius:999px;background:var(--teal);color:#fff;font-size:11px;font-weight:900}.stat-row{display:grid;gap:13px;margin:18px 0}.stat-box{position:relative;z-index:1;background:#fff;border-radius:12px;padding:14px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 10px 25px rgba(0,0,0,.04)}.stat-box b{font-size:28px;color:var(--teal)}.details{display:grid;gap:8px;font-size:13px;margin:12px 0}.detail-item{display:flex;gap:10px;align-items:flex-start}.check{min-width:24px;height:24px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900}.cta-group{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}.trust-item{display:flex;gap:10px;align-items:center;font-size:12px;font-weight:800;color:#40505a}.trust-item i{width:38px;height:38px;border:2px solid var(--teal);border-radius:50%;display:grid;place-items:center;color:var(--teal)}.section{padding:70px 28px}.wrap{max-width:1240px;margin:auto}.benefit-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.benefit{background:#fff;border:1px solid var(--line);border-radius:16px;padding:25px;text-align:center;box-shadow:0 14px 35px rgba(10,20,30,.05)}.benefit i{font-size:34px;color:var(--teal)}.benefit h3{font-size:14px}.benefit p{font-size:13px;color:var(--muted);line-height:1.5}.split{display:grid;grid-template-columns:1fr 1fr}.raw-panel{background:linear-gradient(135deg,#090d0f,#151b1e);color:#fff;padding:62px 7vw;clip-path:polygon(0 0,92% 0,76% 100%,0 100%)}.raw-panel h2{font-size:34px;color:var(--teal);margin:0}.raw-panel ul{list-style:none;padding:0;margin:18px 0;line-height:1.65;font-weight:700}.raw-panel img{width:390px;max-width:90%;margin-top:18px}.manage-panel{padding:62px 7vw;position:relative;background:#fff}.manage-panel h2{font-size:34px;margin:0 0 22px}.manage-panel h2 span{color:var(--teal)}.steps{display:grid;gap:16px}.step{display:flex;gap:15px}.step i{width:42px;height:42px;border-radius:50%;border:2px solid var(--teal);display:grid;place-items:center;color:var(--teal);font-style:normal;font-weight:900}.plans{background:#fbfdfd}.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.plan{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;text-align:center;position:relative;box-shadow:0 14px 35px rgba(0,0,0,.05)}.plan.featured{background:linear-gradient(135deg,var(--teal),#007b70);color:#fff;transform:scale(1.03)}.plan h3{margin:8px 0}.price{font-size:24px;color:var(--teal);font-weight:900}.featured .price{color:#fff}

/* =========================================================
   TESTIMONIOS LYCAN - BLOQUE ÚNICO DEPURADO
   Estructura esperada:
   <section class="testimonials">
     <div class="testimonial-wrap">
       <img ...>
       <div class="quote">...</div>
       <div class="quote">...</div>
       <div class="quote">...</div>
       <img ...>
     </div>
   </section>
   ========================================================= */
.testimonials{
    width:100%;
    min-height:240px;
    background:linear-gradient(135deg,#002f2d 0%,#04100f 100%);
    color:#fff;
    overflow:hidden;
    display:flex;
    align-items:center;
    padding:0 28px;
}

.testimonial-wrap{
    width:100%;
    max-width:1240px;
    min-height:240px;
    margin:0 auto;
    display:grid;
    grid-template-columns:190px 1fr 1fr 1fr 190px;
    gap:34px;
    align-items:center;
}

.testimonial-wrap > img{
    width:190px;
    height:235px;
    object-fit:contain;
    object-position:center bottom;
    display:block;
    align-self:end;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    outline:0;
    padding:0;
    margin:0;
    filter:drop-shadow(0 16px 18px rgba(0,0,0,.18));
}

.testimonial-wrap > img:first-child{
    justify-self:start;
}

.testimonial-wrap > img:last-child{
    justify-self:end;
}

.quote{
    color:#fff;
    background:transparent;
    border-left:1px solid rgba(255,255,255,.24);
    padding-left:24px;
    font-size:15px;
    line-height:1.55;
    align-self:center;
}

.quote p{
    margin:0 0 8px;
}

.stars{
    color:#ffd84d;
    letter-spacing:2px;
    font-weight:900;
}

@media(max-width:980px){
    .testimonials{
        min-height:auto;
        padding:34px 24px;
    }

    .testimonial-wrap{
        min-height:auto;
        grid-template-columns:1fr;
        gap:18px;
    }

    .testimonial-wrap > img{
        display:none;
    }

    .quote{
        border-left:0;
        border-top:1px solid rgba(255,255,255,.18);
        padding:18px 0 0;
    }
}
.faq-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.faq-card{border:1px solid var(--line);border-radius:14px;padding:18px;background:#fff;font-size:13px;font-weight:800}.contact{background:linear-gradient(90deg,#fff,#f1fbfa);border-top:1px solid var(--line)}.contact-grid{display:grid;grid-template-columns:.85fr 1.4fr .8fr;gap:34px;align-items:start}.contact h2{font-size:26px;margin:0 0 12px}.contact h2 span{color:var(--teal)}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.contact-form textarea,.contact-form button{grid-column:1/-1}.direct{display:grid;gap:12px;font-size:14px}.direct a,.direct div{display:flex;gap:10px;align-items:flex-start}.footer{background:#070909;color:#fff}.footer-inner{max-width:1240px;margin:auto;display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:25px;align-items:center;padding:28px}.footer img{width:150px}.footer strong{display:block}.mobile-product{display:none}.product-image{display:none}@media(max-width:980px){.menu{display:none}.borrar{background:#fff}.borrar-inner{grid-template-columns:1fr;padding-bottom:110px}.borrar h1{font-size:48px}.borrar-media{min-height:300px}.borrar-mark{right:0;width:180px}.borrar-dogs{width:320px}.calc-grid,.split,.contact-grid{grid-template-columns:1fr}.raw-panel{clip-path:none}.benefit-grid,.faq-grid{grid-template-columns:repeat(2,1fr)}.plan-grid,.trust-row{grid-template-columns:1fr}.cta-group{grid-template-columns:1fr}.footer-inner{grid-template-columns:1fr;text-align:center}.grid{grid-template-columns:1fr}.nav{height:70px}.brand img{width:130px}}@media(max-width:560px){.borrar h1{font-size:38px}.calc-panel{padding:18px}.benefit-grid,.faq-grid{grid-template-columns:1fr}.borrar-actions{display:grid}.section-head h2{font-size:26px}}

/* =========================================================
   HERO LYCAN - AJUSTE FINAL RESPONSIVE
   Objetivo:
   - Negro como triángulo derecho, sin invadir demasiado.
   - El triángulo llega abajo hasta aproximadamente la mitad del círculo verde.
   - Círculo verde debajo de perros/logo.
   - Compatible desktop, tablet y móvil.
========================================================= */

.hero{
    position:relative !important;
    overflow:hidden !important;
    min-height:720px !important;
    background:#ffffff !important;
}

/* Triángulo negro derecho */
.hero::after{
    content:"" !important;
    position:absolute !important;
    z-index:2 !important;

    top:0 !important;
    right:0 !important;
    bottom:0 !important;

    /*
      36vw permite que el negro llegue al borde derecho
      y en la parte inferior alcance cerca de la mitad del círculo verde.
    */
    width:36vw !important;

    background:#050b0c !important;

    /*
      Punto 0 100% = el triángulo entra abajo.
      Punto 58% 0 = corte diagonal superior elegante.
    */
    clip-path:polygon(
        58% 0,
        100% 0,
        100% 100%,
        0 100%
    ) !important;

    pointer-events:none !important;
}

/* Apagamos cualquier círculo global anterior */
.hero::before{
    content:none !important;
    display:none !important;
}

/* Contenido principal */
.hero-inner{
    position:relative !important;
    z-index:2 !important;

    max-width:1240px !important;
    margin:0 auto !important;
    padding:86px 28px 150px !important;

    display:grid !important;
    grid-template-columns:1.05fr .95fr !important;
    gap:40px !important;
    align-items:center !important;
}

/* Bloque visual */
.hero-media{
    position:relative !important;
    z-index:2 !important;

    min-height:520px !important;

    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;

    overflow:visible !important;
    isolation:isolate !important;
}

/* No crear negro dentro del bloque visual */
.hero-media::before{
    content:none !important;
    display:none !important;
}

/* Círculo verde debajo de perros/logo */
.hero-media::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    z-index:1 !important;

    /*
      Ubicación desktop:
      left negativo lo centra bajo los perros.
      bottom -120px lo deja alineado visualmente con la línea superior del formulario.
    */
    left:-7% !important;
    bottom:-120px !important;

    width:520px !important;
    height:520px !important;
    border-radius:50% !important;

    background:
        radial-gradient(
            circle at 42% 34%,
            #13beb2 0%,
            #09a89d 52%,
            #008c82 100%
        ) !important;

    pointer-events:none !important;
}

/* Evita duplicar el lobo cuando la imagen principal ya lo trae */
.hero-media .wolf-mark,
.wolf-mark{
    display:none !important;
}

/* Imagen perros + logo */
.hero-dogs{
    position:relative !important;
    z-index:3 !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    display:block !important;

    width:min(590px,112%) !important;
    max-width:none !important;
    height:auto !important;

    margin:0 auto -18px !important;

    object-fit:contain !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    filter:drop-shadow(0 26px 34px rgba(0,0,0,.18)) !important;
}

.calculator-shell{
    position:relative !important;
    z-index:5 !important;
    max-width:1180px !important;
    margin:-108px auto 0 !important;
    padding:0 28px !important;
}

/* ===================== TABLET ===================== */
@media(max-width:980px){
    .hero{
        min-height:auto !important;
    }

    .hero::after{
        width:38vw !important;
        clip-path:polygon(
            62% 0,
            100% 0,
            100% 100%,
            0 100%
        ) !important;
    }

    .hero-inner{
        grid-template-columns:1fr !important;
        padding:54px 28px 110px !important;
    }

    .hero-media{
        min-height:390px !important;
        margin-top:20px !important;
        order:-1 !important;
    }

    .hero-media::after{
        left:25% !important;
        bottom:-90px !important;
        width:390px !important;
        height:390px !important;
    }

    .hero-dogs{
        width:min(440px,105%) !important;
        margin-bottom:-8px !important;
    }

    .calculator-shell{
        margin-top:-60px !important;
    }
}

/* ===================== MÓVIL ===================== */
@media(max-width:560px){
    .hero::after{
        width:42vw !important;
        clip-path:polygon(
            68% 0,
            100% 0,
            100% 100%,
            0 100%
        ) !important;
    }

    .hero-inner{
        padding:42px 22px 90px !important;
    }

    .hero h1{
        font-size:38px !important;
    }

    .hero-media{
        min-height:320px !important;
    }

    .hero-media::after{
        left:22% !important;
        bottom:-65px !important;
        width:280px !important;
        height:280px !important;
    }

    .hero-dogs{
        width:360px !important;
        margin-bottom:0 !important;
    }

    .calculator-shell{
        margin-top:-35px !important;
    }
}

/* =========================================================
   CTA TRANSFORMACIÓN - RESTAURADO
========================================================= */

.cta-transform{
    position:relative;
    overflow:hidden;
    min-height:300px;
    display:grid;
    grid-template-columns:34% 40% 26%;
    align-items:center;
    gap:20px;
    padding:0 70px;
    color:#fff;
    background:linear-gradient(135deg,#00aa9c 0%,#009586 100%);
}

.cta-transform::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 48% 100%,rgba(255,255,255,.16),transparent 38%),
        linear-gradient(90deg,rgba(0,0,0,.10),transparent 45%,rgba(0,0,0,.12));
    pointer-events:none;
}

.cta-left,
.cta-features,
.cta-dogs{
    position:relative;
    z-index:2;
}

.cta-left h2{
    margin:0 0 18px;
    font-size:29px;
    line-height:1.12;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:-.03em;
    color:#fff;
}

.cta-left p{
    margin:0 0 22px;
    max-width:430px;
    color:#fff;
    font-size:14px;
    line-height:1.55;
}

.cta-left .btn,
.cta-left .btn-primary{
    background:#061111;
    color:#fff;
    box-shadow:none;
    border:0;
}

.cta-dogs{
    align-self:end;
    justify-self:center;
    width:610px;
    max-width:115%;
    margin-bottom:0;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 18px 24px rgba(0,0,0,.22));
}

.cta-features{
    display:grid;
    gap:19px;
}

.cta-features > div{
    display:grid;
    grid-template-columns:56px 1fr;
    gap:14px;
    align-items:center;
}

.cta-features i{
    width:48px;
    height:48px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,.75);
    display:grid;
    place-items:center;
    color:#fff;
    font-style:normal;
    font-size:20px;
}

.cta-features p{
    margin:0;
    color:#fff;
    font-size:12px;
    line-height:1.25;
}

.cta-features b{
    display:block;
    margin-bottom:2px;
    color:#fff;
    text-transform:uppercase;
    font-size:13px;
    font-weight:900;
}

/* FAQ restaurado */
.faq{
    background:#fff;
    padding:28px 60px 44px;
    text-align:center;
}

.faq h2{
    margin:0;
    font-size:32px;
    line-height:1.05;
    font-weight:900;
    letter-spacing:-.03em;
}

.faq h2 span{
    color:var(--teal);
    font-size:26px;
}

.faq-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:0;
    margin-top:27px;
    text-align:left;
}

.faq-grid article{
    position:relative;
    min-height:185px;
    padding:0 23px 50px;
    border-right:1px solid #d8dddd;
}

.faq-grid article:last-child{
    border-right:0;
}

.faq-grid strong{
    position:absolute;
    left:0;
    top:0;
    width:42px;
    height:42px;
    border-radius:50%;
    background:var(--teal);
    color:#fff;
    display:grid;
    place-items:center;
    font-size:24px;
    font-weight:900;
}

.faq-grid h3{
    font-size:13px;
    line-height:1.25;
    margin:2px 0 18px 52px;
    font-weight:900;
}

.faq-grid p{
    font-size:12px;
    line-height:1.55;
    margin:0;
    color:#172026;
}

.faq-grid i{
    position:absolute;
    bottom:2px;
    left:50%;
    transform:translateX(-50%);
    font-style:normal;
    color:var(--teal);
    font-size:46px;
}

@media(max-width:980px){
    .cta-transform{
        grid-template-columns:1fr;
        text-align:center;
        padding:46px 28px 0;
        gap:22px;
    }

    .cta-left p{
        margin-left:auto;
        margin-right:auto;
    }

    .cta-dogs{
        width:min(520px,100%);
        max-width:100%;
        order:2;
    }

    .cta-features{
        order:3;
        grid-template-columns:repeat(2,1fr);
        text-align:left;
        padding-bottom:34px;
    }

    .faq{
        padding:34px 24px;
    }

    .faq-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .faq-grid article{
        border-right:0;
        border-bottom:1px solid #d8dddd;
        min-height:auto;
        padding-bottom:60px;
    }
}

@media(max-width:560px){
    .cta-transform{
        padding:38px 22px 0;
    }

    .cta-left h2{
        font-size:24px;
    }

    .cta-features{
        grid-template-columns:1fr;
    }

    .cta-features > div{
        grid-template-columns:48px 1fr;
    }

    .cta-features i{
        width:42px;
        height:42px;
    }

    .faq h2{
        font-size:26px;
    }

    .faq h2 span{
        font-size:21px;
    }
}

/* =========================================================
   FIX CAPAS HERO - NEGRO SOBRE VERDE, PERROS/LOGO ENCIMA
   Motivo del error:
   .hero::after tenía z-index igual/superior al contenido y se pintaba
   sobre la imagen hero_dogs, por eso tapaba el logo del lobo.
========================================================= */

.hero{
    position:relative !important;
    overflow:hidden !important;
    min-height:720px !important;
    background:#ffffff !important;
}

/* Círculo verde como capa global del hero */
.hero::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    z-index:1 !important;

    left:48% !important;
    bottom:-120px !important;

    width:520px !important;
    height:520px !important;
    border-radius:50% !important;

    background:
        radial-gradient(
            circle at 42% 34%,
            #13beb2 0%,
            #09a89d 52%,
            #008c82 100%
        ) !important;

    pointer-events:none !important;
}

/* Triángulo negro encima del verde, pero debajo de perros/logo */
.hero::after{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    z-index:2 !important;

    top:0 !important;
    right:0 !important;
    bottom:108px !important;

    width:36vw !important;

    background:#050b0c !important;

    clip-path:polygon(
        58% 0,
        100% 0,
        100% 100%,
        0 100%
    ) !important;

    pointer-events:none !important;
}

/* Todo el contenido, incluida la imagen con el logo, debe quedar arriba del negro */
.hero-inner{
    position:relative !important;
    z-index:3 !important;

    max-width:1240px !important;
    margin:0 auto !important;
    padding:86px 28px 150px !important;

    display:grid !important;
    grid-template-columns:1.05fr .95fr !important;
    gap:40px !important;
    align-items:center !important;
}

.hero-media{
    position:relative !important;
    z-index:3 !important;

    min-height:520px !important;

    display:flex !important;
    align-items:flex-end !important;
    justify-content:center !important;

    overflow:visible !important;
    isolation:auto !important;
}

/* Se apaga el círculo anterior dentro de hero-media para evitar capas cruzadas */
.hero-media::before,
.hero-media::after{
    content:none !important;
    display:none !important;
}

/* Evita duplicar el lobo si la imagen principal ya lo incluye */
.hero-media .wolf-mark,
.wolf-mark{
    display:none !important;
}

.hero-dogs{
    position:relative !important;
    z-index:4 !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    display:block !important;

    width:min(590px,112%) !important;
    max-width:none !important;
    height:auto !important;

    margin:0 auto -18px !important;

    object-fit:contain !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;

    filter:drop-shadow(0 26px 34px rgba(0,0,0,.18)) !important;
}

.calculator-shell{
    position:relative !important;
    z-index:5 !important;
    max-width:1180px !important;
    margin:-108px auto 0 !important;
    padding:0 28px !important;
}

/* ===================== TABLET ===================== */
@media(max-width:980px){
    .hero{
        min-height:auto !important;
    }

    .hero::before{
        left:46% !important;
        bottom:-90px !important;
        width:390px !important;
        height:390px !important;
    }

    .hero::after{
        width:38vw !important;
        clip-path:polygon(
            62% 0,
            100% 0,
            100% 100%,
            0 100%
        ) !important;
    }

    .hero-inner{
        grid-template-columns:1fr !important;
        padding:54px 28px 110px !important;
    }

    .hero-media{
        min-height:390px !important;
        margin-top:20px !important;
        order:-1 !important;
    }

    .hero-dogs{
        width:min(440px,105%) !important;
        margin-bottom:-8px !important;
    }

    .calculator-shell{
        margin-top:-60px !important;
    }
}

/* ===================== MÓVIL ===================== */

@media(max-width:560px){

    .hero{
        min-height:auto !important;
        overflow:hidden !important;
        background:#fff !important;
    }

    .hero-inner{
        display:flex !important;
        flex-direction:column !important;
        padding:30px 22px 80px !important;
        gap:24px !important;
    }

    .hero-media{
        order:0 !important;
        width:100% !important;
        min-height:280px !important;
        margin:0 !important;
        display:flex !important;
        justify-content:center !important;
        align-items:flex-end !important;
        overflow:visible !important;
    }

    .hero-content{
        order:1 !important;
        position:relative !important;
        z-index:5 !important;
    }

    .hero::after{
        top:0 !important;
        right:0 !important;
        bottom:auto !important;

        width:34vw !important;
        height:260px !important;

        background:#050b0c !important;

        clip-path:polygon(
            55% 0,
            100% 0,
            100% 100%,
            0 100%
        ) !important;

        z-index:1 !important;
    }

    .hero::before{
        left:32% !important;
        bottom:40px !important;

        width:260px !important;
        height:260px !important;

        z-index:1 !important;
    }

    .hero-dogs{
        width:330px !important;
        max-width:100% !important;
        margin:0 auto !important;
        position:relative !important;
        z-index:4 !important;
    }

    .hero h1{
        font-size:34px !important;
        line-height:1.08 !important;
    }

    .hero p{
        font-size:15px !important;
        line-height:1.6 !important;
    }

    .hero-actions{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    .calculator-shell{
        margin-top:-35px !important;
    }
}


/* =========================================================
   FIX RESPONSIVE HERO - TABLET Y MÓVIL
   Ajusta el triángulo negro y el círculo verde para que:
   - el negro no tape el logo
   - el negro no baje más que el formulario
   - el círculo verde quede debajo de los perros
   - el diseño se mantenga proporcionado en tablet y móvil
========================================================= */

/* TABLET / PANTALLAS MEDIANAS */
@media (max-width: 980px){

    .hero{
        min-height:auto !important;
        overflow:hidden !important;
    }

    .hero-inner{
        grid-template-columns:1fr !important;
        padding:54px 28px 105px !important;
    }

    .hero-media{
        min-height:400px !important;
        margin-top:18px !important;
        order:-1 !important;
        overflow:visible !important;
    }

    /* Círculo verde debajo de perros/logo */
    .hero::before{
        left:43% !important;
        bottom:-85px !important;

        width:410px !important;
        height:410px !important;

        z-index:1 !important;
    }

    /* Triángulo negro más corto y sin tapar logo */
    .hero::after{
        top:0 !important;
        right:0 !important;
        bottom:85px !important;

        width:34vw !important;

        z-index:2 !important;

        clip-path:polygon(
            64% 0,
            100% 0,
            100% 100%,
            10% 100%
        ) !important;
    }

    .hero-dogs{
        width:min(455px, 105%) !important;
        margin-bottom:-6px !important;
        z-index:4 !important;
    }

    .calculator-shell{
        margin-top:-58px !important;
    }
}

/* TABLET PEQUEÑA */
@media (max-width: 768px){

    .hero-inner{
        padding:48px 24px 96px !important;
    }

    .hero-media{
        min-height:365px !important;
    }

    .hero::before{
        left:40% !important;
        bottom:-70px !important;

        width:360px !important;
        height:360px !important;
    }

    .hero::after{
        bottom:78px !important;
        width:32vw !important;

        clip-path:polygon(
            70% 0,
            100% 0,
            100% 100%,
            18% 100%
        ) !important;
    }

    .hero-dogs{
        width:min(410px, 104%) !important;
        margin-bottom:-4px !important;
    }

    .calculator-shell{
        margin-top:-48px !important;
    }
}

/* MÓVIL */
@media (max-width: 560px){

    .hero-inner{
        padding:40px 20px 86px !important;
    }

    .hero-media{
        min-height:315px !important;
    }

    /* Círculo más pequeño y centrado bajo los perros */
    .hero::before{
        left:36% !important;
        bottom:-56px !important;

        width:285px !important;
        height:285px !important;

        z-index:1 !important;
    }

    /* Triángulo más delgado para que no invada el logo */
    .hero::after{
        top:0 !important;
        right:0 !important;
        bottom:70px !important;

        width:30vw !important;

        z-index:2 !important;

        clip-path:polygon(
            76% 0,
            100% 0,
            100% 100%,
            28% 100%
        ) !important;
    }

    .hero-dogs{
        width:min(345px, 106%) !important;
        margin-bottom:0 !important;
        z-index:4 !important;
    }

    .calculator-shell{
        margin-top:-34px !important;
    }
}

/* MÓVIL MUY PEQUEÑO */
@media (max-width: 390px){

    .hero-media{
        min-height:295px !important;
    }

    .hero::before{
        left:34% !important;
        bottom:-48px !important;

        width:250px !important;
        height:250px !important;
    }

    .hero::after{
        bottom:62px !important;
        width:28vw !important;

        clip-path:polygon(
            80% 0,
            100% 0,
            100% 100%,
            35% 100%
        ) !important;
    }

    .hero-dogs{
        width:320px !important;
    }
}