/* =====================================================
   LEOZIRA.COM · SITIOS DE EJEMPLO COMPLETOS ("Live preview")
   /web-design/ejemplos/<negocio>/ y /es/diseno-web/ejemplos/<negocio>/
   Va DESPUÉS de paginas.css (las letras vienen de ahí).
   Cada negocio tiene su identidad: colores, formas, mayúsculas (las variables de abajo).
   Prefijo .ej- para no chocar con el resto. Responsive: 1 columna en celular.
   Orden: 1 identidades · 2 barra de Leozira · 3 menú · 4 portada · 5 franja ·
          6 servicios · 7 por qué · 8 galería · 9 reseñas · 10 cierre y visita · 11 móvil
   ===================================================== */

/* ---------- 1 · IDENTIDADES ---------- */
.ws-dental{--bg:#F2FAF8;--fg:#0B2B2B;--acc:#0F766E;--acc2:#5EEAD4;--accfg:#fff;--r:999px;--rf:20px;--hf:'Hanken Grotesk',sans-serif;--caps:none;--ls:0}
.ws-taller{--bg:#17120D;--fg:#fff;--acc:#FF7A1A;--acc2:#FFB000;--accfg:#17120D;--r:4px;--rf:4px;--hf:'Bricolage Grotesque',sans-serif;--caps:uppercase;--ls:.08em}
.ws-cocina{--bg:#fff;--fg:#111;--acc:#E4003A;--acc2:#FFC94D;--accfg:#fff;--r:999px;--rf:20px;--hf:'Bricolage Grotesque',sans-serif;--caps:none;--ls:0}
.ws-legal{--bg:#0F1B2D;--fg:#F2F4F7;--acc:#C9A24B;--acc2:#1E3A5F;--accfg:#0F1B2D;--r:4px;--rf:8px;--hf:'Bricolage Grotesque',sans-serif;--caps:none;--ls:.02em}
.ws-salon{--bg:#FFF1F3;--fg:#3A1F2B;--acc:#D6336C;--acc2:#FFB3C7;--accfg:#fff;--r:999px;--rf:28px;--hf:'Hanken Grotesk',sans-serif;--caps:none;--ls:0}
.ws-casas{--bg:#F4F7FB;--fg:#0B1F3A;--acc:#1D4ED8;--acc2:#93C5FD;--accfg:#fff;--r:12px;--rf:16px;--hf:'Hanken Grotesk',sans-serif;--caps:none;--ls:0}
.ws-gym{--bg:#0B0B12;--fg:#fff;--acc:#7C3AED;--acc2:#A78BFA;--accfg:#fff;--r:8px;--rf:10px;--hf:'Bricolage Grotesque',sans-serif;--caps:uppercase;--ls:.06em}

.ej{margin:0;background:var(--bg);color:var(--fg);font-family:'Hanken Grotesk',system-ui,sans-serif;font-size:20px;line-height:1.55}
.ej *{box-sizing:border-box}
.ej img{display:block;max-width:100%}
.ej a{color:inherit}
.ej h1,.ej h2,.ej h3{font-family:var(--hf);text-transform:var(--caps);letter-spacing:-.02em;line-height:1.05;margin:0}
.ej-w{max-width:1180px;margin:0 auto;padding:0 28px}
.ej-btn,.ej-btn2,.ej-btn3{display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:19px;padding:15px 30px;border-radius:var(--r);text-decoration:none;border:2px solid var(--acc);cursor:pointer}
.ej-btn{background:var(--acc);color:var(--accfg)}
.ej-btn2{background:transparent;color:#fff;border-color:#fff}
.ej-btn3{background:#1FA855;border-color:#1FA855;color:#fff}
.ej-botones{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
.ej-btn:focus-visible,.ej-btn2:focus-visible,.ej-btn3:focus-visible,.ej a:focus-visible{outline:3px solid currentColor;outline-offset:3px}

/* ---------- 2 · BARRA DE LEOZIRA (siempre a la vista) ---------- */
.ej-barra{position:sticky;top:0;z-index:50;background:#0B0E13;color:#F2F4F7;border-bottom:1px solid #262E3B}
.ej-barra-in{max-width:1280px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;font-family:'Hanken Grotesk',sans-serif}
.ej-barra a{text-decoration:none}
.ej-volver{font-weight:700;font-size:18px;color:#F2F4F7}
.ej-aviso{font-size:18px;color:#A7B0BD;flex:1;min-width:240px}
.ej-barra-d{display:flex;gap:12px;align-items:center}
.ej-otro{font-weight:700;font-size:18px;border:1px solid #262E3B;border-radius:999px;padding:6px 16px;color:#F2F4F7}
.ej-quiero{font-weight:800;font-size:18px;background:#DC2F28;color:#fff;border-radius:12px;padding:9px 20px}

/* ---------- 3 · MENÚ ---------- */
.ej-nav{background:var(--bg);border-bottom:1px solid color-mix(in srgb,var(--fg) 14%,transparent)}
.ej-nav .ej-w{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:84px}
.ej-marca{font-family:var(--hf);font-size:26px;letter-spacing:var(--ls)}
.ej-nav nav{display:flex;gap:30px;font-weight:600;font-size:19px}
.ej-nav nav a{text-decoration:none;opacity:.85}

/* ---------- 4 · PORTADA ---------- */
.ej-hero{position:relative;min-height:min(78vh,720px);display:flex;align-items:center;overflow:hidden;color:#fff;isolation:isolate}
.ej-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.ej-hero-v{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 94%,#000) 0%,color-mix(in srgb,var(--bg) 78%,transparent) 50%,color-mix(in srgb,var(--bg) 12%,transparent) 90%)}
.ej-hero-in{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-top:70px;padding-bottom:70px}
.ej-hero h1{font-size:clamp(40px,6vw,84px);max-width:11em;color:var(--fg)}
.ej-pill{background:color-mix(in srgb,var(--acc) 22%,transparent);border:1px solid color-mix(in srgb,var(--acc) 70%,transparent);color:var(--fg);font-weight:700;font-size:18px;padding:5px 18px;border-radius:999px}
.ws-dental .ej-hero,.ws-cocina .ej-hero,.ws-salon .ej-hero,.ws-casas .ej-hero{color:var(--fg)}
.ws-dental .ej-btn2,.ws-cocina .ej-btn2,.ws-salon .ej-btn2,.ws-casas .ej-btn2{color:var(--fg);border-color:var(--fg)}

/* ---------- 5 · FRANJA ---------- */
.ej-strip{background:var(--acc);color:var(--accfg)}
.ej-strip .ej-w{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:22px;padding-bottom:22px;font-weight:800;font-size:21px;text-align:center}

/* ---------- 6 · SERVICIOS Y SECCIONES ---------- */
.ej-sec{padding:96px 0}
.ej-alt{background:color-mix(in srgb,var(--fg) 6%,var(--bg))}
.ej-sec h2{font-size:clamp(32px,4.2vw,52px);margin-bottom:40px}
.ej-svs{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.ej-svs article{background:color-mix(in srgb,var(--fg) 7%,var(--bg));border-radius:var(--rf);overflow:hidden;display:flex;flex-direction:column;gap:10px;padding-bottom:26px}
.ej-svs img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ej-svs h3{font-size:28px;padding:10px 26px 0}
.ej-svs p{margin:0;padding:0 26px;opacity:.88}

/* ---------- 7 · POR QUÉ ---------- */
.ej-dos{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ej-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--rf)*1.4);box-shadow:0 30px 60px -24px rgba(0,0,0,.5)}
.ej-lead{font-size:24px;margin:0 0 22px;opacity:.9}
.ej ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.ej li{display:flex;gap:14px;align-items:flex-start;font-weight:700;font-size:21px}
.ej li svg{flex:none;width:26px;height:26px;margin-top:3px;stroke:var(--acc);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 8 · GALERÍA ---------- */
.ej-gal{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}
.ej-gal img{width:100%;height:100%;min-height:300px;object-fit:cover;border-radius:var(--rf)}
.ej-gal img:first-child{grid-row:span 1;min-height:380px}

/* ---------- 9 · RESEÑAS ---------- */
.ej-res{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ej-res figure{margin:0;background:var(--bg);border:1px solid color-mix(in srgb,var(--fg) 14%,transparent);border-radius:var(--rf);padding:28px;display:flex;flex-direction:column;gap:12px}
.ej-est{color:#F5A400;letter-spacing:.18em;font-size:22px}
.ej-res blockquote{margin:0;font-family:var(--hf);font-weight:700;font-size:24px;line-height:1.25}
.ej-res figcaption{opacity:.7;font-size:18px}

/* ---------- 10 · CIERRE Y VISITA ---------- */
.ej-cta{background:var(--fg);color:var(--bg)}
.ej-cta .ej-w{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding-top:64px;padding-bottom:64px}
.ej-cta h2{font-size:clamp(30px,3.6vw,46px);max-width:16em;margin:0}
.ej-cta .ej-btn{background:var(--acc);color:var(--accfg)}
.ej-dato{margin:0 0 8px;font-size:22px;font-weight:600}
.ej-pie{background:#0B0E13;color:#A7B0BD;font-family:'Hanken Grotesk',sans-serif;font-size:18px}
.ej-pie .ej-w{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:28px;padding-bottom:28px}
.ej-pie b{color:#F2F4F7;font-family:var(--hf)}
.ej-pie a{color:#F2F4F7}

/* ---------- 11 · MÓVIL ---------- */
@media (max-width:900px){
  .ej-nav nav{display:none}
  .ej-strip .ej-w,.ej-svs,.ej-res{grid-template-columns:1fr}
  .ej-dos{grid-template-columns:1fr;gap:32px}
  .ej-gal{grid-template-columns:1fr}
  .ej-gal img,.ej-gal img:first-child{min-height:220px}
  .ej-sec{padding:64px 0}
  .ej-hero-v{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 75%,transparent),color-mix(in srgb,var(--bg) 92%,#000))}
  .ej-w{padding:0 18px}
}
@media (max-width:560px){.ej-aviso{display:none}.ej-quiero{padding:9px 14px}}