/* Footer Jardines · v0.1
   Paneles redondeados en el verde del footer actual sobre el fondo de la página:
   tres tarjetas de confianza, panel con contacto y columnas, la marca en grande y barra legal.
   Solo Inria Sans e Inria Serif (las carga el tema). Todo va dentro de .jft.
   Variables (el widget las rellena desde Elementor):
   .jft{ --jft-bg; --jft-fg; --jft-accent; --jft-ico-bg; --jft-radius; --jft-pad; } */

.jft{
  --jft-bg:#545142; --jft-bg-2:#4B4839; --jft-fg:#F4EFE9; --jft-fg-2:rgba(244,239,233,.72); --jft-fg-3:rgba(244,239,233,.5);
  --jft-accent:#ECE3A2; --jft-ico-bg:#F7F2E9; --jft-ico-fg:#545142; --jft-line:rgba(244,239,233,.14);
  --jft-radius:20px; --jft-pad:clamp(12px,1.6vw,24px); --jft-in:clamp(22px,2.6vw,40px);
  --jft-serif:"Inria Serif",Georgia,"Times New Roman",serif;
  --jft-sans:"Inria Sans","Helvetica Neue",Arial,sans-serif;
  display:grid; gap:12px; padding:var(--jft-pad); width:100%;
  font-family:var(--jft-sans); color:var(--jft-fg); text-align:left; -webkit-font-smoothing:antialiased;
}
.jft *,.jft *::before,.jft *::after{ box-sizing:border-box; }
:where(.jft) :is(ul,li,p){ margin:0; padding:0; list-style:none; }
.jft a,.jft a:hover,.jft a:focus{ color:inherit; text-decoration:none; box-shadow:none; }
.jft :focus-visible{ outline:2px solid var(--jft-accent); outline-offset:3px; border-radius:4px; }
.jft .jft-lbl{ display:block; font:400 10.5px/1.4 var(--jft-sans); letter-spacing:1.8px; text-transform:uppercase; color:var(--jft-accent); margin-bottom:12px; }

/* ---------- tarjetas de confianza ---------- */
/* Fila desplazable sin flechas: se arrastra con el dedo, la rueda o el ratón. */
.jft-cards{
  /* Cada tarjeta mide lo que su contenido, así el margen interior es el mismo en los cuatro lados. */
  display:grid; grid-auto-flow:column; grid-auto-columns:max-content; align-items:start; gap:12px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.jft-cards::-webkit-scrollbar{ display:none; }
.jft-cards > *{ scroll-snap-align:start; }
@media (hover:hover) and (pointer:fine){ .jft-cards{ cursor:grab; } }
.jft-cards.is-drag{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.jft-cards.is-drag .jft-card{ pointer-events:none; }
.jft .jft-card{ display:flex; align-items:center; gap:14px; max-width:min(420px,84vw); padding:20px; border-radius:var(--jft-radius); background:var(--jft-bg); color:var(--jft-fg); transition:background .25s; }
.jft a.jft-card:hover{ background:var(--jft-bg-2); color:var(--jft-fg); }
/* Icono fino, sin recuadro. */
.jft-ico{ flex-shrink:0; display:inline-flex; color:var(--jft-accent); }
.jft-ico svg{ width:26px; height:26px; stroke-width:1.15; }
.jft-card-txt{ display:grid; gap:2px; min-width:0; }
.jft .jft-card-t{ font:400 15.5px/1.3 var(--jft-serif); letter-spacing:-.1px; white-space:nowrap; }
.jft .jft-card-d{ font:300 12px/1.45 var(--jft-sans); color:var(--jft-fg-2); }

/* ---------- panel principal ---------- */
.jft-panel{ border-radius:var(--jft-radius); background:var(--jft-bg); padding:var(--jft-in) var(--jft-in) 0; overflow:hidden; }
.jft-top{ display:grid; gap:40px; }
@media (min-width:900px){ .jft-top{ grid-template-columns:minmax(0,1fr) auto; column-gap:clamp(40px,6vw,120px); } }

.jft-contact{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-content:start; min-width:0; }
.jft-blk{ display:grid; grid-template-columns:minmax(0,1fr); min-width:0; }
.jft .jft-big{ display:block; font:400 clamp(17px,1.35vw,21px)/1.35 var(--jft-serif); color:var(--jft-fg); }
.jft a.jft-big:hover,.jft a.jft-addr:hover .jft-big{ color:var(--jft-accent); }
.jft .jft-addr{ display:grid; }
/* Teléfono y email en píldora, como los botones de la web */
.jft .jft-pill{
  display:inline-flex; align-items:center; gap:12px; justify-self:start; min-height:50px; padding:0 24px 0 20px; border-radius:999px;
  border:1px solid rgba(244,239,233,.45); color:var(--jft-fg); font:400 13px/1 var(--jft-sans); letter-spacing:1.2px; text-transform:uppercase;
  transition:background .25s,color .25s,border-color .25s,transform .12s cubic-bezier(.22,.61,.36,1); max-width:100%;
}
.jft .jft-pill span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.jft .jft-pill svg{ flex-shrink:0; color:var(--jft-accent); transition:color .25s; }
.jft .jft-pill:hover{ background:var(--jft-fg); color:var(--jft-bg); border-color:var(--jft-fg); }
.jft .jft-pill:hover svg{ color:var(--jft-bg); }
.jft .jft-pill:active{ transform:scale(.97); }
@media (max-width:480px){ .jft .jft-pill{ padding:0 18px 0 16px; gap:10px; font-size:12px; letter-spacing:.6px; } }
.jft .jft-hours{ font:300 14.5px/1.6 var(--jft-sans); color:var(--jft-fg-2); }

.jft-cols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 28px; }
@media (min-width:600px){ .jft-cols{ grid-template-columns:repeat(3,auto); column-gap:clamp(32px,4vw,72px); } }
.jft-links{ display:grid; gap:12px; }
.jft .jft-links a,.jft .jft-links span{ font:400 12px/1.4 var(--jft-sans); letter-spacing:1.6px; text-transform:uppercase; color:var(--jft-fg); }
.jft .jft-links a:hover{ color:var(--jft-accent); }

/* ---------- la marca en grande ---------- */
.jft-mark{ margin-top:clamp(56px,9vw,170px); line-height:.78; white-space:nowrap; overflow:hidden; color:var(--jft-accent); }
.jft-mark span{ display:inline-block; font:300 22vw/.78 var(--jft-serif); letter-spacing:-.03em; transform-origin:left bottom; }

/* ---------- barra inferior ---------- */
.jft-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px 28px; padding:22px 0 calc(22px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--jft-line); margin-top:clamp(18px,2vw,30px); }
.jft-legal{ display:flex; flex-wrap:wrap; gap:6px 20px; }
.jft .jft-legal a,.jft .jft-legal span{ font:400 12.5px/1.4 var(--jft-sans); color:var(--jft-fg-3); }
.jft .jft-legal a:hover{ color:var(--jft-fg); }
.jft-bottom-r{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; }
.jft .jft-copy{ font:400 12.5px/1.4 var(--jft-sans); color:var(--jft-fg-3); }
.jft-socials{ display:flex; gap:6px; }
.jft .jft-soc{ width:34px; height:34px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:var(--jft-fg-2); border:1px solid var(--jft-line); transition:background .2s,color .2s; }
.jft .jft-soc:hover{ background:var(--jft-fg); color:var(--jft-bg); }

@media (prefers-reduced-motion:reduce){ .jft *{ transition:none!important; } }