/* ============================================================================
   RESUMiDO · presentación de escritorio
   Sólo existe desde 1024 px. En móvil el feed arranca directo: quien llega
   desde el celular ya está en el producto, no hace falta convencerlo.
   ========================================================================== */

.landing{ display:none; }

@media (min-width:1024px){

.landing{
	display:block;
	position:relative;
	max-width:1240px;
	margin-inline:auto;
	padding:calc(var(--cabecera) + 64px) 40px 0;
}

/* Textura muy fina sobre el fondo. Es lo que le da el aire de papel a la
   presentación de Volv; sin ella el fondo plano se ve digital. */
.landing::before{
	content:'';
	position:absolute; inset:0;
	pointer-events:none;
	opacity:.5;
	mix-blend-mode:overlay;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.06'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------- hero */

.landing-hero{ text-align:center; margin-bottom:14px; }

.landing-titulo{
	font-family:var(--display);
	font-weight:700;
	font-size:clamp(48px, 6.4vw, 86px);
	line-height:.98;
	letter-spacing:-.028em;
	margin:0;
	color:var(--bone);
	text-wrap:balance;
}
/* La cursiva de la serif es donde está la personalidad de la familia.
   Usarla en la segunda línea da el giro sin recargar. */
.landing-titulo em{
	display:block;
	font-style:italic;
	font-weight:700;
	color:var(--cat);
	letter-spacing:-.02em;
}

/* ------------------------------------------------------------- tres columnas */

.landing-cuerpo{
	display:grid;
	grid-template-columns:1fr auto 1fr;
	gap:32px;
	align-items:center;
	padding:20px 0 56px;
}

.landing-col--izq{ justify-self:start; max-width:330px; }
.landing-col--centro{ justify-self:center; }
.landing-col--der{ justify-self:end; }

.landing-bajada{
	font-size:19px;
	line-height:1.55;
	color:var(--muted);
	margin:0 0 26px;
}
.landing-bajada strong{ color:var(--bone); font-weight:600; }

/* Botón principal. El degradado suave es lo que en Volv hace que el llamado
   destaque sin gritar; el borde claro lo despega del fondo. */
.landing-cta{
	display:inline-block;
	padding:15px 30px;
	border-radius:999px;
	border:1px solid var(--borde);
	background:linear-gradient(103deg,
		color-mix(in srgb, var(--cat) 88%, #fff) 0%,
		color-mix(in srgb, var(--cat) 62%, #7B3FE4) 52%,
		color-mix(in srgb, var(--cat) 40%, #2F7BD8) 100%);
	color:#fff;
	font-family:var(--body);
	font-size:15px;
	font-weight:600;
	letter-spacing:-.01em;
	text-decoration:none;
	box-shadow:0 8px 26px color-mix(in srgb, var(--cat) 32%, transparent);
	transition:transform .18s ease, box-shadow .18s ease;
}
.landing-cta:hover{
	transform:translateY(-2px);
	box-shadow:0 12px 34px color-mix(in srgb, var(--cat) 44%, transparent);
}

.landing-medios{ margin-top:34px; }
.landing-medios-rotulo{
	display:block;
	font-family:var(--meta);
	font-size:10px;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--muted);
	margin-bottom:8px;
}
.landing-medios p{
	margin:0;
	font-family:var(--meta);
	font-size:11.5px;
	line-height:1.7;
	letter-spacing:.03em;
	color:var(--bone);
	opacity:.75;
}

/* ---------------------------------------------------------------- teléfono */

/**
 * Al marco se le vació el área de pantalla, así que va POR ENCIMA del
 * contenido: la muesca, el bisel y las esquinas redondeadas las dibuja él.
 *
 * Las medidas salieron de medir el archivo pixel por pixel. Van en porcentajes
 * y no en píxeles para que el teléfono escale entero cambiando una sola línea
 * sin que el contenido se desalinee.
 */
.telefono{
	position:relative;
	width:318px;
	aspect-ratio:576 / 994;
}

.telefono-marco{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	display:block;
	z-index:3;
	pointer-events:none;
}

.telefono-pantalla{
	position:absolute;
	left:14.06%;
	top:1.91%;
	width:71.88%;
	height:90.44%;
	overflow:hidden;
	background:var(--fondo);
	display:flex;
	flex-direction:column;
}

.telefono-visual{
	position:relative;
	flex:0 0 auto;
	height:44%;
	overflow:hidden;
	display:grid;
	place-items:center;
	background:
		radial-gradient(120% 90% at 50% 8%, color-mix(in srgb,var(--cat) 58%,#000) 0%, transparent 68%),
		linear-gradient(160deg, color-mix(in srgb,var(--cat) 38%,#000) 0%, var(--fondo) 72%);
}
.telefono-visual img{
	width:100%; height:100%;
	object-fit:cover; object-position:center 32%;
	display:block;
}
.telefono-visual::after{
	content:'';
	position:absolute; inset:auto 0 0 0;
	height:58%;
	background:linear-gradient(to bottom, transparent 0%,
		color-mix(in srgb, var(--fondo) 52%, transparent) 48%, var(--fondo) 100%);
}
.telefono-cat{
	font-family:var(--display);
	font-weight:800;
	font-size:28px;
	text-transform:uppercase;
	color:rgba(255,255,255,.18);
	text-align:center;
	padding:0 16px;
}
.telefono-logo{
	position:absolute;
	top:44px; left:12px;   /* debajo de la muesca del marco */
	z-index:2;
	font-family:var(--marca);
	font-weight:800;
	font-size:13px;
	letter-spacing:.02em;
	color:#fff;
	text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.telefono-logo i{ font-style:italic; color:var(--cat); }
.telefono-pastilla{
	position:absolute;
	left:12px; bottom:10px;
	z-index:2;
	font-family:var(--meta);
	font-size:8px;
	font-weight:500;
	letter-spacing:.11em;
	text-transform:uppercase;
	background:var(--cat);
	color:#fff;
	padding:3px 7px;
	border-radius:4px;
}

.telefono-panel{
	position:relative;
	flex:1 1 auto;
	margin:-14px 8px 0;
	padding:13px 13px 16px;
	background:var(--papel);
	border-radius:15px 15px 0 0;
	border:1px solid var(--borde);
	border-bottom:0;
	overflow:hidden;
}
.telefono-panel h2{
	font-family:var(--display);
	font-weight:var(--peso-titular);
	font-size:15px;
	line-height:1.18;
	letter-spacing:-.012em;
	margin:0 0 7px;
	color:var(--tinta);
}
.telefono-panel p{
	font-size:11px;
	line-height:1.5;
	color:var(--tinta-2);
	margin:0;
}

/* --------------------------------------------------------------------- QR */

.landing-qr{ max-width:210px; text-align:center; }

.qr-titulo{
	font-family:var(--body);
	font-size:14px;
	font-weight:600;
	line-height:1.35;
	color:var(--bone);
	margin:0 0 16px;
}

/* Las esquinas de encuadre son lo que hace que se lea como "escaneame"
   y no como una imagen cualquiera. */
.qr-marco{
	position:relative;
	width:174px; height:174px;
	margin:0 auto 14px;
	padding:14px;
	display:grid; place-items:center;
}
.qr-marco img,.qr-marco canvas{
	width:100%!important; height:100%!important;
	display:block;
	image-rendering:pixelated;   /* un QR escalado con suavizado se lee peor */
}
.qr-esquina{
	position:absolute;
	width:22px; height:22px;
	border:2px solid var(--muted);
}
.qr-esquina--si{ top:0; left:0; border-right:0; border-bottom:0; }
.qr-esquina--sd{ top:0; right:0; border-left:0; border-bottom:0; }
.qr-esquina--ii{ bottom:0; left:0; border-right:0; border-top:0; }
.qr-esquina--id{ bottom:0; right:0; border-left:0; border-top:0; }

.qr-nota{
	font-family:var(--meta);
	font-size:10.5px;
	letter-spacing:.04em;
	line-height:1.5;
	color:var(--muted);
	margin:0;
}

/* --------------------------------------------------------------- secciones */

.landing-secciones{
	display:grid;
	grid-template-columns:repeat(6,1fr);
	gap:12px;
	padding:0 0 58px;
}

.seccion{
	position:relative;
	aspect-ratio:3/4;
	border-radius:12px;
	overflow:hidden;
	display:block;
	text-decoration:none;
	background:color-mix(in srgb, var(--cat) 34%, #000);
	transition:transform .22s ease;
}
.seccion:hover{ transform:translateY(-4px); }

.seccion img{
	width:100%; height:100%;
	object-fit:cover;
	display:block;
	filter:grayscale(1) contrast(1.06);
	opacity:.62;
	transition:opacity .25s ease, filter .25s ease;
}
.seccion:hover img{ filter:grayscale(0); opacity:.8; }

/* El nombre de la sección, grande y en negativo sobre la foto: es el recurso
   de Volv en su tira de categorías. */
.seccion-nombre{
	position:absolute;
	left:10px; right:10px; bottom:12px;
	font-family:var(--display);
	font-weight:800;
	font-size:17px;
	line-height:1;
	letter-spacing:-.02em;
	text-transform:uppercase;
	color:#fff;
	text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.seccion-cuenta{
	position:absolute;
	top:10px; right:10px;
	font-family:var(--meta);
	font-size:9.5px;
	letter-spacing:.06em;
	color:#fff;
	background:rgba(11,14,20,.5);
	backdrop-filter:blur(6px);
	padding:3px 7px;
	border-radius:999px;
}

/* -------------------------------------------------------- corte al feed */

.landing-separador{
	font-family:var(--meta);
	font-size:11px;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:var(--muted);
	margin:0;
	padding-bottom:6px;
	border-bottom:1px solid var(--ink-3);
}

/* La grilla ya trae su propio espacio arriba; acá sobra. */
.landing + .lector{ padding-top:34px; }

} /* fin del breakpoint */

@media (prefers-reduced-motion:reduce){
	.landing-cta:hover,.seccion:hover{ transform:none; }
}