/*
Theme Name: Cinco Palabras
Theme URI: https://cincopalabras.com
Author: Matas Films
Description: Tema editorial y solidario para la Fundación Cinco Palabras, con archivo de relatos y formulario de participación.
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: cinco-palabras
*/

:root{--coral:#ff5a4f;--coral-dark:#ef3d9c;--cream:#fff1cf;--paper:#fffdf4;--ink:#3d1373;--lime:#dff442;--aqua:#22d6cf;--yellow:#ffd43b;--line:rgba(61,19,115,.24);--display:Impact,Haettenschweiler,"Arial Narrow Bold","Arial Narrow",sans-serif;--body:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.site-header{height:96px;padding:0 clamp(24px,5vw,78px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;background:var(--cream);border-top:11px solid var(--coral);border-bottom:2px solid var(--ink);position:relative;z-index:20}
.brand{justify-self:start;display:flex;align-items:center;gap:13px;font:900 1.55rem/.83 var(--display);letter-spacing:.025em;text-transform:uppercase}
.brand img{width:58px;height:58px;object-fit:contain;border:0;background:transparent}
.site-header nav{display:flex;align-items:center;gap:30px;font-size:.83rem;font-weight:850}
.site-header nav a{position:relative}
.site-header nav a::after{content:"";position:absolute;left:0;bottom:-6px;width:100%;height:3px;background:var(--coral);transform:scaleX(0);transform-origin:right;transition:transform .18s}
.site-header nav a:hover::after{transform:scaleX(1);transform-origin:left}
.site-header>.button{justify-self:end}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:54px;padding:0 23px;border:2px solid var(--ink);border-radius:1px;background:var(--ink);color:white;font-weight:900;transition:transform .18s,box-shadow .18s,background .18s;cursor:pointer}
.button:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--coral)}
.button-small{min-height:46px;background:var(--coral);color:var(--ink)}
.button-yellow{background:var(--lime);color:var(--ink)}
.button-ghost{background:var(--cream);color:var(--ink)}
.button-dark{background:var(--ink);color:white}
.hero{min-height:700px;position:relative;display:flex;align-items:flex-end;overflow:hidden;border-bottom:2px solid var(--ink);background:linear-gradient(25deg,var(--coral-dark) 0 17%,var(--coral) 17% 57%,var(--ink) 57% 72%,var(--aqua) 72% 100%)}
.hero::before{content:"";position:absolute;width:560px;height:560px;right:12%;top:45px;border:2px solid rgba(255,241,207,.78);border-radius:50%;box-shadow:0 0 0 42px rgba(61,19,115,.1),0 0 0 112px rgba(255,241,207,.09)}
.hero::after{content:"RELATOS · CULTURA · IMPACTO";position:absolute;right:18px;top:50%;color:var(--cream);font-size:.68rem;font-weight:900;letter-spacing:.22em;writing-mode:vertical-rl;transform:translateY(-50%)}
.hero-geometry{position:absolute;inset:0;background:linear-gradient(90deg,rgba(61,19,115,.94) 0 7%,transparent 7%),linear-gradient(118deg,transparent 0 57%,rgba(61,19,115,.86) 57.2% 68%,transparent 68.3%)}
.hero-copy{position:relative;z-index:2;width:min(950px,70%);padding:76px clamp(24px,5vw,78px) 60px;color:var(--cream)}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 20px;font-size:.76rem;font-weight:900;letter-spacing:.17em;text-transform:uppercase}
.eyebrow::before{content:"";width:40px;height:3px;background:currentColor}
.eyebrow.light{color:inherit}
.hero h1,.page-hero h1,.final-cta h2,.section-intro h2,.project h2,.actions h2,.form-layout h2{margin:0;font-family:var(--display);font-weight:900;line-height:.85;letter-spacing:-.02em;text-transform:uppercase}
.hero h1{font-size:clamp(6rem,10vw,10.4rem)}
.hero h1 em{color:var(--lime);font-style:normal}
.hero-lead{max-width:560px;margin:32px 0 30px;padding-top:23px;border-top:2px solid rgba(244,239,223,.72);font-size:1.18rem;font-weight:700;line-height:1.5}
.button-row{display:flex;flex-wrap:wrap;gap:14px}
.hero-brand-card{position:absolute;z-index:3;right:8%;top:50px;width:335px;padding:18px;display:grid;grid-template-columns:118px 1fr;gap:18px;align-items:center;background:var(--lime);border:2px solid var(--ink);box-shadow:10px 10px 0 var(--coral-dark);transform:rotate(2deg)}
.hero-brand-card img{width:118px;height:118px;object-fit:contain;border:0;background:transparent}
.hero-brand-card strong{font:900 2rem/.9 var(--display);text-transform:uppercase}
.hero-brand-card p{margin:10px 0 0;font-weight:750;font-size:.83rem}
.week-stamp{position:absolute;z-index:3;right:7%;bottom:34px;display:flex;flex-direction:column;align-items:flex-end;color:var(--cream);text-transform:uppercase;font-weight:900;letter-spacing:.08em}
.week-stamp strong{font:900 2rem var(--display);color:var(--lime);letter-spacing:0}
.ticker{overflow:hidden;background:var(--lime);border-bottom:2px solid var(--ink)}
.ticker>div{display:flex;width:max-content;padding:13px 0;animation:marquee 24s linear infinite;font:900 1.6rem var(--display);text-transform:uppercase;letter-spacing:.035em}
.ticker span{padding-right:30px}
@keyframes marquee{to{transform:translateX(-50%)}}
.weekly{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,7vw,110px);padding:110px clamp(24px,6vw,95px);background:var(--paper);border-bottom:2px solid var(--ink)}
.section-intro h2,.project h2,.actions h2,.form-layout h2{margin-bottom:28px;font-size:clamp(4rem,6.8vw,7rem)}
.section-intro>p:not(.eyebrow){max-width:540px;font-size:1.13rem;line-height:1.65}
.text-link{display:inline-block;margin-top:23px;font-weight:900;border-bottom:3px solid var(--coral);padding-bottom:6px}
.words-card{transform:rotate(1deg);background:var(--coral);border:3px solid var(--ink);padding:32px 46px 38px;box-shadow:16px 16px 0 var(--ink)}
.card-top{display:flex;justify-content:space-between;font-weight:900;text-transform:uppercase;letter-spacing:.13em;font-size:.72rem}
.card-top span:first-child{background:var(--lime);padding:10px 16px;border:2px solid var(--ink)}
.words-card ol{padding:16px 0;margin:0;list-style:none}
.words-card li{padding:7px 0;border-bottom:2px solid rgba(61,19,115,.58);font:900 clamp(2.7rem,4.7vw,5rem)/.92 var(--display);text-align:left;text-transform:uppercase}
.words-card li:nth-child(even){padding-left:13%}
.card-meta{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:20px;border:2px solid var(--ink)}
.card-meta div{padding:18px 20px;background:var(--cream);border-right:2px solid var(--ink)}
.card-meta div:last-child{border-right:0;background:var(--ink);color:white}
.card-meta span{display:block;margin-bottom:7px;text-transform:uppercase;font-size:.68rem;font-weight:900;letter-spacing:.12em}
.card-meta strong{font:900 1.55rem var(--display);text-transform:uppercase}
.cause-grid{display:grid;grid-template-columns:1.6fr .8fr;min-height:600px;border-bottom:2px solid var(--ink)}
.feature{position:relative;overflow:hidden}
.feature-large img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.1)}
.feature-large::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(61,19,115,.94),transparent 72%)}
.feature-copy{position:absolute;z-index:2;left:6%;bottom:8%;color:white;max-width:760px}
.feature-copy h3{margin:0 0 22px;font:900 clamp(3rem,5.2vw,5.8rem)/.88 var(--display);text-transform:uppercase}
.feature-copy a{font-weight:900;border-bottom:3px solid var(--lime);padding-bottom:5px}
.feature-small{padding:60px 45px;display:flex;flex-direction:column;justify-content:center;color:white;border-left:2px solid var(--ink)}
.plum{background:var(--coral)}
.feature-small blockquote{margin:12px 0 50px;font:900 clamp(2.8rem,4vw,4.5rem)/.9 var(--display);text-transform:uppercase;color:var(--ink)}
.feature-small>p:last-child{font-weight:900;color:var(--ink);text-transform:uppercase}
.project{padding:112px clamp(24px,6vw,95px) 0;display:grid;grid-template-columns:1.2fr .8fr;gap:65px;background:var(--ink);color:white}
.project h2{color:var(--cream)}
.project-copy{font-size:1.25rem;line-height:1.65;max-width:590px;color:#fff1cf}
.stats{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);margin-top:30px;background:var(--cream);color:var(--ink);border:2px solid var(--cream);border-bottom:0}
.stats div{padding:45px 28px;text-align:center;border-right:2px solid var(--ink)}
.stats div:last-child{border-right:0}
.stats strong{display:block;color:var(--coral);font:900 clamp(4rem,7vw,7rem)/.85 var(--display)}
.stats span{display:block;margin-top:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.actions{padding:105px clamp(24px,6vw,95px);background:var(--ink);color:white}
.actions-head{max-width:920px}.actions-head h2{color:var(--cream)}
.action-list{margin-top:55px;border:2px solid rgba(255,241,207,.58);display:grid;grid-template-columns:repeat(3,1fr)}
.action-list article{min-height:315px;display:flex;flex-direction:column;align-items:flex-start;padding:34px;border-right:1px solid rgba(255,241,207,.58);transition:background .2s,color .2s}
.action-list article:last-child{border-right:0}
.action-list article:hover{background:var(--aqua);color:var(--ink)}
.action-list h3{margin:auto 0 13px;font:900 2.5rem/.9 var(--display);text-transform:uppercase}
.action-list p{margin:0;line-height:1.55;color:#fff1cf}.action-list article:hover p{color:var(--ink)}.action-list b{margin-top:20px;font-size:1.7rem}
.final-cta{padding:100px clamp(24px,6vw,95px);position:relative;overflow:hidden;background:var(--coral);border-bottom:2px solid var(--ink)}
.final-cta::before{content:"“";position:absolute;right:1%;top:-190px;font:600 650px Georgia,serif;line-height:1;color:rgba(244,239,223,.22)}
.final-cta h2{position:relative;max-width:950px;font-size:clamp(5rem,9vw,9.5rem)}
.final-cta .button{position:absolute;right:7%;bottom:18%}
.site-footer{display:grid;grid-template-columns:1.2fr .7fr auto;gap:60px;align-items:start;padding:65px clamp(24px,6vw,95px) 30px;background:var(--cream)}
.footer-logo{display:flex;align-items:center;gap:18px}.footer-logo img{width:92px;height:92px;object-fit:contain;border:0;background:transparent}
.footer-brand{margin:0;font:900 3rem/.78 var(--display);text-transform:uppercase}
.site-footer>div>p:last-child{max-width:460px;line-height:1.55;font-weight:650}.footer-links{display:flex;flex-direction:column;gap:12px;font-weight:800}.footer-note{font-size:.74rem;font-weight:700}
.page-hero{min-height:470px;padding:80px clamp(24px,6vw,95px);display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:end;border-bottom:2px solid var(--ink);background:var(--coral)}
.page-hero h1{font-size:clamp(5rem,8vw,8.5rem)}
.form-hero{background:linear-gradient(120deg,var(--coral) 0 68%,var(--aqua) 68%)}
.mini-words{justify-self:end;width:min(100%,490px);background:var(--cream);border:3px solid var(--ink);padding:22px 32px;transform:rotate(2deg);box-shadow:13px 13px 0 var(--ink)}
.mini-words span{display:block;padding:7px;border-bottom:2px solid rgba(61,19,115,.34);text-align:center;font:900 2.2rem var(--display);text-transform:uppercase}
.form-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:85px;padding:95px clamp(24px,6vw,95px);background:var(--paper)}
.form-layout aside{position:sticky;top:30px;align-self:start}.form-layout aside ol{padding-left:22px;line-height:1.6}.form-layout aside li{margin-bottom:16px;padding-left:7px}
.aside-note{margin-top:32px;padding:18px;background:var(--lime);border:2px solid var(--ink);font-weight:700;line-height:1.5}
.story-form{display:flex;flex-direction:column;gap:22px;padding:40px;background:var(--cream);border:3px solid var(--ink);box-shadow:14px 14px 0 var(--coral)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.story-form label{display:flex;flex-direction:column;gap:9px;font-weight:850;text-transform:uppercase;letter-spacing:.03em;font-size:.78rem}.story-form small{font-weight:500;text-transform:none}
.story-form input,.story-form textarea{width:100%;border:2px solid var(--ink);background:var(--paper);color:var(--ink);padding:14px 15px;border-radius:0;font:500 1rem/1.5 var(--body);outline:none;text-transform:none;letter-spacing:0}
.story-form input:focus,.story-form textarea:focus{box-shadow:5px 5px 0 var(--lime)}.story-form textarea{resize:vertical}
.word-count{align-self:flex-end;font-size:.72rem;font-weight:750;text-transform:none}.word-count.over{color:#a32424}
.check{flex-direction:row!important;align-items:flex-start;font-weight:600!important;line-height:1.45;text-transform:none!important;letter-spacing:0!important}.check input{width:20px;height:20px;flex:0 0 auto}
.submit{align-self:flex-start;font-size:.9rem}.form-message{padding:15px 17px;margin:0;font-weight:800}.form-message.success{background:var(--lime);color:var(--ink)}.form-message.error{background:#f4dddd;color:#7b1717}.honeypot{position:absolute!important;left:-9999px!important}
.stories-hero{background:linear-gradient(120deg,var(--lime) 0 67%,var(--coral-dark) 67%)}
.stories-hero>div:last-child{max-width:500px;padding-bottom:12px;color:white;font-size:1.2rem;font-weight:650;line-height:1.6}.stories-hero .button{margin-top:22px}
.stories-wrap{padding:90px clamp(24px,6vw,95px);background:var(--paper);min-height:600px}
.stories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:2px solid var(--ink)}
.story-card{min-height:390px;padding:32px;display:flex;flex-direction:column;background:var(--cream);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink)}.story-card:nth-child(3n){border-right:0}.featured-story{grid-column:span 2;background:var(--coral);color:var(--ink)}
.story-number{text-transform:uppercase;letter-spacing:.15em;font-size:.68rem;font-weight:900}.story-card h2{margin:28px 0 17px;font:900 2.7rem/.9 var(--display);text-transform:uppercase}.story-excerpt{font:500 1.04rem/1.65 var(--body)}
.story-by{margin-top:auto;padding-top:23px;display:flex;gap:13px;align-items:center;border-top:2px solid currentColor;text-transform:uppercase;font-size:.78rem}.story-by span{opacity:.65}
.empty-state{max-width:760px;padding:50px;background:var(--cream);border:3px solid var(--ink);box-shadow:14px 14px 0 var(--coral)}.empty-state h2{margin:0 0 20px;font:900 4rem/.9 var(--display);text-transform:uppercase}
.single-story,.generic-page{padding:90px clamp(24px,8vw,160px);background:var(--paper);min-height:650px}.single-story article,.content-shell{max-width:900px;margin:0 auto}.single-story h1,.generic-page h1{margin:0;font:900 clamp(4rem,8vw,8rem)/.88 var(--display);text-transform:uppercase}.single-by{padding:22px 0;border-bottom:3px solid var(--coral);font-weight:900;text-transform:uppercase}.single-content{margin-top:45px;font:500 1.2rem/1.85 Georgia,serif}.generic-page article{padding:25px 0;border-bottom:2px solid var(--line)}
@media(max-width:980px){.site-header{grid-template-columns:1fr auto;height:auto;padding-top:15px;padding-bottom:15px}.site-header nav{display:none}.hero-brand-card{display:none}.hero-copy{width:90%}.hero h1{font-size:6rem}.weekly,.project,.page-hero,.form-layout{grid-template-columns:1fr}.cause-grid{grid-template-columns:1fr}.feature-large{min-height:560px}.feature-small{border-left:0;border-top:2px solid var(--ink)}.stats,.action-list{grid-template-columns:1fr}.stats div,.action-list article{border-right:0;border-bottom:2px solid var(--ink)}.project{gap:20px}.final-cta .button{position:relative;right:auto;bottom:auto;margin-top:35px}.site-footer{grid-template-columns:1fr;gap:28px}.mini-words{justify-self:start}.form-layout aside{position:static}.stories-grid{grid-template-columns:1fr 1fr}.story-card:nth-child(3n){border-right:2px solid var(--ink)}}
@media(max-width:620px){.brand span{display:none}.hero{min-height:620px}.hero-copy{width:100%;padding-top:70px}.hero h1{font-size:4.6rem}.button-row{flex-direction:column;align-items:stretch}.week-stamp{display:none}.words-card{padding:26px 20px;box-shadow:9px 9px 0 var(--ink)}.card-meta,.form-row,.stories-grid{grid-template-columns:1fr}.featured-story{grid-column:auto}.story-form{padding:24px 19px;box-shadow:8px 8px 0 var(--coral)}.page-hero{padding-top:60px}.site-footer{padding-bottom:50px}.footer-logo img{width:72px;height:72px}.empty-state{padding:30px}.empty-state h2{font-size:3rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker>div{animation:none}*{transition:none!important}}