/* Las cabañas · Chícharo */

/* ---------- Ficha: dos sobres de semillas iguales ---------- */
.ficha__grilla { display: grid; gap: 56px; align-items: center; }
.ficha__texto { display: grid; gap: 20px; align-content: start; }
.paquetes { position: relative; display: grid; padding: 18px 34px 40px 0; }
.paquete { grid-area: 1 / 1; position: relative; z-index: 2; background: var(--sobre) var(--grano); padding: 30px 26px 26px; -webkit-mask: var(--picado); mask: var(--picado); box-shadow: 0 1px 0 var(--linea); transform: rotate(-1.5deg); }
.js .paquete[data-reveal] { transform: translateY(26px) rotate(-1.5deg); }
.js .paquete[data-reveal].visto { transform: rotate(-1.5deg); }
.paquete::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(34, 37, 26, .22); pointer-events: none; }
.paquete--gemelo { z-index: 1; transform: translate(22px, 26px) rotate(3deg); background-color: #e9dfc6; }
.paquete__marca { display: flex; justify-content: space-between; gap: 12px; font: 500 .6875rem/1.2 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--tinta-3); padding-bottom: 12px; border-bottom: 3px double rgba(34, 37, 26, .35); }
.paquete__marca span:first-child { font: italic 1.25rem/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--oliva); }
.paquete__dibujo { width: min(240px, 70%); margin: 20px auto 6px; overflow: visible; }
.paquete__dibujo path { fill: none; stroke: var(--arveja-osc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.paquete__dibujo path:first-child { fill: var(--arveja-claro); fill-opacity: .6; }
.paquete__dibujo circle { fill: var(--arveja); stroke: var(--arveja-osc); stroke-width: 1.5; }
.paquete__nombre { font-family: var(--serif); font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1; text-align: center; margin-bottom: 18px; }
.paquete__nombre em { color: var(--arveja-osc); }
.paquete__igual { text-align: center; font: italic 1.25rem var(--serif); color: var(--tinta-3); }
.paquete__datos { margin: 0; display: grid; border-top: 1px solid rgba(34, 37, 26, .2); }
.paquete__datos div { display: grid; grid-template-columns: 6.4em 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px dashed rgba(34, 37, 26, .22); }
.paquete__datos dt { font: 500 .6875rem/1.9 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); }
.paquete__datos dd { margin: 0; color: var(--tinta-2); line-height: 1.45; }
.paquete__datos strong { font: 400 1.5rem/1 var(--serif); color: var(--tinta); }
.paquete__datos em { font: italic 1.5rem/1 var(--serif); color: var(--arveja-osc); }
@media (min-width: 960px) {
  .ficha__grilla { grid-template-columns: .95fr 1.05fr; gap: clamp(56px, 7vw, 112px); }
  .paquetes { padding: 24px 40px 48px 0; }
  .paquete { padding: 36px 34px 30px; }
}

/* ---------- Recorrido: su reel, cuadro por cuadro ----------
   El título va en su propia banda, arriba. Abajo la escena fija: la ventana con el video y, al costado
   (escritorio) o debajo (celular), el paso actual. El texto nunca va encima de la imagen.
   Sin JS o con "reducir movimiento": cuatro fotos quietas. */
.recorrido { position: relative; background: var(--crema-2) var(--grano); }
.recorrido__cabecera { display: grid; gap: 16px; padding-block: clamp(64px, 9vw, 112px) clamp(28px, 4vw, 48px); }
.recorrido__escena { display: none; }
.recorrido__quietas { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-bottom: clamp(64px, 9vw, 112px); }
.recorrido__quietas figure { margin: 0; display: grid; gap: 10px; }
.recorrido__quietas img { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; border-radius: var(--radio); }
.recorrido__quietas figcaption { font-family: var(--serif); font-size: 1.375rem; line-height: 1.1; display: flex; gap: 10px; align-items: baseline; }
.recorrido__quietas figcaption span { font: italic 1rem var(--serif); color: var(--arveja-osc); }
@media (min-width: 960px) { .recorrido__quietas { grid-template-columns: repeat(4, 1fr); gap: 22px; } }

.recorrido.animado { height: calc(var(--vh) * 520); }
.recorrido.animado .recorrido__quietas { display: none; }
.recorrido.animado .recorrido__escena { display: grid; position: sticky; top: var(--alto-enc); height: calc(var(--vh) * 100 - var(--alto-enc)); overflow: hidden; }
.recorrido__ventana { position: relative; overflow: hidden; background: var(--oliva-osc); }
.recorrido__ventana canvas, .recorrido__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.recorrido.con-canvas .recorrido__poster { visibility: hidden; }
.recorrido__pasos { list-style: none; counter-reset: paso; }
.recorrido__num { font: italic 1.125rem/1 var(--serif); color: var(--arveja-osc); }
.recorrido__nombre { font-family: var(--serif); line-height: 1.05; }
.recorrido__dato { color: var(--tinta-2); font-size: .9688rem; line-height: 1.45; }

/* Celular: la ventana arriba y una franja de papel abajo con el paso actual */
@media (max-width: 959px) {
  .recorrido.animado .recorrido__escena { grid-template-rows: 1fr auto; }
  .recorrido__ventana { grid-row: 1; min-height: 0; }
  .recorrido__pasos { grid-row: 2; }
  .recorrido__pasos { display: grid; background: var(--papel) var(--grano); padding: 16px var(--gutter) max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); position: relative; }
  .recorrido__pasos::before { content: ''; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--arveja); transform-origin: left; transform: scaleX(var(--p, 0)); }
  .recorrido__pasos li { grid-area: 1 / 1; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--curva); }
  .recorrido__pasos li.activo { opacity: 1; transform: none; }
  .recorrido__nombre { font-size: 1.75rem; }
  .recorrido__dato { grid-column: 2; }
}

/* Escritorio: los pasos a la izquierda, unidos por un tallo que crece; la ventana de arco a la derecha,
   siempre del alto de la pantalla (nunca se corta). */
@media (min-width: 960px) {
  .recorrido.animado .recorrido__escena { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(40px, 6vw, 96px); padding-inline: max(var(--gutter), (100vw - var(--ancho)) / 2); padding-block: 28px; }
  .recorrido__ventana { height: min(calc(var(--vh) * 100 - var(--alto-enc) - 56px), 880px); aspect-ratio: 9 / 16; border-radius: 999px 999px 4px 4px; box-shadow: var(--sombra); }
  .recorrido__ventana::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); pointer-events: none; }
  .recorrido__pasos { position: relative; display: grid; gap: 4px; padding-left: 40px; max-width: 600px; justify-self: start; width: 100%; }
  .recorrido__pasos::before { content: ''; position: absolute; left: 8px; top: 18px; bottom: 18px; width: 1.5px; background: var(--linea); }
  .recorrido__pasos::after { content: ''; position: absolute; left: 8px; top: 18px; bottom: 18px; width: 1.5px; background: var(--arveja); transform-origin: top; transform: scaleY(var(--p, 0)); }
  .recorrido__pasos li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: baseline; padding: 12px 0; opacity: .4; transition: opacity .4s; }
  .recorrido__pasos li::before { content: ''; position: absolute; left: -37px; top: 22px; width: 11px; height: 11px; border-radius: 50%; background: var(--crema-2); box-shadow: inset 0 0 0 1.5px var(--tinta-3); transition: background .3s, box-shadow .3s, transform .4s var(--curva); }
  .recorrido__pasos li.hecho { opacity: .62; }
  .recorrido__pasos li.hecho::before { background: var(--arveja); box-shadow: none; }
  .recorrido__pasos li.activo { opacity: 1; }
  .recorrido__pasos li.activo::before { background: radial-gradient(circle at 35% 30%, #e3edb4 0 14%, var(--arveja) 50%, var(--arveja-osc) 100%); box-shadow: none; transform: scale(1.5); }
  .recorrido__nombre { font-size: clamp(2rem, 3.4vw, 3.5rem); }
  .recorrido__pasos li { padding: 10px 0; }
  .recorrido__pasos li::before { top: calc(10px + clamp(2rem, 3.4vw, 3.5rem) * .55 - 5px); }
  .recorrido__dato { grid-column: 2; max-height: 0; overflow: hidden; transition: max-height .5s var(--curva); }
  .recorrido__pasos li.activo .recorrido__dato { max-height: 4em; }
  .recorrido__dato { font-size: 1.0625rem; }
}

/* ---------- Qué llevar ---------- */
.llevar__grilla { display: grid; gap: 22px; align-items: start; }
.llevar__col { padding: 28px 24px 24px; }
.llevar__hay, .llevar__traer { list-style: none; display: grid; }
.llevar__hay li { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: center; padding: 9px 0; color: var(--tinta-3); }
.llevar__hay svg { width: 26px; height: 26px; fill: none; stroke: var(--arveja-osc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.llevar__hay span { position: relative; justify-self: start; }
.llevar__hay span::after { content: ''; position: absolute; left: -2px; right: -2px; top: 54%; height: 1.5px; background: var(--tinta-2); transform-origin: left; transform: scaleX(1); }
.js .llevar__col[data-reveal] .llevar__hay span::after { transform: scaleX(0); transition: transform .6s var(--curva); }
.js .llevar__col.visto .llevar__hay span::after { transform: scaleX(1); }
.js .llevar__col.visto .llevar__hay li:nth-child(1) span::after { transition-delay: .3s; }
.js .llevar__col.visto .llevar__hay li:nth-child(2) span::after { transition-delay: .4s; }
.js .llevar__col.visto .llevar__hay li:nth-child(3) span::after { transition-delay: .5s; }
.js .llevar__col.visto .llevar__hay li:nth-child(4) span::after { transition-delay: .6s; }
.js .llevar__col.visto .llevar__hay li:nth-child(5) span::after { transition-delay: .7s; }
.js .llevar__col.visto .llevar__hay li:nth-child(6) span::after { transition-delay: .8s; }
.js .llevar__col.visto .llevar__hay li:nth-child(7) span::after { transition-delay: .9s; }
.js .llevar__col.visto .llevar__hay li:nth-child(8) span::after { transition-delay: 1s; }
.js .llevar__col.visto .llevar__hay li:nth-child(9) span::after { transition-delay: 1.1s; }
.js .llevar__col.visto .llevar__hay li:nth-child(10) span::after { transition-delay: 1.2s; }
.llevar__traer li { border-bottom: 1px dashed rgba(34, 37, 26, .2); }
.llevar__traer label { position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 0 14px; align-items: center; padding: 12px 0; cursor: pointer; }
.llevar__traer input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* La casilla es una arveja: vacía hasta que la tildás */
.llevar__marca { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--arveja-osc); background: var(--blanco); position: relative; transition: background .3s, transform .35s var(--curva); }
.llevar__marca::after { content: ''; position: absolute; left: 8px; top: 5px; width: 7px; height: 12px; border: solid var(--blanco); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--curva); }
.llevar__traer input:checked + .llevar__marca { background: radial-gradient(circle at 35% 30%, #e3edb4 0 12%, var(--arveja) 48%, var(--arveja-osc) 100%); box-shadow: none; transform: scale(1.08); }
.llevar__traer input:checked + .llevar__marca::after { transform: rotate(45deg) scale(1); }
.llevar__traer input:focus-visible + .llevar__marca { outline: 3px solid var(--arveja); outline-offset: 3px; }
.llevar__item { font-weight: 500; transition: color .3s; }
.llevar__traer input:checked ~ .llevar__item { color: var(--tinta-3); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.llevar__traer small { grid-column: 2; font-size: .8125rem; color: var(--tinta-3); }
.llevar__cuenta { font-weight: 600; letter-spacing: .14em; }
.llevar__pie { display: grid; gap: 10px; justify-items: start; margin-top: 20px; }
.llevar__aviso { min-height: 1.4em; font-size: .9375rem; color: var(--arveja-osc); }
.llevar.completa .llevar__cuenta { color: var(--arveja-osc); }
@media (min-width: 900px) {
  .llevar__grilla { grid-template-columns: 1fr 1fr; gap: 32px; }
  .llevar__col { padding: 34px 32px 30px; }
  .llevar__col--traer { transform: rotate(.6deg); }
  .llevar__col:first-child { transform: rotate(-.8deg); }
  .js .llevar__col[data-reveal]:not(.visto) { transform: translateY(26px); }
}

/* ---------- Familias ---------- */
.familias__grilla { display: grid; gap: 40px; align-items: center; }
.familias__foto { aspect-ratio: 4 / 3; }
.familias__texto { display: grid; gap: 22px; }
.tarjetas { display: grid; gap: 14px; margin-top: 6px; }
.tarjeta { display: grid; gap: 8px; text-decoration: none; transition: transform .4s var(--curva); }
.tarjeta:hover { transform: translateY(-3px) rotate(-.4deg); }
.tarjeta__titulo { font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; color: var(--tinta); }
.tarjeta__texto { color: var(--tinta-2); }
.tarjeta__ir { font-weight: 500; color: var(--arveja-osc); margin-top: 4px; }
@media (min-width: 960px) { .familias__grilla { grid-template-columns: 1fr 1fr; gap: clamp(56px, 7vw, 112px); } }

/* ---------- Afuera ---------- */
.afuera__grilla { display: grid; gap: 28px; }
.afuera__texto { display: grid; gap: 20px; }
.afuera__foto-1 { aspect-ratio: 4 / 3; }
.afuera__foto-2 { aspect-ratio: 4 / 3; width: 72%; justify-self: end; margin-top: -18%; border: 8px solid var(--blanco); border-bottom-width: 30px; border-radius: 2px; box-shadow: var(--sombra); transform: rotate(2deg); }
.js .afuera__foto-2[data-reveal='foto'] { transform: rotate(2deg); }
@media (min-width: 960px) {
  .afuera__grilla { grid-template-columns: .9fr 1.1fr .7fr; align-items: center; gap: 0 32px; }
  .afuera__foto-2 { width: auto; margin: 120px 0 0 -90px; }
}

/* ---------- Por fuera: la cabaña dibujada que se pinta ----------
   Sin JS o con "reducir movimiento": la foto y listo. Con JS: escena fija; el dibujo de tinta se traza de
   izquierda a derecha al entrar, el color lo va pintando como una acuarela (canvas) y al final el dibujo se
   desvanece. El dibujo es blanco con tinta y va en "multiply": el blanco no tapa la foto. */
.pintada { position: relative; background: var(--papel) var(--grano); padding-block: clamp(56px, 8vw, 104px); }
.pintada__escena { display: grid; gap: clamp(20px, 3vw, 32px); align-content: center; }
.pintada__cabecera { display: grid; gap: 14px; }
.pintada__lamina { margin: 0 auto; width: min(100% - var(--gutter) * 2, 1100px); display: grid; gap: 12px; }
.pintada__marco { position: relative; aspect-ratio: 1719 / 1080; overflow: hidden; background: var(--blanco); box-shadow: 0 0 0 1px var(--linea), 0 22px 44px -30px rgba(34, 37, 26, .55); }
.pintada__marco img, .pintada__marco canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pintada__color, .pintada__dibujo { display: none; }
.pintada__pie { font-size: .9375rem; color: var(--tinta-2); }
.pintada.animado { height: calc(var(--vh) * 280); padding-block: 0; }
.pintada.animado .pintada__escena { position: sticky; top: var(--alto-enc); height: calc(var(--vh) * 100 - var(--alto-enc)); padding-block: 20px; overflow: hidden; }
.pintada.animado .pintada__lamina { width: min(100% - var(--gutter) * 2, 1100px, (var(--vh) * 100 - var(--alto-enc) - 250px) * 1.59); }
.pintada.animado .pintada__foto { opacity: 0; }
.pintada.animado .pintada__color, .pintada.animado .pintada__dibujo { display: block; }
.pintada.animado .pintada__dibujo { mix-blend-mode: multiply; opacity: var(--tinta, 1); clip-path: inset(0 calc((1 - var(--trazo, 0)) * 100%) 0 0); }
.pintada.animado .pintada__pie { opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .6s var(--curva); }
.pintada.animado.terminada .pintada__pie { opacity: 1; transform: none; }