/* ══════════════════════════════════════
   CONTACT — vista 1 (contact.png)
   Tipografía a 7vw, letra-a-letra chaos
   Carpeta CONTACTO en la DERECHA
══════════════════════════════════════ */
#pg-contact { background:var(--black) }
.ct-view {
  position:absolute; inset:0; visibility:hidden; opacity:0; pointer-events:none;
  transition:opacity .5s ease, transform .6s var(--ease);
}
.ct-view.ct-active { visibility:visible; opacity:1; pointer-events:all; transform:translateX(0)!important }

#ct-v1 {
  transform:translateX(0);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:12rem 3rem 5rem;
}
#ct-v1.ct-active  { transform:translateX(0) }
#ct-v1.ct-out     { opacity:0; transform:translateX(-8%)!important; pointer-events:none }

/* ✏️ TEXTO GRANDE DE CONTACTO — cambia el texto en el HTML */
.ct-big-text {
  font-family:'Vilonti','Archivo Black',var(--sans); font-weight:900;
  font-size:clamp(2rem,5.5vw,7rem);
  line-height:1.35; letter-spacing:-.04em;
  text-transform:uppercase; color:var(--white);
  max-width:88vw; position:relative; z-index:2;
  text-align:left; text-align-last:left;
  word-break:normal; overflow-wrap:normal; hyphens:none;
}
/* Letra individual para el efecto chaos */
.ct-l {
  display:inline-block;
  transition:transform .8s cubic-bezier(.34,1.56,.64,1);
  will-change:transform;
}
.ct-word { display:inline-block; white-space:nowrap }
/* Fila superior de carpetas (Contacto · Instagram · LinkedIn · TikTok) */
.ct-folders-row {
  position:absolute; top:5rem; left:3rem; right:3rem; z-index:3;
  display:flex; flex-wrap:wrap; gap:3rem; align-items:flex-start;
}
.ct-folders-row .ct-folder { position:relative; }

/* Carpetas */
.ct-folder {
  position:absolute; z-index:3; display:flex; flex-direction:column;
  align-items:center; gap:.6rem; cursor:none; user-select:none;
  transition:transform .3s var(--ease), opacity .3s;
}
.ct-folder:hover { transform:scale(1.06) translateY(-3px)!important }
.ct-folder-icon { width:84px; height:70px; color:var(--white) }
.ct-folder-icon svg { width:100%; height:100% }
.ct-folder-label { font-family:var(--mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(240,237,230,.8); white-space:nowrap }

/* Vista 2+3: contenedor scroll */
#ct-scroll { transform:translateX(100%); overflow-y:auto; scrollbar-width:none }
#ct-scroll::-webkit-scrollbar { display:none }
#ct-scroll.ct-active { transform:translateX(0) }

/* Vista 2: formulario (contact 2.png) */
#ct-v2 { min-height:100vh; display:flex; flex-direction:column; justify-content:flex-start; padding:5rem 3rem 4rem; background:var(--black) }
.ct-v2-back { font-family:var(--mono); font-size:.52rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(240,237,230,.3); display:inline-flex; align-items:center; gap:.5rem; margin-bottom:3rem; transition:color .25s }
.ct-v2-back:hover { color:var(--white) }
/* ✏️ TÍTULO FORMULARIO */
.ct-v2-title { font-family:'Vilonti','Archivo Black',var(--sans); font-weight:900; font-size:clamp(1.8rem,4.5vw,5.5rem); line-height:.92; letter-spacing:-.04em; text-transform:uppercase; color:var(--white); margin-bottom:4rem; max-width:70vw }
.ct-field { border-bottom:1px solid rgba(240,237,230,.12); padding:.8rem 0; margin-bottom:.3rem; transition:border-color .3s }
.ct-field:focus-within { border-color:rgba(240,237,230,.45) }
.ct-field label { display:block; font-family:var(--mono); font-size:.46rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(240,237,230,.28); margin-bottom:.4rem }
.ct-field input, .ct-field textarea { width:100%; background:none; font-family:var(--sans); font-size:.9rem; color:var(--white); resize:none; line-height:1.6 }
.ct-field textarea { height:90px }
.ct-submit { display:block; width:100%; margin-top:2rem; padding:1.2rem 2rem; background:var(--white); color:var(--black); font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; text-align:center; transition:background .3s, color .3s; cursor:none }
.ct-submit:hover { background:var(--klein); color:var(--white) }

/* Vista 3: gracias (contact 3.png) */
#ct-v3 { min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:5rem 3rem; background:var(--black); position:relative; overflow:hidden }
/* ✏️ TEXTO GRACIAS */
.ct-v3-thx { font-family:'Vilonti','Archivo Black',var(--sans); font-weight:900; font-size:clamp(2.5rem,6vw,8rem); text-transform:uppercase; letter-spacing:-.04em; line-height:.9; color:var(--white); position:relative; z-index:2 }
.ct-v3-sub { font-family:var(--mono); font-size:.56rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(240,237,230,.28); margin:.8rem 0 1.5rem; position:relative; z-index:2 }
.ct-v3-year { font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; color:rgba(240,237,230,.18); margin-bottom:3rem; position:relative; z-index:2 }
.ct-v3-photo { position:absolute; right:0; top:0; bottom:0; width:42%; overflow:hidden; opacity:.4 }
.ct-v3-photo img { width:100%; height:100%; object-fit:cover; object-position:center 25%; filter:grayscale(1) }
.ct-v3-initials { font-family:'Vilonti','Archivo Black',var(--sans); font-weight:900; font-size:clamp(5rem,14vw,18rem); line-height:1; letter-spacing:-.06em; color:rgba(240,237,230,.06); position:absolute; bottom:-.05em; left:-.02em; user-select:none; z-index:1 }