:root{
  --brand-black:#101217;
  --brand-gray:#171b22;
  --brand-blue:#00c4ff;
  --accent-purple:#ff6f3c;
  --text:#f5f7fa;
  --muted:#aeb6c2;

  --container:72rem;
  --space-xl:clamp(2rem,4vw,4rem);
  --space-lg:clamp(1.25rem,2.5vw,2rem);
  --space-md:clamp(.9rem,2vw,1.25rem);
  --radius-lg:1rem;
}

/* BASE */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{
  margin:0;padding:0;
  background:var(--brand-black);
  color:var(--text);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans","Helvetica Neue",Arial;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}
.wrapper{min-height:100svh;display:flex;flex-direction:column;position:relative;overflow:hidden}
.container{width:100%;max-width:var(--container);padding:0 var(--space-md);margin:0 auto;position:relative;z-index:2}

/* FONDO DECORATIVO */
.bg{
  position:absolute;inset:-20% -20% -20% -20%;
  filter:blur(60px);opacity:.35;z-index:1;pointer-events:none;
  background:
    radial-gradient(38% 38% at 18% 22%, color-mix(in srgb, var(--brand-blue) 65%, #0a0d12), transparent 60%),
    radial-gradient(42% 42% at 82% 28%, color-mix(in srgb, var(--brand-blue) 55%, #0a0d12), transparent 62%),
    radial-gradient(48% 48% at 28% 78%, color-mix(in srgb, var(--brand-blue) 35%, #0a0d12), transparent 64%),
    radial-gradient(44% 44% at 72% 74%, color-mix(in srgb, var(--brand-blue) 45%, #0a0d12), transparent 64%);
  animation:float 18s ease-in-out infinite alternate;
}
@keyframes float{
  0%{transform:translateY(-2%) translateX(-1%)}
  100%{transform:translateY(2%) translateX(1%)}
}
@media (prefers-reduced-motion:reduce){.bg{animation:none}}

/* HEADER (glass) */
.header{
  position:sticky;top:0;z-index:200;
  backdrop-filter:blur(10px) saturate(120%);
  background:linear-gradient(180deg,rgba(11,15,25,.72),rgba(11,15,25,.55));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{
  max-width:var(--container);margin:0 auto;padding:.8rem 1.2rem;
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:1rem;
}
.nav{display:inline-flex;gap:1.5rem}
.nav a{
  position:relative;color:#e5e7eb;text-decoration:none;font-weight:700;letter-spacing:.2px;
  padding:.35rem .1rem;transition:color .2s ease;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  transform:scaleX(0);transform-origin:left;background:var(--brand-blue);transition:transform .25s ease;
}
.nav a:hover{color:#fff}
.nav a:hover::after{transform:scaleX(1)}
.lang{display:inline-flex;align-items:center;gap:.5rem;color:#9ca3af}
.lang a{
  color:#e5e7eb;text-decoration:none;font-weight:700;
  padding:.25rem .35rem;border-radius:.45rem;transition:background .2s,color .2s;
}
.lang a[aria-current="page"]{background:color-mix(in srgb,var(--brand-blue) 18%,transparent);color:#eafff9}
.lang span{opacity:.6}
.header .btn.btn-primary{height:56px;padding:0 1.25rem;border:2px solid var(--brand-blue)}
@media (max-width:860px){
  .header-inner{
    grid-template-columns:1fr 1fr;grid-template-areas:
      "nav cta"
      "lang lang";
    row-gap:.5rem;
  }
  .nav{grid-area:nav;gap:1rem}
  .lang{grid-area:lang;justify-content:center}
  .header .btn{grid-area:cta;justify-self:end}
}

/* HERO */
.hero{text-align:center;padding:clamp(3.5rem,8vw,6rem) 0 var(--space-lg)}
.centered-logo{display:block;margin:0 auto 2rem;height:288px;width:auto;filter:drop-shadow(0 0 6px rgba(0,196,255,0.45));}
.title{font-size:clamp(1.9rem,4.5vw,3.5rem);font-weight:900;line-height:1.08;margin:.25rem 0 0}
.subtitle{color:#cbd5e1;font-size:clamp(1rem,2.8vw,1.25rem);max-width:60ch;margin:.9rem auto 0;line-height:1.7;padding:0 var(--space-md)}

/* SECCIONES */
.section-pad{padding:var(--space-xl) 0}
.h2{font-size:clamp(1.4rem,3vw,2rem);margin:0 0 .5rem}
.lead{color:#cbd5e1;margin:.25rem 0 1rem}
/* Centrar títulos y subtítulos */
section .h2,section h2,section .lead{text-align:center;margin-left:auto;margin-right:auto}
section.contact .lead{text-align:center}

.grid{display:grid;gap:var(--space-md)}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){.grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid.cols-3{grid-template-columns:1fr}}

.card{
  padding:var(--space-md);
  border:1px solid rgba(255,255,255,.08);
  border-radius:.9rem;
  background:color-mix(in srgb,var(--brand-gray) 50%,transparent);
}
.card h3{margin:.25rem 0 .25rem;font-size:clamp(1rem,2.5vw,1.05rem)}
.card p{margin:0;color:var(--muted);font-size:clamp(.95rem,2.5vw,1rem);line-height:1.6}

.iconpill{
  height:42px;width:42px;display:flex;align-items:center;justify-content:center;
  border-radius:.65rem;margin:0 auto .6rem;
  color:var(--brand-blue);
  background:color-mix(in srgb,var(--brand-blue) 15%,transparent);
}

/* BOTONES */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:56px;padding:0 1.25rem;line-height:1;
  font-weight:700;font-size:1rem;letter-spacing:.1px;
  border-radius:.9rem;border:2px solid transparent;text-decoration:none;
  transition:transform .15s ease,opacity .15s ease;
}
.btn-primary{background:var(--brand-blue);color:#000;border-color:var(--brand-blue)}
.btn-ghost{background:transparent;color:var(--brand-blue);border-color:var(--brand-blue)}
.btn-primary:hover,.btn-ghost:hover{opacity:.9;transform:translateY(-1px)}

/* CONTACTO */
#contactForm{display:grid;gap:1rem}
.form-row{display:grid;gap:1rem}
@media (min-width:720px){.form-row{grid-template-columns:1fr 1fr}}
section.contact form input,
section.contact form select,
section.contact form textarea{
  width:100%;color:#e5e7eb;
  background:color-mix(in srgb,var(--brand-gray) 60%,transparent);
  border:1.5px solid var(--brand-gray);
  border-radius:.9rem;outline:none;font-size:1rem;box-sizing:border-box;
}
section.contact form input,section.contact form select{height:48px;padding:0 1rem}
section.contact form textarea{min-height:140px;padding:1rem;resize:vertical}
section.contact form :is(input,select,textarea):focus{border-color:var(--brand-blue)}
section.contact .note{color:#9fb3c8;font-size:.9rem}
section.contact form .btn{height:56px;padding:0 1.25rem;justify-self:start}

/* FOOTER con widget IP inline */
.footer{
  border-top:1px solid rgba(255,255,255,.08);
  background:var(--brand-black);
  padding:1rem 0;margin-top:auto;
}
.footer-inner{
  max-width:var(--container);margin:0 auto;padding:0 1rem;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
}
.footer-left{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.footer-left img{height:24px;width:auto}
.copy{font-size:.95rem;color:#e5e7eb}
.footer .link,.link,section.contact .lead .link{
  color:var(--brand-blue);text-decoration:none;font-size:.95rem;font-weight:500;
}
.footer .link:hover,.link:hover,section.contact .lead .link:hover{text-decoration:underline}

.ip-widget{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  min-width:220px;
  color:#e5e7eb;
  font-size:.9rem;
  background: color-mix(in srgb, var(--brand-blue) 15%, var(--brand-gray));
  border: 1px solid rgba(255,255,255,.1);
  padding: .35rem .6rem;
  border-radius: .6rem;
  line-height: 1.2;
  text-align:center;
}

/* AVISO DE PRIVACIDAD */
main.container.hero{text-align:center;padding-top:4rem}
main.container.hero .title{margin-bottom:1rem}
main.container.hero .subtitle{
  max-width:50rem;margin:0 auto 2rem;text-align:justify;
  line-height:1.8;color:#cbd5e1;
}
.panel{margin:var(--space-xl) auto 0;max-width:var(--container);padding:var(--space-lg);
  border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--brand-gray) 65%,transparent);box-shadow:0 10px 40px rgba(0,0,0,.35);
}
.panel article.card{
  max-width:50rem;margin:0 auto;text-align:justify;line-height:1.8;background:transparent;border:none;padding:0;
}
.panel article.card h2{
  color:var(--brand-blue);
  text-align:left;margin-top:1.5rem;font-size:1.25rem;
}
.panel article.card p{text-align:justify;margin-bottom:1rem}
.panel article.card ul{list-style:none;margin:0 0 1rem 0;padding:0}
.panel article.card ul li{margin-bottom:.5rem;text-align:justify}
.panel article.card a.mail{color:var(--brand-blue);text-decoration:none}
.panel article.card a.mail:hover{text-decoration:underline}

/* RESPONSIVE */
@media (max-width:768px){
  .hero{padding:clamp(2.5rem,7vw,4rem) 0 var(--space-lg)}
}

/* --------- TOOLS PAGE ENHANCEMENTS --------- */
.tools-layout{display:grid;grid-template-columns:260px 1fr;gap:1.25rem;align-items:start}
@media (max-width:980px){.tools-layout{grid-template-columns:1fr} .toolbox{position:relative;top:auto}}
.breadcrumbs{max-width:var(--container);margin:-.5rem auto 1rem;padding:0 var(--space-md);font-size:.95rem;color:var(--muted)}
.breadcrumbs a{color:var(--brand-blue);text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.breadcrumbs .sep{opacity:.5;margin:0 .35rem}
.toolbox{position:sticky;top:84px;padding:1rem;border:1px solid rgba(255,255,255,.08);border-radius:.9rem;
  background:color-mix(in srgb,var(--brand-gray) 55%, transparent)}
.toolbox h4{margin:.25rem 0 1rem;font-size:1.05rem}
.toolbox .search{display:flex;gap:.5rem;margin-bottom:.75rem}
.toolbox .search input{flex:1;height:40px;border-radius:.6rem;border:1px solid var(--brand-gray);
  background:color-mix(in srgb,var(--brand-gray) 65%, transparent);color:var(--text);padding:0 .75rem}
.toolbox .tags{display:flex;flex-wrap:wrap;gap:.5rem}
.toolbox .tag{padding:.25rem .5rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.1);
  background:color-mix(in srgb,var(--brand-blue) 12%, transparent);color:var(--text);font-size:.85rem;cursor:pointer}
.toolbox .tag.active{background:color-mix(in srgb,var(--brand-blue) 24%, transparent)}
.tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media (max-width:1024px){.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.tools-grid{grid-template-columns:1fr}}
.tool-card{display:flex;flex-direction:column;gap:.5rem;padding:1rem;border-radius:.9rem;
  border:1px solid rgba(255,255,255,.08);
  background:color-mix(in srgb,var(--brand-gray) 60%, transparent);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.tool-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.35);border-color:color-mix(in srgb,var(--brand-blue) 35%, rgba(255,255,255,.1))}
.tool-card .head{display:flex;align-items:center;gap:.65rem}
.tool-card .head .icon{height:40px;width:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:.7rem;
  color:var(--brand-blue);background:color-mix(in srgb,var(--brand-blue) 18%, transparent)}
.tool-card p{color:var(--muted);flex:1}
.tool-card .actions{display:flex;justify-content:space-between;align-items:center;margin-top:.25rem}
.tool-card .actions .pill{font-size:.8rem;color:var(--muted)}
.btn-try{height:44px;padding:0 1rem;border-radius:.7rem;border:2px solid var(--brand-blue);
  background:transparent;color:var(--brand-blue);font-weight:800;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.btn-try:hover{background:var(--brand-blue);color:#000}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.section-title h3{margin:0}
.section-title .count{color:var(--muted);font-size:.95rem}
.history{margin-top:1rem;font-size:.9rem;color:var(--muted)}
.history ul{list-style:none;padding:0;margin:.25rem 0}
.history li{margin:.25rem 0}

/* WIDE TOOLBOX BAR */
.toolbox-wide{position:relative;top:auto;width:100%;display:flex;flex-direction:column;gap:.6rem}
.toolbox-wide .search{order:1}
.toolbox-wide .tags{order:2}
.toolbox-wide .history{order:3}