/* =========================================
   BLOGSOLUTIONS — Tipografía (Inter, alojada en el propio servidor)
   Antes se cargaba desde Google Fonts: bloqueaba el pintado ~1,7 s en
   móvil y enviaba la IP del visitante a Google.
   ========================================= */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Arial ajustada a las métricas de Inter: mientras llega la fuente,
   el texto ocupa lo mismo y la página no salta al cambiar. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}

/* =========================================
   BLOGSOLUTIONS — Estilos principales
   Tema: Claro · Acento: Naranja
   ========================================= */

:root {
  --bg:           #ffffff;
  --bg-2:         #f8fafc;
  --bg-3:         #f1f5f9;
  --card:         #ffffff;
  --card-hover:   #fffaf7;
  --accent:       #e8782a;
  --accent-dark:  #c95f14;
  --accent-light: #fff4ed;
  --accent-grad:  linear-gradient(135deg, #e8782a 0%, #f59e0b 100%);
  --accent-glow:  rgba(232, 120, 42, 0.18);
  --text:         #0f172a;
  --text-2:       #1e293b;
  --muted:        #64748b;
  --muted-light:  #94a3b8;
  --border:       rgba(0, 0, 0, 0.08);
  --border-accent: rgba(232, 120, 42, 0.25);
  --shadow-sm:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:    0 4px 16px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg:    0 20px 48px rgba(0,0,0,.10), 0 8px 16px rgba(0,0,0,.06);
  --radius:       14px;
  --radius-lg:    22px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a   { text-decoration: none; color: inherit; }

/* ── Utilidades ── */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

.section     { padding: 96px 0; }
.section-alt { background: var(--bg-2); }

.tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-light);
  border: 1px solid var(--border-accent);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 18px;
}

.section-title {
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 16px;
}

.section-sub {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 560px;
  line-height: 1.7;
}

.gradient-text {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 100px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
  border: none;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
}

.btn-primary {
  background: var(--accent-grad);
  color: #fff;
  box-shadow: 0 4px 20px var(--accent-glow);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(232,120,42,.35);
}

.btn-outline {
  background: transparent;
  color: var(--text-2);
  border: 1.5px solid var(--border);
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

/* ── NAV ── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 16px 0;
  transition: background .3s, box-shadow .3s;
}

.nav.scrolled {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(0,0,0,.05);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-logo img { height: 36px; width: auto; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
  transition: color .2s;
}
.nav-links a:hover { color: var(--text); }

.nav-cta { margin-left: 8px; }

.nav-mobile { display: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all .3s;
}

/* ── HERO ── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 80px;
  background: var(--bg);
}

/* Fondo suave con forma geométrica */
.hero::before {
  content: '';
  position: absolute;
  top: -200px; right: -200px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(232,120,42,.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -150px; left: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(245,158,11,.06) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
  padding: 64px 0;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.hero-eyebrow-dot {
  width: 8px; height: 8px;
  background: var(--accent-grad);
  border-radius: 50%;
  flex-shrink: 0;
  animation: pulse 2.5s infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,120,42,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(232,120,42,0); }
}

.hero-eyebrow-text {
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero-heading {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 24px;
}

.hero-sub {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.75;
  margin-bottom: 40px;
  max-width: 480px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  gap: 32px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.hero-stat-num {
  font-size: 1.8rem;
  font-weight: 900;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.hero-stat-label {
  font-size: .78rem;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 500;
}

/* Hero visual */
.hero-visual { position: relative; }

.hero-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-lg);
}

.hc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.hc-dots { display: flex; gap: 6px; }
.hc-dot  { width: 10px; height: 10px; border-radius: 50%; }
.hc-dot:nth-child(1) { background: #ef4444; }
.hc-dot:nth-child(2) { background: #f59e0b; }
.hc-dot:nth-child(3) { background: #22c55e; }
.hc-title { font-size: .8rem; color: var(--muted); margin-left: auto; }

.hc-lines { display: flex; flex-direction: column; gap: 8px; }
.hc-line {
  height: 10px;
  border-radius: 100px;
  background: var(--bg-3);
}
.hc-line.accent  { background: var(--accent-grad); }
.hc-line.w-full  { width: 100%; }
.hc-line.w-3-4   { width: 75%; }
.hc-line.w-1-2   { width: 50%; }
.hc-line.w-2-3   { width: 66%; }

.hc-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.hc-tag-item {
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 100px;
  background: var(--accent-light);
  border: 1px solid var(--border-accent);
  color: var(--accent);
}

.hero-badge {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-md);
}
.hero-badge-1 { bottom: -20px; left: -30px; }
.hero-badge-2 { top: -20px; right: -20px; }

.hb-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--accent-grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.hb-label { font-size: .68rem; color: var(--muted); font-weight: 500; }
.hb-value { font-size: .88rem; font-weight: 700; color: var(--text); }

/* ── SERVICIOS ── */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.service-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent-grad);
  opacity: 0;
  transition: opacity .25s;
}
.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-accent);
}
.service-card:hover::before { opacity: 1; }

.service-icon {
  width: 52px; height: 52px;
  background: var(--accent-light);
  border: 1px solid var(--border-accent);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
}

.service-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

.service-desc {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.65;
}

/* ── IA ── */
.ia-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.ia-features { display: flex; flex-direction: column; gap: 16px; margin-top: 36px; }

.ia-feature {
  display: flex;
  gap: 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color .2s, background .2s;
}
.ia-feature:hover {
  border-color: var(--border-accent);
  background: var(--accent-light);
}

.ia-feature-icon {
  width: 44px; height: 44px;
  background: var(--accent-grad);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px var(--accent-glow);
}

.ia-feature-name  { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ia-feature-desc  { font-size: .84rem; color: var(--muted); line-height: 1.55; }

/* IA Panel */
.ia-visual { position: relative; }

.ia-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.ia-panel-header {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ia-panel-header span { font-size: .82rem; color: var(--muted); font-weight: 600; }

.ia-chat { padding: 24px; display: flex; flex-direction: column; gap: 14px; }

.ia-msg {
  padding: 12px 16px;
  border-radius: 14px;
  font-size: .84rem;
  line-height: 1.55;
  max-width: 88%;
}
.ia-msg-user {
  background: var(--accent-grad);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.ia-msg-ai {
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.ia-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.ia-chip {
  font-size: .74rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--accent-light);
  border: 1px solid var(--border-accent);
  color: var(--accent);
  cursor: pointer;
}

/* ── PORTFOLIO ── */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.project-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all .25s ease;
  display: flex;
  flex-direction: column;
}
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-accent);
}
.project-card:hover .project-cover { transform: scale(1.04); }

.project-cover-wrap { height: 180px; overflow: hidden; flex-shrink: 0; }

.project-cover {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .4s ease;
}

.cover-blogdeblogs { background: linear-gradient(135deg, #1a2a4a, #0f2642); }
.cover-factureo    { background: linear-gradient(135deg, #1a0a00, #3d1a00); }
.cover-finestex    { background: linear-gradient(135deg, #111, #2a2a2a); }
.cover-christies       { background: linear-gradient(135deg, #2a1a0f, #3d2510); }
.cover-rankingdecoches { background: linear-gradient(135deg, #0a1a0a, #1a3a1a); }
.cover-taskjobs        { background: linear-gradient(135deg, #14142e, #2d2563); }

.project-cover-logo {
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: rgba(255,255,255,.9);
}

.project-body   { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.project-type   { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.project-name   { font-size: 1.15rem; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.project-desc   { font-size: .87rem; color: var(--muted); line-height: 1.6; flex: 1; }
.project-link   {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: .85rem;
  font-weight: 700;
  color: var(--accent);
  transition: gap .2s;
}
.project-link:hover { gap: 10px; }

/* ── POR QUÉ NOSOTROS ── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.why-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: all .25s ease;
}
.why-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-accent);
}

.why-num {
  font-size: 2.4rem;
  font-weight: 900;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  margin-bottom: 8px;
}
.why-label { font-size: .95rem; font-weight: 700; color: var(--text); margin-bottom: 10px; }
.why-desc  { font-size: .84rem; color: var(--muted); line-height: 1.6; }

/* ── CONTACTO ── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}

.contact-info { padding-top: 8px; }

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 28px;
}
.contact-detail + .contact-detail { margin-top: 16px; }

.contact-detail-icon {
  width: 44px; height: 44px;
  background: var(--accent-light);
  border: 1px solid var(--border-accent);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.contact-detail-label { font-size: .78rem; color: var(--muted); font-weight: 500; margin-bottom: 2px; }
.contact-detail-value { font-size: .95rem; font-weight: 700; color: var(--text); }
.contact-detail-value a { color: var(--text); transition: color .2s; }
.contact-detail-value a:hover { color: var(--accent); }

/* Formulario */
.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-md);
}

.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

.form-label { font-size: .82rem; font-weight: 600; color: var(--text-2); }

.form-control {
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: .92rem;
  color: var(--text);
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  transition: border-color .2s, box-shadow .2s, background .2s;
  outline: none;
  width: 100%;
}
.form-control::placeholder { color: var(--muted-light); }
.form-control:focus {
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

textarea.form-control { resize: vertical; min-height: 130px; }

.form-submit {
  width: 100%;
  padding: 15px;
  font-size: 1rem;
  justify-content: center;
  margin-top: 4px;
  border-radius: 12px;
}

.form-notice {
  margin-top: 12px;
  font-size: .76rem;
  color: var(--muted);
  text-align: center;
}

.form-alert {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 500;
  margin-top: 16px;
  display: none;
}
.form-alert.ok  { background: #f0fdf4; border: 1px solid #bbf7d0; color: #16a34a; }
.form-alert.err { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; }
.form-alert.show { display: block; }

/* ── FOOTER ── */
.footer {
  background: var(--text);
  padding: 48px 0 32px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-logo img { height: 28px; width: auto; filter: brightness(0) invert(1); opacity: .8; }

.footer-links {
  display: flex;
  gap: 24px;
  list-style: none;
  flex-wrap: wrap;
}
.footer-links a {
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  transition: color .2s;
}
.footer-links a:hover { color: rgba(255,255,255,.9); }

.footer-copy { font-size: .78rem; color: rgba(255,255,255,.3); }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .hero-grid, .ia-grid, .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { display: none; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .portfolio-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .section { padding: 72px 0; }
  .services-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .hero-stats { gap: 24px; }
  .form-row { grid-template-columns: 1fr; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .footer-inner { flex-direction: column; text-align: center; }

  .nav-mobile {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg);
    z-index: 99;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    transform: translateX(100%);
    transition: transform .3s ease;
  }
  .nav-mobile.open { transform: translateX(0); }
  .nav-mobile a    { font-size: 1.4rem; font-weight: 700; color: var(--text); }
  .nav-mobile .btn { font-size: 1rem; padding: 14px 32px; }
}


/* ══════════════════════════════════════════════════════════════════════
   OFERTA · PACK WEB 199 €
   ══════════════════════════════════════════════════════════════════════ */

.pack-panel {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 44px;
  align-items: start;
  padding: 52px;
  border-radius: 32px;
  /* El degradado de marca. El texto va en oscuro: en blanco no llegaría al
     contraste mínimo sobre naranja. */
  background: var(--accent-grad);
  color: var(--text);
  box-shadow: 0 30px 70px -24px rgba(232, 120, 42, .55);
}

.pack-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--text);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pack-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, .85);
  animation: pack-latido 2.4s ease-out infinite;
}

@keyframes pack-latido {
  70%  { box-shadow: 0 0 0 9px rgba(245, 158, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.pack-title {
  margin-bottom: 14px;
  font-size: clamp(2.2rem, 4.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.pack-title span {
  display: inline-block;
  padding: 0 .16em;
  border-radius: 12px;
  background: var(--text);
  color: #fff;
}

.pack-sub {
  max-width: 34em;
  margin-bottom: 30px;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.6;
  color: #3a2a13;
}

.pack-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 34px;
  list-style: none;
}

.pack-stats li {
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .34);
}

.pack-stats strong {
  display: block;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.pack-stats span {
  display: block;
  margin-top: 4px;
  font-size: .8rem;
  line-height: 1.4;
  color: #3a2a13;
}

.pack-lista-titulo {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #3a2a13;
}

.pack-lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 22px;
  list-style: none;
}

.pack-lista li {
  position: relative;
  padding-left: 27px;
  font-size: .95rem;
  line-height: 1.5;
}

.pack-lista li::before {
  content: "";
  position: absolute;
  top: .34em;
  left: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}

/* --- Tarjeta de precio --- */

.pack-precio {
  position: sticky;
  top: 96px;
  padding: 32px 30px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 44px -14px rgba(15, 23, 42, .3);
}

.pack-precio-eti {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.pack-precio-num {
  margin: 4px 0 2px;
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent-dark);
}

.pack-precio-nota {
  margin-bottom: 22px;
  font-size: .9rem;
  color: var(--muted);
}

.pack-extras {
  margin-bottom: 24px;
  list-style: none;
  border-top: 1px solid var(--border);
}

.pack-extras li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: .92rem;
  color: var(--text-2);
}

.pack-extras span {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--accent-dark);
}

.pack-acciones {
  display: grid;
  gap: 10px;
}

.pack-btn,
.pack-btn-out {
  justify-content: center;
  width: 100%;
  text-align: center;
}

.pack-btn {
  background: var(--text);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(15, 23, 42, .5);
}

.pack-btn:hover {
  background: #1e293b;
  transform: translateY(-2px);
}

.pack-btn-out {
  background: transparent;
  color: var(--text-2);
  border: 1.5px solid var(--border);
}

.pack-btn-out:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.pack-mant {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--muted);
}

.pack-mant strong {
  color: var(--text-2);
}

.pack-legal {
  max-width: 74ch;
  margin: 22px auto 0;
  font-size: .8rem;
  line-height: 1.6;
  /* --muted-light sobre blanco se queda en 2,56:1: no llega al mínimo AA. */
  color: var(--muted);
  text-align: center;
}

/* Enlace de oferta en la navegación. */
.nav-oferta {
  color: var(--accent-dark) !important;
  font-weight: 700;
}


/* ══════════════════════════════════════════════════════════════════════
   AJUSTES DE DISEÑO
   Solo estilo: ni una palabra del contenido cambia. Se anexa al final para
   que sobrescriba lo anterior y se pueda revertir borrando este bloque.
   ══════════════════════════════════════════════════════════════════════ */

/* --- Anclas: la barra superior es fija y tapaba el título de destino. --- */
:where([id]) {
  scroll-margin-top: 96px;
}

html {
  scroll-behavior: smooth;
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* --- Foco visible: antes dependía del contorno por defecto del navegador. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

/* --- Portada -------------------------------------------------------- */

/* La columna de texto medía 524 px y «cualquier proyecto» —que en el marcado
   va en una sola línea— se partía en dos. Se ensancha la columna y se ajusta
   el cuerpo para que el titular entre en las tres líneas previstas. */
.hero-grid {
  grid-template-columns: 1.46fr 1fr;
  gap: 48px;
}

.hero-heading {
  font-size: clamp(2.4rem, 4.15vw, 3.7rem);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.hero-sub {
  max-width: 33em;
  font-size: 1.15rem;
  line-height: 1.72;
  color: #475569;
}

.hero-eyebrow-text {
  letter-spacing: .14em;
}

.hero-stat-num {
  font-size: 2.15rem;
  letter-spacing: -.03em;
}

.hero-stat-label {
  font-size: .82rem;
  line-height: 1.4;
  color: #64748b;
}

/* --- Ritmo de las secciones ---------------------------------------- */

.section {
  padding: 116px 0;
}

.section-title {
  line-height: 1.1;
  letter-spacing: -.03em;
  text-wrap: balance;
}

/* Medía 560 px: el subtítulo se cortaba en dos líneas muy pronto y dejaba
   la mitad derecha vacía. */
.section-sub {
  max-width: 60ch;
  margin-bottom: 52px;
  font-size: 1.075rem;
  line-height: 1.72;
  color: #475569;
}

.tag {
  padding: 7px 16px;
  letter-spacing: .14em;
  border-radius: 100px;
}

/* --- Tarjetas: relieve y respuesta al puntero ----------------------- */

.service-card {
  padding: 34px 32px;
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .10);
}

.service-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-accent);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 24px 48px -20px rgba(232, 120, 42, .40);
}

.service-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 20px;
  border-radius: 17px;
  font-size: 26px;
  background: linear-gradient(140deg, #fff4ed 0%, #ffe6d2 100%);
}

.service-name {
  font-size: 1.1rem;
  letter-spacing: -.015em;
}

.service-desc {
  line-height: 1.68;
  color: #475569;
}

.project-card {
  border-radius: 20px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 28px 56px -22px rgba(15, 23, 42, .30);
}

.project-cover-wrap {
  overflow: hidden;
}

.project-cover {
  transition: transform .5s ease;
}

.project-card:hover .project-cover {
  transform: scale(1.035);
}

.project-desc {
  line-height: 1.65;
  color: #475569;
}

.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -20px rgba(232, 120, 42, .35);
}

/* --- Botones -------------------------------------------------------- */

.btn {
  padding: 15px 30px;
  font-size: 1rem;
  letter-spacing: -.005em;
}

.btn-primary {
  box-shadow: 0 8px 24px -8px rgba(232, 120, 42, .55);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(232, 120, 42, .65);
}

.btn-outline {
  border-width: 1.5px;
  border-color: rgba(15, 23, 42, .14);
}

.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
  background: var(--accent-light);
}

/* --- Formulario ----------------------------------------------------- */

.form-control {
  border-radius: 12px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(232, 120, 42, .14);
  outline: none;
}

/* --- Pie ------------------------------------------------------------ */

.footer {
  padding: 64px 0 40px;
}

/* --- Movimiento ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pack-badge-dot { animation: none; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ═══════════════════════ Tableta y móvil ═══════════════════════ */

@media (max-width: 900px) {
  /* Se conserva el comportamiento original: una sola columna. */
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }

  /* A este ancho la barra fija crece hasta 109 px y tapaba el destino. */
  :where([id]) { scroll-margin-top: 122px; }

  .pack-panel {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 36px 30px;
    border-radius: 26px;
  }

  .pack-precio { position: static; }
}

@media (max-width: 640px) {
  .section { padding: 76px 0; }

  .section-sub { margin-bottom: 40px; }

  .hero-heading { line-height: 1.08; }

  .pack-panel { padding: 28px 22px; border-radius: 22px; }

  .pack-stats { grid-template-columns: 1fr; gap: 10px; }

  .pack-stats li { display: flex; align-items: baseline; gap: 12px; }

  .pack-stats strong { flex: 0 0 auto; font-size: 1.4rem; }

  .pack-stats span { margin-top: 0; }

  .pack-lista { grid-template-columns: 1fr; }

  .pack-precio { padding: 26px 22px; }

  .pack-precio-num { font-size: 3rem; }
}


/* --- Logo del pie ---------------------------------------------------- */
/* logo.jpg trae fondo blanco. La regla anterior aplicaba brightness(0)
   seguido de invert(1), que convertía la imagen entera en un rectángulo
   blanco. Invirtiendo y devolviendo el tono, el fondo pasa a negro; con
   mix-blend-mode: screen ese negro desaparece sobre el pie oscuro. */
.footer-logo img {
  filter: invert(1) hue-rotate(180deg) saturate(1.1);
  mix-blend-mode: screen;
  opacity: .92;
}


/* ══════════════════════════════════════════════════════════════════════
   PROYECTOS
   Antes: seis fondos de colores sin relación entre sí (azul, marrón, negro,
   marrón, verde, morado), en bloques de 180 px con una palabra centrada y,
   debajo, una caja blanca. Dos piezas pegadas y muy altas.
   Ahora: tarjeta blanca, filete fino y una sola regla naranja como acento.
   La jerarquía la lleva la tipografía, no el color de fondo. Tres columnas.
   ══════════════════════════════════════════════════════════════════════ */

.portfolio-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 48px;
}

/* Naranja pastel: diferencia la sección del resto sin romper la claridad de
   la página. Es el acento de marca rebajado, no un color nuevo. */
.project-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #fdf2e8;
  border: 1px solid #f2ddc6;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(124, 45, 18, .05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

.project-card:hover {
  transform: translateY(-4px);
  background: #fdeadb;
  border-color: #e5b98c;
  box-shadow: 0 2px 6px rgba(124, 45, 18, .07), 0 22px 44px -26px rgba(124, 45, 18, .40);
}

/* El fondo de la sección se templa un punto: un pastel cálido sobre el gris
   frío de .section-alt se veía desemparejado. */
#proyectos {
  background: #faf7f3;
}

/* La portada deja de ser una banda de color: solo aloja el rótulo de marca. */
.project-cover-wrap {
  position: static;
  height: auto;
  overflow: visible;
}

.project-cover-wrap::after {
  display: none;
}

.project-cover {
  background: none !important;
  padding: 26px 26px 0;
  justify-content: flex-start;
  transform: none !important;
}

.project-cover-logo {
  /* Dos de los rótulos llevan el color puesto en línea en el HTML. */
  color: #6b635c !important;   /* #a09488 se quedaba en 2,96:1 */
  opacity: 1;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
}

.project-body {
  flex: 0 0 auto;
  padding: 14px 26px 26px;
}

/* Único acento de color de la tarjeta. */
.project-type {
  display: inline-block;
  margin-bottom: 10px;
  padding-top: 14px;
  border-top: 2px solid #e8782a;
  font-size: .68rem;
  letter-spacing: .12em;
  color: #a8490b;   /* #c95f14 se quedaba en 4,09:1 */
}

.project-name {
  margin-bottom: 10px;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: #12161f;
}

.project-desc {
  flex: 0 0 auto;
  font-size: .875rem;
  line-height: 1.65;
  color: #5b6472;
}

.project-link {
  margin-top: 16px;
  font-weight: 700;
  color: #a8490b;
}

.project-card:hover .project-link {
  color: #8f3d08;
}

@media (max-width: 1100px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* Se anula la regla original, que bajaba a una sola columna ya en 900. */
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .project-cover  { padding: 22px 22px 0; }
  .project-body   { padding: 12px 22px 22px; }
}

@media (max-width: 640px) {
  .portfolio-grid { grid-template-columns: 1fr; gap: 14px; }
}


/* ══════════════════════════════════════════════════════════════════════
   ACCESIBILIDAD · contraste mínimo AA en textos pequeños
   El naranja de marca (#e8782a) se mantiene en fondos, degradados y
   botones; solo el texto pequeño pasa al tono oscuro que ya usaba la
   sección de proyectos.
   ══════════════════════════════════════════════════════════════════════ */
.tag, .ia-chip, .hc-tag-item { color: #a8490b; }
.nav-oferta { color: #a8490b !important; }
.pack-extras span, .pack-precio-num { color: #a8490b; }
.footer-copy { color: rgba(255,255,255,.6); }
.form-notice a { color: #a8490b !important; text-decoration: underline; text-underline-offset: 2px; }

/* El menú móvil pasa a ser un <button>: se limpia el aspecto de botón. */
button.nav-toggle { background: none; border: 0; }


/* ══════════════════════════════════════════════════════════════════════
   NAVEGACIÓN EN PÁGINAS INTERIORES
   Fuera de la portada no hay hero bajo la barra: se muestra ya con fondo.
   ══════════════════════════════════════════════════════════════════════ */
.nav.nav-solid {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(0,0,0,.05);
}
.nav-links a[aria-current="page"] { color: var(--text); }


/* ══════════════════════════════════════════════════════════════════════
   CABECERA DE PÁGINA (legales, servicios, blog)
   ══════════════════════════════════════════════════════════════════════ */
.page-hero {
  padding: 140px 0 64px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.page-hero .container { max-width: 820px; }
.page-hero h1 {
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin-bottom: 14px;
}
.page-hero p { color: var(--muted); font-size: 1rem; max-width: 60ch; }
.page-hero-wide .container { max-width: 1160px; }


/* ══════════════════════════════════════════════════════════════════════
   CONTENIDO EDITABLE (entradas y páginas)
   ══════════════════════════════════════════════════════════════════════ */
.page-body { padding: 64px 0 104px; }
.page-body > .container { max-width: 760px; }

.prose { font-size: 1.06rem; line-height: 1.78; color: #334155; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
  margin-top: 2.1em;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--text);
}
.prose h3 { margin-top: 1.8em; font-size: 1.22rem; font-weight: 700; line-height: 1.3; color: var(--text); }
.prose h4 { margin-top: 1.6em; font-size: 1.05rem; font-weight: 700; color: var(--text); }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose a { color: #a8490b; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose a:hover { color: var(--text); }
.prose strong { color: var(--text-2); font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .45em; }
.prose li::marker { color: var(--accent); }
.prose blockquote {
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent);
  font-size: 1.1rem;
  color: var(--text-2);
}
.prose blockquote cite { display: block; margin-top: 8px; font-size: .88rem; font-style: normal; color: var(--muted); }
.prose code {
  padding: .15em .4em;
  border-radius: 6px;
  background: var(--bg-3);
  font-size: .88em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.prose pre {
  overflow-x: auto;
  padding: 20px 22px;
  border-radius: 14px;
  background: #0f172a;
  color: #e2e8f0;
  font-size: .88rem;
  line-height: 1.6;
}
.prose pre code { padding: 0; background: none; color: inherit; }
.prose hr { border: 0; height: 1px; background: var(--border); margin: 2.4em 0; }
.prose img, .prose video { height: auto; border-radius: 14px; }
.prose figure { margin-left: 0; margin-right: 0; }
.prose figcaption { margin-top: 10px; font-size: .85rem; color: var(--muted); text-align: center; }
.prose table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.prose th, .prose td { padding: 10px 14px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.prose th { background: var(--bg-2); color: var(--text); font-weight: 700; }
.prose .wp-block-table { overflow-x: auto; }
.prose .aligncenter { margin-left: auto; margin-right: auto; }
.prose .alignwide { margin-left: -120px; margin-right: -120px; max-width: none; }
.prose iframe { max-width: 100%; }
@media (max-width: 1000px) { .prose .alignwide { margin-left: 0; margin-right: 0; } }

/* Páginas legales: mismo cuerpo de letra que tenían. */
.prose-legal { font-size: .92rem; line-height: 1.75; color: var(--muted); }
.prose-legal h2 { font-size: 1.2rem; font-weight: 700; margin-top: 40px; }
.prose-legal h2 + * { margin-top: 12px; }
.prose-legal a { color: #a8490b; }

.cookie-reopen {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-light);
  border: 1px solid var(--border-accent);
  color: #a8490b;
  font-weight: 600;
  font-size: .88rem;
  padding: 10px 18px;
  border-radius: 100px;
  cursor: pointer;
  font-family: 'Inter', 'Inter Fallback', sans-serif;
  transition: background .2s;
}
.cookie-reopen:hover { background: #fde8d4; }


/* ══════════════════════════════════════════════════════════════════════
   BLOG · listado
   ══════════════════════════════════════════════════════════════════════ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .10);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.post-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-accent);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 24px 48px -20px rgba(232, 120, 42, .40);
}
.post-card-img { aspect-ratio: 16 / 9; background: var(--bg-3); overflow: hidden; }
.post-card-img img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-bottom: 10px;
  font-size: .78rem;
  color: var(--muted);
}
.post-cat {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a8490b;
}
.post-card-title { font-size: 1.18rem; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; color: var(--text); margin-bottom: 10px; }
.post-card-title a::after { content: ''; position: absolute; inset: 0; }
.post-card { position: relative; }
.post-card-excerpt { font-size: .9rem; line-height: 1.65; color: #475569; flex: 1; }
.post-card .project-link { margin-top: 18px; }

.blog-empty {
  max-width: 560px;
  padding: 48px 40px;
  border: 1px dashed var(--border-accent);
  border-radius: 20px;
  background: var(--accent-light);
  color: var(--text-2);
}
.blog-empty p + p { margin-top: 10px; color: var(--muted); }

.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 56px; flex-wrap: wrap; }
.pagination .page-numbers {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-2);
}
.pagination .page-numbers.current { background: var(--text); border-color: var(--text); color: #fff; }
.pagination a.page-numbers:hover { border-color: var(--accent); color: #a8490b; }

@media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .blog-grid { grid-template-columns: 1fr; } }


/* ══════════════════════════════════════════════════════════════════════
   BLOG · artículo
   ══════════════════════════════════════════════════════════════════════ */
.post-hero .post-meta { font-size: .88rem; margin-top: 18px; margin-bottom: 0; }
.post-hero .post-meta a { color: #a8490b; }
.post-featured { margin: -32px auto 0; max-width: 1000px; padding: 0 24px; }
.post-featured img { width: 100%; height: auto; border-radius: 20px; box-shadow: var(--shadow-lg); }

.post-cta {
  margin-top: 64px;
  padding: 36px 34px;
  border-radius: 24px;
  background: var(--accent-grad);
  color: var(--text);
  box-shadow: 0 30px 70px -30px rgba(232, 120, 42, .55);
}
.post-cta h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 10px; }
.post-cta p { color: #3a2a13; margin-bottom: 22px; max-width: 52ch; }
.post-cta .btn { background: var(--text); color: #fff; }
.post-cta .btn:hover { background: #1e293b; transform: translateY(-2px); }

.post-nav { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--border); }
.post-nav h2 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: 24px; }
.post-nav .blog-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .post-nav .blog-grid { grid-template-columns: 1fr; } }

.breadcrumbs { font-size: .8rem; color: var(--muted); margin-bottom: 18px; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: #a8490b; }
.breadcrumbs span[aria-hidden] { margin: 0 6px; }


/* ══════════════════════════════════════════════════════════════════════
   404
   ══════════════════════════════════════════════════════════════════════ */
.error-page { min-height: 70vh; display: flex; align-items: center; padding: 140px 0 96px; }
.error-num {
  font-size: clamp(5rem, 14vw, 9rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.error-page .hero-actions { margin-top: 32px; }

/* Utilidad para lectores de pantalla */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.prose-legal li::marker { color: inherit; }


/* ══════════════════════════════════════════════════════════════════════
   BARRA DE ADMINISTRACIÓN (solo con la sesión iniciada)
   WordPress la fija arriba; la barra de navegación, también fija, se
   coloca justo debajo para que no se tapen.
   ══════════════════════════════════════════════════════════════════════ */
.admin-bar .nav { top: 32px; }
.admin-bar :where([id]) { scroll-margin-top: 128px; }
@media screen and (max-width: 782px) {
  .admin-bar .nav { top: 46px; }
}
@media screen and (max-width: 600px) {
  /* En móvil WordPress deja de fijarla; se fija para que no se descuadre. */
  #wpadminbar { position: fixed; }
}
@media (max-width: 640px) {
  .admin-bar .nav-mobile { top: 46px; }
}


/* ══════════════════════════════════════════════════════════════════════
   BLOG · categorías
   ══════════════════════════════════════════════════════════════════════ */
.cat-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.cat-pills a {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: #fff;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-2);
  transition: border-color .2s, color .2s, background .2s;
}
.cat-pills a:hover { border-color: var(--accent); color: #a8490b; }
.cat-pills a[aria-current="page"] { background: var(--text); border-color: var(--text); color: #fff; }


/* ══════════════════════════════════════════════════════════════════════
   PORTADA · últimos artículos
   ══════════════════════════════════════════════════════════════════════ */
.home-blog { border-top: 1px solid var(--border); }
.home-blog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.home-blog-head .section-sub { margin-bottom: 0; }