/* =========================================================
   Barnat Lawn Solutions — hoja de estilo (mobile first)
   ========================================================= */

:root{
  --verde-900:#0c2f1b;
  --verde-800:#14532d;
  --verde-700:#1b6b3a;
  --verde-600:#248c4b;
  --lima:#7ed957;
  --lima-2:#a7e86b;
  --naranja:#f5a623;
  --agua:#2aa5a5;
  --crema:#f6f8f3;
  --tinta:#12211a;
  --gris:#5d6b62;
  --linea:rgba(18,33,26,.10);
  --radio:18px;
  --sombra:0 10px 30px rgba(12,47,27,.10);
  --sombra-lg:0 24px 60px rgba(12,47,27,.18);
  --max:1120px;
  --dock:74px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--tinta);
  background:var(--crema);
  line-height:1.6;
  overflow-x:hidden;
  padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom));
}
@media (min-width:860px){ body{padding-bottom:0} }

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{line-height:1.12;margin:0 0 .5em;letter-spacing:-.02em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:10px 16px;border-radius:10px}
:focus-visible{outline:3px solid var(--lima);outline-offset:2px;border-radius:6px}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} }

/* =========================================================
   HEADER
   ========================================================= */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:50;
  background:transparent;transition:background .35s ease,box-shadow .35s ease,backdrop-filter .35s;
}
.hdr.solid{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);box-shadow:0 6px 24px rgba(12,47,27,.10)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:14px;height:70px}

.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand__logo{width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.16);transition:transform .4s}
.brand:hover .brand__logo{transform:rotate(-8deg) scale(1.06)}
.brand__txt{display:flex;flex-direction:column;line-height:1.05;color:#fff;transition:color .3s}
.brand__txt strong{font-size:1.08rem;letter-spacing:-.01em}
.brand__txt small{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.hdr.solid .brand__txt{color:var(--verde-800)}

.nav{display:none}
@media (min-width:860px){
  .nav{display:flex;align-items:center;gap:26px}
  .nav a{font-size:.94rem;font-weight:600;color:#fff;opacity:.92;position:relative;padding:4px 0}
  .hdr.solid .nav a{color:var(--verde-900)}
  .nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--lima);transition:width .3s}
  .nav a:hover::after{width:100%}
  .nav__call{background:var(--lima);color:var(--verde-900)!important;padding:10px 18px!important;border-radius:999px;font-weight:800}
  .nav__call::after{display:none}
  .nav__call:hover{filter:brightness(1.06)}
}

.burger{display:grid;place-content:center;gap:5px;width:46px;height:46px;border:0;border-radius:12px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);cursor:pointer}
.hdr.solid .burger{background:rgba(20,83,45,.10)}
.burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
.hdr.solid .burger span{background:var(--verde-800)}
@media (min-width:860px){ .burger{display:none} }

/* menú móvil */
body.menu-open{overflow:hidden}
@media (max-width:859px){
  /* El panel vive siempre en el DOM (no se usa display:none) para poder
     animar TANTO al abrir como al cerrar. Solo se animan opacity y
     transform, que la GPU compone sin repintar la página: sin tirones. */
  .nav{
    display:flex;flex-direction:column;gap:0;
    position:fixed;inset:0;z-index:90;   /* cubre header, dock y todo lo demás */
    background:
      radial-gradient(120% 60% at 90% 0%,rgba(126,217,87,.16),transparent 60%),
      linear-gradient(165deg,#0c2f1b 0%,#14532d 58%,#0f3d22 100%);
    padding:0 22px calc(26px + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
    /* cerrado */
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-14px);
    transition:opacity .24s ease,transform .3s cubic-bezier(.2,.7,.3,1),visibility .3s;
  }
  .nav.open{
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
  }

  /* barra propia del panel: el botón de cerrar vive AQUÍ dentro,
     así nunca puede quedar tapado por el panel ni por el header */
  .nav__top{
    display:flex;align-items:center;gap:11px;
    height:70px;flex:0 0 70px;margin-inline:-22px;padding-inline:22px;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .nav__top img{width:42px;height:42px;border-radius:50%;background:#fff}
  .nav__brand{display:flex;flex-direction:column;line-height:1.05;color:#fff;margin-right:auto}
  .nav__brand strong{font-size:1.05rem}
  .nav__brand small{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
  .nav__x{
    width:46px;height:46px;flex:0 0 46px;display:grid;place-items:center;
    border:0;border-radius:13px;background:rgba(255,255,255,.14);cursor:pointer;
    -webkit-tap-highlight-color:transparent;transition:background .2s,transform .2s;
  }
  .nav__x svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
  .nav__x:active{transform:scale(.92);background:rgba(255,255,255,.24)}

  /* los enlaces entran escalonados; al cerrar salen todos a la vez
     (el retraso solo existe en .open, así el cierre es limpio y rápido) */
  .nav a{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    color:#fff;font-size:1.16rem;font-weight:700;
    padding:17px 2px;border-bottom:1px solid rgba(255,255,255,.10);
    opacity:0;transform:translateX(-14px);
    transition:opacity .28s ease,transform .34s cubic-bezier(.2,.7,.3,1),color .2s;
  }
  .nav.open a{opacity:1;transform:none}
  .nav a::after{content:"›";color:var(--lima);font-size:1.6rem;line-height:1;opacity:.65;transition:transform .25s}
  .nav a:active{color:var(--lima)}
  .nav a:active::after{transform:translateX(4px)}
  .nav.open a:nth-of-type(1){transition-delay:.05s}
  .nav.open a:nth-of-type(2){transition-delay:.09s}
  .nav.open a:nth-of-type(3){transition-delay:.13s}
  .nav.open a:nth-of-type(4){transition-delay:.17s}
  .nav.open a:nth-of-type(5){transition-delay:.21s}
  .nav.open a:nth-of-type(6){transition-delay:.25s}
  .nav.open a:nth-of-type(7){transition-delay:.29s}

  /* bloque de contacto al fondo del panel */
  .nav .nav__call{
    margin-top:auto;justify-content:center;border-bottom:0;
    background:var(--lima);color:var(--verde-900);
    border-radius:999px;padding:17px 20px;font-size:1.08rem;font-weight:800;
    box-shadow:0 10px 26px rgba(0,0,0,.28);
  }
  .nav .nav__call::after{content:"";display:none}
  .nav__mail{
    justify-content:center!important;border-bottom:0!important;
    font-size:.9rem!important;font-weight:600!important;
    color:rgba(255,255,255,.7)!important;padding:14px 0 4px!important;
    word-break:break-word;
  }
  .nav__mail::after{content:""!important;display:none}

  /* la barra superior del panel también entra suave */
  .nav__top{opacity:0;transform:translateY(-8px);transition:opacity .26s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
  .nav.open .nav__top{opacity:1;transform:none}
}
@media (min-width:860px){ .nav__mail,.nav__top{display:none} }
@media (prefers-reduced-motion:reduce){
  .nav,.nav a,.nav__top{transition-duration:.001ms!important;transform:none!important}
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ------------------------------------------------------------------
   IMPORTANTE — en móvil el header NO puede llevar backdrop-filter.
   Un backdrop-filter distinto de "none" convierte al header en el bloque
   contenedor de sus hijos position:fixed, y eso aplastaría el panel del
   menú dentro de los 70px del header en vez de ocupar toda la pantalla.
   Se notaba solo al hacer scroll, que es cuando el header toma .solid.
   En escritorio no hay panel, así que allí el desenfoque se mantiene.
   ------------------------------------------------------------------ */
@media (max-width:859px){
  .hdr.solid{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:rgba(255,255,255,.97);
  }
  .burger{backdrop-filter:none}
}

.hdr__bar{height:3px;width:0;background:linear-gradient(90deg,var(--lima),var(--agua));transition:width .1s linear}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100svh;display:flex;align-items:center;
  padding:110px 0 130px;
  background:
    radial-gradient(120% 80% at 80% 0%,#1d7a44 0%,transparent 60%),
    linear-gradient(165deg,#0c2f1b 0%,#14532d 55%,#0f3d22 100%);
  color:#fff;
}
.hero__glow{
  position:absolute;width:70vmax;height:70vmax;right:-25vmax;top:-25vmax;z-index:-1;
  background:radial-gradient(circle,rgba(126,217,87,.28),transparent 62%);
  animation:float 14s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(-4vmax,4vmax)}}

.pill{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  padding:8px 16px;border-radius:999px;font-size:.7rem;font-weight:800;letter-spacing:.16em;
  backdrop-filter:blur(6px);margin-bottom:22px;
}
.pill__dot{width:8px;height:8px;border-radius:50%;background:var(--lima);box-shadow:0 0 0 0 rgba(126,217,87,.7);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(126,217,87,0)}100%{box-shadow:0 0 0 0 rgba(126,217,87,0)}}

.hero__h1{font-size:clamp(2.5rem,11vw,4.9rem);font-weight:800;margin-bottom:.35em}
.hero__word{
  color:var(--lima);position:relative;display:inline-block;
  background:linear-gradient(100deg,var(--lima),var(--lima-2),var(--agua));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero__word.swap{animation:swap .5s ease}
@keyframes swap{0%{opacity:0;transform:translateY(14px) rotateX(-40deg)}100%{opacity:1;transform:none}}

.hero__p{font-size:clamp(1.02rem,4vw,1.25rem);max-width:34ch;color:rgba(255,255,255,.88)}
.hero__p strong{color:#fff}

.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 34px}

.btn{
  --bg:var(--lima);--fg:var(--verde-900);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--bg);color:var(--fg);
  padding:15px 26px;border-radius:999px;border:0;cursor:pointer;
  font:inherit;font-weight:800;font-size:1rem;
  position:relative;overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.18);
  transition:transform .2s cubic-bezier(.2,.7,.3,1),box-shadow .2s,filter .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.24);filter:brightness(1.04)}
.btn:active{transform:translateY(0) scale(.98)}
.btn--ghost{--bg:transparent;--fg:#fff;border:2px solid rgba(255,255,255,.4);box-shadow:none}
.btn--ghost:hover{background:rgba(255,255,255,.10)}
.btn--green{--bg:var(--verde-700);--fg:#fff}
.btn--full{width:100%}
.btn .ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.5);animation:rip .6s linear;pointer-events:none}
@keyframes rip{to{transform:scale(4);opacity:0}}

.stats{display:flex;gap:10px;flex-wrap:wrap}
.stats li{
  flex:1 1 92px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:14px 12px;backdrop-filter:blur(4px);
}
.stats b{display:block;font-size:1.7rem;color:var(--lima);line-height:1}
.stats span{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;opacity:.82}

.grass{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:110px;z-index:1}
.grass__b{fill:#0d3a21;opacity:.85;animation:wave 9s ease-in-out infinite alternate}
.grass__f{fill:var(--crema)}
@keyframes wave{from{transform:translateX(-14px)}to{transform:translateX(14px)}}

/* gotas */
.drops{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.drop{position:absolute;top:-10%;width:6px;height:6px;border-radius:0 50% 50% 50%;transform:rotate(45deg);background:var(--agua);opacity:.35;animation:fall linear infinite}
@keyframes fall{to{transform:rotate(45deg) translateY(112vh)}}
@media (prefers-reduced-motion:reduce){ .drop,.hero__glow,.grass__b{animation:none} }

/* =========================================================
   TICKER
   ========================================================= */
.ticker{background:var(--verde-800);color:#fff;overflow:hidden;padding:12px 0;border-block:1px solid rgba(255,255,255,.08)}
.ticker__row{display:flex;gap:38px;width:max-content;animation:slide 30s linear infinite}
.ticker__row span{display:flex;align-items:center;gap:38px;font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:rgba(255,255,255,.75)}
.ticker__row span::after{content:"●";color:var(--lima);font-size:.5rem}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker:hover .ticker__row{animation-play-state:paused}

/* =========================================================
   SECCIONES
   ========================================================= */
.sec{padding:72px 0}
@media (min-width:860px){ .sec{padding:104px 0} }
.sec--dark{background:linear-gradient(165deg,var(--verde-900),var(--verde-800));color:#fff}
.sec--form{background:#eef3ea}

.eyebrow{font-size:.72rem;font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:var(--verde-600);margin-bottom:10px}
.sec--dark .eyebrow{color:var(--lima)}
.h2{font-size:clamp(1.85rem,7vw,2.9rem);font-weight:800}
.lede{font-size:1.05rem;color:var(--gris);max-width:56ch;margin-bottom:34px}
.sec--dark .lede{color:rgba(255,255,255,.82)}

/* ---------- tarjetas de servicio ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:600px){ .cards{grid-template-columns:repeat(2,1fr);gap:18px} }
@media (min-width:980px){ .cards{grid-template-columns:repeat(4,1fr)} }

.card{
  position:relative;overflow:hidden;text-align:left;font:inherit;color:inherit;
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:24px 20px 62px;cursor:pointer;
  box-shadow:var(--sombra);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),box-shadow .3s,border-color .3s;
  -webkit-tap-highlight-color:transparent;
}
.card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:linear-gradient(160deg,rgba(126,217,87,.16),rgba(42,165,165,.10));
}
.card:hover{transform:translateY(-6px);box-shadow:var(--sombra-lg);border-color:rgba(126,217,87,.6)}
.card:hover::before{opacity:1}
.card>*{position:relative}

.card__ico{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(150deg,var(--verde-700),var(--verde-600));
  box-shadow:0 8px 18px rgba(27,107,58,.28);transition:transform .35s;
}
.card:hover .card__ico{transform:rotate(-8deg) scale(1.08)}
.card__ico svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.08rem;margin-bottom:6px}
.card p{font-size:.92rem;color:var(--gris);margin:0}

.card__add{
  position:absolute;left:20px;bottom:18px;display:inline-flex;align-items:center;gap:7px;
  font-size:.82rem;font-weight:800;color:var(--verde-600);
}
.card__add::before{
  content:"+";display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:rgba(36,140,75,.12);font-size:1rem;line-height:1;transition:.3s;
}
.card.on{border-color:var(--verde-600);background:#f4fbef}
.card.on::before{opacity:1}
.card.on .card__add{color:var(--verde-800)}
.card.on .card__add::before{content:"✓";background:var(--lima);color:var(--verde-900);transform:rotate(360deg)}
.card.pulse{animation:pop .4s ease}
@keyframes pop{50%{transform:scale(1.03)}}

.cards__cta{margin-top:30px;text-align:center}

/* ---------- nosotros ---------- */
.about{display:grid;gap:34px}
@media (min-width:900px){ .about{grid-template-columns:1.35fr .8fr;align-items:start;gap:56px} }
.about p{color:rgba(255,255,255,.85)}
.checks{display:grid;gap:12px;margin-top:24px}
.checks li{display:flex;align-items:flex-start;gap:12px;font-weight:600}
.checks li::before{
  content:"✓";flex:0 0 24px;height:24px;border-radius:50%;
  background:var(--lima);color:var(--verde-900);display:grid;place-items:center;font-size:.8rem;font-weight:900;
}
.owner{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:22px;padding:30px 24px;text-align:center;backdrop-filter:blur(6px);
}
.owner img{width:88px;height:88px;border-radius:50%;background:#fff;margin:0 auto 16px;padding:6px}
.owner h3{font-size:1.2rem;margin-bottom:2px}
.owner__role{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lima);margin-bottom:18px}
.owner__links{display:grid;gap:10px}
.owner__links a{padding:12px;border-radius:12px;background:rgba(255,255,255,.10);font-weight:700;transition:.25s}
.owner__links a:hover{background:var(--lima);color:var(--verde-900)}

/* ---------- pasos ---------- */
.steps{display:grid;gap:18px;counter-reset:s}
@media (min-width:820px){ .steps{grid-template-columns:repeat(3,1fr);gap:24px} }
.steps li{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:28px 22px;box-shadow:var(--sombra);position:relative;overflow:hidden}
.steps li::after{content:"";position:absolute;inset:auto 0 0 0;height:4px;background:linear-gradient(90deg,var(--lima),var(--agua));transform:scaleX(0);transform-origin:left;transition:transform .5s}
.steps li.in::after{transform:scaleX(1)}
.steps span{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--verde-800);color:var(--lima);font-weight:900;font-size:1.15rem;margin-bottom:14px}
.steps h3{font-size:1.14rem}
.steps p{color:var(--gris);margin:0;font-size:.95rem}

/* =========================================================
   FORMULARIO
   ========================================================= */
.form__wrap{display:grid;gap:34px}
@media (min-width:980px){ .form__wrap{grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start} }

.contact__mini{display:grid;gap:12px}
.mini{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--linea);border-radius:14px;padding:14px 16px;box-shadow:var(--sombra);transition:.25s}
.mini:hover{transform:translateY(-2px);border-color:var(--verde-600)}
.mini svg{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:var(--verde-700);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mini span{display:flex;flex-direction:column;font-weight:700;font-size:.95rem;word-break:break-word}
.mini small{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);font-weight:800}

.form{background:#fff;border:1px solid var(--linea);border-radius:22px;padding:24px 20px;box-shadow:var(--sombra-lg)}
@media (min-width:600px){ .form{padding:34px} }
.form__row{display:grid;gap:16px}
@media (min-width:560px){ .form__row{grid-template-columns:1fr 1fr} }

.field{display:block;margin-bottom:18px;border:0;padding:0}
.field>span,.field__lbl,.field legend{
  display:block;font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--verde-800);margin-bottom:8px;padding:0;
}
.field input,.field textarea{
  width:100%;font:inherit;color:var(--tinta);
  padding:14px 16px;border:2px solid #e2e8dd;border-radius:13px;background:#fbfdfa;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.field textarea{resize:vertical;min-height:110px}
.field input:focus,.field textarea:focus{outline:0;border-color:var(--verde-600);background:#fff;box-shadow:0 0 0 4px rgba(36,140,75,.13)}
.field input.bad,.field textarea.bad{border-color:#d9534f;background:#fff6f6}
.err{display:block;min-height:0;font-size:.8rem;font-style:normal;color:#c9302c;font-weight:700;margin-top:6px}

.seg{display:flex;gap:10px}
.seg label{flex:1;position:relative}
.seg input{position:absolute;opacity:0;inset:0;cursor:pointer}
.seg span{
  display:block;text-align:center;padding:13px 10px;border:2px solid #e2e8dd;border-radius:13px;
  font-weight:800;background:#fbfdfa;transition:.25s;cursor:pointer;
}
.seg input:checked+span{background:var(--verde-700);border-color:var(--verde-700);color:#fff;box-shadow:0 6px 16px rgba(27,107,58,.25)}
.seg input:focus-visible+span{outline:3px solid var(--lima);outline-offset:2px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;
  padding:10px 15px;border-radius:999px;border:2px solid #e2e8dd;background:#fbfdfa;color:var(--gris);
  transition:.22s;-webkit-tap-highlight-color:transparent;
}
.chip:hover{border-color:var(--verde-600);color:var(--verde-800)}
.chip.on{background:var(--verde-700);border-color:var(--verde-700);color:#fff;transform:translateY(-1px);box-shadow:0 6px 14px rgba(27,107,58,.24)}
.count{
  display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;margin-left:6px;
  border-radius:999px;background:var(--lima);color:var(--verde-900);font-size:.74rem;
}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- fotos del patio ---------- */
.opt{
  display:inline-block;margin-left:6px;padding:2px 9px;border-radius:999px;
  background:#e7ece4;color:var(--gris);font-size:.64rem;letter-spacing:.08em;
}
.subir{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:22px 16px;border:2px dashed #cdd8c8;border-radius:14px;background:#fbfdfa;
  cursor:pointer;text-align:center;transition:border-color .25s,background .25s,transform .2s;
  -webkit-tap-highlight-color:transparent;
}
.subir:hover,.subir:focus-within{border-color:var(--verde-600);background:#f4fbef}
.subir:active{transform:scale(.99)}
.subir input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.subir svg{width:30px;height:30px;fill:none;stroke:var(--verde-600);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.subir b{font-size:.98rem;color:var(--verde-800)}
.subir small{font-size:.8rem;color:var(--gris)}
.subir.lleno{opacity:.5;pointer-events:none}

.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.thumbs:empty{margin:0}
.thumb{
  position:relative;margin:0;width:86px;border-radius:12px;overflow:hidden;
  border:1px solid var(--linea);background:#fff;box-shadow:var(--sombra);
  animation:pop-in .3s cubic-bezier(.2,.7,.3,1) both;
}
.thumb img{width:86px;height:76px;object-fit:cover}
.thumb figcaption{font-size:.66rem;text-align:center;color:var(--gris);padding:3px 0;font-weight:700}
.thumb__x{
  position:absolute;top:4px;right:4px;width:24px;height:24px;border:0;border-radius:50%;
  background:rgba(12,47,27,.72);color:#fff;font-size:.76rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;transition:background .2s;
}
.thumb__x:hover{background:#c9302c}
@keyframes pop-in{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}

.form__note{font-size:.82rem;color:var(--gris);text-align:center;margin:14px 0 0}
.form__msg{margin-top:14px;padding:0;border-radius:13px;font-weight:700;text-align:center;overflow:hidden;max-height:0;transition:max-height .4s,padding .3s}
.form__msg.show{max-height:340px;padding:16px}
.form__msg.ok{background:#eaf7e4;color:var(--verde-800);border:1px solid rgba(36,140,75,.3)}
.form__msg.no{background:#fdecea;color:#c9302c;border:1px solid rgba(201,48,44,.25)}
.form__msg b{display:block;font-size:1.12rem;margin-bottom:4px}
.form__msg .idcode{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9rem}

.spinner{display:none;width:18px;height:18px;border:2.5px solid rgba(0,0,0,.2);border-top-color:var(--verde-900);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn.loading{pointer-events:none;opacity:.85}
.btn.loading .spinner{display:block}

/* =========================================================
   CONTACTO / FOOTER / DOCK
   ========================================================= */
.contact{text-align:center}
.contact .lede{margin-inline:auto}
.contact__grid{display:grid;gap:14px;margin-top:10px}
@media (min-width:720px){ .contact__grid{grid-template-columns:1fr 1fr} }
.ccard{
  display:grid;gap:4px;padding:26px 20px;border-radius:var(--radio);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);transition:.28s;
}
.ccard:hover{background:var(--lima);color:var(--verde-900);transform:translateY(-4px)}
.ccard b{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--lima)}
.ccard:hover b{color:var(--verde-800)}
.ccard span{font-size:1.15rem;font-weight:800;word-break:break-word}
.ccard small{font-size:.78rem;opacity:.7}

.foot{background:var(--verde-900);color:rgba(255,255,255,.7);padding:46px 0 40px;text-align:center}
.foot__in{display:grid;gap:16px;justify-items:center}
.foot .brand__txt{color:#fff}
.foot p{margin:0;font-size:.9rem}
.foot__c{font-size:.78rem;opacity:.6;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;width:100%;max-width:520px}

.powered{
  display:inline-flex;align-items:center;gap:9px;margin-top:2px;
  padding:8px 16px;border-radius:999px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  transition:background .25s,border-color .25s,transform .25s;
}
.powered span{font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.powered img{width:132px;height:auto;opacity:.85;transition:opacity .25s}
.powered:hover{background:rgba(255,255,255,.09);border-color:rgba(232,219,11,.45);transform:translateY(-2px)}
.powered:hover img{opacity:1}
.powered:hover span{color:rgba(255,255,255,.8)}

.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:8px;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--linea);box-shadow:0 -8px 26px rgba(12,47,27,.12);
  transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.dock.up{transform:none}
@media (min-width:860px){ .dock{display:none} }
.dock__b{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:.72rem;font-weight:800;color:var(--verde-800);
  padding:9px 4px;border-radius:13px;background:rgba(20,83,45,.07);
}
.dock__b svg{width:19px;height:19px;fill:none;stroke:var(--verde-700);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dock__b--main{flex-direction:row;gap:7px;font-size:.92rem;background:var(--lima);color:var(--verde-900)}
.dock__count{
  display:grid;place-items:center;min-width:21px;height:21px;border-radius:999px;
  background:var(--verde-800);color:#fff;font-size:.72rem;
}

.toast{
  position:fixed;left:50%;bottom:calc(var(--dock) + 18px + env(safe-area-inset-bottom));z-index:70;
  background:var(--verde-900);color:#fff;padding:12px 20px;border-radius:999px;
  font-size:.9rem;font-weight:700;box-shadow:var(--sombra-lg);
  white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;
  /* oculto por defecto: sin opacidad y sin capturar toques */
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translate(-50%,22px) scale(.96);
  transition:opacity .28s ease,transform .35s cubic-bezier(.2,.7,.3,1),visibility .35s;
}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
@media (min-width:860px){ .toast{bottom:26px} }