/* =========================================================================
   BANDADA HC · PROPUESTA DE VALOR POR SEGMENTO
   Hoja compartida por /empresas, /otec y /universidades.

   Sistema de marca vigente desde el 2026-08-24: Archivo, Newsreader y
   JetBrains Mono, la paleta de papel, agua, verde y rojo, y el corte como
   unica idea que gobierna la pieza. La referencia viva es el :root de
   apps/web/index.html y la doctrina esta en packages/brand/STYLE_GUIDE.md.

   Lo unico que cambia entre las tres paginas es el contenido y la foto. El
   acento tambien es el mismo en las tres, a proposito: son la misma marca
   hablandole a tres interlocutores, no tres marcas.
   ========================================================================= */

:root{
  --hueso:#f2eee5;
  --hueso-2:#e7e1d4;
  --tinta:#16150f;
  --tinta-suave:#4f4d48;
  --turquesa:#cdd5cd;
  --verde:#00343a;
  --verde-2:#002226;
  --rojo:#8a5f14;
  --rojo-boton:#8a5f14;
  --salmon:#e7a93b;
  --grotesca:'Archivo',system-ui,-apple-system,sans-serif;
  --serif:'Newsreader',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --pad:clamp(20px,4vw,80px);
  --corte:polygon(58% 0, 100% 0, 100% 100%, 26% 100%);
}

/* PALETA 2026-09-03 · mismos roles, tonos de las one pager en PDF.
   Pedido de Ester: lo oscuro pasa al verde del PDF, lo naranjo a oro, el beige
   se queda y el agua pasa a un verde grisaceo.

   EL ORO VA EN DOS: el brillante #e7a93b sobre beige da 1,79 de contraste y es
   ilegible como texto. Por eso --salmon es el oro brillante, que en esta hoja
   solo aparece sobre verde o como relleno con texto oscuro, y --rojo/--rojo-boton
   son el oro profundo #8a5f14, que da 4,87 sobre papel y pasa hasta en 10px.
   El reparto ya estaba bien hecho: no hubo que mover ni un uso.

   Los nombres quedan como estaban a proposito. Renombrarlos obliga a tocar las
   tres piezas y el riesgo no compensa: lo que manda es el rol, no el nombre. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--hueso);color:var(--tinta);
  font-family:var(--grotesca);font-size:17px;line-height:1.58;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}

/* Tipografia de casa ---------------------------------------------------- */
.rotulo{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rojo-boton);margin:0 0 18px}
.grito{font-family:var(--grotesca);font-weight:900;text-transform:lowercase;
  font-size:clamp(30px,5vw,80px);line-height:.94;letter-spacing:-.035em;margin:0}
.grito em{font-style:normal;color:var(--rojo)}
.bajada{font-family:var(--serif);font-weight:300;
  font-size:clamp(17px,1.5vw,24px);line-height:1.4;color:var(--tinta-suave);
  /* Medida del parrafo, no del bloque: a su lado vive la cifra o la foto. */
  width:min(100%,38em);margin:22px 0 0}
.bajada em{font-style:italic}
.bajada b{font-weight:600;color:var(--tinta)}

section{padding:clamp(46px,7vw,110px) var(--pad)}

/* =========================================================
   CABECERA
   ========================================================= */
.hdr{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px var(--pad);border-bottom:1px solid rgba(22,21,15,.22);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;position:relative;z-index:6}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;
  color:var(--tinta)}
.marcaB{width:20px;height:22px;color:currentColor}
.hdr__corto{color:var(--rojo-boton);text-decoration:none}

/* =========================================================
   PORTADA · el corte parte la frase en dos caras
   ========================================================= */
.portada{position:relative;min-height:min(92vh,860px);overflow:hidden;
  isolation:isolate;padding:0}
.capa{position:absolute;inset:0;display:flex;flex-direction:column}
.cuerpo{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(34px,6vh,80px) var(--pad)}
.capa--color{background:var(--verde);color:var(--hueso);
  clip-path:var(--corte);pointer-events:none;
  animation:corte-entra 1.1s cubic-bezier(.22,.61,.36,1) both}
/* El contenido vive identico en las dos capas. Si la animacion no corriera,
   la capa de color se ve entera y no falta nada: lo que se lee esta abajo. */
.capa--color .rotulo{color:var(--salmon)}
.capa--color .hdr{border-bottom-color:rgba(242,238,229,.28)}
.capa--color .marca{color:var(--hueso)}
.capa--color .hdr__corto{color:var(--salmon)}
.capa--color .titulo em{color:var(--salmon)}
.capa--color .entrada{color:rgba(242,238,229,.92)}
@keyframes corte-entra{
  from{clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%)}
  to{clip-path:var(--corte)}
}
.titulo{font-family:var(--grotesca);font-weight:900;
  font-size:clamp(40px,7.6vw,124px);line-height:.9;letter-spacing:-.04em;
  text-transform:lowercase;margin:0}
.titulo em{font-style:normal;color:var(--rojo)}
.entrada{font-family:var(--serif);font-weight:300;
  font-size:clamp(17px,1.6vw,26px);line-height:1.36;color:var(--tinta-suave);
  /* A la derecha del parrafo vive el corte con la otra cara de la frase. */
  width:min(100%,36em);margin:clamp(18px,3vh,34px) 0 0}
.entrada b{font-weight:500;color:var(--tinta)}
.capa--color .entrada b{color:var(--hueso)}
.filo{position:absolute;inset:0;z-index:3;pointer-events:none}
.filo svg{width:100%;height:100%;display:block}
.filo--angosto{display:none}

/* =========================================================
   EVIDENCIA · una cifra manda, la segunda acompana
   ========================================================= */
.evidencia{background:var(--turquesa)}
/* La cifra de apoyo se alinea abajo para que quede a la altura de la fuente
   de la cifra que manda, en vez de dejar un hueco a la derecha. */
.evidencia__cols{display:grid;grid-template-columns:1.25fr 1fr;
  gap:clamp(26px,4vw,72px);align-items:end}
.cifra{font-family:var(--grotesca);font-weight:900;
  font-size:clamp(72px,12vw,190px);line-height:.82;letter-spacing:-.05em;
  color:var(--rojo);margin:0}
.cifra__dice{font-family:var(--serif);font-weight:400;
  font-size:clamp(21px,2.1vw,32px);line-height:1.2;margin:16px 0 0}
.cifra__dice b{font-weight:600}
.fuente{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-suave);margin:18px 0 0;
  line-height:1.7}
.apoyo{border-top:1px solid rgba(22,21,15,.3);padding-top:22px}
.apoyo p{font-size:16px;margin:12px 0 0;color:var(--tinta-suave)}
.apoyo p b{color:var(--tinta);font-weight:600}
/* Va con el contenedor y el elemento adelante porque .apoyo p empata en
   especificidad y, al ir despues, le ganaba a la cifra. */
.apoyo p.apoyo__n{font-family:var(--grotesca);font-weight:900;
  font-size:clamp(30px,3.4vw,52px);line-height:.9;letter-spacing:-.04em;
  color:var(--rojo);margin:0}
.remate{margin:clamp(30px,4vw,56px) 0 0;padding-top:24px;
  border-top:1px solid rgba(22,21,15,.3);
  font-family:var(--serif);font-weight:300;
  font-size:clamp(19px,2vw,30px);line-height:1.3}

.cab{padding-bottom:clamp(26px,3.4vw,48px)}

/* =========================================================
   CAMPOS A SANGRE · tres palancas, o el reparto de roles
   ========================================================= */
.campos{display:grid;gap:0;padding:0}
.campos--3{grid-template-columns:repeat(3,1fr)}
.campos--2{grid-template-columns:repeat(2,1fr)}
.campo{position:relative;display:flex;flex-direction:column;
  justify-content:flex-end;
  padding:clamp(34px,4vw,66px) clamp(22px,2.6vw,46px) clamp(30px,3.4vw,54px);
  min-height:min(46vh,380px)}
.campo--papel{background:var(--hueso-2);padding-left:var(--pad)}
.campo--agua{background:var(--turquesa)}
/* El campo rojo que lleva texto va en el rojo oscurecido. Con el rojo
   normal, el parrafo en hueso da 3,78 y el minimo es 4,5. */
.campo--rojo{background:var(--rojo-boton);color:var(--hueso);
  padding-right:var(--pad)}
.campo--verde{background:var(--verde);color:var(--hueso);padding-right:var(--pad)}
.campos--2 .campo:first-child{padding-left:var(--pad)}
.campo .n{font-family:var(--grotesca);font-weight:900;
  font-size:clamp(40px,4.2vw,74px);line-height:.8;letter-spacing:-.04em;
  margin:0 0 auto;color:var(--rojo)}
.campo--agua .n{color:rgba(22,21,15,.5)}
.campo--rojo .n{color:rgba(242,238,229,.6)}
.campo--verde .n{color:var(--salmon)}
.campo .tag{font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;display:block;margin-bottom:12px;opacity:.72}
/* Sobre el rojo, .72 deja el rotulo en 3,85 y el minimo para texto chico
   es 4,5. Los numeros de indice de cada campo estan subidos por lo mismo. */
.campo--rojo .tag{opacity:.85}
.campo h3{font-family:var(--serif);font-weight:400;
  font-size:clamp(23px,2.2vw,34px);line-height:1.1;margin:0 0 12px}
.campo p{margin:0;font-size:15.5px;opacity:.86}
.campo p b{font-weight:600;opacity:1}
.campos__nota{padding:22px var(--pad) 0;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--tinta-suave)}

/* =========================================================
   PASOS · filas con filete, y una sola sobre la cuna verde
   ========================================================= */
.pasos{overflow:hidden}
.pasos__cab{margin-bottom:clamp(24px,3.4vw,46px)}
.paso{position:relative;display:grid;
  grid-template-columns:clamp(64px,6vw,108px) 1.05fr 1.25fr;
  gap:clamp(16px,3vw,52px);align-items:start;
  padding:clamp(22px,2.6vw,38px) 0;border-top:1px solid rgba(22,21,15,.22)}
.paso .np{font-family:var(--grotesca);font-weight:900;
  font-size:clamp(30px,3.2vw,54px);line-height:.82;letter-spacing:-.04em;
  color:rgba(22,21,15,.48);position:relative;z-index:2;margin:0}
.paso h3{font-family:var(--serif);font-weight:400;
  font-size:clamp(21px,2.2vw,34px);line-height:1.1;margin:0;
  position:relative;z-index:2}
.paso p{margin:0;font-size:16px;color:var(--tinta-suave);
  position:relative;z-index:2}
/* La cuna sale por el borde derecho de la pantalla: el paso del socio es el
   unico que cambia de campo, y el filo en diagonal es el que lo separa. */
.paso--socio .cuna{position:absolute;top:0;bottom:0;left:0;
  right:calc(var(--pad)*-1);background:var(--verde);
  clip-path:polygon(110px 0, 100% 0, 100% 100%, 0 100%);z-index:0}
.paso--socio{border-top-color:transparent}
.paso--socio .np{color:var(--salmon)}
.paso--socio h3{color:var(--hueso)}
.paso--socio p{color:rgba(242,238,229,.86)}

/* =========================================================
   MOMENTOS · el dibujo de la medicion, no una lista de rotulos
   ========================================================= */
.momentos{margin-top:clamp(34px,4.4vw,64px);
  border-top:1px solid rgba(22,21,15,.22);padding-top:clamp(26px,3.4vw,48px);
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,64px);
  align-items:center}
.momentos svg{width:100%;height:auto;display:block}

/* El grafico: el SVG lleva la geometria y los rotulos van en HTML encima, con
   la posicion en porcentaje del recuadro del SVG. Asi el texto conserva su
   cuerpo en cualquier ancho, en vez de encogerse con el dibujo. */
.grafico{margin:0}
.grafico__plot{position:relative}
.grafico__banda,.grafico__base,.grafico__delta{position:absolute;margin:0}
.grafico__banda{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinta-suave);text-align:center;
  transform:translateY(-100%);padding-bottom:5px}
.grafico__base{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rojo-boton);
  transform:translateY(-100%);padding-bottom:6px}
.grafico__delta{font-family:var(--grotesca);font-weight:900;
  text-transform:lowercase;letter-spacing:-.03em;line-height:.95;
  font-size:clamp(13px,1.4vw,19px);color:var(--rojo);
  transform:translateY(-50%);width:5.2em}
.grafico__hitos{position:relative;margin-top:10px;min-height:58px}
.hito{position:absolute;top:0}
.hito span{display:block;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinta);
  margin-bottom:5px}
.hito p{margin:0;font-size:13.5px;line-height:1.3;color:var(--tinta-suave)}
.momentos__dice{font-family:var(--serif);font-weight:300;
  font-size:clamp(18px,1.9vw,28px);line-height:1.32;margin:0}
.momentos__dice b{font-weight:600}

/* =========================================================
   FILAS · lo que gana el socio, agrupado con filete y no en tarjetas
   ========================================================= */
.filas{margin-top:clamp(24px,3.4vw,44px)}
/* La primera columna tiene que aguantar la palabra mas larga, que es
   "diferenciacion": con 240px se salia del cajon y tocaba el parrafo. */
.fila{display:grid;grid-template-columns:clamp(150px,20vw,300px) 1fr;
  gap:clamp(14px,3vw,52px);align-items:baseline;
  padding:clamp(20px,2.4vw,32px) 0;border-top:1px solid rgba(22,21,15,.3)}
.fila:last-child{border-bottom:1px solid rgba(22,21,15,.3)}
.fila h3{font-family:var(--grotesca);font-weight:900;text-transform:lowercase;
  font-size:clamp(22px,2.3vw,34px);line-height:.94;letter-spacing:-.035em;
  margin:0}
.fila p{margin:0;font-size:16.5px;color:var(--tinta-suave)}
.fila p b{color:var(--tinta);font-weight:600}

/* =========================================================
   FOTO · presencia humana, con velo para que el texto se sostenga
   ========================================================= */
.foto{position:relative;padding:0;overflow:hidden;background:var(--verde-2)}
.foto img{width:100%;height:clamp(300px,46vh,460px);object-fit:cover}
/* El velo sostiene el texto hasta donde el texto llega, y recien despues se
   abre para que las personas se vean. Con el corte anterior en 38%, las
   ultimas palabras caian sobre la parte clara de la foto y se perdian. */
.foto__velo{position:absolute;inset:0;
  background:linear-gradient(96deg, rgba(0,34,38,.95) 0%,
    rgba(0,34,38,.92) 46%, rgba(0,34,38,.80) 64%,
    rgba(0,34,38,.38) 84%, rgba(0,34,38,.14) 100%)}
.foto__dice{position:absolute;inset:0;display:flex;align-items:center;
  padding:clamp(28px,5vw,72px) var(--pad)}
.foto__dice p{margin:0;color:var(--hueso);font-family:var(--grotesca);
  font-weight:900;text-transform:lowercase;letter-spacing:-.035em;
  font-size:clamp(26px,4vw,58px);line-height:.96;
  /* A la derecha del texto la foto queda a la vista: el velo se abre ahi.
     La medida existe para que el texto no pase del tramo velado, y muere el
     dia que la foto salga. */
  width:min(100%,13em)}
.foto__dice em{font-style:normal;color:var(--salmon)}

/* =========================================================
   CONTACTO · cierra en oscuro, con la pieza impresa a la mano
   ========================================================= */
.contacto{background:var(--verde);color:var(--hueso);position:relative}
.contacto .rotulo{color:var(--salmon)}
.contacto .grito em{color:var(--salmon)}
/* .bajada trae el gris de los campos claros. Sobre el verde ese gris queda
   en 2,3 de contraste, asi que aca se reemplaza por el papel. */
.contacto .bajada{color:rgba(242,238,229,.86)}
.contacto .bajada b{color:var(--hueso)}
.contacto__cols{display:grid;grid-template-columns:1.2fr 1fr;
  gap:clamp(26px,4vw,72px);align-items:end;margin-top:clamp(26px,3.4vw,48px)}
.acciones{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.boton{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;padding:15px 22px;
  transition:background .25s ease,color .25s ease}
.boton svg{width:16px;height:16px;flex:none}
.boton--pdf{background:var(--salmon);color:var(--verde-2);font-weight:500}
.boton--pdf:hover{background:var(--hueso)}
.boton--linea{border:1px solid rgba(242,238,229,.42);color:var(--hueso)}
.boton--linea:hover{background:rgba(242,238,229,.12)}
.datos{display:flex;flex-direction:column;gap:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em}
.datos a{display:flex;align-items:center;gap:11px;text-decoration:none;
  color:rgba(242,238,229,.86)}
.datos a:hover{color:var(--hueso)}
.datos svg{width:15px;height:15px;flex:none;opacity:.8}
.sello{position:absolute;right:var(--pad);top:clamp(40px,6vw,86px);
  width:clamp(112px,11vw,160px);color:var(--hueso);opacity:.9}
.sello svg{width:100%;height:auto}

/* =========================================================
   PIE
   ========================================================= */
.pie-pagina{background:var(--verde-2);color:rgba(242,238,229,.7);
  padding:22px var(--pad);font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap}
.pie-pagina a{color:inherit}

/* =========================================================
   PANTALLAS ANGOSTAS
   ========================================================= */
@media (max-width:1000px){
  .evidencia__cols,.momentos,.contacto__cols{grid-template-columns:1fr}
  .campos--3,.campos--2{grid-template-columns:1fr}
  .fila{grid-template-columns:1fr;gap:8px}
  .campo{min-height:0;padding-left:var(--pad);padding-right:var(--pad)}
  .sello{position:static;margin:34px 0 0;width:118px}
}
@media (max-width:820px){
  .titulo{font-size:clamp(38px,11vw,74px)}
  .paso{grid-template-columns:1fr;gap:10px}
  .paso--socio .cuna{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
    left:calc(var(--pad)*-1)}
  /* En vertical el corte partiria cada linea de texto, asi que la portada se
     resuelve con una sola capa sobre papel y el corte vuelve en la cuna. */
  .portada{min-height:0}
  .capa{position:static}
  .cuerpo{padding-top:clamp(40px,8vh,80px);padding-bottom:clamp(40px,8vh,80px)}
  .capa--color,.filo{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .capa--color{animation:none}
  .boton{transition:none}
}