/*
Theme Name: LEDO
Description: Tema de una sola página para contacto de importaciones. Rojo, azul y violeta.
Version: 1.2
Author: LEDO
Text Domain: ledo
*/

:root {
	--rojo: #e11d48;
	--violeta: #7c3aed;
	--azul: #2563eb;
	--fondo: #0b0a1f;
	--fondo-2: #14123a;
	--texto: #f4f3ff;
	--suave: #b9b6dc;
	--borde: rgba(255, 255, 255, .12);
	--degrade: linear-gradient(120deg, var(--rojo) 0%, var(--violeta) 50%, var(--azul) 100%);
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: var(--texto);
	background: var(--fondo);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a { color: inherit; }

.skip-link {
	position: absolute; left: -999px; top: 8px;
	background: #fff; color: #000; padding: 8px 14px; border-radius: 8px; z-index: 100;
}
.skip-link:focus { left: 8px; }

.contenedor { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* Encabezado */
.cabecera {
	position: sticky; top: 0; z-index: 50;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	background: rgba(11, 10, 31, .72);
	border-bottom: 1px solid var(--borde);
}
.cabecera .contenedor {
	display: flex; align-items: center; justify-content: space-between;
	height: 68px;
}
.marca {
	font-weight: 800; font-size: 26px; letter-spacing: .12em; text-decoration: none;
	background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Botones */
.boton {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 14px 26px; border-radius: 999px;
	font-weight: 700; font-size: 17px; text-decoration: none; color: #fff;
	background: var(--degrade); background-size: 200% 100%; background-position: 0 0;
	box-shadow: 0 10px 30px -10px rgba(124, 58, 237, .7);
	transition: background-position .4s ease, transform .2s ease;
}
.boton:hover { background-position: 100% 0; transform: translateY(-2px); }
.boton:focus-visible, .boton-sec:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.boton svg { width: 22px; height: 22px; flex: none; }
.boton-chico { padding: 10px 18px; font-size: 15px; }

.boton-sec {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 13px 24px; border-radius: 999px;
	font-weight: 600; font-size: 17px; text-decoration: none;
	border: 1px solid var(--borde); background: rgba(255, 255, 255, .04);
	transition: border-color .2s ease, background .2s ease;
}
.boton-sec:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .08); }

/* Portada */
.portada {
	position: relative; isolation: isolate; overflow: hidden;
	padding: clamp(72px, 14vw, 150px) 0 clamp(72px, 12vw, 130px);
	text-align: center;
	-webkit-mask-image: linear-gradient(#000 calc(100% - 60px), transparent);
	mask-image: linear-gradient(#000 calc(100% - 60px), transparent);
}
.portada::before, .portada::after {
	content: ""; position: absolute; z-index: -1; border-radius: 50%;
	filter: blur(90px); opacity: .55; pointer-events: none;
}
.portada::before {
	width: 520px; height: 520px; left: -160px; top: -120px;
	background: var(--rojo);
	animation: flotar 14s ease-in-out infinite alternate;
}
.portada::after {
	width: 560px; height: 560px; right: -180px; bottom: -200px;
	background: var(--azul);
	animation: flotar 16s ease-in-out infinite alternate-reverse;
}
.portada .orbe {
	position: absolute; z-index: -1; width: 420px; height: 420px; left: 50%; top: 30%;
	transform: translateX(-50%); border-radius: 50%;
	background: var(--violeta); filter: blur(110px); opacity: .5; pointer-events: none;
}
@keyframes flotar {
	from { transform: translate(0, 0); }
	to { transform: translate(60px, 40px); }
}

.etiqueta {
	display: inline-block; padding: 6px 16px; border-radius: 999px;
	border: 1px solid var(--borde); background: rgba(255, 255, 255, .05);
	font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--suave);
}
.portada h1 {
	margin: 22px auto 18px; max-width: 16ch;
	font-size: clamp(40px, 7vw, 76px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em;
}
.portada h1 span {
	background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.portada p.bajada {
	margin: 0 auto 36px; max-width: 34ch; font-size: clamp(18px, 2.2vw, 22px); color: var(--suave);
}
.acciones { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* Pasos */
.seccion { padding: clamp(56px, 9vw, 96px) 0; }
.seccion h2 {
	margin: 0 0 12px; text-align: center;
	font-size: clamp(30px, 4.5vw, 44px); line-height: 1.15; font-weight: 800; letter-spacing: -.01em;
}
.seccion .intro { margin: 0 auto 48px; max-width: 46ch; text-align: center; color: var(--suave); }

.pasos {
	display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr);
	list-style: none; margin: 0; padding: 0; counter-reset: paso;
}
.paso {
	position: relative; padding: 32px 28px; border-radius: 20px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
	border: 1px solid var(--borde);
	counter-increment: paso;
}
.paso::before {
	content: "0" counter(paso);
	display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
	font-weight: 800; font-size: 18px; color: #fff; margin-bottom: 18px;
}
.paso:nth-child(1)::before { background: var(--rojo); }
.paso:nth-child(2)::before { background: var(--violeta); }
.paso:nth-child(3)::before { background: var(--azul); }
.paso h3 { margin: 0 0 8px; font-size: 21px; }
.paso p { margin: 0; color: var(--suave); font-size: 17px; }

/* Contacto */
.contacto { padding-bottom: clamp(72px, 10vw, 120px); }
.tarjeta {
	position: relative; overflow: hidden;
	padding: clamp(36px, 6vw, 64px) clamp(24px, 5vw, 64px); border-radius: 28px; text-align: center;
	border: 1px solid transparent;
	background-image: linear-gradient(var(--fondo-2), var(--fondo-2)), var(--degrade);
	background-origin: border-box; background-clip: padding-box, border-box;
}
.tarjeta h2 { margin-bottom: 10px; }
.tarjeta p { margin: 0 auto 28px; color: var(--suave); max-width: 40ch; }
.telefono {
	display: inline-block; margin: 0 0 30px; text-decoration: none;
	font-size: clamp(34px, 7vw, 60px); font-weight: 800; letter-spacing: .01em; line-height: 1.1;
	background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Páginas internas */
.pagina { padding: clamp(48px, 8vw, 88px) 0; }
.pagina .contenedor { max-width: 760px; }
.pagina h1 { font-size: clamp(32px, 5vw, 48px); line-height: 1.1; margin: 0 0 24px; }
.pagina .contenido a { color: #c4b5fd; }

/* Pie */
.pie {
	border-top: 1px solid var(--borde); padding: 28px 0;
	font-size: 15px; color: var(--suave);
}
.pie .contenedor { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; align-items: center; }
.pie a { text-decoration: none; }
.pie a:hover { color: #fff; }
.franja { height: 4px; background: var(--degrade); }

@media (max-width: 820px) {
	.pasos { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	body { font-size: 17px; }
	.acciones .boton, .acciones .boton-sec { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.portada::before, .portada::after { animation: none; }
	.boton { transition: none; }
}