/* iTEMA News — demo TuPaginaYa */
:root{
  --ink:#16130F;
  --ink-soft:#3A342C;
  --paper:#F7F4EC;
  --paper-2:#EFEAE0;
  --line:#DCD5C4;
  --red:#1F3B63;      /* acento principal — azul del escudo ITEMA */
  --red-dark:#142944;
  --gold:#B8862E;
  --blue:#A8582E;      /* terracota, solo para el tag Región */
  --green:#3E6B4F;
  --white:#FFFFFF;
  --ff-head:'Oswald',sans-serif;
  --ff-body:'Lora',serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--ff-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px;}

/* ---------- Read progress bar ---------- */
.readbar{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:var(--red);z-index:999;transition:width .1s linear;
}

/* ---------- Utility bar ---------- */
.utilitybar{background:var(--ink);color:#D8D2C4;font-family:var(--ff-head);font-size:.72rem;letter-spacing:.04em;}
.utilitybar__in{display:flex;justify-content:space-between;align-items:center;height:34px;text-transform:uppercase;gap:16px;}
.utilitybar__right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.utilitybar__link{color:#D8D2C4;}
.utilitybar__link--accent{color:var(--red);font-weight:600;}
.utilitybar__sep{opacity:.4;}
.utilitybar__dolar{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.utilitybar__dolar-label{color:var(--gold);font-weight:600;text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;}
.utilitybar__dolar b{color:#fff;font-weight:600;}

/* ---------- Masthead ---------- */
.masthead{padding:22px 0 18px;border-bottom:1px solid var(--line);text-align:center;background:var(--paper);}
.masthead__logo{display:inline-flex;align-items:center;gap:14px;font-family:var(--ff-head);font-weight:700;letter-spacing:.02em;}
.masthead__shield{height:66px;width:auto;}
.masthead__wordmark{font-size:2.6rem;color:var(--ink);line-height:1;}
.masthead__i{color:var(--red);font-style:italic;}
.masthead__news{font-size:1.5rem;color:var(--red);margin-left:8px;letter-spacing:.12em;}
.masthead__tag{font-family:var(--ff-head);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:8px;}
.masthead__logo--footer{display:inline-flex;}
.masthead__logo--footer .masthead__shield{height:40px;}
.masthead__logo--footer .masthead__wordmark{font-size:1.6rem;color:#EDE8DA;}
.masthead__logo--footer .masthead__news{font-size:.95rem;}

/* ---------- Nav ---------- */
.nav{background:var(--ink);position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.15);}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:52px;}
.nav__list{list-style:none;display:flex;gap:28px;font-family:var(--ff-head);text-transform:uppercase;font-size:.85rem;letter-spacing:.04em;}
.nav__list a{color:#EDE8DA;padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s, color .2s;}
.nav__list a:hover,.nav__list a.active{color:var(--red);border-color:var(--red);}
.nav__search{background:none;border:none;color:#EDE8DA;cursor:pointer;width:20px;height:20px;}
.nav__search svg{width:100%;height:100%;}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;}
.nav__burger span{width:22px;height:2px;background:#EDE8DA;}

/* ---------- Ticker ---------- */
.ticker{display:flex;background:var(--red);color:#fff;overflow:hidden;height:40px;align-items:stretch;}
.ticker__label{font-family:var(--ff-head);font-weight:600;font-size:.78rem;letter-spacing:.06em;background:var(--red-dark);display:flex;align-items:center;padding:0 16px;white-space:nowrap;flex-shrink:0;}
.ticker__track{flex:1;overflow:hidden;position:relative;display:flex;align-items:center;}
.ticker__content{display:flex;gap:60px;white-space:nowrap;animation:ticker 32s linear infinite;padding-left:100%;font-family:var(--ff-head);font-size:.85rem;font-weight:400;letter-spacing:.01em;}
.ticker__content span{white-space:nowrap;}
@keyframes ticker{from{transform:translateX(0);}to{transform:translateX(-100%);}}

/* ---------- Tags ---------- */
.tag{display:inline-block;font-family:var(--ff-head);font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;color:#fff;margin-bottom:8px;}
.tag--region{background:var(--blue);}
.tag--economia{background:var(--gold);}
.tag--deportes{background:var(--green);}
.tag--tecnologia{background:var(--ink);}
.tag--educacion{background:var(--red);}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:1.6fr 1fr;gap:36px;padding:34px 0;border-bottom:1px solid var(--line);}
.hero__img-link{position:relative;display:block;margin-bottom:14px;}
.hero__img{width:100%;height:380px;object-fit:cover;}
.hero__img-link .tag{position:absolute;top:14px;left:14px;margin:0;}
.hero__title{font-family:var(--ff-body);font-size:2rem;line-height:1.18;font-weight:700;margin-bottom:10px;}
.hero__title a:hover{color:var(--red);}
.hero__excerpt{color:var(--ink-soft);font-size:1.02rem;margin-bottom:12px;}
.hero__meta{font-family:var(--ff-head);font-size:.75rem;color:#8A8272;text-transform:uppercase;letter-spacing:.04em;display:flex;gap:8px;}
.dot{opacity:.5;}

.hero__side{display:flex;flex-direction:column;gap:20px;}
.side-item{display:grid;grid-template-columns:96px 1fr;gap:12px;}
.side-item__img-link img{width:96px;height:72px;object-fit:cover;}
.side-item .tag{margin-bottom:4px;}
.side-item h3{font-size:.95rem;line-height:1.3;font-weight:600;margin-bottom:4px;}
.side-item h3 a:hover{color:var(--red);}
.side-item__time{font-family:var(--ff-head);font-size:.7rem;color:#8A8272;text-transform:uppercase;}

/* ---------- Ad slots ---------- */
.adslot{
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--paper-2);border:1px dashed #B9AF97;color:#8A8272;
  font-family:var(--ff-head);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;
  height:90px;margin:28px 0;
}
.adslot--wide{height:110px;}
.adslot--side{height:220px;flex-direction:column;}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:1fr 300px;gap:44px;padding:10px 0 40px;}
.layout__side{display:flex;flex-direction:column;gap:26px;}

/* ---------- Sections ---------- */
.section{padding:32px 0;border-bottom:1px solid var(--line);}
.section__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;border-bottom:3px solid var(--ink);padding-bottom:8px;}
.section__head h2{font-family:var(--ff-head);font-size:1.4rem;text-transform:uppercase;letter-spacing:.04em;}
.section__more{font-family:var(--ff-head);font-size:.78rem;color:var(--red);text-transform:uppercase;letter-spacing:.04em;}

.grid{display:grid;gap:26px;}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--2{grid-template-columns:repeat(2,1fr);}

.card__img-link img{width:100%;height:170px;object-fit:cover;margin-bottom:10px;}
.card h3{font-size:1.05rem;line-height:1.32;font-weight:600;margin-bottom:6px;}
.card h3 a:hover{color:var(--red);}
.card p{font-size:.9rem;color:var(--ink-soft);margin-bottom:6px;}
.card__time{font-family:var(--ff-head);font-size:.7rem;color:#8A8272;text-transform:uppercase;}

.card--featured .card__img-link img{height:230px;}
.card--featured h3{font-size:1.3rem;}

.card--horizontal{display:grid;grid-template-columns:180px 1fr;gap:16px;}
.card--horizontal .card__img-link img{height:130px;}

/* ---------- Curso cards ---------- */
.curso-card{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column;transition:box-shadow .2s, transform .2s;}
.curso-card:hover{box-shadow:0 8px 24px rgba(22,19,15,.1);transform:translateY(-2px);}
.curso-card__img-wrap{position:relative;}
.curso-card__img-wrap img{width:100%;height:170px;object-fit:cover;display:block;}
.curso-card__modalidad{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;font-family:var(--ff-head);font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;}
.curso-card__modalidad--grabado{background:var(--gold);}
.curso-card__body{padding:18px;display:flex;flex-direction:column;flex:1;}
.curso-card__body h3{font-size:1.1rem;font-weight:700;margin-bottom:6px;}
.curso-card__meta{font-family:var(--ff-head);font-size:.78rem;color:#8A8272;text-transform:uppercase;letter-spacing:.03em;margin-bottom:16px;}
.curso-card__footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.curso-card__precio{font-family:var(--ff-head);font-weight:700;font-size:1.1rem;color:var(--ink);}
.curso-card__cta{background:var(--red);color:#fff;font-family:var(--ff-head);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:9px 16px;transition:background .2s;}
.curso-card__cta:hover{background:var(--red-dark);}

/* ---------- Anuncios dinámicos ---------- */
.adslot__banner{display:block;width:100%;height:100%;object-fit:cover;}
.adslot.has-banner, .adslot--wide.has-banner, .adslot--side.has-banner{border:none;padding:0;overflow:hidden;}

/* ---------- Sidebar widgets ---------- */
.widget{background:var(--white);border:1px solid var(--line);padding:20px;}
.widget__title{font-family:var(--ff-head);text-transform:uppercase;font-size:1rem;letter-spacing:.03em;border-bottom:3px solid var(--ink);padding-bottom:10px;margin-bottom:14px;}
.ranking{list-style:none;display:flex;flex-direction:column;gap:14px;}
.ranking li{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;}
.ranking__n{font-family:var(--ff-head);font-weight:700;font-size:1.3rem;color:var(--red);line-height:1;}
.ranking li a{font-size:.9rem;font-weight:600;line-height:1.3;}
.ranking li a:hover{color:var(--red);}

.widget--newsletter p{font-size:.85rem;color:var(--ink-soft);margin-bottom:14px;}
.newsletter__form{display:flex;flex-direction:column;gap:10px;}
.newsletter__form input{border:1px solid var(--line);padding:11px 12px;font-family:var(--ff-body);font-size:.9rem;background:var(--paper);}
.newsletter__form button{background:var(--red);color:#fff;border:none;padding:11px;font-family:var(--ff-head);text-transform:uppercase;letter-spacing:.04em;font-size:.85rem;cursor:pointer;transition:background .2s;}
.newsletter__form button:hover{background:var(--red-dark);}

/* ---------- Footer ---------- */
.footer{background:var(--ink);color:#D8D2C4;margin-top:20px;}
.footer__in{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding:44px 0 30px;}
.footer__brand p{font-size:.85rem;color:#A79F8C;margin-top:12px;line-height:1.6;}
.footer__col h5{font-family:var(--ff-head);text-transform:uppercase;font-size:.85rem;letter-spacing:.06em;margin-bottom:14px;color:#fff;}
.footer__col a{display:block;font-size:.88rem;color:#B9B2A0;margin-bottom:9px;}
.footer__col a:hover{color:var(--red);}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #33301F;padding:18px 0;font-size:.78rem;color:#8A8272;}
.footer__bottom a{color:#B9B2A0;}
.footer__bottom a:hover{color:var(--red);}

/* ---------- Fade-in ---------- */
.section, .hero{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.section.is-visible, .hero.is-visible{opacity:1;transform:translateY(0);}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .layout{grid-template-columns:1fr;}
  .layout__side{flex-direction:row;flex-wrap:wrap;}
  .layout__side .widget, .layout__side .adslot--side{flex:1 1 260px;}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;}
  .grid--3{grid-template-columns:repeat(2,1fr);}
  .footer__in{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .nav__list{
    position:fixed;top:86px;left:0;right:0;bottom:0;background:var(--ink);
    flex-direction:column;padding:24px;gap:0;transform:translateX(-100%);
    transition:transform .3s ease;overflow-y:auto;
  }
  .nav__list.is-open{transform:translateX(0);}
  .nav__list li{border-bottom:1px solid #2A2718;width:100%;}
  .nav__list a{display:block;padding:16px 0;font-size:1.1rem;}
  .nav__burger{display:flex;}
  .masthead__wordmark{font-size:2rem;}
  .masthead__shield{height:50px;}
  .utilitybar__dolar{display:none;}
  .card--horizontal{grid-template-columns:1fr;}
  .card--horizontal .card__img-link img{height:170px;}
}
@media (max-width:480px){
  .utilitybar__link:not(.utilitybar__link--accent){display:none;}
  .utilitybar__sep{display:none;}
  .grid--3, .grid--2{grid-template-columns:1fr;}
  .hero__title{font-size:1.5rem;}
  .footer__in{grid-template-columns:1fr;}
  .footer__bottom{flex-direction:column;gap:10px;text-align:center;}
}