/* soyluciotorres.com
   Paleta sacada de los archivos del dueño, no inventada: el amarillo #FEC502
   es el de "TORRES" en el logo. */
:root {
  --fondo:      #0B0B0D;
  --texto:      #F2F2F0;
  --secundario: #9A9A96;
  --amarillo:   #FEC502;
  --borde:      #2A2A2E;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; }

/* ===================================================================
   PORTADA
   Poster: solo el logo y la figura. El logo ya dice el nombre, asi que
   no hace falta repetirlo en texto. Todo lo demas va mas abajo.
   =================================================================== */
.portada {
  position: relative;
  min-height: 100dvh;
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: clamp(1rem, 3vw, 3rem);
  overflow: hidden;
}

/* Luz de escenario: un halo calido desde abajo, donde la figura ya esta
   desvanecida. Ahi el difuminado de la foto lo deja pasar y parece luz;
   sobre la parte opaca no se veria. */
.portada::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8%;
  height: 65%;
  background: radial-gradient(58% 100% at 72% 100%,
              rgba(254, 197, 2, 0.14), rgba(254, 197, 2, 0) 68%);
  pointer-events: none;
  z-index: 0;
}

.portada__texto {
  position: relative;
  z-index: 1;
  align-self: center;
  padding-bottom: clamp(2rem, 10vh, 7rem);
}

.portada__logo {
  width: min(30rem, 100%);
  display: block;
}

/* Pista de que hay mas abajo. Sin esto, en una pantalla alta la portada
   parece toda la web. */
.portada__mas {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: clamp(1.5rem, 4vh, 2.75rem);
  color: var(--secundario);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.portada__mas:hover, .portada__mas:focus-visible { color: var(--amarillo); }
.portada__mas::after {
  content: "";
  width: 0.5rem; height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  animation: baja 2.2s ease-in-out infinite;
}
@keyframes baja {
  0%, 100% { transform: translateY(-2px) rotate(45deg); }
  50%      { transform: translateY(2px)  rotate(45deg); }
}

.portada__foto {
  position: relative;
  z-index: 1;
  justify-self: center;
  align-self: end;
  margin-bottom: -1px;   /* mata la costura de subpixel contra el borde */
}
.portada__foto img {
  display: block;
  width: auto;
  max-height: 92dvh;
  /* La foto ya lleva su propio difuminado en el archivo: el polo es negro
     sobre fondo negro y recortar la silueta se comeria la camiseta. */
}

/* --- movil: el logo arriba, la figura debajo ------------------------- */
@media (max-width: 860px) {
  .portada {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0;
    padding-top: clamp(2.5rem, 8vh, 5rem);
    text-align: center;
  }
  .portada__texto { align-self: start; padding-bottom: 0; }
  .portada__logo { margin: 0 auto; width: min(22rem, 88%); }
  .portada::before {
    background: radial-gradient(70% 55% at 50% 100%,
                rgba(254, 197, 2, 0.13), rgba(254, 197, 2, 0) 70%);
  }
  .portada__foto img { max-height: 62dvh; }
}

/* ===================================================================
   LO QUE SIGUE ABAJO
   =================================================================== */
.siguiente {
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(3rem, 10vh, 7rem) 1.5rem clamp(3rem, 8vh, 5rem);
  text-align: center;
}

.pronto {
  margin: 0 0 1.25rem;
  color: var(--amarillo);
  font-size: clamp(2.2rem, 9vw, 4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.siguiente p {
  margin: 0 auto 2.75rem;
  max-width: 30rem;
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  color: var(--texto);
}

.siguiente__titulo {
  margin: 0 0 1.25rem;
  color: var(--secundario);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ===================================================================
   REDES  (portada y 404)
   Van desde el dia uno: si alguien llega antes del lanzamiento, que se
   pueda ir siguiendole en vez de irse a nada.
   =================================================================== */
.redes {
  display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center;
  margin: 0; padding: 0; list-style: none;
}
.redes a {
  display: block;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--texto);
  text-decoration: none;
  font-size: 0.95rem;
  transition: border-color .18s, color .18s, background-color .18s;
}
/* El amarillo es el color de lo que se pulsa, y no pasa del 10% de la
   superficie: solo aparece al pasar por encima y en el titular. */
.redes a:hover, .redes a:focus-visible {
  background: var(--amarillo); border-color: var(--amarillo); color: var(--fondo);
}
.redes a:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 3px; }

.pie {
  padding: 0 1.5rem clamp(2rem, 6vh, 3.5rem);
  text-align: center;
  color: var(--secundario);
  font-size: 0.85rem;
}
.pie a { color: var(--secundario); }

/* ===================================================================
   CARTEL CENTRADO  (pagina 404)
   =================================================================== */
.centrado {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 2rem 1.5rem; text-align: center;
}
.centrado__caja { max-width: 34rem; }
.centrado__logo { width: min(24rem, 82vw); margin-bottom: 2.5rem; }

/* ===================================================================
   PAGINAS INTERNAS  (zona en obra)
   =================================================================== */
.pagina { max-width: 46rem; margin: 0 auto; padding: 2.5rem 1.5rem 5rem; }
.pagina__cabecera { margin-bottom: 2rem; }
.pagina__cabecera img { width: 10rem; display: block; }

.menu {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  padding-bottom: 1.5rem; margin-bottom: 3rem;
  border-bottom: 1px solid var(--borde);
}
.menu a { color: var(--secundario); text-decoration: none; font-size: 0.95rem; }
.menu a:hover { color: var(--amarillo); }
.menu a[aria-current="page"] { color: var(--texto); font-weight: 600; }

.pagina h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.15; margin: 0 0 1.25rem; }
.pagina h2 { font-size: 1.2rem; margin: 2.75rem 0 0.75rem; }
.pagina a  { color: var(--amarillo); }

/* Hueco declarado: el texto lo escribe el dueño. Se ve a proposito, porque
   esto esta detras de una clave y es literalmente una obra. */
.pendiente {
  border: 1px dashed #3A3A3E; border-radius: 8px;
  padding: 1.25rem 1.5rem; color: var(--secundario); font-size: 0.92rem;
}
.pendiente::before {
  content: "Pendiente"; display: block; color: var(--amarillo);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .redes a { transition: none; }
  .portada__mas::after { animation: none; }
}