/* Campus Cognitionis · demo r9 · Páginas de producto de las aplicaciones (agente C)
   Lentes.io (W17) · Navega.earth (W18) · Escritorio / Lentes Studio (W19) · Archives Management (W21) · Mensa AI (W22)
   Ilustración: no es código del proyecto. Se carga después de css/escaparate.css.
   Composición como las páginas de producto de apple.com: héroe centrado, secciones alternas clara/oscura,
   rejillas de rasgos, maquetas de producto hechas en HTML y CSS, comparativa, preguntas y banda final.
   Identidad Campus: Newsreader 800 en titulares, Inter en texto, colores de tokens.css. Contraste AA medido en cada pareja.
   Sin cristal: las secciones son opacas (paneles del kit) y las maquetas también.

   Usa el kit de css/escaparate.css (§5: .producto, .producto-heroe, .producto-seccion, .rasgos, .comparativa, .faq,
   .cta-banda, .lorem, botones .tesela__boton y .tesela__enlace) y sus variables --t-*; aquí solo van las piezas propias (.pa-). */

/* =====================================================================
   Piezas propias (.pa-)
   ===================================================================== */

/* ---------- Botones: los del kit (.tesela__boton, .tesela__enlace); segundo botón de la banda final en contorno ---------- */
.pa-boton--contorno { background: transparent; color: var(--t-texto); box-shadow: inset 0 0 0 1.5px currentColor; }
.pa-boton--contorno:hover { background: color-mix(in srgb, var(--t-texto) 10%, transparent); }
.producto-heroe__icono.pa-icono--redondo { border-radius: 50%; box-shadow: none; }

/* Titulares equilibrados: sin palabras huérfanas en la segunda línea */
.producto-heroe__titular, .producto-seccion__titular, .cta-banda__titular { text-wrap: balance; }

/* ---------- Bloques de dos columnas (texto + maqueta) ---------- */
.pa-dos {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: clamp(28px, 5vw, 72px);
  width: min(1120px, 100%); margin: 0 auto;
}
.pa-dos--invertido > :first-child { order: 2; }
.pa-dos .producto-seccion__titular, .pa-dos .producto-seccion__texto { margin-inline: 0; text-align: left; }
.pa-dos { text-align: left; }
.pa-dos .producto-seccion__acciones { justify-content: flex-start; }
.pa-lista { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; color: var(--t-suave); line-height: 1.5; }
.pa-lista li { display: flex; gap: 12px; }
.pa-lista li::before { content: ""; flex: none; width: 8px; height: 8px; margin-top: 0.5em; border-radius: 50%; background: var(--t-marca); }
.pa-nota { margin: 18px auto 0; max-width: 64ch; font-size: 0.9rem; line-height: 1.5; color: var(--t-suave); text-align: center; }
.pa-nota--izq { margin-inline: 0; text-align: left; }

/* ---------- Tarjetas (tres profundidades, dos construcciones, precios) ---------- */
.pa-tarjetas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px;
  width: min(1080px, 100%); margin: clamp(36px, 5vw, 56px) auto 0; padding: 0; list-style: none;
}
.pa-tarjeta {
  display: grid; align-content: start; gap: 8px; padding: 26px 26px 28px; border-radius: 18px;
  background: var(--t-caja); text-align: left; box-shadow: 0 1px 3px rgba(30, 32, 37, 0.08);
}
.pa-tarjeta--oscura { background: var(--c-azul); color: var(--c-blanco); --t-suave: #BDBDC2; --t-marca: var(--c-arena); }
.pa-tarjeta__rotulo { margin: 0; font: 700 0.74rem/1.2 var(--f-interfaz); letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-marca); }
.pa-tarjeta__titulo { margin: 0; font: 800 clamp(1.4rem, 2.2vw, 1.9rem)/1.12 var(--f-titular); }
.pa-tarjeta__texto { margin: 0; color: var(--t-suave); line-height: 1.55; }
.pa-tarjeta__precio { margin: 10px 0 0; font: 800 clamp(1.8rem, 3vw, 2.4rem)/1 var(--f-titular); }
.pa-tarjeta__precio small { font: 500 0.95rem/1 var(--f-interfaz); color: var(--t-suave); }
.pa-tarjeta .tesela__enlace { margin-top: 6px; }
.pa-tarjeta__icono { width: 56px; height: 56px; margin-bottom: 6px; border-radius: 14px; box-shadow: var(--sombra-2); }
.pa-tarjeta__icono--redondo { border-radius: 50%; box-shadow: none; }
.pa-hepta-heroe { padding-bottom: clamp(48px, 6vw, 88px); }

/* ---------- Isotipos de las siete categorías ---------- */
.pa-hepta {                         /* 4 + 3, la segunda fila centrada */
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  width: min(1120px, 100%); margin: clamp(36px, 5vw, 56px) auto 0; padding: 0; list-style: none;
}
.pa-hepta > li { flex: 0 1 calc(25% - 9px); min-width: 0; }
@media (max-width: 833.98px) { .pa-hepta > li { flex-basis: calc(50% - 6px); } }
@media (max-width: 420px) { .pa-hepta > li { flex-basis: 100%; } }
.pa-hepta__cat { display: grid; justify-items: start; gap: 6px; padding: 22px; border-radius: 18px; background: var(--t-caja); border-top: 4px solid var(--sec-color, var(--c-oro)); text-align: left; }
.pa-hepta__cat img { width: 48px; height: 48px; border-radius: 50%; box-shadow: var(--sombra-2); }
.pa-hepta__nombre { margin: 8px 0 0; font: 800 1.3rem/1.2 var(--f-titular); }
.pa-hepta__lema { margin: 0; font: italic 400 1rem/1.4 var(--f-titular); color: var(--t-suave); }
.pa-hepta__cat[data-seccion="literaria"] { --sec-color: #8E3B3F; }
.pa-hepta__cat[data-seccion="cientifica"] { --sec-color: #3C6A69; }
.pa-hepta__cat[data-seccion="historiografica"] { --sec-color: #C9AA61; }
.pa-hepta__cat[data-seccion="deportiva"] { --sec-color: #DDE15A; }
.pa-hepta__cat[data-seccion="tonos"] { --sec-color: #514CA6; }
.pa-hepta__cat[data-seccion="nacion"] { --sec-color: #C06B4D; }
.pa-hepta__cat[data-seccion="antropologica"] { --sec-color: #7A5A3E; }

/* =====================================================================
   Maquetas de producto (decorativas: role="img" con descripción)
   ===================================================================== */

/* ---------- Lentes.io: lector en un portátil y un teléfono ---------- */
.pa-dispositivos { position: relative; width: min(980px, 100%); padding-bottom: clamp(28px, 4vw, 56px); }
.pa-portatil { width: 88%; margin: 0 auto; }
.pa-portatil__pantalla { padding: 10px; border-radius: 18px 18px 0 0; background: #0E0F12; box-shadow: var(--sombra-4); }
.pa-portatil__base { height: 14px; margin: 0 -6%; border-radius: 0 0 14px 14px; background: linear-gradient(#C9CACE, #8E9096); }
.pa-lector { overflow: hidden; border-radius: 10px; background: var(--c-blanco); color: var(--c-azul); text-align: left; }
.pa-lector__barra { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid #E6E4E5; }
.pa-lector__marca { margin: 0; display: flex; align-items: center; gap: 8px; font: 700 0.95rem/1 var(--f-interfaz); }
.pa-lector__marca img { width: 22px; height: 22px; border-radius: 6px; }
.pa-lector__pestanas { display: flex; gap: 4px; margin: 0; padding: 3px; border-radius: 999px; background: #F1EFEF; list-style: none; font-size: 0.74rem; font-weight: 600; }
.pa-lector__pestanas li { padding: 4px 10px; border-radius: 999px; }
.pa-lector__pestanas li:nth-child(2) { background: var(--c-azul); color: var(--c-blanco); }
.pa-lector__cuerpo { padding: 16px; }
.pa-lector__rotulo { margin: 0 0 10px; font: 800 1.1rem/1.2 var(--f-titular); }
.pa-lector__estante { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.pa-lector__edicion { overflow: hidden; border-radius: 8px; background: #F5F5F7; box-shadow: 0 1px 3px rgba(30, 32, 37, 0.12); }
.pa-lector__edicion img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: grayscale(0.2); }
.pa-lector__pie { display: block; padding: 6px 8px 8px; border-top: 4px solid var(--sec-color, #3C4C4C); font-size: 0.7rem; font-weight: 600; line-height: 1.25; }
.pa-lector__edicion[data-seccion="literaria"] { --sec-color: #8E3B3F; }
.pa-lector__edicion[data-seccion="cientifica"] { --sec-color: #3C6A69; }
.pa-lector__edicion[data-seccion="historiografica"] { --sec-color: #C9AA61; }
.pa-lector__edicion[data-seccion="nacion"] { --sec-color: #C06B4D; }
.pa-telefono {
  position: absolute; right: 0; bottom: 0; width: clamp(120px, 22%, 200px); padding: 7px; border-radius: 26px;
  background: #0E0F12; box-shadow: var(--sombra-5);
}
.pa-telefono__pantalla { overflow: hidden; border-radius: 20px; background: var(--c-fondo); color: var(--c-azul); text-align: left; aspect-ratio: 9 / 19; padding: 16px 12px; }
.pa-telefono__antetitulo { margin: 0; font: 700 0.55rem/1.2 var(--f-interfaz); letter-spacing: 0.12em; text-transform: uppercase; color: #8E3B3F; }
.pa-telefono__titulo { margin: 4px 0 8px; font: 800 0.95rem/1.15 var(--f-titular); }
.pa-telefono__lineas { display: grid; gap: 5px; }
.pa-telefono__lineas span, .pa-renglones span { display: block; height: 5px; border-radius: 3px; background: #C9C7C8; }
.pa-telefono__lineas span:nth-child(3n) { width: 72%; }
.pa-telefono__lineas span:nth-child(4n+1) { width: 92%; }

/* ---------- Lentes.io: claro u oscuro ---------- */
.pa-modos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(720px, 100%); margin: clamp(36px, 5vw, 56px) auto 0; overflow: hidden; border-radius: 18px; box-shadow: var(--sombra-3); }
.pa-modos__mitad { padding: 22px 20px 28px; text-align: left; }
.pa-modos__mitad--claro { background: var(--c-blanco); color: var(--c-azul); }
.pa-modos__mitad--oscuro { background: #121316; color: #ECECEE; }
.pa-modos__rotulo { margin: 0 0 10px; font: 700 0.72rem/1.2 var(--f-interfaz); letter-spacing: 0.12em; text-transform: uppercase; }
.pa-modos__titulo { margin: 0 0 10px; font: 800 1.2rem/1.2 var(--f-titular); }
.pa-modos__mitad--oscuro .pa-renglones span { background: #3A3D44; }
.pa-renglones { display: grid; gap: 7px; }
.pa-renglones span:nth-child(3n) { width: 78%; }

/* ---------- Lentes.io: ediciones que llegan al perfil ---------- */
.pa-avisos { display: grid; gap: 10px; width: min(460px, 100%); margin: 0; padding: 0; list-style: none; }
.pa-aviso {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 16px; background: var(--t-caja); text-align: left; box-shadow: 0 1px 3px rgba(30, 32, 37, 0.1);
}
.pa-aviso img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.pa-aviso__texto { margin: 0; font-size: 0.92rem; line-height: 1.35; }
.pa-aviso__texto strong { display: block; font-weight: 700; }
.pa-aviso__hora { margin: 0; font-size: 0.78rem; color: var(--t-suave); }
.pa-quiosco { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: min(860px, 100%); margin: clamp(32px, 4vw, 48px) auto 0; padding: 0; list-style: none; }
.pa-quiosco li { padding: 12px 20px; border-radius: 999px; border: 1px solid var(--t-linea); background: var(--t-caja); font: 800 1.05rem/1.2 var(--f-titular); }

/* ---------- Navega.earth: ventana de navegador ---------- */
.pa-navegador { width: min(1000px, 100%); overflow: hidden; border-radius: 16px; background: var(--c-blanco); color: var(--c-azul); text-align: left; box-shadow: var(--sombra-4); }
.pa-navegador__barra { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #ECEBEC; }
.pa-navegador__puntos { display: flex; gap: 6px; }
.pa-navegador__puntos span { width: 11px; height: 11px; border-radius: 50%; background: #C9C7C8; }
.pa-navegador__direccion { flex: 1; min-width: 0; margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--c-blanco); font-size: 0.82rem; color: #4A4D55; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-navegador__cuerpo { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 300px; }
.pa-navegador__lateral { display: grid; align-content: start; gap: 2px; margin: 0; padding: 12px 10px; border-right: 1px solid #E6E4E5; list-style: none; font-size: 0.84rem; font-weight: 600; }
.pa-navegador__lateral li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; }
.pa-navegador__lateral img { width: 22px; height: 22px; border-radius: 50%; }
.pa-navegador__lateral li[aria-current] { background: #E4EFEE; }
.pa-navegador__contenido { padding: 18px 20px; }
.pa-navegador__ruta { margin: 0 0 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: #3C6A69; }
.pa-navegador__titulo { margin: 0 0 14px; font: 800 1.35rem/1.2 var(--f-titular); }
.pa-navegador__fichas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pa-navegador__ficha { display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: #F5F5F7; border-top: 3px solid #3C6A69; }
.pa-navegador__ficha p { margin: 0; font-size: 0.78rem; font-weight: 600; line-height: 1.3; }

/* ---------- Escritorio (EPV): una mesa con lo que guardas ---------- */
.pa-epv {
  position: relative; width: min(1080px, 100%); aspect-ratio: 16 / 9; margin: 0 auto; overflow: hidden;
  border-radius: 20px 20px 0 0; text-align: left; color: var(--c-azul);
  background:
    radial-gradient(ellipse at 30% 20%, rgba(220, 176, 66, 0.12), transparent 60%),
    linear-gradient(160deg, #2C2F36 0%, #1B1D21 100%);
  box-shadow: var(--sombra-4), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.pa-epv__barra {
  position: absolute; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 18px; background: #121316; color: #ECECEE; font-size: 0.78rem; font-weight: 600;
}
.pa-epv__barra p { margin: 0; }
.pa-epv__pieza { position: absolute; margin: 0; border-radius: 10px; background: var(--c-blanco); box-shadow: var(--sombra-3); }
.pa-epv__etiqueta {
  position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px;
  background: #121316; color: var(--c-blanco); font-size: 0.66rem; font-weight: 600; line-height: 1.5;
}
.pa-epv__edicion { left: 4%; top: 14%; width: 17%; aspect-ratio: 3 / 4; overflow: hidden; transform: rotate(-4deg); }
.pa-epv__edicion img { width: 100%; height: 100%; object-fit: cover; }
.pa-epv__articulo { left: 23%; top: 12%; width: 22%; aspect-ratio: 1 / 1.414; padding: 4% 2.4%; background: var(--c-fondo); transform: rotate(2deg); }
.pa-epv__articulo p { margin: 0 0 6px; font: 800 clamp(0.6rem, 1vw, 0.9rem)/1.15 var(--f-titular); }
.pa-epv__articulo .pa-renglones { gap: 5px; }
.pa-epv__articulo .pa-renglones span { height: 4px; }
.pa-epv__imagen { left: 49%; top: 13%; width: 22%; aspect-ratio: 4 / 3; overflow: hidden; padding: 6px 6px 22px; transform: rotate(-2deg); }
.pa-epv__imagen img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.pa-epv__video { left: 74%; top: 16%; width: 22%; aspect-ratio: 16 / 10; overflow: hidden; background: #0E0F12; }
.pa-epv__video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.82; }
.pa-epv__play { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: var(--c-blanco); }
.pa-epv__play::after { content: ""; position: absolute; left: 15px; top: 11px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--c-azul); }
.pa-epv__libro {
  left: 6%; top: 62%; width: 13%; aspect-ratio: 2 / 3; padding: 10px 8px 8px 16px; border-radius: 4px 10px 10px 4px;
  background: linear-gradient(90deg, #5E2629 0 10%, #8E3B3F 10% 100%); color: #F4EFE4; transform: rotate(3deg);
}
.pa-epv__libro p { margin: 0; font: 800 clamp(0.6rem, 1vw, 0.85rem)/1.15 var(--f-titular); }
.pa-epv__postit {
  width: 13%; aspect-ratio: 1; padding: 1.2% 1.2%; border-radius: 2px; background: #F6E58D; color: #3B3415;
  font: 500 clamp(0.55rem, 0.95vw, 0.85rem)/1.3 var(--f-interfaz); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
}
.pa-epv__postit--1 { left: 24%; top: 66%; transform: rotate(-5deg); }
.pa-epv__postit--2 { left: 39%; top: 70%; background: #F2C6B4; color: #4A2418; transform: rotate(4deg); }
.pa-epv__nube {
  left: 56%; top: 64%; width: 18%; padding: 12px 14px; display: grid; gap: 4px;
  font-size: clamp(0.6rem, 0.95vw, 0.82rem); line-height: 1.3;
}
.pa-epv__nube svg { width: 28px; height: 28px; color: #3C6A69; }
.pa-epv__nube strong { font-weight: 700; }
.pa-epv__mesa {
  left: 77%; top: 58%; width: 19%; padding: 12px; display: grid; gap: 6px; border-radius: 16px 0 0 16px;
  background: var(--c-fondo); font-size: clamp(0.6rem, 0.95vw, 0.8rem); font-weight: 600;
}
.pa-epv__mesa span { display: block; padding: 5px 8px; border-radius: 8px; background: var(--c-blanco); }
.pa-epv__mesa p { margin: 0; font: 800 clamp(0.7rem, 1.1vw, 0.95rem)/1.2 var(--f-titular); }

/* ---------- Escritorio: rasgos de Wix con su icono ---------- */
.pa-wix { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; width: min(1080px, 100%); margin: clamp(36px, 5vw, 56px) auto 0; padding: 0; list-style: none; }
.pa-wix__rasgo { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; padding: 22px; border-radius: 18px; background: var(--t-caja); text-align: left; }
.pa-wix__rasgo svg { width: 48px; height: 48px; color: var(--t-marca); }
.pa-wix__rasgo p { margin: 0; line-height: 1.55; color: var(--t-suave); }
.pa-wix__rasgo strong { color: var(--t-texto); }
.pa-cita { max-width: 46ch; margin: 22px auto 0; font: 400 clamp(1.15rem, 1.8vw, 1.45rem)/1.5 var(--f-titular); text-align: center; }
.pa-cita strong { font-weight: 800; }
.pa-pendiente { display: inline-block; margin-left: 4px; font-size: 0.85em; font-style: italic; }

/* ---------- Escritorio: Mesas (cajas verticales) ---------- */
.pa-mesas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(1000px, 100%); margin: clamp(36px, 5vw, 56px) auto 0; padding: 0; list-style: none; }
.pa-mesa { display: grid; align-content: start; gap: 8px; padding: 18px 16px; border-radius: 22px 0 0 22px; background: var(--t-caja); border-left: 4px solid var(--c-oro); text-align: left; }
.pa-mesa__titulo { margin: 0 0 4px; font: 800 1.2rem/1.2 var(--f-titular); }
.pa-mesa__item { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); font-size: 0.9rem; line-height: 1.3; }
.producto-seccion--clara .pa-mesa__item { background: #F5F5F7; }
.pa-mesa__item img { width: 32px; height: 40px; border-radius: 4px; object-fit: cover; }
.pa-mesa__tipo { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--c-arena); color: var(--c-azul); font-size: 0.7rem; font-weight: 700; }

/* ---------- Lienzo Office: un documento por páginas ---------- */
.pa-lienzo { position: relative; width: min(1040px, 100%); margin: clamp(36px, 5vw, 56px) auto 0; }
.pa-lienzo__paginas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); margin: 0; padding: 0; list-style: none; counter-reset: pagina; }
.pa-lienzo__pagina {
  position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); aspect-ratio: 1 / 1.414; overflow: hidden;
  border-radius: 8px; background: var(--c-blanco); color: var(--c-azul); text-align: left; box-shadow: var(--sombra-3);
  counter-increment: pagina;
}
.pa-lienzo__pagina:nth-child(odd) { transform: translateY(14px); }
.pa-lienzo__cabeza { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 10px; border-bottom: 1px solid #E6E4E5; font-size: 0.7rem; font-weight: 700; }
.pa-lienzo__cabeza::after { content: counter(pagina); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c-azul); color: var(--c-blanco); font-size: 0.66rem; }
.pa-lienzo__tipo { display: inline-flex; align-items: center; gap: 6px; }
.pa-lienzo__tipo::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--tipo, #3C4C4C); }
.pa-lienzo__pagina--texto { --tipo: #3C4C8E; }
.pa-lienzo__pagina--hoja { --tipo: #2F7A4A; }
.pa-lienzo__pagina--diapositivas { --tipo: #B4572E; }
.pa-lienzo__pagina--sketch { --tipo: #8E3B3F; }
.pa-lienzo__cuerpo { padding: 12px 10px; min-width: 0; }
.pa-lienzo__h { margin: 0 0 8px; font: 800 clamp(0.72rem, 1.2vw, 1rem)/1.15 var(--f-titular); }
.pa-lienzo__pagina--texto .pa-renglones span { height: 4px; }
.pa-lienzo__pagina--texto .pa-renglones span:nth-child(5) { margin-top: 8px; }
.pa-celdas { display: grid; grid-template-columns: 18% repeat(3, minmax(0, 1fr)); border-top: 1px solid #D2D1D1; border-left: 1px solid #D2D1D1; font-size: clamp(0.5rem, 0.8vw, 0.68rem); font-variant-numeric: tabular-nums; }
.pa-celdas span { padding: 3px 4px; border-right: 1px solid #D2D1D1; border-bottom: 1px solid #D2D1D1; white-space: nowrap; overflow: hidden; }
.pa-celdas span:nth-child(-n+4), .pa-celdas span:nth-child(4n+1) { background: #EEF5F0; font-weight: 700; }
.pa-celdas span.pa-celdas__total { background: #DCEFE2; font-weight: 700; }
.pa-barras { display: flex; align-items: flex-end; gap: 6%; height: 30%; margin-top: 12px; padding: 0 4px; border-bottom: 1px solid #D2D1D1; }
.pa-barras span { flex: 1; border-radius: 3px 3px 0 0; background: #2F7A4A; }
.pa-barras span:nth-child(1) { height: 40%; }
.pa-barras span:nth-child(2) { height: 65%; }
.pa-barras span:nth-child(3) { height: 52%; }
.pa-barras span:nth-child(4) { height: 88%; }
.pa-diapos { display: grid; gap: 8px; }
.pa-diapo { display: grid; align-content: center; gap: 4px; aspect-ratio: 16 / 9; padding: 6px 8px; border-radius: 4px; background: #1E2025; color: var(--c-blanco); }
.pa-diapo--clara { background: #F4EFE4; color: var(--c-azul); }
.pa-diapo p { margin: 0; font: 800 clamp(0.55rem, 0.95vw, 0.8rem)/1.15 var(--f-titular); }
.pa-diapo span { display: block; width: 60%; height: 3px; border-radius: 2px; background: currentColor; opacity: 0.45; }
.pa-sketch { width: 100%; height: auto; color: #8E3B3F; }

/* ---------- Correo, calendario, contactos y avisos ---------- */
.pa-dia { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; width: min(980px, 100%); margin: clamp(36px, 5vw, 56px) auto 0; text-align: left; }
.pa-panel { padding: 18px; border-radius: 18px; background: var(--t-caja); }
.pa-panel__titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 12px; font: 800 1.15rem/1.2 var(--f-titular); }
.pa-panel__titulo small { font: 600 0.8rem/1.2 var(--f-interfaz); color: var(--t-suave); }
.pa-correo { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pa-correo li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--t-linea); font-size: 0.9rem; }
.pa-correo strong { font-weight: 700; }
.pa-correo span { grid-column: 1 / -1; color: var(--t-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-espacio { margin: 14px 0 0; font-size: 0.82rem; color: var(--t-suave); }
.pa-espacio__barra { height: 6px; margin-top: 6px; border-radius: 3px; background: var(--t-linea); overflow: hidden; }
.pa-espacio__barra span { display: block; width: 22%; height: 100%; background: var(--t-marca); }
.pa-columna { display: grid; gap: 12px; }
.pa-agenda { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 0.88rem; }
.pa-agenda li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 8px 10px; border-left: 3px solid var(--t-marca); border-radius: 4px 10px 10px 4px; background: rgba(127, 127, 127, 0.08); }
.pa-agenda time { font-weight: 700; font-variant-numeric: tabular-nums; }
.pa-contactos { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pa-contactos li { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--c-arena); color: var(--c-azul); font-size: 0.8rem; font-weight: 700; }

/* ---------- Comparativa de planes: marcas, precio y botones ---------- */
.pa-si, .pa-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 0.95rem; line-height: 1; }
.pa-si { background: var(--t-boton-fondo); color: var(--t-boton-texto); }
.pa-no { color: var(--t-suave); }
.comparativa .pa-plan-precio { display: block; margin-top: 6px; font: 600 0.88rem/1.3 var(--f-interfaz); color: var(--t-suave); }
.comparativa tfoot td { border-bottom: 0; padding-top: 22px; }
.pa-tabla { width: 100%; overflow-x: auto; }

/* ---------- Mensa AI: ventana de conversación con fuentes ---------- */
.pa-mensa {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); width: min(1000px, 100%); overflow: hidden;
  border-radius: 22px 22px 0 0; background: #24272D; color: var(--c-blanco); text-align: left;
  box-shadow: var(--sombra-4), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.pa-mensa__lateral { display: grid; align-content: start; gap: 4px; padding: 18px 14px; border-right: 1px solid rgba(255, 255, 255, 0.08); background: #1B1D21; font-size: 0.82rem; }
.pa-mensa__nueva { margin: 0 0 10px; padding: 8px 12px; border-radius: 999px; background: var(--c-arena); color: var(--c-azul); font-weight: 700; text-align: center; }
.pa-mensa__grupo { margin: 10px 0 2px; font: 700 0.66rem/1.2 var(--f-interfaz); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-dorado-texto); }
.pa-mensa__conv { margin: 0; padding: 6px 8px; border-radius: 10px; color: #D6D6DA; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-mensa__conv--activa { background: rgba(255, 255, 255, 0.08); color: var(--c-blanco); }
.pa-mensa__chat { display: grid; align-content: start; gap: 14px; padding: 22px clamp(16px, 3vw, 32px) 18px; }
.pa-mensa__burbuja { max-width: 86%; margin: 0; padding: 12px 16px; border-radius: 18px; line-height: 1.5; font-size: 0.95rem; }
.pa-mensa__burbuja--tu { justify-self: end; background: var(--c-arena); color: var(--c-azul); border-bottom-right-radius: 6px; }
.pa-mensa__burbuja--mensa { justify-self: start; background: #33373F; border-bottom-left-radius: 6px; }
.pa-fuentes { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.pa-fuente { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: #1E2025; color: #E2E2E6; font-size: 0.76rem; font-weight: 600; }
.pa-fuente img { width: 20px; height: 20px; border-radius: 50%; }
.pa-fuente__n { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c-arena); color: var(--c-azul); font-size: 0.68rem; font-weight: 700; }
.pa-mensa__campo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding: 8px 8px 8px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); color: #BDBDC2; font-size: 0.9rem; }
.pa-mensa__enviar { padding: 6px 14px; border-radius: 999px; background: var(--c-arena); color: var(--c-azul); font-weight: 700; font-size: 0.82rem; }
.pa-sugerencias { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: min(860px, 100%); margin: clamp(28px, 4vw, 44px) auto 0; padding: 0; list-style: none; }
.pa-sugerencias li { padding: 12px 18px; border-radius: 14px; background: var(--t-caja); border: 1px solid var(--t-linea); font-size: 0.98rem; }

/* ---------- Archives Management: configurador del disco ---------- */
.pa-config { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; width: min(1080px, 100%); margin: clamp(36px, 5vw, 56px) auto 0; text-align: left; }
.pa-pasos { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.pa-paso { padding: 20px 22px; border-radius: 18px; background: var(--t-caja); counter-increment: paso; }
.pa-paso__titulo { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 800 1.2rem/1.2 var(--f-titular); }
.pa-paso__titulo::before { content: counter(paso); display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--c-azul); color: var(--c-blanco); font: 700 0.85rem/1 var(--f-interfaz); }
.pa-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pa-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 3px 14px 3px 3px; border-radius: 999px; border: 1px solid #B9B2A0; font-size: 0.88rem; font-weight: 600; }
.pa-chip--texto { padding-left: 14px; }
.pa-chip img { width: 26px; height: 26px; border-radius: 50%; }
.pa-chip--elegida { border-color: var(--c-azul); background: var(--c-azul); color: var(--c-blanco); }
.pa-espec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.pa-espec div { padding: 10px 12px; border-radius: 12px; background: var(--t-fondo); }
.pa-espec dt { font: 700 0.7rem/1.2 var(--f-interfaz); letter-spacing: 0.1em; text-transform: uppercase; color: #6B5418; }
.pa-espec dd { margin: 4px 0 0; font-weight: 600; }
.pa-resumen { position: sticky; top: calc(var(--alto-cabecera, 64px) + 24px); align-self: start; display: grid; gap: 14px; padding: 22px; border-radius: 18px; background: var(--c-azul); color: var(--c-blanco); }
.pa-resumen .disco { width: 100%; }
.pa-resumen__fila { display: flex; justify-content: space-between; gap: 12px; margin: 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.95rem; }
.pa-resumen__fila strong { font-family: var(--f-titular); font-weight: 800; font-size: 1.2rem; }
.pa-resumen .tesela__boton { --t-boton-fondo: var(--c-arena); --t-boton-texto: var(--c-azul); --t-boton-hover: #F2E8CC; }

/* =====================================================================
   Pantallas medianas y móvil
   ===================================================================== */
@media (max-width: 1023.98px) {
  .pa-config { grid-template-columns: minmax(0, 1fr); }
  .pa-resumen { position: static; }
  .pa-lienzo__paginas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-lienzo__pagina:nth-child(odd) { transform: none; }
}
@media (max-width: 833.98px) {
  .pa-dos { grid-template-columns: minmax(0, 1fr); }
  .pa-dos--invertido > :first-child { order: 0; }
  .pa-dos .producto-seccion__titular, .pa-dos .producto-seccion__texto { text-align: center; margin-inline: auto; }
  .pa-dos { text-align: center; }
  .pa-dos .pa-lista { text-align: left; }
  .pa-dos .producto-seccion__acciones { justify-content: center; }
  .pa-dos .pa-avisos { margin-inline: auto; }
  .pa-mesas { grid-template-columns: minmax(0, 1fr); width: min(460px, 100%); }
  .pa-dia { grid-template-columns: minmax(0, 1fr); }
  .pa-mensa { grid-template-columns: minmax(0, 1fr); }
  .pa-mensa__lateral { display: none; }
  .pa-navegador__cuerpo { grid-template-columns: minmax(0, 1fr); }
  .pa-navegador__lateral { grid-auto-flow: column; grid-auto-columns: max-content; overflow: hidden; border-right: 0; border-bottom: 1px solid #E6E4E5; }
  .pa-navegador__fichas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-epv { aspect-ratio: 4 / 5; }
  .pa-epv__barra p + p { display: none; }
  .pa-epv__edicion { left: 5%; top: 12%; width: 28%; }
  .pa-epv__articulo { left: 37%; top: 10%; width: 28%; }
  .pa-epv__imagen { left: 68%; top: 14%; width: 28%; }
  .pa-epv__video { left: 5%; top: 46%; width: 40%; }
  .pa-epv__libro { left: 5%; top: 70%; width: 22%; }
  .pa-epv__postit { width: 22%; }
  .pa-epv__postit--1 { left: 50%; top: 46%; }
  .pa-epv__postit--2 { left: 74%; top: 48%; }
  .pa-epv__nube { left: 31%; top: 72%; width: 31%; padding: 8px 10px; }
  .pa-epv__mesa { left: 66%; top: 70%; width: 34%; }
}
@media (max-width: 560px) {
  .pa-lector__estante { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-lector__estante li:nth-child(n+3) { display: none; }
  .pa-lector__pestanas li:not(:nth-child(2)) { display: none; }
  .pa-portatil { width: 100%; }
  .pa-telefono { display: none; }
  .pa-modos { grid-template-columns: minmax(0, 1fr); }
  .pa-espec { grid-template-columns: minmax(0, 1fr); }
  .pa-navegador__fichas { grid-template-columns: minmax(0, 1fr); }
  .pa-lienzo__paginas { gap: 10px; }
  .pa-epv__etiqueta { font-size: 0.58rem; padding: 1px 6px; }
  .pa-epv__mesa span:nth-of-type(n+2) { display: none; }
  .pa-celdas { grid-template-columns: 30% repeat(3, minmax(0, 1fr)); }
  .pa-barras { display: none; }
}
@media (max-width: 600px) {          /* comparativa: cabe entera a 375 px, sin desplazamiento lateral */
  .comparativa .tesela__boton { min-height: 40px; padding: 8px 12px; font-size: 0.9rem; }
  .comparativa th, .comparativa td { padding-inline: 6px; }
  .comparativa tbody th { font-size: 0.88rem; hyphens: auto; }
  .comparativa thead th small { font-size: 0.78rem; }
}

/* Movimiento y transparencia reducidos */
@media (prefers-reduced-motion: reduce) {
  .pa-boton--contorno { transition: none; }
}
/* Sin superficies translúcidas propias: nada que cambiar con «reducir transparencia» */

/* ---------- Mensa AI: texto de la burbuja y la Mesa con su pregunta ---------- */
.pa-mensa__texto { margin: 0; }
.pa-mesa-mensa { display: grid; gap: 12px; width: min(460px, 100%); justify-self: center; text-align: left; }
.pa-mesa-mensa .pa-mesa { box-shadow: 0 1px 3px rgba(30, 32, 37, 0.1); }

/* ---------- Archives Management: héroe, dos tarjetas, enciclopedia y resumen ---------- */
.pa-disco-heroe { padding-bottom: clamp(48px, 6vw, 88px); }
.pa-tarjetas--dos { width: min(860px, 100%); }
.pa-enciclopedia {
  display: grid; gap: 14px; padding: 24px; border-radius: 18px; text-align: left;
  background: var(--c-blanco); color: var(--c-azul); border-left: 4px solid var(--c-oro);
  box-shadow: 0 1px 3px rgba(30, 32, 37, 0.08), 0 12px 30px rgba(74, 46, 26, 0.12);
}
.pa-enciclopedia__rotulo { margin: 0; font: 700 0.72rem/1.2 var(--f-interfaz); letter-spacing: 0.12em; text-transform: uppercase; color: #6B5418; }
.pa-enciclopedia__titulo { margin: 0; font: 800 clamp(1.4rem, 2.4vw, 1.9rem)/1.15 var(--f-titular); }
.pa-enciclopedia__lecciones { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pa-enciclopedia__lecciones li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #F5F5F7; font-weight: 600; }
.pa-enciclopedia__lecciones span { font: 700 0.7rem/1.2 var(--f-interfaz); letter-spacing: 0.1em; text-transform: uppercase; color: #4A4D55; }
.pa-resumen__titulo { margin: 0; font: 800 1.35rem/1.2 var(--f-titular); }