/* ==========================================================================
   MAQUETAS DE INTERFAZ
   Aparatos y pantallas dibujados en HTML, no imágenes generadas.
   Se usan dentro de la web (nítidas y ligeras) y se exportan a PNG con
   exportar_maquetas.py para reels y carruseles.

   Dos piezas que se combinan:
     aparato   .mq-fono  .mq-mac
     pantalla  .mq-correo  .mq-asistente  .mq-chat  .mq-agenda  .mq-flujo

   Las pantallas imitan la disposición y el aire de cada app, sin copiar sus
   logotipos. El muro de integraciones sí usa los logos reales, tomados de
   Simple Icons (CC0). Ver la nota de marcas registradas más abajo.
   ========================================================================== */

.mq{
  /* Tipografía de sistema a propósito: con la fuente de la marca no se leerían
     como aparatos de verdad, se leerían como parte de la web. */
  font-family:-apple-system,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  color:#111;
}
.mq *{box-sizing:border-box}

/* ---------------------------------------------------------------- aparatos */

/* iPhone.
   Las proporciones salen del aparato real: pantalla 19.5:9, isla al 32% del
   ancho, radio de esquina al 14%. El borde de titanio es un degradado, no un
   color plano: es lo que más delata a una maqueta hecha a ojo. */
.mq-fono{
  width:252px;padding:3px;position:relative;border-radius:44px;
  background:linear-gradient(150deg,#8C8C92 0%,#3A3A3E 18%,#6E6E76 42%,
                             #2E2E32 62%,#7C7C84 82%,#39393D 100%);
  box-shadow:0 30px 70px rgba(24,18,42,.38), 0 4px 14px rgba(24,18,42,.22);
}
/* Se llama .chasis y no .cuerpo: .cuerpo ya es el texto del correo, y dos
   cosas distintas con el mismo nombre acaban chocando. */
.mq-fono .chasis{
  background:#0A0A0C;border-radius:41px;padding:9px;position:relative;
}
.mq-fono .lienzo{
  background:#fff;border-radius:33px;overflow:hidden;position:relative;
  aspect-ratio:9/19.5;display:flex;flex-direction:column;
}
/* Reflejo diagonal sobre el cristal, muy tenue */
.mq-fono .lienzo::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:20;
  background:linear-gradient(114deg,rgba(255,255,255,.30) 0%,
    rgba(255,255,255,.06) 22%,rgba(255,255,255,0) 42%);
}
.mq-fono .isla{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:80px;height:23px;background:#000;border-radius:99px;z-index:12;
}
/* La cámara dentro de la isla */
.mq-fono .isla::after{
  content:"";position:absolute;right:7px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:99px;
  background:radial-gradient(circle at 35% 30%,#2B3550 0%,#0B0D14 62%);
}
/* Botones laterales */
.mq-fono::before,.mq-fono::after{
  content:"";position:absolute;width:2.5px;border-radius:2px;
  background:linear-gradient(#6E6E76,#3A3A3E);
}
.mq-fono::before{left:-2px;top:112px;height:32px;box-shadow:0 44px 0 #4A4A50,0 -56px 0 #4A4A50}
.mq-fono::after{right:-2px;top:128px;height:54px}
.mq-fono .estado{
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 20px 7px;font-size:11px;font-weight:600;position:relative;z-index:11;
}
.mq-fono .estado .iconos{display:flex;gap:4px;align-items:center}
.mq-fono .inicio{
  width:110px;height:4.5px;background:#0B0B0C;border-radius:99px;
  margin:auto auto 8px;opacity:.85;flex:none;
}

/* Portátil.
   Detalles que separan una maqueta creíble de una caja gris: marcos finísimos
   (no un borde grueso), la muesca de la cámara arriba, y una base trapezoidal
   más ancha que la tapa, que es lo que da la sensación de estar apoyado. */
.mq-mac{width:100%;max-width:450px;position:relative}
.mq-mac .tapa{
  background:linear-gradient(158deg,#3C3C40,#1C1C1E 45%,#2A2A2D);
  border-radius:13px 13px 4px 4px;padding:11px 11px 12px;position:relative;
  box-shadow:0 26px 64px rgba(24,18,42,.32), 0 3px 10px rgba(24,18,42,.20);
}
/* Proporción fija de pantalla de portátil. Sin esto la altura la marcaba el
   contenido y, en una columna estrecha, el "portátil" salía vertical. */
.mq-mac .lienzo{
  background:#fff;border-radius:8px;overflow:hidden;position:relative;
  aspect-ratio:16/10;display:flex;flex-direction:column;
}
/* Muesca de la cámara, recortada sobre el marco superior */
.mq-mac .tapa::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:84px;height:11px;background:#1C1C1E;border-radius:0 0 7px 7px;z-index:6;
}
/* Reflejo del cristal */
.mq-mac .lienzo::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:20;
  background:linear-gradient(112deg,rgba(255,255,255,.26) 0%,
    rgba(255,255,255,.04) 24%,rgba(255,255,255,0) 44%);
}
/* Base: más ancha que la tapa y en perspectiva */
.mq-mac .base{
  height:13px;margin:0 -22px;position:relative;
  background:linear-gradient(#C9C9CE 0%,#AFAFB6 55%,#8E8E96 100%);
  border-radius:0 0 5px 5px;
  clip-path:polygon(0 0,100% 0,98.4% 100%,1.6% 100%);
}
/* La hendidura para abrir la tapa */
.mq-mac .base::after{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:72px;height:5px;background:rgba(0,0,0,.16);border-radius:0 0 7px 7px;
}
/* Sombra de apoyo */
.mq-mac .base::before{
  content:"";position:absolute;bottom:-13px;left:6%;right:6%;height:16px;
  background:radial-gradient(ellipse at center,rgba(24,18,42,.26),transparent 72%);
}
.mq-mac .titulo{
  background:#F6F6F7;padding:9px 12px;border-bottom:1px solid #E6E6E8;
  display:flex;gap:9px;align-items:center;
  /* .titulo global (encabezado) mete font-size, letter-spacing y max-width;
     aquí es una barra de título de ventana, así que se anulan. */
  font-size:11px;letter-spacing:normal;font-weight:500;max-width:none;line-height:1.2;
}
.mq-mac .semaforo{display:flex;gap:5px}
.mq-mac .semaforo i{width:10px;height:10px;border-radius:99px;display:block}
.mq-mac .semaforo i:nth-child(1){background:#FF5F57}
.mq-mac .semaforo i:nth-child(2){background:#FEBC2E}
.mq-mac .semaforo i:nth-child(3){background:#28C840}
.mq-mac .titulo span{font-size:11px;color:#6B7280;font-weight:500}

/* --------------------------------------------------------------- pantallas */

/* Cliente de correo, aire de Gmail */
.mq-correo{font-size:11.5px;line-height:1.4}
.mq-correo .buscar{
  display:flex;align-items:center;gap:9px;margin:2px 12px 8px;
  background:#F1F3F4;border-radius:99px;padding:8px 13px;
  font-size:11px;color:#5F6368;
}
.mq-correo .buscar .yo{
  margin-left:auto;width:20px;height:20px;border-radius:99px;background:#7B9E87;
  color:#fff;display:grid;place-items:center;font-size:9.5px;font-weight:600;
}
.mq-correo .asunto{
  font-size:13.5px;font-weight:400;padding:0 14px 8px;line-height:1.3;
  display:flex;align-items:flex-start;gap:8px;
}
.mq-correo .etiqueta{
  font-size:9px;background:#E8F0E9;color:#2F7346;padding:2px 7px;border-radius:4px;
  font-weight:500;flex:none;margin-top:3px;
}
.mq-correo .hilo{padding:10px 14px 10px;border-top:1px solid #F1F3F4}
.mq-correo .remite{display:flex;gap:9px;align-items:center;margin-bottom:8px}
.mq-correo .avatar{
  width:30px;height:30px;border-radius:99px;flex:none;background:#C2532F;
  color:#fff;display:grid;place-items:center;font-size:12px;font-weight:500;
}
.mq-correo .quien{font-size:11.5px;font-weight:600;line-height:1.3}
.mq-correo .quien small{display:block;font-weight:400;color:#5F6368;font-size:10px}
.mq-correo .cuerpo{color:#3C4043;font-size:11px;margin-bottom:9px;line-height:1.4}
/* La orden que da la persona: deliberadamente diminuta. Toda la fuerza de la
   maqueta está en el contraste entre esto y lo que sale debajo. */
.mq-correo .pedido{
  align-self:flex-end;background:#2F7346;color:#fff;font-size:11px;
  border-radius:14px 14px 4px 14px;padding:7px 12px;margin:0 0 10px auto;
  display:table;font-weight:500;
}
.mq-correo .propuesta{background:#F1F3F4;border-radius:14px;padding:11px 12px}
.mq-correo .propuesta ol{margin:6px 0 0;padding-left:16px;font-size:10.5px;
  color:#3C4043;line-height:1.5}
.mq-correo .propuesta li{margin-bottom:4px}
.mq-correo .propuesta .cierra{margin-top:7px;font-size:10.5px;color:#3C4043}
.mq-correo .marca-ia{
  display:flex;align-items:center;gap:6px;color:#2F7346;font-weight:600;
  font-size:10px;margin-bottom:5px;
}
.mq-correo .marca-ia i{width:6px;height:6px;border-radius:99px;background:#2F7346;display:block}
.mq-correo .marca-ia small{margin-left:auto;color:#9AA0A6;font-weight:400;font-size:9.5px}
.mq-correo .acciones{display:flex;justify-content:flex-end;gap:9px;align-items:center;margin-top:9px}
.mq-correo .acciones span{font-size:11px;color:#5F6368}
.mq-correo .acciones b{
  background:#1A73E8;color:#fff;font-weight:500;font-size:11px;
  padding:6px 15px;border-radius:99px;
}

/* Chat con la IA en el teléfono */
.mq-chat{font-size:11.5px;line-height:1.45;display:flex;flex-direction:column;min-height:330px}
.mq-chat .cab{
  padding:4px 14px 11px;border-bottom:1px solid #F0F0EE;
  font-size:12px;font-weight:600;text-align:center;
}
.mq-chat .rollo{flex:1;padding:13px 13px 0;display:flex;flex-direction:column;gap:10px}
.mq-chat .mia{
  align-self:flex-end;max-width:80%;background:#2F7346;color:#fff;
  border-radius:16px 16px 4px 16px;padding:9px 12px;
}
.mq-chat .suya{
  align-self:flex-start;max-width:88%;background:#F4F4F2;
  border-radius:16px 16px 16px 4px;padding:9px 12px;color:#1F2328;
}
.mq-chat .suya b{display:block;margin-bottom:5px}
.mq-chat .suya ul{margin:0;padding-left:15px;list-style:disc}
.mq-chat .suya li{margin-bottom:3px;line-height:1.4}
/* El adjunto de voz: 6 minutos de audio entrando, una lista saliendo. Ahí es
   donde se ve el valor, no en el texto de la respuesta. */
.mq-chat .adjunto{
  align-self:flex-end;max-width:82%;background:#EDF2EE;border:1px solid #DCE6DF;
  border-radius:14px;padding:8px 11px;display:flex;gap:9px;align-items:center;
  font-size:11px;font-weight:500;color:#2F7346;
}
.mq-chat .adjunto .ico{
  width:24px;height:24px;border-radius:99px;background:#2F7346;color:#fff;
  display:grid;place-items:center;font-size:12px;flex:none;
}
.mq-chat .adjunto small{display:block;font-weight:400;color:#6B7280;font-size:9.5px}
.mq-chat .escribir{
  margin:12px 13px 0;background:#F1F3F4;border-radius:99px;
  padding:10px 15px;font-size:11px;color:#9AA0A6;display:flex;align-items:center;
}
.mq-chat .escribir::after{
  content:"";margin-left:auto;width:22px;height:22px;border-radius:99px;
  background:#2F7346;
}

/* Asistente de escritorio con instrucciones guardadas */
.mq-asistente{display:grid;grid-template-columns:96px 1fr;flex:1;min-height:0;font-size:11px}
.mq-asistente .lateral{background:#FAFAF9;border-right:1px solid #ECECEA;padding:12px 9px}
.mq-asistente .cabecilla{
  font-size:8.5px;text-transform:uppercase;letter-spacing:.09em;
  color:#9CA3AF;margin-bottom:8px;
}
.mq-asistente .lateral a{
  display:block;font-size:10px;color:#4B5563;padding:6px 8px;border-radius:7px;
  margin-bottom:2px;text-decoration:none;
}
.mq-asistente .lateral a.on{background:#EAF1EC;color:#2F7346;font-weight:600}
.mq-asistente .panel{padding:14px 16px}
.mq-asistente .panel h4{font-size:13px;font-weight:600;margin:0 0 3px}
.mq-asistente .panel .nota{font-size:10px;color:#6B7280;margin-bottom:11px}
.mq-asistente ul{display:block;margin:0;padding:0;list-style:none}
.mq-asistente li{
  background:none;border:0;border-radius:0;border-bottom:1px solid #F0F0EE;
  padding:8px 0;margin:0;font-size:11px;color:#374151;line-height:1.45;
  display:flex;gap:9px;align-items:flex-start;
}
.mq-asistente li:last-child{border-bottom:0}
.mq-asistente li b{color:#2F7346;font-weight:600;flex:none;font-size:10px;padding-top:1px}
.mq-asistente .guardado{
  display:flex;align-items:center;gap:6px;margin-top:12px;
  font-size:10px;color:#2F7346;font-weight:500;
}

/* Agenda de la semana */
.mq-agenda{font-size:10.5px;flex:1;min-height:0}
.mq-agenda .mes{
  padding:12px 16px 10px;font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:8px;
}
.mq-agenda .mes small{font-size:10px;color:#6B7280;font-weight:400;margin-left:auto}
/* Se llama .dias y no .rejilla a propósito: .rejilla es un nombre demasiado
   común y chocaba con la cuadrícula de la galería que la contiene. */
.mq-agenda .dias{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:#EFEFED}
.mq-agenda .dia{background:#fff;min-height:88px;padding:8px 7px}
.mq-agenda .dia .num{font-size:9.5px;color:#9CA3AF;margin-bottom:5px;white-space:nowrap}
.mq-agenda .dia.hoy .num{color:#2F7346;font-weight:700}
.mq-agenda .cita{
  background:#EAF1EC;color:#2F7346;border-radius:5px;padding:4px 5px;
  font-size:8.5px;line-height:1.25;margin-bottom:3px;font-weight:500;
}
.mq-agenda .cita.otra{background:#F1F1EF;color:#5F6368;font-weight:400}

/* Flujo de automatización */
.mq-flujo{display:grid;gap:12px;width:100%;max-width:340px;text-align:center;font-size:13px}
.mq-flujo .nodo{
  background:var(--bg);border:1px solid var(--line);border-radius:15px;padding:13px 15px;font-weight:600;
  color:var(--ink);box-shadow:0 8px 24px rgba(24,50,32,.14), 0 1px 2px rgba(24,50,32,.06);
}
.mq-flujo .nodo small{
  display:block;font-size:11px;color:var(--muted);font-weight:400;margin-top:3px;
}
.mq-flujo .centro{background:var(--accent);border-color:var(--accent);color:var(--on-accent);
  box-shadow:0 12px 28px rgba(24,50,32,.30), 0 0 0 6px color-mix(in oklab,var(--accent) 12%,transparent)}
.mq-flujo .centro small{color:rgba(255,255,255,.8)}
.mq-flujo .flecha{color:var(--accent);font-size:16px;line-height:1;opacity:.6}
.mq-flujo .par{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* ==========================================================================
   MURO DE INTEGRACIONES
   Dos carriles que corren en sentidos opuestos. Cada carril duplica su
   contenido, y la animación recorre justo la mitad, así el bucle no tiene
   costura. Se genera con generar_muro.py desde los SVG de Simple Icons.

   Los logos son marcas registradas de sus dueños. Aparecen para decir qué
   herramientas se enseñan, nunca de forma que sugiera patrocinio.
   ========================================================================== */
.muro{position:relative;overflow:hidden;padding:4px 0}
/* Los bordes se desvanecen: sin esto los logos aparecen y desaparecen de golpe */
.muro::before,.muro::after{
  content:"";position:absolute;top:0;bottom:0;width:90px;z-index:3;pointer-events:none;
}
.muro::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.muro::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
@media (max-width:640px){
  .muro::before,.muro::after{width:44px}
  /* Fichas algo más chicas y menos separadas: en un teléfono caben más y
     el muro deja de leerse como cuatro iconos sueltos. */
  .muro .ficha{width:54px;height:54px;border-radius:14px}
  .muro .ficha svg{width:23px;height:23px}
  .muro .cinta-logos{gap:10px}
}

.muro .carril{overflow:hidden;padding:7px 0}
.muro .cinta-logos{display:flex;gap:14px;width:max-content;animation:correr 46s linear infinite}
.muro .carril.alreves .cinta-logos{animation-direction:reverse;animation-duration:58s}
.muro:hover .cinta-logos{animation-play-state:paused}
@keyframes correr{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.muro .ficha{
  width:62px;height:62px;flex:none;background:#fff;border-radius:16px;
  display:grid;place-items:center;border:1px solid var(--line);
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
}
.muro .ficha svg{width:26px;height:26px;display:block}
/* Los que traen su propio fondo son iconos de app, no marcas sueltas. Dentro
   de una ficha blanca su marca en blanco desaparece y solo queda el fondo
   pálido. Se les deja llenar la ficha entera, como en la pantalla de inicio
   de un teléfono. Así se lee sin tocar el logo, que no se puede modificar. */
.muro .ficha.app{padding:0;border:0;background:none;overflow:hidden}
.muro .ficha.app svg{width:100%;height:100%;border-radius:16px}
.muro .ficha:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(24,18,42,.14)}

/* Sin animación para quien la haya desactivado en su sistema */
@media (prefers-reduced-motion:reduce){
  .muro .cinta-logos{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .muro .ficha:hover{transform:none}
}

/* ---- Fila de herramientas conectadas ----
   Los recuadros están dimensionados para recibir el SVG oficial de cada marca,
   descargado de su propia página de prensa. Los glifos que trae por defecto
   son de categoría (sobre, burbuja, calendario), no imitaciones de logos:
   dibujar un logo ajeno de memoria sale mal e induce a error. */
.mq-conecta{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.mq-conecta .app{
  background:#fff;border-radius:13px;padding:10px 8px 8px;width:70px;
  box-shadow:0 6px 20px rgba(24,18,42,.13);text-align:center;
}
.mq-conecta .app{border:1px solid var(--line)}
.mq-conecta .marca{
  width:28px;height:28px;margin:0 auto 6px;border-radius:8px;
  display:grid;place-items:center;background:color-mix(in oklab,var(--accent) 9%,var(--bg));
}
.mq-conecta .marca svg{width:16px;height:16px;stroke:var(--accent)}
.mq-conecta .nombre{
  font-size:9.5px;color:var(--muted);font-weight:600;line-height:1.2;
  display:block;
}
/* Blanco pleno y una sombra corta: a .8 sobre el degradado daba 2.99 y el
   rótulo se perdía en la parte clara. */
/* Una pastilla oscura detrás en vez de fiarlo todo a una sombra: la sombra
   ayuda al ojo pero no arregla el contraste medible. A .8 daba 2.99. */
.mq-flujo .rotulo-conecta{
  font-size:10px;color:var(--accent-texto,var(--accent));font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;margin:0 auto 4px;
  background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:4px 12px;
  display:inline-flex;align-items:center;gap:6px;
  box-shadow:0 4px 14px rgba(24,50,32,.12);
}
.mq-flujo .rotulo-conecta::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--brand-green)}