:root {
	--azul-oscuro: #0d3b66;
	--azul: #1a5276;
	--azul-medio: #2980b9;
	--celeste: #5dade2;
	--celeste-claro: #eaf4fc;
	--fondo-alt: #f4f9fd;
	--texto: #1c2b36;
	--texto-suave: #55707e;
	--blanco: #ffffff;
	--verde-wsp: #25d366;
	--verde-wsp-dark: #1eb857;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
	color: var(--texto);
	background: var(--blanco);
	line-height: 1.55;
}

img { max-width: 100%; display: block; }

.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 20px;
}

a { color: inherit; }

/* ===== Topbar ===== */
.topbar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--blanco);
	box-shadow: 0 2px 10px rgba(13,59,102,0.08);
}

.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 20px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.brand-logo {
	width: 42px;
	height: 42px;
	object-fit: contain;
}

.brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.brand-name {
	font-weight: 800;
	font-size: 1.25em;
	color: var(--azul-oscuro);
}

.brand-sub {
	font-size: 0.72em;
	color: var(--texto-suave);
}

.nav-links {
	display: flex;
	gap: 22px;
	flex: 1 1 auto;
	justify-content: center;
}

.nav-links a {
	text-decoration: none;
	color: var(--azul);
	font-weight: 600;
	font-size: 0.95em;
	white-space: nowrap;
}
/* pantallas medianas: que todos los enlaces del menú entren en un renglón sin pasarse del ancho (abajo de 901px el menú se oculta) */
@media (max-width: 1366px) { .nav-links { gap: 14px; } }
@media (min-width: 901px) and (max-width: 1200px) {
	.nav-links { gap: 10px; }
	.nav-links a { font-size: 0.86em; }
	.brand-sub { display: none; }
}
@media (min-width: 901px) and (max-width: 1000px) {
	.nav-links { gap: 8px; }
	.nav-links a { font-size: 0.8em; }
}

.nav-links a:hover { color: var(--azul-medio); }

.btn-nav { flex: 0 0 auto; }

/* ===== Botones ===== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	font-weight: 700;
	border-radius: 30px;
	padding: 10px 20px;
	font-size: 0.95em;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }

.btn-lg { padding: 14px 28px; font-size: 1.02em; }

.btn-whatsapp {
	background: var(--verde-wsp);
	color: #fff;
	box-shadow: 0 4px 14px rgba(37,211,102,0.35);
}

.btn-whatsapp:hover { background: var(--verde-wsp-dark); }

/* Botón "Registrate" (registro online) */
.btn-registro {
	background: var(--azul-medio);
	color: #fff;
	box-shadow: 0 4px 14px rgba(41,128,185,0.35);
}

.btn-registro:hover { background: var(--azul); }

.hero .btn-registro {
	background: #FFB400;
	color: #1b2a3a;
	font-weight: 800;
	box-shadow: 0 6px 20px rgba(255,180,0,0.45);
	animation: registro-pulso 2.4s ease-in-out infinite;
}

.hero .btn-registro:hover { background: #FFC933; }

@keyframes registro-pulso {
	0%, 100% { box-shadow: 0 6px 20px rgba(255,180,0,0.45), 0 0 0 0 rgba(255,180,0,0.55); }
	50%      { box-shadow: 0 6px 20px rgba(255,180,0,0.45), 0 0 0 12px rgba(255,180,0,0); }
}

@media (prefers-reduced-motion: reduce) {
	.hero .btn-registro { animation: none; }
}

.nav-ctas {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

.step a { color: var(--azul-medio); font-weight: 700; }

.icon-wsp, .icon-mail { width: 20px; height: 20px; flex: 0 0 auto; }

.btn-outline {
	background: transparent;
	color: var(--azul);
	border: 2px solid var(--azul-medio);
}

.btn-outline:hover { background: var(--celeste-claro); }

/* ===== Hero ===== */
.hero {
	/* Foto de portada con un degradé azul de la marca encima (para que el texto se lea);
	   el último fondo es el degradé original, por si la imagen no carga. */
	background:
		linear-gradient(100deg, rgba(13,59,102,0.94) 0%, rgba(26,82,118,0.86) 50%, rgba(41,128,185,0.60) 100%),
		url("../img/portada.jpg") center right / cover no-repeat,
		linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul-medio) 100%);
	color: #fff;
	padding: 70px 0;
}

.hero-inner {
	display: flex;
	align-items: center;
	gap: 40px;
}

.hero-text { flex: 1 1 50%; }

.hero-text h1 {
	font-size: 2.3em;
	margin: 0 0 16px;
	line-height: 1.2;
}

.hero-lead {
	font-size: 1.1em;
	color: #dceffb;
	margin: 0 0 28px;
	max-width: 520px;
}

.hero-ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.hero .btn-outline {
	color: #fff;
	border-color: #fff;
}

.hero .btn-outline:hover {
	background: rgba(255,255,255,0.12);
}

.hero-arca {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 30px;
	padding-top: 18px;
	border-top: 1px solid rgba(255,255,255,0.2);
}

.hero-arca span {
	font-size: 0.66em;
	color: #bcd7ec;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.hero-arca-logo {
	height: 22px;
	width: auto;
	object-fit: contain;
}

.hero-img {
	flex: 1 1 40%;
	display: flex;
	justify-content: center;
}

.hero-img img {
	max-width: 340px;
	filter: drop-shadow(0 12px 24px rgba(0,0,0,0.25));
}

/* ===== Secciones genéricas ===== */
.section {
	padding: 64px 0;
}

.section-alt {
	background: var(--fondo-alt);
}

.section-title {
	text-align: center;
	font-size: 1.8em;
	color: var(--azul-oscuro);
	margin: 0 0 10px;
}

.section-lead {
	text-align: center;
	color: var(--texto-suave);
	max-width: 560px;
	margin: 0 auto 40px;
}

/* ===== Cards (Factura A/B/C) ===== */
.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.card {
	background: var(--blanco);
	border: 1px solid #e3edf5;
	border-radius: 14px;
	padding: 28px 22px;
	text-align: center;
	box-shadow: 0 4px 16px rgba(13,59,102,0.06);
}

.card h3 {
	margin: 14px 0 8px;
	color: var(--azul-oscuro);
}

.card p {
	color: var(--texto-suave);
	font-size: 0.95em;
	margin: 0;
}

.card-badge {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 1.3em;
	color: #fff;
	margin: 0 auto;
	box-shadow: 0 4px 10px rgba(26,82,118,0.22);
}

.badge-a { background: linear-gradient(135deg, #4fc3f7 0%, #0d6ba8 100%); }
.badge-b { background: linear-gradient(135deg, #64b5f6 0%, #1a5276 100%); }
.badge-c { background: linear-gradient(135deg, #81d4fa 0%, #2980b9 100%); }

.card-badge svg { width: 26px; height: 26px; }

/* ===== Beneficios ===== */
.benefits {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

.benefit {
	text-align: center;
	padding: 10px;
}

.benefit-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12px;
	box-shadow: 0 3px 8px rgba(26,82,118,0.2);
}

.icon-blue   { background: linear-gradient(135deg, #4fc3f7 0%, #0d6ba8 100%); }
.icon-amber  { background: linear-gradient(135deg, #ffb74d 0%, #e8890c 100%); }
.icon-teal   { background: linear-gradient(135deg, #4db6ac 0%, #00796b 100%); }
.icon-purple { background: linear-gradient(135deg, #9575cd 0%, #5e35b1 100%); }

.benefit-icon svg { width: 18px; height: 18px; }

.benefit-arca-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--azul-oscuro);
	border-radius: 6px;
	padding: 6px 12px;
	margin-top: 12px;
}

.benefit-arca-badge img {
	height: 14px;
	width: auto;
}

.benefit h3 {
	color: var(--azul-oscuro);
	font-size: 1.05em;
	margin: 0 0 8px;
}

.benefit p {
	color: var(--texto-suave);
	font-size: 0.92em;
	margin: 0;
}

/* ===== Pasos (cómo funciona) ===== */
.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.step {
	text-align: center;
	padding: 0 10px;
}

.step-num {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--azul-medio);
	color: #fff;
	font-weight: 800;
	font-size: 1.2em;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px;
}

.step h3 {
	color: var(--azul-oscuro);
	margin: 0 0 8px;
}

.step p {
	color: var(--texto-suave);
	font-size: 0.93em;
	margin: 0;
}

/* ===== Precio ===== */
.precio-section { text-align: center; }

/* ===== Contacto ===== */
.contacto-section {
	background: linear-gradient(135deg, var(--celeste-claro) 0%, #ffffff 100%);
}

.contacto-inner { text-align: center; }

.contacto-botones {
	display: flex;
	justify-content: center;
	gap: 18px;
	flex-wrap: wrap;
}

/* ===== Footer ===== */
.footer {
	/* Misma foto de portada y mismo degradé azul que el hero; el último fondo es el color de respaldo. */
	background:
		linear-gradient(100deg, rgba(13,59,102,0.94) 0%, rgba(26,82,118,0.86) 50%, rgba(41,128,185,0.60) 100%),
		url("../img/portada.jpg") center right / cover no-repeat,
		var(--azul-oscuro);
	color: #cfe3f2;
	padding: 40px 0 26px;
}

/* Bloque de contacto dentro del pie (WhatsApp y email) */
.footer-contacto {
	text-align: center;
	padding-bottom: 28px;
	margin-bottom: 26px;
	border-bottom: 1px solid rgba(255,255,255,0.15);
}
.footer-titulo { color: #fff; font-size: 1.7em; margin: 0 0 6px; }
.footer-lead { color: #cfe3f2; margin: 0 0 18px; font-size: 1.02em; }
.footer .contacto-botones { justify-content: center; }
.footer .btn-outline { color: #fff; border-color: #fff; }
.footer .btn-outline:hover { background: rgba(255,255,255,0.12); }

.footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	font-size: 0.9em;
}

.footer-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

.footer-logo {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

.footer-owner {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #a9c6dc;
}

.footer-arielinfo {
	height: 46px;
	width: auto;
	object-fit: contain;
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
	/* Celular/tablet: versión liviana de la foto, más oscurecida porque el texto queda centrado */
	.hero {
		background:
			linear-gradient(180deg, rgba(13,59,102,0.93) 0%, rgba(26,82,118,0.88) 100%),
			url("../img/portada-m.jpg") 68% center / cover no-repeat,
			linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul-medio) 100%);
	}
	.footer {
		background:
			linear-gradient(180deg, rgba(13,59,102,0.93) 0%, rgba(26,82,118,0.88) 100%),
			url("../img/portada-m.jpg") 68% center / cover no-repeat,
			var(--azul-oscuro);
	}
	.nav-links { display: none; }
	.hero-inner { flex-direction: column; text-align: center; }
	.hero-lead { margin-left: auto; margin-right: auto; }
	.hero-ctas { justify-content: center; }
	.hero-arca { justify-content: center; flex-wrap: wrap; }
	.cards { grid-template-columns: 1fr; }
	.benefits { grid-template-columns: repeat(2, 1fr); }
	.steps { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
	.topbar-inner { flex-wrap: wrap; }
	.nav-ctas { width: 100%; justify-content: center; }
	.brand-sub { display: none; }
	.hero { padding: 46px 0; }
	.hero-text h1 { font-size: 1.7em; }
	.benefits { grid-template-columns: 1fr; }
	.btn-lg { padding: 12px 22px; font-size: 0.95em; }
	.footer-inner { flex-direction: column; text-align: center; }
}

/* ===== Precio visible ===== */
.precio-card {
	max-width: 460px;
	margin: 26px auto 0;
	background: #fff;
	border-radius: 18px;
	padding: 30px 28px 26px;
	box-shadow: 0 12px 40px rgba(13,59,102,0.16);
	border-top: 6px solid #FFB400;
	text-align: center;
}
.precio-etiqueta { text-transform: uppercase; letter-spacing: 1px; font-size: 0.8em; font-weight: 700; color: var(--texto-suave); }
.precio-monto { font-size: 3.4em; font-weight: 800; color: var(--azul-oscuro); line-height: 1.1; margin: 6px 0 2px; }
.precio-signo { font-size: 0.55em; vertical-align: top; position: relative; top: 0.25em; margin-right: 3px; }
.precio-periodo { font-size: 0.32em; font-weight: 600; color: var(--texto-suave); }
.precio-sub { color: var(--azul-medio); font-weight: 700; margin: 0 0 16px; }
.precio-lista { list-style: none; padding: 0; margin: 0 0 22px; text-align: left; }
.precio-lista li { padding: 7px 0 7px 28px; position: relative; border-bottom: 1px solid #eef3f8; color: var(--texto); font-size: 0.96em; }
.precio-lista li:last-child { border-bottom: 0; }
.precio-lista li::before { content: "✓"; position: absolute; left: 4px; top: 7px; color: #25D366; font-weight: 800; }
.precio-card .btn-registro { background: #FFB400; color: #1b2a3a; font-weight: 800; box-shadow: 0 6px 20px rgba(255,180,0,0.45); }
.precio-card .btn-registro:hover { background: #FFC933; }
.precio-nota { margin: 16px 0 0; font-size: 0.9em; color: var(--texto-suave); }
.precio-nota a { color: var(--azul-medio); font-weight: 700; }
@media (max-width: 560px) { .precio-card { padding: 24px 18px 20px; } .precio-monto { font-size: 2.8em; } }

/* ===== Prueba gratis ===== */
.hero-prueba { margin: 14px 0 0; font-size: 0.98em; color: #fff; background: rgba(255,255,255,0.14); display: inline-block; padding: 7px 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.3); }
.hero-prueba strong { color: #FFD966; }
.precio-prueba { background: #ecfdf3; color: #166534; border: 1px dashed #25D366; border-radius: 12px; padding: 10px 14px; margin: 0 0 18px; font-size: 0.95em; }
@media (max-width: 900px) { .hero-prueba { display: block; text-align: center; } }

/* ===== Servicios extra ("Mucho más que facturar") ===== */
.section-servicios { background: linear-gradient(180deg, var(--celeste-claro) 0%, #ffffff 100%); }
.servicios-grid .card { text-align: left; }
.servicio-tag { display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 20px; background: #eaf4fc; color: var(--azul-medio); font-size: 0.75em; font-weight: 700; letter-spacing: .3px; }
.servicios-grid .card-badge { margin-left: 0; margin-right: 0; }
.servicios-grid .card:last-child:nth-child(3n+1) { grid-column: 2; }
@media (max-width: 900px) { .servicios-grid .card:last-child:nth-child(3n+1) { grid-column: auto; } }

/* Comparativa: eFactura vs factura manual / vs sitio de ARCA */
.comp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 28px; align-items: start; }
.comp-card { background: #fff; border: 1px solid #d6e6f4; border-radius: 12px; padding: 24px 26px; box-shadow: 0 2px 10px rgba(13,59,102,.06); text-align: left; }
.comp-card h3 { margin: 0 0 14px; color: var(--azul-oscuro); font-size: 1.2em; }
.comp-titulo { margin: 16px 0 8px; font-size: .95em; text-transform: uppercase; letter-spacing: .5px; }
.comp-ok { color: #1b7f4b; }
.comp-warn { color: #b26a00; }
.comp-lista { list-style: none; margin: 0; padding: 0; }
.comp-lista li { position: relative; padding: 6px 0 6px 28px; line-height: 1.45; }
.comp-lista li::before { position: absolute; left: 0; top: 6px; width: 20px; height: 20px; border-radius: 50%; text-align: center; font-size: 12px; line-height: 20px; font-weight: 700; color: #fff; }
.comp-lista-ok li::before { content: "\2713"; background: #1b7f4b; }
.comp-lista-warn li::before { content: "!"; background: #e8890c; }
.comp-nota { margin: 16px 0 0; padding: 10px 14px; background: var(--celeste-claro); border-radius: 8px; color: var(--azul); font-size: .92em; line-height: 1.45; }
.comp-aviso { margin: 22px 0 0; text-align: center; color: #5b6b7a; font-size: .9em; }
@media (max-width: 900px) { .comp-grid { grid-template-columns: 1fr; } .comp-card { padding: 20px 18px; } }

/* Soporte personalizado: bloque destacado (ocupa 3 columnas de la grilla de beneficios) */
.benefit.benefit-destacado {
	grid-column: span 3;
	display: flex;
	align-items: center;
	gap: 22px;
	text-align: left;
	padding: 26px 30px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--azul-oscuro) 0%, var(--azul-medio) 100%);
	box-shadow: 0 10px 28px rgba(13,59,102,0.28);
}
.benefit-destacado .benefit-icon {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	border-radius: 16px;
	margin: 0;
	background: rgba(255,255,255,0.18);
	box-shadow: none;
}
.benefit-destacado .benefit-icon svg { width: 30px; height: 30px; }
.benefit-destacado h3 { color: #fff; font-size: 1.4em; margin: 0 0 8px; }
.benefit-destacado p { color: #eaf4fc; font-size: 1.08em; line-height: 1.6; margin: 0; }
.benefit-destacado p strong { color: #fff; }
@media (max-width: 900px) {
	.benefit.benefit-destacado { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.benefit.benefit-destacado { flex-direction: column; text-align: center; padding: 24px 20px; }
}

/* Precio con planes por cantidad de facturas (se muestra sólo cuando el administrador los activa; ver el script de precio en index.html) */
.precio-card.precio-card-planes { max-width: 860px; }
.precio-planes { display: flex; gap: 16px; justify-content: center; margin: 4px 0 20px; }
.precio-plan { flex: 1 1 0; border: 2px solid #d6e6f4; border-radius: 14px; padding: 18px 12px; background: #f7fbff; }
.precio-plan-nombre { text-transform: uppercase; letter-spacing: 1px; font-size: .8em; font-weight: 700; color: var(--texto-suave); margin-bottom: 6px; }
.precio-plan-monto { font-size: 2em; font-weight: 800; color: var(--azul-oscuro); line-height: 1.15; }
.precio-plan-monto small { font-size: .42em; font-weight: 600; color: var(--texto-suave); }
.precio-plan-det { margin-top: 8px; color: var(--azul-medio); font-weight: 700; font-size: .95em; }
@media (max-width: 700px) { .precio-planes { flex-direction: column; } }

/* ===== Catálogo online y cómo se comparte (#catalogo) ===== */
.cat-web { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items: center; }
.cat-web-titulo { text-align: left; margin: 10px 0 10px; }
.cat-web-lead { color: var(--texto-suave); font-size: 1.05em; line-height: 1.55; margin: 0 0 18px; }
.cat-web-lista { list-style: none; margin: 0; padding: 0; }
.cat-web-lista li { position: relative; padding: 7px 0 7px 30px; line-height: 1.5; color: var(--texto); }
.cat-web-lista li::before { content: "\2713"; position: absolute; left: 0; top: 8px; width: 20px; height: 20px; border-radius: 50%; background: #1b7f4b; color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; }
.cat-web-lista strong { color: var(--azul-oscuro); }
/* celular de ejemplo */
.cat-web-demo { display: flex; justify-content: center; }
.cat-tel { width: 100%; max-width: 340px; background: #eef1f6; border: 10px solid #1c2b36; border-radius: 34px; overflow: hidden; box-shadow: 0 24px 50px rgba(13,59,102,.25); font-size: 13px; }
.cat-tel-top { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px; background: linear-gradient(135deg, #0d6ba8 0%, #4fc3f7 100%); color: #fff; }
.cat-tel-top b { display: block; font-size: 15px; }
.cat-tel-top small { opacity: .9; font-size: 11px; }
.cat-tel-logo { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; flex: 0 0 auto; }
.cat-tel-hola { margin: 10px 10px 0; background: #fff; border-radius: 10px; padding: 9px 11px; line-height: 1.4; }
.cat-tel-hola b { color: #0d6ba8; }
.cat-tel-hola span { background: #dcfce7; color: #15803d; font-weight: 700; border-radius: 20px; padding: 1px 8px; white-space: nowrap; }
.cat-tel-buscar { margin: 8px 10px; background: #fff; border: 1px solid #e2e8f0; border-radius: 9px; padding: 9px 11px; color: #94a3b8; }
.cat-tel-item { display: flex; align-items: center; gap: 10px; margin: 0 10px 8px; background: #fff; border-radius: 10px; padding: 10px; }
.cat-tel-item:last-child { margin-bottom: 14px; }
.cat-tel-img { width: 46px; height: 46px; border-radius: 9px; flex: 0 0 auto; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cat-tel-item.sin .cat-tel-img { opacity: .5; }
.cat-tel-info { flex: 1 1 auto; min-width: 0; }
.cat-tel-info b { display: block; color: #1e293b; }
.cat-tel-info span { font-size: 12px; font-weight: 700; }
.cat-tel-info .ok { color: #15803d; }
.cat-tel-info .no { color: #dc2626; }
.cat-tel-precio { text-align: right; white-space: nowrap; }
.cat-tel-precio b { display: block; font-size: 15px; color: #0f172a; }
.cat-tel-precio s { color: #94a3b8; font-size: 11px; }
/* pasos para compartirlo */
.cat-web-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.cat-paso { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #e3edf5; border-radius: 14px; padding: 18px; box-shadow: 0 4px 16px rgba(13,59,102,.06); }
.cat-paso > span { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #4fc3f7 0%, #0d6ba8 100%); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cat-paso b { color: var(--azul-oscuro); }
.cat-paso p { margin: 4px 0 0; color: var(--texto-suave); font-size: .93em; line-height: 1.45; }
@media (max-width: 900px) {
	.cat-web { grid-template-columns: 1fr; gap: 28px; }
	.cat-web-texto { text-align: left; }
	.cat-web-pasos { grid-template-columns: 1fr; gap: 12px; margin-top: 28px; }
}
@media (max-width: 560px) {
	.cat-web-titulo { font-size: 1.5em; }
	.cat-tel { border-width: 8px; border-radius: 28px; }
}