/*
 * Hoja de estilos de Ivoire Hosting.
 *
 * Los colores y la tipografía son los de la web actual, medidos sobre la página en marcha:
 *
 *   verde de marca   #49a32b   (aparecía 27 veces: es el color de los botones y los acentos)
 *   casi negro       #1d1d1d   (fondo del pie)
 *   gris del texto   #777575
 *   gris del menú    #8a8989
 *   gris oscuro      #3c3c3c
 *   borde            #e5e5e5
 *   tipografía       Roboto, 15px
 *
 * No hay ninguna biblioteca externa: ni Bootstrap, ni jQuery, ni fuentes de iconos. Todo lo
 * que se ve aquí está escrito a mano, que es lo que hace que la página pese poco.
 */

/* ── Base ──────────────────────────────────────────────────────────────────── */

:root {
	/* Verde de marca: el color de los botones de compra y de los acentos principales. */
	--verde: #49a32b;
	--verde-oscuro: #3d8a24;
	--verde-claro: #eef7ea;

	/*
	 * ─────────────────────────────────────────────────────────────────────────
	 * UN VERDE PARA EL TEXTO, DISTINTO DEL VERDE DE LA MARCA
	 * ─────────────────────────────────────────────────────────────────────────
	 *
	 * El verde de la marca (#49a32b) es un color claro: sobre blanco da un contraste de 3,20:1,
	 * y el mínimo para texto normal son 4,5:1. Ni el verde oscuro de la paleta (#3d8a24, 4,32:1)
	 * llega. En cambio, como RELLENO —un botón con el texto en blanco, una banda entera— el
	 * verde de la marca funciona y es el que da la identidad del sitio.
	 *
	 * De ahí que haya dos: uno para pintar superficies y otro para escribir. Es lo que separa
	 * «el color de la marca» de «el color con el que se lee la marca».
	 *
	 *   #3a7f22 sobre blanco 4,95 · tarjeta 4,83 · fondo gris 4,62 · verde claro 4,51
	 *
	 * Los botones, las bandas, los bordes y los degradados siguen con `--verde` exacto: el
	 * cambio se ve en los enlaces y en las etiquetas, y es de un tono.
	 */
	--verde-texto: #3a7f22;
	--verde-texto-oscuro: #2f6a1b;

	/*
	 * NARANJA. También es color de la web: el tema actual lo usa en las cajas de precios
	 * (#de6724), en el precio (#f8955d) y en los iconos (#f2675d). Se recupera como color
	 * secundario, para lo que tiene que llamar la atención sin ser el botón de compra: la
	 * etiqueta de «primer mes gratis», los antetítulos, y el producto WebTPV, que es otra
	 * cosa distinta del alojamiento y conviene que se vea distinta.
	 */
	--naranja: #de6724;
	--naranja-oscuro: #bf5418;
	--naranja-claro: #f8955d;
	--naranja-suave: #fdf1e8;

	/*
	 * Turquesa: el tercer color que ya estaba en el tema.
	 *
	 * Estaba definido pero no se usaba en ninguna parte, y por eso la web sólo enseñaba verde.
	 * Desde el 24 de septiembre es el SEGUNDO color de la casa, junto al verde: entra en los
	 * bordes de las tarjetas, en los filetes de acento, en la raya del pie y en el titular de la
	 * portada, siempre formando degradado con el verde.
	 *
	 * El oscuro es para cuando va debajo de texto blanco: el turquesa claro con blanco encima se
	 * queda en 2,4:1 de contraste, que no se lee. El oscuro sube a 4,9:1, que sí.
	 */
	--turquesa: #1cbac8;
	--turquesa-claro: #6fdcea;
	--turquesa-oscuro: #127e88;
	--turquesa-suave: #e6f8fa;

	/*
	 * EL DEGRADADO DE LA MARCA. Es la pieza que se repite por toda la web: un solo sitio donde
	 * está definido y un solo cambio para rehacerlo entero.
	 */
	--degradado-marca: linear-gradient(135deg, var(--turquesa) 0%, var(--verde) 100%);
	--degradado-marca-claro: linear-gradient(135deg, var(--turquesa-claro) 0%, var(--verde) 100%);

	/*
	 * Verde de WhatsApp.
	 *
	 * Es el color propio de la aplicación, y se usa SÓLO en los botones que abren WhatsApp.
	 * Así, en cuanto se ve un botón de este verde, ya se sabe qué va a pasar al pulsarlo: es
	 * el color que la gente tiene aprendido de la aplicación. Usarlo en otros botones sería
	 * engañoso.
	 */
	--whatsapp: #25d366;
	--whatsapp-oscuro: #1da851;

	--tinta: #3c3c3c;
	--tinta-fuerte: #1d1d1d;
	/*
	 * Los dos grises del texto, y por qué valen lo que valen.
	 *
	 * ─────────────────────────────────────────────────────────────────────────
	 * ESTABAN POR DEBAJO DEL MÍNIMO LEGIBLE, Y NO SE VEÍA
	 * ─────────────────────────────────────────────────────────────────────────
	 *
	 * El mínimo de contraste para texto normal son 4,5:1. El gris de los párrafos estaba en
	 * #777575 y el de los textos secundarios en #8a8989:
	 *
	 *   #777575   blanco 4,58  ·  tarjeta 4,47  ·  fondo gris 4,27  ·  fondo verde claro 4,17
	 *   #8a8989   blanco 3,49  ·  tarjeta 3,40  ·  fondo gris 3,26  ·  verde claro 3,13
	 *
	 * Es decir: el gris de los párrafos se quedaba corto en TODAS las secciones con fondo —que
	 * son la mitad del sitio— y el de los textos secundarios no llegaba ni sobre blanco. Y son
	 * los colores que traía la plantilla vieja, así que llevaban ahí desde el principio.
	 *
	 * Con #70706f los dos pasan en los cuatro fondos que usa la web:
	 *
	 *   #70706f   blanco 4,96  ·  tarjeta 4,83  ·  fondo gris 4,63  ·  fondo verde claro 4,52
	 *
	 * A simple vista es el mismo gris. La diferencia es de una décima de contraste, y es la
	 * décima que decide si un párrafo se lee en un móvil al sol. Lo mide
	 * `_recon/verificar-contraste.mjs`, que recorre todo el texto visible del sitio y calcula
	 * el contraste contra su fondo de verdad —degradados incluidos—.
	 */
	--texto: #70706f;
	--gris-menu: #70706f;
	--borde: #e5e5e5;
	--fondo: #f7f7f7;
	--blanco: #fff;

	--ancho: 1200px;
	--radio: 6px;

	/*
	 * Sombras en dos capas: una muy fina que dibuja el borde y otra amplia y suave que da
	 * profundidad. Con una sola sombra grande, las tarjetas se ven sucias.
	 */
	--sombra: 0 1px 2px rgba(29, 29, 29, 0.05), 0 6px 18px -6px rgba(29, 29, 29, 0.1);
	--sombra-alta: 0 2px 4px rgba(29, 29, 29, 0.06), 0 20px 44px -14px rgba(29, 29, 29, 0.22);

	/* Brillos de color, para cuando el ratón pasa por encima. */
	--brillo-verde: 0 2px 6px rgba(73, 163, 43, 0.14), 0 20px 44px -14px rgba(73, 163, 43, 0.38);
	--brillo-naranja: 0 2px 6px rgba(222, 103, 36, 0.14), 0 20px 44px -14px rgba(222, 103, 36, 0.36);

	--fuente: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

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

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

body {
	margin: 0;
	font-family: var(--fuente);
	font-size: 15px;
	line-height: 1.7;
	color: var(--texto);
	background: var(--blanco);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
	margin: 0 0 0.6em;
	color: var(--tinta-fuerte);
	line-height: 1.25;
	font-weight: 700;
}

h1 {
	font-size: 38px;
	letter-spacing: -0.4px;
}

h2 {
	font-size: 28px;
}

h3 {
	font-size: 19px;
}

p {
	margin: 0 0 1.1em;
}

/*
 * Los enlaces del cuerpo del texto, en `--verde-texto` y no en el verde de la marca: sobre las
 * secciones de fondo gris, el de la marca se quedaba en 2,99:1. El porqué, en `--verde-texto`.
 */
a {
	color: var(--verde-texto);
	text-decoration: none;
}

a:hover {
	color: var(--verde-texto-oscuro);
	text-decoration: underline;
}

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

ul {
	margin: 0 0 1.1em;
	padding-left: 1.2em;
}

.contenedor {
	width: 100%;
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 0 20px;
}

/* Enlace para saltar al contenido: sólo se ve al navegar con el teclado. */
.saltar-al-contenido {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--verde);
	color: var(--blanco);
	padding: 10px 18px;
	z-index: 999;
}

.saltar-al-contenido:focus {
	left: 0;
}

/* ── Botones ───────────────────────────────────────────────────────────────── */

.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 26px;
	border-radius: var(--radio);
	border: 2px solid transparent;
	font-family: var(--fuente);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.boton:hover {
	text-decoration: none;
}

.boton-verde {
	background: var(--verde);
	color: var(--blanco);
}

.boton-verde:hover {
	background: var(--verde-oscuro);
	color: var(--blanco);
}

.boton-borde {
	background: transparent;
	border-color: var(--borde);
	color: var(--tinta);
}

.boton-borde:hover {
	border-color: var(--verde);
	color: var(--verde-texto);
}

.boton-claro {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.45);
	color: var(--blanco);
}

.boton-claro:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--blanco);
	color: var(--blanco);
}

.boton-pequeno {
	padding: 9px 18px;
	font-size: 14px;
}

.boton-ancho {
	width: 100%;
}

/* ── Cabecera ──────────────────────────────────────────────────────────────── */

/*
 * La cabecera se queda fija arriba al desplazar la página.
 *
 * Con «sticky» y no con «fixed» a propósito: «fixed» saca el elemento del flujo, así que el
 * contenido de debajo empieza en la parte de arriba de la ventana y la cabecera lo tapa. Con
 * «sticky» la cabecera ocupa su sitio y se queda pegada al llegar arriba, que es lo que se
 * quiere y no obliga a dejarle un hueco a mano.
 *
 * OJO: para que «sticky» funcione, ningún antepasado puede tener overflow distinto de
 * «visible». Si algún día la cabecera deja de quedarse fija, mirar ahí primero.
 */
.cabecera {
	background: var(--blanco);
	border-bottom: 1px solid var(--borde);
	position: sticky;
	top: 0;
	z-index: 100;
}

/*
 * Al pulsar un enlace que salta a una sección, la cabecera fija taparía el título de esa
 * sección: esto le dice al navegador que deje ese hueco antes de parar.
 */
section[id],
div[id] {
	scroll-margin-top: 100px;
}

/* El salto hasta la sección se hace suave, salvo a quien haya pedido que nada se mueva. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.cabecera-interior {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 85px;
}

.cabecera-logo {
	flex: 0 0 auto;
	display: block;
}

.cabecera-logo img {
	width: 150px;
	height: auto;
}

/* ── Menú ──────────────────────────────────────────────────────────────────── */

.menu {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 28px;
}

.menu-lista {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.menu-entrada {
	position: relative;
}

/*
 * Entradas del menú de arriba.
 *
 * Letra pequeña y en negrita: al ser mayúsculas, una letra más pequeña se lee mejor y ocupa
 * menos, y la negrita le devuelve la presencia que pierde por el tamaño. Las mayúsculas
 * pequeñas en negrita son la combinación habitual en las barras de navegación.
 */
.menu-entrada > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 12px 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	color: var(--gris-menu);
	text-decoration: none;
	border-radius: var(--radio);
	transition: color 0.18s ease;
}

/*
 * La entrada activa (y la que tiene el ratón encima).
 *
 * SIN fondo de color: sólo cambia el color de la letra y aparece el subrayado naranja de
 * abajo. Antes llevaba una pastilla de color detrás, y en una barra blanca eso pesaba
 * demasiado: parecía un botón dentro del menú.
 */
.menu-entrada > a:hover,
.menu-entrada.activa > a {
	color: var(--naranja-oscuro);
	background: transparent;
	text-decoration: none;
}

/* La flechita del desplegable, dibujada con CSS: no hace falta fuente de iconos. */
.menu-flecha {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform 0.18s ease;
}

.menu-desplegable {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 250px;
	margin: 6px 0 0;
	padding: 8px 0;
	list-style: none;
	background: var(--blanco);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.menu-entrada.tiene-hijos:hover .menu-desplegable,
.menu-entrada.tiene-hijos:focus-within .menu-desplegable {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.menu-entrada.tiene-hijos:hover .menu-flecha {
	transform: rotate(180deg);
}

.menu-desplegable li {
	margin: 0;
}

.menu-desplegable a {
	display: block;
	padding: 9px 18px;
	font-size: 13px;
	font-weight: 700;
	color: var(--texto);
	text-decoration: none;
}

.menu-desplegable a:hover,
.menu-desplegable li.activa a {
	background: var(--fondo);
	color: var(--verde-texto);
	text-decoration: none;
}

.menu-acciones {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Botón de menú para el móvil. */
.cabecera-boton {
	display: none;
	margin-left: auto;
	width: 44px;
	height: 44px;
	padding: 11px 10px;
	background: transparent;
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	cursor: pointer;
}

.cabecera-boton-raya {
	display: block;
	height: 2px;
	background: var(--tinta);
	border-radius: 2px;
}

.cabecera-boton-raya + .cabecera-boton-raya {
	margin-top: 5px;
}

/* ── Bloques de contenido ──────────────────────────────────────────────────── */

.bloque {
	padding: 70px 0;
}

.bloque-claro {
	background: var(--fondo);
}

.bloque-blanco {
	background: var(--blanco);
}

.bloque-oscuro {
	background: var(--tinta-fuerte);
	color: #a5a5a5;
}

.bloque-oscuro h1,
.bloque-oscuro h2,
.bloque-oscuro h3 {
	color: var(--blanco);
}

.bloque-oscuro a {
	color: var(--blanco);
}

.centrado {
	text-align: center;
}

.entradilla {
	max-width: 680px;
	margin-left: auto;
	margin-right: auto;
	font-size: 17px;
	color: var(--texto);
}

.centrado .entradilla {
	margin-bottom: 44px;
}

/* ── Migas de pan ──────────────────────────────────────────────────────────── */

/*
 * «Accueil › Hébergement › Hébergement web», encima de la cabecera de cada página.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * POR QUÉ SE LE QUITA ALTURA A LA CABECERA QUE VIENE DETRÁS
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * Las migas ocupan una franja de unos 38 píxeles por encima del héroe, y el héroe ya tenía 58
 * de aire arriba. Sumados eran casi cien: la página empezaba a parecer que tenía dos
 * cabeceras. Con la regla de abajo, el hueco de arriba del héroe se reduce justo lo que ocupan
 * las migas, y el título se queda donde estaba.
 *
 * Se selecciona el hermano inmediato y no una clase en el <body> porque la cabecera de las
 * páginas es `.portada` en todas menos en los artículos de la revista, donde va dentro de un
 * `<article class="guia">`. Los dos casos están cubiertos.
 *
 * Y no se toca la portada: allí no hay migas.
 */
.migas {
	/*
	 * 16 px arriba, y no 20: con 16 la franja de las migas mide 34 px y, sumada a los 24 que le
	 * quedan a la cabecera, da 58, que es exactamente el aire que tenía el título antes de que
	 * existieran. Así el título no se ha movido ni un píxel, y se comprueba en
	 * `_recon/verificar-novedades.mjs`.
	 */
	padding: 16px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--texto);
}

.migas ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.migas li {
	display: flex;
	align-items: center;
	gap: 7px;
}

/* El separador lo pone la hoja de estilos y no el HTML: así no se copia al portapapeles
   cuando alguien selecciona la ruta, y un lector de pantalla no lo lee en voz alta. */
.migas li + li::before {
	content: '›';
	color: #b9b9b9;
}

.migas a {
	/*
	 * En `--texto` (#777575) y no en `--gris-menu` (#8a8989), que es el gris de los textos
	 * secundarios: sobre blanco, el segundo da un contraste de 3,49:1 y el mínimo legible es
	 * 4,5:1. Con `--texto` da 4,58:1. La diferencia de tono no se aprecia a simple vista —por
	 * eso se mide y no se mira—, pero es la que decide si estas migas se leen en un móvil al
	 * sol. Lo comprueba `_recon/verificar-novedades.mjs`.
	 */
	color: var(--texto);
	text-decoration: none;
}

.migas a:hover {
	color: var(--verde-texto);
	text-decoration: underline;
}

.migas [aria-current='page'] {
	color: var(--tinta-fuerte);
	font-weight: 500;
}

.migas + .portada,
.migas + .guia > .portada {
	padding-top: 24px;
}

@media (max-width: 600px) {
	.migas {
		font-size: 12px;
	}
}

/* ── Portada de la página ──────────────────────────────────────────────────── */

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * LA CABECERA DE LAS PÁGINAS INTERIORES
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * Antes era una franja oscura con el título en blanco y centrado, y no se parecía en nada a la
 * portada. Ahora es la misma pieza que el héroe de la portada: fondo blanco, el resplandor
 * turquesa y una foto a la derecha.
 *
 * LA FOTO VA DE FONDO, no en una etiqueta <img>. Y no es por comodidad: así no hay que tocar el
 * marcado de nueve páginas —cada una lleva su clase en el <body>— y además es lo correcto, porque
 * la foto es decorativa. No aporta información: el título y el texto ya lo dicen todo. Ponerla
 * como imagen obligaría a inventarle un texto alternativo que no aporta nada a quien no la ve.
 *
 * El resplandor va en un ::after y no en el fondo de la sección para que no compita con la foto:
 * son dos capas distintas y cada una se coloca donde toca.
 */
.portada {
	position: relative;
	padding: 58px 0 62px;
	overflow: hidden;
	text-align: center;
	background: var(--blanco);
	color: var(--texto);
}

/* El resplandor turquesa, el mismo que el del héroe de la portada. */
.portada::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 76% 50%, rgba(28, 186, 200, 0.2) 0%, rgba(28, 186, 200, 0) 62%);
	pointer-events: none;
}

.portada .contenedor {
	position: relative;
	z-index: 1;
}

.portada h1 {
	color: var(--tinta-fuerte);
	margin: 0 0 14px;
}

.portada p {
	max-width: 680px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.55;
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * LAS PÁGINAS CON FOTO: DOS COLUMNAS DE VERDAD
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * La primera versión ponía la foto de FONDO, y no servía: un fondo se coloca respecto a la
 * PANTALLA, no respecto al ancho del contenido. Medido en un monitor de 1440: el texto acababa en
 * el píxel 580 y la foto caía en el 1380. Ochocientos píxeles de vacío en medio.
 *
 * Con un fondo no hay manera de decir «ponte justo detrás del texto», porque el texto y el fondo
 * no se conocen entre sí. Así que se hace como en el héroe de la portada: una rejilla de dos
 * columnas que se reparten el ancho del contenido, con la foto pegada al texto.
 */
/*
 * Una caja de dos columnas: el texto a la izquierda y la foto a la derecha.
 *
 * La usan las cabeceras de las páginas interiores y también la sección de cierre «llave en mano»
 * de los revendedores, para que todo el sitio se lea igual. Por eso el nombre es genérico y no
 * «portada-algo».
 */
.portada-doble,
.doble {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 46px;
	align-items: center;
	text-align: left;
}

.doble-texto h2 {
	margin: 0 0 14px;
}

.doble-texto .entradilla {
	max-width: 560px;
	margin-bottom: 26px;
}

.doble-foto {
	display: flex;
	align-items: center;
	justify-content: center;
}

.doble-foto img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radio);
}

.portada-doble-texto h1 {
	margin: 0 0 14px;
}

.portada-doble-texto p {
	max-width: 560px;
	margin: 0;
}

.portada-doble-foto {
	display: flex;
	align-items: center;
	justify-content: center;
}

.portada-doble-foto img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

/*
 * En una pantalla estrecha no caben dos columnas: la foto baja debajo del texto y se queda con un
 * ancho razonable, sin ocupar toda la pantalla.
 */
@media (max-width: 900px) {
	.portada {
		padding: 40px 0 44px;
	}

	.portada-doble,
	.doble {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.portada-doble-foto img,
	.doble-foto img {
		max-width: 380px;
	}
}

/*
 * Las páginas con foto llevan la rejilla de dos columnas; las que no la tienen —las legales, las
 * preguntas frecuentes y los artículos— se quedan con el texto centrado de siempre.
 *
 * No hay que hacer nada especial: la rejilla la activa la clase `portada-doble`, que está puesta
 * sólo en las ocho páginas que tienen foto.
 */

/*
 * Presentación de la portada.
 *
 * FONDO BLANCO, texto a la izquierda y una imagen a la derecha.
 *
 * Por qué se cambió: antes la foto iba de fondo, con un velo oscuro encima para que el texto
 * blanco se leyera. Eso obligaba a tapar la foto justo cuando queríamos enseñarla — y la que
 * había era casi negra, así que no se veía nada de nada.
 *
 * Ahora el texto va sobre blanco, en tinta oscura, y la imagen se enseña entera al lado.
 */
/*
 * El relleno de abajo es más corto que el de arriba (34 contra 66) para que el héroe quede
 * pegado a la banda verde de las cuatro tarjetas: la presentación y lo que se vende se leen
 * seguidos, sin un hueco blanco en medio.
 *
 * «position: relative» es para el resplandor del turquesa, que se coloca con un ::after.
 */
.portada-inicio {
	position: relative;
	background: var(--blanco);
	padding: 66px 0 34px;
	overflow: hidden;
}

/*
 * Texto a la izquierda, imagen a la derecha.
 *
 * La imagen es un RECORTE: un PNG con el fondo transparente. Por eso NO lleva marco, ni
 * esquinas redondeadas, ni sombra. Se apoya directamente sobre el blanco y parece formar
 * parte de la página. Ponerle un marco a un recorte es justo lo que hace que se note que es
 * «una imagen pegada encima».
 */
.portada-interior {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 46px;
	align-items: center;
}

.portada-texto {
	text-align: left;
}

.portada-inicio h1 {
	color: var(--tinta-fuerte);
	font-size: 46px;
	line-height: 1.14;
	margin: 0 0 18px;
}

/*
 * La parte del título en color.
 *
 * Es el mismo recurso que usaba el tema anterior: el título partido en dos tonos, con lo
 * importante en color. Aquí se destaca «en Côte d'Ivoire», que es justo lo que nos diferencia
 * de cualquier hébergeur extranjero.
 */
.portada-inicio h1 .destacado {
	color: var(--verde);
}

/* El título va partido en dos líneas: «Votre hébergeur web» y debajo «en Côte d'Ivoire». */
.portada-inicio h1 .linea-dos {
	display: block;
}

.portada-subtitulo {
	max-width: 560px;
	margin: 0 0 34px;
	font-size: 19px;
	line-height: 1.55;
	color: var(--texto);
}

.portada-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

/* El recorte de la derecha: sin marco, sin sombra, tal cual sobre el blanco. */
.portada-imagen {
	display: flex;
	justify-content: center;
	align-items: center;
}

.portada-imagen img {
	display: block;
	width: 100%;
	max-width: 560px;
	height: auto;
}

/* En pantallas estrechas, el texto arriba y la imagen debajo. */
@media (max-width: 900px) {
	.portada-interior {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.portada-inicio {
		padding: 50px 0;
	}

	.portada-inicio h1 {
		font-size: 33px;
	}

	.portada-texto {
		text-align: center;
	}

	.portada-subtitulo {
		margin-left: auto;
		margin-right: auto;
	}

	.portada-acciones {
		justify-content: center;
	}

	.portada-imagen img {
		max-width: 380px;
	}
}

/*
 * La foto, como imagen.
 *
 * Sin velo y sin recorte: se ve tal cual. Lleva las esquinas redondeadas y la misma sombra que
 * las tarjetas, para que parezca parte del diseño y no una imagen pegada encima.
 */
.portada-foto {
	position: relative;
	max-width: var(--ancho);
	margin: 54px auto 0;
	border-radius: var(--radio);
	overflow: hidden;
	box-shadow: var(--sombra-alta);
}

.portada-foto img {
	display: block;
	width: 100%;
	height: auto;
}

/* Una franja con los colores de la marca debajo de la foto. */
.portada-foto::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--verde) 0%, var(--turquesa) 50%, var(--naranja) 100%);
}

/* Texto que sólo leen los lectores de pantalla: lo necesitan las etiquetas de formulario. */
.oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.servicio {
	display: flex;
	flex-direction: column;
	padding: 30px 24px;
	height: 100%;
}

.servicio h3 {
	margin-bottom: 8px;
}

.servicio-para {
	margin: 0 0 20px;
	font-size: 14px;
	min-height: 3em;
}

.servicio .lista-vistos {
	font-size: 14px;
}

.servicio-nota {
	margin: 0 0 16px;
	font-size: 14px;
	font-weight: 700;
	color: var(--verde-texto);
}

.servicio .boton {
	margin-top: auto;
}

/* ── Rejillas y tarjetas ───────────────────────────────────────────────────── */

.rejilla {
	display: grid;
	gap: 26px;
}

.rejilla-2 {
	grid-template-columns: repeat(2, 1fr);
}

.rejilla-3 {
	grid-template-columns: repeat(3, 1fr);
}

.rejilla-4 {
	grid-template-columns: repeat(4, 1fr);
}

/*
 * Tarjetas.
 *
 * Antes eran planas: un borde gris y poco más. Ahora llevan tres cosas que las hacen verse
 * trabajadas sin recargarlas:
 *
 *   1. Un degradado muy suave, de blanco a gris casi imperceptible. Le quita el aspecto de
 *      rectángulo pegado encima del fondo.
 *   2. Una barra de color arriba que CRECE al pasar el ratón. Es el detalle que hace que la
 *      tarjeta responda al visitante.
 *   3. Una sombra con el color de la marca, en vez de gris. Al pasar el ratón la tarjeta se
 *      levanta y la sombra se tiñe.
 */
.tarjeta,
.plan,
.servicio,
.guia-tarjeta {
	position: relative;
	overflow: hidden;

	/*
	 * ─────────────────────────────────────────────────────────────────────────
	 * EL BORDE DE 2 PÍXELES CON DEGRADADO
	 * ─────────────────────────────────────────────────────────────────────────
	 *
	 * Antes era «1px solid #e5e5e5», un gris que apenas se veía. Ahora son 2 píxeles con el
	 * degradado de la marca (turquesa → verde), que es lo que hace que las tarjetas tengan
	 * presencia y que el color nuevo se vea por toda la web.
	 *
	 * El truco son DOS fondos superpuestos:
	 *
	 *   · el primero, el blanco de la tarjeta, se queda dentro del relleno (padding-box)
	 *   · el segundo, el degradado, llega hasta el borde (border-box)
	 *   · y el borde es transparente, así que por él se ve el degradado de debajo
	 *
	 * Es la forma de tener un borde con degradado sin imágenes ni elementos de más, y como el
	 * borde es un borde de verdad, sigue ocupando su sitio en la maquetación.
	 */
	border: 2px solid transparent;
	background:
		linear-gradient(180deg, var(--blanco) 0%, #fcfcfd 100%) padding-box,
		var(--degradado-marca) border-box;

	border-radius: var(--radio);
	box-shadow: var(--sombra);
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

/* La barra de arriba, que crece de izquierda a derecha, con el degradado de la marca. */
.tarjeta::before,
.plan::before,
.servicio::before,
.guia-tarjeta::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--degradado-marca);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.28s ease;
}

.tarjeta:hover,
.plan:hover,
.servicio:hover,
.guia-tarjeta:hover {
	transform: translateY(-5px);
	border-color: var(--verde);
	box-shadow: var(--brillo-verde);
}

.tarjeta:hover::before,
.plan:hover::before,
.servicio:hover::before,
.guia-tarjeta:hover::before {
	transform: scaleX(1);
}

.tarjeta {
	padding: 28px 24px;
}

.tarjeta h3 {
	margin-bottom: 8px;
}

.tarjeta p:last-child {
	margin-bottom: 0;
}

/* Raya de la marca encima del título, siempre visible: da color desde el primer vistazo. */
.tarjeta-linea::before {
	content: '';
	display: block;
	position: static;
	width: 32px;
	height: 4px;
	background: var(--degradado-marca);
	border-radius: 2px;
	margin-bottom: 16px;
	transform: none;
	transition: width 0.28s ease, background-color 0.28s ease;
}

/* Y al pasar el ratón la raya se alarga. */
.tarjeta-linea:hover::before {
	width: 56px;
}

/* ── Listas con visto ──────────────────────────────────────────────────────── */

.lista-vistos {
	list-style: none;
	margin: 0 0 1.4em;
	padding: 0;
}

.lista-vistos li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 9px;
	line-height: 1.5;
}

/* El visto se dibuja con CSS: ahorra cargar una fuente de iconos entera. */
.lista-vistos li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0.42em;
	width: 10px;
	height: 5px;
	border-left: 2px solid var(--verde);
	border-bottom: 2px solid var(--verde);
	transform: rotate(-45deg);
}

/* ── Planes ────────────────────────────────────────────────────────────────── */

.plan {
	display: flex;
	flex-direction: column;
	padding: 30px 24px;
	height: 100%;
}

/*
 * El plan recomendado: en vez del borde verde plano, un borde MÁS GRUESO con el degradado
 * claro. Se distingue de las otras tres tarjetas de un vistazo, sin necesidad de cambiarle el
 * fondo ni de meter una etiqueta.
 */
.plan-destacado {
	border-width: 3px;
	background:
		linear-gradient(180deg, var(--blanco) 0%, #fcfcfd 100%) padding-box,
		var(--degradado-marca-claro) border-box;
	box-shadow: 0 1px 2px rgba(73, 163, 43, 0.1), 0 12px 28px -12px rgba(28, 186, 200, 0.45);
}

.plan-destacado::before {
	transform: scaleX(1);
}

.plan-etiqueta {
	align-self: flex-start;
	background: var(--verde-claro);
	color: var(--verde-texto);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	padding: 5px 12px;
	border-radius: 100px;
	margin-bottom: 14px;
}

/*
 * El nombre del plan, centrado y en una o dos líneas.
 *
 * Los nombres de creación de webs llevan la aclaración debajo —«Landing Page» y «(Site
 * Vitrine)»—, así que el título se centra para que las dos líneas queden equilibradas y las
 * cuatro tarjetas se lean igual, tengan una línea o dos.
 */
.plan h3 {
	margin-bottom: 4px;
	font-size: 21px;
	text-align: center;
	line-height: 1.25;
}

/* La aclaración del nombre, más pequeña y en gris: acompaña, no compite. */
.plan-nombre2 {
	display: inline-block;
	margin-top: 2px;
	font-size: 16px;
	font-weight: 500;
	color: var(--texto);
}

.plan-precio {
	margin: 0 0 8px;
	font-size: 15px;
	color: var(--texto);
}

.plan-precio strong {
	font-size: 32px;
	font-weight: 700;
	color: var(--tinta-fuerte);
	letter-spacing: -0.5px;
}

.plan-para {
	margin: 0 0 20px;
	font-size: 14px;
	min-height: 3em;
}

.plan .lista-vistos {
	font-size: 14px;
}

.plan .boton {
	margin-top: auto;
}

/* ── Buscador de dominios ──────────────────────────────────────────────────── */

.buscador {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 720px;
	margin: 0 auto 20px;
}

.buscador input[type='text'] {
	flex: 1 1 18rem;
	min-width: 0;
	height: 50px;
	padding: 0 16px;
	border: 2px solid var(--borde);
	border-radius: var(--radio);
	font-family: var(--fuente);
	font-size: 15px;
	color: var(--tinta);
	background: var(--blanco);
}

.buscador input[type='text']:focus {
	outline: none;
	border-color: var(--verde);
}

.buscador select {
	height: 50px;
	padding: 0 12px;
	border: 2px solid var(--borde);
	border-radius: var(--radio);
	font-family: var(--fuente);
	font-size: 15px;
	background: var(--blanco);
	color: var(--tinta);
}

.buscador button {
	height: 50px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--radio);
	background: var(--verde);
	color: var(--blanco);
	font-family: var(--fuente);
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.buscador button:hover {
	background: var(--verde-oscuro);
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * LAS CINCO EXTENSIONES CON SU PRECIO, DEBAJO DEL BUSCADOR
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * Antes era una sola línea de texto —«.com 12.950 Fcfa HT · .net 12.950 Fcfa HT · …»— y se leía
 * como una nota al pie: cinco precios seguidos, todos iguales, y el ojo no sabía dónde parar.
 *
 * Ahora cada extensión es una etiqueta con el borde de marca de dos píxeles, igual que las
 * tarjetas del resto del sitio, y dentro hay dos cosas y sólo dos: la extensión, en el verde con
 * el que se escribe, y el precio, en negro y en negrita. Se ve dónde empieza y dónde acaba cada
 * precio sin leerlo.
 *
 * Las cinco van en una fila y se reparten el ancho; en el móvil bajan a dos o tres por fila, que
 * es lo que cabe. La rejilla se encarga sola, sin medidas fijas.
 */
.precios-dominio {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.precio-dominio {
	flex: 1 1 150px;
	max-width: 200px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 14px 12px 12px;

	/* El mismo borde de marca que las tarjetas: el degradado asoma por un borde transparente. */
	border: 2px solid transparent;
	border-radius: var(--radio);
	background:
		linear-gradient(180deg, var(--blanco) 0%, #fcfcfd 100%) padding-box,
		var(--degradado-marca) border-box;
	box-shadow: var(--sombra);
}

/* La extensión, en el verde con el que se escribe: sobre blanco, el de la marca no llega al
   mínimo de contraste. */
.precio-dominio-ext {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.2px;
	color: var(--verde-texto);
}

.precio-dominio-cifra {
	font-size: 13px;
	color: var(--texto);
	white-space: nowrap;
}

.precio-dominio-cifra strong {
	font-size: 16px;
	font-weight: 700;
	color: var(--tinta-fuerte);
}

/*
 * El .ci, marcado.
 *
 * No es un capricho de color: es la extensión que quieren casi todos los clientes de aquí —una
 * web que se busca desde Abidjan—, así que se distingue de un vistazo sin tener que leer los
 * cinco precios. Va con el fondo verde claro de la paleta y el borde de marca.
 */
.precio-dominio-local {
	background:
		linear-gradient(180deg, var(--verde-claro) 0%, var(--verde-claro) 100%) padding-box,
		var(--degradado-marca) border-box;
}

.precios-dominio small {
	font-size: 12px;
	color: var(--texto);
}

/* ── Preguntas frecuentes ──────────────────────────────────────────────────── */

.faq {
	max-width: 820px;
	margin: 0 auto;
}

.faq details {
	background: var(--blanco);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	padding: 20px 24px;
	margin-bottom: 10px;
}

.faq summary {
	font-weight: 700;
	color: var(--tinta-fuerte);
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 36px;
}

.faq summary::-webkit-details-marker {
	display: none;
}

.faq summary::after {
	content: '+';
	position: absolute;
	right: 0;
	top: -2px;
	font-size: 22px;
	font-weight: 400;
	color: var(--verde);
	line-height: 1;
}

.faq details[open] summary::after {
	content: '−';
}

.faq details p {
	margin: 12px 0 0;
	font-size: 14.5px;
}

/* ── Contacto ──────────────────────────────────────────────────────────────── */

.lista-contacto {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lista-contacto li {
	margin-bottom: 18px;
}

.contacto-etiqueta {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.7px;
	color: var(--gris-menu);
	margin-bottom: 5px;
}

.formulario .campo {
	margin-bottom: 16px;
}

.formulario label {
	display: block;
	font-weight: 700;
	color: var(--tinta-fuerte);
	margin-bottom: 6px;
	font-size: 14px;
}

.formulario input[type='text'],
.formulario input[type='email'],
.formulario input[type='tel'],
.formulario textarea {
	width: 100%;
	padding: 11px 14px;
	border: 2px solid var(--borde);
	border-radius: var(--radio);
	font-family: var(--fuente);
	font-size: 15px;
	color: var(--tinta);
	background: var(--blanco);
}

.formulario input:focus,
.formulario textarea:focus {
	outline: none;
	border-color: var(--verde);
}

.formulario textarea {
	resize: vertical;
}

.obligatorio {
	color: #c0392b;
}

.opcional {
	font-weight: 400;
	color: var(--gris-menu);
	font-size: 13px;
}

/* El campo trampa: fuera de la pantalla, pero no con display:none, porque algunos robots
   lo detectan y no lo rellenan. */
.trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.aviso {
	padding: 14px 18px;
	border-radius: var(--radio);
	margin-bottom: 20px;
	font-size: 14.5px;
	border-left: 4px solid;
}

.aviso-ok {
	background: var(--verde-claro);
	border-color: var(--verde);
	color: #2f6b1c;
}

.aviso-error {
	background: #fdecea;
	border-color: #c0392b;
	color: #8e2b20;
}

/* Aviso informativo: para explicar algo, en vez de avisar de un error. */
.aviso-info {
	background: #f2f6fb;
	border-color: #4a7fb5;
	color: #2c4a6b;
}

.aviso-info strong {
	color: #1d3550;
}

/* Cuando un plan todavía no tiene un precio confirmado, no se inventa una cifra. */
.plan-devis strong {
	font-size: 24px;
	color: var(--verde-texto);
}

/* ── Documentos legales ────────────────────────────────────────────────────── */

.documento-legal {
	max-width: 820px;
}

.documento-legal h2 {
	font-size: 21px;
	margin-top: 36px;
}

.documento-legal h3 {
	font-size: 17px;
	margin-top: 26px;
}

.documento-legal p,
.documento-legal li {
	font-size: 14.5px;
}

.documento-legal table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.2em;
	font-size: 14px;
}

.documento-legal th,
.documento-legal td {
	border: 1px solid var(--borde);
	padding: 9px 12px;
	text-align: left;
}

.documento-legal th {
	background: var(--fondo);
	color: var(--tinta-fuerte);
}

/* ── Pie ───────────────────────────────────────────────────────────────────── */

.pie {
	position: relative;
	background: var(--tinta-fuerte);
	color: #8a8a8a;
	padding: 60px 0 30px;
	font-size: 14px;
}

/*
 * La raya del degradado en la parte de arriba del pie.
 *
 * Va aquí, y no en una sección, porque el pie sale en TODAS las páginas: es la forma de que el
 * color de la marca esté presente hasta en la última franja de la web.
 */
.pie::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--degradado-marca);
}

.pie-columnas {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 44px;
	padding-bottom: 40px;
	border-bottom: 1px solid #2e2e2e;
}

.pie-logo {
	width: 170px;
	height: auto;
	margin-bottom: 18px;
}

.pie-texto {
	color: #8a8a8a;
	margin-bottom: 20px;
	max-width: 340px;
}

.pie-titulo {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--blanco);
	margin-bottom: 16px;
}

.pie-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pie-lista li {
	margin-bottom: 9px;
}

.pie-lista a {
	color: #8a8a8a;
	text-decoration: none;
}

.pie-lista a:hover {
	color: var(--verde);
	text-decoration: none;
}

.pie-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-top: 24px;
}

.pie-copyright {
	margin: 0;
	/*
	 * El mismo gris que el resto del pie (#8a8a8a) y no el #6f6f6f que tenía.
	 *
	 * Sobre el fondo casi negro del pie, #6f6f6f da un contraste de 3,35:1 y el mínimo es 4,5:1:
	 * el aviso de copyright y, peor, los seis enlaces legales —privacidad, cookies, condiciones
	 * de venta— eran lo menos legible de toda la web. Con #8a8a8a, que es el color que ya usaba
	 * el resto del pie, sube a 4,88:1. No hay color nuevo: se unifica.
	 */
	color: #8a8a8a;
}

.pie-legal-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
}

.pie-legal-lista a {
	/* Sobre el fondo oscuro del pie, #6f6f6f se quedaba en 3,35:1. El porqué, arriba. */
	color: #8a8a8a;
	text-decoration: none;
}

.pie-legal-lista a:hover {
	color: var(--verde);
	text-decoration: none;
}

/* ── Móvil ─────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
	.rejilla-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.pie-columnas {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
	}

	.pie-marca {
		grid-column: 1 / -1;
	}
}

@media (max-width: 900px) {
	h1 {
		font-size: 30px;
	}

	h2 {
		font-size: 23px;
	}

	.bloque {
		padding: 50px 0;
	}
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * EL MENÚ SE PLIEGA ANTES QUE EL RESTO DE LA PÁGINA
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * A 1060 píxeles y no a 900. Con seis entradas en el menú —la última, «Guides»— más los dos
 * botones de la derecha, a 1024 píxeles (el ancho de una tableta en horizontal) ya no cabía:
 * la cabecera empujaba el ancho de la página y salía una barra de desplazamiento horizontal.
 * Medido: el documento pasaba de 1024 a 1061 píxeles.
 *
 * Se pliega antes el menú, que es lo que no cabía; el resto de la página —tamaño de los
 * títulos, aire de las secciones— sigue cambiando a 900, que es donde toca.
 */
@media (max-width: 1060px) {
	/* En la tableta y en el móvil el menú se pliega y se despliega con el botón. */
	.cabecera-boton {
		display: block;
	}

	.menu {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin: 0;
		padding: 12px 20px 22px;
		background: var(--blanco);
		border-bottom: 1px solid var(--borde);
		box-shadow: var(--sombra);
	}

	.menu.abierto {
		display: flex;
	}

	.menu-lista {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.menu-entrada > a {
		padding: 14px 0;
		border-bottom: 1px solid var(--borde);
		border-radius: 0;
	}

	.menu-desplegable {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-radius: 0;
		margin: 0;
		padding: 0 0 6px 14px;
		display: none;
	}

	.menu-entrada.abierta .menu-desplegable {
		display: block;
	}

	.menu-acciones {
		margin-top: 16px;
		flex-direction: column;
		align-items: stretch;
	}
}

@media (max-width: 640px) {
	.rejilla-2,
	.rejilla-3,
	.rejilla-4 {
		grid-template-columns: 1fr;
	}

	.plan-para {
		min-height: 0;
	}

	.buscador {
		flex-direction: column;
	}

	.buscador input[type='text'],
	.buscador select,
	.buscador button {
		width: 100%;
	}

	.pie-columnas {
		grid-template-columns: 1fr;
	}

	.pie-legal {
		flex-direction: column;
		align-items: flex-start;
	}

	.portada {
		padding: 40px 0 44px;
	}
}

/* ── Antetítulo: la etiqueta pequeña encima de un título de sección ────────── */

.antetitulo {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--verde-texto);
	margin: 0 0 10px;
}

/* ── WebTPV ────────────────────────────────────────────────────────────────── */

/*
 * La sección del TPV va sobre fondo oscuro para que se vea que es otro producto, no una
 * página más de hosting. Se lee como un bloque propio dentro de la portada.
 */
.bloque-webtpv {
	background: var(--tinta-fuerte);
	color: #a8a8a8;
}

.bloque-webtpv h2,
.bloque-webtpv h3 {
	color: var(--blanco);
}

/*
 * El antetítulo del bloque de WebTPV va en el verde de la marca, NO en el verde de texto.
 *
 * Y no es un descuido, es lo contrario: esa franja tiene fondo oscuro. Sobre oscuro, el verde
 * claro de la marca da 4,72:1 y se lee bien; el verde de texto, que es más oscuro, se queda en
 * 3,40:1. El verde de texto es para escribir sobre claro, y aquí se escribe sobre oscuro.
 */
.bloque-webtpv .antetitulo {
	color: var(--verde);
}

.bloque-webtpv .entradilla {
	color: #a8a8a8;
}

/* Cada tipo de comercio es un enlace a su demostración. */
.sector {
	display: block;
	background: #262626;
	border: 1px solid #333;
	border-radius: var(--radio);
	padding: 26px 22px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.sector:hover {
	background: #2e2e2e;
	border-color: var(--verde);
	text-decoration: none;
	transform: translateY(-3px);
}

.sector h3 {
	margin: 0 0 8px;
	font-size: 17px;
}

.sector p {
	margin: 0 0 16px;
	font-size: 14px;
	color: #9a9a9a;
}

/* Igual que el antetítulo del bloque: estas tarjetas tienen fondo oscuro, así que el verde que
   toca es el claro de la marca (4,7:1), no el de texto (3,0:1). */
.sector-enlace {
	font-size: 14px;
	font-weight: 700;
	color: var(--verde);
}

.webtpv-precio {
	max-width: 720px;
	margin: 44px auto 0;
	padding-top: 36px;
	border-top: 1px solid #333;
	text-align: center;
}

.webtpv-cifra {
	margin: 0 0 14px;
	color: var(--blanco);
}

.webtpv-cifra strong {
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -1px;
}

.webtpv-cifra span {
	font-size: 18px;
	color: #9a9a9a;
}

/* «Primer mes gratis»: el gancho, en una etiqueta verde. */
.webtpv-cifra em {
	display: inline-block;
	margin-left: 12px;
	padding: 5px 14px;
	background: var(--verde);
	color: var(--blanco);
	font-size: 13px;
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 100px;
	vertical-align: middle;
}

.webtpv-nota {
	max-width: 620px;
	margin: 0 auto 26px;
	font-size: 15px;
	color: #9a9a9a;
}

.webtpv-botones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
}

@media (max-width: 781px) {
	.webtpv-cifra strong {
		font-size: 34px;
	}

	.webtpv-cifra em {
		display: block;
		margin: 10px auto 0;
		width: fit-content;
	}

	.webtpv-botones .boton {
		width: 100%;
	}
}

/* ── Revista ───────────────────────────────────────────────────────────────── */

.guia-categoria {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--verde-texto);
	margin-bottom: 10px;
}

/*
 * Aquí estaba `.guia-categoria-claro`, un verde claro (#8ed46f) para la etiqueta de categoría
 * que va encima del título de un artículo.
 *
 * Era de cuando la cabecera de los artículos era una franja OSCURA. Al pasar la cabecera a
 * fondo blanco, aquel verde claro se quedó sobre blanco: un contraste de 1,78:1, es decir,
 * prácticamente invisible —y era la etiqueta que dice de qué va el artículo—. Nadie lo vio
 * porque el cambio de cabecera se hizo en otra sesión y esta clase quedó suelta.
 *
 * Ahora la etiqueta del artículo usa el mismo verde que la de las tarjetas del listado, que es
 * lo que tiene que ser: la misma etiqueta, el mismo color en los dos sitios.
 */

/*
 * Las tarjetas de la revista.
 *
 * Sólo se declara lo que las distingue: son de columna (para que la fecha y el «Lire →» se
 * apoyen abajo, alineados en las tres) y un poco menos de relleno que las demás, porque
 * llevan menos texto.
 *
 * El borde, el fondo y la sombra NO se repiten aquí: ya los pone la regla común de las
 * tarjetas, arriba. Estaban repetidos, y como esta regla va después, ganaba ella: las
 * tarjetas de la revista salían con un borde gris de un píxel mientras todas las demás
 * llevaban el borde de dos píxeles con el degradado de la marca. Al quitar la repetición,
 * las de la revista se ven como el resto.
 */
.guia-tarjeta {
	display: flex;
	flex-direction: column;
	padding: 26px 24px;
	text-decoration: none;
	color: inherit;
}

.guia-tarjeta:hover {
	text-decoration: none;
}

.guia-tarjeta h2,
.guia-tarjeta h3 {
	font-size: 19px;
	margin: 0 0 10px;
	line-height: 1.35;
}

.guia-tarjeta p {
	font-size: 14.5px;
	color: var(--texto);
	margin: 0 0 18px;
}

.guia-pie {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	font-size: 13px;
	color: var(--gris-menu);
}

.guia-leer {
	font-weight: 700;
	color: var(--verde-texto);
}

/* El texto del artículo: se lee cómodo, sin líneas demasiado largas. */
.guia-texto {
	max-width: 760px;
	margin: 0 auto;
}

.guia-texto h2 {
	font-size: 25px;
	margin-top: 42px;
	padding-top: 6px;
}

.guia-texto h3 {
	font-size: 18px;
	margin-top: 28px;
}

.guia-texto p,
.guia-texto li {
	font-size: 16.5px;
	line-height: 1.75;
	color: #5c5c5c;
}

/* El primer párrafo, más grande: es la respuesta directa a lo que se preguntó. */
.guia-texto > p:first-of-type {
	font-size: 19px;
	line-height: 1.65;
	color: var(--tinta);
}

.guia-texto ul,
.guia-texto ol {
	padding-left: 1.4em;
}

.guia-texto li {
	margin-bottom: 8px;
}

.guia-texto strong {
	color: var(--tinta-fuerte);
}

.guia-texto table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.4em;
	font-size: 15px;
}

.guia-texto th,
.guia-texto td {
	border: 1px solid var(--borde);
	padding: 11px 14px;
	text-align: left;
}

.guia-texto th {
	background: var(--fondo);
	color: var(--tinta-fuerte);
}

/* De leer a contratar. */
.guia-llamada {
	max-width: 760px;
	margin: 52px auto 0;
	padding: 32px 30px;
	background: var(--fondo);
	border-left: 4px solid var(--verde);
	border-radius: var(--radio);
}

.guia-llamada h2 {
	font-size: 21px;
	margin: 0 0 10px;
}

.guia-llamada p {
	font-size: 15.5px;
	margin: 0 0 20px;
	color: var(--texto);
}

.guia-llamada-botones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 !important;
}

@media (max-width: 640px) {
	.guia-texto p,
	.guia-texto li {
		font-size: 16px;
	}

	.guia-texto > p:first-of-type {
		font-size: 17.5px;
	}

	.guia-llamada-botones .boton {
		width: 100%;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   DISEÑO: color y respuesta al ratón
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Botones: se levantan y su sombra se tiñe ─────────────────────────────── */

.boton {
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease,
		transform 0.2s ease, box-shadow 0.2s ease;
}

.boton-verde:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px -4px rgba(73, 163, 43, 0.55);
}

.boton-borde:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px -6px rgba(29, 29, 29, 0.28);
}

.boton-claro:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.4);
}

/*
 * Botón de WhatsApp.
 *
 * Lleva el verde propio de la aplicación (#25d366). Se usa SÓLO en los botones que abren
 * WhatsApp: así, en cuanto se ve uno de este color, ya se sabe qué va a pasar al pulsarlo.
 * Es el color que la gente tiene aprendido, y usarlo en otros botones sería engañoso.
 */
.boton-whatsapp {
	background: var(--whatsapp);
	color: var(--blanco);
}

.boton-whatsapp:hover {
	/* El color NO cambia: #25D366 en todo momento. */
	background: var(--whatsapp);
	color: var(--blanco);
	transform: translateY(-2px);
	box-shadow: 0 6px 18px -4px rgba(37, 211, 102, 0.6);
}

/* El botón naranja, para lo que no es una compra directa. */
.boton-naranja {
	background: var(--naranja);
	color: var(--blanco);
}

.boton-naranja:hover {
	background: var(--naranja-oscuro);
	color: var(--blanco);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px -4px rgba(222, 103, 36, 0.55);
}

/* ── Antetítulos: verde o naranja, para dar ritmo a la página ─────────────── */

/*
 * El antetítulo naranja, en el naranja OSCURO de la paleta.
 *
 * El naranja de la marca (#de6724) sobre blanco da 3,46:1 y el mínimo para texto de 13 px son
 * 4,5:1. Es el mismo caso que el verde de texto, pero el naranja oscuro ya estaba en la paleta:
 * `--naranja-oscuro` (#bf5418) da 4,67:1 sobre blanco, así que no hay que inventar ningún color.
 * Este antetítulo es el que va encima del titular de la portada, y a 13 px y en negrita se lee
 * mucho mejor así.
 *
 * Donde el antetítulo va sobre una banda de color —el naranja del cierre, el verde— manda la
 * regla de la banda, que lo pinta en blanco. Aquí sólo se está cambiando el de fondo claro.
 */
.antetitulo-naranja {
	color: var(--naranja-oscuro);
}

/* ── Sección con foto al lado del texto ───────────────────────────────────── */

.seccion-foto {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 54px;
	align-items: center;
}

.seccion-foto-texto h2 {
	text-align: left;
	margin-bottom: 16px;
}

.seccion-foto-texto .antetitulo {
	text-align: left;
}

.seccion-foto-texto p {
	font-size: 16.5px;
	color: var(--texto);
}

/* La foto, con el mismo trato que las tarjetas: esquinas y sombra. */
.seccion-foto-imagen {
	position: relative;
	border-radius: var(--radio);
	overflow: hidden;
	box-shadow: var(--sombra-alta);
}

.seccion-foto-imagen img {
	display: block;
	width: 100%;
	height: auto;
}

/* Una franja de color debajo de la foto, que la asienta. */
.seccion-foto-imagen::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--verde), var(--turquesa));
}

@media (max-width: 900px) {
	.seccion-foto {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

/* ── WebTPV: cada tipo de comercio con su captura ─────────────────────────── */

.sector {
	overflow: hidden;
	padding: 0;
}

.sector img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top center;
	border-bottom: 1px solid #333;
}

.sector-cuerpo {
	padding: 22px 22px 26px;
}

.sector h3 {
	margin: 0 0 8px;
}

.sector p {
	margin: 0 0 14px;
}

/* Al pasar el ratón, el borde se vuelve naranja: el color del producto. */
.sector:hover {
	border-color: var(--naranja);
	box-shadow: var(--brillo-naranja);
}

.sector:hover .sector-enlace {
	color: var(--naranja-claro);
}

/* La etiqueta de «primer mes gratis» en naranja: llama más la atención que en verde. */
.webtpv-cifra em {
	background: var(--naranja);
}

/* ── Enlaces del pie: responden en color ──────────────────────────────────── */

.pie-lista a,
.pie-legal-lista a {
	transition: color 0.18s ease, padding-left 0.18s ease;
}

.pie-lista a:hover {
	color: var(--naranja-claro);
	padding-left: 4px;
	text-decoration: none;
}

/* ── Menú: subrayado que crece al pasar el ratón ──────────────────────────── */

.menu-entrada > a {
	position: relative;
}

.menu-entrada > a::after {
	content: '';
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 6px;
	height: 2px;
	background: var(--naranja);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s ease;
}

.menu-entrada > a:hover::after,
.menu-entrada.activa > a::after {
	transform: scaleX(1);
}

@media (max-width: 900px) {
	.menu-entrada > a::after {
		display: none;
	}
}

/* ── Listas con visto: el visto se vuelve naranja al pasar el ratón ───────── */

.lista-vistos li {
	transition: color 0.18s ease;
}

.lista-vistos li::before {
	transition: border-color 0.18s ease;
}

.plan:hover .lista-vistos li::before {
	border-color: var(--naranja);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUSCADOR DE DOMINIOS SOBRE FONDO VERDE
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * La banda del buscador va en verde de marca.
 *
 * Al cambiar el fondo hay que cambiar TODO lo que va encima, o queda ilegible. Los tres
 * cambios que importan:
 *
 *   1. El título y los textos pasan a blanco.
 *   2. El botón deja de ser verde —sobre verde no se vería— y pasa a NEGRO. Es lo que más
 *      contraste da sobre el verde y lo que se distingue de un vistazo, que es justo lo que
 *      queremos en el botón que más se pulsa de la web.
 *   3. Los precios de las extensiones pasan a blanco, y la nota final a blanco con algo de
 *      transparencia: se lee, pero no compite con los precios.
 */
/*
 * La banda verde y las de cierre llevan lo mismo: el degradado de la marca y el texto en blanco.
 *
 * Se listan juntas porque son la misma pieza usada en dos sitios: la banda de después del héroe y
 * las secciones de cierre de cada página. Si algún día se cambia el degradado, se cambia en
 * `--degradado-marca` y cambian las dos.
 *
 * Va del verde de la marca a un turquesa OSCURO, no al claro: con el turquesa claro debajo, el
 * texto blanco se quedaría en 2,4:1 de contraste y no se leería. El oscuro da 4,9:1.
 */
.bloque-verde,
.bloque-cta {
	background: linear-gradient(135deg, var(--verde) 0%, var(--verde-oscuro) 45%, var(--turquesa-oscuro) 100%);
	color: var(--blanco);
}

.bloque-verde h2,
.bloque-cta h2,
.bloque-verde .ih-titulo,
.bloque-cta .ih-titulo {
	color: var(--blanco);
}

.bloque-verde .entradilla,
.bloque-cta .entradilla,
.bloque-verde .antetitulo,
.bloque-cta .antetitulo {
	color: rgba(255, 255, 255, 0.9);
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * LOS BOTONES SOBRE EL DEGRADADO
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * El botón de WhatsApp es verde (#25d366) y no se puede cambiar: es su color y la gente lo tiene
 * aprendido. Pero sobre un fondo verde se perdería, así que se le pone un filo blanco. El color
 * sigue siendo el mismo y se ve perfectamente.
 *
 * El botón claro ya es blanco: sobre el degradado se ve solo.
 */
.bloque-verde .boton-whatsapp,
.bloque-cta .boton-whatsapp {
	border: 2px solid var(--blanco);
}

.bloque-verde .boton-claro,
.bloque-cta .boton-claro {
	background: var(--blanco);
	color: var(--tinta-fuerte);
	border: 2px solid var(--blanco);
}

.bloque-verde .boton-claro:hover,
.bloque-cta .boton-claro:hover {
	box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.45);
}

/* El campo y el desplegable siguen en blanco: así lo que escribe la persona se lee bien. */
.bloque-verde .buscador input[type='text'],
.bloque-verde .buscador select {
	border-color: transparent;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.bloque-verde .buscador input[type='text']:focus {
	border-color: var(--tinta-fuerte);
}

/* El botón, en negro. */
.bloque-verde .buscador button {
	background: var(--tinta-fuerte);
	color: var(--blanco);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.bloque-verde .buscador button:hover {
	background: #000;
	transform: translateY(-2px);
	box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.45);
}

.bloque-verde .buscador button:focus-visible {
	outline: 3px solid var(--blanco);
	outline-offset: 2px;
}

/* Los precios, en blanco; el importe en negrita y algo más grande. */
.bloque-verde .precios-dominio {
	color: rgba(255, 255, 255, 0.92);
}

.bloque-verde .precios-dominio strong {
	color: var(--blanco);
	font-size: 16px;
}

.bloque-verde .precios-dominio small {
	color: rgba(255, 255, 255, 0.75);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOVIMIENTO: cómo entran las cosas y cómo responden al ratón
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * LA CLAVE DE TODO ESTO: «translate» EN VEZ DE «transform»
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * Las tarjetas ya usaban «transform» para levantarse al pasar el ratón, y las de acceso rápido
 * lo usan también para inclinarse. Si la entrada por scroll usara «transform», las dos reglas
 * pelearían por la misma propiedad y una de las dos no se vería: es exactamente el fallo que
 * apareció en la página de prueba, donde la inclinación tenía los grados bien calculados pero
 * el navegador no la aplicaba.
 *
 * CSS tiene desde hace años las propiedades sueltas «translate», «rotate» y «scale», que son
 * independientes de «transform» y se aplican antes que ella. Usando «translate» para la entrada
 * y dejando «transform» para el ratón, las dos cosas conviven sin pisarse y no hay que envolver
 * cada tarjeta en un elemento de más.
 */

/* ── 1. La entrada del héroe ─────────────────────────────────────────────── */

/*
 * Cada pieza sube y aparece, una detrás de otra, con 100 ms de diferencia. Suma unos 600 ms: lo
 * justo para que se note el orden sin que nadie tenga que esperar para leer.
 *
 * «both» es lo que hace que cada pieza esté invisible ANTES de que le toque.
 */
@keyframes ih-subir {
	from {
		opacity: 0;
		translate: 0 20px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

.entra {
	animation: ih-subir 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.entra-1 { animation-delay: 0.05s; }
.entra-2 { animation-delay: 0.15s; }
.entra-3 { animation-delay: 0.25s; }
.entra-4 { animation-delay: 0.35s; }

/* ── 2. La foto del héroe: se mece, y sigue al ratón ─────────────────────── */

/*
 * Son DOS movimientos a la vez, y por eso van en DOS elementos anidados:
 *
 *   .portada-imagen   se mece sola, arriba y abajo, en bucle
 *   .ih-paralaje      se desplaza unos píxeles según dónde esté el ratón
 */
@keyframes ih-flotar {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -16px; }
}

.portada-imagen {
	animation: ih-flotar 6s ease-in-out infinite;
}

.ih-paralaje {
	/*
	 * --raton-x e --raton-y los pone el JavaScript, de -0,5 a 0,5. Se multiplican por 18 px,
	 * que es un movimiento pequeño: si se moviera mucho, marearía.
	 */
	translate: calc(var(--raton-x, 0) * 18px) calc(var(--raton-y, 0) * 14px);
	transition: translate 0.25s ease-out;
}

/*
 * Un resplandor del turquesa detrás de la foto, para que el color nuevo esté en la portada
 * aunque el titular se lea en verde.
 *
 * Va al 45 % de opacidad porque al 22 % NO SE VEÍA: sobre el blanco quedaba en un azul tan
 * pálido que no se leía como color. Se comprobó contando píxeles de una captura: de 650.880,
 * cero.
 */
.portada-inicio::after {
	content: '';
	position: absolute;
	top: 4%;
	right: -4%;
	width: 58%;
	height: 92%;
	background: radial-gradient(circle at 50% 45%, rgba(28, 186, 200, 0.42) 0%, rgba(28, 186, 200, 0.1) 55%, rgba(28, 186, 200, 0) 75%);
	pointer-events: none;
	z-index: 0;
}

.portada-inicio .portada-interior {
	position: relative;
	z-index: 1;
}

/* La segunda línea del titular lleva el degradado de la marca recortado a las letras. */
.portada-inicio h1 .destacado {
	background: var(--degradado-marca);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* El antetítulo, con una rayita del degradado delante. */
.portada-inicio .antetitulo::before {
	content: '';
	display: inline-block;
	width: 26px;
	height: 3px;
	margin-right: 10px;
	vertical-align: middle;
	border-radius: 3px;
	background: var(--degradado-marca);
}

/* ── 5. Las rejillas de tarjetas entran una detrás de otra ───────────────── */

/*
 * OJO AL DETALLE IMPORTANTE: la clase «entra-grupo» la pone el JavaScript, NO está escrita en
 * el HTML.
 *
 * Es a propósito y es la diferencia entre que esto sea seguro o un problema: si el JavaScript no
 * carga —un archivo que falta, un navegador que lo bloquea, un error—, la clase no se pone
 * nunca, las tarjetas no se esconden nunca y la página se ve entera. Al revés —esconderlas
 * desde el CSS y confiar en que el JavaScript las enseñe— una sola avería dejaría la web con
 * secciones en blanco.
 */
.js .entra-grupo > * {
	opacity: 0;
	translate: 0 24px;
	transition: opacity 0.55s ease, translate 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js .entra-grupo.dentro > * {
	opacity: 1;
	translate: 0 0;
}

/* El escalonado: 80 ms de diferencia entre una tarjeta y la siguiente. */
.js .entra-grupo.dentro > *:nth-child(1) { transition-delay: 0.04s; }
.js .entra-grupo.dentro > *:nth-child(2) { transition-delay: 0.12s; }
.js .entra-grupo.dentro > *:nth-child(3) { transition-delay: 0.20s; }
.js .entra-grupo.dentro > *:nth-child(4) { transition-delay: 0.28s; }
.js .entra-grupo.dentro > *:nth-child(5) { transition-delay: 0.36s; }
.js .entra-grupo.dentro > *:nth-child(6) { transition-delay: 0.44s; }

/* ── 6. Las tarjetas de acceso se inclinan siguiendo el ratón ────────────── */

/*
 * Las reglas de la inclinación están arriba, en la sección de las tarjetas de acceso, junto al
 * resto de su estilo. Aquí sólo queda la nota de por qué: el JavaScript pone --giro-x, --giro-y
 * y --escala, y el «transform» que las aplica vive con la tarjeta, no aparte. Tener el mismo
 * elemento definido en dos sitios del archivo es lo que hizo que la inclinación no funcionara:
 * una regla ganaba a la otra por especificidad y nadie se enteraba leyendo el CSS.
 */

/* ── Y quien pida que nada se mueva, no ve nada de esto ──────────────────── */
/*
 * No es cortesía: hay gente a la que el movimiento le produce mareo o vértigo, y los sistemas
 * operativos tienen una opción para pedirlo. Se respeta entera.
 */
@media (prefers-reduced-motion: reduce) {
	.entra,
	.portada-imagen {
		animation: none;
	}

	.ih-paralaje {
		translate: none;
	}

	.js .entra-grupo > * {
		opacity: 1;
		translate: none;
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA NOTA CORTA Y EL CIERRE «LLAVE EN MANO»
   ═══════════════════════════════════════════════════════════════════════════ */

/* Una nota de una sola línea no necesita el relleno de una de tres. */
.aviso-corto {
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	padding: 14px 26px;
	text-align: center;
}

/*
 * La sección de cierre del servicio «llave en mano».
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * POR QUÉ NARANJA, Y NO VERDE COMO LAS DEMÁS
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * Estaba en el degradado verde de marca, y ahí no se veía: justo encima tiene otra sección verde
 * y justo debajo el pie casi negro, así que tres franjas seguidas se comían la sección. No
 * destacaba nada.
 *
 * Va en NARANJA, que es el color que la web ya usa para lo que hay que hacer —los botones de
 * compra, la etiqueta de WebTPV— y que es el complementario del verde: puesto entre el verde de
 * arriba y el negro de abajo, se separa de los dos. Y sigue siendo un color de la casa, no uno
 * inventado.
 *
 * El degradado va hacia un naranja OSCURO, no hacia el claro, por lo mismo que el verde va hacia
 * el turquesa oscuro: con el claro debajo, el texto blanco se quedaría en 3,4:1 de contraste. Con
 * el oscuro sube a 6,2:1, que se lee sin esfuerzo.
 */
.cierre-llave {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, var(--naranja) 0%, var(--naranja-oscuro) 45%, #8f340c 100%);
	color: var(--blanco);
}

/* El texto, en blanco, como en las demás secciones de color. */
.cierre-llave h2,
.cierre-llave .antetitulo,
.cierre-llave .entradilla {
	color: var(--blanco);
}

.cierre-llave::before {
	content: '';
	position: absolute;
	top: -50%;
	left: 50%;
	width: 130%;
	height: 200%;
	transform: translateX(-50%);
	background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 58%);
	pointer-events: none;
}

.cierre-llave .contenedor {
	position: relative;
	z-index: 1;
}

/* Para que «Votre business de hosting» destaque dentro de la entradilla. */
.cierre-llave .entradilla strong {
	color: var(--blanco);
	font-weight: 700;
}

/* El botón, más grande que los demás: es la acción principal de esa página. */
.boton-grande {
	padding: 17px 34px;
	font-size: 17px;
}

/*
 * Y le late un halo blanco que crece y se desvanece.
 *
 * Es un efecto que llama la atención sin moverse: en un botón, moverse marea. Lo que hace es
 * crecer hacia fuera y desaparecer, como una onda, cada dos segundos y medio.
 */
@keyframes ih-latido {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
	70%, 100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
}

.cierre-llave .boton-grande {
	animation: ih-latido 2.6s ease-out infinite;
}

/* Y quien haya pedido que nada se mueva, no lo ve. */
@media (prefers-reduced-motion: reduce) {
	.cierre-llave .boton-grande {
		animation: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   TARJETAS DE ACCESO RÁPIDO (portada, sobre la banda verde)
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Cuatro tarjetas blancas sobre la banda verde, justo debajo del héroe.
 *
 * Van pegadas al héroe a propósito: son la continuación de la presentación, no una sección
 * aparte. Por eso el relleno de arriba baja de 70 a 24 píxeles. Lo que se ve al abrir la web
 * es el titular y, sin bajar apenas, las cuatro cosas que se venden.
 *
 * Aquí estaba antes el buscador de dominios. Se quitó: ocupa mucho, empuja hacia abajo lo que
 * de verdad vende, y sigue entero en /domains/, a un clic desde la tarjeta de dominios.
 */
.accesos {
	padding-top: 24px;
}

/*
 * La tarjeta, con el borde de 2 píxeles en degradado —igual que las demás tarjetas del sitio— y
 * preparada para inclinarse.
 *
 * El levantamiento al pasar el ratón va DENTRO del mismo «transform» que la inclinación (con
 * --levantar), y no en una regla aparte. Si estuviera aparte, la inclinación lo borraría: pasó
 * justo eso, y la tarjeta se quedaba plana con los grados bien calculados.
 */
.acceso {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	text-align: center;

	/* El mismo truco de dos fondos que las demás tarjetas: relleno blanco + borde degradado. */
	border: 2px solid transparent;
	background:
		linear-gradient(var(--blanco), var(--blanco)) padding-box,
		var(--degradado-marca) border-box;

	border-radius: var(--radio);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 14px 30px -12px rgba(0, 0, 0, 0.3);

	transform: perspective(900px)
		rotateX(calc(var(--giro-x, 0) * 1deg))
		rotateY(calc(var(--giro-y, 0) * 1deg))
		translateY(var(--levantar, 0px))
		scale(var(--escala, 1));

	transition: transform 0.25s ease-out, box-shadow 0.22s ease;
	will-change: transform;
}

.acceso:hover {
	--levantar: -5px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 26px 46px -16px rgba(0, 0, 0, 0.45);
}

/* Mientras el ratón está encima, el movimiento va sin retardo. */
.acceso.ih-inclinada {
	transition: transform 0.08s linear, box-shadow 0.22s ease;
}

/*
 * La foto, arriba del todo y a todo lo ancho.
 *
 * El «overflow: hidden» de la tarjeta es lo que permite que la imagen se agrande al pasar el
 * ratón sin salirse: crece un 7 % y se queda dentro.
 *
 * «object-fit: contain» y no «cover»: tres de las cuatro fotos llevan el fondo transparente y
 * recortarlas les cortaría el dibujo. Con «contain» cada una entra entera en su hueco, sin
 * deformarse.
 */
.acceso-foto {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 168px;
	padding: 14px 16px;
	background: var(--fondo);
	overflow: hidden;
}

.acceso-foto img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform 0.35s ease;
}

.acceso:hover .acceso-foto img {
	transform: scale(1.07);
}

/*
 * El cuerpo va en su propia caja para poder darle márgenes sin tocar la foto, que tiene que
 * llegar a los bordes. Y con «flex: 1» y el botón con «margin-top: auto», los cuatro botones
 * quedan a la misma altura aunque los textos midan distinto.
 */
.acceso-cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 22px 20px 26px;
}

.acceso-titulo {
	margin: 0 0 8px;
	font-size: 20px;
}

.acceso-titulo a {
	color: var(--tinta-fuerte);
	text-decoration: none;
	transition: color 0.18s ease;
}

.acceso-titulo a:hover {
	color: var(--verde-texto);
}

.acceso-texto {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--texto);
}

.acceso-accion {
	margin: auto 0 0;
}

/* En el móvil las tarjetas se apilan a lo ancho, así que la foto puede ser más baja. */
@media (max-width: 640px) {
	.acceso-foto {
		height: 140px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   MEDIOS DE PAGO
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Los medios de pago se enseñan con sus logotipos, todos AL MISMO ALTO.
 *
 * Ese alto común es lo único que hace que la fila se vea ordenada: los seis logotipos son de
 * formas muy distintas —uno casi cuadrado, otro con el nombre escrito a lo ancho— y si cada
 * uno fuera de su tamaño la vista bailaría al recorrerlos. Se ajustan por alto y el ancho
 * sale solo, que es como se alinean las filas de logotipos en cualquier web.
 *
 * El alto elegido son 36 píxeles, y no es un número al azar: los originales miden entre 28 y
 * 66 píxeles de alto, así que a ese tamaño casi todos se REDUCEN (se ven nítidos) y los dos
 * que hay que ampliar un poco —Orange y PayPal, que son los más pequeños— lo hacen sólo un
 * 9 % y un 29 %. Con 44 píxeles, PayPal habría que ampliarlo un 57 % y se vería borroso.
 *
 * La sombra y las esquinas redondeadas son para los logotipos que traen fondo blanco propio
 * (Orange y Espèces): sin ellas, sobre el fondo gris claro de la página, se vería el borde del
 * rectángulo blanco y parecería un recorte mal hecho.
 */
.pagos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 14px 18px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* El rótulo, pequeño y en mayúsculas: es una etiqueta, no un titular de sección. */
.pagos-titulo {
	margin: 0 0 26px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--texto);
}

.pago-logo {
	display: flex;
	align-items: center;
	transition: transform 0.18s ease;
}

.pago-logo img {
	display: block;
	height: 36px;
	width: auto;
	border-radius: 5px;
	box-shadow: 0 1px 2px rgba(29, 29, 29, 0.08);
	transition: box-shadow 0.18s ease;
}

.pago-logo:hover {
	transform: translateY(-2px);
}

.pago-logo:hover img {
	box-shadow: 0 6px 14px -4px rgba(29, 29, 29, 0.28);
}

/*
 * ─────────────────────────────────────────────────────────────────────────────
 * INSIGNIAS DE RESERVA
 * ─────────────────────────────────────────────────────────────────────────────
 *
 * Son las que salen si el logotipo de un medio todavía no está subido, para que en la web no
 * aparezca nunca el icono de imagen rota.
 *
 * Cada una lleva el color de su marca, medido en la web oficial y no elegido a ojo. Los
 * códigos y de dónde salen están en parciales/medios-pago.php.
 *
 * El color del TEXTO se elige por contraste, no por gusto. Sobre el naranja de Orange
 * (#ff7900) y el amarillo de MTN (#ffcb05), el blanco se queda en 2,6:1 y 1,6:1, por debajo
 * del mínimo legible de 4,5:1; en negro pasan a 6,4:1 y 11:1. En el móvil, al sol, esa
 * diferencia es la que hace que se lea o no se lea.
 */
.pago {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 20px;
	border-radius: var(--radio);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.2px;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(29, 29, 29, 0.1);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pago:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px -4px rgba(29, 29, 29, 0.28);
}

.pago-wave {
	background: #1dc8ff;
	color: #0e0d5d;
}

.pago-orange {
	background: #ff7900;
	color: var(--tinta-fuerte);
}

.pago-mtn {
	background: #ffcb05;
	color: var(--tinta-fuerte);
}

.pago-moov {
	background: #005ba4;
	color: var(--blanco);
}

/*
 * La insignia de reserva de PayPal y Espèces: no son una marca con color propio en esta web
 * (PayPal sí tiene azul, pero no se ha medido en su web oficial y no se inventa), así que van
 * con el borde de la casa y sin color. Sólo se ven si falta su logotipo.
 */
.pago-reserva {
	background: var(--blanco);
	color: var(--tinta);
	border: 2px solid var(--borde);
	font-weight: 500;
}

.pagos-nota {
	max-width: 620px;
	margin: 22px auto 0;
	text-align: center;
	font-size: 13px;
	color: var(--texto);
}

/*
 * La sección de medios de pago, más apretada por arriba y por abajo.
 *
 * Es una franja corta —un rótulo, seis logotipos y una nota— y con el relleno normal de sección
 * (70 píxeles arriba y abajo) quedaba flotando en un hueco enorme, con la mitad del espacio
 * vacío. Se deja en menos de la mitad.
 *
 * Se hace por el identificador y no con una clase porque esta sección la pinta un parcial que
 * usan cinco páginas: así se aprieta en las cinco de una vez y no hay que acordarse de nada.
 */
#paiement {
	padding: 32px 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLA COMPARATIVA DE PLANES
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * En el móvil la tabla se desplaza en horizontal en lugar de apilarse. Apilada dejaría de
 * ser una comparación: para comparar hay que poder bajar la vista por una columna.
 *
 * La primera columna (el nombre de la característica) se queda fija al desplazar, porque si
 * no se pierde de vista qué se está leyendo.
 *
 * OJO: la tabla NO puede llevar «overflow: hidden». Un elemento con overflow distinto de
 * «visible» se convierte en el marco de referencia de lo que tiene dentro con «position:
 * sticky», y la columna dejaría de quedarse fija. Por eso las esquinas redondeadas y la
 * sombra van en la envoltura, que es la que se desplaza.
 */
.tabla-envoltura {
	overflow-x: auto;
	overflow-y: hidden;

	/*
	 * «contain: paint» NO es decorativo, y quitarlo vuelve a romper el móvil.
	 *
	 * Sin él, el navegador cuenta el ancho de la tabla (749 px) como desbordamiento del
	 * DOCUMENTO, aunque la caja se desplace y la tabla se vea recortada dentro. El resultado
	 * es que en el móvil la página entera se puede arrastrar en horizontal y aparece una
	 * franja vacía al lado. Se midió: el documento pasaba de 390 a 692 px.
	 *
	 * Con «contain: paint» el desbordamiento se queda dentro de esta caja, que es donde tiene
	 * que estar, y la tabla se sigue desplazando igual. Se comprobó que la primera columna
	 * sigue quedándose fija.
	 */
	contain: paint;

	background: var(--blanco);
	border-radius: var(--radio);
	box-shadow: var(--sombra);
}

.tabla-planes {
	width: 100%;
	min-width: 700px;
	border-collapse: collapse;
	font-size: 14px;
	background: var(--blanco);
}

.tabla-planes th,
.tabla-planes td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--borde);
	text-align: center;
}

.tabla-planes thead th {
	padding-top: 18px;
	padding-bottom: 18px;
	font-size: 15px;
	font-weight: 700;
	color: var(--tinta-fuerte);
	background: var(--fondo);
	border-bottom: 2px solid var(--borde);
	vertical-align: middle;
}

/* La columna del plan recomendado, marcada de arriba abajo: se sigue con el dedo. */
.tabla-planes .columna-destacada {
	background: var(--verde-claro);
}

.tabla-planes thead .columna-destacada {
	background: var(--verde);
	color: var(--blanco);
}

.tabla-planes .tabla-etiqueta {
	display: block;
	margin-top: 6px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: rgba(255, 255, 255, 0.9);
}

/* El nombre de cada característica: a la izquierda, en gris, y sin partirse en dos líneas. */
.tabla-planes tbody th {
	text-align: left;
	font-weight: 500;
	color: var(--texto);
	white-space: nowrap;
}

.tabla-planes tbody th,
.tabla-planes thead th:first-child,
.tabla-planes tfoot td:first-child {
	position: sticky;
	left: 0;
	z-index: 2;
	background: var(--blanco);
	box-shadow: 1px 0 0 var(--borde);
}

.tabla-planes thead th:first-child {
	background: var(--fondo);
}

.tabla-planes tbody tr:last-child th,
.tabla-planes tbody tr:last-child td {
	border-bottom: 0;
}

.tabla-planes tbody tr:hover td {
	background: #fafafa;
}

.tabla-planes tbody tr:hover .columna-destacada {
	background: #e4f1de;
}

.tabla-planes tfoot td {
	padding-top: 20px;
	padding-bottom: 20px;
	border-bottom: 0;
}

.tabla-sin-dato {
	color: #c9c9c9;
	font-weight: 700;
}

.tabla-nota {
	max-width: 620px;
	margin: 20px auto 0;
	text-align: center;
	font-size: 13px;
	color: var(--texto);
}

.tabla-nota a {
	color: var(--verde-texto);
	font-weight: 500;
}

@media (max-width: 640px) {
	.pago {
		height: 40px;
		padding: 0 16px;
		font-size: 14px;
	}

	/* Los logotipos bajan un poco para que los seis quepan sin apretarse. */
	.pago-logo img {
		height: 30px;
	}

	.pagos {
		gap: 12px 14px;
	}

	.tabla-planes th,
	.tabla-planes td {
		padding: 11px 13px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTÓN DE WHATSAPP FIJO EN EL MÓVIL
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * Sólo se ve por debajo de 900px, que es donde el menú ya se pliega y se navega con el
 * pulgar. En una pantalla grande no hace falta: la cabecera y el pie ya tienen su botón, y
 * uno flotante encima del contenido molesta más de lo que ayuda.
 *
 * «env(safe-area-inset-bottom)» es lo que lo separa de la raya de gestos del iPhone: sin eso
 * queda medio metido debajo y cuesta pulsarlo. El «max()» deja un mínimo de 16px cuando el
 * navegador no sabe nada del área segura, que es el caso de Android.
 *
 * Va en el verde de siempre (#25d366) y con el texto en blanco, igual que los demás botones
 * de WhatsApp de la web: son el mismo botón, así que se ven igual.
 */
.whatsapp-flotante {
	display: none;
}

@media (max-width: 900px) {
	.whatsapp-flotante {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		position: fixed;
		right: 16px;
		bottom: max(16px, env(safe-area-inset-bottom, 0px));
		z-index: 90;
		padding: 13px 20px;
		border-radius: 100px;
		background: var(--whatsapp);
		color: var(--blanco);
		font-size: 15px;
		font-weight: 700;
		line-height: 1;
		text-decoration: none;
		box-shadow: 0 2px 6px rgba(29, 29, 29, 0.22), 0 14px 30px -8px rgba(29, 29, 29, 0.45);
	}

	.whatsapp-flotante:active {
		transform: translateY(1px);
	}

	.whatsapp-flotante:focus-visible {
		outline: 3px solid var(--tinta-fuerte);
		outline-offset: 2px;
	}

	.whatsapp-flotante-icono {
		display: block;
		flex: 0 0 auto;
	}

	/* El pie deja sitio abajo para que el botón no tape los enlaces legales. */
	.pie {
		padding-bottom: 96px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL PORTAFOLIO DE /creation-site-web/
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * De momento son enlaces, sin captura. Son sitios que existen y se pueden abrir, que ya es mas
 * de lo que hace la mayoria: la mejor prueba de un trabajo es poder entrar.
 *
 * Cuando haya capturas, cada obra llevara su <img> arriba y esto seguira valiendo.
 */
.obras {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.obra a {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	text-align: center;
	text-decoration: none;

	/* El mismo borde de 2 pixeles con degradado que el resto de tarjetas del sitio. */
	border: 2px solid transparent;
	background:
		linear-gradient(var(--blanco), var(--blanco)) padding-box,
		var(--degradado-marca) border-box;

	border-radius: var(--radio);
	box-shadow: var(--sombra);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.obra a:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 20px 38px -14px rgba(29, 29, 29, 0.35);
}

.obra-dominio {
	font-size: 18px;
	font-weight: 700;
	color: var(--tinta-fuerte);
}

.obra-enlace {
	font-size: 14px;
	font-weight: 500;
	color: var(--verde-texto);
}

@media (max-width: 900px) {
	.obras {
		grid-template-columns: 1fr;
	}
}
/* La captura, arriba y a todo lo ancho de la tarjeta. */
.obra-foto {
	display: block;
	overflow: hidden;
	background: var(--fondo);
	border-bottom: 1px solid var(--borde);
}

.obra-foto img {
	display: block;
	width: 100%;
	height: 150px;

	/*
	 * «cover» y no «contain»: son capturas de webs, y lo que se reconoce de un vistazo es la
	 * parte de arriba, la cabecera. Con «contain» entraría la página entera pero tan pequeña que
	 * no se distinguiría nada.
	 */
	object-fit: cover;
	object-position: top center;
	transition: transform 0.4s ease;
}

/* Al pasar el ratón, la captura se asoma un poco más: invita a pulsar. */
.obra a:hover .obra-foto img {
	transform: scale(1.04);
}

.obra-dominio {
	display: block;
	margin: 16px 16px 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--tinta-fuerte);
	word-break: break-word;
}

.obra-enlace {
	display: block;
	margin: 0 16px 20px;
	font-size: 13px;
	font-weight: 500;
	color: var(--verde-texto);
}

@media (max-width: 1024px) {
	.obras {
		grid-template-columns: repeat(2, 1fr);
	}
}