/* ═══ 03 · Pilares ═══════════════════════════════════════════════════════════ */

#pilares {
  --pil-hud: 0px;
  --pil-orbe: min(15vw, 25vh, 232px);
  position: relative;
}
@media (min-width: 1024px) {
  #pilares { --pil-hud: 96px; }
}

#pilares .pil-escena {
  position: relative;
  padding-block: clamp(5rem, 14vh, 9rem) clamp(4rem, 10vh, 7rem);
}

/* el agua de la escena toma el color del pilar que está al frente */
#pilares .pil-mareas,
#pilares .pil-mareas i {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#pilares .pil-mareas { z-index: 0; overflow: hidden; }
#pilares .pil-mareas i {
  opacity: 0;
  background:
    radial-gradient(48% 58% at 50% 46%, color-mix(in oklab, var(--pil) 52%, transparent), transparent 72%),
    linear-gradient(180deg, transparent, color-mix(in oklab, var(--pil) 16%, transparent) 50%, transparent);
  transition: opacity 1.1s var(--agua-ease);
  will-change: opacity;
}
#pilares .pil-mareas i:first-child { opacity: 1; }

/* ─── Flora del borde ─────────────────────────────────────────────────── */
#pilares .pil-flora {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
#pilares .pil-kelp,
#pilares .pil-alga {
  position: absolute;
  bottom: -2%;
  height: auto;
  color: #073F4B;
  --detalle: #5FE0D9;
  --brillo: #6BFFE6;
  transform-origin: 50% 100%;
  opacity: .82;
}
#pilares .pil-kelp--a { left: -1.2%; width: clamp(54px, 5.6vw, 92px); }
#pilares .pil-kelp--b { left: 3.4%; width: clamp(36px, 3.6vw, 60px); opacity: .5; filter: blur(1.5px); }
#pilares .pil-alga { right: calc(4% + var(--pil-hud)); width: clamp(80px, 8vw, 130px); opacity: .7; }

@keyframes pil-mecer {
  0%, 100% { transform: rotate(-2.4deg) skewX(1.5deg); }
  50% { transform: rotate(2.6deg) skewX(-1.8deg); }
}
@media (prefers-reduced-motion: no-preference) {
  #pilares .pil-kelp--a { animation: pil-mecer 7.5s ease-in-out infinite; }
  #pilares .pil-kelp--b { animation: pil-mecer 9.5s ease-in-out -3s infinite; }
  #pilares .pil-alga { animation: pil-mecer 8.5s ease-in-out -5s infinite; }
}

/* ─── Marco y cabecera ────────────────────────────────────────────────── */
#pilares .pil-marco {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.6rem, 4vh, 2.6rem);
}
#pilares .pil-cabeza { max-width: 40rem; }
#pilares .pil-titulo {
  margin-top: .45em;
  font-size: min(var(--t-1), calc((100vw - 2 * var(--margen)) / 7.2));
}
#pilares .pil-titulo [data-pincel] { color: var(--turquesa-luz); }
#pilares .pil-lead {
  margin-top: 1.1rem;
  max-width: 30rem;
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.4;
  color: var(--tinta-2);
  text-wrap: pretty;
}

/* ─── Insignias (las de las destacadas de Instagram) ──────────────────── */
#pilares .insignia {
  --pil-texto: #EAFBFB;
  --pil-punto: color-mix(in oklab, var(--pil) 55%, #EAFBFB);
  display: block;
  width: 100%;
}
#pilares .insignia__svg { display: block; width: 100%; height: auto; overflow: visible; }
#pilares .insignia__nombre {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 25px;
  letter-spacing: .06em;
  fill: var(--pil-texto);
}
#pilares .insignia__disco {
  color: var(--pil);
  transform-box: view-box;
  transform-origin: 120px 132px;
  transform: rotate(var(--giro, 0deg));
}
#pilares .insignia__glifo { color: #fff; }
#pilares .insignia__punto {
  fill: var(--pil-punto);
  transform-box: view-box;
  transform-origin: 120px 132px;
  transform: rotate(calc(var(--i) * 90deg));
}
#pilares .insignia__espiral { transform-box: view-box; }

@keyframes pil-giro { to { transform: rotate(360deg); } }
@keyframes pil-orbita {
  0% { transform: rotate(0deg); opacity: 1; }
  31% { opacity: 1; }
  37% { opacity: 0; }
  63% { opacity: 0; }
  69% { opacity: 1; }
  100% { transform: rotate(360deg); opacity: 1; }
}
@keyframes pil-flota { 50% { transform: translateY(-7px); } }
@media (prefers-reduced-motion: no-preference) {
  #pilares .insignia--viva { animation: pil-flota 7s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -1.3s); }
  #pilares .insignia--viva .insignia__espiral { animation: pil-giro 24s linear infinite; }
  #pilares .insignia--viva .insignia__punto { animation: pil-orbita 36s linear infinite; animation-delay: calc(var(--i) * -9s); }
}

/* burbuja con la foto del pilar, teñida de su color */
#pilares .pil-orbe__burbuja,
#pilares .pil-ficha__burbuja {
  position: absolute;
  left: 50%;
  top: 54%;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  background: color-mix(in oklab, var(--pil) 70%, #020A11);
  box-shadow:
    0 0 0 1px rgba(234, 251, 251, .28),
    0 0 0 12px color-mix(in oklab, var(--pil) 22%, transparent),
    0 30px 80px -20px rgba(2, 10, 17, .55);
}
#pilares .pil-orbe__burbuja img,
#pilares .pil-ficha__burbuja img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.85) contrast(1.05);
}
#pilares .pil-orbe__burbuja i,
#pilares .pil-ficha__burbuja i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 54%, color-mix(in oklab, var(--pil) 30%, transparent) 30%, color-mix(in oklab, var(--pil) 88%, #020A11) 100%),
    linear-gradient(200deg, rgba(234, 251, 251, .22), transparent 40%);
  mix-blend-mode: normal;
}
#pilares .pil-orbe__burbuja i::after,
#pilares .pil-ficha__burbuja i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pil);
  mix-blend-mode: color;
  opacity: .42;
}

/* ─── Fichas ──────────────────────────────────────────────────────────── */
#pilares .pil-fichas { position: relative; }
#pilares .pil-ficha {
  position: relative;
  min-width: 0;
}
#pilares .pil-ficha__texto {
  position: relative;
  padding: clamp(1.3rem, 3vh, 1.9rem) clamp(1.3rem, 2.2vw, 2rem);
  border-radius: var(--r-panel);
  background:
    linear-gradient(155deg, color-mix(in oklab, var(--pil) 34%, transparent), rgba(2, 10, 17, .34) 70%);
  border: 1px solid var(--vidrio-borde);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  backdrop-filter: blur(12px) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(234, 251, 251, .16), 0 24px 60px -30px rgba(2, 10, 17, .6);
}
#pilares .pil-ficha__texto::before {
  content: "";
  position: absolute;
  left: clamp(1.3rem, 2.2vw, 2rem);
  top: 0;
  width: 3.2rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: color-mix(in oklab, var(--pil) 75%, #EAFBFB);
}
#pilares .pil-ficha__num {
  font-size: var(--t-micro);
  letter-spacing: .2em;
  color: var(--tinta-3);
}
#pilares .pil-ficha__num span { color: var(--tinta); }
#pilares .pil-ficha__nombre {
  margin-top: .35em;
  font-size: clamp(2.1rem, min(4.2vw, 7vh), 4rem);
}
#pilares .pil-ficha__frase {
  margin-top: .7rem;
  font-size: var(--t-lead);
  line-height: 1.38;
  font-weight: 400;
  color: var(--tinta);
  text-wrap: pretty;
}
#pilares .pil-ficha__detalle {
  margin-top: .65rem;
  font-size: var(--t-cuerpo);
  line-height: 1.55;
  font-weight: 300;
  color: var(--tinta-2);
  text-wrap: pretty;
}
#pilares .pil-ficha__sd {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-top: .9rem;
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--turquesa-luz);
}
#pilares .pil-ficha__sd svg { width: 2.1rem; height: 2.1rem; color: #0D4852; }
#pilares .pil-ficha__sd-glifo { color: #5FE0D9; }
#pilares .pil-ficha__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .8rem 1.4rem;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linea);
}
#pilares .pil-ficha__meta {
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
#pilares .pil-ficha__enlace {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 500;
  color: var(--tinta);
}
#pilares .pil-ficha__enlace .ico { width: 1.1em; height: 1.1em; transition: transform .5s var(--agua-ease); }
#pilares .pil-ficha__enlace:hover .ico,
#pilares .pil-ficha__enlace:focus-visible .ico { transform: translateX(4px); }

/* medalla de la ficha (solo en el carrusel) */
#pilares .pil-ficha__medalla {
  position: relative;
  width: min(56vw, 250px);
  aspect-ratio: 1;
  margin: 0 auto clamp(1.2rem, 4vw, 2rem);
}
#pilares .pil-ficha__burbuja {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
#pilares .pil-ficha__medalla .insignia {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 66%;
  translate: -50% -50%;
}

/* ─── Índice y pistas ─────────────────────────────────────────────────── */
#pilares .pil-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
#pilares .pil-indice {
  display: flex;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
#pilares .pil-indice__punto {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .55rem .6rem;
  border-radius: var(--r-pildora);
  color: var(--tinta-3);
  font-size: var(--t-micro);
  transition: color .5s var(--agua-ease), background-color .5s var(--agua-ease);
}
#pilares .pil-indice__punto i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--pil) 60%, #EAFBFB);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--pil) 60%, transparent);
  transition: transform .5s var(--agua-ease), box-shadow .5s var(--agua-ease);
}
#pilares .pil-indice__punto .mono { letter-spacing: .12em; }
#pilares .pil-indice__nombre { display: none; }
#pilares .pil-indice__punto[aria-current="true"] { color: var(--tinta); background: var(--vidrio-fondo); }
#pilares .pil-indice__punto[aria-current="true"] i {
  transform: scale(1.25);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--pil) 35%, transparent);
}
#pilares .pil-indice__punto:hover { color: var(--tinta); }
#pilares .pil-indice__punto:focus-visible { outline: 2px solid var(--foco, var(--turquesa-luz)); outline-offset: 2px; }

#pilares .pil-pista {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tinta-3);
  white-space: nowrap;
}
#pilares .pil-pista .ico { width: 1.1em; height: 1.1em; }
#pilares .pil-pista--esc { display: none; }
#pilares .pil-flechas { display: flex; gap: .5rem; }
#pilares .pil-flecha[data-paso="-1"] .ico { transform: scaleX(-1); }
#pilares .pil-flecha:hover .ico { --mueve-x: 0; }

#pilares .pil-orbita { display: none; }

/* ─── Móvil y tableta: carrusel con snap ──────────────────────────────── */
@media (max-width: 1023px) {
  #pilares .pil-fichas {
    display: flex;
    gap: 14px;
    margin-inline: calc(-1 * var(--margen));
    padding: .4rem var(--margen) 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margen);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  #pilares .pil-fichas::-webkit-scrollbar { display: none; }
  #pilares .pil-ficha {
    flex: 0 0 min(86%, 30rem);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
  }
  #pilares .pil-ficha__texto { flex: 1; }
  #pilares .pil-ficha__nombre { font-size: clamp(2rem, 9vw, 3rem); }
  #pilares .pil-ficha__frase { font-size: 1.08rem; }
  #pilares .pil-ficha__detalle { font-size: .96rem; }
  #pilares .pil-pie { margin-top: -.6rem; }
  #pilares .pil-indice .mono { display: none; }
  #pilares .pil-indice__punto { padding: .7rem .5rem; }
  #pilares .pil-pista { display: none; }
  #pilares .pil-mareas i {
    background:
      radial-gradient(80% 40% at 50% 52%, color-mix(in oklab, var(--pil) 50%, transparent), transparent 72%);
  }
}
@media (max-width: 1023px) and (min-width: 600px) {
  #pilares .pil-pista { display: inline-flex; }
}

/* ─── Escritorio: la órbita ───────────────────────────────────────────── */
@media (min-width: 1024px) {
  #pilares .pil-flechas { display: none; }
  #pilares .pil-pista--mov { display: none; }
  #pilares .pil-pista--esc { display: inline; }
  #pilares .pil-ficha__medalla { display: none; }

  /* sin la órbita (sin JS): las fichas en dos columnas */
  #pilares:not(.pil-con-orbita) .pil-fichas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem;
    max-width: calc(100% - var(--pil-hud));
  }
  #pilares:not(.pil-con-orbita) .pil-indice { display: none; }

  #pilares.pil-con-orbita .pil-escena {
    height: 100vh;
    height: 100svh;
    padding: 0;
    overflow: clip;
  }
  #pilares.pil-con-orbita .pil-marco {
    height: 100%;
    grid-template-columns: minmax(0, 43%) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: clamp(1.5rem, 3vw, 3.5rem);
    row-gap: clamp(1rem, 2.6vh, 1.8rem);
    padding-top: calc(var(--nav-alto) + clamp(.6rem, 4vh, 2.6rem));
    padding-bottom: clamp(1.2rem, 4.5vh, 2.6rem);
    padding-right: calc(var(--margen) + var(--pil-hud));
  }
  #pilares.pil-con-orbita .pil-titulo { font-size: min(var(--t-1), 4.3vw, 7.4vh); }
  #pilares.pil-con-orbita .pil-lead { font-size: min(var(--t-lead), 2.3vh); margin-top: .8rem; }
  #pilares.pil-con-orbita .pil-fichas {
    grid-column: 1;
    display: grid;
    align-items: end;
  }
  #pilares.pil-con-orbita .pil-ficha {
    grid-area: 1 / 1;
    align-self: end;
    will-change: transform, opacity;
  }
  #pilares.pil-con-orbita .pil-ficha__texto { padding: min(1.6rem, 2.6vh) min(1.9rem, 2.2vw); }
  #pilares.pil-con-orbita .pil-ficha__nombre { font-size: min(3.4rem, 3.6vw, 6vh); }
  #pilares.pil-con-orbita .pil-ficha__frase { font-size: min(var(--t-lead), 2.35vh); margin-top: .5rem; }
  #pilares.pil-con-orbita .pil-ficha__detalle { font-size: min(var(--t-cuerpo), 1.95vh); }
  #pilares.pil-con-orbita .pil-ficha__sd { margin-top: .6rem; }
  #pilares.pil-con-orbita .pil-ficha__pie { margin-top: min(1.1rem, 1.8vh); padding-top: min(.9rem, 1.5vh); }
  #pilares.pil-con-orbita .pil-pie { grid-column: 1; }
  #pilares.pil-con-orbita .pil-indice__nombre { display: inline; }
  #pilares.pil-con-orbita .pil-indice__punto:not([aria-current="true"]) .pil-indice__nombre { display: none; }

  #pilares.pil-con-orbita .pil-orbita {
    display: block;
    position: relative;
    grid-column: 2;
    grid-row: 1 / -1;
    margin-top: calc(-1 * var(--nav-alto));
  }
  #pilares .pil-orbita__aro {
    position: absolute;
    left: calc(var(--pil-cx, 50%) - var(--pil-rx, 40%));
    top: calc(var(--pil-cy, 45%) - var(--pil-ry, 20%));
    width: calc(var(--pil-rx, 40%) * 2);
    height: calc(var(--pil-ry, 20%) * 2);
    border-radius: 50%;
    border: 1px dashed rgba(234, 251, 251, .22);
    pointer-events: none;
  }
  #pilares .pil-orbita__koru {
    position: absolute;
    left: var(--pil-cx, 50%);
    top: var(--pil-cy, 45%);
    --pincel-ancho: 13rem;
    --pincel-alto: 13rem;
    width: 13rem;
    height: 13rem;
    translate: -50% -60%;
    opacity: .3;
    pointer-events: none;
  }
  #pilares .pil-orbe {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--pil-orbe);
    aspect-ratio: 1;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    will-change: transform, opacity;
    transform-origin: 50% 50%;
  }
  #pilares .pil-orbe:focus-visible { outline: none; }
  #pilares .pil-orbe:focus-visible .insignia__disco { stroke: var(--espuma); stroke-width: 3px; }
  #pilares .pil-orbe .insignia { position: relative; z-index: 1; }
  #pilares .pil-orbe__burbuja {
    width: 190%;
    aspect-ratio: 1;
    translate: -50% -50%;
    opacity: 0;
    will-change: transform, opacity;
  }
}

/* ─── Movimiento reducido ─────────────────────────────────────────────── */
html.es-reducido #pilares .pil-mareas i { transition: none; }

@media (min-width: 1024px) and (max-height: 820px) {
  #pilares.pil-con-orbita .pil-lead { display: none; }
}