/* ─────────────────────────────────────────────────────────────────────────
   UNIVERSOS — evolución visual de la portada (rama evolucion-visual, 10-2026)

   La web alterna dos universos, igual que el feed de Instagram:
   · OSCURO  — azul noche, esculturas, luz magenta y amarilla. Es el fondo base.
   · CLARO   — amarillo #FACC15, tipografía negra condensada, subrayado magenta.

   Todo lo nuevo vive en este archivo, que se carga DESPUÉS de los estilos de
   index.html. Quitar el <link> a universos.css devuelve el aspecto anterior
   (las secciones reescritas siguen funcionando, sin el tratamiento nuevo).
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --u-ink: #03061a;
  --u-gold: #FACC15;
  --u-mag: #EC1A7E;
  --u-cut: clamp(28px, 4vw, 64px); /* alto de la diagonal entre universos */
}

/* ─── Tipografía ──────────────────────────────────────────────────────────
   Anton: la condensada en mayúscula de los titulares del feed. Archivo Black
   queda para acentos (h3, números) e Inter para el texto corrido. */
.u-display,
main h2.font-serif,
.hero-intro .hero-title {
  font-family: 'Anton', 'Archivo Black', system-ui, sans-serif !important;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.004em;
  line-height: 0.98 !important;
}
main h2.font-serif { font-size: clamp(44px, 6.4vw, 104px) !important; }
.hero-intro .hero-title { font-size: clamp(44px, min(7.4vw, 10.5vh), 124px) !important; }

/* Heroes de las páginas de servicio (la portada tiene el suyo, con video). */
main > section#top:not(.hero-video) h1.font-serif {
  font-family: 'Anton', 'Archivo Black', system-ui, sans-serif !important;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.004em;
  line-height: 0.98 !important;
  font-size: clamp(44px, 7vw, 112px) !important;
}
/* La palabra clave va en blanco con el subrayado magenta de pincel: estos
   heroes llevan una foto de fondo con zonas amarillas y magenta, y una
   palabra en magenta se perdia contra ellas. */
main > section#top:not(.hero-video) h1.font-serif .brand-gradient {
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'><path d='M3 15 C 70 8, 160 6, 250 9 S 370 13, 397 8 L 396 15 C 330 19, 250 15, 170 16 S 40 21, 4 21 Z' fill='%23EC1A7E'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 96%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* La palabra clave: magenta plano en lo oscuro (como en el feed), sin el
   degradado dorado→magenta que antes se repetía en todos los títulos. */
main h2.font-serif .brand-gradient,
.hero-intro .hero-title .brand-gradient {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--u-mag);
}

/* Subrayado de pincel magenta, el de "NO QUIERO MOLESTAR". Funciona en varias
   líneas gracias a box-decoration-break. */
.u-sub {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'><path d='M3 15 C 70 8, 160 6, 250 9 S 370 13, 397 8 L 396 15 C 330 19, 250 15, 170 16 S 40 21, 4 21 Z' fill='%23EC1A7E'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 96%;
  padding-bottom: 0.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* En lo oscuro la palabra clave ya va en magenta: sin subrayado, como en el feed. */
.brand-gradient .u-sub { background-image: none; }
/* Las dos rayitas "//" magenta que acompañan los titulares del feed. */
.u-tics {
  display: inline-block;
  position: relative;
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.18em;
  vertical-align: 0.42em;
}
.u-tics::before,
.u-tics::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0.11em;
  border-radius: 0.06em;
  background: var(--u-mag);
  transform: rotate(32deg);
  transform-origin: bottom;
}
.u-tics::before { left: 0.12em; height: 0.48em; }
.u-tics::after { left: 0.42em; height: 0.62em; }

/* Bajada en tono de aparte: la línea con humor que acompaña al título. */
.u-aparte {
  display: block;
  margin-top: 1.1em;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.45;
}

/* La cinta va girada y desborda el ancho. clip (no hidden) para no convertir
   main en contenedor de scroll: eso rompería el sticky del hero. */
main { overflow-x: clip; }

/* ─── Header: siempre legible, sobre oscuro y sobre amarillo ─────────────── */
header nav.glass-strong {
  background: rgba(3, 6, 26, 0.82);
  border-color: rgba(255, 255, 255, 0.10);
}

/* ─── UNIVERSO CLARO ──────────────────────────────────────────────────────── */
.u-claro {
  --u-fondo: var(--u-gold);
  position: relative;
  background: var(--u-fondo);
  color: var(--u-ink);
  isolation: isolate;
}
/* Corte diagonal arriba y abajo: el cambio de universo es nítido, no un
   resplandor. Los triángulos sobresalen hacia las secciones vecinas. */
.u-claro::before,
.u-claro::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--u-cut);
  background: var(--u-fondo);
  z-index: 1;
  pointer-events: none;
}
.u-claro::before { top: calc(var(--u-cut) * -1 + 1px); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.u-claro::after { bottom: calc(var(--u-cut) * -1 + 1px); clip-path: polygon(0 0, 100% 0, 0 100%); }
.u-claro.u-sin-corte-arriba::before,
.u-claro.u-sin-corte-abajo::after { display: none; }
/* Grano de papel, apenas. */
.u-papel {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.42  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Lo que las secciones traen pensado para fondo oscuro, traducido al claro. */
.u-claro h1, .u-claro h2, .u-claro h3, .u-claro .text-white,
.u-claro .text-zinc-100, .u-claro .text-zinc-200 { color: var(--u-ink); }
.u-claro .text-zinc-300, .u-claro .text-zinc-300\/90,
.u-claro .text-zinc-400 { color: rgba(3, 6, 26, 0.78); }
.u-claro .text-zinc-500 { color: rgba(3, 6, 26, 0.62); }
.u-claro .border-white\/8, .u-claro .border-white\/10,
.u-claro .border-white\/15, .u-claro .border-white\/20 { border-color: rgba(3, 6, 26, 0.16); }
.u-claro .bg-white\/30 { background-color: rgba(3, 6, 26, 0.5); }
.u-claro .brand-gradient,
.u-claro .gold-gradient,
.u-claro .magenta-gradient {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--u-ink);
}
.u-claro .text-brand-gold { color: var(--u-ink); }
.u-claro .text-white\/10, .u-claro .text-white\/20, .u-claro .text-white\/30,
.u-claro .text-zinc-600, .u-claro .text-zinc-700 { color: rgba(3, 6, 26, 0.6); }
/* En amarillo la palabra clave de un titular va en tinta con el subrayado
   magenta de pincel (las páginas de servicio la marcan con .brand-gradient). */
.u-claro h2 .brand-gradient,
main .u-claro h2.font-serif .brand-gradient {
  color: var(--u-ink);
  -webkit-text-fill-color: var(--u-ink);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'><path d='M3 15 C 70 8, 160 6, 250 9 S 370 13, 397 8 L 396 15 C 330 19, 250 15, 170 16 S 40 21, 4 21 Z' fill='%23EC1A7E'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 96%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.u-claro .bg-brand-gold { background-color: var(--u-mag); }
.u-claro ::selection { background: var(--u-ink); color: var(--u-gold); }
/* Vidrio → papel: tarjetas planas con borde de tinta, más revista que app. */
.u-claro .glass {
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid var(--u-ink);
  box-shadow: 6px 6px 0 var(--u-ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.u-claro .card-lift:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--u-ink); }
/* Botones y atmósfera pensados para lo oscuro, en versión amarilla. */
.u-claro .aurora, .u-claro .smoke { display: none; }
.u-claro a.bg-brand-gold { background-color: var(--u-ink); color: var(--u-gold); box-shadow: 0 14px 40px -14px rgba(3, 6, 26, 0.6); }
.u-claro .group:hover .group-hover\:text-brand-gold { color: var(--u-mag); }
.u-claro a:focus-visible { outline: 2px solid var(--u-ink); outline-offset: 3px; }

/* ─── Cinta (la banda corrediza, ahora una cinta amarilla inclinada) ───── */
.u-cinta {
  position: relative;
  z-index: 3;
  margin: -14px 0 calc(var(--u-cut) * 0.25);
  background: var(--u-gold);
  color: var(--u-ink);
  padding: 18px 0 16px;
  transform: rotate(-2deg) scale(1.04);
  border-top: 2px solid var(--u-ink);
  border-bottom: 2px solid var(--u-ink);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
}
.u-cinta .marquee-track { color: var(--u-ink); }
.u-cinta .marquee-track > span {
  font-family: 'Anton', system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
/* La cinta corre sola en cualquier página (la portada además tiene motion.js,
   que hace lo mismo). El ancho se fuerza contra la regla is-narrow de móvil,
   que si no apila los ítems en ancho 0 (ver PROYECTO.md). */
.u-cinta .marquee-track {
  display: flex;
  width: max-content !important;
  max-width: none !important;
  animation: u-cinta 50s linear infinite;
}
.u-cinta .marquee-track > * { max-width: none !important; flex: 0 0 auto !important; }
html.is-narrow .u-cinta .marquee-track { width: max-content !important; max-width: none !important; }
html.is-narrow .u-cinta .marquee-track > * { max-width: none !important; flex: 0 0 auto !important; }
@keyframes u-cinta { to { transform: translateX(calc(-50% - 24px)); } }
@media (prefers-reduced-motion: reduce) { .u-cinta .marquee-track { animation: none !important; } }

/* La cinta y la sección amarilla que sigue van pegadas: la cinta tapa la costura. */
.u-cinta + #manifiesto::before,
.u-cinta + .u-claro::before { display: none; }

/* ─── Human × AI ──────────────────────────────────────────────────────────── */
.u-hxa-titulo {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.92;
  font-size: clamp(64px, 9vw, 148px);
}
.u-hxa-titulo .x { font-weight: 200; margin: 0 0.06em; }
.u-hxa-titulo .ai { color: var(--u-mag); }
.u-hxa-img {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 941 / 1672;
  max-height: 86vh;
  margin-left: auto;
}
.u-hxa-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.u-hxa-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, #03061a 0%, rgba(3, 6, 26, 0) 22%),
    linear-gradient(to top, #03061a 0%, rgba(3, 6, 26, 0) 18%),
    linear-gradient(to bottom, #03061a 0%, rgba(3, 6, 26, 0) 12%);
}
.u-hxa-par { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 18px; }

/* ─── Índice de servicios (portada amarilla de la sección) ───────────────── */
.u-indice {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 2px solid var(--u-ink);
}
/* 1 columna en teléfono, 2 en tablet, 4 en pantalla grande: así ningún
   nombre de servicio se parte en dos renglones. */
@media (min-width: 640px) { .u-indice { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
@media (min-width: 1024px) { .u-indice { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.u-indice .t { white-space: nowrap; }
.u-indice a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 16px 22px 0;
  border-bottom: 1px solid rgba(3, 6, 26, 0.22);
  color: var(--u-ink);
  transition: background-color 0.25s ease, padding 0.25s ease;
}
.u-indice a:hover { background: rgba(3, 6, 26, 0.06); padding-left: 10px; }
.u-indice .n { font-family: 'Anton', system-ui, sans-serif; font-size: 34px; line-height: 1; color: var(--u-ink); }
.u-indice .t { font-weight: 600; font-size: 15px; line-height: 1.3; }

/* ─── Proceso en amarillo: fichas de collage, levemente torcidas ─────────── */
#proceso.u-claro .grid > div > .glass { border-radius: 10px; }
@media (min-width: 1024px) {
  #proceso.u-claro .grid > div:nth-child(odd) > .glass { transform: rotate(-0.8deg); }
  #proceso.u-claro .grid > div:nth-child(even) > .glass { transform: rotate(0.9deg); }
}
/* La ficha de la IA va invertida: es el diferencial. */
#proceso.u-claro .grid > div:nth-child(4) > .glass {
  background: var(--u-ink);
  color: #f4f4f5;
  box-shadow: 6px 6px 0 var(--u-mag);
}
#proceso.u-claro .grid > div:nth-child(4) h3 { color: #fff; }
#proceso.u-claro .grid > div:nth-child(4) p { color: rgba(255, 255, 255, 0.72); }
#proceso.u-claro .grid > div:nth-child(4) .gold-gradient { -webkit-text-fill-color: var(--u-gold); }
#proceso.u-claro .grid > div:nth-child(4) .border-white\/10 { border-color: rgba(255, 255, 255, 0.2); }
#proceso.u-claro .grid > div:nth-child(4) .text-zinc-300 { color: #e4e4e7; }

/* ─── Recomendados en amarillo ────────────────────────────────────────────── */
#tools.u-claro .glass { border-radius: 14px; overflow: hidden; }
#tools.u-claro .text-brand-magenta { color: var(--u-mag); }

/* ─── Portfolio ───────────────────────────────────────────────────────────── */
#portfolio h2.font-serif { font-size: clamp(72px, 15vw, 240px) !important; color: #fff; }

/* ─── Pie: franja amarilla con la última línea ───────────────────────────── */
.u-franja {
  font-family: 'Anton', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.15;
  text-align: center;
  /* Viene después del Contacto amarillo: va sobre oscuro, en amarillo, y deja
     lugar para la diagonal con la que termina esa sección. */
  color: var(--u-gold);
  background: transparent;
  padding: calc(var(--u-cut) + 22px) 20px 8px;
}

/* ─── Móvil ───────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  main h2.font-serif { font-size: clamp(44px, 14vw, 68px) !important; }
  #portfolio h2.font-serif { font-size: clamp(64px, 20vw, 120px) !important; }
  .u-cinta { transform: rotate(-3deg) scale(1.08); padding: 12px 0 10px; }
  .u-hxa-img { max-height: 70vh; margin: 0 auto; }
  .u-hxa-img::after {
    background:
      linear-gradient(to top, #03061a 0%, rgba(3, 6, 26, 0) 22%),
      linear-gradient(to bottom, #03061a 0%, rgba(3, 6, 26, 0) 12%);
  }
}
@media (prefers-reduced-motion: reduce) {
  #proceso.u-claro .grid > div > .glass { transform: none !important; }
}

/* ─── Generador 3D (herramientas/generador-3d) ─────────────────────────────
   La herramienta queda en oscuro; las secciones de explicación alternan.
   El H1 va en una sola línea a cualquier ancho (ver PROYECTO.md): el tamaño
   se ata al ancho disponible con la proporción de "CREÁ ALGO EN 3D" en Anton. */
.seccion h1#titulo.font-serif {
  font-family: 'Anton', 'Archivo Black', system-ui, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.004em;
  line-height: 1 !important;
  font-size: min(136px, calc((100vw - 70px) / 6.7)) !important; /* 6,36 x tamaño medido */
}
.seccion h1#titulo .gold-gradient {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--u-mag);
}
.seccion.u-claro .eyebrow { color: rgba(3, 6, 26, 0.72); }
.seccion.u-claro .eyebrow::before { background: var(--u-ink); }
.seccion.u-claro .plomo { color: rgba(3, 6, 26, 0.82); }
.seccion.u-claro .plomo strong { color: var(--u-ink); }
.seccion.u-claro .plomo a,
.seccion.u-claro .respuesta a {
  color: var(--u-ink) !important; /* algunos traen color dorado en línea */
  text-decoration: underline;
  text-decoration-color: var(--u-mag);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.seccion.u-claro .tarjeta {
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid var(--u-ink);
  box-shadow: 6px 6px 0 var(--u-ink);
}
.seccion.u-claro .tarjeta h3 { color: var(--u-ink); }
.seccion.u-claro .tarjeta p { color: rgba(3, 6, 26, 0.8); }
.seccion.u-claro .faq,
.seccion.u-claro .faq details { border-color: rgba(3, 6, 26, 0.2); }
.seccion.u-claro .faq summary { color: var(--u-ink); }
.seccion.u-claro .faq .respuesta { color: rgba(3, 6, 26, 0.8); }
.pie .u-franja { padding-top: calc(var(--u-cut) + 28px); }

/* ─── Firma grande del pie: "FULANA STUDIO®" ────────────────────────────────
   En Anton, siempre en una línea y nunca más ancha que su caja. El tamaño sale
   del ancho de la caja (unidades de contenedor): el texto mide 5,77 veces su
   tamaño de letra, así que con 100cqw / 5,95 llena el ancho con un 3% de aire. */
.u-firma-caja { container-type: inline-size; width: 100%; }
.u-firma {
  display: block;
  white-space: nowrap;
  font-family: 'Anton', 'Archivo Black', system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.9;
  font-size: calc(100cqw / 5.95);
}
.u-firma .gold-gradient,
.u-firma .magenta-gradient { background: none; -webkit-text-fill-color: currentColor; }
.u-firma .gold-gradient { color: var(--u-gold); }
.u-firma .magenta-gradient { color: var(--u-mag); }
.u-firma sup {
  display: inline !important;
  font-size: 0.2em !important;
  margin-left: 0.3em !important;
  transform: none !important;
  vertical-align: baseline !important;
  position: relative;
  top: -2.75em; /* a la altura de las mayusculas */
  color: #a1a1aa;
}

/* ─── UNIVERSO MAGENTA ─────────────────────────────────────────────────────
   La tercera placa del feed ("Arte en latas", "Renunció la paciencia"):
   fondo magenta y titular en tinta. Es una variante de .u-claro, así hereda
   cortes, tarjetas de papel y marca de agua. Sobre magenta la tinta tiene que
   ir plena: los grises translúcidos no llegan al contraste. */
.u-claro.u-magenta { --u-fondo: var(--u-mag); }
.u-magenta .text-zinc-300, .u-magenta .text-zinc-300\/90, .u-magenta .text-zinc-400,
.u-magenta .text-zinc-500, .u-magenta .text-white\/10, .u-magenta .text-white\/20,
.u-magenta .text-white\/30, .u-magenta .text-zinc-600, .u-magenta .text-zinc-700,
.u-magenta.seccion .plomo, .u-magenta.seccion .eyebrow { color: var(--u-ink); }
.u-magenta .u-sub,
.u-magenta h2 .brand-gradient,
main .u-magenta h2.font-serif .brand-gradient {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'><path d='M3 15 C 70 8, 160 6, 250 9 S 370 13, 397 8 L 396 15 C 330 19, 250 15, 170 16 S 40 21, 4 21 Z' fill='%23FACC15'/></svg>");
}
.u-magenta .u-tics::before, .u-magenta .u-tics::after { background: var(--u-gold); }
.u-magenta .bg-brand-gold { background-color: var(--u-ink); }
.u-magenta a.bg-brand-magenta { background-color: var(--u-gold); color: var(--u-ink); }
.u-magenta .glass { background: rgba(255, 255, 255, 0.82); }
.u-magenta .glass .text-zinc-400, .u-magenta .glass p { color: rgba(3, 6, 26, 0.8); }
.u-magenta ::selection { background: var(--u-ink); color: var(--u-mag); }
#proceso.u-magenta .grid > div:nth-child(4) > .glass { background: var(--u-ink); box-shadow: 6px 6px 0 var(--u-gold); }
#proceso.u-magenta .grid > div:nth-child(4) p { color: rgba(255, 255, 255, 0.78); }
.seccion.u-magenta .tarjeta { background: rgba(255, 255, 255, 0.82); }

/* ─── Serif editorial ──────────────────────────────────────────────────────
   La de "Dirección visual para marcas que se atreven.": contrasta con la
   condensada y es la voz de las frases (bajadas, apartes con humor). */
.u-serif, .u-aparte {
  font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.12;
}
.u-aparte { font-size: clamp(22px, 2.3vw, 32px); }

/* ─── Hero: recorrido del video (versión 10-2026) ──────────────────────────
   El texto va apareciendo mientras avanza el video (ver hero-video.js). */
html.hv-on .hero-track { height: 520svh; }
/* Velo mucho más suave que el original (0,8 en el centro): el fondo se tiene
   que seguir apreciando mientras aparece el texto. */
.hero-video .hero-dim {
  background: radial-gradient(58% 52% at 50% 54%, rgba(3, 6, 26, 0.5) 0%, rgba(3, 6, 26, 0.22) 62%, rgba(3, 6, 26, 0) 100%);
}
/* Colores del texto sobre el video: el título en amarillo (contrasta con el
   pasillo magenta y azul que se ve en ese tramo) y "ruido." en blanco con el
   subrayado magenta de pincel. La sombra separa el texto del fondo. */
.hero-intro .hero-title { color: var(--u-gold); }
.hero-intro .hero-title .brand-gradient {
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'><path d='M3 15 C 70 8, 160 6, 250 9 S 370 13, 397 8 L 396 15 C 330 19, 250 15, 170 16 S 40 21, 4 21 Z' fill='%23EC1A7E'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 96%;
}
.hero-intro .hero-eyebrow { color: var(--u-gold); }
.hero-intro .hero-title, .hero-intro .hero-sub, .hero-intro .hero-eyebrow {
  filter: drop-shadow(0 2px 16px rgba(3, 6, 26, 0.75)) drop-shadow(0 1px 2px rgba(3, 6, 26, 0.6));
}

/* ─── Textos que no se parten (revisión 10-2026) ────────────────────────────
   Títulos en mayúscula con la tipografía ancha: en tarjetas angostas
   ("PRODUCCIÓN") la palabra no entraba y se partía al medio. En Anton entran. */
main h3.font-serif.uppercase {
  font-family: 'Anton', 'Archivo Black', system-ui, sans-serif;
  letter-spacing: 0.01em;
}
/* En teléfonos, las etiquetas con mucho espaciado entre letras se partían
   ("Estudio creativo · Uruguay · Worldwide", "El diferencial Fulana
   Studio"): menos espaciado y en una línea. */
@media (max-width: 640px) {
  .hero-intro .hero-eyebrow { font-size: 10px; letter-spacing: 0.16em; white-space: nowrap; }
  main [class*="tracking-[0.28em]"], main [class*="tracking-[0.3em]"],
  main [class*="tracking-[0.32em]"], main [class*="tracking-[0.22em]"] { letter-spacing: 0.14em !important; }
  main .flex.items-center.gap-2[class*="tracking-[0.22em]"] { font-size: 10px !important; }
}
@media (min-width: 641px) and (max-width: 1023px) {
  main .flex.items-center.gap-2[class*="tracking-[0.22em]"] { letter-spacing: 0.12em !important; }
}

/* El teléfono más chico (320 px): las etiquetas con espaciado van más chicas. */
@media (max-width: 360px) {
  main [class*="tracking-[0.28em]"], main [class*="tracking-[0.3em]"],
  main [class*="tracking-[0.32em]"], main [class*="tracking-[0.22em]"] {
    font-size: 9.5px !important; letter-spacing: 0.1em !important; white-space: nowrap;
  }
}

/* La hoja is-narrow de las páginas con React (hasta 900 px) pone
   `overflow-wrap: anywhere` a todo el texto. Además de cortar palabras en
   cualquier letra, deja que el navegador achique columnas y elementos al ancho
   de una letra: de ahí salían "02" partido dígito por dígito, "PRODUCCIÓN"
   cortada al medio y columnas desparejas. `break-word` solo corta una palabra
   que de verdad no entra, sin tocar el tamaño mínimo. El selector tiene más
   peso que el original (html.is-narrow span). */
html.is-narrow body :is(h1, h2, h3, h4, p, span, div, a, li) {
  overflow-wrap: break-word !important;
}
@media (max-width: 360px) {
  .seccion .eyebrow { font-size: 10px; letter-spacing: 0.12em; white-space: nowrap; }
}

/* La misma hoja is-narrow pone `html.is-narrow img { height: auto }`, que le
   gana a `h-full` de Tailwind: las fotos que llenan un recuadro (absolutas,
   object-cover) quedaban a su alto natural y dejaban medio recuadro vacío
   (el jarrón de Impresión 3D en el celular). Acá se les devuelve el alto. */
html.is-narrow img.absolute.h-full { height: 100% !important; }

/* La hoja is-narrow anula el espacio entre columnas de las grillas de 12
   (en el celular todo va en una columna). En tablet esas grillas ya van en
   dos columnas y las tarjetas quedaban pegadas: se les devuelve el aire. */
@media (min-width: 640px) {
  html.is-narrow .grid[class*="grid-cols-12"] { column-gap: 20px !important; }
}

/* Mismo `height: auto` de is-narrow: el logo del pie (h-12) salía a su tamaño
   natural, ocupando todo el ancho en celular y tablet. */
html.is-narrow footer img[src*="logo-horizontal"] { height: 56px !important; width: auto !important; }