/*
Theme Name: Astra Child - Jardin Hube
Theme URI: https://jardinhube.com/
Author: Jardines Hube
Author URI: https://jardinhube.com/
Description: Tema hijo de Astra para Jardin Hube. Diseño limpio, confiable y claro, orientado a servicios de mantención de jardines.
Template: astra
Version: 1.0.1
Text Domain: astra-child-jardinhube
*/

/* =========================================================
   0) VARIABLES, CONTENEDORES, BASE Y UTILIDADES GLOBALES
   ========================================================= */
:root{
  --green-800:#1b5e20;
  --green-700:#2E7D32;
  --green-600:#357F3A;
  --green-100:#EAF4EC;
  --green-050:#F7FAF7;
  --brown-300:#C7A97B;
  --gray-900:#111827;
  --gray-700:#374151;
  --gray-600:#4B5563;
  --gray-500:#6B7280;
  --gray-300:#E5E7EB;
  --white:#fff;
  --maxw:920px;
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.06);
  --site-pad: clamp(12px,2vw,24px);
  --header-h:72px;
}

/* Anchors: que las secciones no queden tapadas por el header */
html{ scroll-behavior:smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
#servicios, #proyectos, #nosotros, #contacto{ scroll-margin-top: calc(var(--header-h) + 12px); }

/* Fuerza contenedores de Astra a 100% + padding lateral del sitio */
.ast-container,
.ast-container-fluid,
.site-content .ast-container,
#masthead .ast-container,
.site-footer .ast-container{
  max-width: 100% !important;
  padding-left: var(--site-pad);
  padding-right: var(--site-pad);
}

/* Envoltorio genérico */
.wrap{
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding-left: var(--site-pad);
  padding-right: var(--site-pad);
}

/* Tarjetas y tipografías base */
.card{background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow); padding:28px; border:1px solid #EDF2EE}
.section{ padding: clamp(40px, 6vw, 72px) 0; }
.section-title{font-size: clamp(1.3rem, 1.4vw + .9rem, 1.6rem); color:var(--green-800); margin:0 0 8px}
.section-sub{color:var(--gray-500); margin:0 0 28px}
.lead, .section-sub { max-width: 62ch; }
h1.front-title{ font-size: clamp(1.6rem, 2.2vw + 1rem, 2.4rem); line-height:1.2; margin:0 0 12px; color:var(--green-800); font-weight:700 }

/* Botones */
.btn{display:inline-block; text-decoration:none; border:0; padding: clamp(10px, 1.6vw, 12px) clamp(14px, 2vw, 16px); border-radius:10px; font-weight:600; cursor:pointer; font-size:1rem}
.btn-primary{background:var(--green-700); color:var(--white)}
.btn-primary:hover{background:#25652A}
.btn-ghost{background:var(--white); color:var(--green-700); border:1px solid #E2E8E2}
.btn-sm{padding:10px 14px; font-size:.95rem}
@media (max-width: 480px){ .btn{ width:100%; } }

/* Banda de confianza (si la usas) */
.strip{background:var(--green-700); color:var(--white); padding:18px 0}
.strip .items{display:grid; gap:12px}
@media(min-width:720px){ .strip .items{grid-template-columns:repeat(4,1fr)} }
.pill{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:10px 14px; font-weight:600; display:inline-block}

/* =========================================================
   1) CABECERA (WP) – (Estilos de Astra se mantienen)
   (No añadiste reglas específicas aquí; dejamos variables/anchors)
   ========================================================= */

/* =========================================================
   2) HERO
   ========================================================= */
.hero{
  padding: clamp(24px, 3vw, 56px) var(--site-pad);
  background: linear-gradient(180deg, var(--green-100), var(--green-050));
}
@media (max-width: 960px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-media{ order: 1; }          /* opcional: imagen debajo del texto */
  .hero-media img{
    height: auto;
    max-height: 60vh;               /* tope por si la foto es muy alta */
  }
}
.hero .media{
  overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  border-radius:16px;
}
.hero .media img{
  display:block;
  width:100%;
  /* SOLO alto, sin tocar ancho */
  height: clamp(340px, 56vh, 520px);
  object-fit: cover;
  border-radius:14px;
}

.hero h1{ 
    font-size: clamp(28px, 4vw, 54px); 
    line-height:1.08;
    margin:0 0 12px; 
    
}
.hero .lead, .hero p{ 
    font-size: clamp(16px, 1.6vw, 20px);
    color:#4B5563;
}

.hero-inner{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); /* texto | imagen */
  align-items: center;         /* centra el texto contra la imagen */
  gap: clamp(16px, 2.5vw, 48px);
}

.hero-col {
    min-width:0;
}
.hero-media .hero-figure{
    margin:0;
}

/* (antiguo) — si ya no usas .hero-figure, mejor no aplicarlo */
/*
.hero-figure{ aspect-ratio: 4 / 3; }
.hero-figure img{ width:100%; height:100%; object-fit: cover; border-radius:14px; }
*/

/* =========================================================
   3) SERVICIOS (lista dentro de una sola tarjeta)
   ========================================================= */
#servicios .service-list{
  padding: 24px;
  border: 1px solid #E8ECEF;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}

#servicios .services-list{
  list-style:none;margin:0;padding:0;display:grid;gap:10px;
}

/* Fila */
#servicios .service-item{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 14px; background:#fff; border:1px solid #E2EFE6;
  border-radius:12px; box-shadow:0 8px 22px rgba(0,0,0,.06);
}
@media (hover:hover){
  #servicios .service-item:hover{ background:#FAFBFB; border-radius:10px; }
}

/* Icono (png) */
#servicios .icon-frame{
  inline-size: 2.25rem; block-size: 2.25rem;
  display:grid; place-items:center;
  background:#EAF4EC; border:1px solid #E2EFE6;
  border-radius:10px; box-shadow:0 8px 22px rgba(0,0,0,.06);
  flex:0 0 auto;
}
#servicios .icon-frame img{
  inline-size:1.25rem; block-size:1.25rem; display:block;
}

/* Texto del ítem */
#servicios .svc-body h3{
  margin:0 0 2px; font-size:1rem; font-weight:800; color:#1B5E20;
}
#servicios .svc-body p{
  margin:0; color:#4B5563; font-size:.95rem; line-height:1.55;
}

/* DOS columnas internas (opcional) */
@media (min-width:1024px){
  #servicios .services-list{ grid-template-columns:1fr 1fr; gap:6px 24px; }
  #servicios .service-item{ border-top:0; }
}

/* =========================================================
   4) PROYECTOS DESTACADOS
   ========================================================= */
.projects{ display:grid; gap:14px; grid-template-columns:repeat(3,1fr); }
@media (max-width: 980px){ .projects{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .projects{ grid-template-columns: 1fr; } }

.project figure{
  position:relative; border-radius:12px; overflow:hidden;
  border:1px solid #E5EEE7; box-shadow:var(--shadow);
}
.project img{ width:100%; height:340px; object-fit:cover; display:block; }
.project figcaption{
  position:absolute; left:10px; bottom:10px;
  background: rgba(17,24,39,.75); color:#fff;
  padding:6px 10px; border-radius:10px; font-weight:600; font-size:.95rem;
}

/* (Si usas una galería adicional en otro bloque) */
.gallery{display:grid; gap:10px}
.gallery img{width:100%; height: clamp(160px, 24vw, 220px); object-fit:cover; border-radius:12px; border:1px solid #EDF2EE; background:#f0f3f0}
@media(min-width:720px){ .gallery{grid-template-columns:repeat(3,1fr)} }

/* =========================================================
   5) NOSOTROS
   ========================================================= */
.about{display:grid; gap:18px; grid-template-columns:1.2fr .8fr}
@media (max-width:900px){ .about{grid-template-columns:1fr} }
.checks{margin:0; padding-inline-start:18px}

#nosotros p{ color:#4B5563; line-height:1.65; }

/* KPIs laterales */
#nosotros .kpi{
  background:#EAF4EC; border:1px solid #E2EFE6; border-radius:14px;
  padding:16px 20px; box-shadow:0 8px 22px rgba(0,0,0,.06); color:#2E3A46;
}
#nosotros .kpi + .kpi{ margin-top:14px; }
#nosotros .kpi .num{
  display:inline-block; margin-right:.5rem; font-weight:800; color:#1B5E20;
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.25rem); line-height:1;
}

/* Reducimos <strong> solo aquí para “confían” */
#nosotros strong{ font-size:.95em; font-weight:800; color:#1B5E20; }
#nosotros .kpi strong.confian{ font-size:.9em; }

/* =========================================================
   6) CONTACTO
   ========================================================= */
/* Fondo suave */
#contacto{ background: linear-gradient(180deg, var(--green-050) 0%, #fff 60%); }

/* Grid general: formulario | aside */
#contacto .wrap.contact{
  display:grid !important;
  grid-auto-flow: row dense;
  grid-template-columns: minmax(0, 1fr) clamp(440px, 32vw, 520px) !important;
  column-gap: clamp(22px, 2.6vw, 32px) !important;
  row-gap: clamp(14px, 2vw, 22px) !important;
  align-items:start;
}
#contacto .contact-form{ grid-column:1 !important; }
#contacto .contact-aside{ grid-column:2 !important; }

/* Tarjetas */
#contacto .card{
  background:#fff; border:1px solid #E5EEE7; border-radius:14px;
  box-shadow:var(--shadow);
}
#contacto .contact-form.card,
#contacto .contact-aside.card{ padding: clamp(24px, 2.6vw, 28px); }

/* Títulos */
#contacto .section-title{ margin:0 0 6px; font-size:1.75rem; line-height:1.2; font-weight:800; }
#contacto .section-sub{ margin:0 0 18px; color: var(--gray-500); }

/* Campos del formulario */
#contacto .form{ display:grid; gap:12px; }
#contacto .form label{ display:block; font-weight:600; color:#263238; margin:14px 0 6px; }
#contacto .form input[type="text"],
#contacto .form input[type="tel"],
#contacto .form input[type="email"],
#contacto .form textarea{
  width:100%; padding:12px 14px; border:1px solid #DFE3E8; border-radius:10px;
  background:#fff; outline:none; transition:border-color .2s, box-shadow .2s, background-color .2s;
  font-size:16px;
}
#contacto .form textarea{ min-height:140px; resize:vertical; }
#contacto .form input:focus,
#contacto .form textarea:focus{ border-color:#1B5E20; box-shadow:0 0 0 3px rgba(27,94,32,.14); }

/* Fila 2 cols (tel + correo) */
#contacto .form .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
#contacto .form .row-2 label{ margin-top:0; }
@media (max-width:560px){ #contacto .form .row-2{ grid-template-columns:1fr; } }

/* Botón principal */
#contacto .btn.btn-primary{
  display:block; width:100%; margin-top:14px; padding:14px 16px; border-radius:10px; border:0;
  color:#fff; font-weight:700; letter-spacing:.2px;
  background:linear-gradient(180deg,#2D7C35 0%,#236A2C 100%);
  box-shadow:0 8px 16px rgba(45,124,53,.25);
  transition:transform .06s ease, box-shadow .2s;
}
#contacto .btn.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 22px rgba(45,124,53,.28); }
#contacto .btn.btn-primary:active{ transform:translateY(0); box-shadow:0 6px 12px rgba(45,124,53,.22); }
#contacto .note{ margin-top:10px; font-size:.93rem; color:#6B7280; }

/* Aside pegajoso en desktop */
@media (min-width:960px){
  #contacto .contact-aside{ position: sticky; top: calc(var(--header-h, 72px) + 16px); }
}

/* =========================================================
   7) CARD CONTACT ASIDE (ajustes finos)
   ========================================================= */
#contacto .contact-aside h3{
  margin:.25rem 0 .35rem;
  color:#1B5E20; font-size:1.05rem; font-weight:800;
}
#contacto .contact-aside p{ margin:0 0 .75rem; color:#374151; }

/* ====== HERO: ajuste móvil (≤ 768px) ====== */
@media (max-width: 768px){

  /* 1) La tarjeta del hero pasa a 1 columna y forzamos el orden */
  .hero-inner{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .hero-col{ order: 1; }           /* texto arriba */
  .hero-media{ order: 2; }         /* imagen debajo */
  
  /* 2) La imagen ocupa el ancho completo y conserva su proporción */
  .hero-media .hero-figure{ margin: 0; }
  .hero-media img{
    width: 100% !important;
    height: auto !important;       /* sin altura fija */
    max-height: none !important;   /* evita recortes */
    border-radius: 12px;
    object-fit: cover;
  }

  /* 3) Botones más discretos */
  .hero .cta{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .hero .btn{
    padding: 10px 14px !important;  /* menos alto */
    font-size: 15px !important;
    line-height: 1.2;               /* evita que crezca de más */
    border-radius: 10px;
  }
  /* Si prefieres que los botones ocupen el ancho completo en móvil,
     descomenta lo siguiente:
  .hero .btn{ width: 100%; }
  */

  /* 4) Tipografía y respiración del bloque */
  .hero h1{ font-size: clamp(22px, 5vw, 28px); margin-bottom: 8px; }
  .hero .lead{ font-size: 15px; }
  .hero{ padding-left: var(--site-pad); padding-right: var(--site-pad); }
}

/* ===========================
   1) HERO — móvil
   =========================== */
@media (max-width: 900px){
  /* 1.1 Apilar: texto arriba, imagen abajo */
  .hero{ 
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .hero-inner{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  /* 1.2 Imagen: usar ancho completo y alto automático (sin recortes raros) */
  .hero .hero-media,
  .hero .media{ overflow: hidden; border-radius: 14px; }
  .hero .hero-media img,
  .hero .media img{
    width: 100% !important;
    height: auto !important;       /* ← clave: NO forzar altura */
    max-height: 60vh;              /* tope visual, opcional */
    object-fit: cover;
  }

  /* 1.3 Botones: que no ocupen todo el ancho */
  .cta{ display: flex; gap: 10px; flex-wrap: wrap; }
  .cta .btn{ width: auto !important; }      /* anula el 100% de alguna regla previa */
}

/* (si existe en tu CSS) esta regla hace que los botones se vean enormes en móvil; la anulamos arriba
@media (max-width: 480px){ .btn{ width:100%; } }
*/

/* ===========================
   2) NOSOTROS — píldoras/KPIs
   =========================== */
/* Si tus dos spans tienen clase .stat, los “recuperamos” visualmente */
#nosotros .stats{ display:grid; gap:12px; }     /* contenedor opcional */
#nosotros .stat{
  display:flex; align-items:center; gap:10px;
  background:#EAF4EC; border:1px solid #E2EFE6;
  border-radius:12px; padding:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}
#nosotros .stat strong{ color:#1B5E20; font-weight:800; }
#nosotros .stat .num{ font-size:1.1rem; }

/* Si en lugar de .stat usas .kpi, también lo cubrimos */
#nosotros .kpi{
  display:flex; align-items:center; gap:10px;
  background:#EAF4EC; border:1px solid #E2EFE6;
  border-radius:12px; padding:14px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}
#nosotros .kpi .num{ font-weight:800; color:#1B5E20; }

/* ===========================
   3) CONTACTO — móvil, aside debajo
   =========================== */
   
/* Desktop (dos columnas) */
#contacto .wrap.contact{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
  gap: clamp(18px, 2vw, 28px);
  align-items: start;
}

/* Mobile / ventanas pequeñas: apilar y forzar orden  */
@media (max-width:1024px){
  #contacto .wrap.contact{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: clamp(14px, 2.5vw, 20px) !important;
  }

  /* 2) Asegurar orden y columna de cada tarjeta */
  #contacto .contact-form{
    grid-column: 1 / -1 !important;  /* ocupa todo el ancho */
    order: 1 !important;              /* primero */
    width: 100% !important;
  }

  #contacto .contact-aside{
    grid-column: 1 / -1 !important;  /* ocupa todo el ancho */
    order: 2 !important;              /* después del form */
    position: static !important;      /* quita el sticky en móvil */
    width: 100% !important;
    margin-top: 0 !important;
  }

  /* 3) Campos Tel/Correo apilados */
  #contacto .form .row-2{
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Activa el sticky solo en escritorio */
@media (min-width: 960px){
  #contacto .contact-aside{
    position: sticky;
    top: calc(var(--header-h, 72px) + 16px);
  }
}