/*
Theme Name: Easy Tech
Theme URI: https://easytechcr.es/
Author: Easy Tech Ciudad Real, S.L.U.
Description: Tema propio de Easy Tech. Sin dependencias externas, sin frameworks y sin plugins: todo el CSS y el JS se sirven desde este servidor. Las tipografías viven en /fuentes/, no en Google.
Version: 1.0
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: easytech
*/

/* =====================================================================
   TIPOGRAFÍAS PROPIAS
   Los archivos van en /fuentes/ dentro de esta carpeta. Nada se pide a
   Google: así ninguna visita deja su IP en un servidor ajeno y se cumple
   el «cero terceros» que decidimos para esta web.
   ===================================================================== */
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 600; font-display: swap;
	src: url("fuentes/familjen-grotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 700; font-display: swap;
	src: url("fuentes/familjen-grotesk-700.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("fuentes/public-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 500; font-display: swap;
	src: url("fuentes/public-sans-500.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap;
	src: url("fuentes/public-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("fuentes/roboto-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto Mono"; font-style: normal; font-weight: 500; font-display: swap;
	src: url("fuentes/roboto-mono-500.woff2") format("woff2"); }

/* Reset mínimo. En los prototipos lo ponía la plataforma; aquí lo
   ponemos nosotros, que es de donde venía el margin:0 del body. */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }


/* =====================================================================
   BASE COMPARTIDA
   ===================================================================== */

:root {
		--papel: #f6f4f2;
		--tarjeta: #ffffff;
		--tinta: #222629;
		--tinta-2: #565c63;
		--linea: #e3e0e4;
		--linea-fuerte: #cec7d1;
		--morado: #7b2d8e;
		--morado-hondo: #4b1c51;
		--morado-tit: #7b2d8e;
		--morado-tenue: #f3ebf5;
		--marca: #7b2d8e;
		--marca-hondo: #4b1c51;
		--verde: #1a7048;
		--verde-tenue: #e6f2ec;
		--ambar: #8a5a00;
		--legal-texto: rgba(255,255,255,.82);
		--legal-enfasis: #ffffff;
		--legal-linea: rgba(255,255,255,.14);
		--radio: 14px;
		--sombra: 0 1px 2px rgba(23,21,26,.05), 0 10px 30px rgba(23,21,26,.06);
		--sombra-alta: 0 2px 6px rgba(23,21,26,.07), 0 20px 50px rgba(23,21,26,.11);
	}

	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) {
			--legal-texto: var(--tinta);
			--legal-enfasis: var(--tinta);
			--legal-linea: rgba(255,255,255,.10);
			--papel: #121013;
			--tarjeta: #1b181d;
			--tinta: #f0ecf1;
			--tinta-2: #a79fac;
			--linea: #2f2932;
			--linea-fuerte: #443c48;
			--morado: #a86fc0;
			--morado-hondo: #8f4fae;
			--morado-tit: #8f4fae;
			--morado-tenue: #241b28;
		--marca: #7b2d8e;
		--marca-hondo: #4b1c51;
			--verde: #77c8a0;
			--verde-tenue: #16261e;
			--ambar: #dfae5c;
			--sombra: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.32);
			--sombra-alta: 0 2px 6px rgba(0,0,0,.5), 0 22px 55px rgba(0,0,0,.4);
		}
	}

	:root[data-theme="dark"] {
			--legal-texto: var(--tinta);
			--legal-enfasis: var(--tinta);
			--legal-linea: rgba(255,255,255,.10);
		--papel: #121013;
		--tarjeta: #1b181d;
		--tinta: #f0ecf1;
		--tinta-2: #a79fac;
		--linea: #2f2932;
		--linea-fuerte: #443c48;
		--morado: #a86fc0;
		--morado-hondo: #8f4fae;
		--morado-tit: #8f4fae;
		--morado-tenue: #241b28;
		--marca: #7b2d8e;
		--marca-hondo: #4b1c51;
		--verde: #77c8a0;
		--verde-tenue: #16261e;
		--ambar: #dfae5c;
		--sombra: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.32);
		--sombra-alta: 0 2px 6px rgba(0,0,0,.5), 0 22px 55px rgba(0,0,0,.4);
	}

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

	body {
		background: var(--papel);
		color: var(--tinta);
		font-family: "Public Sans", system-ui, -apple-system, sans-serif;
		font-size: 16.5px;
		line-height: 1.62;
	}

	h1, h2, h3, .display { font-family: "Familjen Grotesk", "Public Sans", sans-serif; letter-spacing: -0.02em; }
	.mono, .precio, .etiqueta { font-family: "Roboto Mono", ui-monospace, monospace; }

	.limite { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
	/* En pantallas grandes sobraba margen a los lados y el contenido se veía
	   estrecho. A partir de 1400px ensanchamos la caja. */
	@media (min-width: 1400px) {
		.limite { max-width: 1280px; }
	}
	.banda { padding: 60px 0; }


	/* Enlace de salto: invisible hasta que alguien llega con el teclado.
	   Evita tener que pasar por los treinta enlaces de la cabecera. */
	.saltar {
		position: absolute; left: 12px; top: -60px; z-index: 200;
		background: var(--marca); color: #fff; padding: 12px 18px;
		border-radius: 0 0 10px 10px; font-weight: 600; text-decoration: none;
		transition: top .15s ease;
	}
	.saltar:focus { top: 0; }
	#contenido { scroll-margin-top: 80px; }

	/* ── Cabecera ─────────────────────────────────────────── */
	.cab {
		background: var(--tarjeta);
		border-bottom: 1px solid var(--linea);
		position: sticky; top: 0; z-index: 40;
	}
	.cab__in { display: flex; align-items: center; gap: 24px; min-height: 68px; }
	.marca { display: inline-flex; align-items: center; text-decoration: none; line-height: 0; }
	.marca img { display: block; height: 38px; width: auto; }
	.pie .marca img { height: 44px; }
	/* Antes se cargaban dos logos, el de color y uno blanco, y se escondía
	   uno según el tema. El blanco era exactamente el de color con el RGB a
	   blanco y el mismo alfa, así que lo hace el filtro y nos ahorramos la
	   segunda imagen: brightness(0) lleva todo a negro e invert(1) a blanco,
	   respetando la transparencia. */
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) .marca .logo-et { filter: brightness(0) invert(1); }
	}
	:root[data-theme="dark"] .marca .logo-et { filter: brightness(0) invert(1); }
	.nav { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
	.nav a { color: var(--tinta-2); text-decoration: none; font-size: .93rem; font-weight: 500; }
	.nav a:hover { color: var(--morado); }
	.menu-btn { display: none; }
	.menu-movil { display: none; }
	.cab .tel {
		display: inline-flex; align-items: center; gap: 7px;
		background: var(--marca); color: #fff; text-decoration: none;
		padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: .93rem;
	}

	/* ── Hero ─────────────────────────────────────────────── */
	.hero { padding: clamp(38px, 4vw, 64px) 0 clamp(34px, 3.5vw, 52px); }
	.hero__rej {
		display: grid; grid-template-columns: 1.22fr .78fr;
		gap: clamp(28px, 3vw, 48px); align-items: stretch;
	}
	.hero__texto { display: flex; flex-direction: column; }
	/* empuja las garantías al fondo de la columna: se acabó el hueco */
	.hero__texto .avales { margin-top: auto; }
	.hero h1 { font-size: clamp(2.05rem, 1.15rem + 3.6vw, 3.7rem); line-height: 1.05; font-weight: 700; margin: 0 0 16px; text-wrap: balance; }
	.hero h1 em { font-style: normal; color: var(--morado-tit); }
	.hero__gancho {
		font-size: clamp(1.12rem, 1rem + .5vw, 1.42rem); font-weight: 600;
		color: var(--morado); margin: 0 0 14px; line-height: 1.35; max-width: 28ch;
		text-wrap: balance;
	}
	.hero__sub { font-size: clamp(1.05rem, .96rem + .38vw, 1.3rem); color: var(--tinta-2); max-width: 52ch; margin: 0 0 clamp(22px, 2.4vw, 32px); line-height: 1.6; }

	.botones {
		display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
		gap: clamp(10px, .9vw, 14px);
	}
	.et-cta__botones.botones { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
	.btn {
		display: inline-flex; align-items: center; justify-content: center; gap: 9px;
		padding: clamp(13px, 1.1vw, 16px) clamp(20px, 1.9vw, 28px);
		border-radius: 999px; font-weight: 600;
		font-size: clamp(.98rem, .93rem + .18vw, 1.08rem);
		text-decoration: none; border: 2px solid transparent; cursor: pointer;
		white-space: nowrap; line-height: 1.2;
	}
	.btn svg { flex: 0 0 auto; }
	/* Botón de enviar de los formularios: es la acción principal de la
	   página, así que ocupa todo el ancho del formulario y usa la
	   tipografía de titulares, para que no parezca un botón más. */
	.btn--enviar {
		width: 100%;
		font-family: "Familjen Grotesk", "Public Sans", sans-serif;
		font-weight: 700; letter-spacing: -.01em;
		font-size: clamp(1.04rem, 1rem + .18vw, 1.14rem);
		padding: clamp(15px, 1.2vw, 18px) 26px;
	}

	.btn--llamar { background: var(--marca); color: #fff; }
	.btn--wa { background: #0b7a3d; color: #fff; }
	.btn--linea { border-color: var(--linea-fuerte); color: var(--tinta); background: transparent; }
	.btn:hover { filter: brightness(1.07); }

	.hero__enlace { margin: 16px 0 0; }
	.hero__enlace a {
		color: var(--morado); font-weight: 600; text-decoration: none;
		font-size: clamp(.95rem, .9rem + .18vw, 1.05rem);
		border-bottom: 1px solid transparent; padding-bottom: 1px;
	}
	.hero__enlace a:hover { border-bottom-color: var(--morado); }

	.avales {
		--ico: clamp(44px, 3.6vw, 58px);
		display: grid; grid-template-columns: 1fr 1fr;
		gap: clamp(16px, 1.8vw, 26px);
		margin-top: clamp(30px, 3.2vw, 44px);
	}
	.aval { display: grid; grid-template-columns: var(--ico) 1fr; gap: clamp(12px, 1vw, 16px); align-items: center; }
	.aval__ico {
		width: var(--ico); height: var(--ico); border-radius: 12px;
		background: var(--morado-tenue); color: var(--morado);
		display: grid; place-items: center;
	}
	.aval__ico svg { width: 58%; height: 58%; display: block; }
	.aval > div > b {
		display: block; font-weight: 600; color: var(--tinta);
		font-size: clamp(1rem, .94rem + .22vw, 1.16rem); line-height: 1.3;
	}
	.aval > div > span {
		display: block; color: var(--tinta-2); margin-top: 4px;
		font-size: clamp(.92rem, .87rem + .16vw, 1.02rem); line-height: 1.5;
	}

	/* Ficha de taller — la "ventana" de la tienda */
	.ficha {
		background: var(--tarjeta); border: 1px solid var(--linea);
		border-radius: var(--radio); box-shadow: var(--sombra-alta); overflow: hidden;
		display: flex; flex-direction: column;
	}
	.hero .ficha__foto--real { flex: 1 1 auto; aspect-ratio: auto; min-height: 260px; }
	.ficha__foto {
		aspect-ratio: 4 / 3; background: var(--morado-tenue);
		display: grid; place-items: center; text-align: center; padding: 18px;
		color: var(--morado); font-size: .82rem; font-weight: 600;
		border-bottom: 1px solid var(--linea);
	}
	.ficha__foto--real { aspect-ratio: 4 / 5; padding: 0; }
	.ficha__foto--real img { width: 100%; height: 100%; object-fit: cover; display: block; }
	.foto { display: block; width: 100%; height: auto; border-radius: var(--radio); border: 1px solid var(--linea); }
	.pie-foto { margin-top: 8px; font-size: .84rem; color: var(--tinta-2); }

	.ficha__cuerpo { padding: clamp(16px, 1.5vw, 22px) clamp(18px, 1.6vw, 24px); }
	.hero .ficha dl { font-size: clamp(.92rem, .88rem + .14vw, 1.02rem); }
	.abierto {
		display: inline-flex; align-items: center; gap: 7px;
		background: var(--verde-tenue); color: var(--verde);
		font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
		padding: 5px 11px; border-radius: 999px; margin-bottom: 12px;
	}
	.abierto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
	/* Cerrado: la misma pastilla en ámbar. Antes seguía en verde aunque la
	   tienda estuviera cerrada, que es justo lo contrario de lo que informa. */
	.abierto[data-abierto="no"] { background: color-mix(in srgb, var(--ambar) 14%, var(--tarjeta)); color: var(--ambar); }
	.ficha dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: .93rem; }
	.ficha dt { color: var(--tinta-2); }
	.ficha dd { margin: 0; font-weight: 600; }

	/* ── Selector de avería ───────────────────────────────── */
	.seccion__tit { font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); font-weight: 700; margin: 0 0 8px; text-wrap: balance; color: var(--morado-tit); }
	.seccion__pie { color: var(--tinta-2); margin: 0 0 28px; max-width: 60ch; }
	/* Los enlaces sueltos dentro de un párrafo no tenían color propio y
	   salían con el azul por defecto del navegador: 2,01:1 en oscuro. */
	.seccion__pie a, .pie-foto a, .apunte a, .remate a:not(.btn),
	.consent a, .form-pie a, .aviso-rgpd a { color: var(--morado); font-weight: 600; }

	.rejilla { display: grid; grid-template-columns: 1fr; gap: 16px; }
	.servicio {
		display: flex; flex-direction: column;
		background: var(--tarjeta); border: 1px solid var(--linea);
		border-radius: var(--radio); overflow: hidden; text-decoration: none; color: inherit;
		box-shadow: var(--sombra); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
	}
	.servicio:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); border-color: var(--morado); }
	.servicio__ilus {
		aspect-ratio: 5 / 3; background: var(--morado-tenue);
		border-bottom: 1px solid var(--linea);
		display: grid; place-items: center; color: var(--morado);
	}
	.servicio__ilus svg { width: 46%; max-width: 130px; height: auto; display: block; }
	.servicio__txt { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
	.servicio h3 { margin: 0; font-size: 1.05rem; font-weight: 600; }
	.servicio p { margin: 0; font-size: .9rem; color: var(--tinta-2); }
	.servicio .precio { margin-top: auto; padding-top: 10px; font-size: .88rem; font-weight: 500; color: var(--morado); }

	/* En móvil la ilustración grande se come la pantalla: cada tarjeta pasa a
	   una fila compacta con el icono pequeño al lado del texto. No se pierde
	   información, solo deja de hacer falta medio kilómetro de scroll. */
	@media (max-width: 620px) {
		.rejilla { gap: 12px; }
		.servicio { flex-direction: row; align-items: stretch; }
		.servicio__ilus {
			aspect-ratio: auto; flex: 0 0 84px;
			border-bottom: 0; border-right: 1px solid var(--linea);
		}
		.servicio__ilus svg { width: 46px; max-width: none; }
		.servicio__txt { padding: 14px 16px; gap: 4px; }
		.servicio h3 { font-size: 1rem; }
		.servicio p { font-size: .86rem; line-height: 1.45; }
		.servicio .precio { padding-top: 6px; }
	}

	/* ── Tarifas ──────────────────────────────────────────── */
	.tarifas { background: var(--tarjeta); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
	.tabla-caja { overflow-x: auto; border: 1px solid var(--linea); border-radius: var(--radio); }
	table { width: 100%; border-collapse: collapse; font-size: .95rem; }
	th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
	tbody tr:last-child td { border-bottom: 0; }
	th { font-family: "Familjen Grotesk", sans-serif; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-2); background: var(--papel); }
	td.precio { font-weight: 500; color: var(--morado); white-space: nowrap; font-variant-numeric: tabular-nums; }
	td.plazo { color: var(--tinta-2); white-space: nowrap; }

	/* En móvil la tabla se reorganiza en fichas: cero scroll horizontal */
	@media (max-width: 700px) {
		.tabla-caja { overflow-x: visible; border: 0; border-radius: 0; }
		.tabla-caja table { display: block; font-size: 1rem; }
		.tabla-caja thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
		.tabla-caja tbody { display: grid; gap: 12px; }
		.tabla-caja tr {
			display: block; background: var(--papel); border: 1px solid var(--linea);
			border-radius: var(--radio); padding: 14px 16px;
		}
		.tabla-caja td { display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
			border: 0; padding: 5px 0; text-align: right; white-space: normal; }
		.tabla-caja td::before {
			content: attr(data-et); color: var(--tinta-2); font-weight: 400;
			font-size: .9rem; text-align: left; flex: 0 0 auto;
		}
		.tabla-caja td:first-child {
			display: block; font-weight: 600; color: var(--tinta); text-align: left;
			padding: 0 0 10px; margin-bottom: 8px; border-bottom: 1px solid var(--linea);
		}
		.tabla-caja td:first-child::before { content: none; }
		.tabla-caja tbody tr:last-child td { border-bottom: 0; }
		.tabla-caja tbody tr:last-child td:first-child { border-bottom: 1px solid var(--linea); }
	}

	.garantias {
		list-style: none; margin: 22px 0 0; padding: 0;
		display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 14px 22px;
	}
	/* Veintidós líneas de tarifa son mucho scroll en cualquier pantalla, así
	   que los tres grupos van plegados y se abre el que le interese al
	   cliente. Solo "Ordenadores y portátiles" arranca abierto. */
	.tarifa-plegable > summary { list-style: none; cursor: pointer; }
	.tarifa-plegable > summary::-webkit-details-marker { display: none; }
	.tarifa-plegable > summary .tarifa-grupo::after {
		content: "+"; margin-left: 4px; color: var(--morado);
		font-weight: 700; font-size: 1.35rem; line-height: 1;
	}
	.tarifa-plegable[open] > summary .tarifa-grupo::after { content: "−"; }
	.tarifa-plegable > summary:hover .tarifa-grupo { color: var(--morado-tit); }
	@media (max-width: 700px) {
		.tarifa-plegable > summary .tarifa-grupo::after { margin-left: auto; }
		/* La garantía es la misma en todas: repetirla 22 veces sobra. */
		.tabla-caja td:nth-child(4) { display: none; }
	}

	.tarifa-grupo {
		margin: 30px 0 10px; font-size: 1.08rem; font-weight: 700; color: var(--tinta);
		display: flex; align-items: center; gap: 9px;
	}
	.tarifa-grupo:first-of-type { margin-top: 22px; }
	.tarifa-grupo::before { content: ""; width: 4px; height: 1.05em; border-radius: 3px; background: var(--marca); flex: 0 0 auto; }
	.tarifa-garantia { margin: 18px 0 0; font-size: .95rem; color: var(--tinta-2); }
	.tarifa-garantia b { color: var(--morado-tit); }
	.tarifa-iphone {
		margin: 22px 0 0; padding: 15px 18px; border-radius: var(--radio);
		background: var(--morado-tenue); color: var(--tinta-2); font-size: .94rem; line-height: 1.55;
	}
	.tarifa-iphone b { color: var(--tinta); }
	.garantias li { border-top: 2px solid var(--morado); padding-top: 14px; }
	.garantias svg { width: 27px; height: 27px; color: var(--morado); display: block; margin: 0 0 11px; }
	.garantias b { display: block; font-weight: 600; color: var(--tinta); font-size: 1rem; margin-bottom: 3px; }
	.garantias span { display: block; color: var(--tinta-2); font-size: .92rem; line-height: 1.5; }

	.apunte {
		margin-top: 16px; font-size: .93rem; color: var(--tinta-2);
		border-left: 3px solid var(--morado); padding-left: 14px; max-width: 70ch;
	}

	/* ── Proceso ──────────────────────────────────────────── */
	.proceso-rej { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 36px; align-items: start; }
	.pasos { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; counter-reset: p; }
	.pasos li { display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; align-items: start; }
	.pasos li::before { margin-bottom: 0; }
	.pasos li h3, .pasos li p { grid-column: 2; }
	.pasos li { counter-increment: p; }
	.pasos li::before {
		content: counter(p); display: grid; place-items: center;
		width: 34px; height: 34px; border-radius: 50%;
		border: 2px solid var(--morado); color: var(--morado);
		font-family: "Roboto Mono", monospace; font-weight: 500; font-size: .95rem; margin-bottom: 12px;
	}
	.pasos h3 { margin: 0 0 5px; font-size: 1.02rem; font-weight: 600; }
	.pasos p { margin: 0; font-size: .93rem; color: var(--tinta-2); }

	/* ── Reseñas ──────────────────────────────────────────── */
	.resenas { background: var(--tarjeta); border-top: 1px solid var(--linea); }

	/* Antes iba sin padding abajo y el enlace quedaba pegado a la banda
	   siguiente. Ahora respira por los dos lados. */
	.banda--fina { padding: 60px 0; }

	/* Simulador de tarifa de la portada */
	/* Todos los fondos morados de la web usan el mismo tono, el hondo.
	   El --marca claro se queda para botones y detalles, no para bandas. */
	.tarifa { background: var(--marca-hondo); color: #fff; }
	.tarifa h2 { color: #fff; }
	.tarifa__pie { color: rgba(255,255,255,.82); max-width: 54ch; margin: 0 0 clamp(22px, 2.4vw, 30px); }
	.tarifa-rej { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: clamp(20px, 2.6vw, 34px); align-items: stretch; }
	.tarifa-caja { background: var(--tarjeta); color: var(--tinta); border-radius: var(--radio); padding: clamp(20px, 2.4vw, 28px); }
	.tarifa-campo { margin: 0 0 18px; }
	.tarifa-campo:last-child { margin-bottom: 0; }
	.tarifa-campo > span { display: block; font-weight: 600; font-size: .93rem; margin: 0 0 8px; }
	.tarifa-caja input[type="number"] {
		width: 100%; box-sizing: border-box; padding: 12px 14px; font: inherit; font-size: 16px;
		border: 1px solid var(--linea); border-radius: 10px; background: var(--papel); color: inherit;
	}
	.tarifa-caja input:focus-visible { outline: 3px solid var(--morado); outline-offset: 2px; border-color: var(--morado); }
	.op-pills { display: flex; flex-wrap: wrap; gap: 8px; }
	.op-pills label { position: relative; }
	.op-pills input { position: absolute; opacity: 0; width: 0; height: 0; }
	.op-pills span {
		display: inline-block; padding: 9px 15px; border: 1px solid var(--linea); border-radius: 999px;
		font-size: .92rem; cursor: pointer; user-select: none;
	}
	.op-pills input:checked + span { background: var(--marca); border-color: var(--morado); color: #fff; font-weight: 600; }
	.op-pills input:focus-visible + span { outline: 3px solid var(--morado); outline-offset: 2px; }
	.tarifa-sal {
		background: var(--tarjeta); color: var(--tinta); border-radius: var(--radio);
		padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; justify-content: center;
	}
	.tarifa-sal__op { font-family: "Roboto Mono", monospace; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
	.tarifa-sal__precio {
		font-size: clamp(2.6rem, 2rem + 2.6vw, 3.7rem); font-weight: 700; line-height: 1;
		letter-spacing: -.025em; font-variant-numeric: tabular-nums; margin: 6px 0 2px; color: var(--morado);
	}
	.tarifa-sal__precio small { font-size: .28em; font-weight: 500; color: var(--tinta-2); letter-spacing: 0; }
	.tarifa-sal__que { color: var(--tinta-2); font-size: .95rem; margin: 0 0 16px; }
	.tarifa-sal__ahorro { border-radius: 10px; padding: 12px 15px; font-weight: 600; font-size: .96rem; margin: 0 0 18px; }
	.tarifa-sal__ahorro[data-ok="si"] { background: var(--verde-tenue); color: var(--verde); }
	.tarifa-sal__ahorro[data-ok="no"] { background: color-mix(in srgb, var(--ambar) 14%, var(--tarjeta)); color: var(--ambar); }
	.tarifa-sal a { font-weight: 600; color: var(--morado); }
	.tarifa-sal a.btn--contratar, .btn--contratar {
		display: flex; align-items: center; justify-content: center; gap: 9px;
		width: 100%; margin-top: 16px; padding: 14px 20px; border-radius: 999px;
		background: #0b7a3d; color: #fff; font-weight: 600; font-size: 1rem;
		text-decoration: none; box-sizing: border-box;
	}
	.tarifa-sal a.btn--contratar:hover, .btn--contratar:hover { background: #096533; color: #fff; }
	.btn--contratar svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }
	.tarifa-sal__nota {
		font-size: .86rem; line-height: 1.55; color: var(--tinta-2);
		margin: 0 0 14px; text-align: left;
	}
	.tarifa-sal__mas { margin: 14px 0 0; font-size: .92rem; text-align: center; }

	.tarifa-nota { color: rgba(255,255,255,.72); font-size: .84rem; margin: 18px 0 0; max-width: 70ch; }
	@media (max-width: 860px) { .tarifa-rej { grid-template-columns: 1fr; } }
	.puente {
		margin: 0 auto; max-width: 60ch; text-align: center;
		color: var(--tinta-2); line-height: 1.65;
		font-size: clamp(.98rem, .94rem + .2vw, 1.08rem);
	}
	.puente b { color: var(--tinta); display: block; font-size: 1.12em; margin-bottom: 4px; }
	.puente a {
		color: var(--morado); font-weight: 600; white-space: nowrap;
		display: inline-block; margin-top: 10px; padding-bottom: 2px;
		border-bottom: 2px solid color-mix(in srgb, var(--morado) 35%, transparent);
	}
	.puente a:hover { border-bottom-color: var(--morado); }
	.puente-botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }
	.btn--wa2 { background: #0b7a3d; color: #fff; border-color: #0b7a3d; }
	.serv-cierre .btn--wa, .emp-cierre .btn--wa, .sob-cierre .btn--wa { border-color: #0b7a3d; }
	.btn--wa2:hover { background: #096533; color: #fff; }
	@media (max-width: 620px) {
		.puente-botones { flex-direction: column; }
		.puente-botones .btn { width: 100%; text-align: center; }
	}

	.estrellas { color: var(--ambar); letter-spacing: 2px; font-size: .95rem; }
	.res-rej { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 22px; }
	.res {
		background: var(--papel); border: 1px solid var(--linea);
		border-radius: var(--radio); padding: 18px 20px;
		display: flex; flex-direction: column; gap: 10px;
	}
	.res p { margin: 0; font-size: .95rem; }
	.res footer { margin-top: auto; font-size: .85rem; color: var(--tinta-2); }
	.nota-google {
		display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
		background: var(--papel); border: 1px solid var(--linea);
		border-radius: var(--radio); padding: 20px 24px; margin-bottom: 28px;
	}
	.nota-google__num {
		font-family: "Familjen Grotesk", sans-serif; font-weight: 700;
		font-size: 2.6rem; line-height: 1; color: var(--tinta); display: block;
	}
	.nota-google > div { text-align: center; }
	.nota-google p { margin: 0; max-width: 54ch; color: var(--tinta-2); font-size: .97rem; }
	.nota-google strong { color: var(--tinta); }

	.hueco {
		border: 1px dashed var(--linea-fuerte); border-radius: 8px;
		padding: 8px 11px; font-size: .78rem; color: var(--tinta-2);
		background: transparent;
	}

	/* ── Empresas ─────────────────────────────────────────── */
	/* ── Paquetes de mantenimiento para empresas ───────────────
	   Prefijo paq- en todo: esta sección va sobre banda morada y
	   las tarjetas son claras, así que cualquier regla suelta de
	   color heredado deja texto blanco sobre blanco. Ya pasó una vez. */
	.paquetes { background: var(--marca-hondo); color: #fff; }
	.paq-cintillo {
		font-family: "Roboto Mono", monospace; font-size: .74rem;
		letter-spacing: .12em; text-transform: uppercase;
		color: rgba(255,255,255,.66); margin: 0 0 10px;
	}
	.paq-tit {
		font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); font-weight: 700;
		margin: 0 0 10px; color: #fff; text-wrap: balance;
	}
	.paq-entrada { color: rgba(255,255,255,.85); margin: 0 0 30px; max-width: 62ch; }
	/* La cabecera de la sección va centrada, como las demás. Las tarjetas
	   no: una lista de puntos centrada no hay quien la lea. */
	/* La cabecera de la sección va centrada; la letra pequeña del final,
	   alineada a la izquierda: son párrafos largos y centrados se leen mal. */
	.paquetes > .limite > .paq-cintillo,
	.paquetes > .limite > .paq-tit,
	.paquetes > .limite > .paq-entrada { text-align: center; margin-left: auto; margin-right: auto; }
	.paquetes > .limite > .paq-pie,
	.paquetes > .limite > .paq-otra { text-align: left; max-width: 78ch; }

	/* Tres tarjetas o una. Nunca dos, porque la tercera se queda sola. */
	.paq-rej { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: stretch; }
	@media (min-width: 900px) { .paq-rej { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

	.paq {
		position: relative; display: flex; flex-direction: column;
		background: var(--tarjeta); color: var(--tinta);
		border: 1px solid var(--linea); border-radius: var(--radio);
		padding: 26px 24px 24px; box-shadow: var(--sombra);
	}
	.paq--destacado { border: 2px solid var(--marca); box-shadow: var(--sombra-alta); }
	@media (min-width: 900px) { .paq--destacado { margin-top: -14px; padding-top: 34px; } }

	.paq-sello {
		position: absolute; top: -13px; left: 24px;
		background: var(--marca); color: #fff;
		font-size: .72rem; font-weight: 600; letter-spacing: .05em;
		padding: 6px 13px; border-radius: 999px; white-space: nowrap;
	}
	.paq-para {
		margin: 0 0 4px; font-size: .8rem; font-weight: 500;
		color: var(--tinta-2); text-transform: uppercase; letter-spacing: .05em;
	}
	.paq-nombre { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--tinta); }
	.paq-precio {
		margin: 10px 0 18px; font-size: 2.2rem; font-weight: 700;
		line-height: 1; color: var(--morado-tit); font-variant-numeric: tabular-nums;
		display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap;
	}
	.paq-precio span {
		font-size: .82rem; font-weight: 500; letter-spacing: .04em;
		text-transform: uppercase; color: var(--tinta-2);
	}
	.paq-precio small { font-size: .95rem; font-weight: 500; color: var(--tinta-2); }

	/* El precio por equipo de más: va justo bajo la cuota, sin competir con ella. */
	.paq-extra {
		margin: -10px 0 18px; font-size: .86rem; font-weight: 600;
		color: var(--morado); letter-spacing: .01em;
	}

	/* ── Trabajo por horas, dentro de la banda morada ─────── */
	.paq-horas {
		margin: 30px 0 0; padding: clamp(22px, 3vw, 30px);
		border-radius: var(--radio);
		background: rgba(255,255,255,.09);
		border: 1px solid rgba(255,255,255,.2);
	}
	.paq-horas h3 {
		margin: 0 0 10px; font-size: clamp(1.15rem, 2.2vw, 1.4rem);
		font-weight: 700; color: #fff; text-align: center; line-height: 1.3;
	}
	.paq-horas__entrada {
		margin: 0 auto 22px; max-width: 70ch; text-align: center;
		font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.8);
	}
	.paq-horas__lista {
		list-style: none; padding: 0; margin: 0;
		display: grid; grid-template-columns: 1fr; gap: 14px;
	}
	@media (min-width: 780px) { .paq-horas__lista { grid-template-columns: repeat(3, 1fr); } }
	.paq-horas__lista li {
		background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
		border-radius: 14px; padding: 18px 20px;
		display: grid; gap: 7px; align-content: start;
	}
	.paq-horas__lista b {
		font-size: 1.7rem; font-weight: 700; color: #fff; line-height: 1;
		font-variant-numeric: tabular-nums;
	}
	.paq-horas__lista b small { font-size: .9rem; font-weight: 500; color: rgba(255,255,255,.75); }
	.paq-horas__lista span { font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.8); }
	.paq-horas__nota {
		margin: 18px auto 0; max-width: 76ch; text-align: center;
		font-size: .88rem; line-height: 1.6; color: rgba(255,255,255,.72);
	}
	.paq-horas__cta {
		margin: 22px 0 0; display: flex; flex-wrap: wrap;
		gap: 12px; justify-content: center;
	}
	.paq-horas__cta .paq-btn { display: inline-block; }

	.paq-lista {
		list-style: none; padding: 0; margin: 0 0 22px;
		display: grid; gap: 10px; font-size: .93rem; line-height: 1.5;
		color: var(--tinta-2); flex: 1;
		border-top: 1px solid var(--linea); padding-top: 18px;
	}
	.paq-lista li { position: relative; padding-left: 26px; }
	.paq-lista li::before {
		content: ""; position: absolute; left: 2px; top: .35em;
		width: 13px; height: 8px; border-left: 2px solid var(--marca);
		border-bottom: 2px solid var(--marca); transform: rotate(-45deg);
	}

	/* Dos botones: el que ya está decidido y el que todavía no. */
	.paq-cta { display: grid; gap: 9px; }
	.paq-btn {
		display: block; text-align: center; text-decoration: none;
		padding: 13px 18px; border-radius: 999px; font-weight: 600; font-size: .98rem;
		border: 2px solid var(--marca); color: var(--morado); background: transparent;
		transition: background .16s ease, color .16s ease;
	}
	.paq-btn:hover { background: var(--marca); color: #fff; }
	.paq-btn--fuerte { background: var(--marca); color: #fff; }
	.paq-btn--fuerte:hover { background: var(--marca-hondo); color: #fff; }
	/* Sobre morado, el botón de línea necesita borde y texto claros.
	   Tiene que ir DESPUÉS de .paq-btn: misma especificidad, manda el orden. */
	.paq-btn--claro { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
	.paq-btn--claro:hover { background: #fff; color: var(--morado-tit); }

	.paq-pie {
		margin: 26px 0 0; font-size: .88rem; line-height: 1.6;
		color: rgba(255,255,255,.78); max-width: 76ch;
	}
	.paq-pie b { color: #fff; }
	.paq-otra { margin: 14px 0 0; font-size: .92rem; color: rgba(255,255,255,.78); max-width: 76ch; }
	.paq-otra a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 2px solid rgba(255,255,255,.45); }
	.paq-otra a:hover { border-bottom-color: #fff; }
	.paq-otra b { color: #fff; }
	.paq-pie a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
	.paq-lista b { color: var(--tinta); font-weight: 600; }
	/* La nota interna va sobre banda morada: hay que forzarle el color. */
	.paq-apunte { margin-top: 26px; color: rgba(255,255,255,.72); border-left-color: rgba(255,255,255,.4); }
	.paq-apunte strong { color: #fff; }

	@media (max-width: 620px) {
		.paq { padding: 24px 20px 22px; }
		.paq-precio { font-size: 2rem; }
	}

	/* ── Dónde estamos ────────────────────────────────────── */
	.mapa-rej { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; }
	/* El remate es el cierre de la sección, no una columna: que cruce las dos. */
	.mapa-rej > .remate { grid-column: 1 / -1; margin-top: clamp(20px, 2.4vw, 30px); }
	.mapa {
		aspect-ratio: 16 / 10; border-radius: var(--radio);
		background: var(--morado-tenue); border: 1px solid var(--linea);
		display: grid; place-items: center; color: var(--morado);
		font-size: .84rem; font-weight: 600; text-align: center; padding: 16px;
	}
	.zonas { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 16px 0 0; }
	.zonas li { border: 1px solid var(--linea); border-radius: 999px; padding: 5px 12px; font-size: .85rem; color: var(--tinta-2); background: var(--tarjeta); }

	/* ── Pie ──────────────────────────────────────────────── */
	/* Mismo blanco que las tarjetas y la banda de tarifas */
	.pie {
		background: var(--tarjeta); color: var(--tinta-2);
		border-top: 1px solid var(--linea);
		padding: 48px 0 40px; font-size: .92rem;
	}
	.pie-rej { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; }
	.pie a { color: var(--tinta-2); text-decoration: none; display: block; padding: 3px 0; }
	.pie a:hover { color: var(--morado); text-decoration: underline; }
	.pie .pie-tit { font-family: "Familjen Grotesk", sans-serif; color: var(--tinta); margin: 0 0 10px; font-size: .95rem; font-weight: 600; }
	.pie p { color: var(--tinta-2); }
	.pie-legal {
		background: var(--marca-hondo); color: var(--legal-texto);
		padding: 16px 0 calc(16px + var(--hueco-barra, 0px));
		border-top: 1px solid var(--legal-linea);
		font-size: .85rem;
	}
	.pie-legal__in {
		display: flex; flex-wrap: wrap; gap: 8px 22px;
		align-items: center; justify-content: center; text-align: center;
	}
	.pie-legal a { color: var(--legal-texto); text-decoration: none; }
	.pie-legal a:hover { color: var(--legal-enfasis); text-decoration: underline; }
	.pie-legal span { color: var(--legal-texto); }
	:root[data-theme="dark"] .pie-legal { background: var(--morado-tenue); border-top: 1px solid var(--linea); }
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) .pie-legal { background: var(--morado-tenue); border-top: 1px solid var(--linea); }
	}


	/* ── Barra superior de utilidad ────────────────────────── */
	.utilidad {
		/* Oscura en los dos temas. Con var(--tinta) se volvía casi blanca
		   en modo oscuro y la letra blanca se perdía por completo. */
		background: #222629; color: #fff; font-size: .82rem;
	}
	.utilidad__in {
		display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
		min-height: 38px; padding-top: 6px; padding-bottom: 6px;
	}
	.utilidad a { color: #fff; text-decoration: none; opacity: .9; }
	.utilidad a:hover { opacity: 1; text-decoration: underline; }
	.utilidad__sep { opacity: .35; }
	.utilidad__dcha { margin-left: auto; display: flex; gap: 16px; align-items: center; }
	.pastilla {
		display: inline-flex; align-items: center; gap: 6px;
		background: rgba(255,255,255,.14); border-radius: 999px;
		padding: 3px 10px; font-weight: 600; font-size: .78rem;
	}
	.pastilla::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
	.pastilla[data-abierto="no"]::before { background: #f0a24a; }

	/* ── Cabecera ──────────────────────────────────────────── */
	.cab__acciones { display: flex; align-items: center; gap: 10px; margin-left: auto; }
	.cab .wa {
		display: inline-flex; align-items: center; gap: 7px;
		border: 2px solid #0b7a3d; color: #0b7a3d; background: transparent;
		padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: .92rem; text-decoration: none;
	}
	.cab .wa:hover { background: #0b7a3d; color: #fff; }
	.cab .wa svg, .cab .tel svg { width: 16px; height: 16px; fill: currentColor; }
	.nav { display: flex; gap: 20px; flex-wrap: wrap; }

	/* ── Formulario de presupuesto ─────────────────────────── */
	.presupuesto { background: var(--tarjeta); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
	/* stretch, no start: con start la tarjeta acababa mucho antes que el
	   formulario y las dos columnas no cuadraban por abajo. Así el bloque
	   es un rectángulo: mismo arriba y mismo abajo. */
	.form-rej { display: grid; grid-template-columns: 1.25fr .75fr; gap: 34px; align-items: stretch; }
	.formulario { display: grid; gap: 14px; }

	/* El formulario ocupa pantalla y media en móvil antes de dejarte llegar a
	   los servicios. Ahí va plegado; en ordenador se abre siempre y la pestaña
	   ni se ve. El atributo open lo pone el script según el ancho. */
	.plegable { border: 0; padding: 0; }
	.plegable > summary {
		display: none; cursor: pointer; list-style: none;
		padding: 15px 18px; border: 1px solid var(--linea-fuerte);
		border-radius: var(--radio); background: var(--tarjeta);
		font-weight: 600; font-size: 1rem; color: var(--tinta);
	}
	.plegable > summary::-webkit-details-marker { display: none; }
	.plegable > summary::after {
		content: "+"; float: right; font-weight: 700; font-size: 1.3rem;
		line-height: 1; color: var(--morado);
	}
	.plegable[open] > summary { border-radius: var(--radio) var(--radio) 0 0; margin-bottom: 14px; }
	.plegable[open] > summary::after { content: "−"; }
	/* El formulario va SIEMPRE abierto, también en móvil: si alguien llega
	   caliente, lo que hay que hacer es dejarle escribir, no ponerle un clic
	   por delante. La caja <details> se queda por si algún día lo plegamos:
	   basta con volver a mostrar el summary aquí. */
	.plegable:not([open]) ~ * { display: none; }
	.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
	.campo { display: grid; gap: 5px; align-content: start; }
	.campo--ancho { grid-column: 1 / -1; }
	.campo label { font-size: .86rem; font-weight: 600; color: var(--tinta); }
	.campo label span { font-weight: 400; color: var(--tinta-2); }
	.campo input, .campo select, .campo textarea {
		font: inherit; font-size: 16px; color: var(--tinta);
		background: var(--papel); border: 1px solid var(--linea-fuerte);
		border-radius: 10px; padding: 11px 13px; height: 46px; width: 100%;
	}
	.campo input[type="file"] { padding: 9px 12px; }
	.campo input[type="file"]::file-selector-button {
		font: inherit; font-size: .88rem; font-weight: 600;
		border: 1px solid var(--linea-fuerte); background: var(--tarjeta);
		color: var(--tinta); border-radius: 8px; padding: 5px 12px;
		margin-right: 10px; cursor: pointer;
	}
	.campo textarea { height: auto; min-height: 108px; resize: vertical; }
	.campo input:focus, .campo select:focus, .campo textarea:focus {
		outline: none; border-color: var(--morado); box-shadow: 0 0 0 3px var(--morado-tenue);
	}
	.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--tinta-2); }
	.consent input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--morado); }
	.form-pie { font-size: .86rem; color: var(--tinta-2); }
	.form-legal {
		font-size: .78rem; line-height: 1.55; color: var(--tinta-2);
		background: var(--papel); border: 1px solid var(--linea);
		border-radius: 10px; padding: 12px 14px; margin: 0;
	}
	.form-legal strong { color: var(--tinta); font-weight: 600; }
	.form-legal a { color: var(--morado); }
	.form-aviso {
		display: none; padding: 12px 15px; border-radius: 10px;
		background: var(--verde-tenue); color: var(--verde); font-size: .92rem; font-weight: 600;
	}
	.form-aviso.visible { display: block; }

	/* Tarjeta lateral de contacto */
	.contacto-caja {
		background: var(--papel); border: 1px solid var(--linea);
		border-radius: var(--radio); padding: 22px; display: grid; gap: 16px;
		/* La tarjeta mide lo mismo que el formulario, así que las filas se
		   reparten por todo el alto en lugar de amontonarse arriba y dejar
		   un hueco muerto. */
		align-content: space-between;
	}
	.contacto-caja h3 { margin: 0; font-size: 1.05rem; }
	.contacto-fila { display: flex; gap: 12px; align-items: flex-start; font-size: .94rem; }
	.contacto-envio {
		margin: 0; padding-top: 16px; border-top: 1px solid var(--linea);
		font-size: .88rem; line-height: 1.55; color: var(--tinta-2);
	}
	.contacto-envio b { color: var(--tinta); }
	.contacto-btn { width: 100%; justify-content: center; }
	.contacto-fila svg { width: 20px; height: 20px; flex: 0 0 auto; fill: var(--morado); margin-top: 2px; }
	.contacto-fila > div { display: grid; gap: 1px; }
	.contacto-fila b { display: block; }
	.contacto-fila > div > span { display: block; color: var(--tinta-2); font-size: .88rem; }
	.contacto-fila a { color: var(--tinta); text-decoration: none; font-weight: 600; }
	.contacto-fila a:hover { color: var(--morado); }

	/* ── Mapa ──────────────────────────────────────────────── */
	.mapa-ancho {
		position: relative; overflow: hidden;
		border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
		background: var(--papel);
	}
	.mapa-lienzo {
		/* width:100% es obligatorio: con aspect-ratio y min-height juntos, el
		   navegador deduce el ancho de la altura (300 × 24/7 = 1029px) y en
		   pantallas de ~800px el bloque se salía y el texto quedaba descentrado. */
		width: 100%;
		aspect-ratio: 24 / 7; min-height: 300px;
		display: grid; place-items: center; align-content: center; gap: 10px;
		background-color: var(--morado-tenue);
		background-image:
			linear-gradient(var(--linea) 1px, transparent 1px),
			linear-gradient(90deg, var(--linea) 1px, transparent 1px);
		background-size: 44px 44px, 44px 44px;
		text-align: center; padding: clamp(24px, 4vw, 48px) 20px;
	}
	.mapa-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
	/* Solo el botón de contorno lleva fondo de tarjeta. Sin acotarlo a
	   .btn--linea le pisaba el morado al de «Cómo llegar» y el texto
	   blanco se quedaba sobre fondo blanco. */
	.btn--linea.mapa-boton { background: var(--tarjeta); }
	.mapa-lienzo .mapa-aviso { font-size: .8rem; max-width: 62ch; margin-top: 6px; }

	/* Cuando el visitante pulsa, el recuadro deja de ser un cartel y pasa a
	   ser el marco del mapa: fuera el relleno, la rejilla y el centrado.
	   El iframe va en absoluto a propósito. Si se deja en el flujo, su
	   height:100% no tiene contra qué medirse (la altura del bloque la pone
	   aspect-ratio, no el contenido) y el mapa salía de 150 px o de cero. */
	.mapa-lienzo.mapa-puesto {
		position: relative; padding: 0; gap: 0;
		background-image: none; background-color: var(--tarjeta);
	}
	.mapa-lienzo.mapa-puesto iframe {
		position: absolute; inset: 0;
		width: 100%; height: 100%; border: 0; display: block;
	}
	.mapa-cargado {
		max-width: 62ch; margin: 0 auto; padding: 10px 20px 12px;
		color: var(--tinta-2); font-size: .92rem; line-height: 1.65; text-align: center;
	}
	.mapa-cargado b { color: var(--tinta); }
	.mapa-cargado a { color: var(--morado); font-weight: 600; }
	/* En móvil el mapa incrustado pesa y casi nadie lo usa: quien va a venir
	   abre su propia app. Se queda en una tarjeta corta con el botón "Cómo
	   llegar", que es lo único que de verdad se toca. */
	@media (max-width: 760px) {
		.mapa-lienzo { aspect-ratio: auto; min-height: 0; padding: 26px 20px 28px; gap: 8px; }
		.mapa-lienzo .solo-escritorio { display: none; }
		.mapa-botones { margin-top: 4px; }
		/* En móvil el cartel no tiene altura propia (min-height:0). Si alguien
		   pulsa «Ver el mapa aquí», hay que dársela o el mapa entra de cero
		   píxeles y parece que el botón no hace nada. */
		.mapa-lienzo.mapa-puesto { min-height: 300px; padding: 0; }
	}
	.mapa-lienzo svg { width: clamp(34px, 3vw, 44px); height: clamp(34px, 3vw, 44px); fill: var(--morado); }
	.mapa-lienzo b { color: var(--tinta); font-size: .95rem; }
	.mapa-lienzo span { color: var(--tinta-2); font-size: .88rem; max-width: 46ch; }

	/* ── Barra móvil ──────────────────────────────────────── */
	.barra { display: none; }

	/* Todos los titulares de sección van centrados, en cualquier tamaño.
	   La única excepción es el hero, que es de dos columnas. */
	.limite > .seccion__tit,
	.limite > .seccion__pie,
	.limite > .tarifa__pie,
	.limite > .tarifa-garantia,
	.limite > .tarifa-nota { text-align: center; }
	.limite > .seccion__pie,
	.limite > .tarifa__pie,
	.limite > .tarifa-nota { margin-left: auto; margin-right: auto; }
	/* En la sección de "dónde estamos" el titular vive dentro de una
	   columna, no directamente en .limite: hay que nombrarlo aparte. */
	.mapa-rej > div > .seccion__tit, .mapa-rej > div > .seccion__pie { text-align: left; }

	:where(a, button):focus-visible { outline: 3px solid var(--morado); outline-offset: 3px; border-radius: 6px; }

	@media (max-width: 860px) {
		:root { --hueco-barra: calc(62px + env(safe-area-inset-bottom, 0px)); }
		.hero__rej, .mapa-rej, .proceso-rej, .form-rej { grid-template-columns: 1fr; }
		.avales { grid-template-columns: 1fr; gap: 16px; }
		.pie-rej { grid-template-columns: 1fr 1fr; gap: 26px; }
		.campos { grid-template-columns: 1fr; }
		/* En móvil, lo primero que busca quien entra es el teléfono, el WhatsApp
		   y la dirección. La tarjeta de contacto sube por encima del formulario. */
		/* align-items:start viene de la versión de escritorio, donde es una
		   rejilla. Al pasar a flex en columna, ese start es el eje horizontal
		   y dejaba la tarjeta de contacto encogida al ancho de su texto en
		   vez de ocupar todo el bloque. */
		.form-rej { display: flex; flex-direction: column; gap: 22px; align-items: stretch; }
		.form-rej .contacto-caja { order: 1; }
		.form-rej .formulario { order: 2; }
		.utilidad { display: none; }
		.cab .wa span, .cab .tel span { display: none; }
		.nav { display: none; }

		/* Menú de móvil */
		.menu-btn {
			display: block; position: relative; flex: 0 0 auto;
			width: 44px; height: 44px; padding: 0; margin-left: 4px;
			background: none; border: 1px solid var(--linea); border-radius: 11px;
			color: var(--tinta); cursor: pointer; -webkit-tap-highlight-color: transparent;
		}
		.menu-btn span {
			position: absolute; left: 12px; width: 18px; height: 2px; border-radius: 2px;
			background: currentColor; transition: transform .2s ease, opacity .15s ease;
		}
		.menu-btn span:nth-child(1) { top: 14px; }
		.menu-btn span:nth-child(2) { top: 20px; }
		.menu-btn span:nth-child(3) { top: 26px; }
		.menu-btn[aria-expanded="true"] { background: var(--morado-tenue); border-color: var(--morado); color: var(--morado); }
		.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
		.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
		.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

		.menu-movil { display: block; border-top: 1px solid var(--linea); background: var(--tarjeta); }
		.menu-movil[hidden] { display: none; }
		.menu-movil__in { padding: 4px 20px 16px; }
		.menu-movil a.menu-enlace {
			display: flex; align-items: center; justify-content: space-between;
			padding: 14px 2px; color: var(--tinta); text-decoration: none;
			font-weight: 600; font-size: 1.02rem; border-bottom: 1px solid var(--linea);
		}
		.menu-movil a.menu-enlace::after { content: "›"; color: var(--morado); font-size: 1.35rem; line-height: 1; }
		.menu-movil a.menu-enlace[aria-current="page"] { color: var(--morado); }
		.menu-movil .btn { width: 100%; justify-content: center; margin-top: 16px; }
		.menu-movil__datos {
			margin: 14px 0 0; font-size: .88rem; color: var(--tinta-2); line-height: 1.5; text-align: center;
		}
		.banda { padding: 44px 0; }
		.banda--fina { padding: 44px 0; }
		.barra {
			display: grid; grid-template-columns: repeat(3, 1fr);
			position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
			background: var(--tarjeta); border-top: 1px solid var(--linea);
			box-shadow: 0 -4px 24px rgba(23,21,26,.14);
			padding-bottom: env(safe-area-inset-bottom, 0px);
		}
		.barra a {
			display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
			min-height: 62px; font-size: 12px; font-weight: 700; text-decoration: none; color: var(--tinta);
			border-right: 1px solid var(--linea);
		}
		.barra a:last-child { border-right: 0; }
		.barra a:nth-child(1) { color: var(--morado); }
		.barra a:nth-child(2) { color: #0b7a3d; }
		.barra svg { width: 21px; height: 21px; fill: currentColor; }
	}

	@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

	/* Con cinco pestañas el menú de escritorio se queda justo entre 861 y
	   1100 px: la fila se partía en dos. Ahí se aprieta un poco y el número
	   de teléfono se queda solo con su icono, que sigue llamando igual. */
	@media (min-width: 861px) and (max-width: 1099px) {
		.cab__in { gap: 16px; }
		.nav { gap: 15px; }
		.nav a { font-size: .89rem; }
		.cab .tel span { display: none; }
		.cab .tel { padding-left: 10px; padding-right: 10px; }
	}

	/* ── Remate de sección ─────────────────────────────────────────
	   Ninguna sección debe acabar sin una salida. El cliente que llega
	   al final de un bloque y no ve por dónde preguntar, se va. */
	.remate {
		margin-top: clamp(26px, 3vw, 38px);
		padding: 20px 22px; border-radius: var(--radio);
		background: var(--morado-tenue);
		display: flex; flex-wrap: wrap; align-items: center;
		gap: 14px 22px; justify-content: space-between;
	}
	.remate p { margin: 0; max-width: 54ch; color: var(--tinta-2); font-size: .96rem; line-height: 1.55; }
	.remate p b { color: var(--tinta); }
	.remate .botones { display: flex; flex-wrap: wrap; gap: 10px; }
	.remate .btn { padding: 11px 20px; font-size: .95rem; }
	@media (max-width: 620px) {
		.remate { padding: 18px; }
		.remate .botones, .remate .btn { width: 100%; }
		.remate .btn { text-align: center; }
	}

	/* ── Rejillas sin huérfanos ────────────────────────────────────
	   auto-fit reparte por el ancho que quepa, y con cuatro tarjetas
	   eso da 3 + 1 en algunas resoluciones. Aquí se fijan a mano los
	   repartos que dividen exacto. Servicios son 12 tarjetas: 4, 3, 2 y 1
	   columnas dividen todas exacto, así que nunca queda una fila coja. */
	.rejilla, .res-rej, .garantias { grid-template-columns: 1fr; }

	@media (min-width: 540px) { .garantias { grid-template-columns: repeat(2, 1fr); } }
	@media (min-width: 640px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
	@media (min-width: 860px) { .res-rej { grid-template-columns: repeat(3, 1fr); } }
	@media (min-width: 940px) { .garantias { grid-template-columns: repeat(4, 1fr); } }
	@media (min-width: 960px) { .rejilla { grid-template-columns: repeat(3, 1fr); } }
	@media (min-width: 1400px) { .rejilla { grid-template-columns: repeat(4, 1fr); } }

	/* Botones flotantes: WhatsApp siempre a mano y volver arriba */
	.flota {
		position: fixed; z-index: 70;
		bottom: calc(16px + var(--hueco-barra, 0px));
		/* Pegados al borde derecho de la ventana. Antes se alineaban con la
		   columna de contenido y en pantallas anchas quedaban sueltos en
		   mitad del margen, sin apoyarse en nada. */
		right: max(16px, env(safe-area-inset-right, 0px));
		display: grid; gap: 10px; justify-items: center;
	}
	.flota a, .flota button {
		width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0;
		display: grid; place-items: center; cursor: pointer;
		box-shadow: 0 6px 22px rgba(23,21,26,.24);
	}
	.flota svg { width: 26px; height: 26px; display: block; }
	.flota .wa-flota { background: #0b7a3d; color: #fff; }
	.flota .wa-flota svg { fill: currentColor; }
	.flota .wa-flota:hover { background: #096533; }
	.flota .arriba {
		background: var(--tarjeta); color: var(--tinta); border: 1px solid var(--linea);
		opacity: 0; transform: translateY(6px); pointer-events: none;
		transition: opacity .2s ease, transform .2s ease;
	}
	.flota .arriba[data-visible="si"] { opacity: 1; transform: none; pointer-events: auto; }
	.flota .arriba svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
	.flota :is(a, button):focus-visible { outline: 3px solid var(--morado); outline-offset: 3px; }
	/* Donde ya hay barra inferior con WhatsApp, no lo repetimos */
	@media (max-width: 860px) { .flota--con-barra .wa-flota { display: none; } }
	@media (prefers-reduced-motion: reduce) { .flota .arriba { transition: none; } }
	/* En móvil el contenido ocupa todo el ancho, así que el botón flotante
	   se queda pequeño y translúcido: se ve, se pulsa, y no tapa. */
	@media (max-width: 860px) {
		.flota a, .flota button { width: 44px; height: 44px; }
		.flota svg { width: 22px; height: 22px; }
		.flota .arriba { background: color-mix(in srgb, var(--tarjeta) 88%, transparent); backdrop-filter: blur(6px); }
	}


	/* En móvil, la cabecera se retira al llegar al pie: allí ya está el
	   mismo logo y los mismos enlaces, y verlos dos veces confunde.
	   Los botones de contacto no se pierden: siguen en la barra inferior. */
	@media (max-width: 860px) {
		.cab { transition: transform .25s ease; will-change: transform; }
		.cab[data-oculta="si"] { transform: translateY(-100%); }
	}
	@media (prefers-reduced-motion: reduce) { .cab { transition: none; } }

	/* Deja sitio a los botones flotantes: en móvil el copyright llegaba
	   justo debajo del botón de subir y se leía cortado. */
	@media (max-width: 860px) {
		.pie-legal__in { padding-inline: 72px; }
	}


/* =====================================================================
   Índice de servicios
   ===================================================================== */

/* ── Índice de servicios ─────────────────────────────────────
	   Prefijo serv- en todo lo nuevo. La hoja de la portada ya trae
	   .banda, .limite, .btn, .remate, .seccion__tit y compañía. */
	.serv-cima { padding: clamp(38px, 5vw, 64px) 0 clamp(30px, 4vw, 46px); background: var(--papel); border-bottom: 1px solid var(--linea); }
	.serv-cima .limite > * { text-align: center; }
	.serv-cima h1 {
		font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); line-height: 1.08;
		font-weight: 700; margin: 0 auto 14px; text-wrap: balance; max-width: 20ch;
	}
	.serv-cima h1 em { font-style: normal; color: var(--morado-tit); }
	.serv-cima > .limite > p { color: var(--tinta-2); font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem); max-width: 66ch; margin: 0 auto 24px; line-height: 1.65; }
	.serv-cima .botones { justify-content: center; }

	/* Índice de anclas: bueno para el cliente y para Google */
	.serv-indice { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 30px 0 0; padding: 0; list-style: none; }
	@media (min-width: 700px)  { .serv-indice { grid-template-columns: repeat(2, 1fr); gap: 10px 20px; } }
	@media (min-width: 1000px) { .serv-indice { grid-template-columns: repeat(4, 1fr); } }
	.serv-indice a {
		display: flex; align-items: center; gap: 10px; text-decoration: none;
		color: var(--tinta); font-weight: 500; font-size: .95rem; text-align: left;
		padding: 12px 15px; border: 1px solid var(--linea); border-radius: 10px;
		background: var(--tarjeta); transition: border-color .16s ease, transform .16s ease;
	}
	.serv-indice a:hover { border-color: var(--marca); transform: translateY(-1px); }
	.serv-indice a::before { content: "→"; color: var(--morado); font-weight: 700; flex: 0 0 auto; }

	/* Familias */
	.serv-familia { margin: 0 0 clamp(34px, 4vw, 52px); scroll-margin-top: 90px; }
	.serv-familia:last-of-type { margin-bottom: 0; }

	/* Seis tarjetas: 1, 2 o 3 columnas. Nunca sobra una. */
	.serv-rej { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 24px 0 0; }
	@media (min-width: 720px)  { .serv-rej { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
	@media (min-width: 1040px) { .serv-rej--3 { grid-template-columns: repeat(3, 1fr); } }
	/* Con cuatro o con tres, se para en dos columnas o se van a tres justas. */
	@media (min-width: 1040px) { .serv-rej--tres { grid-template-columns: repeat(3, 1fr); } }

	.serv-tarjeta {
		background: var(--tarjeta); border: 1px solid var(--linea);
		border-radius: var(--radio); padding: 22px 22px 24px;
		display: flex; flex-direction: column; scroll-margin-top: 90px;
	}
	.serv-tarjeta h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; }
	.serv-tarjeta > p { margin: 0 0 14px; color: var(--tinta-2); font-size: .95rem; line-height: 1.6; }
	.serv-tarjeta ul { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 7px; font-size: .91rem; color: var(--tinta-2); }
	.serv-tarjeta ul li { position: relative; padding-left: 22px; line-height: 1.5; }
	.serv-tarjeta ul li::before {
		content: ""; position: absolute; left: 1px; top: .34em;
		width: 11px; height: 7px; border-left: 2px solid var(--marca);
		border-bottom: 2px solid var(--marca); transform: rotate(-45deg);
	}
	.serv-pie {
		margin: auto 0 0; padding-top: 13px; border-top: 1px solid var(--linea);
		display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
		font-size: .88rem; color: var(--tinta-2); line-height: 1.5;
	}
	.serv-precio { font-weight: 700; color: var(--morado-tit); font-size: 1rem; font-variant-numeric: tabular-nums; }
	.serv-pie a { color: var(--morado); font-weight: 600; margin-left: auto; text-decoration: none; }
	.serv-pie a:hover { text-decoration: underline; }

	/* Banda suave para dar ritmo entre bloques blancos */
	.serv-suave { background: var(--papel); }

	/* Tabla de precios de móvil: los únicos cerrados hoy */
	.serv-precios { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
	@media (min-width: 700px)  { .serv-precios { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
	@media (min-width: 1040px) { .serv-precios { grid-template-columns: repeat(4, 1fr); } }
	.serv-precios li {
		background: var(--tarjeta); border: 1px solid var(--linea);
		border-left: 3px solid var(--marca); border-radius: var(--radio); padding: 16px 18px;
	}
	.serv-precios b { display: block; font-size: 1.5rem; color: var(--morado-tit); line-height: 1.1; font-variant-numeric: tabular-nums; }
	.serv-precios span { display: block; font-size: .92rem; color: var(--tinta-2); margin-top: 5px; line-height: 1.5; }
	.serv-precios em { font-style: normal; display: block; font-weight: 600; color: var(--tinta); font-size: .95rem; margin-top: 2px; }

	/* Cierre */
	.serv-cierre { background: var(--marca-hondo); color: #fff; text-align: center; }
	.serv-cierre h2 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); margin: 0 0 10px; text-wrap: balance; }
	.serv-cierre p { color: rgba(255,255,255,.85); max-width: 60ch; margin: 0 auto 22px; }
	.serv-cierre .botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
	.serv-cierre .btn--linea { border-color: rgba(255,255,255,.55); color: #fff; }
	.serv-cierre .btn--linea:hover { background: rgba(255,255,255,.12); color: #fff; }


/* =====================================================================
   Empresas y paquetes
   ===================================================================== */

/* ── Página de empresas ─────────────────────────────────────
	   Prefijo emp- en todo lo nuevo. La hoja de la portada ya trae
	   .banda, .limite, .btn, .paq-*, .seccion__tit y compañía. */
	.emp-cima { padding: clamp(38px, 5vw, 64px) 0 clamp(30px, 4vw, 46px); background: var(--papel); border-bottom: 1px solid var(--linea); }
	.emp-cima h1 {
		font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); line-height: 1.08;
		font-weight: 700; margin: 0 0 14px; text-wrap: balance; max-width: 20ch;
	}
	.emp-cima h1 em { font-style: normal; color: var(--morado-tit); }
	/* Toda la cabecera centrada, como el resto de titulares de la web. */
	.emp-cima .limite > * { text-align: center; }
	.emp-cima h1 { margin-left: auto; margin-right: auto; }
	.emp-cima > .limite > p { margin-left: auto; margin-right: auto; }
	.emp-cima .botones { justify-content: center; }
	.emp-datos li { text-align: left; }
	.emp-cima > .limite > p { color: var(--tinta-2); font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem); max-width: 62ch; margin: 0 0 24px; line-height: 1.6; }

	.emp-datos { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; }
	@media (min-width: 620px) { .emp-datos { grid-template-columns: repeat(2, 1fr); gap: 18px 26px; } }
	@media (min-width: 960px) { .emp-datos { grid-template-columns: repeat(4, 1fr); } }
	.emp-datos li { border-top: 2px solid var(--marca); padding-top: 12px; }
	.emp-datos b { display: block; font-size: 1.02rem; }
	.emp-datos span { display: block; color: var(--tinta-2); font-size: .89rem; margin-top: 2px; line-height: 1.45; }

	/* Índice de servicios: enlaces internos, buenos para el cliente y para Google */
	.emp-indice { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
	@media (min-width: 700px) { .emp-indice { grid-template-columns: repeat(2, 1fr); gap: 10px 22px; } }
	@media (min-width: 1000px) { .emp-indice { grid-template-columns: repeat(3, 1fr); } }
	.emp-indice a {
		display: flex; align-items: center; gap: 10px; text-decoration: none;
		color: var(--tinta); font-weight: 500; font-size: .96rem;
		padding: 11px 14px; border: 1px solid var(--linea); border-radius: 10px;
		background: var(--tarjeta); transition: border-color .16s ease, transform .16s ease;
	}
	.emp-indice a:hover { border-color: var(--marca); transform: translateY(-1px); }
	.emp-indice a::before { content: "→"; color: var(--morado); font-weight: 700; flex: 0 0 auto; }

	/* Familias de servicios */
	.emp-familia { margin: 0 0 clamp(34px, 4vw, 52px); }
	.emp-familia:last-child { margin-bottom: 0; }
	.emp-familia > h2 {
		font-size: clamp(1.3rem, 1.12rem + .8vw, 1.7rem); font-weight: 700; margin: 0 0 4px;
		color: var(--morado-tit); display: flex; align-items: center; gap: 10px;
	}
	.emp-familia > h2::before { content: ""; width: 4px; height: 1.05em; border-radius: 3px; background: var(--marca); flex: 0 0 auto; }
	.emp-familia > h2 { justify-content: center; }
	.emp-familia > p { color: var(--tinta-2); margin: 0 auto 20px; max-width: 66ch; text-align: center; }

	.emp-rejilla { display: grid; grid-template-columns: 1fr; gap: 16px; }
	@media (min-width: 860px) { .emp-rejilla { grid-template-columns: 1fr 1fr; gap: 18px; } }

	.emp-serv {
		background: var(--tarjeta); border: 1px solid var(--linea);
		border-radius: var(--radio); padding: 22px 22px 24px; scroll-margin-top: 90px;
		display: flex; flex-direction: column;
	}
	.emp-serv h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; }
	.emp-serv > p { margin: 0 0 14px; color: var(--tinta-2); font-size: .95rem; line-height: 1.6; }
	.emp-serv ul { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 7px; font-size: .91rem; color: var(--tinta-2); }
	.emp-serv ul li { position: relative; padding-left: 22px; line-height: 1.5; }
	.emp-serv ul li::before {
		content: ""; position: absolute; left: 1px; top: .34em;
		width: 11px; height: 7px; border-left: 2px solid var(--marca);
		border-bottom: 2px solid var(--marca); transform: rotate(-45deg);
	}
	.emp-serv .emp-cuando {
		margin: auto 0 0; padding-top: 13px; border-top: 1px solid var(--linea);
		font-size: .87rem; color: var(--tinta-2); line-height: 1.55;
	}
	.emp-serv .emp-cuando b { color: var(--morado-tit); }

	/* Cómo trabajamos */
	.emp-pasos { counter-reset: paso; display: grid; grid-template-columns: 1fr; gap: 18px; margin: 24px 0 0; padding: 0; list-style: none; }
	@media (min-width: 700px) { .emp-pasos { grid-template-columns: repeat(2, 1fr); gap: 22px 26px; } }
	@media (min-width: 1060px) { .emp-pasos { grid-template-columns: repeat(4, 1fr); } }
	.emp-pasos li { counter-increment: paso; }
	.emp-pasos li::before {
		content: counter(paso); display: grid; place-items: center;
		width: 34px; height: 34px; border-radius: 50%;
		background: var(--marca); color: #fff; font-weight: 700; font-size: .95rem;
		margin: 0 0 11px;
	}
	.emp-pasos b { display: block; margin-bottom: 4px; }
	.emp-pasos span { color: var(--tinta-2); font-size: .92rem; line-height: 1.55; }

	/* Bandas con fondo suave, para dar ritmo entre bloques blancos. */
	.emp-suave { background: var(--papel); }

	/* Síntomas: seis tarjetas, o sea 1, 2 o 3 columnas. Nunca sobra una. */
	.emp-sintomas { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
	@media (min-width: 700px)  { .emp-sintomas { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
	@media (min-width: 1040px) { .emp-sintomas { grid-template-columns: repeat(3, 1fr); } }
	.emp-sintomas a {
		display: block; height: 100%; text-decoration: none; color: inherit;
		background: var(--tarjeta); border: 1px solid var(--linea);
		border-radius: var(--radio); padding: 17px 18px 18px;
		transition: border-color .16s ease, transform .16s ease;
	}
	.emp-sintomas a:hover { border-color: var(--marca); transform: translateY(-2px); }
	.emp-sintomas b { display: block; font-size: .99rem; margin-bottom: 5px; }
	.emp-sintomas span { display: block; color: var(--tinta-2); font-size: .89rem; line-height: 1.55; }

	/* Caso */
	.emp-caso {
		margin: 22px 0 0; padding: 24px 26px;
		background: var(--tarjeta); border: 1px solid var(--linea);
		border-left: 4px solid var(--marca); border-radius: var(--radio);
	}
	.emp-caso p { margin: 0 0 12px; color: var(--tinta-2); line-height: 1.7; }
	.emp-caso p:last-child { margin-bottom: 0; }
	.emp-caso b { color: var(--tinta); }
	.emp-caso__cierre { font-weight: 500; color: var(--tinta) !important; }

	/* Alcance: tres bloques, así que o tres columnas o una. Con dos
	   quedaría uno solo en la segunda fila. */
	.emp-alcance { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 24px 0 0; padding: 0; list-style: none; }
	@media (min-width: 900px) { .emp-alcance { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
	.emp-alcance li { border-top: 2px solid var(--marca); padding-top: 14px; }
	.emp-alcance b { display: block; font-size: 1.02rem; margin-bottom: 4px; }
	.emp-alcance span { color: var(--tinta-2); font-size: .93rem; line-height: 1.6; }

	/* Preguntas */
	.emp-faq { display: grid; gap: 10px; margin: 22px 0 0; }
	.emp-faq details { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--tarjeta); }
	.emp-faq summary {
		cursor: pointer; list-style: none; padding: 16px 18px;
		font-weight: 600; font-size: 1rem; display: flex; gap: 12px; align-items: flex-start;
	}
	.emp-faq summary::-webkit-details-marker { display: none; }
	.emp-faq summary::after { content: "+"; margin-left: auto; color: var(--morado); font-weight: 700; font-size: 1.25rem; line-height: 1; flex: 0 0 auto; }
	.emp-faq details[open] summary::after { content: "−"; }
	.emp-faq details > div { padding: 0 18px 16px; color: var(--tinta-2); font-size: .95rem; line-height: 1.65; }
	.emp-faq details > div p { margin: 0 0 10px; }
	.emp-faq details > div p:last-child { margin-bottom: 0; }

	/* Formulario de empresa. Reutiliza .campo y .contacto-caja de la
	   portada; solo hace falta la rejilla propia. */
	.emp-form-rej { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: stretch; margin-top: 24px; }
	@media (min-width: 900px) { .emp-form-rej { grid-template-columns: 1.35fr .65fr; gap: 34px; } }
	.emp-form { display: grid; gap: 16px; }
	.emp-campos { display: grid; grid-template-columns: 1fr; gap: 14px; }
	@media (min-width: 620px) { .emp-campos { grid-template-columns: 1fr 1fr; } }
	.emp-campos .campo--ancho { grid-column: 1 / -1; }
	.emp-form textarea { min-height: 120px; resize: vertical; }
	.emp-form .consent a { color: var(--morado); font-weight: 600; }

	/* Cierre */
	.emp-cierre { background: var(--marca-hondo); color: #fff; text-align: center; }
	.emp-cierre h2 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem); margin: 0 0 10px; text-wrap: balance; }
	.emp-cierre p { color: rgba(255,255,255,.85); max-width: 58ch; margin: 0 auto 22px; }
	.emp-cierre .botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
	.emp-cierre .btn--linea { border-color: rgba(255,255,255,.55); color: #fff; }
	.emp-cierre .btn--linea:hover { background: rgba(255,255,255,.12); color: #fff; }


/* =====================================================================
   Fibra y móvil

   AVISO: esta paleta era un :root suelto. Al juntar las once hojas en una,
   se quedó DESPUÉS de la paleta general y, al tener la misma
   especificidad, le pisaba los colores y la tipografía base a TODA la web:
   --tinta pasaba de #222629 a #17151a y el body bajaba de 16,5 a 16 px en
   las dieciséis páginas. Ahora va colgada de body.et-fibra, que solo lleva
   la página de fibra, así que el comparador conserva sus colores y el resto
   de la web recupera los suyos.
   ===================================================================== */

body.et-fibra {
		--papel:#f6f4f2; --tarjeta:#fff; --tinta:#17151a; --tinta-2:#5d5563; --tinta-3:#746d7a;
		--linea:#e5dfe7; --linea-2:#cec4d2; --morado:#7b2d8e; --morado-tit:#7b2d8e; --morado-tenue:#f4ecf6;
		--marca: #7b2d8e;
		--marca-hondo: #4b1c51;
		--digi:#002bff; --digi-tenue:#eaeeff;
		--o2:#0019a5; --o2-tenue:#e9ebf7;
		--ok:#15683c; --ok-tenue:#e9f6ee; --aviso:#7d5300; --aviso-tenue:#fdf4e3;
		--radio:14px; --sombra:0 1px 2px rgba(23,21,26,.05), 0 10px 30px -14px rgba(23,21,26,.22);
	}
	@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.et-fibra {
		--papel:#151318; --tarjeta:#1e1a22; --tinta:#f2eef4; --tinta-2:#b3aab9; --tinta-3:#8d8494;
		--linea:#302a36; --linea-2:#463d4e; --morado:#a86fc0; --morado-tit:#8f4fae; --morado-tenue:#241b28;
		--marca: #7b2d8e;
		--marca-hondo: #4b1c51;
		--digi:#8fa2ff; --digi-tenue:#171b33; --o2:#9fb0e8; --o2-tenue:#151830;
		--ok:#7fd6a4; --ok-tenue:#1b2f24; --aviso:#f0c369; --aviso-tenue:#322718;
		--sombra:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
	} }
	:root[data-theme="dark"] body.et-fibra {
		--papel:#151318; --tarjeta:#1e1a22; --tinta:#f2eef4; --tinta-2:#b3aab9; --tinta-3:#8d8494;
		--linea:#302a36; --linea-2:#463d4e; --morado:#a86fc0; --morado-tit:#8f4fae; --morado-tenue:#241b28;
		--marca: #7b2d8e;
		--marca-hondo: #4b1c51;
		--digi:#8fa2ff; --digi-tenue:#171b33; --o2:#9fb0e8; --o2-tenue:#151830;
		--ok:#7fd6a4; --ok-tenue:#1b2f24; --aviso:#f0c369; --aviso-tenue:#322718;
		--sombra:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
	}

	body.et-fibra { background:var(--papel); color:var(--tinta); margin:0; line-height:1.62;
		font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px;
		-webkit-font-smoothing:antialiased; }
	body.et-fibra h1, body.et-fibra h2, body.et-fibra h3 { font-family:"Familjen Grotesk","Public Sans",sans-serif; text-wrap:balance; }
	body.et-fibra h1 { font-size:clamp(2rem,1.35rem + 2.6vw,3.1rem); line-height:1.06; font-weight:700; margin:0 0 14px; letter-spacing:-.018em; }
	body.et-fibra h2 { font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem); font-weight:700; margin:0 0 8px; letter-spacing:-.012em; }
	body.et-fibra h3 { font-size:1.05rem; font-weight:600; margin:0 0 6px; }
	body.et-fibra p { margin:0 0 14px; }
	body.et-fibra .eyebrow { font-family:"Roboto Mono",monospace; font-size:.73rem; letter-spacing:.14em;
		text-transform:uppercase; color:var(--tinta-3); margin:0 0 10px; }
	body.et-fibra .banda--claro { background:var(--tarjeta); border-block:1px solid var(--linea); }

	/* Cabecera */
	body.et-fibra .cima { padding:clamp(34px,4.5vw,60px) 0 clamp(26px,3vw,38px); }
	body.et-fibra .cima p.lead { font-size:clamp(1.06rem,.98rem + .4vw,1.28rem); color:var(--tinta-2); max-width:56ch; }
	body.et-fibra .cima h1 em { font-style:normal; color:var(--morado-tit); }
	body.et-fibra .cima .limite > * { text-align:center; }
	body.et-fibra .cima h1, body.et-fibra .cima .lead { margin-left:auto; margin-right:auto; }
	body.et-fibra .cima .botones { justify-content:center; }
	body.et-fibra .banda--morada > .limite > h2,
	body.et-fibra .banda--morada > .limite > .eyebrow,
	body.et-fibra .banda--morada > .limite > .banda--morada__pie { text-align:center; margin-left:auto; margin-right:auto; }

	/* Simulador */
	body.et-fibra .sim { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(18px,2.4vw,30px); align-items:stretch; }
	body.et-fibra .panel { background:var(--tarjeta); border:1px solid var(--linea); border-radius:var(--radio);
		padding:clamp(20px,2.4vw,28px); box-shadow:var(--sombra); }
	body.et-fibra #sim { display:flex; flex-direction:column; justify-content:center; }
	body.et-fibra fieldset { border:0; padding:0; margin:0 0 26px; }
	body.et-fibra fieldset:last-of-type { margin-bottom:0; }
	body.et-fibra legend { font-weight:600; font-size:clamp(1.02rem,.96rem + .28vw,1.16rem); padding:0; margin:0 0 13px; }
	body.et-fibra .pills { display:flex; flex-wrap:wrap; gap:8px; }
	body.et-fibra .pill input { position:absolute; opacity:0; width:0; height:0; }
	body.et-fibra .pills { gap:10px; }
	body.et-fibra .pill span { display:inline-block; padding:13px 22px; border:1px solid var(--linea-2); border-radius:999px;
		font-size:clamp(.98rem,.94rem + .2vw,1.06rem); cursor:pointer;
		transition:background .15s, border-color .15s, color .15s; user-select:none; }
	body.et-fibra .pill input:checked + span { background:var(--marca); border-color:var(--morado); color:#fff; font-weight:600; }
	body.et-fibra .pill input:focus-visible + span { outline:3px solid var(--morado); outline-offset:2px; }
	body.et-fibra .pill span:hover { border-color:var(--morado); }
	body.et-fibra .duo { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
	body.et-fibra .sim-campo { display:block; font-weight:600; font-size:clamp(1.02rem,.96rem + .28vw,1.16rem); margin:0 0 9px; }
	/* El tipo «tel» faltaba en esta lista desde el prototipo, así que el campo
	   del teléfono del formulario de alta salía sin recuadro, como texto
	   suelto. Se añaden también email y search por si algún día se usan: la
	   alternativa es que el próximo campo nuevo vuelva a salir desnudo. */
	body.et-fibra input[type=text], body.et-fibra input[type=number],
	body.et-fibra input[type=tel], body.et-fibra input[type=email],
	body.et-fibra input[type=search] { width:100%; box-sizing:border-box; padding:15px 17px; font:inherit;
		font-size:clamp(17px,16px + .2vw,19px); font-weight:600;
		border:1px solid var(--linea-2); border-radius:12px; background:var(--papel); color:inherit; }
	body.et-fibra input:focus-visible { outline:3px solid var(--morado); outline-offset:2px; border-color:var(--morado); }
	body.et-fibra .pista { font-size:.88rem; color:var(--tinta-3); margin:8px 0 0; line-height:1.5; }

	/* Resultados */
	body.et-fibra .sim-res { display:flex; flex-direction:column; gap:14px; }
	body.et-fibra .sim-res .oferta:last-child { flex:1 1 auto; }
	body.et-fibra .oferta { border:1px solid var(--linea); border-radius:var(--radio); background:var(--tarjeta);
		padding:20px 22px; box-shadow:var(--sombra); }
	body.et-fibra .oferta[data-op="digi"] { border-top:4px solid var(--digi); }
	body.et-fibra .oferta[data-op="o2"] { border-top:4px solid var(--o2); }
	body.et-fibra .oferta__cab { display:block; }
	body.et-fibra .oferta__cab .op-nombre { display:block; margin-bottom:2px; }
	body.et-fibra .op-nombre { font-family:"Familjen Grotesk",sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:-.01em; }
	body.et-fibra .oferta[data-op="digi"] .op-nombre { color:var(--digi); }
	body.et-fibra .oferta[data-op="o2"] .op-nombre { color:var(--o2); }
	body.et-fibra .sim-precio { font-family:"Familjen Grotesk",sans-serif; font-weight:700; font-size:2.1rem; line-height:1;
		font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
	body.et-fibra .sim-precio small { font-size:.92rem; font-weight:500; color:var(--tinta-2); letter-spacing:0; }
	body.et-fibra .desglose { list-style:none; margin:14px 0 0; padding:0; font-size:.9rem; color:var(--tinta-2); }
	body.et-fibra .desglose li { display:flex; justify-content:space-between; gap:12px; padding:5px 0; border-bottom:1px dashed var(--linea); }
	body.et-fibra .desglose li:last-child { border-bottom:0; }
	body.et-fibra .desglose b { color:var(--tinta); font-weight:600; font-variant-numeric:tabular-nums; }
	body.et-fibra .permanencia {
		display:flex; align-items:center; justify-content:space-between; gap:12px;
		margin:12px 0 0; padding:9px 14px; border-radius:10px;
		background:var(--papel); font-size:.9rem;
	}
	body.et-fibra .permanencia span { color:var(--tinta-2); }
	body.et-fibra .permanencia b { font-weight:600; }
	body.et-fibra .permanencia b[data-ata="no"] { color:var(--ok); }

	body.et-fibra .ahorro { margin-top:14px; padding:11px 14px; border-radius:10px; font-size:.92rem; font-weight:600; }
	body.et-fibra .ahorro--si { background:var(--ok-tenue); color:var(--ok); }
	body.et-fibra .ahorro--no { background:var(--aviso-tenue); color:var(--aviso); }
	body.et-fibra .cobertura { margin-top:14px; padding:11px 14px; border-radius:10px; background:var(--morado-tenue);
		color:var(--tinta-2); font-size:.87rem; }
	body.et-fibra .cobertura b { color:var(--morado); }

	/* Tablas */
	body.et-fibra .tabla-caja { overflow-x:auto; border:1px solid var(--linea); border-radius:var(--radio); background:var(--tarjeta); margin:16px 0 0; }
	body.et-fibra table { border-collapse:collapse; width:100%; font-size:.9rem; }
	body.et-fibra th, body.et-fibra td { text-align:left; padding:10px 18px; border-bottom:1px solid var(--linea); }
	body.et-fibra thead th { font-family:"Roboto Mono",monospace; font-size:.71rem; letter-spacing:.1em; text-transform:uppercase;
		color:var(--tinta-3); font-weight:500; border-bottom:1px solid var(--linea-2); }
	body.et-fibra tbody tr:last-child td { border-bottom:0; }
	body.et-fibra td.num { font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
	body.et-fibra .comparativa { display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; align-items:stretch; }
	body.et-fibra .comparativa .tabla-caja { margin:0; display:flex; flex-direction:column; }
	body.et-fibra .comparativa .tabla-caja table { align-self:flex-start; width:100%; }
	body.et-fibra .comparativa h3 { margin:0 0 2px; }

	/* Banda morada de tarifas */
	body.et-fibra .banda--morada { background:var(--marca-hondo); color:#fff; }
	body.et-fibra .banda--morada h2, body.et-fibra .banda--morada h3 { color:#fff; }
	body.et-fibra .banda--morada .eyebrow { color:rgba(255,255,255,.62); }
	body.et-fibra .banda--morada__pie { color:rgba(255,255,255,.84); }
	body.et-fibra .banda--morada .op-tit { display:flex; align-items:center; gap:9px; font-size:1.1rem; }
	body.et-fibra .banda--morada .op-tit::before { content:""; width:4px; height:1.05em; border-radius:3px; background:#fff; opacity:.55; }
	body.et-fibra .banda--morada .tabla-caja { border-color:transparent; color:var(--tinta); }
	body.et-fibra .banda--morada .tabla-caja th, body.et-fibra .banda--morada .tabla-caja td { color:inherit; }
	body.et-fibra .banda--morada .tabla-caja thead th { color:var(--tinta-3); }

	/* Sin scroll horizontal en móvil */

	/* Etiqueta de operador dentro de cada tabla (solo movil) */
	body.et-fibra .op-etq { display:none; }
	@media (max-width:820px) {
		body.et-fibra .comparativa { grid-template-columns:1fr; gap:14px; }
		body.et-fibra .comparativa > .op-tit { display:none; }
		body.et-fibra .comparativa .tabla-caja { display:block; overflow:hidden; }
		body.et-fibra .op-etq {
			display:block; font-family:"Roboto Mono",monospace; font-size:.72rem;
			letter-spacing:.12em; text-transform:uppercase; font-weight:500;
			color:#fff; padding:7px 14px;
		}
		body.et-fibra .op-etq--digi { background:#002bff; }
		body.et-fibra .op-etq--o2 { background:#0019a5; }
		body.et-fibra .banda--morada .tabla-caja { border-color:transparent; }
	}

	@media (max-width:560px) {
		body.et-fibra .tabla-caja { overflow-x:visible; }
		body.et-fibra th, body.et-fibra td { padding:10px 13px; }
		body.et-fibra th:last-child, body.et-fibra td:last-child { text-align:right; }
		body.et-fibra td:first-child { padding-right:0; }
		body.et-fibra .desglose li { flex-wrap:wrap; }
	}

	/* Formulario */
	body.et-fibra .sim-form-rej { display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
	body.et-fibra .sim-form-rej .ancho { grid-column:1/-1; }
	body.et-fibra select, body.et-fibra textarea { width:100%; box-sizing:border-box; padding:11px 14px; font:inherit; font-size:16px;
		border:1px solid var(--linea-2); border-radius:10px; background:var(--papel); color:inherit; }
	body.et-fibra textarea { min-height:90px; resize:vertical; }
	body.et-fibra .btn--contratar {
		display:flex; align-items:center; justify-content:center; gap:9px;
		width:100%; margin-top:16px; padding:14px 20px; border-radius:999px;
		background:#0b7a3d; color:#fff; font-weight:600; font-size:1rem;
		text-decoration:none; box-sizing:border-box;
	}
	body.et-fibra .btn--contratar:hover { background:#096533; }
	body.et-fibra .btn--contratar svg { width:20px; height:20px; fill:currentColor; flex:0 0 auto; }
	/* Esta regla estaba sin acotar y pintaba de blanco también los botones
	   de contorno, que van sobre fondo claro: ilegibles. Ahora solo toca
	   los rellenos, que es para lo que estaba. */
	@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) body.et-fibra .btn--llamar { color:#fff; } }
	/* Diez tablas seguidas en un móvil son mucho scroll. Ahí van plegadas
	   detrás de un botón; en ordenador el desplegable ni se ve. */
	body.et-fibra .plegable-tablas > summary {
		display:none; cursor:pointer; list-style:none;
		margin-top:20px; padding:14px 18px; border-radius:999px;
		border:1px solid rgba(255,255,255,.45); background:transparent;
		color:#fff; font-weight:600; text-align:center;
	}
	body.et-fibra .plegable-tablas > summary::-webkit-details-marker { display:none; }
	body.et-fibra .plegable-tablas > summary::after { content:" ▾"; }
	body.et-fibra .plegable-tablas[open] > summary::after { content:" ▴"; }
	@media (max-width:820px) { body.et-fibra .plegable-tablas > summary { display:block; } }

	body.et-fibra .pie-tabla { margin:0; padding:10px 18px 12px; font-size:.78rem; line-height:1.45; color:var(--tinta-3); border-top:1px solid var(--linea); }
	body.et-fibra .a-consultar { color:var(--tinta-3); font-weight:500; font-style:italic; }
	body.et-fibra .sin-opcion { margin:10px 0 0; font-size:.86rem; line-height:1.5; color:var(--tinta-2);
		background:var(--aviso-tenue); border-radius:10px; padding:10px 13px; }
	body.et-fibra .sin-opcion b { color:var(--aviso); }
	body.et-fibra .matiz { font-weight:500; color:inherit; opacity:.82; }
	body.et-fibra .legal { font-size:.8rem; color:var(--tinta-3); line-height:1.55; margin:14px 0 0; }

	body.et-fibra .nota { border-radius:var(--radio); padding:16px 20px; margin:20px 0 0;
		background:var(--aviso-tenue); border:1px solid color-mix(in srgb, var(--aviso) 32%, transparent); }
	body.et-fibra .nota p { margin:0; font-size:.92rem; }
	body.et-fibra .nota-tit { font-family:"Roboto Mono",monospace; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
		color:var(--aviso); font-weight:500; display:block; margin-bottom:6px; }
	body.et-fibra .sello { font-family:"Roboto Mono",monospace; font-size:.76rem; color:var(--tinta-3); margin:14px 0 0; }

	@media (max-width:820px) {
		body.et-fibra .sim,
		body.et-fibra .sim-form-rej,
		body.et-fibra .duo { grid-template-columns:1fr; }
		body.et-fibra .sim-res .oferta:last-child { flex:0 0 auto; }
	}
	@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }

	/* ── Remate de sección: ninguna acaba sin salida ─────────────── */
	body.et-fibra .remate {
		margin-top: clamp(26px, 3vw, 38px);
		padding: 20px 22px; border-radius: var(--radio);
		background: var(--morado-tenue);
		display: flex; flex-wrap: wrap; align-items: center;
		gap: 14px 22px; justify-content: space-between;
	}
	body.et-fibra .remate p { margin: 0; max-width: 54ch; color: var(--tinta-2); font-size: .96rem; line-height: 1.55; }
	body.et-fibra .remate p b { color: var(--tinta); }
	body.et-fibra .remate .botones { display: flex; flex-wrap: wrap; gap: 10px; }
	body.et-fibra .remate .btn { padding: 11px 20px; font-size: .95rem; }
	/* Sobre banda morada, el fondo claro no vale */
	/* Sobre la banda morada, el remate iba de blanco translúcido y se
	   confundía con el fondo. Va como las tablas: tarjeta blanca sobre el
	   morado, y los botones en colores que no compiten con la banda. */
	body.et-fibra .banda--morada .remate, body.et-fibra .remate--claro {
		background: var(--tarjeta);
		/* El borde se calcula desde la tinta, así se ve tanto sobre la
		   tarjeta clara como sobre la oscura del modo noche. */
		border: 1px solid color-mix(in srgb, var(--tinta) 24%, transparent);
		box-shadow: var(--sombra);
	}
	body.et-fibra .banda--morada .remate p, body.et-fibra .remate--claro p { color: var(--tinta-2); }
	body.et-fibra .banda--morada .remate p b, body.et-fibra .remate--claro p b { color: var(--tinta); }
	body.et-fibra .banda--morada .remate .btn--linea, body.et-fibra .remate--claro .btn--linea {
		border-color: var(--marca); color: var(--morado);
	}
	body.et-fibra .banda--morada .remate .btn--linea:hover, body.et-fibra .remate--claro .btn--linea:hover {
		background: var(--marca); color: #fff;
	}
	@media (max-width: 620px) {
		body.et-fibra .remate { padding: 18px; }
		body.et-fibra .remate .botones, body.et-fibra .remate .btn { width: 100%; }
		body.et-fibra .remate .btn { text-align: center; }
	}

	/* Botones flotantes: WhatsApp siempre a mano y volver arriba */
	body.et-fibra .flota {
		position: fixed; z-index: 70;
		bottom: calc(16px + var(--hueco-barra, 0px));
		right: max(14px, calc((100vw - 1140px) / 2));
		display: grid; gap: 10px; justify-items: center;
	}
	body.et-fibra .flota a, body.et-fibra .flota button {
		width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0;
		display: grid; place-items: center; cursor: pointer;
		box-shadow: 0 6px 22px rgba(23,21,26,.24);
	}
	body.et-fibra .flota svg { width: 26px; height: 26px; display: block; }
	body.et-fibra .flota .wa-flota { background: #0b7a3d; color: #fff; }
	body.et-fibra .flota .wa-flota svg { fill: currentColor; }
	body.et-fibra .flota .wa-flota:hover { background: #096533; }
	body.et-fibra .flota .arriba {
		background: var(--tarjeta); color: var(--tinta); border: 1px solid var(--linea);
		opacity: 0; transform: translateY(6px); pointer-events: none;
		transition: opacity .2s ease, transform .2s ease;
	}
	body.et-fibra .flota .arriba[data-visible="si"] { opacity: 1; transform: none; pointer-events: auto; }
	body.et-fibra .flota .arriba svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
	body.et-fibra .flota :is(a, body.et-fibra button):focus-visible { outline: 3px solid var(--morado); outline-offset: 3px; }
	/* Donde ya hay barra inferior con WhatsApp, no lo repetimos */
	@media (max-width: 860px) { .flota--con-barra .wa-flota { display: none; } }
	@media (prefers-reduced-motion: reduce) { .flota .arriba { transition: none; } }
	/* En móvil el contenido ocupa todo el ancho, así que el botón flotante
	   se queda pequeño y translúcido: se ve, se pulsa, y no tapa. */
	@media (max-width: 860px) {
		body.et-fibra .flota a, body.et-fibra .flota button { width: 44px; height: 44px; }
		body.et-fibra .flota svg { width: 22px; height: 22px; }
		body.et-fibra .flota .arriba { background: color-mix(in srgb, var(--tarjeta) 88%, transparent); backdrop-filter: blur(6px); }
	}


/* =====================================================================
   Precios, plazos y garantía
   ===================================================================== */

.faq-lista { max-width: 100%; }
	/* ── Página de preguntas frecuentes ───────────────────── */
	.pag-cab { background: var(--tarjeta); border-bottom: 1px solid var(--linea); padding: clamp(28px, 4vw, 52px) 0 clamp(26px, 3.4vw, 44px); }
	.migas { font-size: .9rem; color: var(--tinta-2); margin: 0 0 14px; }
	.migas a { color: var(--tinta-2); }
	.migas a:hover { color: var(--morado); }
	.migas span { opacity: .5; margin: 0 7px; }
	.pag-cab h1 { font-size: clamp(1.85rem, 1.25rem + 2.4vw, 3rem); line-height: 1.08; font-weight: 700; margin: 0 0 14px; text-wrap: balance; }
	.pag-cab h1 em { font-style: normal; color: var(--morado-tit); }
	.pag-cab .limite > * { text-align: center; }
	.pag-cab h1, .pag-cab .pag-lead { margin-left: auto; margin-right: auto; }
	.pag-cab .botones { justify-content: center; }
	.pag-cab .migas { justify-content: center; }
	.pag-lead { font-size: clamp(1.04rem, .96rem + .34vw, 1.24rem); color: var(--tinta-2); max-width: 62ch; margin: 0; line-height: 1.6; }

	.faq-grupo { margin: 0 0 clamp(34px, 4vw, 52px); }
	.faq-grupo > h2, .faq-grupo > h3 {
		font-size: clamp(1.16rem, 1.02rem + .5vw, 1.45rem); font-weight: 700; margin: 0 0 6px;
		display: flex; align-items: center; gap: 10px;
	}
	.faq-grupo > h2::before, .faq-grupo > h3::before { content: ""; width: 4px; height: 1.05em; border-radius: 3px; background: var(--marca); flex: 0 0 auto; }
	.faq-grupo > p { color: var(--tinta-2); margin: 0 0 14px; max-width: 62ch; }

	.faq-cierre {
		background: var(--marca-hondo); color: #fff; border-radius: var(--radio);
		padding: clamp(24px, 3.4vw, 40px); text-align: center; margin-top: 8px;
	}
	.faq-cierre h2, .faq-cierre h3 { margin: 0 0 8px; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.85rem); color: #fff; }
	.faq-cierre p { margin: 0 auto 22px; max-width: 52ch; color: rgba(255,255,255,.85); line-height: 1.6; }
	.faq-cierre .botones { justify-content: center; }
	.faq-cierre .btn--llamar { background: #fff; color: var(--morado); }
	.faq-cierre .btn--llamar:hover { background: rgba(255,255,255,.88); }

	/* ── Remate de sección: ninguna acaba sin salida ─────────────── */
	.remate {
		margin-top: clamp(26px, 3vw, 38px);
		padding: 20px 22px; border-radius: var(--radio);
		background: var(--morado-tenue);
		display: flex; flex-wrap: wrap; align-items: center;
		gap: 14px 22px; justify-content: space-between;
	}
	.remate p { margin: 0; max-width: 54ch; color: var(--tinta-2); font-size: .96rem; line-height: 1.55; }
	.remate p b { color: var(--tinta); }
	.remate .botones { display: flex; flex-wrap: wrap; gap: 10px; }
	.remate .btn { padding: 11px 20px; font-size: .95rem; }
	/* Sobre banda morada, el fondo claro no vale */
	/* Sobre la banda morada, el remate iba de blanco translúcido y se
	   confundía con el fondo. Va como las tablas: tarjeta blanca sobre el
	   morado, y los botones en colores que no compiten con la banda. */
	.banda--morada .remate, .remate--claro {
		background: var(--tarjeta);
		/* El borde se calcula desde la tinta, así se ve tanto sobre la
		   tarjeta clara como sobre la oscura del modo noche. */
		border: 1px solid color-mix(in srgb, var(--tinta) 24%, transparent);
		box-shadow: var(--sombra);
	}
	.banda--morada .remate p, .remate--claro p { color: var(--tinta-2); }
	.banda--morada .remate p b, .remate--claro p b { color: var(--tinta); }
	.banda--morada .remate .btn--linea, .remate--claro .btn--linea {
		border-color: var(--marca); color: var(--morado);
	}
	.banda--morada .remate .btn--linea:hover, .remate--claro .btn--linea:hover {
		background: var(--marca); color: #fff;
	}
	@media (max-width: 620px) {
		.remate { padding: 18px; }
		.remate .botones, .remate .btn { width: 100%; }
		.remate .btn { text-align: center; }
	}

	/* ── Rejillas sin huérfanos ────────────────────────────────────
	   auto-fit reparte por el ancho que quepa, y con cuatro tarjetas
	   eso da 3 + 1 en algunas resoluciones. Aquí se fijan a mano los
	   repartos que dividen exacto: 4 → 2 → 1, y 6 → 3 → 2 → 1.
	   Así nunca queda una fila coja. */
	.rejilla, .res-rej, .tienda-cols, .garantias { grid-template-columns: 1fr; }

	@media (min-width: 540px) { .garantias { grid-template-columns: repeat(2, 1fr); } }
	@media (min-width: 560px) { .tienda-cols { grid-template-columns: repeat(2, 1fr); } }
	@media (min-width: 640px) { .rejilla { grid-template-columns: repeat(2, 1fr); } }
	@media (min-width: 860px) { .res-rej { grid-template-columns: repeat(3, 1fr); } }
	@media (min-width: 940px) { .garantias { grid-template-columns: repeat(4, 1fr); } }
	@media (min-width: 960px) { .rejilla { grid-template-columns: repeat(3, 1fr); } }
	@media (min-width: 1020px) { .tienda-cols { grid-template-columns: repeat(4, 1fr); } }

	/* Botones flotantes: WhatsApp siempre a mano y volver arriba */
	.flota {
		position: fixed; z-index: 70;
		bottom: calc(16px + var(--hueco-barra, 0px));
		right: max(14px, calc((100vw - 1140px) / 2));
		display: grid; gap: 10px; justify-items: center;
	}
	.flota a, .flota button {
		width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0;
		display: grid; place-items: center; cursor: pointer;
		box-shadow: 0 6px 22px rgba(23,21,26,.24);
	}
	.flota svg { width: 26px; height: 26px; display: block; }
	.flota .wa-flota { background: #0b7a3d; color: #fff; }
	.flota .wa-flota svg { fill: currentColor; }
	.flota .wa-flota:hover { background: #096533; }
	.flota .arriba {
		background: var(--tarjeta); color: var(--tinta); border: 1px solid var(--linea);
		opacity: 0; transform: translateY(6px); pointer-events: none;
		transition: opacity .2s ease, transform .2s ease;
	}
	.flota .arriba[data-visible="si"] { opacity: 1; transform: none; pointer-events: auto; }
	.flota .arriba svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
	.flota :is(a, button):focus-visible { outline: 3px solid var(--morado); outline-offset: 3px; }
	/* Donde ya hay barra inferior con WhatsApp, no lo repetimos */
	@media (max-width: 860px) { .flota--con-barra .wa-flota { display: none; } }
	@media (prefers-reduced-motion: reduce) { .flota .arriba { transition: none; } }
	/* En móvil el contenido ocupa todo el ancho, así que el botón flotante
	   se queda pequeño y translúcido: se ve, se pulsa, y no tapa. */
	@media (max-width: 860px) {
		.flota a, .flota button { width: 44px; height: 44px; }
		.flota svg { width: 22px; height: 22px; }
		.flota .arriba { background: color-mix(in srgb, var(--tarjeta) 88%, transparent); backdrop-filter: blur(6px); }
	}


	/* En móvil, la cabecera se retira al llegar al pie: allí ya está el
	   mismo logo y los mismos enlaces, y verlos dos veces confunde.
	   Los botones de contacto no se pierden: siguen en la barra inferior. */
	@media (max-width: 860px) {
		.cab { transition: transform .25s ease; will-change: transform; }
		.cab[data-oculta="si"] { transform: translateY(-100%); }
	}
	@media (prefers-reduced-motion: reduce) { .cab { transition: none; } }

	@media (max-width: 860px) {
		.pie-legal__in { padding-inline: 72px; }
	}


/* =====================================================================
   Sobre nosotros
   ===================================================================== */

/* ── Sobre nosotros ──────────────────────────────────────────
	   Prefijo sob- en todo lo nuevo. La hoja de la portada ya trae
	   .banda, .limite, .btn, .remate, .seccion__tit y compañía. */
	.sob-cima { padding: clamp(38px, 5vw, 64px) 0 clamp(30px, 4vw, 46px); background: var(--papel); border-bottom: 1px solid var(--linea); }
	.sob-cima .limite > * { text-align: center; }
	.sob-cima h1 {
		font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); line-height: 1.08;
		font-weight: 700; margin: 0 auto 14px; text-wrap: balance; max-width: 22ch;
	}
	.sob-cima h1 em { font-style: normal; color: var(--morado-tit); }
	.sob-cima > .limite > p { color: var(--tinta-2); font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem); max-width: 64ch; margin: 0 auto 24px; line-height: 1.65; }
	.sob-cima .botones { justify-content: center; }

	.sob-datos { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 30px 0 0; padding: 0; list-style: none; }
	@media (min-width: 620px) { .sob-datos { grid-template-columns: repeat(2, 1fr); gap: 18px 26px; } }
	@media (min-width: 960px) { .sob-datos { grid-template-columns: repeat(4, 1fr); } }
	.sob-datos li { border-top: 2px solid var(--marca); padding-top: 12px; text-align: left; }
	.sob-datos b { display: block; font-size: 1.28rem; line-height: 1.2; color: var(--morado-tit); font-weight: 700; }
	.sob-datos span { display: block; color: var(--tinta-2); font-size: .89rem; margin-top: 4px; line-height: 1.45; }

	/* Bloque en primera persona */
	.sob-persona {
		background: var(--tarjeta); border: 1px solid var(--linea);
		border-left: 4px solid var(--marca); border-radius: var(--radio);
		padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 36px); margin: 24px 0 0;
	}
	.sob-persona p { margin: 0 0 14px; color: var(--tinta-2); line-height: 1.75; font-size: clamp(1rem, .97rem + .18vw, 1.07rem); }
	.sob-persona p:last-of-type { margin-bottom: 0; }
	.sob-persona b { color: var(--tinta); }
	.sob-firma {
		display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
		margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea);
	}
	.sob-firma__ini {
		flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
		background: var(--marca); color: #fff; display: grid; place-items: center;
		font-weight: 700; font-size: 1.05rem; letter-spacing: .01em;
	}
	/* Acotado al div del texto: sin el «> div >», «.sob-firma span»
	   ganaba en especificidad a «.sob-firma__ini» y las iniciales del
	   círculo salían en gris sobre el morado en vez de en blanco. */
	.sob-firma > div > b { display: block; font-size: 1.02rem; color: var(--tinta); }
	.sob-firma > div > span { display: block; color: var(--tinta-2); font-size: .89rem; margin-top: 2px; }

	/* Los tres niveles de reparación */
	.sob-niveles { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: nivel; }
	@media (min-width: 980px) { .sob-niveles { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
	.sob-niveles li {
		counter-increment: nivel; background: var(--tarjeta); border: 1px solid var(--linea);
		border-radius: var(--radio); padding: 22px 22px 24px; display: flex; flex-direction: column;
	}
	.sob-niveles li::before {
		content: "Nivel " counter(nivel); display: inline-block; width: fit-content;
		background: var(--morado-tenue); color: var(--morado);
		font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
		padding: 5px 11px; border-radius: 999px; margin-bottom: 12px;
	}
	.sob-niveles h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 700; }
	.sob-niveles p { margin: 0 0 12px; color: var(--tinta-2); font-size: .95rem; line-height: 1.65; }
	.sob-niveles p:last-child { margin-bottom: 0; }
	.sob-niveles .sob-nivel-pie { margin-top: auto; padding-top: 13px; border-top: 1px solid var(--linea); font-size: .87rem; color: var(--tinta-2); line-height: 1.55; }
	.sob-niveles .sob-nivel-pie b { color: var(--morado-tit); }

	/* Compromisos: seis, o sea 1, 2 o 3 columnas. Nunca sobra uno. */
	.sob-compromisos { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 26px 0 0; padding: 0; list-style: none; counter-reset: comp; }
	@media (min-width: 700px)  { .sob-compromisos { grid-template-columns: repeat(2, 1fr); gap: 20px 28px; } }
	@media (min-width: 1040px) { .sob-compromisos { grid-template-columns: repeat(3, 1fr); } }
	.sob-compromisos li { counter-increment: comp; }
	.sob-compromisos li::before {
		content: ""; display: block; width: 26px; height: 15px;
		border-left: 3px solid var(--marca); border-bottom: 3px solid var(--marca);
		transform: rotate(-45deg); margin: 4px 0 16px 3px;
	}
	.sob-compromisos b { display: block; margin-bottom: 5px; font-size: 1.02rem; }
	.sob-compromisos span { display: block; color: var(--tinta-2); font-size: .93rem; line-height: 1.6; }

	/* Formulario. Reutiliza .campo, .contacto-caja y .btn--enviar de la portada. */
	.sob-form-rej { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: stretch; margin-top: 24px; }
	@media (min-width: 900px) { .sob-form-rej { grid-template-columns: 1.35fr .65fr; gap: 34px; } }
	.sob-form { display: grid; gap: 16px; }
	.sob-campos { display: grid; grid-template-columns: 1fr; gap: 14px; }
	@media (min-width: 620px) { .sob-campos { grid-template-columns: 1fr 1fr; } }
	.sob-campos .campo--ancho { grid-column: 1 / -1; }
	.sob-form textarea { min-height: 120px; resize: vertical; }
	.sob-form .consent a { color: var(--morado); font-weight: 600; }

	.sob-suave { background: var(--papel); }


/* =====================================================================
   Reparación de móviles
   ===================================================================== */

/* ── Página de móviles ───────────────────────────────────────
	   Reutiliza .serv-cima, .serv-tarjeta, .serv-rej, .serv-cierre,
	   .tabla-caja, .garantias, .pasos y .remate de la hoja base.
	   Prefijo mov- en lo propio. */
	.mov-destacado {
		background: var(--morado-tenue); border-radius: var(--radio);
		padding: clamp(22px, 3vw, 32px); margin: 26px 0 0;
	}
	.mov-destacado h3 { margin: 0 0 10px; font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: var(--morado-tit); }
	.mov-destacado p { margin: 0 0 14px; color: var(--tinta-2); max-width: 66ch; }
	.mov-destacado p:last-child { margin-bottom: 0; }
	.mov-destacado b { color: var(--tinta); }

	.mov-faq { display: grid; gap: 12px; margin: 24px 0 0; }
	.mov-faq details {
		background: var(--tarjeta); border: 1px solid var(--linea);
		border-radius: var(--radio); padding: 0 20px;
	}
	.mov-faq summary {
		list-style: none; cursor: pointer; padding: 16px 0;
		font-weight: 600; color: var(--tinta); display: flex;
		justify-content: space-between; align-items: baseline; gap: 16px;
	}
	.mov-faq summary::-webkit-details-marker { display: none; }
	.mov-faq summary::after { content: "+"; color: var(--morado); font-weight: 700; font-size: 1.4rem; line-height: 1; }
	.mov-faq details[open] summary::after { content: "−"; }
	.mov-faq details[open] summary { border-bottom: 1px solid var(--linea); }
	.mov-faq details > p {
		margin: 0; padding: 14px 0 18px; color: var(--tinta-2);
		font-size: .95rem; line-height: 1.65; max-width: 70ch;
	}

	.mov-marcas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 22px 0 0; }
	.mov-marcas li {
		background: var(--tarjeta); border: 1px solid var(--linea); border-radius: 999px;
		padding: 7px 15px; font-size: .93rem; color: var(--tinta-2);
	}


/* =====================================================================
   Reparación de ordenadores
   ===================================================================== */

/* ── Página de ordenadores ───────────────────────────────────
	   Reutiliza .serv-cima, .serv-tarjeta, .serv-rej, .serv-cierre,
	   .tabla-caja, .garantias, .pasos y .remate de la hoja base. */
	.ord-destacado {
		background: var(--morado-tenue); border-radius: var(--radio);
		padding: clamp(22px, 3vw, 32px); margin: 26px 0 0;
	}
	.ord-destacado h3 { margin: 0 0 10px; font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: var(--morado-tit); }
	.ord-destacado p { margin: 0 0 14px; color: var(--tinta-2); max-width: 66ch; }
	.ord-destacado p:last-child { margin-bottom: 0; }
	.ord-destacado b { color: var(--tinta); }

	.ord-antes { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 24px 0 0; }
	@media (min-width: 760px) { .ord-antes { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
	.ord-opcion {
		background: var(--tarjeta); border: 1px solid var(--linea);
		border-radius: var(--radio); padding: 22px 24px;
		display: flex; flex-direction: column;
	}
	.ord-opcion--mejor { border: 2px solid var(--marca); box-shadow: var(--sombra-alta); }
	.ord-opcion h4 {
		margin: 0 0 4px; font-size: 1.12rem; font-weight: 700; color: var(--tinta);
		font-family: "Familjen Grotesk", "Public Sans", sans-serif; letter-spacing: -.02em;
	}
	.ord-precio {
		font-size: 1.9rem; font-weight: 700; color: var(--morado-tit);
		line-height: 1.1; margin: 6px 0 12px; font-variant-numeric: tabular-nums;
	}
	.ord-precio small { font-size: .5em; font-weight: 500; color: var(--tinta-2); }
	.ord-opcion p { margin: 0; color: var(--tinta-2); font-size: .95rem; line-height: 1.6; }
	.ord-sello {
		align-self: flex-start; background: var(--marca); color: #fff;
		font-size: .72rem; font-weight: 600; letter-spacing: .05em;
		padding: 5px 12px; border-radius: 999px; margin-bottom: 10px;
	}

	.ord-faq { display: grid; gap: 12px; margin: 24px 0 0; }
	.ord-faq details {
		background: var(--tarjeta); border: 1px solid var(--linea);
		border-radius: var(--radio); padding: 0 20px;
	}
	.ord-faq summary {
		list-style: none; cursor: pointer; padding: 16px 0;
		font-weight: 600; color: var(--tinta); display: flex;
		justify-content: space-between; align-items: baseline; gap: 16px;
	}
	.ord-faq summary::-webkit-details-marker { display: none; }
	.ord-faq summary::after { content: "+"; color: var(--morado); font-weight: 700; font-size: 1.4rem; line-height: 1; }
	.ord-faq details[open] summary::after { content: "−"; }
	.ord-faq details[open] summary { border-bottom: 1px solid var(--linea); }
	.ord-faq details > p {
		margin: 0; padding: 14px 0 18px; color: var(--tinta-2);
		font-size: .95rem; line-height: 1.65; max-width: 70ch;
	}


/* =====================================================================
   PC a medida y gaming
   ===================================================================== */

/* ── Página de PC a medida ───────────────────────────────────
	   Reutiliza .serv-cima, .serv-tarjeta, .serv-rej, .serv-cierre,
	   .garantias, .pasos, .remate y .apunte de la hoja base. */
	.pc-destacado {
		background: var(--morado-tenue); border-radius: var(--radio);
		padding: clamp(22px, 3vw, 32px); margin: 26px 0 0;
	}
	.pc-destacado h3 { margin: 0 0 10px; font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: var(--morado-tit); }
	.pc-destacado p { margin: 0 0 14px; color: var(--tinta-2); max-width: 66ch; }
	.pc-destacado p:last-child { margin-bottom: 0; }
	.pc-destacado b { color: var(--tinta); }

	.pc-tarifa { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 24px 0 0; }
	@media (min-width: 760px) { .pc-tarifa { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
	.pc-item {
		background: var(--tarjeta); border: 1px solid var(--linea);
		border-left: 3px solid var(--marca); border-radius: var(--radio);
		padding: 20px 22px;
	}
	.pc-item b {
		display: block; font-size: 1.8rem; color: var(--morado-tit);
		line-height: 1.1; font-variant-numeric: tabular-nums;
		font-family: "Familjen Grotesk", "Public Sans", sans-serif; font-weight: 700;
	}
	.pc-item em { font-style: normal; display: block; font-weight: 600; color: var(--tinta); margin-top: 6px; }
	.pc-item span { display: block; color: var(--tinta-2); font-size: .93rem; margin-top: 5px; line-height: 1.55; }

	.pc-no { display: grid; gap: 14px; margin: 24px 0 0; }
	.pc-no > div {
		background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio);
		padding: 18px 20px;
	}
	.pc-no h4 {
		margin: 0 0 6px; font-size: 1.02rem; font-weight: 700; color: var(--tinta);
		font-family: "Familjen Grotesk", "Public Sans", sans-serif; letter-spacing: -.015em;
	}
	.pc-no p { margin: 0; color: var(--tinta-2); font-size: .95rem; line-height: 1.6; max-width: 74ch; }
	.pc-no b { color: var(--tinta); }

	.pc-faq { display: grid; gap: 12px; margin: 24px 0 0; }
	.pc-faq details {
		background: var(--tarjeta); border: 1px solid var(--linea);
		border-radius: var(--radio); padding: 0 20px;
	}
	.pc-faq summary {
		list-style: none; cursor: pointer; padding: 16px 0;
		font-weight: 600; color: var(--tinta); display: flex;
		justify-content: space-between; align-items: baseline; gap: 16px;
	}
	.pc-faq summary::-webkit-details-marker { display: none; }
	.pc-faq summary::after { content: "+"; color: var(--morado); font-weight: 700; font-size: 1.4rem; line-height: 1; }
	.pc-faq details[open] summary::after { content: "−"; }
	.pc-faq details[open] summary { border-bottom: 1px solid var(--linea); }
	.pc-faq details > p { margin: 0; padding: 14px 0 18px; color: var(--tinta-2); font-size: .95rem; line-height: 1.65; max-width: 70ch; }


/* =====================================================================
   Reparación de mandos
   ===================================================================== */

/* ── Página de mandos ────────────────────────────────────────
	   Prefijo man- en lo nuevo. Reutiliza .serv-cima, .serv-tarjeta,
	   .serv-rej, .serv-precios y .serv-cierre de la hoja de servicios. */
	.man-destacado {
		background: var(--morado-tenue); border-radius: var(--radio);
		padding: clamp(22px, 3vw, 32px); margin: 26px 0 0;
	}
	.man-destacado h3 { margin: 0 0 10px; font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: var(--morado-tit); }
	.man-destacado p { margin: 0 0 14px; color: var(--tinta-2); max-width: 66ch; }
	.man-destacado p:last-child { margin-bottom: 0; }
	.man-destacado b { color: var(--tinta); }

	.man-dos { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 24px 0 0; }
	@media (min-width: 760px) { .man-dos { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
	.man-opcion {
		background: var(--tarjeta); border: 1px solid var(--linea);
		border-radius: var(--radio); padding: 22px 24px;
		display: flex; flex-direction: column;
	}
	.man-opcion--mejor { border: 2px solid var(--marca); box-shadow: var(--sombra-alta); }
	.man-opcion h4 {
		margin: 0 0 4px; font-size: 1.12rem; font-weight: 700; color: var(--tinta);
		font-family: "Familjen Grotesk", "Public Sans", sans-serif; letter-spacing: -.02em;
	}
	.man-opcion .man-precio {
		font-size: 1.9rem; font-weight: 700; color: var(--morado-tit);
		line-height: 1.1; margin: 6px 0 12px; font-variant-numeric: tabular-nums;
	}
	.man-opcion .man-precio small { font-size: .5em; font-weight: 500; color: var(--tinta-2); }
	.man-opcion p { margin: 0; color: var(--tinta-2); font-size: .95rem; line-height: 1.6; }
	.man-opcion .man-sello {
		align-self: flex-start; background: var(--marca); color: #fff;
		font-size: .72rem; font-weight: 600; letter-spacing: .05em;
		padding: 5px 12px; border-radius: 999px; margin-bottom: 10px;
	}

	.man-faq { display: grid; gap: 12px; margin: 24px 0 0; }
	.man-faq details {
		background: var(--tarjeta); border: 1px solid var(--linea);
		border-radius: var(--radio); padding: 0 20px;
	}
	.man-faq summary {
		list-style: none; cursor: pointer; padding: 16px 0;
		font-weight: 600; color: var(--tinta); display: flex;
		justify-content: space-between; align-items: baseline; gap: 16px;
	}
	.man-faq summary::-webkit-details-marker { display: none; }
	.man-faq summary::after { content: "+"; color: var(--morado); font-weight: 700; font-size: 1.4rem; line-height: 1; }
	.man-faq details[open] summary::after { content: "−"; }
	.man-faq details[open] summary { border-bottom: 1px solid var(--linea); }
	.man-faq details > p {
		margin: 0; padding: 14px 0 18px; color: var(--tinta-2);
		font-size: .95rem; line-height: 1.65; max-width: 70ch;
	}


/* =====================================================================
   Reparación de consolas
   ===================================================================== */

/* ── Página de consolas ──────────────────────────────────────
	   Reutiliza .serv-cima, .serv-tarjeta, .serv-rej, .serv-cierre,
	   .tabla-caja, .garantias, .pasos y .remate de la hoja base. */
	.con-destacado {
		background: var(--morado-tenue); border-radius: var(--radio);
		padding: clamp(22px, 3vw, 32px); margin: 26px 0 0;
	}
	.con-destacado h3 { margin: 0 0 10px; font-size: clamp(1.15rem, 2.2vw, 1.4rem); color: var(--morado-tit); }
	.con-destacado p { margin: 0 0 14px; color: var(--tinta-2); max-width: 66ch; }
	.con-destacado p:last-child { margin-bottom: 0; }
	.con-destacado b { color: var(--tinta); }

	.con-mandos {
		display: grid; grid-template-columns: 1fr; gap: 20px;
		background: var(--tarjeta); border: 2px solid var(--marca);
		border-radius: var(--radio); padding: clamp(22px, 3vw, 32px);
		margin: 24px 0 0; box-shadow: var(--sombra-alta);
		align-items: center;
	}
	@media (min-width: 800px) { .con-mandos { grid-template-columns: 1fr auto; gap: 30px; } }
	.con-mandos h3 { margin: 0 0 8px; font-size: clamp(1.15rem, 2.2vw, 1.45rem); color: var(--morado-tit); }
	.con-mandos p { margin: 0; color: var(--tinta-2); max-width: 62ch; }
	.con-mandos p + p { margin-top: 10px; }
	.con-mandos b { color: var(--tinta); }

	.con-faq { display: grid; gap: 12px; margin: 24px 0 0; }
	.con-faq details {
		background: var(--tarjeta); border: 1px solid var(--linea);
		border-radius: var(--radio); padding: 0 20px;
	}
	.con-faq summary {
		list-style: none; cursor: pointer; padding: 16px 0;
		font-weight: 600; color: var(--tinta); display: flex;
		justify-content: space-between; align-items: baseline; gap: 16px;
	}
	.con-faq summary::-webkit-details-marker { display: none; }
	.con-faq summary::after { content: "+"; color: var(--morado); font-weight: 700; font-size: 1.4rem; line-height: 1; }
	.con-faq details[open] summary::after { content: "−"; }
	.con-faq details[open] summary { border-bottom: 1px solid var(--linea); }
	.con-faq details > p { margin: 0; padding: 14px 0 18px; color: var(--tinta-2); font-size: .95rem; line-height: 1.65; max-width: 70ch; }


/* =====================================================================
   ARREGLOS DE CASCADA
   Tres reglas que no son estética, son deuda pagada. En los prototipos
   cada una costó una tarde de medir, y las tres eran el mismo error:
   dos reglas del mismo peso pisándose sin avisar.

   1) .serv-tarjeta > p (clase + etiqueta) le anulaba el margin-top:auto
      a .serv-pie (solo clase). El pie de las tarjetas no bajaba al fondo
      y quedaban hasta 148 px de hueco muerto en las que tenían menos
      texto, al lado de otras llenas.
   2) .btn llevaba white-space:nowrap y .botones metía dos columnas de
      178 px: entre 410 y 640 px de ancho el texto de los botones se
      salía por los lados. Ahora salta a una columna antes y puede
      partir en dos líneas.
   3) .serv-familia lleva «margin: 0 0 52px» para separar bloques, y al
      ser también de una sola clase y venir después le anulaba el
      «margin: 0 auto» de .limite. Los cuatro bloques de servicios
      dejaban de centrarse: 305 px de hueco a la derecha en un monitor
      de 1920 mientras la cabecera sí iba centrada.
   ===================================================================== */
.serv-tarjeta > p.serv-pie { margin-top: auto; margin-bottom: 0; }
.btn { white-space: normal; text-wrap: balance; }
.botones { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.limite.serv-familia { margin-left: auto; margin-right: auto; }

/* =====================================================================
   MENÚ DE REPARACIONES
   Diez destinos no caben en una fila, así que las cinco páginas de
   reparación se agrupan bajo «Reparaciones» — que además es un enlace
   real a /servicios/, no solo un desplegable: funciona con teclado, sin
   JavaScript, y Google lo sigue como un enlace normal.
   ===================================================================== */
.nav { align-items: center; }
.nav-grupo { position: relative; display: flex; align-items: center; padding: 24px 0; }
.nav-jefe { display: inline-flex; align-items: center; gap: 7px; color: var(--tinta-2); text-decoration: none; font-size: .93rem; font-weight: 500; }
.nav-flecha { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; transition: transform .15s ease; }
.nav-grupo:hover .nav-jefe, .nav-grupo:focus-within .nav-jefe, .nav-jefe:hover { color: var(--morado); }
.nav-grupo:hover .nav-flecha, .nav-grupo:focus-within .nav-flecha { transform: rotate(180deg); }
.nav-sub {
	position: absolute; top: 100%; left: -14px; z-index: 70;
	min-width: 320px; padding: 10px;
	background: var(--tarjeta); border: 1px solid var(--linea);
	border-radius: var(--radio); box-shadow: var(--sombra-alta);
	display: grid; gap: 2px;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.nav-grupo:hover .nav-sub, .nav-grupo:focus-within .nav-sub { opacity: 1; visibility: visible; transform: none; }
.nav-sub a { display: block; padding: 10px 13px; border-radius: 9px; text-decoration: none; color: var(--tinta); font-size: .94rem; }
.nav-sub a:hover, .nav-sub a[aria-current="page"] { background: var(--morado-tenue); }
.nav-sub a b { display: block; font-weight: 600; }
.nav-sub a span { display: block; color: var(--tinta-2); font-size: .84rem; margin-top: 1px; }
.nav-sub a[aria-current="page"] b { color: var(--morado-tit); }
.nav-sub__todos { margin-top: 4px; border-top: 1px solid var(--linea); border-radius: 0 0 9px 9px; color: var(--morado) !important; font-weight: 600; }
.menu-grupo { font-family: "Roboto Mono", ui-monospace, monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); margin: 16px 0 2px; }
.menu-grupo:first-child { margin-top: 6px; }
@media (max-width: 860px) { .nav-grupo { display: none; } }

/* =====================================================================
   PÁGINAS DE SALIDA: gracias y 404
   Faltaban en la hoja común: al juntar las once hojas se quedaron fuera y
   las dos páginas salían sin estilo ninguno.
   ===================================================================== */

	.ext { padding: clamp(48px, 8vw, 96px) 0; background: var(--papel); }
	.ext .limite { text-align: center; }
	.ext__marca {
		font-family: "Roboto Mono", monospace; font-size: .74rem; letter-spacing: .16em;
		text-transform: uppercase; color: var(--morado); margin: 0 0 14px;
	}
	.ext h1 {
		font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); line-height: 1.08; font-weight: 700;
		margin: 0 auto 16px; max-width: 18ch; text-wrap: balance;
	}
	.ext h1 em { font-style: normal; color: var(--morado-tit); }
	.ext__lead { color: var(--tinta-2); font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem);
		max-width: 58ch; margin: 0 auto 28px; line-height: 1.65; }
	.ext .botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

	.ext-marca-ico { width: clamp(56px, 6vw, 76px); height: auto; margin: 0 auto 20px; display: block; }
	.ext-marca-ico circle { fill: var(--morado-tenue); }
	.ext-marca-ico path { fill: none; stroke: var(--marca); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

	.ext-pasos { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 34px 0 0; padding: 0; list-style: none; counter-reset: ep; text-align: left; }
	@media (min-width: 860px) { .ext-pasos { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
	.ext-pasos li { counter-increment: ep; background: var(--tarjeta); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px 22px; }
	.ext-pasos li::before {
		content: counter(ep); display: grid; place-items: center; width: 30px; height: 30px;
		border-radius: 50%; background: var(--marca); color: #fff; font-weight: 700; font-size: .9rem; margin-bottom: 12px;
	}
	.ext-pasos b { display: block; margin-bottom: 4px; }
	.ext-pasos span { color: var(--tinta-2); font-size: .93rem; line-height: 1.6; }

	.ext-rutas { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 32px 0 0; padding: 0; list-style: none; text-align: left; }
	@media (min-width: 700px)  { .ext-rutas { grid-template-columns: repeat(2, 1fr); gap: 10px 20px; } }
	@media (min-width: 1000px) { .ext-rutas { grid-template-columns: repeat(3, 1fr); } }
	.ext-rutas a {
		display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta);
		font-weight: 500; font-size: .96rem; padding: 13px 16px; border: 1px solid var(--linea);
		border-radius: 10px; background: var(--tarjeta); transition: border-color .16s ease, transform .16s ease;
	}
	.ext-rutas a:hover { border-color: var(--marca); transform: translateY(-1px); }
	.ext-rutas a::before { content: "→"; color: var(--morado); font-weight: 700; flex: 0 0 auto; }

	.ext-buscar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 30px 0 0; }
	.ext-buscar input {
		flex: 1 1 260px; max-width: 380px; font: inherit; font-size: 1rem; color: var(--tinta);
		background: var(--tarjeta); border: 1px solid var(--linea-fuerte, var(--linea));
		border-radius: 999px; padding: 13px 20px;
	}
	.ext-buscar input:focus-visible { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 22%, transparent); }

/* =====================================================================
   CONTACTO · lista de datos
   Un <dl> con etiqueta y dato. En los prototipos iba con estilos en
   línea repetidos en cada <dt> y cada <dd>; aquí es una clase.
   ===================================================================== */
.ficha-datos {
	display: grid; grid-template-columns: auto 1fr;
	gap: 10px 18px; margin: 22px 0 0; font-size: .96rem;
}
.ficha-datos dt { color: var(--tinta-2); }
.ficha-datos dd { margin: 0; font-weight: 600; }
.ficha-datos a { color: var(--morado); text-decoration: none; }
.ficha-datos a:hover { text-decoration: underline; }
@media (max-width: 480px) {
	.ficha-datos { grid-template-columns: 1fr; gap: 2px 0; }
	.ficha-datos dd { margin-bottom: 12px; }
}

/* =====================================================================
   PÁGINAS LEGALES
   También se quedaron fuera al juntar las hojas. Texto justificado con
   partición de palabras: son párrafos largos y en columna estrecha, sin
   guiones, se abren ríos blancos entre palabras.
   ===================================================================== */

	.legal-cab { background: var(--tarjeta); border-bottom: 1px solid var(--linea); padding: clamp(28px,4vw,52px) 0 clamp(24px,3vw,40px); }
	.legal-cab h1 { font-size: clamp(1.8rem,1.25rem+2.2vw,2.8rem); line-height:1.08; font-weight:700; margin:0 0 12px; color:var(--morado); text-wrap:balance; }
	.legal-lead { font-size: clamp(1.02rem,.96rem+.3vw,1.2rem); color:var(--tinta-2); max-width:62ch; margin:0; text-align:justify; }
	.migas { font-size:.9rem; color:var(--tinta-2); margin:0 0 14px; }
	.migas span { opacity:.5; margin:0 7px; }
	/* Sin esto los enlaces salían con el azul por defecto del navegador,
	   que en modo oscuro se queda en 1,87:1 y además no es de la marca. */
	.migas a { color:var(--morado); text-decoration:none; font-weight:600; }
	.migas a:hover { text-decoration:underline; }
	.doc a { color:var(--morado); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
	.doc a:hover { text-decoration-thickness:2px; }

	.indice { display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 0; padding:0; list-style:none; }
	.indice a {
		display:inline-block; padding:9px 15px; border:1px solid var(--linea);
		border-radius:999px; font-size:.92rem; font-weight:600; color:var(--morado); text-decoration:none;
	}
	.indice a:hover { border-color:var(--morado); background:var(--morado-tenue); }

	.doc { max-width:74ch; }
	/* Los apartados numerados son h2, no h3: del h1 al h3 hay un salto que
	   despista a quien lee con lector de pantalla. El tamaño es el de antes. */
	.doc h2 { font-size:1.06rem; font-weight:600; margin:26px 0 6px; scroll-margin-top:90px; }
	.doc h2:first-of-type { margin-top:0; }
	.doc h3 { font-size:1rem; font-weight:600; margin:20px 0 6px; color:var(--tinta-2); }
	/* Textos justificados en las páginas legales. Con la partición de
	   palabras activada (el contenedor lleva lang="es") no se abren
	   huecos raros entre palabras al llegar a columnas estrechas. */
	.doc p, .doc li, .doc dd { color:var(--tinta-2); line-height:1.7;
		text-align:justify; text-justify:inter-word; hyphens:auto; }
	.doc dd { color:var(--tinta); }
	.doc .actualizado, .doc dt { text-align:left; hyphens:none; }
	.doc ul { padding-left:20px; margin:0 0 14px; }
	.doc li { margin-bottom:6px; }
	.doc strong { color:var(--tinta); }
	.doc dl { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:14px 0 20px; }
	.doc dt { color:var(--tinta-2); font-size:.94rem; }
	.doc dd { margin:0; font-weight:600; color:var(--tinta); }
	/* Listado de cookies. Va como lista y no como tabla: en el móvil una
	   tabla de cuatro columnas obliga a hacer scroll lateral y esto no. */
	.cookie-lista { list-style:none; padding:0; margin:14px 0 18px; display:grid; gap:12px; }
	.cookie-lista li {
		border:1px solid var(--linea); border-left:3px solid var(--marca);
		border-radius:var(--radio); padding:14px 16px; background:var(--tarjeta);
	}
	.cookie-lista b { display:block; color:var(--tinta); font-size:1rem; }
	.cookie-lista .cookie-meta {
		display:block; font-family:"Roboto Mono",monospace; font-size:.74rem;
		letter-spacing:.02em; color:var(--tinta-2); margin:3px 0 8px; text-align:left; hyphens:none;
	}
	.cookie-lista li > span:last-child { display:block; color:var(--tinta-2); font-size:.94rem; line-height:1.65; text-align:justify; hyphens:auto; }

	.actualizado { font-family:"Roboto Mono",monospace; font-size:.76rem; color:var(--tinta-3); margin:8px 0 26px; }

	.falta {
		background:var(--aviso-tenue); color:var(--aviso); font-weight:600;
		padding:1px 7px; border-radius:5px; font-size:.92em;
		border:1px dashed color-mix(in srgb, var(--aviso) 45%, transparent);
	}
	.recuadro {
		border-radius:var(--radio); padding:16px 20px; margin:22px 0;
		background:var(--aviso-tenue); border:1px solid color-mix(in srgb, var(--aviso) 32%, transparent);
	}
	.recuadro p { margin:0; color:var(--tinta); font-size:.93rem; }
	.recuadro-tit { font-family:"Roboto Mono",monospace; font-size:.72rem; letter-spacing:.12em;
		text-transform:uppercase; color:var(--aviso); font-weight:500; display:block; margin-bottom:6px; }
	.separa { border:0; border-top:1px solid var(--linea); margin:48px 0 40px; }
	@media (max-width:560px) { .doc dl { grid-template-columns:1fr; gap:2px 0; } .doc dd { margin-bottom:10px; } }

/* =====================================================================
   Repaso de septiembre de 2026

   Todo lo de aquí abajo nace de una revisión de Mari página por página.
   Va al final a propósito: son correcciones sobre reglas que ya existen
   más arriba, y en CSS, a igualdad de peso, gana la última.
   ===================================================================== */

	/* 1 · Texto a toda la caja y justificado.
	   Los bloques destacados ocupan el ancho completo de la sección, pero su
	   párrafo estaba topado en 66-74ch. En pantalla grande eso dejaba media
	   caja vacía a la derecha y parecía un fallo de maquetación. Se quita el
	   tope y se justifica. La partición de palabras no es un adorno: sin ella
	   el justificado en español abre calles blancas entre palabras. */
	.mov-destacado p, .ord-destacado p, .con-destacado p, .man-destacado p,
	.pc-destacado p, .pc-no p, .apunte,
	.mov-faq details > p, .ord-faq details > p, .con-faq details > p,
	.man-faq details > p, .pc-faq details > p, .emp-faq details > p {
		max-width: none;
		text-align: justify;
		hyphens: auto;
		-webkit-hyphens: auto;
	}

	/* 2 · Portada: la descripción de entrada y la nota de debajo de las
	   tarifas, las dos a todo el ancho y justificadas. */
	.hero__sub { max-width: none; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
	.limite > .tarifa-nota { max-width: none; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

	/* 3 · Empresas: la letra pequeña que va debajo de los precios.
	   Va con el mismo camino completo que la regla de arriba (.paquetes >
	   .limite > …): si se pone solo .paq-pie, pierde, porque en CSS gana el
	   selector más concreto aunque el otro esté después. */
	.paquetes > .limite > .paq-pie {
		max-width: none; text-align: justify; hyphens: auto; -webkit-hyphens: auto;
	}

	/* 4 · El recuadro lateral del «cómo funciona», estirado hasta abajo.
	   Antes la columna de la derecha se quedaba a media altura y el hueco
	   cantaba. align-items:stretch estira la celda; el flex:1 de dentro hace
	   que la tarjeta ocupe esa celda entera y no solo lo que mide su texto. */
	.proceso-rej { align-items: stretch; }
	.proceso-rej > div { display: flex; flex-direction: column; }
	.proceso-rej > div > .mov-destacado,
	.proceso-rej > div > .ord-destacado,
	.proceso-rej > div > .con-destacado,
	.proceso-rej > div > .man-destacado,
	.proceso-rej > div > .pc-destacado {
		flex: 1 1 auto;
		/* Estirada, la tarjeta es más alta que su texto. Centrando el
		   contenido el aire queda repartido arriba y abajo y parece hecho
		   a propósito, en vez de un hueco olvidado debajo. */
		display: flex; flex-direction: column; justify-content: center;
	}

	/* 5 · Empresas: la cabecera. El renglón de arriba partía la frase por
	   la mitad y la entradilla dejaba huérfano «Ciudad Real.» en su propia
	   línea. balance reparte las líneas; pretty evita el huérfano. */
	.emp-cima > .limite > p.eyebrow { text-wrap: balance; }
	.emp-cima > .limite > p { text-wrap: pretty; }

	/* En móvil el justificado con columnas estrechas queda peor que el texto
	   normal: se parten demasiadas palabras. Por debajo de 560px se deja
	   alineado a la izquierda. */
	@media (max-width: 560px) {
		.mov-destacado p, .ord-destacado p, .con-destacado p, .man-destacado p,
		.pc-destacado p, .pc-no p, .apunte, .hero__sub, .tarifa-nota, .paq-pie,
		.mov-faq details > p, .ord-faq details > p, .con-faq details > p,
		.man-faq details > p, .pc-faq details > p, .emp-faq details > p {
			text-align: left;
		}
	}

	/* 6 · Hueco donde el plugin de reseñas pinta lo suyo. El tema no le impone
	   estilo —cada plugin trae el suyo—, solo le da el ancho y el aire. */
	.res-plugin { margin: 24px 0 0; }
	.res-plugin > *:last-child { margin-bottom: 0; }

/* =====================================================================
   Segundo repaso de septiembre de 2026

   Mari pidió el texto justificado no solo en los bloques destacados, sino
   en todo el texto corrido de la web, y que el recuadro de cierre (.remate)
   dejara de tener un claro entre el párrafo y los botones.
   ===================================================================== */

	/* 7 · Todo el texto corrido, justificado.
	   La lista sale de barrer las diecinueve páginas en el navegador y
	   quedarse con los párrafos de más de 160 caracteres que estaban en
	   bandera. Quedan fuera a propósito dos cosas: las entradillas centradas
	   de cada sección, que si se justifican dejan de estar centradas, y el
	   párrafo del pie, que va en una columna demasiado estrecha (38
	   caracteres) para que el justificado no abra huecos.

	   Por la misma razón quedan fuera las tarjetas de tres en fila —los tres
	   niveles de «sobre nosotros», los compromisos y el alcance de empresas—:
	   su columna mide unos 290-330 px, que en esa letra son menos de cuarenta
	   caracteres por línea. Por debajo de unos cuarenta y cinco, justificar
	   abre calles blancas aunque el navegador parta palabras. Si se quieren
	   justificar igualmente, se añaden aquí: .sob-niveles li p,
	   .sob-compromisos li span y .emp-alcance li span. */
	.serv-tarjeta > p:not(.serv-pie),
	.emp-serv > p,
	.remate p,
	.sob-persona p,
	.pasos li p,
	.ord-opcion p,
	.man-opcion p,
	.faq-item p,
	.nota p,
	.pista,
	.legal,
	.limite > p:not([class]),
	.mapa-rej > div > .seccion__pie,
	.paquetes > .limite > .paq-otra {
		text-align: justify;
		hyphens: auto;
		-webkit-hyphens: auto;
	}

	/* La página de fibra tiene su propia copia de estas reglas, colgada de
	   body.et-fibra, y esa pesa más. Hay que repetirlo con su apellido. */
	body.et-fibra .remate p,
	body.et-fibra .pista,
	body.et-fibra .legal,
	body.et-fibra .nota p,
	body.et-fibra .limite > p:not([class]) {
		text-align: justify;
		hyphens: auto;
		-webkit-hyphens: auto;
	}

	/* 8 · El recuadro de cierre, sin el claro del medio.
	   .remate es un flex con justify-content:space-between. El párrafo tenía
	   un tope de 54 caracteres y, al no poder crecer, se quedaba corto: el
	   space-between mandaba los botones al otro extremo y entre las dos cosas
	   quedaba un agujero. Con flex:1 el párrafo se come ese hueco y el
	   justificado lo deja a ras de los botones. El 340px es el punto en el
	   que, si no cabe, se parte en dos filas en vez de estrangular el texto. */
	.remate p, body.et-fibra .remate p { flex: 1 1 340px; max-width: none; }
	.remate .botones, body.et-fibra .remate .botones { flex: 0 0 auto; }

	/* En móvil, ni justificado ni dos columnas: una debajo de otra. */
	@media (max-width: 560px) {
		.serv-tarjeta > p:not(.serv-pie), .emp-serv > p, .remate p,
		.sob-persona p, .pasos li p, .ord-opcion p, .man-opcion p,
		.faq-item p, .nota p, .pista, .legal, .limite > p:not([class]),
		.mapa-rej > div > .seccion__pie, .paquetes > .limite > .paq-otra,
		body.et-fibra .remate p, body.et-fibra .pista, body.et-fibra .legal,
		body.et-fibra .nota p, body.et-fibra .limite > p:not([class]) {
			text-align: left;
		}
	}

	/* 9 · El enlace que cierra el párrafo de «dónde estamos».
	   Al justificar el párrafo, ese enlace dejó de caer en su propia línea y
	   se quedaba colgando a mitad de renglón, partido en dos. Pasándolo a
	   bloque vuelve a empezar línea, que es como se leía antes. */
	.mapa-rej > div > .seccion__pie a { display: block; margin-top: 10px; text-align: left; }

/* =====================================================================
   El mapa, siempre visible

   Decisión del 13/09/2026: el mapa se pinta al entrar en lugar de esperar
   a que alguien pulse. Para poder hacerlo sin banner de cookies, el mapa
   pasa de Google a OpenStreetMap, que no pone cookies ni identifica al
   visitante. El marcado está en partes/mapa.php.
   ===================================================================== */

	/* La tarjeta del negocio, flotando sobre el mapa como en Google Maps. */
	.mapa-tarjeta {
		position: absolute; z-index: 2;
		top: clamp(14px, 2vw, 22px); left: clamp(14px, 2vw, 22px);
		width: min(330px, calc(100% - 28px));
		display: grid; gap: 3px; text-align: left;
		background: var(--tarjeta); border: 1px solid var(--linea);
		border-radius: var(--radio); padding: 14px 16px 15px;
		box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 28px -14px rgba(0,0,0,.35);
	}
	.mapa-tarjeta b { color: var(--tinta); font-size: 1.02rem; line-height: 1.3; }
	.mapa-tarjeta span { color: var(--tinta-2); font-size: .88rem; line-height: 1.45; }
	.mapa-tarjeta__pie { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
	.mapa-tarjeta .btn { padding: 9px 16px; font-size: .9rem; }

	/* En el móvil la franja es estrecha y la tarjeta taparía justo el pin.
	   Ahí deja de flotar y se pone debajo del mapa, a todo lo ancho. */
	@media (max-width: 760px) {
		/* La tarjeta es hija del recuadro del mapa. Para que caiga DEBAJO y no
		   encima, los dos tienen que volver al flujo normal: el recuadro deja
		   de ser una caja de altura fija con hijos flotando dentro, y el mapa
		   pasa a ser un bloque de 300 px con la tarjeta detrás. */
		.mapa-lienzo.mapa-puesto {
			position: static; display: block;
			aspect-ratio: auto; height: auto; min-height: 0; padding: 0;
		}
		.mapa-lienzo.mapa-puesto iframe {
			position: static; display: block; width: 100%; height: 300px;
		}
		.mapa-ancho .mapa-tarjeta {
			position: static; width: 100%; max-width: none; margin: 0;
			border-radius: 0; border-width: 1px 0 0;
			box-shadow: none;
		}
		.mapa-tarjeta__pie .btn { flex: 1 1 auto; text-align: center; }
	}

/* =====================================================================
   Tercer repaso · 13/09/2026

   Reglas que Mari fijó para toda la web:
     · titular de sección SIEMPRE centrado
     · entradilla y texto corrido SIEMPRE justificados y a todo el ancho
     · menos aire entre bloques en las páginas que no son la portada
   ===================================================================== */

	/* 1 · Portada: el titular y el gancho, a todo el ancho de su columna.
	   El hueco de la derecha no era un margen: era text-wrap:balance, que
	   reparte las líneas para que queden parejas y por eso las acorta. Y el
	   gancho llevaba además un tope de 28 caracteres. */
	.hero h1 { text-wrap: wrap; }
	.hero__gancho {
		max-width: none; text-wrap: wrap;
		text-align: justify; hyphens: auto; -webkit-hyphens: auto;
	}

	/* 2 · Titulares de sección centrados, en todas las páginas y en todos
	   los sitios, incluida la sección de «dónde estamos», que era la única
	   que los llevaba a la izquierda. */
	.seccion__tit,
	.limite > .seccion__tit,
	.mapa-rej > div > .seccion__tit { text-align: center; }

	/* 3 · Entradillas y textos de sección: justificados y a todo el ancho.
	   Antes iban centrados y topados a 60 caracteres, que es lo que dejaba
	   la caja medio vacía. Se quita el tope y se quitan los márgenes
	   automáticos, que son los que los mantenían centrados. */
	.seccion__pie,
	.limite > .seccion__pie,
	.mapa-rej > div > .seccion__pie,
	.serv-cima > .limite > p,
	.emp-cima > .limite > p,
	.sob-cima > .limite > p,
	.emp-familia > p,
	.paquetes > .limite > .paq-entrada,
	.paquetes > .limite > .paq-pie,
	.paquetes > .limite > .paq-otra,
	.serv-cierre p, .emp-cierre p, .faq-cierre p,
	.pag-lead,
	.limite > .tarifa__pie,
	.limite > .tarifa-nota,
	.limite > .tarifa-garantia {
		max-width: none;
		margin-left: 0; margin-right: 0;
		text-align: justify; hyphens: auto; -webkit-hyphens: auto;
	}

	/* 4 · Menos aire entre bloques fuera de la portada.
	   Dos secciones seguidas sumaban 120 px de separación. En la portada
	   está bien, porque los bloques son grandes y espaciados; en las páginas
	   interiores, que son más largas y más densas, sobraba. */
	body:not(.et-inicio) .banda { padding: 44px 0; }
	body:not(.et-inicio) .serv-cima,
	body:not(.et-inicio) .emp-cima,
	body:not(.et-inicio) .sob-cima {
		padding: clamp(30px, 3.6vw, 48px) 0 clamp(24px, 3vw, 36px);
	}

	/* 5 · El recuadro lateral del «cómo funciona», sin hueco muerto.
	   Estirarlo dejaba el texto flotando en medio. Ahora el texto arranca
	   arriba y el hueco de abajo lo ocupa un botón, que además es lo que
	   pide la regla de que ninguna sección acabe sin forma de contactar. */
	.proceso-rej > div > .mov-destacado,
	.proceso-rej > div > .ord-destacado,
	.proceso-rej > div > .con-destacado,
	.proceso-rej > div > .man-destacado,
	.proceso-rej > div > .pc-destacado { justify-content: flex-start; }
	/* p.destacado-cta y no .destacado-cta a secas: las reglas de
	   .pc-destacado p y compañía pesan igual que una clase + elemento,
	   y con solo la clase le ganaban el margen y el botón no bajaba. */
	p.destacado-cta { margin: auto 0 0; padding-top: 18px; }
	.destacado-cta .btn { width: 100%; text-align: center; }

	/* 6 · Lo que quedaba en bandera, justificado también.
	   Son columnas estrechas —de 290 a 355 px, menos de cuarenta caracteres
	   por línea— y ahí el justificado abre más hueco entre palabras. Mari lo
	   quiere así en toda la web, y así queda. Para volver atrás en estas
	   cuatro, basta con borrar este bloque. */
	.sob-niveles li p,
	.sob-compromisos li span,
	.emp-alcance li span,
	.pie p {
		text-align: justify; hyphens: auto; -webkit-hyphens: auto;
	}
	@media (max-width: 560px) {
		.sob-niveles li p, .sob-compromisos li span,
		.emp-alcance li span, .pie p { text-align: left; }
	}

	/* 7 · Fibra en móvil: la fila «Permanencia · Sin permanencia» se salía.
	   Es un flex con los dos extremos separados, y los hijos de un flex no
	   encogen por debajo de lo que mide su texto sin partir (min-width:auto).
	   A 390 px no cabían los dos en la misma línea y el segundo se iba fuera
	   de la pantalla, arrastrando toda la página. Con wrap baja a la línea de
	   abajo, y con min-width:0 puede además partir si hiciera falta. */
	body.et-fibra .permanencia,
	body.et-fibra .desglose li,
	body.et-fibra .oferta__cab { flex-wrap: wrap; }
	body.et-fibra .permanencia > *,
	body.et-fibra .desglose li > *,
	body.et-fibra .oferta__cab > * { min-width: 0; }

	/* 8 · Fibra: las entradillas de sección, justificadas y a todo el ancho,
	   igual que en el resto de la web. Esta página tiene sus propias reglas
	   con apellido body.et-fibra, así que hay que nombrarlas aparte. */
	body.et-fibra .cima p.lead,
	body.et-fibra .banda--morada > .limite > .banda--morada__pie {
		max-width: none; margin-left: 0; margin-right: 0;
		text-align: justify; hyphens: auto; -webkit-hyphens: auto;
	}
	@media (max-width: 560px) {
		body.et-fibra .cima p.lead,
		body.et-fibra .banda--morada > .limite > .banda--morada__pie { text-align: left; }
	}

	/* 9 · La barra de utilidad, más recogida.
	   Estaba con los datos pegados a la izquierda y el correo empujado al
	   extremo derecho con margin-left:auto, así que en pantalla ancha quedaba
	   un agujero enorme en medio. Ahora va todo centrado como un solo grupo,
	   con menos separación y menos alto. */
	.utilidad__in {
		justify-content: center;
		gap: 6px 14px;
		min-height: 32px;
		padding-top: 4px; padding-bottom: 4px;
	}
	.utilidad__dcha { margin-left: 0; gap: 14px; }
	/* Un punto de separación antes del correo, como el que ya hay entre el
	   horario y la dirección. El «/ ""» le dice al lector de pantalla que no
	   lo lea: es un adorno, no contenido. */
	.utilidad__dcha::before {
		/* Dos veces a propósito: la primera la entiende cualquier
		   navegador, la segunda añade el texto alternativo vacío y solo
		   la aplican los modernos. Si un navegador viejo no entiende la
		   segunda, se queda con la primera y el punto se ve igual. */
		content: "·";
		content: "·" / "";
		opacity: .35;
	}

	/* 10 · El menú de móvil, que no cabía en pantalla.
	   ---------------------------------------------------------------
	   El fallo: .menu-movil vive dentro de .cab, y .cab es sticky con
	   top:0. Con el menú abierto la cabecera medía 849 px. En un móvil
	   de 640 px de alto eso significa que la parte de abajo del menú
	   queda clavada FUERA de la pantalla y no hay manera de llegar a
	   ella: un elemento pegajoso no se mueve por mucho que scrolees.
	   Medido: «Contacto» y «Pedir presupuesto» eran inalcanzables en
	   cualquier móvil por debajo de 850 px de alto, que son casi todos.

	   El arreglo: el menú deja de empujar la cabecera y pasa a ser un
	   panel propio, anclado justo debajo de la barra, con la altura que
	   quede libre y scroll propio. Así siempre cabe, sea cual sea el
	   alto de la pantalla y por largo que se haga el menú. */
	@media (max-width: 860px) {
		.menu-movil {
			position: fixed;
			top: var(--cab-alto, 69px);
			left: 0; right: 0;
			/* dvh, no vh: en el móvil, vh cuenta la barra del navegador
			   como si no estuviera y el menú se pasa de largo. La primera
			   línea es el respaldo para navegadores que no conocen dvh. */
			max-height: calc(100vh  - var(--cab-alto, 69px) - var(--hueco-barra, 62px));
			max-height: calc(100dvh - var(--cab-alto, 69px) - var(--hueco-barra, 62px));
			overflow-y: auto;
			/* Que el impulso del dedo no se contagie a la página de detrás
			   cuando el menú llega a su final. */
			overscroll-behavior: contain;
			-webkit-overflow-scrolling: touch;
			box-shadow: 0 18px 40px rgba(23, 21, 26, .18);
		}
		.menu-movil__in { padding-bottom: 24px; }

		/* Fondo oscuro detrás del menú. Va en z-index 39 para quedar por
		   debajo de la cabecera (40), que es quien lleva dentro el panel,
		   y por encima de todo lo demás. */
		body.menu-abierto::after {
			content: "";
			position: fixed;
			inset: var(--cab-alto, 69px) 0 0 0;
			background: rgba(23, 21, 26, .45);
			z-index: 39;
		}

		/* Zonas de toque: el WhatsApp y el teléfono de la cabecera se
		   quedaban en 36 y 34 px de alto. El mínimo para un dedo son 44. */
		.cab .wa, .cab .tel { min-height: 44px; padding-top: 0; padding-bottom: 0; }
	}
	@media (prefers-reduced-motion: reduce) { .menu-movil { scroll-behavior: auto; } }

	/* 11 · El icono de WhatsApp, en todos los botones de WhatsApp.
	   ---------------------------------------------------------------
	   El fallo: el icono se escribía a mano en cada botón. De los 68
	   botones que llevan a WhatsApp en toda la web, solo 5 lo tenían.
	   Los otros 63 eran botones verdes que ponían «Escribir por
	   WhatsApp» sin el icono al lado, y cambiaba de una página a otra.

	   El arreglo no es ir botón por botón —eso es lo que nos ha traído
	   hasta aquí—, sino que el icono lo ponga la hoja de estilos según
	   A DÓNDE VA el enlace. Cualquier botón que apunte a wa.me lo lleva,
	   hoy y el día que añadamos otro sin acordarnos de esto.

	   El dibujo es el mismo de et_icono('whatsapp') —la burbuja con el
	   auricular dentro—, el que ya sale en la
	   cabecera y en la barra de abajo, para que no haya dos WhatsApp
	   distintos en la misma página. Va como máscara y no como imagen:
	   así toma el color del texto del botón y se ve igual sobre el verde,
	   sobre el morado y en modo oscuro, sin repetirlo en cada variante. */
	:root {
		--et-icono-wa: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2m0 2a8 8 0 1 1-4.2 14.8l-.3-.2-2.6.7.7-2.5-.2-.3A8 8 0 0 1 12 4"/%3E%3Cpath transform="translate(12 12) scale(.36) translate(-12 -12)" d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.24 11.4 11.4 0 0 0 3.6.58 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .58 3.6 1 1 0 0 1-.25 1z"/%3E%3C/svg%3E');
	}

	/* Los .paq-btn eran display:block, así que no tenían dónde poner el
	   icono. Pasan a flex centrado: se ven exactamente igual que antes,
	   pero ahora el icono cabe al lado del texto. */
	.paq-btn[href*="wa.me"] {
		display: flex; align-items: center; justify-content: center; gap: 9px;
	}

	/* :not(:has(svg)) es lo que evita el icono doble en los cinco botones
	   que ya lo llevaban escrito en el HTML. Si un navegador viejo no
	   entiende :has(), pierde la regla entera y se queda como está hoy
	   —sin icono—, que es preferible a enseñar dos. */
	@supports selector(:has(svg)) {
		.btn[href*="wa.me"]:not(:has(svg))::before,
		.paq-btn[href*="wa.me"]:not(:has(svg))::before {
			content: "";
			flex: 0 0 auto;
			width: 1.08em; height: 1.08em;
			background-color: currentColor;
			-webkit-mask: var(--et-icono-wa) center / contain no-repeat;
			        mask: var(--et-icono-wa) center / contain no-repeat;
		}
	}