/* ==========================================================================
   HARO Abogados y Economistas — Sistema de diseño (rediseño 18 páginas)
   Port a CSS nativo del design system entregado por Claude Design.
   Marca fija: rojo #b72f2f sobre negro/granate · Playfair Display + Josefin
   Slab (marca) + Mulish (cuerpo, lectura larga). Autor: Summum Marketing.
   Todo scopeado a body.haro-service-page .haro-rd para no colisionar con el
   CSS previo ni con Divi. v3.0.0
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:wght@500;600;700&family=Mulish:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600&display=swap');

/* ---- Tokens ---- */
.haro-rd {
  /* rojo de marca */
  --red-500:#c8453f; --red-600:#b72f2f; --red-700:#9a2626; --red-800:#7a1f1f;
  /* granate */
  --wine-700:#6e2a2a; --wine-800:#58201f; --wine-900:#451919;
  /* tinta (fondos oscuros) */
  --ink-950:#0b0a0b; --ink-900:#131113; --ink-800:#1e1a1c; --ink-700:#2c2629; --ink-600:#3c3438;
  /* neutros cálidos */
  --paper-0:#ffffff; --sand-50:#faf7f2; --sand-100:#f3ede4; --sand-200:#e8ddd0; --sand-300:#d6c8b7; --sand-400:#b7a794;
  --gray-900:#1a1618; --gray-700:#3d3639; --gray-500:#6f6660; --gray-400:#8f857e;

  --surface-page:var(--sand-50); --surface-alt:var(--sand-100); --surface-card:var(--paper-0);
  --surface-dark:var(--ink-900); --surface-darker:var(--ink-950); --surface-wine:var(--wine-900); --surface-brand:var(--red-600);
  --text-heading:var(--gray-900); --text-body:var(--gray-700); --text-muted:var(--gray-500); --text-faint:var(--gray-400);
  --text-on-dark:#f5efe7; --text-on-dark-muted:rgba(245,239,231,.70); --text-on-dark-faint:rgba(245,239,231,.46);
  --accent:var(--red-600); --accent-hover:var(--red-700); --accent-press:var(--red-800);
  --accent-soft:rgba(183,47,47,.10); --accent-line:rgba(183,47,47,.30); --on-accent:#ffffff;
  --border:rgba(26,22,24,.12); --border-strong:rgba(26,22,24,.22); --border-soft:rgba(26,22,24,.07); --border-on-dark:rgba(245,239,231,.14);
  --star:#d4a02a; --focus-ring:rgba(183,47,47,.45);

  /* tipografía */
  --font-display:"Playfair Display","Georgia","Times New Roman",serif;
  --font-label:"Josefin Slab","Georgia",serif;
  --font-body:"Mulish",system-ui,-apple-system,"Segoe UI",sans-serif;
  --weight-display:600; --weight-label:600;
  --text-xs:.75rem; --text-sm:.8125rem; --text-base:.9375rem; --text-md:1rem; --text-lg:1.1875rem;
  --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem; --text-4xl:3rem;
  --text-5xl:clamp(2.6rem,1.6rem + 3.4vw,4rem); --text-6xl:clamp(2.9rem,1.6rem + 4.6vw,4.6rem);
  --leading-tight:1.08; --leading-snug:1.22; --leading-normal:1.6; --leading-relaxed:1.78;
  --tracking-tight:-.02em; --tracking-label:.16em; --tracking-caps:.22em;
  --eyebrow-size:var(--text-sm); --eyebrow-tracking:var(--tracking-label);

  /* espaciado */
  --section-y:clamp(3.5rem,2.5rem + 4vw,6.5rem);
  --card-pad:clamp(1.5rem,1.1rem + 1.4vw,2.25rem);
  --container:1200px; --container-wide:1360px; --container-prose:720px;
  --gutter:clamp(1.25rem,.5rem + 3vw,3rem); --grid-gap:clamp(1.25rem,.8rem + 1.6vw,2rem);

  /* efectos */
  --radius-sm:4px; --radius-md:8px; --radius-lg:14px; --border-rule:2px;
  --shadow-xs:0 1px 2px rgba(20,15,12,.06);
  --shadow-sm:0 1px 2px rgba(20,15,12,.06),0 2px 6px rgba(20,15,12,.06);
  --shadow-md:0 4px 12px rgba(20,15,12,.08),0 2px 4px rgba(20,15,12,.05);
  --shadow-lg:0 18px 40px -14px rgba(20,15,12,.20),0 6px 14px rgba(20,15,12,.08);
  --shadow-float:0 34px 64px -20px rgba(40,12,12,.34),0 12px 26px rgba(20,15,12,.12);
  --scrim-side:linear-gradient(90deg,rgba(11,10,11,.90) 0%,rgba(11,10,11,.62) 45%,rgba(11,10,11,.18) 100%);
  --scrim-dark:linear-gradient(180deg,rgba(11,10,11,.30) 0%,rgba(11,10,11,.80) 100%);
  --scrim-wine:linear-gradient(120deg,rgba(69,25,25,.92) 0%,rgba(19,17,19,.82) 100%);
  --ease-out:cubic-bezier(.22,1,.36,1); --dur-fast:140ms; --dur-base:240ms;
  --ring:0 0 0 3px var(--focus-ring);
}

/* ---- Liberar el contenedor de Divi/entry-content para páginas rediseñadas ---- */
body.haro-service-page .entry-content:has(.haro-rd){
  max-width:none; padding:0; margin:0; overflow:visible;
}
body.haro-service-page .haro-rd{
  width:100vw; position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  font-family:var(--font-body); color:var(--text-body);
  font-size:var(--text-md); line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased; text-align:left;
  background:var(--surface-page);
}
body.haro-service-page .haro-rd *{box-sizing:border-box;}

/* Neutralizar decoraciones heredadas del CSS antiguo dentro del rediseño */
body.haro-service-page .haro-rd h1,
body.haro-service-page .haro-rd h2,
body.haro-service-page .haro-rd h3,
body.haro-service-page .haro-rd h4{margin:0; padding:0;}
body.haro-service-page .haro-rd h2::after,
body.haro-service-page .haro-rd h2::before,
body.haro-service-page .haro-rd h3::after,
body.haro-service-page .haro-rd h3::before{content:none !important; display:none !important;}
body.haro-service-page .haro-rd ul,
body.haro-service-page .haro-rd ol{margin:0; padding:0; list-style:none;}
body.haro-service-page .haro-rd ul li::before,
body.haro-service-page .haro-rd ol li::before{content:none !important;}
body.haro-service-page .haro-rd p{margin:0;}
body.haro-service-page .haro-rd a{text-decoration:none; color:var(--accent);}
body.haro-service-page .haro-rd img{max-width:100%; height:auto;}
body.haro-service-page .haro-rd blockquote{margin:0; background:none; border:0; padding:0; font-style:normal;}

/* ---- Layout ---- */
.haro-rd .haro-container{max-width:var(--container); margin:0 auto; padding-inline:var(--gutter);}
.haro-rd .haro-container.wide{max-width:var(--container-wide);}
.haro-rd .haro-container.prose{max-width:var(--container-prose);}
/* Divi resetea el padding de los contenedores internos con alta especificidad;
   forzamos el gutter horizontal para que el contenido no se pegue a los bordes
   ni la tarjeta del hero se salga y se recorte. */
body.haro-service-page .haro-rd .haro-container,
body.haro-service-page .haro-rd .haro-container.wide,
body.haro-service-page .haro-rd .haro-container.prose{
  padding-left:clamp(1.35rem, .6rem + 3.4vw, 3.25rem) !important;
  padding-right:clamp(1.35rem, .6rem + 3.4vw, 3.25rem) !important;
}
.haro-rd .haro-section{padding-block:var(--section-y);}
.haro-rd .bg-page{background:var(--surface-page);}
.haro-rd .bg-alt{background:var(--surface-alt);}
.haro-rd .bg-dark{background:var(--surface-dark);}
.haro-rd .bg-darker{background:var(--surface-darker);}
.haro-rd .bg-wine{background:var(--surface-wine);}
.haro-rd .haro-grid{display:grid; gap:var(--grid-gap);}
.haro-rd .haro-grid.cols2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
.haro-rd .haro-grid.cols3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.haro-rd .haro-grid.cols4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
.haro-rd .mt-lg{margin-top:2.75rem;}
.haro-rd .mt-md{margin-top:2rem;}

/* ---- Iconos ---- */
.haro-rd .haro-ic{display:inline-flex; align-items:center; justify-content:center; flex:none;}
.haro-rd .haro-ic svg{width:100%; height:100%; display:block;}

/* ---- Eyebrow ---- */
.haro-rd .haro-eyebrow{
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--font-label); font-weight:var(--weight-label);
  font-size:var(--eyebrow-size); letter-spacing:var(--eyebrow-tracking);
  text-transform:uppercase; line-height:1; color:var(--accent); margin:0;
}
.haro-rd .haro-eyebrow.center{justify-content:center;}
.haro-rd .haro-eyebrow::before{
  content:""; width:26px; height:var(--border-rule); background:var(--accent);
  flex:none; border-radius:2px;
}
.haro-rd .haro-eyebrow.no-rule::before{display:none;}
.haro-rd .on-dark .haro-eyebrow,
.haro-rd .haro-eyebrow.on-dark{color:var(--text-on-dark-muted);}

/* ---- Encabezados de sección ---- */
.haro-rd .haro-h1{font-family:var(--font-display); font-weight:var(--weight-display);
  font-size:var(--text-5xl); line-height:var(--leading-snug); letter-spacing:var(--tracking-tight);
  color:var(--text-heading); text-wrap:balance;}
.haro-rd .haro-h2{font-family:var(--font-display); font-weight:var(--weight-display);
  font-size:var(--text-4xl); line-height:var(--leading-snug); letter-spacing:var(--tracking-tight);
  color:var(--text-heading); text-wrap:balance;}
.haro-rd .haro-h3{font-family:var(--font-display); font-weight:var(--weight-display);
  font-size:var(--text-2xl); line-height:var(--leading-snug); color:var(--text-heading);}
.haro-rd .on-dark .haro-h1,.haro-rd .on-dark .haro-h2,.haro-rd .on-dark .haro-h3{color:var(--text-on-dark);}
.haro-rd .haro-lede{font-family:var(--font-body); font-size:var(--text-lg); line-height:var(--leading-normal);
  color:var(--text-muted); max-width:42rem; text-wrap:pretty; margin:0;}
.haro-rd .on-dark .haro-lede{color:var(--text-on-dark-muted);}
.haro-rd .haro-heading{display:flex; flex-direction:column; gap:1.1rem; align-items:flex-start;}
.haro-rd .haro-heading.center{align-items:center; text-align:center; max-width:48rem; margin-inline:auto;}

/* ---- Botones (del design system) ---- */
.haro-rd .haro-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family:var(--font-label); font-weight:var(--weight-label);
  text-transform:uppercase; letter-spacing:var(--tracking-label);
  text-decoration:none; line-height:1; white-space:nowrap; cursor:pointer;
  border:1px solid transparent; border-radius:var(--radius-sm); appearance:none;
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.haro-rd .haro-btn:focus-visible{outline:none; box-shadow:var(--ring);}
.haro-rd .haro-btn .haro-ic{width:16px; height:16px; transition:transform var(--dur-base) var(--ease-out);}
.haro-rd .haro-btn--sm{padding:9px 18px; font-size:.72rem;}
.haro-rd .haro-btn--md{padding:13px 26px; font-size:.8125rem;}
.haro-rd .haro-btn--lg{padding:17px 34px; font-size:.875rem; letter-spacing:var(--tracking-caps);}
.haro-rd .haro-btn--primary{background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-sm);}
.haro-rd .haro-btn--primary:hover{background:var(--accent-hover); transform:translateY(-1px); box-shadow:var(--shadow-md); color:#fff;}
.haro-rd .haro-btn--primary:active{transform:translateY(0) scale(.99); background:var(--accent-press);}
.haro-rd .haro-btn--primary:hover .haro-ic{transform:translateX(3px);}
.haro-rd .haro-btn--outline{background:transparent; color:var(--text-heading); border-color:var(--border-strong);}
.haro-rd .haro-btn--outline:hover{border-color:var(--accent); color:var(--accent);}
.haro-rd .haro-btn--outline.is-ondark{color:var(--text-on-dark); border-color:var(--border-on-dark);}
.haro-rd .haro-btn--outline.is-ondark:hover{border-color:var(--text-on-dark); color:#fff;}
.haro-rd .haro-btn--ghost{background:transparent; color:var(--accent); padding-left:0; padding-right:0; box-shadow:none;}
.haro-rd .haro-btn--ghost.is-ondark{color:var(--text-on-dark);}
.haro-rd .haro-btn--ghost:hover .haro-ic{transform:translateX(4px);}
.haro-rd .haro-btn-row{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:.3rem;}

/* ---- Hero (split panel + foto real) ---- */
.haro-rd .haro-hero-rd{position:relative; overflow:hidden; background:var(--ink-950);}
.haro-rd .haro-hero-rd__img{position:absolute; inset:0; background-size:cover; background-position:center;}
.haro-rd .haro-hero-rd__scrim{position:absolute; inset:0; background:var(--scrim-side);}
.haro-rd .haro-hero-rd__grid{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:3rem;
  align-items:center; min-height:clamp(440px,58vh,600px); padding-block:clamp(3rem,6vw,5.25rem);}
.haro-rd .haro-hero-rd__grid.solo{grid-template-columns:1fr;}
.haro-rd .haro-hero-rd__copy{max-width:40rem; display:flex; flex-direction:column; gap:1.35rem;}
.haro-rd .haro-hero-rd__title{margin:0; font-family:var(--font-display); font-weight:var(--weight-display);
  font-size:var(--text-6xl); line-height:var(--leading-tight); letter-spacing:var(--tracking-tight);
  color:var(--text-on-dark); text-wrap:balance;}
.haro-rd .haro-hero-rd__lede{margin:0; font-family:var(--font-body); font-size:var(--text-lg);
  line-height:var(--leading-normal); color:var(--text-on-dark-muted); max-width:42rem;}
.haro-rd .haro-hero-rd__aside{justify-self:end; width:100%; max-width:26rem;}
@media(max-width:920px){
  .haro-rd .haro-hero-rd__grid{grid-template-columns:1fr; gap:2rem; min-height:0;}
  .haro-rd .haro-hero-rd__aside{justify-self:stretch;}
}

/* ---- FeatureCard ---- */
.haro-rd .haro-feature{display:flex; flex-direction:column; gap:1rem; align-items:flex-start;}
.haro-rd .haro-feature.center{align-items:center; text-align:center;}
.haro-rd .haro-feature--card{padding:var(--card-pad); background:var(--surface-card);
  border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); height:100%;}
.haro-rd .on-dark .haro-feature--card{background:var(--ink-800); border-color:var(--border-on-dark); box-shadow:none;}
.haro-rd .haro-feature__coin{width:54px; height:54px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-md); background:var(--accent-soft); color:var(--accent);}
.haro-rd .on-dark .haro-feature__coin{background:rgba(255,255,255,.06); color:var(--red-500); border:1px solid var(--border-on-dark);}
.haro-rd .haro-feature__coin .haro-ic{width:26px; height:26px;}
.haro-rd .haro-feature h3{font-family:var(--font-display); font-weight:var(--weight-display);
  font-size:var(--text-xl); line-height:var(--leading-snug); color:var(--text-heading);}
.haro-rd .on-dark .haro-feature h3{color:var(--text-on-dark);}
.haro-rd .haro-feature p{font-family:var(--font-body); font-size:var(--text-md); line-height:var(--leading-normal);
  max-width:38ch; color:var(--text-muted);}
.haro-rd .on-dark .haro-feature p{color:var(--text-on-dark-muted);}

/* ---- AreaCard (del design system) ---- */
.haro-rd .haro-area{display:flex; flex-direction:column; gap:14px; padding:var(--card-pad);
  background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  text-decoration:none; box-shadow:var(--shadow-xs); position:relative; overflow:hidden; height:100%;
  transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);}
.haro-rd .haro-area::before{content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform var(--dur-base) var(--ease-out);}
.haro-rd .haro-area:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--border-strong);}
.haro-rd .haro-area:hover::before{transform:scaleX(1);}
.haro-rd .haro-area:focus-visible{outline:none; box-shadow:var(--ring);}
.haro-rd .haro-area .coin{width:52px; height:52px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-md); background:var(--accent-soft); color:var(--accent);
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);}
.haro-rd .haro-area .coin .haro-ic{width:26px; height:26px;}
.haro-rd .haro-area:hover .coin{background:var(--accent); color:#fff;}
.haro-rd .haro-area h3{font-family:var(--font-display); font-weight:var(--weight-display);
  font-size:var(--text-2xl); line-height:1.14; color:var(--text-heading); letter-spacing:-.01em;}
.haro-rd .haro-area p{font-family:var(--font-body); font-size:var(--text-md); line-height:var(--leading-normal); color:var(--text-muted);}
.haro-rd .haro-area .more{margin-top:auto; padding-top:4px; display:flex; align-items:center; gap:.5em;
  font-family:var(--font-label); text-transform:uppercase; letter-spacing:.14em; font-size:.75rem; font-weight:600; color:var(--accent);}
.haro-rd .haro-area .more .haro-ic{width:16px; height:16px; transition:transform var(--dur-base) var(--ease-out);}
.haro-rd .haro-area:hover .more .haro-ic{transform:translateX(4px);}

/* ---- ContactCard (elemento firma) ---- */
.haro-rd .haro-contact{display:flex; flex-direction:column; gap:1.25rem; padding:calc(var(--card-pad) + 4px);
  border-radius:var(--radius-lg); position:relative; overflow:hidden; max-width:26rem;
  background:var(--surface-card); border:1px solid var(--border-soft); box-shadow:var(--shadow-float);}
.haro-rd .haro-contact--dark{background:var(--ink-900); border:1px solid var(--border-on-dark); box-shadow:var(--shadow-lg);}
.haro-rd .haro-contact--wine{background:var(--surface-wine); border:1px solid var(--border-on-dark); box-shadow:var(--shadow-lg);}
.haro-rd .haro-contact::before{content:""; position:absolute; top:0; left:0; height:3px; width:100%; background:var(--accent);}
.haro-rd .haro-contact__eyebrow{display:flex; align-items:center; gap:.6rem; font-family:var(--font-label);
  font-weight:var(--weight-label); text-transform:uppercase; letter-spacing:var(--tracking-label);
  font-size:var(--eyebrow-size); color:var(--accent);}
.haro-rd .haro-contact--dark .haro-contact__eyebrow,
.haro-rd .haro-contact--wine .haro-contact__eyebrow{color:var(--red-500);}
.haro-rd .haro-contact__title{font-family:var(--font-display); font-weight:var(--weight-display);
  font-size:var(--text-2xl); line-height:var(--leading-snug); color:var(--text-heading);}
.haro-rd .haro-contact--dark .haro-contact__title,
.haro-rd .haro-contact--wine .haro-contact__title{color:var(--text-on-dark);}
.haro-rd .haro-contact__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.9rem;}
.haro-rd .haro-contact__row{display:flex; gap:.85rem; align-items:flex-start;}
.haro-rd .haro-contact__ic{width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); background:var(--accent-soft); color:var(--accent);}
.haro-rd .haro-contact--dark .haro-contact__ic,
.haro-rd .haro-contact--wine .haro-contact__ic{background:rgba(255,255,255,.06); color:var(--red-500);}
.haro-rd .haro-contact__ic .haro-ic{width:19px; height:19px;}
.haro-rd .haro-contact__rowbody{display:flex; flex-direction:column; gap:2px; padding-top:2px;}
.haro-rd .haro-contact__label{font-family:var(--font-label); text-transform:uppercase; letter-spacing:.12em;
  font-size:.6875rem; font-weight:600; color:var(--text-muted);}
.haro-rd .haro-contact--dark .haro-contact__label,
.haro-rd .haro-contact--wine .haro-contact__label{color:var(--text-on-dark-muted);}
.haro-rd .haro-contact__value{font-family:var(--font-body); font-size:var(--text-md); font-weight:600; color:var(--text-heading); line-height:1.4;}
.haro-rd .haro-contact--dark .haro-contact__value,
.haro-rd .haro-contact--wine .haro-contact__value{color:var(--text-on-dark);}
.haro-rd a.haro-contact__value:hover{color:var(--accent);}
.haro-rd .haro-contact--dark a.haro-contact__value:hover,
.haro-rd .haro-contact--wine a.haro-contact__value:hover{color:#fff;}

/* ---- Testimonial ---- */
.haro-rd .haro-quote{margin:0; display:flex; flex-direction:column; gap:1.1rem; padding:var(--card-pad);
  background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); position:relative; height:100%;}
.haro-rd .on-dark .haro-quote{background:var(--ink-800); border-color:var(--border-on-dark); box-shadow:none;}
.haro-rd .haro-quote__mark{font-family:var(--font-display); font-weight:800; font-size:3.25rem; line-height:.5; height:1.4rem; color:var(--accent);}
.haro-rd .haro-quote__stars{display:flex; gap:3px; color:var(--star); font-size:1rem; letter-spacing:1px;}
.haro-rd .haro-quote blockquote{font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:var(--text-xl); line-height:var(--leading-snug); color:var(--text-heading); text-wrap:pretty;}
.haro-rd .on-dark .haro-quote blockquote{color:var(--text-on-dark);}
.haro-rd .haro-quote figcaption{display:flex; flex-direction:column; gap:1px; margin-top:auto;}
.haro-rd .haro-quote__author{font-family:var(--font-label); text-transform:uppercase; letter-spacing:.14em;
  font-size:.8125rem; font-weight:600; color:var(--text-heading);}
.haro-rd .on-dark .haro-quote__author{color:var(--text-on-dark);}

/* ---- Callout ---- */
.haro-rd .haro-callout{display:flex; flex-direction:column; gap:.7rem; padding:calc(var(--card-pad) - 4px);
  border-radius:var(--radius-md); border:1px solid var(--accent-line); background:var(--accent-soft);}
.haro-rd .haro-callout--neutral{background:var(--sand-100); border-color:var(--border);}
.haro-rd .haro-callout__head{display:flex; align-items:center; gap:.6rem;}
.haro-rd .haro-callout__chip{width:30px; height:30px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); background:var(--accent); color:#fff;}
.haro-rd .haro-callout--neutral .haro-callout__chip{background:var(--ink-800);}
.haro-rd .haro-callout__chip .haro-ic{width:17px; height:17px;}
.haro-rd .haro-callout__label{font-family:var(--font-label); text-transform:uppercase; letter-spacing:.14em;
  font-size:.8125rem; font-weight:600; color:var(--accent);}
.haro-rd .haro-callout--neutral .haro-callout__label{color:var(--text-heading);}
.haro-rd .haro-callout__body{font-family:var(--font-body); font-size:var(--text-md); line-height:var(--leading-normal); color:var(--text-body);}
.haro-rd .haro-callout__body strong{color:var(--text-heading); font-weight:700;}

/* ---- FAQ (acordeón) ---- */
.haro-rd .haro-faq{display:flex; flex-direction:column; border-top:1px solid var(--border);}
.haro-rd .haro-faq__item{border-bottom:1px solid var(--border);}
.haro-rd .haro-faq__q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:none; border:0; cursor:pointer; text-align:left; padding:1.2rem 0;
  font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--text-xl); line-height:1.32; color:var(--text-heading);}
.haro-rd .haro-faq__q:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--radius-sm);}
.haro-rd .haro-faq__ic{flex:none; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid var(--border-strong); color:var(--accent);
  transition:transform var(--dur-base) var(--ease-out),background var(--dur-base),color var(--dur-base),border-color var(--dur-base);}
.haro-rd .haro-faq__ic .haro-ic{width:16px; height:16px;}
.haro-rd .haro-faq__item.open .haro-faq__ic{background:var(--accent); color:#fff; border-color:var(--accent); transform:rotate(180deg);}
.haro-rd .haro-faq__panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur-base) var(--ease-out);}
.haro-rd .haro-faq__item.open .haro-faq__panel{grid-template-rows:1fr;}
.haro-rd .haro-faq__inner{overflow:hidden;}
.haro-rd .haro-faq__a{padding:0 0 1.35rem; font-family:var(--font-body); font-size:var(--text-md);
  line-height:var(--leading-relaxed); color:var(--text-body); max-width:70ch;}
.haro-rd .haro-faq__a p{margin:0 0 .9rem;}
.haro-rd .haro-faq__a p:last-child{margin-bottom:0;}

/* ---- ProcessSteps ---- */
.haro-rd .haro-steps{display:flex; flex-direction:column;}
.haro-rd .haro-steps__item{position:relative; display:grid; grid-template-columns:auto 1fr; gap:1.25rem; padding-bottom:2rem;}
.haro-rd .haro-steps__item:last-child{padding-bottom:0;}
.haro-rd .haro-steps__rail{display:flex; flex-direction:column; align-items:center;}
.haro-rd .haro-steps__num{width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:700; font-size:1.15rem; box-shadow:var(--shadow-sm);}
.haro-rd .haro-steps__line{flex:1; width:2px; background:var(--border-strong); margin-top:8px; min-height:14px;}
.haro-rd .haro-steps__item:last-child .haro-steps__line{display:none;}
.haro-rd .haro-steps__body{padding-top:7px; display:flex; flex-direction:column; gap:.4rem;}
.haro-rd .haro-steps__meta{font-family:var(--font-label); text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; font-weight:600; color:var(--accent);}
.haro-rd .haro-steps h3{font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--text-2xl); line-height:1.15; color:var(--text-heading); letter-spacing:-.01em;}
.haro-rd .haro-steps p{font-family:var(--font-body); font-size:var(--text-md); line-height:var(--leading-normal); color:var(--text-muted); max-width:58ch;}

/* ---- CTA banner ---- */
.haro-rd .haro-cta{position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:var(--ink-900); padding:clamp(2.75rem,2rem + 4vw,5rem) var(--card-pad);}
.haro-rd .haro-cta--wine{background:var(--surface-wine);}
.haro-rd .haro-cta--red{background:var(--accent);}
.haro-rd .haro-cta__inner{position:relative; display:flex; flex-direction:column; gap:1.35rem; align-items:center;
  text-align:center; max-width:46rem; margin-inline:auto;}
.haro-rd .haro-cta__title{margin:0; font-family:var(--font-display); font-weight:var(--weight-display);
  font-size:var(--text-5xl); line-height:var(--leading-tight); letter-spacing:var(--tracking-tight); color:var(--text-on-dark); text-wrap:balance;}
.haro-rd .haro-cta__text{margin:0; font-family:var(--font-body); font-size:var(--text-lg); line-height:var(--leading-normal); color:var(--text-on-dark-muted); max-width:44rem;}
.haro-rd .haro-cta--red .haro-cta__text{color:rgba(255,255,255,.86);}
.haro-rd .haro-cta__row{display:flex; flex-wrap:wrap; gap:.85rem; margin-top:.35rem; justify-content:center;}

/* ---- Prosa (contenido SEO largo) ---- */
.haro-rd .haro-prose{color:var(--text-body);}
.haro-rd .haro-prose > * + *{margin-top:1.2rem;}
.haro-rd .haro-prose p{font-family:var(--font-body); font-size:var(--text-md); line-height:var(--leading-relaxed);}
.haro-rd .haro-prose h2{margin:2.6rem 0 0; font-family:var(--font-display); font-weight:var(--weight-display);
  font-size:var(--text-3xl); line-height:var(--leading-snug); letter-spacing:var(--tracking-tight); color:var(--text-heading);}
.haro-rd .haro-prose h3{margin:1.9rem 0 0; font-family:var(--font-display); font-weight:var(--weight-display);
  font-size:var(--text-xl); line-height:var(--leading-snug); color:var(--text-heading);}
.haro-rd .haro-prose strong{color:var(--text-heading); font-weight:700;}
.haro-rd .haro-prose a{color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
.haro-rd .haro-prose a:hover{color:var(--accent-hover);}
.haro-rd .haro-prose ul{padding-left:0; display:flex; flex-direction:column; gap:.7rem; list-style:none;}
.haro-rd .haro-prose ul li{position:relative; padding-left:1.6rem; font-family:var(--font-body); font-size:var(--text-md); line-height:var(--leading-normal);}
.haro-rd .haro-prose ul li::before{content:""; position:absolute; left:.2rem; top:.7em; width:7px; height:7px; background:var(--accent); border-radius:50%;}
.haro-rd .haro-prose ol{padding-left:0; display:flex; flex-direction:column; gap:.7rem; list-style:none; counter-reset:hp;}
.haro-rd .haro-prose ol li{position:relative; padding-left:1.9rem; counter-increment:hp; font-family:var(--font-body); font-size:var(--text-md); line-height:var(--leading-normal);}
.haro-rd .haro-prose ol li::before{content:counter(hp) "."; position:absolute; left:0; top:0; color:var(--accent); font-weight:700; font-family:var(--font-display);}
.haro-rd .haro-prose blockquote{margin:1.6rem 0; padding:1.1rem 1.5rem; border-left:3px solid var(--accent);
  background:var(--accent-soft); border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-family:var(--font-display); font-style:italic; font-size:var(--text-lg); line-height:1.5; color:var(--text-heading);}
.haro-rd .haro-prose blockquote p{margin:0; font-family:inherit; font-size:inherit; line-height:inherit;}

/* ---- Tabla ---- */
.haro-rd .haro-table-wrap{overflow-x:auto; margin:0;}
.haro-rd .haro-table{width:100%; border-collapse:collapse; font-family:var(--font-body); font-size:var(--text-base);
  border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;}
.haro-rd .haro-table th{text-align:left; background:var(--ink-900); color:var(--text-on-dark); font-family:var(--font-label);
  text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; font-weight:600; padding:.85rem 1rem;}
.haro-rd .haro-table td{padding:.85rem 1rem; border-top:1px solid var(--border); vertical-align:top; color:var(--text-body); line-height:1.5;}
.haro-rd .haro-table tbody tr:nth-child(even) td{background:var(--sand-50);}
.haro-rd .haro-table td strong{color:var(--text-heading);}

/* ---- Dos columnas (intro band / servicios) ---- */
.haro-rd .haro-split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start;}
.haro-rd .haro-split.center{align-items:center;}
@media(max-width:860px){.haro-rd .haro-split{grid-template-columns:1fr;}}

/* ---- Lista de servicios (herencias) ---- */
.haro-rd .haro-svclist{list-style:none; padding:0; display:flex; flex-direction:column; gap:1.1rem;}
.haro-rd .haro-svclist li{display:flex; flex-direction:column; gap:3px;}
.haro-rd .haro-svclist strong{font-family:var(--font-display); font-size:var(--text-lg); color:var(--text-heading); font-weight:var(--weight-display);}
.haro-rd .haro-svclist span{color:var(--text-muted); line-height:var(--leading-normal); font-family:var(--font-body);}

/* ---- Pull-quote (cita destacada, centrada) ---- */
.haro-rd .haro-pullquote{margin:clamp(2.5rem,2rem + 2vw,3.5rem) auto 0; max-width:52rem; text-align:center;
  font-family:var(--font-display); font-style:italic; font-weight:500; font-size:var(--text-2xl);
  line-height:1.4; color:var(--text-heading); position:relative; padding-top:1.5rem;}
.haro-rd .haro-pullquote::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:44px; height:3px; background:var(--accent); border-radius:2px;}

/* ---- Lead / entradilla ---- */
.haro-rd .haro-lead{font-family:var(--font-body); font-size:var(--text-xl); line-height:1.62; color:var(--text-body); max-width:46rem;}
.haro-rd .haro-lead strong{color:var(--text-heading); font-weight:700;}
.haro-rd .haro-lead.center{margin-inline:auto; text-align:center;}

/* ---- Tarjeta lateral (asides de 2 columnas) ---- */
.haro-rd .haro-sidecard{background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--card-pad); display:flex; flex-direction:column; gap:1.4rem;}
.haro-rd .haro-sidecard--wine{background:var(--surface-wine); border-color:var(--border-on-dark); box-shadow:var(--shadow-lg);}
.haro-rd .haro-featurerow{display:flex; gap:1rem; align-items:flex-start;}
.haro-rd .haro-featurerow .haro-feature__coin{width:46px; height:46px;}
.haro-rd .haro-featurerow .haro-feature__coin .haro-ic{width:22px; height:22px;}
.haro-rd .haro-featurerow h4{font-family:var(--font-display); font-size:var(--text-lg); color:var(--text-heading); margin:0 0 .25rem; font-weight:var(--weight-display); line-height:1.25;}
.haro-rd .haro-featurerow p{font-family:var(--font-body); font-size:var(--text-base); color:var(--text-muted); margin:0; line-height:1.55;}
.haro-rd .haro-sidecard--wine .haro-featurerow h4{color:var(--text-on-dark);}
.haro-rd .haro-sidecard--wine .haro-featurerow p{color:var(--text-on-dark-muted);}
.haro-rd .haro-sidecard--wine .haro-feature__coin{background:rgba(255,255,255,.08); color:var(--red-500); border:1px solid var(--border-on-dark);}

/* ---- Checklist con icono (sustituye listas "por qué elegir") ---- */
.haro-rd .haro-checklist{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.1rem; list-style:none; padding:0;}
.haro-rd .haro-checklist li{display:flex; gap:.85rem; align-items:flex-start; padding:1.1rem 1.2rem; background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-xs);}
.haro-rd .on-dark .haro-checklist li{background:var(--ink-800); border-color:var(--border-on-dark); box-shadow:none;}
.haro-rd .haro-checklist .haro-ic{width:22px; height:22px; color:var(--accent); flex:none; margin-top:2px;}
.haro-rd .on-dark .haro-checklist .haro-ic{color:var(--red-500);}
.haro-rd .haro-checklist b{font-family:var(--font-display); font-weight:var(--weight-display); color:var(--text-heading); display:block; margin-bottom:.15rem; font-size:var(--text-md);}
.haro-rd .on-dark .haro-checklist b{color:var(--text-on-dark);}
.haro-rd .haro-checklist span{font-family:var(--font-body); font-size:var(--text-base); color:var(--text-muted); line-height:1.5;}
.haro-rd .on-dark .haro-checklist span{color:var(--text-on-dark-muted);}

/* ---- Tarjetas de enlaces internos ---- */
.haro-rd .haro-linkcard{padding:var(--card-pad); background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);}
.haro-rd .haro-linkcard__title{font-family:var(--font-display); font-weight:var(--weight-display); font-size:var(--text-xl); color:var(--text-heading); margin-bottom:.9rem;}
.haro-rd .haro-linklist{list-style:none; padding:0; display:flex; flex-direction:column;}
.haro-rd .haro-linklist li{border-bottom:1px solid var(--border-soft);}
.haro-rd .haro-linklist li:last-child{border-bottom:0;}
.haro-rd .haro-linklist a{display:flex; align-items:center; gap:.6rem; justify-content:space-between; padding:.7rem 0;
  font-family:var(--font-body); font-size:var(--text-md); color:var(--text-body); font-weight:600;
  transition:color var(--dur-base) var(--ease-out);}
.haro-rd .haro-linklist a:hover{color:var(--accent);}
.haro-rd .haro-linklist a .haro-ic{width:15px; height:15px; color:var(--accent); flex:none; transition:transform var(--dur-base) var(--ease-out);}
.haro-rd .haro-linklist a:hover .haro-ic{transform:translateX(3px);}

/* ---- Imagen enmarcada ---- */
.haro-rd .haro-frame{position:relative; aspect-ratio:3/4; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); background-size:cover; background-position:center;}

/* ---- Overrides de color de botón/enlace (defensa frente al color de enlace de Divi) ----
   Divi asigna a los <a> el rojo de marca con especificidad alta; para los botones
   rellenos eso pintaría texto rojo sobre fondo rojo. Forzamos el color correcto. ---- */
body.haro-service-page .haro-rd .haro-btn--primary,
body.haro-service-page .haro-rd .haro-btn--primary:hover,
body.haro-service-page .haro-rd .haro-btn--primary:active,
body.haro-service-page .haro-rd .haro-btn--primary:focus{color:#fff !important;}
body.haro-service-page .haro-rd .haro-btn--outline{color:var(--text-heading) !important;}
body.haro-service-page .haro-rd .haro-btn--outline:hover{color:var(--accent) !important;}
body.haro-service-page .haro-rd .haro-btn--outline.is-ondark{color:var(--text-on-dark) !important;}
body.haro-service-page .haro-rd .haro-btn--outline.is-ondark:hover{color:#fff !important;}
body.haro-service-page .haro-rd .haro-btn--ghost{color:var(--accent) !important;}
body.haro-service-page .haro-rd .haro-btn--ghost.is-ondark{color:var(--text-on-dark) !important;}
/* Enlaces dentro de tarjetas oscuras/valores de contacto */
body.haro-service-page .haro-rd .haro-contact--dark a.haro-contact__value,
body.haro-service-page .haro-rd .haro-contact--wine a.haro-contact__value{color:var(--text-on-dark) !important;}

/* ==========================================================================
   CAPA DEFENSIVA CONTRA DIVI  (medido: Divi resetea padding a 0 y font-size
   de títulos a 16px con reglas de alta especificidad; aquí re-declaramos con
   body.haro-service-page .haro-rd + !important, que le gana al tema).
   ========================================================================== */

/* --- Bandas / secciones: recuperar el aire vertical --- */
body.haro-service-page .haro-rd .haro-section{
  padding-top:var(--section-y) !important;
  padding-bottom:var(--section-y) !important;
}

/* --- Contenedores internos: nunca a 0 --- */
body.haro-service-page .haro-rd .haro-container.prose{max-width:var(--container-prose) !important;}

/* --- Padding de TODAS las tarjetas / cajas --- */
body.haro-service-page .haro-rd .haro-contact{padding:calc(var(--card-pad) + 6px) !important;}
body.haro-service-page .haro-rd .haro-sidecard{padding:var(--card-pad) !important;}
body.haro-service-page .haro-rd .haro-feature--card{padding:var(--card-pad) !important;}
body.haro-service-page .haro-rd .haro-callout{padding:calc(var(--card-pad) - 2px) !important;}
body.haro-service-page .haro-rd .haro-quote{padding:var(--card-pad) !important;}
body.haro-service-page .haro-rd .haro-linkcard{padding:var(--card-pad) !important;}
body.haro-service-page .haro-rd .haro-checklist li{padding:1.15rem 1.25rem !important;}
body.haro-service-page .haro-rd .haro-cta{padding:clamp(2.75rem,2rem + 4vw,5rem) var(--card-pad) !important;}
body.haro-service-page .haro-rd .haro-faq__q{padding:1.2rem 0 !important;}
body.haro-service-page .haro-rd .haro-faq__a{padding:0 0 1.35rem !important;}

/* --- Coins de icono: tamaño fijo (Divi también los aplasta) --- */
body.haro-service-page .haro-rd .haro-feature__coin{padding:0 !important;}
body.haro-service-page .haro-rd .haro-contact__ic,
body.haro-service-page .haro-rd .haro-callout__chip,
body.haro-service-page .haro-rd .haro-steps__num{padding:0 !important;}

/* --- Tipografía: Divi mete font-size:16px en los títulos; forzamos escala --- */
body.haro-service-page .haro-rd .haro-hero-rd__title{font-size:var(--text-6xl) !important; line-height:var(--leading-tight) !important;}
body.haro-service-page .haro-rd .haro-h1{font-size:var(--text-5xl) !important; line-height:var(--leading-snug) !important;}
body.haro-service-page .haro-rd .haro-h2,
body.haro-service-page .haro-rd .haro-cta__title{font-size:var(--text-4xl) !important; line-height:var(--leading-snug) !important;}
body.haro-service-page .haro-rd .haro-h3,
body.haro-service-page .haro-rd .haro-area h3,
body.haro-service-page .haro-rd .haro-steps h3,
body.haro-service-page .haro-rd .haro-contact__title{font-size:var(--text-2xl) !important; line-height:var(--leading-snug) !important;}
body.haro-service-page .haro-rd .haro-feature h3,
body.haro-service-page .haro-rd .haro-feature--card h3,
body.haro-service-page .haro-rd .haro-quote blockquote,
body.haro-service-page .haro-rd .haro-faq__q{font-size:var(--text-xl) !important;}
body.haro-service-page .haro-rd .haro-hero-rd__lede,
body.haro-service-page .haro-rd .haro-lede,
body.haro-service-page .haro-rd .haro-lead{font-size:var(--text-lg) !important;}
body.haro-service-page .haro-rd .haro-lead{font-size:var(--text-xl) !important; line-height:1.62 !important;}
body.haro-service-page .haro-rd .haro-prose p,
body.haro-service-page .haro-rd .haro-prose li,
body.haro-service-page .haro-rd .haro-feature p,
body.haro-service-page .haro-rd .haro-faq__a{font-size:var(--text-md) !important;}

/* --- Márgenes internos de prosa (Divi los pone a 0 y todo se junta) --- */
body.haro-service-page .haro-rd .haro-prose > * + *{margin-top:1.2rem !important;}
body.haro-service-page .haro-rd .haro-prose h2{margin-top:2.6rem !important;}
body.haro-service-page .haro-rd .haro-prose h3{margin-top:1.9rem !important;}
body.haro-service-page .haro-rd .haro-steps__item{padding-bottom:2rem !important;}
body.haro-service-page .haro-rd .haro-steps__item:last-child{padding-bottom:0 !important;}

/* --- Pull-quote: el reset de blockquote mata su margin:auto; lo recuperamos --- */
body.haro-service-page .haro-rd .haro-pullquote{
  margin-left:auto !important; margin-right:auto !important;
  margin-top:clamp(2.5rem, 2rem + 2vw, 3.5rem) !important;
  max-width:52rem !important; text-align:center !important;
}

/* --- Contraste en bandas oscuras: cualquier tarjeta/feature dentro de .on-dark
   debe tener texto claro, tanto .haro-feature como .haro-feature--card (el agente
   puede usar cualquiera). Sin esto el texto sale oscuro sobre negro = ilegible. --- */
body.haro-service-page .haro-rd .on-dark .haro-feature--card{background:var(--ink-800) !important; border-color:var(--border-on-dark) !important; box-shadow:none !important;}
body.haro-service-page .haro-rd .on-dark .haro-feature h3,
body.haro-service-page .haro-rd .on-dark .haro-feature--card h3,
body.haro-service-page .haro-rd .on-dark .haro-feature h4,
body.haro-service-page .haro-rd .on-dark .haro-feature--card h4{color:var(--text-on-dark) !important;}
body.haro-service-page .haro-rd .on-dark .haro-feature p,
body.haro-service-page .haro-rd .on-dark .haro-feature--card p{color:var(--text-on-dark-muted) !important;}
body.haro-service-page .haro-rd .on-dark .haro-feature__coin{background:rgba(255,255,255,.08) !important; color:var(--red-500) !important; border:1px solid var(--border-on-dark) !important;}
/* prosa y enlaces sobre banda oscura */
body.haro-service-page .haro-rd .on-dark .haro-prose p,
body.haro-service-page .haro-rd .on-dark .haro-prose li{color:var(--text-on-dark-muted) !important;}
body.haro-service-page .haro-rd .on-dark .haro-prose strong{color:var(--text-on-dark) !important;}

/* --- Grids: recuperar el gap si Divi lo colapsa --- */
body.haro-service-page .haro-rd .haro-grid{gap:var(--grid-gap) !important;}
body.haro-service-page .haro-rd .haro-split{gap:clamp(2rem,5vw,4rem) !important;}
body.haro-service-page .haro-rd .mt-lg{margin-top:2.75rem !important;}
body.haro-service-page .haro-rd .mt-md{margin-top:2rem !important;}

/* ---- Accesibilidad: reduce motion ---- */
@media(prefers-reduced-motion:reduce){
  .haro-rd *{transition:none !important; animation:none !important;}
}