/* =========================================================
   MyR Landscaping — theme front styles (v1.0.1)
   Brand: Guía de Marca v1.0 · Arial/Helvetica only
   Color tokens alias the theme.json palette so editor
   changes propagate here automatically.
========================================================= */

:root{
  --verde:var(--wp--preset--color--verde-bosque, #1E4F33);
  --tierra:var(--wp--preset--color--tierra-arcilla, #7A5A3A);
  --rojo:var(--wp--preset--color--rojo-senal, #C41E26);      /* CTAs ONLY */
  --musgo:var(--wp--preset--color--musgo-claro, #8FB277);
  --piedra:var(--wp--preset--color--piedra, #EDE9E0);
  --carbon:var(--wp--preset--color--carbon, #262624);
  --white:#FFFFFF;
  --gray:#6B6B67;

  --font:Arial, Helvetica, sans-serif;
  --fs-h1:clamp(2rem, 5.5vw, 3.5rem);
  --fs-h2:clamp(1.5rem, 3.2vw, 2.25rem);
  --fs-h3:clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-body:clamp(1rem, 1.1vw, 1.125rem);
  --fs-small:0.875rem;

  --space-section:clamp(4rem, 9vw, 7.5rem);
  --space-inner:clamp(1.25rem, 4vw, 2.5rem);
  --container:1200px;
  --radius:12px;
}

/* ================= BASE ================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  *{animation:none !important}
}
body{
  font-family:var(--font);
  font-size:var(--fs-body);
  line-height:1.5;
  color:var(--carbon);
  background:var(--white);
}
img{display:block;max-width:100%;height:auto}
a{color:var(--verde)}
h1,h2,h3{line-height:1.15;font-weight:700}
h2{font-size:var(--fs-h2);margin-bottom:1rem}
h3{font-size:var(--fs-h3)}
p{max-width:65ch}

/* WP wrappers: let template parts participate in body layout (sticky header) */
.wp-block-template-part{display:contents}
/* Admin bar offset for logged-in preview */
body.admin-bar .site-header{top:var(--wp-admin--admin-bar--height, 32px)}

.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--space-inner)}
.section{padding-block:var(--space-section)}
.surface-piedra{background:var(--piedra)}
.eyebrow{
  display:block;font-size:var(--fs-small);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tierra);
  margin-bottom:.75rem;
}
.eyebrow-es{font-style:italic;text-transform:none;letter-spacing:.02em}
.eyebrow-musgo{color:var(--musgo)}

:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.on-dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible, .hero :focus-visible{outline-color:var(--musgo)}

/* Buttons — brand digital rules: default Rojo Señal, hover Verde Bosque */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:44px;min-width:44px;padding:.8rem 1.6rem;
  font:700 1rem var(--font);text-decoration:none;cursor:pointer;
  border:2px solid transparent;border-radius:6px;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.btn-primary{background:var(--rojo);color:#fff}
.btn-primary:hover{background:var(--verde);color:#fff}
.btn-outline{background:transparent;color:#fff;border-color:#fff}
.btn-outline:hover{background:#fff;color:var(--carbon)}
.btn-outline-dark{background:transparent;color:var(--verde);border-color:var(--verde)}
.btn-outline-dark:hover{background:var(--verde);color:#fff}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
/* In the editor, show everything (no JS observers there) */
.editor-styles-wrapper .reveal{opacity:1;transform:none}

/* ================= HEADER / NAV ================= */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--carbon); /* logo approved for dark backgrounds only */
  transition:box-shadow .2s ease;
}
.site-header.scrolled{box-shadow:0 2px 14px rgba(0,0,0,.35)}
.nav-wrap{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:var(--container);margin-inline:auto;
  padding:.6rem var(--space-inner);
}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand img{width:clamp(120px,12vw,150px);height:auto} /* 120px brand minimum */
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;background:none;border:0;cursor:pointer;color:#fff;
}
.nav-toggle svg{width:28px;height:28px}
.nav-menu{
  position:fixed;inset:0;top:0;padding-top:6rem;
  background:var(--carbon);
  display:none;flex-direction:column;align-items:center;gap:.25rem;
  list-style:none;z-index:40;margin:0;
}
.nav-menu.open{display:flex}
.nav-menu a{
  color:#fff;text-decoration:none;font-weight:700;font-size:1.15rem;
  padding:.75rem 1.25rem;display:inline-block;border-radius:6px;
}
.nav-menu a:hover{color:var(--musgo)}
.nav-phone{color:var(--musgo) !important}
.nav-cta-li{margin-top:.75rem}

@media (min-width:1024px){
  .nav-toggle{display:none}
  .nav-menu{
    position:static;display:flex;flex-direction:row;align-items:center;
    padding:0;background:none;gap:.1rem;
  }
  .nav-menu a{font-size:.95rem;padding:.6rem .8rem}
  .nav-cta-li{margin:0 0 0 .5rem}
}

/* ================= HERO ================= */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff;background:var(--carbon)}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center right}
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(38,38,36,.88) 0%, rgba(38,38,36,.55) 40%, rgba(38,38,36,.15) 75%, rgba(38,38,36,.35) 100%);
}
.hero-content{
  position:relative;z-index:1;width:100%;
  max-width:var(--container);margin-inline:auto;
  padding:var(--space-inner);padding-bottom:clamp(4rem,10vh,7rem);
}
.hero .eyebrow-es{color:var(--musgo);font-size:clamp(1.05rem,1.8vw,1.35rem);margin-bottom:1rem}
.hero h1{font-size:var(--fs-h1);max-width:20ch;margin-bottom:1rem;color:#fff}
.hero-sub{font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:52ch;margin-bottom:.75rem}
.hero-locality{font-size:var(--fs-small);color:var(--piedra);margin-bottom:1.75rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem}
.hero-ctas .btn{flex:1 1 100%}
@media (min-width:600px){.hero-ctas .btn{flex:0 0 auto}}
@media (min-width:1024px){.hero-content{padding-bottom:8rem}.hero h1{max-width:18ch}}

.edge-divider{display:block;width:100%;height:auto;margin-top:-1px}

/* ================= VALUES ================= */
.values-grid{display:grid;gap:1.25rem;margin-top:2rem}
.value-card{display:flex;align-items:flex-start;gap:1rem}
.value-icon{flex:0 0 48px;width:48px;height:48px;color:var(--verde)}
.value-icon svg{width:100%;height:100%}
.value-card h3{margin-bottom:.35rem}
.value-es{display:block;font-size:var(--fs-small);font-style:italic;color:var(--tierra);margin-bottom:.35rem}
.value-card p{font-size:var(--fs-small);color:var(--gray)}
@media (min-width:768px){.values-grid{grid-template-columns:repeat(2,1fr);gap:2rem}}
@media (min-width:1024px){.values-grid{grid-template-columns:repeat(4,1fr)}.value-card{display:block}.value-icon{margin-bottom:.9rem}}

/* ================= SERVICES ================= */
.service-split{display:grid;gap:2rem;align-items:center}
.service-media img{border-radius:var(--radius);aspect-ratio:3/2;object-fit:cover;width:100%}
.service-copy p{margin-bottom:1.25rem}
.service-list{
  list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  gap:.5rem 1rem;margin:0 0 1.5rem;font-size:var(--fs-small);
}
.service-list li{display:flex;gap:.5rem;align-items:baseline}
.service-list li::before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--musgo);transform:translateY(-1px)}
@media (min-width:768px){
  .service-split{grid-template-columns:1fr 1fr;gap:3rem}
  .service-split.flip .service-media{order:2}
}

/* ================= SERVICE AREAS ================= */
.areas-wrap{display:grid;gap:2.5rem;align-items:center}
.area-chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-block:1.5rem;list-style:none}
.area-chip{
  display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.1rem;
  background:var(--white);border:2px solid var(--verde);border-radius:999px;
  font-weight:700;font-size:var(--fs-small);color:var(--verde);
}
.areas-note{font-size:var(--fs-small);color:var(--gray)}
.areas-art{max-width:480px;margin:2.5rem auto 0}
.areas-art svg{display:block;width:100%;height:auto}
@media (min-width:1024px){
  .areas-wrap{grid-template-columns:3fr 2fr}
  .areas-art{margin:0;max-width:none}
}

/* ================= GALLERY ================= */
.gallery-intro{margin-bottom:2.25rem}
.ba-slider{
  position:relative;max-width:900px;margin-inline:auto;
  border-radius:var(--radius);overflow:hidden;
  aspect-ratio:3/2;background:var(--carbon);
  touch-action:none;
}
.ba-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba-before-wrap{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba-handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px;background:#fff;
  transform:translateX(-50%);pointer-events:none;
}
.ba-handle::after{
  content:"◂ ▸";display:flex;align-items:center;justify-content:center;
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:#fff;color:var(--carbon);
  font-size:.8rem;font-weight:700;letter-spacing:-1px;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.ba-range{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:ew-resize;margin:0;
}
.ba-range:focus-visible ~ .ba-handle::after{outline:2px solid var(--musgo);outline-offset:2px}
.ba-label{
  position:absolute;bottom:.9rem;padding:.3rem .8rem;border-radius:4px;
  background:rgba(38,38,36,.75);color:#fff;font-size:var(--fs-small);font-weight:700;
  pointer-events:none;
}
.ba-label-before{left:.9rem}
.ba-label-after{right:.9rem}
.ba-caption{text-align:center;font-size:var(--fs-small);color:var(--gray);margin-top:.9rem}

.gallery-grid{display:grid;gap:1.25rem;margin-top:3rem;list-style:none}
.gallery-grid figure{position:relative;border-radius:var(--radius);overflow:hidden;margin:0}
.gallery-grid img{aspect-ratio:3/2;object-fit:cover;width:100%}
.gallery-grid figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:1.5rem .9rem .7rem;color:#fff;font-size:var(--fs-small);font-weight:700;
  background:linear-gradient(to top, rgba(38,38,36,.8), transparent);
}
@media (min-width:600px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}

/* ================= PROCESS ================= */
.process-steps{list-style:none;counter-reset:step;display:grid;gap:2rem;margin-top:2.5rem;position:relative}
.process-step{position:relative;padding-left:4.25rem}
.process-step::before{
  counter-increment:step;content:counter(step);
  position:absolute;left:0;top:0;
  display:flex;align-items:center;justify-content:center;
  width:3rem;height:3rem;border-radius:50%;
  background:var(--verde);color:#fff;font-weight:700;font-size:1.25rem;
}
.process-step h3{margin-bottom:.4rem}
.process-step .step-es{font-style:italic;color:var(--tierra);font-weight:400}
.process-step p{font-size:var(--fs-small);color:var(--gray)}
@media (min-width:1024px){
  .process-steps{grid-template-columns:repeat(4,1fr);gap:2.5rem}
  .process-step{padding-left:0;padding-top:4.25rem}
  .process-step::before{top:0;left:0}
}

/* ================= TESTIMONIALS ================= */
.testimonials{background:var(--verde);color:#fff}
.testimonials h2{color:#fff}
.testimonials .section-lead{color:var(--piedra);margin-bottom:2.5rem}
.testimonial-grid{display:grid;gap:1.25rem}
.testimonial-card{
  background:#fff;color:var(--carbon);border-radius:var(--radius);
  padding:1.75rem;display:flex;flex-direction:column;gap:1rem;
}
.testimonial-card blockquote{font-size:var(--fs-body)}
.testimonial-card cite{font-style:normal;font-weight:700}
.testimonial-card .t-loc{display:block;font-weight:400;font-size:var(--fs-small);color:var(--tierra)}
@media (min-width:768px){.testimonial-grid{grid-template-columns:repeat(3,1fr)}}

/* ================= CONTACT ================= */
.contact-wrap{display:grid;gap:3rem}
.contact-lead{margin-bottom:1.75rem}
.contact-form{display:grid;gap:1.1rem}
.field label{display:block;font-weight:700;font-size:var(--fs-small);margin-bottom:.35rem}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:.7rem .9rem;
  font:400 1rem var(--font);color:var(--carbon);
  background:#fff;border:2px solid #C9C4B8;border-radius:6px;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--verde);outline-offset:1px;border-color:var(--verde);
}
.form-note{font-size:var(--fs-small);color:var(--gray)}
.hp-field{position:absolute;left:-9999px;height:0;overflow:hidden}
.contact-aside h3{margin-bottom:.75rem}
.contact-aside p{margin-bottom:1.1rem;font-size:var(--fs-small)}
.contact-tel{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:clamp(1.3rem,2.5vw,1.75rem);font-weight:700;
  color:var(--verde);text-decoration:none;margin-bottom:1rem;
}
@media (min-width:768px){
  .contact-wrap{grid-template-columns:3fr 2fr}
  .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
}

/* ================= FOOTER ================= */
.site-footer{background:var(--carbon);color:var(--piedra);padding-block:3.5rem 2rem}
.footer-grid{display:grid;gap:2.5rem}
.footer-brand img{width:150px;margin-bottom:1rem}
.footer-slogan{font-style:italic;color:var(--musgo);margin-bottom:.5rem}
.footer-grid h3{color:#fff;font-size:1rem;margin-bottom:.9rem}
.footer-grid ul{list-style:none}
.footer-grid li{margin-bottom:.5rem}
.site-footer a{color:var(--piedra);text-decoration:none;display:inline-block;padding-block:.2rem}
.site-footer a:hover{color:var(--musgo)}
.footer-legal{
  max-width:var(--container);margin:2.5rem auto 0;padding-inline:var(--space-inner);
  padding-top:1.5rem;border-top:1px solid rgba(237,233,224,.2);
  font-size:var(--fs-small);color:var(--gray);
}
@media (min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}

/* ================= MOBILE CALL BAR ================= */
.call-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;background:var(--verde);color:#fff !important;
  font-weight:700;text-decoration:none;
  transform:translateY(100%);transition:transform .25s ease;
}
.call-bar.show{transform:none}
@media (min-width:768px){.call-bar{display:none}}

/* ================= FAQ ================= */
.faq-wrap{max-width:820px}
.faq-list{margin-top:2rem;display:grid;gap:.75rem}
.faq-item{
  background:var(--piedra);border-radius:var(--radius);
  border:2px solid transparent;
}
.faq-item[open]{border-color:var(--musgo)}
.faq-item summary{
  cursor:pointer;font-weight:700;font-size:var(--fs-h3);
  padding:1.1rem 3rem 1.1rem 1.25rem;list-style:none;position:relative;
  min-height:44px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:1.25rem;top:50%;
  width:12px;height:12px;transform:translateY(-70%) rotate(45deg);
  border-right:2px solid var(--verde);border-bottom:2px solid var(--verde);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq-item summary:focus-visible{outline:2px solid var(--verde);outline-offset:2px;border-radius:var(--radius)}
.faq-item p{padding:0 1.25rem 1.25rem;font-size:var(--fs-body);color:var(--carbon);max-width:65ch}

/* ================= 404 ================= */
.p404{min-height:60svh;display:flex;align-items:center}
.p404-inner{text-align:left}
.p404 h1{font-size:var(--fs-h2);margin-bottom:1rem}
.p404-links{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.75rem}