/* Base de MediaLab, acotada a .c-pagina para convivir con el tema de WordPress */
.c-pagina {
  --azul: #3B37D8; --azul-hero: #4B45C7; --naranja: #FF3131; --tinta: #0F0147;
  --negro: #1A1A1A; --gris: #9B9B9B; --gris-claro: #F2F2F2; --blanco: #FFFFFF;
  --linea: #E2E2E8; --linea-tinta: rgba(255,255,255,.16); --texto-tenue: #6E6E78;
  --sobre-tinta: rgba(255,255,255,.68); --azul-suave: rgba(59,55,216,.08);
  --ancho: 1240px; --pad: 40px; --gap: 28px; --medida: 68ch;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px;
  --e7: 48px; --e8: 64px; --e9: 96px; --e10: 128px; --e11: 168px;
  --t-micro: 11px; --t-meta: 12px;
  --t-menor: clamp(14px, .18vw + 13.4px, 15px);
  --t-base: clamp(16px, .28vw + 15.1px, 18px);
  --t-mayor: clamp(18px, .55vw + 16.2px, 22px);
  --t-titulo-s: clamp(20px, .9vw + 17.1px, 27px);
  --t-titulo: clamp(26px, 1.7vw + 20.6px, 40px);
  --t-titulo-l: clamp(32px, 3vw + 22.4px, 58px);
  --t-display: clamp(40px, 5.4vw + 22.7px, 84px);
  --t-display-xl: clamp(46px, 7.4vw + 22.3px, 108px);
  --curva: cubic-bezier(.2,.7,.3,1); --lento: .5s; --medio: .3s; --rapido: .18s;

  background: var(--blanco);
  color: var(--negro);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  width: 100%;
}
/* Resets con especificidad de elemento (0,0,1): igualan a los de Astra y ganan por
   orden de carga; cualquier clase de la página los sigue pisando */
:where(.c-pagina) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(.c-pagina) img { display: block; max-width: 100%; height: auto; }
:where(.c-pagina) a { color: inherit; text-decoration: none; }
:where(.c-pagina) :is(h1, h2, h3, h4) { margin: 0; font-weight: 400; }
:where(.c-pagina) p { margin: 0 0 1.2em; }
:where(.c-pagina) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.c-pagina) li::marker { content: none; }
:where(.c-pagina) li { margin: 0; }
:where(.c-pagina) button { font: inherit; color: inherit; }
.c-pagina ::selection { background: var(--naranja); color: var(--blanco); }
.c-pagina a:focus-visible, .c-pagina button:focus-visible { outline: 2px solid var(--naranja); outline-offset: 3px; }
.c-pagina .contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--pad); }
.c-pagina .banda-tinta { background: var(--tinta); color: var(--blanco); }
.c-pagina .etiqueta { font-size: var(--t-micro); letter-spacing: .24em; text-transform: uppercase; font-weight: 600; line-height: 1; }
.c-pagina .boton {
  display: inline-flex; align-items: center; gap: var(--e3); border: 0;
  background: var(--naranja); color: var(--blanco);
  font-family: Anton, sans-serif; text-transform: uppercase; letter-spacing: .1em;
  font-size: var(--t-mayor); line-height: 1.2; padding: var(--e5) var(--e7);
  border-radius: 0; cursor: pointer; transition: background-color var(--medio) var(--curva);
}
.c-pagina .boton svg { transition: transform var(--medio) var(--curva); }
.c-pagina .boton:hover { background: var(--tinta); color: var(--blanco); }
.c-pagina .boton:hover svg { transform: translateX(6px); }
@media (max-width: 1099px) { .c-pagina { --pad: 28px; --e9: 72px; --e10: 88px; } }
@media (max-width: 699px) {
  .c-pagina { --pad: 20px; --gap: 20px; --e8: 40px; --e9: 56px; --e10: 64px; --medida: 100%; }
  .c-pagina .boton { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .c-pagina *, .c-pagina *::before, .c-pagina *::after { transition: none !important; animation: none !important; }
}
/* El contenedor de Elementor no debe encajonar la página */
.elementor-widget-html:has(.c-pagina), .e-con:has(> .e-con-inner .c-pagina), .e-con:has(.c-pagina) { padding: 0 !important; max-width: none !important; }
/* La cinta mide miles de px: sin esto, el widget flex de Elementor crece hasta su ancho */
.elementor-widget-html:has(.c-pagina) { width: 100%; min-width: 0; max-width: 100%; flex: 1 1 100%; }
.c-pagina, .c-pagina .c-cinta { min-width: 0; max-width: 100%; }
.c-pagina .solo-lectores { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* ==========================================================================
   MediaLab — /iacomunicacion
   Página de venta del curso «IA para Comunicación y Marketing».
   Se apoya en ../styles.css (tokens, barra, pie, botones) y sólo agrega lo
   que una página de venta necesita: ritmo de bandas, comparativas, demo del
   prompt, oferta y preguntas frecuentes. Prefijo «c-» para no pisar nada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 · Primitivas de la página
   -------------------------------------------------------------------------- */


/* El naranja de marca (#FF3131) da 3,7:1 sobre blanco: alcanza para titulares
   grandes pero no para rótulos de 11 px ni para el texto blanco del botón.
   --acento es el naranja que se usa en texto chico: más oscuro sobre fondos
   claros, el de marca sobre tinta (5,1:1). El botón baja un punto (4,5:1). */
.c-pagina { --naranja-texto: #D11A1A; --naranja-boton: #E8201F; --acento: var(--naranja-texto); }
.c-pagina .banda-tinta,
.c-pagina .c-caso--bien,
.c-pagina .c-camino--metodo,
.c-pagina .c-chat,
.c-pagina .c-reloj { --acento: var(--naranja); }
/* La tarjeta de precio es blanca aunque viva sobre tinta */
.c-pagina .c-ticket { --acento: var(--naranja-texto); }
.c-banda { padding-block: var(--e10); position: relative; }
.c-banda--gris { background: var(--gris-claro); }
.c-banda--naranja { background: var(--naranja); color: var(--tinta); }

.c-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  color: var(--acento);
  margin-bottom: var(--e5);
}
.c-kicker::before {
  content: "";
  width: 28px; height: 2px;
  background: currentColor;
}
.c-kicker--centro { justify-content: center; }
.c-kicker--centro::after {
  content: "";
  width: 28px; height: 2px;
  background: currentColor;
}

.c-titulo {
  font-family: Anton, "Arial Narrow", Impact, sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--tinta);
  font-size: var(--t-titulo-l);
  line-height: 1.02;
  letter-spacing: .01em;
  margin: 0 0 var(--e6);
  max-width: 20ch;
}
.c-titulo em { font-style: normal; color: var(--naranja); }
.banda-tinta .c-titulo { color: var(--blanco); }
.c-banda--naranja .c-titulo { color: var(--tinta); }
.c-banda--naranja .c-titulo em { color: var(--blanco); }

.c-texto {
  font-size: var(--t-mayor);
  line-height: 1.6;
  color: #34343E;
  max-width: 58ch;
}
.banda-tinta .c-texto { color: var(--sobre-tinta); }
.c-texto b { color: var(--tinta); font-weight: 600; }
.banda-tinta .c-texto b { color: var(--blanco); }

.c-centro { text-align: center; }
.c-centro .c-titulo,
.c-centro .c-texto { margin-inline: auto; }

/* CTA: el botón naranja de la casa + la línea de confianza debajo */
.c-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e4);
  margin-top: var(--e7);
}
.c-centro .c-cta { align-items: center; }
.c-cta .boton { text-decoration: none; }
.c-pagina .boton { background: var(--naranja-boton); min-height: 48px; }
.c-pagina .boton:hover { background: var(--tinta); }
.c-pagina .boton:focus-visible { outline: 3px solid var(--blanco); outline-offset: 3px; box-shadow: 0 0 0 6px var(--tinta); }
.banda-tinta .c-cta .boton:hover { background: var(--blanco); color: var(--tinta); }
.c-banda--naranja .c-cta .boton { background: var(--tinta); }
.c-banda--naranja .c-cta .boton:hover { background: var(--blanco); color: var(--tinta); }

.c-confianza {
  margin: 0;
  color: var(--texto-tenue);
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
}
.banda-tinta .c-confianza { color: var(--sobre-tinta); }
.c-banda--naranja .c-confianza { color: rgba(15, 1, 71, .72); }

/* --------------------------------------------------------------------------
   02 · Tapa
   -------------------------------------------------------------------------- */
.c-tapa {
  position: relative;
  overflow: hidden;
  padding: var(--e10) 0 var(--e8);
}

/* El globo de alambre de la presentación, a escala de fondo */
.c-globo {
  position: absolute;
  width: min(900px, 120vw);
  aspect-ratio: 1;
  left: 50%;
  top: -12%;
  transform: translateX(-50%);
  color: var(--naranja);
  opacity: .22;
  pointer-events: none;
}
.c-globo--lado {
  left: auto;
  right: -260px;
  top: 50%;
  width: 620px;
  transform: translateY(-50%);
  opacity: .14;
}

.c-tapa .contenedor { position: relative; z-index: 2; }

.c-tapa-sello {
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  margin-bottom: var(--e6);
}
.c-tapa-sello b {
  background: var(--naranja-boton);
  color: var(--blanco);
  padding: var(--e2) var(--e3);
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
}
.c-tapa-sello span {
  font-size: var(--t-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
}

.c-tapa-titular {
  font-family: Anton, "Arial Narrow", Impact, sans-serif;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--naranja);
  font-size: var(--t-display-xl);
  line-height: .96;
  letter-spacing: .005em;
  margin: 0 auto var(--e5);
  max-width: 14ch;
}
.c-tapa-bajada {
  font-size: var(--t-titulo-s);
  line-height: 1.35;
  color: var(--blanco);
  max-width: 34ch;
  margin: 0 auto;
}
.c-tapa-cta {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--e4) var(--e6);
  margin: var(--e6) 0 var(--e8);
}
.c-enlace-sec {
  color: var(--blanco);
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  padding: var(--e3) 0;
  border-bottom: 2px solid var(--naranja);
  transition: color var(--medio) var(--curva);
}
.c-enlace-sec:hover { color: var(--naranja); }
.c-enlace-sec:focus-visible { outline: 2px solid var(--naranja); outline-offset: 4px; }

/* Cinta de imágenes: corre sola, se detiene al pasar el mouse */
.c-cinta {
  position: relative;
  z-index: 2;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.c-cinta-pista {
  display: flex;
  gap: var(--e5);
  width: max-content;
  animation: c-correr 48s linear infinite;
}
.c-cinta:hover .c-cinta-pista { animation-play-state: paused; }
.c-cinta figure {
  margin: 0;
  flex: 0 0 auto;
  width: clamp(240px, 26vw, 360px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid var(--linea-tinta);
}
.c-cinta img { width: 100%; height: 100%; object-fit: cover; }
.c-cinta figure.c-contener img { object-fit: contain; padding: var(--e4); }

@keyframes c-correr {
  to { transform: translateX(calc(-50% - var(--e5) / 2)); }
}

.c-tapa-pie {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  margin-top: var(--e6);
  padding-inline: var(--pad);
  color: var(--sobre-tinta);
  font-size: var(--t-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
}
.c-tapa-pie i { font-style: normal; color: var(--naranja); }

/* --------------------------------------------------------------------------
   02b · Cinta de palabras (tapa sin fotos)
   El método en palabras, con hitos entre ellas. La usan /futuros y /prompting.
   -------------------------------------------------------------------------- */
.f-cinta .c-cinta-pista {
  align-items: center;
  /* El gap tiene que ser el mismo que usa la animación (-50% - gap/2) */
  animation-duration: 36s;
}
.f-palabra {
  flex: 0 0 auto;
  font-family: Anton, "Arial Narrow", Impact, sans-serif;
  text-transform: uppercase;
  font-size: clamp(48px, 7vw, 104px);
  line-height: 1;
  letter-spacing: .01em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .55);
}
.f-palabra--acento { color: var(--naranja); -webkit-text-stroke: 0; }
.f-hito {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--e3);
  margin-inline: var(--e3);
  color: var(--naranja);
  font-size: var(--t-micro);
  letter-spacing: .24em;
  font-weight: 700;
}
.f-hito::before {
  content: "";
  width: 10px; height: 10px;
  border: 1.5px solid var(--naranja);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   03 · Dos columnas genéricas
   -------------------------------------------------------------------------- */
.c-dos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e8) var(--e9);
  align-items: center;
}

/* --------------------------------------------------------------------------
   04 · Datos duros (el problema)
   -------------------------------------------------------------------------- */
.c-dato-grande {
  border-top: 2px solid var(--naranja);
  padding-top: var(--e5);
}
.c-dato-grande strong {
  display: block;
  font-family: Anton, sans-serif;
  font-weight: 400;
  color: var(--naranja);
  font-size: clamp(88px, 12vw, 180px);
  line-height: .9;
}
.c-dato-grande p { color: var(--tinta); font-size: var(--t-mayor); line-height: 1.45; max-width: 36ch; }
.c-dato-grande cite {
  display: block;
  font-style: normal;
  color: var(--texto-tenue);
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
}

.c-porcentajes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-top: var(--e8);
}
.c-porcentajes li {
  border-top: 1px solid var(--linea);
  padding-top: var(--e4);
}
.c-porcentajes b {
  display: block;
  font-family: Anton, sans-serif;
  font-weight: 400;
  color: var(--tinta);
  font-size: var(--t-titulo);
  line-height: 1;
  margin-bottom: var(--e3);
}
.c-porcentajes span {
  display: block;
  color: var(--texto-tenue);
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   05 · Comparativa: el mismo pedido, dos resultados
   -------------------------------------------------------------------------- */
.c-comparar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: var(--e8);
}
.c-caso {
  border: 1px solid var(--linea);
  background: var(--blanco);
  padding: var(--e6);
  display: flex;
  flex-direction: column;
}
.c-caso--bien {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--blanco);
}
.c-caso-cabecera {
  display: flex;
  justify-content: space-between;
  gap: var(--e4);
  padding-bottom: var(--e4);
  margin-bottom: var(--e5);
  border-bottom: 1px solid var(--linea);
  color: var(--texto-tenue);
}
.c-caso--bien .c-caso-cabecera { border-color: var(--linea-tinta); color: var(--sobre-tinta); }
.c-caso-cabecera .etiqueta:last-child { color: var(--acento); }

.c-caso h3 {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: var(--t-titulo-s);
  line-height: 1.1;
  color: var(--tinta);
  margin-bottom: var(--e5);
}
.c-caso--bien h3 { color: var(--naranja); }

.c-prompt {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--t-menor);
  line-height: 1.65;
  background: var(--gris-claro);
  padding: var(--e5);
  margin: 0 0 var(--e5);
  color: var(--negro);
}
.c-caso--bien .c-prompt { background: rgba(255, 255, 255, .06); color: var(--blanco); }
.c-prompt mark { background: none; color: var(--naranja); font-weight: 700; }

.c-caso p:last-child { margin: auto 0 0; color: var(--texto-tenue); font-size: var(--t-menor); }
.c-caso--bien p:last-child { color: var(--sobre-tinta); }

/* --------------------------------------------------------------------------
   06 · Caso paso a paso
   -------------------------------------------------------------------------- */
.c-caso-real {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--e8);
  align-items: center;
  margin-top: var(--e8);
}
.c-caso-real figure { margin: 0; }
.c-caso-real figcaption {
  color: var(--sobre-tinta);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  margin-top: var(--e3);
}
.c-caso-pasos li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e5);
  padding: var(--e5) 0;
  border-top: 1px solid var(--linea-tinta);
}
.c-caso-pasos li:last-child { border-bottom: 1px solid var(--linea-tinta); }
.c-caso-pasos b {
  font-family: Anton, sans-serif;
  font-weight: 400;
  color: var(--naranja);
  font-size: var(--t-titulo-s);
  line-height: 1;
}
.c-caso-pasos strong {
  display: block;
  font-family: Anton, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: var(--t-mayor);
  color: var(--blanco);
  margin-bottom: var(--e1);
}
.c-caso-pasos span { color: var(--sobre-tinta); font-size: var(--t-menor); }

/* Carrusel horizontal: los proyectos de MediaLab */
.c-carril {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--e5);
  margin-top: var(--e8);
  scrollbar-width: thin;
  scrollbar-color: var(--naranja) transparent;
}
.c-carril > * { scroll-snap-align: start; flex: 0 0 auto; }
.c-carril-aviso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e3);
  margin-top: var(--e3);
  color: var(--texto-tenue);
  font-size: var(--t-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
}
.banda-tinta .c-carril-aviso { color: var(--sobre-tinta); }

/* --------------------------------------------------------------------------
   07 · Cómo se hace: demo del prompt
   -------------------------------------------------------------------------- */
.c-pasos3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: var(--e8);
}
.c-paso { border-top: 2px solid var(--tinta); padding-top: var(--e5); }
.c-paso .etiqueta { color: var(--acento); display: block; margin-bottom: var(--e4); }
.c-paso h3 {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  color: var(--tinta);
  font-size: var(--t-titulo-s);
  line-height: 1.1;
  margin-bottom: var(--e3);
}
.c-paso p { color: var(--texto-tenue); font-size: var(--t-menor); margin: 0; }

.c-demo {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--e7);
  margin-top: var(--e9);
  align-items: stretch;
}
.c-demo-piezas { display: flex; flex-direction: column; gap: var(--e2); }
.c-pieza {
  display: flex;
  align-items: center;
  gap: var(--e4);
  width: 100%;
  text-align: left;
  border: 1px solid var(--linea);
  background: var(--blanco);
  padding: var(--e4) var(--e5);
  cursor: pointer;
  border-radius: 0;
  transition: background-color var(--medio) var(--curva),
              border-color var(--medio) var(--curva),
              color var(--medio) var(--curva);
}
.c-pieza b {
  font-family: Anton, sans-serif;
  font-weight: 400;
  color: var(--acento);
  font-size: var(--t-mayor);
  width: 2ch;
}
.c-pieza span { display: flex; flex-direction: column; gap: 2px; }
.c-pieza strong {
  font-size: var(--t-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tinta);
}
.c-pieza small { color: var(--texto-tenue); font-size: var(--t-meta); }
.c-pieza:hover { border-color: var(--tinta); }
.c-pieza[aria-pressed="true"] { background: var(--tinta); border-color: var(--tinta); }
.c-pieza[aria-pressed="true"] strong { color: var(--blanco); }
.c-pieza[aria-pressed="true"] small { color: var(--sobre-tinta); }

/* Ventana de chat esquemática */
.c-chat {
  display: flex;
  flex-direction: column;
  background: var(--tinta);
  color: var(--blanco);
  min-height: 420px;
}
.c-chat-barra {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e4) var(--e5);
  border-bottom: 1px solid var(--linea-tinta);
}
.c-chat-barra i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--linea-tinta);
}
.c-chat-barra i:first-child { background: var(--naranja); }
.c-chat-barra span {
  margin-left: auto;
  color: var(--sobre-tinta);
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
}
.c-chat-cuerpo {
  flex: 1;
  padding: var(--e6);
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--t-base);
  line-height: 1.75;
}
.c-chat-cuerpo [data-parte] {
  color: rgba(255, 255, 255, .3);
  transition: color var(--lento) var(--curva), background-color var(--lento) var(--curva);
}
.c-chat-cuerpo [data-parte].visible { color: var(--blanco); }
.c-chat-cuerpo [data-parte].activa { color: var(--naranja); }
.c-chat-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding: var(--e4) var(--e5);
  border-top: 1px solid var(--linea-tinta);
  color: var(--sobre-tinta);
  font-size: var(--t-meta);
}
.c-chat-pie output { color: var(--naranja); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: var(--t-micro); }

/* --------------------------------------------------------------------------
   08 · Qué incluye: módulos
   -------------------------------------------------------------------------- */
.c-modulos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-top: var(--e8);
}
.c-modulo {
  border: 1px solid var(--linea-tinta);
  padding: var(--e6);
  display: flex;
  flex-direction: column;
  transition: border-color var(--medio) var(--curva), background-color var(--medio) var(--curva);
}
.c-modulo:hover { border-color: var(--naranja); background: rgba(255, 255, 255, .03); }
.c-modulo--doble {
  grid-column: span 2;
  background: var(--naranja);
  border-color: var(--naranja);
  color: var(--tinta);
}
.c-modulo--doble:hover { background: var(--naranja); }
.c-modulo .etiqueta { color: var(--naranja); margin-bottom: var(--e5); }
.c-modulo--doble .etiqueta { color: var(--tinta); }
.c-modulo h3 {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  color: var(--blanco);
  font-size: var(--t-titulo-s);
  line-height: 1.1;
  margin-bottom: var(--e4);
}
.c-modulo--doble h3 { color: var(--tinta); font-size: var(--t-titulo); }
.c-modulo p { color: var(--sobre-tinta); font-size: var(--t-menor); line-height: 1.6; margin: 0 0 var(--e4); }
.c-modulo--doble p { color: rgba(15, 1, 71, .82); font-size: var(--t-base); }
.c-modulo ul { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--e2); }
.c-modulo li {
  border: 1px solid var(--linea-tinta);
  color: var(--blanco);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  padding: var(--e1) var(--e2);
}
.c-modulo--doble li { border-color: rgba(15, 1, 71, .3); color: var(--tinta); }

/* Bloque «100% práctico»: cómo es una clase y qué te llevás */
.c-practico {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--e7) var(--e8);
  margin-top: var(--e9);
  padding-top: var(--e8);
  border-top: 1px solid var(--linea-tinta);
}
.c-titulo--m { font-size: var(--t-titulo); }
.c-practico-intro .c-texto { margin-bottom: 0; }

.c-practico-pasos { align-self: start; }
.c-practico-pasos li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--e4);
  align-items: baseline;
  padding: var(--e5) 0;
  border-top: 1px solid var(--linea-tinta);
}
.c-practico-pasos li:last-child { border-bottom: 1px solid var(--linea-tinta); }
.c-practico-pasos b {
  font-family: Anton, sans-serif;
  font-weight: 400;
  color: var(--naranja);
  font-size: var(--t-titulo-s);
  line-height: 1;
}
.c-practico-pasos strong {
  display: block;
  font-family: Anton, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: var(--t-mayor);
  line-height: 1.15;
  color: var(--blanco);
  margin-bottom: var(--e1);
}
.c-practico-pasos span { color: var(--sobre-tinta); font-size: var(--t-menor); line-height: 1.5; }

.c-practico-llevas {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.c-practico-llevas li {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  background: rgba(255, 255, 255, .04);
  border-top: 2px solid var(--naranja);
  padding: var(--e6);
}
.c-practico-llevas .etiqueta { color: var(--naranja); }
.c-practico-llevas strong {
  font-family: Anton, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: var(--t-mayor);
  line-height: 1.15;
  color: var(--blanco);
}
.c-practico-llevas p { margin: 0; color: var(--sobre-tinta); font-size: var(--t-menor); line-height: 1.55; }

/* --------------------------------------------------------------------------
   08b · Programa: tarjeta de proyecto final (ocupa dos columnas)
   -------------------------------------------------------------------------- */
.c-modulo--final {
  grid-column: span 2;
  border: 2px solid var(--naranja);
}
.c-modulo--final:hover { background: rgba(255, 49, 49, .06); }
.c-modulo--final h3 { font-size: var(--t-titulo); }

/* --------------------------------------------------------------------------
   09 · Para quién es
   -------------------------------------------------------------------------- */
.c-perfiles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: var(--e8);
  border-top: 1px solid var(--linea);
  border-left: 1px solid var(--linea);
}
.c-perfiles li {
  border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding: var(--e5);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--e4);
  transition: background-color var(--medio) var(--curva);
}
.c-perfiles li:hover { background: var(--tinta); }
.c-perfiles b {
  font-family: Anton, sans-serif;
  font-weight: 400;
  color: var(--acento);
  font-size: var(--t-mayor);
}
.c-perfiles span {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  color: var(--tinta);
  font-size: var(--t-mayor);
  line-height: 1.12;
  letter-spacing: .02em;
  transition: color var(--medio) var(--curva);
}
.c-perfiles li:hover span { color: var(--blanco); }
.c-perfiles li:hover b { color: var(--naranja); }

/* --------------------------------------------------------------------------
   10 · Testimonios
   -------------------------------------------------------------------------- */
.c-testimonio {
  width: clamp(280px, 30vw, 380px);
  border: 1px solid var(--linea);
  background: var(--blanco);
  padding: var(--e6);
  display: flex;
  flex-direction: column;
  gap: var(--e5);
}
.c-testimonio .etiqueta { color: var(--acento); }
.c-testimonio blockquote {
  margin: 0;
  color: var(--negro);
  font-size: var(--t-base);
  line-height: 1.55;
}
.c-testimonio footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding-top: var(--e4);
  border-top: 1px solid var(--linea);
}
.c-iniciales {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--tinta);
  color: var(--naranja);
  font-family: Anton, sans-serif;
  font-size: 15px;
  letter-spacing: .04em;
}
.c-testimonio footer b { display: block; color: var(--tinta); font-size: var(--t-menor); }
.c-testimonio footer small { color: var(--texto-tenue); font-size: var(--t-meta); }

/* --------------------------------------------------------------------------
   11 · Los dos caminos
   -------------------------------------------------------------------------- */
.c-caminos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: var(--e8);
}
.c-camino { padding: var(--e7); display: flex; flex-direction: column; }
.c-camino--solo { border: 1px dashed var(--gris); }
.c-camino--metodo { background: var(--tinta); color: var(--blanco); }
.c-camino > .etiqueta { color: var(--texto-tenue); margin-bottom: var(--e4); }
.c-camino--metodo > .etiqueta { color: var(--naranja); }
.c-camino h3 {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: var(--t-titulo);
  line-height: 1.05;
  color: var(--tinta);
  margin-bottom: var(--e6);
}
.c-camino--metodo h3 { color: var(--blanco); }

/* El bucle: un paso por vez, y vuelta a empezar */
.c-bucle {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 260px;
}
.c-bucle svg { width: 220px; height: 220px; color: var(--linea); }
.c-bucle svg .c-bucle-arco { color: var(--naranja); transition: stroke-dashoffset var(--lento) var(--curva); }
.c-bucle-texto {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 calc(50% - 90px);
}
.c-bucle-texto output {
  color: var(--texto-tenue);
  font-size: var(--t-micro);
  letter-spacing: .2em;
  font-weight: 600;
  margin-bottom: var(--e2);
}
.c-bucle-texto p {
  margin: 0;
  color: var(--tinta);
  font-weight: 600;
  font-size: var(--t-menor);
  line-height: 1.35;
}
.c-bucle-lista { display: none; }

.c-recta li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e5);
  padding: var(--e5) 0;
  border-top: 1px solid var(--linea-tinta);
}
.c-recta b { font-family: Anton, sans-serif; font-weight: 400; color: var(--naranja); font-size: var(--t-titulo-s); line-height: 1; }
.c-recta strong { display: block; color: var(--blanco); font-size: var(--t-base); }
.c-recta span { color: var(--sobre-tinta); font-size: var(--t-menor); }

/* --------------------------------------------------------------------------
   12 · El momento es ahora + oferta
   -------------------------------------------------------------------------- */
/* «No necesitás»: cuatro celdas iguales en vez de chips de largo dispar */
.c-sin-bloque { margin: var(--e6) 0 var(--e7); }
.c-sin-rotulo { color: var(--sobre-tinta); margin: 0 0 var(--e4); }
.c-sin {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--linea-tinta);
  border-left: 1px solid var(--linea-tinta);
}
.c-sin li {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: 72px;
  padding: var(--e4) var(--e5);
  border-right: 1px solid var(--linea-tinta);
  border-bottom: 1px solid var(--linea-tinta);
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: var(--t-mayor);
  line-height: 1.15;
  color: var(--blanco);
}
.c-sin-icono {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  padding: 3px;
  border: 1.5px solid var(--naranja);
  border-radius: 50%;
  fill: none;
  stroke: var(--naranja);
  stroke-width: 2;
  stroke-linecap: round;
}

.c-oferta {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--gap);
  margin-top: var(--e8);
  align-items: start;
}
.c-pila {
  border: 1px solid var(--linea-tinta);
  padding: var(--e7);
}
.c-pila h3 {
  color: var(--naranja);
  font-size: var(--t-micro);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: var(--e5);
}
.c-pila li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e5);
  padding: var(--e4) 0;
  border-top: 1px solid var(--linea-tinta);
  color: var(--blanco);
}
.c-pila li small { display: block; color: var(--sobre-tinta); font-size: var(--t-meta); margin-top: 2px; }
.c-pila li em {
  flex: 0 0 auto;
  font-style: normal;
  color: var(--naranja);
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
}

.c-ticket {
  background: var(--blanco);
  color: var(--tinta);
  padding: var(--e7);
  position: sticky;
  top: var(--e6);
}
.c-ticket .etiqueta { color: var(--acento); display: block; margin-bottom: var(--e4); }
.c-ticket h3 {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  font-size: var(--t-titulo-s);
  line-height: 1.1;
  margin-bottom: var(--e5);
}
.c-precio {
  font-family: Anton, sans-serif;
  color: var(--tinta);
  font-size: var(--t-display);
  line-height: 1;
  margin: 0 0 var(--e2);
}
.c-precio small { font-size: .32em; letter-spacing: .1em; color: var(--texto-tenue); margin-right: .3em; vertical-align: .9em; }
.c-precio.c-consultar { font-size: var(--t-titulo); }
.c-ticket-nota { color: var(--texto-tenue); font-size: var(--t-menor); margin-bottom: var(--e5); }

.c-reloj {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e2);
  margin: 0 0 var(--e5);
}
.c-reloj[hidden] { display: none; }
.c-reloj div {
  background: var(--tinta);
  color: var(--blanco);
  text-align: center;
  padding: var(--e3) 0;
}
.c-reloj b {
  display: block;
  font-family: Anton, sans-serif;
  font-weight: 400;
  font-size: var(--t-titulo-s);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.c-reloj span { font-size: 10px; letter-spacing: .2em; color: var(--sobre-tinta); font-weight: 600; }

.c-ticket .boton { width: 100%; justify-content: space-between; }
.c-ticket .boton:hover { background: var(--tinta); }

.c-cupos {
  margin: var(--e4) 0 0;
  text-align: center;
  color: var(--acento);
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
}
.c-cupos[hidden] { display: none; }

.c-proceso {
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--linea);
  counter-reset: paso;
}
.c-proceso h4 {
  color: var(--texto-tenue);
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: var(--e3);
}
.c-proceso li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: var(--e2);
  font-size: var(--t-menor);
  line-height: 1.45;
  margin-bottom: var(--e2);
  color: var(--negro);
}
.c-proceso li::before {
  content: counter(paso, decimal-leading-zero);
  color: var(--acento);
  font-weight: 700;
  font-size: var(--t-meta);
  padding-top: 2px;
}

/* --------------------------------------------------------------------------
   13 · Hecho y usado por nosotros
   -------------------------------------------------------------------------- */
.c-proyecto {
  width: clamp(280px, 34vw, 420px);
  border-top: 2px solid var(--naranja);
  padding-top: var(--e5);
}
.c-proyecto .etiqueta { color: var(--azul); display: block; margin-bottom: var(--e4); }
.c-proyecto h3 {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  color: var(--tinta);
  font-size: var(--t-titulo);
  line-height: 1.02;
  margin-bottom: var(--e5);
}
.c-flujo { display: grid; gap: 0; }
.c-flujo li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--e3);
  align-items: start;
  padding: var(--e3) 0;
  border-top: 1px solid var(--linea);
  font-size: var(--t-menor);
  line-height: 1.4;
}
.c-flujo li b {
  color: var(--acento);
  font-size: var(--t-meta);
  font-weight: 700;
  padding-top: 2px;
}
.c-flujo li small { display: block; color: var(--texto-tenue); font-size: var(--t-meta); }

.c-sellos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: var(--e8);
}
.c-sellos li { border-top: 1px solid var(--linea); padding-top: var(--e4); }
.c-sellos strong {
  display: block;
  font-family: Anton, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--tinta);
  font-size: var(--t-mayor);
  margin-bottom: var(--e2);
}
.c-sellos span { color: var(--texto-tenue); font-size: var(--t-menor); }

/* --------------------------------------------------------------------------
   14 · Hecho a tu medida
   -------------------------------------------------------------------------- */
/* Ruta de cuatro pasos unida por una línea: se lee como un proceso, no como tarjetas sueltas */
.c-ruta {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-top: var(--e8);
}
.c-ruta::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 22px;
  right: 22px;
  height: 1px;
  background: var(--linea-tinta);
}
.c-ruta li { position: relative; display: flex; flex-direction: column; gap: var(--e3); }
.c-ruta b {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-bottom: var(--e3);
  background: var(--tinta);
  border: 1.5px solid var(--naranja);
  border-radius: 50%;
  font-family: Anton, sans-serif;
  font-weight: 400;
  color: var(--naranja);
  font-size: 17px;
}
.c-ruta strong {
  font-family: Anton, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: var(--t-mayor);
  line-height: 1.15;
  color: var(--blanco);
}
.c-ruta span { color: var(--sobre-tinta); font-size: var(--t-menor); line-height: 1.55; }

.c-medida {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: var(--e8);
}
.c-medida li {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: var(--e6);
  border: 1px solid var(--linea-tinta);
  transition: border-color var(--medio) var(--curva);
}
.c-medida li:hover { border-color: var(--naranja); }
.c-medida .etiqueta { color: var(--naranja); }
.c-medida strong {
  font-family: Anton, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: var(--t-mayor);
  line-height: 1.15;
  color: var(--blanco);
}
.c-medida p { margin: 0; color: var(--sobre-tinta); font-size: var(--t-menor); line-height: 1.55; }

/* --------------------------------------------------------------------------
   14b · «A tu medida» sobre fondo blanco
   (en /iacomunicacion vive sobre tinta; en /futuros y /prompting, sobre blanco)
   -------------------------------------------------------------------------- */
.f-ruta-clara::before { background: var(--linea); }
.f-ruta-clara b { background: var(--blanco); border-color: var(--acento); color: var(--acento); }
.f-ruta-clara strong { color: var(--tinta); }
.f-ruta-clara span { color: var(--texto-tenue); }

.f-medida-clara li { border-color: var(--linea); }
.f-medida-clara li:hover { border-color: var(--tinta); }
.f-medida-clara .etiqueta { color: var(--acento); }
.f-medida-clara strong { color: var(--tinta); }
.f-medida-clara p { color: var(--texto-tenue); }

/* --------------------------------------------------------------------------
   15 · Ética
   -------------------------------------------------------------------------- */
.c-etica {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  margin-top: var(--e8);
}
.c-etica article { border-top: 2px solid var(--tinta); padding-top: var(--e5); }
.c-etica h3 {
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  color: var(--tinta);
  font-size: var(--t-titulo-s);
  margin-bottom: var(--e3);
}
.c-etica p { color: var(--texto-tenue); font-size: var(--t-menor); margin: 0; }
.c-respuestas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e7);
}
.c-respuestas li {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  background: var(--tinta);
  color: var(--blanco);
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  padding: var(--e3) var(--e4);
}
.c-respuestas li::before { content: "+"; color: var(--naranja); font-size: 14px; }

/* --------------------------------------------------------------------------
   16 · Preguntas frecuentes
   -------------------------------------------------------------------------- */
.c-faq { max-width: 880px; margin: var(--e8) auto 0; }
.c-faq details { border-top: 1px solid var(--linea); }
.c-faq details:last-child { border-bottom: 1px solid var(--linea); }
.c-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e5);
  padding: var(--e5) 0;
  cursor: pointer;
  list-style: none;
  font-family: Anton, sans-serif;
  text-transform: uppercase;
  color: var(--tinta);
  font-size: var(--t-mayor);
  letter-spacing: .02em;
  line-height: 1.2;
  transition: color var(--medio) var(--curva);
}
.c-faq summary::-webkit-details-marker { display: none; }
.c-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--acento);
  font-family: Inter, sans-serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  transition: transform var(--medio) var(--curva);
}
.c-faq details[open] summary::after { transform: rotate(45deg); }
.c-faq summary:hover { color: var(--acento); }
.c-faq summary:focus-visible { outline: 2px solid var(--naranja); outline-offset: 4px; }
.c-faq details p a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.c-faq details p {
  color: #34343E;
  font-size: var(--t-base);
  line-height: 1.65;
  max-width: 68ch;
  margin: 0 0 var(--e5);
}

/* --------------------------------------------------------------------------
   17 · Botón flotante (móvil)
   -------------------------------------------------------------------------- */
.c-flotante {
  display: none;
}

/* --------------------------------------------------------------------------
   18 · Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
  .c-dos,
  .c-caso-real,
  .c-practico { grid-template-columns: 1fr; gap: var(--e7); }
  .c-sin { grid-template-columns: 1fr 1fr; }
  .c-demo { grid-template-columns: 1fr; }
  .c-modulos { grid-template-columns: 1fr 1fr; }
  .c-modulo--doble { grid-column: 1 / -1; }
  .c-modulo--final { grid-column: 1 / -1; }
  .c-perfiles { grid-template-columns: repeat(2, 1fr); }
  .c-oferta { grid-template-columns: 1fr; }
  .c-ticket { position: static; }
  .c-ruta { grid-template-columns: 1fr 1fr; row-gap: var(--e7); }
  .c-ruta::before { display: none; }
  .c-porcentajes { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 699px) {
  .c-tapa { padding-top: var(--e9); }
  .c-comparar,
  .c-caminos,
  .c-pasos3,
  .c-sellos,
  .c-etica,
  .c-modulos { grid-template-columns: 1fr; }
  .c-modulo--doble { grid-column: span 1; }
  .c-modulo--final { grid-column: span 1; }
  .c-practico-llevas { grid-template-columns: 1fr; }
  .c-practico-llevas li { padding: var(--e5); }
  .c-sin li { min-height: 64px; padding: var(--e3) var(--e4); font-size: var(--t-base); }
  .c-medida { grid-template-columns: 1fr; }
  .c-medida li { padding: var(--e5); }
  /* En el teléfono la ruta es vertical: la línea baja por los números */
  .c-ruta { grid-template-columns: 1fr; row-gap: 0; }
  .c-ruta li { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--e4); row-gap: var(--e1); padding-bottom: var(--e6); }
  .c-ruta li:not(:last-child)::after { content: ""; position: absolute; left: 22px; top: 44px; bottom: 0; width: 1px; background: var(--linea-tinta); }
  .f-ruta-clara li:not(:last-child)::after { background: var(--linea); }
  .c-ruta b { grid-row: span 2; margin: 0; }
  .c-perfiles li { min-height: 120px; padding: var(--e4); }
  .c-camino, .c-pila, .c-ticket, .c-caso { padding: var(--e5); }
  .c-chat { min-height: 0; }
  .c-tapa-cta { flex-direction: column; align-items: center; }
  /* Entre 420 y 700 px un botón a todo el ancho se vuelve una franja */
  .c-cta .boton { max-width: 420px; }
  .c-ticket .boton { letter-spacing: .06em; }

  /* Demo: las cinco piezas en una fila, pegadas al chat que construyen */
  .c-demo { gap: var(--e3); margin-top: var(--e8); }
  .c-demo-piezas { flex-direction: row; gap: var(--e1); }
  .c-pieza {
    flex: 1 1 0;
    flex-direction: column;
    gap: var(--e1);
    padding: var(--e3) var(--e1);
    text-align: center;
    min-height: 64px;
    justify-content: center;
  }
  .c-pieza b { width: auto; }
  .c-pieza strong { font-size: 9px; letter-spacing: .08em; }
  .c-pieza small { display: none; }
  .c-chat-cuerpo { padding: var(--e5); font-size: var(--t-menor); }
  .c-titulo { max-width: none; }
  .c-cta .boton { width: 100%; }

  /* En el teléfono la llamada a la acción queda siempre a mano */
  .c-flotante {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    justify-content: space-between;
    align-items: center;
    gap: var(--e4);
    padding: var(--e3) var(--pad);
    background: var(--naranja);
    color: var(--blanco);
    font-family: Anton, sans-serif;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: var(--t-mayor);
    transform: translateY(100%);
    transition: transform var(--medio) var(--curva);
    background: var(--naranja-boton);
  }
  .c-flotante.visible { transform: none; }
  .c-pagina { padding-bottom: 56px; }
  /* El «volver arriba» del tema no debe tapar la llamada fija */
  body:has(.c-flotante.visible) #ast-scroll-top { bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sin animación la cinta se recorre a mano */
  .c-cinta { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}