/* =========================================================
   FER CARBALLO — Portfolio
   Estética: manga vintage de imprenta japonesa (riso print)
   ========================================================= */

:root {
  /* --- Paleta extraída de las referencias --- */
  --paper:        #ECE3CC;  /* fondo papel envejecido */
  --paper-deep:   #E2D7BB;  /* fondo alterno */
  --ink:          #1C1A17;  /* tinta negra (líneas manga) */
  --ink-soft:     #3A352D;

  --ochre:        #E0A23B;  /* mostaza (gi de Goku) */
  --coral:        #E0584A;  /* rojo título DRAGON BALL */
  --blue:         #6E93A6;  /* azul polvoriento */
  --sage:         #9CB492;  /* verde salvia */
  --teal:         #5FA8A0;
  --pink:         #E2A6AE;

  /* --- Tokens --- */
  --border:       3px solid var(--ink);
  --border-thick: 5px solid var(--ink);
  --shadow-hard:  6px 6px 0 var(--ink);
  --shadow-soft:  4px 4px 0 var(--ink);
  --radius:       2px;

  --font-display: 'Anton', sans-serif;
  --font-logo:    'Luckiest Guy', 'Anton', sans-serif;  /* lettering display estilo DB (hero + títulos) */
  --font-body:    'Space Grotesk', sans-serif;
  --font-kana:    'Noto Sans JP', sans-serif;

  --maxw: 1320px;
}

/* --- Reset --- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
  position: relative;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* =========================================================
   TEXTURAS DE FONDO — relieve de papel + grano + halftone
   ========================================================= */
/* Relieve sutil de papel prensado: ruido fractal iluminado en diagonal
   (feDiffuseLighting) → simula la fibra/tacto del papel riso envejecido. */
.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' seed='7' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='1.5' diffuseConstant='1.05' result='l'%3E%3CfeDistantLight azimuth='235' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}
/* Grano fino de impresión, por encima del relieve. */
.paper-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.3;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.45'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.halftone-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  background-image: radial-gradient(var(--ink) 1px, transparent 1.4px);
  background-size: 6px 6px;
}

/* Contenido por encima de texturas (excluye overlays y kana fijos) */
body > *:not(.paper-grain):not(.halftone-overlay):not(.side-kana):not(.read-progress) { position: relative; z-index: 2; }

/* =========================================================
   TEXTO VERTICAL DECORATIVO EN LOS COSTADOS
   ========================================================= */
.side-kana {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(0.85rem, 1vw, 1.15rem);
  letter-spacing: 0.22em;
  color: var(--ink);
  opacity: 0.3;
  z-index: 3;
  pointer-events: none;
}
.side-kana--left  { left: clamp(8px, 2vw, 40px); }
.side-kana--right { right: clamp(8px, 2vw, 40px); }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px clamp(20px, 5vw, 60px);
  background: var(--paper);
  border-bottom: var(--border-thick);
}
.nav__brand { display: flex; align-items: center; gap: 10px; }
.nav__logo {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--paper);
  background: var(--coral);
  border: var(--border);
  padding: 2px 12px;
  box-shadow: 3px 3px 0 var(--ink);
  letter-spacing: 1px;
}
.nav__kana { font-family: var(--font-kana); font-weight: 700; font-size: 0.9rem; }

.nav__links { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 30px); }
.nav__links a {
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  position: relative;
  padding: 4px 0;
}
.nav__links a:not(.nav__cta)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 3px;
  background: var(--coral);
  transition: width 0.2s ease;
}
.nav__links a:not(.nav__cta):hover::after { width: 100%; }

.nav__cta {
  background: var(--ink);
  color: var(--paper) !important;
  padding: 8px 16px !important;
  border: var(--border);
  box-shadow: 3px 3px 0 var(--coral);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.nav__cta:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--coral); }

/* =========================================================
   BOTONES
   ========================================================= */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  padding: 13px 26px;
  border: var(--border);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-hard); }
.btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.btn--primary { background: var(--coral); color: var(--paper); }
.btn--ghost   { background: var(--paper); color: var(--ink); }
.btn--lg { font-size: 1.05rem; padding: 16px 34px; }

/* =========================================================
   HERO — PÁGINA DE MANGA (viñetas + gutters)
   ========================================================= */
.manga {
  padding: clamp(20px, 4vw, 44px) clamp(16px, 4vw, 50px);
  background:
    repeating-linear-gradient(135deg, transparent 0 28px, rgba(110,147,166,0.05) 28px 29px),
    var(--paper-deep);
  border-bottom: var(--border-thick);
}

/* La "página": fondo tinta = calles negras del manga.
   Ancho fluido que llena pantallas grandes/ultrawide y se topa en 1640px. */
.manga__page {
  width: min(1640px, 100%);
  max-width: none;
  margin: 0 auto;
  background: var(--ink);
  border: var(--border-thick);
  box-shadow: 12px 12px 0 var(--ink);
  padding: 6px;
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr 1.08fr;
  grid-template-areas:
    "title  title   feature"
    "navA   navB    feature"
    "navC   navD    feature"
    "social social  feature";
}

/* Viñeta base */
.mpanel {
  position: relative;
  background: var(--paper);
  padding: clamp(16px, 2vw, 24px);
  overflow: hidden;
}
.mpanel__tag {
  display: inline-block;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  background: var(--ink);
  color: var(--paper);
  padding: 3px 10px;
  margin-bottom: 10px;
}
.mpanel__tag--accent { background: var(--coral); }
.mpanel__kana {
  display: block;
  font-family: var(--font-kana);
  font-weight: 900;
  color: var(--blue);
  letter-spacing: 0.3em;
  font-size: 0.95rem;
}

/* ---- Viñeta título ---- */
.mpanel--title {
  grid-area: title;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 300px;
}
.manga-title {
  font-family: var(--font-display);
  line-height: 0.86;
  letter-spacing: 2px;
}
.manga-title__l1,
.manga-title__l2 { display: block; }
.manga-title__l1 {
  font-size: clamp(2.8rem, 8vw, 5.4rem);
  color: var(--ink);
  text-shadow: 4px 4px 0 var(--ochre);
}
.manga-title__l2 {
  font-size: clamp(2.8rem, 8vw, 5.4rem);
  color: var(--coral);
  text-shadow: 4px 4px 0 var(--ink);
}
.manga-name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  letter-spacing: 3px;
  margin-top: 12px;
}
.manga-role { font-weight: 600; color: var(--ink-soft); }
.manga-role strong { color: var(--coral); }
.manga-actions { margin-top: 18px; }

/* Globo de diálogo */
.speech {
  position: absolute;
  right: 14px; bottom: 14px;
  max-width: 175px;
  background: var(--paper);
  border: var(--border);
  border-radius: 16px;
  padding: 8px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: var(--shadow-soft);
  transform: rotate(2deg);
  animation: speechPop 4s ease-in-out infinite;
  z-index: 6;
}
.speech--b { right: 14px; bottom: 14px; background: var(--ochre); transform: rotate(-3deg); }
.speech--c {
  position: static;
  display: inline-block;
  margin-top: 20px;
  background: var(--paper);
  color: var(--ink);
  transform: rotate(-2deg);
}
.speech::after {
  content: '';
  position: absolute;
  left: 22px; bottom: -14px;
  border: 8px solid transparent;
  border-top-color: var(--ink);
}
.speech::before {
  content: '';
  position: absolute;
  left: 24px; bottom: -9px;
  border: 6px solid transparent;
  border-top-color: var(--paper);
  z-index: 1;
}

/* ---- Capa de FX en movimiento ---- */
.fxlayer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.manga-title, .manga-name, .manga-role, .manga-actions,
.mpanel__kana, .mpanel__tag, .gradient-title,
.kana-bubbles, .subscribe { position: relative; z-index: 2; }

.fx--speed {
  position: absolute;
  inset: -20% -60% -20% 40%;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    transparent 0deg 2.2deg, rgba(28,26,23,0.06) 2.2deg 4deg);
  animation: speedSpin 32s linear infinite;
}
.fx--cloud {
  position: absolute;
  top: 16px; right: 6%;
  width: clamp(90px, 13vw, 130px);
  animation: cloudDrift 11s ease-in-out infinite;
}
.fx--bird {
  position: absolute;
  top: 12%;
  width: 56px;
  animation: birdFly 14s linear infinite;
}
.fx--ball {
  position: absolute;
  animation: ballBob 5s ease-in-out infinite;
}
.fx--ball-1 { bottom: 16%; right: 10%; animation-delay: 0s; }
.fx--ball-2 { bottom: 30%; right: 26%; animation-delay: 0.8s; }
.fx--ball-3 { top: 30%; right: 4%; animation-delay: 1.6s; }
.ball {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff7e0 0 14%, var(--ochre) 38%, #c97f1f 100%);
  border: 3px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(28,26,23,0.4);
}
.ball i {
  font-style: normal;
  font-size: 0.5rem;
  letter-spacing: -1px;
  color: var(--coral);
  text-shadow: 0 0 1px var(--ink);
}

/* ---- Viñeta destacado / carrusel ---- */
.mpanel--feature {
  grid-area: feature;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.carousel {
  position: relative;
  flex: 1;
  margin-top: 10px;
  overflow: hidden;
}
.carousel__track { display: flex; height: 100%; transition: transform 0.5s cubic-bezier(.6,.1,.2,1); }
.cslide {
  flex: 0 0 100%;
  display: flex;
  flex-direction: column;
  padding: 4px;
}
.cslide__thumb {
  flex: 1;
  min-height: 160px;
  display: grid;
  place-items: center;
  border: var(--border);
  margin-bottom: 12px;
}
.cslide[data-color="blue"] .cslide__thumb { background: repeating-linear-gradient(45deg, var(--blue) 0 14px, var(--teal) 14px 28px); }
.cslide[data-color="coral"] .cslide__thumb { background: repeating-linear-gradient(45deg, var(--coral) 0 14px, var(--ochre) 14px 28px); }
.cslide[data-color="sage"] .cslide__thumb { background: repeating-linear-gradient(45deg, var(--sage) 0 14px, var(--teal) 14px 28px); }
.cslide__play {
  width: 60px; height: 60px;
  display: grid; place-items: center;
  background: var(--paper);
  color: var(--ink);
  border: var(--border);
  border-radius: 50%;
  font-size: 1.4rem;
  box-shadow: 3px 3px 0 var(--ink);
  animation: playPulse 2.4s ease-in-out infinite;
}
.cslide h3 { font-size: 1.15rem; line-height: 1.1; }
.cslide__tag {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--coral);
}
.carousel__arrow {
  position: absolute;
  top: 38%;
  width: 34px; height: 34px;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--paper);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s ease;
}
.carousel__arrow:hover { background: var(--coral); }
.carousel__arrow--prev { left: 4px; }
.carousel__arrow--next { right: 4px; }
.carousel__dots {
  display: flex;
  gap: 7px;
  justify-content: center;
  margin-top: 10px;
}
.carousel__dots button {
  width: 11px; height: 11px;
  border: 2px solid var(--ink);
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
.carousel__dots button.is-active { background: var(--coral); }

/* ---- Viñetas navegables ---- */
.mpanel--nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
  transition: background 0.18s ease, transform 0.12s ease;
}
.nav-a { grid-area: navA; }
.nav-b { grid-area: navB; }
.nav-c { grid-area: navC; }
.nav-d { grid-area: navD; }
.mpanel--nav:hover { background: var(--ochre); }
.nav-b:hover, .nav-c:hover { background: var(--sage); }
.nav-num {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--coral);
  line-height: 1;
}
.nav-kana {
  position: absolute;
  top: 14px; right: 14px;
  font-family: var(--font-kana);
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--ink);
  opacity: 0.35;
}
.nav-label {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 1px;
}
.nav-go {
  position: absolute;
  bottom: 14px; right: 14px;
  font-size: 1.4rem;
  font-weight: 700;
  transition: transform 0.18s ease;
}
.mpanel--nav:hover .nav-go { transform: translateX(6px); }

/* ---- Mini-viñetas redes (compactas) ---- */
.mpanel--social {
  grid-area: social;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--blue);
  padding-top: 12px;
  padding-bottom: 12px;
}
.social__title {
  font-family: var(--font-kana);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--paper);
  text-transform: uppercase;
  white-space: nowrap;
}
.social__grid {
  display: flex;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}
.soc {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  color: var(--ink);
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.soc svg { width: 50%; height: 50%; }
.soc:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.soc--yt:hover { background: var(--coral); color: var(--paper); }
.soc--ig:hover { background: var(--ochre); color: var(--ink); }
.soc--tt:hover { background: var(--ink); color: var(--paper); }
.soc--gh:hover { background: var(--ink); color: var(--paper); }
.soc--x:hover  { background: var(--ink); color: var(--paper); }

/* ---- Animaciones ---- */
@keyframes cloudDrift {
  0%, 100% { transform: translate(0,0) rotate(-1deg); }
  50%      { transform: translate(-26px, 10px) rotate(1deg); }
}
@keyframes ballBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(8deg); }
}
@keyframes birdFly {
  0%   { transform: translateX(-80px) translateY(0); opacity: 0; }
  8%   { opacity: 0.8; }
  50%  { transform: translateX(40vw) translateY(-18px); opacity: 0.8; }
  92%  { opacity: 0.8; }
  100% { transform: translateX(80vw) translateY(6px); opacity: 0; }
}
@keyframes speedSpin { to { transform: rotate(360deg); } }
@keyframes playPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
@keyframes speechPop {
  0%, 100% { transform: rotate(2deg) scale(1); }
  50%      { transform: rotate(2deg) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .fx--cloud, .fx--ball, .fx--bird, .fx--speed,
  .cslide__play, .speech { animation: none !important; }
}

/* =========================================================
   SECTIONS GENÉRICAS
   ========================================================= */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(50px, 8vw, 90px) clamp(20px, 5vw, 40px);
}
.section--alt {
  max-width: none;
  background: var(--paper-deep);
  border-top: var(--border-thick);
  border-bottom: var(--border-thick);
}
.section--alt > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

.section__head { margin-bottom: 40px; }
.section__kana {
  display: block;
  font-family: var(--font-kana);
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--coral);
  letter-spacing: 0.3em;
  margin-bottom: 4px;
}
.section__title {
  font-family: var(--font-logo);
  font-size: clamp(2rem, 5.6vw, 3.3rem);
  letter-spacing: 1px;
  line-height: 1.05;
  display: inline-block;
  border-bottom: var(--border-thick);
  padding-bottom: 6px;
}
.section__sub { margin-top: 14px; color: var(--ink-soft); font-weight: 500; }
.section__cta { text-align: center; margin-top: 44px; }

/* Panel base reutilizable */
.panel {
  background: var(--paper);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  padding: clamp(22px, 3vw, 34px);
}

/* =========================================================
   SOBRE MÍ
   ========================================================= */
.about {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
  align-items: start;
}
.about__bio p { margin-bottom: 14px; }
.about__bio strong { color: var(--coral); }
.about__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.about__tags li {
  font-weight: 600;
  font-size: 0.78rem;
  background: var(--blue);
  color: var(--paper);
  border: 2px solid var(--ink);
  padding: 4px 10px;
}
.about__card { text-align: center; background: var(--ochre); }
.about__avatar {
  aspect-ratio: 1;
  background:
    radial-gradient(var(--ink) 1.4px, transparent 1.5px) 0 0 / 9px 9px,
    var(--paper);
  border: var(--border);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 2px;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 16px;
}
.about__cardname { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 2px; }
.about__cardrole { font-weight: 600; font-size: 0.85rem; margin-bottom: 14px; }
.about__social { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.about__social a {
  font-weight: 700;
  font-size: 0.75rem;
  background: var(--ink);
  color: var(--paper);
  padding: 5px 10px;
  transition: background 0.15s ease;
}
.about__social a:hover { background: var(--coral); }

/* =========================================================
   CONTENIDO / VIDEOS
   ========================================================= */
.videos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.video-card {
  background: var(--paper);
  border: var(--border);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.video-card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hard); }
.video-card__thumb {
  position: relative;
  aspect-ratio: 16/9;
  background:
    repeating-linear-gradient(45deg, var(--blue) 0 14px, var(--teal) 14px 28px);
  border-bottom: var(--border);
  display: grid;
  place-items: center;
}
.video-card__play {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  background: var(--coral);
  color: var(--paper);
  border: var(--border);
  border-radius: 50%;
  font-size: 1.2rem;
  box-shadow: 3px 3px 0 var(--ink);
}
.video-card__dur {
  position: absolute;
  bottom: 8px; right: 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
}
.video-card h3 { font-size: 1.05rem; padding: 16px 16px 4px; }
.video-card p { padding: 0 16px; color: var(--ink-soft); font-size: 0.88rem; }
.video-card__meta {
  display: block;
  padding: 10px 16px 16px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
}

/* =========================================================
   SKILLS
   ========================================================= */
.skills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.skill-panel {
  position: relative;
  background: var(--paper);
  border: var(--border);
  box-shadow: var(--shadow-soft);
  padding: 26px 22px;
  transition: transform 0.14s ease;
}
.skill-panel:hover { transform: translateY(-5px); }
.skill-panel--accent { background: var(--sage); }
.skill-panel__num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--coral);
  line-height: 1;
}
.skill-panel h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 1px;
  margin: 8px 0 10px;
}
.skill-panel p { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 14px; }
.skill-panel ul { list-style: none; }
.skill-panel li {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 0;
  border-top: 2px dotted var(--ink);
}

/* =========================================================
   PROYECTOS
   ========================================================= */
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.project {
  background: var(--paper);
  border: var(--border);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.project:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hard); }
.project__img {
  aspect-ratio: 4/3;
  border-bottom: var(--border);
  display: grid;
  place-items: center;
  background:
    radial-gradient(var(--ink) 1.3px, transparent 1.4px) 0 0 / 10px 10px,
    var(--pink);
  font-family: var(--font-display);
  letter-spacing: 2px;
  color: var(--ink);
}
.project__img::after { content: attr(data-label); }
.project:nth-child(2) .project__img { background:
    radial-gradient(var(--ink) 1.3px, transparent 1.4px) 0 0 / 10px 10px, var(--ochre); }
.project:nth-child(3) .project__img { background:
    radial-gradient(var(--ink) 1.3px, transparent 1.4px) 0 0 / 10px 10px, var(--teal); }
.project__body { padding: 20px; }
.project__body h3 { font-size: 1.15rem; margin-bottom: 6px; }
.project__body p { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 14px; }
.project__tech { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.project__tech span {
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--ink);
  color: var(--paper);
  padding: 3px 8px;
}
.project__link { font-weight: 700; color: var(--coral); }
.project__link:hover { text-decoration: underline; }

/* =========================================================
   CONTACTO
   ========================================================= */
.contact { display: flex; justify-content: center; }
.contact__panel {
  text-align: center;
  background: var(--ink);
  color: var(--paper);
  border: var(--border-thick);
  box-shadow: 10px 10px 0 var(--coral);
  padding: clamp(40px, 6vw, 70px);
  max-width: 720px;
  width: 100%;
}
.contact__panel .section__kana { color: var(--ochre); }
.contact__title {
  font-family: var(--font-logo);
  font-size: clamp(1.9rem, 5.6vw, 3.2rem);
  letter-spacing: 0;
  margin: 6px 0 12px;
}
.contact__panel p { color: #d8cfb8; margin-bottom: 24px; }
.contact__social { display: flex; justify-content: center; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.contact__social a {
  font-weight: 700;
  font-size: 0.8rem;
  border: 2px solid var(--paper);
  padding: 6px 14px;
  transition: background 0.15s ease, color 0.15s ease;
}
.contact__social a:hover { background: var(--paper); color: var(--ink); }
.contact__wa {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ochre);
  border-bottom: 2px solid var(--ochre);
  padding-bottom: 2px;
  transition: opacity 0.15s ease;
}
.contact__wa:hover { opacity: 0.7; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 26px clamp(20px, 5vw, 60px);
  background: var(--paper-deep);
  border-top: var(--border-thick);
}
.footer__logo { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 2px; }
.footer__kana { font-family: var(--font-kana); font-weight: 700; font-size: 0.85rem; color: var(--blue); }
.footer__copy { font-size: 0.78rem; color: var(--ink-soft); }

/* =========================================================
   ANIMACIÓN DE ENTRADA
   ========================================================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* =========================================================
   NUEVOS COMPONENTES (YouTube-first)
   ========================================================= */

/* ---- Título con degradado + contorno limpio (sin colisiones) ---- */
.gradient-title {
  font-family: var(--font-logo);
  line-height: 1.04;
  letter-spacing: 0;
}
.gradient-title span {
  display: block;
  font-size: clamp(1.9rem, 5vw, 4rem);
  /* paint-order: stroke fill → el stroke se pinta primero (queda detrás),
     el fill (degradé) se pinta encima → contorno limpio SIN invadir el interior del glifo. */
  background: linear-gradient(180deg, #F5D060 0%, #E0A23B 42%, #E05840 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--ochre);
  -webkit-text-stroke: 2.5px var(--ink);
  paint-order: stroke fill;
  /* Solo usamos text-shadow para la extrusión 3D — el outline ya no va aquí. */
  text-shadow:
    3px 3px 0 var(--ink),
    4px 4px 0 var(--ink),
    5px 5px 0 var(--ink),
    7px 7px 0 rgba(28, 26, 23, 0.35);
}

/* ---- Layout del HERO: info (izq) · foto (centro, protagonista) · tiras (der) · chips (abajo) ---- */
.manga__page--hero {
  grid-template-columns: 1fr 1.15fr 1fr;
  grid-template-areas:
    "title  photo  strips"
    "chips  chips  chips";
}

/* Viñeta de la foto (completa, sin recortar) */
.mpanel--photo {
  grid-area: photo;
  display: flex;
  flex-direction: column;
  min-height: 460px;
  background:
    radial-gradient(var(--ink) 1px, transparent 1.3px) 0 0 / 9px 9px,
    var(--paper-deep);
}
.hero-photo {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  margin-top: 10px;
  padding: 6px;
}
/* El <picture> no debe romper el grid: el <img> sigue siendo el hijo efectivo */
.hero-photo > picture { display: contents; }
.hero-photo__img {
  max-width: 130%;
  max-height: 820px;
  height: 110%;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(15px 17px 0 rgba(54, 50, 44, 0.22));
}
.hero-photo__ph {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink-soft);
  border: 3px dashed var(--ink);
  border-radius: 6px;
  padding: 30px 22px;
  background: var(--paper);
}
.hero-photo.is-missing .hero-photo__ph { display: flex; }
.hero-photo__icon { font-size: 2.4rem; }
.hero-photo__ph code {
  font-family: var(--font-body);
  background: var(--ink);
  color: var(--paper);
  padding: 2px 6px;
  font-weight: 700;
}

/* Carrusel panorámico 16:9 minimizado */
.mpanel--pano { grid-area: pano; display: flex; flex-direction: column; }
.carousel--pano { margin-top: 8px; }
.carousel--pano .cslide { padding: 0; }
.carousel--pano .cslide__thumb {
  aspect-ratio: 16 / 9;
  min-height: 0;
  margin-bottom: 0;
  position: relative;
}
.cslide__dur {
  position: absolute;
  top: 8px; right: 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
  z-index: 2;
}
.cslide__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: rgba(28,26,23,0.84);
  border-top: 2px solid var(--ink);
  text-align: left;
}
.cslide__bar b { color: var(--paper); font-size: 1rem; line-height: 1.15; }
.cslide__bar span { color: var(--ochre); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; }

/* Tiras / listones clickeables (escenas de cómic, lado derecho) */
.strips {
  grid-area: strips;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.strip {
  position: relative;
  flex: 1;
  min-height: 64px;
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.strip:hover { transform: translateX(-5px); box-shadow: -6px 6px 0 var(--ink); z-index: 2; }
/* Escena 16:9 (lado izquierdo de cada listón) */
.strip__scene {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  border-right: var(--border);
}
.strip__icon { font-size: 1.6rem; color: var(--ink); }
.strip__num {
  position: absolute;
  top: 5px; left: 8px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--ink);
  opacity: 0.5;
}
.strip__label {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  letter-spacing: 1px;
  padding-left: 16px;
  line-height: 1;
}
.strip__go {
  padding: 0 18px;
  font-size: 1.4rem;
  font-weight: 700;
  transition: transform 0.15s ease;
}
.strip:hover .strip__go { transform: translateX(5px); }
/* Colores de escena por listón (con trama halftone) */
.strip--1 .strip__scene { background: radial-gradient(rgba(28,26,23,0.5) 1px, transparent 1.4px) 0 0 / 6px 6px, var(--coral); }
.strip--2 .strip__scene { background: radial-gradient(rgba(28,26,23,0.5) 1px, transparent 1.4px) 0 0 / 6px 6px, var(--blue); }
.strip--3 .strip__scene { background: radial-gradient(rgba(28,26,23,0.5) 1px, transparent 1.4px) 0 0 / 6px 6px, var(--sage); }
.strip--4 .strip__scene { background: radial-gradient(rgba(28,26,23,0.5) 1px, transparent 1.4px) 0 0 / 6px 6px, var(--ochre); }
.strip--5 .strip__scene { background: radial-gradient(rgba(28,26,23,0.5) 1px, transparent 1.4px) 0 0 / 6px 6px, var(--teal); }
/* Listón CTA destacado */
.strip--cta { background: var(--coral); color: var(--paper); }
.strip--cta .strip__scene { background: radial-gradient(rgba(236,227,204,0.4) 1px, transparent 1.4px) 0 0 / 6px 6px, var(--ink); border-right-color: var(--paper); }
.strip--cta .strip__icon { color: var(--ochre); }
.strip--cta .strip__num { color: var(--paper); opacity: 0.7; }
.strip--cta:hover { box-shadow: -6px 6px 0 var(--ink); }

/* Chips de categorías (estilo viñeta del mockup) */
.chips {
  grid-area: chips;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.chip {
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.6vw, 1.4rem);
  letter-spacing: 1px;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--paper), 4px 4px 0 var(--ink);
  padding: 14px 8px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.chip:hover { transform: translate(-2px,-2px); box-shadow: inset 0 0 0 2px var(--paper), 6px 6px 0 var(--ink); }
.chip--1:hover { background: var(--coral); color: var(--paper); }
.chip--2:hover { background: var(--ochre); }
.chip--3:hover { background: var(--blue); color: var(--paper); }
.chip--4:hover { background: var(--sage); }

/* Viñeta COMUNIDAD */
.mpanel--community {
  grid-area: community;
  display: flex;
  flex-direction: column;
  background: var(--ochre);
}
.community__body { margin-top: 8px; }
.community__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  letter-spacing: 2px;
  line-height: 1;
}
.community__sub { font-weight: 600; font-size: 0.9rem; margin-top: 4px; }
.mpanel--community .social__grid {
  margin-top: auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.social__label {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  width: 100%;
  margin-top: 10px;
}
.community__count {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 2px dashed var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
}
.community__count b { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 1px; }

/* ---- Katakana en burbujas ---- */
.kana-bubbles { display: flex; gap: 6px; margin-bottom: 12px; }
.kana-bubbles span {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-family: var(--font-kana);
  font-weight: 700;
  font-size: 0.8rem;
  background: var(--ochre);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 50%;
  box-shadow: 2px 2px 0 var(--ink);
}
.kana-bubbles span:nth-child(even) { background: var(--paper); }

/* ---- Barra de suscripción ---- */
.subscribe {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.subscribe__btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  background: var(--coral);
  color: var(--paper);
  border: var(--border);
  box-shadow: var(--shadow-soft);
  padding: 12px 24px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.subscribe__btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-hard); }
.subscribe__stats { display: flex; gap: 16px; }
.subscribe__stats span { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.subscribe__stats b { font-family: var(--font-display); font-size: 1.15rem; color: var(--blue); letter-spacing: 1px; }

/* ---- Onomatopeyas / SFX ---- */
.sfx {
  font-family: var(--font-display);
  letter-spacing: 1px;
  color: var(--coral);
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 rgba(28,26,23,0.25);
  transform: rotate(-8deg);
}
.sfx--new {
  position: absolute;
  top: 14px; right: 16px;
  font-family: var(--font-kana);
  font-size: 1.8rem;
  background: var(--ochre);
  color: var(--ink);
  -webkit-text-stroke: 0;
  padding: 2px 10px;
  border: var(--border);
  box-shadow: var(--shadow-soft);
  text-shadow: none;
  z-index: 5;
}
.sfx--inline { font-size: 1.5rem; align-self: center; }
.sfx--hi {
  position: absolute;
  top: -10px; right: 6%;
  font-size: 1.6rem;
  z-index: 5;
  animation: speechPop 3s ease-in-out infinite;
}

/* ---- Sección head en fila ---- */
.section__head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* ---- Video destacado (grande, ocupa 2 columnas) ---- */
.video-card--big { grid-column: span 2; }
.video-card--big h3 { font-size: 1.5rem; padding-top: 18px; }
.video-card--big p { font-size: 1rem; }
.video-card__thumb[data-c="coral"] { background: repeating-linear-gradient(45deg, var(--coral) 0 14px, var(--ochre) 14px 28px); }
.video-card__thumb[data-c="blue"]  { background: repeating-linear-gradient(45deg, var(--blue) 0 14px, var(--teal) 14px 28px); }
.video-card__thumb[data-c="sage"]  { background: repeating-linear-gradient(45deg, var(--sage) 0 14px, var(--teal) 14px 28px); }
.video-card__thumb[data-c="ochre"] { background: repeating-linear-gradient(45deg, var(--ochre) 0 14px, var(--paper-deep) 14px 28px); }
.video-card__thumb[data-c="teal"]  { background: repeating-linear-gradient(45deg, var(--teal) 0 14px, var(--blue) 14px 28px); }
.video-card__live {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--coral);
  color: var(--paper);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border: 2px solid var(--ink);
}

/* ---- Shorts / Reels (carrusel horizontal 9:16) ---- */
.shorts {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 6px 2px 18px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.short {
  flex: 0 0 auto;
  width: 190px;
  scroll-snap-align: start;
  cursor: pointer;
}
.short__thumb {
  position: relative;
  aspect-ratio: 9/16;
  border: var(--border);
  box-shadow: var(--shadow-soft);
  display: grid;
  place-items: center;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.short:hover .short__thumb { transform: translate(-3px,-3px); box-shadow: var(--shadow-hard); }
.short[data-c="coral"] .short__thumb { background: repeating-linear-gradient(135deg, var(--coral) 0 16px, var(--ochre) 16px 32px); }
.short[data-c="blue"]  .short__thumb { background: repeating-linear-gradient(135deg, var(--blue) 0 16px, var(--teal) 16px 32px); }
.short[data-c="sage"]  .short__thumb { background: repeating-linear-gradient(135deg, var(--sage) 0 16px, var(--teal) 16px 32px); }
.short[data-c="ochre"] .short__thumb { background: repeating-linear-gradient(135deg, var(--ochre) 0 16px, var(--paper) 16px 32px); }
.short[data-c="teal"]  .short__thumb { background: repeating-linear-gradient(135deg, var(--teal) 0 16px, var(--blue) 16px 32px); }
.short__play {
  width: 50px; height: 50px;
  display: grid; place-items: center;
  background: var(--paper);
  color: var(--ink);
  border: var(--border);
  border-radius: 50%;
  font-size: 1.2rem;
  box-shadow: 3px 3px 0 var(--ink);
}
.short__views {
  position: absolute;
  bottom: 8px; left: 8px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 7px;
}
.short p { margin-top: 10px; font-weight: 600; font-size: 0.9rem; line-height: 1.2; }
.shorts__hint { text-align: center; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); margin-top: 4px; }

/* ---- About: fotos polaroid ---- */
.about__photos { position: relative; min-height: 380px; }
.polaroid {
  background: #fbf7ec;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-hard);
  padding: 10px 10px 0;
}
.polaroid figcaption {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  text-align: center;
  padding: 8px 4px 10px;
}
.polaroid__img {
  aspect-ratio: 4/5;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 1px;
  color: var(--ink);
  background:
    radial-gradient(var(--ink) 1.3px, transparent 1.4px) 0 0 / 10px 10px,
    var(--blue);
}
.polaroid__img::after { content: attr(data-ph); }
.polaroid__img--alt  { background: radial-gradient(var(--ink) 1.3px, transparent 1.4px) 0 0 / 10px 10px, var(--ochre); }
.polaroid__img--alt2 { background: radial-gradient(var(--ink) 1.3px, transparent 1.4px) 0 0 / 10px 10px, var(--sage); }
.polaroid--main { position: relative; z-index: 2; width: 70%; transform: rotate(-4deg); }
.polaroid--mini { position: absolute; width: 38%; z-index: 3; }
.polaroid--m1 { top: 14%; right: 0; transform: rotate(6deg); }
.polaroid--m2 { bottom: 2%; right: 8%; transform: rotate(-7deg); z-index: 1; }

/* ---- El PLUS (dev/qa/devops, secundario) ---- */
.plus {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 56px) clamp(20px, 5vw, 40px);
  display: flex;
  gap: 24px;
  align-items: center;
}
.vtext {
  writing-mode: vertical-rl;
  font-family: var(--font-kana);
  font-weight: 900;
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  color: var(--coral);
  border-left: var(--border);
  padding-left: 12px;
}
.plus__inner { flex: 1; }
.plus__lead { font-family: var(--font-display); font-size: clamp(1.4rem, 3.5vw, 2rem); letter-spacing: 1px; }
.plus__lead strong { color: var(--coral); }
.plus__sub { color: var(--ink-soft); margin: 4px 0 16px; }
.plus__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.plus__chips span {
  font-weight: 700;
  font-size: 0.85rem;
  background: var(--paper);
  border: var(--border);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 8px 14px;
}
.plus__link { font-weight: 700; color: var(--coral); }
.plus__link:hover { text-decoration: underline; }
.about__note { margin-top: 16px; font-size: 0.9rem; color: var(--ink-soft); }
.about__note a { color: var(--coral); font-weight: 700; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .nav__links { gap: 12px; }
  .nav__links a:not(.nav__cta) { display: none; }
  .about { grid-template-columns: 1fr; }
  .videos, .projects { grid-template-columns: 1fr 1fr; }
  .skills { grid-template-columns: 1fr 1fr; }
  .side-kana { display: none; }
  .plus { flex-direction: column; align-items: flex-start; }
  .vtext { writing-mode: horizontal-tb; border-left: 0; border-top: var(--border); padding: 10px 0 0; }
  .about__photos { min-height: 420px; }

  /* MOBILE = "link hub" estilo Linktree: header con info + tiras (links) primero,
     y la foto + chips debajo (al hacer scroll) */
  .manga__page--hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "strips"
      "chips"
      "photo";
  }
  .mpanel--title { min-height: auto; }
  .mpanel--photo { min-height: 360px; order: 0; }
  .strip { min-height: 72px; }
}
@media (max-width: 560px) {
  .videos, .projects, .skills { grid-template-columns: 1fr; }
  .video-card--big { grid-column: span 1; }
  .chips { grid-template-columns: 1fr 1fr; }
  .speech--a, .speech--b { display: none; }
  .social__grid { gap: 6px; }
  .short { width: 150px; }

  /* --- Compactado del link hub para que entre en la primera pantalla --- */
  .mpanel--title { padding: 14px 16px; }
  .mpanel--title .fxlayer { display: none; }        /* sin nubes/esferas */
  .mpanel--title .subscribe { display: none; }       /* la tira 06 ya es SUSCRIBITE */
  .gradient-title { line-height: 0.98; }
  .gradient-title span { font-size: clamp(1.7rem, 9vw, 2.6rem); }
  .kana-bubbles { margin-bottom: 8px; }
  .kana-bubbles span { width: 22px; height: 22px; font-size: 0.72rem; }
  .manga-name { font-size: 0.95rem; }
  .mpanel__tag { font-size: 0.62rem; margin-bottom: 6px; }

  .strips { gap: 7px; }
  .strip { min-height: 54px; grid-template-columns: 92px 1fr auto; }
  .strip__label { font-size: 1.05rem; padding-left: 12px; }
  .strip__icon { font-size: 1.3rem; }
  .strip__go { padding: 0 14px; font-size: 1.2rem; }
}

/* =========================================================
   THUMBNAILS REALES DE YOUTUBE (integrados al estilo riso)
   ========================================================= */
.ytimg {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: saturate(0.92) contrast(1.05);
}
/* Tinte halftone por encima de la imagen para que combine con el papel */
.ytimg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(28,26,23,0.55) 1px, transparent 1.4px);
  background-size: 5px 5px;
  mix-blend-mode: multiply;
  opacity: 0.22;
  pointer-events: none;
  z-index: 1;
}
/* Contenido (play, duración, barra) por encima del tinte */
.ytimg > * { position: relative; z-index: 2; }

/* =========================================================
   EN MIS REDES (Instagram + TikTok en vivo)
   ========================================================= */
.redes-live { display: flex; flex-direction: column; gap: 40px; }
.redes-block__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 1px;
  margin-bottom: 16px;
  padding-bottom: 6px;
  border-bottom: var(--border);
  display: inline-block;
}

/* Grilla de Instagram (cuadrados estilo viñeta) */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ig-post {
  position: relative;
  aspect-ratio: 1;
  border: var(--border);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  background: var(--paper-deep);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.ig-post:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hard); }
.ig-post__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.92) contrast(1.05);
}
.ig-post__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(28,26,23,0.82);
  color: var(--paper);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.25;
  padding: 8px 10px;
  border-top: 2px solid var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ig-post__type {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 0.9rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 50%;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
}

@media (max-width: 900px) {
  .ig-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   EL LABORATORIO (BLOG) — índice tipo revista + lectura cómic
   ========================================================= */

/* Barra de progreso de lectura */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 5px;
  width: 0;
  background: var(--coral);
  border-bottom: 2px solid var(--ink);
  z-index: 100;
  transition: width 0.1s linear;
}

/* ---- Índice del blog (grid de "capítulos") ---- */
.blog-index { max-width: var(--maxw); }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: var(--border);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.blog-card:hover { transform: translate(-4px, -4px); box-shadow: 10px 10px 0 var(--ink); }
.blog-card__scene {
  position: relative;
  min-height: 120px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: var(--border);
  background: radial-gradient(rgba(28,26,23,0.5) 1px, transparent 1.4px) 0 0 / 7px 7px, var(--cover, var(--coral));
}
/* Color de portada compartido por tarjetas y por la portada del post */
.cover-coral { --cover: var(--coral); }
.cover-blue  { --cover: var(--blue); }
.cover-sage  { --cover: var(--sage); }
.cover-ochre { --cover: var(--ochre); }
.cover-teal  { --cover: var(--teal); }
.cover-pink  { --cover: var(--pink); }
.blog-card__cat {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 4px 10px;
}
.blog-card__num {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 1px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 2px 10px;
}
.blog-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.blog-card__body h2 { font-size: 1.4rem; line-height: 1.12; margin-bottom: 8px; }
.blog-card__body p { color: var(--ink-soft); font-size: 0.92rem; flex: 1; }
.blog-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px dotted var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
}
.blog-card__go { color: var(--coral); font-weight: 700; }

/* ---- Página de post (lectura tipo cómic) ---- */
.post {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(26px, 5vw, 54px) clamp(20px, 5vw, 40px) 60px;
}
.post__back {
  display: inline-block;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--coral);
  margin-bottom: 22px;
}
.post__back:hover { text-decoration: underline; }

/* ===== PORTADA DEL CAPÍTULO (estilo portada de manga) ===== */
.post-hero { margin-bottom: 38px; }
.post-hero__cat {
  display: inline-block;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 5px 13px;
  margin-bottom: 16px;
}
.post-hero__title {
  font-family: var(--font-logo);
  font-size: clamp(2.1rem, 6.4vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--coral);
  /* Borde de tinta (8 direcciones) + sombra de profundidad ochre — sin webkit-text-stroke */
  text-shadow:
    2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink),
    2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
    7px 7px 0 var(--ochre);
}

/* Viñeta "portada": número de capítulo gigante como arte */
.post-hero__cover {
  position: relative;
  margin: 26px 0 22px;
  height: clamp(150px, 26vw, 230px);
  border: var(--border-thick);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
  background: radial-gradient(rgba(28,26,23,0.5) 1px, transparent 1.4px) 0 0 / 7px 7px, var(--cover, var(--coral));
}
.post-hero__cover-num {
  position: absolute;
  right: clamp(-6px, 1vw, 14px);
  bottom: clamp(-26px, -3vw, -14px);
  font-family: var(--font-display);
  font-size: clamp(9rem, 26vw, 17rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 3px var(--paper);
  opacity: 0.92;
  transform: rotate(-4deg);
  pointer-events: none;
}
.post-hero__cover-lines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0 16px,
    rgba(236,227,204,0.16) 16px 18px
  );
  pointer-events: none;
}
.post-hero__cover-star {
  position: absolute;
  top: 14px; left: 18px;
  font-size: 1.6rem;
  color: var(--paper);
  opacity: 0.85;
}
.post-hero__cover-tag {
  position: absolute;
  left: 16px; bottom: 14px;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 4px 10px;
}
.post-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.post-hero__by { color: var(--coral); font-weight: 700; }
.post-hero__dot { color: var(--ochre); font-size: 0.6rem; }
.post-hero__desc {
  margin-top: 16px;
  padding: 16px 0 22px;
  border-top: 2px dotted var(--ink);
  border-bottom: var(--border-thick);
  font-size: 1.12rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---- Prose (cuerpo del artículo con toques manga) ---- */
.prose { margin-top: 8px; font-size: 1.08rem; line-height: 1.7; }
.prose > p { margin-bottom: 1.3em; }
/* Capital manga en el primer párrafo */
.prose > p:first-of-type::first-letter {
  font-family: var(--font-display);
  float: left;
  font-size: 4.2rem;
  line-height: 0.78;
  padding: 6px 12px 2px 0;
  color: var(--coral);
  text-shadow: 3px 3px 0 var(--ink);
}
.prose h2 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  letter-spacing: 0.5px;
  margin: 1.6em 0 0.5em;
  padding-left: 14px;
  border-left: 7px solid var(--coral);
}
.prose h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 1.4em 0 0.4em;
}
.prose a { color: var(--coral); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 1.3em 0; padding-left: 1.4em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.6em; margin-bottom: 0.5em; }
.prose ul li::before { content: '▶'; position: absolute; left: 0; color: var(--coral); font-size: 0.8em; top: 0.25em; }
.prose ol li { margin-bottom: 0.5em; }

/* Cita = bloque "destacado / manifiesto" enmarcado */
.prose blockquote {
  position: relative;
  background: var(--paper-deep);
  border: var(--border);
  border-left: 10px solid var(--coral);
  box-shadow: var(--shadow-soft);
  padding: 26px 26px 22px 30px;
  margin: 2em 0;
  font-size: 1.18rem;
  line-height: 1.5;
  font-weight: 600;
  font-style: normal;
}
.prose blockquote::before {
  content: '“';
  position: absolute;
  top: -18px; left: 16px;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--coral);
  text-shadow: 2px 2px 0 var(--ink);
}
.prose blockquote::after {
  content: 'MANIFIESTO';
  position: absolute;
  top: -11px; right: 16px;
  /* sobrescrito a 'MANIFESTO' en inglés más abajo */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  background: var(--ink);
  color: var(--paper);
  padding: 3px 9px;
}
.prose blockquote p { margin: 0; }
html[lang="en"] .prose blockquote::after { content: 'MANIFESTO'; }

/* Código inline */
.prose :not(pre) > code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  background: var(--ink);
  color: var(--paper);
  padding: 2px 6px;
  border-radius: 3px;
}
/* Bloque de código = "panel terminal" */
.prose pre {
  border: var(--border);
  box-shadow: var(--shadow-soft);
  border-radius: 4px;
  padding: 20px 18px;
  margin: 1.6em 0;
  overflow-x: auto;
  position: relative;
}
.prose pre::before {
  content: '● ● ●';
  position: absolute;
  top: 6px; left: 12px;
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: rgba(236,227,204,0.5);
}
.prose pre { padding-top: 30px; }
.prose pre code { font-size: 0.9rem; line-height: 1.5; }

.prose hr {
  border: 0;
  height: 0;
  text-align: center;
  margin: 2.2em 0;
}
.prose hr::after {
  content: '◆ ◆ ◆';
  color: var(--coral);
  letter-spacing: 8px;
  font-size: 0.9rem;
}
.prose img {
  border: var(--border);
  box-shadow: var(--shadow-soft);
  margin: 1.6em 0;
}

/* ---- Footer del post ---- */
.post__foot {
  margin-top: 44px;
  padding-top: 28px;
  border-top: var(--border-thick);
  text-align: center;
}
.post__tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
.post__tag {
  font-weight: 700;
  font-size: 0.78rem;
  background: var(--blue);
  color: var(--paper);
  border: 2px solid var(--ink);
  padding: 4px 10px;
}

/* Panel "siguiente / suscribite" (tipo boletín de la revista) */
.post-next {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border: var(--border-thick);
  box-shadow: var(--shadow-hard);
  padding: clamp(28px, 5vw, 44px) clamp(22px, 4vw, 40px);
  overflow: hidden;
}
.post-next::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(rgba(236,227,204,0.08) 1px, transparent 1.4px) 0 0 / 7px 7px;
  pointer-events: none;
}
.post-next > * { position: relative; }
.post-next__kana {
  display: inline-block;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  color: var(--ochre);
  margin-bottom: 8px;
}
.post-next__lead {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 2.1rem);
  line-height: 1.05;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.post-next .btn--primary { box-shadow: 4px 4px 0 var(--coral); }
.post__back--foot { display: block; margin-top: 22px; color: var(--paper); }
.post__back--foot:hover { color: var(--ochre); }

@media (max-width: 640px) {
  .blog-grid { grid-template-columns: 1fr; gap: 20px; }
  .prose { font-size: 1.02rem; }
  .prose > p:first-of-type::first-letter { font-size: 3.4rem; }
  /* Título de portada: más aire entre líneas y menos profundidad para que
     títulos largos no se solapen con su propia sombra */
  .post-hero__title {
    line-height: 1.04;
    text-shadow:
      2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 2px 0 var(--ink), 0 -2px 0 var(--ink),
      2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
      4px 4px 0 var(--ochre);
  }
}

/* Selector de idioma en el nav */
.nav__lang {
  border: 2px solid var(--ink);
  padding: 3px 9px !important;
  font-size: 0.74rem !important;
  background: var(--paper);
  transition: background 0.15s ease, color 0.15s ease;
}
.nav__lang:hover { background: var(--ink); color: var(--paper); }

/* =========================================================
   SIDEBAR DE MEDIA DEL POST (video + fotos del producto)
   Se activa cuando el frontmatter tiene mediaVideo y/o mediaImages
   ========================================================= */

/* En modo wide el post crece hasta cubrir prose + sidebar */
.post.has-media {
  max-width: min(1140px, calc(100% - 40px));
}

/* Layout de 2 columnas: prose + sidebar sticky */
.post-body.has-sidebar {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 44px;
  align-items: start;
}
.post-sidebar {
  position: sticky;
  top: 72px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Bloque individual del sidebar (video o galería) */
.sidebar-block {
  background: var(--ink);
  border: var(--border-thick);
  box-shadow: 6px 6px 0 var(--cover, var(--coral));
  overflow: hidden;
}
.sidebar-block__head {
  padding: 9px 14px;
  background: var(--cover, var(--coral));
  border-bottom: var(--border);
}
.sidebar-block__tag {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
}

/* YouTube lazy-embed: thumbnail → iframe al hacer click */
.yt-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  cursor: pointer;
  background: var(--ink);
}
.yt-facade > img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  margin: 0; border: 0; box-shadow: none;
  transition: transform 0.25s ease;
}
.yt-facade:hover > img { transform: scale(1.03); }
.yt-facade__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28,26,23,0.38);
  border: 0;
  color: var(--paper);
  font-size: 3.4rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.yt-facade__play:hover { background: rgba(224,88,74,0.6); }
/* iframe que reemplaza al poster al hacer click */
.yt-facade iframe {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  border: 0;
}

/* Galería de imágenes: grid 2×N, bordes de tinta como viñetas */
.sidebar-imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: var(--ink);
  padding: 3px;
}
/* 1 imagen: ocupa todo el ancho en ratio 16:10 */
.sidebar-imgs.imgs-1 { grid-template-columns: 1fr; }
.sidebar-imgs.imgs-1 .sidebar-img { aspect-ratio: 16 / 10; }
/* 3 imágenes: primera imagen destacada a fila completa */
.sidebar-imgs.imgs-3 .sidebar-img:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

.sidebar-img {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
}
.sidebar-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  margin: 0; border: 0; box-shadow: none;
  transition: transform 0.22s ease;
}
.sidebar-img:hover img { transform: scale(1.07); }
/* Lupa al hover */
.sidebar-img::after {
  content: '🔍';
  position: absolute;
  bottom: 6px; right: 6px;
  font-size: 0.85rem;
  background: rgba(28,26,23,0.72);
  padding: 2px 5px;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.sidebar-img:hover::after { opacity: 1; }

/* Mobile: sidebar debajo del prose, bloques en fila */
@media (max-width: 860px) {
  .post.has-media { max-width: 780px; }
  .post-body.has-sidebar {
    display: block;
  }
  .post-sidebar {
    position: static;
    margin-top: 32px;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .sidebar-block { flex: 1 1 280px; }
}