/*  SUIKAR.COM HABLA COMO EL PANEL. Colores, radios y tamaños son los del panel
    (price/assets/css/themes.css, tema por defecto; .cfg-panel, .cfg-panel-label y las fichas del
    escritorio): nada inventado. Lo usan la portada y las páginas legales.  */
:root {
  --sb-bg: #0C1117;
  --sb-line: rgba(255,255,255,.06);
  --sb-txt: #f1f5f9;
  --sb-txt-2: #94a3b8;
  --sb-active-icon: #60a5fa;
  --clr-accent: #2563eb;
  --clr-accent-hover: #1d4ed8;
  --clr-body-bg: #fafbfd;
  --clr-surface: #ffffff;
  --clr-surface-2: #f8fafc;
  --clr-border: #e2e8f0;
  --clr-text-1: #0f172a;
  --clr-text-2: #475569;
  --clr-text-3: #64748b;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--clr-body-bg); color: var(--clr-text-2); -webkit-font-smoothing: antialiased; }
a { color: inherit; }

/* La barra de arriba del panel */
.top { background: var(--sb-bg); border-bottom: 1px solid var(--sb-line); }
.top-in { max-width: 1120px; margin: 0 auto; padding: .9rem 2rem; display: flex; align-items: center; justify-content: space-between; }
.top-logo { height: 22px; width: auto; display: block; }
/* La sandia (el favicon del panel) delante del nombre: es tambien el logo de la app de Google */
.top-marca { display: flex; align-items: center; gap: .6rem; }
.top-icono { width: 26px; height: 26px; display: block; }
/*  El logo no se selecciona ni se arrastra (como el del panel); el clic sigue llegando al enlace  */
.top-marca, .top-marca img, .hero-logo { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.top-marca img, .hero-logo { pointer-events: none; }
.btn {
  display: inline-flex; align-items: center; gap: .45rem; border-radius: 10px; font-weight: 600;
  font-size: .8rem; text-decoration: none; padding: .55rem 1rem; border: 1px solid transparent;
  transition: background .15s, border-color .15s, transform .12s;
}
.btn:hover { transform: translateY(-1px); }
.btn-acento { background: var(--clr-accent); color: #fff; }
.btn-acento:hover { background: var(--clr-accent-hover); }
.btn-oscuro { border-color: rgba(255,255,255,.14); color: var(--sb-txt); }
.btn-oscuro:hover { border-color: rgba(255,255,255,.28); }
.btn-grande { font-size: .9rem; padding: .8rem 1.35rem; }

/* La cabecera, del color de la barra lateral */
.hero { background: var(--sb-bg); }
.hero-in { max-width: 1120px; margin: 0 auto; padding: 5.5rem 2rem 6rem; }
.eyebrow { font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--clr-accent); }
.hero .eyebrow { color: var(--sb-active-icon); }
.hero-logo { display: block; width: 420px; max-width: 100%; height: auto; margin: 1.4rem 0 2.2rem; user-select: none; -webkit-user-drag: none; }
.hero-h1 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 600; color: var(--sb-txt); line-height: 1.2; letter-spacing: -.025em; max-width: 720px; }
.hero-sub { margin-top: 1rem; font-size: 1rem; line-height: 1.65; color: var(--sb-txt-2); max-width: 620px; }
.hero-cta { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .7rem; }
/*  LA VISTA PREVIA DE LA PORTADA. Una pantalla del panel dibujada solo con formas (sin datos
    inventados) que se va componiendo: fichas, gráfica, barras y filas. Va en su propia columna:
    nunca queda detrás del texto. Se queda quieta si el equipo pide menos movimiento.  */
.hero-in--2 { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 3.5rem; align-items: center; }
.vista { perspective: 1400px; }
.vista-marco {
  border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.025);
  padding: 14px; display: grid; gap: 12px;
  transform: rotateY(-8deg) rotateX(4deg); transform-origin: left center;
  animation: v-flota 9s ease-in-out infinite;
}
@keyframes v-flota { 50% { transform: rotateY(-5deg) rotateX(2deg) translateY(-8px); } }
.vista-barra { display: flex; gap: 6px; padding: 2px 2px 4px; }
.vista-barra span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.12); }
.vista-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vk { border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 11px 12px; display: grid; gap: 7px;
  opacity: 0; animation: v-entra .7s ease-out forwards; }
.vk:nth-child(2) { animation-delay: .15s; } .vk:nth-child(3) { animation-delay: .3s; }
.vk i { display: block; height: 6px; border-radius: 4px; }
.vk-l { width: 46%; background: rgba(96,165,250,.55); height: 4px !important; }
.vk-n { width: 62%; height: 12px !important; background: rgba(241,245,249,.85); transform-origin: left; animation: v-crece 1.2s .5s cubic-bezier(.2,.8,.2,1) both; }
.vk-d { width: 80%; background: rgba(148,163,184,.22); }
.vista-graf { position: relative; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 12px 12px 10px; height: 150px; overflow: hidden; }
.vista-graf svg { position: absolute; left: 12px; right: 12px; top: 14px; width: calc(100% - 24px); height: 92px; }
.vg-linea { fill: none; stroke: #60a5fa; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 520; stroke-dashoffset: 520; animation: v-dibuja 2.4s .6s cubic-bezier(.6,.1,.2,1) forwards, v-respira 6s 3.2s ease-in-out infinite; }
.vg-area { fill: rgba(37,99,235,.14); opacity: 0; animation: v-aparece 1.2s 2.2s ease-out forwards; }
.vg-barras { position: absolute; left: 12px; right: 12px; bottom: 10px; height: 30px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; align-items: end; }
.vg-barras i { display: block; border-radius: 3px 3px 0 0; background: rgba(148,163,184,.2); transform-origin: bottom; animation: v-barra 1s cubic-bezier(.2,.8,.2,1) both, v-ola 4.5s ease-in-out infinite; }
.vg-barras i:nth-child(1)  { height: 40%; animation-delay: .9s, 3s; }
.vg-barras i:nth-child(2)  { height: 62%; animation-delay: .97s, 3.25s; }
.vg-barras i:nth-child(3)  { height: 48%; animation-delay: 1.04s, 3.5s; }
.vg-barras i:nth-child(4)  { height: 75%; animation-delay: 1.11s, 3.75s; }
.vg-barras i:nth-child(5)  { height: 56%; animation-delay: 1.18s, 4s; }
.vg-barras i:nth-child(6)  { height: 82%; animation-delay: 1.25s, 4.25s; }
.vg-barras i:nth-child(7)  { height: 66%; animation-delay: 1.32s, 4.5s; }
.vg-barras i:nth-child(8)  { height: 90%; animation-delay: 1.39s, 4.75s; background: rgba(96,165,250,.5); }
.vg-barras i:nth-child(9)  { height: 72%; animation-delay: 1.46s, 5s; }
.vg-barras i:nth-child(10) { height: 100%; animation-delay: 1.53s, 5.25s; background: rgba(96,165,250,.7); }
.vista-filas { border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 4px 12px; }
.vf { display: grid; grid-template-columns: 8px 1fr .8fr 52px; gap: 12px; align-items: center; padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.05); opacity: 0; animation: v-entra .6s ease-out forwards; }
.vf:last-child { border-bottom: 0; }
.vf:nth-child(1) { animation-delay: 1.6s; } .vf:nth-child(2) { animation-delay: 1.8s; }
.vf:nth-child(3) { animation-delay: 2s; } .vf:nth-child(4) { animation-delay: 2.2s; }
.vf i { display: block; height: 6px; border-radius: 4px; background: rgba(148,163,184,.25); }
.vf .vf-a { background: rgba(241,245,249,.55); width: 70%; }
.vf .vf-b { width: 60%; }
.vf .vf-c { height: 14px; border-radius: 999px; background: rgba(96,165,250,.16); }
.vf .vf-p { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.vf:nth-child(2) .vf-p { background: #60a5fa; animation: v-late 2.4s 3s ease-in-out infinite; }
.vf:nth-child(3) .vf-p { background: rgba(148,163,184,.5); }
@keyframes v-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes v-crece { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes v-dibuja { to { stroke-dashoffset: 0; } }
@keyframes v-respira { 50% { opacity: .65; } }
@keyframes v-aparece { to { opacity: 1; } }
@keyframes v-barra { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes v-ola { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.82); } }
@keyframes v-late { 50% { transform: scale(1.5); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .vista-marco, .vk, .vk-n, .vg-linea, .vg-area, .vg-barras i, .vf, .vf-p { animation: none !important; opacity: 1 !important; }
  .vg-linea { stroke-dashoffset: 0; }
}
@media (max-width: 980px) {
  .hero-in--2 { grid-template-columns: minmax(0, 1fr); }
  .vista { display: none; }
}

/* La de las páginas de texto: la misma franja, más baja */
.hero--doc .hero-in { padding: 3.5rem 2rem 5.5rem; }
.hero--doc .hero-h1 { margin-top: .7rem; }
.hero--doc .hero-sub { font-size: .85rem; margin-top: .6rem; }

/* Una tarjeta del panel, montada sobre la franja */
.cuerpo { max-width: 1120px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 2; }
.panel { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 12px; overflow: hidden; margin-top: -3rem; }
.panel-hd { background: var(--clr-surface-2); padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--clr-border); }
.panel-title { margin-top: .35rem; font-size: 1.1rem; font-weight: 600; color: #0a1628; letter-spacing: -.02em; }
.panel-desc { margin-top: .25rem; font-size: .78rem; color: var(--clr-text-3); }
.panel-bd { padding: 1.5rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.ficha { border: 1px solid var(--clr-border); border-radius: 10px; padding: .95rem 1rem 1.05rem; }
.ficha-t { margin-top: .45rem; font-size: 1rem; font-weight: 600; color: var(--clr-text-1); letter-spacing: -.01em; }
.ficha-d { margin-top: .3rem; font-size: .76rem; line-height: 1.5; color: var(--clr-text-3); }

/* El texto legal, dentro de la tarjeta: columna de lectura, no ancho de pantalla */
.doc { padding: 2.25rem 2.5rem 2.5rem; max-width: 780px; font-size: .9rem; line-height: 1.75; color: var(--clr-text-2); }
.doc h2 { font-size: 1rem; font-weight: 600; color: var(--clr-text-1); letter-spacing: -.01em; margin: 2.25rem 0 .55rem; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: .9rem; font-weight: 600; color: var(--clr-text-1); margin: 1.5rem 0 .45rem; }
.doc p { margin: .75rem 0; }
.doc ul { padding-left: 1.15rem; margin: .75rem 0; }
.doc li { margin: .5rem 0; }
.doc strong { color: var(--clr-text-1); font-weight: 600; }
.doc a { color: var(--clr-accent); text-decoration: none; }
.doc a:hover { text-decoration: underline; }

/* El texto y, al lado, el índice de secciones (fijo al bajar) */
.panel--doc { display: grid; grid-template-columns: minmax(0, 1fr) 260px; overflow: visible; }
.panel--doc .doc { order: 1; max-width: none; padding-right: 3rem; }
.doc-indice { order: 2; background: var(--clr-surface-2); padding: 2.25rem 1.25rem; border-radius: 0 12px 12px 0; }
.doc-indice-in { position: sticky; top: 1.5rem; }
.doc-indice ol { list-style: none; margin-top: .9rem; display: grid; gap: .15rem; }
.doc-indice a {
  display: block; font-size: .76rem; line-height: 1.4; color: var(--clr-text-3); text-decoration: none;
  padding: .35rem .55rem; border-radius: 8px; transition: background .15s, color .15s;
}
.doc-indice a:hover { background: var(--clr-surface-2); color: var(--clr-text-1); }
.doc h2 { scroll-margin-top: 1.5rem; }

/* El formulario: los campos del acceso al panel (auth.css .auth-field) */
.form { padding: 1.5rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.campo { display: flex; flex-direction: column; gap: .3rem; }
.campo--ancho { grid-column: 1 / -1; }
.campo label { font-size: .77rem; font-weight: 600; color: #475569; letter-spacing: .01em; }
.campo input, .campo textarea {
  border: 1.5px solid var(--clr-border); border-radius: 8px; padding: .6rem .85rem; font-size: .9rem;
  font-family: inherit; color: var(--clr-text-1); background: #fff; transition: border-color .15s; outline: none; width: 100%;
}
.campo textarea { resize: vertical; min-height: 9rem; line-height: 1.55; }
.campo input:focus, .campo textarea:focus { border-color: var(--clr-accent); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.acepto { display: flex; align-items: flex-start; gap: .55rem; margin-top: 1.1rem; font-size: .8rem; color: var(--clr-text-2); cursor: pointer; }
.acepto input { width: 15px; height: 15px; margin-top: .12rem; accent-color: var(--clr-accent); flex-shrink: 0; }
.acepto a, .form-alt a { color: var(--clr-accent); text-decoration: none; }
.acepto a:hover, .form-alt a:hover { text-decoration: underline; }
.form-pie { margin-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.form-pie .btn { border: 0; cursor: pointer; font-family: inherit; }
.form-pie .btn:disabled { opacity: .6; cursor: default; transform: none; }
.form-alt { font-size: .78rem; color: var(--clr-text-3); }
/* Los avisos del panel (.alert-success / .alert-error) */
.aviso { margin-top: 1.1rem; padding: .65rem 1rem; border-radius: 8px; font-size: .83rem; }
.aviso--ok  { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.aviso--mal { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

.pie { max-width: 1120px; margin: 0 auto; padding: 2.5rem 2rem 3rem; display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; font-size: .72rem; color: var(--clr-text-3); }
.pie nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--clr-text-1); text-decoration: underline; }
.pie a[aria-current] { color: var(--clr-text-1); }

@media (max-width: 900px) {
  .panel-bd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel--doc { grid-template-columns: minmax(0, 1fr); }
  .doc-indice { display: none; }
  .panel--doc .doc { padding-right: 2.5rem; }
}
@media (max-width: 560px) {
  .top-in, .hero-in, .cuerpo, .pie { padding-left: 1rem; padding-right: 1rem; }
  .hero-in { padding-top: 3.25rem; padding-bottom: 4.5rem; }
  .hero--doc .hero-in { padding: 2.5rem 1rem 4.5rem; }
  .hero-logo { width: 260px; }
  .panel-bd { grid-template-columns: minmax(0, 1fr); padding: 1rem; }
  .panel-hd { padding: 1rem; }
  .doc { padding: 1.5rem 1.1rem 1.75rem; }
  .form { padding: 1rem; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .pie { flex-direction: column; align-items: flex-start; }
}