/* ===== ClinIAssist · Portada + Agenda en vivo ===== */
.cia-hero, .cia-agenda { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #fff; box-sizing: border-box; }
.cia-hero *, .cia-agenda * { box-sizing: border-box; }

/* ---------- PORTADA ---------- */
/* min-height = alto de ventana menos el header (sticky, 69px medido:
   68px de .header-inner + 1px de su border-bottom) — así header + portada
   ocupan justo una pantalla completa, sin forzar scroll para ver el resto
   del contenido (botones, canales) en notebooks o con zoom de Windows. */
.cia-hero { position: relative; overflow: hidden; min-height: calc(100svh - 69px); background: #071d4d; display: flex; align-items: center; container-type: size; }
/* .cia-hero__escena imita "object-fit: cover" con container queries: su
   ancho/alto se calculan a partir del tamaño real de .cia-hero (el
   "contenedor de tamaño") y la proporción fija del archivo (2000×1116),
   igual que haría cover, pero exponiendo un marco con esa proporción exacta
   para que las burbujas, posicionadas en % DENTRO de él, caigan siempre
   sobre la persona correcta sin importar el ancho/alto real de la portada.
   El paneo (cia-paneo) se anima en .cia-hero__paneo, un wrapper interno,
   para no pisar el translateY(-50%) de .cia-hero__escena; las burbujas
   viven en ese mismo wrapper para moverse junto con la foto. */
.cia-hero__escena { position: absolute; z-index: 0; right: 0; top: 0;
  width: max(100cqw, 179.2cqh); height: max(100cqh, 55.8cqw); pointer-events: none; }
.cia-hero__paneo { position: absolute; inset: 0; animation: cia-paneo 28s ease-in-out infinite alternate; transform-origin: 70% 30%; will-change: transform; }
.cia-hero__bg { width: 100%; height: 100%; display: block; opacity: .9; }
@keyframes cia-paneo {
  0%   { transform: scale(1.05) translate3d(0,0,0); }
  50%  { transform: scale(1.08) translate3d(-1.2%,.3%,0); }
  100% { transform: scale(1.06) translate3d(-2%,.6%,0); }
}
.cia-hero__overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(7,29,77,.97) 0%, rgba(7,29,77,.92) 30%, rgba(7,29,77,.62) 42%, rgba(7,29,77,.12) 54%, rgba(7,29,77,.2) 100%); }
/* Fundido inferior. En modo oscuro la sección siguiente no tiene color
   propio: muestra el degradado del <body>. Por eso no se pinta un color
   encima: .cia-hero__fondo (foto + overlay) lleva una máscara que vuelve
   transparente su último 16 %, y la portada no tiene fondo propio en modo
   oscuro, así la foto se funde exactamente con el fondo de la página, sin
   línea. En modo claro la portada mantiene su fondo azul y corta limpio
   (fundir una portada oscura hacia blanco lavaría el texto). */
.cia-hero__fondo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .cia-hero { background: transparent; }
  :root:not([data-theme="light"]) .cia-hero__fondo {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%); }
}
:root[data-theme="dark"] .cia-hero { background: transparent; }
:root[data-theme="dark"] .cia-hero__fondo {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 84%, transparent 100%); }

.cia-hero__burbujas { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cia-hero__escena .cia-burbuja { pointer-events: auto; cursor: default; }
.cia-burbuja { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -100%); pointer-events: auto;
  display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; white-space: nowrap; font-size: 11px;
  background: rgba(7,29,77,.38); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(125,211,252,.35); box-shadow: 0 0 14px rgba(56,189,248,.22);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; transform-origin: center; }
.cia-burbuja:hover { transform: translate(-50%, -100%) scale(1.12); background: rgba(7,29,77,.6); box-shadow: 0 0 22px rgba(56,189,248,.45); z-index: 3; }
/* Variante lateral: para burbujas que quedarían cortadas por el borde
   superior si se anclan encima de la cabeza (p. ej. Valentina, muy arriba
   en la foto); se ancla al costado con un pequeño margen en vez de encima. */
.cia-burbuja--lateral { transform: translate(calc(-100% - 10px), -50%); }
.cia-burbuja--lateral:hover { transform: translate(calc(-100% - 10px), -50%) scale(1.12); }
/* Variante centrada: la burbuja se centra sobre el punto (p. ej. el pecho de Valentina). */
.cia-burbuja--centro { transform: translate(-50%, -50%); }
.cia-burbuja--centro:hover { transform: translate(-50%, -50%) scale(1.12); }
.cia-burbuja strong { font-weight: 700; }
.cia-burbuja span { color: #dbe6ff; }

.cia-hero__contenido { position: relative; z-index: 3; max-width: 1440px; margin: 0 auto; width: 100%; padding-inline: clamp(24px, 4vw, 64px); padding-top: clamp(48px, 9vh, 100px); padding-bottom: clamp(36px, 7vh, 90px); pointer-events: none; }
/* Solo los enlaces/botones del texto reciben el mouse: el bloque de texto
   es ancho y, si no, tapaba las burbujas de Mateo y Emilia. */
.cia-hero__texto { pointer-events: none; }
.cia-hero__texto a, .cia-hero__texto button { pointer-events: auto; }
.cia-hero__texto { --h1-size: clamp(34px, min(4.25vw, 7.6vh), 67px); max-width: 640px; padding: 0; }
.cia-hero h1 { margin: 0; font-size: var(--h1-size); line-height: 1.04; font-weight: 800; letter-spacing: -.02em; }
.cia-hero h1 .cia-l { display: block; white-space: nowrap; }
.cia-hero h1 .cia-l--sub { font-weight: 400; color: #c7d7fb; white-space: normal; text-wrap: balance; max-width: 9.5em; }
.cia-hero__sub { max-width: 480px; margin: clamp(10px, 2vh, 20px) 0 0; font-size: clamp(14px, min(1.15vw, 2.2vh), 17px); line-height: 1.6; color: #f1f5ff; text-shadow: 0 1px 12px rgba(4,14,40,.6); }
.cia-hero__sub strong { color: #7dd3fc; }
.cia-sellos { margin-top: clamp(10px, 1.8vh, 16px); display: flex; flex-wrap: wrap; gap: 8px; }
.cia-sello { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(34,211,238,.08); border: 1px solid rgba(34,211,238,.3); font-size: 12px; font-weight: 600; color: #cfe9f5; }
.cia-sello svg { width: 13px; height: 13px; flex-shrink: 0; }
.cia-botones { margin-top: clamp(14px, 2.6vh, 26px); display: flex; flex-wrap: wrap; gap: 12px; }
.cia-btn { display: inline-flex; align-items: center; gap: 10px; padding: clamp(11px, 1.6vh, 14px) 22px; border-radius: 12px; font-weight: 700; font-size: clamp(15px, 2vh, 16.5px); text-decoration: none; color: #fff; }
.cia-btn--primario { background: linear-gradient(90deg, #0891d1, #2563eb); }
.cia-btn--secundario { border: 1px solid #3b6fd1; background: rgba(11,42,107,.85); }
.cia-btn:hover { filter: brightness(1.08); }
.cia-canales { margin-top: clamp(14px, 2.6vh, 24px); padding-top: clamp(10px, 1.8vh, 18px); border-top: 1px solid rgba(255,255,255,.12); }
.cia-canales__titulo { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8fa6d1; }
.cia-canales__lista { margin-top: 10px; display: grid; grid-template-columns: repeat(5, auto); justify-content: start; gap: 10px 12px; }
.cia-canal { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #e2e8f0; white-space: nowrap; }
.cia-canal b { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(var(--c),.14); border: 1px solid rgba(var(--c),.4); }
.cia-hero__para { margin: 12px 0 0; font-size: 14px; color: #8fa6d1; }

@media (min-width: 900px) {
  .cia-hero__para { white-space: nowrap; }
}
@media (max-width: 900px) {
  /* min-height se mantiene (no se resetea a 0): container-type:size en
     .cia-hero necesita un alto explícito para no colapsar a 0px; como
     min-height nunca recorta contenido, si el texto envuelve más líneas en
     móvil la portada igual crece por sobre ese piso, sin perder nada. */
  .cia-hero__burbujas { display: none; }
  .cia-hero__overlay { background: linear-gradient(90deg, rgba(7,29,77,.95), rgba(7,29,77,.75)); }
}
@media (max-width: 520px) { .cia-canales__lista { grid-template-columns: repeat(3, auto); } }

/* ---------- AGENDA EN VIVO ---------- */
/* min-height = misma lógica que .cia-hero (ventana menos header de 69px),
   con flex centrando el contenido: así, al llegar a la sección (por menú o
   scroll), título + teléfono + calendario + leyenda quedan juntos en una
   sola pantalla, sin scroll interno. scroll-margin-top evita que el header
   sticky tape el principio al navegar con el ancla del menú. */
.cia-agenda {
  width: 100%;
  min-height: calc(100svh - 69px);
  display: flex;
  align-items: center;
  padding: clamp(20px, 3vh, 48px) clamp(24px, 4vw, 64px);
  scroll-margin-top: 69px;
  background: radial-gradient(ellipse at 50% 0%, #1546a6 0%, #0b2f7a 45%, #071d4d 100%);
  /* Alto del teléfono derivado del alto real disponible (ventana - header -
     ~210px de título/subtítulo/margen encima de la fila): mantiene 1:2 de
     proporción y escala junto con el panel, que mide lo mismo (ver abajo). */
  --alto-tel: clamp(440px, calc(100svh - 69px - 210px), 720px);
}
.cia-agenda__wrap { width: 100%; max-width: 1320px; margin: 0 auto; }
.cia-agenda h2 { margin: 0; text-align: center; font-size: clamp(26px, min(3vw, 4.6vh), 44px); line-height: 1.15; font-weight: 800; }
.cia-agenda__sub { margin: clamp(6px, 1.2vh, 16px) auto 0; max-width: 820px; text-align: center; font-size: clamp(14px, min(1.2vw, 2.1vh), 19px); line-height: 1.55; color: #cfe0ff; }
.cia-agenda__fila { margin-top: clamp(16px, 3vh, 48px); display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: clamp(20px, 2.5vw, 40px); }

/* Proporciones (border-radius, padding, cabecera) calculadas sobre la base
   original de 360×720px, para que el teléfono se vea igual, solo que a
   escala, en cualquier --alto-tel. */
.cia-tel { flex: 0 0 auto; height: var(--alto-tel); width: calc(var(--alto-tel) / 2); border-radius: calc(var(--alto-tel) * .072); background: #0b1220; padding: calc(var(--alto-tel) * .017); box-shadow: 0 30px 60px rgba(0,0,0,.45); position: relative; }
.cia-tel::before { content: ''; position: absolute; top: calc(var(--alto-tel) * .017); left: 50%; transform: translateX(-50%); width: 36%; height: calc(var(--alto-tel) * .039); background: #0b1220; border-radius: 0 0 18px 18px; z-index: 2; }
.cia-tel__pantalla { width: 100%; height: 100%; border-radius: calc(var(--alto-tel) * .056); overflow: hidden; background: #eef2f7; display: flex; flex-direction: column; }
.cia-tel__cab { background: #2e3a9e; padding: calc(var(--alto-tel) * .061) calc(var(--alto-tel) * .025) calc(var(--alto-tel) * .022); display: flex; align-items: center; gap: calc(var(--alto-tel) * .017); }
.cia-tel__cab img { width: calc(var(--alto-tel) * .064); height: calc(var(--alto-tel) * .064); border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid #fff; }
.cia-tel__nombre { font-weight: 700; font-size: calc(var(--alto-tel) * .024); }
.cia-tel__estado { font-size: calc(var(--alto-tel) * .018); color: #c7f9d4; display: flex; align-items: center; gap: 6px; }
.cia-tel__estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; }
.cia-chat { flex: 1; min-height: 0; overflow: hidden; padding: calc(var(--alto-tel) * .022) calc(var(--alto-tel) * .019); display: flex; flex-direction: column; justify-content: flex-end; gap: calc(var(--alto-tel) * .014); }
.cia-msg { display: none; max-width: 84%; font-size: clamp(11.5px, calc(var(--alto-tel) * .02), 14.5px); line-height: 1.4; padding: calc(var(--alto-tel) * .0125) calc(var(--alto-tel) * .017); color: #111827; }
.cia-msg.is-visible { display: block; animation: cia-aparece .35s ease-out; }
.cia-msg--paciente { align-self: flex-start; background: #fff; border-radius: 16px 16px 16px 4px; }
.cia-msg--ia { align-self: flex-end; background: #d9fdd3; border-radius: 16px 16px 4px 16px; }
.cia-msg--escribiendo { align-self: flex-end; background: #d9fdd3; border-radius: 16px 16px 4px 16px; padding: 12px 14px; gap: 5px; }
.cia-msg--escribiendo.is-visible { display: inline-flex; }
.cia-msg--escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: #16a34a; }
.cia-msg--escribiendo i:nth-child(2) { opacity: .6; } .cia-msg--escribiendo i:nth-child(3) { opacity: .3; }
.cia-msg--sistema { align-self: center; background: #cffafe; color: #155e75; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; }
.cia-tel__input { margin: 0 calc(var(--alto-tel) * .017) calc(var(--alto-tel) * .019); background: #fff; border-radius: 999px; padding: calc(var(--alto-tel) * .011) calc(var(--alto-tel) * .011) calc(var(--alto-tel) * .011) calc(var(--alto-tel) * .025); display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--alto-tel) * .019); color: #6b7280; }
.cia-tel__input b { width: calc(var(--alto-tel) * .05); height: calc(var(--alto-tel) * .05); border-radius: 50%; background: #0e7490; display: flex; align-items: center; justify-content: center; }
@keyframes cia-aparece { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* El panel mide lo mismo que el teléfono (var(--alto-tel)), así que todo su
   interior (equipo, calendario, leyenda) se comprime con clamp()/gap chicos
   para caber siempre en ese alto, sin scroll propio. */
.cia-panel { flex: 1 1 640px; min-width: 0; height: auto; min-height: var(--alto-tel); display: flex; flex-direction: column; background: #16233b; border: 1px solid #2c3e5e; border-radius: 28px; padding: clamp(14px, 2vh, 24px); }
.cia-envivo { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .12em; color: #f87171; margin-bottom: 12px; }
.cia-envivo i { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; animation: cia-pulso 1.6s infinite; }
.cia-equipo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cia-asist { padding: clamp(8px, 1.2vh, 12px) 12px; border-radius: 16px; background: #1b2a44; border: 1px solid #334766; }
.cia-asist__top { display: flex; align-items: center; gap: 10px; }
.cia-asist__top img { width: clamp(30px, 4vh, 40px); height: clamp(30px, 4vh, 40px); border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid var(--c); }
.cia-asist__top div { flex: 1; min-width: 0; }
.cia-asist__top strong { font-size: 15px; }
.cia-asist__top small { display: block; font-size: 12px; color: #94a3b8; }
.cia-asist__num { text-align: right; }
.cia-asist__num b { font-size: clamp(20px, 3vh, 26px); line-height: 1; display: block; }
.cia-asist__num span { font-size: 12px; color: #cbd5e1; }
.cia-asist__ult { margin-top: 6px; display: flex; gap: 7px; font-size: clamp(11px, 1.6vh, 12.5px); line-height: 1.4; color: #cbd5e1; min-height: 0; }
.cia-asist__ult::before { content: ''; width: 8px; height: 8px; border-radius: 2px; background: var(--c); flex: none; margin-top: 5px; }

.cia-cal__dias, .cia-cal__fila { display: grid; grid-template-columns: 56px repeat(5, minmax(0, 1fr)); gap: 8px; }
.cia-cal__dias { margin-top: clamp(10px, 1.6vh, 20px); font-size: 14px; color: #cbd5e1; font-weight: 700; text-align: center; }
.cia-cal__grid { margin-top: 10px; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(4px, .7vh, 7px); }
.cia-cal__fila { flex: 1; min-height: 0; }
.cia-cal__hora { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: #94a3b8; align-self: center; }
.cia-slot { position: relative; min-width: 0; border-radius: 8px; display: flex; align-items: center; padding: 0 22px 0 10px; font-size: clamp(11px, 1.6vh, 14px); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cia-slot.is-pendiente { background: #172235; border: 1px dashed #24344d; }
.cia-slot.is-ia { background: #22d3ee; color: #06283d; animation: cia-aparece .3s ease-out; }
.cia-slot.is-ia::after { content: ''; position: absolute; top: 0; right: 0; border-top: 20px solid var(--c); border-left: 20px solid transparent; }
.cia-slot.is-recepcion { background: #334155; font-weight: 600; }
.cia-slot.is-libre { background: #172235; border: 1px dashed #3b5170; justify-content: center; padding: 0; font-size: 12px; font-weight: 500; color: #8a9bb5; }
.cia-slot.is-fresco { box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(34,211,238,.9); }
.cia-slot.is-nuevo { overflow: visible; box-shadow: 0 0 0 3px #fff, 0 0 26px rgba(34,211,238,.85); transition: box-shadow .6s ease; }
.cia-slot.is-nuevo.is-apagando { box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 0 0 rgba(34,211,238,0); }
.cia-slot.is-nuevo::before { content: 'NUEVO · desde el chat'; position: absolute; top: -12px; left: 8px; padding: 2px 8px; border-radius: 999px; background: #fff; color: #0e4a5e; font-size: 11px; font-weight: 800; opacity: 1; transition: opacity .6s ease; }
.cia-slot.is-nuevo.is-apagando::before { opacity: 0; }
.cia-leyenda { margin-top: clamp(8px, 1.4vh, 16px); display: flex; flex-wrap: wrap; gap: 18px; font-size: 12px; color: #cbd5e1; }
.cia-leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.cia-leyenda i { width: 12px; height: 12px; border-radius: 3px; }
.cia-leyenda i.esq { width: 0; height: 0; border-radius: 0; border-top: 12px solid var(--c); border-left: 12px solid transparent; }

@media (max-width: 760px) {
  .cia-agenda { min-height: 0; }
  .cia-equipo { grid-template-columns: 1fr; }
  .cia-slot { font-size: 12px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cia-hero__paneo, .cia-envivo i { animation: none; }
  .cia-burbuja { transition: none; }
  .cia-slot.is-nuevo, .cia-slot.is-nuevo::before { transition: none; }
}

/* ---------- ASISTENTES · PLANES · MATEO · COMPLEMENTOS: más compactos ----------
   En notebooks (pantalla con escala de Windows al 125-150 %) estas secciones
   quedaban enormes. Se reduce todo de forma proporcional con zoom (mismo
   efecto que ver la página al 75-85 %), solo en escritorio y según el alto
   disponible; en celular no se toca. */
@media (min-width: 901px) {
  .ca-team, .ca-pricing, .ca-pricing-addon { zoom: .92; }
  .ca-packs { zoom: .86; }
  .ca-section.ca-team, .ca-section.ca-pricing, .ca-section.ca-pricing-addon, .ca-section.ca-packs { padding-top: 56px; padding-bottom: 56px; }
}
@media (min-width: 901px) and (max-height: 860px) {
  .ca-team, .ca-pricing, .ca-pricing-addon { zoom: .86; }
  .ca-packs { zoom: .78; }
}
@media (min-width: 901px) and (max-height: 700px) {
  .ca-team, .ca-pricing, .ca-pricing-addon { zoom: .82; }
  .ca-packs { zoom: .74; }
  .ca-section.ca-team, .ca-section.ca-pricing, .ca-section.ca-pricing-addon, .ca-section.ca-packs { padding-top: 40px; padding-bottom: 40px; }
}