/*!
 * Habacuck Productora Elementor Kit — sistema visual
 * Archivo + lima sobre papel, con grano de película.
 * Todas las clases son opcionales: se aplican desde Avanzado > Clases CSS
 * de cada sección, columna o widget, así que todo sigue siendo editable.
 */

:root{
  --hbp-paper:#FBFBFB;
  --hbp-paper-2:#F2F3EF;
  --hbp-ink:#141518;
  --hbp-ink-soft:#55575C;
  --hbp-ink-faint:#8A8C90;
  --hbp-rule:#E0E2DC;
  --hbp-lima:#BDFB15;
  --hbp-lima-glow:#E5FF7E;
  --hbp-lima-edge:#A6E00A;
  --hbp-bosque:#1B6B4C;
  --hbp-bosque-deep:#124B36;
  --hbp-coral:#E06666;
  --hbp-coral-ink:#B84A4A;
  --hbp-font-display:'Archivo', "Helvetica Neue", "Arial Nova", "Segoe UI", system-ui, sans-serif;
  --hbp-font-body:'Archivo', system-ui, sans-serif;
  --hbp-font-marker:'Caveat', "Bradley Hand", "Chalkboard SE", cursive;
  --hbp-ease:cubic-bezier(.16,1,.3,1);
}

/* El cuerpo hereda la tipográfica de texto; cualquier ajuste que hagas en
   Elementor sobre el widget gana, porque apunta al elemento directamente. */
.hbp-section{ position:relative; font-family:var(--hbp-font-body); }

/* Grano de película (se activa desde los ajustes del plugin) */
body.hbp-grain::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:9999;
  opacity:.045;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- marca */
.hbp-kicker{
  display:inline-flex; align-items:center; gap:.5em; margin:0; width:fit-content; max-width:fit-content;
}
.hbp-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--hbp-lima);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--hbp-lima) 30%, transparent);
  display:inline-block; flex:0 0 auto;
}
.hbp-dot-lg{
  width:.55rem; height:.55rem; border-radius:999px;
  background:var(--hbp-lima); display:inline-block; margin-left:.34rem;
  transition:transform .3s var(--hbp-ease);
}
.hbp-logo:hover .hbp-dot-lg{ transform:scale(1.5); }

/* Resaltador lima, con las esquinas irregulares del original */
.hbp-mark{
  background:var(--hbp-lima);
  color:var(--hbp-ink);
  padding:.02em .18em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  border-radius:3px 8px 5px 9px / 9px 4px 8px 4px;
  transform:rotate(-.6deg);
  display:inline-block;
}
.hbp-bi{ font-style:italic; font-weight:800; }

/* Stickers manuscritos */
.hbp-stickers{ display:flex; flex-wrap:wrap; gap:.8rem; margin:0; }
.hbp-sticker{
  font-family:var(--hbp-font-marker);
  background:var(--hbp-lima); color:var(--hbp-ink);
  font-size:.95rem; line-height:1;
  padding:.5em .85em; border-radius:999px;
  display:inline-block;
  border:1.5px solid var(--hbp-lima-edge);
  box-shadow:0 4px 10px color-mix(in srgb, var(--hbp-ink) 18%, transparent);
  transition:transform .25s var(--hbp-ease), box-shadow .25s var(--hbp-ease);
}
.hbp-sticker:nth-child(1){ transform:rotate(-2.5deg); }
.hbp-sticker:nth-child(2){ transform:rotate(1.8deg); }
.hbp-sticker:nth-child(3){ transform:rotate(-1.2deg); }
.hbp-sticker:hover{ transform:translateY(-2px) scale(1.04); box-shadow:0 8px 16px color-mix(in srgb, var(--hbp-ink) 22%, transparent); }

/* ---------------------------------------------------------------- botones */
.hbp-btn .elementor-button{
  display:inline-flex; align-items:center;
  transition:all .35s var(--hbp-ease);
}
.hbp-btn .elementor-button:hover{ transform:translateY(-2px); }
.hbp-btn--solid .elementor-button:hover{ box-shadow:0 12px 28px -6px rgba(189,251,21,.35); }
.hbp-btn--ghost .elementor-button:hover{ box-shadow:0 12px 28px -6px rgba(189,251,21,.4); }
/* El fondo de cada botón lo guarda Elementor por widget, no esta clase — así que un botón
   creado antes de unificar el verde se queda con el bosque viejo aunque el CSS cambie. Estas
   reglas mandan sobre eso para que CUALQUIER botón --solid, ya publicado o nuevo, use lima. */
.hbp-btn--solid .elementor-button{
  background-color:var(--hbp-ink) !important; border-color:var(--hbp-ink) !important; color:var(--hbp-paper) !important;
}
.hbp-btn--solid .elementor-button:hover{
  background-color:var(--hbp-lima) !important; border-color:var(--hbp-lima-edge) !important; color:var(--hbp-ink) !important;
}
.hbp-btn .elementor-button-icon{ transition:transform .3s var(--hbp-ease); }
.hbp-btn .elementor-button:hover .elementor-button-icon{ transform:translate(3px,-3px); }
.hbp-btn-row .elementor-column{ width:auto !important; flex:0 0 auto; }
.hbp-btn-row .elementor-container{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* ---------------------------------------------------------------- header */
body.hbp-sticky-header .hbp-header,
.hbp-header{
  position:sticky; top:0; z-index:99;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.hbp-nav{
  display:flex; align-items:center; justify-content:flex-end;
  gap:2rem; flex-wrap:wrap; margin:0;
}
.hbp-nav a{ color:var(--hbp-ink-soft); text-decoration:none; transition:color .25s ease; }
.hbp-nav a:hover{ color:var(--hbp-ink); }

/* ---------------------------------------------------------------- hero */
.hbp-hero{ overflow:hidden; }
/* El resplandor sigue al cursor dentro del hero: el JS solo actualiza las dos
   variables, así el navegador anima con transform (compositor, sin repintado). */
.hbp-hero::before{
  content:"";
  position:absolute; top:0; left:0;
  width:640px; height:640px;
  margin-left:-320px; margin-top:-320px;
  transform:translate3d(var(--hbp-glow-x, 200px), var(--hbp-glow-y, 260px), 0);
  background:radial-gradient(circle at center, var(--hbp-lima-glow), transparent 62%);
  opacity:.85; pointer-events:none;
  will-change:transform;
}
/* Sin puntero fino (tacto) o con movimiento reducido, queda quieto. */
@media (hover:none), (prefers-reduced-motion:reduce){
  .hbp-hero::before{ transform:translate3d(200px, 260px, 0); }
}
.hbp-hero > .elementor-container{ position:relative; z-index:1; }
/* Mismas medidas que el maquetado: el titular corta a 17 caracteres y la
   bajada a 46, que es lo que deja el aire a la derecha del hero.
   Va en max-width porque Elementor fuerza width:100% con más especificidad. */
.hbp-statement .elementor-heading-title{ text-wrap:balance; max-width:17ch; }
.hbp-lede{ max-width:46ch; }

/* ---------------------------------------------------------------- marquee */
.hbp-marquee{ overflow:hidden; }
.hbp-marquee-text{
  display:flex; width:max-content; margin:0;
  animation:hbp-marquee 24s linear infinite;
}
.hbp-marquee:hover .hbp-marquee-text{ animation-play-state:paused; }
.hbp-marquee span{
  padding:0 1.6rem; white-space:nowrap;
  display:inline-flex; align-items:center; gap:1.6rem;
}
.hbp-marquee span::after{ content:'\2726'; color:var(--hbp-coral); font-size:.8rem; }
@keyframes hbp-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------------------------------------------------------------- 01 frentes */
.hbp-card{
  position:relative; overflow:hidden;
}
.hbp-card > .elementor-widget-wrap,
.hbp-card > .elementor-element-populated{
  background:#FFFFFF;
  border:1px solid var(--hbp-rule);
  border-radius:1.5rem;
  padding:2.1rem 1.75rem !important;
  min-height:390px;
  transition:background-color .4s var(--hbp-ease), border-color .4s var(--hbp-ease),
             transform .4s var(--hbp-ease), box-shadow .4s var(--hbp-ease);
}
.hbp-card:hover > .elementor-widget-wrap,
.hbp-card:hover > .elementor-element-populated{
  background:var(--hbp-ink);
  border-color:var(--hbp-ink);
  transform:translateY(-8px);
  box-shadow:0 24px 48px -12px color-mix(in srgb, var(--hbp-ink) 32%, transparent);
}
.hbp-card-num{ transition:opacity .3s ease, transform .3s ease; }
.hbp-card-swap{
  position:absolute; top:2.4rem; left:1.75rem;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.hbp-card-swap{ display:inline-flex; align-items:center; gap:.5rem; margin:0; width:fit-content; max-width:fit-content; }
.hbp-card:hover .hbp-card-num{ opacity:0; transform:scale(.72) translateY(-10px); }
.hbp-card:hover .hbp-card-swap{ opacity:1; transform:translateY(0); }
.hbp-card:hover .hbp-card-title .elementor-heading-title{ color:#FFFFFF !important; }

.hbp-card-links{
  display:flex; flex-direction:column; gap:.7rem;
  margin:0; padding-top:1.35rem;
  border-top:1px solid var(--hbp-rule);
  transition:border-color .4s var(--hbp-ease);
}
.hbp-card:hover .hbp-card-links{ border-top-color:color-mix(in srgb, #FFFFFF 26%, transparent); }
.hbp-pill-link{
  display:inline-flex; align-items:center; justify-content:space-between; gap:.5rem;
  border:1px solid var(--hbp-ink); border-radius:999px;
  padding:.55rem 1.05rem;
  color:var(--hbp-ink); text-decoration:none;
  transition:all .25s var(--hbp-ease); width:fit-content; max-width:fit-content;
}
.hbp-card:hover .hbp-pill-link{ border-color:var(--hbp-lima); color:var(--hbp-lima); }
.hbp-card:hover .hbp-pill-link:hover{ background:var(--hbp-lima); color:var(--hbp-ink); transform:translateX(4px); }

/* ---------------------------------------------------------------- 02 nichos */
.hbp-xxl .elementor-heading-title{ display:block; }
.hbp-block{
  background:var(--hbp-lima); color:var(--hbp-ink);
  padding:.02em .16em; border-radius:16px;
  display:inline-block; margin-top:.08em;
}

/* ---------------------------------------------------------------- 03 casos */
.hbp-case{ position:relative; overflow:hidden; border-radius:1.5rem; }
.hbp-case > .elementor-widget-wrap,
.hbp-case > .elementor-element-populated{
  min-height:400px;
  border-radius:1.5rem;
  padding:2rem !important;
  overflow:hidden;
  transition:transform .45s var(--hbp-ease), box-shadow .45s var(--hbp-ease);
}
.hbp-case:hover > .elementor-widget-wrap,
.hbp-case:hover > .elementor-element-populated{
  transform:translateY(-8px);
  box-shadow:0 24px 48px -12px color-mix(in srgb, var(--hbp-ink) 35%, transparent);
}
.hbp-case-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin:0; }
.hbp-tag{
  display:inline-block;
  padding:.32em .75em; border-radius:999px;
  border:1px solid currentColor;
}

/* ---------------------------------------------------------------- 04 por qué */
.hbp-pill{
  display:inline-flex; align-items:center; gap:.5rem; margin:0;
  background:var(--hbp-paper-2); border:1px solid var(--hbp-rule);
  border-radius:999px; padding:.42rem .9rem; width:fit-content; max-width:fit-content;
}
.hbp-pill .hbp-dot{ background:var(--hbp-bosque); box-shadow:none; width:8px; height:8px; }
.hbp-rating{ margin:0; }
.hbp-rating-chip{
  display:inline-flex; align-items:center; gap:.75rem;
  background:var(--hbp-paper-2); border:1px solid var(--hbp-rule);
  border-radius:999px; padding:.55rem 1.1rem; width:fit-content; max-width:fit-content;
}
.hbp-rating-chip b{ font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; }
.hbp-rating-chip i{ font-style:normal; color:var(--hbp-bosque); font-size:.85rem; }
.hbp-rating-chip em{ font-style:normal; font-size:.68rem; font-weight:700; color:var(--hbp-ink-soft); }
.hbp-float img{ animation:hbp-float 5s ease-in-out infinite; }
@keyframes hbp-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* ---------------------------------------------------------------- footer */
.hbp-footer a{ text-decoration:none; }
.hbp-footer-title .hbp-footer-cta{
  color:var(--hbp-lima); display:inline-flex; align-items:center; gap:.55rem; width:fit-content; max-width:fit-content;
}
.hbp-footer-title .hbp-footer-cta:hover{ text-decoration:underline; }
.hbp-footer-title .hbp-arrow{ display:inline-block; transition:transform .3s var(--hbp-ease); }
.hbp-footer-title .hbp-footer-cta:hover .hbp-arrow{ transform:translate(6px,-6px); }
.hbp-footer-links{ display:flex; flex-direction:column; gap:.4rem; margin:0; }
.hbp-footer-links a{ color:#9CA3AF; transition:color .25s ease; }
.hbp-footer-links a:hover{ color:var(--hbp-lima); }
.hbp-footer-place{
  display:block; color:#FFFFFF;
  font-family:var(--hbp-font-display);
  font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
}
.hbp-footer-legal{ display:flex; gap:1.5rem; justify-content:flex-end; margin:0; }
.hbp-footer-legal a{ color:#6B7280; }
.hbp-footer-legal a:hover{ color:#FFFFFF; }
.hbp-socials .elementor-social-icon{ transition:transform .25s var(--hbp-ease); }
.hbp-socials .elementor-social-icon:hover{ transform:scale(1.12); }

/* ---------------------------------------------------------------- responsive */
@media (prefers-reduced-motion:reduce){
  .hbp-marquee-text,
  .hbp-float img{ animation:none !important; }
}
@media (max-width:1024px){
  .hbp-header{ position:relative; }
  .hbp-card > .elementor-widget-wrap,
  .hbp-card > .elementor-element-populated{ min-height:340px; }
}
@media (max-width:767px){
  .hbp-section{ padding-left:18px !important; padding-right:18px !important; }
  .hbp-card > .elementor-widget-wrap,
  .hbp-card > .elementor-element-populated{ min-height:0; padding:1.8rem 1.5rem !important; }
  .hbp-case > .elementor-widget-wrap,
  .hbp-case > .elementor-element-populated{ min-height:340px; padding:1.7rem !important; }
  .hbp-nav{ justify-content:center; gap:1.2rem; }
  .hbp-footer-legal{ justify-content:flex-start; }
}

/* ----------------------------------------------------------------
   Compatibilidad de marcado entre versiones de Elementor.
   Elementor 4 inyecta el contenido directamente dentro del widget:
   ya no existe .elementor-widget-container y el texto no viene
   envuelto en <p>. El layout de arriba se define sobre el widget;
   acá anulamos esos envoltorios intermedios cuando sí existen
   (Elementor 3.x), para que el resultado sea el mismo en ambas.
   ---------------------------------------------------------------- */
.hbp-card-links .elementor-widget-container,
.hbp-card-links > p,
.hbp-card-swap .elementor-widget-container,
.hbp-card-swap > p,
.hbp-case-tags .elementor-widget-container,
.hbp-case-tags > p,
.hbp-footer-legal .elementor-widget-container,
.hbp-footer-legal > p,
.hbp-footer-links .elementor-widget-container,
.hbp-footer-links > p,
.hbp-kicker .elementor-widget-container,
.hbp-kicker > p,
.hbp-nav .elementor-widget-container,
.hbp-nav > p,
.hbp-pill .elementor-widget-container,
.hbp-pill > p,
.hbp-rating .elementor-widget-container,
.hbp-rating > p,
.hbp-stickers .elementor-widget-container,
.hbp-stickers > p { display: contents; }

/* ---------------------------------------------------------------- header: punto y hamburguesa */
/* El punto lima del botón «Hablemos» es el icono del widget. Elementor 4 los
   dibuja como SVG inline, así que hay que pintar el fill además del color. */
.hbp-btn--dot .elementor-button-icon{ color:var(--hbp-lima); font-size:.4rem; }
.hbp-btn--dot .elementor-button-icon svg{
  width:.4rem; height:.4rem; fill:var(--hbp-lima); display:block;
}
.hbp-btn--dot .elementor-button:hover .elementor-button-icon{ transform:none; }
.hbp-btn--dot .elementor-button-content-wrapper{ gap:.5rem; }

.hbp-header-actions > .elementor-container{ justify-content:flex-end; gap:2rem; flex-wrap:nowrap; }
.hbp-header-actions .elementor-column{ width:auto !important; flex:0 0 auto; }

.hbp-burger .elementor-button{
  width:2.5rem; height:2.5rem; padding:0 !important;
  border-radius:999px; justify-content:center;
}
.hbp-burger .elementor-button-icon{ margin:0 !important; }
.hbp-burger .elementor-button-icon svg{ width:1rem; height:1rem; fill:currentColor; }
.hbp-burger .elementor-button:hover{
  background:var(--hbp-lima) !important; border-color:var(--hbp-lima-edge) !important;
  color:var(--hbp-ink) !important; transform:none;
}
.hbp-burger .elementor-button-text{ display:none; }

/* ---------------------------------------------------------------- overlay del menú */
.hbp-menu{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; justify-content:space-between;
  overflow-y:auto;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .4s ease, visibility .4s ease;
}
body.hbp-menu-open{ overflow:hidden; }
body.hbp-menu-open .hbp-menu{ opacity:1; visibility:visible; pointer-events:auto; }
.hbp-menu::-webkit-scrollbar{ display:none; }
.hbp-menu{ scrollbar-width:none; }

.hbp-menu-close .elementor-button{
  width:3rem; height:3rem; padding:0 !important;
  border-radius:999px; justify-content:center;
}
.hbp-menu-close .elementor-button-icon{ margin:0 !important; }
.hbp-menu-close .elementor-button-icon svg{ width:1rem; height:1rem; fill:currentColor; }
.hbp-menu-close .elementor-button-text{ display:none; }
.hbp-menu-close .elementor-button:hover{ transform:scale(1.1); }

.hbp-menu-cols{ padding:clamp(2rem,5vw,3rem) 0; }
.hbp-menu-list{ display:flex; flex-direction:column; gap:.7rem; }
.hbp-menu-list a{ color:#FFFFFF; text-decoration:none; width:fit-content; transition:color .25s ease; }
.hbp-menu-list a:hover{ color:var(--hbp-lima); }
.hbp-menu-list--nav a{ letter-spacing:-.02em; }
.hbp-menu-place{
  display:block; color:#FFFFFF;
  font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
}
.hbp-menu-cta a{ color:var(--hbp-lima); text-decoration:none; }
.hbp-menu-cta a:hover{ text-decoration:underline; }

/* En el editor de Elementor el overlay se muestra, para poder editarlo. */
.elementor-editor-active .hbp-menu,
.elementor-editor-preview .hbp-menu{
  position:relative; opacity:1; visibility:visible; pointer-events:auto;
}

@media (max-width:767px){
  .hbp-menu-cols > .elementor-container{ flex-wrap:wrap; }
  .hbp-menu{ padding:1.5rem !important; }
}

/* ==================================================================
   Estilos de las secciones traídas de la Landing 4.
   Mismo diseño, con la tipografía de esta landing (Archivo).
   ================================================================== */
.hbp-hide-mobile{ display:block; }
.hbp-mark-block{
  background:var(--hbp-lima);
  color:var(--hbp-ink);
  padding:.02em .16em;
  border-radius:14px;
  display:inline-block;
  margin-top:.06em;
}
.hbp-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  margin:0; width:fit-content; max-width:fit-content;
}
.hbp-pill--lima{
  background:rgba(189,251,21,.25);
  border-color:rgba(166,224,10,.55);
  color:var(--hbp-ink);
}
.hbp-pill--lima .hbp-dot{ background:var(--hbp-ink); box-shadow:none; }
.hbp-sticker-row{ display:flex; flex-wrap:wrap; gap:12px; margin:0; }
.hbp-sticker--l{ transform:rotate(-2deg); }
.hbp-sticker--r{ transform:rotate(2.5deg); }
.hbp-video-frame{
  border:4px solid var(--hbp-ink);
  border-radius:26px;
  overflow:hidden;
  background:var(--hbp-ink);
  box-shadow:0 30px 60px -24px rgba(20,21,24,.45);
}
.hbp-video-frame .elementor-wrapper{ border-radius:22px; overflow:hidden; }
.hbp-phone img{ filter:drop-shadow(0 24px 40px rgba(20,21,24,.25)); }
.hbp-cards-row > .elementor-container{ align-items:stretch; }
.hbp-service-card > .elementor-element-populated{
  background:#fff;
  border:1px solid var(--hbp-rule);
  border-radius:24px;
  padding:34px 28px !important;
  min-height:390px;
  transition:background-color .4s var(--hbp-ease),
             border-color .4s var(--hbp-ease),
             transform .4s var(--hbp-ease),
             box-shadow .4s var(--hbp-ease);
  position:relative;
  overflow:hidden;
}
.hbp-service-card:hover > .elementor-element-populated{
  background:var(--hbp-ink);
  border-color:var(--hbp-ink);
  transform:translateY(-8px);
  box-shadow:0 24px 48px -12px rgba(20,21,24,.32);
}
.hbp-service-card .hbp-card-num{
  transition:opacity .3s ease, transform .3s ease;
}
.hbp-service-card .hbp-card-hover-label{
  position:absolute; top:34px; left:28px;
  opacity:0; pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .3s ease, transform .3s ease;
}
.hbp-service-card .hbp-card-hover-label{
  display:inline-flex; align-items:center; gap:8px; margin:0; width:fit-content; max-width:fit-content;
}
/* Reserva siempre 2 líneas para el título: si el texto de una tarjeta entra en 1 línea
   y el de las vecinas en 2, sin esto la fila de botones de esa tarjeta queda más arriba
   que la de las demás (el layout ancla los botones al borde inferior de la tarjeta). */
.hbp-service-card .hbp-card-title{ min-height:60px; display:flex; align-items:flex-end; }
.hbp-service-card:hover .hbp-card-num{ opacity:0; transform:scale(.75) translateY(-10px); }
.hbp-service-card:hover .hbp-card-hover-label{ opacity:1; transform:translateY(0); }
.hbp-service-card:hover .hbp-card-title .elementor-heading-title{ color:#fff !important; }
.hbp-badge-links{
  display:flex; flex-direction:column; gap:12px;
  margin:0; padding-top:22px;
  border-top:1px solid var(--hbp-rule);
  transition:border-color .4s var(--hbp-ease);
}
.hbp-service-card:hover .hbp-badge-links{ border-top-color:rgba(255,255,255,.28); }
.hbp-badge-link{
  display:inline-flex; align-items:center; justify-content:space-between; gap:8px;
  border:1px solid var(--hbp-ink);
  border-radius:999px;
  padding:9px 18px;
  color:var(--hbp-ink);
  text-decoration:none;
  transition:all .25s var(--hbp-ease); width:fit-content; max-width:fit-content;
}
.hbp-service-card:hover .hbp-badge-link{
  border-color:var(--hbp-lima);
  color:var(--hbp-lima);
}
.hbp-service-card:hover .hbp-badge-link:hover{
  background:var(--hbp-lima);
  color:var(--hbp-ink);
  transform:translateX(4px);
}
.hbp-project-card > .elementor-element-populated{
  aspect-ratio:3 / 4;   /* proporción vertical del maquetado */
  border-radius:24px;
}
/* La tarjeta se dibuja en el elemento interno, que es el que lleva el margen
   de separación. Si el fondo quedara en la columna, asomaría como un marco. */
.hbp-project-card{
  transition:transform .5s var(--hbp-ease), box-shadow .5s var(--hbp-ease);
}
.hbp-project-card > .elementor-element-populated{
  background-color:var(--hbp-ink);
  border-radius:24px;
  overflow:hidden;
  position:relative;
}
.hbp-project-card:hover > .elementor-element-populated{
  transform:translateY(-6px);
  box-shadow:0 28px 56px -18px rgba(20,21,24,.42);
}
.hbp-project-card .elementor-background-overlay{ transition:opacity .4s ease; }
.hbp-project-card .hbp-project-tag{ margin:0 0 14px; }
/* Al portar el CSS de la Landing 4 estas dos reglas perdieron su @media y se
   aplicaban a todos los anchos: la de servicios achataba la tarjeta a 340px
   también en escritorio. La de proyectos es redundante (la proporción ya está
   en la regla base), así que se elimina. */
@media (max-width:1024px){
  .hbp-service-card > .elementor-element-populated{ min-height:340px; }
}
.hbp-project-card > .elementor-element-populated{
  overflow:hidden;
  border-radius:24px;
}
.hbp-sticker-row > p { display: contents; }

/* Puente de marcado para las clases traídas de la Landing 4 (ver arriba):
   en Elementor 3.x el texto viene envuelto, en 4 no. */
.hbp-eyebrow .elementor-widget-container,
.hbp-eyebrow > p,
.hbp-badge-links .elementor-widget-container,
.hbp-badge-links > p,
.hbp-card-hover-label .elementor-widget-container,
.hbp-card-hover-label > p,
.hbp-sticker-row .elementor-widget-container,
.hbp-sticker-row > p,
.hbp-project-tag .elementor-widget-container,
.hbp-project-tag > p,
.hbp-pill--lima .elementor-widget-container,
.hbp-pill--lima > p { display: contents; }

/* SEPARACION-TARJETAS */
/* ------------------------------------------------------------------
   Separación entre tarjetas.
   Elementor genera el hueco entre columnas con `padding` sobre
   .elementor-element-populated — exactamente donde nuestras tarjetas
   ponen su relleno interior, así que lo pisábamos y quedaban pegadas.
   Lo recuperamos con margen, y compensamos en la fila con margen
   negativo para que los bordes exteriores sigan alineados.
   ------------------------------------------------------------------ */
.hbp-cards-row > .elementor-container{
  margin-left:-12px; margin-right:-12px;
  width:calc(100% + 24px);
}
.hbp-cards-row > .elementor-container > .elementor-column > .elementor-element-populated{
  margin-left:12px; margin-right:12px;
}
@media (max-width:1024px){
  .hbp-cards-row > .elementor-container > .elementor-column > .elementor-element-populated{
    margin-bottom:24px;
  }
}

/* ANCLA-HOVER */
/* Las etiquetas que aparecen al pasar el mouse se posicionan respecto del
   elemento interno (el que tiene el relleno de la tarjeta), no de la columna:
   si no, el margen de separación las corría 12px. */
.hbp-service-card > .elementor-element-populated,
.hbp-card > .elementor-element-populated{ position:relative; }

/* ================= PUNTOS DE MARCA =================
   Antes eran <span class="hbp-dot"></span> dentro del texto. TinyMCE borra los
   <span> vacíos al abrir el widget, así que el punto desaparecía en cuanto
   editabas la etiqueta. Ahora los dibuja el CSS: el editor no puede romperlos
   y el texto del widget queda limpio. */
/* Van en el div del widget, no en un <p>: Elementor 4 no envuelve el texto,
   y donde sí lo envuelve (3.x) el puente de arriba disuelve el <p>. */
.hbp-kicker::before,
.hbp-pill::before,
.hbp-eyebrow::before,
.hbp-card-swap::before,
.hbp-card-hover-label::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--hbp-lima);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--hbp-lima) 32%, transparent);
  flex: 0 0 auto;
}
/* En las píldoras el punto es tinta, no lima. */
.hbp-pill::before { background: var(--hbp-bosque); box-shadow: none; }
.hbp-pill--lima::before { background: var(--hbp-ink); box-shadow: none; }
/* En las tarjetas es un poco más grande, como en el maquetado. */
.hbp-card-swap::before,
.hbp-card-hover-label::before { width: 12px; height: 12px; box-shadow: none; }

/* El punto del logo, que vivía en el título del encabezado. */
.hbp-logo .elementor-heading-title::after {
  content: "";
  display: inline-block;
  width: .55rem; height: .55rem;
  border-radius: 999px;
  background: var(--hbp-lima);
  margin-left: .34rem;
  transition: transform .3s var(--hbp-ease);
}
.hbp-logo:hover .elementor-heading-title::after { transform: scale(1.5); }

/* ================= PIEZAS A PRUEBA DE EDICIÓN =================
   Antes cada pieza llevaba su clase escrita dentro del texto del widget
   (<span class="hbp-tag">…</span>). Ese marcado lo puede alterar el editor.
   Ahora el estilo cuelga de la clase del WIDGET —que vive en los ajustes de
   Elementor y el editor no toca— y del tipo de elemento. Aunque se borren
   todas las clases del contenido, la pieza se sigue viendo igual. */

/* --- etiquetas de los casos --- */
.hbp-case-tags span {
  display: inline-block;
  padding: .32em .75em;
  border-radius: 999px;
  border: 1px solid currentColor;
}

/* --- píldoras con flecha de las tarjetas (la flecha la pone el CSS) --- */
.hbp-card-links a,
.hbp-badge-links a {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  border: 1px solid var(--hbp-ink);
  border-radius: 999px;
  padding: .55rem 1.05rem;
  color: var(--hbp-ink);
  text-decoration: none;
  transition: all .25s var(--hbp-ease);
}
.hbp-card-links a::after,
.hbp-badge-links a::after { content: "\2192"; font-size: .85em; }

.hbp-card:hover .hbp-card-links a,
.hbp-service-card:hover .hbp-badge-links a { border-color: var(--hbp-lima); color: var(--hbp-lima); }
.hbp-card:hover .hbp-card-links a:hover,
.hbp-service-card:hover .hbp-badge-links a:hover {
  background: var(--hbp-lima); color: var(--hbp-ink); transform: translateX(4px);
}

/* --- stickers manuscritos --- */
.hbp-stickers span,
.hbp-sticker-row span {
  font-family: var(--hbp-font-marker);
  background: var(--hbp-lima);
  color: var(--hbp-ink);
  line-height: 1;
  padding: .5em .85em;
  border-radius: 999px;
  display: inline-block;
  border: 1.5px solid var(--hbp-lima-edge);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--hbp-ink) 18%, transparent);
  transition: transform .25s var(--hbp-ease), box-shadow .25s var(--hbp-ease);
}
/* La inclinación alterna sale de la posición, no de una clase. */
.hbp-stickers span:nth-child(3n+1),
.hbp-sticker-row span:nth-child(2n+1) { transform: rotate(-2.5deg); }
.hbp-stickers span:nth-child(3n+2),
.hbp-sticker-row span:nth-child(2n) { transform: rotate(1.8deg); }
.hbp-stickers span:nth-child(3n) { transform: rotate(-1.2deg); }
.hbp-stickers span:hover,
.hbp-sticker-row span:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--hbp-ink) 22%, transparent);
}

/* --- resaltado lima: <mark> es semántico y el editor lo respeta --- */
.hbp-section mark,
.hbp-mark {
  background: var(--hbp-lima);
  color: var(--hbp-ink);
  padding: .02em .18em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 3px 8px 5px 9px / 9px 4px 8px 4px;
  transform: rotate(-.6deg);
  display: inline-block;
}

/* --- chip de valoración --- */
.hbp-rating > span {
  display: inline-flex; align-items: center; gap: .75rem;
  background: var(--hbp-paper-2);
  border: 1px solid var(--hbp-rule);
  border-radius: 999px;
  padding: .55rem 1.1rem;
}

/* --- etiqueta de ciudad en el pie y en el menú --- */
.hbp-footer-links span {
  display: block; color: #FFFFFF;
  font-family: var(--hbp-font-display);
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}

/* ================= EDICIÓN DE LAS ETIQUETAS DE HOVER =================
   La etiqueta que reemplaza al número al pasar el mouse vive con opacity:0 y
   pointer-events:none, así que en el editor era imposible seleccionarla o
   verla. Dentro de Elementor la sacamos del apilado y la mostramos en el flujo
   de la tarjeta, debajo del número, para poder editarla como cualquier texto.
   En el sitio publicado sigue funcionando como estado de hover. */
.elementor-editor-active .hbp-card-hover-label,
.elementor-editor-preview .hbp-card-hover-label,
.elementor-editor-active .hbp-card-swap,
.elementor-editor-preview .hbp-card-swap {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  outline: 1px dashed color-mix(in srgb, var(--hbp-ink) 30%, transparent);
  outline-offset: 4px;
  border-radius: 4px;
}
/* Sobre fondo claro la etiqueta es lima y no se leería: en el editor va tinta. */
.elementor-editor-active .hbp-card-hover-label,
.elementor-editor-preview .hbp-card-hover-label,
.elementor-editor-active .hbp-card-swap,
.elementor-editor-preview .hbp-card-swap { color: var(--hbp-ink) !important; }
.elementor-editor-active .hbp-card-hover-label::before,
.elementor-editor-preview .hbp-card-hover-label::before,
.elementor-editor-active .hbp-card-swap::before,
.elementor-editor-preview .hbp-card-swap::before { background: var(--hbp-bosque); }

/* ================= RESPIRO EN LOS BOTONES DE LAS TARJETAS =================
   Las píldoras quedaban apretadas contra el texto. Se ajusta acá y no en la
   plantilla para que reimportar no pise los cambios que hagas en Elementor. */
.hbp-card-links a,
.hbp-badge-links a { padding: .72rem 1.2rem; }

/* Y un poco más de aire entre píldora y píldora. */
.hbp-card-links,
.hbp-badge-links { gap: .8rem; }

/* El relleno del «Ver Proyecto» NO se toca desde acá: es un ajuste del widget
   (Estilo → Relleno) y debe seguir siendo editable en Elementor. El valor por
   defecto vive en la plantilla. */


/* ================= SECCIÓN SERVICIOS ================= */

.hbp-pilar > .elementor-element-populated{ transition: transform .25s ease; }
.hbp-pilar > .elementor-element-populated:hover{ transform: translateY(-4px); }

/* Enlace que sale de la sección. Clase propia: `hbp-badge-links` ya existe
   más arriba con diez reglas y la flecha \2192, y la usan las tarjetas de la
   landing — reutilizarla les cambiaría el aspecto. */
.hbp-link-out a{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid currentColor; border-radius:999px;
  padding:.5rem 1rem; text-decoration:none; color:inherit;
  transition: gap .18s ease;
}
.hbp-link-out a::after{
  content:"\2197"; font-size:.9em; transition: transform .18s ease;
}
/* El hover mueve la flecha y abre el espaciado. No invierte colores: la
   píldora hereda el color de su tarjeta y hay tres fondos distintos, así que
   cualquier inversión tiene que resolverse por variante o se rompe en alguna. */
.hbp-link-out a:hover{ gap:.75rem; }
.hbp-link-out a:hover::after{ transform: translate(2px, -2px); }

/* --- por qué importa --- */
.hbp-claim strong{ color: var(--hbp-ink, #141518); font-weight:800; }
.hbp-claims-row .elementor-element-populated{ border-left:2px solid #BDFB15; }

/* --- bloques de servicio --- */
.hbp-serv-row:first-of-type > .elementor-container{ border-top:0; }
.hbp-serv-num{ opacity:.95; }
.hbp-serv-who{ display:block; }
.hbp-serv-list ul{ margin:0; padding:0; list-style:none; }
.hbp-serv-list li{ position:relative; padding-left:1.35em; }
.hbp-serv-list li::before{
  content:"\2192"; position:absolute; left:0; top:0;
  color:#1B6B4C; font-weight:700;
}
.hbp-serv-list li strong{ font-weight:800; }

/* Los dos botones del hero, uno al lado del otro y no estirados. */
.hbp-hero-cta .elementor-widget-button{ display:inline-block; }
.hbp-hero-cta .elementor-element-populated{ padding-right:14px; }

@media (max-width: 767px){
  .hbp-claims-row .elementor-element-populated{ border-left:0; }
  .hbp-serv-id, .hbp-serv-detalle{ width:100% !important; }
}

/* --- pasos del método --- */
.hbp-paso > .elementor-element-populated{ background:#FFFFFF; }
.hbp-pasos-row--compacta .hbp-paso-title{ font-size:17px; }

/* --- FAQ: <details> nativo, sin JavaScript --- */
.hbp-faq{ border-top:1px solid #E0E2DC; }
.hbp-faq-item{ border-bottom:1px solid #E0E2DC; }
.hbp-faq-item summary{
  cursor:pointer; list-style:none; padding:1.15rem 2.5rem 1.15rem 0;
  position:relative; font-family:Archivo, system-ui, sans-serif;
  font-weight:700; font-size:17px; line-height:1.35; color:#141518;
}
.hbp-faq-item summary::-webkit-details-marker{ display:none; }
.hbp-faq-item summary::after{
  content:"+"; position:absolute; right:.4rem; top:50%;
  transform:translateY(-50%); font-size:22px; font-weight:400;
  color:#1B6B4C; transition:transform .2s ease;
}
.hbp-faq-item[open] summary::after{ content:"\2013"; }
.hbp-faq-item summary:hover{ color:var(--hbp-lima-edge); }
.hbp-faq-body{ padding:0 2.5rem 1.35rem 0; }
.hbp-faq-body p{
  margin:0; font-family:Archivo, system-ui, sans-serif; font-weight:500;
  font-size:16px; line-height:1.65; color:#55575C;
}
/* El editor de Elementor no ejecuta el toggle: se abren todas para poder
   leerlas y editarlas. */
.elementor-editor-active .hbp-faq-item .hbp-faq-body,
.elementor-editor-preview .hbp-faq-item .hbp-faq-body{ display:block; }

@media (max-width: 767px){
  .hbp-pasos-row--compacta .hbp-paso{ width:50% !important; }
}

/* --- plataformas --- */
/* El widget html no pasa por los controles de tipografía de Elementor, así
   que la tipografía de las píldoras (antes puesta con typo() sobre un
   text-editor) queda fija acá, igual que la de .hbp-faq-item summary. */
.hbp-plat-pills span{
  display:inline-block; margin:0 .4rem .5rem 0; padding:.5rem 1rem;
  border:1px solid #E0E2DC; border-radius:999px; background:#FBFBFB;
  font-family:Archivo, system-ui, sans-serif; font-weight:700;
  font-size:12.5px; line-height:1; letter-spacing:0.9px;
  text-transform:uppercase; color:#141518;
}
.hbp-plat-texto{ max-width:62ch; }

/* --- bloque de producto propio (HabaPay) --- */
.hbp-dest-title{ max-width:20ch; }
.hbp-dest-p{ max-width:62ch; }

/* --- nota cruzada --- */
.hbp-nota{ border-left:3px solid #A6E00A; padding-left:1.1rem; }
.hbp-nota a{ text-decoration:underline; }

/* --- volver al hub desde el hero de una subpágina --- */
.hbp-volver a{ color:inherit; text-decoration:none; border-bottom:1px solid currentColor; }
.hbp-volver a:hover{ color:var(--hbp-lima-edge); }

/* --- lista larga de «qué incluye», a dos columnas en pantalla ancha --- */
@media (min-width: 992px){
  .hbp-incluye ul{ column-count:2; column-gap:3rem; }
  .hbp-incluye li{ break-inside:avoid; }
}

/* ================= REDISEÑO DE IMPACTO VISUAL (hub + subpáginas) =================
   El texto negro sobre papel de arriba a abajo no rompía el ritmo en ningún
   punto. Se alterna papel → tinta → papel, con un solo elemento XXL por
   página (la tira de pilares en el hub, el nombre del servicio o HabaPay en
   tinta), para no repetir el patrón de "todo llamativo a la vez". */

/* --- hero del hub: dos columnas, foto + chip superpuesto --- */
.hbp-hero-row{ align-items:center; }
.hbp-hero-foto-wrap{ position:relative; }
.hbp-hero-foto .elementor-widget-container{ line-height:0; }
.hbp-hero-foto img{ aspect-ratio:4/5; object-fit:cover; display:block; border-radius:24px; }
.hbp-hero-chip{
  position:absolute; left:24px; bottom:24px; z-index:2;
  width:auto; max-width:calc(100% - 48px);
}
.hbp-hero-chip .elementor-widget-container{
  display:inline-block; width:auto;
  background:#BDFB15; padding:.75rem 1.3rem; border-radius:999px;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}

@media (max-width:767px){
  .hbp-hero-row > div:first-child{ margin-bottom:24px; }
}

/* --- el momento tinta: nombre del pilar/servicio en tipografía XXL --- */
.hbp-kicker--inv{ color:#9CA3AF !important; }
.hbp-momento-row{ align-items:center; }
.hbp-momento-title{ word-break:keep-all; }
.hbp-momento-texto{ max-width:36ch; }
.hbp-momento-chip .elementor-widget-container{
  display:inline-block; width:auto; background:#BDFB15; padding:.65rem 1.2rem;
  border-radius:999px;
}

@media (max-width:767px){
  .hbp-momento-row > div{ width:100% !important; }
  .hbp-momento-row > div:first-child{ margin-bottom:20px; }
}

/* --- alternativas de hero: accesos a los 4 pilares (Diseño/Tecnología/Redes/Audiovisual) --- */

/* A · chips sueltos bajo los botones */
.hbp-hero-pilares--chips{
  display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.4rem;
}
.hbp-hero-pilares--chips a{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--hbp-ink); border-radius:999px;
  padding:.5rem 1.05rem;
  color:var(--hbp-ink); text-decoration:none; font-weight:700;
  transition:all .25s var(--hbp-ease);
}
.hbp-hero-pilares--chips a::after{ content:"\2192"; font-size:.85em; }
.hbp-hero-pilares--chips a:hover{ background:var(--hbp-ink); color:var(--hbp-lima); }

/* B · barra compacta arriba del titular */
.hbp-hero-pilares--bar{
  display:flex; flex-wrap:wrap; gap:1.4rem; margin:.2rem 0 .1rem;
}
.hbp-hero-pilares--bar a{
  color:var(--hbp-ink); text-decoration:none;
  padding-bottom:.15rem; border-bottom:2px solid transparent;
  transition:border-color .25s var(--hbp-ease), color .25s var(--hbp-ease);
}
.hbp-hero-pilares--bar a:hover{ border-bottom-color:var(--hbp-lima-edge); color:var(--hbp-lima-edge); }

/* C · tarjetas numeradas debajo del hero */
.hbp-hero-cards{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--hbp-rule); border:1px solid var(--hbp-rule); border-radius:14px;
  overflow:hidden;
}
.hbp-hero-card{
  display:flex; flex-direction:column; gap:.6rem;
  background:var(--hbp-paper); padding:1.3rem 1.2rem;
  color:var(--hbp-ink); text-decoration:none;
  transition:background .25s var(--hbp-ease), color .25s var(--hbp-ease);
}
.hbp-hero-card:hover{ background:var(--hbp-ink); color:var(--hbp-lima); }
.hbp-hero-card-num{
  font-family:var(--hbp-font-display); font-weight:800; font-size:1.4rem;
  letter-spacing:-.05em; opacity:.55;
}
.hbp-hero-card-label{ font-family:var(--hbp-font-display); font-weight:700; font-size:1.05rem; }
@media(max-width:767px){ .hbp-hero-cards{ grid-template-columns:repeat(2,1fr); } }

/* D · franja oscura pegada arriba del hero, siempre visible sin scroll */
.hbp-hero-franja-section{ position:relative; z-index:2; }
.hbp-hero-franja{
  display:flex; flex-wrap:wrap; gap:1.6rem; justify-content:center;
}
.hbp-hero-franja a{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--hbp-paper); text-decoration:none;
  transition:color .25s var(--hbp-ease);
}
.hbp-hero-franja a:hover{ color:var(--hbp-lima); }
.hbp-hero-franja-num{ color:var(--hbp-lima); font-weight:800; }
@media(max-width:600px){ .hbp-hero-franja{ gap:1rem; justify-content:flex-start; overflow-x:auto; } }