/* ============================================================================
   Base: reset, elementos, tipografia, primitivas de maquetacion.
   Sustituye a normalize.css y a la parte generica de webflow.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

/* Campton no tiene cursivas: sin esto el navegador sintetiza una oblicua fea.
   El enfasis se hace con peso, no con inclinacion. */
em, i { font-style: normal; font-weight: 600; }

strong, b { font-weight: 600; }

/* --- titulares ------------------------------------------------------------ */
h1, h2, h3, .u-display {
  font-family: var(--ff-display);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
.u-display { font-size: var(--fs-display); line-height: var(--lh-display); }
.u-lead    { font-size: var(--fs-lead); line-height: var(--lh-lead); max-width: 46ch; }

p { text-wrap: pretty; }

a { color: inherit; }
a:where(:not([class])) {
  color: var(--c-green-ink);
  text-underline-offset: .18em;
  text-decoration-thickness: from-font;
}

/* --- foco -----------------------------------------------------------------
   NINGUN color unico pasa 3:1 sobre las cinco superficies del sitio: el carbon
   falla sobre carbon (1,00:1) y el verde falla sobre blanco (2,63:1), sobre
   --c-paper-2 (2,33:1) y sobre si mismo (1,00:1). Asi que el anillo se elige
   por superficie, no por gusto:

     carbon sobre blanco       17,50:1      carbon sobre #eff2ee      16,49:1
     carbon sobre --c-green     6,65:1      verde  sobre carbon        6,65:1
     verde  sobre green-deep    3,36:1

   Por defecto CARBON, que cubre toda la mitad clara del sitio. El verde queda
   para las superficies oscuras. Y OJO: no basta con .u-on-dark, que solo esta
   en dos elementos de todo el sitio; las otras ocho superficies oscuras
   declaran su color a mano y hay que nombrarlas. -------------------------- */
:focus-visible {
  outline: var(--focus-w) solid var(--c-ink);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
.u-on-dark    :focus-visible,
.site-header  :focus-visible,
.site-footer  :focus-visible,
.hero         :focus-visible,
.who          :focus-visible,
.cta-band     :focus-visible,
.page-hero    :focus-visible,
.contact-hero :focus-visible,
.facts        :focus-visible,
.positions    :focus-visible { outline-color: var(--c-green); }
/* La banda CTA del pie es --c-green y vive dentro de .site-footer: vuelve a
   carbon. Va la ultima a proposito, misma especificidad y gana por orden. */
.footer-cta-band :focus-visible { outline-color: var(--c-ink); }

/* --- utilidades ----------------------------------------------------------- */
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.u-skip {
  position: absolute; inset-inline-start: var(--s-4); inset-block-start: -100%;
  z-index: 100; background: var(--c-ink); color: var(--c-on-dark);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-2);
}
.u-skip:focus { inset-block-start: var(--s-3); }

/* --- maquetacion ---------------------------------------------------------- */
.u-page {
  width: min(100% - var(--gutter) * 2, var(--w-page));
  margin-inline: auto;
}
.u-prose { max-width: var(--w-prose); }
.u-section { padding-block: var(--section-y); }

/* ============================================================================
   La diagonal. UNA primitiva, UN angulo en todos los cortes HORIZONTALES:
   3,434 grados medidos de 320 a 1920px. El corte de .plane--split es otra
   cosa y no puede ser ese angulo: se mide contra el ALTO de la seccion, que
   depende del contenido, asi que va de 5,22 grados a 1024px a 6,53 a 1440.
   Es correcto, pero no lo llames "un angulo".

   Reglas, y no son negociables:
     1. La diagonal nunca va sobre el elemento que contiene texto. Siempre sobre
        un .plane hermano, que es decorativo y va aria-hidden.
     2. El contenido va por encima con position:relative y z-index >= 1, con
        --diag-pad de holgura por el lado cortado. El token vive en tokens.css
        y es el que se aplica: no se escribe la holgura a mano.
     3. Una diagonal por altura de pantalla, como maximo.
     4. clip-path crea bloque contenedor para descendientes position:fixed.
        Nada fijo puede vivir dentro de una seccion con .plane. La cabecera es
        hermana de todas las secciones, asi que se cumple por estructura.
   ========================================================================== */
.plane {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--plane-fill, var(--c-ink));
  clip-path: var(--plane-shape);
  pointer-events: none;
}
.plane--green { --plane-fill: var(--c-green); }
.plane--deep  { --plane-fill: var(--c-green-deep); }
.plane--ink   { --plane-fill: var(--c-ink); }
.plane--paper { --plane-fill: var(--c-paper); }

/* Los cuatro cortes horizontales + la banda. Mismo angulo en todos. */
.plane--bottom-r { --plane-shape: polygon(0 0, 100% 0, 100% calc(100% - var(--diag)), 0 100%); }
.plane--top-r    { --plane-shape: polygon(0 var(--diag), 100% 0, 100% 100%, 0 100%); }
.plane--top-l    { --plane-shape: polygon(0 0, 100% var(--diag), 100% 100%, 0 100%); }

/* Las dos cunas complementarias de --band. Se usan cuando el TEXTO va encima del
   plano: asi el color de fondo real lo lleva la seccion y las cunas solo recortan
   las esquinas. Con el plano al reves, el ancestro del texto es del color
   equivocado, y eso no es solo cosmetico: cualquier auditor de contraste lee el
   fondo por los ancestros, y si el plano no llegara a pintar el texto quedaria
   oscuro sobre oscuro. */
.plane--wedge-br { --plane-shape: polygon(0 100%, 100% calc(100% - var(--diag)), 100% 100%); }
.plane--wedge-tr { --plane-shape: polygon(0 0, 100% 0, 100% var(--diag)); }
.plane--wedge-bl { --plane-shape: polygon(0 calc(100% - var(--diag)), 0 100%, 100% 100%); }

/* El corte casi vertical del reparto a dos planos. Solo existe en escritorio:
   por debajo de 64rem los planos se apilan y el corte vuelve a ser horizontal. */
@media (min-width: 64rem) {
  .plane--split { --plane-shape: polygon(0 0, calc(var(--split, 55%) + var(--diag) / 2) 0, calc(var(--split, 55%) - var(--diag) / 2) 100%, 0 100%); }
}

/* Seccion que apila plano + foto + contenido. */
.layered { position: relative; isolation: isolate; overflow: clip; }
.layered > .layer-content { position: relative; z-index: 2; }
.layer-media { position: absolute; inset: 0; z-index: 0; }
.layer-media img { width: 100%; height: 100%; object-fit: cover; }
.layered > .plane { z-index: 1; }

/* ============================================================================
   Tratamiento fotografico. Va en CSS, no horneado en los JPEG: se ajusta en una
   linea y se aplica igual a las fotos que mande el cliente despues.
   Sombras hacia el carbon + 10% de verde en medios tonos = el look del folleto.
   Tope de 2 imagenes filtradas por pantalla (filter fuerza capa de composicion).
   ========================================================================== */
.photo { position: relative; overflow: clip; }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.04); }
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgb(27 25 25 / .38), rgb(67 181 86 / .10) 58%, transparent);
  pointer-events: none;
}

/* Superficies oscuras: un solo sitio donde se define el texto sobre oscuro. */
.u-on-dark { background: var(--c-ink); color: var(--c-on-dark); }
.u-on-dark p { color: var(--c-on-dark-2); }