/* ============================================================
   KIWANIS CLUB OF CORAL SPRINGS
   Design system. Oswald + Figtree. 12-column grid, 8px rhythm.
   Tracking runs inverse to size. Gold is fill, never type.
   ============================================================ */
:root{
  color-scheme:light;
  --depth-color:rgba(0,27,56,.9);
  --navy:#003874; --navy-deep:#00254A; --navy-ink:#001B38;
  --gold:#B49759; --gold-hi:#C9AC6C; --sky:#99CAEA;
  --gray:#A9A8A9; --canvas:#F6F4EF; --paper:#FFFFFF;
  --ink:#10233C; --ink-soft:#4A5A70; --line:#D8D4CC;

  --head:'Oswald',system-ui,sans-serif;      /* voz institucional */
  --hand:'Rock Salt',cursive;                /* voz humana, el acento */
  --body:'Figtree',system-ui,sans-serif;     /* utilidad de parrafo */

  /* ---- METRICAS MEDIDAS sobre las fuentes reales, no estimadas ----
     Oswald 500:  mayuscula .81 em · x .59 · descendente de caja .29 · apertura izq .06
     Rock Salt:   mayuscula 1.04    · x .78 · descendente de caja .77 · apertura izq .04
     Figtree 400: mayuscula .70     · x .50 · descendente de caja .25 · apertura izq .09

     De ahi salen tres razones que antes estaban a ojo:
     1. Rock Salt minuscula contra Oswald mayuscula: .81/.78 = 1.04 para igualar altura.
        Se usa .92, que deja la mano al 89% de la mayuscula: acento, no grito.
     2. Oswald contra Figtree a igual altura de x: .59/.50 -> el rotulo Oswald va al
        .85 del cuerpo Figtree para que pesen lo mismo.
     3. La apertura izquierda de Oswald es .06 em: un titular grande se ve metido
        respecto al texto de abajo. Se saca con margin-left negativo. */
  --osw-cap:.81; --osw-xh:.59; --rs-xh:.78; --fig-xh:.50;
  --osw-cap-center:.40;     /* centro de la banda de mayuscula sobre la base */
  /* PROPORCIONES POR JUGADA. Una sola proporcion para todo deja la pagina
     plana. Cada jugada tiene la suya, y todas salen de la misma medicion:
     mayuscula Oswald .81 / altura de x Rock Salt .78 = 1.038 para IGUALAR. */
  --hand-match:1.04em;   /* a la par: misma altura que la mayuscula */
  --hand-lead:1.34em;    /* manda: la palabra a mano domina la linea */
  --hand-over:2.15em;    /* superpuesta: cruza la linea entera por encima */
  --hand-note:.55em;     /* nota al margen */
  --hand-size:var(--hand-match);
  /* Alineacion optica. El titular se mete .06 em y el parrafo .09 em de 17 px.
     Para que las dos TINTAS caigan a plomo: 0,09 x 17 - 0,06 x tamaño.
     No es un valor fijo en em, porque uno escala y el otro no. */
  --optical-flush:calc(1.53px - .06em);
  --label-ratio:.85;        /* rotulo Oswald contra cuerpo Figtree */

  --u:8px; --r:4px; --cols:12;
  --gutter:clamp(12px,1.6vw,24px);
  --margin:clamp(20px,5vw,80px);
  --maxw:1320px;

  --tr-xxl:-.022em; --tr-xl:-.015em; --tr-l:-.008em;
  --tr-m:0; --tr-s:.06em; --tr-xs:.16em;

  /* Interlineado. La mayuscula de Oswald ocupa .81 em de tinta y no tiene
     descendente, asi que .88 es solido de verdad y no recorta nada.
     El cuerpo se fija en px para que cada bloque caiga en el ritmo de 4. */
  --lh-solid:.88; --lh-tight:.94; --lh-sub:1.2;
  --lh-body:28px; --lh-long:32px;

  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:var(--lh-body);overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1}
img{max-width:100%;height:auto;display:block}
p{margin:0}
a{color:inherit}
::selection{background:var(--navy);color:#fff}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.grid{max-width:var(--maxw);margin:0 auto;padding:0 var(--margin);
  display:grid;grid-template-columns:repeat(var(--cols),1fr);column-gap:var(--gutter)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--margin)}
@media(max-width:820px){:root{--cols:6}}

/* ---------------- type ---------------- */
/* Escala modular de 1,25 en texto y 1,414 en display, no valores sueltos.
   h1 y h2 llevan alineacion optica: se sacan .05 em para que el borde de la
   letra caiga a plomo con el parrafo de abajo, no el origen de la caja. */
h1,h2,h3,h4{font-family:var(--head);font-weight:500;text-transform:uppercase;margin:0}
h1{font-size:clamp(44px,7vw,92px);line-height:var(--lh-solid);
   letter-spacing:var(--tr-xxl);margin-left:var(--optical-flush)}
h2{font-size:clamp(32px,5vw,65px);line-height:var(--lh-solid);
   letter-spacing:var(--tr-xl);margin-left:var(--optical-flush)}
h3{font-size:clamp(22px,2.6vw,33px);line-height:32px;letter-spacing:var(--tr-l)}
h4{font-size:19px;line-height:24px;letter-spacing:var(--tr-m)}
.lede{font-size:21px;line-height:32px;color:var(--ink-soft);max-width:54ch}
@media(min-width:900px){.lede{font-size:22px;line-height:34px}}
/* rotulo Oswald calibrado contra el cuerpo Figtree: 17 x .85 = 14,5 */
.kick,.nav,.tag,.off .role,.crumb{font-size:14.5px}
.tnum{font-variant-numeric:tabular-nums}
.kick{font-family:var(--head);font-weight:500;text-transform:uppercase;
  letter-spacing:var(--tr-xs);color:var(--navy)}
.pad{padding:calc(var(--u)*13) 0}
.pad-s{padding:calc(var(--u)*7) 0}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;flex-direction:column;background:var(--gold);color:var(--navy-ink);
  text-decoration:none;padding:calc(var(--u)*1.75) calc(var(--u)*3);font-family:var(--head);
  text-transform:uppercase;font-weight:600;letter-spacing:var(--tr-s);font-size:16px;
  line-height:1.1;transition:background .2s var(--ease),transform .2s var(--ease)}
.btn small{font-family:var(--body);text-transform:none;letter-spacing:0;font-weight:500;
  font-size:13px;opacity:.82;margin-top:5px;line-height:1.35}
.btn:hover{background:var(--gold-hi);transform:translateY(-2px)}
.btn-line{display:inline-block;border:1.5px solid currentColor;padding:13px 24px;
  text-decoration:none;font-family:var(--head);text-transform:uppercase;font-weight:500;
  letter-spacing:var(--tr-s);font-size:14.5px;transition:.2s var(--ease)}
.btn-line:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.on-dark .btn-line:hover{background:#fff;color:var(--navy);border-color:#fff}
.go{font-family:var(--head);text-transform:uppercase;font-size:13.5px;
  letter-spacing:var(--tr-s);color:var(--navy);text-decoration:none;font-weight:600;
  display:inline-block;padding-bottom:4px;background-image:linear-gradient(var(--gold),var(--gold));
  background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .3s var(--ease)}
.go:hover{background-size:100% 100%;color:var(--navy-ink)}
.on-dark .go{color:var(--sky)}

/* ---------------- nav ---------------- */
.bar{position:sticky;top:0;z-index:70;background:var(--navy);color:#fff}
.bar-in{max-width:var(--maxw);margin:0 auto;padding:calc(var(--u)*1.25) var(--margin);
  display:flex;align-items:center;gap:calc(var(--u)*3)}
/* logo oficial del club, tomado del sitio actual. la bajada "Club of Coral
   Springs" ocupa el 18% del alto de la tinta: por debajo de 40 px de alto
   deja de leerse, y por eso ese es el piso en movil. */
.lock{display:block;line-height:0;text-decoration:none;flex:0 0 auto}
.lock img{height:46px;width:auto;max-width:none}
.lock-lg{margin-bottom:24px}
.lock-lg img{height:58px}
@media(max-width:560px){.lock img{height:40px}.lock-lg img{height:50px}}
.nav{display:flex;gap:calc(var(--u)*3);margin-left:auto;font-family:var(--head);
  text-transform:uppercase;font-size:13px;letter-spacing:var(--tr-s);font-weight:400}
.nav a{color:var(--sky);text-decoration:none;padding:6px 0;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--gold);transition:right .28s var(--ease)}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.nav a:hover,.nav a[aria-current]{color:#fff}
.bar .btn{padding:11px 18px;font-size:13px}
.burger{display:none;margin-left:auto;background:none;border:0;color:#fff;cursor:pointer;
  font-family:var(--head);text-transform:uppercase;letter-spacing:var(--tr-xs);font-size:12px}
@media(max-width:980px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy-deep);
    flex-direction:column;gap:0;padding:var(--margin);font-size:20px;
    max-height:calc(100svh - 100%);overflow:auto}
  body.menu .nav{display:flex}
  body.menu .nav a{padding:14px 0;border-bottom:1px solid rgba(153,202,234,.2)}
  .burger{display:block}
  .bar .btn{display:none}
}

/* ---------------- poster / hero ---------------- */
.hero{position:relative;background:var(--navy-ink);overflow:hidden;
  min-height:100svh;display:flex;align-items:center;
  padding:calc(var(--u)*12) 0 calc(var(--u)*8)}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 40%;
  transform:scale(1.06);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.14) translate3d(-1.5%,-1%,0)}}
@media(prefers-reduced-motion:reduce){.hero-bg{animation:none;transform:none}}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(0,27,56,.9) 0%,rgba(0,27,56,.58) 34%,rgba(0,27,56,.3) 56%,rgba(0,27,56,.94) 100%)}
.hero .grid{position:relative;width:100%}
.poster{grid-column:1/span 7;color:#fff}
@media(max-width:1100px){.poster{grid-column:1/span 9}}
@media(max-width:820px){.poster{grid-column:1/-1}}
.poster .ln{display:block;font-family:var(--head);font-weight:500;text-transform:uppercase;
  line-height:var(--lh-solid);letter-spacing:var(--tr-xxl);white-space:nowrap;color:#fff;
  opacity:0;transform:translateY(24px)}
.poster .ln .t{display:inline-block}
.poster .ln em{font-style:normal;color:var(--sky)}
.poster.in .ln{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease)}
.poster.in .ln:nth-child(2){transition-delay:.1s}
.poster.in .ln:nth-child(3){transition-delay:.2s}
.poster.in .ln:nth-child(4){transition-delay:.3s}
.hero-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--gutter);
  align-items:flex-end;justify-content:space-between;margin-top:calc(var(--u)*5)}
.hero-foot p{color:#E6F0F9;max-width:40ch;font-size:16.5px;line-height:var(--lh-body);
  text-shadow:0 1px 14px rgba(0,20,45,.5)}

/* ---------------- meeting strip ---------------- */
.meet{background:var(--navy);color:#fff}
.meet .grid{align-items:center;row-gap:calc(var(--u)*3);padding-top:calc(var(--u)*5);
  padding-bottom:calc(var(--u)*5)}
.meet-when{grid-column:1/span 5}
.meet-when b{display:block;font-family:var(--head);font-weight:500;text-transform:uppercase;
  font-size:clamp(26px,3.6vw,46px);letter-spacing:var(--tr-l);line-height:1.02}
.meet-when i{font-style:normal;display:block;font-family:var(--head);font-weight:400;
  text-transform:uppercase;font-size:13px;letter-spacing:var(--tr-xs);color:var(--sky);
  margin-top:calc(var(--u)*1.5)}
.meet-where{grid-column:6/span 4;color:var(--sky);font-size:15.5px;line-height:var(--lh-long)}
.meet-where a{color:var(--sky)}
.meet-go{grid-column:10/span 3;justify-self:end}
@media(max-width:820px){.meet-when,.meet-where,.meet-go{grid-column:1/-1;justify-self:start}}

/* ---------------- section headings, varied alignment ---------------- */
.h-left{grid-column:1/span 7}
.h-right{grid-column:5/span 8;text-align:right;justify-self:end}
.h-center{grid-column:3/span 8;text-align:center}
.h-left h2,.h-right h2,.h-center h2{color:var(--navy)}
.h-left .lede{margin-top:calc(var(--u)*2.5)}
.h-right .lede{margin-top:calc(var(--u)*2.5);margin-left:auto}
.h-center .lede{margin:calc(var(--u)*2.5) auto 0}
@media(max-width:820px){.h-left,.h-right,.h-center{grid-column:1/-1;text-align:left}
  .h-right .lede,.h-center .lede{margin-left:0}}

/* ---------------- programs, editorial overlap ---------------- */
.progs{margin-top:calc(var(--u)*7);row-gap:calc(var(--u)*8)}
.prog{grid-column:span 6;display:grid;grid-template-columns:repeat(6,1fr);
  column-gap:var(--gutter)}
.prog figure{grid-column:1/span 6;margin:0;overflow:hidden}
.prog img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .8s var(--ease)}
.prog:hover img{transform:scale(1.04)}
.prog .txt{grid-column:1/span 5;background:var(--canvas);margin-top:calc(var(--u)*-5);
  padding:calc(var(--u)*3) calc(var(--u)*3) 0 0;position:relative;z-index:2}
.prog:nth-child(even) .txt{grid-column:2/span 5;padding:calc(var(--u)*3) 0 0 calc(var(--u)*3)}
.prog h3{color:var(--navy);margin-bottom:calc(var(--u)*1.5)}
.prog p{color:var(--ink-soft);font-size:16px;margin-bottom:calc(var(--u)*2)}
@media(max-width:820px){.prog{grid-column:1/-1;grid-template-columns:1fr}
  .prog figure,.prog .txt,.prog:nth-child(even) .txt{grid-column:1/-1}
  .prog .txt,.prog:nth-child(even) .txt{padding:calc(var(--u)*3) 0 0}}

/* ---------------- three asks, staircase ---------------- */
.asks{margin-top:calc(var(--u)*7);row-gap:var(--gutter)}
.ask{grid-column:span 4;background:var(--paper);padding:calc(var(--u)*4);
  display:flex;flex-direction:column;transition:transform .35s var(--ease)}
.ask:nth-child(2){margin-top:calc(var(--u)*5)}
.ask:nth-child(3){margin-top:calc(var(--u)*10)}
.ask:hover{transform:translateY(-6px)}
.ask .n{font-family:var(--head);font-weight:200;font-size:clamp(40px,4.6vw,68px);
  line-height:.8;color:var(--navy);letter-spacing:var(--tr-xl);
  font-variant-numeric:tabular-nums}
.ask h3{color:var(--navy);margin:calc(var(--u)*2.5) 0 calc(var(--u)*1.5)}
.ask p{color:var(--ink-soft);font-size:16px;flex:1;margin-bottom:calc(var(--u)*2.5)}
.ask.lead{background:var(--navy);color:#fff}
.ask.lead .n,.ask.lead h3{color:#fff}
.ask.lead p{color:var(--sky)}
.ask.lead .go{color:var(--sky)}
@media(max-width:820px){.ask{grid-column:1/-1}
  .ask:nth-child(2),.ask:nth-child(3){margin-top:0}}

/* ---------------- band, superposition ---------------- */
.band{background:var(--paper);padding:calc(var(--u)*12) 0 calc(var(--u)*13)}
.band .pic{grid-column:1/-1}
.band .pic img{width:100%;aspect-ratio:21/9;object-fit:cover}
.band .over{grid-column:2/span 9;margin-top:calc(var(--u)*-9);position:relative;z-index:3}
/* Un titular con placa necesita mas interlineado que uno sin ella: la placa
   añade relleno arriba y abajo de la tinta, y con interlineado solido invade
   la linea de abajo. Medido: tinta .81 em mas .04 y .06 de relleno = .91,
   asi que 1.08 deja aire y sigue leyendose como bloque. */
.band .over h2{color:var(--navy);line-height:1.08;letter-spacing:var(--tr-xxl);
  font-size:clamp(36px,6.6vw,96px);font-weight:600}
/* inline-block para que el relleno de la placa CUENTE en el alto de la linea.
   Como inline, el fondo pinta fuera de la caja y se come la linea de abajo:
   medido, 43 px de invasion. */
.band .over .inv{background:var(--navy);color:#fff;padding:.04em .14em .06em;
  display:inline-block;line-height:.88}
/* El grosor del contorno escala con el tamaño: fijo en px se ve anemico a 96
   y gordo a 36. .022 em mantiene la misma relacion de peso en toda la escala. */
.band .over .out{color:transparent;-webkit-text-stroke:.022em var(--navy);
  paint-order:stroke fill}
.band .step{grid-column:2/span 4;margin-top:calc(var(--u)*5)}
.band .step2{grid-column:7/span 4;margin-top:calc(var(--u)*11)}
.band .step p{color:var(--ink-soft);line-height:var(--lh-long)}
.band .step h4{color:var(--navy);margin-bottom:calc(var(--u)*1.5)}
@media(max-width:820px){.band .over,.band .step,.band .step2{grid-column:1/-1}
  .band .step2{margin-top:calc(var(--u)*4)}
  .band .over{margin-top:calc(var(--u)*-4)}}

/* ---------------- numbers ---------------- */
.nums{background:var(--navy);color:#fff}
.nums .grid{padding-top:calc(var(--u)*9);padding-bottom:calc(var(--u)*9);
  row-gap:calc(var(--u)*5)}
.nums .cell{grid-column:span 3;border-top:1px solid rgba(153,202,234,.34);
  padding-top:calc(var(--u)*2.5)}
.nums b{display:block;font-family:var(--head);font-weight:200;
  font-size:clamp(46px,6vw,92px);line-height:.86;
  letter-spacing:var(--tr-xl);font-variant-numeric:tabular-nums}
.nums .void{color:var(--sky);opacity:.5}
.nums span{display:block;font-family:var(--head);font-weight:400;text-transform:uppercase;
  font-size:12.5px;letter-spacing:var(--tr-xs);color:var(--sky);margin-top:calc(var(--u)*2)}
.nums .note{grid-column:1/-1;color:var(--sky);font-size:14.5px;max-width:52ch;
  margin-top:calc(var(--u)*2)}
@media(max-width:820px){.nums .cell{grid-column:span 3}}

/* ---------------- feature story ---------------- */
.feat{background:var(--canvas)}
.feat .grid{align-items:center;row-gap:calc(var(--u)*4)}
.feat figure{grid-column:1/span 6;margin:0}
.feat img{width:100%;aspect-ratio:4/3;object-fit:cover}
.feat .txt{grid-column:8/span 5}
.feat blockquote{margin:0;font-family:var(--head);font-weight:300;text-transform:none;
  font-size:clamp(24px,3.2vw,40px);line-height:1.18;letter-spacing:var(--tr-l);
  color:var(--navy)}
.feat cite{display:block;font-style:normal;font-size:14px;color:var(--ink-soft);
  margin-top:calc(var(--u)*3);line-height:var(--lh-long)}
@media(max-width:820px){.feat figure,.feat .txt{grid-column:1/-1}}

/* ---------------- needs list ---------------- */
.needs{margin-top:calc(var(--u)*6);grid-column:1/-1;border-top:1px solid var(--line)}
.need{display:grid;grid-template-columns:1fr auto auto;gap:clamp(14px,3vw,40px);
  align-items:center;padding:calc(var(--u)*3) 0;border-bottom:1px solid var(--line)}
.need b{display:block;font-family:var(--head);font-weight:400;text-transform:uppercase;
  font-size:clamp(19px,2.4vw,28px);letter-spacing:var(--tr-l);color:var(--navy)}
.need span{display:block;font-size:14.5px;color:var(--ink-soft);margin-top:4px}
.tag{font-family:var(--head);font-size:11.5px;letter-spacing:var(--tr-xs);
  text-transform:uppercase;padding:6px 11px;white-space:nowrap;font-weight:600}
.tag.open{background:var(--navy);color:#fff}
.tag.done{background:var(--ink-soft);color:#fff}
@media(max-width:700px){.need{grid-template-columns:1fr auto}}

/* ---------------- page header for sub pages ---------------- */
.ph{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.ph .grid{padding-top:calc(var(--u)*13);padding-bottom:calc(var(--u)*9);position:relative}
.ph-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.3}
.ph h1{grid-column:1/span 8;color:#fff}
.ph .lede{grid-column:1/span 6;color:var(--sky);margin-top:calc(var(--u)*3)}
.ph .crumb{grid-column:1/-1;font-family:var(--head);text-transform:uppercase;font-size:12px;
  letter-spacing:var(--tr-xs);color:var(--sky);margin-bottom:calc(var(--u)*3)}
.ph .crumb a{text-decoration:none}
.ph .crumb a:hover{color:#fff}
@media(max-width:820px){.ph h1,.ph .lede{grid-column:1/-1}}

/* ---------------- prose ---------------- */
.prose{grid-column:3/span 6;line-height:var(--lh-long)}
.prose>*+*{margin-top:calc(var(--u)*3)}
.prose h3{color:var(--navy);margin-top:calc(var(--u)*6)}
.prose .first::first-letter{font-family:var(--head);font-weight:500;font-size:3.1em;
  float:left;line-height:.78;margin:6px 12px 0 0;color:var(--navy)}
.aside{grid-column:10/span 3;font-size:14.5px;color:var(--ink-soft);line-height:var(--lh-long);
  padding-top:calc(var(--u)*1.5);border-top:2px solid var(--navy)}
.aside b{font-family:var(--head);text-transform:uppercase;font-size:12px;
  letter-spacing:var(--tr-xs);color:var(--navy);display:block;margin-bottom:calc(var(--u)*1.5)}
@media(max-width:820px){.prose,.aside{grid-column:1/-1}
  .aside{margin-top:calc(var(--u)*5)}}

/* ---------------- week / steps ---------------- */
.week{margin-top:calc(var(--u)*6);row-gap:2px}
.day{grid-column:span 2;background:var(--paper);padding:calc(var(--u)*3);
  border-right:1px solid var(--line)}
.day:last-child{border-right:0}
.day b{display:block;font-family:var(--head);font-weight:200;font-size:40px;line-height:.9;
  color:var(--navy);font-variant-numeric:tabular-nums}
.day h4{color:var(--navy);margin:calc(var(--u)*2) 0 calc(var(--u)*1)}
.day p{font-size:15px;color:var(--ink-soft);line-height:1.55}
@media(max-width:900px){.day{grid-column:span 3;border-right:0}}
@media(max-width:560px){.day{grid-column:1/-1}}

/* ---------------- facts ---------------- */
.facts{margin-top:calc(var(--u)*6);row-gap:var(--gutter)}
.fact{grid-column:span 3;border-top:2px solid var(--navy);padding-top:calc(var(--u)*2)}
.fact b{display:block;font-family:var(--head);font-weight:300;
  font-size:clamp(38px,5vw,68px);line-height:.9;color:var(--navy);
  letter-spacing:var(--tr-xl);font-variant-numeric:tabular-nums}
.fact span{display:block;font-size:14.5px;color:var(--ink-soft);margin-top:calc(var(--u)*1.5)}
@media(max-width:820px){.fact{grid-column:span 3}}

/* ---------------- board + signature ---------------- */
.board{margin-top:calc(var(--u)*6);row-gap:var(--gutter)}
.off{grid-column:span 4;background:var(--paper);padding:calc(var(--u)*3.5);cursor:pointer;
  text-align:left;border:0;font:inherit;transition:.25s var(--ease)}
.off:hover,.off[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--navy)}
.off .role{font-family:var(--head);font-size:12px;letter-spacing:var(--tr-xs);
  text-transform:uppercase;color:var(--navy);font-weight:600}
.off b{display:block;font-family:var(--head);font-weight:400;font-size:26px;
  text-transform:uppercase;color:var(--navy);margin:calc(var(--u)*1.5) 0 calc(var(--u)*1);
  line-height:1.05;letter-spacing:var(--tr-l)}
.off span{font-size:14.5px;color:var(--ink-soft)}
@media(max-width:820px){.off{grid-column:1/-1}}
.sigwrap{grid-column:1/-1;margin-top:calc(var(--u)*5);background:var(--paper);
  padding:calc(var(--u)*4)}
.sig{border:1px solid var(--line);padding:calc(var(--u)*3);background:#fff;max-width:560px}
.sig table{border-collapse:collapse;width:100%;table-layout:fixed}
.sig td{vertical-align:top}
.sig .sl b{font-family:var(--head);font-size:20px;letter-spacing:.12em;color:var(--navy);
  display:block;line-height:1}
.sig .sl i{font-style:normal;font-family:var(--head);font-size:8px;letter-spacing:.24em;
  color:var(--navy);display:block;margin-top:5px}
.sig .nm{font-weight:700;color:var(--navy);line-height:1.2;font-size:16px}
.sig .rl{font-size:13.5px;color:var(--ink);margin-top:2px}
.sig .bar2{width:44px;height:3px;background:var(--gold);margin:12px 0}
.sig .ct{font-size:13px;color:var(--ink-soft);line-height:1.6}
.sig .ct a{color:var(--navy);text-decoration:none}
@media(max-width:560px){.sig table,.sig tbody,.sig tr,.sig td{display:block;width:100%}
  .sig td:first-child{border-right:0!important;padding:0 0 14px!important;
    border-bottom:1px solid var(--line);margin-bottom:14px}
  .sig td:last-child{padding-left:0!important}}

/* ---------------- CTA strip ---------------- */
.cta-strip{background:var(--navy-deep);color:#fff}
.cta-strip .grid{padding-top:calc(var(--u)*10);padding-bottom:calc(var(--u)*10);
  align-items:end;row-gap:calc(var(--u)*4)}
.cta-strip h2{grid-column:1/span 7;color:#fff}
.cta-strip .side{grid-column:9/span 4;justify-self:end;text-align:right}
.cta-strip p{color:var(--sky);margin-bottom:calc(var(--u)*3);max-width:34ch;margin-left:auto}
@media(max-width:820px){.cta-strip h2,.cta-strip .side{grid-column:1/-1;text-align:left;
  justify-self:start}.cta-strip p{margin-left:0}}

/* ---------------- footer ---------------- */
footer{background:var(--navy-ink);color:var(--sky);padding:calc(var(--u)*10) 0 calc(var(--u)*4)}
footer .grid{row-gap:calc(var(--u)*5)}
footer .c1{grid-column:1/span 4}
footer .c2{grid-column:6/span 3}
footer .c3{grid-column:9/span 4}
footer h4{color:#fff;font-size:13px;letter-spacing:var(--tr-xs);margin-bottom:calc(var(--u)*2.5)}
footer ul{list-style:none;padding:0;margin:0;font-size:15px;line-height:2.1}
footer a{text-decoration:none}
footer a:hover{color:#fff}
footer p{font-size:15px;line-height:var(--lh-long);max-width:32ch}
.fbot{grid-column:1/-1;margin-top:calc(var(--u)*5);padding-top:calc(var(--u)*3);
  border-top:1px solid rgba(153,202,234,.22);font-size:13px;display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap}
/* Privacidad, terminos y cookies van juntos y separados por un punto medio,
   no como tres elementos sueltos del flex: son la misma clase de enlace. */
.flegal{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.flegal a{color:var(--sky);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(153,202,234,.4);padding:11px 0;min-height:44px;
  display:inline-flex;align-items:center}
.flegal a:hover{color:#fff;text-decoration-color:#fff}
.flegal a+a::before,.flegal .ck-link::before{content:"\00b7";margin-right:10px;
  color:rgba(153,202,234,.5);text-decoration:none}
.flegal [aria-current="page"]{color:#fff;text-decoration-color:#fff}
/* indice lateral de las paginas legales */
/* El indice lateral es navegacion, no prosa: cada enlace es su propio bloque
   de 44 px. En linea, la caja pulsable de un enlace mide lo que mide la letra
   (18 px medidos), no el interlineado, asi que display:block no es cosmetico. */
.aside .ix{display:flex;flex-direction:column;margin-top:0}
.aside .ix a{display:flex;align-items:center;min-height:44px;color:var(--navy);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);
  border-bottom:1px solid var(--line)}
.aside .ix a:last-child{border-bottom:0}
.aside .ix a:hover{text-decoration-color:var(--navy)}
.aside a{color:var(--navy);text-underline-offset:3px}
@media(max-width:820px){footer .c1,footer .c2,footer .c3{grid-column:1/-1}}

/* ---------------- reveal ---------------- */
.rv{opacity:0;transform:translateY(26px)}
.rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ---------------- internal layer ---------------- */
.eb{display:none!important}
body.elev .eb{display:block!important;background:#D9251D;color:#fff;font-family:var(--body);
  font-size:11.5px;line-height:1.45;padding:7px 10px;max-width:420px;font-weight:600;
  margin-top:10px}
.ebar{display:none}
body.elev .ebar{display:block;position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:#111;color:#fff;font-size:12.5px;padding:9px 16px;text-align:center;
  font-family:var(--body)}


/* ============================================================
   ROCK SALT · la voz humana
   Es la mas ancha de todas: 787 px donde una monoespaciada pinta 694.
   Reglas medidas: minimo 28 px, una a tres palabras, un solo peso,
   y siempre con aire arriba y abajo porque sus astas se salen de la caja.
   ============================================================ */
.hand{font-family:var(--hand);font-weight:400;text-transform:none;
  letter-spacing:0;display:inline-block}

/* dentro de un titular de Oswald: mas chica de lo que parece, y con aire.
   EL DORADO NUNCA ES TINTA. Sobre claro la mano va en azul; sobre oscuro,
   en azul claro. Medido: dorado sobre lienzo 1,99:1, azul sobre lienzo 11,1:1,
   azul claro sobre azul 6,60:1. */
/* REGLA DE COMPOSICION, no de estilo: a tamaño optico correcto Rock Salt es
   1,3 veces mas ancha que Oswald, asi que dentro de un titular solo aguanta
   UNA palabra corta y tiene que CERRAR la linea. En mitad de una frase invade.
   Donde el acento es largo, sale del titular y va como nota aparte. */
h1 .hand,h2 .hand,.poster .ln .hand{
  white-space:nowrap;
  font-size:var(--hand-size);      /* .92 em: su x queda al 89% de la mayuscula de Oswald */
  line-height:0;                   /* su caja desciende .77 em y reventaba el interlineado */
  vertical-align:baseline;         /* las dos se apoyan en la misma linea base, sin trucos */
  margin:0 .1em;                   /* Rock Salt ya trae su propio aire lateral */
  color:var(--navy)}
.on-dark h1 .hand,.on-dark h2 .hand,.poster .ln .hand,
.ph h1 .hand,.cta-strip h2 .hand,.nums .hand{color:var(--sky)}
.band .over h2 .hand{color:var(--navy)}

/* Rock Salt suelta. Su caja de fuente mide 2,35 em (1,58 de ascenso mas 0,77
   de descenso), asi que la linea nunca baja de ahi por mas interlineado que se
   le ponga. El tamaño se elige para que esa caja natural caiga en el modulo:
   17 px x 2,35 = 40 px exactos. 13,6 px x 2,35 = 32 px. */
.note-hand{font-family:var(--hand);font-size:17px;line-height:40px;
  color:var(--navy);transform:rotate(-1.6deg);display:block;width:fit-content;max-width:22ch}
.note-hand.sky{color:var(--sky)}

/* el trazo de urgencia sobre la lista de necesidades */
.need-hand{font-family:var(--hand);font-size:13.6px;line-height:32px;color:var(--navy);
  transform:rotate(-1deg);display:block;width:fit-content;margin-top:6px}

/* firma manuscrita del pie */
.sign-hand{font-family:var(--hand);font-size:17px;color:var(--sky);
  line-height:40px;transform:rotate(-1.2deg);display:block;width:fit-content}

/* cifra anotada a mano junto a un numero grande */
.num-hand{font-family:var(--hand);font-size:13.6px;line-height:32px;color:var(--sky);
  transform:rotate(-2deg);display:block;margin-top:10px}


/* ============================================================
   JUGADAS TIPOGRAFICAS
   El SVG lo arma el script a partir del span, midiendo la palabra.
   Tres capas: dos fantasmas desplazados en Z, solo contorno, y la
   palabra real que se dibuja con una mascara que barre de izquierda
   a derecha mientras el trazo esta visible. Al terminar entra el relleno.
   ============================================================ */
/* inline, NO inline-block: un inline-block crea su propia linea base y se
   traga el vertical-align del SVG. Medido: dejaba la palabra 16,5 px alta. */
.hand.is-svg{display:inline;white-space:nowrap}
.hand.is-svg > svg{overflow:visible;display:inline}
.hand.is-svg text{font-family:var(--hand);font-weight:400;paint-order:stroke fill}

/* los fantasmas: profundidad, no ruido */
.hand-ghost{fill:none;stroke:currentColor;opacity:.32;
  transition:transform .5s var(--ease)}
.hand-ghost.g2{opacity:.18}

/* La palabra: se escribe con trazo, luego entra el relleno y el trazo se
   retira. En reposo queda la letra tal cual la dibujo la fuente, sin engordar:
   un trazo permanente de .011 em sumaba un 20% al grosor de Rock Salt. */
.hand-ink{stroke:currentColor;fill:currentColor;fill-opacity:0;
  transition:fill-opacity .5s var(--ease),stroke-width .45s var(--ease)}
.hand.drawn .hand-ink{fill-opacity:1;stroke-width:0}
.hand-mask-bar{fill:#fff}   /* el ancho lo anima el script, no una transicion CSS */

/* jugada B: la palabra manda dentro de la linea */
.hand.lead{font-size:var(--hand-lead)}
/* jugada C: superpuesta, cruza por encima del renglon */
.hand.over{font-size:var(--hand-over);position:absolute;z-index:4;pointer-events:none}
.has-over{position:relative}

@media(prefers-reduced-motion:reduce){
  .hand-ink{fill-opacity:1;stroke-width:0;transition:none}
  .hand-ghost{display:none}
}

/* ============================================================
   PATRONES DE LAYOUT tomados de beangels.eu
   1. banda de una sola cifra despues del heroe
   2. dos puertas asimetricas
   3. riel horizontal con snap para programas y causas
   4. dos columnas paralelas numeradas
   5. pie ancho por funcion con suscripcion
   ============================================================ */

/* ---------- 1. banda de una cifra ---------- */
.statband{background:var(--navy);color:#fff;overflow:hidden;position:relative}
.statband .grid{padding-top:calc(var(--u)*9);padding-bottom:calc(var(--u)*9);
  align-items:center;row-gap:calc(var(--u)*4)}
.statband .fig{grid-column:1/span 5}
.statband .fig b{display:block;font-family:var(--head);font-weight:200;
  font-size:clamp(84px,13vw,210px);line-height:.8;letter-spacing:var(--tr-xxl);
  font-variant-numeric:tabular-nums;margin-left:var(--optical-flush)}
.statband .fig i{font-style:normal;display:block;font-family:var(--head);font-weight:400;
  text-transform:uppercase;font-size:clamp(15px,1.8vw,21px);letter-spacing:var(--tr-s);
  color:var(--sky);margin-top:calc(var(--u)*2)}
.statband .say{grid-column:7/span 5;color:var(--sky);font-size:clamp(17px,1.9vw,20px);
  line-height:var(--lh-long);max-width:42ch}
.statband .say a{color:#fff}
@media(max-width:820px){.statband .fig,.statband .say{grid-column:1/-1}}

/* ---------- 2. dos puertas ---------- */
.doors{background:var(--paper)}
.doors .grid{padding-top:calc(var(--u)*12);padding-bottom:calc(var(--u)*12);
  row-gap:calc(var(--u)*7)}
.doors .intro{grid-column:1/span 5}
.door{grid-column:span 6;display:grid;grid-template-columns:auto 1fr;
  gap:calc(var(--u)*3);align-items:start}
.door:first-of-type{grid-column:1/span 5}
.door:last-of-type{grid-column:7/span 6;margin-top:calc(var(--u)*6)}
.door .n{font-family:var(--head);font-weight:200;font-size:clamp(44px,5vw,76px);
  line-height:.78;color:var(--navy);letter-spacing:var(--tr-xl);
  font-variant-numeric:tabular-nums}
.door h3{color:var(--navy);margin-bottom:calc(var(--u)*2)}
.door p{color:var(--ink-soft);margin-bottom:calc(var(--u)*3);max-width:38ch}
@media(max-width:820px){.doors .intro,.door,.door:first-of-type,.door:last-of-type{
  grid-column:1/-1;margin-top:0}}

/* ---------- 3. riel horizontal ---------- */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--gutter);flex-wrap:wrap;margin-bottom:calc(var(--u)*5)}
.rail-nav{display:flex;gap:10px}
.rail-btn{width:52px;height:52px;border:1.5px solid var(--navy);background:none;
  color:var(--navy);cursor:pointer;font-size:19px;line-height:1;
  transition:.2s var(--ease);display:grid;place-items:center}
.rail-btn:hover:not(:disabled){background:var(--navy);color:#fff}
.rail-btn:disabled{opacity:.28;cursor:default}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,25%);
  gap:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding-bottom:calc(var(--u)*2);
  scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start}
@media(max-width:1100px){.rail{grid-auto-columns:minmax(280px,42%)}}
@media(max-width:700px){.rail{grid-auto-columns:minmax(250px,84%)}}
.rcard{background:var(--paper);display:flex;flex-direction:column;text-decoration:none;
  transition:transform .35s var(--ease)}
.rcard:hover{transform:translateY(-6px)}
.rcard figure{margin:0;overflow:hidden}
.rcard img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .8s var(--ease)}
.rcard:hover img{transform:scale(1.05)}
.rcard .b{padding:calc(var(--u)*3)}
.rcard h4{color:var(--navy);margin-bottom:calc(var(--u)*1.5)}
.rcard p{font-size:15.5px;color:var(--ink-soft);line-height:1.6}
.rcard .more{font-family:var(--head);text-transform:uppercase;font-size:13px;
  letter-spacing:var(--tr-s);color:var(--navy);margin-top:calc(var(--u)*2);display:block}
/* tarjeta de causa: solo texto, sin foto, porque no tenemos derechos de logos */
.ccard{background:var(--canvas);padding:calc(var(--u)*3.5);display:flex;
  flex-direction:column;justify-content:space-between;min-height:210px}
.ccard b{font-family:var(--head);font-weight:400;text-transform:uppercase;
  font-size:clamp(19px,2.1vw,25px);line-height:1.1;color:var(--navy);
  letter-spacing:var(--tr-l)}
.ccard span{font-size:14.5px;color:var(--ink-soft);margin-top:calc(var(--u)*2)}

/* ---------- 4. dos columnas paralelas numeradas ---------- */
.par{row-gap:calc(var(--u)*7)}
.par .col{grid-column:span 6}
.par .col:first-child{grid-column:1/span 5}
.par .col:last-child{grid-column:7/span 5}
.par h3{color:var(--navy);margin-bottom:calc(var(--u)*4)}
.pitem{display:grid;grid-template-columns:auto 1fr;gap:calc(var(--u)*3);
  padding:calc(var(--u)*3) 0;border-top:1px solid var(--line);text-decoration:none}
.pitem:last-child{border-bottom:1px solid var(--line)}
.pitem .i{font-family:var(--head);font-weight:300;font-size:26px;color:var(--ink-soft);
  line-height:1;font-variant-numeric:tabular-nums;padding-top:4px}
.pitem b{display:block;font-family:var(--head);font-weight:400;text-transform:uppercase;
  font-size:clamp(17px,1.9vw,21px);line-height:1.2;color:var(--navy);
  letter-spacing:var(--tr-m)}
.pitem span{display:block;font-size:14.5px;color:var(--ink-soft);margin-top:6px}
.pitem:hover b{color:var(--navy-ink)}
.pitem:hover .i{color:var(--navy)}
@media(max-width:820px){.par .col,.par .col:first-child,.par .col:last-child{grid-column:1/-1}}

/* ---------- 5. pie ancho ---------- */
footer .c0{grid-column:1/span 3}
footer .cA{grid-column:5/span 2}
footer .cB{grid-column:7/span 2}
footer .cC{grid-column:9/span 4}
footer .sub{display:flex;gap:8px;flex-wrap:wrap;margin-top:calc(var(--u)*2)}
footer .sub input{flex:1 1 180px;padding:13px 14px;border:1px solid rgba(153,202,234,.4);
  background:rgba(255,255,255,.06);color:#fff;font-family:var(--body);font-size:15px}
footer .sub input::placeholder{color:rgba(153,202,234,.7)}
footer .sub button{background:var(--gold);color:var(--navy-ink);border:0;
  font-family:var(--head);text-transform:uppercase;font-weight:600;font-size:13px;
  letter-spacing:var(--tr-s);padding:13px 18px;cursor:pointer}
footer .sub button:hover{background:var(--gold-hi)}
@media(max-width:900px){footer .c0,footer .cA,footer .cB,footer .cC{grid-column:1/-1}}

/* ---------- nav: enlaces secundarios plegados ---------- */
.more-wrap{position:relative}
.more-btn{background:none;border:0;color:var(--sky);font-family:var(--head);
  text-transform:uppercase;font-size:14.5px;letter-spacing:var(--tr-s);cursor:pointer;
  padding:6px 0}
.more-btn:hover,.more-wrap[data-open] .more-btn{color:#fff}
.more-menu{display:none;position:absolute;top:calc(100% + 14px);right:0;
  background:var(--navy-deep);min-width:240px;padding:calc(var(--u)*2);
  box-shadow:0 18px 44px rgba(0,20,45,.4)}
.more-wrap[data-open] .more-menu{display:block}
.more-menu a{display:block;color:var(--sky);text-decoration:none;padding:11px 12px;
  font-family:var(--head);text-transform:uppercase;font-size:14px;letter-spacing:var(--tr-s)}
.more-menu a:hover{background:rgba(153,202,234,.12);color:#fff}
@media(max-width:980px){.more-wrap{display:none}}


/* ============================================================
   PROFUNDIDAD. Extrusion real por capas mas camara que responde
   al puntero. La direccion de la extrusion se recalcula con la
   camara, que es lo que hace que las caras laterales se revelen
   al mover el mouse en vez de quedarse pintadas.
   ============================================================ */
.scene{perspective:1500px;perspective-origin:42% 38%}
.scene .poster{transform-style:preserve-3d;will-change:transform;
  transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.poster .ln{transform-style:preserve-3d}
@media(prefers-reduced-motion:reduce){
  .scene{perspective:none}
  .scene .poster{transform:none!important;transition:none}
}

/* ---------------- movil: ningun objetivo tactil bajo 44 px ----------------
   Medido a 390 px: el boton Menu daba 19, los enlaces del pie 18 y los
   enlaces de accion 36. La guia de dedo son 44. Se agranda la caja de
   contacto, no el texto, para no mover la composicion. */
@media(max-width:820px){
  .burger{padding:13px 10px;margin-right:-10px;flex:0 0 auto;min-height:44px}
  .lock{padding:2px 0}
  .meet-where a{display:inline-block;padding:12px 0}
  .go{padding-top:12px}
  footer ul{line-height:1.5}
  footer ul a{display:inline-block;padding:11px 0}
  .ph .crumb a{display:inline-block;padding:13px 0;margin:-13px 0}
}


/* ---------------- revelado de parrafo por lineas ----------------
   Cada palabra lleva su propia mascara; las de una misma linea comparten
   retardo, asi que el ojo lee una sola mascara de linea. El relleno
   inferior existe para que la mascara no corte los descendentes de p, g, y;
   el margen negativo devuelve el espacio a la composicion. */
.rvl.rvl-ready .rw{display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.18em;margin-bottom:-.18em}
.rvl.rvl-ready .ri{display:inline-block;transform:translateY(108%);
  transition:transform .72s cubic-bezier(.22,.61,.36,1)}
.rvl.rvl-in .ri{transform:none}
@media(prefers-reduced-motion:reduce){
  .rvl .ri{transform:none!important;transition:none}}

/* ---------------- el reel ---------------- */
.reel{background:var(--navy-ink)}
.reel .grid{padding-top:calc(var(--u)*11);padding-bottom:calc(var(--u)*11);
  align-items:center;row-gap:calc(var(--u)*5)}
.reel-txt{grid-column:1/span 4}
.reel-txt h2{color:#fff}
.reel-txt .lede{color:var(--sky);margin-top:calc(var(--u)*2.5)}
.reel-fig{grid-column:6/span 7;margin:0;position:relative}
.reel-fig video{width:100%;height:auto;display:block;background:#000;
  aspect-ratio:16/9;object-fit:cover}
.reel-fig figcaption{font-family:var(--head);text-transform:uppercase;font-size:11.5px;
  letter-spacing:var(--tr-xs);color:var(--sky);margin-top:calc(var(--u)*1.5)}
.reel-play{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;
  cursor:pointer;display:grid;place-items:center}
.reel-play span{width:84px;height:84px;border:1px solid rgba(255,255,255,.6);
  border-radius:50%;display:grid;place-items:center;background:rgba(0,27,56,.4);
  backdrop-filter:blur(3px);transition:background .3s var(--ease),border-color .3s var(--ease)}
.reel-play span::after{content:"";width:0;height:0;margin-left:5px;
  border-left:20px solid #fff;border-top:13px solid transparent;border-bottom:13px solid transparent}
.reel-play:hover span{background:var(--gold);border-color:var(--gold)}
.reel-play:hover span::after{border-left-color:var(--navy-ink)}
.reel-play.gone{display:none}
@media(max-width:820px){.reel-txt,.reel-fig{grid-column:1/-1}
  .reel-play span{width:66px;height:66px}}


/* ---------------- el heroe se mueve con el scroll ----------------
   El fondo es un bucle de tres planos del reel. La imagen sigue debajo
   como respaldo: si el video no carga o el ahorro de datos lo bloquea,
   el heroe se ve igual. El desplazamiento lo escribe el script en una
   variable, no en el estilo, para que una sola propiedad se anime. */
.hero-bg{will-change:transform}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease)}
.hero-vid.on{opacity:1}
.hero.scrolling .hero-bg{animation:none;
  transform:scale(calc(1.06 + var(--k,0) * .10)) translate3d(0, calc(var(--k,0) * 6vh), 0)}
/* el cartel NO se toca aqui: depth.js le escribe transform en linea para la
   camara 3D y el estilo en linea gana. Se mueve el contenedor. */
.hero.scrolling .scene{transform:translate3d(0, calc(var(--k,0) * -4.5vh), 0)}
.hero.scrolling .hero-foot{opacity:calc(1 - var(--k,0) * 1.4)}

/* el giro: la banda de superposicion entra con el scroll */
.band{--g:0}   /* valor inicial en el PADRE: declararlo en .pic tapaba la herencia */
.band.turn .pic img{transform:scale(calc(1.10 - var(--g) * .10));
  transform-origin:50% 55%;will-change:transform}
.band.turn .pic{clip-path:inset(calc((1 - var(--g)) * 12%) 0 0 0)}
.band.turn .over{transform:translate3d(0, calc((1 - var(--g)) * 3.5vh), 0)}
@media(prefers-reduced-motion:reduce){
  .hero.scrolling .hero-bg,.hero.scrolling .scene,.band.turn .pic img,
  .band.turn .pic,.band.turn .over{transform:none!important;clip-path:none!important}
  .hero.scrolling .hero-foot{opacity:1}
  .hero-vid{transition:none}}


/* ---------------- credito del pie ----------------
   El corazon va en cielo, no en oro: el oro Kiwanis sobre navy da 4,13:1 y
   no pasa AA en cuerpo pequeno, y ademas el oro es relleno y filete, nunca
   texto. Lo lee el lector de pantalla por el texto oculto, no por el simbolo. */
.hrt{font-style:normal;color:var(--sky);font-size:1.08em;line-height:1;
  margin:0 .1em;vertical-align:-.03em}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
footer a.by{color:var(--sky);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:rgba(153,202,234,.45);
  display:inline-block;padding:11px 0;margin:-11px 0}
footer a.by:hover{color:#fff;text-decoration-color:#fff}

/* enlace permanente a las preferencias, en el pie de todas las paginas */
.ck-link{background:none;border:0;color:var(--sky);cursor:pointer;font:inherit;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(153,202,234,.45);
  padding:11px 0;margin:-11px 0;min-height:44px}
.ck-link:hover{color:#fff;text-decoration-color:#fff}
/* El mismo boton vive en dos superficies. En el pie, sobre navy, va en cielo.
   Dentro de la prosa de la politica, sobre lienzo, el cielo da 1,59:1 y no se
   lee: ahi va en navy, como cualquier otro enlace del texto. */
.prose .ck-link{color:var(--navy);text-decoration-color:var(--line);
  padding:0;margin:0;min-height:0}
.prose .ck-link:hover{color:var(--navy);text-decoration-color:var(--navy)}