/* CartaListo, web comercial. Solo usa los tokens --cl-* de tokens.css y CSS nativo (sin JavaScript, sin CDN).
   Escala de capas: cabecera sticky = 10. Todo lo demás en el flujo normal. */

:root {
  color-scheme: light dark;
  --bg: var(--cl-crema);
  --fg: var(--cl-tinta);
  --soft: var(--cl-gris);
  --card: var(--cl-blanco);
  --line: var(--cl-borde);
  --link: var(--cl-tomate-texto);
  --suave-bg: #FBEAD3;
  --sombra-c: var(--cl-tinta);
  --band: var(--cl-tinta);
  --band-fg: var(--cl-crema);
  --acento-titulo: #EE4A21;  /* tomate un punto más oscuro: 3,45:1 sobre crema (el tomate de marca da 2,87:1 y no llega al 3:1 de texto grande) */
  --cabecera-h: 72px;
  /* Zonas seguras del dispositivo (notch, isla, recorte, barra de gestos). Valen 0 en pantallas sin recorte. */
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --cab-total: calc(var(--cabecera-h) + var(--sat));
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15131f;
    --fg: #FFF5E6;
    --soft: #CFCBE0;
    --card: #1f1c2e;
    --line: #3a3652;
    --link: #FF8A6B;
    --suave-bg: #1b1829;
    --acento-titulo: var(--cl-tomate);
    --sombra-c: #0b0a12;
    --band: #0d0b15;
    --band-fg: #FFF5E6;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--cab-total) + 12px); -webkit-text-size-adjust: 100%; scrollbar-color: var(--cl-tomate) var(--bg); accent-color: var(--cl-tomate); }
::selection { background: var(--cl-tomate); color: var(--cl-tinta); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 var(--cl-texto)/1.6 var(--cl-fuente-texto); }
img { max-width: 100%; height: auto; }
a { color: var(--link); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--cl-tomate); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.cl-titulo { color: var(--fg); }
.cl-titulo em { color: var(--acento-titulo); }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: max(clamp(16px, 4vw, 32px), var(--sal)) max(clamp(16px, 4vw, 32px), var(--sar)); }
.wrap--estrecho { max-width: 860px; }
.salto { position: absolute; left: -999px; top: max(8px, var(--sat)); background: var(--cl-tinta); color: var(--cl-crema); padding: 8px 14px; border-radius: 8px; z-index: 20; }
.salto:focus { left: max(8px, var(--sal)); }

/* ---------- Botones: misma forma en toda la página (pastilla) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  font: 800 1.125rem/1 var(--cl-fuente-titulos); padding: 0.95em 1.6em; border-radius: var(--cl-radio-pastilla);
  background: var(--cl-tomate); color: var(--cl-tinta); text-decoration: none; border: 2px solid var(--cl-tomate);
  box-shadow: 0 6px 0 var(--sombra-c); transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(2px); box-shadow: 0 4px 0 var(--sombra-c); }
.btn:active { transform: translateY(6px); box-shadow: none; }
.btn--claro { background: var(--bg); color: var(--fg); border-color: var(--fg); }
.btn--chico { font-size: 1rem; padding: 0.8em 1.2em; box-shadow: 0 4px 0 var(--sombra-c); }
.btn--chico:hover { box-shadow: 0 2px 0 var(--sombra-c); }

/* ---------- Iconos (Phosphor, bold) con máscara: heredan el color del texto ---------- */
.ico { display: inline-block; flex: none; width: 1.5rem; height: 1.5rem; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ico--no { --i: url(/assets/icons/prohibit.svg); }
.ico--si { --i: url(/assets/icons/check-circle.svg); }
.ico--camara { --i: url(/assets/icons/camera.svg); }
.ico--qr { --i: url(/assets/icons/qr-code.svg); }
.ico--ok { --i: url(/assets/icons/check-circle.svg); }
.ico--destello { --i: url(/assets/icons/sparkle.svg); }
.ico--escudo { --i: url(/assets/icons/shield-check.svg); }
.ico--etiqueta { --i: url(/assets/icons/tag.svg); }
.ico--refrescar { --i: url(/assets/icons/arrows-clockwise.svg); }
.ico--pincel { --i: url(/assets/icons/paint-brush.svg); }
.ico--galleta { --i: url(/assets/icons/cookie.svg); }
.ico--reloj { --i: url(/assets/icons/clock.svg); }

/* ---------- Cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: 10; background: var(--bg); height: var(--cab-total); padding-top: var(--sat); }  /* el fondo cubre también bajo el notch */
.cabecera__fila { display: flex; align-items: center; gap: 24px; height: 100%; }
.logo { display: inline-flex; margin-right: auto; }
.logo img { display: block; height: 40px; width: auto; }
.logo picture { display: block; }
.menu { display: flex; gap: 28px; }
.menu a { color: var(--fg); text-decoration: none; font-weight: 700; }
.menu a:hover { color: var(--link); }
@media (max-width: 880px) { .menu { display: none; } }
.contacto__correo a, .faq details p a, .contacto__aviso a { padding-block: 10px; display: inline-block; }
@media (prefers-color-scheme: dark) { .celda--a { border-color: var(--line); } }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(64px, 9vw, 128px); }
.seccion--suave { background: var(--suave-bg); }
.seccion__titulo { font-size: var(--cl-titulo-l); line-height: 1; letter-spacing: -0.015em; max-width: 18ch; }
.seccion__texto { margin-top: 20px; font-size: var(--cl-texto-l); max-width: 52ch; color: var(--soft); }

/* ---------- 1. Hero ---------- */
.hero { position: relative; padding-block: 24px clamp(48px, 7vw, 96px); overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0 0 0 auto; width: min(46vw, 560px);
  background: url(/assets/confeti-derecha.svg) right top / cover no-repeat; opacity: .9; pointer-events: none;
  /* bordes difuminados: la imagen se funde con el fondo en lugar de cortarse en seco */
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 100% 35%, #000 30%, transparent 100%), linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); -webkit-mask-composite: source-in; mask-image: radial-gradient(ellipse 85% 80% at 100% 35%, #000 30%, transparent 100%), linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); mask-composite: intersect; }
.hero__rejilla { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 64px); align-items: center; min-height: min(calc(100dvh - var(--cab-total) - 24px), 760px); }
.hero__titulo { font-size: clamp(2.75rem, 1.2rem + 5.6vw, 5.75rem); line-height: .95; letter-spacing: -0.02em; }
.hero__titulo em { display: block; }
.hero__sub { margin-top: 24px; font-size: var(--cl-texto-l); max-width: 36ch; }
.hero__botones { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 16px 20px; }

.hero__movil { position: relative; justify-self: center; width: min(340px, 100%); }
.movil { position: relative; aspect-ratio: 9 / 18.6; border: 10px solid var(--cl-tinta); border-radius: 48px; background: var(--cl-tinta); overflow: hidden; box-shadow: 0 24px 0 -8px color-mix(in srgb, var(--cl-tinta) 18%, transparent); }
.movil { --estado-h: 44px; --estado-bg: #fffdf8; --estado-fg: #1d1a2f; }  /* mismos colores que --papel y --tinta de la carta */
@media (prefers-color-scheme: dark) { .movil { --estado-bg: #15131f; --estado-fg: #fff5e6; } }
.movil__isla { position: absolute; top: 8px; left: 50%; translate: -50% 0; width: 24%; height: 20px; border-radius: 99px; background: var(--cl-tinta); z-index: 3; }
.movil__estado { position: absolute; inset: 0 0 auto 0; height: var(--estado-h); z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 6px 22px 0; background: var(--estado-bg); color: var(--estado-fg); font: 700 13px/1 system-ui, -apple-system, sans-serif; pointer-events: none; }
.movil__estado svg { display: block; height: 12px; width: auto; fill: currentColor; }
.movil__estado span { display: inline-flex; align-items: center; gap: 5px; }
.movil__pantalla { display: block; width: 100%; height: calc(100% - var(--estado-h)); margin-top: var(--estado-h); border: 0; border-radius: 0 0 36px 36px; background: #fff; }
.pegatina { position: absolute; z-index: 2; box-shadow: 0 4px 0 var(--sombra-c); font-size: 1.25rem; }
.pegatina--arriba { top: 14%; left: -22%; }
.pegatina--abajo { bottom: 12%; left: -26%; }

@media (max-width: 860px) {
  .hero__rejilla { grid-template-columns: 1fr; min-height: 0; }
  .hero::before { inset: auto 0 0 0; width: 100%; height: 46%; opacity: .9;
    -webkit-mask-image: radial-gradient(ellipse 70% 75% at 50% 55%, #000 35%, transparent 100%), linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); -webkit-mask-composite: source-in; mask-image: radial-gradient(ellipse 70% 75% at 50% 55%, #000 35%, transparent 100%), linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); mask-composite: intersect; }  /* confeti solo detrás del móvil, nunca detrás del texto */
  .hero__movil { width: min(300px, 80%); margin-top: 16px; }
  .hero__movil { padding-top: 28px; }
  .pegatina { z-index: 5; }
  .pegatina--arriba { top: -6px; left: auto; right: 2%; }
  .pegatina--abajo { bottom: 8%; left: -10%; }
}

/* ---------- 2. Comparación ---------- */
.vs { margin-top: 48px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; align-items: stretch; }
.vs__col { border-radius: var(--cl-radio-l); padding: clamp(24px, 3vw, 40px); }
.vs__col h3 { font: 800 1.5rem/1.1 var(--cl-fuente-titulos); margin-bottom: 24px; }
.vs__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.vs__col li { display: flex; gap: 14px; align-items: flex-start; font-size: 1.125rem; }
.vs__col .ico { margin-top: 2px; }
.vs__col--papel { background: var(--suave-bg); color: var(--soft); }
.vs__col--papel li { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); }
.vs__col--digital { background: var(--cl-albahaca-texto); color: var(--cl-blanco); border: 3px solid var(--cl-tinta); box-shadow: 0 8px 0 var(--sombra-c); }
.vs__col--digital .ico { color: var(--cl-mantequilla); }
@media (max-width: 760px) { .vs { grid-template-columns: 1fr; } }

/* ---------- 3. Pasos ---------- */
.seccion--confeti { position: relative; }
.seccion--confeti::after { content: ""; position: absolute; inset: auto 0 0 0; height: 110px; background: url(/assets/confeti-banda.svg) center bottom / cover no-repeat; opacity: .55; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to top, transparent, #000 40%, #000 60%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent), linear-gradient(to top, transparent, #000 40%, #000 60%, transparent); mask-composite: intersect; }
.seccion--confeti .wrap { position: relative; z-index: 1; }
.pasos { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: 1.4fr 1fr; grid-template-areas: "a b" "a c"; gap: 20px; }
.paso { border-radius: var(--cl-radio-l); padding: clamp(24px, 3vw, 40px); color: var(--cl-tinta); border: 3px solid var(--cl-tinta); box-shadow: 0 8px 0 var(--sombra-c); }
.paso h3 { font: 800 1.5rem/1.05 var(--cl-fuente-titulos); margin-top: 18px; }
.paso p { margin-top: 12px; }
.paso__ico { width: 3rem; height: 3rem; }
.paso--a { grid-area: a; background: var(--cl-mantequilla); display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(16px, 2.4vw, 32px); align-items: end; min-height: 360px; }
.paso__foto { width: 100%; height: 100%; min-height: 260px; object-fit: cover; border-radius: var(--cl-radio); border: 3px solid var(--cl-tinta); background: var(--cl-blanco); }
.paso--a h3 { font-size: clamp(1.75rem, 2.4vw + 1rem, 2.75rem); max-width: 14ch; }
.paso--a p { max-width: 40ch; font-size: 1.125rem; }
.paso--b { grid-area: b; background: var(--cl-chicle); }
.paso--c { grid-area: c; background: var(--cl-albahaca); }
@media (max-width: 760px) { .pasos { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c"; } .paso--a { min-height: 0; grid-template-columns: 1fr; } .paso__foto { min-height: 0; height: 220px; } }

/* ---------- 4. Bento (6 piezas, 9 casillas) ---------- */
.bento { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: "a a b" "c d b" "e e f"; gap: 20px; }
.celda { border-radius: var(--cl-radio-l); padding: clamp(22px, 2.6vw, 34px); border: 3px solid var(--cl-tinta); color: var(--cl-tinta); }
.celda h3 { font: 800 1.375rem/1.1 var(--cl-fuente-titulos); margin-top: 14px; }
.celda p { margin-top: 10px; max-width: 46ch; }
.celda--a { grid-area: a; background: var(--cl-tinta); color: var(--cl-crema); border-color: var(--cl-tinta); }
.celda--a .ico { color: var(--cl-tomate); }
.celda--a h3 { font-size: clamp(1.6rem, 2vw + 1rem, 2.25rem); }
.celda--b { grid-area: b; background: var(--cl-mantequilla); display: flex; flex-direction: column; justify-content: flex-end; }
.celda--b h3 { font-size: 1.75rem; }
.celda--c { grid-area: c; background: var(--cl-blanco); }
.celda--d { grid-area: d; background: var(--cl-chicle); }
.celda--e { grid-area: e; background: var(--cl-albahaca-texto); color: var(--cl-blanco); border-color: var(--cl-tinta); }
.celda--e .ico { color: var(--cl-tinta); }
.celda--f { grid-area: f; background: var(--cl-tomate); }
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr 1fr; grid-template-areas: "a a" "b b" "c d" "e e" "f f"; }
}
@media (max-width: 560px) { .bento { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d" "e" "f"; } }

/* ---------- 7. Preguntas ---------- */
.faq { margin-top: 40px; display: grid; gap: 12px; }
.faq details { background: var(--card); border: 2px solid var(--fg); border-radius: var(--cl-radio); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 22px; font: 800 1.125rem/1.25 var(--cl-fuente-titulos); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; translate: 0 -52%; font: 800 1.75rem/1 var(--cl-fuente-titulos); color: var(--link); }
.faq details[open] summary::after { content: "-"; }
.faq details p { padding: 0 22px 22px; max-width: 62ch; color: var(--soft); }
.faq details[open] { box-shadow: 0 6px 0 var(--sombra-c); }

/* ---------- 8. Contacto ---------- */
.contacto { position: relative; overflow: hidden; }
.contacto::before { content: ""; position: absolute; inset: 0 0 0 auto; width: min(40vw, 480px); background: url(/assets/confeti-derecha.svg) right center / cover no-repeat; opacity: .85; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 100% 50%, #000 30%, transparent 100%), linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); -webkit-mask-composite: source-in; mask-image: radial-gradient(ellipse 85% 75% at 100% 50%, #000 30%, transparent 100%), linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); mask-composite: intersect; }
.contacto__rejilla { position: relative; display: grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items: center; }
.contacto__acciones { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.contacto__correo { font-size: 1.0625rem; }
.contacto__aviso { margin-top: 20px; font-size: .9375rem; color: var(--soft); max-width: 52ch; }
.visor { justify-self: center; padding: 28px; }
.visor::before, .visor::after { --c: var(--fg); }
.visor--simbolo { background: var(--card); border-radius: 36px; }
.visor--simbolo img { width: min(200px, 40vw); }
.visor--simbolo picture { display: block; }
@media (max-width: 760px) { .contacto__rejilla { grid-template-columns: 1fr; } .contacto::before { width: 100%; opacity: .25; } .contacto__arte { display: none; } }

/* ---------- Pie ---------- */
.pie { background: var(--band); color: var(--band-fg); padding-block: 48px calc(48px + var(--sab)); }
.pie__fila { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; align-items: start; }
.pie__marca p { margin-top: 16px; color: var(--cl-gris-claro); max-width: 34ch; }
.pie__enlaces { display: grid; gap: 10px; }
.pie a { color: var(--band-fg); }
.pie__enlaces { gap: 0; }
.pie__enlaces a { display: inline-block; padding-block: 11px; min-height: 44px; }  /* objetivo táctil de 44 px */
.pie__enlaces a:hover { color: var(--cl-tomate); }
@media (max-width: 760px) { .pie__fila { grid-template-columns: 1fr; } }

/* ---------- Movimiento: solo jerarquía (entrada del hero) y revelado al hacer scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes sube { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes pop { from { opacity: 0; transform: scale(.6) rotate(-14deg); } to { opacity: 1; transform: none; } }
  .hero__titulo { animation: sube .7s cubic-bezier(.16, 1, .3, 1) both; }
  .hero__sub { animation: sube .7s .12s cubic-bezier(.16, 1, .3, 1) both; }
  .hero__botones { animation: sube .7s .24s cubic-bezier(.16, 1, .3, 1) both; }
  .hero__movil { animation: sube .8s .1s cubic-bezier(.16, 1, .3, 1) both; }
  .pegatina { animation: pop .5s .7s cubic-bezier(.34, 1.56, .64, 1) both; }
  .pegatina--abajo { animation-delay: .85s; }
  /* Segundo y último momento: los tres pasos entran en orden, que es justo lo que cuentan. */
  @supports (animation-timeline: view()) {
    .paso { animation: sube linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
}
/* Animación sutil (solo transform/opacity, sin JS). El contenido no depende de ella: si el navegador no soporta
   animation-timeline, o el usuario reduce el movimiento, todo se ve ya en su sitio. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes aparece-precio { from { opacity: .35; transform: scale(.88); } to { opacity: 1; transform: none; } }
  @keyframes empuja { from { opacity: .3; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
  @supports (animation-timeline: view()) {
    .vs__col, .celda, .plan, .cambios__panel, .qr__piezas, .contacto__rejilla > div:first-child { animation: sube linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
    .cambios__antes-a { transform-origin: left center; animation: aparece-precio linear both; animation-timeline: view(); animation-range: entry 30% entry 90%; }
    .cambios__flecha { display: inline-block; animation: empuja linear both; animation-timeline: view(); animation-range: entry 20% entry 80%; }
  }
  /* Hover: levantar tarjetas con la propiedad `translate` (no choca con la animación de entrada). */
  @media (hover: hover) {
    .celda, .plan, .vs__col--digital { transition: translate .2s ease; }
    .celda:hover, .plan:hover { translate: 0 -4px; }
  }
  .faq details { transition: box-shadow .2s ease; }
  .menu a, .pie__enlaces a { transition: color .15s ease; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }

/* ---------- 404 ---------- */
.pagina-404 { padding-block: 96px; }
.pagina-404 h1 { margin-top: 48px; }
.pagina-404__accion { margin-top: 32px; }


/* ---------- Cambios al momento ---------- */
.cambios__rejilla { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.cambios__lista { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 10px; max-width: 46ch; }
.cambios__panel { margin: 0; }
.cambios__panel img { display: block; width: 100%; height: auto; border-radius: var(--cl-radio); border: 3px solid var(--cl-tinta); background: #f6f5fb; box-shadow: 0 8px 0 var(--sombra-c); }
.cambios__antes { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; font: 800 clamp(1.5rem, 2vw + 1rem, 2.25rem)/1 var(--cl-fuente-titulos); }
.cambios__antes-de { color: var(--soft); text-decoration: line-through; text-decoration-thickness: 2px; }
.cambios__antes-a { color: var(--fg); }
.cambios__etiqueta { display: block; font: 700 .8125rem/1.2 var(--cl-fuente-texto); text-decoration: none; color: var(--soft); margin-bottom: 4px; }
.cambios__flecha { color: var(--link); font-size: 1.75rem; }
@media (max-width: 860px) { .cambios__rejilla { grid-template-columns: 1fr; } }

/* ---------- HTML frente a PDF ---------- */
.html__rejilla { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 5vw, 80px); align-items: start; }
.html__texto { position: sticky; top: calc(var(--cab-total) + 24px); }
.html__enlace { margin-top: 32px; }
.html__lista { margin: 0; display: grid; gap: 26px; }
.html__lista dt { font: 800 1.25rem/1.2 var(--cl-fuente-titulos); }
.html__lista dd { margin: 6px 0 0; color: var(--soft); max-width: 52ch; }
@media (max-width: 860px) { .html__rejilla { grid-template-columns: 1fr; } .html__texto { position: static; } }

/* ---------- Tu QR ---------- */
.qr { background: var(--band); color: var(--band-fg); padding-block: clamp(64px, 9vw, 120px); }
.qr .cl-titulo { color: var(--band-fg); }
.qr .seccion__texto, .qr__nota { color: var(--cl-gris-claro); }
.qr__rejilla { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.qr__piezas { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 28px; }
.expositor { width: min(300px, 100%); min-height: 430px; background: var(--cl-crema); color: var(--cl-tinta); border-radius: 12px; display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; box-shadow: 0 10px 0 rgb(0 0 0 / .35); }
.expositor__local { margin-top: 18px; font: 700 .9375rem/1 var(--cl-fuente-texto); }
.expositor__titulo { margin: 10px 14px 0; font-size: 1.5rem; line-height: .95; color: var(--cl-tinta); }
.qr .expositor__titulo { color: var(--cl-tinta); }
.expositor__titulo em { display: block; color: var(--cl-tomate-texto); }
.qr .expositor__titulo em { color: var(--cl-tomate-texto); }
.expositor__visor { --c: var(--cl-tinta); margin-top: 8px; padding: 16px; }
.expositor__visor::before, .expositor__visor::after { --c: var(--cl-tinta); --t: 4px; }
.expositor__visor img { display: block; width: 150px; height: auto; }
.expositor__pie { margin: auto 0 0; width: 100%; background: var(--cl-tomate); padding: 12px 0; display: flex; justify-content: center; }
.expositor__pie img { display: block; width: 130px; height: auto; }
.pegatina-qr { width: 190px; height: 190px; border-radius: 50%; background: var(--cl-tomate); color: var(--cl-tinta); display: grid; place-items: center; align-content: center; gap: 4px; font: 800 .75rem/1 var(--cl-fuente-titulos); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 8px 0 rgb(0 0 0 / .35); }
.pegatina-qr img { display: block; width: 104px; height: 104px; border-radius: 10px; }
.qr__nota { margin-top: 20px; font-size: .9375rem; }
.qr__variantes { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 22px; }
.qr__variantes li { display: grid; justify-items: center; gap: 8px; width: 112px; text-align: center; font-size: .875rem; color: var(--cl-gris-claro); }
.qr__variantes img { display: block; width: 112px; height: 112px; border-radius: 12px; }
.qr__guia h3 { font: 800 1.5rem/1.1 var(--cl-fuente-titulos); color: var(--band-fg); }
.guia { margin: 24px 0 0; padding: 0; list-style: none; counter-reset: g; display: grid; gap: 18px; }
.guia li { counter-increment: g; position: relative; padding-left: 44px; color: var(--cl-gris-claro); }
.guia li::before { content: counter(g); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--cl-mantequilla); color: var(--cl-tinta); font: 800 .9375rem/30px var(--cl-fuente-titulos); text-align: center; }
.guia strong { color: var(--band-fg); }
@media (max-width: 900px) { .qr__rejilla { grid-template-columns: 1fr; } }

/* ---------- Precios ---------- */
.planes { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 520px); justify-content: center; gap: 20px; align-items: stretch; }
.plan { border-radius: var(--cl-radio-l); padding: clamp(24px, 2.6vw, 36px); border: 3px solid var(--cl-tinta); display: flex; flex-direction: column; gap: 6px; }
.plan h3 { font: 800 1.5rem/1.1 var(--cl-fuente-titulos); }
.plan__para { font-size: .9375rem; }
.plan__precio { margin-top: 14px; font: 800 clamp(2.5rem, 3vw + 1rem, 3.5rem)/.95 var(--cl-fuente-titulos); letter-spacing: -0.02em; }
.plan__precio span { font: 600 .9375rem/1.2 var(--cl-fuente-texto); letter-spacing: 0; }
.plan__precio--m { font-size: clamp(2rem, 2vw + 1rem, 2.75rem); }
.plan__mes { font-size: .9375rem; margin-bottom: 14px; }
.plan__lista { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; flex: 1; }
.plan__lista li { display: flex; gap: 12px; align-items: flex-start; }
.plan__lista .ico { margin-top: 2px; }
.plan .btn { align-self: flex-start; margin-top: auto; }
.btn--pronto, .btn--pronto:hover, .btn--pronto:active { background: transparent; color: inherit; border: 2px dashed currentColor; box-shadow: none; transform: none; cursor: not-allowed; }
.plan__ya { margin-top: 12px; font-size: .9375rem; }
.plan__ya a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.precios__otros { margin: 40px auto 0; max-width: 60ch; font-size: 1.0625rem; text-align: center; color: var(--soft); }
.precios__otros strong { display: block; margin-bottom: 6px; color: var(--fg); font: 800 1.25rem/1.25 var(--cl-fuente-titulos); text-wrap: balance; }
.plan--viva { background: var(--cl-mantequilla); color: var(--cl-tinta); box-shadow: 0 8px 0 var(--sombra-c); }
@media (max-width: 980px) { .planes { grid-template-columns: 1fr; } }