/* PORTAL PRO v3 — CSS principal */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Sans:wght@400;600;700&display=swap');

:root {
  --rojo: #c0392b;
  --negro: #111111;
  --gris1: #333;
  --gris2: #666;
  --gris3: #999;
  --borde: #e5e5e5;
  --fondo: #f4f4f4;
  --blanco: #fff;
  --sombra: 0 2px 8px rgba(0,0,0,.07);
  --sombra2: 0 6px 24px rgba(0,0,0,.13);
  --radio: 5px;
  --fw: 1180px;
  --sw: 290px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; scroll-behavior:smooth }
body { font-family:'Source Serif 4',Georgia,serif; background:var(--fondo); color:var(--negro); line-height:1.6; -webkit-font-smoothing:antialiased }
img { max-width:100%; height:auto; display:block }
a { color:inherit; text-decoration:none; transition:color .18s }
ul { list-style:none }

/* ── Layout ── */
.wrap { max-width:var(--fw); margin:0 auto; padding:0 18px }
.layout { display:grid; grid-template-columns:1fr var(--sw); gap:28px; margin:28px 0 60px }
.layout.full { grid-template-columns:1fr }
@media(max-width:900px){ .layout { grid-template-columns:1fr } }

/* ── Header ── */
.site-header { background:var(--negro); border-bottom:3px solid var(--rojo); position:sticky; top:0; z-index:200; box-shadow:0 2px 20px rgba(0,0,0,.3) }
.h-inner { display:flex; align-items:center; justify-content:space-between; padding:13px 0; gap:14px; flex-wrap:wrap }
.h-logo { font-family:'Playfair Display',serif; font-size:1.7rem; font-weight:900; color:#fff; letter-spacing:-.5px; line-height:1 }
.h-logo b { color:var(--rojo) }
.h-logo:hover { color:#fff }
.h-search { display:flex }
.h-search input { padding:7px 13px; border:1px solid #2a2a2a; background:#1a1a1a; color:#fff; font-family:'IBM Plex Sans',sans-serif; font-size:.82rem; width:180px; border-radius:var(--radio) 0 0 var(--radio); outline:none; transition:border-color .2s }
.h-search input:focus { border-color:var(--rojo) }
.h-search input::placeholder { color:#555 }
.h-search button { padding:7px 12px; background:var(--rojo); border:none; color:#fff; cursor:pointer; border-radius:0 var(--radio) var(--radio) 0; font-size:.88rem; transition:background .2s }
.h-search button:hover { background:#a93226 }
.h-menu-btn { display:none; background:none; border:1px solid #333; color:#fff; padding:6px 9px; border-radius:var(--radio); cursor:pointer; font-size:1.1rem; line-height:1 }
.h-nav { background:#161616; border-top:1px solid #1e1e1e }
.h-nav ul { display:flex; overflow-x:auto; scrollbar-width:none }
.h-nav ul::-webkit-scrollbar { display:none }
.h-nav a { display:block; padding:9px 16px; font-family:'IBM Plex Sans',sans-serif; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:#aaa; white-space:nowrap; border-bottom:2px solid transparent; transition:all .18s }
.h-nav a:hover, .h-nav a.on { color:#fff; border-bottom-color:var(--rojo) }
@media(max-width:640px){
  .h-menu-btn { display:flex; align-items:center }
  .h-nav ul { flex-direction:column; display:none }
  .h-nav ul.open { display:flex }
  .h-nav a { border-bottom:1px solid #1e1e1e; padding:11px 18px }
  .h-search input { width:120px }
  .h-logo { font-size:1.25rem }
}

/* Ticker */
.ticker { background:var(--rojo); color:#fff; font-family:'IBM Plex Sans',sans-serif; font-size:.75rem; display:flex; align-items:center; height:28px; overflow:hidden }
.ticker-tag { background:rgba(0,0,0,.3); padding:0 14px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; height:100%; display:flex; align-items:center; flex-shrink:0; font-size:.68rem }
.ticker-track { flex:1; overflow:hidden }
.ticker-roll { display:flex; animation:roll 50s linear infinite; white-space:nowrap }
.ticker-roll a { color:#fff; padding:0 36px; display:inline-block }
.ticker-roll a:hover { text-decoration:underline }
@keyframes roll { 0%{transform:translateX(100%)} 100%{transform:translateX(-100%)} }

/* ── Carrusel ── */
.carrusel { position:relative; overflow:hidden; background:#000; border-radius:var(--radio); aspect-ratio:16/7; margin-bottom:28px }
@media(max-width:560px){ .carrusel { aspect-ratio:4/3 } }
.car-slide { position:absolute; inset:0; opacity:0; transition:opacity .6s ease; pointer-events:none }
.car-slide.on { opacity:1; pointer-events:all; z-index:1 }
.car-slide img { width:100%; height:100%; object-fit:cover; filter:brightness(.45) }
.car-info { position:absolute; bottom:0; left:0; right:0; padding:36px 32px 24px; background:linear-gradient(to top,rgba(0,0,0,.88),transparent); z-index:2 }
@media(max-width:540px){ .car-info { padding:18px } }
.car-cat { display:inline-block; background:var(--rojo); color:#fff; font-family:'IBM Plex Sans',sans-serif; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:3px 9px; border-radius:2px; margin-bottom:7px }
.car-title { font-family:'Playfair Display',serif; font-size:clamp(1.1rem,3vw,2rem); font-weight:700; color:#fff; line-height:1.2; margin-bottom:8px; text-shadow:0 1px 8px rgba(0,0,0,.5) }
.car-res { font-family:'IBM Plex Sans',sans-serif; color:rgba(255,255,255,.75); font-size:.84rem; margin-bottom:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
@media(max-width:480px){ .car-res { display:none } }
.car-btn { display:inline-flex; align-items:center; gap:5px; font-family:'IBM Plex Sans',sans-serif; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:6px 14px; background:var(--rojo); color:#fff; border-radius:var(--radio); transition:background .18s }
.car-btn:hover { background:#a93226; color:#fff }
.car-dots { position:absolute; bottom:16px; right:26px; display:flex; gap:5px; z-index:3 }
.car-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.3); border:none; cursor:pointer; transition:all .3s; padding:0 }
.car-dot.on { background:var(--rojo); width:20px; border-radius:3px }
.car-arr { position:absolute; top:50%; transform:translateY(-50%); width:100%; display:flex; justify-content:space-between; padding:0 10px; z-index:3; pointer-events:none }
.car-arr button { pointer-events:all; background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.15); color:#fff; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.9rem; transition:all .18s }
.car-arr button:hover { background:var(--rojo); border-color:var(--rojo) }

/* ── Noticias grid ── */
.sec { margin-bottom:40px }
.sec-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; padding-bottom:9px; border-bottom:2px solid var(--negro) }
.sec-tit { font-family:'Playfair Display',serif; font-size:1.35rem; font-weight:700 }
.sec-mas { font-family:'IBM Plex Sans',sans-serif; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--gris3); border-bottom:1px dotted currentColor }
.sec-mas:hover { color:var(--rojo) }
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
@media(max-width:700px){ .grid { grid-template-columns:repeat(2,1fr) } }
@media(max-width:440px){ .grid { grid-template-columns:1fr } }
.card { background:var(--blanco); border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); transition:transform .18s,box-shadow .18s }
.card:hover { transform:translateY(-3px); box-shadow:var(--sombra2) }
.card-img { aspect-ratio:16/9; overflow:hidden; background:#e8e8e8 }
.card-img img { width:100%; height:100%; object-fit:cover; transition:transform .35s }
.card:hover .card-img img { transform:scale(1.05) }
.card-body { padding:13px }
.card-cat { font-family:'IBM Plex Sans',sans-serif; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--rojo); margin-bottom:4px }
.card-tit { font-family:'Playfair Display',serif; font-size:.94rem; font-weight:700; line-height:1.3; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.card-res { font-family:'IBM Plex Sans',sans-serif; font-size:.78rem; color:var(--gris2); margin-bottom:9px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.card-foot { display:flex; justify-content:space-between; align-items:center }
.card-fecha { font-family:'IBM Plex Sans',sans-serif; font-size:.68rem; color:var(--gris3) }
.leer { font-family:'IBM Plex Sans',sans-serif; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--rojo); border:1.5px solid var(--rojo); padding:3px 9px; border-radius:3px; transition:all .18s }
.leer:hover { background:var(--rojo); color:#fff }

/* ── Sidebar ── */
.widget { background:var(--blanco); border-radius:var(--radio); box-shadow:var(--sombra); margin-bottom:20px; overflow:hidden }
.widget-h { background:var(--negro); color:#fff; font-family:'IBM Plex Sans',sans-serif; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:8px 14px; border-left:3px solid var(--rojo) }
.widget-b { padding:14px }
.pop { display:flex; flex-direction:column; gap:12px }
.pop-item { display:flex; gap:9px; align-items:flex-start }
.pop-n { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; color:var(--borde); line-height:1; min-width:24px }
.pop-tit { font-family:'Playfair Display',serif; font-size:.84rem; font-weight:700; line-height:1.3; color:var(--negro); transition:color .18s }
.pop-item a:hover .pop-tit { color:var(--rojo) }
.pop-fecha { font-family:'IBM Plex Sans',sans-serif; font-size:.65rem; color:var(--gris3); margin-top:2px }
.cat-list { display:flex; flex-direction:column }
.cat-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--borde); font-family:'IBM Plex Sans',sans-serif; font-size:.82rem }
.cat-row:last-child { border-bottom:none }
.cat-row a { color:var(--gris1); transition:color .18s }
.cat-row a:hover { color:var(--rojo) }
.cat-cnt { background:var(--borde); padding:1px 8px; border-radius:20px; font-size:.68rem; color:var(--gris3) }
.ad-box { background:#f9f9f9; border:1px dashed #ddd; min-height:250px; display:flex; align-items:center; justify-content:center; color:#ccc; font-family:'IBM Plex Sans',sans-serif; font-size:.7rem; text-align:center; border-radius:var(--radio); padding:12px }

/* ── Artículo ── */
.art-meta { display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap }
.art-cat { background:var(--rojo); color:#fff; font-family:'IBM Plex Sans',sans-serif; font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:3px 9px; border-radius:2px }
.art-fecha { font-family:'IBM Plex Sans',sans-serif; font-size:.74rem; color:var(--gris3) }
.art-tit { font-family:'Playfair Display',serif; font-size:clamp(1.4rem,4vw,2.3rem); font-weight:900; line-height:1.2; margin-bottom:13px }
.art-lead { font-family:'IBM Plex Sans',sans-serif; font-size:.97rem; color:var(--gris2); font-style:italic; border-left:3px solid var(--rojo); padding-left:13px; margin-bottom:18px; line-height:1.6 }
.art-img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radio); margin-bottom:22px }
.art-body { font-size:1.02rem; line-height:1.84; color:var(--gris1) }
.art-body p { margin-bottom:1.25em }
.art-body h2 { font-family:'Playfair Display',serif; font-size:1.3rem; margin:1.3em 0 .4em }
.art-body h3 { font-family:'Playfair Display',serif; font-size:1.1rem; margin:1.1em 0 .3em }
.art-body blockquote { border-left:4px solid var(--rojo); padding:10px 18px; background:#f9f9f9; margin:1.3em 0; font-style:italic; color:var(--gris2) }
.art-body img { border-radius:var(--radio); margin:1em 0; max-width:100% }
.art-body ul,.art-body ol { padding-left:1.4em; margin-bottom:1.2em }
.art-body li { margin-bottom:.4em }
.art-body a { color:var(--rojo); text-decoration:underline }

/* Compartir */
.share { background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio); padding:12px 16px; margin:20px 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.share-lbl { font-family:'IBM Plex Sans',sans-serif; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--gris3) }
.sb { display:inline-flex; align-items:center; gap:4px; padding:5px 12px; border-radius:3px; font-family:'IBM Plex Sans',sans-serif; font-size:.72rem; font-weight:700; color:#fff; transition:opacity .18s }
.sb:hover { opacity:.85; color:#fff }
.sb-fb { background:#1877f2 }
.sb-tw { background:#14171a }
.sb-wa { background:#25d366 }

/* ── Páginas estáticas ── */
.page-banner { background:var(--negro); color:#fff; padding:30px 0; margin-bottom:30px }
.page-banner h1 { font-family:'Playfair Display',serif; font-size:1.9rem; color:#fff }
.page-body { background:var(--blanco); padding:32px; border-radius:var(--radio); box-shadow:var(--sombra); max-width:760px; margin:0 auto 56px; font-size:.96rem; line-height:1.82; color:var(--gris1) }
.page-body h2 { font-family:'Playfair Display',serif; font-size:1.2rem; margin:1.3em 0 .4em }
.page-body p { margin-bottom:1em }
.page-body a { color:var(--rojo) }

/* ── Contacto ── */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:56px }
@media(max-width:640px){ .contact-grid { grid-template-columns:1fr } }
.cbox { background:var(--blanco); padding:26px; border-radius:var(--radio); box-shadow:var(--sombra) }
.fg { margin-bottom:14px }
.fg label { display:block; font-family:'IBM Plex Sans',sans-serif; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--gris2); margin-bottom:4px }
.fg input,.fg textarea { width:100%; padding:8px 12px; border:1.5px solid var(--borde); border-radius:var(--radio); font-family:'Source Serif 4',serif; font-size:.93rem; color:var(--negro); outline:none; transition:border-color .18s; background:#fafafa }
.fg input:focus,.fg textarea:focus { border-color:var(--rojo); background:#fff }
.fg textarea { min-height:120px; resize:vertical }
.wa-box { background:linear-gradient(135deg,#128c7e,#25d366); border-radius:var(--radio); padding:24px; color:#fff; text-align:center; margin-top:16px }
.wa-box h3 { font-family:'Playfair Display',serif; font-size:1.2rem; margin-bottom:7px }
.wa-box p { font-family:'IBM Plex Sans',sans-serif; font-size:.83rem; margin-bottom:15px; opacity:.9 }
.wa-btn { display:inline-block; background:#fff; color:#128c7e; font-family:'IBM Plex Sans',sans-serif; font-weight:700; font-size:.82rem; padding:9px 22px; border-radius:50px; transition:all .18s }
.wa-btn:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.2) }

/* ── Búsqueda ── */
.sbox { background:var(--blanco); border-radius:var(--radio); padding:20px; margin-bottom:22px; box-shadow:var(--sombra) }
.sform { display:flex }
.sform input { flex:1; padding:9px 13px; border:1.5px solid var(--borde); border-right:none; border-radius:var(--radio) 0 0 var(--radio); font-family:'IBM Plex Sans',sans-serif; font-size:.9rem; outline:none; transition:border-color .18s }
.sform input:focus { border-color:var(--rojo) }
.sform button { padding:9px 16px; background:var(--rojo); color:#fff; border:none; border-radius:0 var(--radio) var(--radio) 0; font-family:'IBM Plex Sans',sans-serif; font-weight:700; font-size:.82rem; cursor:pointer }
.sform button:hover { background:#a93226 }

/* ── Paginación ── */
.pag { display:flex; gap:4px; justify-content:center; margin:24px 0 48px; flex-wrap:wrap }
.pg { font-family:'IBM Plex Sans',sans-serif; font-size:.8rem; font-weight:700; padding:6px 12px; border:1.5px solid var(--borde); border-radius:var(--radio); color:var(--negro); background:var(--blanco); transition:all .18s }
.pg:hover,.pg.cur { background:var(--rojo); border-color:var(--rojo); color:#fff }

/* ── Mensajes ── */
.msg { padding:10px 14px; border-radius:var(--radio); font-family:'IBM Plex Sans',sans-serif; font-size:.84rem; margin-bottom:12px }
.msg-ok { background:#e8f5e9; color:#1b5e20; border:1px solid #a5d6a7 }
.msg-err { background:#ffebee; color:#b71c1c; border:1px solid #ef9a9a }

/* ── Footer ── */
.footer { background:var(--negro); color:#888; padding:44px 0 18px; font-family:'IBM Plex Sans',sans-serif }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:24px; margin-bottom:32px }
@media(max-width:700px){ .footer-grid { grid-template-columns:1fr 1fr } }
@media(max-width:420px){ .footer-grid { grid-template-columns:1fr } }
.f-logo { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700; color:#fff; margin-bottom:8px }
.f-logo b { color:var(--rojo) }
.f-desc { font-size:.8rem; line-height:1.7; margin-bottom:12px }
.f-social { display:flex; gap:6px; flex-wrap:wrap }
.f-social a { width:32px; height:32px; background:#1a1a1a; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#666; font-size:.7rem; font-weight:700; transition:all .18s }
.f-social a:hover { background:var(--rojo); color:#fff }
.f-col-h { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#fff; margin-bottom:12px; padding-bottom:6px; border-bottom:1px solid #1e1e1e }
.f-links { display:flex; flex-direction:column; gap:6px }
.f-links a { font-size:.8rem; color:#666; transition:all .18s }
.f-links a:hover { color:var(--rojo); padding-left:3px }
.f-bottom { border-top:1px solid #1a1a1a; padding-top:16px; display:flex; justify-content:space-between; font-size:.72rem; flex-wrap:wrap; gap:4px }
.f-bottom a { color:#666 }
.f-bottom a:hover { color:var(--rojo) }

/* ── Botones generales ── */
.btn { display:inline-flex; align-items:center; gap:5px; font-family:'IBM Plex Sans',sans-serif; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:7px 14px; border-radius:var(--radio); border:none; cursor:pointer; transition:all .18s }
.btn-r { background:var(--rojo); color:#fff }
.btn-r:hover { background:#a93226; color:#fff }
.btn-d { background:var(--negro); color:#fff }
.btn-d:hover { background:#333; color:#fff }
