/* ============================================================================
   ESTILOS — Proceso de Creación de Personaje (ARIC)
   Paleta oficial: naranja #FB5607 · violeta #390099 · crema #FDF0D5 · negro #000000
   Tipografía: Permanent Marker (títulos tag) · Caveat (acentos manuscritos) ·
               Montserrat (texto y etiquetas)
   Fuente de estos tokens: Manual_de_marca_ARIC.pdf — sección "Sistema visual"
   ============================================================================ */

:root{
  /* ---------- TOKENS DE DISEÑO (paleta oficial: Manual_de_marca_ARIC.pdf) ---------- */
  --ink:        #390099;   /* violeta digital — fondo base de marca */
  --ink-deep:   #1f0055;   /* violeta más oscuro, para profundidad/gradiente */
  --paper:      #FDF0D5;   /* crema — "papelería" de marca */
  --pink:       #FB5607;   /* NARANJA de marca (se reutiliza esta variable como acento primario) */
  --violet:     #6b2fd6;   /* violeta claro — variación tonal del violeta de marca */
  --yellow:     #FDF0D5;   /* tercer acento = crema (la paleta de marca no usa amarillo) */
  --cyan:       #000000;   /* cuarto color de marca = negro, usado como acento/contorno */
  --line:       #000000;   /* negro de marca, para contornos tipo logo */

  --font-display: 'Permanent Marker', cursive; /* títulos tag/graffiti, como "IDENTIDAD VISUAL" */
  --font-bubble:  'Caveat', cursive;            /* acentos manuscritos, como "sobre mí" */
  --font-accent:  'Montserrat', sans-serif;     /* etiquetas — Montserrat, tal como el manual */
  --font-body:    'Montserrat', sans-serif;     /* texto de lectura — Montserrat Thin Italic */

  --radius: 18px;
  --nav-w: 260px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(circle at 15% 8%, rgba(251,86,7,.20), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(0,0,0,.55), transparent 50%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;              /* Montserrat Thin Italic, como en el manual de marca */
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3, .btn, .tag, .section-num, .brand, .toc a, .file-card{
  font-style: normal;              /* la itálica queda solo para párrafos de lectura */
}

a{ color:inherit; }

::selection{ background:var(--pink); color:var(--ink); }

/* ---------- LAYOUT ---------- */
.layout{
  display:grid;
  grid-template-columns: var(--nav-w) 1fr;
  min-height:100vh;
}

/* ---------- SIDEBAR ---------- */
.sidebar{
  position:sticky; top:0; height:100vh;
  padding: 32px 24px;
  border-right: 3px solid var(--paper);
  display:flex; flex-direction:column; gap:28px;
  background: linear-gradient(180deg, rgba(124,77,255,.15), transparent 30%);
}
.brand{
  font-family:var(--font-bubble);
  font-size: clamp(20px, 2vw, 26px);
  line-height:1.15;
  letter-spacing:.5px;
}
.brand span{ color:var(--pink); }

.toc{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.toc a{
  font-family: var(--font-accent);
  font-size:16px;
  text-decoration:none;
  display:flex; align-items:center; gap:10px;
  padding:9px 12px;
  border-radius:10px;
  border:2px solid transparent;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.toc a:hover, .toc a:focus-visible{
  border-color: var(--paper);
  background: rgba(253,240,213,.06);
  transform: translateX(4px);
}
.toc .dot{
  width:9px; height:9px; border-radius:50%;
  background: var(--pink); flex:none;
  border: 1px solid rgba(253,240,213,.6);
}
.toc li:nth-child(2) .dot{ background:var(--yellow); }
.toc li:nth-child(3) .dot{ background:var(--cyan); }
.toc li:nth-child(4) .dot{ background:var(--violet); }
.toc li:nth-child(5) .dot{ background:var(--pink); }
.toc li:nth-child(6) .dot{ background:var(--yellow); }
.toc li:nth-child(7) .dot{ background:var(--cyan); }
.toc li:nth-child(8) .dot{ background:var(--violet); }
.toc li:nth-child(9) .dot{ background:var(--pink); }

.sidebar-foot{
  margin-top:auto;
  font-family: var(--font-accent);
  font-size:13px;
  opacity:.65;
}

/* ---------- MAIN ---------- */
main{ padding: 56px 56px 120px; max-width:1180px; }

.hero{ margin-bottom:90px; }
.eyebrow{
  font-family: var(--font-accent);
  font-weight: 600;
  color: var(--pink);
  letter-spacing: 3px;
  text-transform:uppercase;
  font-size:14px;
  margin-bottom:14px;
}
h1.font-display{
  font-family: var(--font-display);
  font-weight:400;
  font-size: clamp(34px, 6vw, 74px);
  line-height:1.15;
  margin:0 0 18px;
  color: var(--paper);
  text-shadow:
    2px 2px 0 var(--pink),
    4px 4px 0 var(--line),
    6px 6px 0 rgba(0,0,0,.35);
}
.hero p{
  font-size:18px; max-width:640px; line-height:1.6; opacity:.85;
}

/* corkboard de referentes en el hero */
.corkboard{
  margin-top:40px;
  display:flex; gap:22px; flex-wrap:wrap;
}
.polaroid{
  background: var(--paper);
  padding:10px 10px 34px;
  border-radius:6px;
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  width:170px;
  transform: rotate(var(--r,-4deg));
  transition: transform .25s ease;
}
.polaroid:hover{ transform: rotate(0deg) scale(1.05); }
.polaroid img{
  width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:2px; display:block;
}
.polaroid figcaption{
  font-family: var(--font-accent);
  color: var(--ink);
  font-size:12px;
  text-align:center;
  margin-top:8px;
}
.polaroid:nth-child(1){ --r:-6deg; }
.polaroid:nth-child(2){ --r:4deg; margin-top:22px;}
.polaroid:nth-child(3){ --r:-3deg; }
.polaroid:nth-child(4){ --r:6deg; margin-top:10px;}

/* ---------- SECCIONES ---------- */
section{
  padding-top: 70px;
  margin-top: -70px; /* offset para el anchor bajo el nav sticky */
  border-top: 2px dashed rgba(253,240,213,.25);
}
section:first-of-type{ border-top:none; }

.section-head{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  background: var(--pink);
  padding: 16px 22px 20px;
  border-radius: 10px;
  margin-bottom: 22px;
  position:relative;
}
.section-head::after{
  content:"";
  position:absolute; left:22px; right:22px; bottom:8px;
  height:6px; background: var(--paper); border-radius:3px;
}
.section-num{
  font-family: var(--font-accent);
  font-weight:700;
  color: var(--pink);
  background: var(--paper);
  padding:4px 12px;
  border-radius:999px;
  font-size:13px;
}
h2.font-bubble{
  font-family: var(--font-display);
  font-weight:400;
  font-size: clamp(24px, 3vw, 38px);
  margin:0;
  color: var(--line);
}
.section-desc{ opacity:.8; max-width:620px; margin: 0 0 26px; line-height:1.6; }

/* tarjeta con archivo ya montado (PDF real) */
.file-card{
  background: rgba(253,240,213,.05);
  border: 2px solid var(--paper);
  border-radius: var(--radius);
  padding: 22px;
  display:flex; flex-direction:column; gap:16px;
}
.file-card .tag{
  align-self:flex-start;
  font-family: var(--font-accent);
  font-size:12px;
  background: var(--pink);
  color: var(--ink);
  padding:4px 10px;
  border-radius:999px;
}
.pdf-frame{
  width:100%; height:520px;
  border-radius:12px;
  border: 2px solid var(--paper);
  background: #fff;
}
.file-card .actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  font-family: var(--font-accent);
  text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px;
  border-radius:999px;
  border:2px solid var(--paper);
  font-size:14px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.btn.solid{ background: var(--paper); color: var(--ink); }
.btn:hover{ transform: translateY(-2px); }

/* variante "pendiente": misma tarjeta con iframe, pero mientras no exista
   el PDF en pdfs/ se ve atenuada y con borde punteado como aviso visual */
.file-card.pending{
  border-style: dashed;
  border-color: rgba(253,240,213,.5);
  background: rgba(0,0,0,.12);
}
.file-card.pending .tag{
  background: transparent;
  border: 1.5px dashed var(--pink);
  color: var(--pink);
}
.file-card.pending .pdf-frame{
  border-style: dashed;
  border-color: rgba(253,240,213,.4);
  background: rgba(253,240,213,.06);
}

.swatch-row{ display:flex; gap:18px; margin-top:18px; flex-wrap:wrap; }
.swatch{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.swatch i{ display:block; width:44px; height:44px; border-radius:50%; border:2px solid var(--paper); }
.swatch span{ font-family: var(--font-accent); font-size:11px; letter-spacing:.5px; opacity:.8; }


/* Fases */
.fases{ list-style:none; margin:0; padding:0; counter-reset:fase; display:flex; flex-direction:column; gap:14px; }
.fases li{
  counter-increment: fase;
  display:flex; align-items:center; gap:18px;
  background: rgba(253,240,213,.05);
  border:2px solid var(--paper);
  border-radius: 14px;
  padding:14px 20px;
}
.fases li::before{
  content: counter(fase);
  font-family: var(--font-display);
  font-size:18px;
  color: var(--paper);
  background: var(--cyan);
  width:44px; height:44px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.fases span{ font-family: var(--font-accent); font-size:16px; }

footer{
  margin-top:100px; padding-top:30px;
  border-top: 2px dashed rgba(253,240,213,.25);
  font-family: var(--font-accent);
  font-size:13px; opacity:.6;
}

/* ---------- MOBILE ---------- */
@media (max-width: 860px){
  .layout{ grid-template-columns: 1fr; }
  .sidebar{ position:relative; height:auto; border-right:none; border-bottom:3px solid var(--paper); }
  main{ padding: 40px 22px 90px; }
  .pdf-frame{ height:380px; }
}