/* ==========================================================================
   Germinemos — sistema visual
   Paleta de marca + escala tipográfica + estados + movimiento.
   El gesto único del sitio: las cosas crecen desde abajo, como el brote.
   ========================================================================== */

:root {
  /* --- Marca (sin cambios) --- */
  --gm-green:  #007C58;
  --gm-lime:   #8DA751;
  --gm-yellow: #FFD507;
  --gm-gray:   #808080;
  --gm-dark:   #424242;
  --gm-black:  #000000;
  --gm-surface:#ffffff;
  --gm-soft:   #f4f6f3;

  /* --- Nuevos: verde profundo y neutros con sesgo verde --- */
  --gm-deep:   #04352A;  /* fondo de la carga, pie de página */
  --gm-paper:  #FAFBF8;  /* fondo de página: blanco con una gota de verde */
  --gm-ink:    #17251F;  /* texto corrido */
  --gm-muted:  #61736A;  /* texto secundario */
  --gm-rule:   #DCE5DB;  /* reglas finas y bordes */
  --gm-green-dark: #005f43;

  /* --- Crecimiento decorativo (growth.js): verdes muy claros --- */
  --gm-sprout-line: #CFE2C8;  /* tallos: lima mezclada con el papel */
  --gm-sprout-leaf: #E4EFDF;  /* relleno de hojas */
  --gm-sprout-far:  #DDEAD7;  /* brotes lejanos */
  --gm-microbe:     #DDEEDB;  /* microbios y vellosidades sobre las bandas verdes */

  /* --- Movimiento: un solo ritmo para todo el sitio --- */
  --gm-ease:   cubic-bezier(.2,.7,.3,1);
  --gm-fast:   .15s;
  --gm-base:   .22s;
  --gm-slow:   .45s;

  /* --- Bootstrap 5 --- */
  --bs-primary: var(--gm-green);
  --bs-secondary: var(--gm-lime);
  --bs-body-font-family: "Work Sans", system-ui, sans-serif;
  --bs-body-color: var(--gm-ink);
  --bs-link-color: var(--gm-green);
  --bs-link-hover-color: var(--gm-green-dark);
}

body {
  font-family: var(--bs-body-font-family);
  color: var(--bs-body-color);
  background: var(--gm-paper);
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   1. Tipografía — tres voces: Casual (títulos), Work Sans (texto), Plex Mono (datos)
   -------------------------------------------------------------------------- */

h1, h2, h3, .display, .brand-display {
  font-family: "Casual", Georgia, serif;
  color: var(--gm-green);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }

/* Casual pierde carácter en tamaños pequeños: los títulos de tarjeta van en
   Work Sans 500, no en la display. */
h4, h5, h6, .card h5, .card-body h5 {
  font-family: var(--bs-body-font-family);
  font-weight: 500;
  color: var(--gm-ink);
  line-height: 1.3;
}
h5 { font-size: 1.28rem; }

/* Medida de lectura. En bloques centrados el párrafo se centra también,
   si no quedaría un bloque de 68ch pegado a la izquierda con texto centrado. */
p { max-width: 68ch; }
.text-center p, p.text-center, .text-center .lead { margin-left: auto; margin-right: auto; }

/* Datos: fechas, cupos, precios, duración. Cifras tabulares. */
.gm-data, .gm-eyebrow {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-variant-numeric: tabular-nums;
}
.gm-eyebrow {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gm-muted);
  font-weight: 500;
}
.gm-data { font-size: .92rem; letter-spacing: .01em; }

/* El amarillo señala una sola cosa: disponibilidad. */
.gm-spots {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: .78rem;
  font-weight: 500;
  background: var(--gm-yellow);
  color: var(--gm-dark);
  padding: .12rem .5rem;
  border-radius: 999px;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   2. Estados — foco visible, cursor, transiciones
   -------------------------------------------------------------------------- */

a { color: var(--gm-green); transition: color var(--gm-fast) ease-out; }
a:hover { color: var(--gm-green-dark); }

:focus-visible {
  outline: 3px solid var(--gm-yellow);
  outline-offset: 3px;
  border-radius: 3px;
}

button, .btn, [role="button"], summary { cursor: pointer; }

.btn {
  transition: background-color var(--gm-base) ease-out,
              border-color var(--gm-base) ease-out,
              color var(--gm-base) ease-out,
              transform var(--gm-fast) ease-out;
}
.btn:active { transform: scale(.97); }

.btn-primary {
  --bs-btn-bg: var(--gm-green); --bs-btn-border-color: var(--gm-green);
  --bs-btn-hover-bg: var(--gm-green-dark); --bs-btn-hover-border-color: var(--gm-green-dark);
}
.btn-accent {
  --bs-btn-bg: var(--gm-yellow); --bs-btn-color: var(--gm-dark);
  --bs-btn-hover-bg: #e6c000; color: var(--gm-dark);
}

.bg-green { background: var(--gm-green) !important; color: #fff; }
.bg-green h1, .bg-green h2, .bg-green h3 { color: #fff; }
.bg-deep  { background: var(--gm-deep) !important; color: #fff; }
.bg-soft  { background: var(--gm-soft) !important; }

.section { padding: clamp(3rem, 6vw, 6rem) 0; }
.wa-btn { background: #25D366; color: #fff; }

/* --------------------------------------------------------------------------
   3. Tarjetas — suben 4px, la sombra se abre, la foto escala dentro del marco
   -------------------------------------------------------------------------- */

.card-rounded {
  border: 0;
  border-radius: 1.5rem;
  box-shadow: 0 10px 30px rgba(4, 53, 42, .07);
  transition: transform var(--gm-base) var(--gm-ease),
              box-shadow var(--gm-base) ease-out;
}
a:hover > .card-rounded,
.card-rounded:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(4, 53, 42, .14);
}
.card-rounded .card-img-top { transition: transform .3s var(--gm-ease); }
a:hover > .card-rounded .card-img-top,
.card-rounded:hover .card-img-top { transform: scale(1.06); }

/* El marco recorta la foto para que el escalado no desborde. */
.card-rounded > .card-img-top { will-change: transform; }
.card-rounded { overflow: hidden; }

/* --------------------------------------------------------------------------
   4. La línea de germinación — la firma del sistema.
      Una regla lima que crece de arriba hacia abajo al entrar la sección.
   -------------------------------------------------------------------------- */

.gm-rail { position: relative; padding-left: 1.15rem; }
.gm-rail::before {
  content: "";
  position: absolute;
  left: 0; top: .35rem; bottom: .1rem;
  width: 2px;
  background: var(--gm-lime);
  transform: scaleY(1);
  transform-origin: top;
  transition: transform .7s var(--gm-ease);
}
.gm-js .gm-rail::before { transform: scaleY(0); }
.gm-js .gm-reveal.gm-in .gm-rail::before,
.gm-js .gm-rail.gm-in::before { transform: scaleY(1); }

/* --------------------------------------------------------------------------
   5. Revelado al entrar — 16px hacia arriba, una sola vez
   -------------------------------------------------------------------------- */

/* Los estados ocultos sólo existen si el JS corrió (clase gm-js en <html>).
   Sin JavaScript no se esconde nada: el contenido nunca depende del efecto. */
.gm-js .gm-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--gm-slow) ease-out,
              transform var(--gm-slow) var(--gm-ease);
}
.gm-reveal.gm-in { opacity: 1; transform: none; }

/* Grillas: 50 ms de diferencia entre tarjetas. */
.gm-js .gm-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--gm-slow) ease-out,
              transform var(--gm-slow) var(--gm-ease);
}
.gm-stagger.gm-in > * { opacity: 1; transform: none; }
.gm-stagger.gm-in > *:nth-child(2) { transition-delay: .05s; }
.gm-stagger.gm-in > *:nth-child(3) { transition-delay: .10s; }
.gm-stagger.gm-in > *:nth-child(4) { transition-delay: .15s; }
.gm-stagger.gm-in > *:nth-child(5) { transition-delay: .20s; }
.gm-stagger.gm-in > *:nth-child(6) { transition-delay: .25s; }
.gm-stagger.gm-in > *:nth-child(n+7) { transition-delay: .30s; }

/* --------------------------------------------------------------------------
   6. Barra de navegación — se compacta al bajar
   -------------------------------------------------------------------------- */

.navbar {
  transition: padding var(--gm-base) ease-out, box-shadow var(--gm-base) ease-out;
}
.navbar .navbar-brand img {
  transition: height var(--gm-base) ease-out;
  height: 48px;
}
.navbar.gm-condensed { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.navbar.gm-condensed .navbar-brand img { height: 36px; }
.nav-link { transition: color var(--gm-fast) ease-out; }

/* --------------------------------------------------------------------------
   7. Pantalla de carga — el brote del logo se dibuja solo.
      La salida es una animación CSS con forwards: si el JS falla, igual se va.
   -------------------------------------------------------------------------- */

#gm-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: var(--gm-deep);
  display: grid;
  place-items: center;
  animation: gm-wipe var(--gm-slow) cubic-bezier(.7,0,.2,1) 1.35s forwards;
}
#gm-loader.gm-done { display: none; }
/* Ya se vio en esta sesión: se decide en <head>, antes del primer pintado,
   para que no aparezca un destello en cada navegación. */
.gm-seen #gm-loader { display: none; }
@keyframes gm-wipe { to { transform: translateY(-100%); visibility: hidden; } }

#gm-loader .gm-sprout { width: 128px; height: 150px; overflow: visible; }
#gm-loader .gm-sprout path {
  fill: none; stroke: #fff; stroke-width: 5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
#gm-loader .gm-stem   { animation: gm-draw .50s var(--gm-ease) forwards; }
#gm-loader .gm-leaf-l { animation: gm-draw .34s var(--gm-ease) .34s forwards; }
#gm-loader .gm-leaf-r { animation: gm-draw .34s var(--gm-ease) .44s forwards; }
@keyframes gm-draw { to { stroke-dashoffset: 0; } }

#gm-loader .gm-word {
  font-family: "Casual", Georgia, serif;
  color: #fff;
  font-size: 2.1rem;
  margin-top: 1rem;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  animation: gm-rise .3s ease-out .82s forwards;
}
@keyframes gm-rise { to { opacity: 1; transform: none; } }
#gm-loader .gm-loader-inner { display: grid; justify-items: center; }

/* --------------------------------------------------------------------------
   8. Movimiento reducido — el sistema entero se apaga, nada se pierde
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .gm-reveal, .gm-stagger > * { opacity: 1; transform: none; }
  .gm-rail::before { transform: scaleY(1); }
  #gm-loader .gm-sprout path { stroke-dashoffset: 0; }
  #gm-loader .gm-word { opacity: 1; transform: none; }
  #gm-loader { animation: gm-wipe .01ms linear .9s forwards; }
}

/* --------------------------------------------------------------------------
   9. Mega-menú de Servicios
      Se abre al hacer clic (y al pasar el cursor en escritorio, con la misma
      API de Bootstrap para que el estado no se desincronice). En móvil el
      panel se aplana: es una lista dentro del menú colapsado.
   -------------------------------------------------------------------------- */

.gm-mega-item .dropdown-toggle::after {
  transition: transform var(--gm-base) var(--gm-ease);
  vertical-align: .15em;
}
.gm-mega-item .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }

.dropdown-menu.gm-mega {
  border: 0;
  border-top: 2px solid var(--gm-lime);
  border-radius: 0 0 1.25rem 1.25rem;
  box-shadow: 0 22px 48px rgba(4, 53, 42, .16);
  padding: 1.5rem;
  background: var(--gm-surface);
  width: min(880px, calc(100vw - 2rem));
  margin-top: 0;
}
.gm-mega-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .25rem 1.5rem;
}
.gm-mega-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem;
  align-items: start;
  padding: .7rem .8rem;
  border-radius: .9rem;
  text-decoration: none;
  color: var(--gm-ink);
  min-height: 44px; /* objetivo táctil */
  transition: background-color var(--gm-fast) ease-out;
}
.gm-mega-link:hover, .gm-mega-link:focus-visible { background: var(--gm-soft); color: var(--gm-ink); }

.gm-mega-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(141, 167, 81, .16);
  color: var(--gm-green);
  font-size: 1rem;
  transition: background-color var(--gm-fast) ease-out;
}
.gm-mega-link:hover .gm-mega-icon { background: rgba(141, 167, 81, .3); }

.gm-mega-text { display: grid; gap: .1rem; min-width: 0; }
.gm-mega-title { font-weight: 500; font-size: .97rem; line-height: 1.35; }
.gm-mega-intro {
  font-size: .82rem;
  color: var(--gm-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gm-mega-foot {
  display: flex; flex-wrap: wrap; gap: .8rem;
  align-items: center; justify-content: space-between;
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid var(--gm-rule);
}
.gm-mega-all {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 500; text-decoration: none; color: var(--gm-green);
}
.gm-mega-all span { display: inline-block; transition: transform var(--gm-base) var(--gm-ease); }
.gm-mega-all:hover span { transform: translateX(4px); }

/* Entrada: sube 8px. La salida es más corta que la entrada. */
@media (min-width: 992px) {
  .dropdown-menu.gm-mega {
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    opacity: 0;
    display: block;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease-in, transform .12s ease-in, visibility 0s .12s;
  }
  .dropdown-menu.gm-mega.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity .18s ease-out, transform .18s var(--gm-ease), visibility 0s;
  }
}

/* Móvil: el panel deja de ser panel y se vuelve lista. */
@media (max-width: 991.98px) {
  .dropdown-menu.gm-mega {
    width: 100%;
    border: 0; border-top: 1px solid var(--gm-rule);
    border-radius: 0;
    box-shadow: none;
    padding: .5rem 0 1rem;
  }
  .gm-mega-grid { grid-template-columns: 1fr; gap: 0; }
  .gm-mega-intro { display: none; } /* en el menú móvil el título basta */
  .gm-mega-foot { margin-top: .6rem; padding-top: .8rem; }
}

/* --------------------------------------------------------------------------
   10. Encabezado partido — foto a un lado, texto sobre verde sólido
      Las fotos disponibles son verticales: puestas de fondo, con el velo que
      exige el texto blanco, dejan de leerse como foto. Partido, la imagen se
      ve entera y el texto conserva todo su contraste.
   -------------------------------------------------------------------------- */

.gm-hero-split {
  display: grid;
  grid-template-columns: 1fr;
}
.gm-hero-split__text {
  padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.15rem, 4vw, 3.5rem);
  display: grid;
  align-content: center;
  gap: 1rem;
}
.gm-hero-split__text h1 { margin: 0; }
.gm-hero-split__text p { margin: 0; max-width: 46ch; }

.gm-hero-split__media { position: relative; min-height: 260px; }
.gm-hero-split__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%; /* mantiene a Danelia y los frascos en cuadro */
  display: block;
}

@media (min-width: 768px) {
  .gm-hero-split {
    grid-template-columns: 1fr 1fr;
    min-height: min(58vh, 460px);
  }
  .gm-hero-split__media { min-height: 0; }
}


/* ==========================================================================
   Crecimiento decorativo (js/growth.js)
   Un lienzo detrás del contenido de cada sección con data-gm-growth (la primera
   sección de cada página lo lleva siempre). z-index -1 dentro de un contexto
   aislado: queda encima del fondo de la sección y debajo de todo su contenido.
   ========================================================================== */
.gm-growth { position: relative; isolation: isolate; }
.gm-growth-layer {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
}
.gm-growth-layer > svg { position: absolute; left: 0; top: 0; overflow: visible; }

/* Sobre fondo claro: verdes muy claros */
.gm-g-stem {
  fill: none; stroke: var(--gm-sprout-line); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.gm-g-leaf {
  fill: var(--gm-sprout-leaf); stroke: var(--gm-sprout-line); stroke-width: 1.2; stroke-linejoin: round;
  transform-box: fill-box;
  transition: transform .9s var(--gm-ease), opacity .6s ease;
}
.gm-g-leaf.gm-l { transform-origin: 100% 100%; }
.gm-g-leaf.gm-r { transform-origin: 0% 100%; }
.gm-g-leaf:not(.gm-open) { transform: scale(0) rotate(-8deg); opacity: 0; }
.gm-far .gm-g-stem { stroke: var(--gm-sprout-far); stroke-width: 1.2; }
.gm-far .gm-g-leaf { fill: #EEF5EB; stroke: var(--gm-sprout-far); }
.gm-m-cell, .gm-m-line {
  fill: none; stroke: var(--gm-sprout-line); stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}
.gm-m-cell { fill: var(--gm-sprout-leaf); }

/* Sobre las bandas verdes: el mismo dibujo en un verde claro casi transparente */
.gm-growth-on-green .gm-g-stem,
.gm-growth-on-green .gm-g-leaf,
.gm-growth-on-green .gm-m-cell,
.gm-growth-on-green .gm-m-line { stroke: var(--gm-microbe); stroke-opacity: .28; }
.gm-growth-on-green .gm-g-leaf,
.gm-growth-on-green .gm-m-cell { fill: var(--gm-microbe); fill-opacity: .06; }

.gm-growth-layer g { transition: opacity .6s ease; }

/* En tablet y móvil los textos y botones llegan casi al borde inferior de la
   sección superior; este margen deja sitio a sus brotes. Es CSS (no depende del
   script) para que la página no salte al cargar. */
@media (max-width: 991.98px) {
  main > :first-child { padding-bottom: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gm-g-leaf, .gm-growth-layer g { transition: none; }
}