/* ============================================================
   PÁGINAS  ·  cada sección ocupa la pantalla completa y es
   AUTÓNOMA: su scroll no continúa hacia la siguiente sección.
   ============================================================ */

/* la ventana no scrollea: scrollea cada página por dentro */
html, body{ height:100%; height:var(--alto-real); overflow:hidden; }

.pagina{
  position:fixed;
  top:calc(var(--alto-nav) + var(--seguro-arriba));
  left:0; right:0; bottom:0;
  padding-bottom:var(--seguro-abajo);   /* no queda debajo de la barra del iPhone */
  background:var(--fondo);
  color:var(--texto);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;      /* el scroll NO se escapa a otra página */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:var(--acento) transparent;
  display:none;
}
.pagina.activa{ display:block; }

.pagina::-webkit-scrollbar{ width:9px; }
.pagina::-webkit-scrollbar-track{ background:transparent; }
.pagina::-webkit-scrollbar-thumb{
  background:var(--acento); border-radius:99px; opacity:.6;
}

/* entrada suave al cambiar de sección */
@keyframes entra{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }
.pagina.activa > *{ animation:entra .45s cubic-bezier(.22,.61,.36,1) both; }


/* ============================================================
   IMAGEN — llena todo el ancho a máxima resolución
   y se recorre bajando DENTRO de la misma sección.
   Sin títulos: cada pieza ya trae el suyo.
   ============================================================ */
.lienzo{
  width:100%;
  min-height:100%;
  display:flow-root;           /* contiene los márgenes de las fichas */
  background:var(--fondo);
  color:var(--texto);          /* el lienzo puede llevar su propia paleta */
}

/* banda del color del grime arriba del lienzo: hace que la barra del
   menú se funda con la parte alta de la pieza */
.banda{ width:100%; background:var(--fondo); }

.lienzo img{
  width:100%;
  height:auto;
  display:block;
  position:relative;
  z-index:0;
}

/* ------------ secciones por piezas: obras + su ficha ------------
   La imagen va a ancho completo y debajo el texto que cuenta el rol.
   El texto es texto de verdad: nítido y legible en el celular. */
.pieza__img{ margin:0; }

.ficha-obra{
  max-width:min(74ch, 76%);
  margin:clamp(26px,3.4vw,46px) auto clamp(34px,4.6vw,66px);
  padding-inline:4px;
  color:var(--texto);
}
.ficha-obra__titulo{
  font-family:var(--fuente-display);
  font-size:clamp(20px,2.3vw,28px);
  text-transform:uppercase; color:var(--acento);
  letter-spacing:.01em;
}
.ficha-obra__rol{
  margin-top:6px;
  font-size:clamp(12.5px,1.15vw,14px);
  font-weight:700; font-style:italic;
  letter-spacing:.06em; text-transform:uppercase;
  opacity:.75;
}
.ficha-obra__texto{
  margin-top:14px;
  font-size:clamp(13.5px,1.2vw,15.5px);
  font-weight:300; font-style:italic;
  line-height:1.68;
  opacity:.92;
}
@media (max-width: 700px){
  .ficha-obra{ max-width:none; margin-inline:clamp(18px,6vw,30px); }
}

/* ------------ PIE que cierra cada sección ------------ */
.pie{
  padding:clamp(46px,6vw,74px) 24px calc(clamp(52px,7vw,84px) + var(--seguro-abajo));
  text-align:center;
  background:var(--fondo);
  color:var(--texto);          /* el pie puede llevar su propia paleta */
  border-top:2px solid var(--acento);
}
.pie__logo{
  height:clamp(40px,5vw,56px); width:auto; margin:0 auto 18px;
  filter:var(--logo-filtro, none);
}
.pie__nombre{
  font-size:clamp(17px,2.2vw,22px); font-weight:700; letter-spacing:-.01em;
  color:var(--texto);
}
.pie__rol{
  margin-top:5px; font-size:11px; font-weight:300;
  letter-spacing:.2em; text-transform:uppercase; opacity:.7;
  color:var(--texto);
}
.contacto--pie{ justify-content:center; margin-top:24px; }

/* pie que continúa el color con el que termina la imagen: sin línea,
   para que no se note dónde acaba el lienzo */
.pie--continuo{ border-top:0; padding-top:clamp(10px,1.5vw,20px); }

.pie__titulo{
  font-family:var(--fuente-display);
  font-size:clamp(28px,4.4vw,48px);
  text-transform:uppercase; color:var(--acento);
  letter-spacing:-.01em; margin-bottom:6px;
}
.pie__titulo + .contacto--pie{ margin-top:18px; }

/* pie compacto: solo los contactos (la imagen ya trae nombre y rol) */
.pie--compacto{ padding-top:clamp(32px,4vw,46px); }
.pie--compacto .contacto--pie{ margin-top:0; }
.pie--compacto .pie__titulo + .contacto--pie{ margin-top:18px; }

/* ------------ PRESENTACIÓN + EXPERIENCIA + SKILLS bajo la portada ------------
   Mismo lenguaje que la página de CONTACT: toma los colores de la
   sección, así en HOME se lee en blanco sobre el rosa de la marca. */
.perfil-bajo-portada{
  background:var(--fondo);
  color:var(--texto);
  padding:clamp(30px,5.5vw,76px) 0 clamp(8px,1.5vw,18px);
}
/* el primer bloque ya no necesita la línea de arriba: la portada hace de borde */
.perfil-bajo-portada .bloque:first-child{
  margin-top:0; padding-top:0; border-top:0;
}

/* ------------ HOME centrado: igual que el diseño nuevo ------------
   La portada ya trae el logo, el nombre y el rol impresos; de ahí
   para abajo sigue el texto, centrado y en itálica. Todo es texto
   de verdad: se lee nítido en cualquier pantalla y se reacomoda
   solo en el celular. */
.perfil-centro{ text-align:center; }

.presentacion{
  max-width:74ch;
  margin-inline:auto;
  font-size:clamp(13px,1.3vw,17px);
  font-weight:300;
  font-style:italic;
  line-height:1.6;
}
.presentacion p + p{ margin-top:1.15em; }

.titulo-centro{
  margin-top:clamp(30px,5vw,62px);
  font-size:clamp(16.5px,2.5vw,30px);
  font-weight:700; font-style:italic;
  text-transform:uppercase; letter-spacing:.01em;
  color:var(--acento);
}

.exp--centro{ gap:clamp(16px,2vw,22px); margin-top:clamp(16px,2vw,22px); align-items:center; }
.exp--centro .exp__item{ padding-left:0; border-left:0; }
.exp--centro .exp__linea{
  font-size:clamp(13.5px,1.45vw,18px); font-style:italic;
  display:flex; flex-wrap:wrap; justify-content:center; gap:0 .5em;
}
.exp--centro .exp__empresa{ font-weight:700; }
.exp--centro .exp__empresa::after{ content:' |'; }
.exp--centro .exp__cargo{ font-size:inherit; font-weight:300; opacity:1; margin-top:0; }
.exp--centro .exp__periodo{
  margin-top:4px; font-size:clamp(12.5px,1.25vw,16px);
  font-weight:300; font-style:italic; letter-spacing:0; opacity:.9;
  text-transform:none;
}

/* SKILLS: el rótulo a la izquierda y la rejilla al lado, como en el diseño */
.skills-fila{
  margin-top:clamp(40px,5.5vw,70px);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3.5vw,54px);
  align-items:center;
  text-align:left;
}
.skills-fila__titulo{
  font-family:var(--fuente-display);
  font-size:clamp(36px,7vw,92px);
  line-height:.82;
  text-transform:uppercase; color:var(--acento);
  letter-spacing:-.02em;
}
.skills-fila .skills{ grid-template-columns:repeat(4, minmax(0,1fr)); }

@media (max-width: 1180px){ .skills-fila .skills{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px){
  .skills-fila{ grid-template-columns:1fr; gap:clamp(16px,3vw,26px); text-align:center; }
  .skills-fila .skills{ grid-template-columns:repeat(2, minmax(0,1fr)); text-align:left; }
  /* en pantalla angosta el cargo cae a la línea de abajo: sin la barrita */
  .exp--centro .exp__empresa::after{ content:''; }
  .exp--centro .exp__linea{ display:block; }
}
@media (max-width: 460px){ .skills-fila .skills{ grid-template-columns:1fr; } }

/* indicador de "sigue bajando" dentro de la sección */
.mas{
  position:fixed; left:50%; bottom:calc(20px + var(--seguro-abajo));
  transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  padding:8px 15px;
  border-radius:999px;
  border:1.5px solid var(--nav-acento, #fff);
  background:var(--nav-fondo, #fff);
  color:var(--nav-acento, #fff);
  font-family:var(--fuente-display);
  font-size:13px; font-weight:400; letter-spacing:.08em;
  pointer-events:none;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  animation:flota 2s ease-in-out infinite;
  transition:opacity .3s;
  z-index:80;
}
.mas svg{ width:13px; height:13px; }
.mas.oculto{ opacity:0; }
@keyframes flota{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,6px);} }


/* ============================================================
   3 · CONTACTO — datos, experiencia y skills
   ============================================================ */
.contacto-pag{
  min-height:100%;
  display:flex; align-items:center;
  padding:clamp(48px,7vw,88px) 0;
}

.contacto-pag__titulo{
  font-family:var(--fuente-display);
  font-size:clamp(48px,10vw,110px);
  line-height:.86;
  text-transform:uppercase;
  color:var(--acento);
  letter-spacing:-.02em;
  margin-bottom:8px;
}

.ficha__logo{
  height:clamp(46px,6vw,68px); width:auto; margin-bottom:20px;
  filter:var(--logo-filtro, none);
}
.ficha__nombre{
  font-size:clamp(22px,3vw,34px); font-weight:700; letter-spacing:-.01em;
}
.ficha__rol{
  margin-top:5px; font-size:12px; font-weight:300;
  letter-spacing:.18em; text-transform:uppercase; opacity:.65;
}

.contacto{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.contacto__item{
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 18px;
  border:1.5px solid var(--acento);
  border-radius:999px;
  font-family:var(--fuente-display);
  font-size:17px; font-weight:400; letter-spacing:.03em;
  transition:all var(--transicion);
}
.contacto__item:hover{
  background:var(--acento); color:var(--fondo); transform:translateY(-2px);
}
.contacto__item svg{ width:16px; height:16px; flex:0 0 auto; }

.bloque{
  margin-top:clamp(34px,4.5vw,50px);
  padding-top:clamp(28px,3.5vw,38px);
  border-top:2px solid var(--acento);
}

.bloque__titulo{
  font-family:var(--fuente-display);
  font-size:clamp(24px,3.4vw,36px);
  text-transform:uppercase; color:var(--acento);
  margin-bottom:22px; letter-spacing:-.01em;
}

.exp{ display:flex; flex-direction:column; gap:20px; }
.exp__item{ padding-left:19px; border-left:3px solid var(--acento); }
.exp__empresa{ font-size:16px; font-weight:700; }
.exp__cargo{ font-size:14px; opacity:.8; margin-top:3px; }
.exp__periodo{ font-size:12px; font-weight:700; letter-spacing:.14em; opacity:.55; margin-top:6px; }

/* --- SKILLS: réplica del diseño del portafolio impreso ---
   badge blanco con la sigla en el color de fondo, etiqueta en
   itálica encima y cápsula de borde blanco con relleno verde. */
.skills{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:20px 26px;
}

.skill{
  display:flex;
  align-items:flex-end;
  gap:11px;
  min-width:0;
}

.skill__sigla{
  flex:0 0 auto;
  width:54px; height:54px;
  display:grid; place-items:center;
  border-radius:13px;
  background:#ffffff;
  color:var(--fondo);
  font-weight:700; font-size:21px; letter-spacing:-.01em;
}
.skill__sigla svg{ width:28px; height:28px; }

.skill__cuerpo{ flex:1 1 auto; min-width:0; }

.skill__nombre{
  font-size:11px;
  font-style:italic;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--texto);
  margin:0 0 5px 8px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.skill__barra{
  height:27px;
  border-radius:999px;
  border:3.5px solid #ffffff;
  padding:3px;
  background:transparent;      /* deja ver el fondo de la sección */
}

.skill__relleno{
  height:100%; width:0;
  border-radius:999px;
  background:#869e48;          /* verde oliva del original */
  transition:width 1.1s cubic-bezier(.22,.61,.36,1);
}

@media (max-width: 1180px){ .skills{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px){  .skills{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 460px){  .skills{ grid-template-columns:1fr; } }




/* ============================================================
   BOTÓN VOLVER ARRIBA (dentro de la página activa)
   ============================================================ */
.arriba{
  position:fixed;
  right:calc(20px + var(--seguro-der));
  bottom:calc(20px + var(--seguro-abajo));
  z-index:90;
  width:46px; height:46px; border-radius:50%;
  background:var(--nav-acento, var(--marca));
  color:var(--nav-fondo, #fff);
  display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(0,0,0,.32);
  opacity:0; pointer-events:none; transition:all var(--transicion);
}
.arriba.visible{ opacity:1; pointer-events:auto; }
.arriba:hover{ transform:translateY(-3px); }


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 520px){
  .contenedor{ padding-inline:18px; }
  .mas{ left:20px; transform:none; }               /* a la izquierda, lejos del botón */
  @keyframes flota{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }
  .contacto__item{ width:100%; justify-content:center; }
  .skill{ grid-template-columns:36px 1fr auto; gap:10px; }
  .skill__sigla{ width:36px; height:36px; font-size:13px; }
  .arriba{ right:13px; bottom:13px; }
}


/* ============================================================
   ANIMACIÓN DE ENTRADA  ·  gira 360° y se retira (máx. 1,5 s)
   ============================================================ */
.entrada{
  position:fixed; inset:0; z-index:500;
  display:grid; place-items:center;
  background:var(--marca);
  overflow:hidden;
  animation:abrir 1.15s cubic-bezier(.5,0,.78,.35) both;
}

.entrada__marca{
  width:min(46vw, 300px);
  height:auto;
  filter:brightness(0) invert(1);          /* logo en blanco sobre el rosa */
  /* Una sola curva que ACELERA de principio a fin. Si la curva
     terminara en desaceleración el logo frenaría antes de salir,
     y eso es lo que se sentía como una pausa. */
  animation:girar 1.15s cubic-bezier(.5,0,.78,.35) both;
  will-change:transform, opacity;
}

/* Gira 360° mientras crece sin parar, cada vez más rápido, hasta
   pasar de largo y abrir la página. Sin mesetas intermedias. */
@keyframes girar{
  0%   { transform:rotate(0deg)   scale(.16); opacity:0; }
  12%  { opacity:1; }
  88%  { opacity:1; }
  100% { transform:rotate(360deg) scale(4.2); opacity:0; }
}

/* la capa rosa acompaña el mismo empuje y se abre al final */
@keyframes abrir{
  0%,  70% { opacity:1; transform:scale(1); }
  100%     { opacity:0; transform:scale(1.5); }
}

/* la capa rosa también se abre, acompañando el acercamiento */


@media (prefers-reduced-motion: reduce){
  .entrada, .entrada__marca{ animation-duration:.3s; }
  @keyframes girar{ from{opacity:1;transform:none} to{opacity:0;transform:none} }
}


/* ============================================================
   ZONAS CLICABLES SOBRE UNA IMAGEN  (Singles → Spotify)
   ============================================================ */
.lienzo{ position:relative; }

.zona{
  position:absolute;
  left:0; right:0;
  cursor:pointer;
  border-radius:14px;
  transition:background var(--transicion);
}
.zona:hover,
.zona:focus-visible{ background:rgba(0,0,0,.10); }
.zona:focus-visible{ outline:3px solid #1db954; outline-offset:-6px; }

/* SOLO EL LOGO: botón circular justo debajo del rectángulo de su canción */
.zona__etiqueta{
  position:absolute;
  left:50%;
  top:100%;
  transform:translate(-50%, 10px);
  display:inline-grid; place-items:center;
  width:52px; height:52px;
  border-radius:50%;
  background:#1db954;                      /* verde Spotify */
  color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  transition:transform var(--transicion), box-shadow var(--transicion), background var(--transicion);
  pointer-events:none;               /* el clic lo recoge la zona entera */
}
.zona:hover .zona__etiqueta,
.zona:focus-visible .zona__etiqueta{
  background:#1ed760;
  transform:translate(-50%, 6px) scale(1.12);
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.zona__etiqueta svg{ width:32px; height:32px; }

/* en pantallas pequeñas el hueco entre discos es menor */
@media (max-width: 700px){
  .zona__etiqueta{
    width:42px; height:42px;
    transform:translate(-50%, 6px);
  }
  .zona__etiqueta svg{ width:26px; height:26px; }
  .zona:hover .zona__etiqueta{ transform:translate(-50%, 4px) scale(1.1); }
}
@media (max-width: 420px){
  .zona__etiqueta{ width:36px; height:36px; transform:translate(-50%, 4px); }
  .zona__etiqueta svg{ width:22px; height:22px; }
}