/* Demostraciones por sector: una base común y un tema completo por sector. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font: 400 16px/1.55 var(--f-texto, system-ui); background: var(--bg); color: var(--fg); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }
.d-aviso { background: #141412; color: #f4eddd; font: 500 12px/1.3 system-ui; text-align: center; padding: 7px 12px; letter-spacing: 0.04em; }
.d-nav { display: flex; align-items: center; gap: 28px; padding: 18px clamp(18px, 5vw, 56px); position: sticky; top: 0; z-index: 5; background: var(--nav-bg, var(--bg)); }
.d-logo { font: var(--f-logo); text-decoration: none; margin-right: auto; letter-spacing: var(--logo-ls, 0); }
.d-nav nav { display: flex; gap: 24px; }
.d-nav nav a { text-decoration: none; font-size: 0.93rem; opacity: 0.8; }
.d-nav nav a:hover { opacity: 1; }
.d-btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border: 0; background: var(--acento); color: var(--acento-fg); padding: 13px 22px; border-radius: var(--radio-btn, 999px); font-weight: 600; font-size: 0.95rem; transition: transform 0.2s, filter 0.2s; }
.d-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.d-btn[disabled] { opacity: 0.4; pointer-events: none; }
.d-btn-nav { padding: 9px 16px; font-size: 0.88rem; }
.d-hero { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; padding: clamp(32px, 6vw, 80px) clamp(18px, 5vw, 56px); }
.d-kick { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--acento-txt, var(--acento)); margin-bottom: 18px; font-weight: 600; }
.d-hero h1 { font: var(--f-h1); letter-spacing: var(--h1-ls, -0.02em); text-wrap: balance; }
.d-hero h1 em { font-style: var(--em-style, italic); color: var(--em-color, inherit); font-weight: var(--em-weight, inherit); }
.d-lead { margin: 22px 0 28px; font-size: 1.1rem; max-width: 30em; opacity: 0.85; }
.d-hero-img { aspect-ratio: 4 / 5; background: var(--ph, #999) center / cover no-repeat; border-radius: var(--radio-img, 0); }
.d-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); border-block: 1px solid var(--linea); }
.d-info div { background: var(--bg); padding: 24px clamp(18px, 5vw, 56px); }
.d-info small { display: block; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; margin-bottom: 6px; }
.d-widget { padding: clamp(40px, 7vw, 88px) clamp(18px, 5vw, 56px); background: var(--bg-2, var(--bg)); scroll-margin-top: 70px; }
.d-widget h2 { font: var(--f-h2); margin-bottom: 26px; letter-spacing: var(--h1-ls, -0.02em); }
.w-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.w-tabs button, .w-opts button { background: transparent; border: 1.5px solid var(--linea-f, var(--linea)); padding: 10px 18px; border-radius: var(--radio-btn, 999px); font-weight: 600; transition: background 0.2s, color 0.2s; }
.w-tabs button[aria-selected="true"], .w-opts button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.w-panel { max-width: 760px; animation: entra 0.4s ease; }
@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
.w-row { display: flex; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 1px dashed var(--linea-f, var(--linea)); font-size: 1.05rem; }
.w-row b { white-space: nowrap; }
.w-row.hoy { font-weight: 700; color: var(--acento-txt, var(--acento)); }
.w-cards { max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.w-cards article { display: grid; gap: 6px; }
.w-cards h3 { font: var(--f-h3, 600 1.1rem var(--f-texto)); }
.w-cards p { font-size: 0.9rem; opacity: 0.7; }
.w-ph { aspect-ratio: 4 / 3; border-radius: var(--radio-img, 0); background: linear-gradient(135deg, var(--ph), var(--ph-2, var(--linea))); margin-bottom: 6px; }
.w-prod .w-ph { aspect-ratio: 1; display: grid; place-items: center; }
.w-prod .w-ph::after { content: ""; width: 42%; aspect-ratio: 1; border-radius: 50%; border: 6px solid rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.15); }
.w-add { justify-self: start; margin-top: 6px; background: var(--fg); color: var(--bg); border: 0; padding: 9px 16px; border-radius: var(--radio-btn, 999px); font-weight: 600; font-size: 0.88rem; }
.w-label { font-weight: 600; margin: 0 0 10px; }
.w-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.w-opts small { display: block; font-weight: 400; font-size: 0.78rem; opacity: 0.7; }
.w-ok { margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: var(--ok-bg, rgba(40, 160, 90, 0.14)); font-weight: 600; max-width: 560px; }
.w-estado { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; padding: 10px 16px; border-radius: 999px; margin-bottom: 22px; background: var(--bg); border: 1.5px solid var(--linea-f, var(--linea)); }
.w-estado i { width: 10px; height: 10px; border-radius: 50%; background: #c0392b; }
.w-estado.si i { background: #2a9d5c; box-shadow: 0 0 0 4px rgba(42, 157, 92, 0.25); }
.w-horario { max-width: 520px; }
.d-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 26px clamp(18px, 5vw, 56px); font-size: 0.88rem; border-top: 1px solid var(--linea); opacity: 0.8; }

/* 1 · Restaurante: oscuro, serif fina, foto a sangre */
[data-s="restaurante"] { --bg: #120d0a; --fg: #f1e3cb; --acento: #c98b3c; --acento-fg: #120d0a; --linea: rgba(241, 227, 203, 0.18); --bg-2: #1a120d; --ph: #3a2616;
  --f-texto: "Jost", sans-serif; --f-logo: italic 500 1.7rem "Cormorant Garamond", serif; --f-h1: 500 clamp(3rem, 8vw, 6.4rem)/0.95 "Cormorant Garamond", serif; --f-h2: italic 500 clamp(2.2rem, 5vw, 3.4rem)/1 "Cormorant Garamond", serif; --em-color: #c98b3c; --radio-btn: 2px; --nav-bg: rgba(18, 13, 10, 0.9); }
[data-s="restaurante"] .d-hero { grid-template-columns: 1fr; text-align: center; position: relative; min-height: 78vh; padding-block: 12vh; }
[data-s="restaurante"] .d-hero-img { position: absolute; inset: 0; aspect-ratio: auto; filter: brightness(0.42); }
[data-s="restaurante"] .d-hero-t { position: relative; z-index: 1; justify-self: center; }
[data-s="restaurante"] .d-lead { margin-inline: auto; }
[data-s="restaurante"] .w-panel { margin-inline: auto; } [data-s="restaurante"] .d-widget { text-align: center; } [data-s="restaurante"] .w-tabs { justify-content: center; } [data-s="restaurante"] .w-row { text-align: left; font: 500 1.35rem "Cormorant Garamond", serif; }

/* 2 · Peluquería: pastel, formas redondas, tipografía ancha */
[data-s="peluqueria"] { --bg: #fbe9e4; --fg: #2b1620; --acento: #2b1620; --acento-fg: #fbe9e4; --acento-txt: #b24a6a; --linea: rgba(43, 22, 32, 0.16); --bg-2: #f6d5cf; --ph: #e9b7ae;
  --f-texto: "Outfit", sans-serif; --f-logo: 800 1.4rem "Syne", sans-serif; --f-h1: 800 clamp(2.6rem, 7vw, 5.4rem)/0.98 "Syne", sans-serif; --f-h2: 800 clamp(1.9rem, 4.5vw, 3rem)/1 "Syne", sans-serif; --em-color: #b24a6a; --em-style: normal; --radio-img: 999px 999px 24px 24px; --h1-ls: -0.04em; }
[data-s="peluqueria"] .d-hero { grid-template-columns: 1.1fr 0.9fr; }
[data-s="peluqueria"] .d-hero-img { max-width: 420px; justify-self: center; width: 100%; box-shadow: 18px 18px 0 #b24a6a; }
[data-s="peluqueria"] .w-opts button { background: #fff; border-color: transparent; }

/* 3 · Gimnasio: negro y lima, mayúsculas condensadas, cortes en diagonal */
[data-s="gimnasio"] { --bg: #0a0a0a; --fg: #f2f2f2; --acento: #d7ff3e; --acento-fg: #0a0a0a; --linea: rgba(255, 255, 255, 0.16); --bg-2: #111; --ph: #222;
  --f-texto: "Inter", sans-serif; --f-logo: 400 1.9rem "Anton", sans-serif; --logo-ls: 0.08em; --f-h1: 400 clamp(3.4rem, 10vw, 8rem)/0.9 "Anton", sans-serif; --f-h2: 400 clamp(2.4rem, 6vw, 4rem)/1 "Anton", sans-serif; --em-color: #d7ff3e; --em-style: normal; --radio-btn: 0; --h1-ls: 0; }
[data-s="gimnasio"] h1, [data-s="gimnasio"] h2 { text-transform: uppercase; }
[data-s="gimnasio"] .d-hero { grid-template-columns: 1.2fr 0.8fr; }
[data-s="gimnasio"] .d-hero-img { filter: grayscale(1) contrast(1.2); clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%); }
[data-s="gimnasio"] .d-info div { background: #d7ff3e; color: #0a0a0a; } [data-s="gimnasio"] .d-info { background: #0a0a0a; border: 0; gap: 3px; }
[data-s="gimnasio"] .w-row { border-bottom-style: solid; text-transform: uppercase; font-weight: 600; letter-spacing: 0.03em; }

/* 4 · Clínica: claro, aire, bordes muy redondos */
[data-s="clinica"] { --bg: #f3f9fa; --fg: #0f3b46; --acento: #0f7c8c; --acento-fg: #fff; --linea: rgba(15, 59, 70, 0.12); --bg-2: #e2f1f3; --ph: #bfe0e5;
  --f-texto: "Manrope", sans-serif; --f-logo: 800 1.3rem "Manrope", sans-serif; --f-h1: 800 clamp(2.6rem, 6.4vw, 5rem)/1.02 "Manrope", sans-serif; --f-h2: 800 clamp(1.9rem, 4.4vw, 2.8rem)/1.05 "Manrope", sans-serif; --em-color: #0f7c8c; --em-style: normal; --radio-img: 40% 60% 55% 45% / 50% 45% 55% 50%; --h1-ls: -0.04em; }
[data-s="clinica"] .d-hero-img { aspect-ratio: 1; }
[data-s="clinica"] .d-info { background: transparent; border: 0; gap: 14px; padding: 0 clamp(18px, 5vw, 56px) 40px; }
[data-s="clinica"] .d-info div { background: #fff; border-radius: 20px; padding: 22px; box-shadow: 0 12px 30px -18px rgba(15, 59, 70, 0.4); }
[data-s="clinica"] .w-cita { background: #fff; border-radius: 28px; padding: clamp(20px, 4vw, 36px); max-width: 640px; box-shadow: 0 20px 50px -30px rgba(15, 59, 70, 0.5); }

/* 5 · Inmobiliaria: editorial, blanco, serif de contraste */
[data-s="inmobiliaria"] { --bg: #fbfaf7; --fg: #1c1c1a; --acento: #1c1c1a; --acento-fg: #fbfaf7; --acento-txt: #8a6d3b; --linea: rgba(28, 28, 26, 0.14); --bg-2: #f1eee6; --ph: #cfc7b5; --ph-2: #a89f8a;
  --f-texto: "Inter", sans-serif; --f-logo: 800 1.5rem "Playfair Display", serif; --f-h1: 500 clamp(2.6rem, 6.6vw, 5.2rem)/1.02 "Playfair Display", serif; --f-h2: 500 clamp(2rem, 4.6vw, 3rem)/1.05 "Playfair Display", serif; --f-h3: 500 1.3rem "Playfair Display", serif; --em-color: #8a6d3b; --radio-btn: 0; }
[data-s="inmobiliaria"] .d-hero { grid-template-columns: 0.8fr 1.2fr; align-items: end; }
[data-s="inmobiliaria"] .d-hero-img { aspect-ratio: 16 / 11; }
[data-s="inmobiliaria"] .w-cards article b { font-size: 1.1rem; }

/* 6 · Negocio local: papel kraft, serif robusta, sello */
[data-s="local"] { --bg: #f2e6d0; --fg: #3a2414; --acento: #a8431f; --acento-fg: #fff7ea; --linea: rgba(58, 36, 20, 0.2); --bg-2: #e8d7b8; --ph: #caa46a;
  --f-texto: "Karla", sans-serif; --f-logo: 800 1.4rem "Bitter", serif; --f-h1: 800 clamp(2.4rem, 6vw, 4.6rem)/1.04 "Bitter", serif; --f-h2: 800 clamp(1.9rem, 4.4vw, 2.8rem)/1.05 "Bitter", serif; --em-color: #a8431f; --em-weight: 500; --radio-btn: 8px; --radio-img: 12px; }
[data-s="local"] .d-hero { grid-template-columns: 0.9fr 1.1fr; }
[data-s="local"] .d-hero-img { order: -1; aspect-ratio: 5 / 4; border: 6px solid #fff7ea; box-shadow: 0 20px 40px -24px rgba(58, 36, 20, 0.7); transform: rotate(-2deg); }
[data-s="local"] .d-kick { display: inline-block; border: 2px solid #a8431f; padding: 5px 12px; border-radius: 4px; transform: rotate(-2deg); }

/* 7 · Tienda online: minimalista, monocromo, rejilla */
[data-s="tienda"] { --bg: #ffffff; --fg: #0d0d0d; --acento: #0d0d0d; --acento-fg: #fff; --acento-txt: #6b6b6b; --linea: #e6e6e6; --bg-2: #f6f6f4; --ph: #e9e6df;
  --f-texto: "Space Grotesk", sans-serif; --f-logo: 700 1.6rem "Space Grotesk", sans-serif; --logo-ls: -0.04em; --f-h1: 500 clamp(2.8rem, 7.4vw, 6rem)/0.98 "Space Grotesk", sans-serif; --f-h2: 500 clamp(1.8rem, 4vw, 2.6rem)/1 "Space Grotesk", sans-serif; --em-color: #9a9a9a; --em-style: normal; --radio-btn: 0; --h1-ls: -0.05em; }
[data-s="tienda"] .d-hero { grid-template-columns: 1fr 1fr; padding-block: 0; padding-right: 0; }
[data-s="tienda"] .d-hero-img { aspect-ratio: 1; }
[data-s="tienda"] .d-btn-nav span { background: #fff; color: #0d0d0d; border-radius: 999px; min-width: 22px; text-align: center; padding: 0 6px; }

@media (max-width: 720px) {
  .d-nav nav { display: none; }
  .d-hero, [data-s] .d-hero { grid-template-columns: 1fr; }
  [data-s="tienda"] .d-hero { padding-right: clamp(18px, 5vw, 56px); padding-block: 32px; }
  .d-info { grid-template-columns: 1fr; }
  [data-s="gimnasio"] .d-hero-img { clip-path: none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before { animation: none !important; transition: none !important; } }