/*
Theme Name: Datos Forenses
Theme URI: https://criminociencia.com
Author: Academia Criminociencia
Description: Tema de WordPress personalizado para la plataforma Datos Forenses.
Version: 1.1
License: GNU General Public License v2 or later
Text Domain: datos-forenses
*/

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Montserrat', sans-serif; color: #222; background: #ffffff; }
body.home { background: #ffffff; }
body.single, body.archive, body.search { background: #f2f2f2; }

header { display: flex; justify-content: space-between; align-items: center; padding: 20px 8%; border-bottom: 1px solid #eee; background: white; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.logo-container { display: flex; align-items: center; }
.logo-text { font-size: 32px; font-weight: 900; line-height: .9; color: #111; text-decoration: none; }
.logo-text span { color: #e60000; }
nav ul { display: flex; list-style: none; gap: 35px; }
nav a { text-decoration: none; color: #333; font-weight: 600; transition: .3s; }
nav a:hover { color: #e60000; }

.hero { text-align: center; padding: 80px 20px; background: radial-gradient(circle at left, rgba(0,0,0,.04), transparent 30%), radial-gradient(circle at right, rgba(230,0,0,.04), transparent 30%); }
.hero h1 { font-size: 5rem; font-weight: 800; line-height: 1; color: #111; }
.hero span { color: #e60000; }
.hero p { margin-top: 20px; font-size: 1.2rem; color: #666; }
.search-box { max-width: 850px; margin: 30px auto 15px; display: flex; box-shadow: 0 10px 30px rgba(0,0,0,.08); border-radius: 60px; overflow: hidden; background: #fff; }
.search-box input { flex: 1; padding: 22px; border: none; font-size: 1rem; outline: none; }
.search-box button { background: #e60000; color: white; border: none; padding: 0 40px; font-size: 1rem; font-weight: 700; cursor: pointer; transition: .3s; }
.search-box button:hover { background: #c00000; }

.section-title { text-align: center; margin: 40px 0 30px; font-size: 2.5rem; font-weight: 800; }
.section-title span { color: #e60000; }
.categories { width: 90%; margin: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; padding-bottom: 80px; }
.card { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,.08); transition: .4s; display: flex; flex-direction: column; height: 100%; }
.card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,.15); }
.card img { width: 100%; height: 180px; object-fit: cover; }
.card-content { padding: 25px; flex: 1; display: flex; flex-direction: column; }
.card h3 { margin-bottom: 10px; font-size: 1.3rem; }
.card p { color: #666; line-height: 1.6; margin-bottom: 20px; }
.card a { display: inline-block; padding: 10px 25px; border: 2px solid #e60000; color: #e60000; text-decoration: none; border-radius: 30px; font-weight: 700; transition: .3s; margin-top: auto; text-align: center; }
.card a:hover { background: #e60000; color: white; }
.card.ver-todas { background: linear-gradient(135deg, #e60000, #b30000); color: #fff; }
.card.ver-todas h3, .card.ver-todas p { color: #fff; }
.card.ver-todas a { background: #fff; border-color: #fff; color: #e60000; font-weight: 800; }
.card.ver-todas a:hover { background: #111; border-color: #111; color: #fff; }

.stats { background: #111; color: white; padding: 70px 20px; }
.stats-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; max-width: 1000px; margin: auto; text-align: center; }
.stat h2 { font-size: 3rem; color: #ffde00; }
.stat p { margin-top: 10px; }

.container { max-width: 1400px; margin: 20px auto; padding: 0 20px; display: grid; grid-template-columns: 220px 1fr 220px; gap: 20px; align-items: start; }
aside { background: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,.08); height: max-content; overflow: hidden; padding: 18px; }
aside h3 { color: #e60000; margin-top: 0; margin-bottom: 15px; font-size: 1.2rem; border-bottom: 2px solid #f2f2f2; padding-bottom: 8px; }
aside a, aside ul li a { display: block; padding: 7px 0; text-decoration: none; color: #222; font-weight: 500; transition: .2s; }
aside a:hover, aside ul li a:hover { color: #e60000; padding-left: 5px; }
aside ul { list-style: none; padding: 0; margin: 0; }

.main { background: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,.08); height: max-content; overflow: hidden; }
.hero-single img { display: block; width: 100%; height: 420px; object-fit: cover; }
.title-single { margin: 0; background: #ffe100; padding: 16px; text-align: center; font-size: 32px; font-weight: 800; color: #111; }
.text-single { background: linear-gradient(#eef8d7, #d9efc9); padding: 30px; font-size: 21px; line-height: 1.6; color: #222; }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 25px; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 10px; border: 2px solid #e60000; background: #fff; color: #e60000; font-weight: bold; cursor: pointer; text-decoration: none; font-size: 0.95rem; transition: .2s; }
.btn:hover { background: #fff0f0; }
.btn.red { background: #e60000; color: #fff; }
.btn.red:hover { background: #c00000; }

.nav-posts { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-top: 1px solid #eee; }
.nav-left { display: flex; gap: 10px; }

.related { background: #fff; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,.08); margin-top: 20px; padding: 20px; }
.related h2 { color: #e60000; font-size: 1.5rem; margin-bottom: 20px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card-related { background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid #ececec; transition: .25s ease; cursor: pointer; text-decoration: none; color: inherit; display: block;}
.card-related:hover { transform: translateY(-6px); box-shadow: 0 10px 22px rgba(0,0,0,.18); }
.card-related img { width: 100%; height: 160px; object-fit: cover; }
.card-related p { padding: 12px; font-weight: bold; margin: 0; }
.material-icons { font-size: 18px; }

@media(max-width: 1000px) { .container { grid-template-columns: 1fr; } }
@media(max-width: 768px) { .hero h1 { font-size: 3rem; } header { flex-direction: column; gap: 15px; padding: 20px; } nav ul { flex-wrap: wrap; justify-content: center; gap: 16px; } .search-box { flex-direction: column; border-radius: 20px; } .search-box button { padding: 20px; } }
@media(max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media(max-width: 600px) { .grid { grid-template-columns: 1fr; } }
footer { background: #f7f7f7; padding: 30px; text-align: center; color: #666; border-top: 1px solid #eee; }