/* PROT INN · página de sostenibilidad.
   Archivo propio: solo lo cargan /sostenibilidad/ y /en/sustainability/.
   Las otras 42 páginas no descargan nada de esto.

   Los cuatro gráficos son HTML y CSS, no imágenes ni librerías. Motivo: la
   página va a leerse desde el QR de un stand, con la red del recinto y en un
   teléfono. Un gráfico que es una barra con `width` se dibuja al instante,
   se lee con lector de pantalla, se puede seleccionar y copiar, y sigue
   diciendo la verdad si el JavaScript no llega. Una imagen no hace nada de
   eso y un Chart.js son 60 KB para dibujar cuatro rectángulos. */

/* ── El hero ────────────────────────────────────────────────────────────── */

.sos-hero { padding-block: calc(var(--head-h) + clamp(3.5rem, 9vw, 7rem)) clamp(2rem, 5vw, 3.5rem); }
.sos-hero h1 { font-size: clamp(2.6rem, 8vw, 6.4rem); }
.sos-lede { font-size: clamp(1.1rem, 1.6vw, 1.42rem); max-width: 34ch; margin-top: 1.4rem; color: var(--black-60); }

/* ── Estructura de sección ──────────────────────────────────────────────── */

.sos-sec { padding-block: clamp(3rem, 7vw, 5.5rem); }
.sos-sec h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); max-width: 20ch; }
.sos-sec .kicker { color: var(--persimmon); }
.sos-sec > .wrap > .lede { margin-top: clamp(1.4rem, 3vw, 2rem); max-width: 60ch; }
.sos-greige { background: var(--greige); }

/* Texto a la izquierda, gráfico a la derecha. En móvil el gráfico va debajo,
   que es donde tiene sentido: primero el argumento, después el dato. */
.sos-cols {
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, .85fr);
  align-items: start;
}
@media (max-width: 900px) { .sos-cols { grid-template-columns: 1fr; } }
.sos-txt { display: grid; gap: 1.1rem; }
.sos-txt .lede { max-width: 52ch; }
.sos-txt b { color: var(--black); font-weight: 700; }

/* ── Gráfico de barras ──────────────────────────────────────────────────── */

.sos-graf { margin: 0; padding: clamp(1.3rem, 2.6vw, 2rem); background: var(--white); border: 1px solid var(--hair); }
.sos-greige .sos-graf { background: var(--white); border-color: transparent; }
.sos-graf > figcaption {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--black-40); margin-bottom: 1.4rem;
}

.gb { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.gb li { display: grid; grid-template-columns: 1fr auto; gap: .45rem .8rem; align-items: baseline; }
.gb-et { font-size: .9rem; font-weight: 600; }
.gb-val { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.gb-barra { grid-column: 1 / -1; display: block; height: 14px; background: var(--greige-2); }
.sos-greige .gb-barra { background: var(--greige); }
.gb-barra i { display: block; height: 100%; width: var(--w, 100%); background: var(--black-40); }
.gb-nos .gb-barra i { background: var(--persimmon); }
.gb-nos .gb-et, .gb-nos .gb-val { color: var(--persimmon); }

.sos-pie { margin: 1.4rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--black-40); max-width: 52ch; }

/* Las dos cifras del bloque del precio. */
.sos-datos {
  list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.4rem 2rem;
  max-width: 780px;
}
.sos-datos li { border-top: 2px solid var(--black); padding-top: .8rem; }
/* Los selectores de etiqueta son de HIJO DIRECTO a propósito. Con `.sos-datos
   span` a secas también caía el <span data-cuenta> que vive dentro del <b>, y
   la cifra se dibujaba a 9,6 px: quedaba una raya con un texto diminuto y sin
   número. Los contadores nunca deben heredar estilo de etiqueta. */
[data-cuenta] { display: inline; font: inherit; letter-spacing: inherit; color: inherit; text-transform: none; }
.sos-datos b {
  display: block; font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 800;
  letter-spacing: -.045em; line-height: .9; font-variant-numeric: tabular-nums;
}
.sos-datos > li > span {
  display: block; margin-top: .5rem; font-family: var(--mono); font-size: .6rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--black-40);
}

/* ── El contador grande de las 130.000 hectáreas ────────────────────────── */

.sos-contador { margin: clamp(2.4rem, 5vw, 3.5rem) 0; padding: 0; }
.sos-contador b {
  display: block; font-size: clamp(3.4rem, 15vw, 11rem); font-weight: 800;
  letter-spacing: -.055em; line-height: .84; font-variant-numeric: tabular-nums;
}
.sos-contador figcaption {
  margin-top: .9rem; max-width: 34ch;
  font-family: var(--mono); font-size: .64rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--black-40); line-height: 1.7;
}
.sos-eq {
  margin: 1.4rem 0 0; max-width: 30ch;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 700; color: var(--persimmon);
}

/* ── El gráfico ancho de las aves ───────────────────────────────────────── */

.sos-graf-ancho { max-width: 980px; }
.ga { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: center; }
@media (max-width: 720px) { .ga { grid-template-columns: 1fr; gap: 1.8rem; } }
.ga-n b, .ga-p b {
  display: block; font-weight: 800; letter-spacing: -.045em; line-height: .9;
  font-variant-numeric: tabular-nums;
}
.ga-n b { font-size: clamp(3rem, 8vw, 5.4rem); }
.ga-p b { font-size: clamp(2rem, 4.5vw, 3rem); margin-top: .8rem; }
.ga-n > span, .ga-p > span {
  display: block; margin-top: .5rem; max-width: 26ch;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--black-40); line-height: 1.7;
}
.ga-barra { display: block; height: 26px; background: var(--greige-2); }
.ga-barra i { display: block; height: 100%; width: var(--w, 100%); background: var(--persimmon); }

/* ── Los tres hechos de la alulosa ──────────────────────────────────────── */

.sos-hechos { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .55rem; }
.sos-hechos li {
  position: relative; padding-left: 1.5rem;
  font-size: .95rem; font-weight: 600; line-height: 1.35;
}
.sos-hechos li::before {
  content: "→"; position: absolute; left: 0; top: 0;
  color: var(--persimmon); font-weight: 700;
}

.sos-cierre {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0; max-width: 24ch;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
}

/* ── El formulario B2B ──────────────────────────────────────────────────── */

.sos-b2b { background: var(--black); color: #fff; padding-block: clamp(3rem, 7vw, 5.5rem); }
.sos-b2b h2 { font-size: clamp(1.9rem, 4.2vw, 3.2rem); max-width: 16ch; }
.sos-b2b .lede { color: rgba(255, 255, 255, .62); }
.sos-b2b .sos-cols { align-items: center; }

.sos-form { display: grid; gap: .9rem; }
.sos-form label {
  display: grid; gap: .45rem;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.sos-form input, .sos-form textarea {
  font-family: var(--sans); font-size: 1rem; font-weight: 600; color: #fff;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 0; padding: .78rem .85rem; width: 100%; min-width: 0; resize: vertical;
}
.sos-form input:focus-visible, .sos-form textarea:focus-visible { outline: 3px solid var(--persimmon); outline-offset: 1px; }
.sos-form .btn { margin-top: .4rem; justify-self: start; }
.sos-form .btn[disabled] { opacity: .55; cursor: progress; }

/* La trampa para robots. Ni `display:none` ni `hidden`: los rellenadores
   automáticos saltan esos y entonces la trampa no atrapa nada. Se saca de la
   pantalla y se le quita del orden de tabulación y del árbol de accesibilidad,
   que es lo que ve una persona con lector de pantalla. */
.sos-trampa { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

.sos-estado { margin: .2rem 0 0; font-size: .92rem; line-height: 1.45; min-height: 1.4em; }
.sos-estado.ok { color: var(--ember); font-weight: 700; }
.sos-estado.mal { color: #FF9B7A; font-weight: 700; }

/* ── Las fuentes ────────────────────────────────────────────────────────── */

.sos-fuentes { padding-block: clamp(2.6rem, 6vw, 4.5rem); background: var(--greige); }
.sos-fuentes h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.sos-fuentes ul { list-style: none; margin: clamp(1.4rem, 3vw, 2rem) 0 0; padding: 0; display: grid; gap: .7rem; max-width: 900px; }
.sos-fuentes li { border-top: 1px solid var(--hair); padding-top: .7rem; }
.sos-fuentes a { font-size: .92rem; color: var(--black-60); text-decoration: none; line-height: 1.45; display: block; }
.sos-fuentes a:hover { color: var(--persimmon); text-decoration: underline; }

/* ── Movimiento ─────────────────────────────────────────────────────────── */

/* Todo lo de abajo está bajo `.js`: sin JavaScript el gráfico se ve entero y
   quieto, que es el estado correcto. La animación es un lujo, no el modo de
   funcionar. */
.js [data-graf] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.7,.25,1); }
.js [data-graf].in { opacity: 1; transform: none; }
.js [data-graf] .gb-barra i, .js [data-graf] .ga-barra i {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.22,.7,.25,1) .25s;
}
.js [data-graf].in .gb-barra i, .js [data-graf].in .ga-barra i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-graf], .js [data-graf].in { opacity: 1 !important; transform: none !important; }
  .js [data-graf] .gb-barra i, .js [data-graf] .ga-barra i { transform: none !important; transition: none !important; }
}

/* Sección sin gráfico: el texto a dos columnas en vez de una columna estrecha
   con media pantalla en blanco al lado. */
.sos-dos {
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
  display: grid; gap: clamp(1.2rem, 3.5vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  align-items: start;
}
.sos-dos .lede { max-width: 46ch; }

/* ── Fotos ──────────────────────────────────────────────────────────────── */

/* Solo existen si la foto se ha subido. Mientras no exista, la sección se
   compone sin ella y no queda hueco: ver el comentario de fotoOpcional() en
   build.js. */
.sos-foto { margin: 0; }
.sos-foto-ancha { margin-block: clamp(2rem, 5vw, 3.5rem); }
.sos-foto figcaption {
  margin-top: .8rem; max-width: 46ch;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--black-40); line-height: 1.7;
}
.sos-greige .sos-foto figcaption { color: var(--black-60); }