/* ==========================================================================
   Componentes de Pango 2026 — el sistema de clases
   ==========================================================================

   Por qué existe este fichero. El theme se escribió con los estilos metidos
   dentro de cada etiqueta. Eso tiene tres problemas que no se arreglan
   escribiendo con más cuidado: un estilo inline no puede llevar :hover, no
   puede llevar :focus-visible y no puede llevar @media. Todo lo que dependa de
   «al pasar por encima» o «en el móvil esto cambia» había que resolverlo desde
   fuera, y de ahí salió el global.css lleno de selectores tipo
   [style*="grid-template-columns"], que aciertan por casualidad y fallan en
   cuanto alguien cambia un espacio.

   Cómo se nombra. Cada sección se llama igual que el shortcode que la pinta:
   [pango_hero] pinta .pango_hero. Las piezas de dentro llevan el nombre de la
   sección y dos guiones bajos: .pango_hero__titular. Lo compartido no lleva
   sección: .pango_boton, .pango_ancho, .pango_rotulo. Así, señalar un trozo de
   la web es decir su nombre, y el mismo nombre vale en el navegador, aquí y en
   el PHP.

   La paleta. Una sola tinta, un solo papel y un solo acento. Antes había seis
   colores pastel repartidos en puntos, números y píldoras; el énfasis se hace
   con tamaño, peso y líneas, que es lo que hace un estudio, y no repartiendo
   confeti de colores.
   ========================================================================== */

:root {
	/* Tinta */
	--pango-tinta:        #1C1B1A;
	--pango-tinta-media:  #4A463F;
	--pango-tinta-tenue:  #6B6964;

	/* Papel: dos tonos, uno para el fondo y otro medio tono por encima. Frío a
	   propósito desde el 26-ago: el crema cálido y plano era lo último de la
	   paleta que seguía leyéndose como fondo por defecto. */
	--pango-papel:        #F3F2EF;
	--pango-papel-alto:   #F7F6F3;

	/* El único acento */
	--pango-acento:       #F73600;

	/* Oro de las estrellas de reseña. No es un color de marca: es la
	   convención de una valoración, y se usa solo ahí. */
	--pango-oro:          #E0A32A;

	/* Líneas: la separación se hace con reglas finas, no con bordes de caja */
	--pango-linea:        rgba(28, 27, 26, 0.14);
	--pango-linea-fina:   rgba(28, 27, 26, 0.08);
	--pango-linea-clara:  rgba(251, 250, 246, 0.20);

	/* Medidas */
	--pango-ancho:        1280px;
	--pango-margen:       40px;
	--pango-aire:         clamp(64px, 8vw, 112px);
	--pango-aire-corto:   clamp(40px, 5vw, 68px);

	/* Radios: distintos a propósito. Todo con el mismo redondeo es la cara de
	   una plantilla; el contenedor se redondea más que lo que lleva dentro. */
	--pango-radio-grande: 28px;
	--pango-radio:        14px;
	--pango-radio-corto:  8px;

	/* Curva de movimiento: sale rápido y frena largo, como algo con peso */
	--pango-curva:        cubic-bezier(0.22, 0.61, 0.24, 1);
}

/* --------------------------------------------------------------------------
   Rejilla básica: el ancho de página y el ritmo vertical
   -------------------------------------------------------------------------- */
.pango_ancho {
	max-width: var(--pango-ancho);
	margin: 0 auto;
	padding-left: var(--pango-margen);
	padding-right: var(--pango-margen);
}

.pango_seccion { padding: var(--pango-aire) 0; }
.pango_seccion--corta { padding: var(--pango-aire-corto) 0; }
.pango_seccion--papel { background-color: var(--pango-papel); }
.pango_seccion--alto  { background-color: var(--pango-papel-alto); }

/* --------------------------------------------------------------------------
   Tipografía compartida
   -------------------------------------------------------------------------- */
.pango_titular {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: clamp(34px, 4.8vw, 66px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	text-wrap: balance;
	margin: 0;
}
.pango_titular--grande { font-size: clamp(36px, 5.4vw, 76px); }
.pango_titular em,
.pango_titular .pango_acento { color: var(--pango-acento); font-style: normal; }

.pango_entradilla {
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.55;
	color: var(--pango-tinta-media);
	max-width: 62ch;
	margin: 0;
	text-wrap: pretty;
}

/* El rótulo que va encima de un titular. Antes era un punto de color; ahora es
   una regla corta del acento, que dice lo mismo sin parecer una pegatina. */
.pango_rotulo {
	display: block;
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pango-tinta-media);
	margin: 0 0 22px;
}
.pango_rotulo::before {
	content: '';
	display: block;
	width: 34px;
	height: 3px;
	background: var(--pango-acento);
	margin-bottom: 12px;
}
.pango_rotulo--claro { color: rgba(251, 250, 246, 0.72); }

/* Cabecera de sección: titular a la izquierda, entradilla a la derecha */
.pango_cabecera {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 24px 48px;
	margin-bottom: 44px;
}
.pango_cabecera .pango_entradilla { max-width: 360px; }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.pango_boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	padding: 18px 30px;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	background: var(--pango-acento);
	color: var(--pango-papel-alto);
	white-space: nowrap;
	transition: transform .25s var(--pango-curva), box-shadow .25s var(--pango-curva), background-color .25s var(--pango-curva);
}
.pango_boton:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -18px rgba(247, 54, 0, .75); }
.pango_boton:active { transform: translateY(0) scale(.985); }
.pango_boton:focus-visible { outline: 3px solid var(--pango-tinta); outline-offset: 3px; }
.pango_boton--grande { font-size: 18px; padding: 20px 34px; }

/* El secundario no es otro botón: es tinta sobre papel, para que no compitan */
.pango_boton--tinta { background: var(--pango-tinta); color: var(--pango-papel-alto); }
.pango_boton--tinta:hover { box-shadow: 0 18px 34px -18px rgba(28, 27, 26, .6); }

/* --------------------------------------------------------------------------
   Enlaces y tarjetas que reaccionan
   -------------------------------------------------------------------------- */
.pango_realce { transition: transform .3s var(--pango-curva), box-shadow .3s var(--pango-curva); }
.pango_realce:hover { transform: translateY(-3px); }

/* ==========================================================================
   pango_hero — la cabecera de portada
   ========================================================================== */
.pango_hero {
	max-width: var(--pango-ancho);
	margin: 0 auto;
	padding: 72px var(--pango-margen) 40px;
	background-color: var(--pango-papel);
}

.pango_hero__eb {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px 16px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pango-tinta-media);
	margin-bottom: 14px;
	animation: pg-rise .6s ease both;
}
.pango_hero__eb span { white-space: nowrap; }
/* La marca de «esto es lo que somos» es una barra del acento, no un punto */
.pango_hero__eb > span:first-child { display: inline-flex; align-items: center; gap: 12px; }
.pango_hero__eb > span:first-child::before {
	content: '';
	width: 26px;
	height: 3px;
	background: var(--pango-acento);
	flex: none;
}

.pango_hero__titular {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: clamp(30px, 7.6vw, 116px);
	line-height: 0.9;
	letter-spacing: -0.045em;
	word-spacing: 0.22em;
	margin: 0;
	text-transform: uppercase;
	animation: pg-rise .7s ease .05s both;
}
.pango_hero__titular > span { display: block; color: var(--pango-tinta); }
.pango_hero__linea2 { color: var(--pango-acento); }
.pango_hero__linea2 > span:first-child { color: var(--pango-tinta); display: block; }
.pango_hero__titular [data-rotword] { color: var(--pango-acento); }
.pango_hero__cursor {
	display: inline-block;
	width: 0.06em;
	height: 0.82em;
	background: var(--pango-acento);
	margin-left: 0.08em;
	vertical-align: -0.06em;
	animation: pg-blink 1s step-end infinite;
}

.pango_hero__pie {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: end;
	margin-top: 44px;
	padding-top: 36px;
	border-top: 1px solid var(--pango-linea);
	animation: pg-rise .7s ease .18s both;
}
.pango_hero__pie p {
	font-size: clamp(18px, 1.8vw, 22px);
	line-height: 1.5;
	color: var(--pango-tinta-media);
	margin: 0;
}

/* Las píldoras se doblan a la línea siguiente en vez de irse de lado.
   Estaban en `nowrap` con scroll horizontal y la barra escondida: en un móvil
   solo se veían la primera y media, y las otras cuatro no existían para quien
   no adivinara que aquello se arrastraba. Son seis enlaces a las páginas de
   servicio, no una galería. En escritorio caben en una línea y no cambia nada. */
.pango_hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 36px;
	max-width: 100%;
	animation: pg-rise .7s ease .28s both;
}
.pango_hero__chips::-webkit-scrollbar { display: none; }
.pango_hero__chip {
	flex: none;
	display: inline-flex;
	align-items: center;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pango-tinta);
	border: 1.5px solid var(--pango-tinta);
	padding: 9px 16px;
	border-radius: 999px;
	transition: background-color .25s var(--pango-curva), color .25s var(--pango-curva);
}
/* Al pasar por encima se rellena de tinta. Esto es justo lo que un estilo
   inline no podía hacer y por lo que las píldoras estaban muertas. */
/* El hover invierte los colores y eso promete que se puede pulsar. Solo para los
   que son enlace de verdad: cuando las pastillas van sin enlace se pintan como
   <span> y no deben encenderse al pasar por encima. */
a.pango_hero__chip:hover { background: var(--pango-tinta); color: var(--pango-papel-alto); }
.pango_hero__chip:focus-visible { outline: 3px solid var(--pango-acento); outline-offset: 2px; }

/* ==========================================================================
   pango_band — la cinta del acento
   ========================================================================== */
.pango_band {
	background: var(--pango-acento);
	overflow: hidden;
	padding: 18px 0;
	margin-top: 24px;
}
.pango_band__rail {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	animation: pg-marquee 28s linear infinite;
	will-change: transform;
}
.pango_band__palabra {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 24px;
	letter-spacing: 0.01em;
	color: var(--pango-papel-alto);
	text-transform: uppercase;
}
/* El separador son las llaves del logotipo, no un punto de color. Es lo mismo
   que hay en PANGO {STUDIO}, así que la cinta lleva la marca dentro. */


/* ==========================================================================
   pango_stats — las cifras
   ========================================================================== */
.pango_stats { padding: var(--pango-aire-corto) 0; background-color: var(--pango-papel-alto); }
.pango_stats__rejilla {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0 32px;
	border-top: 1px solid var(--pango-linea);
}
/* Sin caja, sin borde y sin sombra: cuatro columnas separadas por una línea.
   La tarjeta redondeada con borde fino sobre el mismo papel es el gesto que delata una
   plantilla, y aquí no hace falta ninguna elevación. */
.pango_stats__dato {
	display: block;
	color: inherit;
	padding: 30px 0 34px;
	border-right: 1px solid var(--pango-linea);
	padding-right: 24px;
}
.pango_stats__dato:last-child { border-right: none; }
.pango_stats__cifra {
	display: block;
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: clamp(34px, 3.4vw, 54px);
	letter-spacing: -0.035em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.pango_stats__pie { display: block; font-size: 14px; line-height: 1.45; color: var(--pango-tinta-media); margin-top: 10px; }
a.pango_stats__dato .pango_stats__pie { text-decoration: underline; text-decoration-color: var(--pango-linea); text-underline-offset: 4px; }
a.pango_stats__dato:hover .pango_stats__cifra { color: var(--pango-acento); }
a.pango_stats__dato:hover .pango_stats__pie { text-decoration-color: var(--pango-acento); }
a.pango_stats__dato:focus-visible { outline: 3px solid var(--pango-acento); outline-offset: 4px; }

/* ==========================================================================
   pango_manifiesto
   ========================================================================== */
.pango_manifiesto { padding: var(--pango-aire-corto) 0 var(--pango-aire); background-color: var(--pango-papel-alto); }
.pango_manifiesto__antetitulo {
	margin-left: auto;
	text-align: right;
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: clamp(20px, 1.5vw, 26px);
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--pango-tinta);
	margin-bottom: 26px;
	animation: pg-slideR .8s ease .1s both;
}
.pango_manifiesto__antetitulo .pango_suave { font-weight: 400; }
.pango_manifiesto__antetitulo strong,
.pango_manifiesto__antetitulo .pango_fuerte {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 36px;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--pango-tinta);
}
.pango_manifiesto__cierre {
	margin-left: auto;
	text-align: right;
	font-size: clamp(16px, 1.5vw, 20px);
	line-height: 1.45;
	color: var(--pango-tinta);
	margin-top: 28px;
	animation: pg-slideR .8s ease .25s both;
}
.pango_manifiesto__pilares {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
	margin-top: 72px;
}
.pango_manifiesto__pilar { border-top: 2px solid var(--pango-tinta); padding-top: 22px; }
.pango_manifiesto__pilar h3 {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 18px;
	margin: 0 0 10px;
	color: var(--pango-tinta);
}
.pango_manifiesto__pilar p { font-size: 14px; line-height: 1.6; color: var(--pango-tinta-media); margin: 0; }
.pango_manifiesto__cta { margin-top: 56px; }

/* ==========================================================================
   pango_stack — las dos cintas de plataformas y tecnologías
   ========================================================================== */
.pango_stack { padding: var(--pango-aire) 0; }
.pango_stack__cinta {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
/* Sin pastillas las dos cintas se pegaban y parecian una sola. */
.pango_stack__cinta + .pango_stack__cinta { margin-top: 30px; }
.pango_stack__rail {
	display: inline-flex;
	gap: 0;
	align-items: center;
	animation: pg-marquee 42s linear infinite;
	will-change: transform;
}
.pango_stack__rail--lento { animation-duration: 120s; animation-direction: reverse; }
.pango_stack:hover .pango_stack__rail,
.pango_stack__cinta:hover .pango_stack__rail { animation-play-state: paused; }

/* Antes esto eran pastillas con borde. El borde es un contenedor cerrado, y un
   contenedor cerrado que la cinta corta por la mitad al llegar al borde parece
   un error de maquetacion (lo era: se veian medias pastillas). Ahora cada
   tecnologia va suelta y las une un cable con su nodo, que es literalmente lo
   que dice el titular de la seccion: conectamos tu tienda con lo que ya usas.
   Un cable cortado por el borde no parece roto, parece que sigue. */
.pango_stack__pieza {
	background: transparent;
	border: 0;
	padding: 6px 0;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--pango-tinta);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 11px;
}
/* El sprite de los logos: esta en el DOM para que lo alcancen los <use>, pero
   no ocupa nada ni se ve. */
.pango_sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pango_stack__logo {
	width: 22px;
	height: 22px;
	flex: none;
	fill: currentColor;
	transition: fill .3s var(--pango-curva);
}
/* El tramo de cable entre dos tecnologias, con el punto de union en medio. */
.pango_stack__sep {
	position: relative;
	display: inline-block;
	flex: none;
	width: 46px;
	height: 1.5px;
	margin: 0 22px;
	background: var(--pango-linea);
}
.pango_stack__sep::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 5px;
	height: 5px;
	margin: -2.5px 0 0 -2.5px;
	border-radius: 50%;
	background: var(--pango-linea);
}
/* La cinta se para al pasar el raton, asi que se puede apuntar a una pieza. Ahi
   es donde el logo coge su color de verdad. */
.pango_stack__pieza:hover .pango_stack__logo { fill: var(--pango-marca, currentColor); }

@media (max-width: 700px) {
	.pango_stack__pieza { font-size: 14px; gap: 9px; }
	.pango_stack__logo { width: 19px; height: 19px; }
	.pango_stack__sep { width: 28px; margin: 0 14px; }
}

/* ==========================================================================
   pango_testimonios — las reseñas reales de Google
   ========================================================================== */
.pango_testimonios { max-width: var(--pango-ancho); margin: 0 auto; padding: var(--pango-aire) 0; }
.pango_testimonios__nota {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	border: 1.5px solid var(--pango-linea);
	border-radius: 999px;
	padding: 11px 20px;
	transition: border-color .25s var(--pango-curva);
}
.pango_testimonios__nota:hover { border-color: var(--pango-tinta); }
.pango_testimonios__cifra { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.pango_testimonios__total { font-size: 13px; font-weight: 600; color: var(--pango-tinta-media); }

/* Se puede empujar con el dedo o con el ratón: la cinta lleva su propio
   desbordamiento, escondido, y el guion convierte el arrastre en scroll. */
.pango_testimonios__cinta {
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	touch-action: pan-y;

	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.pango_testimonios__rail {
	display: inline-flex;
	align-items: stretch;
	gap: 0;
	animation: pg-marquee 90s linear infinite;
	will-change: transform;
}
.pango_testimonios__cinta::-webkit-scrollbar { display: none; }
.pango_testimonios__cinta.pango-esc--agarrando { cursor: grabbing; }
.pango_testimonios__cinta:hover .pango_testimonios__rail { animation-play-state: paused; }
/* La reseña no es una tarjeta: es una columna de periódico. Sobre el papel de
   la página, una tarjeta del mismo papel con borde fino no se ve, y ponerle
   sombra y esquinas redondas para que se vea es justo el gesto del que
   veníamos huyendo. */
.pango_testimonios__ficha {
	width: clamp(280px, 85vw, 360px);
	flex: none;
	display: flex;
	flex-direction: column;
	padding: 0 28px;
	border-left: 1px solid var(--pango-linea);
}
.pango_testimonios__comilla {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: 52px;
	line-height: 0.5;
	color: var(--pango-acento);
	margin-bottom: 20px;
}
.pango_testimonios__texto { font-size: 16px; line-height: 1.5; color: var(--pango-tinta); margin: 0 0 22px; flex: 1; }
.pango_testimonios__estrellas { color: var(--pango-oro); letter-spacing: 2px; line-height: 1; }
.pango_testimonios__firma { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
/* Cuadrado con las esquinas suaves, no un círculo: el avatar redondo en todas
   partes es otro gesto de plantilla. */
.pango_testimonios__inicial {
	width: 50px;
	height: 50px;
	flex: none;
	border-radius: var(--pango-radio);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 20px;
	color: var(--pango-papel-alto);
	background: var(--pango-tinta);
}
.pango_testimonios__nombre { font-weight: 700; font-size: 16px; color: var(--pango-tinta); }
.pango_testimonios__origen {
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--pango-tinta-media);
}

/* ==========================================================================
   pango_contacto — el panel oscuro con el formulario
   ========================================================================== */
.pango_contacto { max-width: var(--pango-ancho); margin: 0 auto; padding: 56px var(--pango-margen) 104px; }
.pango_contacto__panel {
	border-radius: var(--pango-radio-grande);
	padding: clamp(36px, 4.5vw, 64px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
	background-color: var(--pango-tinta);
}
.pango_contacto__titular { color: var(--pango-papel-alto); margin-bottom: 24px; }
.pango_contacto__texto { font-size: 20px; line-height: 1.55; color: var(--pango-papel-alto); margin: 0 0 28px; max-width: 440px; }
.pango_contacto__lista { display: flex; flex-direction: column; gap: 12px; font-size: 16px; color: var(--pango-papel-alto); }
.pango_contacto__lista > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.pango_contacto__marca { color: var(--pango-acento); font-weight: 800; }
.pango_contacto__lista a { color: var(--pango-acento); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.pango_contacto__form {
	display: flex;
	flex-direction: column;
	gap: 13px;
	min-width: 0;
	max-width: 100%;
	background: var(--pango-papel);
	border-radius: var(--pango-radio-grande);
	padding: clamp(28px, 3.5vw, 44px);
}
.pango_contacto__par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 13px; }
.pango_contacto__campo {
	min-width: 0;
	width: 100%;
	padding: 16px;
	border: 1.5px solid var(--pango-linea);
	border-radius: var(--pango-radio);
	background: var(--pango-papel-alto);
	font-size: 16px;
	color: var(--pango-tinta);
	outline: none;
	transition: border-color .2s var(--pango-curva), box-shadow .2s var(--pango-curva);
}
/* Etiqueta persistente de cada campo. El placeholder desaparece en cuanto se
   escribe: sirve de pista, no de etiqueta. */
.pango_contacto__caja { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.pango_contacto__etiqueta {
	font-size: 12px; line-height: 1.25; font-weight: 600; letter-spacing: .01em;
	color: var(--pango-tinta-suave, #4A463F);
}
/* La tarjeta de la cabecera de contacto va sobre tinta, así que ahí la etiqueta
   tiene que ir en claro. La ventana de contacto NO: lo oscuro es el velo de
   detrás, pero la tarjeta del formulario es del papel de la casa, y poner la
   etiqueta en claro la dejaba blanca sobre blanco —contraste 1,02— y el
   formulario se quedaba sin etiquetas visibles. Medido en el navegador antes de
   tocarlo: el velo es rgb(28,27,26) y la tarjeta rgb(243,242,239). */
.pango_contacto_hero__form .pango_contacto__etiqueta { color: var(--pango-papel-alto); }
.pango_contacto__campo::placeholder { color: var(--pango-tinta-tenue); }
/* Otra cosa que un estilo inline no sabe hacer: decirle a quien escribe en qué
   casilla está. */
.pango_contacto__campo:focus {
	border-color: var(--pango-acento);
	box-shadow: 0 0 0 3px rgba(247, 54, 0, 0.16);
}
.pango_contacto__form textarea.pango_contacto__campo { resize: vertical; }
.pango_contacto__form .pango_boton { border-radius: var(--pango-radio); padding: 18px; }
.pango_contacto__aviso { display: none; font-size: 14px; color: var(--pango-acento); text-align: center; font-weight: 600; }

/* ==========================================================================
   Tablet: 520px – 1023px
   ========================================================================== */
@media (max-width: 1023px) {
	.pango_stats__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.pango_stats__dato:nth-child(2n) { border-right: none; }
	.pango_stats__dato:nth-child(n+3) { border-top: 1px solid var(--pango-linea); }
	.pango_manifiesto__pilares { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 48px; }
	.pango_contacto__panel { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.pango_hero__pie { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.pango_hero__pie .pango_boton { justify-self: start; }
}

/* ==========================================================================
   Móvil: hasta 519px
   ========================================================================== */
@media (max-width: 519px) {
	:root { --pango-margen: 20px; --pango-aire: 56px; --pango-aire-corto: 36px; }

	.pango_hero { padding: 28px var(--pango-margen); }
	.pango_hero__eb { font-size: 10px; letter-spacing: 0.1em; gap: 6px 12px; }
	.pango_hero__titular { font-size: clamp(32px, 10.2vw, 48px); line-height: 0.94; letter-spacing: -0.04em; word-spacing: 0.04em; }
	.pango_hero__titular > span { white-space: normal; }
	.pango_hero__pie { margin-top: 28px; padding-top: 24px; }
	.pango_hero__pie .pango_boton { width: 100%; }

	.pango_band__palabra { font-size: 18px; }
	.pango_band__llave { margin: 0 14px; }

	.pango_stats__rejilla { grid-template-columns: minmax(0, 1fr); }
	.pango_stats__dato { border-right: none; padding-right: 0; }
	.pango_stats__dato + .pango_stats__dato { border-top: 1px solid var(--pango-linea); }

	.pango_titular { font-size: clamp(26px, 8vw, 38px); }
	.pango_cabecera { margin-bottom: 28px; }
	.pango_cabecera .pango_entradilla { max-width: none; }

	.pango_manifiesto__antetitulo,
	.pango_manifiesto__cierre { text-align: left; margin-left: 0; }
	.pango_manifiesto__antetitulo strong,
	.pango_manifiesto__antetitulo .pango_fuerte { font-size: 26px; }
	.pango_manifiesto__pilares { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 40px; }
	.pango_manifiesto__cta .pango_boton { width: 100%; }

	.pango_contacto { padding: 36px var(--pango-margen) 64px; }
	.pango_contacto__panel { padding: 26px; border-radius: 20px; }
	.pango_contacto__par { grid-template-columns: minmax(0, 1fr); }
	.pango_contacto__texto { font-size: 17px; }
}

/* ==========================================================================
   Quien prefiere no ver movimiento, no lo ve
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.pango_band__rail,
	.pango_stack__rail,
	.pango_testimonios__rail { animation: none; }
	.pango_hero__eb,
	.pango_hero__titular,
	.pango_hero__pie,
	.pango_hero__chips,
	.pango_manifiesto__antetitulo,
	.pango_manifiesto__cierre { animation: none; }
	.pango_hero__cursor { animation: none; opacity: 1; }
	.pango_boton,
	.pango_realce,
	.pango_hero__chip { transition: none; }
}

/* ==========================================================================
   pango_servicios_home — la lista de servicios en filas
   ==========================================================================
   Los números iban en cinco colores pastel distintos, uno por fila. Ahora la
   fila entera es la que reacciona y el número es tinta tenue: numerar una
   lista está bien cuando hay orden, y aquí lo hay, pero pintar cada número de
   un color es decoración que no significa nada. */
.pango_servicios_home { max-width: var(--pango-ancho); margin: 0 auto; padding: var(--pango-aire-corto) var(--pango-margen); }
.pango_servicios_home__lista { border-bottom: 1px solid var(--pango-linea); }
.pango_servicios_home__fila {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	gap: 40px;
	align-items: center;
	padding: 36px 4px;
	border-top: 1px solid var(--pango-linea);
	scroll-margin-top: 88px;
	transition: background-color .3s var(--pango-curva);
}
.pango_servicios_home__fila:hover { background-color: var(--pango-papel); }
.pango_servicios_home__num {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: clamp(30px, 3.4vw, 48px);
	line-height: 1;
	color: var(--pango-linea);
	font-variant-numeric: tabular-nums;
	transition: color .3s var(--pango-curva);
}
.pango_servicios_home__fila:hover .pango_servicios_home__num { color: var(--pango-acento); }
.pango_servicios_home__fila h3 {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: clamp(22px, 2.4vw, 32px);
	letter-spacing: -0.02em;
	line-height: 1.04;
	margin: 0 0 10px;
}
.pango_servicios_home__fila p { font-size: 16px; line-height: 1.55; color: var(--pango-tinta-media); margin: 0; max-width: 640px; }
.pango_servicios_home__ir {
	justify-self: end;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid var(--pango-tinta);
	color: var(--pango-tinta);
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 14px;
	padding: 12px 22px;
	border-radius: 999px;
	transition: background-color .25s var(--pango-curva), color .25s var(--pango-curva);
}
.pango_servicios_home__fila:hover .pango_servicios_home__ir { background: var(--pango-tinta); color: var(--pango-papel-alto); }
.pango_servicios_home__ir:focus-visible { outline: 3px solid var(--pango-acento); outline-offset: 3px; }

/* ==========================================================================
   pango_migraciones
   ========================================================================== */
.pango_migraciones { padding: var(--pango-aire) 0; background-color: var(--pango-papel-alto); }
.pango_migraciones__rejilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pango_migraciones__ficha {
	border-radius: var(--pango-radio-grande);
	padding: 32px;
	background-color: var(--pango-papel);
	transition: transform .3s var(--pango-curva), box-shadow .3s var(--pango-curva);
}
.pango_migraciones__ficha:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -30px rgba(28, 27, 26, .5); }
.pango_migraciones__de {
	font-family: 'Archivo', sans-serif;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--pango-tinta-tenue);
	margin-bottom: 18px;
}
.pango_migraciones__ficha h3 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 22px; margin: 0 0 10px; letter-spacing: -0.01em; }
.pango_migraciones__ficha p { font-size: 16px; line-height: 1.58; color: var(--pango-tinta-media); margin: 0; }
.pango_migraciones__cta { margin-top: 40px; }

@media (max-width: 1023px) {
	.pango_migraciones__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 519px) {
	.pango_servicios_home__fila { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 26px 0; }
	.pango_servicios_home__ir { justify-self: start; }
	.pango_migraciones__rejilla { grid-template-columns: minmax(0, 1fr); }
	.pango_migraciones__cta .pango_boton { width: 100%; }
}

/* ==========================================================================
   pango_que_hacemos — las dos patas del menú
   ==========================================================================
   Cada pata llevaba un punto de color encima del titular. Ese punto es el que
   señaló Fausto: no dice nada, no distingue nada y sale igual en cualquier web
   hecha con prisa. Se va, y la jerarquía la lleva el titular, que para eso está
   en Archivo Black a treinta y ocho píxeles. */
.pango_que_hacemos { padding: var(--pango-aire) 0; background-color: var(--pango-papel); }
.pango_que_hacemos__cabecera { margin-bottom: 48px; max-width: 720px; }
.pango_que_hacemos__cabecera .pango_entradilla { margin-top: 14px; }
.pango_que_hacemos__rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.pango_que_hacemos__pata {
	padding: 40px 44px 40px 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
	border-top: 3px solid var(--pango-tinta);
}
.pango_que_hacemos__pata h3 {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: clamp(26px, 3vw, 38px);
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0;
	text-transform: uppercase;
}
.pango_que_hacemos__pata p { font-size: 17px; line-height: 1.6; color: var(--pango-tinta-media); margin: 0 0 14px; }
.pango_que_hacemos__texto { flex: 1; }

/* ==========================================================================
   pango_destacado — un servicio en grande, sobre tinta
   ========================================================================== */
.pango_destacado { padding: var(--pango-aire) 0; background-color: var(--pango-tinta); }
.pango_destacado__rejilla { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: start; }
.pango_destacado__titular { color: var(--pango-papel-alto); margin-bottom: 20px; }
.pango_destacado__texto { font-size: 18px; line-height: 1.6; color: #C9C3B8; margin: 0 0 28px; max-width: 620px; }
.pango_destacado__apoyos { list-style: none; margin: 0; padding: 0; }
.pango_destacado__apoyos li {
	padding: 14px 0;
	border-top: 1px solid var(--pango-linea-clara);
	font-size: 17px;
	color: #EDE9E1;
	display: flex;
	gap: 12px;
}
.pango_destacado__apoyos li::before { content: '/'; color: var(--pango-acento); flex: none; }
.pango_destacado .pango_boton { background: var(--pango-acento); color: var(--pango-papel-alto); }

/* ==========================================================================
   pango_dos_destacados — cuatro servicios que pasan de lado
   ==========================================================================
   Se llama «dos» por herencia y ahora lleva cuatro: el nombre se queda porque
   es con el que se le señala desde fuera, y renombrarlo rompería las páginas
   que ya lo usan. */
.pango_dos_destacados { padding: var(--pango-aire) 0; background-color: var(--pango-papel-alto); }
.pango_dos_destacados__barra { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.pango_dos_destacados__flechas { display: flex; gap: 10px; flex: none; }
.pango_dos_destacados__flecha {
	width: 46px; height: 46px;
	border-radius: 999px;
	border: 1.5px solid var(--pango-tinta);
	background: transparent;
	color: var(--pango-tinta);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color .25s var(--pango-curva), color .25s var(--pango-curva), opacity .25s var(--pango-curva);
}
.pango_dos_destacados__flecha:hover { background: var(--pango-tinta); color: var(--pango-papel-alto); }
.pango_dos_destacados__flecha:focus-visible { outline: 3px solid var(--pango-acento); outline-offset: 3px; }
.pango_dos_destacados__flecha[disabled] { opacity: .3; cursor: default; }
.pango_dos_destacados__flecha[disabled]:hover { background: transparent; color: var(--pango-tinta); }

.pango_dos_destacados__rail {
	display: flex;
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
}
.pango_dos_destacados__rail::-webkit-scrollbar { display: none; }
.pango_dos_destacados__ficha {
	flex: 0 0 calc((100% - 22px) / 2);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 40px 40px 40px 0;
	border-top: 3px solid var(--pango-tinta);
}
.pango_dos_destacados__etiqueta {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pango-tinta-media);
}
.pango_dos_destacados__ficha h3 {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: clamp(24px, 2.7vw, 34px);
	letter-spacing: -0.03em;
	line-height: 1.08;
	margin: 0;
	color: var(--pango-tinta);
}
.pango_dos_destacados__ficha p { font-size: 17px; line-height: 1.6; color: var(--pango-tinta-media); margin: 0; flex: 1; }
.pango_dos_destacados__pie { margin-top: 8px; }

@media (max-width: 1023px) {
	.pango_que_hacemos__rejilla { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.pango_que_hacemos__pata { padding-right: 0; }
	.pango_destacado__rejilla { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.pango_dos_destacados__ficha { flex-basis: min(72%, 420px); }
}

@media (max-width: 519px) {
	.pango_que_hacemos__pata { padding: 24px 0 28px; gap: 12px; }
	.pango_que_hacemos__pata .pango_boton { width: 100%; }
	.pango_destacado__texto { font-size: 16px; }
	.pango_dos_destacados__barra { margin-bottom: 24px; }
	/* En el móvil la ficha enseña el titular y tres líneas: lo justo para saber
	   de qué va y decidir si entra. El texto entero está en su página. */
	/* Las flechas se quedan también en móvil. Estaban ocultas y, con la barra de
	   scroll escondida, no quedaba ni una sola señal de que hubiera cuatro
	   fichas: la segunda asomaba cortada a media palabra y se leía como un
	   fallo, no como una invitación a seguir. Miden 46 px, por encima del
	   mínimo de 44 que necesita un dedo. */
	.pango_dos_destacados__barra { flex-wrap: wrap; }
	/* Una ficha entera y, de la siguiente, solo el filo con su línea superior:
	   se ve que hay más y no se lee media palabra cortada, que es lo que hacía
	   parecer que la página estaba rota. 22 px de los 30 son el hueco. */
	.pango_dos_destacados__ficha { flex-basis: calc(100% - 30px); padding: 22px 0 26px; gap: 12px; }
	/* Y el carril va de borde a borde de la pantalla. Se sale del margen del
	   contenedor con un margen negativo y se lo devuelve como relleno propio,
	   así que la primera ficha sigue alineada con el titular de arriba pero la
	   última puede llegar hasta el filo. scroll-padding hace que el ajuste por
	   pasos pare donde toca y no medio centímetro antes. */
	.pango_dos_destacados__rail {
		margin-left: calc(var(--pango-margen) * -1);
		margin-right: calc(var(--pango-margen) * -1);
		padding-left: var(--pango-margen);
		padding-right: var(--pango-margen);
		scroll-padding-left: var(--pango-margen);
	}
	.pango_dos_destacados__ficha p {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		font-size: 15px;
	}
	.pango_dos_destacados__ficha .pango_boton { width: 100%; }
}

/* ==========================================================================
   Tarjetas y secciones genéricas (las que usan todas las landings)
   ==========================================================================
   La tarjeta era un rectángulo con borde de un píxel y esquina redonda sobre
   un fondo del mismo tono: el objeto más repetido de internet y lo primero
   que delata una plantilla. Ahora no hay caja. Cada tarjeta abre con una regla gruesa de
   tinta que se pone del acento al pasar por encima, y lo que separa una de
   otra es el aire. */
.pango-cards { display: grid; grid-template-columns: repeat(var(--pango-cards-cols, 3), 1fr); gap: 8px 36px; }

.pango-card {
	background: none;
	border: none;
	border-radius: 0;
	border-top: 3px solid var(--pango-tinta);
	padding: 22px 0 34px;
	transition: border-color .25s var(--pango-curva);
}
.pango-card:hover { border-top-color: var(--pango-acento); }
.pango-card__icon {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.14em;
	color: var(--pango-tinta-tenue);
	margin-bottom: 10px;
	font-variant-numeric: tabular-nums;
}
.pango-card .pango-card__title {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 20px;
	line-height: 1.2;
	color: var(--pango-tinta);
	margin: 0;
	letter-spacing: -0.01em;
}
.pango-card .pango-card__text { font-size: 15px; line-height: 1.6; color: var(--pango-tinta-media); margin-top: 10px; }
.pango-card__text a { color: var(--pango-acento); text-decoration: underline; text-underline-offset: 3px; }

/* Sobre fondo oscuro la regla y el texto se invierten */
.pango-section[style*="#1C1B1A"] .pango-card { border-top-color: var(--pango-papel-alto); }
.pango-section[style*="#1C1B1A"] .pango-card__title { color: var(--pango-papel-alto); }
.pango-section[style*="#1C1B1A"] .pango-card__text { color: #C9C3B8; }

.pango-section {
	max-width: var(--pango-ancho);
	margin: 0 auto;
}
.pango-section__header { max-width: 760px; margin: 0 0 36px; }

/* El separador de las cintas: una pieza sola, para poder cambiarlo en un sitio
   y que cambie en toda la web. Fausto eligió la barra escrita, con más aire
   entre palabras que el filete que había. */
.pango_band__sep {
	flex: none;
	display: inline-flex;
	align-items: center;
	color: rgba(251, 250, 246, 0.45);
	font-size: 20px;
	line-height: 1;
	margin: 0 42px;
}
.pango_band__sep::before { content: "|"; }

@media (max-width: 1023px) { .pango-cards { grid-template-columns: repeat(2, 1fr); gap: 8px 28px; } }
@media (max-width: 639px)  { .pango-cards { grid-template-columns: 1fr; } .pango-card { padding: 18px 0 26px; } }

/* ==========================================================================
   pango_service_hero — la cabecera de las páginas de servicio
   ========================================================================== */
.pango_service_hero { position: relative; overflow: hidden; }
.pango_service_hero__halo {
	position: absolute;
	aspect-ratio: 1;
	pointer-events: none;
	/* Sin desenfoque y sin salirse: el degradado ya llega a transparente, y lo
	   que no sobresale de la caja no lo puede recortar el overflow. */
	background: radial-gradient(circle at 50% 50%, rgba(var(--pango-halo), 0.26), rgba(var(--pango-halo), 0) 68%);
}
.pango_service_hero__halo--pie {
	left: 0; bottom: 0;
	width: clamp(200px, 22vw, 360px);
	animation: pgblob-dentro-pie 19s ease-in-out infinite;
}
.pango_service_hero__halo--alto {
	right: 0; top: 0;
	width: clamp(300px, 34vw, 540px);
	animation: pgblob-dentro-alto 17s ease-in-out infinite;
}
.pango_service_hero__figura {
	position: absolute;
	right: clamp(6px, 6vw, 130px);
	top: 50%;
	transform: translateY(-50%);
	width: clamp(120px, 30vw, 420px);
	aspect-ratio: 1;
	pointer-events: none;
	opacity: .9;
}
.pango_service_hero__figura canvas { width: 100%; height: 100%; display: block; }
.pango_service_hero__cuerpo {
	position: relative;
	z-index: 1;
	max-width: var(--pango-ancho);
	margin: 0 auto;
	padding: clamp(26px, 3.5vw, 48px) clamp(20px, 5vw, 40px) clamp(18px, 2.5vw, 32px);
}
.pango_service_hero__volver { font-size: 14px; color: var(--pango-tinta-media); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.pango_service_hero__volver:hover { color: var(--pango-acento); }
/* La etiqueta era una píldora rellena del color del servicio. Ahora es tinta
   sobre nada: la que manda es la del titular, no una pegatina de colores. */
.pango_service_hero__badge {
	display: inline-block;
	border: 1.5px solid var(--pango-tinta);
	color: var(--pango-tinta);
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 8px 15px;
	border-radius: 999px;
	margin: 22px 0 0;
}
.pango_service_hero__titular {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: clamp(38px, 6.4vw, 88px);
	letter-spacing: -0.04em;
	line-height: 0.95;
	margin: 16px 0 22px;
	text-transform: uppercase;
	max-width: min(17ch, 100%);
	white-space: pre-line;
}
.pango_service_hero__entrada { font-size: clamp(18px, 2vw, 24px); line-height: 1.5; color: var(--pango-tinta-media); max-width: 680px; margin: 0 0 34px; }
.pango_service_hero__acciones { display: flex; gap: 14px; flex-wrap: wrap; }

/* ==========================================================================
   pango_service_band — la cinta oscura de las landings
   ========================================================================== */
.pango_service_band { overflow: hidden; background: var(--pango-tinta); padding: 16px 0; }
.pango_service_band__rail {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	animation: pg-marquee 32s linear infinite;
	will-change: transform;
}
.pango_service_band:hover .pango_service_band__rail { animation-play-state: paused; }
.pango_service_band__palabra {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--pango-papel-alto);
}
.pango_service_band .pango_band__sep { margin: 0 52px; }

@media (prefers-reduced-motion: reduce) {
	.pango_service_hero__halo,
	.pango_service_band__rail { animation: none; }
}

/* --------------------------------------------------------------------------
   Botones dentro del contenido de una página
   --------------------------------------------------------------------------
   El sistema de diseño pinta del acento y subraya todos los enlaces que hay
   dentro del contenido (.entry-content a). Un botón también es un enlace, así
   que sin esto le sale el texto naranja sobre fondo naranja y desaparece. Hay
   que ganarle a esa regla, y para ganarle hacen falta las dos clases. */
.entry-content a.pango_boton,
.entry-content a.pango_boton:hover {
	color: var(--pango-papel-alto);
	text-decoration: none;
}
.entry-content a.pango_hero__chip,
.entry-content a.pango_servicios_home__ir,
.entry-content a.pango_service_hero__volver {
	color: var(--pango-tinta);
}
.entry-content a.pango_service_hero__volver:hover { color: var(--pango-acento); }

/* ==========================================================================
   Las páginas de servicio completas ([pango_servicio])
   ========================================================================== */

/* --- El alcance ---------------------------------------------------------- */
.pango_alcance { background: var(--pango-papel-alto); padding: var(--pango-aire-corto) 0; }
.pango_alcance__entrada {
	font-size: clamp(16px, 1.7vw, 20px);
	line-height: 1.6;
	color: var(--pango-tinta-media);
	margin: 20px 0 40px;
	max-width: 760px;
}
.pango_alcance__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 36px; }
.pango_alcance__ficha { border-top: 3px solid var(--pango-tinta); padding: 22px 0 30px; transition: border-color .25s var(--pango-curva); }
.pango_alcance__ficha:hover { border-top-color: var(--pango-acento); }
.pango_alcance__ficha h3 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.01em; margin: 0 0 10px; }
.pango_alcance__ficha p { font-size: 16px; line-height: 1.6; color: var(--pango-tinta-media); margin: 0; }

/* --- El método ----------------------------------------------------------- */
.pango_metodo { padding: var(--pango-aire) 0; }
.pango_metodo__lista { display: flex; flex-direction: column; border-top: 1px solid var(--pango-linea); margin-top: 44px; }
.pango_metodo__fila {
	display: grid;
	grid-template-columns: 78px 1fr;
	gap: clamp(20px, 3vw, 44px);
	align-items: baseline;
	padding: 26px 8px 26px 0;
	border-bottom: 1px solid var(--pango-linea);
	transition: background-color .3s var(--pango-curva);
}
.pango_metodo__fila:hover { background: var(--pango-papel-alto); }
.pango_metodo__num {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1;
	color: var(--pango-linea);
	font-variant-numeric: tabular-nums;
	transition: color .3s var(--pango-curva);
}
.pango_metodo__fila:hover .pango_metodo__num { color: var(--pango-acento); }
.pango_metodo__fila h3 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: clamp(20px, 2vw, 24px); letter-spacing: -0.01em; margin: 0 0 8px; }
.pango_metodo__fila p { font-size: 16px; line-height: 1.6; color: var(--pango-tinta-media); margin: 0; }

/* --- Las preguntas ------------------------------------------------------- */
.pango_preguntas { background: var(--pango-papel-alto); border-top: 1px solid var(--pango-linea-fina); }
.pango_preguntas__caja { max-width: 1000px; margin: 0 auto; padding: var(--pango-aire) clamp(20px, 5vw, 40px); }
.pango_preguntas__caja > .pango_titular { margin-bottom: 36px; }
.pango_preguntas__grupo {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pango-tinta-media);
	margin: 40px 0 2px;
}
.pango_preguntas__item { border-top: 1px solid var(--pango-linea); }
.pango_preguntas__item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	font-weight: 600;
	font-size: 18px;
}
.pango_preguntas__item summary::-webkit-details-marker { display: none; }
.pango_preguntas__item summary:hover { color: var(--pango-acento); }
.pango_preguntas__item summary:focus-visible { outline: 3px solid var(--pango-acento); outline-offset: 4px; }
/* El más y el menos se dibujan con dos rayas: una se gira al abrir y ya está.
   Sin dos spans, sin JavaScript y sin dos iconos que mantener. */
.pango_preguntas__signo { position: relative; width: 18px; height: 18px; flex: none; }
.pango_preguntas__signo::before,
.pango_preguntas__signo::after {
	content: '';
	position: absolute;
	inset: 50% 0 auto 0;
	height: 2px;
	background: var(--pango-acento);
	transition: transform .25s var(--pango-curva);
}
.pango_preguntas__signo::after { transform: rotate(90deg); }
.pango_preguntas__item[open] .pango_preguntas__signo::after { transform: rotate(0deg); }
.pango_preguntas__item p { font-size: 16px; line-height: 1.6; color: var(--pango-tinta-media); margin: 0 0 22px; max-width: 820px; }

/* --- Otros servicios ----------------------------------------------------- */
.pango_otros { padding: 0 0 clamp(24px, 3vw, 40px); }
.pango_otros__lista { display: flex; flex-wrap: wrap; gap: 10px; }
.pango_otros__enlace {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--pango-linea);
	border-radius: 999px;
	padding: 11px 18px;
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--pango-tinta);
	transition: background-color .25s var(--pango-curva), color .25s var(--pango-curva), border-color .25s var(--pango-curva);
}
.pango_otros__enlace:hover { background: var(--pango-tinta); border-color: var(--pango-tinta); color: var(--pango-papel-alto); }
.entry-content a.pango_otros__enlace { color: var(--pango-tinta); text-decoration: none; }
.entry-content a.pango_otros__enlace:hover { color: var(--pango-papel-alto); }

/* --- El cierre ----------------------------------------------------------- */
.pango_cierre { max-width: var(--pango-ancho); margin: 0 auto; padding: var(--pango-aire) clamp(20px, 5vw, 40px); }
.pango_cierre__panel {
	background: var(--pango-tinta);
	border-radius: var(--pango-radio-grande);
	padding: clamp(26px, 4vw, 72px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 32px;
	flex-wrap: wrap;
}
.pango_cierre__texto { max-width: 640px; }
.pango_cierre__titular { color: var(--pango-papel-alto); margin-bottom: 12px; }
.pango_cierre__texto p { font-size: clamp(16px, 1.7vw, 20px); line-height: 1.5; color: #CFCABF; margin: 0; }

@media (max-width: 519px) {
	.pango_metodo__fila { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.pango_alcance__rejilla { grid-template-columns: minmax(0, 1fr); }
	.pango_cierre__panel { padding: 26px; border-radius: 20px; }
	.pango_cierre__panel .pango_boton { width: 100%; }
}

/* ==========================================================================
   pango_fullcommerce — el servicio de operación continua
   ==========================================================================
   Iba todo en verde: los titulares, los cuatro bloques, los seis puntos y el
   botón. Ahora el fondo es tinta, el texto papel y el acento se usa solo donde
   hace falta que el ojo pare. */
.pango_fullcommerce { background: var(--pango-tinta); padding: var(--pango-aire) 0; }
.pango_fullcommerce__alto {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}
.pango_fullcommerce__titular { color: var(--pango-papel-alto); font-size: clamp(26px, 3.4vw, 46px); letter-spacing: -0.035em; line-height: 1; }
.pango_fullcommerce__frase { margin: 0 0 14px; }
.pango_fullcommerce__texto { font-size: clamp(16px, 1.7vw, 20px); line-height: 1.65; color: var(--pango-papel-alto); margin: 0; }

.pango_fullcommerce__fichas { display: grid; grid-template-columns: 1fr; gap: 0; }
.pango_fullcommerce__ficha {
	border-top: 1px solid var(--pango-linea-clara);
	padding: 20px 0;
}
.pango_fullcommerce__ficha h3 {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
	color: var(--pango-papel-alto);
}
.pango_fullcommerce__ficha p { font-size: 16px; line-height: 1.6; color: #C9C4BB; margin: 0; }

.pango_fullcommerce__puntos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 24px 32px;
	margin-top: clamp(24px, 3vw, 40px);
	padding-top: clamp(26px, 2.6vw, 34px);
	border-top: 1px solid var(--pango-linea-clara);
}
.pango_fullcommerce__punto h4 {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 18px;
	letter-spacing: -0.01em;
	margin: 0 0 6px;
	color: var(--pango-papel-alto);
}
.pango_fullcommerce__punto p { font-size: 14px; line-height: 1.55; color: #C9C4BB; margin: 0; }
.pango_fullcommerce__cta { margin-top: clamp(24px, 2.6vw, 36px); }

@media (max-width: 1023px) {
	.pango_fullcommerce__alto { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 519px) {
	.pango_fullcommerce__cta .pango_boton { width: 100%; }
}

/* --------------------------------------------------------------------------
   Titulares del sistema dentro del contenido de una página
   --------------------------------------------------------------------------
   El sistema de diseño da color y tamaño a los h1..h4 que aparecen dentro del
   contenido (.entry-content h2), y esa regla pesa más que una clase suelta. Sin
   esto, un titular del sistema sale con el tamaño del cuerpo del artículo y con
   el color de la tinta; y sobre fondo oscuro, directamente no se ve. Pasó con
   el «FULLCOMMERCE», que estaba ahí y era negro sobre negro. */
.entry-content h1.pango_titular,
.entry-content h2.pango_titular,
.entry-content h3.pango_titular,
.entry-content p.pango_titular {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: clamp(34px, 4.8vw, 66px);
	line-height: 0.95;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	color: var(--pango-tinta);
	margin: 0;
}
.entry-content h2.pango_fullcommerce__titular,
.entry-content p.pango_fullcommerce__titular {
	color: var(--pango-papel-alto);
	font-size: clamp(26px, 3.4vw, 46px);
	letter-spacing: -0.035em;
	line-height: 1;
}
.entry-content p.pango_fullcommerce__frase { margin: 0 0 14px; }
.entry-content h2.pango_cierre__titular,
.entry-content h2.pango_destacado__titular,
.entry-content h2.pango_contacto__titular { color: var(--pango-papel-alto); }
.entry-content .pango_titular .pango_acento { color: var(--pango-acento); }

/* ==========================================================================
   pango_servicio_ficha — el selector de subservicios y su detalle
   ========================================================================== */
.pango_servicio_ficha { max-width: var(--pango-ancho); margin: 0 auto; padding: 56px var(--pango-margen); }
.pango_servicio_ficha__titular {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: clamp(24px, 3vw, 38px);
	letter-spacing: -0.02em;
	margin: 0 0 24px;
}
.pango_servicio_ficha__pestanas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
/* La pestaña elegida la marca aria-selected, que es lo que ya dice cuál está
   activa para quien navega con lector de pantalla. Un atributo, un aspecto: no
   hace falta que el JavaScript vaya pintando estilos por su cuenta. */
.pango_servicio_ficha__pestana {
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--pango-tinta);
	background: transparent;
	border: 1.5px solid var(--pango-linea);
	padding: 10px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .25s var(--pango-curva), color .25s var(--pango-curva), border-color .25s var(--pango-curva);
}
.pango_servicio_ficha__pestana:hover { border-color: var(--pango-tinta); }
.pango_servicio_ficha__pestana[aria-selected="true"] {
	background: var(--pango-tinta);
	border-color: var(--pango-tinta);
	color: var(--pango-papel-alto);
}
.pango_servicio_ficha__pestana:focus-visible { outline: 3px solid var(--pango-acento); outline-offset: 3px; }

.pango_servicio_ficha__entrada { font-size: clamp(19px, 2vw, 24px); line-height: 1.45; color: var(--pango-tinta-media); margin: 0 0 32px; max-width: 820px; }
.pango_servicio_ficha__columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 36px; }
.pango_servicio_ficha__bloque { border-top: 3px solid var(--pango-tinta); padding: 20px 0 28px; }
.pango_servicio_ficha__bloque h3 {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pango-tinta-media);
	margin: 0 0 16px;
}
.pango_servicio_ficha__incluye,
.pango_servicio_ficha__resuelve,
.pango_servicio_ficha__etapas { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.pango_servicio_ficha__incluye li { display: flex; gap: 10px; font-size: 17px; line-height: 1.5; }
.pango_servicio_ficha__incluye li::before { content: '/'; color: var(--pango-acento); font-weight: 700; flex: none; }
.pango_servicio_ficha__etapas { gap: 16px; }
.pango_servicio_ficha__etapas li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; }
.pango_servicio_ficha__num {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 14px;
	color: var(--pango-acento);
	padding-top: 2px;
	font-variant-numeric: tabular-nums;
}
.pango_servicio_ficha__etapas b,
.pango_servicio_ficha__resuelve b { display: block; font-weight: 700; font-size: 17px; }
.pango_servicio_ficha__detalle { display: block; color: var(--pango-tinta-media); font-size: 16px; line-height: 1.45; margin-top: 2px; }
.pango_servicio_ficha__resuelve { gap: 16px; }

.pango_servicio_ficha__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--pango-linea);
}
.pango_servicio_ficha__rotulo {
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pango-tinta-media);
}
.pango_servicio_ficha__entrega {
	display: inline-flex;
	align-items: center;
	font-size: 15px;
	font-weight: 600;
	border: 1.5px solid var(--pango-linea);
	border-radius: 999px;
	padding: 7px 15px;
}
.pango_servicio_ficha__plazo { margin-left: auto; color: var(--pango-tinta-media); font-size: 16px; }
.pango_servicio_ficha__plazo b { font-weight: 700; color: var(--pango-tinta); }

@media (max-width: 519px) {
	.pango_servicio_ficha { padding: 36px var(--pango-margen); }
	.pango_servicio_ficha__plazo { margin-left: 0; }
}

/* ==========================================================================
   pango_pie — el pie del sitio
   ========================================================================== */
.pango_pie { background: var(--pango-tinta); padding: 40px 0 34px; font-family: 'Space Grotesk', system-ui, sans-serif; }
/* El logotipo del pie: el pangolín colgando y el nombre a su derecha.
   La maqueta venía con posiciones absolutas en píxeles fijos; aquí va con flex
   y todo medido contra --alto, así que se puede cambiar el tamaño en un sitio
   y no se descuadra en móvil. */
.pango_pie__logo { display: inline-block; margin-bottom: 26px; }
.pango_pie__logo img { height: 60px; width: auto; display: block; }
.pango_pie__rejilla {
	display: grid;
	grid-template-columns: minmax(240px, 1fr) repeat(4, minmax(0, auto));
	gap: clamp(28px, 3.4vw, 64px);
	justify-content: end;
	padding-bottom: 44px;
	border-bottom: 1px solid var(--pango-linea-clara);
}
.pango_pie__marca { max-width: 340px; }
.pango_pie__marca p { font-size: 16px; line-height: 1.6; color: var(--pango-papel-alto); margin: 0; }
.pango_pie__contacto { display: flex; flex-direction: column; gap: 12px; font-size: 16px; color: var(--pango-papel-alto); }
.pango_pie__correo { color: var(--pango-acento); text-decoration: underline; text-underline-offset: 3px; }
.pango_pie__correo:hover { text-decoration: none; }
.pango_pie__cita { align-self: flex-start; margin-top: 4px; font-size: 14px; padding: 11px 20px; }

.pango_pie__lab { padding-top: 4px; margin-top: 28px; }
.pango_pie__lab_cabecera { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.pango_pie__lab_cabecera .pango-foot-h { margin-bottom: 0; }
.pango_pie__lab_cabecera .pango_pie__correo { font-size: 14px; font-weight: 600; }
.pango_pie__lab_lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 28px; }
.pango_pie__lab_lista a { color: var(--pango-papel-alto); font-size: 15px; line-height: 1.4; display: block; }
.pango_pie__lab_lista a:hover { color: var(--pango-acento); }

.pango_pie__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--pango-tinta-tenue); margin-top: 28px; }
.pango_pie__legal_enlaces { display: flex; gap: 22px; flex-wrap: wrap; }
.pango_pie__legal_enlaces a { color: var(--pango-tinta-tenue); }
.pango_pie__legal_enlaces a:hover { color: var(--pango-papel-alto); }

.pango-sellos { max-width: var(--pango-ancho); margin: 0 auto; padding: 26px var(--pango-margen) 0; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.pango-sellos__sortlist { display: block; height: 44px; width: auto; }
.pango-sellos__shopify { display: block; height: 40px; width: auto; }
.pango-sellos__cmc { display: flex; align-items: center; gap: 12px; text-decoration: none;
  color: inherit; font-size: 13px; line-height: 1.35; }
.pango-sellos__cmc img { display: block; height: 56px; width: auto; }
.pango-sellos__cmc b { font-weight: 700; }
.pango-sellos__cmc small { display: block; color: var(--pango-tinta-suave, #6B655C); font-size: 12px; }
.pango-sellos__cmc:hover b { color: var(--pango-acento, #F73600); }

/* ==========================================================================
   pango_contacto_hero — la cabecera de la página de contacto
   ========================================================================== */
.pango_contacto_hero { max-width: var(--pango-ancho); margin: 0 auto; padding: 64px var(--pango-margen) 32px; }
.pango_contacto_hero__titular {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: clamp(40px, 6.5vw, 88px);
	letter-spacing: -0.04em;
	line-height: 0.92;
	margin: 0 0 20px;
	text-transform: uppercase;
}
.pango_contacto_hero__entrada { font-size: 20px; line-height: 1.55; max-width: 520px; margin: 0 0 28px; }
.pango_contacto_hero__agenda { border-radius: var(--pango-radio); padding: 16px 24px; }
.pango_contacto_hero__nota { font-size: 15px; opacity: .7; margin: 18px 0 0; }

.pango_contacto_hero__form {
	display: flex;
	flex-direction: column;
	gap: 13px;
	min-width: 0;
	max-width: 100%;
	background: var(--pango-tinta);
	border-radius: var(--pango-radio-grande);
	padding: clamp(28px, 3.5vw, 40px);
}
.pango_contacto_hero__form_titulo { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 20px; color: var(--pango-papel-alto); margin: 0 0 4px; }
.pango_contacto_hero__form .pango_boton { border-radius: var(--pango-radio); padding: 18px; }
.pango_contacto_hero__pie { font-size: 13px; color: rgba(251, 250, 246, 0.7); margin: 0; }
.pango_contacto_hero__pie a { color: var(--pango-acento); font-weight: 600; }

/* La rejilla de la cabecera de contacto: titular a la izquierda y formulario a
   la derecha en cuanto hay sitio. Vivía en un <style> dentro del componente y
   ahora está donde tiene que estar. */
.pango-contacto-hero__rejilla { display: grid; gap: 32px; align-items: center; }
.pango-contacto-hero__par { display: grid; gap: 13px; }
@media (min-width: 900px) {
	.pango-contacto-hero__rejilla { grid-template-columns: minmax(0, 1fr) minmax(420px, 0.85fr); gap: 56px; }
	.pango-contacto-hero__par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* ==========================================================================
   pango_llmstxt — la cronología con fechas
   ========================================================================== */
.pango_llmstxt { padding: var(--pango-aire) 0; background-color: var(--pango-papel-alto); }
.pango_llmstxt__entrada { margin: 0; max-width: 62ch; font-size: clamp(17px, 1.5vw, 20px); }
.pango_llmstxt .pango_titular { margin-bottom: 22px; }
.pango_llmstxt__linea {
	list-style: none;
	margin: 44px 0 0;
	padding: 0;
	max-width: 100ch;
	border-bottom: 1px solid var(--pango-linea);
}
.pango_llmstxt__hito {
	display: flex;
	gap: clamp(16px, 3vw, 40px);
	align-items: baseline;
	padding: 26px 0;
	border-top: 1px solid var(--pango-linea);
}
.pango_llmstxt__fecha {
	/* La fecha iba en la monoespaciada del sistema. Fuera: en esta casa se
	   escribe con las dos fuentes de la marca y ninguna otra. Las cifras se
	   alinean con tabular-nums, que es lo unico que hacia falta de la mono. */
	font-family: var(--pango-font-display);
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	flex: none;
	min-width: 88px;
	color: var(--pango-tinta-tenue);
}
/* El hito de hoy es el único con el acento: es lo que hace que la cronología
   tenga un punto de llegada en vez de ser una lista de fechas. */
.pango_llmstxt__hito--hoy .pango_llmstxt__fecha { color: var(--pango-acento); }
.pango_llmstxt__que { display: block; }
.pango_llmstxt__que strong {
	display: block;
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 20px;
	color: var(--pango-tinta);
	margin-bottom: 6px;
}
.pango_llmstxt__que > span { display: block; font-size: 16px; line-height: 1.6; color: var(--pango-tinta-media); }
.pango_llmstxt__que a { color: var(--pango-acento); text-decoration: underline; text-underline-offset: 3px; }
.pango_llmstxt__cierre { margin: 38px 0 0; max-width: 68ch; font-size: 17px; line-height: 1.6; color: var(--pango-tinta); }

/* ==========================================================================
   pango_compromiso — precio desde, promesas y llamada
   ========================================================================== */
.pango_compromiso { max-width: var(--pango-ancho); margin: 0 auto; padding: 8px var(--pango-margen) 48px; }
.pango_compromiso__franja {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 40px;
	background: var(--pango-papel-alto);
	border-top: 3px solid var(--pango-tinta);
	padding: 28px 0;
}
.pango_compromiso__precio { flex: none; }
.pango_compromiso__desde {
	display: block;
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pango-tinta-media);
	margin-bottom: 4px;
}
.pango_compromiso__cifra {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: clamp(30px, 4vw, 44px);
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.pango_compromiso__nota { display: block; font-size: 15px; color: var(--pango-tinta-media); margin-top: 6px; }
.pango_compromiso__promesas { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; flex: 1; min-width: 240px; }
.pango_compromiso__promesas li { display: flex; gap: 10px; align-items: baseline; font-size: 16px; color: var(--pango-tinta-media); }
.pango_compromiso__promesas li::before { content: '/'; color: var(--pango-acento); font-weight: 700; flex: none; }

@media (max-width: 519px) {
	.pango_compromiso__franja .pango_boton { width: 100%; }
}

/* ==========================================================================
   Archivos (blog y proyectos)
   ========================================================================== */
.pango_archivo__enlace { color: inherit; }
.pango_archivo__enlace:hover { color: var(--pango-acento); }
.pango_archivo__entrada { color: var(--pango-tinta-media); font-size: 18px; margin-top: 8px; }
.pango_archivo__entrada--grande { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.55; margin-top: 14px; max-width: 640px; }
.pango_archivo__hueco { display: block; aspect-ratio: 16/9; background: var(--pango-tinta); }
.pango_archivo__vacio { max-width: var(--pango-ancho); margin: 0 auto; padding: 0 var(--pango-margen) 72px; color: var(--pango-tinta-media); }
.pango_archivo__aviso { max-width: var(--pango-ancho); margin: 0 auto; padding: 0 var(--pango-margen) 80px; }
.pango_archivo__aviso_texto { color: var(--pango-tinta-media); font-size: 18px; max-width: 640px; }
.pango_archivo__aviso_cta { margin-top: 20px; }

/* ==========================================================================
   pango_eshow — la página de la feria
   ========================================================================== */
.pango_eshow { background: var(--pango-papel); position: relative; overflow: hidden; }
.pango_eshow__halo {
	position: absolute;
	right: -6%;
	top: -14%;
	width: clamp(260px, 30vw, 480px);
	aspect-ratio: 1;
	background: radial-gradient(circle at 50% 50%, rgba(247, 54, 0, 0.28), rgba(247, 54, 0, 0) 70%);
	filter: blur(24px);
	animation: pgblob 18s ease-in-out infinite;
	pointer-events: none;
}
.pango_eshow__cuerpo {
	position: relative;
	z-index: 1;
	max-width: var(--pango-ancho);
	margin: 0 auto;
	padding: clamp(40px, 5vw, 80px) clamp(20px, 5vw, 40px);
}
.pango_eshow__badge {
	display: inline-block;
	border: 1.5px solid var(--pango-tinta);
	color: var(--pango-tinta);
	font-family: 'Archivo', sans-serif;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 8px 15px;
	border-radius: 999px;
}
.pango_eshow__titular {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	font-size: clamp(38px, 7vw, 96px);
	letter-spacing: -0.04em;
	line-height: 0.92;
	margin: 18px 0 20px;
	text-transform: uppercase;
	max-width: 12ch;
}
.pango_eshow__entrada { font-size: clamp(18px, 2vw, 24px); line-height: 1.5; color: var(--pango-tinta-media); max-width: 720px; margin: 0 0 32px; }
.pango_eshow__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 32px; max-width: 900px; margin-bottom: 36px; }
.pango_eshow__dato { border-top: 3px solid var(--pango-tinta); padding: 16px 0 18px; }
.pango_eshow__dato_rotulo {
	font-family: 'Archivo', sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pango-tinta-media);
	margin-bottom: 6px;
}
.pango_eshow__dato_valor { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 20px; color: var(--pango-tinta); }

.pango_eshow__stand { max-width: var(--pango-ancho); margin: 0 auto; padding: var(--pango-aire) clamp(20px, 5vw, 40px); }
.pango_eshow__stand .pango_titular { margin-bottom: 28px; }
.pango_eshow__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; max-width: 820px; }
.pango_eshow__lista li { display: flex; gap: 12px; align-items: flex-start; font-size: 18px; line-height: 1.5; color: var(--pango-tinta-media); }
.pango_eshow__lista li::before { content: '/'; color: var(--pango-acento); font-weight: 800; flex: none; }

/* ==========================================================================
   pango_nav — la barra de arriba
   ==========================================================================
   El hueco de debajo existe porque la barra va fija: sin él, el primer bloque
   de cada página nacería medio tapado. */
.pango_nav__hueco { height: 99px; }
.pango_nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	background: var(--pango-tinta);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	transition: transform .28s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}
.pango_nav__fila {
	max-width: var(--pango-ancho);
	margin: 0 auto;
	padding: 15px clamp(20px, 5vw, 40px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.pango_nav__cta { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 16px; padding: 11px 22px; flex: none; }
.pango_nav__abrir {
	display: none;
	background: none;
	border: none;
	color: var(--pango-papel-alto);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	flex: none;
}
.pango_nav__movil {
	display: none;
	flex-direction: column;
	padding: 6px 16px 18px;
	border-top: 1px solid rgba(250, 246, 240, 0.12);
}
.pango_nav__movil_cta { margin-top: 12px; font-size: 15px; padding: 12px 20px; }

/* ==========================================================================
   pango_modal — la ventana de contacto
   ==========================================================================
   Arranca oculta y la abre el JavaScript poniendo display:flex. Ese display en
   línea es el único que se queda ahí: es estado, no diseño. */
.pango_modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 400;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(28, 27, 26, 0.72);
	backdrop-filter: blur(6px);
	overflow-y: auto;
}
.pango_modal__caja {
	position: relative;
	width: 100%;
	max-width: 1040px;
	margin: auto;
	border-radius: var(--pango-radio-grande);
	padding: clamp(26px, 4vw, 56px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
	background-color: var(--pango-tinta);
	box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.7);
}
.pango_modal__cerrar {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 42px;
	height: 42px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--pango-linea-clara);
	border-radius: 999px;
	background: transparent;
	color: var(--pango-papel-alto);
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background-color .25s var(--pango-curva), border-color .25s var(--pango-curva);
}
.pango_modal__cerrar:hover { background: rgba(250, 246, 240, 0.12); border-color: var(--pango-papel-alto); }
.pango_modal__cerrar:focus-visible { outline: 3px solid var(--pango-acento); outline-offset: 2px; }
.pango_modal__titular { font-size: clamp(30px, 4vw, 56px); line-height: 0.92; margin-bottom: 20px; }
.pango_modal__texto { font-size: 18px; line-height: 1.55; color: var(--pango-papel-alto); margin: 0 0 24px; max-width: 420px; }
.pango_modal__form { border-radius: var(--pango-radio-grande); padding: clamp(22px, 3vw, 38px); }

@media (max-width: 767px) {
	.pango_modal__caja { grid-template-columns: minmax(0, 1fr); padding: 24px; border-radius: 20px; }
}

/* Dos remates: la entradilla de los testimonios y el tamaño de las estrellas,
   que viene del componente porque hay dos medidas distintas en la misma
   página (la de la nota general y la de cada reseña). */
.pango_testimonios__intro { margin-bottom: 16px; }
.pango_testimonios__estrellas { font-size: var(--pango-estrella, 15px); }

/* ---------------------------------------------------------------------------
   Bloques de servicio de distinto peso
   Cuatro columnas. El bloque grande ocupa dos y va en tinta, que es la forma
   más corta de decir que pesa más sin inventarse un color nuevo. El resto,
   papel medio tono por encima del fondo. Esquinas rectas, como todo aquí.
   --------------------------------------------------------------------------- */
.pango_bloques {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	align-items: stretch;
}
.pango_bloque {
	display: flex;
	flex-direction: column;
	padding: 30px 30px 32px;
	background: var(--pango-papel-alto);
	border: 1px solid var(--pango-linea-fina);
	transition: transform .28s cubic-bezier(.32,.72,0,1), box-shadow .28s cubic-bezier(.32,.72,0,1);
}
.pango_bloque--grande {
	grid-column: span 2;
	background: var(--pango-tinta);
	border-color: var(--pango-tinta);
}
.pango_bloque:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(28, 27, 26, .10);
}

.pango_bloque .pango_bloque__titulo {
	margin: 0;
	font-size: 19px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--pango-tinta);
	position: relative;
	padding-bottom: 14px;
}
/* el filete bajo el título se dibuja al pasar por encima; es el único
   movimiento del bloque aparte del propio levantarse */
.pango_bloque .pango_bloque__titulo::after {
	content: '';
	position: absolute; left: 0; bottom: 6px;
	width: 34px; height: 2px;
	background: var(--pango-acento);
	transition: width .34s cubic-bezier(.32,.72,0,1);
}
.pango_bloque:hover .pango_bloque__titulo::after { width: 92px; }

.pango_bloque--grande .pango_bloque__titulo {
	color: var(--pango-papel-alto);
	font-size: clamp(21px, 2.1vw, 26px);
	text-transform: uppercase;
	letter-spacing: .01em;
}

.pango_bloque__texto {
	font-size: 15px;
	line-height: 1.62;
	color: var(--pango-tinta-media);
	margin-top: 12px;
}
.pango_bloque--grande .pango_bloque__texto { color: #C9C3B8; font-size: 16px; }
.pango_bloque__texto a {
	color: var(--pango-acento);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.pango_bloque--grande .pango_bloque__texto a { color: #FF8354; }

/* la frase de remate, solo en los grandes */
.pango_bloque__claim {
	margin: auto 0 0;
	padding-top: 22px;
	font-size: clamp(16px, 1.5vw, 18px);
	line-height: 1.35;
	color: var(--pango-acento);
	font-weight: 600;
	text-wrap: balance;
}

.pango_bloque__enlace {
	margin-top: 16px;
	align-self: flex-start;
	font-size: 14px;
	color: var(--pango-acento);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}
.pango_bloque__enlace:focus-visible { outline: 2px solid var(--pango-acento); outline-offset: 3px; }

@media (max-width: 1023px) {
	.pango_bloques { grid-template-columns: repeat(2, 1fr); }
	.pango_bloque--grande { grid-column: span 2; }
}
@media (max-width: 639px) {
	.pango_bloques { grid-template-columns: 1fr; gap: 10px; }
	.pango_bloque, .pango_bloque--grande { grid-column: auto; padding: 24px 22px 26px; }
}
@media (prefers-reduced-motion: reduce) {
	.pango_bloque, .pango_bloque .pango_bloque__titulo::after { transition: none; }
	.pango_bloque:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   Colores por grupo de servicio
   Uno por grupo. Son claros a propósito y por eso se usan en superficies,
   halos, filetes y estados de paso del ratón, nunca en texto sobre el papel:
   ninguno de los cinco llega al contraste mínimo para leerse. El texto sigue
   siendo tinta y el único naranja sigue siendo el acento de marca.
   --------------------------------------------------------------------------- */
:root {
	--pango-serv-shopify:   #8BCC60;
	--pango-serv-migracion: #FAC346;
	--pango-serv-apps:      #63D0C9;
	--pango-serv-techlab:   #8F9AFF;
	--pango-serv-seo-ia:    #D063FA;

	/* Sin grupo, manda el acento. Así cualquier componente puede pedir
	   --pango-servicio y funcionar igual dentro y fuera de una página de
	   servicio, sin condicionales por todas partes. */
	--pango-servicio: var(--pango-acento);
}

[data-servicio="shopify"]   { --pango-servicio: var(--pango-serv-shopify); }
[data-servicio="migracion"] { --pango-servicio: var(--pango-serv-migracion); }
[data-servicio="apps"]      { --pango-servicio: var(--pango-serv-apps); }
[data-servicio="techlab"]   { --pango-servicio: var(--pango-serv-techlab); }
[data-servicio="seo-ia"]    { --pango-servicio: var(--pango-serv-seo-ia); }

/* El hero ya trae su color; lo que hereda es todo lo que va dentro */
[data-servicio] .pango_bloque .pango_bloque__titulo::after,
[data-servicio] .pango-card:hover { border-top-color: var(--pango-servicio); }
[data-servicio] .pango_bloque .pango_bloque__titulo::after { background: var(--pango-servicio); }

/* La lista de servicios del pie: cada enlace se enciende con el suyo. Es el
   único sitio donde los cinco conviven, y sirve de leyenda sin escribir una. */
.pango_pie__lab_lista a[href*="/servicio-shopify/"]:hover   { color: var(--pango-serv-shopify); }
.pango_pie__lab_lista a[href*="/servicio-migracion/"]:hover { color: var(--pango-serv-migracion); }
.pango_pie__lab_lista a[href*="/servicio-apps/"]:hover      { color: var(--pango-serv-apps); }
.pango_pie__lab_lista a[href*="/servicio-techlab/"]:hover   { color: var(--pango-serv-techlab); }
.pango_pie__lab_lista a[href*="/servicio-seo-ia/"]:hover    { color: var(--pango-serv-seo-ia); }
.pango_pie__lab_lista a { transition: color .22s cubic-bezier(.32,.72,0,1); }

/* El menu: cada entrada se enciende con el color de su familia, que le pone
   inc/nav-familias.php. El primer nivel y el movil, aqui; los paneles del
   escritorio, en design-system.css con el resto del menu. */
.pango-menu > li > a:hover { color: var(--pango-menu, var(--pango-acento)); }
.pango-nav-mobile .pango-menu a:hover { color: var(--pango-menu, var(--pango-acento)); }

/* Y en el menú, por si algún día cuelgan de él las cinco */
.pango-menu a[href*="/servicio-shopify/"]:hover   { color: var(--pango-serv-shopify);   border-color: var(--pango-serv-shopify); }
.pango-menu a[href*="/servicio-migracion/"]:hover { color: var(--pango-serv-migracion); border-color: var(--pango-serv-migracion); }
.pango-menu a[href*="/servicio-apps/"]:hover      { color: var(--pango-serv-apps);      border-color: var(--pango-serv-apps); }
.pango-menu a[href*="/servicio-techlab/"]:hover   { color: var(--pango-serv-techlab);   border-color: var(--pango-serv-techlab); }
.pango-menu a[href*="/servicio-seo-ia/"]:hover    { color: var(--pango-serv-seo-ia);    border-color: var(--pango-serv-seo-ia); }

/* El badge del hero, que es lo primero que se lee y donde el color del grupo
   se entiende sin explicación. Fondo lleno y letra clara: con el filete de
   antes el color se veía tanto como no se veía. */
.pango_service_hero .pango_service_hero__badge {
	background: var(--pango-servicio);
	border-color: var(--pango-servicio);
	color: #1C1B1A;
	box-shadow: none;
	margin-left: 14px;
}

/* El grupo, ahora a nivel de página: la clase la pone el theme leyendo el
   propio hero, así que no hay que declarar nada dos veces. */
body.pango-svc-shopify   { --pango-servicio: var(--pango-serv-shopify); }
body.pango-svc-migracion { --pango-servicio: var(--pango-serv-migracion); }
body.pango-svc-apps      { --pango-servicio: var(--pango-serv-apps); }
body.pango-svc-techlab   { --pango-servicio: var(--pango-serv-techlab); }
body.pango-svc-seo-ia    { --pango-servicio: var(--pango-serv-seo-ia); }

/* Dónde se nota, dentro de una página de servicio. Sitios donde el color dice
   de qué va la página y no compite con nada:

   · el separador de la cinta oscura, que es donde estos colores claros se leen
     de verdad, sobre tinta
   · el paso del ratón por las cifras y por las tarjetas

   Lo que NO se toca a propósito: los botones y el «Contactar» del menú siguen
   con el acento de marca. Son el elemento de conversión y deben ser el mismo
   naranja en las cuarenta y seis landings. */
body[class*="pango-svc-"] .pango_service_band .pango_band__sep { color: var(--pango-servicio); }
body[class*="pango-svc-"] a.pango_stats__dato:hover .pango_stats__cifra { color: var(--pango-servicio); }
body[class*="pango-svc-"] a.pango_stats__dato:hover .pango_stats__pie { text-decoration-color: var(--pango-servicio); }
body[class*="pango-svc-"] .pango-card:hover { border-top-color: var(--pango-servicio); }
body[class*="pango-svc-"] .pango_bloque .pango_bloque__titulo::after { background: var(--pango-servicio); }

/* Un video incrustado dentro de una seccion. El servidor no puede preguntarle
   a YouTube por el tamano, asi que la proporcion la pone el CSS. */
.pango-video { position: relative; aspect-ratio: 16 / 9; margin: 28px 0; }
.pango-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 14px; }

/* Para titulares con un nombre que lleva mayuscula dentro (visionOS). En
   mayusculas se leeria VISIONOS y deja de ser el nombre del producto. */
.pango_service_hero__titular--caja { text-transform: none; }
.pango-section__title--caja { text-transform: none; }

/* ==========================================================================
   pango-modelo - un modelo 3D que se puede girar
   ========================================================================== */
.pango-modelo { margin: 32px 0; }
/* La caja tiene la altura y recorta; el pie del credito va debajo, en el flujo,
   para que se pueda leer y no estorbe al arrastrar el modelo. */
.pango-modelo__caja {
	position: relative;
	height: var(--pango-modelo-alto, clamp(280px, 46vw, 460px));
	border-radius: 18px;
	overflow: hidden;
	background: var(--pango-papel-alto);
}
.pango-modelo__cartel,
.pango-modelo model-viewer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.pango-modelo__cartel { object-fit: contain; }
.pango-modelo model-viewer { background: transparent; --poster-color: transparent; }
/* El boton solo hace falta cuando el visor no se monta solo: con las
   animaciones desactivadas, o si la libreria no llega. */
.pango-modelo__ver {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	border: 1.5px solid var(--pango-tinta);
	background: var(--pango-papel);
	color: var(--pango-tinta);
	font-family: 'Archivo', sans-serif;
	font-weight: 700;
	font-size: 13px;
	padding: 9px 18px;
	border-radius: 999px;
	cursor: pointer;
	display: none;
}
.pango-modelo--quieto .pango-modelo__ver,
.pango-modelo--sin .pango-modelo__ver { display: block; }
.pango-modelo--vivo .pango-modelo__cartel,
.pango-modelo--vivo .pango-modelo__ver { display: none; }
/* El credito no es decoracion: lo obliga la licencia del modelo. */
.pango-modelo__credito { margin-top: 10px; font-size: 12px; color: var(--pango-tinta-media); }
.pango-modelo__credito a { color: inherit; }

/* ==========================================================================
   Páginas en tinta
   --------------------------------------------------------------------------
   Una página entera sobre negro. Hoy la usa visionOS, que va de un cacharro
   que te tapa los ojos y se usa a oscuras, así que el negro es el tema y no
   un capricho. Se activa desde el contenido, poniendo el color en el propio
   componente, igual que ya se hacía con las secciones oscuras de más arriba.
   ========================================================================== */
.pango_service_hero[style*="#141312"] { color: var(--pango-papel); }
.pango_service_hero[style*="#141312"] .pango_service_hero__titular { color: var(--pango-papel); }
.pango_service_hero[style*="#141312"] .pango_service_hero__entrada { color: #B9B4AC; }
.pango_service_hero[style*="#141312"] .pango_service_hero__volver { color: #B9B4AC; }
.pango_service_hero[style*="#141312"] .pango_service_hero__badge { color: var(--pango-papel); }
.pango-section[style*="#141312"] .pango-section__title { color: var(--pango-papel); }
/* La caja del modelo, sobre negro, es un hueco apenas más claro. Dejarla en
   papel sería pegar un recorte blanco en mitad de la página. */
.pango-section[style*="#141312"] .pango-modelo__caja { background: rgba(243, 242, 239, 0.05); }
.pango-section[style*="#141312"] .pango-modelo__credito { color: #8A857B; }
body.pango-tinta { background: #141312; }
.pango-lienzo { background-color: var(--pango-papel); }
body.pango-tinta .pango-lienzo { background-color: #141312; }
/* El botón de tinta sobre una página de tinta desaparece: se le da la vuelta. */
.pango-section[style*="#141312"] .pango_boton--tinta { background: var(--pango-papel); color: #141312; }

/* --------------------------------------------------------------------------
   Medida de lectura dentro de las secciones
   --------------------------------------------------------------------------
   La sección ocupa 1.280 px porque dentro puede haber rejillas y tarjetas. Pero
   un párrafo suelto de 1.280 px son unos ciento cincuenta caracteres por línea
   y no hay quien lo lea: al llegar al final el ojo no encuentra el principio de
   la siguiente. Así que la prosa se limita a una medida de lectura y lo demás
   —tarjetas, bloques, pasos, modelos— sigue ocupando lo que necesite.
   Se vio el 31-ago-2026 en la política de privacidad, al pasar las páginas a
   lienzo completo.
   -------------------------------------------------------------------------- */
.pango-section > p,
.pango-section > ul,
.pango-section > ol,
.pango-section > dl,
.pango-section > blockquote,
.pango-section > h3,
.pango-section > h4,
.pango-section > h5,
.pango-section > table { max-width: 72ch; }
/* Sin botón, el relleno de abajo del hero sobra: estaba puesto contando con él. */
.pango_service_hero--sin-cta .pango_service_hero__cuerpo { padding-bottom: 0; }
.pango_service_hero--sin-cta { padding-bottom: clamp(28px, 4vw, 48px); }

/* --------------------------------------------------------------------------
   El pie de la cabecera de servicio
   --------------------------------------------------------------------------
   La cabecera recorta lo que sobresale, y ahí dentro hay dos halos de color y
   una figura girando. Mientras la cabecera vivía dentro de una columna estrecha
   el corte no se veía; al pasar a pantalla completa quedó una raya recta de
   lado a lado, con el halo y el globo cortados a cuchillo. Parece un fallo de
   pintado, no una decisión. Se disuelve el último tramo contra el fondo de la
   propia cabecera, que es el mismo del papel, y la costura desaparece.
   -------------------------------------------------------------------------- */
.pango_service_hero::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(70px, 14%, 160px);
	background: linear-gradient(180deg, transparent, var(--pango-hero-fondo, var(--pango-papel)));
	pointer-events: none;
	z-index: 0;
}

/* --------------------------------------------------------------------------
   La cronología de llms.txt, en un móvil
   --------------------------------------------------------------------------
   Cada hito es una fila con la fecha a la izquierda y el texto a la derecha. El
   texto es un elemento flexible y, por defecto, un elemento flexible no se
   encoge por debajo de su contenido: la fila se hacía más ancha que la pantalla
   y el contenedor la cortaba, así que en un teléfono había texto que no se
   podía leer de ninguna manera. Con min-width en cero sí se encoge.
   Y por debajo de 520 px la fecha se pone encima, que es como se lee bien una
   cronología en una columna estrecha.
   -------------------------------------------------------------------------- */
.pango_llmstxt__que { min-width: 0; }
@media (max-width: 519px) {
	.pango_llmstxt__hito { flex-direction: column; gap: 6px; align-items: flex-start; }
	.pango_llmstxt__fecha { min-width: 0; }
}

/* Casilla de comunicaciones comerciales de los formularios.
   La casilla es la nativa y se queda visible a propósito: en pangostudio.com
   FastClick se comía los clics de las casillas ocultas, y una casilla de
   consentimiento que no se puede marcar es peor que no tenerla. */
.pango-consent { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 4px;
  font-size: 13px; line-height: 1.45; color: var(--pango-tinta-suave, #4A463F); cursor: pointer;
  /* El formulario es un flex en columna y esta etiqueta es uno de sus hijos. Sin
     min-width:0 conserva el min-width:auto que trae de serie, no puede encogerse
     por debajo de su contenido y se sale de la caja por la derecha, arrastrando
     el texto fuera del formulario. */
  min-width: 0; }
.pango-consent > span { flex: 1 1 auto; min-width: 0; }
.pango-consent input[type="checkbox"] { flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0;
  accent-color: var(--pango-acento, #F73600); cursor: pointer; }
/* Lo mismo con la casilla de consentimiento: solo va en claro donde el fondo es
   oscuro de verdad, que es la tarjeta de la cabecera de contacto. */
.pango_contacto_hero__form .pango-consent { color: var(--pango-papel-alto); }
.pango-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pango-consent a:hover { color: var(--pango-acento, #F73600); }
/* El área de toque de la casilla se queda en 17 px, que es poco para un dedo.
   El pseudoelemento la agranda a 44 px sin mover nada de sitio. */
@media (pointer: coarse) {
	.pango-consent input[type="checkbox"] { position: relative; }
	.pango-consent input[type="checkbox"]::after {
		content: ""; position: absolute; top: 50%; left: 50%;
		width: 44px; height: 44px; transform: translate(-50%, -50%);
	}
}

/* Joinchat (el botón de WhatsApp) se ancla abajo a la derecha con z-index 9000
   y en móvil cae justo encima del área de escribir y del botón de enviar.
   Mientras se está rellenando el formulario estorba más de lo que ayuda, así
   que se aparta; vuelve solo al salir del formulario. */
@media (max-width: 600px) {
	body:has(form[data-pango-lead-form]:focus-within) .joinchat {
		opacity: 0; pointer-events: none; transition: opacity .18s ease;
	}
}

/* Vídeo con carátula propia. El marco es un <button> porque lo que hay hasta
   que se pulsa es un botón de verdad: una imagen y un play, sin iframe debajo. */
.pango-video { padding: 72px 0 40px; }
.pango-video__titulo { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.02em;
  margin: 0 0 10px; text-wrap: balance; }
.pango-video__texto { max-width: 62ch; color: var(--pango-tinta-suave, #4A463F); margin: 0 0 24px; }
.pango-video__marco { display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
  position: relative; border-radius: 18px; overflow: hidden; background: #000;
  aspect-ratio: 16 / 9; box-shadow: 0 18px 40px rgba(0,0,0,.13); }
.pango-video__marco img { display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.32,.72,0,1), opacity .3s ease; }
.pango-video__marco:hover img { transform: scale(1.02); opacity: .88; }
.pango-video__marco iframe { display: block; width: 100%; height: 100%; border: 0; }
.pango-video__play { position: absolute; inset: 0; margin: auto; width: 74px; height: 74px;
  border-radius: 50%; background: var(--pango-acento, #F73600); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s cubic-bezier(.32,.72,0,1); }
.pango-video__play svg { margin-left: 3px; }
.pango-video__marco:hover .pango-video__play { transform: scale(1.07); }
.pango-video__marco:focus-visible { outline: 3px solid var(--pango-acento, #F73600); outline-offset: 4px; }
.pango-video__pie { color: var(--pango-tinta-suave, #6B655C); font-size: 14px; margin: 14px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .pango-video__marco img, .pango-video__play { transition: none; }
}

/* Escaparate: la baraja de proyectos. Las posiciones de cada carta las escribe
   el componente en un <style> propio, porque dependen de cuántas haya. Aquí
   está solo lo que no cambia. */
.pango-esc { padding: 72px 0 48px; }
.pango-esc__titulo { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 10px; text-wrap: balance; }
.pango-esc__texto { max-width: 62ch; color: var(--pango-tinta-suave, #4A463F); margin: 0 0 26px; }
/* Con diez cartas, la de más lejos se coloca a 870 px del centro. Aunque a esa
   distancia ya es invisible, seguiría contando para el ancho de la página y le
   sacaría una barra de desplazamiento horizontal. Se recorta solo en horizontal
   —clip en vez de hidden— para no comerse la sombra de la carta de delante. */
.pango-esc__caja { position: relative; overflow-x: clip; }
.pango-esc__radio { position: absolute; opacity: 0; pointer-events: none; }
.pango-esc__baraja { position: relative; height: 430px; display: flex; align-items: center; justify-content: center; }
.pango-esc__carta { position: absolute; display: block; width: min(560px, 78vw); cursor: pointer;
  transition: transform .62s cubic-bezier(.32,.72,0,1), opacity .45s ease, filter .45s ease; }
.pango-esc__marco { border-radius: 14px; overflow: hidden; background: #fff;
  border: 1px solid var(--pango-linea, #DCD8D1); box-shadow: 0 24px 50px rgba(0,0,0,.16); }
.pango-esc__barra { display: flex; align-items: center; gap: 6px; padding: 9px 12px;
  background: #fff; border-bottom: 1px solid var(--pango-linea, #DCD8D1); }
.pango-esc__barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--pango-linea, #DCD8D1); flex: 0 0 auto; }
.pango-esc__barra span { margin-left: 10px; font-size: 12px; color: var(--pango-tinta-suave, #6B655C);
  background: var(--pango-papel, #F3F2EF); border-radius: 999px; padding: 3px 12px; }
.pango-esc__marco img { display: block; width: 100%; height: auto; }
/* Los pies van apilados en su propio sitio, fuera del abanico, y solo se ve el
   de la carta de delante. Dentro de las cartas se superponían los cinco. */
.pango-esc__pies { display: grid; margin-top: 22px; }
.pango-esc__pie { grid-area: 1 / 1; text-align: center; opacity: 0; visibility: hidden;
  transition: opacity .3s ease; }
.pango-esc__pie b { display: block; font-size: 16px; }
.pango-esc__pie small { display: block; color: var(--pango-tinta-suave, #6B655C); font-size: 13px;
  max-width: 62ch; margin: 2px auto 0; }
.pango-esc__nombres { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 30px; }
.pango-esc__nombre { cursor: pointer; border: 1px solid var(--pango-linea, #DCD8D1); border-radius: 999px;
  padding: 7px 15px; font-size: 13px; color: var(--pango-tinta-suave, #6B655C);
  transition: color .25s ease, border-color .25s ease; }
.pango-esc__nombre:hover { color: var(--pango-tinta, #1C1B1A); }
.pango-esc__radio:focus-visible + .pango-esc__baraja { outline: 2px solid var(--pango-acento, #F73600); outline-offset: 8px; }

/* El móvil es más estrecho y más alto: la carta ocupa menos y el marco se
   redondea como un teléfono. */
.pango-esc--movil .pango-esc__baraja { height: 560px; }
.pango-esc--movil .pango-esc__carta { width: min(260px, 62vw); }
.pango-esc--movil .pango-esc__marco { border-radius: 30px; border-width: 6px; border-color: #1C1B1A;
  box-shadow: 0 26px 54px rgba(0,0,0,.22); }

@media (max-width: 700px) {
  .pango-esc__baraja { height: 320px; }
  .pango-esc--movil .pango-esc__baraja { height: 470px; }
}
@media (prefers-reduced-motion: reduce) { .pango-esc__carta { transition: none; } }

/* A medida. Dos columnas: lo que se dice y lo que lo sostiene. El número no es
   decoración, es el orden en el que se leen. */
.pango-medida { padding: 84px 0; }
.pango-medida__rejilla { display: grid; gap: 44px; }
@media (min-width: 900px) {
  .pango-medida__rejilla { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 68px; align-items: start; }
  .pango-medida__decir { position: sticky; top: 96px; }
}
.pango-medida__titular { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -.022em;
  margin: 8px 0 16px; text-wrap: balance; }
.pango-medida__texto { color: var(--pango-tinta-suave, #4A463F); max-width: 46ch; margin: 0 0 26px; }
.pango-medida__pruebas { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.pango-medida__prueba { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px;
  padding: 22px 0; border-top: 1px solid var(--pango-linea, #DCD8D1); }
.pango-medida__prueba:last-child { border-bottom: 1px solid var(--pango-linea, #DCD8D1); }
.pango-medida__n { font-size: 13px; font-weight: 700; letter-spacing: .08em;
  color: var(--pango-acento, #F73600); padding-top: 4px; font-variant-numeric: tabular-nums; }
.pango-medida__que { font-size: 19px; margin: 0 0 6px; letter-spacing: -.012em; }
.pango-medida__que a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--pango-linea, #DCD8D1); }
.pango-medida__que a:hover { color: var(--pango-acento, #F73600); border-color: currentColor; }
.pango-medida__que small { display: block; font-size: 13px; font-weight: 500;
  color: var(--pango-tinta-suave, #6B655C); letter-spacing: 0; margin-top: 2px; }
.pango-medida__prueba p { margin: 0; color: var(--pango-tinta-suave, #4A463F); font-size: 15px; }

/* Mapa de redirecciones. La dirección vieja, la flecha con el 301 y la nueva.
   Tipografía de la casa con cifras de ancho fijo: no hace falta una monoespaciada
   para que una ruta se lea como una ruta. */
.pango-rutas { border: 1px solid var(--pango-linea, #DCD8D1); border-radius: 16px;
  background: #fff; padding: 6px 20px 18px; margin: 26px 0; }
.pango-rutas__cab { display: none; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pango-tinta-suave, #6B655C); padding: 14px 0 4px; }
.pango-rutas__fila { display: grid; gap: 8px 14px; padding: 16px 0;
  border-top: 1px solid var(--pango-linea, #DCD8D1); align-items: center; }
.pango-rutas__fila:first-of-type { border-top: 0; }
.pango-rutas__que { font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--pango-tinta-suave, #6B655C); }
.pango-rutas__antes, .pango-rutas__despues { font-family: inherit; font-variant-numeric: tabular-nums;
  font-size: 15px; background: var(--pango-papel, #F3F2EF); border: 1px solid var(--pango-linea, #DCD8D1);
  border-radius: 8px; padding: 8px 12px; word-break: break-all; }
.pango-rutas__despues { background: #fff; border-color: var(--pango-tinta, #1C1B1A); font-weight: 600; }
.pango-rutas__antes i, .pango-rutas__despues i { font-style: normal; color: var(--pango-acento, #F73600); }
.pango-rutas__cae { text-decoration: line-through; text-decoration-thickness: 1.5px;
  color: var(--pango-tinta-suave, #9A9287); }
.pango-rutas__flecha { display: flex; align-items: center; gap: 8px; justify-self: start;
  color: var(--pango-tinta-suave, #6B655C); }
.pango-rutas__flecha b { font-size: 11px; letter-spacing: .1em; border: 1px solid currentColor;
  border-radius: 999px; padding: 2px 8px; }
.pango-rutas__flecha svg { transform: rotate(90deg); }
.pango-rutas__nota { font-size: 14px; color: var(--pango-tinta-suave, #6B655C); margin: 16px 0 0; }
@media (min-width: 880px) {
  .pango-rutas__cab { display: grid; grid-template-columns: 130px minmax(0,1fr) 90px minmax(0,1fr); gap: 14px; }
  .pango-rutas__cab span:first-child { grid-column: 2; }
  .pango-rutas__cab span:last-child { grid-column: 4; }
  .pango-rutas__fila { grid-template-columns: 130px minmax(0,1fr) 90px minmax(0,1fr); }
  .pango-rutas__flecha { justify-self: center; }
  .pango-rutas__flecha svg { transform: none; }
}

/* El gesto horizontal es nuestro; el vertical sigue siendo de la página. */
/* Se puede arrastrar, y el cursor lo dice. pan-y deja que el dedo siga
   desplazando la pagina en vertical mientras el horizontal es de la baraja. */
.pango-esc__baraja { touch-action: pan-y; cursor: grab; }

/* En móvil la baraja ocupa el ancho entero de la pantalla.
   La sección va dentro de .pango_ancho, que tiene su margen a los lados; aquí
   se sale de él con un margen negativo del mismo tamaño, así que no hace falta
   sacar la caja de su sitio en el HTML ni repetir el titular fuera. El recorte
   horizontal que ya lleva la caja evita que eso saque barra de scroll. */
@media (max-width: 639px) {
	/* El relleno lateral de las secciones, al tamaño del móvil.
	   [pango_section] lo trae escrito en el atributo del shortcode —«72px 40px
	   40px»— y esos 40 px vienen de escritorio: en una pantalla de 375 dejan la
	   columna en 295. Va con !important porque hay que ganarle a un estilo
	   escrito en la etiqueta, que si no manda siempre. Y de paso, la baraja de
	   dentro de una landing llega de verdad al borde: antes se comía el margen
	   del contenedor pero seguía presa del de la sección. */
	.pango-section { padding-left: var(--pango-margen) !important; padding-right: var(--pango-margen) !important; }

	.pango-esc__caja {
		margin-left: calc(var(--pango-margen) * -1);
		margin-right: calc(var(--pango-margen) * -1);
	}
	.pango-esc__carta { width: min(560px, 92vw); }
}

.pango-esc__baraja.pango-esc--agarrando { cursor: grabbing; }
.pango-esc__baraja.pango-esc--agarrando .pango-esc__carta { transition: none; }


/* La ruta de navegación de la cabecera de servicio. Antes era una flecha con
   una palabra; ahora dice de dónde cuelga la página, que es lo que entiende
   tanto quien lee como el buscador. */
.pango_service_hero__ruta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 14px; color: var(--pango-tinta-media, #4A463F); margin: 0 0 4px; }
.pango_service_hero__ruta a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.pango_service_hero__ruta a:hover { color: var(--pango-acento, #F73600); }
.pango_service_hero__ruta span[aria-hidden] { opacity: .45; }
.pango_service_hero__ruta em { font-style: normal; color: var(--pango-tinta, #1C1B1A); font-weight: 600; }


/* Las manchas del hero se mueven hacia dentro. La animación compartida las
   empujaba hacia fuera y volvían a asomar por el borde, que es lo que dejaba el
   corte recto de la esquina. */
@keyframes pgblob-dentro-alto {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-14px, 18px) scale(1.06); }
}
@keyframes pgblob-dentro-pie {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(14px, -18px) scale(1.06); }
}

/* ==========================================================================
   pango_agentes — las tarjetas de agente de la landing de MCPs
   ========================================================================== */

.pango-agentes__cabecera { margin-bottom: 28px; }
.pango-agentes__cabecera p { margin: 10px 0 0; max-width: 72ch; font-size: 18px;
	line-height: 1.6; color: var(--pango-muted, #4A463F); }

.pango-agentes__rejilla { display: grid; gap: 22px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.pango-agente { display: flex; flex-direction: column; overflow: hidden;
	background: var(--pango-papel-alto, #F7F6F3);
	border: 1px solid var(--pango-linea, rgba(28,27,26,.12));
	border-radius: var(--pango-radio, 18px);
	/* El color de la familia entra por el filete de arriba, no por el fondo:
	   son colores claros y no llegan al contraste que pide el texto. */
	border-top: 3px solid var(--pango-agente, #8F9AFF);
	transition: transform .4s cubic-bezier(.32,.72,0,1), box-shadow .4s cubic-bezier(.32,.72,0,1); }
.pango-agente:hover { transform: translateY(-4px);
	box-shadow: 0 24px 48px -28px rgba(28,27,26,.42); }

.pango-agente__figura { aspect-ratio: 16 / 10; overflow: hidden;
	background: color-mix(in srgb, var(--pango-agente, #8F9AFF) 14%, #FFFFFF); }
.pango-agente__figura img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Mientras no haya ilustración, un hueco con el color de la familia y no un
   marco roto. */
.pango-agente__figura--vacia { aspect-ratio: 16 / 4; }

.pango-agente__cuerpo { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.pango-agente__nombre { margin: 0; font-family: var(--pango-font-display, 'Archivo', sans-serif);
	font-weight: 700; font-size: 20px; line-height: 1.2; }
.pango-agente__resumen { margin: 0; font-size: 16px; line-height: 1.55; color: var(--pango-muted, #4A463F); }
.pango-agente__hace { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pango-agente__hace li { position: relative; padding-left: 20px; font-size: 15px;
	line-height: 1.5; color: var(--pango-muted, #4A463F); }
.pango-agente__hace li::before { content: ''; position: absolute; left: 0; top: .55em;
	width: 8px; height: 2px; background: var(--pango-agente, #8F9AFF); }

@media (prefers-reduced-motion: reduce) {
	.pango-agente { transition: none; }
	.pango-agente:hover { transform: none; }
}

/* ==========================================================================
   Aire entre palabras en la tipografía de titulares
   ==========================================================================
   Archivo se usa en los titulares con el tracking muy cerrado —hasta -0.045em
   en el hero— para que la masa de letra quede compacta. El efecto secundario es
   que el espacio entre palabras encoge igual que el espacio entre letras, y en
   mayúsculas y a sesenta píxeles las palabras se pegan: «SOMOS UN ESTUDIO» se
   lee de un tirón.
   Se compensa solo donde duele, con word-spacing, que toca únicamente los
   espacios y deja el tracking como está. No se toca el letter-spacing porque
   ahí está el carácter de la tipografía. */
h1, h2, h3,
.pango_titular, .pango_acento,
.pango_hero__titular,
.pango_service_hero__titular,
.pango_contacto_hero__titular,
.pango_eshow__titular,
.pango_fullcommerce__titular,
.pango-section__title,
.pango-article .pango-article-title,
.pango-archive-head h1,
.pango-center h1,
.pango_manifiesto__antetitulo,
.pango-medida__titular,
.pango_servicio_ficha__titular,
.pango-esc__titulo,
.pango-video__titulo,
.pango-lead__titulo,
.pango-pr-titular,
.pango-temas .pango-temas__h {
	word-spacing: 0.08em;
}
/* Los titulares más grandes son los que peor lo llevan: a sesenta y seis
   píxeles el tracking cerrado se come casi un cuarto del espacio. */
.pango_titular, .pango_acento,
.pango_hero__titular,
.pango-center h1 {
	word-spacing: 0.12em;
}

/* ==========================================================================
   Que nada se salga por la derecha en un móvil
   ==========================================================================
   Tres cosas que se salían de la pantalla en un teléfono, las tres del mismo
   tipo: algo que no cabe y no tiene permiso para partirse.

   1) Los titulares. A 400 px el titular de servicio se quedaba en 38 px y una
      palabra como AUTOMATIZACIONES medía más que la pantalla. Se arregla
      bajando el tamaño en pantallas pequeñas, no partiendo la palabra: se
      probó con hyphens y el navegador silabeaba también los nombres propios,
      que salían como SHO-PIFY. Un titular de marca no se parte. overflow-wrap
      se queda de última red, pero con el tamaño corregido ya no le toca actuar.
   2) Los botones. Un botón con una frase entera dentro no cabe en una línea;
      se le deja envolver y se le pone un tope de ancho.
   3) Las preguntas del acordeón, por lo mismo. */
.pango_titular, .pango_acento,
.pango_hero__titular,
.pango_service_hero__titular,
.pango_contacto_hero__titular,
.pango_eshow__titular,
.pango_fullcommerce__titular,
.pango-section__title,
.pango-esc__titulo,
.pango-medida__titular,
.pango-faq__q,
.pango-card__title {
	overflow-wrap: break-word;
}
@media (max-width: 639px) {
	/* El botón deja de ser una línea intocable: envuelve, se centra y no pasa
	   del ancho disponible. */
	.pango_boton {
		max-width: 100%;
		white-space: normal;
		line-height: 1.25;
		text-align: center;
	}
	/* Y el acordeón respira por arriba y por abajo, que iba pegado a lo de
	   antes y a lo de después. */
	.pango-faq { margin: 12px 0 32px; }
	/* El titular de servicio, a la medida de la pantalla. El mínimo de 38 px
	   venía de escritorio y en un móvil estrecho no deja caber a la palabra
	   más larga; con 8.2vw el titular se ajusta al ancho que hay y la palabra
	   entra entera. */
	.pango_service_hero__titular { font-size: clamp(28px, 8.2vw, 38px); }
}

/* ==========================================================================
   pango-catalogo — todo lo que hacemos, en una página
   ==========================================================================
   Una familia por bloque y sus grupos en columnas. La jerarquía se lee por el
   tamaño y por el aire, no por cajas: son cuarenta y tantos enlaces y meter
   cada uno en su tarjeta convertiría la página en un muro de rectángulos. */
.pango-catalogo { max-width: var(--pango-ancho); margin: 0 auto; padding: 8px var(--pango-margen) 64px; }
.pango-catalogo__cabecera { max-width: 760px; margin: 0 0 40px; }
.pango-catalogo__cabecera p { color: var(--pango-tinta-suave, #4A463F); font-size: 18px; line-height: 1.6; margin: 10px 0 0; }

.pango-catalogo__familia { padding: 34px 0; border-top: 1px solid var(--pango-linea, #DCD8D1); }
.pango-catalogo__familia:first-of-type { border-top: none; padding-top: 0; }
.pango-catalogo__familia-titulo {
	font-family: 'Archivo', sans-serif; font-weight: 900; text-transform: uppercase;
	font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -0.02em; line-height: 1.1;
	margin: 0 0 26px;
}
.pango-catalogo__familia-titulo a { color: inherit; text-decoration: none; }
.pango-catalogo__familia-titulo a:hover { color: var(--pango-acento, #F73600); }

.pango-catalogo__grupos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 40px; }
.pango-catalogo__grupo h4 {
	font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; letter-spacing: -0.01em;
	margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--pango-linea, #DCD8D1);
}
.pango-catalogo__grupo h4 a { color: var(--pango-tinta, #1C1B1A); text-decoration: none; }
.pango-catalogo__grupo h4 a:hover { color: var(--pango-acento, #F73600); }
.pango-catalogo__grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pango-catalogo__grupo li a {
	display: block; padding: 5px 0; font-size: 15px; line-height: 1.4;
	color: var(--pango-tinta-suave, #4A463F); text-decoration: none;
}
.pango-catalogo__grupo li a:hover { color: var(--pango-acento, #F73600); }

@media (max-width: 1023px) { .pango-catalogo__grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .pango-catalogo__grupos { grid-template-columns: 1fr; gap: 24px; } }

/* ==========================================================================
   pango-migra3d — las plataformas girando hacia Shopify
   ==========================================================================
   Un anillo de verdad: escena con perspectiva, contenedor con preserve-3d y
   cada ficha colocada con un giro sobre el eje vertical y un empujón hacia el
   espectador.

   Dos cosas que hubo que resolver y que no son evidentes:

   · **El texto al revés.** Al girar el anillo, las fichas de detrás quedan de
     espaldas y su contenido se lee en espejo. Se arregla contragirando lo de
     dentro: el anillo gira 360 grados y el contenido de cada ficha gira 360 en
     sentido contrario, con la misma duración y el mismo ritmo, así que siempre
     mira al frente. Empieza en -a, que es el ángulo al que está colocada.

   · **Shopify tapando todo.** Estaba fuera del espacio 3D y con z-index, así
     que siempre quedaba delante y rompía la ilusión. Ahora vive dentro de la
     misma escena en profundidad cero, de modo que las fichas que pasan por
     delante le pasan por delante de verdad. */
.pango-migra3d {
	background: var(--pango-tinta);
	color: var(--pango-papel-alto);
	padding: clamp(36px, 4vw, 56px) 0 clamp(36px, 4.5vw, 60px);
	overflow: hidden;
}
.pango-migra3d__cabecera { max-width: 720px; margin: 0 0 clamp(12px, 2vw, 22px); }
.pango-migra3d__titulo { color: var(--pango-papel-alto); margin: 0 0 10px; }
.pango-migra3d__entrada { color: #B9B4AC; font-size: 17px; line-height: 1.55; margin: 0; }

.pango-migra3d__escena {
	position: relative;
	height: clamp(210px, 24vw, 280px);
	perspective: 1100px;
	perspective-origin: 50% 50%;
	transform-style: preserve-3d;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
}
.pango-migra3d__anillo {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	animation: pango-migra3d-gira 34s linear infinite;
}
@keyframes pango-migra3d-gira {
	from { transform: rotateX(-6deg) rotateY(0deg); }
	to   { transform: rotateX(-6deg) rotateY(360deg); }
}
.pango-migra3d__ficha {
	position: absolute;
	left: 50%; top: 50%;
	width: 132px; height: 132px;
	margin: -66px 0 0 -66px;
	transform: rotateY(var(--a)) translateZ(clamp(210px, 25vw, 290px));
	transform-style: preserve-3d;
}
/* Lo de dentro contragira para que nunca se lea en espejo. */
.pango-migra3d__cara {
	width: 100%; height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
	border: 1px solid rgba(250, 246, 240, 0.16);
	border-radius: 18px;
	background: rgba(250, 246, 240, 0.05);
	animation: pango-migra3d-contra 34s linear infinite;
}
@keyframes pango-migra3d-contra {
	from { transform: rotateY(calc(var(--a) * -1)); }
	to   { transform: rotateY(calc(var(--a) * -1 - 360deg)); }
}
.pango-migra3d__logo { width: 38px; height: 38px; fill: var(--marca, #F3F2EF); display: block; }
.pango-migra3d__nombre {
	font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 12px;
	letter-spacing: 0.04em; text-transform: uppercase; color: var(--pango-papel-alto);
	text-align: center; padding: 0 8px;
}

/* El destino, dentro de la escena y a profundidad cero. */
.pango-migra3d__destino {
	position: absolute;
	left: 50%; top: 50%;
	width: 148px;
	margin: -62px 0 0 -74px;
	transform: translateZ(0);
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 20px 22px;
	border-radius: 20px;
	background: var(--pango-papel-alto);
	box-shadow: 0 24px 56px -18px rgba(0, 0, 0, .8);
}
.pango-migra3d__logo--destino { width: 44px; height: 44px; fill: #7AB55C; }
.pango-migra3d__destino span {
	font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 14px;
	letter-spacing: 0.04em; text-transform: uppercase; color: var(--pango-tinta);
}
.pango-migra3d__pie { margin: clamp(12px, 2vw, 22px) 0 0; color: #8A857B; font-size: 15px; }

@media (max-width: 639px) {
	.pango-migra3d__ficha { width: 108px; height: 108px; margin: -54px 0 0 -54px; }
	.pango-migra3d__cara { border-radius: 14px; gap: 7px; }
	.pango-migra3d__logo { width: 28px; height: 28px; }
	.pango-migra3d__nombre { font-size: 10px; }
	.pango-migra3d__destino { width: 124px; margin: -52px 0 0 -62px; padding: 15px 16px; }
	.pango-migra3d__logo--destino { width: 34px; height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
	.pango-migra3d__anillo { animation: none; transform: rotateX(-6deg) rotateY(-18deg); }
	.pango-migra3d__cara { animation: none; transform: rotateY(calc(var(--a) * -1 + 18deg)); }
}

/* ==========================================================================
   pango-ck — el aviso de cookies
   ==========================================================================
   Aceptar y rechazar están en el mismo sitio, al mismo nivel y a un clic. El de
   aceptar lleva el color de marca y el de rechazar el borde: eso está permitido
   —lo que no se puede es esconder el rechazo detrás de otra pantalla o hacerlo
   menos accesible— y es lo que pidió Fausto. Mismo tamaño, misma tipografía y
   misma altura de toque en los dos. */
.pango-ck {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
	background: var(--pango-papel-alto, #F7F6F3);
	border-top: 1px solid var(--pango-linea, #DCD8D1);
	box-shadow: 0 -18px 50px -24px rgba(0, 0, 0, .35);
	color: var(--pango-tinta, #1C1B1A);
	font-size: 15px; line-height: 1.55;
}
.pango-ck__caja {
	max-width: var(--pango-ancho, 1280px); margin: 0 auto;
	padding: 20px var(--pango-margen, 40px);
	display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.pango-ck__decir { flex: 1 1 420px; min-width: 0; }
.pango-ck__titulo {
	font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 17px;
	letter-spacing: .02em; text-transform: uppercase; margin: 0 0 6px;
}
.pango-ck__texto { margin: 0; max-width: 78ch; color: var(--pango-tinta-media, #4A463F); }
.pango-ck__texto a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.pango-ck__botones { display: flex; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; }
.pango-ck__btn {
	font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 14px;
	letter-spacing: .02em; padding: 13px 22px; min-height: 46px;
	border-radius: 999px; border: 1.5px solid var(--pango-tinta, #1C1B1A);
	background: transparent; color: var(--pango-tinta, #1C1B1A); cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pango-ck__btn--si {
	background: var(--pango-acento, #F73600); border-color: var(--pango-acento, #F73600);
	color: #FFFFFF;
}
.pango-ck__btn--si:hover { filter: brightness(1.08); }
.pango-ck__btn--no:hover { background: var(--pango-tinta, #1C1B1A); color: var(--pango-papel-alto, #F7F6F3); }
.pango-ck__btn--mas { border-color: transparent; text-decoration: underline; text-underline-offset: 4px; padding-inline: 10px; }
.pango-ck__btn:focus-visible { outline: 3px solid var(--pango-acento, #F73600); outline-offset: 3px; }

/* El panel se abre y se cierra con el atributo `hidden`, y `display: grid` le
   gana al `display: none` que trae el navegador para ese atributo. Sin esta
   línea el panel de ajustes sale siempre desplegado. */
.pango-ck [hidden] { display: none; }

.pango-ck__panel {
	max-width: var(--pango-ancho, 1280px); margin: 0 auto;
	padding: 4px var(--pango-margen, 40px) 22px;
	border-top: 1px solid var(--pango-linea, #DCD8D1);
	display: grid; gap: 16px; max-height: 52vh; overflow-y: auto;
}
.pango-ck__cat { display: grid; gap: 4px; }
.pango-ck__cat-cab { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 700; }
.pango-ck__cat-cab input { width: 18px; height: 18px; accent-color: var(--pango-acento, #F73600); }
.pango-ck__cat-cab small { font-weight: 500; color: var(--pango-tinta-suave, #6B655C); }
.pango-ck__cat p { margin: 0 0 0 28px; color: var(--pango-tinta-media, #4A463F); font-size: 14px; }
.pango-ck__panel-pie { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 4px; }
.pango-ck__panel-pie a { color: var(--pango-tinta-media, #4A463F); font-size: 14px; }

@media (max-width: 639px) {
	.pango-ck__caja { padding: 16px var(--pango-margen, 20px); gap: 14px; }
	.pango-ck__botones { width: 100%; }
	.pango-ck__btn { flex: 1 1 auto; }
	.pango-ck__btn--mas { flex-basis: 100%; }
	.pango-ck__panel { padding: 4px var(--pango-margen, 20px) 18px; max-height: 60vh; }
}

/* ─────────────────────────────────────────────────────────────
   El aviso de reCAPTCHA que sustituye a la pastilla flotante.
   Google deja taparla a cambio de este texto junto al formulario, así que
   discreto sí, escondido no: mismo cuerpo que una nota al pie y con los
   enlaces subrayados.
   ───────────────────────────────────────────────────────────── */
.pango-recaptcha-aviso {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--pango-tinta-suave, #6B655C);
}
.pango-recaptcha-aviso a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ─────────────────────────────────────────────────────────────
   pango-ejemplo — un texto para llevarse
   ─────────────────────────────────────────────────────────────
   Quien llega a una página de textos legales de ejemplo no viene a leer:
   viene a copiar. Por eso el botón está arriba, a la vista, y el texto va
   sobre papel y con el mismo cuerpo que el resto, no en el negro de los
   bloques de código. Lo único que se hereda del <pre> es respetar los saltos
   de línea, que en un texto legal son la estructura. */
.pango-ejemplo {
	border: 1px solid var(--pango-linea, #DCD8D1);
	border-radius: 14px;
	background: var(--pango-papel-alto, #F7F6F3);
	padding: 20px 22px 22px;
	margin: 0 0 28px;
}
.pango-ejemplo__cab {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; margin: 0 0 10px;
}
.pango-ejemplo__titulo {
	font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 17px;
	line-height: 1.25; margin: 0;
}
.pango-ejemplo__copiar {
	flex: none;
	font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 13px;
	letter-spacing: .02em;
	padding: 8px 16px; min-height: 36px;
	border-radius: 999px; border: 1.5px solid var(--pango-tinta, #1C1B1A);
	background: transparent; color: var(--pango-tinta, #1C1B1A); cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.pango-ejemplo__copiar:hover { background: var(--pango-tinta, #1C1B1A); color: var(--pango-papel-alto, #F7F6F3); }
.pango-ejemplo__copiar[data-hecho] { background: var(--pango-acento, #F73600); border-color: var(--pango-acento, #F73600); color: #FFFFFF; }
.pango-ejemplo__copiar:focus-visible { outline: 3px solid var(--pango-acento, #F73600); outline-offset: 3px; }
.pango-ejemplo__nota { margin: 0 0 12px; font-size: 14px; color: var(--pango-tinta-suave, #6B655C); }
.pango-ejemplo__texto {
	white-space: pre-wrap;
	font-size: 15px; line-height: 1.6;
	color: var(--pango-tinta-media, #4A463F);
	max-height: 420px; overflow-y: auto;
	border-top: 1px solid var(--pango-linea, #DCD8D1);
	padding-top: 14px;
}
@media (max-width: 639px) {
	.pango-ejemplo { padding: 16px 16px 18px; }
	.pango-ejemplo__cab { flex-wrap: wrap; }
}