/* La landing de Mesea — las secciones, de arriba abajo: portada, problema, base, comparativa, Store,
   preguntas y cierre (sin precios ni planes desde el 2026-10-28). Las maquetas (el día en vivo y el móvil) van en maquetas.css. */

/* Sobre pruna o tinta, el anillo de foco pruna no se ve: ahí va en menta. */
.cesta :focus-visible, .cierre :focus-visible { outline-color: var(--acento); }

/* ── Portada ────────────────────────────────────────────────────────────────────────────────── */

.hero { padding: clamp(56px, 9vh, 110px) 0 clamp(64px, 10vh, 120px); }
.hero__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr));
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero__texto { display: flex; flex-direction: column; gap: 28px; }
.pastilla {
  align-self: flex-start; display: flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--acento); color: var(--brand);
  font-size: 13px; font-weight: 800;
}
.pastilla__nuevo {
  padding: 3px 8px; border-radius: 999px; background: var(--brand); color: var(--on-color);
  font-size: 11px; letter-spacing: 0.08em;
}
.hero__titulo {
  font-size: clamp(48px, 6.4vw, 104px); line-height: 0.92; letter-spacing: -0.055em;
  font-weight: 800; color: var(--tema-titulo);
}
.hero__entradilla { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; max-width: 30em; color: var(--tema-texto); }
.hero__garantias {
  display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; font-weight: 600; color: var(--tema-suave);
}

/* La tarjeta (js/escena.js): la portada se queda quieta y el problema sube por encima, con las esquinas
   redondas, hasta taparla; mientras, la portada se hunde un poco. La portada se queda en cuanto se ha
   visto entera (`--hero-pegado`: la cabecera, o menos si no cabe en la pantalla). Sin JS o con
   «reducir movimiento», nada de esto: las dos secciones, una detrás de otra. */
.con-movimiento .hero { position: sticky; top: var(--hero-pegado, 72px); }
.con-movimiento .hero__rejilla {
  transform-origin: 50% 0;
  transform: scale(calc(1 - 0.06 * var(--hundido, 0)));
  opacity: calc(1 - 0.55 * var(--hundido, 0));
}
.con-movimiento .problema {
  position: relative; z-index: 1;
  min-height: calc(100svh - 72px); display: flex; align-items: center;
  border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
}
.con-movimiento .problema__dentro { width: 100%; }

/* ── El problema ────────────────────────────────────────────────────────────────────────────── */

.problema { background: var(--ink); color: var(--on-color); padding: var(--hueco-seccion) 0; }
.problema__dentro { display: flex; flex-direction: column; gap: 56px; }
.problema__titulo { line-height: 1; max-width: 16em; color: var(--on-color); }
.problema__cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(16px, 2vw, 28px);
  border-top: 1px solid var(--on-color-line-2);
  padding-top: 40px;
}
.problema__cifras li { display: flex; flex-direction: column; gap: 10px; }
.problema__cifras strong {
  font-size: clamp(44px, 4.4vw, 72px); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95;
  color: var(--acento); font-variant-numeric: tabular-nums;
}
.problema__cifras small { font-size: 0.3em; font-weight: 700; letter-spacing: 0; }
.problema__que { font-size: 17px; font-weight: 700; }
.problema__nota { font-size: 15px; line-height: 1.55; color: var(--sobre-ink); }

/* ── Todo en una sola app: las pestañas, la ficha de cada parte y su imagen ──────────────────── */

.partes { display: flex; flex-direction: column; gap: 20px; }
.partes__pestanas { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 28px; background: var(--bg); align-self: flex-start; }
.partes__pestanas button {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink);
  cursor: pointer; font-size: 15px; font-weight: 700;
}
.partes__pestanas button:hover { background: var(--surface); }
.partes__pestanas button[aria-selected="true"] { background: var(--brand); color: var(--on-color); font-weight: 800; }

/* La ficha primero, pegada a las pestañas (lo que cambia al tocar una se ve sin bajar), e Inicio al lado
   en ancho o debajo en estrecho. */
.partes__visor {
  min-width: 0; border-radius: 32px; background: var(--bg); padding: clamp(16px, 3vw, 40px);
  display: grid; gap: clamp(20px, 3vw, 40px); align-items: center;
}
@media (min-width: 1024px) {
  .partes__visor { grid-template-columns: minmax(280px, 1fr) minmax(0, 1.7fr); }
}
.partes .ficha__titulo { font-size: clamp(26px, 2.4vw, 36px); }
.con-movimiento .partes__texto.cambiando { animation: ficha-entra 0.4s var(--ease-out); }
.con-movimiento .ventana__imagen.cambiando { animation: imagen-entra 0.35s var(--ease-out); }
@keyframes imagen-entra { from { opacity: 0; } }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(12px); } }

/* La ventana del navegador, con la parte elegida en una imagen quieta. */
.ventana { min-width: 0; margin: 0; border-radius: 20px; background: var(--surface); border: 1px solid var(--line-2); overflow: hidden; }
.ventana__barra { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line-soft); }
.ventana__punto { width: 12px; height: 12px; border-radius: 50%; background: var(--line-2); }
.ventana__direccion {
  flex: 0 1 360px; min-width: 0; margin: 0 auto; padding: 6px 14px; border-radius: 999px; background: var(--bg);
  color: var(--ink-3); font-size: 13px; font-weight: 700; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ventana__imagen { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; }
.ventana__imagen[hidden] { display: none; }

.ficha { display: flex; flex-direction: column; gap: 16px; }
.ficha[hidden] { display: none; }
.ficha__etiqueta {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--brand);
}
.ficha__titulo {
  font-size: clamp(30px, 3vw, 48px); line-height: 1; letter-spacing: -0.045em; font-weight: 800; color: var(--brand);
}
.ficha__puntos { display: flex; flex-direction: column; margin-top: 8px; }
.ficha__puntos li {
  display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2);
  font-size: 15px; line-height: 1.5;
}
.ficha__puntos li::before {
  content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--acento);
  margin-top: 7px; flex-shrink: 0; box-shadow: 0 0 0 1.5px var(--brand);
}

/* ── La calculadora: lo que se pierde en no-shows y comisiones (en el problema, sobre la tinta) ── */

.calculadora { display: flex; flex-direction: column; gap: 32px; }
.calculadora__cabeza { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px 40px; align-items: end; }
.calculadora__titulo { font-size: clamp(36px, 4vw, 60px); line-height: 0.95; letter-spacing: -0.045em; font-weight: 800; }
/* Dentro del problema, debajo de su título, la calculadora lleva el suyo un punto más pequeño. */
.problema .calculadora__titulo { font-size: clamp(28px, 3vw, 44px); }
.calculadora__entradilla { font-size: 17px; line-height: 1.55; color: var(--sobre-ink); }
.calculadora__cuerpo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.calculadora__mandos { display: flex; flex-direction: column; gap: 18px; border-top: 1px solid var(--on-color-line-2); padding-top: 20px; }
.mando { display: flex; flex-direction: column; gap: 8px; }
.mando__nombre { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 700; }
.mando__nombre output { color: var(--acento); font-weight: 800; font-variant-numeric: tabular-nums; }
.mando input { width: 100%; accent-color: var(--acento); }
.calculadora__resultado {
  border-radius: 28px; background: var(--acento); color: var(--brand); padding: clamp(22px, 2.6vw, 34px);
  display: flex; flex-direction: column; gap: 12px;
}
.calculadora__etiqueta { font-size: 13px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.calculadora__total { font-size: clamp(52px, 5.5vw, 84px); font-weight: 800; letter-spacing: -0.05em; line-height: 0.95; font-variant-numeric: tabular-nums; }
.calculadora__desglose { flex: 1; }
.calculadora__desglose li {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--brand);
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.calculadora__desglose b { font-weight: 800; }
.calculadora__mesea { padding: 14px 16px; border-radius: 16px; background: var(--brand); color: var(--on-color); font-size: 15px; }
.calculadora__mesea b { color: var(--acento); }
.calculadora__fuentes { font-size: 13px; line-height: 1.55; color: var(--sobre-ink); max-width: 70em; }

@media (max-width: 860px) {
  .calculadora__cuerpo { grid-template-columns: minmax(0, 1fr); }
}

/* ── La comparativa: lo que tienes hoy y lo que puedes tener (sin marcas) ─────────────────────── */

.comparativa { display: flex; flex-direction: column; gap: 32px; }
.comparativa__tabla { display: flex; flex-direction: column; overflow-x: auto; }
.comparativa__fila {
  display: grid; grid-template-columns: minmax(180px, 1.3fr) repeat(3, minmax(130px, 1fr)); gap: 0;
  border-top: 1px solid var(--line-soft); min-width: 640px;
}
.comparativa__fila > span { padding: 14px 16px; font-size: 15px; line-height: 1.4; }
.comparativa__fila > span:first-child { font-weight: 800; color: var(--ink); }
.comparativa__fila--cabeza { border-top: 0; }
.comparativa__fila--cabeza > span { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.comparativa__mal { color: var(--ink-3); }
/* La columna de Mesea, como una tarjeta pruna de arriba abajo. */
.comparativa__nuestra { background: var(--brand); color: var(--on-color); font-weight: 800; }
.comparativa__fila--cabeza .comparativa__nuestra { color: var(--acento); border-radius: 20px 20px 0 0; }
.comparativa__fila:last-child .comparativa__nuestra { border-radius: 0 0 20px 20px; }
.comparativa__fila .comparativa__nuestra { border-top: 1px solid var(--on-color-line); }

/* En el móvil no cabe la tabla: cada fila es una tarjeta, con el nombre de cada columna a la izquierda
   (`data-columna`) y Mesea abajo, en su franja pruna. */
@media (max-width: 700px) {
  .comparativa__tabla { gap: 12px; overflow: visible; }
  .comparativa__fila {
    grid-template-columns: minmax(0, 1fr); min-width: 0; border-top: 0; border-radius: 20px;
    background: var(--bg); overflow: hidden;
  }
  .comparativa__fila--cabeza { display: none; }
  .comparativa__fila > span { display: flex; justify-content: space-between; gap: 12px; padding: 9px 16px; text-align: right; }
  .comparativa__fila > span:first-child { padding-top: 16px; font-size: 16px; text-align: left; }
  .comparativa__fila > span[data-columna]::before { content: attr(data-columna); font-weight: 600; color: var(--ink-3); text-align: left; }
  .comparativa__fila .comparativa__nuestra,
  .comparativa__fila:last-child .comparativa__nuestra { border-radius: 0; border-top: 0; padding-bottom: 14px; }
  .comparativa__fila > span.comparativa__nuestra[data-columna]::before { color: var(--acento); }
}

/* ── Preguntas frecuentes (sobre el gris del final) ──────────────────────────────────────────────── */

.preguntas { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 24px 48px; align-items: start; }
.preguntas__lista { display: flex; flex-direction: column; gap: 8px; }
.preguntas details { border-radius: 18px; background: var(--surface); }
.preguntas summary {
  list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; position: relative;
  font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink);
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; translate: 0 -50%;
  width: 26px; height: 26px; border-radius: 8px; background: var(--bg); color: var(--brand);
  display: grid; place-items: center; font-size: 18px; font-weight: 800;
}
.preguntas details[open] summary::after { content: "–"; background: var(--acento); }
.preguntas details p { padding: 0 20px 18px; font-size: 15px; line-height: 1.55; color: var(--texto); }
/* Lo que todavía es un compromiso por decidir, marcado en la pregunta. */
.pendiente {
  margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn-ink);
  font-size: 11px; font-weight: 800; vertical-align: middle; white-space: nowrap;
}

@media (max-width: 860px) {
  .preguntas { grid-template-columns: minmax(0, 1fr); }
}

/* ── La Store: extensiones que se encienden y la cesta ──────────────────────────────────────── */

.store {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
}
.store__extensiones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 12px;
}
.extension {
  display: flex; flex-direction: column; gap: 14px; padding: 20px; min-height: 200px;
  border-radius: 24px; border: 2px solid var(--surface); background: var(--surface); color: var(--brand);
  text-align: left; cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.4s var(--ease-out);
}
.extension:hover { transform: translateY(-4px); }
.extension[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-color); }
.extension__arriba { display: flex; justify-content: space-between; align-items: center; }
/* La Store va sobre el gris de la página (su tema): las tarjetas, blancas, y su icono, en gris. */
.extension__icono {
  width: 44px; height: 44px; border-radius: 12px; background: var(--bg); color: var(--brand);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.extension[aria-pressed="true"] .extension__icono { background: var(--acento); }
.extension__tipo {
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em; padding: 4px 8px; border-radius: 999px;
  background: var(--acento); color: var(--brand);
}
.extension__nombre { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.extension__desc { font-size: 14px; line-height: 1.45; flex: 1; }
.extension__abajo { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.extension__precio { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.extension__estado {
  height: 34px; padding: 0 14px; border-radius: 999px; background: var(--brand); color: var(--on-color);
  font-size: 13px; font-weight: 800; display: flex; align-items: center;
}
.extension[aria-pressed="true"] .extension__estado { background: var(--acento); color: var(--brand); }

.cesta {
  position: sticky; top: 96px; border-radius: 28px; background: var(--brand); color: var(--on-color);
  padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 18px;
}
.cesta__etiqueta {
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 800; color: var(--acento);
}
.cesta__lineas li {
  display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--on-color-line);
  font-size: 15px; font-variant-numeric: tabular-nums;
}
.cesta__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px; border-top: 1.5px solid var(--acento); font-size: 15px; font-weight: 700;
}
.cesta__total strong {
  font-size: clamp(28px, 2.6vw, 40px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--acento);
}
.cesta__nota { font-size: 13px; color: var(--sobre-brand); }

/* ── Cierre: la demo ────────────────────────────────────────────────────────────────────────── */

.cierre { background: var(--brand); color: var(--on-color); padding: var(--hueco-seccion) 0; }
.cierre__rejilla {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: clamp(32px, 5vw, 72px); align-items: end;
}
.cierre__titulo { font-size: clamp(44px, 6vw, 104px); line-height: 0.92; letter-spacing: -0.055em; font-weight: 800; }
.cierre__accion { display: flex; flex-direction: column; gap: 16px; }
.cierre__accion p { font-size: 18px; line-height: 1.55; color: var(--sobre-brand); }
.cierre__form { display: flex; gap: 8px; flex-wrap: wrap; }
.cierre__form input {
  flex: 1; min-width: 220px; height: 56px; padding: 0 22px; border-radius: 999px;
  border: 1.5px solid var(--on-color-borde); background: transparent; color: var(--on-color);
  font-size: 16px;
}
.cierre__form input::placeholder { color: var(--sobre-brand); opacity: 0.75; }
.cierre__form input:focus { border-color: var(--acento); }
.cierre__form .boton { height: 56px; padding: 0 26px; font-size: 16px; }

/* ── Aparecer al bajar (js/escena.js) ────────────────────────────────────────────────────────────
   Cada pieza entra cada vez que llega a la pantalla (al salir se reinicia; al subir, entra desde
   arriba: `--desde`), a su manera: el texto sube un poco y se funde; los
   títulos, además, se enfocan; las tarjetas suben y crecen apenas. Por turnos (`--orden`, 70 ms cada
   uno). Son animaciones y no transiciones, para no pisar las que ya tienen las tarjetas (el hover de
   las extensiones), y mueven `translate` y `scale`, no `transform`. Sin JS o con «reducir
   movimiento», todo está a la vista desde el principio. */
.con-movimiento .aparece:not(.visto) { opacity: 0; }
.con-movimiento .aparece.visto {
  animation: aparecer-sube 0.8s var(--ease-out) both;
  animation-delay: calc(min(var(--orden, 0), 9) * 70ms);
}
.con-movimiento .aparece--titulo.visto { animation-name: aparecer-titulo; animation-duration: 1s; }
.con-movimiento .aparece--tarjeta.visto { animation-name: aparecer-tarjeta; animation-duration: 0.9s; }
@keyframes aparecer-sube {
  from { opacity: 0; translate: 0 calc(24px * var(--desde, 1)); }
  to { opacity: 1; translate: 0 0; }
}
@keyframes aparecer-titulo {
  from { opacity: 0; translate: 0 calc(32px * var(--desde, 1)); filter: blur(8px); }
  to { opacity: 1; translate: 0 0; filter: none; }
}
@keyframes aparecer-tarjeta {
  from { opacity: 0; translate: 0 calc(40px * var(--desde, 1)); scale: 0.96; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}