/* ==========================================================================
   Abugart Studio — Design System (tema WordPress)
   Negro · blanco · azul   |   Surface: Decide / Learn (marketing)
   ========================================================================== */

:root {
  --ink:        #0A0D14;
  --ink-2:      #454B5A;
  --ink-3:      #7C8396;
  --line:       #E3E7EF;
  --line-2:     #EEF1F7;
  --paper:      #FFFFFF;
  --paper-2:    #F6F8FC;
  --blue:       #1652F0;
  --blue-600:   #0E3FCB;
  --blue-700:   #0A2E96;
  --blue-050:   #EDF2FF;
  --navy:       #080B14;
  --navy-2:     #101627;
  --navy-line:  #232A3D;
  --radius:     12px;
  --radius-lg:  20px;
  --radius-sm:  8px;
  --shadow-sm:  0 1px 2px rgba(10,13,20,.05), 0 1px 3px rgba(10,13,20,.05);
  --shadow-md:  0 18px 40px -22px rgba(10,13,20,.35);
  --shadow-blue: 0 16px 34px -16px rgba(22,82,240,.45);
  /* El japonés usa la fuente del sistema: Hiragino (Apple), Yu Gothic (Windows),
     Noto Sans CJK (Android). Descargar una fuente japonesa cuesta cientos de KB
     y además se ve menos natural que la del propio dispositivo. */
  --font-jp:      "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, "Noto Sans CJK JP", "Noto Sans JP";
  --font-display: "Sora", var(--font-jp), "Segoe UI", system-ui, sans-serif;
  --font-body:    "Plus Jakarta Sans", var(--font-jp), "Segoe UI", system-ui, sans-serif;
  --font-mono:    "Space Mono", ui-monospace, monospace;
  --maxw: 1160px;
  --gutter: clamp(20px, 5vw, 48px);
  --ease: cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--paper);
  font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5 {
  font-family: var(--font-display); font-weight: 600; line-height: 1.12;
  letter-spacing: -.02em; margin: 0; text-wrap: balance;
}
p { margin: 0; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }

/* WP helpers */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); clip-path: inset(50%); white-space: nowrap;
}
.skip-link { z-index: 999; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; }
.alignwide { margin-left: auto; margin-right: auto; max-width: 1400px; }
.alignfull { max-width: 100vw; }
.wp-block-image img { border-radius: var(--radius); }

/* Layout */
.container { width: min(100% - var(--gutter)*2, var(--maxw)); margin-inline: auto; }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section--tight { padding: clamp(44px, 6vw, 80px) 0; }
.bg-paper2 { background: var(--paper-2); }
.bg-navy { background: var(--navy); color: #fff; }

.eyebrow {
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--blue); display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1.5px; background: currentColor; opacity: .6; }
.lead { font-size: clamp(18px, 1.6vw, 20px); color: var(--ink-2); }
.muted { color: var(--ink-3); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body);
  font-weight: 600; font-size: 15px; padding: 13px 24px; border-radius: 100px;
  border: 1.5px solid transparent; cursor: pointer; min-height: 44px; white-space: nowrap;
  transition: transform .25s var(--ease), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn--primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn--primary:hover { background: var(--blue-600); transform: translateY(-2px); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-strong); transform: translateY(-2px); }
.btn--ghost { border-color: var(--line); background: var(--paper); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); transform: translateY(-2px); }
.btn--onDark { border-color: var(--navy-line); color: #fff; background: transparent; }
.btn--onDark:hover { border-color: #fff; transform: translateY(-2px); }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.86);
  backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; letter-spacing: -.02em; }
.brand .mark, .brand .custom-logo-wrap img { width: 34px; height: 34px; flex: none; border-radius: 9px; }
.brand .brand-word { display: inline-flex; align-items: baseline; gap: 5px; }
.brand .brand-name { font-weight: 700; color: var(--ink); }
.brand .brand-sub { font-weight: 300; color: var(--ink-3); letter-spacing: .01em; }

.nav-links { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.nav-links li { margin: 0; }
.nav-links a { display: block; font-size: 15px; font-weight: 500; color: var(--ink-2); padding: 9px 14px; border-radius: 100px; transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--ink); background: var(--line-2); }
.nav-links .current-menu-item > a, .nav-links .current_page_item > a, .nav-links a[aria-current="page"] {
  color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--blue);
  text-decoration-thickness: 2px; text-underline-offset: 7px;
}

.nav-right { display: flex; align-items: center; gap: 14px; }
.lang-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; font-family: var(--font-mono); font-size: 12px; }
.lang-toggle a { padding: 7px 11px; color: var(--ink-3); letter-spacing: .06em; transition: background .2s, color .2s; }
.lang-toggle a.is-active { background: var(--ink); color: #fff; }

.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 18px; height: 1.8px; background: var(--ink); position: relative; transition: transform .25s var(--ease); }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* --- La barra del menú, en oscuro (todo el sitio) ---------------------------
   La cabecera es una barra negra con el mismo degradado sutil de la sección de
   videojuegos: naranja arriba a la izquierda, azul abajo a la derecha. En vez
   de reescribir cada regla del menú, se redefinen aquí dentro las variables de
   color, así el resto del tema no se entera. */
.site-header {
  --ink: #F2F5FF;
  --ink-2: #C6CFE4;
  --ink-3: #94A1BF;
  --line: rgba(255,255,255,.16);
  --line-2: rgba(255,255,255,.09);
  background: rgba(10,14,24,.9);
  border-bottom: 0;
}
.site-header::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(520px 120px at 5% 0%, rgba(234,88,12,.30), transparent 72%),
    radial-gradient(560px 130px at 97% 100%, rgba(22,82,240,.34), transparent 72%);
}
.site-header > .container { position: relative; z-index: 1; }
/* El logotipo es azul sobre azul oscuro: un anillo fino lo despega del fondo. */
.site-header .brand .mark { box-shadow: 0 0 0 1px rgba(255,255,255,.24); }
/* "Abugart" queda en blanco (viene de --ink) y "studio" en el naranja de la marca. */
.site-header .brand-sub { color: var(--accent); }
.site-header .lang-toggle a.is-active { background: #F2F5FF; color: #0A0E18; }
/* El botón del menú en móvil: sobre negro, sin caja clara y con las rayitas claras. */
.site-header .nav-toggle { background: transparent; }

/* Hero */
.hero { position: relative; padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 84px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }

/* --- La hoja de layout: se asoma por el borde, no es un fondo de papel tapiz.
   Al ser transparente, sobre el blanco solo quedan las líneas del LO: la hoja
   se lee como objeto físico sin necesidad de sombra. Opacidad en el panel. --- */
.hero-grid > * { position: relative; z-index: 1; }
.hero-sheet {
  position: absolute; z-index: 0; pointer-events: none;
  left: -16%; bottom: -24%; width: var(--sheet-size, 88%); transform: rotate(-7deg);
}
.hero-sheet img { display: block; width: 100%; height: auto; opacity: var(--sheet-opacity, .16); }
.hero-sheet--br  { left: auto; right: -12%; bottom: -24%; width: calc(var(--sheet-size, 88%) * .84); transform: rotate(7deg); }
.hero-sheet--col { left: auto; right: -10%; bottom: auto; top: -6%; width: calc(var(--sheet-size, 88%) * .56); transform: rotate(-5deg); }
.hero h1 { font-size: clamp(38px, 5.4vw, 68px); font-weight: 700; letter-spacing: -.035em; margin: 22px 0 0; }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero h1 .hero-h1-main { display: block; }
/* La segunda línea del titular: más fina y más pequeña, debajo. */
.hero h1 .hero-h1-sub {
  display: block; margin-top: .16em; font-size: .56em; font-weight: 400;
  letter-spacing: -.012em; color: var(--ink-2);
}

/* El nombre del estudio, grande: es lo que tiene que quedar del sitio. Debajo,
   el subtítulo en versalitas finas. El tamaño lo manda --brand-scale, que se
   ajusta desde el Personalizador. */
.hero-brand { display: flex; flex-direction: column; gap: 5px; }
.hero-brand-name {
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-size: clamp(34px, calc(6.2vw * var(--brand-scale, 1)), 78px);
  letter-spacing: -.045em; line-height: .92;
}
/* La inicial lleva el punto naranja del logo, arriba a la derecha, que es donde
   va en el monograma. Es lo que la separa de la tipografía normal. La letra sale
   del nombre real, así que la marca aguanta un cambio de nombre. */
.hero-brand-name .brand-inicial { position: relative; color: var(--blue); }
.hero-brand-name .brand-inicial::after {
  content: ""; position: absolute; top: .13em; right: .03em;
  width: .115em; height: .115em; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 .045em #fff, 0 0 0 .06em rgba(10,13,20,.07);
}
.hero-brand-sub {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-3);
}
.hero .lead { margin-top: 22px; max-width: 46ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-meta-line {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--ink-3);
}
.hero-img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.hero-embed { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.hero-embed iframe { width: 100%; aspect-ratio: 16/10; border: 0; }

/* Showreel placeholder */
.reel { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--navy); aspect-ratio: 4 / 3.4; box-shadow: var(--shadow-md); border: 1px solid var(--navy-line); }
.reel::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 80% 0%, rgba(22,82,240,.55), transparent 55%); pointer-events: none; }
.reel-bar { position: absolute; top: 0; left: 0; right: 0; height: 40px; z-index: 2; display: flex; align-items: center; gap: 7px; padding: 0 16px; border-bottom: 1px solid var(--navy-line); background: rgba(8,11,20,.7); }
.reel-dot { width: 9px; height: 9px; border-radius: 50%; background: #2A3550; }
.reel-dot--live { background: var(--blue); box-shadow: 0 0 0 4px rgba(22,82,240,.25); }
.reel-label { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8391B5; }
.reel-body { position: absolute; inset: 40px 0 0; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1px; background: var(--navy-line); }
.reel-cell { background: #0C1122; display: flex; align-items: center; justify-content: center; }
/* (Aquí vivía `.reel-cell span`, que atrapaba CUALQUIER span dentro de la celda.
   La etiqueta ya se estiliza con `.reel-cell .tile-label`, así que la regla era
   redundante — y al añadir un span interior para animar la etiqueta le robaba el
   color blanco y el tamaño: el texto se veía sucio y más pequeño. Si hace falta
   texto suelto dentro de una celda, darle clase y estilizarlo por clase. */
.reel-play { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 78px; height: 78px; border-radius: 50%; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px rgba(22,82,240,.16); }

/* Section head */
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; margin-bottom: clamp(36px, 5vw, 60px); }
.sec-head h2 { font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; letter-spacing: -.03em; margin-top: 16px; }
.sec-head p { color: var(--ink-2); }

/* Services */
.services { display: grid; gap: 0; border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 80px 1.1fr 1.4fr; gap: clamp(20px, 3vw, 40px); padding: clamp(28px, 3.6vw, 44px) 0; border-bottom: 1px solid var(--line); align-items: start; transition: background .3s; }
.service-row:hover { background: var(--paper-2); }
.service-num { font-family: var(--font-mono); font-size: 14px; color: var(--blue); padding-top: 6px; }
.service-row h3 { font-size: clamp(20px, 2.4vw, 27px); font-weight: 600; }
.service-row p { color: var(--ink-2); }
.service-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; padding: 6px 11px; border-radius: 100px; background: var(--blue-050); color: var(--blue-700); border: 1px solid #DDE6FF; }

/* Portfolio (posters 2:3) */
.folio { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.folio-card { position: relative; }
.folio-link { display: block; position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 2 / 3; background: var(--paper-2); border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s; }
.folio-link:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.folio-img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.folio-link:hover .folio-img { transform: scale(1.045); }
.folio-card .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 20px;
  background: linear-gradient(135deg, transparent 49.4%, var(--line) 49.4%, var(--line) 50.6%, transparent 50.6%), linear-gradient(45deg, transparent 49.4%, var(--line) 49.4%, var(--line) 50.6%, transparent 50.6%), var(--paper-2);
  background-size: 22px 22px, 22px 22px, auto; }
.folio-card .ph span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.folio-card .ph em { font-family: var(--font-display); font-style: normal; font-weight: 600; color: var(--ink-2); font-size: 15px; }
.folio-badge { position: absolute; top: 12px; left: 12px; z-index: 3; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 9px; border-radius: 100px; background: rgba(10,13,20,.82); color: #fff; }
.folio-badge--anon { background: rgba(22,82,240,.94); }
.folio-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 16px; opacity: 0; transition: opacity .3s; color: #fff;
  background: linear-gradient(transparent 42%, rgba(8,11,20,.86)); }
.folio-link:hover .folio-overlay, .folio-link:focus-visible .folio-overlay { opacity: 1; }
.folio-info strong { font-family: var(--font-display); font-weight: 600; font-size: 15px; display: block; }
.folio-info small { font-size: 12.5px; opacity: .82; }
.folio-overlay .tag { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.2); }

/* Chips / pagination / lists */
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.chip { font-size: 14px; font-weight: 500; padding: 9px 16px; border-radius: 100px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); transition: all .2s; min-height: 40px; display: inline-flex; align-items: center; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.pagination { margin-top: 40px; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; margin-right: 6px; font-weight: 600; font-size: 14px; }
.pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }
.post-list { display: grid; gap: 28px; }
.post-item { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.post-item h3 { font-size: clamp(20px, 2.4vw, 28px); }
.post-item h3 a:hover { color: var(--blue); }

/* Process */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.step { background: var(--paper); padding: 26px 18px; }
.step .n { font-family: var(--font-mono); font-size: 12px; color: var(--blue); letter-spacing: .1em; }
.step h4 { font-size: 17px; margin: 14px 0 8px; }
.step p { font-size: 14.5px; color: var(--ink-2); }

/* Split + checklist */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.checklist { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--ink-2); }
.checklist li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; }

/* La política de proyectos, dentro de "How we are" en Estudio. Un filete naranja
   a la izquierda la separa del párrafo de arriba: se lee como una declaración.
   El margen de arriba la baja respecto al párrafo de capacidad: 164 px, el doble de
   lo que ocupa ese párrafo (3 líneas), como pidió Carlos. En pantallas pequeñas el
   clamp lo deja en 112 px, que es el doble de lo que mide el párrafo ahí. */
.aim { margin-top: clamp(112px, 12vw, 164px); padding-left: 18px; border-left: 3px solid var(--accent); }
.aim h3 { font-size: clamp(26px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.aim p { margin-top: 8px; color: var(--ink-2); }

/* CTA band */
.cta-band { border-radius: var(--radius-lg); padding: clamp(36px, 5vw, 64px); background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.cta-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 120% at 100% 0%, rgba(22,82,240,.4), transparent 55%); pointer-events: none; }
.cta-band h2 { font-size: clamp(26px, 3.4vw, 42px); font-weight: 700; letter-spacing: -.03em; max-width: 22ch; position: relative; }
.cta-band p { color: #A9B4CE; margin-top: 14px; max-width: 52ch; position: relative; }
.cta-band .btn { position: relative; margin-top: 28px; }

/* Contact */
.contact-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px); }
.contact-line { display: flex; flex-direction: column; gap: 5px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-line:last-child { border-bottom: 0; }
.contact-line .k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.contact-line .v { font-size: 16px; font-weight: 500; }
.contact-line .v a:hover { color: var(--blue); }
.contact-line .v.pending { color: var(--ink-3); font-weight: 400; font-style: italic; }
.notice { background: var(--blue-050); border: 1px dashed #C7D6FF; border-radius: var(--radius); padding: 22px; }
.form-embed input, .form-embed textarea, .form-embed select, .form-embed button { font-family: var(--font-body); }
.form-embed input[type="text"], .form-embed input[type="email"], .form-embed textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); font-size: 15.5px; }
.form-embed input[type="submit"], .form-embed button { background: var(--blue); color: #fff; border: 0; border-radius: 100px; padding: 13px 26px; font-weight: 600; cursor: pointer; }

/* Page hero + content */
.page-hero { padding: clamp(48px, 7vw, 92px) 0 clamp(32px, 4vw, 52px); border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(34px, 4.8vw, 60px); font-weight: 700; letter-spacing: -.035em; margin-top: 18px; }
.page-hero p { margin-top: 20px; max-width: 60ch; font-size: clamp(17px, 1.5vw, 19px); color: var(--ink-2); }
.crumbs { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--ink-3); }
.crumbs a:hover { color: var(--blue); }
.entry-content > * + * { margin-top: 1.15em; }
.entry-content h2 { font-size: clamp(24px, 3vw, 34px); margin-top: 1.6em; }
.entry-content h3 { font-size: clamp(20px, 2.2vw, 26px); margin-top: 1.5em; }
.entry-content p, .entry-content li { color: var(--ink-2); }
.entry-content a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content ul { list-style: disc; }
.entry-content img { border-radius: var(--radius); }
.entry-content blockquote { border-left: 3px solid var(--blue); padding-left: 20px; font-size: 19px; color: var(--ink); margin: 1.4em 0; }

/* Footer */
.site-footer { background: var(--navy); color: #fff; padding: clamp(48px, 6vw, 72px) 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; }
.footer-grid h5 { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: #8E9AB8; font-weight: 400; margin-bottom: 16px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-links a { color: #C7CFE2; font-size: 15px; transition: color .2s; }
.footer-links a:hover { color: #fff; }
.footer-tagline { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #7EA0FF; margin-top: 18px; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--navy-line); color: #8E9AB8; font-size: 13.5px; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand .mark, .footer-brand img { width: 34px; height: 34px; border-radius: 9px; }
.site-footer .widget { color: #C7CFE2; margin-top: 18px; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation: none !important; }
}

/* Responsive */
@media (max-width: 1000px) {
  .folio { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .sec-head { grid-template-columns: 1fr; align-items: start; }
  .split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-links.open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: absolute; top: 72px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 14px var(--gutter) 22px; }
  .nav-links.open a { padding: 13px 14px; }
  .service-row { grid-template-columns: 40px 1fr; }
  .service-tags-wrap { grid-column: 2; }
  .folio { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .brand .brand-sub { display: none; }
}
@media (max-width: 480px) {
  .folio { grid-template-columns: 1fr; }
}


/* -----------------------------------------------------------------------------
 * Japonés (.lang-ja lo añade body_class)
 * El japonés no usa el mismo espaciado tipográfico que el latino: el
 * letter-spacing negativo que da carácter al inglés/a español vuelve ilegible
 * el kanji, así que aquí se neutraliza y se sube el interlineado.
 * -------------------------------------------------------------------------- */
.lang-ja { letter-spacing: 0; }
.lang-ja h1, .lang-ja h2, .lang-ja h3, .lang-ja h4 {
  letter-spacing: 0 !important;
  line-height: 1.32;
  word-break: auto-phrase;
}
.lang-ja p, .lang-ja li { line-height: 1.9; }
.lang-ja .eyebrow, .lang-ja .tag, .lang-ja .chip,
.lang-ja .brand-sub, .lang-ja .folio-badge { letter-spacing: .04em; }
.lang-ja .btn span { letter-spacing: .02em; }
.lang-ja .lang-toggle a { letter-spacing: .06em; }


/* =============================================================================
 * PIEZAS DE MEDIOS · BARRA DE REGISTRO · CONTADOR DE FRAMES · LÁPIZ ROJO
 * Detalles tomados del oficio de animación: papel con agujeros de registro,
 * numeración por fotogramas y el lápiz rojo con el que se marcan los tiempos.
 * ============================================================================= */

/* --- Acento: UN solo color, en tres tonos ---
   Regla 60-30-10: 60% neutro, 30% secundario (azul), 10% acento. Un acento que
   pasa del ~10% de la superficie deja de ser acento y se vuelve secundario:
   por eso solo se usa en cuatro puntos contados.
   Hace falta un tono "strong" porque un naranja vivo (#EA580C da 3.56:1 sobre
   blanco) no alcanza el 4.5:1 que exige WCAG para texto pequeño; el tono se
   deriva del color elegido, así que basta con elegir uno en el Personalizador. */
:root {
  --accent:        #EA580C; /* gráficos: círculos de bullets y punto "live" sobre azul oscuro */
  --accent-strong: #C2410C; /* textos pequeños (contador de frames, números) */
  --accent-050:    #FDF0E9; /* tinte claro de fondo */
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --accent-strong: color-mix(in srgb, var(--accent) 82%, #000);
    --accent-050:    color-mix(in srgb, var(--accent) 9%, #FFF);
  }
}

/* --- Piezas: imagen o video con etiqueta superpuesta --- */
.reel-cell { position: relative; overflow: hidden; }
.reel-cell .tile-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-cell .tile-label {
  position: relative; z-index: 2; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .06em; color: #5B6889; text-align: center; padding: 0 10px; line-height: 1.45;
}
/* Sobre la imagen: abajo, más grande y en blanco con una sombra suave, que es
   lo que la mantiene legible sin oscurecer el dibujo. */
.reel-cell--media .tile-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 24px 12px 11px; text-align: left; text-transform: uppercase;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
  /* Un punto de transparencia, para que se intuya el video por debajo. */
  color: rgba(255,255,255,.87);
  background: linear-gradient(to top, rgba(6,9,16,.46), rgba(6,9,16,0));
  /* La sombra es lo que la mantiene legible aunque el fondo sea blanco. */
  text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.34);
}
/* Piezas que encadenan más de un video: se cruzan y funden a negro. */
.tile-seq { position: absolute; inset: 0; }
.tile-seq .tile-media { position: absolute; inset: 0; opacity: 0; transition: opacity .45s var(--ease); }
.tile-seq .tile-media.on { opacity: 1; }
.tile-black { position: absolute; inset: 0; z-index: 2; background: #06090F; opacity: 0;
  transition: opacity .6s var(--ease); pointer-events: none; }
.tile-black.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tile-seq .tile-media, .tile-black { transition: none; } }

.reel--filled .reel-play { display: none; }

/* --- Barra de registro (los 3 agujeros del papel de animación) ---
   Formas medidas sobre una hoja real: el agujero central es un círculo de
   18 px, y los laterales son ranuras de 46 × 12 (3,8 : 1) con los extremos
   redondeados, no óvalos.                                                  */
.pegbar { display: flex; align-items: center; justify-content: center; gap: 140px; background: var(--paper); padding: 11px 0 13px; }
.pegbar i { width: 46px; height: 12px; border-radius: 100px; background: #DCE1EC; box-shadow: inset 0 2px 3px rgba(10,13,20,.18); }
/* El central va redondo, como en el papel de animación. */
.pegbar i:nth-child(2) { width: 18px; height: 18px; border-radius: 50%; }

/* La misma barra al principio de la página, justo bajo el menú. */
.pegbar--top { border-bottom: 1px solid var(--line); padding: 9px 0 10px; }

/* La misma barra de registro, en negativo, al empezar el pie. Antes se dibujaba
   con tres sombras del mismo óvalo (30×17, separadas 118 px), que no es la forma
   del papel. Ahora son los mismos tres agujeros que arriba —ranura, círculo,
   ranura— tomados de `.pegbar`, para que no vuelvan a separarse. */
.pegbar--inv { background: transparent; padding: 0; margin: 0 0 46px; }
.pegbar--inv i { background: rgba(255,255,255,.085); box-shadow: none; }

/* --- Contador de frames en los antetítulos de sección --- */
body { counter-reset: abugart-frame; }
.sec-head .eyebrow::before {
  counter-increment: abugart-frame;
  content: counter(abugart-frame, decimal-leading-zero) " / ";
  color: var(--accent-strong); font-weight: 700;
}

/* --- La etiqueta de cada pieza entra deslizándose despacio desde la izquierda,
   se asienta, descansa y vuelve a empezar.

   El span interior existe SOLO para poder moverse sin arrastrar la banda de
   degradado que da legibilidad. Hereda todo de la etiqueta a propósito: si
   alguna regla amplia vuelve a atraparlo, esto lo devuelve a su sitio. --- */
.reel-cell .tile-label .tile-label-txt {
  display: inline-block;
  color: inherit; font-size: inherit; letter-spacing: inherit;
  text-align: inherit; padding: 0;
}
.reveal.in .reel-cell .tile-label-txt { animation: abugart-label-txt 9.5s infinite both; }
/* Cada pieza entra con su retraso, para que no viajen las cuatro a la vez. */
.reveal.in .reel-cell:nth-child(2) .tile-label-txt { animation-delay: 1.4s; }
.reveal.in .reel-cell:nth-child(3) .tile-label-txt { animation-delay: 2.8s; }
.reveal.in .reel-cell:nth-child(4) .tile-label-txt { animation-delay: 4.2s; }
/* Un ciclo: viaja lento y se asienta (0→34 %), descansa (34→88 %) y se apaga
   para volver a entrar (88→100 %). El tramo del viaje frena al final, que es lo
   que hace que la letra "llegue" en vez de aparecer de golpe.
   Sin JavaScript no corre nada: el estado de partida es el visible, así que las
   etiquetas se ven igual. Con "reducir movimiento" se apaga sola. */
@keyframes abugart-label-txt {
  0%   { opacity: 0; transform: translateX(-64px); animation-timing-function: cubic-bezier(.17,.84,.25,1); }
  34%  { opacity: 1; transform: translateX(0); }
  88%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(0); }
}

/* --- Acento: los cuatro sitios donde aparece, ni uno más --- */
.reel-dot--live { background: var(--accent); box-shadow: 0 0 0 4px rgba(234,88,12,.22); }
.service-num { color: var(--accent-strong); }
.step .n { color: var(--accent-strong); }

/* En japonés el contador y las etiquetas piden algo más de aire. */
.lang-ja .reel-cell .tile-label { letter-spacing: .06em; }

/* ==========================================================================
   Servicio secundario: menor jerarquía (Character & Prop Design)
   ========================================================================== */
.service-note { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.service-row--secondary h3 { font-size: clamp(17px, 1.8vw, 21px); font-weight: 500; color: var(--ink-2); }
.service-row--secondary .service-num { color: var(--ink-3); }
.service-row--secondary p { font-size: 15.5px; }

/* ==========================================================================
   Sección en oscuro (el comparador). Mismo criterio que la barra del menú:
   en vez de reescribir cada regla, se redefinen aquí dentro las variables de
   color, y todo lo que hay debajo (título, párrafo, nombres de etapa, cuenta,
   marcas, ventanita y vídeos) hereda los colores claros solo.
   El degradado es el de la sección de videojuegos: naranja arriba a la
   izquierda, azul abajo a la derecha, sobre casi negro.
   ========================================================================== */
.bg-dark {
  --ink: #F2F5FF;
  --ink-2: #C6CFE4;
  --ink-3: #94A1BF;
  --line: rgba(255,255,255,.16);
  --paper: #0F1424;          /* el fondo de la ventanita del comparador */
  --paper-2: #12172A;        /* el fondo de los vídeos */
  --accent-strong: #FF8A4C;  /* el naranja claro, el que ya usa videojuegos */
  background: #0A0E18;
  color: #E8EDF8;
  position: relative;
  overflow: hidden;
}
.bg-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(760px 340px at 10% 0%, rgba(234,88,12,.17), transparent 70%),
    radial-gradient(620px 320px at 94% 100%, rgba(22,82,240,.22), transparent 72%);
}
.bg-dark > .container { position: relative; z-index: 1; }
/* El "eyebrow" del tema es azul y el azul sobre negro no se lee: en oscuro va en naranja. */
.bg-dark .eyebrow { color: #FF8A4C; }
/* La pastilla "Compo" era clara con letra naranja oscura: sobre negro se invierte. */
.bg-dark .stage-tag { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #FF9A66; }
/* La pista del deslizador, sin recorrer, desaparecía sobre el fondo oscuro. */
.bg-dark .stages-bar input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 100px; background: rgba(255,255,255,.18);
}
.bg-dark .stages-bar input[type=range]::-moz-range-track {
  height: 6px; border-radius: 100px; background: rgba(255,255,255,.18);
}

/* ==========================================================================
   Comparador de etapas: el MISMO cuadro en LO, Genga y Shiage
   ========================================================================== */
/* Tope de crecimiento del comparador. Las tres imágenes son 666x396 nativas:
   por debajo de eso se ven nítidas, y como el navegador las estira en pantallas
   HiDPI, cuanto menos crezcan menos se nota. 500 = 24 % menos que antes.       */
.stages { --stages-w: 500px; --track: 240px; max-width: var(--stages-w); margin-inline: auto; }
.stages-frame { position: relative; aspect-ratio: 333 / 198; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--paper); border: 1px solid var(--line); }
.stages-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; }
.stages-frame img.is-on { opacity: 1; }
/* La barra y las marcas comparten rejilla y ancho: así LO/Rough, Genga y Shiage
   caen exactamente en los extremos y el centro del recorrido del deslizador.
   El recorrido se acorta a 240 px: menos distancia que arrastrar con el ratón.  */
.stages-bar, .stages-ticks { display: grid; grid-template-columns: 1fr var(--track) 1fr; gap: 16px; }
.stages-bar { align-items: center; margin-top: 22px; }
.stages-bar input[type=range] { width: 100%; height: 24px; accent-color: var(--accent); }
.stage-name { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--accent-strong); }
.stage-count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); text-align: right; }
.stages-ticks { margin-top: 6px; font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: .04em; }
.stages-ticks-in { grid-column: 2; display: flex; justify-content: space-between; }

/* Pista sobre el deslizador. Antes no quedaba claro que hubiera que arrastrarlo:
   el texto de la sección decía "arrastra el mismo cuadro", pero ahí arriba, no
   sobre la barra. Va con una flecha que se mueve hacia la derecha y vuelve. */
.stages-hint {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 20px 0 0; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--accent-strong);
}
.stages-hint .hint-arrow { font-size: 15px; line-height: 1; animation: abugart-nudge 2.8s cubic-bezier(.4,0,.2,1) infinite; }
/* Con la pista encima, la barra no necesita tanto aire. */
.stages-hint + .stages-bar { margin-top: 12px; }
@keyframes abugart-nudge {
  0%, 100% { transform: translateX(0); opacity: .72; }
  50%      { transform: translateX(7px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .stages-hint .hint-arrow { animation: none; } }

/* Compo: el plano terminado, en movimiento */
.compo { margin-top: clamp(34px, 4.5vw, 60px); display: grid; grid-template-columns: 1fr 1.25fr;
  gap: clamp(20px, 3vw, 44px); align-items: center; }
.compo-head p { color: var(--ink-2); margin-top: 12px; }
.stage-tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-strong); background: var(--accent-050);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, #fff); padding: 5px 11px; border-radius: 100px; }
.compo-video { width: 100%; max-width: 720px; display: block; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--paper-2); }

/* Sección "En movimiento": el layout ya animado */
.motion { margin: 0; max-width: 720px; margin-inline: auto; }
.motion video { width: 100%; display: block; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--paper-2); }
.motion figcaption { margin-top: 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }

@media (max-width: 820px) {
  .compo { grid-template-columns: 1fr; }
  .stages-bar { grid-template-columns: 1fr auto; }
  .stages-bar input[type=range] { grid-column: 1 / -1; width: var(--track); max-width: 100%; justify-self: center; }
  .stages-ticks { grid-template-columns: 1fr; }
  .stages-ticks-in { grid-column: 1; width: var(--track); max-width: 100%; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) { .stages-frame img { transition: none !important; } }

/* En móvil el hero se apila y el recuadro de videos tapa la hoja: se sube
   arriba del todo, centrada y detrás del texto, para que la parte dibujada
   asome por encima del recuadro.                                            */
@media (max-width: 820px) {
  .hero-sheet      { left: 50%; right: auto; top: -2%; bottom: auto; width: 152%; transform: translateX(-50%) rotate(-4deg); }
  .hero-sheet--br  { left: 50%; right: auto; top: -2%; bottom: auto; width: 152%; transform: translateX(-50%) rotate(4deg); }
  .hero-sheet--col { left: 50%; right: auto; top: -2%; bottom: auto; width: 136%; transform: translateX(-50%) rotate(-3deg); }
}

/* ==========================================================================
   Videojuegos: sección propia, en oscuro, para que no se lea como un añadido.
   ========================================================================== */
.games { background: #0A0E18; color: #E8EDF8; position: relative; overflow: hidden; }
.games::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(760px 340px at 10% 0%, rgba(234,88,12,.17), transparent 70%),
    radial-gradient(620px 320px at 94% 100%, rgba(22,82,240,.22), transparent 72%);
}
.games > .container { position: relative; z-index: 1; }
.games-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(28px, 5vw, 68px); align-items: center; }
.games .eyebrow { color: #FF8A4C; }
.games h2 { color: #FFF; margin-top: 16px; font-size: clamp(27px, 3.5vw, 43px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.games-text { margin-top: 20px; max-width: 56ch; font-size: 16.5px; line-height: 1.62; color: #A9B6D2; }
.games .btn { margin-top: 28px; }
.games-list { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.games-list li {
  position: relative; padding: 15px 20px 15px 48px; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.035);
  font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .05em; color: #DCE4F4;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
/* La marca de cada apartado es otra vez la ranura del papel. */
.games-list li::before {
  content: ""; position: absolute; left: 20px; top: 50%; width: 15px; height: 5px;
  transform: translateY(-50%); border-radius: 100px; background: var(--accent);
}
.games-list li:hover { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.065); transform: translateX(4px); }
@media (max-width: 900px) { .games-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Créditos: la fila se comporta como una baraja de naipes.
   En reposo las portadas se ven claras y un poco encimadas; al pasar el
   cursor, la que lo recibe se aparta, se pone a todo color y crece.
   Solo cambia esa: las demás no se apagan.
   ========================================================================== */
.credits { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0 0 8px; }
.credit {
  position: relative; width: clamp(132px, 16.5%, 186px);
  transition: transform .42s var(--ease), filter .42s var(--ease);
  /* En reposo: claras, no a todo color. */
  filter: saturate(.12) brightness(1.06) contrast(.95);
}
/* La baraja: cada tarjeta se mete un poco debajo de la anterior. */
.credit + .credit { margin-left: -24px; }
.credit figure { margin: 0; }
.credit img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  background: var(--paper-2); transition: box-shadow .42s var(--ease); }
/* El pie de foto reserva el ancho que le roba el solape, para que dos títulos
   vecinos no se monten uno sobre otro. */
.credit figcaption { margin-top: 11px; padding-right: 24px; }
.credit figcaption strong { display: block; font-size: 13px; line-height: 1.32; font-weight: 600; }
.credit figcaption span { display: block; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .02em; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }
.credit .credit-year { margin-top: 1px; }

/* A todo color y fuera de la baraja: solo la que recibe el cursor. */
.credit:hover, .credit:focus-within { filter: none; transform: translateY(-12px) scale(1.13); z-index: 6; }
.credit:hover img, .credit:focus-within img { box-shadow: var(--shadow-md); }
/* Las que quedan a la derecha se apartan para que la baraja se abra. */
.credit:hover ~ .credit { transform: translateX(26px); }
/* Y las de la izquierda, que no tienen selector de hermanos hacia atrás. */
.credits:has(.credit:nth-child(2):hover) .credit:nth-child(1),
.credits:has(.credit:nth-child(3):hover) .credit:nth-child(1),
.credits:has(.credit:nth-child(3):hover) .credit:nth-child(2),
.credits:has(.credit:nth-child(4):hover) .credit:nth-child(1),
.credits:has(.credit:nth-child(4):hover) .credit:nth-child(2),
.credits:has(.credit:nth-child(4):hover) .credit:nth-child(3),
.credits:has(.credit:nth-child(5):hover) .credit:nth-child(1),
.credits:has(.credit:nth-child(5):hover) .credit:nth-child(2),
.credits:has(.credit:nth-child(5):hover) .credit:nth-child(3),
.credits:has(.credit:nth-child(5):hover) .credit:nth-child(4) { transform: translateX(-26px); }

@media (max-width: 1100px) { .steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) {
  .credits { gap: 14px; padding-bottom: 0; }
  .credit { width: clamp(120px, 30%, 170px); }
  .credit + .credit { margin-left: 0; }
  .credit figcaption { padding-right: 0; }
  .credit, .credit:hover, .credit:focus-within, .credit:hover ~ .credit { transform: none; }
}
/* Donde no hay cursor (táctil) las portadas van a todo color. */
@media (hover: none) { .credit { filter: none; } }
@media (prefers-reduced-motion: reduce) {
  .credit, .credit:hover, .credit:focus-within, .credit:hover ~ .credit { transform: none !important; transition: none !important; }
}

/* ==========================================================================
   Mini formulario de solicitud (página de contacto).
   Sin plugins: lo recoge inc/solicitudes.php y queda guardado en el panel.
   ========================================================================== */
.sol { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper);
  box-shadow: var(--shadow-sm); padding: clamp(22px, 3vw, 34px); }
.sol-head h2 { margin-top: 12px; font-size: clamp(21px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.02em; }
.sol-head p { margin-top: 10px; max-width: 46ch; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }

.sol-aviso { margin-top: 20px; padding: 13px 16px; border: 1px solid; border-radius: var(--radius); font-size: 14.5px; }
.sol-aviso--ok  { border-color: rgba(31,157,85,.32); background: rgba(31,157,85,.07); color: #14663A; }
.sol-aviso--err { border-color: color-mix(in srgb, var(--accent) 34%, transparent); background: var(--accent-050); color: var(--accent-strong); }

.sol-form { display: grid; gap: 24px; margin-top: 24px; }
/* El campo trampa: fuera de la vista, pero dentro del formulario. */
.sol-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sol-campo { border: 0; margin: 0; padding: 0; }
.sol-campo legend, .sol-etiqueta { display: block; padding-bottom: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); }

.sol-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.sol-ops input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sol-ops label { display: inline-flex; align-items: center; padding: 9px 15px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 100px; background: var(--paper);
  font-size: 13.5px; color: var(--ink-2);
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease); }
.sol-ops label:hover { border-color: var(--ink-3); color: var(--ink); }
.sol-ops input:checked + label { border-color: var(--accent); background: var(--accent-050);
  color: var(--accent-strong); font-weight: 600; }
.sol-ops input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; }
.sol-ops--dos { display: grid; grid-template-columns: 1fr 1fr; }
.sol-ops--dos label { justify-content: center; padding: 13px 15px; border-radius: var(--radius); }

/* Las opciones cambian según lo que pidan, y no solo la cantidad: en anime las
   etapas son otras y el material se cuenta en cortes; en un juego, en segundos.
   Se resuelve con :has(), sin JavaScript. */
.sol-juego { display: none; }
.sol-form:has(#sol-tipo-juego:checked) .sol-anime { display: none; }
.sol-form:has(#sol-tipo-juego:checked) .sol-juego { display: flex; }

/* El rótulo del campo que cambia de nombre según la categoría. */
.sol-lbl-juego { display: none; }
.sol-form:has(#sol-tipo-juego:checked) .sol-lbl-anime { display: none; }
.sol-form:has(#sol-tipo-juego:checked) .sol-lbl-juego { display: inline; }

.sol-input, .sol-area { width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 15px; }
.sol-input:focus, .sol-area:focus { outline: none; border-color: var(--blue);
  background: var(--paper); box-shadow: 0 0 0 3px rgba(22,82,240,.16); }
.sol-area { min-height: 92px; resize: vertical; }

/* Aclaración bajo un campo: para decir, por ejemplo, que se pide la cuenta de X
   y no un nombre suelto. */
.sol-ayuda { margin-top: 7px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

.sol-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.sol-privacidad { max-width: 34ch; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

@media (max-width: 620px) {
  .sol-ops--dos { grid-template-columns: 1fr; }
  .sol-pie .btn { width: 100%; justify-content: center; }
}