/* ==========================================================================
   Grow Tree Yourself — Landing Page
   Design tokens (primitive -> semantic -> component) + estilos.
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Primitivos — derivados por muestreo de imagenes/iconos/originals/logo.png */
  --c-cream-50: #fbf8f3;
  --c-cream-100: #f4eee2;
  --c-cream-200: #eae1cf;
  --c-brown-900: #2e1d0e;
  --c-brown-800: #4e3018;
  --c-brown-600: #7a5734;
  --c-teal-900: #1f3f3f;
  --c-teal-700: #2f5c5c;
  --c-teal-500: #4c7f7e;
  --c-teal-100: #e4eae1;
  --c-gray-600: #55534c;
  --c-white: #ffffff;

  /* Semanticos */
  --color-bg: var(--c-cream-100);
  --color-surface: var(--c-cream-50);
  --color-surface-alt: var(--c-cream-200);
  --color-ink: var(--c-brown-800);
  --color-ink-strong: var(--c-brown-900);
  --color-ink-soft: var(--c-brown-600);
  --color-accent: var(--c-teal-700);
  --color-accent-strong: var(--c-teal-900);
  --color-accent-soft: var(--c-teal-500);
  --color-body: var(--c-gray-600);
  --color-badge-bg: var(--c-teal-100);
  --color-border: rgba(78, 48, 24, 0.14);
  --color-invert-bg: var(--c-brown-800);
  --color-invert-text: var(--c-cream-100);
  --color-focus: var(--c-teal-700);

  /* Tipografia */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-h1: clamp(2.5rem, 1.7rem + 3.4vw, 4.4rem);
  --fs-h2: clamp(1.9rem, 1.55rem + 1.6vw, 2.75rem);
  --fs-h3: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  /* Espaciado */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Layout */
  --container-w: 1180px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* Radios / sombras / transiciones */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-leaf: 62% 38% 55% 45% / 48% 42% 58% 52%;
  --shadow-soft: 0 18px 40px -22px rgba(46, 29, 14, 0.35);
  --shadow-card: 0 10px 30px -18px rgba(46, 29, 14, 0.28);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-normal: 320ms;
}

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

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

body {
  margin: 0;
  background-color: var(--color-bg);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  background-image: url("../imagenes/iconos/agua2-bg-1200.jpg");
  background-image: -webkit-image-set(url("../imagenes/iconos/agua2-bg-1200.webp") 1x);
  background-image: image-set(url("../imagenes/iconos/agua2-bg-1200.webp") type("image/webp"), url("../imagenes/iconos/agua2-bg-1200.jpg") type("image/jpeg"));
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 900px) {
  body {
    background-image: url("../imagenes/iconos/agua2-bg-2400.jpg");
    background-image: -webkit-image-set(url("../imagenes/iconos/agua2-bg-2400.webp") 1x);
    background-image: image-set(url("../imagenes/iconos/agua2-bg-2400.webp") type("image/webp"), url("../imagenes/iconos/agua2-bg-2400.jpg") type("image/jpeg"));
  }
}

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

[hidden] {
  display: none !important;
}

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

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

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

svg {
  display: block;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -60px;
  background: var(--color-ink);
  color: var(--color-invert-text);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top var(--dur-fast) var(--ease-out);
}

.skip-link:focus-visible {
  top: var(--sp-4);
}

:focus-visible {
  outline: 2.5px solid var(--color-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

.section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

/* Badge/pill reutilizable: mismo diseno que usaba el Hero (fondo verde claro,
   texto verde oscuro, icono a la izquierda). Se usa como "eyebrow" arriba
   del titulo en varias secciones, cada una con su propio icono y texto. */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--color-badge-bg);
  color: var(--color-accent-strong);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 600;
}

.badge-pill svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Variantes de .badge-pill para secciones donde el verde claro fijo no
   combina con el fondo propio de esa seccion. */

/* Reels vive en .section--alt (--color-surface-alt, un crema mas oscuro que
   el resto de la pagina); el verde claro del badge por defecto se ve casi
   del mismo tono que el fondo y queda plano. Esta variante usa un crema mas
   claro (--color-surface), de la misma familia que el fondo de la seccion,
   en vez del verde. */
.badge-pill--alt {
  background: var(--color-surface);
}

/* El panel de la app usa .section--invert (fondo marron oscuro); el verde
   claro fijo choca con ese fondo. Esta variante usa el mismo tratamiento
   "glass" (overlay crema translucido) que ya usan los demas elementos
   invertidos de esta seccion (ver .cta-app__badge, .social-btn--invert). */
.badge-pill--invert {
  background: rgba(244, 238, 226, 0.14);
  border: 1.5px solid rgba(244, 238, 226, 0.3);
  color: var(--color-invert-text);
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  margin-top: var(--sp-3);
  font-weight: 600;
}

.section__title em {
  color: var(--color-accent);
  font-style: italic;
}

.section__lead {
  font-size: var(--fs-lead);
  color: var(--color-body);
  margin-top: var(--sp-4);
  max-width: 62ch;
}

.section__head {
  max-width: 720px;
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

/* -------------------------------------------------------------------------
   4. Layout utilitario
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--sp-9);
}

.section--tight {
  padding-block: var(--sp-8);
}

.section--invert {
  background: var(--color-invert-bg);
  color: var(--color-invert-text);
}

/* Divisor "raiz" — motivo de marca reutilizado entre secciones */
.root-divider {
  display: block;
  width: 100%;
  height: 46px;
  color: var(--color-accent);
  opacity: 0.28;
}

.root-divider path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* -------------------------------------------------------------------------
   5. Botones
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.9rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-ink);
  color: var(--color-invert-text);
  box-shadow: var(--shadow-soft);
}

.btn--primary:hover {
  background: var(--color-accent-strong);
  transform: translateY(-2px);
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1.5px solid var(--color-border);
}

.btn--ghost:hover {
  border-color: var(--color-ink);
  transform: translateY(-2px);
}

.btn--on-invert {
  color: var(--color-invert-text);
  border-color: rgba(244, 238, 226, 0.4);
}

.btn--on-invert:hover {
  border-color: var(--color-invert-text);
  background: rgba(244, 238, 226, 0.08);
}

.btn--disabled {
  background: rgba(244, 238, 226, 0.14);
  color: rgba(244, 238, 226, 0.7);
  cursor: not-allowed;
  box-shadow: none;
  border: 1.5px solid rgba(244, 238, 226, 0.3);
}

.btn--disabled:hover {
  transform: none;
}

.btn--sm {
  padding: 0.55rem 1rem;
  font-size: var(--fs-small);
}

/* -------------------------------------------------------------------------
   6. Header / navegacion
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 238, 226, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-3);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.nav__logo {
  /* Lgrowtree-transparente.png es el wordmark ancho (no el emblema cuadrado),
     asi que el alto baja de 44px a 32px: a 44px el ancho resultante (~300px)
     no deja espacio para .nav__list + .nav__cta en el breakpoint de 900px
     donde aparecen por primera vez. */
  height: 32px;
  width: auto;
}

.nav__list {
  display: none;
  align-items: center;
  gap: var(--sp-6);
}

.nav__link {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-ink);
  position: relative;
  padding-block: var(--sp-1);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--color-accent);
  transition: right var(--dur-normal) var(--ease-out);
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
  right: 0;
}

.nav__cta {
  display: none;
}

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--sp-2);
}

.nav__toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform var(--dur-normal) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: var(--sp-1);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--color-border);
}

.nav__mobile.is-open {
  display: flex;
}

.nav__mobile .nav__link {
  padding: var(--sp-3) 0;
  font-size: 1.05rem;
}

@media (min-width: 900px) {
  .nav__list {
    display: flex;
  }
  .nav__cta {
    display: inline-flex;
  }
  .nav__toggle {
    display: none;
  }
  .nav__mobile {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------
   7. Hero
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-9) var(--sp-8);
}

.hero__grid {
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  margin-top: var(--sp-5);
  font-weight: 700;
  max-width: 15ch;
}

.hero__title em {
  color: var(--color-accent);
  font-style: italic;
  font-weight: 600;
}

.hero__subtitle {
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}

.hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* En movil el circulo comparte columna con el texto (layout apilado),
     asi que crece menos que en desktop para no verse desproporcionado
     ni empujar demasiado el contenido de abajo. En desktop (ver breakpoint
     860px) si recibe el +25% completo porque tiene su propia columna. */
  width: min(90%, 420px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

.hero__ring {
  position: absolute;
  inset: 0;
  color: var(--color-accent);
  opacity: 0.35;
  animation: spin-slow 60s linear infinite;
}

@keyframes spin-slow {
  to {
    transform: rotate(360deg);
  }
}

.hero__mark {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  /* Mismo fondo que la seccion (heredado de body), no un valor aparte,
     para que no se note transicion de color en los bordes transparentes
     del PNG del logo. */
  background-color: var(--color-bg);
  filter: drop-shadow(0 24px 40px rgba(46, 29, 14, 0.18));
}

@media (min-width: 860px) {
  .hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }

  .hero__visual {
    width: min(105%, 563px);
  }
}

/* -------------------------------------------------------------------------
   8. Mision / Vision / Objetivo (carrusel — layout compartido en seccion 10)
   ------------------------------------------------------------------------- */
.mvo-card {
  width: 100%;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
}

.mvo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px -20px rgba(46, 29, 14, 0.32);
}

.mvo-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.mvo-card__icon {
  /* -25% respecto al tamaño original (46px -> 34px), y en linea junto al
     titulo en vez de en su propia fila arriba (ver .mvo-card__head): asi
     ocupa mucho menos alto de tarjeta, sobre todo en mobile. */
  width: 34px;
  height: 34px;
  border-radius: var(--radius-leaf);
  background: var(--color-badge-bg);
  color: var(--color-accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mvo-card__icon svg {
  width: 16px;
  height: 16px;
}

.mvo-card__title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--color-ink);
  font-weight: 600;
}

.mvo-card__text {
  margin-top: var(--sp-3);
  font-size: 0.98rem;
}

/* -------------------------------------------------------------------------
   9. Quienes somos
   ------------------------------------------------------------------------- */
.about {
  position: relative;
}

.about__inner {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}

.about__ring-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  width: min(100%, 320px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  /* .about__photo se recorta a circulo via object-fit/border-radius, pero
     el rectangulo de origen (nosotrosimg.png) es cuadrado y opaco. Sin este
     fondo propio, el hueco entre el circulo real y su caja cuadrada dejaria
     ver la imagen de fondo de la pagina (agua2, ver seccion 16) detras del
     emblema — se ve como un error, no como diseno. En vez de eso toma un
     color solido propio para leerse como una medalla circular intencional,
     consistente con el resto de "tarjetas" opacas de la pagina (badge-pill,
     guide-card, etc.). */
  background-color: var(--color-surface-alt);
  border-radius: 50%;
}

.about__ring {
  width: 100%;
  height: 100%;
  color: var(--color-accent);
}

.about__photo {
  position: absolute;
  inset: 2%;
  width: 96%;
  height: 96%;
  margin: auto;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}

.about__quote {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--color-ink);
  font-weight: 500;
}

.about__quote em {
  color: var(--color-accent);
  font-style: italic;
}

@media (min-width: 860px) {
  .about__inner {
    grid-template-columns: 0.8fr 1.2fr;
  }
}

/* -------------------------------------------------------------------------
   10. Carrusel (compartido) — Mision/Vision/Objetivos, Guias, Reels
   ------------------------------------------------------------------------- */
.guides-carousel__controls,
.mvo-carousel__controls,
.reels-carousel__controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.carousel-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-badge-bg);
  color: var(--color-ink);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.carousel-btn:hover {
  background: var(--color-accent);
  color: var(--color-invert-text);
}

.carousel-btn svg {
  width: 20px;
  height: 20px;
}

/* Puntos indicadores: solo debajo del breakpoint "desktop" (900px), que es
   donde las flechas se ocultan y el carrusel pasa a manejarse por swipe. Sin
   estos puntos, una tarjeta que ocupa casi todo el ancho no da ninguna pista
   de que hay mas contenido a los lados. */
.carousel-dots {
  display: none;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  background: var(--color-border);
  transition: background var(--dur-fast) var(--ease-out), width var(--dur-fast) var(--ease-out);
}

.carousel-dot.is-active {
  width: 22px;
  border-radius: 999px;
  background: var(--color-accent);
}

/* Leve empujon automatico del track al entrar en pantalla, para sugerir que
   se puede deslizar (ver initCarouselPeekNudge en main.js). Es un transform
   sobre el track, no un scroll real: no interfiere con el swipe manual ni
   con el scrollLeft que gobierna el loop infinito. */
@keyframes carousel-peek-nudge {
  0%,
  100% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(-16px);
  }
}

@media (max-width: 899px) {
  /* Debajo del breakpoint "desktop" del sitio (ver .nav__list en 900px), la
     navegacion principal es swipe; las flechas quedan solo para desktop. */
  .guides-carousel__controls,
  .mvo-carousel__controls,
  .reels-carousel__controls {
    display: none;
  }

  .carousel-dots {
    display: flex;
  }

  .carousel-track--nudge {
    animation: carousel-peek-nudge 900ms var(--ease-out) 400ms 1;
  }
}

.guides-carousel,
.mvo-carousel,
.reels-carousel {
  margin-top: var(--sp-5);
}

.guides-carousel__viewport,
.mvo-carousel__viewport,
.reels-carousel__viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* El hover de .guide-card levanta la tarjeta y le agranda la sombra;
     este padding le da lugar para no quedar cortado por el overflow-x. */
  padding-block: var(--sp-3);
  margin-block: calc(var(--sp-3) * -1);
}

.guides-carousel__viewport::-webkit-scrollbar,
.mvo-carousel__viewport::-webkit-scrollbar,
.reels-carousel__viewport::-webkit-scrollbar {
  display: none;
}

.guides-grid,
.mvo-grid,
.reels-grid {
  display: flex;
  gap: var(--sp-5);
}

.guides-grid > li,
.mvo-grid > li,
.reels-grid > li {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.mvo-grid > li {
  /* Ancho reducido (antes 82%) para que se alcance a ver un adelanto parcial
     de la siguiente tarjeta en mobile: eso es lo que comunica que hay mas
     contenido a los lados sin necesitar texto extra. */
  width: 78%;
}

.guides-grid > li,
.reels-grid > li {
  /* Guias y Reels comparten exactamente la misma configuracion de ancho
     (antes Reels tenia su propio -50% independiente: se saco para que las
     dos secciones se vean uniformes en todo el sitio). -30% respecto al
     tamaño original de 78% (mismo criterio de peek que .mvo-grid > li). */
  width: 55%;
}

@media (min-width: 640px) {
  .mvo-grid > li {
    width: calc((100% - var(--sp-5)) / 2);
  }

  .guides-grid > li,
  .reels-grid > li {
    /* 3 tarjetas por fila (antes 2), ~-30% de ancho respecto al original. */
    width: calc((100% - 2 * var(--sp-5)) / 3);
  }
}

@media (min-width: 1024px) {
  .mvo-grid > li {
    width: calc((100% - 2 * var(--sp-5)) / 3);
  }

  .guides-grid > li,
  .reels-grid > li {
    /* 4 tarjetas por fila (antes 3), ~-30% de ancho respecto al original.
       Reels tiene solo 4 tarjetas reales (3 reels + "muy pronto"): a 4 por
       fila coincide justo con el total, sin duplicar contenido clonado del
       loop infinito dentro de la misma pantalla (ver maxVisible en
       initCarousels(), main.js). */
    width: calc((100% - 3 * var(--sp-5)) / 4);
  }
}

.guide-card {
  width: 100%;
  text-align: left;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-normal) var(--ease-out), box-shadow var(--dur-normal) var(--ease-out);
}

.guide-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px -20px rgba(46, 29, 14, 0.32);
}

.guide-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-badge-bg);
}

.guide-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-normal) var(--ease-out);
}

.guide-card:hover .guide-card__media img {
  transform: scale(1.06);
}

.guide-card__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent-strong);
}

.guide-card__media--placeholder svg {
  width: 42px;
  height: 42px;
  opacity: 0.6;
}

.guide-card__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
}

.guide-card__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-ink);
  font-weight: 600;
}

.guide-card__excerpt {
  font-size: 0.95rem;
  /* Recorta la intro a 3 lineas en la vista de tarjeta (el texto completo
     sigue disponible en el modal, ver openGuideModal() en main.js) para
     que la altura de la tarjeta no dependa de que tan larga sea la intro
     de cada guia. Sin flex:1: asi el boton CTA queda pegado justo debajo
     del texto en vez de empujado al fondo de la tarjeta. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guide-card__cta {
  align-self: flex-start;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-accent-strong);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.guide-card__cta svg {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-fast) var(--ease-out);
}

.guide-card:hover .guide-card__cta svg {
  transform: translateX(4px);
}

.guide-card--soon {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-6);
  color: var(--color-ink-soft);
  border-style: dashed;
  box-shadow: none;
}

.guide-card--soon:hover {
  transform: none;
}

/* Modal de guia */
.guide-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-5);
  overflow-y: auto;
}

.guide-modal.is-open {
  display: flex;
}

.guide-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(46, 29, 14, 0.55);
  backdrop-filter: blur(2px);
}

.guide-modal__panel {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  max-width: 640px;
  width: 100%;
  margin-block: auto;
  padding: var(--sp-7);
  box-shadow: 0 30px 60px -20px rgba(46, 29, 14, 0.5);
  animation: modal-in var(--dur-normal) var(--ease-out);
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.guide-modal__close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-badge-bg);
  color: var(--color-ink);
}

.guide-modal__close:hover {
  background: var(--color-accent);
  color: var(--color-invert-text);
}

.guide-modal__title {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--color-ink);
  padding-right: var(--sp-7);
}

.guide-modal__intro {
  margin-top: var(--sp-3);
  font-size: 1.02rem;
  color: var(--color-body);
}

.guide-modal__section {
  margin-top: var(--sp-6);
}

.guide-modal__section h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-accent-strong);
  font-weight: 600;
}

.guide-modal__section ul {
  margin-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.guide-modal__section li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: 0.97rem;
}

.guide-modal__section li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-leaf);
  background: var(--color-accent);
}

/* -------------------------------------------------------------------------
   11. Galeria de reels (carrusel — layout compartido en seccion 10)
   ------------------------------------------------------------------------- */
.reel-card {
  width: 100%;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.reel-card__frame {
  position: relative;
  /* 9:16 real (formato Short/Reel) pero con un tope mas bajo que el
     original (era 420px): a 420 la tarjeta ocupaba casi toda la pantalla
     en mobile. 300px es compacto sin dejar el video minusculo (no se buscó
     igualar la altura de Guías pixel a pixel, ver CLAUDE.md 5.5). */
  aspect-ratio: 9 / 16;
  background: var(--color-ink-strong);
  max-height: 300px;
  margin-inline: auto;
}

.reel-card__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.reel-card__play {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.reel-card__play:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.reel-card__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-fast) var(--ease-out);
}

.reel-card__play:hover .reel-card__thumb,
.reel-card__play:focus-visible .reel-card__thumb {
  transform: scale(1.02);
}

.reel-card__duration {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.reel-card__frame--soon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(244, 238, 226, 0.75);
  text-align: center;
  padding: var(--sp-5);
  font-size: 0.9rem;
}

.reel-card__body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.reel-card__title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-ink);
  font-weight: 600;
}

.reel-card__desc {
  font-size: 0.92rem;
}

.reel-card__channel-link {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: var(--color-badge-bg);
  color: var(--color-accent-strong);
  font-size: 0.82rem;
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.reel-card__channel-link:hover {
  background: var(--color-accent);
  color: var(--color-invert-text);
}

.share-btn svg {
  width: 14px;
  height: 14px;
}

/* -------------------------------------------------------------------------
   12. Viveros cercanos
   ------------------------------------------------------------------------- */
.nurseries__layout {
  display: grid;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

/* Aviso no bloqueante para cuando la busqueda tuvo que ampliar el radio;
   a diferencia de .nursery-status no cubre el mapa ni la lista. */
.nursery-note {
  grid-column: 1 / -1;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  background: var(--color-badge-bg);
  color: var(--color-accent-strong);
  font-size: 0.92rem;
  font-weight: 500;
}

.nursery-note[hidden] {
  display: none;
}

.map-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
  min-height: 360px;
  background: var(--color-surface-alt);
}

#nursery-map {
  width: 100%;
  height: 100%;
  min-height: 360px;
}

.nursery-status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  text-align: center;
  padding: var(--sp-6);
  background: var(--color-surface-alt);
}

.nursery-status[hidden] {
  display: none;
}

.nursery-status svg {
  width: 40px;
  height: 40px;
  color: var(--color-accent-strong);
}

.nursery-status__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--color-ink);
  font-weight: 600;
}

.nursery-status__text {
  font-size: 0.95rem;
  max-width: 40ch;
}

.nursery-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.nursery-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
}

.nursery-item__name {
  font-weight: 600;
  color: var(--color-ink);
}

.nursery-item__meta {
  font-size: var(--fs-small);
  margin-top: var(--sp-1);
}

@media (min-width: 900px) {
  .nurseries__layout {
    grid-template-columns: 1.4fr 1fr;
  }
}

/* -------------------------------------------------------------------------
   13. Descarga de la app (CTA invertido)
   ------------------------------------------------------------------------- */
.cta-app {
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-app__title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
}

.cta-app__title em {
  font-style: italic;
  opacity: 0.92;
}

.cta-app__subtitle {
  margin-top: var(--sp-4);
  font-size: var(--fs-lead);
  color: rgba(244, 238, 226, 0.82);
  max-width: 52ch;
  margin-inline: auto;
}

.cta-app__follow {
  margin-top: var(--sp-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
}

.cta-app__follow-label {
  font-size: 0.95rem;
  color: rgba(244, 238, 226, 0.82);
}

.cta-app__social {
  display: flex;
  gap: var(--sp-3);
}

.social-btn.social-btn--invert {
  background: rgba(244, 238, 226, 0.08);
  border-color: rgba(244, 238, 226, 0.3);
  color: var(--color-invert-text);
}

.social-btn.social-btn--invert:hover {
  background: var(--color-invert-text);
  color: var(--color-invert-bg);
}

.cta-app__badge {
  display: inline-flex;
  align-items: center;
  margin-top: var(--sp-3);
  background: rgba(244, 238, 226, 0.14);
  color: var(--color-invert-text);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------
   14. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--sp-8) var(--sp-6);
}

.footer__top {
  display: grid;
  gap: var(--sp-7);
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.footer__logo {
  width: 100%;
  /* Mismo max-width (y mismo font-size, porque ch depende de el) que
     .footer__tag, para que el logo quede exactamente tan ancho como el
     bloque de texto de abajo y ambos se vean alineados. */
  max-width: 34ch;
  font-size: 0.95rem;
  height: auto;
  /* Lgrowtree-transparente.png ya viene con fondo transparente (ver script de
     procesamiento), pero este color de respaldo evita cualquier halo blanco
     residual en los bordes con antialiasing sobre el fondo real del footer. */
  background-color: var(--color-surface-alt);
}

.footer__tag {
  max-width: 34ch;
  font-size: 0.95rem;
}

.footer__social {
  display: flex;
  gap: var(--sp-3);
}

.social-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.social-btn:hover {
  background: var(--color-accent);
  color: var(--color-invert-text);
  transform: translateY(-3px);
}

.social-btn svg {
  width: 18px;
  height: 18px;
}

.social-btn--disabled {
  /* La app todavia no existe (ver .cta-app__badge "Proximamente"): este
     boton es decorativo, sin destino real (main.js bloquea el click via
     [data-app-store-disabled]). Opacidad + cursor comunican que no hace
     nada todavia, sin sacarlo del flujo de foco/teclado. */
  opacity: 0.55;
  cursor: not-allowed;
}

.social-btn--invert.social-btn--disabled:hover {
  background: rgba(244, 238, 226, 0.08);
  color: var(--color-invert-text);
  transform: none;
}

.footer__nav-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--color-ink);
  font-weight: 600;
}

.footer__nav-list {
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.footer__nav-list a:hover {
  color: var(--color-accent-strong);
}

.footer__bottom {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  font-size: var(--fs-small);
  color: var(--color-ink-soft);
}

.footer__credit a {
  color: var(--color-ink-soft);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 200ms var(--ease-out), text-decoration-color 200ms var(--ease-out);
}

.footer__credit a:hover,
.footer__credit a:focus-visible {
  color: var(--color-accent-strong);
  text-decoration-color: currentColor;
}

@media (min-width: 760px) {
  .footer__top {
    grid-template-columns: 1.3fr 0.7fr 0.7fr;
  }
}

/* -------------------------------------------------------------------------
   15. Reveal on scroll
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 640ms var(--ease-out), transform 640ms var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
  .hero__ring {
    animation: none;
  }
}

/* -------------------------------------------------------------------------
   16. Fondo de pagina y paneles de legibilidad
   -------------------------------------------------------------------------
   El body usa la imagen agua2 a color completo (ver regla `body` en la
   seccion 2) como fondo real de toda la pagina, no como marca de agua.
   `.section--alt` y `.site-footer` ya no pintan su propio color solido
   para que esa imagen se vea detras. La mayoria de los bloques de la
   pagina son "tarjetas" ya opacas por su cuenta (badge-pill, mvo-card,
   guide-card, reel-card, social-btn, about__ring-wrap, nursery-item, etc.)
   y no necesitan nada mas. `.text-scrim` es el panel translucido que se
   usa solo detras de los bloques de texto que quedan flotando directo
   sobre la imagen sin ninguna tarjeta propia debajo (titulo/subtitulo del
   hero, encabezado de cada seccion, la cita de "Quienes somos" y el
   contenido del footer) para que sigan siendo legibles sin tapar el resto
   de la imagen.
   ------------------------------------------------------------------------- */
.text-scrim {
  background: rgba(244, 238, 226, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

.hero__copy {
  padding: var(--sp-7) var(--sp-6);
}

.section__head {
  padding: var(--sp-6);
}

.about__copy {
  padding: var(--sp-6);
}

.site-footer .container {
  padding-block: var(--sp-7) var(--sp-6);
}