/* ==========================================================================
   Sistema de diseño — sitios del grupo ([EMPRESA])
   Sitio Poda Profesional y Especializada -> body.sitio-poda (acento verde fibra)
   Sitio Construcción       -> body.sitio-constr (acento ámbar obra)
   ========================================================================== */

:root{
  --navy:#0B1526;
  --navy-2:#12233F;
  --steel:#8FA3BF;
  --ice:#EAF1F8;
  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --ink:#131B28;
  --ink-soft:#4A5568;
  --ink-faint:#7C8798;
  --line:rgba(19,27,40,.13);
  --shadow:0 1px 2px rgba(19,27,40,.05), 0 10px 28px -14px rgba(19,27,40,.22);
  --radius:12px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: Consolas, "SFMono-Regular", ui-monospace, Menlo, monospace;
}
body.sitio-poda{
  --acc:#5BE49B;         /* sobre fondo oscuro */
  --acc-deep:#0E9F6E;    /* sobre fondo claro (texto/botones) */
  --acc-dark:#0B7A54;
  --acc-soft:#E2F7EE;
}
body.sitio-constr{
  --acc:#FFB400;
  --acc-deep:#B97D0A;
  --acc-dark:#8F6108;
  --acc-soft:#FBF0D8;
}
body.sitio-jardin{
  --acc:#B4E051;         /* lima fresca sobre fondo oscuro */
  --acc-deep:#5C8A1E;    /* verde hoja sobre fondo claro */
  --acc-dark:#47690F;
  --acc-soft:#EFF7DF;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--font); color:var(--ink); background:var(--bg); line-height:1.6; font-size:16.5px;}
img{max-width:100%;}
a{color:var(--acc-deep);}

/* ---------- Header ---------- */
.top{
  background:var(--navy); color:var(--ice);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid rgba(234,241,248,.08);
}
.top-inner{max-width:1100px; margin:0 auto; padding:14px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ice);}
.brand .mark{width:36px; height:36px; flex:none;}
.brand .mark-logo{height:34px; width:auto; flex:none; display:block;}
.brand .name{display:flex; flex-direction:column; line-height:1.15;}
.brand .name .rubro{font-weight:700; font-size:1.06rem; letter-spacing:-.01em;}
.brand .name .empresa{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--steel);}
nav.menu{display:flex; gap:4px; flex-wrap:wrap;}
nav.menu a{color:var(--steel); text-decoration:none; font-size:.88rem; padding:7px 12px; border-radius:7px; font-weight:600;}
nav.menu a:hover{color:var(--ice); background:rgba(234,241,248,.07);}
nav.menu a.on{color:var(--acc); background:rgba(234,241,248,.06);}
nav.menu a.cta{background:var(--acc); color:var(--navy); margin-left:6px;}
nav.menu a.cta:hover{filter:brightness(1.08); color:var(--navy);}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(170deg, var(--navy) 62%, var(--navy-2)); color:var(--ice); padding:64px 22px 58px;}
.hero-inner{max-width:1100px; margin:0 auto;}
.hero-logo{display:block; height:70px; width:auto; margin-bottom:20px;}
.hero .chip{display:inline-block; font-family:var(--mono); font-size:.74rem; color:var(--acc); border:1px solid color-mix(in srgb, var(--acc) 40%, transparent); border-radius:99px; padding:5px 14px; margin-bottom:18px;}
.hero h1{font-size:2.5rem; line-height:1.14; margin:0 0 16px; font-weight:750; letter-spacing:-.02em; max-width:21ch; text-wrap:balance;}
.hero h1 .acc{color:var(--acc);}
.hero p.sub{color:var(--steel); font-size:1.1rem; max-width:56ch; margin:0 0 26px;}
.hero-stats{display:flex; gap:34px; flex-wrap:wrap; margin:0 0 30px;}
.hero-stats .st .v{font-family:var(--mono); font-size:1.45rem; font-weight:700; color:var(--acc);}
.hero-stats .st .k{font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--steel);}
.btn{display:inline-block; text-decoration:none; font-weight:700; border-radius:9px; padding:13px 24px; font-size:.95rem;}
.btn.primary{background:var(--acc); color:var(--navy);}
.btn.primary:hover{filter:brightness(1.08);}
.btn.ghost{color:var(--ice); border:1.5px solid rgba(234,241,248,.35); margin-left:10px;}
.btn.ghost:hover{border-color:var(--acc); color:var(--acc);}
.btn.solid-light{background:var(--acc-deep); color:#fff;}
.btn.solid-light:hover{filter:brightness(1.1);}

/* ---------- Secciones ---------- */
main{display:block;}
.section{padding:58px 22px;}
.section.alt{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.section-inner{max-width:1100px; margin:0 auto;}
.kicker{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--acc-deep); margin:0 0 10px; font-weight:600;}
.section h2{font-size:1.75rem; letter-spacing:-.015em; margin:0 0 14px; font-weight:750; text-wrap:balance;}
.section h3{font-size:1.15rem; margin:26px 0 8px; font-weight:700;}
.section p{max-width:68ch; color:var(--ink-soft); margin:0 0 14px;}
.section ul, .section ol{max-width:66ch; color:var(--ink-soft); padding-left:1.3em; margin:0 0 16px;}
.section li{margin-bottom:7px;}
.lede{font-size:1.08rem;}

/* Tarjetas */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin:26px 0 8px;}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; box-shadow:var(--shadow);}
.section.alt .card{background:var(--bg);}
.card .ic{width:38px; height:38px; border-radius:9px; background:var(--acc-soft); color:var(--acc-dark); display:flex; align-items:center; justify-content:center; font-size:1.15rem; margin-bottom:12px;}
.card h4{margin:0 0 7px; font-size:1.02rem; font-weight:700;}
.card p{margin:0; font-size:.9rem; color:var(--ink-soft);}
.card .mini{margin-top:10px; font-family:var(--mono); font-size:.72rem; color:var(--acc-deep);}

/* Franja destacada */
.feature{background:var(--navy); color:var(--ice); border-radius:16px; padding:34px 36px; margin:34px 0 6px; display:grid; grid-template-columns:1.2fr .8fr; gap:30px; align-items:center;}
.feature h3{color:var(--ice); font-size:1.35rem; margin:0 0 10px;}
.feature p{color:var(--steel); margin:0 0 16px; font-size:.95rem;}
.feature .facts{display:flex; flex-direction:column; gap:12px;}
.feature .fact{display:flex; gap:10px; font-size:.9rem; color:var(--ice); align-items:baseline;}
.feature .fact::before{content:"—"; color:var(--acc); font-weight:700;}

/* Pasos */
.steps{counter-reset:paso; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin:26px 0 8px;}
.step{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; position:relative;}
.section.alt .step{background:var(--bg);}
.step::before{counter-increment:paso; content:counter(paso, decimal-leading-zero); font-family:var(--mono); color:var(--acc-deep); font-weight:700; font-size:.8rem;}
.step h4{margin:6px 0 6px; font-size:.98rem;}
.step p{margin:0; font-size:.86rem;}

/* Tablas */
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); margin:22px 0;}
table.t{border-collapse:collapse; width:100%; min-width:520px; font-size:.9rem; background:var(--surface);}
table.t th{text-align:left; font-family:var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); background:var(--bg); padding:11px 15px; border-bottom:1px solid var(--line);}
table.t td{padding:11px 15px; border-bottom:1px solid var(--line); vertical-align:top;}
table.t tr:last-child td{border-bottom:none;}

/* CTA final */
.cta-band{background:var(--navy); color:var(--ice); text-align:center; padding:56px 22px;}
.cta-band h2{font-size:1.8rem; margin:0 0 12px; letter-spacing:-.015em;}
.cta-band p{color:var(--steel); max-width:52ch; margin:0 auto 24px;}

/* Aviso placeholder */
.editar{background:#FFF7DB; border:1px dashed #C9A227; color:#7A6210; border-radius:8px; padding:3px 9px; font-family:var(--mono); font-size:.78rem; white-space:nowrap;}
.aviso-editar{max-width:1100px; margin:18px auto 0; padding:0 22px; font-size:.8rem; color:var(--ink-faint);}

/* Formulario */
.form{max-width:640px; display:grid; gap:14px; margin:26px 0;}
.form label{font-size:.85rem; font-weight:700; display:block; margin-bottom:5px;}
.form input, .form select, .form textarea{
  width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:9px;
  font-family:var(--font); font-size:.93rem; background:var(--surface); color:var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus{outline:2px solid var(--acc-deep); outline-offset:1px; border-color:transparent;}
.form .dos{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.form .nota{font-size:.78rem; color:var(--ink-faint);}

/* ---------- Footer ---------- */
footer.pie{background:var(--navy); color:var(--steel); padding:44px 22px 34px; margin-top:0;}
.pie-inner{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:30px;}
.pie h5{color:var(--ice); font-size:.8rem; text-transform:uppercase; letter-spacing:.09em; margin:0 0 12px; font-family:var(--mono);}
.pie a{color:var(--steel); text-decoration:none; display:block; margin-bottom:8px; font-size:.88rem;}
.pie a:hover{color:var(--acc);}
.pie p{font-size:.85rem; margin:0 0 8px;}
.pie .legal{max-width:1100px; margin:28px auto 0; padding-top:18px; border-top:1px solid rgba(234,241,248,.12); font-size:.75rem; color:var(--ink-faint); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;}

/* Accesibilidad y responsive */
a:focus-visible, button:focus-visible{outline:2.5px solid var(--acc); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
@media (max-width:820px){
  .hero h1{font-size:1.85rem;}
  .feature{grid-template-columns:1fr; padding:26px 24px;}
  .pie-inner{grid-template-columns:1fr;}
  .form .dos{grid-template-columns:1fr;}
  .btn.ghost{margin-left:0; margin-top:10px;}
}

/* ---------- Fotografías ---------- */
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:38px; align-items:center;}
.hero-photo{border-radius:16px; overflow:hidden; border:1px solid rgba(234,241,248,.16); box-shadow:0 18px 44px -18px rgba(0,0,0,.55);}
.hero-photo img{display:block; width:100%; height:100%; object-fit:cover; min-height:320px; max-height:440px;}
.img-banner{border-radius:16px; overflow:hidden; margin:0 0 26px; border:1px solid var(--line); box-shadow:var(--shadow);}
.img-banner img{display:block; width:100%; object-fit:cover; max-height:380px; object-position:center 30%;}
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-photo img{min-height:220px; max-height:280px;}
}

/* ---------- Carrusel (portada) ---------- */
.carrusel{position:relative; height:440px;}
.carrusel .c-slide{position:absolute; inset:0; opacity:0; transition:opacity .9s ease; pointer-events:none;}
.carrusel .c-slide.activa{opacity:1; pointer-events:auto;}
.carrusel .c-slide img{width:100%; height:100%; object-fit:cover; display:block; min-height:0; max-height:none;}
.c-dots{position:absolute; left:0; right:0; bottom:12px; display:flex; gap:9px; justify-content:center; z-index:2;}
.c-dots button{width:11px; height:11px; border-radius:50%; border:none; background:rgba(234,241,248,.45); cursor:pointer; padding:0;}
.c-dots button.on{background:var(--acc);}
.c-dots button:focus-visible{outline:2px solid var(--acc); outline-offset:2px;}
@media (max-width:820px){ .carrusel{height:260px;} }
@media (prefers-reduced-motion: reduce){ .carrusel .c-slide{transition:none;} }

/* ---------- Boton flotante de WhatsApp ---------- */
.wa-fab{position:fixed; right:18px; bottom:18px; z-index:80; width:56px; height:56px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.35); transition:transform .12s ease;}
.wa-fab:hover{transform:scale(1.07);}
.wa-fab svg{width:30px; height:30px; fill:#fff;}
@media (max-width:820px){ .wa-fab{width:52px; height:52px; right:14px; bottom:14px;} }

/* ---------- Movimiento ---------- */
.rvl{opacity:0; transform:translateY(20px); transition:opacity .55s ease, transform .55s ease;}
.rvl.vis{opacity:1; transform:none;}
.grid > .rvl:nth-child(2){transition-delay:.07s;}
.grid > .rvl:nth-child(3){transition-delay:.14s;}
.grid > .rvl:nth-child(4){transition-delay:.21s;}
.grid > .rvl:nth-child(5){transition-delay:.28s;}
.steps > .rvl:nth-child(2){transition-delay:.07s;}
.steps > .rvl:nth-child(3){transition-delay:.14s;}
.steps > .rvl:nth-child(4){transition-delay:.21s;}
.card{transition:transform .16s ease, box-shadow .16s ease;}
.card:hover{transform:translateY(-4px); box-shadow:0 4px 6px rgba(19,27,40,.06), 0 16px 34px -14px rgba(19,27,40,.3);}
.hero-photo img, .carrusel .c-slide img{animation:kenburns 10s ease-in-out infinite alternate;}
@keyframes kenburns{ from{transform:scale(1);} to{transform:scale(1.06);} }
.foto-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:28px 0 8px;}
.foto-strip img{width:100%; height:200px; object-fit:cover; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow); display:block;}
.card-foto{width:100%; height:175px; object-fit:cover; border-radius:10px; display:block; margin-bottom:14px;}
@media (max-width:820px){
  .foto-strip{grid-template-columns:1fr 1fr;}
  .foto-strip img{height:130px;}
}
@media (prefers-reduced-motion: reduce){
  .rvl{opacity:1; transform:none; transition:none;}
  .card:hover{transform:none;}
  .hero-photo img, .carrusel .c-slide img{animation:none;}
}