/* ══════════════════════════════════════════════════════════════════════════
   LA MARCA DE LA FAMILIA — el mismo sistema visual que Los 5 Libros

   Enzo, 19/08/2026: «todo lo que es diseño que sea igual a Los 5 Libros —
   branding, botones, tipografía». Los valores de acá NO son inventados: están
   copiados de `~/Proyectos/kit-chicos/index.html`, que es la landing que ya
   factura. Si algún día cambia allá, se cambia acá.

   POR QUÉ UN ARCHIVO APARTE Y NO DENTRO DE movil.css
   Son dos trabajos distintos y conviene poder leerlos —y sacarlos— por
   separado:
     · movil.css → que la página no se desborde ni se toque mal con el pulgar.
     · marca.css → que la página se VEA de la familia (paleta, títulos, botones).
   Este va DESPUÉS de movil.css y es el último de todos, así que gana la
   cascada sin necesidad de un solo `!important`.

   ⛔ NO SE EDITA `original/secciones/`: esos bloques son la prueba de cómo era
      la página que ya convertía. Todo lo que hay que pisar, se pisa acá.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── LA PALETA ───────────────────────────────────────────────────────────────
   Copiada tal cual del `:root` de kit-chicos. */
:root {
  --navy:   #0c2744;
  --navy2:  #071a2d;
  --cyan:   #19c7d8;
  --cyan2:  #79e3ea;
  --orange: #ff6b35;   /* acentos y etiquetas, NO el botón */
  --yellow: #ffd537;
  --cream:  #fffaf0;
  --paper:  #fff;
  --ink:    #10243f;
  --muted:  #566579;
  --line:   #dce9eb;
  --green:  #14a86a;   /* sólo tildes y sellos de confianza */
  --shadow: 0 18px 48px rgba(9, 45, 66, .14);
  --radius: 26px;

  /* ⛔ EL NARANJA DEL BOTÓN ES #F35120, NO --orange (19/08/2026).
     Sale de `tema.acento` en checkout-empresa/productos/cinco-libros.js, donde
     el comentario dice «es el color del botón de la landing, copiado tal cual».
     Es el color con el que salen el checkout y las ocho pantallas del
     post-compra, así que el botón de comprar tiene que ser EXACTAMENTE ése o la
     clienta ve un naranja en la página y otro en la caja.
     `--orange` (#ff6b35) existe en kit-chicos para otros usos —etiquetas,
     acentos sueltos— y no se usa para el CTA. */
  --cta:        #f35120;
  --cta-claro:  #ff7a45;   /* el tope del degradé */
  --cta-sombra: #bd3512;   /* el mismo naranja oscurecido: la sombra dura */
}


/* ── LOS TÍTULOS ─────────────────────────────────────────────────────────────
   ⛔ EL DEFECTO MEDIDO: los h1/h2 computaban `font-weight: 400` (verificado en
      el navegador, no supuesto). No era la fuente: Inter Variable ya se carga
      bien desde tipografia.css con el rango 100–950. Era que `base.css` —el CSS
      del tema de Shopify que vino con los bloques— manda
      `h1{font-weight:var(--font-h1--weight)}`, y esa variable vale 400.
      Por eso los títulos se veían finitos y delicados: estaban en peso NORMAL,
      ni siquiera en negrita.

   En Los 5 Libros los títulos son gruesos de verdad. Se pisa con `.mc-lp h1`
   (misma especificidad que la regla del bloque, pero este archivo carga
   después) y sin `!important`. */
.mc-lp h1,
.mc-lp h2,
.mc-lp h3,
.mc-lp h4,
.mc-lp .mc-title,
.mc-lp .mc-books-title,
.mc-lp .mc-hl,
.mc-lp .mc-hl-y {
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.045em;
}

/* Los tamaños con `clamp`, igual que la referencia: un solo valor que sirve
   del teléfono al escritorio sin media queries. */
.mc-lp .mc-hero h1,
.mc-lp h1 {
  font-size: clamp(34px, 5.4vw, 62px);
}
.mc-lp h2,
.mc-lp .mc-title,
.mc-lp .mc-books-title {
  font-size: clamp(28px, 4vw, 46px);
}
.mc-lp h3 {
  font-size: clamp(21px, 2.4vw, 30px);
}

/* ⚠ LOS TAMAÑOS SON UN ESCALÓN MÁS CHICOS QUE LOS DE kit-chicos, A PROPÓSITO.
   La referencia usa clamp(40px,6vw,76px) para el h1, pero esa landing tiene el
   título solo en una columna ancha. Acá el h1 convive con el badge, el
   subtítulo y la foto del producto dentro de una columna angosta: a 76px se
   comía la pantalla y empujaba la foto abajo del pliegue, que es justo lo que
   la página no puede hacer. El PESO —que es lo que Enzo señaló— es idéntico. */

/* ⛔ ACÁ SÍ VA `!important`, Y ES EL ÚNICO DEL ARCHIVO.
   Seis de los h2 traen el tamaño en un `style="font-size:22px"` PEGADO AL TAG,
   herencia de cómo se editaba la página en Shopify. Un estilo en línea le gana
   a cualquier hoja de estilos: sin `!important` no hay especificidad que
   alcance, y la única alternativa sería editar `original/secciones/`, que no se
   toca.

   Y hay que emparejarlos sí o sí: al poner el clamp, el ÚNICO h2 que no tenía
   estilo en línea saltó a 46 px y quedó al lado de sus hermanos en 22 px. Esa
   mezcla la generé yo y es peor que el defecto original — un título gigante y
   los seis siguientes chiquitos se lee como una página rota.

   `.mc-title` queda afuera a propósito: no es un título de sección sino el
   nombre del producto dentro de la caja de compra, pegado al precio. Agrandarlo
   descuadra ese bloque. */
.mc-lp h2:not(.mc-title) {
  font-size: clamp(28px, 4vw, 46px) !important;
}


/* ── EL RESALTADO DE LOS TÍTULOS ─────────────────────────────────────────────
   ⛔ EL VERDE DE SHOPIFY TAMBIÉN ESTABA ACÁ, ESCONDIDO (19/08/2026).
      `.mc-hl` no pinta con `color`: pinta con
      `background:linear-gradient(135deg,#1FA35A,#178048)` + `background-clip:text`
      y el relleno transparente. Por eso el h1 se veía verde aunque su `color`
      computara azul: el degradé es lo que se ve. Es la misma tienda de Shopify
      cuyo verde ya había teñido el checkout y las ocho pantallas del post-compra.

   Los 5 Libros resalta palabras dentro de un título con un color PLANO —
   `.orange{color:var(--orange)}` y `.cyan{color:#068e9c}`— nunca con un degradé.
   Se copia ese mecanismo. */
.mc-lp .mc-hl {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--orange);
}

/* El título del hero es la excepción: ahí el `.mc-hl` envuelve la frase ENTERA,
   no una palabra suelta. En Los 5 Libros el titular va en tinta y el naranja se
   reserva para el pedacito que se quiere destacar; un h1 de 62 px todo naranja
   le compite al botón de comprar, que es el único naranja que tiene que gritar. */
.mc-lp .mc-hero h1 .mc-hl {
  color: var(--navy);
}


/* ── EL SUBTÍTULO DEL HERO ───────────────────────────────────────────────────
   «Curiosidad, pensamiento crítico y ganas de entender…» es la frase que
   sostiene la promesa y estaba en 15 px, peso 400 y gris claro: se leía como
   una nota al pie debajo de un título de 62 px. Sube de peso, de cuerpo y de
   contraste, y se le da un poco más de ancho para que no quede en cuatro
   renglones cortitos.

   ⚠ SE APUNTA A `.mc-hero .mc-sub`, NO A `.mc-sub` SOLO: hay otro `.mc-sub`
     dentro del carrito (una fila flex con el nombre y el precio) que no tiene
     nada que ver y se rompería. */
.mc-lp .mc-hero .mc-sub {
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  line-height: 1.45;
  color: var(--muted);
  max-width: 560px;
}


/* ── LOS BOTONES ─────────────────────────────────────────────────────────────
   ⛔ EL VERDE DE SHOPIFY (#1FA35A) SE VA DE LA PÁGINA (19/08/2026).
      `.mc-btn-green` traía el verde de la tienda de Shopify de la que salió el
      producto. Ese mismo verde ya se había colado en la ficha del checkout y
      tiñó las ocho pantallas del post-compra. Está corregido del lado de la
      caja; acá se corta la otra entrada.

   El botón es el de Los 5 Libros: naranja de la casa con SOMBRA DURA, que al
   pulsar se hunde (`translateY(6px)` y la sombra pasa de 10px a 4px). Ese
   hundido es la mitad del carácter de la marca, no un adorno. */
.mc-lp .mc-btn,
.mc-lp .mc-btn-green,
.mc-lp .mc-btn-yellow {
  min-height: 58px;
  padding: 15px 25px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--cta-claro), var(--cta));
  color: #fff;
  text-transform: uppercase;
  font-weight: 950;
  letter-spacing: .01em;
  box-shadow: 0 10px 0 var(--cta-sombra), 0 18px 30px rgba(243, 81, 32, .25);
  transition: .18s transform, .18s box-shadow;
}

.mc-lp .mc-btn:hover,
.mc-lp .mc-btn-green:hover,
.mc-lp .mc-btn-yellow:hover {
  transform: translateY(-2px);
  background: linear-gradient(180deg, var(--cta-claro), var(--cta));
  box-shadow: 0 12px 0 var(--cta-sombra), 0 22px 34px rgba(243, 81, 32, .28);
}

.mc-lp .mc-btn:active,
.mc-lp .mc-btn-green:active,
.mc-lp .mc-btn-yellow:active {
  transform: translateY(6px);
  box-shadow: 0 4px 0 var(--cta-sombra);
}

/* La sombra dura son 10 px que se dibujan FUERA de la caja del botón. Sin este
   respiro el botón siguiente —o el texto de abajo— se le monta encima. */
.mc-lp .mc-btn {
  margin-bottom: 12px;
}

/* El texto chico que algunos botones llevan debajo del renglón principal. */
.mc-lp .mc-btn small {
  display: block;
  font-size: 11px;
  opacity: .9;
  text-transform: none;
  letter-spacing: 0;
}


/* ── EL PRECIO ───────────────────────────────────────────────────────────────
   Peso 950 y el interletrado bien cerrado: es el número que tiene que golpear. */
.mc-lp .mc-price-now {
  font-weight: 950;
  letter-spacing: -.06em;
}


/* ══ LAS IMÁGENES GRANDES ══════════════════════════════════════════════════
   Enzo, 19/08/2026: «la principal es "acceso de por vida" y tiene todos los
   mockups, que ocupe casi todo el ancho de la pantalla, así se ve más».

   Medido antes de tocar: la foto del hero tenía `max-width:300px` dentro de una
   columna de 720 px, en una ventana de 1440. Es el mockup con los once libros y
   el sello dorado — la imagen que tiene que vender— y ocupaba un quinto de la
   pantalla.

   EL PROBLEMA NO ES SÓLO EL `max-width` DE LA IMAGEN: es que toda la columna
   (`.mc-wrap`) mide 760 px. Aunque la foto llene la columna, sigue siendo la
   mitad de la pantalla. Así que la foto del hero SALE de la columna.

   ⚠ Y SALE SIN EL TRUCO DE `calc(50% - 50vw)`, que es justo el que había roto
     la marquesina. Acá se usa `left:50%` + `translateX(-50%)`: el corrimiento
     final depende del ANCHO PROPIO del elemento, no de contra qué se mide un
     porcentaje, así que no importa si el padre es bloque, flex o grid. Lo único
     que se le pide al padre es estar centrado, y `.mc-wrap` lo está por
     `margin:0 auto`.
     `transform` no ocupa lugar en el layout, y a 94vw nunca toca los bordes. */
.mc-lp .mc-hero-visual {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(94vw, 1040px);
  max-width: none;
}
.mc-lp .mc-hero-visual img {
  width: 100%;
  max-width: 100%;
  border-radius: 20px;
}

/* Las otras dos grandes, con el mismo criterio pero sin salirse de su columna:
   estas viven dentro de bloques con fondo propio y sacarlas dejaría la foto
   colgando fuera de su tarjeta. */
.mc-lp .mc-offer-visual img {
  width: 100%;
  max-width: 560px;
}
.mc-lp .mc-final-visual img {
  width: 100%;
  max-width: 620px;
}


/* ══ LA MARQUESINA NEGRA DE ARRIBA ═════════════════════════════════════════
   ⛔ EL DEFECTO: la barra salía CORRIDA a la derecha y cortada. Medido en el
      navegador a 1440 px: `.mc-tick` arrancaba en x=360 y terminaba en x=1800
      —360 px fuera de la pantalla— dejando una franja blanca a la izquierda y
      la primera palabra comida. En el teléfono, lo mismo en chico.

   ⛔ Y ESTA ES LA CAUSA DE VERDAD, NO LA ANIMACIÓN NI EL ANCHO DEL TRACK.
      El bloque original hace el truco clásico de "sangrado completo":
          width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw)
      Ese truco SÓLO funciona si el padre es un bloque tan ancho como la
      ventana, porque el `50%` se mide contra el padre. Acá el padre es
      `.section--page-width`, que el tema de Shopify declara `display:grid`: el
      `50%` pasó a medirse contra el ÁREA de la grilla —la mitad— y la cuenta
      dio `margin-left:-264,5px` donde tenía que dar el doble. De ahí el corrimiento.

   ⛔ NO SE ARREGLA TAPÁNDOLO. El `overflow:hidden` que había puesto en
      movil.css hacía que la página dejara de arrastrarse de costado y la barra
      SIGUIERA corrida, ahora sin forma de ver que lo estaba. Un defecto
      invisible en vez de uno molesto.

   LA SOLUCIÓN es la de kit-chicos, que no usa el truco: la barra es un bloque
   normal que ocupa todo el ancho de su contenedor. Se hace en dos pasos:
     1. se le sacan el `100vw` y los márgenes negativos (abajo);
     2. se saca de la grilla al PADRE (`display:block`, más abajo) — que es lo
        que de verdad endereza la barra, verificado en el navegador: el padre
        pasa a medir 1440 y la barra arranca en 0.
   El `grid-column:1/-1` queda como seguro por si el tema vuelve a poner la
   sección en grilla; hoy no hace falta, pero no molesta. */
.mc-lp .mc-tick,
.mc-tick {
  width: auto;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  grid-column: 1 / -1;
  overflow: hidden;

  /* Y el aspecto de la familia: el azul casi negro con el filo cian, en vez
     del negro plano que traía de Shopify. */
  background: var(--navy2);
  border-bottom: 3px solid var(--cyan);
}

/* ⛔ ESTA ES LA REGLA QUE ENDEREZA LA BARRA, y va sobre el PADRE, no sobre ella.
   La sección que la contiene la declara `display:grid` el tema de Shopify, y esa
   grilla es la que le daba a la marquesina un área de media pantalla y la
   empujaba 360 px a la derecha. Devolviéndola a `display:block` la sección
   vuelve a medir lo que mide la ventana y la barra arranca en 0.
   Verificado: padre 1440 px con left 0; barra 1440 px con left 0. */
.section:has(> .mc-tick) {
  display: block;
}

.mc-tick .mc-tick-item {
  font-weight: 900;
  letter-spacing: .08em;
}