/* ==========================================================================
   Jardinería Toledo — hoja de estilo maestra
   Paleta: verde bosque profundo + lima viva + crema. Sin frameworks.
   ========================================================================== */

:root{
  /* ── Mismo registro que las demás marcas de la casa ──────────────
     Dos verdes vivos y un gris cálido para el texto. Sin colores prestados
     de otras marcas de la casa: aquí todo es verde. ──────────────── */
  --v-950:#0A4A25; --v-900:#0E7A3C; --v-800:#12A150; --v-700:#17B45C;
  --v-600:#8FCB3E; --v-500:#A2D65B; --v-400:#B8E081; --v-300:#D5EFB2;
  --lima:#8FCB3E; --lima-600:#7DB733; --lima-100:#F0F8E3;
  --verde-hondo:#0E7A3C; --verde-hondo-100:#E2F3E9;
  --acero:#8C9A92; --acero-100:#F2F5F3;
  --mostaza:#0E7A3C; --mostaza-100:#E2F3E9;
  --crema:#FFFFFF; --crema-2:#F6FAF3; --arena:#E9F2E2; --tierra:#8C9A92;
  --gris-900:#4A5850; --gris-600:#6E7A73; --gris-400:#9DA8A1; --gris-200:#E4EBE3;
  --blanco:#FFFFFF;
  --fondo:var(--blanco); --texto:var(--gris-900); --suave:var(--gris-600);
  --borde:#E4EBE3;
  --display:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:var(--display);
  --t-xs:.8125rem; --t-sm:.9375rem; --t-base:1.0625rem;
  --t-lg:clamp(1.125rem,.98rem + .6vw,1.3125rem);
  --t-xl:clamp(1.3125rem,1.06rem + 1vw,1.625rem);
  --t-2xl:clamp(1.7rem,1.28rem + 1.8vw,2.4rem);
  --t-3xl:clamp(2rem,1.42rem + 2.6vw,3.25rem);
  --t-4xl:clamp(2.5rem,1.55rem + 4.4vw,4.8rem);
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem; --s-5:3rem;
  --s-6:4rem; --s-7:6rem; --s-8:8rem;
  --seccion:clamp(3.5rem,2.2rem + 7vw,7rem);
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px; --r-full:999px;
  --ancho:1260px; --ancho-txt:68ch;
  --sombra-s:0 1px 2px rgba(10,74,37,.05);
  --sombra:0 2px 8px rgba(10,74,37,.06);
  --sombra-l:0 6px 22px rgba(10,74,37,.09);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:var(--fondo);color:var(--texto);
  font-family:var(--sans);font-size:var(--t-base);line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0 0 .5em;font-family:var(--display);font-weight:800;
  line-height:1.1;letter-spacing:-.022em;text-wrap:balance;color:var(--v-900)}
h1{font-size:var(--t-4xl)} h2{font-size:var(--t-3xl)}
h3{font-size:var(--t-xl);font-weight:800;letter-spacing:-.018em} h4{font-size:var(--t-lg);font-weight:700}
p{margin:0 0 1.15em} p:last-child{margin-bottom:0}
a{color:var(--v-600);text-decoration-color:rgba(29,104,68,.32);text-underline-offset:3px;
  transition:color .2s var(--ease)}
a:hover{color:var(--v-800)}
ul,ol{margin:0 0 1.15em;padding-left:1.35em} li{margin-bottom:.4em}
strong{font-weight:650;color:var(--v-800)}
button{font:inherit}
:focus-visible{outline:3px solid var(--lima-600);outline-offset:3px;border-radius:4px}
::selection{background:var(--lima);color:var(--v-900)}

/* ---------- Layout ---------- */
.contenedor{width:min(100% - 2.5rem,var(--ancho));margin-inline:auto}
.contenedor-estrecho{width:min(100% - 2.5rem,860px);margin-inline:auto}
.seccion{padding-block:var(--seccion)}
.seccion--crema{background:var(--crema-2)}
.seccion--oscura{background:var(--v-900);color:var(--crema)}
.seccion--oscura h2,.seccion--oscura h3{color:var(--crema)}
.seccion--oscura p{color:rgba(247,245,238,.82)}
.grid{display:grid;gap:var(--s-4)}
@media(min-width:768px){.g-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.g-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1060px){.g-4{grid-template-columns:repeat(4,1fr)}}

/* ---------- Cabecera de sección ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--sans);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--v-600);margin-bottom:1rem}
.eyebrow::before{content:"";width:22px;height:3px;background:var(--lima);border-radius:3px}
.seccion--oscura .eyebrow{color:var(--lima)}
.entradilla{font-size:var(--t-lg);color:var(--suave);max-width:62ch;line-height:1.6}
.seccion--oscura .entradilla{color:rgba(247,245,238,.76)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.95rem 1.75rem;border-radius:var(--r-sm);font-family:var(--sans);
  font-size:var(--t-sm);font-weight:650;letter-spacing:.01em;text-decoration:none;
  border:2px solid transparent;cursor:pointer;transition:all .25s var(--ease);white-space:nowrap}
.btn svg{width:18px;height:18px;flex:0 0 auto}
.btn--primario{background:var(--v-800);color:#fff;box-shadow:0 2px 8px rgba(18,161,80,.22)}
.btn--primario:hover{background:var(--v-700);color:#fff;transform:translateY(-1px)}
.btn--lima{background:var(--lima);color:#123D22;box-shadow:0 2px 8px rgba(143,203,62,.3)}
.btn--lima:hover{background:var(--lima-600);color:#123D22;transform:translateY(-1px)}
.btn--fantasma{background:transparent;color:var(--v-800);border-color:rgba(11,43,31,.22)}
.btn--fantasma:hover{border-color:var(--v-700);background:rgba(20,83,45,.05);color:var(--v-900)}
.seccion--oscura .btn--fantasma,.hero .btn--fantasma,.cta-final .btn--fantasma{
  color:var(--crema);border-color:rgba(247,245,238,.42)}
.seccion--oscura .btn--fantasma:hover,.hero .btn--fantasma:hover,.cta-final .btn--fantasma:hover{
  background:rgba(247,245,238,.12);color:var(--blanco);border-color:rgba(247,245,238,.7)}
.btn--grande{padding:1.15rem 2.25rem;font-size:var(--t-base)}

/* ---------- Cabecera ---------- */
.cabecera{position:sticky;top:0;z-index:100;background:rgba(247,245,238,.86);
  border-bottom:1px solid transparent;transition:all .3s var(--ease)}
@supports(backdrop-filter:blur(1px)){.cabecera{backdrop-filter:saturate(180%) blur(14px)}}
.cabecera.pegada{background:rgba(247,245,238,.95);border-bottom-color:var(--borde);box-shadow:var(--sombra-s)}
.barra-aviso{background:var(--v-900);color:var(--crema);font-size:var(--t-xs);
  padding:.55rem 0;text-align:center;letter-spacing:.01em}
.barra-aviso a{color:var(--lima);font-weight:600;text-decoration:none}
.cabecera__interior{display:flex;align-items:center;gap:var(--s-3);
  min-height:78px;justify-content:space-between}
.marca{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.marca svg,.marca img{height:44px;width:auto;display:block}
.nav{display:none}
@media(min-width:1080px){.nav{display:flex;align-items:center;gap:.35rem;margin-inline:auto}}
.nav a{padding:.55rem .85rem;border-radius:var(--r-sm);font-size:var(--t-sm);
  font-weight:550;color:var(--v-800);text-decoration:none;transition:background .2s}
.nav a:hover,.nav .actual>a{background:rgba(20,83,45,.07);color:var(--v-900)}
.nav li{position:relative;list-style:none;margin:0}
.nav ul{display:flex;gap:.2rem;margin:0;padding:0}
.nav .sub-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;
  min-width:270px;background:var(--blanco);border:1px solid var(--borde);
  border-radius:var(--r);box-shadow:var(--sombra-l);padding:.5rem;flex-direction:column;gap:0}
.nav li:hover>.sub-menu,.nav li:focus-within>.sub-menu{display:flex}
.nav .sub-menu a{display:block;padding:.6rem .8rem;font-size:var(--t-sm)}
.cabecera__acciones{display:flex;align-items:center;gap:.65rem;flex:0 0 auto}
.tel-cabecera{display:none;flex-direction:column;line-height:1.15;text-decoration:none}
@media(min-width:640px){.tel-cabecera{display:flex}}
.tel-cabecera small{font-size:.6875rem;color:var(--suave);letter-spacing:.06em;text-transform:uppercase}
.tel-cabecera span{font-family:var(--display);font-size:1.15rem;font-weight:800;color:var(--v-800);letter-spacing:-.02em}
.hamburguesa{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-sm);
  background:transparent;border:1px solid var(--borde);cursor:pointer}
@media(min-width:1080px){.hamburguesa{display:none}}
.hamburguesa span{display:block;width:20px;height:2px;background:var(--v-800);
  border-radius:2px;position:relative;transition:.25s var(--ease)}
.hamburguesa span::before,.hamburguesa span::after{content:"";position:absolute;left:0;
  width:20px;height:2px;background:var(--v-800);border-radius:2px;transition:.25s var(--ease)}
.hamburguesa span::before{top:-6px} .hamburguesa span::after{top:6px}
.menu-abierto .hamburguesa span{background:transparent}
.menu-abierto .hamburguesa span::before{top:0;transform:rotate(45deg)}
.menu-abierto .hamburguesa span::after{top:0;transform:rotate(-45deg)}
.nav-movil{position:fixed;inset:0 0 0 auto;width:min(88vw,400px);background:var(--crema);
  z-index:99;padding:6rem 1.75rem 2rem;overflow-y:auto;transform:translateX(101%);
  transition:transform .35s var(--ease);box-shadow:var(--sombra-l)}
.menu-abierto .nav-movil{transform:translateX(0)}
.nav-movil ul{list-style:none;padding:0;margin:0}
.nav-movil a{display:block;padding:.85rem 0;font-size:1.0625rem;font-weight:550;
  color:var(--v-900);text-decoration:none;border-bottom:1px solid var(--borde)}
.nav-movil .sub-menu a{padding-left:1rem;font-size:var(--t-sm);color:var(--suave);font-weight:450}
.velo{position:fixed;inset:0;background:rgba(6,26,18,.45);z-index:98;opacity:0;
  pointer-events:none;transition:opacity .3s}
.menu-abierto .velo{opacity:1;pointer-events:auto}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;color:var(--crema);
  min-height:min(92vh,780px);display:grid;align-items:center;overflow:hidden}
.hero--compacto{min-height:min(62vh,520px)}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(6,26,18,.90) 0%,rgba(11,43,31,.76) 42%,rgba(11,43,31,.30) 100%)}
.hero__interior{padding-block:clamp(4rem,10vw,7rem);max-width:min(100%,720px)}
.hero h1{color:var(--crema);margin-bottom:1rem}
.hero h1 em{font-style:normal;color:var(--lima)}
.hero__lead{font-size:var(--t-lg);color:rgba(247,245,238,.86);max-width:56ch;margin-bottom:2rem}
.hero__acciones{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2.25rem}
.hero__sellos{display:flex;flex-wrap:wrap;gap:1rem 1.75rem;padding-top:1.75rem;
  border-top:1px solid rgba(247,245,238,.18)}
.sello{display:flex;align-items:center;gap:.6rem;font-size:var(--t-sm);color:rgba(247,245,238,.82)}
.sello svg{width:20px;height:20px;color:var(--lima);flex:0 0 auto}
.hero__migas{font-size:var(--t-xs);color:rgba(247,245,238,.62);margin-bottom:1.1rem}
.hero__migas a{color:rgba(247,245,238,.82);text-decoration:none}
.hero__migas a:hover{color:var(--lima)}

/* ---------- Tarjetas de servicio ---------- */
.tarjeta{position:relative;background:var(--blanco);border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--borde);transition:all .35s var(--ease);
  display:flex;flex-direction:column;height:100%}
.tarjeta:hover{border-color:var(--lima);box-shadow:var(--sombra-l);transform:translateY(-3px)}
.tarjeta__media{aspect-ratio:4/3;overflow:hidden;background:var(--arena)}
.tarjeta__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.tarjeta:hover .tarjeta__media img{transform:scale(1.06)}
.tarjeta__cuerpo{padding:1.6rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.tarjeta h3{margin:0;font-size:var(--t-lg)}
.tarjeta p{font-size:var(--t-sm);color:var(--suave);margin:0}
.tarjeta__enlace{margin-top:auto;padding-top:.75rem;display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--t-sm);font-weight:600;color:var(--v-600);text-decoration:none}
.tarjeta__enlace svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.tarjeta:hover .tarjeta__enlace svg{transform:translateX(4px)}
.tarjeta a.cobertura{position:absolute;inset:0;z-index:1;text-indent:-9999px}

/* Tarjeta con icono (sin foto) */
.tarjeta-icono{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-lg);
  padding:1.75rem;transition:all .3s var(--ease);height:100%}
.tarjeta-icono:hover{border-color:var(--v-600)}
.tarjeta-icono__icono{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:var(--lima-100);color:var(--v-600);margin-bottom:1.1rem}
.tarjeta-icono__icono svg{width:26px;height:26px}
.seccion--oscura .tarjeta-icono{background:rgba(247,245,238,.05);border-color:rgba(247,245,238,.12)}
.seccion--oscura .tarjeta-icono__icono{background:rgba(167,224,107,.14);color:var(--lima)}

/* ---------- Proceso numerado ---------- */
.proceso{counter-reset:paso;display:grid;gap:var(--s-4)}
@media(min-width:900px){.proceso{grid-template-columns:repeat(4,1fr)}}
.paso{position:relative;padding-top:2.6rem}
.paso::before{counter-increment:paso;content:counter(paso,decimal-leading-zero);
  position:absolute;top:0;left:0;font-family:var(--display);font-size:2rem;
  font-weight:800;color:var(--lima);line-height:1;letter-spacing:-.02em}
.paso h3{font-size:var(--t-lg);margin-bottom:.35rem}
.paso p{font-size:var(--t-sm);color:var(--suave);margin:0}
.seccion--oscura .paso p{color:rgba(247,245,238,.7)}

/* ---------- Bloque destacado / franja de datos ---------- */
.franja{display:grid;gap:var(--s-3);text-align:center}
@media(min-width:700px){.franja{grid-template-columns:repeat(4,1fr)}}
.dato{padding:1.25rem}
.dato strong{display:block;font-family:var(--display);font-size:var(--t-xl);
  font-weight:600;color:var(--v-900);line-height:1.15;margin-bottom:.35rem;letter-spacing:-.02em}
.dato span{font-size:var(--t-sm);color:var(--suave)}
.seccion--oscura .dato strong{color:var(--lima)}
.seccion--oscura .dato span{color:rgba(247,245,238,.7)}

/* ---------- Split imagen + texto ---------- */
.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}
  .split--invertido .split__media{order:2}}
.split__media{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sombra-l)}
.split__media img{width:100%;aspect-ratio:4/3.2;object-fit:cover}
.split__media--recorte{border-radius:var(--r-xl) var(--r-xl) 120px var(--r-xl)}

/* ---------- Lista con check ---------- */
.lista-check{list-style:none;padding:0;display:grid;gap:.75rem}
.lista-check li{position:relative;padding-left:2rem;margin:0;font-size:var(--t-base)}
.lista-check li::before{content:"";position:absolute;left:0;top:.42em;width:19px;height:19px;
  border-radius:50%;background:var(--lima-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D6844' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat}
.seccion--oscura .lista-check li::before{background-color:rgba(167,224,107,.2)}

/* ---------- Formulario ---------- */
.formulario{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r-xl);
  padding:clamp(1.5rem,3vw,2.5rem);box-shadow:var(--sombra-l)}
.formulario--oscuro{background:rgba(247,245,238,.06);border-color:rgba(247,245,238,.14);
  backdrop-filter:blur(6px)}
.formulario h3{margin-bottom:.35rem}
.formulario__nota{font-size:var(--t-sm);color:var(--suave);margin-bottom:1.5rem}
.formulario--oscuro .formulario__nota{color:rgba(247,245,238,.7)}
.campo{margin-bottom:1.1rem}
.campo label{display:block;font-size:var(--t-sm);font-weight:600;margin-bottom:.4rem;color:var(--v-800)}
.formulario--oscuro .campo label{color:var(--crema)}
.campo input,.campo select,.campo textarea{width:100%;padding:.85rem 1rem;font:inherit;
  font-size:var(--t-sm);color:var(--texto);background:var(--crema);
  border:1.5px solid var(--gris-200);border-radius:var(--r-sm);transition:all .2s var(--ease)}
.campo textarea{min-height:118px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;
  border-color:var(--v-400);background:var(--blanco);box-shadow:0 0 0 4px rgba(64,145,108,.13)}
.formulario--oscuro .campo input,.formulario--oscuro .campo textarea{
  background:rgba(6,26,18,.35);border-color:rgba(247,245,238,.18);color:var(--crema)}
.campo--doble{display:grid;gap:1.1rem}
@media(min-width:560px){.campo--doble{grid-template-columns:1fr 1fr}}
.campo-trampa{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0;overflow:hidden}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--t-xs);color:var(--suave);line-height:1.5}
.consent input{width:auto;flex:0 0 auto;margin-top:.2em;accent-color:var(--v-600)}
.formulario--oscuro .consent{color:rgba(247,245,238,.72)}
.formulario .btn{width:100%;margin-top:.5rem}
.aviso{padding:1rem 1.15rem;border-radius:var(--r-sm);font-size:var(--t-sm);margin-bottom:1.25rem}
.aviso--ok{background:var(--lima-100);color:var(--v-800);border:1px solid rgba(29,104,68,.2)}
.aviso--error{background:#FDECEC;color:#8A2020;border:1px solid rgba(138,32,32,.2)}

/* Columna pegajosa del formulario.
   Nunca lleva animación de entrada: un elemento «sticky» no completa su recorrido
   de scroll, así que una animación con timeline de vista lo dejaría congelado
   en su fotograma inicial, es decir, invisible para siempre. */
/* align-self:start es imprescindible: el .split lleva align-items:center y, sin esto,
   una columna más corta que su vecina queda centrada a media página y «sticky» deja
   de tener recorrido. Era la causa de que el formulario apareciese a 2.400 px. */
.columna-pegajosa{position:sticky;top:110px;align-self:start}
@media(max-width:899px){.columna-pegajosa{position:static;top:auto}}

/* Salvaguarda: el formulario es lo que convierte. Pase lo que pase, se ve. */
.formulario,.formulario *{opacity:1!important}
.formulario{animation:none!important}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--borde)}
.faq details{border-bottom:1px solid var(--borde)}
.faq summary{cursor:pointer;list-style:none;padding:1.35rem 3rem 1.35rem 0;position:relative;
  font-family:var(--display);font-size:var(--t-lg);font-weight:700;letter-spacing:-.02em;color:var(--v-900)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.35rem;top:50%;width:13px;height:13px;
  border-right:2.2px solid var(--v-500);border-bottom:2.2px solid var(--v-500);
  transform:translateY(-65%) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq details[open] summary{color:var(--v-600)}
.faq__respuesta{padding:0 3rem 1.5rem 0;color:var(--suave);font-size:var(--t-base)}

/* ---------- Cuerpo editorial ---------- */
.editorial{max-width:var(--ancho-txt)}
.editorial h2{font-size:var(--t-2xl);margin-top:2.5em}
.editorial h2:first-child{margin-top:0}
.editorial h3{font-size:var(--t-xl);margin-top:1.9em}
.editorial ul li,.editorial ol li{margin-bottom:.55em}
.editorial blockquote{margin:2rem 0;padding:1.35rem 1.75rem;background:var(--lima-100);
  border-left:4px solid var(--lima-600);border-radius:0 var(--r) var(--r) 0;font-size:var(--t-lg)}
.editorial blockquote p:last-child{margin:0}
.editorial img{border-radius:var(--r);margin-block:1.75rem}
.editorial table{width:100%;border-collapse:collapse;margin-block:1.75rem;font-size:var(--t-sm)}
.editorial th,.editorial td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--borde)}
.editorial th{background:var(--crema-2);font-weight:650;color:var(--v-800)}

/* ---------- Zonas / enlazado interno ---------- */
.nube-zonas{display:flex;flex-wrap:wrap;gap:.6rem}
.nube-zonas a{display:inline-flex;align-items:center;padding:.5rem 1rem;border-radius:var(--r-full);
  background:var(--blanco);border:1px solid var(--borde);font-size:var(--t-sm);
  color:var(--v-800);text-decoration:none;transition:all .22s var(--ease)}
.nube-zonas a:hover{background:var(--v-800);color:#fff;border-color:var(--v-800)}
.seccion--oscura .nube-zonas a{background:rgba(247,245,238,.07);border-color:rgba(247,245,238,.14);color:var(--crema)}
.seccion--oscura .nube-zonas a:hover{background:var(--lima);color:var(--v-900);border-color:var(--lima)}

/* ---------- CTA final ---------- */
.cta-final{position:relative;isolation:isolate;overflow:hidden;
  background:var(--v-900);color:var(--crema);border-radius:var(--r-xl);
  padding:clamp(2.5rem,6vw,4.5rem);text-align:center}
.cta-final::before{content:"";position:absolute;inset:-40% -10% auto auto;width:min(560px,70%);
  aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(167,224,107,.16),transparent 68%);z-index:-1}
.cta-final h2{color:var(--crema);margin-bottom:.6rem}
.cta-final p{color:rgba(247,245,238,.8);max-width:56ch;margin-inline:auto;margin-bottom:2rem}
.cta-final__acciones{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center}

/* ---------- Pie ---------- */
.pie{background:var(--v-950);color:rgba(247,245,238,.72);padding-block:var(--s-6) var(--s-4);font-size:var(--t-sm)}
.pie__grid{display:grid;gap:var(--s-4);margin-bottom:var(--s-5)}
@media(min-width:860px){.pie__grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
.pie h4{color:var(--crema);font-family:var(--sans);font-size:var(--t-sm);font-weight:650;
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:1.1rem}
.pie ul{list-style:none;padding:0;margin:0}
.pie li{margin-bottom:.55rem}
.pie a{color:rgba(247,245,238,.72);text-decoration:none;transition:color .2s}
.pie a:hover{color:var(--lima)}
.pie .logo-pie{display:block;margin-bottom:1.1rem}
.pie .logo-pie svg{height:48px;width:auto}
.pie__legal{border-top:1px solid rgba(247,245,238,.1);padding-top:1.5rem;
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:var(--t-xs)}
.pie__zonas{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid rgba(247,245,238,.1)}
.pie__zonas p{font-size:var(--t-xs);line-height:1.9;color:rgba(247,245,238,.55)}
.pie__zonas a{color:rgba(247,245,238,.62)}

/* ---------- Barra flotante móvil ---------- */
.barra-movil{position:fixed;bottom:0;left:0;right:0;z-index:95;display:grid;
  grid-template-columns:1fr 1fr;gap:1px;background:var(--borde);
  box-shadow:0 -4px 20px rgba(6,26,18,.14)}
@media(min-width:1080px){.barra-movil{display:none}}
.barra-movil a{display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem;font-size:var(--t-sm);font-weight:650;text-decoration:none}
.barra-movil .llamar{background:var(--v-700);color:var(--crema)}
.barra-movil .presupuesto{background:var(--lima);color:var(--v-900)}
.barra-movil svg{width:17px;height:17px}
@media(max-width:1079px){body{padding-bottom:56px}}
.wa-flotante{position:fixed;right:1.1rem;bottom:5rem;z-index:96;width:54px;height:54px;
  border-radius:50%;background:#25D366;display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(37,211,102,.4);transition:transform .25s var(--ease)}
.wa-flotante:hover{transform:scale(1.08)}
.wa-flotante svg{width:29px;height:29px;color:#fff}
@media(min-width:1080px){.wa-flotante{bottom:1.5rem}}

/* ---------- Revelado al hacer scroll ----------
   Animación 100 % CSS con timeline de scroll nativa. El contenido NUNCA
   depende del JavaScript para ser visible: si el navegador no soporta
   animation-timeline (Firefox hoy), simplemente no hay animación y todo se ve.
   Esto sustituye a un IntersectionObserver que dejaba secciones enteras
   invisibles cuando no llegaba a dispararse. */
@keyframes jt-aparecer{
  from{opacity:0;transform:translateY(26px)}
  to{opacity:1;transform:none}
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    [data-reveal]{
      animation:jt-aparecer linear both;
      animation-timeline:view();
      animation-range:entry 2% cover 20%;
    }
  }
}

/* ---------- Utilidades ---------- */
.solo-lectores{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.saltar{position:absolute;left:-9999px;z-index:999;padding:1rem 1.5rem;background:var(--v-900);color:var(--crema)}
.saltar:focus{left:1rem;top:1rem}
.centrado{text-align:center} .mt-4{margin-top:var(--s-4)} .mt-5{margin-top:var(--s-5)}
.mb-4{margin-bottom:var(--s-4)} .mb-5{margin-bottom:var(--s-5)}

/* ---------- Movimiento reducido ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}

/* ============================================================
   HERO PARTIDO — portada. Texto sobre blanco a la izquierda y
   fotografía a sangre a la derecha. El fondo claro es lo que deja
   respirar la foto del jardín, que es el argumento de venta.
   ============================================================ */
.hero-split{background:var(--blanco);border-bottom:1px solid var(--borde)}
.hero-split__grid{display:grid;align-items:stretch;min-height:min(88vh,760px)}
@media(min-width:1000px){.hero-split__grid{grid-template-columns:1.02fr .98fr}}
.hero-split__txt{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2.5rem,5vw,4.5rem) clamp(1.25rem,4vw,4rem) clamp(2.5rem,5vw,4.5rem) 0}
@media(max-width:999px){.hero-split__txt{padding-inline:0}}
.hero-split h1{font-size:var(--t-4xl);margin-bottom:1rem}
.hero-split h1 em{font-style:normal;color:var(--v-600)}
.hero-split__lead{font-size:var(--t-lg);color:var(--suave);max-width:46ch;margin-bottom:2rem}
.hero-split__acciones{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2rem}
.hero-split__media{position:relative;min-height:340px;overflow:hidden;border-radius:var(--r-lg)}
@media(max-width:999px){.hero-split__media{border-radius:var(--r-lg);margin-bottom:2rem;order:-1}}
.hero-split__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

/* Distintivos: promesas concretas, no adornos */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem;border-radius:var(--r-full);
  background:var(--lima-100);border:0;color:var(--v-800);
  font-size:var(--t-xs);font-weight:700;letter-spacing:.01em}
.chip svg{width:13px;height:13px}
.chip--mostaza{background:var(--verde-hondo-100);color:var(--verde-hondo)}

/* Franja de logros/datos sobre gris muy claro */
.franja-clara{background:var(--crema-2);border-bottom:1px solid var(--borde)}

/* ============================================================
   RESPONSIVE — correcciones medidas, no supuestas
   ============================================================ */

/* 1. Nada puede desbordar a lo ancho. En móvil el documento medía 462 px
      en una pantalla de 390: lo provocaba el botón de la cabecera. */
html,body{max-width:100%;overflow-x:clip}
img,svg,video,iframe,table,pre{max-width:100%}

/* 2. El panel móvil, mientras está cerrado, no debe existir para el layout
      ni para el lector de pantalla ni para el ancho del documento. */
.nav-movil{visibility:hidden}
.menu-abierto .nav-movil{visibility:visible}

/* 3. «Saltar al contenido» fuera del flujo sin estirar el documento. */
.saltar{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;left:auto}
.saltar:focus{position:fixed;left:1rem;top:1rem;width:auto;height:auto;margin:0;
  padding:1rem 1.5rem;clip:auto;background:var(--v-900);color:#fff;z-index:999;border-radius:var(--r-sm)}

/* 4. Cabecera móvil: logo + hamburguesa y nada más.
      El botón de presupuesto ya está fijo abajo, repetirlo solo quitaba sitio. */
@media(max-width:820px){
  .cabecera__acciones .btn{display:none}
  .cabecera__interior{min-height:64px;gap:.75rem}
  .marca img,.marca svg{height:38px}
  .barra-aviso{font-size:.75rem;padding:.45rem 0}
}
@media(max-width:400px){ .marca img,.marca svg{height:34px} }

/* 5. Zonas táctiles: 44 px de alto mínimo en todo lo que se toca. */
@media(max-width:1024px){
  .nube-zonas a{min-height:44px;padding:.7rem 1.05rem}
  .pie li a,.pie__zonas a{display:inline-block;padding-block:.4rem;min-height:34px}
  .nav-movil a{min-height:48px;display:flex;align-items:center}
  .barra-movil a{min-height:56px}
  .faq summary{padding-block:1.15rem}
}

/* 6. Hero partido en móvil: foto primero, altura contenida, texto cómodo. */
@media(max-width:999px){
  .hero-split__grid{min-height:0}
  .hero-split__media{min-height:clamp(220px,46vw,340px);margin-inline:0}
  .hero-split__txt{padding-top:2rem;padding-bottom:2.5rem}
  .hero-split h1{font-size:clamp(2.1rem,8.5vw,3rem)}
  .hero-split__lead{font-size:1.0625rem}
  .hero-split__acciones .btn{flex:1 1 100%;justify-content:center}
}

/* 7. Rejillas: una sola columna hasta tablet, sin apurar los márgenes. */
@media(max-width:520px){
  .contenedor,.contenedor-estrecho{width:calc(100% - 2rem)}
  .grid{gap:1.25rem}
  .tarjeta__cuerpo{padding:1.25rem}
  .formulario{padding:1.35rem;border-radius:var(--r-lg)}
  .campo--doble{grid-template-columns:1fr}
  .cta-final{padding:2rem 1.35rem;border-radius:var(--r-lg)}
  .franja{grid-template-columns:1fr 1fr;gap:.5rem}
  .dato{padding:.85rem .5rem}
  .proceso{gap:1.75rem}
  .split{gap:2rem}
}

/* 8. Tablas y bloques anchos del contenido: scroll propio, nunca de la página. */
.editorial table{display:block;overflow-x:auto;white-space:nowrap}
@media(min-width:700px){.editorial table{display:table;white-space:normal}}

/* 9. Tipografía mínima legible en móvil (evita el zoom automático de iOS). */
@media(max-width:640px){
  .campo input,.campo select,.campo textarea{font-size:16px}
  .tarjeta p,.chip{font-size:.875rem}
}

/* ============================================================
   HERO A PANTALLA COMPLETA — la fotografía manda
   El jardín es el argumento de venta: ocupa toda la pantalla y el
   texto se apoya sobre él, no al lado.
   ============================================================ */
.hero-full{position:relative;isolation:isolate;min-height:min(88vh,820px);
  display:flex;align-items:flex-end;overflow:hidden;background:var(--v-950)}
.hero-full__media{position:absolute;inset:0;z-index:-2}
.hero-full__media img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hero-full::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(11,26,16,.40) 0%,rgba(11,26,16,.10) 30%,
                    rgba(11,26,16,.64) 74%,rgba(11,26,16,.90) 100%),
    linear-gradient(90deg,rgba(11,26,16,.62) 0%,rgba(11,26,16,.30) 42%,
                    rgba(11,26,16,0) 72%)}
.hero-full__interior{width:100%;padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,4vw,3.25rem)}
.hero-full .eyebrow{color:#C9E9AC}
.hero-full .eyebrow::before{background:var(--lima)}
.hero-full h1{color:#fff;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;
  letter-spacing:-.03em;max-width:17ch;margin-bottom:1.1rem;
  text-shadow:0 2px 30px rgba(11,26,16,.35)}
.hero-full__lead{font-size:clamp(1.0625rem,1.4vw,1.3125rem);color:rgba(255,255,255,.92);
  max-width:56ch;margin-bottom:2rem;text-shadow:0 1px 16px rgba(11,26,16,.4)}
.hero-full__acciones{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2.5rem}
.hero-full .btn--fantasma{color:#fff;border-color:rgba(255,255,255,.5);
  background:rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.hero-full .btn--fantasma:hover{background:rgba(255,255,255,.18);border-color:#fff}

/* Franja de garantías sobre la propia foto */
.hero-full__garantias{display:grid;gap:1px;background:rgba(255,255,255,.18);
  border-top:1px solid rgba(255,255,255,.2);border-bottom:1px solid rgba(255,255,255,.2)}
@media(min-width:760px){.hero-full__garantias{grid-template-columns:repeat(4,1fr)}}
.hero-full__garantias div{background:rgba(11,26,16,.34);backdrop-filter:blur(8px);
  padding:1rem 1.15rem;display:flex;align-items:center;gap:.65rem;
  font-size:var(--t-sm);color:#fff;font-weight:600}
.hero-full__garantias svg{width:18px;height:18px;color:var(--lima);flex:0 0 auto}
@media(max-width:759px){
  .hero-full{min-height:min(78vh,640px)}
  .hero-full__garantias{grid-template-columns:1fr 1fr}
  .hero-full__garantias div:nth-child(n+3){display:none}
}