/* Próspero Studio · base compartida por todas las páginas
   Tipografía, colores, cabecera y menú móvil. */

@font-face {
  font-family: "Ancizar Sans";
  src: url("../fonts/AncizarSans-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ancizar Sans";
  src: url("../fonts/AncizarSans-Italic-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --rosa: #f249a2;
  --azul: #2f7dd1;
  --amarillo: #eda71b;
  --verde: #72983a;
  --rojo: #f44937;
  --fondo: #eeeeee;
  --tinta: #051336;

  --cabecera: 1;   /* opacidad de la cabecera, la mueve home.js */
  --logo-intro: 0; /* opacidad del logo blanco sobre el cuadro rosa */
  --texto-cuadro: 1.1rem;

  --margen: clamp(20px, 2.8vw, 56px);
  --curva: cubic-bezier(.22, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--fondo); }
button { cursor: pointer; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--fondo);
  color: var(--tinta);
  font-family: "Ancizar Sans", "Trebuchet MS", system-ui, sans-serif;
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 4px;
  border-radius: 4px;
}

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Cabecera ---------- */

.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--margen);
  opacity: var(--cabecera);
}

.cabecera__logo { display: block; width: clamp(128px, 9.6vw, 210px); }
.cabecera__logo img { display: block; width: 100%; height: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.1vw, 24px);
  font-size: clamp(16px, 1.2vw, 26px);
  line-height: 1;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  transition: opacity .25s ease, transform .35s var(--curva);
}
.nav__link--crear { color: var(--rosa); font-weight: 900; font-size: 1.22em; margin-right: .15em; }
.nav__link--pre { color: var(--amarillo); }
.nav__link--pro { color: var(--azul); }
.nav__link--post { color: var(--verde); }
.nav__link--contacto { color: var(--rosa); }
.nav__icono { width: 1.25em; height: 1.17em; margin-right: .5em; flex: none; }
.nav__divisor { width: 2px; height: 1.7em; background: var(--rosa); margin: 0 .2em; }

@media (hover: hover) {
  .nav:hover .nav__link { opacity: .45; }
  .nav .nav__link:hover { opacity: 1; transform: translateY(-2px); }
}

.menu-btn {
  display: none;
  appearance: none;
  border: 0;
  background: none;
  padding: 8px;
  margin: -8px;
  color: var(--rosa);
  line-height: 0;
}
.menu-btn svg { width: 36px; height: 34px; transition: transform .45s var(--curva); }
.menu-btn[aria-expanded="true"] svg { transform: rotate(90deg) scale(.86); }

/* ---------- Menú móvil ---------- */

.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--fondo);
  padding: clamp(104px, 13svh, 150px) 0 40px 24vw;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity .3s ease, visibility 0s linear .3s;
}
.menu-abierto .menu-movil {
  visibility: visible;
  opacity: 1;
  transition: opacity .3s ease, visibility 0s;
}
.menu-movil__lista { list-style: none; margin: 0; padding: 0; }
.menu-movil__lista li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .2s ease, transform .2s ease;
}
.menu-abierto .menu-movil__lista li {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .6s var(--curva);
  transition-delay: calc(60ms + var(--i, 0) * 55ms);
}
.menu-movil__lista li:nth-child(2) { --i: 1; }
.menu-movil__lista li:nth-child(3) { --i: 2; }
.menu-movil__lista li:nth-child(4) { --i: 3; }
.menu-movil__lista li:nth-child(5) { --i: 4; }
.menu-movil__lista li:nth-child(6) { --i: 5; }

.menu-movil__link {
  display: inline-block;
  padding: .42em 0;
  font-size: clamp(34px, 8.2vw, 60px);
  line-height: 1.1;
}
.menu-movil__link--crear { color: var(--rosa); font-weight: 900; font-size: clamp(38px, 9.4vw, 68px); }
.menu-movil__link--pre { color: var(--amarillo); }
.menu-movil__link--pro { color: var(--azul); }
.menu-movil__link--post { color: var(--verde); }
.menu-movil__link--contacto { color: var(--rosa); }
.menu-movil__divisor {
  width: 39vw;
  height: 2px;
  margin: clamp(22px, 4.2svh, 40px) 0 clamp(26px, 5svh, 48px) -7.4vw;
  background: var(--rosa);
}

/* ---------- Móvil ---------- */

@media (max-width: 767px) {
  .cabecera { padding: 20px; }
  .cabecera__logo { width: clamp(96px, 28vw, 128px); }
  .nav { display: none; }
  .menu-btn { display: block; }
}
@media (min-width: 768px) {
  .menu-movil { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
}

/* ---------- Palabras del menú en vectores ---------- */
.palabra { display: block; flex: none; height: .92em; width: auto; fill: currentColor; overflow: visible; }

/* ---------- Transiciones entre páginas (telon.js) ---------- */
.telon {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 90;
  contain: strict;
  will-change: transform, width, height;
}
.telon--fondo { z-index: -1; }
.telon-palabra {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 91;
  overflow: visible;
  pointer-events: none;
  contain: layout style;
}
.telon--tinte { transition: background-color .22s ease; }