/* =====================================================================
   JARDÍN EXPRESS - estilos
   1) TOKENS: cambia colores y tipografías aquí y se actualiza todo el sitio.
   ===================================================================== */
:root{
  --bosque:#0F3323;      /* verde oscuro: hero, pie, textos fuertes */
  --grama:#5A9A2E;       /* verde grama */
  --grama-luz:#6DB23A;   /* franja clara de la grama recién cortada */
  --trinitaria:#B3245E;  /* magenta de la trinitaria: SOLO botones/acento */
  --trinitaria-h:#8F1A49;/* magenta al pasar el mouse */
  --hoja:#F3F6EC;        /* fondo general */
  --hoja-2:#E6EDD8;      /* fondo de secciones alternas */
  --tinta:#16241B;       /* texto */
  --tinta-2:#4C5B50;     /* texto secundario */
  --wa-ink:var(--trinitaria); /* color del teléfono dentro del icono de WhatsApp */

  --f-titulo:"Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --f-texto:"Instrument Sans", "Segoe UI", Arial, sans-serif;
  --radio:14px;
}

*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{font-family:var(--f-texto);color:var(--tinta);background:var(--hoja);line-height:1.6;font-size:1.0625rem}
img,svg{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1140px,100% - 2.5rem);margin-inline:auto}

h1,h2,h3{font-family:var(--f-titulo);line-height:1.08;letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5vw,3.7rem);font-weight:800}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:700;max-width:22ch}
h3{font-size:1.25rem;font-weight:700;letter-spacing:-.01em}
:focus-visible{outline:3px solid #F2C230;outline-offset:3px;border-radius:6px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--trinitaria);color:#fff;text-decoration:none;
  font-weight:600;padding:.95rem 1.4rem;border-radius:999px;transition:background .2s,transform .2s}
.btn:hover{background:var(--trinitaria-h);transform:translateY(-2px)}
.btn-sm{padding:.55rem 1rem;font-size:.95rem}
.btn-lg{padding:1.1rem 1.8rem;font-size:1.15rem}

/* ---------- Cabecera ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--bosque);color:var(--hoja)}
.top-in{display:flex;align-items:center;gap:1.5rem;padding-block:.7rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--f-titulo);font-weight:800;font-size:1.3rem}
.menu{display:none;gap:1.4rem;margin-left:auto;font-size:.97rem}
.menu a{text-decoration:none;opacity:.85}.menu a:hover{opacity:1;text-decoration:underline}
.top .btn{margin-left:auto}
@media(min-width:900px){.menu{display:flex}.top .btn{margin-left:0}}

/* ---------- Hero ---------- */
.hero{background:var(--bosque);color:var(--hoja);padding:3rem 0 4.5rem}
.hero-grid{display:grid;gap:2.5rem;align-items:center}
@media(min-width:960px){.hero-grid{grid-template-columns:1.05fr 1fr;gap:3.5rem}}
.lead{font-size:1.2rem;margin-top:1.3rem;max-width:54ch;color:#D5E2CC}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;margin-top:2rem}
.link-light{color:var(--hoja);font-weight:500;text-underline-offset:4px}
.hero-facts{list-style:none;padding:0;margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.8rem 2rem;color:#C4D4BA;font-size:.98rem}
.hero-facts strong{display:block;color:#fff;font-family:var(--f-titulo);font-size:1.15rem}

/* Animación única de entrada (se desactiva si el usuario pide menos movimiento) */
@media(prefers-reduced-motion:no-preference){
  .hero-text>*{animation:sube .7s both}
  .hero-text>*:nth-child(2){animation-delay:.1s}.hero-text>*:nth-child(3){animation-delay:.2s}.hero-text>*:nth-child(4){animation-delay:.3s}
  .shots{animation:sube .9s .25s both}
  @keyframes sube{from{opacity:0;transform:translateY(18px)}}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* ---------- Galería antes/después del hero ----------
   Las fotos van apiladas una encima de otra; la que tiene la clase .on
   es la visible. script.js va cambiando esa clase. */
.shots{position:relative;border-radius:22px;overflow:hidden;background:#0A2418;box-shadow:0 30px 60px -25px rgba(0,0,0,.6)}
.shots-stack{position:relative;aspect-ratio:1/1;background:#0A2418}
.shots-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.shots-stack img.on{opacity:1}
.shots figcaption{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.75rem 1.1rem;color:#C4D4BA;font-size:.9rem}
/* Puntitos para saltar de una foto a otra */
.shots-dots{display:flex;gap:.45rem;margin-left:auto}
.shots-dots button{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.35);
  cursor:pointer;transition:background .2s,transform .2s}
.shots-dots button:hover{background:rgba(255,255,255,.7)}
.shots-dots button[aria-current="true"]{background:var(--grama-luz);transform:scale(1.3)}
@media(prefers-reduced-motion:reduce){.shots-stack img{transition:none}.shots-dots button{transition:none}}

/* ---------- Secciones ---------- */
.sec{padding:5rem 0}
.sec-tint{background:var(--hoja-2)}
.sec-lead{margin-top:1rem;max-width:60ch;color:var(--tinta-2);font-size:1.12rem}

/* Servicios: rejilla con líneas, sin tarjetas flotantes. El primero destaca. */
.srv-grid{display:grid;gap:0;margin-top:3rem;border-top:2px solid var(--bosque)}
.srv{padding:1.8rem 0;border-bottom:1px solid #C9D4BB}
.srv p{margin-top:.6rem;color:var(--tinta-2);max-width:46ch}
@media(min-width:760px){
  .srv-grid{grid-template-columns:repeat(3,1fr);column-gap:2.5rem}
  .srv-main{grid-column:span 3;display:grid;grid-template-columns:1fr 2fr;gap:2.5rem;align-items:baseline}
  .srv-main h3{font-size:2rem}.srv-main p{margin-top:0;font-size:1.15rem;max-width:60ch}
}

/* Pasos */
.steps{list-style:none;padding:0;margin-top:3rem;display:grid;gap:2rem;counter-reset:paso}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:paso;position:relative;padding-top:4.2rem}
.steps li::before{content:counter(paso);position:absolute;top:0;left:0;width:3.2rem;height:3.2rem;border-radius:50%;
  display:grid;place-items:center;background:var(--bosque);color:#fff;font-family:var(--f-titulo);font-weight:800;font-size:1.4rem}
.steps p{margin-top:.5rem;color:var(--tinta-2)}

/* Precios: el fondo imita las franjas de una grama recién cortada */
.prices{padding:5rem 0;background:repeating-linear-gradient(100deg,var(--grama) 0 90px,var(--grama-luz) 90px 180px)}
.prices-panel{background:var(--hoja);border-radius:26px;padding:clamp(1.6rem,4vw,3.2rem);max-width:820px;box-shadow:0 30px 60px -30px rgba(15,51,35,.7)}
.price-list{list-style:none;padding:0;margin:2rem 0 1.5rem}
.price-list li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0;border-bottom:1px solid #C9D4BB}
.price-list li:first-child{border-top:2px solid var(--bosque)}
.price-list p{color:var(--tinta-2);font-size:.98rem}
.price{white-space:nowrap;color:var(--tinta-2);text-align:right}
.price b{font-family:var(--f-titulo);font-size:1.9rem;color:var(--bosque);margin-left:.2rem}
.pay{margin-bottom:1.6rem;color:var(--tinta-2)}

/* Testimonios */
.quotes{display:grid;gap:1.5rem;margin-top:3rem}
@media(min-width:860px){.quotes{grid-template-columns:1.4fr 1fr;grid-template-rows:auto auto}.quote-big{grid-row:span 2}}
.quote{background:#fff;border-radius:var(--radio);padding:1.8rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem;border-left:5px solid var(--grama)}
.quote-big{background:var(--bosque);color:var(--hoja);border-left-color:var(--trinitaria);padding:2.4rem}
.quote-big p{font-family:var(--f-titulo);font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.3;font-weight:500}
.quote footer strong{display:block}.quote footer span{font-size:.93rem;opacity:.75}

/* Preguntas */
.faq-wrap{display:grid;gap:2rem}
@media(min-width:860px){.faq-wrap{grid-template-columns:1fr 1.6fr;gap:4rem}}
.faq details{border-bottom:1px solid #B9C7A8;padding:1.1rem 0}
.faq details:first-child{border-top:2px solid var(--bosque)}
.faq summary{cursor:pointer;font-weight:600;font-size:1.1rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-titulo);font-size:1.5rem;line-height:1;color:var(--trinitaria)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:.7rem;color:var(--tinta-2);max-width:62ch}

/* Cierre y pie */
.final{background:var(--bosque);color:var(--hoja);padding:5.5rem 0;text-align:center}
.final h2{margin-inline:auto;max-width:18ch}
.final p{margin:1.2rem auto 2.2rem;max-width:48ch;color:#D5E2CC;font-size:1.15rem}
.foot{background:#0A2418;color:#B7C7AE;font-size:.93rem;padding:1.4rem 0 5.5rem}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem}

/* ---------- Widget de WhatsApp (botón flotante + ventanita) ----------
   El panel se muestra/oculta con el atributo hidden desde script.js. */
.wa{position:fixed;right:18px;bottom:18px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:.75rem}

.wa-panel{width:min(320px,calc(100vw - 36px));background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.45)}
.wa-panel[hidden]{display:none}
@media(prefers-reduced-motion:no-preference){
  .wa-panel{animation:wa-entra .3s ease both}
  @keyframes wa-entra{from{opacity:0;transform:translateY(16px) scale(.97)}}
}

/* Cabecera verde */
.wa-head{display:flex;align-items:center;gap:.8rem;background:#25D366;padding:1rem 1.15rem;color:#fff}
.wa-head-ico{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;flex-shrink:0}
.wa-head h3{font-size:.95rem;font-weight:700;color:#fff}
.wa-head p{font-size:.78rem;line-height:1.35;margin-top:.15rem;color:rgba(255,255,255,.88)}

/* Lista de contactos (la crea script.js) */
.wa-lista{padding:.75rem;max-height:17rem;overflow-y:auto;display:grid;gap:.15rem}
.wa-contacto{display:flex;align-items:center;gap:.75rem;width:100%;padding:.7rem;border:0;border-radius:14px;
  background:none;font:inherit;text-align:left;cursor:pointer;transition:background .2s}
.wa-contacto:hover{background:var(--hoja)}
.wa-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0;overflow:hidden;display:block}
.wa-datos{flex:1;min-width:0;display:block}
.wa-nombre{display:block;font-size:.93rem;font-weight:600;color:var(--tinta)}
.wa-rol{display:block;font-size:.78rem;color:var(--tinta-2)}
.wa-ir{width:36px;height:36px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;
  flex-shrink:0;opacity:.85;transition:opacity .2s}
.wa-contacto:hover .wa-ir{opacity:1}
.wa-pie{background:var(--hoja);border-top:1px solid #DDE5D2;padding:.6rem 1rem;text-align:center;font-size:.72rem;color:var(--tinta-2)}

/* Botón redondo que abre y cierra */
.wa-btn{width:60px;height:60px;border:0;border-radius:50%;background:#25D366;color:#fff;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 10px 25px -8px rgba(0,0,0,.5);transition:background .25s,transform .25s}
.wa-btn:hover{transform:scale(1.08)}
.wa-btn .wa-ico-x{display:none}
.wa-btn[aria-expanded="true"]{background:var(--tinta-2)}
.wa-btn[aria-expanded="true"] .wa-ico-wa{display:none}
.wa-btn[aria-expanded="true"] .wa-ico-x{display:block}
@media(prefers-reduced-motion:reduce){.wa-btn{transition:none}.wa-btn:hover{transform:none}}