/* ==========================================================================
   Landing «Dictado de Pau Ninja» — /proyecto/dictafono-app/
   Sólo se carga en esa URL (ver functions.php). Paleta de 5 colores sobre
   BLANCO, titulares en Montserrat y cuerpo en PT Serif.

   Cada sección redefine --dpn-acc / --dpn-acc-rgb / --dpn-acc-2, así que todo
   el bloque (kickers, tarjetas, botones, brillos, marcas) cambia de color a la
   vez y la paleta se reparte por la página sin repetir reglas.

   Sobre blanco los cinco colores son demasiado claros para texto, así que cada
   sección define TAMBIÉN su versión «ink» (--dpn-acc-ink / --dpn-acc-ink-2):
   el mismo tono oscurecido hasta ≥ 4.5:1 sobre blanco y sobre --dpn-bg-2.
   Regla: RELLENOS y adornos usan --dpn-acc; TEXTO usa --dpn-acc-ink.
   ========================================================================== */

.dpn {
	--dpn-bg:      #ffffff;
	--dpn-bg-2:    #f6f5f2;
	--dpn-panel:   #ffffff;
	--dpn-border:  rgba( 0, 0, 0, .11 );
	/* Borde/relleno de los controles que SÓLO se reconocen por su contorno
	   (chips, teclas, botón de pausa, carril del deslizador): ≥ 3:1 sobre blanco
	   y sobre --dpn-bg-2. El .11 de arriba queda para bordes decorativos. */
	--dpn-line-ui: rgba( 0, 0, 0, .45 );
	--dpn-fg:      #14130f;
	--dpn-muted:   #605c55;

	/* Paleta (rellenos, degradados, adornos) */
	--dpn-green:      #4fcf70;
	--dpn-green-rgb:  79, 207, 112;
	--dpn-yellow:     #fad648;
	--dpn-yellow-rgb: 250, 214, 72;
	--dpn-purple:     #a767e5;
	--dpn-purple-rgb: 167, 103, 229;
	--dpn-sky:        #12bcfe;
	--dpn-sky-rgb:    18, 188, 254;
	--dpn-turq:       #44ce7b;
	--dpn-turq-rgb:   68, 206, 123;

	/* Paleta «ink»: misma gama, legible sobre blanco (texto, iconos finos) */
	--dpn-green-ink:  #1f7e38;
	--dpn-yellow-ink: #866b00;
	--dpn-purple-ink: #9442e3;
	--dpn-sky-ink:    #0076a4;
	--dpn-turq-ink:   #1e7f45;

	/* Acento activo (por defecto verde; cada sección lo sobreescribe) */
	--dpn-acc:       var( --dpn-green );
	--dpn-acc-rgb:   var( --dpn-green-rgb );
	--dpn-acc-2:     var( --dpn-turq );
	--dpn-acc-ink:   var( --dpn-green-ink );
	--dpn-acc-ink-2: var( --dpn-turq-ink );

	--dpn-head:    var( --pn-font-head, Montserrat, Helvetica, Arial, sans-serif );
	--dpn-body:    var( --pn-font-body, "PT Serif", Georgia, serif );

	background: var( --dpn-bg );
	color: var( --dpn-fg );
	overflow-x: hidden;
	font-family: var( --dpn-body );
}

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

/* --- Reparto de la paleta por secciones --------------------------------- */
.dpn .dpn-hero {
	--dpn-acc: var( --dpn-green );  --dpn-acc-rgb: var( --dpn-green-rgb );  --dpn-acc-2: var( --dpn-turq );
	--dpn-acc-ink: var( --dpn-green-ink );  --dpn-acc-ink-2: var( --dpn-turq-ink );
}
.dpn .dpn-why {
	--dpn-acc: var( --dpn-purple ); --dpn-acc-rgb: var( --dpn-purple-rgb ); --dpn-acc-2: var( --dpn-sky );
	--dpn-acc-ink: var( --dpn-purple-ink ); --dpn-acc-ink-2: var( --dpn-sky-ink );
}
.dpn .dpn-stats {
	--dpn-acc: var( --dpn-sky );    --dpn-acc-rgb: var( --dpn-sky-rgb );    --dpn-acc-2: var( --dpn-purple );
	--dpn-acc-ink: var( --dpn-sky-ink );    --dpn-acc-ink-2: var( --dpn-purple-ink );
}
.dpn .dpn-calc {
	--dpn-acc: var( --dpn-yellow ); --dpn-acc-rgb: var( --dpn-yellow-rgb ); --dpn-acc-2: var( --dpn-green );
	--dpn-acc-ink: var( --dpn-yellow-ink ); --dpn-acc-ink-2: var( --dpn-green-ink );
}
.dpn .dpn-feat2 {
	--dpn-acc: var( --dpn-turq );   --dpn-acc-rgb: var( --dpn-turq-rgb );   --dpn-acc-2: var( --dpn-green );
	--dpn-acc-ink: var( --dpn-turq-ink );   --dpn-acc-ink-2: var( --dpn-green-ink );
}
.dpn .dpn-features {
	--dpn-acc: var( --dpn-sky );    --dpn-acc-rgb: var( --dpn-sky-rgb );    --dpn-acc-2: var( --dpn-turq );
	--dpn-acc-ink: var( --dpn-sky-ink );    --dpn-acc-ink-2: var( --dpn-turq-ink );
}
.dpn .dpn-steps {
	--dpn-acc: var( --dpn-purple ); --dpn-acc-rgb: var( --dpn-purple-rgb ); --dpn-acc-2: var( --dpn-sky );
	--dpn-acc-ink: var( --dpn-purple-ink ); --dpn-acc-ink-2: var( --dpn-sky-ink );
}
.dpn .dpn-uses {
	--dpn-acc: var( --dpn-yellow ); --dpn-acc-rgb: var( --dpn-yellow-rgb ); --dpn-acc-2: var( --dpn-green );
	--dpn-acc-ink: var( --dpn-yellow-ink ); --dpn-acc-ink-2: var( --dpn-green-ink );
}
.dpn .dpn-faq {
	--dpn-acc: var( --dpn-turq );   --dpn-acc-rgb: var( --dpn-turq-rgb );   --dpn-acc-2: var( --dpn-sky );
	--dpn-acc-ink: var( --dpn-turq-ink );   --dpn-acc-ink-2: var( --dpn-sky-ink );
}
.dpn .dpn-final {
	--dpn-acc: var( --dpn-green );  --dpn-acc-rgb: var( --dpn-green-rgb );  --dpn-acc-2: var( --dpn-turq );
	--dpn-acc-ink: var( --dpn-green-ink );  --dpn-acc-ink-2: var( --dpn-turq-ink );
}

.dpn .dpn-wrap {
	width: min( 100%, 1180px );
	margin: 0 auto;
	padding: 0 24px;
}

.dpn .dpn-sec {
	padding: 96px 0;
	scroll-margin-top: 88px;
}

.dpn .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	white-space: nowrap;
}

/* --- Tipografía compartida --------------------------------------------- */
.dpn .dpn-kicker {
	font-family: var( --dpn-head );
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var( --dpn-acc-ink );
	margin: 0 0 14px;
}

.dpn .dpn-h2 {
	font-family: var( --dpn-head );
	font-weight: 800;
	font-size: clamp( 1.9rem, 4.2vw, 3.1rem );
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: 0 0 22px;
	color: var( --dpn-fg );
}

.dpn .dpn-h2--xl { font-size: clamp( 2.2rem, 5.4vw, 3.9rem ); }

.dpn .dpn-h3 {
	font-family: var( --dpn-head );
	font-weight: 700;
	font-size: clamp( 1.15rem, 2vw, 1.42rem );
	line-height: 1.22;
	letter-spacing: -.01em;
	margin: 0 0 12px;
	color: var( --dpn-fg );
}

.dpn .dpn-p {
	font-size: 1.03rem;
	line-height: 1.68;
	color: var( --dpn-muted );
	margin: 0 0 14px;
}

.dpn .dpn-link {
	font-family: var( --dpn-head );
	font-weight: 700;
	font-size: .92rem;
	color: var( --dpn-acc-ink );
	text-decoration: none;
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

.dpn .dpn-link:hover { text-decoration: underline; }

.dpn .dpn-card {
	background: var( --dpn-panel );
	border: 1px solid var( --dpn-border );
	border-radius: 20px;
	padding: 28px;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, .04 );
}

.dpn .dpn-tag {
	display: inline-block;
	font-family: var( --dpn-head );
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --dpn-acc-ink );
	/* El contorno es lo único que dibuja la píldora: tono ink opaco (el acento
	   traslúcido sobre blanco se queda en 1,6:1 y desaparece). */
	border: 1px solid var( --dpn-acc-ink );
	border-radius: 999px;
	padding: 6px 12px;
	margin: 0 0 14px;
}

.dpn .dpn-tag--muted { color: var( --dpn-muted ); border-color: var( --dpn-border ); }
.dpn .dpn-tag--solid { background: var( --dpn-acc ); color: #0a0a0a; border-color: transparent; }


/* --- Botón -------------------------------------------------------------- */
.dpn .dpn-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var( --dpn-head );
	font-weight: 800;
	font-size: 1.05rem;
	text-decoration: none;
	border-radius: 16px;
	padding: 16px 26px;
	transition: transform .18s ease, box-shadow .18s ease;
}

.dpn .dpn-btn--primary {
	background: linear-gradient( 100deg, var( --dpn-acc ), var( --dpn-acc-2 ) );
	color: #0a0a0a;
	/* Sobre blanco un halo ancho del acento se lee como mancha de color: la
	   sombra la lleva el negro y el acento sólo insinúa el tono. */
	box-shadow: 0 10px 22px rgba( 0, 0, 0, .1 ), 0 4px 10px rgba( var( --dpn-acc-rgb ), .28 );
}

.dpn .dpn-btn--primary:hover { transform: translateY( -2px ); box-shadow: 0 14px 28px rgba( 0, 0, 0, .14 ), 0 5px 12px rgba( var( --dpn-acc-rgb ), .34 ); }

/* Secundario tipo enlace: «Video demo» con icono de play a la derecha. */
.dpn .dpn-btn--ghost {
	gap: 10px;
	padding: 16px 4px;
	background: none;
	color: var( --dpn-fg );
	font-weight: 700;
}

.dpn .dpn-btn--ghost:hover { color: var( --dpn-acc-ink ); }
.dpn .dpn-btn__play { width: 22px; height: 22px; flex: 0 0 auto; }

/* Foco de teclado visible en los dos botones del CTA (no se elimina el outline). */
.dpn .dpn-btn:focus-visible {
	outline: 2px solid var( --dpn-acc-ink );
	outline-offset: 3px;
	border-radius: 16px;
}
.dpn .dpn-btn__icon { width: 26px; height: 26px; fill: currentColor; flex: 0 0 auto; }
.dpn .dpn-btn__text { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
/* .85 y no menos: es el mínimo al que el texto oscuro atenuado sigue pasando
   4.5:1 sobre CUALQUIERA de los cinco colores del degradado (el morado es el
   caso límite: 4.63:1). */
.dpn .dpn-btn__text small { font-size: .7rem; font-weight: 600; opacity: .85; letter-spacing: .04em; }

/* ==========================================================================
   HERO
   ========================================================================== */
.dpn .dpn-hero {
	position: relative;
	padding: clamp( 56px, 8vw, 104px ) 0 84px;
	text-align: center;
	isolation: isolate;
}

.dpn .dpn-hero__glow {
	position: absolute;
	inset: -20% 0 auto;
	height: 620px;
	background: radial-gradient( 60% 60% at 50% 0%, rgba( var( --dpn-acc-rgb ), .22 ), rgba( 255, 255, 255, 0 ) 70% );
	z-index: -1;
	pointer-events: none;
}

/* Rejilla del hero: en escritorio el texto va a la izquierda y la demo animada
   a la derecha, ambos dentro del above the fold. En móvil se apilan. */
.dpn .dpn-hero__grid {
	display: grid;
	gap: 0; /* apilado: los márgenes originales ya separan CTA y demo. */
}

@media ( min-width: 1025px ) {
	.dpn .dpn-hero { padding-bottom: 64px; text-align: left; }

	.dpn .dpn-hero__grid {
		grid-template-columns: minmax( 0, 0.9fr ) minmax( 0, 1.1fr );
		gap: 52px;
		align-items: center;
	}

	.dpn .dpn-hero__col--text .dpn-hero__title { font-size: clamp( 2.2rem, 3.2vw, 3.1rem ); margin-bottom: 20px; }
	.dpn .dpn-hero__col--text .dpn-hero__lead { font-size: 1rem; line-height: 1.62; max-width: 520px; margin: 0 0 22px; }
	.dpn .dpn-hero__col--text .dpn-trust { font-size: .82rem; margin-bottom: 26px; }
	.dpn .dpn-hero__col--text .dpn-badge { margin-bottom: 22px; }
	.dpn .dpn-hero__col--text .dpn-cta { margin-bottom: 0; }
	.dpn .dpn-hero__col--text .dpn-cta__row { justify-content: flex-start; }
	.dpn .dpn-hero__col--text .dpn-cta__micro { margin-top: 14px; }

	.dpn .dpn-hero__col--demo .dpn-demo { max-width: none; }
	.dpn .dpn-hero__col--demo .dpn-demo__body { min-height: 292px; }
	.dpn .dpn-hero__col--demo .dpn-demo__hint { max-width: none; margin-left: 0; margin-right: 0; }
	.dpn .dpn-hero .dpn-hero__perks { justify-content: center; margin-top: 52px; }
}

.dpn .dpn-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var( --dpn-head );
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var( --dpn-fg );
	background: rgba( 0, 0, 0, .03 );
	border: 1px solid var( --dpn-border );
	border-radius: 999px;
	padding: 9px 18px;
	margin: 0 0 30px;
}

.dpn .dpn-badge__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var( --dpn-acc-ink );
	box-shadow: 0 0 0 0 rgba( var( --dpn-acc-rgb ), .6 );
	animation: dpn-ping 2.4s ease-out 2; /* < 5 s en total: no hace falta control de pausa. */
}

@keyframes dpn-ping {
	0%   { box-shadow: 0 0 0 0 rgba( var( --dpn-acc-rgb ), .55 ); }
	70%  { box-shadow: 0 0 0 12px rgba( var( --dpn-acc-rgb ), 0 ); }
	100% { box-shadow: 0 0 0 0 rgba( var( --dpn-acc-rgb ), 0 ); }
}

.dpn .dpn-hero__title {
	font-family: var( --dpn-head );
	font-weight: 800;
	font-size: clamp( 2.6rem, 8vw, 5.6rem );
	line-height: 1.02;
	letter-spacing: -.035em;
	margin: 0 0 28px;
}

.dpn .dpn-hero__line {
	display: block;
	opacity: 0;
	transform: translateY( 18px );
	animation: dpn-rise .75s cubic-bezier( .2, .7, .3, 1 ) forwards;
}

.dpn .dpn-hero__line:nth-child( 1 ) { animation-delay: .05s; }
.dpn .dpn-hero__line:nth-child( 2 ) { animation-delay: .22s; }
.dpn .dpn-hero__line:nth-child( 3 ) { animation-delay: .39s; }

.dpn .dpn-hero__line--grad {
	/* El titular es donde se ven los cinco colores juntos. */
	background: linear-gradient( 96deg, var( --dpn-sky-ink ) 2%, var( --dpn-purple-ink ) 30%, var( --dpn-green-ink ) 58%, var( --dpn-turq-ink ) 76%, var( --dpn-yellow-ink ) 98% );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

@keyframes dpn-rise {
	to { opacity: 1; transform: translateY( 0 ); }
}

/* Eco del titular: onda (50 % del ancho) → flecha → frase que va rotando.
   La onda es la MISMA de la demo, sólo cambia el ancho; la altura no. */
.dpn .dpn-echo {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 24px;
	max-width: 720px;
}

/* Doble clase a propósito: `.dpn-wave` se declara más abajo con `flex: 1 1 auto`
   y, a igual especificidad, ganaba por orden y encogía la onda al crecer la
   frase. Con `.dpn-wave.dpn-wave--echo` la onda queda FIJA al 50 %. */
.dpn .dpn-wave.dpn-wave--echo {
	flex: 0 0 50%;
	width: 50%;
	justify-content: flex-start;
	border: 1px solid var( --dpn-border );
	border-radius: 10px;
	padding: 6px 10px;
	background: var( --dpn-bg-2 );
	box-sizing: border-box;
	overflow: hidden;
}

.dpn .dpn-echo__arrow {
	flex: 0 0 auto;
	display: inline-flex;
	color: var( --dpn-acc-ink );
}

.dpn .dpn-echo__arrow svg { width: 22px; height: 22px; }

.dpn .dpn-echo__phrase {
	flex: 1 1 0;
	min-width: 0;
	font-family: var( --dpn-head );
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.35;
	color: var( --dpn-fg );
	/* Hueco RESERVADO (3 líneas): al teclearse la frase no cambia ni el alto de
	   la fila ni el ancho de la onda, así onda y flecha se quedan quietas. */
	position: relative;
	height: 4.05em;
	overflow: hidden;
}

/* El texto va centrado dentro del hueco reservado; al ser absoluto, crecer de
   una a tres líneas no empuja nada. El caret sigue en línea tras la palabra. */
.dpn .dpn-echo__inner {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY( -50% );
}

/* Mismo cursor que el de la demo: tecleo con caret que parpadea. */
.dpn .dpn-echo__caret {
	display: inline-block;
	width: 7px;
	height: 1.05em;
	vertical-align: -.18em;
	background: var( --dpn-acc-ink );
	margin-left: 2px;
	animation: dpn-blink 1.05s steps( 2, start ) infinite;
}

/* Con la demo en pausa, el eco también se queda quieto (onda, texto y caret). */
.dpn .dpn-echo[data-paused="true"] .dpn-wave i,
.dpn .dpn-echo[data-paused="true"] .dpn-echo__caret { animation: none; }

.dpn .dpn-hero__lead {
	font-size: clamp( 1.02rem, 1.6vw, 1.2rem );
	line-height: 1.66;
	color: var( --dpn-muted );
	max-width: 720px;
	margin: 0 auto 26px;
}

.dpn .dpn-trust {
	font-family: var( --dpn-head );
	font-size: .86rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var( --dpn-fg );
	opacity: .8;
	margin: 0 0 34px;
}

.dpn .dpn-cta { margin: 0 0 66px; }
.dpn .dpn-cta__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 26px;
}
.dpn .dpn-cta__micro {
	font-family: var( --dpn-head );
	font-size: .8rem;
	color: var( --dpn-muted );
	margin: 16px 0 0;
}

/* --- Demo animada ------------------------------------------------------- */
.dpn .dpn-demo__head {
	font-family: var( --dpn-head );
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var( --dpn-muted );
	margin: 0 0 18px;
}

.dpn .dpn-demo {
	max-width: 920px;
	margin: 0 auto;
	text-align: left;
	background: linear-gradient( 180deg, #ffffff, #f7f6f3 );
	border: 1px solid var( --dpn-border );
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 30px 60px rgba( 0, 0, 0, .10 );
}

.dpn .dpn-demo__bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 14px 18px;
	border-bottom: 1px solid var( --dpn-border );
}

/* El aro oscuro despega los tres puntos del blanco (el amarillo, si no, se pierde). */
.dpn .dpn-demo__dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .38 ); }
.dpn .dpn-demo__dot--r { background: var( --dpn-purple ); }
.dpn .dpn-demo__dot--y { background: var( --dpn-yellow ); }
.dpn .dpn-demo__dot--g { background: var( --dpn-green ); }

.dpn .dpn-demo__win {
	font-family: var( --dpn-head );
	font-size: .84rem;
	color: var( --dpn-muted );
	margin-left: 14px;
}

.dpn .dpn-demo__body { padding: 26px 26px 20px; min-height: 268px; }

.dpn .dpn-demo__state {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var( --dpn-head );
	font-size: .92rem;
	font-weight: 700;
	color: var( --dpn-acc-ink );
	margin: 0 0 22px;
}

.dpn .dpn-demo__pulse {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: currentColor;
}

.dpn .dpn-demo[data-state="rec"] .dpn-demo__pulse { animation: dpn-blink 1s steps( 2, start ) infinite; }
.dpn .dpn-demo[data-state="cancel"] .dpn-demo__state { color: var( --dpn-purple-ink ); }

@keyframes dpn-blink { 50% { opacity: .25; } }

.dpn .dpn-demo__label {
	font-family: var( --dpn-head );
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #6d685f; /* ≥ 4.5:1 sobre el fondo claro de la ventana de demo. */
	margin: 0 0 8px;
}

.dpn .dpn-demo__said {
	font-size: 1rem;
	line-height: 1.6;
	color: #4b473f;
	margin: 0 0 22px;
	min-height: 1.6em;
	/* Única marca de la frase dictada: opaca, o sobre el blanco del hero no se ve. */
	border-left: 2px solid var( --dpn-acc-ink );
	padding-left: 14px;
}

.dpn .dpn-demo__out {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .96rem;
	line-height: 1.75;
	color: var( --dpn-fg );
	margin: 0;
	min-height: 1.75em;
}

/* El tinte por sí solo se pierde sobre blanco: lo que marca el texto recién
   colocado es el subrayado opaco en tono ink (≥ 3:1 con los cinco colores). */
.dpn .dpn-demo__out span:first-child {
	background: linear-gradient( 0deg, rgba( var( --dpn-acc-rgb ), .34 ), rgba( var( --dpn-acc-rgb ), .34 ) );
	box-shadow: inset 0 -2px 0 var( --dpn-acc-ink );
	border-radius: 3px;
}

.dpn .dpn-demo__caret {
	display: inline-block;
	width: 8px;
	height: 1.05em;
	vertical-align: -.18em;
	background: var( --dpn-acc-ink );
	margin-left: 2px;
	animation: dpn-blink 1.05s steps( 2, start ) infinite;
}

.dpn .dpn-demo__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 22px 20px;
	border-top: 1px solid var( --dpn-border );
}

.dpn .dpn-demo__mic { width: 22px; height: 22px; color: var( --dpn-muted ); flex: 0 0 auto; }
.dpn .dpn-demo__mic svg { width: 100%; height: 100%; }
.dpn .dpn-demo[data-state="rec"] .dpn-demo__mic { color: var( --dpn-acc-ink ); }

.dpn .dpn-key {
	font-family: var( --dpn-head );
	font-size: .8rem;
	font-weight: 700;
	color: var( --dpn-fg );
	border: 1px solid var( --dpn-line-ui );
	border-bottom-width: 2px;
	border-radius: 8px;
	padding: 6px 12px;
	background: rgba( 0, 0, 0, .04 );
	white-space: nowrap;
}

.dpn .dpn-key--sm { font-size: .74rem; padding: 4px 9px; }

.dpn .dpn-wave {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	flex: 1 1 auto;
	height: 34px;
}

.dpn .dpn-wave i {
	display: block;
	width: 3px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient( 180deg, var( --dpn-acc-ink ), var( --dpn-acc-ink-2 ) );
	opacity: 1; /* Siempre al 100 %: la onda nunca se ve apagada. */
	transform-origin: center;
	/* La onda late SIEMPRE, en cualquier estado de la demo (sólo la paran
	   el botón de pausa y prefers-reduced-motion). */
	animation: dpn-bar .9s ease-in-out infinite;
	animation-play-state: running;
}

@keyframes dpn-bar {
	0%, 100% { height: 4px; }
	50%      { height: 26px; }
}

/* Con la demo en pausa NADA se mueve dentro de ella (tampoco el cursor). */
.dpn .dpn-demo[data-paused="true"] .dpn-demo__caret,
.dpn .dpn-demo[data-paused="true"] .dpn-demo__pulse,
.dpn .dpn-demo[data-paused="true"] .dpn-wave i { animation: none; }

/* Pausa de la demo — obligatorio poder parar el movimiento. */
.dpn .dpn-demo__pause {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	font-family: var( --dpn-head );
	font-size: .76rem;
	font-weight: 700;
	color: var( --dpn-muted );
	background: rgba( 0, 0, 0, .035 );
	border: 1px solid var( --dpn-line-ui );
	border-radius: 999px;
	padding: 7px 14px;
	cursor: pointer;
}

/* El borde en hover/foco usa el tono ink OPACO: el acento al 70 % sobre blanco se
   queda en ~1,6:1 y el contorno —único indicio del control— se perdía justo al
   señalarlo. Además el foco de teclado lleva su propio contorno visible. */
.dpn .dpn-demo__pause:hover,
.dpn .dpn-demo__pause:focus-visible { color: var( --dpn-fg ); border-color: var( --dpn-acc-ink ); }

.dpn .dpn-demo__pause:focus-visible {
	outline: 2px solid var( --dpn-acc-ink );
	outline-offset: 3px;
}

.dpn .dpn-demo__pause-ico {
	width: 10px; height: 12px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

.dpn .dpn-demo__pause.is-paused .dpn-demo__pause-ico {
	width: 0; height: 0;
	border: 6px solid transparent;
	border-left: 10px solid currentColor;
	border-right: 0;
}

.dpn .dpn-demo__hint {
	max-width: 920px;
	margin: 18px auto 0;
	font-size: .92rem;
	color: var( --dpn-muted );
}

.dpn .dpn-demo__hint strong { color: var( --dpn-fg ); font-family: var( --dpn-head ); font-size: .86rem; }

.dpn .dpn-hero__perks {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 28px;
	margin: 34px 0 0;
	padding: 0;
	font-family: var( --dpn-head );
	font-size: .88rem;
	font-weight: 600;
	color: var( --dpn-muted );
}

.dpn .dpn-hero__perks li::before {
	content: "✓";
	color: var( --dpn-acc-ink );
	margin-right: 8px;
	font-weight: 800;
}

/* ==========================================================================
   ANTES / AHORA
   ========================================================================== */
.dpn .dpn-why { background: var( --dpn-bg-2 ); border-top: 1px solid var( --dpn-border ); }

.dpn .dpn-why__grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 24px;
	margin-top: 34px;
}

.dpn .dpn-why__col--now {
	border-color: rgba( var( --dpn-acc-rgb ), .5 );
	background: linear-gradient( 160deg, rgba( var( --dpn-acc-rgb ), .1 ), rgba( 255, 255, 255, 0 ) );
}

.dpn .dpn-why__close {
	margin: 30px 0 0;
	font-size: 1.05rem;
	line-height: 1.65;
	color: var( --dpn-fg );
	max-width: 820px;
}

/* ==========================================================================
   CIFRAS
   ========================================================================== */
.dpn .dpn-stats { padding: 68px 0; }

.dpn .dpn-stats__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 26px;
	text-align: center;
}

.dpn .dpn-stat { display: flex; flex-direction: column; gap: 6px; }

.dpn .dpn-stat__v {
	font-family: var( --dpn-head );
	font-weight: 800;
	font-size: clamp( 3rem, 7vw, 4.6rem );
	line-height: 1;
	background: linear-gradient( 96deg, var( --dpn-acc-ink ), var( --dpn-acc-ink-2 ) );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.dpn .dpn-stat__l {
	font-family: var( --dpn-head );
	font-weight: 700;
	font-size: .96rem;
	color: var( --dpn-fg );
}

.dpn .dpn-stat__n { font-size: .88rem; color: var( --dpn-muted ); }

/* ==========================================================================
   CALCULADORA
   ========================================================================== */
.dpn .dpn-calc { background: var( --dpn-bg-2 ); border-top: 1px solid var( --dpn-border ); }
.dpn .dpn-calc__intro { max-width: 760px; }

.dpn .dpn-calc__box {
	margin-top: 34px;
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 30px;
	background: var( --dpn-panel );
	border: 1px solid var( --dpn-border );
	border-radius: 24px;
	padding: 32px;
}

.dpn .dpn-calc__controls { display: flex; flex-direction: column; gap: 30px; justify-content: center; }

.dpn .dpn-field { display: block; }

.dpn .dpn-field__top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	font-family: var( --dpn-head );
	font-size: .9rem;
	font-weight: 600;
	color: var( --dpn-muted );
	margin-bottom: 12px;
}

.dpn .dpn-field__top b { font-size: 1.25rem; font-weight: 800; color: var( --dpn-acc-ink ); }

.dpn .dpn-field input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: var( --dpn-line-ui );
	outline: none;
}

.dpn .dpn-field input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: var( --dpn-acc-ink );
	border: 2px solid #ffffff;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, .22 );
	cursor: pointer;
}

.dpn .dpn-field input[type="range"]::-moz-range-thumb {
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var( --dpn-acc-ink );
	border: 2px solid #ffffff;
	cursor: pointer;
}

/* Sobre blanco un halo translúcido del acento no se ve (el amarillo desaparece):
   el foco de teclado se marca con el tono ink, opaco. */
.dpn .dpn-field input[type="range"]:focus-visible {
	outline: 2px solid var( --dpn-acc-ink );
	outline-offset: 4px;
}

.dpn .dpn-calc__out {
	background: rgba( 0, 0, 0, .03 );
	border: 1px solid var( --dpn-border );
	border-radius: 18px;
	padding: 26px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.dpn .dpn-calc__main span {
	display: block;
	font-family: var( --dpn-head );
	font-weight: 800;
	font-size: clamp( 2.6rem, 6vw, 4rem );
	line-height: 1;
	background: linear-gradient( 96deg, var( --dpn-acc-ink ), var( --dpn-acc-ink-2 ) );
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.dpn .dpn-calc__main small,
.dpn .dpn-calc__sub small {
	display: block;
	font-family: var( --dpn-head );
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var( --dpn-muted );
	margin-top: 6px;
}

.dpn .dpn-calc__main { margin: 0 0 24px; }

.dpn .dpn-calc__sub {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 14px;
	border-top: 1px solid var( --dpn-border );
	padding-top: 20px;
}

.dpn .dpn-calc__sub p { margin: 0; }

.dpn .dpn-calc__sub span {
	font-family: var( --dpn-head );
	font-weight: 800;
	font-size: 1.5rem;
	color: var( --dpn-fg );
}

/* ==========================================================================
   TARJETAS Y REJILLAS
   ========================================================================== */
.dpn .dpn-feat2__grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 24px;
}

.dpn .dpn-card--big { padding: 34px; }

.dpn .dpn-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
	margin-top: 34px;
}

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

.dpn .dpn-card--hero {
	grid-column: span 3;
	padding: 36px;
	background: linear-gradient( 150deg, rgba( var( --dpn-acc-rgb ), .11 ), rgba( 255, 255, 255, 0 ) );
	border-color: rgba( var( --dpn-acc-rgb ), .45 );
}

.dpn .dpn-help {
	font-family: var( --dpn-head );
	font-size: .84rem;
	font-weight: 700;
	color: var( --dpn-muted );
	margin: 22px 0 12px;
}

.dpn .dpn-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }

.dpn .dpn-chip {
	font-family: var( --dpn-head );
	font-size: .82rem;
	font-weight: 700;
	color: var( --dpn-fg );
	background: rgba( 0, 0, 0, .04 );
	border: 1px solid var( --dpn-line-ui );
	border-radius: 999px;
	padding: 8px 14px;
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

/* Entrada del diccionario que no aparece en el ejemplo: se muestra, no se pulsa. */
.dpn .dpn-chip--static { cursor: default; color: var( --dpn-muted ); }

/* El tinte del acento es decorativo: el estado activo se reconoce por el borde
   en tono ink, que sí llega a 3:1 con los cinco colores. */
.dpn button.dpn-chip:hover,
.dpn button.dpn-chip:focus-visible,
.dpn button.dpn-chip.is-on {
	background: rgba( var( --dpn-acc-rgb ), .22 );
	border-color: var( --dpn-acc-ink );
	/* El texto se queda en el gris de siempre: el ink sobre el tinte del acento
	   bajaría de 4,5:1 y el estado ya se reconoce por el borde y el relleno. */
	color: var( --dpn-fg );
	transform: translateY( -1px );
}

.dpn .dpn-ba { display: grid; gap: 12px; }

.dpn .dpn-ba__row { display: flex; gap: 14px; align-items: baseline; margin: 0; flex-wrap: wrap; }

.dpn .dpn-ba__k {
	font-family: var( --dpn-head );
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --dpn-muted );
	flex: 0 0 auto;
	margin: 0;
}

.dpn .dpn-ba__k--ok { color: var( --dpn-acc-ink ); }

.dpn .dpn-ba__t {
	font-size: .98rem;
	line-height: 1.6;
	color: var( --dpn-fg );
	margin: 0;
	flex: 1 1 260px;
}

/* Texto oscuro sobre el tinte: el tinte es un lavado claro del acento, así que
   el color de cuerpo mantiene el contraste con los cinco colores. */
.dpn .dpn-ba__t mark {
	background: rgba( var( --dpn-acc-rgb ), .3 );
	box-shadow: inset 0 -2px 0 var( --dpn-acc-ink ); /* la marca se ve aunque el tinte no. */
	color: var( --dpn-fg );
	border-radius: 4px;
	padding: 1px 4px;
	transition: background .18s ease;
}

/* Resaltado activo: acento opaco para que el texto negro se lea con los cinco. */
.dpn .dpn-ba__t mark.is-hit { background: var( --dpn-acc ); color: #0a0a0a; }

.dpn .dpn-ba--stack { gap: 8px; margin-top: 18px; }

.dpn .dpn-seg { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }

.dpn .dpn-seg span {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .86rem;
	color: var( --dpn-muted );
	background: rgba( 0, 0, 0, .035 );
	border-left: 2px solid var( --dpn-border );
	padding: 5px 10px;
	border-radius: 0 6px 6px 0;
}

.dpn .dpn-langs,
.dpn .dpn-apps { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }

.dpn .dpn-langs span,
.dpn .dpn-apps span {
	font-family: var( --dpn-head );
	font-size: .78rem;
	font-weight: 700;
	color: var( --dpn-fg );
	background: rgba( 0, 0, 0, .04 );
	border: 1px solid var( --dpn-border );
	border-radius: 8px;
	padding: 6px 11px;
}

.dpn .dpn-langs span { min-width: 46px; text-align: center; color: var( --dpn-acc-ink ); }

.dpn .dpn-note {
	font-size: .88rem;
	line-height: 1.55;
	color: #605c55; /* ≥ 4.5:1 sobre la tarjeta. */
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var( --dpn-border );
}

/* ==========================================================================
   CÓMO FUNCIONA
   ========================================================================== */
.dpn .dpn-steps { background: var( --dpn-bg-2 ); border-top: 1px solid var( --dpn-border ); }

.dpn .dpn-steps__list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 24px;
	margin: 34px 0 0;
	padding: 0;
}

.dpn .dpn-step { position: relative; padding-top: 34px; }

.dpn .dpn-step__n {
	position: absolute;
	top: -18px;
	left: 28px;
	width: 46px; height: 46px;
	display: grid;
	place-items: center;
	border-radius: 14px;
	font-family: var( --dpn-head );
	font-weight: 800;
	font-size: 1.15rem;
	color: #0a0a0a;
	background: linear-gradient( 100deg, var( --dpn-acc ), var( --dpn-acc-2 ) );
	box-shadow: 0 8px 18px rgba( 0, 0, 0, .1 ), 0 3px 8px rgba( var( --dpn-acc-rgb ), .26 );
}

.dpn .dpn-steps__note {
	margin: 28px 0 0;
	font-size: 1rem;
	color: var( --dpn-muted );
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

/* ==========================================================================
   CASOS DE USO
   ========================================================================== */
.dpn .dpn-uses__intro { max-width: 760px; }
.dpn .dpn-uses__all { margin: 30px 0 0; }

/* ==========================================================================
   DUDAS
   ========================================================================== */
.dpn .dpn-faq { background: var( --dpn-bg-2 ); border-top: 1px solid var( --dpn-border ); }

.dpn .dpn-faq__list {
	margin-top: 34px;
	border-top: 1px solid var( --dpn-border );
	max-width: 900px;
}

.dpn .dpn-qa { border-bottom: 1px solid var( --dpn-border ); }
.dpn .dpn-qa__h { margin: 0; font-size: 1rem; }

.dpn .dpn-qa__btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 22px 4px;
	text-align: left;
	color: var( --dpn-fg );
	font-family: var( --dpn-head );
	font-weight: 700;
	font-size: clamp( 1rem, 1.6vw, 1.12rem );
	line-height: 1.35;
}

.dpn .dpn-qa__btn:hover .dpn-qa__q { color: var( --dpn-acc-ink ); }

.dpn .dpn-qa__ico {
	position: relative;
	width: 18px; height: 18px;
	flex: 0 0 auto;
}

.dpn .dpn-qa__ico::before,
.dpn .dpn-qa__ico::after {
	content: "";
	position: absolute;
	background: var( --dpn-acc-ink );
	border-radius: 2px;
	transition: transform .22s ease, opacity .22s ease;
}

.dpn .dpn-qa__ico::before { inset: 8px 0 auto; height: 2px; }
.dpn .dpn-qa__ico::after  { inset: 0 8px auto; width: 2px; height: 18px; }

.dpn .dpn-qa__btn[aria-expanded="true"] .dpn-qa__ico::after { transform: scaleY( 0 ); opacity: 0; }

.dpn .dpn-qa__a { padding: 0 4px 24px; max-width: 780px; }
.dpn .dpn-qa__a .dpn-p { margin: 0; }

/* ==========================================================================
   LLAMADA FINAL
   ========================================================================== */
.dpn .dpn-final { text-align: center; padding: 110px 0 120px; position: relative; }

.dpn .dpn-final::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient( 55% 70% at 50% 100%, rgba( var( --dpn-acc-rgb ), .2 ), rgba( 255, 255, 255, 0 ) 70% );
	pointer-events: none;
}

.dpn .dpn-final > * { position: relative; }
.dpn .dpn-final__p { max-width: 620px; margin: 0 auto 32px; }

/* ==========================================================================
   REVELADO AL SCROLL
   ========================================================================== */
/* Sólo con JS: sin él, `.dpn-js` no existe y el contenido nace visible. */
.dpn-js .dpn .dpn-sec .dpn-card,
.dpn-js .dpn .dpn-sec .dpn-h2,
.dpn-js .dpn .dpn-sec .dpn-stat {
	opacity: 0;
	transform: translateY( 18px );
	transition: opacity .6s ease, transform .6s cubic-bezier( .2, .7, .3, 1 );
}

.dpn .dpn-sec.is-in .dpn-card,
.dpn .dpn-sec.is-in .dpn-h2,
.dpn .dpn-sec.is-in .dpn-stat { opacity: 1; transform: none; }

.dpn .dpn-sec.is-in .dpn-card:nth-child( 2 ) { transition-delay: .07s; }
.dpn .dpn-sec.is-in .dpn-card:nth-child( 3 ) { transition-delay: .14s; }
.dpn .dpn-sec.is-in .dpn-card:nth-child( 4 ) { transition-delay: .21s; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media ( max-width: 1024px ) {
	.dpn .dpn-grid { grid-template-columns: repeat( 2, 1fr ); }
	.dpn .dpn-grid--4 { grid-template-columns: repeat( 2, 1fr ); }
	.dpn .dpn-card--hero { grid-column: span 2; }
	.dpn .dpn-calc__box { grid-template-columns: 1fr; }
}

@media ( max-width: 780px ) {
	.dpn .dpn-sec { padding: 68px 0; }
	.dpn .dpn-wrap { padding: 0 18px; }
	.dpn .dpn-why__grid,
	.dpn .dpn-feat2__grid,
	.dpn .dpn-grid,
	.dpn .dpn-grid--4,
	.dpn .dpn-steps__list,
	.dpn .dpn-stats__grid { grid-template-columns: 1fr; }
	.dpn .dpn-card--hero { grid-column: auto; padding: 26px; }
	.dpn .dpn-card { padding: 24px; }
	.dpn .dpn-demo__body { padding: 20px 18px 16px; min-height: 300px; }
	.dpn .dpn-demo__foot { flex-wrap: wrap; }
	.dpn .dpn-demo__foot .dpn-wave { order: 3; width: 100%; flex-basis: 100%; }
	.dpn .dpn-echo { gap: 10px; }
	.dpn .dpn-echo__phrase { font-size: .88rem; }
	.dpn .dpn-btn { width: 100%; justify-content: center; }
	.dpn .dpn-btn--ghost { width: auto; padding-top: 8px; padding-bottom: 8px; }
	.dpn .dpn-calc__box { padding: 22px; }
	.dpn .dpn-calc__sub { grid-template-columns: 1fr; gap: 16px; }
	.dpn .dpn-hero__perks { flex-direction: column; align-items: center; gap: 10px; }
}

/* Pantallas estrechas: la frase se encoge para que siga cabiendo en el hueco
   reservado (si no, se cortaría al no poder crecer la caja). */
@media ( max-width: 480px ) {
	.dpn .dpn-echo__phrase { font-size: .78rem; }
}

@media ( max-width: 360px ) {
	.dpn .dpn-echo__phrase { font-size: .7rem; height: 5.45em; }
}

@media ( prefers-reduced-motion: reduce ) {
	.dpn .dpn-hero__line,
	.dpn .dpn-demo__caret,
	.dpn .dpn-echo__caret,
	.dpn .dpn-badge__dot,
	.dpn .dpn-wave i,
	.dpn .dpn-demo__pulse { animation: none !important; }
	.dpn .dpn-hero__line { opacity: 1; transform: none; }
	.dpn-js .dpn .dpn-sec .dpn-card,
	.dpn-js .dpn .dpn-sec .dpn-h2,
	.dpn-js .dpn .dpn-sec .dpn-stat { opacity: 1; transform: none; transition: none; }
}