/* Carlos Herrera Tree Service — self-contained responsive stylesheet */

/* =================================================================
   01. VARIABLES GENERALES: colores, tipografías y configuración
   ================================================================= */
:root {
  --forest:#123d2b;
  --forest-deep:#0c2e21;
  --forest-dark:#0b241b;
  --green:#3d8b4b;
  --bright:#8ccc64;
  --orange:#ec7537;
  --orange-hover:#d95d25;
  --offwhite:#f6f8f4;
  --cream:#f0f5e9;
  --text:#20352a;
  --muted:#617066;
  --border:#dde8dc;
  --font:'DM Sans',Arial,sans-serif;
  --display:'Barlow Condensed','Arial Narrow',Arial,sans-serif
}


/* =================================================================
   02. ESTILOS BASE, TIPOGRAFÍA Y ELEMENTOS COMPARTIDOS
   ================================================================= */
* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:93px
}

body {
  margin:0;
  background:#fff;
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  line-height:1.6
}

a {
  text-decoration:none;
  color:inherit
}

button,input,select,textarea {
  font:inherit
}

button {
  cursor:pointer
}

img {
  max-width:100%;
  display:block
}

h1,h2,h3,p,figure {
  margin-top:0
}

h1,h2,h3 {
  line-height:1.08
}

h1,h2,h3,strong {
  font-weight:800
}

.container {
  width:min(1180px,calc(100% - 48px));
  margin-inline:auto
}

.icon {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none
}

.skip-link {
  position:absolute;
  left:-10000px;
  top:auto;
  z-index:999;
  background:#fff;
  padding:10px
}

.skip-link:focus {
  left:10px;
  top:10px
}


/* =================================================================
   03. BARRA SUPERIOR Y NAVEGACIÓN
   ================================================================= */
.topbar {
  background:#102e21;
  color:#deebdb;
  font-size:12px;
  font-weight:700
}

.topbar-inner,.topbar-inner>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.topbar-inner {
  min-height:36px
}

.topbar-inner span,.topbar-inner a {
  display:inline-flex;
  align-items:center;
  gap:7px
}

.topbar .icon {
  width:14px;
  height:14px;
  color:#addc84
}

.topbar a:hover {
  text-decoration:underline
}

.site-header {
  background:#fff;
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid #e7ece4;
  box-shadow:0 4px 22px rgba(15,39,24,.04)
}

.nav-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:91px;
  gap:22px
}

.brand img {
    width: 260px;
    max-height: none;
    height: auto;
    object-fit: contain;
}

.desktop-nav {
  display:flex;
  align-items:center;
  gap:25px
}

.desktop-nav a {
  font-size:13px;
  font-weight:800;
  color:#294334;
  transition:color .2s
}

.desktop-nav a:hover {
  color:var(--green)
}

.nav-cta {
  background:var(--forest);
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 17px;
  border-radius:6px;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
  transition:background .2s,transform .2s
}

.nav-cta .icon {
  width:17px
}

.nav-cta:hover,.btn-green:hover {
  background:#286448;
  transform:translateY(-1px)
}

.menu-toggle,.mobile-nav {
  display:none
}


/* =================================================================
   04. PORTADA PRINCIPAL (HERO)
   ================================================================= */
.hero {
  min-height:630px;
  position:relative;
  isolation:isolate;
  background:var(--forest-dark);
  display:flex;
  align-items:center;
  overflow:hidden
}

.hero-image {
  position:absolute;
  inset:0;
  background-image:url('assets/hero-tree-work.webp');
  background-size:cover;
  background-position:50% 43%;
  z-index:-3
}

.hero-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(6,29,20,.97) 0%,rgba(7,35,24,.91) 26%,rgba(5,34,22,.73) 46%,rgba(10,37,25,.1) 80%),linear-gradient(0deg,rgba(5,25,18,.45),transparent 34%);
  z-index:-2
}

.hero-inner {
  padding-block:105px 94px
}

.hero-copy {
  max-width:655px;
  color:#fff
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:#388845;
  font-size:12px;
  font-weight:900;
  letter-spacing:2px;
  line-height:1.3;
  text-transform:uppercase
}

.eyebrow .line {
  width:31px;
  height:3px;
  background:#86c85d;
  display:inline-block
}

.eyebrow-light {
  color:#c6ef9b
}

.hero h1 {
  font-family:var(--display);
  font-size:clamp(68px,8.2vw,113px);
  line-height:.85;
  letter-spacing:-1px;
  text-transform:uppercase;
  margin:24px 0 22px;
  font-weight:900
}

.hero h1 em,.area-copy h2 em,.contact-info h2 em {
  font-style:normal;
  color:#9bdf69
}

.hero-subheading {
  font-family:var(--display);
  font-size:clamp(28px,3vw,39px);
  font-weight:700;
  line-height:1.12;
  margin-bottom:17px;
  letter-spacing:.1px;
  max-width:550px
}

.hero-description {
  max-width:515px;
  color:#e0e8dc;
  font-size:16px;
  line-height:1.8;
  margin:0
}

.hero-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:22px;
  margin-top:31px
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  padding:16px 24px;
  border-radius:7px;
  border:0;
  font-weight:900;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.4px;
  line-height:1.3;
  transition:background .2s,transform .2s,box-shadow .2s
}

.btn .icon {
  width:20px;
  height:20px
}

.btn-orange {
  background:var(--orange);
  color:#fff;
  box-shadow:0 9px 24px rgba(199,71,26,.2)
}

.btn-orange:hover {
  background:var(--orange-hover);
  transform:translateY(-2px)
}

.btn-green {
  background:var(--forest);
  color:#fff
}


/* ==========================================
   TELÉFONOS DEL HERO
   ========================================== */

.hero-phone {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ICONO DEL TELÉFONO */

.hero-phone .round-icon {
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 50%;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

/* TEXTO Y NÚMEROS */

.hero-phone small,
.hero-phone strong {
    display: block;
    line-height: 1.25;
}

.hero-phone small {
    font-size: 11px;
    color: #c9d7cd;
}

.hero-phone strong {
    font-size: 20px;
}

/* ENLACES DE LLAMADA INDEPENDIENTES */

.hero-phone-numbers a {
    display: block;
    width: fit-content;
    color: inherit;
    text-decoration: none;
    margin-top: 4px;
}

/* SOLO SE SUBRAYA EL NÚMERO SELECCIONADO */

.hero-phone-numbers a:hover strong {
    text-decoration: underline;
}


.hero-note {
  color:#d3e7d0;
  font-size:12px;
  margin:30px 0 0;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-weight:700
}

.hero-note .icon {
  color:#a2d873;
  width:17px
}

.hero-note b {
  color:#84a990
}

.hero-scroll {
  position:absolute;
  right:43px;
  bottom:30px;
  color:#fff;
  font-size:10px;
  letter-spacing:1.7px;
  font-weight:800;
  display:flex;
  gap:12px;
  align-items:center;
  transform:rotate(-90deg);
  transform-origin:right bottom;
  opacity:.85
}

.hero-scroll span {
  font-size:20px
}


/* =================================================================
   05. BARRA DE CONFIANZA
   ================================================================= */
.trust-bar {
  background:var(--forest);
  color:#fff
}

.trust-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  min-height:111px;
  align-items:center
}

.trust-item {
  display:flex;
  align-items:center;
  gap:13px;
  padding:17px 25px;
  border-right:1px solid rgba(221,255,201,.19)
}

.trust-item:first-child {
  padding-left:0
}

.trust-item:last-child {
  border-right:0
}

.trust-icon {
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  color:#a6df77;
  flex:none
}

.trust-icon .icon {
  width:33px;
  height:33px;
  stroke-width:1.6
}

.trust-item strong,.trust-item small {
  display:block;
  line-height:1.35
}

.trust-item strong {
  font-size:13px;
  margin-bottom:4px
}

.trust-item small {
  font-size:11px;
  color:#c7dece
}


/* =================================================================
   06. SECCIONES GENERALES Y SERVICIOS
   ================================================================= */
.section {
  padding-block:104px
}

.section-heading {
  max-width:760px;
  margin-bottom:45px
}

.section-heading.centered {
  text-align:center;
  margin-inline:auto
}

.section-heading.centered .eyebrow {
  justify-content:center
}

.section-heading h2,.about-content h2,.gallery-heading h2,.faq-intro h2 {
  font-family:var(--display);
  font-weight:800;
  color:#153a28;
  font-size:clamp(36px, 4.5vw, 56px);
  letter-spacing:-.5px;
  margin:16px 0 14px;
  text-transform:uppercase
}

.section-heading h2 span,.about-content h2 span,.gallery-heading h2 span,.faq-intro h2 span {
  color:#4a9553
}

.section-heading p {
  color:var(--muted);
  max-width:590px;
  margin:0 auto;
  font-size:15px;
  line-height:1.85
}

.services-section {
  background:var(--offwhite)
}

.services-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}

.service-card {
  border-radius:11px;
  overflow:hidden;
  position:relative;
  min-height:275px;
  transition:transform .25s,box-shadow .25s
}

.service-card:hover {
  transform:translateY(-5px);
  box-shadow:0 15px 35px rgba(19,66,37,.12)
}

.featured-card {
  background:#0d3926;
  color:#fff;
  display:flex;
  align-items:flex-end;
  grid-column:span 1
}

.service-photo {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:62% center;
  opacity:.87
}

.featured-gradient {
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(8,39,24,1) 0%,rgba(8,39,24,.89) 47%,rgba(8,39,24,.02) 100%)
}

.service-content {
  position:relative;
  z-index:1;
  padding:27px
}

.service-number {
  font-size:11px;
  font-weight:900;
  letter-spacing:2px;
  color:#76b86d
}

.featured-card .service-number {
  color:#b7ec90
}

.service-card h3 {
  font-family:var(--display);
  font-size:29px;
  line-height:1.05;
  letter-spacing:.2px;
  text-transform:uppercase;
  margin:8px 0 10px
}

.service-card p {
  font-size:13px;
  line-height:1.7;
  margin-bottom:13px
}

.service-card a {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase
}

.service-card a .icon {
  width:16px;
  height:16px;
  transition:transform .2s
}

.service-card a:hover .icon {
  transform:translateX(4px)
}

.standard-card {
  background:#fff;
  border:1px solid #e3eadf;
  padding:24px 25px;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}

.standard-card h3 {
  color:#173e2b
}

.standard-card p {
  color:#607169;
  flex:1
}

.standard-card>a {
  color:#327a43
}

.service-icon {
  width:57px;
  height:57px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#e6f2df;
  color:#308348;
  margin-bottom:15px
}

.service-icon .icon {
  width:28px;
  height:28px;
  stroke-width:1.65
}

.standard-card .service-number {
  position:absolute;
  top:29px;
  right:25px;
  color:#aebcad
}

.other-services {
  display:grid;
  grid-template-columns:280px 1fr;
  align-items:center;
  gap:32px;
  background:#e8f0e3;
  border-radius:12px;
  margin-top:23px;
  padding:27px 32px
}

.other-intro h3 {
  font-size:17px;
  margin:0 0 2px;
  color:#1c4730
}

.other-intro p {
  font-size:12px;
  color:#5b705d;
  margin:0
}

.other-tags {
  display:flex;
  flex-wrap:wrap;
  gap:9px
}

.other-tags span {
  border:1px solid #b8d0b2;
  border-radius:30px;
  background:rgba(255,255,255,.68);
  color:#275637;
  font-size:12px;
  font-weight:800;
  padding:8px 12px
}


/* =================================================================
   07. SECCIÓN NOSOTROS
   ================================================================= */
.about-section {
  background:#fff
}

.about-grid {
  display:grid;
  grid-template-columns:1.04fr 1fr;
  align-items:center;
  gap:77px
}

.about-visual {
    position: relative;
    min-width: 0;
    min-height: 488px;
}

.about-visual > img {
    display: block;
    width: 100%;
    height: 488px;
    object-fit: cover;
    object-position: 48% 50%;
    border-radius: 13px;
}

.about-stamp {
  position:absolute;
  right:15px;
  bottom:30px;
  background:#e7f2db;
  box-shadow:0 10px 24px rgba(12,55,24,.15);
  padding:22px 28px 20px;
  color:var(--forest);
  border-radius:9px;
  border-left:6px solid #8ac85d
}

.about-stamp strong {
  font-family:var(--display);
  font-size:43px;
  display:block;
  line-height:1
}

.about-stamp span {
  font-weight:800;
  font-size:12px
}

.about-content h2 {
  margin-top:16px;
  font-size:clamp(36px, 3.5vw, 48px)
}

.about-content>p {
  color:#63756a;
  font-size:15px;
  line-height:1.9
}

.about-checks {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:19px 14px;
  margin:28px 0 29px
}

.about-checks div {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  font-weight:800
}

.about-checks .icon {
  width:19px;
  height:19px;
  color:#3f9548;
  stroke-width:3
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#277342;
  font-weight:900;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.35px;
  border-bottom:2px solid #9fd07a;
  padding-bottom:7px
}

.text-link:hover {
  color:#174d2d
}


/* =================================================================
   08. GALERÍA DE TRABAJOS
   ================================================================= */
.gallery-section {
    background: var(--cream);
    padding-bottom: 75px;
}

.gallery-heading {
  max-width:none;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px
}

.gallery-heading>p {
  max-width:360px;
  color:#63756a;
  font-size:14px;
  line-height:1.8
}

.gallery-heading h2 {
    margin-bottom: 0;
    font-size: clamp(36px, 4vw, 54px);
}

/* GALERÍA - DESKTOP */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.gallery-item {
    width: 100%;
    height: 310px;
}


/* FOTOGRAFÍAS DE LA GALERÍA */

.gallery-item {
    width: 100%;
    height: 310px;
    margin: 0;
    overflow: hidden;
    border-radius: 11px;
    position: relative;
    background: #cbdcca;
}


.gallery-item img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .3s
}

.gallery-item:hover img {
  transform:scale(1.045)
}

.gallery-item:after {
  content:"";
  position:absolute;
  inset:40% 0 0;
  background:linear-gradient(transparent,rgba(5,29,20,.81));
  pointer-events:none
}

.gallery-item figcaption {
  position:absolute;
  z-index:1;
  bottom:20px;
  left:21px;
  color:#fff;
  font-family:var(--display);
  font-weight:800;
  font-size:24px;
  text-transform:uppercase
}

.gallery-main img {
  object-position:65% center
}

.gallery-disclaimer {
  text-align:right;
  color:#6a7a6d;
  font-size:11px;
  margin:11px 2px 0;
  font-style:italic
}


/* =================================================================
   09. PASOS DEL SERVICIO
   ================================================================= */
.process-section {
  background:#fff
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  position:relative
}

.step {
  position:relative;
  text-align:center;
  padding:35px 27px 25px;
  background:#f6f8f4;
  border:1px solid #e5ebdf;
  border-radius:11px
}

.step-number {
  font-family:var(--display);
  font-size:67px;
  font-weight:900;
  line-height:1;
  color:#a0cb7a;
  margin-bottom:18px
}

.step h3 {
  font-family:var(--display);
  font-size:26px;
  text-transform:uppercase;
  color:#163d2a;
  margin:0 0 10px
}

.step p {
  font-size:13px;
  color:#67756e;
  max-width:275px;
  margin:auto;
  line-height:1.8
}


/* =================================================================
   10. ÁREAS DE SERVICIO
   ================================================================= */
.area-section {
  background:#153e2b;
  color:#fff;
  overflow:hidden
}

.area-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px;
  align-items:center;
  min-height:450px
}

.area-copy {
  padding:73px 0
}

.area-copy h2 {
  font-family:var(--display);
  font-size:clamp(36px, 4.5vw, 56px);
  font-weight:800;
  text-transform:uppercase;
  line-height:.96;
  margin:18px 0 18px
}

.area-copy>p {
  font-size:15px;
  color:#d4e6d8;
  line-height:1.8;
  max-width:480px
}

.area-cities {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:22px 0
}

.area-cities span {
  border:1px solid rgba(174,223,152,.38);
  border-radius:6px;
  padding:6px 10px;
  background:rgba(255,255,255,.06);
  font-size:12px;
  font-weight:700;
  color:#dceedd
}

.area-copy>small {
  color:#a8bdb0;
  font-size:10px;
  display:block;
  line-height:1.6
}


/* ==========================================
   MAPA REAL - AREA DE SERVICIO
   ========================================== */

.area-map {
    width: 100%;
    height: 360px;
    position: relative;
    border: 1px solid #3f7756;
    border-radius: 17px;
    overflow: hidden;
    background: #f1f3f0;
}

.area-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}


.map-lines {
  position:absolute;
  inset:-30%;
  opacity:.24;
  background-image:linear-gradient(30deg,transparent 48.7%,#6da46a 49%,#6da46a 50%,transparent 50.3%),linear-gradient(145deg,transparent 48.7%,#6da46a 49%,#6da46a 50%,transparent 50.3%);
  background-size:120px 85px,160px 110px;
  transform:rotate(-8deg)
}

.map-ring {
  position:absolute;
  border:1px solid rgba(173,233,133,.38);
  width:240px;
  height:240px;
  border-radius:50%;
  left:50%;
  top:47%;
  transform:translate(-50%,-50%)
}

.ring-two {
  width:350px;
  height:350px;
  border-style:dashed;
  border-color:rgba(173,233,133,.23)
}

.map-pin {
  position:absolute;
  left:50%;
  top:37%;
  transform:translate(-50%,-50%);
  width:55px;
  height:55px;
  border-radius:50%;
  background:#a6d965;
  color:#0e3d24;
  display:grid;
  place-items:center;
  box-shadow:0 0 0 9px rgba(160,216,102,.15)
}

.map-pin .icon {
  width:30px;
  height:30px
}

.map-label {
  position:absolute;
  top:55%;
  left:50%;
  transform:translateX(-50%);
  text-align:center;
  white-space:nowrap
}

.map-label strong {
  font-family:var(--display);
  font-size:36px;
  letter-spacing:.5px;
  display:block;
  line-height:1
}

.map-label small {
  font-size:11px;
  color:#c7f0b1;
  letter-spacing:1px;
  font-weight:900
}

.map-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#b5e58e;
  position:absolute;
  box-shadow:0 0 0 5px rgba(181,229,142,.13)
}

.dot-one {
  top:21%;
  left:27%
}

.dot-two {
  top:74%;
  left:22%
}

.dot-three {
  top:72%;
  right:19%
}


/* =================================================================
   11. PREGUNTAS FRECUENTES
   ================================================================= */
.faq-section {
  background:var(--offwhite)
}

.faq-grid {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:90px
}

.faq-intro h2 {
  font-size:clamp(36px, 4.5vw, 56px)
}

.faq-intro p {
  color:#647468;
  font-size:14px;
  line-height:1.85;
  max-width:355px;
  margin-bottom:25px
}

.faq-list {
  border-top:1px solid #d7e3d5
}

.faq-list details {
  border-bottom:1px solid #d7e3d5;
  padding:21px 5px
}

.faq-list summary {
  list-style:none;
  cursor:pointer;
  font-weight:800;
  font-size:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}

.faq-list summary::-webkit-details-marker {
  display:none
}

.faq-list summary span {
  display:grid;
  place-items:center;
  color:#2e7d42;
  background:#e6f0df;
  width:32px;
  height:32px;
  flex:none;
  border-radius:50%;
  font-size:23px;
  font-weight:500;
  line-height:1
}

.faq-list details[open] summary span {
  transform:rotate(45deg)
}

.faq-list details p {
  font-size:14px;
  color:#66766b;
  margin:12px 39px 0 0;
  line-height:1.8
}


/* =================================================================
   12. CONTACTO Y FORMULARIO
   ================================================================= */
.contact-section {
  background:linear-gradient(125deg,#103924 0%,#205b38 67%,#17462d 100%);
  color:#fff;
  padding-block:89px
}

.contact-grid {
  display:grid;
  grid-template-columns:.8fr 1fr;
  gap:80px;
  align-items:center
}

.contact-info h2 {
  font-family:var(--display);
  font-size:clamp(36px, 4.5vw, 56px);
  line-height:.92;
  text-transform:uppercase;
  margin:19px 0 21px
}

.contact-info>p {
  color:#d9e7dc;
  font-size:15px;
  line-height:1.9;
  margin:0 0 34px;
  max-width:365px
}

.contact-method {
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 24px
}

.contact-method>span {
  height:48px;
  width:48px;
  display:grid;
  place-items:center;
  border:1px solid #4b825d;
  border-radius:9px;
  color:#b3e581;
  flex:none
}

.contact-method .icon {
  height:22px;
  width:22px
}

.contact-method small {
  font-size:10px;
  letter-spacing:1.5px;
  color:#add3b6;
  font-weight:900;
  display:block
}

.contact-method a,.contact-method strong {
  font-weight:800;
  font-size:16px;
  overflow-wrap:anywhere
}

.contact-method a:hover {
  text-decoration:underline
}

.contact-foot {
  margin-top:30px!important;
  font-size:12px!important;
  display:flex;
  gap:8px;
  align-items:center
}

.contact-foot .icon {
  color:#9ddd75
}

.form-card {
  background:#fff;
  color:var(--text);
  border-radius:12px;
  padding:33px;
  box-shadow:0 20px 40px rgba(0,0,0,.15)
}

.form-head h3 {
  font-family:var(--display);
  font-size:36px;
  line-height:1;
  margin:0 0 7px;
  text-transform:uppercase;
  color:#173e29
}

.form-head p {
  color:#738074;
  font-size:13px;
  margin:0 0 24px
}

.field-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px
}

.form-card label {
  font-size:12px;
  font-weight:800;
  display:block;
  margin-bottom:15px;
  color:#33483a
}

.form-card label span {
  color:#d86734
}

.form-card input,.form-card textarea,.form-card select {
  display:block;
  margin-top:7px;
  padding:12px 13px;
  border-radius:6px;
  border:1px solid #d9e4d9;
  background:#fbfcfa;
  width:100%;
  color:#213b2c;
  outline:none;
  transition:border .2s,box-shadow .2s;
  font-size:13px
}

.form-card select {
  appearance:auto;
  cursor:pointer
}

.form-card textarea {
  resize:vertical;
  min-height:110px
}

.form-card input:focus,.form-card textarea:focus,.form-card select:focus {
  border-color:#499b58;
  box-shadow:0 0 0 3px rgba(73,155,88,.13)
}

.form-card input::placeholder,.form-card textarea::placeholder {
  color:#9baba0
}

.submit-btn {
  width:100%;
  margin-top:2px
}

.form-legal {
  color:#79847b;
  font-size:11px;
  line-height:1.7;
  margin:14px 0 0;
  text-align:center
}

.form-legal a {
  text-decoration:underline
}

.honey {
  position:absolute!important;
  left:-9999px!important;
  height:0!important;
  overflow:hidden!important
}

.form-alert {
  padding:12px 15px;
  border-radius:7px;
  margin-bottom:18px;
  font-size:13px;
  font-weight:700
}

.form-alert.success {
  background:#e5f5e2;
  color:#216035
}

.form-alert.error {
  background:#fff0eb;
  color:#9b3e27
}

.form-alert[hidden] {
  display:none!important
}


/* =================================================================
   13. PIE DE PÁGINA Y BOTÓN FLOTANTE
   ================================================================= */
.site-footer {
  background:#f5f8f1;
  color:#23432e
}

.footer-grid {
  padding-block:56px 42px;
  display:grid;
  grid-template-columns:1.6fr .7fr .8fr 1.1fr;
  gap:44px
}

.footer-brand img {
    width: 250px;
    height: auto;
    object-fit: contain;
    margin-bottom: 16px;
}

.footer-brand p {
  font-size:12px;
  line-height:1.8;
  color:#627265;
  max-width:305px
}

.footer-grid h3 {
  font-family:var(--display);
  font-size:20px;
  text-transform:uppercase;
  margin:8px 0 17px
}

.footer-grid>div:not(:first-child) a,.footer-grid>div:not(:first-child) span {
  font-size:12px;
  display:block;
  margin-bottom:10px;
  color:#647567;
  overflow-wrap:anywhere
}

.footer-grid a:hover {
  color:#2c8544!important;
  text-decoration:underline
}

.footer-bottom {
  border-top:1px solid #dce8d9;
  min-height:61px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#708272;
  font-size:11px
}

.footer-bottom a {
  font-weight:800;
  color:#306c42
}

.floating-call {
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:70;
  background:#e56e30;
  color:#fff;
  box-shadow:0 9px 32px rgba(0,0,0,.2);
  border-radius:40px;
  padding:13px 18px;
  display:flex;
  align-items:center;
  gap:9px;
  font-size:13px;
  font-weight:900;
  transition:transform .2s
}

.floating-call:hover {
  transform:translateY(-3px)
}


/* =================================================================
   14. RESPONSIVE: PANTALLAS MENORES DE 1150 PX
   ================================================================= */
@media(max-width:1150px) {
  .brand img {
    width:250px
  }
  .desktop-nav {
    gap:13px
  }
  .desktop-nav a {
    font-size:12px
  }
  .nav-cta {
    font-size:12px
  }
  .trust-item {
    padding:15px
  }
  .trust-icon {
    width:35px;
    height:35px
  }
  .trust-item small {
    font-size:10px
  }
  .about-grid {
    gap:50px
  }
  .contact-grid {
    gap:45px
  }
}


/* =================================================================
   15. RESPONSIVE: TABLETS Y MENÚ MÓVIL (970 PX)
   ================================================================= */
@media(max-width:970px) {
  .desktop-nav,.nav-cta {
    display:none
  }
  .menu-toggle {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    width:45px;
    height:45px;
    border:1px solid #cfe0d1;
    background:#f2f7f0;
    border-radius:8px
  }
  .menu-toggle span {
    height:2px;
    width:21px;
    background:#1d4b31;
    display:block
  }
  .mobile-nav {
    display:flex;
    flex-direction:column;
    background:#fff;
    padding:0 24px 20px;
    border-top:1px solid #eef1e9
  }
  .mobile-nav[hidden] {
    display:none
  }
  .mobile-nav a {
    border-bottom:1px solid #e8eee7;
    font-size:14px;
    font-weight:800;
    padding:12px 0
  }
  .hero {
    min-height:590px
  }
  .trust-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .trust-item:nth-child(2) {
    border-right:0
  }
  .trust-item:nth-child(-n+2) {
    border-bottom:1px solid rgba(221,255,201,.19)
  }
  .trust-item:first-child {
    padding-left:15px
  }
  .services-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .about-grid {
    gap:35px
  }
  .about-visual,.about-visual>img {
    min-height:430px;
    height:430px
  }
  .about-checks {
    grid-template-columns:1fr
  }
  .gallery-grid {
    gap:12px
  }
  .gallery-item {
    height:250px
  }
  .gallery-item figcaption {
    font-size:20px
  }
  .faq-grid {
    gap:40px
  }
  .footer-grid {
    grid-template-columns:1.2fr .8fr .8fr
  }
  .footer-grid>div:last-child {
    grid-column:span 3
  }
}



/* =================================================================
   16. RESPONSIVE: TELÉFONOS (700 PX)
   ================================================================= */

@media (max-width: 700px) {

    /* ==========================================
       CONTENEDOR GENERAL
       ========================================== */

    .container {
        width: calc(100% - 34px);
        max-width: 1180px;
        margin-inline: auto;
    }


    /* ==========================================
       BARRA SUPERIOR
       ========================================== */

    .topbar-inner {
        justify-content: center;
        min-height: 34px;
        font-size: 10px;
    }

    .topbar-hours,
    .topbar-inner > div {
        display: none !important;
    }


    /* ==========================================
       HEADER Y LOGO
       ========================================== */

    .nav-inner {
        height: 75px;
    }

    .brand img {
        width: 235px;
    }


    /* ==========================================
       HERO PRINCIPAL
       ========================================== */

    .hero {
        min-height: 640px;
        align-items: flex-end;
    }

    .hero-image {
        background-position: 62% 45%;
    }

    .hero-overlay {
        background: linear-gradient(
            0deg,
            rgba(5, 28, 19, .98) 1%,
            rgba(5, 28, 19, .94) 38%,
            rgba(5, 28, 19, .53) 83%,
            rgba(5, 28, 19, .22)
        );
    }

    .hero-inner {
        padding: 90px 0 46px;
    }

    .hero h1 {
        font-size: clamp(70px, 17vw, 96px);
        margin: 20px 0 15px;
    }

    .hero-subheading {
        font-size: 29px;
    }

    .hero-description {
        font-size: 14px;
        max-width: 510px;
    }

    .hero-actions {
        gap: 18px;
    }

    .hero-phone strong {
        font-size: 17px;
    }

    .hero-note {
        font-size: 11px;
        gap: 7px;
    }

    .hero-scroll {
        display: none;
    }


    /* ==========================================
       BARRA DE CONFIANZA
       ========================================== */

    .trust-grid {
        grid-template-columns: 1fr 1fr;
        min-height: 0;
        padding: 16px 0;
    }

    .trust-item {
        gap: 7px;
        padding: 12px 4px !important;
    }

    .trust-icon {
        width: 30px;
        height: 30px;
    }

    .trust-icon .icon {
        width: 27px;
        height: 27px;
    }

    .trust-item strong {
        font-size: 11px;
    }

    .trust-item small {
        font-size: 10px;
    }


    /* ==========================================
       SECCIONES Y TÍTULOS
       ========================================== */

    .section {
        padding-block: 72px;
    }

    .section-heading {
        margin-bottom: 31px;
    }

    .section-heading h2,
    .about-content h2,
    .gallery-heading h2,
    .faq-intro h2 {
        font-size: clamp(42px, 10vw, 60px);
    }

    .section-heading p {
        font-size: 14px;
    }


    /* ==========================================
       SERVICIOS
       ========================================== */

    .services-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .featured-card {
        min-height: 340px;
    }

    .standard-card {
        min-height: 210px;
        padding: 22px;
    }

    .service-card h3 {
        font-size: 27px;
    }

    .other-services {
        grid-template-columns: 1fr;
        gap: 19px;
        padding: 22px;
    }


    /* ==========================================
       ABOUT / WHY CHOOSE US
       ========================================== */

    .about-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .about-visual {
        min-height: 310px;
    }

    .about-visual > img {
        height: 310px;
    }

    .about-stamp {
        right: 13px;
        bottom: -17px;
        padding: 13px 17px;
    }

    .about-stamp strong {
        font-size: 33px;
    }

    .about-content h2 {
        margin: 13px 0;
    }

    .about-checks {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }


    /* ==========================================
       GALERÍA - VERSIÓN MÓVIL CORREGIDA
       ========================================== */

    /* Aseguramos que la galería use el ancho
       disponible sin desplazarse a la derecha */

    .gallery-section .container {
        width: calc(100% - 34px);
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .gallery-heading {
        display: block;
    }

    .gallery-heading > p {
        margin-top: 14px;
    }

    /* Una sola columna */

    .gallery-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    /* Las tres tarjetas tendrán el mismo tamaño */

    .gallery-item,
    .gallery-main {
        grid-column: auto;
        width: 100%;
        min-width: 0;
        height: 275px;
        margin: 0;
    }

    /* Las imágenes llenan su tarjeta
       sin deformarse */

    .gallery-item img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .gallery-disclaimer {
        text-align: left;
    }


    /* ==========================================
       HOW IT WORKS
       ========================================== */

    .steps {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .step {
        padding: 25px 25px 22px;
    }

    .step-number {
        font-size: 52px;
        margin-bottom: 10px;
    }


    /* ==========================================
       ÁREA DE SERVICIO Y MAPA
       ========================================== */

    .area-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .area-copy {
        padding: 66px 0 24px;
    }

    .area-map {
        margin-bottom: 63px;
        height: 290px;
    }


    /* ==========================================
       PREGUNTAS FRECUENTES
       ========================================== */

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .faq-intro p {
        max-width: 580px;
    }

    .faq-list details {
        padding: 18px 0;
    }


    /* ==========================================
       CONTACTO Y FORMULARIO
       ========================================== */

    .contact-section {
        padding-block: 68px;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .contact-info h2 {
        font-size: 67px;
    }

    .contact-info > p {
        max-width: 550px;
        margin-bottom: 25px;
    }

    .contact-method {
        margin-bottom: 16px;
    }

    .contact-foot {
        margin-top: 16px !important;
        margin-bottom: 0 !important;
    }

    .form-card {
        padding: 25px 22px;
    }


    /* ==========================================
       FOOTER
       ========================================== */

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 25px 20px;
    }

    .footer-brand {
        grid-column: span 2;
    }

    .footer-grid > div:last-child {
        grid-column: span 2;
    }

    .footer-bottom {
        gap: 15px;
        padding-block: 16px;
    }


    /* ==========================================
       BOTÓN FLOTANTE CALL NOW
       ========================================== */

    .floating-call {
        right: 14px;
        bottom: 13px;
        padding: 12px 16px;
    }

}

/* =================================================================
   17. RESPONSIVE: TELÉFONOS PEQUEÑOS (440 PX)
   ================================================================= */
@media(max-width:440px) {
  .topbar {
    font-size:10px
  }
  .brand img {
    width:215px
  }
  .hero h1 {
    font-size:clamp(66px,17vw,76px)
  }
  .hero-actions {
    display:flex;
    align-items:flex-start;
    flex-direction:column
  }
  .hero-phone {
    gap:10px
  }
  .hero-note {
    margin-top:23px
  }
  .trust-item {
    align-items:flex-start
  }
  .trust-icon {
    width:23px
  }
  .trust-icon .icon {
    width:22px;
    height:22px
  }
  .trust-item strong {
    font-size:10px
  }
  .trust-item small {
    font-size:9px
  }
  .about-checks {
    grid-template-columns:1fr
  }
  /* GALERÍA - PANTALLAS PEQUEÑAS */

.gallery-item,
.gallery-main {
    height: 275px;
}
  .gallery-item figcaption {
    font-size:17px;
    bottom:15px;
    left:13px
  }
  .field-row {
    grid-template-columns:1fr;
    gap:0
  }
  .form-head h3 {
    font-size:30px
  }
  .contact-info h2 {
    font-size:60px
  }
  .footer-grid {
    grid-template-columns:1fr 1fr
  }
}


/* =================================================================
   18. ACCESIBILIDAD: REDUCIR ANIMACIONES
   ================================================================= */
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important
  }
}