/* ============================================================
   KREAMOS — Website UI Kit styles
   Built on ../../colors_and_type.css tokens
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; }
::selection { background: var(--brand); color: #fff; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; }
.section { padding: var(--space-10) 0; }
@media (max-width: 720px){ .wrap{ padding: 0 22px; } .section{ padding: var(--space-9) 0; } }

/* eyebrow */
.eyebrow { font: var(--text-eyebrow); letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--fg-brand); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow--muted { color: var(--fg-subtle); }
.eyebrow--inverse { color: var(--blue-300); }

/* ---------------- NAV ---------------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; transition: all var(--dur-base) var(--ease-out); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.nav.scrolled { background: rgba(255,255,255,0.82); backdrop-filter: blur(14px); border-bottom: var(--hairline); }
.nav.scrolled .nav__inner { height: 64px; }
.wordmark { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.045em; font-size: 26px; line-height: 1; text-transform: lowercase; color: var(--ink); display: inline-flex; align-items: baseline; }
.wordmark .dot { color: var(--brand); }
.wordmark--inverse { color: #fff; }
.nav__links { display: flex; align-items: center; gap: 36px; }
.nav__link { font-weight: 500; font-size: 15px; color: var(--ink); position: relative; padding: 4px 0; }
.nav__link::after { content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px; background:var(--brand); transition: right var(--dur-base) var(--ease-out); }
.nav__link:hover::after { right: 0; }
.nav .nav__burger { display: none; background: none; border: none; cursor: pointer; }

/* button system */
.btn { font-family: var(--font-body); font-weight: 600; font-size: 15px; cursor: pointer; border: none; padding: 14px 24px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 9px; transition: all var(--dur-base) var(--ease-out); letter-spacing: -0.01em; white-space: nowrap; }
.btn .arr { transition: transform var(--dur-base) var(--ease-out); display: inline-flex; }
.btn:hover .arr { transform: translate(3px,-3px); }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); }
.btn--primary:active { background: var(--brand-active); transform: scale(0.98); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--blue-900); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.btn--ghost-inverse { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.4); }
.btn--ghost-inverse:hover { background: #fff; color: var(--ink); border-color:#fff; }
.btn--lg { padding: 17px 30px; font-size: 16px; }

/* ---------------- HERO ---------------- */
.hero { padding-top: 150px; padding-bottom: var(--space-9); }
.hero__eyebrow { margin-bottom: 30px; }
.hero__title { font: var(--text-display-1); letter-spacing: var(--track-display); text-wrap: balance; margin-bottom: 30px; }
.hero__title em { font-style: normal; color: var(--brand); }
.hero__lead { font: var(--text-body-lg); color: var(--fg-muted); max-width: 56ch; margin-bottom: 38px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.reveal { opacity: 0; transform: translateY(22px); animation: reveal var(--dur-slow) var(--ease-out) forwards; }
.reveal.d1{animation-delay:.05s} .reveal.d2{animation-delay:.15s} .reveal.d3{animation-delay:.25s} .reveal.d4{animation-delay:.35s}
@keyframes reveal { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .reveal{ animation: none; opacity: 1; transform: none; } }

/* client marquee */
.marquee { border-top: var(--hairline); border-bottom: var(--hairline); overflow: hidden; padding: 26px 0; }
.marquee__row { display: flex; gap: 64px; width: max-content; animation: scroll-x 32s linear infinite; align-items: center; }
.marquee__item { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; color: var(--grey-400); white-space: nowrap; }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* ---------------- STATS ---------------- */
.stats { display: grid; grid-template-columns: repeat(3,1fr); background: var(--bg-inverse); }
.stat { padding: 64px 44px; border-left: 1px solid var(--border-inverse); }
.stat:first-child { border-left: 0; }
.stat__n { font-family: var(--font-display); font-weight: 900; font-size: clamp(48px, 6vw, 88px); letter-spacing: -0.04em; line-height: .88; color: #fff; }
.stat__n em { color: var(--blue-400); font-style: normal; }
.stat__l { font: var(--text-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-inverse-muted); margin-top: 16px; }
@media (max-width: 720px){ .stats{ grid-template-columns:1fr; } .stat{ border-left:0; border-top:1px solid var(--border-inverse); } .stat:first-child{border-top:0;} }

/* ---------------- SERVICES ---------------- */
.svc-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 50px; flex-wrap: wrap; }
.svc-head h2 { font: var(--text-h1); letter-spacing: var(--track-display); max-width: 16ch; }
.svc { border-top: var(--rule); cursor: pointer; }
.svc__row { display: flex; gap: 28px; align-items: center; padding: 30px 0; transition: padding var(--dur-base) var(--ease-out); }
.svc__num { font-family: var(--font-mono); font-weight: 600; font-size: 15px; color: var(--brand); width: 38px; flex: none; }
.svc__name { font: var(--text-h2); letter-spacing: var(--track-tight); flex: 1; transition: color var(--dur-base) var(--ease-out); }
.svc:hover .svc__name { color: var(--brand); }
.svc__toggle { width: 40px; height: 40px; border: 1.5px solid var(--ink); border-radius: var(--radius-pill); display: grid; place-items: center; flex: none; transition: all var(--dur-base) var(--ease-out); }
.svc.open .svc__toggle { background: var(--brand); border-color: var(--brand); color: #fff; transform: rotate(45deg); }
.svc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.svc.open .svc__panel { grid-template-rows: 1fr; }
.svc__panel-inner { overflow: hidden; }
.svc__body { padding: 0 0 34px 66px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; }
.svc__body p { font: var(--text-body-lg); color: var(--fg-muted); max-width: 50ch; }
.svc__tags { display: flex; flex-direction: column; gap: 10px; }
.svc__tag { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--ink); padding: 7px 0; border-bottom: var(--hairline); display: flex; align-items: center; gap: 10px; }
.svc__tag .dotmk { width: 6px; height: 6px; background: var(--brand); border-radius: 50%; }
@media (max-width: 720px){ .svc__body{ grid-template-columns:1fr; padding-left:0; } .svc__name{ font-size:28px; } }

/* ---------------- WORK ---------------- */
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.case { background: var(--bg-canvas); border: var(--hairline); border-radius: var(--radius-md); overflow: hidden; transition: all var(--dur-base) var(--ease-out); cursor: pointer; }
.case:hover { transform: translateY(-4px); border-color: var(--ink); box-shadow: var(--shadow-md); }
.case__img { aspect-ratio: 16/10; background: var(--blue-900); position: relative; overflow: hidden; display:grid; place-items:center; }
.case__img .mark { font-family: var(--font-display); font-weight: 900; font-size: 64px; color: rgba(255,255,255,0.14); letter-spacing: -0.04em; }
.case__img.alt { background: var(--brand); }
.case__img.alt2 { background: var(--ink); }
.case__img.alt3 { background: var(--blue-600); }
.case__meta { padding: 24px; }
.case__tags { font: var(--text-eyebrow); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 12px; }
.case__title { font: var(--text-h3); letter-spacing: var(--track-tight); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.case__title .arr { color: var(--brand); transition: transform var(--dur-base) var(--ease-out); }
.case:hover .arr { transform: translate(4px,-4px); }
@media (max-width: 720px){ .work-grid{ grid-template-columns:1fr; } }

/* ---------------- MANIFESTO ---------------- */
.manifesto { background: var(--bg-inverse); color: #fff; text-align: center; }
.manifesto__words { font-family: var(--font-display); font-weight: 900; letter-spacing: var(--track-display); line-height: .98; font-size: clamp(44px, 9vw, 132px); text-transform: lowercase; }
.manifesto__words span { display: inline-block; transition: color var(--dur-base) var(--ease-out); }
.manifesto__words .w1 { color: rgba(255,255,255,0.35); }
.manifesto__words .w2 { color: rgba(255,255,255,0.65); }
.manifesto__words .w3 { color: #fff; }
.manifesto__words .w3 em { color: var(--blue-400); font-style: normal; }
.manifesto__sub { font: var(--text-body-lg); color: var(--fg-inverse-muted); max-width: 52ch; margin: 36px auto 0; }

/* ---------------- TESTIMONIAL ---------------- */
.quote { display: grid; grid-template-columns: 0.4fr 1fr; gap: 40px; align-items: center; }
.quote__mark { font-family: var(--font-display); font-weight: 900; font-size: 160px; line-height: .7; color: var(--blue-100); }
.quote__text { font: var(--text-h2); font-weight: 700; letter-spacing: var(--track-tight); text-wrap: balance; }
.quote__by { font: var(--text-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-subtle); margin-top: 26px; }
@media (max-width: 720px){ .quote{ grid-template-columns:1fr; gap:10px; } .quote__mark{ font-size:90px; } }

/* ---------------- CTA / CONTACT ---------------- */
.cta { background: var(--brand); color: #fff; border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 80px); display: grid; grid-template-columns: 1fr 0.9fr; gap: 56px; align-items: center; }
.cta h2 { font: var(--text-display-2); letter-spacing: var(--track-display); text-wrap: balance; }
.cta p { font: var(--text-body-lg); color: rgba(255,255,255,0.85); margin-top: 22px; max-width: 40ch; }
.form { display: flex; flex-direction: column; gap: 16px; }
.form label { font: var(--text-eyebrow); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.8); display: block; margin-bottom: 7px; }
.form input, .form textarea { width: 100%; font-family: var(--font-body); font-size: 16px; color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.28); border-radius: var(--radius-sm); padding: 14px 15px; transition: all var(--dur-base) var(--ease-out); }
.form input::placeholder, .form textarea::placeholder { color: rgba(255,255,255,0.5); }
.form input:focus, .form textarea:focus { outline: none; border-color: #fff; background: rgba(255,255,255,0.14); }
.form .btn--light { background: #fff; color: var(--brand); }
.form .btn--light:hover { background: var(--blue-900); color:#fff; }
.form__success { text-align: center; padding: 30px 0; }
.form__success .ic { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.16); display: grid; place-items: center; margin: 0 auto 18px; }
.form__success h3 { font: var(--text-h2); margin-bottom: 8px; }
.form__success p { margin: 0 auto; }
@media (max-width: 820px){ .cta{ grid-template-columns:1fr; gap:34px; } }

/* ---------------- FOOTER ---------------- */
.footer { background: var(--bg-inverse); color: #fff; padding: 70px 0 36px; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid var(--border-inverse); }
.footer__wm { margin-bottom: 18px; }
.footer__tag { font: var(--text-eyebrow); letter-spacing: .2em; text-transform: uppercase; color: var(--blue-300); }
.footer h4 { font: var(--text-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-inverse-muted); margin-bottom: 18px; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer li a { font-size: 15px; color: rgba(255,255,255,0.78); transition: color var(--dur-fast) var(--ease-out); }
.footer li a:hover { color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; font-size: 13px; color: var(--fg-inverse-muted); flex-wrap: wrap; gap: 12px; }
@media (max-width: 820px){ .footer__top{ grid-template-columns:1fr 1fr; } }

/* ---------------- MOBILE MENU ---------------- */
.mobile-menu { position: fixed; inset: 0; background: var(--bg-inverse); z-index: 200; display: flex; flex-direction: column; padding: 28px 22px; transform: translateY(-100%); transition: transform var(--dur-slow) var(--ease-out); }
.mobile-menu.open { transform: none; }
.mobile-menu__head { display: flex; justify-content: space-between; align-items: center; }
.mobile-menu__links { display: flex; flex-direction: column; gap: 4px; margin-top: 60px; }
.mobile-menu__links a { font: var(--text-h2); color: #fff; text-transform: lowercase; padding: 10px 0; border-bottom: 1px solid var(--border-inverse); }
.icon-btn { background: none; border: none; color: inherit; cursor: pointer; display: grid; place-items: center; }

@media (max-width: 860px){
  .nav__links { display: none; }
  .nav .nav__burger { display: grid; place-items: center; }
  .nav__cta-desktop { display: none; }
  .hero { padding-top: 120px; }
  .svc-head h2 { font-size: 40px; }
}
@media (min-width: 861px){ .mobile-menu { display: none; } }

/* ============================================================
   KREAMOS GROUP — sitio real · secciones extra
   ============================================================ */

/* section intro */
.intro { max-width: 60ch; margin-bottom: 56px; }
.intro h2 { font: var(--text-h1); letter-spacing: var(--track-display); text-wrap: balance; margin-bottom: 22px; }
.intro p { font: var(--text-body-lg); color: var(--fg-muted); }

/* ---- SERVICE CARDS (6) ---- */
.svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: var(--rule); border-left: var(--hairline); }
.svc-card { padding: 40px 34px 44px; border-right: var(--hairline); border-bottom: var(--hairline); background: var(--bg); transition: background var(--dur-base) var(--ease-out); position: relative; }
.svc-card:hover { background: var(--bg-canvas); }
.svc-card__num { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--brand); margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; }
.svc-card__ic { color: var(--ink); }
.svc-card:hover .svc-card__ic { color: var(--brand); }
.svc-card__name { font: var(--text-h3); letter-spacing: var(--track-tight); margin-bottom: 14px; }
.svc-card__lead { font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 8px; }
.svc-card__desc { font: var(--text-body-sm); color: var(--fg-muted); }
@media (max-width: 920px){ .svc-cards{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .svc-cards{ grid-template-columns: 1fr; } }

/* ---- PROCESS ---- */
.process { background: var(--bg-inverse); color: #fff; }
.process .intro h2 { color: #fff; }
.process .intro p { color: var(--fg-inverse-muted); }
.psteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.pstep { padding: 36px 28px 40px 0; border-top: 2px solid rgba(255,255,255,0.25); margin-right: 28px; }
.pstep:last-child { margin-right: 0; }
.pstep__n { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--blue-400); margin-bottom: 20px; }
.pstep__t { font: var(--text-h3); letter-spacing: var(--track-tight); color: #fff; margin-bottom: 10px; }
.pstep__d { font: var(--text-body-sm); color: var(--fg-inverse-muted); }
@media (max-width: 820px){ .psteps{ grid-template-columns: 1fr 1fr; } .pstep{ margin-right: 0; padding-right: 20px; } }
@media (max-width: 480px){ .psteps{ grid-template-columns: 1fr; } }

/* ---- TECH BAND (próximamente / herramientas) ---- */
.tech { border-top: var(--hairline); border-bottom: var(--hairline); }
.tech__inner { display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: center; padding: 56px 0; }
.tech__copy .eyebrow { margin-bottom: 14px; }
.tech__copy h3 { font: var(--text-h3); letter-spacing: var(--track-tight); max-width: 22ch; }
.tech__logos { display: flex; gap: 44px; align-items: center; flex-wrap: wrap; }
.tech__logo { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--grey-400); transition: color var(--dur-base) var(--ease-out); }
.tech__logo:hover { color: var(--ink); }
@media (max-width: 760px){ .tech__inner{ grid-template-columns: 1fr; gap: 32px; } }

/* ---- TEAM / próximamente tú aquí ---- */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.team__copy h2 { font: var(--text-h1); letter-spacing: var(--track-display); text-wrap: balance; margin-bottom: 22px; }
.team__copy p { font: var(--text-body-lg); color: var(--fg-muted); }
.team__slot { aspect-ratio: 4/3; background: var(--bg-canvas); border: 1.5px dashed var(--grey-300); border-radius: var(--radius-md); display: grid; place-items: center; text-align: center; padding: 30px; }
.team__slot .eyebrow { margin-bottom: 12px; }
.team__slot h4 { font: var(--text-h4); color: var(--fg-muted); max-width: 22ch; }
@media (max-width: 820px){ .team{ grid-template-columns: 1fr; gap: 32px; } }

/* ---- WHATSAPP FLOAT ---- */
.wa { position: fixed; right: 22px; bottom: 22px; z-index: 150; display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; padding: 13px 18px 13px 14px; border-radius: var(--radius-pill); font-weight: 600; font-size: 15px; box-shadow: var(--shadow-md); transition: all var(--dur-base) var(--ease-out); }
.wa:hover { background: var(--brand); transform: translateY(-2px); }
.wa__ic { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.16); display: grid; place-items: center; flex: none; }

/* footer extra contact */
.footer__contact { font-size: 15px; color: rgba(255,255,255,0.78); line-height: 1.9; }
.footer__contact a:hover { color: #fff; }

/* active nav link */
.nav__link.is-active { color: var(--brand); }
.nav__link.is-active::after { right: 0; }

/* ============================================================
   PÁGINAS INTERNAS
   ============================================================ */

/* ---- SUBHERO (cabecera de página interna) ---- */
.subhero { padding-top: 150px; padding-bottom: var(--space-8); border-bottom: var(--hairline); }
.subhero__eyebrow { margin-bottom: 26px; }
.subhero h1 { font: var(--text-display-2); letter-spacing: var(--track-display); text-wrap: balance; margin-bottom: 24px; }
.subhero h1 em { font-style: normal; color: var(--brand); }
.subhero__lead { font: var(--text-body-lg); color: var(--fg-muted); max-width: 60ch; }
@media (max-width: 860px){ .subhero{ padding-top: 120px; } }

/* ---- ABOUT BLOCKS (quiénes / misión) ---- */
.about { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 30px 64px; align-items: start; }
.about + .about { border-top: var(--hairline); margin-top: 0; padding-top: 56px; }
.about__h { font: var(--text-h2); letter-spacing: var(--track-tight); }
.about__b { font: var(--text-body-lg); color: var(--fg-muted); }
.about__b strong { color: var(--ink); font-weight: 600; }
@media (max-width: 760px){ .about{ grid-template-columns: 1fr; gap: 16px; } }

/* ---- "Lo que hacemos" list ---- */
.dolist { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: var(--rule); }
.doitem { display: flex; align-items: center; gap: 16px; padding: 22px 8px; border-bottom: var(--hairline); }
.doitem .ic { width: 42px; height: 42px; flex: none; border-radius: var(--radius-sm); background: var(--blue-50); color: var(--brand); display: grid; place-items: center; }
.doitem span { font: var(--text-h4); letter-spacing: var(--track-tight); }
@media (max-width: 620px){ .dolist{ grid-template-columns: 1fr; } }

/* ---- PROCESO 6D ---- */
.d6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: var(--hairline); border-left: var(--hairline); }
.d6card { padding: 36px 30px 40px; border-right: var(--hairline); border-bottom: var(--hairline); transition: background var(--dur-base) var(--ease-out); }
.d6card:hover { background: var(--bg); }
.d6card__n { font-family: var(--font-mono); font-weight: 600; font-size: 13px; color: var(--brand); margin-bottom: 18px; }
.d6card__t { font: var(--text-h3); letter-spacing: var(--track-tight); margin-bottom: 12px; }
.d6card__lead { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 7px; }
.d6card__d { font: var(--text-body-sm); color: var(--fg-muted); }
@media (max-width: 900px){ .d6{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px){ .d6{ grid-template-columns: 1fr; } }

/* ---- RAZONES (¿por qué elegirnos?) ---- */
.reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 40px; }
.reason__mk { width: 16px; height: 16px; background: var(--brand); transform: rotate(45deg); margin-bottom: 20px; }
.reason__t { font: var(--text-h4); letter-spacing: var(--track-tight); margin-bottom: 10px; }
.reason__d { font: var(--text-body-sm); color: var(--fg-muted); line-height: 1.6; }
@media (max-width: 860px){ .reasons{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .reasons{ grid-template-columns: 1fr; } }

/* ---- BLOG ---- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.post { border: var(--hairline); border-radius: var(--radius-md); overflow: hidden; background: var(--bg); transition: all var(--dur-base) var(--ease-out); cursor: pointer; display: flex; flex-direction: column; }
.post:hover { transform: translateY(-4px); border-color: var(--ink); box-shadow: var(--shadow-md); }
.post__img { aspect-ratio: 16/10; display: grid; place-items: center; }
.post__img .mark { font-family: var(--font-display); font-weight: 900; font-size: 52px; color: rgba(255,255,255,0.16); letter-spacing: -0.04em; }
.post__b { padding: 22px 22px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post__cat { font: var(--text-eyebrow); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); }
.post__t { font: var(--text-h4); letter-spacing: var(--track-tight); line-height: 1.18; }
.post__x { font: var(--text-body-sm); color: var(--fg-muted); flex: 1; }
.post__meta { font: var(--text-caption); color: var(--fg-subtle); display: flex; gap: 10px; align-items: center; padding-top: 4px; }
.blog-empty { border: 1.5px dashed var(--grey-300); border-radius: var(--radius-md); padding: 48px; text-align: center; background: var(--bg-canvas); }
.blog-empty h3 { font: var(--text-h3); margin-bottom: 10px; }
.blog-empty p { font: var(--text-body); color: var(--fg-muted); max-width: 46ch; margin: 0 auto; }
@media (max-width: 900px){ .blog-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .blog-grid{ grid-template-columns: 1fr; } }

/* ---- CONTACTO ---- */
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.contact__aside h2 { font: var(--text-h1); letter-spacing: var(--track-display); text-wrap: balance; margin-bottom: 22px; }
.contact__aside p { font: var(--text-body-lg); color: var(--fg-muted); margin-bottom: 36px; }
.contact__list { display: flex; flex-direction: column; gap: 4px; }
.contact__item { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: var(--hairline); }
.contact__item .ic { width: 44px; height: 44px; flex: none; border-radius: var(--radius-sm); background: var(--ink); color: #fff; display: grid; place-items: center; }
.contact__item .lbl { font: var(--text-eyebrow); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 3px; }
.contact__item .val { font: var(--text-h4); letter-spacing: var(--track-tight); }
.contact__item a.val:hover { color: var(--brand); }
.contact__card { background: var(--bg-inverse); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px); }
.contact__card h3 { font: var(--text-h3); color: #fff; margin-bottom: 6px; }
.contact__card > p { font: var(--text-body); color: var(--fg-inverse-muted); margin-bottom: 26px; }
@media (max-width: 860px){ .contact{ grid-template-columns: 1fr; gap: 36px; } }