/* Próspero Studio · páginas de sección (pre, pro, post, manifiestos)
   Diseño de la guía visual, página 5. El color lo define el modificador del <body>. */

.seccion {
  --color-seccion: var(--azul);
  --claro: #e6e6e6;
  --lado: 12.35vw;
  --expo: cubic-bezier(.16, 1, .3, 1);
  color: var(--claro);
  background: var(--color-seccion);
}
.seccion--pro { --color-seccion: var(--azul); }
.seccion--post { --color-seccion: var(--verde); }
.seccion--pre { --color-seccion: var(--amarillo); }
.seccion--mnfstos { --color-seccion: var(--rojo); }
.seccion--contacto { --color-seccion: var(--rosa); }
.seccion--crear { --color-seccion: var(--rosa); }

/* ---------- Fondo ----------
   El color vive en <html> (lo pone seccion.js); el <body> es transparente para que
   el telón de la entrada directa se vea detrás del contenido. */
.js body.seccion { background: transparent; }
/* Durante el cambio a otra sección sólo quedan a la vista el telón y la palabra */
.seccion.oculto > *:not(.telon):not(.telon-palabra) { visibility: hidden; }

/* ---------- Cabecera y menú sobre color ---------- */

.seccion .cabecera {
  transition: opacity .8s ease, transform .5s var(--expo), background-color .3s ease, padding .4s var(--expo);
}
.js .seccion .cabecera { opacity: 0; pointer-events: none; }
.js.pintado .seccion .cabecera { opacity: 1; pointer-events: auto; }
.seccion .cabecera--compacta {
  background: var(--color-seccion);
  padding-top: clamp(12px, 1.2vw, 22px);
  padding-bottom: clamp(12px, 1.2vw, 22px);
}
.seccion .cabecera--oculta { transform: translateY(-101%); }
.menu-abierto .seccion .cabecera { transform: none; background: none; }

/* Como en la guía: sobre el color de la sección el menú va en claro y la sección activa en azul marino. */
.seccion .nav__link,
.seccion .menu-btn { color: var(--claro); }
.seccion .nav__link[aria-current="page"] { color: var(--tinta); }
.seccion .nav__divisor { background: var(--claro); }

/* El menú móvil conserva los colores del inicio (fondo gris, cada palabra en su color);
   con él abierto, el botón y el logotipo cambian para leerse sobre el gris. */
.menu-abierto .seccion .menu-btn { color: var(--rosa); }
.menu-abierto .seccion .cabecera__logo img { filter: brightness(0); }
.seccion .cabecera__logo img { transition: filter .3s ease; }

/* ---------- Título ---------- */

.contenido {
  padding: clamp(128px, 12.4vw, 270px) var(--lado) clamp(88px, 9vw, 190px);
}

.titulo {
  margin: 0;
  font-size: clamp(44px, 9.75vw, 240px);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.012em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--claro);
}
/* Hasta que seccion.js lo parte en letras (ya ocultas en su máscara), el título no se pinta:
   así nunca se ve entero un instante antes de animarse. Si el código no llegara a correr,
   aparece solo a los 5 segundos. */
@keyframes titulo-rescate { to { visibility: visible; } }
.js .titulo:not(.titulo--lista) { visibility: hidden; animation: titulo-rescate 0s 5s forwards; }

.titulo__letra {
  display: inline-block;
  overflow: hidden;
  overflow: clip;
  padding-top: .22em;
  margin-top: -.22em;
  vertical-align: bottom;
}
.titulo__letra > span {
  display: inline-block;
  transform: translateY(104%) rotate(7deg);
  transform-origin: 0 100%;
  transition: transform 1.15s var(--expo);
  transition-delay: calc(var(--n, 0) * 42ms);
  will-change: transform;
}
.pintado .titulo__letra > span { transform: none; }

/* ---------- Texto de apertura (Manifiestos; guía visual, página 19) ---------- */

.intro {
  width: 55.15vw;
  margin-top: clamp(26px, 3.6vw, 80px);
  --paso: 0;
}
.intro__termino {
  margin: 0;
  font-size: clamp(26px, 2.25vw, 52px);
  font-weight: 800;
  line-height: 1.1;
}
.intro__acepciones {
  list-style: none;
  margin: .35em 0 0;
  padding: 0 0 0 7.1vw;
  font-size: clamp(16px, 1.35vw, 32px);
  font-weight: 700;
  line-height: 1.38;
}
.intro__acepciones em { font-style: italic; }
.intro__texto {
  margin: clamp(22px, 2.4vw, 56px) 0 0;
  font-size: clamp(15px, 1.18vw, 28px);
  font-weight: 400;
  line-height: 1.75;
  text-align: justify;
  hyphens: auto;
}
.intro + .proyectos { margin-top: clamp(30px, 3.4vw, 76px); }

/* Entra en cascada cuando el título terminó de mostrarse; al rebobinar se recoge junto y rápido */
.js .intro__termino,
.js .intro__acepciones li,
.js .intro__texto {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .25s ease, transform .3s ease;
}
.js.pintado .intro__termino,
.js.pintado .intro__acepciones li,
.js.pintado .intro__texto {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform 1s var(--expo);
  transition-delay: calc(var(--tras-titulo, .45s) + var(--paso, 0) * .1s);
}
.intro__acepciones li:nth-child(1) { --paso: 1; }
.intro__acepciones li:nth-child(2) { --paso: 2; }
.intro__texto { --paso: 3.5; }

/* ---------- Proyectos ---------- */

.proyectos {
  list-style: none;
  margin: clamp(26px, 3.3vw, 70px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(56px, 5.1vw, 110px);
}
.proyecto {
  display: grid;
  grid-template-columns: minmax(0, 55.15vw) minmax(0, 1fr);
  gap: 2.1vw;
  align-items: start;
}

.video {
  position: relative;
  aspect-ratio: var(--proporcion, 16 / 9);
  background: #000;
  overflow: hidden;
}
.video video,
.video__portada {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.video video { background: #000; }
.video--franjas .video__portada { object-fit: contain; }
.video__portada {
  object-fit: cover;
  transition: opacity .5s ease, transform 1.6s var(--expo);
}

.video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  padding: 0;
  background: rgba(5, 19, 54, .2);
  color: #fff;
  transition: background-color .4s ease, opacity .4s ease;
}
.video__play svg {
  width: clamp(72px, 7.4vw, 140px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .45));
  transition: transform .6s var(--expo);
}
.video__play .play__triangulo { transform-origin: 34.57px 32.47px; transition: transform .6s var(--expo); }
.video__play:focus-visible { outline-offset: -10px; outline-color: #fff; }
@media (hover: hover) {
  .video__play:hover { background: rgba(5, 19, 54, .05); }
  .video__play:hover svg { transform: scale(.9); }
  .video__play:hover .play__triangulo { transform: scale(1.5); }
  .video:hover .video__portada { transform: scale(1.035); }
}
.video__play:active svg { transform: scale(.84); }

.video.reproduciendo .video__portada,
.video.reproduciendo .video__play { opacity: 0; pointer-events: none; }

/* ---------- Ficha ---------- */

.ficha { --sangria: clamp(12px, 1.02vw, 24px); }
/* Ícono de AI: video asistido por inteligencia artificial. Va sobre la ficha, con la forma y
   el color del cuadro de la sección. --ancho son las unidades de su SVG; todos a la misma escala. */
.ficha__ai {
  display: block;
  width: calc(var(--ancho) * clamp(.5px, .0523vw, 1.2px));
  height: auto;
  margin: 0 0 clamp(16px, 1.55vw, 34px);
}
.js .proyecto .ficha__ai {
  opacity: 0;
  transform: translateY(14px) scale(.86);
  transform-origin: 0 100%;
  transition: opacity .6s ease .15s, transform .9s var(--expo) .15s;
}
.js .proyecto.visible .ficha__ai { opacity: 1; transform: none; }
.js.rebobinando .proyecto.visible .ficha__ai { opacity: 0; transition: opacity .2s ease; }

.ficha__linea {
  display: block;
  width: clamp(56px, 5.6vw, 130px);
  height: 2px;
  background: var(--claro);
  transform-origin: 0 50%;
}
.ficha__nombre {
  margin: clamp(14px, 1.35vw, 30px) 0 clamp(14px, 1.35vw, 30px) var(--sangria);
  font-size: clamp(18px, 1.42vw, 34px);
  font-weight: 800;
  line-height: 1.6;
}
.ficha__nombre span { display: block; }
.ficha__datos {
  margin: clamp(10px, 1vw, 22px) 0 0 var(--sangria);
  padding: 0;
  list-style: none;
  font-size: clamp(15px, 1.18vw, 28px);
  font-weight: 400;
  line-height: 2;
}

.ficha__texto {
  margin: clamp(10px, 1vw, 22px) 0 0 var(--sangria);
  max-width: 36em;
  font-size: clamp(15px, 1.1vw, 26px);
  font-weight: 400;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---------- Entrada de cada proyecto al aparecer en pantalla ---------- */

.js .proyecto .video {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.25s var(--expo);
}
.js .proyecto .video__portada { transform: scale(1.16); }
.js .proyecto .video__play svg { opacity: 0; transform: scale(.6); transition: opacity .6s ease .55s, transform .9s var(--expo) .55s; }
.js .proyecto .ficha__linea { transform: scaleX(0); transition: transform .9s var(--expo); }
.js .proyecto .ficha__nombre span,
.js .proyecto .ficha__datos li,
.js .proyecto .ficha__texto {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .9s var(--expo);
}

.js .proyecto.visible .video { clip-path: inset(0 0 0 0); }
.js .proyecto.visible .video__portada { transform: none; }
.js .proyecto.visible .video__play svg { opacity: 1; transform: none; }
.js .proyecto.visible .ficha__linea { transform: none; }
.js .proyecto.visible .ficha__nombre span,
.js .proyecto.visible .ficha__datos li,
.js .proyecto.visible .ficha__texto { opacity: 1; transform: none; }

.js .proyecto .ficha__linea:nth-of-type(1) { transition-delay: .25s; }
.js .proyecto .ficha__nombre span:nth-child(1) { transition-delay: .35s; }
.js .proyecto .ficha__nombre span:nth-child(2) { transition-delay: .43s; }
.js .proyecto .ficha__linea--dos { transition-delay: .5s; }
.js .proyecto .ficha__datos li:nth-child(1),
.js .proyecto .ficha__texto { transition-delay: .6s; }
.js .proyecto .ficha__datos li:nth-child(2) { transition-delay: .68s; }

/* Ya animado: se sueltan los retrasos para que el hover responda al instante */
.js .proyecto.asentado .video__play svg { transition: transform .6s var(--expo); }
.js .proyecto.asentado .video__portada { transition: opacity .5s ease, transform 1.6s var(--expo); }

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

@media (max-width: 767px) {
  .seccion { --lado: 20px; }
  .contenido { padding-top: 116px; }
  /* El tamaño se ajusta al número de letras para que el título quepa en un renglón */
  .titulo { font-size: calc(136vw / max(10, var(--largo, 10))); }
  .proyecto { grid-template-columns: 1fr; gap: 22px; }
  .proyectos { gap: 64px; margin-top: 28px; }
  .ficha__nombre { line-height: 1.4; }
  .intro { width: 100%; margin-top: 26px; }
  .intro__acepciones { padding-left: 22px; }
  .intro__texto { text-align: left; hyphens: manual; line-height: 1.65; }
  .ficha__datos { line-height: 1.8; }
}

/* ---------- Rebobinar ----------
   Al volver al inicio todo se recoge al revés y más rápido que la entrada:
   las letras del título de la última a la primera, los videos se cubren,
   las líneas se destrazan. Después seccion.js contrae el fondo. */
.js.rebobinando .seccion .cabecera { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.rebobinando .titulo__letra > span {
  transition: transform .42s cubic-bezier(.6, 0, .9, .3);
  transition-delay: calc((var(--letras, 10) - 1 - var(--n, 0)) * 22ms);
}
.js.rebobinando .proyecto.visible .video { clip-path: inset(0 0 100% 0); transition: clip-path .45s cubic-bezier(.6, 0, .9, .3); }
.js.rebobinando .proyecto.visible .video__play svg { opacity: 0; transition: opacity .2s ease; }
.js.rebobinando .proyecto.visible .ficha__linea { transform: scaleX(0); transition: transform .35s cubic-bezier(.6, 0, .9, .3); transition-delay: 0s; }
.js.rebobinando .proyecto.visible .ficha__nombre span,
.js.rebobinando .proyecto.visible .ficha__datos li,
.js.rebobinando .proyecto.visible .ficha__texto {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .25s ease, transform .35s ease;
  transition-delay: 0s;
}
.js.rebobinando .contenido { pointer-events: none; }

/* ---------- Contacto: formulario (guía visual, página 15) ---------- */

.seccion--contacto { --campo: #dcdcdc; --ciruela: #6b1a47; --tinta-rosa: #3f041e; }

.formulario {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 2vw, 46px) 2.45vw;
  width: 57.5vw;
  margin: clamp(34px, 3.1vw, 70px) 0 0 .6vw;
  font-size: clamp(17px, 1.4vw, 30px);
  transition: opacity .45s ease, transform .5s var(--expo);
}
.formulario--fuera { opacity: 0; transform: translateY(-18px); pointer-events: none; }

.campo { position: relative; }
.campo--mensaje,
.formulario__pie { grid-column: 1 / -1; }

.campo input,
.campo textarea {
  display: block;
  width: 100%;
  min-height: clamp(48px, 2.5vw, 66px);
  padding: .5em 1em;
  border: 0;
  border-radius: 8px;
  background: var(--campo);
  color: var(--tinta-rosa);
  font: inherit;
  font-weight: 600;
  transition: box-shadow .25s ease, background-color .25s ease;
}
.campo textarea {
  height: clamp(220px, 17vw, 420px);
  padding-top: .8em;
  line-height: 1.45;
  resize: vertical;
}
.campo input:focus-visible,
.campo textarea:focus-visible { outline: 2px solid #fff; outline-offset: 3px; background: #fff; }
.campo [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--tinta-rosa); }

/* La etiqueta vive dentro de la caja, como en la guía; al escribir sube y se encoge
   en lugar de desaparecer, para que no se pierda qué campo es. */
.campo label {
  position: absolute;
  left: 1em;
  top: clamp(24px, 1.25vw, 33px);
  color: var(--color-seccion);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
  transform-origin: 0 50%;
  transition: transform .45s var(--expo), color .3s ease;
}
.campo--mensaje label { top: 1.35em; }
.campo input:focus + label,
.campo textarea:focus + label,
.campo input:not(:placeholder-shown) + label,
.campo textarea:not(:placeholder-shown) + label {
  color: var(--claro);
  transform: translate(-1em, calc(-50% - clamp(24px, 1.25vw, 33px) - .7em)) scale(.66);
}
.campo--mensaje textarea:focus + label,
.campo--mensaje textarea:not(:placeholder-shown) + label {
  transform: translate(-1em, calc(-50% - 1.35em - .7em)) scale(.66);
}

.campo__error {
  margin: .5em 0 0 .2em;
  color: var(--tinta-rosa);
  font-size: .68em;
  font-weight: 700;
}
.campo-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.formulario__pie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.2em;
  margin-top: clamp(-8px, -.3vw, 0px);
}
.formulario__aviso { margin: 0 auto 0 0; color: var(--tinta-rosa); font-size: .78em; font-weight: 700; }

.boton-enviar {
  flex: none;
  padding: .72em 1.9em;
  border: 0;
  border-radius: 8px;
  background: var(--ciruela);
  color: var(--color-seccion);
  font: inherit;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  transition: background-color .3s ease, color .3s ease, transform .45s var(--expo);
}
.boton-enviar:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.boton-enviar:active { transform: scale(.96); }
.boton-enviar:disabled { opacity: .75; }
@media (hover: hover) {
  .boton-enviar:not(:disabled):hover { background: var(--tinta-rosa); color: #fff; transform: translateY(-3px); }
}
@keyframes enviando { 50% { opacity: .35; } }
.enviando .boton-enviar span { display: inline-block; animation: enviando 1s ease-in-out infinite; }

/* Confirmación: ocupa el lugar del formulario */
.enviado {
  margin: clamp(34px, 3.1vw, 70px) 0 0 .6vw;
  max-width: 57.5vw;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .35s ease, transform .4s ease;
  outline: none;
}
.enviado--visible { opacity: 1; transform: none; transition: opacity .7s ease, transform .9s var(--expo); }
.enviado__titulo { margin: 0; font-size: clamp(30px, 3.2vw, 72px); font-weight: 800; line-height: 1.05; }
.enviado__texto { margin: .6em 0 1.4em; font-size: clamp(17px, 1.4vw, 30px); font-weight: 400; }
.enviado__otro {
  padding: 0 0 .15em;
  border: 0;
  border-bottom: 2px solid currentColor;
  background: none;
  color: var(--claro);
  font: inherit;
  font-size: clamp(16px, 1.2vw, 26px);
}

/* Entrada en cascada al terminar de pintarse el fondo; al rebobinar se recogen juntos y rápido */
.js .formulario .campo,
.js .formulario .boton-enviar {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .25s ease, transform .3s ease;
}
.js.pintado .formulario .campo,
.js.pintado .formulario .boton-enviar {
  opacity: 1;
  transform: none;
  transition: opacity .7s ease, transform 1s var(--expo), background-color .3s ease, color .3s ease;
  transition-delay: calc(var(--tras-titulo, .38s) + var(--paso, 0) * .1s);
}
.formulario .campo--correo { --paso: 1; }
.formulario .campo--mensaje { --paso: 2; }
.formulario .boton-enviar { --paso: 3; }
/* Ya adentro, el botón responde sin el retraso de la entrada */
.js.pintado .formulario .boton-enviar:hover,
.js.pintado .formulario .boton-enviar:active { transition-delay: 0s; }
.js .enviado { transition-duration: .3s; }

@media (max-width: 767px) {
  .formulario { grid-template-columns: 1fr; width: 100%; margin-left: 0; gap: 34px; }
  .enviado { margin-left: 0; max-width: none; }
  .formulario__pie { flex-wrap: wrap; }
  .formulario__aviso { flex-basis: 100%; }
}

/* ---------- Pleca gris con láminas (Preproducción; maqueta del 9 oct 2026) ----------
   Arriba queda la franja del color de la sección con el título; debajo, un bloque gris a
   todo el ancho. Orden de entrada: se pinta el color, la pleca sube desde abajo y
   después aparecen cabecera, título y láminas. */

.seccion--pleca .contenido { padding-bottom: 0; overflow: clip; }

.pleca {
  margin: clamp(26px, 4vw, 90px) calc(-1 * var(--lado)) 0;
  padding: clamp(38px, 8vw, 170px) var(--lado) clamp(60px, 9vw, 190px);
  min-height: 60vh;
  background: var(--claro);
}
.laminas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(26px, 6.2vw, 130px);
}
/* El recorte de entrada va en el marco interior: si fuera en la propia lámina, el navegador
   la daría por invisible y nunca avisaría de que entró en pantalla. */
.lamina__marco { overflow: hidden; background: #111; }
.lamina img { display: block; width: 100%; height: auto; }

.js .pleca {
  transform: translateY(100vh);
  transition: transform .34s cubic-bezier(.6, 0, .9, .3);     /* al rebobinar baja rápido */
}
.js.pintado .pleca {
  transform: none;
  transition: transform 1.05s var(--expo);
}
/* Cabecera y título esperan a la pleca */
.js.pintado .seccion--pleca .titulo__letra > span { transition-delay: calc(.6s + var(--n, 0) * 42ms); }
.js.pintado .seccion--pleca .cabecera { transition-delay: .6s, 0s, 0s, 0s; }

.js .lamina__marco {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.25s var(--expo);
}
.js .lamina img { transform: scale(1.1); transition: transform 1.6s var(--expo); }
.js .lamina.visible .lamina__marco { clip-path: inset(0 0 0 0); }
.js .lamina.visible img { transform: none; }
.js.rebobinando .lamina.visible .lamina__marco { clip-path: inset(0 0 100% 0); transition: clip-path .3s cubic-bezier(.6, 0, .9, .3); }

@media (max-width: 767px) {
  .pleca { margin-top: 30px; padding: 34px var(--lado) 64px; }
  .laminas { gap: 26px; }
}