/* ==========================================================================
   Filosofía — five scenes

   This page is built the way the home page is built, not the way the
   document pages are: one 16:9 stage per section, everything inside placed
   in cqw, no stacked glass panels. Only this page loads this file.
   ========================================================================== */

:root {
  /* The brand's deep blue reads at 2.9:1 against the gradient, which is
     under the 3:1 a control's own boundary needs. The large rings — and
     only those — take a lighter cut of the same hue. Bullets, stepper and
     disclosure rows keep #3285C2. */
  --blue-lg: #4A97D0;
}

/* --------------------------------------------------------------------------
   Type in a scene: a statement, and what follows it
   -------------------------------------------------------------------------- */

.heading--long { font-size: 3.6cqw; }

.filo-block { position: absolute; z-index: 4; }

/* Display scale: the claim is the thing on the screen, not a paragraph. */
.filo-say {
  margin: 2.2cqw 0 0;
  font-weight: 200;
  font-size: 2.9cqw;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--paper);
  text-wrap: pretty;
}

.filo-say--sm { font-size: 2.2cqw; }

.filo-then {
  margin: 1.6cqw 0 0;
  font-weight: 300;
  font-size: 1.55cqw;
  letter-spacing: 0.03em;
  line-height: 1.55;
  color: rgba(242,239,233,0.82);
  text-wrap: pretty;
}

.accent { color: var(--lblue); font-style: normal; }
.lead-in { font-weight: 500; color: var(--paper); }

/* One sentence at the end of one path. The two we did not take sit at 0.62
   rather than the 0.72 they used to: 4.60:1 on this scene's backdrop, which
   is as far down as a sentence someone still has to read can go. The gap to
   the chosen path's full paper does the work the labels started. */
.filo-path {
  position: absolute;
  z-index: 4;
  margin: 0;
  font-weight: 300;
  font-size: 1.55cqw;
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: rgba(242,239,233,0.62);
}

/* The path we took: brighter and a step larger, so which one we chose is
   legible before any of the three sentences is read. */
.filo-path--chosen {
  font-size: 2.05cqw;
  color: var(--paper);
}

/* The anchor above each sentence, in the small uppercase letterspaced style
   the group captions use, in its own path's colour.

   AMENDS THE STANDING RULE "lighten deep blue for large rings only": plain
   --blue measures 2.62:1 at this size on this backdrop, which is not a label
   anyone can read. --blue-lg is 3.29:1 and is still unmistakably the deep
   branch beside --lblue's 6.62:1; anything lighter stops being deep blue and
   starts being the other path's colour. */
.filo-path__label {
  display: block;
  margin-bottom: 0.5em;
  font-size: 0.68em;
  font-weight: 400;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--path);
}

.filo-path--left   { --path: var(--blue-lg); }
.filo-path--right  { --path: var(--lblue); }
.filo-path--chosen { --path: var(--paper); }

/* Portrait only: the four strokes of the band, small, standing in for the
   path the third sentence sits at the end of. */
.filo-band { display: none; }

.filo-citation {
  position: absolute;
  z-index: 4;
  margin: 0;
  font-weight: 300;
  font-size: 1.05cqw;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: rgba(242,239,233,0.6);
}

/* --------------------------------------------------------------------------
   Scene furniture: figures and a workstation, placed for this page rather
   than for the home page's seven scenes.
   -------------------------------------------------------------------------- */

.fig {
  position: absolute;
  left: var(--x);
  top: 39.86cqw;
  width: 4.19cqw;
  height: 9cqw;
  z-index: 3;
  display: block;
  overflow: visible;
}

/* Stepped back: smaller, higher, and quieter. */
.fig--back {
  top: 36.6cqw;
  width: 3.1cqw;
  height: 6.66cqw;
  opacity: 0.72;
}

/* A region of them. Slim, because the band threads the gap between the
   fourth and the fifth and needs the room. */
.fig--small {
  top: 41.9cqw;
  width: 2.3cqw;
  height: 4.95cqw;
  opacity: 0.82;
}

.workstation {
  position: absolute;
  left: var(--x);
  top: 40.39cqw;
  width: 19.5cqw;
  height: 9.3cqw;
  z-index: 3;
  display: block;
}

.floor--wide { left: 3cqw; right: 3cqw; }

/* The two ways not taken sit behind the band that was. */
.ribbon--branches { z-index: 0; }

/* --------------------------------------------------------------------------
   Scene 1 · MISIÓN
   -------------------------------------------------------------------------- */

.filo-block--mision { left: 26cqw; top: 9.4cqw; width: 40cqw; }

/* --------------------------------------------------------------------------
   Scene 2 · VISIÓN
   -------------------------------------------------------------------------- */

.filo-block--vision { left: 5cqw; top: 9.4cqw; width: 50cqw; }

/* Two lines, not three: the thread crosses the floor below this block. */
.filo-block--vision .filo-say { font-size: 2.6cqw; }

/* --------------------------------------------------------------------------
   Scene 3 · VALORES
   -------------------------------------------------------------------------- */

.values__heading { position: absolute; left: 12cqw; top: 7.6cqw; z-index: 4; }

.values__composition {
  position: absolute;
  left: 12cqw;
  top: 17.4cqw;
  width: 42cqw;
  z-index: 4;

  display: grid;
  grid-template-columns: repeat(6, 1fr);
  row-gap: 1.1cqw;
  align-items: start;
}

/* The rows are named rather than left to auto-placement: the cue takes an
   explicit row 1, and an explicitly placed item is laid out before the auto
   ones, which would otherwise push both captions a row further down and off
   their own ring groups. */
.values__group {
  grid-column: 1 / -1;
  grid-row: 1;
  /* Hug the caption rather than stretch across the row, so the cue can share
     the first row with it without their boxes ever meeting. */
  justify-self: start;
  margin: 0;
  padding-left: 1cqw;
  font-weight: 400;
  font-size: 1.05cqw;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242,239,233,0.62);
}

.values__group--support { grid-row: 3; margin-top: 1.6cqw; }

/* The composition's instruction. Same metrics as the group captions, so it
   belongs to the same family, but drawn in the light blue every interactive
   thing on the site is drawn in — which is what tells it apart from them.

   It shares the composition's first row with "Valores centrales" and sits at
   the far end of it. That is the one position that satisfies both halves of
   the brief: inside the composition rather than under the heading, and never
   above a group caption, so it cannot be read as a title for one. It also
   costs the composition no height, and there is none to spare — the support
   rings already end 1.61cqw from the bottom of the stage. */
.values__cue {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: end;
  margin: 0;
  padding-right: 0.5cqw;
  font-weight: 400;
  font-size: 1.05cqw;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lblue);
}

/* The tab list lays nothing out: its buttons take their places in the grid
   above, so the rows interleave with their captions while the list holds
   none but tabs. */
.values__rings { display: contents; }

.ring:nth-of-type(1) { grid-column: 1 / span 2; grid-row: 2; }
.ring:nth-of-type(2) { grid-column: 3 / span 2; grid-row: 2; }
.ring:nth-of-type(3) { grid-column: 5 / span 2; grid-row: 2; }
.ring:nth-of-type(4) { grid-column: 2 / span 2; grid-row: 4; }
.ring:nth-of-type(5) { grid-column: 4 / span 2; grid-row: 4; }

.ring {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0.6cqw 0 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1cqw;
  border-radius: 1cqw;
}

.ring--core    { --d: 8.2cqw; }
.ring--support { --d: 6.5cqw; }

.ring__svg {
  width: var(--d);
  height: var(--d);
  display: block;
  overflow: visible;
}

/* The logo mark's own proportion — a ring, not a bullet. */
.ring__svg circle {
  fill: none;
  stroke: var(--ring);
  stroke-width: 12;
  transition: fill 200ms ease, stroke 200ms ease, stroke-width 200ms ease;
}

.ring[aria-selected="true"] .ring__svg circle { fill: var(--ring); }

.ring__label {
  max-width: 13cqw;
  font-weight: 300;
  font-size: 1.8cqw;
  letter-spacing: 0.03em;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
  color: rgba(242,239,233,0.7);
  transition: color 200ms ease;
}

.ring[aria-selected="true"] .ring__label { color: var(--paper); }

/* Unmistakable rather than subtle: on an unselected ring the stroke brightens
   toward white and thickens by a quarter, the disc fills to nearly a third,
   and the label comes up to full paper. Three changes at once, so the ring
   reads as a control the moment the pointer reaches it. */
@media (hover: hover) and (pointer: fine) {
  .ring:hover .ring__svg circle {
    fill: color-mix(in srgb, var(--ring) 32%, transparent);
    stroke: color-mix(in srgb, var(--ring) 72%, #fff);
    stroke-width: 15;
  }
  .ring:hover .ring__label { color: var(--paper); }

  /* The selected ring is already at full fill and full label; hovering it
     must not suggest a third state, so its stroke stays where it was. */
  .ring[aria-selected="true"]:hover .ring__svg circle {
    fill: var(--ring);
    stroke: var(--ring);
    stroke-width: 12;
  }
}

.ring:focus-visible {
  outline: 2px solid rgba(169,212,236,0.75);
  outline-offset: 0.5cqw;
}

.values__reveal {
  position: absolute;
  left: 70cqw;
  top: 21cqw;
  width: 26cqw;
  z-index: 4;
}

.value { margin: 0; }

.value__text {
  position: relative;
  margin: 3.4cqw 0 0;
  font-weight: 300;
  font-size: 1.7cqw;
  letter-spacing: 0.02em;
  line-height: 1.55;
  color: rgba(242,239,233,0.88);
}

/* The rule runs back out of the text toward the rings, across the corridor
   the ribbon comes down — a thread arriving, rather than a tick mark. */
.value__text::before {
  content: '';
  position: absolute;
  left: -9cqw;
  top: -2.4cqw;
  width: 15cqw;
  height: 0.3cqw;
  border-radius: 0.15cqw;
  background: var(--ring);
}

.values--live .value[hidden] { display: none; }
.values--live .value { animation: value-in 200ms ease both; }

@keyframes value-in {
  from { opacity: 0; transform: translateY(0.4cqw); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Scene 4 · CÓMO ELEGIMOS TRABAJAR
   -------------------------------------------------------------------------- */

.filo-block--elegir { left: 5cqw; top: 7cqw; width: 40cqw; }

/* One sentence at the end of each path, and nothing else in the scene. */
.filo-path--left   { left: 4cqw;  top: 24cqw; width: 24cqw; }
.filo-path--right  { left: 70cqw; top: 24cqw; width: 26cqw; }
.filo-path--chosen { left: 4cqw;  top: 38cqw; width: 34cqw; }

/* --------------------------------------------------------------------------
   Scene 5 · LA ELECCIÓN

   What choosing the third way means, at the size the rest of the page reads
   at. One column, left, with the band coming down to the right of it.
   -------------------------------------------------------------------------- */

.filo-block--eleccion { left: 5cqw; top: 13cqw; width: 42cqw; }

.filo-block--eleccion .filo-say--sm { margin-top: 0; }

/* --------------------------------------------------------------------------
   Scene 5 · LA BASE TEÓRICA
   -------------------------------------------------------------------------- */

.filo-block--base { left: 56cqw; top: 24cqw; width: 40cqw; }
.filo-block--base .filo-then { font-size: 1.45cqw; }

/* The last thing on the page is a way to the form, not the citation. */
.filo-next {
  position: absolute;
  z-index: 4;
  left: 6cqw;
  top: 53.4cqw;
  width: 48cqw;
  margin: 0;
  font-weight: 400;
  font-size: 1.3cqw;
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: rgba(169,212,236,0.85);
}

.disciplines {
  position: absolute;
  left: 6cqw;
  top: 18cqw;
  width: 48cqw;
  margin: 0;
  z-index: 4;
}

/* inline-flex so the label's box is the label, not the figure's width —
   the band comes down the empty half of this row. */
/* The box hugs the label and sits at the right: the band crosses this figure
   from upper right to lower left on its way into the amber bar, and passes
   below this row rather than through it. */
.disciplines__key {
  display: flex;
  width: fit-content;
  margin: 0 0 0.8cqw auto;
  align-items: center;
  gap: 0.6cqw;
  font-weight: 400;
  font-size: 1.05cqw;
  letter-spacing: 0.1em;
  color: rgba(242,239,233,0.78);
}

.disciplines__dash {
  width: 2.6cqw;
  border-top: 0.16cqw dashed rgba(242,239,233,0.78);
}

.disciplines__chart { display: block; width: 100%; height: auto; }

.disciplines__labels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8cqw;
  margin: 0.9cqw 0 0;
  padding: 0;
  list-style: none;
}

.disciplines__labels li {
  text-align: center;
  font-weight: 400;
  font-size: 1.05cqw;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: rgba(242,239,233,0.78);
}

.filo-citation { left: 6cqw; top: 49cqw; width: 48cqw; }

/* --------------------------------------------------------------------------
   Portrait

   The stage stops being 16:9 and takes the screen, as it does on the home
   page. Everything reflows down one column; the composition keeps its shape.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) and (orientation: portrait) {

  .heading--long { font-size: 7.6cqw; }

  .filo-say { margin-top: 4cqw; font-size: 6.4cqw; line-height: 1.25; }
  .filo-say--sm { font-size: 5cqw; }
  .filo-then { margin-top: 3.4cqw; font-size: 3.9cqw; line-height: 1.6; }

  /* The portrait ribbon runs in a fixed lane, 2.76cqw to 9.54cqw — the four
     strokes' own ink, edge to edge. These scenes have no glass for it to
     pass behind, so every text block starts clear of it at 12cqw. */
  .filo-block--mision { left: 12cqw; right: 5cqw; top: 20cqw; width: auto; }
  .filo-block--vision { left: 12cqw; right: 5cqw; top: 20cqw; width: auto; }
  .filo-block--elegir { left: 12cqw; right: 5cqw; top: 18cqw; width: auto; }
  .filo-block--base   { left: 12cqw; right: 5cqw; top: 18cqw; width: auto; }
  .filo-next { left: 12cqw; right: 5cqw; top: 164cqw; width: auto; font-size: 3.4cqw; }

  /* The figures stand where the portrait home page stands them: a band
     across the lower third, clear of the text above. */
  .fig {
    top: auto;
    bottom: 10cqw;
    width: 13cqw;
    height: 28cqw;
  }

  .fig--back { bottom: 20cqw; width: 9cqw; height: 19.4cqw; }
  .fig--small { bottom: 12cqw; width: 7cqw; height: 15cqw; }

  .workstation { top: auto; bottom: 8cqw; left: 30cqw; width: 46cqw; height: 22cqw; }

  .floor, .floor--wide { top: auto; bottom: 9.4cqw; left: 4cqw; right: 4cqw; height: 0.5cqw; }

  /* Only five of the eleven stay: at this width the rest are mush. */
  .fig--small:nth-of-type(2n) { display: none; }

  /* On a phone the three paths collapse into one straight run, so the
     sentences that sat at their ends have nothing to sit at. They become a
     stack at one pitch, each carrying its own path's mark: the two we did
     not take as rings in their colours, the third as the band itself. */
  .filo-path {
    position: absolute;
    left: 12cqw;
    right: 5cqw;
    width: auto;
    padding-left: 2em;
    font-size: 3.9cqw;
    line-height: 1.5;
  }

  .filo-path--left   { top: 76cqw; }
  .filo-path--right  { top: 100cqw; }
  .filo-path--chosen { top: 124cqw; font-size: 4.6cqw; }

  /* The markers stay as they are — one per path, no second mark added beside
     the label. They only move up, because the first line of each block is now
     the label rather than the sentence: the label's line box is 0.68em x 1.3,
     and each marker is centred on that instead of on body text. */
  .filo-path--left::before,
  .filo-path--right::before {
    content: '';
    position: absolute;
    left: 0;
    top: -0.12em;
    width: 0.72em;
    height: 0.72em;
    border: 0.2em solid var(--mark);
    border-radius: 50%;
  }

  .filo-path--left  { --mark: var(--blue); }
  .filo-path--right { --mark: var(--lblue); }

  /* The band's own four strokes, in their own widths and order. */
  .filo-band {
    position: absolute;
    left: 0;
    top: -0.04em;
    display: flex;
    align-items: flex-end;
    gap: 0.26em;
    height: 0.96em;
  }

  .filo-band i { display: block; height: 100%; border-radius: 0.5em; }
  .filo-band i:nth-child(1) { width: 0.17em; background: var(--yellow); }
  .filo-band i:nth-child(2) { width: 0.15em; background: var(--amber); }
  .filo-band i:nth-child(3) { width: 0.19em; background: var(--blue); }
  .filo-band i:nth-child(4) { width: 0.14em; background: var(--lblue); }

  /* RULE — on portrait, a scene whose content is prose only (no figures, no
     composition, no diagram) takes the glass panel the home page's scenes
     use, and its text returns to the full 5cqw measure. The ribbon then
     passes behind it at low opacity, as it does there, instead of being
     fenced out of a 12cqw gutter.

     The panel is what earns the full measure: without it, prose on bare
     gradient has to stay clear of the ribbon's lane (2.76cqw to 9.54cqw).

     Today this catches ELECCIÓN and nothing else: every other scene on this
     page carries figures, the ring composition or the bar diagram. */
  .filo-block--eleccion {
    left: 5cqw;
    right: 5cqw;
    top: 22cqw;
    width: auto;
    padding: 6cqw 5.5cqw 7cqw;
    border-radius: 3.5cqw;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.055);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1.4cqw 4cqw rgba(0,0,0,0.22);
  }

  /* --- valores ---------------------------------------------------------- */

  .values__heading { left: 12cqw; right: 5cqw; top: 17.5cqw; }

  .values__composition {
    left: 12cqw;
    right: 5cqw;
    top: 42cqw;
    width: auto;
    row-gap: 2.4cqw;
  }

  .values__group { padding-left: 2cqw; font-size: 3.1cqw; letter-spacing: 0.14em; }
  .values__group--support { margin-top: 3.4cqw; }
  .values__cue { padding-right: 1cqw; font-size: 3.1cqw; letter-spacing: 0.14em; }

  .ring { gap: 2.2cqw; padding-top: 1cqw; }
  .ring--core    { --d: 18cqw; }
  .ring--support { --d: 15cqw; }

  .ring__label { max-width: 28cqw; font-size: 3.5cqw; line-height: 1.3; }
  .ring:focus-visible { outline-offset: 1cqw; }

  .values__reveal { left: 12cqw; right: 5cqw; top: 130cqw; width: auto; }

  .value__text { margin-top: 4cqw; font-size: 4.1cqw; line-height: 1.5; }

  .value__text::before {
    left: 0;
    top: -2.6cqw;
    width: 14cqw;
    height: 0.9cqw;
    border-radius: 0.45cqw;
  }

  /* --- la base teórica --------------------------------------------------- */

  /* The prose above runs long in portrait, so the drawing starts below it
     and takes a narrower measure to leave the citation room. */
  .filo-block--base { top: 16cqw; }
  .filo-block--base .filo-then { font-size: 3.1cqw; }

  .disciplines { left: 12cqw; right: 16cqw; top: 90cqw; width: auto; }
  .disciplines__key { font-size: 3.1cqw; gap: 1.6cqw; margin-bottom: 2.4cqw; }
  .disciplines__dash { width: 7cqw; border-top-width: 0.5cqw; }
  .disciplines__labels { gap: 2cqw; margin-top: 2.6cqw; }
  .disciplines__labels li { font-size: 2.6cqw; letter-spacing: 0.08em; }

  /* The drawing renders at about a third here; its strokes go back to the
     weight the eye expects. */
  .disciplines__chart line { stroke-width: 9; }
  .disciplines__chart line[stroke-dasharray] { stroke-dasharray: 34 22; }
  .disciplines__chart path[stroke] { stroke-width: 13; }

  .filo-citation { left: 12cqw; right: 5cqw; top: 148cqw; width: auto; font-size: 2.9cqw; }
}

/* Opening a value is a change of state, not a performance. */
@media (prefers-reduced-motion: reduce) {
  .ring__svg circle,
  .ring__label { transition: none; }

  .values--live .value { animation: none; }
}