/* ══════════════════════════════════════════════════════
   CCP · SISTEMA DEL SITIO
   Piezas que viven en más de una página: header de interior,
   barra de redes, galería, equipo, blog, formularios, y los
   pilares 3 y 6 del brief.
   Carga siempre DESPUÉS de base.css.
   ══════════════════════════════════════════════════════ */

/* El header de una interior nace sólido y ocupa lugar: sin hero
   que lo sostenga, no puede flotar encima del texto. */
.hd.nace-solido{position:sticky;transition:none}
.hd-nav a.es,.hd.solid .hd-nav a.es{color:var(--rojo)}
.hd-nav a.es::after{width:100%;background:var(--rojo)}

/* ══ BARRA DE REDES ══
   Rescatada de ccparquitectura.cl/nuevo/. Pastilla vertical al
   borde derecho; el nombre no se desliza, se descubre con clip. */
.redes{
  position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;gap:2px;
  background:rgba(255,255,255,.84);backdrop-filter:blur(10px);
  border:1px solid var(--linea);border-radius:999px;padding:9px 7px;
  box-shadow:0 4px 24px rgba(20,20,20,.07);
}
.redes a{
  width:37px;height:37px;border-radius:50%;position:relative;
  display:grid;place-items:center;color:var(--gris);
  transition:color .25s var(--e),background .25s var(--e);
}
.redes a svg{width:19px;height:19px;fill:currentColor}
.redes a:hover{color:var(--rojo);background:rgba(227,6,19,.07)}
.redes a+a::before{
  content:"";position:absolute;top:-1px;left:50%;transform:translateX(-50%);
  width:14px;height:1px;background:var(--linea);
}
.redes .nom{
  position:absolute;right:calc(100% + 8px);top:50%;transform:translateY(-50%);
  font-family:"DM Sans",sans-serif;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;white-space:nowrap;
  background:var(--tinta);border-radius:999px;padding:6px 12px;pointer-events:none;
  clip-path:inset(0 0 0 100%);opacity:0;
  transition:clip-path .34s cubic-bezier(.2,.85,.25,1),opacity .2s;
}
.redes a:hover .nom,.redes a:focus-visible .nom{clip-path:inset(0 0 0 0);opacity:1}
@media (max-width:900px){
  .redes{right:8px;padding:6px 4px}
  .redes a{width:33px;height:33px}
  .redes a svg{width:17px;height:17px}
  .redes .nom{display:none}
}

/* ══ CABECERA DE PÁGINA INTERIOR ══ */
.cab{padding:clamp(48px,8vh,88px) 0 clamp(26px,4vh,44px);border-bottom:1px solid var(--linea)}
.cab .display{margin-bottom:14px}
.cab .lede{max-width:56ch}
.cab-fila{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap}
.seccion{padding:clamp(56px,9vh,110px) 0}
.seccion--hueso{background:var(--hueso)}

/* ══ GALERÍA DE OBRAS ══
   Filas de dos: una grande (2/3) y una chica (1/3), alternando de
   lado, con la misma altura por fila. */
/* Proporciones medidas en amasr/villas: la ancha es 2:1 exacta y la
   chica 1:1. Sin gap — las imagenes se tocan y forman una tira
   continua, que es lo que da el aire de galeria y no de tarjetas. */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.ob{
  position:relative;overflow:hidden;background:var(--hueso);
  aspect-ratio:1/1;grid-column:span 1;display:block;
}
.ob.ancha{grid-column:span 2;aspect-ratio:2/1}
.ob img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e)}
.ob::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.64));
  opacity:0;transition:opacity .42s var(--e);
}
.ob-txt{
  position:absolute;left:22px;bottom:18px;z-index:2;color:#fff;
  opacity:0;transform:translateY(10px);
  transition:opacity .42s var(--e),transform .42s var(--e);
}
.ob-txt .cat{
  font-family:"DM Sans",sans-serif;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.86;display:block;margin-bottom:5px;
}
.ob-txt .nom{font-family:"Aboreto",serif;font-size:clamp(17px,2vw,24px);display:block}
.ob:hover img{transform:scale(1.04)}
.ob:hover::after,.ob:hover .ob-txt{opacity:1;transform:none}
.ob:active{transform:scale(.99)}
.ob[hidden]{display:none}

/* píldoras de filtro, flotantes sobre la galería */
/* Van ARRIBA de la galeria: flotando abajo tapaban la obra, que es
   justo lo que la pagina viene a mostrar. */
.filtros{
  display:flex;gap:9px;justify-content:center;flex-wrap:wrap;
  padding:0 0 clamp(22px,3.5vh,36px);
}
.fl{
  font-family:"DM Sans",sans-serif;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;padding:11px 20px;border-radius:999px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border:1px solid var(--linea);cursor:pointer;color:var(--gris);
  box-shadow:0 3px 16px rgba(20,20,20,.09);
}
.fl:hover{color:var(--tinta);border-color:var(--tinta)}
.fl.on{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.fl:active{transform:scale(.95)}

/* ══ LOS 3 SERVICIOS ══ */
.srv{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.6vw,38px)}
.srv-i{padding-top:26px;border-top:1px solid var(--tinta)}
.srv-i .n{
  font-family:"DM Sans",sans-serif;font-size:11px;letter-spacing:.2em;
  color:var(--rojo);display:block;margin-bottom:14px;
}
.srv-i h3{font-family:"Aboreto",serif;font-size:clamp(18px,2.1vw,25px);line-height:1.25;margin-bottom:12px}
.srv-i p{font-size:14.5px;color:var(--gris);margin:0}

/* ══ EQUIPO Y COLABORADORES ══ */
.equipo{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,42px)}
.per figure{margin:0;overflow:hidden;aspect-ratio:3/4;background:var(--hueso)}
.per img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter .6s var(--e),transform 1.1s var(--e)}
.per:hover img{filter:grayscale(0);transform:scale(1.03)}
.per h3{font-family:"Aboreto",serif;font-size:clamp(16px,1.8vw,20px);margin:16px 0 4px}
.per p{font-size:13px;color:var(--gris);margin:0}
.per .vacio{
  width:100%;height:100%;display:grid;place-items:center;
  color:var(--gris);font-family:"DM Sans",sans-serif;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;text-align:center;
  padding:20px;border:1px dashed var(--linea);line-height:1.9;
}

/* ══ BLOG ══ */
.notas{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3.4vw,46px)}
.nota{display:block;border-bottom:1px solid var(--linea);padding-bottom:26px}
.nota figure{margin:0 0 18px;overflow:hidden;aspect-ratio:16/10;background:var(--hueso)}
.nota img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e)}
.nota:hover img{transform:scale(1.04)}
.nota .meta{
  font-family:"DM Sans",sans-serif;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gris);display:flex;gap:12px;margin-bottom:10px;
}
.nota h3{font-family:"Aboreto",serif;font-size:clamp(17px,2vw,23px);line-height:1.28;margin-bottom:10px}
.nota p{font-size:14.5px;color:var(--gris);margin:0 0 14px}

/* ══ MODELO 3D · acceso con clave ══ */
.acceso{
  max-width:430px;margin:0 auto;padding:clamp(30px,5vh,48px);
  border:1px solid var(--linea);background:var(--hueso);
}
.campo{margin-bottom:20px}
.campo label{
  display:block;font-family:"DM Sans",sans-serif;font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gris);margin-bottom:8px;
}
.campo input,.campo textarea,.campo select{
  width:100%;padding:13px 0;border:0;border-bottom:1px solid var(--linea);
  background:none;font:inherit;font-size:15px;color:var(--tinta);
  transition:border-color .3s var(--e);
}
.campo textarea{resize:vertical;min-height:110px}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:none;border-color:var(--tinta)}
.aviso{
  margin-top:20px;padding:14px 16px;font-size:13.5px;line-height:1.6;
  background:rgba(227,6,19,.055);border-left:2px solid var(--rojo);color:var(--tinta);
}

/* ══ FORMULARIO ══ */
.form-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,5vw,80px);align-items:start}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.datos p{font-size:14.5px;color:var(--gris);margin:0 0 10px;line-height:1.7}
.datos a{color:var(--gris);transition:color .3s var(--e)}
.datos a:hover{color:var(--rojo)}

/* ══════════════════════════════════════════════════════
   PILARES DEL BRIEF · 3 letras vivas · 6 feedback háptico
   ══════════════════════════════════════════════════════ */
.viva{display:inline-block}
.viva .ch{
  display:inline-block;
  transform:translate3d(0,var(--dy,0),0) scale(var(--sc,1));
  transition:transform .5s var(--e);
  will-change:transform;
}
.viva.entra .ch{opacity:0;animation:chIn .72s var(--e) forwards;animation-delay:calc(var(--i) * 24ms)}
@keyframes chIn{
  from{opacity:0;transform:translate3d(0,.45em,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

.btn,.card,.ms,.ob,.fl,.nota{
  transition:transform .42s cubic-bezier(.34,1.56,.64,1),background .35s var(--e),
             color .35s var(--e),border-color .35s var(--e);
}
.btn:active{transform:scale(.955)}
.card:active,.ms:active{transform:scale(.988)}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:"";position:absolute;z-index:-1;
  left:var(--mx,50%);top:var(--my,50%);width:0;height:0;
  border-radius:50%;background:rgba(255,255,255,.26);
  transform:translate(-50%,-50%);
  transition:width .55s var(--e),height .55s var(--e),opacity .55s var(--e);
}
.btn-s::after{background:rgba(20,20,20,.1)}
.btn:hover::after{width:300px;height:300px}
.btn:active::after{width:360px;height:360px;opacity:.5;transition-duration:.18s}

.card{perspective:900px}
.card .card-img{
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--e);will-change:transform;
}
.card:hover .card-img{transition-duration:.16s}

@media (prefers-reduced-motion:reduce){
  .viva .ch{transition:none!important;animation:none!important;transform:none!important;opacity:1!important}
  .card .card-img{transform:none!important}
  .btn::after{display:none}
}
@media (hover:none){.card .card-img{transform:none!important}}

/* ══ RESPONSIVE ══ */
@media (max-width:900px){
  .srv,.equipo{grid-template-columns:1fr;gap:30px}
  .notas{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr;gap:38px}
  .gal{grid-template-columns:repeat(2,1fr)}
  .ob{aspect-ratio:1/1}
  .ob.ancha{grid-column:span 2;aspect-ratio:2/1}
}
@media (max-width:620px){
  .gal{grid-template-columns:1fr}
  .ob,.ob.ancha{grid-column:span 1;aspect-ratio:3/2}
  .dos{grid-template-columns:1fr}
  .cab-fila{flex-direction:column;gap:10px}
}

/* la palabra es indivisible: el salto cae entre palabras */
.viva .pal{display:inline-block;white-space:nowrap}

/* ══════════════════════════════════════════════════════
   HERO DE PÁGINA INTERIOR · banda de foto a ancho completo
   Del lenguaje de amasr: la imagen dice el rubro antes que
   el texto. Título abajo-izquierda, etiqueta debajo.
   ══════════════════════════════════════════════════════ */
.heroP{
  position:relative;min-height:clamp(320px,46vh,460px);
  display:flex;align-items:flex-end;overflow:hidden;background:var(--carbon);
}
.heroP-img{position:absolute;inset:0}
.heroP-img img{width:100%;height:100%;object-fit:cover}
.heroP::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.46) 0%,rgba(0,0,0,.16) 38%,rgba(0,0,0,.66) 100%);
}
.heroP .wrap{position:relative;z-index:2;padding-block:clamp(30px,5vh,54px)}
.heroP h1{color:#fff}
.heroP .tag{color:rgba(255,255,255,.88);margin:14px 0 0}
.heroP .tag::before{color:#fff}
.heroP .lede{color:rgba(255,255,255,.9);margin-top:12px}

/* ══ BLOG · el orden de PuroPlano ══ */

/* filtros con contador, en píldora */
.cats{display:flex;gap:9px;flex-wrap:wrap;padding:clamp(26px,4vh,40px) 0 clamp(18px,3vh,30px)}
.cat-b{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"DM Sans",sans-serif;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;padding:10px 17px;border-radius:999px;
  background:#fff;border:1px solid var(--linea);cursor:pointer;color:var(--gris);
}
.cat-b .n{
  font-size:9.5px;letter-spacing:0;padding:2px 7px;border-radius:999px;
  background:var(--hueso);color:var(--gris);
}
.cat-b:hover{color:var(--tinta);border-color:var(--tinta)}
.cat-b.on{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.cat-b.on .n{background:rgba(255,255,255,.2);color:#fff}
.cat-b:active{transform:scale(.96)}

/* la grilla: destacada a 2/3 arriba, el resto de a 3 */
.blogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
.art{
  display:flex;flex-direction:column;
  border:1px solid var(--linea);background:#fff;overflow:hidden;
}
.art figure{margin:0;overflow:hidden;aspect-ratio:16/10;background:var(--hueso)}
.art img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e)}
.art:hover img{transform:scale(1.045)}
.art-txt{padding:clamp(16px,2vw,22px);display:flex;flex-direction:column;flex:1}
.art .meta{
  font-family:"DM Sans",sans-serif;font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--gris);
  display:flex;align-items:center;gap:10px;margin-bottom:11px;
}
.art .meta .c{color:var(--rojo)}
.art .meta .sep{width:1px;height:10px;background:var(--linea)}
.art h3{
  font-family:"Aboreto",serif;font-size:clamp(15.5px,1.5vw,19px);
  line-height:1.32;margin-bottom:10px;
}
.art p{font-size:13.5px;color:var(--gris);line-height:1.65;margin:0 0 16px}
.art .leer{
  margin-top:auto;font-family:"DM Sans",sans-serif;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta);
  border-bottom:1px solid var(--tinta);align-self:flex-start;padding-bottom:3px;
  transition:color .3s var(--e),border-color .3s var(--e);
}
.art:hover .leer{color:var(--rojo);border-color:var(--rojo)}

/* destacada: ocupa 2 columnas y se parte en foto | texto */
.art--dest{grid-column:span 2;flex-direction:row}
.art--dest figure{flex:0 0 46%;aspect-ratio:auto}
.art--dest .art-txt{padding:clamp(22px,2.6vw,34px);justify-content:center}
.art--dest h3{font-size:clamp(19px,2.3vw,27px)}
.art--dest p{font-size:14.5px}
.art--dest .sello{
  position:absolute;top:14px;left:14px;z-index:3;
  font-family:"DM Sans",sans-serif;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;background:var(--tinta);color:#fff;padding:7px 13px;
}
.art--dest{position:relative}
.art[hidden]{display:none}

@media (max-width:980px){
  .blogrid{grid-template-columns:repeat(2,1fr)}
  .art--dest{grid-column:span 2}
}
@media (max-width:700px){
  .blogrid{grid-template-columns:1fr}
  .art--dest{grid-column:span 1;flex-direction:column}
  .art--dest figure{flex:none;aspect-ratio:16/10}
}

/* ══════════════════════════════════════════════════════
   MODELO 3D · visor de fondo + popup de acceso encima
   ══════════════════════════════════════════════════════ */
.visor{
  position:relative;height:calc(100svh - 74px);min-height:520px;
  overflow:hidden;background:var(--carbon);
}
.visor-fondo{position:absolute;inset:0}
.visor-fondo img,.visor-fondo iframe,.visor-fondo canvas{
  width:100%;height:100%;object-fit:cover;border:0;display:block;
}
.visor::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,rgba(10,10,10,.28) 0%,rgba(10,10,10,.74) 100%);
}
/* leyenda abajo, para que el fondo se entienda como demostración */
.visor-pie{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:0 var(--pad) clamp(20px,3vh,32px);color:#fff;
}
.visor-pie .tag{color:rgba(255,255,255,.82);margin:0}
.visor-pie .tag::before{color:#fff}

/* el popup */
.pop{
  position:absolute;inset:0;z-index:4;
  display:grid;place-items:center;padding:var(--pad);
}
.pop-caja{
  width:100%;max-width:412px;background:rgba(255,255,255,.97);
  backdrop-filter:blur(16px);padding:clamp(28px,4vh,40px);
  box-shadow:0 24px 70px rgba(0,0,0,.34);
  animation:popIn .6s var(--e) both;
}
@keyframes popIn{
  from{opacity:0;transform:translateY(16px) scale(.98)}
  to{opacity:1;transform:none}
}
.pop-caja h2{
  font-family:"Aboreto",serif;font-size:clamp(20px,2.4vw,27px);
  line-height:1.22;margin:10px 0 8px;
}
.pop-caja .sub{font-size:14px;color:var(--gris);margin:0 0 26px;line-height:1.6}
.pop-caja .btn{width:100%;text-align:center;justify-content:center}
.pop-pie{
  margin:20px 0 0;font-size:12.5px;color:var(--gris);line-height:1.7;text-align:center;
}
.pop-pie a{border-bottom:1px solid var(--linea)}
.pop-pie a:hover{color:var(--rojo);border-color:var(--rojo)}
@media (prefers-reduced-motion:reduce){.pop-caja{animation:none}}
@media (max-width:620px){
  .visor{height:auto;min-height:0}
  .visor-fondo{position:relative;height:42vh;min-height:250px}
  .pop{position:relative;inset:auto;padding:clamp(26px,5vh,40px) var(--pad)}
  .visor::after{display:none}
  .visor-pie{display:none}
  .pop-caja{box-shadow:none;border:1px solid var(--linea);background:#fff}
}

/* ══════════════════════════════════════════════════════
   BARRIDO DE ENTRADA DE LA GALERÍA
   Medido en amasr/villas: no es un fade ni un deslizamiento.
   Es un clip-path que se corre de izquierda a derecha, como
   una cortina que descubre la foto:
     inset(-1px 100% -100px -1px)  →  inset(-1px -1px -100px)
   Los -1px y -100px evitan que se vea el borde del recorte.
   Dentro de la fila los dos items entran ESCALONADOS, no
   juntos: el segundo arranca ~0,22s después del primero.
   ══════════════════════════════════════════════════════ */
/* 🔴 El clip-path va en la IMAGEN, no en el <a>.
   Recortar el propio .ob a cero de ancho lo deja sin área visible y
   el IntersectionObserver lo da por fuera de pantalla: nunca
   disparaba y las filas de abajo se quedaban sin barrer. El enlace
   conserva su caja; lo que se descubre es la foto de adentro. */
.ob img{
  clip-path:inset(-1px 100% -100px -1px);
  transform:scale(1.06);
  transition:clip-path 1.15s cubic-bezier(.33,.06,.16,1) var(--d,0s),
             transform 1.5s cubic-bezier(.22,.61,.36,1) var(--d,0s);
}
.ob.entro img{clip-path:inset(-1px -1px -100px);transform:scale(1)}
.ob.entro:hover img{transform:scale(1.04)}

@media (prefers-reduced-motion:reduce){
  .ob img{clip-path:none!important;transform:none!important;transition:none!important}
}

/* ══════════════════════════════════════════════════════
   INTRO DE BIENVENIDA
   Fondo oscuro + la animación del logo + "BIENVENIDO A".
   Al terminar, el fondo se disuelve y el logo de la animación
   queda EXACTAMENTE donde está el del hero: el logo no se
   mueve, se mueve todo lo demás.

   La medida sale del video (frame a los 4,0 s): el logo queda
   centrado al 50%/50% ocupando el 41% del ancho. Por eso el
   hero usa ese mismo ancho y centro, y el video se escala con
   el mismo criterio.
   ══════════════════════════════════════════════════════ */
.intro-v{
  position:fixed;inset:0;z-index:200;background:#000;
  display:grid;place-items:center;overflow:hidden;
}

/* 🔴 EL TAMAÑO LO MANDA EL LOGO DEL HERO, no el video.
   El logo ocupa el 41% del ancho del frame (medido en el fotograma
   de los 4,0 s). Para que en pantalla quede del mismo porte que
   .hero-mark —min(190px,34vw)— el video se dibuja a 190/0.41 =
   463px de ancho. Por eso NO va a pantalla completa con cover:
   va chico y centrado sobre el fondo negro. */
.intro-v video{
  width:min(463px, 83vw);
  height:auto;
  display:block;
  /* ⚠️ MEDIDO con el saludo oculto, que es la única forma de leer
     el logo solo: a 463px de ancho su centro cae en cy=500 y el del
     hero está en 450, así que se sube 1px. El factor es proporcional
     al ancho para que el calce se mantenga en cualquier pantalla. */
  transform:translateY(calc(min(463px, 83vw) * 0.0021));
  /* El negro del video no es exactamente #000 y se recorta contra el
     fondo. screen funde el cuadro: lo negro desaparece y solo queda
     el trazo blanco del logo. */
  mix-blend-mode:screen;
}

/* el cierre: el fondo se va, el logo se queda */
.intro-v.cierra{
  animation:introFuera .95s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes introFuera{
  to{opacity:0;visibility:hidden}
}

/* mientras la intro corre, el fondo no se puede scrollear */
body.intro-activa{overflow:hidden}

/* El logo del hero: SIN el movimiento de entrada cuando viene de la
   intro — tiene que parecer que ya estaba ahí. */
.hero-mark.fijo{animation:none;opacity:1;transform:translate(-50%,-50%)}

@media (prefers-reduced-motion:reduce){
  .intro-v{animation:none!important}
  .intro-v{display:none}
}