/* --- GLOBAL --- */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  /* ... déjà existant ... */
  position: relative;
  z-index: 1;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(15,15,20,0.6); /* Ajuste la teinte si besoin */
}
.ca-header,
main,
footer {
  position: relative;
  z-index: 1;
}
body {
  background: url("https://raw.githubusercontent.com/GOGOSCHNO/assistantai-site/refs/heads/main/images/galaxia.jpg") no-repeat center center fixed;
  background-size: cover;
  color: #fff;
  min-height: 100vh;
}
main {
  min-height: 80vh;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.form-container {
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
input[type="text"],
textarea,
select {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
}

label {
  font-weight: 500;
  display: block;
  margin-top: 15px;
}

.form-subsection {
  margin-bottom: 40px;
}
ul.terminos-uso {
  margin: 1rem auto 2rem auto;
  padding-left: 1.4rem;
  max-width: 800px;
  line-height: 1.6;
  color: #eee;
}
ul.terminos-uso li {
  list-style-type: disc;
  margin-bottom: 0.7rem;
}
/* Pour améliorer l'apparence du calendrier FullCalendar */
.fc {
  background-color: white;
  border-radius: 12px;
  padding: 10px;
  color: #333;
}

.fc .fc-toolbar-title {
  font-size: 1.5rem;
  color: #4A90E2;
}

.fc-daygrid-event {
  background-color: #4A90E2;
  color: white;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 0.9rem;
}
.case-left-dynamic {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 520px;
  justify-content: center;
  align-items: center;
}

.case-bullets-dynamic .case-bullet-row {
  margin-bottom: 8px;
  font-size: 1rem;
  opacity: 0.95;
}

.case-left-video {
  width: 33%;
  border-radius: 16px;
}
.carousel-footer {
  margin-top: 24px;
  text-align: center;
}

.carousel-footer-caption {
  font-size: 1.2rem;      /* ⬅️ plus gros */
  font-weight: 600;       /* ⬅️ gras (clean, pas trop lourd) */
  color: #ffffff;
  margin-bottom: 14px;    /* un peu plus d’air avec les flèches */
  text-align: center;
}

.carousel-footer-controls {
  display: flex;
  justify-content: center;
  gap: 28px;              /* ⬅️ plus d’espace entre les flèches */
}
.ca-carousel-media {
  display: flex;
  justify-content: center; /* centre horizontalement */
  align-items: center;     /* centre verticalement */
}
.carousel-footer-controls .ca-btn {
  font-size: 1.4rem;      /* ⬅️ flèches plus grandes */
  padding: 10px 16px;     /* ⬅️ zone cliquable plus confortable */
  line-height: 1;
}
.case-block {
  max-width: 1200px;
  margin: 60px auto;
  padding: 40px 30px;
  border-radius: 20px;

  /* Cadre élégant */
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);

  /* Légère profondeur */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.carousel-video,
.case-left-video {
  opacity: 1;
  transform: none;
}
/* Quand chargée */
.video-ready {
  opacity: 1;
  transform: translateY(0);
}
/* =============================== */
/* === Header (3 parties Linear) ==*/
/* =============================== */

.ca-header {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background: rgba(15, 15, 20, 0.95);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.10);
  }
  
.ca-header-3col {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between; /* gauche / centre / droite */
    padding: 0rem 9rem;
    min-height: 64px;
    gap: 24px;
  }
  
  .ca-header-left,
  .ca-header-right {
    display: flex;
    align-items: center;
  }
  .ca-header-center {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
  }
  
  .ca-header-left { gap: 8px; }
  .ca-header-center { gap: 2px; flex: 1; }
  .ca-header-right { gap: 10px; }
  
  .ca-logo-icon img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    vertical-align: middle;
  }
  .ca-logo-text-img img {
    height: 30px;
    vertical-align: middle;
  }
  
  .ca-btn {
    padding: 8px 22px;
    border-radius: 8px;
    font-size: 1 rem;
    font-weight: 600;
    text-decoration: none;
    background: none;
    border: none;
    color: #fff;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    outline: none;
    cursor: pointer;
    display: inline-block;
  }
  .ca-btn.nav-btn:hover {
    background: rgba(74, 144, 226, 0.12);
  }
  .ca-btn-primary {
    background: #4A90E2;
    color: #fff;
    box-shadow: 0 2px 6px rgba(74, 144, 226, 0.12);
    border: none;
  }
  .ca-btn-primary:hover {
    background: #3b78b9;
  }
  .ca-btn-outline {
    border: 1.5px solid #fff;
    color: #fff;
    background: none;
  }
  .ca-btn-outline:hover {
    background: #222b3a;
    color: #4A90E2;
    border-color: #4A90E2;
  }
.user-info-wrapper {
  position: relative;
  display: inline-block;
}

.user-info-btn {
  cursor: pointer;
  font-weight: bold;
  padding: 8px 20px;
  border-radius: 8px;
  color: #fff;
  background: rgba(74,144,226,0.12);
  transition: background 0.2s;
  user-select: none;
}

.user-info-btn:hover,
.user-info-btn.active {
  background: #223048;
}

.user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: #1a2331;
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  border-radius: 10px;
  z-index: 500;
  padding: 10px 0;
}

.user-menu.open {
  display: block;
  animation: menuFadeIn 0.18s;
}

@keyframes menuFadeIn {
  from { opacity: 0; transform: translateY(-8px);}
  to   { opacity: 1; transform: translateY(0);}
}
.user-menu button.auth-btn {
  width: 100%;
  border: none;
  background: none;
  color: #fff;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 0;
  text-align: left;
  transition: background 0.15s;
}
.user-menu button.auth-btn:hover {
  background: #4A90E2;
  color: #fff;
}
.cta-button {
  display: inline-block;
  padding: 12px 32px;
  background: #4A90E2;
  color: #fff !important;
  font-weight: 700;
  font-size: 1.13rem;
  border-radius: 10px;
  border: none;
  text-decoration: none;
  box-shadow: 0 3px 16px rgba(74,144,226,0.08);
  transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.14s;
  cursor: pointer;
  letter-spacing: 0.3px;
}
.cta-button:hover, .cta-button:focus {
  background: #3b78b9;
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 24px rgba(74,144,226,0.14);
}
.estado-potencial {
  background-color: rgba(0, 200, 0, 0.25);
  border-left: 4px solid #00cc00;
}
.estado-seguimiento {
  background-color: rgba(255, 165, 0, 0.25);
  border-left: 4px solid #ffa500;
}
.estado-accion {
  background-color: rgba(255, 0, 0, 0.25);
  border-left: 4px solid #ff0000;
}
.estado-info {
  background-color: rgba(70, 130, 180, 0.25);
  border-left: 4px solid #4682b4;
}
.estado-nada {
  background-color: rgba(200, 200, 200, 0.2);
  border-left: 4px solid #aaa;
}
.estado-agendada {
  background-color: rgba(200, 200, 200, 0.25);
  border-left: 4px solid #FFFF00;
}
/* =========================
   USE CASES – SPLIT LAYOUT
========================= */

.case-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin: 55px auto;
  max-width: 1100px;
  padding: 0 20px;
}

/* Texte */
.case-text h3 {
  font-size: 1.6rem;
  margin-bottom: 12px;
}

.case-text p {
  opacity: 0.9;
  margin-bottom: 16px;
}

.case-bullets {
  list-style: none;
  padding: 0;
}

.case-bullets li {
  margin-bottom: 8px;
}

/* Média */
.case-media {
  display: flex;
  justify-content: center;
}

/* Responsive */
@media (max-width: 900px) {
  .case-split {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .case-media {
    order: 2;
  }

  .case-text {
    order: 1;
    text-align: center;
  }
}

/* ======== DASHBOARD CRM LAYOUT ======== */
/* === Split layout principal === */
/* === Split layout principal === */
.split-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 80px 5%;
  flex-direction: row;
  max-width: 1200px;
  margin: 0 auto;
}

.split-section.reverse {
  flex-direction: row-reverse;
}

/* === Colonne texte === */
.hero-text {
  flex: 1;
  max-width: 550px;
}

.hero-text h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: #ffffff;
  line-height: 1.3;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}

.hero-text p {
  font-size: 1.15rem;
  color: #dddddd;
  margin-bottom: 30px;
  line-height: 1.6;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}

.hero-text .cta-button,
#cta-final .cta-button {
  background-color: #007BFF;
  color: white;
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.3s ease;
  display: inline-block;
}

.hero-text .cta-button:hover,
#cta-final .cta-button:hover {
  background-color: #0056b3;
}

/* === Colonne image === */
.hero-image {
  flex: 1;
  max-width: 500px;
  text-align: center;
}

.hero-image img {
  width: 85%;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.dashboard-wrapper {
  display: flex;
  gap: 20px;
  padding: 2rem;
  color: white;
  flex-wrap: nowrap;
  max-width: 100%;
  overflow-x: auto;
}

.conversation-list,
.conversation-details,
.contact-info {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1rem;
  overflow-y: auto;
  max-height: 80vh;
}

/* Section 1: Liste des conversations */
.conversation-list {
  flex: 1;
  min-width: 250px;
  max-width: 300px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.conversation-list h3 {
  margin-bottom: 1rem;
}
.conversation-item {
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background 0.2s ease;
}
.conversation-item:hover {
  background: rgba(255, 255, 255, 0.25);
}
.conversation-item.active {
  background: #4A90E2;
  color: white;
}

/* Section 2: Détails de conversation */
.conversation-details {
  flex: 2;
  min-width: 450px;
  max-width: 100%;
  -ms-overflow-style: none;  /* IE et Edge */
  scrollbar-width: none;     /* Firefox */
}
.conversation-details::-webkit-scrollbar {
  display: none;
}
.message-block {
  padding: 12px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.message-block p {
  margin: 4px 0;
}
.message-block small {
  font-size: 0.8rem;
  color: #ccc;
}
.message-left {
  align-items: flex-start;
}

.message-right {
  align-items: flex-end;
}
.message-admin,
.message-client,
.message-assistant {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 0.95rem;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-wrap;
  margin-bottom: 5px;
}
.message-client {
  background: #4A90E2;
  color: white;
  border-bottom-left-radius: 0;
}

.message-assistant {
  background: rgba(255, 255, 255, 0.12);
  color: white;
  border-bottom-right-radius: 0;
}

.message-time {
  align-self: center;
  font-size: 0.75rem;
  color: #ccc;
  text-align: center;
  margin-top: 4px;
}
/* Section 3: Informations du client */
.contact-info {
  flex: 1;
  min-width: 250px;
  max-width: 300px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.contact-info h3 {
  margin-bottom: 1rem;
}
.contact-info p {
  margin: 0.6rem 0;
  font-size: 1rem;
}
#conversationMessages {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 70vh; /* ou la valeur actuelle */
}
/* Responsive */
@media (max-width: 900px) {
  .dashboard-wrapper {
    flex-direction: column;
  }
  .conversation-list,
  .conversation-details,
  .contact-info {
    max-width: 100%;
  }
}
.assistant-selection {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.assistant-option {
  border: 2px solid #ccc;
  padding: 20px;
  text-align: center;
  width: 250px;
  border-radius: 20px;
  transition: transform 0.2s, border-color 0.2s;
  cursor: pointer;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.assistant-option:hover {
  transform: scale(1.03);
  border-color: #4CAF50;
}

.assistant-option img {
  width: 140px;
  height: auto;
  border-radius: 12px;
  margin-bottom: 10px;
}

.assistant-option.selected {
  border-color: #4CAF50;
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.4);
}
.assistant-option p {
  margin-top: 10px;
  font-size: 0.95rem;
  color: #444;
}
#progress-bar-container {
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
  height: 8px;
  border-radius: 5px;
  margin: 20px auto 10px auto;
  max-width: 700px;
}

#progress-bar {
  height: 100%;
  width: 0%;
  background: #4A90E2;
  border-radius: 5px;
  transition: width 0.3s ease-in-out;
}
.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

.switch input { display: none; }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0;
  right: 0; bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 26px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px; width: 20px;
  left: 3px; bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #4A90E2;
}

input:checked + .slider:before {
  transform: translateX(24px);
}
.message-admin {
  background: rgba(255, 230, 120, 0.25); /* Jaune clair transparent */
  color: white;
  border-radius: 18px;
  border-bottom-right-radius: 0;
  padding: 10px 14px;
  max-width: 75%;
  font-size: 0.95rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin-bottom: 5px;
}
/* --- HERO SECTION / SECTIONS GENERALES --- */
main {
  margin-top: 3%;
  flex: 1;
}

main h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

main p {
  font-size: 1.1rem;
  max-width: 800px;
  margin: 0 auto 1.5rem auto;
  line-height: 1.5;
  margin-bottom: 1rem;
}

main p:last-of-type {
  margin-bottom: 0.5rem; /* réduit la marge du dernier paragraphe */
}
main a {
  color: #4A90E2;
  text-decoration: underline;
}
main a:hover {
  color: #3b78b9;
}
.assistant-option h4 {
  margin-top: 10px;
  font-size: 1.05rem;
  color: #222;
}
/* --- FORMULAIRE (pruebaGratisForm) --- */
#pruebaGratisForm {
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    text-align: left;
    color: #333;
}

#pruebaGratisForm h2 {
    text-align: center;
    color: #4A90E2;
    margin-bottom: 15px;
}

#pruebaGratisForm label {
    font-weight: bold;
    display: block;
    margin-top: 10px;
    font-size: 14px;
}

#pruebaGratisForm input,
#pruebaGratisForm select,
#pruebaGratisForm textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

.whatsapp-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.whatsapp-container input {
    flex: 1;
}
#indicativo {
    width: 80px !important;
    padding: 8px !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
}
#manualIndicativo {
    width: 60px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#numero {
    flex: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#pruebaGratisForm button {
    background: #4A90E2;
    color: white;
    border: none;
    padding: 12px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    width: 100%;
    margin-top: 15px;
    transition: background 0.3s ease;
}
#pruebaGratisForm button:hover {
    background: #3b78b9;
}
.objetivo-selection {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.objetivo-option {
  padding: 12px 18px;
  background: #eee;
  color: #333;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.2s;
  border: 2px solid transparent;
}

.objetivo-option:hover {
  border-color: #4A90E2;
}

.objetivo-option.selected {
  background: #4A90E2;
  color: white;
  border-color: #4A90E2;
}
/* --- CAROUSEL ASSISTANTS --- */
.carousel-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding-bottom: 10px;
}
.carousel {
  display: flex;
  gap: 20px;
  scroll-snap-align: start;
  padding: 10px;
}
.carousel-item {
  flex: 0 0 auto;
  width: 200px;
  text-align: center;
  scroll-snap-align: start;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 0 12px rgba(0,0,0,0.3);
}
.carousel-item img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
}
.carousel-item .role {
  color: #333;
  font-weight: bold;
  font-size: 14px;
}
.producto-resumen {
  background: rgba(255,255,255,0.1);
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 15px;
  font-size: 0.95rem;
  color: #333;
}
.producto-replegado {
  margin-bottom: 20px;
}
/* --- VIDEO CAROUSEL --- */
.video-carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.carousel-video {
  width: 55%;
  max-width: 600px;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(255,255,255,0.3);
}
.caption {
  color: white;
  font-style: italic;
  text-align: center;
  max-width: 90%;
}
.carousel-controls {
  text-align: center;
  margin-top: 10px;
}
.carousel-controls button {
  background-color: #4A90E2;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  margin: 0 10px;
  font-size: 1.2rem;
  cursor: pointer;
}
.carousel-controls button:hover {
  background-color: #3b78b9;
}
.form-container {
      background: rgba(255, 255, 255, 0.95);
      color: #333;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
      max-width: 700px;
      width: 90%;
      margin: 0 auto;
    }
    h2 {
      text-align: center;
      margin-bottom: 20px;
      color: #4A90E2;
    }

    label {
      font-weight: bold;
      display: block;
      margin-top: 15px;
    }

    input {
      width: 100%;
      padding: 10px;
      margin-top: 5px;
      border-radius: 6px;
      border: 1px solid #ccc;
      font-size: 14px;
    }

    .btn {
      width: 100%;
      padding: 12px;
      background-color: #4A90E2;
      color: #fff;
      border: none;
      border-radius: 6px;
      margin-top: 20px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s ease;
    }

    .btn:hover {
      background-color: #3b78b9;
    }

    .google-btn {
      background-color: #db4437;
      margin-top: 10px;
    }

    .link {
      text-align: center;
      margin-top: 15px;
    }

    .link a {
      color: #4A90E2;
      text-decoration: none;
    }

    .link a:hover {
      text-decoration: underline;
    }
.appointment-info {
  background: rgba(74, 144, 226, 0.15);
  padding: 10px;
  border-radius: 8px;
  margin-top: 15px;
  font-size: 0.95rem;
}
.appointment-info h4 {
  margin-bottom: 6px;
  color: #4A90E2;
}
.appointment-info p {
  margin: 4px 0;
}
/* ====================== */
  /* ======= FOOTER ======= */
  /* ====================== */
  .ca-footer {
    width: 100%;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    text-align: center;
    padding: 1.2rem 0.5rem 1.3rem 0.5rem;
    font-size: 0.95rem;
    margin-top: 50px;
  }
  .ca-footer a {
    color: #4A90E2;
    text-decoration: none;
    margin: 0 7px;
  }
  .ca-footer a:hover {
    text-decoration: underline;
  }
/* === Header Mobile Linear Style === */
.ca-header-mobile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.6rem 1.1rem;
}

.ca-header-mobile .ca-header-left {
  display: flex;
  align-items: center;
  gap: 7px;
}

.ca-header-mobile-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
img, video {
  max-width: 100%;
  height: auto;
  display: block;
}
.carousel-container, .carousel {
  width: 100%;
  max-width: 100vw;
  overflow-x: auto;
}
.carousel-item {
  min-width: 200px;
  max-width: 95vw;
  box-sizing: border-box;
}
/* Hamburger button */
.ca-hamburger {
  width: 38px;
  height: 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}
.ca-hamburger span {
  display: block;
  height: 4px;
  width: 28px;
  background: #fff;
  border-radius: 3px;
  transition: all 0.2s;
}

/* Menu Mobile */
.ca-mobile-menu {
  display: none;
  flex-direction: column;
  background: rgba(15,15,20,0.98);
  position: absolute;
  top: 58px; /* ajuste à la hauteur du header */
  right: 0;
  left: 0;
  z-index: 200;
  padding: 1.2rem 1rem 1rem 1rem;
  gap: 18px;
  box-shadow: 0 2px 24px rgba(0,0,0,0.18);
}
.ca-mobile-menu.open {
  display: flex;
  animation: caMenuSlideIn 0.25s;
}
@keyframes caMenuSlideIn {
  from { opacity: 0; transform: translateY(-20px);}
  to   { opacity: 1; transform: translateY(0);}
}

/* Responsive : active dès 900px ou moins */
@media (max-width: 900px) {
  .ca-header-3col, .ca-header-center, .ca-header-right {
    display: none !important;
  }
  .ca-header-mobile {
    display: flex !important;
  }
  .ca-mobile-menu {
    width: 100vw;
    border-radius: 0 0 12px 12px;
  }
  .ca-header-3col {
    padding: 0 1rem !important;
    gap: 10px;
  }
  .split-section {
    flex-direction: column;
    padding: 50px 20px;
    text-align: center;
  }

  .split-section.reverse {
    flex-direction: column;
  }

  .hero-text h1 {
    font-size: 2rem;
  }

  .hero-text p {
    font-size: 1rem;
  }

  .hero-image {
    max-width: 100%;
    margin-top: 30px;
  }

  .hero-text .cta-button,
  #cta-final .cta-button {
    width: 100%;
    max-width: 280px;
  }
}
@media (min-width: 901px) {
  .ca-header-mobile, .ca-mobile-menu {
    display: none !important;
  }
  .ca-header-3col {
    display: flex !important;
  }
}
/* --- RESPONSIVE --- */
@media (max-width: 800px) {
  .ca-header-content {
    padding: 0.7rem 1rem;
    gap: 10px;
  }
  .ca-logo-text-img img { height: 26px; }
  .ca-btn { font-size: 0.95rem; padding: 7px 10px;}
  .ca-nav { gap: 7px; }
  main h2 { font-size: 1.3rem; }
  main p { font-size: 1rem; padding: 0 1rem; }
  #pruebaGratisForm { margin: 10px; padding: 12px; }
  .cta-button { width: 90%; margin: 0 auto; font-size: 1rem; padding: 0.6rem; }
  footer { font-size: 0.75rem; padding: 1rem 0.5rem; }
}






















/* =========================
   PAGES PUBLIQUES – base commune (index, login, signup)
   body.ca-public : variables --lp-*, fond sombre sans galaxie,
   header / menu mobile / footer sombres.
   body.lp-page (landing) et body.ca-auth (login, signup) s'appuient dessus.
   Les autres pages (dashboard, agenda…) ne portent pas ces classes et
   gardent le fond galaxie global.
========================= */
body.ca-public {
  --lp-dark-bg: #0f1220;
  --lp-dark-text: #ffffff;
  --lp-dark-text-2: #c3c7d4;
  --lp-light-bg-1: #ffffff;
  --lp-light-bg-2: #f6f4ef;
  --lp-light-text: #14161f;
  --lp-light-text-2: #4a4f5e;
  --lp-cta: #0072ed;
  --lp-cta-hover: #0056b3;
  --lp-placeholder-border: #d5d8e0;
  --lp-placeholder-bg-1: #f1f2f5; /* sur fond #ffffff */
  --lp-placeholder-bg-2: #ebe9e3; /* sur fond #f6f4ef */

  background: var(--lp-dark-bg);
  color: var(--lp-dark-text);
}
body.ca-public::before {
  display: none;
}

/* Header, menu mobile, footer : sombres */
body.ca-public .ca-header,
body.ca-public .ca-mobile-menu,
body.ca-public .ca-footer {
  background: var(--lp-dark-bg);
  color: var(--lp-dark-text);
}

/* --- Sélecteur de langue (header, js/i18n.js) ---
   Un <select> natif transparent posé sur un libellé court (globe, ES, chevron) :
   clavier, lecteur d'écran et liste native sur mobile sans code en plus.
   Même hauteur que .ca-btn-outline (mêmes police, padding vertical et bordure).
   Masqué sans JavaScript : html.ca-js est posé par js/i18n.js. */
body.ca-public .ca-lang {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  color: var(--lp-dark-text);
  font-weight: 600;
  line-height: normal;
  transition: border-color 0.2s;
}
html:not(.ca-js) body.ca-public .ca-lang {
  display: none;
}
body.ca-public .ca-lang:hover {
  border-color: #4A90E2;
}
body.ca-public .ca-lang:focus-within {
  outline: 2px solid var(--lp-cta);
  outline-offset: 2px;
}
body.ca-public .ca-lang svg {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.ca-public .ca-lang__globe {
  width: 16px;
  height: 16px;
  stroke-width: 1.6;
}
body.ca-public .ca-lang__chevron {
  width: 12px;
  height: 12px;
  stroke-width: 1.8;
  opacity: 0.75;
}
body.ca-public .ca-lang__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  font-size: 16px; /* pas de zoom automatique sur iOS */
  /* couleurs de la liste déroulante native */
  color: var(--lp-light-text);
  background: var(--lp-light-bg-1);
}
@media (max-width: 800px) {
  body.ca-public .ca-lang {
    gap: 4px;
    padding: 7px 8px;
    font-size: 0.95rem;
  }
}
/* Boutons du header mobile et liens du footer sur une seule ligne, quelle que
   soit la langue (« Tableau de bord », « Nous contacter »…) */
body.ca-public .ca-header-mobile .ca-btn,
body.ca-public .ca-footer a {
  white-space: nowrap;
}
/* Très petits écrans : « ES » seul (à 320 px, c'est le logo qui cède quelques pixels) */
@media (max-width: 360px) {
  body.ca-public .ca-lang {
    padding: 7px 6px;
  }
  body.ca-public .ca-lang__chevron {
    display: none;
  }
}

/* --- Login / signup (body.ca-auth) ---
   Surcharge les règles globales (.form-container, h2, label, input, .btn,
   .link, main a) sans les modifier : elles servent aussi aux autres pages. */
body.ca-auth {
  --lp-google-border: #747775;
  --lp-google-text: #1f1f1f;
  --lp-google-hover: #f2f2f2;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* Corps clair, carte centrée */
body.ca-auth main {
  flex: 1;
  min-height: 0;
  margin-top: 0;
  justify-content: center;
  padding: 48px 16px;
  background: var(--lp-light-bg-2);
  color: var(--lp-light-text);
}
body.ca-auth .ca-footer {
  margin-top: 0;
}
body.ca-auth .form-container {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 32px 28px;
  border: 1px solid var(--lp-placeholder-border);
  border-radius: 16px;
  background: #ffffff;
  color: var(--lp-light-text);
  box-shadow: 0 8px 24px rgba(15, 18, 32, 0.06);
}
body.ca-auth .form-container h2 {
  margin: 0 0 8px;
  font-size: 1.6rem;
  color: var(--lp-light-text);
}
body.ca-auth .form-container label {
  margin-top: 16px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lp-light-text);
}
body.ca-auth .form-container input {
  width: 100%;
  margin: 6px 0 0; /* neutralise la marge basse globale de input[type="text"] */
  padding: 12px 14px;
  font-size: 16px; /* pas de zoom automatique sur iOS */
  color: var(--lp-light-text);
  background: #ffffff;
  border: 1px solid var(--lp-placeholder-border);
  border-radius: 8px;
}
body.ca-auth .form-container input:focus {
  outline: 2px solid var(--lp-cta);
  outline-offset: 1px;
  border-color: var(--lp-cta);
}
body.ca-auth .form-container .btn {
  margin-top: 24px;
  padding: 12px;
  border-radius: 8px;
  background-color: var(--lp-cta);
  font-size: 1rem;
  font-weight: 700;
}
body.ca-auth .form-container .btn:hover,
body.ca-auth .form-container .btn:focus-visible {
  background-color: var(--lp-cta-hover);
}
body.ca-auth .form-container .btn:focus-visible {
  outline: 2px solid var(--lp-cta);
  outline-offset: 2px;
}
/* Pendant l'envoi : bouton désactivé (texte de chargement) */
body.ca-auth .form-container .btn:disabled {
  background-color: var(--lp-cta);
  opacity: 0.7;
  cursor: progress;
}

/* Zone de message au-dessus du bouton d'envoi (role="alert").
   Vide : sans hauteur mais présente, pour que les lecteurs d'écran
   annoncent le message quand il est inséré. */
body.ca-auth {
  --lp-msg-error-bg: #fdecea;
  --lp-msg-error-border: #f3b8b2;
  --lp-msg-error-text: #8f1d14;
  --lp-msg-info-bg: #e8f1fd;
  --lp-msg-info-border: #b9d3f6;
  --lp-msg-info-text: #0b4a9e;
}
body.ca-auth .ca-auth-msg {
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.4;
}
body.ca-auth .ca-auth-msg:empty {
  margin: 0;
  padding: 0;
  border: 0;
}
body.ca-auth .ca-auth-msg.is-error {
  background: var(--lp-msg-error-bg);
  border-color: var(--lp-msg-error-border);
  color: var(--lp-msg-error-text);
}
body.ca-auth .ca-auth-msg.is-info {
  background: var(--lp-msg-info-bg);
  border-color: var(--lp-msg-info-border);
  color: var(--lp-msg-info-text);
}
body.ca-auth .ca-auth-msg a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* Bouton Google : règles de marque « Sign in with Google », thème clair
   (fond blanc, bordure #747775, texte #1f1f1f, logo G officiel non modifié).
   Police de la page : pas de chargement de Google Fonts. */
body.ca-auth .ca-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  margin-top: 12px;
  padding: 0 12px;
  border: 1px solid var(--lp-google-border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--lp-google-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
body.ca-auth .ca-google-btn:hover {
  background: var(--lp-google-hover);
  color: var(--lp-google-text);
}
body.ca-auth .ca-google-btn:focus-visible {
  outline: 2px solid var(--lp-cta);
  outline-offset: 2px;
}
body.ca-auth .ca-google-btn svg {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

/* Lien croisé login ↔ signup */
body.ca-auth .form-container .link {
  margin-top: 20px;
  font-size: 0.95rem;
  color: var(--lp-light-text-2);
}
body.ca-auth .form-container .link a {
  color: var(--lp-cta);
  font-weight: 600;
  text-decoration: none;
}
body.ca-auth .form-container .link a:hover {
  color: var(--lp-cta-hover);
  text-decoration: underline;
}

@media (max-width: 480px) {
  body.ca-auth main {
    padding: 32px 16px;
  }
  body.ca-auth .form-container {
    padding: 24px 20px;
  }
}

/* --- Pages de texte (body.ca-public.ca-doc : contacto, eliminar-datos…) ---
   Corps clair, colonne de lecture de 720 px alignée à gauche et centrée.
   Neutralise dans ce seul périmètre les règles globales (main en flex centré,
   main p, h2 bleu centré, main a, .cta-button) sans les modifier : elles
   servent aussi aux pages connectées.
   Contrastes sur #ffffff : texte #14161f 18:1, texte secondaire #4a4f5e 8,2:1,
   liens #0056b3 7:1, bouton blanc sur #0072ed 4,5:1. */
body.ca-doc {
  --lp-doc-width: 720px;
  --lp-doc-link: var(--lp-cta-hover);

  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
/* Fond clair pleine largeur, colonne centrée par le padding */
body.ca-doc main {
  display: block;
  flex: 1;
  min-height: 0;
  margin-top: 0;
  padding: 56px max(20px, calc((100% - var(--lp-doc-width)) / 2)) 72px;
  background: var(--lp-light-bg-1);
  color: var(--lp-light-text);
  text-align: left;
  overflow-wrap: break-word; /* URL longues : retour à la ligne plutôt que débordement */
}
body.ca-doc .ca-footer {
  margin-top: 0;
}

/* Titres */
body.ca-doc main h1,
body.ca-doc main h2,
body.ca-doc main h3 {
  color: var(--lp-light-text);
  text-align: left;
  line-height: 1.25;
}
body.ca-doc main h1 {
  margin: 0 0 24px;
  font-size: 2.1rem;
}
body.ca-doc main h2 {
  margin: 40px 0 12px;
  font-size: 1.45rem;
}
body.ca-doc main h3 {
  margin: 28px 0 8px;
  font-size: 1.15rem;
}
body.ca-doc main h1 + h2 {
  margin-top: 0;
}

/* Texte courant */
body.ca-doc main p {
  max-width: none;
  margin: 0 0 16px;
  padding: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
}
/* Date de mise à jour (sous le h1) */
body.ca-doc main .ca-doc-updated {
  margin-bottom: 32px;
  font-size: 0.95rem;
  color: var(--lp-light-text-2);
}
body.ca-doc main h1 + .ca-doc-updated {
  margin-top: -12px;
}

/* Séparation entre deux parties d'un document (ex. politique / conditions) */
body.ca-doc main hr.ca-doc-separator {
  height: 0;
  margin: 56px 0 0;
  border: 0;
  border-top: 1px solid var(--lp-placeholder-border);
}

/* Listes (le reset global * retire marges et retraits) */
body.ca-doc main ul,
body.ca-doc main ol {
  margin: 0 0 20px;
  padding-left: 1.5rem;
  max-width: none;
  color: inherit;
  font-size: 1.0625rem;
  line-height: 1.65;
}
body.ca-doc main ul {
  list-style: disc;
}
body.ca-doc main ol {
  list-style: decimal;
}
body.ca-doc main li {
  list-style: inherit;
  margin-bottom: 8px;
}
body.ca-doc main li::marker {
  color: var(--lp-light-text-2);
}
/* Liste de coordonnées : libellé + valeur, sans puces */
body.ca-doc main ul.ca-doc-facts {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  border-top: 1px solid var(--lp-placeholder-border);
}
body.ca-doc main ul.ca-doc-facts li {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--lp-placeholder-border);
}

/* Liens */
body.ca-doc main a {
  color: var(--lp-doc-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.ca-doc main a:hover {
  color: var(--lp-light-text);
}
body.ca-doc main a:focus-visible {
  outline: 2px solid var(--lp-cta);
  outline-offset: 2px;
}

/* Boutons : bouton CTA de la landing (.cta-button + --lp-cta) */
body.ca-doc main .ca-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
body.ca-doc main a.cta-button {
  width: auto;
  margin: 0;
  background-color: var(--lp-cta);
  color: #ffffff;
  font-size: 1.05rem;
  text-decoration: none;
}
body.ca-doc main a.cta-button:hover,
body.ca-doc main a.cta-button:focus {
  background-color: var(--lp-cta-hover);
}

@media (max-width: 800px) {
  body.ca-doc main {
    padding-top: 40px;
    padding-bottom: 56px;
  }
  body.ca-doc main h1 {
    font-size: 1.7rem;
  }
  body.ca-doc main h2 {
    font-size: 1.3rem;
  }
  body.ca-doc main p {
    padding: 0;
    font-size: 1rem;
  }
  body.ca-doc main ul,
  body.ca-doc main ol {
    font-size: 1rem;
  }
}
@media (max-width: 480px) {
  body.ca-doc main a.cta-button {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* =========================
   PAGES CONNECTÉES – corps clair (body.ca-public.ca-app)
   conectar-whatsapp.html ; base prévue pour dashboard, configuración, agenda.
   Header et footer sombres (ca-public), main clair, colonne de 760 px dont
   tous les blocs partagent le même bord gauche et la même largeur.
   Neutralise dans ce seul périmètre les règles globales (main en flex centré,
   main p à 800 px, main a, h2 bleu centré, input / label, listes sans retrait)
   sans les modifier : les autres pages connectées en dépendent.
   AUCUNE règle de ce bloc ne fixe display sur un panneau ni sur les classes
   qu'il porte (section, p, .ca-card, .ca-alert, .ca-muted…) : leur visibilité
   est pilotée par style.display en ligne (setVisible de la page).
   Contrastes sur #ffffff : texte #14161f 18:1, texte secondaire #4a4f5e 8,2:1,
   liens et boutons secondaires #0056b3 7:1, blanc sur #0072ed 4,5:1.
========================= */
body.ca-app {
  --lp-app-width: 760px;
  --lp-app-gutter: 16px;
  --lp-app-border: #e2e4ea;
  --lp-app-shadow: 0 1px 2px rgba(20, 22, 31, 0.06), 0 4px 14px rgba(20, 22, 31, 0.05);
  --lp-app-focus: var(--lp-cta);
  --lp-app-tint: rgba(0, 114, 237, 0.08);
  --lp-app-tint-hover: rgba(0, 114, 237, 0.15);
  --lp-msg-error-bg: #fdecea;
  --lp-msg-error-border: #f3b8b2;
  --lp-msg-error-text: #8f1d14;
  --lp-msg-info-bg: #e8f1fd;
  --lp-msg-info-border: #b9d3f6;
  --lp-msg-info-text: #0b4a9e;
  --lp-msg-success-bg: #e9f6ec;
  --lp-msg-success-border: #b3dcbd;
  --lp-msg-success-text: #1b5e2c;
  --lp-msg-success-accent: #2e9e4f;
  --lp-msg-warning-bg: #fff6e0;
  --lp-msg-warning-border: #efd28a;
  --lp-msg-warning-text: #6b4800;
  --lp-msg-neutral-bg: #f1f2f5;
  --lp-msg-neutral-border: #d5d8e0;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Fond clair pleine largeur, colonne centrée par le padding : tous les enfants
   de main ont le même bord gauche, sans largeur à fixer sur chacun. */
body.ca-app main {
  display: block;
  flex: 1;
  min-height: 0;
  margin-top: 0;
  padding: 40px max(var(--lp-app-gutter), calc((100% - var(--lp-app-width)) / 2)) 64px;
  background: var(--lp-light-bg-2);
  color: var(--lp-light-text);
  text-align: left;
  overflow-wrap: break-word;
}
body.ca-app .ca-footer {
  margin-top: 0;
}

/* Titres */
body.ca-app main h1,
body.ca-app main h2,
body.ca-app main h3,
body.ca-app main h4 {
  color: inherit; /* prend la couleur des messages (.ca-alert) */
  text-align: left;
  line-height: 1.25;
}
body.ca-app main h1 {
  margin: 0 0 8px;
  font-size: 2rem;
}
body.ca-app main h2 {
  margin: 0 0 12px;
  font-size: 1.4rem;
}
body.ca-app main h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
}
body.ca-app main h4 {
  margin: 24px 0 8px;
  font-size: 1.02rem;
}
/* Titres de carte (h3, h4) */
body.ca-app main .ca-title {
  font-weight: 700;
}

/* Texte courant */
body.ca-app main p {
  max-width: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: 1rem;
  line-height: 1.55;
}
body.ca-app main p:last-child {
  margin-bottom: 0;
}
body.ca-app main .ca-muted {
  color: var(--lp-light-text-2);
}
/* Sous-titre de page (sous le h1) */
body.ca-app main .ca-subtext {
  margin-bottom: 24px;
  font-size: 1.0625rem;
  color: var(--lp-light-text-2);
}

/* Listes : le reset global * retire marges et retraits (puces coupées) */
body.ca-app main ul,
body.ca-app main ol {
  margin: 0 0 12px;
  padding-left: 1.5rem;
  line-height: 1.55;
}
body.ca-app main ul {
  list-style: disc;
}
body.ca-app main ol {
  list-style: decimal;
}
body.ca-app main li {
  list-style: inherit;
  margin-bottom: 8px;
}
body.ca-app main li::marker {
  color: var(--lp-light-text-2);
}
body.ca-app main ol > li::marker {
  color: var(--lp-cta-hover);
  font-weight: 700;
}
body.ca-app main li > p {
  margin: 4px 0 0;
}

/* Liens de texte (les liens-boutons .ca-btn sont traités plus bas) */
body.ca-app main a {
  color: var(--lp-cta-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.ca-app main a:hover {
  color: var(--lp-light-text);
}

/* Blocs : espacement vertical */
body.ca-app main .ca-section {
  margin: 0;
}
body.ca-app main > .ca-card,
body.ca-app main > .ca-section + .ca-section {
  margin-top: 16px;
}

/* Carte blanche */
body.ca-app main .ca-card {
  padding: 24px;
  border: 1px solid var(--lp-app-border);
  border-radius: 12px;
  background: var(--lp-light-bg-1);
  color: var(--lp-light-text);
  box-shadow: var(--lp-app-shadow);
}
body.ca-app main .ca-card-body > :first-child {
  margin-top: 0;
}
/* Carte de succès : liseré vert à gauche */
body.ca-app main .ca-card--success {
  border-left: 4px solid var(--lp-msg-success-accent);
}

/* Carte de statut, en haut de page */
body.ca-app main .ca-status {
  border-left: 4px solid var(--lp-cta);
}
body.ca-app main .ca-status h3 {
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--lp-light-text-2);
}
body.ca-app main .ca-status__text {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.45;
}
/* Lien « Iniciar sesión » ajouté par le script dans le texte de statut */
body.ca-app main .ca-status__text .ca-btn {
  margin: 6px 0 0 4px;
  vertical-align: middle;
}

/* Groupe de champ (surcharge les règles globales input et label) */
body.ca-app main .ca-field-group {
  margin-top: 16px;
}
body.ca-app main .ca-label {
  display: block;
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lp-light-text);
}
body.ca-app main .ca-input {
  width: 100%;
  max-width: 260px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--lp-placeholder-border);
  border-radius: 8px;
  background: var(--lp-light-bg-1);
  color: var(--lp-light-text);
  font-family: inherit;
  font-size: 16px; /* pas de zoom automatique sur iOS */
  line-height: 1.3;
}
body.ca-app main .ca-input::placeholder {
  color: #7a7f8c;
}
body.ca-app main .ca-input:focus {
  outline: 2px solid var(--lp-app-focus);
  outline-offset: 1px;
  border-color: var(--lp-app-focus);
}
body.ca-app main .ca-input:disabled {
  background: var(--lp-placeholder-bg-1);
  color: var(--lp-light-text-2);
}

/* Boutons du main (le header n'est pas concerné)
   .ca-btn : secondaire à contour ; .ca-btn-primary : CTA plein ;
   .ca-btn-ghost : discret, teinté. */
body.ca-app main .ca-btn {
  padding: 10px 20px;
  border: 1px solid var(--lp-cta);
  border-radius: 8px;
  background: var(--lp-light-bg-1);
  color: var(--lp-cta-hover);
  box-shadow: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
body.ca-app main .ca-btn:hover {
  background: var(--lp-app-tint);
  color: var(--lp-cta-hover);
}
body.ca-app main .ca-btn-primary {
  border-color: var(--lp-cta);
  background: var(--lp-cta);
  color: #ffffff;
}
body.ca-app main .ca-btn-primary:hover {
  border-color: var(--lp-cta-hover);
  background: var(--lp-cta-hover);
  color: #ffffff;
}
body.ca-app main .ca-btn-ghost {
  border-color: transparent;
  background: var(--lp-app-tint);
  color: var(--lp-cta-hover);
}
body.ca-app main .ca-btn-ghost:hover {
  background: var(--lp-app-tint-hover);
}
body.ca-app main .ca-btn:focus-visible {
  outline: 2px solid var(--lp-app-focus);
  outline-offset: 2px;
}
body.ca-app main .ca-btn:disabled,
body.ca-app main .ca-btn:disabled:hover {
  border-color: var(--lp-placeholder-border);
  background: var(--lp-placeholder-bg-1);
  color: #6b7080;
  cursor: not-allowed;
}
/* Rangée de boutons */
body.ca-app main .ca-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}
/* Bouton seul après un champ (état PIN) */
body.ca-app main .ca-field-group + .ca-btn {
  margin-top: 16px;
}
/* Bouton de lancement après le guide « Antes de empezar » */
body.ca-app main .ca-card-body > div + .ca-btn {
  margin-top: 8px;
}

/* Messages : fond, bordure, couleur, espacement seulement (jamais display).
   Vide (:empty), la zone ne prend pas de place visible. */
body.ca-app main .ca-alert {
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
}
body.ca-app main .ca-card.ca-alert {
  padding: 24px;
}
body.ca-app main .ca-alert:empty {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
body.ca-app main .ca-alert .ca-muted {
  color: inherit;
}
body.ca-app main .ca-btn + .ca-alert:not(:empty) {
  margin-top: 12px;
}
body.ca-app main .ca-alert--error {
  border-color: var(--lp-msg-error-border);
  background: var(--lp-msg-error-bg);
  color: var(--lp-msg-error-text);
}
body.ca-app main .ca-alert--info {
  border-color: var(--lp-msg-info-border);
  background: var(--lp-msg-info-bg);
  color: var(--lp-msg-info-text);
}
body.ca-app main .ca-alert--success {
  border-color: var(--lp-msg-success-border);
  background: var(--lp-msg-success-bg);
  color: var(--lp-msg-success-text);
}
body.ca-app main .ca-alert--warning {
  border-color: var(--lp-msg-warning-border);
  background: var(--lp-msg-warning-bg);
  color: var(--lp-msg-warning-text);
}
/* Résultat neutre : le texte porte lui-même ✅ / ❌ */
body.ca-app main .ca-alert--neutral {
  border-color: var(--lp-msg-neutral-border);
  background: var(--lp-msg-neutral-bg);
  color: var(--lp-light-text);
}

/* --- Formulaire du perfil de negocio (editar-asistente.html) ---
   Étapes générées par innerHTML (js/perfil-negocio-form.js). Aucune règle ne
   fixe display sur #sitioWeb2Container, #btnAgregarSitioWeb, #horariosGridWrapper
   ni les .horarios-cell : bascules en ligne du script. Rien de positionné ni de
   pseudo-élément sur la grille : le glisser repère les cellules par
   elementFromPoint. Les propriétés fonctionnelles de la grille (display:grid,
   colonnes, min-width, user-select, touch-action, hauteur et cursor des
   cellules, défilement du wrapper) restent en ligne dans le script. */

/* Barre de progression (surcharge #progress-bar-container / #progress-bar globaux) */
body.ca-app main #progress-bar-container {
  width: 100%;
  max-width: none;
  height: 6px;
  margin: 0 0 16px;
  border-radius: 999px;
  background: var(--lp-app-border);
}
body.ca-app main #progress-bar {
  border-radius: 999px;
  background: var(--lp-cta);
}

/* Carte du formulaire (surcharge .form-container global) */
body.ca-app main .form-container {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--lp-app-border);
  border-radius: 12px;
  background: var(--lp-light-bg-1);
  color: var(--lp-light-text);
  box-shadow: var(--lp-app-shadow);
}
/* Titre de page puis titre d'étape */
body.ca-app main .form-container > h2 {
  margin: 0 0 20px;
  font-size: 1.6rem;
}
body.ca-app main #dynamic-form-container h3 {
  margin: 0 0 10px;
  font-size: 1.2rem;
  font-weight: 700;
}

/* Libellés et champs texte (surcharge label, input, input[type="text"] globaux) */
body.ca-app main .form-container label {
  display: block;
  margin: 16px 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--lp-light-text);
}
body.ca-app main .form-container input[type="text"] {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--lp-placeholder-border);
  border-radius: 8px;
  background: var(--lp-light-bg-1);
  color: var(--lp-light-text);
  font-family: inherit;
  font-size: 16px; /* pas de zoom automatique sur iOS */
  line-height: 1.3;
}
body.ca-app main .form-container input[type="text"]::placeholder {
  color: #7a7f8c;
}
body.ca-app main .form-container input[type="text"]:focus {
  outline: 2px solid var(--lp-app-focus);
  outline-offset: 1px;
  border-color: var(--lp-app-focus);
}
/* Case à cocher et son libellé sur une ligne (neutralise input{width:100%;padding:10px}) */
body.ca-app main .form-container label.ca-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  font-weight: 500;
  cursor: pointer;
}
body.ca-app main .form-container input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--lp-cta);
  cursor: pointer;
}

/* Cartes de sélection (vende, tono) : surcharge .assistant-selection /
   .assistant-option globaux (largeur fixe 250 px, zoom au survol, vert) */
body.ca-app main .assistant-selection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 8px 0 4px;
}
body.ca-app main .assistant-option {
  width: auto;
  padding: 14px 16px;
  border: 2px solid var(--lp-app-border);
  border-radius: 12px;
  background: var(--lp-light-bg-1);
  align-items: flex-start;
  text-align: left;
  transform: none;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}
body.ca-app main .assistant-option:hover {
  transform: none;
  border-color: var(--lp-cta);
}
body.ca-app main .assistant-option.selected {
  border-color: var(--lp-cta);
  background: var(--lp-msg-info-bg);
  box-shadow: 0 0 0 1px var(--lp-cta);
}
body.ca-app main .assistant-option h4 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--lp-light-text);
}
body.ca-app main .assistant-option.selected h4 {
  color: var(--lp-cta-hover);
}
body.ca-app main .assistant-option p {
  margin: 6px 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--lp-light-text-2);
}

/* Grille des horarios : cadre, en-têtes de jours, libellés d'heures */
body.ca-app main .ca-horarios-wrapper {
  margin: 8px 0 12px;
  padding: 8px;
  border: 1px solid var(--lp-app-border);
  border-radius: 8px;
  background: var(--lp-light-bg-1);
}
body.ca-app main .ca-horarios-day {
  padding: 4px 2px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--lp-light-text);
}
body.ca-app main .ca-horarios-hour {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  font-size: 0.72rem;
  color: var(--lp-light-text-2);
  font-variant-numeric: tabular-nums;
}
body.ca-app main .horarios-cell {
  border-radius: 4px;
}

/* Boutons isolés des étapes */
body.ca-app main #dynamic-form-container > .ca-btn-primary {
  margin-top: 24px; /* « Siguiente » de l'étape 1, hors rangée */
}
body.ca-app main .ca-step-actions {
  margin-top: 28px;
}
body.ca-app main .ca-horarios-clear {
  margin-bottom: 4px;
}
body.ca-app main .ca-site-extra {
  margin-top: 4px;
}
body.ca-app main .ca-site-add {
  margin-top: 12px;
}

@media (max-width: 800px) {
  body.ca-app main {
    padding-top: 28px;
    padding-bottom: 44px;
  }
  body.ca-app main h1 {
    font-size: 1.6rem;
  }
  body.ca-app main .ca-card,
  body.ca-app main .ca-card.ca-alert,
  body.ca-app main .form-container {
    padding: 18px 16px;
  }
  body.ca-app main p {
    padding: 0;
  }
  body.ca-app main .form-container > h2 {
    font-size: 1.35rem;
  }
}
/* Cartes de sélection (vende, tono) empilées sur mobile */
@media (max-width: 600px) {
  body.ca-app main .assistant-selection {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  body.ca-app main .ca-actions .ca-btn {
    flex: 1 1 100%;
  }
}

/* =========================
   LANDING (index.html)
========================= */
#hero {
  width: 100%;
}
#hero .hero-image {
  width: 100%;
}
.hero-text .lp-note {
  font-size: 0.95rem;
  color: #bbbbbb;
  margin: 14px 0 0;
}
.lp-section {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 20px;
  text-align: center;
}

/* Problema */
.lp-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 32px 0;
}
.lp-card {
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
}

/* Casos : alternance gauche/droite en desktop */
@media (min-width: 901px) {
  .case-split.lp-reverse .case-media {
    order: -1;
  }
}

/* Control */
.lp-control-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 32px auto 0;
}
.lp-control-list li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  text-align: left;
  font-size: 1.05rem;
  line-height: 1.5;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
}
.lp-icon {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  color: #4A90E2;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Empezar */
.lp-steps {
  list-style: none;
  counter-reset: lp-step;
  max-width: 700px;
  margin: 32px auto 24px;
  text-align: left;
}
.lp-steps li {
  counter-increment: lp-step;
  position: relative;
  padding-left: 56px;
  margin-bottom: 22px;
  min-height: 40px;
  font-size: 1.1rem;
  line-height: 1.5;
}
.lp-steps li::before {
  content: counter(lp-step);
  position: absolute;
  left: 0;
  top: -6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #4A90E2;
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* FAQ */
.lp-faq {
  max-width: 800px;
  margin: 32px auto 0;
  text-align: left;
}
.lp-faq details {
  margin-bottom: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.03);
}
.lp-faq summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 16px 48px 16px 20px;
  font-weight: 600;
  font-size: 1.05rem;
}
.lp-faq summary::-webkit-details-marker {
  display: none;
}
.lp-faq summary::after {
  content: "+";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: #4A90E2;
}
.lp-faq details[open] summary::after {
  content: "−";
}
.lp-faq summary:focus-visible {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
  border-radius: 12px;
}
.lp-faq details p {
  max-width: none;
  margin: 0;
  padding: 0 20px 16px;
  opacity: 0.9;
}

#cta-final h2 {
  margin-bottom: 28px;
}

@media (max-width: 900px) {
  .lp-section {
    padding: 40px 20px;
  }
  .lp-grid-3,
  .lp-control-list {
    grid-template-columns: 1fr;
  }
  .lp-card {
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
  }
}

/* =========================
   LANDING – Fond "entrée sombre / corps clair / sortie sombre"
   Tout est limité à body.lp-page (index.html). Les variables --lp-*,
   le fond sombre, le header et le footer viennent de body.ca-public
   (bloc PAGES PUBLIQUES).
========================= */

/* Sections pleine largeur : le fond couvre l'écran, le contenu garde sa largeur */
body.lp-page .lp-section {
  max-width: none;
  padding-left: calc(max(0px, (100% - 1100px) / 2) + 20px);
  padding-right: calc(max(0px, (100% - 1100px) / 2) + 20px);
}
@media (min-width: 901px) {
  body.lp-page #hero {
    max-width: none;
    padding-left: calc(max(0px, (100% - 1200px) / 2) + 5%);
    padding-right: calc(max(0px, (100% - 1200px) / 2) + 5%);
  }
}

/* Zones sombres : #hero, #cta-final */
body.lp-page #hero,
body.lp-page #cta-final {
  background: var(--lp-dark-bg);
  color: var(--lp-dark-text);
}
body.lp-page .hero-text p,
body.lp-page .hero-text .lp-note {
  color: var(--lp-dark-text-2);
}

/* Zones claires, en alternance */
body.lp-page #problema,
body.lp-page #casos,
body.lp-page #empezar {
  background: var(--lp-light-bg-2);
  --lp-placeholder-bg: var(--lp-placeholder-bg-2);
}
body.lp-page #solucion,
body.lp-page #control,
body.lp-page #faq {
  background: var(--lp-light-bg-1);
  --lp-placeholder-bg: var(--lp-placeholder-bg-1);
}
body.lp-page #problema,
body.lp-page #solucion,
body.lp-page #casos,
body.lp-page #control,
body.lp-page #empezar,
body.lp-page #faq {
  color: var(--lp-light-text);
}

/* Texte secondaire sur fond clair */
body.lp-page #problema p,
body.lp-page #solucion p,
body.lp-page #empezar > p,
body.lp-page .case-text p,
body.lp-page .lp-faq details p {
  color: var(--lp-light-text-2);
  opacity: 1;
}

/* Cartes, items : neutres sur fond clair */
body.lp-page .lp-card,
body.lp-page .lp-control-list li {
  border-color: var(--lp-placeholder-border);
  background: transparent;
}
body.lp-page .lp-faq details {
  border-color: var(--lp-placeholder-border);
  background: var(--lp-placeholder-bg);
}
body.lp-page .lp-icon {
  color: var(--lp-light-text-2);
}

/* Accents bleus sur fond clair : même bleu que le CTA (contraste suffisant) */
body.lp-page .lp-steps li::before {
  background: var(--lp-cta);
}
body.lp-page .lp-faq summary::after {
  color: var(--lp-cta);
}
body.lp-page .lp-faq summary:focus-visible {
  outline-color: var(--lp-cta);
}

/* CTA : identique sur les deux boutons */
body.lp-page .hero-text .cta-button,
body.lp-page #cta-final .cta-button {
  background-color: var(--lp-cta);
}
body.lp-page .hero-text .cta-button:hover,
body.lp-page .hero-text .cta-button:focus,
body.lp-page #cta-final .cta-button:hover,
body.lp-page #cta-final .cta-button:focus {
  background-color: var(--lp-cta-hover);
}

/* Titres : couleur de texte principal de la zone (au lieu du bleu global des h2) */
body.lp-page .lp-section h2,
body.lp-page .lp-section h3 {
  color: inherit;
}

/* =========================
   LANDING – Maquettes WhatsApp (téléphone + carte « panel »)
   Même composant pour le hero et les 3 cas de #casos.
========================= */
body.lp-page {
  --lp-chat-frame: #1b1e2b;
  --lp-chat-head: #2b3044;
  --lp-chat-head-text-2: #c3c7d4;
  --lp-chat-bg: #ece5dd;
  --lp-bubble-client: #dcf8c6;
  --lp-bubble-bot: #ffffff;
  --lp-bubble-text: #14161f;
  --lp-bubble-time: #545a68;
  --lp-avatar-bg: #dfe4f2;
  --lp-highlight: #fff3c4;
  --lp-panel-head-bg: #f6f7f9;
  --lp-panel-divider: #eceef2;
  --lp-arrow: #7a8091;
  --lp-badge-action-bg: #fde4e1;
  --lp-badge-action-text: #8f1d14;
  --lp-badge-lead-bg: #dfeafc;
  --lp-badge-lead-text: #0b4a9e;
  --lp-badge-info-bg: #e9ebef;
  --lp-badge-info-text: #3f4554;
}

/* Bloc maquette */
body.lp-page .lp-demo {
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: left;
}

/* --- Téléphone --- */
body.lp-page .lp-chat {
  width: 100%;
  max-width: 240px;
  padding: 7px;
  border-radius: 30px;
  background: var(--lp-chat-frame);
  box-shadow: 0 8px 22px rgba(15, 18, 32, 0.16);
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  line-height: 1.35;
}
body.lp-page #hero .lp-chat {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 12px 32px rgba(0, 0, 0, 0.35);
}
body.lp-page .lp-chat__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 9px;
  border-radius: 24px 24px 0 0;
  background: var(--lp-chat-head);
  color: #ffffff;
}
body.lp-page .lp-chat__avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--lp-avatar-bg);
  color: var(--lp-chat-head);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.lp-page .lp-chat__id {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
body.lp-page .lp-chat__name {
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.2;
}
body.lp-page .lp-chat__status {
  font-size: 0.7rem;
  color: var(--lp-chat-head-text-2);
}
/* « escribiendo… » remplace « en línea » sur la même ligne : hauteur constante */
body.lp-page .lp-chat__status--typing,
body.lp-page .lp-chat.is-typing .lp-chat__status--online {
  display: none;
}
body.lp-page .lp-chat.is-typing .lp-chat__status--typing {
  display: inline;
}
body.lp-page .lp-chat__body {
  flex: 1 1 auto;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 12px 9px;
  background: var(--lp-chat-bg);
}
body.lp-page .lp-chat__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px 9px;
  border-radius: 0 0 24px 24px;
  background: var(--lp-chat-bg);
}
body.lp-page .lp-chat__bar span:first-child {
  flex: 1;
  height: 24px;
  border-radius: 12px;
  background: #ffffff;
}
body.lp-page .lp-chat__bar span:last-child {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lp-chat-head);
}

/* Bulles */
body.lp-page .lp-msg {
  max-width: 86%;
  padding: 6px 8px 4px;
  border-radius: 9px;
  color: var(--lp-bubble-text);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
body.lp-page .lp-msg--client {
  align-self: flex-end;
  background: var(--lp-bubble-client);
  border-top-right-radius: 2px;
}
body.lp-page .lp-msg--bot {
  align-self: flex-start;
  background: var(--lp-bubble-bot);
  border-top-left-radius: 2px;
}
body.lp-page .lp-msg__text {
  display: block;
}
body.lp-page .lp-msg__time {
  display: block;
  margin-top: 2px;
  text-align: right;
  font-size: 0.64rem;
  color: var(--lp-bubble-time);
}

/* --- Flèche + étiquette (toujours de la carte vers le téléphone) --- */
body.lp-page .lp-demo__link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--lp-arrow);
}
body.lp-page .lp-demo__arrow {
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.lp-page .lp-demo__dash {
  stroke-dasharray: 4 4;
}
body.lp-page .lp-demo__arrow--h {
  display: none;
  width: 64px;
  height: 16px;
}
body.lp-page .lp-demo__arrow--v {
  width: 16px;
  height: 48px;
}
body.lp-page .lp-demo__label {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--lp-light-text-2);
  text-wrap: pretty; /* pas de mot seul en dernière ligne */
}

/* --- Carte « panel » --- */
body.lp-page .lp-panel {
  width: 100%;
  max-width: 300px;
  border: 1px solid var(--lp-placeholder-border);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
  color: var(--lp-light-text);
  font-size: 0.8rem;
  line-height: 1.35;
}
body.lp-page .lp-panel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--lp-placeholder-border);
  background: var(--lp-panel-head-bg);
  color: var(--lp-light-text-2);
}
/* En-tête sur deux niveaux : titre de la vue + « Panel ComercioAI » */
body.lp-page .lp-panel__titles {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
body.lp-page .lp-panel__title,
body.lp-page .lp-panel__subtitle {
  white-space: nowrap;
}
body.lp-page .lp-panel__title {
  color: var(--lp-light-text);
  font-size: 0.75rem;
  font-weight: 700;
}
body.lp-page .lp-panel__subtitle {
  font-size: 0.68rem;
}
body.lp-page .lp-panel__dots {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
}
body.lp-page .lp-panel__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lp-placeholder-border);
}
body.lp-page .lp-panel__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
body.lp-page .lp-panel__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--lp-panel-divider);
  transition: background-color 0.4s ease;
}
body.lp-page .lp-panel__row:last-child {
  border-bottom: 0;
}
body.lp-page .lp-panel__side {
  text-align: right;
  white-space: nowrap;
}
body.lp-page .lp-panel__sub {
  grid-column: 1 / -1;
  font-size: 0.72rem;
  color: var(--lp-light-text-2);
}
body.lp-page .lp-panel__row.is-muted {
  color: var(--lp-light-text-2);
}
body.lp-page .lp-panel__row.is-hl {
  background: var(--lp-highlight);
  color: var(--lp-light-text);
  font-weight: 700;
}
body.lp-page .lp-panel__row.is-hl .lp-panel__sub {
  color: var(--lp-light-text);
}

/* Badges de statut (libellés du dashboard) */
body.lp-page .lp-badge {
  justify-self: end;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  white-space: nowrap;
}
body.lp-page .lp-badge--action {
  background: var(--lp-badge-action-bg);
  color: var(--lp-badge-action-text);
}
body.lp-page .lp-badge--lead {
  background: var(--lp-badge-lead-bg);
  color: var(--lp-badge-lead-text);
}
body.lp-page .lp-badge--info {
  background: var(--lp-badge-info-bg);
  color: var(--lp-badge-info-text);
}

/* --- Disposition dans #casos --- */
/* Desktop : colonne visuelle plus large (texte 2fr / visuel 3fr) */
@media (min-width: 901px) {
  body.lp-page #casos .case-split {
    grid-template-columns: 2fr 3fr;
  }
  body.lp-page #casos .case-split.lp-reverse {
    grid-template-columns: 3fr 2fr;
  }
}
body.lp-page #casos .case-media {
  container-type: inline-size;
}
/* Assez de place : téléphone | flèche | carte côte à côte.
   Sinon (mobile, petits desktops) : carte sous le téléphone, flèche vers le haut. */
@container (min-width: 540px) {
  body.lp-page .lp-demo--panel {
    flex-direction: row;
    justify-content: center;
    gap: 10px;
  }
  body.lp-page .lp-demo--panel .lp-chat {
    flex: 0 0 240px;
  }
  body.lp-page .lp-demo--panel .lp-panel {
    flex: 1 1 220px;
    min-width: 0;
  }
  body.lp-page .lp-demo__link {
    flex: 0 0 auto;
    flex-direction: column;
    width: 100px;
    text-align: center;
  }
  body.lp-page .lp-demo__arrow--h {
    display: block;
  }
  body.lp-page .lp-demo__arrow--v {
    display: none;
  }
}

/* --- Animation (état masqué uniquement si le JS a ajouté .lp-anim) --- */
body.lp-page .lp-demo.lp-anim .lp-msg {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
body.lp-page .lp-demo.lp-anim .lp-msg.is-shown {
  opacity: 1;
  transform: none;
}
/* Le surlignage de la carte arrive après la dernière réponse */
body.lp-page .lp-demo.lp-anim:not(.is-done) .lp-panel__row.is-hl {
  background: transparent;
}
@media (prefers-reduced-motion: reduce) {
  body.lp-page .lp-demo.lp-anim .lp-msg {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body.lp-page .lp-demo.lp-anim:not(.is-done) .lp-panel__row.is-hl {
    background: var(--lp-highlight);
  }
}

/* =========================
   LANDING – Croquis de #problema (SVG en ligne, style dessin à la main)
   Même viewBox (320×240) et même épaisseur de trait pour les 3 croquis.
========================= */
body.lp-page {
  --lp-sketch-stroke: #2b2b2b;
  --lp-sketch-accent: #c93b3a;
  --lp-sketch-accent-text: #ffffff;
  --lp-sketch-paper: #fffdf8;
}
body.lp-page .lp-sketch {
  aspect-ratio: 4 / 3;
  margin-bottom: 16px;
  border: 1px solid var(--lp-placeholder-border);
  border-radius: 16px;
  background: var(--lp-sketch-paper);
  overflow: hidden;
}
body.lp-page .lp-sketch svg {
  display: block;
  width: 100%;
  height: 100%;
}
body.lp-page .lp-sketch__ink,
body.lp-page .lp-sketch__accent {
  fill: none;
  stroke: var(--lp-sketch-stroke);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.lp-page .lp-sketch__accent {
  stroke: var(--lp-sketch-accent);
}
body.lp-page .lp-sketch__dash {
  stroke-dasharray: 6 6;
}
/* Points (étoiles, poignées) : trait de longueur nulle, extrémité ronde */
body.lp-page .lp-sketch__dot {
  stroke-width: 3.5;
}
body.lp-page .lp-sketch__digits {
  fill: var(--lp-sketch-stroke);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}
body.lp-page .lp-sketch__badge {
  fill: var(--lp-sketch-accent);
}
body.lp-page .lp-sketch__badge-text {
  fill: var(--lp-sketch-accent-text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

/* =========================
   PAGES APP LARGES (body.ca-public.ca-app.ca-wide) — mi-asistente.html, et la
   future page d'activité. Colonne de 1 080 px sur le fond clair de ca-app,
   composants génériques .cw-* (cartes, lignes libellé / valeur, pastilles,
   interrupteur, fenêtre de confirmation, squelettes, carte d'erreur) et
   mise en page propre à la page (.ma-*).
   Tout est préfixé : aucune règle globale modifiée. Aucune règle display sur
   un élément que le JS montre ou masque (le contenu variable est reconstruit
   par le JS ; <dialog> garde l'affichage du navigateur).
   Contrastes sur #ffffff : #14161f 18:1, #5b5f6b 6,4:1, accent #c2410c 5,2:1,
   #713f12 sur #fef3c7 8,9:1, blanc sur #713f12 9,6:1 et sur #854d0e 7,1:1.
========================= */
body.ca-public.ca-app.ca-wide {
  --lp-app-width: 1080px;
  --asistente-accent: #c2410c;
  --asistente-accent-hover: #9a3412;
  --cw-card-border: #e7e2d8;
  --cw-rule: #efebe3;
  --cw-text: #14161f;
  --cw-text-2: #5b5f6b;
  --cw-text-3: #6b6f7b;
  --cw-skeleton: #ece8df;
  --cw-online: #16a34a;
  --cw-pause-bg: #fef3c7;
  --cw-pause-border: #f2d27a;
  --cw-pause-text: #713f12;
  --cw-pause-button: #713f12;
  --cw-pause-confirm: #854d0e;
  --cw-focus: #0072ed;
}
body.ca-public.ca-app.ca-wide main {
  padding-top: 28px;
}
@media (max-width: 600px) {
  body.ca-public.ca-app.ca-wide main {
    padding-top: 16px;
    padding-bottom: 40px;
  }
}

/* --- En-tête de page --- */
body.ca-public.ca-app.ca-wide main a.cw-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin-bottom: 4px;
  color: var(--cw-text-2);
  font-weight: 600;
  text-decoration: none;
}
body.ca-public.ca-app.ca-wide main a.cw-back:hover {
  color: var(--cw-text);
  text-decoration: underline;
}
body.ca-public.ca-app.ca-wide main .cw-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 20px;
}
body.ca-public.ca-app.ca-wide main .cw-head h1 {
  margin-bottom: 6px;
  font-size: 1.875rem;
  color: var(--cw-text);
}
body.ca-public.ca-app.ca-wide main .cw-head .ca-subtext {
  margin: 0;
  color: var(--cw-text-2);
}
@media (max-width: 600px) {
  body.ca-public.ca-app.ca-wide main .cw-head h1 {
    font-size: 1.6rem;
  }
}

/* --- Boutons --- */
body.ca-public.ca-app.ca-wide main .cw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #ffffff;
  color: var(--cw-text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
body.ca-public.ca-app.ca-wide main .cw-btn--primary {
  border-color: var(--asistente-accent);
  background: var(--asistente-accent);
  color: #ffffff;
}
body.ca-public.ca-app.ca-wide main .cw-btn--primary:hover {
  border-color: var(--asistente-accent-hover);
  background: var(--asistente-accent-hover);
  color: #ffffff;
}
body.ca-public.ca-app.ca-wide main .cw-btn--outline {
  border-color: var(--cw-card-border);
  background: #ffffff;
  color: var(--cw-text);
}
body.ca-public.ca-app.ca-wide main .cw-btn--outline:hover {
  border-color: #d6cfc1;
  background: #faf8f4;
  color: var(--cw-text);
}
body.ca-public.ca-app.ca-wide main .cw-btn--pause {
  border-color: var(--cw-pause-button);
  background: var(--cw-pause-button);
  color: #ffffff;
}
body.ca-public.ca-app.ca-wide main .cw-btn--pause:hover {
  border-color: #5c320e;
  background: #5c320e;
}
body.ca-public.ca-app.ca-wide main .cw-btn--block {
  width: 100%;
}
body.ca-public.ca-app.ca-wide main .cw-btn:focus-visible,
body.ca-public.ca-app.ca-wide main a:focus-visible,
body.ca-public.ca-app.ca-wide main button:focus-visible {
  outline: 2px solid var(--cw-focus);
  outline-offset: 2px;
}
body.ca-public.ca-app.ca-wide main .cw-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* --- Cartes --- */
body.ca-public.ca-app.ca-wide main .cw-card {
  padding: 20px;
  border: 1px solid var(--cw-card-border);
  border-radius: 18px;
  background: #ffffff;
  color: var(--cw-text);
}
@media (min-width: 600px) {
  body.ca-public.ca-app.ca-wide main .cw-card {
    padding: 24px;
  }
}
body.ca-public.ca-app.ca-wide main .cw-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
body.ca-public.ca-app.ca-wide main .cw-card__title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--cw-text);
}
body.ca-public.ca-app.ca-wide main .cw-card__head .cw-card__title {
  margin: 0;
}
body.ca-public.ca-app.ca-wide main .cw-card > .cw-card__title {
  margin-bottom: 8px;
}
/* Lien d'action en tête de carte (« Editar », « Cambiar ») */
body.ca-public.ca-app.ca-wide main a.cw-card__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--asistente-accent);
  font-weight: 700;
  text-decoration: none;
}
body.ca-public.ca-app.ca-wide main a.cw-card__link:hover {
  color: var(--asistente-accent-hover);
  text-decoration: underline;
}
body.ca-public.ca-app.ca-wide main .cw-card p {
  font-size: 0.975rem;
}
body.ca-public.ca-app.ca-wide main .cw-muted {
  color: var(--cw-text-2);
}

/* --- Lignes libellé / valeur, séparées par un filet --- */
body.ca-public.ca-app.ca-wide main .cw-rows {
  margin: 0;
  padding: 0;
}
body.ca-public.ca-app.ca-wide main .cw-row {
  padding: 12px 0;
  border-top: 1px solid var(--cw-rule);
}
body.ca-public.ca-app.ca-wide main .cw-rows > .cw-row:first-child {
  border-top: 0;
  padding-top: 4px;
}
body.ca-public.ca-app.ca-wide main .cw-row__label {
  margin: 0 0 2px;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cw-text-3);
}
body.ca-public.ca-app.ca-wide main .cw-row__value {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--cw-text);
}
body.ca-public.ca-app.ca-wide main .cw-row__value a {
  color: var(--asistente-accent);
  font-weight: 600;
}
body.ca-public.ca-app.ca-wide main .cw-row__value a:hover {
  color: var(--asistente-accent-hover);
}
/* Ligne horizontale : libellé à gauche, valeur à droite (carte État) */
body.ca-public.ca-app.ca-wide main .cw-row--inline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
body.ca-public.ca-app.ca-wide main .cw-row--inline .cw-row__label {
  margin: 0;
}
body.ca-public.ca-app.ca-wide main .cw-row--inline .cw-row__value {
  text-align: right;
}
/* Grille de lignes à 2 colonnes (desktop) */
@media (min-width: 960px) {
  body.ca-public.ca-app.ca-wide main .cw-rows--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }
  body.ca-public.ca-app.ca-wide main .cw-rows--grid > .cw-row:nth-child(2) {
    border-top: 0;
    padding-top: 4px;
  }
  body.ca-public.ca-app.ca-wide main .cw-rows--grid > .cw-row--full {
    grid-column: 1 / -1;
  }
}
body.ca-public.ca-app.ca-wide main .cw-empty-value {
  color: var(--cw-text-3);
}

/* --- Pastilles --- */
body.ca-public.ca-app.ca-wide main .cw-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid #f3c9ad;
  border-radius: 999px;
  background: #fff4ec;
  color: #9a3412;
  font-size: 0.875rem;
  font-weight: 700;
}

/* --- Interrupteur (role="switch") --- */
body.ca-public.ca-app.ca-wide main .cw-switch {
  position: relative;
  flex: none;
  width: 52px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #cfc8ba;
  cursor: pointer;
  transition: background 0.2s ease;
}
/* Zone tactile de 44 px autour du bouton de 32 px */
body.ca-public.ca-app.ca-wide main .cw-switch::before {
  content: "";
  position: absolute;
  inset: -6px;
}
body.ca-public.ca-app.ca-wide main .cw-switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(20, 22, 31, 0.25);
  transition: transform 0.2s ease;
}
body.ca-public.ca-app.ca-wide main .cw-switch[aria-checked="true"] {
  background: var(--cw-pause-button);
}
body.ca-public.ca-app.ca-wide main .cw-switch[aria-checked="true"]::after {
  transform: translateX(20px);
}
body.ca-public.ca-app.ca-wide main .cw-switch:disabled {
  opacity: 0.6;
  cursor: progress;
}
@media (prefers-reduced-motion: reduce) {
  body.ca-public.ca-app.ca-wide main .cw-switch,
  body.ca-public.ca-app.ca-wide main .cw-switch::after {
    transition: none;
  }
}

/* --- Message d'erreur en ligne --- */
body.ca-public.ca-app.ca-wide main .cw-inline-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--lp-msg-error-border);
  border-radius: 10px;
  background: var(--lp-msg-error-bg);
  color: var(--lp-msg-error-text);
  font-size: 0.9375rem;
}

/* --- Squelettes de chargement --- */
body.ca-public.ca-app.ca-wide main .cw-skel {
  display: block;
  height: 14px;
  margin: 6px 0;
  border-radius: 7px;
  background: var(--cw-skeleton);
  animation: cw-skel-pulse 1.4s ease-in-out infinite;
}
body.ca-public.ca-app.ca-wide main .cw-skel--short { width: 40%; }
body.ca-public.ca-app.ca-wide main .cw-skel--mid { width: 65%; }
body.ca-public.ca-app.ca-wide main .cw-skel--long { width: 90%; }
body.ca-public.ca-app.ca-wide main .cw-skel--block {
  height: 64px;
  border-radius: 14px;
}
@keyframes cw-skel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
  body.ca-public.ca-app.ca-wide main .cw-skel {
    animation: none;
  }
}

/* --- Carte d'erreur de chargement --- */
body.ca-public.ca-app.ca-wide main .cw-error {
  text-align: center;
}
body.ca-public.ca-app.ca-wide main .cw-error .cw-card__title {
  margin-bottom: 6px;
}
body.ca-public.ca-app.ca-wide main .cw-error p {
  margin-bottom: 16px;
  color: var(--cw-text-2);
}

/* --- Fenêtre de confirmation (<dialog>) : feuille en bas sur mobile,
       centrée sur desktop --- */
body.ca-public.ca-app.ca-wide .cw-dialog {
  width: 100%;
  max-width: 100%;
  margin: auto auto 0;
  padding: 24px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-radius: 20px 20px 0 0;
  background: #ffffff;
  color: var(--cw-text);
  box-shadow: 0 -8px 30px rgba(20, 22, 31, 0.18);
}
body.ca-public.ca-app.ca-wide .cw-dialog::backdrop {
  background: rgba(20, 22, 31, 0.45);
}
@media (min-width: 600px) {
  body.ca-public.ca-app.ca-wide .cw-dialog {
    max-width: 460px;
    margin: auto;
    padding: 28px;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(20, 22, 31, 0.22);
  }
}
body.ca-public.ca-app.ca-wide .cw-dialog__title {
  margin: 0 0 10px;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--cw-text);
}
body.ca-public.ca-app.ca-wide .cw-dialog__text {
  margin: 0 0 14px;
  line-height: 1.55;
  color: var(--cw-text-2);
}
body.ca-public.ca-app.ca-wide .cw-dialog__note {
  margin: 0 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--cw-pause-border);
  border-radius: 12px;
  background: var(--cw-pause-bg);
  color: var(--cw-pause-text);
  font-size: 0.9375rem;
  line-height: 1.5;
}
body.ca-public.ca-app.ca-wide .cw-dialog__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 600px) {
  body.ca-public.ca-app.ca-wide .cw-dialog__actions {
    flex-direction: row-reverse;
  }
  body.ca-public.ca-app.ca-wide .cw-dialog__actions .cw-btn {
    flex: 1 1 0;
  }
}
/* Boutons de la fenêtre (hors de main : pas de préfixe main) */
body.ca-public.ca-app.ca-wide .cw-dialog .cw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--cw-card-border);
  border-radius: 12px;
  background: #ffffff;
  color: var(--cw-text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
body.ca-public.ca-app.ca-wide .cw-dialog .cw-btn--confirm-pause {
  border-color: var(--cw-pause-confirm);
  background: var(--cw-pause-confirm);
  color: #ffffff;
}
body.ca-public.ca-app.ca-wide .cw-dialog .cw-btn--confirm-pause:hover {
  border-color: #6b3d0b;
  background: #6b3d0b;
}
body.ca-public.ca-app.ca-wide .cw-dialog .cw-btn:focus-visible {
  outline: 2px solid var(--cw-focus);
  outline-offset: 2px;
}

/* =========================
   Mi asistente (.ma-*)
========================= */
/* Bouton « Editar mi asistente » : en haut à droite sur desktop, en bas sur
   toute la largeur sur mobile (deux exemplaires, chacun visible sur un
   format ; aucun n'est basculé par le JS). */
body.ca-public.ca-app.ca-wide main .ma-edit--top {
  display: none;
}
body.ca-public.ca-app.ca-wide main .ma-edit--bottom {
  margin-top: 20px;
}
@media (min-width: 960px) {
  body.ca-public.ca-app.ca-wide main .ma-edit--top {
    display: inline-flex;
  }
  body.ca-public.ca-app.ca-wide main .ma-edit--bottom {
    display: none;
  }
}

/* Mise en page : une colonne sur mobile (ordre des cartes par order), deux
   colonnes 1/3 – 2/3 à partir de 960 px. Les colonnes sont « transparentes »
   (display: contents) sur mobile pour intercaler les cartes. */
body.ca-public.ca-app.ca-wide main .ma-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body.ca-public.ca-app.ca-wide main .ma-col {
  display: contents;
}
body.ca-public.ca-app.ca-wide main .ma-slot--estado { order: 1; }
body.ca-public.ca-app.ca-wide main .ma-slot--mejor { order: 2; }
body.ca-public.ca-app.ca-wide main .ma-slot--sabe { order: 3; }
body.ca-public.ca-app.ca-wide main .ma-slot--consultar { order: 4; }
body.ca-public.ca-app.ca-wide main .ma-slot--habla { order: 5; }
@media (min-width: 960px) {
  body.ca-public.ca-app.ca-wide main .ma-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
    gap: 20px;
  }
  body.ca-public.ca-app.ca-wide main .ma-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
}

/* --- Carte État --- */
body.ca-public.ca-app.ca-wide main .ma-estado__status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  font-size: 1.125rem;
  font-weight: 700;
}
body.ca-public.ca-app.ca-wide main .ma-estado__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cw-online);
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15);
}
body.ca-public.ca-app.ca-wide main .ma-estado__lead {
  margin: 0 0 12px;
  color: var(--cw-text-2);
}
body.ca-public.ca-app.ca-wide main .ma-estado__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 0;
  border-top: 1px solid var(--cw-rule);
}
body.ca-public.ca-app.ca-wide main .ma-estado__toggle-label {
  margin: 0;
  font-weight: 700;
}
body.ca-public.ca-app.ca-wide main .ma-estado__toggle-help {
  margin: 2px 0 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--cw-text-2);
}
/* En pause */
body.ca-public.ca-app.ca-wide main .ma-estado--paused {
  border-color: var(--cw-pause-border);
  background: var(--cw-pause-bg);
  color: var(--cw-pause-text);
}
body.ca-public.ca-app.ca-wide main .ma-estado--paused .cw-card__title,
body.ca-public.ca-app.ca-wide main .ma-estado--paused .ma-estado__status {
  color: var(--cw-pause-text);
}
body.ca-public.ca-app.ca-wide main .ma-estado--paused .ma-estado__lead {
  color: var(--cw-pause-text);
}
body.ca-public.ca-app.ca-wide main .ma-estado__pause-icon {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--cw-pause-text);
}

/* --- Carte « Para que responda mejor » --- */
body.ca-public.ca-app.ca-wide main .ma-mejor__item {
  padding: 12px 0;
  border-top: 1px solid var(--cw-rule);
}
body.ca-public.ca-app.ca-wide main .cw-card__head + .ma-mejor__item {
  border-top: 0;
  padding-top: 4px;
}
body.ca-public.ca-app.ca-wide main .ma-mejor__title {
  margin: 0 0 2px;
  font-weight: 700;
}
body.ca-public.ca-app.ca-wide main .ma-mejor__text {
  margin: 0 0 4px;
  color: var(--cw-text-2);
}
body.ca-public.ca-app.ca-wide main a.ma-mejor__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--asistente-accent);
  font-weight: 700;
  text-decoration: none;
}
body.ca-public.ca-app.ca-wide main a.ma-mejor__link:hover {
  color: var(--asistente-accent-hover);
  text-decoration: underline;
}

/* --- Horaires --- */
body.ca-public.ca-app.ca-wide main .ma-horarios {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 2px 0 0;
}
body.ca-public.ca-app.ca-wide main .ma-horarios dt {
  font-weight: 700;
  color: var(--cw-text);
}
body.ca-public.ca-app.ca-wide main .ma-horarios dd {
  margin: 0;
  color: var(--cw-text);
}
body.ca-public.ca-app.ca-wide main .ma-horarios .ma-cerrado {
  color: var(--cw-text-3);
}

/* --- Sites web --- */
body.ca-public.ca-app.ca-wide main .ma-sites {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
body.ca-public.ca-app.ca-wide main .ma-sites a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow-wrap: anywhere;
}

/* --- Carte « Lo que puede consultar » --- */
body.ca-public.ca-app.ca-wide main .ma-consultar__list {
  display: grid;
  gap: 12px;
}
@media (min-width: 600px) {
  body.ca-public.ca-app.ca-wide main .ma-consultar__list {
    grid-template-columns: 1fr 1fr;
  }
}
body.ca-public.ca-app.ca-wide main a.ma-consultar__item {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid var(--cw-card-border);
  border-radius: 14px;
  background: #ffffff;
  color: var(--cw-text);
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.ca-public.ca-app.ca-wide main a.ma-consultar__item:hover {
  border-color: var(--ma-item-accent, var(--asistente-accent));
  box-shadow: 0 2px 10px rgba(20, 22, 31, 0.06);
  color: var(--cw-text);
}
body.ca-public.ca-app.ca-wide main .ma-consultar__item--catalogo { --ma-item-accent: #db2777; }
body.ca-public.ca-app.ca-wide main .ma-consultar__item--agendas { --ma-item-accent: #7c3aed; }
body.ca-public.ca-app.ca-wide main .ma-consultar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ma-item-accent) 14%, #ffffff);
  font-size: 1.35rem;
  line-height: 1;
}
body.ca-public.ca-app.ca-wide main .ma-consultar__text {
  flex: 1 1 auto;
  min-width: 0;
}
body.ca-public.ca-app.ca-wide main .ma-consultar__title {
  display: block;
  font-weight: 700;
}
body.ca-public.ca-app.ca-wide main .ma-consultar__sub {
  display: block;
  margin-top: 2px;
  font-size: 0.9rem;
  color: var(--cw-text-2);
}
body.ca-public.ca-app.ca-wide main .ma-consultar__chevron {
  flex: none;
  color: var(--cw-text-3);
  font-size: 1.4rem;
  line-height: 1;
}

/* --- Carte « Cómo habla » --- */
body.ca-public.ca-app.ca-wide main .ma-habla__chat {
  margin: 14px 0 8px;
  padding: 16px;
  border-radius: 14px;
  background: #e9e2d6;
}
body.ca-public.ca-app.ca-wide main .ma-habla__bubble {
  max-width: 92%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px 14px 14px 4px;
  background: #ffffff;
  box-shadow: 0 1px 1px rgba(20, 22, 31, 0.08);
  color: var(--cw-text);
  font-size: 0.975rem;
  line-height: 1.45;
}
body.ca-public.ca-app.ca-wide main .ma-habla__caption {
  margin: 0;
  font-size: 0.875rem;
  color: var(--cw-text-2);
}

/* --- Profil non configuré --- */
body.ca-public.ca-app.ca-wide main .ma-noconfig p {
  margin-bottom: 16px;
  color: var(--cw-text-2);
}

/* =========================
   Composants .cw-* ajoutés pour mi-actividad.html (même bloc ca-wide) :
   boutons segmentés, bandeau d'état.
   Puis mise en page propre à la page (.act-*), accent #0b5cc4.
   Contrastes : blanc sur #15212a 15,9:1, #7fb5f5 sur #15212a 8,3:1,
   #0b5cc4 sur #ffffff 6,1:1, #8a3a06 sur #fff7ef 8,0:1, #1f6b3a sur #ffffff
   6,6:1, #6d28d9 sur #ffffff 7,1:1.
========================= */
body.ca-public.ca-app.ca-wide {
  --actividad-accent: #0b5cc4;
  --actividad-accent-hover: #084a9e;
}

/* --- Boutons segmentés (aria-pressed) --- */
body.ca-public.ca-app.ca-wide main .cw-segmented {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--cw-card-border);
  border-radius: 14px;
  background: #ffffff;
}
body.ca-public.ca-app.ca-wide main .cw-segmented__btn {
  min-height: 40px;
  min-width: 84px;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--cw-text-2);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
body.ca-public.ca-app.ca-wide main .cw-segmented__btn:hover {
  color: var(--cw-text);
}
body.ca-public.ca-app.ca-wide main .cw-segmented__btn[aria-pressed="true"] {
  background: var(--actividad-accent);
  color: #ffffff;
}
@media (max-width: 600px) {
  body.ca-public.ca-app.ca-wide main .cw-segmented {
    display: flex;
  }
  body.ca-public.ca-app.ca-wide main .cw-segmented__btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
  }
}

/* --- Bandeau d'état (pause de l'assistant) --- */
body.ca-public.ca-app.ca-wide main .cw-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  margin: 0 0 16px;
  padding: 10px 16px;
  border: 1px solid var(--cw-pause-border);
  border-radius: 14px;
  background: var(--cw-pause-bg);
  color: var(--cw-pause-text);
  font-weight: 600;
}
body.ca-public.ca-app.ca-wide main a.cw-banner__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cw-pause-text);
  font-weight: 700;
  text-decoration: underline;
}

/* =========================
   Mi actividad (.act-*)
========================= */
body.ca-public.ca-app.ca-wide main .act-periodo {
  margin-bottom: 12px;
}
body.ca-public.ca-app.ca-wide main .act-rango {
  margin: 8px 0 0;
  font-size: 0.9rem;
  color: var(--cw-text-2);
}
body.ca-public.ca-app.ca-wide main .act-rango--anterior {
  opacity: 0.5;
}

/* Mise en page : colonne sur mobile, rangées à partir de 960 px. */
body.ca-public.ca-app.ca-wide main .act-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: opacity 0.2s ease;
}
/* Autre période en chargement : contenu actuel atténué */
body.ca-public.ca-app.ca-wide main .act-layout--cargando {
  opacity: 0.5;
  pointer-events: none;
}
body.ca-public.ca-app.ca-wide main .act-fila {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 960px) {
  body.ca-public.ca-app.ca-wide main .act-layout,
  body.ca-public.ca-app.ca-wide main .act-fila {
    gap: 20px;
  }
  body.ca-public.ca-app.ca-wide main .act-fila {
    flex-direction: row;
    align-items: stretch;
  }
  body.ca-public.ca-app.ca-wide main .act-fila > * {
    flex: 1 1 0;
    min-width: 0;
  }
  /* Phrase 2/5, chiffres 3/5 */
  body.ca-public.ca-app.ca-wide main .act-fila--top > .act-frase { flex-grow: 2; }
  body.ca-public.ca-app.ca-wide main .act-fila--top > .act-cifras { flex-grow: 3; }
  /* « Cuándo » (2/3) à gauche de « Quién » (1/3) ; ordre mobile inverse */
  body.ca-public.ca-app.ca-wide main .act-fila > .act-cuando { order: -1; flex-grow: 2; }
  /* « Por atender » (2/3), « Próximas citas » (1/3) */
  body.ca-public.ca-app.ca-wide main .act-fila > .act-atender { flex-grow: 2; }
}
@media (prefers-reduced-motion: reduce) {
  body.ca-public.ca-app.ca-wide main .act-layout {
    transition: none;
  }
}

/* --- Carte phrase --- */
body.ca-public.ca-app.ca-wide main .act-frase {
  padding: 22px 22px 24px;
  border-radius: 18px;
  background: #15212a;
  color: #ffffff;
}
body.ca-public.ca-app.ca-wide main .act-frase__main {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.4;
  color: #ffffff;
}
body.ca-public.ca-app.ca-wide main .act-frase__num {
  color: #7fb5f5;
  font-weight: 800;
  white-space: nowrap; /* « 23 clientes » jamais coupé */
}
body.ca-public.ca-app.ca-wide main .act-frase__sub {
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #d7dee6;
}
body.ca-public.ca-app.ca-wide main .act-frase--skel .cw-skel {
  background: #2a3a46;
}

/* --- Quatre chiffres --- */
body.ca-public.ca-app.ca-wide main .act-cifras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (min-width: 960px) {
  body.ca-public.ca-app.ca-wide main .act-cifras {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
body.ca-public.ca-app.ca-wide main .act-cifra {
  display: flex;
  flex-direction: column;
  min-height: 112px;
  padding: 14px 16px;
  border: 1px solid var(--cw-card-border);
  border-radius: 16px;
  background: #ffffff;
  color: var(--cw-text);
}
body.ca-public.ca-app.ca-wide main .act-cifra__valor {
  margin: 0 0 4px;
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--cw-text);
}
body.ca-public.ca-app.ca-wide main .act-cifra__label {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cw-text);
}
body.ca-public.ca-app.ca-wide main .act-cifra__sub {
  margin: 2px 0 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--cw-text-2);
}
body.ca-public.ca-app.ca-wide main .act-cifra__sub--ok {
  color: #1f6b3a;
  font-weight: 700;
}
/* « Por atender » non nul : carte orangée, entière cliquable */
body.ca-public.ca-app.ca-wide main a.act-cifra--atender {
  border-color: #f3d3b3;
  background: #fff7ef;
  color: #8a3a06;
  text-decoration: none;
}
body.ca-public.ca-app.ca-wide main a.act-cifra--atender:hover {
  border-color: #e9b98b;
  color: #8a3a06;
}
body.ca-public.ca-app.ca-wide main .act-cifra--atender .act-cifra__valor,
body.ca-public.ca-app.ca-wide main .act-cifra--atender .act-cifra__label,
body.ca-public.ca-app.ca-wide main .act-cifra--atender .act-cifra__sub {
  color: #8a3a06;
}
body.ca-public.ca-app.ca-wide main .act-cifra__ver {
  margin-top: auto;
  padding-top: 4px;
  font-weight: 700;
  text-decoration: underline;
}

/* --- Quién atendió --- */
body.ca-public.ca-app.ca-wide main .act-quien__barra {
  display: flex;
  height: 16px;
  margin: 8px 0 14px;
  overflow: hidden;
  border-radius: 8px;
  background: #ece8df;
}
body.ca-public.ca-app.ca-wide main .act-quien__seg {
  display: block;
  height: 100%;
}
body.ca-public.ca-app.ca-wide main .act-quien__seg--solo { background: var(--actividad-accent); }
body.ca-public.ca-app.ca-wide main .act-quien__seg--ayuda { background: #f0a35c; }

/* Légendes (Quién atendió, Cuándo te escriben) */
body.ca-public.ca-app.ca-wide main .act-leyenda {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
body.ca-public.ca-app.ca-wide main .act-leyenda li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  list-style: none;
}
body.ca-public.ca-app.ca-wide main .act-leyenda--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 12px 0 0;
}
body.ca-public.ca-app.ca-wide main .act-leyenda__dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
body.ca-public.ca-app.ca-wide main .act-leyenda__dot--solo { background: var(--actividad-accent); }
body.ca-public.ca-app.ca-wide main .act-leyenda__dot--ayuda { background: #f0a35c; }
body.ca-public.ca-app.ca-wide main .act-leyenda__dot--abierto { background: #a9c9f2; }
body.ca-public.ca-app.ca-wide main .act-leyenda__dot--cerrado { background: var(--actividad-accent); }
body.ca-public.ca-app.ca-wide main .act-leyenda__texto {
  flex: 1 1 auto;
  font-size: 0.95rem;
}
body.ca-public.ca-app.ca-wide main .act-leyenda--inline .act-leyenda__texto {
  flex: none;
  font-size: 0.875rem;
  color: var(--cw-text-2);
}
body.ca-public.ca-app.ca-wide main .act-leyenda__num {
  font-weight: 800;
}
body.ca-public.ca-app.ca-wide main .act-nota {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--cw-text-2);
}

/* --- Cuándo te escriben : histogramme en div --- */
body.ca-public.ca-app.ca-wide main .act-cuando__sub {
  margin: 0 0 14px;
  font-weight: 600;
}
body.ca-public.ca-app.ca-wide main .act-hist {
  --act-hist-alto: 110px;
}
@media (min-width: 960px) {
  body.ca-public.ca-app.ca-wide main .act-hist {
    --act-hist-alto: 180px;
  }
}
body.ca-public.ca-app.ca-wide main .act-hist__barras,
body.ca-public.ca-app.ca-wide main .act-hist__ejes {
  display: flex;
  gap: 3px;
}
body.ca-public.ca-app.ca-wide main .act-hist__barras {
  align-items: flex-end;
  height: var(--act-hist-alto);
  border-bottom: 1px solid var(--cw-card-border);
}
body.ca-public.ca-app.ca-wide main .act-hist__col {
  display: flex;
  flex: 1 1 0;
  align-items: flex-end;
  height: 100%;
}
body.ca-public.ca-app.ca-wide main .act-hist__pila {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
}
body.ca-public.ca-app.ca-wide main .act-hist__seg {
  display: block;
  width: 100%;
}
body.ca-public.ca-app.ca-wide main .act-hist__seg--cerrado { background: var(--actividad-accent); }
body.ca-public.ca-app.ca-wide main .act-hist__seg--abierto { background: #a9c9f2; }
/* Horaires inconnus : une seule couleur */
body.ca-public.ca-app.ca-wide main .act-hist--uno .act-hist__seg--abierto { background: var(--actividad-accent); }
body.ca-public.ca-app.ca-wide main .act-hist__ejes {
  margin-top: 6px;
}
body.ca-public.ca-app.ca-wide main .act-hist__eje {
  position: relative;
  display: flex;
  justify-content: center; /* libellé centré sous sa barre, débordant des deux côtés */
  flex: 1 1 0;
  height: 16px;
  font-size: 0.72rem;
  color: var(--cw-text-2);
  white-space: nowrap;
  overflow: visible;
}

/* --- Por atender ahora --- */
body.ca-public.ca-app.ca-wide main .act-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  margin-left: 10px;
  padding: 0 8px;
  border-radius: 999px;
  background: #fff7ef;
  border: 1px solid #f3d3b3;
  color: #8a3a06;
  font-size: 0.85rem;
  font-weight: 800;
  vertical-align: middle;
}
body.ca-public.ca-app.ca-wide main .act-atender__lista {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
body.ca-public.ca-app.ca-wide main .act-atender__lista > li {
  margin: 0;
  border-top: 1px solid var(--cw-rule);
  list-style: none;
}
body.ca-public.ca-app.ca-wide main .act-atender__lista > li:first-child {
  border-top: 0;
}
body.ca-public.ca-app.ca-wide main a.act-atender__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nombre tiempo" "resumen resumen";
  gap: 2px 12px;
  min-height: 44px;
  padding: 12px 4px;
  color: var(--cw-text);
  text-decoration: none;
}
body.ca-public.ca-app.ca-wide main a.act-atender__item:hover .act-atender__nombre {
  color: var(--actividad-accent);
  text-decoration: underline;
}
@media (min-width: 960px) {
  body.ca-public.ca-app.ca-wide main a.act-atender__item {
    grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto;
    grid-template-areas: "nombre resumen tiempo";
    align-items: baseline;
  }
}
body.ca-public.ca-app.ca-wide main .act-atender__nombre {
  grid-area: nombre;
  font-weight: 700;
  overflow-wrap: anywhere;
}
body.ca-public.ca-app.ca-wide main .act-atender__tiempo {
  grid-area: tiempo;
  font-size: 0.85rem;
  color: var(--cw-text-2);
  white-space: nowrap;
}
body.ca-public.ca-app.ca-wide main .act-atender__resumen {
  grid-area: resumen;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 0.925rem;
  line-height: 1.45;
  color: var(--cw-text-2);
}
body.ca-public.ca-app.ca-wide main .act-btn-block {
  width: 100%;
}

/* --- Próximas citas --- */
body.ca-public.ca-app.ca-wide main .act-citas__sub {
  margin: -4px 0 10px;
  font-size: 0.9rem;
}
body.ca-public.ca-app.ca-wide main .act-citas__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
body.ca-public.ca-app.ca-wide main .act-cita {
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--cw-rule);
  list-style: none;
}
body.ca-public.ca-app.ca-wide main .act-cita:first-child {
  border-top: 0;
  padding-top: 2px;
}
body.ca-public.ca-app.ca-wide main .act-cita p {
  margin: 0;
  font-size: 0.95rem;
}
body.ca-public.ca-app.ca-wide main .act-cita__cuando {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
}
body.ca-public.ca-app.ca-wide main .act-cita__fecha {
  color: #6d28d9;
  font-weight: 800;
}
body.ca-public.ca-app.ca-wide main .act-cita__hora {
  font-weight: 700;
}
body.ca-public.ca-app.ca-wide main .act-cita__cliente {
  font-weight: 600;
}
body.ca-public.ca-app.ca-wide main a.act-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--actividad-accent);
  font-weight: 700;
  text-decoration: none;
}
body.ca-public.ca-app.ca-wide main a.act-link:hover {
  color: var(--actividad-accent-hover);
  text-decoration: underline;
}

/* --- ¿Cómo contamos? --- */
body.ca-public.ca-app.ca-wide main .act-contamos {
  padding: 0;
}
body.ca-public.ca-app.ca-wide main .act-contamos__summary {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 12px 20px;
  font-weight: 700;
  cursor: pointer;
}
body.ca-public.ca-app.ca-wide main .act-contamos__lista {
  margin: 0;
  padding: 0 20px 18px 40px;
}
body.ca-public.ca-app.ca-wide main .act-contamos__lista li {
  margin: 0 0 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--cw-text-2);
}
body.ca-public.ca-app.ca-wide main .act-contamos__lista strong {
  color: var(--cw-text);
}

/* --- Premier usage --- */
body.ca-public.ca-app.ca-wide main .act-primer {
  display: grid;
  gap: 16px;
  max-width: 640px;
}
body.ca-public.ca-app.ca-wide main .act-primer__ilus {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 72px;
  margin-bottom: 18px;
}
body.ca-public.ca-app.ca-wide main .act-primer__barra {
  display: block;
  width: 18px;
  border-radius: 5px 5px 2px 2px;
  background: #a9c9f2;
}
body.ca-public.ca-app.ca-wide main .act-primer__barra:nth-child(4),
body.ca-public.ca-app.ca-wide main .act-primer__barra:nth-child(6) {
  background: var(--actividad-accent);
}
body.ca-public.ca-app.ca-wide main .act-primer__title {
  margin: 0 0 8px;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--cw-text);
}
body.ca-public.ca-app.ca-wide main .act-primer__lista {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
body.ca-public.ca-app.ca-wide main .act-primer__lista li {
  display: flex;
  gap: 10px;
  margin: 0 0 10px;
  list-style: none;
}
body.ca-public.ca-app.ca-wide main .act-primer__check {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e3f1e7;
  color: #1f6b3a;
  font-size: 0.8rem;
  font-weight: 800;
}
body.ca-public.ca-app.ca-wide main .act-primer__prueba p {
  margin: 6px 0 0;
}