/* ============================================================
   ALIN — PORTFOLIO
   Paleta y tipografías: cambia aquí y cambia en todo el sitio
   ============================================================ */

:root{
  --black:      #000000;
  --panel:      #0E0E14;
  --panel-2:    #14141C;
  --edge:       rgba(255,255,255,0.12);
  --white:      #F2F2F0;
  --dim:        #8A8A98;
  --blue:       #1414D8;   /* azul de la barra de tareas */
  --blue-glow:  #4A62FF;   /* azul brillante para acentos */
  --aqua:       #40E0D0;   /* aguamarina */

  --mono:    'JetBrains Mono', monospace;
  --pixel:   'VT323', monospace;
  --pixel2:  'Space Grotesk', sans-serif;
  --display: 'Anton', sans-serif;
  --body:    'Inter', sans-serif;

  --taskbar-h: 54px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--body);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Imagen que no cargó: muestra un recuadro con el nombre del archivo */
img.missing{
  width:64px; height:64px;
  background:repeating-linear-gradient(45deg,#1a1a22 0 6px,#101018 6px 12px);
  border:1px dashed var(--dim);
  font-family:var(--mono); font-size:8px; color:var(--dim);
  display:flex; align-items:center; justify-content:center; text-align:center;
  object-fit:contain;
}

/* ============================================================
   ESCRITORIO
   ============================================================ */
.desktop{
  position:relative;
  z-index:0;
  height:calc(100vh - var(--taskbar-h));
  overflow:hidden;
  background:#0A0A3C;
}
.desk-crt-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-3; pointer-events:none;
  filter:brightness(1.75) contrast(1) saturate(0.85);
}
.desk-crt-lines{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(
    0deg, rgba(0,0,0,0.14) 0px, rgba(0,0,0,0.14) 1px,
    transparent 1px, transparent 3px
  );
}
.desk-crt-scanner{
  position:absolute; left:0; right:0; height:140px; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(64,224,208,0.18), transparent);
  animation:crtScan 6s linear infinite;
}
@keyframes crtScan{
  0%   { top:-140px; }
  100% { top:100%; }
}
.desk-cursor-glow{
  position:absolute; z-index:-1; pointer-events:none;
  width:260px; height:260px; border-radius:50%;
  left:0; top:0; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(64,224,208,0.16) 0%, transparent 70%);
  mix-blend-mode:screen;
  opacity:0; transition:opacity .3s ease;
}
.desk-cursor-glow.on{ opacity:1; }
.desktop::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(
      0deg, rgba(0,0,0,0.16) 0px, rgba(0,0,0,0.16) 1px,
      transparent 1px, transparent 3px
    ),
    rgba(10,10,40,0.25);
  background-blend-mode:normal, multiply;
}
.desktop::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  opacity:0.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:crtNoise 0.2s steps(1) infinite;
}
@keyframes crtNoise{
  0%   { transform:translate(0,0); }
  50%  { transform:translate(-2%,1%); }
  100% { transform:translate(1%,-2%); }
}
.desk-wallpaper{
  display:none;
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-2; pointer-events:none;
  filter:saturate(0.55) brightness(0.9);
}
.aurora-wrap{
  position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.aurora-drift{
  position:absolute; inset:-50%; width:200%; height:200%;
  background:
    radial-gradient(circle at 30% 40%, rgba(64,224,208,0.18), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(20,20,216,0.30), transparent 45%),
    radial-gradient(circle at 50% 20%, rgba(120,80,255,0.16), transparent 40%);
  animation:auroraDrift 16s ease-in-out infinite;
}
@keyframes auroraDrift{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  33%{ transform:translate(-3%,2%) rotate(6deg); }
  66%{ transform:translate(2%,-3%) rotate(-5deg); }
}
.desk-wallpaper-missing{
  display:none; position:absolute; inset:0; z-index:-1;
  align-items:center; justify-content:center;
  font-family:var(--mono); font-size:12px; color:var(--dim);
  background:repeating-linear-gradient(45deg,#16161e 0 10px,#1c1c26 10px 20px);
}
.desk-wallpaper.missing ~ .desk-wallpaper-missing{ display:flex; }

.desk-brand{
  position:absolute; top:34px; left:50%; transform:translateX(-50%);
  height:150px; width:auto; pointer-events:none; user-select:none;
  filter:
    drop-shadow(3px 0 0 rgba(0,255,255,0.75))
    drop-shadow(-3px 0 0 rgba(255,0,140,0.75))
    drop-shadow(0 0 30px rgba(64,224,208,0.4));
}

.desk-hero{
  position:absolute; top:50%; left:50%;
  max-width:min(620px, 62vw); max-height:70vh; object-fit:contain;
  pointer-events:none; user-select:none;
  filter:drop-shadow(0 20px 60px rgba(74,98,255,0.25));
  animation: heartSwing 7s ease-in-out infinite;
}

/* el corazón se balancea como si colgara de la cadena */
@keyframes heartSwing{
  0%, 100% { transform: translate(-50%,-48%) rotate(-2.5deg); }
  50%      { transform: translate(-50%,-52%) rotate(2.5deg);  }
}

/* --- iconos --- */
.desk-icons{
  position:absolute; top:54px; left:28px;
  display:flex; flex-direction:column; gap:26px;
  z-index:5;
}

.desk-icon{
  width:104px;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  cursor:pointer; user-select:none;
  padding:8px 4px; border:1px solid transparent;
  transition:background .12s, border-color .12s;
}
.desk-icon:hover{ background:rgba(74,98,255,0.14); border-color:rgba(74,98,255,0.35); }
.desk-icon:active{ transform:translateY(1px); }
.desk-icon.selected{
  background:rgba(64,224,208,0.10);
  border-color:var(--aqua);
  outline:1px solid rgba(64,224,208,0.45);
  outline-offset:-3px;
}

.desk-icon img{
  width:70px; height:70px; object-fit:contain;
  image-rendering:pixelated;     /* mantiene el pixel art nítido */
}

.desk-icon span{
  font-family:var(--mono); font-size:11px; letter-spacing:0.06em;
  color:var(--white); text-align:center; line-height:1.2;
}

.desk-icon--contact{
  position:absolute; right:46px; bottom:40px; z-index:5;
}

/* --- ícono destacado: Selected Work (atajo directo para reclutadores) --- */
.desk-icon--featured{
  border-color:rgba(64,224,208,0.5);
  background:rgba(64,224,208,0.08);
  animation:featuredPulse 2.4s ease-in-out infinite;
}
.desk-icon--featured:hover{
  background:rgba(64,224,208,0.20); border-color:var(--aqua);
}
.desk-icon--featured span{ color:var(--aqua); font-weight:600; }
@keyframes featuredPulse{
  0%,100%{ box-shadow:0 0 0 rgba(64,224,208,0); }
  50%{ box-shadow:0 0 14px rgba(64,224,208,0.45); }
}

.sm-item--featured span{ color:var(--aqua); font-weight:600; }

/* ============================================================
   BARRA DE TAREAS
   ============================================================ */
.taskbar{
  position:fixed; bottom:0; left:0; right:0; height:var(--taskbar-h);
  background:var(--blue);
  border-top:2px solid #6E6EFF;
  box-shadow:inset 0 -2px 0 #05056B;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 8px; z-index:700;
  font-family:var(--mono); font-size:12px; letter-spacing:0.06em;
}
.tb-left, .tb-right{ display:flex; align-items:center; gap:8px; }

/* separador vertical estilo Win95 */
.tb-divider{
  width:2px; height:60%;
  border-left:1px solid #05056B;
  border-right:1px solid #6E6EFF;
  margin:0 4px;
}

/* bandeja del sistema — hundida */
.tb-tray{
  display:flex; align-items:center; gap:14px;
  padding:5px 14px;
  border-top:2px solid #05056B;
  border-left:2px solid #05056B;
  border-bottom:2px solid #6E6EFF;
  border-right:2px solid #6E6EFF;
  margin-right:6px;
}

/* icono de batería dibujado en CSS */
.bat{ display:flex; align-items:center; gap:6px; }
.bat-shell{
  width:24px; height:12px; position:relative;
  border:1.5px solid #fff; padding:1.5px;
}
.bat-shell::after{
  content:""; position:absolute; right:-4px; top:3px;
  width:2px; height:4px; background:#fff;
}
.bat-fill{
  display:block; height:100%; width:85%;
  background:#fff; transition:width .4s ease;
}
.bat-fill.low{ background:#FF5A5A; }

/* botones de ventanas abiertas */
.tb-open{ display:flex; gap:6px; }
.tb-open button{
  background:rgba(0,0,0,0.28); border:1px solid rgba(255,255,255,0.3);
  color:#fff; font-family:var(--mono); font-size:10px; letter-spacing:0.05em;
  padding:4px 10px; cursor:pointer;
}
.tb-open button:hover{ background:rgba(0,0,0,0.5); }

.tb-sys{ opacity:0.85; }
.tb-clock{ font-weight:700; min-width:46px; text-align:right; }

.tb-skip{
  cursor:pointer; opacity:0.8; border-bottom:1px solid transparent; padding-bottom:1px;
}
.tb-skip:hover{ opacity:1; border-color:#fff; }

/* ============================================================
   VENTANAS
   ============================================================ */
.window{
  position:absolute;
  width:440px;
  background:var(--panel);
  border:1.5px solid var(--edge);
  box-shadow:0 24px 60px rgba(0,0,0,0.75);
  z-index:750;
  display:flex; flex-direction:column;
  max-height:calc(100vh - var(--taskbar-h) - 40px);
}
.window[data-key="about"]{ width:640px; }

.win-bar{
  background:linear-gradient(90deg,#0A0A8C,var(--blue));
  padding:7px 10px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:11px; letter-spacing:0.05em;
  cursor:grab; user-select:none; color:#fff;
  flex-shrink:0;
}
.win-bar:active{ cursor:grabbing; }
.win-btns{ display:flex; gap:4px; }
.win-btns i{
  width:16px; height:14px; background:#D6D6D6; border:1px solid #000;
  color:#000; font-size:9px; font-style:normal; font-family:var(--mono);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.win-btns i:hover{ background:#fff; }

.win-path{
  background:var(--panel-2); border-bottom:1px solid var(--edge);
  padding:7px 12px; font-family:var(--mono); font-size:10px;
  color:var(--dim); letter-spacing:0.05em;
  display:flex; justify-content:space-between; flex-shrink:0;
}
.win-path b{ color:var(--aqua); font-weight:500; }

.win-content{ padding:16px; overflow-y:auto; }

/* ventana de artwork: solo la imagen, grande */
.window--art{ width:min(460px, calc(100vw - 40px)); }
.win-content--art{ padding:0; background:#000; }
.win-content--art img,
.win-content--art video{ width:100%; display:block; }

/* ventanita de descripción del artwork */
.window--caption{ width:240px; }
.win-content--caption{
  font-family:var(--mono); font-size:12px; color:var(--dim);
  line-height:1.6; letter-spacing:0.03em;
}

/* ventana de carpeta: más ancha, para la cuadrícula de proyectos */
.window--folder{ width:min(720px, calc(100vw - 40px)); }
.window--folder .win-content{ padding:22px 22px 14px; }

/* cuadrícula de proyectos dentro de una carpeta — estilo iconos */
.proj-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px 16px;
}

.proj-card{ cursor:pointer; text-align:center; max-width:150px; margin:0 auto; }

.proj-card .thumb{
  aspect-ratio:3/4; border:1px solid var(--edge); overflow:hidden;
  background:repeating-linear-gradient(0deg,#16161e 0 2px,#20202c 2px 3px);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, transform .15s;
}
.proj-card .thumb img,
.proj-card .thumb video{
  width:100%; height:100%; object-fit:cover; display:block;
  image-rendering:pixelated;
}
.proj-card .thumb--icon{
  border:0; background:transparent; aspect-ratio:1/1;
  transform:scale(1.35);
}
.proj-card .thumb--icon img,
.proj-card .thumb--icon video{
  object-fit:contain; padding:0; box-sizing:border-box;
}
.proj-card:hover .thumb{ border-color:var(--aqua); transform:translateY(-3px); }
.proj-card:hover .thumb--icon{ transform:scale(1.4) translateY(-3px); border-color:transparent; }

/* seleccionado: línea aguamarina alrededor */
.proj-card.selected .thumb{
  outline:6px solid var(--aqua);
  outline-offset:3px;
  border-color:var(--aqua);
  box-shadow:0 0 18px rgba(64,224,208,0.35);
}
.proj-card.selected .thumb--icon{
  outline:none; box-shadow:none; border-color:transparent;
}
.proj-card.selected .name{ color:var(--aqua); }

.proj-card .name{
  font-family:var(--mono); font-size:11px; margin-top:9px; color:var(--white);
  line-height:1.3;
}
.proj-card:hover .name{ color:var(--aqua); }
.proj-card .sub{
  font-family:var(--mono); font-size:8.5px; color:var(--dim);
  text-transform:uppercase; letter-spacing:0.07em; margin-top:3px;
}

@media (max-width:820px){
  .proj-grid{ grid-template-columns:repeat(2,1fr); gap:20px 12px; }
}

/* contenido de texto (About / Contact) */
.win-text{ font-family:var(--mono); font-size:12.5px; line-height:1.75; color:var(--white); }
.win-text h3{
  font-family:var(--display); font-size:22px; letter-spacing:0.02em;
  margin-bottom:4px; font-weight:400;
}
.win-text .tag{
  font-family:var(--mono); font-size:9.5px; color:var(--aqua);
  text-transform:uppercase; letter-spacing:0.12em; margin-bottom:14px; display:block;
}
.win-text hr{ border:none; border-top:1px solid var(--edge); margin:16px 0; }
.win-text .label{
  font-size:11px; color:#2E5EC2; font-weight:700; text-transform:uppercase;
  letter-spacing:0.12em; display:block; margin-bottom:6px;
}
.win-text .order{
  font-family:var(--mono); font-size:9.5px; color:var(--aqua);
  letter-spacing:0.08em; display:block; margin-bottom:10px;
}
.win-text .status{
  font-family:var(--mono); font-size:9.5px; color:var(--dim);
  letter-spacing:0.1em; display:block; margin-top:10px;
}
.win-text b{ color:var(--white); font-weight:700; }
.win-text .org{ color:#2E5EC2; font-weight:700; }
.win-text a{ color:var(--aqua); }

.skillbar{ display:flex; justify-content:space-between; align-items:center; padding:3px 0; }
.skillbar > span:first-child{ font-weight:700; color:var(--white); }
.skillbar .bar{ font-family:var(--mono); letter-spacing:-1px; color:var(--aqua); }
.skillbar .lvl{ font-family:var(--mono); font-size:11px; color:var(--aqua); font-style:italic; }

/* ============================================================
   CASE STUDY
   ============================================================ */
.case{
  position:fixed; inset:0; z-index:600;
  display:none;
  padding:16px 16px calc(var(--taskbar-h) + 16px);
}
.case.open{ display:block; }
.case.maximized{ padding:0 0 var(--taskbar-h); }

/* marco de ventana */
.case-chrome{
  height:100%; display:flex; flex-direction:column; overflow:hidden;
  background:var(--black);
  border-top:2px solid #6E6EFF;
  border-left:2px solid #6E6EFF;
  border-bottom:2px solid #05056B;
  border-right:2px solid #05056B;
  box-shadow:0 24px 70px rgba(0,0,0,0.75);
}
.case.maximized .case-chrome{ border-width:0 0 2px 0; }

.case-bar{
  flex-shrink:0;
  display:flex; justify-content:space-between; align-items:center;
  background:linear-gradient(90deg,#0A0A8C,var(--blue));
  padding:7px 10px;
}
.case-bar-title{
  font-family:var(--mono); font-size:11px; letter-spacing:0.06em; color:#fff;
}
.case-bar-btns{ display:flex; gap:4px; }
.case-bar-btns i{
  width:17px; height:15px; background:#D6D6D6; border:1px solid #000;
  color:#000; font-size:9px; font-style:normal; font-family:var(--mono);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.case-bar-btns i:hover{ background:#fff; }

.case-scroll{ flex:1; overflow-y:auto; overflow-x:hidden; }

/* --- 1. reveal --- */
.case-reveal{
  min-height:calc(100vh - var(--taskbar-h) - 70px); position:relative;
  display:flex; align-items:center; justify-content:center;
  background:#0B0B10;
}

.case-logo{
  position:absolute; top:38px; left:50%; transform:translateX(-50%);
  max-width:230px; max-height:70px; object-fit:contain; z-index:3;
}

.case-stage{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(30px,6vw,80px); flex-wrap:wrap;
  padding:0 40px;
}
/* resplandor con el color del proyecto, en vez del círculo */
.case-stage::before{
  content:""; position:absolute; top:50%; left:50%;
  width:min(760px,86vw); aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; z-index:-1; pointer-events:none;
  background:radial-gradient(circle, var(--projcolor,#333) 0%, transparent 62%);
  opacity:0.42; filter:blur(24px);
}

.case-mock{ width:min(560px, 46vw); }
.case-mock img{
  width:100%; display:block;
  animation:mockFloat 6s ease-in-out infinite;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,0.55));
}
@keyframes mockFloat{
  0%,100%{ transform:translateY(0) rotate(-1.5deg); }
  50%    { transform:translateY(-22px) rotate(1.5deg); }
}

.case-intro{
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
  max-width:min(520px, 46vw);
  animation:introIn .6s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes introIn{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }

.case-intro h1{
  font-family:var(--display); font-size:clamp(44px,6.5vw,88px);
  line-height:0.94; color:#fff; letter-spacing:0.01em; margin-top:10px;
}

.case-exhibit{
  position:relative;
  background:var(--white); color:#000;
  font-family:var(--mono); font-size:10px; letter-spacing:0.1em;
  padding:5px 13px; border-radius:20px; text-transform:uppercase;
}

.case-scrollcue{
  position:absolute; bottom:74px;
  font-family:var(--mono); font-size:10px; letter-spacing:0.14em;
  color:rgba(242,242,240,0.4);
  animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

.case-meta{
  position:absolute; bottom:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  gap:20px; padding:9px 30px;
  font-family:var(--mono); font-size:13px; letter-spacing:0.04em;
  color:#000;
}
.cm-left{ display:flex; align-items:center; gap:22px; }

/* botón de prototipo */
.case-proto{
  background:#000; color:#fff; text-decoration:none;
  font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
  padding:6px 13px; border:1px solid #000; white-space:nowrap;
}
.case-proto:hover{ background:transparent; color:#000; }
.cm-right{ display:flex; gap:26px; text-align:right; }
.case-meta b{ font-weight:700; }
.case-back{ cursor:pointer; font-weight:700; }
.case-back:hover{ text-decoration:underline; }

/* icono del proyecto dentro del círculo */
.case-icon{
  width:76px; height:76px; object-fit:contain;
  image-rendering:pixelated; margin-bottom:12px;
}
.theme-paper .case-icon{ width:220px; height:220px; margin-bottom:18px; }
.theme-paper .case-stage{ align-items:center; text-align:center; }
.theme-paper .case-intro{ align-items:center; max-width:none; }

/* --- 2. editorial --- */
.case-editorial{
  --caseink:#1C1266;                 /* azul profundo — cambia aquí y cambia todo */
  min-height:80vh; padding:90px 60px;
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;
  color:var(--caseink);
}
.case-editorial h2{ color:#FFFFFF; }                               /* titular en blanco */
.case-body p, .case-body li, .case-body strong{ color:#000; }     /* problem / solution en negro */
/* animación por palabras — calmada */
.case-editorial h2 .w{
  display:inline-block; opacity:0;
  transform:translateY(10px);
  filter:blur(7px);
  animation:wordIn 1.4s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes wordIn{
  to{ opacity:1; transform:none; filter:blur(0); }
}

.case-editorial h2.fading .w{
  animation:wordOut 1.6s ease forwards;
}
@keyframes wordOut{
  to{ opacity:0; transform:translateY(-6px); filter:blur(6px); }
}

/* --- animación "respirar": toda la frase entra y sale, en bucle --- */
.case-editorial h2.breathe{
  animation:breathe 10s ease-in-out infinite;
}
@keyframes breathe{
  0%   { opacity:0; transform:scale(.98) translateY(10px); filter:blur(9px); }
  14%  { opacity:1; transform:scale(1)   translateY(0);    filter:blur(0);   }
  74%  { opacity:1; transform:scale(1)   translateY(0);    filter:blur(0);   }
  90%  { opacity:0; transform:scale(1.01) translateY(-6px); filter:blur(7px); }
  100% { opacity:0; }
}

/* --- animación "encendido": titila como un letrero prendiéndose, y se asienta --- */
.case-editorial h2.flicker{
  animation:flicker 1.1s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes flicker{
  0%   { opacity:0; transform:scale(.94); }
  8%   { opacity:1; }
  12%  { opacity:0.2; }
  18%  { opacity:1; }
  24%  { opacity:0.35; }
  30%  { opacity:1; transform:scale(1.015); }
  100% { opacity:1; transform:scale(1); }
}

/* --- animación "magnetic": las palabras llegan de distintos lados y se imantan a su lugar --- */
.mag-word{
  display:inline-block;
  animation:magnetic 1.4s cubic-bezier(.16,.9,.2,1.35) both;
}
@keyframes magnetic{
  0%   { opacity:0; transform:translate(var(--mx),var(--my)) rotate(var(--mr)) scale(.6); }
  55%  { opacity:1; }
  100% { opacity:1; transform:translate(0,0) rotate(0deg) scale(1); }
}

/* --- animación "wave": las letras se deforman en una curva continua --- */
.wave-ch{
  display:inline-block;
  animation:waveBob 2s ease-in-out infinite;
}
@keyframes waveBob{
  0%, 100% { transform:translateY(0) rotate(0deg); }
  50%      { transform:translateY(-16px) rotate(-6deg); }
}

/* --- animación "mouse": las letras reaccionan a la cercanía del cursor --- */
.mouse-ch{
  display:inline-block;
  transition:transform .18s cubic-bezier(.2,.8,.3,1);
  will-change:transform;
}

/* --- animación "tilt3d": las letras se inclinan en 3D con el cursor --- */
.tilt-ch{
  display:inline-block;
  transition:transform .16s cubic-bezier(.2,.8,.3,1);
  will-change:transform;
}

#caseHeadline.typing::after{
  content:"\258C"; margin-left:2px;
  animation:caret .55s steps(1) infinite;
}
@keyframes caret{ 50%{ opacity:0; } }

.case-editorial h2{
  font-family:var(--display); font-size:clamp(30px,3.6vw,48px);
  line-height:1.1; font-weight:400;
}
.case-body p{
  font-family:var(--pixel2); font-size:17.5px; font-weight:400;
  line-height:1.6; margin-bottom:18px; letter-spacing:-0.005em;
}
.case-body p strong{
  font-family:var(--display); font-weight:400; font-size:19px;
  letter-spacing:0.04em; text-transform:uppercase; display:block; margin-bottom:2px;
}

/* nota sobre el cliente: logo + texto de contexto, arriba de Problem/Solution */
.client-note{
  display:flex; align-items:center; gap:22px;
  padding-bottom:26px; margin-bottom:26px;
  border-bottom:1px solid rgba(255,255,255,0.14);
}
.client-note img{
  width:min(160px, 34%); flex:0 0 auto; display:block;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,0.25));
}
.client-note p{
  font-family:var(--pixel2); font-size:15.5px; line-height:1.65;
  color:#000; opacity:0.72; margin:0;
}
@media (max-width:820px){
  .client-note{ flex-direction:column; align-items:flex-start; gap:14px; }
  .client-note img{ width:130px; }
}
.case-body ul{ list-style:none; margin-top:26px; }
.case-body li{
  font-family:var(--pixel2); font-size:15px; font-weight:500; letter-spacing:0;
  padding:10px 0; border-top:1px solid rgba(0,0,0,0.18);
}
.case-body li:last-child{ border-bottom:1px solid rgba(0,0,0,0.18); }

/* --- borde de papel roto arriba y abajo del editorial --- */
.case-editorial{ position:relative; }
.theme-paper .case-editorial{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-blend-mode:multiply;
}
.case-editorial.torn{ padding-top:60px; padding-bottom:120px; }
.case-editorial.torn-bottom{ padding-bottom:120px; }
.case-editorial.torn::before,
.case-editorial.torn::after,
.case-editorial.torn-bottom::after{
  content:""; position:absolute; left:0; right:0; height:26px;
  background:var(--torn-color, var(--black));
  filter:drop-shadow(0 3px 3px rgba(0,0,0,0.14));
}
.case-editorial.torn::before{
  top:0;
  clip-path:polygon(0% 26px, 0.00% 10.6px, 3.85% 15.6px, 7.69% 18.9px, 11.54% 18.1px, 15.38% 16.8px, 19.23% 17.2px, 23.08% 16.6px, 26.92% 15.4px, 30.77% 16.6px, 34.62% 18.3px, 38.46% 16.1px, 42.31% 11.5px, 46.15% 9.3px, 50.00% 9.4px, 53.85% 9.2px, 57.69% 10.3px, 61.54% 13.9px, 65.38% 16.3px, 69.23% 14.7px, 73.08% 13.3px, 76.92% 15.2px, 80.77% 17.3px, 84.62% 17.9px, 88.46% 19.1px, 92.31% 20.2px, 96.15% 17.7px, 100.00% 12.6px, 100% 26px);
  transform:translateY(-100%) scaleY(-1);
}
.case-editorial.torn::after,
.case-editorial.torn-bottom::after{
  bottom:0;
  clip-path:polygon(0% 0, 0.00% 13.5px, 3.85% 12.2px, 7.69% 12.3px, 11.54% 11.1px, 15.38% 10.6px, 19.23% 11.8px, 23.08% 10.9px, 26.92% 6.9px, 30.77% 5.0px, 34.62% 7.1px, 38.46% 9.8px, 42.31% 11.4px, 46.15% 14.1px, 50.00% 16.6px, 53.85% 15.4px, 57.69% 12.6px, 61.54% 12.9px, 65.38% 15.2px, 69.23% 15.3px, 73.08% 14.0px, 76.92% 13.4px, 80.77% 11.4px, 84.62% 7.0px, 88.46% 4.6px, 92.31% 6.9px, 96.15% 9.9px, 100.00% 10.4px, 100% 0);
  transform:translateY(100%);
}

/* --- 2. personas --- */
.case-personas{
  background:var(--black); padding:80px 60px 10px;
  max-width:1160px; margin:0 auto;
}
.case-personas h3{
  font-family:var(--display); font-size:32px; font-weight:400;
  color:var(--white); letter-spacing:0.02em; line-height:1; margin-bottom:30px;
}
.cp-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }

.cp-card{
  border:1px solid var(--edge); background:var(--panel);
  display:flex; flex-direction:column; overflow:hidden;
}
.cp-photo{
  aspect-ratio:16/10; overflow:hidden; background:#101018;
  border-bottom:1px solid var(--edge);
}
.cp-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.cp-text{ padding:20px 22px 22px; }
.cp-card.no-photo{ background:transparent; border:0; }
.cp-card.no-photo .cp-text{ padding:0; }
.cp-card.no-photo .cp-name{ font-size:22px; }
.cp-name{
  font-family:var(--display); font-size:26px; font-weight:400;
  color:var(--white); letter-spacing:0.02em; line-height:1;
}
.cp-age{
  font-family:var(--mono); font-size:10px; color:var(--dim);
  text-transform:uppercase; letter-spacing:0.12em; margin-top:6px;
}
.cp-line{
  font-family:var(--pixel2); font-size:15px; line-height:1.6;
  color:var(--white); margin-top:14px;
}
.cp-quote{
  font-family:var(--pixel2); font-size:14.5px; font-style:italic; line-height:1.6;
  color:var(--dim); border-left:2px solid var(--aqua);
  padding-left:14px; margin-top:16px;
}
.cp-drove{
  font-family:var(--mono); font-size:11px; color:var(--aqua);
  letter-spacing:0.05em; line-height:1.5; margin-top:18px;
  padding-top:14px; border-top:1px solid var(--edge);
}

@media (max-width:820px){
  .case-personas{ padding:48px 24px 6px; }
  .case-personas h3{ font-size:26px; margin-bottom:18px; }
  .cp-grid{ grid-template-columns:1fr; }
}

/* --- 2a. user flow --- */
.case-flow{
  background:var(--black); padding:80px 60px 20px;
  display:grid; grid-template-columns:1fr 300px; gap:46px;
  align-items:start; max-width:1160px; margin:0 auto;
}
.cf-head{ position:sticky; top:40px; }
.cf-head h3{
  font-family:var(--display); font-size:32px; font-weight:400;
  color:var(--white); letter-spacing:0.02em; line-height:1; margin-bottom:16px;
}
.cf-head p{
  font-family:var(--pixel2); font-size:15px; font-weight:400;
  line-height:1.7; color:var(--dim);
}
.cf-img{
  border:1px solid var(--edge); overflow:hidden; background:var(--black);
}
.cf-img img{ width:100%; display:block; }

/* mapa del sitio como diagrama de flujo (solo cuando el proyecto trae uf.sitemap) */
.case-flow.as-sitemap{
  grid-template-columns:1fr 320px; max-width:1320px; padding-top:100px; padding-bottom:60px;
}
.cf-img:has(.flow-chart){
  border:0; background:transparent; overflow:visible;
  padding:40px 30px; display:flex; justify-content:center;
}

.flow-chart{ display:flex; flex-direction:column; align-items:center; gap:0; }
.fc-node{
  display:inline-block; padding:13px 22px; font-family:var(--pixel2);
  font-size:13px; font-weight:700; letter-spacing:0.03em; color:#fff;
  border-radius:7px; text-align:center; white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,0.28);
}
.fc-arrow{ color:#3AA9AC; font-size:16px; line-height:1; margin:10px 0; }
.fc-trunk{ display:flex; flex-direction:column; align-items:center; }
.fc-root{ background:#001B4D; font-size:15px; padding:15px 26px; }
.fc-home{ background:#0091D5; }
.fc-split{ width:1px; height:44px; background:#3AA9AC; margin:6px 0 0; }
.fc-branches{
  display:flex; gap:56px; flex-wrap:wrap; justify-content:center;
  padding-top:26px; border-top:1px solid #3AA9AC; margin-top:0; max-width:920px;
}
.fc-col{ display:flex; flex-direction:column; align-items:center; padding-top:26px; position:relative; }
.fc-col::before{
  content:""; position:absolute; top:0; left:50%; width:1px; height:26px;
  background:#3AA9AC;
}
.fc-branch{ background:#3AA9AC; color:#00232a; }
.fc-leaf{ background:#1C9D5B; white-space:normal; max-width:160px; line-height:1.35; }
@media (max-width:1160px){
  .case-flow.as-sitemap{ grid-template-columns:1fr; padding-top:64px; }
  .fc-branches{ gap:36px; }
}
@media (max-width:820px){
  .fc-branches{ flex-direction:column; align-items:center; gap:30px; }
  .fc-col::before{ height:18px; }
}

@media (max-width:820px){
  .case-flow{ padding:48px 24px 12px; grid-template-columns:1fr; gap:22px; }
  .cf-head{ position:static; }
  .cf-head h3{ font-size:26px; margin-bottom:10px; }
}

/* --- 2b. lo-fi wireframes --- */
.case-wires{
  background:var(--black); padding:80px 60px 30px;
  display:grid; grid-template-columns:290px 1fr; gap:46px;
  align-items:start; max-width:1160px; margin:0 auto;
}
.cw-head{ position:sticky; top:40px; }
.cw-head h3{
  font-family:var(--display); font-size:32px; font-weight:400;
  color:var(--white); letter-spacing:0.02em; line-height:1;
  margin-bottom:16px;
}
.cw-head p{
  font-family:var(--pixel2); font-size:15px; font-weight:400;
  line-height:1.7; color:var(--dim);
}
.cw-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.cw-grid figure{
  border:1px solid var(--edge); overflow:hidden; background:#101018;
}
.cw-grid img{ width:100%; display:block; }

@media (max-width:820px){
  .case-wires{ padding:48px 24px 12px; grid-template-columns:1fr; gap:22px; }
  .cw-head{ position:static; }
  .cw-head h3{ font-size:26px; margin-bottom:10px; }
  .cw-grid{ grid-template-columns:repeat(2,1fr); }
}

/* --- 3. galería --- */
.case-gallery[hidden]{ display:none; }
.case-demo[hidden]{ display:none; }
.case-wires[hidden]{ display:none; }
.case-flow[hidden]{ display:none; }
.case-gallery{
  padding:70px 60px;
  background:var(--black);
  max-width:1060px; margin:0 auto;
}
.cg-grid{
  display:grid; grid-template-columns:repeat(12,1fr); gap:16px;
}
.case-gallery figure{ overflow:hidden; border:1px solid var(--edge); }

/* encabezado dentro de la galería (ej. "Social Media") */
.cg-heading{
  grid-column:span 12; margin:30px 0 4px;
  font-family:var(--display); font-weight:700; font-size:clamp(26px,3.4vw,42px);
  color:var(--white); letter-spacing:0.01em;
}

/* imágenes angostas (ej. capturas de redes) */
.cg-grid figure.narrow{ max-width:100%; }

/* lightbox: clic en cualquier imagen de galería para verla grande */
#lightbox{
  position:fixed; inset:0; z-index:900; display:flex;
  align-items:center; justify-content:center; padding:40px;
  background:rgba(0,0,0,0); pointer-events:none;
  opacity:0; transition:opacity .25s ease, background .25s ease;
}
#lightbox.open{
  background:rgba(0,0,0,0.9); opacity:1; pointer-events:auto;
}
#lightbox .lightbox-inner{
  max-width:min(1100px,92vw); max-height:88vh;
  transform:scale(.94); transition:transform .25s ease;
}
#lightbox.open .lightbox-inner{ transform:scale(1); }
#lightbox .lightbox-inner img,
#lightbox .lightbox-inner video{
  max-width:100%; max-height:88vh; display:block; margin:0 auto;
  box-shadow:0 30px 70px rgba(0,0,0,0.6);
}
#lightbox .lightbox-close{
  position:absolute; top:22px; right:30px;
  font-family:var(--mono); font-size:34px; color:#fff; cursor:pointer;
  line-height:1;
}

.case-gallery figcaption{
  font-family:var(--pixel2); font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  color:rgba(255,255,255,0.55); padding:12px 16px; border-top:1px solid rgba(255,255,255,0.10);
}
.case-gallery img{ width:100%; display:block; }
.case-gallery .span-12{ grid-column:span 12; }
.case-gallery .span-6{ grid-column:span 6; }

/* tema paper: fondo blanco, fotos separadas a todo el ancho, borde de papel roto */
.theme-paper .case-gallery{
  background:#C6DCC1; max-width:none; padding:80px 60px; gap:60px;
}
.theme-paper .case-gallery figure.reveal{
  border:0; overflow:visible; position:relative;
  opacity:0; transform:translateY(34px) rotate(-2deg) scale(.95);
  transition:opacity .75s ease, transform .75s cubic-bezier(.2,.8,.25,1);
}
/* marco blanco con el borde rasgado (no la foto) */
.theme-paper .case-gallery figure.reveal::before{
  content:""; position:absolute; inset:-20px;
  background:#fff;
  filter:drop-shadow(0 14px 22px rgba(0,0,0,0.20));
  clip-path:polygon(0.0% 10.9px, 12.5% 3.8px, 25.0% 4.0px, 37.5% 16.0px, 50.0% 10.3px, 62.5% 10.3px, 75.0% 9.5px, 87.5% 0.2px, 100.0% 10.5px, calc(100% - 13.8px) 0.0%, calc(100% - 9.0px) 12.5%, calc(100% - 0.2px) 25.0%, calc(100% - 10.6px) 37.5%, calc(100% - 10.4px) 50.0%, calc(100% - 10.8px) 62.5%, calc(100% - 15.2px) 75.0%, calc(100% - 2.7px) 87.5%, calc(100% - 4.6px) 100.0%, 100.0% calc(100% - 9.1px), 87.5% calc(100% - 14.3px), 75.0% calc(100% - 6.0px), 62.5% calc(100% - 1.4px), 50.0% calc(100% - 12.3px), 37.5% calc(100% - 9.6px), 25.0% calc(100% - 12.4px), 12.5% calc(100% - 13.3px), 0.0% calc(100% - 0.9px), 12.0px 100.0%, 12.6px 87.5%, 9.6px 75.0%, 13.2px 62.5%, 2.1px 50.0%, 4.7px 37.5%, 13.8px 25.0%, 9.1px 12.5%, 13.8px 0.0%);
  z-index:0;
}
.theme-paper .case-gallery figure.reveal img{ position:relative; z-index:1; }
.theme-paper .case-gallery figure.reveal:nth-child(2n){ transform:translateY(34px) rotate(2deg) scale(.95); }
.theme-paper .case-gallery figure.reveal.in{
  opacity:1; transform:translateY(0) rotate(-1.2deg) scale(1);
}
.theme-paper .case-gallery figure.reveal.in:nth-child(2n){ transform:translateY(0) rotate(1.2deg) scale(1); }
@media (max-width:820px){
  .theme-paper .case-gallery{ padding:50px 24px; gap:40px; }
}
.case-gallery .span-4{ grid-column:span 4; }
.case-gallery .span-3{ grid-column:span 3; }

/* --- 3a. sistema visual --- */
.case-system{
  background:#01182C;              /* mismo azul del sistema visual */
  padding:70px 60px 80px;
  max-width:none; margin:0;
}
.case-system > *{ max-width:1040px; margin-left:auto; margin-right:auto; }
.cs-head{
  display:grid; grid-template-columns:300px 1fr; gap:46px;
  align-items:start; margin-bottom:28px;
}
.cs-head h3{
  font-family:var(--display); font-size:32px; font-weight:400;
  color:var(--white); letter-spacing:0.02em; line-height:1;
}
.cs-head p{
  font-family:var(--pixel2); font-size:15.5px; font-weight:400;
  line-height:1.7; color:rgba(255,255,255,0.62);
}
.cs-img{ border:0; overflow:visible; background:transparent; display:flex; flex-direction:column; gap:36px; }
.cs-img .cs-item{ border:1px solid rgba(255,255,255,0.10); overflow:hidden; background:#01182C; }
.cs-img img{ width:100%; display:block; }
.cs-caption{
  font-family:var(--pixel2); font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
  color:rgba(255,255,255,0.55); padding:12px 16px; border-top:1px solid rgba(255,255,255,0.10);
}
.theme-paper .cs-img .cs-item{ background:var(--paper); border-color:rgba(15,101,79,0.20); }
.theme-paper .cs-caption{
  color:var(--ink); font-family:var(--serif-title); font-weight:700; text-transform:none;
  letter-spacing:0; border-top-color:rgba(15,101,79,0.18);
}

/* tipografías animadas: se escriben solas al entrar en pantalla */
.cs-fonts{ margin-top:8px; }
.cs-fonts h4{
  font-family:var(--display); font-size:20px; font-weight:400;
  color:var(--white); letter-spacing:0.04em; text-transform:uppercase;
  margin:0 0 18px;
}
.font-type-line{
  font-family:'Inter', var(--pixel2); font-size:26px; color:#fff;
  white-space:nowrap; overflow:hidden; width:0; max-width:var(--len);
  border-right:2px solid #1C9D5B; margin-bottom:12px;
}
.font-type-line.f0{ font-weight:700; }
.font-type-line.f1{ font-weight:500; }
.font-type-line.f2{ font-weight:300; }
.cs-fonts.reveal.in .font-type-line.f0{
  animation:typeErase 4.2s steps(12,end) 0.15s infinite, caretBlink 0.8s step-end infinite;
}
.cs-fonts.reveal.in .font-type-line.f1{
  animation:typeErase 4.2s steps(14,end) 1.15s infinite, caretBlink 0.8s step-end infinite;
}
.cs-fonts.reveal.in .font-type-line.f2{
  animation:typeErase 4.2s steps(13,end) 2.15s infinite, caretBlink 0.8s step-end infinite;
}
@keyframes typeErase{
  0%, 4%{ width:0; }
  34%, 66%{ width:var(--len); }
  96%, 100%{ width:0; }
}
@keyframes caretBlink{ 50%{ border-color:transparent; } }

.cs-banners{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px;
}
.cs-banners figure{
  overflow:hidden; border:1px solid rgba(255,255,255,0.10);
  opacity:0; transform:translateY(24px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1);
}
.cs-banners figure.in{ opacity:1; transform:translateY(0); }
.cs-banners img{ width:100%; display:block; }
@media (max-width:820px){
  .cs-banners{ grid-template-columns:1fr; }
}

/* tipografía al lado de los banners de página */
.cs-typo-row{
  display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:0; align-items:stretch; margin-top:36px;
  border:1px solid rgba(255,255,255,0.10);
}
.cs-typo-row .cs-fonts{
  margin-top:0; padding:28px 30px; background:rgba(255,255,255,0.03);
  border-right:1px solid rgba(255,255,255,0.10);
  display:flex; flex-direction:column; justify-content:center;
}
.cs-typo-row .cs-banners{
  grid-template-columns:repeat(2,1fr); gap:0; margin-top:0;
}
.cs-typo-row .cs-banners figure{ border:0; border-right:1px solid rgba(255,255,255,0.10); }
.cs-typo-row .cs-banners figure:last-child{ border-right:0; }
@media (max-width:900px){
  .cs-typo-row{ grid-template-columns:1fr; }
  .cs-typo-row .cs-fonts{ border-right:0; border-bottom:1px solid rgba(255,255,255,0.10); }
  .cs-typo-row .cs-banners{ grid-template-columns:repeat(2,1fr); }
}

/* video del sitio, dentro de un mockup de laptop */
.cs-demo-wrap{ margin-top:36px; }
.cs-demo-wrap h4{
  font-family:var(--display); font-size:26px; font-weight:400;
  color:var(--white); letter-spacing:0.04em; text-transform:uppercase;
  margin:0 0 22px; text-align:left;
}
.cs-demo{
  margin-top:10px; display:flex; flex-direction:column; align-items:center;
  opacity:0; transform:translateY(30px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.3,1);
}
.cs-demo.in{ opacity:1; transform:translateY(0); }
.laptop-frame{
  width:min(1080px,100%); background:#1a1a1a; border-radius:14px 14px 0 0;
  padding:12px 12px 0; box-shadow:0 28px 60px rgba(0,0,0,0.48);
}
.laptop-bar{
  display:flex; gap:7px; padding:0 5px 10px;
}
.laptop-bar span{
  width:10px; height:10px; border-radius:50%; background:#4a4a4a;
}
.laptop-frame video{ width:100%; display:block; border-radius:3px 3px 0 0; background:#000; }
.laptop-base{
  width:min(1150px,106%); height:20px; background:#2b2b2b;
  border-radius:0 0 10px 10px; position:relative;
}
.laptop-base::before{
  content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:110px; height:7px; background:#1a1a1a; border-radius:0 0 7px 7px;
}
.cs-result{
  max-width:560px; margin:40px auto 0; text-align:center;
  font-family:var(--pixel2); font-size:17px; line-height:1.55;
  color:#fff; background:rgba(64,224,208,0.06);
  border:1px solid rgba(64,224,208,0.35); border-radius:4px;
  padding:26px 32px 24px;
  position:relative;
}
.cs-result-label{
  display:block; font-family:var(--mono); font-size:11px;
  letter-spacing:0.16em; color:var(--aqua);
  margin-bottom:12px;
}
@media (max-width:820px){
  .laptop-frame{ border-radius:8px 8px 0 0; }
}

@media (max-width:820px){
  .case-system{ padding:44px 24px 12px; }
  .cs-head{ grid-template-columns:1fr; gap:14px; margin-bottom:18px; }
  .cs-head h3{ font-size:26px; }
}

/* --- 3ab. high fidelity --- */
.case-hifi{
  background:var(--black); padding:70px 60px 20px;
  max-width:1160px; margin:0 auto;
}
.ch-head{
  display:grid; grid-template-columns:300px 1fr; gap:46px;
  align-items:start; margin-bottom:30px;
}
.ch-head h3{
  font-family:var(--display); font-size:32px; font-weight:400;
  color:var(--white); letter-spacing:0.02em; line-height:1;
}
.ch-head p{
  font-family:var(--pixel2); font-size:15.5px; font-weight:400;
  line-height:1.7; color:var(--dim);
}

.ch-row{ display:grid; grid-template-columns:1fr 300px; gap:40px; align-items:center; }
.ch-row.carousel{ grid-template-columns:1fr; position:relative; }

.ch-screens img{ width:100%; display:block; }

/* --- High Wireframes: carrusel con flechas, tarjetas superpuestas --- */
.hc-track{
  display:flex; gap:22px; overflow-x:auto; padding:30px 10px 40px;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.hc-track::-webkit-scrollbar{ display:none; }
.hc-card{
  flex:0 0 auto; width:min(260px,72vw); scroll-snap-align:center;
  background:#fff; padding:10px 10px 22px; border-radius:2px;
  box-shadow:0 10px 26px rgba(0,0,0,0.18);
  transition:transform .3s ease;
}
.hc-card:nth-child(3n+1){ transform:rotate(-1.6deg); }
.hc-card:nth-child(3n+2){ transform:rotate(1.1deg) translateY(-8px); }
.hc-card:nth-child(3n+3){ transform:rotate(-0.8deg); }
.hc-card:hover{ transform:translateY(-6px) rotate(0deg) scale(1.03); z-index:2; box-shadow:0 20px 38px rgba(0,0,0,0.26); }
.hc-card img{ width:100%; display:block; }

.hc-arrows{
  display:flex; justify-content:center; gap:16px; margin-top:6px;
}
.hc-arrows[hidden]{ display:none; }
.hc-arrow{
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,0.12); color:#fff; font-size:22px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.hc-arrow:hover{ background:rgba(255,255,255,0.24); transform:scale(1.06); }
.theme-paper .hc-arrow{ background:rgba(15,101,79,0.12); color:var(--ink); }
.theme-paper .hc-arrow:hover{ background:rgba(15,101,79,0.22); }
@media (max-width:820px){
  .hc-card{ width:min(230px,78vw); }
}

/* aparece deslizando cuando entra en pantalla */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }

/* el mockup flota */
.ch-hero img{
  width:100%; display:block;
  animation:hifiFloat 5.5s ease-in-out infinite;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,0.6));
}
@keyframes hifiFloat{
  0%,100%{ transform:translateY(0) rotate(-1deg); }
  50%    { transform:translateY(-16px) rotate(1deg); }
}

@media (max-width:820px){
  .case-hifi{ padding:44px 24px 12px; }
  .ch-head{ grid-template-columns:1fr; gap:14px; margin-bottom:18px; }
  .ch-head h3{ font-size:26px; }
  .ch-row{ grid-template-columns:1fr; gap:24px; }
  .ch-hero{ max-width:230px; margin:0 auto; }
}

/* --- 3b. demo en video --- */
.case-demo{
  background:var(--black); padding:70px 60px 20px;
  display:grid; grid-template-columns:320px 1fr; gap:56px;
  align-items:center; max-width:1160px; margin:0 auto;
}
.cd-head h3{
  font-family:var(--display); font-size:32px; font-weight:400;
  color:var(--white); letter-spacing:0.02em; line-height:1; margin-bottom:16px;
}
.cd-head p{
  font-family:var(--pixel2); font-size:15.5px; font-weight:400;
  line-height:1.7; color:var(--dim);
}
.cd-video{
  justify-self:center;
  width:300px; border:2px solid var(--edge); border-radius:26px;
  overflow:hidden; background:#0A0A10;
  box-shadow:0 22px 60px rgba(0,0,0,0.6);
}
.cd-video video{ width:100%; display:block; }

@media (max-width:820px){
  .case-demo{ padding:44px 24px 12px; grid-template-columns:1fr; gap:24px; }
  .case-demo .cd-video{ order:-1; }
  .cd-head h3{ font-size:26px; }
  .cd-video{ width:min(260px,80vw); }
}

/* --- 4. prototipo incrustado --- */
.case-embed{
  background:var(--black); padding:20px 60px 90px;
  max-width:1160px; margin:0 auto;
}
.ce-head{
  display:flex; align-items:baseline; gap:20px; flex-wrap:wrap; margin-bottom:22px;
}
.ce-head h3{
  font-family:var(--display); font-size:32px; font-weight:400;
  color:var(--white); letter-spacing:0.02em; line-height:1;
}
.ce-head p{
  font-family:var(--pixel2); font-size:15px; color:var(--dim); line-height:1.6;
}
.ce-frame{
  position:relative; width:100%; aspect-ratio:16/9;
  border:1px solid var(--edge); background:#0E0E14; overflow:hidden;
}
.ce-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}

@media (max-width:820px){
  .case-embed{ padding:14px 24px 60px; }
  .ce-head h3{ font-size:26px; }
  .ce-frame{ aspect-ratio:4/3; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:820px){
  .desk-brand{ height:90px; top:18px; }
  .desk-hero{ max-width:78vw; opacity:0.55; }
  .desk-icons{ top:60px; left:12px; gap:16px; }
  .desk-icon{ width:84px; }
  .desk-icon img{ width:48px; height:48px; }
  .desk-icon--contact{ right:16px; bottom:24px; }

  .window{ width:calc(100vw - 24px) !important; left:12px !important; }

  .tb-skip, .tb-sys{ display:none; }

  .case-editorial{ grid-template-columns:1fr; padding:56px 24px; gap:32px; }
  .case-gallery[hidden]{ display:none; }
.case-gallery{ padding:40px 24px; }
.cg-grid{ gap:10px; }
  .case-gallery .span-6, .case-gallery .span-4, .case-gallery .span-3{ grid-column:span 12; }
  .case-meta{ gap:14px; font-size:10px; padding:12px 20px; }
}

/* ============================================================
   MENÚ DE INICIO
   ============================================================ */
.tb-start{
  background:var(--blue);
  border-top:2px solid #6E6EFF;
  border-left:2px solid #6E6EFF;
  border-bottom:2px solid #05056B;
  border-right:2px solid #05056B;
  color:#fff;
  font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:0.1em;
  padding:5px 22px; min-width:120px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.tb-start.active, .tb-start:active{
  border-top-color:#05056B;  border-left-color:#05056B;
  border-bottom-color:#6E6EFF; border-right-color:#6E6EFF;
  background:#0F0FB0;
}

.startmenu{
  position:fixed; left:16px; bottom:var(--taskbar-h);
  width:360px;
  background:#E8E8E8;
  border:2px solid var(--blue); border-bottom:none;
  display:none; z-index:450;
  box-shadow:0 -8px 40px rgba(0,0,0,0.6);
}
.startmenu.open{ display:flex; }

/* franja azul vertical de la izquierda */
.sm-side{
  width:30px; flex-shrink:0;
  background:linear-gradient(180deg, var(--blue), #0A0A6E);
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:12px;
}
.sm-side span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--pixel); font-size:19px;
  letter-spacing:0.12em; color:#fff; white-space:nowrap;
}

.sm-items{ flex:1; padding:14px 0; }

.sm-item{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; cursor:pointer;
  font-family:var(--pixel); font-size:24px; letter-spacing:0.02em; color:#111;
  text-decoration:none; line-height:1;
}
.sm-item:hover{ background:var(--blue); color:#fff; }

.sm-item img{
  width:26px; height:26px; object-fit:contain; image-rendering:pixelated;
}
.sm-glyph{
  width:26px; text-align:center; font-family:var(--pixel); font-size:23px; line-height:1;
}

.sm-sep{ height:1px; background:#B8B8B8; margin:10px 14px; }

@media (max-width:820px){
  .startmenu{ width:calc(100vw - 20px); }
}

/* ---------- Barra de tareas: lanzadores rápidos ---------- */
.tb-start-ico{
  font-family:var(--pixel); font-size:15px; line-height:1; margin-right:9px;
}
/* cuando el ícono sea una imagen */
img.tb-start-ico{ width:28px; height:28px; object-fit:contain; image-rendering:pixelated; }

.tb-quick{ display:flex; gap:3px; }
.tb-qbtn{
  background:var(--blue);
  border-top:2px solid #6E6EFF;
  border-left:2px solid #6E6EFF;
  border-bottom:2px solid #05056B;
  border-right:2px solid #05056B;
  width:28px; height:26px; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.tb-qbtn:active{
  border-top-color:#05056B;  border-left-color:#05056B;
  border-bottom-color:#6E6EFF; border-right-color:#6E6EFF;
}
.tb-qbtn img{ width:16px; height:16px; object-fit:contain; image-rendering:pixelated; }

/* la zona de ventanas abiertas se estira para llenar la barra */
.tb-left{ flex:1; min-width:0; }
.tb-open{ flex:1; min-width:0; overflow:hidden; }

/* ---------- Botón de idioma ---------- */
.tb-lang{
  background:transparent; border:1px solid transparent; color:#fff;
  font-family:var(--mono); font-size:12px; letter-spacing:0.06em;
  padding:2px 6px; cursor:pointer;
}
.tb-lang:hover{ border-color:rgba(255,255,255,0.6); }
.tb-lang:active{ background:rgba(0,0,0,0.35); }

/* ============================================================
   PANEL DE ESTADO — mismo azul de la barra de tareas + acento aguamarina
   ============================================================ */
:root{
  --swbg:#12121A;
}

.status-win{
  position:fixed; bottom:calc(var(--taskbar-h) + 18px); right:24px; z-index:410;
  width:290px;
  opacity:0; transform:translateY(40px) scale(.94);
  animation:notifyIn 0.6s cubic-bezier(.2,.85,.3,1) 3s forwards;
}
.status-win.dismissed{ display:none; }
.status-win.minimized .sw-body{ display:none; }
@keyframes notifyIn{
  from{ opacity:0; transform:translateY(40px) scale(.94); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.sw-body{ text-align:left; }

.sw-badge{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--aqua); color:#0A0A10;
  font-family:var(--pixel); font-size:16px; letter-spacing:0.06em;
  padding:3px 10px; line-height:1;
}
.sw-dot{
  width:8px; height:8px; border-radius:50%; background:#0A0A10;
  animation:swPulse 1.6s ease-in-out infinite;
}
@keyframes swPulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.25; } }

.sw-head{
  font-family:var(--pixel); font-size:22px; color:#fff;
  letter-spacing:0.04em; line-height:1; margin-top:8px;
}

.sw-line{ height:1px; background:rgba(255,255,255,0.18); margin:10px 0 8px; }

.sw-tags{
  font-family:var(--pixel); font-size:13px; color:var(--aqua);
  letter-spacing:0.05em; line-height:1.35;
}
.sw-place{
  font-family:var(--mono); font-size:9px; color:var(--dim);
  letter-spacing:0.16em; margin-top:5px;
}

.sw-btn{
  margin-top:12px; width:100%;
  background:var(--aqua); color:#0A0A10;
  border:2px solid var(--aqua);
  font-family:var(--pixel); font-size:16px; letter-spacing:0.06em;
  padding:6px 0; cursor:pointer; line-height:1;
}
.sw-btn:hover{ background:transparent; color:var(--aqua); }
.sw-btn:active{ transform:translate(1px,1px); }

@media (max-width:820px){
  .status-win{ bottom:calc(var(--taskbar-h) + 12px); right:12px; width:186px; }
  .sw-head{ font-size:22px; }
  .sw-badge{ font-size:15px; }
  .sw-tags{ font-size:12px; }
  .sw-btn{ font-size:15px; }
}


/* ============================================================
   PUNTERO PERSONALIZADO
   ============================================================ */
.cursor-dot{
  mix-blend-mode:screen;
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  width:12px; height:12px; border-radius:50%;
  background:var(--aqua);
  box-shadow:0 0 14px rgba(64,224,208,0.85);
  transform:translate(-50%,-50%);
  transition:width .18s ease, height .18s ease, opacity .18s ease;
  opacity:0;
}
.cursor-dot.on{ opacity:1; }
.cursor-dot.big{ width:30px; height:30px; opacity:0.55; }

@media (hover:none){
  .cursor-dot{ display:none; }
}

/* ============================================================
   TEMA "PAPER" — para With You
   Paleta de la app + títulos en serif verde sobre papel roto
   ============================================================ */
.theme-paper{
  --pk:#FFADAD;   /* rosa   */
  --gr:#C2D3C1;   /* verde  */
  --bl:#AEB2C5;   /* azul   */
  --cr:#E4E4C2;   /* crema  */
  --gy:#D9D9D9;   /* gris   */
  --ink:#0F654F;  /* verde de los títulos */
  --paper:#EFEFEF;
}

/* fondos de cada sección, tomados de la paleta */
.theme-paper .case-reveal   { background:var(--gy); }.theme-paper .case-flow     { background:#C7CBE0; max-width:none; padding-left:0; padding-right:0; }
.theme-paper .case-personas { background:var(--cr); max-width:none; padding-bottom:72px; }
.theme-paper .case-wires    { background:var(--pk); max-width:none; }
.theme-paper .case-system   { background:var(--gy); }
.theme-paper .case-hifi     { background:var(--bl); max-width:none; }

.theme-paper .case-flow > *,
.theme-paper .case-personas,
.theme-paper .case-wires,
.theme-paper .case-hifi{ }

/* el contenido de cada sección se mantiene alineado */
.theme-paper .case-flow,
.theme-paper .case-personas,
.theme-paper .case-wires,
.theme-paper .case-hifi,
.theme-paper .case-system{
  padding-left:calc(50vw - 520px); padding-right:calc(50vw - 520px);
}

/* --- títulos: serif verde sobre un parche de papel roto --- */
.theme-paper .case-personas h3,
.theme-paper .cf-head h3,
.theme-paper .cw-head h3,
.theme-paper .cs-head h3,
.theme-paper .ch-head h3,
.theme-paper .cd-head h3{
  font-family:var(--serif-title); font-weight:700; font-style:normal;
  font-size:38px; letter-spacing:-0.01em; color:var(--ink);
  display:inline-block; position:relative; padding:6px 18px 8px;
  background:var(--paper);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'><path d='M0,14 C40,6 70,16 108,9 C146,2 176,13 214,7 C252,1 286,12 322,6 C352,1 376,10 400,5 L400,92 C368,98 340,88 306,95 C272,102 240,90 206,97 C172,104 142,92 108,98 C74,104 36,94 0,99 Z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'><path d='M0,14 C40,6 70,16 108,9 C146,2 176,13 214,7 C252,1 286,12 322,6 C352,1 376,10 400,5 L400,92 C368,98 340,88 306,95 C272,102 240,90 206,97 C172,104 142,92 108,98 C74,104 36,94 0,99 Z'/></svg>");
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
}

/* textos de apoyo, oscuros sobre los fondos claros */
.theme-paper .case-editorial h2{ color:#F1EBDD; }

/* tema Widechem: headline y problem/solution en verde de marca */
/* tema Widechem: headline y problem/solution en verde de marca */
.theme-widechem .case-intro h1{ color:#1C9D5B; font-size:clamp(60px,8vw,120px); }
.theme-widechem .case-exhibit{ background:#1C9D5B; color:#fff; }
.theme-widechem .case-editorial h2{ color:#1C9D5B; font-size:clamp(34px,4.4vw,58px); }
.theme-widechem .case-body strong{ color:#1C9D5B; }
.theme-widechem .case-body p,
.theme-widechem .case-body li{ color:#fff; font-size:19px; line-height:1.65; }
.theme-widechem .case-meta{ color:#fff; }
.theme-widechem .case-flow.as-sitemap{ background:#001B4D; }
.theme-widechem .cf-head h3{ color:#3AA9AC; }
.theme-widechem .fc-col{ min-height:150px; }

/* sección de persona + widechem, fondo aguamarina de borde a borde */
.theme-widechem .case-personas h3{ color:#001B4D; }
.theme-widechem .case-personas{
  background:#3AA9AC; padding:76px 60px; max-width:none;
}
.theme-widechem .cp-grid{ max-width:1160px; margin:0 auto; }
.theme-widechem .cp-card{
  background:transparent; border:0; box-shadow:none;
}
.theme-widechem .cp-card .cp-text{ padding:0; }
.theme-widechem .cp-name,
.theme-widechem .cp-age{ color:#00232a; }
.theme-widechem .cp-line,
.theme-widechem .cp-drove{ color:#0a3436; }
.theme-widechem .cp-quote{ color:#D8F5DA; }

/* apilado: widechem (logo izq / texto der) arriba, persona abajo */
.theme-widechem .cp-grid.stack-about{
  display:flex; flex-direction:column; gap:52px;
}
.theme-widechem .cp-about{
  display:flex; flex-direction:row; align-items:center; gap:40px;
  background:transparent; padding:0; box-shadow:none;
  padding-bottom:44px; border-bottom:1px solid rgba(0,35,42,0.18);
}
.theme-widechem .cp-about img{ width:min(180px,32%); flex:0 0 auto; }
.theme-widechem .cp-about p{ color:#0a3436; margin:0; }

/* foto de persona chica, al lado del nombre */
.theme-widechem .cp-card.small-photo{
  flex-direction:row; align-items:flex-start; gap:24px;
}
.theme-widechem .cp-card.small-photo .cp-photo{
  width:84px; height:84px; flex:0 0 auto; aspect-ratio:1/1;
  border-radius:50%; overflow:hidden; border-bottom:0;
}
@media (max-width:820px){
  .theme-widechem .cp-about{ flex-direction:column; align-items:flex-start; gap:20px; }
  .theme-widechem .cp-card.small-photo{ flex-direction:column; align-items:flex-start; }
}

/* tema NOCTRL: tipografía Bebas Neue, quote 100% negro, galería en blanco */
.theme-noctrl .case-intro h1{
  font-family:'Bebas Neue', var(--display);
  font-size:clamp(90px,13vw,190px); letter-spacing:0.02em;
  color:#fff;
}
.theme-noctrl .case-exhibit{ background:#5C5C5C; color:#fff; }
.theme-noctrl .case-editorial{ background:#000000 !important; }
.theme-noctrl .case-editorial h2{ color:#fff; }
.theme-noctrl .case-body strong{ color:#5C5C5C; }
.theme-noctrl .case-body p,
.theme-noctrl .case-body li{ color:#fff; }
.theme-noctrl .case-gallery{ background:#000; max-width:none; padding:70px 0; }
.theme-noctrl .case-gallery .cg-grid{ max-width:1280px; margin:0 auto; padding:0 60px; }
.theme-noctrl .case-gallery figure{ border:1px solid rgba(255,255,255,0.14); }
.theme-noctrl .case-gallery figcaption{
  color:rgba(255,255,255,0.7); border-top-color:rgba(255,255,255,0.14);
}
.theme-noctrl .cs-head h3,
.theme-noctrl .cs-caption{ color:#1A1A1A; }

/* galería NOCTRL: línea de escáner que cruza la foto al pasar el mouse */
.theme-noctrl .case-gallery figure{ position:relative; cursor:pointer; }
.theme-noctrl .case-gallery figure::after{
  content:""; position:absolute; left:0; right:0; height:3px; z-index:3;
  top:-8%; opacity:0; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.95), transparent);
  box-shadow:0 0 14px 3px rgba(255,255,255,0.55);
}
.theme-noctrl .case-gallery figure:hover::after{
  opacity:1;
  animation:noctrlScan 1.7s linear infinite;
}
.theme-noctrl .case-gallery figure:hover img,
.theme-noctrl .case-gallery figure:hover video{
  filter:brightness(1.08) contrast(1.05);
  transition:filter .3s ease;
}
@keyframes noctrlScan{
  0%   { top:-8%; }
  100% { top:105%; }
}

/* botón "DESTROY ALL" */
.cg-destroy-wrap{
  display:flex; justify-content:center; padding:40px 0 10px;
}
.cg-destroy-btn,
.desk-destroy-btn{
  font-family:var(--display); font-size:22px; letter-spacing:0.08em;
  background:#000; color:#fff; border:2px solid #2E5EC2;
  padding:16px 46px; cursor:pointer;
  transition:background .2s ease, color .2s ease, transform .15s ease;
}
.cg-destroy-btn:hover,
.desk-destroy-btn:hover{
  background:#C0392B; color:#000; transform:scale(1.04);
}
.cg-destroy-btn:active,
.desk-destroy-btn:active{ transform:scale(0.97); }

.desk-destroy-btn{
  position:fixed; right:24px; top:24px; z-index:410;
  font-size:14px; padding:10px 20px;
  animation:destroyBtnGlitch 0.6s infinite;
}
.desk-destroy-btn::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.22) 0px, rgba(255,255,255,0.22) 2px,
    transparent 2px, transparent 6px
  );
  mix-blend-mode:overlay;
  animation:destroyBtnLines 0.4s steps(4) infinite;
}
@keyframes destroyBtnLines{
  0%   { background-position:0 0; opacity:0.5; }
  25%  { background-position:0 6px; opacity:0.9; }
  50%  { background-position:0 -3px; opacity:0.4; }
  75%  { background-position:0 3px; opacity:0.8; }
  100% { background-position:0 0; opacity:0.5; }
}
@keyframes destroyBtnGlitch{
  0%, 100% { filter:drop-shadow(2px 0 0 rgba(255,20,80,.6)) drop-shadow(-2px 0 0 rgba(0,220,255,.6)); }
  20%  { filter:drop-shadow(-3px 0 0 rgba(255,20,80,.7)) drop-shadow(3px 0 0 rgba(0,220,255,.7)); }
  40%  { filter:drop-shadow(3px 0 0 rgba(255,20,80,.5)) drop-shadow(-3px 0 0 rgba(0,220,255,.5)); }
  60%  { filter:drop-shadow(-1px 0 0 rgba(255,20,80,.65)) drop-shadow(1px 0 0 rgba(0,220,255,.65)); }
  80%  { filter:drop-shadow(2px 0 0 rgba(255,20,80,.55)) drop-shadow(-2px 0 0 rgba(0,220,255,.55)); }
}
@media (max-width:820px){
  .desk-destroy-btn{ right:12px; top:12px; font-size:12px; padding:8px 16px; }
}

/* lluvia estilo Matrix durante el "DESTROY ALL" — detrás de las ventanas emergentes */
#matrixRain{
  position:fixed; inset:0; z-index:5; pointer-events:none;
  transition:opacity .5s ease;
}

/* efecto de pantalla completa al hacer click — glitch + temblor */
body.noctrl-glitching{
  animation:noctrlScreenShake 0.15s steps(2) infinite;
}
body.noctrl-glitching::after{
  content:""; position:fixed; inset:0; z-index:998; pointer-events:none;
  background:repeating-linear-gradient(
    0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px,
    transparent 1px, transparent 3px
  );
  mix-blend-mode:overlay;
  animation:noctrlStaticFull 0.1s steps(1) infinite;
}
@keyframes noctrlScreenShake{
  0%, 100% { transform:translate(0,0); }
  25%  { transform:translate(-2px, 1px); }
  50%  { transform:translate(2px, -1px); }
  75%  { transform:translate(-1px, -2px); }
}
@keyframes noctrlStaticFull{
  0%   { opacity:0.5; }
  50%  { opacity:0.9; }
  100% { opacity:0.6; }
}
.noctrl-fake-error{ animation:noctrlPopIn 0.25s cubic-bezier(.2,.9,.3,1.3) both; position:relative; overflow:hidden; }
.noctrl-fake-error::before{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    rgba(255,255,255,0.22) 0px, rgba(255,255,255,0.22) 2px,
    transparent 2px, transparent 6px
  );
  mix-blend-mode:overlay;
  animation:destroyBtnLines 0.4s steps(4) infinite;
}
@keyframes noctrlPopIn{
  0%   { opacity:0; transform:scale(.7) rotate(-3deg); }
  100% { opacity:1; transform:scale(1) rotate(0deg); }
}

/* tema Fragante: título azul, contenido blanco, galería en fondo blanco */
.theme-fragante .case-reveal{ background:#fff; }
.theme-fragante .case-intro h1{ color:#16305C; font-size:clamp(70px,10.5vw,150px); }
.theme-fragante .case-exhibit{ background:#2E5EC2; color:#fff; }
.theme-fragante .case-editorial h2{ color:#16305C; }
.theme-fragante .case-body strong{ color:#16305C; }
.theme-fragante .case-body p,
.theme-fragante .case-body li{ color:#000; }
.theme-fragante .case-gallery{ background:#fff; max-width:none; padding:70px 0; }
.theme-fragante .case-gallery .cg-grid{ max-width:1480px; margin:0 auto; padding:0 60px; }
.theme-fragante .case-gallery figure{ border:1px solid rgba(0,0,0,0.12); }
.theme-fragante .case-gallery figcaption{
  color:#1A1A1A; border-top-color:rgba(0,0,0,0.12);
}
.theme-fragante .cg-heading{ color:#2E5EC2; }
.theme-fragante .case-gallery figure img,
.theme-fragante .case-gallery figure video{
  transition:transform .15s ease-out;
}

/* tema Cluck House: visual system en fondo blanco, logo+mascota en una misma columna */
.theme-cluck .case-reveal{ background:#C24117; }
.theme-cluck .case-intro h1{ color:#1A1A1A; font-size:clamp(70px,10.5vw,150px); }
.theme-cluck .case-exhibit{ background:#1A1A1A; color:#F8F4EC; }
.theme-cluck .case-meta{ background:#CE1C1C; color:#000; }
.theme-cluck .case-editorial{ background:#000000 !important; }
.theme-cluck .case-editorial h2{ color:#C24117; }
.theme-cluck .case-body strong{ color:#C24117; }
.theme-cluck .case-body p,
.theme-cluck .case-body li{ color:#fff; }
.theme-cluck .case-system{ background:#F7F6FF; padding-top:100px; padding-bottom:110px; max-width:none; }
.theme-cluck .case-gallery{
  background:#C24117; max-width:none; padding:70px 0;
}
.theme-cluck .case-gallery .cg-grid{
  max-width:1280px; margin:0 auto; padding:0 60px;
}
.theme-cluck .case-gallery .span-8{ grid-column:3 / span 8; }
.theme-cluck .case-gallery figcaption{
  color:#1A1A1A; border-top-color:rgba(0,0,0,0.18);
}
.theme-cluck .cg-heading{ color:#1A1A1A; }
.theme-cluck .cs-head h3{ color:#1A1A1A; }
.theme-cluck .cs-head p{ color:#2b0e04; }
.theme-cluck .cs-caption{
  color:#1A1A1A; border-top:0; background:transparent; padding-top:10px;
}
.theme-cluck .case-system{ margin:0 auto; }
.theme-cluck .cs-img,
.theme-cluck .cs-cluck-col{ max-width:1280px; margin:0 auto; }

/* galería: todas mismo tamaño (recorte uniforme), marco negro, animación de fundido + deslizar */
.theme-cluck .case-gallery figure,
.theme-cluck .cg-logoblock{
  border:3px solid #1A1A1A; overflow:hidden; position:relative;
  aspect-ratio:4/5;
  opacity:0; transform:translateY(38px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.25,1);
}
.theme-cluck .case-gallery figure.narrow{
  aspect-ratio:9/16; border:0;
}
.theme-cluck .case-gallery figure.wide{ aspect-ratio:16/9; }
.theme-cluck .case-gallery figure.zoom img{ transform:scale(1.15); object-position:top; }
.case-gallery figure.contain{ background:#1A1A1A; }
.case-gallery figure.contain img{ object-fit:contain; transform:none !important; }
.theme-cluck .case-gallery figure.zoom:hover img{ transform:scale(1.2); }

/* social media: mockup de celular con scroll real entre los posts */
.cg-phone-wrap{
  display:flex; justify-content:center; padding:20px 0;
  opacity:0; transform:translateY(38px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.25,1);
}
.cg-phone-wrap.in{ opacity:1; transform:translateY(0); }
.cg-phone{
  width:300px; height:610px; background:#0a0a0a; border-radius:38px;
  padding:14px; box-shadow:0 30px 60px rgba(0,0,0,0.45);
  position:relative;
}
.cg-phone-notch{
  position:absolute; top:14px; left:50%; transform:translateX(-50%);
  width:120px; height:22px; background:#0a0a0a; border-radius:0 0 14px 14px;
  z-index:3;
}
.cg-phone-screen{
  width:100%; height:100%; background:#e9e9ef; border-radius:26px;
  overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch;
  padding:14px 0;
}
.cg-phone-screen::-webkit-scrollbar{ width:0; }
.cg-phone-post{
  width:calc(100% - 50px); aspect-ratio:1/1; scroll-snap-align:start;
  margin:0 auto 18px; border-radius:10px; overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,0.12); background:#fff;
}
.cg-phone-post:last-child{ margin-bottom:0; }
.cg-phone-post img{ width:100%; height:100%; object-fit:contain; display:block; }

.cg-phone-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  color:#fff; font-family:var(--mono); font-size:11px; letter-spacing:0.08em;
  text-shadow:0 2px 6px rgba(0,0,0,0.6); pointer-events:none; z-index:4;
  animation:cgHintBounce 1.6s ease-in-out infinite;
}
@keyframes cgHintBounce{
  0%,100%{ transform:translateX(-50%) translateY(0); opacity:0.85; }
  50%{ transform:translateX(-50%) translateY(6px); opacity:0.4; }
}
.theme-cluck .case-gallery figure.in,
.theme-cluck .cg-logoblock.in{ opacity:1; transform:translateY(0); }
.theme-cluck .case-gallery figure img,
.theme-cluck .case-gallery figure video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.theme-cluck .case-gallery figure:hover img,
.theme-cluck .case-gallery figure:hover video{
  transform:scale(1.05);
  transition:transform .3s ease;
}
.theme-cluck .cs-img .cs-item{ border:0; background:transparent; overflow:visible; }
.theme-cluck .cs-item img{ mix-blend-mode:multiply; }

/* bloque "CLUCK HOUSE" animado, del mismo tamaño que las fotos vecinas */
.theme-cluck .cg-logoblock{
  background:#1A1A1A; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  opacity:0; transform:scale(.92);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1);
}
.theme-cluck .cg-logoblock.in{ opacity:1; transform:scale(1); }
.cg-logo-word{
  font-family:'Alfa Slab One', var(--display);
  font-size:clamp(30px,4.5vw,54px); color:#F4B400; line-height:1;
  animation:cgLogoPulse 2.4s ease-in-out infinite;
}
.cg-logo-word:nth-child(2){ animation-delay:.15s; color:#C24117; }
@keyframes cgLogoPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}

/* títulos con Alfa Slab One, como en el logo original */
.theme-cluck .case-intro h1,
.theme-cluck .case-editorial h2,
.theme-cluck .cs-head h3,
.theme-cluck .cf-head h3,
.theme-cluck .cw-head h3,
.theme-cluck .ch-head h3,
.theme-cluck .cd-head h3,
.theme-cluck .case-personas h3,
.theme-cluck .cg-heading{
  font-family:'Alfa Slab One', var(--display);
}
.theme-cluck .case-gallery figure.big{
  border:2px solid #1A1A1A;
}

/* logo variations + mascot en fila arriba, resultado final abajo */
.cs-cluck-col{ display:flex; flex-direction:column; gap:28px; }
.cs-cluck-pair{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.cs-cluck-main img{ width:100%; display:block; }
.cs-cluck-extra{ display:flex; justify-content:center; }
.cs-cluck-extra .cs-item{ width:min(320px,60%); }
.cs-cluck-extra img{ width:100%; display:block; }
@media (max-width:820px){
  .cs-cluck-pair{ grid-template-columns:1fr; }
}

/* animación con más carácter: las piezas caen y se acomodan con una leve rotación */
.theme-cluck .cs-item{
  opacity:0; transform:translateY(34px) rotate(-2deg) scale(.96);
  transition:opacity .75s ease, transform .75s cubic-bezier(.2,.8,.3,1);
}
.theme-cluck .cs-item.in{
  opacity:1; transform:translateY(0) rotate(0deg) scale(1);
}
.theme-cluck .cs-cluck-pair .cs-item:nth-child(2).in{ transform:translateY(0) rotate(1.2deg) scale(1); }
.theme-cluck .cs-item:hover{
  transform:translateY(-5px) rotate(0deg) scale(1.015);
  transition:transform .25s ease;
}

.theme-paper .cf-head p,
.theme-paper .cw-head p,
.theme-paper .cs-head p,
.theme-paper .ch-head p,
.theme-paper .cd-head p{ color:rgba(20,32,28,0.78); }

/* tarjetas de persona sobre papel */
.theme-paper .cp-card{ background:var(--paper); border-color:rgba(15,101,79,0.22); }
.theme-paper .cp-name{ font-family:var(--serif-title); font-weight:700; color:var(--ink); font-size:24px; }
.theme-paper .cp-age{ color:rgba(20,32,28,0.55); }
.theme-paper .cp-line{ color:#1A2A25; }
.theme-paper .cp-quote{ color:rgba(20,32,28,0.72); border-left-color:var(--ink); }
.theme-paper .cp-drove{ color:var(--ink); border-top-color:rgba(15,101,79,0.22); }

/* marcos de imagen */
.theme-paper .cf-img,
.theme-paper .cw-grid figure{ background:var(--paper); border-color:rgba(15,101,79,0.20); }

/* portada */
.theme-paper .case-intro h1{ color:#8FB98A; font-size:clamp(60px,9vw,130px); }
.theme-paper .case-exhibit{ background:#8FB98A; color:var(--ink); }
.theme-paper .case-scrollcue{ color:rgba(20,32,28,0.5); }
.theme-paper .case-stage::before{ opacity:0; }

/* una sola persona: la tarjeta ocupa el ancho */
.cp-grid.single{ grid-template-columns:minmax(0,620px); }

/* persona + bloque "sobre la empresa" (logo + texto), uno al lado del otro */
.cp-grid.with-about{
  grid-template-columns:minmax(0,440px) minmax(0,1fr);
  align-items:center; gap:56px;
}
.cp-about{
  display:flex; flex-direction:column; align-items:flex-start; gap:18px;
}
.cp-about img{ width:min(200px,60%); display:block; }
.cp-about p{
  font-family:var(--pixel2); font-size:15.5px; line-height:1.7;
  color:var(--dim); margin:0;
}
@media (max-width:1160px){
  .cp-grid.with-about{ grid-template-columns:1fr; gap:30px; }
}

/* persona + mapa del sitio, uno al lado del otro */
.cp-grid.with-sitemap{
  grid-template-columns:minmax(0,440px) minmax(0,1fr);
  align-items:start; gap:56px;
}
.cp-sitemap{
  background:#101018; border:1px solid var(--edge); padding:32px 34px;
}
.cp-sitemap h4{
  font-family:var(--display); font-size:20px; font-weight:400;
  color:var(--white); letter-spacing:0.04em; text-transform:uppercase;
  margin:0 0 20px;
}
.sitemap-tree{ list-style:none; margin:0; padding:0; }
.sitemap-tree > li{ margin-bottom:18px; }
.sitemap-tree > li:last-child{ margin-bottom:0; }
.sm-node{
  display:block; font-family:var(--pixel2); font-size:16px; font-weight:700;
  color:#5C8AFF; letter-spacing:0.01em; margin-bottom:6px;
}
.sitemap-tree ul{
  list-style:none; margin:0; padding-left:18px;
  border-left:1px solid rgba(92,138,255,0.25);
}
.sitemap-tree ul li{
  font-family:var(--pixel2); font-size:14px; color:var(--dim);
  line-height:1.9; padding-left:14px; position:relative;
}
.sitemap-tree ul li::before{
  content:""; position:absolute; left:0; top:13px;
  width:9px; height:1px; background:rgba(92,138,255,0.35);
}
@media (max-width:1160px){
  .cp-grid.with-sitemap{ grid-template-columns:1fr; gap:30px; }
}

@media (max-width:1160px){
  .theme-paper .case-flow,
  .theme-paper .case-personas,
  .theme-paper .case-wires,
  .theme-paper .case-hifi,
  .theme-paper .case-system{ padding-left:60px; padding-right:60px; }
}
@media (max-width:820px){
  .theme-paper .case-flow,
  .theme-paper .case-personas,
  .theme-paper .case-wires,
  .theme-paper .case-hifi,
  .theme-paper .case-system{ padding-left:24px; padding-right:24px; }
  .theme-paper .case-personas h3,
  .theme-paper .cf-head h3,
  .theme-paper .cw-head h3,
  .theme-paper .cs-head h3,
  .theme-paper .ch-head h3,
  .theme-paper .cd-head h3{ font-size:27px; }
}

/* ---------- Paper: el blanco del diagrama se funde con el verde ---------- */
.theme-paper .cf-img{
  background:transparent; border:0; box-shadow:none;
  position:relative; overflow:visible;
}
.theme-paper .cf-img img{
  mix-blend-mode:multiply;
}
.theme-paper .cf-img::before{
  content:""; position:absolute; top:-24px; left:22px;
  width:40px; height:88px; z-index:3;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 96'><path d='M22 6 C12 6 6 13 6 23 L6 70 C6 82 13 90 22 90 C31 90 38 82 38 70 L38 26 C38 19 34 15 29 15 C24 15 20 19 20 26 L20 68' fill='none' stroke='%230F654F' stroke-width='4.5' stroke-linecap='round'/></svg>") no-repeat center/contain;
  transform:rotate(-8deg);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,0.22));
}
@media (max-width:820px){
  .theme-paper .cf-img::before{ left:14px; width:30px; height:66px; top:-18px; }
}

/* ---------- Paper: persona en horizontal, foto con marco de papel ---------- */
.theme-paper .cp-card{
  flex-direction:row; align-items:stretch; gap:0;
  background:var(--paper); border:0;
  box-shadow:0 14px 34px rgba(0,0,0,0.10);
}

.theme-paper .cp-photo{
  flex:0 0 250px; aspect-ratio:auto; border:0; background:transparent;
  padding:16px 0 16px 16px;
}
.theme-paper .cp-photo img{
  width:100%; height:100%; object-fit:cover;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'><path d='M12,8 C60,2 96,12 140,5 C186,-2 226,9 266,3 C282,1 292,6 294,14 L292,120 C296,160 288,196 293,236 C297,276 289,312 294,352 C296,376 290,390 278,393 C232,399 196,389 152,396 C108,403 68,392 28,398 C14,400 7,394 6,382 L9,268 C5,228 12,192 7,152 C3,112 10,74 6,36 C4,18 6,10 12,8 Z'/></svg>");
  mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'><path d='M12,8 C60,2 96,12 140,5 C186,-2 226,9 266,3 C282,1 292,6 294,14 L292,120 C296,160 288,196 293,236 C297,276 289,312 294,352 C296,376 290,390 278,393 C232,399 196,389 152,396 C108,403 68,392 28,398 C14,400 7,394 6,382 L9,268 C5,228 12,192 7,152 C3,112 10,74 6,36 C4,18 6,10 12,8 Z'/></svg>");
  -webkit-mask-size:100% 100%; mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

.theme-paper .cp-text{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding:24px 26px;
}

@media (max-width:820px){
  .theme-paper .cp-card{ flex-direction:column; }
  .theme-paper .cp-photo{ flex:none; height:260px; padding:16px 16px 0; }
}

/* ---------- Paper: título de personas centrado + clip ---------- */
.theme-paper .case-personas{ text-align:center; }
.theme-paper .case-personas h3{ margin:0 auto 34px; }
.theme-paper .cp-grid{ justify-content:center; text-align:left; }
.cp-grid.single{ justify-items:center; }

/* clip de papel en la esquina de la tarjeta */
.theme-paper .cp-card{ position:relative; overflow:visible; }
.theme-paper .cp-card::before{
  content:""; position:absolute; top:-26px; right:34px;
  width:44px; height:96px; z-index:3;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 96'><path d='M22 6 C12 6 6 13 6 23 L6 70 C6 82 13 90 22 90 C31 90 38 82 38 70 L38 26 C38 19 34 15 29 15 C24 15 20 19 20 26 L20 68' fill='none' stroke='%230F654F' stroke-width='4.5' stroke-linecap='round'/></svg>") no-repeat center/contain;
  transform:rotate(6deg);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,0.25));
}

/* la foto arranca por debajo del clip */
.theme-paper .cp-photo{ padding-top:22px; }

/* entrada de la persona: llega inclinada y se endereza, como si la clipearan */
.theme-paper .cp-card.reveal{
  opacity:0; transform:translateY(24px) rotate(-3deg) scale(.97);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1);
}
.theme-paper .cp-card.reveal.in{
  opacity:1; transform:translateY(0) rotate(0deg) scale(1);
}

/* wireframes lo-fi del tema paper: 2 por fila, 3 filas, más chicas */
.theme-paper .cw-grid{ grid-template-columns:repeat(2,1fr); gap:16px; max-width:560px; margin:0 auto; }

@media (max-width:820px){
  .theme-paper .cp-card::before{ right:18px; width:34px; height:74px; top:-20px; }
  .theme-paper .cw-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Wireframes lo-fi: hojas que se van poniendo sobre la mesa ---------- */
.cw-grid .wire{
  opacity:0;
  transform:translateY(26px) rotate(0deg) scale(.97);
  transition:opacity .75s ease, transform .75s cubic-bezier(.2,.8,.3,1);
}
.cw-grid .wire.in{
  opacity:1;
  transform:translateY(0) rotate(var(--tilt,0deg)) scale(1);
}

/* al pasar el mouse se endereza y se levanta */
.cw-grid .wire{ transform-origin:50% 60%; }
.cw-grid .wire.in:hover{
  transform:translateY(-8px) rotate(0deg) scale(1.03);
  transition:transform .28s ease, box-shadow .28s ease;
  box-shadow:0 18px 34px rgba(0,0,0,0.22);
  z-index:2;
}

.theme-paper .cw-grid .wire{ box-shadow:0 8px 20px rgba(0,0,0,0.12); }

/* ---------- Wireframes lo-fi, variante "flow": secuencia numerada con flechas ---------- */
.cw-grid.flow{
  display:flex; align-items:flex-end; gap:0; flex-wrap:nowrap;
  overflow-x:auto; padding:20px 4px 30px; grid-template-columns:none;
}
.wf-step{
  position:relative; flex:0 0 auto; width:150px;
  border:1px solid rgba(178,138,214,0.35); background:#150d1c;
  box-shadow:0 0 0 1px rgba(80,41,122,0.15), 0 14px 26px rgba(0,0,0,0.35);
  opacity:0; transform:translateY(24px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1);
}
.wf-step:nth-child(4n+2){ margin-bottom:26px; }
.wf-step:nth-child(4n+4){ margin-bottom:52px; }
.wf-step.in{ opacity:1; transform:translateY(0); }
.wf-step img{ width:100%; display:block; }
.wf-num{
  position:absolute; top:-11px; left:-11px; width:26px; height:26px;
  border-radius:50%; background:#50296A; color:#fff;
  font-family:var(--mono); font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,0.4); z-index:2;
}
.wf-arrow{
  flex:0 0 auto; width:34px; align-self:center;
  color:#3FB6A8; font-size:20px; text-align:center;
  opacity:0; transition:opacity .5s ease .1s;
}
.wf-arrow.in{ opacity:1; }
@media (max-width:820px){
  .wf-step{ width:120px; }
  .wf-arrow{ width:22px; font-size:16px; }
}

/* ---------- Fondo aguamarina de borde a borde (Artly: wireframes + demo/prototipo) ---------- */
.case-wires.aqua-bg,
.case-demo.aqua-bg{
  background:var(--aqua);
  box-shadow:0 0 0 100vmax var(--aqua);
  min-height:100vh;
  align-content:center;
}

.case-wires.aqua-bg .cw-head h3,
.case-demo.aqua-bg .cd-head h3{ color:#0A0A10; }

.case-wires.aqua-bg .cw-head p,
.case-demo.aqua-bg .cd-head p{ color:#0A2E2A; }

.case-wires.aqua-bg .wf-step{
  border:1px solid rgba(10,10,16,0.18);
  background:#FFFFFF;
  box-shadow:0 0 0 1px rgba(10,10,16,0.06), 0 14px 26px rgba(0,0,0,0.18);
}
.case-wires.aqua-bg .wf-arrow{ color:#0A0A10; }

.case-demo.aqua-bg .cd-video{
  background:#FFFFFF;
  border-color:rgba(10,10,16,0.18);
  box-shadow:0 22px 60px rgba(0,0,0,0.18);
}