/* ==========================================================================
   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. */
.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.72);
}

/* The path we took: the sentence at its end is not dimmed. */
.filo-path--chosen {
  font-size: 1.8cqw;
  color: 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;
}

.values__group {
  grid-column: 1 / -1;
  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 { margin-top: 1.6cqw; }

/* 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;
}

.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); }

@media (hover: hover) and (pointer: fine) {
  .ring:hover .ring__svg circle { fill: color-mix(in srgb, var(--ring) 18%, transparent); }
  .ring:hover .ring__label { color: var(--paper); }
  .ring[aria-selected="true"]:hover .ring__svg circle { fill: var(--ring); }
}

.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.2cqw; }

  .filo-path--left::before,
  .filo-path--right::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.42em;
    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.34em;
    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; }

  .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; }
}