/* ============================================================
   portada.css — la portadilla

   Un póster, como la de integracion-i3: el curso en mono espaciada,
   «DUALIDAD» enorme en Righteous verde, la fecha, el emblema que se dibuja
   a trazo sobre un planeta difuso y la cuenta regresiva. Luego «hoy, según
   el plan» y las puertas de la página, con puntos guía.
   ============================================================ */

.portada { max-width: 52rem; margin: 0 auto; padding-bottom: 2rem; }

.po-titulo { text-align: center; padding: clamp(2.2rem, 7vh, 4.5rem) 0 1.6rem; }
.po-sobre { display: block; letter-spacing: var(--track-etq); color: var(--crema-2); font-size: .82rem; }
.po-dualidad {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(3.4rem, 13vw, 8.2rem);
  line-height: .88;
  letter-spacing: .01em;
  text-transform: uppercase;
  margin: 1rem 0 .7rem;
  color: var(--verde);
  text-shadow: 0 0 42px color-mix(in srgb, var(--verde) 28%, transparent);
}
.po-sub { font-size: 1.15rem; color: var(--crema-2); }
.po-sub em { color: var(--crema); font-style: normal; font-weight: 600; }

/* El emblema, sobre un planeta difuso (el de integracion-i3, en verde). */
.po-emblema { margin: 2rem auto 1.2rem; width: min(250px, 62vw); color: var(--verde); position: relative; isolation: isolate; }
.po-emblema::before {
  content: '';
  position: absolute;
  inset: 6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle at 44% 42%, color-mix(in srgb, var(--menta) 55%, transparent), color-mix(in srgb, var(--verde) 22%, transparent) 46%, transparent 70%);
  filter: blur(10px);
  animation: deriva 14s ease-in-out infinite alternate;
}
@keyframes deriva { from { transform: translate(0, 0); } to { transform: translate(3%, 3%); } }
.emblema-grande { width: 100%; height: auto; display: block; overflow: visible; }
.emb-leyenda {
  font-family: var(--f-mono);
  font-size: 8.3px;
  letter-spacing: .12em;
  fill: var(--menta-texto);
  text-transform: uppercase;
}
.emb-recta { stroke: var(--verde); }
.emb-punto { fill: var(--verde); }

/* El trazo que se dibuja solo, una vez. */
.traza { stroke-dasharray: 1; stroke-dashoffset: 0; }
.po-emblema .traza { animation: trazar 2.4s cubic-bezier(.4, .1, .2, 1) both; }
.po-emblema .traza:nth-child(2) { animation-delay: .25s; }
.po-emblema .traza:nth-child(3) { animation-delay: .5s; }
.po-emblema .traza:nth-child(4) { animation-delay: .9s; }
.po-emblema .emb-leyenda { animation: aparecer 1.6s .6s both; }
.po-emblema .emb-punto { animation: aparecer .8s 2s both; }
@keyframes trazar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.po-cuenta { display: inline-flex; align-items: baseline; gap: .7rem; margin-top: .4rem; }
.po-cuenta-num {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 3.4rem;
  line-height: 1;
  color: var(--verde);
}
.po-cuenta-txt { font-style: normal; color: var(--crema-2); font-size: 1.15rem; }

/* ------------------------------------------------------------ hoy, según el plan */

.po-hoy {
  margin: 1.4rem auto 2.6rem;
  padding: 1.15rem 1.5rem 1.2rem;
  border: 1px solid var(--filete);
  background: var(--noche-2);
  position: relative;
}
/* Las esquinas en «L» del póster. */
.po-hoy::before, .po-hoy::after { content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none; }
.po-hoy::before { top: -1px; left: -1px; border-top: var(--filete-ancho) solid var(--verde); border-left: var(--filete-ancho) solid var(--verde); }
.po-hoy::after { bottom: -1px; right: -1px; border-bottom: var(--filete-ancho) solid var(--verde); border-right: var(--filete-ancho) solid var(--verde); }
.po-hoy-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1rem; margin-bottom: .35rem; }
.po-hoy-etq { color: var(--verde); }
.po-hoy-dia { font-family: var(--f-display); font-size: 1.5rem; color: var(--crema); }
.po-hoy-horas { color: var(--crema-3); font-style: normal; margin-left: auto; }
.po-hoy-md { font-size: 1.08rem; }
.po-hoy-ir { margin-top: .65rem; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .2rem; }
.po-hoy-plan { margin-left: auto; font-style: normal; }

/* ------------------------------------------------------------ las puertas */

.po-puertas { margin: 0 auto; }
.po-puertas-tit {
  text-align: center;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--crema);
  margin-bottom: 1.1rem;
}
.po-puertas-tit::after {
  content: '';
  display: block;
  width: 7px; height: 7px;
  margin: .6rem auto 0;
  background: var(--verde);
}
.po-lista { list-style: none; margin: 0; padding: 0; }
.po-puerta {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  padding: .62rem .2rem;
  color: var(--crema);
  border-bottom: 1px solid var(--filete-2);
  transition: background .2s, padding .2s;
}
.po-puerta:hover { color: var(--crema); background: linear-gradient(90deg, var(--verde-velo), transparent 85%); padding-left: .55rem; }
.po-num {
  font-family: var(--f-display);
  font-style: normal;
  color: var(--menta-texto);
  font-size: 1.35rem;
  min-width: 2.6rem;
  text-align: right;
}
.po-txt { display: flex; flex-direction: column; min-width: 0; }
.po-tit { font-size: 1.32rem; line-height: 1.2; }
.po-puerta:hover .po-tit { color: var(--verde); }
.po-sub-p { color: var(--crema-3); font-style: normal; font-size: .98rem; line-height: 1.35; }
.po-guia { flex: 1; border-bottom: 1px dotted var(--filete); transform: translateY(-.35em); min-width: 1.4rem; }
.po-cuenta-p {
  color: var(--crema-2);
  letter-spacing: .12em;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
  font-family: var(--f-mono);
  text-transform: uppercase;
  font-size: .78em;
}

.po-pie { margin: 2.6rem auto 0; max-width: 40rem; text-align: center; font-style: normal; color: var(--crema-3); font-size: .98rem; }

@media (max-width: 620px) {
  .po-guia { display: none; }
  .po-puerta { flex-wrap: wrap; gap: .2rem .7rem; }
  .po-cuenta-p { margin-left: 3.5rem; font-size: .72rem; }
  .po-num { min-width: 2.2rem; }
  .po-hoy { padding: 1rem 1.05rem; }
  .po-hoy-plan { margin-left: 0; }
}