/* ==========================================================================
   Uñas que Facturan — layout de la landing
   Usa tokens.css y componentes.css. Mobile primero.
   ========================================================================== */

.contenedor { max-width: var(--max-ancho); margin: 0 auto; padding: 0 var(--gutter); }
.seccion { padding: var(--section-y) 0; position: relative; }
.cabeza { display: grid; gap: var(--s-4); margin-bottom: var(--s-8); max-width: 820px; }
.cabeza .t-lead { max-width: 40ch; }

.saltar {
  position: absolute; left: var(--s-4); top: -100px; z-index: 10;
  padding: var(--s-3) var(--s-4); background: var(--papel); color: var(--espresso); border-radius: var(--r-pill);
}
.saltar:focus { top: var(--s-4); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Provisorio en línea (datos que faltan dentro de un texto) */
.falta {
  display: inline-block;
  padding: 0 8px;
  border: 1px dashed currentColor;
  border-radius: var(--r-pill);
  font-size: 0.9em;
}

/* ---------- Header ---------- */
.header { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-5) 0; }
.header__logo img { height: 40px; width: auto; }
.header__link { color: var(--papel); font-size: 15px; font-weight: 500; padding: var(--s-2) 0; }
.header__link:hover { color: var(--arena); }

/* ---------- Hero ---------- */
.hero { background: var(--espresso); color: var(--papel); }
.hero__texto { padding: 0 var(--gutter) var(--s-8); }
.hero__contenido { padding-top: var(--s-7); display: grid; gap: var(--s-5); }
.hero__contenido .t-display { max-width: 11ch; }
.hero__bajada { color: var(--nude); max-width: 30ch; }
.hero__acciones { display: grid; gap: var(--s-4); margin-top: var(--s-3); }
.hero__acciones .badge { justify-self: start; }
/* El precio en pesos junto a cada botón: los anuncios son para Argentina y el pago se ve en pesos. */
.precio-ars { margin: 0; font-size: 15px; line-height: 1.4; color: var(--arena); }
.precio-ars strong { color: var(--papel); font-weight: 500; }
.precio-ars--grande { margin-bottom: var(--s-5); font-size: 17px; }
.hero__datos {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-7); padding-top: var(--s-5);
  border-top: var(--filete) solid var(--caramelo);
}
.hero__dato-num { font-family: var(--font-display); font-size: 36px; line-height: 1; margin: 0; letter-spacing: -0.02em; }
.hero__dato-txt { font-size: 14px; line-height: 1.35; color: var(--taupe); margin: var(--s-2) 0 0; }
.hero__foto { background: var(--tabaco); }
.hero__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 12%; }
/* ---------- Video ---------- */
.video { background: var(--papel); padding-bottom: 0; }
.video__marco {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--tabaco);
  overflow: hidden;
}
.video__marco img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.video__play {
  position: absolute; left: var(--gutter); bottom: var(--gutter);
  display: flex; align-items: center; gap: var(--s-4);
  padding: 8px var(--s-5) 8px 8px;
  background: var(--papel); color: var(--espresso);
  border-radius: var(--r-pill);
}
.video__circulo {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--espresso); display: grid; place-items: center; flex: none;
}
.video__circulo::after {
  content: ""; margin-left: 5px;
  border-left: 18px solid var(--papel); border-top: 11px solid transparent; border-bottom: 11px solid transparent;
}
.video__duracion { font-family: var(--font-display); font-size: 28px; line-height: 1; margin: 0; }
.video__marco .provisorio__tag { top: var(--s-4); left: var(--s-4); }

/* ---------- Dolores ---------- */
.dolores { background: var(--papel); overflow: hidden; }
.marca-agua {
  position: absolute; right: -180px; top: 360px; width: 520px; max-width: none; pointer-events: none; user-select: none;
}
.dolores .contenedor { position: relative; }
.dolores__lista { list-style: none; margin: 0; padding: 0; border-top: var(--filete) solid var(--taupe); }
.dolor {
  display: grid; gap: var(--s-3);
  padding: var(--s-6) 0;
  border-bottom: var(--filete) solid var(--taupe);
}
.dolor__frase { font-family: var(--font-display); font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; margin: 0; max-width: 24ch; }
.dolor__quien { font-size: 14px; font-weight: 500; color: var(--caramelo-profundo); margin: 0; }
.dolores__giro {
  margin-top: var(--s-8);
  padding: var(--s-7) var(--s-5);
  background: var(--espresso); color: var(--papel);
  display: grid; gap: var(--s-4);
}
.dolores__giro .t-h2 { max-width: 20ch; }
.dolores__giro .t-lead { color: var(--nude); max-width: 44ch; }

/* ---------- Día 7 ---------- */
.dia7 { background: var(--arena); }
.dia7__cabeza { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); }
.dia7__numero { font-size: var(--fs-numero); }
.dia7__promesa { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.2; max-width: 26ch; margin: 0; }
.entregables { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.entregable {
  display: grid; gap: var(--s-3); align-content: start;
  padding: var(--s-6) var(--s-5);
  background: var(--papel); border-radius: var(--r-tarjeta);
}
.entregable__cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.entregable__num { font-family: var(--font-display); font-size: 20px; color: var(--caramelo-profundo); margin: 0; }
.entregable__cuando {
  font-size: 13px; font-weight: 500; padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--arena); color: var(--espresso);
}
.entregable__resultado { margin: var(--s-3) 0 0; }
.entregable__nombre { font-weight: 500; margin: var(--s-2) 0 0; padding-top: var(--s-3); border-top: var(--filete) solid var(--taupe); }
.entregable__desc { margin: 0; }

/* ---------- Temario ---------- */
.temario { background: var(--papel); }
.temario__lista { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.temario .dia__foto { aspect-ratio: 16 / 10; object-position: center 35%; }
/* Retratos donde cara y producto están lejos: en el celular necesitan un recorte más alto (en escritorio la foto ya se ve casi entera). */
.temario .dia__foto--alta { aspect-ratio: 1 / 1; }
.temario .dia__cuerpo .t-body { max-width: 46ch; }
.temario__pie {
  display: grid; gap: var(--s-5); align-items: center;
  margin-top: var(--s-7); padding-top: var(--s-6);
  border-top: var(--filete) solid var(--taupe);
}
.temario__total { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1; margin: 0; }
.temario__total span { display: block; font-family: var(--font-body); font-size: var(--fs-small); margin-top: var(--s-2); }

/* ---------- Quién soy ---------- */
.quien { background: var(--papel); padding: 0; }
.quien__grid { display: grid; }
.quien__foto { background: var(--tabaco); }
.quien__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 15%; }
.quien__texto { padding: var(--s-9) var(--gutter); display: grid; gap: var(--s-5); align-content: center; }
.quien__texto .t-h2 { max-width: 16ch; }
.quien__texto .t-body { max-width: 52ch; }
.negocios { list-style: none; margin: var(--s-4) 0 0; padding: 0; border-top: var(--filete) solid var(--taupe); }
.negocio { display: grid; gap: var(--s-1); padding: var(--s-5) 0; border-bottom: var(--filete) solid var(--taupe); }
.negocio__nombre { font-family: var(--font-display); font-size: 26px; line-height: 1.15; margin: 0; }
.negocio__rol { margin: 0; }
.redes { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-3); font-weight: 500; }

/* ---------- Testimonios ---------- */
.testimonios { background: var(--nude); }
.testimonios__grid { display: grid; gap: var(--s-8); list-style: none; margin: 0; padding: var(--s-4) 0 0; }
.testimonios__aviso { margin-top: var(--s-7); max-width: 60ch; }

/* ---------- Precio ---------- */
.seccion-precio { background: var(--espresso); color: var(--papel); }
.seccion-precio .precio { padding-left: 0; padding-right: 0; background: transparent; }
.precio__titulo { max-width: 14ch; }
.precio__cuerpo { display: grid; gap: var(--s-9); }
.precio__col { display: grid; gap: var(--s-6); align-content: start; }
.precio__encabezado { display: grid; gap: var(--s-4); }
.precio__nota { color: var(--taupe); }

/* ---------- FAQ ---------- */
.preguntas { background: var(--papel); }
.preguntas__grid { display: grid; gap: var(--s-8); }
.contacto {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: center;
  padding: var(--s-5); background: var(--nude); border-radius: var(--r-tarjeta);
}
.contacto img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: center 12%; background: var(--tabaco); }
.contacto p { margin: 0; }
.contacto a { color: var(--espresso); font-weight: 500; }

/* ---------- CTA final ---------- */
.final { background: var(--espresso); color: var(--papel); }
.final__texto {
  min-height: 100svh;
  padding: var(--s-9) var(--gutter);
  display: grid; align-content: center; gap: var(--s-6);
}
.final__titulo { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1.06; letter-spacing: -0.02em; margin: 0; max-width: 18ch; }
.final__acciones { display: grid; gap: var(--s-4); }
.final__acciones .badge { justify-self: start; }
.final__garantia { display: flex; align-items: center; gap: var(--s-4); color: var(--nude); font-size: var(--fs-small); }
.final__garantia img { width: 56px; height: auto; flex: none; }
.final__foto { background: var(--tabaco); }
.final__foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 15%; }

/* ---------- Footer ---------- */
.footer { background: var(--papel); padding: var(--s-8) 0 var(--s-7); }
.footer__grid { display: grid; gap: var(--s-6); }
.footer__marca { display: flex; align-items: center; gap: var(--s-5); }
.footer__marca .palabra { height: 44px; width: auto; }
.footer__marca .sello { width: 48px; height: auto; }
.footer__firma { margin: 0; font-size: var(--fs-small); }
.footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: 14px; }
.footer__legal a { color: var(--caramelo-profundo); }
.footer__legal p { margin: 0; }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (min-width: 768px) {
  .header__logo img { height: 52px; }
  .hero__dato-num { font-size: 48px; }
  .hero__acciones { grid-template-columns: auto; justify-content: start; }
  .video__marco { aspect-ratio: 16 / 9; }
  .video__marco img { object-position: center 25%; }
  .dolor { grid-template-columns: 1fr 200px; align-items: baseline; gap: var(--s-6); }
  .dolor__frase { font-size: 40px; }
  .dolor__quien { text-align: right; }
  .dolores__giro { padding: var(--s-8) var(--s-7); }
  .entregables { grid-template-columns: repeat(2, 1fr); }
  .temario .dia--con-foto { grid-template-columns: 1.2fr 1fr; }
  .temario .dia--con-foto .dia__foto { aspect-ratio: auto; height: 100%; min-height: 320px; }
  .temario .dia:nth-child(even) .dia__foto { order: -1; }
  .temario__pie { grid-template-columns: 1fr auto; }
  .testimonios__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-7) var(--s-5); }
  .precio__cuerpo { grid-template-columns: 1.1fr 1fr; gap: var(--s-8); align-items: start; }
  .final__titulo { font-size: 64px; }
  .footer__grid { grid-template-columns: 1fr auto; align-items: end; }
}

/* ==========================================================================
   Escritorio
   ========================================================================== */
@media (min-width: 1024px) {
  .hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; min-height: 100svh; }
  .hero__texto { padding: 0 var(--s-8) var(--s-8) var(--gutter); display: flex; flex-direction: column; }
  .hero__contenido { flex: 1; align-content: center; padding-top: var(--s-4); gap: var(--s-4); }
  .hero__contenido .t-display { font-size: min(var(--fs-display), 10.5vh); max-width: 12ch; }
  .hero__datos { margin-top: var(--s-5); }
  .hero__texto { padding-bottom: var(--s-6); }
  .hero__foto img { height: 100%; aspect-ratio: auto; }
  .quien__grid { grid-template-columns: 1fr 1fr; min-height: 100svh; }
  .quien__foto img { height: 100%; aspect-ratio: auto; }
  .quien__texto { padding: var(--s-10) var(--gutter) var(--s-10) var(--s-9); }
  .entregables { grid-template-columns: repeat(3, 1fr); }
  .dia7__cabeza { grid-template-columns: auto 1fr; align-items: end; gap: var(--s-8); }
  .testimonios__grid { grid-template-columns: repeat(3, 1fr); }
  .preguntas__grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--s-9); align-items: start; }
  .preguntas__lado { position: sticky; top: var(--s-7); display: grid; gap: var(--s-6); }
  .final__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; min-height: 100svh; }
  .final__texto { padding: var(--s-9) var(--s-9) var(--s-9) max(var(--gutter), calc((100vw - var(--max-ancho)) / 2 + var(--gutter))); }
  .final__titulo { font-size: 80px; }
  .final__foto img { height: 100%; aspect-ratio: auto; }
  .hero__texto { padding-left: max(var(--gutter), calc((100vw - var(--max-ancho)) / 2 + var(--gutter))); }
  .marca-agua { width: 720px; right: -200px; top: 40px; }
}

/* ==========================================================================
   Versión kit digital (08/10/2026): herramientas, calculadora demo, "a cualquier hora"
   ========================================================================== */

/* ---------- El kit ---------- */
.kit { background: var(--arena); }
.kit__cabeza { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); }
.kit__numero { font-size: var(--fs-numero); }
.kit__promesa { font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.2; max-width: 26ch; margin: 0; }
.herramientas { display: grid; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.herramienta {
  display: grid; gap: var(--s-3); align-content: start;
  padding: var(--s-6) var(--s-5);
  background: var(--papel); border-radius: var(--r-tarjeta);
}
.herramienta__cabeza { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.herramienta__num { font-family: var(--font-display); font-size: 20px; color: var(--caramelo-profundo); margin: 0; }
.herramienta__formato {
  font-size: 13px; font-weight: 500; padding: 2px 10px; border-radius: var(--r-pill);
  background: var(--arena); color: var(--espresso); white-space: nowrap;
}
.herramienta__titulo { margin: var(--s-3) 0 0; }
.herramienta__desc { margin: 0; padding-top: var(--s-3); border-top: var(--filete) solid var(--taupe); }
.herramienta--destacada { background: var(--espresso); color: var(--papel); }
.herramienta--destacada .herramienta__num { color: var(--arena); }
.herramienta--destacada .herramienta__desc { color: var(--nude); border-top-color: var(--caramelo); }
.herramienta--bonus { background: transparent; border: var(--filete) dashed var(--espresso); }
.herramienta--bonus .herramienta__num { color: var(--espresso); }

/* ---------- Calculadora demo ---------- */
.calcu { background: var(--espresso); color: var(--papel); }
.calcu__grid { display: grid; gap: var(--s-8); }
.calcu__bajada { color: var(--nude); }
.calcu__panel {
  display: grid; gap: var(--s-6);
  padding: var(--s-6) var(--s-5);
  background: var(--papel); color: var(--espresso); border-radius: var(--r-tarjeta);
}
.calcu__campos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); }
.calcu__campo { display: grid; gap: var(--s-2); font-size: 14px; font-weight: 500; align-content: end; }
.calcu__campo--ancho { grid-column: 1 / -1; }
.calcu__campo input[type="number"] {
  width: 100%; min-height: 52px; padding: 0 var(--s-4);
  font: 400 22px/1 var(--font-display); color: var(--espresso);
  background: var(--blanco); border: var(--filete) solid var(--taupe); border-radius: var(--r-tarjeta);
}
.calcu__campo input[type="number"]:focus { outline: 2px solid var(--espresso); outline-offset: 1px; border-color: var(--espresso); }
.calcu__campo input[type="range"] { width: 100%; accent-color: var(--espresso); min-height: 32px; }
.calcu__campo output { font-weight: 500; }
.calcu__resultado {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: end;
  padding-top: var(--s-5); border-top: var(--filete) solid var(--taupe);
}
.calcu__etiqueta { margin: 0; font-size: 14px; font-weight: 500; color: var(--caramelo-profundo); }
.calcu__valor { margin: var(--s-2) 0 0; font-family: var(--font-display); font-size: 36px; line-height: 1; letter-spacing: -0.02em; }
.calcu__valor--grande { font-size: 64px; }
.calcu__nota { color: var(--caramelo-profundo); }

/* ---------- A cualquier hora ---------- */
.ahora { background: var(--nude); }
.ahora .cabeza .t-h2 { max-width: 22ch; }
.ahora__lista { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; border-top: var(--filete) solid var(--espresso); }
.ahora__item { display: grid; gap: var(--s-3); padding: var(--s-6) 0; border-bottom: var(--filete) solid var(--taupe); }
.ahora__titulo { font-family: var(--font-display); font-size: 28px; line-height: 1.15; margin: 0; }
.ahora__item .t-body { max-width: 44ch; }

@media (min-width: 768px) {
  .herramientas { grid-template-columns: repeat(2, 1fr); }
  .herramienta--destacada { grid-column: 1 / -1; }
  .herramienta--bonus { grid-column: auto; }
  .calcu__panel { padding: var(--s-7); }
  .calcu__valor--grande { font-size: 80px; }
  .ahora__lista { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-8); }
}

@media (min-width: 1024px) {
  .kit__cabeza { grid-template-columns: auto 1fr; align-items: end; gap: var(--s-8); }
  .herramientas { grid-template-columns: repeat(3, 1fr); }
  .herramienta--destacada { grid-column: span 2; }
  .herramienta--bonus { grid-column: auto; }
  .calcu__grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--s-9); align-items: center; }
  .ahora__lista { grid-template-columns: repeat(4, 1fr); column-gap: var(--s-6); }
}

/* ==========================================================================
   Maquetas de cada herramienta (CSS puro, con fotos del shooting)
   ========================================================================== */
.mock {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3; margin: calc(var(--s-6) * -1) calc(var(--s-5) * -1) var(--s-3);
  background: var(--tabaco); border-radius: var(--r-tarjeta) var(--r-tarjeta) 0 0;
  display: grid; place-items: center;
  font-family: var(--font-body); color: var(--espresso);
}
.mock img { display: block; object-fit: cover; }
.mock p { color: inherit; }
.mock--nude { background: var(--nude); }
.herramienta--bonus .mock { background: var(--nude); }
.herramienta { transition: transform var(--dur-corta) var(--ease); }
.herramienta:hover { transform: translateY(-3px); }
.mock > * { transition: transform 500ms var(--ease); }
.herramienta:hover .mock > * { transform: scale(1.03) rotate(var(--rot, 0deg)); }

/* Sombra de papel compartida */
.mg__portada, .mg__pagina, .mp__hoja, .mh__ventana, .mc__pagina, .mt__tarjeta, .mmes__hoja, .mm__tel {
  box-shadow: 0 1px 2px rgba(39, 25, 22, .12), 0 14px 30px -10px rgba(39, 25, 22, .45);
}

/* 01 Guía */
.mock--guia { grid-template-columns: auto auto; gap: 5%; padding: 6% 8%; }
.mg__portada {
  --rot: -4deg; transform: rotate(-4deg);
  width: clamp(110px, 30vw, 170px); aspect-ratio: 1 / 1.414;
  background: var(--espresso); color: var(--papel); padding: 9% 9% 0; display: flex; flex-direction: column; gap: 6px;
}
.mg__eyebrow { margin: 0; font-size: 7px; letter-spacing: .16em; text-transform: uppercase; color: var(--arena) !important; }
.mg__titulo { margin: 0; font-family: var(--font-display); font-size: clamp(17px, 3.4vw, 26px); line-height: 1; }
.mg__portada img { width: 100%; flex: 1; min-height: 0; margin-top: 4px; object-position: center 30%; }
.mg__sub { margin: 0; padding: 6px 0 8px; font-size: 7px; color: var(--nude) !important; }
.mg__pagina {
  --rot: 3deg; transform: rotate(3deg);
  width: clamp(110px, 30vw, 170px); aspect-ratio: 1 / 1.414;
  background: var(--blanco); color: var(--espresso); padding: 9%; display: flex; flex-direction: column; gap: 5px;
}
.mg__cap { margin: 0; font-size: 7px; letter-spacing: .16em; text-transform: uppercase; color: var(--caramelo-profundo) !important; }
.mg__h { margin: 0 0 2px; font-family: var(--font-display); font-size: clamp(12px, 2vw, 16px); line-height: 1.1; }
.mg__linea { display: block; height: 4px; border-radius: 2px; background: var(--taupe); opacity: .6; }
.mg__linea--corta { width: 60%; }
.mg__tabla { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; font-size: 7.5px; margin: 4px 0; padding: 5px 0; border-top: 1px solid var(--taupe); border-bottom: 1px solid var(--taupe); }
.mg__tabla b { font-weight: 500; }
.mg__pagina img { width: 100%; flex: 1; min-height: 0; object-position: center 40%; }

/* 02 Kit de marca */
.mock--marca { background: var(--nude); align-items: start; }
.mm__tel {
  --rot: -3deg; transform: rotate(-3deg);
  width: 56%; max-width: 190px; aspect-ratio: 9 / 16; margin-top: 9%;
  background: var(--blanco); border: 5px solid var(--espresso); border-radius: 22px; padding: 10px 7px; overflow: hidden;
}
.mm__perfil { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.mm__avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; text-align: center; background: var(--espresso); color: var(--arena); font: 400 6.5px/1 var(--font-display); }
.mm__usuario { margin: 0; font-size: 8px; font-weight: 500; }
.mm__bio { margin: 0; font-size: 7px; color: var(--caramelo-profundo) !important; }
.mm__feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.mm__post { aspect-ratio: 1; width: 100%; display: grid; place-items: center; text-align: center; font: 400 7px/1.1 var(--font-display); background: var(--papel); }
.mm__post--oscuro { background: var(--espresso); color: var(--papel); }
.mm__post--arena { background: var(--nude); }

/* 03 y 04 Hojas de papel */
.mp__hoja { --rot: -2deg; transform: rotate(-2deg); width: 66%; background: var(--blanco); padding: 5% 7%; }
.mock--nude .mp__hoja { --rot: 2deg; transform: rotate(2deg); width: 76%; }
.mp__titulo { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(13px, 2.2vw, 17px); line-height: 1.1; }
.mp__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: clamp(8.5px, 1.4vw, 10.5px); }
.mp__lista li { display: flex; align-items: center; gap: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--papel); }
.mp__lista span { width: 10px; height: 10px; flex: none; border: 1px solid var(--espresso); border-radius: 2px; position: relative; }
.mp__lista .ok span { background: var(--espresso); }
.mp__lista .ok span::after { content: ""; position: absolute; left: 3px; top: 0; width: 3px; height: 6px; border: solid var(--papel); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.mp__lista .ok { color: var(--caramelo-profundo); }
.mp__lista .no { text-decoration: line-through; color: var(--caramelo-profundo); }
.mp__lista i { margin-left: auto; font-style: normal; font-size: .85em; padding: 1px 6px; border-radius: var(--r-pill); background: var(--papel); color: var(--espresso); white-space: nowrap; }
.mp__lista .no i { background: var(--espresso); color: var(--papel); }

/* 05 y Extra: planillas */
.mock--planilla { background: var(--nude); }
.mh__ventana { width: 80%; background: var(--blanco); border-radius: 6px; overflow: hidden; }
.mh__barra { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: var(--espresso); color: var(--papel); font-size: 8px; }
.mh__barra i { width: 6px; height: 6px; border-radius: 50%; background: var(--caramelo); }
.mh__barra span { margin-left: 6px; }
.mh__grilla { display: grid; grid-template-columns: 1.4fr 1fr; font-size: clamp(9px, 1.5vw, 11px); }
.mh__grilla span { padding: 5px 8px; border-bottom: 1px solid var(--papel); border-right: 1px solid var(--papel); }
.mh__col { font-weight: 500; background: var(--papel); font-size: .85em; }
.mh__total { background: var(--arena); font-weight: 500; font-family: var(--font-display); font-size: 1.2em; }
.mh__grilla--5 { grid-template-columns: 1.1fr 1.4fr .6fr .7fr .8fr; }
.mh__grilla .si { color: #3d6b45; font-weight: 500; }
.mh__grilla .pend { color: var(--caramelo-profundo); font-weight: 500; }
.mock--pedidos .mh__ventana { width: 86%; max-width: 560px; }

/* 06 Catálogo */
.mock--catalogo { background: var(--espresso); }
.mc__pagina { --rot: 2deg; transform: rotate(2deg); width: 72%; background: var(--papel); padding: 6%; }
.mc__marca { margin: 0 0 6px; font: 400 clamp(11px, 1.8vw, 14px)/1 var(--font-display); text-align: center; }
.mc__items { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mc__item { background: var(--blanco); padding: 4px 4px 6px; font-size: 8px; }
.mc__item img { width: 100%; aspect-ratio: 1; object-position: center 35%; }
.mc__item p { margin: 4px 0 0; }
.mc__item b { font-family: var(--font-display); font-weight: 400; font-size: 12px; }

/* 07 Chat */
.mock--chat { background: var(--nude); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 6% 9%; }
.mch__burbuja { margin: 0; max-width: 80%; padding: 7px 10px; font-size: clamp(9px, 1.5vw, 11px); line-height: 1.35; border-radius: 12px; box-shadow: 0 4px 12px -6px rgba(39, 25, 22, .4); }
.mch__burbuja--ella { align-self: flex-start; background: var(--blanco); border-bottom-left-radius: 3px; }
.mch__burbuja--tu { align-self: flex-end; background: var(--espresso); color: var(--papel) !important; border-bottom-right-radius: 3px; }

/* 08 Talles */
.mock--talles { background: var(--tabaco); }
.mt__tarjeta { --rot: -2deg; transform: rotate(-2deg); width: 72%; background: var(--papel); padding: 7%; text-align: center; }
.mt__titulo { margin: 0 0 10px; font: 400 clamp(13px, 2.2vw, 17px)/1 var(--font-display); }
.mt__unias { display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: 44px; }
.mt__unias span { width: calc(18px * var(--w)); height: calc(40px * var(--w)); border-radius: 50% 50% 4px 4px / 60% 60% 4px 4px; background: linear-gradient(var(--tabaco), var(--caramelo)); }
.mt__escala { display: flex; justify-content: center; gap: 6px; margin: 10px 0 6px; }
.mt__escala b { font-weight: 500; font-size: 9px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--espresso); border-radius: 50%; }
.mt__escala .activo { background: var(--espresso); color: var(--papel); }
.mt__nota { margin: 0; font-size: 8px; color: var(--caramelo-profundo) !important; }

/* 09 Mes de contenido */
.mmes__hoja { --rot: 2deg; transform: rotate(2deg); width: 80%; background: var(--blanco); padding: 6%; }
.mmes__titulo { margin: 0 0 8px; font: 400 clamp(12px, 2vw, 16px)/1 var(--font-display); }
.mmes__grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mmes__grilla span { aspect-ratio: 1; background: var(--papel); border-radius: 2px; font-size: 6px; display: grid; place-items: center; overflow: hidden; }
.mmes__grilla .r { background: var(--espresso); color: var(--papel); }
.mmes__grilla .c { background: var(--arena); }
.mmes__grilla .h { background: var(--taupe); }

/* ---------- Prueba: 35.000 unidades ---------- */
.prueba { background: var(--espresso); color: var(--papel); }
.prueba__grid { display: grid; gap: var(--s-8); }
.prueba__cifra { font-variant-numeric: tabular-nums; }
.prueba__bajada { color: var(--nude); }
.prueba__grafico { position: relative; margin: 0; padding: var(--s-7) var(--s-5) var(--s-5); border: var(--filete) solid var(--caramelo); border-radius: var(--r-tarjeta); }
.prueba__grafico .provisorio__tag { top: var(--s-3); right: var(--s-3); left: auto; }
.prueba__barras { display: grid; grid-template-columns: repeat(var(--n, 7), 1fr); gap: var(--s-2); height: 260px; }
.prueba__barra { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; text-align: center; gap: 6px; min-width: 0; }
.prueba__valor { font-size: 11px; color: var(--nude); }
.prueba__col { flex-shrink: 0; height: 0; background: var(--arena); border-radius: 3px 3px 0 0; transition: height 1100ms var(--ease); }
.prueba__barra:last-child .prueba__col { background: var(--papel); }
.prueba__anio { font-size: 12px; color: var(--taupe); padding-top: 6px; border-top: var(--filete) solid var(--caramelo); }
.prueba__pie { margin-top: var(--s-4); color: var(--taupe); }

@media (min-width: 768px) {
  .mg__portada, .mg__pagina { width: clamp(140px, 19vw, 190px); }
  .prueba__barras { height: 320px; }
  .prueba__valor { font-size: 12px; }
}
@media (min-width: 1024px) {
  .prueba__grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--s-9); align-items: center; }
  .herramienta--destacada .mock { aspect-ratio: auto; height: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .herramienta, .mock > *, .prueba__col { transition: none; }
}

/* ---------- Lifestyle ---------- */
.vida { background: var(--papel); padding-top: 0; }
.vida__lista { display: grid; gap: var(--s-7) var(--s-4); list-style: none; margin: 0; padding: 0; }
.vida__momento { display: grid; gap: var(--s-2); align-content: start; }
.vida__momento img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 25%; background: var(--tabaco); border-radius: var(--r-tarjeta); margin-bottom: var(--s-3); }
.vida__num { margin: 0; font-family: var(--font-display); font-size: 18px; color: var(--caramelo-profundo); }
.vida__titulo { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 1.15; }
.vida__momento .t-small { max-width: 32ch; }
@media (min-width: 600px) {
  .vida__lista { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .vida__lista { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
  .vida__momento:nth-child(even) { margin-top: var(--s-8); }
}

/* 08 Sizing kit (reemplaza la escala XS–L) y 10 Tarjeta para el kit */
.mt__titulo em { font-style: italic; }
.mt__tarjeta { width: 84%; }
.mt__unias span { width: calc(15px * var(--w)); height: 30px; }
.mt__unias { gap: 3px; height: 32px; }
.mt__numeros { display: flex; justify-content: center; gap: 3px; margin: 4px 0 8px; }
.mt__numeros b { width: 15px; font: 400 8px/1 var(--font-display); text-align: center; }

.mock--tarjeta { background: var(--nude); }
.mk__tarjeta {
  --rot: -3deg; transform: rotate(-3deg);
  width: 46%; aspect-ratio: 95 / 140; padding: 7% 5%;
  background: var(--espresso); color: var(--papel); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: 0 1px 2px rgba(39, 25, 22, .12), 0 14px 30px -10px rgba(39, 25, 22, .55);
}
.mk__eyebrow { margin: 0; font-size: 6px; letter-spacing: .2em; text-transform: uppercase; color: var(--arena) !important; }
.mk__titulo { margin: 0 0 4px; font: 400 clamp(12px, 2vw, 15px)/1.05 var(--font-display); }
.mk__titulo em { font-style: italic; display: block; }
.mk__mano { margin: 4px 0 0; font-size: 5.5px; letter-spacing: .16em; text-transform: uppercase; }
.mk__unias { display: flex; gap: 3px; justify-content: center; }
.mk__unias span { width: 13px; height: 22px; border-radius: 50% 50% 40% 40% / 35% 35% 22% 22%; background: linear-gradient(160deg, #F3D9D0, #C98F86 70%, #A8645C); box-shadow: inset 0 1px 1px rgba(255,255,255,.6); }
@media (min-width: 560px) and (max-width: 767px) {
  .herramientas { grid-template-columns: repeat(2, 1fr); }
  .herramienta--destacada { grid-column: 1 / -1; }
}
.mt__tarjeta { width: 76%; padding: 8% 6%; }
.mt__unias span { width: calc(17px * var(--w)); height: 34px; }
.mt__unias { height: 36px; }
.mt__numeros b { width: 17px; font-size: 9px; }

/* ---------- Imágenes de la sección "a cualquier hora" ---------- */
.ahora__fotos { display: grid; gap: var(--s-4); margin-bottom: var(--s-8); }
.ahora__foto { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-tarjeta); background: var(--tabaco); }
.ahora__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.ahora__foto figcaption {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  display: flex; align-items: center; gap: var(--s-3);
  padding: 6px var(--s-4) 6px 6px; border-radius: var(--r-pill);
  background: var(--papel); color: var(--espresso); font-size: 15px; font-weight: 500;
}
.ahora__foto figcaption span { padding: 4px 12px; border-radius: var(--r-pill); background: var(--espresso); color: var(--papel); font-family: var(--font-display); font-weight: 400; font-size: 17px; }
@media (min-width: 768px) {
  .ahora__fotos { grid-template-columns: 1.45fr 1fr; align-items: stretch; }
  .ahora__foto img { height: 100%; aspect-ratio: auto; min-height: 380px; }
  .ahora__foto:not(.ahora__foto--noche) img { object-position: center 30%; }
}

/* Maquetas coloridas del sizing kit y la tarjeta, con lugar para el logo */
.mock--talles { background: var(--nude); }
.mt__tarjeta { background: #F7C9D6; color: #5A1F33; position: relative; overflow: hidden; }
.mt__tarjeta::before { content: ""; position: absolute; width: 60%; aspect-ratio: 1; right: -18%; top: -40%; border-radius: 50%; background: #FBE0E8; }
.mt__tarjeta > * { position: relative; }
.mt__cabeza { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; }
.mt__cabeza .mt__titulo { margin: 0; }
.mt__titulo em { color: #D9467A; }
.mt__unias span { background: #FFFFFF; border: 1px dashed rgba(90, 31, 51, .45); }
.mt__numeros b { width: 15px; height: 15px; border-radius: 50%; background: #D9467A; color: #FFFFFF; font: 600 7px/15px var(--font-body); }
.mt__nota { color: #5A1F33 !important; }
.mlogo { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px dashed #D9467A; background: #FFFFFF; color: #D9467A; display: grid; place-items: center; text-align: center; font: 600 5px/1.15 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.mlogo--chico { width: 22px; height: 22px; font-size: 4.5px; margin-bottom: 2px; }

.mock--tarjeta { background: var(--tabaco); }
.mk__tarjeta { background: #F7C9D6; color: #5A1F33; position: relative; overflow: hidden; }
.mk__tarjeta::before { content: ""; position: absolute; width: 80%; aspect-ratio: 1; right: -35%; top: -25%; border-radius: 50%; background: #FBE0E8; }
.mk__tarjeta > * { position: relative; }
.mk__eyebrow { color: #D9467A !important; }
.mk__titulo em { color: #D9467A; }
.mk__unias span { background: linear-gradient(160deg, #FFFFFF, #F8D9E1 60%, #EBB3C2); box-shadow: inset 0 1px 1px rgba(255,255,255,.8), 0 1px 2px rgba(90,31,51,.2); }