/* Estilos de cada sección, en el orden de la página */

/* Barra de progreso de lectura; main.js actualiza --progress */
.progress {
  position: fixed; inset: 0 0 auto; z-index: 60; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--brand), var(--lime));
  transform-origin: left; transform: scaleX(var(--progress, 0));
}

/* Header */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h);
  display: flex; align-items: center;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base), border-color var(--dur-base);
}
.header.is-scrolled {
  background: rgb(248 249 245 / .9); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--border);
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.header .lockup__mark { height: 34px; }
.header .lockup__rule { height: 32px; }
.header .lockup__name { font-size: 1rem; }
.header__cta { display: none; min-height: 40px; padding: 0 18px; font-size: .875rem; }

.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: 34px; }
.nav__link {
  position: relative; display: block; padding: 6px 0;
  font-size: .9375rem; font-weight: 600; color: var(--ink-body);
  transition: color var(--dur-base);
}
/* Línea que entra por la izquierda y sale por la derecha */
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav__link:hover,
.nav__link.is-active { color: var(--brand-dark); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active::after { transform: scaleX(1); background: var(--lime); }

.menu-toggle {
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid var(--border); border-radius: var(--radius-full);
  background: transparent; color: var(--ink);
}
.menu-toggle .icon { width: 20px; height: 20px; }
.menu-toggle .icon--close { display: none; }

@media (max-width: 1023px) {
  .nav {
    display: block; position: fixed; inset: var(--header-h) 0 auto; z-index: 49;
    padding: 8px var(--gutter) 20px;
    background: var(--surface-page); border-bottom: 1px solid var(--border);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { padding: 14px 0; font-size: 1.0625rem; color: var(--ink); border-bottom: 1px solid var(--border); }
  .nav__link::after { bottom: -1px; }
  .nav__cta { display: flex; width: 100%; margin-top: 18px; }
  .header.is-open { background: var(--surface-page); border-bottom-color: var(--border); }
  .header.is-open .nav { opacity: 1; visibility: visible; transform: none; }
  .header.is-open .icon--open { display: none; }
  .header.is-open .icon--close { display: block; }
}
@media (min-width: 1024px) {
  .nav { display: block; }
  .nav__cta, .menu-toggle { display: none; }
  .header__cta { display: inline-flex; }
}

/* Hero */
.hero { padding: calc(var(--header-h) + clamp(1.5rem, .5rem + 3vw, 3.5rem)) 0 clamp(3rem, 2rem + 3vw, 5rem); }
.hero__grid { display: grid; gap: 40px; align-items: center; }
.hero__kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-soft);
}
.hero__kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.hero__kicker span { color: var(--brand); }
.hero__title {
  margin-top: 18px; font-size: clamp(2.25rem, 1.3rem + 3.4vw, 4.125rem);
  font-weight: 700; line-height: 1.02; letter-spacing: -.04em; color: var(--brand-deep);
}
.hero__light { display: block; font-weight: 300; color: var(--ink); }
.hero__brush { position: relative; z-index: 0; display: inline-block; color: var(--brand); }
/* Trazo de la marca que se dibuja una vez al cargar */
.hero__brush img {
  position: absolute; z-index: -1; left: -2%; bottom: -.1em; width: 104%;
  transform: rotate(-2.5deg); transform-origin: left center;
  clip-path: inset(0 100% 0 0); animation: brush-in 1.1s .5s var(--ease-out) forwards;
}
@keyframes brush-in { to { clip-path: inset(0); } }
.hero__lead { max-width: 28rem; margin-top: 20px; font-size: 1.0625rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 26px; }
.hero__origin {
  display: flex; align-items: center; gap: 8px; max-width: 28rem; margin-top: 32px; padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: .8125rem; font-weight: 600; color: var(--ink-soft);
}
.hero__origin .icon { width: 16px; height: 16px; color: var(--brand); }

.hero__photo { position: relative; }
.hero__photo img {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 40% 45%;
  border-radius: 22px; box-shadow: 0 24px 48px -28px rgb(19 47 24 / .45);
}
.hero__photo figcaption {
  position: absolute; left: 14px; bottom: 14px; padding: 7px 12px; border-radius: var(--radius-full);
  background: rgb(255 255 255 / .92); backdrop-filter: blur(6px);
  font-size: .75rem; font-weight: 600; color: var(--ink);
}
@media (max-width: 479px) {
  .hero__photo img { aspect-ratio: 4 / 3; border-radius: 18px; }
}
@media (min-width: 640px) and (max-width: 959px) {
  .hero__grid { gap: 48px; }
  .hero__lead, .hero__origin { max-width: 34rem; }
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 5vw, 72px); }
  /* Altura según la pantalla: la portada entra completa */
  .hero__photo img {
    aspect-ratio: auto; height: clamp(420px, calc(100svh - var(--header-h) - 110px), 600px);
    object-position: 50% 40%; border-radius: 26px;
  }
  .hero__photo figcaption { left: 18px; bottom: 18px; }
}

/* Nosotros: mosaico */
.bento { display: grid; gap: 16px; }
.tile { position: relative; overflow: hidden; padding: clamp(22px, 3vw, 36px); border-radius: var(--radius-3xl); }
.tile--intro { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); }
.tile--intro .lead { font-size: 1rem; }
.tile__more { margin-top: auto; padding-top: 28px; }
.checklist { display: grid; gap: 12px; margin-top: 24px; }
.checklist li { display: flex; align-items: center; gap: 12px; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.checklist .icon {
  width: 24px; height: 24px; padding: 5px; border-radius: 50%;
  background: var(--brand-dark); color: var(--lime); stroke-width: 3;
}

.tile--photo { min-height: 240px; padding: 0; }
.tile--photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-media) ease-out;
}
.tile--photo:hover img { transform: scale(1.05); }
.tile__caption {
  position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: var(--radius-full);
  background: rgb(255 255 255 / .92); backdrop-filter: blur(6px);
  font-size: .8125rem; font-weight: 700; color: var(--ink);
}
.tile__caption .icon { width: 16px; height: 16px; color: var(--brand); }

.tile--phrase {
  display: grid; place-items: center; min-height: 240px;
  background: var(--brand-deep) url("../img/curvas-nivel.svg") center / cover;
}
.tile--phrase img { width: min(260px, 85%); }

.tile--stat,
.tile--accent { display: flex; flex-direction: column; justify-content: flex-end; min-height: 200px; }
.tile--stat { background: #fff; border: 1px solid var(--border); }
.tile--accent { background: var(--sand); }
.tile__value { font-size: clamp(3.5rem, 3rem + 3vw, 5.5rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; color: var(--brand-deep); }
.tile__label { max-width: 16rem; margin-top: 12px; font-size: .9375rem; font-weight: 600; line-height: 1.4; color: var(--brand-dark); }

@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile--intro, .tile--field, .tile--sprout { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "intro   intro  field  field"
      "intro   intro  phrase accent"
      "made    sprout sprout months";
    gap: 20px;
  }
  .tile--intro { grid-area: intro; }
  .tile--field { grid-area: field; }
  .tile--phrase { grid-area: phrase; }
  .tile--accent { grid-area: accent; }
  .tile--made { grid-area: made; }
  .tile--sprout { grid-area: sprout; }
  .tile--months { grid-area: months; }
}

/* Productos: tarjetas que se voltean */
.products { background: #fff; }
.fruits { display: grid; gap: 20px; }
@media (min-width: 640px) { .fruits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .fruits { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

.fruit { perspective: 1400px; }
/* Ambas caras en la misma celda, con el alto de la mayor */
.fruit__inner {
  display: grid; height: 100%; transform-style: preserve-3d;
  transition: transform .7s var(--ease-out), translate var(--dur-base) var(--ease-out);
}
.fruit:hover .fruit__inner { translate: 0 -6px; }
.fruit.is-flipped .fruit__inner { transform: rotateY(180deg); }
.fruit__face {
  grid-area: 1 / 1; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: var(--radius-3xl); background: #fff;
  backface-visibility: hidden;
  transition: box-shadow var(--dur-base), border-color var(--dur-base);
}
.fruit:hover .fruit__face { box-shadow: var(--shadow-lift); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

.fruit__stage { position: relative; display: grid; place-items: end center; aspect-ratio: 5 / 4; overflow: hidden; background: var(--tint); }
.fruit__season {
  position: absolute; z-index: 2; top: 16px; right: 16px;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-full);
  background: rgb(255 255 255 / .9); backdrop-filter: blur(6px); box-shadow: var(--shadow-xs);
  font-size: .75rem; font-weight: 700; white-space: nowrap; color: var(--ink);
  transition: background-color var(--dur-base), color var(--dur-base);
}
.fruit__season .icon { width: 14px; height: 14px; color: var(--accent); }
.fruit__season:hover { background: var(--brand-dark); color: #fff; }
.fruit__season:hover .icon { color: var(--lime); }
.fruit__arch { width: 72%; height: 86%; overflow: hidden; border-radius: 999px 999px 0 0; background: #fff; }
.fruit__arch img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--dur-media) var(--ease-out); }
.fruit:hover .fruit__arch img { transform: scale(1.08) rotate(-4deg); }

.fruit__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 6px; padding: 20px 22px 22px; }
.fruit__body h3 { font-size: 1.25rem; font-weight: 700; }
.fruit__body p { margin-bottom: 14px; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }

.fruit__flip {
  display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding: 8px 8px 8px 14px;
  border: 0; border-radius: var(--radius-full); background: var(--tint);
  font-size: .8125rem; font-weight: 800; color: var(--ink);
  transition: background-color var(--dur-base), color var(--dur-base);
}
.fruit__flip:hover { background: var(--brand-dark); color: #fff; }
.fruit__plus { position: relative; width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.fruit__plus::before,
.fruit__plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: translate(-50%, -50%);
}
.fruit__plus::after { transform: translate(-50%, -50%) rotate(90deg); }

.fruit__back {
  gap: 18px; padding: 26px 24px 22px; transform: rotateY(180deg);
  border-color: transparent; color: #fff;
  background: linear-gradient(rgb(19 47 24 / .82), rgb(19 47 24 / .82)), var(--brand-deep) url("../img/curvas-nivel.svg") center / cover;
}
.fruit__label {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 6px 12px; border-radius: var(--radius-full); background: var(--lime); color: var(--brand-deep);
  font-size: .75rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.fruit__label .icon { width: 14px; height: 14px; }
.fruit__fact { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
.fruit__forms small { display: block; margin-bottom: 8px; font-size: .75rem; font-weight: 700; color: rgb(255 255 255 / .65); }
.fruit__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fruit__back .chip { background: rgb(255 255 255 / .12); color: #fff; }
.fruit__back .chip::before { background: var(--lime); }
.fruit__back .fruit__flip { align-self: flex-start; padding: 10px 16px; background: rgb(255 255 255 / .12); color: #fff; }
.fruit__back .fruit__flip:hover { background: var(--lime); color: var(--brand-deep); }
.fruit__back .fruit__flip .icon { width: 16px; height: 16px; transform: rotate(180deg); }

/* Temporadas: la tabla la arma main.js */
.seasons__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filter {
  padding: 9px 16px; border: 1px solid var(--border); border-radius: var(--radius-full); background: #fff;
  font-size: .875rem; font-weight: 700; color: var(--ink-body);
  transition: background-color var(--dur-base), color var(--dur-base), border-color var(--dur-base);
}
.filter:hover { border-color: var(--brand); color: var(--brand-dark); }
.filter.is-active { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

.calendar { overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-3xl); box-shadow: var(--shadow-card); }
.calendar__hint { display: none; align-items: center; gap: 8px; padding: 12px 16px 0; font-size: .75rem; font-weight: 700; color: var(--ink-soft); }
.calendar__hint .icon { width: 16px; height: 16px; color: var(--brand); }
.calendar__scroll { position: relative; overflow-x: auto; scrollbar-width: thin; }
.calendar__table { width: 100%; min-width: 760px; border-collapse: collapse; table-layout: fixed; }
.calendar__table th,
.calendar__table td { padding: 0; text-align: center; }
.calendar__table thead th { padding: 18px 0 12px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.calendar__table thead th:first-child { width: 190px; }
.calendar__table abbr { text-decoration: none; }
.calendar__table tbody tr { border-top: 1px solid var(--surface-muted); transition: opacity var(--dur-base); }
.calendar__table tbody tr.is-dimmed { opacity: .18; }
.calendar__table tbody th {
  position: sticky; left: 0; z-index: 1; padding: 12px 16px 12px 22px;
  background: #fff; text-align: left; white-space: nowrap;
  font-size: .9375rem; font-weight: 700; color: var(--ink);
}
.calendar__table tbody td { height: 58px; }
.calendar__fruit { display: flex; align-items: center; gap: 12px; }
.calendar__fruit img { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; object-fit: cover; }

/* Cada celda pinta su tramo; los extremos se redondean */
.bar {
  display: block; height: 14px; margin-inline: -1px; background: var(--tint);
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out); transition-delay: calc(var(--m, 0) * 40ms);
}
.bar--start { margin-left: 6px; border-radius: 999px 0 0 999px; }
.bar--end { margin-right: 6px; border-radius: 0 999px 999px 0; }
.bar--start.bar--end { border-radius: 999px; }
.bar--peak { height: 18px; background: var(--accent); }
.calendar.is-visible .bar { transform: none; }

.calendar__table .is-now { background: color-mix(in srgb, var(--lime) 16%, transparent); }
.calendar__table thead .is-now abbr { display: inline-block; padding: 3px 8px; border-radius: var(--radius-full); background: var(--lime); color: var(--brand-deep); }

.calendar__legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 16px 22px;
  border-top: 1px solid var(--surface-muted); font-size: .8125rem; font-weight: 600; color: var(--ink-body);
}
.calendar__legend span { display: inline-flex; align-items: center; gap: 8px; }
.calendar__legend small { margin-left: auto; font-weight: 500; color: var(--ink-soft); }
.legend { display: inline-block; width: 22px; height: 10px; border-radius: 999px; }
.legend--on { background: var(--brand-glow); }
.legend--peak { background: var(--brand); }
.legend--now { background: color-mix(in srgb, var(--lime) 45%, transparent); }

@media (max-width: 767px) {
  .calendar__hint { display: flex; }
  .calendar__table { min-width: 680px; }
  .calendar__table thead th:first-child { width: 150px; }
  .calendar__table tbody th { padding-left: 14px; font-size: .875rem; line-height: 1.25; white-space: normal; }
  .calendar__fruit img { width: 28px; height: 28px; }
  .calendar__legend small { width: 100%; margin-left: 0; }
}

/* Proceso: ruta de cinco pasos */
.process { background: var(--brand-tint); }
.route { position: relative; }
.route__line { display: none; }
.route__stops { position: relative; display: grid; gap: 28px; }
.route__stops::before {
  content: ""; position: absolute; left: 35px; top: 36px; bottom: 36px;
  border-left: 2px dashed var(--brand-border);
}
.stop { position: relative; display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 18px; }
.stop__node {
  position: relative; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: #fff; color: var(--brand); border: 1px solid var(--brand-border);
  box-shadow: 0 10px 24px -12px rgb(27 67 34 / .35);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base), color var(--dur-base);
}
.stop__node .icon { width: 28px; height: 28px; stroke-width: 1.6; }
.stop:hover .stop__node { transform: translateY(-4px); background: var(--brand-dark); color: var(--lime); }
.stop__num {
  position: absolute; top: -2px; right: -2px; display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%; background: var(--lime); color: var(--brand-deep);
  font-size: .75rem; font-weight: 800;
}
.stop h3 { font-size: 1.0625rem; font-weight: 700; }
.stop p { margin-top: 4px; font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }

@media (min-width: 1024px) {
  .route__line { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 80px; overflow: visible; }
  /* Puntos que avanzan por la línea, como la fruta en camino */
  .route__line path {
    fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round;
    stroke-dasharray: 1 11; vector-effect: non-scaling-stroke;
    animation: flow 1.4s linear infinite;
  }
  .route__stops { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .route__stops::before { display: none; }
  .stop { grid-template-columns: 1fr; justify-items: center; align-items: start; gap: 20px; text-align: center; }
  .stop__node { width: 80px; height: 80px; }
  .stop p { max-width: 13rem; margin-inline: auto; }
}
@keyframes flow { to { stroke-dashoffset: -12; } }

/* Calidad */
.quality { background: #fff; }
.quality__grid { display: grid; gap: 56px; align-items: center; }
.quality__media { position: relative; width: 100%; max-width: 520px; margin-inline: auto; }
.quality__media::before {
  content: ""; position: absolute; inset: 24px -16px -16px 24px;
  border-radius: 40px 40px 40px 160px; background: var(--brand-surface);
}
.quality__photo { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 40px 40px 40px 160px; }
.quality__photo img { width: 100%; height: 100%; object-fit: cover; }
.quality__features { display: grid; gap: 14px; margin-top: 32px; }
.feature {
  display: flex; align-items: flex-start; gap: 16px; padding: 18px;
  border: 1px solid var(--border); border-radius: var(--radius-2xl);
  transition: border-color var(--dur-base), background-color var(--dur-base);
}
.feature:hover { border-color: var(--brand-border); background: var(--brand-tint); }
.feature h3 { margin-bottom: 4px; font-size: 1.0625rem; font-weight: 700; }
.feature p { font-size: var(--fs-small); line-height: 1.55; color: var(--ink-soft); }

.certs { margin-top: 24px; }
.certs summary {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  font-size: .9375rem; font-weight: 700; color: var(--brand-dark);
}
.certs summary::-webkit-details-marker { display: none; }
.certs summary:hover { color: var(--brand); }
.certs .toggle-icon { width: 26px; height: 26px; }
.certs__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (min-width: 1024px) { .quality__grid { grid-template-columns: .95fr 1.05fr; gap: 80px; } }

/* Llamado a la acción */
.cta { background: #fff; padding-bottom: var(--section-y); }
.cta__card {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px); border-radius: 32px;
  background: var(--brand-deep); color: #fff;
}
.cta__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgb(19 47 24 / .96), rgb(19 47 24 / .82) 50%, rgb(19 47 24 / .3));
}
.cta__bg,
.cta__topo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta__bg { z-index: -2; object-position: center 60%; }
.cta__topo { z-index: -1; opacity: .12; }
.cta__content { max-width: 36rem; }
.cta__content .lead { margin-bottom: 32px; color: rgb(255 255 255 / .85); }

/* Preguntas frecuentes */
.faq { background: #fff; }
.faq__grid { display: grid; gap: 40px; }
.faq__help {
  display: flex; align-items: center; gap: 14px; max-width: 22rem; margin-top: 28px; padding: 16px 18px;
  background: var(--brand-tint); border: 1px solid var(--brand-border); border-radius: var(--radius-2xl);
}
.faq__help strong { display: block; font-size: .9375rem; color: var(--ink); }
.faq__list { display: grid; gap: 12px; }
.qa {
  border: 1px solid var(--border); border-radius: var(--radius-2xl); background: #fff;
  transition: border-color var(--dur-base), background-color var(--dur-base), box-shadow var(--dur-base);
}
.qa[open] { border-color: var(--brand-border); background: var(--brand-tint); box-shadow: var(--shadow-card); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 700; color: var(--ink);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--brand-dark); }
.qa p { max-width: 40rem; margin-top: -4px; padding: 0 22px 20px; color: var(--ink-body); }
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
  .faq__intro { position: sticky; top: calc(var(--header-h) + 32px); }
}

/* Contacto */
.contact__grid { display: grid; gap: 48px; }
.contact__list { display: grid; gap: 18px; margin-top: 32px; }
.contact__item { display: flex; align-items: center; gap: 16px; }
.contact__item small { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.contact__item a,
.contact__item span { font-weight: 600; color: var(--ink); }
.contact__item a:hover { color: var(--brand-dark); text-decoration: underline; text-underline-offset: 3px; }

.form-card { padding: clamp(24px, 4vw, 44px); background: #fff; border: 1px solid var(--border); border-radius: 28px; box-shadow: var(--shadow-brand); }
.form-card h3 { font-size: 1.375rem; font-weight: 700; }
.form-card__sub { margin: 6px 0 24px; font-size: var(--fs-small); color: var(--ink-soft); }
.form,
.form__row { display: grid; gap: 16px; }
.form .btn { width: 100%; margin-top: 8px; justify-content: space-between; }
.form__note { font-size: .8125rem; text-align: center; color: var(--ink-soft); }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .contact__grid { grid-template-columns: .85fr 1.15fr; gap: 72px; align-items: start; } }

/* Footer */
.footer { position: relative; padding-top: 120px; }
.footer__hills { position: absolute; inset: 0 0 auto; width: 100%; height: 140px; }
.footer__main { position: relative; background: var(--brand-dark); color: rgb(255 255 255 / .75); }
.footer__grid { display: grid; gap: 40px; padding-block: 56px 40px; }
.footer__about { max-width: 22rem; margin-top: 18px; font-size: var(--fs-small); }
.footer h4 { margin-bottom: 16px; font-size: .75rem; font-weight: 800; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: #fff; }
.footer__links { display: grid; gap: 10px; font-size: var(--fs-small); }
.footer__links a:hover { color: var(--lime); }
.footer__word {
  margin-top: 8px; overflow: hidden; white-space: nowrap; text-align: center;
  font-size: clamp(1.75rem, 7.4vw, 6.75rem); font-weight: 800; line-height: .95; letter-spacing: -.045em;
  color: transparent; -webkit-text-stroke: 1px rgb(255 255 255 / .24);
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
}
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  padding-block: 22px 28px; border-top: 1px solid rgb(255 255 255 / .12); font-size: .8125rem;
}
.footer__motto { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #fff; }
.footer__motto .icon { width: 16px; height: 16px; color: var(--lime); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }

/* Estados de marca basados en los mismos tokens que los botones. */
.filter.is-active,
.filter.is-active:hover,
.fruit__flip:hover,
.fruit__season:hover,
.menu-toggle:hover,
.header.is-open .menu-toggle,
.stop:hover .stop__node {
  background-color: var(--brand);
  background-image: var(--brand-gradient);
  color: var(--brand-deep);
  border-color: transparent;
  box-shadow: 0 4px 12px -2px var(--brand-gradient-glow);
}
.fruit__season:hover .icon { color: currentColor; }
.filter:active,
.fruit__flip:active,
.menu-toggle:active { box-shadow: var(--brand-pressed-shadow); }
.progress { background: var(--brand-gradient); }
.nav__link.is-active::after { background: var(--brand-gradient); }
.calendar__table thead .is-now abbr,
[open] > summary .toggle-icon { background: var(--brand-gradient); color: var(--brand-deep); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active, .btn:hover .icon, .btn:active .icon { transform: none; }
}