/* Wualapp: tokens sacados del logo (cintas en U con degradado ciruela > magenta y turquesa > azul) */
@property --corte {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 100%;
}

:root {
	--ciruela-900: #1d0a26;
	--ciruela-800: #2b0f38;
	--ciruela-700: #511247;
	--ciruela: #660066;
	--morado: #683fa4;
	--violeta: #852c86;
	--magenta: #ff0069;
	--magenta-texto: #d4005a;
	--turquesa: #00c7d1;
	--azul: #0099ff;
	--menta: #00e9af;

	--lienzo: #f3f1f8;
	--lienzo-punto: #d9d3e6;
	--papel: #ffffff;
	--tinta: #24102e;
	--tinta-2: #5b4d66;
	--linea: #e2dcec;
	--wire: #c9c2d6;
	--wire-2: #e6e1ee;
	--wire-tinta: #8d8399;

	--cinta-a: linear-gradient(160deg, #660066 0%, #852c86 45%, #ff0069 100%);
	--cinta-b: linear-gradient(200deg, #0099ff 0%, #00c7d1 55%, #852c86 100%);
	--cinta-texto: linear-gradient(90deg, #852c86 0%, #683fa4 40%, #0099ff 100%);

	--display: var(--texto);
	--texto: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mano: var(--texto);

	--ancho: 1200px;
	--gutter: clamp(16px, 4vw, 40px);
	--radio-movil: 46px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	background: var(--lienzo);
	color: var(--tinta);
	font: 400 1.0625rem/1.6 var(--texto);
	-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; letter-spacing: -0.025em; }
p { margin: 0; text-wrap: pretty; }
.envoltura { width: min(100% - 2 * var(--gutter), var(--ancho)); margin-inline: auto; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Cabecera */
.cabecera {
	position: sticky; top: 0; z-index: 20;
	background: color-mix(in srgb, var(--lienzo) 86%, transparent);
	backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid color-mix(in srgb, var(--linea) 70%, transparent);
}
.cabecera .envoltura { display: flex; align-items: center; gap: 28px; min-height: 72px; }
.marca img { width: 150px; height: auto; }
.menu { display: flex; gap: 26px; margin-left: auto; font-weight: 500; font-size: 0.98rem; }
.menu a { text-decoration: none; color: var(--tinta-2); }
.menu a:hover { color: var(--tinta); }
.telefono { font-weight: 600; text-decoration: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.boton {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 48px; padding: 0 22px; border-radius: 999px;
	font: 600 1rem/1 var(--texto); text-decoration: none; cursor: pointer; border: 0;
}
.boton-principal { background: var(--ciruela-800); color: #fff; position: relative; isolation: isolate; }
.boton-principal::before {
	content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
	background: linear-gradient(100deg, var(--magenta), var(--morado) 50%, var(--azul));
}
.boton-principal::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: var(--ciruela-800); }
.boton-principal:hover::after { background: var(--ciruela-700); }
.boton-secundario { color: var(--tinta); background: transparent; box-shadow: inset 0 0 0 1.5px var(--wire); }
.boton-secundario:hover { box-shadow: inset 0 0 0 1.5px var(--tinta-2); }
.cabecera .boton { min-height: 42px; padding: 0 18px; font-size: 0.95rem; }
.menu-abrir { display: none; }

/* Portada: lienzo de diseño */
.portada {
	position: relative; overflow: hidden;
	background-color: var(--lienzo);
	background-image: radial-gradient(var(--lienzo-punto) 1.2px, transparent 1.3px);
	background-size: 22px 22px;
	padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 110px);
}
.portada .envoltura { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.portada h1 {
	font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.2rem);
	line-height: 0.98; font-weight: 700; letter-spacing: -0.045em;
	max-width: 13ch;
}
.portada h1 .degradado {
	background: var(--cinta-texto); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.portada .entradilla { margin-top: 26px; font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem); color: var(--tinta-2); max-width: 34rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.sello { margin-top: 30px; display: flex; align-items: center; gap: 12px; color: var(--tinta-2); font-size: 0.95rem; }
.sello svg { width: 22px; flex: none; }

/* Escenario del móvil en la portada */

.movil {
	--ancho-movil: 300px;
	position: relative; z-index: 2;
	width: var(--ancho-movil); aspect-ratio: 9 / 19.3;
	border-radius: var(--radio-movil);
	background: #120716;
	padding: 11px;
	box-shadow:
		0 0 0 1.5px #3a2745 inset,
		0 50px 80px -30px rgba(43, 15, 56, 0.55),
		0 18px 30px -18px rgba(43, 15, 56, 0.5);
}
.movil::before { /* isla */
	content: ""; position: absolute; z-index: 5; top: 21px; left: 50%; translate: -50% 0;
	width: 84px; height: 24px; border-radius: 20px; background: #120716;
}
.pantalla { position: relative; width: 100%; height: 100%; border-radius: calc(var(--radio-movil) - 11px); overflow: hidden; background: #fff; }
.capa { position: absolute; inset: 0; }
.capa-final { clip-path: inset(0 0 0 var(--corte)); }
.comparador { --corte: 38%; }
.comparador.entrada { animation: barrido 1.6s cubic-bezier(.7, 0, .2, 1) 0.5s both; }
@keyframes barrido { from { --corte: 100%; } to { --corte: 38%; } }
@media (prefers-reduced-motion: reduce) { .comparador.entrada { animation: none; } }
.tirador { position: absolute; z-index: 6; top: 11px; bottom: 11px; left: 11px; right: 11px; pointer-events: none; }
.tirador::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--corte); width: 2px; translate: -1px 0; background: #fff; box-shadow: 0 0 0 1px rgba(36, 16, 46, 0.18); }
.tirador span {
	position: absolute; top: 50%; left: var(--corte); translate: -50% -50%;
	width: 44px; height: 44px; border-radius: 50%; background: #fff;
	box-shadow: 0 6px 18px -4px rgba(36, 16, 46, 0.45), 0 0 0 2px var(--magenta);
	display: grid; place-items: center;
}
.tirador svg { width: 22px; }
.rango {
	position: absolute; z-index: 7; inset: 0; width: 100%; height: 100%; margin: 0;
	opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; background: transparent;
}
.rango:focus-visible + .tirador span { outline: 3px solid var(--azul); outline-offset: 3px; }
.etiqueta-capa {
	position: absolute; z-index: 3; bottom: -38px;
	font: 600 0.78rem/1 var(--texto); padding: 7px 11px; border-radius: 999px; white-space: nowrap;
}
.etiqueta-capa.wire { left: 0; background: #fff; color: var(--wire-tinta); box-shadow: inset 0 0 0 1px var(--wire); }
.etiqueta-capa.final { right: 0; background: var(--ciruela-800); color: #fff; }

/* Anotaciones de lienzo alrededor del móvil */
.nota { position: absolute; z-index: 3; font-size: 0.8rem; color: var(--tinta-2); }
.nota-comentario {
	width: 250px; left: 350px; top: 596px;
	background: #fff; border-radius: 16px 16px 16px 4px; padding: 14px 14px 12px;
	box-shadow: 0 16px 34px -18px rgba(36, 16, 46, 0.45);
	display: grid; gap: 10px;
}
.hilo { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; }
.avatar { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 0.7rem/1 var(--texto); color: #fff; }
.avatar.cli { background: #7a8aa0; }
.avatar.wu { background: var(--cinta-a); }
.hilo b { display: block; color: var(--tinta); font-weight: 600; font-size: 0.78rem; }
.hilo p { font-size: 0.82rem; line-height: 1.35; color: var(--tinta); }
.resuelto { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; color: #0a8a6a; font-size: 0.76rem; }
.resuelto::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--menta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.2 4.7-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }

.pie-escenario { position: absolute; bottom: -6px; left: 0; right: 0; text-align: center; font-size: 0.8rem; color: var(--tinta-2); }

/* Interior de la pantalla: diseño final */
.app { position: absolute; inset: 0; padding: 46px 16px 0; font-family: var(--texto); color: var(--tinta); background: #fbf9fd; display: flex; flex-direction: column; }
.app-barra { position: absolute; top: 15px; left: 24px; right: 22px; display: flex; justify-content: space-between; font: 600 0.72rem/1 var(--texto); }
.app-barra i { display: inline-block; width: 22px; height: 10px; border-radius: 3px; border: 1.3px solid currentColor; position: relative; }
.app-saludo { font-size: 0.74rem; color: var(--tinta-2); }
.app-titulo { font: 700 1.28rem/1.1 var(--display); letter-spacing: -0.03em; margin-top: 2px; }
.app-recogida {
	margin-top: 12px; border-radius: 18px; padding: 12px 14px; color: #fff;
	background: var(--cinta-a); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px;
}
.app-recogida small { display: block; font-size: 0.66rem; opacity: 0.85; }
.app-recogida b { font: 700 1.35rem/1 var(--display); letter-spacing: -0.02em; }
.app-recogida span { font-size: 0.66rem; background: rgba(255,255,255,.2); padding: 6px 9px; border-radius: 999px; font-weight: 600; }
.app-seccion { margin-top: 14px; font: 600 0.74rem/1 var(--texto); color: var(--tinta-2); display: flex; justify-content: space-between; }
.app-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.app-lista li { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: center; background: #fff; border-radius: 14px; padding: 7px 10px 7px 7px; box-shadow: 0 1px 0 #efe9f5, 0 6px 14px -12px rgba(36,16,46,.35); }
.app-lista .foto { width: 42px; height: 42px; border-radius: 11px; }
.app-lista .pan { background: radial-gradient(circle at 35% 30%, #f6d49b, #c9853f 60%, #9b5a24); }
.app-lista .empanada { background: linear-gradient(135deg, #f2c16b, #d58b35), repeating-linear-gradient(45deg, transparent 0 6px, rgba(0,0,0,.08) 6px 8px); background-blend-mode: multiply; }
.app-lista .tarta { background: radial-gradient(circle at 50% 50%, #fff 0 22%, #f3e6d0 23% 60%, #d9b27a 61%); }
.app-lista b { display: block; font-size: 0.78rem; font-weight: 600; }
.app-lista small { font-size: 0.66rem; color: var(--tinta-2); }
.app-lista em { font-style: normal; font: 600 0.78rem/1 var(--texto); font-variant-numeric: tabular-nums; }
.app-boton {
	margin-top: auto; margin-bottom: 10px; height: 46px; border-radius: 16px;
	background: var(--ciruela-800); color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
	font: 600 0.84rem/1 var(--texto);
}
.app-boton em { font-style: normal; font-variant-numeric: tabular-nums; }
.app-tabs { display: flex; justify-content: space-around; padding: 10px 0 18px; border-top: 1px solid #efe9f5; margin-inline: -16px; background: #fff; }
.app-tabs i { width: 22px; height: 22px; border-radius: 7px; background: #e7e1ee; }
.app-tabs i.activo { background: var(--cinta-a); }

/* Interior de la pantalla: wireframe */
.wf { position: absolute; inset: 0; padding: 46px 16px 0; background: #fff; display: flex; flex-direction: column; font-family: var(--texto); color: var(--wire-tinta); }
.wf .l { height: 8px; border-radius: 4px; background: var(--wire-2); }
.wf .l.os { background: var(--wire); }
.wf-caja { border: 1.5px solid var(--wire); border-radius: 16px; }
.wf-recogida { margin-top: 12px; height: 62px; display: grid; grid-template-columns: 1fr 64px; align-items: center; gap: 10px; padding: 0 12px; }
.wf-x { position: relative; border: 1.5px solid var(--wire); border-radius: 10px; }
.wf-x::before, .wf-x::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 0.75px), var(--wire) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)); }
.wf-x::after { transform: scaleX(-1); }
.wf-fila { display: grid; grid-template-columns: 42px 1fr 34px; gap: 10px; align-items: center; padding: 7px 10px 7px 7px; }
.wf-fila .wf-x { width: 42px; height: 42px; }
.wf-boton { margin-top: auto; margin-bottom: 10px; height: 46px; border: 1.5px dashed var(--wire-tinta); border-radius: 16px; display: grid; place-items: center; font: 600 0.72rem/1 var(--texto); }
.wf-tabs { display: flex; justify-content: space-around; padding: 10px 0 18px; border-top: 1.5px solid var(--wire-2); margin-inline: -16px; }
.wf-tabs i { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--wire); }
.cota { position: absolute; font: 600 0.6rem/1 var(--texto); color: var(--magenta-texto); display: flex; align-items: center; gap: 3px; }
.cota.v { flex-direction: column; }
.cota.v::before, .cota.v::after { content: ""; height: 7px; border-left: 1px solid var(--magenta); }

/* Bloques generales */
.bloque { padding-block: clamp(64px, 9vw, 128px); }
.bloque-cabeza { display: grid; gap: 18px; max-width: 46rem; margin-bottom: clamp(36px, 5vw, 64px); }
.bloque-cabeza h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.04em; }
.bloque-cabeza p { font-size: 1.15rem; color: var(--tinta-2); max-width: 40rem; }

/* Proceso: la misma pantalla en cinco estados, sobre lienzo oscuro */
.proceso {
	background-color: var(--ciruela-900);
	background-image: radial-gradient(rgba(255,255,255,.07) 1.2px, transparent 1.3px);
	background-size: 22px 22px;
	color: #f2eaf6;
}
.proceso .bloque-cabeza p { color: #cbbcd5; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; counter-reset: paso; }
.paso { display: grid; gap: 16px; align-content: start; counter-increment: paso; }
.paso .movil { --ancho-movil: 100%; --radio-movil: 30px; padding: 7px; background: #0c0410; box-shadow: 0 0 0 1px #3a2745 inset, 0 30px 50px -30px #000; }
.paso .movil::before { top: 14px; width: 48px; height: 14px; }
.paso .pantalla { border-radius: 23px; }
.paso-num { font: 700 0.95rem/1 var(--display); color: var(--turquesa); font-variant-numeric: tabular-nums; }
.paso-num::before { content: counter(paso, decimal-leading-zero); }
.paso h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.02em; }
.paso > p { font-size: 0.95rem; color: #cbbcd5; line-height: 1.5; }
.paso .aprobado { display: inline-flex; align-self: start; gap: 6px; align-items: center; font-size: 0.78rem; font-weight: 600; color: var(--menta); }

/* Miniaturas: escala reducida de las capas de pantalla */
.mini { position: absolute; inset: 0; }
.mini > .app, .mini > .wf, .mini > .boceto, .mini > .publicada { width: 278px; height: 621px; inset: auto; top: 0; left: 0; transform-origin: 0 0; scale: var(--escala, 0.5); }
.boceto { position: absolute; inset: 0; background: #fffdf6; }
.boceto svg { width: 100%; height: 100%; }
.publicada { position: absolute; inset: 0; background: var(--cinta-a); display: grid; place-items: center; }
.publicada .icono-app { width: 34%; aspect-ratio: 1; border-radius: 24%; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); }
.publicada .icono-app img { width: 72%; }

.despues {
	margin-top: clamp(40px, 5vw, 64px); padding: clamp(22px, 3vw, 32px);
	border-radius: 24px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
	display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
}
.despues .version { font: 700 clamp(2.2rem, 1.6rem + 2vw, 3.4rem)/1 var(--display); letter-spacing: -0.04em; background: var(--cinta-b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.despues h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 6px; }
.despues p { color: #cbbcd5; max-width: 52rem; }

/* Servicios */
.servicios { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.servicio { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding-block: 28px; border-top: 1px solid var(--linea); }
.servicio .icono { width: 64px; height: 64px; border-radius: 19px; display: grid; place-items: center; background: #fff; box-shadow: 0 10px 24px -16px rgba(36,16,46,.5); }
.servicio .icono svg { width: 34px; height: 34px; }
.servicio h3 { font-size: 1.28rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.servicio p { color: var(--tinta-2); }
.servicio a { display: inline-block; margin-top: 10px; font-weight: 600; color: var(--magenta-texto); }
.tambien { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--linea); display: grid; grid-template-columns: minmax(0, 14rem) 1fr; gap: 24px; }
.tambien h3 { font-size: 1.05rem; font-weight: 600; }
.tambien ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.tambien li b { display: block; font-weight: 600; }
.tambien li span { color: var(--tinta-2); font-size: 0.97rem; }

/* Una sola casa */
.casa { background: #fff; }
.casa .envoltura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.pila-capas { position: relative; display: grid; gap: 10px; }
.capa-casa { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 18px; background: var(--lienzo); }
.capa-casa .n { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font: 700 0.9rem/1 var(--display); color: #fff; }
.capa-casa b { display: block; font-weight: 600; }
.capa-casa span { color: var(--tinta-2); font-size: 0.97rem; }

/* Precios */
.precios-tabla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.precio { background: #fff; border-radius: 22px; padding: 24px; display: grid; gap: 10px; align-content: start; box-shadow: 0 1px 0 var(--linea); }
.precio h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.precio .cifra { font: 700 1.9rem/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.precio .cifra small { font: 500 0.9rem/1 var(--texto); letter-spacing: 0; color: var(--tinta-2); }
.precio p { color: var(--tinta-2); font-size: 0.95rem; }
.precio.destacado { background: var(--ciruela-800); color: #fff; }
.precio.destacado p, .precio.destacado .cifra small { color: #d8c9e2; }
.aviso-precios { margin-top: 18px; font-size: 0.92rem; color: var(--tinta-2); max-width: 52rem; }

/* Preguntas */
.preguntas { max-width: 52rem; }
.preguntas details { border-top: 1px solid var(--linea); }
.preguntas details:last-child { border-bottom: 1px solid var(--linea); }
.preguntas summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative; font: 600 1.12rem/1.35 var(--display); letter-spacing: -0.015em; }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--tinta-2); border-bottom: 2px solid var(--tinta-2); translate: 0 -70%; rotate: 45deg; transition: rotate .2s; }
.preguntas details[open] summary::after { rotate: 225deg; translate: 0 -20%; }
.preguntas details p { padding: 0 0 22px; color: var(--tinta-2); max-width: 46rem; }

/* Contacto */
.contacto { background: var(--ciruela-900); color: #f2eaf6; }
.contacto .envoltura { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); }
.contacto .bloque-cabeza p { color: #cbbcd5; }
.contacto-datos { display: grid; gap: 6px; font-size: 1.05rem; }
.contacto-datos a { font-weight: 600; text-decoration: none; }
form.idea { background: #fff; color: var(--tinta); border-radius: 26px; padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
label.campo { display: grid; gap: 6px; font-size: 0.9rem; font-weight: 600; }
label.campo input, label.campo textarea { font: 400 1rem/1.4 var(--texto); padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--wire); background: #fff; color: var(--tinta); width: 100%; }
label.campo textarea { min-height: 120px; resize: vertical; }
fieldset.chips { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
fieldset.chips legend { font-size: 0.9rem; font-weight: 600; padding: 0; margin-bottom: 10px; }
.chips-lista { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-lista label { position: relative; }
.chips-lista input { position: absolute; opacity: 0; }
.chips-lista span { display: inline-block; padding: 10px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--wire); font-size: 0.92rem; font-weight: 500; cursor: pointer; }
.chips-lista input:checked + span { background: var(--ciruela-800); color: #fff; box-shadow: none; }
.chips-lista input:focus-visible + span { outline: 3px solid var(--azul); outline-offset: 2px; }
.rgpd { font-size: 0.8rem; color: var(--tinta-2); line-height: 1.45; }
.legal-check { display: flex; gap: 10px; align-items: start; font-size: 0.88rem; }
.legal-check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--ciruela-800); }

/* Pie */
.pie { background: #150619; color: #cbbcd5; padding-block: 48px 36px; font-size: 0.92rem; }
.pie .envoltura { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.pie img { width: 140px; margin-bottom: 14px; }
.pie a { text-decoration: none; }
.pie ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pie h3 { font: 600 0.95rem/1 var(--texto); color: #fff; margin-bottom: 14px; letter-spacing: 0; }
.pie .legal { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; font-size: 0.82rem; }

/* Tablet y móvil */
@media (max-width: 1100px) {
	.pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.precios-tabla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.menu, .cabecera .telefono { display: none; }
	.menu-abrir { display: inline-flex; margin-left: auto; }
	.cabecera .boton-principal { display: none; }
	.portada .envoltura, .casa .envoltura, .contacto .envoltura { grid-template-columns: 1fr; }
	.servicios { grid-template-columns: 1fr; }
	.tambien { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
	.paso:last-child { grid-column: 1 / -1; max-width: 50%; }
	.campos { grid-template-columns: 1fr; }
	.tambien ul { grid-template-columns: 1fr; }
	.precios-tabla { grid-template-columns: 1fr; }
	.despues { grid-template-columns: 1fr; }
	.pie .envoltura { grid-template-columns: 1fr; }
}

/* Toque del prototipo y menú abierto en móvil */
.app-boton { position: relative; }
.toque { position: absolute; right: 38%; top: 50%; width: 30px; height: 30px; translate: 50% -50%; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 0 8px rgba(255,255,255,.22), 0 0 0 16px rgba(255,255,255,.1); }
@media (max-width: 900px) {
	.menu.abierto { display: grid; position: absolute; top: 72px; left: 0; right: 0; padding: 18px var(--gutter) 24px; background: var(--lienzo); border-bottom: 1px solid var(--linea); gap: 16px; font-size: 1.1rem; }
}

/* Escenario de la portada: lienzo con dos pantallas y la conexión de prototipo */
.escenario { position: relative; height: 780px; width: 600px; max-width: 100%; justify-self: end; }
.escenario > * { position: absolute; }
.cinta-fondo { width: 640px; max-width: none; left: -40px; top: 150px; opacity: 0.9; pointer-events: none; }
.marco-nombre { font: 500 0.78rem/1 var(--texto); color: var(--tinta-2); display: flex; gap: 6px; align-items: center; }
.marco-nombre::before { content: ""; width: 10px; height: 10px; border: 1.5px solid var(--tinta-2); border-radius: 2px; }
.marco-nombre.n1 { left: 16px; top: 0; }
.marco-nombre.n2 { left: 392px; top: 128px; }
.escenario .comparador { --ancho-movil: 290px; left: 16px; top: 24px; }
.movil-2 { --ancho-movil: 200px; --radio-movil: 34px; left: 392px; top: 150px; padding: 8px; }
.movil-2::before { top: 16px; width: 58px; height: 17px; }
.movil-2 .pantalla { border-radius: 26px; }
.conexion { inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.nota-conexion { left: 318px; top: 404px; z-index: 4; font-weight: 600; color: #0077cc; background: var(--lienzo); padding: 3px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1px #b8dcff; font-size: 0.74rem; white-space: nowrap; rotate: -4deg; }
.nota-muestras { left: 392px; top: 60px; display: flex; gap: 6px; align-items: center; background: #fff; padding: 9px 12px; border-radius: 12px; box-shadow: 0 16px 34px -20px rgba(36, 16, 46, 0.4); flex-wrap: wrap; width: 200px; }
.nota-muestras i { width: 26px; height: 26px; border-radius: 8px; }
.nota-muestras span { width: 100%; font-size: 0.74rem; color: var(--tinta-2); }
.app-ok { align-items: stretch; }
.ok-circulo { width: 76px; height: 76px; border-radius: 50%; margin: 40px auto 18px; background: linear-gradient(140deg, var(--menta), var(--turquesa) 55%, var(--azul)); display: grid; place-items: center; box-shadow: 0 16px 30px -12px rgba(0,153,255,.6); }
.ok-circulo svg { width: 40px; }
.ok-codigo { margin: 26px auto 0; text-align: center; background: #fff; border-radius: 18px; padding: 14px 26px; box-shadow: 0 1px 0 #efe9f5, 0 10px 20px -14px rgba(36,16,46,.35); }
.ok-codigo small { display: block; font-size: 0.72rem; color: var(--tinta-2); }
.ok-codigo b { font: 700 2rem/1.1 var(--display); letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }

@media (max-width: 1180px) and (min-width: 901px) {
	.escenario { scale: 0.86; transform-origin: right center; margin-block: -50px; }
}
@media (max-width: 900px) {
	.escenario { justify-self: center; height: 700px; width: 600px; }
}
@media (max-width: 640px) {
	.escenario { width: 100%; height: 700px; }
	.escenario .comparador { left: 50%; translate: -50% 0; --ancho-movil: 270px; }
	.marco-nombre.n1 { left: 50%; translate: -135px 0; }
	.movil-2, .marco-nombre.n2, .conexion, .nota-conexion, .nota-muestras { display: none; }
	.nota-comentario { left: auto; right: 0; top: 470px; width: 220px; }
	.cinta-fondo { width: 520px; left: 50%; translate: -50% 0; top: 170px; }
}