/* ══════════════════════════════════════════════════════════════════
   Sitio · home, talentos, nosotros y el overlay de contacto
   Se apoya en main.css: mismos tokens, mismo blend difference.
   ══════════════════════════════════════════════════════════════════ */

/* ── HOME: una sola pantalla, sin scroll ──────────────────────── */
.home_c{
  position:relative;width:100%;height:100svh;overflow:hidden;
  color:var(--color-light);
  background-color:var(--color-dark);
}
/* Cuadrícula de fondo, apagada a prueba. Son dos gradientes de 1px, sin
   canvas ni imágenes: descomentar los dos bloques para volver a verla.
.home_c{
  background-image:
    linear-gradient(to right,  rgba(233,234,228,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(233,234,228,.055) 1px, transparent 1px);
  background-size:72px 72px;
  background-position:center center;
}
@media(max-width:768px){.home_c{background-size:48px 48px}}
*/

.works_infos{
  position:fixed;bottom:0;left:0;z-index:6;
  display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;
  width:100%;padding:20px;gap:24px;
  color:var(--color-light);mix-blend-mode:difference;
  font-size:var(--fontS);font-weight:500;line-height:130%;text-transform:uppercase;
}
.works_infos .l,.works_infos .m,.works_infos .r{display:flex;flex-direction:column;gap:2px}
/* cada línea entera: sin esto la segunda parte se parte en dos */
.works_infos .l{max-width:none}
.works_infos .l .defecto span{white-space:nowrap}
.works_infos .m{align-items:center;text-align:center}
.works_infos .r{align-items:flex-end;text-align:right}
.works_infos a{pointer-events:auto;transition:opacity .2s ease-out}
.works_infos a:hover{opacity:.5}

.home_lema{
  /* main.css pone display:flex en todos los h1-h5: sin esto las dos
     líneas se acomodan en fila y quedan pegadas. */
  display:block;
  color:var(--color-light);mix-blend-mode:difference;
  font-family:var(--display);font-size:clamp(30px,4.4vw,68px);line-height:88%;
  text-align:center;text-wrap:balance;pointer-events:none;
}
.home_lema .linea{display:block;overflow:hidden}
.home_lema .linea span{display:block}
.home_proy{
  display:flex;flex-direction:column;gap:10px;
  width:clamp(220px,26vw,420px);
  transition:filter .8s var(--ease),transform .8s var(--ease);
  will-change:transform,filter;
}
/* el que recibe el hover se agranda */
.home_proy:hover{transform:scale(1.05)}
.home_proy:hover .home_proy_media img{transform:scale(1)}
/* los demás quedan en blanco y negro (la clase la pone Discover()) */
.home_proy.is-faded{filter:grayscale(100%);opacity:.55}
.home_proy_info .n .cube{width:4px;aspect-ratio:1;background-color:currentColor}
.home_proy_info .nombre{font-family:var(--display);font-size:22px;text-transform:none;line-height:100%}
.home_proy_info .tipo{text-align:right;opacity:.7}

/* reloj vivo */
.jour_abs{display:flex;flex-direction:column;gap:2px}
.jour{display:flex;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.jour .cube{width:4px;aspect-ratio:1;background-color:currentColor}

/* ── OVERLAY DE CONTACTO ──────────────────────────────────────── */
.contact{
  position:fixed;inset:0;z-index:40;
  visibility:hidden;opacity:0;
  background-color:var(--color-dark);color:var(--color-light);
}
.contact.is-open{visibility:visible;opacity:1}
.contact_webgl{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}
.contact_inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;gap:40px;
  height:100%;padding:120px 40px 40px;
}
.contact_mail{
  font-family:var(--display);font-size:clamp(32px,6vw,92px);line-height:90%;
  width:fit-content;transition:opacity .2s ease-out;
}
.contact_mail:hover{opacity:.5}
.contact_cols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  font-size:var(--fontS);font-weight:500;text-transform:uppercase;line-height:150%;
}
.contact_cols h4{color:#8b8d85;padding-bottom:8px}
.contact_cols a{transition:opacity .2s ease-out}
.contact_cols a:hover{opacity:.5}
.contact_close{
  position:absolute;top:22px;right:22px;z-index:3;
  font-size:var(--fontS);font-weight:500;text-transform:uppercase;cursor:pointer;
  mix-blend-mode:difference;transition:opacity .2s ease-out;
}
.contact_close:hover{opacity:.5}

@media(max-width:768px){
  /* En el teléfono la barra de abajo queda sólo con el lema. El nombre
     del proyecto señalado y el reloj con el mail se caen: el primero
     depende de un hover que en táctil no existe, y el segundo repite
     algo que el menú y el pie ya dicen. Con los tres, la franja comía
     tres renglones debajo de la órbita y le sacaba aire al trabajo. */
  .works_infos{grid-template-columns:1fr;gap:12px;padding:16px}
  .works_infos .m,.works_infos .r{display:none}
  .works_infos .l .senalado{display:none}
  .works_infos .l .defecto{opacity:1 !important}
  .works_infos .l .defecto span{white-space:normal}
  .home_lema{padding:0 20px;font-size:clamp(32px,11vw,60px)}
  .contact_inner{padding:90px 20px 32px;gap:28px}
  .contact_cols{grid-template-columns:1fr;gap:20px}
}
.lista{display:flex;flex-direction:column;gap:88px;padding-top:60px}
.caso{display:flex;flex-direction:column;gap:12px;width:100%}
.caso:hover .caso_media img{transform:scale(1)}
.caso_n .cube{width:4px;aspect-ratio:1;background-color:#455e53}
.caso_tipo{color:#6d6f68;text-align:right}

/* ── TALENTOS: capas fijas con contador ───────────────────────── */
/* ── TALENTOS · díptico ────────────────────────────────────────────
   Los dos retratos ocupan media pantalla cada uno y siempre están a la
   vista: son un par matcheado en encuadre y pose con colores opuestos,
   y eso sólo funciona si se ven juntos.

   Al abrir una ficha, esa foto se queda en su lado y el lado contrario
   se vuelve blanco con la información. La foto de la otra persona no se
   achica: se retira, para que no compita con la que estás leyendo. ── */
.talentos_c{
  position:relative;width:100%;height:100svh;overflow:hidden;
  background-color:var(--color-dark);color:var(--color-light);
}
.dip{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:100%;
  width:100%;height:100%;
}
.dip_lado{position:relative;overflow:hidden;min-width:0}
.dip_lado[data-lado="0"]{grid-area:1/1}
.dip_lado[data-lado="1"]{grid-area:1/2}

.dip_foto{
  position:relative;display:block;width:100%;height:100%;
  cursor:pointer;overflow:hidden;
}
.dip_foto img{
  width:100%;height:100%;display:block;
  /* arriba y no al centro: son retratos, y el recorte centrado se comía
     parte de la cabeza para dejar aire de más abajo del torso */
  object-fit:cover;object-position:center top;
  transition:transform .9s var(--ease),filter .5s var(--ease);
}
/* El hover hace tres cosas a la vez y ninguna sola alcanzaría: la foto
   se acerca, se oscurece —para que el rótulo se lea sobre cualquier
   parte de la imagen— y aparece el "ver más". Sin el oscurecido el texto
   competía con la cara; sin el rótulo, el acercamiento no explicaba nada. */
.dip_foto:hover img,
.dip_foto:focus-visible img{transform:scale(1.045);filter:brightness(.62)}

.dip_ver{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  pointer-events:none;
  opacity:0;transition:opacity .4s var(--ease);
}
.dip_foto:hover .dip_ver,
.dip_foto:focus-visible .dip_ver{opacity:1}
.dip_ver_ico{
  display:grid;place-items:center;
  width:clamp(76px,7.5vw,108px);aspect-ratio:1;
  border:1px solid #e9eae466;border-radius:50%;
  color:var(--color-light);
  transform:scale(.86);
  transition:transform .5s var(--ease),background-color .4s var(--ease);
}
.dip_ver_ico svg{width:44%;height:44%}
.dip_foto:hover .dip_ver_ico,
.dip_foto:focus-visible .dip_ver_ico{transform:none;background-color:#e9eae41f}
.dip_ver_txt{
  font-family:var(--sans);font-size:var(--fontXS);
  letter-spacing:.2em;text-transform:uppercase;color:var(--color-light);
}
.dip_pie{
  position:absolute;left:0;bottom:0;width:100%;
  display:flex;flex-direction:column;gap:7px;
  padding:clamp(20px,3vw,38px);
  background:linear-gradient(0deg,#060403cc,#06040300);
  text-align:left;pointer-events:none;
}
.dip_nombre{
  font-family:var(--display);font-size:clamp(34px,4.4vw,68px);line-height:90%;
  letter-spacing:-.02em;
}
.dip_rol{
  font-family:var(--texto);
  font-size:var(--fontXS);font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:#c9cbc4;
}

/* ── panel de la ficha ── */
.dip_panel{
  display:none;flex-direction:column;min-width:0;min-height:0;
  background-color:var(--color-light);color:var(--color-dark);
  padding:clamp(28px,4vw,64px);
}
.dip.abierto-0 [data-panel="0"],
.dip.abierto-1 [data-panel="1"]{display:flex}
/* el panel va del lado opuesto a la foto que quedó */
.dip.abierto-0 [data-panel="0"]{grid-area:1/2}
.dip.abierto-1 [data-panel="1"]{grid-area:1/1}
/* la otra persona se retira */
.dip.abierto-0 [data-lado="1"],
.dip.abierto-1 [data-lado="0"]{opacity:0;pointer-events:none}
.dip_lado{transition:opacity .45s var(--ease)}
/* con una ficha abierta, la foto que queda deja de invitar al clic */
.dip.abierto-0 [data-lado="0"] .dip_foto,
.dip.abierto-1 [data-lado="1"] .dip_foto{cursor:default}
.dip.abierto-0 [data-lado="0"] .dip_foto:hover img,
.dip.abierto-1 [data-lado="1"] .dip_foto:hover img{transform:none}

.dip_cab{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding-bottom:22px;border-bottom:1px solid #06040326;
}
.dip_titulo{
  display:block;
  font-family:var(--display);font-size:clamp(40px,5vw,76px);line-height:88%;
  letter-spacing:-.03em;
}
.dip_subtitulo{
  display:block;padding-top:10px;
  font-family:var(--texto);
  font-size:var(--fontXS);font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:#6d6f68;
}
.dip_cerrar{
  flex:0 0 auto;display:grid;place-items:center;
  width:42px;height:42px;cursor:pointer;
  border:1px solid #06040326;
  transition:background-color .18s ease-out,color .18s ease-out;
}
.dip_cerrar:hover{background-color:#060403;color:#eeeeee}

/* ── pestañas ── */
.dip_tabs{display:flex;align-items:stretch;border-bottom:1px solid #06040326}
/* Montserrat en todo lo que se lee; el display queda sólo para los dos
   nombres, que es lo que tiene que sonar distinto. */
.dip_tabs button{
  position:relative;padding:15px 20px 14px;cursor:pointer;
  font-family:var(--texto);
  font-size:var(--fontXS);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:#6d6f68;
  transition:color .25s var(--ease);
}
.dip_tabs button:first-child{padding-left:0}
.dip_tabs button:hover{color:#4a4c46}
.dip_tabs button[aria-selected="true"]{color:var(--color-dark)}
/* la marca se apoya sobre el filete que ya está, en vez de agregar otro */
.dip_tabs button::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background-color:var(--color-dark);
  transform:scaleX(0);transform-origin:left;
  transition:transform .32s var(--ease);
}
.dip_tabs button[aria-selected="true"]::after{transform:scaleX(1)}

.dip_hojas{flex:1;min-height:0;overflow-y:auto;padding-top:26px}
.dip_texto{
  font-family:var(--texto);font-size:19px;font-weight:500;line-height:166%;
  max-width:44ch;
}
.dip_lista{display:flex;flex-direction:column;list-style:none;max-width:44ch}
.dip_lista li{
  padding:13px 0;border-bottom:1px solid #0604031a;
  font-family:var(--texto);font-size:15px;font-weight:500;line-height:150%;
}
.dip_lista li:first-child{border-top:1px solid #0604031a}

@media(max-width:860px){
  /* en vertical las fotos se apilan; al abrir, la ficha toma la pantalla
     entera — al lado no entraría nada legible */
  .talentos_c{height:auto;min-height:100svh}
  .dip{grid-template-columns:1fr;grid-template-rows:1fr 1fr;height:100svh}
  .dip_lado[data-lado="0"]{grid-area:1/1}
  .dip_lado[data-lado="1"]{grid-area:2/1}
  .dip.abierto-0 [data-panel="0"],
  .dip.abierto-1 [data-panel="1"]{grid-area:1/1/3/2}
  .dip.abierto-0 [data-lado="0"],
  .dip.abierto-1 [data-lado="1"]{opacity:0;pointer-events:none}
  .dip_nombre{font-size:clamp(30px,8vw,44px)}
  .dip_texto{font-size:17px}
  .dip_tabs button{padding:13px 14px 12px;font-size:var(--fontXXS)}
}


/* ── NOSOTROS ─────────────────────────────────────────────────── */
.marquesina{overflow:hidden;width:100%;padding:6px 0;border-block:1px solid #06040318}
.marquesina_pista{display:flex;gap:40px;width:max-content;will-change:transform}
.marquesina span{
  font-size:var(--fontS);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;color:#6d6f68;
}
/* El remate va solo y en grande: es donde aterriza todo lo anterior,
   y compartiendo bloque con los párrafos se perdía como una línea más. */
.cierre{
  display:block;width:min(100%,900px);margin-inline:auto;
  padding:14vh 40px;
  font-family:var(--display);font-size:clamp(30px,4.6vw,64px);
  line-height:108%;letter-spacing:-.02em;text-align:center;text-wrap:balance;
}
@media(max-width:768px){.cierre{padding:9vh 20px;font-size:clamp(26px,7.4vw,40px)}}

.declaracion{
  display:block;padding:130px 40px 60px;
  font-family:var(--display);font-size:clamp(34px,4.6vw,74px);line-height:96%;
  max-width:24ch;
}
.nos_cuerpo{
  display:flex;flex-direction:column;gap:20px;
  padding:0 40px 110px;max-width:64ch;margin-left:auto;
  font-family:var(--texto);font-size:18px;font-weight:300;line-height:166%;
}
.nos_datos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding:0 40px 130px;
  font-size:var(--fontS);font-weight:500;text-transform:uppercase;line-height:150%;
}
.nos_datos h4{color:#6d6f68;padding-bottom:8px}

@media(max-width:768px){
  .lista_w{padding:110px 20px 60px}
  .lista{gap:48px;padding-top:32px}
  .caso_info{grid-template-columns:1fr;gap:4px}
  .caso_tipo{text-align:left}
  .caso_nombre{font-size:26px}
  .declaracion{padding:100px 20px 40px}
  .nos_cuerpo{padding:0 20px 70px}
  .nos_datos{grid-template-columns:1fr;gap:20px;padding:0 20px 80px}
}

@media(max-width:900px){
  .home_centro{padding:96px 20px 150px;gap:24px}
  .home_proyectos{flex-direction:column;align-items:center;gap:20px}
  .home_proy{width:min(360px,86vw)}
  .home_proy:hover{transform:none}
  .home_proy.is-faded{filter:none;opacity:1}
  .home_lema{font-size:clamp(26px,8vw,44px)}
}

/* ── ÓRBITA DE PROYECTOS (canvas) ─────────────────────────────── */
.orbita_c{position:absolute;inset:0;z-index:4}
.orbita{position:absolute;inset:0;width:100%;height:100%;display:block}
.orbita_centro{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;
  color:var(--color-light);mix-blend-mode:difference;pointer-events:none;
}

/* la barra inferior alterna entre su texto fijo y la portada señalada */
.works_infos .slot{display:grid}
.works_infos .slot > *{grid-area:1/1;transition:opacity .28s ease}
.works_infos .slot > *{display:flex;flex-direction:column;gap:2px}
.works_infos:not(.senalando) .senalado{opacity:0;pointer-events:none}
.works_infos.senalando .defecto{opacity:0;pointer-events:none}
.works_infos .senalado .nombre{font-family:var(--display);font-size:23px;text-transform:none;line-height:100%}

@media(max-width:900px){
  /* en táctil no hay hover: el anillo se muestra sin señalado */
  .orbita{pointer-events:auto}
}