/*
Theme Name: Solo Tetonas
Theme URI: https://solotetonas.com
Author: Andrés Sánchez Botta
Version: 1.4
Description: Tema personalizado Solo Tetonas - Última versión funcional
Text Domain: solotetonas
*/
:root { --bg:#111; --text:#333333; --accent:#e91e63; --shadow:rgba(0,0,0,0.6); --trans:.3s; }
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; }
.container { max-width:1200px; margin:0 auto; padding:0 1rem; }
nav { position:fixed; top:0; left:0; width:100%; padding:1rem 2rem; background:transparent; z-index:100; }
nav img { max-height:80px; width:auto; }
header img.banner { width:100%; display:block; }
.hero, .text-seo, .top-text { margin:2rem 0; }
.hero h1 { font-family:'Oswald',sans-serif; font-size:3rem; color:var(--accent); margin-bottom:1rem; text-align:center; }
.hero p, .text-seo p, .top-text p { font-size:1rem; line-height:1.6; color:#f0f0f0; text-align:justify; margin-bottom:1rem; }
.controls { display:flex; justify-content:center; gap:1rem; margin:2rem 0; }
.controls button { padding:.5rem 1.2rem; border:2px solid var(--accent); background:transparent; color:var(--text); border-radius:30px; cursor:pointer; transition:background var(--trans); }
.controls button.active, .controls button:hover { background:var(--accent); color:var(--bg); }
.section-title { font-family:'Oswald',sans-serif; color:var(--accent); font-size:2rem; text-align:center; margin:2rem 0 1rem; }
.top-section { background:rgba(0,0,0,0.2); padding:1rem; border-radius:8px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; margin-bottom:2rem; }
.item { position:relative; overflow:hidden; border-radius:8px; box-shadow:0 4px 12px var(--shadow); }
.item img { width:100%; height:200px; object-fit:cover; display:block; }
.overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); opacity:0; display:flex; justify-content:center; align-items:center; gap:.5rem; transition:opacity var(--trans); }
.item:hover .overlay { opacity:1; }
.overlay .icon { background:rgba(0,0,0,0.4); border:none; color:#fff; width:32px; height:32px; font-size:.9rem; border-radius:4px; cursor:pointer; transition:background var(--trans); display:flex; align-items:center; justify-content:center; }
.overlay .icon:hover { background:var(--accent); }
.info { position:absolute; bottom:8px; left:8px; color:#fff; font-size:.9rem; text-shadow:0 0 4px #000; }
#pagination { text-align:center; margin:2rem 0; }
#pagination button { margin:0 .5rem; padding:.4rem .8rem; border:1px solid var(--accent); background:transparent; color:var(--text); border-radius:4px; cursor:pointer; }
#pagination button.disabled { opacity:.4; cursor:default; }
footer { padding:2rem 0; background:rgba(0,0,0,0.3); color:#f0f0f0; font-size:.9rem; text-align:center; }
@media(max-width:768px){ .hero h1 { font-size:2.2rem; } .item img { height:150px; } }