/* ============================================================
   AdCode · home
   Solo la portada. El resto del sitio sigue con app.css intacto.

   La forma viene de retainable.com: nav en píldora flotante, hero
   centrado con el producto a la vista, cables que conectan los chips
   con la pantalla, bento pastel y muy poco texto por bloque.
   Los colores y la tipografía siguen siendo los de AdCode.

   Todo lo de acá cuelga de body[data-page="home"] para no tocar las
   sesenta páginas que comparten app.css.
   ============================================================ */


/* ============================================================
   1 · barra superior en píldora
   ============================================================ */


/* ============================================================
   2 · hero
   ============================================================ */

body[data-page="home"] .h-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 3.3rem 0 0;
  text-align: center;
}
/* el mesh pastel. Cuatro manchas difusas y una veladura arriba, sin
   ninguna imagen: así escala a cualquier ancho y cambia con el tema */
body[data-page="home"] { position: relative; }
body[data-page="home"] .h-mesh {
  position: absolute;
  inset: -14rem 0 auto;
  height: 62rem;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38rem 26rem at 14% 34%, rgba(214, 226, 250, .85), transparent 62%),
    radial-gradient(34rem 24rem at 86% 28%, rgba(250, 224, 208, .8), transparent 62%),
    radial-gradient(30rem 22rem at 50% 8%, rgba(233, 224, 250, .72), transparent 60%),
    radial-gradient(44rem 20rem at 70% 62%, rgba(224, 240, 234, .55), transparent 64%);
  filter: blur(6px);
}
body[data-page="home"] .h-mesh::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 46%, var(--bg) 92%);
}
[data-theme="dark"] body[data-page="home"] .h-mesh {
  background:
    radial-gradient(38rem 26rem at 14% 34%, rgba(64, 96, 156, .3), transparent 62%),
    radial-gradient(34rem 24rem at 86% 28%, rgba(160, 92, 56, .26), transparent 62%),
    radial-gradient(30rem 22rem at 50% 8%, rgba(108, 84, 168, .26), transparent 60%),
    radial-gradient(44rem 20rem at 70% 62%, rgba(56, 108, 92, .2), transparent 64%);
}
/* arranca en el borde de arriba de la página, por encima queda solo la barra
   y el nav, que son transparentes */
body[data-page="home"] .h-mesh.arriba {
  inset: 0 0 auto;
  height: 66rem;
  z-index: 0;
}
body[data-page="home"] .h-hero { position: relative; z-index: 1; }
body[data-page="home"] .h-hero .wrap { position: relative; }
/* eyebrow en píldora */

body[data-page="home"] .h-hero h1 {
  font-size: clamp(2.55rem, 6vw, 4.1rem);
  line-height: 1.03;
  letter-spacing: -.042em;
  max-width: 22ch;
  /* el hueco que dejó la píldora del eyebrow, para que el hero no se corra */
  margin: 4.5rem auto 0;
  text-wrap: balance;
}
body[data-page="home"] .h-lede {
  margin: 1.4rem auto 0;
  max-width: 40rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}
/* La línea de abajo del hero. Dice una sola cosa: con la garantía al lado se
   leía como un legal y no como un dato, y la garantía funciona mejor abajo,
   al pie de los planes, que es donde la persona está decidiendo. El número va
   tabular para que no baile el ancho mientras el contador sube. */
body[data-page="home"] .h-nota {
  margin: 1.1rem auto 0;
  max-width: 34rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink-3);
}
body[data-page="home"] .h-nota .contador {
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
body[data-page="home"] .h-cta {
  margin-top: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}
/* el botón con el halo pastel detrás */
body[data-page="home"] .h-glow { position: relative; display: inline-flex; }
body[data-page="home"] .h-glow::before {
  content: "";
  position: absolute;
  inset: -.55rem -.9rem;
  border-radius: 999px;
  background: conic-gradient(from 210deg, #f8d3bd, #e3d4f7, #cfe0f8, #f8d3bd);
  filter: blur(12px);
  opacity: .85;
  z-index: -1;
  transition: opacity .3s ease, transform .3s ease;
}
body[data-page="home"] .h-glow:hover::before { opacity: 1; transform: scale(1.04); }
/* Safari en el teléfono recorta el blur del conic en un rectángulo:
   ahí va sombra fija y listo */
@media (max-width: 767px) {
  /* El pseudo con su caja más grande que el botón dibujaba un arco claro
     alrededor. La regla de la casa para iOS es apagarlo y llevar la sombra
     al botón, que es donde no puede desalinearse. */
  body[data-page="home"] .h-glow::before { content: none; }
  body[data-page="home"] .h-glow > .btn { box-shadow: 0 12px 30px -14px rgba(216, 150, 110, .85); }
}
/* ---------- las plataformas y sus cables ---------- */

body[data-page="home"] .h-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .68rem 1.15rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
  box-shadow: 0 8px 22px -18px rgba(20, 18, 15, .7);
  font-size: .86rem;
  font-weight: 550;
  letter-spacing: -.01em;
  backdrop-filter: blur(8px);
}
/* ---------- el mockup del panel ---------- */

body[data-page="home"] .h-app-caja {
  position: relative;
  margin-top: 5.5rem;
  padding: 0 1.2rem;
}
body[data-page="home"] .h-app {
  position: relative;
  max-width: 74rem;
  margin: 0 auto;
  border-radius: 1.5rem 1.5rem 0 0;
  background: var(--panel-bg);
  border: 1px solid var(--marco);
  border-bottom: 0;
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, .7) inset,
    0 40px 90px -50px rgba(20, 18, 15, .55);
  padding: .55rem;
  display: grid;
  grid-template-columns: 12.5rem 1fr;
  gap: .55rem;
  text-align: left;
  overflow: hidden;
  /* la pantalla se corta abajo: da la idea de que sigue */
  max-height: 30rem;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
body[data-page="home"] .h-side {
  background: var(--surface);
  border-radius: 1.1rem;
  padding: 1rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
body[data-page="home"] .h-side .h-marca {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -.02em;
  padding: .3rem .55rem 1rem;
}
body[data-page="home"] .h-side .h-marca svg { width: 1.15rem; height: 1.15rem; }
body[data-page="home"] .h-side b {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .52rem .6rem;
  border-radius: .7rem;
  font-size: .84rem;
  font-weight: 500;
  color: var(--ink-2);
}
body[data-page="home"] .h-side b.on {
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink);
  font-weight: 600;
}
body[data-page="home"] .h-side b svg { width: .95rem; height: .95rem; opacity: .6; }
body[data-page="home"] .h-main { min-width: 0; }
body[data-page="home"] .h-buscar {
  background: var(--surface);
  border-radius: 1.1rem;
  padding: .78rem 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .84rem;
  color: var(--ink-3);
  margin-bottom: .55rem;
}
body[data-page="home"] .h-buscar svg { width: 1rem; height: 1rem; }
body[data-page="home"] .h-buscar span:last-child {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .66rem;
  border: 1px solid var(--line);
  border-radius: .35rem;
  padding: .1rem .3rem;
}
body[data-page="home"] .h-tabla {
  background: var(--surface);
  border-radius: 1.1rem;
  padding: 1.2rem 1.2rem 0;
}
body[data-page="home"] .h-tabla h3 {
  font-size: 1.25rem;
  letter-spacing: -.03em;
  margin-bottom: .25rem;
}
body[data-page="home"] .h-tabla p { margin: 0 0 1rem; font-size: .8rem; color: var(--ink-2); }
body[data-page="home"] .h-filtros { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; }
body[data-page="home"] .h-filtros span {
  font-size: .74rem;
  padding: .34rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-2);
}
body[data-page="home"] .h-filtros span.on { background: var(--ink); color: var(--acc-ink); border-color: var(--ink); }
body[data-page="home"] .h-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
}
body[data-page="home"] .h-pieza {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: .8rem;
  overflow: hidden;
  background: var(--gris-2);
}
body[data-page="home"] .h-pieza video,
body[data-page="home"] .h-pieza img { width: 100%; height: 100%; object-fit: cover; }
body[data-page="home"] .h-dias,
body[data-page="home"] .h-punt {
  position: absolute;
  top: .45rem;
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 600;
  padding: .2rem .42rem;
  border-radius: .4rem;
  backdrop-filter: blur(6px);
}
body[data-page="home"] .h-dias { left: .45rem; background: rgba(12, 12, 13, .62); color: #fff; }
body[data-page="home"] .h-punt {
  right: .45rem;
  background: var(--verde);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: .18rem;
}
/* la ficha del prompt, flotando sobre la pantalla */
body[data-page="home"] .h-flota {
  position: absolute;
  right: 7%;
  bottom: 2.2rem;
  width: min(21.5rem, 58vw);
  background: var(--surface);
  border: 1px solid var(--marco);
  border-radius: 1.1rem;
  padding: 1rem 1.1rem;
  box-shadow: 0 30px 70px -34px rgba(20, 18, 15, .8);
  text-align: left;
  animation: h-flotar 6s ease-in-out infinite;
}
@keyframes h-flotar {
  0%, 100% { transform: translateY(0) }
  50% { transform: translateY(-.5rem) }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .h-flota { animation: none; }
}
body[data-page="home"] .h-flota .h-ft {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}
body[data-page="home"] .h-flota code {
  display: block;
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
}
body[data-page="home"] .h-flota .h-fb {
  margin-top: .8rem;
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  color: var(--ink-2);
}
body[data-page="home"] .h-flota .h-copiar {
  margin-left: auto;
  background: var(--ink);
  color: var(--acc-ink);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .7rem;
  font-weight: 600;
}
@media (max-width: 900px) { body[data-page="home"] .h-flota { display: none; } }
@media (max-width: 760px) {
  body[data-page="home"] .h-app { grid-template-columns: 1fr; max-height: 24rem; }
  body[data-page="home"] .h-side { display: none; }
  body[data-page="home"] .h-grid { grid-template-columns: repeat(2, 1fr); }
}

/* La caja blanca que envuelve la solución. Se borró sola en una limpieza
   automática de reglas huérfanas: el script buscaba clases sin uso y esta
   quedó del lado equivocado. Vuelve, y con el chequeo de clases sin regla
   corriendo después de cada limpieza. */
body[data-page="home"] .h-caja {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 2.6rem;
  padding: clamp(1.8rem, 4vw, 3.6rem);
  box-shadow: 0 40px 90px -60px rgba(20, 18, 15, .5);
}
body[data-page="home"] .h-caja .h-trans { margin-top: 2.6rem; }
@media (max-width: 860px) {
  body[data-page="home"] .h-caja { border-radius: 1.8rem; }
}

/* ============================================================
   6 · cómo funciona, con los cables
   ============================================================ */

body[data-page="home"] .h-flujo { position: relative; margin-top: 3rem; }
body[data-page="home"] .h-flujo-cables {
  display: block;
  width: 100%;
  height: 4.5rem;
}
@media (max-width: 900px) { body[data-page="home"] .h-flujo-cables { display: none; } }
body[data-page="home"] .h-pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
body[data-page="home"] .h-paso {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  padding: 1.5rem;
  box-shadow: 0 20px 50px -46px rgba(20, 18, 15, .9);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
body[data-page="home"] .h-paso:hover {
  transform: translateY(-.35rem);
  box-shadow: 0 30px 60px -40px rgba(20, 18, 15, .8);
}
body[data-page="home"] .h-paso .h-pn {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: .65rem;
  background: var(--ink);
  color: var(--acc-ink);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  margin-bottom: .95rem;
}
body[data-page="home"] .h-paso h3 { font-size: 1.02rem; letter-spacing: -.024em; margin-bottom: .45rem; }
body[data-page="home"] .h-paso p { margin: 0; font-size: .85rem; line-height: 1.55; color: var(--ink-2); }
/* abajo de 900 los pasos dejan de ser una grilla: se arrastran de costado, con
   la fila de los beneficios, allá abajo en "las filas que se arrastran" */
/* ============================================================
   7 · la cita con el número grande
   ============================================================ */

body[data-page="home"] .h-cita {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 3.2rem;
  align-items: start;
}
@media (max-width: 860px) {
  body[data-page="home"] .h-cita { grid-template-columns: 1fr; gap: 1.8rem; }
}
/* ============================================================
   8 · los límites
   ============================================================ */

body[data-page="home"] .h-limites { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 780px) { body[data-page="home"] .h-limites { grid-template-columns: 1fr; } }
/* ============================================================
   9 · explorar, el bloque de enlaces comprimido
   ============================================================ */

body[data-page="home"] .h-explorar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
body[data-page="home"] .h-ecol {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  padding: 1.4rem 1.5rem;
}
body[data-page="home"] .h-ecol h3 {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: .9rem;
}
body[data-page="home"] .h-ecol a {
  display: block;
  font-size: .87rem;
  padding: .34rem 0;
  color: var(--ink-2);
  transition: color .2s ease, transform .2s ease;
}
body[data-page="home"] .h-ecol a:hover { color: var(--ink); transform: translateX(.2rem); }
body[data-page="home"] .h-ecol p { margin: .9rem 0 0; font-size: .8rem; line-height: 1.6; color: var(--ink-3); }
body[data-page="home"] .h-ecol p a { display: inline; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) { body[data-page="home"] .h-explorar { grid-template-columns: 1fr; } }
/* ============================================================
   10 · el cierre
   ============================================================ */

body[data-page="home"] .h-cierre {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  /* sin aire abajo: lo último de esta sección es la firma, que va cortada y
     tiene que morir contra el footer. Con el padding parejo quedaba una
     franja blanca de 88 píxeles entre la palabra cortada y el gris del pie, y
     ahí el corte deja de leerse como corte y se lee como un hueco */
  padding: 5.2rem 0 0;
}
body[data-page="home"] .h-cierre .h-mesh { inset: -18rem 0 auto; height: 52rem; }
body[data-page="home"] .h-cierre .h-mesh::after {
  background: linear-gradient(180deg, var(--bg) 0%, transparent 30%, transparent 62%, var(--bg) 96%);
}
body[data-page="home"] .h-cierre h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  letter-spacing: -.042em;
  line-height: 1.04;
  max-width: 20ch;
  margin: 0 auto;
  text-wrap: balance;
}
body[data-page="home"] .h-cierre p {
  margin: 1.2rem auto 0;
  max-width: 36rem;
  color: var(--ink-2);
}
/* ============================================================
   11 · el ritmo entre secciones
   ============================================================ */

body[data-page="home"] .h-sec { padding: clamp(3.2rem, 5.6vw, 5rem) 0; }
body[data-page="home"] .h-sec.deep { background: var(--bg-deep); }
body[data-page="home"] .h-head { max-width: 44rem; }
body[data-page="home"] .h-head.centro { margin: 0 auto; text-align: center; }
body[data-page="home"] .h-head h2 {
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  letter-spacing: -.042em;
  line-height: 1.06;
  margin-top: .9rem;
  text-wrap: balance;
}
body[data-page="home"] .h-head p {
  margin: 1.1rem 0 0;
  color: var(--ink-2);
  font-size: .97rem;
  line-height: 1.6;
  text-wrap: pretty;
}
body[data-page="home"] .h-head .h-pill { margin-bottom: 0; }
/* Reveal al revés que en app.css: acá el contenido nace visible y recién se
   esconde si el JS está vivo para volver a mostrarlo. En la captura de página
   completa del home viejo quedaron cinco pantallas en blanco por confiar en
   que el observer siempre dispara. */
body[data-page="home"] .rv { opacity: 1; transform: none; }
html.js body[data-page="home"] .rv {
  opacity: 0;
  transform: translateY(1.1rem);
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1);
}
html.js body[data-page="home"] .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js body[data-page="home"] .rv { opacity: 1; transform: none; transition: none; }
}
/* ============================================================
   12 · el marco de dos anillos
   Es el detalle que separa a retainable de una landing común y el que
   nos faltaba. Cada pieza va adentro de un marco con dos bordes: uno
   blanco pegado al contenido y otro gris un pixel más afuera, en
   luminosity. Se lee como vidrio montado sobre la página.
   ============================================================ */


/* ============================================================
   15 · los mockups adentro de las cards del bento
   ============================================================ */

body[data-page="home"] .h-b { justify-content: flex-start; gap: .9rem; }
body[data-page="home"] .h-mock .h-ml,
body[data-page="home"] .wf .h-ml {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .55;
  display: block;
  margin-bottom: .5rem;
}
/* barra de tiempo en pauta */
body[data-page="home"] .h-barra {
  display: block;
  height: .42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pastel-ink) 10%, transparent);
  overflow: hidden;
  margin: .3rem 0 .45rem;
}
/* el bloque de prompt */
body[data-page="home"] .h-mock code {
  display: block;
  font-family: var(--mono);
  font-size: .64rem;
  line-height: 1.65;
  white-space: pre-wrap;
}
/* la lista de productos */
body[data-page="home"] .h-opt {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .34rem .5rem;
  border-radius: .45rem;
}
/* los avatares del equipo */
body[data-page="home"] .h-caras { display: flex; align-items: center; }
/* el logo en el hueco del centro */
body[data-page="home"] .h-bento::after { display: none; }
@media (max-width: 980px) { body[data-page="home"] .h-nudo { display: none; } }
/* ============================================================
   16 · planes más angostos y cierre en dos columnas
   ============================================================ */


body[data-page="home"] .h-cierre { text-align: left; }
body[data-page="home"] .h-cierre-in {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
body[data-page="home"] .h-cierre h2 { margin: 0; max-width: 14ch; text-align: left; }
body[data-page="home"] .h-cierre p { margin: 0 0 1.6rem; max-width: 26rem; }
body[data-page="home"] .h-cierre .h-cta { justify-content: flex-start; margin-top: 0; }
@media (max-width: 860px) {
  body[data-page="home"] .h-cierre-in { grid-template-columns: 1fr; gap: 1.8rem; }
}
/* ============================================================
   17 · la marca grande del pie
   ============================================================ */

body[data-page="home"] .h-firma {
  overflow: hidden;
  line-height: .78;
  padding: 1rem 0 0;
  margin-bottom: -.16em;
  pointer-events: none;
  user-select: none;
}
body[data-page="home"] .h-firma span {
  display: block;
  text-align: center;
  /* Ancho justo, de un borde al otro. El clamp topaba en 17rem y de ahí en
     adelante la palabra se quedaba quieta mientras la pantalla seguía
     creciendo: en un monitor ancho quedaban 240 píxeles de aire a cada lado y
     la firma se leía como un texto centrado más, no como la marca del pie.
     29.2vw sale de medir "AdCode" en Inter con este tracking: el ancho da
     3.42 veces el tamaño de letra, y 100 dividido 3.42 es esto. Si algún día
     cambia la tipografía del sitio, este número se vuelve a medir. */
  font-size: 29.2vw;
  font-weight: 700;
  letter-spacing: -.055em;
  color: color-mix(in srgb, var(--ink) 6%, transparent);
  white-space: nowrap;
  /* asoma cortada a la mitad de la o: presencia de marca sin regalarle una
     pantalla entera al bloque. El -.16em del contenedor se medía contra el
     tamaño de texto normal y no cortaba nada. */
  margin-bottom: -.30em;
}
/* ============================================================
   18 · los wireframes
   El lenguaje que usa TrendTrack en sus pasos: una card gris, adentro
   un panel blanco con la interfaz dibujada en barras, y un solo color
   de acento para lo que importa. Nada de esto es una imagen: así queda
   nítido en cualquier pantalla, sigue el tema oscuro y se corrige
   cambiando un número en vez de volver a generar.
   ============================================================ */


/* el wireframe adentro de cada paso */
/* Los cuatro wireframes tienen distinto contenido y sin un alto fijo las
   cards salían escalonadas. El panel se centra adentro de la caja gris. */
body[data-page="home"] .h-paso {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body[data-page="home"] .h-paso .wf {
  border-radius: 0;
  margin-bottom: 0;
  height: 13.6rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 1.2rem;
}
body[data-page="home"] .h-paso .wf-p { width: 100%; }
body[data-page="home"] .h-paso-txt { flex: 1; }
body[data-page="home"] .h-paso .wf-tile { aspect-ratio: 9 / 11; }
body[data-page="home"] .h-paso-txt { padding: 1.3rem 1.4rem 1.5rem; }
body[data-page="home"] .h-paso .h-pn { margin-bottom: .8rem; }
/* en el bento el wireframe va sin su card gris, el pastel ya es el fondo */
body[data-page="home"] .h-b .wf { background: none; padding: 0; }
body[data-page="home"] .h-b .wf-p {
  background: color-mix(in srgb, #fff 80%, transparent);
  border-color: color-mix(in srgb, #fff 85%, transparent);
}
[data-theme="dark"] body[data-page="home"] .h-b .wf-p {
  background: color-mix(in srgb, #fff 6%, transparent);
  border-color: color-mix(in srgb, #fff 9%, transparent);
}
/* el texto que sí se lee dentro de un wireframe: los números son el
   argumento del producto y en barras grises no dicen nada */
body[data-page="home"] .h-wtxt {
  font-size: .74rem;
  font-weight: 550;
  letter-spacing: -.012em;
  color: color-mix(in srgb, var(--pastel-ink, var(--ink)) 82%, transparent);
  white-space: nowrap;
  flex: none;
}
body[data-page="home"] .h-wnum {
  font-family: var(--mono);
  font-size: .68rem;
  color: color-mix(in srgb, var(--pastel-ink, var(--ink)) 62%, transparent);
  flex: none;
  margin-left: auto;
}
body[data-page="home"] .wf .h-ml { margin: 0; flex: none; color: color-mix(in srgb, var(--pastel-ink, var(--ink)) 52%, transparent); }
/* ============================================================
   19 · las listas de los planes
   Como las de TrendTrack: cada línea con su icono, el nombre y el
   valor a la derecha. Lo que el plan no trae va apagado y con una
   cruz, que se lee más rápido que no encontrarlo en la lista.
   ============================================================ */


/* ============================================================
   20 · la transformación
   Tres columnas: lo que encontró el radar, el prompt que sale de ahí
   y la pieza producida. Es la única parte de la página que muestra
   qué hace AdCode sin que haga falta leer nada.
   ============================================================ */

body[data-page="home"] .h-trans {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1fr;
  gap: 1.6rem;
  align-items: stretch;
  margin-top: 2.8rem;
  /* El alto de un creativo, para que la caja del prompt mida lo mismo y las
     tres columnas cierren en la misma línea. La columna de un creativo es
     (el ancho menos los dos gaps) dividido 3.35, porque las columnas van
     1fr 1.35fr 1fr; encima va el 16/9 del formato y los dos píxeles del borde.
     Si alguna vez cambian esas columnas o el gap, este número cambia con ellas.

     Va en cqw y no en %: la variable se usa en un max-height, y ahí un
     porcentaje se resuelve contra el alto del padre, no contra el ancho. Con
     container-type acá arriba, 100cqw es el ancho de esta grilla. */
  container-type: inline-size;
  --alto-creativo: calc((100cqw - 3.2rem) / 3.35 * 16 / 9 + 2px);
}
body[data-page="home"] .h-tcol { position: relative; display: flex; flex-direction: column; }
body[data-page="home"] .h-tcap {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .85rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
body[data-page="home"] .h-tcap b {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--acc-ink);
  font-size: .58rem;
  font-weight: 600;
  flex: none;
}
/* la pieza de video con su marco */
body[data-page="home"] .h-tpieza {
  position: relative;
  border-radius: 1.1rem;
  overflow: hidden;
  background: var(--gris-2);
  /* 9:16, la proporción con la que se publica y con la que se mira en el
     teléfono. Antes iba en 9/13 para dejar lugar abajo a la tarjeta del
     puntaje y a los dos módulos de salida; sin ellos, el alto es del video */
  aspect-ratio: 9 / 16;
  border: 1px solid var(--marco);
}
body[data-page="home"] .h-tpieza video,
body[data-page="home"] .h-tpieza img { width: 100%; height: 100%; object-fit: cover; }
body[data-page="home"] .h-tpieza .h-dias,
body[data-page="home"] .h-tpieza .h-punt { top: .6rem; font-size: .62rem; padding: .24rem .5rem; }
body[data-page="home"] .h-tpieza .h-dias { left: .6rem; }
body[data-page="home"] .h-tpieza .h-punt { right: .6rem; }
body[data-page="home"] .h-tsello {
  position: absolute;
  left: .6rem;
  bottom: .6rem;
  right: .6rem;
  padding: .45rem .6rem;
  border-radius: .6rem;
  background: rgba(12, 12, 13, .58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: .66rem;
  line-height: 1.35;
}
body[data-page="home"] .h-tsello em {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: .54rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: .12rem;
}
/* la columna del prompt */
body[data-page="home"] .h-tprompt {
  /* de acá no se sale nada, pase lo que pase con el flex de adentro */
  overflow: hidden;
  /* El prompt se apoya en el mismo gris de la columna, sin caja propia ni borde:
     el texto es lo único que tiene que mirarse ahí. El fondo se nombra igual
     que el gris para que el degradado del final del recorte tenga de dónde
     salir. */
  --code-bg: var(--gris);
  --code-ink: #4a4a4e;
  --code-line: transparent;
  --code-marca: color-mix(in srgb, var(--verde) 15%, transparent);
  --code-marca-ink: color-mix(in srgb, var(--verde) 88%, var(--ink));
  flex: 1;
  max-height: var(--alto-creativo);
  display: flex;
  flex-direction: column;
  background: var(--gris);
  border: 1px solid var(--marco);
  border-radius: 1.1rem;
  padding: 1.1rem 1.2rem 1rem;
}
body[data-page="home"] .h-tprompt .h-tp-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-bottom: .7rem;
  margin-bottom: .8rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
body[data-page="home"] .h-tprompt .h-tp-top span:last-child { margin-left: auto; }
body[data-page="home"] .h-tprompt code {
  flex: 1;
  display: block;
  font-family: var(--mono);
  font-size: .72rem;
  /* el prompt entero tiene que caber en el alto de los dos creativos de al
     lado: con 1.72 la caja del medio cerraba cuatro renglones más abajo y las
     tres columnas quedaban escalonadas */
  line-height: 1.6;
  color: var(--ink);
  white-space: pre-wrap;
}
body[data-page="home"] .h-tprompt code u {
  text-decoration: none;
  background: var(--code-marca);
  color: var(--code-marca-ink);
  border-radius: .28rem;
  padding: .05rem .28rem;
  font-weight: 500;
}
body[data-page="home"] .h-tprompt .h-tp-pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: .8rem;
  border-top: 1px solid var(--line);
  font-size: .72rem;
  color: var(--ink-2);
}
body[data-page="home"] .h-tprompt .h-tp-pie svg { width: .85rem; height: .85rem; color: var(--verde); flex: none; }
body[data-page="home"] .h-tprompt .h-tp-btn {
  background: var(--ink);
  color: var(--acc-ink);
  border-radius: 999px;
  padding: .38rem .95rem;
  font-size: .72rem;
  font-weight: 600;
  flex: none;
}
/* las flechas entre columnas */
body[data-page="home"] .h-tflecha {
  position: absolute;
  top: 50%;
  right: -1.6rem;
  width: 1.6rem;
  transform: translate(50%, -50%);
  display: grid;
  place-items: center;
  z-index: 2;
  pointer-events: none;
}
body[data-page="home"] .h-tflecha i {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--marco);
  box-shadow: 0 8px 20px -12px rgba(20, 18, 15, .7);
  color: var(--ink-2);
}
body[data-page="home"] .h-tflecha svg { width: .85rem; height: .85rem; }

@media (max-width: 900px) {
  body[data-page="home"] .h-trans { grid-template-columns: 1fr; gap: 2.4rem; }
  /* apiladas, la flecha caía encima del rótulo de la columna siguiente.
     Los números 1, 2 y 3 ya dan el orden. */
  body[data-page="home"] .h-tflecha { display: none; }
  /* en el teléfono, 3:4: el 9:16 de escritorio ocupaba pantalla y media y había
     que scrollear el video entero para llegar al paso siguiente */
  body[data-page="home"] .h-tpieza { aspect-ratio: 3 / 4; }
  /* Apilado, la caja del prompt mide lo mismo que un creativo (el 3:4 sobre el
     ancho de la columna, que acá es la grilla entera) y el prompt se lee
     scrolleando adentro. Sin tope, la caja crecía a tres pantallas de texto en
     el medio del recorrido y había que pasar todo el prompt con el dedo para
     llegar al paso siguiente. */
  /* la caja toma la misma proporción que el creativo de arriba, así los tres
     pasos miden lo mismo, y el prompt se lee scrolleando adentro */
  body[data-page="home"] .h-tprompt {
    aspect-ratio: 3 / 4;
    max-height: none;
  }
}
/* En el teléfono, las filas de tarjetas se arrastran de costado.

   Son dos: los tres beneficios y los cuatro pasos. Apiladas eran tarjetas
   anchas una abajo de la otra y había que pasar la sección entera para llegar
   a lo que sigue. Es el mismo gesto del carrusel de guías, que está más abajo
   en la misma página, así que la persona ya lo conoce cuando llega acá.

   Los beneficios van con el scope del home y no en app.css, que es donde vive
   el componente: las mismas tarjetas las usan los cinco casos de uso y
   herramientas, y ahí el apilado con la imagen al costado está bien porque son
   páginas de lectura. */
@media (max-width: 900px) {
  body[data-page="home"] .h-benes,
  body[data-page="home"] .h-pasos {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* la pista se sale del wrap para que la última tarjeta se corte contra el
       borde y se vea que hay más de una */
    margin-inline: calc(50% - 50vw);
    padding: 0 1.5rem 1.2rem;
    scroll-padding-left: 1.5rem;
  }
  body[data-page="home"] .h-benes { margin-top: 2.2rem; }
  body[data-page="home"] .h-benes::-webkit-scrollbar,
  body[data-page="home"] .h-pasos::-webkit-scrollbar { display: none; }
  body[data-page="home"] .h-bene,
  body[data-page="home"] .h-paso {
    flex: none;
    width: min(78vw, 20rem);
    scroll-snap-align: start;
    /* de vuelta a la tarjeta entera: la imagen arriba y el texto abajo, como en
       el escritorio. El apilado del teléfono la parte en dos columnas */
    display: flex;
    flex-direction: column;
  }
  body[data-page="home"] .h-bene-img,
  body[data-page="home"] .h-bene h3,
  body[data-page="home"] .h-bene p { grid-area: auto; }
  body[data-page="home"] .h-bene-img img { height: auto; }
  body[data-page="home"] .h-bene h3 { margin-top: 1.3rem; margin-bottom: .5rem; }
  body[data-page="home"] .h-bene p { margin-bottom: 1.5rem; }
}

/* Qué pasa con el prompt que no entra en la caja.

   Va acá abajo, después de las dos reglas que lo definen, porque las tres
   pesan lo mismo y gana la última: escrito arriba, adentro del bloque del
   teléfono, no llegaba a aplicarse nunca.

   En el escritorio se recorta y se desvanece: la columna del medio es un paso
   intermedio y el prompt entero se lee adentro del panel. En el teléfono, la
   caja mide lo mismo que un creativo y el prompt se lee arrastrando adentro de
   la caja, sin estirar la página. */
@media (min-width: 901px) {
  body[data-page="home"] .h-tprompt .h-tp-bloque code { overflow: hidden; }
}
@media (max-width: 900px) {
  body[data-page="home"] .h-tprompt .h-tp-bloque code {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* ============================================================
   21 · el carrusel de recursos
   El patrón de Apple: cards altas que se arrastran de costado, con
   el rótulo arriba, el título grande y algo para mirar abajo. Los
   enlaces siguen siendo <a href> en el html, así que el buscador los
   rastrea igual que en una lista.
   ============================================================ */

body[data-page="home"] .h-carru { position: relative; margin-top: 1.2rem; }
body[data-page="home"] .h-carru-pista {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* aire arriba y abajo para que el overflow no coma la sombra del hover */
  padding: 1.6rem 0 2.6rem;
  /* se sale del wrap para que la última card se corte contra el borde */
  margin: 0 calc(50% - 50vw);
  padding-left: max(1.5rem, calc(50vw - var(--maxw) / 2 + 1.5rem));
  padding-right: max(1.5rem, calc(50vw - var(--maxw) / 2 + 1.5rem));
  /* sin esto el snap ignora el padding y la pista nace corrida, con la
     primera card medio metida abajo del borde izquierdo */
  scroll-padding-left: max(1.5rem, calc(50vw - var(--maxw) / 2 + 1.5rem));
}
body[data-page="home"] .h-carru-pista::-webkit-scrollbar { display: none; }
body[data-page="home"] .h-cc {
  position: relative;
  flex: none;
  width: 19.5rem;
  min-height: 21rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.6rem 0;
  border-radius: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  color: var(--ink);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
body[data-page="home"] .h-cc:hover {
  transform: translateY(-.4rem);
  box-shadow: 0 30px 60px -40px rgba(20, 18, 15, .75);
}
body[data-page="home"] .h-cc-eye {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .7rem;
}
body[data-page="home"] .h-cc h3 {
  font-size: 1.32rem;
  line-height: 1.18;
  letter-spacing: -.032em;
  margin: 0;
  max-width: 13ch;
}
body[data-page="home"] .h-cc-art {
  display: block;
  margin-top: auto;
  padding-top: 1.3rem;
}
/* el más de la esquina, como el de Apple */
body[data-page="home"] .h-cc-mas {
  position: absolute;
  right: 1.1rem;
  bottom: 1.1rem;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
  transition: background .25s ease, color .25s ease;
}
body[data-page="home"] .h-cc:hover .h-cc-mas { background: var(--ink); color: var(--acc-ink); }
body[data-page="home"] .h-cc-mas svg { width: .8rem; height: .8rem; }
/* cada card con su pastel, como el bento */
body[data-page="home"] .h-cc.p1 { background: var(--pastel-1); border-color: transparent; }
body[data-page="home"] .h-cc.p2 { background: var(--pastel-2); border-color: transparent; }
body[data-page="home"] .h-cc.p3 { background: var(--pastel-3); border-color: transparent; }
body[data-page="home"] .h-cc.p4 { background: var(--pastel-4); border-color: transparent; }
body[data-page="home"] .h-cc.p5 { background: var(--pastel-5); border-color: transparent; }
body[data-page="home"] .h-cc.p6 { background: var(--pastel-6); border-color: transparent; }
body[data-page="home"] .h-cc.oscura { background: var(--ink); border-color: transparent; color: var(--acc-ink); }
body[data-page="home"] .h-cc.oscura .h-cc-eye { color: color-mix(in srgb, var(--acc-ink) 45%, transparent); }
body[data-page="home"] .h-cc.oscura .h-cc-mas { background: color-mix(in srgb, var(--acc-ink) 16%, transparent); color: var(--acc-ink); }
body[data-page="home"] .h-cc.oscura:hover .h-cc-mas { background: var(--acc-ink); color: var(--ink); }
/* la pieza de interfaz de cada card, apoyada contra el borde de abajo */
body[data-page="home"] .h-cc-p {
  display: block;
  margin-right: 2.7rem;
  background: var(--surface);
  border: 1px solid var(--marco);
  border-bottom: 0;
  border-radius: .8rem .8rem 0 0;
  padding: .85rem .9rem;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .6) inset, 0 20px 44px -30px rgba(20, 18, 15, .7);
}
body[data-page="home"] .h-cc.oscura .h-cc-p {
  background: color-mix(in srgb, #fff 8%, transparent);
  border-color: color-mix(in srgb, #fff 12%, transparent);
}
body[data-page="home"] .h-cc .wf-fila { padding: .26rem .1rem; }
body[data-page="home"] .h-cc .h-wtxt { font-size: .72rem; color: color-mix(in srgb, var(--ink) 78%, transparent); }
body[data-page="home"] .h-cc.oscura .h-wtxt { color: color-mix(in srgb, var(--acc-ink) 82%, transparent); }
body[data-page="home"] .h-cc .h-wnum { font-size: .66rem; }
body[data-page="home"] .h-cc.oscura .h-wnum { color: color-mix(in srgb, var(--acc-ink) 50%, transparent); }
body[data-page="home"] .h-cc.oscura .wf-fila + .wf-fila,
body[data-page="home"] .h-cc.oscura .wf-top { border-color: color-mix(in srgb, #fff 10%, transparent); }
body[data-page="home"] .h-cc.oscura .wf-b { background: color-mix(in srgb, #fff 18%, transparent); }
body[data-page="home"] .h-cc.oscura .wf-b.flojo { background: color-mix(in srgb, #fff 9%, transparent); }
body[data-page="home"] .h-cc.oscura .wf-carril { background: color-mix(in srgb, #fff 10%, transparent); }
/* una terminal chiquita para la card del MCP */
body[data-page="home"] .h-cc-term {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  line-height: 1.75;
  color: color-mix(in srgb, var(--acc-ink) 78%, transparent);
  white-space: pre-wrap;
}
/* un número grande para las calculadoras */
body[data-page="home"] .h-cc-cifra {
  display: block;
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1;
  margin-bottom: .2rem;
}
/* las flechas */
body[data-page="home"] .h-carru-nav {
  display: flex;
  justify-content: flex-end;
  gap: .55rem;
  margin-top: -.8rem;
}
body[data-page="home"] .h-carru-nav button {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  border: 0;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
  transition: background .2s ease, opacity .2s ease;
}
body[data-page="home"] .h-carru-nav button:hover { background: color-mix(in srgb, var(--ink) 13%, transparent); }
body[data-page="home"] .h-carru-nav button[disabled] { opacity: .3; cursor: default; }
body[data-page="home"] .h-carru-nav svg { width: .95rem; height: .95rem; }
/* el encabezado con el enlace a la derecha, como en la referencia */
body[data-page="home"] .h-head-fila {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
body[data-page="home"] .h-head-fila .h-vertodo {
  font-size: .88rem;
  color: var(--ink-2);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding-bottom: .3rem;
}
body[data-page="home"] .h-head-fila .h-vertodo:hover { color: var(--ink); }
body[data-page="home"] .h-head-fila .h-vertodo svg { width: .8rem; height: .8rem; }
@media (max-width: 620px) {
  body[data-page="home"] .h-cc { width: 15.5rem; min-height: 21rem; padding: 1.3rem 1.3rem 0; }
  body[data-page="home"] .h-cc h3 { font-size: 1.15rem; }
  body[data-page="home"] .h-head-fila { flex-direction: column; align-items: flex-start; gap: .8rem; }
}
/* el prompt chiquito del paso 4 */
body[data-page="home"] .wf-mini {
  display: block;
  font-family: var(--mono);
  font-size: .62rem;
  line-height: 1.68;
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  padding: .35rem .1rem .1rem;
}
body[data-page="home"] .wf-mini u {
  text-decoration: none;
  background: color-mix(in srgb, var(--verde) 16%, transparent);
  color: color-mix(in srgb, var(--verde) 85%, var(--ink));
  border-radius: .22rem;
  padding: 0 .22rem;
}
/* ============================================================
   22 · la ficha a lo ancho y el bloque de Claude Code
   ============================================================ */

/* ---------- dentro de Claude Code ---------- */

body[data-page="home"] .h-mcp {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
body[data-page="home"] .h-mcp h2 {
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  letter-spacing: -.042em;
  line-height: 1.06;
  margin: .9rem 0 0;
}
body[data-page="home"] .h-mcp > div > p { margin: 1.1rem 0 0; color: var(--ink-2); line-height: 1.6; }
body[data-page="home"] .h-mcp-btn { margin-top: 1.8rem; display: flex; gap: .8rem; flex-wrap: wrap; }
/* la terminal */
body[data-page="home"] .h-term {
  background: #0c0c0d;
  border-radius: 1.2rem;
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
  box-shadow: 0 40px 90px -50px rgba(20, 18, 15, .95);
}
body[data-page="home"] .h-term-top {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
body[data-page="home"] .h-term-top i {
  width: .58rem;
  height: .58rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
}
body[data-page="home"] .h-term-top span {
  margin-left: .5rem;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
body[data-page="home"] .h-term-cuerpo {
  padding: 1.1rem 1.2rem 1.3rem;
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, .82);
}
body[data-page="home"] .h-term-cuerpo p { margin: 0; }
body[data-page="home"] .h-term-cuerpo p + p { margin-top: .75rem; }
body[data-page="home"] .h-term-yo { color: #fff; }
body[data-page="home"] .h-term-yo::before { content: "> "; color: var(--verde); }
body[data-page="home"] .h-term-tool {
  display: flex;
  align-items: center;
  gap: .45rem;
  color: rgba(255, 255, 255, .5);
}
body[data-page="home"] .h-term-tool b {
  color: #c9a8ff;
  font-weight: 400;
}
body[data-page="home"] .h-term-tool em {
  font-style: normal;
  margin-left: auto;
  color: var(--verde);
  font-size: .68rem;
}
body[data-page="home"] .h-term-out { color: rgba(255, 255, 255, .58); padding-left: .9rem; }
body[data-page="home"] .h-term-out u {
  text-decoration: none;
  color: rgba(255, 255, 255, .9);
}
body[data-page="home"] .h-cursor {
  display: inline-block;
  width: .48rem;
  height: .95em;
  vertical-align: -.15em;
  background: var(--verde);
  animation: h-parpadeo 1.1s steps(2) infinite;
}
@keyframes h-parpadeo { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { body[data-page="home"] .h-cursor { animation: none; } }
@media (max-width: 900px) {
  body[data-page="home"] .h-mcp { grid-template-columns: 1fr; gap: 2rem; }
}
/* las dos salidas de la tercera columna: el mismo prompt sirve para el video
   y para el estático, y hasta ahora eso no se decía en ninguna parte */
body[data-page="home"] .h-tsalidas { display: grid; gap: .5rem; margin-top: .8rem; }
body[data-page="home"] .h-tsalidas span {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .8rem;
  border-radius: .8rem;
  background: var(--gris);
  font-size: .76rem;
  color: var(--ink-3);
}
body[data-page="home"] .h-tsalidas b { color: var(--ink); font-weight: 600; }
body[data-page="home"] .h-tsalidas svg { width: .95rem; height: .95rem; color: var(--ink-2); flex: none; }
/* ============================================================
   23 · la ficha del anuncio
   Es la misma pantalla del panel pero armada acá. Se probó con una
   captura y no daba: el video pixelaba al ampliarlo, el recorte se
   rompía solo y la foto se quedaba en claro cuando la página pasaba
   a oscuro. En html sigue el tema y el video corre de verdad.
   ============================================================ */

/* un solo contenedor blanco, como el de la solución: el marco gris de afuera
   partía la pieza en dos cajas y rompía el estilo del resto */
/* el pie de la ficha del criterio: la puerta a los ganadores publicados */
body[data-page="home"] .h-ficha-pie {
  max-width: 44rem;
  margin: 1.6rem auto 0;
  text-align: center;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-2);
}
body[data-page="home"] .h-ficha-pie a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
body[data-page="home"] .h-ficha {
  max-width: 62rem;
  margin: 2.6rem auto 0;
  border-radius: 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 40px 90px -60px rgba(20, 18, 15, .5);
  padding: 1.5rem;
}
body[data-page="home"] .h-ficha-in {
  display: flex;
  align-items: stretch;
  gap: 1.2rem;
}
/* la pieza */
body[data-page="home"] .h-fvideo {
  position: relative;
  border-radius: .8rem;
  overflow: hidden;
  background: var(--gris-2);
  /* toma el alto de la fila y el ancho lo saca del 9:16, así queda alineada
     con el borde de abajo de la columna de datos */
  flex: none;
  align-self: stretch;
  aspect-ratio: 9 / 16;
  height: auto;
}
body[data-page="home"] .h-fvideo video { width: 100%; height: 100%; object-fit: cover; }
body[data-page="home"] .h-fmeta {
  position: absolute;
  top: .5rem;
  left: .5rem;
  display: flex;
  gap: .28rem;
}
body[data-page="home"] .h-fmeta span {
  font-family: var(--mono);
  font-size: .56rem;
  padding: .2rem .42rem;
  border-radius: .32rem;
  background: rgba(12, 12, 13, .62);
  color: #fff;
  backdrop-filter: blur(6px);
}
body[data-page="home"] .h-ftruco {
  position: absolute;
  left: .5rem;
  right: .5rem;
  bottom: .5rem;
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .55rem .65rem;
  border-radius: .6rem;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(10px);
  font-size: .68rem;
  line-height: 1.4;
  color: #171717;
}
body[data-page="home"] .h-ftruco i {
  display: grid;
  place-items: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  background: #171717;
  color: #fff;
  flex: none;
}
body[data-page="home"] .h-ftruco i svg { width: .68rem; height: .68rem; }
body[data-page="home"] .h-ftruco em {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .5;
  margin-bottom: .08rem;
}
/* la columna de datos */
body[data-page="home"] .h-fdatos { flex: 1; min-width: 0; display: grid; gap: .6rem; align-content: start; }
body[data-page="home"] .h-fdatos h3 {
  font-size: 1.55rem;
  letter-spacing: -.035em;
  margin: 0;
}
body[data-page="home"] .h-fchips { display: flex; gap: .35rem; flex-wrap: wrap; }
body[data-page="home"] .h-fchips span {
  padding: .3rem .7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
  font-size: .74rem;
  color: var(--ink-2);
}
body[data-page="home"] .h-fchips b { color: var(--ink); font-weight: 600; }
body[data-page="home"] .h-faire {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
body[data-page="home"] .h-faire i {
  flex: 1;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--ink));
}
/* apenas una veladura sobre el blanco: con el gris del panel las tarjetas
   internas se veían más oscuras que el contenedor y pesaban de más */
body[data-page="home"] .h-fcard {
  background: color-mix(in srgb, var(--ink) 3.5%, var(--surface));
  border-radius: .8rem;
  padding: .85rem 1rem;
}
body[data-page="home"] .h-fveredicto { display: flex; align-items: center; gap: .9rem; }
body[data-page="home"] .h-fanillo { position: relative; width: 3rem; height: 3rem; flex: none; }
body[data-page="home"] .h-fanillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
body[data-page="home"] .h-fanillo circle { fill: none; stroke-width: 3; }
body[data-page="home"] .h-fanillo .pista { stroke: color-mix(in srgb, var(--ink) 10%, transparent); }
body[data-page="home"] .h-fanillo .valor { stroke: var(--verde); stroke-linecap: round; }
body[data-page="home"] .h-fanillo b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--verde);
}
body[data-page="home"] .h-fveredicto strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--verde);
  text-transform: uppercase;
}
body[data-page="home"] .h-fveredicto em {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: .12rem;
}
body[data-page="home"] .h-fejes { display: grid; gap: .42rem; }
body[data-page="home"] .h-feje { display: flex; align-items: center; gap: .7rem; font-size: .78rem; color: var(--ink-2); }
body[data-page="home"] .h-feje span:first-child { width: 5rem; flex: none; }
body[data-page="home"] .h-feje i {
  flex: 1;
  height: .42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  overflow: hidden;
}
body[data-page="home"] .h-feje i b { display: block; height: 100%; border-radius: 999px; background: var(--verde); }
body[data-page="home"] .h-feje.tibio i b { background: var(--tibio); }
body[data-page="home"] .h-feje > b {
  width: 1rem;
  text-align: right;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 400;
  color: var(--ink-2);
  flex: none;
}
body[data-page="home"] .h-fprod-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
body[data-page="home"] .h-fprod-top em {
  font-style: normal;
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
body[data-page="home"] .h-fprod-top strong { font-size: 1.3rem; font-weight: 600; letter-spacing: -.04em; color: var(--verde); }
body[data-page="home"] .h-fprod-nombre { font-size: .95rem; font-weight: 600; letter-spacing: -.02em; margin: .35rem 0 .45rem; }
body[data-page="home"] .h-fprod-barra {
  height: .42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  overflow: hidden;
  margin-bottom: .5rem;
}
body[data-page="home"] .h-fprod-barra i { display: block; height: 100%; border-radius: 999px; background: var(--verde); }
body[data-page="home"] .h-fcard p { margin: 0; font-size: .78rem; line-height: 1.55; color: var(--ink-2); }
body[data-page="home"] .h-fcard h4 {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  letter-spacing: -.02em;
  margin: 0 0 .45rem;
}
body[data-page="home"] .h-fcard h4 svg { width: .95rem; height: .95rem; color: var(--ink-3); }
@media (max-width: 760px) {
  body[data-page="home"] .h-ficha-in { flex-direction: column; }
  body[data-page="home"] .h-fvideo { aspect-ratio: 16 / 10; align-self: auto; }
}
/* ============================================================
   24 · la red de conexiones
   AdCode en el medio, la biblioteca de Meta de un lado y las
   plataformas de generación del otro. Los cables llevan un pulso que
   corre hacia el núcleo y sale del otro lado, para que se lea el
   sentido del flujo sin explicarlo.

   El bloque tiene proporción fija y los nodos van en porcentaje, así
   los cables del svg caen siempre en el mismo lugar. Los intentos con
   coordenadas a ojo se desalineaban en cuanto cambiaba un texto.
   ============================================================ */

body[data-page="home"] .h-red {
  position: relative;
  max-width: 66rem;
  margin: 3rem auto 0;
  aspect-ratio: 1280 / 560;
}
body[data-page="home"] .h-red-cables {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body[data-page="home"] .h-red-cables .via,
body[data-page="home"] .h-map-cables .via,
body[data-page="home"] .h-flujo-cables .via {
  fill: none;
  stroke: color-mix(in srgb, var(--ink) 14%, transparent);
  stroke-width: 1.4;
}
/* el pulso: un trazo corto que recorre el mismo camino */
body[data-page="home"] .h-red-cables .pulso,
body[data-page="home"] .h-map-cables .pulso,
body[data-page="home"] .h-flujo-cables .pulso {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  /* en unidades de pathLength: el pulso ocupa el 7 % del camino, corra por
     el cable corto o por el largo */
  stroke-dasharray: 7 93;
  animation: h-correr 3.4s linear infinite;
}
@keyframes h-correr {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
/* los de la izquierda entran al núcleo, los de la derecha salen de él */
body[data-page="home"] .h-red-cables .pulso.entra,
body[data-page="home"] .h-map-cables .pulso.entra { stroke: #7aa7f0; }
body[data-page="home"] .h-red-cables .pulso.sale,
body[data-page="home"] .h-map-cables .pulso.sale { stroke: var(--verde); }
body[data-page="home"] .h-red-cables .pulso.editor { stroke: #b98df0; }
body[data-page="home"] .pulso.baja { stroke: var(--verde); }
body[data-page="home"] .pulso.d2 { animation-delay: -1.1s; }
body[data-page="home"] .pulso.d3 { animation-delay: -2.2s; }
body[data-page="home"] .pulso.d4 { animation-delay: -1.7s; }
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .pulso { animation: none; opacity: .5; stroke-dasharray: none; }
}
/* los nodos */
body[data-page="home"] .h-nodo {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.1rem .7rem .7rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset,
    0 14px 34px -22px rgba(20, 18, 15, .8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: .88rem;
  font-weight: 550;
  letter-spacing: -.014em;
  white-space: nowrap;
  z-index: 2;
}
body[data-page="home"] .h-nodo i {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: .55rem;
  background: var(--gris);
  flex: none;
}
body[data-page="home"] .h-nodo i svg { width: 1rem; height: 1rem; }
body[data-page="home"] .h-nodo em {
  font-style: normal;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-top: .1rem;
}
body[data-page="home"] .h-nodo b { font-weight: 550; }
/* el núcleo, con su halo respirando */
body[data-page="home"] .h-nucleo {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: 1.15rem 2rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--acc-ink);
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -.035em;
  box-shadow: 0 26px 60px -26px rgba(20, 18, 15, .9);
}
body[data-page="home"] .h-nucleo svg { width: 1.7rem; height: 1.7rem; }
/* El halo va en su propio elemento, no en un ::before del núcleo: adentro de
   un contexto de apilamiento el pseudo con z-index negativo se pinta encima
   del fondo del padre y dejaba la píldora translúcida. */
body[data-page="home"] .h-halo {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 1;
  width: 19rem;
  height: 6.5rem;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: conic-gradient(from 200deg, #cfe0f8, #e3d4f7, #cde9d8, #f8d3bd, #cfe0f8);
  filter: blur(22px);
  opacity: .85;
  pointer-events: none;
  animation: h-respirar 5s ease-in-out infinite;
}
/* el translate del centrado va adentro del keyframe: si no, la animación lo
   pisa y el halo aparece corrido medio ancho a la derecha */
@keyframes h-respirar {
  0%, 100% { opacity: .72; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .h-halo { animation: none; }
}
/* Safari en el teléfono recorta el conic con blur en un rectángulo */
@media (max-width: 767px) {
  body[data-page="home"] .h-halo { display: none; }
}
/* Los rótulos de los dos lados se fueron, los sacó Richard. El mapa no los
   necesitaba: las tarjetas dicen qué es cada cosa y el texto de arriba de la
   sección ya explica qué entra y dónde se produce. */
/* apilado en pantallas chicas: los cables no tienen sentido ahí */
body[data-page="home"] .h-red-lista { display: none; }
@media (max-width: 900px) {
  body[data-page="home"] .h-red { aspect-ratio: auto; max-width: 26rem; margin-top: 2rem; }
  /* el diagrama entero se apaga y queda la lista: los cables no dicen nada
     apilados. Ojo con el > : sin él también se apagaban los de la lista y
     los nodos salían dos veces. */
  body[data-page="home"] .h-red-cables,
  body[data-page="home"] .h-halo,
  body[data-page="home"] .h-red > .h-nodo,
  body[data-page="home"] .h-red > .h-nucleo { display: none; }
  body[data-page="home"] .h-red-lista .h-nodo,
  body[data-page="home"] .h-red-lista .h-nucleo {
    position: static;
    transform: none;
    width: 100%;
    justify-content: flex-start;
  }
  body[data-page="home"] .h-red-lista .h-nucleo { justify-content: center; font-size: 1.25rem; padding: .9rem 1.5rem; }
  /* El mapa del teléfono.

     Antes acá había una lista: los ocho nodos apilados uno abajo del otro con
     un cable recto al costado. Richard lo quiere como mapa, igual que en el
     escritorio pero de arriba abajo: las tres plataformas donde se produce, el
     núcleo, las tres fuentes que entran y los dos editores.

     Cada tramo de cable es su propio svg estirado con
     preserveAspectRatio="none". Así la boca de cada cable cae siempre en el
     centro de su columna, mida lo que mida la pantalla, sin una sola
     coordenada escrita a ojo. El vector-effect deja el trazo del mismo grosor
     aunque el svg se estire, que es lo que se rompe cuando se estira un svg. */
  body[data-page="home"] .h-red-lista {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0;
    max-width: 22rem;
    margin-inline: auto;
  }
  /* la fila de un tramo, en columnas parejas: los cables cuentan con eso */
  body[data-page="home"] .h-map-fila {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .5rem;
    width: 100%;
  }
  body[data-page="home"] .h-map-fila.dos {
    grid-template-columns: repeat(2, 1fr);
    width: 71%;
  }
  /* la tarjeta: el nombre arriba y el icono abajo, centrados */
  body[data-page="home"] .h-red-lista .h-nodo {
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    transform: none;
    flex-direction: column-reverse;
    /* en column-reverse el space-between deja el icono pegado abajo y el
       nombre arriba: sin esto, la tarjeta de dos renglones ("Biblioteca de
       Meta") empuja su icono y los tres quedan a distinta altura */
    justify-content: space-between;
    gap: .55rem;
    width: 100%;
    box-sizing: border-box;
    padding: .85rem .5rem;
    border-radius: 1.15rem;
    text-align: center;
    white-space: normal;
    font-size: .78rem;
    line-height: 1.25;
    z-index: 2;
    /* la sombra del nodo de escritorio es larga y con las tarjetas a medio
       centímetro una de otra se pisaban: entre dos quedaba una raya gris */
    box-shadow:
      0 1px 0 color-mix(in srgb, #fff 70%, transparent) inset,
      0 9px 20px -16px rgba(20, 18, 15, .75);
  }
  /* el subtítulo no entra en un tercio de pantalla y partido en tres renglones
     desarma la fila. El nombre alcanza: lo que hace cada uno lo dice el texto
     de arriba de la sección */
  body[data-page="home"] .h-red-lista .h-nodo em { display: none; }
  body[data-page="home"] .h-red-lista .h-nodo i {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: .72rem;
  }
  body[data-page="home"] .h-red-lista .h-nodo i svg { width: 1.15rem; height: 1.15rem; }

  /* los tramos de cable, entre fila y fila */
  body[data-page="home"] .h-map-cables {
    display: block;
    width: 100%;
    height: 3.1rem;
    position: relative;
    z-index: 0;
  }
  body[data-page="home"] .h-map-cables.alto { height: 4.2rem; }

  body[data-page="home"] .h-red-lista .h-nucleo {
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: auto;
    justify-content: center;
    gap: .6rem;
    font-size: 1.35rem;
    padding: .9rem 1.7rem;
    z-index: 2;
  }

  /* Las manchas de color detrás del núcleo. El halo del escritorio es un
     conic con filter: blur() y en el teléfono Safari lo recorta en un
     rectángulo, así que acá son tres radiales, que ya salen difusos y no
     necesitan filtro. El elemento no ocupa lugar en la columna: se apoya
     donde arranca el núcleo y crece hacia los dos lados. */
  body[data-page="home"] .h-map-glow {
    position: relative;
    z-index: 0;
    width: 0;
    height: 0;
  }
  body[data-page="home"] .h-map-glow::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 1.75rem;
    width: 21rem;
    height: 12rem;
    transform: translate(-50%, -50%);
    background:
      radial-gradient(closest-side at 50% 26%, color-mix(in srgb, #f8d3bd 80%, transparent), transparent),
      radial-gradient(closest-side at 64% 72%, color-mix(in srgb, #e3d4f7 78%, transparent), transparent),
      radial-gradient(closest-side at 34% 70%, color-mix(in srgb, #cfe0f8 72%, transparent), transparent);
    opacity: .9;
    pointer-events: none;
  }
  /* de noche los pasteles sobre el fondo oscuro son una mancha lechosa */
  [data-theme="dark"] body[data-page="home"] .h-map-glow::before { opacity: .38; }

  /* Sin rótulos: los sacó Richard. El mapa se explica solo con la forma y el
     texto de arriba de la sección ya dice qué entra y dónde se produce; tres
     chips en la columna eran tres frenos en un recorrido de siete tarjetas. */
}
/* ============================================================
   25 · el fundador
   Card gris con radio grande sobre blanco, la marca enorme cortada
   de fondo y la foto como detalle al lado de la firma.
   ============================================================ */

body[data-page="home"] .h-fund {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gris);
  border-radius: 2.5rem;
  padding: clamp(2.2rem, 5vw, 4rem) clamp(2rem, 5vw, 4rem) clamp(2.2rem, 4.5vw, 3.4rem);
}
/* la marca de fondo, cortada por los bordes de la card */
body[data-page="home"] .h-fund-marca {
  position: absolute;
  right: -.06em;
  bottom: -.34em;
  z-index: -1;
  font-size: clamp(7rem, 17vw, 15rem);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .8;
  color: color-mix(in srgb, var(--ink) 5%, transparent);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
body[data-page="home"] .h-fund blockquote {
  margin: 0;
  max-width: 44rem;
  font-size: clamp(1.2rem, 2.2vw, 1.7rem);
  line-height: 1.48;
  letter-spacing: -.028em;
  color: var(--ink);
  text-wrap: pretty;
}
body[data-page="home"] .h-fund blockquote b { font-weight: 650; }
/* .h-firma ya era la marca gigante del cierre y su regla `.h-firma span`
   le metía 289px a este texto. Por eso la del autor tiene su propio nombre. */
body[data-page="home"] .h-autor {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-top: 2rem;
}
body[data-page="home"] .h-autor img {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 999px;
  object-fit: cover;
  flex: none;
  border: 2px solid var(--surface);
  box-shadow: 0 8px 20px -12px rgba(20, 18, 15, .7);
}
body[data-page="home"] .h-autor-txt { display: block; line-height: 1.35; }
body[data-page="home"] .h-autor-txt b { display: block; font-size: .95rem; font-weight: 600; letter-spacing: -.02em; }
body[data-page="home"] .h-autor-txt small { display: block; font-size: .78rem; color: var(--ink-2); }
@media (max-width: 860px) {
  body[data-page="home"] .h-fund { border-radius: 1.8rem; }
}
/* las comillas de la cita, del mismo tono que la marca del fondo */
body[data-page="home"] .h-comillas {
  position: absolute;
  right: clamp(2rem, 6vw, 5.5rem);
  top: clamp(2.4rem, 6vw, 4.5rem);
  z-index: -1;
  width: clamp(5.5rem, 11vw, 10rem);
  height: auto;
  color: color-mix(in srgb, var(--ink) 8%, transparent);
  pointer-events: none;
}
@media (max-width: 860px) {
  body[data-page="home"] .h-comillas { width: 4.5rem; right: 1.4rem; top: 1.4rem; opacity: .7; }
}
/* la imagen de la card del carrusel: apoyada contra el borde de abajo,
   sangrando a los lados como en las cards de Apple */
body[data-page="home"] .h-cc-img {
  display: block;
  margin: 0 -1.6rem;
  overflow: hidden;
}
body[data-page="home"] .h-cc-img img { display: block; width: 100%; height: auto; }
body[data-page="home"] .h-cc.con-img {
  padding-bottom: 0;
  background: var(--surface);
}
[data-theme="dark"] body[data-page="home"] .h-cc.con-img .h-cc-img img {
  /* las imágenes nacen sobre #f2f2f3: en oscuro se apagan para no ser un
     rectángulo blanco en el medio de la card */
  filter: brightness(.42) contrast(1.12);
}
body[data-page="home"] .h-cc.con-img .h-cc-mas {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ---------- lo que entrega AdCode, dentro de la solución ---------- */

/* el producto sale de una lista ya cargada, no se escribe cada vez */
body[data-page="home"] .h-tp-producto {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding-bottom: .85rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--line);
}
body[data-page="home"] .h-tp-et {
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
body[data-page="home"] .h-tp-sel {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .3rem .75rem .3rem .3rem;
  border-radius: .75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .78rem;
  font-weight: 550;
  color: var(--ink);
}
body[data-page="home"] .h-tp-sel svg { width: .7rem; height: .7rem; opacity: .5; margin-left: .15rem; }
/* la foto de lo que se vende adentro del selector: es lo que hace entender de
   una que el prompt sale con el producto de uno adentro, y no un ejemplo */
body[data-page="home"] .h-tp-sel img {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: .6rem;
  object-fit: cover;
  background: #fff;
  flex: none;
}
/* El estado va adentro de la tarjeta, debajo del nombre. Afuera, al lado del
   selector, no entraba en la columna y se caía a un renglón propio, suelto
   contra el borde izquierdo. Y adentro dice lo que tiene que decir en el lugar
   donde se lo busca: qué producto está elegido y de dónde salió. */
body[data-page="home"] .h-tp-sel-txt { display: block; line-height: 1.25; }
body[data-page="home"] .h-tp-guardado {
  font-size: .64rem;
  font-weight: 500;
  font-style: normal;
  color: var(--verde);
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-top: .12rem;
}
body[data-page="home"] .h-tp-guardado::before {
  content: "";
  width: .32rem;
  height: .32rem;
  border-radius: 999px;
  background: var(--verde);
}

/* el bloque del prompt se lleva el alto que sobra, así el botón queda abajo de
   todo y la columna cierra a la misma altura que los dos creativos */
body[data-page="home"] .h-tp-bloque { display: flex; flex-direction: column; margin-bottom: .9rem; }
body[data-page="home"] .h-tprompt .h-tp-bloque { flex: 1; min-height: 0; margin-bottom: 0; }
/* Cuando la columna se angosta, el mismo texto ocupa más renglones y no entra
   en el alto del creativo, así que se recorta.

   El desvanecido de abajo es un degradado al color del fondo, no una máscara
   sobre el texto: la máscara se come la última línea aunque el texto entre
   entero, y el degradado, cuando no hay nada debajo, es blanco sobre blanco y
   no se ve. Aparece solo cuando hay prompt cortado, que es cuando corresponde:
   un prompt de verdad sigue más abajo. */
body[data-page="home"] .h-tprompt code {
  min-height: 0;
  overflow: hidden;
}
body[data-page="home"] .h-tprompt .h-tp-bloque { position: relative; }
/* El degradado va en el media query y no suelto: apilado, el prompt se lee
   entero y no hay nada que cortar, y una regla de más abajo en el archivo le
   ganaba a la que lo apagaba adentro del bloque del teléfono. Le pasó a Richard:
   en el teléfono el último renglón salía desvanecido sin razón. */
@media (min-width: 901px) {
  body[data-page="home"] .h-tprompt .h-tp-bloque::after {
    content: '';
    position: absolute;
    left: 1px; right: 1px; bottom: 1px;
    height: 2.4rem;
    border-radius: 0 0 .6rem .6rem;
    background: linear-gradient(180deg, transparent, var(--code-bg) 82%);
    pointer-events: none;
  }
}
body[data-page="home"] .h-tp-bloque:last-of-type { margin-bottom: 0; }
body[data-page="home"] .h-tp-rot {
  display: block;
  font-family: var(--mono);
  font-size: .57rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .32rem;
}
body[data-page="home"] .h-tp-txt {
  display: block;
  font-size: .78rem;
  line-height: 1.55;
  color: var(--ink-2);
}
[data-theme="dark"] body[data-page="home"] .h-tprompt { --code-ink: #b9b7b3; }
body[data-page="home"] .h-tprompt .h-tp-bloque code {
  display: block;
  background: var(--code-bg);
  color: var(--code-ink);
  border: 1px solid var(--code-line);
  border-radius: .6rem;
  padding: .7rem .8rem;
  font-size: .68rem;
  line-height: 1.65;
  /* Se encoge hasta lo que le deje la caja. Este bloque tenía `flex: none` y le
     ganaba por especificidad a la regla de arriba: el texto tomaba el alto de su
     contenido, el recorte no llegaba a pasar nunca y entre 900 y 1280, donde la
     columna se angosta y el mismo prompt ocupa más renglones, el texto se salía
     de la tarjeta y caía encima de la sección siguiente. Lo encontró Richard.

     Qué hace con lo que no entra se decide abajo de todo, en los dos media
     queries: acá y allá las reglas pesan lo mismo y manda la que va después. */
  flex: 1;
  min-height: 0;
}

/* las transcripciones nacen cerradas: son largas de verdad y el bloque no
   puede medir el doble que las columnas de al lado. Los tres puntos avisan
   que lo que se ve es un recorte. */
body[data-page="home"] .h-tp-des {
  display: block;
  margin-bottom: .7rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .7rem;
}
body[data-page="home"] .h-tp-des > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .3rem .6rem;
  align-items: center;
  cursor: pointer;
  list-style: none;
}
body[data-page="home"] .h-tp-des > summary::-webkit-details-marker { display: none; }
body[data-page="home"] .h-tp-des .h-tp-rot { grid-column: 1; margin-bottom: 0; }
body[data-page="home"] .h-tp-des .h-tp-flecha {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: .8rem;
  height: .8rem;
  color: var(--ink-3);
  transition: transform .25s ease;
}
body[data-page="home"] .h-tp-des[open] .h-tp-flecha { transform: rotate(180deg); }
body[data-page="home"] .h-tp-corte {
  grid-column: 1;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body[data-page="home"] .h-tp-pts { color: var(--ink-3); }
body[data-page="home"] .h-tp-des[open] .h-tp-corte { display: none; }
body[data-page="home"] .h-tp-des .h-tp-txt { padding-top: .45rem; }
body[data-page="home"] .h-tp-des:hover .h-tp-rot { color: var(--ink-2); }


/* ============================================================
   26 · las gráficas de la ficha, animadas
   Crecen cuando la sección entra en pantalla, con el reveal que ya
   existe. El valor va en --v y la animación lo usa de destino, así
   cambiar un número no toca el css.
   ============================================================ */

body[data-page="home"] .h-feje i b,
body[data-page="home"] .h-fprod-barra i {
  width: var(--v, 0%);
  transition: width 1.1s cubic-bezier(.2, .8, .2, 1);
}
html.js body[data-page="home"] .rv:not(.in) .h-feje i b,
html.js body[data-page="home"] .rv:not(.in) .h-fprod-barra i { width: 0; }
/* cada barra arranca un pelo después que la anterior */
body[data-page="home"] .h-feje:nth-child(2) i b { transition-delay: .08s; }
body[data-page="home"] .h-feje:nth-child(3) i b { transition-delay: .16s; }
body[data-page="home"] .h-feje:nth-child(4) i b { transition-delay: .24s; }
body[data-page="home"] .h-feje:nth-child(5) i b { transition-delay: .32s; }

/* el anillo se dibuja solo */
body[data-page="home"] .h-fanillo .valor {
  stroke-dasharray: var(--v, 0) 100;
  transition: stroke-dasharray 1.3s cubic-bezier(.2, .8, .2, 1);
}
html.js body[data-page="home"] .rv:not(.in) .h-fanillo .valor { stroke-dasharray: 0 100; }

/* el número sube junto con el anillo */
body[data-page="home"] .h-fanillo b,
body[data-page="home"] .h-fprod-top strong {
  transition: opacity .6s ease .5s;
}
html.js body[data-page="home"] .rv:not(.in) .h-fanillo b,
html.js body[data-page="home"] .rv:not(.in) .h-fprod-top strong { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .h-feje i b,
  body[data-page="home"] .h-fprod-barra i,
  body[data-page="home"] .h-fanillo .valor,
  body[data-page="home"] .h-fanillo b,
  body[data-page="home"] .h-fprod-top strong { transition: none; }
  html.js body[data-page="home"] .rv:not(.in) .h-feje i b { width: var(--v, 0%); }
  html.js body[data-page="home"] .rv:not(.in) .h-fprod-barra i { width: var(--v, 0%); }
  html.js body[data-page="home"] .rv:not(.in) .h-fanillo .valor { stroke-dasharray: var(--v) 100; }
  html.js body[data-page="home"] .rv:not(.in) .h-fanillo b,
  html.js body[data-page="home"] .rv:not(.in) .h-fprod-top strong { opacity: 1; }
}

/* el puntaje debajo de la pieza que encontró el radar, con el mismo anillo
   que la ficha grande */
body[data-page="home"] .h-tpunt {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: .8rem;
  padding: .7rem .85rem;
  border-radius: .9rem;
  background: var(--gris);
}
body[data-page="home"] .h-tpunt .h-fanillo { width: 2.4rem; height: 2.4rem; }
body[data-page="home"] .h-tpunt .h-fanillo b { font-size: .8rem; }
body[data-page="home"] .h-tpunt-txt { display: block; line-height: 1.3; }
body[data-page="home"] .h-tpunt-txt b {
  display: block;
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--verde);
  text-transform: uppercase;
}
body[data-page="home"] .h-tpunt-txt small {
  display: block;
  font-family: var(--mono);
  font-size: .55rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: .1rem;
}
/* el badge del puntaje ya no hace falta arriba del video */
body[data-page="home"] .h-tpieza .h-punt { display: none; }
/* La calificación va encima del creativo, en el lugar que tenía el sello del
   truco. Es lo que hay que mirar de esa columna, y abajo en una tarjeta aparte
   le robaba alto al video. Sobre el video oscuro, los grises del panel claro
   desaparecen: el carril del anillo, el número y el rótulo se aclaran acá. */
body[data-page="home"] .h-tpunt.sobre {
  position: absolute;
  left: .6rem; right: .6rem; bottom: .6rem;
  margin: 0;
  padding: .55rem .7rem;
  border-radius: .75rem;
  background: rgba(12, 12, 13, .58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-page="home"] .h-tpunt.sobre .h-fanillo .pista { stroke: rgba(255, 255, 255, .26); }
body[data-page="home"] .h-tpunt.sobre .h-fanillo b { color: #fff; }
body[data-page="home"] .h-tpunt.sobre .h-tpunt-txt b { color: #7ed6a0; }
body[data-page="home"] .h-tpunt.sobre .h-tpunt-txt small { color: rgba(255, 255, 255, .6); }

/* Los enlaces de formatos e industrias siguen acá porque son dieciséis
   páginas que no reciben enlace desde ninguna otra parte del home. En tres
   cards pesaban demasiado; en una línea corrida conservan el valor de
   rastreo sin ocupar media pantalla. */
body[data-page="home"] .h-explorar-linea {
  margin: 2.4rem 0 0;
  max-width: 62rem;
  font-size: .82rem;
  line-height: 2;
  color: var(--ink-3);
}
body[data-page="home"] .h-explorar-linea a {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
body[data-page="home"] .h-explorar-linea a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ============================================================
   27 · un solo tamaño para los párrafos de sección
   Estaban en tres medidas distintas: los que llevan la clase del
   encabezado en .97rem, y los de Claude Code, el cierre y el problema
   heredando del body o con su propio valor.
   ============================================================ */
body[data-page="home"] .h-head p,
body[data-page="home"] .h-mcp > div > p,
body[data-page="home"] .h-cierre p:not(.h-note) {
  font-size: .97rem;
  line-height: 1.6;
  color: var(--ink-2);
}


/* ============================================================
   28 · los iconos, centrados de verdad
   Todas las cajas de icono heredaban el line-height del cuerpo y el
   grid les reservaba el hueco de la línea base, así que el glifo caía
   dos pixeles y medio por debajo del centro. Se nota apilado en una
   lista de ocho.
   ============================================================ */
body[data-page="home"] .plan-lista li i,
body[data-page="home"] .plan-quien i,
body[data-page="home"] .h-nodo i,
body[data-page="home"] .h-autor i,
body[data-page="home"] .h-ftruco i,
body[data-page="home"] .h-tpunt .h-fanillo,
body[data-page="home"] .h-carru-nav button,
body[data-page="home"] .h-cc-mas,
body[data-page="home"] .h-tflecha i { line-height: 0; }

/* ============================================================
   29 · los tres beneficios
   Reemplazan a la lista de dolores con cruces. Puesta justo debajo del
   panel del hero, esa lista se leía como si el problema fuera nuestro
   producto, y ocho cruces seguidas desalientan antes de explicar nada.
   ============================================================ */



/* ============================================================
   30 · el menú desplegado en tablet
   La píldora del nav mantiene su radio de 999px al abrirse, y con la
   caja en 312px de alto ese radio se resuelve como media elipse: las
   esquinas se comen los enlaces de arriba y de abajo. Abierta, la
   píldora se convierte en una caja de esquinas normales.
   ============================================================ */



/* ============================================================
   La franja de la app, en el home
   ============================================================
   Va en negro y no en el gris de las secciones deep. Dos motivos: la app es
   oscura y una captura oscura sobre un fondo claro se lee como una foto
   pegada, y la franja cae entre dos secciones que ya alternan gris y blanco,
   así que un tercer tono es lo único que la separa de las dos.

   Los tres colores son fijos y no salen de los tokens a propósito: es una
   franja negra en los dos temas. Con --bg y --ink puestos, de noche la franja
   desaparecía contra el fondo del sitio y de día invertía el texto.

   Nació como dos columnas, con el texto a la izquierda y los teléfonos a la
   derecha, y la columna de texto era un cabezal, un párrafo y tres viñetas
   con su título en negrita y su explicación abajo. Richard la miró y dijo
   masacote, con razón: la sección que muestra una app terminaba siendo un
   bloque de texto con unas fotos al lado. Ahora el cabezal va centrado y
   corto, los teléfonos ocupan el ancho y lo que antes eran viñetas son tres
   píldoras ancladas alrededor, del mismo tipo que las del esquema de
   "AdCode es el centro". */
body[data-page="home"] .h-ios {
  --ios-bg: #0b0b0c;
  --ios-ink: #f5f4f2;
  --ios-ink-2: rgba(245, 244, 242, .62);
  position: relative;
  background: var(--ios-bg);
  color: var(--ios-ink);
  overflow: hidden;
}
/* De noche el fondo del sitio ya es #0c0c0d, así que una franja negra queda
   invisible y la sección se funde con las dos de al lado. Se sube un punto y
   se le ponen las dos líneas, que es lo único que la separa con el tema
   oscuro puesto. */
[data-theme="dark"] body[data-page="home"] .h-ios {
  --ios-bg: #141416;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
/* El foco detrás de los teléfonos. Va en un pseudo y no en el background de
   la sección porque arriba se le suma el color plano, y los dos juntos en una
   sola propiedad se pisan al cambiar de tema. */
body[data-page="home"] .h-ios::before {
  content: "";
  position: absolute;
  top: 46%;
  left: 50%;
  width: 58rem;
  height: 46rem;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(63, 159, 95, .12) 0%, rgba(63, 159, 95, .045) 40%, transparent 68%);
  pointer-events: none;
}
body[data-page="home"] .h-ios > .wrap { position: relative; }
body[data-page="home"] .h-ios .h-pill {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14);
  color: var(--ios-ink-2);
  box-shadow: none;
}
body[data-page="home"] .h-ios .h-head h2 { color: var(--ios-ink); }
body[data-page="home"] .h-ios .h-head p { color: var(--ios-ink-2); }

/* La escena: los tres teléfonos y las píldoras que los anotan */
body[data-page="home"] .h-ios-escena {
  position: relative;
  margin: 3rem auto 0;
  max-width: 67rem;
}
body[data-page="home"] .h-ios-tels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;
  max-width: 38rem;
  margin: 0 auto;
}
body[data-page="home"] .h-ios-tels .tel { max-width: 15.5rem; }
body[data-page="home"] .h-ios-tels .tel:nth-child(1),
body[data-page="home"] .h-ios-tels .tel:nth-child(3) { transform: scale(.86) translateY(1.6rem); z-index: 1; }
body[data-page="home"] .h-ios-tels .tel:nth-child(1) { margin-right: -3.4rem; }
body[data-page="home"] .h-ios-tels .tel:nth-child(3) { margin-left: -3.4rem; }
body[data-page="home"] .h-ios-tels .tel:nth-child(2) { z-index: 2; }

/* El botón verde, el mismo de la landing de la app: la franja empuja a la
   prueba igual que el resto del home, y sobre negro el botón oscuro del sitio
   no existe.

   Acá vivían tres píldoras que anotaban los teléfonos, del tipo de las del
   esquema de "AdCode es el centro". Richard las sacó: con el cabezal arriba y
   los tres iPhone, la sección ya dice lo que tiene que decir, y las píldoras
   la volvían a llenar de texto. Lo que decían está en la landing, con su
   pantalla al lado. */
body[data-page="home"] .h-ios-btn {
  background: var(--verde);
  color: #fff;
  border-color: transparent;
}
body[data-page="home"] .h-ios-btn:hover { background: #379055; color: #fff; }
body[data-page="home"] .h-ios-pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  margin-top: 3rem;
}
body[data-page="home"] .h-ios-nota { font-size: .8rem; color: var(--ios-ink-2); }
body[data-page="home"] .h-ios-mas {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  color: var(--ios-ink-2);
  border-bottom: 1px solid rgba(245, 244, 242, .25);
  padding-bottom: .12rem;
  transition: color .18s ease, border-color .18s ease;
}
body[data-page="home"] .h-ios-mas:hover { color: var(--ios-ink); border-color: rgba(245, 244, 242, .6); }

@media (max-width: 1080px) {
  body[data-page="home"] .h-ios-tels { max-width: 34rem; }
}
@media (max-width: 560px) {
  body[data-page="home"] .h-ios-tels { grid-template-columns: 1fr 1fr; }
  body[data-page="home"] .h-ios-tels .tel:nth-child(3) { display: none; }
  body[data-page="home"] .h-ios-tels .tel { max-width: 10.5rem; }
}

/* ============================================================
   La página del regalo (/regalo)
   ============================================================
   El regalo de 14 días sin tarjeta se pinta con esta misma hoja: es la única
   página además de la portada que lleva body[data-page="home"], y cada uno de
   sus bloques es un bloque de la portada con otro texto
   (site/build/pages/regalo.js).

   Acá abajo va solo lo que allá no existe: el formulario de dos campos, que es
   el CTA de esa página, y cuatro ajustes que dependen de estar en ella. Los
   ajustes cuelgan de `.rg`, la clase del body, para que no se los lleve
   también la portada.

   El formulario aparece dos veces, en el hero y en el cierre, así que estas
   reglas no pueden depender de dónde está. La piel es la del hero: campos en
   píldora con el mismo radio y el mismo borde que los botones, y el botón es
   el primario de siempre.
   ============================================================ */

/* La portada dejó el hueco de la píldora del eyebrow y nunca puso la píldora
   (de ahí el margin-top de 4.5rem de su h1). Acá la píldora existe y ocupa ese
   hueco, así que el título arranca pegado a ella. */
body[data-page="home"].rg .h-hero .h-pill { margin-top: 1.4rem; }
body[data-page="home"].rg .h-hero h1 { margin-top: 0; }

body[data-page="home"] .rg-caja {
  max-width: 46rem;
  margin: 2.1rem auto 0;
  /* la barra es sticky y tapa el formulario cuando se llega por #regalo */
  scroll-margin-top: 6rem;
}

/* En escritorio los dos campos y el botón en una fila. El correo se lleva la
   columna ancha porque es el que se corta: un nombre entra en quince
   caracteres y una dirección no. */
body[data-page="home"] .rg-form {
  display: grid;
  grid-template-columns: 1fr 1.35fr auto;
  gap: .6rem;
  align-items: center;
  text-align: left;
}
body[data-page="home"] .rg-form > * { min-width: 0; }
body[data-page="home"] .rg-campo { display: block; }
body[data-page="home"] .rg-campo input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  /* 16px y no menos: con menos, Safari hace zoom al tocar el campo y la
     pantalla queda corrida para siempre */
  font-size: 16px;
  padding: .92rem 1.3rem;
  color: var(--ink);
  border-radius: 100px;
  border: 1px solid var(--marco);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
body[data-page="home"] .rg-campo input::placeholder { color: var(--ink-3); }
body[data-page="home"] .rg-campo input:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
body[data-page="home"] .rg-form button { justify-content: center; white-space: nowrap; }

/* La nota gris de abajo es la misma línea del hero de la portada (.h-nota):
   se le saca el ancho máximo, que acá lo pone la caja del formulario. */
body[data-page="home"] .rg-nota { max-width: none; }
body[data-page="home"] .rg-legal {
  margin: .6rem 0 0;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--ink-3);
}
body[data-page="home"] .rg-legal a { color: var(--ink-2); text-decoration: underline; }

body[data-page="home"] .rg-error {
  margin: .8rem 0 0;
  padding: .6rem .75rem;
  font-size: .85rem;
  color: var(--hot);
  background: var(--hot-soft);
  border-radius: var(--radius-xs);
  text-align: left;
}
body[data-page="home"] .rg-error a { color: var(--hot); text-decoration: underline; }

/* Lo que reemplaza al formulario cuando la cuenta quedó abierta. Va con la
   forma de las tarjetas de la portada: superficie, borde fino y radio grande. */
body[data-page="home"] .rg-listo {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 1.6rem 1.7rem;
  text-align: left;
}
body[data-page="home"] .rg-listo b {
  display: block;
  font-size: 1.1rem;
  letter-spacing: -.02em;
  margin-bottom: .4rem;
}
body[data-page="home"] .rg-listo p { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.6; }

/* En el cierre el formulario cae en la columna angosta de las dos del
   .h-cierre-in, que a 1440 mide menos de la mitad del ancho: ahí la fila de
   tres no entra y los campos quedan de cuatro caracteres. */
body[data-page="home"] .h-cierre .rg-caja { margin-top: 0; }
body[data-page="home"] .h-cierre .rg-form { grid-template-columns: 1fr; }
/* Y apilado, la nota quedaba pegada al botón: el aire que en el hero pone
   la fila del formulario acá lo tiene que poner la nota. */
/* En el cierre la nota no va: el párrafo de arriba ya dice que el correo
   llega en el momento y que el regalo termina solo. Y la legal heredaba el
   tamaño de los <p> del cierre y se leía como un párrafo más. */
body[data-page="home"] .h-cierre .rg-caja .rg-nota { display: none; }
body[data-page="home"] .h-cierre .rg-caja .rg-legal { margin: .9rem 0 0; font-size: .74rem; line-height: 1.5; max-width: none; }

/* El botón de la barra hereda el gap de .btn, pensado para un icono al lado
   del texto. Con dos trozos de texto se leía "cuenta  de regalo", con hueco
   doble. El espacio lo pone el propio texto del span. */
body[data-page="home"] .nav-right .btn[data-cta="regalo-barra"] { gap: 0; white-space: pre; }

@media (max-width: 700px) {
  body[data-page="home"] .rg-form { grid-template-columns: 1fr; }
}