/* ----------------------------------------------------
   SITIO PÚBLICO DE e-tiqueta.es
   Estilos compartidos por todas las páginas del sitio.
   Las páginas públicas de e-label NO usan esta hoja.

   TIPOGRAFÍA: pila del sistema, sin ninguna fuente externa. No es una
   limitación técnica: la política de cookies afirma que el sitio no carga
   recursos de terceros, y hay una prueba que lo comprueba (§24).

   ESCALA FLUIDA: los tamaños grandes usan clamp() en vez de saltos por media
   query, así el titular encaja igual en un móvil estrecho que en un portátil
   sin que haya un punto exacto donde la página cambia de golpe.
---------------------------------------------------- */

:root {
	/* Marca */
	--w-primary: #1f6fe0;
	--w-primary-claro: #4f96f5;
	--w-primary-dark: #1550ab;
	--w-primary-suave: #eaf2fe;
	--w-accent: #2f9e55;
	--w-accent-claro: #45c777;
	--w-accent-suave: #eaf7ee;

	/* Neutros */
	--w-tinta: #0b1622;      /* el fondo oscuro de los bloques de contraste */
	--w-tinta-2: #14273a;
	--w-dark: #16232f;
	--w-texto: #35485c;
	--w-suave: #64748b;
	--w-tenue: #8fa1b3;
	--w-linea: #e3e9f0;
	--w-linea-fina: #eef2f7;
	--w-fondo: #f6f9fd;

	/* Compatibilidad con lo escrito antes */
	--w-claro: var(--w-primary-suave);

	/* Radios y sombras: una escala corta, para que todo el sitio se parezca */
	--w-r-sm: 10px;
	--w-r-md: 14px;
	--w-r-lg: 20px;
	--w-r-xl: 28px;
	--w-sombra-1: 0 1px 2px rgba(16,32,48,.05), 0 1px 3px rgba(16,32,48,.04);
	--w-sombra-2: 0 4px 12px rgba(16,32,48,.06), 0 2px 4px rgba(16,32,48,.04);
	--w-sombra-3: 0 18px 40px -12px rgba(16,32,48,.18), 0 4px 12px rgba(16,32,48,.06);
	--w-sombra-4: 0 40px 80px -24px rgba(6,18,32,.45), 0 12px 28px -12px rgba(6,18,32,.35);
}

/* NADA PUEDE ENSANCHAR EL DOCUMENTO.
   Este es el arreglo de fondo del pie «cortado». El fondo de un bloque cubre el
   ancho de la VENTANA, no el del documento; así que en cuanto algo asoma por la
   derecha —un desplegable abierto, una tabla ancha, una tarjeta con una ficha
   flotante— el documento se ensancha, y la banda oscura del pie deja de llegar
   hasta el final mientras su contenido sí lo hace. Se ve como si la columna
   derecha se saliera por debajo del pie.

   clip y no hidden: hidden convierte el elemento en contenedor de
   desplazamiento y rompe el position:sticky de la barra de menú. */
html, body { overflow-x: clip; }

body {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--w-texto);
	margin: 0;
	background: #fff;
	-webkit-font-smoothing: antialiased;
	max-width: 100%;
}

/* Un anillo de foco visible y coherente en todo el sitio. Sin esto, quien
   navega con el teclado se pierde en cuanto sale de un enlace de texto. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, .btn:focus-visible {
	outline: 3px solid rgba(79,150,245,.6);
	outline-offset: 2px;
	border-radius: 8px;
}

h1, h2, h3, h4 { color: var(--w-dark); letter-spacing: -.022em; text-wrap: balance; }
p { text-wrap: pretty; }

/* Una palabra del titular en degradado. Se usa con cuentagotas: si se resalta
   media frase deja de resaltar nada. */
.w-degradado {
	background: linear-gradient(100deg, var(--w-primary-claro), var(--w-accent-claro));
	-webkit-background-clip: text; background-clip: text;
	color: transparent;
}


/* ====================================================
   BOTONES
   Sistema propio, no el de Bootstrap.

   El fallo que arregla: .btn-w traía su propio padding y se emparejaba con un
   .btn-outline-secondary, que trae el de Bootstrap. Dos botones uno al lado
   del otro con alturas distintas. Ahora los dos salen de la misma base y
   comparten min-height, así que se alinean aunque uno tenga icono y el otro no.
   ==================================================== */

.btn-w, .btn-w2 {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	min-height: 50px;
	padding: .8rem 1.75rem;
	border-radius: 12px;
	font-weight: 600; font-size: 1rem; line-height: 1.2;
	text-decoration: none; text-align: center;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-w-lg { min-height: 56px; padding: .95rem 2.1rem; font-size: 1.05rem; }

.btn-w {
	background: linear-gradient(180deg, #2f83ee, var(--w-primary));
	border-color: var(--w-primary-dark);
	color: #fff;
	box-shadow: 0 10px 22px -12px rgba(21,80,171,.9), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-w:hover { background: linear-gradient(180deg, var(--w-primary), var(--w-primary-dark)); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 30px -14px rgba(21,80,171,.95), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-w:active { transform: translateY(0); }

.btn-w2 { background: #fff; border-color: var(--w-linea); color: var(--w-dark); box-shadow: var(--w-sombra-1); }
.btn-w2:hover { border-color: var(--w-primary); color: var(--w-primary-dark); background: var(--w-primary-suave); transform: translateY(-2px); }

/* Sobre fondo oscuro */
.w-oscuro .btn-w2, .btn-w2.claro { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); color: #fff; backdrop-filter: blur(6px); box-shadow: none; }
.w-oscuro .btn-w2:hover, .btn-w2.claro:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; }
.btn-w.claro { background: #fff; border-color: #fff; color: var(--w-primary-dark); box-shadow: 0 12px 26px -14px rgba(0,0,0,.8); }
.btn-w.claro:hover { background: #f2f7ff; color: var(--w-primary-dark); }

.btn-acceder { display: inline-flex; align-items: center; gap: .4rem; min-height: 42px; padding: .5rem 1.1rem; border: 1.5px solid var(--w-linea); color: var(--w-dark); font-weight: 600; background: #fff; border-radius: var(--w-r-sm); text-decoration: none; }
.btn-acceder:hover { border-color: var(--w-primary); color: var(--w-primary); background: var(--w-primary-suave); }


/* ====================================================
   CABECERA
   ==================================================== */

.w-nav { background: rgba(255,255,255,.88); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--w-linea-fina); }
.w-nav .navbar-brand img { height: 32px; }
.w-nav .nav-link { color: var(--w-dark); font-weight: 500; border-radius: 8px; padding: .45rem .7rem; transition: color .15s, background .15s; }
.w-nav .nav-link:hover, .w-nav .nav-link:focus { color: var(--w-primary); background: var(--w-primary-suave); }
.w-nav .nav-item.show > .nav-link { color: var(--w-primary); background: var(--w-primary-suave); }

/* EL DESPLEGABLE NO PUEDE CRECER MÁS QUE LA PANTALLA.
   La lista de normativa son ocho entradas; en un portátil bajo, un panel
   vertical de ocho líneas se salía por debajo del pie y pintaba encima de él.
   Dos medidas: el de normativa va a dos columnas (.dropdown-mega), y todos
   llevan un tope de alto con su propio desplazamiento. */
.w-nav .dropdown-menu {
	border: 1px solid var(--w-linea);
	border-radius: var(--w-r-md);
	box-shadow: var(--w-sombra-3);
	padding: .5rem;
	max-height: calc(100vh - 5.5rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.w-nav .dropdown-item { border-radius: 8px; padding: .5rem .75rem; font-size: .925rem; color: var(--w-texto); }
.w-nav .dropdown-item:hover, .w-nav .dropdown-item:focus { background: var(--w-primary-suave); color: var(--w-primary-dark); }
.w-nav .dropdown-item:active { background: var(--w-primary); color: #fff; }

@media (min-width: 992px) {
	.w-nav .dropdown-mega { min-width: min(480px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); }
	.w-nav .dropdown-mega .w-mega-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .25rem; margin: 0; padding: 0; list-style: none; }
}
.w-nav .w-mega-titulo { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--w-tenue); padding: .4rem .75rem .15rem; margin: 0; }


/* ====================================================
   HERO OSCURO
   El contraste lo pone aquí: el sitio entero era claro sobre claro y no había
   ningún punto de peso. El fondo son dos manchas de color sobre tinta y una
   retícula de puntos muy tenue; no hay ninguna imagen que cargar.
   ==================================================== */

.w-oscuro, .w-hero {
	position: relative;
	overflow: hidden;
	background: var(--w-tinta);
	color: #c6d4e2;
}
.w-hero::before, .w-oscuro::before {
	content: "";
	position: absolute; inset: 0;
	background:
		radial-gradient(48ch 34ch at 8% -10%, rgba(47,131,238,.42), transparent 62%),
		radial-gradient(42ch 30ch at 88% 8%, rgba(47,158,85,.30), transparent 60%),
		radial-gradient(60ch 40ch at 60% 120%, rgba(31,111,224,.20), transparent 65%);
	pointer-events: none;
}
/* Retícula: 1 px cada 28. Se nota sin verse. */
.w-hero::after, .w-oscuro::after {
	content: "";
	position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
	pointer-events: none;
}
.w-hero > *, .w-oscuro > * { position: relative; z-index: 1; }

.w-hero { padding: clamp(56px, 7vw, 96px) 0 clamp(52px, 7vw, 92px); border-bottom: 0; }
.w-hero h1 { font-size: clamp(2.2rem, 1.3rem + 3.1vw, 3.35rem); font-weight: 800; line-height: 1.06; color: #fff; }
.w-hero h1 span { color: inherit; }
.w-hero .lead { font-size: clamp(1.05rem, .98rem + .34vw, 1.22rem); color: #a8bccf; max-width: 540px; line-height: 1.6; }
.w-hero .w-nota { color: #8ea6bd; font-size: .92rem; }
.w-hero .w-nota i { color: var(--w-accent-claro); }
.w-oscuro h2, .w-oscuro h3 { color: #fff; }
.w-oscuro p { color: #a8bccf; }

/* Píldora de encabezado: da un punto de color arriba del titular */
.w-pildora {
	display: inline-flex; align-items: center; gap: .5rem;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.16);
	color: #d7e5f2;
	padding: .4rem .9rem; border-radius: 999px;
	font-size: .84rem; font-weight: 500;
	backdrop-filter: blur(6px);
}
.w-pildora i { color: var(--w-accent-claro); }
.w-pildora.clara { background: var(--w-primary-suave); border-color: rgba(31,111,224,.2); color: var(--w-primary-dark); }
.w-pildora.clara i { color: var(--w-primary); }


/* ---------- La maqueta del móvil con la e-label ---------- */
/* Es CSS puro: ni una imagen que descargar, y se ve nítida a cualquier
   resolución. Enseña lo que hace el producto mejor que tres párrafos. */
.w-mock { position: relative; display: inline-block; }
.w-mock-tel {
	width: min(300px, 78vw);
	border-radius: 34px;
	background: linear-gradient(180deg, #223549, #16283a);
	padding: 10px;
	box-shadow: var(--w-sombra-4), 0 0 0 1px rgba(255,255,255,.08) inset;
}
.w-mock-pant { background: #fff; border-radius: 26px; padding: 1.1rem 1rem 1.25rem; text-align: left; overflow: hidden; }
.w-mock-marca { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--w-tenue); }
.w-mock-nombre { font-size: 1.12rem; font-weight: 700; color: var(--w-dark); margin: .15rem 0 .1rem; letter-spacing: -.02em; }
.w-mock-do { font-size: .8rem; color: var(--w-suave); margin: 0 0 .85rem; }
.w-mock-nut { background: var(--w-fondo); border: 1px solid var(--w-linea-fina); border-radius: var(--w-r-md); padding: .7rem .8rem; }
.w-mock-nut .t { font-size: .62rem; letter-spacing: .07em; text-transform: uppercase; color: var(--w-tenue); margin-bottom: .45rem; }
.w-mock-fila { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.w-mock-fila b { display: block; font-size: 1.05rem; color: var(--w-dark); line-height: 1.1; }
.w-mock-fila span { font-size: .68rem; color: var(--w-suave); }
.w-mock-al { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--w-suave); margin: .7rem 0 0; }
.w-mock-idiomas { display: flex; gap: .3rem; margin-top: .85rem; flex-wrap: wrap; }
.w-mock-idiomas span { font-size: .62rem; border: 1px solid var(--w-linea); border-radius: 6px; padding: .1rem .35rem; color: var(--w-suave); }

/* Las dos fichas flotan A LOS LADOS de la maqueta, no encima.
   Se anclan al borde del teléfono con calc(100% - 18px), así que solo pisan
   el marco oscuro y nunca la pantalla blanca: montadas sobre ella tapaban el
   nombre del vino y la línea de alérgenos, que es justo lo que hay que
   enseñar. Al medir el desplazamiento desde el borde real del teléfono da
   igual lo que crezca el texto de la ficha. */
.w-chip {
	position: absolute;
	background: rgba(255,255,255,.96);
	border-radius: var(--w-r-md);
	box-shadow: var(--w-sombra-3);
	padding: .6rem .85rem;
	display: flex; align-items: center; gap: .6rem;
	font-size: .8rem; color: var(--w-dark); font-weight: 600;
	white-space: nowrap;
	backdrop-filter: blur(8px);
	animation: w-flotar 6s ease-in-out infinite;
}
.w-chip i { color: var(--w-primary); }
.w-chip.qr { right: calc(100% - 18px); top: 18%; animation-delay: -2s; }
.w-chip.ok { left: calc(100% - 18px); bottom: 14%; }
.w-chip.ok i { color: var(--w-accent); }
@keyframes w-flotar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* En móvil no hay hueco a los lados: la pantalla ocupa el 78 % del ancho.
   Las fichas bajan debajo del teléfono, en fila, en vez de encogerse o de
   volver a montarse sobre el contenido. */
@media (max-width: 575px) {
	.w-mock { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
	.w-mock-tel { flex: 0 0 100%; }
	.w-chip { position: static; animation: none; }
}


/* ====================================================
   CABECERA DE PÁGINA INTERIOR
   ==================================================== */

.w-cabecera {
	background:
		radial-gradient(56ch 30ch at 8% 0%, rgba(31,111,224,.12), transparent 62%),
		radial-gradient(40ch 24ch at 92% 10%, rgba(47,158,85,.10), transparent 60%),
		linear-gradient(180deg, #f4f9ff, #fbfdff);
	padding: clamp(40px, 5vw, 64px) 0 clamp(32px, 4vw, 48px);
	border-bottom: 1px solid var(--w-linea-fina);
}
.w-cabecera h1 { font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.45rem); font-weight: 800; color: var(--w-dark); line-height: 1.15; }
.w-cabecera .entradilla { font-size: clamp(1.02rem, .97rem + .22vw, 1.12rem); color: var(--w-suave); max-width: 720px; margin-top: 1rem; line-height: 1.6; }

section { padding: clamp(48px, 6vw, 82px) 0; }
section h2 { font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.15rem); font-weight: 700; color: var(--w-dark); margin-bottom: 1rem; }
section h3 { font-size: 1.22rem; font-weight: 700; color: var(--w-dark); margin: 2rem 0 .75rem; }
.w-subtitulo { color: var(--w-suave); font-size: 1.06rem; max-width: 640px; line-height: 1.6; }
.w-seccion-tinte { background: var(--w-fondo); border-top: 1px solid var(--w-linea-fina); border-bottom: 1px solid var(--w-linea-fina); }


/* ====================================================
   PASOS
   ==================================================== */

.w-pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2rem 1.75rem; position: relative; }
.w-paso { position: relative; }
.w-paso-n {
	width: 44px; height: 44px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 1.05rem; color: #fff;
	background: linear-gradient(140deg, var(--w-primary-claro), var(--w-primary-dark));
	box-shadow: 0 8px 18px -8px rgba(31,111,224,.8);
	margin-bottom: 1rem;
}
.w-paso h3 { font-size: 1.08rem; margin: 0 0 .4rem; }
.w-paso p { color: var(--w-suave); font-size: .95rem; margin: 0; line-height: 1.6; }
/* La línea que une los pasos, solo cuando están en fila */
@media (min-width: 992px) {
	.w-paso:not(:last-child)::after {
		content: ""; position: absolute; top: 22px; left: 58px; right: -1.75rem; height: 2px;
		background: linear-gradient(90deg, rgba(31,111,224,.35), rgba(31,111,224,.06));
	}
}


/* ====================================================
   PIEZAS
   ==================================================== */

.w-tarjeta {
	position: relative;
	background: #fff;
	border: 1px solid var(--w-linea);
	border-radius: var(--w-r-lg);
	padding: 1.75rem;
	height: 100%;
	box-shadow: var(--w-sombra-1);
	transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
/* Filo de color que aparece al pasar por encima */
.w-tarjeta::before {
	content: ""; position: absolute; inset: -1px -1px auto; height: 3px;
	border-radius: var(--w-r-lg) var(--w-r-lg) 0 0;
	background: linear-gradient(90deg, var(--w-primary), var(--w-accent));
	opacity: 0; transition: opacity .22s ease;
}
.w-tarjeta:hover { transform: translateY(-4px); box-shadow: var(--w-sombra-3); border-color: #d5e0ee; }
.w-tarjeta:hover::before { opacity: 1; }
.w-tarjeta h3 { margin-top: 0; font-size: 1.1rem; }
.w-tarjeta p { color: var(--w-suave); font-size: .95rem; margin-bottom: 0; line-height: 1.6; }
a.w-tarjeta { text-decoration: none; color: inherit; display: block; }

/* Tarjeta sobre fondo oscuro */
.w-oscuro .w-tarjeta, .w-tarjeta.vidrio { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); box-shadow: none; backdrop-filter: blur(10px); }
.w-oscuro .w-tarjeta h3, .w-tarjeta.vidrio h3 { color: #fff; }
.w-oscuro .w-tarjeta p, .w-tarjeta.vidrio p { color: #a8bccf; }
.w-oscuro .w-tarjeta:hover, .w-tarjeta.vidrio:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24); }

.w-icono {
	width: 50px; height: 50px; border-radius: var(--w-r-md);
	display: flex; align-items: center; justify-content: center;
	font-size: 1.3rem; color: #fff; margin-bottom: 1.1rem;
	background: linear-gradient(140deg, #3d87ec, var(--w-primary-dark));
	box-shadow: 0 8px 20px -8px rgba(31,111,224,.7);
}
.w-icono.verde { background: linear-gradient(140deg, #45b46d, #217a41); box-shadow: 0 8px 20px -8px rgba(47,158,85,.65); }
.w-icono.gris { background: linear-gradient(140deg, #6d8ba6, #3a4c5e); box-shadow: 0 8px 20px -8px rgba(58,76,94,.55); }

.w-aviso { border-left: 3px solid var(--w-primary); background: var(--w-primary-suave); border-radius: 0 var(--w-r-md) var(--w-r-md) 0; padding: 1.15rem 1.35rem; margin: 1.75rem 0; }
.w-aviso.ojo { border-left-color: #e8a33d; background: #fdf7ec; }
.w-aviso.legal { border-left-color: #b6c3d1; background: var(--w-fondo); font-size: .9rem; color: var(--w-suave); }
.w-aviso p:last-child { margin-bottom: 0; }

.w-badge { display: inline-block; background: var(--w-accent-suave); color: #1d6b3a; padding: 5px 14px; border-radius: 999px; font-size: .8rem; font-weight: 600; border: 1px solid rgba(47,158,85,.22); }

.w-demo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--w-dark); border: 1.5px dashed #c9d6e5; border-radius: var(--w-r-md); padding: 11px 18px; background: #fff; transition: border-color .18s, background .18s, transform .18s; }
.w-demo:hover { border-color: var(--w-primary); background: var(--w-primary-suave); color: var(--w-dark); transform: translateY(-2px); }
.w-demo .ico { width: 38px; height: 38px; border-radius: var(--w-r-sm); background: linear-gradient(140deg, #3d87ec, var(--w-primary-dark)); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.w-demo .txt { line-height: 1.25; text-align: left; }
.w-demo .txt strong { display: block; font-size: .95rem; }
.w-demo .txt span { font-size: .8rem; color: var(--w-suave); }
/* Sobre oscuro */
.w-oscuro .w-demo, .w-demo.claro { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); color: #fff; }
.w-oscuro .w-demo:hover, .w-demo.claro:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); color: #fff; }
.w-oscuro .w-demo .txt span, .w-demo.claro .txt span { color: #8ea6bd; }


/* ====================================================
   APARICIÓN AL DESPLAZAR
   Sin JavaScript: se apoya en la línea de tiempo de vista del navegador.
   Donde no existe, @supports deja el contenido visible sin más — nada se
   esconde por no poder animarse, que es el error clásico de este efecto.
   ==================================================== */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.w-revelar {
			animation: w-aparecer linear both;
			animation-timeline: view();
			animation-range: entry 5% cover 26%;
		}
	}
}
@keyframes w-aparecer {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: none; }
}


/* ====================================================
   PRECIOS
   ==================================================== */

.w-plan { border: 1px solid var(--w-linea); border-radius: var(--w-r-lg); padding: 2.25rem 1.75rem; text-align: center; height: 100%; background: #fff; box-shadow: var(--w-sombra-1); }
.w-plan.destacado { border-color: rgba(31,111,224,.35); box-shadow: var(--w-sombra-3); position: relative; transform: translateY(-6px); }
.w-plan.destacado::before { content: ""; position: absolute; inset: -1px -1px auto; height: 4px; border-radius: var(--w-r-lg) var(--w-r-lg) 0 0; background: linear-gradient(90deg, var(--w-primary), var(--w-accent)); }
.w-plan .precio { font-size: 2.7rem; font-weight: 800; color: var(--w-dark); letter-spacing: -.03em; }
.w-plan .precio small { font-size: 1rem; font-weight: 400; color: var(--w-tenue); letter-spacing: 0; }
.w-plan ul { list-style: none; padding: 0; text-align: left; margin: 1.25rem 0; }
.w-plan li { padding: 8px 0; border-bottom: 1px solid var(--w-linea-fina); font-size: .94rem; }
.w-plan li:last-child { border-bottom: 0; }
.w-plan li i { color: var(--w-accent); margin-right: 8px; width: 18px; text-align: center; }
.w-plan li.no { color: var(--w-tenue); }
.w-plan li.no i { color: #cbd5e1; }
@media (max-width: 991px) { .w-plan.destacado { transform: none; } }


/* ====================================================
   ARTÍCULOS Y CONTENIDO
   ==================================================== */

.w-articulo { max-width: 760px; }
.w-articulo p { line-height: 1.78; margin-bottom: 1.1rem; }
.w-articulo ul, .w-articulo ol { line-height: 1.78; margin-bottom: 1.1rem; }
.w-articulo li { margin-bottom: .4rem; }
.w-articulo h2 { font-size: 1.55rem; margin-top: 2.75rem; }
.w-articulo h2:first-of-type { margin-top: 0; }
.w-articulo table { width: 100%; margin: 1.5rem 0; border-collapse: collapse; font-size: .94rem; }
.w-articulo th, .w-articulo td { padding: .7rem .8rem; border-bottom: 1px solid var(--w-linea); text-align: left; vertical-align: top; }
.w-articulo th { background: var(--w-fondo); font-weight: 700; color: var(--w-dark); }
.w-articulo tr:last-child td { border-bottom: 0; }
/* Una tabla ancha se desplaza dentro de su caja: nunca ensancha la página */
.w-articulo .w-tabla { overflow-x: auto; margin: 1.5rem 0; }
.w-articulo img { border-radius: var(--w-r-md); margin: 1.5rem 0; }
.w-articulo pre { background: var(--w-tinta); color: #e2e8f0; border-radius: var(--w-r-md); padding: 1rem 1.15rem; overflow-x: auto; font-size: .88rem; }
.w-articulo pre code { background: none; color: inherit; padding: 0; }
.w-articulo code { background: var(--w-fondo); border: 1px solid var(--w-linea-fina); border-radius: 5px; padding: .12em .35em; font-size: .9em; }
.w-articulo blockquote { border-left: 3px solid var(--w-linea); margin: 1.5rem 0; padding: .25rem 0 .25rem 1.15rem; color: var(--w-suave); font-style: italic; }
.w-articulo blockquote p:last-child { margin-bottom: 0; }
.w-articulo hr { border: 0; border-top: 1px solid var(--w-linea); margin: 2rem 0; }
.w-articulo del { color: var(--w-suave); }


/* ====================================================
   ENLAZADO INTERNO
   ==================================================== */

.w-relacionados { background: var(--w-fondo); border-top: 1px solid var(--w-linea); }
.w-relacionados a { color: var(--w-primary); text-decoration: none; }
.w-relacionados a:hover { text-decoration: underline; }

.w-migas { font-size: .875rem; color: var(--w-suave); }
.w-migas a { color: var(--w-suave); text-decoration: none; }
.w-migas a:hover { color: var(--w-primary); }
/* Altura fija: la barra de migas va justo debajo del menú y el alto lo reserva
   ya el CSS crítico, así que no puede desplazar nada al llegar esta hoja. */
.w-migas-barra { background: var(--w-fondo); border-bottom: 1px solid var(--w-linea); padding: 10px 0; }
.w-migas-barra ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.w-migas-barra li { font-size: .875rem; color: var(--w-suave); }
.w-migas-barra a { color: var(--w-suave); text-decoration: none; }
.w-migas-barra a:hover { color: var(--w-primary); text-decoration: underline; }


/* ====================================================
   BUSCADOR Y HERRAMIENTAS
   ==================================================== */

.w-buscador { display: flex; gap: .5rem; margin-top: 1.25rem; }
.w-buscador input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--w-linea); border-radius: var(--w-r-sm); padding: 13px 16px; font-size: 1rem; background: #fff; }
.w-buscador input:focus { outline: none; border-color: var(--w-primary); box-shadow: 0 0 0 3px rgba(31,111,224,.15); }
.w-buscador .btn { flex: 0 0 auto; }

.w-herramienta { background: #fff; border: 1px solid var(--w-linea); border-radius: var(--w-r-lg); padding: 1.75rem; box-shadow: var(--w-sombra-2); }
.w-herramienta .form-control, .w-herramienta .form-select { border-radius: var(--w-r-sm); border-color: var(--w-linea); }
.w-herramienta .form-control:focus, .w-herramienta .form-select:focus { border-color: var(--w-primary); box-shadow: 0 0 0 3px rgba(31,111,224,.15); }
.w-resultado { background: linear-gradient(140deg, var(--w-primary-suave), #f4f9ff); border: 1px solid rgba(31,111,224,.16); border-radius: var(--w-r-md); padding: 1.35rem; margin-top: 1.25rem; }
.w-resultado .cifra { font-size: 2rem; font-weight: 800; color: var(--w-primary-dark); line-height: 1.1; letter-spacing: -.02em; }
.w-resultado .unidad { font-size: .95rem; color: var(--w-suave); }


/* ====================================================
   BLOG
   ==================================================== */

.w-post { border-bottom: 1px solid var(--w-linea); padding: 1.75rem 0; }
.w-post:first-child { padding-top: 0; }
.w-post h2, .w-post h3 { font-size: 1.32rem; margin-bottom: .5rem; }
.w-post h2 a, .w-post h3 a { color: var(--w-dark); text-decoration: none; }
.w-post h2 a:hover, .w-post h3 a:hover { color: var(--w-primary); }
.w-post .fecha { font-size: .85rem; color: var(--w-tenue); }
.w-post .fecha a { color: var(--w-tenue); }
.w-post p { color: var(--w-suave); margin: .5rem 0 0; line-height: 1.65; }

/* Fecha de revisión. Se destaca a propósito: en contenido normativo es de lo
   primero que quiere saber quien llega, porque una guía de hace tres años
   puede estar describiendo una norma que ya cambió. */
.w-actualizado { color: #1d6b3a; font-weight: 600; font-size: .9rem; background: var(--w-accent-suave); border: 1px solid rgba(47,158,85,.2); border-radius: 999px; padding: .3rem .8rem; display: inline-block; }
.w-actualizado i { margin-right: .3rem; }


/* ====================================================
   PIE
   ==================================================== */

.w-pie { width: 100%; background: var(--w-tinta); color: #93a6b8; padding: clamp(44px, 5vw, 68px) 0 24px; font-size: .92rem; position: relative; }
.w-pie h6 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 1rem; }
.w-pie a { color: #93a6b8; text-decoration: none; }
.w-pie a:hover { color: #fff; }
.w-pie ul { list-style: none; padding: 0; margin: 0; }
.w-pie li { margin-bottom: .5rem; line-height: 1.45; }
.w-pie .legal { border-top: 1px solid #1e3548; margin-top: 2.25rem; padding-top: 1.25rem; font-size: .84rem; color: #75899c; }

/* LA REJILLA DEL PIE ES PROPIA, NO LA DE BOOTSTRAP.
   Con auto-fit las columnas se reparten solas y bajan de línea cuando no
   caben, así que el fondo oscuro siempre contiene lo que hay dentro: no hay
   forma de que una columna alta se salga por debajo. */
.w-pie-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 2rem 1.5rem; }
.w-pie-grid > * { min-width: 0; }
@media (min-width: 992px) { .w-pie-grid { grid-template-columns: 1.5fr 1fr 1.2fr 1fr 1fr; } }


/* ====================================================
   MOVIMIENTO
   Quien pide menos movimiento no lo pide a medias: aquí no queda ninguno.
   ==================================================== */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.w-tarjeta:hover, .w-demo:hover, .btn-w:hover, .btn-w2:hover { transform: none; }
	.w-chip { animation: none; }
}

@media (max-width: 768px) {
	.w-nav .dropdown-menu { box-shadow: none; border: 0; padding-left: 0; }
	.w-articulo h2 { margin-top: 2.25rem; }
	.btn-w, .btn-w2 { width: 100%; }
	.w-hero .d-flex.gap-3 { width: 100%; }
}


/* ====================================================
   IMÁGENES
   Las fotos y las ilustraciones se pintan siempre dentro de una caja con
   proporción fija: así el hueco está reservado antes de que la imagen llegue y
   nada se desplaza al terminar de cargar (§16).
   ==================================================== */

.w-foto { display: block; width: 100%; border-radius: var(--w-r-lg); overflow: hidden; background: var(--w-fondo); }
.w-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* El dibujo se ve entero, con aire; la fotografía llena la caja. */
.w-foto img.w-es-ilustracion { object-fit: contain; padding: .5rem; background: linear-gradient(180deg, #f2f7fd, #fbfdff); }
.w-foto.alta { aspect-ratio: 3 / 4; }
.w-foto.ancha { aspect-ratio: 16 / 9; }
.w-foto.cuadrada { aspect-ratio: 1 / 1; }
.w-foto.sombra { box-shadow: var(--w-sombra-3); }

/* Las ilustraciones no se recortan: son dibujos, no fotos */
.w-ilustracion { display: block; width: 100%; height: auto; }

/* Una imagen encima de la tarjeta de producto, con el icono superpuesto */
.w-tarjeta-foto { padding: 0; overflow: hidden; }
.w-tarjeta-foto .w-foto { border-radius: 0; aspect-ratio: 5 / 3; }
.w-tarjeta-foto .cuerpo { padding: 1.5rem 1.5rem 1.75rem; }

/* Banda ancha con imagen de fondo y texto encima. El degradado no es
   decorativo: sin él, el texto blanco sobre una foto clara no se lee. */
.w-banda {
	position: relative;
	border-radius: var(--w-r-xl);
	overflow: hidden;
	min-height: 340px;
	display: flex; align-items: flex-end;
	background: var(--w-tinta);
}
.w-banda > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.w-banda::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(11,22,34,.15) 0%, rgba(11,22,34,.82) 78%);
}
.w-banda .contenido { position: relative; z-index: 1; padding: clamp(1.5rem, 3vw, 2.5rem); color: #fff; max-width: 640px; }
.w-banda .contenido h2, .w-banda .contenido h3 { color: #fff; }
.w-banda .contenido p { color: rgba(255,255,255,.85); margin-bottom: 0; }