:root { --brand-500: 236 58 58; --brand-600: 225 29 72; }
html{scroll-behavior:smooth}
::selection{background:rgba(var(--brand-500),.25);color:#fff}
.container-7xl{max-width:80rem;margin:0 auto;padding:0 1rem}
@media(min-width:640px){.container-7xl{padding:0 1.5rem}}
@media(min-width:1024px){.container-7xl{padding:0 2rem}}

/* Theme toggle simple */
body[data-theme="light"]{background:#0b0b0d; color:#f8fafc}
body[data-theme="light"] .nav-link{color:#0ea5e9}

/* Header */
.site-header{position:sticky;top:0;z-index:40;background:rgba(2,6,23,.7);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid rgba(255,255,255,.05)}
.nav-link{color:#cbd5e1}
.nav-link:hover{color:#ec3a3a}

/* Mobile drawer */
.mobile-nav{border-top:1px solid rgba(255,255,255,.06);background:rgba(2,6,23,.9);backdrop-filter: blur(6px)}
.mobile-nav-content{padding:0.75rem 1rem;display:flex;flex-direction:column;gap:0.5rem}
.mobile-link{padding:0.5rem 0;color:#cbd5e1}
.mobile-link:hover{color:#ec3a3a}
.mobile-actions{display:flex;flex-direction:column;gap:0.5rem;margin-top:0.25rem}

/* Hero */

.hero {
  position: relative;
  overflow: hidden;
  background: url("../hero.png") center/cover no-repeat;
}
.video-fade-in {
  opacity: 1 !important;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(2, 6, 23, 0.9) 0%, rgba(2, 6, 23, 0.95) 100%);
  z-index: 0;
}

.hero > .container-7xl {
  position: relative;
  z-index: 1;
}

.hero-title {
  font-weight: 800;
  line-height: 1.1;
  font-size: 2.25rem;
}
@media (min-width: 768px) {
  .hero-title {
    font-size: 3.75rem;
  }
}


/* Cards/Lists */
.card{padding:1.5rem;border-radius:1rem;border:1px solid rgba(255,255,255,.1);background:rgba(15,23,42,.6);transition:background .2s ease, transform .2s ease}
.card:hover{background:rgba(15,23,42,.8);transform:translateY(-2px)}
.card-title{font-weight:700;margin-top:.25rem}
.card-copy{font-size:.95rem;color:#94a3b8;margin-top:.25rem}
.list{margin-top:.75rem;color:#cbd5e1}
.list li{padding-left:1.25rem;position:relative;margin:.25rem 0}
.list li:before{content:"✔";position:absolute;left:0;top:0;color:rgb(var(--brand-500))}

/* Botones */
.btn{display:inline-block;padding:.75rem 1.25rem;border-radius:.75rem;transition:all .15s ease}
.btn-primary{background:rgb(var(--brand-600));box-shadow:0 10px 25px -10px rgba(0,0,0,.35)}
.btn-primary:hover{background:rgb(var(--brand-500))}
.btn-outline{border:1px solid rgba(255,255,255,.15)}
.btn-outline:hover{border-color:rgba(255,255,255,.3)}
.badge-ghost{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;padding:.25rem .75rem;border-radius:9999px;border:1px solid rgba(255,255,255,.15);color:#cbd5e1}

/* Secciones */
.section-title{font-size:1.875rem;font-weight:800}
@media(min-width:768px){.section-title{font-size:2.25rem}}
.section-sub{color:#94a3b8;max-width:42rem;margin:.5rem auto 0}

/* Steps */
.steps-grid{display:grid;gap:1rem;margin-top:2rem}
@media(min-width:768px){.steps-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step{border:1px solid rgba(255,255,255,.1);border-radius:1rem;background:rgba(15,23,42,.6);padding:1.25rem}
.step-icon{width:40px;height:40px;border-radius:.75rem;display:grid;place-items:center;background:rgba(var(--brand-600),.2);color:#fecaca;font-weight:800;margin-bottom:.5rem}

/* Pricing */
.pricing-grid{display:grid;gap:1.5rem;margin-top:2.5rem}
@media(min-width:768px){.pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pricing-card{position:relative;border-radius:1rem;border:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,#0f172a,#1f2937);padding:1.25rem 1.25rem 1rem;display:flex;flex-direction:column;gap:1rem}
.pricing-card .features{list-style:none;padding:0;margin:0 0 1rem 0;color:#cbd5e1}
.pricing-card .features li{padding-left:1.25rem;position:relative;margin:.25rem 0}
.pricing-card .features li:before{content:"✔";position:absolute;left:0;top:0;color:rgb(var(--brand-500))}
.pricing-card .price{font-size:2rem;font-weight:800}
.pricing-card .price span{font-size:.9rem;font-weight:500;color:#94a3b8;margin-left:.25rem}
.pricing-card .pricing-head h3{font-size:1.25rem;font-weight:700}
.pricing-card.featured{border-color:rgba(var(--brand-600),.4);box-shadow:0 20px 60px -30px rgba(225,29,72,.6)}
.ribbon{position:absolute;top:14px;right:-6px;background:rgb(var(--brand-600));color:white;font-size:.7rem;font-weight:700;padding:.35rem .6rem;border-top-left-radius:.5rem;border-bottom-left-radius:.5rem;letter-spacing:.02em}

/* Comparativa */
.compare-wrap{margin-top:2.5rem}
.compare-title{font-weight:800;margin-bottom:.75rem}
.table-scroll{overflow:auto;border:1px solid rgba(255,255,255,.08);border-radius:.75rem}
.compare-table{width:100%;border-collapse:separate;border-spacing:0}
.compare-table thead th{position:sticky;top:0;background:#0f172a;font-weight:700;text-align:left;padding:.75rem;border-bottom:1px solid rgba(255,255,255,.08)}
.compare-table tbody td{padding:.75rem;border-bottom:1px solid rgba(255,255,255,.06)}
.compare-table td:nth-child(2),.compare-table td:nth-child(3),.compare-table td:nth-child(4){text-align:center}
.compare-table tbody tr:last-child td{border-bottom:none}

/* FAQ */
.faq-item{border-bottom:1px solid rgba(255,255,255,.06);padding:1rem 0}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none}
.faq-item summary span{font-weight:600}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-item p{color:#94a3b8;margin-top:.5rem}

/* Animaciones sutiles */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:translateY(0)}
/* Animación suave del logo */
@keyframes fadein {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fadein {
  animation: fadein 1s ease-out forwards;
}
.hero img.animate-fadein {
  filter: drop-shadow(0 0 10px rgba(236, 58, 58, 0.4));
}

.hero {
  animation: fade-bg 1.5s ease-in-out forwards;
}

@keyframes fade-bg {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}

/* Sección Cómo funciona - versión mejorada */
.steps-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}
@media (min-width: 768px) {
  .steps-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.step {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.25rem;
  background: rgba(15, 23, 42, 0.7);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.step:hover {
  background: rgba(15, 23, 42, 0.9);
  box-shadow: 0 10px 25px -10px rgba(236, 58, 58, 0.25);
}

.step-icon-new {
  width: 70px;
  height: 70px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(var(--brand-500)), rgb(var(--brand-600)));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  box-shadow: 0 4px 15px rgba(236, 58, 58, 0.4);
  transition: transform 0.3s ease;
}
.step:hover .step-icon-new {
  transform: rotate(5deg) scale(1.05);
}

.step-title {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #f1f5f9;
}

.step-text {
  color: #94a3b8;
  font-size: 0.95rem;
  line-height: 1.5;
}
/* Seguridad y transparencia */
.security-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(var(--brand-500)), rgb(var(--brand-600)));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.2rem;
  box-shadow: 0 4px 20px rgba(236, 58, 58, 0.4);
  transition: transform 0.3s ease;
}
.card:hover .security-icon {
  transform: scale(1.1) rotate(5deg);
}

.card-glow {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(236, 58, 58, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}
.card:hover .card-glow {
  opacity: 1;
}

/* ====== Patch de compatibilidad para dashboard ====== */

/* Fondo suave tipo landing */
.bg-fade {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(70rem 35rem at 20% -10%, rgba(236,58,58,.15), transparent 60%),
    radial-gradient(60rem 30rem at 120% 10%, rgba(225,29,72,.12), transparent 60%),
    linear-gradient(180deg, rgba(2,6,23,.90), rgba(2,6,23,1) 60%);
  filter: saturate(1.05);
}

/* Equivalentes a las clases utilizadas previamente */
.card-surface { padding:1.5rem; border-radius:1rem; border:1px solid rgba(255,255,255,.1); background:rgba(15,23,42,.6); transition:background .2s ease, transform .2s ease; }
.card-surface:hover{ background:rgba(15,23,42,.8); transform: translateY(-2px); }

.card-elevated { padding:1.5rem; border-radius:1rem; border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg,#0f172a,#1f2937);
  box-shadow: 0 20px 60px -30px rgba(0,0,0,.45);
}

.grad-red { 
  background-image: linear-gradient(90deg, rgb(var(--brand-500)), rgb(var(--brand-600)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Grids rápidas para 3 y 2 columnas */
.cards-3 { display:grid; gap:2rem; }
@media (min-width: 768px){ .cards-3{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

.cards-2 { display:grid; gap:2rem; }
@media (min-width: 768px){ .cards-2{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Tipos */
.h1 { font-weight: 800; line-height: 1.1; font-size: 2rem; }
@media (min-width: 768px){ .h1{ font-size: 2.75rem; } }
.h2 { font-weight: 700; font-size: 1.25rem; }
.muted { color:#94a3b8; }

/* Barra superior */
.topbar { position:sticky; top:0; z-index:30; background:rgba(2,6,23,.7); backdrop-filter: blur(8px); border-bottom:1px solid rgba(255,255,255,.08); }

/* Espaciados utilitarios mínimos */
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.py-4{padding-top:1rem;padding-bottom:1rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.center{text-align:center}
.flex{display:flex}.items-center{align-items:center}.gap-3{gap:.75rem}.gap-6{gap:1.5rem}.justify-between{justify-content:space-between}

/* ===== Dashboard layout ===== */
.layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh}
@media(max-width: 1024px){.layout{grid-template-columns:1fr}}
.sidebar{display:flex;flex-direction:column;gap:1.25rem;padding:1.25rem;border-right:1px solid rgba(255,255,255,.08);background:rgba(15,23,42,.6)}
@media(max-width: 1024px){.sidebar{position:sticky;top:0;z-index:25;backdrop-filter:blur(8px)}}
.sidebar-brand{display:flex;align-items:center;gap:.75rem}
.sidebar-logo{height:34px;width:auto;border-radius:.5rem}
.brand-name{font-weight:700}
.sidebar-nav{display:flex;flex-direction:column;margin-top:.5rem}
.nav-item{display:flex;align-items:center;gap:.5rem;padding:.55rem .5rem;border-radius:.6rem;color:#cbd5e1;border:1px solid transparent}
.nav-item .dot{width:6px;height:6px;border-radius:9999px;background:#64748b}
.nav-item:hover{color:#fff;border-color:rgba(255,255,255,.1);background:rgba(2,6,23,.4)}
.nav-item.active{border-color:rgba(255,255,255,.15);background:rgba(2,6,23,.55)}
.nav-item.admin{color:#fecaca}
.sidebar-footer{margin-top:auto}

.content{min-width:0}

/* ===== Stats ===== */
.stat-card{border:1px solid rgba(255,255,255,.1);border-radius:1rem;background:linear-gradient(135deg,#0f172a,#1f2937);padding:1.25rem 1.25rem 1rem}
.stat-kpi{font-weight:800;font-size:2rem}
.stat-label{color:#e2e8f0;margin-top:.25rem}
.stat-foot{margin-top:.4rem;font-size:.85rem}

/* ===== Tabla ===== */
.table{width:100%;border-collapse:separate;border-spacing:0}
.table thead th{background:#0f172a;text-align:left;font-weight:700;padding:.65rem;border-bottom:1px solid rgba(255,255,255,.08)}
.table tbody td{padding:.65rem;border-bottom:1px solid rgba(255,255,255,.06)}
.table tbody tr:last-child td{border-bottom:none}

/* Utilidad mínima */
.w-full{width:100%}
/* ========= BASE / RESET PARA TODAS LAS VISTAS ========= */
html,body{height:100%}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  color:#e2e8f0;                /* texto principal */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Enlaces (por defecto salían azules y subrayados) */
a{color:#cbd5e1;text-decoration:none;transition:color .15s ease}
a:hover{color:rgb(var(--brand-500))}

/* Titulares coherentes en todo el sitio */
h1,h2,h3,h4{margin:0 0 .4rem 0;font-weight:800;line-height:1.15}
h1{font-size:2rem}
h2{font-size:1.35rem}
h3{font-size:1.1rem}
@media(min-width:768px){
  h1{font-size:2.75rem}
  h2{font-size:1.5rem}
}

/* Sidebar: quita subrayado y mejora contraste */
.sidebar .nav-item{ text-decoration:none; }
.sidebar .nav-item.active{ color:#fff; }

/* Botones dentro de enlaces (evita subrayado) */
.btn, .btn-outline, .btn-primary{ text-decoration:none; }

/* Tablas: tipografía y contraste */
.table th, .table td{ font-size:.95rem; }
.table thead th{ color:#e5e7eb; }
.table tbody td{ color:#cbd5e1; }

/* Pequeños ajustes de cards para contraste */
.card-surface, .card-elevated { color:#e5e7eb; }
.card-copy, .muted { color:#94a3b8; }

/* Alinear logo de la topbar y sidebar consistente */
.h-8{height:32px;width:auto}
/* --- Overrides de precio para mantener el número grande --- */
.pricing-card .price {
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;
  /* tu tamaño grande ya existente aquí seguirá aplicando */
}

.pricing-card .price .amount {
  font-size: inherit;       /* mantiene el tamaño grande del contenedor */
  font-weight: inherit;     /* conserva el peso fuerte */
  line-height: 1;
  letter-spacing: inherit;
}

.pricing-card .price .unit {
  font-size: .875rem;       /* solo la unidad es más pequeña */
  opacity: .7;
}

/* Por si existe una regla previa genérica que reduce todos los spans dentro de .price */
.pricing-card .price > span { font-size: inherit; }
.pricing-card .price .unit { font-size: .875rem; }  /* re-define la unidad */