/* ==========================================================================
   WebHeroe — site CSS
   Palette + typography extracted from the live webheroe.com build.
   ========================================================================== */

/* -- Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: "Roboto";
  src: url("/assets/fonts/Roboto-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kurdis";
  src: url("/assets/fonts/Kurdis-CondensedExtraBold.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Kurdis-extra";
  src: url("/assets/fonts/Kurdis-ExtraCondensedBold.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* -- Design tokens -------------------------------------------------------- */
:root {
  /* Official WebHeroe brand palette */
  --c-white:      #f0f7f7;           /* soft white */
  --c-black:      #333333;           /* body black */
  --c-brand:      #FF8300;           /* orange — primary */
  --c-brand-ink:  #cc6900;           /* orange darkened, for hover/text */
  --c-brand-soft: #fff3e4;           /* very light orange tint */
  --c-accent:     #37254E;           /* deep purple — secondary */
  --c-accent-ink: #241735;
  --c-accent-soft:#ece6f4;

  /* Derived neutrals */
  --c-bg:         var(--c-white);
  --c-ink:        #1a1a1a;
  --c-ink-soft:   var(--c-black);
  --c-body:       #4a4a4a;
  --c-muted:      #8a8a8a;
  --c-surface:    #e7eeee;
  --c-border:     #d5dedf;
  --c-hairline:   #dfe6e6;

  --c-success:    #18a957;
  --c-warning:    #FF8300;
  --c-danger:     #e5484d;

  --grad-hero: linear-gradient(135deg, #FF8300 0%, #ff5a1f 45%, #37254E 100%);
  --grad-soft: linear-gradient(135deg, #fff3e4 0%, #ece6f4 100%);

  /* Typography */
  --f-display: "Kurdis", "Kurdis-extra", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-body:    "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --fz-xs: .8125rem;
  --fz-sm: .9375rem;
  --fz-md: 1rem;
  --fz-lg: 1.125rem;
  --fz-xl: 1.375rem;
  --fz-2xl: 1.75rem;
  --fz-3xl: 2.25rem;
  --fz-4xl: 3rem;
  --fz-5xl: clamp(2.5rem, 5vw, 4rem);
  --fz-display: clamp(3rem, 6.5vw, 5.5rem);

  /* Spacing / radius */
  --s-1:.25rem;  --s-2:.5rem;  --s-3:.75rem;  --s-4:1rem;
  --s-5:1.5rem;  --s-6:2rem;  --s-7:3rem;    --s-8:4rem;  --s-9:6rem; --s-10:8rem;

  --r-xs:.25rem; --r-sm:.5rem; --r-md:.75rem; --r-lg:1rem; --r-xl:1.5rem; --r-2xl:2rem;

  --shadow-sm: 0 1px 2px rgb(9 18 40 / .06), 0 1px 1px rgb(9 18 40 / .04);
  --shadow-md: 0 4px 12px rgb(9 18 40 / .08), 0 2px 4px rgb(9 18 40 / .04);
  --shadow-lg: 0 18px 40px -12px rgb(9 18 40 / .25), 0 6px 16px rgb(9 18 40 / .08);

  --container: min(1180px, 92vw);
}

/* -- Reset-ish ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 var(--fz-md)/1.55 var(--f-body);
  color: var(--c-body);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--c-brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  color: var(--c-ink);
  line-height: 1.1;
  margin: 0 0 var(--s-4);
  letter-spacing: -.015em;
  font-weight: 800;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.025em; line-height: 1.15; }
h2 { font-size: var(--fz-3xl); }
h3 { font-size: var(--fz-xl); }
p  { margin: 0 0 var(--s-4); }
.muted { color: var(--c-muted); }
.hide  { display: none !important; }
.container { width: var(--container); margin-inline: auto; }
.skiplink {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-ink); color: #fff; padding: .5rem 1rem; z-index: 1000;
}
.skiplink:focus { left: .5rem; top: .5rem; }

/* -- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.25rem; border: 1px solid transparent;
  border-radius: 999px; font-weight: 600; font-size: var(--fz-sm);
  line-height: 1; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn--sm { padding: .55rem .9rem; font-size: var(--fz-xs); }
.btn--lg { padding: 1rem 1.6rem; font-size: var(--fz-md); }
.btn--primary { background: var(--c-brand); color: #fff; }
.btn--primary:hover { background: var(--c-brand-ink); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; }
.btn--brand   { background: var(--c-brand); color: #fff; }
.btn--brand:hover { background: var(--c-brand-ink); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; }
.btn--accent  { background: var(--c-accent); color: #fff; }
.btn--accent:hover { background: var(--c-accent-ink); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; }
.btn--ghost   { background: transparent; color: var(--c-ink); border-color: var(--c-border); }
.btn--ghost:hover { background: var(--c-surface); text-decoration: none; }
.btn--link    { background: transparent; padding: .25rem 0; border-radius: 0; color: var(--c-brand-ink); }
.btn--link:hover { text-decoration: underline; }

/* -- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in oklab, var(--c-bg) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-hairline);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); padding: 10px 0;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--c-ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__mark { border-radius: 8px; }
.brand__name { font-family: var(--f-display); font-weight: 900; letter-spacing: -.02em; font-size: 1.15rem; }
.primary-nav ul { display: flex; align-items: center; list-style: none; gap: var(--s-5); padding: 0; margin: 0; }
.primary-nav a { color: var(--c-ink-soft); font-weight: 500; font-size: var(--fz-sm); padding: .25rem 0; }
.primary-nav a:hover { color: var(--c-brand-ink); text-decoration: none; }
/* Buttons inside the nav (e.g. the "Reservar reunión" CTA) keep .btn padding + white-on-orange */
.primary-nav .btn { padding: .55rem .9rem; color: #fff; }
.primary-nav .btn:hover { color: #fff; }
.primary-nav .has-children { position: relative; }
.primary-nav .has-children > a::after { content: '›'; margin-left: .35rem; transform: rotate(90deg); display: inline-block; opacity: .55; }
.primary-nav .submenu {
  position: absolute; top: 100%; left: -.75rem;
  display: none; flex-direction: column; align-items: stretch; gap: .25rem;
  padding: .75rem; min-width: 240px;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  text-align: left;
}
.primary-nav .has-children:hover .submenu,
.primary-nav .has-children:focus-within .submenu { display: flex; }
.primary-nav .submenu li { padding: 0; }
.primary-nav .submenu a { padding: .45rem .5rem; border-radius: var(--r-sm); display: block; text-transform: capitalize; }
.primary-nav .submenu a:hover { background: var(--c-surface); }
.primary-nav .is-active > a { color: var(--c-brand-ink); }
.primary-nav .lang-switch a { font-weight: 700; border: 1px solid var(--c-border); padding: .25rem .55rem; border-radius: 999px; font-size: var(--fz-xs); }
.menu-toggle { display: none; background: transparent; border: 0; padding: .5rem; }
.menu-toggle span { display: block; width: 22px; height: 2px; background: var(--c-ink); margin: 4px 0; border-radius: 2px; transition: transform .2s; }

@media (max-width: 960px) {
  .menu-toggle { display: block; }
  .primary-nav { position: fixed; inset: 64px 0 auto 0; background: #fff; border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow-md); padding: var(--s-5) var(--s-5) var(--s-6); max-height: 0; overflow: hidden; transition: max-height .25s ease; }
  .primary-nav[aria-expanded="true"] { max-height: 80vh; }
  .primary-nav ul { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .primary-nav .submenu { position: static; display: flex; box-shadow: none; border: none; padding-left: var(--s-4); }
}

/* -- Sections / blocks ---------------------------------------------------- */
.section { padding: var(--s-9) 0; }
.section--tight { padding: var(--s-7) 0; }
.section--hero  { padding: var(--s-10) 0 var(--s-9); position: relative; }
.section--dark  { background: var(--c-accent); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--soft  { background: var(--c-surface); }
.section__eyebrow { color: var(--c-brand-ink); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: var(--fz-xs); margin-bottom: .75rem; }
.section__headline { max-width: 34ch; }
.section__sub      { max-width: 60ch; color: var(--c-body); font-size: var(--fz-lg); }

/* -- Grid helpers --------------------------------------------------------- */
.grid { display: grid; gap: var(--s-5); }
.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)); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* -- Cards ---------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: var(--s-6); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: transparent; }
.card h3 { margin-top: 0; }
.card__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--grad-soft); display: grid; place-items: center; margin-bottom: var(--s-4); color: var(--c-brand-ink); }
.card--dark { background: color-mix(in oklab, var(--c-ink) 92%, #fff); color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.08); }
.card--dark h3 { color: #fff; }

/* -- Hero ----------------------------------------------------------------- */
.hero {
  position: relative;
  padding: var(--s-10) 0;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: -40% -10% auto auto;
  width: 60vw; height: 60vw; min-width: 500px; min-height: 500px;
  background: var(--grad-hero); filter: blur(100px); opacity: .32; z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: var(--s-8); align-items: center;
}
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .75rem; background: var(--c-brand-soft); color: var(--c-brand-ink);
  border-radius: 999px;
  /* Override h1 defaults so the visual stays identical when promoted to h1 */
  font-family: inherit; font-weight: 700; font-size: var(--fz-xs); letter-spacing: .08em;
  line-height: 1.2; margin: 0;
}
.hero__eyebrow::before { content: "●"; color: var(--c-brand); font-size: .65rem; }
.hero__title {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  line-height: 1.1;
  letter-spacing: -.025em;
  margin: var(--s-4) 0 var(--s-5);
  color: var(--c-ink);
}
.hero__highlight { background: var(--grad-hero); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { font-size: var(--fz-lg); color: var(--c-body); max-width: 52ch; margin: 0 0 var(--s-6); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__proof { margin-top: var(--s-7); display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; color: var(--c-muted); font-size: var(--fz-sm); }
.hero__proof strong { color: var(--c-ink); }

/* Hero right-side stacked cards (MAPA phases preview) */
.mapa-stack { display: grid; gap: var(--s-3); }
.mapa-chip {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: var(--s-5); display: grid; grid-template-columns: auto 1fr; gap: var(--s-4);
  align-items: center; box-shadow: var(--shadow-sm);
}
.mapa-chip__badge {
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center; color: #fff; font-family: var(--f-display); font-weight: 900; font-size: 1.25rem;
  background: var(--c-brand);
}
.mapa-chip__title { font-family: var(--f-display); font-weight: 800; color: var(--c-ink); font-size: 1.05rem; }
.mapa-chip__desc  { font-size: var(--fz-sm); color: var(--c-body); margin-top: 2px; }
.mapa-chip:nth-child(1) .mapa-chip__badge { background: linear-gradient(135deg,#FF8300,#ff5a1f); }
.mapa-chip:nth-child(2) .mapa-chip__badge { background: linear-gradient(135deg,#ff5a1f,#37254E); }
.mapa-chip:nth-child(3) .mapa-chip__badge { background: linear-gradient(135deg,#37254E,#1a0f2f); }
.mapa-chip:nth-child(4) .mapa-chip__badge { background: linear-gradient(135deg,#37254E,#FF8300); }

/* -- Stats / badges ------------------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
@media (max-width: 800px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat { text-align: left; }
.stat__n { font-family: var(--f-display); font-size: 2.5rem; font-weight: 900; color: var(--c-ink); line-height: 1; letter-spacing: -.02em; }
.stat__l { margin-top: .25rem; color: var(--c-muted); font-size: var(--fz-sm); }

/* -- Method (MAPA) timeline ---------------------------------------------- */
.mapa-timeline { display: grid; gap: var(--s-6); position: relative; }
.mapa-step {
  display: grid; grid-template-columns: 72px 1fr; gap: var(--s-5); align-items: start;
  padding: var(--s-6); background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-xl);
}
.mapa-step__n {
  width: 72px; height: 72px; border-radius: var(--r-lg);
  display: grid; place-items: center; color: #fff; font-family: var(--f-display); font-weight: 900; font-size: 2rem;
  background: var(--grad-hero);
}
.mapa-step h3 { margin-top: 0; }
.mapa-step ul { margin: 0; padding-left: 1.25rem; color: var(--c-body); }
.mapa-step li { margin-bottom: .25rem; }

/* -- Services cards ------------------------------------------------------- */
.service-card { position: relative; overflow: hidden; }
.service-card__head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.service-card__tag { font-size: var(--fz-xs); color: var(--c-brand-ink); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.service-card__outcomes { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.service-card__outcomes li { padding-left: 1.5rem; position: relative; font-size: var(--fz-sm); color: var(--c-body); }
.service-card__outcomes li::before { content: ""; position: absolute; left: 0; top: .45rem; width: 10px; height: 10px; background: var(--c-brand); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); }
.card--dark .service-card__outcomes li { color: rgba(255, 255, 255, .9); }

/* -- Proof (logos / testimonial) ----------------------------------------- */
.proof-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5) var(--s-7); color: var(--c-muted); font-size: var(--fz-sm); }
.proof-bar span { font-weight: 700; color: var(--c-ink); letter-spacing: -.01em; }

.testimonial {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl);
  padding: var(--s-7);
}
.testimonial blockquote { margin: 0 0 var(--s-5); font-family: var(--f-display); font-size: 1.5rem; font-weight: 800; color: var(--c-ink); line-height: 1.25; letter-spacing: -.01em; }
.testimonial cite { font-style: normal; color: var(--c-body); font-size: var(--fz-sm); }

/* -- FAQ ------------------------------------------------------------------ */
details.faq { border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--s-4) var(--s-5); background: #fff; transition: box-shadow .15s ease; }
details.faq + details.faq { margin-top: var(--s-3); }
details.faq[open] { box-shadow: var(--shadow-sm); }
details.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  color: var(--c-ink); font-weight: 600; padding: .25rem 0;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--c-brand); transition: transform .15s; }
details.faq[open] summary::after { content: "−"; }
details.faq > *:not(summary) { margin-top: var(--s-3); color: var(--c-body); }

/* -- CTA band ------------------------------------------------------------- */
.cta-band {
  background: var(--c-accent); color: #fff; border-radius: var(--r-2xl);
  padding: var(--s-8) var(--s-7); position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-6); align-items: center;
}
.cta-band::before {
  content: ""; position: absolute; inset: -40% -10% auto auto;
  width: 60vw; height: 60vw; background: radial-gradient(closest-side, #FF8300 0%, transparent 70%);
  filter: blur(120px); opacity: .75; border-radius: 50%; z-index: 0;
  pointer-events: none;  /* purely decorative — never intercept clicks on the form */
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; margin: 0 0 var(--s-4); }
.cta-band p  { color: rgba(255,255,255,.82); margin: 0 0 var(--s-5); }
@media (max-width: 820px) { .cta-band { grid-template-columns: 1fr; } }

/* -- Forms ---------------------------------------------------------------- */
.form { display: grid; gap: var(--s-4); }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: var(--fz-sm); }
.field input, .field textarea, .field select {
  width: 100%; padding: .75rem 1rem; border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: #fff; color: var(--c-ink);
  transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--c-muted); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--c-brand); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-brand) 22%, transparent);
}
.field__hint { color: var(--c-muted); font-size: var(--fz-xs); }
.form__ok  { background: color-mix(in oklab, var(--c-success) 12%, #fff); border: 1px solid color-mix(in oklab, var(--c-success) 35%, #fff); color: var(--c-success); padding: .75rem 1rem; border-radius: var(--r-md); }
.form__err { background: color-mix(in oklab, var(--c-danger) 10%, #fff);  border: 1px solid color-mix(in oklab, var(--c-danger) 35%, #fff);  color: var(--c-danger);  padding: .75rem 1rem; border-radius: var(--r-md); }

/* -- Blog list ------------------------------------------------------------ */
.post-list { display: grid; gap: var(--s-6); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .post-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .post-list { grid-template-columns: 1fr; } }
.post-card {
  display: grid; gap: 0; background: #fff;
  border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: transparent; }
.post-card a { color: var(--c-ink); }
.post-card a:hover { text-decoration: none; }
.post-card__image {
  display: block; aspect-ratio: 16/9; overflow: hidden; background: var(--grad-soft);
}
.post-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .post-card__image img { transform: scale(1.03); }
.post-card__image--placeholder {
  display: grid; place-items: center; height: 100%;
  font-family: var(--f-display); font-size: 3rem; font-weight: 900;
  color: var(--c-brand); background: var(--grad-soft);
}
.post-card__body { padding: var(--s-5); display: grid; gap: var(--s-2); }
.post-card h3 { font-size: 1.15rem; line-height: 1.25; margin: 0; }
.post-card__meta { color: var(--c-muted); font-size: var(--fz-xs); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0; }

/* -- Footer --------------------------------------------------------------- */
.site-footer { padding: var(--s-8) 0 var(--s-4); background: var(--c-accent); color: rgba(255,255,255,.78); margin-top: var(--s-9); }
.site-footer h4 { color: #fff; font-size: var(--fz-sm); text-transform: uppercase; letter-spacing: .14em; margin: 0 0 var(--s-4); }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.site-footer a { color: rgba(255,255,255,.75); }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--s-6); padding-bottom: var(--s-7); border-bottom: 1px solid rgba(255,255,255,.08); }
.site-footer__bottom { display: flex; justify-content: space-between; padding-top: var(--s-4); color: rgba(255,255,255,.55); font-size: var(--fz-xs); }
.site-footer__social {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: .25rem;
}
.site-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.85);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.site-footer__social a:hover {
  background: var(--c-brand); color: #fff; text-decoration: none;
  transform: translateY(-1px);
}
.site-footer__social svg { width: 18px; height: 18px; }
@media (max-width: 820px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }

/* -- Legacy WP / Gutenberg content (migrated body_html) ------------------- */
/* Wider wrapper so Gutenberg columns/figures have room; paragraphs still
   wrap at a comfortable measure thanks to an internal prose rule.          */
.legacy-content { max-width: 960px; margin-inline: auto; }
.legacy-content > p,
.legacy-content > ul,
.legacy-content > ol,
.legacy-content > blockquote { max-width: 72ch; margin-inline: auto; }
.legacy-content h1, .legacy-content h2, .legacy-content h3, .legacy-content h4 { margin-top: var(--s-7); max-width: 60ch; margin-inline: auto; }
.legacy-content h1 { font-size: var(--fz-3xl); }
.legacy-content h2 { font-size: var(--fz-2xl); }
.legacy-content h3 { font-size: var(--fz-xl); }
.legacy-content img { border-radius: var(--r-md); margin: var(--s-4) auto; display: block; }
.legacy-content figure { margin: var(--s-5) auto; }
.legacy-content figure img { width: 100%; }
.legacy-content figcaption { color: var(--c-muted); font-size: var(--fz-sm); text-align: center; margin-top: .5rem; }
.legacy-content blockquote {
  border-left: 4px solid var(--c-brand); padding: .25rem 0 .25rem 1rem;
  margin: var(--s-5) auto; color: var(--c-accent); font-family: var(--f-display);
  font-size: 1.15rem; line-height: 1.4;
}
.legacy-content ul, .legacy-content ol { padding-left: 1.4rem; }
.legacy-content li { margin: .25rem 0; }
.legacy-content a { color: var(--c-brand-ink); border-bottom: 1px solid color-mix(in oklab, var(--c-brand) 40%, transparent); }
.legacy-content a:hover { border-bottom-color: var(--c-brand); text-decoration: none; }
.legacy-content code { background: var(--c-surface); padding: .1rem .35rem; border-radius: 4px; font-size: .85em; }
.legacy-content pre  { background: var(--c-accent); color: var(--c-white); padding: 1rem 1.25rem; border-radius: var(--r-md); overflow-x: auto; }
.legacy-content pre code { background: transparent; padding: 0; color: inherit; }
.legacy-content table { width: 100%; border-collapse: collapse; margin: var(--s-5) 0; }
.legacy-content table th, .legacy-content table td { padding: .6rem .75rem; border-bottom: 1px solid var(--c-hairline); text-align: left; vertical-align: top; }
.legacy-content table th { background: var(--c-surface); font-weight: 700; color: var(--c-ink); }

/* Gutenberg layout primitives — mirror Guten's default behaviour without WP CSS. */
.legacy-content .wp-block-columns {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
  margin: var(--s-5) 0; max-width: none;
}
.legacy-content .wp-block-columns.is-layout-flex {
  display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
}
.legacy-content .wp-block-columns .wp-block-column { min-width: 0; }
.legacy-content .wp-block-columns:has(.wp-block-column:nth-child(3)) { --cols: 3; }
.legacy-content .wp-block-columns:has(.wp-block-column:nth-child(4)) { --cols: 4; }
@media (max-width: 820px) {
  .legacy-content .wp-block-columns,
  .legacy-content .wp-block-columns.is-layout-flex { grid-template-columns: 1fr; }
}

.legacy-content .wp-block-media-text {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5);
  align-items: center; margin: var(--s-5) 0; max-width: none;
}
.legacy-content .wp-block-media-text.has-media-on-the-right { grid-template-columns: 1fr 1fr; direction: rtl; }
.legacy-content .wp-block-media-text.has-media-on-the-right > * { direction: ltr; }
@media (max-width: 820px) { .legacy-content .wp-block-media-text { grid-template-columns: 1fr; } }
.legacy-content .wp-block-media-text__media img { width: 100%; height: auto; }

.legacy-content .wp-block-image { margin: var(--s-5) auto; }
.legacy-content .wp-block-image.alignleft,
.legacy-content .wp-block-image.alignright { max-width: 50%; margin: var(--s-3); }
.legacy-content .wp-block-image.alignleft  { float: left;  margin-right: var(--s-5); }
.legacy-content .wp-block-image.alignright { float: right; margin-left: var(--s-5); }
.legacy-content .wp-block-image.aligncenter { display: block; margin-inline: auto; }
.legacy-content .wp-block-image.alignwide,
.legacy-content .wp-block-image.alignfull  { max-width: none; }

/* Phones (<420px): images take the full width — no float, no inline width
   limits, no centered narrow alignment. Reading-friendly on small screens. */
@media (max-width: 419px) {
  .post .legacy-content img,
  .post .legacy-content figure,
  .post .legacy-content .wp-block-image,
  .post .legacy-content .wp-block-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    margin-inline: 0 !important;
  }
  .post .legacy-content figure { display: block; }
}

.legacy-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-5) auto; max-width: 72ch; }
.legacy-content .wp-block-button__link,
.legacy-content .wp-block-button a {
  display: inline-block; padding: .8rem 1.25rem; border-radius: 999px;
  background: var(--c-brand); color: #fff !important; font-weight: 600; border: 1px solid transparent;
}
.legacy-content .wp-block-button__link:hover { background: var(--c-brand-ink); text-decoration: none; }
.legacy-content .is-style-outline .wp-block-button__link {
  background: transparent; color: var(--c-ink) !important; border-color: var(--c-border);
}

.legacy-content .wp-block-cover,
.legacy-content .wp-block-group.has-background {
  padding: var(--s-6); border-radius: var(--r-lg); margin: var(--s-5) 0;
}

.legacy-content .wp-block-quote { border-left: 4px solid var(--c-brand); padding-left: 1rem; }

/* Brand colour classes that WP emits. */
.legacy-content .has-primary-color,
.legacy-content .has-kurdis-orange-color,
.legacy-content .has-orange-color { color: var(--c-brand) !important; }
.legacy-content .has-primary-background-color,
.legacy-content .has-kurdis-orange-background-color,
.legacy-content .has-orange-background-color { background-color: var(--c-brand) !important; }

.legacy-content .has-black-color         { color: var(--c-black) !important; }
.legacy-content .has-black-background-color { background-color: var(--c-accent) !important; }
.legacy-content .has-white-color         { color: #fff !important; }
.legacy-content .has-white-background-color { background-color: #fff !important; }
.legacy-content .has-gray-light-color    { color: #eaeaf2 !important; }
.legacy-content .has-gray-light-background-color { background-color: #eaeaf2 !important; }
.legacy-content .has-gray-color          { color: #6b6b78 !important; }
.legacy-content .has-gray-background-color { background-color: #6b6b78 !important; }
.legacy-content .has-accent-color,
.legacy-content .has-purple-color        { color: var(--c-accent) !important; }
.legacy-content .has-accent-background-color,
.legacy-content .has-purple-background-color { background-color: var(--c-accent) !important; }

/* Dark-background info cards (service pages use these for the "why choose us" trio). */
.legacy-content .wp-block-group.has-black-background-color {
  padding: var(--s-6) var(--s-5);
  border-radius: var(--r-lg);
  margin: var(--s-4) 0;
  text-align: center;
}
.legacy-content .wp-block-group.has-black-background-color figure.wp-block-image {
  margin: 0 auto var(--s-4);
}
.legacy-content .wp-block-group.has-black-background-color figure.wp-block-image img {
  width: 72px; height: 72px; max-width: 72px;
  filter: brightness(0) invert(1); /* turn dark SVG icons white on dark bg */
}
.legacy-content .wp-block-group.has-black-background-color h3 {
  color: #fff !important; margin-top: 0;
}
.legacy-content .wp-block-group.has-black-background-color p {
  color: rgba(255,255,255,.82) !important;
}

.legacy-content .kurdis,
.legacy-content .kurdis-extra   { font-family: var(--f-display); }

/* Gutenberg "spacer" block */
.legacy-content .wp-block-spacer { display: block; }

/* --------------------------------------------------------------------------
   /sobre-nosotros/ — team grid (#colab). The default `.wp-block-columns` rule
   stretches each column to fill 1fr; the team headshots look enormous on
   wide viewports. Override #colab to wrap centred 300-px cards.
   -------------------------------------------------------------------------- */
.legacy-content #colab.wp-block-columns,
.legacy-content #colab.wp-block-columns.is-layout-flex {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: stretch;
  gap: var(--s-6);
  margin: var(--s-6) auto;
}
.legacy-content #colab .wp-block-column {
  flex: 0 1 300px;
  max-width: 300px;
  text-align: center;
}
.legacy-content #colab .wp-block-column figure { margin: 0 0 var(--s-3); }
.legacy-content #colab .wp-block-column img    { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r-md); }
.legacy-content #colab .wp-block-column .wp-block-social-links { justify-content: center; gap: var(--s-2, .5rem); }

/* --------------------------------------------------------------------------
   Migrated FAQ accordions: service pages use Gutenberg <details class="wp-block-details">
   inside #faq / #faq-group. Without these styles they render as unstyled
   browser <details>: tiny triangle, no separation, summary indistinguishable
   from body text. Match the look of the home's details.faq blocks.
   -------------------------------------------------------------------------- */
.legacy-content #faq                          { max-width: 72ch; margin: var(--s-7) auto; }
.legacy-content #faq > h2                     { text-align: center; max-width: 60ch; margin: 0 auto var(--s-3); }
.legacy-content #faq > p                      { text-align: center; color: var(--c-muted); max-width: 60ch; margin: 0 auto var(--s-6); }
.legacy-content #faq-group                    { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; max-width: none; }
.legacy-content #faq-group > details,
.legacy-content #faq    > details             {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  background: #fff;
  transition: box-shadow .15s ease;
  margin: 0;
  max-width: none;
}
.legacy-content #faq-group > details[open],
.legacy-content #faq    > details[open]       { box-shadow: var(--shadow-sm); }
.legacy-content #faq-group > details > summary,
.legacy-content #faq    > details > summary   {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  color: var(--c-ink); font-weight: 600; padding: .25rem 0;
}
.legacy-content #faq-group > details > summary::-webkit-details-marker,
.legacy-content #faq    > details > summary::-webkit-details-marker { display: none; }
.legacy-content #faq-group > details > summary::after,
.legacy-content #faq    > details > summary::after {
  content: "+"; font-size: 1.4rem; color: var(--c-brand); flex-shrink: 0;
  font-weight: 400; line-height: 1;
}
.legacy-content #faq-group > details[open] > summary::after,
.legacy-content #faq    > details[open] > summary::after { content: "−"; }
.legacy-content #faq-group > details > *:not(summary),
.legacy-content #faq    > details > *:not(summary) {
  margin-top: var(--s-3); color: var(--c-body);
}
.legacy-content #faq-group > details p,
.legacy-content #faq    > details p { max-width: none; margin-inline: 0; }

/* --------------------------------------------------------------------------
   Pull-quotes from migrated WP content. The Gutenberg editor stamps inner
   <p> tags with `has-black-background-color` + `has-gray-light-color` which
   produced an illegible dark-on-dark rendering. Override those inside the
   blockquote with a clean brand-friendly look.
   -------------------------------------------------------------------------- */
.legacy-content blockquote.wp-block-quote {
  background: var(--c-brand-soft, #fff3e4);
  border-left: 4px solid var(--c-brand);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-5) var(--s-6);
  margin: var(--s-5) auto;
  font-family: var(--f-display);
  font-style: italic;
  color: var(--c-ink);
  font-size: 1.15rem;
  line-height: 1.5;
}
.legacy-content blockquote.wp-block-quote > p {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--c-ink) !important;
  font-size: inherit !important;
  margin: 0;
  padding: 0;
}
.legacy-content blockquote.wp-block-quote em { font-style: normal; }
.legacy-content blockquote.wp-block-quote strong { color: var(--c-brand-ink); font-weight: 700; }
.legacy-content blockquote.wp-block-quote cite,
.legacy-content blockquote.wp-block-quote footer {
  display: block; margin-top: var(--s-3); font-style: normal;
  font-family: var(--f-body); font-size: var(--fz-sm); color: var(--c-muted);
}

/* --------------------------------------------------------------------------
   Headings/paragraphs with `has-background`: WP intends them to render as a
   coloured chip. Without padding they look squashed. Treat them as inline
   chips so they hug their text and don't span the full container.
   -------------------------------------------------------------------------- */
.legacy-content h1.has-background,
.legacy-content h2.has-background,
.legacy-content h3.has-background,
.legacy-content h4.has-background {
  display: inline-block;
  padding: .35rem .85rem;
  border-radius: var(--r-md);
  max-width: 100%;
}
/* Inside columns or right-aligned wrappers, the inline-block heading aligns
   to the writing direction of its parent, so right-aligned columns get a
   right-anchored chip. */
.legacy-content .has-text-align-right.has-background { float: right; clear: both; }
.legacy-content p.has-background {
  padding: .65rem 1rem;
  border-radius: var(--r-md);
}

/* --------------------------------------------------------------------------
   Gutenberg social-links block: render as a row of circular brand-coloured
   icon buttons. The block emits inline SVGs already; we just need layout +
   button chrome and to hide the screen-reader labels visually.
   -------------------------------------------------------------------------- */
.legacy-content .wp-block-social-links {
  list-style: none; padding: 0;
  margin: var(--s-5) 0;
  display: flex; flex-wrap: wrap; gap: var(--s-3);
}
.legacy-content .wp-block-social-links.is-content-justification-right  { justify-content: flex-end; }
.legacy-content .wp-block-social-links.is-content-justification-center { justify-content: center; }
.legacy-content .wp-block-social-links.is-content-justification-left   { justify-content: flex-start; }
.legacy-content .wp-social-link { margin: 0; padding: 0; }
.legacy-content .wp-block-social-link-anchor {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--c-accent); color: #fff !important;
  border: 0 !important;
  transition: background .15s ease, transform .15s ease;
}
.legacy-content .wp-block-social-link-anchor:hover {
  background: var(--c-brand); transform: translateY(-1px); text-decoration: none;
}
.legacy-content .wp-block-social-link-anchor svg {
  width: 22px; height: 22px; fill: currentColor;
}
.legacy-content .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Maintenance pricing — the migrated /plan-mantenimiento-wordpress/ page
   uses #price.three-col with three Gutenberg columns, a `<details>` accordion
   per package and a #favorito ribbon on the middle (Avanzado) column.
   -------------------------------------------------------------------------- */
.legacy-content #price.three-col          { margin: var(--s-7) 0; }
.legacy-content #price.three-col > h2     { text-align: center; margin-bottom: var(--s-6); max-width: 60ch; margin-inline: auto; }
.legacy-content #price.three-col .wp-block-columns { gap: var(--s-5); align-items: stretch; }
.legacy-content #price.three-col .wp-block-column {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-5) var(--s-5);
  position: relative;
  box-shadow: var(--shadow-sm);
}
.legacy-content #price.three-col .wp-block-column.favorite {
  border: 2px solid var(--c-brand);
  box-shadow: 0 14px 36px -10px rgba(255,131,0,.25);
}
.legacy-content #price.three-col #favorito {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--c-brand); color: #fff;
  padding: .25rem .85rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
}
.legacy-content #price.three-col #favorito p { margin: 0; color: #fff !important; font-size: inherit !important; }
.legacy-content #price.three-col h3 {
  font-size: 1.5rem !important;
  margin: 0 0 .15rem;
  text-align: center; color: var(--c-ink) !important;
}
.legacy-content #price.three-col .wp-block-column > .wp-block-group > p:first-of-type {
  text-align: center; color: var(--c-muted); font-size: var(--fz-sm); margin-bottom: var(--s-4);
}
.legacy-content #price.three-col .price-money {
  text-align: center; margin: 0 0 var(--s-4);
  color: var(--c-muted); font-size: .9rem;
}
.legacy-content #price.three-col .price-money span {
  display: block; font-size: 2.5rem; font-weight: 800;
  color: var(--c-brand-ink); font-family: var(--f-display);
  line-height: 1; margin-bottom: .25rem;
}
.legacy-content #price.three-col details {
  background: var(--c-surface); border-radius: var(--r-md);
  padding: .55rem .85rem;
  margin: 0 0 var(--s-5);
  font-size: var(--fz-sm);
}
.legacy-content #price.three-col details summary {
  cursor: pointer; font-weight: 600; color: var(--c-ink);
  list-style: none; padding: .1rem 0;
}
.legacy-content #price.three-col details summary::-webkit-details-marker { display: none; }
.legacy-content #price.three-col details summary::before {
  content: "+"; display: inline-block; width: 1rem;
  color: var(--c-brand); font-weight: 800;
}
.legacy-content #price.three-col details[open] summary::before { content: "−"; }
.legacy-content #price.three-col details ul {
  margin: .5rem 0 .25rem; padding-left: 1.4rem;
}
.legacy-content #price.three-col details li { margin: .2rem 0; }
.legacy-content #price.three-col .wp-block-buttons {
  margin: auto 0 0 0;  /* push CTA to bottom of card */
  justify-content: center; max-width: none;
}
.legacy-content #price.three-col .wp-block-button { width: 100%; }
.legacy-content #price.three-col .wp-block-button__link {
  display: block; width: 100%; text-align: center;
}
@media (max-width: 820px) {
  .legacy-content #price.three-col .wp-block-column.favorite { transform: none; }
}

/* Kill WP's hard-coded dimensions that break layout when the width is container-bound. */
.legacy-content img[style*="width:"][style*="height:"] { max-width: 100%; height: auto !important; }

/* Remove the leftover WP "data-lazyloaded" flicker attribute visual side-effect. */
.legacy-content img[data-lazyloaded] { opacity: 1 !important; }

/* -- Utility ------------------------------------------------------------- */
.text-center { text-align: center; }
.max-w-readable { max-width: 65ch; margin-inline: auto; }
.stack > * + * { margin-top: var(--s-4); }
.eyebrow { color: var(--c-brand-ink); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: var(--fz-xs); }

/* ==========================================================================
   Google reviews block
   ========================================================================== */
.reviews-block__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-6);
}
.reviews-block__summary { display: flex; flex-direction: column; gap: .25rem; align-items: flex-end; }
.reviews-block__score   { display: flex; align-items: baseline; gap: .4rem; color: var(--c-ink); }
.reviews-block__score strong { font-size: 2rem; font-weight: 800; }
.reviews-block__score small  { color: var(--c-muted); }
.reviews-block__stars   { color: #ffb400; font-size: 1.1rem; letter-spacing: .08em; }
.reviews-block__count   { color: var(--c-muted); font-size: .9rem; }
.reviews-block__verify  {
  color: var(--c-brand-ink); font-weight: 600; font-size: .85rem;
  border-bottom: 1px dashed var(--c-brand-ink);
}
.reviews-block__verify:hover { text-decoration: none; color: var(--c-accent); border-bottom-color: var(--c-accent); }

.reviews-slider {
  overflow: hidden;
  /* Soft fade at the edges so partially-visible cards don't look clipped */
  mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.reviews-slider__track {
  display: flex;
  gap: var(--s-4);
  width: max-content;
  animation: reviews-scroll 60s linear infinite;
  will-change: transform;
}
.reviews-slider:hover .reviews-slider__track,
.reviews-slider:focus-within .reviews-slider__track,
.reviews-slider.is-paused .reviews-slider__track {
  animation-play-state: paused;
}
.reviews-slider__slide {
  flex: 0 0 300px;        /* fixed width so the scroll math is predictable */
  min-width: 300px;
}
@keyframes reviews-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - var(--s-4) / 2), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-slider__track { animation: none; }
  .reviews-slider { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

.review-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: .6rem;
  box-shadow: 0 1px 2px rgba(55, 37, 78, .04);
  transition: transform .15s, box-shadow .15s;
  cursor: pointer;
}
.review-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(55, 37, 78, .25); }
.review-card__head { display: flex; gap: .7rem; align-items: center; }
.review-card__avatar {
  width: 40px; height: 40px; border-radius: 50%; background: #eee; object-fit: cover;
}
.review-card__avatar--placeholder {
  display: grid; place-items: center; background: var(--c-brand); color: #fff; font-weight: 700;
}
.review-card__author { display: block; color: var(--c-ink); font-weight: 600; font-size: .9rem; }
.review-card__stars  { color: #ffb400; font-size: .9rem; letter-spacing: .05em; }
.review-card__text   { color: var(--c-body); margin: 0; font-size: .92rem; line-height: 1.55; }
.review-card__time   { color: var(--c-muted); font-size: .75rem; margin-top: auto; }

.reviews-block__footer { text-align: center; margin-top: var(--s-6); }

/* ==========================================================================
   Blog post page
   ========================================================================== */
.post__container  { max-width: 820px; }
.post__header     { margin-bottom: var(--s-6); }
.post__title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);   /* was --fz-display → overwhelming for posts */
  letter-spacing: -.02em;
  line-height: 1.15;
  max-width: none;                          /* let it use the full container width */
  margin: .35rem 0 0;
}
.post__lead {
  font-size: var(--fz-lg);
  color: var(--c-body);
  margin-top: var(--s-4);
}
.post__featured {
  margin: var(--s-6) 0 var(--s-7);
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.post__featured img { width: 100%; height: 100%; object-fit: cover; }
.post__body        { font-size: var(--fz-md); line-height: 1.7; }

/* Table of contents */
.post-toc {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: .75rem 1.25rem;
  margin: 0 0 var(--s-6);
  box-shadow: 0 1px 2px rgba(55, 37, 78, .04);
}
.post-toc summary {
  cursor: pointer; list-style: none;
  padding: .4rem 0;
  display: flex; align-items: center; gap: .5rem;
  color: var(--c-ink);
}
.post-toc summary::-webkit-details-marker { display: none; }
.post-toc summary::after {
  content: '▾'; margin-left: auto; color: var(--c-muted);
  transition: transform .15s;
}
.post-toc:not([open]) summary::after,
.post-toc details:not([open]) summary::after { transform: rotate(-90deg); }
.post-toc__list {
  margin: .5rem 0 .25rem; padding-left: 1.2rem;
  counter-reset: toc;
}
.post-toc__list li { margin: .3rem 0; list-style: decimal; color: var(--c-muted); }
.post-toc__list a  { color: var(--c-ink-soft); text-decoration: none; }
.post-toc__list a:hover { color: var(--c-brand-ink); text-decoration: underline; }
.post-toc__sub { margin: .25rem 0 .5rem; padding-left: 1.2rem; list-style: lower-alpha; }

/* Comments */
.comments { margin-top: var(--s-8); border-top: 1px solid var(--c-border); padding-top: var(--s-7); }
.comments__title { font-size: var(--fz-2xl); margin-bottom: var(--s-5); }
.comments__list  { list-style: none; padding: 0; margin: 0 0 var(--s-7); display: grid; gap: var(--s-5); }

.comment {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--s-4);
  padding: var(--s-5);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.comment__avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--c-brand); color: #fff; font-weight: 700;
  font-family: var(--f-display); font-size: 1.1rem;
}
.comment__head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-3); flex-wrap: wrap; margin-bottom: .4rem;
}
.comment__author { color: var(--c-ink); font-size: var(--fz-md); }
.comment__author a { color: inherit; }
.comment__time   { color: var(--c-muted); font-size: var(--fz-xs); }
.comment__content { color: var(--c-body); line-height: 1.6; }
.comment__content p:last-child { margin-bottom: 0; }

.comments__flash {
  padding: .75rem 1rem; border-radius: var(--r-md); margin-bottom: var(--s-5); font-weight: 500;
}
.comments__flash--ok  { background: #e6f8ee; color: #0d7a3c; border: 1px solid #baecd1; }
.comments__flash--err { background: #fde9ea; color: #b81b21; border: 1px solid #f3bfc2; }

/* Comment form */
.comment-form-wrap {
  background: var(--c-surface);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
.comment-form-wrap__title { font-size: var(--fz-xl); margin: 0 0 .25rem; }
.comment-form { margin-top: var(--s-5); gap: var(--s-4); }
.comment-form .form__row {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 640px) { .comment-form .form__row { grid-template-columns: 1fr; } }
.comment-form .field label { font-weight: 600; font-size: var(--fz-sm); }
.comment-form .field input,
.comment-form .field textarea {
  width: 100%; padding: .7rem .9rem; background: #fff;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  font-size: var(--fz-sm);
}
.comment-form .field input:focus,
.comment-form .field textarea:focus {
  outline: none; border-color: var(--c-brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-brand) 25%, transparent);
}
.comment-form textarea { min-height: 140px; resize: vertical; }

/* ==========================================================================
   Service hero video (below the fold, autoplay loop)
   ========================================================================== */
.service-hero-video { padding-top: 0; }
.service-hero-video__frame {
  position: relative;
  margin: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--c-accent);
  box-shadow: var(--shadow-lg);
  /* Soft brand halo */
  outline: 1px solid rgba(255, 131, 0, .15);
  outline-offset: -1px;
}
.service-hero-video__frame video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.service-hero-video__frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    transparent 55%,
    rgba(26, 15, 46, .35) 85%,
    rgba(26, 15, 46, .7) 100%);
  pointer-events: none;
}
.service-hero-video__caption {
  position: absolute;
  left: var(--s-6); right: var(--s-6); bottom: var(--s-5);
  color: #fff;
  font-size: var(--fz-sm);
  font-weight: 500;
  letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  margin: 0;
}
@media (max-width: 640px) {
  .service-hero-video__caption { left: var(--s-4); right: var(--s-4); bottom: var(--s-4); font-size: var(--fz-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .service-hero-video__frame video { animation: none; }
}

/* ==========================================================================
   Post hooks (admin-managed inline blocks)
   ========================================================================== */
.post-hooks { margin: var(--s-6) 0; }
.post-hooks__item:not(:last-child) { margin-bottom: var(--s-5); }

/* Default CTA card style (used by the seeded "CTA por defecto" hook). */
.post-cta {
  background: linear-gradient(135deg, var(--c-brand-soft) 0%, var(--c-accent-soft) 100%);
  border: 1px solid color-mix(in oklab, var(--c-brand) 15%, var(--c-border));
  border-radius: var(--r-xl);
  padding: var(--s-6);
  display: grid;
  gap: var(--s-3);
  align-items: start;
}
.post-cta__title {
  font-size: var(--fz-xl);
  margin: 0;
  color: var(--c-ink);
}
.post-cta__text {
  margin: 0;
  color: var(--c-body);
  line-height: 1.6;
}
.post-cta .btn { justify-self: start; margin-top: var(--s-2); }

/* ==========================================================================
   QR Promo landing
   ========================================================================== */
body.landing { background: var(--c-bg); }

.landing-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-3) var(--s-5);
  background: color-mix(in oklab, var(--c-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-hairline);
}
.landing-header__badge {
  font-size: var(--fz-xs); font-weight: 600;
  background: var(--c-brand-soft); color: var(--c-brand-ink);
  padding: .35rem .7rem; border-radius: 999px;
  display: inline-flex; align-items: center; gap: .35rem;
}

.landing-main { padding-bottom: var(--s-8); }

.landing-footer {
  border-top: 1px solid var(--c-hairline);
  padding: var(--s-5) 0;
  background: var(--c-surface);
  margin-top: var(--s-7);
}
.landing-footer__row {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3);
  color: var(--c-muted); font-size: var(--fz-xs);
}
.landing-footer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ----------------------------- Hero ------------------------------ */
.promo-hero {
  position: relative;
  padding: var(--s-7) 0 var(--s-8);
  background:
    radial-gradient(700px 400px at 90% 10%, rgba(255, 131, 0, .15), transparent 70%),
    radial-gradient(600px 500px at 5% 90%, rgba(55, 37, 78, .15), transparent 70%),
    var(--c-bg);
  overflow: hidden;
}
.promo-hero__inner {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--s-7);
  align-items: center;
}
@media (max-width: 820px) {
  .promo-hero__inner { grid-template-columns: 1fr; gap: var(--s-5); }
}

.promo-hero__eyebrow {
  display: inline-block;
  background: var(--c-accent-soft); color: var(--c-accent);
  padding: .3rem .7rem; border-radius: 999px;
  font-size: var(--fz-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  margin: 0 0 var(--s-4);
}
.promo-hero__title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  letter-spacing: -.025em; line-height: 1.1;
  margin: 0 0 var(--s-4);
}
.promo-hero__title span {
  display: block; color: var(--c-brand);
  font-size: clamp(1.5rem, 3.2vw, 2.5rem);
  margin-top: .35rem;
}
.promo-hero__sub {
  font-size: var(--fz-lg); color: var(--c-body);
  max-width: 56ch; margin: 0 0 var(--s-5);
  line-height: 1.55;
}
.promo-hero__cta { font-weight: 700; }
.promo-hero__bullets {
  list-style: none; padding: 0; margin: var(--s-4) 0 0;
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  color: var(--c-muted); font-size: var(--fz-sm);
}
.promo-hero__bullets li { display: inline-flex; align-items: center; gap: .35rem; }
.promo-hero__bullets li::before {
  content: "\2713"; color: var(--c-success); font-weight: 800;
}

.promo-hero__proof {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: var(--s-5); text-align: center;
  box-shadow: var(--shadow-md);
  display: grid; gap: .25rem; justify-items: center;
}
.promo-hero__proof-stars { color: #ffb400; font-size: 1.4rem; letter-spacing: .1em; }
.promo-hero__proof-score { color: var(--c-ink); }
.promo-hero__proof-score strong { font-size: 2.4rem; font-weight: 800; }
.promo-hero__proof-count { color: var(--c-muted); font-size: var(--fz-sm); }
.promo-hero__proof-link {
  font-size: var(--fz-xs); color: var(--c-brand-ink);
  border-bottom: 1px dashed var(--c-brand-ink); margin-top: .35rem;
}
.promo-hero__proof-link:hover { color: var(--c-accent); border-color: var(--c-accent); text-decoration: none; }

/* ------------------------ Deliverables --------------------------- */
.promo-deliverables { padding: var(--s-8) 0; }
.promo-deliverables h2 { max-width: 22ch; margin-bottom: var(--s-6); }
.promo-deliverables__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.promo-deliv-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: var(--s-5);
  position: relative;
}
.promo-deliv-card__num {
  font-family: var(--f-display); font-weight: 900;
  font-size: 2.4rem;
  color: var(--c-brand);
  display: block; line-height: 1;
  margin-bottom: var(--s-3);
}
.promo-deliv-card h3 { font-size: var(--fz-lg); margin-bottom: var(--s-2); }
.promo-deliv-card p  { color: var(--c-body); font-size: var(--fz-sm); margin: 0; line-height: 1.6; }

/* -------------------- Fit (yes / not for) ------------------------ */
.promo-fit { padding: var(--s-7) 0; background: var(--c-surface); }
.promo-fit__grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) { .promo-fit__grid { grid-template-columns: 1fr; } }
.promo-fit__col {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: var(--s-5);
}
.promo-fit__col--yes { border-top: 4px solid var(--c-success); }
.promo-fit__col--no  { border-top: 4px solid var(--c-danger); }
.promo-fit__col ul   { list-style: none; padding: 0; margin: var(--s-3) 0 0; display: grid; gap: .65rem; }
.promo-fit__col li   { padding-left: 1.6rem; position: relative; line-height: 1.5; color: var(--c-body); }
.promo-fit__col--yes li::before {
  content: "\2713"; position: absolute; left: 0; top: 0; color: var(--c-success); font-weight: 800;
}
.promo-fit__col--no li::before {
  content: "\00d7"; position: absolute; left: 0; top: -2px; color: var(--c-danger); font-weight: 800; font-size: 1.3rem;
}

/* ---------------------------- Reviews ---------------------------- */
.promo-reviews { padding: var(--s-8) 0; }
.promo-reviews h2 { max-width: 24ch; margin-bottom: var(--s-6); }
.promo-reviews__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.promo-review {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: .6rem;
}
.promo-review__stars { color: #ffb400; font-size: 1.05rem; letter-spacing: .05em; }
.promo-review__text  { color: var(--c-body); margin: 0; line-height: 1.6; font-size: var(--fz-sm); }
.promo-review__author { color: var(--c-ink); font-size: var(--fz-sm); margin: auto 0 0; }
.promo-reviews__verify { text-align: center; margin-top: var(--s-5); }
.promo-reviews__verify a { color: var(--c-brand-ink); font-weight: 600; }

/* ------------------------------ FAQ ------------------------------ */
.promo-faq { padding: var(--s-8) 0; background: var(--c-surface); }
.promo-faq h2 { max-width: 26ch; margin-bottom: var(--s-6); }
.promo-faq__list { display: grid; gap: var(--s-3); max-width: 780px; }
.promo-faq__item {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
}
.promo-faq__item summary {
  cursor: pointer; font-weight: 600; color: var(--c-ink); list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.promo-faq__item summary::-webkit-details-marker { display: none; }
.promo-faq__item summary::after {
  content: "+"; color: var(--c-brand); font-size: 1.4rem; font-weight: 800;
  transition: transform .15s;
}
.promo-faq__item[open] summary::after { transform: rotate(45deg); }
.promo-faq__answer { color: var(--c-body); padding-top: var(--s-3); line-height: 1.6; }

/* --------------------------- Final CTA --------------------------- */
.promo-cta { padding: var(--s-9) 0; }
.promo-cta__card {
  background: linear-gradient(135deg, var(--c-accent) 0%, #4d3370 60%, #5a2c5e 100%);
  color: #fff;
  border-radius: var(--r-2xl);
  padding: var(--s-7);
  display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--s-7);
  align-items: start;
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.promo-cta__card::before {
  content: ""; position: absolute;
  top: -120px; right: -120px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,131,0,.45), transparent 70%);
  pointer-events: none;
}
@media (max-width: 820px) {
  .promo-cta__card { grid-template-columns: 1fr; padding: var(--s-5); }
}
.promo-cta__eyebrow { color: #ffd6b0 !important; }
.promo-cta__title { color: #fff; font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin-bottom: var(--s-3); }
.promo-cta__sub { color: rgba(255,255,255,.85); margin-bottom: var(--s-5); }
.promo-cta__bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; color: rgba(255,255,255,.92); font-size: var(--fz-sm); }
.promo-cta__form {
  background: #fff; border-radius: var(--r-xl);
  padding: var(--s-5); display: grid; gap: var(--s-3);
  position: relative; z-index: 1;
}
.promo-cta__form .field input,
.promo-cta__form .field textarea { background: #fff; color: var(--c-ink); }
.promo-cta__form .field label { color: var(--c-ink); }
.promo-cta__legal {
  font-size: var(--fz-xs); color: var(--c-muted); margin: var(--s-2) 0 0;
}
.promo-cta__legal a { color: var(--c-brand-ink); }

/* ==========================================================================
   Affiliate banners (LucusHost) — responsive
   ========================================================================== */
.ad-banner {
  display: block;
  margin: var(--s-6) auto;
  padding: var(--s-3) 0;
  text-align: center;
  /* Span the full row when placed inside a CSS grid (blog-index post-list). */
  grid-column: 1 / -1;
}
.ad-banner__label {
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--c-muted);
  margin: 0 0 .4rem;
}
.ad-banner__slot { display: none; }
.ad-banner__slot a {
  display: inline-block;
  line-height: 0;          /* kill the 4px gap under <img> */
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.ad-banner__slot a:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); text-decoration: none; }
.ad-banner__slot img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Desktop: show the 728×90 leaderboard. Mobile: show the 336×280 rectangle.
   Breakpoint at 720 ensures the leaderboard fits with side gutters on the
   smallest tablet (~768px); below that we serve the squarer creative. */
@media (min-width: 720px) {
  .ad-banner__slot--desktop { display: block; }
}
@media (max-width: 719px) {
  .ad-banner__slot--mobile  { display: block; }
}

/* ==========================================================================
   Post layout with sidebar + sidebar widgets
   ========================================================================== */
.post__container--with-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: var(--s-7);
  align-items: start;
  max-width: min(1080px, 92vw);
}
@media (max-width: 960px) {
  .post__container--with-sidebar {
    grid-template-columns: 1fr;
    max-width: 820px;
  }
}

.post__main { min-width: 0; }

.post-sidebar {
  position: sticky;
  top: calc(64px + var(--s-4));        /* clear the sticky site header */
  display: grid;
  gap: var(--s-5);
  font-size: var(--fz-sm);
}
@media (max-width: 960px) {
  .post-sidebar { position: static; margin-top: var(--s-7); }
}

.sidebar-block {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
}
.sidebar-block__title {
  font-size: var(--fz-md);
  margin: 0 0 var(--s-3);
  color: var(--c-ink);
}

/* Collapsible sidebar block (uses <details>/<summary>) */
.sidebar-block--collapsible { padding: var(--s-3) var(--s-5); }
.sidebar-block--collapsible > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: .35rem 0;
  margin: 0;
  font-weight: 700;
  color: var(--c-ink);
  font-size: var(--fz-md);
  user-select: none;
}
.sidebar-block--collapsible > summary::-webkit-details-marker { display: none; }
.sidebar-block--collapsible > summary::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--c-muted);
  border-bottom: 2px solid var(--c-muted);
  transform: rotate(-45deg);            /* chevron pointing right when closed */
  transition: transform .15s ease;
}
.sidebar-block--collapsible[open] > summary::after {
  transform: rotate(45deg);             /* chevron pointing down when open */
}
.sidebar-block--collapsible[open] > summary { margin-bottom: var(--s-3); }
.sidebar-block__count {
  background: var(--c-brand-soft);
  color: var(--c-brand-ink);
  font-size: .7rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 999px;
}

/* Search */
.sidebar-search {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.sidebar-search:focus-within {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-brand) 25%, transparent);
}
.sidebar-search input {
  flex: 1;
  border: 0;
  padding: .55rem .7rem;
  font-size: var(--fz-sm);
  background: transparent;
  min-width: 0;                  /* let the input shrink in narrow sidebars */
}
.sidebar-search input:focus { outline: none; }
.sidebar-search button {
  background: var(--c-brand);
  color: #fff;
  border: 0;
  padding: 0 .8rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .12s;
}
.sidebar-search button:hover { background: var(--c-brand-ink); }

/* Categories */
.sidebar-categories {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1px;
  background: var(--c-border);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.sidebar-categories li { background: #fff; }
.sidebar-categories a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding: .55rem .7rem;
  color: var(--c-ink);
  font-size: var(--fz-sm);
  transition: background .1s, color .1s;
}
.sidebar-categories a:hover { background: var(--c-brand-soft); color: var(--c-brand-ink); text-decoration: none; }
.sidebar-categories__count {
  background: var(--c-surface);
  color: var(--c-muted);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
}
.sidebar-categories a:hover .sidebar-categories__count {
  background: var(--c-brand);
  color: #fff;
}

/* Sidebar ad slot */
.sidebar-block--ad {
  text-align: center;
  padding: var(--s-3);
  background: #fff;
}
.sidebar-block--ad .ad-banner__label {
  margin-bottom: .5rem;
  font-size: .65rem;
}
.sidebar-block--ad a { display: inline-block; line-height: 0; border-radius: var(--r-md); overflow: hidden; }
.sidebar-block--ad img { max-width: 100%; height: auto; }

/* a11y helper used by the sidebar search label */
.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* ==========================================================================
   Author page + post byline
   ========================================================================== */

/* Byline on a single post — circular avatar with brand-orange ring + label */
.post__byline {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-4);
  text-decoration: none;
  color: inherit;
}
.post__byline:hover { text-decoration: none; }
.post__byline:hover .post__byline-name { color: var(--c-brand-ink); }
.post__byline-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--c-brand);
  padding: 2px;                     /* white halo between avatar and orange ring */
  background: #fff;
  flex-shrink: 0;
  transition: transform .15s, box-shadow .15s;
}
.post__byline:hover .post__byline-avatar {
  transform: scale(1.04);
  box-shadow: 0 4px 12px -4px color-mix(in oklab, var(--c-brand) 60%, transparent);
}
.post__byline-avatar--placeholder {
  display: grid; place-items: center;
  background: var(--c-brand); color: #fff;
  font-weight: 800; font-size: 1.4rem;
  border-color: var(--c-brand);
}
.post__byline-text {
  display: flex; flex-direction: column;
  line-height: 1.2;
}
.post__byline-eyebrow {
  font-size: var(--fz-xs);
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  margin-bottom: 2px;
}
.post__byline-name {
  color: var(--c-ink);
  font-size: var(--fz-md);
  font-weight: 700;
  transition: color .12s;
}

/* Author hero (the /author/{slug}/ page) */
.author-hero {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--s-6);
  align-items: center;
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--c-hairline);
}
@media (max-width: 600px) {
  .author-hero { grid-template-columns: 96px 1fr; gap: var(--s-4); }
}
.author-hero__avatar {
  width: 140px; height: 140px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--c-surface);
  box-shadow: var(--shadow-md);
}
@media (max-width: 600px) {
  .author-hero__avatar { width: 96px; height: 96px; }
}
.author-hero__avatar--placeholder {
  display: grid; place-items: center;
  background: var(--c-brand); color: #fff;
  font-family: var(--f-display);
  font-size: 3.5rem; font-weight: 900;
}
.author-hero__name { margin: .25rem 0 var(--s-3); font-size: clamp(1.8rem, 4vw, 2.6rem); }
.author-hero__bio  { color: var(--c-body); margin: 0 0 var(--s-3); line-height: 1.6; max-width: 60ch; }
/* Author social icons — neutral by default, brand orange on hover */
.author-social {
  list-style: none; padding: 0; margin: var(--s-3) 0 0;
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.author-social li { padding: 0; }
.author-social a {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--c-border);
  color: var(--c-ink);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s, transform .12s, box-shadow .15s;
}
.author-social a:hover {
  background: var(--c-brand);
  border-color: var(--c-brand);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -4px color-mix(in oklab, var(--c-brand) 60%, transparent);
}
.author-social svg { display: block; }

.author-posts__head { margin: 0 0 var(--s-5); }
.author-posts__head h2 { margin: 0; }

/* ==========================================================================
   Internal-linking strategy components
   ========================================================================== */

/* Inline hint inserted right after the first <h2> of every post */
.internal-hint {
  background: var(--c-brand-soft);
  border-left: 3px solid var(--c-brand);
  padding: var(--s-3) var(--s-4);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin: var(--s-4) 0 var(--s-5);
  font-size: var(--fz-sm);
  line-height: 1.55;
  color: var(--c-body);
}
.internal-hint strong { color: var(--c-ink); margin-right: .25rem; }
.internal-hint a {
  color: var(--c-brand-ink);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}
.internal-hint a:hover { color: var(--c-accent); border-color: var(--c-accent); text-decoration: none; }

/* End-of-post cluster CTA card */
.post-cta__actions {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s-3);
}
.post-cta__sub {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed rgba(255, 131, 0, .3);
}
.post-cta__sub small { font-size: .8rem; }
.post-cta__sub a {
  color: var(--c-brand-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Related siblings widget under comments / above end of article */
.post-related {
  margin: var(--s-7) 0 var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
}
.post-related__title {
  font-size: var(--fz-xl);
  margin-bottom: var(--s-5);
}
.post-related__grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.post-related__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  text-decoration: none;
  color: var(--c-ink);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.post-related__card:hover {
  text-decoration: none;
  border-color: var(--c-brand);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -8px rgba(55, 37, 78, .25);
}
.post-related__card img {
  width: 100%; height: 130px; object-fit: cover; display: block;
}
.post-related__card h3 {
  font-size: var(--fz-md);
  margin: var(--s-3) var(--s-4) .25rem;
  color: var(--c-ink);
  line-height: 1.3;
}
.post-related__card p {
  margin: 0 var(--s-4) var(--s-4);
  font-size: var(--fz-xs);
  color: var(--c-body);
}

/* Service cross-sell siblings card */
.service-sibling-card {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--s-5);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.service-sibling-card:hover {
  transform: translateY(-2px);
  border-color: var(--c-brand);
  box-shadow: 0 8px 18px -8px rgba(55, 37, 78, .25);
  text-decoration: none;
}
.service-sibling-card h3 {
  color: var(--c-ink);
  font-size: var(--fz-lg);
  margin: 0 0 .35rem;
  display: flex; justify-content: space-between; align-items: center;
}
.service-sibling-card h3 span {
  color: var(--c-brand);
  transition: transform .15s;
}
.service-sibling-card:hover h3 span { transform: translateX(4px); }
.service-sibling-card p { margin: 0; line-height: 1.5; }

/* ==========================================================================
   /promo-services/ v2 — flyer-aligned redesign
   ========================================================================== */

/* Hero — bolder than the previous version, matches flyer's punch */
.promo-hero--bold {
  padding: var(--s-7) 0 var(--s-8);
  background:
    radial-gradient(900px 500px at 90% 0%, rgba(255, 131, 0, .25), transparent 65%),
    radial-gradient(700px 600px at 0% 100%, rgba(55, 37, 78, .25), transparent 60%),
    var(--c-bg);
}
.promo-trust-badge {
  display: inline-block;
  background: var(--c-accent);
  color: #fff;
  padding: .4rem 1rem;
  border-radius: 6px;
  font-weight: 700;
  font-size: var(--fz-sm);
  letter-spacing: .03em;
  margin-bottom: var(--s-4);
  box-shadow: 0 4px 14px -4px rgba(55, 37, 78, .35);
}
.promo-hero--bold .promo-hero__title {
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  line-height: 1;
  letter-spacing: -.03em;
  margin: 0 0 var(--s-5);
  color: var(--c-accent);
}
.promo-hero--bold .promo-hero__title span {
  display: inline; color: var(--c-brand); font-size: 1em;
}

/* Trust strip — compact dark band */
.promo-trust {
  background: var(--c-accent);
  color: #fff;
  padding: var(--s-4) 0;
}
.promo-trust__row {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-5);
  font-size: var(--fz-sm);
  text-align: center;
}
.promo-trust__row li { display: inline-flex; align-items: center; gap: .35rem; }
.promo-trust__row strong { color: var(--c-brand); }

/* MAPA preview */
.promo-method { padding: var(--s-8) 0; background: var(--c-surface); }
.promo-method__title { max-width: 22ch; margin-bottom: var(--s-3); }
.promo-method__sub { color: var(--c-body); max-width: 60ch; margin: 0 0 var(--s-6); }
.promo-method__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.promo-method__card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  position: relative;
  overflow: hidden;
}
.promo-method__num {
  font-family: var(--f-display); font-weight: 900;
  font-size: 3.5rem; color: var(--c-brand); line-height: 1;
  display: block;
}
.promo-method__code {
  position: absolute;
  top: var(--s-4); right: var(--s-4);
  font-family: var(--f-display); font-weight: 900;
  font-size: 2rem;
  color: rgba(55, 37, 78, .12);
}
.promo-method__card h3 { margin: var(--s-2) 0 var(--s-2); font-size: var(--fz-lg); }
.promo-method__card p  { margin: 0; font-size: var(--fz-sm); color: var(--c-body); line-height: 1.55; }
.promo-method__cta { text-align: center; margin: var(--s-6) 0 0; }
.promo-method__cta a {
  color: var(--c-brand-ink);
  font-weight: 600;
  border-bottom: 1px dashed var(--c-brand-ink);
}

/* Services grid with prices */
.promo-services { padding: var(--s-8) 0; }
.promo-services h2 { max-width: 22ch; margin-bottom: var(--s-3); }
.promo-services__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: var(--s-6);
}
.promo-services__cta {
  text-align: center;
  margin-top: var(--s-6);
}
.promo-svc-card {
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  padding: var(--s-5);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform .15s, box-shadow .15s;
  min-height: 200px;
}
.promo-svc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px rgba(55, 37, 78, .35);
  text-decoration: none;
}
.promo-svc-card--orange {
  background: linear-gradient(135deg, #FF8300 0%, #ff6b1a 100%);
  color: #fff;
}
.promo-svc-card--purple {
  background: linear-gradient(135deg, #37254E 0%, #4d3370 100%);
  color: #fff;
}
.promo-svc-card__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s-3); margin-bottom: var(--s-3);
}
.promo-svc-card h3 {
  color: #fff;
  margin: 0;
  font-size: var(--fz-lg);
  flex: 1;
  line-height: 1.2;
}
.promo-svc-card__price {
  background: rgba(255,255,255,.18);
  color: #fff;
  font-weight: 700;
  font-size: var(--fz-xs);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,.25);
}
.promo-svc-card__desc {
  color: rgba(255,255,255,.92);
  font-size: var(--fz-sm);
  line-height: 1.55;
  margin: 0 0 var(--s-3);
  flex: 1;
}
.promo-svc-card__more {
  font-size: var(--fz-sm);
  font-weight: 600;
  color: #fff;
  margin-top: auto;
  display: inline-block;
  border-bottom: 1px solid rgba(255,255,255,.4);
  padding-bottom: 1px;
  align-self: flex-start;
  transition: border-color .15s, transform .15s;
}
.promo-svc-card:hover .promo-svc-card__more {
  border-color: #fff;
  transform: translateX(2px);
}

/* About Álvaro */
.promo-about { padding: var(--s-8) 0; background: var(--c-surface); }
.promo-about__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-7);
  align-items: center;
}
@media (max-width: 820px) {
  .promo-about__grid { grid-template-columns: 1fr; }
}
.promo-about__media {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 16 / 9;             /* keep the original horizontal frame intact */
  background: var(--c-accent);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.promo-about__media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.promo-about__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(26,15,46,.45) 100%);
  pointer-events: none;
}
.promo-about__eyebrow { color: var(--c-brand-ink); }
.promo-about__copy h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: var(--s-5);
}
.promo-about__copy p {
  color: var(--c-body);
  font-size: var(--fz-md);
  line-height: 1.7;
}
.promo-about__copy strong { color: var(--c-ink); }
.promo-about__quote {
  border-left: 4px solid var(--c-brand);
  background: linear-gradient(135deg, var(--c-brand-soft) 0%, transparent 80%);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-6) 0 0;
  font-style: italic;
  font-size: var(--fz-lg);
  color: var(--c-accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* Final CTA contact list */
.promo-cta__contact {
  list-style: none; padding: 0; margin: var(--s-5) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  font-size: var(--fz-sm);
  color: rgba(255,255,255,.92);
}
.promo-cta__contact a { color: #ffd6b0; border-bottom: 1px dashed #ffd6b0; }
.promo-cta__contact a:hover { color: #fff; border-color: #fff; text-decoration: none; }

.promo-cta__tagline {
  text-align: center;
  font-style: italic;
  font-size: var(--fz-md);
  color: var(--c-muted);
  margin: var(--s-6) 0 0;
  max-width: 60ch;
  margin-inline: auto;
}

/* ==========================================================================
   Cookie consent banner
   ========================================================================== */
.cookie-consent {
  position: fixed;
  z-index: 1000;
  left: var(--s-4); right: var(--s-4); bottom: var(--s-4);
  max-width: 720px;
  margin-inline: auto;
  background: #fff;
  color: var(--c-body);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 50px -12px rgba(26, 15, 46, .35);
  padding: var(--s-4) var(--s-5);
  animation: cc-slide-up .25s ease-out;
}
@keyframes cc-slide-up {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: none;             opacity: 1; }
}
.cookie-consent__inner {
  display: grid;
  gap: var(--s-3);
}
.cookie-consent__copy strong { display: block; margin-bottom: .25rem; color: var(--c-ink); font-size: var(--fz-md); }
.cookie-consent__copy p {
  margin: 0;
  font-size: var(--fz-sm);
  line-height: 1.55;
}
.cookie-consent__copy a {
  color: var(--c-brand-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-consent__options {
  display: grid; gap: .5rem;
  padding: var(--s-3);
  background: var(--c-surface);
  border-radius: var(--r-md);
  font-size: var(--fz-sm);
}
.cookie-consent__opt {
  display: flex; gap: .5rem; align-items: flex-start;
  cursor: pointer;
}
.cookie-consent__opt input[type="checkbox"] {
  margin-top: .25rem; flex-shrink: 0;
  accent-color: var(--c-brand);
}
.cookie-consent__opt span strong { color: var(--c-ink); }
.cookie-consent__actions {
  display: flex; flex-wrap: wrap; gap: .5rem;
  justify-content: flex-end;
}
@media (max-width: 540px) {
  .cookie-consent__actions { justify-content: stretch; }
  .cookie-consent__actions .btn { flex: 1 1 auto; min-width: 0; }
}

/* =========================================================================
   Contact-form success overlay (#contact-ok)
   ========================================================================= */
.contact-overlay {
  position: fixed; inset: 0;
  z-index: 10000;
  background: #d4f4dc;  /* light mint green */
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  animation: contact-overlay-fade .2s ease-out;
}
.contact-overlay[hidden] { display: none; }
@keyframes contact-overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.contact-overlay__close {
  position: absolute; top: 1rem; right: 1rem;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .08);
  color: #1f5f33;
  border: 0;
  font-size: 2rem; line-height: 1;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.contact-overlay__close:hover {
  background: rgba(0, 0, 0, .18);
  transform: rotate(90deg);
}
.contact-overlay__card {
  background: #fff;
  border-radius: var(--r-2xl, 18px);
  padding: 2.5rem 2rem;
  text-align: center;
  max-width: 520px; width: 100%;
  box-shadow: 0 20px 60px -10px rgba(31, 95, 51, .35);
  animation: contact-overlay-pop .25s cubic-bezier(.2, .8, .3, 1.2);
}
@keyframes contact-overlay-pop {
  from { opacity: 0; transform: scale(.92) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.contact-overlay__check {
  width: 84px; height: 84px;
  color: #1f8d4a;
  margin: 0 auto var(--s-4);
  display: block;
  animation: contact-overlay-check .4s ease-out .1s both;
}
@keyframes contact-overlay-check {
  from { stroke-dashoffset: 80; opacity: 0; }
  to   { stroke-dashoffset: 0;  opacity: 1; }
}
.contact-overlay__card h2 {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  margin: 0 0 var(--s-3);
  color: #1f5f33;
  font-weight: 800;
}
.contact-overlay__card p {
  color: var(--c-body, #444);
  font-size: 1.05rem;
  line-height: 1.5;
  margin: 0 0 var(--s-5);
  max-width: 42ch;
  margin-left: auto; margin-right: auto;
}
.contact-overlay__card .btn { min-width: 200px; }
@media (max-width: 480px) {
  .contact-overlay__card { padding: 2rem 1.25rem; }
  .contact-overlay__close { top: .75rem; right: .75rem; width: 40px; height: 40px; font-size: 1.6rem; }
}

/* =========================================================================
   Bot widget — floating bubble + slide-in chat panel
   ========================================================================= */
.bot-bubble {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 9998;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-brand); color: #fff;
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.10);
  transition: transform .15s ease, background .15s ease;
}
.bot-bubble:hover { background: var(--c-brand-ink); transform: translateY(-1px); }
.bot-bubble:focus-visible { outline: 3px solid var(--c-accent-soft); outline-offset: 2px; }
.bot-bubble__pulse {
  position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--c-brand); opacity: .55;
  animation: bot-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes bot-pulse {
  0%   { transform: scale(.85); opacity: .55; }
  70%  { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(1.25); opacity: 0; }
}

.bot-panel {
  position: fixed; right: 1.25rem; bottom: 5.25rem; z-index: 9999;
  width: 360px; max-width: calc(100vw - 2rem);
  height: 520px; max-height: calc(100vh - 7rem);
  background: #fff; color: var(--c-ink);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.10);
  display: flex; flex-direction: column;
  overflow: hidden;
  font-size: var(--fz-sm);
  animation: bot-pop .18s ease-out;
}
.bot-panel[hidden] { display: none; }
@keyframes bot-pop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.bot-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem;
  background: var(--c-accent); color: #fff;
}
.bot-panel__head strong { font-size: 1rem; }
.bot-panel__status {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .75rem; opacity: .85; margin-left: .5rem;
}
.bot-panel__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6);
  animation: bot-dot 1.6s ease-in-out infinite;
}
@keyframes bot-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,.5); }
  50%      { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
}
.bot-panel__close {
  background: transparent; color: #fff; border: 0;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  padding: 0 .25rem; opacity: .85;
}
.bot-panel__close:hover { opacity: 1; }

.bot-panel__messages {
  flex: 1; overflow-y: auto; padding: .85rem;
  background: var(--c-surface);
  display: flex; flex-direction: column; gap: .55rem;
}

.bot-msg { display: flex; }
.bot-msg--user { justify-content: flex-end; }
.bot-msg--bot  { justify-content: flex-start; }
.bot-msg__bubble {
  max-width: 78%;
  padding: .55rem .8rem;
  border-radius: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.bot-msg--user .bot-msg__bubble {
  background: var(--c-brand); color: #fff;
  border-bottom-right-radius: 4px;
}
.bot-msg--bot .bot-msg__bubble {
  background: #fff; color: var(--c-ink);
  border: 1px solid var(--c-border);
  border-bottom-left-radius: 4px;
}
.bot-msg__link {
  text-decoration: underline; text-underline-offset: 2px;
  word-break: break-all;
}
.bot-msg--user .bot-msg__link { color: #fff; text-decoration-color: rgba(255,255,255,.6); }
.bot-msg--user .bot-msg__link:hover { text-decoration-color: #fff; }
.bot-msg--bot  .bot-msg__link { color: var(--c-brand-ink); }
.bot-msg--bot  .bot-msg__link:hover { color: var(--c-brand); }

.bot-msg__typing { display: inline-flex; gap: 4px; padding: .65rem .8rem; }
.bot-msg__typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-ink); opacity: .35;
  animation: bot-typing 1.2s infinite ease-in-out;
}
.bot-msg__typing span:nth-child(2) { animation-delay: .15s; }
.bot-msg__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bot-typing {
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40%           { transform: translateY(-4px); opacity: 1; }
}

.bot-panel__form {
  display: flex; gap: .4rem; padding: .6rem;
  border-top: 1px solid var(--c-border);
  background: #fff;
}
.bot-panel__form input[type="text"] {
  flex: 1; padding: .55rem .7rem;
  border: 1px solid var(--c-border); border-radius: 999px;
  font: inherit; color: var(--c-ink); background: #fff;
}
.bot-panel__form input[type="text"]:focus {
  outline: none; border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-soft);
}
.bot-panel__form button[type="submit"] {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-brand); color: #fff;
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.bot-panel__form button[type="submit"]:hover { background: var(--c-brand-ink); }

.bot-panel__legal {
  margin: 0; padding: .4rem .8rem .55rem;
  font-size: .7rem; color: var(--c-ink-soft); opacity: .75;
  background: #fff; text-align: center;
  border-top: 1px solid var(--c-border);
}
.bot-panel__legal a { color: inherit; text-decoration: underline; }

@media (max-width: 480px) {
  .bot-panel {
    right: .75rem; left: .75rem; bottom: 4.75rem;
    width: auto; max-width: none;
    height: calc(100vh - 6rem);
  }
  .bot-bubble { right: 1rem; bottom: 1rem; }
}