/* Login premium — solo presentación. No afecta autenticación. */

  :root{
    --bg-0:#07080b;
    --glass: rgba(255,255,255,0.035);
    --glass-strong: rgba(255,255,255,0.065);
    --border: rgba(255,255,255,0.09);
    --border-soft: rgba(255,255,255,0.06);
    --text-1:#f5f6f8;
    --text-2:#a7acb9;
    --text-3:#6b7180;
    --blue:#4d8dff;
    --blue-2:#7c5cff;
    --green:#33d68f;
    --amber:#f5c563;
    --wa-green:#25d366;
    --wa-out:#005c4b;
    --wa-tick:#53bdeb;
  }
  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ background:var(--bg-0); }
  body{
    min-height:100vh;
    background:var(--bg-0);
    color:var(--text-1);
    font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing:antialiased;
    display:flex;
    position:relative;
  }
  body::before{
    content:"";
    position:fixed; top:-25%; left:-12%; width:70%; height:85%;
    background:radial-gradient(circle at center, rgba(77,141,255,0.15), transparent 65%);
    filter:blur(50px); pointer-events:none; z-index:0;
  }
  body::after{
    content:"";
    position:fixed; bottom:-25%; right:-15%; width:60%; height:70%;
    background:radial-gradient(circle at center, rgba(124,92,255,0.13), transparent 65%);
    filter:blur(50px); pointer-events:none; z-index:0;
  }
  ::-webkit-scrollbar{ width:8px; }
  ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.1); border-radius:8px; }
  @keyframes fadeUp{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }

  /* ===================== LEFT ===================== */
  .left{
    width:65%;
    position:relative; z-index:1;
    padding:88px 68px 56px;
    border-right:1px solid var(--border-soft);
    display:flex; flex-direction:column; gap:30px;
  }
  .brand-row{
    display:flex; align-items:center; gap:10px;
    position:absolute; top:36px; left:68px;
  }
  .brand-mark{
    width:32px; height:32px; border-radius:9px;
    background:linear-gradient(135deg, var(--blue), var(--blue-2));
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 20px -6px rgba(77,141,255,0.55);
  }
  .brand-mark i{ font-size:16px; color:#fff; }
  .brand-name{ font-family:'Manrope', sans-serif; font-weight:700; font-size:14.5px; }

  .hero-copy{ max-width:640px; animation:fadeUp 0.5s ease both; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12px; font-weight:600; color:#bcd4ff;
    background:rgba(77,141,255,0.12); border:1px solid rgba(77,141,255,0.28);
    padding:6px 13px 6px 11px; border-radius:100px; margin-bottom:16px;
  }
  .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--green);
    box-shadow:0 0 0 3px rgba(51,214,143,0.18); animation:pulse 2s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(51,214,143,0.18);} 50%{ box-shadow:0 0 0 6px rgba(51,214,143,0.08);} }

  h1.hero{
    font-family:'Manrope', sans-serif; font-size:34px; line-height:1.16;
    font-weight:800; letter-spacing:-0.9px; color:#fff; margin-bottom:12px;
  }
  h1.hero .grad{
    background:linear-gradient(96deg, #8fb6ff 0%, #b9a4ff 55%, #7c5cff 100%);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .hero-sub{ font-size:15.5px; line-height:1.6; color:var(--text-2); max-width:490px; }
  .hero-sub strong{ color:#dfe3ea; font-weight:600; }

  /* ===================== MOCKUP STAGE ===================== */
  .mockup-stage{ position:relative; max-width:660px; margin-top:2px; animation:fadeUp 0.6s ease 0.05s both; }
  .mockup-wrap{
    border-radius:20px; padding:1px;
    background:linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.02) 40%, rgba(124,92,255,0.18));
    box-shadow:0 40px 90px -30px rgba(0,0,0,0.75), 0 0 0 1px rgba(0,0,0,0.4);
  }
  .browser{ background:#0d0f15; border-radius:19px; overflow:hidden; }
  .browser-bar{
    display:flex; align-items:center; gap:8px; padding:11px 16px;
    background:#111319; border-bottom:1px solid var(--border-soft);
  }
  .browser-bar .dots{ display:flex; gap:6px; }
  .browser-bar .dots span{ width:9px; height:9px; border-radius:50%; }
  .browser-bar .dots span:nth-child(1){ background:#ff5f57; }
  .browser-bar .dots span:nth-child(2){ background:#febc2e; }
  .browser-bar .dots span:nth-child(3){ background:#28c840; }
  .browser-bar .url{
    flex:1; margin-left:8px; background:#181b23; border-radius:7px; padding:5px 12px;
    font-size:11px; color:var(--text-3); display:flex; align-items:center; gap:6px;
  }
  .browser-bar .url i{ font-size:11px; }

  .clinic-site{
    position:relative; padding-bottom:6px;
    background:radial-gradient(ellipse at 15% 0%, rgba(77,141,255,0.08), transparent 55%), linear-gradient(180deg, #12151d 0%, #0e1016 100%);
  }
  .clinic-nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 26px; border-bottom:1px solid var(--border-soft);
  }
  .clinic-logo{ display:flex; align-items:center; gap:8px; font-family:'Manrope', sans-serif; font-weight:700; font-size:13.5px; color:#eef0f4; }
  .clinic-logo .sq{ width:20px; height:20px; border-radius:6px; background:linear-gradient(135deg,#33d68f,#1fa06a); }
  .clinic-links{ display:flex; gap:20px; }
  .clinic-links span{ font-size:11.5px; color:var(--text-3); font-weight:500; }
  .clinic-cta-mini{
    font-size:11.5px; font-weight:600; color:#0d0f15;
    background:linear-gradient(135deg, #6ee7b7, #33d68f);
    padding:7px 15px; border-radius:8px;
    box-shadow:0 8px 18px -8px rgba(51,214,143,0.5);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
  .clinic-cta-mini:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -8px rgba(51,214,143,0.6); }

  .clinic-hero{ display:flex; gap:22px; padding:24px 26px 18px; align-items:center; }
  .clinic-hero-text{ flex:1.15; min-width:0; }
  .clinic-hero-text h2{
    font-family:'Manrope', sans-serif; font-size:21px; font-weight:700; color:#f2f3f6;
    line-height:1.24; margin-bottom:10px; letter-spacing:-0.3px;
  }
  .clinic-hero-text h2 .hl{
    background:linear-gradient(96deg, #8ff0c4, #6ee7b7);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .rating-row{ display:flex; align-items:center; gap:7px; margin-bottom:16px; flex-wrap:wrap; }
  .rating-row .google-rev{ display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; color:#9db8ff; background:rgba(77,141,255,0.1); border:1px solid rgba(77,141,255,0.22); padding:4px 9px; border-radius:100px; }
  .rating-row .google-rev i{ font-size:11px; }
  .rating-row .stars{ color:var(--amber); font-size:11px; letter-spacing:1px; }
  .rating-row .score{ font-size:12px; font-weight:700; color:#f2f3f6; }
  .rating-row .revs{ font-size:10.5px; color:var(--text-3); }

  .clinic-mini-services{ display:flex; gap:16px; margin-top:14px; }
  .clinic-mini-services span{ display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:500; color:var(--text-2); }
  .clinic-mini-services i{ font-size:13px; color:#9db8ff; }

  .clinic-btn-row{ display:flex; align-items:center; gap:16px; }
  .clinic-primary-btn{
    font-size:11.5px; font-weight:600; color:#0d0f15;
    background:linear-gradient(135deg, #6ee7b7, #33d68f);
    padding:9px 16px; border-radius:9px; display:inline-flex; align-items:center; gap:6px;
    box-shadow:0 10px 22px -8px rgba(51,214,143,0.45);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
  .clinic-primary-btn:hover{ transform:translateY(-1px); box-shadow:0 14px 28px -8px rgba(51,214,143,0.55); }
  .clinic-secondary-link{ font-size:11.5px; color:var(--text-2); font-weight:500; }

  .clinic-photo{
    flex:0.85; position:relative; height:158px; border-radius:14px; overflow:hidden;
    background:
      radial-gradient(circle at 25% 15%, rgba(180,140,110,0.32), transparent 55%),
      radial-gradient(circle at 75% 75%, rgba(124,92,255,0.28), transparent 55%),
      radial-gradient(circle at 40% 90%, rgba(77,141,255,0.2), transparent 50%),
      linear-gradient(135deg, #221c1a, #14121a);
    border:1px solid var(--border-soft);
  }
  .clinic-photo .avatars{ position:absolute; left:14px; bottom:14px; display:flex; }
  .clinic-photo .avatars span{
    width:22px; height:22px; border-radius:50%; border:2px solid #10121a; margin-left:-8px;
    display:flex; align-items:center; justify-content:center; font-size:8.5px; font-weight:700; color:#0d0f15;
  }
  .clinic-photo .avatars span:nth-child(1){ background:#8fb6ff; margin-left:0; }
  .clinic-photo .avatars span:nth-child(2){ background:#b9a4ff; }
  .clinic-photo .avatars span:nth-child(3){ background:#6ee7b7; }

  /* ===================== WIDGET (WhatsApp style) ===================== */
  .widget{
    position:absolute; right:-26px; bottom:-34px; width:288px;
    background:#111b21; border:1px solid rgba(255,255,255,0.1); border-radius:16px;
    box-shadow:0 34px 70px -18px rgba(0,0,0,0.8), 0 0 0 1px rgba(0,0,0,0.35);
    display:flex; flex-direction:column; overflow:hidden; z-index:3;
    animation: floatUp 5.5s ease-in-out infinite;
  }
  @keyframes floatUp{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }

  .widget-head{
    display:flex; align-items:center; gap:9px; padding:11px 13px;
    background:#1f2c33;
    border-bottom:1px solid rgba(255,255,255,0.07);
  }
  .widget-avatar{
    width:26px; height:26px; border-radius:50%;
    background:var(--wa-green);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .widget-avatar i{ font-size:14px; color:#0d0f15; }
  .widget-title{ font-size:11.5px; font-weight:600; color:#f2f3f6; display:flex; align-items:center; gap:5px; }
  .widget-title i{ font-size:12px; color:var(--wa-green); }
  .widget-status{ font-size:9.5px; color:#8fa3ab; }
  .widget-menu{ margin-left:auto; color:#8fa3ab; font-size:15px; }

  .widget-body{
    padding:12px 12px 8px; display:flex; flex-direction:column; gap:7px;
    height:266px; overflow-y:auto; scroll-behavior:smooth;
    background:
      radial-gradient(circle at 15% 10%, rgba(255,255,255,0.025), transparent 40%),
      radial-gradient(circle at 85% 90%, rgba(255,255,255,0.02), transparent 40%),
      #0b141a;
  }
  .msg{
    max-width:84%; font-size:11px; line-height:1.45; padding:7px 9px; border-radius:10px;
    opacity:0; transform:translateY(6px); animation:msgIn 0.35s ease forwards;
    display:flex; flex-direction:column; gap:2px;
  }
  @keyframes msgIn{ to{ opacity:1; transform:translateY(0);} }
  .msg.user{ align-self:flex-end; background:var(--wa-out); color:#e9f5f1; border-bottom-right-radius:3px; }
  .msg.bot{ align-self:flex-start; background:#202c33; color:#e9edf0; border-bottom-left-radius:3px; }
  .msg .meta{ align-self:flex-end; display:flex; align-items:center; gap:3px; font-size:9px; color:rgba(255,255,255,0.55); }
  .msg .meta i{ font-size:11px; color:var(--wa-tick); }

  .typing{
    align-self:flex-start; background:#202c33; border-radius:10px; border-bottom-left-radius:3px;
    padding:9px 12px; display:flex; gap:4px; opacity:0; transform:translateY(6px); animation:msgIn 0.3s ease forwards;
  }
  .typing span{ width:5px; height:5px; border-radius:50%; background:#8fa3ab; animation:bounce 1.2s ease-in-out infinite; }
  .typing span:nth-child(2){ animation-delay:0.15s; }
  .typing span:nth-child(3){ animation-delay:0.3s; }
  @keyframes bounce{ 0%,60%,100%{ transform:translateY(0); opacity:0.4;} 30%{ transform:translateY(-3px); opacity:1;} }

  .opt-row{ display:flex; flex-wrap:wrap; gap:6px; margin-left:2px; opacity:0; transform:translateY(4px); animation:msgIn 0.3s ease forwards; }
  .opt-btn{
    font-size:10.5px; font-weight:600; color:#8fd9c4; background:rgba(37,211,102,0.1);
    border:1px solid rgba(37,211,102,0.28); padding:6px 11px; border-radius:8px; cursor:default;
    transition:background 0.2s ease, transform 0.15s ease;
  }
  .opt-btn.picked{ background:var(--wa-green); color:#06251a; transform:scale(0.97); }

  .slot-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-left:2px; opacity:0; transform:translateY(4px); animation:msgIn 0.3s ease forwards; }
  .slot-btn{
    font-size:10.5px; font-weight:600; text-align:center; color:#8fd9c4;
    background:rgba(37,211,102,0.1); border:1px solid rgba(37,211,102,0.28); padding:6px 4px; border-radius:8px;
    transition:background 0.2s ease, transform 0.15s ease;
  }
  .slot-btn.picked{ background:var(--wa-green); color:#06251a; transform:scale(0.97); }

  .checklist{ display:flex; flex-direction:column; gap:5px; margin-left:2px; }
  .checklist .item{
    display:flex; align-items:center; gap:6px; font-size:10.5px; color:#c8e9d8; font-weight:500;
    opacity:0; transform:translateX(-4px); animation:checkIn 0.35s ease forwards;
  }
  @keyframes checkIn{ to{ opacity:1; transform:translateX(0);} }
  .checklist .item i{ color:var(--wa-green); font-size:12px; }

  .widget-input{ display:flex; align-items:center; gap:8px; padding:9px 10px; border-top:1px solid rgba(255,255,255,0.06); background:#1f2c33; }
  .widget-input .field{ flex:1; font-size:10.5px; color:#8fa3ab; background:#2a3942; border-radius:16px; padding:7px 12px; }
  .widget-input .send{ width:25px; height:25px; border-radius:50%; background:var(--wa-green); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .widget-input .send i{ font-size:12px; color:#06251a; }

  /* ===================== INTEGRATIONS ===================== */
  .integrations{ margin-top:24px; animation:fadeUp 0.6s ease 0.1s both; }
  .integrations-label{ font-size:11.5px; color:var(--text-3); font-weight:500; margin-bottom:14px; }
  .integrations-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; }
  .integ-card{
    display:flex; flex-direction:column; align-items:flex-start; gap:8px; background:var(--glass); border:1px solid var(--border-soft);
    border-radius:12px; padding:11px 10px; transition:border-color 0.22s ease, transform 0.22s ease, background 0.22s ease;
  }
  .integ-card:hover{ border-color:var(--border); transform:translateY(-2px); background:var(--glass-strong); }
  .integ-icon{
    width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,0.16);
  }
  .integ-icon svg{ width:19px; height:19px; display:block; }
  .integ-card .txt b{ display:block; font-size:11px; font-weight:600; color:#eef0f4; line-height:1.3; margin-bottom:2px; }
  .integ-card .txt span{ font-size:9.5px; color:var(--text-3); }
  .live-row{ display:flex; align-items:center; gap:5px; }
  .live-dot{
    width:5px; height:5px; border-radius:50%; background:var(--green); flex-shrink:0;
    box-shadow:0 0 0 2px rgba(51,214,143,0.18); animation:pulse 2s ease-in-out infinite;
  }
  .live-text{ font-size:9.5px; color:#7fd9ae; font-weight:600; }

  /* ===================== METRICS ===================== */
  .metrics-row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:6px; animation:fadeUp 0.6s ease 0.15s both; }
  .metric-card{
    background:var(--glass); border:1px solid var(--border-soft); border-radius:14px; padding:14px 16px;
    transition:transform 0.22s ease, border-color 0.22s ease;
  }
  .metric-card:hover{ transform:translateY(-3px); border-color:var(--border); }
  .metric-icon{
    width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    margin-bottom:11px; position:relative; transition:transform 0.25s ease, box-shadow 0.25s ease;
  }
  .metric-icon svg{ position:relative; z-index:1; transition:transform 0.25s ease; }
  .metric-card:hover .metric-icon{ transform:scale(1.05); }
  .metric-card:hover .metric-icon svg{ transform:rotate(-6deg) scale(1.06); }
  .m-blue{
    background:radial-gradient(circle at 30% 25%, rgba(255,255,255,0.4), transparent 45%), linear-gradient(145deg, #6ea8ff, #4d6bef);
    box-shadow:0 6px 16px -6px rgba(77,141,255,0.55);
  }
  .metric-card:hover .m-blue{ box-shadow:0 10px 24px -6px rgba(77,141,255,0.75); }
  .m-green{
    background:radial-gradient(circle at 30% 25%, rgba(255,255,255,0.4), transparent 45%), linear-gradient(145deg, #6ee7b7, #1fa06a);
    box-shadow:0 6px 16px -6px rgba(51,214,143,0.55);
  }
  .metric-card:hover .m-green{ box-shadow:0 10px 24px -6px rgba(51,214,143,0.75); }
  .m-amber{
    background:radial-gradient(circle at 30% 25%, rgba(255,255,255,0.45), transparent 45%), linear-gradient(145deg, #ffd889, #e0a83e);
    box-shadow:0 6px 16px -6px rgba(224,168,62,0.55);
  }
  .metric-card:hover .m-amber{ box-shadow:0 10px 24px -6px rgba(224,168,62,0.75); }
  .m-purple{
    background:radial-gradient(circle at 30% 25%, rgba(255,255,255,0.4), transparent 45%), linear-gradient(145deg, #b9a4ff, #7c5cff);
    box-shadow:0 6px 16px -6px rgba(124,92,255,0.55);
  }
  .metric-card:hover .m-purple{ box-shadow:0 10px 24px -6px rgba(124,92,255,0.75); }
  .metric-card .val{
    font-family:'Manrope', sans-serif; font-size:20px; font-weight:800; letter-spacing:-0.4px;
    background:linear-gradient(96deg, #eef1f7, #b9c6de);
    -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:4px;
  }
  .metric-card .lbl{ font-size:11px; color:var(--text-3); font-weight:500; line-height:1.4; }
  .metric-trend{ font-size:10px; font-weight:600; margin-top:7px; display:flex; align-items:center; gap:4px; }
  .metric-trend.tr-blue{ color:#7ba7ff; }
  .metric-trend.tr-green{ color:#5fe0a8; }
  .metric-trend.tr-amber{ color:#f0c877; }
  .metric-trend.tr-purple{ color:#a292ff; }

  /* ===================== TESTIMONIAL ===================== */
  .testimonial-block{ animation:fadeUp 0.6s ease 0.2s both; }
  .testimonial-label{ font-size:11.5px; color:var(--text-3); font-weight:500; margin-bottom:12px; }
  .testimonial-row{ display:flex; align-items:center; gap:12px; }
  .testimonial-card{
    flex:1; min-width:0; background:var(--glass); border:1px solid var(--border-soft); border-radius:14px;
    padding:16px 18px; display:flex; align-items:center; gap:14px;
  }
  .testimonial-card .stars{ color:var(--amber); font-size:12px; letter-spacing:2px; flex-shrink:0; }
  #testimonial-content{ transition:opacity 0.3s ease; flex:1; min-width:0; }
  #testimonial-content .quote{ font-size:12.5px; color:#dfe3ea; font-weight:500; margin-bottom:3px; }
  #testimonial-content .meta{ font-size:11px; color:var(--text-3); }
  #testimonial-content .meta .author{ color:var(--text-2); font-weight:600; }
  .t-arrow{
    width:26px; height:26px; border-radius:50%; border:1px solid var(--border-soft); background:var(--glass);
    display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--text-2); font-size:13px; cursor:pointer;
    transition:border-color 0.2s ease, color 0.2s ease;
  }
  .t-arrow:hover{ border-color:var(--border); color:#fff; }
  .t-dots{ display:flex; gap:5px; justify-content:center; margin-top:12px; }
  .t-dots span{ width:5px; height:5px; border-radius:50%; background:var(--border); transition:background 0.25s ease, transform 0.25s ease; }
  .t-dots span.active{ background:#9db8ff; transform:scale(1.3); }

  /* ===================== RIGHT ===================== */
  .right{
    width:35%; min-width:400px; position:relative; z-index:1;
    display:flex; align-items:flex-start; justify-content:center; padding:64px 48px;
    background:linear-gradient(180deg, rgba(255,255,255,0.015), transparent 30%);
    overflow-y:auto;
  }
  .login-card{ width:100%; max-width:380px; animation:fadeUp 0.5s ease both; }
  .login-logo{ display:flex; align-items:center; gap:10px; margin-bottom:40px; }
  .login-logo .brand-mark{ width:36px; height:36px; }
  .login-logo .brand-name{ font-size:16px; }

  .login-card h2{ font-family:'Manrope', sans-serif; font-size:27px; font-weight:700; letter-spacing:-0.5px; color:#fff; margin-bottom:8px; }
  .login-card .sub{ font-size:14px; color:var(--text-2); margin-bottom:34px; line-height:1.55; }

  .field-group{ margin-bottom:17px; }
  .field-group label{ display:block; font-size:12px; font-weight:600; color:var(--text-2); margin-bottom:7px; }
  .input-wrap{ position:relative; display:flex; align-items:center; }
  .input-wrap i{ position:absolute; left:14px; font-size:15px; color:var(--text-3); }
  .input-wrap input{
    width:100%; background:var(--glass); border:1px solid var(--border); border-radius:11px;
    padding:13px 14px 13px 40px; font-size:13.5px; color:#fff; font-family:inherit;
    transition:border-color 0.2s ease, background 0.2s ease;
  }
  .input-wrap input::placeholder{ color:var(--text-3); }
  .input-wrap input:focus{ outline:none; border-color:rgba(77,141,255,0.55); background:rgba(77,141,255,0.06); }
  .input-wrap .toggle-eye{
    position:absolute; right:6px; left:auto; top:50%; transform:translateY(-50%);
    width:36px; height:36px; min-width:36px; min-height:36px;
    cursor:pointer; background:transparent; border:none; padding:0; display:flex;
    align-items:center; justify-content:center; color:var(--text-3); border-radius:8px;
  }
  .input-wrap .toggle-eye i{ position:static; left:auto; color:inherit; font-size:16px; pointer-events:none; }
  .input-wrap .toggle-eye:hover{ color:var(--text-2); background:rgba(255,255,255,0.04); }
  .input-wrap .toggle-eye:focus-visible{ outline:2px solid rgba(77,141,255,0.55); outline-offset:1px; }

  .row-between{ display:flex; align-items:center; justify-content:flex-end; margin:2px 0 22px; }
  .row-between a,
  .row-between .forgot-placeholder{ font-size:12px; color:var(--text-2); text-decoration:none; font-weight:500; transition:color 0.2s; }
  .row-between a:hover{ color:#fff; }

  .btn-primary{
    width:100%; padding:15px; border:none; border-radius:11px;
    background:linear-gradient(135deg, #4d8dff 0%, #7c5cff 100%);
    color:#fff; font-size:14.5px; font-weight:600; font-family:inherit; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:8px;
    box-shadow:0 16px 34px -10px rgba(77,141,255,0.55);
    transition:transform 0.2s ease, box-shadow 0.2s ease;
  }
  .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 20px 40px -10px rgba(77,141,255,0.68); }
  .btn-primary i{ font-size:16px; }

  .divider-dot{ display:flex; justify-content:center; margin:20px 0; }
  .divider-dot span{ width:4px; height:4px; border-radius:50%; background:var(--border); }

  .foot-links{ display:flex; flex-direction:column; gap:18px; align-items:stretch; width:100%; }
  .foot-links .primary-link{ font-size:13px; color:var(--text-2); text-align:center; }
  .foot-links .primary-link a{ color:#bcd4ff; text-decoration:none; font-weight:600; }

  /* ===================== SÍGUENOS (social) ===================== */
  .follow-block{ width:100%; }
  .follow-label{
    font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
    color:var(--text-3); margin-bottom:8px; text-align:left;
  }
  .follow-sub{
    font-size:12.5px; color:var(--text-2); line-height:1.55; margin-bottom:14px; text-align:left;
  }
  .follow-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%;
  }
  .follow-card{
    display:flex; align-items:center; gap:11px; text-decoration:none;
    padding:14px 14px; border-radius:14px;
    background:linear-gradient(160deg, rgba(255,255,255,0.055), rgba(255,255,255,0.02));
    border:1px solid var(--border-soft);
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    box-shadow:0 10px 28px -18px rgba(0,0,0,0.75);
    transition:transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease, background 250ms ease;
  }
  .follow-card:hover{
    transform:translateY(-2px);
    border-color:rgba(124,92,255,0.45);
    background:linear-gradient(160deg, rgba(77,141,255,0.12), rgba(124,92,255,0.08));
    box-shadow:0 16px 36px -14px rgba(77,141,255,0.55), 0 0 0 1px rgba(124,92,255,0.18);
  }
  .follow-card:focus-visible{
    outline:2px solid rgba(77,141,255,0.65); outline-offset:2px;
  }
  .follow-icon{
    width:36px; height:36px; border-radius:11px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 18px -10px rgba(0,0,0,0.65);
  }
  .follow-icon-ig{
    background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  }
  .follow-icon-tt{
    background:linear-gradient(145deg, #25f4ee 0%, #000 42%, #fe2c55 100%);
  }
  .follow-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
  .follow-txt b{ font-size:13px; font-weight:600; color:#f2f3f6; letter-spacing:-0.01em; }
  .follow-txt span{ font-size:11px; color:var(--text-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  @media (max-width: 520px){
    .follow-grid{ grid-template-columns:1fr; }
  }

  /* ===================== SUPPORT CARD ===================== */
  .support-card{
    margin-top:28px; width:100%; border-radius:16px; padding:18px 20px;
    background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
    border:1px solid var(--border-soft); backdrop-filter:blur(10px);
    animation:fadeUp 0.5s ease 0.1s both;
    transition:border-color 0.25s ease;
  }
  .support-top{ display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
  .support-icon{
    width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; position:relative; transition:transform 0.25s ease, box-shadow 0.25s ease;
    background:radial-gradient(circle at 30% 25%, rgba(255,255,255,0.4), transparent 45%), linear-gradient(145deg, #6ea8ff, #7c5cff);
    box-shadow:0 6px 16px -6px rgba(124,92,255,0.55);
  }
  .support-icon svg{ position:relative; z-index:1; transition:transform 0.25s ease; }
  .support-card:hover .support-icon{ transform:scale(1.05); box-shadow:0 10px 24px -6px rgba(124,92,255,0.75); }
  .support-card:hover .support-icon svg{ transform:rotate(-6deg) scale(1.06); }
  .support-top h3{ font-size:13.5px; font-weight:600; color:#f2f3f6; margin-bottom:5px; }
  .support-top p{ font-size:12px; color:var(--text-2); line-height:1.55; }

  .support-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding-top:14px; border-top:1px solid var(--border-soft); margin-bottom:10px;
  }
  .support-email{ display:flex; align-items:center; gap:7px; font-size:12px; color:var(--text-2); font-weight:500; }
  .support-email i{ font-size:14px; color:var(--text-3); }
  .support-badge{
    display:flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; color:var(--green);
    background:rgba(51,214,143,0.1); border:1px solid rgba(51,214,143,0.25); padding:5px 10px; border-radius:100px;
    flex-shrink:0;
  }
  .support-badge .d{ width:5px; height:5px; border-radius:50%; background:var(--green); animation:pulse 2s ease-in-out infinite; }
  .support-note{ font-size:11px; color:var(--text-3); line-height:1.5; font-style:italic; }

  @media (max-width: 1120px){
    body{ flex-direction:column; }
    .left, .right{ width:100%; min-width:0; }
    .left{ border-right:none; border-bottom:1px solid var(--border-soft); padding:100px 32px 60px; }
    .right{ padding:48px 32px; }
    .metrics-row{ grid-template-columns:repeat(2,1fr); }
    .integrations-grid{ grid-template-columns:repeat(2,1fr); }
    .clinic-hero{ flex-direction:column; align-items:stretch; }
    .clinic-photo{ height:120px; }
  }


/* Auth wiring (login.js) — loading + errores */
.login-form .form-msg {
  margin-top: 14px;
  font-size: 12.5px;
  color: #ff8f8f;
  line-height: 1.45;
}
.login-form .form-msg[hidden] { display: none !important; }
.btn-primary.is-loading {
  pointer-events: none;
  opacity: 0.85;
}
.login-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: loginSpin 0.7s linear infinite;
}
@keyframes loginSpin { to { transform: rotate(360deg); } }
.input-wrap input[type="password"],
.input-wrap input[type="text"]#password { padding-right: 42px; }
.btn-primary:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.btn-primary.is-loading .login-spinner { flex-shrink: 0; }