/*
Theme Name: El Monitor
Theme URI: https://monitordurango.com
Author: El Monitor
Description: Tema de noticias para El Monitor - Durango. Incluye carrusel de últimas notas, 7 secciones y espacios de banner publicitario (venta directa + Google AdSense).
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: el-monitor
*/


  :root{
    --verde:#1D6B3A;
    --verde-deep:#0E4525;
    --rojo:#C81E2C;
    --rojo-deep:#8A1420;
    --paper:#FBFBF9;
    --panel:#F1F0E9;
    --ink:#1A1B1C;
    --ink-soft:#5A5D61;
    --ink-faint:#8B8E92;
    --line:#DBD8CD;
    --nacional:#1D6B3A;
    --local:#C81E2C;
    --estados:#2857A6;
    --internacional:#45586B;
    --editorial:#0E4525;
    --opinion:#B98A2E;
    --politico:#8A1420;
    --max:1220px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:'Work Sans',sans-serif; -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.serif{font-family:'Source Serif 4',serif;margin:0;}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
  img,.ph{display:block;}

  /* ---- tricolor band ---- */
  .tricolor{height:6px;display:flex;}
  .tricolor span{flex:1;}
  .tricolor .r{background:var(--rojo);}
  .tricolor .w{background:#fff;}
  .tricolor .g{background:var(--verde);}

  /* ---- utility bar ---- */
  .utility{background:var(--ink);color:#D8D9DA;font-size:0.78rem;}
  .utility .wrap{display:flex;justify-content:space-between;align-items:center;height:34px;}
  .utility .links{display:flex;gap:18px;}
  .utility a:hover{color:#fff;}

  /* ---- ad slot ---- */
  .ad-slot{
    background:var(--panel);
    border:1px dashed var(--line);
    display:flex;align-items:center;justify-content:center;
    color:var(--ink-faint);font-size:0.78rem;letter-spacing:0.02em;
  }
  .ad-top{margin:18px auto;}
  .ad-top .wrap{padding:0;}
  .ad-top .inner{max-width:var(--max);margin:0 auto;padding:0 24px;}
  .ad-leaderboard{height:90px;}

  /* ---- masthead ---- */
  .masthead{padding:22px 0 16px;}
  .masthead .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;}
  .brand{display:flex;align-items:center;gap:16px;}
  .brand .map{width:52px;height:52px;flex-shrink:0;color:var(--verde);order:2;}
  .wordmark{
    font-family:'Roboto Slab',serif;
    color:var(--verde);line-height:1;order:1;
    display:flex;align-items:baseline;
  }
  .wordmark .el{font-weight:900;font-size:2.6rem;margin-right:8px;}
  .wordmark .monitor{font-weight:900;font-size:2.6rem;letter-spacing:-0.04em;}
  footer .wordmark .el,footer .wordmark .monitor{font-size:1.4rem;}
  .tagline{font-style:italic;color:var(--ink-soft);font-size:0.95rem;padding-bottom:6px;}

  /* ---- nav ---- */
  nav.primary{background:var(--verde-deep);}
  nav.primary .wrap{display:flex;gap:0;overflow-x:auto;}
  nav.primary a{
    color:#EDEFEA;font-weight:600;font-size:0.86rem;
    padding:14px 18px;white-space:nowrap;border-bottom:3px solid transparent;
  }
  nav.primary a:hover{border-bottom-color:var(--rojo);background:rgba(255,255,255,0.04);}
  nav.primary a.mp{color:#FBD9BE;}

  /* ---- carousel ---- */
  .carousel-section{padding:26px 0 0;}
  .carousel{
    position:relative;overflow:hidden;
    border:1px solid var(--line);background:var(--ink);
    aspect-ratio:16/7;
  }
  .slide{
    position:absolute;inset:0;display:flex;align-items:flex-end;
    opacity:0;transition:opacity .5s ease;pointer-events:none;
  }
  .slide.active{opacity:1;pointer-events:auto;}
  .slide .bg{
    position:absolute;inset:0;
    background:linear-gradient(135deg,var(--slide-a,#1D6B3A),var(--slide-b,#0E4525));
  }
  .slide .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.15) 65%,transparent 100%);}
  .slide .content{position:relative;padding:32px 40px;max-width:760px;color:#fff;}
  .slide .tag{
    display:inline-block;background:var(--rojo);color:#fff;font-size:0.72rem;font-weight:700;
    letter-spacing:0.04em;padding:4px 10px;margin-bottom:12px;
  }
  .slide h2{font-size:2rem;line-height:1.12;margin-bottom:10px;}
  .slide p{font-size:0.98rem;color:#E7E7E3;max-width:56ch;margin:0 0 8px;}
  .slide .meta{font-size:0.8rem;color:#C7C8C2;}

  .car-controls{position:absolute;bottom:16px;right:20px;display:flex;gap:8px;z-index:2;}
  .car-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,0.4);border:none;cursor:pointer;padding:0;}
  .car-dot.active{background:#fff;}
  .car-arrow{
    position:absolute;top:50%;transform:translateY(-50%);z-index:2;
    background:rgba(0,0,0,0.35);color:#fff;border:none;width:38px;height:38px;
    cursor:pointer;font-size:1.1rem;
  }
  .car-arrow:hover{background:rgba(0,0,0,0.55);}
  .car-prev{left:12px;}
  .car-next{right:12px;}

  /* ---- layout: main + sidebar ---- */
  .layout{
    display:grid;grid-template-columns:1fr 320px;gap:40px;
    padding:40px 0 10px;
  }
  aside{display:flex;flex-direction:column;gap:24px;}
  .ad-side{height:250px;}

  /* ---- section blocks ---- */
  .section-block{margin-bottom:34px;}
  .section-banner{
    display:flex;align-items:center;gap:12px;
    padding:9px 14px;margin-bottom:16px;color:#fff;
  }
  .section-banner h2{font-size:1.15rem;font-weight:700;}
  .section-banner .rule{flex:1;height:1px;background:rgba(255,255,255,0.35);}

  .story-list{display:flex;flex-direction:column;}
  .story{padding:16px 0;border-top:1px solid var(--line);}
  .story:first-child{border-top:none;padding-top:0;}
  .story h3{font-size:1.12rem;line-height:1.3;margin-bottom:6px;}
  .story h3 a:hover{text-decoration:underline;}
  .story p{margin:0;color:var(--ink-soft);font-size:0.92rem;line-height:1.5;max-width:60ch;}
  .story .meta{font-size:0.78rem;color:var(--ink-faint);margin-top:6px;}

  /* colored banners per section */
  .banner-nacional{background:var(--nacional);}
  .banner-local{background:var(--local);}
  .banner-estados{background:var(--estados);}
  .banner-internacional{background:var(--internacional);}
  .banner-editorial{background:var(--editorial);}
  .banner-opinion{background:var(--opinion);}
  .banner-politico{background:var(--politico);}

  /* ---- El Monitor Político widget (sidebar) ---- */
  .mp-widget{border:2px solid var(--politico);}
  .mp-widget .head{
    background:var(--politico);color:#fff;padding:10px 14px;
    font-weight:700;font-size:0.95rem;
  }
  .mp-widget .body{padding:14px;}
  .mp-widget .col-item{padding:10px 0;border-top:1px solid var(--line);}
  .mp-widget .col-item:first-child{border-top:none;padding-top:0;}
  .mp-widget h4{font-size:0.98rem;line-height:1.3;font-weight:600;font-family:'Source Serif 4',serif;}
  .mp-widget .byline{font-size:0.76rem;color:var(--ink-faint);margin-top:4px;}

  /* ---- social widget ---- */
  .social-widget{border:1px solid var(--line);padding:16px;}
  .social-widget h4{font-size:0.85rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);margin-bottom:10px;}
  .social-widget .row{display:flex;justify-content:space-between;padding:7px 0;font-size:0.88rem;border-top:1px solid var(--line);}
  .social-widget .row:first-of-type{border-top:none;}

  /* ---- footer / directorio ---- */
  footer{background:var(--panel);border-top:3px solid var(--verde);margin-top:20px;}
  footer .wrap{padding:36px 24px 26px;}
  .directorio{
    display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:28px;
    padding-bottom:24px;border-bottom:1px solid var(--line);
  }
  .directorio .brand-foot{display:flex;align-items:center;gap:10px;}
  .directorio .brand-foot .wordmark{font-size:1.5rem;}
  .directorio h5{font-size:0.78rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);margin-bottom:10px;}
  .directorio ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:0.88rem;}
  .directorio ul a:hover{color:var(--rojo);}
  .legal{padding-top:16px;font-size:0.75rem;color:var(--ink-faint);line-height:1.6;}

  @media (max-width:900px){
    .layout{grid-template-columns:1fr;}
    .directorio{grid-template-columns:1fr 1fr;row-gap:22px;}
    .wordmark{font-size:2.2rem;}
    .slide h2{font-size:1.4rem;}
    .slide .content{padding:20px 22px;}
    .carousel{aspect-ratio:4/5;}
  }
  @media (max-width:520px){
    .directorio{grid-template-columns:1fr;}
  }
  a:focus-visible,button:focus-visible{outline:2px solid var(--rojo);outline-offset:2px;}
  @media (prefers-reduced-motion: reduce){ .slide{transition:none;} }

  /* ---- breadcrumb ---- */
  .breadcrumb{padding:16px 0 0;font-size:0.82rem;color:var(--ink-faint);}
  .breadcrumb a:hover{color:var(--rojo);}
  .breadcrumb .sep{margin:0 6px;}

  /* ---- article header ---- */
  .article-header{padding:18px 0 10px;max-width:820px;}
  .article-header .tag{
    display:inline-block;color:#fff;font-size:0.74rem;font-weight:700;
    letter-spacing:0.04em;padding:5px 11px;margin-bottom:14px;
  }
  .article-header h1{font-size:2.3rem;line-height:1.14;margin-bottom:14px;}
  .article-header .deck{font-family:'Source Serif 4',serif;font-size:1.15rem;color:var(--ink-soft);line-height:1.5;margin-bottom:16px;}
  .byline-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:0.86rem;color:var(--ink-soft);}
  .byline-row .avatar{width:38px;height:38px;border-radius:50%;background:var(--verde);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Source Serif 4',serif;flex-shrink:0;}
  .byline-row strong{color:var(--ink);}
  .byline-row .share{margin-left:auto;display:flex;gap:10px;}
  .byline-row .share a{border:1px solid var(--line);padding:5px 10px;font-size:0.78rem;}
  .byline-row .share a:hover{border-color:var(--rojo);color:var(--rojo);}

  /* ---- article body ---- */
  .article-body{max-width:720px;padding-top:20px;}
  .article-body p{font-size:1.08rem;line-height:1.75;color:var(--ink);margin:0 0 22px;}
  .article-body p:first-of-type{font-size:1.16rem;}
  .article-body h2{font-size:1.4rem;margin:34px 0 14px;}
  .article-body blockquote{
    border-left:3px solid var(--rojo);margin:28px 0;padding:2px 0 2px 20px;
    font-family:'Source Serif 4',serif;font-style:italic;font-size:1.2rem;color:var(--ink-soft);
  }
  .ad-incontent{height:280px;margin:30px 0;max-width:720px;}

  /* ---- tags / related ---- */
  .article-tags{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 40px;max-width:720px;}
  .article-tags a{border:1px solid var(--line);font-size:0.8rem;padding:5px 12px;color:var(--ink-soft);}
  .article-tags a:hover{border-color:var(--rojo);color:var(--rojo);}

  .related{margin-top:10px;padding-top:26px;border-top:2px solid var(--ink);max-width:820px;}
  .related h2{font-size:1.2rem;margin-bottom:18px;}
  .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .related-grid .card{border-top:1px solid var(--line);padding-top:12px;}
  .related-grid .tag-mini{font-size:0.72rem;font-weight:700;color:var(--rojo);margin-bottom:6px;display:block;}
  .related-grid h3{font-size:1.02rem;line-height:1.3;}
  .related-grid h3 a:hover{text-decoration:underline;}

  /* ---- sidebar author card ---- */
  .author-card{border:1px solid var(--line);padding:16px;text-align:center;}
  .author-card .avatar{width:56px;height:56px;border-radius:50%;background:var(--verde-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Source Serif 4',serif;font-size:1.3rem;margin:0 auto 10px;}
  .author-card strong{display:block;font-size:0.95rem;margin-bottom:4px;}
  .author-card span{font-size:0.8rem;color:var(--ink-faint);}

  @media (max-width:900px){
    .article-header h1{font-size:1.7rem;}
    .related-grid{grid-template-columns:1fr;}
    .byline-row{flex-wrap:wrap;}
    .byline-row .share{margin-left:0;}
  }

/* ---- Ajustes para banners reales (cuando ya subiste una imagen o código de AdSense) ---- */
.screen-reader-text{position:absolute;left:-9999px;}
.ad-leaderboard-live{min-height:90px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ad-leaderboard-live img{max-width:100%;height:auto;}
.ad-side-live{min-height:250px;display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--line);}
.ad-side-live img{max-width:100%;height:auto;}
.ad-incontent-live{min-height:100px;margin:30px 0;max-width:720px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.ad-incontent-live img{max-width:100%;height:auto;}
.ad-top .inner{max-width:var(--max);margin:0 auto;padding:0 24px;}