/*
Theme Name: Panorama Llanero
Theme URI: https://panoramallanero.com
Author: Redacci¨®n Panorama Llanero
Description: Tema period¨ªstico con est¨¦tica de peri¨®dico impreso.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: panorama-llanero
*/

:root{
 --paper:#f4ecd8;
 --paper-dark:#e8dfc4;
 --ink:#1a1410;
 --red:#c8102e;
 --gold:#b8860b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#1a1410;overflow-x:hidden;font-family:'Merriweather',serif;color:var(--ink)}
#bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}
.paper-texture{
 background-color:var(--paper);
 background-image:
 repeating-linear-gradient(0deg,rgba(139,90,43,0.03) 0px,rgba(139,90,43,0.03) 1px,transparent 1px,transparent 3px),
 radial-gradient(ellipse at 20% 30%,rgba(180,140,80,0.08),transparent 60%),
 radial-gradient(ellipse at 80% 70%,rgba(120,80,40,0.06),transparent 50%);
}
.grain{position:relative;}
.masthead{font-family:'Playfair Display',serif;letter-spacing:-0.02em;}
.dateline{font-family:'Special Elite',monospace;letter-spacing:0.15em;}
.torn{
 clip-path:polygon(
 0% 2%, 3% 0%, 7% 3%, 11% 1%, 15% 3%, 19% 0%, 23% 2%, 27% 1%, 31% 3%, 35% 0%, 39% 2%, 43% 1%, 47% 3%, 51% 0%, 55% 2%, 59% 1%, 63% 3%, 67% 0%, 71% 2%, 75% 1%, 79% 3%, 83% 0%, 87% 2%, 91% 1%, 95% 3%, 99% 0%, 100% 2%,
 100% 98%, 97% 100%, 93% 97%, 89% 100%, 85% 98%, 81% 100%, 77% 97%, 73% 100%, 69% 98%, 65% 100%, 61% 97%, 57% 100%, 53% 98%, 49% 100%, 45% 97%, 41% 100%, 37% 98%, 33% 100%, 29% 97%, 25% 100%, 21% 98%, 17% 100%, 13% 97%, 9% 100%, 5% 98%, 1% 100%, 0% 98%
 );
}
.stamp{
 border:3px solid var(--red);
 color:var(--red);
 padding:4px 10px;
 font-family:'Special Elite',monospace;
 transform:rotate(-8deg);
 display:inline-block;
 font-weight:bold;
 letter-spacing:0.1em;
}
.tab-btn{position:relative;transition:all .3s;background:transparent;border:0;cursor:pointer;font-family:inherit;color:inherit}
.tab-btn::after{
 content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;background:var(--red);
 transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.7,0,.3,1);
}
.tab-btn.active::after{transform:scaleX(1)}
.tab-btn.active{color:var(--red)}
.col-grid{column-count:1;column-gap:2.5rem;}
@media(min-width:768px){.col-grid{column-count:2}}
@media(min-width:1024px){.col-grid{column-count:3}}
.col-grid p{margin-bottom:1rem;text-align:justify}
.paper-card{
 transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s;
 transform-style:preserve-3d;
}
.paper-card:hover{
 transform:translateY(-6px) rotateX(-2deg) rotateY(3deg);
 box-shadow:-8px 12px 30px rgba(0,0,0,.25);
}
.photo-frame{position:relative;background:#fff;padding:10px 10px 30px 10px;box-shadow:0 4px 15px rgba(0,0,0,.2);transform:rotate(-1.5deg)}
.tape{
 position:absolute;width:80px;height:22px;background:rgba(255,230,150,0.7);
 top:-10px;left:50%;transform:translateX(-50%) rotate(-2deg);
 box-shadow:0 1px 3px rgba(0,0,0,.15);
}
.section{display:none;animation:fadeIn .6s ease}
.section.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.red-banner{background:var(--red);color:#fff}
.headline-rule{height:3px;background:linear-gradient(90deg,var(--ink),var(--red),var(--ink));margin:1rem 0}
.fold-corner{position:relative}
.fold-corner::after{
 content:"";position:absolute;top:0;right:0;width:0;height:0;
 border-style:solid;border-width:0 30px 30px 0;border-color:transparent var(--paper-dark) transparent transparent;
}
.ticker{overflow:hidden;white-space:nowrap;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);}
.ticker-track{display:inline-block;animation:ticker 40s linear infinite;padding-left:100%}
@keyframes ticker{to{transform:translateX(-100%)}}
.page-curl{position:relative;overflow:hidden}
.page-curl::before{
 content:"";position:absolute;bottom:0;right:0;width:40px;height:40px;
 background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.15) 50%);
 transform:translateX(100%);transition:transform .4s;
}
.page-curl:hover::before{transform:none}