/*
 * Lo que hay alrededor de la historia: la barra de cristal, las secciones, las tarjetas de funciones,
 * la seguridad, la descarga y el pie. La ventana de la demo está en demo.css.
 */
:root {
	--blue: #1673eb;     /* el azul de «Conservar» en la app */
	--orange: #ff9f0a;   /* el naranja de «Descartar» en la app */
	--hair: #ffffff1f;
}
html { scroll-behavior: smooth; }
/* Sin palabras sueltas al final de una línea: los títulos se reparten en líneas parecidas y los párrafos evitan huérfanas. */
h1, h2, h3, .h2, .caption, .sm-title { text-wrap: balance; }
p, li, small, .tb-title { text-wrap: pretty; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Cristal: fondo translúcido que desenfoca lo de detrás, con el canto iluminado arriba a la izquierda y abajo a la derecha. */
.glass { position: relative; background: linear-gradient(180deg, #ffffff17, #ffffff08); border-radius: 28px; -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); box-shadow: inset 0 1px 0 #ffffff33, inset 0 -20px 30px -26px #ffffff2e, 0 30px 80px -24px #000d; }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(135deg, #ffffff8c, #ffffff14 30%, #ffffff0a 68%, #ffffff59); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* La barra de arriba: la marca a la izquierda, las secciones en una píldora de cristal en el centro y Descargar a la derecha. */
.nav { position: fixed; top: 18px; left: max(24px, 5vw); right: max(24px, 5vw); z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-size: 14px; white-space: nowrap; pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav a { padding: 7px 12px; border-radius: 999px; color: #f5f5f7cc; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.nav a:hover { color: #fff; background: #ffffff14; }
.nav .brand { justify-self: start; display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 18px; font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.nav .brand:hover { background: none; }  /* la marca va suelta, sin píldora ni resalte */
.nav .brand img { display: block; }
.nav-links { display: flex; gap: 2px; padding: 5px; border-radius: 999px; }
.nav .nav-cta { justify-self: end; padding: 8px 16px; color: #000; font-weight: 600; background: #f5f5f7; }
.nav .nav-cta:hover { color: #000; background: #fff; }

.section { position: relative; padding: clamp(88px, 15vh, 168px) max(16px, 4vw); overflow: hidden; }
.section > * { position: relative; z-index: 1; }
.wrap { max-width: 1120px; margin: 0 auto; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.h2 { margin: 0 0 18px; font-size: clamp(34px, 5.600vw, 68px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; }
.lead { max-width: 640px; margin: 0; font-size: clamp(17px, 1.600vw, 21px); line-height: 1.45; color: var(--muted); }

/* Funciones. */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 56px; }
.tile { grid-column: span 2; display: flex; flex-direction: column; min-height: 340px; padding: 28px; }
.tile.wide { grid-column: span 4; }
.tile h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-size: 21px; letter-spacing: -0.02em; }
.tile h3 .ic { color: #fff; }
.tile > p { margin: 0; font-size: 15px; line-height: 1.45; color: #b4b4ba; }
.mini { margin-top: auto; padding-top: 26px; }
.mini small { display: block; font-size: 12px; line-height: 1.35; color: #a1a1a8; }

.levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.levels .sm-card { min-height: 214px; padding: 16px; animation: none; cursor: default; }
.levels .sm-card:hover { transform: none; }
.levels .sm-card em { display: inline-block; margin: 4px 0 0; }
.levels .sm-card strong { font-size: 24px; }

.pair { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; background: #ffffff0f; border: 1px solid var(--hair); }
.pair + .pair { margin-top: 8px; }
.pair span { min-width: 0; }
.pair b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pair i { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-size: 15px; }
.pair .keep { color: #fff; background: var(--blue); }
.pair .drop { color: var(--orange); background: #ff9f0a26; box-shadow: inset 0 0 0 1px #ff9f0a80; }
.pair .plain { color: #7fb2ff; background: #1673eb26; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.chips span { padding: 4px 9px; border-radius: 999px; font-size: 12px; color: #d6d6db; background: #ffffff14; }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stats div { padding: 14px; border-radius: 16px; background: #ffffff0f; border: 1px solid var(--hair); }
.stats strong { display: block; font-size: 34px; line-height: 1.1; letter-spacing: -0.03em; }
.stats span { font-size: 13px; color: #c9c9cf; }
.stats .ic { display: block; width: 34px; height: 34px; margin-bottom: 12px; padding: 6px; border-radius: 10px; stroke-width: 1.700; }
.stats .found .ic { color: #30d158; background: #30d1581f; }
.stats .lost .ic { color: var(--orange); background: #ff9f0a1f; }

/* Historial: arriba las cifras, abajo una barra por mes. Al pasar por una barra, las cifras son las de ese mes (site.js). */
.h-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.h-stats strong { display: block; font-size: 26px; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.h-stats span { font-size: 13px; color: #c9c9cf; }
.h-when { margin-top: 10px; min-height: 1.4em; }
.h-bars { display: flex; align-items: flex-end; gap: 8px; height: 132px; margin-top: 14px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: #8e8e93; cursor: pointer; }
.bar i { height: calc(var(--h) - 20px); min-height: 6px; border-radius: 6px 6px 2px 2px; background: linear-gradient(#4a9bff, #1673eb66); transform-origin: bottom; transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), filter 0.2s, opacity 0.2s; }
.bar span { font-size: 11px; text-align: center; transition: color 0.2s; }
.h-bars:not(.grown) .bar i { transform: scaleY(0); }
.bar:nth-child(2) i { transition-delay: 0.04s; } .bar:nth-child(3) i { transition-delay: 0.08s; } .bar:nth-child(4) i { transition-delay: 0.12s; }
.bar:nth-child(5) i { transition-delay: 0.16s; } .bar:nth-child(6) i { transition-delay: 0.2s; } .bar:nth-child(7) i { transition-delay: 0.24s; }
.h-bars.picking .bar i { transition-delay: 0s; opacity: 0.35; }
.h-bars.picking .bar.on i { opacity: 1; transform: scaleY(1.06); filter: brightness(1.25) drop-shadow(0 0 10px #4a9bff80); }
.bar.on span { color: #fff; }
.bar:focus-visible { outline: 2px solid #4a9bff; outline-offset: 3px; border-radius: 6px; }

/* Seguridad. */
.safe { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 56px; }
.safe > div { padding: 32px 28px; }
.safe > div + div { border-left: 1px solid var(--hair); }
.safe i { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 14px; font-size: 22px; color: #fff; background: linear-gradient(#ffffff26, #ffffff0d); box-shadow: inset 0 1px 0 #ffffff40; }
.safe h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -0.02em; }
.safe p { margin: 0; font-size: 15px; line-height: 1.45; color: #b4b4ba; }

/* Preguntas frecuentes: un desplegable por pregunta (details), dentro de un panel de cristal. */
.faq { max-width: 860px; margin: 48px auto 0; text-align: left; padding: 8px 28px; }
.faq-item + .faq-item { border-top: 1px solid var(--hair); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #ffffff14; transition: transform 0.25s, background-color 0.2s; }
.faq-item summary i::before, .faq-item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.800px; margin: -0.900px 0 0 -5.500px; border-radius: 1px; background: #f5f5f7; }
.faq-item summary i::after { transform: rotate(90deg); transition: transform 0.25s; }
.faq-item[open] summary i::after { transform: rotate(0); }
.faq-item summary:hover i { background: #ffffff24; }
.faq-item summary:focus-visible { outline: 2px solid #4a9bff; outline-offset: 4px; border-radius: 6px; }
.faq-item p { max-width: 680px; margin: -4px 0 0; padding-bottom: 22px; font-size: 16px; line-height: 1.5; color: #b4b4ba; }
@media (max-width: 560px) { .faq { padding: 4px 18px; } .faq-item summary { font-size: 16px; } }

/* Descarga. */
.final { display: grid; justify-items: center; padding: clamp(48px, 8vw, 96px) 24px; text-align: center; border-radius: 40px; }
.final img { margin-bottom: 22px; }
.final .lead { margin-bottom: 30px; }
.cta { display: inline-flex; flex-direction: column; align-items: center; padding: 13px 30px; border-radius: 999px; font-weight: 600; color: #fff; text-decoration: none; background: linear-gradient(#3b8cff, var(--blue)); box-shadow: inset 0 1px 0 #ffffff66, 0 10px 30px -8px #1673ebb3; }
.cta small { font-size: 12px; font-weight: 500; opacity: 0.8; }
.req { margin: 18px 0 0; font-size: 13px; color: var(--muted); }

.foot { padding: 28px max(16px, 4vw) 48px; text-align: center; font-size: 12px; color: #6e6e73; border-top: 1px solid #ffffff14; }
.foot p { max-width: 720px; margin: 0 auto; }

@media (max-width: 900px) {
	.tile, .tile.wide { grid-column: span 6; min-height: 0; }
	.safe { grid-template-columns: 1fr; }
	.safe > div + div { border-left: 0; border-top: 1px solid var(--hair); }
}
@media (max-width: 560px) {
	/* En el móvil la barra ocupa todo el ancho y lleva fondo: sin él, la marca se monta sobre el texto al hacer scroll. */
	.nav-links { display: none; }
	.nav { top: 0; left: 0; right: 0; grid-template-columns: 1fr auto; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: #070707b8; -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); border-bottom: 1px solid #ffffff14; }
	.section { padding-block: 72px; }
	.levels { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .bar i { transition: none; } .h-bars:not(.grown) .bar i { transform: none; } }