/**
 * Portada «Soluciones Digitales» — maqueta de referencia.
 *
 * Reproduce la composición del mockup aportado (cabecera blanca, hero azul
 * marino con foto, barra de ventajas, servicios, sección oscura, planes,
 * proceso, portfolio, banda final y pie) sobre el contenido real del negocio.
 *
 * Paleta propia (azul/marino) acotada con el prefijo --tmd-. Las secciones de
 * la portada usan el prefijo .tmd- para no chocar con el sistema «Teide» del
 * tema (--ed-/.ed-). La cabecera, la banda final y el pie sí se reescriben
 * porque son compartidos y deben verse igual en todo el sitio.
 *
 * @package EstudioDigital
 */

:root {
	--tmd-azul:        #2563eb;
	--tmd-azul-oscuro: #1d4ed8;
	--tmd-azul-claro:  #eff4ff;
	--tmd-marino:      #0d1b39;
	--tmd-marino-2:    #13244a;
	--tmd-tinta:       #16233d;
	--tmd-texto:       #45546e;
	--tmd-tenue:       #6b7a95;
	--tmd-linea:       #e4e9f2;
	--tmd-fondo-azul:  #eef3fb;
	--tmd-fondo-suave: #f6f9fe;
	--tmd-blanco:      #ffffff;

	--tmd-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--tmd-ancho:   82rem;
	--tmd-gutter:  clamp(.5rem, .3rem + 1vw, 1.25rem);
	--tmd-radio:   14px;
	--tmd-radio-s: 10px;

	--tmd-sombra:    0 1px 2px rgba(13, 27, 57, .06), 0 10px 30px -18px rgba(13, 27, 57, .25);
	--tmd-sombra-mas: 0 6px 16px rgba(13, 27, 57, .08), 0 24px 48px -24px rgba(13, 27, 57, .35);
}

/* ==========================================================================
   Piezas comunes de la maqueta
   ========================================================================== */

.tmd-wrap { width: 100%; max-width: var(--tmd-ancho); margin-inline: auto; padding-inline: var(--tmd-gutter); }

.tmd-eyebrow {
	margin: 0 0 1rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tmd-azul);
}

.tmd-sec { padding-block: clamp(3.5rem, 2.4rem + 4.5vw, 6rem); }

.tmd-sec__head h2,
.tmd-proceso__head h2,
.tmd-intro h2 {
	font-family: var(--tmd-sans);
	color: var(--tmd-tinta);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.02em;
	font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem);
	margin: 0 0 1rem;
	text-wrap: balance;
}

.tmd-intro p { margin: 0 0 1.5rem; color: var(--tmd-texto); font-size: 1.05rem; line-height: 1.7; max-width: 34rem; }
.tmd-intro .tmd-eyebrow { margin: 0 0 1rem; max-width: none; color: var(--tmd-azul); font-size: .9rem; line-height: 1.4; }

/* Botones de la maqueta */
.tmd-btn {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .85rem 1.5rem;
	border-radius: 10px;
	font-family: var(--tmd-sans);
	font-size: .98rem; font-weight: 700;
	line-height: 1; text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.tmd-btn .tmd-arrow { transition: transform .18s ease; }
.tmd-btn:hover .tmd-arrow { transform: translateX(3px); }

.tmd-btn--primario { background: var(--tmd-azul); color: #fff; box-shadow: 0 8px 20px -10px rgba(37, 99, 235, .7); }
.tmd-btn--primario:hover { background: var(--tmd-azul-oscuro); transform: translateY(-1px); }
.tmd-btn--blanco { background: #fff; color: var(--tmd-azul); }
.tmd-btn--blanco:hover { background: var(--tmd-azul-claro); transform: translateY(-1px); }
.tmd-btn--contorno { background: transparent; color: var(--tmd-azul); border-color: var(--tmd-azul); }
.tmd-btn--contorno:hover { background: var(--tmd-azul); color: #fff; }
.tmd-btn--claro { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .35); }
.tmd-btn--claro:hover { background: rgba(255, 255, 255, .18); }

.tmd-enlace {
	display: inline-flex; align-items: center; gap: .35rem;
	font-weight: 700; font-size: .92rem;
	color: var(--tmd-azul); text-decoration: none;
}
.tmd-enlace .tmd-arrow { transition: transform .18s ease; }
.tmd-enlace:hover .tmd-arrow { transform: translateX(3px); }

.tmd-arrow { width: 1em; height: 1em; }

/* ==========================================================================
   A. Cabecera: píldora flotante
   La cabecera mide 0 de alto y se queda pegada arriba; la píldora (.ed-cabecera__inner)
   flota sobre el contenido. Hero y cabeceras de página reservan su altura con
   --cab-reserva. --ph y --gap deben coincidir con el alto real de la píldora.
   ========================================================================== */

:root {
	--ph: 80px;   /* alto de la píldora */
	--gap: 14px;  /* aire sobre la píldora */
	--cab-reserva: calc(var(--ph) + var(--gap) * 2);
	--sombra-flotante: 0 1px 2px rgba(13, 27, 57, .04), 0 22px 46px -22px rgba(37, 99, 235, .38); /* la de la cabecera; también en las tarjetas de precio */
	--tmd-cabecera: calc(var(--ph) + var(--gap));
	--ed-cabecera: calc(var(--ph) + var(--gap));
}
@media (min-width: 88rem) { :root { --ph: 88px; } }

.ed-cabecera { position: sticky; top: 0; height: 0; z-index: 60; background: transparent; border: 0; box-shadow: none; }
.ed-cabecera__caja {
	position: absolute; left: 0; right: 0; top: var(--gap);
	max-width: 92rem; margin-inline: auto; padding-inline: var(--tmd-gutter); /* más ancha que el contenido: el menú cabe en una fila */
}
.ed-cabecera__inner {
	position: relative; height: var(--ph); min-height: 0; max-width: none; margin: 0;
	display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
	padding: 0 .85rem 0 1.15rem;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	border: 1px solid rgba(37, 99, 235, .07); border-radius: 999px;
	box-shadow: var(--sombra-flotante);
}

/* Marca */
.ed-cabecera .ed-marca { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; justify-self: start; min-width: 0; margin: 0; }
.ed-cabecera .ed-marca__mark {
	display: grid; place-items: center; flex: none;
	width: 56px; height: 56px; min-width: 0; padding: 0; border-radius: 16px;
	background: var(--tmd-azul); color: #fff;
	font-family: var(--tmd-sans); font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em;
}
.ed-cabecera .ed-marca__texto { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.ed-cabecera .ed-marca__nombre { font-family: var(--tmd-sans); font-weight: 700; font-size: 1.32rem; color: var(--tmd-marino); letter-spacing: -.015em; white-space: nowrap; }
.ed-cabecera .ed-marca__tag { font-size: .82rem; color: var(--tmd-tenue); font-weight: 500; white-space: nowrap; }

/* Menú */
.ed-cabecera .ed-nav { justify-self: center; }
.ed-cabecera .ed-nav__lista { display: flex; flex-wrap: nowrap; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.ed-cabecera .ed-nav__lista > li { position: relative; }
.ed-cabecera .ed-nav__lista a {
	position: relative; display: inline-flex; align-items: center; gap: .55rem;
	padding: .75rem .9rem; border-radius: 999px;
	font-size: 1rem; font-weight: 500; line-height: 1.2; color: var(--tmd-texto);
	text-decoration: none; white-space: nowrap;
	transition: color .15s ease, background-color .15s ease;
}
.ed-cabecera .ed-nav__ico { display: grid; place-items: center; flex: none; }
.ed-cabecera .ed-nav__ico .ed-icono { width: 19px; height: 19px; stroke-width: 1.7; opacity: .8; }
.ed-cabecera .ed-nav__lista a:hover { color: var(--tmd-azul); background: #f0f5ff; }
.ed-cabecera .ed-nav__lista > .current-menu-item > a,
.ed-cabecera .ed-nav__lista > .current-menu-ancestor > a,
.ed-cabecera .ed-nav__lista > .current_page_item > a { color: var(--tmd-azul); background: #e8f0ff; font-weight: 600; }
.ed-cabecera .ed-nav__lista > .current-menu-item > a .ed-icono,
.ed-cabecera .ed-nav__lista > .current-menu-ancestor > a .ed-icono { opacity: 1; }
/* Raya azul bajo la sección activa */
.ed-cabecera .ed-nav__lista > .current-menu-item:not(.menu-item-has-children) > a::after {
	content: ""; position: absolute; left: 16%; right: 16%; bottom: -9px; height: 3px; border-radius: 3px; background: var(--tmd-azul);
}

/* Flecha de «Servicios» (se anula la antigua de style.css, en ::before) */
.ed-cabecera .ed-nav__lista .menu-item-has-children > a::before { content: none; }
.ed-cabecera .ed-nav__lista .menu-item-has-children > a::after {
	content: ""; position: static; width: 7px; height: 7px; margin: -3px 0 0 .1rem;
	border: 0; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
	background: none; transform: rotate(45deg); opacity: .7; transition: transform .2s ease;
}
.ed-cabecera .ed-nav__lista .menu-item-has-children:hover > a::after,
.ed-cabecera .ed-nav__lista .menu-item-has-children:focus-within > a::after { transform: rotate(225deg) translate(-2px, -2px); }

/* Submenú */
.ed-cabecera .ed-nav__lista ul.sub-menu {
	position: absolute; top: calc(100% + 20px); left: 50%; min-width: 17.5rem; margin: 0; padding: .55rem; list-style: none;
	background: #fff; border: 1px solid var(--tmd-linea); border-radius: 22px; box-shadow: var(--tmd-sombra-mas);
	opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* Puente invisible para que el ratón no pierda el hover al cruzar el hueco. */
.ed-cabecera .ed-nav__lista ul.sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
.ed-cabecera .ed-nav__lista .menu-item-has-children:hover > ul.sub-menu,
.ed-cabecera .ed-nav__lista .menu-item-has-children:focus-within > ul.sub-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.ed-cabecera .ed-nav__lista ul.sub-menu a { display: flex; padding: .65rem .85rem; border-radius: 14px; font-weight: 500; }
.ed-cabecera .ed-nav__lista ul.sub-menu .ed-nav__ico { width: 34px; height: 34px; border-radius: 10px; background: #eaf1ff; }
.ed-cabecera .ed-nav__lista ul.sub-menu .ed-icono { stroke: var(--tmd-azul); opacity: 1; }

/* Botón de presupuesto */
.ed-cabecera__cta { justify-self: end; display: flex; margin: 0; }
.tmd-btn--cab { padding: 1.05rem 1.35rem; border-radius: 999px; font-size: 1rem; gap: .65rem; box-shadow: 0 14px 26px -12px rgba(37, 99, 235, .7); white-space: nowrap; }
.tmd-btn--cab .tmd-btn__ico { width: 21px; height: 21px; }

/* Botón de alternar (solo móvil) */
.ed-cabecera .ed-nav-toggle {
	display: none; place-items: center; width: 48px; height: 48px; padding: 0; margin: 0;
	border: 1px solid var(--tmd-linea); border-radius: 50%; background: #fff; color: var(--tmd-marino);
	cursor: pointer; touch-action: manipulation;
}
.ed-cabecera .ed-nav-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ed-cabecera .ed-nav-toggle .ed-icono { width: 22px; height: 22px; stroke: currentColor; }
.ed-cabecera .ed-nav-toggle .ed-icono--cerrar { display: none; }
.ed-nav-toggle[aria-expanded="true"] .ed-icono--menu { display: none; }
.ed-nav-toggle[aria-expanded="true"] .ed-icono--cerrar { display: block; }

/* Pantallas medias: el descriptor de marca y el relleno del menú ceden espacio. */
@media (max-width: 94rem) {
	.ed-cabecera .ed-marca__tag { display: none; }
}
@media (max-width: 90rem) {
	.ed-cabecera .ed-nav__lista a { padding: .75rem .9rem; }
	.tmd-btn--cab { padding-inline: 1.35rem; }
}
@media (max-width: 80rem) {
	.ed-cabecera .ed-nav__lista a { padding: .75rem .8rem; gap: .4rem; }
	.ed-cabecera .ed-nav__ico .ed-icono { width: 18px; height: 18px; }
}

/* Móvil y tablet (hasta 1200 px): menú desplegable como tarjeta flotante bajo la píldora. */
@media (max-width: 75rem) {
	:root { --ph: 66px; --gap: 10px; }
	.ed-cabecera__inner { display: flex; gap: .6rem; padding: 0 .65rem 0 .85rem; }
	.ed-cabecera .ed-marca { margin-right: auto; }
	.ed-cabecera .ed-marca__mark { width: 44px; height: 44px; border-radius: 13px; font-size: 1.1rem; }
	.ed-cabecera .ed-marca__nombre { font-size: 1.08rem; }
	.ed-cabecera .ed-nav-toggle { display: grid; order: 3; }
	.ed-cabecera__cta { order: 2; }
	.tmd-btn--cab { padding: .8rem 1.2rem; font-size: .95rem; }
	.ed-cabecera .ed-nav {
		position: absolute; top: calc(100% + 10px); left: 0; right: 0; order: 4;
		max-height: 0; overflow: hidden; visibility: hidden; opacity: 0;
		background: #fff; border: 1px solid transparent; border-radius: 26px;
		box-shadow: var(--tmd-sombra-mas);
		transition: max-height .25s ease, opacity .18s ease, visibility .25s;
	}
	.ed-cabecera .ed-nav.is-abierta { max-height: 75vh; overflow-y: auto; overscroll-behavior: contain; visibility: visible; opacity: 1; border-color: var(--tmd-linea); padding: .6rem; }
	.ed-cabecera .ed-nav__lista { flex-direction: column; align-items: stretch; gap: .15rem; }
	.ed-cabecera .ed-nav__lista a { padding: .85rem 1rem; border-radius: 16px; }
	.ed-cabecera .ed-nav__lista > .current-menu-item > a::after { display: none; }
	.ed-cabecera .ed-nav__lista ul.sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none; min-width: 0;
		box-shadow: none; border: 0; border-radius: 0; margin: .1rem 0 .3rem 1.4rem; padding: 0 0 0 .5rem;
		border-left: 2px solid var(--tmd-linea);
	}
	.ed-cabecera .ed-nav__lista ul.sub-menu::before { display: none; }
	.ed-cabecera .ed-nav__lista .menu-item-has-children > a::after { margin-left: auto; }
}
@media (max-width: 40rem) {
	/* El botón de presupuesto queda como icono: el texto sigue disponible para lectores de pantalla. */
	.tmd-btn--cab { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
	.tmd-btn--cab .ed-cabecera__cta-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.tmd-btn--cab .tmd-arrow { display: none; }
	.ed-cabecera .ed-marca__nombre { font-size: 1rem; }
}

/* ==========================================================================
   B. Hero
   ========================================================================== */

.tmd-hero {
	position: relative;
	/* Foto de fondo con el degradado marino ya integrado a la izquierda, donde va el texto. */
	background: var(--tmd-marino) url("img/hero-bg.webp") right center / cover no-repeat;
	color: #fff;
	overflow: hidden;
}
.tmd-hero__grid {
	display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: center;
	padding-block: calc(var(--cab-reserva) + 2.25rem) clamp(2.5rem, 1.5rem + 2.5vw, 3.75rem);
}
.tmd-hero__texto { max-width: 34rem; }
@media (min-width: 80.0625rem) {
	.tmd-hero { background-position: 70% center; }
}
.tmd-hero__eyebrow { color: #8fb4ff; margin-bottom: 1.1rem; }
.tmd-hero__titulo {
	font-family: var(--tmd-sans);
	font-weight: 800; letter-spacing: -.025em; line-height: 1.05;
	font-size: clamp(2.1rem, 1.3rem + 2.3vw, 2.9rem);
	margin: 0 0 1.3rem; color: #fff; text-wrap: balance;
}
.tmd-hero__titulo span { color: #5b9bff; }
.tmd-hero__entrada { font-size: 1.1rem; line-height: 1.7; color: #c4d2ea; max-width: 32rem; margin: 0 0 2rem; }
.tmd-hero__acciones { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Panel derecho: solo los chips, flotando sobre el portátil del fondo. */
/* Los chips van pegados al borde izquierdo de la pantalla, sobre la zona azul del hero. */
.tmd-hero__media {
	position: absolute; z-index: 5; top: calc(var(--cab-reserva) + 1.25rem); left: 1rem;
	display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
}

.tmd-chip {
	position: static;
	display: flex; align-items: center; gap: .55rem;
	padding: .6rem .9rem;
	background: #fff; color: var(--tmd-tinta);
	border-radius: 12px; box-shadow: var(--tmd-sombra-mas);
	font-weight: 700; font-size: .9rem; white-space: nowrap;
}
a.tmd-chip { text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
a.tmd-chip:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(13, 27, 57, .45); }
a.tmd-chip:focus-visible { outline: 3px solid #8fb4ff; outline-offset: 3px; }
.tmd-chip__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--tmd-azul); color: #fff; flex: none; }
.tmd-chip__ico .ed-icono { width: 18px; height: 18px; stroke: #fff; }

/* Tramo intermedio: el hero se recorta más y el portátil queda cerca del texto. */
@media (min-width: 60.0625rem) and (max-width: 80rem) {
	.tmd-hero {
		background-image: linear-gradient(90deg, rgba(13, 27, 57, .94) 0%, rgba(13, 27, 57, .9) 48%, rgba(13, 27, 57, .38) 70%, rgba(13, 27, 57, 0) 92%), url("img/hero-bg.webp");
		background-position: 0 0, right center;
	}
	.tmd-hero__texto { max-width: 26rem; }
	.tmd-hero__titulo { font-size: clamp(2rem, 1.2rem + 2.6vw, 2.6rem); }
	.tmd-hero__media { display: none; }
}

@media (max-width: 60rem) {
	.tmd-hero__grid { grid-template-columns: 1fr; }
	/* En pantallas estrechas el portátil quedaría bajo el texto: velo marino para el contraste y sin chips. */
	.tmd-hero {
		background-image: linear-gradient(180deg, rgba(13, 27, 57, .95) 0%, rgba(13, 27, 57, .92) 62%, rgba(13, 27, 57, .72) 100%), url("img/hero-bg.webp");
		background-position: center, 72% center;
	}
	.tmd-hero__media { display: none; }
}

/* ==========================================================================
   C. Barra de ventajas: cinco columnas centradas con separadores
   ========================================================================== */

.tmd-ventajas {
	position: relative; z-index: 1;
	padding-block: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);
	background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
	border: 0;
}
.tmd-ventajas__grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.tmd-ventaja { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: .25rem 1.5rem; }
.tmd-ventaja + .tmd-ventaja::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--tmd-linea); }
.tmd-ventaja__ico {
	display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 1.15rem;
	border-radius: 50%; background: #eaf1ff;
}
.tmd-ventaja__ico .ed-icono { width: 34px; height: 34px; stroke: var(--tmd-azul); stroke-width: 1.6; }
.tmd-ventaja h3 { font-family: var(--tmd-sans); font-size: 1.2rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; color: var(--tmd-marino); margin: 0 0 .5rem; text-wrap: balance; }
.tmd-ventaja p { max-width: 17rem; font-size: .95rem; line-height: 1.6; color: #55657f; margin: 0; }

@media (max-width: 64rem) {
	.tmd-ventajas__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; }
	.tmd-ventaja:nth-child(odd)::before { display: none; }
	.tmd-ventaja:nth-child(5) { grid-column: 1 / -1; }
	.tmd-ventaja:nth-child(5)::before { display: none; }
}
@media (max-width: 34rem) {
	.tmd-ventajas__grid { grid-template-columns: 1fr; gap: 0; }
	.tmd-ventaja { padding: 1.5rem 1rem; }
	.tmd-ventaja::before { display: none; }
	.tmd-ventaja + .tmd-ventaja { border-top: 1px solid var(--tmd-linea); }
	.tmd-ventaja:nth-child(5) { grid-column: auto; }
}

/* ==========================================================================
   D. Servicios
   ========================================================================== */

.tmd-servicios { background: var(--tmd-fondo-azul); }
.tmd-servicios__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
.tmd-servicios__intro { position: sticky; top: calc(var(--tmd-cabecera) + 1.5rem); }

.tmd-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.tmd-card {
	background: #fff; border: 1px solid var(--tmd-linea); border-radius: var(--tmd-radio);
	padding: 1.6rem; box-shadow: var(--tmd-sombra);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tmd-card:hover { transform: translateY(-3px); box-shadow: var(--tmd-sombra-mas); border-color: #d4def0; }
.tmd-card__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; margin-bottom: 1.1rem; }
.tmd-card__ico .ed-icono { width: 24px; height: 24px; stroke: #fff; }
.tmd-card h3 { font-family: var(--tmd-sans); font-size: 1.12rem; font-weight: 800; color: var(--tmd-tinta); margin: 0 0 .5rem; }
.tmd-card p { font-size: .92rem; line-height: 1.6; color: var(--tmd-texto); margin: 0 0 1rem; }

/* colores de icono por tarjeta */
.tmd-ico--azul   { background: #2563eb; }
.tmd-ico--verde  { background: #10b981; }
.tmd-ico--morado { background: #8b5cf6; }
.tmd-ico--naranja{ background: #f59e0b; }
.tmd-ico--rosa   { background: #ec4899; }
.tmd-ico--cyan   { background: #06b6d4; }

@media (max-width: 64rem) {
	.tmd-servicios__grid { grid-template-columns: 1fr; }
	.tmd-servicios__intro { position: static; }
}
@media (max-width: 34rem) { .tmd-cards { grid-template-columns: 1fr; } }
/* Escritorio ancho: columna de tarjetas más ancha, 3 por fila (2 filas de 6). */
@media (min-width: 75rem) {
	.tmd-servicios__grid { grid-template-columns: 1fr 2fr; gap: 2.5rem; }
	.tmd-cards { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
	.tmd-card { padding: 1.35rem; }
}
/* Tablet con las tarjetas debajo del texto: también 3 por fila. */
@media (min-width: 48rem) and (max-width: 64rem) {
	.tmd-cards { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
	.tmd-card { padding: 1.25rem; }
}

/* ==========================================================================
   E. Sección oscura (estrategia)
   ========================================================================== */

.tmd-sobre { background: linear-gradient(160deg, var(--tmd-marino), var(--tmd-marino-2)); color: #fff; }
.tmd-sobre__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
.tmd-sobre__media { position: relative; }
.tmd-sobre__foto { border-radius: var(--tmd-radio); overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.tmd-sobre__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 82% center; aspect-ratio: 3 / 2; display: block; }
.tmd-sobre h2 { color: #fff; font-family: var(--tmd-sans); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); line-height: 1.12; margin: 0 0 1.1rem; }
.tmd-sobre__entrada { color: #c4d2ea; font-size: 1.05rem; line-height: 1.7; margin: 0 0 1.6rem; max-width: 34rem; }
.tmd-sobre .tmd-eyebrow { color: #8fb4ff; }
.tmd-checks { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.4rem; margin: 0 0 1.8rem; padding: 0; list-style: none; }
.tmd-checks li { display: flex; align-items: flex-start; gap: .6rem; color: #dbe6f7; font-size: .95rem; font-weight: 600; }
.tmd-checks .ed-icono { width: 22px; height: 22px; stroke: #5b9bff; flex: none; margin-top: 1px; }

@media (max-width: 60rem) {
	.tmd-sobre__grid { grid-template-columns: 1fr; }
	.tmd-sobre__media { max-width: 34rem; }
	.tmd-checks { grid-template-columns: 1fr; }
}

/* ==========================================================================
   F. Planes y precios
   ========================================================================== */

.tmd-planes {
	position: relative; overflow: hidden;
	background:
		radial-gradient(circle at 0% 100%, #eef3fd 0 15rem, transparent 15.05rem),
		radial-gradient(circle at 100% 0%, #f0f5fe 0 13rem, transparent 13.05rem),
		linear-gradient(180deg, #fff 0%, #f9fbff 100%);
}
.tmd-planes__grid { display: grid; grid-template-columns: 1fr 2.6fr; gap: clamp(2rem, 1rem + 3vw, 3rem); align-items: center; }
.tmd-planes__intro { position: relative; }

/* Eyebrow con raya y titular con una palabra en azul (según la maqueta). */
.tmd-eyebrow--linea { display: flex; align-items: center; gap: .9rem; font-size: .9rem; font-weight: 800; }
.tmd-eyebrow--linea::before { content: ""; width: 3rem; height: 2px; background: var(--tmd-azul); border-radius: 2px; }
.tmd-planes__intro h2 { font-size: clamp(2rem, 1.1rem + 2.3vw, 2.85rem); line-height: 1.08; letter-spacing: -.03em; }
.tmd-planes__intro .tmd-acento { color: var(--tmd-azul); }
.tmd-planes__intro p:not(.tmd-eyebrow) { color: var(--tmd-texto); font-size: 1.08rem; line-height: 1.7; max-width: 28rem; }
.tmd-btn--pastilla { border-radius: 999px; padding: 1.05rem 2rem; font-size: 1.05rem; box-shadow: 0 14px 28px -12px rgba(37, 99, 235, .65); }

.tmd-planes__cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; align-items: stretch; padding-top: 1rem; }

.tmd-plan {
	position: relative; display: flex; flex-direction: column;
	background: #fff; border: 1.5px solid transparent; border-radius: 18px;
	padding: 1.5rem 1.1rem 1.4rem;
	box-shadow: 0 1px 2px rgba(13, 27, 57, .04), 0 18px 40px -22px rgba(37, 99, 235, .3);
}
.tmd-plan--top { border-color: var(--tmd-azul); box-shadow: 0 0 0 5px rgba(37, 99, 235, .06), 0 26px 46px -24px rgba(37, 99, 235, .5); }
.tmd-plan__badge {
	position: absolute; top: -.95rem; left: 50%; transform: translateX(-50%);
	background: var(--tmd-azul); color: #fff; font-size: .74rem; font-weight: 800;
	letter-spacing: .05em; text-transform: uppercase; padding: .42rem 1.15rem; border-radius: 999px; white-space: nowrap;
	box-shadow: 0 8px 16px -8px rgba(37, 99, 235, .7);
}
.tmd-plan__ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; background: #eaf1ff; margin-bottom: 1.1rem; }
.tmd-plan__ico .ed-icono { width: 26px; height: 26px; stroke: var(--tmd-azul); }
.tmd-plan h3 { font-family: var(--tmd-sans); font-size: 1.2rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; color: var(--tmd-marino); margin: 0 0 .65rem; text-wrap: balance; }
.tmd-plan__precio { margin: 0 0 1.1rem; min-height: 2.1rem; display: flex; align-items: center; }
.tmd-plan__precio--cifra { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; color: var(--tmd-azul); }
.tmd-plan__pastilla { display: inline-block; padding: .32rem .8rem; border-radius: 999px; background: #e6efff; color: var(--tmd-azul-oscuro); font-size: .86rem; font-weight: 700; line-height: 1.3; }
.tmd-plan__pastilla--pendiente { background: #fef3c7; color: #b45309; }
.tmd-plan ul { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: .8rem; }
.tmd-plan ul li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; line-height: 1.45; color: var(--tmd-texto); }
.tmd-plan ul .ed-icono { width: 21px; height: 21px; stroke: var(--tmd-azul); flex: none; margin-top: 1px; }
.tmd-plan .tmd-enlace { margin-top: auto; font-size: .95rem; white-space: nowrap; }

@media (max-width: 75rem) {
	.tmd-planes__grid { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 56rem) { .tmd-planes__cards { grid-template-columns: repeat(2, 1fr); row-gap: 1.75rem; } }
@media (max-width: 34rem) { .tmd-planes__cards { grid-template-columns: 1fr; } }

/* ==========================================================================
   G. Proceso
   ========================================================================== */

.tmd-proceso { background: linear-gradient(180deg, #fff 0%, #f3f7ff 100%); }

.tmd-proceso__head {
	display: grid; grid-template-columns: 1fr 1fr; gap: 2rem clamp(2rem, 1rem + 5vw, 6rem);
	align-items: start; margin-bottom: clamp(3rem, 2rem + 3vw, 4.25rem);
}
.tmd-proceso__head .tmd-eyebrow { font-size: .9rem; margin-bottom: .9rem; }
.tmd-proceso__head h2 {
	font-size: clamp(2.2rem, 1.3rem + 2.9vw, 3.5rem);
	line-height: 1.08; letter-spacing: -.03em; max-width: 10em; margin: 0;
}
.tmd-proceso__head p { margin: .35rem 0 0; max-width: 36rem; color: var(--tmd-texto); font-size: 1.08rem; line-height: 1.7; }

/* Seis pasos: tarjetas con el número a caballo sobre el borde superior, unidas por una línea fina. */
.tmd-pasos {
	position: relative; list-style: none; margin: 0; padding: 22px 0 0;
	display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem;
}
.tmd-pasos::before {
	content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 1px;
	background: linear-gradient(90deg, transparent, #cddaf0 5%, #cddaf0 95%, transparent);
}
.tmd-paso {
	position: relative; z-index: 1;
	display: flex; flex-direction: column; text-align: left;
	padding: 2.4rem 1.3rem 1.6rem;
	background: #fff; border: 1px solid rgba(37, 99, 235, .07); border-radius: 16px;
	box-shadow: 0 1px 2px rgba(13, 27, 57, .04), 0 14px 34px -16px rgba(37, 99, 235, .25);
}
.tmd-paso__num {
	position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
	display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px;
	background: var(--tmd-azul); color: #fff; font-weight: 800; font-size: 1.05rem; line-height: 1;
	box-shadow: 0 0 0 5px #f7faff, 0 8px 16px -6px rgba(37, 99, 235, .55);
}
.tmd-paso__ico { display: block; margin-bottom: 1rem; }
.tmd-paso__ico .ed-icono { width: 34px; height: 34px; stroke: var(--tmd-azul); stroke-width: 1.5; }
.tmd-paso h3 { font-family: var(--tmd-sans); font-size: 1.1rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--tmd-marino); margin: 0 0 .5rem; text-wrap: balance; }
.tmd-paso p { font-size: .92rem; line-height: 1.55; color: var(--tmd-texto); margin: 0; }

@media (max-width: 75rem) {
	.tmd-pasos { grid-template-columns: repeat(3, 1fr); gap: 3rem 1.1rem; }
	.tmd-pasos::before { display: none; }
}
@media (max-width: 52rem) {
	.tmd-proceso__head { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 40rem) {
	.tmd-pasos { grid-template-columns: repeat(2, 1fr); gap: 2.75rem .85rem; }
	.tmd-paso { padding: 2.25rem 1rem 1.25rem; }
}
@media (max-width: 24rem) { .tmd-pasos { grid-template-columns: 1fr; } }

/* ==========================================================================
   H. Portfolio (sustituye testimonios)
   ========================================================================== */

.tmd-trabajos {
	position: relative; overflow: hidden;
	background:
		radial-gradient(circle at 0% 100%, #eef3fd 0 16rem, transparent 16.05rem),
		radial-gradient(circle at 100% 0%, #f0f5fe 0 14rem, transparent 14.05rem),
		linear-gradient(180deg, #f9fbff 0%, #fff 100%);
}
.tmd-trabajos__grid { display: grid; grid-template-columns: 1fr 2.6fr; gap: clamp(2rem, 1rem + 3vw, 3rem); align-items: center; }
.tmd-trabajos__intro { position: relative; }
.tmd-trabajos__intro h2 { font-size: clamp(2.2rem, 1.2rem + 2.8vw, 3.1rem); line-height: 1.1; letter-spacing: -.03em; }
.tmd-trabajos__intro p:not(.tmd-eyebrow) { color: var(--tmd-texto); font-size: 1.05rem; line-height: 1.7; max-width: 28rem; }
.tmd-btn--sin-sombra { box-shadow: none; background: #fff; }
.tmd-btn--sin-sombra:hover { box-shadow: none; }

/* Eyebrow con la raya colgando en el margen izquierdo (como la maqueta); sin margen suficiente, raya en línea. */
.tmd-eyebrow--cuelga { position: relative; display: flex; align-items: center; gap: .9rem; font-size: .95rem; font-weight: 700; }
.tmd-eyebrow--cuelga::before { content: ""; width: 2.25rem; height: 2px; background: var(--tmd-azul); border-radius: 2px; }
@media (min-width: 80rem) {
	.tmd-eyebrow--cuelga::before { position: absolute; right: 100%; margin-right: 1rem; width: 2.5rem; }
}

.tmd-proyectos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; align-items: stretch; }
.tmd-proyecto {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid rgba(37, 99, 235, .06); border-radius: 22px;
	padding: .65rem .65rem 1.4rem;
	box-shadow: 0 1px 2px rgba(13, 27, 57, .04), 0 22px 44px -26px rgba(37, 99, 235, .35);
}
.tmd-proyecto__shot { border-radius: 16px; overflow: hidden; background: #e6eefb; aspect-ratio: 3 / 2; }
.tmd-proyecto__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tmd-proyecto__cuerpo { padding: 1.15rem .7rem 0; display: flex; flex-direction: column; align-items: flex-start; gap: .65rem; flex: 1; }
.tmd-proyecto__cat {
	display: inline-block; padding: .32rem .8rem; border-radius: 999px; background: #eaf1ff; color: var(--tmd-azul-oscuro);
	font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3;
}
.tmd-proyecto h3 { font-family: var(--tmd-sans); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--tmd-marino); margin: 0; }
.tmd-proyecto p { font-size: .95rem; line-height: 1.6; color: var(--tmd-texto); margin: 0; }
.tmd-proyecto .tmd-pendiente {
	margin-top: auto; border: 0; border-radius: 999px; background: #fef0d4; color: #a85a06;
	padding: .42rem 1rem; font-size: .9rem; font-weight: 700;
}

@media (max-width: 75rem) {
	.tmd-trabajos__grid { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 52rem) { .tmd-proyectos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 36rem) { .tmd-proyectos { grid-template-columns: 1fr; } }

/* ==========================================================================
   I. Banda final (reescribe .ed-cta, compartida) → azul
   ========================================================================== */

.ed-cta { background: var(--tmd-azul); color: #fff; padding-block: clamp(2.5rem, 1.8rem + 3vw, 3.75rem); }
.ed-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; max-width: var(--tmd-ancho); padding-inline: var(--tmd-gutter); }
.ed-cta__texto { display: flex; align-items: flex-start; gap: 1rem; }
.ed-cta__texto h2 { color: #fff; font-family: var(--tmd-sans); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin: 0 0 .4rem; }
.ed-cta__texto p { color: rgba(255, 255, 255, .9); margin: 0; font-size: 1.02rem; }
.ed-cta__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(255, 255, 255, .18); flex: none; }
.ed-cta__ico .ed-icono { width: 26px; height: 26px; stroke: #fff; }
.ed-cta__acciones { display: flex; align-items: center; gap: 1rem; flex: none; }
.ed-cta__acciones .ed-btn { background: #fff; color: var(--tmd-azul); padding: .9rem 1.6rem; border-radius: 10px; font-weight: 800; font-family: var(--tmd-sans); text-decoration: none; border: 0; white-space: nowrap; }
.ed-cta__acciones .ed-btn:hover { background: var(--tmd-azul-claro); }
.ed-cta__acciones .ed-directo { display: none; }

@media (max-width: 52rem) {
	.ed-cta__inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   J. Pie (reescribe .ed-pie, compartido) → marino
   ========================================================================== */

.ed-pie { position: relative; background: var(--tmd-marino); color: #c4d2ea; overflow: hidden; padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem) 1.5rem; }
.ed-pie .ed-pie__montana { position: absolute; inset-inline: 0; bottom: 0; width: 100%; height: 120px; color: rgba(91, 155, 255, .06); pointer-events: none; }
.ed-pie__inner { position: relative; max-width: var(--tmd-ancho); padding-inline: var(--tmd-gutter); }
.ed-pie__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ed-pie .ed-marca { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; margin-bottom: .9rem; }
.ed-pie .ed-marca__mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: var(--tmd-azul); color: #fff; font-weight: 800; font-size: .9rem; }
.ed-pie .ed-marca__nombre { font-family: var(--tmd-sans); font-weight: 800; font-size: 1.1rem; color: #fff; }
.ed-pie .ed-marca__tag { font-size: .68rem; color: #8ea4c6; }
.ed-pie__descriptor { font-size: .92rem; line-height: 1.6; color: #a9bbd8; max-width: 22rem; margin: 0; }
.ed-pie h2 { font-family: var(--tmd-sans); font-size: .95rem; font-weight: 800; color: #fff; text-transform: none; letter-spacing: 0; margin: 0 0 1rem; }
.ed-pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ed-pie ul a, .ed-pie ul li { color: #a9bbd8; text-decoration: none; font-size: .92rem; }
.ed-pie ul a:hover { color: #fff; }
.ed-pie__legal { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; }
.ed-pie__legal p { margin: 0; font-size: .85rem; color: #8ea4c6; }
.ed-pie__legal ul { display: flex; flex-wrap: wrap; gap: 1rem; }
.ed-pie__legal ul a { font-size: .85rem; color: #8ea4c6; }
.ed-pie .ed-social { display: flex; gap: .6rem; margin-top: 1rem; }
.ed-pie .ed-social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: #c4d2ea; }
.ed-pie .ed-social a:hover { background: var(--tmd-azul); color: #fff; }
.ed-pie .ed-social .ed-icono { width: 18px; height: 18px; stroke: currentColor; }

@media (max-width: 60rem) {
	.ed-pie__grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}
@media (max-width: 36rem) {
	.ed-pie__grid { grid-template-columns: 1fr; }
	.ed-pie__legal { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   Marcador de contenido pendiente (datos reales por confirmar)
   ========================================================================== */

.tmd-pendiente {
	display: inline-block; font-size: .78rem; font-weight: 700;
	color: #b45309; background: #fef3c7; border: 1px dashed #f59e0b;
	padding: .1rem .5rem; border-radius: 6px;
}

/* ==========================================================================
   Entrada al hacer scroll (solo si el usuario no pide menos movimiento)
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.tmd-reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
	.tmd-reveal.is-in { opacity: 1; transform: none; }
}

/* ==========================================================================
   Paleta azul unificada
   Los tokens «Teide» del tema (violeta lava + amarillo azufre) pasan al azul
   y marino de la maqueta, para que todo el sitio comparta un único azul
   dominante. Donde el acento se usaba como fondo (con texto oscuro) el texto
   pasa a blanco; sobre superficies oscuras el acento se aclara para contraste.
   ========================================================================== */

:root {
	--ed-dominante: var(--tmd-marino);
	--ed-acento:    var(--tmd-azul);
	--ed-texto:     #33425d;
	--ed-linea:     #dde3ee;
	--tmd-acento-sobre-oscuro: #8fb4ff;
}

.ed-saltar,
.ed-etiqueta,
.edig-plan__sello,
.ed-precio__sello,
.ed-marca__mark,
.ed-btn--primario, .ed-btn--primario:hover, .ed-btn--primario:active,
.edig-btn--primary, .edig-btn--primary:hover, .edig-btn--primary:active,
.ed-hero .ed-triage__precio { color: #fff; }

.ed-hero .ed-triage__precio::before { background: #fff; }

/* Acento como texto/borde sobre fondos oscuros: azul claro, legible. */
.ed-hero__eyebrow,
.ed-hero__persona-icono,
.ed-hero .ed-triage__icono,
.ed-hero__otro a,
.ed-hero .ed-triage__fila:focus-visible .ed-triage__flecha,
.ed-pie .edig-pendiente { color: var(--tmd-acento-sobre-oscuro); }
.ed-hero__eyebrow::before, .ed-hero__persona::before { background: var(--tmd-acento-sobre-oscuro); }
.ed-pie .edig-pendiente { border-bottom-color: var(--tmd-acento-sobre-oscuro); }
.ed-pie :focus-visible, .ed-hero :focus-visible, .ed-pagina__cab :focus-visible { outline-color: var(--tmd-acento-sobre-oscuro); }

/* ==========================================================================
   Cabeceras de página con imagen de fondo
   Foto de Jakub Żerdzicki (Unsplash, Unsplash License: uso libre, también
   comercial), assets/img/cabeceras/ (créditos en CREDITOS.txt). El blend «luminosity»
   sobre el azul de la marca la pasa a duotono azul y el velo marino asegura
   el contraste del texto (zona izquierda más opaca).
   ========================================================================== */

.ed-pagina__cab {
	background-color: var(--tmd-azul);
	background-image:
		linear-gradient(100deg, rgba(13, 27, 57, .94) 0%, rgba(13, 27, 57, .82) 50%, rgba(13, 27, 57, .58) 100%),
		var(--tmd-cab-img, url("img/cabeceras/base.webp"));
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-blend-mode: normal, luminosity;
}

@media print {
	.ed-pagina__cab { background-image: none; }
}

/* Una foto por sección: la clase ed-cab-{clave} la pone inc/cabeceras.php. */
.ed-cab-servicios { --tmd-cab-img: url("img/cabeceras/servicios.webp"); }
.ed-cab-diseno-web { --tmd-cab-img: url("img/cabeceras/diseno-web.webp"); }
.ed-cab-tiendas { --tmd-cab-img: url("img/cabeceras/tiendas.webp"); }
.ed-cab-velocidad { --tmd-cab-img: url("img/cabeceras/velocidad.webp"); }
.ed-cab-mant-wp { --tmd-cab-img: url("img/cabeceras/mant-wp.webp"); }
.ed-cab-mant-it { --tmd-cab-img: url("img/cabeceras/mant-it.webp"); }
.ed-cab-aplicaciones { --tmd-cab-img: url("img/cabeceras/aplicaciones.webp"); }
.ed-cab-seo { --tmd-cab-img: url("img/cabeceras/seo.webp"); }
.ed-cab-contenido { --tmd-cab-img: url("img/cabeceras/contenido.webp"); }
.ed-cab-proyectos { --tmd-cab-img: url("img/cabeceras/proyectos.webp"); }
.ed-cab-sobre-mi { --tmd-cab-img: url("img/cabeceras/sobre-mi.webp"); }
.ed-cab-zona { --tmd-cab-img: url("img/cabeceras/zona.webp"); }
.ed-cab-contacto { --tmd-cab-img: url("img/cabeceras/contacto.webp"); }
.ed-cab-faq { --tmd-cab-img: url("img/cabeceras/faq.webp"); }

/* Cabeceras de página: la píldora flota sobre la foto, así que se reserva su altura. */
.ed-pagina__cab { padding-top: calc(var(--cab-reserva) + 1.5rem); }

/* ==========================================================================
   Tarjetas de precio: misma sombra que la píldora de la cabecera
   Planes de la home, paquetes de las fichas y ficha lateral con el precio.
   ========================================================================== */

.tmd-plan,
.edig-plan,
.ed-ficha { box-shadow: var(--sombra-flotante); }
.tmd-plan--top { box-shadow: 0 0 0 5px rgba(37, 99, 235, .06), var(--sombra-flotante); }
.edig-plan--destacado { box-shadow: 0 0 0 4px rgba(37, 99, 235, .07), var(--sombra-flotante); }

/* ==========================================================================
   Páginas de servicio (y resto de interiores salvo legales): lenguaje de la home
   Manrope en titulares y entradilla, checks azules, tarjetas con la sombra
   flotante y fondo azul pálido. Solo CSS: textos y estructura no cambian.
   ========================================================================== */

.ed-pagina:not(.ed-pagina--legal) { background: #f6f9ff; }

/* Cabecera de página */
.ed-pagina:not(.ed-pagina--legal) .ed-pagina__cab h1 {
	font-family: var(--tmd-sans); font-weight: 800; letter-spacing: -.03em; line-height: 1.08;
	font-size: clamp(2.2rem, 1.3rem + 2.9vw, 3.4rem); max-width: 18ch; color: #fff; text-wrap: balance;
}
.ed-pagina:not(.ed-pagina--legal) .ed-entradilla { font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem); line-height: 1.6; font-weight: 500; color: #cfdcf2; max-width: 46rem; }
.ed-pagina .ed-migas { font-size: .88rem; }

/* Contenido */
.ed-pagina:not(.ed-pagina--legal) .ed-contenido { font-size: 1.05rem; line-height: 1.75; color: var(--tmd-texto); }
.ed-pagina:not(.ed-pagina--legal) .ed-contenido > * { max-width: 44rem; }
.ed-pagina:not(.ed-pagina--legal) .ed-contenido > p:first-child:not(.ed-aviso-legal) {
	font-family: var(--tmd-sans); font-size: clamp(1.2rem, 1rem + .9vw, 1.5rem); font-weight: 600;
	line-height: 1.45; letter-spacing: -.015em; color: var(--tmd-marino);
}
.ed-pagina:not(.ed-pagina--legal) .ed-contenido > h2 {
	margin: clamp(2.75rem, 2rem + 3vw, 4rem) 0 1.1rem; padding-top: 0; border-top: 0;
	font-family: var(--tmd-sans); font-weight: 800; letter-spacing: -.025em; line-height: 1.15;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem); color: var(--tmd-marino);
}
.ed-pagina:not(.ed-pagina--legal) .ed-contenido > h2:first-child { margin-top: 0; }
.ed-pagina:not(.ed-pagina--legal) .ed-contenido > h3 { font-family: var(--tmd-sans); font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; color: var(--tmd-marino); margin: 2rem 0 .5rem; }
.ed-pagina:not(.ed-pagina--legal) .ed-contenido a { color: var(--tmd-azul-oscuro); text-underline-offset: .2em; }
.ed-pagina:not(.ed-pagina--legal) .ed-contenido strong { color: var(--tmd-marino); font-weight: 700; }

/* Listas: check azul en un círculo */
.ed-pagina:not(.ed-pagina--legal) .ed-contenido ul:not([class*="edig-"]):not(.ed-directo) > li { padding-left: 2.1rem; margin-bottom: .8rem; }
.ed-pagina:not(.ed-pagina--legal) .ed-contenido ul:not([class*="edig-"]):not(.ed-directo) > li::before,
.edig-lista li::before {
	content: ""; width: 22px; height: 22px; top: .22em; left: 0; font-size: 0; background-color: transparent; border-radius: 0;
	background-repeat: no-repeat; background-position: center; background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='m8 12.2 2.8 2.8L16.5 9.3'/%3E%3C/svg%3E");
}
.edig-lista--no li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa8c2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
}
.edig-lista li { padding-left: 2rem; margin-bottom: .6rem; }
.edig-lista--no li { color: #6b7a95; }

/* Ficha lateral */
.ed-ficha { padding: 1.5rem; border: 1px solid rgba(37, 99, 235, .07); border-radius: 22px; background: #fff; }
.ed-ficha .ed-etiqueta--grande {
	padding: .5rem 1.05rem; border-radius: 14px; clip-path: none; background: #eaf1ff; color: var(--tmd-azul-oscuro);
	font-family: var(--tmd-sans); font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em;
}
.ed-ficha .ed-etiqueta--grande::before { display: none; }
.ed-ficha__titulo { font-family: var(--tmd-sans); font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--tmd-marino); }
.ed-ficha__resumen { font-size: .98rem; color: var(--tmd-texto); }
.ed-ficha .ed-btn--primario { border-radius: 12px; padding: 1rem 1.25rem; font-family: var(--tmd-sans); font-weight: 700; font-size: 1rem; }
.ed-ficha__nota { font-size: .85rem; color: #55657f; }
.ed-indice { border-top-color: var(--tmd-linea); }
.ed-indice__titulo { font-size: .9rem; font-weight: 800; color: var(--tmd-marino); }
.ed-indice a { padding: .3rem 0 .3rem .8rem; border-left: 2px solid var(--tmd-linea); color: #55657f; font-size: .9rem; text-decoration: none; transition: color .15s ease, border-color .15s ease; }
.ed-indice a:hover { color: var(--tmd-azul); border-left-color: var(--tmd-azul); text-decoration: none; }
.ed-indice ol { display: grid; gap: .1rem; }

/* Paquetes */
.edig-planes { gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); }
.edig-plan { padding: 1.6rem 1.4rem; border: 1.5px solid transparent; border-radius: 20px; }
.edig-plan--destacado { border-color: var(--tmd-azul); padding: 1.6rem 1.4rem; }
.edig-plan__sello {
	padding: .35rem .9rem; border-radius: 999px; clip-path: none; background: var(--tmd-azul); color: #fff;
	font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.edig-plan__sello::before { display: none; }
.edig-plan__titulo { font-family: var(--tmd-sans); font-size: 1.2rem; font-weight: 800; letter-spacing: -.015em; color: var(--tmd-marino); }
.edig-plan__importe { font-family: var(--tmd-sans); font-weight: 800; letter-spacing: -.03em; font-size: clamp(1.9rem, 1.5rem + 1vw, 2.3rem); color: var(--tmd-azul); }
.edig-plan__importe--texto { font-size: 1.3rem; }
.edig-plan__prefijo, .edig-plan__periodo { font-weight: 700; color: #55657f; }
.edig-plan__nota { color: #55657f; }
.edig-plan__subtitulo { font-size: .85rem; font-weight: 800; color: var(--tmd-marino); }
.edig-plan__respuesta { font-size: .85rem; color: #55657f; }

/* Botones de los paquetes y del formulario */
.edig-btn { border-radius: 12px; font-family: var(--tmd-sans); font-weight: 700; }
.edig-btn--ghost { color: var(--tmd-azul-oscuro); border-color: var(--tmd-azul); background: transparent; }
.edig-btn--ghost:hover { background: var(--tmd-azul); color: #fff; }

/* Formulario */
.edig-form {
	padding: clamp(1.4rem, 1rem + 2vw, 2.5rem); border: 1px solid rgba(37, 99, 235, .07); border-top: 1px solid rgba(37, 99, 235, .07);
	border-radius: 24px; box-shadow: var(--sombra-flotante);
}
.edig-form__titulo, .ed-contenido > h2 + .edig-form-wrap { font-family: var(--tmd-sans); }
.edig-field label { font-size: .95rem; font-weight: 700; color: var(--tmd-marino); }
.edig-field input[type="text"], .edig-field input[type="email"], .edig-field input[type="tel"], .edig-field input[type="url"],
.edig-field input[type="search"], .edig-field select, .edig-field textarea {
	padding: .85rem 1rem; border: 1.5px solid #dbe3f1; border-bottom-width: 1.5px; border-radius: 12px; font-size: 1rem; color: var(--tmd-marino); background-color: #fbfcff;
}
.edig-field input:focus-visible, .edig-field select:focus-visible, .edig-field textarea:focus-visible {
	border-color: var(--tmd-azul); box-shadow: 0 0 0 4px rgba(37, 99, 235, .14); outline: 0; background-color: #fff;
}
.edig-form__submit .edig-btn { border-radius: 14px; padding-block: 1.05rem; font-size: 1.05rem; box-shadow: 0 14px 26px -12px rgba(37, 99, 235, .65); }
.edig-form__garantia { font-size: .88rem; color: #55657f; }

/* ==========================================================================
   Chips del hero en el margen izquierdo
   Con margen de sobra (≥ 106rem) se ven completos; con menos, quedan como
   iconos y la etiqueta aparece como globo al pasar el ratón o enfocar.
   ========================================================================== */

@media (min-width: 118rem) {
	.tmd-hero__media { left: clamp(1rem, 2.5vw, 3rem); }
}
@media (min-width: 80.0625rem) and (max-width: 117.99rem) {
	.tmd-hero__media { left: 14px; gap: .5rem; }
	.tmd-chip { position: relative; width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 14px; }
	.tmd-chip > span:last-child {
		position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-6px, -50%);
		padding: .45rem .8rem; border-radius: 10px; background: var(--tmd-marino); color: #fff;
		font-size: .85rem; font-weight: 700; white-space: nowrap;
		opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
	}
	.tmd-chip:hover > span:last-child, .tmd-chip:focus-visible > span:last-child { opacity: 1; transform: translate(0, -50%); }
}

/* Paquetes, formulario y listados ocupan todo el ancho de la columna (hasta el hueco antes de la ficha lateral);
   solo el texto corrido se limita a 44rem. */
.ed-pagina:not(.ed-pagina--legal) .ed-contenido > .edig-planes,
.ed-pagina:not(.ed-pagina--legal) .ed-contenido > .edig-form-wrap,
.ed-pagina:not(.ed-pagina--legal) .ed-contenido > .edig-casos,
.ed-pagina:not(.ed-pagina--legal) .ed-contenido > .edig-servicios,
.ed-pagina:not(.ed-pagina--legal) .ed-contenido > .edig-proceso,
.ed-pagina:not(.ed-pagina--legal) .ed-contenido > .ed-precios__lista,
.ed-pagina:not(.ed-pagina--legal) .ed-contenido > .alignwide,
.ed-pagina:not(.ed-pagina--legal) .ed-contenido > .alignfull,
.ed-pagina:not(.ed-pagina--legal) .ed-contenido > .ed-destacada { max-width: none; }

/* ==========================================================================
   Transiciones suaves entre páginas
   View Transitions entre documentos (Chrome/Edge 126+, Safari 18.2+): la
   página nueva se funde sobre la anterior y la píldora de la cabecera, que es
   idéntica en todas, se mantiene quieta en lugar de redibujarse. Sin soporte,
   la página entra con un fundido corto. Con «reducir movimiento» no hay efecto.
   ========================================================================== */

@view-transition { navigation: auto; }

.ed-cabecera__inner { view-transition-name: cabecera; }

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .28s;
	animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
/* La cabecera no se funde ni se mueve: el grupo mantiene su posición y tamaño. */
::view-transition-old(cabecera),
::view-transition-new(cabecera) { animation: none; mix-blend-mode: normal; }
::view-transition-group(cabecera) { animation-duration: .28s; }

@supports not (view-transition-name: none) {
	@media (prefers-reduced-motion: no-preference) {
		.ed-principal { animation: ed-entrada .3s ease-out both; }
	}
}
@keyframes ed-entrada { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) { animation: none !important; }
}

/* ==========================================================================
   Rendimiento
   ========================================================================== */

/* Cabeceras de página en móvil: versión de 800 px (5–39 KB) en lugar de la de 1600 px. */
@media (max-width: 40rem) {
	.ed-cab-servicios { --tmd-cab-img: url("img/cabeceras/m/servicios.webp"); }
	.ed-cab-diseno-web { --tmd-cab-img: url("img/cabeceras/m/diseno-web.webp"); }
	.ed-cab-tiendas { --tmd-cab-img: url("img/cabeceras/m/tiendas.webp"); }
	.ed-cab-velocidad { --tmd-cab-img: url("img/cabeceras/m/velocidad.webp"); }
	.ed-cab-mant-wp { --tmd-cab-img: url("img/cabeceras/m/mant-wp.webp"); }
	.ed-cab-mant-it { --tmd-cab-img: url("img/cabeceras/m/mant-it.webp"); }
	.ed-cab-aplicaciones { --tmd-cab-img: url("img/cabeceras/m/aplicaciones.webp"); }
	.ed-cab-seo { --tmd-cab-img: url("img/cabeceras/m/seo.webp"); }
	.ed-cab-contenido { --tmd-cab-img: url("img/cabeceras/m/contenido.webp"); }
	.ed-cab-proyectos { --tmd-cab-img: url("img/cabeceras/m/proyectos.webp"); }
	.ed-cab-sobre-mi { --tmd-cab-img: url("img/cabeceras/m/sobre-mi.webp"); }
	.ed-cab-zona { --tmd-cab-img: url("img/cabeceras/m/zona.webp"); }
	.ed-cab-contacto { --tmd-cab-img: url("img/cabeceras/m/contacto.webp"); }
	.ed-cab-faq { --tmd-cab-img: url("img/cabeceras/m/faq.webp"); }
	.ed-cab-base { --tmd-cab-img: url("img/cabeceras/m/base.webp"); }
}

/* Secciones bajo el pliegue: el navegador no las maqueta ni las pinta hasta que se acercan. */
.tmd-servicios,
.tmd-sobre,
.tmd-planes,
.tmd-proceso,
.tmd-trabajos,
.ed-cta,
.ed-pie {
	content-visibility: auto;
	contain-intrinsic-size: auto 640px;
}

/* Con 8 botones los chips son más compactos para caber bajo la cabecera. */
.tmd-chip { padding: .45rem .8rem .45rem .5rem; gap: .5rem; font-size: .82rem; border-radius: 12px; }
.tmd-chip__ico { width: 28px; height: 28px; border-radius: 8px; }
.tmd-chip__ico .ed-icono { width: 16px; height: 16px; }
@media (min-width: 80.0625rem) and (max-width: 117.99rem) {
	.tmd-chip { width: 46px; height: 46px; padding: 0; gap: 0; border-radius: 14px; justify-content: center; }
	.tmd-chip__ico { width: 32px; height: 32px; }
	.tmd-chip__ico .ed-icono { width: 18px; height: 18px; }
}

/* Los avisos del formulario no deben llevar el check azul de las listas de contenido:
   un error con un «correcto» al lado confunde. Icono de aviso rojo en su lugar. */
.edig-alert ul > li { padding-left: 1.9rem; }
.edig-alert ul > li::before,
.ed-pagina:not(.ed-pagina--legal) .ed-contenido .edig-alert ul:not([class*="edig-"]):not(.ed-directo) > li::before {
	content: ""; width: 20px; height: 20px; top: .2em; left: 0; background-color: transparent;
	background-repeat: no-repeat; background-position: center; background-size: contain;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b33b36' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 7.5v5.2M12 16.4v.1'/%3E%3C/svg%3E");
}
.ed-pagina:not(.ed-pagina--legal) .ed-contenido .edig-alert--ok ul:not([class*="edig-"]):not(.ed-directo) > li::before,
.edig-alert--ok ul > li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326734d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='m8 12.2 2.8 2.8L16.5 9.3'/%3E%3C/svg%3E");
}

/* CTA con texto dentro del menú desplegable (en móvil el de la barra es solo un icono). */
.ed-cabecera .ed-nav .ed-nav__cta { display: none; }
@media (max-width: 75rem) {
	.ed-cabecera .ed-nav.is-abierta .ed-nav__cta { display: flex; justify-content: center; position: sticky; bottom: .2rem; margin: .6rem .3rem .2rem; padding: 1rem 1.25rem; border-radius: 14px; box-shadow: 0 0 0 .6rem #fff, 0 14px 26px -10px rgba(37, 99, 235, .6); }
}
.tmd-proyecto .tmd-enlace { margin-top: .15rem; }

/* ==========================================================================
   Proyectos ([edig_casos]): captura completa en una ventana de navegador
   Una fila por proyecto para que la captura panorámica se vea entera y
   legible. La barra muestra el dominio real y enlaza a la web publicada;
   debajo, título, línea de servicio y la opinión del cliente.
   ========================================================================== */

.edig-casos { grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 2rem + 2vw, 3.75rem); }

.edig-caso { background: none; border: 0; border-radius: 0; overflow: visible; }
.edig-caso .edig-caso__titulo a::after { content: none; }

.edig-caso__ventana {
	margin: 0;
	background: var(--tmd-blanco);
	border: 1px solid #dfe6f2;
	border-radius: var(--tmd-radio);
	overflow: hidden;
}

.edig-caso__barra {
	display: flex; align-items: center;
	margin: 0; padding: .45rem .7rem;
	background: #f3f6fb;
	border-bottom: 1px solid #dfe6f2;
}
.edig-caso__dominio {
	flex: 0 1 22rem; min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	padding: .3rem .9rem;
	background: var(--tmd-blanco);
	border: 1px solid #dfe6f2;
	border-radius: 999px;
	font-family: var(--tmd-sans); font-size: .82rem; font-weight: 600; line-height: 1.3;
	color: var(--tmd-texto);
	text-decoration: none;
}
.edig-caso__dominio:hover { color: var(--tmd-azul-oscuro); border-color: var(--tmd-azul); }
.edig-caso__dominio:focus-visible { outline: 2px solid var(--tmd-azul); outline-offset: 2px; }

.edig-caso__captura { display: block; }
.edig-caso__captura img { display: block; width: 100%; height: auto; }
.edig-caso__ventana .edig-caso__imagen--vacia { aspect-ratio: 16 / 9; }

.edig-caso .edig-caso__cuerpo { padding: 1.25rem 0 0; max-width: 40rem; }
.edig-caso .edig-caso__titulo {
	margin: 0 0 .35rem;
	font-family: var(--tmd-sans); font-weight: 800;
	font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); line-height: 1.2; letter-spacing: -.02em;
	color: var(--tmd-tinta);
	text-wrap: balance;
}
.edig-caso .edig-caso__titulo a { color: inherit; text-decoration: none; }
.edig-caso .edig-caso__titulo a:hover,
.edig-caso .edig-caso__titulo a:focus-visible {
	text-decoration: underline; text-decoration-color: var(--tmd-azul);
	text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.edig-caso .edig-caso__cat { margin: 0; font-size: .9rem; font-weight: 600; color: var(--tmd-tenue); }

.edig-caso .edig-caso__cita {
	margin: 1rem 0 0; padding: 0 0 0 1rem;
	border-left: 3px solid var(--tmd-azul);
	font-size: 1.05rem; font-style: normal; line-height: 1.6;
	color: var(--tmd-tinta);
}
.edig-caso .edig-caso__cita p { margin: 0; }
.edig-caso .edig-caso__cita p::before { content: "«"; }
.edig-caso .edig-caso__cita p::after { content: "»"; }

/* Tarjetas de ejemplo (solo con ejemplos="si"): siguen en rejilla y discontinuas. */
.edig-casos:has(> .edig-caso--ejemplo) { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; }
.edig-caso--ejemplo .edig-caso__imagen--vacia { border: 1px dashed #c9d3e4; border-radius: var(--tmd-radio); }
.edig-caso--ejemplo .edig-caso__cuerpo { padding: 1rem 0 0; }