:root{
  --blue:#1fb6ff; /* celeste corporativo */
  --blue-dark:#0ea5e9;
  --ink:#0f172a;
  --bg:#f6fbff;
  --muted:#64748b;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);}
/*body{background:var(--bg)}*/
/* Fondo con patrón repetido */
body{
  /* color de fondo base que ya usas */
  background-color: var(--bg);

  /* ruta al patrón SVG (ajústala según dónde lo ubiques) */
  background-image: url("med_pattern_light.svg");

  /* repetir en ambas direcciones */
  background-repeat: repeat;

  /* que comience en la esquina superior izquierda (opcional) */
  background-position: top left;

  /* deja que el SVG use su tamaño natural; si quieres escalarlo, descomenta: */
  background-size: 220px 220px;
}

/* Header fijo que se reduce */
header.site-header{
  position:sticky; top:0; z-index:1000; background:#fff;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  transition:all .25s ease;}
header.site-header .wrap{max-width:1100px;margin:auto;display:flex;align-items:center;gap:18px;padding:18px 18px;}
header.site-header.shrink .wrap{padding:8px 18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{height:48px;transition:height .25s}
header.site-header.shrink .brand img{height:34px}
.tag{font-weight:700;letter-spacing:.3px;color:var(--muted);font-size:12px}

nav a{color:var(--ink);text-decoration:none;font-weight:600;padding:10px 12px;border-radius:10px}
nav a:hover{background:rgba(31,182,255,.08)}
.grow{flex:1}

.ig{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700}
.ig svg{width:20px;height:20px}
.ig span{color:#111}

/* Hero */
.hero{max-width:1100px;margin:28px auto 0;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center;padding:0 18px}
.hero .panel{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:0 12px 30px rgba(2,6,23,.06)}
.hero h1{font-size:clamp(28px,4vw,42px);margin:0 0 8px;font-weight:800}
.hero p{margin:0;color:var(--muted)}
.hero-badge{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(90deg,var(--blue),#7dd3fc);color:#fff;padding:8px 12px;border-radius:999px;font-weight:700;font-size:12px;letter-spacing:.3px;margin-bottom:10px}
.mascota{display:flex;justify-content:center}
.mascota img{max-width:240px;width:100%}

/* Tarjetas sucursales */
.grid{max-width:1100px;margin:26px auto;padding:0 18px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:1024px){.grid{grid-template-columns:repeat(1,1fr)}}
@media (max-width:620px){.grid{grid-template-columns:1fr}}

.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 30px rgba(2,6,23,.06);display:flex;flex-direction:column}
.thumb{position:relative;width:100%;aspect-ratio:1/1;background:#eaf6ff;display:block}
.thumb::after{content:"Sube una imagen cuadrada";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#6b7280;font-size:13px}
.thumb.has-image::after{content:""}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.content{padding:16px 16px 18px}
.pill{display:inline-block;padding:5px 10px;border-radius:999px;background:rgba(31,182,255,.1);color:var(--blue-dark);font-size:12px;font-weight:700;margin-bottom:8px}
.title{font-size:18px;font-weight:800;margin:0 0 4px}
.addr{color:var(--muted);font-size:14px;margin:0 0 10px}
.phone{font-weight:700;}
.actions{display:flex;gap:10px;margin-top:14px}
.btn{appearance:none;border:none;border-radius:12px;padding:10px 12px;font-weight:800;cursor:pointer}
.btn.primary{background:var(--blue);color:#fff}
.btn.secondary{background:#eef6ff;color:#0b5394}
.btn:focus{outline:3px solid rgba(31,182,255,.35);outline-offset:2px}

/* Footer */
footer{max-width:1100px;margin:30px auto 50px;padding:0 18px;color:var(--muted);font-size:14px;text-align:center}
/* Reels Instagram */
.reels{max-width:1100px;margin:10px auto 26px;padding:0 18px}
.reels h2{font-size:clamp(22px,3vw,28px);margin:8px 0 14px;font-weight:800}
.reels-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1024px){.reels-grid{grid-template-columns:repeat(1,1fr)}}
@media (max-width:620px){.reels-grid{grid-template-columns:1fr}}

/* ===== Lightbox imágenes sucursales ===== */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:2000}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:min(100%,980px);max-height:85vh;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.45);transform:scale(.96);transition:transform .18s ease}
.lightbox.open img{transform:scale(1)}
.lb-close{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.95);border:none;border-radius:999px;width:40px;height:40px;font-size:28px;line-height:1;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.lb-caption{margin-top:12px;color:#fff;font-weight:800;text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.35)}
@media (max-width:620px){.lb-close{top:10px;right:10px;width:36px;height:36px}}
@media (prefers-reduced-motion: reduce){
  .lightbox,.lightbox img{transition:none}
}


/* Botón Compartir */
.btn.share{
  display:inline-flex; align-items:center; gap:8px;
  background:#eef6ff; color:#0b5394; border-radius:12px;
  padding:10px 12px; font-weight:800; border:1px solid rgba(11,83,148,.12);
}
.btn.share:hover{ background:#e3f0ff }
.btn.share svg{ display:block }
@media (max-width:620px){ .btn.share{ padding:10px } }

/* Instagram: en móviles solo ícono para evitar que el header se descuadre */
nav .ig{ gap:8px }
nav .ig svg{ width:22px; height:22px }
@media (max-width: 800px){
  nav .ig span{ display:none }
  nav .ig{ padding-right:8px }
}
/* Cuando el header se reduce, ajusta ligeramente el ícono */
header.site-header.shrink nav .ig svg{ width:20px; height:20px }


/* === Botón sticky para llamar (siempre visible) === */
.sticky-call{
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0));
  transform: translateX(-50%);
  z-index: 4500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(180deg, #1fb6ff, #0ea5e9);
  box-shadow: 0 14px 32px rgba(15,23,42,.28);
  -webkit-tap-highlight-color: transparent;
}
.sticky-call .ico{
  width: 22px; height: 22px; display: block; background:#fff;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l1.82-1.82a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.56.57a1 1 0 0 1 1 1V21a1 1 0 0 1-1 1C10.85 22 2 13.15 2 2a1 1 0 0 1 1-1h3.11a1 1 0 0 1 1 1c0 1.23.2 2.44.57 3.56a1 1 0 0 1-.24 1.01l-1.82 1.82Z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M6.62 10.79a15.05 15.05 0 0 0 6.59 6.59l1.82-1.82a1 1 0 0 1 1.01-.24c1.12.37 2.33.57 3.56.57a1 1 0 0 1 1 1V21a1 1 0 0 1-1 1C10.85 22 2 13.15 2 2a1 1 0 0 1 1-1h3.11a1 1 0 0 1 1 1c0 1.23.2 2.44.57 3.56a1 1 0 0 1-.24 1.01l-1.82 1.82Z'/></svg>") center/contain no-repeat;
}

/* En desktop lo pegamos a la esquina derecha como “sticker” */
@media (min-width: 1025px){
  .sticky-call{ left: auto; right: 16px; transform:none; }
}