/* TENDENCIAS.CSS */
.tendencias-hero{ position:relative; width:100%; height:40vh; overflow:hidden; background:#f7f7f7; display:flex; align-items:center; justify-content:center; text-align:center; }
.tendencias-hero picture, .tendencias-hero img{ width:100%; height:100%; object-fit:cover; }
.tendencias-hero .overlay{ position:absolute; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; flex-direction:column; color:#fff; padding:0 5%; }
.tendencias-hero h1{ font-size:clamp(1.8rem,3vw,2.4rem); margin-bottom:8px; }
.tendencias-hero p{ font-size:clamp(1rem,2vw,1.2rem); opacity:.95; }

.tendencias-wrap{ padding:60px 6%; background:#fff; }
.tendencias-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }

.t-card{ background:#fff; border-radius:14px; box-shadow:0 2px 8px rgba(0,0,0,.08); overflow:hidden; display:grid; grid-template-rows:auto 1fr auto; transition:transform .2s, box-shadow .2s; }
.t-card:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.12); }
.t-card .thumb{ width:100%; aspect-ratio:1/1; overflow:hidden; background:#f2f4f7; }
.t-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.t-card:hover .thumb img{ transform:scale(1.05); }
.t-card .content{ padding:18px 18px 6px 18px; }
.t-meta{ display:flex; gap:10px; align-items:center; font-size:.85rem; color:#666; margin-bottom:6px; }
.t-meta .dot{ width:6px; height:6px; border-radius:50%; background:#ccc; display:inline-block; }
.t-title{ font-size:clamp(1.1rem,1.6vw,1.25rem); font-weight:700; line-height:1.25; color:#222; margin:4px 0 6px; }
.t-desc{ color:#555; line-height:1.55; font-size:.98rem; }
.t-card .actions{ display:flex; justify-content:space-between; align-items:center; padding:12px 18px 18px; gap:10px; }
.t-source{ font-size:.85rem; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.t-link{ border:1.5px solid #0072bb; color:#0072bb; padding:8px 12px; border-radius:999px; font-weight:600; font-size:.92rem; transition:.25s; white-space:nowrap; }
.t-link:hover{ background:#0072bb; color:#fff; }

@media (max-width:1024px){ .tendencias-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:768px){ .tendencias-hero{ height:32vh; } .tendencias-wrap{ padding:40px 5%; } .tendencias-grid{ grid-template-columns:1fr; } }