/* PawCode historia (template-pawcode.php), hermana de template-brandpet.css.
   Un solo escenario fijo (sticky) que avanza con el scroll. En el centro hay
   siempre una ventana de navegador; los textos y notas van alrededor.
   El JS pone data-fase y los data-* de cada pieza, y --k (0 ventana → 1 celular).
   Ojo: ningún ancestro puede tener overflow (desactiva el sticky). */

.pcw { position: relative; height: 2260svh; }
body.page-template-template-pawcode { background: #fff; }
.pcw__escena {
	position: sticky; top: 0; height: 100svh; overflow: hidden;
	background: #fff; color: #111;
	/* Colores de PawCode: tema oscuro de VS Code (Dark+). --pc: fondo del editor; --pc-acento: verde agua de los
	   tipos, para usar SOBRE el fondo oscuro; --pc-texto: azul de la barra de estado, para texto y líneas sobre blanco;
	   --pc-claro: azul claro de las variables. --pc-fondo: amarillo quemado de la intro (pedido de Santiago, 2026-09-28). */
	--pc-fondo: #D99A12; --pc: #1E1E1E; --pc-acento: #4EC9B0; --pc-texto: #007ACC; --pc-claro: #9CDCFE; --magenta: #FF006E; --amarillo: #FFD60A;
	--tope: calc(var(--alto-menu, 66px) + clamp(10px, 3svh, 32px));
	/* Zona libre entre el título (hasta 2 líneas) y el párrafo: ahí va la ventana, centrada. */
	--zona-arriba: calc(var(--tope) + 128px); --zona-abajo: clamp(112px, 17svh, 170px);
	--zona: calc(100svh - var(--zona-arriba) - var(--zona-abajo));
	--w: min(780px, 88vw); --h: min(420px, calc(var(--zona) - 12px));   /* ventana */
	--wc: min(250px, 58vw); --hc: min(500px, calc(var(--zona) - 8px));  /* celular */
	--ease: cubic-bezier(.22, .61, .36, 1);
	--rebote: cubic-bezier(.34, 1.56, .64, 1);
	transition: background-color .6s var(--ease), color .6s var(--ease);
}
.pcw__escena[data-fase="0"] { background: var(--pc-fondo); color: #fff; }

/* ---------- textos: título arriba, párrafo abajo (uno por fase) ---------- */
.pcw__arriba, .pcw__abajo {
	position: absolute; left: 0; right: 0; margin: 0 auto; padding: 0 16px; text-align: center; z-index: 3;
	opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease);
	pointer-events: none;
}
.pcw__arriba { top: var(--tope); max-width: 900px; }
.pcw__abajo { bottom: clamp(52px, 10svh, 110px); max-width: 580px; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; }
.pcw__eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pc-texto); transition: color .5s; }
.pcw__escena[data-fase="0"] .pcw__eyebrow { color: #fff; }
.pcw__titulo {
	margin: 10px auto 0; max-width: 24ch; font-family: var(--koi-font-texto); font-weight: 600; text-transform: none;
	font-size: clamp(24px, 3.1vw, 44px); line-height: 1.1; letter-spacing: -.02em; color: inherit;
}
.pcw__escena[data-fase="0"] .pcw__arriba[data-texto="0"], .pcw__arriba[data-on] { opacity: 1; transform: none; }
.pcw__escena[data-fase="0"] .pcw__abajo[data-texto="0"], .pcw__abajo[data-on] { opacity: .75; transform: none; }
.pcw__escena[data-fase="0"] .pcw__abajo[data-texto="0"] { opacity: .95; } /* blanco sobre amarillo: sin transparencia se lee mejor */

/* ---------- intro: PAWCODE con cursor de código ---------- */
.pcw__intro {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2svh;
	color: #fff; transition: opacity .5s var(--ease), transform .6s var(--ease); pointer-events: none;
}
.pcw__nombre { display: flex; align-items: center; gap: .04em; font-family: var(--koi-font-display); font-size: min(15vw, 22svh); line-height: 1; }
.pcw__nombre > span { transform: translateY(.1em); }
/* Etiqueta y ecualizador, como en la intro de MediaSnout. */
.pcw__rec { display: inline-flex; align-items: center; gap: 8px; font-family: var(--koi-font-texto); font-size: 14px; font-weight: 800; letter-spacing: .2em; color: #fff; }
.pcw__rec i { width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .9); animation: pcw-parpadeo 1.2s steps(1) infinite; }
@keyframes pcw-parpadeo { 50% { opacity: .15; } }
.pcw__eq { display: flex; align-items: flex-end; gap: 5px; height: 7svh; }
.pcw__eq i { width: clamp(4px, .6vw, 8px); height: 100%; border-radius: 3px; background: #1E1E1E; opacity: .85; transform-origin: bottom; animation: pcw-eq 1.1s var(--ease) calc(var(--i) * -.13s) infinite alternate; }
.pcw__eq i:nth-child(3n) { background: #fff; }
@keyframes pcw-eq { from { transform: scaleY(.15); } to { transform: scaleY(1); } }
.pcw__escena:not([data-fase="0"]) .pcw__intro { opacity: 0; transform: scale(.85); }
.pcw__caret { display: inline-block; width: .08em; height: .72em; background: currentColor; border-radius: 2px; animation: pcw-caret 1s steps(1) infinite; vertical-align: middle; }
@keyframes pcw-caret { 50% { opacity: 0; } }

/* ---------- la ventana del navegador (--k: 0 ventana, 1 celular) ---------- */
.pcw__centro, .pcw__notas, .pcw__avisos { inset: var(--zona-arriba) 0 var(--zona-abajo) 0 !important; }
.pcw__centro { position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.pcw__ventana {
	--k: 0;
	position: relative; display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
	width: calc(var(--w) * (1 - var(--k)) + var(--wc) * var(--k));
	height: calc(var(--h) * (1 - var(--k)) + var(--hc) * var(--k));
	border: calc(var(--k) * 10px) solid #111; border-radius: calc(14px + var(--k) * 30px);
	background: #fff; box-shadow: 0 30px 70px rgba(17, 17, 17, .16), 0 0 0 1px rgba(17, 17, 17, .08);
	opacity: 0; transform: translateY(24px) scale(.9); transition: opacity .5s var(--ease), transform .7s var(--rebote);
}
.pcw__escena:not([data-fase="0"]) .pcw__ventana { opacity: 1; transform: none; }
.pcw__barra {
	flex: none; display: flex; align-items: center; gap: 7px; overflow: hidden;
	height: calc(34px * (1 - var(--k))); padding: 0 14px; background: #F2F3F5; border-bottom: 1px solid rgba(17, 17, 17, .06);
}
.pcw__barra i { width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; flex: none; }
.pcw__barra i:nth-child(2) { background: #FEBC2E; }
.pcw__barra i:nth-child(3) { background: #28C840; }
.pcw__url { margin: 0 auto; padding: 3px 40px; border-radius: 7px; background: #fff; font-size: 12px; color: rgba(17, 17, 17, .55); }
/* Barra de estado e isla (estilo iPhone): solo aparecen cuando la ventana es celular. */
.pcw__estado {
	flex: none; position: relative; display: flex; align-items: center; justify-content: space-between; overflow: hidden;
	height: calc(var(--k) * 30px); padding: 0 18px; opacity: var(--k); background: #fff; font-size: 11px;
}
.pcw__estado b { font-weight: 700; }
.pcw__isla { position: absolute; left: 50%; top: 6px; width: 34%; height: 19px; border-radius: 999px; background: #111; transform: translateX(-50%); }
.pcw__iconos { display: flex; align-items: flex-end; gap: 2px; height: 9px; }
.pcw__iconos i { width: 3px; border-radius: 1px; background: #111; }
.pcw__iconos i:nth-child(1) { height: 4px; }
.pcw__iconos i:nth-child(2) { height: 6px; }
.pcw__iconos i:nth-child(3) { height: 9px; margin-right: 4px; box-shadow: 7px 0 0 0 #111, 11px 0 0 0 #111; width: 3px; }
.pcw__pantalla { position: relative; flex: 1; overflow: hidden; container-type: inline-size; background: #fff; }

/* Botones de la compra (fase 4). */
.pcw-btn {
	display: inline-flex; align-items: center; justify-content: center; padding: .85em 1.6em; border-radius: 999px;
	background: var(--gt-fuerte); color: var(--gt-claro); font-size: .88em; font-weight: 800; white-space: nowrap;
	transition: transform .2s var(--ease), box-shadow .3s, opacity .4s, background-color .4s, color .4s;
}
.pcw-btn[data-clic] { transform: scale(.93); box-shadow: 0 0 0 .55em rgba(255, 0, 110, .22); }
@keyframes pcw-pop { 40% { transform: scale(1.04); } }

/* Panel en pantalla chica (celular o ventana angosta). */
@container (max-width: 480px) {
	.pcw-panel__cuerpo { grid-template-columns: 1fr; }
	.pcw-panel__busquedas { display: none; }
}

/* ---------- fase 1: el código ---------- */
.pcw-codigo {
	position: absolute; inset: 0; z-index: 5; margin: 0; padding: 1.4em 1.8em; overflow: hidden;
	background: #1E1E1E; color: #D4D4D4; white-space: pre-wrap; text-align: left;
	font: 500 clamp(11px, 1.35vw, 16px)/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	opacity: 0; transition: opacity .5s var(--ease);
}
.pcw__escena[data-codigo] .pcw-codigo { opacity: 1; }
.pcw-codigo__tag { color: #569CD6; }
.pcw-codigo__signo { color: #808080; }
.pcw-codigo .pcw__caret { width: .55em; height: 1.1em; background: #AEAFAD; margin-left: 2px; vertical-align: text-bottom; }

/* ---------- fase 3: cursor y embudo ---------- */
.pcw-cursor { position: absolute; z-index: 6; width: 24px; height: 24px; left: 88%; top: 92%; opacity: 0; transition: opacity .3s; }
.pcw-cursor svg { display: block; width: 100%; height: 100%; fill: #111; stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }
.pcw__escena[data-cursor] .pcw-cursor { opacity: 1; }
.pcw-embudo {
	position: absolute; z-index: 4; left: calc(50% + var(--w) / 2 - 80px); top: calc(50% + var(--h) / 2 - 120px);
	display: grid; gap: 10px; min-width: 200px; padding: 16px 18px; border-radius: 18px; background: var(--pawnia-verde); color: #fff;
	box-shadow: 0 18px 40px rgba(51, 91, 84, .3); font-family: var(--koi-font-texto);
	opacity: 0; transform: scale(.8) translateY(10px); transition: opacity .35s, transform .6s var(--rebote);
}
.pcw-embudo[data-on] { opacity: 1; transform: none; }
.pcw-embudo span { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.pcw-embudo span:last-child { padding-bottom: 0; border-bottom: 0; }
.pcw-embudo small { font-size: 12px; opacity: .7; }
.pcw-embudo b { font-size: 20px; font-weight: 800; color: var(--pawnia-lima); }
.pcw-embudo span:last-child b { color: #fff; }

/* ---------- fase 4: la reserva dentro del sitio ---------- */
.pcw-reserva {
	position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center;
	background: rgba(17, 17, 17, .35); opacity: 0; transition: opacity .4s var(--ease);
}
.pcw-reserva[data-on] { opacity: 1; }
.pcw-reserva__caja {
	width: min(24em, 86%); padding: 1.3em 1.4em; border-radius: 1.2em; background: #fff; text-align: left;
	/* El tamaño también depende del alto de la ventana (--h): en pantallas bajas la caja no se sale de la ventana. */
	font-family: var(--koi-font-texto); font-size: min(clamp(10px, 1.9cqw, 15px), calc((var(--h) - 50px) / 20.5)); color: #111;
	box-shadow: 0 1.5em 3em rgba(17, 17, 17, .25); transform: translateY(1.5em); transition: transform .5s var(--rebote);
}
.pcw-reserva[data-on] .pcw-reserva__caja { transform: none; }
.pcw-reserva__cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8em; }
.pcw-reserva__cabeza b { font-size: 1.2em; }
.pcw-reserva__pasos { display: flex; gap: .35em; }
.pcw-reserva__pasos i { width: 1.6em; height: .35em; border-radius: .2em; background: #E6E8EB; transition: background-color .3s; }
.pcw-reserva__pasos i[data-on] { background: var(--pc-texto); }
.pcw-reserva__paso { display: none; }
.pcw-reserva__paso[data-on] { display: block; animation: pcw-entra .4s var(--ease); }
@keyframes pcw-entra { from { opacity: 0; transform: translateX(1em); } }
.pcw-reserva small { font-size: .8em; color: rgba(17, 17, 17, .6); }
/* Carrito y envío del checkout. */
.pcw-compra__item { display: grid; grid-template-columns: 3em 1fr auto; align-items: center; gap: .7em; padding: .55em 0; border-bottom: 1px solid #EEE; }
.pcw-compra__item b { display: block; font-size: .9em; }
.pcw-compra__item em { font-style: normal; font-weight: 800; font-size: .9em; }
.pcw-compra__mini { display: grid; place-items: center; width: 3em; height: 3em; border-radius: .6em; background: var(--fondo); font-size: .55em; }
.pcw-compra__total { display: flex; align-items: baseline; justify-content: space-between; margin: .7em 0; }
.pcw-compra__total b { font-size: 1.3em; }
.pcw-compra__carrito .pcw-btn, .pcw-reserva__pago .pcw-btn { display: flex; width: 100%; box-sizing: border-box; }
.pcw-compra__campo { display: block; margin-top: .5em; padding: .65em .9em; border-radius: .6em; box-shadow: inset 0 0 0 1px #DDD; font-size: .9em; }
.pcw-compra__opcion { display: flex; align-items: center; gap: .6em; margin-top: .5em; padding: .7em .9em; border-radius: .6em; box-shadow: inset 0 0 0 1px #DDD; font-size: .88em; transition: box-shadow .3s, background-color .3s; }
.pcw-compra__opcion i { flex: none; width: 1em; height: 1em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #BBB; transition: box-shadow .3s; }
.pcw-compra__opcion b { flex: 1; }
.pcw-compra__opcion em { font-style: normal; font-weight: 800; }
.pcw-compra__opcion[data-elegido] { background: #FFF0F6; box-shadow: inset 0 0 0 2px var(--magenta); }
.pcw-compra__opcion[data-elegido] i { box-shadow: inset 0 0 0 .3em var(--magenta); }
.pcw-compra__opcion[data-elegido] em { color: #1E9E6A; }
/* Medios de pago locales. */
.pcw-medios { display: flex; flex-wrap: wrap; gap: .35em; margin: .5em 0 .7em; }
.pcw-medios i { padding: .45em .75em; border-radius: .5em; box-shadow: inset 0 0 0 1px #DDD; font-style: normal; font-size: .78em; font-weight: 700; transition: background-color .3s, box-shadow .3s; }
.pcw-medios i[data-elegido] { background: #FFF0F6; box-shadow: inset 0 0 0 2px var(--magenta); }
.pcw-reserva__monto { display: block; margin: .15em 0 .6em; font-size: 2em; font-weight: 800; }
.pcw-reserva__tarjeta { display: block; margin-bottom: .9em; padding: .7em .9em; border-radius: .6em; box-shadow: inset 0 0 0 1px #DDD; font-family: ui-monospace, Menlo, monospace; font-size: .9em; }
.pcw-reserva__ok { text-align: center; padding: .6em 0; }
.pcw-reserva__check { display: inline-flex; align-items: center; justify-content: center; width: 3.4em; height: 3.4em; border-radius: 50%; background: var(--pc); animation: pcw-pop .6s var(--rebote); }
.pcw-reserva__check svg { width: 60%; height: 60%; fill: none; stroke: var(--pc-acento); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pcw-reserva__ok b { display: block; margin: .6em 0 .2em; font-size: 1.3em; }

/* ---------- fase 7: panel de medición ---------- */
.pcw-panel {
	position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; gap: 1.2em; padding: 1.5em 2em;
	background: #fff; font-family: var(--koi-font-texto); font-size: clamp(9px, 1.7cqw, 15px); color: #111; text-align: left;
	opacity: 0; transition: opacity .45s var(--ease);
}
.pcw-panel[data-on] { opacity: 1; }
.pcw-panel__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }
.pcw-panel__kpis span { padding: .9em 1em; border-radius: .9em; background: #F3F3F3; }
.pcw-panel__kpis small { display: block; font-size: .8em; color: rgba(17, 17, 17, .6); }
.pcw-panel__kpis b { display: block; font-size: 1.9em; font-weight: 800; letter-spacing: -.02em; }
.pcw-panel__kpis em { font-style: normal; font-size: .75em; font-weight: 700; color: #1E9E6A; }
.pcw-panel__cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2em; }
.pcw-panel__busquedas { display: flex; flex-direction: column; gap: .15em; }
.pcw-panel__busquedas small { margin-bottom: .3em; font-size: .78em; font-weight: 700; color: rgba(17, 17, 17, .6); }
.pcw-panel__busquedas span { display: flex; justify-content: space-between; gap: .6em; padding: .45em 0; border-bottom: 1px solid #EEE; font-size: .8em; }
.pcw-panel__busquedas b { font-weight: 600; }
.pcw-panel__busquedas em { font-style: normal; font-weight: 800; color: var(--pc-texto); }
.pcw-panel__grafico { min-height: 0; display: flex; align-items: flex-end; gap: .55em; border-bottom: 1px solid #E5E5E5; }
.pcw-panel__grafico i { flex: 1; height: calc(var(--alto) * var(--crece, 0)); border-radius: .35em .35em 0 0; background: linear-gradient(var(--pc-texto), var(--pc-acento)); }
.pcw-panel__grafico i:last-child { background: linear-gradient(var(--magenta), #FF7DB3); }
.pcw-panel__pie { font-size: .75em; color: rgba(17, 17, 17, .5); }

/* ---------- notas alrededor de la ventana ---------- */
.pcw__notas, .pcw__avisos { list-style: none; margin: 0; padding: 0; position: absolute; pointer-events: none; z-index: 4; }
.pcw__nota {
	position: absolute; padding: .55em 1.1em .6em; border-radius: 999px; white-space: nowrap;
	font-size: clamp(13px, 1.15vw, 16px); font-weight: 700; background: var(--pawnia-teal); color: #fff; /* colores de Pawnia, pedido de Santiago (antes negro) */
	--tx: -50%;
	opacity: 0; transform: translate(var(--tx), -50%) scale(.3); transition: opacity .3s, transform .6s var(--rebote);
}
.pcw__nota[data-on] { opacity: 1; transform: translate(var(--tx), -50%) scale(1); }
.pcw__nota--1 { background: var(--pawnia-verde); color: var(--pawnia-lima); }
.pcw__nota--2 { background: var(--pawnia-rosa); }
.pcw__nota--0 { left: calc(50% - var(--w) / 2); top: calc(50% - var(--h) / 4); }
.pcw__nota--1 { left: calc(50% + var(--w) / 2); top: calc(50% - var(--h) / 10); }
.pcw__nota--2 { left: calc(50% - var(--w) / 2 + 30px); top: calc(50% + var(--h) / 3); }
/* En pantallas anchas las notas van afuera de la ventana, a los costados (no tapan el contenido). */
@media (min-width: 1200px) {
	.pcw__nota--0, .pcw__nota--2 { left: calc(50% - var(--w) / 2 - 22px); --tx: -100%; }
	.pcw__nota--1 { left: calc(50% + var(--w) / 2 + 22px); --tx: 0%; }
}
/* En el celular (fase 6) la ventana es angosta: las notas van a los costados del teléfono. */
@media (min-width: 701px) {
	.pcw__escena[data-fase="6"] .pcw__nota--0 { left: calc(50% - var(--wc) / 2 - 28px); top: calc(50% - var(--hc) / 5); --tx: -100%; }
	.pcw__escena[data-fase="6"] .pcw__nota--1 { left: calc(50% + var(--wc) / 2 + 28px); top: calc(50% + var(--hc) / 6); --tx: 0%; }
}

/* ---------- avisos (fase 5): notificaciones alrededor ---------- */
.pcw__aviso {
	position: absolute; display: flex; align-items: center; gap: 10px; min-width: 230px; padding: 10px 16px 10px 10px;
	border-radius: 16px; background: rgba(255, 255, 255, .94); box-shadow: 0 14px 34px rgba(17, 17, 17, .14), 0 0 0 1px rgba(17, 17, 17, .05);
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 13px; text-align: left;
	opacity: 0; transform: translate(-50%, -50%) translateY(12px) scale(.9); transition: opacity .3s, transform .6s var(--rebote);
}
.pcw__aviso[data-on] { opacity: 1; transform: translate(-50%, -50%); }
.pcw__aviso b { display: block; font-size: 13.5px; }
.pcw__aviso small { display: block; color: rgba(17, 17, 17, .6); }
.pcw__aviso-icono { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 11px; background: var(--pawnia-teal); color: #fff; }
.pcw__aviso--1 .pcw__aviso-icono { background: var(--pawnia-rosa); }
.pcw__aviso--2 .pcw__aviso-icono { background: var(--pawnia-verde); color: var(--pawnia-lima); }
.pcw__aviso--3 .pcw__aviso-icono { background: var(--pawnia-lima); color: var(--pawnia-verde); }
.pcw__aviso-icono svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pcw__aviso--0 { left: calc(50% - var(--w) / 2 + 30px); top: calc(50% - var(--h) / 2 + 30px); }
.pcw__aviso--1 { left: calc(50% + var(--w) / 2 - 20px); top: calc(50% - var(--h) / 2 + 90px); }
.pcw__aviso--2 { left: calc(50% - var(--w) / 2 + 10px); top: calc(50% + var(--h) / 2 - 70px); }
.pcw__aviso--3 { left: calc(50% + var(--w) / 2 - 30px); top: calc(50% + var(--h) / 2 - 20px); }

/* ---------- fases 8 y 9: conexiones alrededor de la ventana ---------- */
.pcw__conexiones { position: absolute; inset: var(--zona-arriba) 0 var(--zona-abajo) 0; pointer-events: none; z-index: 4; }
.pcw__conexiones ul { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.pcw__lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pcw__lineas line {
	stroke: var(--pc-texto); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 3 7;
	opacity: 0; transition: opacity .4s; animation: pcw-datos 1.1s linear infinite;
}
.pcw__lineas line[data-on] { opacity: .75; }
.pcw__lineas line[data-atenuado] { opacity: .15; }
@keyframes pcw-datos { to { stroke-dashoffset: -20; } }
.pcw__chip {
	position: absolute; display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px;
	background: #fff; box-shadow: 0 10px 26px rgba(17, 17, 17, .12), 0 0 0 1px rgba(17, 17, 17, .05); white-space: nowrap; text-align: left;
	--tx: -50%;
	opacity: 0; transform: translate(var(--tx), -50%) scale(.6); transition: opacity .35s, transform .6s var(--rebote), filter .4s;
}
.pcw__chip[data-on] { opacity: 1; transform: translate(var(--tx), -50%) scale(1); }
.pcw__chip[data-atenuado] { opacity: .3; filter: grayscale(1); }
.pcw__chip b { display: block; font-size: 13.5px; }
.pcw__chip small { display: block; font-size: 11.5px; color: rgba(17, 17, 17, .6); }
.pcw__chip-icono { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 800; }
.pcw__chip--0, .pcw__chip--1, .pcw__chip--2, .pcw__chip--3 { left: calc(50% - var(--w) / 2 + 10px); }
.pcw__chip--4, .pcw__chip--5, .pcw__chip--6, .pcw__chip--7 { left: calc(50% + var(--w) / 2 - 10px); }
.pcw__chip--0, .pcw__chip--4 { top: 10%; }
.pcw__chip--1, .pcw__chip--5 { top: 36%; }
.pcw__chip--2, .pcw__chip--6 { top: 62%; }
.pcw__chip--3, .pcw__chip--7 { top: 88%; }
@media (min-width: 1200px) {
	.pcw__chip--0, .pcw__chip--1, .pcw__chip--2, .pcw__chip--3 { left: calc(50% - var(--w) / 2 - 40px); --tx: -100%; }
	.pcw__chip--4, .pcw__chip--5, .pcw__chip--6, .pcw__chip--7 { left: calc(50% + var(--w) / 2 + 40px); --tx: 0%; }
}
/* Wollo: la última conexión, al centro del borde de abajo, más grande. */
/* Con la imagen corporativa de Wollo (wollo.pet): su isotipo como ícono de app y su naranja #EF6529. */
.pcw__chip--wollo { left: 50%; top: calc(50% + var(--h) / 2 - 24px); padding: 10px 22px 10px 10px; background: #fff; color: #111; box-shadow: 0 18px 40px rgba(239, 101, 41, .3), inset 0 0 0 2px #EF6529; }
.pcw__chip-isotipo { flex: none; width: 48px; height: 48px; border-radius: 12px; }
.pcw__chip--wollo[data-on] { animation: pcw-pulso 2s var(--ease) .6s infinite; }
@keyframes pcw-pulso { 0% { box-shadow: 0 18px 40px rgba(17, 17, 17, .3), 0 0 0 0 rgba(47, 153, 151, .55); } 70%, 100% { box-shadow: 0 18px 40px rgba(17, 17, 17, .3), 0 0 0 18px rgba(47, 153, 151, 0); } }
.pcw__chip--wollo b { font-size: 18px; }
.pcw__chip--wollo small { color: rgba(17, 17, 17, .6); font-size: 12.5px; }
/* Mientras se ven las conexiones, la ventana queda un poco más chica para dejarles aire. */
.pcw__escena[data-conexiones] .pcw__ventana { transform: scale(.94); }

/* ---------- progreso y pista ---------- */
.pcw__progreso { position: absolute; left: 50%; bottom: clamp(14px, 3svh, 28px); width: min(160px, 40vw); height: 3px; border-radius: 3px; background: rgba(127, 127, 127, .25); transform: translateX(-50%); }
.pcw__progreso span { display: block; height: 100%; border-radius: inherit; background: var(--pc-texto); transform-origin: left; transform: scaleX(var(--p, 0)); }
.pcw__escena[data-fase="0"] .pcw__progreso span { background: #1E1E1E; }
.pcw__pista { position: absolute; left: 50%; bottom: calc(clamp(14px, 3svh, 28px) + 14px); transform: translateX(-50%); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .6; transition: opacity .4s; }
.pcw__escena:not([data-fase="0"]) .pcw__pista { opacity: 0; }

/* ---------- add-ons (después del escenario, sección normal) ---------- */
.pca { background: #fff; padding: clamp(72px, 10vw, 140px) 16px; }
.pca__cabeza { max-width: 720px; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; }
.pca__eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #007ACC; }
.pca__titulo { margin: 10px auto 0; font-family: var(--koi-font-texto); font-weight: 600; text-transform: none; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -.02em; color: #111; }
.pca__texto { margin: 14px auto 0; max-width: 48ch; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.6; opacity: .75; }
.pca__grilla { list-style: none; margin: 0 auto; padding: 0; max-width: 1120px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.pca__item { padding: 28px; border-radius: 24px; background: #F3F3F3; border: 1px solid rgba(17, 17, 17, .06); transition: transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .3s; }
.pca__item:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(17, 17, 17, .08); }
.pca__icono { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--pawnia-verde); color: var(--pawnia-lima); }
.pca__icono svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pca__nombre { margin: 18px 0 8px; font-family: var(--koi-font-texto); font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-transform: none; color: #111; }
.pca__item p { margin: 0; font-size: 15px; line-height: 1.55; opacity: .72; }
.pca__cta { margin-top: 40px; text-align: center; }

@media (max-width: 700px) {
	.pcw__escena { --w: 92vw; --h: min(400px, calc(var(--zona) - 8px)); --zona-arriba: calc(var(--tope) + 104px); --zona-abajo: clamp(120px, 16svh, 150px); }
	.pcw__nota { font-size: 12px; }
	/* En el celular las notas van montadas sobre el marco de la ventana: debajo no hay lugar (está el párrafo). */
	.pcw__nota--0 { left: 30%; top: calc(50% - var(--h) / 2 + 2px); }
	.pcw__nota--1 { left: 68%; top: calc(50% + var(--h) / 2 - 18px); }
	.pcw__nota--2 { left: 32%; top: calc(50% + var(--h) / 2 - 56px); }
	.pcw__escena[data-fase="6"] .pcw__nota--0 { left: 50%; top: calc(50% - var(--hc) / 2 + 40px); }
	.pcw__escena[data-fase="6"] .pcw__nota--1 { left: 50%; top: calc(50% + var(--hc) / 2 - 64px); }
	/* En conversión el embudo ocupa abajo a la derecha: la segunda nota sube al borde de arriba. */
	.pcw__escena[data-fase="3"] .pcw__nota--0 { left: 29%; }
	.pcw__escena[data-fase="3"] .pcw__nota--1 { left: 72%; top: calc(50% - var(--h) / 2 + 2px); }
	.pcw__escena[data-fase="3"] .pcw__nota--2 { left: 30%; top: calc(50% + var(--h) / 2 - 18px); }
	/* En GEO las dos últimas notas van juntas sobre el borde de abajo (no tapan la respuesta de la IA). */
	.pcw__escena[data-fase="8"] .pcw__nota--1 { left: 78%; top: calc(50% + var(--h) / 2 - 18px); }
	.pcw__escena[data-fase="8"] .pcw__nota--2 { left: 29%; top: calc(50% + var(--h) / 2 - 18px); }
	.pcw-embudo { left: auto; right: 10px; top: calc(50% + var(--h) / 2 - 70px); min-width: 170px; padding: 12px 14px; }
	.pcw-embudo b { font-size: 16px; }
	.pcw__aviso { min-width: 0; width: 80vw; left: 50% !important; }
	.pcw__aviso--0 { top: calc(50% - var(--h) / 2 + 40px); }
	.pcw__aviso--1 { top: calc(50% - var(--h) / 2 + 110px); }
	.pcw__aviso--2 { top: calc(50% - var(--h) / 2 + 180px); }
	.pcw__aviso--3 { top: calc(50% - var(--h) / 2 + 250px); }
	.pcw__abajo { bottom: clamp(44px, 8svh, 80px); font-size: 14px; }
	/* Conexiones en celular: una fila arriba y otra abajo de la ventana, solo ícono y nombre. */
	.pcw__chip { gap: 5px; padding: 4px 8px 4px 4px; max-width: 94px; white-space: normal; }
	.pcw__chip b { font-size: 10px; line-height: 1.15; }
	.pcw__chip small { display: none; }
	.pcw__chip-icono { width: 20px; height: 20px; font-size: 9px; }
	.pcw__chip--0, .pcw__chip--4 { left: 13%; }
	.pcw__chip--1, .pcw__chip--5 { left: 38%; }
	.pcw__chip--2, .pcw__chip--6 { left: 62%; }
	.pcw__chip--3, .pcw__chip--7 { left: 87%; }
	.pcw__chip--0, .pcw__chip--1, .pcw__chip--2, .pcw__chip--3 { top: calc(50% - var(--h) / 2 + 6px); }
	.pcw__chip--4, .pcw__chip--5, .pcw__chip--6, .pcw__chip--7 { top: calc(50% + var(--h) / 2 - 28px); }
	.pcw__chip--wollo { top: 50%; max-width: none; padding: 10px 18px 10px 10px; white-space: nowrap; }
	.pcw__chip--wollo b { font-size: 16px; }
	.pcw__chip--wollo small { display: block; font-size: 11px; }
	.pcw__chip-isotipo { width: 38px; height: 38px; border-radius: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.pcw__escena, .pcw__escena * { transition-duration: .01s !important; animation: none !important; }
}

/* ---------- la ficha de producto de GATERING: en recursos/css/gatering-pdp.css (compartida con MediaSnout) ---------- */

/* ---------- la compra y el panel con la identidad de la ficha (fases 4 y 7) ----------
   Pedido de Santiago: el diseño de Identidad (la ficha) está en todas las fases, no solo sus colores. */
.pcw__pantalla { --gt-fuerte: #FF006E; --gt-fondo: #FFD60A; --gt-fondo-osc: #F5C400; --gt-claro: #FFF6C7; --gt-cinta: #FFD60A; --gt-acento: #FFD60A; }

/* Compra (fase 4): caja crema, botones vino, opciones elegidas en lila. */
.pcw-reserva { background: rgba(17, 17, 17, .35); }
.pcw-reserva__caja { background: var(--gt-claro) !important; color: var(--gt-fuerte); box-shadow: 0 1.4em 3em rgba(255, 0, 110, .35); }
.pcw-reserva__cabeza b, .pcw-reserva__ok b { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 1.45em; }
.pcw-reserva small { color: rgba(255, 0, 110, .7); }
.pcw-reserva__pasos i { background: rgba(255, 0, 110, .15); }
.pcw-reserva__pasos i[data-on] { background: var(--gt-fuerte); }
.pcw-compra__item { border-bottom-color: rgba(255, 0, 110, .15); }
.pcw-compra__mini { overflow: hidden; background: var(--gt-fondo); font-size: 1em; }
.pcw-compra__mini img { width: 100%; height: 100%; object-fit: cover; }
.pcw-compra__campo, .pcw-compra__opcion, .pcw-medios i, .pcw-reserva__tarjeta { background: #FFFBE3; box-shadow: inset 0 0 0 1.5px rgba(255, 0, 110, .35); }
.pcw-compra__opcion i { box-shadow: inset 0 0 0 1.5px var(--gt-fuerte); }
.pcw-compra__opcion[data-elegido], .pcw-medios i[data-elegido] { background: #FFE0EE; box-shadow: inset 0 0 0 2px var(--gt-fuerte); }
.pcw-compra__opcion[data-elegido] i { box-shadow: inset 0 0 0 .3em var(--gt-fuerte); }
.pcw-compra__opcion[data-elegido] em { color: var(--gt-fuerte); }
.pcw-reserva__check { background: var(--gt-fuerte); }
.pcw-reserva__tabs { display: flex; gap: .25em; margin: -.2em 0 .9em; padding: .25em; border-radius: 999px; background: rgba(255, 0, 110, .1); }
.pcw-reserva__tabs i { flex: 1; padding: .45em .6em; border-radius: 999px; text-align: center; font-style: normal; font-size: .75em; font-weight: 700; white-space: nowrap; transition: background-color .3s, color .3s; }
.pcw-reserva__tabs i[data-on] { background: var(--gt-fuerte); color: var(--gt-claro); }
.pcw-reserva__cabeza b[data-titulo] { display: none; }
.pcw-reserva__cabeza b[data-titulo][data-on] { display: block; }
.pcw-servicio__dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3em; margin: .5em 0 .2em; }
.pcw-servicio__dias i { display: grid; place-items: center; aspect-ratio: 1; border-radius: .45em; background: #FFFBE3; box-shadow: inset 0 0 0 1px rgba(255, 0, 110, .25); font-style: normal; font-size: .75em; font-weight: 700; transition: background-color .3s, color .3s; }
.pcw-servicio__dias i[data-elegido] { background: var(--gt-fuerte); color: var(--gt-claro); box-shadow: none; }
.pcw-servicio__cuando .pcw-btn { display: flex; width: 100%; box-sizing: border-box; }
.pcw-medios i[data-hora][data-elegido] { background: #FFE0EE; box-shadow: inset 0 0 0 2px var(--gt-fuerte); }
.pcw-reserva__check svg { stroke: var(--gt-acento); }


/* Panel (fase 7): tarjetas crema y barras naranja → vino. */
.pcw-panel { color: var(--gt-fuerte); }
.pcw-panel__kpis span { background: var(--gt-claro); }
.pcw-panel__kpis small, .pcw-panel__busquedas small, .pcw-panel__pie { color: rgba(255, 0, 110, .65); }
.pcw-panel__kpis em { color: #2E8B57; }
.pcw-panel__grafico i { background: linear-gradient(var(--gt-fondo), var(--gt-fondo-osc)); }
.pcw-panel__grafico i:last-child { background: linear-gradient(var(--gt-fuerte), #FF6FA8); }
.pcw-panel__busquedas em { color: var(--gt-fuerte); }

/* Computadoras con pantalla baja (notebooks): título y párrafo más chicos y zonas ajustadas,
   para que el dispositivo del centro no quede pegado al título ni tapado por el párrafo. */
@media (min-width: 701px) and (max-height: 850px) {
	.pcw__escena {
		--tope: calc(var(--alto-menu, 66px) + clamp(8px, 2svh, 24px));
		--zona-arriba: calc(var(--tope) + clamp(84px, 15svh, 128px)); --zona-abajo: clamp(120px, 21svh, 180px);
	}
	.pcw__eyebrow { font-size: 12px; }
	.pcw__titulo { margin-top: 6px; font-size: clamp(22px, min(2.7vw, 4.8svh), 40px); }
	.pcw-pdp__lista { display: none; }
	.pcw-pdp__foto { aspect-ratio: 1.75; }
	.pcw-pdp__der { gap: .5em; }
	.pcw__abajo { bottom: clamp(56px, 9svh, 90px); font-size: clamp(14px, min(1.1vw, 2.2svh), 16px); line-height: 1.55; }
}
/* Pantallas todavía más bajas (notebooks chicas, pedido de Santiago): la ventana y el celular del centro
   quedaban muy bajitos. El título va en una sola línea y el párrafo más abajo y más ancho, para dejarle al
   dispositivo casi todo el alto. */
@media (min-width: 701px) and (max-height: 760px) {
	/* El celular mantiene proporción de teléfono (alto ≈ 1,9 × ancho) en vez de quedar ancho y bajito. */
	.pcw__escena { --zona-arriba: calc(var(--tope) + 58px); --zona-abajo: 84px; --wc: min(250px, 58vw, calc(var(--hc) / 1.9)); }
	.pcw__arriba { max-width: none; }
	.pcw__titulo { max-width: none; white-space: nowrap; font-size: clamp(18px, min(2.3vw, 4.4svh), 28px); }
	.pcw__abajo { bottom: 34px; max-width: 920px; font-size: 14px; line-height: 1.4; }
	.pcw__abajo[data-texto="0"] { bottom: 62px; } /* en la intro, encima de "DESLIZA" */
	/* Celular más angosto: la letra de la ficha un poco más grande para que se siga leyendo. */
	.pcw__escena[data-celu] .pcw-pdp { font-size: 4.3cqw; }
}

/* ---------- hero: párrafo + dos CTA (doc de Carlos, 2026-10-04), mismo patrón que BrandPet ----------
   En la intro PAWCODE se achica para que entren el párrafo y los botones; los demás textos no reciben clics.
   + 31px: arriba del todo el escenario empieza debajo de la barra verde (topbar). */
.pcw__escena[data-fase="0"] .pcw__intro { justify-content: flex-start; padding-top: calc(var(--tope) + clamp(96px, 17svh, 150px)); box-sizing: border-box; gap: 1.6svh; }
.pcw__escena[data-fase="0"] .pcw__nombre { font-size: min(12vw, 15svh); }
.pcw__escena[data-fase="0"] .pcw__eq { height: 5svh; }
.pcw__abajo.pcw__abajo--intro { bottom: calc(31px + clamp(16px, 3svh, 32px)); max-width: 620px; }
.pcw__abajo--intro p { margin: 0; }
.pcw__escena[data-fase="0"] .pcw__abajo--intro[data-texto="0"], .pcw__escena .pcw__abajo--intro[data-on] { pointer-events: auto; }
.pcw__acciones { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 26px; margin-top: 16px; }
.pcw__cta {
	display: inline-flex; padding: 13px 26px; border-radius: 999px;
	background: #111; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	box-shadow: 0 10px 24px rgba(17, 17, 17, .18); transition: transform .25s var(--ease), box-shadow .25s;
}
.pcw__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(17, 17, 17, .24); color: #fff; }
.pcw__ver { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: inherit; opacity: .85; white-space: nowrap; }
.pcw__ver:hover { opacity: 1; color: inherit; }
/* Ancla de "Mira cómo funciona": justo donde arranca la estrategia. */
.pcw__mira { position: absolute; top: 4.6%; left: 0; width: 1px; height: 1px; }
@media (max-width: 700px) {
	.pcw__escena[data-fase="0"] .pcw__intro { padding-top: calc(var(--tope) + 120px); }
	.pcw__abajo.pcw__abajo--intro { bottom: calc(31px + 12px); font-size: 14px; line-height: 1.45; }
	.pcw__acciones { margin-top: 10px; gap: 6px; flex-direction: column; }
	.pcw__cta { padding: 12px 22px; font-size: 13px; }
	.pcw__ver { font-size: 11px; }
}
@media (min-width: 701px) and (max-height: 850px) {
	.pcw__escena[data-fase="0"] .pcw__intro { padding-top: calc(var(--tope) + clamp(80px, 15svh, 120px)); }
	.pcw__escena[data-fase="0"] .pcw__nombre { font-size: min(11vw, 13svh); }
	.pcw__abajo.pcw__abajo--intro { bottom: calc(31px + clamp(10px, 2svh, 20px)); }
	.pcw__acciones { margin-top: 12px; }
}
@media (min-width: 701px) and (max-height: 760px) {
	.pcw__abajo.pcw__abajo--intro { max-width: 760px; }
}

/* ---------- cierre de la animación (como la banda rosa de BrandPet, en el amarillo de PawCode) ---------- */
.pcc { background: #D99A12; color: #fff; text-align: center; padding: clamp(64px, 9vw, 120px) 16px; }
.pcc__titulo {
	margin: 0 auto 28px; max-width: 24ch; font-family: var(--koi-font-texto); font-weight: 600; text-transform: none;
	font-size: clamp(30px, 4.4vw, 60px); line-height: 1.08; letter-spacing: -.02em; color: #fff;
}
.pcc__titulo span { display: block; color: #111; }
.pcc .koi-btn { background: #111; color: #fff; }
.pcc .koi-btn:hover { background: #fff; color: #111; }
.pca__cta p { margin: 0 0 16px; font-size: clamp(15px, 1.25vw, 18px); opacity: .75; }

/* ---------- fase 8: GEO, una IA que recomienda a GATERING (ejemplo ilustrativo) ---------- */
.pcw-geo {
	position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; gap: 1em; padding: 1.4em 2em;
	background: #F7F7F8; font-family: var(--koi-font-texto); font-size: clamp(9px, 1.75cqw, 15px); color: #111; text-align: left;
	opacity: 0; transition: opacity .45s var(--ease);
}
.pcw-geo[data-on] { opacity: 1; }
.pcw-geo__cabeza { display: flex; align-items: center; gap: .6em; padding-bottom: .8em; border-bottom: 1px solid #E6E6E9; }
.pcw-geo__cabeza b { font-weight: 700; }
.pcw-geo__cabeza small { margin-left: auto; padding: .25em .7em; border-radius: 999px; background: #fff; font-size: .75em; font-weight: 600; color: rgba(17, 17, 17, .55); box-shadow: inset 0 0 0 1px #E6E6E9; }
.pcw-geo__logo { display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: linear-gradient(135deg, var(--pawnia-teal), var(--pawnia-rosa)); color: #fff; font-size: .95em; }
.pcw-geo__chat { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .8em; }
.pcw-geo__msg, .pcw-geo__fuente {
	max-width: 78%; padding: .75em 1em; border-radius: 1.1em; line-height: 1.45;
	opacity: 0; transform: translateY(.6em); transition: opacity .35s var(--ease), transform .45s var(--rebote);
}
.pcw-geo__msg[data-on], .pcw-geo__fuente[data-on] { opacity: 1; transform: none; }
.pcw-geo__msg--yo { align-self: flex-end; background: #111; color: #fff; border-bottom-right-radius: .3em; }
.pcw-geo__msg--ia { align-self: flex-start; min-height: 1.45em; background: #fff; box-shadow: 0 .3em 1em rgba(17, 17, 17, .06); border-bottom-left-radius: .3em; }
.pcw-geo__escribe { display: inline-flex; gap: .3em; padding: .2em 0; }
.pcw-geo__escribe:not([data-on]) { display: none; }
.pcw-geo__escribe i { width: .45em; height: .45em; border-radius: 50%; background: rgba(17, 17, 17, .35); animation: pcw-geo-punto 1s ease-in-out infinite; }
.pcw-geo__escribe i:nth-child(2) { animation-delay: .15s; }
.pcw-geo__escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes pcw-geo-punto { 50% { transform: translateY(-.25em); opacity: 1; } }
.pcw-geo__fuente { align-self: flex-start; display: inline-flex; align-items: center; gap: .7em; background: #fff; box-shadow: inset 0 0 0 1.5px var(--gt-fuerte, #FF006E); }
.pcw-geo__fuente b { display: block; font-weight: 700; color: var(--gt-fuerte, #FF006E); }
.pcw-geo__fuente small { display: block; font-size: .8em; color: rgba(17, 17, 17, .6); }
.pcw-geo__favicon { display: inline-flex; align-items: center; justify-content: center; width: 2em; height: 2em; border-radius: .5em; background: var(--gt-fondo, #FFD60A); color: var(--gt-fuerte, #FF006E); font-family: 'Fascinate', var(--koi-font-display); font-size: 1em; }
@container (max-width: 480px) {
	.pcw-geo { padding: 1.2em; font-size: 4.2cqw; }
	.pcw-geo__msg, .pcw-geo__fuente { max-width: 92%; }
}

/* Intro: PAWCODE "inspeccionado" (estilos .pwn-insp en page-inicio.css, que también carga esta página). */
.pcw__nombre .pwn-insp { display: block; }
.pcw__nombre .pwn-insp__etiqueta { font-size: clamp(11px, 1vw, 13px); }

/* Banda de cierre .pcc: vuelve al amarillo #D99A12 de la intro (Santiago, 2026-10-05: "no me gustó el verde"). */

/* Intro: kit de tecnología en lugar del ecualizador (pedido de Santiago, 2026-10-05). */
.pcw__kit { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); }
.pcw__kit-codigo { font: 700 clamp(26px, 4svh, 40px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #1E1E1E; animation: pcw-kit-codigo 2.4s ease-in-out infinite; }
@keyframes pcw-kit-codigo { 50% { color: #fff; transform: translateY(-3px); } }
.pcw__kit-carga { position: relative; display: block; width: clamp(110px, 14vw, 190px); height: 12px; border-radius: 999px; background: rgba(30, 30, 30, .25); overflow: hidden; }
.pcw__kit-carga i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: #fff; animation: pcw-kit-carga 3s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes pcw-kit-carga { 0% { width: 0; } 70%, 100% { width: 100%; } }
.pcw__kit-ok { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 999px; background: #1E1E1E; color: #fff; font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace; animation: pcw-kit-ok 3s ease infinite; }
.pcw__kit-ok svg { width: 16px; height: 16px; fill: none; stroke: #C7F964; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes pcw-kit-ok { 0%, 66% { opacity: .35; transform: scale(.92); } 74%, 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pcw__kit-codigo, .pcw__kit-carga i, .pcw__kit-ok { animation: none; } .pcw__kit-carga i { width: 100%; } }