@font-face {
      font-family: 'Montserrat';
      src: url('/webchat/assets/fonts/Montserrat-ExtraLight.ttf') format('truetype');
      font-weight: 200;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Montserrat';
      src: url('/webchat/assets/fonts/Montserrat-ExtraLightItalic.ttf') format('truetype');
      font-weight: 200;
      font-style: italic;
      font-display: swap;
    }
    @font-face {
      font-family: 'Montserrat';
      src: url('/webchat/assets/fonts/Montserrat-Light.ttf') format('truetype');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Montserrat';
      src: url('/webchat/assets/fonts/Montserrat-LightItalic.ttf') format('truetype');
      font-weight: 300;
      font-style: italic;
      font-display: swap;
    }
    @font-face {
      font-family: 'Montserrat';
      src: url('/webchat/assets/fonts/Montserrat-Regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Montserrat';
      src: url('/webchat/assets/fonts/Montserrat-Italic.ttf') format('truetype');
      font-weight: 400;
      font-style: italic;
      font-display: swap;
    }
    @font-face {
      font-family: 'Montserrat';
      src: url('/webchat/assets/fonts/Montserrat-Medium.ttf') format('truetype');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Montserrat';
      src: url('/webchat/assets/fonts/Montserrat-MediumItalic.ttf') format('truetype');
      font-weight: 500;
      font-style: italic;
      font-display: swap;
    }
    @font-face {
      font-family: 'Montserrat';
      src: url('/webchat/assets/fonts/Montserrat-SemiBold.ttf') format('truetype');
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Montserrat';
      src: url('/webchat/assets/fonts/Montserrat-SemiBoldItalic.ttf') format('truetype');
      font-weight: 600;
      font-style: italic;
      font-display: swap;
    }
    @font-face {
      font-family: 'Montserrat';
      src: url('/webchat/assets/fonts/Montserrat-Bold.ttf') format('truetype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Montserrat';
      src: url('/webchat/assets/fonts/Montserrat-BoldItalic.ttf') format('truetype');
      font-weight: 700;
      font-style: italic;
      font-display: swap;
    }
    @font-face {
      font-family: 'Montserrat';
      src: url('/webchat/assets/fonts/Montserrat-ExtraBold.ttf') format('truetype');
      font-weight: 800;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Montserrat';
      src: url('/webchat/assets/fonts/Montserrat-Black.ttf') format('truetype');
      font-weight: 900;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'Cormorant Garamond';
      src: url('/webchat/assets/fonts/CormorantGaramond-Light.ttf') format('truetype');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Cormorant Garamond';
      src: url('/webchat/assets/fonts/CormorantGaramond-LightItalic.ttf') format('truetype');
      font-weight: 300;
      font-style: italic;
      font-display: swap;
    }
    @font-face {
      font-family: 'Cormorant Garamond';
      src: url('/webchat/assets/fonts/CormorantGaramond-Regular.ttf') format('truetype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Cormorant Garamond';
      src: url('/webchat/assets/fonts/CormorantGaramond-Italic.ttf') format('truetype');
      font-weight: 400;
      font-style: italic;
      font-display: swap;
    }
    @font-face {
      font-family: 'Cormorant Garamond';
      src: url('/webchat/assets/fonts/CormorantGaramond-Medium.ttf') format('truetype');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Cormorant Garamond';
      src: url('/webchat/assets/fonts/CormorantGaramond-MediumItalic.ttf') format('truetype');
      font-weight: 500;
      font-style: italic;
      font-display: swap;
    }
    @font-face {
      font-family: 'Cormorant Garamond';
      src: url('/webchat/assets/fonts/CormorantGaramond-SemiBold.ttf') format('truetype');
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Cormorant Garamond';
      src: url('/webchat/assets/fonts/CormorantGaramond-SemiBoldItalic.ttf') format('truetype');
      font-weight: 600;
      font-style: italic;
      font-display: swap;
    }
    @font-face {
      font-family: 'Cormorant Garamond';
      src: url('/webchat/assets/fonts/CormorantGaramond-Bold.ttf') format('truetype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'Cormorant Garamond';
      src: url('/webchat/assets/fonts/CormorantGaramond-BoldItalic.ttf') format('truetype');
      font-weight: 700;
      font-style: italic;
      font-display: swap;
    }
    :root {
      --bg: #ffffff;
      --panel: #ffffff;
      --primary: #0f766e;
      --primary-dark: #115e59;
      --text: #172033;
      --muted: #64748b;
      --border: #dbe7e5;
      --user: #e6fffb;
      --bot: #f8fafc;
      --danger: #fff7ed;
      --catalog-content-width: 970px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: #FFFFFF;
      color: var(--text);
      min-height: 100vh;
    }

    .shell {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 28px 10vw 168px;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    header {
      margin-bottom: 18px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .logo {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      display: block;
      object-fit: cover;
      background: #ffffff;
      box-shadow: 0 10px 30px rgba(15, 118, 110, .18);
    }

    h1 {
      margin: 0;
      font-size: 1.22rem;
      color: #12344d;
    }

    .subtitle {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: .95rem;
    }

    .notice {
      background: var(--danger);
      border: 1px solid #fed7aa;
      color: #7c2d12;
      padding: 12px 14px;
      border-radius: 14px;
      font-size: .92rem;
      margin: 14px 0;
    }

    .chat {
      flex: 1;
      background: #FFFFFF;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: calc(100vh - 230px);
    }

    .messages {
      flex: 1;
      padding: 20px 20px 45vh;
      overflow-y: auto;
      scroll-behavior: 'smooth';
    }

    .msg {
      display: flex;
      margin-bottom: 14px;
    }

    .msg.user { justify-content: flex-end; }

    .bubble {
      max-width: min(820px, 94%);
      padding: 16px 18px;
      border-radius: 18px;
      white-space: normal;
      line-height: 1.62;
      font-size: .96rem;
      border: 1px solid var(--border);
    }

    .bubble p {
      margin: 0 0 12px;
    }

    .bubble p:last-child {
      margin-bottom: 0;
    }

    .msg.initial-greeting .bubble {
      padding: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      border-radius: 0;
    }

    .msg.initial-greeting .bubble > h1:first-child {
      margin: 0 0 14px;
      padding: 0;
      color: #12344d;
      background: transparent;
      font-family: 'Montserrat', Arial, sans-serif;
      font-size: clamp(2rem, 11vw, 3.6rem);
      font-weight: 300;
      line-height: 1.04;
      letter-spacing: -0.035em;
      overflow-wrap: anywhere;
      text-wrap: balance;
    }

    .msg.initial-greeting .bubble > p {
      margin-bottom: 0;
    }

    .msg.pyme-catalog .bubble {
      width: 100%;
      max-width: none;
      padding: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      border-radius: 0;
    }

    .msg.catalog-response .bubble {
      width: 100%;
      max-width: none;
      padding: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      border-radius: 0;
    }

    .msg.product-detail-response {
      width: 100%;
    }

    .msg.product-detail-response .bubble {
      width: min(100%, var(--catalog-content-width));
      max-width: var(--catalog-content-width);
      padding: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .catalog-table-wrap {
      margin-bottom: 28px;
    }

    .pyme-plans { margin: 12px 0 24px; color: #111827; }
    .pyme-plans__title { margin: 0 0 24px; color: #0754ad; font-size: clamp(1.8rem, 4vw, 2.55rem); line-height: 1.08; }
    .pyme-plans__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
    .pyme-plan__badge { display: flex; align-items: center; justify-content: center; min-height: 96px; color: #fff; font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 800; line-height: 1; }
    .pyme-plan--50 .pyme-plan__badge { background: #0784c9; }
    .pyme-plan--70smart .pyme-plan__badge { background: #0754ad; }
    .pyme-plan--70 .pyme-plan__badge { background: #063b8c; }
    .pyme-plan--80 .pyme-plan__badge { background: #061f62; }
    .pyme-plan__smart { font-size: .32em; margin-left: 3px; align-self: flex-end; padding-bottom: 8px; }
    .pyme-plan__value { margin: 14px 0 0; font-size: 1rem; line-height: 1.25; }
    .pyme-plan__note { margin: 9px 0 0; font-size: .92rem; font-weight: 700; }
    .pyme-plan__more { display: inline-block; margin-top: 10px; color: #c60b7e; font-size: .94rem; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
    .pyme-plan__more:hover, .pyme-plan__more:focus-visible { color: #8d075b; }
    @media (max-width: 720px) { .pyme-plans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .pyme-plan__badge { min-height: 78px; } }

    .bubble ul {
      margin: 10px 0 14px;
      padding-left: 1.15rem;
    }

    .bubble li {
      margin: 7px 0;
      padding-left: 2px;
    }

    .bubble strong {
      color: #12344d;
      font-weight: 700;
    }

    .bubble h1,
    .bubble h2,
    .bubble h3 {
      margin: 22px 0 12px;
      color: #12344d;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }

    .bubble h1 {
      font-size: clamp(1.22rem, 4.5vw, 1.5rem);
      font-weight: 900;
    }

    .bubble h2 {
      font-size: clamp(1.12rem, 4vw, 1.35rem);
      font-weight: 850;
    }

    .bubble h2.catalog-section-title {
      margin: 34px 0 18px;
      padding: 10px 0 10px 16px;
      border-left: 6px solid #0b8cc9;
      color: #0754ad;
      font-size: clamp(1.55rem, 5.6vw, 2.2rem);
      font-weight: 900;
      letter-spacing: -0.035em;
      overflow-wrap: anywhere;
    }

    .bubble h3 {
      font-size: clamp(1.02rem, 3.5vw, 1.18rem);
      font-weight: 800;
    }



    .product-card-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 310px));
      align-items: stretch;
      justify-content: start;
      gap: 20px;
      margin: 18px 0 32px;
      max-width: var(--catalog-content-width);
    }

    .product-card {
      display: flex;
      min-width: 0;
      min-height: 410px;
      flex-direction: column;
      background: #fff;
      border: 1px solid #dfe6ec;
      border-radius: 7px;
      overflow: hidden;
      box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12);
    }

    .product-card__head {
      background: #397fc9;
      color: #fff;
      padding: 16px;
      min-height: 76px;
      display: flex;
      align-items: center;
    }

    .product-card__kind {
      margin-bottom: 2px;
      font-size: 0.82rem;
      font-weight: 700;
      line-height: 1.15;
    }

    .product-card__title {
      font-size: 1.06rem;
      line-height: 1.18;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .product-card__body {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 16px;
    }

    .product-card__label {
      color: #6b7280;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-bottom: 2px;
    }

    .product-card__price {
      display: flex;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 6px;
      color: #397fc9;
      font-size: clamp(1rem, 3.2vw, 1.2rem);
      line-height: 1;
      font-weight: 900;
      letter-spacing: -0.04em;
      margin: 0 0 18px;
    }

    .product-card__period {
      color: #394150;
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0;
    }

    .product-card__bullets {
      list-style: none !important;
      padding: 0 !important;
      margin: 0 !important;
      display: grid;
      gap: 12px;
    }

    .bot .bubble .product-card__bullets li {
      position: relative;
      padding: 0 0 0 25px !important;
      margin: 0 !important;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #4b5563;
      line-height: 1.45;
      font-size: 0.85rem;
    }

    .bot .bubble .product-card__bullets li::before {
      content: '✓';
      position: absolute;
      left: 0;
      top: 0.1em;
      width: 17px;
      height: 17px;
      border-radius: 999px;
      background: #397fc9;
      color: white;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      font-weight: 900;
    }



    .product-card__indicators {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 18px;
    }

    .product-card__indicator {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 5px 10px;
      border-radius: 999px;
      background: #eaf6fc;
      color: #075985;
      font-size: 0.86rem;
      font-weight: 700;
      line-height: 1.2;
    }

    .product-card__more {
      margin-top: auto;
      width: 100%;
      border: 1px solid #cc087c;
      background: #cc087c;
      color: #fff;
      border-radius: 6px;
      padding: 10px 16px;
      font-family: inherit;
      font-weight: 800;
      font-size: 0.92rem;
      cursor: pointer;
      transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }

    .product-card__more:hover,
    .product-card__more:focus-visible {
      background: #a80766;
      box-shadow: 0 6px 14px rgba(204, 8, 124, 0.20);
      transform: translateY(-1px);
      outline: none;
    }

    .product-card__more:disabled {
      opacity: 0.65;
      cursor: wait;
      transform: none;
      box-shadow: none;
    }

    .product-card-table {
      margin-top: 8px;
    }

    @media (max-width: 1000px) {
      .product-card-grid {
        grid-template-columns: repeat(2, minmax(0, 310px));
      }
    }

    @media (max-width: 680px) {
      .product-card-grid {
        grid-template-columns: 1fr;
        justify-content: stretch;
        gap: 14px;
      }
      .product-card { min-height: 390px; }
      .product-card__head { min-height: 72px; padding: 16px; }
      .product-card__body { padding: 16px; }
    }



    .contact-card-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 118px;
      gap: 14px;
      align-items: center;
    }

    .contact-qr {
      width: 108px;
      height: 108px;
      border: 1px solid #dbe7e5;
      border-radius: 10px;
      padding: 6px;
      background: #FFFFFF;
    }

    .contact-whatsapp-link {
      display: inline-flex;
      margin-top: 8px;
      color: #087fc3;
      font-weight: 800;
      text-decoration: none;
    }

    .contact-whatsapp-link:hover,
    .contact-whatsapp-link:focus-visible {
      text-decoration: underline;
      outline: none;
    }

    @media (max-width: 520px) {
      .contact-card-layout {
        grid-template-columns: 1fr;
      }
      .contact-qr {
        width: 120px;
        height: 120px;
      }
    }

    .contact-block {
      line-height: 1.7;
      margin-top: 8px;
      font-weight: 700;
    }

    .advisor-divider {
      width: 100%;
      height: 1px;
      margin: 28px 0 20px;
      border: 0;
      background: #dbe7e5;
    }

    .advisor-link {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-top: 8px;
      color: #0754ad;
      font-weight: 750;
      text-decoration: none;
      text-underline-offset: 3px;
    }

    .advisor-link:hover,
    .advisor-link:focus-visible {
      color: #063b8c;
      text-decoration: underline;
      outline: none;
    }

    .advisor-link__icon {
      width: 21px;
      height: 21px;
      flex: 0 0 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .advisor-link__dot {
      fill: currentColor;
      stroke: none;
    }

    .product-detail-response .bubble h3.advisor-card-title {
      margin: 24px 0 2px;
      color: #12344d;
      font-size: clamp(1.25rem, 4vw, 1.5rem);
      font-weight: 800;
      line-height: 1.12;
      letter-spacing: -0.025em;
    }

    .msg.product-detail-response .bubble .advisor-card-title + .contact-block {
      margin: 0;
      padding: 0;
      background: transparent;
      border: 0;
      border-radius: 0;
      color: #12344d;
      font-size: 0.95rem;
      font-weight: 400;
      line-height: 1.32;
    }

    .msg.product-detail-response .bubble .advisor-card-title + .contact-block .advisor-link {
      margin-top: 4px;
      font-size: 0.82rem;
      font-weight: 750;
    }

    .msg.product-detail-response .bubble .advisor-card-title + .contact-block .advisor-link__icon {
      width: 17px;
      height: 17px;
      flex-basis: 17px;
    }


    .table-wrap {
      width: 100%;
      overflow-x: auto;
      margin: 14px 0 16px;
      border-radius: 14px;
      border: 1px solid #cfe7f8;
      box-shadow: 0 8px 24px rgba(2, 132, 199, .06);
    }

    .benefit-table {
      width: 100%;
      border-collapse: collapse;
      background: #ffffff;
      font-size: .9rem;
      min-width: 560px;
    }

    .benefit-table th {
      background: #0784c9;
      color: #ffffff;
      text-align: left;
      padding: 11px 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    .benefit-table td {
      padding: 10px 12px;
      border-top: 1px solid #e2eef7;
      vertical-align: top;
    }

    .benefit-table tbody tr:nth-child(even) td {
      background: #f6fbff;
    }

    .benefit-table td:nth-child(2),
    .benefit-table td:nth-child(3),
    .benefit-table td:nth-child(4) {
      color: #075985;
      font-weight: 650;
    }

    @media (max-width: 720px) {
      .table-wrap {
        margin-left: -4px;
        margin-right: -4px;
      }

      .benefit-table {
        font-size: .84rem;
        min-width: 620px;
      }

      .benefit-table th,
      .benefit-table td {
        padding: 9px 10px;
      }
    }

    .bot .bubble {
      background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
      border: 1px solid #cfe7f8;
      box-shadow: 0 10px 28px rgba(2, 132, 199, .08);
    }

    .bot .bubble p:first-child {
      background: #0784c9;
      color: #ffffff;
      margin: -16px -18px 16px;
      padding: 16px 18px;
      border-radius: 18px 18px 0 0;
      font-weight: 700;
      font-size: 1rem;
      line-height: 1.45;
    }

    .bot .bubble ul {
      list-style: none;
      padding-left: 0;
    }

    .bot .bubble li {
      position: relative;
      margin: 9px 0;
      padding: 10px 12px 10px 34px;
      border-radius: 12px;
      background: #eef8ff;
      border: 1px solid #d6ecfb;
    }

    .bot .bubble li::before {
      content: "✓";
      position: absolute;
      left: 12px;
      top: 10px;
      color: #0784c9;
      font-weight: 800;
    }

    .bot .bubble .contact-block {
      background: #FFFFFF;
      border: 1px solid #dbe7e5;
      border-radius: 12px;
      padding: 18px 20px;
      font-weight: 700;
    }


    .user .bubble {
      background: var(--user);
      border-color: #99f6e4;
      border-bottom-right-radius: 5px;
    }

    .bot .bubble {
      background: var(--bot);
      border-bottom-left-radius: 5px;
    }

    .privacy-alert {
      position: fixed;
      left: 10vw;
      right: 10vw;
      bottom: 128px;
      z-index: 35;
      display: none;
      padding: 10px 12px;
      border: 1px solid #fed7aa;
      border-radius: 14px;
      background: #fff7ed;
      color: #7c2d12;
      font-size: .82rem;
      line-height: 1.35;
      box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    }

    .privacy-alert strong {
      font-weight: 700;
    }

    .composer {
      position: fixed;
      left: 10vw;
      right: 10vw;
      bottom: 58px;
      z-index: 30;
      border-top: 1px solid var(--border);
      padding: 12px 0 10px;
      background: #FFFFFF;
      display: flex;
      gap: 10px;
      align-items: flex-end;
    }

    textarea {
      flex: 1;
      min-height: 48px;
      max-height: 140px;
      resize: vertical;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px;
      font: inherit;
      outline: none;
    }

    textarea:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(15,118,110,.12);
    }

    button {
      border: 0;
      background: var(--primary);
      color: white;
      border-radius: 14px;
      padding: 13px 18px;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover { background: var(--primary-dark); }
    button:disabled { opacity: .55; cursor: not-allowed; }

    footer {
      position: fixed;
      left: 10vw;
      right: 10vw;
      bottom: 0;
      z-index: 20;
      text-align: center;
      color: var(--muted);
      font-size: .78rem;
      padding: 8px 12px 10px;
      background: rgba(255,255,255,.96);
      border-top: 1px solid var(--border);
      backdrop-filter: blur(8px);
    }

    footer a { color: var(--primary-dark); }

    @media (max-width: 720px) {
      .shell {
        padding-left: 16px;
        padding-right: 16px;
        padding-bottom: 168px;
      }

      .composer,
      footer,
      .privacy-alert {
        left: 16px;
        right: 16px;
      }

      .privacy-alert {
        bottom: 126px;
      }

      .messages {
        padding: 12px 0 48vh;
      }

      .bubble {
        max-width: 100%;
        padding: 15px 16px;
        font-size: .94rem;
        line-height: 1.58;
      }

      .msg.bot,
      .msg.user {
        width: 100%;
      }

      .msg.user .bubble {
        max-width: 92%;
        margin-left: auto;
      }

      .composer {
        gap: 8px;
        bottom: 54px;
      }

      textarea {
        min-height: 58px;
      }

      button {
        padding-left: 16px;
        padding-right: 16px;
      }
    }



    .session-timer {
      position: fixed;
      top: 18px;
      right: 22px;
      z-index: 20;
      background: #FFFFFF;
      border: 1px solid #dbe7e5;
      border-radius: 999px;
      padding: 8px 13px;
      font-size: 0.82rem;
      font-weight: 800;
      color: #087fc3;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    }

    .session-timer.expired {
      color: #b91c1c;
      border-color: #fecaca;
      background: #fffafa;
    }

    .session-timer.warning {
      color: #b91c1c;
      border-color: #fca5a5;
      background: #fff1f2;
      animation: session-timer-warning 1s step-end infinite;
    }

    @keyframes session-timer-warning {
      50% { opacity: 0.35; }
    }

    @media (prefers-reduced-motion: reduce) {
      .session-timer.warning { animation: none; }
    }

    textarea {
      overflow: hidden !important;
      scrollbar-width: none !important;
      resize: none;
    }

    textarea::-webkit-scrollbar {
      display: none !important;
      width: 0 !important;
      height: 0 !important;
    }

    .composer.expired textarea,
    .composer.expired button {
      opacity: 0.62;
      cursor: not-allowed;
    }

    .credit-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin-top: 6px;
      color: var(--muted);
      text-decoration: none;
      font-size: .72rem;
    }

    .credit-link:hover {
      color: var(--primary-dark);
      text-decoration: underline;
    }

    .credit-logo {
      width: 58px;
      height: auto;
      display: inline-block;
      object-fit: contain;
    }

    .contact-handoff {
      width: 100%;
      margin: 18px 0 34px;
      padding: 24px 0 12px;
      border-top: 1px solid var(--border);
      color: var(--text);
      scroll-margin-top: 20px;
    }

    .contact-handoff__title,
    .contact-form__title {
      margin: 0 0 18px;
      color: #147b72;
      font-size: clamp(1.18rem, 2.4vw, 1.55rem);
      line-height: 1.25;
      font-weight: 800;
    }

    .contact-handoff__product {
      margin: -8px 0 18px;
      color: var(--muted);
      font-size: .94rem;
    }

    .contact-handoff__options {
      display: grid;
      width: min(100%, 276px);
      gap: 12px;
    }

    .contact-handoff__option,
    .contact-form__submit {
      width: 100%;
      border-radius: 6px;
      background: #d60072;
      color: #fff;
      padding: 10px 16px;
      font-size: .92rem;
      font-weight: 800;
      text-align: center;
    }

    .contact-handoff__option:hover,
    .contact-handoff__option:focus-visible,
    .contact-handoff__option.is-selected,
    .contact-form__submit:hover,
    .contact-form__submit:focus-visible {
      background: #ad005d;
    }

    .contact-handoff__option.is-selected {
      outline: 3px solid rgba(214, 0, 114, .2);
      outline-offset: 2px;
    }

    .contact-handoff__form-host {
      margin-top: 34px;
    }

    .contact-form {
      width: min(100%, 1040px);
    }

    .contact-form__fields {
      display: grid;
      gap: 4px 18px;
      margin-bottom: 30px;
    }

    .contact-form__field {
      display: grid;
      grid-template-columns: minmax(210px, .8fr) minmax(260px, 1fr);
      align-items: center;
      gap: 16px;
    }

    .contact-form__field label {
      font-size: 1rem;
      line-height: 1.3;
    }

    .contact-form__field input {
      width: 100%;
      min-height: 48px;
      border: 1px solid #94a3b8;
      border-radius: 4px;
      padding: 10px 12px;
      color: var(--text);
      background: #fff;
      font: inherit;
    }

    .contact-form__field input:focus,
    .contact-form__consent input:focus-visible {
      outline: 3px solid rgba(15, 118, 110, .18);
      outline-offset: 1px;
      border-color: var(--primary);
    }

    .contact-form__consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 12px 0;
      font-size: .98rem;
      line-height: 1.45;
      cursor: pointer;
    }

    .contact-form__consent input {
      flex: 0 0 auto;
      width: 20px;
      height: 20px;
      margin-top: 2px;
    }

    .contact-form__privacy {
      margin: 12px 0 20px;
      color: var(--muted);
      font-size: .9rem;
      line-height: 1.45;
    }

    .contact-form__status {
      min-height: 24px;
      color: #9f1239;
      font-weight: 600;
    }

    .contact-form__submit {
      display: block;
      width: min(100%, 276px);
      margin: 14px 0 0 auto;
    }

    .contact-form__whatsapp-fallback {
      display: inline-block;
      margin: 8px 0 14px;
      color: var(--primary-dark);
      font-weight: 700;
    }

    .messages.contact-completion-view {
      display: grid;
      min-height: 100vh;
      padding: 32px 16px;
      place-items: center;
    }

    .contact-completion {
      width: min(100%, 560px);
      text-align: center;
    }

    .contact-completion__logo {
      content: url('/webchat/assets/images/Logo_saludConfiable.png');
      width: min(100%, 260px);
      height: auto;
      margin-bottom: 24px;
    }

    .contact-completion h1 {
      margin: 0 0 28px;
      color: #12304a;
      font-size: clamp(1.45rem, 4vw, 2.25rem);
      line-height: 1.2;
    }

    .contact-completion__advisor {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      color: #12304a;
      font-size: 1rem;
    }

    .contact-completion__advisor strong {
      font-size: 1.35rem;
    }

    .contact-completion__advisor a {
      color: #075bbb;
      font-weight: 700;
    }

    .contact-completion__whatsapp {
      display: inline-block;
      margin-top: 24px;
      border-radius: 8px;
      padding: 13px 22px;
      background: #147b72;
      color: #fff;
      text-decoration: none;
      font-weight: 800;
    }

    body.maintenance-mode {
      background: #fff;
    }

    body.maintenance-mode .shell {
      min-height: 100vh;
      padding: clamp(24px, 6vh, 72px) 16px;
      justify-content: center;
    }

    body.maintenance-mode .chat {
      min-height: auto;
      overflow: visible;
    }

    .messages.maintenance-view {
      display: grid;
      min-height: auto;
      padding: 0;
      place-items: center;
    }

    .maintenance-panel {
      width: min(100%, 920px);
      color: #12304a;
    }

    .maintenance-hero {
      display: grid;
      grid-template-columns: 176px minmax(260px, 1fr) 180px;
      align-items: center;
      justify-content: center;
      gap: clamp(18px, 4vw, 34px);
    }

    .maintenance-hero__photo {
      width: 176px;
      height: 176px;
      border: 6px solid #075bbb;
      border-radius: 999px;
      object-fit: cover;
      box-shadow: 0 18px 34px rgba(18, 48, 74, .24);
      background: #fff;
    }

    .maintenance-hero__advisor {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: clamp(1rem, 2vw, 1.18rem);
      line-height: 1.15;
    }

    .maintenance-hero__advisor strong {
      color: #12304a;
      font-size: clamp(1.45rem, 3vw, 2rem);
      line-height: 1.05;
      font-weight: 900;
    }

    .maintenance-hero__advisor .advisor-link {
      margin-top: 4px;
      color: #075bbb;
      font-size: 1rem;
      font-weight: 800;
      text-decoration: none;
    }

    .maintenance-hero__qr {
      width: 180px;
      height: 180px;
      object-fit: contain;
      image-rendering: crisp-edges;
    }

    .maintenance-divider {
      width: 100%;
      height: 1px;
      margin: 24px 0 18px;
      border: 0;
      background: #dbe7e5;
    }

    .maintenance-title {
      margin: 0;
      color: #075bbb;
      font-size: clamp(1.55rem, 4.4vw, 2.55rem);
      font-weight: 900;
      line-height: 1.14;
      letter-spacing: -0.04em;
    }

    .maintenance-title span {
      color: #d60072;
    }

    .maintenance-lead {
      width: min(100%, 740px);
      margin: 0 0 14px;
      color: #147b72;
      font-size: clamp(1.1rem, 2.6vw, 1.55rem);
      line-height: 1.18;
      font-weight: 800;
    }

    .maintenance-panel .contact-handoff {
      margin: 12px 0 0;
      padding: 0;
      border-top: 0;
    }

    .maintenance-panel .contact-handoff__title,
    .maintenance-panel .contact-handoff__product {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .maintenance-panel .contact-handoff__options {
      width: min(100%, 276px);
      gap: 10px;
    }

    .maintenance-panel .contact-handoff__option {
      min-height: 42px;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: .95rem;
    }

    .maintenance-panel .contact-handoff__form-host {
      margin-top: 28px;
    }

    @media (max-width: 720px) {
      .contact-handoff {
        margin-bottom: 20px;
        padding-top: 18px;
      }

      .contact-form__field {
        grid-template-columns: 1fr;
        gap: 6px;
        margin-bottom: 12px;
      }

      .contact-form__field input {
        min-height: 52px;
      }

      .contact-form__submit {
        margin-left: 0;
      }

      .messages.contact-completion-view {
        padding: 24px 12px;
      }

      body.maintenance-mode .shell {
        padding: 22px 14px;
        justify-content: flex-start;
      }

      .maintenance-panel {
        width: min(100%, 390px);
      }

      .maintenance-hero {
        grid-template-columns: 112px 1fr;
        gap: 14px;
      }

      .maintenance-hero__photo {
        width: 112px;
        height: 112px;
        border-width: 4px;
      }

      .maintenance-hero__qr {
        grid-column: 1 / -1;
        justify-self: center;
        width: 132px;
        height: 132px;
      }

      .maintenance-divider {
        margin: 18px 0 14px;
      }

      .maintenance-title br {
        display: none;
      }

      .maintenance-panel .contact-handoff__options {
        width: 100%;
      }
    }