/* Inka Terra Asociación · home · There's more to discover (#descubre) · versión limpia (Rodrigo, 11 oct)
   Cuatro iniciativas (GreenLab, Casa de las Vainillas, Canopy, Paquete Maravilla), cada una con etiqueta, nombre,
   párrafo, botón y un recorte PNG sin fondo (sin frase verde desde el 11 oct: repetía el párrafo). Tres disposiciones:
   · Ordenador (≥ 700 px): a la izquierda el titular y, debajo, la lista con su hilo y sus puntos; en el centro el
     recorte de la iniciativa elegida (protagonista) y a la derecha su texto y botón, hasta el margen de la página;
     cambia con fundido. Cada bloque de texto va centrado en vertical
     frente a la figura (12 oct: el botón ya no se fija a una altura). Pase automático: del punto elegido baja una raya que se
     llena hasta el siguiente (js/descubre.js).
   · Tableta (700–960 px, o vertical desde 700): la lista sube al lado del titular y la iniciativa ocupa todo el ancho
     debajo, con el texto en sangría.
   · Móvil (< 700 px): carrusel horizontal (una tarjeta a la vez), debajo los nombres cortos con su raya de avance y un
     único botón que cambia su texto. Entre 431 y 699 px los textos usan todo el ancho y la figura tiene más aire.
   Radios 16; sin naranja ni rombos. Las transiciones se anulan con movimiento reducido. */

/* ── base (ordenador) ───────────────────────────────────────────────────────────────────────────────────────── */
.descubre{position:relative;overflow:clip;background:var(--marfil);padding:clamp(72px,7vw,104px) 0}
.descubre .marco-d{position:relative;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto 1fr;column-gap:clamp(40px,5vw,80px);align-items:center}
.descubre .lado-d{grid-column:1;grid-row:1;align-self:end}
.descubre .fijo-d{display:contents}

/* encabezado */
.descubre .rotulo{display:inline-flex;align-items:center;gap:16px;margin:0 0 20px;font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--musgo);white-space:nowrap}
.descubre .rotulo i{display:block;width:40px;height:1px;background:currentColor;opacity:.6}
.descubre h2{margin:0 0 16px;max-width:none;font-family:var(--ui);font-weight:600;font-size:clamp(36px,3.7vw,54px);line-height:1;letter-spacing:-.035em;color:var(--tinta)}
.descubre h2 em{font-style:normal;color:var(--musgo)}
.descubre .intro-d{margin:0 0 clamp(32px,3.4vw,44px);max-width:34ch;font-family:var(--texto);font-size:clamp(15.5px,1.15vw,17px);line-height:1.6;color:var(--tinta-suave)}

/* la lista con su hilo y sus puntos */
.descubre .temas{grid-column:1;grid-row:2;align-self:start;position:relative;list-style:none;margin:clamp(8px,1vw,16px) 0 0;padding:0 0 0 26px}
.descubre .temas::before{content:"";position:absolute;left:4px;top:14px;bottom:14px;width:1px;background:var(--linea)}
.descubre .tema{position:relative;display:block;width:100%;padding:12px 0;border:0;background:none;text-align:left;cursor:pointer;font-family:var(--ui);font-weight:500;font-size:16.5px;color:var(--gris);transition:color .3s var(--curva)}
.descubre .tema::before{content:"";position:absolute;z-index:1;left:-26px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--marfil);box-shadow:inset 0 0 0 1.5px var(--salvia);transition:background .3s,box-shadow .3s}
.descubre .tema[aria-selected="true"]{color:var(--tinta);font-weight:600}
.descubre .tema[aria-selected="true"]::before{background:var(--bosque);box-shadow:inset 0 0 0 1.5px var(--bosque)}
.descubre .tema:focus-visible{outline:2px solid var(--musgo);outline-offset:4px;border-radius:4px}
@media (hover:hover) and (pointer:fine){.descubre .tema:hover{color:var(--tinta)}}
/* raya de avance: del punto elegido al siguiente (--tramo lo mide el JS); las recorridas quedan llenas */
.descubre .tema::after{content:"";position:absolute;left:-22.5px;top:50%;width:2px;height:var(--tramo,0px);border-radius:2px;background:var(--bosque);transform:scaleY(0);transform-origin:top;pointer-events:none;transition:transform .5s var(--curva)}
.descubre .tema.hecho::after{transform:scaleY(1)}
.descubre.auto .tema[aria-selected="true"]::after{animation:pasoV var(--paso,6.5s) linear both}

/* la iniciativa elegida: las cuatro apiladas en la misma celda, la elegida a la vista */
.descubre .vista-d{grid-column:2;grid-row:1 / 3;position:relative;display:grid;min-height:clamp(420px,34vw,500px);transition:opacity .38s ease}
.descubre .vista-d.funde{opacity:0}
.descubre .panel-d{grid-area:1 / 1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:clamp(20px,2.4vw,40px);align-items:stretch;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s .45s}
.descubre .panel-d.on{opacity:1;visibility:visible;transition:opacity .6s ease .15s,visibility 0s}
.descubre .panel-d .tx{display:flex;flex-direction:column;align-self:center;padding:0}   /* centrado en vertical frente a la figura (12 oct) */
.descubre .et{margin:0 0 14px;font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--musgo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.descubre h3{margin:0 0 12px;font-family:var(--ui);font-weight:600;font-size:clamp(34px,3.4vw,50px);line-height:1;letter-spacing:-.035em;color:var(--tinta);text-wrap:balance}
.descubre .par{margin:0 0 24px;max-width:38ch;font-family:var(--texto);font-size:16px;line-height:1.6;color:var(--tinta-suave);text-wrap:pretty}
.descubre .ir-d{display:inline-flex;align-items:center;align-self:flex-start;gap:12px;height:52px;padding:0 24px 0 26px;border-radius:16px;background:var(--bosque);color:#FBF8F1;font-family:var(--ui);font-weight:500;font-size:15.5px;letter-spacing:-.005em;text-decoration:none}
.descubre .ir-d svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.descubre .ir-d:focus-visible{outline:2px solid var(--musgo);outline-offset:3px}
.descubre .recorte{order:-1;position:relative;margin:0;height:100%;min-height:420px;transition:opacity .6s ease .1s,scale .8s var(--curva) .1s}
.descubre .recorte img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center center;filter:drop-shadow(0 24px 30px rgba(36,52,20,.18))}
/* fundido escalonado al cambiar: sale el anterior, entra el nuevo con un leve desplazamiento (el botón no se mueve) */
.descubre .panel-d .tx > *{transition:translate .7s var(--curva) .15s,opacity .6s ease .15s}
.descubre .panel-d.on .tx > :nth-child(2){transition-delay:.2s}
.descubre .panel-d.on .tx > :nth-child(3){transition-delay:.25s}
.descubre .panel-d.on .tx > :nth-child(4){transition-delay:.3s}
.descubre .panel-d:not(.on) .tx > *{translate:0 12px;opacity:0;transition:translate .45s var(--curva),opacity .35s ease}
.descubre .panel-d .tx .ir-d{transition-delay:0s!important;translate:none!important;opacity:1!important}
.descubre .panel-d:not(.on) .recorte{opacity:0;scale:.97;transition:opacity .35s ease,scale .45s var(--curva)}

/* ordenador: la figura, un poco más pequeña, a la misma distancia del bloque de la izquierda y del texto de la derecha
   (el hueco entre figura y texto es el mismo que entre columnas) */
@media (min-width:961px) and (orientation:landscape){
  .descubre .panel-d{column-gap:clamp(40px,5vw,80px)}
  .descubre .recorte img{inset:0 6%;width:88%;translate:var(--corre,0px) 0}
  /* el bloque mide lo que la columna izquierda (rótulo → último nombre de la lista): el aire de abajo queda igual que el de
     arriba y la figura se ajusta a ese alto */
  .descubre .vista-d{min-height:0;align-self:stretch}
  .descubre .recorte{min-height:0}   /* --corre: js/descubre.js la centra entre los textos */
}

/* solo en móvil */
.descubre .pasos-d,.descubre .ir-m{display:none}

/* ── tableta ───────────────────────────────────────────────────────────────────────────────────────────────── */
@media (min-width:700px) and (max-width:960px),(min-width:700px) and (orientation:portrait){
  .descubre .marco-d{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:48px;row-gap:clamp(36px,5vw,56px);align-items:end}
  .descubre .intro-d{margin-bottom:0}
  .descubre .temas{grid-column:2;grid-row:1;align-self:end;margin:0;min-width:210px}
  .descubre .tema{padding:9px 0;font-size:16px}
  .descubre .vista-d{grid-column:1 / -1;grid-row:2;min-height:0}
  .descubre .panel-d{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
  .descubre .recorte{order:0}
  .descubre .panel-d .tx{padding-left:clamp(40px,6vw,64px)}
  .descubre .recorte{min-height:340px}
}

/* ── móvil ─────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:699px){
  .descubre{padding:56px 0 48px}
  .descubre .marco-d{display:block}
  .descubre .lado-d{margin-bottom:24px;min-width:0}
  .descubre .intro-d{margin-bottom:0;max-width:52ch}
  .descubre .fijo-d{display:block}
  .descubre .temas{display:none}
  /* carrusel: una tarjeta a la vez, centrada; la siguiente queda fuera (el hueco es el doble del margen lateral) */
  .descubre .vista-d{display:flex;gap:calc(2 * var(--gm,32px));min-height:0;margin:0 calc(-1 * var(--gm,32px));padding:0 var(--gm,32px) 4px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 var(--gm,32px);overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .descubre .vista-d::-webkit-scrollbar{display:none}
  .descubre .panel-d,.descubre .panel-d:not(.on){flex:0 0 100%;scroll-snap-align:center;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;row-gap:0;align-content:stretch;align-items:center;opacity:1;visibility:visible;transition:none}
  .descubre .panel-d:not(.on) .tx > *,.descubre .panel-d:not(.on) .recorte{opacity:1;translate:none;scale:1}
  /* la figura arriba; el alto que sobra en las tarjetas con menos texto lo absorbe su zona (la figura se centra en ella) */
  .descubre .recorte{order:-1;height:auto;min-height:270px;margin-bottom:18px}   /* (11 oct) más aire arriba y abajo */
  .descubre .recorte img{inset:auto 0;top:50%;height:230px;translate:0 -50%;filter:none}
  .descubre .panel-d .tx{align-self:start;height:auto}
  .descubre .et{margin-bottom:8px;overflow:visible;font-size:10.5px;letter-spacing:.15em}
  .descubre h3{margin-bottom:8px;font-size:28px}
  .descubre .par{margin-bottom:0;font-size:15px}
  .descubre .panel-d .tx .ir-d{display:none}
  /* los nombres cortos con su raya: tocar uno lleva a su tarjeta; la activa se llena en el tiempo del pase */
  .descubre .pasos-d{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;margin-top:24px}
  .descubre .pasos-d button{position:relative;display:block;height:26px;padding:0;border:0;border-radius:0;background:none;box-shadow:inset 0 -2px 0 var(--linea);text-align:left;cursor:pointer;font-family:var(--ui);font-weight:600;font-size:10.5px;line-height:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris);white-space:nowrap;transition:color .4s ease}
  .descubre .pasos-d button span{display:block}
  .descubre .pasos-d button::before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
  .descubre .pasos-d button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--bosque);transform:scaleX(0);transform-origin:left}
  .descubre .pasos-d button.on{color:var(--bosque)}
  .descubre .pasos-d button.on::after{transform:scaleX(1)}
  .descubre.auto .pasos-d button.on::after{animation:pasoD var(--paso,6.5s) linear both}
  .descubre .pasos-d button:focus-visible{outline:2px solid var(--musgo);outline-offset:6px}
  /* un solo botón: cambia su texto con un fundido corto */
  .descubre .ir-m{display:flex;justify-content:center;width:100%;height:52px;margin-top:18px;padding:0 18px;overflow:hidden;font-size:15px;white-space:nowrap}
  .descubre .ir-m span{white-space:nowrap;transition:opacity .32s ease,translate .45s var(--curva)}
  .descubre .ir-m.sale span{opacity:0;translate:0 5px;transition:opacity .18s ease,translate .18s ease}
}
@media (min-width:621px) and (max-width:699px){.descubre{--gm:max(40px,(100vw - var(--w)) / 2)}}   /* el margen de la tableta */
@media (min-width:431px) and (max-width:699px){
  .descubre .intro-d,.descubre .par{max-width:none}
  .descubre .recorte{min-height:280px}
}
@media (max-width:380px){.descubre .pasos-d button{letter-spacing:.08em}}

@keyframes pasoV{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes pasoD{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .descubre *{transition:none!important}
  .descubre .tema::after{display:none}
}
/* (Rodrigo, 12 oct) el recorte del Canopy, un poco más grande que los demás (provisional, hasta la foto real) */
@media (min-width:961px) and (orientation:landscape){.descubre #d-pan-canopy .recorte img{scale:1.25}}   /* escena apaisada, como GreenLab */
@media (min-width:961px) and (orientation:landscape){.descubre #d-pan-greenlab .recorte img{scale:1.25}}   /* la escena del laboratorio es apaisada: un poco más grande para igualar el peso de las demás */