:root{
    --navy:#233155;
    --navy-deep:#1a2742;
    --red:#e6352f;
    --red-dark:#c72822;
    --white:#ffffff;
    --paper:#f6f7f9;
    --mist:#eef1f5;
    --line:#e3e7ee;
    --gray:#6b7385;
    --shadow:0 24px 60px -28px rgba(26,39,66,.45);
    --radius:22px;
  }

  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:"DM Sans",system-ui,sans-serif;
    color:var(--navy);
    background:var(--white);
    -webkit-font-smoothing:antialiased;
    line-height:1.6;
  }
  a{color:inherit;text-decoration:none;}
  img{display:block;max-width:100%;}

  /* ---------- Top utility strip ---------- */
  .topbar{
    background:var(--navy);
    color:rgba(255,255,255,.9);
    font-size:.82rem;
    letter-spacing:.02em;
  }
  .topbar .wrap{
    max-width:1180px;margin:0 auto;padding:.6rem 24px;
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
  }
  .topbar .left{display:flex;align-items:center;gap:.5rem;}
  .topbar .dot{width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;}
  .topbar a.tline{display:flex;align-items:center;gap:.45rem;color:#fff;font-weight:500;}
  .topbar a.tline:hover{color:#fff;opacity:.85;}
  .topbar .hide-sm{display:flex;}

  /* ---------- Header / nav ---------- */
  header.nav{
    position:sticky;top:0;z-index:50;
    background:rgba(255,255,255,.88);
    backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav .wrap{
    max-width:1180px;margin:0 auto;padding:.85rem 24px;
    display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  }
  .brand{display:flex;align-items:center;gap:.7rem;}
  .brand .mark{width:42px;height:42px;flex:none;}
  .brand .name{
    font-family:"Fraunces",serif;font-weight:600;
    font-size:1.35rem;line-height:1;color:var(--navy);letter-spacing:.005em;
  }
  .brand .sub{
    font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
    color:var(--gray);font-weight:600;margin-top:.28rem;
  }

  .menu{display:flex;align-items:center;gap:2rem;}
  .menu nav{display:flex;gap:1.7rem;}
  .menu nav a{
    font-size:.95rem;font-weight:500;color:var(--navy);position:relative;padding:.2rem 0;
  }
  .menu nav a::after{
    content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;
    background:var(--red);transition:width .25s ease;
  }
  .menu nav a:hover::after{width:100%;}

  .btn{
    display:inline-flex;align-items:center;gap:.55rem;
    font-weight:600;font-size:.95rem;border-radius:999px;
    padding:.72rem 1.3rem;cursor:pointer;border:none;transition:transform .15s ease,background .2s ease,box-shadow .2s ease;
  }
  .btn-wa{background:#00cf4b;color:#fff;box-shadow:0 10px 24px -10px rgba(0,30,11,.7);}
  .btn-wa:hover{background:#00a03a;transform:translateY(-1px);}
  .btn-ghost{background:transparent;color:var(--navy);border:1.5px solid var(--line);}
  .btn-ghost:hover{border-color:var(--navy);transform:translateY(-1px);}
  .btn svg{width:18px;height:18px;flex:none;}

  .hamburger{display:none;background:none;border:none;cursor:pointer;padding:.4rem;color:var(--navy);}
  .hamburger svg{width:28px;height:28px;}

  /* ---------- Hero ---------- */
  .hero{
    position:relative;overflow:hidden;background:var(--white);
  }
  .hero::before{ /* faint mist field behind everything */
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(1100px 520px at 88% -10%, var(--mist), transparent 60%),
      radial-gradient(700px 500px at -5% 110%, var(--paper), transparent 55%);
    z-index:0;
  }
  .hero .wrap{
    position:relative;z-index:1;
    max-width:1180px;margin:0 auto;padding:clamp(2.6rem,6vw,5.5rem) 24px clamp(3rem,6vw,5.5rem);
    display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;
  }

  .eyebrow{
    display:inline-flex;align-items:center;gap:.6rem;
    font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
    font-weight:600;color:var(--red);margin-bottom:1.3rem;
  }
  .eyebrow .bar{width:30px;height:2px;background:var(--red);}

  .hero h1{
    font-family:"Fraunces",serif;font-weight:500;
    font-size:clamp(2.4rem,5.2vw,4.05rem);
    line-height:1.04;letter-spacing:-.01em;color:var(--navy);
    margin-bottom:1.4rem;
  }
  .hero h1 .accent{position:relative;white-space:nowrap;color:var(--navy);}
  .hero h1 .accent svg{
    position:absolute;left:0;right:0;bottom:-.34em;width:100%;height:.42em;overflow:visible;
  }
  .hero h1 .accent path{
    fill:none;stroke:var(--red);stroke-width:7;stroke-linecap:round;
    stroke-dasharray:520;stroke-dashoffset:520;
    animation:draw 1.1s .35s ease forwards;
  }
  @keyframes draw{to{stroke-dashoffset:0;}}

  .hero p.lead{
    font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--gray);
    max-width:34rem;margin-bottom:2.1rem;
  }
  .cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.2rem;}

  .chips{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:center;}
  .chip{display:flex;align-items:center;gap:.5rem;font-size:.9rem;color:var(--navy);font-weight:500;}
  .chip svg{width:18px;height:18px;color:var(--red);flex:none;}

  /* ---- Hero image composition ---- */
  .figure{position:relative;justify-self:center;width:100%;max-width:440px;}
  .figure .panel{
    position:absolute;inset:auto 0 0 auto;width:86%;height:88%;
    background:var(--navy);border-radius:var(--radius) var(--radius) calc(var(--radius)*3) var(--radius);
    right:-8%;bottom:-7%;z-index:0;
  }
  .figure .photo{
    position:relative;z-index:2;border-radius:var(--radius);
    overflow:hidden;box-shadow:var(--shadow);background:var(--mist);
  }
  .figure .photo img{width:100%;height:clamp(360px,46vw,520px);object-fit:cover;object-position:center top;}

  /* red smile arc beside the photo */
  .figure .arc{position:absolute;z-index:3;left:-26px;top:18%;width:70px;height:140px;overflow:visible;}
  .figure .arc path{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;}

  /* floating badge */
  .badge{
    position:absolute;z-index:4;left:-6%;bottom:9%;
    background:#fff;border-radius:16px;padding:.8rem 1rem;
    box-shadow:var(--shadow);display:flex;align-items:center;gap:.7rem;
    border:1px solid var(--line);
  }
  .badge .ic{
    width:38px;height:38px;border-radius:11px;background:rgba(230,53,47,.1);
    display:flex;align-items:center;justify-content:center;color:var(--red);flex:none;
  }
  .badge .ic svg{width:20px;height:20px;}
  .badge b{font-size:.92rem;color:var(--navy);display:block;line-height:1.2;}
  .badge span{font-size:.78rem;color:var(--gray);}

  /* ---------- Mobile ---------- */
  .mobile-nav{
    display:none;border-top:1px solid var(--line);background:#fff;
    padding:1rem 24px 1.4rem;
  }
  .mobile-nav a{display:block;padding:.7rem 0;font-weight:500;border-bottom:1px solid var(--line);}
  .mobile-nav .btn-wa{margin-top:1rem;width:100%;justify-content:center;}
  .mobile-nav.open{display:block;}

.mapa-iframe{ width:534px; height:340px; }

  @media(max-width:900px){
    .mapa-iframe{ width:100%;}
    .hero .wrap{grid-template-columns:1fr;}
    .figure{order:-1;max-width:380px;margin-bottom:1rem;}
    .menu{display:none;}
    .hamburger{display:inline-flex;}
    .topbar .hide-sm{display:none;}
  }
  @media(max-width:520px){
    .topbar .left span.txt{display:none;}
    .cta-row .btn{flex:1;justify-content:center;}
    .figure .badge{left:0;}
  }

  /* ---------- Section heads ---------- */
  .sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem 3rem;margin-bottom:2.8rem;flex-wrap:wrap;}
  .sec-top .htext{max-width:34rem;}
  .sec-top .eyebrow{margin-bottom:1rem;}
  .sec-top h2{
    font-family:"Fraunces",serif;font-weight:500;
    font-size:clamp(1.95rem,3.8vw,2.85rem);line-height:1.08;letter-spacing:-.01em;color:var(--navy);
  }
  .sec-top p{color:var(--gray);max-width:30rem;font-size:1.02rem;}

  /* ---------- Services ---------- */
  .services{background:#fff;}
  .services .inner{max-width:1180px;margin:0 auto;padding:clamp(3.5rem,7vw,6rem) 24px;}
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
  .card{
    position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;
    padding:1.7rem 1.5rem;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  }
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent;}
  .card .ico{
    width:50px;height:50px;border-radius:14px;background:var(--mist);
    display:flex;align-items:center;justify-content:center;color:var(--navy);margin-bottom:1.15rem;
    transition:background .2s ease,color .2s ease;
  }
  .card:hover .ico{background:rgba(230,53,47,.1);color:var(--red);}
  .card .ico svg{width:25px;height:25px;}
  .card h3{font-size:1.06rem;font-weight:600;color:var(--navy);margin-bottom:.5rem;line-height:1.25;}
  .card p{font-size:.9rem;color:var(--gray);line-height:1.55;}

  .card.urg{background:var(--navy);border-color:var(--navy);}
  .card.urg h3{color:#fff;}
  .card.urg p{color:rgba(255,255,255,.82);}
  .card.urg .ico{background:var(--red);color:#fff;}
  .card.urg:hover .ico{background:#fff;color:var(--red);}
  .card.urg .wa{
    display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;color:#fff;
    font-weight:600;font-size:.85rem;border-bottom:2px solid var(--red);padding-bottom:3px;
  }
  .card.urg .wa svg{width:15px;height:15px;}

  /* ---------- About ---------- */
  .about{background:var(--paper);border-top:1px solid var(--line);}
  .about .inner{
    max-width:1180px;margin:0 auto;padding:clamp(3.5rem,7vw,6rem) 24px;
    display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2.2rem,5vw,4.5rem);align-items:center;
  }
  .figure2{position:relative;width:100%;max-width:460px;justify-self:center;}
  .figure2 .frame{position:absolute;left:-18px;top:-18px;width:55%;height:55%;border:2px solid var(--navy);border-radius:var(--radius);z-index:0;}
  .figure2 .ph{position:relative;z-index:1;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:var(--mist);}
  .figure2 .ph img{width:100%;height:clamp(330px,42vw,470px);object-fit:cover;}
  .figure2 .cred{
    position:absolute;z-index:2;right:-16px;bottom:26px;background:#fff;
    border-radius:15px;padding:.85rem 1.05rem;box-shadow:var(--shadow);border:1px solid var(--line);max-width:215px;
  }
  .figure2 .cred .nm{font-family:"Fraunces",serif;font-weight:600;color:var(--navy);font-size:1.02rem;line-height:1.1;}
  .figure2 .cred .rl{font-size:.78rem;color:var(--gray);margin-top:.25rem;}
  .figure2 .cred .cro{font-size:.74rem;color:var(--red);font-weight:600;margin-top:.45rem;letter-spacing:.04em;}

  .about h2{
    font-family:"Fraunces",serif;font-weight:500;
    font-size:clamp(1.85rem,3.4vw,2.6rem);line-height:1.1;letter-spacing:-.01em;color:var(--navy);margin-bottom:1.2rem;
  }
  .about .lead2{color:var(--gray);font-size:1.04rem;margin-bottom:1.7rem;}
  ul.diff{list-style:none;display:grid;gap:1.05rem;margin-bottom:2rem;}
  ul.diff li{display:flex;gap:.85rem;align-items:flex-start;}
  ul.diff li .ck{width:28px;height:28px;border-radius:9px;background:rgba(230,53,47,.1);color:var(--red);display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px;}
  ul.diff li .ck svg{width:16px;height:16px;}
  ul.diff li b{color:var(--navy);font-weight:600;display:block;}
  ul.diff li .dd{color:var(--gray);font-size:.93rem;}

  @media(max-width:860px){.grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:900px){
    .about .inner{grid-template-columns:1fr;}
    .figure2{order:-1;margin-bottom:1.5rem;}
  }
  @media(max-width:560px){.grid{grid-template-columns:1fr;}}

  /* ---------- Testimonials ---------- */
  .testi{background:#fff;}
  .testi .inner{max-width:1180px;margin:0 auto;padding:clamp(3.5rem,7vw,6rem) 24px;}
  .head-c{text-align:center;max-width:38rem;margin:0 auto 2.8rem;}
  .head-c .eyebrow{justify-content:center;}
  .head-c h2{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(1.95rem,3.8vw,2.85rem);line-height:1.08;color:var(--navy);}
  .t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
  .t-card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:1.8rem 1.6rem;display:flex;flex-direction:column;}
  .t-card .q{color:var(--red);font-family:"Fraunces",serif;font-size:3rem;line-height:.5;height:1.4rem;}
  .t-card .body{color:var(--navy);font-size:.98rem;line-height:1.6;flex:1;}
  .t-card .who{display:flex;align-items:center;gap:.75rem;margin-top:1.4rem;}
  .t-card .av{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.88rem;flex:none;letter-spacing:.02em;}
  .t-card .who b{display:block;color:var(--navy);font-size:.92rem;}
  .t-card .who span{color:var(--gray);font-size:.8rem;}

  /* ---------- CTA band ---------- */
  .ctaband{background:var(--navy);position:relative;overflow:hidden;}
  .ctaband .arcbg{position:absolute;right:-60px;top:-40px;width:340px;height:340px;opacity:.5;z-index:0;}
  .ctaband .arcbg path{fill:none;stroke:var(--red);stroke-width:8;stroke-linecap:round;}
  .ctaband .inner{
    position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:clamp(3rem,6vw,5rem) 24px;
    display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;
  }
  .ctaband h2{font-family:"Fraunces",serif;font-weight:500;color:#fff;font-size:clamp(1.9rem,3.8vw,2.8rem);line-height:1.1;max-width:18ch;}
  .ctaband p{color:rgba(255,255,255,.8);margin-top:.8rem;max-width:32rem;font-size:1.04rem;}
  .ctaband .acts{display:flex;flex-direction:column;gap:.8rem;align-items:stretch;}
  .ctaband .acts .btn-wa{font-size:1.04rem;padding:.95rem 1.7rem;justify-content:center;}
  .ctaband .phone{color:rgba(255,255,255,.85);font-weight:500;text-align:center;font-size:.9rem;}

  /* ---------- Contact ---------- */
  .contact{background:var(--paper);border-top:1px solid var(--line);}
  .contact .inner{
    max-width:1180px;margin:0 auto;padding:clamp(3.5rem,7vw,6rem) 24px;
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start;
  }
  .cinfo h2{font-family:"Fraunces",serif;font-weight:500;font-size:clamp(1.85rem,3.4vw,2.6rem);line-height:1.1;color:var(--navy);margin-bottom:.8rem;}
  .cinfo .ld{color:var(--gray);font-size:1.02rem;max-width:28rem;}
  .cinfo ul{list-style:none;display:grid;gap:1.25rem;margin-top:1.9rem;}
  .cinfo li{display:flex;gap:.9rem;align-items:flex-start;}
  .cinfo li .ic{width:44px;height:44px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--red);display:flex;align-items:center;justify-content:center;flex:none;}
  .cinfo li .ic svg{width:20px;height:20px;}
  .cinfo li b{display:block;color:var(--navy);font-size:.95rem;margin-bottom:.15rem;}
  .cinfo li .tx{color:var(--gray);font-size:.93rem;line-height:1.5;}
  .cinfo li a.tx:hover{color:var(--red);}

  .cmap .map{
    position:relative;height:clamp(340px,44vw,100%);min-height:340px;border-radius:var(--radius);
    overflow:hidden;border:1px solid var(--line);
    background:
      linear-gradient(var(--line) 1px,transparent 1px) 0 0/44px 44px,
      linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/44px 44px,
      var(--mist);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;text-align:center;padding:1.5rem;
  }
  .cmap .map .pin{width:54px;height:54px;border-radius:50%;background:var(--red);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 14px 30px -10px rgba(230,53,47,.7);}
  .cmap .map .pin svg{width:26px;height:26px;}
  .cmap .map .note{color:var(--gray);font-size:.85rem;max-width:18rem;}

  /* ---------- Footer ---------- */
  footer{background:var(--navy-deep);color:rgba(255,255,255,.7);}
  footer .inner{max-width:1180px;margin:0 auto;padding:clamp(3rem,6vw,4.5rem) 24px 2.2rem;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;}
  footer .fbrand .name{color:#fff;}
  footer .fbrand .sub{color:rgba(255,255,255,.5);}
  footer .fbrand .mark circle{fill:#2c3c66;}
  footer .ftag{margin-top:1.1rem;font-size:.93rem;max-width:24rem;line-height:1.6;}
  footer .social{display:flex;gap:.6rem;margin-top:1.3rem;}
  footer .social a{width:40px;height:40px;border-radius:11px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s ease;}
  footer .social a:hover{background:var(--red);}
  footer .social a svg{width:19px;height:19px;}
  footer .fcol h4{color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem;font-weight:600;}
  footer .fcol a{display:block;padding:.34rem 0;color:rgba(255,255,255,.68);font-size:.93rem;}
  footer .fcol a:hover{color:#fff;}
  .fbottom{border-top:1px solid rgba(255,255,255,.12);}
  .fbottom .wrapb{max-width:1180px;margin:0 auto;padding:1.4rem 24px;display:flex;justify-content:space-between;gap:.6rem 1.5rem;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.5);}

  @media(max-width:860px){.t-grid{grid-template-columns:1fr;}}
  @media(max-width:760px){footer .inner{grid-template-columns:1fr 1fr;} footer .fbrand{grid-column:1 / -1;}}
  @media(max-width:560px){.contact .inner{grid-template-columns:1fr;} .ctaband .acts{width:100%;}}

  @media(prefers-reduced-motion:reduce){
    .hero h1 .accent path{animation:none;stroke-dashoffset:0;}
    *{scroll-behavior:auto;}
  }

  /* ---------- Mapa incorporado (Google Maps) ---------- */
  .cmap .map-embed,
  .cmap .map-embed iframe{width:100%;height:100%;min-height:340px;border:0;border-radius:var(--radius);display:block;}