/* ============================================================
   Pango Studio 2026 — Sistema de diseño (tokens + contenido)
   Tokens de marca + estilos base para que CUALQUIER página o
   entrada del editor herede el diseño (blog, landings, legales).
   Regla del proyecto: tamaños de texto enteros y pares.
   ============================================================ */

:root {
	/* Marca */
	--pango-coral:   #F73600;
	--pango-shopify: #8BCC60;
	--pango-migra:   #FAC346;
	--pango-apps:    #63D0C9;
	--pango-techlab: #8F9AFF;
	--pango-seoia:   #D063FA;

	/* Neutros / fondos */
	--pango-bg:      #F3F2EF;
	--pango-bg-2:    #F7F6F3;
	--pango-ink:     #1C1B1A;
	--pango-muted:   #4A463F;
	--pango-faint:   #8A857B;
	--pango-line:    rgba(28,27,26,0.12);

	/* Tipografía */
	--pango-font-display: 'Archivo', system-ui, sans-serif;
	--pango-font-body:    'Space Grotesk', system-ui, sans-serif;

	/* Layout */
	--pango-max:     1280px;
	--pango-gutter:  clamp(20px, 5vw, 40px);
	--pango-radius:  18px;
}

/* ---------- Base ---------- */
body {
	background: var(--pango-bg);
	color: var(--pango-ink);
	font-family: var(--pango-font-body);
	font-size: 18px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
::selection { background: var(--pango-coral); color: var(--pango-bg-2); }

/* Contenedor reutilizable */
.pango-container { max-width: var(--pango-max); margin: 0 auto; padding: 0 var(--pango-gutter); }

/* ---------- Botones ---------- */
.pango-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	background: var(--pango-coral); color: var(--pango-bg-2);
	font-family: var(--pango-font-display); font-weight: 700; font-size: 16px;
	padding: 14px 24px; border-radius: 999px; border: none; cursor: pointer;
	transition: transform .15s ease;
}
.pango-btn:hover { transform: translateY(-2px); }

/* ============================================================
   Estilos de contenido (.entry-content): aplican a páginas y
   entradas escritas en el editor → todo sale on-brand.
   ============================================================ */
.entry-content { font-size: 18px; line-height: 1.7; color: var(--pango-ink); }
.entry-content > * + * { margin-top: 20px; }

.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
	font-family: var(--pango-font-display);
	font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
	color: var(--pango-ink); margin-top: 44px;
}
.entry-content h1 { font-size: 40px; }
.entry-content h2 { font-size: 32px; }
.entry-content h3 { font-size: 24px; }
.entry-content h4 { font-size: 20px; }
.entry-content h5, .entry-content h6 { font-size: 18px; }

.entry-content a { color: var(--pango-coral); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { text-decoration: none; }
/* Un botón dentro del contenido es un botón, no un enlace de texto: el estilo de
   enlace le ponía la letra en coral sobre fondo coral y el botón salía en blanco,
   como una pastilla naranja vacía. Pasaba en todas las landings. */
.entry-content a.pango-btn { color: var(--pango-bg-2); text-decoration: none; }
.entry-content a.pango-btn--primary { background: var(--pango-coral); }
.entry-content a.pango-btn--ghost {
	background: transparent; color: var(--pango-ink); border: 2px solid var(--pango-ink);
}

.entry-content ul, .entry-content ol { padding-left: 24px; }
.entry-content li + li { margin-top: 8px; }
.entry-content li::marker { color: var(--pango-coral); }

.entry-content blockquote {
	border-left: 4px solid var(--pango-coral);
	padding: 6px 0 6px 22px; margin-left: 0; color: var(--pango-muted);
	font-size: 22px; line-height: 1.5;
}

.entry-content img, .entry-content figure { border-radius: var(--pango-radius); }
.entry-content figure figcaption { font-size: 14px; color: var(--pango-faint); margin-top: 8px; }

.entry-content code {
	font-family: var(--pango-font-body); font-variant-numeric: tabular-nums; font-size: 15px;
	background: var(--pango-bg-2); border: 1px solid var(--pango-line);
	padding: 2px 6px; border-radius: 6px;
}
.entry-content pre {
	background: var(--pango-ink); color: var(--pango-bg-2);
	font-family: var(--pango-font-body); font-variant-numeric: tabular-nums;
	padding: 20px 22px; border-radius: 14px; overflow-x: auto; font-size: 15px; line-height: 1.55;
}
.entry-content pre code { background: none; border: none; color: inherit; padding: 0; }

.entry-content table { width: 100%; border-collapse: collapse; font-size: 16px; display: block; overflow-x: auto; }
.entry-content th, .entry-content td { border: 1px solid var(--pango-line); padding: 12px 14px; text-align: left; }
.entry-content th { background: var(--pango-bg-2); font-weight: 700; }

.entry-content hr { border: none; border-top: 1px solid var(--pango-line); margin: 40px 0; }

/* ---------- Layout de artículo (single / page genérica) ---------- */
.pango-article { max-width: 760px; margin: 0 auto; padding: 56px var(--pango-gutter) 80px; }
/* En una pantalla de escritorio la columna se ensancha un poco: 760 px dejaban
   680 de texto, que en un monitor ancho se ven estrechos con tanto papel al
   lado. Con 880 la línea pasa a 800 px, que sigue estando en el rango en el que
   el ojo no se pierde al saltar de renglón. Por debajo de 1200 no cambia nada:
   en móvil y tableta el ancho lo manda la pantalla, no esto. */
@media (min-width: 1200px) {
	.pango-article { max-width: 880px; }
}
.pango-article .pango-article-title {
	font-family: var(--pango-font-display); font-weight: 900; letter-spacing: -0.03em;
	font-size: clamp(32px, 5vw, 56px); line-height: 1.02; margin: 0 0 18px; text-transform: none;
}
.pango-article .pango-article-meta { color: var(--pango-faint); font-size: 14px; margin-bottom: 28px; }
.pango-article .pango-article-cover { border-radius: 24px; margin-bottom: 32px; width: 100%; }

/* ---------- Firma de autor (plugin Pango Authors) ----------
   El plugin define sus colores como variables sobre .pango-author, así que
   basta con reasignarlas a los tokens del theme: ni se toca el plugin ni se
   duplican estilos. Selector con `body` delante porque el CSS del plugin se
   encola tarde (durante the_content) y si no ganaría por orden. */
body .pango-author {
	--pa-bg: var(--pango-bg-2);
	--pa-fg: var(--pango-ink);
	--pa-muted: var(--pango-muted);
	--pa-accent: var(--pango-coral);
	--pa-accent-soft: rgba(247,54,0, 0.08);
	--pa-border: var(--pango-line);
	--pa-seal: #A6894A;
	border-radius: var(--pango-radius);
}
body .pango-author .pango-author__name {
	font-family: var(--pango-font-display); font-weight: 800; letter-spacing: -0.01em;
}
body .pango-author .pango-author__kicker {
	letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
}

/* ---------- Barra fija inferior (sticky) ----------
   position:fixed => fuera del flujo, no puede provocar CLS.
   Sale del HTML ya presente y solo se traslada: no se inserta nada tras cargar. */
/* z-index 8900: por encima del contenido pero POR DEBAJO del botón de WhatsApp
   (Joinchat usa 9000), que tiene que quedar siempre delante de la barra. */
.pango-sticky {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 8900;
	background: var(--pango-ink); color: var(--pango-bg-2);
	transform: translateY(110%); opacity: 0;
	transition: transform .28s cubic-bezier(.2,.8,.3,1), opacity .28s ease;
	will-change: transform;
}
.pango-sticky.is-visible { transform: translateY(0); opacity: 1; }
.pango-sticky .pango-sticky__inner {
	max-width: var(--pango-max); margin: 0 auto;
	padding: 12px var(--pango-gutter);
	display: flex; align-items: center; gap: 18px;
}
.pango-sticky .pango-sticky__text {
	margin: 0; font-size: 16px; line-height: 1.3; flex: 1; min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pango-sticky .pango-sticky__cta {
	flex: none; display: inline-flex; align-items: center; justify-content: center;
	background: var(--pango-coral); color: var(--pango-bg-2);
	font-family: var(--pango-font-display); font-weight: 700; font-size: 15px;
	padding: 11px 22px; border-radius: 999px; white-space: nowrap;
	transition: transform .15s ease;
}
.pango-sticky .pango-sticky__cta:hover { transform: translateY(-2px); }
.pango-sticky .pango-sticky__close {
	flex: none; background: none; border: 0; cursor: pointer;
	color: var(--pango-bg-2); opacity: .6; font-size: 26px; line-height: 1;
	width: 40px; height: 40px; border-radius: 50%;
}
.pango-sticky .pango-sticky__close:hover { opacity: 1; }
.pango-sticky .pango-sticky__close:focus-visible,
.pango-sticky .pango-sticky__cta:focus-visible { outline: 2px solid var(--pango-bg-2); outline-offset: 2px; }

/* Móvil: barra baja y sin texto largo. Un banner que come pantalla es un
   intersticial intrusivo a ojos de Google; uno discreto no. */
@media (max-width: 519px) {
	/* El hueco de la derecha es para el botón de WhatsApp, que se apoya en la
	   esquina: sin él, la X de cerrar quedaría debajo de la burbuja. */
	.pango-sticky .pango-sticky__inner { padding: 9px 76px 9px 16px; gap: 10px; }
	.pango-sticky .pango-sticky__text { display: none; }
	.pango-sticky .pango-sticky__cta { flex: 1; font-size: 15px; padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.pango-sticky { transition: none; }
	.pango-sticky .pango-sticky__cta:hover { transform: none; }
}

/* ---------- Franja de financiación pública (obligatoria, bajo el footer) ---------- */
/* La franja de la subvención va en blanco, no en el papel de la marca: son los
   logos oficiales de la Unión Europea y del Gobierno, que vienen con su propio
   fondo blanco, y sobre el crema se les veía el recuadro. Y el texto va
   centrado, como la propia fila de logos. */
.pango-subvencion { background: #FFFFFF; border-top: 1px solid var(--pango-line); padding: 32px 0 36px; }
.pango-subvencion p { font-size: 13px; line-height: 1.55; color: var(--pango-muted); margin: 0 auto 24px; max-width: 1000px; text-align: center; }
.pango-subvencion p strong { color: var(--pango-ink); }
.pango-subvencion .pango-subvencion-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 40px; }
.pango-subvencion .pango-subvencion-logos img { width: auto; height: 46px; object-fit: contain; }
@media (max-width: 519px) { .pango-subvencion .pango-subvencion-logos { gap: 20px 26px; } .pango-subvencion .pango-subvencion-logos img { height: 34px; } }

/* ---------- Enlazado interno de las entradas ---------- */
.pango-breadcrumbs { font-size: 13px; color: var(--pango-faint); margin-bottom: 18px; }
.pango-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.pango-breadcrumbs li + li::before { content: "›"; margin-right: 8px; color: var(--pango-line); }
.pango-breadcrumbs a:hover { color: var(--pango-coral); }
.pango-breadcrumbs li:last-child span { color: var(--pango-muted); }

.pango-toc { background: var(--pango-bg-2); border: 1px solid var(--pango-line); border-radius: var(--pango-radius); padding: 24px 28px; margin: 0 0 36px; }
.pango-toc .pango-toc-head { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pango-coral); margin-bottom: 14px; }
.pango-toc ol { margin: 0; padding-left: 20px; font-size: 16px; }
.pango-toc li + li { margin-top: 8px; }
.pango-toc li::marker { color: var(--pango-faint); }
.pango-toc a { text-decoration: none; }
.entry-content h2[id] { scroll-margin-top: 96px; }
.pango-toc a:hover { color: var(--pango-coral); text-decoration: underline; text-underline-offset: 3px; }

.pango-service-note { border: 1px solid var(--pango-line); border-left: 4px solid var(--pango-note, var(--pango-coral)); background: var(--pango-bg-2); border-radius: var(--pango-radius); padding: 30px 32px; margin: 48px 0 0; }
.pango-service-note .pango-service-note-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pango-note, var(--pango-coral)); margin-bottom: 12px; }
.pango-service-note h2 { font-family: var(--pango-font-display); font-weight: 800; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 10px; }
.pango-service-note p { font-size: 17px; line-height: 1.55; color: var(--pango-muted); margin: 0 0 18px; }
.pango-service-note .pango-service-note-cta { display: inline-flex; align-items: center; background: var(--pango-coral); color: var(--pango-bg-2); font-family: var(--pango-font-display); font-weight: 700; font-size: 15px; padding: 12px 22px; border-radius: 999px; }
.pango-service-note .pango-service-note-cta:hover { opacity: 0.9; }

.pango-next { margin-top: 56px; border-top: 1px solid var(--pango-line); padding-top: 36px; }
.pango-next .pango-next-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.pango-next .pango-next-head h2 { font-family: var(--pango-font-display); font-weight: 900; font-size: 26px; letter-spacing: -0.02em; margin: 0; text-transform: uppercase; }
.pango-next .pango-next-all { font-size: 15px; font-weight: 600; color: var(--pango-coral); }
.pango-next .pango-next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pango-next .pango-next-card img, .pango-next .pango-next-ph { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 14px; background: var(--pango-ink); }
.pango-next .pango-next-card h3 { font-family: var(--pango-font-display); font-weight: 700; font-size: 17px; line-height: 1.25; margin: 12px 0 0; }
.pango-next .pango-next-card a:hover { color: var(--pango-coral); }

/* ---------- Archivos / listados de blog ---------- */
.pango-archive-head { padding: 72px var(--pango-gutter) 20px; max-width: var(--pango-max); margin: 0 auto; }
.pango-archive-head h1 { font-family: var(--pango-font-display); font-weight: 900; font-size: clamp(32px,5vw,56px); letter-spacing: -0.03em; margin: 0; }
.pango-archive-head__entrada { color: var(--pango-muted); font-size: 18px; line-height: 1.6; margin: 10px 0 0; max-width: 760px; }
.pango-grid { max-width: var(--pango-max); margin: 0 auto; padding: 24px var(--pango-gutter) 72px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Las cuatro landings de migración escriben .pango-grid--2 y .pango-grid--3, y
   esos modificadores no existían en ninguna hoja: la rejilla se quedaba en tres
   columnas, así que con dos tarjetas dejaba un hueco a la derecha y las dos se
   veían estrechas sin motivo. */
.pango-grid.pango-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pango-grid.pango-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pango-grid.pango-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pango-card-post { background: var(--pango-bg-2); border: 1px solid var(--pango-line); border-radius: var(--pango-radius); overflow: hidden; display: flex; flex-direction: column; }
.pango-card-post img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.pango-card-post .pango-card-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.pango-card-post h2 { font-family: var(--pango-font-display); font-weight: 700; font-size: 20px; line-height: 1.2; margin: 0; }
.pango-card-post .pango-card-ex { font-size: 15px; color: var(--pango-muted); }

/* ---------- Panel «¿te echamos una mano?» (entradas) ----------
   position:fixed => fuera del flujo, no puede provocar CLS. Sale en el HTML
   desde el principio, oculto, y solo se traslada. z-index por debajo del
   pangolín (9998) y por encima de la barra fija (8900). */
.pango-ayuda {
	position: fixed; right: 0; bottom: 108px; z-index: 9000;
	width: 320px; max-width: calc(100vw - 32px);
	background: var(--pango-ink); color: var(--pango-bg-2);
	border-radius: 20px 0 0 20px;
	padding: 22px 24px 18px;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
	transform: translateX(calc(100% + 8px));
	transition: transform .45s cubic-bezier(.22,.9,.24,1);
	will-change: transform;
}
.pango-ayuda.is-visible { transform: translateX(0); }

.pango-ayuda .pango-ayuda__x {
	position: absolute; top: 10px; right: 12px;
	width: 26px; height: 26px; display: flex; align-items: center; justify-content: center;
	border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(251, 250, 246, 0.12); color: var(--pango-bg-2);
	font-size: 17px; line-height: 1;
}
.pango-ayuda .pango-ayuda__x:hover { background: var(--pango-coral); }

.pango-ayuda .pango-ayuda__claim {
	margin: 0 0 16px; padding-right: 22px;
	font-family: var(--pango-font-display); font-weight: 700;
	font-size: 17px; line-height: 1.32; letter-spacing: -0.01em;
}
.pango-ayuda .pango-ayuda__form { display: flex; flex-direction: column; gap: 9px; }
.pango-ayuda .pango-ayuda__form input[type="text"],
.pango-ayuda .pango-ayuda__form input[type="email"] {
	width: 100%; padding: 12px 14px; border-radius: 11px; font-size: 15px;
	border: 1px solid rgba(251, 250, 246, 0.22);
	background: rgba(251, 250, 246, 0.06); color: var(--pango-bg-2);
	outline: none;
}
.pango-ayuda .pango-ayuda__form input::placeholder { color: rgba(251, 250, 246, 0.5); }
.pango-ayuda .pango-ayuda__form input:focus { border-color: var(--pango-coral); }
.pango-ayuda .pango-ayuda__form button {
	margin-top: 2px; padding: 13px 16px; border: 0; border-radius: 11px; cursor: pointer;
	background: var(--pango-coral); color: var(--pango-bg-2);
	font-family: var(--pango-font-display); font-weight: 700; font-size: 15px;
}
.pango-ayuda .pango-ayuda__form button:hover { opacity: .92; }
.pango-ayuda .pango-ayuda__nota { display: none; font-size: 13px; line-height: 1.4; color: #FAC346; }
.pango-ayuda .pango-ayuda__pie { margin: 14px 0 0; font-size: 12px; color: rgba(251, 250, 246, 0.6); }
.pango-ayuda .pango-ayuda__pie a { color: var(--pango-coral); text-decoration: underline; }

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

/* ---------- Temas del blog (rejilla de categorías) ---------- */
.pango-temas { max-width: var(--pango-max); margin: 0 auto; padding: 8px var(--pango-gutter) 8px; }
.pango-temas .pango-temas__h {
	font-family: var(--pango-font-display); font-weight: 900; font-size: clamp(22px, 2.6vw, 30px);
	letter-spacing: -0.02em; text-transform: uppercase; margin: 0 0 4px;
}
/* Los temas eran tarjetas redondeadas con un filete de color a la izquierda, un
   color distinto por categoría. El color no decía nada —era un color por slug,
   no por nada que importe— y esa combinación de caja con rail de color es la que
   hace que una web parezca salida de una plantilla. Ahora son filas: una línea
   fina arriba, el número, el nombre en la tipografía de titulares y la
   descripción debajo. La misma lengua que el resto del sitio. */
.pango-temas .pango-temas__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 40px; }
.pango-temas .pango-tema {
	display: flex; flex-direction: column; gap: 5px;
	padding: 18px 0 22px; border-top: 1px solid var(--pango-line);
	text-decoration: none; transition: border-color .15s ease;
}
.pango-temas .pango-tema:hover { border-top-color: var(--pango-ink); }
.pango-temas .pango-tema__n {
	font-family: var(--pango-font-display); font-weight: 900; font-size: 12px;
	letter-spacing: 0.08em; color: var(--pango-faint); font-variant-numeric: tabular-nums;
}
.pango-temas .pango-tema__t {
	font-family: var(--pango-font-display); font-weight: 800; font-size: 19px;
	line-height: 1.15; letter-spacing: -0.01em; color: var(--pango-ink);
	text-decoration: none; transition: color .15s ease;
}
.pango-temas .pango-tema:hover .pango-tema__t { color: var(--pango-coral); }
.pango-temas .pango-tema__d { font-size: 14px; line-height: 1.45; color: var(--pango-muted); text-decoration: none; }

@media (max-width: 1023px) { .pango-temas .pango-temas__grid { grid-template-columns: repeat(2, 1fr); gap: 0 32px; } }
@media (max-width: 519px)  { .pango-temas .pango-temas__grid { grid-template-columns: 1fr; } }

/* ---------- Paginación ---------- */
.pango-pagination { max-width: var(--pango-max); margin: 0 auto; padding: 0 var(--pango-gutter) 72px; display: flex; gap: 8px; flex-wrap: wrap; }
.pango-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px; border: 1px solid var(--pango-line); border-radius: 12px; font-weight: 600; }
.pango-pagination .page-numbers.current { background: var(--pango-coral); color: var(--pango-bg-2); border-color: var(--pango-coral); }

/* ---------- 404 / búsqueda ---------- */
.pango-center { min-height: 52vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px var(--pango-gutter); gap: 18px; }
.pango-center h1 { font-family: var(--pango-font-display); font-weight: 900; font-size: clamp(48px,10vw,120px); letter-spacing: -0.04em; margin: 0; color: var(--pango-coral); }

/* ---------- Responsive (móvil ≤519 / tablet 520–1023 / desktop ≥1024) ---------- */
@media (max-width: 1023px) { .pango-grid, .pango-grid.pango-grid--3, .pango-grid.pango-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 519px)  { .pango-grid, .pango-grid.pango-grid--2, .pango-grid.pango-grid--3, .pango-grid.pango-grid--4 { grid-template-columns: 1fr; } .entry-content h1 { font-size: 32px; } .entry-content h2 { font-size: 26px; } .pango-next .pango-next-grid { grid-template-columns: 1fr; } .pango-toc { padding: 20px 22px; } .pango-service-note { padding: 24px 22px; } }

/* ---------- Nav / footer responsive (móvil ≤519 / tablet 520–1023) ---------- */
@media (max-width: 519px) {
	header[data-pango-nav] .pango-nav-desktop { display: none !important; }
	header[data-pango-nav] .pango-nav-cta { display: none !important; }
	header[data-pango-nav] [data-mobile-toggle] { display: inline-flex !important; }
	header[data-pango-nav] [data-nav-row] { padding: 10px 16px !important; }
	header[data-pango-nav] a[data-nav-logo] img { height: 42px !important; }
	[data-nav-spacer] { height: 64px !important; }
	footer [data-foot-grid] { grid-template-columns: 1fr !important; gap: 22px !important; }
	.pango-modal-open [data-modal-card], [data-pango-modal] [data-modal-card] { grid-template-columns: 1fr !important; }
	[data-pango-modal] [data-modal-row] { grid-template-columns: 1fr !important; }
}
@media (min-width: 520px) and (max-width: 1023px) {
	header[data-pango-nav] [data-nav-row] { padding: 12px clamp(16px,3vw,28px) !important; }
	header[data-pango-nav] a[data-nav-logo] img { height: clamp(42px,5vw,54px) !important; }
	header[data-pango-nav] nav a { font-size: clamp(14px,1.6vw,16px) !important; }
	footer [data-foot-grid] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width: 1023px) {
	[data-pango-modal] [data-modal-card] { grid-template-columns: 1fr !important; }
}

/* ---------- Logo de la barra: llaves { } recolorables ----------
   Dos capas del mismo tamaño: el wordmark blanco como <img> y las llaves como
   máscara alfa encima. El color sale de --pango-llave, que la nav escribe
   inline según la sección (ver pango2026_llave_color en inc/components/nav.php),
   así que cambiar de color no cuesta un PNG nuevo: cuesta una variable. */
.pango-logo { position:relative; display:block; flex:none; line-height:0; }
.pango-logo img { height:44px; width:auto; display:block; }
.pango-logo .pango-logo__llave {
	position:absolute; inset:0;
	background-color: var(--pango-llave, #F73600);
	-webkit-mask: var(--pango-llave-img) center/contain no-repeat;
	        mask: var(--pango-llave-img) center/contain no-repeat;
	transition: background-color .3s ease;
}

/* ============================================================
   Piezas de página: secciones, rejilla de tarjetas y FAQ
   Las usan [pango_section], [pango_cards]/[pango_card] y [pango_faq], pero son
   clases sueltas: sirven igual escribiendo el HTML a mano en cualquier página.
   ============================================================ */
.pango-section__header { max-width: 760px; margin: 0 0 36px; }
.pango-section__title {
	font-family: var(--pango-font-display); font-weight: 900; text-transform: uppercase;
	font-size: clamp(28px, 3.6vw, 46px); line-height: 1.02; letter-spacing: -0.03em; margin: 0;
}
/* color: inherit + opacidad para que funcione igual sobre fondo claro y oscuro. */
.pango-section__desc { font-size: 18px; color: inherit; opacity: .72; margin: 14px 0 0; }

.pango-cards { display: grid; grid-template-columns: repeat(var(--pango-cards-cols, 3), 1fr); gap: 20px; }
.pango-card__icon {
	font-family: var(--pango-font-display); font-weight: 800; font-size: 13px;
	letter-spacing: 0.14em; color: var(--pango-coral); margin-bottom: 10px;
}
.pango-card__title { font-family: var(--pango-font-display); font-weight: 700; font-size: 20px; line-height: 1.2; }
.pango-card__text a { color: var(--pango-coral); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- De una plataforma a otra ([pango_migracion]) ---------- */
/* Dos paneles y el paso entre ellos. Todo el contraste vive en una variable por
   panel (--m, el color de la plataforma): el de origen la ignora y va en gris,
   el de destino la usa para el borde, el logotipo y el halo del fondo. */
.pango-migra {
	display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
	gap: clamp(10px, 1.6vw, 22px); margin: 8px 0 0;
}
.pango-migra__lado {
	position: relative; overflow: hidden;
	border-radius: var(--pango-radius);
	padding: clamp(20px, 2.6vw, 30px) clamp(18px, 2.2vw, 28px);
	display: flex; flex-direction: column; gap: 14px; justify-content: center; min-width: 0;
}
.pango-migra__lado--origen {
	background: var(--pango-bg-2); border: 1px solid var(--pango-line);
}
.pango-migra__lado--destino {
	background: #FFF; border: 2px solid var(--m);
}
/* El halo del destino: el color de la plataforma difuminado en la esquina. Es lo
   único que separa «a dónde vas» de «de dónde vienes» sin decirlo con palabras. */
.pango-migra__lado--destino::before {
	content: ''; position: absolute; inset: auto -20% -60% auto;
	width: 260px; height: 260px; border-radius: 50%;
	background: var(--m); opacity: .1; filter: blur(10px); pointer-events: none;
}
.pango-migra__etiqueta {
	font-family: var(--pango-font-display); font-weight: 700; font-size: 12px;
	letter-spacing: 0.12em; text-transform: uppercase; color: var(--pango-faint);
}
.pango-migra__lado--destino .pango-migra__etiqueta { color: var(--pango-muted); }
.pango-migra__id { position: relative; display: flex; align-items: center; gap: clamp(12px, 1.6vw, 18px); min-width: 0; }
/* El cuadro del logotipo: mismo tamaño en los dos lados aunque el trazo cambie. */
.pango-migra__logo {
	flex: none; width: clamp(44px, 5vw, 60px); height: clamp(44px, 5vw, 60px);
	border-radius: 14px; display: grid; place-items: center;
}
.pango-migra__logo svg { width: 60%; height: 60%; fill: currentColor; display: block; }
.pango-migra__logo img { width: 66%; height: 66%; object-fit: contain; display: block; }
/* Un logotipo ajeno traído por URL no se puede recolorear, así que el de origen
   se apaga con el filtro: el gris del panel manda sobre el color de la marca. */
.pango-migra__lado--origen .pango-migra__logo img { filter: grayscale(1); opacity: .75; }
.pango-migra__lado--origen .pango-migra__logo {
	background: rgba(28,27,26,0.05); color: var(--pango-faint);
}
.pango-migra__lado--destino .pango-migra__logo {
	background: color-mix(in srgb, var(--m) 14%, #FFF); color: var(--m);
}
/* Sin logotipo en la colección: la inicial, en la misma caja. */
.pango-migra__inicial {
	font-family: var(--pango-font-display); font-weight: 900;
	font-size: clamp(22px, 2.6vw, 30px); line-height: 1; color: inherit;
}
.pango-migra__marca {
	font-family: var(--pango-font-display); font-weight: 900;
	font-size: clamp(22px, 3vw, 38px); line-height: 1; letter-spacing: -0.03em;
	overflow-wrap: anywhere;
}
.pango-migra__lado--origen .pango-migra__marca { color: var(--pango-faint); }
/* El paso: una raya de guiones con la punta en coral. Sin imagen y sin iconos. */
.pango-migra__paso { display: flex; align-items: center; justify-content: center; }
.pango-migra__via {
	position: relative; display: block; width: clamp(30px, 4.5vw, 62px); height: 2px;
	background: repeating-linear-gradient(to right,
		var(--pango-line) 0 6px, transparent 6px 12px);
}
.pango-migra__via::after {
	content: ''; position: absolute; right: -2px; top: 50%; width: 12px; height: 12px;
	border-top: 2px solid var(--pango-coral); border-right: 2px solid var(--pango-coral);
	transform: translateY(-50%) rotate(45deg);
}
/* ---------- La carga: qué viaja en la migración ---------- */
/* Una vía con sus paradas. Cada parada es una palabra de verdad en una lista
   ordenada —se lee, se indexa y la canta un lector de pantalla—, y lo único
   decorativo es el movimiento, que se apaga si el sistema pide menos. */
.pango-migra__carril { position: relative; margin: 26px 0 0; padding: 26px 0 6px; }
.pango-migra__carril::before {
	content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
	background: repeating-linear-gradient(to right,
		var(--pango-line) 0 8px, transparent 8px 16px);
}
.pango-migra__carga {
	position: relative; display: flex; flex-wrap: wrap; gap: 10px 14px;
	list-style: none; margin: 0; padding: 0; counter-reset: carga;
}
.pango-migra__carga li {
	display: inline-flex; align-items: center; gap: 9px;
	background: #FFF; border: 1px solid var(--pango-line); border-radius: 999px;
	padding: 9px 17px 9px 13px;
	font-family: var(--pango-font-display); font-weight: 700; font-size: 14px;
	color: var(--pango-ink); white-space: nowrap;
	animation: pango-carga 5.2s ease-in-out infinite;
	animation-delay: calc(var(--i) * .45s);
}
/* El punto de cada parada, en el color del acento de la casa. */
.pango-migra__carga li::before {
	content: ''; width: 8px; height: 8px; border-radius: 50%;
	background: var(--pango-coral); flex: none;
}
@keyframes pango-carga {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(8px); }
}
@media (prefers-reduced-motion: reduce) {
	.pango-migra__carga li { animation: none; }
}
@media (max-width: 619px) {
	.pango-migra__carril { padding-top: 18px; }
	.pango-migra__carga li { font-size: 13px; padding: 8px 14px 8px 11px; }
}

.pango-migra__nota { font-size: 15px; color: var(--pango-muted); margin: 16px 0 0; }
@media (max-width: 619px) {
	.pango-migra { grid-template-columns: 1fr; }
	.pango-migra__via { width: 2px; height: 30px; margin: 4px auto;
		background: repeating-linear-gradient(to bottom,
			var(--pango-line) 0 6px, transparent 6px 12px); }
	.pango-migra__via::after { right: 50%; top: auto; bottom: -1px;
		transform: translateX(50%) rotate(135deg); }
}

/* ---------- Captación rápida ([pango_lead_rapido]) ---------- */
/* Dos campos y un botón dentro de la página. La versión larga vive en el modal;
   esta es para el que ya está convencido a mitad de la landing y no quiere
   abrir nada. */
.pango-lead {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(20px, 3vw, 40px); align-items: center;
	background: #FFF; border: 1px solid var(--pango-line); border-radius: var(--pango-radius);
	padding: clamp(24px, 3vw, 40px);
}
.pango-lead__titulo {
	font-family: var(--pango-font-display); font-weight: 900;
	font-size: clamp(22px, 2.6vw, 32px); line-height: 1.05; letter-spacing: -0.02em; margin: 0;
}
.pango-lead__entrada { color: var(--pango-muted); font-size: 16px; line-height: 1.55; margin: 12px 0 0; }
.pango-lead__form { display: grid; gap: 12px; min-width: 0; }
.pango-lead__campo { display: block; min-width: 0; }
.pango-lead__et {
	display: block; font-family: var(--pango-font-display); font-weight: 700;
	font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
	color: var(--pango-faint); margin-bottom: 6px;
}
.pango-lead__form input {
	width: 100%; padding: 15px 16px; border: 1px solid rgba(28,27,26,0.18);
	border-radius: 12px; background: var(--pango-bg-2); font-family: var(--pango-font-body);
	font-size: 16px; color: var(--pango-ink); outline: none;
}
.pango-lead__form input:focus { border-color: var(--pango-coral); }
.pango-lead__form button { width: 100%; padding: 16px; border-radius: 12px; }
.pango-lead__pie { font-size: 13px; color: var(--pango-faint); margin: 2px 0 0; }
.pango-lead__aviso { display: none; font-size: 14px; font-weight: 600; color: var(--pango-coral); }
@media (max-width: 859px) { .pango-lead { grid-template-columns: 1fr; } }

/* ---------- Tabla ([pango_tabla]) ---------- */
/* El scroll va en el envoltorio y no en la propia tabla: con overflow en el
   <table> los navegadores dejan de alinear las columnas entre cabecera y filas. */
.pango-tabla-scroll { overflow-x: auto; margin: 8px 0 4px; -webkit-overflow-scrolling: touch; }
/* Con .entry-content delante porque ahí `table` ya lleva display:block para
   scrollear, y aquí el scroll lo hace el envoltorio: la tabla vuelve a ser tabla. */
.entry-content table.pango-tabla,
.pango-tabla { display: table; width: 100%; border-collapse: collapse; font-size: 16px; min-width: 420px; }
/* border:none primero porque las celdas de .entry-content llevan borde por los
   cuatro lados y aquí solo se quiere la línea de abajo. */
.entry-content .pango-tabla th, .entry-content .pango-tabla td,
.pango-tabla th, .pango-tabla td { border: none; border-bottom: 1px solid var(--pango-line); padding: 14px 16px; text-align: left; vertical-align: top; }
.entry-content .pango-tabla th,
.pango-tabla th {
	background: var(--pango-bg-2); font-family: var(--pango-font-display); font-weight: 700;
	font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pango-faint);
	border-bottom: 1px solid var(--pango-ink);
}
.pango-tabla tbody tr:last-child th, .pango-tabla tbody tr:last-child td { border-bottom: none; }
.pango-tabla td { color: var(--pango-muted); }
.pango-tabla td:first-child { color: var(--pango-ink); font-weight: 600; }
.pango-tabla__cifra { font-family: var(--pango-font-display); font-weight: 700; color: var(--pango-ink) !important; white-space: nowrap; }
.pango-tabla a { color: var(--pango-coral); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Proceso por pasos ([pango_pasos]) ---------- */
/* Con .entry-content delante porque las listas de ahí llevan sangría y viñeta
   de color, y estos pasos ya traen su propia numeración. */
.entry-content ol.pango-pasos,
.pango-pasos { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 0; }
.entry-content .pango-paso + .pango-paso,
.pango-paso + .pango-paso { margin-top: 0; }
.pango-paso {
	display: grid; grid-template-columns: 76px 1fr; gap: 0 24px; align-items: start;
	padding: 24px 0; border-top: 1px solid var(--pango-line);
}
.pango-paso:last-child { border-bottom: 1px solid var(--pango-line); }
.pango-paso__n {
	font-family: var(--pango-font-display); font-weight: 900; font-size: clamp(28px, 3vw, 40px);
	line-height: 1; letter-spacing: -0.03em; color: var(--pango-coral);
}
/* Con .entry-content delante para quitarle el margen superior de los títulos de
   contenido: aquí el título tiene que salir a la altura de su número. */
.entry-content .pango-paso__title,
.pango-paso__title { font-family: var(--pango-font-display); font-weight: 700; font-size: 21px; line-height: 1.2; margin: 0; }
.pango-paso__text { font-size: 17px; line-height: 1.6; color: var(--pango-muted); margin-top: 8px; }
.pango-paso__text p { margin: 0 0 10px; }
.pango-paso__text a { color: var(--pango-coral); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 519px) {
	.pango-paso { grid-template-columns: 1fr; gap: 6px; }
	.pango-paso__n { font-size: 22px; }
}

/* ---------- Cifras de mercado ([pango_datos]) ---------- */
.pango-datos { display: grid; grid-template-columns: repeat(var(--pango-datos-cols, 3), 1fr); gap: 20px; margin: 8px 0 0; }
.pango-dato {
	background: var(--pango-bg-2); border: 1px solid var(--pango-line);
	border-radius: var(--pango-radius); padding: 26px 28px;
}
.pango-dato__cifra {
	font-family: var(--pango-font-display); font-weight: 900; font-size: clamp(30px, 3vw, 44px);
	line-height: 1; letter-spacing: -0.03em; color: var(--pango-ink);
}
.pango-dato__texto { font-size: 15px; line-height: 1.5; color: var(--pango-muted); margin-top: 10px; }
.pango-dato__texto p { margin: 0; }
.pango-datos__fuente { font-size: 13px; color: var(--pango-faint); margin: 14px 0 0; }
/* Por debajo de 1024 la rejilla la gobierna la regla de [data-mcar] de global.css,
   que la convierte en carrusel horizontal como el resto de rejillas del theme. */

.pango-faq { border-top: 1px solid var(--pango-line); }
.pango-faq__item { border-bottom: 1px solid var(--pango-line); }
.pango-faq__q {
	list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative;
	font-family: var(--pango-font-display); font-weight: 800; font-size: 19px; line-height: 1.3;
}
.pango-faq__q::-webkit-details-marker { display: none; }
.pango-faq__q::after {
	content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
	font-size: 26px; font-weight: 400; color: var(--pango-coral); line-height: 1;
}
.pango-faq__item[open] .pango-faq__q::after { content: '−'; }
.pango-faq__a { padding: 0 44px 22px 0; font-size: 17px; line-height: 1.6; color: var(--pango-muted); }
.pango-faq__a p { margin: 0 0 12px; }
.pango-faq__a a { color: var(--pango-coral); text-decoration: underline; text-underline-offset: 3px; }

/* La FAQ puesta suelta en la página, sin [pango_section] alrededor.
 *
 * Es como está en la mayoría de las landings, y así no la contenía nadie: el
 * acordeón y su titular se iban de borde a borde —1.952 px en una pantalla
 * ancha— mientras el resto de secciones miden 1.280 y arrancan a 336. Aquí se
 * les da el mismo ancho, el mismo margen lateral y aire arriba y abajo.
 *
 * Va con el selector de hijo directo a propósito: cuando la FAQ sí está dentro
 * de una sección, la sección ya la contiene y la espacia, y esta regla no la
 * toca. El titular es hermano del acordeón, no padre, así que viaja aparte.
 */
.entry-content > .pango-section__title,
.entry-content > .pango-faq {
	max-width: var(--pango-ancho);
	margin-inline: auto;
	padding-inline: var(--pango-margen);
}
.entry-content > .pango-section__title { margin-block: var(--pango-aire-corto, 56px) 0; }
.entry-content > .pango-faq { margin-block: 24px var(--pango-aire-corto, 56px); }

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

/* ============================================================
   Menús estándar de WordPress (nav + footer)
   ============================================================ */
/* Nav principal (ubicación primary) — tres niveles en cascada
   ------------------------------------------------------------------
   Mega menú. El menú tiene cuatro secciones arriba, once servicios debajo y
   treinta y cuatro dentro de esos. Encadenar desplegables obliga a mantener el
   ratón dentro de un pasillo de ocho píxeles, así que el segundo y el tercer
   nivel se enseñan juntos: un panel que baja de la cabecera, una columna por
   servicio y sus hijos debajo, todo a la vista de una vez. */
.pango-menu { display:flex; align-items:center; gap:clamp(16px,2.2vw,34px); list-style:none; margin:0; padding:0; }
.pango-menu li { position:relative; }
.pango-menu > li { position:static; }
.pango-menu a { color:#F7F6F3; font-weight:500; font-size:18px; display:inline-flex; align-items:center; gap:7px; }
.pango-menu > li > a { padding:10px 0 25px; margin-bottom:-15px; }

/* El panel: ocupa el ancho de la página, no el del enlace que lo abre */
.pango-nav-desktop .pango-menu > li > .sub-menu {
  display:none; position:absolute; top:100%; left:50%;
  transform:translateX(-50%); width:min(1180px, calc(100vw - 48px));
  padding:30px 32px 34px; gap:26px 36px; list-style:none;
  background:#1C1B1A; border:1px solid rgba(250,246,240,0.14); border-radius:20px;
  box-shadow:0 34px 64px -26px rgba(0,0,0,.82);
  /* Tres columnas fijas, no las que quepan. Con auto-fit salían cuatro y el
     panel de Shopify, que tiene seis grupos, quedaba con cuatro arriba y dos
     abajo dejando media fila vacía. A tres caben en dos filas llenas, y el
     panel de «Estudio con IA», que tiene tres grupos, ocupa una fila entera. */
  grid-template-columns:repeat(3, minmax(0, 1fr));
}
/* Quién lo abre: el teclado por :focus-within, y el ratón por la clase que pone
   el guion, que espera un momento antes de cerrar. El :hover a secas sigue
   valiendo de reserva por si el guion no llega a cargar. */
.pango-nav-desktop .pango-menu > li:hover > .sub-menu,
.pango-nav-desktop .pango-menu > li.esta-abierto > .sub-menu,
.pango-nav-desktop .pango-menu > li:focus-within > .sub-menu { display:grid; }

/* Cabeza de columna: el servicio */
.pango-nav-desktop .pango-menu > li > .sub-menu > li > a {
  display:block; width:100%; font-family:'Archivo',sans-serif; font-weight:800;
  font-size:15px; letter-spacing:-0.01em; color:#F7F6F3;
  padding:0 0 10px; border-bottom:1px solid rgba(250,246,240,0.16);
  transition:color .2s ease, border-color .2s ease;
}
/* El color de la familia lo pone el propio enlace (inc/nav-familias.php).
   Sin familia manda el acento, que es lo que habia antes. */
.pango-nav-desktop .pango-menu > li > .sub-menu > li > a:hover {
  color: var(--pango-menu, #F73600); border-color: var(--pango-menu, #F73600);
}

/* Lo que hay dentro de cada servicio, siempre a la vista */
.pango-nav-desktop .pango-menu .sub-menu .sub-menu {
  display:flex; flex-direction:column; position:static; margin:0;
  padding:12px 0 0; gap:0; background:none; border:none; box-shadow:none;
  width:auto; transform:none; list-style:none;
}
.pango-nav-desktop .pango-menu .sub-menu .sub-menu > li > a {
  font-size:14px; font-weight:500; color:#B9B3A8; line-height:1.35;
  padding:6px 0 6px 0; display:block;
  transition:color .2s ease, padding-left .2s ease;
}
.pango-nav-desktop .pango-menu .sub-menu .sub-menu > li > a:hover { color: var(--pango-menu, #F7F6F3); padding-left:8px; }
.pango-nav-desktop .pango-menu a:focus-visible { outline:2px solid #F73600; outline-offset:3px; }

/* Una sección sin tercer nivel (Quiénes somos, Contacto) no necesita un panel
   de mil doscientos píxeles para enseñar dos enlaces.
   La clase pango-sub--simple estaba escrita aquí pero no la ponía nadie: no
   aparece en ningún PHP del theme, así que «Quiénes somos» abría el panel ancho
   y centrado con dos enlaces perdidos dentro. Se detecta ahora con el propio
   selector —un submenú de primer nivel que no contiene otro submenú— y así no
   hay que acordarse de marcarlo a mano al añadir secciones. */
/* El panel ancho se posiciona contra la barra entera, porque ocupa el ancho de
   la página. El estrecho no: tiene que colgar del enlace que lo abre, así que
   su propio <li> pasa a ser la referencia. Sin esto se iba al extremo derecho
   de la pantalla, lejos de «Quiénes somos».
   Quién lleva la clase lo decide PHP (pango2026_marca_menus_simples), porque
   :has() no se puede anidar dentro de otro :has() y el selector que lo
   intentaba era inválido: el navegador tiraba la regla entera. */
.pango-nav-desktop .pango-menu > li.pango-menu-simple { position:relative; }

.pango-nav-desktop .pango-menu > li.pango-menu-simple > .sub-menu,
.pango-nav-desktop .pango-menu > li > .sub-menu.pango-sub--simple {
  width:auto; min-width:230px; left:auto; right:0; transform:none;
  grid-template-columns:1fr; gap:2px; padding:14px;
}
.pango-nav-desktop .pango-menu > li.pango-menu-simple > .sub-menu > li > a,
.pango-nav-desktop .pango-menu > li > .sub-menu.pango-sub--simple > li > a {
  border-bottom:none; padding:10px 12px; border-radius:10px; font-weight:600; font-size:15px;
}
.pango-nav-desktop .pango-menu > li.pango-menu-simple > .sub-menu > li > a:hover,
.pango-nav-desktop .pango-menu > li > .sub-menu.pango-sub--simple > li > a:hover {
  background:rgba(250,246,240,0.09); color:#F7F6F3;
}


/* Nav en móvil: acordeones, un toque por nivel.
   El aire entre entradas lo hace el relleno de cada enlace, no el interlineado:
   la altura de una fila es el interlineado más el relleno de arriba y abajo. Los
   rellenos de 19, 15 y 11 salen de subir un 25% las alturas medidas —53, 44 y 36
   píxeles— el 16 de septiembre de 2026, a petición de Fausto. */
[data-mobile-menu] .pango-menu { flex-direction:column; align-items:stretch; gap:0; width:100%; }
[data-mobile-menu] .pango-menu li { position:static; }
[data-mobile-menu] .pango-menu > li > a { padding:19px 0; font-size:16px; font-weight:600; border-bottom:1px solid rgba(250,246,240,0.08); }
/* La jerarquía se cuenta con sangría y con el peso de la letra. La barra
   vertical de color a la izquierda de cada nivel —y más aún tres, una dentro
   de otra— es de las cosas que hacen que una web parezca hecha en serie. */
[data-mobile-menu] .pango-menu .sub-menu,
[data-mobile-menu] .pango-menu .sub-menu .sub-menu {
  display:none; position:static; background:none; border:none; box-shadow:none;
  padding:2px 0 10px 16px; margin:2px 0 6px;
  min-width:0; max-width:none; transform:none;
}
[data-mobile-menu] .pango-menu li[data-abierto="1"] > .sub-menu { display:block; }
[data-mobile-menu] .pango-menu .sub-menu > li > a { font-size:15px; font-weight:600; padding:15px 0; }
[data-mobile-menu] .pango-menu .sub-menu > li + li > a { border-top:1px solid rgba(250,246,240,0.07); }

/* El tercer nivel se lee como un índice: cada entrada abre con una rayita, que
   dice «esto cuelga de lo de arriba» sin pintar un carril entero. */
[data-mobile-menu] .pango-menu .sub-menu .sub-menu > li > a {
  font-size:14px; font-weight:500; color:#C9C3B8; padding:11px 0;
  display:flex; align-items:center; gap:10px; border-top:none;
}
[data-mobile-menu] .pango-menu .sub-menu .sub-menu > li > a::before {
  content:''; width:12px; height:1px; background:rgba(250,246,240,0.34); flex:none;
}
[data-mobile-menu] .pango-menu .sub-menu > li.menu-item-has-children > a::after { content:none; }

/* El botón que abre cada rama en el móvil. Va aparte del enlace para que se
   pueda entrar en la sección Y abrir su submenú, que con un solo objetivo
   táctil es imposible. */
[data-mobile-menu] .pango-menu li.menu-item-has-children > a { display:flex; justify-content:space-between; align-items:center; }
.pango-abre-rama {
  background:none; border:none; color:#F7F6F3; font-size:22px; line-height:1;
  padding:4px 10px; margin:-4px -10px -4px 8px; cursor:pointer; flex:none;
  transition:transform .2s ease;
}
[data-abierto="1"] > a > .pango-abre-rama { transform:rotate(45deg); }

/* Footer: cabeceras y columnas de menú */
.pango-foot-h { font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#8A857B; margin-bottom:18px; }
.pango-foot-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:16px; }
.pango-foot-list a { color:#F7F6F3; }
.pango-foot-list a:hover { color:#F73600; }

/* ---------- Hover-lift (botones/tarjetas de la home) ---------- */
.pango-lift { transition: transform .15s ease, box-shadow .15s ease; }
.pango-lift:hover { transform: translateY(-3px); }
[data-rotword] { display: inline-block; }

/* ---------- Carrusel de reseñas: se para al pasar el ratón ---------- */
.pango-rail:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .pango-rail { animation: none; } }

/* ---------- Hero de servicio: blobs de color ---------- */
@keyframes pgblob { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(12px,-16px) scale(1.08); } }

/* ---------- FAQ (details/summary) del kit de servicio ---------- */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .pango-fqc { display: none !important; }
details[open] > summary .pango-fqo { display: inline-block !important; }

/* ============================================================
 * Proyectos — rejilla del portfolio
 * ============================================================ */
.pango-archive-head .pango-eyebrow { font-family: var(--pango-font-display); font-weight: 700;
  font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pango-coral);
  margin-bottom: 18px; }

.pango-proyectos { max-width: var(--pango-max); margin: 0 auto;
  padding: clamp(20px,3vw,32px) var(--pango-gutter) clamp(56px,7vw,96px); }

/* filtros */
.pango-pr-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; }
.pango-pr-f { font-family: var(--pango-font-display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--pango-muted);
  background: transparent; border: 1px solid var(--pango-line); border-radius: 999px;
  padding: 9px 17px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.pango-pr-f:hover { border-color: var(--pango-ink); color: var(--pango-ink); }
.pango-pr-f.es-activo { background: var(--pango-ink); border-color: var(--pango-ink); color: var(--pango-bg-2); }

/* rejilla */
.pango-pr-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: start; }
.pango-pr { background: var(--pango-bg); border: 1px solid var(--pango-line);
  border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px -32px rgba(28,27,26,0.5);
  transition: transform .2s ease, box-shadow .2s ease; }
.pango-pr:hover { transform: translateY(-6px); box-shadow: 0 30px 56px -32px rgba(28,27,26,0.55); }
.pango-pr[hidden] { display: none; }

.pango-pr-tapa { display: flex; flex-direction: column; width: 100%; text-align: left;
  background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit; cursor: pointer; }
a.pango-pr-tapa { text-decoration: none; }
.pango-pr-tapa:focus-visible { outline: 3px solid var(--pango-coral); outline-offset: -3px; }

.pango-pr-foto { position: relative; display: block; aspect-ratio: 16/10; background: var(--pango-bg); overflow: hidden; }
.pango-pr .pango-pr-foto img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center; display: block; max-width: none; }
.pango-pr-sinfoto { display: block; width: 100%; height: 100%; background: var(--pango-ink); }
.pango-pr-badge { position: absolute; top: 14px; left: 14px; z-index: 2; color: var(--pango-ink);
  font-family: var(--pango-font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.05em;
  text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }

.pango-pr-cuerpo { display: block; padding: 24px 26px 26px; }
.pango-pr-cliente { display: block; font-family: var(--pango-font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pango-faint); margin-bottom: 10px; }
.pango-pr-titular { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-family: var(--pango-font-display); font-weight: 800; font-size: 20px;
  letter-spacing: -0.02em; line-height: 1.1; color: var(--pango-ink); margin-bottom: 16px; }
.pango-pr-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.pango-pr-tags span { font-size: 12px; line-height: 1; color: var(--pango-muted);
  background: var(--pango-bg-2); border: 1px solid var(--pango-line); border-radius: 999px; padding: 7px 11px; }

/* el desplegable de los que no tienen página propia */

/* ---------- Proyectos: el modal y su carrusel de capturas ---------- */

.pango-pr-modal { width: min(1080px, calc(100vw - 32px)); max-height: calc(100vh - 48px);
	padding: 0; border: 0; border-radius: var(--pango-radius); background: var(--pango-bg-2);
	color: var(--pango-ink); box-shadow: 0 32px 80px rgba(28,27,26,0.22); overflow: hidden; }
.pango-pr-modal::backdrop { background: rgba(28,27,26,0.62); }
.pango-pr-modal-caja { display: flex; flex-direction: column; max-height: calc(100vh - 48px); overflow-y: auto; }

.pango-pr-cerrar { position: absolute; top: 14px; right: 14px; z-index: 2;
	width: 40px; height: 40px; display: grid; place-items: center;
	border: 0; border-radius: 999px; cursor: pointer;
	background: var(--pango-bg-2); color: var(--pango-ink); box-shadow: 0 2px 12px rgba(28,27,26,0.16); }
.pango-pr-cerrar:focus-visible { outline: 3px solid var(--pango-coral); outline-offset: 2px; }

.pango-pr-carrusel { position: relative; background: var(--pango-bg); }
.pango-pr-pases { display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; gap: 0; }
.pango-pr-pases::-webkit-scrollbar { display: none; }
.pango-pr-pases:focus-visible { outline: 3px solid var(--pango-coral); outline-offset: -3px; }
.pango-pr-pase { flex: 0 0 100%; scroll-snap-align: start; margin: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 24px 24px 16px; }
.pango-pr-pase img { max-width: 100%; max-height: 56vh; height: auto; width: auto;
	border-radius: 10px; box-shadow: 0 12px 32px rgba(28,27,26,0.14); }
.pango-pr-pase.es-movil img { max-height: 62vh; }
.pango-pr-pase figcaption { margin-top: 12px; font-size: 14px; color: var(--pango-faint); }

.pango-pr-flecha { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 44px; height: 44px; display: grid; place-items: center;
	border: 0; border-radius: 999px; cursor: pointer;
	background: var(--pango-bg-2); color: var(--pango-ink); box-shadow: 0 2px 12px rgba(28,27,26,0.16); }
.pango-pr-flecha.es-antes { left: 14px; }
.pango-pr-flecha.es-despues { right: 14px; }
.pango-pr-flecha:focus-visible { outline: 3px solid var(--pango-coral); outline-offset: 2px; }

.pango-pr-puntos { display: flex; gap: 8px; justify-content: center; padding: 0 0 18px; }
.pango-pr-punto { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
	background: var(--pango-line);
	transition: transform .3s cubic-bezier(.32,.72,0,1), background-color .3s cubic-bezier(.32,.72,0,1); }
.pango-pr-punto.es-activo { background: var(--pango-coral); transform: scale(1.5); }
.pango-pr-punto:focus-visible { outline: 3px solid var(--pango-coral); outline-offset: 3px; }

.pango-pr-modal-texto { padding: 26px 32px 32px; border-top: 1px solid var(--pango-line); }
.pango-pr-modal-cliente { margin: 0 0 4px; font-size: 14px; color: var(--pango-faint); }
.pango-pr-modal-titulo { margin: 0; font-family: var(--pango-font-display); font-weight: 700;
	font-size: 32px; line-height: 1.15; text-wrap: balance; }
.pango-pr-modal-cuerpo { margin: 14px 0 0; max-width: 72ch; font-size: 18px; line-height: 1.6; color: var(--pango-muted); }
.pango-pr-modal-tags { margin: 14px 0 0; font-size: 14px; color: var(--pango-faint); }
.pango-pr-modal-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 22px 0 0; }
.pango-pr-modal-web { color: var(--pango-coral); font-weight: 600; text-decoration: none; }
.pango-pr-modal-web:hover { text-decoration: underline; }

@media (max-width: 640px) {
	.pango-pr-modal { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; }
	.pango-pr-modal-caja { max-height: 100vh; }
	.pango-pr-modal-texto { padding: 22px 20px 28px; }
	.pango-pr-modal-titulo { font-size: 24px; }
	.pango-pr-flecha { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pango-pr-pases { scroll-behavior: auto; }
	.pango-pr-punto { transition: none; }
}

.pango-pr-vacio { max-width: var(--pango-max); margin: 40px auto 0; color: var(--pango-muted); font-size: 18px; }

.pango-pr-cierre { max-width: var(--pango-max); margin: 0 auto;
  padding: 0 var(--pango-gutter) clamp(56px,7vw,96px); }
.pango-pr-cierre h2 { font-family: var(--pango-font-display); font-weight: 900;
  font-size: clamp(26px,3.4vw,46px); letter-spacing: -0.035em; line-height: 1; margin: 0 0 14px; text-transform: uppercase; }
.pango-pr-cierre p { color: var(--pango-muted); font-size: 18px; max-width: 620px; margin: 0 0 20px; }

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

/* ============================================================
 * Certificación ISO 27001
 * ============================================================ */
.pango-cert { max-width: var(--pango-max); margin: 0 auto;
  padding: clamp(48px,6vw,80px) var(--pango-gutter); }
.pango-cert__eyebrow { font-family: var(--pango-font-display); font-weight: 700; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--pango-coral); margin: 0 0 16px; }
.pango-cert h2 { font-family: var(--pango-font-display); font-weight: 900;
  font-size: clamp(32px,5vw,60px); letter-spacing: -.035em; line-height: .96;
  text-transform: uppercase; margin: 0; }
.pango-cert__intro { color: var(--pango-muted); font-size: clamp(17px,1.7vw,20px);
  max-width: 62ch; margin: 18px 0 0; }
.pango-cert__datos { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
  gap: 22px; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--pango-line); padding-top: 30px; }
.pango-cert__datos div { margin: 0; }
.pango-cert__datos dt { font-family: var(--pango-font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pango-faint); margin: 0 0 7px; }
.pango-cert__datos dd { margin: 0; font-family: var(--pango-font-display); font-weight: 800;
  font-size: 19px; letter-spacing: -.01em; color: var(--pango-ink); }
.pango-cert__pdf { margin: 30px 0 0; }
.pango-cert__pdf a { font-weight: 600; color: var(--pango-coral); }

.pango-cert-tira { margin: 0; font-size: 14px; }
.pango-cert-tira a { color: inherit; text-decoration: none; opacity: .85; }
.pango-cert-tira a:hover { opacity: 1; text-decoration: underline; }


/* ---------- Hero de servicio: la figura de escamas ---------- */

/* Las partículas ocupan la misma caja que ocupaba el globo, así que el hero no
   se mueve. Debajo va el glifo plano: es lo que se ve si el canvas no arranca,
   si el navegador es viejo o si el visitante ha pedido no ver movimiento. */
.pango_service_hero__figura--escamas { position: relative; display: grid; place-items: center;
	/* La figura del hero venía con pointer-events:none porque el globo no
	   escuchaba nada y así no robaba clics al titular. Las escamas sí escuchan:
	   esquivan el cursor y estallan al pulsar, que es la mitad del efecto en la
	   página del aniversario. Sin esto se ensamblan y ya, quietas. */
	pointer-events: auto;
	opacity: 1; }
.pango_service_hero__figura--escamas canvas { position: relative; z-index: 1;
	width: 100%; height: 100%; display: block; touch-action: manipulation; }
.pango_service_hero__glifo { position: absolute; inset: 0; z-index: 0;
	display: grid; place-items: center; opacity: 0;
	font-family: var(--pango-font-display); font-weight: 900;
	font-size: clamp(160px, 22vw, 280px); line-height: 1; user-select: none; }
.pango_service_hero__figura--escamas.es-quieto canvas { display: none; }
.pango_service_hero__figura--escamas.es-quieto .pango_service_hero__glifo { opacity: 1; }

/* En móvil la figura deja de flotar sobre el titular y baja a su sitio, debajo
   del hero. Se hace con orden y no moviéndola en el HTML para que el orden de
   lectura siga siendo el bueno: primero lo que se lee, después el adorno.
   Y crece: a 120 px, que es lo que medía antes en un móvil, las partículas no
   se distinguen y el efecto no se ve. */
@media (max-width: 767px) {
	.pango_service_hero--escamas { display: flex; flex-direction: column; }
	.pango_service_hero--escamas .pango_service_hero__cuerpo { order: 1; }
	.pango_service_hero--escamas .pango_service_hero__figura--escamas {
		order: 2; position: static; transform: none;
		width: min(78vw, 320px); margin: 8px auto 32px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pango_service_hero__figura--escamas canvas { display: none; }
	.pango_service_hero__glifo { opacity: 1; }
}