/*
Theme Name: Poder Quintana Roo
Author: Poder Quintana Roo
Description: Tema de medio de comunicación con portada de noticias, columnas de opinión y secciones por categoría.
Version: 2.2
Text Domain: pqr
*/
:root{--bg:#eef3f8;--card:#fff;--ink:#14202e;--mut:#5b6b7c;--blue:#0a74b9;--blue2:#065a91;--sky:#1a9be0;--line:#d3dde8}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:1280px;margin:0 auto;background:var(--card);box-shadow:0 0 30px #0002}
.top{display:grid;grid-template-columns:repeat(3,1fr);background:var(--blue)}
.top a,.top button{color:#fff;font-weight:800;font-size:1.05rem;text-align:center;padding:.55rem;background:none;border:0;font-family:inherit;cursor:pointer}
.top a:hover,.top button:hover{background:var(--blue2)}
.cols{display:grid;grid-template-columns:3fr 1.3fr;gap:12px;padding:8px;border-bottom:1px solid var(--line);align-items:stretch}
.rot{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;flex:1;align-items:center}
.col{display:flex;gap:6px;align-items:center;padding:4px;border-radius:8px;font-size:.8rem;min-width:0}
.col[hidden]{display:none}
.col:hover{background:var(--bg)}
.col b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2;font-size:.82rem}
.ct{min-width:0}
.col small{display:block;color:var(--mut);font-size:.7rem;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.av{flex:none;width:56px;height:56px;aspect-ratio:1/1;border-radius:6px;background-size:cover;background-position:center}
.av img{width:38px;height:38px;border-radius:50%;display:block}
.edit{border-left:3px solid var(--blue);padding-left:10px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.edit i{display:block;font-style:normal;font-weight:400;font-size:clamp(.95rem,1.5vw,1.15rem);line-height:1.25;color:var(--ink)}
.nav{display:flex;overflow-x:auto;background:var(--blue2)}
.nav a{flex:1;white-space:nowrap;color:#fff;font-weight:700;padding:.8rem .9rem;font-size:1rem;text-align:center}
.nav a:hover{background:var(--sky)}
.logo{background:linear-gradient(120deg,var(--sky),var(--blue));color:#fff;display:flex;gap:14px;align-items:center;justify-content:center;padding:50px 14px 34px;position:relative;container-type:inline-size}
.logo svg{width:clamp(48px,9cqw,96px);height:clamp(48px,9cqw,96px)}
.logo .lt{text-align:center;display:flex;flex-direction:column;align-items:center}
.logo h1{margin:0;font-size:clamp(1rem,5.8cqw,4rem);letter-spacing:.02em;line-height:1.05;white-space:nowrap}
.logo .slogan{display:block;font-weight:600;letter-spacing:.18em;font-size:clamp(.55rem,1.7cqw,1.1rem);letter-spacing:.12em;margin-top:8px}
.hero h2{margin:0;padding:12px 14px 8px;font-size:clamp(1.8rem,5.2vw,2.7rem);line-height:1.15}
.hero h2:hover{color:var(--blue)}
.heroGrid{display:grid;grid-template-columns:1fr 2.2fr;gap:12px;padding:0 14px 14px}
.hbox{display:flex;flex-direction:column;justify-content:space-between;gap:14px;padding:4px 6px}
.hbox p{margin:0 0 10px;font-size:clamp(1rem,1.7vw,1.3rem);line-height:1.6}
.hbox:hover p{color:var(--blue2)}
.more{color:var(--blue);font-weight:800;font-size:.85rem}
.ph{display:block;background-size:cover;background-position:center;position:relative;min-height:120px;overflow:hidden}
.big{min-height:380px;border-radius:4px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:0 14px 14px}
.tile{position:relative;min-height:110px;border-radius:4px;color:#fff;display:flex;align-items:flex-end;padding:8px;font-weight:800;font-size:1.02rem;line-height:1.15;background-size:cover;background-position:center;overflow:hidden}
.tile::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,#000a)}
.tile>span{position:relative}
.tile small{display:block;font-weight:400;font-size:.7rem;opacity:.9}
.tile.ban{background-image:linear-gradient(135deg,#e5a13a,#b8431f);justify-content:center;align-items:center;text-align:center}
.vm{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px 14px}
.vmn{display:block}
.vmn small,.tag{color:var(--blue);font-weight:800;font-size:.7rem;letter-spacing:.06em}
.vmn h3{margin:2px 0 10px;font-size:1.3rem;line-height:1.15}
.vmn p{margin:0;font-size:.92rem;color:var(--mut)}
.vmn .ph{min-height:200px}
.car{min-height:260px;aspect-ratio:auto;align-self:stretch;display:flex;align-items:flex-end;justify-content:center;padding:14px;color:#fff;font-weight:800;font-size:1.4rem;text-align:center;background:linear-gradient(#f6a54a,#d9505e 55%,#2b6ea8);background-size:cover;background-position:center;border-radius:4px;position:relative;overflow:hidden;text-shadow:0 2px 6px #0009}
.car small{position:absolute;top:8px;left:10px;font-size:.7rem;letter-spacing:.1em}
.ult{background:var(--blue);color:#fff;overflow:hidden;white-space:nowrap;padding:.7rem 0;font-style:italic;font-weight:800}
.ult div{display:flex;width:max-content;animation:mq 30s linear infinite}
.ult span{margin-right:3rem;flex:none}
@keyframes mq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ult div{animation:none;padding-left:14px}}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px}
.n4{display:flex;flex-direction:column;gap:6px;font-weight:800;font-size:.9rem}
.n4 .t{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2;min-height:3.6em}
.n4 .ph{aspect-ratio:1/1;min-height:0;border-radius:4px}
.n4 .d{font-weight:400;font-size:.75rem;color:var(--mut);line-height:1.2;margin-top:-2px}
.n4:hover{color:var(--blue)}
.frase{margin:0 14px 14px;background:var(--blue);color:#fff;border-radius:6px;padding:22px;text-align:center}
.frase .tag{color:#fff;opacity:.85;display:block;text-align:left}
.frase h4{margin:6px 0;font-size:clamp(1.4rem,3.2vw,2.1rem);line-height:1.2}
.frase p{margin:8px 0 0;font-size:clamp(1.1rem,2.4vw,1.6rem);font-style:italic;font-weight:600;line-height:1.4}
.soc{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.soc a{display:block;background:var(--blue);color:#fff;font-weight:800;font-size:1rem;padding:.9rem .4rem;border-radius:8px;text-align:center}
.soc a:hover{background:var(--ink);color:#fff}
footer.ft{background:var(--blue);color:#fff;text-align:center;font-size:1rem;padding:28px 14px;display:flex;flex-direction:column;align-items:center;gap:10px}
.page{padding:18px 14px}
.page h1{margin:0 0 6px;font-size:clamp(1.5rem,5vw,2.3rem);line-height:1.15}
.meta{color:var(--mut);font-size:.82rem;margin-bottom:12px}
.page .feat{border-radius:6px;margin:10px 0;min-height:0;aspect-ratio:16/9;width:100%}
.entry{font-size:1.05rem;max-width:720px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.card{font-weight:800;line-height:1.2}
.card .ph{min-height:150px;margin-bottom:6px;border-radius:4px}
.card small{display:block;color:var(--mut);font-weight:400}
.pagination{margin-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{padding:6px 12px;background:var(--bg);border-radius:6px}
.pagination .current{background:var(--blue);color:#fff}
@media (max-width:720px){
.soc{grid-template-columns:repeat(2,1fr)}.frase.hasimg{grid-template-columns:110px 1fr}.frase{padding:16px}
.cols{grid-template-columns:1fr}.rot{grid-template-columns:1fr 1fr 1fr}
.col{flex-direction:column;align-items:flex-start}.av{width:100%;height:auto}
.heroGrid{grid-template-columns:1fr}.heroGrid .big{order:-1;min-height:240px}.hbox p{font-size:1rem}
.row3,.vm{grid-template-columns:1fr}
.grid4{grid-template-columns:1fr 1fr}.cards{grid-template-columns:1fr 1fr}
}

.credit{color:var(--mut);font-size:.78rem;font-style:italic;margin:-4px 0 12px}
.vmn{position:relative}
.vm-fb{position:absolute;inset:0;z-index:1}
.vm-t{position:relative;z-index:2}
.vm-t:hover{color:var(--blue);text-decoration:underline}
.car::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,#000b)}
.car span{position:relative}
.share{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);max-width:720px;text-align:center}
.share b{display:block;margin-bottom:8px}
.share .soc a{background:var(--blue);color:#fff}
.share .soc a:hover{background:var(--ink)}
.vmt{min-width:0}
.car-fb{position:absolute;inset:0;z-index:1}
.car small{z-index:2;pointer-events:none}
.car-t{position:relative;z-index:2}
.car-t:hover{text-decoration:underline}
.topimg{aspect-ratio:5/3;background-size:cover;background-position:center;border-radius:6px;min-width:0}
.row3 .tile{aspect-ratio:4/3;min-height:0}
.more-wrap{text-align:center;padding:0 14px 18px}
.more-btn{display:inline-block;padding:.7rem 2.4rem;border:2px solid var(--blue);border-radius:999px;color:var(--blue);font-weight:800;font-size:1.05rem;background:#fff}
.more-btn:hover{background:var(--blue);color:#fff}
.frase.hasimg{display:grid;grid-template-columns:minmax(120px,220px) 1fr;gap:18px;align-items:center}
.fimg{aspect-ratio:1/1;background-size:cover;background-position:center;border-radius:6px}
.ftxt{text-align:center}
.frase .tag{text-align:left}
.follow{padding:6px 14px 22px}
.follow h3{margin:0 0 12px;text-align:center;font-weight:800;font-size:clamp(1.8rem,5vw,2.6rem);line-height:1.1}
.page .grid4.g0{padding:0;margin-top:14px}
html{font-size:106.25%}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #f5a623;outline-offset:2px}
.opin{display:flex;flex-direction:column;min-width:0}
.olabel{display:flex;justify-content:space-between;align-items:baseline;gap:8px;border-bottom:3px solid var(--blue);padding:0 4px 4px;margin-bottom:6px}
.olabel .ol{color:var(--blue);font-weight:800;font-size:.85rem;letter-spacing:.08em}
.olabel .all{color:var(--blue);font-weight:700;font-size:.85rem}
.olabel a:hover{text-decoration:underline}
.marimg{position:relative;aspect-ratio:2.35/1;border-radius:6px;background-size:cover;background-position:center;margin-bottom:8px;display:flex;align-items:flex-end;overflow:hidden}
.marimg span{display:block;width:100%;padding:18px 8px 6px;color:#fff;font-weight:800;font-size:.9rem;line-height:1.2;background:linear-gradient(transparent,#000b)}
.mini{position:absolute;left:14px;color:#fff;font-weight:600;font-size:clamp(.62rem,1.08cqw,.78rem);line-height:1.25;white-space:nowrap}
.datechip{top:12px}
.siteurl{bottom:12px}
.urlbar{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px}
.urlbar>a{font-size:.9rem;font-weight:600;color:var(--blue2)}
.sbar{display:flex;gap:6px}
.sbar input{font:inherit;font-size:.95rem;padding:.45rem .7rem;border:2px solid var(--line);border-radius:8px;width:200px;max-width:100%}
.sbar button{font:inherit;font-weight:800;font-size:.95rem;padding:.45rem 1rem;background:var(--blue);color:#fff;border:0;border-radius:8px;cursor:pointer}
.sbar button:hover{background:var(--blue2)}
.frase{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}
.fl{grid-column:1}
.ftxt{grid-column:2;text-align:center}
.fr{grid-column:3;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.frase .fr .tag{text-align:right}
.fimg{width:clamp(80px,19vw,200px);aspect-ratio:1/1;background-size:cover;background-position:center;border-radius:6px}
.flogo{width:110px;aspect-ratio:1/1;background-size:cover;background-position:center;border-radius:8px}
.ft a{color:#fff;text-decoration:underline}
.ft-priv{font-weight:800}
.back{display:inline-block;margin-bottom:12px;color:var(--blue);font-weight:800;font-size:1rem}
.back:hover{text-decoration:underline}
.tag a{text-transform:uppercase}
.aviso-op{background:linear-gradient(120deg,var(--sky),var(--blue));color:#fff;border-radius:6px;padding:16px 18px;margin:12px 0;font-size:1.05rem;line-height:1.5}
.n4{font-size:.98rem}
.page .entry{font-size:1.15rem;line-height:1.75}
.pagination .page-numbers{padding:10px 16px;font-weight:700;font-size:1rem}
@media (max-width:720px){
.nav{flex-wrap:wrap}.nav a{flex:1 1 30%}
.logo{padding-top:46px}
.cols{grid-template-columns:1fr}
.frase{gap:10px;padding:14px}
.sbar{width:100%}.sbar input{flex:1;width:auto}
}
.vmbody{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch}
.vmbody .ph{min-height:180px}
.n4 .w{font-weight:400;font-size:.8rem;color:var(--mut);min-height:1.2em;line-height:1.2;margin-top:-2px}
.pillwrap{text-align:center;margin-bottom:14px}
.pill{display:inline-block;padding:.7rem 2.4rem;border:2px solid var(--blue);border-radius:999px;color:var(--blue);font-weight:800;font-size:1.05rem;background:#fff}
.frase{grid-template-columns:auto 1fr auto;grid-template-areas:". . tag" "left text right";align-items:center;row-gap:10px}
.ftag{grid-area:tag;justify-self:end}
.frase .ftag{text-align:right}
.fl{grid-area:left}
.fr{grid-area:right;display:block}
.ftxt{grid-area:text;display:flex;flex-direction:column;justify-content:space-between;align-self:stretch;gap:16px;text-align:left;color:#fff;font-size:clamp(1.1rem,2.3vw,1.5rem);line-height:1.4}
.ftxt .fa{font-weight:800;text-align:left}
.ftxt .fb{font-weight:400;text-align:right}
.cdlg{border:0;border-radius:12px;padding:24px;max-width:420px;width:calc(100% - 28px);text-align:center;font-size:1.05rem;box-shadow:0 10px 50px #0008}
.cdlg::backdrop{background:#000a}
.cdlg p{margin:0 0 12px}
.cdlg .cd-b{font-weight:800;font-size:1.3rem;color:var(--blue)}
.cdlg a{color:var(--blue);font-weight:800;text-decoration:underline;word-break:break-all}
.cd-x{margin-top:6px;padding:.55rem 1.6rem;background:var(--blue);color:#fff;font:inherit;font-weight:800;border:0;border-radius:999px;cursor:pointer}
@media (max-width:720px){
.frase{grid-template-columns:1fr 1fr;grid-template-areas:"tag tag" "left right" "text text"}
.fl{justify-self:start}.fr{justify-self:end}
.ftxt{align-self:auto}
.car{min-height:0;aspect-ratio:16/9}
.mini{font-size:.68rem}
}
.credit{text-align:right}
.byline{font-weight:800;font-size:1.1rem;margin:8px 0 14px}
.vm-more{color:var(--blue);font-weight:800;white-space:nowrap}
.logo-img{height:clamp(56px,9.4cqw,128px);width:auto}
.grid4.g0{gap:0}
.g0 .n4{padding:0 8px 18px}
.g0 .n4:nth-child(n+5){border-top:3px solid var(--blue);padding-top:18px}
@media (max-width:720px){
.g0 .n4:nth-child(n+5){border-top:0;padding-top:0}
.g0 .n4:nth-child(n+3){border-top:3px solid var(--blue);padding-top:18px}
}
@media (min-width:1240px){
html{font-size:136%}
.big{min-height:486px}
.vmbody .ph{min-height:230px}
.car{min-height:333px}
.av{width:72px;height:72px}
.fimg{width:clamp(80px,19vw,256px)}
.flogo{width:140px}
.sbar input{width:256px}
.page .entry{max-width:920px}
.logo{padding:64px 18px 44px}
.logo svg{width:clamp(48px,9cqw,123px);height:clamp(48px,9cqw,123px)}
}
.vmn{grid-column:1}
.car{grid-column:2/4}
.car-t{font-size:clamp(1.4rem,2.6vw,2.2rem)}
@media (min-width:721px){
.opin{container-type:inline-size}
.col{gap:12px;padding:6px}
.av{width:12.5cqw;height:12.5cqw}
.col b{font-size:clamp(.95rem,2.45cqw,1.6rem);-webkit-line-clamp:4}
.col small{font-size:clamp(.8rem,1.9cqw,1.2rem)}
.olabel .ol,.olabel .all{font-size:clamp(.85rem,1.9cqw,1.25rem)}
}
@media (max-width:720px){.vmn,.car{grid-column:1}}
@media (min-width:721px){
.av{width:11cqw;height:11cqw}
.col b{font-size:clamp(.95rem,2.1cqw,1.4rem)}
.col small{font-size:clamp(.8rem,1.65cqw,1.1rem)}
.olabel .ol,.olabel .all{font-size:clamp(.85rem,1.7cqw,1.15rem)}
.vmn{container-type:inline-size}
.vmn h3{font-size:clamp(1.3rem,9cqw,2.6rem)}
.vmbody{grid-template-columns:.6fr 1fr}
}
