/* Alejandro Carrere · landing de campaña
   Una sola familia (Figtree, variable) y dos colores: rojo Radical y un azul tinta.
   Referencia: el sistema de la campaña 2016 de Hillary Clinton (Pentagram):
   un signo simple, titulares pesados y apretados, mucho blanco. */

@font-face{
  font-family:'Figtree'; font-style:normal;
  font-weight:300 900;  /* variable: un archivo, todos los pesos */
  font-display:swap;
  src:url('../fonts/figtree-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* Color — relaciones medidas con contrast.py */
  --ink:        #13233F;  /* texto y la C del signo · 15.7:1 sobre blanco */
  --muted:      #56607A;  /* texto secundario · 6.3:1 sobre blanco, 5.8:1 sobre --surface */
  --brand:      #D50F25;  /* rojo Radical · 5.35:1 sobre blanco y con blanco encima */
  --brand-dark: #B00D20;  /* hover · 7.2:1 con blanco */
  --brand-tint: rgba(213,15,37,.08);
  --surface:    #F4F5F8;  /* alternancia de secciones */
  --white:      #FFFFFF;
  --hairline:   #E2E5EC;  /* decorativo: separadores. Nunca texto ni bordes de campo */
  --border-ui:  #8790A6;  /* ≥ 3:1 sobre blanco — bordes de formulario */

  --space-2xs:8px; --space-xs:16px; --space-sm:24px; --space-md:40px;
  --space-lg:64px; --space-xl:96px; --space-2xl:128px;

  --r-pill:100px; --r-card:6px;  /* esquinas casi rectas: el signo es de barras */
  --header-h:76px;
  --ancho:1200px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:180ms; --dur:280ms; --dur-slow:700ms;

  --shadow-card:0 24px 50px -30px rgba(19,35,63,.35);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}

.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:16px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-card);text-decoration:none;font-weight:600}
.saltar:focus{top:16px}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}

.contenedor{width:min(100% - 2*var(--space-sm), var(--ancho));margin-inline:auto}
.seccion{padding-block:clamp(var(--space-lg),9vw,var(--space-2xl))}

/* ---------- Tipografía ---------- */
.volanta{
  font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);margin-bottom:var(--space-xs);
  display:flex;align-items:center;gap:10px;
}
/* la barrita roja repite el trazo de la flecha del signo */
.volanta::before{content:"";width:22px;height:4px;background:currentColor;flex:none}
.volanta--clara{color:#fff}
.titulo-2{
  font-size:clamp(2rem,3.6vw,3rem);font-weight:800;line-height:1.04;letter-spacing:-.025em;
}

/* ---------- Signo y marca ---------- */
.signo{width:40px;height:40px;flex:none}
/* Los paths viven dentro de <use>: los selectores no entran a esa copia,
   pero las variables sí se heredan. Por eso el color se cambia con --signo-c / --signo-flecha. */
.signo__c{fill:var(--signo-c,var(--ink))}
.signo__flecha{fill:var(--signo-flecha,var(--brand))}
.marca{display:inline-flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.marca__texto{display:flex;flex-direction:column;line-height:1}
.marca__nombre{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.marca__apellido{font-size:24px;font-weight:900;letter-spacing:-.02em;text-transform:uppercase;margin-top:3px}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:14px 28px;border-radius:var(--r-pill);
  font:inherit;font-size:16px;font-weight:700;text-decoration:none;cursor:pointer;
  border:2px solid transparent;
  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--primario{background:var(--brand);color:#fff}
.btn--primario:hover{background:var(--brand-dark)}
.btn--borde{border-color:var(--ink);color:var(--ink);background:transparent}
.btn--borde:hover{background:var(--ink);color:#fff}
.btn--blanco{background:#fff;color:var(--brand)}
.btn--blanco:hover{background:var(--ink);color:#fff}

/* ---------- Header ---------- */
.header{
  position:fixed;inset:0 0 auto;z-index:50;height:var(--header-h);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease),transform var(--dur-slow) var(--ease-out);
}
/* El vidrio va en un pseudo-elemento y no en el header: un backdrop-filter en el header lo
   vuelve el bloque contenedor de sus hijos fixed, y el menú mobile quedaba encerrado en 66px. */
.header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  transition:background-color var(--dur) var(--ease);
}
.header.is-oculto{transform:translateY(-100%)}
.header.is-scrolled{border-bottom-color:var(--hairline)}
.header__inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm);width:min(100% - 2*var(--space-sm), var(--ancho));margin-inline:auto}
.nav{display:flex;align-items:center;gap:var(--space-md)}
.nav__lista{display:flex;gap:var(--space-sm)}
.nav__lista a{
  display:inline-flex;align-items:center;min-height:44px;
  font-weight:600;font-size:16px;text-decoration:none;position:relative;
}
.nav__lista a::after{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:3px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur) var(--ease-out);
}
.nav__lista a:hover::after{transform:scaleX(1)}
.nav__cta{min-height:44px;padding:10px 22px}
.menu-btn{display:none}

/* ---------- Hero ---------- */
.hero{padding-top:calc(var(--header-h) + clamp(var(--space-md),6vw,var(--space-xl)));padding-bottom:clamp(var(--space-lg),7vw,var(--space-xl));overflow:hidden}
.hero__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(var(--space-md),5vw,var(--space-xl));align-items:center}
.hero__titulo{
  font-size:clamp(3rem,6.6vw,5.75rem);font-weight:900;line-height:.94;letter-spacing:-.035em;
  margin-bottom:var(--space-sm);
}
.hero__bajada{font-size:clamp(1.06rem,1.4vw,1.25rem);color:var(--muted);max-width:34em}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--space-md)}
.hero__marco{position:relative;isolation:isolate}
/* bloque rojo desplazado detrás de la foto: el mismo gesto de barra que el signo */
.hero__marco::before{content:"";position:absolute;inset:auto -18px -18px auto;width:62%;height:58%;background:var(--brand);z-index:-1}

/* ---------- Lugares para fotos ---------- */
.foto-pendiente{
  position:relative;display:flex;align-items:flex-end;
  background:
    repeating-linear-gradient(135deg,transparent 0 14px,rgba(19,35,63,.045) 14px 15px),
    var(--surface);
  color:var(--muted);overflow:hidden;
}
.foto-pendiente--retrato{aspect-ratio:4/5}
.foto-pendiente--cuadrada{aspect-ratio:1}
.foto-pendiente__signo{position:absolute;width:46%;height:auto;aspect-ratio:1;top:50%;left:50%;transform:translate(-50%,-62%);opacity:.12}
.foto-pendiente__signo{--signo-flecha:var(--ink)}
.foto-pendiente__nota{position:relative;padding:var(--space-sm);font-size:14px;line-height:1.45}

/* ---------- Fotos ---------- */
.foto{display:block;width:100%;height:auto;object-fit:cover;background:var(--surface)}
.foto--retrato{aspect-ratio:4/5}
.foto--utn{aspect-ratio:3/4}
.foto__credito{margin-top:10px;font-size:13px;color:var(--muted)}
.quien__foto{max-width:420px}

/* ---------- Quién es ---------- */
.quien{background:var(--surface)}
.quien .foto-pendiente{background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(19,35,63,.05) 14px 15px),#E9ECF2}
.quien__grilla{display:grid;grid-template-columns:.8fr 1fr;gap:clamp(var(--space-md),6vw,var(--space-xl));align-items:center}
.quien__texto .titulo-2{margin-bottom:var(--space-sm)}
.quien__texto p+p{margin-top:var(--space-xs)}
.quien__texto>p{color:var(--muted);max-width:36em}
.cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--hairline)}
.cifra{display:flex;flex-direction:column;gap:6px}
.cifra__valor{font-variant-numeric:tabular-nums;font-size:clamp(2.2rem,3.4vw,2.9rem);font-weight:900;line-height:1;letter-spacing:-.03em;color:var(--brand)}
.cifra__texto{font-size:15px;line-height:1.35;color:var(--muted)}

/* ---------- Propuestas ---------- */
.encabezado{max-width:760px;margin-bottom:clamp(var(--space-md),5vw,var(--space-lg))}
.encabezado .titulo-2{margin-bottom:var(--space-xs)}
.encabezado__bajada{color:var(--muted);font-size:clamp(1.02rem,1.3vw,1.15rem)}
.ejes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm);counter-reset:eje}
.eje{
  position:relative;padding:calc(var(--space-md) + 6px) var(--space-sm) var(--space-md);
  background:var(--white);
  box-shadow:inset 0 0 0 1px var(--hairline);
}
/* la línea de arriba de la tarjeta: se dibuja al aparecer y se pone roja al pasar el mouse */
.eje::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;z-index:2;background:var(--ink);transform-origin:left;
  transition:transform 900ms var(--ease-out),background-color var(--dur) var(--ease)}
.eje:hover::before{background:var(--brand)}
.eje__foto{display:block;margin:calc(-1*var(--space-md)) calc(-1*var(--space-sm)) var(--space-sm);overflow:hidden;background:var(--surface)}
.eje__foto img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform 900ms var(--ease-out)}
@media (hover:hover){.eje:hover .eje__foto img{transform:scale(1.04)}}
.eje__num{display:block;font-size:15px;font-weight:800;letter-spacing:.08em;color:var(--brand);margin-bottom:var(--space-sm)}
.eje__titulo{font-size:clamp(1.3rem,1.8vw,1.55rem);font-weight:800;line-height:1.15;letter-spacing:-.015em;margin-bottom:12px}
.eje__texto{color:var(--muted)}

/* ---------- Franja ---------- */
.franja{background:var(--ink);color:#fff;padding-block:clamp(var(--space-lg),8vw,var(--space-xl))}
.franja__inner{display:grid;grid-template-columns:auto 1fr;gap:clamp(var(--space-sm),5vw,var(--space-lg));align-items:center}
.franja__signo{width:clamp(88px,11vw,150px);height:auto;aspect-ratio:1}
.franja__signo{--signo-c:#fff}
.franja__titulo{font-size:clamp(1.9rem,3.8vw,3.2rem);font-weight:900;line-height:1.02;letter-spacing:-.03em;margin-bottom:var(--space-xs)}
.franja__texto{color:rgba(255,255,255,.8);font-size:clamp(1rem,1.3vw,1.15rem);max-width:40em}

/* ---------- Prensa ---------- */
.notas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-sm)}
.nota{
  height:100%;display:flex;flex-direction:column;gap:var(--space-xs);
  padding:var(--space-sm);text-decoration:none;
  background:var(--surface);border-left:4px solid var(--brand);
  transition:background-color var(--dur) var(--ease),transform var(--dur) var(--ease-out);
}
.nota:hover{background:#ECEEF3;transform:translateY(-3px)}
.nota__medio{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.nota__titulo{font-size:19px;font-weight:700;line-height:1.3;flex:1}
.nota__leer{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--brand)}
.nota__leer svg{width:18px;height:18px;fill:currentColor;transition:transform var(--dur) var(--ease-out)}
.nota:hover .nota__leer svg{transform:translateX(4px)}

/* ---------- Sumate ---------- */
.sumate{background:var(--brand);color:#fff}
.sumate__grilla{display:grid;grid-template-columns:1fr 1fr;gap:clamp(var(--space-md),6vw,var(--space-xl));align-items:start}
.sumate__texto .titulo-2{margin-bottom:var(--space-sm)}
.sumate__texto p{font-size:clamp(1.02rem,1.3vw,1.15rem);max-width:30em}
.form{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xs)}
.campo{display:flex;flex-direction:column;gap:6px}
.campo:nth-child(3),.campo:nth-child(4){grid-column:1/-1}
.campo label{font-size:14px;font-weight:700}
.campo input,.campo select{
  min-height:52px;padding:12px 16px;border-radius:var(--r-card);
  font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:2px solid #fff;   /* el borde visible es el del campo blanco contra el rojo: 5.35:1 */
}
.campo select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2313233F' d='M7 9l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 12px center/22px;padding-right:44px}
.campo input:focus-visible,.campo select:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.form .btn{grid-column:1/-1;justify-self:start;margin-top:8px}
.form__estado{grid-column:1/-1;font-weight:600;min-height:1.5em}

/* ---------- Pie ---------- */
.pie{background:var(--ink);color:#fff;padding-block:var(--space-lg) var(--space-md)}
.pie__inner{display:grid;grid-template-columns:1fr auto;gap:var(--space-md) var(--space-sm);align-items:center}
.marca--pie{--signo-c:#fff}
.marca--pie .marca__nombre{color:rgba(255,255,255,.75)}
.redes{display:flex;gap:var(--space-sm)}
.redes a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:none;border-bottom:2px solid transparent}
.redes a:hover{border-bottom-color:var(--brand)}
.pie__legal{grid-column:1/-1;padding-top:var(--space-sm);border-top:1px solid rgba(255,255,255,.18);font-size:14px;color:rgba(255,255,255,.72)}

/* ---------- Aparición al scrollear ---------- */
.js .aparece{opacity:0;transform:translateY(22px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.js .aparece.visible{opacity:1;transform:none}


/* ---------- Transiciones ---------- */
/* Entrada del hero: arranca cuando el telón rojo de la apertura empieza a irse
   (1850ms*--t en apertura.css), y sin apertura arranca enseguida. */
:root{--hero-d:calc(1700ms*var(--t,1))}
.sin-precarga{--hero-d:0ms}
.espera .hero *{animation-play-state:paused!important}
.js .hero__volanta{animation:entra 700ms var(--ease-out) var(--hero-d) both}
.js .hero__titulo{animation:entra-titulo 900ms var(--ease-out) calc(var(--hero-d) + 80ms) both}
.js .hero__bajada{animation:entra 800ms var(--ease-out) calc(var(--hero-d) + 220ms) both}
.js .hero__cta{animation:entra 800ms var(--ease-out) calc(var(--hero-d) + 340ms) both}
/* la foto se descubre de izquierda a derecha, en la dirección de la flecha */
.js .hero .revela::after{content:"";position:absolute;inset:0;z-index:1;background:var(--brand);transform-origin:right;
  animation:velo-sale 1050ms cubic-bezier(.77,0,.18,1) calc(var(--hero-d) + 100ms) both}
.js .hero .revela img{animation:acerca 1700ms var(--ease-out) calc(var(--hero-d) + 100ms) both}
.js .hero__marco::before{transform-origin:left;animation:crece-x 800ms var(--ease-out) calc(var(--hero-d) + 800ms) both}
.js .hero__foto .foto__credito{animation:entra 600ms var(--ease-out) calc(var(--hero-d) + 900ms) both}
@keyframes entra{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes entra-titulo{from{opacity:0;transform:translateY(40px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 -10% 0)}}
@keyframes velo-sale{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes acerca{from{transform:scale(1.15)}to{transform:none}}
@keyframes crece-x{from{transform:scaleX(0)}to{transform:none}}

/* Aparición al scrollear: escalonada dentro de cada grilla (el JS pone --i) */
.js .aparece{transition-delay:calc(var(--i,0)*90ms)}
.js .aparece .volanta::before,.js .encabezado.aparece .volanta::before{transform:scaleX(0);transform-origin:left;transition:transform 700ms var(--ease-out) 250ms}
.js .aparece.visible .volanta::before{transform:none}
.revela{display:block;position:relative;overflow:hidden}
/* Fotos: un velo rojo se corre hacia la derecha (como la flecha) mientras la foto se asienta.
   Las clases las pone el JS: sin JS las fotos se ven directo. --d escalona las de las tarjetas. */
.por-revelar::after{content:"";position:absolute;inset:0;z-index:1;background:var(--brand);transform-origin:right;
  transition:transform 1050ms cubic-bezier(.77,0,.18,1) var(--d,0ms)}
.por-revelar img{transform:scale(1.15);transition:transform 1700ms var(--ease-out) var(--d,0ms)}
.por-revelar.revelada::after{transform:scaleX(0)}
.por-revelar.revelada img{transform:none}
/* la línea de cada tarjeta se dibuja de izquierda a derecha, escalonada */
.js .eje.aparece::before{transform:scaleX(0)}
.js .eje.aparece.visible::before{transform:none;transition-delay:calc(var(--i,0)*120ms + 100ms)}
.js .franja__inner.aparece .franja__signo{opacity:0;transform:translateX(-48px);transition:opacity 600ms var(--ease) 150ms,transform 900ms var(--ease-out) 150ms}
.js .franja__inner.visible .franja__signo{opacity:1;transform:none}

/* Detalles al pasar el mouse */
.eje__icono path:last-child{transform-box:fill-box;transition:transform 450ms var(--ease-out)}
.barrio .signo{transition:transform 450ms var(--ease-out)}
@media (hover:hover){
  .eje:hover .eje__icono path:last-child{transform:translateX(7px)}
  .barrio:hover .signo{transform:translateX(6px)}
}

/* Menú mobile: la capa baja como una persiana y los ítems entran escalonados */
@media (max-width:860px){
  .menu-abierto .header::before{background:#fff}
  .menu-abierto body{overflow:hidden}
  .nav{clip-path:inset(0 0 100% 0);transform:none;
    transition:clip-path 450ms cubic-bezier(.65,0,.35,1),opacity 1ms linear 450ms,visibility 0s linear 450ms}
  .menu-abierto .nav{clip-path:inset(0 0 0 0);transition:clip-path 450ms cubic-bezier(.65,0,.35,1),opacity 0s,visibility 0s}
  .nav__lista li,.nav .nav__cta{opacity:0;transform:translateY(16px);transition:opacity 250ms var(--ease),transform 250ms var(--ease)}
  .menu-abierto .nav__lista li,.menu-abierto .nav .nav__cta{opacity:1;transform:none;
    transition:opacity 400ms var(--ease) calc(160ms + var(--i)*60ms),transform 600ms var(--ease-out) calc(160ms + var(--i)*60ms),background-color var(--dur-fast) var(--ease)}
}

/* ---------- Mobile y tablet vertical (≤ 860px) ---------- */
@media (max-width:860px){
  :root{--header-h:66px}
  body{font-size:16px}
  .contenedor,.header__inner{width:calc(100% - 2*var(--space-xs))}
  .signo{width:34px;height:34px}
  .marca__apellido{font-size:21px}
  .marca__nombre{font-size:11px}

  .menu-btn{
    display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-right:-8px;
    background:none;border:0;cursor:pointer;color:var(--ink);
  }
  .menu-btn__barras,.menu-btn__barras::before,.menu-btn__barras::after{display:block;width:24px;height:3px;background:currentColor;transition:transform var(--dur) var(--ease),opacity var(--dur-fast)}
  .menu-btn__barras{position:relative}
  .menu-btn__barras::before,.menu-btn__barras::after{content:"";position:absolute;left:0}
  .menu-btn__barras::before{top:-8px}
  .menu-btn__barras::after{top:8px}
  .menu-abierto .menu-btn__barras{background:transparent}
  .menu-abierto .menu-btn__barras::before{transform:translateY(8px) rotate(45deg)}
  .menu-abierto .menu-btn__barras::after{transform:translateY(-8px) rotate(-45deg)}

  .nav{
    position:fixed;inset:var(--header-h) 0 0;z-index:49;background:#fff;
    flex-direction:column;align-items:stretch;justify-content:space-between;gap:var(--space-md);
    padding:var(--space-md) var(--space-xs) calc(var(--space-md) + env(safe-area-inset-bottom));
    overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-8px);
    transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility 0s linear var(--dur);
  }
  .menu-abierto .nav{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .nav__lista{flex-direction:column;gap:0}
  .nav__lista a{width:100%;min-height:60px;font-size:20px;font-weight:700;border-bottom:1px solid var(--hairline)}
  .nav__lista a::after{display:none}
  .nav__cta{width:100%;min-height:54px;font-size:17px}

  .hero{padding-top:calc(var(--header-h) + var(--space-md));padding-bottom:var(--space-lg)}
  .hero__inner{grid-template-columns:1fr;gap:var(--space-md)}
  .hero__titulo{font-size:clamp(2.75rem,12.5vw,3.6rem)}
  /* la volanta en una línea: se achica el tracking antes que el cuerpo */
  .hero__volanta{letter-spacing:.08em;font-size:12px}
  .hero__cta .btn{flex:1 1 100%}
  /* la foto va entera, vertical como en escritorio (lo pidió Tomás) */
  .hero__foto{margin-right:18px}

  .quien__grilla{grid-template-columns:1fr;gap:var(--space-md)}
  .foto--utn{aspect-ratio:4/3}
  .quien__foto{max-width:none}
  .cifras{gap:var(--space-xs)}
  .cifra__texto{font-size:13.5px}

  .ejes{grid-template-columns:1fr;gap:var(--space-xs)}
  .eje{display:grid;grid-template-columns:auto 1fr;column-gap:14px;padding:calc(var(--space-sm) + 6px) var(--space-xs) var(--space-sm)}
  .eje__num{grid-row:1;margin:0;padding-top:3px}
  .eje__titulo{grid-column:2;margin-bottom:6px}
  .eje__texto{grid-column:1/-1}

  .franja__inner{grid-template-columns:1fr;gap:var(--space-sm)}
  .franja__signo{width:72px}

  .notas{grid-template-columns:1fr;gap:var(--space-xs)}

  .sumate__grilla{grid-template-columns:1fr;gap:var(--space-md)}
  .form{grid-template-columns:1fr}
  .campo{grid-column:1/-1}
  .form .btn{justify-self:stretch}

  .pie__inner{grid-template-columns:1fr}
}

/* tablet horizontal: tres columnas quedan angostas */
@media (min-width:861px) and (max-width:1080px){
  .notas{grid-template-columns:1fr 1fr}
}

@media (hover:none){
  .nota:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .js .aparece{opacity:1;transform:none}
  .hero *,.hero *::before{animation:none!important}
  *,*::before,*::after{transition-delay:0s!important}
  .js .aparece .franja__signo,.por-revelar img{opacity:1!important;transform:none!important}
  .por-revelar::after,.hero .revela::after{display:none!important}
  .js .eje.aparece::before{transform:none!important}
}

/* ---------- Ícono de cada eje: el signo con relleno temático ---------- */
.eje__icono{width:64px;height:64px;margin-bottom:var(--space-sm)}
.ejes .eje__num{margin-bottom:8px}

/* ---------- Barrios: placas con el signo y el nombre ---------- */
.barrios{background:var(--surface)}
.barrios__grilla{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xs)}
.barrio{
  --signo-c:#fff;
  display:flex;align-items:center;gap:14px;min-height:150px;padding:var(--space-sm);
  background:var(--ink);color:#fff;
  font-size:clamp(1.3rem,2vw,1.7rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;
}
.barrio .signo{width:52px;height:52px}
/* en la placa roja la flecha pasa a tinta: rojo sobre rojo desaparece */
/* rojo en damero: con 3 columnas son la 2, 4 y 6; con 2 columnas, la 2, 3 y 6 */
.barrio:nth-child(even){background:var(--brand);--signo-flecha:var(--ink)}

@media (max-width:860px){
  .eje__foto{grid-column:1/-1;grid-row:1;margin:calc(-1*var(--space-sm)) calc(-1*var(--space-xs)) var(--space-sm)}
  .eje__icono{width:48px;height:48px;margin:0;grid-column:1;grid-row:2 / span 2;align-self:start}
  .eje{grid-template-columns:48px 1fr}
  .ejes .eje__num{grid-column:2;grid-row:2;padding:0;margin-bottom:2px}
  .eje__titulo{grid-row:3}
  .eje__texto{margin-top:12px}

  .barrios__grilla{grid-template-columns:1fr 1fr;gap:10px}
  .barrio{min-height:96px;padding:var(--space-xs);flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;font-size:1.15rem}
  .barrio .signo{width:36px;height:36px}
  .barrio:nth-child(n){background:var(--ink);--signo-flecha:var(--brand)}
  .barrio:nth-child(4n+2),.barrio:nth-child(4n+3){background:var(--brand);--signo-flecha:var(--ink)}
}