/* =========================================================
   DESIGN CO — Capa de diseño y animación
   Todo lo que se mueve en el sitio vive aquí.
   Si alguien tiene activado "reducir movimiento" en su
   dispositivo, las animaciones se desactivan solas.
   ========================================================= */
:root {
  --titulos: "Poppins", var(--fuente);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
}
h1, h2, h3, .logo-texto, .pie__marca, .fila-servicio__nombre, .marquesina { font-family: var(--titulos); }
h1, h2 { font-weight: 700; letter-spacing: -0.03em; }
::selection { background: var(--acento); color: #fff; }

/* ---------- Cortina de entrada / salida entre páginas ---------- */
html.con-intro::after, html.entrando::after, html.saliendo::after {
  content: ""; position: fixed; inset: 0; background: var(--negro); z-index: 999; pointer-events: none;
}
html.entrando::after { animation: cortina-fuera .7s var(--ease) .05s forwards; }
html.saliendo::after { transform: translateY(100%); animation: cortina-dentro .45s var(--ease-in) forwards; }
html.con-intro::after { animation: cortina-fuera .6s var(--ease) 3s forwards; } /* respaldo si JS falla */
@keyframes cortina-fuera { to { transform: translateY(-100%); } }
@keyframes cortina-dentro { to { transform: translateY(0); } }

.precarga {
  position: fixed; inset: 0; z-index: 1000; background: var(--negro); color: #fff;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px;
  transition: transform .9s var(--ease);
}
.precarga.fuera { transform: translateY(-100%); }
.precarga__marca { font: 800 clamp(44px, 9vw, 120px)/1 var(--titulos); letter-spacing: -0.04em; display: flex; overflow: hidden; }
.precarga__marca span { display: inline-block; transform: translateY(110%); animation: letra .8s var(--ease) forwards; }
.precarga__marca .esp { width: .28em; }
.precarga__barra { width: min(240px, 50vw); height: 1px; background: rgba(255,255,255,.18); position: relative; overflow: hidden; }
.precarga__barra::after { content: ""; position: absolute; inset: 0; background: var(--acento); transform: scaleX(0); transform-origin: left; animation: barra 1.1s var(--ease) .2s forwards; }
.precarga__sub { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.55); opacity: 0; animation: aparece .6s ease .7s forwards; }
@keyframes letra { to { transform: translateY(0); } }
@keyframes barra { to { transform: scaleX(1); } }
@keyframes aparece { to { opacity: 1; } }

/* ---------- Encabezado que se oculta al bajar ---------- */
.encabezado { transition: transform .45s var(--ease), background .3s, border-color .3s; }
.encabezado.oculto { transform: translateY(-100%); }
body.en-portada .encabezado { background: transparent; border-color: transparent; backdrop-filter: none; }
body.en-portada .encabezado .menu a:not(.boton) { color: #fff; }
body.en-portada .encabezado .logo { color: #fff; }
body.en-portada .encabezado .menu-toggle span { background: #fff; }
body.en-portada .encabezado .menu .boton { background: #fff; color: var(--negro); border-color: #fff; }
body.en-portada .encabezado .menu .boton:hover { background: var(--acento); border-color: var(--acento); color: #fff; }
@media (max-width: 860px) {
  body.en-portada .encabezado .menu a:not(.boton) { color: var(--negro); }
  body.en-portada .encabezado .menu .boton { background: var(--negro); color: #fff; border-color: var(--negro); }
}
body.tiene-portada main { margin-top: -77px; }

/* ---------- Portada animada ---------- */
.portada { min-height: 100vh; min-height: 100svh; }
.portada__media { position: absolute; inset: 0; overflow: hidden; }
.portada__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.12); transition: opacity 1.6s ease, transform 7s linear;
}
.portada__media img.activa { opacity: .62; transform: scale(1); }
.portada .contenedor { padding-bottom: 64px; padding-top: 140px; }
.portada .portada__kicker {
  max-width: none;
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.75);
  margin: 0 0 22px; display: flex; align-items: center; gap: 14px;
}
.portada__kicker::before { content: ""; width: 36px; height: 1px; background: var(--acento); }
.portada__titulo { font-size: clamp(52px, 10vw, 148px); line-height: .95; letter-spacing: -0.045em; font-weight: 800; }
.portada__titulo .linea { display: block; overflow: hidden; padding-bottom: .06em; }
.portada__titulo .linea > span { display: inline-block; }
.rotador { color: var(--blanco); position: relative; display: inline-block; font-style: normal; }
.rotador::after { content: ""; position: absolute; left: 0; right: 0; bottom: .08em; height: .07em; background: var(--acento); transform-origin: left; }
.portada__pie { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-top: 36px; }
.portada__pie p { margin: 0; max-width: 460px; }
.portada__scroll {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1;
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.6);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.portada__scroll span { width: 1px; height: 42px; background: rgba(255,255,255,.25); position: relative; overflow: hidden; }
.portada__scroll span::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: #fff; animation: goteo 1.8s ease-in-out infinite; }
@keyframes goteo { to { top: 100%; } }
@media (max-width: 760px) { .portada__scroll { display: none; } }

/* Entrada del texto de la portada */
.js .portada__titulo .linea > span { transform: translateY(105%); }
.js .portada__kicker, .js .portada__pie { opacity: 0; transform: translateY(20px); }
.listo .portada__titulo .linea > span { transform: none; transition: transform 1.1s var(--ease); }
.listo .portada__titulo .linea:nth-child(2) > span { transition-delay: .1s; }
.listo .portada__titulo .linea:nth-child(3) > span { transition-delay: .2s; }
.listo .portada__kicker, .listo .portada__pie { opacity: 1; transform: none; transition: opacity .9s ease .45s, transform .9s var(--ease) .45s; }

/* Palabra que cambia */
.rotador.sale { animation: sale .45s var(--ease-in) forwards; }
.rotador.entra { animation: entra .6s var(--ease) forwards; }
@keyframes sale { to { transform: translateY(-105%); opacity: 0; } }
@keyframes entra { from { transform: translateY(105%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Marquesina ---------- */
.marquesina { background: var(--negro); color: #fff; overflow: hidden; padding: 26px 0; border-top: 1px solid rgba(255,255,255,.12); }
.marquesina__pista { display: flex; align-items: center; gap: 44px; width: max-content; animation: desliza 32s linear infinite; }
.marquesina:hover .marquesina__pista { animation-play-state: paused; }
.marquesina span { font-size: clamp(34px, 5.5vw, 76px); font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; line-height: 1; }
.marquesina .hueco { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.75); }
.marquesina i { width: 22px; height: 25px; background: var(--acento); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); flex: none; animation: gira 6s linear infinite; }
@keyframes desliza { to { transform: translateX(-50%); } }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Títulos palabra por palabra ---------- */
.anim-palabras .pal { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.anim-palabras .pal > span { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease); }
.anim-palabras.visible .pal > span { transform: none; }

/* ---------- Revelado de imágenes ---------- */
.revela, .tarjeta__foto, .persona__foto, .servicio-detalle__foto { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); }
.revela img, .tarjeta__foto > img:first-child, .persona__foto img, .servicio-detalle__foto img { transform: scale(1.18); transition: transform 1.6s var(--ease), opacity .4s, filter .4s; }
.revela.visible, .visible .tarjeta__foto, .visible.persona .persona__foto, .servicio-detalle__foto.visible { clip-path: inset(0 0 0 0); }
.revela.visible img, .visible .tarjeta__foto > img:first-child, .visible.persona .persona__foto img, .servicio-detalle__foto.visible img { transform: scale(1); }
.visible .tarjeta__foto:hover > img:first-child { transform: scale(1.05); }
html:not(.js) .revela, html:not(.js) .tarjeta__foto, html:not(.js) .persona__foto, html:not(.js) .servicio-detalle__foto { clip-path: none; }

/* Tarjetas: capa al pasar el cursor */
.tarjeta__foto::after {
  content: "Ver proyecto"; position: absolute; left: 16px; bottom: 16px; z-index: 2;
  background: #fff; color: var(--negro); font: 600 12px/1 var(--fuente); letter-spacing: .12em; text-transform: uppercase;
  padding: 11px 14px; transform: translateY(12px); opacity: 0; transition: transform .45s var(--ease), opacity .3s;
}
.tarjeta:hover .tarjeta__foto::after { transform: none; opacity: 1; }
.rejilla .tarjeta:nth-child(3n+2) { transition-delay: .08s; }
.rejilla .tarjeta:nth-child(3n+3) { transition-delay: .16s; }
@media (min-width: 981px) {
  #destacados .tarjeta:nth-child(3n+2) { margin-top: 72px; }
}

/* ---------- Lista de servicios (Inicio) ---------- */
.seccion--negra { background: var(--negro); color: #fff; position: relative; overflow: hidden; }
.seccion--negra .titulo-seccion { color: #fff; }
.seccion--negra .enlace-flecha:hover { color: var(--acento); }
.lista-servicios { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,.18); }
.fila-servicio {
  display: grid; grid-template-columns: 70px 1.1fr 1fr 40px; gap: 24px; align-items: center;
  padding: 34px 0; border-bottom: 1px solid rgba(255,255,255,.18); position: relative;
}
.fila-servicio::before { content: ""; position: absolute; inset: 0; background: var(--acento); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); z-index: 0; }
.fila-servicio > * { position: relative; z-index: 1; }
.fila-servicio__num { font-size: 13px; color: rgba(255,255,255,.5); letter-spacing: .12em; }
.fila-servicio__nombre { font-size: clamp(28px, 4vw, 54px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; transition: transform .5s var(--ease); }
.fila-servicio__desc { font-size: 15px; color: rgba(255,255,255,.62); transition: color .3s; }
.fila-servicio__flecha { font-size: 26px; transition: transform .5s var(--ease); }
.fila-servicio__mini { display: none; }
.fila-servicio:hover .fila-servicio__nombre { transform: translateX(14px); }
.fila-servicio:hover .fila-servicio__flecha { transform: translateX(6px) rotate(-45deg); }
@media (hover: none), (max-width: 860px) {
  .fila-servicio { grid-template-columns: 1fr 88px; grid-template-areas: "nombre mini" "desc mini"; gap: 8px 18px; padding: 26px 0; }
  .fila-servicio__num, .fila-servicio__flecha { display: none; }
  .fila-servicio__nombre { grid-area: nombre; }
  .fila-servicio__desc { grid-area: desc; }
  .fila-servicio__mini { display: block; grid-area: mini; width: 88px; height: 88px; object-fit: cover; }
}
.flotante {
  position: fixed; left: 0; top: 0; width: 300px; height: 380px; pointer-events: none; z-index: 40;
  overflow: hidden; opacity: 0; transform: translate(-50%, -50%) scale(.7); transition: opacity .35s, transform .5s var(--ease);
}
.flotante img { width: 100%; height: 100%; object-fit: cover; }
.flotante.activo { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none), (max-width: 860px) { .flotante { display: none; } }

/* ---------- Proceso: línea que se dibuja ---------- */
.anim-proceso .paso { border-top-color: transparent; position: relative; }
.anim-proceso .paso::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--negro); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.anim-proceso .paso > * { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s var(--ease); }
.anim-proceso.visible .paso::after { transform: scaleX(1); }
.anim-proceso.visible .paso > * { opacity: 1; transform: none; }
.anim-proceso .paso:nth-child(2)::after, .anim-proceso .paso:nth-child(2) > * { transition-delay: .15s; }
.anim-proceso .paso:nth-child(3)::after, .anim-proceso .paso:nth-child(3) > * { transition-delay: .3s; }
.anim-proceso .paso:nth-child(4)::after, .anim-proceso .paso:nth-child(4) > * { transition-delay: .45s; }
.anim-proceso .paso:nth-child(5)::after, .anim-proceso .paso:nth-child(5) > * { transition-delay: .6s; }
.anim-proceso .paso::before { transition: color .3s; }

/* ---------- Logos en carrusel ---------- */
.carrusel-logos { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.carrusel-logos .logos { display: flex; gap: 72px; width: max-content; animation: desliza 28s linear infinite; }
.carrusel-logos .logos img { width: 120px; max-width: none; }
.carrusel-logos:hover .logos { animation-play-state: paused; }

/* ---------- Patrón hexagonal en movimiento ---------- */
.cta::before, .pie::before { animation: hex-deriva 40s linear infinite; }
@keyframes hex-deriva { to { background-position: 56px 97px; } }

/* ---------- Botones magnéticos ---------- */
.magnetico { transition: transform .35s var(--ease), background .2s, border-color .2s, color .2s; will-change: transform; }

/* ---------- Cursor personalizado (solo con mouse) ---------- */
.cursor, .cursor-punto { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 1001; border-radius: 50%; mix-blend-mode: difference; }
.cursor { width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid #fff; transition: width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background .3s, opacity .3s; display: flex; align-items: center; justify-content: center; }
.cursor-punto { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; }
.cursor span { font: 600 11px/1 var(--fuente); letter-spacing: .12em; text-transform: uppercase; color: #000; opacity: 0; transition: opacity .2s; }
.cursor.sobre-enlace { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(255,255,255,.12); }
.cursor.ver { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: #fff; }
.cursor.ver span { opacity: 1; }
.cursor.oculto, .cursor-punto.oculto { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-punto { display: none; } }

/* ---------- Ficha de proyecto ---------- */
.ficha-portada img { transform: scale(1.08); }
.galeria button { overflow: hidden; }
.galeria button img { transform: scale(1.1); opacity: 0; transition: transform 1.2s var(--ease), opacity .8s ease; }
.galeria button.visible img { transform: scale(1); opacity: 1; }
.galeria button:hover img { transform: scale(1.03); }

/* ---------- Barra de progreso de lectura ---------- */
.progreso { position: fixed; left: 0; top: 0; height: 2px; width: 100%; background: var(--acento); transform: scaleX(0); transform-origin: left; z-index: 60; pointer-events: none; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html::after { display: none !important; }
  .precarga { display: none; }
  .js .portada__titulo .linea > span, .js .portada__kicker, .js .portada__pie, .anim-palabras .pal > span, .anim-proceso .paso > * { transform: none !important; opacity: 1 !important; }
  .revela, .tarjeta__foto, .persona__foto, .servicio-detalle__foto { clip-path: none !important; }
  .revela img, .tarjeta__foto > img, .persona__foto img, .servicio-detalle__foto img, .galeria button img { transform: none !important; opacity: 1 !important; }
  .anim-proceso .paso::after { transform: none !important; }
  .marquesina__pista, .carrusel-logos .logos, .marquesina i, .cta::before, .pie::before { animation: none !important; }
  .cursor, .cursor-punto, .flotante { display: none !important; }
}

@media (max-width: 600px) {
  .portada .portada__kicker { font-size: 11px; letter-spacing: .14em; }
  .portada__kicker::before { width: 22px; }
  .portada .contenedor { padding-bottom: 48px; }
  .marquesina { padding: 18px 0; }
}

/* ---------- Videos de proceso ---------- */
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.video { margin: 0; position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: var(--negro); }
.video video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); }
.video:hover video { transform: scale(1.04); }
.video figcaption { position: absolute; left: 16px; bottom: 16px; color: #fff; font: 600 13px/1 var(--fuente); letter-spacing: .1em; text-transform: uppercase; background: rgba(17,17,17,.55); padding: 10px 12px; backdrop-filter: blur(4px); }
.videos .video:nth-child(2) { transform: translateY(48px); }
.videos .video.aparecer:nth-child(2).visible { transform: translateY(48px); }
@media (max-width: 760px) {
  .videos { grid-template-columns: repeat(3, 72%); overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-right: -24px; padding-right: 24px; }
  .video { scroll-snap-align: start; }
  .videos .video:nth-child(2), .videos .video.aparecer:nth-child(2).visible { transform: none; }
}

/* ---------- Ajustes v3: portada en pantallas bajas y legibilidad del menú ---------- */
.portada__titulo { font-size: clamp(44px, min(10vw, 15.5vh), 148px); }
.portada .contenedor { padding-top: 110px; }
.portada::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 180px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.portada::after { background: linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(0,0,0,.78) 100%); }
@media (max-height: 700px) and (min-width: 861px) {
  .portada__pie { margin-top: 24px; }
  .portada .portada__kicker { margin-bottom: 14px; }
  .portada .contenedor { padding-bottom: 40px; }
  .portada__scroll { display: none; }
}
.portada__titulo { font-size: clamp(44px, min(10vw, 13.5vh), 148px); }
@media (max-height: 700px) and (min-width: 861px) { .portada .contenedor { padding-top: 96px; } }
/* Que no se corten las letras con cola (g, j, p, q, y) */
.anim-palabras .pal { padding-bottom: .22em; margin-bottom: -.22em; }
.portada__titulo .linea { padding-bottom: .14em; margin-bottom: -.08em; }
/* Equipo más compacto en el Inicio */
#equipo[data-corto] { max-width: 880px; }
#equipo[data-corto] .persona__foto { aspect-ratio: 1 / 1; }
@media (min-width: 861px) { .portada__pie .acciones { margin-right: 76px; } }
.ficha-texto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (max-width: 760px) {
  #equipo[data-corto] { grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: none; }
  #equipo[data-corto] .persona h3 { font-size: 14px; }
  #equipo[data-corto] .persona .cargo { font-size: 11px; line-height: 1.3; }
}