/* =============================================================================
   PERFIL PROFESIONAL · Guido Puglisevich Pinilla
   2026-09-16

   Hoja propia y no un bloque más en pixaweb-2026.css, que ya pesa 75 KB y se
   carga en todas las páginas: esto lo usan dos, y solo dos.

   La sección tiene que leerse como un perfil profesional dentro de una empresa
   de tecnología, no como un texto sobre el dueño. La diferencia la hacen tres
   cosas: una banda propia que la separa del resto de la página, una columna de
   identidad con peso visual, y contenido que se puede comprobar —cada área y
   cada proyecto enlazan a donde está la prueba—.

   Paleta: la de PixaWeb. Grafito, coral y hueso. Nada nuevo.
   Solo se anima transform y opacity.
   ========================================================================== */

.pw-perfil{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:clamp(3.5rem, 7vw, 6rem);
  background:
    /* Halo coral muy bajo, arriba a la derecha: da profundidad sin competir
       con el texto, que vive a la izquierda. */
    radial-gradient(64% 58% at 88% 6%, rgba(255,91,45,.16), transparent 62%),
    radial-gradient(48% 46% at 4% 92%, rgba(255,120,79,.09), transparent 66%),
    #0d1013;
  border-block:1px solid rgba(255,255,255,.07);
}

/* Retícula finísima, la misma idea del resto del sitio. Se apaga hacia los
   bordes para que no corte en seco. */
.pw-perfil::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/72px 72px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/72px 72px;
  -webkit-mask-image:radial-gradient(80% 74% at 50% 42%, #000 10%, transparent 86%);
          mask-image:radial-gradient(80% 74% at 50% 42%, #000 10%, transparent 86%);
}

.pw-perfil__caja{
  display:grid;
  gap:clamp(2rem, 4vw, 3.4rem);
  align-items:start;
}
@media (min-width:1000px){
  .pw-perfil__caja{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
  /* Sin sticky. Se probó y desalineaba las dos columnas justo al entrar en la
     sección: la identidad aparecía 96 px por debajo del primer párrafo, que es
     el momento en que más importa que se lean juntas. Acompañar el scroll
     valía menos que empezar alineados. */
}

/* En la página personal no hay columna de identidad —el nombre ya es el H1 del
   hero—, así que la caja vuelve a una sola columna y el cuerpo ocupa el ancho. */
.pw-perfil__caja--pagina{grid-template-columns:minmax(0,1fr)!important}

/* ---------------------------------------------------------- identidad ----- */
.pw-perfil__id .eyebrow{display:inline-block;margin-bottom:1.1rem}

/* El retrato. Hoy son iniciales; la caja está dimensionada como una fotografía
   para que sustituirlas no mueva nada de lo de al lado. */
.pw-perfil__retrato{
  width:clamp(128px, 32vw, 172px);
  aspect-ratio:1;
  display:grid;place-items:center;
  border-radius:22px;
  margin-bottom:1.35rem;
  background:
    radial-gradient(74% 74% at 30% 22%, rgba(255,91,45,.28), transparent 68%),
    linear-gradient(158deg, #2b3440, #171c23);
  border:1px solid rgba(255,140,100,.34);
  box-shadow:
    0 26px 60px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,255,255,.12);
}
.pw-perfil__retrato span{
  font-size:clamp(2.6rem, 8vw, 3.6rem);
  font-weight:800;
  letter-spacing:.02em;
  line-height:1;
  color:#f6f2ed;
  text-shadow:0 2px 16px rgba(0,0,0,.6);
}
/* Cuando exista fotografía, entra aquí y ocupa la misma caja. */
.pw-perfil__retrato img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:inherit;
}

.pw-perfil__nombre{
  margin:0 0 .4rem;
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing:-.02em;
  line-height:1.15;
  color:#f6f2ed;
}
.pw-perfil__rol{
  margin:0 0 .9rem;
  font-weight:700;
  color:#ff8c64;
  font-size:.98rem;
}
.pw-perfil__rol a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.pw-perfil__rol a:hover{color:#ffb191}

.pw-perfil__linea{
  margin:0 0 1.5rem;
  color:#aaa7a1;
  font-size:.95rem;
  line-height:1.6;
  max-width:34ch;
}

.pw-perfil__enlaces{display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.pw-perfil__enlace{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.62rem 1.05rem;
  border-radius:99px;
  border:1px solid rgba(255,140,100,.38);
  background:rgba(255,91,45,.12);
  color:#f6f2ed;
  font-weight:700;font-size:.88rem;
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.pw-perfil__enlace svg{width:17px;height:17px;fill:#ff8c64;flex:0 0 auto}
.pw-perfil__enlace:hover{background:rgba(255,91,45,.22);border-color:rgba(255,140,100,.62);transform:translateY(-1px)}
.pw-perfil__enlace--sec{
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);
}
.pw-perfil__enlace--sec:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.34)}

/* ------------------------------------------------------------- cuerpo ----- */
.pw-perfil__resumen p{
  margin:0 0 1.1rem;
  color:#cfccc6;
  font-size:clamp(1rem, 1.4vw, 1.08rem);
  line-height:1.75;
  max-width:70ch;
}
.pw-perfil__resumen p:last-child{margin-bottom:0}

/* Cifras. Separadas por una línea coral finísima a la izquierda: es el único
   adorno y basta para que se lean como un bloque y no como texto suelto. */
/* Cuatro cifras: o las cuatro en fila o dos y dos. Nunca tres y una suelta,
   que es lo que hacía auto-fit cuando el cuerpo medía poco más de 560 px. */
.pw-perfil__cifras{
  list-style:none;margin:2rem 0 0;padding:0;
  display:grid;gap:1.2rem 1.6rem;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@container (min-width:700px){
  .pw-perfil__cifras{grid-template-columns:repeat(4, minmax(0,1fr))}
}
.pw-perfil__cifras li{
  padding-left:.9rem;
  border-left:2px solid rgba(255,91,45,.6);
}
.pw-perfil__cifras strong{
  display:block;
  font-size:clamp(1.45rem, 2.4vw, 1.85rem);
  letter-spacing:-.02em;
  color:#f6f2ed;
  line-height:1.1;
}
.pw-perfil__cifras span{display:block;margin-top:.2rem;color:#aaa7a1;font-size:.86rem;line-height:1.4}

.pw-perfil__titulo{
  margin:2.6rem 0 1.1rem;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#8c8881;
}

/* El cuerpo es el contenedor de referencia de sus propias rejillas.

   Las columnas no pueden depender del ancho de la ventana, porque este mismo
   bloque se usa en dos sitios con anchos muy distintos: en «Quiénes somos»
   comparte la fila con la columna de identidad, y en la página personal ocupa
   el contenedor entero. Con auto-fit sobre el ancho de la ventana, las seis
   áreas caían 5 + 1 en la página personal: una tarjeta huérfana al final de la
   fila. Midiendo el propio cuerpo, ambos casos reparten en 2 + 2 + 2 o 3 + 3. */
.pw-perfil__cuerpo{container-type:inline-size}

/* ---- Áreas: icono, título y una línea. No pastillas genéricas. ----------- */
.pw-perfil__areas{
  display:grid;gap:.9rem;
  grid-template-columns:minmax(0,1fr);
}
@container (min-width:520px){
  .pw-perfil__areas{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@container (min-width:880px){
  .pw-perfil__areas{grid-template-columns:repeat(3, minmax(0,1fr))}
}
.pw-perfil__area{
  display:block;
  padding:1.15rem 1.2rem 1.25rem;
  border-radius:15px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(38,45,55,.72), rgba(26,31,38,.72));
  text-decoration:none;
  transition:border-color .22s ease, transform .22s ease, background .22s ease;
}
.pw-perfil__area:hover{
  border-color:rgba(255,140,100,.48);
  background:linear-gradient(180deg, rgba(46,55,67,.85), rgba(31,37,46,.85));
  transform:translateY(-3px);
}
.pw-perfil__icono{
  display:grid;place-items:center;
  width:36px;height:36px;
  margin-bottom:.8rem;
  border-radius:10px;
  background:rgba(255,91,45,.18);
}
.pw-perfil__icono svg{
  width:19px;height:19px;
  fill:none;stroke:#ff8c64;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.pw-perfil__area strong{display:block;color:#f6f2ed;font-size:1rem;margin-bottom:.35rem}
.pw-perfil__area-txt{display:block;color:#aaa7a1;font-size:.87rem;line-height:1.55}

/* ---- Proyectos: tarjeta con tipo, nombre, una línea y su enlace ---------- */
.pw-perfil__proyectos{
  display:grid;gap:.9rem;
  grid-template-columns:minmax(0,1fr);
}
/* Cuatro proyectos: dos y dos mientras el cuerpo sea estrecho, los cuatro en
   fila solo cuando de verdad caben sin apretar el texto. */
@container (min-width:560px){
  .pw-perfil__proyectos{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@container (min-width:1080px){
  .pw-perfil__proyectos{grid-template-columns:repeat(4, minmax(0,1fr))}
}
.pw-perfil__proyecto{
  display:flex;flex-direction:column;
  padding:1.3rem 1.35rem 1.2rem;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(38,45,55,.78), rgba(24,29,36,.78));
  text-decoration:none;
  position:relative;overflow:hidden;
  transition:border-color .22s ease, transform .22s ease;
}
/* Una línea coral que se dibuja al pasar por encima. Es el único movimiento
   de la tarjeta: lo demás distraería del contenido. */
.pw-perfil__proyecto::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg, #ff5b2d, #ff9a6b);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.pw-perfil__proyecto:hover{border-color:rgba(255,140,100,.48);transform:translateY(-3px)}
.pw-perfil__proyecto:hover::after{transform:scaleX(1)}
.pw-perfil__tipo{
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#ff8c64;margin-bottom:.55rem;
}
.pw-perfil__proyecto strong{display:block;color:#f6f2ed;font-size:1.12rem;margin-bottom:.45rem;letter-spacing:-.01em}
.pw-perfil__proyecto-txt{display:block;color:#aaa7a1;font-size:.88rem;line-height:1.6;flex:1}
.pw-perfil__ver{
  display:inline-block;margin-top:1rem;
  color:#ff8c64;font-weight:700;font-size:.86rem;
}
.pw-perfil__proyecto:hover .pw-perfil__ver span{display:inline-block;transform:translateX(3px);transition:transform .2s ease}

.pw-perfil__acciones{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}

/* ---- Entrada escalonada --------------------------------------------------
   Las tarjetas entran con un retardo propio. Va en CSS y cuelga de .visible,
   que es lo que el observador del sitio ya pone al entrar en pantalla: si el
   JavaScript no carga, .reveal deja el contenido visible igualmente. */
.pw-perfil .reveal{transition-delay:calc(var(--orden, 0) * 70ms)}

@media (prefers-reduced-motion:reduce){
  .pw-perfil .reveal{transition-delay:0s}
  .pw-perfil__area,.pw-perfil__proyecto,.pw-perfil__enlace{transition:none}
  .pw-perfil__area:hover,.pw-perfil__proyecto:hover,.pw-perfil__enlace:hover{transform:none}
  .pw-perfil__proyecto::after{transition:none}
}

/* ---- Apilado -------------------------------------------------------------
   El orden en móvil sale solo del orden del marcado: identidad, nombre, cargo,
   copy, áreas, proyectos y llamada. No hace falta reordenar nada. */
@media (max-width:999px){
  .pw-perfil__id{max-width:none}
  .pw-perfil__linea{max-width:none}
  .pw-perfil__enlaces{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:560px){
  .pw-perfil__enlaces{flex-direction:column;align-items:stretch}
  .pw-perfil__enlace{justify-content:center}
  .pw-perfil__acciones .btn{width:100%;justify-content:center}
}

/* =============================================================================
   HERO DE LA PÁGINA PERSONAL
   Sobrio a propósito. No repite el hero de la portada: aquí manda una persona,
   no un producto, y competir con aquella escena sería ruido.
   ========================================================================== */
.pw-perfil-hero{
  position:relative;overflow:hidden;
  padding-block:clamp(3rem, 6vw, 5rem) clamp(2.4rem, 4vw, 3.4rem);
  background:
    radial-gradient(56% 64% at 82% 0%, rgba(255,91,45,.18), transparent 62%),
    #0b0d0e;
}
.pw-perfil-hero__caja{display:grid;gap:clamp(1.6rem,3vw,2.6rem);align-items:center}
@media (min-width:860px){
  .pw-perfil-hero__caja{grid-template-columns:auto minmax(0,1fr)}
}
.pw-perfil-hero .pw-perfil__retrato{margin-bottom:0}
.pw-perfil-hero h1{
  margin:.7rem 0 .5rem;
  font-size:clamp(2rem, 4.6vw, 3.1rem);
  letter-spacing:-.025em;line-height:1.1;
  color:#f6f2ed;
}
.pw-perfil-hero__rol{
  margin:0 0 1rem;
  color:#ff8c64;font-weight:700;
  font-size:clamp(1rem, 1.6vw, 1.15rem);
}
.pw-perfil-hero__rol a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.pw-perfil-hero__txt{
  margin:0 0 1.5rem;
  color:#cfccc6;line-height:1.7;
  font-size:clamp(1rem, 1.4vw, 1.08rem);
  max-width:64ch;
}