/* ═══ 09 · Guardianes ═══════════════════════════════════════════════════════ */

#guardianes {
  --gua-hud: 0px;
  --gua-flora: #0E3345;
  --gua-detalle: #2BB8B2;
  --gua-brillo: #6BFFE6;
  position: relative;
  padding-block: clamp(6rem, 16vh, 11rem) clamp(5rem, 12vh, 9rem);
}
@media (min-width: 1024px) {
  #guardianes { --gua-hud: 110px; }
}
#guardianes .contenedor { padding-right: calc(var(--margen) + var(--gua-hud)); }

/* ─── Orillas: algas que se mecen ─────────────────────────────────────── */
#guardianes .gua-orilla {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(90px, 12vw, 200px);
  pointer-events: none;
  z-index: 0;
}
#guardianes .gua-orilla--izq { left: 0; }
#guardianes .gua-orilla--der { right: 0; }
#guardianes .gua-alga {
  position: absolute;
  bottom: 0;
  height: auto;
  color: var(--gua-flora);
  --detalle: var(--gua-detalle);
  --brillo: var(--gua-brillo);
  transform-origin: 50% 100%;
  rotate: 0deg;
  opacity: .9;
}
#guardianes .gua-alga--kelp { top: 22%; bottom: auto; left: -24px; width: clamp(70px, 7vw, 110px); opacity: .55; }
#guardianes .gua-alga--a { top: 60vh; bottom: auto; left: 10px; width: clamp(60px, 6vw, 96px); }
#guardianes .gua-alga--b { top: calc(60vh + 50px); bottom: auto; left: clamp(40px, 5vw, 80px); width: clamp(64px, 6.5vw, 104px); opacity: .7; }
#guardianes .gua-alga--c { top: 46%; bottom: auto; right: 6px; width: clamp(56px, 5.6vw, 90px); scale: -1 1; opacity: .7; }
#guardianes .gua-alga--kelp2 { top: 58%; bottom: auto; right: -30px; width: clamp(60px, 6vw, 96px); opacity: .45; scale: -1 1; }
@media (min-width: 1024px) {
  /* el HUD vive a la derecha: esas algas bajan por debajo de él */
  #guardianes .gua-orilla--der { right: 0; width: 120px; }
}

@keyframes gua-mecer {
  0%, 100% { rotate: -3deg; }
  50% { rotate: 3.5deg; }
}
@media (prefers-reduced-motion: no-preference) {
  #guardianes .gua-alga { animation: gua-mecer 7s ease-in-out infinite; }
  #guardianes .gua-alga--kelp { animation-duration: 9s; animation-delay: -2s; }
  #guardianes .gua-alga--b { animation-duration: 6s; animation-delay: -4s; }
  #guardianes .gua-alga--c { animation-duration: 8s; animation-delay: -1s; }
  #guardianes .gua-alga--kelp2 { animation-duration: 10s; animation-delay: -6s; }
}

/* ─── La cita ─────────────────────────────────────────────────────────── */
#guardianes .gua-cita {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
#guardianes .gua-frase {
  --gua-d: clamp(2.6rem, 5.8vw, 6.4rem);
  margin-top: .6em;
  font-weight: 400;
  color: var(--tinta);
  text-shadow: 0 2px 24px var(--sombra-texto);
}
#guardianes .gua-frase__l { display: block; }
#guardianes .gua-frase__l--d {
  font-family: var(--f-display);
  font-weight: 850;
  font-size: var(--gua-d);
  line-height: .9;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
#guardianes .gua-frase__l--s {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: calc(var(--gua-d) * .82);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--tinta-2);
  padding-left: 1.4em;
  margin-block: .02em .08em;
}
#guardianes .gua-frase__l--fin { padding-left: 2.6em; color: var(--turquesa-luz); }
#guardianes .gua-frase__pero {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  font-size: .82em;
  letter-spacing: 0;
  color: var(--tinta-2);
}

#guardianes .gua-cita__pie {
  display: flex;
  align-items: flex-end;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2rem, 5vh, 3.4rem);
}
#guardianes .gua-cita__bajada { flex: 1 1 auto; min-width: 0; }
#guardianes .gua-cita__bajada .texto { margin-top: 1rem; }
#guardianes .gua-testigo { flex: 0 0 auto; width: clamp(150px, 15vw, 200px); }
#guardianes .gua-testigo__marco { aspect-ratio: 1; border-radius: 50% 50% 50% 50% / 46% 46% 54% 54%; }
#guardianes .gua-testigo figcaption {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-top: .7rem;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
#guardianes .gua-testigo figcaption span:first-child { color: var(--tinta-2); }

/* cápsula del video */
#guardianes .gua-capsula {
  position: relative;
  width: min(100%, 400px);
  justify-self: end;
  margin-bottom: 40px;
}
#guardianes .gua-capsula__halo {
  position: absolute;
  inset: -22% -40%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 50% 42%, rgba(255, 170, 90, .22), rgba(214, 49, 51, .08) 55%, transparent),
    radial-gradient(closest-side at 50% 80%, rgba(95, 224, 217, .14), transparent);
  pointer-events: none;
}
#guardianes .gua-capsula__marco {
  aspect-ratio: 9 / 16;
  max-height: min(78vh, 720px);
  margin-left: auto;
  border-radius: 999px 999px 34px 34px;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(234, 251, 251, .08);
}
#guardianes .gua-capsula__marco::before { opacity: .22; }
#guardianes .gua-capsula__marco > video { transform-origin: 50% 60%; }
#guardianes .gua-capsula__lectura {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 9%;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .45em .9em;
  border-radius: var(--r-pildora);
  background: rgba(2, 10, 17, .45);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--espuma);
  white-space: nowrap;
}
#guardianes .gua-capsula__lectura i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--naranja);
  box-shadow: 0 0 0 3px rgba(250, 129, 23, .25);
}

/* lecho de coral al pie de la cápsula */
#guardianes .gua-lecho {
  position: absolute;
  left: -14%;
  right: -10%;
  bottom: -46px;
  height: 160px;
  pointer-events: none;
  z-index: 5;
}
#guardianes .gua-lecho__p {
  position: absolute;
  bottom: 0;
  height: auto;
  color: #0B2A3A;
  --detalle: var(--turquesa-luz);
  --brillo: var(--gua-brillo);
  filter: drop-shadow(0 -6px 18px rgba(2, 10, 17, .5));
}
#guardianes .gua-lecho__p--esponja { left: 0; width: 34%; }
#guardianes .gua-lecho__p--rama { left: 24%; width: 36%; bottom: -8px; color: #0E3345; }
#guardianes .gua-lecho__p--anemona { right: 6%; width: 32%; bottom: -6px; }
#guardianes .gua-lecho__p--estrella { right: 34%; width: 13%; bottom: 4px; rotate: 18deg; color: #12405A; }
#guardianes .gua-lecho__peces {
  position: absolute;
  left: 20%;
  bottom: 96px;
  display: flex;
  gap: 8px;
  color: var(--turquesa-luz);
  --detalle: #0B2A3A;
  opacity: .85;
}
#guardianes .gua-lecho__peces svg { width: 26px; height: auto; }
#guardianes .gua-lecho__peces svg:nth-child(2) { translate: 4px -10px; width: 22px; }
#guardianes .gua-lecho__peces svg:nth-child(3) { translate: -2px 8px; width: 20px; }
@keyframes gua-patrulla {
  0% { transform: translateX(0) scaleX(1); }
  46% { transform: translateX(150px) scaleX(1); }
  50% { transform: translateX(150px) scaleX(-1); }
  96% { transform: translateX(0) scaleX(-1); }
  100% { transform: translateX(0) scaleX(1); }
}
@media (prefers-reduced-motion: no-preference) {
  #guardianes .gua-lecho__peces { animation: gua-patrulla 16s ease-in-out infinite; }
}

/* ─── Principios: burbujas que suben ──────────────────────────────────── */
#guardianes .gua-principios {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(7rem, 18vh, 12rem);
}
#guardianes .gua-principios__cabeza {
  position: sticky;
  top: 24vh;
  align-self: start;
}
#guardianes .gua-principios__cabeza .titulo { margin-top: .5em; }
#guardianes .gua-principios__cabeza .texto { margin-top: 1.2rem; }
#guardianes .gua-principios__nota {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  margin-top: 1.6rem;
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
#guardianes .gua-principios__nota .ico { color: var(--turquesa-luz); }

/* caballito que acompaña la nota */
#guardianes .gua-caballito {
  position: absolute;
  right: 6%;
  top: calc(100% + 1.5rem);
  width: clamp(48px, 4.4vw, 66px);
  height: auto;
  color: var(--turquesa-luz);
  --detalle: #052234;
  --brillo: var(--bio);
  opacity: .8;
  filter: drop-shadow(0 0 14px rgba(95, 224, 217, .35));
}
@keyframes gua-caballito {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50% { transform: translate3d(-6px, -16px, 0) rotate(4deg); }
}
@media (prefers-reduced-motion: no-preference) {
  #guardianes .gua-caballito { animation: gua-caballito 6.5s ease-in-out infinite; }
}

#guardianes .gua-burbujas {
  position: relative;
  list-style: none;
  padding: 2rem 0 4rem;
  display: flex;
  flex-direction: column;
}
#guardianes .gua-burbuja {
  position: relative;
  width: var(--tam);
  max-width: 100%;
  margin-left: var(--x);
  margin-top: -34px;
}
#guardianes .gua-burbuja:first-child { margin-top: 0; }
#guardianes .gua-burbuja__vidrio {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 15%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(234, 251, 251, .16), transparent 34%),
    radial-gradient(circle at 50% 108%, rgba(95, 224, 217, .2), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(5, 34, 52, .55) 50%, rgba(5, 34, 52, .2) 72%, rgba(234, 251, 251, .05));
  box-shadow:
    inset 0 0 0 1px rgba(234, 251, 251, .2),
    inset 0 -22px 40px -10px rgba(95, 224, 217, .22),
    inset 0 18px 36px -16px rgba(234, 251, 251, .22),
    0 30px 60px -34px rgba(0, 0, 0, .7);
  transition: border-radius 1.2s var(--agua-ease), scale 1.2s var(--agua-ease);
}
#guardianes .gua-burbuja__vidrio::before {   /* reflejo de ventana */
  content: "";
  position: absolute;
  left: 17%; top: 11%;
  width: 26%; height: 15%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(234, 251, 251, .55), rgba(234, 251, 251, 0));
  rotate: -32deg;
  pointer-events: none;
}
#guardianes .gua-burbuja__vidrio::after {    /* iridiscencia del borde */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 200deg, rgba(95, 224, 217, .5), rgba(107, 255, 230, 0) 25%, rgba(250, 129, 23, .28) 45%, rgba(95, 224, 217, 0) 62%, rgba(234, 251, 251, .4) 86%, rgba(95, 224, 217, .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .8;
  pointer-events: none;
}
#guardianes .gua-burbuja__n {
  font-size: .7rem;
  letter-spacing: .2em;
  color: var(--turquesa-luz);
}
#guardianes .gua-burbuja__t {
  margin-top: .35em;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--tinta);
}
#guardianes .gua-burbuja p {
  margin-top: .7em;
  font-size: .92rem;
  line-height: 1.42;
  color: var(--tinta-2);
  text-wrap: pretty;
}
@media (hover: hover) {
  #guardianes .gua-burbuja:hover .gua-burbuja__vidrio {
    border-radius: 47% 53% 52% 48% / 53% 47% 53% 47%;
    scale: 1.035;
  }
}

/* burbujitas sueltas */
#guardianes .gua-subida {
  position: absolute;
  inset: 0 var(--gua-hud) 0 40%;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}
#guardianes .gua-subida i {
  position: absolute;
  bottom: -20px;
  width: 8px; height: 8px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(234, 251, 251, .45), inset 2px -2px 3px rgba(95, 224, 217, .3);
  opacity: 0;
}
#guardianes .gua-subida i:nth-child(1) { left: 6%; scale: 1.4; animation-delay: 0s; }
#guardianes .gua-subida i:nth-child(2) { left: 18%; animation-delay: -3s; }
#guardianes .gua-subida i:nth-child(3) { left: 27%; scale: .7; animation-delay: -7s; }
#guardianes .gua-subida i:nth-child(4) { left: 39%; scale: 1.8; animation-delay: -1.5s; }
#guardianes .gua-subida i:nth-child(5) { left: 47%; animation-delay: -9s; }
#guardianes .gua-subida i:nth-child(6) { left: 56%; scale: .6; animation-delay: -5s; }
#guardianes .gua-subida i:nth-child(7) { left: 63%; scale: 1.2; animation-delay: -11s; }
#guardianes .gua-subida i:nth-child(8) { left: 71%; animation-delay: -4s; }
#guardianes .gua-subida i:nth-child(9) { left: 79%; scale: 2.2; animation-delay: -8s; }
#guardianes .gua-subida i:nth-child(10) { left: 86%; scale: .8; animation-delay: -2s; }
#guardianes .gua-subida i:nth-child(11) { left: 92%; animation-delay: -10s; }
#guardianes .gua-subida i:nth-child(12) { left: 33%; scale: 1.1; animation-delay: -6s; }
@keyframes gua-sube {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: .9; }
  50% { transform: translate3d(10px, -70vh, 0); }
  85% { opacity: .7; }
  100% { transform: translate3d(-6px, -140vh, 0); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  #guardianes .gua-subida i { animation: gua-sube 13s linear infinite; }
}
#guardianes:not(.en-vista) .gua-subida i,
#guardianes:not(.en-vista) .gua-alga,
#guardianes:not(.en-vista) .gua-lecho__peces,
#guardianes:not(.en-vista) .gua-caballito,
#guardianes:not(.en-vista) .gua-sd__anillo { animation-play-state: paused; }

/* ─── Second Dive ─────────────────────────────────────────────────────── */
#guardianes .gua-sd {
  position: relative;
  z-index: 2;
  margin-top: clamp(5rem, 14vh, 9rem);
}
#guardianes .gua-sd__panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  padding: clamp(3rem, 7vw, 6rem) clamp(1.6rem, 5vw, 5rem);
  border-radius: 36px;
  background:
    radial-gradient(60% 70% at 24% 50%, rgba(13, 72, 82, .55), transparent 70%),
    radial-gradient(40% 50% at 90% 0%, rgba(95, 224, 217, .08), transparent),
    linear-gradient(160deg, #04161f, #01080d 70%);
  box-shadow: 0 0 0 1px rgba(95, 224, 217, .12), 0 60px 120px -50px rgba(0, 0, 0, .85);
}
#guardianes .gua-sd__fondo {
  position: absolute;
  z-index: -1;
  inset: auto -2% -6% -2%;
  display: flex;
  justify-content: center;
  gap: .28em;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(4.5rem, 11.5vw, 11rem);
  line-height: .8;
  letter-spacing: -.04em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(95, 224, 217, .16);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

#guardianes .gua-sd__visual {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 1;
  margin-inline: auto;
}
#guardianes .gua-sd__anillo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#guardianes .gua-sd__pista { fill: none; stroke: rgba(95, 224, 217, .14); stroke-width: 1; stroke-dasharray: 2 7; }
#guardianes .gua-sd__anillo text {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .3em;
  fill: rgba(95, 224, 217, .7);
}
@keyframes gua-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: no-preference) {
  #guardianes .gua-sd__anillo { animation: gua-gira 60s linear infinite; }
}
#guardianes .gua-sd__foto {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
}
#guardianes .gua-sd__foto img { filter: grayscale(.55) contrast(1.05) brightness(.85); }
#guardianes .gua-sd__foto::before {
  background: linear-gradient(180deg, rgba(95, 224, 217, .5), rgba(13, 72, 82, .9));
  mix-blend-mode: color;
  opacity: .6;
}
#guardianes .gua-sd__insignia {
  position: absolute;
  right: -2%;
  bottom: -2%;
  width: 40%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .55));
}
#guardianes .gua-sd__disco { color: #0D4852; }
#guardianes .gua-sd__insignia svg { color: var(--turquesa-luz); }
#guardianes .gua-sd__flechas { transform-box: view-box; }

#guardianes .gua-sd__marca {
  display: inline-flex;
  flex-direction: column;
  font-family: var(--f-display);
  text-transform: uppercase;
  line-height: .9;
  color: var(--turquesa-luz);
}
#guardianes .gua-sd__marca span { font-weight: 200; font-size: .9rem; letter-spacing: .62em; }
#guardianes .gua-sd__marca b { font-weight: 900; font-size: 2.3rem; letter-spacing: .14em; }
#guardianes .gua-sd__texto .titulo { margin-top: .5em; max-width: 13ch; }
#guardianes .gua-sd__texto .titulo em { color: var(--turquesa-luz); }
#guardianes .gua-sd__texto .lead { margin-top: 1.4rem; }
#guardianes .gua-sd__texto .texto { margin-top: .9rem; }
#guardianes .gua-sd__ciclo {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 0;
  margin-top: 1.8rem;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
#guardianes .gua-sd__ciclo li { display: inline-flex; align-items: center; }
#guardianes .gua-sd__ciclo li + li::before {
  content: "";
  width: 28px;
  height: 8px;
  margin-inline: .7rem;
  background:
    linear-gradient(var(--turquesa-luz), var(--turquesa-luz)) left 50% / calc(100% - 6px) 1px no-repeat,
    conic-gradient(from 45deg at 100% 50%, var(--turquesa-luz) 0 90deg, transparent 0) right 50% / 6px 8px no-repeat;
  opacity: .8;
}
#guardianes .gua-sd__cta { margin-top: 2.2rem; }

/* ─── Tablet y móvil ──────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  #guardianes .gua-cita { grid-template-columns: minmax(0, 1fr) minmax(0, .7fr); }
  #guardianes .gua-cita__pie { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767px) {
  #guardianes { padding-block: 5rem 4rem; }
  #guardianes .gua-cita { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  #guardianes .gua-frase { --gua-d: min(3.4rem, calc((100vw - 2 * var(--margen)) / 7.4)); }
  #guardianes .gua-frase__l--s { padding-left: .6em; }
  #guardianes .gua-frase__l--fin { padding-left: 1.2em; }
  #guardianes .gua-cita__pie { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
  #guardianes .gua-testigo { width: 44vw; max-width: 200px; }
  #guardianes .gua-capsula { width: min(78vw, 340px); justify-self: center; margin-bottom: 50px; }
  #guardianes .gua-capsula__marco { max-height: 64vh; margin-inline: auto; }
  #guardianes .gua-lecho { height: 120px; bottom: -38px; }

  #guardianes .gua-principios { grid-template-columns: minmax(0, 1fr); margin-top: 7rem; gap: 2rem; }
  #guardianes .gua-principios__cabeza { position: relative; top: auto; }
  #guardianes .gua-caballito { top: auto; bottom: -.4rem; right: 2%; width: 40px; }
  #guardianes .gua-burbujas { padding: 0 0 2rem; }
  #guardianes .gua-burbuja { width: min(84vw, 320px); margin-left: 0; margin-top: -18px; }
  #guardianes .gua-burbuja:nth-child(even) { align-self: flex-end; }
  #guardianes .gua-burbuja p { font-size: .9rem; }
  #guardianes .gua-subida { left: 0; right: 0; }

  #guardianes .gua-sd__panel { grid-template-columns: minmax(0, 1fr); padding: 3rem 1.4rem 2.4rem; border-radius: 28px; }
  #guardianes .gua-sd__visual { width: min(76vw, 320px); }
  #guardianes .gua-sd__fondo { inset: 1rem -4% auto; flex-direction: column; align-items: center; gap: 0; font-size: 19vw; }
  #guardianes .gua-sd__ciclo { flex-direction: column; align-items: flex-start; }
  #guardianes .gua-sd__ciclo li + li::before { margin-left: 0; }
  #guardianes .gua-sd__cta { width: 100%; justify-content: center; }
  #guardianes .gua-orilla { width: 70px; }
  #guardianes .gua-alga--b, #guardianes .gua-alga--kelp2 { display: none; }
}