/* ═══ 04 · Disciplinas: apnea y buceo ════════════════════════════════════════ */

#disciplinas {
  --dis-hud: 0px;
  --dis-d: 50%;
  position: relative;
  padding-block: clamp(5rem, 14vh, 10rem) clamp(4rem, 12vh, 8rem);
}
@media (min-width: 1024px) {
  #disciplinas { --dis-hud: 96px; }
}

/* ─── Cabecera ────────────────────────────────────────────────────────── */
#disciplinas .dis-cabeza {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.4rem;
  align-items: end;
  margin-bottom: clamp(2rem, 6vh, 3.6rem);
  padding-right: calc(var(--margen) + var(--dis-hud));
}
#disciplinas .dis-titulo {
  margin-top: .45em;
  font-size: min(var(--t-1), calc((100vw - 2 * var(--margen)) / 6.6));
}
#disciplinas .dis-bajada {
  max-width: 26rem;
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.42;
  color: var(--tinta-2);
  text-wrap: pretty;
}
@media (min-width: 900px) {
  #disciplinas .dis-cabeza { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
  #disciplinas .dis-bajada { justify-self: end; padding-bottom: .5rem; }
}

/* un cardumen pequeño que cruza la cabecera */
#disciplinas .dis-cardumen {
  position: absolute;
  right: calc(var(--margen) + var(--dis-hud) + 4%);
  top: -2.5rem;
  width: 9rem;
  height: 4rem;
  pointer-events: none;
  color: #EAFBFB;
  --detalle: #0E8C93;
  opacity: .55;
}
#disciplinas .dis-cardumen svg {
  position: absolute;
  width: 2.1rem;
  height: auto;
}
#disciplinas .dis-cardumen svg:nth-child(1) { left: 0; top: 30%; }
#disciplinas .dis-cardumen svg:nth-child(2) { left: 26%; top: 0; width: 1.7rem; }
#disciplinas .dis-cardumen svg:nth-child(3) { left: 38%; top: 52%; }
#disciplinas .dis-cardumen svg:nth-child(4) { left: 62%; top: 20%; width: 1.5rem; }
#disciplinas .dis-cardumen svg:nth-child(5) { left: 74%; top: 62%; width: 1.8rem; }
@keyframes dis-nadar {
  0% { transform: translate3d(-14px, 0, 0); }
  50% { transform: translate3d(10px, -6px, 0); }
  100% { transform: translate3d(-14px, 0, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  #disciplinas .dis-cardumen svg { animation: dis-nadar 6s ease-in-out infinite; }
  #disciplinas .dis-cardumen svg:nth-child(2n) { animation-duration: 7.4s; animation-delay: -2s; }
  #disciplinas .dis-cardumen svg:nth-child(3n) { animation-duration: 5.2s; animation-delay: -1s; }
}

/* ─── La ventana de dos aguas ─────────────────────────────────────────── */
#disciplinas .dis-ventana {
  position: relative;
  margin-inline: var(--margen) calc(var(--margen) + var(--dis-hud));
  border-radius: var(--r-panel);
  overflow: hidden;
  isolation: isolate;
  background: var(--noche);
  box-shadow: 0 40px 120px -40px rgba(2, 10, 17, .7), inset 0 0 0 1px rgba(234, 251, 251, .1);
}
#disciplinas .dis-lado {
  position: relative;
  overflow: hidden;
  color: var(--tinta);
}
#disciplinas .dis-fondo {
  position: absolute;
  inset: 0;
  border-radius: 0;
  --causticas-fuerza: .5;
}
#disciplinas .dis-fondo img,
#disciplinas .dis-fondo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#disciplinas .dis-fondo__img { object-position: 50% 62%; }
@keyframes dis-acercar {
  from { transform: scale(1.04); }
  to { transform: scale(1.16) translate3d(-1.5%, 1%, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  #disciplinas .dis-fondo__img { animation: dis-acercar 26s ease-in-out infinite alternate; }
}
#disciplinas .dis-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
#disciplinas .dis-lado--apnea .dis-velo {
  background:
    linear-gradient(90deg, rgba(2, 10, 17, .62), rgba(2, 10, 17, .14) 46%, transparent 70%),
    linear-gradient(0deg, rgba(4, 24, 38, .75), transparent 55%);
}
#disciplinas .dis-lado--buceo .dis-velo {
  background:
    linear-gradient(270deg, rgba(2, 10, 17, .7), rgba(2, 10, 17, .2) 46%, transparent 70%),
    linear-gradient(0deg, rgba(4, 24, 38, .78), transparent 55%);
}

#disciplinas .dis-credito {
  position: absolute;
  z-index: 2;
  bottom: 1rem;
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(234, 251, 251, .62);
}
#disciplinas .dis-lado--apnea .dis-credito { left: 5%; }
#disciplinas .dis-lado--buceo .dis-credito { right: 4%; }

/* contenido de cada lado */
#disciplinas .dis-contenido {
  position: relative;
  z-index: 3;
}
#disciplinas .dis-tipo {
  display: flex;
  align-items: center;
  gap: .9em;
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--espuma-2);
}
#disciplinas .dis-tipo span {
  padding: .35em .7em;
  border: 1px solid rgba(234, 251, 251, .3);
  border-radius: var(--r-pildora);
  color: var(--espuma);
}
#disciplinas .dis-palabra {
  margin-top: .2em;
  font-size: clamp(3.4rem, 8.4vw, 8.6rem);
  font-weight: 850;
  line-height: .86;
  letter-spacing: -.035em;
  color: var(--espuma);
}
#disciplinas .dis-texto {
  margin-top: 1rem;
  max-width: 24rem;
  font-size: var(--t-lead);
  line-height: 1.4;
  font-weight: 300;
  color: var(--espuma);
  text-wrap: pretty;
}
#disciplinas .dis-datos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem 1.2rem;
  margin: 1.4rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(234, 251, 251, .2);
}
#disciplinas .dis-datos dt {
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--espuma-3);
}
#disciplinas .dis-datos dd {
  margin: .2rem 0 0;
  font-family: var(--f-mono);
  font-size: .9rem;
  color: var(--espuma);
}
#disciplinas .dis-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: 1.1rem;
}
#disciplinas .dis-etiquetas span {
  padding: .4em .8em;
  border-radius: var(--r-pildora);
  background: rgba(234, 251, 251, .1);
  border: 1px solid rgba(234, 251, 251, .16);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--espuma);
}
#disciplinas .dis-cta { margin-top: 1.5rem; }

/* la cuerda guía de la apnea */
#disciplinas .dis-cuerda {
  position: absolute;
  z-index: 2;
  left: 2.2%;
  top: 0;
  width: 40px;
  height: 100%;
  translate: -50% 0;
  overflow: visible;
  pointer-events: none;
}
#disciplinas .dis-cuerda line {
  stroke: rgba(234, 251, 251, .72);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: var(--dis-cuerda, 0);
}
#disciplinas .dis-marcas {
  position: absolute;
  z-index: 2;
  left: 2.2%;
  top: 8%;
  bottom: 8%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .62rem;
  letter-spacing: .1em;
  color: rgba(234, 251, 251, .66);
  pointer-events: none;
}
#disciplinas .dis-marcas li {
  display: flex;
  align-items: center;
  gap: .4rem;
  translate: -4px 0;
}
#disciplinas .dis-marcas li::before {
  content: "";
  width: 9px;
  height: 1.5px;
  background: rgba(234, 251, 251, .72);
}
#disciplinas .dis-marcas li::after { content: " m"; margin-left: -.35em; }

/* burbujas del buceo */
#disciplinas .dis-burbujas {
  position: absolute;
  z-index: 2;
  right: 30%;
  bottom: 0;
  width: 6rem;
  height: 100%;
  pointer-events: none;
}
#disciplinas .dis-burbujas i {
  position: absolute;
  bottom: -20px;
  left: calc(var(--x, 50) * 1%);
  width: var(--t, 8px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(234, 251, 251, .7);
  background: radial-gradient(circle at 35% 30%, rgba(234, 251, 251, .65), rgba(234, 251, 251, .06) 60%);
  opacity: 0;
}
#disciplinas .dis-burbujas i:nth-child(1) { --x: 20; --t: 10px; --d: 7s; --r: 0s; }
#disciplinas .dis-burbujas i:nth-child(2) { --x: 46; --t: 6px; --d: 6s; --r: -2.2s; }
#disciplinas .dis-burbujas i:nth-child(3) { --x: 64; --t: 13px; --d: 8.5s; --r: -4.1s; }
#disciplinas .dis-burbujas i:nth-child(4) { --x: 30; --t: 5px; --d: 5.4s; --r: -1.3s; }
#disciplinas .dis-burbujas i:nth-child(5) { --x: 78; --t: 8px; --d: 7.6s; --r: -5.5s; }
#disciplinas .dis-burbujas i:nth-child(6) { --x: 10; --t: 7px; --d: 6.6s; --r: -3.3s; }
#disciplinas .dis-burbujas i:nth-child(7) { --x: 55; --t: 9px; --d: 9s; --r: -6.4s; }
@keyframes dis-subir {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  10% { opacity: .9; }
  50% { transform: translate3d(8px, -50vh, 0); }
  85% { opacity: .7; }
  100% { transform: translate3d(-6px, -100vh, 0); opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  #disciplinas .dis-burbujas i { animation: dis-subir var(--d) linear var(--r) infinite; }
}

#disciplinas .dis-coral {
  position: absolute;
  z-index: 2;
  right: 2%;
  bottom: -1.5%;
  width: clamp(110px, 12vw, 190px);
  height: auto;
  color: #062634;
  --detalle: #5FE0D9;
  --brillo: #FF9F4A;
  opacity: .92;
  pointer-events: none;
  transform-origin: 50% 100%;
}
@keyframes dis-respirar { 50% { transform: scale(1.025, .985); } }
@media (prefers-reduced-motion: no-preference) {
  #disciplinas .dis-coral { animation: dis-respirar 6s ease-in-out infinite; }
}

/* ventanitas de video (solo se asoman en el lado abierto) */
#disciplinas .dis-ventanita {
  position: absolute;
  z-index: 3;
  margin: 0;
  width: clamp(180px, 17%, 250px);
  aspect-ratio: 4 / 5;
  border-radius: var(--r-medio);
  box-shadow: 0 30px 70px -24px rgba(2, 10, 17, .8), 0 0 0 1px rgba(234, 251, 251, .2);
  opacity: 0;
  pointer-events: none;
}
#disciplinas .dis-ventanita video { width: 100%; height: 100%; object-fit: cover; }
#disciplinas .dis-ventanita figcaption {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 2.4rem .9rem .8rem;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--espuma);
  background: linear-gradient(0deg, rgba(2, 10, 17, .82), transparent);
}
#disciplinas .dis-ventanita figcaption span + span { color: var(--espuma-3); letter-spacing: .08em; text-transform: none; }

/* la frontera: una cortina de espuma */
#disciplinas .dis-cortina {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
#disciplinas .dis-cortina__linea {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
#disciplinas .dis-cortina__linea path {
  fill: none;
  stroke: rgba(234, 251, 251, .85);
  stroke-width: 1.6px;
  vector-effect: non-scaling-stroke;
}
#disciplinas .dis-cortina__linea .dis-cortina__brillo {
  stroke: rgba(95, 224, 217, .45);
  stroke-width: 10px;
  filter: blur(6px);
}
#disciplinas .dis-cortina__o {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 4.2rem;
  height: 4.2rem;
  margin: -2.1rem 0 0 -2.1rem;
  border-radius: 50%;
  background: rgba(6, 30, 43, .55);
  border: 1px solid rgba(234, 251, 251, .4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--espuma);
  font-size: 2rem;
  line-height: 1;
  box-shadow: 0 10px 40px -10px rgba(2, 10, 17, .6);
}
#disciplinas .dis-cortina__o .serif { translate: 0 -.08em; }

/* ─── Escritorio: los dos lados se reparten la ventana ────────────────── */
@media (min-width: 1024px) {
  #disciplinas .dis-ventana {
    height: min(86vh, 860px);
    min-height: 600px;
  }
  #disciplinas .dis-lado {
    position: absolute;
    inset: 0;
  }
  #disciplinas .dis-lado--apnea .dis-fondo { right: 30%; }
  #disciplinas .dis-lado--buceo .dis-fondo { left: 30%; }
  #disciplinas .dis-lado--buceo {
    z-index: 2;
    clip-path: polygon(var(--dis-d) 0, 100% 0, 100% 100%, var(--dis-d) 100%);
  }
  #disciplinas .dis-contenido {
    position: absolute;
    bottom: 6%;
    width: 26%;
  }
  #disciplinas .dis-lado--apnea .dis-contenido { left: 6.5%; }
  #disciplinas .dis-lado--buceo .dis-contenido { right: 3.5%; text-align: right; }
  #disciplinas .dis-lado--buceo .dis-tipo,
  #disciplinas .dis-lado--buceo .dis-etiquetas { justify-content: flex-end; }
  #disciplinas .dis-lado--buceo .dis-texto { margin-left: auto; }
  #disciplinas .dis-lado--buceo .dis-datos { text-align: left; }
  #disciplinas .dis-palabra { font-size: min(5.4vw, 9.5vh, 6.6rem); white-space: nowrap; }
  #disciplinas .dis-texto { font-size: min(var(--t-lead), 2.4vh); }
  #disciplinas .dis-datos { gap: .7rem 1rem; margin-top: 1.1rem; padding-top: .9rem; }
  #disciplinas .dis-detalle { will-change: opacity; }
  #disciplinas .dis-lado--apnea .dis-ventanita { left: 37%; top: 9%; }
  #disciplinas .dis-lado--buceo .dis-ventanita { right: 37%; top: 9%; }
  #disciplinas .dis-burbujas { right: 33%; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  #disciplinas .dis-etiquetas { display: none; }
}

/* ─── Móvil y tableta: dos paneles apilados ───────────────────────────── */
@media (max-width: 1023px) {
  #disciplinas .dis-ventana { margin-inline: var(--margen); }
  #disciplinas .dis-lado {
    min-height: min(118vw, 760px);
    display: flex;
    align-items: flex-end;
    padding: clamp(12rem, 52vw, 20rem) clamp(1.3rem, 5vw, 2.4rem) clamp(1.8rem, 6vw, 2.6rem);
  }
  #disciplinas .dis-lado--apnea { padding-left: clamp(2.6rem, 10vw, 3.6rem); }
  #disciplinas .dis-lado--apnea .dis-velo,
  #disciplinas .dis-lado--buceo .dis-velo {
    background: linear-gradient(0deg, rgba(2, 10, 17, .88) 0%, rgba(4, 24, 38, .62) 48%, rgba(4, 24, 38, .05) 78%);
  }
  #disciplinas .dis-cuerda { left: clamp(1.3rem, 5vw, 1.8rem); }
  #disciplinas .dis-marcas { display: none; }
  #disciplinas .dis-ventanita { display: none; }
  #disciplinas .dis-cortina { position: relative; inset: auto; height: 0; }
  #disciplinas .dis-cortina__linea { display: none; }
  #disciplinas .dis-cortina__o { left: 50%; top: 0; }
  #disciplinas .dis-burbujas { right: 8%; height: 70%; }
  #disciplinas .dis-credito { top: 3.2rem; bottom: auto; }
  #disciplinas .dis-lado--apnea .dis-credito { top: 1.2rem; }
  #disciplinas .dis-lado--apnea .dis-credito { left: auto; right: 4%; }
  #disciplinas .dis-ventana { display: flex; flex-direction: column; }
  #disciplinas .dis-cortina { order: 1; z-index: 6; }
  #disciplinas .dis-lado--buceo { order: 2; }
  #disciplinas .dis-contenido { width: 100%; }
}
@media (max-width: 420px) {
  #disciplinas .dis-datos dd { font-size: .82rem; }
}