/* =========================================
   CH. — ESTÉTICA DEL PDF
   Solo estética: tipografía, colores por proyecto, círculos con anillo,
   números fantasma y etiquetas en tipo oración. No cambia la estructura
   de las páginas. Para volver al look anterior, quitá el <link> a este
   archivo en cada página.
========================================= */

:root {
  --font-heading: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ink: #11121A;
  --ring: clamp(7px, 0.8vw, 12px);
}

body { font-family: var(--font-body); }

/* ---------- Tipografía ---------- */

h1, h2, h3,
.brand,
.footer-brand,
.visual-title {
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.02em !important;
}

.brand span,
.footer-brand span { color: var(--magenta); }

.eyebrow,
.visual-label,
.visual-caption,
.hero-topline,
.case-meta span,
.section-index,
.case-back,
.language-toggle {
  text-transform: none;
  letter-spacing: 0 !important;
}

.eyebrow,
.visual-label,
.visual-caption,
.case-meta span {
  font-family: var(--font-heading);
  font-weight: 600;
}

.eyebrow { font-size: 0.95rem; }
.hero-topline { font-size: 0.85rem; }
.case-meta span { font-size: 0.82rem; }
.case-back { font-size: 0.9rem; }

/* =========================================
   INDEX — HERO
========================================= */

.hero { background: var(--midnight); }

.hero-content .eyebrow {
  display: block;
  padding: 0;
  background: none;
  color: var(--cyan);
  transform: none;
}

.hero h1 {
  font-weight: 800;
  line-height: 0.9;
}

.hero h1 .outlined {
  color: var(--cyan);
  -webkit-text-stroke: 0;
}

/* La decoración pasa a ser los círculos de la tapa del PDF */
.hero-decoration {
  width: clamp(300px, 34vw, 480px);
  height: clamp(300px, 34vw, 480px);
  right: 3%;
  top: 14%;
  opacity: 1;
}

.deco-circle {
  top: 0;
  right: 0;
  width: 76%;
  height: 76%;
  border: var(--ring) solid var(--purple);
  box-shadow: none;
  animation: none;
  background: url("assets/eina/eina-aplicaciones.webp") center / cover no-repeat;
}

.deco-square {
  top: 2%;
  right: 74%;
  width: 18%;
  height: 18%;
  border: 0;
  border-radius: 50%;
  background: var(--magenta);
  transform: none;
  animation: none;
}

.hero-decoration::before,
.hero-decoration::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.hero-decoration::before {
  top: -6%;
  right: 4%;
  width: 7%;
  height: 7%;
  background: var(--yellow);
}

.hero-decoration::after {
  left: 6%;
  bottom: 2%;
  width: 36%;
  height: 36%;
  border: var(--ring) solid var(--cyan);
  background: url("assets/expo-2026/expo-stand-exhibicion.webp") center / cover no-repeat;
}

.hero-decoration span { display: none; }

/* =========================================
   INDEX — TARJETAS DE PROYECTO
   Mismo armado de antes, con el color de cada proyecto en el PDF.
========================================= */

.project-visual { border: 0; }

.project-visual:hover {
  transform: translateY(-6px);
  box-shadow: none;
}

.visual-label {
  padding: 0;
  background: none;
  color: inherit;
  font-size: 0.92rem;
  transform: none;
  opacity: 0.9;
}

.visual-caption { font-size: 0.92rem; }

.visual-title { text-shadow: none !important; }

.visual-symbol { display: none; }

/* Círculo de acento */
.project-visual::before {
  content: "";
  position: absolute;
  inset: auto;
  z-index: 1;
  width: clamp(70px, 9vw, 130px);
  aspect-ratio: 1;
  border-radius: 50%;
  background-image: none;
  background-size: auto;
  opacity: 1;
}

/* Número fantasma */
.project-visual::after {
  position: absolute;
  left: 22px;
  bottom: -0.18em;
  z-index: 0;
  font-family: var(--font-heading);
  font-size: clamp(6rem, 13vw, 12rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.visual-label,
.visual-caption,
.visual-title { z-index: 2; }

/* 01 EINA: violeta + círculo magenta */
.visual-eina {
  background: var(--purple);
  color: var(--ivory);
}

.visual-eina .visual-title { color: var(--ivory); }
.visual-eina .visual-caption { color: var(--cyan); }
.visual-eina::after { content: "01"; }

.visual-eina::before {
  right: 9%;
  top: 14%;
  background: var(--magenta);
  border: var(--ring) solid var(--purple);
}

/* 02 24hs: foto oscura del stand */
.visual-security {
  background:
    linear-gradient(90deg, rgba(17, 18, 26, 0.88), rgba(17, 18, 26, 0.45)),
    url("assets/24hs-security-assets/images/24hs-foto-16.webp") center / cover no-repeat;
  color: var(--ivory);
}

.visual-security .visual-title span { color: var(--ivory); }
.visual-security::after { content: "02"; }
.visual-security::before { display: none; }

/* 03 Expo: cian + círculo amarillo con anillo cian */
.visual-expo {
  background: var(--cyan);
  color: var(--ink);
}

.visual-expo .visual-title { color: var(--ink); }
.visual-expo::after { content: "03"; color: rgba(17, 18, 26, 0.1); }

.visual-expo::before {
  right: 8%;
  top: 12%;
  background: var(--yellow);
  border: var(--ring) solid var(--cyan);
  box-shadow: 0 0 0 2px rgba(17, 18, 26, 0.04);
}

/* 04 Función y Forma: amarillo + círculo magenta */
.visual-institutional {
  background: var(--yellow);
  color: var(--ink);
}

.visual-institutional .visual-title { color: var(--ink); }
.visual-institutional::after { content: "04"; color: rgba(17, 18, 26, 0.1); }

.visual-institutional::before {
  right: 8%;
  bottom: 14%;
  background: var(--magenta);
}

.project-info h3 { font-weight: 700; }

/* =========================================
   INDEX — SOBRE MÍ Y CONTACTO
========================================= */

.about-section::after { font-weight: 800; }

.contact-section { background: var(--midnight); }

.contact-section::after {
  content: "";
  position: absolute;
  top: 14%;
  right: 8%;
  width: clamp(54px, 6vw, 88px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--magenta);
  pointer-events: none;
}

.contact-link { font-family: var(--font-heading); }

/* =========================================
   PÁGINAS DE PROYECTO — portadas con el color del PDF
   (mismo armado: texto a la izquierda, imagen a la derecha)
========================================= */

.case-hero {
  position: relative;
  overflow: hidden;
  background: var(--midnight);
}

.case-hero::after {
  position: absolute;
  left: var(--page-padding);
  bottom: -0.18em;
  z-index: 0;
  font-family: var(--font-heading);
  font-size: clamp(7rem, 15vw, 13rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.case-hero-copy { z-index: 2; }

.case-hero h1 {
  font-weight: 800;
  line-height: 0.9;
}

.case-subtitle {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--cyan);
}

.case-hero-image { position: relative; z-index: 2; }

.case-hero-image img {
  border: 0;
  box-shadow: none;
}

/* EINA */
.pdf-eina .case-hero { background: var(--purple); }
.pdf-eina .case-hero::after { content: "01"; }
.pdf-eina .case-hero-copy .eyebrow,
.pdf-eina .case-meta span { color: rgba(244, 241, 245, 0.8); }
.pdf-eina .case-intro { color: var(--ivory); }

.pdf-eina .case-hero-image::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10%;
  z-index: 3;
  width: clamp(80px, 10vw, 140px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  background: var(--magenta);
  border: var(--ring) solid var(--purple);
}

/* 24hs SECURITY */
.pdf-security .case-hero::after { content: "02"; }

/* EXPO */
.pdf-expo .case-hero {
  background: var(--cyan);
  color: var(--ink);
}

.pdf-expo .case-hero::after { content: "03"; color: rgba(17, 18, 26, 0.1); }
.pdf-expo .case-hero h1 span { color: var(--ivory); }
.pdf-expo .case-hero-copy .eyebrow,
.pdf-expo .case-meta span { color: rgba(17, 18, 26, 0.7); }
.pdf-expo .case-subtitle { color: var(--ink); font-weight: 600; }
.pdf-expo .case-intro { color: rgba(17, 18, 26, 0.85); }

.pdf-expo .case-hero-image::before {
  content: "";
  position: absolute;
  top: -8%;
  right: 6%;
  z-index: 3;
  width: clamp(90px, 11vw, 150px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--yellow);
  border: var(--ring) solid var(--cyan);
}

/* FUNCIÓN Y FORMA */
.pdf-ff .ff-page { padding-top: 0; }

.pdf-ff .ff-heading {
  position: relative;
  max-width: none;
  margin-bottom: 40px;
  padding: clamp(48px, 7vw, 90px) 0 clamp(90px, 11vw, 150px);
  color: var(--ink);
  background: var(--yellow);
  box-shadow: 0 0 0 100vmax var(--yellow);
  clip-path: inset(0 -100vmax);
}

.pdf-ff .ff-heading::after {
  content: "04";
  position: absolute;
  left: 0;
  bottom: -0.18em;
  font-family: var(--font-heading);
  font-size: clamp(7rem, 15vw, 13rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(17, 18, 26, 0.08);
  pointer-events: none;
}

.pdf-ff .ff-heading::before {
  content: "";
  position: absolute;
  right: 4%;
  bottom: 22%;
  width: clamp(64px, 8vw, 110px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--magenta);
}

.pdf-ff .ff-heading h1 {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
}

.pdf-ff .ff-heading h1 span { color: var(--magenta); }
.pdf-ff .ff-heading .eyebrow { color: var(--ink); }
.pdf-ff .ff-heading p:last-child { position: relative; z-index: 1; color: rgba(17, 18, 26, 0.85); }
.pdf-ff .ff-slide-copy h2 { font-family: var(--font-heading); }

/* Los puntitos del carrusel heredaban el tamaño de las flechas */
.pdf-ff .ff-controls .ff-dot { width: 8px; height: 8px; border: 0; background: rgba(255, 255, 255, 0.35); }
.pdf-ff .ff-controls .ff-dot[aria-current="true"] { width: 24px; border-radius: 8px; background: var(--cyan); }

/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {
  .pdf-eina .case-hero-image::before { left: auto; right: 6%; bottom: auto; top: -6%; transform: none; }
}

@media (max-width: 760px) {
  .hero-decoration { display: none; }
  .project-visual::before { width: 64px; }
}

/* Ajustes finos */
@media (min-width: 761px) {
  .hero-decoration {
    width: clamp(240px, 26vw, 380px);
    height: clamp(240px, 26vw, 380px);
    right: 3%;
    top: 11%;
  }
}

.about-content h2,
.contact-section h2 { font-weight: 800; }

.visual-institutional .visual-title,
.visual-expo .visual-title { font-size: clamp(2.6rem, 5.4vw, 5rem); }

.contact-section::after { top: 30%; right: 10%; }