/* ========== Terminal Fudo (Webflow) – base scaffold ==========
Nota: reemplaza variables por las del CSS real del sitio para match 1:1.
*/
:root{
--bg:#0b0f1a;
--fg:#ffffff;
--muted:rgba(255,255,255,.72);
--brand:#6b5cff; /* placeholder */
--brand-2:#00d4ff; /* placeholder */
--card:rgba(255,255,255,.06);
--card-b:rgba(255,255,255,.12);
--radius:20px;
--container:1120px;
--gutter:24px;
}
/* webflow resets */
.wf-terminal-body{ background:var(--bg); color:var(--fg); }
.wf-container{
width:100%;
max-width:var(--container);
margin:0 auto;
padding:0 var(--gutter);
}
/* Navbar */
.wf-nav{
position:sticky; top:0; z-index:50;
backdrop-filter: blur(14px);
background:rgba(11,15,26,.72);
border-bottom:1px solid rgba(255,255,255,.08);
}
.wf-nav__inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.wf-nav__links{ display:flex; gap:22px; align-items:center; }
.wf-nav__cta{ display:flex; gap:10px; align-items:center; }
.wf-link{ color:var(--fg); text-decoration:none; opacity:.88; }
.wf-link:hover{ opacity:1; }
.wf-btn{
display:inline-flex; align-items:center; justify-content:center;
padding:12px 16px; border-radius:999px;
text-decoration:none; color:var(--fg);
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.06);
}
.wf-btn--primary{
background:linear-gradient(135deg,var(--brand),var(--brand-2));
border:0;
}
/* Hero */
.wf-hero{ padding:56px 0 24px; }
.wf-hero__grid{
display:grid;
grid-template-columns: 1.1fr .9fr;
gap:32px;
align-items:center;
}
.wf-h1{ font-size:44px; line-height:1.06; margin:0 0 14px; }
.wf-h2{ font-size:34px; line-height:1.12; margin:0 0 14px; }
.wf-p{ color:var(--muted); font-size:18px; line-height:1.5; margin:0 0 22px; }
.wf-hero__media{
border-radius:var(--radius);
background:var(--card);
border:1px solid var(--card-b);
overflow:hidden;
}
.wf-hero__media img{ width:100%; height:auto; display:block; }
/* 3 benefits */
.wf-features{ padding:40px 0; }
.wf-section-title{ font-size:28px; line-height:1.2; margin:0 0 22px; }
.wf-cards3{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px; }
.wf-card{
border-radius:var(--radius);
background:var(--card);
border:1px solid var(--card-b);
padding:18px;
}
.wf-card__icon{ width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.08); margin-bottom:12px; }
.wf-card__title{ font-size:18px; margin:0 0 6px; }
.wf-card__text{ margin:0; color:var(--muted); }
/* Price */
.wf-price{ padding:40px 0; }
.wf-price__box{
display:grid;
grid-template-columns: 1fr 1fr;
gap:18px;
}
.wf-pill{ display:inline-flex; gap:10px; align-items:center; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.wf-small{ color:var(--muted); font-size:14px; line-height:1.4; }
/* Slider wrappers (Webflow slider component) */
.wf-slider-wrap{ padding:40px 0; }
.wf-slide-card{ padding:22px; border-radius:var(--radius); background:var(--card); border:1px solid var(--card-b); }
.wf-quote{ margin:0; color:var(--muted); font-size:16px; line-height:1.6; }
/* Tutorial cards */
.wf-tutorial-card{ border-radius:var(--radius); overflow:hidden; background:var(--card); border:1px solid var(--card-b); }
.wf-tutorial-thumb{ width:100%; height:auto; display:block; }
.wf-tutorial-body{ padding:16px; display:flex; flex-direction:column; gap:10px; }
/* Accordion */
.wf-acc{ border-top:1px solid rgba(255,255,255,.10); }
.wf-acc__item{ border-bottom:1px solid rgba(255,255,255,.10); }
.wf-acc__q{
width:100%;
display:flex; justify-content:space-between; align-items:center;
background:none; color:var(--fg); border:0; padding:16px 0;
font-size:16px; cursor:pointer; text-align:left;
}
.wf-acc__a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.wf-acc__a-inner{ padding:0 0 16px; color:var(--muted); line-height:1.6; }
.wf-acc__item.is-open .wf-acc__a{ max-height:800px; }
/* Modal */
.wf-modal{
position:fixed; inset:0; z-index:100;
display:none; align-items:center; justify-content:center;
}
.wf-modal.is-open{ display:flex; }
.wf-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.wf-modal__panel{
position:relative;
width:min(920px, calc(100% - 32px));
border-radius:24px;
background:rgba(11,15,26,.95);
border:1px solid rgba(255,255,255,.14);
overflow:hidden;
}
.wf-modal__close{
position:absolute; top:12px; right:12px;
width:40px; height:40px; border-radius:999px;
border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.06);
color:var(--fg); cursor:pointer;
}
.wf-modal__iframe{ width:100%; height:min(72vh,720px); border:0; display:block; }
/* Breakpoints (ajusta a los del CSS real para “exacto”) */
@media (max-width: 991px){
.wf-hero__grid{ grid-template-columns:1fr; }
.wf-price__box{ grid-template-columns:1fr; }
}
@media (max-width: 767px){
.wf-h1{ font-size:36px; }
.wf-h2{ font-size:28px; }
.wf-cards3{ grid-template-columns:1fr; }
}
@media (max-width: 479px){
:root{ --gutter:16px; }
.wf-h1{ font-size:32px; }
}
