:root{
  /* Premium light palette (no red) */
  --bg: #fbfbfc;
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --text: #0b1220;
  --muted: rgba(11,18,32,.72);
  --muted-2: rgba(11,18,32,.56);
  --brand: #1F3A5F;      /* navy */
  --brand-2: #2b4c7e;    /* slightly brighter navy */
  --beige: #F4F1EA;
  --border: rgba(15,23,42,.10);
  --border-2: rgba(15,23,42,.14);
  --shadow-sm: 0 10px 24px rgba(2,6,23,.06);
  --shadow-md: 0 16px 40px rgba(2,6,23,.09);
  --shadow-lg: 0 30px 70px rgba(2,6,23,.12);
  --radius: 16px;
  --radius-lg: 22px;
  --container: 1180px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 520px at 18% -10%, rgba(31,58,95,.10), transparent 60%),
    radial-gradient(980px 520px at 92% 5%, rgba(31,58,95,.08), transparent 58%),
    linear-gradient(180deg, #fff, var(--bg));
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Subtle animated highlight (Apple-ish) */
body::before{
  content:"";
  position: fixed;
  inset:-60px;
  pointer-events:none;
  background:
    radial-gradient(800px 400px at 20% 0%, rgba(244,241,234,.55), transparent 70%),
    radial-gradient(900px 480px at 90% 15%, rgba(31,58,95,.06), transparent 70%);
  filter: blur(6px);
  opacity: .9;
  transform: translate3d(0,0,0);
  animation: floatGlow 12s ease-in-out infinite;
}
@keyframes floatGlow{
  0%,100%{transform: translateY(0)}
  50%{transform: translateY(18px)}
}
@media (prefers-reduced-motion: reduce){
  body::before{animation:none}
}

a{color:inherit;text-decoration:none}
a:hover{opacity:.96}

/* Header */
.site-header{
  position: relative;
  z-index: 80;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

.nav-wrap{
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.brand{display:flex;align-items:center;gap:10px;min-width: 140px}
.brand-logo{width:170px;height:170px}
.brand-name{font-weight:850;letter-spacing:-.01em}

.nav{display:flex;gap:8px;align-items:center}
.nav-link{
  padding:10px 12px;
  border-radius: 14px;
  color: rgba(11,18,32,.78);
  font-weight: 720;
  letter-spacing: -.01em;
  transition: background .18s ease, color .18s ease;
}
.nav-link:hover{background: rgba(31,58,95,.07); color: rgba(11,18,32,.90)}
.nav-pill{background: rgba(31,58,95,.09); border:1px solid rgba(31,58,95,.15)}

.nav-cta{display:flex;align-items:center;gap:10px}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 780;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 0 0 rgba(0,0,0,0);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:focus{outline: none}
.btn:focus-visible{box-shadow: 0 0 0 4px rgba(31,58,95,.18)}

.btn-primary{
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  color:#fff;
  border-color: rgba(31,58,95,.18);
  box-shadow: 0 14px 30px rgba(31,58,95,.18);
}
.btn-primary:hover{transform: translateY(-1px)}

.btn-ghost{
  background: rgba(255,255,255,.92);
}
.btn-ghost:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: var(--border-2);
}

.nav-toggle{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.nav-toggle:hover{transform: translateY(-1px); box-shadow: var(--shadow-sm)}

/* Layout */
.site-main{max-width: var(--container); margin:0 auto; padding: 18px 18px 70px; position: relative; z-index: 1}
.section{margin-top:28px}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:12px}

.h-eyebrow{
  display:inline-flex;
  gap:10px;
  align-items:center;
  font-weight: 860;
  letter-spacing:.18em;
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(31,58,95,.86);
}

.h1{
  font-size: 46px;
  line-height: 1.04;
  margin: 12px 0 10px;
  letter-spacing: -0.03em;
}

.h2{margin:0;font-size: 22px;letter-spacing:-.02em}
.p{margin:0; font-size:16px; line-height:1.65; color: var(--muted); max-width: 64ch}
.small{color: var(--muted-2); font-size: 14px; line-height:1.55}

/* Hero */
.hero{
  position: relative;
  overflow:hidden;
  border-radius: calc(var(--radius-lg) + 6px);
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(31,58,95,.10), transparent 60%),
    radial-gradient(700px 420px at 90% 12%, rgba(244,241,234,.75), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(246,247,249,.92));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20px 20px, rgba(31,58,95,.08) 2px, transparent 2.4px);
  background-size: 24px 24px;
  opacity: .55;
  mask-image: radial-gradient(520px 260px at 30% 18%, #000 55%, transparent 80%);
  pointer-events:none;
}

.hero-inner{
  position: relative;
  padding: 48px 28px;
  display:grid;
  grid-template-columns: 1.22fr .78fr;
  gap: 18px;
  align-items:center;
}

.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

.hero-card{
  background: rgba(255,255,255,.80);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-md);
}
.hero-card .k{font-weight: 850; color: rgba(11,18,32,.78)}
.hero-card .v{font-weight: 920; font-size: 22px; margin-top: 8px; color: var(--brand)}
.hero-card .s{margin-top:10px; color: var(--muted); font-size: 14px; line-height: 1.55}

/* Grids */
.grid{display:grid; gap: 14px}
.grid.types{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid.zones{grid-template-columns: repeat(4, minmax(0,1fr))}

.grid-2{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid-3{grid-template-columns: repeat(3, minmax(0,1fr))}
.grid-4{grid-template-columns: repeat(4, minmax(0,1fr))}

/* Cards */
.card{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform .20s ease, box-shadow .20s ease, border-color .20s ease;
}
.card:hover{transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-2)}

.card .title{font-weight: 900; letter-spacing: -.01em}
.card .meta{margin-top: 8px; color: var(--muted); font-size: 13.5px; line-height: 1.55}
.card .card-actions{margin-top: 12px; display:flex; gap: 10px; flex-wrap: wrap}

/* Property type cards (with photo spaces) */
.type-card{padding: 0; overflow:hidden}
.type-media{
  position: relative;
  height: 128px;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--border);
}
.type-media::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.28));
  opacity: .55;
}
.type-media-overlay{
  position:absolute; inset:0;
  background: radial-gradient(520px 240px at 15% 20%, rgba(31,58,95,.25), transparent 60%);
  opacity: .65;
}
.type-badge{
  position:absolute;
  left: 12px;
  bottom: 12px;
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 12px 30px rgba(2,6,23,.18);
}
.type-badge i{color: var(--brand)}
.type-body{padding: 14px}
.type-card:hover .type-media{filter: saturate(1.03)}
.type-card--compact .type-media{height: 110px}

/* Zones (map / clusters feel) */
.pin{display:flex;align-items:center;justify-content:space-between;gap: 10px}
.pin .left{display:flex;align-items:center;gap:10px}
.pin .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(31,58,95,.78);
  box-shadow: 0 0 0 7px rgba(31,58,95,.10);
}
.badge{
  font-weight: 900;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(31,58,95,.18);
  background: rgba(31,58,95,.06);
  color: rgba(31,58,95,.92);
}

/* Split blocks */
.split{display:grid; grid-template-columns: 1fr 1fr; gap: 14px}
.kpi{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}
.kpi h3{margin:0; font-size: 16px; letter-spacing:-.01em}
.kpi p{margin:10px 0 0; color: var(--muted); line-height: 1.6}

/* Footer */
.site-footer{
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(14px);
  padding: 18px;
}
.footer-wrap{max-width: var(--container); margin: 0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:18px}
.footer-brand{font-weight: 900}
.footer-note{margin-top:6px; color: var(--muted); font-size: 13px; line-height:1.5}
.footer-links{display:flex; gap: 10px; flex-wrap: wrap}
.footer-links a{padding: 8px 10px; border-radius: 14px}
.footer-links a:hover{background: rgba(31,58,95,.07)}

/* WhatsApp floating */
.wa-float{
  position: fixed;
  right: 16px;
  bottom: 16px;
  display:flex;
  gap:10px;
  align-items:center;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(11,18,32,.92);
  color:#fff;
  box-shadow: 0 18px 40px rgba(2,6,23,.22);
  border:1px solid rgba(255,255,255,.12);
  z-index: 90;
}
.wa-dot{width:10px;height:10px;border-radius:99px;background:#25D366;box-shadow: 0 0 0 6px rgba(37,211,102,.15)}

/* Mobile menu */
.mobile-menu{position:fixed; inset:0; z-index: 120}
.mobile-menu__backdrop{
  position:absolute; inset:0;
  width:100%; height:100%;
  background: rgba(2,6,23,.42);
  border:0;
}
.mobile-menu__panel{
  position:absolute;
  right: 12px;
  top: 12px;
  width: min(420px, calc(100% - 24px));
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(-6px);
  opacity: 0;
  transition: transform .18s ease, opacity .18s ease;
}

body.menu-open .mobile-menu__panel{transform: translateY(0); opacity: 1}

.mobile-menu__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px;
  border-bottom: 1px solid var(--border);
}
.mobile-menu__title{font-weight: 900; letter-spacing:-.01em}
.mobile-menu__close{
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.9);
  cursor:pointer;
}
.mobile-menu__links{display:flex; flex-direction:column; padding: 10px}
.mobile-menu__links a{
  padding: 12px 12px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  gap: 12px;
  font-weight: 780;
  color: rgba(11,18,32,.85);
}
.mobile-menu__links a:hover{background: rgba(31,58,95,.07)}
.mobile-menu__actions{padding: 12px 14px 14px; border-top: 1px solid var(--border)}

/* Responsive */
@media (max-width: 1040px){
  .h1{font-size: 40px}
  .hero-inner{grid-template-columns: 1fr;}
  .grid.types{grid-template-columns: repeat(3, minmax(0,1fr))}
  .grid.zones{grid-template-columns: repeat(2, minmax(0,1fr))}
  .nav{display:none}
  .nav-toggle{display:inline-flex}
}

@media (max-width: 720px){
  .h1{font-size: 34px}
  .hero-inner{padding: 34px 18px}
  .grid-4{grid-template-columns: repeat(2, minmax(0,1fr))}
  .grid-3{grid-template-columns: repeat(1, minmax(0,1fr))}
  .split{grid-template-columns: 1fr}
  .wa-float{right: 12px; bottom: 12px}
}

@media (max-width: 520px){
  .grid.types{grid-template-columns: repeat(2, minmax(0,1fr))}
  .grid.zones{grid-template-columns: repeat(1, minmax(0,1fr))}
}


/* ONE lists */
.bullets{list-style:none;padding:0;margin:12px 0;display:grid;gap:10px}
.bullets li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid rgba(15,23,42,.08);border-radius:14px;background:rgba(255,255,255,.75)}
.bullets i{margin-top:2px;}


/* Google Maps embed */
.section-map .section-head{align-items:flex-end}
.map-embed{width:100%;border-radius:22px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff}
.map-embed iframe{width:100%;height:420px;border:0;display:block}
@media (max-width: 720px){.map-embed iframe{height:360px}}

/* Map (new wrapper + radius overlay) */
.map-wrap{width:100%}
.map-head{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.map-head .k{font-weight:800;letter-spacing:-.02em}
.map-head .small{color:var(--muted)}

.map-frame{width:100%;border-radius:22px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;position:relative}
.map-frame iframe{width:100%;height:420px;border:0;display:block}
@media (max-width: 720px){.map-frame iframe{height:360px}}

/* “Radio” look (purely visual overlay) */
.map-radius__overlay{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}
.map-radius__ring{width:min(68%,520px);aspect-ratio:1/1;border-radius:999px;
  border: 2px solid rgba(47,111,235,.45);
  box-shadow:
    0 0 0 10px rgba(47,111,235,.08),
    0 0 0 26px rgba(47,111,235,.05),
    0 30px 80px rgba(2,6,23,.20);
  background: radial-gradient(circle at center, rgba(47,111,235,.16) 0%, rgba(47,111,235,.10) 45%, rgba(47,111,235,0) 70%);
  backdrop-filter: blur(1px);
}
.map-radius__dot{position:absolute;width:12px;height:12px;border-radius:999px;background: rgba(47,111,235,1);
  box-shadow: 0 0 0 6px rgba(31,58,95,.18), 0 10px 26px rgba(2,6,23,.22);
}
.map-radius__label{position:absolute;bottom:14px;right:14px;
  padding:10px 12px;border-radius:14px;
  background: rgba(255,255,255,.82);
  border:1px solid rgba(15,23,42,.10);
  color: var(--ink);
  font-weight:700;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 720px){
  .map-radius__ring{width:min(76%,420px)}
  .map-radius__label{left:14px;right:auto}
}



/* ===========================
   Mini maps (zones cards)
   =========================== */
.zone-card{overflow:hidden}
.zone-map{margin:-14px -14px 14px -14px}
.map-mini{width:100%;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#fff;position:relative;box-shadow:var(--shadow-sm)}
.map-mini iframe{width:100%;height:160px;border:0;display:block;filter:saturate(1.05) contrast(1.03)}
@media (max-width: 720px){.map-mini iframe{height:140px}}

.section-map .map-frame.is-compact iframe{height:240px}
@media (max-width: 720px){.section-map .map-frame.is-compact iframe{height:200px}}

/* Tighter listing cards */
.listing .listing-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.listing .pill{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.6)}

/* Type cards (Home) */
.type-card .type-thumb{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--border);background:#fff}
.type-card .type-thumb img{width:100%;height:160px;object-fit:cover;display:block}
.type-card .type-badge{position:absolute;left:12px;bottom:12px;width:40px;height:40px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.9);border:1px solid var(--border);box-shadow:var(--shadow-sm)}
.type-card .type-body{padding-top:12px}
.type-card .type-title{font-weight:800;letter-spacing:-.02em}


/* Hide any radius text labels */
.map-radius__label{display:none !important;}


/* Mobile spacing improvements */
@media (max-width: 720px){
  .section{margin-top:22px}
  .card{padding: 14px}
  .card .card-actions{gap:10px}
  .card .card-actions .btn{flex: 1 1 100%}
  .hero-actions .btn{flex: 1 1 100%}
  .nav-wrap{padding: 12px 14px}
}


/* Type selector (replaces "Filtrar por tipo") */
.type-filter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.type-filter__label{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
  color: rgba(11,18,32,.82);
  letter-spacing: -.01em;
}

.type-filter__control{
  position: relative;
  min-width: 260px;
}

.type-select{
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  border-radius: 16px;
  padding: 12px 42px 12px 14px;
  font-weight: 780;
  color: rgba(11,18,32,.88);
  outline: none;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.type-select:focus{
  border-color: rgba(31,58,95,.24);
  box-shadow: 0 0 0 4px rgba(31,58,95,.14);
}

.type-select__chev{
  position:absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(11,18,32,.55);
  pointer-events:none;
}

@media (max-width: 720px){
  .type-filter{
    flex-direction: column;
    align-items: stretch;
  }
  .type-filter__control{min-width: 100%;}
}

/* ===========================
   Smooth animations (premium)
   Paste at END of site.css
   =========================== */

:root{
  --ease: cubic-bezier(.2,.85,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 520ms;
}

/* Smooth scrolling (disabled for reduced motion) */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* Make motion feel consistent */
.btn,
.card,
.nav-link,
.hero,
.hero-card,
.kpi,
.type-thumb img,
.type-media,
.map-mini,
.map-frame,
.wa-float,
.mobile-menu__panel,
.nav-toggle{
  transition-timing-function: var(--ease);
}

/* Micro-interactions */
.btn{transition-duration: var(--dur-2)}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0) scale(.985)}
.btn-primary{position:relative; overflow:hidden}
.btn-primary::after{
  content:"";
  position:absolute;
  inset:-60% -70%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-55%) rotate(10deg);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease), transform 900ms var(--ease-out);
  pointer-events:none;
}
.btn-primary:hover::after{
  opacity: .9;
  transform: translateX(25%) rotate(10deg);
}

.card{transition-duration: var(--dur-2)}
.card:hover{transform: translateY(-4px)}
.card:active{transform: translateY(-2px)}

.nav-link{transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease)}
.nav-link:active{transform: translateY(1px)}

/* Images feel “alive” but subtle */
.type-card .type-thumb img{
  transform: scale(1);
  transition: transform 700ms var(--ease-out), filter 700ms var(--ease-out);
}
.type-card:hover .type-thumb img{transform: scale(1.04)}

/* Mini maps: subtle crisp on hover */
.map-mini iframe{
  transition: filter 600ms var(--ease-out), transform 600ms var(--ease-out);
  transform: translateZ(0);
}
.map-mini:hover iframe{filter:saturate(1.12) contrast(1.05)}

/* Floating WhatsApp: gentle lift */
.wa-float{
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.wa-float:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(2,6,23,.24);
}

/* HERO ambient motion (very soft) */
.hero{transform: translateZ(0)}
.hero::before{
  content:"";
  position:absolute;
  inset:-80px;
  pointer-events:none;
  background:
    radial-gradient(600px 280px at 15% 20%, rgba(31,58,95,.10), transparent 60%),
    radial-gradient(520px 260px at 85% 30%, rgba(244,241,234,.65), transparent 62%);
  opacity: .65;
  filter: blur(2px);
  animation: heroDrift 14s ease-in-out infinite;
}
@keyframes heroDrift{
  0%,100%{transform: translate3d(0,0,0)}
  50%{transform: translate3d(0,14px,0)}
}

/* Page load reveal (no JS) */
@keyframes riseFade{
  from{opacity:0; transform: translateY(12px)}
  to{opacity:1; transform: translateY(0)}
}
.hero{
  animation: riseFade var(--dur-3) var(--ease-out) both;
}
.section{
  animation: riseFade 680ms var(--ease-out) both;
  animation-delay: 40ms;
}
.grid > .card{
  animation: riseFade 720ms var(--ease-out) both;
}
.grid > .card:nth-child(1){animation-delay: 60ms}
.grid > .card:nth-child(2){animation-delay: 90ms}
.grid > .card:nth-child(3){animation-delay: 120ms}
.grid > .card:nth-child(4){animation-delay: 150ms}
.grid > .card:nth-child(5){animation-delay: 180ms}
.grid > .card:nth-child(6){animation-delay: 210ms}
.grid > .card:nth-child(7){animation-delay: 240ms}
.grid > .card:nth-child(8){animation-delay: 270ms}
.grid > .card:nth-child(9){animation-delay: 300ms}
.grid > .card:nth-child(10){animation-delay: 330ms}
.grid > .card:nth-child(11){animation-delay: 360ms}
.grid > .card:nth-child(12){animation-delay: 390ms}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero::before{animation:none}
  .hero,.section,.grid>.card{animation:none}
  .btn,.card,.nav-link,.type-thumb img,.map-mini iframe,.wa-float{transition:none}
}






/* Zonas hero cover (changes background when selecting type) */
.zones-hero{
  position: relative;
}

.zones-hero.hero--cover{
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(31,58,95,.10), transparent 60%),
    radial-gradient(700px 420px at 90% 12%, rgba(244,241,234,.75), transparent 62%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(246,247,249,.90)),
    var(--hero-cover);
  background-size: auto, auto, auto, cover;
  background-position: center, center, center, center;
  background-repeat: no-repeat;
}

.zones-hero.hero--cover::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 46%, rgba(255,255,255,.62) 100%);
  opacity: 1;
  border-radius: inherit;
}

/* Ensure hero content stays above overlays */
.zones-hero > *{
  position: relative;
  z-index: 2;
}


/* ===== HOME HERO: bloque inferior con mapa izquierda + texto derecha (misma altura) ===== */
.home .hero-inner{
  grid-template-columns: 1fr;        /* el panel se va abajo */
  gap: 16px;
}

.home .hero-card{
  max-width: 980px;
}

/* Contenedor split (mapa + contenido) */
.home .hero-card--split{
  display: grid;
  grid-template-columns: 260px 1fr;  /* mapa izquierda, texto derecha */
  gap: 14px;
  align-items: stretch;              /* CLAVE: mismo alto */
  padding: 14px;
  border-radius: 20px;
}

/* Mapa: que estire a la altura del contenido derecho */
.home .hero-mini-map{
  height: 100%;
  min-height: 284px;                 /* ajusta si lo quieres más alto/bajo */
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
}

/* Si el mapa es IMG dentro */
.home .hero-mini-map img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Si el mapa es un DIV con background-image */
.home .hero-mini-map{
  background-size: cover;
  background-position: center;
}

/* Columna derecha */
.home .hero-card__content{
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.home .hero-card__title{
  font-size: 22px;
  margin: 2px 0 6px;
}

/* Bullets más compactos y pro */
.home .hero-card--split .bullets{
  margin: 0;
  gap: 10px;
}

.home .hero-card--split .bullets li{
  padding: 12px 12px;
  border-radius: 14px;
}

/* Botón al fondo de la columna derecha */
.home .hero-card__cta{
  margin-top: auto;
}

/* Responsive: apila mapa arriba + texto abajo */
@media (max-width: 860px){
  .home .hero-card--split{
    grid-template-columns: 1fr;
  }
  .home .hero-mini-map{
    min-height: 200px;
  }
}


/* ONE page: make video protagonist */
.one .hero-inner{
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

.one-video-card{
  padding: 16px;
  border-radius: 22px;
}

.one-video-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}

.one-logo{width:120px;height:auto}

.one-video-wrap{
  width:100%;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow-md);
}

.one-video{
  width:100%;
  height: 420px;      /* protagonista */
  display:block;
  object-fit: cover;
}

.one-video-actions{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Responsive */
@media (max-width: 1040px){
  .one .hero-inner{grid-template-columns: 1fr;}
  .one-video{height: 360px;}
  .one-logo{width:110px;}
}
@media (max-width: 720px){
  .one-video{height: 260px;}
}

/* ====== Micro-animaciones suaves (global) ====== */
:root{
  --ease-out: cubic-bezier(.2,.8,.2,1);
}

@media (prefers-reduced-motion: no-preference){
  .card, .btn, a.card{
    transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s var(--ease-out);
  }
  a.card:hover, .card:hover{
    transform: translateY(-2px);
  }
  .btn:hover{
    transform: translateY(-1px);
  }
}

/* ====== QUIENES: más dinámico sin cambiar tamaños ====== */
.hero-card--icon .k i{ margin-right:8px; opacity:.9; }
.hero-card__divider{
  height:1px;
  background: rgba(15,23,42,.08);
  margin: 14px 0;
}

.card-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.card-title-row i{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:10px;
  background: rgba(15,23,42,.06);
}

/* bullets soft */
.bullets--soft li{
  align-items:flex-start;
}
.bullets--soft i{
  margin-top:3px;
  opacity:.9;
}

/* ====== ONE: layout y video protagonista ====== */
.one-hero{ padding-bottom: 20px; }
.one-hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: start;
}

.one-h1{ letter-spacing: -0.02em; }
.one-h1__line2{
  display:inline-block;
  font-weight:800;
}

.one-video{
  padding: 16px;
}
.one-video__head{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom: 12px;
}
.one-video__title{
  font-weight:800;
  display:flex;
  align-items:center;
  gap:8px;
}
.one-video__sub{
  opacity:.75;
  font-size: .95rem;
}

.one-video__frame{
  border-radius: 16px;
  overflow:hidden;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.08);
}
.one-video__player{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 16 / 9;
}

.one-video__cta{
  display:flex;
  gap:10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

/* Beneficios ONE (cards con imagen) */
.grid.benefits{
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 14px;
}
.benefit-card{ overflow:hidden; }
.benefit-thumb{
  position:relative;
  border-radius: 16px;
  overflow:hidden;
}
.benefit-thumb img{
  width:100%;
  height:160px;
  object-fit:cover;
  display:block;
  filter: saturate(1.02);
}
.benefit-badge{
  position:absolute;
  left:10px;
  top:10px;
  width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:12px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
}
.benefit-body{ padding: 12px 14px 14px; }
.benefit-title{
  font-weight:800;
  margin-bottom:4px;
}

/* Quita “hueco” grande antes de Suscripción */
.one .section#pago{ padding-top: 16px; }
.one .hero + .section{ padding-top: 18px; }

/* Responsive */
@media (max-width: 980px){
  .one-hero__grid{ grid-template-columns: 1fr; }
  .grid.benefits{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .grid.benefits{ grid-template-columns: 1fr; }
  .benefit-thumb img{ height: 170px; }
}


/* ===========================
   ONE + QUIENES: menos texto, más visual
   Pegar al FINAL de site.css
   =========================== */

/* ONE: callouts destacados (lo que marcó en rojo) */
.one-callout{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(31,58,95,.14);
  background: linear-gradient(135deg, rgba(244,241,234,.72), rgba(255,255,255,.88));
  box-shadow: 0 10px 28px rgba(2,6,23,.06);
}
.one-callout p{
  margin: 0;
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(11,18,32,.82);
  letter-spacing: -.01em;
}
.one-callout strong{color: var(--brand)}
.one-callout--soft{
  background: rgba(255,255,255,.86);
}

/* ONE: que los bullets se vean más “bloque” y menos lista */
.one .bullets li{
  background: rgba(255,255,255,.82);
}

/* QUIENES: cards visuales VALORES / MISIÓN / VISIÓN */
.grid.mv-cards{
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.mv-card{
  padding: 16px;
}
.mv-icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(31,58,95,.07);
  border: 1px solid rgba(31,58,95,.12);
  margin-bottom: 10px;
}
.mv-icon i{color: var(--brand)}
.mv-title{
  font-weight: 900;
  letter-spacing: .16em;
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(31,58,95,.90);
}
.mv-text{
  margin-top: 8px;
  color: rgba(11,18,32,.70);
  line-height: 1.55;
  font-size: 14px;
}

/* QUIENES: títulos de MISIÓN/VISIÓN consistentes */
.quienes .card-title-row .h2{
  font-size: 18px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Responsive */
@media (max-width: 920px){
  .grid.mv-cards{grid-template-columns: 1fr}
  .one-callout p{font-size: 16px}
}


/* ===========================
   QUIENES – HERO Y CARD AL RAS
   =========================== */

/* Hero con altura equilibrada */
.quienes .hero{
  min-height: 62vh;
  padding-top: 56px;
  padding-bottom: 56px;
  display: flex;
  align-items: center;       /* centra todo el contenido */
}

/* Grid interno centrado */
.quienes .hero-grid{
  align-items: center;
}

/* Card VALORES / ENFOQUE */
.quienes .hero-card{
  margin-top: 0;             /* elimina empuje hacia abajo */
  align-self: stretch;       /* 👈 clave: mismo alto visual */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centra contenido dentro del card */
}

/* Ajuste fino de padding interno del card */
.quienes .hero-card{
  padding-top: 22px;
  padding-bottom: 22px;
}

/* Texto del lado izquierdo: leve empuje hacia abajo */
.quienes .hero-grid > div:first-child{
  padding-top: 8px;
}

/* Mobile: comportamiento natural */
@media (max-width: 900px){
  .quienes .hero{
    min-height: unset;
    padding-top: 40px;
    padding-bottom: 40px;
    align-items: flex-start;
  }

  .quienes .hero-card{
    align-self: auto;
  }
}


/* ===========================
   ONE – Logo antes del H1 (ajustado)
   =========================== */

/* ONE – Logo pegado al H1 */
.one-eyebrow{
  margin-bottom: 6px;   /* antes 18px */
  line-height: 0;       /* evita “aire” extra por baseline */
}

.one-eyebrow img{
  height: 160px;         /* ajústalo a gusto: 80–110 suele quedar perfecto */
  width: auto;
  display: block;
  opacity: .95;
}

/* Mobile */
@media (max-width: 768px){
  .one-eyebrow img{
    height: 70px;
  }
}
.one .one-h1{
  margin-top: -10;        /* por si tu h1 trae margin default */
}


/* ===========================
   QUIENES – Hero con imagen degradada
   =========================== */

.quienes .hero{
  position: relative;
  overflow: hidden;
  border-radius: 28px;

  /* Imagen de fondo */
  background-image:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.92) 0%,
      rgba(255,255,255,0.75) 38%,
      rgba(255,255,255,0.45) 62%,
      rgba(255,255,255,0.20) 80%,
      rgba(255,255,255,0.10) 100%
    ),
    url("/assets/img/quienes-somos.jpg");

  background-size: cover;
  background-position: center right;

  padding: 56px 44px;
}

/* Asegura que el contenido quede encima */
.quienes .hero > *{
  position: relative;
  z-index: 1;
}

/* Ajuste fino del grid */
.quienes .hero-grid{
  align-items: center;
  gap: 28px;
}

/* Card de VALORES / ENFOQUE integrada al fondo */
.quienes .hero-card{
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(31,58,95,.12);
  box-shadow: 0 18px 55px rgba(2,6,23,.10);
}

/* Texto principal */
.quienes .lead{
  max-width: 68ch;
}

/* Responsive */
@media (max-width: 980px){
  .quienes .hero{
    padding: 40px 18px;
    background-position: center;
  }
}



/* ===========================
   Footer – redes y contacto
   =========================== */

.site-footer{
  background: #0b1220;
  color: rgba(255,255,255,.82);
}

.footer-wrap{
  display: flex;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.footer-col{
  max-width: 420px;
}

.footer-brand{
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 6px;
}

.footer-note{
  font-size: 13.5px;
  opacity: .75;
  margin-bottom: 10px;
}

.footer-mail{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  margin-bottom: 12px;
}
.footer-mail i{
  opacity: .85;
}
.footer-mail:hover{
  color: #fff;
}

/* Redes */
.footer-social{
  display: flex;
  gap: 10px;
}

.footer-social a{
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 16px;
  transition: all .2s ease;
}

.footer-social a:hover{
  background: rgba(255,255,255,.18);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px){
  .footer-wrap{
    flex-direction: column;
    gap: 22px;
  }
}


 /* ===========================
   CONTACTO – Diseño premium + logo ONE 85px
   (reemplaza el bloque anterior)
   =========================== */

.contact-hero{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(31,58,95,.10);
  box-shadow: 0 28px 80px rgba(2,6,23,.10);
}

/* Fondo premium */
.contact-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 16% 22%, rgba(31,58,95,.14), transparent 60%),
    radial-gradient(900px 520px at 90% 18%, rgba(244,241,234,.95), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.76));
  pointer-events:none;
}
.contact-hero > *{ position:relative; z-index:1; }

.contact-hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: stretch;
  padding: 6px;
}

/* Columna izquierda más “editorial” */
.contact-hero__copy{
  padding: 22px 22px 24px 22px;
}
.contact-hero__copy .p{
  max-width: 68ch;
}

/* Quick info */
.contact-quick{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.contact-quick__item{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(31,58,95,.10);
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 50px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.contact-quick__item:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(2,6,23,.10);
}
.contact-quick__item i{
  color: var(--brand);
  margin-top: 3px;
  font-size: 18px;
}

/* Panel derecho (cards) */
.contact-hero__panel{
  padding: 14px 14px 14px 0;
}
.contact-panel{
  border-radius: 24px;
  border: 1px solid rgba(31,58,95,.12);
  background: rgba(255,255,255,.84);
  box-shadow: 0 26px 70px rgba(2,6,23,.10);
  overflow: hidden;
}

/* Header panel */
.contact-panel__head{
  padding: 18px 18px 14px 18px;
  background:
    linear-gradient(135deg, rgba(31,58,95,.14), rgba(244,241,234,.92));
  border-bottom: 1px solid rgba(31,58,95,.10);
}
.contact-panel__title{
  font-weight: 900;
  color: rgba(11,18,32,.90);
  display:flex;
  gap: 10px;
  align-items:center;
}
.contact-panel__sub{
  margin-top: 6px;
  color: rgba(11,18,32,.68);
  font-size: 13.5px;
  line-height: 1.45;
}

.contact-panel__cards{
  padding: 16px;
  display:grid;
  gap: 14px;
}

/* Tarjetas dentro del panel */
.contact-card{
  padding: 16px;
  border-radius: 22px;
  border: 1px solid rgba(31,58,95,.12);
  background: rgba(255,255,255,.92);
  box-shadow: 0 18px 55px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.contact-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 75px rgba(2,6,23,.10);
  border-color: rgba(31,58,95,.18);
}

.contact-card__top{
  display:flex;
  gap: 14px;
  align-items:center;
}

/* Badge general */
.contact-badge{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: rgba(31,58,95,.08);
  border: 1px solid rgba(31,58,95,.12);
  flex: 0 0 auto;
}
.contact-badge i{ color: var(--brand); font-size: 18px; }

/* Badge ONE: más grande para logo 85px */
.contact-badge--one{
  width: 112px;
  height: 112px;
  border-radius: 26px;
  background: rgba(244,241,234,.92);
  border: 1px solid rgba(31,58,95,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}

/* ✅ Logo ONE a 85px */
.one-mini-logo{
  height: 85px;
  width: auto;
  display:block;
}

/* Tipografía interna */
.contact-card__k{
  font-size: 12px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: rgba(31,58,95,.90);
  font-weight: 900;
}
.contact-card__v{
  font-weight: 900;
  color: rgba(11,18,32,.90);
  margin-top: 2px;
  font-size: 16px;
}
.contact-card__s{
  margin-top: 12px;
  color: rgba(11,18,32,.70);
  line-height: 1.55;
  font-size: 14.5px;
}

/* Botones dentro de cards (más “CTA”) */
.contact-card__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.contact-card__actions .btn{
  border-radius: 14px;
}

/* Nota inferior */
.contact-panel__note{
  padding: 12px 16px;
  border-top: 1px solid rgba(31,58,95,.10);
  color: rgba(11,18,32,.68);
  font-size: 13.5px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  background: rgba(255,255,255,.70);
}
.contact-panel__note i{
  color: rgba(31,58,95,.78);
  margin-top: 2px;
}

/* Responsive */
@media (max-width: 980px){
  .contact-hero__grid{
    grid-template-columns: 1fr;
    padding: 0;
  }
  .contact-hero__copy{
    padding: 22px 18px 10px 18px;
  }
  .contact-hero__panel{
    padding: 0 18px 18px 18px;
  }
  .contact-quick{
    grid-template-columns: 1fr;
  }
  .contact-badge--one{
    width: 102px;
    height: 102px;
  }
  .one-mini-logo{
    height: 78px;
  }
}


/* ===========================
   BLOG HERO – H1 arriba + portada abajo (con degradado sutil)
   =========================== */

/* 1) El “card” (H1 + meta + botones) arriba y como bloque normal */
.post-hero .post-hero__content{
  position: static !important;
  inset: auto !important;
  padding: 0 !important;
  display: block !important;
}

.post-hero .post-hero__card{
  position: static !important;
  max-width: 980px !important;
  margin: 0 auto 14px !important;     /* separación hacia la portada */
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 6px !important;
}

/* H1 y espaciados */
.post-hero .post-hero__card .h1{
  margin: 0 !important;
  font-size: clamp(32px, 3.2vw, 56px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em;
}
.post-meta{ margin-top: 10px !important; }
.post-hero .hero-actions{ margin-top: 12px !important; }

/* 2) Portada abajo (más pequeña) */
.post-hero img{
  height: clamp(220px, 24vw, 340px) !important;
  width: 100%;
  object-fit: cover;
  border-radius: 22px !important;
  display: block;
}

/* 3) Degradado sutil encima de la portada */
.post-hero{
  background: transparent !important;
  box-shadow: none !important; /* para que el shadow no afecte el texto */
}

/* OJO: este overlay se aplica SOLO a la imagen/portada */
.post-hero{
  position: relative;
}
.post-hero:after{
  content: "" !important;
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  /* Ajusta este top si tu portada se ve más alta/baja */
  top: calc(100% - clamp(220px, 24vw, 340px)) !important;

  border-radius: 22px !important;
  pointer-events: none;

  /* Degradado sutil (no tapa, solo le da “look”) */
  background:
    radial-gradient(900px 420px at 18% 18%, rgba(255,255,255,.14), transparent 62%),
    linear-gradient(90deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.08) 45%,
      rgba(255,255,255,0)   70%
    ) !important;
}

/* 4) En mobile: más compacto */
@media (max-width: 768px){
  .post-hero .post-hero__card{
    padding: 0 2px !important;
    margin-bottom: 10px !important;
  }
  .post-hero img{
    height: 220px !important;
    border-radius: 18px !important;
  }
  .post-hero:after{
    top: calc(100% - 220px) !important;
    border-radius: 18px !important;
  }
}

/* ===== Ajuste fino: H1 con más presencia + degradado sutil visible ===== */

/* Portada un poco más “pro” (menos alta y con shadow suave) */
.post-hero img{
  height: clamp(210px, 22vw, 320px) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 60px rgba(15,23,42,.10);
}

/* Degradado sutil encima de la portada (más visible pero elegante) */
.post-hero:after{
  top: calc(100% - clamp(210px, 22vw, 320px)) !important;
  background:
    radial-gradient(900px 420px at 18% 20%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(90deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.10) 42%,
      rgba(255,255,255,0)   70%
    ) !important;
}

/* H1: negro real, mejor contraste, menos “gris” */
.post-hero .post-hero__card .h1{
  color: #0b1220 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  text-shadow: none !important;
  opacity: 1 !important;
}

/* Eyebrow “BLOG” un poquito más marcado */
.post-hero .h-eyebrow,
.post-hero .post-eyebrow{
  color: rgba(15,23,42,.70) !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
}

/* Meta (autor/fecha/ubicación) más legible */
.post-meta{
  color: rgba(15,23,42,.60) !important;
}

/* Botones: que se vean alineados y con aire */
.post-hero .hero-actions{
  gap: 10px !important;
  flex-wrap: wrap !important;
}


/* Degradado sutil encima de la portada (sin taparla) */
.post-cover{
  position: relative;
  overflow: hidden;
}

.post-cover::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    /* brillo suave arriba-izquierda */
    radial-gradient(900px 360px at 18% 18%, rgba(255,255,255,.18), transparent 60%),
    /* sombra ligera abajo para dar profundidad */
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.10) 100%),
    /* velo muy sutil izquierda→derecha */
    linear-gradient(90deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 45%, rgba(0,0,0,.08) 100%);
}

/* BLOG – Grid visible sí o sí */
.blog-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin-top: 14px;
}

.blog-card{
  display:block;
  border-radius: 18px;
  overflow:hidden;
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 18px 40px rgba(2,6,23,.08);
  text-decoration:none;
  color: inherit;
}

.blog-card__cover{
  height: 170px;
  position: relative;
  background: #eef2f7;
}

.blog-card__cover img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.blog-card__placeholder{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 26px;
  color: rgba(15,23,42,.45);
}

.blog-card__body{
  padding: 14px 14px 16px;
}

.blog-card__meta{
  display:flex;
  gap: 14px;
  flex-wrap:wrap;
  font-size: 12px;
  color: rgba(15,23,42,.60);
  margin-bottom: 8px;
}

.blog-card__title{
  font-weight: 800;
  font-size: 16px;
  line-height: 1.25;
  margin-bottom: 8px;
}

.blog-card__excerpt{
  font-size: 13px;
  color: rgba(15,23,42,.72);
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 980px){
  .blog-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .blog-grid{ grid-template-columns: 1fr; }
  .blog-card__cover{ height: 160px; }
}