:root {
  --font-body: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-heading: "Cinzel", "Times New Roman", serif;
  --bg: #0b0f14;
  --panel: rgba(13, 16, 22, 0.70);
  --panel-2: rgba(20, 24, 32, 0.75);
  --text: #e5e7eb;
  --muted: rgba(229, 231, 235, 0.72);
  --stroke: rgba(255,255,255,0.10);
  --stroke-2: rgba(255,255,255,0.16);
  --shadow: 0 20px 60px rgba(0,0,0,0.55);
  --radius: 18px;
  --radius-sm: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
}

a { color: inherit; text-decoration: none; }
.container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 0;
}

.hero {
  position: relative;
  overflow: visible;
  background-image: url("../img/hero.jpg");
  background-size: cover;
  background-position: center;
  min-height: 100svh;
  height: auto;
  display: flex;
  align-items: center;
  padding: 140px 24px 80px;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 900px at 35% 25%, rgba(255,255,255,0.10), rgba(255,255,255,0) 60%),
              linear-gradient(90deg, rgba(0,0,0,0.10), rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.80));
}


.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 800px at 20% 20%, rgba(0,0,0,0.30), rgba(0,0,0,0.75)),
              linear-gradient(90deg, rgba(0,0,0,0.35), rgba(0,0,0,0.75));
  pointer-events:none;
}
.hero > * { position: relative; z-index: 1; }

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

.hero .brand{
  position:absolute;
  z-index:2;
  top:56px;
  left:52px;
}


/* Brand logo (user-provided PNG) */
.brand-logo{
height:110px;
width:auto;
max-width:420px;
object-fit:contain;
display:block;
opacity:.98;
filter:drop-shadow(0 14px 28px rgba(0,0,0,.40));
}


.auth .brand{
  position:static;
  margin:0 0 14px 0;
  justify-content:center;
  text-align:center;
  flex-direction:column;
  gap:8px;
}

.brand__mark{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  font-size: 20px;
}

.brand__name{
  font-family: var(--font-title);
  letter-spacing: 0.16em;
  font-weight: 800;
  font-size: 14px;
}

.brand__sub{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}


.logo {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

.wordmark{display:flex;flex-direction:column;line-height:1.05;justify-content:center;padding-top:1px;}
.wordmark strong {
  letter-spacing: 0.16em;
  font-weight: 800;
  font-size: 14px;
}
.wordmark span {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
}

.hero-copy {
  position: relative;
  z-index: 2;
  top: auto;
  left: auto;
  transform: none;
  width: min(92vw, 900px);
  max-width: 900px;
  margin-left: clamp(16px, 6vw, 90px);
  text-align: left;
  padding: 0;
}

.kicker {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(10px);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  max-width: 100%;
}

.hero-copy h1 {
  margin: 18px 0 12px;
  font-size: clamp(30px, 3.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero-copy p {
  margin: 0 0 18px;
  color: rgba(229,231,235,0.92);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.75;
  max-width: 78ch;
  text-wrap: pretty;
}
.hero-copy h1 + p {
  margin-bottom: 22px;
}
.hero-cta {
  margin-top: 24px;
}

.sidebar {
  position: relative;
  background: linear-gradient(180deg, rgba(8,10,13,0.95), rgba(8,10,13,0.86));
  border-left: 1px solid rgba(255,255,255,0.07);
  padding: 28px 22px 18px;
}

.panel {
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: var(--panel);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-header {
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.panel-header h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: 0.04em;
}
.panel-header p {
  margin: 8px 0 0;
  font-size: 12px;
  color: rgba(229,231,235,0.72);
  line-height: 1.45;
}

.accordion {
  padding: 10px;
}

.acc-item {
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  margin: 10px 0;
  overflow: hidden;
}

.acc-btn {
  width: 100%;
  padding: 14px 14px;
  background: transparent;
  border: 0;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
}
.acc-btn .left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pill {
  width: 28px; height: 28px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
.chev {
  opacity: 0.75;
  transition: transform .2s ease;
}
.acc-item[data-open="true"] .chev {
  transform: rotate(180deg);
}

.acc-panel {
  display: none;
  padding: 0 14px 14px;
}
.acc-item[data-open="true"] .acc-panel {
  display: block;
}

.field {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
label {
  font-size: 12px;
  color: rgba(229,231,235,0.72);
}
input, textarea {
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.25);
  color: var(--text);
  outline: none;
}
input:focus, textarea:focus {
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}
button.primary {
  margin-top: 10px;
  width: 100%;
  padding:12px 20px;
    font-size:15px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.02em;
}
button.primary:hover {
  background: rgba(255,255,255,0.10);
}

/* Hacer que enlaces con clase .primary luzcan como botón (p.ej. "Ya tengo credenciales") */
a.primary {
  margin-top: 10px;
  width: 100%;
    padding:12px 20px;
    font-size:15px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
a.primary:hover {
  background: rgba(255,255,255,0.10);
}

/* Si están en una fila de botones, se ven "al lado" y del mismo tamaño */
.btn-row {
  display: flex;
}
.btn-row .primary {
  width: auto;
  margin-top: 0;
  flex: 1 1 220px;
}

.note {
  padding: 12px 18px 18px;
  color: rgba(229,231,235,0.70);
  font-size: 12px;
  line-height: 1.45;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  max-width: 420px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(8,10,13,0.85);
  backdrop-filter: blur(14px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
  display: none;
}
.toast.show { display: block; }
.toast strong { display:block; font-size: 13px; }
.toast span { display:block; margin-top: 4px; font-size: 12px; color: rgba(229,231,235,0.72); }

.viewer {
  min-height: 100vh;
  background: radial-gradient(1200px 900px at 30% 10%, rgba(255,255,255,0.08), rgba(255,255,255,0) 60%),
              linear-gradient(180deg, #0a0d12, #050607 75%);
  padding: 26px;
}

.viewer-top {
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.viewer-top .meta h1 {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.viewer-top .meta p {
 margin: 6px 0 0;
  font-size: 14px;
  color: rgba(229,231,235,0.78);
}

.actions {
  display:flex;
  gap: 10px;
}
.actions a, .actions button {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor:pointer;
  font-size: 12px;
}
.actions a:hover, .actions button:hover {
  background: rgba(255,255,255,0.09);
}

.grid {
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 16px;
  align-items: start;
}

.card {
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.card h3 {
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.86);
}

.card .body {
  padding: 14px 16px 16px;
}

.iframe-wrap {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  overflow:hidden;
  background: rgba(0,0,0,0.25);
}
.iframe-wrap.ratio16x9 {
  aspect-ratio: 16 / 9;
}
.iframe-wrap.tall {
  height: 70vh;
}
.iframe-wrap iframe, .iframe-wrap #player {
  width: 100%;
  height: 100%;
  display:block;
}

.full-btn {
  position:absolute;
  top:10px;
  right:10px;
  z-index: 3;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.88);
  cursor:pointer;
  backdrop-filter: blur(10px);
  font-size: 12px;
}
.full-btn:hover {
  background: rgba(0,0,0,0.45);
}

#postVideoForm {
  display:none;
}
#postVideoForm.show {
  display:block;
}

.small {
  font-size: 12px;
  color: rgba(229,231,235,0.70);
}

@media (max-width: 1024px) {
  .container { grid-template-columns: 1fr; }
  .sidebar { border-left: 0; border-top: 1px solid rgba(255,255,255,0.07); }
  .hero {
    min-height: auto;
    padding: 130px 20px 70px;
    align-items: flex-start;
  }
  .hero-copy {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    text-align: left;
  }
  .hero-copy p {
    max-width: 100%;
  }
  .grid { grid-template-columns: 1fr; }
  .iframe-wrap.tall { height: 55vh; }
}



/* Typography */
h1, h2, h3, .brand .title, .panel h2 {
  font-family: var(--font-heading);
  letter-spacing: 0.5px;
}
.brand .title {
  font-weight: 700;
  text-transform: uppercase;
}
.panel h2 {
  font-weight: 700;
}

/* Responsive layout */
@media (max-width: 980px) {
  .container {
    grid-template-columns: 1fr;
  }
  .panel {
    position: relative;
    width: auto;
    max-width: none;
    border-left: none;
    border-top: 1px solid var(--stroke);
    backdrop-filter: blur(14px);
  }
  .hero {
    min-height: auto;
    padding: 130px 20px 70px;
    align-items: flex-start;
  }
  .hero-copy {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    text-align: left;
  }
  .hero-copy p {
    max-width: 100%;
  }
}
@media (max-width: 600px) {
  .panel {
    padding: 18px 16px;
  }
  .brand {
    padding: 22px 18px;
  }
  .acc-btn {
    padding: 14px 14px;
  }
  .acc-body {
    padding: 12px 14px 16px;
  }
  .viewer-top {
    padding: 16px;
  }
}


/* Consultation card enhancements */
.card.consult {
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  position: relative;
  overflow: hidden;
}
.card.consult::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(900px 420px at 20% 10%, rgba(255,255,255,0.08), transparent 55%),
              radial-gradient(700px 360px at 80% 20%, rgba(255,255,255,0.06), transparent 55%);
  pointer-events:none;
}
.card.consult > * { position: relative; z-index: 1; }

.consult-head{
  padding: 20px 20px 0;
}
.consult-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  font-size: 12px;
  color: rgba(229,231,235,0.90);
  margin-bottom: 10px;
}
.consult-sub{
  margin: 10px 0 14px;
  color: rgba(229,231,235,0.78);
  font-size: 14px;
  line-height: 1.45;
}
.consult-steps{
  display:flex;
  gap:10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.step{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(229,231,235,0.86);
  font-size: 13px;
}
.step .dot{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  font-weight: 700;
}
.actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.actions .primary{
  min-width: 220px;
}
@media (max-width: 600px){
  .consult-head{ padding: 16px 16px 0; }
  .actions .primary{ width: 100%; }
}



/* --- Drawer (hamburger) --- */
.burger-btn{
  display:none;
  margin-left:auto;
  width:44px;height:44px;
  border-radius:14px;
  border:1px solid var(--stroke);
  background:rgba(10,12,18,0.45);
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  cursor:pointer;
  position:relative;
}
.burger-btn span{
  position:absolute; left:12px; right:12px;
  height:2px; border-radius:2px;
  background:rgba(255,255,255,0.85);
}
.burger-btn span:nth-child(1){ top:14px;}
.burger-btn span:nth-child(2){ top:21px; opacity:0.85;}
.burger-btn span:nth-child(3){ top:28px; opacity:0.7;}

.drawer-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  z-index:40;
}
.sidebar.drawer{
  transition: transform .25s ease;
  /* allow scroll inside the drawer on small screens */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.drawer-open .drawer-overlay{ display:block; }
@media (max-width: 980px){
  .burger-btn{ display:inline-flex; align-items:center; justify-content:center; }
  .sidebar.drawer{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(92vw, 420px);
    z-index:50;
    transform: translateX(110%);
    border-left:1px solid var(--stroke);
    border-top-left-radius: 22px;
    border-bottom-left-radius: 22px;
    margin:0;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .drawer-open .sidebar.drawer{ transform: translateX(0); }
}

/* Use hero image as blurred background for full-page auth screens */
body.bg-hero{
  min-height: 100vh;
  background: url('../img/hero.jpg') center/cover no-repeat fixed;
}
body.bg-hero::before{
  content:"";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.82));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 0;
}
body.bg-hero > *{ position: relative; z-index: 1; }

/* Brand logo image fit */
.logo img{
  width: 64px;
  height: auto;
  object-fit: contain;

}

/* --- Floating Help / Chatbot --- */
.chat-fab{
  position:fixed;
  right:18px;
  bottom:calc(96px + env(safe-area-inset-bottom, 0px));
  z-index:60;
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--stroke-2);
  background:rgba(12,14,20,0.62);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.chat-fab .fab-ico{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
}
.chat-fab svg{ width:24px; height:24px; }
.chat-fab .fab-text{
  font-weight:800;
  letter-spacing: .2px;
  font-size: 13px;
  color: rgba(229,231,235,0.92);
  white-space:nowrap;
}
@media (max-width: 520px){
  .chat-fab .fab-text{ display:none; }
}

/* CTA button inside hero/viewer */
.chat-cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(229,231,235,0.95);
  font-weight:800;
  cursor:pointer;
}
.chat-ico{
  width:18px; height:18px;
  display:inline-block;
  border-radius:7px;
  border:1px solid rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06));
  position:relative;
}
.chat-ico:after{
  content:"";
  position:absolute; left:4px; top:4px;
  width:8px; height:8px;
  border-radius:50%;
  background: rgba(255,255,255,0.55);
  opacity:.55;
}

/* --- Modal --- */
.modal{ display:none; position:fixed; inset:0; z-index:80; }
.modal.show{ display:block; }
.modal-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.65); backdrop-filter: blur(8px); }
.modal-card{
  position:relative;
  width:min(920px, calc(100vw - 28px));
  margin: 12px auto;
  top: 2vh;
  border-radius: 22px;
  border:1px solid var(--stroke-2);
  background: rgba(12,14,20,0.78);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal-head{
  display:flex;
  gap:16px;
  align-items:flex-start;
  justify-content:space-between;
  padding:18px 18px 12px;
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.icon-btn{
  width:42px; height:42px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(229,231,235,0.92);
  cursor:pointer;
  font-size:16px;
}
.modal-body{ padding: 14px 18px 18px; }

/* --- Cursor glow (spotlight) --- */
.glow, .panel, .card, .acc-item, .field, .chat-fab, .chat-cta, .burger-btn, .modal-card, .icon-btn{
  position:relative;
  overflow:hidden;
}
.glow:before, .panel:before, .card:before, .acc-item:before, .field:before, .chat-fab:before, .chat-cta:before, .burger-btn:before, .modal-card:before, .icon-btn:before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,0.18), transparent 55%);
  opacity:0;
  transition: opacity .18s ease;
  pointer-events:none;
}
.glow:hover:before, .panel:hover:before, .card:hover:before, .acc-item:hover:before, .field:hover:before, .chat-fab:hover:before, .chat-cta:hover:before, .burger-btn:hover:before, .modal-card:hover:before, .icon-btn:hover:before,
.glow:focus-within:before, .panel:focus-within:before, .card:focus-within:before, .acc-item:focus-within:before, .field:focus-within:before, .chat-fab:focus-within:before, .chat-cta:focus-within:before, .burger-btn:focus-within:before, .modal-card:focus-within:before, .icon-btn:focus-within:before{
  opacity:1;
}

/* hover/focus illumination on controls */
input:focus, textarea:focus, select:focus{
  outline:none;
  border-color: rgba(255,255,255,0.28) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,0.06), 0 20px 60px rgba(0,0,0,0.45);
}
button:hover, a:hover{
  filter: brightness(1.05);
}

.drawer-close{
  display:none;
  float:right;
}
@media (max-width: 980px){
  .drawer-close{ display:inline-flex; margin-left:auto; }
  .panel-header{ position:relative; padding-right:64px; }
  .drawer-close{ position:absolute; top:16px; right:16px; }
}

/* =====================
   AUTH / LOGIN
   ===================== */

.auth{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}

.auth__panel{ width:min(560px,100%); padding:22px 20px 18px 20px; }
.auth__title{ margin:18px 0 6px 0; font-family: var(--font-title); letter-spacing:0.04em; }
.auth__hint{ margin:0 0 14px 0; color: rgba(229,231,235,0.78); }/* Consulta.php: tipografía más formal y centrada */
.auth__title--center,
.auth__hint--center{
  text-align:center;
}
.brand--center{
  justify-content:center;
  text-align:center;
}



.tabs{ display:flex; gap:10px; margin:12px 0 14px 0; }
.tabs__btn{
  flex:1;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.82);
  cursor:pointer;
}
.tabs__btn.is-active{
  border-color: rgba(255,255,255,0.26);
  background: rgba(255,255,255,0.08);
}

.tab{ display:none; }
.tab.is-active{ display:block; }

.notice{
  margin: 12px 0 0 0;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
}
.notice__title{ font-weight:700; margin-bottom:6px; }
.notice__desc{ color: rgba(229,231,235,0.78); font-size: 13px; }
.notice__box{ margin-top:10px; padding:10px; border-radius: 12px; background: rgba(0,0,0,0.28); border: 1px solid rgba(255,255,255,0.10); }


/* =====================
   DIALOG (SUCCESS)
   ===================== */
.dialog-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 18px;
}
.dialog-overlay.is-open{ display:flex; }

.dialog{
  width: min(520px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(17,24,39,0.72);
  box-shadow: 0 26px 80px rgba(0,0,0,0.55);
  padding: 18px 18px 16px;
}
.dialog__title{
  font-family: var(--font-title);
  letter-spacing: 0.04em;
  font-size: 18px;
  margin: 0 0 6px 0;
}
.dialog__desc{
  color: rgba(229,231,235,0.82);
  margin: 0 0 14px 0;
  line-height: 1.5;
}
.dialog__actions{ display:flex; gap:10px; justify-content:flex-end; }


/* =====================
   BUTTONS (shared)
   ===================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  text-decoration:none;
  cursor:pointer;
  font-weight:700;
  letter-spacing:0.02em;
  user-select:none;
  white-space:nowrap;
}
.btn:hover{ background: rgba(255,255,255,0.08); }
.btn:active{ transform: translateY(1px); }

.btn--primary{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
}
.btn--primary:hover{ background: rgba(255,255,255,0.14); }

.btn--ghost{
  background: transparent;
  border-color: rgba(255,255,255,0.10);
  color: rgba(229,231,235,0.86);
}
.btn--ghost:hover{ background: rgba(255,255,255,0.06); }

.form{ display:grid; gap:12px; }
.form .btn{ width:100%; }
.form .btn + .btn{ margin-top:10px; }
@media (min-width: 520px){
  .form .btn{ width:auto; }
  .form .btn.btn--primary{ flex:1; }
  .form .btn.btn--ghost{ flex:1; }
  .form .btn-row{ display:flex; gap:10px; }
}

/* AUTH: prevent cramped layout */
.auth__title{ font-size: 34px; line-height: 1.05; }
.auth__hint{ line-height: 1.5; }

/* HERO CENTER OVERRIDE */
.hero-copy{
  left: 50% !important;
  transform: translateX(-50%);
  text-align: center;
  width: min(980px, calc(100% - 120px));
  max-width: none;
}
.hero-copy .kicker{ justify-content:center; }
.hero-copy p{ margin-left:auto; margin-right:auto; }
.hero-cta{ margin-top: 14px; display:flex; justify-content:center; }


/* Top-right logo (user-provided image) */
.corner-logo{
  position:absolute;
  top:18px;
  right:18px;
  height:44px;
  width:auto;
  opacity:.96;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
}
@media (max-width: 520px){
  .corner-logo{height:36px; top:14px; right:14px;}
}


.klink{color:rgba(229,231,235,.88); text-decoration:none; font-weight:600;}
.klink:hover{text-decoration:underline; color:rgba(255,255,255,.98);}

/* Access request form */
.access-form .form-title{font-weight:800; letter-spacing:.3px; margin-bottom:6px;}
.access-form .form-sub{font-weight:700; color:rgba(229,231,235,.92); margin-bottom:6px;}
.access-form .form-intro p{margin:6px 0; color:rgba(229,231,235,.78); font-size:13px; line-height:1.45;}
.access-form .warn{color:rgba(255,255,255,.90); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); padding:10px 12px; border-radius:12px;}
.checkline{display:flex; gap:10px; align-items:flex-start; margin:12px 0 10px;}
.checkline input{margin-top:4px; transform:scale(1.05);}
.checkline label{font-size:12.5px; color:rgba(229,231,235,.80); line-height:1.35;}
.checkline a{color:rgba(229,231,235,.92); font-weight:700; text-decoration:underline;}
.checkline a:hover{color:#fff;}

/* Legal pages */
.legal-page{
  margin-top:14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:16px;
  padding:18px 18px;
  max-width: 920px;
}
.legal-page p{margin:10px 0; color:rgba(229,231,235,.82); font-size:14px; line-height:1.55;}


/* Logo sizing fix */
.brand-logo img, img.logo-img {
  height: 50px;
  width: auto;
  max-width: 240px;
  object-fit: contain;
  display: block;
}

/* Links in middle pill */
.legal-link{ color: inherit; text-decoration: none; }
.legal-link:hover{ text-decoration: underline; }

/* Checkbox clickability fix (InfinityFree safe) */
input[type="checkbox"]{ pointer-events:auto; }
label{ pointer-events:auto; }
.legal-error{ color:#f2d3d3; }


/* ============ LEGASIST PREMIUM UI ============ */

/* Global smoothness */
html{ scroll-behavior:smooth; }
body{ transition: opacity .18s ease; }

/* Page fade helper */
body.page-fadeout{ opacity:0; }

/* Loader overlay */
#leg-loader{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.65);
  backdrop-filter: blur(16px);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
#leg-loader.show{ opacity:1; pointer-events:auto; }
#leg-loader .box{
  width:min(520px, 92vw);
  padding:22px 22px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(12,15,20,0.80);
  box-shadow:0 30px 90px rgba(0,0,0,0.75);
  display:flex;
  gap:14px;
  align-items:center;
}
#leg-loader .spin{
  width:18px;height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.25);
  border-top-color: rgba(255,255,255,0.85);
  animation: legspin .8s linear infinite;
}
@keyframes legspin{ to{ transform:rotate(360deg);} }
#leg-loader .txt strong{ display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }
#leg-loader .txt span{ display:block; font-size:12px; opacity:.75; margin-top:2px; }

/* Legal pages full-width */
.legal-full{
  min-height:100vh;
  padding:70px 22px 50px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.78)),
    url('../img/hero.jpg');
  background-size:cover;
  background-position:center;
}
.legal-card{
  width:min(980px, 92vw);
  max-height:78vh;
  overflow:hidden;
  padding:34px 38px;
  border-radius:22px;
  background:rgba(12,15,20,0.82);
  backdrop-filter: blur(18px);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 30px 90px rgba(0,0,0,0.78);
  display:flex;
  flex-direction:column;
}
.legal-card h1{ text-align:center; margin:0 0 18px; }
.legal-card p, .legal-card li{
  line-height:1.7;
  color:rgba(229,231,235,0.86);
}
.legal-card::-webkit-scrollbar{ width:10px; }
.legal-card::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.18); border-radius:10px; }
.legal-card::-webkit-scrollbar-track{ background:transparent; }

/* Ensure legal links remain clickable */
.legal-link{ cursor:pointer; }



/* ===== Checkbox clickability (global) ===== */
.checkbox-row, .legal-row, .field--checkbox { position: relative; z-index: 3; }
input[type="checkbox"]{ pointer-events:auto !important; z-index: 4; position: relative; }
label{ pointer-events:auto !important; cursor:pointer; }
.legal-error{ margin-top:10px; font-size:12px; opacity:.95; color:rgba(255,200,200,.95); }

/* ===== Viewer Pro Layout ===== */
.viewer-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
  background: rgba(3,4,6,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.viewer-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding: 14px 22px;
}
.viewer-nav .left{
  display:flex;
  align-items:center;
  gap:14px;
  flex: 0 0 auto;
}
.viewer-nav .center{
  flex:1;
  text-align:center;
  font-family: var(--font-heading);
  letter-spacing: .04em;
  font-weight: 700;
  font-size: 14px;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.viewer-nav .right{ flex: 0 0 auto; min-width: 48px; display:flex; justify-content:flex-end; }

.back-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-weight: 800;
}
.back-btn:hover{ background: rgba(255,255,255,0.09); }
.back-btn .arr{
  width: 26px;
  height: 26px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.22);
}

.viewer-logo{
  height: 32px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

.viewer .grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* Viewer layout: stacked, centered, wide (requested) */
.viewer .grid.viewer-stack{
  width: min(80vw, 1280px);
  margin: 26px auto 60px;
  grid-template-columns: 1fr;
  gap: 22px;
}

.viewer .card{ border-radius: 18px; }
.viewer .card .body{ padding: 16px; }

/* Make Canva and Video same height */
.iframe-wrap.equal{
  height: 74vh;
  min-height: 560px;
}

/* WhatsApp floating button (viewer) */
.wa-fab{
  color: #FFFFFF;

  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(135deg, #0B2FA6 0%, #124BEB 45%, #2F7BFF 100%);
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.wa-fab:hover{ background: rgba(12,14,20,0.76); }
.wa-fab .ico{
  height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
}
.wa-fab .txt{
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 13px;
  color: rgba(229,231,235,0.95);
  white-space: nowrap;
}

@media (max-width: 780px){
  .viewer-nav{ padding: 12px 14px; gap:12px; }
  .viewer-nav .center{ font-size: 12px; }
  .viewer-logo{ height: 28px; }
  .viewer .grid.viewer-stack{ width: min(92vw, 980px); }
  .iframe-wrap.equal{ height: 66vh; min-height: 460px; }
}
@media (max-width: 520px){
  .wa-fab .txt{ display:none; }
}

/* Sidebar form */
.viewer-side{
  position: sticky;
  top: 78px;
}
.viewer-side .card{
  max-height: calc(100vh - 110px);
  overflow: auto;
}
.viewer-side h3{ text-align:left; }

.viewer-form .field{ margin: 12px 0; }
.viewer-form input, .viewer-form textarea{
  width:100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,12,16,0.75);
  color: rgba(255,255,255,0.92);
}
.viewer-form textarea{ min-height: 120px; resize: vertical; }
.viewer-form .btn{ width:100%; }

@media (max-width: 1100px){
  .viewer .grid{ grid-template-columns: 1fr; }
  .viewer-side{ position: static; }
  .iframe-wrap.equal{ height: 54vh; min-height: 360px; }
  .viewer-nav .left, .viewer-nav .right{ min-width: auto; }
}



/* Checkbox clickable hardening */
.checkline{ position:relative; z-index:50; }
.checkline::before, .checkline::after{ pointer-events:none !important; }
.checkline input[type="checkbox"]{ pointer-events:auto !important; opacity:1 !important; }
.checkline label{ pointer-events:auto !important; }
/* =========================
   LEGASIST PREMIUM UI
========================= */
:root{
  --bg0:#06080c;
  --bg1:#030405;
  --glass: rgba(15,18,24,.78);
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.06);
  --txt: rgba(255,255,255,.92);
  --muted: rgba(229,231,235,.72);
  --shadow: 0 28px 80px rgba(0,0,0,.65);
  --radius: 18px;
}

/* Fondo premium global */
body{
  background:
    radial-gradient(1200px 900px at 15% 0%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
  color: var(--txt);
}

/* Cards premium */
.card{
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(18px);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
}

.card h3{
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
  padding: 14px 18px 0;
  opacity: .9;
}

.card .body{
  padding: 16px 18px 18px;
}

/* Viewer layout stacked premium */
.viewer .grid{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.iframe-wrap.equalLarge{
  height: min(72vh, 720px);
  min-height: 520px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background:#000;
}

.iframe-wrap.equalLarge iframe{
  width: 100%;
  height: 100%;
  border: 0;
  filter: contrast(1.05) brightness(1.03);
}

/* Header sticky premium */
.viewer-header{
  position: sticky;
  top: 0;
  z-index: 50;
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  backdrop-filter: blur(16px);
  background: rgba(3,4,6,0.55);
  border-bottom: 1px solid var(--stroke2);
}

/* Form premium */
.viewer-form label{
  display:block;
  margin-bottom:6px;
  font-size: 12px;
  opacity: .85;
}

.viewer-form input,
.viewer-form textarea{
  width:100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,12,16,0.75);
  color: var(--txt);
  outline: none;
}

.viewer-form input:focus,
.viewer-form textarea:focus{
  border-color: rgba(255,255,255,0.22);
}

.viewer-form textarea{
  min-height: 120px;
  resize: vertical;
}

@media (max-width: 900px){
  .iframe-wrap.equalLarge{ min-height: 360px; height: 54vh; }
}


/* ===== LEGASIST_GLOBAL_HERO_BG =====
   Use the same hero image site-wide (login/terminos/aviso/como-funciona/viewer)
*/
body{
  background: #000; /* fallback */
}
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.20), rgba(0,0,0,0.62) 55%, rgba(0,0,0,0.86)),
    url("/assets/img/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(0.95) contrast(1.05);
  transform: translateZ(0);
}
/* prevent inner sections from painting solid backgrounds */
.hero{ background-color: transparent; }


/* ===== LEGASIST_LOGO_CLEAN ===== */
.logo, .brand__mark{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.logo img, .brand__mark img{
  background: transparent !important;
  display:block;
  object-fit:contain;
}


/* ===== LEGASIST_VIEWER_80 ===== */
.viewer .grid{
  max-width: 1600px;
  width: min(98vw, 1600px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.iframe-wrap.equalLarge{
  height: 80vh;
  min-height: 560px;
  border-radius: 16px;
  overflow: hidden;
}
@media (max-width: 980px){
  .viewer .grid{ grid-template-columns: 1fr; }
  .iframe-wrap.equalLarge{ height: 58vh; min-height: 360px; }
}


/* ===== LEGASIST_KICKER_SPACING ===== */
.kicker{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  justify-content:center;
  align-items:center;
}
.kicker span{ display:none; } /* remove dot separators */
.kicker .klink{
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
}
.kicker .klink:hover{
  background: rgba(255,255,255,0.09);
}


/* ===== LEGAL_TEXT_JUSTIFY ===== */
.legal-justify p,
.legal-justify li{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.legal-justify h1,
.legal-justify h2,
.legal-justify h3{
  text-align: center;
}


/* ===== VIEWER_HEADER_NAV ===== */
.viewer-header--nav{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 12px;
  padding: 14px 18px;
}
.vh-left{ display:flex; align-items:center; gap:12px; justify-content:flex-start; }
.vh-center{ display:flex; justify-content:center; }
.vh-right{ display:flex; justify-content:flex-end; }
.vh-logo{ height: 28px; width:auto; display:block; }
.btn--back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  text-decoration:none;
  font-weight: 700;
}
.btn--back:hover{ background: rgba(255,255,255,0.09); }
.vh-title{
  font-family: 'Cinzel', serif;
  font-size: 16px;
  letter-spacing: .02em;
  text-align:center;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  max-width: min(70vw, 700px);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px){
  .viewer-header--nav{ padding: 12px 12px; gap: 8px; }
  .vh-logo{ height: 24px; }
  .vh-title{ font-size: 13px; padding: 7px 10px; max-width: 56vw; }
  .btn--back{ font-size: 12px; padding: 10px 12px; }
}


/* ===== MOBILE_HERO_SCROLL_FIX ===== */
@media (max-width: 640px){
  /* En móviles pasamos de posicionamiento absoluto a flujo normal
     para evitar empalmes y mantener todo centrado. */
  .container{ display:block; min-height:auto; }

  .hero{
    overflow: hidden;
    min-height: auto;
    padding: 22px 16px calc(110px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero .brand{
    position: relative;
    top: auto;
    left: auto;
    margin: 0 0 14px 0;
    width: 100%;
    justify-content: space-between;
  }

  .brand-logo{ height: 70px; max-width: 290px; }

  .hero-copy{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    padding: 18px 16px !important;
    text-align: center;
  }

  .kicker{
    flex-wrap: wrap;
    justify-content: center;
    text-align:center;
    row-gap: 8px;
  }
  /* Oculta separadores "•" para que no rompan líneas */
  .kicker > span{ display:none; }

  .hero-copy h1{ font-size: clamp(24px, 7vw, 34px); }
  .hero-copy p{ font-size: 15px; }
}




/* ===== WA_BUBBLE_UI ===== */
.wa-bubble{
  position: fixed;
  left: 18px;
  right: auto;
  bottom: 18px;
  z-index: 999;
  border: 1px solid rgba(255,255,255,0.22);
  background: linear-gradient(135deg, #0B2FA6 0%, #124BEB 45%, #2F7BFF 100%);
  backdrop-filter: blur(16px);
  border-radius: 999px;
  padding: 12px 16px;
  cursor: pointer;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.wa-bubble__txt{
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 12px;
  text-transform: uppercase;
  color: #FFFFFF;
}
.wa-modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}
.wa-modal.is-open{ display:block; }
.wa-modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
}
.wa-modal__card{
  position: absolute;
  right: 18px;
  bottom: 78px;
  width: min(520px, 92vw);
  border-radius: 18px;
  background: rgba(15,18,24,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 90px rgba(0,0,0,0.75);
  overflow: hidden;
}
.wa-modal__head{
  display:flex;
  justify-content: space-between;
  align-items:flex-start;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.wa-modal__badge{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .9;
}
.wa-modal__title{
  margin-top: 8px;
  font-weight: 800;
}
.wa-modal__x{
  border: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  width: 34px;
  height: 34px;
  border-radius: 12px;
  color: rgba(255,255,255,0.9);
  cursor:pointer;
}
.wa-modal__form{ padding: 14px 16px 16px; }
.wa-modal__form textarea{ width:100%; }



/* ===== WA_BUBBLE_TEXT ===== */
.wa-bubble{
  right: 18px;
  bottom: 18px;
  padding: 12px 16px;
  max-width: min(320px, 88vw);
}
.wa-bubble__txt{
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 12px;
  text-transform: none;
}


/* ===== PHONE_SCROLL_PAGES ===== */
@media (max-width: 640px){
  html, body{ height:auto !important; overflow:auto !important; }
  .hero{ min-height:auto !important; }
}


/* ===== LOGIN_LOGO_CENTER ===== */
.brand__mark--center{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}
.login-logo{
  height: 58px;
  width: auto;
  display:block;
  object-fit:contain;
}

/* ===== LEGASIST_WARNING_INDEX_V10 ===== */
.legal-sep{ border:0; height:1px; background:rgba(255,255,255,0.14); margin:16px 0; }
.legal-bullets{ margin: 14px 0 0; padding-left: 18px; }
.legal-bullets li{ margin: 10px 0; color: rgba(229,231,235,0.92); line-height: 1.5; }
.legal-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.legal-logo{ height:28px; width:auto; object-fit:contain; }
.legal-title{ margin: 6px 0 14px; }
.legal-scroll{ max-height: 60vh; overflow:auto; padding-right: 10px; }
.legal-actions{ margin-top: 14px; display:flex; justify-content:flex-start; }

/* ===== WHATSAPP_BUBBLE ===== */
.wa-bubble{
  position: fixed;
  left: 18px;
  right: auto;
  bottom: 18px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(15,18,22,0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,0.92);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  cursor: pointer;
}
.wa-bubble:hover{ transform: translateY(-1px); }
.wa-bubble:active{ transform: translateY(0px); }
.wa-bubble__dot{
  width: 36px; height: 36px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.25), rgba(255,255,255,0.05));
  border: 1px solid rgba(255,255,255,0.16);
  position: relative;
}
.wa-bubble__dot:after{
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
}
.wa-bubble__text{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 13px;
}
.toast-mini{
  position: fixed;
  right: 18px;
  bottom: 78px;
  z-index: 9999;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(15,18,22,0.92);
  color: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.55);
  font: 600 12px/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}



/* ===== CONSULTA_BUBBLE (WhatsApp) – AZUL CORPORATIVO PREMIUM ===== */
.wa-float{
  position: fixed;
  left: 18px;
  right: auto;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 13px 18px;
  border-radius: 999px;

  /* Azul rey formal (degradado) */
  background: linear-gradient(135deg, #0B2FA6 0%, #124BEB 45%, #2F7BFF 100%);
  color: #FFFFFF;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);

  border: 1px solid rgba(255,255,255,0.22);

  box-shadow:
    0 22px 70px rgba(11,47,166,0.40),
    0 8px 22px rgba(18,75,235,0.28);

  cursor: pointer;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-weight: 800;
  letter-spacing: .25px;
  font-size: 15px;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;

  max-width: calc(100% - 36px);
  white-space: nowrap;
}

/* Punto indicador */
.wa-float::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.15);
  flex: 0 0 auto;
}

/* Hover más brillante */
.wa-float:hover{
  transform: translateY(-3px);
  filter: brightness(1.08);
  box-shadow:
    0 28px 80px rgba(10, 61, 145, 0.55),
    0 10px 26px rgba(15, 91, 231, 0.45);
}

/* Click */
.wa-float:active{
  transform: translateY(0);
  filter: brightness(0.98);
}

/* Pulso elegante corporativo */
@keyframes waPulse {
  0%   { box-shadow: 0 20px 60px rgba(10,61,145,.45), 0 0 0 0 rgba(58,134,255,.35); }
  70%  { box-shadow: 0 20px 60px rgba(10,61,145,.45), 0 0 0 14px rgba(58,134,255,0); }
  100% { box-shadow: 0 20px 60px rgba(10,61,145,.45), 0 0 0 0 rgba(58,134,255,0); }
}
.wa-float{
  animation: waPulse 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .wa-float{ animation:none; }
}

/* Mobile: mantener izquierda y proporción correcta */
@media (max-width: 640px){
  .wa-float{
    left: 14px;
    right: auto;
    bottom: calc(14px + env(safe-area-inset-bottom));
    padding: 12px 14px;
    font-size: 14px;
    max-width: calc(100% - 28px);
    white-space: normal;
  }
}

/* ===== LEGASIST_VIEWER_TALL_SYNC ===== */
.viewer .iframe-wrap.tall{
  height: min(72vh, 640px);
}
.viewer .iframe-wrap.tall iframe{
  width:100%;
  height:100%;
}



/* Viewer: 2 columnas en desktop, 1 en móviles */
.viewer .grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 980px){
  .viewer .grid{ grid-template-columns: 1fr; }
}

/* Ambos iframes con el mismo tamaño visible */
.viewer .iframe-wrap.tall{
  height: min(74vh, 680px);
}
.viewer .iframe-wrap.tall iframe{
  width: 100%;
  height: 100%;
}




/* ===== LEGASIST RESPONSIVE 640 ===== */
@media (max-width: 640px){
  html, body{ height:auto; min-height:100%; }
  .container{ height:auto; min-height:auto; }

  .sidebar{ max-height:100vh; overflow:auto; -webkit-overflow-scrolling:touch; }

  .wa-float{
    left: 14px;
    right: auto;
    width: auto;
    max-width: calc(100% - 28px);
    justify-content:flex-start;
    bottom: calc(14px + env(safe-area-inset-bottom));
    font-size: 14px;
  }
}



/* ===== ADMIN_PANEL ===== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,12,18,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.topbar__inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
}
.brand{ display:flex; align-items:center; gap: 12px; }
.brand__logo{ width: 34px; height: 34px; object-fit: contain; }
.brand__name{ font-family: "Cinzel", serif; font-weight: 700; letter-spacing: .5px; }
.brand__tag{ color: rgba(229,231,235,0.72); font-size: 12px; margin-top: 2px; }

.page{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px;
}

.card{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(8,10,14,0.72);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
  overflow: hidden;
}
.card__head{
  padding: 18px 18px 0 18px;
}
.card__title{
  margin: 0;
  font-family: "Cinzel", serif;
  letter-spacing: .4px;
}
.card__desc{
  margin: 8px 0 0 0;
  color: rgba(229,231,235,0.76);
}

.stats{
  display:flex;
  gap: 12px;
  padding: 16px 18px;
  flex-wrap: wrap;
}
.stat{
  min-width: 160px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 12px 14px;
}
.stat__k{ font-size: 12px; color: rgba(229,231,235,0.74); }
.stat__v{ font-size: 22px; font-weight: 800; margin-top: 4px; }

.table-wrap{
  padding: 0 18px 18px 18px;
  overflow:auto;
}
.table{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.table th, .table td{
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
}
.table th{
  font-size: 12px;
  color: rgba(229,231,235,0.74);
  font-weight: 800;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.table td{ color: rgba(255,255,255,0.90); }
.muted{ color: rgba(229,231,235,0.68); }


/* ===== Admin table polish ===== */
.table-wrap{
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgba(10,14,22,0.55);
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
}

.table{
  min-width: 980px;
}

.table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(20,38,92,0.95), rgba(10,18,46,0.92));
  border-bottom: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.table tbody tr:nth-child(odd){
  background: rgba(255,255,255,0.03);
}

.table tbody tr:hover{
  background: rgba(59,130,246,0.10);
}

.badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
  white-space: nowrap;
}

.code-pill{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(59,130,246,0.35);
  background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(147,197,253,0.10));
  color: rgba(255,255,255,0.95);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.chip{
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  color: rgba(229,231,235,0.86);
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}
.chip--ok{
  border-color: rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.14);
  color: rgba(236,253,245,0.95);
}

.table-tools{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 18px 14px 18px;
}
.table-tools__label{
  color: rgba(229,231,235,0.72);
  font-weight: 700;
  font-size: 13px;
}
.input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(10,14,22,0.55);
  color: rgba(255,255,255,0.92);
  outline: none;
}
.input::placeholder{ color: rgba(229,231,235,0.55); }
.input:focus{
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,0.18);
}
.input--sm{
  max-width: 420px;
  padding: 10px 12px;
  border-radius: 12px;
}

/* Better small screens: keep scroll but soften min-width */
@media (max-width: 980px){
  .table{ min-width: 860px; }
}


/* ===== AVISO LEGAL VIEWER ===== */
.legal-note{
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0 22px;
  margin: 64px 0 72px;
}

.legal-container{
  position: relative;
  width: 100%;
  max-width: 980px;
  padding: 42px 52px;
  border-radius: 16px;

  background: rgba(10, 12, 18, 0.78);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  color: rgba(255,255,255,0.92);
  line-height: 1.75;
  font-size: 15px;
}

.legal-accent{
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.22), rgba(255,255,255,0));
}

.legal-title{
  margin: 4px 0 18px;
  text-align: center;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 22px;
  color: rgba(255,255,255,0.95);
}

.legal-question{
  margin-top: 18px;
  font-weight: 700;
  font-size: 16px;
  color: rgba(255,255,255,0.95);
}

.legal-list{
  margin: 12px 0 18px 18px;
  padding: 0;
}

.legal-list li{
  margin: 0 0 10px;
}

@media (max-width: 900px){
  .legal-container{
    padding: 34px 28px;
  }
}

@media (max-width: 560px){
  .legal-note{
    padding: 0 14px;
    margin: 46px 0 56px;
  }
  .legal-container{
    padding: 26px 18px;
    font-size: 14px;
    border-radius: 14px;
  }
  .legal-title{
    font-size: 18px;
  }
  .legal-question{
    font-size: 15px;
  }
}


/* ===== LEGAL_STICKY_HEADER_FOOTER ===== */
.legal-head{
  position: sticky;
  top: 0;
  z-index: 5;
  padding-bottom: 12px;
  margin-bottom: 14px;
  background: rgba(12,15,20,0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.legal-actions{
  position: sticky;
  bottom: 0;
  z-index: 5;
  padding-top: 12px;
  margin-top: 14px;
  background: rgba(12,15,20,0.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.legal-body{
  flex: 1 1 auto;
  overflow: auto;
  padding-right: 10px;
}

.legal-scroll{
  flex: 1 1 auto;
  max-height: none;
  overflow: auto;
  padding-right: 10px;
}

.btn-login{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;font-size;18px;}

/* =====================================================
   LEGASIST MOBILE ALIGN FIX – PANEL DE TEMAS
   Corrige desalineación de títulos, números y formularios
===================================================== */

@media (max-width: 640px){

  .accordion{
    padding: 6px;
  }

  .acc-item{
    width: 100%;
    margin: 10px 0;
  }

  .acc-btn{
    width: 100%;
    padding: 14px 12px;
    text-align: left;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
  }

  .acc-btn .left{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    text-align: left;
  }

  .acc-btn .left > div{
    width: 100%;
    text-align: left;
  }

  .acc-btn .left > div > div{
    text-align: left !important;
    width: 100%;
    margin: 0;
  }

  .pill{
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin-top: 1px;
  }

  .chev{
    flex: 0 0 auto;
    align-self: flex-start;
    margin-top: 4px;
  }

  .acc-panel{
    padding: 10px 12px 14px;
    text-align: left;
  }

  .access-form{
    width: 100%;
    text-align: left;
  }

  .access-form .form-intro,
  .access-form .form-title,
  .access-form .form-sub,
  .access-form .form-intro p,
  .access-form .warn{
    text-align: left !important;
  }

  .field{
    width: 100%;
    text-align: left;
  }

  .field label{
    display: block;
    width: 100%;
    text-align: left;
  }

  .field input,
  .field textarea{
    width: 100%;
    text-align: left;
  }

  .grid2{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .checkline{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
  }

  .checkline label{
    text-align: left !important;
  }

  .btn-row{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .btn-row .primary,
  .btn-row .btn-login,
  .btn-row a.primary,
  .btn-row button.primary{
    width: 100%;
  }

  .panel-header,
  .panel-header h2,
  .panel-header p{
    text-align: left;
  }

  .sidebar.drawer .panel{
    text-align: left;
  }
}



@media (max-width: 640px) {
  .hero {
    padding: 120px 16px 56px;
  }

  .hero .brand {
    top: 24px;
    left: 16px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    width: calc(100% - 32px);
  }

  .brand-logo {
    height: 84px;
    max-width: 240px;
  }

  .kicker {
    display: flex;
    width: 100%;
    border-radius: 18px;
    padding: 12px;
    line-height: 1.5;
  }

  .hero-copy h1 {
    font-size: clamp(26px, 8vw, 38px);
  }

  .hero-copy p {
    font-size: 15px;
    line-height: 1.7;
  }
}



/* =====================
   LEGAL NOTE - CONSULTA DIAGNÓSTICO (PREMIUM)
   ===================== */

.legal-note{
  position: relative;
  padding: 36px 20px;
}

.legal-container{
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 30px 28px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.28);
  overflow: hidden;
}

.legal-accent{
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.18));
  border-radius: 20px;
}

.legal-eyebrow{
  display: inline-block;
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}

.legal-title{
  margin: 0 0 14px;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.legal-lead{
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255,255,255,0.96);
  margin-bottom: 16px;
}

.legal-note p{
  margin: 0 0 16px;
  line-height: 1.8;
  color: rgba(255,255,255,0.84);
}

.legal-list{
  margin: 18px 0 22px;
  padding-left: 20px;
}

.legal-list li{
  margin-bottom: 10px;
  line-height: 1.7;
  color: rgba(255,255,255,0.90);
}

.legal-highlight{
  margin: 24px 0 18px;
  padding: 18px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}

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

.legal-closing{
  margin-top: 8px;
  font-size: 18px;
  color: rgba(255,255,255,0.96);
}

@media (max-width: 640px){
  .legal-container{
    padding: 24px 18px;
    border-radius: 20px;
  }

  .legal-title{
    font-size: clamp(24px, 8vw, 34px);
  }

  .legal-lead,
  .legal-closing{
    font-size: 16px;
  }
}
/* =====================
   WHATSAPP CTA BUTTON
   ===================== */

.legal-cta-whatsapp{
  margin-top: 28px;
  display: flex;
  justify-content: center;
}

.wa-btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #25D366, #1ebe5d);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(37,211,102,0.35);
  transition: all .25s ease;
  border: 1px solid rgba(255,255,255,0.15);
}

.wa-btn:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 18px 45px rgba(37,211,102,0.45);
  background: linear-gradient(135deg, #2eea73, #1ebe5d);
}

.wa-icon{
  font-size: 18px;
  display: flex;
  align-items: center;
}

@media (max-width: 640px){
  .wa-btn{
    width: 100%;
    justify-content: center;
    text-align: center;
    font-size: 14px;
    padding: 14px;
  }
}