/* Motos Clásicas de Alquiler — hoja de estilos única */
:root{
  --papel:#e9e3d3; --tinta:#191714; --rojo:#8c1d18;
  --foto:#ded6c2; --gris:#6b6355; --linea:#cdc3ac; --crema:#f3ece0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font-family:'Archivo Narrow',Arial,sans-serif; font-size:16px; line-height:1.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
a:hover{opacity:.72}
h1,h2,h3{margin:0; text-wrap:balance}
p{margin:0; text-wrap:pretty}
ul,ol{margin:0; padding:0; list-style:none}

.wrap{padding:0 44px}
.anton{font-family:'Anton',Impact,sans-serif; text-transform:uppercase; letter-spacing:-.005em; line-height:.95}
.bodoni{font-family:'Source Serif 4',Georgia,serif; font-weight:400}
.eyebrow{font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--gris)}

/* barra superior */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 44px;
  background:var(--rojo); color:var(--crema); font-size:12px; letter-spacing:.26em; text-transform:uppercase}
.topbar .lang{display:flex; gap:10px}
.topbar .lang b{font-weight:700}
.topbar .lang span{opacity:.55}

/* cabecera */
.hdr{display:flex; align-items:flex-end; justify-content:space-between; gap:34px;
  padding:26px 44px 16px; border-bottom:4px double var(--tinta); flex-wrap:wrap}
.hdr .mark{font-family:'Anton',Impact,sans-serif; font-size:44px; line-height:.9; text-transform:uppercase; display:block}
.hdr .sub{display:block; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--gris); padding-top:6px}
.nav{display:flex; align-items:center; gap:28px; font-size:13px; letter-spacing:.2em; text-transform:uppercase; padding-bottom:6px}
.nav .cta{background:var(--tinta); color:var(--papel); padding:13px 20px}

/* botones */
.btn{display:block; padding:17px 22px; text-align:center; font-size:13px; letter-spacing:.2em;
  text-transform:uppercase; border:1px solid transparent; transition:background .22s, color .22s, border-color .22s, transform .22s, box-shadow .22s}
.btn:hover{opacity:1; transform:translateY(-2px); box-shadow:0 8px 0 -4px rgba(25,23,20,.18)}
.btn-dark{background:var(--tinta); color:var(--papel); border-color:var(--tinta)}
.btn-dark:hover{background:var(--rojo); border-color:var(--rojo); color:var(--crema)}
.btn-line{border-color:var(--tinta)}
.btn-line:hover{background:var(--tinta); color:var(--papel)}
.btn-red{background:var(--rojo); color:var(--crema); border-color:var(--rojo)}
.btn-red:hover{background:var(--crema); color:var(--rojo)}
.nav .cta{transition:background .22s, color .22s}
.nav .cta:hover{opacity:1; background:var(--rojo); color:var(--crema)}
.underline{transition:border-color .22s, color .22s}
.underline:hover{opacity:1; color:var(--rojo); border-color:var(--tinta)}
.chip{transition:background .18s, color .18s, border-color .18s}
.chip:hover{background:var(--tinta); color:var(--papel); border-color:var(--tinta)}
.chip[aria-pressed="true"]:hover{background:var(--rojo); border-color:var(--rojo)}

/* portada */
.hero{display:grid; grid-template-columns:1.35fr .65fr; border-bottom:1px solid var(--tinta)}
.hero-img{position:relative; background:var(--foto); padding:44px; display:flex; align-items:center;
  justify-content:center; border-right:1px solid var(--tinta); min-height:520px}
.hero-img img{width:100%; mix-blend-mode:multiply; filter:grayscale(.35) contrast(1.06)}
.hero-cap{position:absolute; left:44px; bottom:40px; max-width:62%}
.hero-cap h2{font-family:'Anton',Impact,sans-serif; font-size:44px; line-height:.95; text-transform:uppercase}
.hero-cap h2 span{color:var(--rojo)}
.hero-txt{padding:44px 34px; display:flex; flex-direction:column; gap:26px}
.hero-txt h1{font-family:'Source Serif 4',Georgia,serif; font-size:29px; line-height:1.26; font-weight:400}
.hairline{height:1px; background:var(--tinta)}
.numlist{display:flex; flex-direction:column; gap:15px; font-size:15px; line-height:1.5}
.numlist li{display:flex; gap:12px}
.numlist b{color:var(--rojo); font-family:'Anton',Impact,sans-serif; font-size:19px; line-height:1.2; letter-spacing:.02em}

/* marquesina */
.marquee{position:relative; overflow:hidden; padding:18px 0; border-bottom:1px solid var(--tinta);
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%)}
.marquee-track{display:flex; width:max-content; animation:marquee 68s linear infinite}
.marquee-track div{display:flex; align-items:center; gap:34px; padding-right:34px;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--gris); white-space:nowrap}
.marquee-track i{width:5px; height:5px; background:var(--rojo); display:block; transform:rotate(45deg)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* secciones */
.sec{padding:56px 44px}
.sec-dark{background:var(--tinta); color:var(--papel)}
.sec-line{border-bottom:1px solid var(--tinta)}
.sechead{display:flex; align-items:baseline; gap:20px; margin-bottom:28px; flex-wrap:wrap}
.sechead h2{font-family:'Anton',Impact,sans-serif; font-size:44px; text-transform:uppercase}
.sechead .fill{flex:1; height:1px; background:var(--tinta); min-width:40px}
.sechead a{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--rojo)}

/* rejillas de motos */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px}
.grid6{display:grid; grid-template-columns:repeat(6,1fr); gap:12px}
.moto{display:flex; flex-direction:column}
.moto{transition:transform .28s}
.moto .ph{background:var(--foto); padding:20px; display:flex; align-items:center; justify-content:center;
  min-height:190px; border:1px solid var(--tinta); overflow:hidden}
.moto .ph img{width:100%; mix-blend-mode:multiply; filter:grayscale(.4) contrast(1.05);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), filter .45s}
.moto:hover{opacity:1}
.moto:hover .ph img{transform:scale(1.07); filter:grayscale(0) contrast(1.08)}
.moto:hover .nm b{color:var(--rojo)}
.moto .nm b{transition:color .22s}
@media (prefers-reduced-motion:reduce){.moto .ph img{transition:none}.moto:hover .ph img{transform:none}}
.moto .nm{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-top:12px}
.moto .nm b{font-family:'Anton',Impact,sans-serif; font-size:20px; text-transform:uppercase; font-weight:400; line-height:1.1}
.moto .nm i{font-style:normal; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--rojo)}
.moto .mt{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--gris); padding-top:4px}

.gridcta{display:flex; justify-content:center; margin-top:34px}
.gridcta .btn{min-width:min(340px,100%); padding:19px 40px}

/* tarifas */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.tier{border-top:4px solid var(--rojo); padding-top:18px; display:flex; flex-direction:column; gap:14px}
.tier-hd{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.tier-hd b{font-size:13px; letter-spacing:.26em; text-transform:uppercase; color:#e0b0ac; font-weight:400}
.tier-hd span{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#7d7565}
.tier-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid #38332a}
.tier-row:last-child{border-bottom:0}
.tier-row span{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#9a917f}
.tier-row b{font-family:'Anton',Impact,sans-serif; font-size:24px; font-weight:400}
.tier-row.big b{font-size:34px; color:var(--crema)}
.tier p{font-size:15px; line-height:1.6; color:#c3bba9}

/* pasos */
.steps{padding:56px 44px; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; border-bottom:1px solid var(--tinta)}
.steps .n{display:block; font-family:'Anton',Impact,sans-serif; font-size:64px; color:var(--rojo);
  line-height:.85; -webkit-text-stroke:1px var(--rojo); letter-spacing:.01em}
.steps h3{font-family:'Source Serif 4',Georgia,serif; font-size:25px; font-weight:400; margin:10px 0}
.steps p{font-size:15px; line-height:1.65; color:#4a443a}

/* dos columnas */
.split{display:grid; grid-template-columns:.9fr 1.1fr; border-bottom:1px solid var(--tinta)}
.split .txt{padding:56px 44px; display:flex; flex-direction:column; gap:18px; justify-content:center}
.split .txt h2{font-family:'Anton',Impact,sans-serif; font-size:42px; text-transform:uppercase; line-height:.96}
.split .txt p{font-size:16px; line-height:1.7; color:#4a443a}
.split .pic{background:var(--foto); border-left:1px solid var(--tinta); padding:44px; display:flex; align-items:center; justify-content:center}
.split .pic img{width:100%; mix-blend-mode:multiply; filter:grayscale(.4) contrast(1.05)}
.underline{align-self:flex-start; border-bottom:2px solid var(--rojo); padding-bottom:4px; font-size:13px; letter-spacing:.2em; text-transform:uppercase}

/* instagram */
.ig{display:grid; grid-template-columns:repeat(6,1fr); gap:12px}
.ig a{position:relative; aspect-ratio:1; border:1px solid var(--tinta); background:var(--foto) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; text-align:center; padding:10px}
.ig a span{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gris)}

/* colección */
.filters{display:flex; flex-direction:column; gap:14px; border-top:1px solid var(--tinta);
  border-bottom:1px solid var(--tinta); padding:20px 0; margin-bottom:34px}
.frow{display:flex; align-items:flex-start; gap:16px}
.frow>b{width:110px; flex:none; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gris); font-weight:400; padding-top:9px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{border:1px solid var(--tinta); background:transparent; color:var(--tinta); padding:8px 13px;
  font-family:'Archivo Narrow',Arial,sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--rojo); color:var(--crema); border-color:var(--rojo)}
.moto[hidden]{display:none}

/* entradilla a dos columnas */
.intro2{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:end}
.split-even{grid-template-columns:1fr 1fr}

/* ficha */
.crumb{padding:20px 44px; border-bottom:1px solid var(--tinta); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gris)}
.crumb i{color:var(--rojo); font-style:normal}
.detail{display:grid; grid-template-columns:1.25fr .75fr; border-bottom:1px solid var(--tinta)}
.detail .left{border-right:1px solid var(--tinta)}
.detail .big{background:var(--foto); padding:50px; display:flex; align-items:center; justify-content:center; min-height:520px}
.detail .big img{width:100%; mix-blend-mode:multiply; filter:grayscale(.3) contrast(1.06)}
.thumbs{display:flex; border-top:1px solid var(--tinta)}
.thumbs div{flex:1 1 50%; max-width:50%; min-width:0; background:#e4dcc8; border-right:1px solid var(--tinta);
  padding:26px; display:flex; align-items:center; justify-content:center; aspect-ratio:1/.92; height:auto}
.thumbs div:last-child{border-right:0}
.thumbs img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; filter:grayscale(.45) contrast(1.05)}
.detail .right{padding:44px 34px; display:flex; flex-direction:column; gap:24px}
.badge{display:inline-block; background:var(--rojo); color:var(--crema); padding:7px 13px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase}
.detail h1{font-family:'Anton',Impact,sans-serif; font-size:52px; line-height:.92; text-transform:uppercase; margin:14px 0 0}
.detail .yr{display:block; font-family:'Source Serif 4',Georgia,serif; font-size:24px; color:var(--rojo); padding-top:8px}
.detail .desc{font-size:16px; line-height:1.7; color:#4a443a}
.specs{border-top:1px solid var(--tinta)}
.specs div{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--linea); font-size:14px}
.specs span{letter-spacing:.16em; text-transform:uppercase; color:var(--gris); font-size:11px}
.specs b{font-weight:600}
.pricebox{background:var(--tinta); color:var(--papel); padding:24px; display:flex; flex-direction:column; gap:12px}
.pricebox .lbl{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#9a917f}
.pricebox .amount{font-family:'Anton',Impact,sans-serif; font-size:32px; color:var(--crema); line-height:1}
.pricebox .alt{display:flex; flex-direction:column; gap:4px; font-size:13px; color:#9a917f; letter-spacing:.08em}
.pricebox .note{font-size:14px; line-height:1.55; color:#c3bba9}
.pricebox .btn-red{margin-top:6px; padding:15px; font-size:12px}

/* aviso de cookies */
.cookies{position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--tinta); color:#c3bba9;
  padding:20px 32px; display:none; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap;
  border-top:3px solid var(--rojo)}
.cookies[open]{display:flex}
.cookies p{font-size:14px; line-height:1.55; max-width:62ch}
.cookies a{color:var(--crema); text-decoration:underline}
.ck-btns{display:flex; gap:12px; flex-wrap:wrap}
.ck-btns button{font-family:'Archivo Narrow',Arial,sans-serif; font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; padding:14px 22px; cursor:pointer; border:1px solid var(--crema);
  background:none; color:var(--crema); transition:background .2s, color .2s}
.ck-btns button:hover{background:var(--crema); color:var(--tinta)}
.ck-btns .ck-ok{background:var(--rojo); border-color:var(--rojo); color:var(--crema)}
.ck-btns .ck-ok:hover{background:var(--crema); border-color:var(--crema); color:var(--rojo)}
@media (max-width:720px){.cookies{padding:18px 20px; gap:16px}.ck-btns{width:100%}.ck-btns button{flex:1}}

/* botón flotante de WhatsApp */
.wafab{position:fixed; right:22px; bottom:22px; z-index:80; display:flex; align-items:center; gap:11px;
  background:var(--tinta); color:var(--crema); padding:14px 20px 14px 16px; border:1px solid var(--tinta);
  box-shadow:0 10px 26px rgba(15,13,11,.3); transition:background .22s, transform .22s, box-shadow .22s}
.wafab:hover{opacity:1; background:var(--rojo); border-color:var(--rojo); transform:translateY(-3px);
  box-shadow:0 14px 30px rgba(15,13,11,.38)}
.wafab svg{width:24px; height:24px; flex:none; fill:#25D366; transition:fill .22s}
.wafab:hover svg{fill:var(--crema)}
.wafab span{font-size:12px; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap}
.cookies[open] ~ .wafab{bottom:150px}
@media (max-width:720px){
  .wafab{right:14px; bottom:14px; padding:13px 16px 13px 14px; gap:9px}
  .wafab span{font-size:11px; letter-spacing:.14em}
  .cookies[open] ~ .wafab{bottom:190px}
}
@media print{ .wafab{display:none} }

/* páginas legales */
.legal-doc{max-width:78ch; padding:56px 44px}
.legal-doc h1{font-family:'Anton',Impact,sans-serif; font-size:46px; text-transform:uppercase; margin-bottom:8px}
.legal-doc .upd{font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--gris); margin-bottom:34px; display:block}
.legal-doc h2{font-family:'Anton',Impact,sans-serif; font-size:24px; text-transform:uppercase; margin:34px 0 12px}
.legal-doc p,.legal-doc li{font-size:16px; line-height:1.7; color:#3a352d}
.legal-doc p{margin-bottom:14px}
.legal-doc ul{list-style:disc; padding-left:22px; margin-bottom:14px}
.legal-doc li{margin-bottom:7px}
.legal-doc table{width:100%; border-collapse:collapse; margin-bottom:16px; font-size:15px}
.legal-doc th{background:var(--tinta); color:var(--papel); text-align:left; padding:9px 11px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:400}
.legal-doc td{padding:9px 11px; border-bottom:1px solid var(--linea); vertical-align:top}
.legal-doc .fill{background:#f7e9c8; padding:1px 5px; border-bottom:1px dashed #b58b2a}
@media (max-width:720px){.legal-doc{padding:34px 20px}.legal-doc h1{font-size:32px}}

/* zoom de fotos */
.detail .big img,.thumbs img,.moto .ph img{cursor:zoom-in}
.lightbox{position:fixed; inset:0; z-index:99; background:rgba(15,13,11,.94); display:none;
  align-items:center; justify-content:center; padding:56px 72px}
.lightbox[open]{display:flex}
.lightbox img{max-width:100%; max-height:100%; width:auto; object-fit:contain; cursor:zoom-out;
  filter:grayscale(.15) contrast(1.04)}
.lb-btn{position:absolute; background:none; border:0; color:var(--crema); cursor:pointer;
  font-family:'Anton',Impact,sans-serif; line-height:1; padding:14px 18px; opacity:.62}
.lb-btn:hover{opacity:1}
.lb-close{top:14px; right:18px; font-size:30px}
.lb-prev{left:6px; top:50%; transform:translateY(-50%); font-size:44px}
.lb-next{right:6px; top:50%; transform:translateY(-50%); font-size:44px}
.lb-cap{position:absolute; left:0; right:0; bottom:18px; text-align:center; color:#9a917f;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase}
@media (max-width:720px){
  .lightbox{padding:52px 12px}
  .lb-prev,.lb-next{font-size:32px}
}

/* listas y faq */
.cols2{padding:56px 44px; display:grid; grid-template-columns:1fr 1fr; gap:56px; border-bottom:1px solid var(--tinta)}
.cols2 h2{font-family:'Anton',Impact,sans-serif; font-size:34px; text-transform:uppercase}
.kv div{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--linea)}
.kv span{font-size:16px; line-height:1.4}
.kv b{font-size:16px; white-space:nowrap}
.bullets li{display:flex; gap:14px; padding:13px 0; border-bottom:1px solid var(--linea); font-size:16px; line-height:1.5}
.bullets i{color:var(--rojo); font-style:normal; font-weight:700}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none; cursor:pointer; padding:16px 34px 16px 0; position:relative;
  font-family:'Source Serif 4',Georgia,serif; font-size:19px; line-height:1.4; transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--rojo)}
.faq summary::after{content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%);
  font-family:'Archivo Narrow',Arial,sans-serif; font-size:24px; line-height:1; color:var(--rojo); transition:transform .25s}
.faq details[open] summary::after{content:"−"}
.faq details[open] summary{color:var(--rojo)}
.faq .ans{overflow:hidden}
.faq .ans p{font-size:15px; line-height:1.65; color:#4a443a; padding:0 34px 18px 0; margin:0;
  animation:faqIn .28s ease}
@keyframes faqIn{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.faq .ans p{animation:none}}
.foot-note{margin-top:16px; font-size:14px; line-height:1.6; color:#4a443a}

/* pie */
footer{background:var(--tinta); color:#c3bba9; padding:48px 44px 34px; display:flex; flex-direction:column; gap:30px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px}
.foot-grid h3{font-family:'Anton',Impact,sans-serif; font-size:28px; color:var(--papel); text-transform:uppercase; line-height:.95; font-weight:400}
.foot-grid p{font-size:15px; line-height:1.6; max-width:34ch}
.foot-col{display:flex; flex-direction:column; gap:10px; font-size:14px}
.foot-col b{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#7d7565; font-weight:400}
.legal{border-top:1px solid #38332a; padding-top:18px; display:flex; justify-content:space-between; gap:20px;
  flex-wrap:wrap; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#7d7565}

/* tableta */
@media (max-width:1024px){
  .hero,.split,.detail,.intro2,.split-even{grid-template-columns:1fr}
  .hero-img{border-right:0; border-bottom:1px solid var(--tinta); min-height:380px}
  .detail .left{border-right:0; border-bottom:1px solid var(--tinta)}
  .split .pic{border-left:0; border-top:1px solid var(--tinta)}
  .grid4{grid-template-columns:repeat(3,1fr)}
  .ig{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
/* móvil */
@media (max-width:720px){
  .wrap,.sec,.steps,.cols2,.hdr,.topbar,footer{padding-left:20px; padding-right:20px}
  .hero-img,.hero-txt,.detail .big,.detail .right,.split .txt,.split .pic{padding:24px 20px}
  .hero-cap{left:20px; bottom:20px; max-width:80%}
  .hero-cap h2{font-size:30px}
  .hdr{gap:16px}
  .hdr .mark{font-size:32px}
  .nav{gap:16px; font-size:12px; width:100%}
  .topbar{font-size:10px; letter-spacing:.16em; gap:10px}
  .topbar .hide-sm{display:none}
  .sechead h2{font-size:30px}
  .grid3,.grid4,.tiers,.steps,.cols2,.intro2{grid-template-columns:1fr; gap:24px}
  .thumbs div{padding:16px}
  .ig{grid-template-columns:repeat(2,1fr)}
  .detail h1{font-size:34px}
  .foot-grid{grid-template-columns:1fr}
  .frow{flex-direction:column; gap:8px}
  .frow>b{width:auto; padding-top:0}
  .thumbs{flex-wrap:wrap}
  .thumbs div{flex:1 1 50%}
}
@media print{ .topbar,.nav,.marquee{display:none} }

/* blog */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.post{display:flex; flex-direction:column}
.post .ph{background:var(--foto); border:1px solid var(--tinta); aspect-ratio:4/3; overflow:hidden}
.post .ph img{width:100%; height:100%; object-fit:cover; filter:grayscale(.35) contrast(1.05);
  transition:transform .45s cubic-bezier(.2,.7,.3,1), filter .45s}
.post:hover{opacity:1}
.post:hover .ph img{transform:scale(1.06); filter:grayscale(0) contrast(1.08)}
.post .date{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gris); padding-top:14px}
.post h3{font-family:'Anton',Impact,sans-serif; font-size:25px; text-transform:uppercase; line-height:1.02;
  padding-top:8px; font-weight:400; transition:color .22s}
.post:hover h3{color:var(--rojo)}
.post p{font-size:15px; line-height:1.6; color:#4a443a; padding-top:10px}
.post .more{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--rojo); padding-top:12px}
@media (prefers-reduced-motion:reduce){.post .ph img{transition:none}.post:hover .ph img{transform:none}}

.posthead{display:grid; grid-template-columns:1.15fr .85fr; border-bottom:1px solid var(--tinta)}
.posthead .ph{background:var(--foto); border-right:1px solid var(--tinta); min-height:440px; overflow:hidden}
.posthead .ph img{width:100%; height:100%; object-fit:cover; filter:grayscale(.3) contrast(1.05)}
.posthead .tx{padding:44px 34px; display:flex; flex-direction:column; gap:18px; justify-content:center}
.posthead h1{font-family:'Anton',Impact,sans-serif; font-size:44px; text-transform:uppercase; line-height:.96}
.posthead .meta{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gris)}
.posthead .sum{font-family:'Source Serif 4',Georgia,serif; font-size:20px; line-height:1.5; color:#3a352d}

.article{max-width:74ch; padding:56px 44px 20px}
.article h2{font-family:'Anton',Impact,sans-serif; font-size:30px; text-transform:uppercase; line-height:1; margin:46px 0 14px}
.article h2:first-child{margin-top:0}
.article h3{font-family:'Source Serif 4',Georgia,serif; font-size:22px; font-weight:600; margin:32px 0 10px}
.article p{font-size:17px; line-height:1.75; color:#332f28; margin-bottom:16px}
.article ul{list-style:disc; padding-left:22px; margin-bottom:16px}
.article li{font-size:17px; line-height:1.7; color:#332f28; margin-bottom:8px}
.article a{color:var(--rojo); border-bottom:1px solid var(--linea)}
.article a:hover{opacity:1; border-color:var(--rojo)}
.article .cierre{font-family:'Source Serif 4',Georgia,serif; font-size:20px; color:var(--rojo)}
.article .rel{border-top:1px solid var(--tinta); margin-top:46px; padding-top:22px; display:flex; flex-direction:column; gap:12px}
.article .rel b{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gris); font-weight:400}
.article .rel a{font-family:'Source Serif 4',Georgia,serif; font-size:19px; border:0}
.article .rel a:hover{opacity:1; color:var(--rojo)}
@media (max-width:1024px){
  .posts{grid-template-columns:repeat(2,1fr)}
  .posthead{grid-template-columns:1fr}
  .posthead .ph{border-right:0; border-bottom:1px solid var(--tinta); min-height:300px}
}
@media (max-width:720px){
  .posts{grid-template-columns:1fr; gap:26px}
  .posthead h1{font-size:31px}
  .posthead .tx{padding:26px 20px}
  .article{padding:34px 20px 20px}
  .article h2{font-size:24px}
  .article p,.article li{font-size:16px}
}