body{
font-family:'Inter',sans-serif;
background:linear-gradient(135deg,#4f7cff,#6fa8ff);
margin:0;
color:#222;
min-height:100vh;
display:flex;
flex-direction:column;
}

/* contenedor */

.container{
max-width:1200px;
margin:auto;
padding:20px;
width:100%;
}

/* header */

header{
background:white;
border-bottom:1px solid #eee;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
font-size:22px;
font-weight:700;
text-decoration:none;
color:#222;
}

/* menu */

.menu a{
margin-left:20px;
text-decoration:none;
color:#444;
font-weight:500;
transition:0.2s;
}

.menu a:hover{
color:#4f7cff;
}

/* layout principal */

.layout{
display:grid;
grid-template-columns:260px 1fr;
gap:30px;
align-items:start;
}

/* sidebar */

.sidebar{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
min-height:calc(100vh - 200px);
display:flex;
flex-direction:column;
}

.sidebar h3{
margin-top:0;
}

/* buscador tools */

.sidebar-search{
margin-bottom:15px;
}

.sidebar-search input{
width:100%;
padding:10px;
border-radius:6px;
border:1px solid #ddd;
}

/* lista tools */

.sidebar a{
display:block;
padding:10px;
border-radius:6px;
text-decoration:none;
color:#333;
transition:0.2s;
}

.sidebar a:hover{
background:#f0f4ff;
color:#4f7cff;
}

/* grid tools */

.tools-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
}

/* cards */

.tool-card{
background:white;
padding:20px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
text-decoration:none;
color:#222;
transition:0.25s;
display:block;
}

.tool-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

/* tool container */

.tool-container{
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 5px 20px rgba(0,0,0,0.05);
}

/* botones */

button{
padding:12px 18px;
border:none;
border-radius:8px;
cursor:pointer;
font-weight:600;
}

.primary-btn{
background:#4f7cff;
color:white;
}

.primary-btn:hover{
background:#3c64d1;
}

.danger-btn{
background:#ff4d4d;
color:white;
}

.danger-btn:hover{
background:#d13c3c;
}

/* ads */

.ad-top{
min-height:90px;
margin:20px 0;
}

.ad-middle{
min-height:250px;
margin:40px 0;
}

.ad-bottom{
min-height:120px;
margin:40px 0;
}

/* contenido SEO */

.content{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
margin-top:20px;
line-height:1.7;
}

/* footer */

footer{
margin-top:auto;
padding:30px;
background:#111;
color:#ccc;
text-align:center;
width:100%;
}