/* Tokens */
:root{
  --headerH: 80px;
  --bg:#ffffff; --ink:#0f172a; --muted:#475569;
  --brand:#2563eb; --brand-2:#1d4ed8; --brand-3:#3b82f6;
  --border:#e6eefc; --card:#ffffff; --alt:#f7fbff;
  --shadow:0 20px 50px rgba(2,6,23,.08); --radius:18px;
}
:root[data-theme="dark"]{
  --bg:#0b1220; --ink:#e6eefc; --muted:#b4c5e4;
  --card:#0f172a; --alt:#0b152a; --border:#1e2a45;
  --shadow:0 20px 50px rgba(0,0,0,.35);
}
*{box-sizing:border-box} body{margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--ink); line-height:1.6}
a{text-decoration:none; color:inherit} img{max-width:100%; display:block}
.container{width:min(1200px,92vw); margin-inline:auto}
.section{padding:clamp(3rem,5vw,5rem) 0}
.section.alt{background:var(--alt)}
h1,h2,h3,h4{margin:.2rem 0 .6rem; line-height:1.2}
h1{font-size:clamp(2rem,4vw,3.2rem); letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,3vw,2.1rem)} h3{font-size:1.2rem} h4{font-size:1.05rem}
.lead{font-size:1.1rem; color:var(--muted)} .muted{color:var(--muted)} .small{font-size:.9rem}
.grad{background:linear-gradient(90deg,#60a5fa,#3b82f6,#2563eb); -webkit-background-clip:text; background-clip:text; color:transparent}
.srid-chip{ display:inline-block; margin:.25rem 0 .8rem; padding:.4rem .8rem; border-radius:999px; font-weight:800; font-size:.9rem; color:#0f172a; background:#e0f2fe; border:1px solid #bae6fd }
:root[data-theme="dark"] .srid-chip{ color:#e6eefc; background:#0b152a; border-color:#1e2a45 }

/* Header */
.header{position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.85); backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--border); padding-top: max(0px, env(safe-area-inset-top));}
:root[data-theme="dark"] .header{background:rgba(11,18,32,.6)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:var(--headerH)}
.brand{display:flex; align-items:center; gap:.65rem; font-weight:800}
.logo{height:60px} .logo.sm{height:30px}
.brand-text{font-weight:800}
.brand-badge{ margin-left:.5rem; padding:.2rem .5rem; border-radius:999px; border:1px solid #dbeafe; background:#eef5ff; color:#1e3a8a; font-weight:800; font-size:.8rem }
:root[data-theme="dark"] .brand-badge{ background:#0b152a; color:#93c5fd; border-color:#1e2a45 }
.navbar{display:flex; gap:1rem; align-items:center}
.nav-item{color:var(--ink); padding:.6rem .7rem; border-radius:.75rem; position:relative}
.nav-item:hover{background:var(--alt)}
.nav-actions{display:flex; align-items:center; gap:.5rem}
.hamb{display:none; background:transparent; border:0; font-size:1.6rem; cursor:pointer; line-height:1; padding:.4rem .6rem; border-radius:12px}
.hamb .bar{ display:block; width:22px; height:2px; background:currentColor; margin:5px 0; border-radius:2px; transition:transform .2s ease, opacity .2s ease }
.hamb.open .bar:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.hamb.open .bar:nth-child(2){ opacity:0 }
.hamb.open .bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
.mobile-overlay{ position:fixed; inset:0; background:rgba(2,6,23,.35); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:999 }
.mobile-overlay.show{ opacity:1; pointer-events:auto }

/* Mobile menu */
@media (max-width:680px){
  .hamb{display:block}
  .navbar{ position:fixed; left:0; right:0; top:calc(var(--headerH) + 8px); transform:translateY(-12px); opacity:0; pointer-events:none; z-index:1001 }
  .navbar.open{ transform:translateY(0); opacity:1; pointer-events:auto }
  .mobile-panel{ margin:0 12px; background:rgba(255,255,255,.96); border:1px solid var(--border); border-radius:16px; box-shadow:0 20px 50px rgba(2,6,23,.25); overflow:hidden; max-height: calc(100vh - var(--headerH) - max(0px, env(safe-area-inset-top)) - 16px); -webkit-overflow-scrolling: touch; }
  :root[data-theme="dark"] .mobile-panel{ background:rgba(15,23,42,.94) }
  .mobile-panel .nav-item{ display:block; padding:1rem 1rem; border-bottom:1px solid var(--border); min-height:44px }
  .mobile-panel .nav-item:last-child{ border-bottom:0 }
}

/* Active indicator */
.nav-item::after{ content:""; position:absolute; left:.6rem; right:.6rem; bottom:.25rem; height:2px; background:linear-gradient(90deg, var(--brand), var(--brand-3)); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; border-radius:2px}
.nav-item:hover::after{ transform:scaleX(1) }
.nav-item.active{ color:var(--brand); font-weight:800 }
.nav-item.active::after{ transform:scaleX(1) }
:root[data-theme="dark"] .nav-item::after{ background:linear-gradient(90deg, #06b6d4, #67e8f9) }
@media(max-width:680px){
  .mobile-panel .nav-item::after{ display:none }
  .mobile-panel .nav-item.active{ background:transparent; color:var(--brand); border-left:3px solid var(--brand); padding-left:.6rem }
}

/* Hero */
.hero{padding-top:1rem}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
.hero-art img{border-radius:24px; border:1px solid var(--border); box-shadow:var(--shadow)}
.checklist{display:grid; gap:.25rem; margin-top:1rem; color:var(--muted)}
.checklist li::marker{content:"✓ "}

/* Buttons/badges */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; border-radius:12px; padding:.6rem 1rem; border:1px solid var(--border)}
.btn-primary{background:var(--brand); color:#fff; border-color:transparent; font-weight:800}
.btn-outline{background:transparent}
.btn-link{ color:var(--brand); font-weight:800 }
.btn-ghost{ background:transparent; border:1px dashed var(--border) }
.btn-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#dcfce7; color:#166534; border:1px solid #bbf7d0;
  font-weight:800; padding:.45rem .85rem; border-radius:999px;
  transition:transform .06s ease, filter .15s ease; text-decoration:none;
}
.btn-badge:hover{ filter:brightness(0.97) }
.btn-badge:active{ transform:translateY(1px) }
.btn-badge:focus-visible{ outline:3px solid #86efac; outline-offset:2px }
:root[data-theme="dark"] .btn-badge{ background:#052e16; color:#86efac; border-color:#14532d }

/* Cards/grid */
.grid{display:grid; gap:1.25rem}
.cards-3{grid-template-columns:repeat(3,1fr)}
.cards-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow)}
.card img{border-radius:12px; margin-bottom:.75rem}
.split{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center}
.rounded{border-radius:18px; border:1px solid var(--border); box-shadow:var(--shadow)}

/* Videos */
.videos{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem }
@media (max-width:1000px){ .videos{ grid-template-columns:1fr 1fr } }
@media (max-width:680px){ .videos{ grid-template-columns:1fr } }
.video-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:.6rem; box-shadow:var(--shadow) }
.ratio{ position:relative; width:100%; padding-top:56.25%; overflow:hidden; border-radius:12px; border:1px solid var(--border) }
.ratio iframe{ position:absolute; inset:0; width:100%; height:100% }

/* Pricing */
.chip{background:#eef5ff; color:#1e3a8a; border:1px solid #dbeafe; padding:.2rem .5rem; border-radius:999px; font-size:.8rem}
.pricing{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:1rem}
.price{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1rem; text-align:center; box-shadow:var(--shadow)}
.price .num{font-size:1.4rem; font-weight:800; margin:.5rem 0}
.price.hi{outline:2px solid #93c5fd}
.mini-note{ font-size:.8rem; color:var(--muted); margin-top:-.25rem; margin-bottom:.4rem }

/* Comparativa */
.cmp-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.5rem }
.economy-badge{ background:#dcfce7; color:#166534; border:1px solid #bbf7d0; font-weight:800; padding:.25rem .6rem; border-radius:999px }
:root[data-theme="dark"] .economy-badge{ background:#052e16; color:#86efac; border-color:#14532d }
.has-tip{ position:relative }
.has-tip::after{ content: attr(data-tip); position:absolute; left:50%; transform:translateX(-50%); bottom:calc(100% + 8px); background:rgba(15,23,42,.95); color:#e6eefc; padding:.45rem .6rem; border-radius:8px; font-size:.85rem; border:1px solid #1e2a45; box-shadow:var(--shadow); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease }
.has-tip:hover::after, .has-tip:focus-visible::after{ opacity:1 }
:root[data-theme="light"] .has-tip::after{ background:#111827; color:#fff; border-color:#111827 }

.cmp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem }
.cmp-card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1rem; box-shadow:var(--shadow) }
.cmp-card h3{ margin-top:0 }
.cmp-card ul{ margin:0; padding-left:1.1rem }
.cmp-card li{ margin:.25rem 0 }
.cmp-card.ours{ outline:2px solid #93c5fd }
.cmp-card.highlight{ background:linear-gradient(180deg, rgba(37,99,235,.08), transparent); border-color:#bfd7ff }
.save{ font-weight:900 }
.ok{ color:#16a34a; font-weight:900 }
.tiny{ font-size:.8rem }

/* CTA */
.cta{background:linear-gradient(90deg,#1d4ed8,#2563eb,#3b82f6); color:#fff; padding:3rem 0; margin-top:2rem}
.cta-box{display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap}

/* Footer */
.footer{background:var(--alt); border-top:1px solid var(--border); margin-top:2rem; padding:2.5rem 0}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:1.5rem; align-items:flex-start}
.footer nav h4{ margin:.2rem 0 .6rem; font-size:1rem }
.footer nav a{ display:block; color:var(--muted); padding:.2rem 0 }
.footer .brand-foot{ display:flex; align-items:center; gap:.6rem; margin-bottom:.4rem }
.badges{ display:flex; gap:.5rem; flex-wrap:wrap }
.badge{ background:#eef5ff; color:#1e3a8a; border:1px solid #dbeafe; border-radius:999px; padding:.15rem .5rem; font-size:.75rem; font-weight:800 }
:root[data-theme="dark"] .badge{ background:#0b152a; color:#93c5fd; border-color:#1e2a45 }
@media (max-width:1000px){ .foot-grid{ grid-template-columns:1fr 1fr } }
@media (max-width:680px){ .foot-grid{ grid-template-columns:1fr } }

/* Responsive */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .cards-3{grid-template-columns:repeat(2,1fr)}
  .pricing{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
}
@media (max-width:680px){
  .brand-text{ display:none }
  .brand-badge{ display:none }
  .logo{ height:44px }
  .cards-3{grid-template-columns:1fr}
  .cards-4{grid-template-columns:1fr 1fr}
}

/* Smooth anchor spacing */
section{ scroll-margin-top: calc(var(--headerH) + 12px) }

/* FABs */
@media (max-width:680px){
  .fab-create{
    position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); 
    padding:.6rem 1rem; z-index:1100; box-shadow:0 10px 30px rgba(22,101,52,.25);
  }
  .fab-whatsapp{
    position:fixed; right:16px; bottom:calc(16px + 56px + 12px + env(safe-area-inset-bottom));
    width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    z-index:1100; background:#25D366; color:#fff; border:0; text-decoration:none;
    box-shadow:0 10px 30px rgba(37,211,102,.35);
  }
  .mobile-overlay.show + .fab-create, .fab-create.hide{ display:none }
}

/* Badge Cumple AGN */
.badge-agn{
  display:inline-block; margin-left:.4rem; padding:.15rem .5rem;
  font-size:.72rem; font-weight:800; border-radius:999px;
  background:#e0f2fe; color:#075985; border:1px solid #bae6fd;
  vertical-align:middle;
}
:root[data-theme="dark"] .badge-agn{ background:#0b152a; color:#7dd3fc; border-color:#1e2a45 }

/* Emphasis for the long product phrase in hero */
.punch{
  font-weight:900;
  font-size:.95em; /* slightly smaller than h1 */
  letter-spacing:-.01em;
  position:relative;
}
.punch::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:6px;
  background:linear-gradient(90deg,#60a5fa,#3b82f6,#2563eb);
  border-radius:6px; opacity:.35;
}
:root[data-theme="dark"] .punch::after{ opacity:.5 }

/* Callouts */
.callout{
  display:inline-block; margin:.75rem 0; padding:.55rem .9rem;
  border-radius:999px; font-weight:900; letter-spacing:-.01em;
  border:1px solid #dbeafe; background:#eef5ff; color:#1e3a8a;
  box-shadow:0 10px 30px rgba(59,130,246,.12);
}
.callout.inline{ display:block; border-radius:14px }
.callout.alt{ background:#dcfce7; color:#166534; border-color:#bbf7d0; box-shadow:0 10px 30px rgba(22,101,52,.12) }
.grad-pill{
  background:linear-gradient(90deg,#e0f2fe,#dbeafe,#dcfce7);
  color:#0f172a; border-color:#dbeafe;
}
:root[data-theme="dark"] .callout{ background:#0b152a; color:#93c5fd; border-color:#1e2a45; box-shadow:0 10px 30px rgba(0,0,0,.35) }
:root[data-theme="dark"] .callout.alt{ background:#052e16; color:#86efac; border-color:#14532d }
:root[data-theme="dark"] .grad-pill{ background:linear-gradient(90deg,#0b152a,#0b1220,#052e16); color:#e6eefc; border-color:#1e2a45 }

/* === Hosting banner (AWS + Cloud) === */
.hosting-amazon{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:10px 0 14px;
}
.hosting-amazon .hosting-text{
  font-size:14px;
  line-height:1.25;
}
.hosting-amazon .logo{
  height:32px;
  vertical-align:middle;
  display:inline-block;
}
@media (max-width: 640px){
  .hosting-amazon .logo{ height:28px; }
}
/* Cloud 3D visual treatment */
.logo-cloud{
  border-radius:10px;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 18px rgba(0,0,0,.15);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.04));
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.logo-aws{
  transition: transform .15s ease, filter .15s ease;
}
.hosting-amazon .logo:hover{
  transform: translateY(-1px);
  filter: saturate(1.05);
}

/* === Dark mode adjustments for hosting banner === */
@media (prefers-color-scheme: dark){
  .hosting-amazon .hosting-text{ color:#e8eef9; }
  .hosting-amazon .logo-cloud{
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.08)) brightness(.95) saturate(1.05);
  }
  .hosting-amazon .logo-aws{
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.06)) brightness(.96);
  }
}
/* Larger desktops */
@media (min-width: 1280px){
  .hosting-amazon .logo{ height:36px; }
}


/* IEEE membership badge */
.badge-ieee{
  display:inline-block;
  vertical-align:middle;
  margin-left: .75rem;
}
.badge-ieee img{
  height:auto;
  display:block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.1));
}
@media (max-width: 640px){
  .badge-ieee{ display:block; margin: .5rem 0 0; }
}


/* === IEEE membership block === */
.ieee-membership{ margin-top: .75rem; }
.ieee-membership .ieee-logo.header{ display:block; max-width: 520px; width: 100%; height:auto; margin: .25rem 0; }
.ieee-membership .ieee-row{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.ieee-membership .ieee-logo.main{ display:block; max-width: 240px; width: 100%; height:auto; }
.ieee-membership .ieee-caption{ font-weight:700; font-size: .95rem; color:#0b3a6e; }
@media (max-width:640px){
  .ieee-membership .ieee-logo.header{ max-width:100%; }
  .ieee-membership .ieee-logo.main{ max-width:180px; }
}


/* Permisos section */
.section.alt{ background:var(--alt) }
.feature-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:24px; align-items:start }
.feature ul{ margin:0; padding-left:1rem }
.feature li{ margin-bottom:.35rem }
.screenshot{ margin-top:18px }
.screenshot img{ width:100%; height:auto; border-radius:12px; box-shadow: var(--shadow) }
@media (max-width:680px){
  .feature-grid{ grid-template-columns:1fr }
}


/* ---- Permisos: detalle ---- */
.table-wrap{ overflow:auto; border:1px solid var(--border); border-radius:12px; background:var(--card) }
table.roles{ width:100%; border-collapse:collapse; font-size:.95rem }
table.roles thead th{ text-align:left; background:var(--alt); border-bottom:1px solid var(--border); padding:.75rem }
table.roles td{ padding:.6rem .75rem; border-bottom:1px solid var(--border) }
table.roles tr:last-child td{ border-bottom:0 }
pre.code{ background:var(--alt); padding:12px 14px; border-radius:10px; overflow:auto; border:1px dashed var(--border) }
.btn{ display:inline-block; padding:.55rem .9rem; border-radius:10px; background:var(--brand); color:#fff; font-weight:600 }
.flow{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:.5rem 0 1rem }
.node{ padding:.55rem .7rem; border:1px solid var(--border); border-radius:999px; background:var(--card); box-shadow:var(--shadow); font-weight:600 }
.arrow{ font-size:1.2rem; opacity:.7 }
.tips{ margin:.5rem 0 0 1.1rem }
.grid.cards-2{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:20px }
@media (max-width:680px){ .grid.cards-2{ grid-template-columns:1fr } }


/* --- Hero Rotator --- */
.hero-rotator{ position:relative; width:min(1200px,92vw); margin:18px auto 10px; aspect-ratio: 16/7; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); background:var(--alt) }
.hero-rotator .slides{ position:relative; width:100%; height:100% }
.hero-rotator .slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease }
.hero-rotator .slide.is-active{ opacity:1 }
.hero-rotator-controls{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between; padding:0 8px; pointer-events:none }
.hero-rotator-controls button{ pointer-events:auto; border:0; background:rgba(0,0,0,.35); color:#fff; width:36px; height:36px; border-radius:999px; font-size:20px; font-weight:700; display:grid; place-items:center }
.hero-rotator .dots{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; gap:8px; }
.hero-rotator .dots button{ pointer-events:auto; width:9px; height:9px; border-radius:999px; border:0; background:rgba(255,255,255,.6) }
.hero-rotator .dots button[aria-current="true"]{ background:#fff }
@media (max-width:680px){ .hero-rotator{ aspect-ratio: 16/10 } }