/* Smartlook App – landing. Mobile-first. Solo se carga en la plantilla "Smartlook App". */

:root {
	--sl-blanco: #ffffff;
	--sl-gris: #f5f5f7;
	--sl-texto: #1d1d1f;
	--sl-suave: #6e6e73;
	--sl-acento: #0066cc; /* único color de acento: cámbialo aquí */
	--sl-radio: 28px;
	--sl-sombra: 0 10px 40px rgba(0, 0, 0, .08);
	--sl-ancho: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.sl-app {
	margin: 0;
	background: var(--sl-blanco);
	color: var(--sl-texto);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 17px;
	line-height: 1.47;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	text-align: center;
}

.sl-app img { max-width: 100%; height: auto; display: block; }
.sl-app a { color: var(--sl-acento); text-decoration: none; }
.sl-app a:hover { text-decoration: underline; }
.sl-app a:focus-visible { outline: 3px solid var(--sl-acento); outline-offset: 3px; border-radius: 8px; }

.sl-contenedor { max-width: var(--sl-ancho); margin: 0 auto; padding: 0 20px; }
.sl-seccion--gris { background: var(--sl-gris); }

/* Header mínimo */
.sl-header {
	position: sticky; top: 0; z-index: 10;
	display: flex; align-items: center; justify-content: space-between;
	height: 56px; padding: 0 20px;
	background: rgba(255, 255, 255, .8);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.admin-bar .sl-header { top: 46px; }
@media (min-width: 783px) { .admin-bar .sl-header { top: 32px; } }
.sl-header__logo { display: flex; align-items: center; color: var(--sl-texto) !important; font-weight: 700; font-size: 19px; }
.sl-header__logo img { height: 28px; width: auto; }
.sl-header__tienda { font-size: 14px; font-weight: 600; }

/* Tipografía */
.sl-hero__titulo {
	font-size: clamp(2.6rem, 11vw, 5.5rem);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.035em;
	margin: 0 0 16px;
}
.sl-h2 {
	font-size: clamp(2rem, 8vw, 3.5rem);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.03em;
	margin: 0 0 40px;
}
.sl-hero__subtitulo, .sl-cta__texto {
	font-size: clamp(1.15rem, 4.5vw, 1.5rem);
	color: var(--sl-suave);
	margin: 0 auto 32px;
	max-width: 32ch;
}

/* Secciones */
.sl-hero { padding: 56px 0 0; }
.sl-beneficios, .sl-galeria, .sl-cta { padding: 88px 0; }

/* Badges oficiales: solo se escalan, nunca se recortan ni se alteran.
   Separación ≥ 1/4 de la altura (guía de Apple y Google). */
.sl-badges {
	display: flex; flex-direction: column; align-items: center;
	gap: 16px; margin: 0 0 48px;
}
.sl-badge { display: inline-block; line-height: 0; border-radius: 10px; }
.sl-badge:hover { text-decoration: none !important; }
.sl-badge img { height: 54px; width: auto; }
.sl-badge-texto {
	display: inline-block; line-height: 1; padding: 18px 28px;
	background: var(--sl-texto); color: #fff; border-radius: 12px;
	font-weight: 600; font-size: 16px;
}

/* Celular detectado: solo el badge de su tienda, más grande; la otra tienda
   como enlace de texto pequeño debajo. (Google no permite que su badge sea
   más chico que otro badge de tienda al lado, por eso no se achica un badge.) */
.sl-ios .sl-badge--ios img, .sl-android .sl-badge--android img { height: 64px; }
.sl-ios .sl-badge--android, .sl-android .sl-badge--ios { display: none; }
.sl-otra-tienda { display: none; margin: -32px 0 48px; font-size: 15px; color: var(--sl-suave); }
.sl-ios .sl-otra-tienda--android, .sl-android .sl-otra-tienda--ios { display: block; }
.sl-cta .sl-otra-tienda { margin: 16px 0 0; }

@media (min-width: 900px) {
	html:not(.sl-ios):not(.sl-android) .sl-badges { flex-direction: row; justify-content: center; }
}

/* Pantallas del celular */
.sl-pantalla {
	position: relative;
	width: min(70vw, 300px);
	aspect-ratio: 9 / 19.5;
	margin: 0 auto;
	border-radius: 44px;
	padding: 10px;
	background: #1d1d1f;
	box-shadow: var(--sl-sombra);
	flex: 0 0 auto;
}
.sl-pantalla__img, .sl-pantalla__placeholder {
	width: 100%; height: 100%;
	border-radius: 34px;
	object-fit: cover;
}
.sl-pantalla__placeholder {
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(160deg, #e8e8ed, #fafafa);
	color: var(--sl-suave); font-size: 14px; font-weight: 600;
}
.sl-pantalla--hero { width: min(72vw, 340px); margin-bottom: -80px; }

/* Beneficios */
.sl-beneficios { padding-top: 168px; }
.sl-beneficios__grid { display: grid; gap: 20px; }
.sl-beneficio {
	background: var(--sl-blanco);
	border-radius: var(--sl-radio);
	padding: 44px 28px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
}
.sl-beneficio__icono {
	width: 40px; height: 40px; margin: 0 auto 20px; display: block;
	fill: none; stroke: var(--sl-acento); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.sl-beneficio h3 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 10px; }
.sl-beneficio p { color: var(--sl-suave); margin: 0 auto; max-width: 30ch; }

@media (min-width: 700px) {
	.sl-beneficios__grid { grid-template-columns: 1fr 1fr; }
	.sl-beneficio { padding: 64px 40px; }
}

/* Galería: scroll horizontal en móvil, fila centrada en escritorio */
.sl-galeria__pista {
	display: flex; gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 8px 20px 32px;
	scrollbar-width: none;
}
.sl-galeria__pista::-webkit-scrollbar { display: none; }
.sl-galeria__pista .sl-pantalla { width: min(62vw, 260px); scroll-snap-align: center; margin: 0; }
.sl-galeria__pista:focus-visible { outline: 3px solid var(--sl-acento); outline-offset: -3px; }
@media (min-width: 1100px) {
	.sl-galeria__pista { justify-content: center; overflow-x: visible; }
}

/* CTA + QR (el QR solo en computadora) */
.sl-cta .sl-badges { margin-bottom: 0; }
.sl-qr { display: none; margin: 48px auto 0; }
.sl-qr img { width: 160px; height: 160px; margin: 0 auto 12px; padding: 12px; background: #fff; border-radius: 20px; box-shadow: var(--sl-sombra); }
.sl-qr figcaption { color: var(--sl-suave); font-size: 15px; }
@media (min-width: 900px) and (hover: hover) {
	html:not(.sl-ios):not(.sl-android) .sl-qr { display: block; }
}

/* Footer */
.sl-footer { padding: 40px 20px 56px; font-size: 13px; color: var(--sl-suave); border-top: 1px solid rgba(0, 0, 0, .06); }
.sl-footer p { margin: 0 0 10px; }
.sl-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 10px; }
.sl-footer nav a { padding: 6px 0; }

/* Animaciones al hacer scroll (solo si hay JS y el usuario no pidió menos movimiento).
   La portada no se anima para no retrasar el LCP de Lighthouse. */
@media (prefers-reduced-motion: no-preference) {
	.sl-js .sl-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
	.sl-js .sl-reveal.is-visible { opacity: 1; transform: none; }
}