/* =============================================================
   CC GLOBAL CRM · SISTEMA DE DISEÑO DEL SITIO PÚBLICO
   dark-first · acento cian eléctrico · Space Grotesk + Inter + JetBrains Mono
   Carga en layouts/site.blade.php DESPUÉS del <style> inline.
   ============================================================= */

/* ---------- Tokens ---------- */
:root,
[data-theme="dark"] {
  --bg: #06090f;
  --bg2: #0a101c;
  --surface: #0d1626;
  --surface-2: #12203a;
  --card: #0d1626;
  --cardSolid: #0d1626;

  --text: #e8eef8;
  --text-2: #a7b6cf;
  --text-muted: #6b7c99;
  --muted: #6b7c99;
  --border: rgba(148, 163, 184, 0.14);
  --border-strong: rgba(148, 163, 184, 0.26);
  --border-accent: rgba(124, 92, 252, 0.45);

  --accent: #7c5cfc;
  --accent-2: #3fb8cc;
  --accent-grad: linear-gradient(135deg, #7c5cfc 0%, #3fb8cc 100%);
  --accent-soft: rgba(124, 92, 252, 0.14);
  --accent-glow: rgba(124, 92, 252, 0.35);
  --accent-ink: #ffffff;

  --gold: #7c5cfc;
  --gold2: #3fb8cc;

  --success: #34d399;
  --warning: #fbbf24;
  --danger: #f87171;

  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-hero: clamp(2.4rem, 5vw, 3.9rem);
  --fs-h2: clamp(1.7rem, 3.2vw, 2.4rem);
  --fs-h3: 1.15rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.65);
  --shadow2: 0 14px 40px -12px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 44px -10px var(--accent-glow);
  --ring: 0 0 0 4px rgba(124, 92, 252, 0.18);

  --btnBg: var(--accent-grad);
  --btnText: var(--accent-ink);
  --btnGhostBg: rgba(255, 255, 255, 0.06);
  --btnGhostText: #e8eef8;

  --headerBg: rgba(6, 9, 15, 0.78);
  --headerLine: rgba(148, 163, 184, 0.14);

  --techGrid: rgba(34, 211, 238, 0.06);
  --techGlow1: rgba(34, 211, 238, 0.16);
  --techGlow2: rgba(59, 130, 246, 0.14);
  --footerGlow1: rgba(34, 211, 238, 0.18);
  --footerGlow2: rgba(59, 130, 246, 0.14);

  --container: 1180px;
  --section-space: clamp(4rem, 9vw, 7rem);
}

/* Variante clara (toggle) — mismo sistema, acento cyan profundo */
[data-theme="light"] {
  --bg: #f7f9fc;
  --bg2: #eef2f8;
  --surface: #ffffff;
  --surface-2: #f1f5fb;
  --card: #ffffff;
  --cardSolid: #ffffff;

  --text: #0b1220;
  --text-2: #41506b;
  --text-muted: #5b667a;
  --muted: #5b667a;
  --border: rgba(11, 18, 32, 0.12);
  --border-strong: rgba(11, 18, 32, 0.2);
  --border-accent: rgba(91, 60, 224, 0.4);

  --accent: #5b3ce0;
  --accent-2: #3fb8cc;
  --accent-grad: linear-gradient(135deg, #6d4de0 0%, #3fb8cc 100%);
  --accent-soft: rgba(91, 60, 224, 0.1);
  --accent-glow: rgba(91, 60, 224, 0.3);
  --accent-ink: #ffffff;

  --gold: #5b3ce0;
  --gold2: #3fb8cc;

  --success: #059669;
  --warning: #b45309;
  --danger: #dc2626;

  --shadow: 0 24px 60px -24px rgba(20, 10, 50, 0.25);
  --shadow2: 0 14px 40px -16px rgba(20, 10, 50, 0.18);
  --shadow-glow: 0 0 44px -12px var(--accent-glow);
  --ring: 0 0 0 4px rgba(91, 60, 224, 0.18);

  --btnText: #ffffff;
  --btnGhostBg: rgba(11, 18, 32, 0.04);
  --btnGhostText: #0b1220;

  --headerBg: rgba(255, 255, 255, 0.8);
  --headerLine: rgba(11, 18, 32, 0.1);

  --techGrid: rgba(91, 60, 224, 0.06);
  --techGlow1: rgba(91, 60, 224, 0.14);
  --techGlow2: rgba(63, 184, 204, 0.1);
  --footerGlow1: rgba(91, 60, 224, 0.16);
  --footerGlow2: rgba(63, 184, 204, 0.1);
}

/* ---------- Base ---------- */
html, body { background: var(--bg); color: var(--text); }
body { font-family: var(--font-body); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.section { padding: var(--section-space) 0; }

.tech-bg { position: relative; isolation: isolate; overflow: hidden; }
.tech-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 420px at 12% -5%, var(--accent-soft), transparent 60%),
    radial-gradient(700px 420px at 95% 8%, var(--techGlow2), transparent 60%),
    linear-gradient(to right, var(--techGrid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--techGrid) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
}

/* ---------- Botones (sobrescriben .btn del layout) ---------- */
.btn { border-radius: var(--radius-sm); padding: 0.8rem 1.6rem; }
.btn--primary { background: var(--accent-grad); color: var(--accent-ink); border-color: transparent; font-weight: 700; }
.btn--primary:hover { box-shadow: var(--shadow-glow); border-color: transparent; }
.btn--ghost { background: transparent; border: 1px solid var(--border-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--accent); box-shadow: none; }
.btn--lg { padding: 1rem 2rem; font-size: 1rem; }

/* ---------- Cards (sobrescriben .card del layout) ---------- */
.card { background: var(--surface); border-radius: var(--radius); padding: 1.5rem; box-shadow: none; }
.card:hover { border-color: var(--border-accent); box-shadow: var(--shadow); }
.card::before {
  inset: -80px -80px auto auto; width: 160px; height: 160px;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  animation: none; opacity: 1;
}

.badge {
  display: inline-block; padding: 0.35rem 0.85rem; margin-bottom: 1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--border-accent);
}

.chip {
  display: inline-block; padding: 0.5rem 1rem; border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: 500;
  color: var(--text-2); background: var(--surface); border: 1px solid var(--border);
}

/* ---------- Section head ---------- */
.section-head { max-width: 680px; margin-bottom: 3rem; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-title {
  font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15; margin: 1rem 0 0.75rem; color: var(--text);
}
.section-lead { color: var(--text-2); font-size: 1.05rem; line-height: 1.65; margin: 0; }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

/* ---------- Inputs ---------- */
.input, .select, .textarea {
  width: 100%; padding: 0.8rem 1rem;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text);
  font-family: var(--font-body); font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }

.field { display: block; margin-bottom: 1rem; }
.field__label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin-bottom: 0.4rem; }

.alert { padding: 0.9rem 1.1rem; border-radius: var(--radius); font-size: 0.95rem; margin-bottom: 1.2rem; line-height: 1.5; }
.alert--success { background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.35); color: var(--success); }
.alert--danger { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.35); color: var(--danger); }
.alert ul { margin: 0; padding-left: 1.2rem; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 2rem; }
.breadcrumb a { color: var(--text-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current] { color: var(--text); font-weight: 600; }

/* ---------- Callouts ---------- */
.callout { display: flex; gap: 0.9rem; padding: 1rem 1.25rem; margin: 1.25rem 0; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.callout__icon { font-family: var(--font-mono); font-weight: 700; flex: none; }
.callout__body { color: var(--text-2); line-height: 1.65; font-size: 0.95rem; margin: 0; }
.callout--note { border-color: var(--border-accent); background: var(--accent-soft); }
.callout--note .callout__icon { color: var(--accent); }
.callout--warn { border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.08); }
.callout--warn .callout__icon { color: var(--warning); }
.callout--danger { border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.08); }
.callout--danger .callout__icon { color: var(--danger); }

/* ---------- Code blocks ---------- */
.code-block { margin: 1.25rem 0; border-radius: var(--radius); border: 1px solid var(--border-strong); overflow: hidden; background: #0a0f1a; }
.code-block__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-2); }
.code-block__lang { color: var(--accent); font-weight: 600; }
.code-block pre { margin: 0; padding: 1.1rem 1.25rem; overflow-x: auto; }
.code-block code { font-family: var(--font-mono); font-size: 0.875rem; line-height: 1.7; color: #d7e2f4; white-space: pre; }
.tok-k { color: #7dd3fc; } .tok-s { color: #a5f3a5; }
.tok-c { color: #64748b; font-style: italic; } .tok-n { color: #fbbf24; } .tok-f { color: #c4b5fd; }

/* ---------- Tablas ---------- */
.table-wrap { overflow-x: auto; margin: 1.25rem 0; border-radius: var(--radius); border: 1px solid var(--border); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.data th, table.data td { text-align: left; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data thead th { background: var(--surface-2); color: var(--text-2); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.08em; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: rgba(148, 163, 184, 0.04); }

/* ---------- Cabecera de página interior ---------- */
.page-hero { padding: clamp(2.5rem, 6vw, 4rem) 0 1rem; }
.page-title { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; margin: 1rem 0 0.9rem; color: var(--text); }
.page-lead { color: var(--text-2); font-size: 1.1rem; line-height: 1.65; max-width: 640px; margin: 0; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 1rem; max-width: 860px; }
.faq__item { padding: 0; overflow: hidden; }
.faq__item summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-family: var(--font-mono); font-size: 1.2rem; color: var(--accent); transition: transform 0.2s ease; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__a { margin: 0; padding: 0 1.5rem 1.5rem; color: var(--text-muted); line-height: 1.7; }

/* ---------- CTA panel ---------- */
.cta-panel {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(2.5rem, 6vw, 4rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-accent);
  background: radial-gradient(600px 300px at 50% 0%, var(--accent-soft), transparent 70%), var(--surface);
}
.cta-panel__glow { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 480px; height: 240px; border-radius: 50%; background: var(--accent-grad); opacity: 0.16; filter: blur(60px); pointer-events: none; }
.cta-panel__title { font-family: var(--font-display); font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.75rem; color: var(--text); }
.cta-panel__sub { color: var(--text-2); font-size: 1.05rem; line-height: 1.65; max-width: 520px; margin: 0 auto 1.75rem; }
.cta-panel__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.9rem; }
.cta-panel > *:not(.cta-panel__glow) { position: relative; z-index: 1; }

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .card, .btn { transition: none !important; }
  .card:hover, .btn:hover { transform: none !important; }
}

/* =============================================================
   LAYOUT — ajustes de color sobre el header existente
   (el CSS estructural del header vive en site.blade.php)
   ============================================================= */
.logo { background: linear-gradient(135deg, var(--accent-soft), rgba(59, 130, 246, 0.08)); }
nav a:hover { background: var(--accent-soft) !important; }
[data-theme="dark"] nav a:hover, [data-theme="light"] nav a:hover { background: var(--accent-soft) !important; }

/* =============================================================
   VISTA: HOME
   ============================================================= */
.hero { position: relative; padding: clamp(3rem, 7vw, 5.5rem) 0 3rem; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero__title { font-family: var(--font-display); font-size: var(--fs-hero); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; margin: 1.1rem 0 1.2rem; color: var(--text); }
.hero__subtitle { color: var(--text-2); font-size: 1.1rem; line-height: 1.65; max-width: 560px; margin: 0; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; margin: 1.6rem 0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.6rem; }

.hero__media { display: grid; gap: 1.25rem; }
.hero__figure { margin: 0; position: relative; }
.hero__figure img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); border: 1px solid var(--border-strong); box-shadow: var(--shadow); }
.hero__figure::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg); background: linear-gradient(180deg, transparent 55%, rgba(6, 9, 15, 0.55)); pointer-events: none; }
.hero__mock {
  aspect-ratio: 16/10; border-radius: var(--radius-lg); border: 1px solid var(--border-strong);
  background:
    linear-gradient(var(--techGrid) 1px, transparent 1px),
    linear-gradient(90deg, var(--techGrid) 1px, transparent 1px),
    var(--surface);
  background-size: 32px 32px;
  display: grid; grid-template-columns: 150px 1fr; gap: 1px; overflow: hidden; box-shadow: var(--shadow);
}
.hero__mock-side { background: #0a111f; border-right: 1px solid var(--border); }
.hero__mock-main { background: var(--surface); padding: 1rem; display: grid; gap: 0.6rem; align-content: start; }
.hero__mock-bar { height: 14px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.hero__mock-bar--accent { width: 45%; background: var(--accent-soft); border-color: var(--border-accent); }

.proof-card { margin: 0; }
.proof-card__title { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; }
.proof-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.65rem; }
.proof-card__list li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--text-2); font-size: 0.95rem; line-height: 1.5; }
.proof-card__list li::before { content: "✓"; color: var(--accent); font-weight: 700; flex: none; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.step__num { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; color: var(--accent); margin-bottom: 0.9rem; display: inline-block; }
.step__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin: 0 0 0.6rem; color: var(--text); }
.step__desc { color: var(--text-muted); line-height: 1.65; margin: 0; font-size: 0.95rem; }
@media (max-width: 1200px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .steps { grid-template-columns: 1fr; } .hero__grid { grid-template-columns: 1fr; } }

.feature__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; margin: 0 0 0.6rem; color: var(--text); }
.feature__desc { color: var(--text-muted); line-height: 1.65; margin: 0; font-size: 0.95rem; }

/* =============================================================
   VISTA: CONTACTO
   ============================================================= */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.5rem; align-items: start; }
.contact-info__title, .contact-form__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; margin: 0 0 1.1rem; color: var(--text); }
.contact-info__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.9rem; }
.contact-info__list li { display: flex; flex-direction: column; gap: 0.15rem; }
.contact-info__label { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.contact-info__value { color: var(--text-2); font-size: 0.98rem; text-decoration: none; }
.contact-info__value:hover { color: var(--accent); }
.contact-info__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.trust { margin-top: 1.75rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }
.trust__title { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); margin: 0 0 0.8rem; }
.trust__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.trust__list li { display: flex; gap: 0.6rem; color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; }
.trust__list li::before { content: "✓"; color: var(--accent); font-weight: 700; flex: none; }
.contact-form__sub { color: var(--text-muted); margin: 0 0 1.4rem; }
.contact-form__submit { width: 100%; }
.contact-form__note { text-align: center; font-size: var(--fs-sm); color: var(--text-muted); margin: 0.9rem 0 0; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* =============================================================
   VISTA: PRICING
   ============================================================= */
.pricing-ctrls { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
.ctrl { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ctrl-label { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); }
.ctrl-note { font-size: var(--fs-xs); color: var(--text-muted); width: 100%; }
.period-buttons { display: flex; gap: 0.5rem; }
.currency-select { max-width: 200px; }
@media (max-width: 768px) { .pricing-ctrls { grid-template-columns: 1fr; } }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; }
@media (max-width: 1100px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .pricing-grid { grid-template-columns: 1fr; } }

/* .hot-badge es position:absolute y .card (clase base) no trae
   position:relative -- sin esto, el badge se posiciona contra un
   ancestro más arriba (fuera de la tarjeta) en vez de anclarse a ESTA
   tarjeta, y termina flotando encima del título en vez de en su esquina. */
.plan-card { display: flex; flex-direction: column; position: relative; }
.plan-hot { border-color: var(--border-accent); box-shadow: var(--shadow-glow); }
.hot-badge {
  position: absolute; top: 1rem; right: 1rem; z-index: 1;
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-grad);
  padding: 0.3rem 0.7rem; border-radius: var(--radius-pill);
}
.plan-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--text); }
/* Deja espacio para que el hot-badge (arriba a la derecha) nunca se
   superponga al texto del título en la tarjeta destacada. */
.plan-hot .plan-name { padding-right: 6.5rem; }
.plan-summary { color: var(--text-muted); line-height: 1.6; font-size: 0.95rem; margin: 0; }
.plan-price { margin: 1.4rem 0; padding: 1rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: grid; gap: 0.7rem; }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.price-label { font-size: var(--fs-sm); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.price-value { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.price-value.small { font-size: 1.45rem; }
.price-suffix { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.plan-bullets { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.6rem; flex: 1; }
.bullet { display: flex; gap: 0.6rem; color: var(--text-2); font-size: 0.95rem; line-height: 1.5; }
.bullet::before { content: "✓"; color: var(--accent); font-weight: 700; flex: none; }
.plan-actions { display: grid; gap: 0.6rem; }
.plan-foot { font-size: var(--fs-xs); color: var(--text-muted); text-align: center; margin-top: 0.9rem; }

.cmp__cell { text-align: center; }
.cmp__yes { color: var(--accent); font-weight: 700; }
.cmp__no { color: var(--text-muted); }

.empty-card { text-align: center; padding: 3rem; }
.empty-note { color: var(--text-muted); margin: 0.6rem 0 0; }

/* =============================================================
   VISTA: DOCS
   ============================================================= */
.docs-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 3rem; align-items: start; }
/* min-width:0 evita que un título de guía largo ("Catálogo · Categorías,
   marcas y productos") fuerce esta columna a crecer más allá de sus 250px
   -- el default de grid es min-width:auto (se ajusta al contenido más
   ancho sin cortar), lo que hacía que el sidebar invadiera el texto de al
   lado en vez de partir la línea. Bug real, apareció recién al pasar de 2
   guías con títulos cortos a 6 con títulos más largos. */
.docs-side { position: sticky; top: 2rem; min-width: 0; }
.docs-search { margin-bottom: 1.5rem; }
.docs-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* El <nav> genérico del header (site.blade.php) es display:flex horizontal
   -- sin este override, este <nav> lateral (categorías apiladas) hereda ese
   flex y las 3 categorías terminan una al lado de la otra en una sola fila,
   pisando el contenido de al lado en vez de listarse hacia abajo. */
.docs-nav { display: block; }
.docs-nav__cat { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin: 1.4rem 0 0.5rem; }
.docs-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; min-width: 0; }
.docs-nav__list li { min-width: 0; }
.docs-nav__list a {
  display: block; padding: 0.5rem 0.75rem; border-radius: 8px;
  color: var(--text-2); text-decoration: none; font-size: 0.92rem;
  border-left: 2px solid transparent;
  overflow-wrap: break-word; word-break: break-word;
  /* El <style> inline de layouts/site.blade.php trae "nav a { white-space:
     nowrap }" genérico para el menú superior, sin scope. .docs-nav ES un
     <nav> (a diferencia de .guide-side, que no usa esa etiqueta), así que
     hereda ese nowrap y el link nunca puede partir línea -- crece y pisa
     el contenido aunque min-width:0 ya esté puesto. Sin este override el
     resto de las reglas de wrap de arriba no alcanzan. */
  white-space: normal;
}
.docs-nav__list a:hover { color: var(--text); background: var(--surface); border-left-color: var(--accent); }
/* overflow-wrap hereda a todo el contenido de adentro (títulos, párrafos)
   -- cubre el caso de una palabra larga o una URL sin espacios que por sí
   sola fuerce el ancho de la columna, además del min-width:0 de arriba. */
.docs-main { min-width: 0; overflow-wrap: break-word; }
.docs-main h2 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin: 2.4rem 0 1rem; scroll-margin-top: 1.5rem; color: var(--text); }
.docs-p { color: var(--text-2); line-height: 1.7; }
.inline-code { font-family: var(--font-mono); font-size: 0.85em; background: var(--surface-2); padding: 0.15em 0.4em; border-radius: 6px; border: 1px solid var(--border); }
.docs-list { display: grid; gap: 0.7rem; color: var(--text-2); line-height: 1.65; padding-left: 1.2rem; }
.docs-steps { display: grid; gap: 1rem; counter-reset: dstep; list-style: none; padding: 0; }
.docs-steps li { position: relative; padding-left: 2.6rem; color: var(--text-2); line-height: 1.6; counter-increment: dstep; }
.docs-steps li::before {
  content: counter(dstep, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--border-accent);
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 8px;
}
.docs-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.5rem; }
@media (max-width: 900px) { .docs-layout { grid-template-columns: 1fr; } .docs-side { position: static; } }

/* =============================================================
   VISTA: ORIENTACIONES
   ============================================================= */
.guide-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 3rem; align-items: start; }
/* mismo bug que .docs-side (ver esa regla): sin min-width:0 esta columna
   crece con el título de guía más largo en vez de partir la línea, e
   invade el contenido de al lado. */
.guide-side { position: sticky; top: 2rem; min-width: 0; }
.guide-side__cta { margin-top: 2rem; padding: 1.2rem; border: 1px solid var(--border); border-radius: var(--radius); }
.guide-side__cta-t { font-size: var(--fs-sm); color: var(--text-2); margin: 0 0 0.8rem; line-height: 1.5; }
/* Faltaba -- .docs-main SÍ tenía min-width:0 pero .guide-main (el <div>
   real que usa orientaciones.blade.php) no tenía ninguna regla definida.
   Sin esto, el lado del CONTENIDO (no solo el sidebar) puede forzar la
   grilla a crecer si algo adentro pide más ancho del que tiene la columna
   (texto largo sin espacios, imagen, bloque de código), empujando/pisando
   la columna del sidebar. */
.guide-main { min-width: 0; overflow-wrap: break-word; }
.guide-meta { margin: 1rem 0 0; }
.guide-steps { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
.guide-step__head { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 0.6rem; }
.guide-step__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin: 0; color: var(--text); }
.guide-step__body { color: var(--text-2); line-height: 1.7; margin: 0 0 1.25rem; }
.guide-shot {
  min-height: 180px; border-radius: var(--radius);
  border: 1.5px dashed var(--border-strong);
  background: var(--surface);
  display: grid; place-items: center; padding: 1.5rem;
}
.guide-shot__hint { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.guide-shot-img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); display: block; }
.docs-nav__list a.active { color: var(--text); background: var(--surface); border-left-color: var(--accent); }
@media (max-width: 900px) { .guide-layout { grid-template-columns: 1fr; } .guide-side { position: static; } }

/* =============================================================
   VISTA: AYUDA
   ============================================================= */
.help-hero { text-align: center; }
.help-hero .page-title, .help-hero .page-lead { margin-left: auto; margin-right: auto; }
.help-search { max-width: 520px; margin: 1.8rem auto 0; }
.help-search__input { text-align: center; padding: 1rem 1.4rem; }
.help-cats { display: grid; gap: 2.5rem; margin-bottom: 3rem; }
.help-cat__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin: 0 0 1rem; color: var(--text); }
.help-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.help-contact__card { text-align: center; }
.help-contact__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--text); }
.help-contact__sub { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin: 0 0 1.2rem; }
.help-contact__card .btn { width: 100%; }
@media (max-width: 900px) { .help-contact { grid-template-columns: 1fr; } }

/* =============================================================
   VISTA: CONFIGURACIONES
   ============================================================= */
.cap__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--text); }
.cap__desc { color: var(--text-muted); line-height: 1.65; font-size: 0.95rem; margin: 0 0 1rem; }
.cap__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.cap__list li { display: flex; gap: 0.6rem; color: var(--text-2); font-size: 0.95rem; line-height: 1.5; }
.cap__list li::before { content: "✓"; color: var(--accent); font-weight: 700; flex: none; }
.cap__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.arch { margin: 3rem 0; padding: 2rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.arch__label { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin: 0 0 1.2rem; }
.arch__layers { display: grid; gap: 0.8rem; }
.arch__layer {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.75rem;
  padding: 1rem 1.25rem; border-radius: var(--radius);
  font-size: 0.92rem; font-weight: 500; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
}
.arch__layer--mid span:first-child { font-family: var(--font-display); font-weight: 700; color: var(--text); }
.arch__sep { color: var(--accent); font-weight: 700; }

/* =============================================================
   VISTA: SITEMAP
   ============================================================= */
.sitemap-group__title { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin: 0 0 1rem; }
.sitemap-group__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.sitemap-group__list a { color: var(--text-2); text-decoration: none; font-size: 0.97rem; }
.sitemap-group__list a:hover { color: var(--accent); }

/* =============================================================
   FOOTER
   ============================================================= */
.footer { margin-top: 3rem; }
.footer-pos { text-align: center; margin-bottom: 2.5rem; }
.footer-pos__text {
  font-family: var(--font-display); font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 600;
  letter-spacing: -0.02em; color: var(--text); max-width: 720px; margin: 0 auto; line-height: 1.35;
}
.footerGrid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.footer-about { color: var(--text-muted); line-height: 1.7; font-size: 0.95rem; margin: 0 0 1rem; }
.footer-contact { display: block; color: var(--text-2); text-decoration: none; font-size: 0.93rem; line-height: 1.9; }
.footer-contact:hover { color: var(--accent); }
.footer-seo {
  margin-top: 2.5rem; padding: 1.75rem 2rem;
  border: 1px solid var(--border);
  border-top: 2px solid var(--border-accent);
  border-radius: var(--radius);
  background:
    radial-gradient(600px 180px at 0% 0%, var(--accent-soft), transparent 70%),
    var(--surface);
}
.footer-seo__label {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent); margin: 0 0 0.6rem;
}
.footer-seo__text { color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; max-width: 860px; margin: 0; }
@media (max-width: 900px) { .footerGrid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 640px) {
  .footerGrid { grid-template-columns: 1fr !important; }
  .footer-seo { padding: 1.4rem 1.25rem; }
  .hero__actions, .cta-panel__actions { width: 100%; }
  .hero__actions .btn, .cta-panel__actions .btn { flex: 1 1 100%; }
  .section-head { text-align: center; }
}

/* =============================================================
   VISTA: CLIENT PORTAL (/client/*)
   Antes esta vista tenía su propio micro-framework aislado (clases
   cp-* con colores hardcodeados en rgba(), sin usar --accent/--gold/
   --card del resto del sitio) -- reconstruido 2026-08-27 para que
   se vea como el resto del sitio, no como una vista aparte.
   ============================================================= */
.client-nav {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 1.5rem 0 2rem; padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.client-nav a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1rem; border-radius: var(--radius-pill);
  font-size: 0.88rem; font-weight: 600;
  color: var(--text-2); border: 1px solid transparent;
  text-decoration: none;
}
.client-nav a:hover { color: var(--text); border-color: var(--border-strong); }
.client-nav a.is-active { color: var(--accent-ink); background: var(--accent-grad); }
.client-nav__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.1rem; height: 1.1rem; padding: 0 0.3rem;
  border-radius: var(--radius-pill); font-size: 0.7rem; font-weight: 700;
  background: var(--danger); color: #fff;
}

.client-alert {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  padding: 1rem 1.25rem; border-radius: var(--radius);
  border: 1px solid var(--border-accent); background: var(--accent-soft);
  margin-bottom: 1.5rem;
}
.client-alert--urgent { border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.1); }
.client-alert p { margin: 0; color: var(--text-2); flex: 1 1 260px; }

.client-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.75rem; }
@media (max-width: 900px) { .client-stat-grid { grid-template-columns: repeat(2, 1fr); } }
.client-stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.25rem;
}
.client-stat__label {
  font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 0.4rem;
}
.client-stat__value { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text); }

.tenant-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.4rem 1.5rem; margin-bottom: 1.25rem;
}
.tenant-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; }
.tenant-card__domain { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--text); text-decoration: none; }
.tenant-card__domain:hover { color: var(--accent); }
.tenant-card__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 1.5rem; }
@media (max-width: 720px) { .tenant-card__grid { grid-template-columns: 1fr 1fr; } }
.tenant-card__item-label { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 0.2rem; }
.tenant-card__item-value { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.tenant-card__features { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; }
.tenant-card__feature {
  font-size: 0.76rem; font-weight: 600; padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent);
}

.status-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 0.4rem; }
.status-dot--ok { background: var(--success); }
.status-dot--warn { background: var(--warning); }
.status-dot--urgent, .status-dot--expired { background: var(--danger); }
.status-dot--none { background: var(--text-muted); }

.client-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.client-table th { text-align: left; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
.client-table td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--border); color: var(--text-2); }
.client-table tr:last-child td { border-bottom: none; }