:root {
  --cara-w: 1080;
  --cara-h: 1381;
}

body {
  background: #fff;
  min-height: 100vh;
  margin: 0;
  font-family: 'Share Tech Mono', monospace;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* ----- HAMBURGER MENU ----- */
#hamburger {
  position: fixed;
  top: 24px; left: 24px;
  z-index: 1001;
  width: 42px; height: 42px;
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 4px;
  cursor: pointer;
  outline: none;
}
#hamburger span {
  display: block;
  width: 34px;
  height: 4px;
  background: #111;
  border-radius: 3px;
  transition: all 0.3s cubic-bezier(.6,.3,.3,1.2);
}
#hamburger.open span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
#hamburger.open span:nth-child(2) { opacity: 0; }
#hamburger.open span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }

/* ----- SIDE MENU ----- */
#side-menu {
  position: fixed;
  top: 0; left: -220px;
  width: 210px; height: 100vh;
  background: #111;
  color: #fff;
  z-index: 1000;
  box-shadow: 8px 0 28px #1117;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: 54px;
  transition: left 0.34s cubic-bezier(.7,.05,.2,1);
}
#side-menu.open { left: 0; }
#side-menu ul { margin: 0; padding: 0; list-style: none; }
#side-menu li {
  font-size: 1.19rem;
  letter-spacing: 0.03em;
  padding: 16px 26px;
  cursor: pointer;
  border-bottom: 1px solid #222;
  display: flex; align-items: center; gap: 12px;
  transition: background 0.15s;
}
#side-menu li:hover { background: #222; }
#side-menu li span { font-size: 1.2em; }

/* ----- CONTAINER ----- */
.container {
  position: relative;
  width: 90vw;
  max-width: 500px;
  aspect-ratio: 1080/1381;
  margin-top: 30px;
  background: none;
  overflow: visible;
}
.layer {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
  pointer-events: none;
  transition:
    filter 0.45s cubic-bezier(.6,.4,0,1),
    transform 0.55s cubic-bezier(.7,0,.2,1),
    opacity 0.36s cubic-bezier(.8,.2,.2,1);
}
.layer-cabeza { z-index: 1; }
.layer-cara   { z-index: 2; }
.layer-ojos   { z-index: 4; }
.layer-oreja  { z-index: 5; }
.layer-boca   { z-index: 3; }

/* Animaciones hover normales */

.container.boca-hover .layer-cara,
.container.boca-hover .layer-ojos,
.container.boca-hover .layer-oreja,
.container.boca-hover .layer-cabeza {
  transform: translateY(-30px) scale(1.05);
}
.container.oreja-hover .layer-oreja {
  transform: translateX(40px) scale(1.08) rotate(-8deg);
  filter: drop-shadow(-40px 0 40px #2228);
}
.container.ojos-hover .layer-ojos {
  opacity: 0;
  filter: grayscale(0.55);
}
.container.ojos-hover .layer-cara {
  filter:  blur(0px);
}
.container.cara-hover .layer-cara-animada {
  display: block;
  opacity: 1;
}
.container.cabeza-hover .layer-cabeza {
  transform: translateY(-55px) scale(1.08);
  filter: drop-shadow(0 -18px 38px #2227);
}

/* Dispersión al abrir proyectos */
.container.disperse .layer-cabeza { transform: translateY(-100px) scale(0.8) rotate(25deg); opacity: 0.4;}
.container.disperse .layer-cara   { transform: translateY(-50px) scale(0.9) rotate(7deg); opacity: 0.4;}
.container.disperse .layer-ojos   { transform: translateY(-50px) scale(0.9) rotate(7deg); opacity: 0.0;}
.container.disperse .layer-oreja  { transform: translateX(120px) translateY(-30px) scale(0.8) rotate(-30deg); opacity: 0.22;}
.container.disperse .layer-boca   { transform: translateY(0px) translateX(0px) scale(1.0) rotate(0deg); opacity: 0.15;}
.container.disperse .layer-cara-animada   { transform: translateY(0px) translateX(0px) scale(0.01) rotate(22deg); opacity: 0.0;}
/* No pointer en dispersión */
.container.disperse .hotspot, .container.disperse .callout { display: none !important; }

/* Hotspots */
.hotspot { position: absolute; cursor: pointer; z-index: 10; }
.hotspot-cabeza { left:15.8%; top:3.4%; width:58.8%; height:20.0%; }
.hotspot-ojos   { left:27.5%; top:25.0%; width:23.7%; height:7.2%; }
.hotspot-boca   { left:28%;   top:39.4%; width:18.4%; height:5.8%; }
.hotspot-oreja  { left:55.7%; top:28.5%; width:12.3%; height:13.7%; }
.hotspot-cara   { left:14.5%; top:74.5%; width:81.5%; height:21.9%; }

/* Callouts NEGROS, fuente blanca, shadows y decoraciones en gris */
.callout {
  display: block;
  position: absolute;
  min-width: 0;
  max-width: 90vw;
  background: none !important;
  color: #181818; /* TEXTO NEGRO */
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.04rem;
  letter-spacing: 0.05em;
  padding: 0 0 0 18px !important; /* Margen izquierdo para separar de la línea */
  border-radius: 0 !important;
  box-shadow: none !important;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.94) translateY(35px) translateX(0px);
  transition: all 0.38s cubic-bezier(.8,.16,.2,1);
  border: none !important;
  white-space: pre-line;
  z-index: 25;
  user-select: text;
  filter: blur(2px);
  text-shadow: 0 1px 4px #fff6, 0 0px 2px #fff3; /* Un leve resplandor claro para visibilidad */
}
.callout.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1.04) translateY(0px) translateX(62px);
  filter: blur(0) brightness(1.1);
}


.callout::before {
  display: none !important;
}


#callout-cabeza { left:75%; top:5%; }
#callout-ojos   { left:57%; top:14%; }
#callout-boca   { left:57%; top:43%; }
#callout-oreja  { left:80%; top:33%; }
#callout-cara   { left:30%; top:98%; }

.callout::before {
  content: "";
  position: absolute;
  left: -18px; top: 18px;
  border-width: 10px 16px 10px 0;
  border-style: solid;
  border-color: transparent #222a transparent transparent;
  filter: blur(0.5px);
}
#callout-cabeza::before { left: -17px; top: 22px; }
#callout-oreja::before  { left: -19px; top: 21px; }
#callout-boca::before   { left: -18px; top: 17px; }
#callout-ojos::before   { left: -18px; top: 13px; }
#callout-cara::before   { left: -18px; top: 23px; }

/* ----- PANEL DE PROYECTOS ----- */
#projects-panel {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2001;
  background: rgba(10,10,10,0.98);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s cubic-bezier(.7,.05,.2,1);
  padding-top: 84px;
}
#projects-panel.open {
  opacity: 1;
  pointer-events: all;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#back-arrow {
  position: absolute;
  top: 36px; left: 28px;
  background: none; border: none;
  cursor: pointer;
  z-index: 999;
  padding: 0;
  width: 46px; height: 46px;
}
#back-arrow svg { display: block; }
#projects-title {
  color: #fff;
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.36rem;
  margin-bottom: 32px;
  margin-top: 4px;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 14px #0009;
}
#projects-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 400px;
  width: 80vw;
}
#projects-list li {
  color: #fff;
  background: #161616cc;
  margin-bottom: 18px;
  padding: 18px 26px;
  border-radius: 15px;
  font-size: 1.09rem;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 18px #0004;
  transition: background 0.17s;
  font-family: 'Share Tech Mono', monospace;
}
#overlay {
  display: none;
  position: fixed;
  left:0;top:0;right:0;bottom:0;
  z-index: 900;
}
#side-menu.open ~ #overlay { display: block; }

@media (max-width:600px) {
  .container { max-width: 98vw; }
  .callout { font-size: 0.92rem; padding: 8px 10px; min-width: 100px; }
  #projects-panel { padding-top: 60px;}
  #projects-title { font-size: 1.02rem; }
  #projects-list li { font-size: 0.99rem; padding: 10px 13px; }
  #side-menu { width: 98vw; left: -98vw; }
  #side-menu.open { left: 0; }
}

@media (max-width:400px) {
  .container { max-width: 100vw; }
}

#bio {
  max-width: 90%;
  margin: 30px auto 0 auto;
  text-align: center;
  color: #222;
  font-family: 'Share Tech Mono', monospace;
  padding: 20px 0 0 0;
  letter-spacing: 0.02em;
  user-select: text;
}

.bio-title {
  font-size: 1.21rem;
  font-weight: bold;
  margin-bottom: 4px;
  color: #111;
  letter-spacing: 0.07em;
}
.bio-title span {
  color: #444;
  font-weight: 300;
  font-size: 1.07rem;
  margin-left: 7px;
}
.bio-body {
  font-size: 1.02rem;
  color: #222;
  margin-bottom: 4px;
  opacity: 0.92;
}
.bio-body .en {
  color: #888;
  display: block;
  margin-top: 5px;
  font-size: 0.97em;
}
.container {
  position: relative;
  width: 90vw;
  max-width: 500px;
  margin: 30px auto 0 auto;
  background: none;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 1080/1381; 
  max-width: 100%;
}

.layer {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
  pointer-events: none;
}

#callout-lines-svg-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
  pointer-events: none;
  z-index: 30;
}
#callout-lines-svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.callout-line {
  stroke: #b7b7b7;
  stroke-width: 3.3;
  stroke-dasharray: 4 6;
  filter: drop-shadow(0 0 8px #3336);
}

/* ----- CARGA ----- */
#loader-bg {
  position: fixed;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: #101010;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background 0.4s cubic-bezier(.6,.05,.8,1);
}

#loader-progress-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#loader-progress {
  position: absolute;
  top: 0; left: 0;
  width: 64px; height: 64px;
  transform: rotate(-90deg);
}
#loader-bg-circle {
  fill: none;
  stroke: #222;
  stroke-width: 8px;
}
#loader-fg-circle {
  fill: none;
  stroke: #fff;
  stroke-width: 8px;
  stroke-linecap: round;
  stroke-dasharray: 176;
  stroke-dashoffset: 176;
  transition: stroke-dashoffset 0.24s cubic-bezier(.6,.4,.2,1);
}

#loader-dot {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin-left: -26px;
  margin-top: -26px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 24px #fff7, 0 2px 8px #0005;
  z-index: 999999;
  pointer-events: none;
  transition:
    transform 0.95s cubic-bezier(.3,1,.5,1.11),
    opacity 0.6s 0.5s;
  /* El scale dinámico lo pone el JS/CSS */
}

#loader-text {
  color: #fff;
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.14rem;
  letter-spacing: 0.06em;
  opacity: 1;
  transition: opacity 0.38s;
  margin-top: 10px;
}

#loader-bg.loaded #loader-progress,
#loader-bg.loaded #loader-progress-wrap {
  transition: none;
  z-index: 3;
}



#loader-bg.loaded #loader-text,
#loader-bg.loaded #loader-progress {
  opacity: 0;
  transition: opacity 0.28s;
}

#loader-bg.fadeout {
  transition: opacity 0.55s;
  opacity: 0;
  pointer-events: none;
}
#loader-bg.loaded #loader-dot {
  /* Cambiaremos el scale por JS según pantalla, pero si quieres un valor fijo, prueba con: */
  /* transform: scale(50); */
  opacity: 1;
}
#loader-bg.fadedot #loader-dot {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(.7,.2,.7,1);
}

#main-content {
  opacity: 0;
  transition: opacity 1.1s cubic-bezier(.6,.2,.4,1);
}
#loader-bg-circle {
  display: none !important;
}

.layer-cara-animada {
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 10;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
  pointer-events: none;
  display: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.container.cara-hover .layer-cara-animada {

  opacity: 1;
}

.puma-speedcat-2025 {
  width: 100%;
  max-width: 920px;
  margin: 40px auto 0 auto;
  background: transparent;
  font-family: 'Share Tech Mono', Arial, monospace;
  color: #fff;
  box-sizing: border-box;
}

.puma-mainbar {
  display: flex;
  align-items: center; /* Cambia de flex-start a center */
  gap: 32px;
  width: 100%;
  margin-bottom: 18px;
}

.puma-box-img {
  transform: scale(1.25);
  display: block;
  margin: 0 auto; /* Centra horizontalmente */
  max-width: 800px;
  width: 100%;
  height: auto;
  background: transparent;
  box-shadow: none;
}

.puma-titulo {
  font-size: 2.1rem;
  font-weight: bold;
  margin: 10px 0 22px 0;
  color: #fff;
  letter-spacing: 2px;
  font-style: italic;
  text-shadow: 0 3px 16px #0009, 0 1px 4px #000c;
}

.puma-descripcion {
  list-style: disc inside;
  margin: 0;
  padding: 0;
}

.puma-descripcion li {
  font-size: 1.1rem;
  margin-bottom: 9px;
  line-height: 1.55;
  color: #fff;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Gallery */
.puma-gallery {
  margin-top: 18px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.puma-story-img {
  border-radius: 13px;
  height: 200px;
  width: 112px;
  object-fit: cover;
  background: #111;
  box-shadow: 0 2px 16px #0007;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
}
.puma-story-img:hover {
  transform: scale(1.12) rotate(-1deg);
  box-shadow: 0 4px 36px #000a;
  z-index: 2;
}

/* Modal styles */
.puma-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100vw; height: 100vh;
  overflow: auto;
  background: rgba(18, 18, 18, 0.94);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: all .2s;
}
.puma-modal-content {
  margin: auto;
  display: block;
  max-width: 90vw;
  max-height: 88vh;
  border-radius: 17px;
  box-shadow: 0 4px 36px #000c;
  border: 3.5px solid #fff;
  background: #000;
}
.puma-modal-close {
  position: absolute;
  top: 38px;
  right: 58px;
  color: #fff;
  font-size: 2.7rem;
  font-weight: 700;
  cursor: pointer;
  text-shadow: 0 2px 18px #000b;
  z-index: 10001;
}
@media (max-width: 1000px) {
  .puma-mainbar { flex-direction: column; gap:18px; align-items:center;}
  .puma-box-img { width: 42vw; max-width: 98vw;}
  .puma-titulo, .puma-descripcion { text-align:center;}
  .puma-gallery { justify-content: center;}
}
@media (max-width: 600px) {
  .puma-box-img { width: 88vw;}
  .puma-story-img { height: 140px; width: 80px;}
  .puma-modal-close { top:12px; right:18px; }
}

/* --- Vídeo responsive Vimeo (sección “ojos”) --- */
.video-embed {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
}
.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* --- Mini-biografía (sección “boca”) --- */
.minibio {
  color: #fff;
  line-height: 1.6;
  padding: 0 20px;
  font-family: 'Share Tech Mono', monospace;
}

/* --- Formulario de contacto (sección “cara”) --- */
#contact-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 360px;
  margin: 0 auto;
}
#contact-form input,
#contact-form textarea {
  width: 100%;
  padding: 8px;
  font-family: inherit;
  border: 1px solid #ccc;
  border-radius: 4px;
}
#contact-form button {
  padding: 10px 20px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* --- Links de descarga de CV --- */
.cv-links {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  justify-content: center;
}
.cv-links a {
  text-decoration: none;
  border: 1px solid #111;
  padding: 6px 12px;
  border-radius: 4px;
  color: #111;
  font-weight: bold;
}