/* Banner Home Jardines · v0.2
   Foto quieta de fondo, entera. Texto gancho arriba a la izquierda, directamente sobre la foto,
   con margen superior para el menú de la web. Caja «¿qué te gustaría cuidar hoy?» pequeña,
   abajo a la derecha. Solo Inria Sans e Inria Serif (las carga el tema). Todo va dentro de .jhb.
   Variables ajustables (el widget las rellena desde Elementor):
   .jhb{ --jhb-top; --jhb-h; --jhb-hook-w; --jhb-care-w; --jhb-accent; --jhb-shade; } */

.jhb{
  --jhb-deep:#24120A; --jhb-on:#FFF6EC; --jhb-on-2:rgba(255,246,236,.84); --jhb-on-3:rgba(255,246,236,.62);
  --jhb-chip:rgba(255,240,225,.12); --jhb-paper:#FFFDFA; --jhb-ink:#24120A; --jhb-wa:#3BBF6A;
  --jhb-accent:#F6D3AE; --jhb-shade:1;
  --jhb-top:110px; --jhb-bottom:96px; --jhb-h:100svh;
  /* Tamaños que crecen con el ancho del banner (cqi = 1 % del ancho). */
  --jhb-hook-w:min(1100px,64cqi); --jhb-care-w:clamp(340px,27cqi,520px);
  --jhb-serif:"Inria Serif",Georgia,"Times New Roman",serif;
  --jhb-sans:"Inria Sans","Helvetica Neue",Arial,sans-serif;
  --jhb-gut:clamp(16px,3vw,44px);
  --jhb-ease:cubic-bezier(.22,.61,.36,1);
  position:relative; isolation:isolate; width:100%; overflow:hidden;
  background:var(--jhb-deep); color:var(--jhb-on);
  font-family:var(--jhb-sans); -webkit-font-smoothing:antialiased; text-align:left; color-scheme:dark;
  /* Sin container-type a propósito: dentro de un contenedor en columna de Elementor, Chrome le daba
     al widget una altura de más (hueco blanco bajo el banner en móvil). Las medidas en cqi usan el ancho de la pantalla. */
}
.jhb *,.jhb *::before,.jhb *::after{ box-sizing:border-box; }
:where(.jhb) :is(h1,h2,h3,h4,h5,h6,p){ margin:0; padding:0; }
:where(.jhb) a{ color:inherit; }
.jhb :focus-visible{ outline:2px solid var(--jhb-accent); outline-offset:3px; }
.jhb .jhb-cap{ font:400 clamp(10px,.62cqi,12px)/1.45 var(--jhb-sans); letter-spacing:1.5px; text-transform:uppercase; }

/* ---------- foto de fondo: quieta y entera ---------- */
.jhb-bg{ position:absolute; inset:0; z-index:-1; }
.jhb .jhb-bg img{ max-width:none; border-radius:0; box-shadow:none; }
.jhb .jhb-fill{ position:absolute; inset:-8%; width:116%; height:116%; object-fit:cover; filter:blur(38px) saturate(1.1) brightness(.85); }
.jhb .jhb-sharp{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
/* «Foto entera»: en banners apaisados las fotos verticales se ven completas sobre su propio relleno desenfocado. */
@media (min-aspect-ratio:1/1){ .jhb .jhb-bg[data-fit="contain"] .jhb-sharp{ object-fit:contain; object-position:82% 50%; } }
/* Sombra suave para leer el texto: arriba a la izquierda y abajo. */
.jhb-bg::after{
  content:""; position:absolute; inset:0; opacity:var(--jhb-shade);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(36,18,10,.62) 0%, rgba(36,18,10,.28) 42%, rgba(36,18,10,0) 70%),
    linear-gradient(0deg, rgba(36,18,10,.45) 0%, rgba(36,18,10,0) 38%);
}

/* ---------- disposición ---------- */
.jhb-grid{
  position:relative; min-height:var(--jhb-h);
  display:grid; gap:56px; align-content:start; /* en móvil, aire entre los botones y la caja */
  padding:var(--jhb-top) var(--jhb-gut) var(--jhb-bottom);
}
@media (min-width:900px){
  .jhb-grid{
    grid-template-columns:minmax(0,1fr) var(--jhb-care-w);
    grid-template-rows:auto 1fr auto;
    column-gap:clamp(32px,4cqi,80px); row-gap:0;
  }
  .jhb-hook{ grid-column:1; grid-row:1; max-width:var(--jhb-hook-w); }
  .jhb-care{ grid-column:2; grid-row:1 / span 3; align-self:end; max-width:var(--jhb-care-w); }
  .jhb-nota{ grid-column:1; grid-row:3; align-self:end; }
  .jhb-grid--solo .jhb-hook{ grid-column:1 / -1; }
}

/* ---------- texto gancho ---------- */
.jhb-hook{ animation:jhb-rise .9s .1s var(--jhb-ease) both; text-shadow:0 1px 18px rgba(36,18,10,.25); }
@keyframes jhb-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.jhb .jhb-brand{ display:block; color:var(--jhb-on-2); letter-spacing:2px; }
.jhb .jhb-title{ margin:clamp(14px,1.2cqi,24px) 0 0; font:300 clamp(34px,4.5cqi,104px)/1.04 var(--jhb-serif); letter-spacing:-.8px; color:var(--jhb-on); text-transform:none; text-wrap:balance; }
.jhb .jhb-title em{ font-style:italic; font-weight:300; color:var(--jhb-accent); }
.jhb .jhb-kick{ color:var(--jhb-on-2); margin-top:clamp(16px,1.4cqi,28px); display:flex; flex-wrap:wrap; gap:6px 14px; }
.jhb .jhb-kick span{ padding-left:10px; border-left:1px solid rgba(255,246,236,.4); }
.jhb .jhb-kick span:first-child{ padding-left:0; border-left:0; }
.jhb .jhb-text{ margin-top:clamp(16px,1.5cqi,30px); max-width:48ch; font:300 clamp(14px,1.02cqi,19px)/1.6 var(--jhb-sans); color:var(--jhb-on-2); }
.jhb-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:clamp(20px,1.8cqi,36px); }

/* Botones en píldora, como los de la web */
.jhb .jhb-b{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:clamp(42px,2.9cqi,54px); padding:0 clamp(20px,1.5cqi,28px); border-radius:999px; text-decoration:none; text-shadow:none; font:400 clamp(11px,.72cqi,13px)/1 var(--jhb-sans); letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; border:0; transition:transform .12s var(--jhb-ease), background .2s, color .2s; }
.jhb .jhb-ar{ width:14px; height:14px; flex-shrink:0; transition:transform .25s var(--jhb-ease); }
.jhb .jhb-ar--down{ transform:rotate(90deg); }
.jhb .jhb-b:hover .jhb-ar{ transform:translateX(3px); }
.jhb .jhb-b:hover .jhb-ar--down{ transform:rotate(90deg) translateX(3px); }
.jhb .jhb-b:active{ transform:scale(.97); }
.jhb .jhb-b--solid{ background:var(--jhb-paper); color:var(--jhb-ink); }
.jhb .jhb-b--solid:hover{ background:#fff; color:var(--jhb-ink); }
.jhb .jhb-b--ghost{ background:rgba(36,18,10,.12); color:var(--jhb-on); border:1px solid rgba(255,246,236,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.jhb .jhb-b--ghost:hover{ background:rgba(255,240,225,.16); color:var(--jhb-on); }
@media (max-width:520px){ .jhb .jhb-b{ padding:0 18px; gap:8px; font-size:10.5px; letter-spacing:1.1px; } }
/* En pantallas anchas la caja ya está a la vista: el botón que baja a ella sobra. */
@media (min-width:900px){ .jhb .jhb-b[href^="#"][data-jhb-to-care]{ display:none; } }
/* En ordenador, los botones del texto gancho miden lo mismo que los de la web («Conocer el centro»): unos 58 px de alto. */
@media (min-width:900px){
  .jhb .jhb-btns .jhb-b{ min-height:58px; padding:0 44px; gap:12px; font-size:12.5px; letter-spacing:1.6px; }
  .jhb .jhb-btns .jhb-ar{ width:15px; height:15px; }
}

/* ---------- caja «¿qué te gustaría cuidar hoy?» ---------- */
.jhb-care{
  width:100%; display:grid; gap:clamp(12px,.9cqi,18px); padding:clamp(20px,1.6cqi,30px); border-radius:clamp(20px,1.4cqi,26px); color:var(--jhb-on);
  background:linear-gradient(165deg,rgba(255,236,216,.22),rgba(255,226,200,.1));
  -webkit-backdrop-filter:blur(24px) saturate(135%); backdrop-filter:blur(24px) saturate(135%);
  box-shadow:0 24px 60px rgba(36,18,10,.3);
  scroll-margin-top:calc(var(--jhb-top) + 12px);
  animation:jhb-rise .9s .3s var(--jhb-ease) both;
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .jhb-care{ background:rgba(90,48,26,.9); } }
.jhb .jhb-c2-title{ font:300 clamp(18px,1.35cqi,26px)/1.2 var(--jhb-serif); letter-spacing:-.2px; color:var(--jhb-on); text-transform:none; }
.jhb .jhb-hint{ color:var(--jhb-on-3); }
.jhb-grp{ display:grid; gap:6px; }
.jhb .jhb-grp > .jhb-cap{ color:var(--jhb-on-3); font-size:clamp(9px,.55cqi,11px); }
.jhb-chips{ display:flex; flex-wrap:wrap; gap:clamp(5px,.35cqi,8px); }
.jhb .jhb-chip{ display:inline-flex; align-items:center; gap:5px; margin:0; padding:clamp(6px,.45cqi,9px) clamp(10px,.75cqi,14px); border-radius:999px; border:1px solid rgba(255,240,225,.2); background:var(--jhb-chip); color:var(--jhb-on); font:400 clamp(11px,.74cqi,13.5px)/1 var(--jhb-sans); letter-spacing:0; text-transform:none; box-shadow:none; cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .12s var(--jhb-ease); }
.jhb .jhb-chip b{ font-weight:400; display:inline-block; opacity:.8; transition:transform .25s var(--jhb-ease); }
.jhb .jhb-chip:hover{ background:rgba(255,240,225,.2); color:var(--jhb-on); }
.jhb .jhb-chip:active{ transform:scale(.96); }
.jhb .jhb-chip[aria-pressed="true"]{ background:var(--jhb-paper); color:var(--jhb-ink); border-color:var(--jhb-paper); }
.jhb .jhb-chip[aria-pressed="true"] b{ transform:rotate(45deg); opacity:1; }
.jhb-answer{ min-height:clamp(56px,4.4cqi,84px); padding:clamp(12px,.9cqi,18px) clamp(14px,1cqi,20px); border-radius:clamp(14px,1cqi,18px); background:rgba(36,18,10,.28); display:grid; gap:8px; align-content:start; font-size:clamp(11.5px,.78cqi,14px); line-height:1.5; color:var(--jhb-on-2); }
.jhb-answer q{ font:italic 300 clamp(13px,.95cqi,17px)/1.45 var(--jhb-serif); color:var(--jhb-on); quotes:"“" "”"; }
/* Frase que va cambiando: fundido suave. */
.jhb-say{ display:block; transition:opacity .45s var(--jhb-ease), transform .45s var(--jhb-ease); }
.jhb-say.is-out{ opacity:0; transform:translateY(4px); }
.jhb-units{ display:flex; flex-wrap:wrap; gap:5px; }
.jhb .jhb-unit{ display:inline-flex; align-items:center; gap:5px; padding:clamp(5px,.4cqi,8px) clamp(10px,.7cqi,14px); border-radius:999px; background:rgba(255,240,225,.14); color:var(--jhb-on); font-size:clamp(11px,.72cqi,13px); text-decoration:none; animation:jhb-pop .35s var(--jhb-ease) both; }
.jhb span.jhb-unit{ cursor:default; }
.jhb a.jhb-unit:hover{ background:rgba(255,240,225,.26); color:var(--jhb-on); }
.jhb .jhb-unit small{ color:var(--jhb-on-3); font-size:10px; }
@keyframes jhb-pop{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.jhb .jhb-wa{ min-height:clamp(38px,2.6cqi,48px); font-size:clamp(10.5px,.66cqi,12px); letter-spacing:1.2px; padding:0 16px; }
.jhb-dot{ width:7px; height:7px; border-radius:50%; background:var(--jhb-wa); box-shadow:0 0 0 3px rgba(59,191,106,.25); }
.jhb .jhb-wa[aria-disabled="true"]{ opacity:.5; pointer-events:none; }

/* En móvil, más margen entre el texto y los bordes de la caja. */
@media (max-width:899px){ .jhb-care{ max-width:560px; padding:30px 26px; gap:16px; } }

/* Nota pequeña abajo a la izquierda */
.jhb .jhb-nota{ color:var(--jhb-on-2); max-width:70ch; }

@media (prefers-reduced-motion:reduce){
  .jhb *,.jhb *::before,.jhb *::after{ animation:none!important; transition:none!important; }
}