/* ============ Criterio de bordes ============
   1. Borde negro (1.5px, --ink): elementos gráficos de mi marca personal, como
      pegatinas: botones, etiquetas, tarjetas de color pastel, números, mi retrato.
   2. Línea suave (--line) o sin borde: contenedores neutros de información
      (casos, herramientas, artículos, bloques de paleta y tono).
   3. Marco blanco + sombra: todo el trabajo real y las fotos, como fotos impresas
      (posts, carruseles, reels, el móvil de cada caso, polaroids, miniaturas).
   Las manchas de color de fondo y las pegatinas de la despedida no llevan borde. */

/* ============ Tokens ============ */
:root {
  --cream: #FBF7F0;
  --paper: #FFFDF9;
  --ink: #2A2230;
  --ink-soft: #625868;
  --line: #E6DED2;

  /* Paleta de la cara pintada: rosa, cielo, lima, mantequilla (+ lila y menta) */
  --pink: #F8C8DC;
  --sky: #BFDDF5;
  --lime: #DCEBA8;
  --butter: #F8E7A1;
  --lilac: #D9CBF5;
  --mint: #C7EBDB;
  --coral: #FF6A4D;

  --f-sans: "Bricolage Grotesque", system-ui, sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;
  --f-hand: "Caveat", "Comic Sans MS", cursive;

  --radius: 22px;
  --shadow: 0 1px 2px rgba(42, 34, 48, .06), 0 10px 30px rgba(42, 34, 48, .10);
  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* clip (y no hidden) no crea un contenedor de scroll, así el header sticky funciona bien en móvil */
html, body { overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.02; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Serif cursiva para las palabras destacadas, con subrayado tipo rotulador */
h1 em, h2 em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  padding: 0 .08em;
  background: linear-gradient(transparent 58%, var(--hl, var(--pink)) 58%, var(--hl, var(--pink)) 92%, transparent 92%);
}

/* ============ Componentes ============ */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .85em 1.4em;
  border-radius: 999px;
  background: var(--ink); color: var(--cream);
  font-weight: 600; text-decoration: none;
  border: 2px solid var(--ink);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px) rotate(-1deg); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--paper); }
.btn-small { padding: .5em 1.1em; font-size: .92rem; }
.ico { width: 1.1em; height: 1.1em; }

.pill {
  display: inline-block;
  padding: .35em 1em;
  border-radius: 999px;
  font-size: .9rem; font-weight: 600;
}
.pill-outline { border: 1.5px solid var(--ink); background: var(--paper); }
.pill-note { background: var(--butter); font-weight: 500; }

.handwritten { font-family: var(--f-hand); font-size: 1.6rem; line-height: 1; color: var(--ink-soft); }
/* Flecha dibujada a mano, a juego con la letra manuscrita */
.hand-arrow { width: 1.3em; height: 1.15em; vertical-align: -.45em; margin-left: .15em; overflow: visible; }
.hand-arrow-out { transform: rotate(30deg) scaleY(-1); vertical-align: -.1em; }
.hand-arrow path {
  fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
/* Al aparecer en pantalla se dibuja como un trazo a mano (primero la línea, luego la punta)
   y después da un pequeño empujón hacia donde señala de vez en cuando */
.hand-arrow.will-draw path { stroke-dashoffset: 1; }
.hand-arrow.is-drawn .arrow-stem { animation: arrow-draw .7s cubic-bezier(.4, 0, .2, 1) .15s both; }
.hand-arrow.is-drawn .arrow-head { animation: arrow-draw .25s ease-out .8s both; }
.hand-arrow.is-drawn { animation: arrow-nudge 3s ease-in-out 1.4s infinite; }
.hand-arrow-out.is-drawn { animation-name: arrow-nudge-out; }
@keyframes arrow-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes arrow-nudge { 0%, 60%, 100% { translate: 0 0; } 75% { translate: 2px 4px; } }
@keyframes arrow-nudge-out { 0%, 60%, 100% { translate: 0 0; } 75% { translate: 4px -3px; } }

.deco { position: absolute; pointer-events: none; }
.deco-sparkle { width: 38px; height: 38px; color: var(--coral); animation: twinkle 3.2s ease-in-out infinite; }
.deco-flower { width: 54px; height: 54px; color: var(--lilac); animation: spin 18s linear infinite; }
.deco-butterfly { width: 70px; height: 58px; animation: flutter 4s ease-in-out infinite; }
.deco-heart { width: 36px; height: 36px; color: #B9A0F0; animation: heartbeat 2.4s ease-in-out infinite; }

@keyframes twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.75) rotate(20deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes heartbeat {
  0%, 60%, 100% { transform: rotate(-14deg) scale(1); }
  15% { transform: rotate(-14deg) scale(1.2); }
  30% { transform: rotate(-14deg) scale(.95); }
  45% { transform: rotate(-14deg) scale(1.12); }
}
@keyframes flutter { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(4deg); } }

/* ============ Navegación ============ */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 14px var(--gutter);
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
}
.brand { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.15rem; text-decoration: none; white-space: nowrap; }
.brand-mark { width: 34px; height: 28px; }
.nav-links { display: flex; gap: 1.8rem; }
.nav-links a { text-decoration: none; font-weight: 500; color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); }

/* ============ Portada ============ */
.hero {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(32px, 6vw, 72px) var(--gutter) clamp(48px, 7vw, 96px);
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero h1 {
  font-size: clamp(3.4rem, 8.4vw, 7rem);
  font-weight: 800;
  margin: 1.4rem 0 1.2rem;
}
.hero h1 em { --hl: var(--butter); font-size: 1.12em; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-soft); max-width: 40ch; margin: 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0; }

.hero-visual { position: relative; justify-self: center; width: min(420px, 100%); aspect-ratio: 1 / 1; }
.hero-blob {
  position: absolute; inset: 4% -7% -6% 8%;
  background: var(--lilac);
  border-radius: 48% 52% 44% 56% / 52% 46% 54% 48%;
}
.hero-photo {
  position: absolute; inset: 0; margin: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #F1F0EE;
  border: 3px solid var(--ink);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.float-pill {
  position: absolute; z-index: 2;
  padding: .4em 1.1em;
  background: var(--bg); border: 1.5px solid var(--ink); border-radius: 999px;
  font-weight: 600; font-size: .95rem;
  transform: rotate(var(--r));
  box-shadow: 3px 3px 0 var(--ink);
  /* Entrada: aparece girando desde el centro; luego contrarresta el giro para quedar derecha y flota en su sitio */
  animation:
    pill-pop 1.1s cubic-bezier(.2, 1.4, .4, 1) var(--d, 0s) backwards,
    orbit-in-back 2.6s cubic-bezier(.16, .8, .22, 1) backwards,
    pill-float var(--fd, 5s) ease-in-out 2.6s infinite;
}
/* Solo la entrada gira alrededor de la foto; al terminar, las pastillas quedan en su sitio */
.hero-orbit {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  animation: orbit-in 2.6s cubic-bezier(.16, .8, .22, 1) backwards;
}
.hero-orbit .float-pill:nth-child(1) { --d: .25s; --fd: 5s; }
.hero-orbit .float-pill:nth-child(2) { --d: .5s; --fd: 6s; }
.hero-orbit .float-pill:nth-child(3) { --d: .75s; --fd: 5.5s; }
.hero-orbit .float-pill:nth-child(4) { --d: 1s; --fd: 6.5s; }
@keyframes orbit-in { from { rotate: -600deg; scale: .1; } to { rotate: 0deg; scale: 1; } }
@keyframes orbit-in-back { from { rotate: 600deg; } to { rotate: 0deg; } }
@keyframes pill-float {
  0%, 100% { translate: 0 0; rotate: -2deg; }
  50% { translate: 0 -8px; rotate: 2deg; }
}
@keyframes pill-pop { from { opacity: 0; scale: .2; filter: blur(6px); } 60% { filter: blur(0); } to { opacity: 1; scale: 1; } }

/* ============ Cinta de texto ============ */
/* La cinta va girada y es más ancha que la pantalla: el contenedor la recorta para que no ensanche la página */
.marquee-clip { overflow: hidden; padding-block: 14px; }
.marquee {
  overflow: hidden;
  background: var(--ink); color: var(--cream);
  border-block: 2px solid var(--ink);
  transform: rotate(-1.2deg);
  margin: 0 -2%;
}
.marquee-track {
  display: flex; align-items: center; gap: 1.6rem;
  width: max-content;
  padding: .9rem 0;
  font-weight: 700; font-size: 1.2rem; white-space: nowrap;
  animation: marquee 38s linear infinite;
}
.marquee svg { width: 18px; height: 18px; color: var(--butter); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ============ Secciones ============ */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(72px, 10vw, 128px) var(--gutter) 0; }
.section-head { margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2 { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 800; }
.section-lead { margin: 1rem 0 0; max-width: 62ch; font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-soft); }

/* Sobre mí */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.about-collage { position: relative; aspect-ratio: 1 / 1.08; }
.polaroid {
  position: absolute; margin: 0;
  padding: 10px 10px 0;
  background: #fff;
  box-shadow: var(--shadow);
  transform: rotate(var(--r, 0deg));
  transition: transform .3s ease;
}
.polaroid:hover { transform: rotate(0deg) scale(1.03); z-index: 5; }
.polaroid::before {
  content: ""; position: absolute; top: -12px; left: 50%;
  width: 80px; height: 24px;
  background: color-mix(in srgb, var(--butter) 75%, transparent);
  transform: translateX(-50%) rotate(-3deg);
}
.polaroid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.polaroid figcaption {
  font-family: var(--f-hand); font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.1;
  padding: .45em .2em .55em; text-align: center;
}
.about-collage .polaroid:nth-child(2) img { aspect-ratio: 3 / 4; object-position: 50% 30%; }
/* Pegadas una detrás de otra: cada polaroid queda por encima de la siguiente y se leen todos los pies de foto */
.about-collage .polaroid:nth-child(1) { z-index: 3; }
.about-collage .polaroid:nth-child(2) { z-index: 2; }
.about-collage .polaroid:nth-child(3) { z-index: 1; }
.about-collage .polaroid:hover { z-index: 5; }

/* Al llegar a la sección se pegan en orden: edición manual, mi primer proyecto y mi primera paleta de color */
.about-collage.will-stick .polaroid { opacity: 0; }
.about-collage.is-stuck .polaroid { opacity: 1; animation: stick .75s cubic-bezier(.2, 1.3, .4, 1) backwards; }
.about-collage.is-stuck .polaroid:nth-child(3) { animation-delay: .1s; }
.about-collage.is-stuck .polaroid:nth-child(2) { animation-delay: .55s; }
.about-collage.is-stuck .polaroid:nth-child(1) { animation-delay: 1s; }
@keyframes stick {
  from { opacity: 0; transform: translateY(-28px) rotate(calc(var(--r, 0deg) + 9deg)) scale(1.2); }
  60% { opacity: 1; }
  to { opacity: 1; transform: rotate(var(--r, 0deg)) scale(1); }
}

.about-lead { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.3; font-weight: 600; margin-bottom: 1.2em; }
.about-text p:not(.about-lead) { color: var(--ink-soft); }
.about-text strong { color: var(--ink); }
/* Logo dentro del texto: «RK People» a la altura de las mayúsculas y «Group» asomando arriba */
.inline-logo { display: inline; height: 1.3em; width: auto; vertical-align: -.22em; margin: 0 .1em; }

/* Qué hago */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.card {
  position: relative;
  padding: 2.2rem 1.6rem 1.8rem;
  background: var(--bg); border: 1.5px solid var(--ink); border-radius: var(--radius);
  transform: rotate(var(--r));
  transition: transform .25s ease;
}
.card:hover { transform: rotate(0) translateY(-6px); }
.card h3 { font-size: 1.45rem; font-weight: 800; margin-bottom: 1rem; padding-bottom: .9rem; border-bottom: 1.5px solid var(--ink); }
.card li { position: relative; padding-left: 1.2em; margin: .35em 0; font-size: .97rem; }
.card li::before { content: ""; position: absolute; left: .15em; top: .62em; width: .38em; height: .38em; border-radius: 50%; background: var(--ink); }
.card-sticker {
  position: absolute; top: -22px; right: 18px;
  width: 52px; height: 52px; padding: 10px;
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 50%;
  transform: rotate(12deg);
}

/* Herramientas */
/* 3 grupos arriba y 2 más anchos abajo (IA y organización tienen más herramientas) */
.tool-groups { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; }
.tool-group { grid-column: span 2; }
.tool-group:nth-child(n+4) { grid-column: span 3; }
.tool-group {
  padding: 1.5rem;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius);
}
.tool-group h3 {
  font-family: var(--f-serif); font-style: italic; font-weight: 400;
  font-size: 1.5rem; letter-spacing: 0; margin-bottom: 1rem;
}
.tool-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.tool-list li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem .9rem .4rem .45rem;
  background: var(--cream); border: 1.5px solid var(--line); border-radius: 999px;
  font-size: .93rem; font-weight: 600;
  transition: transform .2s ease;
}
.tool-list li:hover { transform: translateY(-2px); }
.tool-list img { width: 26px; height: 26px; padding: 3px; border-radius: 50%; background: #fff; object-fit: contain; }

/* ============ Caso ============ */
.case {
  padding: clamp(24px, 4vw, 48px);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: calc(var(--radius) * 1.5);
}
/* El texto empieza arriba para que el logo no quede flotando con hueco encima */
.case-head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: start; }
.case-title { font-size: clamp(2.8rem, 6vw, 4.8rem); font-weight: 800; color: var(--ink); margin: .1em 0 .4em; }
/* Logotipo del cliente en lugar del nombre escrito; --w ajusta el peso visual de cada logo */
.case-logo { margin: 0 0 2.2rem; line-height: 0; }
.case-logo img { height: var(--h, 46px); width: auto; max-width: 100%; }
/* Todos los casos son clientes de la agencia: etiqueta discreta bajo el logo de la marca */
.case-logo:has(+ .case-agency) { margin-bottom: 1rem; }
.case-agency { margin: 0 0 1.6rem; font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.case-agency .inline-logo { height: 1.25em; vertical-align: -.24em; }
.tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.4rem; }
.tags li { padding: .3em .9em; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: .85rem; font-weight: 600; }
.tags-soft li { background: var(--cream); color: var(--ink); border: 1.5px solid var(--line); }
.case-intro p { color: var(--ink-soft); }
.case + .case { margin-top: clamp(32px, 5vw, 56px); }
.case-reverse .case-intro { order: 2; }

.case-visual { position: relative; aspect-ratio: 1 / 1; max-width: 520px; width: 100%; justify-self: center; }
.case-visual::before {
  content: ""; position: absolute; inset: 10% 6%;
  background: var(--blob, #FBE752); border-radius: 50%;
  opacity: .55;
}
.phone {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  width: 46%; aspect-ratio: 9 / 19;
  transform: translate(-50%, -50%);
  padding: 8px; border-radius: 34px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(42, 34, 48, .22);
  transition: transform .25s ease;
}
.phone:hover { transform: translate(-50%, calc(-50% - 6px)) rotate(-1.5deg); }
.phone video { width: 100%; height: 100%; object-fit: cover; border-radius: 27px; background: #000; }
.float-card {
  position: absolute; z-index: 3;
  width: 34%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 14px;
  border: 4px solid #fff;
  box-shadow: var(--shadow);
  transform: rotate(var(--r));
  transition: transform .25s ease;
}
.float-card:hover { transform: translateY(-6px) rotate(calc(var(--r) - 1.5deg)); }

.case-board {
  display: grid; grid-template-columns: 1.1fr 1.3fr 1fr; gap: 1rem;
  margin: clamp(32px, 5vw, 56px) 0;
}
.board-block { padding: 1.3rem 1.4rem; background: var(--cream); border-radius: 18px; }
.board-block p { margin: 0; color: var(--ink-soft); }
.board-label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .8rem; }
.board-block .tags { margin: 0; }
/* Tantas columnas como colores tenga la marca */
/* Solo color: las muestras se reparten todo el ancho y tienen la misma altura en todas las marcas,
   tengan 3 o 5 colores, para que los bloques queden alineados */
.board-block:has(.swatches) { display: flex; flex-direction: column; }
.swatches { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .45rem; min-height: clamp(64px, 6.5vw, 84px); }
.swatches span {
  background: var(--c);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px rgba(42, 34, 48, .08);
}

.process h4, .gallery h4 { font-size: 1.6rem; font-weight: 800; margin-bottom: 1.2rem; }
.process ol { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; counter-reset: step; }
.process li { counter-increment: step; position: relative; padding-top: 3.2rem; }
.process li::before {
  content: counter(step);
  position: absolute; top: 0; left: 0;
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--sky); border: 1.5px solid var(--ink);
  font-weight: 800;
}
.process li:nth-child(2)::before { background: var(--pink); }
.process li:nth-child(3)::before { background: var(--lime); }
.process li:nth-child(4)::before { background: var(--butter); }
.process li:nth-child(5)::before { background: var(--lilac); }
.process li:not(:last-child)::after {
  content: ""; position: absolute; top: 1.2rem; left: 3rem; right: -.6rem;
  border-top: 2px solid var(--line);
}
.process strong { display: block; margin-bottom: .3rem; }
.process span { font-size: .93rem; color: var(--ink-soft); line-height: 1.45; display: block; }

.gallery { margin-top: clamp(40px, 6vw, 64px); }
.gallery-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.series-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.6rem 1.2rem; }
.series {
  all: unset; cursor: pointer; display: block;
}
.series-cover { position: relative; display: block; margin-bottom: 1.3rem; }
.series-cover img {
  position: relative; z-index: 2;
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 14px; border: 4px solid #fff;
  box-shadow: var(--shadow);
  transition: transform .25s ease;
}
/* Una pieza asomando detrás indica que es un carrusel */
.series[data-count]:not([data-count="1"]) .series-cover::before {
  content: ""; position: absolute; inset: 0;
  background: #EDE5DA; border: 4px solid #fff; border-radius: 14px;
  box-shadow: var(--shadow);
  transform: rotate(4deg) translate(8px, 2px);
  transition: transform .25s ease;
}
.series:hover .series-cover img, .series:focus-visible .series-cover img { transform: translateY(-6px) rotate(-1deg); }
.series:hover .series-cover::before { transform: rotate(7deg) translate(14px, 0); }
.series:focus-visible { outline: 3px solid var(--coral); outline-offset: 6px; border-radius: 14px; }
/* Títulos de dos líneas como máximo y con alto fijo, para que todas las piezas queden alineadas */
.series-title, .reel-title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-height: 2.5em; font-weight: 700; line-height: 1.25;
}

/* Comparativa de las tres marcas */
.compare { margin-bottom: clamp(32px, 5vw, 56px); }
.compare-intro { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 600; margin-bottom: 1.2rem; }
.compare-intro .handwritten { font-size: 1.5em; color: var(--coral); }
.compare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.compare-card {
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1.2rem 1.3rem 1.4rem;
  background: var(--bg); border: 1.5px solid var(--ink); border-radius: var(--radius);
  text-decoration: none;
  transition: transform .25s ease;
}
.compare-card:hover { transform: translateY(-6px) rotate(-.6deg); }
/* Abanico de tres piezas */
.compare-thumbs { position: relative; display: block; aspect-ratio: 16 / 9; margin-bottom: 1rem; }
.compare-thumbs img {
  position: absolute; top: 4%; width: 38%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 10px; border: 3px solid #fff; box-shadow: var(--shadow);
  transition: transform .25s ease;
}
.compare-thumbs img:nth-child(1) { left: 2%; transform: rotate(-7deg); }
.compare-thumbs img:nth-child(2) { left: 31%; top: 0; z-index: 2; }
.compare-thumbs img:nth-child(3) { left: 60%; transform: rotate(6deg); }
.compare-card:hover .compare-thumbs img:nth-child(1) { transform: rotate(-10deg) translateX(-4px); }
.compare-card:hover .compare-thumbs img:nth-child(3) { transform: rotate(9deg) translateX(4px); }
.compare-card strong { font-size: 1.3rem; }

/* Reels: fila deslizable, con marco blanco como el resto de piezas */
.reels {
  display: flex; gap: 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 4px 18px; margin: 0 -4px;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.reel { all: unset; cursor: pointer; flex: 0 0 168px; scroll-snap-align: start; }
.reel-frame {
  position: relative; display: block;
  aspect-ratio: 9 / 16;
  background: #fff; border: 4px solid #fff; border-radius: 18px;
  box-shadow: var(--shadow);
  transition: transform .25s ease;
}
.reel-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.reel-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 253, 249, .92); color: var(--ink);
  transition: transform .25s ease;
}
.reel-play svg { width: 20px; height: 20px; margin-left: 3px; }
.reel:hover .reel-frame, .reel:focus-visible .reel-frame { transform: translateY(-6px) rotate(-1.5deg); }
.reel:hover .reel-play { transform: translate(-50%, -50%) scale(1.12); }
.reel:focus-visible .reel-frame { outline: 3px solid var(--coral); outline-offset: 4px; }
.reel-title { margin-top: .6rem; font-size: .93rem; }

/* Pieza principal en lugar del móvil (QUO) */
.main-card {
  position: absolute; z-index: 2; left: 50%; top: 50%;
  width: 52%; aspect-ratio: 4 / 5; object-fit: cover;
  transform: translate(-50%, -50%) rotate(2deg);
  border-radius: 20px; border: 6px solid #fff;
  box-shadow: 0 20px 50px rgba(42, 34, 48, .22);
  transition: transform .25s ease;
}
.main-card:hover { transform: translate(-50%, calc(-50% - 6px)) rotate(.5deg); }

/* Casos sin piezas visuales */
.case-intro-wide { max-width: 760px; }
.pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: clamp(28px, 4vw, 40px); }
.pillar {
  position: relative;
  padding: 1.5rem 1.6rem;
  background: var(--cream); border-radius: 18px;
}
.pillar-wide { grid-column: 1 / -1; }
.pillar-num {
  display: inline-grid; place-items: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--bg); border: 1.5px solid var(--ink);
  font-weight: 800; font-size: .85rem; margin-bottom: .8rem;
}
.pillar h4 { font-size: 1.35rem; font-weight: 800; margin-bottom: .8rem; }
.pillar p { color: var(--ink-soft); }
.pillar-note { font-size: .9rem; padding: .7rem .9rem; background: var(--paper); border-radius: 12px; margin: 0; }
.networks { display: flex; gap: .5rem; margin-bottom: 1rem; }
.networks img { width: 36px; height: 36px; padding: 6px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 50%; }
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.1rem; counter-reset: flow; }
.flow li {
  counter-increment: flow;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5em 1em .5em .5em;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 999px;
  font-size: .92rem; font-weight: 600;
}
.flow li::before {
  content: counter(flow);
  display: grid; place-items: center; flex: none;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--lime); font-size: .8rem; font-weight: 800;
}

/* Artículos de Coeo */
.process-compact { margin-top: clamp(28px, 4vw, 40px); }
.articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.article {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 10px 10px 18px;
  background: var(--cream); border: 1.5px solid var(--line); border-radius: var(--radius);
  text-decoration: none;
  transition: transform .25s ease;
}
.article:hover { transform: translateY(-6px); }
.article img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; margin-bottom: .5rem; }
.article strong, .article span { padding: 0 6px; }
.article strong { font-size: 1.05rem; line-height: 1.3; }
.article span:last-child { font-size: .9rem; color: var(--ink-soft); line-height: 1.45; }
.article-date { font-size: .75rem !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--coral) !important; }

/* ============ Contacto ============ */
.bye { text-align: center; padding: clamp(96px, 14vw, 180px) var(--gutter) clamp(72px, 10vw, 120px); }
.bye-title { position: relative; display: inline-block; margin-bottom: clamp(3.2rem, 6vw, 4.5rem); }
.bye h2 { font-size: clamp(3.2rem, 9vw, 7.5rem); font-weight: 800; }
.bye h2 em { --hl: transparent; color: var(--coral); font-size: 1.15em; }
.bye p { font-size: 1.2rem; color: var(--ink-soft); max-width: 36ch; margin: 0 auto; }
.bye .hero-cta { justify-content: center; }
.bye-sticker {
  position: absolute;
  display: grid; place-items: center;
  width: clamp(42px, 6vw, 66px); aspect-ratio: 1;
  border-radius: 50%; background: var(--bg);
  box-shadow: var(--shadow);
  transform: rotate(var(--r, 0deg));
  animation: sticker-float 5s ease-in-out infinite;
}
.bye-sticker:nth-child(2) { animation-duration: 6s; animation-delay: -1.5s; }
.bye-sticker:nth-child(3) { animation-duration: 5.5s; animation-delay: -3s; }
.bye-sticker:nth-child(4) { animation-duration: 6.5s; animation-delay: -4.5s; }
@keyframes sticker-float {
  0%, 100% { translate: 0 0; rotate: -3deg; }
  50% { translate: 0 -9px; rotate: 3deg; }
}
.bye-sticker svg { width: 60%; height: 60%; }

.footer {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 24px var(--gutter);
  border-top: 1px solid var(--line);
  font-size: .88rem; color: var(--ink-soft);
}
.footer-credits span { display: block; }
.footer-credits a { text-decoration-color: var(--coral); text-underline-offset: 2px; }
.footer-credits a:hover { color: var(--ink); }
.footer-note { max-width: 70ch; text-align: right; }
@media (max-width: 640px) { .footer-note { text-align: left; } }

/* ============ Visor ============ */
.lightbox {
  width: min(560px, 94vw); max-height: 96vh;
  padding: 0; border: 0; border-radius: 26px;
  background: var(--paper); color: var(--ink);
  overflow: visible;
}
.lightbox::backdrop { background: rgba(42, 34, 48, .72); backdrop-filter: blur(4px); }
.lb-top { display: flex; align-items: center; gap: .8rem; padding: 14px 14px 10px 22px; }
.lb-title { font-weight: 700; flex: 1; }
.lb-count { font-size: .88rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.lb-stage { padding: 0 14px; }
.lb-stage img, .lb-stage video {
  width: 100%; max-height: calc(96vh - 130px);
  object-fit: contain; border-radius: 16px; background: var(--cream);
  margin: 0 auto;
}
.lb-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink); cursor: pointer;
}
.lb-btn svg { width: 20px; height: 20px; }
.lb-btn[hidden] { display: none; }
.lb-btn:hover { background: var(--butter); }
.lb-prev, .lb-next { position: absolute; top: 50%; transform: translateY(-50%); }
.lb-prev { left: -22px; }
.lb-next { right: -22px; }
.lb-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 14px; }
.lb-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--line); cursor: pointer; }
.lb-dots button[aria-current="true"] { background: var(--ink); width: 20px; border-radius: 4px; }

/* ============ Pantalla de carga ============ */
/* La mariposa se monta pieza a pieza (cuerpo y luego alas), aletea a pocos fotogramas, vuela
   hasta el logo del menú y, al posarse, abre ondas con los colores de sus alas que descubren
   la página. Tiempos: LOADER en js/main.js. Colores de las ondas: .loader-wave en index.html. */
.loader {
  display: none;
  --bf-w: clamp(112px, 11vw, 148px);
  --name: clamp(1.75rem, 4vw, 2.6rem);
  --lockup: calc(var(--bf-w) * 28 / 34 + 18px + var(--name) * 1.1);
  --flap: .36s;
}
html.is-loading .loader {
  display: block;
  position: fixed; inset: 0; z-index: 100;
  contain: strict;
  /* Red de seguridad: aunque falle el JS, a los 4,5 s se desvanece sola */
  animation: loader-failsafe .4s ease 4.5s forwards;
}
@keyframes loader-failsafe { to { opacity: 0; visibility: hidden; } }
/* Mientras tanto, el logo real espera escondido y las pastillas de la portada no empiezan
   hasta que las ondas llegan a la foto (el JS añade .hero-ready) */
html.is-loading .brand-mark { visibility: hidden; }
html.is-loading:not(.hero-ready) :is(.hero-orbit, .float-pill) { animation-play-state: paused; }

.loader-wave, .loader-paper { position: absolute; inset: 0; }
.loader-wave { background: var(--c); visibility: hidden; }
.loader.is-revealing .loader-wave { visibility: visible; }
.loader-paper { background: var(--cream); }

/* Nombre y mariposa centrados como un bloque: mariposa arriba, nombre debajo */
.loader-name {
  position: absolute; left: 0; right: 0; top: 50%;
  margin: calc(var(--lockup) / 2 - var(--name) * 1.1) 0 0;
  font-size: var(--name); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
  text-align: center;
  opacity: 0;
}
/* Solo aparece con su tipografía ya cargada, para que no cambie de letra a la vista */
.loader.has-name .loader-name { animation: loader-name .5s cubic-bezier(.2, .8, .2, 1) .2s forwards; }
@keyframes loader-name { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

.loader-fly {
  position: absolute; left: 50%; top: 50%;
  width: var(--bf-w); aspect-ratio: 34 / 28; /* mismas proporciones que .brand-mark */
  margin: calc(var(--lockup) / -2) 0 0 calc(var(--bf-w) / -2);
  will-change: transform;
}
.loader-bf { display: block; width: 100%; height: 100%; overflow: visible; }

/* Montaje: primero el cuerpo y luego cada ala se despliega desde él */
.loader-bf .bf-piece { animation: bf-unfold .38s cubic-bezier(.2, 1.5, .4, 1) var(--d, 0s) backwards; }
.loader-bf .bf-up .bf-piece { transform-origin: 24px 18px; }
.loader-bf .bf-low .bf-piece { transform-origin: 24px 21px; }
.loader-bf .bf-body { transform-box: fill-box; transform-origin: center; animation-name: bf-pop; animation-duration: .3s; }
@keyframes bf-unfold { from { scale: 0; rotate: var(--fold, 0deg); } }
@keyframes bf-pop { from { scale: 0; } }

/* Aleteo a pocos fotogramas (como un flipbook): abiertas, a medias, cerradas, a medias */
.loader-bf .bf-wing { transform-origin: 24px 20px; }
.loader-bf { animation: bf-bob var(--flap) step-end .5s infinite; }
.loader-bf .bf-up { animation: bf-flap-up var(--flap) step-end .5s infinite; }
.loader-bf .bf-low { animation: bf-flap-low var(--flap) step-end .5s infinite; }
.loader.is-flying { --flap: .2s; }
@keyframes bf-flap-up { 25%, 75% { transform: scaleX(.58); } 50% { transform: scaleX(.16); } }
@keyframes bf-flap-low { 25%, 75% { transform: scaleX(.7); } 50% { transform: scaleX(.36); } }
@keyframes bf-bob { 25%, 75% { translate: 0 -2px; } 50% { translate: 0 -4px; } }
/* Al posarse: cierra las alas una vez y las deja abiertas, igual que el logo */
.loader.is-landed .loader-bf { animation: none; }
.loader.is-landed .bf-up { animation: bf-land-up .32s step-end forwards; }
.loader.is-landed .bf-low { animation: bf-land-low .32s step-end forwards; }
@keyframes bf-land-up { 0% { transform: scaleX(.16); } 40% { transform: scaleX(.58); } 75%, 100% { transform: none; } }
@keyframes bf-land-low { 0% { transform: scaleX(.36); } 40% { transform: scaleX(.7); } 75%, 100% { transform: none; } }

/* ============ Responsive ============ */
@media (max-width: 960px) {
  .nav-links { display: none; }
  .hero, .about-grid, .case-head { grid-template-columns: 1fr; }
  .hero-visual { width: min(360px, 86%); margin-top: 1rem; }
  .cards { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; }
  .tool-groups { grid-template-columns: repeat(2, 1fr); }
  .tool-group, .tool-group:nth-child(n+4) { grid-column: auto; }
  .tool-group:last-child { grid-column: 1 / -1; }
  .case-board { grid-template-columns: 1fr; }
  .process ol { grid-template-columns: 1fr; gap: 1.2rem; }
  .process li { padding: 0 0 0 3.4rem; min-height: 2.4rem; }
  .process li:not(:last-child)::after { top: 2.8rem; bottom: -1rem; left: 1.2rem; right: auto; border-top: 0; border-left: 2px solid var(--line); }
  .about-collage { max-width: 520px; width: 100%; margin: 0 auto; }
  .case-reverse .case-intro { order: 0; }
  .compare-grid { grid-template-columns: 1fr; }
  .compare-card { display: grid; grid-template-columns: 140px 1fr; column-gap: 1.2rem; align-items: center; }
  .compare-thumbs { grid-row: span 2; aspect-ratio: auto; height: 96px; margin: 0; }
  .compare-thumbs img { width: 58px; }
  .compare-thumbs img:nth-child(1) { left: 0; }
  .compare-thumbs img:nth-child(2) { left: 40px; }
  .compare-thumbs img:nth-child(3) { left: 80px; }
  .articles { grid-template-columns: repeat(2, 1fr); }
  .pillars { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .case-logo img { height: calc(var(--h, 46px) * .85); }
  .swatches { gap: .35rem; min-height: 56px; }
  .swatches span { border-radius: 10px; }
  .nav-links { display: none; }
  .cards, .tool-groups { grid-template-columns: 1fr; }
  .card { transform: none; }
  .series-grid { grid-template-columns: repeat(2, 1fr); gap: 1.4rem .9rem; }
  .reel { flex-basis: 140px; }
  .articles { grid-template-columns: 1fr; }
  .about-collage { aspect-ratio: 1 / 1.3; }
  .float-pill { font-size: .82rem; }
  .lb-prev { left: 6px; } .lb-next { right: 6px; }
  .lb-prev, .lb-next { top: auto; bottom: 8px; transform: none; }
  .lb-dots { padding: 18px 60px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .loader { display: none !important; }
}