/* ============================================================
DARA System — Tema portal con SIDEBAR premium (CSS propio)
Las variables --dara-* las inyecta el addon DARA Theme Manager.
Layout: barra lateral izquierda + topbar + contenido. Responsive.
============================================================ */
@font-face{font-family:'Inter';src:url('fonts/Inter.ttf') format('truetype-variations'),url('fonts/Inter.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Oswald';src:url('fonts/Oswald.ttf') format('truetype-variations'),url('fonts/Oswald.ttf') format('truetype');font-weight:200 700;font-style:normal;font-display:swap}
:root{
--dara-gold:#be9f41;--dara-gold-bright:#db9500;--dara-gold-deep:#a97518;--dara-gold-soft:#f3ecd5;
--dara-secondary:#6c757d;--dara-ink:#0f172a;--dara-ink-soft:#64748b;--dara-link:#a97518;
--dara-grad:linear-gradient(135deg,#db9500,#a97518);--dara-success:#1f9d57;
--dara-bg:#f4f6fb;--dara-surface:#ffffff;--dara-border:#e8ecf3;--dara-radius:14px;
--dara-sb:264px;
--dara-font-head:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--dara-font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--dara-logo-h:40px;
--dara-shadow:0 1px 2px rgba(16,24,40,.04);
--dara-shadow-lg:0 6px 20px -8px rgba(16,24,40,.14);
--dara-shadow-hover:0 12px 28px -10px rgba(16,24,40,.18);
}
*{box-sizing:border-box}
body.dara-portal{margin:0;background:var(--dara-bg)!important;color:var(--dara-ink);font-family:var(--dara-font-body);font-size:14px;-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
.dara-portal h1,.dara-portal h2,.dara-portal h3,.dara-portal h4,.dara-portal h5{font-family:var(--dara-font-head);font-weight:700;letter-spacing:-.02em;color:var(--dara-ink)}
/* Títulos que son enlaces (anuncios, KB): heredan el color del encabezado, oro solo al hover */
.dara-portal h1 a,.dara-portal h2 a,.dara-portal h3 a,.dara-portal h4 a,.dara-portal .card-title a,.dara-portal .announcement a:first-child{color:inherit;transition:color .15s}
.dara-portal h1 a:hover,.dara-portal h2 a:hover,.dara-portal h3 a:hover,.dara-portal h4 a:hover,.dara-portal .card-title a:hover{color:var(--dara-gold-deep)}
html.dara-dark .dara-portal h1 a:hover,html.dara-dark .dara-portal h2 a:hover,html.dara-dark .dara-portal h3 a:hover{color:var(--dara-gold-bright)}
.dara-portal a{color:var(--dara-link);text-decoration:none}
.dara-portal a:hover{color:var(--dara-gold-bright)}
/* Nav/topbar/footer: texto neutro, oro SOLO en activo/hover (sube especificidad sobre .dara-portal a) */
.dara-portal .dara-sidebar a,.dara-portal .dara-sb-link,.dara-portal .dara-topbar a,.dara-portal .dara-tb-btn,.dara-portal .dara-foot-links a{color:var(--dara-ink-soft)}
.dara-portal .dara-sidebar a:hover,.dara-portal .dara-sb-link:hover,.dara-portal .dara-topbar a:hover,.dara-portal .dara-tb-btn:hover,.dara-portal .dara-foot-links a:hover{color:var(--dara-gold-deep)}
.dara-portal .dara-sb-link.active,.dara-portal .dara-sb-link.active span{color:var(--dara-gold-deep)}
.dara-portal .dara-tb-login{color:#fff!important}
.dara-portal ::selection{background:color-mix(in srgb,var(--dara-gold) 26%,transparent)}
/* ===== SHELL ===== */
.dara-shell{display:flex;min-height:100vh}
/* ===== SIDEBAR ===== */
.dara-sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--dara-sb);background:var(--dara-surface);
border-right:1px solid var(--dara-border);display:flex;flex-direction:column;z-index:60;overflow-y:auto;transition:transform .28s cubic-bezier(.16,1,.3,1)}
.dara-sb-brand{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 14px;border-bottom:1px solid var(--dara-border);margin-bottom:8px}
.dara-sb-brand img{max-height:var(--dara-logo-h);width:auto}
.dara-sb-brandtext{font-family:var(--dara-font-head);font-weight:800;font-size:18px;color:var(--dara-ink);letter-spacing:-.02em}
.dara-sb-close{display:none;background:none;border:0;color:var(--dara-ink-soft);font-size:18px;cursor:pointer}
.dara-sb-nav{flex:1;padding:6px 12px}
.dara-sb-link{display:flex;align-items:center;gap:12px;width:100%;padding:10px 14px;margin:2px 0;border-radius:10px;
color:var(--dara-ink-soft);font-weight:500;font-size:13.5px;background:none;border:0;cursor:pointer;text-align:left;transition:all .15s;position:relative}
.dara-sb-link>i:first-child{width:20px;text-align:center;font-size:15px;flex:0 0 auto;opacity:.55}
.dara-sb-link.fa-circle,.dara-sb-link>i.fa-circle{font-size:7px}
.dara-sb-link:hover>i:first-child,.dara-sb-link.active>i:first-child{opacity:1}
.dara-sb-link span{flex:1}
.dara-sb-link:hover{background:color-mix(in srgb,var(--dara-gold) 9%,var(--dara-surface));color:var(--dara-gold-deep);text-decoration:none}
.dara-sb-link.active{background:color-mix(in srgb,var(--dara-gold) 13%,var(--dara-surface));color:var(--dara-gold-deep);font-weight:600}
.dara-sb-link.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--dara-grad)}
.dara-sb-badge{background:var(--dara-grad);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px}
.dara-sb-caret{font-size:11px;transition:transform .2s;color:var(--dara-ink-soft)}
.dara-sb-group.open .dara-sb-caret{transform:rotate(180deg)}
.dara-sb-sub{max-height:0;overflow:hidden;transition:max-height .28s ease;padding-left:30px}
.dara-sb-group.open .dara-sb-sub{max-height:600px}
.dara-sb-sublink{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:8px;color:var(--dara-ink-soft);font-size:13px;margin:1px 0}
.dara-sb-sublink:hover{color:var(--dara-gold-deep);background:color-mix(in srgb,var(--dara-gold) 7%,var(--dara-surface));text-decoration:none}
.dara-sb-sublink.active{color:var(--dara-gold-deep);font-weight:600}
.dara-sb-foot{padding:12px;border-top:1px solid var(--dara-border)}
.dara-sb-overlay{display:none;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:55;backdrop-filter:blur(2px)}
/* ===== MAIN ===== */
.dara-main{flex:1;margin-left:var(--dara-sb);display:flex;flex-direction:column;min-width:0}
.dara-topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;padding:12px 26px;
background:color-mix(in srgb,var(--dara-surface) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--dara-border)}
.dara-burger{display:none;background:none;border:0;font-size:20px;color:var(--dara-ink);cursor:pointer}
.dara-search{flex:1;max-width:440px;position:relative}
.dara-search i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--dara-ink-soft);font-size:13px}
.dara-search input{width:100%;padding:9px 14px 9px 38px;border:1px solid var(--dara-border);border-radius:30px;background:var(--dara-bg);font-size:13.5px;color:var(--dara-ink);transition:all .15s}
.dara-search input:focus{outline:none;border-color:var(--dara-gold);background:var(--dara-surface);box-shadow:0 0 0 4px color-mix(in srgb,var(--dara-gold) 16%,transparent)}
.dara-topbar-right{display:flex;align-items:center;gap:8px;margin-left:auto}
.dara-tb-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;color:var(--dara-ink-soft);font-weight:600;font-size:13px;position:relative;transition:all .15s}
.dara-tb-btn:hover{background:var(--dara-bg);color:var(--dara-gold-deep);text-decoration:none}
.dara-tb-login{background:var(--dara-grad);color:#fff!important;box-shadow:0 8px 18px -8px color-mix(in srgb,var(--dara-gold-bright) 70%,transparent)}
.dara-tb-badge{position:absolute;top:1px;right:2px;background:var(--dara-grad);color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:20px;display:grid;place-items:center;padding:0 4px}
.dara-content{flex:1;padding:26px}
.dara-content-inner{max-width:1240px;margin:0 auto}
.master-breadcrumb,.dara-content .breadcrumb{background:none;padding:0 0 14px;margin:0;font-size:12.5px}
.dara-content .breadcrumb-item.active{color:var(--dara-gold-deep)}
/* ===== FOOTER ===== */
.dara-foot{border-top:1px solid var(--dara-border);background:var(--dara-surface);margin-top:auto}
.dara-foot-inner{max-width:1240px;margin:0 auto;padding:22px 26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.dara-foot-brand img{max-height:30px}.dara-foot-brand strong{font-family:var(--dara-font-head)}
.dara-foot-links{display:flex;gap:18px;flex-wrap:wrap}
.dara-foot-links a{color:var(--dara-ink-soft);font-size:13px}.dara-foot-links a:hover{color:var(--dara-gold-deep)}
.dara-foot-copy{margin-left:auto;color:var(--dara-ink-soft);font-size:12px}
/* ===== COMPONENTES (estilo gold premium sobre Bootstrap de twenty-one) ===== */
.dara-portal .btn{border-radius:10px;font-weight:600;letter-spacing:-.01em;transition:all .15s}
.dara-portal .btn-primary{background:var(--dara-grad);border:0;color:#fff;box-shadow:0 8px 18px -10px color-mix(in srgb,var(--dara-gold-bright) 75%,transparent)}
.dara-portal .btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px);color:#fff}
.dara-portal .btn-outline-primary{color:var(--dara-gold-deep);border:1.5px solid var(--dara-gold)}
.dara-portal .btn-outline-primary:hover{background:var(--dara-grad);border-color:transparent;color:#fff}
/* DARA System usa el oro para acciones primarias: botones success → marca (los estados/badges siguen verdes) */
.dara-portal .btn-success,.dara-portal .btn-success:focus{background:var(--dara-grad)!important;border:0!important;color:#fff!important;box-shadow:0 8px 18px -10px color-mix(in srgb,var(--dara-gold-bright) 75%,transparent)}
.dara-portal .btn-success:hover{filter:brightness(1.06);color:#fff!important}
.dara-portal .btn-outline-success{color:var(--dara-gold-deep)!important;border:1.5px solid var(--dara-gold)!important;background:transparent!important}
.dara-portal .btn-outline-success:hover{background:var(--dara-grad)!important;border-color:transparent!important;color:#fff!important}
.dara-portal .card,.dara-portal .panel{border:1px solid var(--dara-border);border-radius:var(--dara-radius);background:var(--dara-surface);box-shadow:var(--dara-shadow);transition:box-shadow .2s,transform .2s}
.dara-portal .card:hover{box-shadow:var(--dara-shadow-lg);transform:translateY(-3px)}
.dara-portal .card .card-header,.dara-portal .panel .panel-heading{background:var(--dara-surface);border-bottom:1px solid var(--dara-border);font-family:var(--dara-font-head);font-weight:700;border-radius:var(--dara-radius) var(--dara-radius) 0 0}
.dara-portal .text-primary{color:var(--dara-gold-deep)!important}
.dara-portal .bg-primary{background:var(--dara-grad)!important}
.dara-portal .badge-primary,.dara-portal .label-primary{background:var(--dara-grad);color:#fff}
.dara-portal .progress-bar{background:var(--dara-grad)}
.dara-portal .form-control{border-radius:10px;border-color:#dfe5ee}
.dara-portal .form-control:focus{border-color:var(--dara-gold);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--dara-gold) 18%,transparent)}
.dara-portal .table thead th{font-family:var(--dara-font-head);color:var(--dara-ink-soft);font-size:12px;text-transform:uppercase;letter-spacing:.03em;border-bottom-width:1px}
.dara-portal .table-hover tbody tr:hover{background:color-mix(in srgb,var(--dara-gold) 5%,#fff)}
.dara-portal .alert{border-radius:12px;border:0}
.dara-portal .alert-primary{background:var(--dara-gold-soft);color:#6b4a10}
.dara-portal .pagination .page-item.active .page-link{background:var(--dara-grad);border-color:transparent}
.dara-portal .nav-tabs .nav-link.active{color:var(--dara-gold-deep);border-bottom-color:var(--dara-gold)}
/* ===== HOMEPAGE ===== */
.home-domain-search,.home-domain-search.bg-white{background:linear-gradient(135deg,#161c28,#2a3346)!important;border-radius:18px;position:relative;overflow:hidden;color:#e7ebf3;margin-bottom:8px;box-shadow:var(--dara-shadow-lg)}
.home-domain-search::after{content:"";position:absolute;top:-45%;right:-6%;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--dara-gold) 32%,transparent),transparent 65%)}
.home-domain-search .container{position:relative;z-index:1}
.home-domain-search h2{color:#fff}
.home-domain-search .form-control{border:0;border-radius:10px}
html.dara-dark .home-domain-search input,html.dara-dark .home-domain-search textarea,html.dara-dark .home-domain-search .form-control,html.dara-dark .home-domain-search .input-group{background:#161c2c!important;color:#f3f5fa!important;border-color:var(--dara-border)!important}
html.dara-dark .home-domain-search input::placeholder,html.dara-dark .home-domain-search textarea::placeholder{color:#8a93a8!important}
html.dara-dark .home-domain-search .input-group-text,html.dara-dark .home-domain-search .btn-default{background:#1f2740!important;color:#f3f5fa!important;border-color:var(--dara-border)!important}
html.dara-dark .home-domain-search .input-group-wrapper{background:#161c2c!important;border:1px solid var(--dara-border)!important;border-radius:12px}
/* (modo claro) que el wrapper combine con el hero oscuro */
.home-domain-search .input-group-wrapper{border-radius:12px}
.jumbotron{background:linear-gradient(135deg,#161c28,#2a3346);color:#fff;border:0;border-radius:18px}
.card-columns.home .card,#main-body .card{border:1px solid var(--dara-border);position:relative;transition:border-color .18s,box-shadow .2s,transform .2s}
.card-columns.home .card:hover,#main-body .card:hover{border-color:var(--dara-gold);box-shadow:var(--dara-shadow-hover);transform:translateY(-4px)}
#main-body h2.text-center{font-weight:800;margin:2rem 0 1.4rem}
.action-icon-btns [class*=col-] > a{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem .8rem;background:var(--dara-surface);border:1px solid var(--dara-border);border-radius:var(--dara-radius);box-shadow:var(--dara-shadow);color:var(--dara-ink);font-weight:600;font-size:.92rem;transition:all .15s;height:100%}
.action-icon-btns [class*=col-] > a:hover{transform:translateY(-4px);box-shadow:var(--dara-shadow-lg);color:var(--dara-gold-deep);text-decoration:none}
.action-icon-btns .ico-container i{font-size:1.9rem;color:var(--dara-gold-deep)}
/* dashboard tiles (twenty-one) */
.tiles .tile{display:grid;grid-template-columns:auto 1fr;column-gap:15px;align-items:center;padding:18px 20px;background:var(--dara-surface);border:1px solid var(--dara-border);border-radius:16px;box-shadow:var(--dara-shadow);text-align:left;position:relative;overflow:hidden;transition:transform .26s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .26s;color:var(--dara-ink)}
.tiles .tile:hover{transform:translateY(-4px);border-color:var(--dara-gold);box-shadow:var(--dara-shadow-hover);color:var(--dara-ink);text-decoration:none}
.tiles .tile i{grid-row:1/3;font-size:20px;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin:0;background:color-mix(in srgb,var(--dara-gold) 14%,transparent);color:var(--dara-gold-deep);flex:0 0 auto;transition:background .26s,color .26s,transform .26s}
html.dara-dark .tiles .tile i{color:var(--dara-gold-bright);background:color-mix(in srgb,var(--dara-gold) 18%,transparent)}
.tiles .tile:hover i{background:var(--dara-grad);color:#fff;transform:scale(1.06) rotate(-3deg)}
.tiles .tile .stat{font-family:var(--dara-font-head);font-size:1.85rem;font-weight:800;line-height:1;align-self:end;color:var(--dara-ink)}
.tiles .tile .title{font-size:.72rem;color:var(--dara-ink-soft);text-transform:uppercase;letter-spacing:.05em;margin-top:3px;align-self:start;font-weight:600}
.tiles .tile .highlight{display:none}
/* entrada sutil (siempre termina visible; no gatea contenido) */
@keyframes daraIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.tiles .tile,.dara-pg-card{animation:daraIn .5s cubic-bezier(.2,.7,.2,1) both}
.tiles>[class*=col-]:nth-child(2) .tile{animation-delay:.05s}
.tiles>[class*=col-]:nth-child(3) .tile{animation-delay:.1s}
.tiles>[class*=col-]:nth-child(4) .tile{animation-delay:.15s}
.dara-pg-grid .dara-pg-card:nth-child(2){animation-delay:.04s}.dara-pg-grid .dara-pg-card:nth-child(3){animation-delay:.08s}
.dara-pg-grid .dara-pg-card:nth-child(4){animation-delay:.12s}.dara-pg-grid .dara-pg-card:nth-child(5){animation-delay:.16s}
.dara-pg-grid .dara-pg-card:nth-child(6){animation-delay:.2s}.dara-pg-grid .dara-pg-card:nth-child(n+7){animation-delay:.24s}
@media(prefers-reduced-motion:reduce){.tiles .tile,.dara-pg-card{animation:none}}
.bg-color-blue{background:#2d6fb3}.bg-color-green{background:var(--dara-success)}.bg-color-red{background:#dc3545}.bg-color-gold{background:var(--dara-grad)}
/* ===== DARK MODE (html.dara-dark, via manager) ===== */
html.dara-dark body.dara-portal{background:var(--dara-bg)}
html.dara-dark .dara-sidebar,html.dara-dark .dara-topbar,html.dara-dark .dara-foot,html.dara-dark .card,html.dara-dark .panel{background:var(--dara-surface);color:var(--dara-ink)}
html.dara-dark .dara-search input{background:#131a28}
html.dara-dark .form-control{background:#131a28;border-color:var(--dara-border);color:var(--dara-ink)}
/* ===== RESPONSIVE ===== */
@media(max-width:991px){
.dara-sidebar{transform:translateX(-100%)}
body.dara-nav-open .dara-sidebar{transform:none}
body.dara-nav-open .dara-sb-overlay{display:block}
.dara-sb-close{display:block}
.dara-main{margin-left:0}
.dara-burger{display:block}
}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:rgba(100,116,139,.35);border-radius:8px}
/* ===== Pulido portada v2 ===== */
.dara-welcome{margin-bottom:1.4rem}
.dara-welcome h1{font-size:1.7rem;margin:0 0 .2rem}
.dara-welcome p{color:var(--dara-ink-soft);margin:0}
.home-domain-search .container{padding:2.4rem 2rem!important}
.home-domain-search h2{font-weight:800;font-size:1.9rem;margin-bottom:1.2rem}
/* tarjetas de producto tipo pricing */
.card-columns.home .card{transition:all .2s}
.card-columns.home .card .card-body{padding:1.8rem 1.4rem}
.card-columns.home .pricing-card-title{font-family:var(--dara-font-head);font-size:1.2rem;font-weight:800;margin-bottom:.3rem}
.card-columns.home .card p{color:var(--dara-ink-soft);font-size:.9rem;min-height:1.2em}
.card-columns.home .card .btn{margin-top:.9rem;border-radius:10px;font-weight:600}
.card-columns.home .card:hover .btn-outline-primary{background:var(--dara-grad);border-color:transparent;color:#fff}
/* "cómo ayudar" más aire */
#main-body h2.text-center,.dara-content-inner h2.text-center{font-family:var(--dara-font-head);font-weight:800;margin:2.4rem 0 1.6rem;font-size:1.5rem}
.action-icon-btns{margin-bottom:1.5rem}
/* ===== Profundidad ambiental (cinematográfico, estilo DARA System) ===== */
.dara-shell{position:relative;z-index:1}
body.dara-portal{position:relative}
body.dara-portal::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background:radial-gradient(1100px 620px at 92% -8%,color-mix(in srgb,var(--dara-gold) 7%,transparent),transparent 55%)}
.dara-main,.dara-content{background:transparent!important}
html.dara-dark body.dara-portal::before{background:
radial-gradient(1100px 680px at 90% -10%,rgba(190,159,65,.13),transparent 55%),
radial-gradient(900px 620px at 4% 112%,rgba(95,120,200,.08),transparent 55%)}
/* ===== Tarjetas de grupo de producto — premium ===== */
.dara-pg-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:18px;column-count:unset!important;-webkit-column-count:unset!important}
.dara-pg-grid .dara-pg-card{margin:0!important}
.dara-pg-card{display:block;text-decoration:none;border:1px solid var(--dara-border);border-radius:16px;background:var(--dara-surface);box-shadow:var(--dara-shadow);transition:transform .28s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .28s;position:relative;overflow:hidden}
.dara-pg-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .28s;background:radial-gradient(420px 180px at 50% 0%,color-mix(in srgb,var(--dara-gold) 12%,transparent),transparent 70%)}
.dara-pg-card:hover{transform:translateY(-6px);border-color:var(--dara-gold);box-shadow:var(--dara-shadow-hover)}
.dara-pg-card:hover::after{opacity:1}
.dara-pg-card .card-body{padding:32px 24px;position:relative;z-index:1}
.dara-pg-ico{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;margin:0 auto 18px;
background:color-mix(in srgb,var(--dara-gold) 14%,transparent);color:var(--dara-gold-deep);font-size:25px;transition:transform .28s cubic-bezier(.2,.7,.2,1),background .28s,color .28s}
html.dara-dark .dara-pg-ico{color:var(--dara-gold-bright);background:color-mix(in srgb,var(--dara-gold) 18%,transparent)}
.dara-pg-card:hover .dara-pg-ico{background:var(--dara-grad);color:#fff;transform:scale(1.06) rotate(-3deg)}
.dara-pg-card .pricing-card-title{font-family:var(--dara-font-head);font-size:1.18rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .4rem;color:var(--dara-ink)}
.dara-pg-card p{color:var(--dara-ink-soft);font-size:.9rem;line-height:1.5;min-height:2.7em;margin:0 0 1.1rem}
.dara-pg-cta{display:inline-flex;align-items:center;gap:7px;color:var(--dara-gold-deep);font-weight:700;font-size:.9rem}
html.dara-dark .dara-pg-cta{color:var(--dara-gold-bright)}
.dara-pg-cta i{transition:transform .22s ease}
.dara-pg-card:hover .dara-pg-cta i{transform:translateX(4px)}
.dara-content-inner h2.text-center{font-family:var(--dara-font-head);font-size:1.75rem;font-weight:800;letter-spacing:-.025em;margin:2.8rem 0 1.9rem}
@media(prefers-reduced-motion:reduce){.dara-pg-card,.dara-pg-ico,.dara-pg-cta i{transition:none}}
/* ===== Secciones marketing (landing profesional) ===== */
.dara-why{margin:3.4rem 0 1rem;text-align:center}
.dara-why>h2{font-family:var(--dara-font-head);font-size:1.9rem;font-weight:800;letter-spacing:-.03em;margin:0 0 .5rem;text-wrap:balance}
.dara-why-sub{color:var(--dara-ink-soft);font-size:1.02rem;max-width:60ch;margin:0 auto 2.4rem}
.dara-why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 30px;text-align:left;max-width:1080px;margin:0 auto}
.dara-feat{padding:8px 6px}
.dara-feat-ico{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;font-size:22px;margin-bottom:14px;
background:color-mix(in srgb,var(--dara-gold) 14%,transparent);color:var(--dara-gold-deep)}
html.dara-dark .dara-feat-ico{color:var(--dara-gold-bright);background:color-mix(in srgb,var(--dara-gold) 16%,transparent)}
.dara-feat h4{font-family:var(--dara-font-head);font-size:1.08rem;font-weight:700;letter-spacing:-.01em;margin:0 0 .35rem;color:var(--dara-ink)}
.dara-feat p{color:var(--dara-ink-soft);font-size:.92rem;line-height:1.55;margin:0}
.dara-trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;padding:22px 18px;margin:2.6rem auto 0;max-width:1000px;
border-top:1px solid var(--dara-border);border-bottom:1px solid var(--dara-border)}
.dara-trust li{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:600;color:var(--dara-ink)}
.dara-trust li i{color:var(--dara-success)}
/* CTA */
.dara-cta{position:relative;margin:3.4rem 0 1rem;border-radius:22px;overflow:hidden;background:linear-gradient(135deg,#161c28,#2a3346);color:#fff;text-align:center}
html.dara-dark .dara-cta{background:linear-gradient(135deg,#0f1420,#1a2235);border:1px solid var(--dara-border)}
.dara-cta-glow{position:absolute;inset:0;pointer-events:none;background:
radial-gradient(600px 280px at 80% -20%,rgba(190,159,65,.30),transparent 60%),
radial-gradient(500px 240px at 10% 120%,rgba(95,120,200,.18),transparent 60%)}
.dara-cta-inner{position:relative;z-index:1;padding:clamp(2.4rem,5vw,3.6rem) 1.5rem}
.dara-cta-inner h2{font-family:var(--dara-font-head);font-size:clamp(1.6rem,3.4vw,2.2rem);font-weight:800;letter-spacing:-.03em;color:#fff;margin:0 0 .6rem;text-wrap:balance}
.dara-cta-inner p{color:#c8cfdd;font-size:1.05rem;max-width:52ch;margin:0 auto 1.6rem}
.dara-cta-btn{padding:.8rem 2rem;font-size:1.05rem;font-weight:700}
.dara-cta-btn i{margin-left:8px;transition:transform .22s}
.dara-cta-btn:hover i{transform:translateX(4px)}
@media(prefers-reduced-motion:reduce){.dara-cta-btn i{transition:none}}
/* ===== Planes con precio real (paridad Hostinger/GoDaddy) ===== */
.dara-plans{margin:1.4rem 0 .5rem;text-align:center}
.dara-plans>h2{font-family:var(--dara-font-head);font-size:1.9rem;font-weight:800;letter-spacing:-.03em;margin:0 0 .5rem}
.dara-plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;max-width:1080px;margin:1.6rem auto 0;align-items:stretch}
.dara-plan{position:relative;display:flex;flex-direction:column;text-align:center;background:var(--dara-surface);border:1px solid var(--dara-border);border-radius:18px;padding:30px 24px;box-shadow:var(--dara-shadow);transition:transform .26s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .26s}
.dara-plan:hover{transform:translateY(-5px);border-color:var(--dara-gold);box-shadow:var(--dara-shadow-hover)}
.dara-plan.is-popular{border-color:var(--dara-gold);box-shadow:0 0 0 1px var(--dara-gold),var(--dara-shadow-lg)}
.dara-plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--dara-grad);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.04em;padding:5px 15px;border-radius:30px;text-transform:uppercase;white-space:nowrap}
.dara-plan-name{font-family:var(--dara-font-head);font-size:1.16rem;font-weight:700;margin:0 0 .4rem;color:var(--dara-ink)}
.dara-plan-price{font-family:var(--dara-font-head);font-size:2.7rem;font-weight:800;line-height:1;color:var(--dara-ink);margin:.2rem 0 1.1rem}
.dara-plan-price .cur{font-size:1.3rem;font-weight:700;vertical-align:super;margin-right:2px;color:var(--dara-gold-deep)}
html.dara-dark .dara-plan-price .cur{color:var(--dara-gold-bright)}
.dara-plan-price .per{font-size:.82rem;font-weight:500;color:var(--dara-ink-soft);letter-spacing:0;margin-left:2px}
.dara-plan-feats{list-style:none;padding:0;margin:0 0 1.5rem;text-align:left;flex:1 0 auto}
.dara-plan-feats li{display:flex;gap:9px;align-items:flex-start;font-size:.9rem;color:var(--dara-ink-soft);padding:8px 0;border-bottom:1px solid var(--dara-border)}
.dara-plan-feats li:last-child{border-bottom:0}
.dara-plan-feats li i{color:var(--dara-success);margin-top:3px;font-size:.78rem;flex:0 0 auto}
.dara-plan-cta{margin-top:auto}
/* ===== Tecnologías ===== */
.dara-tech{text-align:center;margin:2.8rem auto;max-width:1000px;padding:0 1rem}
.dara-tech-label{font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:var(--dara-ink-soft);font-weight:700;margin:0 0 1.1rem}
.dara-tech-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px}
.dara-tech-row span{display:inline-flex;align-items:center;gap:9px;font-size:.95rem;font-weight:600;color:var(--dara-ink)}
.dara-tech-row i{color:var(--dara-gold-deep);font-size:1.05rem}
html.dara-dark .dara-tech-row i{color:var(--dara-gold-bright)}
/* ===== FAQ (acordeón nativo) ===== */
.dara-faq{max-width:760px;margin:3rem auto 1rem;padding:0 1rem}
.dara-faq>h2{font-family:var(--dara-font-head);font-size:1.8rem;font-weight:800;letter-spacing:-.03em;text-align:center;margin:0 0 1.8rem}
.dara-faq-item{border:1px solid var(--dara-border);border-radius:12px;margin-bottom:10px;background:var(--dara-surface);overflow:hidden;transition:border-color .2s}
.dara-faq-item[open]{border-color:color-mix(in srgb,var(--dara-gold) 45%,var(--dara-border))}
.dara-faq-item summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:600;font-size:.98rem;color:var(--dara-ink);display:flex;justify-content:space-between;align-items:center;gap:12px}
.dara-faq-item summary::-webkit-details-marker{display:none}
.dara-faq-item summary i{color:var(--dara-gold-deep);transition:transform .25s ease;font-size:.82rem;flex:0 0 auto}
html.dara-dark .dara-faq-item summary i{color:var(--dara-gold-bright)}
.dara-faq-item[open] summary i{transform:rotate(180deg)}
.dara-faq-item[open] summary{border-bottom:1px solid var(--dara-border)}
.dara-faq-body{padding:14px 18px;color:var(--dara-ink-soft);font-size:.93rem;line-height:1.65}
@media(prefers-reduced-motion:reduce){.dara-faq-item summary i{transition:none}}
/* ===== Checkout / carrito (standard_cart) ===== */
.dara-portal .order-summary{background:var(--dara-surface)!important;color:var(--dara-ink)!important;border:1px solid var(--dara-border)!important;border-radius:16px;overflow:hidden;box-shadow:var(--dara-shadow)}
.dara-portal .order-summary h2{background:var(--dara-grad)!important;color:#fff!important;margin:0;padding:16px 20px;font-family:var(--dara-font-head);font-size:1.2rem}
.dara-portal .order-summary .summary-container,.dara-portal .summary-container{padding:14px 20px;background:var(--dara-surface)!important;color:var(--dara-ink)!important}
.dara-portal .view-cart-items-header{background:var(--dara-grad)!important;color:#fff!important;border:0!important;border-radius:10px 10px 0 0}
.dara-portal .order-summary .total{border-top:1px solid var(--dara-border);color:var(--dara-ink);font-weight:800}
.dara-portal .order-summary .promotion,.dara-portal .order-summary .cycle{color:var(--dara-ink-soft)}
.dara-portal .order-summary .btn{margin-top:8px}
/* tabla de items + cabeceras turquesa (.bg-info) → marca */
.dara-portal .bg-info,.dara-portal .cart-items thead,.dara-portal .table-cart thead th,.dara-portal .clientareacarttable thead th{background:var(--dara-grad)!important;color:#fff!important;border:0!important}
.dara-portal .cart-items,.dara-portal .checkout-items{background:var(--dara-surface);border:1px solid var(--dara-border);border-radius:var(--dara-radius)}
.dara-portal .checkout-title,.dara-portal h1.font-size-36{font-family:var(--dara-font-head);font-weight:800}
/* selección de pasarela (Tilopay/PayPal): tarjetas seleccionables */
.dara-portal .payment-methods .form-check,.dara-portal #paymentMethods .form-check,.dara-portal .gateways label{border:1px solid var(--dara-border);border-radius:12px;padding:12px 14px;margin:6px 0;transition:border-color .15s,background .15s;display:flex;align-items:center;gap:10px}
.dara-portal .payment-methods .form-check:hover,.dara-portal .gateways label:hover{border-color:var(--dara-gold)}
.dara-portal .payment-methods input:checked~label,.dara-portal .gateways input:checked+label{border-color:var(--dara-gold);background:color-mix(in srgb,var(--dara-gold) 8%,transparent)}
/* ===== Order form (standard_cart): precio legible + CTA con la marca ===== */
.dara-portal .product-pricing .price,.dara-portal .panel-price .price,.dara-portal .panel-price{color:var(--dara-ink)!important;font-weight:800}
.dara-portal .product-pricing .price{font-size:1.6rem}
.dara-portal .product-pricing .cycle,.dara-portal .product-pricing small,.dara-portal .panel-price .cycle{color:var(--dara-ink-soft)!important;font-weight:500}
.dara-portal .btn-order-now,.dara-portal .btn-success.btn-order-now{background:var(--dara-grad)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 8px 18px -10px color-mix(in srgb,var(--dara-gold-bright) 75%,transparent)}
.dara-portal .product{border:1px solid var(--dara-border)!important;border-radius:var(--dara-radius);background:var(--dara-surface)!important;color:var(--dara-ink);box-shadow:var(--dara-shadow);transition:box-shadow .2s,transform .2s}
.dara-portal .product header{background:color-mix(in srgb,var(--dara-ink) 5%,var(--dara-surface))!important;border-bottom:1px solid var(--dara-border)!important;color:var(--dara-ink)!important}
.dara-portal .product header [id$="-name"],.dara-portal .product header span{color:var(--dara-ink)!important;font-weight:700}
.dara-portal .product .available,.dara-portal .product .qty{color:var(--dara-ink-soft)}
.dara-portal .product:hover{box-shadow:var(--dara-shadow-lg);transform:translateY(-3px)}
.dara-portal .product .product-name,.dara-portal .product h3{color:var(--dara-ink)}
/* ===== Columna contextual (sidebar de página) + páginas internas ===== */
.dara-row.has-aside{display:flex;gap:26px;align-items:flex-start}
.dara-aside{width:262px;flex:0 0 auto}
.dara-page{flex:1;min-width:0}
.dara-aside .panel,.dara-aside .card{border:1px solid var(--dara-border);border-radius:var(--dara-radius);box-shadow:var(--dara-shadow);overflow:hidden;margin-bottom:18px}
.dara-aside .panel-heading,.dara-aside .card-header{background:var(--dara-surface);font-family:var(--dara-font-head);font-weight:700;font-size:13px;border-bottom:1px solid var(--dara-border);padding:14px 16px}
.dara-aside .list-group{border:0}
.dara-aside .list-group-item{border:0;border-bottom:1px solid var(--dara-border);padding:11px 16px;font-size:13.5px;color:var(--dara-ink-soft);font-weight:500}
.dara-aside .list-group-item:last-child{border-bottom:0}
.dara-aside .list-group-item:hover{background:color-mix(in srgb,var(--dara-gold) 7%,var(--dara-surface));color:var(--dara-gold-deep)}
.dara-aside .list-group-item.active{background:color-mix(in srgb,var(--dara-gold) 15%,var(--dara-surface));color:var(--dara-gold-deep);font-weight:600;box-shadow:inset 2px 0 0 var(--dara-gold)}
.dara-aside .list-group-item.active i,.dara-aside .list-group-item i{color:var(--dara-gold-deep)}
@media(max-width:991px){.dara-row.has-aside{flex-direction:column}.dara-aside{width:100%}}
/* ===== Page headers / títulos de sección internos ===== */
.dara-page .page-header,.dara-page h1.h3{border:0;margin:.2rem 0 1.2rem;padding:0}
.dara-page .page-header h1{font-size:1.5rem;font-weight:800}
.dara-portal .panel{border-radius:var(--dara-radius)}
.dara-portal .panel-heading{font-family:var(--dara-font-head);font-weight:700}
.dara-portal .table{background:var(--dara-surface);border-radius:var(--dara-radius);overflow:hidden}
.dara-portal .well{background:var(--dara-surface);border:1px solid var(--dara-border);border-radius:var(--dara-radius);box-shadow:var(--dara-shadow)}
/* ============================================================
LOGIN inmersivo — idéntico a DARA System (sistema.bbscom…)
Tokens y patrones portados de preview-login.html (dark).
============================================================ */
/* tokens del login — CLARO por defecto, OSCURO bajo html.dara-dark (toggle como DARA System) */
:root{
--da-bg:#eef1f7;--da-surface:#ffffff;--da-surface-2:#f3f6fb;
--da-line:rgba(16,24,40,.10);--da-line-2:rgba(16,24,40,.18);
--da-ink:#0f172a;--da-ink-2:#475569;--da-ink-3:#8a93a8;
--da-gold:#be9f41;--da-gold-2:#a97518;--da-gold-ink:#ffffff;
--da-grain:rgba(16,24,40,.45);
--da-r:14px;--da-rs:10px;
}
html.dara-dark{
--da-bg:#0a0e17;--da-surface:#111624;--da-surface-2:#161c2c;
--da-line:rgba(255,255,255,.09);--da-line-2:rgba(255,255,255,.16);
--da-ink:#f3f5fa;--da-ink-2:#aab2c5;--da-ink-3:#6b7488;
--da-gold-2:#d9b94e;--da-gold-ink:#1a1500;--da-grain:rgba(255,255,255,.5);
}
/* en login ocultamos el shell y vamos pantalla completa; el toggle SÍ se ve */
body.page-login{background:var(--da-bg)!important}
body.page-login .dara-sidebar,body.page-login .dara-topbar,body.page-login .dara-foot,
body.page-login .dara-sb-overlay,body.page-login .master-breadcrumb{display:none!important}
body.page-login .dara-main{margin-left:0}
body.page-login .dara-content,body.page-login .dara-content-inner{padding:0;max-width:none}
body.page-login .dara-row.has-aside{display:block}
/* botón flotante viejo del addon: reemplazado por el switch segmentado */
#daraDarkToggle{display:none!important}
/* Promos MarketConnect (terceros, marca ajena) ocultos para un look 100% DARA.
Reactivar: borrar esta regla o desactivar el addon en Admin → MarketConnect. */
.dara-portal .mc-promo{display:none!important}
/* ===== Toggle DARA System (píldora sol↔luna deslizante) — port fiel de main.jsx ===== */
.dara-theme-toggle{position:relative;width:62px;height:30px;border-radius:16px;border:0;cursor:pointer;overflow:visible;padding:0;display:inline-block;vertical-align:middle;
background:linear-gradient(180deg,#2E9BF0,#7FC7F4);box-shadow:0 2px 6px rgba(0,0,0,.32);transition:background .5s ease;-webkit-tap-highlight-color:transparent}
html.dara-dark .dara-theme-toggle{background:linear-gradient(180deg,#12151B,#262B34)}
.dtt-clouds{position:absolute;right:5px;bottom:4px;width:36px;height:16px;transition:opacity .45s;opacity:1}
html.dara-dark .dtt-clouds{opacity:0}
.dtt-cloud{position:absolute;border-radius:50%}
.dtt-cloud-a{right:2px;bottom:0;width:16px;height:16px;background:#fff}
.dtt-cloud-b{right:11px;bottom:3px;width:13px;height:13px;background:#EAF4FF}
.dtt-stars{position:absolute;inset:0;transition:opacity .45s;opacity:0}
html.dara-dark .dtt-stars{opacity:1}
.dtt-star{position:absolute;border-radius:50%;background:#fff}
.dtt-star-1{left:12px;top:7px;width:2px;height:2px}
.dtt-star-2{left:24px;top:15px;width:2px;height:2px}
.dtt-star-3{left:16px;top:20px;width:1.5px;height:1.5px}
.dtt-knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
transition:left .5s cubic-bezier(.4,0,.2,1),background .5s,box-shadow .5s;
background:radial-gradient(circle at 35% 35%,#FFF176,#FFD500 60%,#FBC02D);box-shadow:0 0 10px rgba(255,213,0,.7)}
html.dara-dark .dtt-knob{left:35px;background:radial-gradient(circle at 35% 35%,#EDEFF3,#C9CDD4 60%,#A9AFBA);box-shadow:0 0 10px rgba(191,210,255,.7)}
/* barrido circular de transición de tema (View Transitions API) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
/* instancia del login: fija arriba a la derecha */
.dara-auth-toggle{position:fixed;top:18px;right:20px;z-index:6}
@media(prefers-reduced-motion:reduce){.dara-theme-toggle,.dtt-clouds,.dtt-stars,.dtt-knob{transition:none}}
/* switch segmentado viejo (queda por compatibilidad, ya no se usa) */
.dara-theme-switch{display:inline-flex;align-items:center;gap:2px;background:var(--dara-bg);border:1px solid var(--dara-border);border-radius:30px;padding:3px}
.dts-opt{width:30px;height:28px;border:0;background:none;border-radius:30px;color:var(--dara-ink-soft);cursor:pointer;font-size:13px;display:grid;place-items:center;transition:background .15s,color .15s}
.dts-opt:hover{color:var(--dara-ink)}
.dts-opt.active{background:var(--dara-grad);color:#fff;box-shadow:0 4px 10px -4px color-mix(in srgb,var(--dara-gold-bright) 70%,transparent)}
/* instancia del login: fija arriba a la derecha, con tokens del login */
.dara-auth-switch{position:fixed;top:16px;right:18px;z-index:5;background:var(--da-surface);border-color:var(--da-line)}
.dara-auth-switch .dts-opt{color:var(--da-ink-3)}
.dara-auth-switch .dts-opt:hover{color:var(--da-ink)}
.dara-auth-switch .dts-opt.active{background:var(--da-gold);color:var(--da-gold-ink);box-shadow:none}
.dara-auth{position:relative;min-height:100vh;color:var(--da-ink);font-family:var(--dara-font-body)}
/* fondo cósmico: glow + estrellas + piso de grilla 3D (como DARA System) */
.dara-auth-field{position:fixed;inset:0;z-index:0;overflow:hidden;background:radial-gradient(900px 640px at 50% 16%,rgba(190,159,65,.13),transparent 58%),var(--da-bg)}
/* canvas de constelaciones + estrellas fugaces (port fiel de ParticlesBg, 56% sup) */
.dara-auth-canvas{position:absolute;top:0;left:0;width:100%;height:56%;pointer-events:none;z-index:1;
-webkit-mask-image:linear-gradient(to bottom,#000 60%,transparent);mask-image:linear-gradient(to bottom,#000 60%,transparent)}
.dara-auth-stars{position:absolute;inset:0;background-image:
radial-gradient(1.3px 1.3px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 78% 13%,#fff,transparent),
radial-gradient(1.5px 1.5px at 40% 30%,#fff,transparent),radial-gradient(1px 1px at 64% 46%,#fff,transparent),
radial-gradient(1px 1px at 24% 58%,#fff,transparent),radial-gradient(1.3px 1.3px at 88% 62%,#fff,transparent),
radial-gradient(1px 1px at 52% 7%,#fff,transparent),radial-gradient(1.1px 1.1px at 7% 42%,#fff,transparent),
radial-gradient(1px 1px at 70% 26%,#fff,transparent),radial-gradient(1.2px 1.2px at 33% 72%,#fff,transparent),
radial-gradient(1px 1px at 92% 34%,#fff,transparent),radial-gradient(1.4px 1.4px at 18% 8%,#fff,transparent);
opacity:.55;animation:daraTwinkle 5s ease-in-out infinite alternate}
@keyframes daraTwinkle{from{opacity:.35}to{opacity:.72}}
.dara-auth-grid{position:absolute;left:50%;bottom:-7%;width:260%;height:64%;transform:translateX(-50%) perspective(420px) rotateX(75deg);
background-image:linear-gradient(rgba(190,159,65,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(190,159,65,.17) 1px,transparent 1px);
background-size:48px 48px;-webkit-mask-image:linear-gradient(transparent,#000 60%);mask-image:linear-gradient(transparent,#000 60%);animation:daraGrid 4s linear infinite}
@keyframes daraGrid{from{background-position:0 0}to{background-position:0 48px}}
html:not(.dara-dark) .dara-auth-stars{opacity:.18}
/* layout: centrado por defecto; 2 columnas en .dara-auth-2col */
.dara-auth-wrap{position:relative;z-index:1;min-height:100vh;display:grid;place-items:center;padding:26px 16px}
.dara-auth-2col{grid-template-columns:1.02fr .98fr;align-items:center;justify-items:stretch;gap:clamp(24px,5vw,64px);max-width:1140px;margin:0 auto}
/* ============================================================
DARA Auth — redesign v2 (brand-tile + glass card + social pair)
Replaces the .dara-auth-* block (lines ~455–513 in custom.css).
Tokens (:root / html.dara-dark) remain unchanged above this block.
============================================================ */
/* ── 1. Card layout + card-wrap ─────────────────────────────── */
.dara-auth-card-wrap {
width: 100%;
max-width: 392px;
perspective: 1200px;
}
.dara-auth-2col .dara-auth-card-wrap {
justify-self: center;
margin-left: auto;
}
/* ── 2. LIGHT MODE card — elevated frosted panel ─────────────
Distinct from the near-white bg even without strong transparency.
Technique: near-opaque off-white gradient + crisp 1px gold-tinted
border + real tripled shadow stack + inner top-highlight + gold
hairline via box-shadow inset (avoids pseudo clipping the tilt).
*/
.dara-auth-card {
width: 100%;
background: linear-gradient(
158deg,
rgba(255,255,255,0.97) 0%,
rgba(246,249,254,0.93) 55%,
rgba(238,243,252,0.89) 100%
);
backdrop-filter: blur(32px) saturate(1.6);
-webkit-backdrop-filter: blur(32px) saturate(1.6);
border: 1px solid rgba(190,159,65,0.22);
box-shadow:
/* inner top white edge */
0 2px 0 rgba(255,255,255,0.92) inset,
/* gold top hairline accent — avoids a pseudo that clips the tilt */
0 -1px 0 rgba(190,159,65,0.32) inset,
/* tight key shadow */
0 2px 6px -2px rgba(16,24,40,0.08),
/* mid ambient */
0 12px 32px -10px rgba(16,24,40,0.13),
/* wide soft shadow */
0 40px 80px -28px rgba(16,24,40,0.11),
/* subtle gold edge glow */
0 0 0 1px rgba(190,159,65,0.06);
border-radius: 22px;
padding: 34px 32px 28px;
transform: perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
will-change: transform;
animation: daraCardIn 0.8s cubic-bezier(0.16,1,0.3,1) both;
/* NO overflow:hidden — preserves tilt bleed, focus rings, glow shadows */
position: relative;
}
/* ── 3. DARK MODE card — true translucent glass ──────────────
Constellation field visibly bleeds through (48-62% surface).
*/
html.dara-dark .dara-auth-card {
background: linear-gradient(
155deg,
color-mix(in srgb, var(--da-surface) 62%, transparent) 0%,
color-mix(in srgb, var(--da-surface) 48%, transparent) 100%
);
backdrop-filter: blur(28px) saturate(1.5) brightness(1.07);
-webkit-backdrop-filter: blur(28px) saturate(1.5) brightness(1.07);
border: 1px solid color-mix(in srgb, var(--da-gold) 18%, rgba(255,255,255,0.09) 82%);
box-shadow:
0 1px 0 rgba(255,255,255,0.10) inset,
0 -1px 0 color-mix(in srgb, var(--da-gold) 22%, transparent) inset,
0 36px 90px -30px rgba(0,0,0,0.72),
0 8px 28px -8px rgba(0,0,0,0.45),
0 2px 8px -2px rgba(0,0,0,0.30);
}
@keyframes daraCardIn {
from { opacity:0; transform: translateY(18px) scale(0.97); }
to { opacity:1; transform: translateY(0) scale(1); }
}
/* ── 4. Brand tile lockup (left intro panel — the one login renders) ── */
/* Outer flex alignment — intro panel uses this */
.dara-auth-brand {
display: flex;
align-items: center;
gap: 14px;
text-align: left;
margin-bottom: 0;
}
.dara-auth-brand-text {
display: flex;
flex-direction: column;
gap: 2px;
}
/* Intro panel spacing */
.dara-auth-intro .dara-auth-brand {
margin-bottom: 30px;
}
/* ── Gold gradient rounded-square tile ── */
.dara-auth-tile {
flex: 0 0 52px;
width: 52px;
height: 52px;
border-radius: 16px;
background: linear-gradient(
145deg,
color-mix(in srgb, var(--da-gold) 88%, #fff 12%) 0%,
var(--da-gold-2) 52%,
color-mix(in srgb, var(--da-gold-2) 78%, #2a1a00 22%) 100%
);
border: 1px solid color-mix(in srgb, var(--da-gold) 65%, #fff 35%);
box-shadow:
/* top inner highlight */
0 1px 0 rgba(255,255,255,0.38) inset,
/* outer gold glow */
0 8px 22px -6px color-mix(in srgb, var(--da-gold) 55%, transparent),
0 2px 8px -2px rgba(0,0,0,0.18);
display: grid;
place-items: center;
position: relative;
transition: box-shadow 0.25s;
}
/* Top highlight shimmer (does NOT require overflow:hidden — purely inset) */
.dara-auth-tile::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
to bottom,
rgba(255,255,255,0.22) 0%,
transparent 45%
);
pointer-events: none;
}
html.dara-dark .dara-auth-tile {
box-shadow:
0 1px 0 rgba(255,255,255,0.30) inset,
0 10px 28px -8px color-mix(in srgb, var(--da-gold) 65%, transparent),
0 2px 8px -2px rgba(0,0,0,0.40);
}
/* The cube SVG rendered inside the tile */
.dara-auth-tile-cube {
position: relative;
z-index: 1;
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.20));
}
/* ── Two-tone wordmark ── */
.dara-auth-brand-h1 {
font-family: var(--dara-font-head);
font-size: 18px;
font-weight: 800;
margin: 0;
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--da-ink);
}
.dara-auth-intro .dara-auth-brand-h1 {
font-size: 19px;
}
.da-brand-bbs {
color: var(--da-gold);
}
html.dara-dark .da-brand-bbs {
text-shadow: 0 0 14px rgba(190,159,65,0.40);
}
.da-brand-rest {
color: var(--da-ink);
}
/* Small-caps gold subtitle */
.da-brand-sub {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--da-gold);
margin: 0;
font-weight: 700;
opacity: 0.84;
}
/* Remove legacy cube img approach (was an ![]()
inside .dara-auth-cube)
The intro panel's .dara-auth-brand replaces .dara-auth-cube entirely.
We hide any remaining old .dara-auth-cube img in case it is rendered
by a variant page (register/reset) that was not updated. */
.dara-auth-cube { display: none !important; }
/* ── 5. Card h2 + subtitle ───────────────────────────────── */
.dara-auth-card h2 {
font-family: var(--dara-font-head);
font-size: 20px;
font-weight: 700;
margin: 0 0 4px;
letter-spacing: -0.015em;
color: var(--da-ink);
text-align: center;
}
.dara-auth-hsub {
font-size: 13px;
color: var(--da-ink-3);
margin: 0 0 22px;
text-align: center;
line-height: 1.45;
}
/* ── 6. Flash messages ───────────────────────────────────── */
.dara-auth-card .alert,
.dara-auth-card .flashmessage,
.dara-auth-card .flash-message {
margin-bottom: 16px;
}
/* ── 7. Form fields ──────────────────────────────────────── */
.dara-auth-row {
margin-bottom: 16px;
}
.dara-auth-rowhead {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.dara-auth-row label,
.dara-auth-rowhead label {
display: block;
font-size: 12.5px;
color: var(--da-ink-2);
margin: 0;
font-weight: 500;
}
.dara-auth-rowhead a {
font-size: 12px;
color: var(--da-ink-3);
text-decoration: none;
font-weight: 500;
transition: color 0.15s;
}
.dara-auth-rowhead a:hover { color: var(--da-gold); }
.dara-auth-inp {
width: 100%;
background: var(--da-surface-2);
border: 1px solid var(--da-line);
border-radius: var(--da-rs);
color: var(--da-ink);
font-size: 14.5px;
padding: 11px 13px;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
box-shadow: 0 1px 2px rgba(16,24,40,0.04) inset;
box-sizing: border-box;
}
.dara-auth-inp::placeholder { color: var(--da-ink-3); }
.dara-auth-inp:focus {
border-color: var(--da-gold);
box-shadow: 0 0 0 3px rgba(190,159,65,0.20), 0 1px 2px rgba(16,24,40,0.04) inset;
}
/* ── 8. Password reveal ──────────────────────────────────── */
.dara-auth-pw { position: relative; }
.dara-auth-pw .btn-reveal-pw {
position: absolute;
right: 9px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--da-ink-3);
cursor: pointer;
font-size: 13px;
padding: 6px 4px;
font-weight: 600;
transition: color 0.15s;
}
.dara-auth-pw .btn-reveal-pw:hover { color: var(--da-gold); }
/* ── 9. Remember / forgot row ───────────────────────────── */
.dara-auth-between {
display: flex;
align-items: center;
justify-content: space-between;
margin: 4px 0 20px;
}
.dara-auth-between label {
display: flex;
align-items: center;
gap: 7px;
margin: 0;
color: var(--da-ink-2);
cursor: pointer;
font-size: 13px;
font-weight: 500;
}
/* ── 10. Primary CTA button ─────────────────────────────── */
.dara-auth-enter {
width: 100%;
background: linear-gradient(135deg, var(--da-gold-2) 0%, var(--da-gold) 52%, #a8862f 100%);
color: var(--da-gold-ink);
border: none;
border-radius: var(--da-rs);
font-size: 15px;
font-weight: 800;
letter-spacing: 0.01em;
padding: 14px;
cursor: pointer;
box-shadow:
0 1px 0 rgba(255,255,255,0.32) inset,
0 10px 24px -8px rgba(190,159,65,0.60),
0 18px 36px -14px rgba(190,159,65,0.35);
transition: filter 0.15s, transform 0.12s, box-shadow 0.20s;
position: relative;
overflow: hidden;
}
.dara-auth-enter::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, transparent 52%);
pointer-events: none;
}
.dara-auth-enter:hover {
filter: brightness(1.06);
box-shadow:
0 1px 0 rgba(255,255,255,0.35) inset,
0 14px 30px -8px rgba(190,159,65,0.74),
0 22px 44px -14px rgba(190,159,65,0.42);
}
.dara-auth-enter:active {
transform: scale(0.99);
filter: brightness(0.98);
}
/* ── 11. "Crear cuenta" link ────────────────────────────── */
.dara-auth-srv {
font-size: 12.5px;
color: var(--da-ink-3);
text-align: center;
margin: 16px 0 0;
line-height: 1.5;
}
.dara-auth-srv a {
color: var(--da-ink-2);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 500;
transition: color 0.15s;
}
.dara-auth-srv a:hover { color: var(--da-gold); }
/* ── 12. Social login block ─────────────────────────────── */
/* Reset the container wrappers that WHMCS injects */
.dara-auth-card .provider-linking-container,
.dara-auth-card .social-login,
.dara-auth-card .providerPreLinking {
margin-top: 0;
}
/* KILL the old CSS pseudo-divider (line 502 in original custom.css).
The real divider is a injected by JS.
Using !important to guarantee it always wins even if specificity races. */
.dara-auth-card .social-signin-btns::before {
display: none !important;
content: none !important;
}
/* "o continuá con" divider — injected by JS */
.dara-auth-or {
display: flex;
align-items: center;
gap: 10px;
margin: 20px 0 14px;
color: var(--da-ink-3);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
user-select: none;
}
.dara-auth-or::before,
.dara-auth-or::after {
content: "";
flex: 1;
height: 1px;
background: var(--da-line-2);
border-radius: 1px;
}
/* Button pair stack */
.dara-auth-card .social-signin-btns {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
position: relative;
}
/* ── Facebook button — fully controlled ── */
.dara-auth-card .social-signin-btns a,
.dara-auth-card .social-signin-btns > button,
.dara-auth-card .btn-provider,
.dara-auth-card .social-login .btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 9px !important;
width: 100% !important;
min-height: 46px !important;
height: 46px !important;
margin: 0 !important;
padding: 0 16px !important;
border-radius: var(--da-rs) !important;
border: 1px solid var(--da-line-2) !important;
background: color-mix(in srgb, var(--da-surface-2) 80%, transparent) !important;
color: var(--da-ink) !important;
font-weight: 600 !important;
font-size: 14px !important;
text-decoration: none !important;
box-shadow:
0 1px 2px rgba(16,24,40,0.06),
0 1px 0 rgba(255,255,255,0.52) inset !important;
transition: border-color 0.18s, transform 0.15s, background 0.18s, box-shadow 0.18s !important;
cursor: pointer !important;
box-sizing: border-box !important;
}
.dara-auth-card .social-signin-btns a:hover,
.dara-auth-card .social-signin-btns > button:hover,
.dara-auth-card .btn-provider:hover,
.dara-auth-card .social-login .btn:hover {
border-color: color-mix(in srgb, var(--da-gold) 60%, transparent) !important;
background: color-mix(in srgb, var(--da-surface-2) 95%, transparent) !important;
transform: translateY(-1px) !important;
box-shadow:
0 4px 12px -3px rgba(190,159,65,0.18),
0 1px 0 rgba(255,255,255,0.52) inset !important;
}
html.dara-dark .dara-auth-card .social-signin-btns a,
html.dara-dark .dara-auth-card .social-signin-btns > button,
html.dara-dark .dara-auth-card .btn-provider,
html.dara-dark .dara-auth-card .social-login .btn {
background: color-mix(in srgb, var(--da-surface-2) 55%, transparent) !important;
box-shadow:
0 1px 3px rgba(0,0,0,0.28),
0 1px 0 rgba(255,255,255,0.07) inset !important;
}
/* Icons inside social buttons */
.dara-auth-card .social-signin-btns img,
.dara-auth-card .social-signin-btns svg,
.dara-auth-card .btn-provider i {
width: 18px !important;
height: 18px !important;
flex: 0 0 18px !important;
}
/* ── Google GSI uniform slot (glass wrapper injected by JS) ──
The slot frames the cross-origin iframe so the pair reads as
a deliberate uniform system regardless of iframe exact render width.
renderButton is the primary sizing mechanism; the slot is the frame.
*/
.dara-gsi-slot {
width: 100%;
min-height: 46px;
height: 46px;
border-radius: var(--da-rs);
border: 1px solid var(--da-line-2);
background: color-mix(in srgb, var(--da-surface-2) 80%, transparent);
box-shadow:
0 1px 2px rgba(16,24,40,0.06),
0 1px 0 rgba(255,255,255,0.52) inset;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: border-color 0.18s, box-shadow 0.18s;
box-sizing: border-box;
}
.dara-gsi-slot:hover {
border-color: color-mix(in srgb, var(--da-gold) 60%, transparent);
box-shadow:
0 4px 12px -3px rgba(190,159,65,0.18),
0 1px 0 rgba(255,255,255,0.52) inset;
}
html.dara-dark .dara-gsi-slot {
background: color-mix(in srgb, var(--da-surface-2) 55%, transparent);
box-shadow:
0 1px 3px rgba(0,0,0,0.28),
0 1px 0 rgba(255,255,255,0.07) inset;
}
/* The g_id_signin div sits inside the slot */
.dara-gsi-slot .g_id_signin {
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
/* GSI iframe — stretched horizontally to fill the slot */
.dara-gsi-slot iframe {
min-height: 44px !important;
height: 44px !important;
border: none !important;
display: block !important;
}
/* ── 13. Social icon row ────────────────────────────────── */
.dara-auth-social {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.dara-auth-social a {
width: 38px;
height: 38px;
border-radius: 11px;
display: grid;
place-items: center;
color: var(--da-ink-2);
background: var(--da-surface-2);
border: 1px solid var(--da-line);
font-size: 16px;
text-decoration: none;
transition: transform 0.22s cubic-bezier(0.2,0.7,0.2,1), border-color 0.2s, color 0.2s;
}
.dara-auth-social a:hover {
transform: translateY(-3px);
border-color: var(--da-gold);
color: var(--da-gold-2);
}
/* ── 14. Security badges ────────────────────────────────── */
.dara-auth-foot {
font-size: 11.5px;
color: var(--da-ink-3);
text-align: center;
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.dara-auth-secure i {
color: var(--da-ink-3);
margin-right: 5px;
}
.dara-auth-protected {
display: inline-flex;
align-items: center;
gap: 5px;
color: #1f9d57;
background: color-mix(in srgb, #1f9d57 12%, transparent);
border: 1px solid color-mix(in srgb, #1f9d57 28%, transparent);
border-radius: 30px;
padding: 3px 10px;
font-weight: 600;
}
/* ── 15. Credits + legal ────────────────────────────────── */
.dara-auth-credits {
font-size: 11px;
color: var(--da-ink-3);
text-align: center;
margin: 12px 0 0;
opacity: 0.78;
}
.dara-auth-legal {
font-size: 10px;
color: var(--da-ink-3);
text-align: center;
line-height: 1.55;
max-width: 44ch;
margin: 6px auto 0;
opacity: 0.90;
}
.dara-auth-legal a {
color: var(--da-ink-2);
text-decoration: underline;
text-underline-offset: 2px;
}
.dara-auth-legal a:hover { color: var(--da-gold-2); }
/* ── 16. Intro panel (left column) overrides ─────────────
These tune the LEFT 2-col panel — what the login page renders.
*/
.dara-auth-intro {
padding: 8px 4px;
}
.dara-auth-intro .dara-auth-brand {
display: flex;
align-items: center;
gap: 14px;
text-align: left;
margin-bottom: 30px;
}
.dara-auth-intro .dara-auth-brand > div {
display: block;
}
.dara-auth-lede {
font-family: var(--dara-font-head);
font-size: clamp(26px,3.2vw,40px);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.08;
margin: 0 0 14px;
color: var(--da-ink);
text-wrap: balance;
}
.dara-auth-lede b { color: var(--da-gold-2); font-weight: 800; }
.dara-auth-sub {
font-size: 15px;
color: var(--da-ink-2);
max-width: 46ch;
line-height: 1.55;
margin: 0 0 26px;
}
.dara-auth-why { display: flex; flex-direction: column; gap: 11px; }
.dara-auth-why div {
display: flex;
align-items: center;
gap: 10px;
font-size: 13.5px;
color: var(--da-ink-2);
font-weight: 500;
}
.dara-auth-why i {
width: 30px;
height: 30px;
border-radius: 9px;
display: grid;
place-items: center;
font-size: 13px;
background: color-mix(in srgb, var(--da-gold) 16%, transparent);
color: var(--da-gold-2);
flex: 0 0 auto;
}
/* ── 17. Responsive ─────────────────────────────────────── */
@media (max-width: 880px) {
.dara-auth-2col {
grid-template-columns: 1fr;
gap: 20px;
max-width: 420px;
}
.dara-auth-intro { text-align: center; }
.dara-auth-intro .dara-auth-brand { justify-content: center; }
.dara-auth-2col .dara-auth-card-wrap { margin: 0 auto; }
.dara-auth-sub { margin-left: auto; margin-right: auto; }
.dara-auth-why { align-items: center; }
}
@media (max-width: 480px) {
.dara-auth-card { padding: 26px 20px 22px; }
}
/* ── 18. Reduced motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.dara-auth-stars, .dara-auth-grid, .dara-auth-card { animation: none !important; }
.dara-auth-card { transform: none !important; }
}
/* ===== Registro + Recuperar contraseña: misma zona cósmica que el login ===== */
body.page-clientregister,body.page-password-reset-container{background:var(--da-bg)!important}
body.page-clientregister .dara-sidebar,body.page-clientregister .dara-topbar,body.page-clientregister .dara-foot,body.page-clientregister .dara-sb-overlay,body.page-clientregister .master-breadcrumb,
body.page-password-reset-container .dara-sidebar,body.page-password-reset-container .dara-topbar,body.page-password-reset-container .dara-foot,body.page-password-reset-container .dara-sb-overlay,body.page-password-reset-container .master-breadcrumb{display:none!important}
body.page-clientregister .dara-main,body.page-password-reset-container .dara-main{margin-left:0}
body.page-clientregister .dara-shell,body.page-password-reset-container .dara-shell{position:relative;z-index:1}
body.page-clientregister .dara-content,body.page-clientregister .dara-content-inner,body.page-password-reset-container .dara-content,body.page-password-reset-container .dara-content-inner{padding:0;max-width:none;background:transparent!important}
body.page-clientregister .dara-content-inner,body.page-password-reset-container .dara-content-inner{min-height:100vh;display:grid;place-items:center;padding:30px 16px}
body.page-clientregister .dara-row.has-aside,body.page-password-reset-container .dara-row.has-aside{display:block}
body.page-clientregister .breadcrumb,body.page-clientregister .master-breadcrumb,body.page-password-reset-container .breadcrumb,body.page-password-reset-container .master-breadcrumb{display:none!important}
/* la grilla del fondo arranca más abajo en estas páginas (formularios largos) */
.dara-auth-extbg .dara-auth-grid{bottom:-12%;height:55%}
/* card glassy */
body.page-clientregister .card,body.page-password-reset-container .card{
width:100%;background:color-mix(in srgb,var(--da-surface) 84%,transparent)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
border:1px solid var(--da-line)!important;border-radius:22px!important;box-shadow:0 34px 90px -36px rgba(0,0,0,.6)!important;color:var(--da-ink)}
body.page-clientregister .card{max-width:680px}
body.page-password-reset-container .card{max-width:480px}
body.page-clientregister .card .card-body,body.page-password-reset-container .card .card-body{padding:clamp(28px,4vw,44px)}
body.page-clientregister h1,body.page-clientregister h2,body.page-password-reset-container h1,body.page-password-reset-container h2{font-family:var(--dara-font-head);color:var(--da-ink)}
body.page-clientregister .form-control,body.page-password-reset-container .form-control{background:var(--da-surface-2);border-color:var(--da-line);color:var(--da-ink);border-radius:var(--da-rs)}
body.page-clientregister .form-control:focus,body.page-password-reset-container .form-control:focus{border-color:var(--da-gold);box-shadow:0 0 0 3px rgba(190,159,65,.22)}
body.page-clientregister .btn-primary,body.page-password-reset-container .btn-primary{background:var(--da-gold);border:0;color:var(--da-gold-ink);font-weight:700}
/* ===== Estados / detalles ===== */
.dara-portal .label,.dara-portal .badge{font-weight:600;border-radius:20px;padding:.3em .7em}
.dara-portal .label-success,.dara-portal .badge-success,.dara-portal .status-active{background:var(--dara-success)!important;color:#fff}
.dara-portal .label-danger,.dara-portal .badge-danger{background:#dc3545!important}
.dara-portal .text-domain.text-success{color:var(--dara-success)!important}
.dara-portal .invoice-container,.dara-portal .order-summary{border-radius:var(--dara-radius)}
.dara-portal .btn-block{display:block;width:100%}
/* ===== Factura standalone: documento claro on-brand (imprimible) ===== */
.dara-invoice-page{background:var(--dara-bg);font-family:var(--dara-font-body)}
.dara-invoice-page .invoice-container{background:#fff;max-width:900px;margin:28px auto;border:1px solid var(--dara-border);border-radius:16px;box-shadow:var(--dara-shadow-lg);padding:34px 40px}
.dara-invoice-page h1,.dara-invoice-page h2,.dara-invoice-page h3{font-family:var(--dara-font-head)}
.dara-invoice-page .panel{border:1px solid var(--dara-border);border-radius:12px;overflow:hidden;box-shadow:none}
.dara-invoice-page .panel-heading{background:var(--dara-grad)!important;color:#fff!important;border:0!important;font-family:var(--dara-font-head);font-weight:700}
.dara-invoice-page .invoice-items thead th{background:#f5f6f9;color:var(--dara-ink)}
.dara-invoice-page .card{border:1px solid var(--dara-border);border-radius:12px;overflow:hidden}
.dara-invoice-page .card-title.bg-info,.dara-invoice-page .bg-info{background:var(--dara-grad)!important;font-family:var(--dara-font-head)}
.dara-invoice-page a{color:var(--dara-gold-deep)}
@media print{.dara-invoice-page .invoice-container{box-shadow:none;border:0;margin:0}}
/* ===== SVG recoloreables (heredan currentColor; gradiente daraG = oro del panel) ===== */
.dara-svg{max-width:100%;height:auto;display:block;color:var(--dara-gold-deep)}
/* ===== Hero portada (invitado) ===== */
.dara-hero{display:flex;align-items:center;gap:32px;flex-wrap:wrap;justify-content:space-between;
background:linear-gradient(135deg,#161c28,#2a3346);border-radius:18px;padding:2.4rem 2.4rem;margin-bottom:18px;
position:relative;overflow:hidden;box-shadow:var(--dara-shadow-lg)}
.dara-hero::after{content:"";position:absolute;top:-50%;right:-4%;width:340px;height:340px;border-radius:50%;
background:radial-gradient(circle,color-mix(in srgb,var(--dara-gold) 30%,transparent),transparent 65%)}
.dara-hero-text{flex:1 1 320px;position:relative;z-index:1}
.dara-hero-text h1{color:#fff;font-size:2.1rem;margin:0 0 .5rem}
.dara-hero-text p{color:#c8cfdd;font-size:1.05rem;margin:0;max-width:42ch}
.dara-hero{padding:2rem 2.4rem}
.dara-hero-text h1{font-size:2.3rem;letter-spacing:-.03em}
.dara-hero-cta{margin-top:1.1rem;padding:.6rem 1.5rem;font-weight:600}
.dara-hero-art{flex:0 0 230px;position:relative;z-index:1;display:flex;justify-content:center;align-items:center}
.dara-hero-art::before{content:"";position:absolute;width:210px;height:210px;border-radius:50%;
background:radial-gradient(circle,color-mix(in srgb,var(--dara-gold) 42%,transparent),transparent 70%);z-index:-1}
.dara-hero-art .dara-svg{color:#fff;filter:drop-shadow(0 14px 30px rgba(0,0,0,.4))}
.dara-hero-art svg [fill="currentColor"]{opacity:.2}
.dara-hero-art svg [stroke^="url"]{stroke-width:5}
@media(max-width:640px){.dara-hero{padding:1.8rem;text-align:center}.dara-hero-text{flex-basis:100%}.dara-hero-art{flex-basis:170px;max-width:180px;margin:0 auto}}
/* ===== Login: marca arriba de la tarjeta ===== */
.dara-login-brand{text-align:center;margin-bottom:1.3rem}
.dara-login-brand img{max-height:56px;width:auto}
.dara-login-cube{display:inline-block;color:var(--dara-gold-deep)}
.dara-login-cube .dara-svg{margin:0 auto}
.dara-login-name{font-family:var(--dara-font-head);font-weight:800;font-size:1.25rem;color:var(--dara-ink);margin-top:.5rem;letter-spacing:-.02em}
.dara-login-tag{font-size:.82rem;color:var(--dara-ink-soft);text-transform:uppercase;letter-spacing:.08em;margin-top:.15rem}
/* ===== Estados vacíos con ilustración SVG ===== */
.dara-empty{text-align:center;padding:2.6rem 1rem;color:var(--dara-ink-soft)}
.dara-empty .dara-svg{width:92px;height:92px;margin:0 auto 1rem;color:var(--dara-gold-deep);opacity:.9;display:block}
.dara-empty h3{font-size:1.15rem;margin:0 0 .3rem;color:var(--dara-ink)}
.dara-empty p{margin:0 0 1rem;font-size:.95rem}
/* iconos de sub-links de la nav */
.dara-sb-sublink>i:first-child{width:16px;text-align:center;font-size:12px;opacity:.6;flex:0 0 auto}
.dara-sb-sublink:hover>i:first-child,.dara-sb-sublink.active>i:first-child{opacity:1;color:var(--dara-gold-deep)}
/* ══════════════════════════════════════════════════════════════════
DARA Auth — micro-polish v3 (icons, cosmic light, micro-interactions)
Purely ADDITIVE — nothing below regresses the v2 block above.
All values use --da-* tokens. No fixed gold hex where a token exists.
Smarty-safe (no {literal} needed in CSS).
══════════════════════════════════════════════════════════════════ */
/* ── A. INPUT ICON WRAPPER ───────────────────────────────────────
.dara-auth-inp-wrap positions the leading icon inside each field.
Used for both the email row (direct child of .dara-auth-row) and
the password row (child of .dara-auth-pw).
The icon span sits absolutely at left-center; input gets left pad.
On :focus-within the icon transitions to --da-gold + rises 1px.
*/
.dara-auth-inp-wrap {
position: relative;
display: flex;
align-items: center;
}
/* Leading icon — vertically centred, pinned left */
.dara-auth-inp-icon {
position: absolute;
left: 13px;
top: 50%;
transform: translateY(-50%);
color: var(--da-ink-3);
font-size: 13px;
pointer-events: none;
z-index: 1;
line-height: 1;
transition: color 0.18s cubic-bezier(0.16,1,0.3,1),
transform 0.20s cubic-bezier(0.34,1.56,0.64,1);
}
/* Focus micro-interaction: icon goes gold + rises 1px (spring-bounce) */
.dara-auth-inp-wrap:focus-within .dara-auth-inp-icon {
color: var(--da-gold);
transform: translateY(calc(-50% - 1px));
}
/* Inputs inside a wrap get left padding to clear the icon */
.dara-auth-inp-wrap .dara-auth-inp {
padding-left: 36px;
}
/* Password input: extra right pad to clear the wider reveal button */
.dara-auth-pw .dara-auth-inp-wrap .dara-auth-inp {
padding-right: 44px;
}
/* Refined focus ring — slightly deeper glow stacked on existing */
.dara-auth-inp:focus {
border-color: var(--da-gold);
box-shadow:
0 0 0 3.5px color-mix(in srgb, var(--da-gold) 22%, transparent),
0 0 0 1px color-mix(in srgb, var(--da-gold) 45%, transparent),
0 1px 2px rgba(16,24,40,0.04) inset;
}
/* Label warms to a gold tint on focus (subtle hierarchy reinforcement) */
.dara-auth-row:focus-within > label,
.dara-auth-row:focus-within .dara-auth-rowhead > label {
color: color-mix(in srgb, var(--da-gold) 55%, var(--da-ink-2) 45%);
transition: color 0.18s;
}
/* ── B. PASSWORD REVEAL — eye icon restyling ─────────────────────
The button now carries toggled by JS.
Size + alignment tuned to sit flush inside the input field.
*/
.dara-auth-pw .btn-reveal-pw {
/* Override the font-size/padding set by the base rule */
font-size: 14px !important;
width: 32px;
height: 32px;
display: flex !important;
align-items: center;
justify-content: center;
padding: 0 !important;
border-radius: 7px;
right: 7px !important;
}
.dara-auth-pw .btn-reveal-pw i {
transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), opacity 0.15s;
display: block;
line-height: 1;
}
.dara-auth-pw .btn-reveal-pw:hover i {
transform: scale(1.18);
}
/* ── C. COSMIC FIELD — light mode: more present and cinematic ────
In dark mode the field is already rich; we target light-only.
Raises stars, strengthens grid lines, adds dual radial glow
(gold corona + blue-violet counter-point), and a top-corona
::after pseudo (like DARA System) so the background reads
as intentional, not accidental. Dark mode is untouched.
*/
html:not(.dara-dark) .dara-auth-stars {
opacity: 0.38;
}
html:not(.dara-dark) .dara-auth-field {
background:
radial-gradient(780px 480px at 50% 0%, rgba(190,159,65,.19), transparent 56%),
radial-gradient(480px 280px at 74% 82%, rgba(190,159,65,.07), transparent 65%),
radial-gradient(560px 260px at 20% 78%, rgba(107,148,230,.06), transparent 62%),
var(--da-bg);
}
html:not(.dara-dark) .dara-auth-grid {
background-image:
linear-gradient(rgba(190,159,65,.44) 1px, transparent 1px),
linear-gradient(90deg, rgba(190,159,65,.24) 1px, transparent 1px);
}
/* Canvas slightly more visible in light (stars canvas from ParticlesBg) */
html:not(.dara-dark) .dara-auth-canvas {
opacity: 0.72;
-webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent);
mask-image: linear-gradient(to bottom, #000 50%, transparent);
}
/* Gold corona at top-centre — cinematic like DARA System, light-only */
html:not(.dara-dark) .dara-auth-field::after {
content: "";
position: absolute;
top: -80px;
left: 50%;
transform: translateX(-50%);
width: 640px;
height: 320px;
background: radial-gradient(
ellipse at center,
color-mix(in srgb, var(--da-gold) 22%, transparent) 0%,
transparent 72%
);
pointer-events: none;
z-index: 0;
}
/* ── D. BRAND TILE — slow idle float ─────────────────────────────
Gentle infinite translateY float, 5.5s period, subtle rotation.
The tile already has position:relative and no overflow:hidden,
so the float does not clip the gold glow shadow.
A shimmer on ::after sweeps diagonally every cycle.
Both animations pause on form focusin (JS below), so typing
is never distracted by motion in the periphery.
Separate dark-mode keyframe preserves the existing dark shadow stack.
*/
@keyframes daraIdleFloat {
0%,100% {
transform: translateY(0) rotate(0deg);
box-shadow:
0 1px 0 rgba(255,255,255,0.38) inset,
0 8px 22px -6px color-mix(in srgb, var(--da-gold) 55%, transparent),
0 2px 8px -2px rgba(0,0,0,0.18);
}
42% {
transform: translateY(-5px) rotate(0.5deg);
box-shadow:
0 1px 0 rgba(255,255,255,0.38) inset,
0 14px 32px -8px color-mix(in srgb, var(--da-gold) 64%, transparent),
0 4px 12px -2px rgba(0,0,0,0.14);
}
72% {
transform: translateY(-3px) rotate(-0.3deg);
}
}
@keyframes daraIdleFloatDark {
0%,100% {
transform: translateY(0) rotate(0deg);
box-shadow:
0 1px 0 rgba(255,255,255,0.30) inset,
0 10px 28px -8px color-mix(in srgb, var(--da-gold) 65%, transparent),
0 2px 8px -2px rgba(0,0,0,0.40);
}
42% {
transform: translateY(-5px) rotate(0.5deg);
box-shadow:
0 1px 0 rgba(255,255,255,0.30) inset,
0 18px 40px -10px color-mix(in srgb, var(--da-gold) 75%, transparent),
0 4px 14px -2px rgba(0,0,0,0.32);
}
72% {
transform: translateY(-3px) rotate(-0.3deg);
}
}
.dara-auth-intro .dara-auth-tile {
animation: daraIdleFloat 5.5s cubic-bezier(0.45,0.05,0.55,0.95) infinite;
overflow: hidden; /* clip the shimmer ::after */
}
html.dara-dark .dara-auth-intro .dara-auth-tile {
animation: daraIdleFloatDark 5.5s cubic-bezier(0.45,0.05,0.55,0.95) infinite;
}
/* Diagonal shimmer sweep on the tile ::after — one pass per cycle */
@keyframes daraTileShimmer {
0% { opacity: 0; transform: translateX(-70%) skewX(-14deg); }
42% { opacity: 1; }
58% { opacity: 1; }
100% { opacity: 0; transform: translateX(170%) skewX(-14deg); }
}
.dara-auth-intro .dara-auth-tile::after {
content: "";
position: absolute;
inset: 0;
width: 55%;
left: 0;
background: linear-gradient(
105deg,
transparent 0%,
rgba(255,255,255,0.32) 48%,
transparent 100%
);
border-radius: inherit;
pointer-events: none;
animation: daraTileShimmer 5.5s cubic-bezier(0.45,0.05,0.55,0.95) infinite 1.4s;
}
/* ── E. CTA BUTTON — sheen sweep on hover ────────────────────────
A narrow diagonal band slides left→right on hover.
Uses ::before so the existing ::after (static top-highlight)
is untouched.
Scoped to @media (hover:hover) so touch devices never freeze.
overflow:hidden is already set on .dara-auth-enter.
*/
.dara-auth-enter::before {
content: "";
position: absolute;
top: 0;
left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(
105deg,
transparent 20%,
rgba(255,255,255,0.28) 50%,
transparent 80%
);
pointer-events: none;
z-index: 1;
/* default: off-screen left, no transition */
transition: left 0s;
}
@media (hover: hover) {
.dara-auth-enter:hover::before {
left: 160%;
transition: left 0.52s cubic-bezier(0.4,0,0.2,1);
}
}
/* ── F. SOCIAL BUTTONS — refined hover (gold glow + lift) ────────
Reinforces the existing translateY(-1px) + gold border-color hover
with a soft gold shadow bloom that makes the pair feel more alive.
Uses !important parity with the base rules above.
*/
.dara-auth-card .social-signin-btns a:hover,
.dara-auth-card .social-signin-btns > button:hover,
.dara-auth-card .btn-provider:hover,
.dara-auth-card .social-login .btn:hover {
transform: translateY(-2px) !important;
box-shadow:
0 6px 18px -4px color-mix(in srgb, var(--da-gold) 24%, transparent),
0 1px 0 rgba(255,255,255,0.54) inset !important;
}
.dara-gsi-slot:hover {
transform: translateY(-2px);
box-shadow:
0 6px 18px -4px color-mix(in srgb, var(--da-gold) 24%, transparent),
0 1px 0 rgba(255,255,255,0.54) inset;
transition: border-color 0.18s, box-shadow 0.20s, transform 0.18s;
}
/* ── G. CHECKBOX — gold accent ───────────────────────────────────
Native accent-color for the remember-me checkbox.
One line, zero JS, accessible by default.
*/
.dara-auth-between input[type="checkbox"] {
accent-color: var(--da-gold);
width: 15px;
height: 15px;
cursor: pointer;
}
/* ── H. FORGOT PASSWORD link — animated underline ────────────────
Adds a grow-from-left underline on hover using background-size.
Stacks cleanly on the existing color:var(--da-gold) hover rule.
*/
.dara-auth-rowhead a {
text-decoration: none;
background-image: linear-gradient(var(--da-gold), var(--da-gold));
background-size: 0% 1px;
background-repeat: no-repeat;
background-position: left bottom;
transition: color 0.15s, background-size 0.22s cubic-bezier(0.16,1,0.3,1);
}
.dara-auth-rowhead a:hover {
color: var(--da-gold);
background-size: 100% 1px;
}
/* ── I. SECURITY BADGE — subtle gold tint on the lock icon ───────
Harmonises the lock icon in .dara-auth-secure with the palette.
The .dara-auth-protected badge (green) is deliberately untouched.
*/
.dara-auth-secure i {
color: var(--da-gold);
opacity: 0.72;
margin-right: 5px;
}
/* ── J. WHY-LIST items — micro-hover nudge ───────────────────────
A 3px rightward slide on hover guides the eye and adds life
to the otherwise static feature list.
*/
.dara-auth-why div {
transition: transform 0.22s cubic-bezier(0.2,0.7,0.2,1);
}
.dara-auth-why div:hover {
transform: translateX(3px);
}
.dara-auth-why i {
transition: background 0.22s;
}
.dara-auth-why div:hover i {
background: color-mix(in srgb, var(--da-gold) 26%, transparent);
}
/* ── K. REDUCED MOTION guard ─────────────────────────────────────
Comes AFTER all animation declarations to reliably win.
Suppresses float, shimmer, and button sheen.
The existing @media block at line ~1120 handles .dara-auth-stars,
.dara-auth-grid, and .dara-auth-card; we extend it here.
*/
@media (prefers-reduced-motion: reduce) {
.dara-auth-intro .dara-auth-tile,
.dara-auth-intro .dara-auth-tile::after {
animation: none !important;
}
.dara-auth-enter::before {
display: none !important;
}
.dara-auth-why div {
transition: none !important;
}
.dara-auth-rowhead a {
background-image: none !important;
transition: color 0.15s !important;
}
}
/* ===== BBS Comunicaciones — Tipografía de marca (Bebas Neue BBS Pro) 2026-07-04 ===== */
@font-face{font-family:'Bebas Neue BBS Pro';font-weight:100;font-style:normal;font-display:swap;src:url('../fonts/bbs-thin.woff2') format('woff2')}
@font-face{font-family:'Bebas Neue BBS Pro';font-weight:100;font-style:italic;font-display:swap;src:url('../fonts/bbs-thinitalic.woff2') format('woff2')}
@font-face{font-family:'Bebas Neue BBS Pro';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/bbs-light.woff2') format('woff2')}
@font-face{font-family:'Bebas Neue BBS Pro';font-weight:300;font-style:italic;font-display:swap;src:url('../fonts/bbs-lightitalic.woff2') format('woff2')}
@font-face{font-family:'Bebas Neue BBS Pro';font-weight:350;font-style:normal;font-display:swap;src:url('../fonts/bbs-book.woff2') format('woff2')}
@font-face{font-family:'Bebas Neue BBS Pro';font-weight:380;font-style:normal;font-display:swap;src:url('../fonts/bbs-middle.woff2') format('woff2')}
@font-face{font-family:'Bebas Neue BBS Pro';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/bbs-regular.woff2') format('woff2')}
@font-face{font-family:'Bebas Neue BBS Pro';font-weight:400;font-style:italic;font-display:swap;src:url('../fonts/bbs-italic.woff2') format('woff2')}
@font-face{font-family:'Bebas Neue BBS Pro';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/bbs-semibold.woff2') format('woff2')}
@font-face{font-family:'Bebas Neue BBS Pro';font-weight:600;font-style:italic;font-display:swap;src:url('../fonts/bbs-semibolditalic.woff2') format('woff2')}
@font-face{font-family:'Bebas Neue BBS Pro';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/bbs-bold.woff2') format('woff2')}
@font-face{font-family:'Bebas Neue BBS Pro';font-weight:700;font-style:italic;font-display:swap;src:url('../fonts/bbs-bolditalic.woff2') format('woff2')}
@font-face{font-family:'Bebas Neue BBS Pro';font-weight:900;font-style:normal;font-display:swap;src:url('../fonts/bbs-black.woff2') format('woff2')}
@font-face{font-family:'Bebas Neue BBS Pro';font-weight:900;font-style:italic;font-display:swap;src:url('../fonts/bbs-blackitalic.woff2') format('woff2')}
/* Títulos y marca con la tipografía BBS (el cuerpo queda en la fuente legible del theme) */
h1,h2,h3,h4,h5,h6,.page-header,.page-header h1,.page-title,.card-title,.panel-title,.navbar-brand,.header-lined h1{
font-family:'Bebas Neue BBS Pro','Bebas Neue',Oswald,sans-serif !important;
letter-spacing:.015em;
}
/* BBS-FONTS-BLOCK */
@font-face{font-family:"BBS Comunicaciones";font-style:normal;font-weight:900;font-display:swap;src:url("/fonts/bbs-black.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones";font-style:italic;font-weight:900;font-display:swap;src:url("/fonts/bbs-blackitalic.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/bbs-bold.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones";font-style:italic;font-weight:700;font-display:swap;src:url("/fonts/bbs-bolditalic.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones";font-style:normal;font-weight:350;font-display:swap;src:url("/fonts/bbs-book.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones";font-style:italic;font-weight:350;font-display:swap;src:url("/fonts/bbs-bookitalic.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones Expanded";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/bbs-expbd.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones Expanded";font-style:italic;font-weight:700;font-display:swap;src:url("/fonts/bbs-expbdit.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones Expanded";font-style:normal;font-weight:350;font-display:swap;src:url("/fonts/bbs-expbk.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones Expanded";font-style:italic;font-weight:350;font-display:swap;src:url("/fonts/bbs-expbkit.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones Expanded";font-style:normal;font-weight:900;font-display:swap;src:url("/fonts/bbs-expblack.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones Expanded";font-style:italic;font-weight:900;font-display:swap;src:url("/fonts/bbs-expblackit.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones Expanded";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/bbs-expeb.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones Expanded";font-style:italic;font-weight:800;font-display:swap;src:url("/fonts/bbs-expebit.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones Expanded";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/bbs-expit.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones Expanded";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/bbs-explt.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones Expanded";font-style:italic;font-weight:300;font-display:swap;src:url("/fonts/bbs-expltit.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones Expanded";font-style:normal;font-weight:380;font-display:swap;src:url("/fonts/bbs-expmd.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones Expanded";font-style:italic;font-weight:380;font-display:swap;src:url("/fonts/bbs-expmdit.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones Expanded";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/bbs-exprg.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones Expanded";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/bbs-expsb.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones Expanded";font-style:italic;font-weight:600;font-display:swap;src:url("/fonts/bbs-expsbit.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones Expanded";font-style:normal;font-weight:100;font-display:swap;src:url("/fonts/bbs-expth.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones Expanded";font-style:italic;font-weight:100;font-display:swap;src:url("/fonts/bbs-expthit.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/bbs-italic.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/bbs-light.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones";font-style:italic;font-weight:300;font-display:swap;src:url("/fonts/bbs-lightitalic.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones";font-style:normal;font-weight:380;font-display:swap;src:url("/fonts/bbs-middle.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones";font-style:italic;font-weight:380;font-display:swap;src:url("/fonts/bbs-middleitalic.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/bbs-regular.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/bbs-semibold.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones";font-style:italic;font-weight:600;font-display:swap;src:url("/fonts/bbs-semibolditalic.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones SemiExpanded";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/bbs-smebd.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones SemiExpanded";font-style:italic;font-weight:700;font-display:swap;src:url("/fonts/bbs-smebdit.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones SemiExpanded";font-style:normal;font-weight:350;font-display:swap;src:url("/fonts/bbs-smebk.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones SemiExpanded";font-style:italic;font-weight:350;font-display:swap;src:url("/fonts/bbs-smebkit.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones SemiExpanded";font-style:normal;font-weight:900;font-display:swap;src:url("/fonts/bbs-smeblack.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones SemiExpanded";font-style:italic;font-weight:900;font-display:swap;src:url("/fonts/bbs-smeblackit.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones SemiExpanded";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/bbs-smeeb.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones SemiExpanded";font-style:italic;font-weight:800;font-display:swap;src:url("/fonts/bbs-smeebit.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones SemiExpanded";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/bbs-smeit.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones SemiExpanded";font-style:normal;font-weight:300;font-display:swap;src:url("/fonts/bbs-smelg.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones SemiExpanded";font-style:italic;font-weight:300;font-display:swap;src:url("/fonts/bbs-smelgit.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones SemiExpanded";font-style:normal;font-weight:380;font-display:swap;src:url("/fonts/bbs-smemd.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones SemiExpanded";font-style:italic;font-weight:380;font-display:swap;src:url("/fonts/bbs-smemdit.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones SemiExpanded";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/bbs-smerg.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones SemiExpanded";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/bbs-smesb.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones SemiExpanded";font-style:italic;font-weight:600;font-display:swap;src:url("/fonts/bbs-smesbit.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones SemiExpanded";font-style:normal;font-weight:100;font-display:swap;src:url("/fonts/bbs-smeth.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones SemiExpanded";font-style:italic;font-weight:100;font-display:swap;src:url("/fonts/bbs-smethit.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones";font-style:normal;font-weight:100;font-display:swap;src:url("/fonts/bbs-thin.woff2") format("woff2");}
@font-face{font-family:"BBS Comunicaciones";font-style:italic;font-weight:100;font-display:swap;src:url("/fonts/bbs-thinitalic.woff2") format("woff2");}
h1,h2,h3,h4,h5,h6,.page-header,.panel-title,.card-title,legend,.sidebar-menu-name{font-family:"BBS Comunicaciones",sans-serif!important}