/* ==========================================================================
   People E-Commerce V3
   Firma visual: EL BISEL. Corte a 45 grados en la esquina inferior izquierda
   de toda superficie. Relleno naranja = el elemento esta vivo / activo.
   --------------------------------------------------------------------------
   1 Tokens · 2 Base · 3 Tipografia · 4 Reticula · 5 Bisel · 6 Botones
   7 Cabecera · 8 Menu movil · 9 Hero · 10 Demo viva · 11 Web Design
   12 Estimador · 13 E-commerce · 14 Complementarios · 15 Agenda
   16 Capa CTA · 17 Footer · 18 Paginas internas · 19 Movimiento · 20 Responsive
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root {
	--ink:       #14110f;
	--ink-2:     #1e1a17;
	--ink-3:     #2a2521;
	--paper:     #faf7f2;
	--paper-2:   #f1ece3;
	--white:     #ffffff;

	/* Naranja en 3 pasos. Medido contra WCAG 2.2.
	   500 = marca. Solo superficie y relleno de bisel. Nunca texto.
	   600 = reglas, iconos, texto >=24px sobre papel.   3.33:1
	   700 = texto pequeno y enlaces sobre papel/blanco. 4.85:1 / 5.18:1 */
	--o-500:     #f07c2b;
	--o-600:     #ea580c;
	--o-700:     #c2410c;

	--muted:     #5f574f;
	--muted-ink: rgba(250, 247, 242, 0.68);
	--rule:      rgba(20, 17, 15, 0.12);
	--rule-2:    rgba(20, 17, 15, 0.28);
	--rule-ink:  rgba(250, 247, 242, 0.16);
	--rule-ink-2:rgba(250, 247, 242, 0.32);

	--f-display: "Bricolage Grotesque", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
	--f-text:    "Red Hat Text", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
	--f-mono:    "Azeret Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

	/* El bisel */
	--bevel:     clamp(10px, 1.1vw, 18px);
	--bevel-lg:  clamp(24px, 3vw, 56px);

	--gut:  clamp(20px, 4vw, 72px);
	--max:  1560px;
	--col:  12;

	/* Cinco pasos, base 8 */
	--s1: clamp(8px, 1vw, 12px);
	--s2: clamp(16px, 2vw, 24px);
	--s3: clamp(32px, 3.5vw, 56px);
	--s4: clamp(56px, 7vw, 104px);
	--s5: clamp(88px, 11vw, 168px);

	--e-out:  cubic-bezier(0.16, 1, 0.3, 1);
	--e-io:   cubic-bezier(0.65, 0, 0.35, 1);
	--t-sub:  360ms;
	--t-std:  520ms;

	--hdr-h: 74px;
}

/* --- 2. Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--hdr-h) + 24px);
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--f-text);
	font-size: clamp(1rem, 0.97rem + 0.18vw, 1.075rem);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.pea-lock { overflow: hidden; }

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
legend { padding: 0; }

::selection { background: var(--o-500); color: var(--ink); }

/* Foco: >=2px de perimetro y 3:1 de contraste de estado */
:focus-visible {
	outline: 3px solid var(--o-700);
	outline-offset: 3px;
}
.pea-dark :focus-visible { outline-color: var(--o-500); }

.pea-skip {
	position: absolute; left: 50%; top: -120px; transform: translateX(-50%);
	z-index: 999; background: var(--ink); color: var(--paper);
	padding: 14px 22px; font-family: var(--f-mono); font-size: 0.8rem;
	transition: top 0.25s var(--e-out);
}
.pea-skip:focus { top: 12px; }

.pea-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0;
	margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- 3. Tipografia ------------------------------------------------------- */
h1, h2, h3, h4 {
	margin: 0;
	font-family: var(--f-display);
	line-height: 0.98;
	letter-spacing: -0.032em;
	text-wrap: balance;
	font-weight: 600;
}

.pea-d1 {
	font-size: clamp(2.7rem, 7.2vw, 7.4rem);
	font-variation-settings: "wght" 700, "wdth" 92, "opsz" 96;
	line-height: 0.92;
	letter-spacing: -0.045em;
}
.pea-d2 {
	font-size: clamp(2rem, 4.6vw, 4.4rem);
	font-variation-settings: "wght" 650, "wdth" 92, "opsz" 72;
	letter-spacing: -0.04em;
	max-width: 18ch;
}
.pea-d3 {
	font-size: clamp(1.35rem, 2.2vw, 2.1rem);
	font-variation-settings: "wght" 620, "wdth" 95, "opsz" 36;
	letter-spacing: -0.03em;
	line-height: 1.08;
}
.pea-d4 {
	font-size: clamp(1.05rem, 1.4vw, 1.3rem);
	font-variation-settings: "wght" 600, "wdth" 97, "opsz" 20;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.pea-lead {
	font-size: clamp(1.05rem, 1.25vw, 1.28rem);
	line-height: 1.55;
	color: var(--muted);
	max-width: 56ch;
}
.pea-dark .pea-lead { color: var(--muted-ink); }

/* Capa de datos: mono para numeracion y metadatos */
.pea-meta {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	line-height: 1.4;
}
.pea-dark .pea-meta { color: var(--muted-ink); }
.pea-meta--o { color: var(--o-700); }
.pea-dark .pea-meta--o { color: var(--o-500); }
/* Sobre naranja pleno, el naranja de texto no cumple contraste: pasa a tinta. */
.pea-orange .pea-meta--o,
.pea-orange .pea-meta { color: var(--ink); }

.pea-num {
	font-family: var(--f-mono);
	font-variation-settings: "wght" 400;
	font-variant-numeric: tabular-nums;
}

/* --- 4. Reticula --------------------------------------------------------- */
.pea-wrap {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gut);
}

.pea-grid {
	display: grid;
	grid-template-columns: repeat(var(--col), minmax(0, 1fr));
	gap: var(--s2);
}

.pea-sec { position: relative; padding-block: var(--s5); }
.pea-sec--tight { padding-block: var(--s4); }

.pea-dark {
	background: var(--ink);
	color: var(--paper);
	--muted: var(--muted-ink);
	--rule: var(--rule-ink);
	--rule-2: var(--rule-ink-2);
}

.pea-orange {
	background: var(--o-500);
	color: var(--ink);
	--muted: rgba(20, 17, 15, 0.76);
	--rule: rgba(20, 17, 15, 0.22);
	--rule-2: rgba(20, 17, 15, 0.4);
}

/* Reglas hairline de columna: la retícula visible como demostracion de oficio */
.pea-ruled { position: relative; }
.pea-ruled::before {
	content: "";
	position: absolute; inset: 0;
	pointer-events: none;
	z-index: 0;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gut);
	background-image: repeating-linear-gradient(
		to right,
		var(--rule) 0 1px,
		transparent 1px calc((100% - var(--gut) * 2) / 6)
	);
	background-position: var(--gut) 0;
	background-size: calc(100% - var(--gut) * 2) 100%;
	background-repeat: no-repeat;
	opacity: 0.9;
}
.pea-ruled > * { position: relative; z-index: 1; }

/* Cabecera de seccion */
.pea-head {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.8fr);
	gap: var(--s3);
	align-items: end;
	margin-bottom: var(--s4);
}
.pea-head__aside { color: var(--muted); max-width: 42ch; }
.pea-head__label { display: block; margin-bottom: var(--s2); }

@media (max-width: 900px) {
	.pea-head { grid-template-columns: 1fr; align-items: start; gap: var(--s2); }
}

/* Regla naranja de seccion */
.pea-rule {
	display: block; height: 2px; width: 100%;
	background: var(--o-600);
	transform: scaleX(0); transform-origin: left;
}
.pea-js .pea-rule.is-in { transform: scaleX(1); transition: transform 620ms var(--e-out); }

/* --- 5. EL BISEL --------------------------------------------------------- */
/* Toda superficie: corte a 45 grados abajo-izquierda. */
.pea-bevel {
	position: relative;
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)));
}
.pea-bevel--lg {
	--bevel: var(--bevel-lg);
}

/* El triangulo naranja: significa "vivo / activo / seleccionado".
   Se acompana SIEMPRE de texto o icono; nunca comunica solo por color. */
.pea-live {
	position: absolute;
	left: 0; bottom: 0;
	width: var(--bevel); height: var(--bevel);
	background: var(--o-500);
	clip-path: polygon(0 0, 100% 100%, 0 100%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 200ms var(--e-io);
	z-index: 3;
}
.is-live > .pea-live,
.pea-bevel:hover > .pea-live,
.pea-bevel:focus-within > .pea-live { opacity: 1; }

/* --- 6. Botones ---------------------------------------------------------- */
.pea-btn {
	--bevel: 12px;
	position: relative;
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--f-mono); font-size: 0.76rem;
	letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
	padding: 16px 24px; min-height: 50px;
	background: var(--ink); color: var(--paper);
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)));
	transition: background-color 300ms var(--e-out), color 300ms var(--e-out);
	white-space: nowrap;
}
.pea-btn:hover, .pea-btn:focus-visible { background: var(--o-600); color: var(--white); }
.pea-btn > .pea-live { background: var(--o-500); }
.pea-btn:hover > .pea-live { background: var(--ink); }

/* IMPORTANTE: un elemento biselado nunca lleva contorno transparente.
   El recorte cortaria el borde en la diagonal y la esquina quedaria abierta.
   Todo elemento biselado se resuelve con relleno. */
.pea-btn--ghost {
	background: var(--paper-2); color: var(--ink);
	box-shadow: inset 0 0 0 2px var(--rule-2);
}
.pea-btn--ghost:hover, .pea-btn--ghost:focus-visible { background: var(--ink); color: var(--paper); }

.pea-dark .pea-btn { background: var(--paper); color: var(--ink); }
.pea-dark .pea-btn:hover, .pea-dark .pea-btn:focus-visible { background: var(--o-500); color: var(--ink); }
.pea-dark .pea-btn--ghost { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 2px var(--rule-ink-2); }
.pea-dark .pea-btn--ghost:hover { background: var(--paper); color: var(--ink); }

.pea-orange .pea-btn { background: var(--ink); color: var(--paper); }
.pea-orange .pea-btn:hover { background: var(--white); color: var(--ink); }

/* Enlace de texto con subrayado propio */
.pea-link {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--f-mono); font-size: 0.76rem;
	letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--o-700);
	padding-block: 6px;
	border-bottom: 2px solid currentColor;
	transition: color 260ms var(--e-out), gap 260ms var(--e-out);
}
.pea-link:hover { gap: 13px; }
.pea-dark .pea-link { color: var(--o-500); }
.pea-orange .pea-link { color: var(--ink); }

/* --- 7. Cabecera --------------------------------------------------------- */
.pea-hdr {
	position: fixed; inset: 0 0 auto 0; z-index: 60;
	height: var(--hdr-h);
	display: flex; align-items: center; gap: var(--s2);
	padding-inline: var(--gut);
	background: rgba(250, 247, 242, 0.86);
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	border-bottom: 1px solid transparent;
	transition: border-color 300ms var(--e-out), background-color 300ms var(--e-out);
}
.pea-hdr.is-stuck {
	background: var(--paper);
	border-bottom-color: transparent;
	box-shadow: 0 1px 0 var(--rule), 0 12px 28px -20px rgba(20, 17, 15, 0.45);
}

.pea-logo { display: block; line-height: 0; flex: 0 0 auto; }
.pea-logo img { height: clamp(34px, 3.1vw, 44px); width: auto; }

.pea-nav { margin-left: auto; }
.pea-nav__list { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 28px); }
.pea-nav__list > li { position: relative; }
/* Navegacion en tipografia de texto, no monoespaciada en mayusculas:
   la caja alta tecnica era lo que mas enfriaba la cabecera. */
.pea-nav__list a {
	display: inline-block; padding: 10px 2px;
	font-family: var(--f-text); font-size: 0.95rem;
	letter-spacing: -0.005em; text-transform: none;
	color: var(--muted);
	transition: color 240ms var(--e-out), font-variation-settings 240ms var(--e-out);
	font-variation-settings: "wght" 450;
}
.pea-nav__list a:hover,
.pea-nav__list a[aria-current="true"] { color: var(--ink); font-variation-settings: "wght" 650; }

/* Submenu unico (Web Design) — nunca un megamenu */
.pea-sub {
	position: absolute; top: 100%; left: -14px; min-width: 232px;
	background: var(--paper); border: 1px solid var(--rule-2);
	padding: 8px; display: grid; gap: 2px;
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity 220ms var(--e-out), transform 220ms var(--e-out), visibility 220ms;
	--bevel: 12px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)));
}
.pea-nav__list > li:hover > .pea-sub,
.pea-nav__list > li:focus-within > .pea-sub { opacity: 1; visibility: visible; transform: none; }
.pea-sub a { display: block; padding: 12px 12px; color: var(--ink); font-family: var(--f-text); font-size: 0.92rem; letter-spacing: -0.005em; text-transform: none; }
.pea-sub a:hover { background: var(--paper-2); }

.pea-hdr__end { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* Conmutador de idioma */
.pea-lang {
	display: inline-flex; position: relative; overflow: hidden;
	background: var(--paper-2);
	box-shadow: inset 0 0 0 2px var(--rule-2);
	--bevel: 8px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)));
}
.pea-lang__slide {
	position: absolute; z-index: 1; inset: 0 auto 0 0; width: 50%;
	background: var(--ink);
	transition: transform 420ms var(--e-io);
}
.pea-lang[data-lang="en"] .pea-lang__slide { transform: translateX(100%); }
.pea-lang button {
	position: relative; z-index: 2;
	font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em;
	padding: 9px 11px; min-height: 40px; min-width: 42px;
	color: var(--ink);
	transition: color 320ms var(--e-io);
}
.pea-lang button[aria-pressed="true"] { color: var(--paper); }

/* El CTA de cabecera se atenua cuando la capa persistente esta visible */
.pea-hdr__cta { transition: opacity 300ms var(--e-out), transform 300ms var(--e-out); }
	.pea-hdr__cta .pea-btn {
	font-family: var(--f-text);
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
}
body.pea-cta-on .pea-hdr__cta { opacity: 0; transform: translateY(-6px); pointer-events: none; }

.pea-burger {
	display: none; align-items: center; gap: 9px;
	padding: 12px 14px; min-height: 46px;
	background: var(--paper-2);
	box-shadow: inset 0 0 0 2px var(--rule-2);
	font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
	--bevel: 8px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)));
}
.pea-burger i { display: block; width: 17px; height: 2px; background: currentColor; position: relative; }
.pea-burger i::before, .pea-burger i::after {
	content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
	transition: transform 300ms var(--e-out);
}
.pea-burger i::before { top: -5px; }
.pea-burger i::after { top: 5px; }
body.pea-lock .pea-burger i { background: transparent; }
body.pea-lock .pea-burger i::before { transform: translateY(5px) rotate(45deg); }
body.pea-lock .pea-burger i::after { transform: translateY(-5px) rotate(-45deg); }

/* --- 8. Menu movil ------------------------------------------------------- */
.pea-mob {
	position: fixed; inset: var(--hdr-h) 0 0 0; z-index: 55;
	background: var(--ink); color: var(--paper);
	padding: var(--s3) var(--gut) var(--s4);
	display: grid; align-content: start; gap: var(--s3);
	overflow-y: auto;
	clip-path: inset(0 0 100% 0);
	transition: clip-path 520ms var(--e-out);
}
.pea-mob.is-open { clip-path: inset(0 0 0 0); }
.pea-mob:not(.is-open) { pointer-events: none; }
.pea-mob__list { display: grid; gap: 2px; }
.pea-mob__list a {
	display: block; padding: 14px 0;
	font-family: var(--f-display);
	font-size: clamp(1.7rem, 6vw, 2.6rem);
	font-variation-settings: "wght" 620, "wdth" 92;
	letter-spacing: -0.035em;
	border-bottom: 1px solid var(--rule-ink);
}
.pea-mob__list a:hover { color: var(--o-500); }

/* --- 9. Hero ------------------------------------------------------------- */
.pea-hero {
	padding-top: calc(var(--hdr-h) + var(--s4));
	padding-bottom: var(--s4);
	min-height: 86svh;
	display: flex; flex-direction: column; justify-content: center;
	position: relative;
	overflow: hidden;
}
/* Halo calido detras de la escena: aleja el conjunto del papel plano y frio
   sin introducir una imagen de archivo. */
.pea-hero__glow {
	position: absolute;
	right: -12%; top: 4%;
	width: min(72vw, 1000px); aspect-ratio: 1;
	background: radial-gradient(circle at 50% 50%,
		rgba(240, 124, 43, 0.20) 0%,
		rgba(240, 124, 43, 0.09) 38%,
		rgba(240, 124, 43, 0) 68%);
	pointer-events: none; z-index: 0;
}

.pea-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr);
	gap: clamp(24px, 4vw, 72px);
	align-items: center;
	position: relative; z-index: 1;
}

@media (min-width: 901px) {
	.pea-hero__grid {
		margin-top: -55px;
	}
}

.pea-hero__copy { max-width: 620px; }

.pea-hero__eyebrow {
	display: inline-flex; align-items: center; flex-wrap: wrap; gap: 9px;
	font-family: var(--f-text);
	font-size: 0.9rem;
	font-variation-settings: "wght" 500;
	letter-spacing: -0.005em;
	color: var(--muted);
}
.pea-hero__dot { width: 8px; height: 8px; background: var(--o-500); flex: 0 0 auto; }
.pea-hero__sep { color: var(--rule-2); }

/* El titular vive en media pagina: la escala se calcula sobre esa columna. */
.pea-hero__title {
	margin-block: clamp(18px, 2vw, 26px) clamp(16px, 1.8vw, 24px);
	font-family: var(--f-display);
	font-size: clamp(2.6rem, 4.6vw, 5.3rem);
	font-variation-settings: "wght" 680, "wdth" 100, "opsz" 72;
	line-height: 0.98;
	letter-spacing: -0.035em;
	max-width: 12ch;
	text-wrap: balance;
}
.pea-hero__title em { font-style: normal; color: var(--o-700); }

.pea-hero__lead {
	font-size: clamp(1.08rem, 1.35vw, 1.35rem);
	line-height: 1.5;
	color: var(--muted);
	max-width: 42ch;
}

.pea-hero__cta {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: fit-content;
	gap: 7px;
	margin-top: clamp(26px, 3vw, 40px);
}
.pea-hero__cta .pea-btn {
	--bevel: 8px;
	font-family: var(--f-text);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: none;
	padding: 16px 24px;
	min-height: 52px;
	box-shadow: 0 10px 24px -18px rgba(20, 17, 15, 0.55);
}
/* En hover el fondo pasa a naranja: con texto blanco daria 3,56:1. En tinta
   sube a 5,28:1. Acotado al hero; el resto de secciones se revisara en su turno. */
.pea-hero__cta .pea-btn:hover,
.pea-hero__cta .pea-btn:focus-visible { color: var(--ink); }

.pea-hero__cta .pea-link {
	font-family: var(--f-text);
	font-size: 0.95rem;
	font-weight: 650;
	letter-spacing: 0;
	text-transform: none;
	color: var(--o-700);
	background: rgba(240, 124, 43, 0.10);
	border: 1px solid rgba(194, 65, 12, 0.28);
	padding: 10px 14px;
	--bevel: 7px;
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		var(--bevel) 100%,
		0 calc(100% - var(--bevel))
	);
	transition: background-color 220ms var(--e-out), color 220ms var(--e-out);
}

.pea-hero__cta .pea-link:hover {
	background: var(--o-500);
	color: var(--ink);
}


.pea-hero__note {
	margin-top: 16px;
	font-size: 0.9rem;
	color: var(--muted);
}

/* La ventana sangra por la derecha */
.pea-hero__stage {
	position: relative;
	margin-right: calc(var(--gut) * -1);
	transform: translateX(-28px);
}

.pea-hero__image {
	display: block;
	width: 100%;
	max-width: 860px;
	height: auto;
	margin-left: auto;
	object-fit: contain;
	transform-origin: center;
	will-change: transform;
	animation: pea-hero-float 8s ease-in-out infinite;
}

@keyframes pea-hero-float {
	0%, 100% {
		transform: translate3d(0, 0, 0) scale(1);
	}
	50% {
		transform: translate3d(0, -18px, 0) scale(1.02);
	}
}

@media (max-width: 560px) {
	.pea-hero__image {
		animation-name: pea-hero-float-mobile;
		animation-duration: 10s;
	}

	@keyframes pea-hero-float-mobile {
		0%, 100% {
			transform: translate3d(0, 0, 0);
		}
		50% {
			transform: translate3d(0, -3px, 0);
		}
	}
}

/* --- 9b. Escena de dispositivos del hero ---------------------------------
   Composicion propia. Excepcion justificada a la regla de radio cero: los
   aparatos tienen esquinas redondeadas y sin ellas no leen como aparatos.
   ------------------------------------------------------------------------ */
.pea-shw {
	position: relative;
	padding-top: 34px;
	padding-bottom: clamp(30px, 5vw, 74px);
	padding-left: clamp(28px, 5.5vw, 96px);
}

.pea-shw__desk {
	border-radius: 12px;
	overflow: hidden;
	background: #14110f;
	box-shadow:
		0 2px 4px rgba(20, 17, 15, 0.06),
		0 22px 40px -18px rgba(20, 17, 15, 0.30),
		0 60px 90px -50px rgba(20, 17, 15, 0.45);
}
.pea-shw__bar { padding: 12px 15px; background: #1e1a17; border-bottom: 0; }
.pea-shw__screen { aspect-ratio: 16 / 10.4; background: var(--paper); }

/* Movil superpuesto */
.pea-shw__phone {
	position: absolute;
	left: 0; bottom: 0;
	width: clamp(108px, 17.5%, 196px);
	aspect-ratio: 9 / 18.4;
	background: #14110f;
	border-radius: 20px;
	padding: 7px 6px;
	box-shadow:
		0 3px 6px rgba(20, 17, 15, 0.10),
		0 26px 44px -16px rgba(20, 17, 15, 0.40);
	z-index: 2;
}
.pea-shw__phoneScreen {
	height: 100%;
	background: var(--paper);
	border-radius: 14px;
	overflow: hidden;
	padding: 11px 10px;
	display: flex; flex-direction: column; gap: 8px;
}
.pea-shw__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: auto; }

.pea-shw__tag {
	position: absolute;
	top: 0; left: clamp(28px, 5.5vw, 96px);
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--f-text); font-size: 0.8rem;
	font-variation-settings: "wght" 500;
	color: var(--muted);
	z-index: 3;
}
.pea-shw__tag::before {
	content: ""; width: 7px; height: 7px; background: var(--o-500); flex: 0 0 auto;
}

/* Flotacion sutil: da profundidad sin llamar la atencion */
.pea-shw__desk, .pea-shw__phone { will-change: transform; }
.pea-shw__desk  { animation: pea-float 9s ease-in-out infinite; }
.pea-shw__phone { animation: pea-float 9s ease-in-out infinite reverse; }
@keyframes pea-float {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50%      { transform: translate3d(0, -9px, 0); }
}

/* --- Primitivas de la maqueta interior ----------------------------------- */
.pea-sk { display: block; background: var(--rule-2); }
.pea-sk--brand   { width: 46%; height: 7px; background: var(--ink); }
.pea-sk--eyebrow { width: 30%; height: 7px; background: var(--o-500); margin-bottom: 4px; }
.pea-sk--display { height: 15px; background: var(--ink); }
.pea-sk--h       { height: 10px; background: var(--ink); }
.pea-sk--h.light { background: var(--paper); }
.pea-sk--t       { height: 6px; background: rgba(20, 17, 15, 0.26); }
.pea-sk--cta     { width: 108px; height: 26px; background: var(--o-500); margin-top: 6px; }
.pea-sk--cta.sm  { width: 78px; height: 20px; }
.pea-sk--cta.on  { background: var(--paper); }
.pea-sk--img     { width: 100%; background: linear-gradient(145deg, #f0c8a8, #cf7a4e 62%, #a8542c); }
.pea-sk--tile    { aspect-ratio: 1; background: #e6ddd0; }
.pea-sk--tile.alt{ background: var(--ink); }

/* --- La maqueta: abstracta pero disenada --------------------------------- */
.pea-site {
	padding: clamp(16px, 2.4vw, 30px);
	display: grid; gap: clamp(14px, 1.9vw, 26px);
	background: var(--paper);
}
.pea-site__nav { display: flex; align-items: center; gap: 12px; }
.pea-site__mark { width: 56px; height: 9px; background: var(--ink); }
.pea-site__links { display: flex; gap: 9px; margin-left: auto; }
.pea-site__links i { display: block; width: 30px; height: 6px; background: rgba(20, 17, 15, 0.24); }
.pea-site__navcta { width: 52px; height: 20px; background: var(--ink); }

.pea-site__hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(14px, 2vw, 26px); align-items: center; }
.pea-site__heroCopy { display: grid; gap: 8px; align-content: center; }
.pea-site__heroArt {
	display: block; aspect-ratio: 4 / 3.4;
	background: linear-gradient(150deg, #f2d2b4 0%, #e08a52 45%, #b85f31 100%);
	position: relative; overflow: hidden;
}
.pea-site__heroArt::after {
	content: ""; position: absolute; inset: auto 0 0 0; height: 46%;
	background: linear-gradient(to top, rgba(20, 17, 15, 0.28), rgba(20, 17, 15, 0));
}

.pea-site__strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pea-site__strip span { height: 8px; background: rgba(20, 17, 15, 0.16); }

.pea-site__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(9px, 1.2vw, 15px); }
.pea-site__card { display: block; aspect-ratio: 4 / 3.2; position: relative; overflow: hidden; }
.pea-site__card::after {
	content: ""; position: absolute; left: 11px; bottom: 11px; width: 42%; height: 6px;
	background: rgba(250, 247, 242, 0.85);
}
.pea-site__card.c1 { background: linear-gradient(160deg, #ece2d4, #d8caB8); }
.pea-site__card.c1::after { background: rgba(20, 17, 15, 0.55); }
.pea-site__card.c2 { background: var(--ink); }
.pea-site__card.c2::after { background: var(--o-500); }
.pea-site__card.c3 { background: linear-gradient(160deg, #f6b183, #e07f45); }

.pea-site__split { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(14px, 2vw, 24px); align-items: center; }
.pea-site__wide { display: block; aspect-ratio: 16 / 10; background: linear-gradient(140deg, #e3d8c8, #bfae99); }
.pea-site__col { display: grid; gap: 8px; }

.pea-site__band {
	background: var(--ink); padding: clamp(16px, 2.2vw, 28px);
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
}

@media (prefers-reduced-motion: reduce) {
	.pea-shw__desk, .pea-shw__phone { animation: none; }
}

/* --- 10. Demostracion viva (navegador + interfaz propia) ----------------- */
.pea-demo {
	--bevel: var(--bevel-lg);
	position: relative;
	background: var(--ink);
	box-shadow: 0 30px 70px -30px rgba(20, 17, 15, 0.45);
}
.pea-demo__bar {
	display: flex; align-items: center; gap: 10px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--rule-ink);
}
.pea-demo__dots { display: flex; gap: 6px; }
.pea-demo__dots i { width: 9px; height: 9px; background: var(--rule-ink-2); display: block; }
.pea-demo__url {
	flex: 1 1 auto; min-width: 0;
	font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.06em;
	color: var(--muted-ink);
	padding: 5px 9px; background: rgba(250, 247, 242, 0.07);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pea-demo__ctrl {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; gap: 6px;
	font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--paper);
	padding: 6px 10px; min-height: 32px;
	box-shadow: inset 0 0 0 1px var(--rule-ink-2);
}
.pea-demo__ctrl:hover { background: rgba(250, 247, 242, 0.1); }

.pea-demo__screen {
	position: relative;
	aspect-ratio: 16 / 10.5;
	overflow: hidden;
	background: var(--paper);
}
.pea-demo__track {
	position: absolute; inset: 0 0 auto 0;
	will-change: transform;
}
.pea-demo.is-playing .pea-demo__track {
	animation: pea-scroll 26s linear infinite alternate;
}
@keyframes pea-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(0, -52%, 0); }
}

.pea-demo__tag {
	position: absolute; right: 12px; bottom: 12px; z-index: 4;
	display: inline-flex; align-items: center; gap: 7px;
	font-family: var(--f-mono); font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
	background: var(--ink); color: var(--paper);
	padding: 7px 10px;
	--bevel: 7px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)));
}
.pea-demo__tag::before { content: ""; width: 6px; height: 6px; background: var(--o-500); }

/* La interfaz que vive dentro: construida con nuestro CSS, no es un cliente */
.pea-ui { padding: 22px; display: grid; gap: 18px; font-family: var(--f-text); }
.pea-ui__nav { display: flex; align-items: center; gap: 14px; }
.pea-ui__brand { width: 62px; height: 9px; background: var(--ink); }
.pea-ui__links { display: flex; gap: 9px; margin-left: auto; }
.pea-ui__links i { display: block; width: 34px; height: 6px; background: var(--rule-2); }
.pea-ui__hero { display: grid; gap: 10px; }
.pea-ui__h { height: 26px; background: var(--ink); width: 88%; }
.pea-ui__h.s { width: 58%; }
.pea-ui__p { height: 8px; background: var(--rule-2); width: 72%; }
.pea-ui__p.s { width: 46%; }
.pea-ui__btn { width: 116px; height: 30px; background: var(--o-500); margin-top: 4px; }
.pea-ui__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pea-ui__card { background: var(--paper-2); aspect-ratio: 4 / 3; position: relative; }
.pea-ui__card::after { content: ""; position: absolute; left: 10px; bottom: 10px; width: 30px; height: 5px; background: var(--rule-2); }
.pea-ui__card.o { background: var(--ink); }
.pea-ui__card.o::after { background: var(--o-500); }
.pea-ui__band { height: 96px; background: var(--ink); display: grid; place-content: center; }
.pea-ui__band i { display: block; width: 150px; height: 12px; background: var(--o-500); }
.pea-ui__split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 12px; align-items: center; }
.pea-ui__img { background: var(--rule-2); aspect-ratio: 3 / 2; }

/* Metricas reales medidas en el navegador del visitante */
.pea-vitals {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 2px; background: var(--rule-2);
	box-shadow: 0 0 0 2px var(--rule-2);
}
.pea-vitals__cell { background: var(--paper); padding: var(--s2); display: grid; gap: 6px; }
.pea-dark .pea-vitals__cell { background: var(--ink); }
.pea-vitals__v {
	font-family: var(--f-mono); font-size: clamp(1.5rem, 2.4vw, 2.2rem);
	font-variation-settings: "wght" 500; font-variant-numeric: tabular-nums;
	line-height: 1;
}
.pea-vitals__v[data-state="good"] { color: var(--o-700); }
.pea-dark .pea-vitals__v[data-state="good"] { color: var(--o-500); }

/* --- 11. Web Design & Development (dominante) ---------------------------- */
.pea-wd__probs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2px; background: var(--rule-2); box-shadow: 0 0 0 2px var(--rule-2); }
.pea-wd__prob { background: var(--paper); padding: var(--s3) var(--s2); display: grid; gap: var(--s1); align-content: start; }
.pea-wd__prob q { font-family: var(--f-display); font-size: clamp(1.15rem, 1.8vw, 1.55rem); font-variation-settings: "wght" 600, "wdth" 95; letter-spacing: -0.025em; line-height: 1.15; quotes: "\201C" "\201D"; display: block; }
.pea-wd__prob p { color: var(--muted); font-size: 0.96rem; margin: 0; }

.pea-deliver { border-top: 2px solid var(--rule-2); }
.pea-deliver__row {
	display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--s2); padding-block: var(--s3);
	border-bottom: 1px solid var(--rule);
	align-items: start;
	transition: padding-left 340ms var(--e-out);
}
.pea-deliver__row:hover { padding-left: 12px; }
.pea-deliver__n { color: var(--o-700); padding-top: 5px; }
.pea-deliver__d { color: var(--muted); margin: 0; }

@media (max-width: 860px) {
	.pea-deliver__row { grid-template-columns: 48px minmax(0, 1fr); }
	.pea-deliver__d { grid-column: 2; }
}

/* Comparador antes / despues */
.pea-comp { position: relative; --bevel: var(--bevel-lg); overflow: hidden; background: var(--paper); }
/* La proporcion nace de las imagenes reales (1448 x 1086): asi no se
   recorta el pie del sitio como ocurria con el 16/9 anterior. */
.pea-comp__pane { position: relative; aspect-ratio: 1448 / 1086; container-type: inline-size; }

.pea-comp__actions {
	display: flex;
	justify-content: flex-end;
	width: min(100%, 1180px);
	margin: 10px auto 0;
}

.pea-comp__detail {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 42px;
	padding: 9px 15px;
	border: 1px solid rgba(240, 124, 43, .32);
	border-radius: 999px;
	background: rgba(255, 255, 255, .68);
	color: var(--ink);
	font-family: var(--f-text);
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		0 10px 28px -24px rgba(20, 17, 15, .45);
	transition:
		background-color .25s ease,
		border-color .25s ease,
		transform .25s ease;
}

.pea-comp__detailIcon {
	color: var(--o-500);
	font-size: 1.15rem;
	line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
	.pea-comp__detail:hover {
		background: rgba(240, 124, 43, .08);
		border-color: rgba(240, 124, 43, .58);
		transform: translateY(-1px);
	}
}

/* Piezas de proceso */
.pea-proc { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s2); }
.pea-proc__item { --bevel: 16px; background: var(--paper-2); padding: var(--s2); display: grid; gap: var(--s1); align-content: start; min-height: 190px; }
.pea-dark .pea-proc__item { background: var(--ink-2); }
.pea-proc__art { height: 84px; position: relative; overflow: hidden; background: var(--paper); }
.pea-dark .pea-proc__art { background: var(--ink-3); }

/* Banda de plazo */
.pea-band {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3);
	border-block: 2px solid var(--rule-2);
	padding-block: var(--s2);
}
.pea-band__item { display: grid; gap: 4px; }
.pea-band__v { font-family: var(--f-display); font-size: clamp(1.5rem, 2.6vw, 2.4rem); font-variation-settings: "wght" 650, "wdth" 92; letter-spacing: -0.035em; }

/* Prueba social: carrusel con controles obligatorios */
.pea-proof { display: grid; gap: var(--s2); }
.pea-proof__viewport { overflow: hidden; }
.pea-proof__track { display: flex; align-items: center; gap: clamp(28px, 5vw, 72px); width: max-content; }
.pea-proof__track img { filter: grayscale(1); opacity: 0.72; transition: opacity 300ms var(--e-out), filter 300ms var(--e-out); }
.pea-proof__track img:hover { filter: none; opacity: 1; }
.pea-proof.is-playing .pea-proof__track { animation: pea-slide 42s linear infinite; }
.pea-proof:hover .pea-proof__track,
.pea-proof:focus-within .pea-proof__track { animation-play-state: paused; }
@keyframes pea-slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.pea-proof__ctrl { display: flex; gap: 8px; }
.pea-proof__ctrl button { width: 44px; height: 44px; display: grid; place-content: center; box-shadow: inset 0 0 0 1px var(--rule-2); }
.pea-proof__ctrl button:hover { background: var(--paper-2); }
@media (prefers-reduced-motion: reduce) { .pea-proof.is-playing .pea-proof__track { animation: none; } }
@media (max-width: 720px) {
	.pea-proof__track { width: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); animation: none !important; }
	.pea-proof__ctrl { display: none; }
}

/* Trabajo */
.pea-work { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s3) var(--s2); }
.pea-work__item { grid-column: span 6; }
.pea-work__item--lead { grid-column: span 12; }
.pea-work__item:nth-child(3) { margin-top: clamp(0px, 4vw, 72px); }
.pea-work__link { display: grid; gap: var(--s2); }
.pea-work__link .pea-demo__screen { aspect-ratio: 16 / 10; }
.pea-work__link img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--e-out); }
.pea-work__link:hover img { transform: scale(1.03); }
.pea-work__body { display: grid; gap: 8px; }
@media (max-width: 860px) { .pea-work__item, .pea-work__item--lead { grid-column: span 12; } .pea-work__item:nth-child(3) { margin-top: 0; } }

/* Equipo */
.pea-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s3) var(--s2); }
.pea-person__frame { display: block; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-2); }
.pea-person__frame img { width: 100%; height: 100%; object-fit: cover; }

/* --- 11b. Web Design: ritmo en cuatro tiempos ---------------------------
   A banda oscura (problema) · B entregables (que recibe) · C demostracion ·
   D plazo y salida. El contraste entre bandas es lo que da ritmo.
   ------------------------------------------------------------------------ */
.pea-wd { padding-block: 0; }
.pea-wd__bleed { padding-block: clamp(76px, 9vw, 150px); }
.pea-wd__part  { padding-block: clamp(72px, 8.5vw, 140px); }
.pea-wd__part + .pea-wd__part { padding-top: 0; }

.pea-wd__head {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.75fr);
	gap: clamp(20px, 3vw, 56px);
	align-items: end;
	margin-bottom: clamp(32px, 3.5vw, 56px);
}
.pea-wd__head--light { align-items: baseline; }
@media (max-width: 900px) { .pea-wd__head { grid-template-columns: 1fr; align-items: start; } }

.pea-wd__kicker {
	display: inline-flex; align-items: center; gap: 12px;
	margin-bottom: clamp(16px, 2vw, 26px);
	font-family: var(--f-text); font-size: 0.9rem;
	font-variation-settings: "wght" 500;
	color: var(--o-500);
}
.pea-wd__kickerBar { width: 30px; height: 3px; background: var(--o-500); flex: 0 0 auto; }

.pea-wd__title {
	font-family: var(--f-display);
	font-size: clamp(2.1rem, 4.3vw, 4.3rem);
	font-variation-settings: "wght" 660, "wdth" 100, "opsz" 72;
	letter-spacing: -0.035em;
	line-height: 0.96;
	max-width: 22ch;
}
.pea-wd__title--sm { font-size: clamp(1.85rem, 3.3vw, 3.3rem); max-width: 19ch; }
.pea-wd__aside { color: var(--muted); max-width: 40ch; font-size: 1.03rem; line-height: 1.55; }

/* A · Problemas ----------------------------------------------------------- */
.pea-probs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
}
.pea-prob {
	padding: clamp(24px, 2.6vw, 40px) clamp(20px, 2.4vw, 40px);
	display: grid; gap: clamp(14px, 1.6vw, 22px); align-content: start;
	border-left: 1px solid var(--rule-ink);
}
.pea-prob:first-child { border-left: 0; padding-left: 0; }
.pea-prob__n {
	font-family: var(--f-display);
	font-size: clamp(2.6rem, 4.4vw, 4.2rem);
	font-variation-settings: "wght" 700, "wdth" 88;
	line-height: 0.8;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--o-500);
	letter-spacing: -0.04em;
}
.pea-prob__q {
	quotes: "\201C" "\201D";
	font-family: var(--f-display);
	font-size: clamp(1.2rem, 1.9vw, 1.72rem);
	font-variation-settings: "wght" 600, "wdth" 94;
	letter-spacing: -0.03em;
	line-height: 1.14;
	color: var(--paper);
}
.pea-prob__a { color: var(--muted-ink); font-size: 0.97rem; line-height: 1.55; margin: 0; }

@media (max-width: 900px) {
	.pea-probs { grid-template-columns: 1fr; }
	.pea-prob { border-left: 0; border-top: 1px solid var(--rule-ink); padding-inline: 0; }
	.pea-prob:first-child { border-top: 0; padding-top: 0; }
}

/* ============================================================
   B · ENTREGABLES — placa glass + plano grafito
   Ámbito 100% local (.pea-deliv*). Bisel: inferior izquierdo.
   Cuadrícula interior: --pea-grid (naranja suave).
   Borde exterior: --pea-hair (neutro).
   ============================================================ */

.pea-deliv {
	--pea-off: 6px;
	--pea-bevel: 30px;
	--pea-hair: rgba(20, 17, 15, .10);
	--pea-grid: rgba(240, 124, 43, .48);
	--pea-ink-2: #57504a;
	--pea-graphite: #26211e;
	position: relative;
	padding: 0 0 var(--pea-off) var(--pea-off);
}

/* Plano grafito secundario, asoma por el inferior izquierdo */
.pea-deliv__plane {
	position: absolute;
	inset: var(--pea-off) var(--pea-off) 0 0;
	z-index: 0;
	border-radius: 14px;
	background:
		linear-gradient(135deg, #2a2521 0%, var(--pea-graphite) 64%, #1b1715 100%);
	box-shadow: 0 18px 44px -34px rgba(20, 17, 15, .58);
	opacity: .96;
}

/* Superficie principal clara translúcida */
.pea-deliv__surface {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: clamp(28px, 3.6vw, 64px);
	padding: clamp(26px, 3vw, 48px);
	padding-bottom: clamp(52px, 4vw, 68px);
	border: 1px solid var(--pea-hair);
	border-radius: 14px;
	background:
		radial-gradient(86% 105% at 4% 0%, rgba(240, 124, 43, .16) 0%, rgba(240, 124, 43, .055) 25%, rgba(240, 124, 43, 0) 52%),
		linear-gradient(135deg, rgba(255, 255, 255, .98) 0%, rgba(250, 247, 242, .92) 46%, rgba(241, 236, 227, .78) 100%),
		var(--paper-2);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .92),
		inset 1px 0 0 rgba(255, 255, 255, .50),
		0 28px 70px -52px rgba(20, 17, 15, .42);
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		var(--pea-bevel) 100%,
		0 calc(100% - var(--pea-bevel))
	);
}

/* Línea naranja luminosa — única aparición del acento */
.pea-deliv__surface::before {
	content: "";
	position: absolute;
	top: 0;
	left: clamp(26px, 3vw, 48px);
	width: min(280px, 52%);
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(
		90deg,
		rgba(240, 124, 43, .98) 0%,
		rgba(240, 124, 43, .72) 34%,
		rgba(240, 124, 43, 0) 100%
	);
	box-shadow: 0 0 12px rgba(240, 124, 43, .30);
	pointer-events: none;
}

/* Encabezado en columna izquierda (override local, no global) */
.pea-deliv__head.pea-wd__head {
	display: block;
	align-self: start;
	margin: 0;
	max-width: 38ch;
}

.pea-deliv__head .pea-wd__aside {
	margin: 14px 0 0;
}

/* Grid de módulos */
.pea-deliv__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
}

.pea-deliv__item {
    position: relative;
    margin: 0;
    padding: 20px 24px;
    border-top: 1px solid var(--pea-grid);
    transition:
        background-color .28s ease,
        box-shadow .28s ease;
}

.pea-deliv__item:nth-child(-n + 2) {
	border-top: 0;
	padding-top: 0;
}

.pea-deliv__item:nth-child(2n) {
	border-left: 1px solid var(--pea-grid);
}

.pea-deliv__item:nth-child(2n + 1) {
	padding-left: 0;
}

.pea-deliv__n {
	display: block;
	margin-bottom: 10px;
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: .14em;
	line-height: 1;
	color: var(--o-700);
	opacity: .72;
}

.pea-deliv__t {
    margin: 0 0 6px;
    font-family: var(--f-display);
    font-size: clamp(16px, 1.3vw, 19px);
    font-weight: 500;
    line-height: 1.25;
    color: var(--ink);
    transition: transform .28s ease;
}

.pea-deliv__d {
	margin: 0;
	font-family: var(--f-text);
	font-size: 14px;
	line-height: 1.55;
	color: var(--pea-ink-2);
}

@media (hover: hover) and (pointer: fine) {

    .pea-deliv__item:hover {
        background-color: rgba(240, 124, 43, .055);
        box-shadow: inset 0 0 28px rgba(240, 124, 43, .035);
    }

    .pea-deliv__item:hover .pea-deliv__n {
        opacity: 1;
    }

    .pea-deliv__item:hover .pea-deliv__t {
        transform: translateX(3px);
    }

}

/* ---------- TABLET 620–1080 ---------- */
@media (max-width: 1080px) {
	.pea-deliv__surface {
		grid-template-columns: minmax(0, 1fr);
		gap: 30px;
	}

	.pea-deliv__head.pea-wd__head {
		max-width: 60ch;
	}
}

/* ---------- MOBILE < 620 ---------- */
@media (max-width: 620px) {
	.pea-deliv {
		--pea-off: 10px;
		--pea-bevel: 26px;
	}

	.pea-deliv__surface {
		padding: 22px 20px 38px;
		gap: 22px;
	}

	.pea-deliv__surface::before {
		left: 20px;
		width: 120px;
	}

	.pea-deliv__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.pea-deliv__item {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 12px;
		padding: 14px 0;
		border-top: 1px solid var(--pea-grid);
	}

	.pea-deliv__item:nth-child(2n) {
		border-left: 0;
	}

	.pea-deliv__item:nth-child(-n + 2) {
		border-top: 1px solid var(--pea-grid);
		padding-top: 14px;
	}

	.pea-deliv__item:first-child {
		border-top: 0;
		padding-top: 0;
	}

	.pea-deliv__n {
		grid-row: 1 / 3;
		margin: 0;
		padding-top: 3px;
	}

	.pea-deliv__t {
		grid-column: 2;
		font-size: 16px;
	}

	.pea-deliv__d {
		grid-column: 2;
		font-size: 13.5px;
		line-height: 1.5;
	}
}

/* C · Demostración -------------------------------------------------------- */
/* Tablet y movil no reciben ningun salto: 95vw escala con el dispositivo
   (a 768 px la pieza pasa de 707 a 730, un 3 %) y por debajo de 560 px manda
   el bloque movil de mas abajo, que la lleva a ancho completo con sangria. */

.pea-comp {
	position: relative; overflow: hidden;
	/* Protagonista de la seccion: se sale del canal de lectura y ocupa casi
	   todo el ancho util.

	   El ancho ya NO depende del alto de la ventana. Antes lo hacia, y en
	   pantallas anchas ese termino ganaba el min(): la pieza se quedaba
	   pequena y, combinada con la sangria negativa, aparecia corrida hacia la
	   izquierda. El tope de 1680 px evita ampliar la captura (1448 px reales)
	   mas alla de lo que aguanta sin perder nitidez. */
	--w: min(95vw, 1680px);
	width: var(--w);
	max-width: none;
	/* Centrado que funciona aunque la pieza sea mas ancha que su contenedor:
	   con margin-inline auto el sobrante se iria todo a la derecha. */
	margin-inline: calc(50% - var(--w) / 2);
	border-radius: 14px;
	background: var(--ink);
	box-shadow: 0 3px 8px rgba(20, 17, 15, 0.07), 0 34px 60px -34px rgba(20, 17, 15, 0.44);
}

@media (min-width: 1081px) {
	/* La pieza es mucho mas ancha que el canal de lectura: el titulo y el
	   texto de apoyo siguen respirando, pero quedan subordinados a ella, y su
	   tamano no debe chocar arriba ni dejar hueco abajo. */
	.pea-wd__part:has(.pea-comp) { padding-bottom: clamp(56px, 6vw, 96px); }
	.pea-wd__part:has(.pea-comp) .pea-wd__head { margin-bottom: clamp(26px, 2.6vw, 42px); }
}


/* Antes: barato y saturado. Medidas en cqw = escala con el panel. */
.pea-bad { position: absolute; inset: 0; background: #ffffff; overflow: hidden; font-size: 0; }
.pea-bad__promo { height: 4.5%; background: #d92c2c; }
.pea-bad__nav { height: 8.5%; display: flex; align-items: center; gap: 1.5cqw; padding: 0 2.5cqw; background: #1b3a8f; }
.pea-bad__logo { width: 9cqw; height: 34%; background: #ffd400; }
.pea-bad__menu { display: flex; gap: 0.8cqw; margin-left: auto; }
.pea-bad__menu i { display: block; width: 2.6cqw; height: 0.55cqw; background: rgba(255, 255, 255, 0.72); }
.pea-bad__hero { position: relative; height: 27%; }
.pea-bad__photo { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, #c8c8c8 0 1cqw, #bdbdbd 1cqw 2cqw); }
.pea-bad__over { position: absolute; inset: 0; display: grid; align-content: center; gap: 0.6cqw; padding: 0 4cqw; }
.pea-bad__ht { display: block; height: 1.15cqw; background: #ffffff; box-shadow: 0.12cqw 0.12cqw 0 #333; }
.pea-bad__pill { display: inline-block; width: 8cqw; height: 2cqw; border-radius: 1cqw; margin-top: 0.7cqw; }
.pea-bad__pill.a { background: #d92c2c; }
.pea-bad__pill.b { background: #1b3a8f; margin-left: 0.7cqw; }
.pea-bad__text { padding: 2.4cqw 3cqw 0; display: grid; gap: 0.42cqw; }
.pea-bad__text span { display: block; height: 0.5cqw; background: #9a9a9a; }
.pea-bad__grid { padding: 2.4cqw 3cqw; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7cqw; }
.pea-bad__grid span { display: block; aspect-ratio: 1; background: #ededed; border: 1px solid #cfcfcf; }
.pea-bad__popup {
	position: absolute; right: 3cqw; bottom: 4cqw; width: 30cqw; padding: 1.4cqw;
	background: #fff; border: 1px solid #cfcfcf; box-shadow: 0 0.6cqw 1.6cqw rgba(0,0,0,.28);
	display: grid; gap: 0.7cqw;
}
.pea-bad__x { position: absolute; right: 0.7cqw; top: 0.5cqw; width: 1cqw; height: 1cqw; background: #9a9a9a; }
.pea-bad__pl { display: block; height: 0.7cqw; background: #b4b4b4; }
.pea-bad__pcta { display: block; width: 60%; height: 2cqw; background: #21a44b; }
.pea-bad__badge { position: absolute; right: 2.5cqw; top: 11%; width: 5cqw; height: 5cqw; border-radius: 50%; background: #ffd400; box-shadow: 0 0.2cqw 0.6cqw rgba(0,0,0,.25); }

/* Despues: nuestro criterio. Misma escala relativa que el lado "antes". */
.pea-good { position: absolute; inset: 0; background: var(--paper); padding: 3.2cqw; display: grid; gap: 2.6cqw; align-content: start; }
.pea-good__nav { display: flex; align-items: center; gap: 1.4cqw; }
.pea-good__logo { width: 7cqw; height: 1.1cqw; background: var(--ink); }
.pea-good__menu { display: flex; gap: 1cqw; margin-left: auto; }
.pea-good__menu i { display: block; width: 3cqw; height: 0.55cqw; background: rgba(20, 17, 15, 0.24); }
.pea-good__navcta { width: 5.6cqw; height: 2.1cqw; background: var(--ink); }
.pea-good__hero { display: grid; grid-template-columns: 1fr 0.85fr; gap: 2.6cqw; align-items: center; }
.pea-good__copy { display: grid; gap: 0.9cqw; }
.pea-good__eyebrow { width: 30%; height: 0.7cqw; background: var(--o-500); }
.pea-good__h { display: block; height: 1.9cqw; background: var(--ink); }
.pea-good__t { display: block; height: 0.6cqw; background: rgba(20, 17, 15, 0.26); }
.pea-good__cta { display: block; width: 11cqw; height: 2.7cqw; background: var(--o-500); margin-top: 0.6cqw; }
.pea-good__art { display: block; aspect-ratio: 16/10; background: linear-gradient(150deg, #f2d2b4, #e08a52 46%, #b85f31); }
.pea-good__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.pea-good__card { display: block; aspect-ratio: 4/2.6; }
.pea-good__card.a { background: linear-gradient(160deg, #ece2d4, #d6c7b3); }
.pea-good__card.b { background: var(--ink); }
.pea-good__card.c { background: linear-gradient(160deg, #f6b183, #e07f45); }
.pea-good__band { background: var(--ink); padding: 1.8cqw; }
.pea-good__bandBar { display: block; width: 38%; height: 1.1cqw; background: var(--o-500); }

/* Panel de metricas ------------------------------------------------------- */
.pea-stats {
	margin-top: clamp(22px, 2.6vw, 38px);
	background: var(--ink); color: var(--paper);
	border-radius: 14px;
	padding: clamp(24px, 3vw, 44px);
	display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(22px, 3vw, 52px); align-items: center;
}
.pea-stats__kicker {
	display: block; font-family: var(--f-text); font-size: 0.9rem;
	font-variation-settings: "wght" 550; color: var(--o-500); margin-bottom: 10px;
}
.pea-stats__note { color: var(--muted-ink); font-size: 0.97rem; line-height: 1.55; margin: 0; max-width: 34ch; }
.pea-stats__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); }
.pea-stat { display: grid; gap: 8px; }
.pea-stat__v {
	font-family: var(--f-display);
	font-size: clamp(1.9rem, 3.1vw, 3rem);
	font-variation-settings: "wght" 640, "wdth" 92;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.04em; line-height: 1;
}
.pea-stat__v[data-state="good"] { color: var(--o-500); }
.pea-stat__k { font-family: var(--f-text); font-size: 0.86rem; color: var(--muted-ink); line-height: 1.35; }

@media (max-width: 900px) {
	.pea-stats { grid-template-columns: 1fr; }
	.pea-stats__row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .pea-stats__row { grid-template-columns: 1fr; } }

/* D · Plazo y salida ------------------------------------------------------ */
.pea-steps {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.4vw, 40px);
	border-top: 2px solid var(--rule-2);
	padding-top: clamp(22px, 2.6vw, 38px);
}
.pea-step { display: grid; gap: 8px; align-content: start; position: relative; }
.pea-step__i {
	font-family: var(--f-display); font-size: clamp(1.8rem, 2.8vw, 2.6rem);
	font-variation-settings: "wght" 700, "wdth" 88; line-height: 0.85;
	color: transparent; -webkit-text-stroke: 1.4px var(--o-600);
	letter-spacing: -0.04em; margin-bottom: 4px;
}
.pea-step__t {
	font-family: var(--f-display); font-size: clamp(1.02rem, 1.4vw, 1.3rem);
	font-variation-settings: "wght" 640, "wdth" 95; letter-spacing: -0.025em;
}
.pea-step__d { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 760px) { .pea-steps { grid-template-columns: 1fr; gap: 24px; } }

.pea-wd__out {
	margin-top: clamp(30px, 3.4vw, 52px);
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: clamp(18px, 2.4vw, 36px);
	background: var(--paper-2);
	--bevel: 22px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)));
	padding: clamp(20px, 2.2vw, 34px) clamp(24px, 3vw, 44px);
}

/* La costura entre el cierre de Web Design y el configurador sumaba el
   padding inferior del bloque (140 px) mas el superior de la seccion naranja
   (168 px): mas de 300 px de vacio. Se corrige en su origen, a los dos lados,
   sin tocar el contenido de ninguna de las dos secciones. */
.pea-wd__part:has(.pea-wd__out) { padding-bottom: clamp(20px, 2vw, 34px); }
#configurador { padding-top: clamp(34px, 3.6vw, 58px); }

.pea-wd__outT {
	font-family: var(--f-display); font-size: clamp(1.3rem, 2.3vw, 2.1rem);
	font-variation-settings: "wght" 650, "wdth" 92; letter-spacing: -0.035em;
	/* Heredaba el interlineado del cuerpo (1.5) y en dos lineas abria un aire
	   que no le corresponde a un titular. */
	line-height: 1.06;
	margin: 0; max-width: 20ch;
}
.pea-wd__outCta { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2vw, 28px); }
.pea-wd__outCta .pea-btn:hover, .pea-wd__outCta .pea-btn:focus-visible { color: var(--ink); }

/* --- 12. Configurador · LIVE PROJECT PREVIEW ------------------------------
   Izquierda (~38%): seis preguntas compactas, editoriales.
   Derecha (~62%): la pieza arquitectonica del Hero -blanco calido, planos
   grafito, vidrio suspendido, luz naranja fina- con una miniweb real dentro,
   y bajo ella la banda de briefing.

   Todo lo que se ve dentro de la miniweb esta hecho con HTML y CSS: los
   objetos (lampara, silla, vaso, manta) son composiciones de cuatro capas.

   NOTA: .pea-opt / .pea-opts / .pea-range son COMPARTIDAS con el filtro de
   sectores de archive-pea3_case.php. Aqui solo se ajustan con ambito
   .pea-lpp para no alterar aquella pantalla.
   ------------------------------------------------------------------------ */

/* Base heredada por el filtro de casos: no modificar sin revisarlo */
.pea-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pea-opt {
	position: relative;
	--bevel: 9px;
	padding: 12px 16px; min-height: 46px;
	display: inline-flex; align-items: center;
	font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em;
	background: var(--paper-2);
	box-shadow: inset 0 0 0 2px var(--rule-2);
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)));
	transition: box-shadow 240ms var(--e-out), background-color 240ms var(--e-out);
}
.pea-opt:hover { box-shadow: inset 0 0 0 2px var(--ink); background: var(--white); }
.pea-opt[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.pea-opt[aria-pressed="true"] > .pea-live { opacity: 1; }

.pea-range { display: grid; gap: 8px; }
.pea-range input[type="range"] { width: 100%; accent-color: var(--o-600); height: 34px; }
.pea-range__out { font-family: var(--f-mono); font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* =========================================================================
   12.1  Estructura: ~20 configuracion / ~63 preview / ~17 briefing
   La miniweb es la pieza dominante; a su derecha, la especificacion.
   ========================================================================= */
/* El encabezado de seccion deja un margen generoso pensado para bloques de
   texto. Aqui la herramienta debe leerse como continuacion del titulo, no
   como un elemento suelto: se recupera parte de ese aire. */
.pea-lpp { margin-top: clamp(-58px, -3.6vw, -34px); }

.pea-lpp__grid {
	display: grid;
	grid-template-columns:
		minmax(164px, 0.215fr)  /* preguntas: dos, apiladas y compactas */
		minmax(0, 1fr)          /* Live Project Preview: la pieza dominante */
		minmax(168px, 0.225fr); /* briefing */
	gap: clamp(12px, 1.35vw, 22px);
	align-items: start;
}
/* Las tres columnas arrancan a la misma altura optica: el titulo de la
   primera pregunta, el borde del navegador y el rotulo del briefing. */
.pea-lpp__form { min-width: 0; padding-top: 15px; }

/* =========================================================================
   12.2  Las seis preguntas: densas pero con aire
   ========================================================================= */
.pea-lpp__steps { display: grid; }

.pea-lpp__q {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 9px;
	row-gap: 7px;
	padding-block: clamp(14px, 1.3vw, 20px);
	border-top: 1px solid rgba(20, 17, 15, 0.14);
}
.pea-lpp__q:first-child { border-top: 0; padding-top: 0; }

.pea-lpp__qNum {
	grid-row: 1 / span 2;
	font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em;
	color: rgba(20, 17, 15, 0.42);
	padding-top: 0.34em;
	font-variant-numeric: tabular-nums;
}
.pea-lpp__qLabel {
	font-family: var(--f-display);
	font-size: clamp(0.95rem, 0.95vw, 1.06rem);
	font-variation-settings: "wght" 600, "wdth" 94;
	letter-spacing: -0.025em; line-height: 1.18;
	color: var(--ink);
	text-wrap: balance;
}
.pea-lpp__q > .pea-opts { grid-column: 2; }

/* Opciones: pastillas, no cajas */
/* Con solo dos preguntas, las opciones se leen en vertical: ocupan menos
   ancho y el preview se queda con el espacio. */
.pea-lpp .pea-opts {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
.pea-lpp .pea-opt {
	clip-path: none;
	border-radius: 999px;
	flex: 0 0 auto;                      /* ancho real, sin estirar */
	width: auto; max-width: 100%;
	font-family: var(--f-text); font-size: 0.8rem; letter-spacing: -0.008em;
	padding: 9px 14px; min-height: 44px;
	line-height: 1.2; text-align: left;
	background: rgba(255, 255, 255, 0.72);
	color: var(--ink);
	box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.12);
	transition: background-color 240ms var(--e-out), color 240ms var(--e-out),
	            box-shadow 240ms var(--e-out);
}
.pea-lpp .pea-opt:hover { background: var(--white); box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.32); }
.pea-lpp .pea-opt[aria-pressed="true"] {
	background: var(--ink); color: var(--paper);
	box-shadow: 0 6px 16px -8px rgba(20, 17, 15, 0.7);
}
.pea-lpp .pea-opt:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.pea-lpp .pea-opt > .pea-live { display: none; }




/* Asistente: oculto en escritorio */
.pea-lpp__wiz,
.pea-lpp__wizNav { display: none; }

/* =========================================================================
   12.3  La pieza
   ========================================================================= */
.pea-stage {
	position: relative;
	container-type: inline-size;
	isolation: isolate;
	overflow: hidden;
	z-index: 1;
	border-radius: 22px;
	/* Borde exterior minimo: lo justo para separar el dispositivo del
	   fondo naranja, sin encerrarlo en una tarjeta. */
	padding: clamp(9px, 1.05cqw, 14px);
	padding-bottom: clamp(11px, 1.3cqw, 17px);
	perspective: 1600px;
	background:
		radial-gradient(118% 86% at 84% 2%, rgba(240, 124, 43, 0.20), rgba(240, 124, 43, 0) 58%),
		linear-gradient(166deg, #fffdfa 0%, #f6efe6 52%, #ede4d8 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 2px 6px rgba(20, 17, 15, 0.06),
		0 38px 76px -46px rgba(20, 17, 15, 0.55);
}

.pea-stage__arc {
	position: absolute; z-index: 1; pointer-events: none;
	right: -18%; top: 2%; width: 50%; aspect-ratio: 1; border-radius: 50%;
	background: conic-gradient(from 132deg,
		rgba(240, 124, 43, 0) 0deg,
		rgba(240, 124, 43, 0.95) 46deg,
		rgba(255, 178, 112, 0.9) 74deg,
		rgba(240, 124, 43, 0) 128deg);
	-webkit-mask: radial-gradient(circle, transparent 63%, #000 64%, #000 67%, transparent 68%);
	mask: radial-gradient(circle, transparent 63%, #000 64%, #000 67%, transparent 68%);
}
.pea-stage__beam {
	position: absolute; z-index: 1; pointer-events: none;
	left: -4%; right: 78%; top: 62%; height: 2px;
	background: linear-gradient(90deg,
		rgba(240, 124, 43, 0) 0%, rgba(240, 124, 43, 0.85) 42%,
		rgba(255, 190, 130, 0.95) 62%, rgba(240, 124, 43, 0) 100%);
	filter: blur(0.4px);
}

/* --- Plano principal ----------------------------------------------------- */
.pea-web {
	position: relative; z-index: 3;
	border-radius: 13px; overflow: hidden;
	background: var(--white);
	margin-right: 0;
	transform: rotateY(-2.4deg) rotateX(0.5deg);
	transform-origin: 60% 50%;
	box-shadow:
		inset 0 0 0 1px rgba(20, 17, 15, 0.08),
		0 3px 8px rgba(20, 17, 15, 0.08),
		0 32px 58px -32px rgba(20, 17, 15, 0.5);
	transition: margin-left 420ms var(--e-out);
}
.pea-stage[data-extras]:not([data-extras=""]) .pea-web { margin-left: 17%; }
/* Pago y newsletter viven dentro del sitio: no reservan carril */
.pea-stage[data-extras="pagos"] .pea-web,
.pea-stage[data-extras="email"] .pea-web,
.pea-stage[data-extras="pagos email"] .pea-web,
.pea-stage[data-extras="email pagos"] .pea-web { margin-left: 0; }

.pea-web__bar {
	display: flex; align-items: center; gap: 1.4cqw;
	padding: 1.3cqw 1.7cqw;
	background: linear-gradient(180deg, #2c2724, #1c1815);
}
.pea-web__dots { display: flex; gap: 0.7cqw; flex: 0 0 auto; }
.pea-web__dots i { width: 1cqw; height: 1cqw; min-width: 4px; min-height: 4px; border-radius: 50%; background: rgba(250, 247, 242, 0.28); display: block; }
.pea-web__url {
	flex: 1 1 auto; min-width: 0;
	font-family: var(--f-mono); font-size: 1.25cqw; letter-spacing: 0.04em;
	color: rgba(250, 247, 242, 0.55);
	background: rgba(250, 247, 242, 0.08);
	padding: 0.6cqw 1.2cqw; border-radius: 99px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pea-web__badge {
	flex: 0 0 auto;
	font-family: var(--f-mono); font-size: 1.15cqw; letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--ink); background: linear-gradient(180deg, #ff9a52, var(--o-500));
	padding: 0.6cqw 1.2cqw; border-radius: 99px;
	box-shadow: 0 4px 12px -4px rgba(240, 124, 43, 0.8);
	animation: pea-pop 340ms var(--e-out) both;
}
.pea-web__badge[hidden] { display: none; }
.pea-web__view { background: var(--white); }

.pea-web__hdr {
	display: flex; align-items: center; gap: 1.4cqw;
	padding: 1.5cqw 2cqw;
	border-bottom: 1px solid rgba(20, 17, 15, 0.08);
}
.pea-web__brand { display: inline-flex; align-items: center; gap: 0.8cqw; flex: 0 0 auto; }
.pea-web__mark {
	width: 2cqw; height: 2cqw; min-width: 9px; min-height: 9px; border-radius: 50%;
	background: linear-gradient(150deg, #ff9a52, var(--o-600));
	box-shadow: 0 0 0 0.32cqw rgba(240, 124, 43, 0.16);
}
.pea-web__name {
	font-family: var(--f-display); font-size: 1.75cqw;
	font-variation-settings: "wght" 680, "wdth" 96; letter-spacing: -0.02em; color: var(--ink);
}
.pea-web__nav {
	display: flex; align-items: center; gap: 1.25cqw;
	margin-inline: auto; flex: 0 1 auto; min-width: 0; overflow: hidden;
	-webkit-mask: linear-gradient(90deg, #000 86%, transparent 100%);
	mask: linear-gradient(90deg, #000 86%, transparent 100%);
}
.pea-web__navI {
	font-family: var(--f-text); font-size: 1.42cqw; font-style: normal;
	color: rgba(20, 17, 15, 0.62); white-space: nowrap;
	animation: pea-fade 320ms var(--e-out) both;
}
.pea-web__navI.is-on { color: var(--ink); font-weight: 600; }
.pea-web__tools { display: inline-flex; align-items: center; gap: 1.1cqw; flex: 0 0 auto; }
.pea-web__lang {
	font-family: var(--f-mono); font-size: 1.2cqw; letter-spacing: 0.06em;
	color: var(--o-700); background: rgba(240, 124, 43, 0.14);
	padding: 0.5cqw 0; border-radius: 99px; white-space: nowrap;
	/* Elemento estetico de la maqueta: ya no responde a ninguna pregunta. */
	padding-inline: 1cqw;
}
.pea-web__cart {
	position: relative; display: inline-block;
	width: 0; height: 2.3cqw; overflow: hidden;
	transition: width 320ms var(--e-out);
}
.pea-web__cartIcon {
	position: relative; display: block;
	width: 2cqw; height: 1.55cqw; margin-top: 0.72cqw;
	border: 0.32cqw solid var(--ink); border-top: 0; border-radius: 0 0 0.45cqw 0.45cqw;
}
.pea-web__cartIcon::before {
	content: ""; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
	width: 1.2cqw; height: 0.8cqw;
	border: 0.32cqw solid var(--ink); border-bottom: 0; border-radius: 0.6cqw 0.6cqw 0 0;
}
.pea-web__cartDot {
	position: absolute; right: -0.2cqw; top: -0.2cqw;
	width: 1cqw; height: 1cqw; min-width: 4px; min-height: 4px;
	border-radius: 50%; background: var(--o-500);
}
.pea-stage[data-shop="1"] .pea-web__cart { width: 2.4cqw; }
.pea-web__cta {
	font-family: var(--f-text); font-size: 1.35cqw; white-space: nowrap;
	background: var(--ink); color: var(--white);
	padding: 0.8cqw 1.4cqw; border-radius: 99px;
}
.pea-web__body { display: grid; }
.pea-web__body.is-swap > * { animation: pea-rise 400ms var(--e-out) both; }
.pea-web__body.is-swap > *:nth-child(2) { animation-delay: 50ms; }
.pea-web__body.is-swap > *:nth-child(3) { animation-delay: 100ms; }
.pea-web__body.is-swap > *:nth-child(4) { animation-delay: 150ms; }
.pea-web__body.is-swap > *:nth-child(n+5) { animation-delay: 200ms; }

/* =========================================================================
   12.4  Objetos: volumenes construidos con CSS
   ========================================================================= */
.pv-obj { position: relative; display: block; width: 100%; aspect-ratio: 1; container-type: inline-size; }
.pv-obj > i { position: absolute; display: block; }

/* Lampara de mesa: pantalla, luz, vastago, base */
.pv-obj--lamp > i:nth-child(1) {
	left: 50%; top: 16%; width: 46%; height: 26%; transform: translateX(-50%);
	background: linear-gradient(165deg, #45403b, #211d1a);
	clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.pv-obj--lamp > i:nth-child(2) {
	left: 50%; top: 40%; width: 76%; height: 44%; transform: translateX(-50%);
	background: radial-gradient(ellipse at 50% 0%, rgba(255, 170, 90, 0.6), rgba(255, 170, 90, 0) 68%);
}
.pv-obj--lamp > i:nth-child(3) {
	left: 50%; top: 42%; width: 2.6%; height: 34%; transform: translateX(-50%);
	background: linear-gradient(90deg, #5b524a, #2a2522);
}
.pv-obj--lamp > i:nth-child(4) {
	left: 50%; bottom: 14%; width: 32%; height: 5%; transform: translateX(-50%);
	background: linear-gradient(180deg, #4f4841, #211d1a); border-radius: 50% / 70%;
}

/* Silla lounge: respaldo, asiento, dos patas */
.pv-obj--chair > i:nth-child(1) {
	left: 25%; top: 16%; width: 44%; height: 38%;
	background: linear-gradient(160deg, #e0d2be, #a8977f);
	border-radius: 16px 16px 5px 5px; transform: rotate(-5deg);
}
.pv-obj--chair > i:nth-child(2) {
	left: 17%; top: 51%; width: 58%; height: 13%;
	background: linear-gradient(180deg, #ead d, #b3a289);
	background: linear-gradient(180deg, #eaddc9, #b3a289);
	border-radius: 7px;
}
.pv-obj--chair > i:nth-child(3) {
	left: 24%; top: 62%; width: 3.4%; height: 22%;
	background: linear-gradient(180deg, #6a6057, #3b3530); transform: rotate(7deg); border-radius: 2px;
}
.pv-obj--chair > i:nth-child(4) {
	right: 25%; top: 62%; width: 3.4%; height: 22%;
	background: linear-gradient(180deg, #6a6057, #3b3530); transform: rotate(-7deg); border-radius: 2px;
}

/* Vaso artesanal: cuerpo, reflejo, sombra */
.pv-obj--glass > i:nth-child(1) {
	left: 50%; top: 22%; width: 32%; height: 52%; transform: translateX(-50%);
	background: linear-gradient(100deg, rgba(255, 255, 255, 0.95), rgba(206, 217, 214, 0.8) 46%, rgba(139, 156, 152, 0.9));
	clip-path: polygon(14% 0, 86% 0, 76% 100%, 24% 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}
.pv-obj--glass > i:nth-child(2) {
	left: 41%; top: 27%; width: 4.5%; height: 40%;
	background: rgba(255, 255, 255, 0.9); border-radius: 99px;
}
.pv-obj--glass > i:nth-child(3) {
	left: 50%; bottom: 20%; width: 36%; height: 5%; transform: translateX(-50%);
	background: radial-gradient(ellipse, rgba(20, 17, 15, 0.26), rgba(20, 17, 15, 0) 70%);
}

/* Manta de algodon: tres pliegues y una raya */
.pv-obj--throw > i:nth-child(1) {
	left: 15%; top: 29%; width: 70%; height: 15%;
	background: linear-gradient(95deg, #eee2d1, #cbb99f); border-radius: 7px; transform: rotate(-2.2deg);
	box-shadow: 0 2px 6px rgba(20, 17, 15, 0.12);
}
.pv-obj--throw > i:nth-child(2) {
	left: 13%; top: 43%; width: 74%; height: 15%;
	background: linear-gradient(95deg, #e2d3bd, #bda88c); border-radius: 7px; transform: rotate(1.6deg);
	box-shadow: 0 2px 6px rgba(20, 17, 15, 0.12);
}
.pv-obj--throw > i:nth-child(3) {
	left: 17%; top: 57%; width: 66%; height: 14%;
	background: linear-gradient(95deg, #ebdfcd, #c4b096); border-radius: 7px; transform: rotate(-1deg);
	box-shadow: 0 2px 6px rgba(20, 17, 15, 0.12);
}
.pv-obj--throw > i:nth-child(4) {
	left: 31%; top: 31%; width: 2.6%; height: 40%;
	background: rgba(234, 88, 12, 0.55); transform: rotate(-0.6deg);
}

/* Composicion arquitectonica: anillo, esfera, arco de luz, brillo */
.pv-obj--arch > i:nth-child(1) {
	left: -8%; top: 6%; width: 78%; aspect-ratio: 1; border-radius: 50%;
	border: 1.1cqw solid rgba(255, 255, 255, 0.62);
	box-shadow: 0 10px 30px -18px rgba(20, 17, 15, 0.6);
}
.pv-obj--arch > i:nth-child(2) {
	right: 8%; top: 30%; width: 44%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle at 34% 28%, #fff 2%, #ddd4c9 24%, #776e66 70%, #35302c 100%);
	box-shadow: 0 1.4cqw 2.4cqw -0.9cqw rgba(20, 17, 15, 0.55);
}
.pv-obj--arch > i:nth-child(3) {
	left: 6%; bottom: 4%; width: 62%; aspect-ratio: 1; border-radius: 50%;
	background: conic-gradient(from 186deg, rgba(240, 124, 43, 0) 0deg, var(--o-500) 58deg, rgba(255, 186, 128, 0.9) 84deg, rgba(240, 124, 43, 0) 132deg);
	-webkit-mask: radial-gradient(circle, transparent 64%, #000 65%, #000 73%, transparent 74%);
	mask: radial-gradient(circle, transparent 64%, #000 65%, #000 73%, transparent 74%);
}
.pv-obj--arch > i:nth-child(4) {
	left: 12%; top: 12%; width: 46%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle at 40% 34%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 62%);
}

/* =========================================================================
   12.5  Contenido de la miniweb
   ========================================================================= */
.pv-hero, .pv-sec, .pv-proof, .pv-close,
.pv-contact, .pv-pay, .pv-mail { padding: 1.6cqw 1.9cqw; }

.pv-hero {
	display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 2.2cqw; align-items: center;
	background: linear-gradient(168deg, #fffdfb, #f7f2ec);
}
.pv-hero__copy { display: grid; gap: 0.9cqw; align-content: center; }
.pv-eyebrow {
	font-family: var(--f-mono); font-size: 1.1cqw; letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--o-700);
}
.pv-h1 {
	font-family: var(--f-display); font-size: 2.75cqw; line-height: 1.08;
	font-variation-settings: "wght" 700, "wdth" 92; letter-spacing: -0.035em;
	color: var(--ink); margin: 0;
}
.pv-p { font-family: var(--f-text); font-size: 1.45cqw; line-height: 1.5; color: rgba(20, 17, 15, 0.6); margin: 0; }
.pv-btns { display: inline-flex; gap: 0.9cqw; align-items: center; margin-top: 0.5cqw; flex-wrap: wrap; }
.pv-btn {
	font-family: var(--f-text); font-size: 1.32cqw; font-style: normal; white-space: nowrap;
	padding: 0.95cqw 1.8cqw; border-radius: 99px;
	background: rgba(20, 17, 15, 0.06); color: var(--ink);
}
.pv-btn--main {
	background: linear-gradient(180deg, #ff9750, var(--o-600)); color: var(--white);
	box-shadow: 0 6px 15px -6px rgba(234, 88, 12, 0.85);
}
.pv-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.22); }
.pv-btn--buy { background: var(--ink); color: var(--white); font-size: 1.2cqw; padding: 0.7cqw 1.4cqw; }
.pv-note { font-family: var(--f-text); font-size: 1.2cqw; font-style: normal; color: rgba(20, 17, 15, 0.45); }

/* Escena que aloja el objeto */
.pv-scene {
	position: relative; display: block; border-radius: 11px; overflow: hidden;
	aspect-ratio: 4 / 2.5; padding: 5%;
	background: linear-gradient(158deg, #f6f0e8 0%, #e2d6c6 52%, #bfb2a2 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.pv-scene--land { aspect-ratio: 16 / 10; }
.pv-scene--shop { aspect-ratio: 4 / 2.6; background: linear-gradient(158deg, #f8f3ec 0%, #e7dbcb 54%, #c3b6a5 100%); }
.pv-scene .pv-obj { height: 100%; aspect-ratio: auto; }
.pv-obj--xl { transform: scale(1.12); }

.pv-secT {
	display: flex; align-items: baseline; gap: 1.2cqw;
	font-family: var(--f-mono); font-size: 1.1cqw; letter-spacing: 0.15em; text-transform: uppercase;
	color: rgba(20, 17, 15, 0.45); margin-bottom: 1.5cqw;
}
.pv-secT i { font-style: normal; color: var(--o-700); letter-spacing: 0.1em; }
.pv-card__t {
	display: block; font-family: var(--f-text); font-size: 1.42cqw; font-weight: 600;
	color: var(--ink); letter-spacing: -0.012em;
}
.pv-card__d {
	display: block; font-family: var(--f-text); font-size: 1.22cqw; line-height: 1.45;
	color: rgba(20, 17, 15, 0.55); margin-top: 0.35cqw;
}

/* Servicios */
.pv-cards { display: flex; gap: 1.4cqw; align-items: flex-start; }
.pv-card {
	flex: 1 1 0; min-width: 0;
	display: block; padding: 1.6cqw; border-radius: 9px;
	background: linear-gradient(170deg, #fbf8f3, #f1ebe3);
	box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.06);
}
/* El primer servicio manda; los siguientes acompañan y se escalonan. */
.pv-card:first-child {
	flex: 1.4 1 0;
	background: linear-gradient(165deg, #fffdfa, #f4ece2);
	box-shadow: inset 0 0 0 1px rgba(240, 124, 43, 0.28), 0 8px 20px -14px rgba(20, 17, 15, 0.4);
}
.pv-card:first-child .pv-card__t { font-size: 1.62cqw; }
.pv-card:nth-child(even) { margin-top: 1.1cqw; }
.pv-card__ico {
	position: relative; display: block; width: 3cqw; height: 3cqw; min-width: 12px; min-height: 12px;
	border-radius: 9px; margin-bottom: 1cqw;
	background: linear-gradient(160deg, #ffb078, var(--o-600));
	box-shadow: 0 5px 12px -5px rgba(234, 88, 12, 0.8);
}
.pv-card__ico b {
	position: absolute; left: 28%; top: 28%; width: 44%; height: 44%;
	border-radius: 50%; border: 0.28cqw solid rgba(255, 255, 255, 0.9);
}



/* Contacto */
.pv-contact, .pv-mail, .pv-close {
	display: flex; align-items: center; justify-content: space-between; gap: 2cqw; flex-wrap: wrap;
}
.pv-contact { background: #fbf8f4; border-top: 1px solid rgba(20, 17, 15, 0.07); }
.pv-contact__t, .pv-mail__t, .pv-close__t {
	display: block; font-family: var(--f-display); font-size: 1.9cqw;
	font-variation-settings: "wght" 640, "wdth" 94; letter-spacing: -0.026em; color: var(--ink);
}
.pv-contact__copy, .pv-mail__copy, .pv-close__copy { flex: 1 1 46%; min-width: 0; }
.pv-form { display: inline-flex; align-items: center; gap: 0.8cqw; flex: 1 1 42%; min-width: 0; }
.pv-input {
	flex: 1 1 auto; min-width: 0; font-style: normal;
	font-family: var(--f-text); font-size: 1.22cqw; color: rgba(20, 17, 15, 0.42);
	background: var(--white); padding: 0.95cqw 1.4cqw; border-radius: 99px;
	box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.12);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Newsletter dentro del sitio */
.pv-mail {
	background: linear-gradient(150deg, #2c2724, #191512);
	animation: pea-rise 400ms var(--e-out) both;
}
.pv-mail__t { color: var(--paper); }
.pv-mail .pv-card__d { color: rgba(250, 247, 242, 0.6); }
.pv-mail .pv-input { background: rgba(250, 247, 242, 0.1); color: rgba(250, 247, 242, 0.6); box-shadow: inset 0 0 0 1px rgba(250, 247, 242, 0.2); }

/* Landing */
.pv-bens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.pv-ben { display: block; }
.pv-tick {
	position: relative; display: block; width: 2.4cqw; height: 2.4cqw; min-width: 10px; min-height: 10px;
	border-radius: 50%; margin-bottom: 0.9cqw;
	background: var(--o-500); box-shadow: 0 0 0 0.45cqw rgba(240, 124, 43, 0.16);
}
.pv-tick::after {
	content: ""; position: absolute; left: 32%; top: 26%; width: 26%; height: 46%;
	border: 0.3cqw solid var(--white); border-top: 0; border-left: 0;
	transform: rotate(42deg);
}
.pv-proof { background: #fbf8f4; }
.pv-quoteCard {
	position: relative;
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 2cqw;
	padding: 2cqw 2.4cqw; border-radius: 10px;
	background: linear-gradient(150deg, #fffdfa, #f6efe6);
	box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.07);
}
/* Filete de luz: separa la cita sin encerrarla en otro rectangulo */
.pv-quoteCard::before {
	content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px;
	border-radius: 99px;
	background: linear-gradient(180deg, rgba(240, 124, 43, 0), var(--o-500), rgba(240, 124, 43, 0));
}
.pv-quoteMark {
	grid-row: 1 / span 2; align-self: start;
	font-family: var(--f-display); font-size: 5.4cqw; line-height: 0.62; font-style: normal;
	font-variation-settings: "wght" 700;
	color: rgba(240, 124, 43, 0.34);
}
.pv-quoteBody { display: grid; gap: 0.7cqw; }
.pv-quoteTag {
	font-family: var(--f-mono); font-size: 1.05cqw; letter-spacing: 0.15em; text-transform: uppercase;
	color: var(--o-700); font-style: normal;
}
.pv-quoteTx {
	font-family: var(--f-display); font-size: 1.85cqw; line-height: 1.3;
	font-variation-settings: "wght" 520, "wdth" 96; letter-spacing: -0.018em;
	color: rgba(20, 17, 15, 0.82);
}
.pv-quoteWho {
	display: inline-flex; align-items: center; gap: 0.9cqw; margin-top: 0.3cqw;
	font-family: var(--f-text); font-size: 1.15cqw; color: rgba(20, 17, 15, 0.45);
}
.pv-av {
	display: block; width: 2.2cqw; height: 2.2cqw; min-width: 9px; min-height: 9px; border-radius: 50%;
	background: linear-gradient(150deg, #ded2c2, #8d8278); flex: 0 0 auto;
	box-shadow: inset 0 -0.3cqw 0.6cqw rgba(20, 17, 15, 0.18);
}
.pv-av--s { width: 1.9cqw; height: 1.9cqw; }
.pv-close {
	position: relative; overflow: hidden;
	margin: 0 2cqw 2cqw; border-radius: 10px;
	padding: 2.4cqw 2.6cqw;
	background:
		radial-gradient(90% 160% at 88% 10%, rgba(240, 124, 43, 0.3), rgba(240, 124, 43, 0) 62%),
		linear-gradient(150deg, #332d29, #17130f);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
}
.pv-close .pv-btn--main { position: relative; }
.pv-close__t { color: var(--paper); }
.pv-close .pv-card__d { color: rgba(250, 247, 242, 0.6); }

/* Tienda */
.pv-cats { display: flex; gap: 0.8cqw; padding: 1.5cqw 2.1cqw; border-bottom: 1px solid rgba(20, 17, 15, 0.07); flex-wrap: wrap; }
.pv-cat {
	font-family: var(--f-text); font-size: 1.22cqw; font-style: normal; white-space: nowrap;
	padding: 0.6cqw 1.3cqw; border-radius: 99px;
	background: rgba(20, 17, 15, 0.05); color: rgba(20, 17, 15, 0.66);
	animation: pea-fade 320ms var(--e-out) both;
}
.pv-cat.is-on { background: var(--ink); color: var(--white); }

.pv-prods { display: grid; grid-template-columns: repeat(auto-fit, minmax(21%, 1fr)); gap: 1.4cqw; }
.pv-prod { display: block; }
.pv-prod__art {
	position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden;
	margin-bottom: 0.8cqw; padding: 4%;
	background: linear-gradient(158deg, #f7f2ea, #ded1bf);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.pv-prod__art .pv-obj { height: 100%; aspect-ratio: auto; }
.pv-tag {
	position: absolute; left: 0.9cqw; top: 0.9cqw; z-index: 2;
	font-family: var(--f-mono); font-size: 1cqw; letter-spacing: 0.08em; text-transform: uppercase;
	background: var(--ink); color: var(--paper);
	padding: 0.4cqw 0.9cqw; border-radius: 99px;
}
.pv-prod__name { display: block; font-family: var(--f-text); font-size: 1.32cqw; font-weight: 600; color: var(--ink); }
.pv-prod__row { display: flex; align-items: center; justify-content: space-between; gap: 0.8cqw; margin-top: 0.7cqw; }
.pv-prod__meta {
	font-family: var(--f-text); font-size: 1.15cqw; font-style: normal; color: var(--o-700);
	display: inline-flex; align-items: center; gap: 0.6cqw;
}
.pv-prod__meta::before {
	content: ""; width: 0.85cqw; height: 0.85cqw; min-width: 3px; min-height: 3px;
	border-radius: 50%; background: var(--o-500);
}

/* Envio y pago */
.pv-pay { background: #fbf8f4; border-top: 1px solid rgba(20, 17, 15, 0.07); }
.pv-payGrid { display: flex; align-items: center; gap: 1.2cqw; flex-wrap: wrap; }
.pv-ship {
	display: inline-flex; align-items: center; gap: 0.8cqw;
	font-family: var(--f-text); font-size: 1.2cqw; color: rgba(20, 17, 15, 0.72);
	background: var(--white); padding: 0.85cqw 1.4cqw; border-radius: 8px;
	box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.09);
}
.pv-ship__ico { position: relative; display: block; width: 1.9cqw; height: 1.6cqw; min-width: 7px; }
.pv-ship__ico--box { background: linear-gradient(160deg, #d8c8b1, #9d8f7c); border-radius: 2px; }
.pv-ship__ico--box::after { content: ""; position: absolute; left: 0; right: 0; top: 42%; height: 0.3cqw; background: rgba(255, 255, 255, 0.75); }
.pv-ship__ico--pin { background: var(--o-600); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); width: 1.5cqw; height: 1.5cqw; }
.pv-pays { display: inline-flex; gap: 0.8cqw; margin-left: auto; flex-wrap: wrap; }
.pv-payM {
	display: inline-flex; align-items: center; gap: 0.7cqw; font-style: normal;
	font-family: var(--f-text); font-size: 1.15cqw; color: rgba(20, 17, 15, 0.72);
	padding: 0.75cqw 1.2cqw; border-radius: 8px;
	background: var(--white); box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.1);
}
.pv-payM__chip {
	display: block; width: 2.2cqw; height: 1.5cqw; min-width: 9px; min-height: 6px; border-radius: 3px;
	background: linear-gradient(150deg, #4b4540, #23201d);
	box-shadow: inset 0 0.3cqw 0 rgba(240, 124, 43, 0.75);
}
.pv-payM__chip--2 { background: linear-gradient(150deg, #6d6459, #3a342f); }
.pv-payM__chip--3 { background: linear-gradient(150deg, #ffab72, var(--o-600)); box-shadow: inset 0 0.3cqw 0 rgba(255, 255, 255, 0.5); }

/* Plataforma */
.pv-app { display: grid; grid-template-columns: 19% 1fr; min-height: 22cqw; }
.pv-rail {
	display: grid; gap: 0.45cqw; align-content: start;
	padding: 1.6cqw 1.1cqw;
	background: linear-gradient(170deg, #322c28, #171310);
	box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
}
.pv-rail__foot {
	display: inline-flex; align-items: center; gap: 0.8cqw;
	margin-top: 1.4cqw; padding-top: 1.1cqw;
	border-top: 1px solid rgba(250, 247, 242, 0.12);
	font-family: var(--f-text); font-size: 1.15cqw; color: rgba(250, 247, 242, 0.5);
	overflow: hidden; white-space: nowrap;
}
.pv-rail__b {
	display: inline-flex; align-items: center; gap: 0.7cqw; margin-bottom: 1.2cqw;
	font-family: var(--f-display); font-size: 1.5cqw; color: var(--paper);
	font-variation-settings: "wght" 660, "wdth" 96;
}
.pv-rail__b i { width: 1.6cqw; height: 1.6cqw; min-width: 6px; min-height: 6px; border-radius: 50%; background: linear-gradient(150deg, #ffab72, var(--o-600)); }
.pv-rail__i {
	display: flex; align-items: center; gap: 0.8cqw;
	font-family: var(--f-text); font-size: 1.28cqw; font-style: normal;
	color: rgba(250, 247, 242, 0.55); padding: 0.7cqw 1cqw; border-radius: 7px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv-rail__g { width: 1.1cqw; height: 1.1cqw; min-width: 4px; min-height: 4px; border-radius: 3px; background: rgba(250, 247, 242, 0.3); flex: 0 0 auto; }
.pv-rail__i.is-on { color: var(--paper); background: rgba(250, 247, 242, 0.1); box-shadow: inset 0.28cqw 0 0 var(--o-500); }
.pv-rail__i.is-on .pv-rail__g { background: var(--o-500); }

.pv-work { display: grid; gap: 1cqw; align-content: start; padding: 0 0 1.3cqw; background: #fbf8f4; }

/* Barra de aplicacion: siempre presente, como en una herramienta real */
.pv-appbar {
	display: flex; align-items: center; gap: 1.2cqw;
	padding: 1.2cqw 1.5cqw;
	background: var(--white);
	box-shadow: 0 1px 0 rgba(20, 17, 15, 0.08);
}

/* Resumen por estado: los recuentos describen las filas visibles */
.pv-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; padding-inline: 1.5cqw; margin-top: 0.4cqw; }
.pv-tile {
	display: grid; gap: 0.35cqw; padding: 0.85cqw 1.1cqw; border-radius: 8px;
	background: var(--white); box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.07);
}
.pv-tile.is-on { box-shadow: inset 0 0 0 1px rgba(240, 124, 43, 0.45); background: linear-gradient(165deg, #fffdfa, #fdf3e9); }
.pv-tile__k {
	font-family: var(--f-mono); font-size: 0.95cqw; letter-spacing: 0.1em; text-transform: uppercase;
	color: rgba(20, 17, 15, 0.45); font-style: normal;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pv-tile__n {
	font-family: var(--f-display); font-size: 2.1cqw; line-height: 1;
	font-variation-settings: "wght" 660, "wdth" 94; letter-spacing: -0.03em; color: var(--ink);
}
.pv-tile__bar { display: block; height: 0.4cqw; min-height: 2px; border-radius: 99px; background: rgba(20, 17, 15, 0.09); overflow: hidden; }
.pv-tile__bar b { display: block; height: 100%; border-radius: 99px; background: var(--o-500); }
.pv-tile:not(.is-on) .pv-tile__bar b { background: rgba(20, 17, 15, 0.32); }

/* Cola de trabajo y detalle, uno junto al otro */
.pv-panes { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.2cqw; padding-inline: 1.5cqw; }
.pv-queue { display: grid; gap: 0.7cqw; align-content: start; min-width: 0; }
.pv-queue__h {
	font-family: var(--f-mono); font-size: 0.95cqw; letter-spacing: 0.12em; text-transform: uppercase;
	color: rgba(20, 17, 15, 0.42);
}

/* Actividad reciente */
.pv-activity {
	display: grid; gap: 0.7cqw; padding: 1.2cqw 1.5cqw 0;
	border-top: 1px solid rgba(20, 17, 15, 0.08); margin-top: 0.3cqw;
}
.pv-activity__h {
	font-family: var(--f-mono); font-size: 0.95cqw; letter-spacing: 0.12em; text-transform: uppercase;
	color: rgba(20, 17, 15, 0.42);
}
.pv-act {
	display: flex; align-items: center; gap: 0.9cqw;
	font-family: var(--f-text); font-size: 1.2cqw; color: rgba(20, 17, 15, 0.72);
}
.pv-act b { font-weight: 500; }
.pv-act__tag {
	margin-left: auto; font-style: normal;
	font-family: var(--f-mono); font-size: 0.9cqw; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--o-700); background: rgba(240, 124, 43, 0.13);
	padding: 0.35cqw 0.9cqw; border-radius: 99px; white-space: nowrap;
}
.pv-search {
	flex: 1 1 auto; display: inline-flex; align-items: center; gap: 0.9cqw;
	font-family: var(--f-text); font-size: 1.28cqw; color: rgba(20, 17, 15, 0.42);
	background: var(--white); padding: 0.9cqw 1.4cqw; border-radius: 99px;
	box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.09);
}
.pv-search i {
	width: 1.4cqw; height: 1.4cqw; min-width: 6px; min-height: 6px; border-radius: 50%;
	box-shadow: inset 0 0 0 0.28cqw rgba(20, 17, 15, 0.32);
}
.pv-chips { display: flex; gap: 0.7cqw; flex-wrap: wrap; }
.pv-chip {
	font-family: var(--f-text); font-size: 1.15cqw; font-style: normal;
	padding: 0.5cqw 1.1cqw; border-radius: 99px;
	background: rgba(20, 17, 15, 0.05); color: rgba(20, 17, 15, 0.6);
}
.pv-chip.is-on { background: var(--ink); color: var(--paper); }

.pv-table { border-radius: 9px; overflow: hidden; background: var(--white); box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.07); }
.pv-row {
	display: grid; grid-template-columns: minmax(0, 1fr) auto 14%; align-items: center; gap: 1.2cqw;
	padding: 0.95cqw 1.4cqw; border-top: 1px solid rgba(20, 17, 15, 0.06);
	font-family: var(--f-text); font-size: 1.28cqw; color: var(--ink);
}
.pv-row--h > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-row--h > span:last-child { text-align: right; }
.pv-row--h {
	border-top: 0; background: rgba(20, 17, 15, 0.03);
	font-family: var(--f-mono); font-size: 1.05cqw; letter-spacing: 0.1em; text-transform: uppercase;
	color: rgba(20, 17, 15, 0.45);
}
.pv-row.is-sel { background: linear-gradient(90deg, rgba(240, 124, 43, 0.1), rgba(240, 124, 43, 0)); box-shadow: inset 0.28cqw 0 0 var(--o-500); }
.pv-row__id { display: inline-flex; align-items: center; gap: 0.9cqw; min-width: 0; }
.pv-row__id, .pv-row__who { overflow: hidden; }
.pv-row__who { display: flex; justify-content: flex-end; }
.pv-check {
	position: relative; display: block; width: 1.6cqw; height: 1.6cqw; min-width: 7px; min-height: 7px;
	border-radius: 4px; box-shadow: inset 0 0 0 0.26cqw rgba(20, 17, 15, 0.25); flex: 0 0 auto;
}
.pv-check.is-on { background: var(--o-500); box-shadow: none; }
.pv-check.is-on::after {
	content: ""; position: absolute; left: 34%; top: 18%; width: 24%; height: 46%;
	border: 0.26cqw solid var(--white); border-top: 0; border-left: 0; transform: rotate(42deg);
}
.pv-pill {
	font-family: var(--f-text); font-size: 1.1cqw; white-space: nowrap; font-style: normal;
	padding: 0.42cqw 1.05cqw; border-radius: 99px;
	background: rgba(20, 17, 15, 0.07); color: rgba(20, 17, 15, 0.62);
}
.pv-pill--open { background: rgba(240, 124, 43, 0.16); color: var(--o-700); }
.pv-pill--review { background: rgba(20, 17, 15, 0.85); color: var(--paper); }
.pv-pill--done { background: rgba(20, 17, 15, 0.06); color: rgba(20, 17, 15, 0.45); }

.pv-detail {
	border-radius: 9px; padding: 1.4cqw; align-self: start;
	background: linear-gradient(170deg, #ffffff, #fbf7f2);
	box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.07), 0 10px 24px -18px rgba(20, 17, 15, 0.45);
}
.pv-detail__h { border-bottom: 1px solid rgba(20, 17, 15, 0.08); padding-bottom: 0.9cqw; }
.pv-detail__h { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; margin-bottom: 1cqw; }
.pv-field { display: flex; align-items: center; gap: 1.2cqw; margin-top: 0.75cqw; }
.pv-field__l { font-family: var(--f-text); font-size: 1.15cqw; font-style: normal; color: rgba(20, 17, 15, 0.45); flex: 0 0 28%; }
.pv-field__v {
	flex: 1 1 auto; font-style: normal;
	font-family: var(--f-text); font-size: 1.2cqw; color: var(--ink);
	background: rgba(20, 17, 15, 0.045); border-radius: 6px; padding: 0.6cqw 1.1cqw;
}
.pv-notes { display: block; margin-top: 1cqw; }
.pv-notes__box { display: block; height: 3.4cqw; margin-top: 0.5cqw; border-radius: 6px; background: rgba(20, 17, 15, 0.045); }
.pv-detail .pv-btns { margin-top: 1.3cqw; }

/* La cabecera comercial sobra cuando el proyecto es una aplicacion */
.pea-stage[data-type="plataforma"] .pea-web__hdr { display: none; }

/* =========================================================================
   12.6  Integraciones suspendidas: cada una con su forma
   ========================================================================= */
.pea-glass {
	position: absolute; z-index: 4;
	left: 0; top: 7%;
	width: 15%; max-width: 176px;
	display: grid; gap: 1.2cqw;
	align-content: start;
	pointer-events: none;
}
.pea-glass:empty { display: none; }
.pea-glass__c {
	display: grid; gap: 0.8cqw;
	padding: 1.3cqw;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.66);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		inset 0 0 0 1px rgba(255, 255, 255, 0.55),
		0 16px 32px -18px rgba(20, 17, 15, 0.6);
	overflow: hidden;
	animation: pea-glass-in 460ms var(--e-out) both;
}
.pea-glass__c:nth-child(2) { animation-delay: 80ms; margin-left: 6%; }
.pea-glass__c:nth-child(3) { animation-delay: 160ms; }
.pea-glass__c:nth-child(4) { animation-delay: 240ms; margin-left: 6%; }
.pea-glass__c--wide { width: 118%; }
.pea-glass__c--cal { width: 110%; }
.pea-glass__t {
	display: flex; align-items: center; gap: 0.7cqw;
	font-family: var(--f-mono); font-size: 1.05cqw; letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--ink);
}
.pea-glass__dot { width: 0.9cqw; height: 0.9cqw; min-width: 4px; min-height: 4px; border-radius: 50%; background: var(--o-500); flex: 0 0 auto; }

/* CRM: embudo compacto de tres etapas */
.pea-crm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5cqw; }
.pea-crm__col { display: grid; gap: 0.5cqw; align-content: start; }
.pea-crm__h {
	font-family: var(--f-mono); font-size: 0.9cqw; letter-spacing: 0.06em; text-transform: uppercase;
	color: rgba(20, 17, 15, 0.42); font-style: normal;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pea-crm__card {
	display: grid; gap: 0.4cqw; padding: 0.7cqw;
	border-radius: 6px; background: rgba(255, 255, 255, 0.85);
	box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.08);
	font-family: var(--f-text); font-size: 1cqw; color: rgba(20, 17, 15, 0.72);
	line-height: 1.28;
}
.pea-crm__card.is-on { box-shadow: inset 0 0 0 1px rgba(240, 124, 43, 0.55); background: rgba(255, 240, 228, 0.9); }
.pea-crm__card b { font-weight: 500; overflow: hidden; }

/* Reservas: agenda con dias y horarios */
.pea-agd__m { font-family: var(--f-text); font-size: 1cqw; color: rgba(20, 17, 15, 0.5); }
.pea-agd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.3cqw; }
.pea-agd__dow {
	font-family: var(--f-mono); font-size: 0.8cqw; text-align: center; font-style: normal;
	color: rgba(20, 17, 15, 0.35);
}
.pea-agd__c {
	display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
	font-family: var(--f-text); font-size: 0.85cqw; font-style: normal; border-radius: 3px;
	color: rgba(20, 17, 15, 0.45); background: rgba(20, 17, 15, 0.05);
}
.pea-agd__c.is-free { background: rgba(240, 124, 43, 0.18); color: var(--o-700); }
.pea-agd__c.is-on { background: var(--o-500); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 0.25cqw rgba(240, 124, 43, 0.3); }
.pea-agd__hours { display: flex; gap: 0.5cqw; }
.pea-agd__h {
	flex: 1 1 0; text-align: center; font-style: normal;
	font-family: var(--f-mono); font-size: 0.85cqw;
	padding: 0.5cqw 0; border-radius: 99px;
	background: rgba(255, 255, 255, 0.85); color: rgba(20, 17, 15, 0.6);
	box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.1);
}
.pea-agd__h.is-on { background: var(--ink); color: var(--paper); box-shadow: none; }

/* Inventario: referencias con estado */
.pea-stock {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
	gap: 0.7cqw; row-gap: 0.35cqw;
	font-family: var(--f-text); font-size: 1cqw; color: rgba(20, 17, 15, 0.75);
}
.pea-stock__ico {
	display: block; width: 2.2cqw; height: 2.2cqw; min-width: 9px; min-height: 9px;
	border-radius: 5px; padding: 8%; overflow: hidden;
	background: linear-gradient(158deg, #f5efe7, #d9ccb9);
}
.pea-stock__ico .pv-obj { height: 100%; aspect-ratio: auto; }
.pea-stock b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pea-stock__st { font-style: normal; font-size: 0.8cqw; color: var(--o-700); white-space: nowrap; justify-self: end; }
.pea-stock__st.is-low { color: rgba(20, 17, 15, 0.45); }
.pea-stock__bar {
	grid-column: 2 / span 2; display: block; height: 0.4cqw; min-height: 2px; border-radius: 99px;
	background: linear-gradient(90deg, var(--o-500) 0 72%, rgba(20, 17, 15, 0.1) 72% 100%);
}
.pea-stock__bar.is-low { background: linear-gradient(90deg, rgba(20, 17, 15, 0.35) 0 18%, rgba(20, 17, 15, 0.1) 18% 100%); }

/* Pago suspendido: solo cuando el sitio no lo muestra ya */
.pea-pay__t { font-family: var(--f-text); font-size: 1cqw; color: rgba(20, 17, 15, 0.5); }
.pea-pay__m {
	display: flex; align-items: center; gap: 0.7cqw;
	font-family: var(--f-text); font-size: 0.95cqw; color: rgba(20, 17, 15, 0.75);
	padding: 0.5cqw 0.7cqw; border-radius: 6px; background: rgba(255, 255, 255, 0.7);
	box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.07);
}
.pea-pay__m.is-on { box-shadow: inset 0 0 0 1px rgba(240, 124, 43, 0.6); }
.pea-pay__ok { width: 0.9cqw; height: 0.9cqw; min-width: 4px; min-height: 4px; border-radius: 50%; background: var(--o-500); margin-left: auto; }
.pea-pay__btn {
	text-align: center; font-family: var(--f-text); font-size: 1cqw;
	background: var(--ink); color: var(--paper); padding: 0.7cqw; border-radius: 99px;
}

/* =========================================================================
   12.8  Banda de briefing: horizontal y compacta
   ========================================================================= */
.pea-brief {
	position: relative;
	min-width: 0;
	padding: 14px 14px 13px;
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 247, 242, 0.94));
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	backdrop-filter: blur(16px) saturate(1.3);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.7),
		0 2px 6px rgba(20, 17, 15, 0.05),
		0 22px 40px -28px rgba(20, 17, 15, 0.6);
	display: grid; gap: 9px; align-content: start;
}
/* Filete de luz: la ficha pertenece al mismo sistema que la pieza */
.pea-brief::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
	border-radius: 14px 14px 0 0;
	background: linear-gradient(90deg, rgba(240, 124, 43, 0), var(--o-500) 34%, rgba(255, 190, 130, 0.9) 66%, rgba(240, 124, 43, 0));
}
.pea-brief__t {
	font-family: var(--f-mono); font-size: 0.55rem; letter-spacing: 0.13em;
	text-transform: uppercase; color: var(--o-700);
}
.pea-brief__empty { font-family: var(--f-text); font-size: 0.82rem; line-height: 1.4; color: rgba(20, 17, 15, 0.5); margin: 0; }
.pea-brief__empty[hidden] { display: none; }

.pea-brief__list { display: grid; }
.pea-brief__row {
	display: grid; gap: 1px; min-width: 0;
	padding-block: 6px;
	border-top: 1px solid rgba(20, 17, 15, 0.09);
	animation: pea-fade 300ms var(--e-out) both;
}
.pea-brief__row:first-child { border-top: 0; padding-top: 0; }
.pea-brief__k {
	font-family: var(--f-mono); font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase;
	color: rgba(20, 17, 15, 0.4); font-style: normal;
}
.pea-brief__v {
	font-family: var(--f-text); font-size: 0.84rem; font-weight: 600;
	color: var(--ink); line-height: 1.25; overflow-wrap: anywhere;
}

.pea-brief__foot { display: grid; gap: 8px; }
.pea-brief__actions { display: grid; gap: 6px; }
.pea-brief__note {
	font-family: var(--f-text); font-size: 0.64rem; line-height: 1.4;
	color: rgba(20, 17, 15, 0.48); margin: 0;
	padding-top: 8px; border-top: 1px solid rgba(20, 17, 15, 0.09);
}
.pea-brief .pea-btn {
	--bevel: 9px; padding: 11px 10px; min-height: 44px; font-size: 0.56rem;
	letter-spacing: 0.045em; justify-content: center; white-space: nowrap; text-align: center;
}
.pea-brief .pea-wa {
	padding: 11px 10px; min-height: 44px; font-size: 0.56rem;
	letter-spacing: 0.045em; justify-content: center;
}
.pea-orange .pea-brief .pea-btn { background: var(--ink); color: var(--paper); }
.pea-orange .pea-brief .pea-btn:hover,
.pea-orange .pea-brief .pea-btn:focus-visible { background: var(--o-600); color: var(--white); }
.pea-orange .pea-brief .pea-wa {
	background: rgba(20, 17, 15, 0.05); color: var(--ink);
	box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.16);
}
.pea-orange .pea-brief .pea-wa:hover,
.pea-orange .pea-brief .pea-wa:focus-visible { background: var(--ink); color: var(--paper); }

/* =========================================================================
   12.9  Animaciones
   ========================================================================= */
@keyframes pea-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
@keyframes pea-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pea-pop { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }
@keyframes pea-glass-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; } }

/* =========================================================================
   12.10  Adaptaciones
   ========================================================================= */
/* Por encima del punto de ruptura la herramienta se apoya en el canal
   completo del contenedor: unos pixeles mas para la pieza central. */
@media (min-width: 1081px) {
	.pea-lpp { margin-inline: clamp(-30px, -1.7vw, -12px); }
}

/* Entre 1081 y 1320 las columnas laterales ceden unos puntos al preview
   sin que las preguntas ni el briefing lleguen a estrecharse de mas. */
@media (min-width: 1081px) and (max-width: 1320px) {
	.pea-lpp__grid {
		grid-template-columns: minmax(158px, 0.24fr) minmax(0, 1fr) minmax(162px, 0.26fr);
		gap: 13px;
	}
	.pea-brief { padding: 13px 12px 12px; }
	.pea-brief .pea-btn, .pea-brief .pea-wa { font-size: 0.53rem; padding-inline: 8px; }
}

@media (max-width: 1080px) {
	.pea-lpp__grid { grid-template-columns: 1fr; gap: 20px; }
	.pea-lpp { margin-top: clamp(-40px, -3vw, -20px); }
	.pea-lpp__form { order: 0; padding-top: 0; }
	.pea-lpp .pea-opts { flex-direction: row; align-items: stretch; gap: 8px; }
	.pea-lpp .pea-opt { flex: 0 1 auto; }
	.pea-stage { order: -1; }
	/* Sin ancho para una tercera columna, la ficha vuelve bajo el preview */
	.pea-brief { order: 1; }
	.pea-brief__list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 18px; }
	.pea-brief__row { border-top: 0; padding-block: 5px; }
	.pea-brief__foot {
		grid-template-columns: 1fr auto; align-items: center; gap: 12px;
		padding-top: 10px; border-top: 1px solid rgba(20, 17, 15, 0.09);
	}
	.pea-brief__actions { grid-auto-flow: column; gap: 9px; order: 2; }
	.pea-brief__note { border-top: 0; padding-top: 0; order: 1; }

	/* Sin espacio lateral, las integraciones pasan a fila bajo el plano */
	.pea-glass {
		position: static; width: auto; max-width: none;
		display: flex; flex-wrap: wrap; gap: 8px;
		margin-top: 12px;
	}
	.pea-glass__c { flex: 1 1 42%; width: auto !important; margin-left: 0 !important; }
	.pea-glass__c--wide { flex: 1 1 100%; }
	.pea-stage[data-extras]:not([data-extras=""]) .pea-web { margin-left: 0; }
	.pea-web { margin-right: 0; transform: none; }
	.pv-close { margin: 0; border-radius: 0; }
	.pv-cards { flex-wrap: wrap; }
	.pv-card, .pv-card:first-child { flex: 1 1 42%; }
	.pv-card:nth-child(even) { margin-top: 0; }
}

/* Asistente de seis pasos */
@media (max-width: 860px) {
	.pea-stage { position: sticky; top: var(--hdr-h); padding: 11px; border-radius: 15px; }
	.pea-web { max-height: 44vh; overflow: hidden; transition: max-height 460ms var(--e-out); }
	[data-est][data-wiz-last="true"] .pea-web { max-height: 62vh; }
	.pea-web::after {
		content: ""; position: absolute; inset: auto 0 0 0; height: 38px; pointer-events: none;
		background: linear-gradient(to top, var(--white), rgba(255, 255, 255, 0));
	}
	[data-est][data-wiz-last="true"] .pea-web::after { opacity: 0; }

	/* Version simplificada: se conserva lo que hace reconocible cada tipo */
	.pv-contact, .pv-close, .pv-quoteWho, .pv-notes { display: none; }
	.pv-prods > .pv-prod:nth-child(n+4) { display: none; }
	.pv-hero { grid-template-columns: 1.1fr 0.9fr; padding: 3.4cqw 3cqw; }
	.pv-sec, .pv-proof, .pv-pay, .pv-mail { padding: 3.4cqw 3cqw; }
	.pv-cards, .pv-bens { grid-template-columns: 1fr 1fr; }
	.pv-cards > .pv-card:nth-child(3), .pv-bens > .pv-ben:nth-child(3) { display: none; }
	.pv-app { min-height: 0; }
	.pv-panes { grid-template-columns: minmax(0, 1fr); }
	.pv-detail, .pv-activity { display: none; }

	/* Tipografia legible a esta escala */
	.pea-web__url, .pea-web__badge { font-size: 8px; }
	.pea-web__name { font-size: 11px; }
	.pea-web__navI, .pea-web__cta, .pea-web__lang { font-size: 9px; }
	.pv-h1 { font-size: 17px; }
	.pv-p { font-size: 10px; }
	.pv-quoteTx { font-size: 11px; }
	.pv-btn, .pv-cat, .pv-prod__name, .pv-card__t, .pv-input,
	.pv-rail__i, .pv-row, .pv-search, .pv-payM, .pv-ship, .pv-chip { font-size: 10px; }
	.pv-tile__k, .pv-queue__h, .pv-activity__h { font-size: 8px; }
	.pv-tile__n { font-size: 15px; }
	.pv-rail__foot { display: none; }
	.pv-card__d, .pv-prod__meta, .pv-note { font-size: 9px; }
	.pv-secT, .pv-eyebrow, .pv-row--h, .pv-pill, .pv-field__l, .pv-tag { font-size: 8px; }
	.pv-contact__t, .pv-mail__t, .pv-close__t { font-size: 13px; }
	.pea-glass__t { font-size: 9px; }
	.pea-crm__card, .pea-stock, .pea-agd__h, .pea-agd__c, .pea-pay__m { font-size: 9px; }
	.pea-crm__h, .pea-agd__dow, .pea-stock__st { font-size: 8px; }

	.pea-lpp__wiz { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
	.pea-lpp__wizCount {
		font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em;
		color: rgba(20, 17, 15, 0.6); flex: 0 0 auto;
	}
	.pea-lpp__wizCount b { color: var(--ink); font-weight: 600; }
	.pea-lpp__wizBar { flex: 1 1 auto; height: 3px; background: rgba(20, 17, 15, 0.16); border-radius: 2px; overflow: hidden; }
	.pea-lpp__wizBar i { display: block; height: 100%; width: 50%; background: var(--ink); transition: width 340ms var(--e-out); }

	.pea-lpp__q { display: none; border-top: 0; padding-block: 0; }
	.pea-lpp__q[data-active] { display: grid; }
	.pea-lpp__qNum { display: none; }
	.pea-lpp__q { grid-template-columns: minmax(0, 1fr); }
	.pea-lpp__q > .pea-opts { grid-column: 1; }
	/* En el asistente las pastillas vuelven a ocupar el ancho: son el
	   objetivo tactil principal de cada paso. */
	.pea-lpp .pea-opts { flex-direction: row; }
	.pea-lpp .pea-opt { flex: 1 1 auto; }
	.pea-lpp__qLabel { font-size: 1.16rem; }
	.pea-lpp .pea-opt { min-height: 48px; padding: 13px 18px; flex: 1 1 auto; justify-content: center; text-align: center; }

	.pea-lpp__wizNav {
		display: flex; gap: 10px; margin-top: 20px;
		padding-top: 15px; border-top: 1px solid rgba(20, 17, 15, 0.14);
	}
	.pea-lpp__wizBtn {
		flex: 1 1 0; min-height: 48px;
		display: inline-flex; align-items: center; justify-content: center; gap: 9px;
		font-family: var(--f-text); font-size: 0.94rem;
		background: rgba(255, 255, 255, 0.72); color: var(--ink);
		box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.14);
		border-radius: 99px;
		transition: background-color 240ms var(--e-out), color 240ms var(--e-out);
	}
	.pea-lpp__wizBtn--next { background: var(--ink); color: var(--paper); box-shadow: none; }
	.pea-lpp__wizBtn:disabled { opacity: 0.38; cursor: default; }
	.pea-lpp__wizBtn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

	.pea-brief { gap: 10px; }
}

@media (max-width: 560px) {
	.pv-quoteCard { grid-template-columns: minmax(0, 1fr); gap: 0.6cqw; }
	.pv-quoteMark { grid-row: auto; }
	/* A este ancho una web real pliega su menu: la maqueta hace lo mismo */
	.pea-web__nav { display: none; }
	.pea-web__hdr::after {
		content: ""; flex: 0 0 auto; width: 13px; height: 9px;
		border-top: 2px solid rgba(20, 17, 15, 0.55);
		border-bottom: 2px solid rgba(20, 17, 15, 0.55);
	}
	.pea-web__brand { margin-inline-end: auto; }
	.pea-web { max-height: 32vh; }
	[data-est][data-wiz-last="true"] .pea-web { max-height: 56vh; }
	.pv-hero { grid-template-columns: 1fr; }
	.pv-hero .pv-scene { display: none; }
	.pv-hero--shop .pv-scene, .pv-hero--land .pv-scene { display: block; aspect-ratio: 16 / 7; }
	.pea-glass__c { flex: 1 1 100%; }
	.pea-brief__list { grid-template-columns: 1fr 1fr; }
	.pea-brief__foot { grid-template-columns: 1fr; }
	.pea-brief__actions { grid-auto-flow: row; }
}

@media (max-width: 400px) {
	.pea-stage { padding: 8px; }
	.pea-web__url { display: none; }
	.pea-lpp .pea-opt { width: 100%; }
	.pv-cards, .pv-bens, .pv-prods { grid-template-columns: 1fr 1fr; }
	.pv-app { grid-template-columns: 32% 1fr; }
	.pv-tiles { grid-template-columns: 1fr 1fr; }
	.pv-tiles > .pv-tile:nth-child(3) { display: none; }
	.pv-payGrid .pv-ship { display: none; }
	.pv-pays { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pea-web__body.is-swap > *, .pea-glass__c, .pea-web__badge,
	.pea-web__navI, .pea-brief__row, .pv-cat, .pv-mail { animation: none; }
	.pea-web, .pea-web__lang, .pea-web__cart,
	.pea-lpp__wizBar i, .pea-lpp .pea-opt, .pea-lpp__wizBtn,
	.pea-lpp .pea-opt { transition: none; }
}

/* --- 13. E-commerce (subordinado) ---------------------------------------- */
.pea-ec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr); gap: var(--s2); align-items: center; }

/* La pieza flota libre sobre el fondo: sin marco, sin tarjeta y sin sombra.
   Se acerca al texto para cerrar el vacio central y sube unos pixeles para
   que su centro optico dialogue con el titulo. */
.pea-ec__media {
	display: flex; align-items: center; justify-content: center;
	margin-block: -30px 30px;
	margin-inline-start: clamp(-56px, -3vw, -16px);
}
.pea-ec__img {
	display: block;
	width: min(100%, 860px);        /* +13% sobre los 760px anteriores */
	height: auto;
	object-fit: contain;
}

/* El bloque arranca antes: menos vacio superior sin pegarse al anterior. */
#ecommerce.pea-sec--tight { padding-top: clamp(40px, 5vw, 74px); }

@media (max-width: 1200px) {
	.pea-ec__img { width: min(100%, 720px); }
	.pea-ec__media { margin-inline-start: clamp(-32px, -2vw, -10px); }
}
@media (max-width: 900px) {
	.pea-ec { grid-template-columns: 1fr; gap: var(--s3); }
	/* En una sola columna la imagen recupera su sitio y su separacion. */
	.pea-ec__media { margin-block: 0; margin-inline-start: 0; }
	.pea-ec__img { width: min(100%, 620px); }
}
@media (max-width: 560px) {
	.pea-ec__img { width: 100%; }
}

/* --- 14. Complementarios ------------------------------------------------- */
.pea-plus {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
	justify-content: space-between;
	border-block: 1px solid var(--rule-2);
	padding-block: var(--s3);
}
.pea-plus__list { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: baseline; }
.pea-plus__item { font-family: var(--f-display); font-size: clamp(1.15rem, 2vw, 1.8rem); font-variation-settings: "wght" 600, "wdth" 94; letter-spacing: -0.028em; }
.pea-plus__item::after { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--o-500); margin-left: 12px; vertical-align: middle; }

/* --- 15. Agenda ---------------------------------------------------------- */
.pea-book { --bevel: var(--bevel-lg); background: var(--ink-2); padding: var(--s3); display: grid; gap: var(--s3); }
.pea-book__steps { display: flex; align-items: center; gap: 12px; }
.pea-book__dot { width: 9px; height: 9px; background: var(--rule-ink-2); }
.pea-book__dot.is-on { background: var(--o-500); }

.pea-book__pane[hidden] { display: none; }
.pea-book__cal { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s3); }
@media (max-width: 860px) { .pea-book__cal { grid-template-columns: 1fr; } }

.pea-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--s2); }
.pea-cal__nav { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; box-shadow: inset 0 0 0 1px var(--rule-ink-2); }
.pea-cal__nav:hover { background: rgba(250, 247, 242, 0.08); }
.pea-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pea-cal__dow { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-ink); text-align: center; padding-block: 6px; }
.pea-cal__day {
	position: relative; aspect-ratio: 1; min-height: 42px;
	display: grid; place-content: center;
	font-family: var(--f-mono); font-size: 0.82rem; font-variant-numeric: tabular-nums;
	color: var(--paper);
	background: rgba(250, 247, 242, 0.06);
	--bevel: 8px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)));
	transition: background-color 200ms var(--e-out);
}
.pea-cal__day:hover:not(:disabled) { background: rgba(250, 247, 242, 0.1); }
.pea-cal__day:disabled { color: rgba(250, 247, 242, 0.25); cursor: default; }
.pea-cal__day[aria-pressed="true"] { background: var(--o-500); color: var(--ink); }

.pea-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.pea-slot {
	position: relative; padding: 13px 10px; min-height: 48px;
	font-family: var(--f-mono); font-size: 0.8rem; font-variant-numeric: tabular-nums;
	color: var(--paper); background: rgba(250, 247, 242, 0.09);
	--bevel: 9px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)));
	transition: background-color 200ms var(--e-out);
}
.pea-slot:hover { background: rgba(250, 247, 242, 0.1); }
.pea-slot[aria-pressed="true"] { background: var(--o-500); color: var(--ink); box-shadow: none; }

.pea-tz { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--s2); }
.pea-tz select {
	font: inherit; font-family: var(--f-mono); font-size: 0.72rem;
	background: transparent; color: var(--paper);
	border: 0; border-bottom: 2px solid var(--rule-ink-2);
	padding: 8px 4px; min-height: 42px;
}
.pea-tz select option { color: #14110f; }

.pea-field { display: grid; gap: 8px; }
.pea-field > label { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-ink); }
.pea-field input, .pea-field textarea {
	font: inherit; font-size: 1rem; color: var(--paper); background: transparent;
	border: 0; border-bottom: 2px solid var(--rule-ink-2);
	padding: 13px 2px; min-height: 50px; width: 100%;
	transition: border-color 240ms var(--e-out);
}
.pea-field input:focus, .pea-field textarea:focus { border-bottom-color: var(--o-500); outline: none; }
.pea-field:focus-within > label { color: var(--o-500); }
.pea-req { color: var(--o-500); }

.pea-book__summary { display: flex; flex-wrap: wrap; gap: 10px var(--s2); align-items: center; padding-block: var(--s2); border-block: 1px solid var(--rule-ink); }

/* Modal */
.pea-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--s2); }
.pea-modal[hidden] { display: none; }
.pea-modal__scrim { position: absolute; inset: 0; background: rgba(20, 17, 15, 0.72); backdrop-filter: blur(3px); }
.pea-modal__box {
	position: relative; z-index: 2;
	width: min(1080px, 100%); max-height: 92svh; overflow-y: auto;
	background: var(--ink); color: var(--paper);
	--bevel: var(--bevel-lg);
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)));
}
.pea-modal__head { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--rule-ink); position: sticky; top: 0; background: var(--ink); z-index: 3; }
.pea-modal__close { margin-left: auto; width: 46px; height: 46px; display: grid; place-content: center; box-shadow: inset 0 0 0 1px var(--rule-ink-2); }
.pea-modal__close:hover { background: rgba(250, 247, 242, 0.1); }
.pea-modal__body { padding: var(--s3); }

/* --- 16. Capa CTA persistente (unica) ------------------------------------ */
.pea-cta {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
	display: flex; align-items: center; gap: var(--s2);
	padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom, 0px));
	background: var(--ink); color: var(--paper);
	border-top: 2px solid var(--o-500);
	transform: translateY(101%);
	transition: transform 420ms var(--e-out);
}
.pea-cta.is-on { transform: none; }
.pea-cta__txt { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted-ink); }
.pea-cta__end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pea-cta__x { width: 42px; height: 42px; display: grid; place-content: center; box-shadow: inset 0 0 0 1px var(--rule-ink-2); }

/* WhatsApp contextual: nunca flotante suelto */
.pea-wa {
	display: inline-flex; align-items: center; gap: 9px;
	font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
	padding: 13px 16px; min-height: 46px;
	background: var(--paper-2); color: var(--ink);
	box-shadow: inset 0 0 0 2px var(--rule-2);
	--bevel: 9px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)));
	transition: background-color 240ms var(--e-out), color 240ms var(--e-out);
}
.pea-wa:hover { background: var(--ink); color: var(--paper); }
.pea-dark .pea-wa, .pea-cta .pea-wa { background: rgba(250, 247, 242, 0.1); color: var(--paper); box-shadow: inset 0 0 0 2px var(--rule-ink-2); }
.pea-dark .pea-wa:hover, .pea-cta .pea-wa:hover { background: var(--paper); color: var(--ink); }
.pea-orange .pea-wa { background: rgba(255, 255, 255, 0.55); color: var(--ink); box-shadow: none; }

/* --- 17. Footer ---------------------------------------------------------- */
.pea-ftr { background: var(--ink); color: var(--paper); --muted: var(--muted-ink); --rule: var(--rule-ink); padding-block: var(--s4) var(--s2); }
.pea-ftr__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 0.8fr)); gap: var(--s3); }
.pea-ftr__iso { width: 58px; margin-bottom: var(--s2); }
/* Objetivos de puntero: >=24 CSS px de alto (WCAG 2.2 AA, Target Size). */
.pea-ftr__list { display: grid; gap: 6px; font-size: 0.95rem; }
.pea-ftr__list a, .pea-ftr__list li { display: inline-block; padding-block: 5px; min-height: 26px; }
.pea-ftr__list a:hover { color: var(--o-500); }
.pea-ftr__legal { margin-top: var(--s4); border-top: 1px solid var(--rule-ink); padding-top: var(--s2); display: flex; flex-wrap: wrap; gap: 12px var(--s3); align-items: center; justify-content: space-between; }
@media (max-width: 900px) { .pea-ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pea-ftr__grid { grid-template-columns: 1fr; } }

/* --- 18. Paginas internas ------------------------------------------------ */
.pea-phero { padding-top: calc(var(--hdr-h) + var(--s4)); padding-bottom: var(--s3); border-bottom: 1px solid var(--rule-2); }
.pea-prose { max-width: 70ch; font-size: 1.06rem; line-height: 1.72; }
.pea-prose h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); margin: 1.9em 0 0.55em; }
.pea-prose h3 { font-size: clamp(1.2rem, 1.9vw, 1.6rem); margin: 1.7em 0 0.45em; }
.pea-prose a { color: var(--o-700); border-bottom: 1px solid currentColor; }
.pea-prose ul { list-style: disc; padding-left: 1.25em; margin: 0 0 1.2em; }
.pea-prose li { margin-bottom: 0.4em; }

.pea-empty { --bevel: var(--bevel-lg); background: var(--paper-2); clip-path: polygon(0 0, 100% 0, 100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel))); padding: var(--s4) var(--s2); display: grid; gap: var(--s2); justify-items: center; text-align: center; }
.pea-empty__iso { width: 56px; }

/* --- 19. Movimiento ------------------------------------------------------ */
.pea-js [data-rv] { opacity: 0; transform: translateY(14px); }
.pea-js [data-rv].is-in {
	opacity: 1; transform: none;
	transition: opacity var(--t-sub) var(--e-out), transform var(--t-std) var(--e-out);
	transition-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
	.pea-js [data-rv] { opacity: 1; transform: none; }
	.pea-demo.is-playing .pea-demo__track { animation: none; }
	.pea-js .pea-rule { transform: scaleX(1); }
}

/* --- 20. Responsive ------------------------------------------------------ */
@media (max-width: 1080px) {
	.pea-nav { display: none; }
	.pea-burger { display: inline-flex; }
	.pea-hdr__end { margin-left: auto; }
}

@media (max-width: 820px) {
	/* En pantallas estrechas el CTA vive en la barra persistente, no en la
	   cabecera: dos llamadas identicas competirian por el mismo espacio. */
	.pea-hdr__cta { display: none; }
	.pea-burger span { display: none; }
	.pea-burger { padding: 12px; }
}

@media (max-width: 900px) {
	/* minmax(0,1fr) y no 1fr: 1fr equivale a minmax(auto,1fr) y deja que el
	   contenido reviente la columna en pantallas estrechas. */
	.pea-hero__grid {
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(34px, 6vw, 56px);
	margin-top: 0;
}
	.pea-hero {
	min-height: auto;
	padding-top: calc(var(--hdr-h) + 18px);}
	.pea-hero__copy { max-width: 100%; }
	.pea-hero__title { max-width: 15ch; }
	.pea-hero__stage { margin-right: calc(var(--gut) * -1); margin-left: 0; }
	.pea-hero__glow { right: -30%; top: 30%; width: 120vw; }
	.pea-demo { --bevel: 22px; }
	.pea-ruled::before { display: none; }
}

@media (max-width: 560px) {
	/* El movil superpuesto deja de aportar cuando la escena es estrecha:
	   estorba mas de lo que ensena. */
	.pea-shw { padding-left: 0; padding-bottom: 34px; }
	.pea-shw__phone { display: none; }
	.pea-shw__desk { border-radius: 10px; }
	.pea-hero__cta { gap: 8px; }
	.pea-hero__cta .pea-btn { width: 100%; justify-content: center; }
}

@media (max-width: 420px) {
	/* Etiquetas largas dejan de ser indivisibles en pantallas muy estrechas. */
	.pea-btn { white-space: normal; text-align: center; }
	.pea-demo__url { display: none; }
	.pea-demo__ctrl span:last-child { display: none; }
	.pea-demo__ctrl { margin-left: auto; }
}

@media (max-width: 720px) {
	.pea-cta { padding-inline: var(--gut); }
	.pea-cta__txt { display: none; }
	.pea-cta__end { margin-left: 0; width: 100%; }
	.pea-cta .pea-btn { flex: 1 1 auto; justify-content: center; }
	.pea-cta .pea-wa { flex: 0 0 auto; }
	.pea-modal { padding: 0; }
	.pea-modal__box { width: 100%; max-height: 100svh; height: 100svh; clip-path: none; }
	.pea-est { padding: var(--s2); }
	.pea-book { padding: var(--s2); }
}

@media (max-width: 520px) {
	.pea-plus { flex-direction: column; align-items: flex-start; }
	.pea-cta .pea-wa span { display: none; }
	.pea-cta .pea-wa { padding-inline: 14px; }
}

/* =========================================================
   DEMOSTRACIÓN · TRANSFORMACIÓN DE UN SOLO CLIC
   Un estado por pieza en [data-comp-state]:
   before · to-after · after · to-before
   ========================================================= */

.pea-comp__layer {
	position: absolute; inset: 0;
	display: grid;
	will-change: opacity, filter, transform;
}
.pea-comp__layer .pea-comp__img,
.pea-comp--detail .pea-comp__img {
	width: 100%; height: 100%;
	object-fit: contain; object-position: center top;
}

/* Reposo: solo se ve una de las dos versiones */
.pea-comp__layer--before { opacity: 1; }
.pea-comp__layer--after { opacity: 0; }
.pea-comp[data-comp-state="after"] .pea-comp__layer--before { opacity: 0; }
.pea-comp[data-comp-state="after"] .pea-comp__layer--after { opacity: 1; }
/* La capa oculta no debe recibir el foco ni leerse */
.pea-comp:not([data-comp-state="after"]) .pea-comp__layer--after,
.pea-comp[data-comp-state="after"] .pea-comp__layer--before { pointer-events: none; }


/* =========================================================
   LA ATMÓSFERA
   Todo ocurre dentro de .pea-comp__fx, que cubre el 100% del
   preview. Fases de la ida (3 s):
     0.00–0.45  destellos junto al botón y luego por toda la web
     0.35–1.20  el humo blanco se expande desde varios puntos
     0.80–1.70  la web antigua se desmaterializa tras la niebla
     0.75–1.55  la onda naranja cruza la superficie completa
     1.40–2.40  la web nueva emerge desde detrás del humo
     2.30–3.10  el humo se disipa y quedan los últimos destellos
   ========================================================= */
.pea-comp__fx {
	position: absolute; inset: 0; z-index: 4;
	pointer-events: none; overflow: hidden;
	border-radius: inherit;
}
.pea-comp__fx:empty { display: none; }

/* --- Onda de luz: ancha, con núcleo claro, sin aire de láser ------- */
.pea-fx__beam {
	position: absolute; inset: -6% -26%;
	background: linear-gradient(
		101deg,
		rgba(238, 122, 32, 0) 40%,
		rgba(238, 122, 32, .5) 45.5%,
		rgba(248, 156, 68, .85) 48.4%,
		rgba(255, 236, 212, .98) 50%,
		rgba(248, 156, 68, .85) 51.6%,
		rgba(238, 122, 32, .5) 54.5%,
		rgba(238, 122, 32, 0) 60%);
	box-shadow: 0 0 60px rgba(240, 124, 43, .35);
	filter: blur(3px);
	opacity: 0;
	z-index: 2;
}
.pea-comp[data-comp-state="to-after"] .pea-fx__beam {
	animation: pea-fx-beam 800ms cubic-bezier(.36, 0, .26, 1) 750ms both;
}
.pea-comp[data-comp-state="to-before"] .pea-fx__beam {
	animation: pea-fx-beam 560ms cubic-bezier(.36, 0, .26, 1) 260ms both;
}
@keyframes pea-fx-beam {
	0%   { opacity: 0; transform: translateX(-78%); }
	16%  { opacity: 1; }
	84%  { opacity: 1; }
	100% { opacity: 0; transform: translateX(78%); }
}

/* --- Humo: nubes independientes, vaporosas y de bordes difusos ----- */
.pea-fx__cloud {
	position: absolute;
	left: var(--l); top: var(--t);
	width: var(--s); aspect-ratio: 1;
	transform: translate(-50%, -50%) scale(.28);
	border-radius: 50%;
	background:
		radial-gradient(closest-side at 40% 36%, rgba(255, 255, 255, 1), rgba(255, 253, 249, .92) 30%, rgba(255, 250, 243, .5) 56%, rgba(255, 246, 236, 0) 80%),
		radial-gradient(closest-side at 68% 64%, rgba(255, 252, 246, .95), rgba(255, 248, 238, .42) 48%, rgba(255, 244, 232, 0) 76%);
	filter: blur(9px);
	opacity: 0;
	z-index: 1;
	will-change: transform, opacity;
}
/* Segunda masa desplazada: rompe el circulo y da volumen irregular */
.pea-fx__cloud::before {
	content: ""; position: absolute; inset: -18% -12% 12% -22%;
	border-radius: 50%;
	background: radial-gradient(closest-side at 56% 46%, rgba(255, 255, 255, .96), rgba(255, 250, 242, .38) 52%, rgba(255, 246, 236, 0) 78%);
	filter: blur(11px);
}
.pea-fx__cloud:nth-child(3n) { filter: blur(14px); }
.pea-fx__cloud:nth-child(4n) { filter: blur(7px); }
.pea-fx__cloud:nth-child(odd)::before { inset: 10% -24% -16% -6%; }
.pea-comp[data-comp-state="to-after"] .pea-fx__cloud {
	animation: pea-fx-cloud 2500ms cubic-bezier(.22, .6, .28, 1) var(--d, 0ms) both;
}
.pea-comp[data-comp-state="to-before"] .pea-fx__cloud {
	animation: pea-fx-cloud 1380ms cubic-bezier(.22, .6, .28, 1) var(--d, 0ms) both;
}
@keyframes pea-fx-cloud {
	0%   { opacity: 0; transform: translate(-50%, -50%) scale(.26); }
	22%  { opacity: .72; }
	46%  { opacity: .84; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(1); }
	72%  { opacity: .58; transform: translate(calc(-50% + var(--dx, 0px) * 1.6), calc(-50% + var(--dy, 0px) * 2.2)) scale(1.2); }
	100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px) * 2.4), calc(-50% + var(--dy, 0px) * 3.6)) scale(1.4); }
}

/* --- Destellos: repartidos por toda la superficie ------------------ */
.pea-fx__p {
	position: absolute;
	left: var(--l); top: var(--t);
	width: var(--s); height: var(--s);
	display: grid; place-items: center;
	font-size: var(--s); line-height: 1; font-style: normal;
	opacity: 0;
	z-index: 3;
	will-change: transform, opacity;
}
.pea-fx__p.is-warm {
	color: #ff9a3d;
	text-shadow: 0 0 6px rgba(255, 154, 61, .95), 0 0 16px rgba(240, 124, 43, .75);
	filter: drop-shadow(0 0 5px rgba(240, 124, 43, .6));
}
.pea-fx__p.is-cream {
	color: #ffdcae;
	text-shadow: 0 0 6px rgba(255, 220, 174, 1), 0 0 18px rgba(255, 198, 132, .8);
	filter: drop-shadow(0 0 5px rgba(255, 205, 150, .6));
}
.pea-fx__p.is-white {
	color: #ffffff;
	text-shadow: 0 0 7px rgba(255, 255, 255, 1), 0 0 20px rgba(255, 236, 214, .9);
	filter: drop-shadow(0 0 6px rgba(255, 246, 232, .7));
}

/* Punto luminoso y rombo: sin glifo, dibujados con CSS */
.pea-fx__p.is-dot::before {
	content: ""; width: 42%; height: 42%; border-radius: 50%;
	background: currentColor; box-shadow: 0 0 9px currentColor;
}
.pea-fx__p.is-diamond::before {
	content: ""; width: 56%; height: 56%;
	background: currentColor; box-shadow: 0 0 9px currentColor;
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.pea-comp[data-comp-state="to-after"] .pea-fx__p {
	animation: pea-fx-spark 1000ms cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) both;
}
.pea-comp[data-comp-state="to-before"] .pea-fx__p {
	animation: pea-fx-spark 760ms cubic-bezier(.2, .7, .2, 1) var(--d, 0ms) both;
}
@keyframes pea-fx-spark {
	0%   { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0deg); }
	18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(calc(var(--r, 0deg) * .3)); }
	52%  { opacity: 1; transform: translate(calc(-50% + var(--dx, 0px) * .45), calc(-50% + var(--dy, 0px) * .45)) scale(1); }
	100% { opacity: 0;
	       transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)))
	                  scale(.5) rotate(var(--r, 0deg)); }
}

/* --- La web antigua se desmaterializa tras la niebla --------------- */
.pea-comp[data-comp-state="to-after"] .pea-comp__layer--before {
	animation: pea-comp-out 1500ms cubic-bezier(.4, 0, .25, 1) 700ms both;
}
.pea-comp[data-comp-state="to-after"] .pea-comp__layer--after {
	animation: pea-comp-in 1100ms cubic-bezier(.2, .7, .2, 1) 1400ms both;
}
.pea-comp[data-comp-state="to-before"] .pea-comp__layer--after {
	animation: pea-comp-out 820ms cubic-bezier(.4, 0, .25, 1) 220ms both;
}
.pea-comp[data-comp-state="to-before"] .pea-comp__layer--before {
	animation: pea-comp-in 760ms cubic-bezier(.2, .7, .2, 1) 780ms both;
}

@keyframes pea-comp-out {
	0%   { opacity: 1; filter: none; transform: none; }
	35%  { opacity: .82; filter: blur(1.2px) saturate(.78) contrast(.9) brightness(1.06); transform: scale(1.004); }
	70%  { opacity: .42; filter: blur(4px) saturate(.5) contrast(.78) brightness(1.12); transform: scale(1.009); }
	100% { opacity: 0; filter: blur(8px) saturate(.32) contrast(.7) brightness(1.16); transform: scale(1.014); }
}
@keyframes pea-comp-in {
	0%   { opacity: 0; filter: blur(11px) saturate(1.3) brightness(1.22); transform: scale(.988) translateY(8px); }
	38%  { opacity: .55; filter: blur(5px) saturate(1.18) brightness(1.12); transform: scale(.995) translateY(4px); }
	72%  { opacity: .9; filter: blur(1.6px) saturate(1.06) brightness(1.04); transform: scale(.999) translateY(1px); }
	100% { opacity: 1; filter: none; transform: none; }
}

/* --- Etiqueta discreta --------------------------------------------- */
.pea-comp__label {
	position: absolute; top: 14px; left: 14px; z-index: 6;
	display: inline-flex; align-items: center;
	font-family: var(--f-mono); font-size: .58rem;
	letter-spacing: .13em; text-transform: uppercase;
	padding: 6px 10px; border-radius: 999px;
	background: rgba(20, 17, 15, .72); color: var(--paper);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	transition: background-color .3s ease, color .3s ease;
}
.pea-comp__labelTx { font-weight: 500; }
/* La etiqueta solo se actualiza al terminar la secuencia. */
.pea-comp__labelTx--b,
.pea-comp[data-comp-state="after"] .pea-comp__labelTx--a { display: none; }
.pea-comp[data-comp-state="after"] .pea-comp__labelTx--b { display: inline; }
.pea-comp[data-comp-state="after"] .pea-comp__label {
	background: var(--o-500); color: var(--ink);
}

/* --- Botón protagonista -------------------------------------------- */
.pea-comp__cta {
	position: absolute; z-index: 9;
	left: 50%; bottom: clamp(14px, 2.6cqw, 30px);
	transform: translateX(-50%);
}
.pea-comp__morph {
	position: relative; z-index: 2;
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 48px; padding: 12px 24px;
	border: 0; border-radius: 999px;
	font-family: var(--f-text); font-size: .95rem; font-weight: 600;
	letter-spacing: -.008em; white-space: nowrap; cursor: pointer;
	color: #171310;
	background: linear-gradient(168deg, #ffb371 0%, var(--o-500) 46%, #e8681a 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .5),
		0 2px 6px rgba(20, 17, 15, .16),
		0 14px 34px -14px rgba(234, 88, 12, .78);
	transition: transform .22s var(--e-out), box-shadow .22s var(--e-out), opacity .22s var(--e-out);
}
.pea-comp__morph:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.pea-comp__morph:active:not(:disabled) { transform: scale(.97); }
.pea-comp__morph:disabled { cursor: default; opacity: .82; }
/* Pulso breve al arrancar: la accion se anuncia y pasa a la web. */
.pea-comp[data-comp-state="to-after"] .pea-comp__morph,
.pea-comp[data-comp-state="to-before"] .pea-comp__morph {
	animation: pea-fx-press 450ms cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes pea-fx-press {
	0%   { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 14px 34px -14px rgba(234, 88, 12, .78); }
	26%  { transform: scale(.955); }
	62%  { transform: scale(1.035); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 10px rgba(240, 124, 43, .16), 0 18px 40px -14px rgba(234, 88, 12, .9); }
	100% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 14px 34px -14px rgba(234, 88, 12, .78); }
}
@media (hover: hover) and (pointer: fine) {
	.pea-comp__morph:hover:not(:disabled) {
		transform: translateY(-1px);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, .62),
			0 2px 8px rgba(20, 17, 15, .18),
			0 18px 40px -14px rgba(234, 88, 12, .9);
	}
	/* Brillo breve, solo en interacción */
	.pea-comp__morph:hover:not(:disabled) .pea-comp__morphIcon--fwd { transform: rotate(28deg) scale(1.14); }
}
.pea-comp__morphIcon {
	font-size: 1.02rem; line-height: 1;
	transition: transform .28s var(--e-out);
}
.pea-comp__morphIcon--back { display: none; }
.pea-comp__morphTx--b { display: none; }
.pea-comp[data-comp-state="after"] .pea-comp__morphTx--a,
.pea-comp[data-comp-state="after"] .pea-comp__morphIcon--fwd { display: none; }
.pea-comp[data-comp-state="after"] .pea-comp__morphTx--b,
.pea-comp[data-comp-state="after"] .pea-comp__morphIcon--back { display: inline; }
.pea-comp[data-comp-state="after"] .pea-comp__morph {
	background: linear-gradient(168deg, #fdfaf6 0%, #f1e8dd 100%);
	color: var(--ink);
	box-shadow:
		inset 0 0 0 1px rgba(20, 17, 15, .14),
		0 2px 6px rgba(20, 17, 15, .12),
		0 14px 30px -18px rgba(20, 17, 15, .5);
}

@keyframes pea-comp-spark {
	0%   { opacity: 0; transform: rotate(var(--a)) translateX(4px) rotate(calc(var(--a) * -1)) scale(.4); }
	22%  { opacity: 1; }
	100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) rotate(calc(var(--a) * -1)) scale(1); }
}

/* --- Movimiento reducido: un fundido corto y nada más ---------------- */
@media (prefers-reduced-motion: reduce) {
	.pea-comp[data-comp-state="to-after"] .pea-comp__layer--before,
	.pea-comp[data-comp-state="to-before"] .pea-comp__layer--after {
		animation: pea-comp-fade-out 220ms linear both;
	}
	.pea-comp[data-comp-state="to-after"] .pea-comp__layer--after,
	.pea-comp[data-comp-state="to-before"] .pea-comp__layer--before {
		animation: pea-comp-fade-in 220ms linear both;
	}
	.pea-comp__fx { display: none !important; }
	.pea-comp[data-comp-state="to-after"] .pea-comp__morph,
	.pea-comp[data-comp-state="to-before"] .pea-comp__morph { animation: none; }
	.pea-comp__morph, .pea-comp__morphIcon, .pea-comp__label { transition: none; }
}
@keyframes pea-comp-fade-out { to { opacity: 0; } }
@keyframes pea-comp-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* --- Adaptaciones ---------------------------------------------------- */
/* En pantallas pequenas la niebla se aligera: mismo relato, menos carga. */
@media (max-width: 1023px) {
	.pea-fx__cloud { filter: blur(13px); }
	.pea-fx__cloud:nth-child(3n) { filter: blur(18px); }
}
@media (max-width: 700px) {
	.pea-fx__beam { filter: blur(4px); }
	.pea-fx__cloud { filter: blur(10px); }
	.pea-fx__cloud:nth-child(3n) { filter: blur(14px); }

	/* Sin dos webs a la vez, la demostración ocupa todo el ancho del
	   dispositivo: se distinguen hero, servicios y pie del sitio. */
	.pea-comp {
		width: auto;
		margin-inline: calc(var(--gut) * -1);
		border-radius: 0;
		border-inline: 0;
	}
	.pea-comp__label { top: 10px; left: 10px; font-size: .54rem; padding: 5px 9px; }
	.pea-comp__cta { bottom: 12px; }
	.pea-comp__morph { min-height: 46px; padding: 11px 18px; font-size: .9rem; gap: 8px; }
}
@media (max-width: 400px) {
	.pea-comp__morph { padding: 11px 14px; font-size: .84rem; }
}

/* =========================================================
   COMPARADOR · VISOR DE DETALLE
   ========================================================= */

.pea-comp-detail {
	width: min(94vw, 1480px);
	max-width: none;
	height: auto;
	max-height: 92vh;
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: transparent;
	color: var(--ink);
	overflow: visible;
}

.pea-comp-detail::backdrop {
	background: rgba(20, 17, 15, .74);
	backdrop-filter: blur(8px);
}

.pea-comp-detail__shell {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	max-height: 92vh;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 18px;
	background:
		radial-gradient(
			90% 120% at 100% 0%,
			rgba(240, 124, 43, .10),
			transparent 48%
		),
		#f7f4ef;
	box-shadow:
		0 40px 100px rgba(0, 0, 0, .36),
		inset 0 1px 0 rgba(255, 255, 255, .9);
}

.pea-comp-detail__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 20px;
	border-bottom: 1px solid rgba(20, 17, 15, .10);
	background: rgba(255, 255, 255, .72);
}

.pea-comp-detail__heading {
	min-width: 0;
}

.pea-comp-detail__kicker {
	display: block;
	margin-bottom: 3px;
	font-family: var(--f-mono);
	font-size: .66rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--o-700);
}

.pea-comp-detail__title {
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(1.1rem, 2vw, 1.55rem);
	font-weight: 600;
	line-height: 1.1;
}

.pea-comp-detail__tools {
	display: flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
}

.pea-comp-detail__tool,
.pea-comp-detail__zoom,
.pea-comp-detail__close {
	display: inline-grid;
	place-items: center;
	height: 40px;
	border: 1px solid rgba(20, 17, 15, .14);
	background: rgba(255, 255, 255, .78);
	color: var(--ink);
	font-family: var(--f-text);
	cursor: pointer;
	transition:
		background-color .2s ease,
		border-color .2s ease,
		transform .2s ease;
}

.pea-comp-detail__tool {
	width: 40px;
	border-radius: 50%;
	font-size: 1.25rem;
}

.pea-comp-detail__zoom {
	min-width: 68px;
	padding: 0 12px;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 600;
}

.pea-comp-detail__close {
	width: 40px;
	margin-left: 7px;
	border-color: rgba(240, 124, 43, .28);
	border-radius: 50%;
	font-size: 1.35rem;
}

@media (hover: hover) and (pointer: fine) {
	.pea-comp-detail__tool:hover,
	.pea-comp-detail__zoom:hover,
	.pea-comp-detail__close:hover {
		background: rgba(240, 124, 43, .09);
		border-color: rgba(240, 124, 43, .48);
		transform: translateY(-1px);
	}
}

.pea-comp-detail__viewport {
	position: relative;
	overflow: auto;
	padding: 22px;
	background:
		linear-gradient(
			rgba(20, 17, 15, .025) 1px,
			transparent 1px
		),
		linear-gradient(
			90deg,
			rgba(20, 17, 15, .025) 1px,
			transparent 1px
		),
		#ece8e1;
	background-size: 28px 28px;
}

.pea-comp-detail__stage {
	width: 100%;
	min-width: 0;
	transform-origin: top left;
	transition: width .22s ease;
}

.pea-comp--detail {
	width: 100%;
	max-width: none;
	margin: 0;
	border-radius: 12px;
	box-shadow:
		0 22px 50px -34px rgba(20, 17, 15, .55);
}

.pea-comp--detail .pea-comp__pane {
	aspect-ratio: 1448 / 1086;
}
.pea-comp--detail { background: var(--paper); }
/* En el visor la etiqueta solo informa de que version se esta mirando */
.pea-comp--detail .pea-comp__label { top: 12px; left: 12px; }

.pea-comp-detail__foot {
	padding: 12px 20px 14px;
	border-top: 1px solid rgba(20, 17, 15, .08);
	background: rgba(255, 255, 255, .72);
}

.pea-comp-detail__hint {
	margin: 0;
	font-family: var(--f-text);
	font-size: .78rem;
	line-height: 1.45;
	color: #69615b;
}

@media (max-width: 720px) {
	.pea-comp-detail {
		width: 96vw;
		max-height: 94vh;
	}

	.pea-comp-detail__shell {
		max-height: 94vh;
	}

	.pea-comp-detail__head {
		align-items: flex-start;
		padding: 14px;
	}

	.pea-comp-detail__tools {
		gap: 5px;
	}

	.pea-comp-detail__tool,
	.pea-comp-detail__close {
		width: 38px;
		height: 38px;
	}

	.pea-comp-detail__zoom {
		display: none;
	}

	.pea-comp-detail__viewport {
		padding: 12px;
	}

	.pea-comp-detail__foot {
		padding: 10px 14px 12px;
	}
}

/* Ver detalle integrado sobre el comparador */
.pea-comp__actions {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 8;
	width: auto;
	margin: 0;
}

.pea-comp__detail {
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, .82);
}

/* Ver detalle: control secundario, en la esquina y sin competir con el
   botón de transformación. */
.pea-comp__actions {
	position: absolute;
	right: 14px;
	top: 14px;
	bottom: auto;
	z-index: 8;
	margin: 0;
}

.pea-comp__detail {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 46px;
	padding: 11px 18px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 999px;
	background:
		linear-gradient(135deg, #ff9a48 0%, var(--o-500) 55%, #eb6718 100%);
	color: var(--ink);
	font-family: var(--f-text);
	font-size: .9rem;
	font-weight: 700;
	cursor: pointer;
	box-shadow:
		0 8px 24px rgba(240, 124, 43, .30),
		0 2px 8px rgba(20, 17, 15, .16),
		inset 0 1px 0 rgba(255, 255, 255, .45);
	backdrop-filter: blur(10px);
	transition:
		transform .22s ease,
		box-shadow .22s ease,
		filter .22s ease;
}

.pea-comp__detailIcon {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(20, 17, 15, .12);
	color: var(--ink);
	font-size: 1.15rem;
	line-height: 1;
	transition: transform .22s ease;
}

@media (hover: hover) and (pointer: fine) {
	.pea-comp__detail:hover {
		transform: translateY(-2px) scale(1.025);
		box-shadow:
			0 12px 32px rgba(240, 124, 43, .42),
			0 4px 12px rgba(20, 17, 15, .18),
			inset 0 1px 0 rgba(255, 255, 255, .55);
		filter: saturate(1.08);
	}

	.pea-comp__detail:hover .pea-comp__detailIcon {
		transform: scale(1.12);
	}
}

/* =========================================================
   COMPARADOR · AJUSTES FINALES
   ========================================================= */

/* Marco con un poco más de profundidad */
.pea-comp {
	border: 1px solid rgba(20, 17, 15, .12);
	box-shadow:
		0 4px 12px rgba(20, 17, 15, .07),
		0 34px 70px -38px rgba(20, 17, 15, .48);
}




.pea-comp__detail {
box-shadow:
0 10px 28px rgba(240, 124, 43, .38),
0 3px 9px rgba(20, 17, 15, .18),
inset 0 1px 0 rgba(255, 255, 255, .52);
}

.pea-comp__detailIcon {
background: rgba(20, 17, 15, .16);
font-size: 1.22rem;
}

/* Ver detalle: control secundario. Se resuelve al final para desactivar los
   realces anteriores sin borrarlos y sin tocar el visor ampliado. */
.pea-comp__detail {
	gap: 6px;
	min-height: 36px;
	padding: 7px 13px;
	border: 1px solid rgba(20, 17, 15, .14);
	border-radius: 999px;
	background: rgba(255, 255, 255, .82);
	-webkit-backdrop-filter: blur(10px) saturate(1.2);
	backdrop-filter: blur(10px) saturate(1.2);
	color: var(--ink);
	font-size: .76rem;
	font-weight: 500;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		0 6px 16px -12px rgba(20, 17, 15, .4);
	filter: none;
	transform: none;
}
.pea-comp__detailIcon {
	background: none;
	color: var(--o-700);
	font-size: .95rem;
}
.pea-comp__detail:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
	.pea-comp__detail:hover {
		background: var(--white);
		border-color: rgba(20, 17, 15, .26);
		transform: none;
		filter: none;
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, .95),
			0 8px 20px -12px rgba(20, 17, 15, .45);
	}
	.pea-comp__detail:hover .pea-comp__detailIcon { transform: none; }
}


/* =========================================================================
   22. PAGINA DE E-COMMERCE  (.pea-ep)
   -------------------------------------------------------------------------
   Segunda especialidad de la casa. Reutiliza la reticula, la tipografia, el
   bisel y los botones del sistema; solo anade la composicion propia de esta
   pagina. Namespace unico: .pea-ep*.
   ========================================================================= */

/* Iconografia lineal compartida ------------------------------------------ */
.pea-ico { width: 24px; height: 24px; flex: 0 0 auto; color: var(--o-600); }

/* --- Hero ---------------------------------------------------------------- */
.pea-ep__hero {
	background: var(--paper);
	/* Antes sumaba 64 px sobre la altura de cabecera y el contenido caia
	   demasiado abajo. Ahora entra ~45 px antes sin pegarse al header. */
	padding-top: calc(var(--hdr-h) + clamp(10px, 1vw, 14px));
	padding-bottom: clamp(36px, 4.4vw, 72px);
	overflow: hidden;                 /* la sangria de la ilustracion nunca desborda */
}
.pea-ep__heroGrid {
	display: grid;
	grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
	gap: clamp(24px, 3vw, 56px);
	align-items: center;
}
/* Estado sin ilustracion (el asset del hero aun no esta depositado).
   El hero no se queda a media pagina: pasa a composicion editorial, con el
   titular a la izquierda y el argumento a la derecha, alineados por la base.
   Al aparecer el PNG, esta rama deja de aplicarse sola. */
.pea-ep__hero--solo .pea-ep__heroGrid { grid-template-columns: minmax(0, 1fr); }
.pea-ep__hero--solo .pea-ep__heroCopy {
	grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
	column-gap: clamp(32px, 5vw, 96px);
	row-gap: var(--s2);
	align-items: end;
}
.pea-ep__hero--solo .pea-ep__heroCopy > .pea-meta { grid-column: 1 / -1; }
.pea-ep__hero--solo .pea-ep__title { grid-column: 1; grid-row: 2 / span 2; max-width: 13ch; }
.pea-ep__hero--solo .pea-ep__lead { grid-column: 2; grid-row: 2; align-self: end; }
.pea-ep__hero--solo .pea-ep__heroCta { grid-column: 2; grid-row: 3; margin-top: 0; }

.pea-ep__heroCopy { display: grid; gap: var(--s2); align-content: center; }

/* El display completo aplastaria una columna del 42 %: aqui se calibra al
   ancho real de la columna, sin renunciar a la escala del titular. */
.pea-ep__title {
	font-size: clamp(2.5rem, 4.6vw, 4.5rem);
	margin: 0;
}
.pea-ep__line { display: block; }
/* Naranja 600 sobre papel: 3.33:1, valido solo a partir de 24px. El titular
   siempre lo supera con holgura. */
.pea-ep__hl { font-style: normal; color: var(--o-600); }

.pea-ep__lead { max-width: 46ch; }

.pea-ep__heroCta {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: var(--s2);
	margin-top: var(--s1);
}
.pea-ep__heroNote { color: var(--muted); }

/* La pieza flota: sin marco, sin sombra de caja y sin fondo propio. Sangra
   un poco hacia el margen para ganar presencia sin salirse de la pagina. */
.pea-ep__heroArt {
	display: flex; align-items: center; justify-content: center;
	margin-inline-end: clamp(-64px, -3vw, 0px);
	/* Su centro optico queda algo por debajo del centro geometrico: se
	   compensa subiendola, sin tocar su tamano. */
	margin-block: -18px 18px;
}
.pea-ep__heroImg {
	width: 100%; height: auto;
	max-width: 980px;
	object-fit: contain;
}
.pea-js .pea-ep__heroArt.is-in .pea-ep__heroImg {
	animation: pea-ep-float 9s var(--e-io) 700ms infinite;
	will-change: transform;
}
@keyframes pea-ep-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-10px); }
}

/* Ritmo vertical propio de la pagina --------------------------------------- */
/* Con --s4 arriba y abajo, dos secciones seguidas dejaban mas de 200 px de
   vacio: premium se confundia con desierto. Aqui el paso es menor, y el
   encabezado de seccion se pega mas a su contenido. */
.pea-ep .pea-sec,
.pea-ep .pea-sec--tight { padding-block: clamp(40px, 4.4vw, 72px); }
.pea-ep .pea-head { margin-bottom: clamp(28px, 3vw, 48px); }
/* El cierre si necesita aire por arriba: separa el argumento de la peticion. */
.pea-ep__close { padding-top: clamp(52px, 6vw, 96px); }
/* Entre el alcance y el proceso se sumaban dos paddings completos y parecia
   faltar contenido. Se recorta por los dos lados de la costura. */
.pea-ep .pea-ep__mods { padding-bottom: clamp(26px, 2.5vw, 40px); }
.pea-ep .pea-ep__proc { padding-top: clamp(32px, 3.1vw, 50px); }

/* --- Franja de capacidades ----------------------------------------------- */
.pea-ep__caps {
	border-block: 1px solid var(--rule);
	background: var(--paper);
}
.pea-ep__capsList {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
.pea-ep__cap {
	display: flex; align-items: center; gap: 10px;
	padding: clamp(11px, 1.15vw, 15px) clamp(10px, 1.4vw, 20px);
	font-family: var(--f-mono);
	font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--ink);
	line-height: 1.3;
	position: relative;
}
/* Division mas leve: un filete corto y centrado en vez de un tabique de
   borde a borde. La franja pasa a leerse como transicion, no como tabla. */
.pea-ep__cap + .pea-ep__cap::before {
	content: "";
	position: absolute; left: 0; top: 50%; transform: translateY(-50%);
	width: 1px; height: 56%;
	background: rgba(20, 17, 15, 0.09);
}
.pea-ep__cap .pea-ico { width: 19px; height: 19px; }

/* --- Que incluye cada tienda --------------------------------------------- */
.pea-ep__modsList {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(20px, 2vw, 34px);
}
/* Bajo relieve deliberado: un filete y aire. Ninguna tarjeta. */
.pea-ep__mod {
	display: grid;
	gap: 0;
	align-content: start;
	padding-top: 16px;
	border-top: 2px solid var(--o-600);
}
.pea-ep__modTop {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	margin-bottom: 14px;
}
.pea-ep__modNum { color: var(--muted); }
/* El icono gana presencia sin fondo ni caja: solo tamano y trazo. */
.pea-ep__modTop .pea-ico { width: 30px; height: 30px; stroke-width: 1.4; }
.pea-ep__modTitle {
	margin: 0 0 8px;
	font-variation-settings: "wght" 660, "wdth" 96, "opsz" 20;
	letter-spacing: -0.022em;
}
.pea-ep__modText {
	margin: 0;
	color: var(--muted);
	font-size: 0.95rem;
	line-height: 1.58;
}

/* Refuerzo comercial al pie de la seccion: el mismo bajo relieve, a lo ancho. */
.pea-ep__grow {
	display: flex; align-items: flex-start; gap: var(--s2);
	margin-top: clamp(22px, 2.4vw, 38px);
	padding-top: 18px;
	border-top: 1px solid var(--rule);
	max-width: 78ch;
}
.pea-ep__grow h3 { margin: 0 0 6px; }
.pea-ep__grow .pea-ico { margin-top: 2px; }

/* --- Proceso ------------------------------------------------------------- */
.pea-ep__procList {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(18px, 1.8vw, 30px);
}
.pea-ep__step {
	position: relative;
	display: grid; gap: 8px; align-content: start;
	padding-top: 30px;
}
/* Conector discreto: una sola linea continua que atraviesa las seis etapas. */
.pea-ep__step::before {
	content: "";
	position: absolute; top: 5px; left: 0; right: calc(-1 * clamp(18px, 1.8vw, 30px));
	height: 1px;
	background: var(--rule);
}
.pea-ep__step:last-child::before { right: 0; }
.pea-ep__step::after {
	content: "";
	position: absolute; top: 1px; left: 0;
	width: 9px; height: 9px;
	background: var(--o-600);
	border-radius: 50%;
}
.pea-ep__stepNum {
	font-size: 0.72rem; letter-spacing: 0.14em;
	color: var(--o-700);
}
.pea-ep__stepTitle { margin: 0; }
.pea-ep__stepText {
	margin: 0;
	/* Un punto mas de contraste que --muted: 8.1:1 sobre papel. */
	color: #4f4740;
	font-size: 0.95rem; line-height: 1.58;
}

/* --- Casos reales (solo si existen) -------------------------------------- */
.pea-ep__casesList {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--s3);
}
.pea-ep__caseLink { display: grid; gap: 12px; color: inherit; }
.pea-ep__caseShot {
	display: block; overflow: hidden;
	--bevel: var(--bevel-lg);
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)));
	background: var(--paper-2);
}
.pea-ep__caseShot img { width: 100%; height: auto; }
.pea-ep__caseTitle { margin: 0; }
.pea-ep__caseMore { display: inline-block; }
.pea-ep__caseLink:hover .pea-ep__caseTitle { color: var(--o-700); }

/* --- Cierre comercial ---------------------------------------------------- */
.pea-ep__close { background: var(--paper); }
/* Caja premium por sutileza, no por peso: papel blanco, filete hairline y una
   sombra apenas perceptible. */
.pea-ep__box {
	--bevel: var(--bevel-lg);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(18px, 2.2vw, 36px);
	align-items: center;
	padding: clamp(24px, 2.5vw, 40px) clamp(30px, 3.4vw, 56px);
	background: var(--white);
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--bevel) 100%, 0 calc(100% - var(--bevel)));
	box-shadow: 0 1px 2px rgba(20, 17, 15, 0.05), 0 24px 48px -32px rgba(20, 17, 15, 0.3);
}
.pea-ep__boxCopy { display: grid; gap: clamp(12px, 1.3vw, 18px); }
.pea-ep__boxTitle { margin: 0; max-width: 16ch; line-height: 0.98; }
.pea-ep__points {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 8px 22px;
}
.pea-ep__points li {
	display: flex; align-items: center; gap: 8px;
	color: var(--ink);
}
.pea-ep__points li::before {
	content: "";
	width: 6px; height: 6px;
	background: var(--o-500);
	flex: 0 0 auto;
}
.pea-ep__boxCta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Firma de marca: subordinada al CTA, nunca compitiendo con el. */
.pea-ep__sign {
	margin: var(--s3) 0 0;
	text-align: center;
	font-family: var(--f-display);
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	font-variation-settings: "wght" 500, "wdth" 96, "opsz" 24;
	letter-spacing: -0.02em;
	color: var(--muted);
}

/* --- La capa CTA fija y esta pagina --------------------------------------- */
/* La capa es global y su funcion de conversion se conserva. Aqui solo se
   evita que tape la lectura: se aligera su altura y, sobre todo, el contenido
   reserva por debajo el sitio que ocupa mientras esta desplegada. El cierre
   propio de la landing lleva ademas data-cta-quiet, el mecanismo que el tema
   ya usa para retirarla cuando hay una conversion en pantalla. */
.page-template-template-ecommerce .pea-cta { padding-block: 9px; }
.page-template-template-ecommerce .pea-cta .pea-btn,
.page-template-template-ecommerce .pea-cta .pea-wa { min-height: 42px; padding-block: 11px; }
.page-template-template-ecommerce .pea-cta__x { width: 36px; height: 36px; }
/* Nada de padding condicional en el contenido: al desplegarse la capa, la
   pagina daria un salto de 68 px. El ajuste correcto es scroll-padding, que
   no altera la maquetacion y solo evita que un anclaje aterrice debajo de la
   capa. Va en la raiz, que es quien scrollea; la clase de plantilla vive en
   el body. */
:root:has(body.page-template-template-ecommerce) { scroll-padding-bottom: 84px; }

/* --- Boton naranja: CTA principal de esta pagina -------------------------- */
/* El bisel no admite contorno transparente: la variante se resuelve con
   relleno pleno. Texto en tinta sobre naranja 500 = 7.4:1. */
.pea-btn--o { background: var(--o-500); color: var(--ink); }
.pea-btn--o:hover, .pea-btn--o:focus-visible { background: var(--ink); color: var(--paper); }
.pea-btn--o > .pea-live { background: var(--ink); }
.pea-btn--o:hover > .pea-live { background: var(--o-500); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1360px) {
	.pea-ep__modsList { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3) var(--s2); }
	.pea-ep__procList { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s3); }
	/* Con dos filas, el conector no debe saltar de una a otra. */
	.pea-ep__step:nth-child(3n)::before { right: 0; }
}

@media (max-width: 1080px) {
	/* La cabecera fija deja de ocupar altura reservada en este punto. */
	.pea-ep__hero { padding-top: calc(var(--hdr-h) + clamp(20px, 3vw, 40px)); }
	.pea-ep__heroGrid { gap: var(--s2); }
	.pea-ep__title { font-size: clamp(2.3rem, 5vw, 3.4rem); }
	.pea-ep__heroArt { margin-inline-end: 0; }
	.pea-ep__capsList { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* Al pasar a tres columnas hay dos filas: el filete separa las dos. */
	.pea-ep__cap:nth-child(3n+1) { border-left: 0; }
	.pea-ep__cap:nth-child(n+4) { border-top: 1px solid var(--rule); }
	.pea-ep__casesList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	/* Tablet: el texto primero, la ilustracion despues y a ancho completo. */
	.pea-ep__heroGrid { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
	.pea-ep__heroCopy { max-width: 34ch; }
	/* El hero editorial sin ilustracion tambien se apila. */
	.pea-ep__hero--solo .pea-ep__heroCopy { grid-template-columns: minmax(0, 1fr); max-width: 40ch; }
	.pea-ep__hero--solo .pea-ep__title,
	.pea-ep__hero--solo .pea-ep__lead,
	.pea-ep__hero--solo .pea-ep__heroCta { grid-column: 1; grid-row: auto; max-width: none; }
	.pea-ep__heroImg { max-width: 760px; margin-inline: auto; }
	.pea-ep__modsList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pea-ep__procList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pea-ep__step:nth-child(3n)::before { right: calc(-1 * clamp(18px, 1.8vw, 30px)); }
	.pea-ep__step:nth-child(2n)::before { right: 0; }
	.pea-ep__box { grid-template-columns: minmax(0, 1fr); align-items: start; }
	.pea-ep__grow { margin-top: var(--s2); }
}

@media (max-width: 640px) {
	.pea-ep__title { font-size: clamp(2.1rem, 9vw, 2.9rem); }
	.pea-ep__heroCopy { max-width: none; }
	.pea-ep__heroImg { max-width: 100%; }
	.pea-ep__heroCta { gap: 12px; }
	.pea-ep__heroCta .pea-btn { width: 100%; justify-content: center; }
	.pea-ep__capsList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pea-ep__cap { border-left: 0; }
	.pea-ep__cap:nth-child(2n) { border-left: 1px solid var(--rule); }
	.pea-ep__cap:nth-child(n+3) { border-top: 1px solid var(--rule); }
	.pea-ep__modsList { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
	.pea-ep__casesList { grid-template-columns: minmax(0, 1fr); }

	/* El proceso pasa a columna: la linea corre en vertical, junto al numero. */
	.pea-ep__procList { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.pea-ep__step { padding: 0 0 var(--s2) 26px; }
	.pea-ep__step::before {
		top: 6px; bottom: -2px; left: 4px;
		right: auto;
		width: 1px; height: auto;
	}
	.pea-ep__step:last-child::before { bottom: auto; height: 0; }
	.pea-ep__step::after { top: 3px; left: 0; }
	.pea-ep__boxCta .pea-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.pea-js .pea-ep__heroArt.is-in .pea-ep__heroImg { animation: none; }
}


/* =========================================================================
   23. WEB DESIGN & DEVELOPMENT  (.pea-lab)
   -------------------------------------------------------------------------
   La landing del servicio principal. Todo lo que parece una interfaz esta
   construido con HTML y CSS del tema: no hay ni una captura de pantalla.
   Namespace unico: .pea-lab*.

   Regla de movimiento: solo transform y opacity, y solo cuando el movimiento
   explica algo. Al final del bloque, prefers-reduced-motion desmonta todas
   las transformaciones y deja la pagina en su estado final legible.
   ========================================================================= */

.pea-lab { --lab-glass: rgba(255, 255, 255, 0.62); --lab-edge: rgba(20, 17, 15, 0.1); }

/* --- Hero ---------------------------------------------------------------- */
.pea-lab__hero {
	position: relative;
	background: var(--paper);
	padding-top: calc(var(--hdr-h) + clamp(12px, 1.4vw, 22px));
	padding-bottom: clamp(40px, 5vw, 80px);
	overflow: hidden;
}
.pea-lab__heroGrid {
	display: grid;
	grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
	gap: clamp(24px, 3vw, 56px);
	align-items: center;
}
.pea-lab__heroCopy { display: grid; gap: var(--s2); align-content: center; }

.pea-lab__title {
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(2.9rem, 5.6vw, 5.6rem);
	font-variation-settings: "wght" 700, "wdth" 90, "opsz" 96;
	line-height: 0.9;
	letter-spacing: -0.045em;
}
.pea-lab__line { display: block; }
/* Naranja 600 sobre papel: 3.33:1, valido a partir de 24 px. */
.pea-lab__hl { font-style: normal; color: var(--o-600); }
.pea-lab__lead { max-width: 44ch; }

.pea-lab__heroCta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s1); }

/* Accion secundaria: no compite con el boton, pero se nota que esta viva. */
.pea-lab__ghost {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--f-mono); font-size: 0.76rem;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--ink);
	padding: 14px 4px;
	border-bottom: 2px solid var(--rule-2);
	transition: border-color 260ms var(--e-out), gap 260ms var(--e-out);
}
.pea-lab__ghost:hover, .pea-lab__ghost:focus-visible { border-color: var(--o-600); gap: 14px; }
.pea-lab__ghostDot {
	width: 8px; height: 8px; flex: 0 0 auto;
	background: var(--o-500);
	border-radius: 50%;
}
.pea-lab__ghost:hover .pea-lab__ghostDot { animation: pea-lab-pulse 1.4s var(--e-io) infinite; }
@keyframes pea-lab-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.5); opacity: 0.55; }
}

/* La composicion viva: planos reales apilados en profundidad. */
.pea-lab__stage {
	position: relative;
	aspect-ratio: 5 / 4;
	min-height: clamp(320px, 40vw, 560px);
}
.pea-lab__depth { position: absolute; inset: 0; perspective: 1200px; }
.pea-lab__depth > * { position: absolute; will-change: transform; }

/* Reticula de fondo: el papel milimetrado del que sale todo. */
.pea-lab__grid {
	inset: 4% 2% 6% 6%;
	background-image:
		linear-gradient(to right, var(--lab-edge) 1px, transparent 1px),
		linear-gradient(to bottom, var(--lab-edge) 1px, transparent 1px);
	background-size: 8.33% 11.11%;
	opacity: 0.5;
	mask-image: radial-gradient(ellipse at 55% 45%, #000 40%, transparent 78%);
}
/* La luz naranja: una sola, difusa, nunca un neon. */
.pea-lab__glow {
	inset: 12% 6% 18% 14%;
	background: radial-gradient(ellipse at 42% 46%, rgba(240, 124, 43, 0.34), transparent 62%);
	filter: blur(26px);
}
.pea-lab__ruleV {
	top: 6%; bottom: 8%; left: 12%;
	width: 1px;
	background: linear-gradient(to bottom, transparent, var(--o-500) 32%, var(--o-500) 68%, transparent);
	opacity: 0.5;
}

.pea-lab__pane {
	border-radius: 12px;
	background: var(--lab-glass);
	backdrop-filter: blur(9px);
	-webkit-backdrop-filter: blur(9px);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.7),
		0 1px 2px rgba(20, 17, 15, 0.05),
		0 26px 50px -30px rgba(20, 17, 15, 0.42);
}

/* Plano 1 · el navegador con una interfaz de verdad */
.pea-lab__pane--browser {
	left: 8%; right: 4%; top: 16%;
	padding: 0; overflow: hidden;
	background: rgba(255, 255, 255, 0.9);
}
.pea-lab__bar {
	display: flex; align-items: center; gap: 5px;
	padding: 9px 12px;
	background: var(--ink);
}
.pea-lab__bar > i { width: 6px; height: 6px; border-radius: 50%; background: rgba(250, 247, 242, 0.3); }
.pea-lab__bar > i:first-child { background: var(--o-500); }
.pea-lab__url {
	margin-left: 10px;
	font-family: var(--f-mono); font-size: 0.5rem;
	letter-spacing: 0.06em;
	color: rgba(250, 247, 242, 0.6);
}
.pea-lab__view {
	display: grid; grid-template-columns: 1.15fr 1fr;
	gap: 14px; padding: 16px;
	align-items: center;
}
.pea-lab__vHero { display: grid; gap: 7px; }
.pea-lab__sk { display: block; background: rgba(20, 17, 15, 0.13); border-radius: 3px; }
.pea-lab__sk--d { height: 13px; width: 92%; background: rgba(20, 17, 15, 0.72); }
.pea-lab__sk--d.s { width: 62%; }
.pea-lab__sk--t { height: 6px; width: 82%; }
.pea-lab__sk--t.w { width: 58%; }
.pea-lab__sk--cta { height: 16px; width: 44%; background: var(--o-500); border-radius: 2px; margin-top: 4px; }
.pea-lab__vArt {
	display: block; aspect-ratio: 4 / 3; border-radius: 8px;
	background:
		radial-gradient(circle at 34% 32%, rgba(255, 255, 255, 0.85), transparent 48%),
		linear-gradient(150deg, #efe6d9, #d8cbb9);
}
.pea-lab__vRow { display: flex; gap: 8px; padding: 0 16px 16px; }
.pea-lab__vRow > i { height: 22px; flex: 1; border-radius: 4px; background: rgba(20, 17, 15, 0.08); }
.pea-lab__vRow > i.o { background: rgba(240, 124, 43, 0.24); }

/* Plano 2 · la tipografia, que aqui es materia prima */
.pea-lab__pane--type {
	left: 0; top: 2%;
	width: 21%;
	padding: 12px;
	display: grid; gap: 6px; justify-items: start;
}
.pea-lab__paneTag {
	font-family: var(--f-mono); font-size: 0.5rem;
	letter-spacing: 0.16em; color: var(--o-700);
}
.pea-lab__typeBig {
	font-family: var(--f-display); font-size: clamp(1.6rem, 3.4vw, 3rem);
	font-variation-settings: "wght" 700, "wdth" 88;
	line-height: 0.82; letter-spacing: -0.05em;
	color: var(--ink);
}
.pea-lab__typeRow { display: grid; gap: 4px; width: 100%; }
.pea-lab__typeRow > i { height: 4px; background: rgba(20, 17, 15, 0.16); border-radius: 2px; }
.pea-lab__typeRow > i:nth-child(2) { width: 74%; }
.pea-lab__typeRow > i:nth-child(3) { width: 48%; }

/* Plano 3 · el codigo, escrito a mano */
.pea-lab__pane--code {
	right: 0; bottom: 8%;
	width: 44%;
	padding: 12px 14px;
	display: grid; gap: 5px;
	background: rgba(20, 17, 15, 0.93);
	backdrop-filter: none; -webkit-backdrop-filter: none;
	box-shadow: 0 20px 44px -26px rgba(20, 17, 15, 0.6);
}
.pea-lab__codeLine {
	font-family: var(--f-mono); font-size: 0.56rem;
	letter-spacing: 0.02em; line-height: 1.5;
	color: rgba(250, 247, 242, 0.62);
	white-space: nowrap;
}
.pea-lab__codeLine.sm { padding-left: 12px; }
.pea-lab__codeLine b { color: var(--o-500); font-weight: 500; }
.pea-lab__codeLine i { color: #8fc7ff; font-style: normal; }
.pea-lab__codeLine u { color: #ffd9a8; text-decoration: none; }

/* Plano 4 · el movil, que no es un accesorio */
.pea-lab__pane--phone {
	left: 4%; bottom: 2%;
	width: 15%;
	aspect-ratio: 9 / 17;
	padding: 8px 7px 10px;
	display: grid; gap: 5px; align-content: start;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.94);
}
.pea-lab__phoneTop {
	width: 26%; height: 3px; border-radius: 2px;
	background: rgba(20, 17, 15, 0.2);
	margin: 0 auto 4px;
}
.pea-lab__pane--phone .pea-lab__sk--d { height: 8px; }
.pea-lab__pane--phone .pea-lab__sk--t { height: 4px; }
.pea-lab__pane--phone .pea-lab__sk--cta { height: 11px; width: 72%; }

/* --- Franja puente ------------------------------------------------------- */
/* Tipografica a proposito: en /ecommerce/ esta franja lleva iconos y
   tabiques. Aqui es una linea y un punto naranja entre conceptos. */
.pea-lab__caps { border-block: 1px solid var(--rule); background: var(--paper); }
.pea-lab__capsList {
	list-style: none; margin: 0; padding: clamp(14px, 1.6vw, 22px) 0;
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 10px clamp(14px, 1.8vw, 30px);
	font-family: var(--f-mono); font-size: 0.73rem;
	letter-spacing: 0.09em; text-transform: uppercase;
	color: var(--ink);
}
.pea-lab__capsList li { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); }
.pea-lab__capsList li:not(:last-child)::after {
	content: ""; width: 5px; height: 5px;
	background: var(--o-500);
	border-radius: 50%;
}

/* --- 01 · La construccion por capas -------------------------------------- */
.pea-lab__layers { padding-block: clamp(52px, 6vw, 104px); background: var(--paper); }
.pea-lab__lyGrid {
	display: grid;
	grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
	gap: clamp(28px, 4vw, 72px);
	align-items: start;
}

.pea-lab__lySteps { list-style: none; margin: 0; padding: 0; }
.pea-lab__lyStep {
	/* Cada etapa ocupa mas de media ventana: la escena tiene tiempo de
	   montar su capa antes de que llegue la siguiente. */
	min-height: 52svh;
	min-height: 52vh;
	display: grid; gap: 10px; align-content: center;
	padding-right: var(--s2);
	border-left: 2px solid var(--rule);
	padding-left: clamp(18px, 2vw, 30px);
	opacity: 0.34;
	transition: opacity 420ms var(--e-out), border-color 420ms var(--e-out);
}
.pea-lab__lyStep.is-on { opacity: 1; border-left-color: var(--o-600); }
.pea-lab__lyStep.is-past { opacity: 0.5; border-left-color: rgba(234, 88, 12, 0.32); }
.pea-lab__lyNum { font-size: 0.72rem; letter-spacing: 0.14em; color: var(--o-700); }
.pea-lab__lyTitle { margin: 0; }
.pea-lab__lyText { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; max-width: 38ch; }

.pea-lab__lyStick { position: sticky; top: calc(var(--hdr-h) + 40px); }

.pea-lab__scene {
	position: relative;
	aspect-ratio: 4 / 3;
	display: flex; align-items: center; justify-content: center;
}
.pea-lab__frame {
	position: relative;
	width: 100%; height: 100%;
	container-type: inline-size;
	border-radius: 14px;
	overflow: hidden;
	background: var(--white);
	box-shadow:
		inset 0 0 0 1px var(--lab-edge),
		0 2px 4px rgba(20, 17, 15, 0.05),
		0 40px 70px -44px rgba(20, 17, 15, 0.46);
	/* El paso a responsive estrecha el marco de verdad. Nada de scaleX: eso
	   deformaria el contenido en vez de recomponerlo. */
	transition: width 760ms var(--e-out), height 760ms var(--e-out);
}
.pea-lab__ly {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity 560ms var(--e-out), transform 700ms var(--e-out);
	will-change: opacity, transform;
}

/* Capa 1 · la retícula elemental */
.pea-lab__ly--wire {
	opacity: 1;
	display: grid; gap: 10px; padding: 8%;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1.4fr 1fr 0.8fr;
}
.pea-lab__ly--wire .b {
	border: 1px dashed rgba(20, 17, 15, 0.26);
	border-radius: 4px;
	background: rgba(20, 17, 15, 0.03);
}
.pea-lab__ly--wire .b1 { grid-column: 1 / 3; }
.pea-lab__ly--wire .b4 { grid-column: 1 / 4; }
.pea-lab__ly--wire .b6 { grid-column: 2 / 4; }

/* Capa 2 · el recorrido */
.pea-lab__ly--flow { padding: 8%; }
.pea-lab__ly--flow .z {
	position: absolute;
	border: 1.5px solid var(--o-600);
	border-radius: 5px;
	background: rgba(240, 124, 43, 0.07);
}
.pea-lab__ly--flow .z b {
	position: absolute; top: -9px; left: 8px;
	font-family: var(--f-mono); font-size: 0.5rem;
	letter-spacing: 0.12em;
	background: var(--white); padding: 0 5px;
	color: var(--o-700);
}
.pea-lab__ly--flow .z1 { left: 8%; top: 10%; width: 54%; height: 34%; }
.pea-lab__ly--flow .z2 { right: 8%; top: 10%; width: 26%; height: 34%; }
.pea-lab__ly--flow .z3 { left: 8%; right: 8%; bottom: 12%; height: 26%; }

/* Capa 3 · la piel: tipografia, color y superficie */
.pea-lab__ly--skin {
	display: grid;
	grid-template-rows: auto 1fr auto;
	background: var(--paper);
}
.pea-lab__nav {
	display: flex; align-items: center; gap: 8px;
	padding: 3.4% 5%;
	border-bottom: 1px solid var(--rule);
}
.pea-lab__nav .mark { width: 22px; height: 8px; background: var(--ink); border-radius: 2px; }
.pea-lab__nav .lk { width: 26px; height: 4px; background: rgba(20, 17, 15, 0.22); border-radius: 2px; }
.pea-lab__nav .lk:first-of-type { background: var(--o-600); }
.pea-lab__nav .btn { margin-left: auto; width: 42px; height: 15px; background: var(--ink); border-radius: 2px; }
.pea-lab__ly--skin .pea-lab__hero {
	position: static;
	display: grid; gap: 6px; align-content: center;
	padding: 0 5%;
}
.pea-lab__ly--skin .h1,
.pea-lab__ly--skin .h2 {
	font-family: var(--f-display);
	font-size: clamp(0.95rem, 2.4cqw, 1.9rem);
	font-variation-settings: "wght" 680, "wdth" 92;
	letter-spacing: -0.035em; line-height: 1;
	color: var(--ink);
}
.pea-lab__ly--skin .h2 { color: var(--o-600); }
.pea-lab__ly--skin .p { display: block; height: 5px; width: 54%; background: rgba(20, 17, 15, 0.16); border-radius: 3px; margin-top: 4px; }
.pea-lab__ly--skin .p.s { width: 38%; }
.pea-lab__ly--skin .cta { display: block; height: 17px; width: 30%; background: var(--o-500); border-radius: 2px; margin-top: 8px; }
.pea-lab__art {
	position: absolute; right: 5%; top: 26%;
	width: 30%; aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 30%, rgba(255, 255, 255, 0.95), transparent 46%),
		linear-gradient(150deg, #f0e5d6, #cfc0ac);
	box-shadow: 0 14px 30px -16px rgba(20, 17, 15, 0.5);
}
.pea-lab__cards { display: flex; gap: 8px; padding: 0 5% 5%; }
.pea-lab__cards > i { flex: 1; height: 26px; border-radius: 4px; background: rgba(20, 17, 15, 0.07); }
.pea-lab__cards > i.o { background: rgba(240, 124, 43, 0.2); }

/* Capa 4 · el codigo por encima de la piel */
.pea-lab__ly--code {
	display: grid; gap: 5px; align-content: end;
	padding: 6%;
	background: linear-gradient(to top, rgba(20, 17, 15, 0.9) 42%, transparent);
}
.pea-lab__ly--code b {
	font-family: var(--f-mono); font-size: clamp(0.5rem, 1.15cqw, 0.72rem);
	font-weight: 400; line-height: 1.6;
	color: rgba(250, 247, 242, 0.66);
	white-space: nowrap;
}
.pea-lab__ly--code b.i { padding-left: 14px; color: var(--o-500); }

/* Capa 5 · el marcado que leen los buscadores */
.pea-lab__ly--seo { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; padding: 5%; }
.pea-lab__ly--seo i {
	font-family: var(--f-mono); font-size: 0.55rem; font-style: normal;
	letter-spacing: 0.1em; text-transform: uppercase;
	padding: 4px 8px;
	color: var(--o-700);
	background: var(--white);
	box-shadow: inset 0 0 0 1px rgba(234, 88, 12, 0.4);
	border-radius: 3px;
}

/* Los estados. Cada etapa enciende una capa mas: la escena se construye. */
.pea-lab__scene[data-ly-on="1"] .pea-lab__ly--flow { opacity: 1; }
.pea-lab__scene:is([data-ly-on="2"], [data-ly-on="3"], [data-ly-on="4"], [data-ly-on="5"]) .pea-lab__ly--wire { opacity: 0.16; }
.pea-lab__scene:is([data-ly-on="2"], [data-ly-on="3"], [data-ly-on="4"], [data-ly-on="5"]) .pea-lab__ly--flow { opacity: 0; }
.pea-lab__scene:is([data-ly-on="2"], [data-ly-on="3"], [data-ly-on="4"], [data-ly-on="5"]) .pea-lab__ly--skin { opacity: 1; }
.pea-lab__scene[data-ly-on="3"] .pea-lab__ly--code { opacity: 1; }
/* En responsive el marco se estrecha de verdad, no se simula. */
.pea-lab__scene[data-ly-on="4"] .pea-lab__frame { width: 46%; height: 92%; }
/* Y su contenido se recompone al estrecharse, como haria la web real. */
@container (max-width: 420px) {
	.pea-lab__ly--skin .pea-lab__hero {
		min-height: 0; overflow: hidden;
		padding-top: 4%; gap: 3px;
		align-content: start;
	}
	.pea-lab__art {
		position: absolute;
		left: 5%; right: 5%; top: auto; bottom: 17%;
		width: auto; height: 30%;
		aspect-ratio: auto; border-radius: 6px;
	}
	.pea-lab__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
	.pea-lab__cards > i { height: 14px; }
	.pea-lab__nav { padding-block: 4.5%; }
	.pea-lab__nav .lk:nth-of-type(n+2) { display: none; }
	.pea-lab__nav .btn { width: 30px; height: 12px; }
	.pea-lab__ly--skin .cta { width: 62%; height: 13px; }
	.pea-lab__ly--skin .p { height: 4px; }
}
.pea-lab__scene[data-ly-on="5"] .pea-lab__ly--seo { opacity: 1; }

/* Indicador de anchos: solo aparece en la etapa que habla de ellos. */
.pea-lab__rwd {
	position: absolute; left: 50%; bottom: -30px;
	transform: translateX(-50%);
	display: flex; align-items: flex-end; gap: 7px;
	opacity: 0;
	transition: opacity 460ms var(--e-out);
}
.pea-lab__scene[data-ly-on="4"] .pea-lab__rwd { opacity: 1; }
.pea-lab__rwd > i { background: var(--o-600); border-radius: 2px; }
.pea-lab__rwd .d { width: 34px; height: 22px; }
.pea-lab__rwd .t { width: 18px; height: 16px; }
.pea-lab__rwd .m { width: 9px; height: 12px; }

.pea-lab__sceneTag {
	position: absolute; left: 0; top: -30px;
	font-family: var(--f-mono); font-size: 0.68rem;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--o-700);
}

/* --- 02 · Responsive ----------------------------------------------------- */
.pea-lab__rwdSec { padding-block: clamp(52px, 6vw, 104px); background: var(--paper-2); }
.pea-lab__rwdBox { display: grid; justify-items: center; gap: var(--s2); }

.pea-lab__rwdCtrl { display: inline-flex; gap: 0; background: var(--white); border-radius: 999px; padding: 5px; box-shadow: inset 0 0 0 1px var(--lab-edge); }
.pea-lab__rwdBtn {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 10px 18px; min-height: 44px;
	border-radius: 999px;
	font-family: var(--f-mono); font-size: 0.7rem;
	letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--muted);
	transition: background-color 300ms var(--e-out), color 300ms var(--e-out);
}
.pea-lab__rwdBtn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pea-lab__rwdBtn:hover:not([aria-pressed="true"]) { color: var(--ink); }
.pea-lab__rwdW { font-size: 0.64rem; opacity: 0.6; }

.pea-lab__rwdStage {
	width: 100%;
	height: clamp(500px, 54vw, 786px);
	display: flex; justify-content: center; align-items: flex-start;
	container-type: inline-size;
}
/* Un unico dispositivo que cambia de ancho. No hay tres maquetas. */
.pea-lab__rwdDevice {
	--w: 100%;
	width: var(--w);
	max-width: 980px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--white);
	box-shadow:
		inset 0 0 0 1px var(--lab-edge),
		0 2px 4px rgba(20, 17, 15, 0.05),
		0 34px 60px -40px rgba(20, 17, 15, 0.46);
	height: 100%;
	display: flex; flex-direction: column;
	transition: width 500ms var(--e-out), border-radius 500ms var(--e-out);
}
.pea-lab__rwdStage[data-mode="tablet"] .pea-lab__rwdDevice { --w: 56%; }
.pea-lab__rwdStage[data-mode="mobile"]  .pea-lab__rwdDevice { --w: 30%; border-radius: 20px; }

.pea-lab__rwdBar { display: flex; align-items: center; gap: 5px; padding: 10px 14px; background: var(--ink); }
.pea-lab__rwdBar > i { width: 7px; height: 7px; border-radius: 50%; background: rgba(250, 247, 242, 0.28); }
.pea-lab__rwdBar > i:first-child { background: var(--o-500); }
.pea-lab__rwdUrl {
	margin-left: 12px;
	font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.08em;
	color: rgba(250, 247, 242, 0.66);
}

.pea-lab__rwdDevice { position: relative; }
.pea-lab__rwdDevice::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 54px;
	background: linear-gradient(to top, var(--white), rgba(255, 255, 255, 0));
	pointer-events: none;
}
/* ===== La mini web del demo responsive (.pea-mw) =========================
   Un unico marcado. Los tres modos solo cambian data-mode en el escenario;
   la logica de recomposicion vive en el bloque de mas abajo y no se toca.

   Aqui manda el ADN de la casa, no un estilo de demo neutro: el bisel a 45
   grados abajo-izquierda en toda superficie, el triangulo naranja como signo
   de "activo", la retícula hairline visible como prueba de oficio, la mono
   con tracking amplio para los metadatos y el naranja en tres pasos, usado
   con disciplina. Nada de esquinas redondeadas genericas.

   Todas las medidas van en cqw contra el ancho del propio dispositivo: es lo
   que hace que la escala tipografica cambie de verdad y no por zoom.
   ========================================================================= */
.pea-lab__rwdView {
	--mwb: clamp(7px, 1.9cqw, 13px);   /* el bisel, a escala del marco */
	padding: clamp(13px, 3.4cqw, 26px);
	display: grid;
	gap: clamp(11px, 2.6cqw, 20px);
	align-content: space-between;
	flex: 1 1 auto;
	background: var(--paper);
	container-type: inline-size;
	position: relative;
}
/* La retícula de columna, tenue, como en las secciones regladas del sitio. */
.pea-lab__rwdView::before {
	content: "";
	position: absolute; inset: 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		to right,
		rgba(20, 17, 15, 0.055) 0 1px,
		transparent 1px 16.666%
	);
	background-position: clamp(13px, 3.4cqw, 26px) 0;
	background-size: calc(100% - clamp(26px, 6.8cqw, 52px)) 100%;
	background-repeat: no-repeat;
}
.pea-lab__rwdView > * { position: relative; }

/* --- Navegacion ---------------------------------------------------------- */
.pea-mw__nav {
	display: flex; align-items: center; gap: clamp(8px, 2cqw, 16px);
	padding-bottom: clamp(9px, 2.2cqw, 14px);
	border-bottom: 1px solid var(--rule-2);
}
.pea-mw__brand { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
/* El isotipo: un cuadrado biselado, no un circulo cualquiera. */
.pea-mw__dot {
	width: clamp(11px, 2.7cqw, 17px); aspect-ratio: 1;
	background: var(--o-500);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 42% 100%, 0 58%);
}
.pea-mw__brand b {
	font-family: var(--f-display);
	font-size: clamp(0.62rem, 2.1cqw, 1rem);
	font-variation-settings: "wght" 700, "wdth" 90;
	letter-spacing: -0.04em; color: var(--ink);
}
.pea-mw__links {
	display: flex; align-items: center;
	gap: clamp(8px, 2.2cqw, 18px);
	margin-left: clamp(6px, 2cqw, 18px);
}
/* Los enlaces en mono: la voz tecnica del sistema, no un menu de plantilla. */
.pea-mw__links a {
	position: relative;
	font-family: var(--f-mono);
	font-size: clamp(0.4rem, 1.18cqw, 0.56rem);
	letter-spacing: 0.13em; text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
	padding-bottom: 3px;
}
/* Activo = texto en tinta + regla naranja. Nunca solo color. */
.pea-mw__links a:first-child { color: var(--ink); }
.pea-mw__links a:first-child::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 2px; background: var(--o-600);
}
.pea-mw__navCta {
	margin-left: auto; flex: 0 0 auto;
	font-family: var(--f-mono);
	font-size: clamp(0.4rem, 1.2cqw, 0.58rem);
	letter-spacing: 0.12em; text-transform: uppercase;
	color: var(--paper); background: var(--ink);
	padding: clamp(6px, 1.7cqw, 10px) clamp(9px, 2.6cqw, 16px);
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--mwb) 100%, 0 calc(100% - var(--mwb)));
	white-space: nowrap;
}
.pea-mw__burger {
	display: none; margin-left: auto; flex: 0 0 auto;
	width: clamp(15px, 4.4cqw, 20px);
	flex-direction: column; gap: 3px;
}
.pea-mw__burger i { height: 2px; background: var(--ink); }
.pea-mw__burger i:last-child { width: 62%; background: var(--o-600); }

/* --- Hero ---------------------------------------------------------------- */
.pea-mw__hero {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
	gap: clamp(12px, 3.4cqw, 30px);
	align-items: center;
}
.pea-mw__copy { display: grid; gap: clamp(5px, 1.4cqw, 10px); align-content: center; }
/* Eyebrow con su cuadradito naranja: el mismo tic que la casa usa arriba. */
.pea-mw__eyebrow {
	display: flex; align-items: center; gap: 7px;
	font-family: var(--f-mono);
	font-size: clamp(0.38rem, 1.1cqw, 0.54rem);
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--o-700);
}
.pea-mw__eyebrow::before {
	content: "";
	width: clamp(4px, 1cqw, 6px); aspect-ratio: 1;
	background: var(--o-500);
	flex: 0 0 auto;
}
.pea-mw__h1 {
	margin: 0;
	font-family: var(--f-display);
	font-size: clamp(1rem, 4.7cqw, 2.25rem);
	font-variation-settings: "wght" 700, "wdth" 88;
	letter-spacing: -0.05em; line-height: 0.94;
	color: var(--ink);
	text-wrap: balance;
}
.pea-mw__p {
	margin: 0;
	font-family: var(--f-text);
	font-size: clamp(0.5rem, 1.52cqw, 0.76rem);
	line-height: 1.52; color: var(--muted);
	max-width: 34ch;
}
.pea-mw__actions {
	display: flex; align-items: center;
	gap: clamp(8px, 2.4cqw, 16px);
	margin-top: clamp(3px, 1cqw, 7px);
}
/* El boton de la casa: biselado, mono, y con el triangulo naranja dentro. */
.pea-mw__cta {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	font-family: var(--f-mono);
	font-size: clamp(0.42rem, 1.28cqw, 0.62rem);
	letter-spacing: 0.13em; text-transform: uppercase;
	color: var(--paper); background: var(--ink);
	padding: clamp(8px, 2.2cqw, 13px) clamp(12px, 3.2cqw, 22px);
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--mwb) 100%, 0 calc(100% - var(--mwb)));
	text-align: center;
	white-space: nowrap;
}
.pea-mw__live {
	position: absolute; left: 0; bottom: 0;
	width: var(--mwb); height: var(--mwb);
	background: var(--o-500);
	clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.pea-mw__link {
	font-family: var(--f-mono);
	font-size: clamp(0.4rem, 1.2cqw, 0.58rem);
	letter-spacing: 0.13em; text-transform: uppercase;
	color: var(--o-700);
	border-bottom: 2px solid currentColor;
	padding-bottom: 3px;
	white-space: nowrap;
}

/* --- La composicion: un sistema digital en funcionamiento ---------------- */
/* Ni caja negra ni bodegon geometrico. El contenedor es transparente y las
   placas flotan sobre el papel, se solapan en profundidad y sangran fuera de
   su columna: la composicion forma parte del layout, no vive dentro de un
   marco. La luz naranja es una linea, nunca un relleno. */
.pea-mw__art {
	position: relative; display: block;
	aspect-ratio: 4 / 3;
	overflow: visible;
	background: none;
	clip-path: none;
	/* Sangra hacia el borde del dispositivo: rompe el canal de lectura. */
	margin-right: calc(clamp(13px, 3.4cqw, 26px) * -1);
	perspective: 900px;
}

/* Campo de luz: el unico naranja difuso, muy por detras de todo. */
.pea-mw__field {
	position: absolute; inset: -8% -6% 4% 2%;
	background:
		radial-gradient(58% 52% at 68% 30%, rgba(240, 124, 43, 0.30), transparent 70%),
		radial-gradient(46% 44% at 26% 76%, rgba(20, 17, 15, 0.13), transparent 72%);
	filter: blur(14px);
}

/* Conexiones: hilos de un cuadro de mando, no bordes decorativos. */
.pea-mw__wire {
	position: absolute;
	border-left: 1px solid rgba(20, 17, 15, 0.22);
	border-bottom: 1px solid rgba(20, 17, 15, 0.22);
}
.pea-mw__wire--a { left: 2%; top: 12%; width: 30%; height: 40%; }
.pea-mw__wire--b {
	right: 6%; bottom: 8%; width: 30%; height: 22%;
	border-left: 0; border-bottom: 0;
	border-right: 1px solid rgba(240, 124, 43, 0.4);
	border-top: 1px solid rgba(240, 124, 43, 0.4);
}

/* --- Placa principal: superficie grafito, ligeramente girada ------------- */
.pea-mw__plate {
	position: absolute;
	left: 26%; top: 1%; right: -9%; bottom: 24%;
	display: grid; align-content: space-between;
	gap: clamp(5px, 1.3cqw, 9px);
	padding: clamp(9px, 2.4cqw, 16px);
	background: linear-gradient(158deg, #211d1a 0%, #14110f 62%);
	clip-path: polygon(0 0, 100% 0, 100% 100%, calc(var(--mwb) * 1.6) 100%, 0 calc(100% - var(--mwb) * 1.6));
	box-shadow:
		inset 0 1px 0 rgba(250, 247, 242, 0.09),
		0 30px 52px -28px rgba(20, 17, 15, 0.72);
	transform: rotate(-1.4deg);
	z-index: 2;
}
/* Barra de contexto de la placa. */
.pea-mw__pTop { display: flex; align-items: center; gap: 6px; }
.pea-mw__pTop u {
	height: clamp(4px, 1cqw, 6px); border-radius: 1px;
	background: rgba(250, 247, 242, 0.26);
}
.pea-mw__pTop u:first-child { width: 26%; background: var(--o-500); }
.pea-mw__pTop u:last-child { width: 13%; }
.pea-mw__pRow {
	height: clamp(4px, 0.95cqw, 6px);
	width: 76%;
	background: rgba(250, 247, 242, 0.17);
	border-radius: 1px;
}
.pea-mw__pRow.s { width: 52%; }
/* Lectura de datos: barras de distinta altura, la viva en naranja. */
.pea-mw__pGraph {
	display: flex; align-items: flex-end; gap: clamp(3px, 0.9cqw, 6px);
	height: 34%;
	width: 62%;
	margin-top: auto; margin-left: auto;
}
.pea-mw__pGraph u {
	flex: 1;
	background: rgba(250, 247, 242, 0.2);
	border-radius: 1px 1px 0 0;
}
.pea-mw__pGraph u:nth-child(1) { height: 38%; }
.pea-mw__pGraph u:nth-child(2) { height: 62%; }
.pea-mw__pGraph u:nth-child(3) { height: 47%; }
.pea-mw__pGraph u:nth-child(4) { height: 88%; background: var(--o-500); }
.pea-mw__pGraph u:nth-child(5) { height: 56%; }

/* --- Panel de vidrio claro: entra por delante de la placa --------------- */
.pea-mw__glass {
	position: absolute;
	left: 8%; bottom: 0;
	width: 54%;
	display: grid; gap: clamp(5px, 1.2cqw, 8px);
	padding: clamp(10px, 2.4cqw, 16px);
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--mwb) 100%, 0 calc(100% - var(--mwb)));
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.95),
		0 26px 46px -20px rgba(20, 17, 15, 0.58);
	transform: rotate(0.8deg);
	z-index: 3;
}
.pea-mw__gDot {
	width: clamp(7px, 1.7cqw, 11px); aspect-ratio: 1;
	background: var(--o-500);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 42% 100%, 0 58%);
}
.pea-mw__gLine {
	height: clamp(4px, 0.9cqw, 6px);
	width: 84%;
	background: rgba(20, 17, 15, 0.16);
	border-radius: 1px;
}
.pea-mw__gLine.s { width: 56%; }

/* --- Microinterfaz: un control real, pequeno y por detras --------------- */
.pea-mw__ctrl {
	position: absolute;
	right: 2%; top: -3%;
	display: flex; gap: 3px;
	padding: clamp(4px, 1cqw, 6px);
	background: rgba(250, 247, 242, 0.82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.1), 0 10px 22px -14px rgba(20, 17, 15, 0.5);
	z-index: 4;
}
.pea-mw__ctrl i {
	width: clamp(11px, 2.6cqw, 17px);
	height: clamp(5px, 1.2cqw, 8px);
	background: rgba(20, 17, 15, 0.16);
}
.pea-mw__ctrl i.on { background: var(--ink); }

/* --- La linea de luz: recorre la composicion y cambia de trazado -------- */
.pea-mw__beam {
	position: absolute;
	left: 4%; right: 10%; top: 56%;
	height: 1.5px;
	background: linear-gradient(to right, transparent, var(--o-500) 22%, var(--o-500) 74%, transparent);
	box-shadow: 0 0 14px 2px rgba(240, 124, 43, 0.42);
	transform: rotate(-6deg);
	transform-origin: left center;
	z-index: 5;
}

/* --- Rotulo de catalogo -------------------------------------------------- */
/* La capa de datos del sitio: mono, tracking amplio y una regla que ocupa
   todo lo que sobra. Es lo que hace que se lea como indice y no como titulo. */
.pea-mw__idx {
	display: flex; align-items: center; gap: clamp(7px, 1.8cqw, 12px);
	font-family: var(--f-mono);
	font-size: clamp(0.38rem, 1.08cqw, 0.53rem);
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--muted);
	margin-top: clamp(2px, 0.8cqw, 6px);
}
.pea-mw__idx b { font-weight: 500; color: var(--ink); }
.pea-mw__idx i { flex: 1 1 auto; height: 1px; background: var(--rule-2); }
.pea-mw__idx u { text-decoration: none; color: var(--o-700); }

/* --- Servicios ----------------------------------------------------------- */
.pea-mw__svc {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(8px, 2.2cqw, 16px);
	align-items: stretch;
}
/* La principal se levanta del papel: superficie, bisel y su propio aire. */
.pea-mw__card:first-child {
	padding: clamp(9px, 2.2cqw, 15px);
	padding-left: clamp(11px, 2.6cqw, 18px);
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.07);
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--mwb) 100%, 0 calc(100% - var(--mwb)));
	border-left: 0;
}
.pea-mw__card:first-child::before {
	content: "";
	position: absolute; left: 0; top: 0; bottom: 0;
	width: 2px; background: var(--o-600);
}
.pea-mw__card:first-child b { font-size: clamp(0.62rem, 2.05cqw, 1rem); }
/* Sin filete superior naranja: eso ya lo usa /ecommerce/. Aqui la tarjeta se
   marca con una regla vertical y su numero, como una ficha de catalogo. */
.pea-mw__card {
	position: relative;
	display: grid; gap: clamp(3px, 0.8cqw, 6px);
	align-content: start;
	padding-left: clamp(9px, 2.2cqw, 15px);
	border-left: 2px solid var(--rule-2);
}
.pea-mw__card:first-child { border-left-color: var(--o-600); }
.pea-mw__num {
	font-family: var(--f-mono);
	font-size: clamp(0.36rem, 1cqw, 0.5rem);
	letter-spacing: 0.18em; color: var(--o-700);
}
.pea-mw__card b {
	font-family: var(--f-display);
	font-size: clamp(0.56rem, 1.8cqw, 0.88rem);
	font-variation-settings: "wght" 660, "wdth" 92;
	letter-spacing: -0.03em; color: var(--ink);
}
.pea-mw__card > span {
	font-family: var(--f-text);
	font-size: clamp(0.44rem, 1.32cqw, 0.66rem);
	line-height: 1.45; color: var(--muted);
}

/* --- TABLET: se recompone, no se encoge --------------------------------- */
/* El menu pierde los dos ultimos enlaces, la composicion sube a lo ancho por
   encima del texto y las tarjetas se reordenan. El sistema visual tambien se
   reagrupa: la placa se tumba, el vidrio cruza al otro lado, el control
   desaparece y la luz cambia de trazado. */
.pea-lab__rwdStage[data-mode="tablet"] .pea-mw__links a:nth-child(n+3) { display: none; }
.pea-lab__rwdStage[data-mode="tablet"] .pea-mw__hero { grid-template-columns: minmax(0, 1fr); }
.pea-lab__rwdStage[data-mode="tablet"] .pea-mw__art {
	order: -1;
	aspect-ratio: 30 / 9;
	margin-right: calc(clamp(13px, 3.4cqw, 26px) * -1);
	margin-left: calc(clamp(13px, 3.4cqw, 26px) * -1);
}
.pea-lab__rwdStage[data-mode="tablet"] .pea-mw__field { inset: -14% 0 -6% 0; }
/* La placa se tumba y ocupa la mitad derecha, con menos giro. */
.pea-lab__rwdStage[data-mode="tablet"] .pea-mw__plate {
	left: 40%; right: -2%; top: 8%; bottom: 8%;
	transform: rotate(-0.8deg);
}
.pea-lab__rwdStage[data-mode="tablet"] .pea-mw__pRow { width: 58%; }
.pea-lab__rwdStage[data-mode="tablet"] .pea-mw__pGraph { height: 46%; }
/* El vidrio cruza a la izquierda y crece: es la pieza que manda aqui. */
.pea-lab__rwdStage[data-mode="tablet"] .pea-mw__glass {
	left: 4%; right: auto; bottom: auto; top: 14%;
	width: 40%;
	transform: rotate(-0.6deg);
}
/* Un modulo secundario se retira: en tablet no aporta. */
.pea-lab__rwdStage[data-mode="tablet"] .pea-mw__ctrl { opacity: 0; }
.pea-lab__rwdStage[data-mode="tablet"] .pea-mw__wire--a { left: 2%; top: 10%; width: 16%; height: 60%; }
.pea-lab__rwdStage[data-mode="tablet"] .pea-mw__wire--b { right: 3%; bottom: 6%; width: 18%; height: 40%; }
/* La luz se endereza y cruza toda la banda. */
.pea-lab__rwdStage[data-mode="tablet"] .pea-mw__beam {
	left: 2%; right: 2%; top: 74%;
	transform: rotate(-1.5deg);
}
.pea-lab__rwdStage[data-mode="tablet"] .pea-mw__p { max-width: 46ch; }
.pea-lab__rwdStage[data-mode="tablet"] .pea-mw__svc { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.pea-lab__rwdStage[data-mode="tablet"] .pea-mw__card:last-child { grid-column: 1 / -1; }

/* --- MÓVIL: cambia la jerarquia ----------------------------------------- */
/* Menu plegado en hamburguesa, una sola columna, el CTA a ancho completo y
   los servicios apilados. El sistema visual pasa a vertical: la placa se
   endereza, el vidrio se apoya en su borde inferior y la luz baja en
   diagonal uniendo las dos superficies. */
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__links,
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__navCta { display: none; }
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__burger { display: flex; }
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__hero { grid-template-columns: minmax(0, 1fr); }
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__art {
	order: 0;
	aspect-ratio: 5 / 4;
	margin-right: 0;
}
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__field { inset: -6% -4% 10% 0; }
/* La placa se endereza y ocupa la parte alta: es el contenido principal. */
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__plate {
	left: 8%; right: 0; top: 0; bottom: 24%;
	transform: rotate(-0.6deg);
}
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__pRow { display: none; }
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__pGraph { height: 52%; }
/* El vidrio se apoya bajo la placa, solapandola: profundidad en vertical. */
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__glass {
	left: 0; right: 14%; bottom: 13%; top: auto;
	width: auto;
	transform: rotate(1.2deg);
}
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__gLine.s { display: none; }
/* En movil solo quedan los modulos prioritarios. */
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__ctrl,
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__wire--a { opacity: 0; }
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__wire--b { right: 2%; bottom: 30%; width: 14%; height: 26%; }
/* La luz baja: es el hilo que conecta las dos superficies apiladas. */
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__beam {
	left: 4%; right: 4%; top: 72%;
	transform: rotate(-7deg);
}
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__actions { flex-direction: column; align-items: stretch; gap: 8px; }
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__cta { width: 100%; }
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__link { align-self: center; }
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__p { max-width: none; }
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__svc { grid-template-columns: minmax(0, 1fr); }
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__card:last-child { grid-column: auto; }
/* En un movil no cabe todo el catalogo: se prioriza. */
.pea-lab__rwdStage[data-mode="mobile"] .pea-mw__card:nth-child(3) { display: none; }

/* --- La transicion: 500 ms, sin rebotes ---------------------------------- */
/* Las placas viajan unos pixeles y corrigen su giro; la luz cambia de
   trazado. Nada salta ni rebota. */
.pea-mw__nav, .pea-mw__hero, .pea-mw__svc, .pea-mw__art,
.pea-mw__h1, .pea-mw__p, .pea-mw__cta, .pea-mw__card,
.pea-mw__field, .pea-mw__plate, .pea-mw__glass, .pea-mw__ctrl,
.pea-mw__beam, .pea-mw__wire, .pea-mw__pRow, .pea-mw__pGraph {
	transition:
		grid-template-columns 500ms var(--e-out),
		aspect-ratio 500ms var(--e-out),
		font-size 500ms var(--e-out),
		width 500ms var(--e-out),
		height 500ms var(--e-out),
		inset 500ms var(--e-out),
		margin 500ms var(--e-out),
		opacity 500ms var(--e-out),
		transform 500ms var(--e-out),
		gap 500ms var(--e-out),
		padding 500ms var(--e-out);
}

@media (prefers-reduced-motion: reduce) {
	/* El cambio de maqueta se mantiene entero; solo desaparece el recorrido. */
	.pea-mw__nav, .pea-mw__hero, .pea-mw__svc, .pea-mw__art,
	.pea-mw__h1, .pea-mw__p, .pea-mw__cta, .pea-mw__card,
	.pea-mw__field, .pea-mw__plate, .pea-mw__glass, .pea-mw__ctrl,
	.pea-mw__beam, .pea-mw__wire, .pea-mw__pRow, .pea-mw__pGraph { transition: none; }
}

.pea-lab__rwdNote {
	margin: 0; text-align: center;
	color: var(--muted); font-size: 0.97rem;
	max-width: 52ch;
	min-height: 3em;
}

/* --- 03 · Alcance -------------------------------------------------------- */
.pea-lab__scope { padding-block: clamp(52px, 6vw, 104px); background: var(--paper); }
/* --- 04 · La prueba ------------------------------------------------------ */
.pea-lab__proof { padding-block: clamp(56px, 6.5vw, 112px); }
.pea-lab__proofGrid {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(28px, 4vw, 72px);
	align-items: center;
}
.pea-lab__proofLead { display: grid; gap: var(--s2); }
.pea-lab__proofT { margin: 0; max-width: 15ch; }
.pea-lab__proofRow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 42px); }
.pea-lab__stat { gap: 10px; }
.pea-lab__statV {
	font-variant-numeric: tabular-nums;
	/* Reserva de espacio: al contar, la cifra no debe mover su etiqueta. */
	min-height: 1em;
}

/* --- 05 · Proceso -------------------------------------------------------- */
.pea-lab__proc { padding-block: clamp(52px, 6vw, 104px); background: var(--paper); }
.pea-lab__procTrack { position: relative; }
.pea-lab__procRail {
	position: absolute; left: 0; right: 0; top: 5px;
	height: 2px; background: var(--rule);
}
.pea-lab__procRail > i {
	display: block; height: 100%;
	background: var(--o-600);
	transform: scaleX(0); transform-origin: left;
	transition: transform 620ms var(--e-out);
}
.pea-lab__procList {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(18px, 2vw, 32px);
}
.pea-lab__procStep {
	display: grid; gap: 8px; align-content: start;
	padding-top: 30px;
	opacity: 0.4;
	transform: translateY(10px);
	transition: opacity 520ms var(--e-out), transform 520ms var(--e-out);
}
.pea-lab__procStep.is-on { opacity: 1; transform: none; }
.pea-lab__procDot {
	position: absolute; top: 0;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--paper);
	box-shadow: inset 0 0 0 2px var(--rule-2);
	transition: box-shadow 420ms var(--e-out), background-color 420ms var(--e-out);
}
.pea-lab__procStep { position: relative; }
.pea-lab__procStep.is-on .pea-lab__procDot { background: var(--o-500); box-shadow: inset 0 0 0 2px var(--o-600); }
.pea-lab__procNum { color: var(--o-700); }
.pea-lab__procT { margin: 0; }
.pea-lab__procD { margin: 0; color: #4f4740; font-size: 0.95rem; line-height: 1.58; }

/* --- Casos reales (solo si existen) -------------------------------------- */
.pea-lab__cases { padding-block: clamp(52px, 6vw, 104px); background: var(--paper); }
.pea-lab__casesList { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.pea-lab__caseLink { display: grid; gap: 12px; color: inherit; }
.pea-lab__caseShot { display: block; overflow: hidden; border-radius: 10px; background: var(--paper-2); }
.pea-lab__caseShot img { width: 100%; height: auto; }
.pea-lab__caseT { margin: 0; }
.pea-lab__caseP { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.55; }
.pea-lab__caseLink:hover .pea-lab__caseT { color: var(--o-700); }

/* --- El momento humano --------------------------------------------------- */
.pea-lab__human { padding-block: clamp(44px, 5vw, 88px); background: var(--paper); }
.pea-lab__humanBox { position: relative; max-width: 62ch; margin-inline: auto; padding-left: clamp(28px, 3vw, 48px); }
.pea-lab__quoteMark {
	position: absolute; left: 0; top: 6px; bottom: 6px;
	width: 3px; background: var(--o-500);
}
.pea-lab__humanP {
	margin: 0 0 var(--s2);
	font-family: var(--f-display);
	font-size: clamp(1.2rem, 1.9vw, 1.65rem);
	font-variation-settings: "wght" 500, "wdth" 96, "opsz" 28;
	letter-spacing: -0.022em; line-height: 1.32;
	color: var(--ink);
}
.pea-lab__humanP--sm {
	font-family: var(--f-text);
	font-size: 1.02rem; line-height: 1.62;
	color: var(--muted);
	letter-spacing: 0;
	margin-bottom: 0;
}

/* --- Cierre -------------------------------------------------------------- */
.pea-lab__close { position: relative; overflow: hidden; padding-block: clamp(64px, 7.5vw, 128px); }
.pea-lab__closeArt { position: absolute; inset: 0; pointer-events: none; }
.pea-lab__closeArt .g {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(to right, rgba(250, 247, 242, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(250, 247, 242, 0.05) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 76%);
}
.pea-lab__closeArt .l {
	position: absolute; left: 50%; top: 42%;
	width: min(760px, 88%); height: 1px;
	transform: translateX(-50%);
	background: linear-gradient(to right, transparent, var(--o-500), transparent);
	box-shadow: 0 0 40px 10px rgba(240, 124, 43, 0.24);
}
.pea-lab__closeBox { position: relative; display: grid; gap: var(--s2); justify-items: center; text-align: center; }
.pea-lab__closeT { margin: 0; max-width: 18ch; }
.pea-lab__closeP { max-width: 52ch; }
.pea-lab__closeCta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); margin-top: var(--s1); }
.pea-dark .pea-lab__closeCta .pea-link { color: var(--o-500); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1200px) {
	.pea-lab__lyGrid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
	.pea-lab__casesList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pea-lab__procList { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s3); }
	.pea-lab__procRail { display: none; }
}

@media (max-width: 1080px) {
	/* Tablet: menos profundidad y menos planos a la vez. */
	.pea-lab__hero { padding-top: calc(var(--hdr-h) + clamp(16px, 2vw, 28px)); }
	.pea-lab__heroGrid { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
	.pea-lab__heroCopy { max-width: 34ch; }
	.pea-lab__stage { aspect-ratio: 16 / 11; max-width: 720px; margin-inline: auto; }
	.pea-lab__pane--code { width: 50%; }
	.pea-lab__proofGrid { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}

@media (max-width: 900px) {
	/* La escena fija deja de tener sentido cuando no hay dos columnas:
	   pasa a ser una secuencia vertical, con la misma informacion. */
	.pea-lab__lyGrid { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
	.pea-lab__lyStick { position: static; order: -1; }
	.pea-lab__lyStep { min-height: 0; padding-block: clamp(14px, 2vw, 22px); opacity: 1; }
	.pea-lab__lyStep.is-past { opacity: 1; }
	.pea-lab__sceneTag { position: static; display: block; margin-bottom: 10px; }
	.pea-lab__rwd { bottom: -26px; }
	.pea-lab__rwdStage[data-mode="tablet"] .pea-lab__rwdDevice { --w: 68%; }
	.pea-lab__rwdStage[data-mode="mobile"]  .pea-lab__rwdDevice { --w: 42%; }
	.pea-lab__casesList { grid-template-columns: minmax(0, 1fr); }
	.pea-lab__procList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.pea-lab__title { font-size: clamp(2.2rem, 10vw, 3rem); }
	.pea-lab__heroCopy { max-width: none; }
	.pea-lab__heroCta .pea-btn { width: 100%; justify-content: center; }
	.pea-lab__stage { aspect-ratio: 1 / 1; }
	/* En movil los planos flotantes estorban: se quedan los dos que cuentan. */
	.pea-lab__pane--type, .pea-lab__pane--code { display: none; }
	.pea-lab__pane--browser { left: 0; right: 0; top: 14%; }
	.pea-lab__pane--phone { width: 24%; }
	.pea-lab__capsList { font-size: 0.68rem; gap: 8px 14px; }
	.pea-lab__capsList li { gap: 14px; }
	.pea-lab__procList { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
	.pea-lab__proofRow { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
	.pea-lab__rwdStage[data-mode="tablet"] .pea-lab__rwdDevice { --w: 80%; }
	.pea-lab__rwdStage[data-mode="mobile"]  .pea-lab__rwdDevice { --w: 56%; }
	.pea-lab__rwdBtn { padding: 10px 12px; font-size: 0.64rem; }
	.pea-lab__rwdW { display: none; }
	.pea-lab__humanBox { padding-left: 20px; }
	.pea-lab__closeCta .pea-btn { width: 100%; justify-content: center; }
}

/* --- Movimiento reducido ------------------------------------------------- */
/* Nada de lo anterior es imprescindible para entender la pagina: aqui todo
   se entrega en su estado final. La escena aparece montada, el proceso
   completo y los planos del hero quietos en su sitio. */
@media (prefers-reduced-motion: reduce) {
	.pea-lab__depth > * { transform: none !important; }
	.pea-lab__ghost:hover .pea-lab__ghostDot { animation: none; }
	.pea-lab__lyStep { opacity: 1; }
	.pea-lab__ly { transition: none; }
	.pea-lab__scene .pea-lab__ly--skin,
	.pea-lab__scene .pea-lab__ly--seo { opacity: 1; }
	.pea-lab__scene .pea-lab__ly--wire { opacity: 0.16; }
	.pea-lab__scene .pea-lab__ly--flow,
	.pea-lab__scene .pea-lab__ly--code { opacity: 0; }
	.pea-lab__frame { width: 100%; height: 100%; }
	.pea-lab__procStep { opacity: 1; transform: none; }
	.pea-lab__rwdDevice { transition: none; }
	.pea-lab__closeArt .l { box-shadow: none; }
}


/* PEA LAB STRATEGY IMAGE */
.pea-lab__scene{position:relative;}
.pea-lab__stageImage{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;opacity:0;transform:scale(.975);transition:opacity .45s ease,transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none;z-index:20;}
.pea-lab__scene[data-ly-on="0"] .pea-lab__stageImage--strategy{opacity:1;transform:scale(1);}
.pea-lab__scene[data-ly-on="0"] .pea-lab__frame,.pea-lab__scene[data-ly-on="0"] .pea-lab__rwd,.pea-lab__scene[data-ly-on="0"] .pea-lab__sceneTag{opacity:0!important;visibility:hidden;}

/* PEA LAB STAGE REDUCED MOTION */
@media (prefers-reduced-motion: reduce){.pea-lab__stageImage{transition:none!important;transform:none!important;}}

.pea-lab__scene[data-ly-on="1"] .pea-lab__stageImage--ux{opacity:1;transform:scale(1);}

.pea-lab__scene[data-ly-on="1"] .pea-lab__frame,.pea-lab__scene[data-ly-on="1"] .pea-lab__rwd,.pea-lab__scene[data-ly-on="1"] .pea-lab__sceneTag{opacity:0!important;visibility:hidden!important;}

.pea-lab__scene[data-ly-on="2"] .pea-lab__stageImage--visual{opacity:1;transform:scale(1);}
.pea-lab__scene[data-ly-on="2"] .pea-lab__frame,.pea-lab__scene[data-ly-on="2"] .pea-lab__rwd,.pea-lab__scene[data-ly-on="2"] .pea-lab__sceneTag{opacity:0!important;visibility:hidden!important;}

.pea-lab__scene[data-ly-on="3"] .pea-lab__stageImage--development{opacity:1;transform:scale(1);}
.pea-lab__scene[data-ly-on="3"] .pea-lab__frame,.pea-lab__scene[data-ly-on="3"] .pea-lab__rwd,.pea-lab__scene[data-ly-on="3"] .pea-lab__sceneTag{opacity:0!important;visibility:hidden!important;}

/* PEA LAB SCROLL TEST */
@media (min-width:1025px){
.pea-lab__lyStep{min-height:42vh!important;min-height:42svh!important;}
.pea-lab__stageImage{transition:opacity .30s ease,transform .30s cubic-bezier(.2,.7,.2,1)!important;}
}

.pea-lab__scene[data-ly-on="4"] .pea-lab__stageImage--responsive{opacity:1;transform:scale(1);}
.pea-lab__scene[data-ly-on="4"] .pea-lab__frame,
.pea-lab__scene[data-ly-on="4"] .pea-lab__rwd,
.pea-lab__scene[data-ly-on="4"] .pea-lab__sceneTag{opacity:0!important;visibility:hidden!important;}

.pea-lab__scene[data-ly-on="5"] .pea-lab__stageImage--seo{opacity:1;transform:scale(1);}
.pea-lab__scene[data-ly-on="5"] .pea-lab__frame,
.pea-lab__scene[data-ly-on="5"] .pea-lab__rwd,
.pea-lab__scene[data-ly-on="5"] .pea-lab__sceneTag{opacity:0!important;visibility:hidden!important;}

/* PEA WEBDESIGN HERO IMAGE V2 */
.pea-lab__stage .pea-lab__depth{display:none!important;}
.pea-lab__heroImage{display:block;width:100%;height:100%;object-fit:contain;object-position:center;position:absolute;inset:0;z-index:5;}
.pea-lab__stage{position:relative;overflow:visible;}

/* PEA WEBDESIGN CTA BANNER */
.pea-lab__close{position:relative;overflow:hidden;}
.pea-lab__closeArt{position:absolute;inset:0;pointer-events:none;z-index:0;}
.pea-lab__closeArt>i{display:none!important;}
.pea-lab__closeImage{position:absolute;right:clamp(-30px,1vw,20px);bottom:-8%;width:min(52vw,760px);height:auto;max-height:108%;object-fit:contain;object-position:right bottom;opacity:.96;}
.pea-lab__close .pea-wrap{position:relative;z-index:2;}
@media(max-width:820px){.pea-lab__closeImage{right:-18%;bottom:-3%;width:88vw;opacity:.34;}}

/* CTA BANNER VISIBILITY FIX */
.pea-lab__closeArt{z-index:1!important;overflow:visible!important;}
.pea-lab__closeImage{display:block!important;opacity:1!important;width:min(68vw,1050px)!important;max-width:none!important;max-height:none!important;right:-5vw!important;bottom:-20%!important;filter:drop-shadow(0 18px 40px rgba(240,124,43,.14));}
.pea-lab__close .pea-wrap{z-index:2!important;}
@media(max-width:820px){.pea-lab__closeImage{width:115vw!important;right:-40vw!important;bottom:-5%!important;opacity:.30!important;}}

/* CTA BANNER DIRECT LAYER */
.pea-lab__closeArt{display:none!important;}
.pea-lab__closeImage{display:block!important;position:absolute!important;z-index:1!important;right:-2vw!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;width:min(62vw,960px)!important;height:auto!important;max-width:none!important;max-height:none!important;opacity:1!important;pointer-events:none!important;}
.pea-lab__close .pea-wrap{position:relative!important;z-index:3!important;}
@media(max-width:820px){.pea-lab__closeImage{width:120vw!important;right:-48vw!important;top:52%!important;opacity:.28!important;}}

/* =========================================================================
   FASE 1 · Correcciones criticas /web-design-development/
   ========================================================================= */

@media (min-width: 1025px) {
	/* 1a · Cola final de la secuencia 01-06.
	   Las seis etapas conservan sus 42vh: no se alarga ninguna. Lo que se
	   anade es recorrido DESPUES de la ultima, de modo que el sticky no se
	   libere en el mismo momento en que 06 acaba de aparecer. Son 30vh de
	   permanencia para que la imagen de SEO se vea entera. */
	.pea-lab__lySteps { padding-bottom: 30vh; padding-bottom: 30svh; }

	/* 1b · La entrada de SEO, mas rapida y limpia: 260 ms, dentro del rango
	   pedido de 220-300. Sustituye a los 300 ms anteriores. */
	.pea-lab__stageImage {
		transition:
			opacity .26s ease,
			transform .26s cubic-bezier(.2, .7, .2, 1) !important;
	}

	/* 3 · La capa CTA fija se retira de esta landing en escritorio.
	   La pagina ya lleva su propia conversion en el hero y en el cierre, y
	   una barra fija tapaba lectura durante varias secciones. En tactil se
	   conserva -es donde cumple su funcion- y alli el cierre sigue llevando
	   data-cta-quiet, que la retira al llegar al CTA final. */
	body.page-template-template-web-design .pea-cta { display: none !important; }
	body.page-template-template-web-design.pea-cta-on .pea-hdr__cta { opacity: 1; transform: none; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
	/* La cola y el trigger se mantienen: son maquetacion, no movimiento.
	   Solo se anula el recorrido de la imagen. */
	.pea-lab__stageImage { transition: none !important; }
}

/* =========================================================================
   FASE 2 · Ritmo vertical de la costura posterior al laboratorio
   -------------------------------------------------------------------------
   Solo espaciado. No se toca el contenido, la estructura ni la rejilla de
   #alcance, ni el laboratorio, ni el demo Responsive, ni sus paddings.

   El problema medido: entre el titular de #alcance y su contenido habia
   100,8 px de vacio, y entre secciones se sumaban 172,8 px de padding
   (86,4 de una y 86,4 de la siguiente). El bloque se leia como un tramite
   entre dos piezas fuertes.
   ========================================================================= */

/* El titular deja de flotar lejos de lo que anuncia. */
.pea-lab__scope .pea-head { margin-bottom: clamp(26px, 2.9vw, 44px); }

/* La seccion se ajusta por sus dos costuras: arriba con el demo Responsive,
   abajo con la banda oscura de la prueba. */
.pea-lab__scope { padding-block: clamp(30px, 3.4vw, 58px) clamp(34px, 3.8vw, 64px); }

/* La banda oscura entra antes: el contraste no necesita tanta carrerilla. */
.pea-lab__proof { padding-top: clamp(44px, 5vw, 84px); }

/* Las dos columnas dejan de terminar a distinta altura sin motivo: la de
   entregables se reparte en el alto que ya ocupa la de tipos de proyecto.
   No cambia ni un item ni su orden, solo como respiran entre si. */
/* La rejilla de dos columnas de Fase 2 desaparecio con el rediseno: las dos
   zonas ya no compiten en altura, van apiladas. */

/* =========================================================================
   FASE 3 · Composicion de #alcance
   -------------------------------------------------------------------------
   Mismo contenido y mismo orden. Lo que cambia es como se lee.

   Antes: dos listas planas en paralelo -cuatro desplegables con tres
   cerrados a la izquierda y ocho vinetas identicas en una columna estrecha
   a la derecha-. De un vistazo el bloque no comunicaba nada.

   Ahora: dos zonas apiladas con jerarquia distinta. Arriba, los cuatro tipos
   como indice horizontal con un unico panel de detalle; los cuatro titulos
   quedan visibles a la vez y solo hay un texto abierto. Abajo, los ocho
   entregables como banda a todo lo ancho, numerados, con sitio para leerse.
   Tres focos en total: titular, indice y banda.
   ========================================================================= */

/* --- Los cuatro tipos: indice horizontal + un panel ---------------------- */
.pea-lab__kinds {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: clamp(16px, 2vw, 34px);
	border-top: 1px solid var(--rule-2);
}
/* El par boton + panel se disuelve en la rejilla: el boton va a la fila del
   indice y el panel a la de detalle, sin reordenar el marcado. */
.pea-lab__kind,
.pea-lab__kindH { display: contents; }

.pea-lab__kindBtn {
	grid-row: 1;
	display: grid;
	gap: 8px;
	align-content: start;
	padding: clamp(16px, 1.9vw, 26px) 0 clamp(14px, 1.6vw, 22px);
	text-align: left;
	border-bottom: 2px solid transparent;
	transition: border-color 260ms var(--e-out), color 260ms var(--e-out);
}
.pea-lab__kindN { font-size: 0.68rem; letter-spacing: 0.16em; color: var(--muted); }
.pea-lab__kindT {
	font-family: var(--f-display);
	font-size: clamp(1.05rem, 1.55vw, 1.42rem);
	font-variation-settings: "wght" 640, "wdth" 93;
	letter-spacing: -0.03em; line-height: 1.12;
	color: var(--muted);
	transition: color 260ms var(--e-out);
}
.pea-lab__kindBtn:hover .pea-lab__kindT { color: var(--ink); }
.pea-lab__kindBtn:hover .pea-lab__kindN { color: var(--o-700); }
/* El activo: tinta plena, numero naranja y la regla que lo sostiene. */
.pea-lab__kindBtn[aria-expanded="true"] { border-bottom-color: var(--o-600); }
.pea-lab__kindBtn[aria-expanded="true"] .pea-lab__kindT { color: var(--ink); }
.pea-lab__kindBtn[aria-expanded="true"] .pea-lab__kindN { color: var(--o-700); }
/* El signo del desplegable solo tiene sentido cuando lo es: en escritorio
   esto es un indice, no un acordeon. */
.pea-lab__kindI { display: none; }

.pea-lab__kindBody {
	grid-row: 2;
	grid-column: 1 / -1;
	padding-top: clamp(20px, 2.2vw, 32px);
	padding-bottom: clamp(24px, 2.8vw, 40px);
}
.pea-lab__kindP {
	margin: 0;
	max-width: 58ch;
	font-size: clamp(1.02rem, 1.25vw, 1.24rem);
	line-height: 1.55;
	color: var(--ink);
}

/* --- Los ocho entregables: banda a todo lo ancho ------------------------- */
.pea-lab__deliver {
	border-top: 1px solid var(--rule-2);
	padding-top: clamp(20px, 2.2vw, 32px);
}
.pea-lab__deliverH { display: block; margin: 0 0 clamp(18px, 2vw, 30px); color: var(--o-700); }
.pea-lab__deliverList {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: clamp(16px, 2vw, 34px);
	row-gap: clamp(18px, 2vw, 30px);
}
.pea-lab__deliverList li {
	display: grid;
	gap: 7px;
	align-content: start;
	padding-top: 13px;
	border-top: 1px solid var(--rule);
	font-size: clamp(0.95rem, 1.05vw, 1.05rem);
	line-height: 1.35;
	color: var(--ink);
}
/* La vineta cuadrada desaparece: el numero ya ordena. */
.pea-lab__deliverList li::before { content: none; }
.pea-lab__deliverN { font-size: 0.66rem; letter-spacing: 0.16em; color: var(--o-700); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1200px) {
	.pea-lab__kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pea-lab__kindBtn { grid-row: auto; }
	.pea-lab__kindBody { grid-row: 3; }
	.pea-lab__deliverList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	/* En movil el indice horizontal no cabe sin apretarse: vuelve a ser un
	   desplegable vertical, que ahi si es el patron correcto. Cada texto
	   aparece bajo su propio titulo, sin reordenar el marcado. */
	.pea-lab__kinds { display: block; border-top: 0; }
	.pea-lab__kind { display: block; border-top: 1px solid var(--rule-2); }
	.pea-lab__kindH { display: block; }
	.pea-lab__kindBtn {
		width: 100%;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		gap: 12px;
		padding: 16px 0;
		border-bottom: 0;
	}
	.pea-lab__kindN { grid-row: 1; }
	.pea-lab__kindT { grid-row: 1; font-size: 1.08rem; }
	.pea-lab__kindI { display: block; grid-row: 1; }
	.pea-lab__kindBody { padding: 0 0 18px; }
	.pea-lab__kindP { font-size: 1rem; }

	.pea-lab__deliver { margin-top: clamp(26px, 5vw, 36px); }
	.pea-lab__deliverList { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.pea-lab__kindBtn,
	.pea-lab__kindT { transition: none; }
}

/* =========================================================================
   FASE 4 · Laboratorio 01-06 en movil
   -------------------------------------------------------------------------
   En escritorio no cambia nada: la escena sigue fija a la derecha y los
   observadores, los 42vh y la cola de 30vh de Fase 1 quedan intactos.

   Por debajo de 760 px el visual fijo deja de tener sentido: se quedaba
   arriba, pequeno y cada vez mas lejos de la etapa que se estaba leyendo.
   Ahi la escena se retira y cada etapa muestra SU imagen dentro de su propio
   bloque, en el orden natural 01 -> 06. Sin scroll programatico, sin
   temporizadores y sin tocar el JavaScript.
   ========================================================================= */

/* El duplicado por etapa solo existe en movil. */
.pea-lab__lyShot { display: none; }

@media (max-width: 760px) {
	/* Fuera el visual fijo y su rotulo: su sitio lo ocupa ahora cada etapa. */
	.pea-lab__lyStick { display: none; }

	/* La etapa pasa a ser una unidad completa: imagen, numero, titulo y
	   texto juntos, sin el filete lateral que estrechaba el ancho util. */
	.pea-lab__lyStep {
		border-left: 0;
		padding-left: 0;
		padding-block: clamp(26px, 6vw, 40px) clamp(30px, 7vw, 46px);
		border-top: 1px solid var(--rule);
	}
	.pea-lab__lyStep:first-child { border-top: 0; }
	/* La primera imagen entra con aire, no pegada a lo que viene encima. */
	.pea-lab__lyGrid { padding-top: clamp(8px, 3vw, 20px); }

	.pea-lab__lyShot {
		display: block;
		order: -1;                 /* la imagen abre la etapa */
		margin-bottom: clamp(14px, 3.5vw, 22px);
		margin-inline: calc(var(--gut) * -0.62);
	}
	.pea-lab__lyShot img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* Con la imagen presente, el texto no necesita tanto ancho de linea. */
	.pea-lab__lyText { max-width: none; }
}