/* Regresa Compostario Animal (demo). Tokens base de la skill landing-negocio-general,
   paleta y tipografía propias (ver DIRECCION-DE-ARTE.md, no versionado).
   v2 "Hora dorada en el compostario": colores del logo (dorado, verde brote, ladrillo) y de sus fotos (barro). */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/CormorantGaramond-italic-500.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/Figtree-normal-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pinyon Script";
  src: url("../fonts/PinyonScript-normal-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #f6f8ee;
  --color-panel: #e6efd6;
  --color-card: #f8fbf1;          /* tarjetas sobre el panel */
  --color-border: #cbd8b8;
  --color-heading: #173a24;
  --color-text: #2f4034;
  --color-text-soft: #4f6152;
  --color-white: #ffffff;
  --color-leaf: #4c8a36;
  --color-sprout: #7db548;
  --color-sun: #f2a93b;
  --color-sun-soft: #f4bd4f;
  --color-terra: #c8602f;
  --color-accent: #a3321f;        /* texto acento y botón primario (rojo ladrillo del logo) */
  --color-accent-dark: #86281a;
  --color-on-accent: #ffffff;
  --color-moss: #1d4a2f;
  --color-moss-deep: #143822;
  --color-on-moss: #f1f5e8;
  --color-on-moss-soft: #c9d8c2;
  --color-gold-text: #f6c453;     /* acento de texto sobre musgo y tierra */
  --color-tierra: #2e1c11;
  --color-tierra-text: #f4efe2;
  --color-tierra-soft: #d6cdb8;
  --color-footer: var(--color-moss-deep);
  --color-footer-text: #eef4e4;
  --color-footer-soft: #b9cbb6;

  /* tonos de las ramas ilustradas */
  --sp-a: #4c8a36;
  --sp-b: #7db548;
  --sp-stem: #4c8a36;

  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Pinyon Script", "Snell Roundhand", cursive;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;

  --content-max: 1180px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --radius: 6px;
  --radius-lg: 18px;
  --transition: 0.25s ease;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --shadow: 16 22 18;             /* sombras neutras de elevación */
  --header-height: 68px;
  --edge: clamp(28px, 4vw, 56px);

  /* orillas orgánicas (loma y onda) */
  --mask-hill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V34C240 8 480 0 720 0S1200 8 1440 34V60Z'/%3E%3C/svg%3E");
  --mask-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V30C160 6 320 2 500 18S860 56 1060 40 1320 6 1440 16V60Z'/%3E%3C/svg%3E");
}


*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-padding-top: var(--header-height);
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  -webkit-tap-highlight-color: rgb(163 50 31 / 0.15);
  scrollbar-color: var(--color-leaf) var(--color-bg);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--color-accent);
}

::selection { background: var(--color-sun-soft); color: #173a24; }

img { display: block; max-width: 100%; height: auto; }
a, button, summary { touch-action: manipulation; }
a { color: inherit; text-underline-offset: 0.2em; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 6.8vw, 5.75rem); line-height: 0.98; }
h2 { font-size: clamp(2.3rem, 4.8vw, 3.6rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.15; }
h1 em, h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--color-accent);
  padding-right: 0.05em;
}
p { margin: 0; max-width: 62ch; text-wrap: pretty; }

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

.container {
  position: relative;
  z-index: 1;
  width: min(100%, calc(var(--content-max) + var(--gutter) * 2));
  padding-inline: var(--gutter);
  margin-inline: auto;
}

.icon { width: 1.5rem; height: 1.5rem; flex: none; fill: currentColor; }
.icon--sm { width: 1.15rem; height: 1.15rem; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  padding: 0.6rem 1rem;
  background: var(--color-heading);
  color: var(--color-bg);
  z-index: 100;
}
.skip-link:focus { top: 0.75rem; }

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.7rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: 600 1rem/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), border-color var(--transition);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--primary { background: var(--color-accent); color: var(--color-on-accent); box-shadow: 0 10px 22px -12px rgb(var(--shadow) / 0.7); }
.btn--primary:hover { background: var(--color-accent-dark); box-shadow: 0 14px 26px -12px rgb(var(--shadow) / 0.75); }
.btn--ghost { border-color: var(--color-heading); color: var(--color-heading); background: transparent; }
.btn--ghost:hover { background: var(--color-heading); color: var(--color-bg); }
.btn--light { background: var(--color-gold-text); color: #173a24; }
.btn--light:hover { background: #ffd978; }
.btn--moss { background: #1d4a2f; color: #fff; box-shadow: 0 12px 24px -14px rgb(var(--shadow) / 0.8); }
.btn--moss:hover { background: #143822; }
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  font-weight: 600;
  color: var(--color-heading);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: var(--color-accent);
}
.link-arrow .icon { transition: transform 0.3s var(--ease-out); }
.link-arrow:hover { color: var(--color-accent); }
.link-arrow:hover .icon { transform: translateX(3px); }

/* Header: barra delgada de ancho completo con filo de color */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* filete de color del logo (verde, dorado, terracota) como fondo inferior del propio header */
  --header-bg: rgb(246 248 238 / 0.92);
  background:
    linear-gradient(90deg, var(--color-leaf), var(--color-sprout) 30%, var(--color-sun) 65%, var(--color-terra)) left bottom / 100% 3px no-repeat,
    var(--header-bg);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  backdrop-filter: blur(10px) saturate(1.2);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--header-height);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  margin-right: auto;
}
.brand img { width: 46px; height: auto; transition: transform 0.6s var(--ease-out); }
.brand:hover img { transform: rotate(-8deg) scale(1.05); }
.brand-text { display: grid; line-height: 1; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-heading);
}
.brand-sub {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.main-nav ul {
  display: flex;
  gap: 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-nav a {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text);
  transition: color var(--transition);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.2rem;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-leaf), var(--color-sun));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.main-nav a:hover { color: var(--color-heading); }
.main-nav a:hover::after { transform: scaleX(1); }
.header-cta { min-height: 44px; padding-inline: 1.2rem; font-size: 0.95rem; }
.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--color-heading);
  cursor: pointer;
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Hero: luz de mañana, sol detrás del arco, ramas y hojas al viento */
.hero {
  position: relative;
  overflow: clip;
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3.5rem, 7vw, 5.5rem);
  background:
    radial-gradient(ellipse 60% 70% at 88% 18%, rgb(244 189 79 / 0.38), transparent 70%),
    radial-gradient(ellipse 55% 60% at 0% 100%, rgb(125 181 72 / 0.26), transparent 70%),
    var(--color-bg);
}
.hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero-copy { display: grid; gap: 1.6rem; justify-items: start; position: relative; z-index: 2; }
.hero-copy p { font-size: 1.2rem; max-width: 34ch; }
/* acceso directo y discreto para quien llega en el momento de la pérdida */
.hero-help {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.45rem 1rem 0.45rem 0.8rem;
  border-radius: 1.4rem;
  font-size: 0.92rem;
  line-height: 1.3;
  color: var(--color-text);
  text-decoration: none;
  background: rgb(255 255 255 / 0.72);
  box-shadow: inset 0 0 0 1px rgb(var(--shadow) / 0.12);
  transition: background var(--transition), box-shadow var(--transition);
}
.hero-help strong { font-weight: 600; color: var(--color-heading); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.2em; }
.hero-help .icon { color: var(--color-accent); }
.hero-help:hover { background: #fff; box-shadow: inset 0 0 0 1px rgb(var(--shadow) / 0.22); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.6rem; margin-top: 0.4rem; }
.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}
.hero-points li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-heading);
  background: rgb(255 255 255 / 0.7);
  box-shadow: inset 0 0 0 1px rgb(var(--shadow) / 0.1);
}
.hero-points li:nth-child(1) .icon { color: var(--color-leaf); }
.hero-points li:nth-child(2) .icon { color: var(--color-accent); }
.hero-points li:nth-child(3) .icon { color: #b8741a; }

.arch {
  position: relative;
  overflow: hidden;
  border-radius: 999px 999px var(--radius-lg) var(--radius-lg);
}
.arch img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.18) contrast(1.04); }
/* halo cálido de hora dorada sobre las fotos reales */
.arch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(205deg, rgb(255 193 84 / 0.55), rgb(255 193 84 / 0) 55%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.hero-visual { position: relative; z-index: 1; }
.hero-visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 86%;
  aspect-ratio: 1;
  right: -16%;
  top: -7%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #ffe29a, var(--color-sun-soft) 45%, var(--color-sun) 75%, #e98f33);
}
.hero-photo {
  aspect-ratio: 3 / 4;
  max-height: calc(100dvh - var(--header-height) - 7rem);
  margin-left: auto;
  width: 100%;
  box-shadow: 0 30px 60px -30px rgb(var(--shadow) / 0.55);
}

/* Ramas ilustradas */
.sprig { position: absolute; width: 120px; height: 212px; fill: none; stroke: none; pointer-events: none; }
.sp-a { fill: var(--sp-a); }
.sp-b { fill: var(--sp-b); }
.sp-stem { stroke: var(--sp-stem); }
.sprig--hero-r { right: -6%; bottom: -3%; width: 22%; height: auto; aspect-ratio: 130 / 230; transform-origin: 50% 100%; --sp-a: #5f9c46; --sp-b: #a3cf6a; }
.sprig--hero-l { left: -14%; bottom: -6%; width: 34%; height: auto; aspect-ratio: 130 / 230; transform-origin: 50% 100%; }

/* Mariposa monarca */
.butterfly { position: absolute; left: -9%; top: 16%; width: clamp(54px, 6vw, 76px); z-index: 3; pointer-events: none; }
.butterfly svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 6px 6px rgb(var(--shadow) / 0.25)); }
.butterfly .wing { transform-box: view-box; transform-origin: 50px 40px; }

/* Hojas al viento (solo decorativas) */
.hero-leaves { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.drift { position: absolute; width: 22px; height: 22px; fill: var(--color-sprout); opacity: 0; }
.drift--1 { top: 6%; left: 58%; fill: #7db548; }
.drift--2 { top: 2%; left: 74%; width: 16px; height: 16px; fill: #e9a23b; }
.drift--3 { top: 14%; left: 90%; width: 26px; height: 26px; fill: #4c8a36; }
.drift--4 { top: 30%; left: 96%; width: 18px; height: 18px; fill: #c8602f; }
.drift--5 { top: 0%; left: 46%; width: 14px; height: 14px; fill: #a3cf6a; }
.drift--6 { top: 22%; left: 82%; width: 20px; height: 20px; fill: #7db548; }

/* Banda con su lema */
.band {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--color-moss);
  color: var(--color-on-moss);
  padding-block: 1.05rem;
}
.band-track {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: max-content;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.band em { font-style: italic; color: var(--color-gold-text); }
.band svg { width: 20px; height: 20px; fill: var(--color-sprout); flex: none; }
.band svg:nth-of-type(3n + 2) { fill: var(--color-sun); }
.band svg:nth-of-type(3n) { fill: #e98262; }

/* Secciones */
.section { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--panel { background: var(--color-panel); }
.section-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }

/* Orillas orgánicas: la sección "sube" sobre la anterior con una loma o una onda de su propio color */
.edge-top::before,
.edge-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--edge);
  background: var(--edge-color, var(--color-bg));
  -webkit-mask: var(--mask-wave) center / 100% 100% no-repeat;
  mask: var(--mask-wave) center / 100% 100% no-repeat;
  pointer-events: none;
}
.edge-top::before { bottom: calc(100% - 1px); }
.edge-bottom::after { top: calc(100% - 1px); transform: scaleY(-1); z-index: 2; background: var(--edge-bottom-color, var(--edge-color, var(--color-bg))); }

/* Qué es Regresa */
.about-grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.about-copy { display: grid; gap: 1.25rem; }
.values { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; margin: 1.25rem 0 0; }
.values > div { position: relative; padding-left: 2.1rem; }
.values > div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 1.3rem;
  height: 1.3rem;
  background: var(--dot, var(--color-leaf));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 36C4 17 17 4 36 4C36 23 23 36 4 36Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M4 36C4 17 17 4 36 4C36 23 23 36 4 36Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.values > div:nth-child(2) { --dot: var(--color-sun); }
.values > div:nth-child(3) { --dot: var(--color-terra); }
.values > div:nth-child(4) { --dot: var(--color-sprout); }
.values dt { font-family: var(--font-display); font-weight: 600; font-size: 1.55rem; color: var(--color-heading); line-height: 1.1; }
.values dd { margin: 0.35rem 0 0; font-size: 0.98rem; color: var(--color-text-soft); }
.about-media {
  position: relative;
  display: grid;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  text-align: center;
  background: var(--color-card);
  box-shadow: 0 24px 50px -34px rgb(var(--shadow) / 0.45);
}
.about-media img { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; }
.about-media .cycle-img { aspect-ratio: auto; height: auto; object-fit: contain; }
.pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  color: var(--color-heading);
  margin-inline: auto;
}
.pull-quote span { color: var(--color-accent); }

/* Proceso: bloque de tierra + tallo que crece y sol que sale (jugada firma) */
.proceso {
  --edge-color: var(--color-tierra);
  --edge-bottom-color: #2c3a1e;
  background:
    radial-gradient(ellipse 50% 45% at 22% 55%, rgb(242 169 59 / 0.16), transparent 70%),
    linear-gradient(180deg, var(--color-tierra), #3a2616 70%, #2c3a1e);
  color: var(--color-tierra-text);
  --color-heading: var(--color-tierra-text);
  --color-text: var(--color-tierra-soft);
  --color-accent: var(--color-gold-text);
}
.proceso.edge-top::before { -webkit-mask-image: var(--mask-hill); mask-image: var(--mask-hill); }
.proceso h2 em { color: var(--color-gold-text); }
.proceso-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 6vw, 5rem);
}
.proceso-intro { display: grid; gap: 1rem; margin-bottom: 2rem; }
.plant-col { position: sticky; top: calc(var(--header-height) + 2rem); align-self: start; }
.plant { width: 100%; max-width: 340px; max-height: 62vh; margin-inline: auto; display: block; overflow: visible; }
.plant .s { transform-box: fill-box; transform-origin: 50% 100%; }
.plant .sun { transform-box: fill-box; transform-origin: 50% 50%; }
.plant.is-live .s {
  opacity: 0;
  transform: scaleY(0.35) translateY(12px);
  transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out);
}
.plant.is-live .s.is-on { opacity: 1; transform: none; }
.plant.is-live .sun { opacity: 0; transform: translateY(40%) scale(0.6); transition: opacity 1s var(--ease-out), transform 1.4s var(--ease-out); }
.plant.is-live[data-stage="2"] .sun { opacity: 0.35; transform: translateY(28%) scale(0.72); }
.plant.is-live[data-stage="3"] .sun { opacity: 0.65; transform: translateY(12%) scale(0.86); }
.plant.is-live[data-stage="4"] .sun { opacity: 1; transform: none; }
.steps { display: grid; gap: clamp(3rem, 12vh, 7rem); margin: 0; padding: 2rem 0 4rem; list-style: none; counter-reset: paso; }
.step { position: relative; display: grid; gap: 0.9rem; max-width: 46ch; counter-increment: paso; }
.step h3 { display: flex; align-items: baseline; gap: 0.8rem; color: var(--color-tierra-text); transition: color 0.4s ease; }
.step h3::before {
  content: counter(paso, decimal-leading-zero);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-gold-text);
  opacity: 0.7;
}
.step.is-active h3 { color: var(--color-gold-text); }
.step p { font-size: 1.05rem; }
.step .link-arrow { justify-self: start; }
.step .step-weeks {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1;
  color: var(--color-gold-text);
}

/* Qué recibe */
.recibe-grid {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
.recibe-visual { position: relative; }
.recibe-photo {
  aspect-ratio: 700 / 1244;
  border-radius: 140px 140px var(--radius-lg) var(--radius-lg);
  box-shadow: 18px 18px 0 var(--color-sprout), 0 30px 50px -30px rgb(var(--shadow) / 0.5);
}
.recibe-photo img { object-position: 50% 50%; }
.sprig--recibe { right: -16%; bottom: -2%; width: 36%; height: auto; aspect-ratio: 130 / 230; transform-origin: 50% 100%; --sp-a: #c8602f; --sp-b: #f2a93b; --sp-stem: #7a5a2a; }
.recibe-copy { display: grid; gap: 2rem; }
.gift-list { display: grid; gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.gift-list li { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1.1rem; align-items: start; }
.gift-list .icon {
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.75rem;
  border-radius: 50%;
  color: #3f7a2a;
  background: #e2efcf;
  transition: transform 0.4s var(--ease-out);
}
.gift-list li:nth-child(2) .icon { color: #9a5a0c; background: #fde6b8; }
.gift-list li:nth-child(3) .icon { color: var(--color-accent); background: #f9dccb; }
.gift-list li:nth-child(4) .icon { color: #1d4a2f; background: #d4e8d9; }
.gift-list li:hover .icon { transform: rotate(-8deg) scale(1.06); }
.gift-list strong { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--color-heading); line-height: 1.15; }
.gift-list span { color: var(--color-text-soft); }

/* Compostario: bloque musgo */
.section--moss {
  --edge-color: var(--color-moss);
  background:
    radial-gradient(ellipse 45% 60% at 100% 0%, rgb(242 169 59 / 0.14), transparent 70%),
    var(--color-moss);
  color: var(--color-on-moss-soft);
  --color-heading: var(--color-on-moss);
  --color-text: var(--color-on-moss-soft);
  --color-accent: var(--color-gold-text);
  overflow-x: clip;
}
.branch {
  position: absolute;
  width: clamp(160px, 20vw, 260px);
  height: auto;
  aspect-ratio: 130 / 230;
  fill: none;
  stroke: rgb(241 245 232 / 0.22);
  stroke-width: 1.2;
  --sp-a: transparent;
  --sp-b: transparent;
  --sp-stem: rgb(241 245 232 / 0.22);
  pointer-events: none;
}
.branch--visit { left: -30px; bottom: 6%; transform: rotate(14deg); }
.visit-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.visit-copy { display: grid; gap: 1.25rem; position: sticky; top: calc(var(--header-height) + 2rem); }
.visit-copy h2 { color: var(--color-on-moss); }
.visit-copy .btn { justify-self: start; margin-top: 0.5rem; }
.visit-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.visit-photos img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-lg);
  filter: saturate(1.2) contrast(1.04);
  box-shadow: 0 24px 40px -26px rgb(0 0 0 / 0.6);
}
.visit-photos .tall { aspect-ratio: 3 / 4; }
.visit-photos .tall:first-child { border-radius: 999px 999px var(--radius-lg) var(--radius-lg); }
.visit-photos .wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; object-position: 50% 60%; }

/* En memoria: halo dorado suave */
.section--glow {
  background:
    radial-gradient(ellipse 50% 55% at 50% 0%, rgb(244 189 79 / 0.22), transparent 70%),
    var(--color-bg);
}
.esquelas { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.9rem, 2.2vw, 1.75rem); margin: 0; padding: 0.5rem 0 0; list-style: none; }
.esquela {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius);
  rotate: var(--tilt, 0deg);
  transition: transform 0.45s var(--ease-out), rotate 0.45s var(--ease-out);
}
.esquelas li { display: grid; justify-items: center; container-type: inline-size; }
.esquelas li:nth-child(1) { --tilt: -2.2deg; }
.esquelas li:nth-child(2) { --tilt: 1.6deg; }
.esquelas li:nth-child(3) { --tilt: -1.2deg; }
.esquelas li:nth-child(4) { --tilt: 2deg; }
.esquela:hover, .esquela:focus-visible { rotate: 0deg; transform: translateY(-8px) scale(1.02); }
.esquela img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: 0 18px 34px -16px rgb(var(--shadow) / 0.55); }

/* Deja una flor: tierra justo bajo el borde de la esquela; gira con ella desde su centro (esquela 2:3 → centro a 75cqw del pie) */
.bed {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 16px;
  border-radius: 3px 3px 10px 10px / 3px 3px 8px 8px;
  background: linear-gradient(color-mix(in srgb, var(--color-terra) 35%, var(--color-tierra)), var(--color-tierra) 70%);
  rotate: var(--tilt, 0deg);
  transform-origin: 50% -75cqw;
  pointer-events: none;
}
.flor { position: absolute; bottom: calc(100% - 2px); left: var(--x); width: clamp(20px, 2.2vw, 28px); height: auto; aspect-ratio: 40 / 140; transform-origin: 50% 100%; transform: translateX(-50%) rotate(var(--r)) scale(var(--s)); }
@media (prefers-reduced-motion: no-preference) {
  .flor.is-growing { animation: brota 1.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
/* brota desde la tierra y se mece hasta quedarse quieta */
@keyframes brota {
  0% { transform: translateX(-50%) rotate(var(--r)) scale(calc(var(--s) * 0.55), calc(var(--s) * 0.08)); opacity: 0; }
  20% { opacity: 1; }
  55% { transform: translateX(-50%) rotate(calc(var(--r) + 6deg)) scale(var(--s), calc(var(--s) * 1.05)); }
  78% { transform: translateX(-50%) rotate(calc(var(--r) - 3deg)) scale(var(--s)); }
  100% { transform: translateX(-50%) rotate(var(--r)) scale(var(--s)); }
}
.leave {
  margin-top: 0.9rem;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  font-size: 0.92rem;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
  background: var(--color-gold-text);
  color: var(--color-tierra);
  box-shadow: 0 10px 20px -14px rgb(var(--shadow) / 0.7);
}
.leave:hover { background: #ffd978; }
.leave[hidden] { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lightbox { max-width: min(92vw, 560px); max-height: 92dvh; padding: 0; border: 0; border-radius: var(--radius); background: transparent; overflow: visible; }
.lightbox::backdrop { background: rgb(12 20 14 / 0.86); }
.lightbox img { display: block; width: auto; max-width: 100%; max-height: 88dvh; margin: 0 auto; border-radius: var(--radius); }
.lightbox-close { position: absolute; top: -1rem; right: -0.5rem; z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--color-bg); color: var(--color-heading); cursor: pointer; }

/* Videos */
.videos-page {
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  background:
    radial-gradient(ellipse 55% 45% at 90% 0%, rgb(244 189 79 / 0.3), transparent 70%),
    radial-gradient(ellipse 50% 50% at 0% 100%, rgb(125 181 72 / 0.2), transparent 70%),
    var(--color-bg);
}
.videos-head { display: grid; gap: 1.25rem; justify-items: start; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.videos-page .videos-players { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 5vw, 4rem); align-items: start; }
.videos-page .video--offset { margin-top: 0; }
.videos-page .video-frame { max-width: 560px; margin-inline: auto; width: 100%; }
.videos-page .video figcaption { max-width: 560px; margin-inline: auto; width: 100%; }
.back-link { margin-top: clamp(2rem, 5vw, 3.5rem); }
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.videos-players { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); align-items: start; }
.video { margin: 0; display: grid; gap: 0.75rem; }
.video--offset { margin-top: clamp(0rem, 6vw, 4rem); }
.video figcaption { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--color-heading); }
.video-frame { aspect-ratio: 9 / 16; overflow: hidden; border-radius: 999px 999px var(--radius-lg) var(--radius-lg); background: var(--color-heading); box-shadow: 0 30px 50px -30px rgb(var(--shadow) / 0.6); }
.video-play { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.video-play img, .video-frame video { width: 100%; height: 100%; object-fit: cover; }
.video-play img { filter: saturate(1.15); }
.video-icon {
  position: absolute;
  left: 50%;
  bottom: 12%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 0 0 8px rgb(255 255 255 / 0.25), 0 10px 24px -8px rgb(0 0 0 / 0.5);
  transition: transform 0.3s var(--ease-out);
}
.video-icon .icon { width: 1.6rem; height: 1.6rem; margin-left: 3px; }
.video-play:hover .video-icon { transform: scale(1.08); }

/* Eutanasia */
.care-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.care-copy { display: grid; gap: 1.25rem; justify-items: start; }
.care-note { font-size: 0.98rem; color: var(--color-text-soft); }
.care-list { display: grid; gap: 1.4rem; margin: 0; padding: 0; list-style: none; }
.care-list li { display: grid; grid-template-columns: 2.9rem 1fr; gap: 1rem; align-items: start; }
.care-list .icon { width: 2.9rem; height: 2.9rem; padding: 0.65rem; border-radius: 50%; color: #3f7a2a; background: rgb(255 255 255 / 0.75); }
.care-list li:nth-child(2) .icon { color: var(--color-accent); }
.care-list li:nth-child(3) .icon { color: #9a5a0c; }
.care-list strong { display: block; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; color: var(--color-heading); line-height: 1.15; }
.care-list span { color: var(--color-text-soft); }

/* Libro: bloque dorado (medallón del logo y portada del libro) */
.section--sun {
  --edge-color: #f4bd4f;
  background:
    linear-gradient(120deg, #f8d06e, #f4bd4f 38%, #f2a93b);
  color: #3b3219;
  --color-heading: #173a24;
  --color-text: #3b3219;
  --color-text-soft: #3b3219;
  --color-accent: #86281a;
}
.section--sun .book-points .icon { color: #1d4a2f; }
.book {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: clamp(1.75rem, 5vw, 4rem);
  align-items: center;
}
.book img { width: 100%; border-radius: var(--radius); rotate: -3deg; box-shadow: 0 28px 44px -22px rgb(var(--shadow) / 0.65); }
.book-copy { display: grid; gap: 1.1rem; justify-items: start; }
.book-points { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0; padding: 0; list-style: none; font-size: 0.98rem; font-weight: 500; color: var(--color-text-soft); }
.book-points li { display: flex; align-items: center; gap: 0.5rem; }
.book-points .icon { color: var(--color-leaf); }
.book-author { font-size: 0.98rem; color: var(--color-text-soft); }

/* Preguntas */
.faq-grid {
  display: grid;
  grid-template-columns: 4fr 7fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.faq-side { position: sticky; top: calc(var(--header-height) + 2rem); display: grid; gap: 1.5rem; justify-items: start; }
.faq { display: grid; gap: 0.6rem; }
.faq details {
  padding-inline: 1.25rem;
  border-radius: 14px;
  background: var(--color-panel);
  transition: background var(--transition), box-shadow var(--transition);
}
.faq details:hover { background: color-mix(in srgb, var(--color-panel) 70%, var(--color-sprout)); }
.faq details[open] { background: var(--color-white); box-shadow: 0 16px 34px -24px rgb(var(--shadow) / 0.45), inset 0 0 0 1px var(--color-border); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 64px;
  padding-block: 0.9rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--color-heading);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--color-accent); transition: transform 0.3s var(--ease-out); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq-video { margin-top: 1.25rem; justify-self: start; }
.faq details p { padding-bottom: 1.4rem; color: var(--color-text); }

/* Contacto */
.contact-grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.contact-copy { display: grid; gap: 1.5rem; justify-items: start; }
.contact-grid > * { min-width: 0; }
.contact-list { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  text-decoration: none;
  font-weight: 500;
  color: var(--color-heading);
  overflow-wrap: anywhere;
}
.contact-list a:hover { color: var(--color-accent); }
.contact-list .icon { width: 2.4rem; height: 2.4rem; padding: 0.55rem; border-radius: 50%; color: var(--color-accent); background: var(--color-bg); transition: transform 0.3s var(--ease-out); }
.contact-list a:hover .icon { transform: scale(1.08); }
.place {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  box-shadow: 0 24px 50px -34px rgb(var(--shadow) / 0.5);
}
.place h3 { font-size: 1.6rem; }
.place address { font-style: normal; }
.place p { color: var(--color-text-soft); font-size: 0.98rem; }
.hours { display: grid; gap: 0.35rem; margin: 0.75rem 0 0; }
.hours div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 0.5rem; }
.hours dt { font-weight: 600; color: var(--color-heading); }
.hours dd { margin: 0; color: var(--color-text); }
.map-placeholder { margin-top: 1rem; }
.map-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 220px;
  border: 1.5px dashed var(--color-leaf);
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 30%, rgb(125 181 72 / 0.18), transparent 50%),
    radial-gradient(circle at 75% 70%, rgb(244 189 79 / 0.22), transparent 50%),
    var(--color-panel);
  color: var(--color-heading);
  font: 600 1rem/1 var(--font-body);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.map-trigger .icon { color: var(--color-accent); }
.map-trigger:hover { border-style: solid; }
.map-link { margin-top: 0.5rem; }
.map-frame { width: 100%; height: 300px; border: 0; border-radius: 14px; margin-top: 1rem; }

/* Footer: musgo profundo con orilla ondulada y rama en línea */
.site-footer {
  position: relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 230'%3E%3Cg fill='none' stroke='%23f1f5e8' stroke-opacity='0.16' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M64 228C60 180 68 132 60 84C56 56 62 30 76 6'/%3E%3Cpath transform='translate(62 200) scale(-0.95 0.95) rotate(-28)' d='M0 0C6-18 30-24 48-6C33 12 11 17 0 0Z'/%3E%3Cpath transform='translate(63 178) rotate(-24)' d='M0 0C6-18 30-24 48-6C33 12 11 17 0 0Z'/%3E%3Cpath transform='translate(62 150) scale(-0.9 0.9) rotate(-32)' d='M0 0C6-18 30-24 48-6C33 12 11 17 0 0Z'/%3E%3Cpath transform='translate(62 124) scale(0.9) rotate(-30)' d='M0 0C6-18 30-24 48-6C33 12 11 17 0 0Z'/%3E%3Cpath transform='translate(59 98) scale(-0.78 0.78) rotate(-36)' d='M0 0C6-18 30-24 48-6C33 12 11 17 0 0Z'/%3E%3Cpath transform='translate(59 72) scale(0.74) rotate(-40)' d='M0 0C6-18 30-24 48-6C33 12 11 17 0 0Z'/%3E%3C/g%3E%3C/svg%3E") right 4% bottom -20px / clamp(120px, 14vw, 190px) auto no-repeat,
    var(--color-footer);
  color: var(--color-footer-soft);
  padding-block: 3rem 2rem;
  font-size: 0.95rem;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: var(--edge);
  background: var(--color-footer);
  -webkit-mask: var(--mask-hill) center / 100% 100% no-repeat;
  mask: var(--mask-hill) center / 100% 100% no-repeat;
}
.footer-grid { display: flex; flex-wrap: wrap; gap: 2rem 3rem; justify-content: space-between; align-items: center; }
.footer-brand { display: flex; align-items: center; gap: 1rem; }
.footer-brand img { width: 64px; height: auto; }
.footer-brand strong { display: block; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-footer-text); line-height: 1; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-footer-text); text-decoration: none; }
.footer-links a:hover { color: var(--color-gold-text); text-decoration: underline; }
.copyright { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgb(255 255 255 / 0.12); font-size: 0.85rem; max-width: 80ch; }
.demo-note { margin-top: 0.75rem; font-size: 0.85rem; max-width: none; }
.demo-versions a { color: var(--color-footer-text); }
.demo-versions a:hover { color: var(--color-gold-text); }
.demo-versions [aria-current] { color: var(--color-footer-text); font-weight: 600; }
/* versión sin animalitos: sin el espacio extra que dejaban las flores */
.sin-animales .section--glow,
.sin-animales #main > .section:last-child { padding-bottom: clamp(3.5rem, 8vw, 6.5rem); }

/* WhatsApp flotante (móvil) */
.wa-float {
  display: none;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 0 0 4px rgb(255 255 255 / 0.7), 0 10px 24px -8px rgb(var(--shadow) / 0.55);
}
.wa-float .icon { width: 1.9rem; height: 1.9rem; }


/* Jardín vivo: flores, abejas, catarina, luciérnagas, vilanos y el perrito (todo decorativo, aria-hidden) */
.garden { position: absolute; z-index: 3; display: flex; align-items: flex-end; padding-inline: 8px; pointer-events: none; --s: 1.25; }
/* --lift lo calcula script.js para que cada flor se apoye justo en la curva de la loma */
.garden .fl { position: relative; width: calc(var(--w, 32px) * var(--s)); height: auto; aspect-ratio: 40 / 140; margin: 0 calc(-5px * var(--s)) var(--lift, 0px); transform-origin: 50% 100%; }
.garden .fl:nth-child(5n + 1) { --w: 30px; }
.garden .fl:nth-child(5n + 2) { --w: 38px; }
.garden .fl:nth-child(5n + 3) { --w: 27px; }
.garden .fl:nth-child(5n + 4) { --w: 35px; }
.garden .fl:nth-child(5n + 5) { --w: 31px; }
.garden--regresa { right: 2%; bottom: -2px; --s: 1.1; }
.garden--memoria-l { left: 1%; bottom: -2px; --s: 1.05; }
.garden--memoria-r { right: 1%; bottom: -2px; --s: 1.05; }
.garden--contacto { right: 3%; bottom: -2px; }
.section--glow { padding-bottom: clamp(7rem, 12vw, 9.5rem); }
#main > .section:last-child { padding-bottom: clamp(8rem, 13vw, 10.5rem); }

.bee { position: absolute; z-index: 4; width: clamp(38px, 3.8vw, 52px); pointer-events: none; }
.bee svg { display: block; width: 100%; height: auto; overflow: visible; }
.bee-wing { transform-box: fill-box; transform-origin: 50% 100%; }
.bee--regresa { top: 12%; right: 10%; }
.bee--libro { top: -18px; left: 168px; --ax: 0.5; --ay: 0.6; }

.faq-bug { position: relative; width: 150px; height: 22px; }
.ladybug { position: absolute; z-index: 3; left: 0; bottom: 0; width: 26px; height: auto; }

.fireflies, .seeds { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fireflies span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #f7e38a; opacity: 0.6; }
.fireflies span:nth-child(1) { left: 6%; top: 62%; --dx: 30px; --dy: -40px; }
.fireflies span:nth-child(2) { left: 14%; top: 82%; --dx: -20px; --dy: -30px; }
.fireflies span:nth-child(3) { left: 24%; top: 70%; --dx: 26px; --dy: 24px; }
.fireflies span:nth-child(4) { left: 36%; top: 88%; --dx: -34px; --dy: -22px; }
.fireflies span:nth-child(5) { left: 44%; top: 12%; --dx: 20px; --dy: 34px; }
.fireflies span:nth-child(6) { left: 58%; top: 6%; --dx: -28px; --dy: 20px; }
.fireflies span:nth-child(7) { left: 72%; top: 94%; --dx: 24px; --dy: -34px; }
.fireflies span:nth-child(8) { left: 86%; top: 8%; --dx: -18px; --dy: 30px; }
.fireflies span:nth-child(9) { left: 95%; top: 48%; --dx: -30px; --dy: -20px; }
.fireflies span:nth-child(10) { left: 30%; top: 40%; --dx: 22px; --dy: -26px; width: 4px; height: 4px; }

.seed { position: absolute; bottom: 4%; width: 26px; height: 38px; color: #6f8472; opacity: 0.5; }
.seed:nth-child(1) { left: 4%; }
.seed:nth-child(2) { left: 28%; width: 20px; height: 30px; }
.seed:nth-child(3) { left: 52%; }
.seed:nth-child(4) { left: 78%; width: 22px; height: 32px; }

/* perrito del hero: de frente, con carita */
.dog-front { position: absolute; z-index: 4; right: -9%; bottom: -7%; width: 32%; pointer-events: none; filter: drop-shadow(0 10px 10px rgb(var(--shadow) / 0.25)); }
.dog-front svg { display: block; width: 100%; height: auto; overflow: visible; }
.dog-tail { transform-box: view-box; transform-origin: 82px 127px; }
.dog-head { transform-box: view-box; transform-origin: 60px 88px; }
.dog-eyes { transform-box: fill-box; transform-origin: 50% 50%; }
/* segundo perrito: sentado en la mesa, a la izquierda de la maceta (Opción 2) */
.recibe-visual .dog-front { right: auto; left: 5%; bottom: 3%; width: 30%; animation: none; }

/* Opción 2: más vida en "Lo que recibe" y en "El compostario" */
.butterfly--r1, .butterfly--r2, .butterfly--c1, .butterfly--c2 { width: clamp(44px, 4.6vw, 62px); }
.butterfly--r1 { left: 38%; top: 9%; }
.butterfly--r2 { left: 7%; top: 58%; --ax: 0.8; }
.butterfly--c1 { left: 40%; top: 14%; }
.butterfly--c2 { left: auto; right: 4%; top: 56%; }
.butterfly--c3 { left: 30%; top: 72%; }
.butterfly--c4 { left: auto; right: 34%; top: 90%; }
/* luciérnagas sobre fondo claro: ámbar para que se distingan */
.fireflies--memoria span { width: 7px; height: 7px; background: #e0901f; }
.bee--r1 { left: 24%; top: 20%; --ax: 0.55; --ay: 0.7; }
.bee--r2 { top: auto; bottom: 10%; left: 36%; }
.falling { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fall { position: absolute; width: 28px; height: 28px; opacity: 0; }
#recibes { overflow-x: clip; }
.fall--1 { left: 6%; top: -2%; fill: #e9a23b; }
.fall--2 { left: 22%; top: 20%; width: 22px; height: 22px; fill: #a3cf6a; }
.fall--3 { left: 38%; top: -4%; fill: #c8602f; }
.fall--4 { left: 52%; top: 40%; width: 32px; height: 32px; fill: #7db548; }
.fall--5 { left: 66%; top: 6%; width: 24px; height: 24px; fill: #f4bd4f; }
.fall--6 { left: 80%; top: 30%; fill: #a3cf6a; }
.fall--7 { left: 92%; top: -2%; width: 22px; height: 22px; fill: #e98262; }
.fall--8 { left: 14%; top: 58%; width: 30px; height: 30px; fill: #f4bd4f; }
.garden--compostario { left: 1%; bottom: 0; --s: 0.95; }
#compostario { padding-bottom: clamp(7rem, 10vw, 8.5rem); }
.garden .fl.fl--plant { width: calc(62px * var(--s)); aspect-ratio: 130 / 230; margin-inline: calc(-14px * var(--s)); --sp-a: #7db548; --sp-b: #a3cf6a; --sp-stem: #7db548; }
.garden .fl.fl--plant:nth-child(4) { width: calc(50px * var(--s)); --sp-a: #5f9c46; --sp-b: #8cc152; }

/* Movimiento: todo lento y decorativo; se apaga completo con reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise 0.9s var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: 0.1s; }
  .hero-copy > :nth-child(3) { animation-delay: 0.2s; }
  .hero-copy > :nth-child(4) { animation-delay: 0.3s; }
  .hero-copy > :nth-child(5) { animation-delay: 0.4s; }
  .hero-photo { animation: reveal 1.2s var(--ease-out) both; }
  .hero-visual::before { animation: sunrise 1.6s var(--ease-out) both; }

  .sprig--hero-l, .sprig--hero-r, .sprig--recibe { animation: sway 7s ease-in-out infinite alternate; }
  .sprig--hero-r { animation-duration: 5.5s; animation-delay: -2s; }
  .sprig--recibe { animation-duration: 6.5s; }

  .butterfly { animation: flutter-path 16s ease-in-out infinite; }
  .butterfly .wing--l { animation: flap-l 0.5s ease-in-out infinite alternate; }
  .butterfly .wing--r { animation: flap-r 0.5s ease-in-out infinite alternate; }

  .drift { animation: drift 13s linear infinite; }
  .drift--2 { animation-duration: 15s; animation-delay: -4s; }
  .drift--3 { animation-duration: 12s; animation-delay: -8s; }
  .drift--4 { animation-duration: 16s; animation-delay: -2s; }
  .drift--5 { animation-duration: 14s; animation-delay: -10s; }
  .drift--6 { animation-duration: 17s; animation-delay: -6s; }

  .band-track { animation: band 48s linear infinite; }
  .band:hover .band-track { animation-play-state: paused; }


  .garden .fl { animation: fl-sway 4.6s ease-in-out infinite alternate; }
  .garden .fl:nth-child(2n) { animation-duration: 5.4s; animation-delay: -1.8s; }
  .garden .fl:nth-child(3n) { animation-duration: 3.9s; animation-delay: -3.1s; }
  .garden .fl:nth-child(5n) { animation-duration: 6.1s; animation-delay: -0.7s; }
  .bee { animation: bee-path 13s ease-in-out infinite; }
  .bee--libro { animation-duration: 11s; animation-delay: -5s; }
  .bee svg { animation: bob 0.5s ease-in-out infinite alternate; }
  .bee-wing { animation: buzz 0.08s linear infinite alternate; }
  .ladybug { animation: ladybug-walk 18s linear infinite; }
  .fireflies span { animation: ff-move 9s ease-in-out infinite alternate, ff-blink 3.2s ease-in-out infinite; }
  .fireflies span:nth-child(2n) { animation-duration: 11s, 2.6s; animation-delay: -3s, -1s; }
  .fireflies span:nth-child(3n) { animation-duration: 8s, 4s; animation-delay: -5s, -2s; }
  .seed { animation: seed-float 22s linear infinite; }
  .seed:nth-child(2) { animation-duration: 26s; animation-delay: -9s; }
  .seed:nth-child(3) { animation-duration: 24s; animation-delay: -15s; }
  .seed:nth-child(4) { animation-duration: 28s; animation-delay: -4s; }
  .dog-tail { animation: wag 0.7s ease-in-out infinite alternate; }
  .butterfly--r1 { animation-duration: 14s; animation-delay: -3s; }
  .butterfly--r2 { animation-duration: 18s; animation-delay: -9s; }
  .butterfly--c1 { animation-duration: 15s; animation-delay: -6s; }
  .butterfly--c2 { animation-duration: 19s; animation-delay: -12s; }
  .butterfly--c3 { animation-duration: 16s; animation-delay: -2s; }
  .butterfly--c4 { animation-duration: 21s; animation-delay: -15s; }
  .butterfly--c3 .wing { animation-duration: 0.46s; }
  .butterfly--r2 .wing, .butterfly--c1 .wing { animation-duration: 0.42s; }
  .bee--r1 { animation-duration: 12s; animation-delay: -4s; }
  .bee--r2 { animation-duration: 14s; animation-delay: -8s; }
  .fall { animation: fall 14s linear infinite; }
  .fall--2 { animation-duration: 17s; animation-delay: -5s; }
  .fall--3 { animation-duration: 12s; animation-delay: -9s; }
  .fall--4 { animation-duration: 16s; animation-delay: -2s; }
  .fall--5 { animation-duration: 13s; animation-delay: -11s; }
  .fall--6 { animation-duration: 18s; animation-delay: -7s; }
  .fall--7 { animation-duration: 15s; animation-delay: -13s; }
  .fall--8 { animation-duration: 19s; animation-delay: -4s; }
  .dog-head { animation: dog-tilt 6s ease-in-out infinite; }
  .dog-eyes { animation: blink 4.5s ease-in-out infinite; }
  .dog-front { animation: rise 0.9s var(--ease-out) 0.5s both; }

  /* fuera de pantalla, las animaciones se pausan (menos trabajo en celulares) */
  .js .deco-zone:not(.in-view) :is(.fl, .bee, .bee svg, .bee-wing, .ladybug, .fireflies span, .seed, .dog-tail, .dog-head, .dog-eyes, .butterfly, .wing, .fall, .drift, .band-track, .sprig) { animation-play-state: paused; }

  html .rv { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); transition-delay: var(--d, 0s); }
  html .rv.is-in { opacity: 1; transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes reveal { from { opacity: 0; clip-path: inset(6% 6% 0 6% round 999px 999px 0 0); } }
@keyframes sunrise { from { opacity: 0; transform: translateY(18%) scale(0.85); } }
@keyframes sway { from { transform: rotate(-3deg); } to { transform: rotate(3.5deg); } }
@keyframes flap-l { from { transform: scaleX(1); } to { transform: scaleX(0.3); } }
@keyframes flap-r { from { transform: scaleX(1); } to { transform: scaleX(0.3); } }
@keyframes flutter-path {
  0%   { transform: translate(0, 0) rotate(-8deg); }
  20%  { transform: translate(calc(28px * var(--ax, 1)), calc(-26px * var(--ay, 1))) rotate(6deg); }
  40%  { transform: translate(calc(64px * var(--ax, 1)), calc(-8px * var(--ay, 1))) rotate(-4deg); }
  60%  { transform: translate(calc(40px * var(--ax, 1)), calc(24px * var(--ay, 1))) rotate(10deg); }
  80%  { transform: translate(calc(8px * var(--ax, 1)), calc(12px * var(--ay, 1))) rotate(-6deg); }
  100% { transform: translate(0, 0) rotate(-8deg); }
}
@keyframes drift {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10%  { opacity: 0.9; }
  75%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(-46vw, 70vh) rotate(420deg); }
}
@keyframes band { to { transform: translateX(-50%); } }
@keyframes fl-sway { from { transform: rotate(-4deg); } to { transform: rotate(4.5deg); } }
@keyframes buzz { to { transform: scaleY(0.35); } }
@keyframes bob { from { transform: translateY(-2px); } to { transform: translateY(2px); } }
@keyframes bee-path {
  0%   { transform: translate(0, 0) rotate(-4deg); }
  18%  { transform: translate(calc(-70px * var(--ax, 1)), calc(24px * var(--ay, 1))) rotate(5deg); }
  36%  { transform: translate(calc(-130px * var(--ax, 1)), calc(-6px * var(--ay, 1))) rotate(-6deg); }
  52%  { transform: translate(calc(-80px * var(--ax, 1)), calc(-42px * var(--ay, 1))) rotate(4deg); }
  70%  { transform: translate(calc(-10px * var(--ax, 1)), calc(-30px * var(--ay, 1))) rotate(-3deg); }
  85%  { transform: translate(calc(30px * var(--ax, 1)), calc(6px * var(--ay, 1))) rotate(6deg); }
  100% { transform: translate(0, 0) rotate(-4deg); }
}
@keyframes ladybug-walk {
  0%   { transform: translateX(0) scaleX(1); }
  46%  { transform: translateX(96px) scaleX(1); }
  50%  { transform: translateX(96px) scaleX(-1); }
  96%  { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}
@keyframes ff-move { to { transform: translate(var(--dx, 20px), var(--dy, -20px)); } }
@keyframes ff-blink { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.95; } }
@keyframes seed-float {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-12deg); }
  10%  { opacity: 0.7; }
  85%  { opacity: 0.55; }
  100% { opacity: 0; transform: translate(18vw, -70vh) rotate(24deg); }
}
@keyframes fall {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10%  { opacity: 0.9; }
  30%  { transform: translate(26px, 18vh) rotate(100deg); }
  55%  { transform: translate(-18px, 36vh) rotate(190deg); }
  80%  { opacity: 0.8; transform: translate(22px, 52vh) rotate(270deg); }
  100% { opacity: 0; transform: translate(-6px, 64vh) rotate(340deg); }
}
@keyframes wag { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
@keyframes dog-tilt { 0%, 55%, 100% { transform: rotate(0deg); } 65%, 82% { transform: rotate(8deg); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .drift, .fall { display: none; }
}

/* Responsive */
@media (max-width: 1100px) {
  .nav-toggle { display: grid; }
  .header-cta { display: none; }
  .main-nav {
    position: absolute;
    inset: var(--header-height) 0 auto 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 0.5rem var(--gutter) 1.25rem;
    display: none;
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav a { display: flex; align-items: center; min-height: 48px; font-size: 1.05rem; }
}

@media (max-width: 860px) {
  .hero-grid,
  .about-grid,
  .recibe-grid,
  .visit-grid,
  .care-grid,
  .faq-grid,
  .contact-grid,
  .proceso-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 400px; width: 88%; margin: 0.5rem auto 0; }
  .hero-photo { max-height: none; }
  .hero-visual::before { right: -20%; top: -8%; }
  .hero-visual .butterfly { left: -6%; top: 8%; }
  .recibe-visual { max-width: 320px; width: 82%; }
  .visit-copy, .faq-side { position: static; }
  .videos-page .videos-players { grid-template-columns: 1fr; }
  .video--offset { margin-top: 0; }
  .book { grid-template-columns: 1fr; justify-items: start; }
  .book img { width: 200px; }
  .wa-float { display: grid; }
  /* Tallo pegajoso compacto arriba del texto */
  .plant-col {
    top: var(--header-height);
    z-index: 5;
    background: rgb(46 28 17 / 0.86);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    padding-block: 0.5rem;
    margin-inline: calc(var(--gutter) * -1);
  }
  .plant { max-height: 150px; }
  .section { padding-block: 3.5rem; }
  .steps { gap: 3rem; padding-top: 1rem; }
  .esquelas { grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
  .branch--visit { display: none; }
  .garden { --s: 0.72; }
  .garden--memoria-l, .garden--memoria-r { --s: 0.62; }
  .bee--regresa { top: auto; bottom: 64px; right: 10%; --ax: 0.4; --ay: 0.55; }
  .bee--libro { left: auto; right: 10%; top: 4%; }
  #regresa { padding-bottom: 7rem; }
  .butterfly--r1 { left: auto; right: 10%; top: 3%; }
  .butterfly--r2 { left: 48%; top: 28%; --ax: 0.6; --ay: 0.8; }
  .bee--r1 { left: auto; top: 40%; right: 6%; }
  .bee--r2 { bottom: auto; top: 36%; left: 44%; --ax: 0.45; --ay: 0.6; }
  .butterfly--c1 { left: auto; right: 8%; top: 52%; --ax: 0.6; }
  .butterfly--c2 { top: 74%; right: 6%; --ax: 0.6; }
  .butterfly--c3 { left: 8%; top: 60%; --ax: 0.8; }
  .butterfly--c4 { right: 22%; top: 84%; }
  .garden--compostario { --s: 0.7; }
  #compostario { padding-bottom: 6.5rem; }
  .fireflies span:nth-child(n + 7) { display: none; }
  .drift--1, .drift--5 { display: none; }
}

@media (max-width: 520px) {
  .hours div { grid-template-columns: 1fr; gap: 0; }
  .leave-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .values { grid-template-columns: 1fr; }
  .brand-name { font-size: 1.35rem; }
  .brand img { width: 40px; }
  .hero-actions .btn { width: 100%; }
  .hero-points li { font-size: 0.86rem; }
  .faq details { padding-inline: 1rem; }
  .faq summary { font-size: 1.25rem; }
}