/* Smaile — hoja base.
   Los valores tipográficos, de color y de espaciado viven en los atributos
   style="" del HTML, tal y como se autorizaron en el diseño (Landing Smaile.dc.html).
   Aquí solo va lo que un atributo inline no puede expresar: estado del documento,
   :hover, :focus, media queries y animaciones. */

body {
  margin: 0;
  background: #FAF8F6;
  -webkit-font-smoothing: antialiased;
}

/* El widget alterna vistas con el atributo `hidden`, y varias de esas vistas
   llevan `display:flex` en su style inline. Un estilo inline le gana a la regla
   `[hidden]{display:none}` del navegador, así que sin este !important se verían
   todas a la vez. */
[hidden] { display: none !important; }

a { color: #6D3BF5; text-decoration: none; }
a:hover { color: #5729d6; }

/* Los enlaces de la cabecera y el pie llevan su color en el style inline;
   el hover los lleva a blanco pleno sin tocar ese valor. */
header nav a:hover,
footer a:hover { color: #fff; }

summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
details[open] .faq-mas { transform: rotate(45deg); }

/* Logos de cliente: siempre a color y a opacidad plena. */
.logo-cliente {
  filter: none;
  opacity: 1;
}

/* Widget Mai */
.mai-opcion { transition: border-color .18s, background .18s; }
.mai-opcion:hover {
  border-color: #6D3BF5;
  background: rgba(109, 59, 245, .12);
}
#mai-volver { transition: border-color .18s, background .18s, color .18s; }
#mai-volver:hover {
  border-color: rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .06);
  color: #fff;
}
.mai-rapida { transition: border-color .18s, background .18s; }
.mai-rapida:hover {
  border-color: #A78BFA;
  background: rgba(167, 139, 250, .12);
}
#mai-lanzador-llamar { transition: background .18s, color .18s, border-color .18s; }
#mai-lanzador-llamar:hover {
  background: #fff;
  color: #6D3BF5;
  border-color: #fff;
}

/* Campos de formulario */
input, textarea, button { font-family: inherit; }
input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, .38); }
input:focus, textarea:focus {
  outline: none;
  border-color: #6D3BF5;
}

/* La casilla de autorización: toda la etiqueta es zona de clic. */
.mai-consentimiento { transition: color .18s; }
.mai-consentimiento:hover span { color: rgba(255, 255, 255, .8); }

/* Foco visible para navegación por teclado */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input[type="checkbox"]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid #A78BFA;
  outline-offset: 3px;
  border-radius: 4px;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---- Pantallas medianas ---- */
@media (max-width: 900px) {
  header,
  section,
  footer { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ---- Teléfono ---- */
@media (max-width: 640px) {
  header,
  section,
  footer { padding-left: 20px !important; padding-right: 20px !important; }

  /* Menos aire vertical: el diseño está calibrado para desktop. */
  #inicio { padding-top: 60px !important; padding-bottom: 68px !important; }
  #agentes,
  #casos,
  #trabajo,
  #contacto,
  #servicios,
  #preguntas { padding-top: 64px !important; padding-bottom: 64px !important; }

  /* Tarjetas de agentes y servicios: el padding de 42px se come el ancho. */
  #agentes article { padding: 30px 24px !important; }
  #servicios article { padding: 28px 24px !important; }

  /* La columna fija de 300px del FAQ debe fluir. */
  #preguntas > div > div:first-child { flex: 1 1 100% !important; }

  /* El bloque de modelos separa 64px entre logos; en móvil sobra. */
  section img[src^="img/ai/"] { max-height: 24px !important; }

  /* Bajar el widget para que no tape el botón principal del formulario. */
  #mai { right: 16px !important; bottom: 16px !important; }

  /* --- Cabecera: solo logo y llamada a la acción ------------------------ */
  /* Los enlaces de sección envolvían a dos filas y empujaban el hero. */
  .nav-seccion { display: none !important; }

  /* --- Logos en carrusel horizontal ------------------------------------ */
  /* En rejilla quedaban dos columnas con un huérfano al final. Una sola fila
     que se desliza lee mejor y no rompe el ritmo vertical. */
  .fila-clientes,
  .fila-modelos {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 34px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Se sale del padding de la sección para que la fila llegue de borde a
       borde y el corte deje ver que hay más. */
    margin-inline: -20px;
    padding-inline: 20px;
  }
  .fila-clientes::-webkit-scrollbar,
  .fila-modelos::-webkit-scrollbar { display: none; }

  .fila-clientes > *,
  .fila-modelos > * { flex: 0 0 auto !important; }
  .fila-clientes > * { min-width: 108px; }

  /* --- Carrusel automático --------------------------------------------- */
  /* Con la marquesina montada la fila deja de desplazarse a mano: el
     movimiento lo lleva la animación, y el arrastre pelearía con ella. */
  .con-marquesina {
    overflow: hidden !important;
    padding-inline: 0 !important;
  }
  .con-marquesina .marquesina {
    display: flex;
    animation: desfile linear infinite;
    will-change: transform;
  }
  /* La separación entre copias va como padding de la pista, no como gap de la
     marquesina: así el 50% del recorrido coincide exactamente con una copia y
     el reinicio no da el salto de medio hueco. */
  .con-marquesina .pista {
    display: flex;
    align-items: center;
    gap: 34px;
    padding-right: 34px;
    flex: 0 0 auto;
  }
  .con-marquesina .pista > * { flex: 0 0 auto; }

  /* Se detiene al tocarla, por si alguien quiere mirar un logo concreto. */
  .con-marquesina .marquesina:active { animation-play-state: paused; }

  /* Dos copias idénticas: al llegar a la mitad la imagen es la misma que al
     empezar, así que el reinicio no se ve. */
  @keyframes desfile {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* --- Integraciones: rejilla de solo logos ---------------------------- */
  .rejilla-integraciones {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .chip-integracion {
    justify-content: center;
    padding: 16px 8px !important;
    gap: 0 !important;
  }
  /* El nombre sigue en el DOM para los lectores de pantalla, solo se oculta
     a la vista: con display:none se perdería. */
  .chip-integracion > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .chip-integracion img { width: 26px !important; height: 26px !important; }

  /* --- Widget Mai a pantalla completa ---------------------------------- */
  #mai[data-abierto] {
    position: fixed;
    inset: 0 !important;
    z-index: 100;
    gap: 0;
  }
  #mai[data-abierto] #mai-panel {
    width: 100% !important;
    max-width: none !important;
    height: 100%;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
    /* Muescas y barra de gestos de los teléfonos actuales. */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* La vista activa ocupa el alto que sobra bajo la cabecera. */
  #mai[data-abierto] [data-vista] {
    flex: 1 1 auto;
    min-height: 0;
  }
  #mai[data-abierto] [data-vista="chat"] {
    display: flex;
    flex-direction: column;
  }
  /* El hilo de mensajes deja de tener tope fijo y se come el espacio libre. */
  #mai[data-abierto] [data-vista="chat"] > div:first-child {
    flex: 1 1 auto;
    max-height: none !important;
  }
  /* El compositor se queda abajo. */
  #mai[data-abierto] #mai-form-chat { flex: 0 0 auto; }
  #mai[data-abierto] [data-vista="chat"] textarea { max-height: 140px !important; }
}