@font-face {
  font-family: "Irene";
  src: url("../fonts/Irene-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #fff4e9;
  --color-bg-alt: #f9e8d6;
  --color-ink: #000000;
  --color-text: #1a1510;
  --color-text-muted: #6b5f50;
  --color-halo: #de928c;
  --font-sans: "Georgia", serif;
  --font-display: "Irene", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ---------- Hero: tipografía manuscrita sobre fondo crema ---------- */

.hero {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--color-bg);
}

.hero-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr 1.7fr 1fr;
}

.hero-col {
  /* Tres filas: la del medio (auto) queda exactamente en el centro
     vertical porque las filas 1fr de arriba y abajo son iguales —
     así la palabra central de cada columna está a la misma altura. */
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  /* Una sola pista de columna clavada al ancho disponible: sin esto la
     pista implícita "auto" crece hasta el texto nowrap más largo y
     empuja los enlaces fuera de pantalla. */
  grid-template-columns: minmax(0, 1fr);
  padding: 3.5rem 2.5rem;
  min-width: 0;
  /* Por encima del personaje: si un brazo extendido invade la columna,
     pasa por debajo de las palabras y de su halo. */
  position: relative;
  z-index: 2;
}

.hero-col .hero-word:first-child {
  align-self: start;
}

.hero-col .hero-word:last-child {
  align-self: end;
}

.hero-col--right {
  text-align: right;
}

/* En la columna derecha una palabra más ancha que la columna debe
   desbordar hacia el centro (izquierda), no fuera de pantalla. Con el
   contenedor en rtl, la resolución de márgenes ancla el borde derecho
   del texto; el texto interior vuelve a ltr para que la puntuación
   ("¿?") no la reordene el algoritmo bidi. */
.hero-col--right .hero-word {
  direction: rtl;
}

.hero-col--right .hero-word-text {
  direction: ltr;
  width: max-content;
  margin-left: auto;
}

.hero-word {
  display: block;
  width: 100%;
  text-decoration: none;
}

.hero-word-text {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.6vw, 5.5rem);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-ink);
  line-height: 1.08;
  /* Cada palabra va en una sola línea, como en el mockup; si es más
     larga que su columna, desborda visualmente hacia el centro. */
  white-space: nowrap;
  /* Silueta rosa tipo rotulador: copias radiales NÍTIDAS del propio texto
     (dos anillos, 24 + 12 direcciones, sin blur — el blur pequeño se veía
     pixelado sobre el fondo crema). En reposo son transparentes; .is-hot
     solo cambia el color, así la lista coincide y la transición funde. */
  --halo: rgba(222, 146, 140, 0);
  text-shadow:
    0.16em 0 0 var(--halo),
    0.155em 0.041em 0 var(--halo),
    0.139em 0.08em 0 var(--halo),
    0.113em 0.113em 0 var(--halo),
    0.08em 0.139em 0 var(--halo),
    0.041em 0.155em 0 var(--halo),
    0 0.16em 0 var(--halo),
    -0.041em 0.155em 0 var(--halo),
    -0.08em 0.139em 0 var(--halo),
    -0.113em 0.113em 0 var(--halo),
    -0.139em 0.08em 0 var(--halo),
    -0.155em 0.041em 0 var(--halo),
    -0.16em 0 0 var(--halo),
    -0.155em -0.041em 0 var(--halo),
    -0.139em -0.08em 0 var(--halo),
    -0.113em -0.113em 0 var(--halo),
    -0.08em -0.139em 0 var(--halo),
    -0.041em -0.155em 0 var(--halo),
    0 -0.16em 0 var(--halo),
    0.041em -0.155em 0 var(--halo),
    0.08em -0.139em 0 var(--halo),
    0.113em -0.113em 0 var(--halo),
    0.139em -0.08em 0 var(--halo),
    0.155em -0.041em 0 var(--halo),
    0.085em 0 0 var(--halo),
    0.074em 0.042em 0 var(--halo),
    0.043em 0.074em 0 var(--halo),
    0 0.085em 0 var(--halo),
    -0.042em 0.074em 0 var(--halo),
    -0.074em 0.042em 0 var(--halo),
    -0.085em 0 0 var(--halo),
    -0.074em -0.042em 0 var(--halo),
    -0.043em -0.074em 0 var(--halo),
    0 -0.085em 0 var(--halo),
    0.043em -0.074em 0 var(--halo),
    0.074em -0.043em 0 var(--halo);
  transition: text-shadow 0.25s ease;
}

.hero-word.is-hot .hero-word-text,
.hero-word:hover .hero-word-text {
  --halo: var(--color-halo);
}

/* Palabras apiladas en dos líneas centradas entre sí
   ("CV / EN PDF" y "SOBRE / MÍ"). El selector doble gana en
   especificidad al direction:rtl de la columna derecha. */
.hero-word-text.hero-word-text--stack {
  display: inline-block;
  direction: ltr;
  text-align: center;
}

.hero-word-text--stack .stack-line {
  display: block;
}

/* ---------- Centro: personaje ---------- */

.hero-center {
  position: relative;
  /* Sin overflow:hidden — el personaje sobresale de la columna
     y los brazos extendidos no se cortan. */
}

.character {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
  width: 107%;
  max-height: 88%;
  aspect-ratio: 1500 / 1140;
}

.character img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  visibility: hidden;
  user-select: none;
  -webkit-user-drag: none;
}

.character img.is-active {
  visibility: visible;
}

/* ---------- Barra inferior: scroll ---------- */

.hero-scrollbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(52px, 7vh, 84px);
  background-color: var(--color-bg);
  color: var(--color-ink);
  text-decoration: none;
}

.hero-scrollbar svg {
  transition: transform 0.2s ease;
}

.hero-scrollbar:hover svg {
  transform: translateY(3px);
}

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-center {
    order: -1;
    min-height: 50vh;
    overflow: hidden;
  }

  /* En móvil no hay columnas laterales donde sobresalir:
     el personaje vuelve a caber entero en el ancho de pantalla. */
  .character {
    width: 96%;
  }

  .hero-col {
    padding: 2rem 1.75rem;
    gap: 1.25rem;
  }

  .hero-word-text {
    font-size: clamp(2rem, 9vw, 3rem);
  }
}

/* ---------- Secciones ---------- */

.section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
}

.section.even {
  background-color: var(--color-bg);
}

.section.odd {
  background-color: var(--color-bg-alt);
}

.section-inner {
  max-width: 700px;
  width: 100%;
}

.section-number {
  display: block;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-ink);
  margin: 0 0 1.5rem;
  line-height: 1.1;
}

.section-description {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 520px;
}