/* ════════════════════════════════════════════════════════════════════════
   Puyella — el chasis de las landings de emprendimientos (/gen-rio, /livera).

   Va DESPUÉS de los tokens y del reset, y su JS al final del body, después
   de sitio.js:
     <link rel="stylesheet" href="/sitio/tarjetas.css">
     <link rel="stylesheet" href="/sitio/sitio.css">
     <link rel="stylesheet" href="/sitio/emprendimiento.css">
     …
     <script src="/sitio/sitio.js"></script>
     <script src="/sitio/emprendimiento.js"></script>

   Cada landing pone su color pisando las --e-* en su propio :root (en un
   <style> que venga DESPUÉS de este archivo) y su tipografía de títulos: el
   chasis no elige fuentes, hereda Open Sans.

   Piezas: .be (botones) · .he (hero) · [data-revela] · [data-cuenta] ·
   a[data-lb] (visor) · [data-pestanas] · .barra-e (consulta en el teléfono).
   El menú (.nav), el pie (.cierre) y el .wrap son copia exacta de
   plantilla-paseo-sur.html, para que las tres páginas se vean iguales arriba
   y abajo: si cambian allá, se cambian acá.

   🚨 Vive en /sitio/ y NO en /assets/: vercel.json cachea /assets/ un año
   como inmutable, y un cambio acá no le llegaría a nadie.

   Movimiento — regla del cliente: tranquilo, no ansioso. Pocas animaciones y
   cada una con un motivo. Solo se animan transform, opacity, clip-path y
   filter; nunca transition:all ni ease-in, y todo :hover va dentro de
   (hover:hover) and (pointer:fine): en un teléfono no se pasa por encima de
   nada.
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --cab-h:72px;
  --barra-e-alto:68px;
  /* Color: la landing los pisa. Por defecto, los de Puyella. */
  --e-acento:var(--rojo);
  --e-acento-hover:var(--rojo-hover);
  --e-sobre-acento:#fff;            /* el texto que va encima del acento */
  --e-oscuro:#1b1d22;               /* fondo de las secciones oscuras (el de /paseo-sur) */
  --e-claro:var(--papel);           /* fondo de las secciones claras */
  --e-tinta:var(--tinta);
  --e-tinta-2:var(--tinta-2);
  --e-linea:var(--linea);
  --e-foco:var(--rojo);
  /* Curvas: salida para lo que entra, ida y vuelta para lo que se mueve
     dentro de la pantalla, cajón para lo que sube desde el borde. */
  --e-ease-out:cubic-bezier(.23,1,.32,1);
  --e-ease-in-out:cubic-bezier(.77,0,.175,1);
  --e-ease-cajon:cubic-bezier(.32,.72,0,1);
  /* Sombras en capas: el contacto, la media y la difusa. Una sola capa se
     ve como un recorte pegado; tres se ven como un objeto apoyado. */
  --e-sombra:0 1px 1px rgba(20,20,20,.05),0 6px 14px -6px rgba(20,20,20,.12),0 24px 48px -20px rgba(20,20,20,.28);
  --e-sombra-alta:0 1px 2px rgba(20,20,20,.06),0 12px 26px -10px rgba(20,20,20,.2),0 40px 80px -24px rgba(20,20,20,.42);
}

/* ── La página: igual que /paseo-sur ───────────────────────────────────── */
body{padding-top:var(--cab-h);background:var(--blanco)}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:24px}
@media (max-width:640px){ .wrap{padding-inline:18px} }
:focus-visible{outline-color:var(--e-foco)}

/* ── Menú: el mismo de la portada y del mapa ───────────────────────────── */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--cab-h);display:flex;align-items:center;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  box-shadow:0 1px 0 rgba(16,17,20,.10),0 1px 3px rgba(16,17,20,.05)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;padding-block:9px;flex:none}
.brand img{height:26px;width:auto}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:11px 13px;border-radius:8px;font-size:14.5px;font-weight:600;color:#5d6066;
  transition:color 180ms var(--curva),background-color 180ms var(--curva)}
.nav-links a[aria-current]{color:#16171a;box-shadow:inset 0 -2px 0 var(--rojo);border-radius:0}
@media (hover:hover) and (pointer:fine){ .nav-links a:hover{color:#16171a;background:#f6f6f7} }
@media (max-width:860px){ .nav-links{gap:0} .nav-links a{padding:11px 9px;font-size:13.5px} }
@media (max-width:500px){ .nav .wrap{padding-inline:14px;gap:10px} .brand img{height:20px} .nav-links a{padding:11px 5px;font-size:12px} }
@media (max-width:389px){ .nav .wrap{gap:8px} .brand img{height:17px} .nav-links a{padding:11px 4px;font-size:11.5px} }
@media (max-width:359px){ .brand img{width:22px;height:24px;object-fit:cover;object-position:left center} }

/* ── Pie: el de las fichas, sin la columna de la propiedad ─────────────── */
.cierre{position:relative;margin-top:0;background:#34373b;color:#fff;border-radius:0;
  padding-block:46px 34px;overflow:hidden}
.cierre::before{content:"";position:absolute;inset:auto -10% -60% 30%;height:120%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(205,24,31,.26),transparent 70%);filter:blur(70px)}
.cierre .wrap{position:relative;display:flex;flex-wrap:wrap;gap:26px 34px;justify-content:space-between;align-items:flex-start}
.cierre-col{display:flex;flex-direction:column;gap:8px;min-width:210px}
.cierre .micro{font-size:11px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.cierre a,.cierre p{font-size:14.5px;color:#d7d8da}
.cierre .dato-linea{display:flex;align-items:center;gap:9px}
.cierre .dato-linea svg{width:16px;height:16px;color:rgba(255,255,255,.5);flex:none}
.cierre .redes{display:flex;gap:10px;margin-top:6px}
.cierre .redes a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background 200ms var(--curva)}
.cierre .redes svg{width:19px;height:19px}
.cierre .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:11px 19px;
  font-size:14.5px;font-weight:700;white-space:nowrap;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:background 200ms var(--curva)}
.cierre-base{position:relative;margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.44)}
.cierre :focus-visible{outline-color:#fff}
@media (hover:hover) and (pointer:fine){ .cierre .redes a:hover,.cierre .btn:hover{background:rgba(255,255,255,.12)} }

/* ── Botones ───────────────────────────────────────────────────────────────
   El apretón (scale .97) es la respuesta al dedo: rápido, 120 ms. El hover
   es otra cosa —fondo y sombra— y va más lento, 200 ms. */
.be{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:15px 26px;border:0;border-radius:999px;
  background:transparent;font-size:15px;font-weight:700;line-height:1.6;text-align:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform 120ms var(--e-ease-out),background-color 200ms ease,box-shadow 200ms ease}
.be svg{width:18px;height:18px;flex:none}
.be:active{transform:scale(.97)}
.be:focus-visible{outline:2px solid var(--e-foco);outline-offset:3px;border-radius:999px}
.be-lleno{background:var(--e-acento);color:var(--e-sobre-acento)}
.be-linea{color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32)}
.be-linea-osc{color:var(--e-tinta);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--e-tinta) 26%,transparent)}
@media (hover:hover) and (pointer:fine){
  .be-lleno:hover{background:var(--e-acento-hover);box-shadow:var(--e-sombra)}
  .be-linea:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)}
  .be-linea-osc:hover{background:color-mix(in srgb,var(--e-tinta) 6%,transparent);
    box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--e-tinta) 45%,transparent)}
}
/* Una fila de botones. No se llama .acciones: esa clase ya es de tarjetas.css
   (los botones de la tarjeta, con position:absolute) y los mandaba arriba. */
.be-fila{display:flex;flex-wrap:wrap;gap:12px}

/* ── Hero ──────────────────────────────────────────────────────────────────
   Todo CSS: se ve sin JavaScript y sin destello, porque el estado de partida
   lo pone la misma animación (fill both) desde el primer cuadro. */
.he{position:relative;isolation:isolate;display:flex;align-items:flex-end;overflow:hidden;
  min-height:var(--he-alto,calc(100svh - var(--cab-h)));color:#fff;background:var(--e-oscuro)}
.he-foto{position:absolute;inset:0;z-index:-2}
.he-foto img{width:100%;height:100%;object-fit:cover;object-position:var(--he-pos,center);
  animation:e-asienta 4s var(--e-ease-out) both}
/* El velo oscurece abajo y a la izquierda, donde va el texto, con el oscuro
   de la página: sobre una foto cálida, un negro puro se ve sucio. */
.he::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--he-velo,
    linear-gradient(to top,color-mix(in srgb,var(--e-oscuro) 86%,transparent),color-mix(in srgb,var(--e-oscuro) 30%,transparent) 46%,transparent 74%),
    linear-gradient(to right,color-mix(in srgb,var(--e-oscuro) 42%,transparent),transparent 64%))}
.he .wrap{padding-block:clamp(28px,6vh,64px)}
.he-titulo{font-size:clamp(2.5rem,6.4vw,5.5rem);font-weight:700;line-height:1;letter-spacing:-.03em;text-wrap:balance}
/* inline-block: un span en línea no se puede desplazar. */
.pal{display:inline-block;animation:e-palabra 800ms var(--e-ease-out) both;animation-delay:calc(150ms + var(--i,0) * 70ms)}
.he-sigue{animation:e-funde 600ms var(--e-ease-out) 700ms both}
@keyframes e-asienta{from{transform:scale(1.06)}}
@keyframes e-palabra{from{opacity:0;transform:translateY(.4em);filter:blur(6px)}}
@keyframes e-funde{from{opacity:0}}

/* ── Revelado al llegar ────────────────────────────────────────────────────
   El estado oculto va SOLO con html.e-js, que pone emprendimiento.js al arrancar:
   sin JavaScript, o si el script no llega a cargar, se ve todo. Y solo
   en pantalla: al imprimir, lo que nadie bajó a mirar no sale en blanco.
   Es una animación y no una transición para no pisar las transiciones
   propias del elemento (un hover de la landing), y usa translate/scale y no
   transform para sumarse al transform que el elemento ya tenga. Con fill
   backwards, al terminar el elemento vuelve a sus estilos: en la foto, el
   clip-path desaparece y no le sigue recortando la sombra ni el foco. */
@media screen and (scripting:enabled){
  .e-js [data-revela=""]:not([data-visto]),
  .e-js [data-revela="grupo"]:not([data-visto]) > *{opacity:0;translate:0 14px}
  [data-revela=""][data-visto],
  [data-revela="grupo"][data-visto] > *{animation:e-revela 700ms var(--e-ease-out) backwards}
  [data-revela="grupo"][data-visto] > *{animation-delay:calc(var(--i,0) * 60ms)}
  .e-js [data-revela="foto"]:not([data-visto]){clip-path:inset(0 0 12% 0)}
  .e-js [data-revela="foto"]:not([data-visto]) img{scale:1.04}
  [data-revela="foto"][data-visto]{animation:e-recorta 900ms var(--e-ease-out) backwards}
  [data-revela="foto"][data-visto] img{animation:e-acerca 900ms var(--e-ease-out) backwards}
}
/* La foto espera agrandada (1,04): sin recorte, una que llega al borde de la
   pantalla se salía 20 px y aparecía la barra horizontal hasta revelarse.
   clip y no hidden: no crea otro contenedor de desplazamiento. */
[data-revela="foto"]{overflow:hidden;overflow:clip}
@keyframes e-revela{from{opacity:0;translate:0 14px}}
@keyframes e-recorta{from{clip-path:inset(0 0 12% 0)}to{clip-path:inset(0)}}
@keyframes e-acerca{from{scale:1.04}}

/* ── Cifras que se cuentan ─────────────────────────────────────────────────
   Dígitos de ancho fijo: mientras cuenta, el número no baila. */
[data-cuenta]{font-variant-numeric:tabular-nums}

/* ── Visor de fotos ────────────────────────────────────────────────────────
   Lo arma emprendimiento.js una sola vez, con <dialog> nativo: el foco queda
   adentro, Esc cierra y la página de atrás no se toca. Sin JavaScript cada
   enlace abre su foto sola. Se abre desde el centro, porque es un modal: no
   nace de ningún botón. El cierre es más rápido que la apertura.
   Mientras está abierto la página no se desplaza. Con la barra de
   desplazamiento clásica de Windows, sacarla corría la página 7,5 px: el
   hueco queda reservado (scrollbar-gutter) y pintado del oscuro del visor,
   porque un fixed no lo cubre y se veía una franja blanca. */
html:has(.lb[open]){overflow:hidden;scrollbar-gutter:stable;background:var(--e-oscuro)}
.lb{position:fixed;inset:0;z-index:1000;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  overflow:hidden;color:#fff;background:var(--e-oscuro);
  opacity:0;transition:opacity 160ms var(--e-ease-out),display 160ms allow-discrete,overlay 160ms allow-discrete}
.lb[open]{opacity:1;transition-duration:200ms}
@starting-style{ .lb[open]{opacity:0} }
.lb::backdrop{background:transparent}
.lb-fig{position:absolute;inset:0;margin:0;opacity:0;transform:scale(.96);
  transition:opacity 160ms var(--e-ease-out),transform 160ms var(--e-ease-out)}
.lb[open] .lb-fig{opacity:1;transform:none;transition-duration:240ms}
@starting-style{ .lb[open] .lb-fig{opacity:0;transform:scale(.96)} }
/* pan-y pinch-zoom: lo horizontal es del deslizamiento; el zoom con dos
   dedos sigue siendo del navegador. */
.lb-escena{position:absolute;inset:calc(68px + env(safe-area-inset-top)) 88px calc(76px + env(safe-area-inset-bottom));touch-action:pan-y pinch-zoom}
.lb-img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:4px;
  user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.lb-img[aria-hidden="true"]{visibility:hidden}
.lb-img.lb-claro{padding:clamp(14px,3vw,40px);border-radius:14px;background:#fff}
.lb-pie{position:absolute;left:24px;right:24px;bottom:env(safe-area-inset-bottom);min-height:76px;display:flex;align-items:center;justify-content:center;
  padding-block:10px;text-align:center;font-size:14px;line-height:1.45;color:rgba(255,255,255,.82);text-wrap:balance}
.lb-cont{position:absolute;top:calc(22px + env(safe-area-inset-top));left:24px;font-size:13px;font-weight:600;letter-spacing:.08em;
  color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
.lb button{position:absolute;display:grid;place-items:center;padding:0;border:0;border-radius:50%;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.1);-webkit-tap-highlight-color:transparent;
  transition:transform 120ms var(--e-ease-out),background-color 200ms ease}
.lb button:active{transform:scale(.97)}
.lb button svg{width:20px;height:20px}
.lb :focus-visible{outline-color:#fff}
.lb-cerrar{top:calc(12px + env(safe-area-inset-top));right:12px;width:44px;height:44px}
.lb-ant,.lb-sig{top:50%;width:48px;height:48px;margin-top:-24px}
.lb-ant{left:20px}
.lb-sig{right:20px}
@media (hover:hover) and (pointer:fine){ .lb button:hover{background:rgba(255,255,255,.2)} }
/* En un teléfono se pasa con el dedo: las flechas sobran y la foto va de borde a borde. */
@media (pointer:coarse) and (max-width:699px){ .lb .lb-ant,.lb .lb-sig{display:none} .lb-escena{left:0;right:0} .lb-img{border-radius:0} }

/* ── Pestañas ──────────────────────────────────────────────────────────────
   La lista viene con hidden en el HTML y la muestra el JS: sin JavaScript
   se ven todos los paneles, uno debajo del otro, cada uno con su .pe-rotulo
   (que se va cuando las pestañas funcionan). */
[data-pestanas] [role=tablist]{display:flex;gap:4px;margin-bottom:clamp(20px,3vw,32px);overflow-x:auto;scrollbar-width:none;
  box-shadow:inset 0 -1px 0 var(--e-linea)}
[data-pestanas] [role=tablist]::-webkit-scrollbar{display:none}
[data-pestanas] [role=tab]{position:relative;flex:none;padding:14px 18px;border:0;background:none;cursor:pointer;white-space:nowrap;
  font-size:15px;font-weight:600;color:var(--e-tinta-2);-webkit-tap-highlight-color:transparent;transition:color 200ms ease}
[data-pestanas] [role=tab][aria-selected="true"]{color:var(--e-tinta)}
[data-pestanas] [role=tab][aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;
  border-radius:2px;background:var(--e-acento)}
/* La lista recorta lo que desborda: el anillo va por dentro para que se vea. */
[data-pestanas] [role=tab]:focus-visible{outline-offset:-3px}
[data-pestanas][data-listo] .pe-rotulo{display:none}
@media (hover:hover) and (pointer:fine){ [data-pestanas] [role=tab]:hover{color:var(--e-tinta)} }

/* ── Barra de consulta en el teléfono ──────────────────────────────────────
   Reemplaza al botón redondo de WhatsApp hasta 960 px. Sube cuando el hero
   ya pasó (html.pasa-hero, la pone emprendimiento.js) y baja mientras se ve
   otro botón de WhatsApp grande (html.sin-flotantes, la pone sitio.js).
   visibility la saca del tabulador mientras está abajo. */
.barra-e{display:none}
@media (max-width:960px){
  .barra-e{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:14px;
    min-height:calc(var(--barra-e-alto) + env(safe-area-inset-bottom));padding:0 16px env(safe-area-inset-bottom);
    background:color-mix(in srgb,var(--e-claro) 92%,transparent);
    -webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
    box-shadow:0 -1px 0 var(--e-linea),0 -10px 30px -18px rgba(20,20,20,.35);
    transform:translateY(110%);visibility:hidden;
    transition:transform 280ms var(--e-ease-cajon),visibility 0s linear 280ms}
  .pasa-hero .barra-e{transform:none;visibility:visible;transition:transform 280ms var(--e-ease-cajon),visibility 0s}
  .pasa-hero.sin-flotantes .barra-e{transform:translateY(110%);visibility:hidden;
    transition:transform 280ms var(--e-ease-cajon),visibility 0s linear 280ms}
  html:has(.barra-e) .wa{display:none}
  html:has(.barra-e) .cierre{padding-bottom:calc(34px + var(--barra-e-alto) + env(safe-area-inset-bottom))}
}
.barra-e-texto{min-width:0;line-height:1.3}
.barra-e-texto b,.barra-e-texto span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra-e-texto b{font-size:14.5px;color:var(--e-tinta)}
.barra-e-texto span{font-size:12.5px;color:var(--e-tinta-2)}
.barra-e .be{flex:none;padding:12px 20px;font-size:14.5px}

/* ── Movimiento reducido: menos y más suave, no cero ───────────────────────
   sitio.css apaga toda animación con !important; acá vuelven, también con
   !important, los fundidos de opacidad cortos (≤ 200 ms). Sin escalas, sin
   desplazamientos, sin blur y sin recortes. Lo que arma el JS (visor,
   pestañas, cifras) lo resuelve emprendimiento.js. */
@media (prefers-reduced-motion:reduce){
  .be:active,.lb button:active{transform:none}
  .he-foto img{animation:none}
  .pal{animation:e-funde 200ms var(--e-ease-out) both !important}
  .he-sigue{animation:e-funde 200ms var(--e-ease-out) 200ms both !important}
  .lb{transition-duration:160ms !important}
  .lb[open]{transition-duration:200ms !important}
  .lb-fig,.lb[open] .lb-fig{opacity:1;transform:none}
  @starting-style{ .lb[open] .lb-fig{opacity:1;transform:none} }
}
@media screen and (scripting:enabled) and (prefers-reduced-motion:reduce){
  .e-js [data-revela=""]:not([data-visto]),
  .e-js [data-revela="grupo"]:not([data-visto]) > *{translate:none}
  .e-js [data-revela="foto"]:not([data-visto]){clip-path:none;opacity:0}
  .e-js [data-revela="foto"]:not([data-visto]) img{scale:none}
  [data-revela=""][data-visto],
  [data-revela="grupo"][data-visto] > *,
  [data-revela="foto"][data-visto]{animation:e-funde 200ms var(--e-ease-out) backwards !important}
  [data-revela="foto"][data-visto] img{animation:none}
}
@media (max-width:960px) and (prefers-reduced-motion:reduce){
  .barra-e{transform:none;opacity:0;transition:opacity 200ms ease,visibility 0s linear 200ms !important}
  .pasa-hero .barra-e{transform:none;opacity:1;transition:opacity 200ms ease,visibility 0s !important}
  .pasa-hero.sin-flotantes .barra-e{transform:none;opacity:0;transition:opacity 200ms ease,visibility 0s linear 200ms !important}
}