/* RIGZ Store — misma familia visual del panel de RIGZ Studio: fondo casi negro y el amarillo del logo de RIGZ Store,
   Space Grotesk. Cada app tiñe su propia página con su color de marca. */
:root {
  --fondo: #0D0E11; --sup: #16181D; --borde: #23262D; --borde2: #2E323B; --texto: #EDEEF0; --suave: #9BA1AB;
  --amarillo: #FBDB03; --sobre-amarillo: #0D0E11; --peligro: #FF8A7A;
  --gutter: clamp(16px, 5vw, 56px);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--f-texto, 'Space Grotesk', system-ui, sans-serif); font-size: calc(17px * var(--escala, 1)); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; border-radius: 4px; }
main:focus { outline: none; }
.caja { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, .tarjeta-texto b, .plan b, .beneficios b, .pasos b, .linea-texto b { font-family: var(--f-titulo, 'Space Grotesk', system-ui, sans-serif); }
h1, h2 { line-height: 1.05; letter-spacing: -0.02em; margin: 0; }
h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 22px; }
.muted { color: var(--suave); }
.pequeno { font-size: 14px; }
.mono { font-family: 'IBM Plex Mono', monospace; }
.cargando { padding: 120px var(--gutter); color: var(--suave); }

/* Barra */
.barra { position: sticky; top: 0; z-index: 20; background: rgba(13,14,17,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); }
.barra-dentro { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; text-decoration: none; padding: 10px 0; }
.logo img { height: var(--logo-alto, 150px); width: auto; display: block; transition: height .3s cubic-bezier(.2,.8,.2,1); }
/* El logo nunca es más pequeño que los iconos de las apps. Al bajar se compacta un poco para no tapar contenido. */
.barra.compacta .logo img { height: calc(var(--logo-alto, 150px) * .64); }
@media (max-width: 560px) { .logo img { height: calc(var(--logo-alto, 150px) * .8); } .barra.compacta .logo img { height: calc(var(--logo-alto, 150px) * .53); } }
.barra-nav { display: flex; align-items: center; gap: clamp(10px, 2.5vw, 24px); flex-wrap: wrap; justify-content: flex-end; }
.barra-nav a { text-decoration: none; font-size: 15px; color: var(--suave); transition: color .2s; }
.barra-nav a:hover { color: var(--texto); }
.carrito-boton b { display: inline-flex; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--amarillo); color: var(--sobre-amarillo); font-size: 12px; align-items: center; justify-content: center; animation: latir .35s ease; }
@keyframes latir { from { transform: scale(.6); } to { transform: none; } }
.idioma { display: inline-flex; border: 1px solid var(--borde2); border-radius: 999px; overflow: hidden; }
.idioma button { font: inherit; font-size: 13px; font-weight: 600; background: none; color: var(--suave); border: 0; padding: 4px 11px; min-height: 32px; cursor: pointer; transition: background .2s, color .2s; }
.idioma button[aria-pressed="true"] { background: var(--texto); color: var(--fondo); }

/* Iconos lineales (dibujados para la tienda, no emojis) */
.ic { width: 20px; height: 20px; flex: none; display: inline-block; vertical-align: middle; }
.ic svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.carrito-boton { display: inline-flex; align-items: center; gap: 7px; }
.boton, .enlace, .volver, .tarjeta-ir { gap: 8px; }
.volver, .tarjeta-ir { display: inline-flex; align-items: center; }
.enlace { display: inline-flex; align-items: center; }
.pasos .ic { width: 28px; height: 28px; color: var(--amarillo); }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 10px 22px; border-radius: 999px; border: 0; background: var(--amarillo); color: var(--sobre-amarillo); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform .2s, background .2s; }
.boton:hover { transform: translateY(-2px); }
.boton:disabled { opacity: .6; cursor: wait; transform: none; }
.boton-sec { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--borde2); }
.boton-ancho { width: 100%; }
.enlace { background: none; border: 0; color: var(--suave); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 8px; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

/* Iconos de app: cuadrados con esquinas redondeadas, elevados */
.icono { flex: none; width: var(--tam); height: var(--tam); border-radius: 22%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.12); box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 24px -8px rgba(0,0,0,.7); }
.icono img { width: 100%; height: 100%; object-fit: cover; display: block; }
.icono-texto { color: #fff; font-weight: 700; font-size: calc(var(--tam) * .45); }
.logo-libre { flex: none; height: var(--tam); display: inline-flex; align-items: center; }
.logo-libre img { max-height: calc(var(--tam) * .62); max-width: calc(var(--tam) * 2.6); width: auto; height: auto; display: block; }

/* Portada: las apps como en la pantalla de un teléfono */
.portada { padding: clamp(48px, 8vw, 104px) 0 clamp(40px, 6vw, 80px); border-bottom: 1px solid var(--borde); }
.portada-dentro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.portada h1 { font-size: clamp(38px, 6vw, 68px); max-width: 14ch; }
.bajada { color: var(--suave); font-size: 19px; max-width: 44ch; margin: 18px 0 6px; }
.pantalla { order: 2; display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 36px); padding: clamp(24px, 4vw, 40px); border-radius: 36px; background: var(--sup); border: 1px solid var(--borde); justify-content: center; }
.pantalla a { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; font-size: 14px; color: var(--suave); width: 112px; text-align: center; animation: aparecer .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 90ms + 120ms); }
.pantalla .logo-libre { height: 92px; max-width: 100%; }
.pantalla .logo-libre img { max-width: 100%; }
@keyframes aparecer { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) { .portada-dentro { grid-template-columns: 1fr; } .pantalla { order: 0; } }
@media (max-width: 420px) { .pantalla a { width: 84px; } .pantalla .icono { --tam: 72px !important; } }

.promo { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.promo > div, .promo > p { flex: 1 1 280px; }
.promo h2 { margin-bottom: 6px; color: var(--amarillo); }
.promo p { margin: 0; color: var(--suave); }

section.bloque { padding: clamp(48px, 7vw, 88px) var(--gutter); }
section.bloque + section.bloque { padding-top: 0; }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.tarjeta { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: 20px; background: var(--sup); border: 1px solid var(--borde); text-decoration: none; overflow: hidden; transition: transform .25s, border-color .25s; }
.tarjeta::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--color); }
.tarjeta:hover { transform: translateY(-4px); border-color: var(--borde2); }
.tarjeta-texto { display: flex; flex-direction: column; gap: 6px; }
.tarjeta-texto b { font-size: 22px; }
.tarjeta-texto > span { color: var(--suave); }
.tarjeta .precio { color: var(--texto); font-size: 15px; }
.tarjeta-ir { margin-top: auto; color: var(--amarillo); font-weight: 600; }

.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; counter-reset: paso; }
.pasos li { counter-increment: paso; display: flex; flex-direction: column; gap: 6px; padding: 22px; border-top: 2px solid var(--borde2); }
.pasos .paso { font-family: 'IBM Plex Mono', monospace; color: var(--amarillo); font-size: 14px; }
.pasos b { font-size: 20px; }
.pasos span { color: var(--suave); }

/* Página de cada app (folleto) */
.producto-portada { background: var(--color); color: #fff; padding: clamp(28px, 5vw, 48px) 0 clamp(44px, 7vw, 80px); position: relative; }
.producto-portada::after { content: ''; position: absolute; inset: auto 0 0; height: 120px; background: linear-gradient(transparent, rgba(0,0,0,.28)); pointer-events: none; }
.producto-portada .caja { position: relative; z-index: 1; }
.volver { display: inline-block; text-decoration: none; opacity: .8; font-size: 15px; margin-bottom: 28px; }
.volver:hover { opacity: 1; }
.producto-cabeza { display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); flex-wrap: wrap; }
.producto-marca { margin: 0 0 4px; opacity: .78; font-size: 15px; }
.producto h1 { font-size: clamp(40px, 7vw, 76px); }
.producto-lema { font-size: clamp(22px, 3vw, 32px); font-weight: 600; line-height: 1.2; max-width: 26ch; margin: 28px 0 10px; }
.producto-desc { max-width: 56ch; opacity: .85; margin: 0; }
.producto-portada .boton-sec { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); }
.nota-abrir { font-size: 14px; opacity: .75; margin: 10px 0 0; }
.para p { font-size: clamp(20px, 2.4vw, 26px); max-width: 40ch; margin: 0; }
.beneficios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px 32px; }
.beneficios li { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; border-top: 2px solid var(--color); }
.beneficios b { font-size: 20px; }
.beneficios span { color: var(--suave); }
.capturas { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.capturas img { height: min(520px, 70vh); width: auto; border-radius: 18px; scroll-snap-align: start; border: 1px solid var(--borde); }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.plan { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 20px; background: var(--sup); border: 1px solid var(--borde); transition: border-color .25s; }
.plan.elegido { border-color: var(--amarillo); }
.plan b { font-size: 20px; }
.plan-precio { font-size: 28px; font-weight: 700; }
.plan-precio small { font-size: 15px; font-weight: 400; color: var(--suave); }
.plan .boton { margin-top: auto; }

/* Botones de descarga (App Store, Google Play, navegador) */
.descargas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.insignia { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 7px 16px 7px 12px; border-radius: 12px; background: #000; color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.35); transition: transform .2s; }
a.insignia:hover { transform: translateY(-2px); }
.ins-ico svg { width: 26px; height: 26px; display: block; }
.ins-txt { display: flex; flex-direction: column; line-height: 1.1; }
.ins-txt small { font-size: 11px; opacity: .85; }
.ins-txt b { font-size: 18px; font-weight: 600; }
.insignia.pronto { opacity: .8; cursor: default; border-style: dashed; }
.insignia.pronto small { color: var(--amarillo); opacity: 1; font-weight: 600; }

/* Carrito y pedido */
.titulo-pagina { font-size: clamp(36px, 5vw, 56px); margin-bottom: 28px; }
.carrito-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 56px); align-items: start; }
@media (max-width: 860px) { .carrito-grid { grid-template-columns: 1fr; } }
.lineas { list-style: none; margin: 0; padding: 0; }
.lineas li { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--borde); flex-wrap: wrap; }
.linea-texto { flex: 1 1 200px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.linea-texto b { font-size: 19px; }
.cuentas { margin: 18px 0 0; border-top: 1px solid var(--borde); }
.cuentas div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; flex-wrap: wrap; }
.cuentas dt { color: var(--suave); }
.cuentas dd { margin: 0; font-weight: 600; }
.cuentas .descuento dd { color: var(--amarillo); }
.cuentas .total { border-top: 1px solid var(--borde); padding-top: 14px; }
.cuentas .total dt { color: var(--texto); font-weight: 600; }
.cuentas .total dd { font-size: 24px; }
.formulario { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 3vw, 28px); border-radius: 20px; background: var(--sup); border: 1px solid var(--borde); }
.formulario h2 { margin-bottom: 4px; font-size: 26px; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--suave); }
.campo input, .campo select, .campo textarea { font: inherit; font-size: 16px; color: var(--texto); background: var(--fondo); border: 1px solid var(--borde2); border-radius: 12px; padding: 12px 14px; min-height: 48px; width: 100%; transition: border-color .2s; }
.campo textarea { resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--amarillo); outline: none; }
.error { color: var(--peligro); margin: 0; }
.gracias p { max-width: 56ch; }
.instrucciones { margin-top: 28px; padding: 22px; border-radius: 20px; border: 1px solid var(--amarillo); }
.instrucciones p { white-space: pre-line; margin: 0; }
.instrucciones h2 { font-size: 22px; margin-bottom: 10px; }

/* Pie */
.pie { border-top: 1px solid var(--borde); padding: 28px 0 36px; color: var(--suave); font-size: 14px; }
.pie-dentro { display: flex; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; }
.pie p { margin: 0; }
.pie-enlaces { display: flex; gap: 18px; flex-wrap: wrap; }
.pie-enlaces a { overflow-wrap: anywhere; }

/* Aviso flotante */
.aviso { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 40; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 14px; background: var(--texto); color: var(--fondo); font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: subir-aviso .3s cubic-bezier(.2,.8,.2,1); }
.aviso.sale { animation: bajar-aviso .25s ease forwards; }
@keyframes subir-aviso { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes bajar-aviso { to { opacity: 0; transform: translate(-50%, 16px); } }

/* Cambio de página suave */
#vista.entra { animation: entrar .35s cubic-bezier(.2,.8,.2,1); }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}