/* ==========================================================================
   Timbó Espacios Verdes — hoja de estilos compartida
   FASE 1: réplica de la base actual (WordPress + Elementor).
   Tokens aprobados. Los valores de tipografía y layout salen del CSS vivo
   (post-6 / post-10 / post-75 / post-80 / post-96).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Paleta aprobada */
  --verde: #2E7D32;        /* header, footer, botones, títulos, íconos */
  --verde-2: #81C784;      /* fondo sección servicios, hover nav, fondo íconos */
  --blanco: #FFFFFF;       /* fondo de página y texto sobre verde */
  --texto: #424242;        /* títulos y cuerpo */

  /* Verde de WhatsApp: viene del plugin Joinchat del sitio vivo, no del kit.
     Se replica tal cual en Fase 1. Ver nota en el informe de Fase 1. */
  --wa: #25D366;
  --wa-hover: #128C7E;

  /* Tipografías */
  --f-titulo: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-cuerpo: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-ui: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --container: 1140px;
  --container-ancho: 1600px;
  --radio: 5px;
}

/* --------------------------------------------------------------------------
   2. Reset mínimo
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--blanco);
  color: var(--texto);
  font-family: var(--f-cuerpo);
  font-weight: 400;
  line-height: 1.5;
}

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

a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 700;
  line-height: 1.2;
  color: var(--texto);
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

/* Enlace de salto — replica el "Ir al contenido" de WordPress */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--blanco);
  color: var(--verde);
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--verde-2); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   3. Contenedores
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.container--ancho { max-width: var(--container-ancho); }
.container--750 { max-width: 750px; }

.seccion { padding-block: 60px; }

/* --------------------------------------------------------------------------
   4. Botones (Poppins 400, 16px, capitalize, radio 5px)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 16px 55px;
  border: 0;
  border-radius: var(--radio);
  background-color: var(--verde);
  color: var(--blanco);
  font-family: var(--f-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-transform: capitalize;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s, color .3s;
}
.btn:hover,
.btn:focus {
  background-color: transparent;
  color: var(--verde);
}

/* --------------------------------------------------------------------------
   5. Header — verde, sticky en todos los dispositivos
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--verde);
}

/* Barra única y compacta: logo a la izquierda, nav a la derecha.
   El sitio vivo usaba dos bandas apiladas con el logo a 150px de alto; al ser
   sticky comía demasiado viewport. Acá va en una sola fila de ~72px. */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 8px;
}

.site-header__logo { display: block; flex: 0 0 auto; }
.site-header__logo img {
  width: auto;
  height: 56px;
  object-fit: contain;
}

/* Navegación */
.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.nav ul {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav a {
  position: relative;
  display: block;
  padding-block: 6px;
  color: var(--blanco);
  font-family: var(--f-cuerpo);
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-transform: capitalize;
  text-decoration: none;
  transition: color .3s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--verde-2);
  transition: width .3s;
}
.nav a:hover,
.nav a:focus,
.nav a[aria-current="page"] { color: var(--verde-2); }
.nav a:hover::after,
.nav a:focus::after,
.nav a[aria-current="page"]::after { width: 100%; }

/* Botón hamburguesa — color aprobado: verde secundario */
.nav-toggle {
  display: none;
  padding: 6px;
  border: 0;
  background: transparent;
  color: var(--verde-2);
  cursor: pointer;
}
.nav-toggle svg { width: 28px; height: 28px; fill: currentColor; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
/* El hero es full-bleed en el sitio vivo: sin max-width, padding lateral 3%. */
.hero__inner {
  display: flex;
  align-items: center;
  gap: 0;
  padding-inline: 3%;
}

.hero__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  width: 45%;
  padding-block: 40px;
  padding-right: 5%;
}

.hero__media { width: 55%; }

.hero__titulo { font-size: 55px; }

.hero__bajada {
  font-family: var(--f-cuerpo);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
}
.hero__bajada strong { font-weight: 700; }

.hero .btn { align-self: flex-start; }

/* Hero de la interna: H1 a 50px */
.hero--interna .hero__titulo { font-size: 50px; }
.hero--interna .hero__bajada { font-size: 18px; }

/* --------------------------------------------------------------------------
   7. Bloque "texto + grilla de 4 imágenes" (Sobre nosotros / Tareas incluidas)
   -------------------------------------------------------------------------- */
.split {
  display: flex;
  align-items: center;
  gap: 5%;
  min-height: 75vh;
  padding-block: 60px;
}

.split--70 { min-height: 70vh; }

.split__galeria {
  display: flex;
  gap: 25px;
  width: 55%;
}

.split__columna {
  display: flex;
  flex-direction: column;
  gap: 25px;
  width: 100%;
}

.split__texto {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 50%;
}

.split__texto h3 { font-size: 65px; }

.split__texto p {
  font-family: var(--f-cuerpo);
  font-size: 18px;
  font-weight: 300;
}

.split__texto .btn { align-self: flex-start; }

/* --------------------------------------------------------------------------
   8. Sección "Nuestros servicios" — fondo verde secundario
   -------------------------------------------------------------------------- */
/* Full-bleed: fondo y contenido ocupan todo el ancho, padding lateral 3%. */
.servicios {
  background-color: var(--verde-2);
  padding: 60px 3% 5%;
  text-align: center;
}

.servicios__titulo { font-size: 65px; }

.servicios__bajada {
  margin-top: 20px;
  font-family: var(--f-cuerpo);
  font-size: 18px;
  font-weight: 300;
  color: var(--texto);
}

.servicios__grid {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  margin-top: 40px;
}

.tarjeta { width: 25%; }

.tarjeta__img { margin-bottom: 16px; overflow: hidden; }
.tarjeta__img img { transition: transform .3s; width: 100%; }
.tarjeta:hover .tarjeta__img img { transform: scale(1.1); }

.tarjeta__titulo {
  font-family: var(--f-titulo);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: capitalize;
  color: var(--texto);
}
.tarjeta__titulo a { text-decoration: none; }

.tarjeta__desc {
  margin-top: 10px;
  font-family: var(--f-cuerpo);
  font-size: 16px;
  font-weight: 400;
  color: var(--verde);
}

/* --------------------------------------------------------------------------
   9. Icon-boxes ("Por qué elegirnos", "Beneficios del servicio")
   -------------------------------------------------------------------------- */
/* Full-bleed, igual que en el sitio vivo. */
.features {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  padding: 60px 3%;
}

.features__titulo { font-size: 65px; text-align: center; }

.features__grid {
  display: flex;
  justify-content: space-between;
  gap: 15%;
  width: 95%;
}

.feature { width: 25%; text-align: center; }

.feature__icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: var(--radio);
  background-color: var(--verde-2);
  color: var(--verde);
}
.feature__icono svg { width: 45px; height: 45px; fill: currentColor; }

.feature__titulo {
  margin-top: 16px;
  font-family: var(--f-titulo);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: capitalize;
  color: var(--texto);
}

.feature__desc {
  margin-top: 10px;
  font-family: var(--f-cuerpo);
  font-size: 16px;
  font-weight: 300;
  color: var(--texto);
}

/* Variante de la interna: 5 columnas, sin descripción */
.features__grid--5 { gap: 40px; }
.features__grid--5 .feature { width: 20%; }

/* --------------------------------------------------------------------------
   10. Listas con ícono
   -------------------------------------------------------------------------- */
.lista-iconos li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: 6px;
  font-family: var(--f-cuerpo);
  font-size: 16px;
  color: var(--texto);
}
.lista-iconos svg { flex: 0 0 auto; width: 8px; height: 8px; fill: var(--verde); }

/* --------------------------------------------------------------------------
   11. Sección "Casos de uso"
   -------------------------------------------------------------------------- */
.casos { display: flex; align-items: center; gap: 0; padding-block: 60px; }
.casos__texto { display: flex; flex-direction: column; gap: 15px; width: 50%; }
.casos__media { width: 50%; }

/* --------------------------------------------------------------------------
   12. "Por qué elegirnos" de la interna — fondo verde + foto
   -------------------------------------------------------------------------- */
.destacado {
  display: flex;
  align-items: stretch;
  background-color: var(--verde);
}

.destacado__foto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  width: 50%;
  min-height: 380px;
  padding: 40px;
  background-image: url("../img/plantas-agapantus-flor.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

.destacado__titulo {
  font-family: var(--f-titulo);
  font-size: 65px;
  font-weight: 600;
  line-height: 1;
  text-transform: capitalize;
  color: var(--blanco);
}

.destacado__items {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  padding: 40px;
}

.destacado__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 50px;
}

.destacado__item { width: 45%; }

.destacado__item h3 {
  font-family: var(--f-cuerpo);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--blanco);
}

/* --------------------------------------------------------------------------
   13. Bloque de contacto
   -------------------------------------------------------------------------- */
.contacto-bloque {
  scroll-margin-top: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding-block: 60px;
  text-align: center;
}

.contacto-bloque h3 { font-size: 65px; }

.contacto-bloque p {
  padding-inline: 20%;
  font-family: var(--f-cuerpo);
  font-size: 16px;
  font-weight: 300;
  color: var(--texto);
}

.contacto-bloque__wa {
  display: inline-block;
  align-self: center;
  color: var(--verde);
}
.contacto-bloque__wa svg { width: 50px; height: 50px; fill: currentColor; }

/* El formulario de Elementor se eliminó (decisión de la directiva). El bloque
   de contacto con las dos vías diferenciadas —WhatsApp y mail de empresas—
   todavía no está armado. */

/* --------------------------------------------------------------------------
   14. Footer — verde
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--verde);
  color: var(--blanco);
  padding-block: 40px;
}

/* 3 columnas 25% / 50% / 25%, la última alineada a la derecha. */
.site-footer__inner {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.site-footer__col--logo { width: 25%; }
.site-footer__col--texto { width: 50%; display: flex; flex-direction: column; justify-content: center; }
.site-footer__col--datos {
  width: 25%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

.site-footer__logo img { width: 100%; }

.site-footer p {
  font-family: var(--f-titulo);
  font-size: 16px;
  font-weight: 400;
  color: var(--blanco);
}

.site-footer .lista-iconos li {
  font-family: var(--f-titulo);
  font-size: 10px;
  font-weight: 400;
  color: var(--blanco);
}
.site-footer .lista-iconos svg { width: 12px; height: 12px; fill: var(--blanco); }
.site-footer .lista-iconos a { text-decoration: none; }
.site-footer .lista-iconos a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   15. Botón flotante de WhatsApp
        Réplica visual del botón de Joinchat del sitio vivo.
   -------------------------------------------------------------------------- */
.wa-float {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--wa);
  box-shadow: 1px 6px 24px 0 rgba(7, 94, 84, .24);
  color: var(--blanco);
  transition: background-color .2s linear;
}
.wa-float:hover { background-color: var(--wa-hover); }
.wa-float svg { width: 36px; height: 36px; fill: currentColor; }

/* --------------------------------------------------------------------------
   16. Breakpoints — 1024px y 767px, igual que el sitio vivo
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .site-header__logo img { height: 48px; }

  .hero__inner { flex-direction: column; min-height: 500px; padding-inline: 5%; }
  .hero__texto,
  .hero__media { width: 100%; }
  .hero__texto { padding-right: 35%; }
  .hero__titulo,
  .hero--interna .hero__titulo { font-size: 42px; }
  .hero__bajada,
  .hero--interna .hero__bajada { font-size: 16px; }

  .split {
    flex-direction: column-reverse;
    justify-content: space-around;
    gap: 63px;
    min-height: 100vh;
  }
  .split__galeria,
  .split__texto { width: 100%; }
  .split__galeria { gap: 20px; }
  .split__columna { gap: 30px; }
  .split__texto h3 { font-size: 42px; }

  .servicios { padding-inline: 5%; }
  .servicios__titulo { font-size: 42px; }
  .servicios__bajada { font-size: 14px; }
  .servicios__grid { flex-wrap: wrap; gap: 60px; }
  .tarjeta { width: calc(50% - 30px); }

  .features { padding-block: 8%; padding-inline: 5%; }
  .features__titulo { font-size: 42px; }
  .features__grid { flex-wrap: wrap; justify-content: space-evenly; gap: 95px; }
  .feature { width: 25%; }
  .features__grid--5 { gap: 60px; }
  .features__grid--5 .feature { width: 25%; }

  .casos { flex-direction: column; gap: 40px; }
  .casos__texto,
  .casos__media { width: 100%; }

  .destacado { flex-direction: column; }
  .destacado__foto,
  .destacado__items { width: 100%; }
  .destacado__titulo { font-size: 44px; }
  .destacado__grid { gap: 60px; }

  .contacto-bloque { padding-inline: 5%; }
  .contacto-bloque h3 { font-size: 42px; }
  .contacto-bloque p { font-size: 14px; padding-inline: 5%; }

  .btn { font-size: 14px; }
}

@media (max-width: 767px) {
  .site-header__logo img { height: 40px; }

  .nav-toggle { display: inline-flex; }

  .nav ul {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--blanco);
    display: none;
  }
  .nav[data-abierto="true"] ul { display: flex; }
  .nav a {
    padding: 14px 20px;
    color: var(--texto);
    font-family: var(--f-ui);
    font-size: 14px;
  }
  .nav a::after { display: none; }
  .nav a:hover,
  .nav a:focus,
  .nav a[aria-current="page"] { background-color: var(--verde-2); color: var(--blanco); }

  .hero__inner { min-height: 0; }
  .hero__texto { padding-right: 0; }
  .hero__titulo,
  .hero--interna .hero__titulo { font-size: 28px; line-height: 1.1; }
  .hero__bajada,
  .hero--interna .hero__bajada { font-size: 14px; }

  .split { min-height: 75vh; gap: 48px; }
  .split__galeria { justify-content: center; align-items: center; gap: 12px; }
  .split__columna { width: 45%; gap: 15px; }
  .split__texto h3 { font-size: 28px; line-height: 1.1; }

  .servicios__titulo { font-size: 28px; line-height: 1.1; }
  .servicios__grid { gap: 40px; }
  .tarjeta { width: 100%; }
  .tarjeta__titulo { font-size: 18px; }
  .tarjeta__desc { font-size: 14px; }

  .features { padding-block: 15%; }
  .features__titulo { font-size: 28px; line-height: 1.1; }
  .features__grid { justify-content: center; gap: 45px; }
  .feature { width: 90%; }
  .features__grid--5 { gap: 45px; }
  .features__grid--5 .feature { width: 90%; }
  .feature__titulo { font-size: 18px; }
  .feature__desc { font-size: 14px; }

  .destacado__titulo { font-size: 32px; }
  .destacado__grid { justify-content: center; gap: 30px; }
  .destacado__item { width: 100%; }
  .destacado__item h3 { font-size: 17px; }

  .contacto-bloque h3 { font-size: 28px; line-height: 1.1; }
  .contacto-bloque p { padding-inline: 0; }

  .site-footer__inner { flex-direction: column; align-items: center; text-align: center; }
  .site-footer__col--logo,
  .site-footer__col--texto,
  .site-footer__col--datos { width: 100%; align-items: center; }
  .site-footer__logo img { max-width: 200px; margin-inline: auto; }
  .site-footer .lista-iconos li { justify-content: center; }
}