/* ===== Cotizador: campos de detalle (tattoo) ===== */
.detail-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 18px; }
.detail-fields label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 700; }
.detail-fields select, .detail-fields input { width: 100%; min-width: 0; padding: 9px; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); background: var(--white); font-size: 12px; }
.detail-fields input[type="range"] { padding-inline: 0; accent-color: var(--green); }
.detail-fields .reference-field small { min-height: 28px; color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.3; }
.detail-fields .check-field { display: flex; align-items: center; gap: 9px; min-height: 58px; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--white); }
.detail-fields .check-field input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--green); }
.detail-fields .check-field span { color: var(--ink); font-size: 12px; font-weight: 600; line-height: 1.35; }
.detail-fields label output { color: var(--green); font-size: 11px; }
.detail-fields .disabled-field { opacity: .45; }
.detail-fields .disabled-field input { pointer-events: none; }

/* ===== Chat (WhatsApp + burbujas compartidas) ===== */
.chat-demo { min-height: 0; }
.chat-log { min-height: 390px; }
.typing { align-self: flex-start; color: var(--muted); font-size: 11px; font-style: italic; }
.chat-input { grid-template-columns: auto 1fr auto; }
.attach { display: grid; place-items: center; width: 38px; border: 1px solid var(--line); border-radius: 4px; color: var(--green); background: var(--white); font-size: 20px; cursor: pointer; }
.attach input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

/* ============================================================
   MINI SITIO WEB DEL NEGOCIO
   ============================================================ */
.web-site { position: relative; background: var(--white); min-height: 640px; }

/* --- barra de navegacion --- */
.mini-nav { display: flex; align-items: center; gap: 16px; padding: 14px clamp(16px, 3vw, 28px); border-bottom: 1px solid var(--line); background: var(--white); position: sticky; top: 0; z-index: 5; }
.mini-brand { display: flex; align-items: center; gap: 9px; margin-right: auto; }
.mini-brand span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--white); background: var(--night); font: 700 12px "Space Grotesk", sans-serif; }
.mini-brand b { font: 600 15px "Space Grotesk", sans-serif; }
.mini-links { display: flex; gap: 4px; }
.mini-links button { padding: 8px 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; }
.mini-links button:hover { color: var(--ink); background: #f1f3f0; }
.mini-links button.active { color: var(--green); background: var(--soft); }
.mini-cta { padding: 9px 16px; border: 0; border-radius: 6px; color: var(--white); background: var(--green); font-size: 13px; font-weight: 700; }
.mini-cta:hover { filter: brightness(1.08); }

.mini-body { padding: clamp(18px, 3vw, 30px); }
.mini-view { animation: arrive .25s ease both; }
.view-head { margin-bottom: 16px; }
.view-head h3 { margin: 0; font: 600 24px "Space Grotesk", sans-serif; }
.view-head p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; max-width: 560px; }

/* --- hero --- */
.hero { position: relative; min-height: 340px; border-radius: 12px; overflow: hidden; display: flex; align-items: flex-end; color: var(--white); background: var(--night); }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.hero img.img-failed { display: none; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,34,29,.15) 0%, rgba(19,34,29,.9) 100%); }
.hero-copy { position: relative; z-index: 1; padding: clamp(22px, 3vw, 40px); max-width: 560px; }
.hero-copy p { margin: 0 0 10px; color: #f0aa94; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.hero-copy h2 { margin: 0; font: 600 clamp(28px, 3.6vw, 44px)/1.02 "Space Grotesk", sans-serif; }
.hero-copy span { display: block; margin-top: 12px; color: #e0e7e2; font-size: 14px; line-height: 1.5; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.btn-primary { padding: 12px 20px; border: 0; border-radius: 7px; color: var(--white); background: var(--green); font-size: 13px; font-weight: 700; }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { padding: 12px 18px; border: 1px solid rgba(255,255,255,.5); border-radius: 7px; color: var(--white); background: rgba(255,255,255,.08); font-size: 13px; font-weight: 700; }
.btn-ghost:hover { background: rgba(255,255,255,.18); }

/* --- franja de info --- */
.info-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.info-strip div { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fcfbf8; }
.info-strip b { display: block; font: 600 14px "Space Grotesk", sans-serif; }
.info-strip small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }

/* --- highlights --- */
.highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.hl { padding: 18px; border: 1px solid var(--line); border-radius: 12px; }
.hl .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--green); background: var(--soft); font-size: 17px; }
.hl b { display: block; margin-top: 12px; font: 600 15px "Space Grotesk", sans-serif; }
.hl small { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }

/* --- galeria --- */
.gallery-preview { margin-top: 22px; }
.gp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.gp-head b { font: 600 16px "Space Grotesk", sans-serif; }
.link-btn { border: 0; background: transparent; color: var(--green); font-size: 13px; font-weight: 700; }
.gp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tile { position: relative; margin: 0; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg, #dfe6e1, #c7d4cd); }
.tile::after { content: "Foto de muestra"; position: absolute; inset: 0; display: grid; place-items: center; color: #7c8a83; font-size: 11px; font-weight: 600; opacity: 0; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.tile:hover img { transform: scale(1.05); }
.tile img.img-failed { display: none; }
.tile:has(img.img-failed)::after { opacity: 1; }

/* --- cotizador (reusa offer-list, quote-panel, date-row, etc. de ae-demo.css) --- */
.cotizador { max-width: 720px; }
.cotizador .flow-step { margin-bottom: 6px; }
.cotizador .offer-list { grid-template-columns: repeat(3, 1fr); }

/* --- contacto --- */
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.contact-card { padding: 18px; border: 1px solid var(--line); border-radius: 12px; }
.contact-card .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--green); background: var(--soft); font-size: 17px; }
.contact-card b { display: block; margin-top: 12px; font: 600 14px "Space Grotesk", sans-serif; }
.contact-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.contact-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; padding: 20px 22px; border-radius: 14px; color: var(--white); background: var(--night); }
.contact-cta b { display: block; font: 600 17px "Space Grotesk", sans-serif; }
.contact-cta small { display: block; margin-top: 4px; color: #c3cdc8; font-size: 12.5px; }

/* --- asistente flotante --- */
.web-fab { position: absolute; right: 18px; bottom: 18px; z-index: 6; display: flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; border-radius: 999px; color: var(--white); background: var(--green); font-size: 13px; font-weight: 700; box-shadow: 0 12px 30px rgba(13,106,88,.35); }
.web-fab span { font-size: 16px; }
.web-fab.open { opacity: 0; pointer-events: none; }
.web-pop { position: absolute; right: 18px; bottom: 18px; z-index: 7; width: min(360px, calc(100% - 36px)); height: 460px; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #e9eeeb; box-shadow: 0 24px 60px rgba(24,34,31,.28); animation: arrive .2s ease both; }
.web-pop[hidden] { display: none; }
.web-pop-head { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; padding: 13px 14px; color: var(--white); background: var(--night); }
.web-pop-head > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #3c5b50; font: 700 11px "Space Grotesk", sans-serif; }
.web-pop-head strong { display: block; font-size: 13px; }
.web-pop-head small { display: block; margin-top: 2px; color: #a8e4c8; font-size: 10px; font-weight: 700; }
.web-pop-head button { border: 0; background: transparent; color: #c3cdc8; font-size: 15px; cursor: pointer; }
.web-pop-log { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 14px; overflow: auto; }
.web-pop-log .bubble { max-width: 88%; font-size: 12.5px; }
.web-pop-input { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; background: var(--white); border-top: 1px solid var(--line); }
.web-pop-input input { min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); font-size: 13px; }
.web-pop-input button { padding: 0 14px; border: 0; border-radius: 6px; color: var(--white); background: var(--green); font-size: 12px; font-weight: 700; }

/* ============================================================
   IDENTIDADES POR RUBRO
   El motor es el mismo; la direccion visual cambia por negocio.
   ============================================================ */
.theme-enter { animation: themeReveal .42s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes themeReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

body[data-scenario="tattoo"] .web-site,
body[data-scenario="tattoo"] .chat-demo {
  --green: #b64b31; --night: #171310; --soft: #eadfd6; --line: #d0c2b7;
  --white: #f8f3ed; --ink: #251d18; --muted: #75665c;
}
body[data-scenario="beauty"] .web-site,
body[data-scenario="beauty"] .chat-demo {
  --green: #9d4e70; --night: #552b3e; --soft: #f3dce6; --line: #e3c7d3;
  --white: #fff9fb; --ink: #492737; --muted: #7a5967;
}
body[data-scenario="realty"] .web-site,
body[data-scenario="realty"] .chat-demo {
  --green: #246052; --night: #173630; --soft: #dceae5; --line: #c9d7d2;
  --white: #fafcfb; --ink: #1b302b; --muted: #61736d;
}
body[data-scenario="auto"] .web-site,
body[data-scenario="auto"] .chat-demo {
  --green: #b6372d; --night: #171a1b; --soft: #edddda; --line: #c8cdcd;
  --white: #f6f7f5; --ink: #181b1c; --muted: #61696a;
}

body[data-scenario] .scenario.active { border-color: var(--scenario-accent, var(--green)); }
body[data-scenario="tattoo"] { --scenario-accent: #b64b31; }
body[data-scenario="beauty"] { --scenario-accent: #9d4e70; }
body[data-scenario="realty"] { --scenario-accent: #246052; }
body[data-scenario="auto"] { --scenario-accent: #b6372d; }
body[data-scenario] .channel.active { border-color: var(--scenario-accent); }

/* Tattoo: editorial oscuro, texturas y composicion asimetrica */
body[data-scenario="tattoo"] .mini-nav { color: #f8f3ed; border-color: #332923; background: #171310; }
body[data-scenario="tattoo"] .mini-brand span { border: 1px solid #5f4b40; border-radius: 50%; background: #2b211b; }
body[data-scenario="tattoo"] .mini-brand b { text-transform: uppercase; letter-spacing: .08em; }
body[data-scenario="tattoo"] .mini-links button { color: #c7b7ac; border-radius: 2px; }
body[data-scenario="tattoo"] .mini-links button:hover { color: #f8f3ed; background: #2a211c; }
body[data-scenario="tattoo"] .mini-links button.active { color: #f4b49f; background: #31231d; }
body[data-scenario="tattoo"] .mini-cta { border-radius: 2px; text-transform: uppercase; letter-spacing: .06em; }
body[data-scenario="tattoo"] .mini-body { background: #eee7df; }
body[data-scenario="tattoo"] .hero { min-height: 430px; border-radius: 2px; background: #171310; }
body[data-scenario="tattoo"] .hero img { filter: grayscale(1) contrast(1.16); opacity: .58; }
body[data-scenario="tattoo"] .hero::after { background: linear-gradient(90deg, #171310 0%, rgba(23,19,16,.82) 42%, rgba(23,19,16,.16) 100%); }
body[data-scenario="tattoo"] .hero-copy { max-width: 610px; }
body[data-scenario="tattoo"] .hero-copy p { color: #e89072; }
body[data-scenario="tattoo"] .hero-copy h2 { max-width: 11ch; font-size: clamp(38px, 5vw, 64px); line-height: .94; text-transform: uppercase; }
body[data-scenario="tattoo"] .hero-copy span { max-width: 46ch; color: #e1d4cb; }
body[data-scenario="tattoo"] .btn-primary,
body[data-scenario="tattoo"] .btn-ghost { border-radius: 2px; }
body[data-scenario="tattoo"] .info-strip div,
body[data-scenario="tattoo"] .hl,
body[data-scenario="tattoo"] .contact-card { border-radius: 2px; background: #f8f3ed; }
body[data-scenario="tattoo"] .hl { border-top: 3px solid #b64b31; }
body[data-scenario="tattoo"] .hl .ic,
body[data-scenario="tattoo"] .contact-card .ic { border-radius: 50%; }
body[data-scenario="tattoo"] .gp-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
body[data-scenario="tattoo"] .tile { border-radius: 2px; }
body[data-scenario="tattoo"] .offer,
body[data-scenario="tattoo"] .date-row button,
body[data-scenario="tattoo"] .time-row button { border-radius: 2px; }
body[data-scenario="tattoo"] .offer.selected { color: #f8f3ed; background: #251d18; }

/* Estetica: editorial suave, tipografia serif y superficies luminosas */
body[data-scenario="beauty"] .mini-nav { border-color: #ead5de; background: #fff9fb; }
body[data-scenario="beauty"] .mini-brand span { border-radius: 50%; background: #8b4563; font-family: "Fraunces", serif; }
body[data-scenario="beauty"] .mini-brand b { color: #552b3e; font: 600 18px "Fraunces", serif; }
body[data-scenario="beauty"] .mini-links button { color: #775665; }
body[data-scenario="beauty"] .mini-links button.active { color: #733650; background: #f3dce6; }
body[data-scenario="beauty"] .mini-cta { border-radius: 999px; padding-inline: 20px; }
body[data-scenario="beauty"] .mini-body { background: #fff9fb; }
body[data-scenario="beauty"] .hero { min-height: 430px; border-radius: 8px; background: #552b3e; }
body[data-scenario="beauty"] .hero img { opacity: .72; filter: saturate(.82) contrast(.92); }
body[data-scenario="beauty"] .hero::after { background: linear-gradient(90deg, rgba(75,31,50,.94) 0%, rgba(75,31,50,.66) 48%, rgba(75,31,50,.08) 100%); }
body[data-scenario="beauty"] .hero-copy { max-width: 620px; }
body[data-scenario="beauty"] .hero-copy p { color: #f1c2d4; }
body[data-scenario="beauty"] .hero-copy h2 { max-width: 13ch; font: 600 clamp(38px, 4.7vw, 60px)/1 "Fraunces", serif; }
body[data-scenario="beauty"] .hero-copy span { max-width: 45ch; color: #f9eaf0; }
body[data-scenario="beauty"] .btn-primary { border-radius: 999px; }
body[data-scenario="beauty"] .btn-ghost { border-radius: 999px; }
body[data-scenario="beauty"] .info-strip div { border: 0; border-bottom: 1px solid #dfbdcc; border-radius: 0; background: transparent; }
body[data-scenario="beauty"] .highlights { gap: 18px; }
body[data-scenario="beauty"] .hl { border: 0; border-radius: 8px; background: #f8eaf0; }
body[data-scenario="beauty"] .hl b,
body[data-scenario="beauty"] .view-head h3,
body[data-scenario="beauty"] .gp-head b { font-family: "Fraunces", serif; }
body[data-scenario="beauty"] .tile { border-radius: 8px; }
body[data-scenario="beauty"] .gallery-grid .tile:nth-child(3n+1) { aspect-ratio: 4 / 5; }
body[data-scenario="beauty"] .offer { border-radius: 8px; background: #fffdfd; }
body[data-scenario="beauty"] .offer.selected { border-color: #9d4e70; background: #f3dce6; }
body[data-scenario="beauty"] .contact-cta { background: #552b3e; }

/* Inmobiliaria: grilla arquitectonica, aire y foco en la propiedad */
body[data-scenario="realty"] .mini-nav { border-bottom: 2px solid #173630; background: #fafcfb; }
body[data-scenario="realty"] .mini-brand span { border-radius: 2px; background: #173630; }
body[data-scenario="realty"] .mini-brand b { color: #173630; font-size: 16px; letter-spacing: .02em; }
body[data-scenario="realty"] .mini-links button { border-radius: 0; }
body[data-scenario="realty"] .mini-links button.active { color: #173630; box-shadow: inset 0 -2px #246052; background: transparent; }
body[data-scenario="realty"] .mini-cta { border-radius: 2px; }
body[data-scenario="realty"] .mini-body { background: #f2f6f4; }
body[data-scenario="realty"] .hero { min-height: 455px; border-radius: 0; background: #173630; }
body[data-scenario="realty"] .hero img { opacity: .78; }
body[data-scenario="realty"] .hero::after { background: linear-gradient(90deg, rgba(17,45,39,.9) 0%, rgba(17,45,39,.55) 46%, rgba(17,45,39,.08) 100%); }
body[data-scenario="realty"] .hero-copy { max-width: 680px; }
body[data-scenario="realty"] .hero-copy p { color: #bfe0d6; }
body[data-scenario="realty"] .hero-copy h2 { max-width: 13ch; font: 600 clamp(39px, 4.8vw, 62px)/1 "Fraunces", serif; }
body[data-scenario="realty"] .info-strip { position: relative; z-index: 2; margin: -34px 24px 28px; border: 1px solid #c9d7d2; background: #fafcfb; }
body[data-scenario="realty"] .info-strip div { border: 0; border-right: 1px solid #c9d7d2; border-radius: 0; background: transparent; }
body[data-scenario="realty"] .info-strip div:last-child { border-right: 0; }
body[data-scenario="realty"] .hl { border: 0; border-left: 2px solid #246052; border-radius: 0; background: transparent; }
body[data-scenario="realty"] .hl .ic { border-radius: 2px; }
body[data-scenario="realty"] .gp-grid { grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: repeat(2, minmax(110px, 1fr)); }
body[data-scenario="realty"] .gp-grid .tile:first-child { grid-row: 1 / 3; }
body[data-scenario="realty"] .gp-grid .tile:nth-child(4) { display: none; }
body[data-scenario="realty"] .tile { border-radius: 0; aspect-ratio: 4 / 3; }
body[data-scenario="realty"] .offer,
body[data-scenario="realty"] .contact-card { border-radius: 0; }
body[data-scenario="realty"] .offer.selected { background: #dceae5; }

/* Automotores: industrial, contraste fuerte y lenguaje de ficha tecnica */
body[data-scenario="auto"] .mini-nav { color: #f6f7f5; border-color: #34393a; background: #171a1b; }
body[data-scenario="auto"] .mini-brand span { border: 1px solid #b6372d; border-radius: 2px; color: #f6f7f5; background: #b6372d; }
body[data-scenario="auto"] .mini-brand b { text-transform: uppercase; letter-spacing: .08em; }
body[data-scenario="auto"] .mini-links button { color: #bbc1c1; border-radius: 2px; text-transform: uppercase; font-size: 11px; letter-spacing: .05em; }
body[data-scenario="auto"] .mini-links button:hover { color: #f6f7f5; background: #292d2e; }
body[data-scenario="auto"] .mini-links button.active { color: #f6f7f5; background: #b6372d; }
body[data-scenario="auto"] .mini-cta { border-radius: 2px; text-transform: uppercase; }
body[data-scenario="auto"] .mini-body { background: #e9ebea; }
body[data-scenario="auto"] .hero { min-height: 420px; border-radius: 0; align-items: center; background: #171a1b; }
body[data-scenario="auto"] .hero img { opacity: .72; filter: saturate(.72) contrast(1.12); }
body[data-scenario="auto"] .hero::after { background: linear-gradient(90deg, #171a1b 0%, rgba(23,26,27,.76) 44%, rgba(23,26,27,.05) 100%); }
body[data-scenario="auto"] .hero-copy p { color: #f08f87; }
body[data-scenario="auto"] .hero-copy h2 { max-width: 12ch; font-size: clamp(42px, 5.2vw, 68px); line-height: .92; text-transform: uppercase; }
body[data-scenario="auto"] .hero-copy span { max-width: 40ch; color: #e1e4e3; }
body[data-scenario="auto"] .btn-primary,
body[data-scenario="auto"] .btn-ghost { border-radius: 2px; text-transform: uppercase; letter-spacing: .04em; }
body[data-scenario="auto"] .info-strip { gap: 0; border-top: 3px solid #b6372d; background: #171a1b; }
body[data-scenario="auto"] .info-strip div { color: #f6f7f5; border: 0; border-right: 1px solid #383d3e; border-radius: 0; background: transparent; }
body[data-scenario="auto"] .info-strip small { color: #aeb5b5; }
body[data-scenario="auto"] .hl { border-radius: 0; background: #f6f7f5; }
body[data-scenario="auto"] .hl .ic { border-radius: 2px; color: #f6f7f5; background: #b6372d; }
body[data-scenario="auto"] .gp-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
body[data-scenario="auto"] .tile { border-radius: 0; aspect-ratio: 16 / 10; }
body[data-scenario="auto"] .offer { border-radius: 0; border-top: 3px solid #181b1c; background: #f6f7f5; }
body[data-scenario="auto"] .offer.selected { color: #f6f7f5; border-color: #b6372d; background: #181b1c; }
body[data-scenario="auto"] .date-row button,
body[data-scenario="auto"] .time-row button,
body[data-scenario="auto"] .contact-card { border-radius: 2px; }
body[data-scenario="auto"] .contact-cta { border-radius: 2px; background: #171a1b; }

/* ===== Portadas con arquitectura propia por rubro ===== */
.home-view { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.home-view[hidden] { display: none; }
.scenario-feature { min-width: 0; padding: clamp(20px, 3vw, 34px); overflow: hidden; }
.scenario-feature h3 { margin: 0; font: 600 clamp(24px, 2.5vw, 38px)/1.02 "Space Grotesk", sans-serif; }
.scenario-feature p { margin: 0; }
.scenario-feature .feature-kicker { margin-bottom: 12px; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.scenario-feature .feature-copy { margin-top: 14px; font-size: 13px; line-height: 1.55; }
.scenario-feature > button,
.scenario-feature #propertySearchBtn { min-height: 44px; padding: 11px 16px; border: 0; color: var(--white); background: var(--green); font-size: 12px; font-weight: 800; }

/* Tattoo: portada editorial con agenda lateral */
body[data-scenario="tattoo"] .home-view > .hero { grid-column: 1 / 9; grid-row: 1 / 3; min-height: 590px; }
body[data-scenario="tattoo"] .home-view > .info-strip { grid-column: 9 / -1; grid-row: 1; grid-template-columns: 1fr; margin: 0; }
body[data-scenario="tattoo"] .home-view > .scenario-feature { grid-column: 9 / -1; grid-row: 2; color: #f8f3ed; background: #251d18; }
body[data-scenario="tattoo"] .home-view > .highlights { grid-column: 1 / -1; grid-row: 3; margin: 6px 0 0; }
body[data-scenario="tattoo"] .home-view > .gallery-preview { grid-column: 1 / -1; grid-row: 4; }
body[data-scenario="tattoo"] .scenario-feature h3 { max-width: 9ch; text-transform: uppercase; }
body[data-scenario="tattoo"] .scenario-feature .feature-copy { color: #d7c8bd; }
body[data-scenario="tattoo"] .feature-stack { display: grid; gap: 0; margin: 24px 0; border-block: 1px solid #55443a; }
body[data-scenario="tattoo"] .feature-stack span { display: grid; gap: 3px; padding: 13px 0; border-bottom: 1px solid #55443a; }
body[data-scenario="tattoo"] .feature-stack span:last-child { border: 0; }
body[data-scenario="tattoo"] .feature-stack b { font-size: 12px; }
body[data-scenario="tattoo"] .feature-stack small { color: #bfa99b; font-size: 10px; }
body[data-scenario="tattoo"] .scenario-feature > button { width: 100%; border: 1px solid #b64b31; background: #b64b31; text-transform: uppercase; }

/* Estética: boutique, servicio principal y equipo a la vista */
body[data-scenario="beauty"] .home-view > .hero { grid-column: 1 / 8; grid-row: 1; min-height: 520px; }
body[data-scenario="beauty"] .home-view > .scenario-feature { grid-column: 8 / -1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; color: #552b3e; background: #f7e8ee; }
body[data-scenario="beauty"] .home-view > .info-strip { grid-column: 1 / -1; grid-row: 2; margin: 0; }
body[data-scenario="beauty"] .home-view > .gallery-preview { grid-column: 1 / -1; grid-row: 3; }
body[data-scenario="beauty"] .home-view > .highlights { grid-column: 1 / -1; grid-row: 4; margin-top: 4px; }
body[data-scenario="beauty"] .scenario-feature h3 { max-width: 10ch; font-family: "Fraunces", serif; font-size: clamp(32px, 3.2vw, 48px); }
body[data-scenario="beauty"] .scenario-feature .feature-copy { max-width: 35ch; color: #775665; }
.staff-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 26px 0; }
.staff-row button { display: grid; justify-items: center; gap: 4px; min-width: 0; padding: 10px 4px; border: 1px solid #dfbdcc; color: #552b3e; background: #fff9fb; }
.staff-row button.selected { color: #fff9fb; border-color: #9d4e70; background: #9d4e70; }
.staff-row span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff9fb; background: #9d4e70; font: 600 12px "Fraunces", serif; }
.staff-row .selected span { color: #9d4e70; background: #fff9fb; }
.staff-row b { font-size: 11px; }
.staff-row small { color: currentColor; font-size: 9px; opacity: .72; }
body[data-scenario="beauty"] .scenario-feature > button { align-self: flex-start; border-radius: 999px; padding-inline: 22px; }
body[data-scenario="beauty"] .gp-grid { grid-template-columns: .85fr 1.3fr .85fr 1.15fr; align-items: end; }
body[data-scenario="beauty"] .gp-grid .tile:nth-child(even) { aspect-ratio: 4 / 5; }

/* Inmobiliaria: buscador horizontal y catálogo como foco principal */
body[data-scenario="realty"] .home-view > .scenario-feature { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: 1.25fr repeat(3, 1fr) auto; gap: 14px; align-items: end; padding: 22px 24px; border: 1px solid #c9d7d2; background: #fafcfb; }
body[data-scenario="realty"] .home-view > .hero { grid-column: 1 / 8; grid-row: 2; min-height: 520px; }
body[data-scenario="realty"] .home-view > .gallery-preview { grid-column: 8 / -1; grid-row: 2; margin: 0; }
body[data-scenario="realty"] .home-view > .info-strip { grid-column: 1 / -1; grid-row: 3; margin: 0; }
body[data-scenario="realty"] .home-view > .highlights { grid-column: 1 / -1; grid-row: 4; }
body[data-scenario="realty"] .scenario-feature h3 { max-width: 16ch; font: 600 28px/1 "Fraunces", serif; }
body[data-scenario="realty"] .scenario-feature label { display: grid; gap: 6px; color: #61736d; font-size: 10px; font-weight: 700; }
body[data-scenario="realty"] .scenario-feature select { width: 100%; min-height: 42px; padding: 8px; border: 0; border-bottom: 1px solid #8ca79e; border-radius: 0; color: #173630; background: #f2f6f4; font-size: 12px; }
body[data-scenario="realty"] .scenario-feature #propertySearchBtn { min-width: 145px; border-radius: 0; }
body[data-scenario="realty"] .home-view .gallery-preview .gp-head { align-items: flex-start; }
body[data-scenario="realty"] .home-view .gallery-preview .gp-head b { max-width: 8ch; font: 600 28px/1 "Fraunces", serif; }
body[data-scenario="realty"] .home-view .gp-grid { height: 465px; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1.35fr 1fr; }
body[data-scenario="realty"] .home-view .gp-grid .tile:first-child { grid-column: 1 / -1; grid-row: 1; }
body[data-scenario="realty"] .home-view .gp-grid .tile:nth-child(4) { display: none; }

/* Automotores: showroom, inventario y beneficios en columnas técnicas */
body[data-scenario="auto"] .home-view > .hero { grid-column: 1 / -1; grid-row: 1; min-height: 500px; }
body[data-scenario="auto"] .home-view > .info-strip { grid-column: 1 / -1; grid-row: 2; margin: 0; }
body[data-scenario="auto"] .home-view > .scenario-feature { grid-column: 1 / -1; grid-row: 3; color: #f6f7f5; background: #171a1b; }
body[data-scenario="auto"] .home-view > .gallery-preview { grid-column: 1 / 9; grid-row: 4; }
body[data-scenario="auto"] .home-view > .highlights { grid-column: 9 / -1; grid-row: 4; grid-template-columns: 1fr; align-content: start; }
body[data-scenario="auto"] .inventory-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
body[data-scenario="auto"] .inventory-head h3 { text-transform: uppercase; }
body[data-scenario="auto"] .inventory-head > strong { font: 700 44px/1 "Space Grotesk", sans-serif; }
body[data-scenario="auto"] .inventory-head > strong small { display: block; color: #aeb5b5; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.inventory-list { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 22px; border-block: 1px solid #3d4243; }
.inventory-list button { display: grid; gap: 5px; padding: 18px; text-align: left; border: 0; border-right: 1px solid #3d4243; color: #f6f7f5; background: transparent; }
.inventory-list button:last-child { border-right: 0; }
.inventory-list button:hover { background: #25292a; }
.inventory-list span { color: #ed7168; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.inventory-list b { font-size: 15px; }
.inventory-list small { color: #aeb5b5; font-size: 10px; }
body[data-scenario="auto"] .home-view .gp-grid { grid-template-columns: repeat(2, 1fr); }
body[data-scenario="auto"] .home-view .highlights .hl { min-height: 130px; }

/* ===== Adaptación de las referencias comerciales ===== */
/* Tattoo: tipografía, oscuridad y cotizador como producto principal */
body[data-scenario="tattoo"] .web-site,
body[data-scenario="tattoo"] .chat-demo { --green: #c6a640; --night: #090908; --soft: #eee4c3; --line: #332f24; --white: #f7f4ec; --ink: #171611; --muted: #746f60; }
body[data-scenario="tattoo"] .mini-body { background: #090908; }
body[data-scenario="tattoo"] .home-view > .hero { grid-column: 1 / -1; grid-row: 1; min-height: 680px; border: 1px solid #25231d; }
body[data-scenario="tattoo"] .home-view > .scenario-feature { grid-column: 1 / -1; grid-row: 2; padding: 0; background: transparent; }
body[data-scenario="tattoo"] .home-view > .info-strip { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(3, 1fr); }
body[data-scenario="tattoo"] .home-view > .gallery-preview { grid-column: 1 / -1; grid-row: 4; color: #f7f4ec; }
body[data-scenario="tattoo"] .home-view > .highlights { grid-column: 1 / -1; grid-row: 5; }
body[data-scenario="tattoo"] .hero { align-items: center; justify-content: center; }
body[data-scenario="tattoo"] .hero img { opacity: .13; filter: grayscale(1) contrast(1.35); }
body[data-scenario="tattoo"] .hero::after { background: radial-gradient(circle at center, rgba(8,8,7,.15), #090908 78%); }
body[data-scenario="tattoo"] .hero-copy { max-width: 980px; margin: auto; text-align: center; }
body[data-scenario="tattoo"] .hero-copy p { color: #c6a640; letter-spacing: .26em; }
body[data-scenario="tattoo"] .hero-copy h2 { max-width: 13ch; margin-inline: auto; font-size: clamp(60px, 8vw, 112px); line-height: .82; }
body[data-scenario="tattoo"] .hero-copy span { max-width: 58ch; margin-inline: auto; color: #bbb7ac; text-transform: uppercase; letter-spacing: .06em; }
body[data-scenario="tattoo"] .hero-cta { justify-content: center; }
body[data-scenario="tattoo"] .btn-primary { color: #11100d; background: #c6a640; }
body[data-scenario="tattoo"] .tattoo-drop { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 24px; align-items: center; padding: 24px 28px; border: 1px solid #4a4123; color: #f7f4ec; }
body[data-scenario="tattoo"] .tattoo-drop h3 { max-width: 12ch; color: #f7f4ec; font-size: 30px; }
body[data-scenario="tattoo"] .tattoo-drop .feature-copy { margin: 0; color: #aaa69a; }
body[data-scenario="tattoo"] .tattoo-drop .feature-stack { grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; border: 0; }
body[data-scenario="tattoo"] .tattoo-drop .feature-stack span { padding: 0 0 0 14px; border: 0; border-left: 1px solid #5b502d; }
body[data-scenario="tattoo"] .tattoo-drop > button { min-width: 180px; color: #11100d; background: #c6a640; }
body[data-scenario="tattoo"] .info-strip { gap: 1px; background: #332f24; }
body[data-scenario="tattoo"] .info-strip div { color: #f7f4ec; border: 0; background: #11110f; }
body[data-scenario="tattoo"] .info-strip small { color: #8f8b81; }
body[data-scenario="tattoo"] .hl { color: #f7f4ec; border: 1px solid #332f24; border-top: 1px solid #332f24; background: #11110f; }
body[data-scenario="tattoo"] .hl .ic { color: #171611; background: #c6a640; }
body[data-scenario="tattoo"] .hl small { color: #969186; }
body[data-scenario="tattoo"] .link-btn { color: #c6a640; }

/* Estética: boutique luminosa, banda visual y reserva por profesional */
body[data-scenario="beauty"] .web-site,
body[data-scenario="beauty"] .chat-demo { --green: #6f979a; --night: #26383a; --soft: #dcebed; --line: #c5d8da; --white: #fffdfb; --ink: #1e2c2d; --muted: #637779; }
body[data-scenario="beauty"] .mini-brand span { background: #8fb4b7; }
body[data-scenario="beauty"] .mini-brand b { color: #26383a; }
body[data-scenario="beauty"] .mini-links button.active { color: #26383a; background: #dcebed; }
body[data-scenario="beauty"] .mini-cta { color: #fffdfb; background: #6f979a; }
body[data-scenario="beauty"] .mini-body { background: #fffdfb; }
body[data-scenario="beauty"] .home-view > .hero { grid-column: 1 / -1; grid-row: 1; min-height: 390px; border-radius: 0; }
body[data-scenario="beauty"] .home-view > .scenario-feature { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 1.25fr .75fr; gap: 36px; padding: 34px 42px; color: #1e2c2d; background: #dcebed; }
body[data-scenario="beauty"] .home-view > .info-strip { grid-row: 3; }
body[data-scenario="beauty"] .home-view > .highlights { grid-row: 4; }
body[data-scenario="beauty"] .home-view > .gallery-preview { grid-row: 5; }
body[data-scenario="beauty"] .hero::after { background: linear-gradient(90deg, rgba(27,46,48,.86), rgba(27,46,48,.12) 72%); }
body[data-scenario="beauty"] .hero-copy h2 { max-width: 13ch; font-family: "Fraunces", serif; }
body[data-scenario="beauty"] .beauty-signature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; }
body[data-scenario="beauty"] .beauty-signature h3 { max-width: none; color: #172426; font: 400 clamp(76px, 9vw, 132px)/.7 "Allura", cursive; }
body[data-scenario="beauty"] .beauty-tagline { max-width: 17ch; font: 500 28px/1.08 "Fraunces", serif; }
body[data-scenario="beauty"] .beauty-signature .feature-copy { color: #536b6d; }
body[data-scenario="beauty"] .beauty-booking { padding-left: 30px; border-left: 1px solid #a9c4c6; }
body[data-scenario="beauty"] .beauty-booking > p { font: 600 17px "Fraunces", serif; }
body[data-scenario="beauty"] .staff-row { margin: 16px 0; }
body[data-scenario="beauty"] .staff-row button { border-color: #aec8ca; color: #26383a; background: #f7fbfb; }
body[data-scenario="beauty"] .staff-row span { background: #6f979a; }
body[data-scenario="beauty"] .staff-row button.selected { color: #fffdfb; border-color: #26383a; background: #26383a; }
body[data-scenario="beauty"] .beauty-booking > button { border: 1px solid #26383a; border-radius: 999px; color: #26383a; background: transparent; }
body[data-scenario="beauty"] .info-strip div { border-color: #b9cfd1; }
body[data-scenario="beauty"] .hl { background: #eef5f5; }

/* Inmobiliaria: proyecto inmersivo, estado de obra y ficha editorial */
body[data-scenario="realty"] .web-site,
body[data-scenario="realty"] .chat-demo { --green: #d7d2c5; --night: #181918; --soft: #e9e6dc; --line: #4a4c49; --white: #f4f1e8; --ink: #20221f; --muted: #777a73; }
body[data-scenario="realty"] .mini-nav { color: #f4f1e8; border-color: #454742; background: #181918; }
body[data-scenario="realty"] .mini-brand span { color: #181918; background: #d7d2c5; }
body[data-scenario="realty"] .mini-brand b { color: #f4f1e8; }
body[data-scenario="realty"] .mini-links button { color: #aaa99f; }
body[data-scenario="realty"] .mini-links button.active { color: #f4f1e8; box-shadow: inset 0 -2px #d7d2c5; }
body[data-scenario="realty"] .mini-cta { color: #181918; background: #d7d2c5; }
body[data-scenario="realty"] .mini-body { background: #181918; }
body[data-scenario="realty"] .home-view > .hero { grid-column: 1 / -1; grid-row: 1; min-height: 380px; }
body[data-scenario="realty"] .home-view > .scenario-feature { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: .95fr 1.05fr; gap: 0; padding: 0; border: 0; color: #f4f1e8; background: #181918; }
body[data-scenario="realty"] .home-view > .gallery-preview { grid-column: 1 / -1; grid-row: 3; color: #f4f1e8; }
body[data-scenario="realty"] .home-view > .info-strip { grid-row: 4; }
body[data-scenario="realty"] .home-view > .highlights { grid-row: 5; }
body[data-scenario="realty"] .hero img { opacity: .65; }
body[data-scenario="realty"] .hero::after { background: rgba(16,17,16,.38); }
body[data-scenario="realty"] .hero-copy { max-width: 900px; margin: auto; text-align: center; }
body[data-scenario="realty"] .hero-copy h2 { max-width: none; font-size: clamp(52px, 7vw, 96px); text-transform: uppercase; letter-spacing: .08em; }
body[data-scenario="realty"] .hero-copy p { color: #f4f1e8; }
body[data-scenario="realty"] .hero-copy span { margin-inline: auto; color: #e5e1d7; }
body[data-scenario="realty"] .hero-cta { justify-content: center; }
body[data-scenario="realty"] .project-visual { min-height: 540px; }
body[data-scenario="realty"] .project-visual img { width: 100%; height: 100%; object-fit: cover; }
body[data-scenario="realty"] .project-copy { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 50px; }
body[data-scenario="realty"] .project-status { position: absolute; top: 24px; right: 24px; padding: 8px 14px; border: 1px solid #f4f1e8; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
body[data-scenario="realty"] .project-copy h3 { max-width: 12ch; color: #f4f1e8; font: 600 clamp(36px, 4vw, 58px)/1 "Space Grotesk", sans-serif; }
body[data-scenario="realty"] .project-copy .feature-copy { max-width: 48ch; color: #c6c3ba; font-size: 15px; }
body[data-scenario="realty"] .project-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 28px 0; background: #4a4c49; }
body[data-scenario="realty"] .project-specs span { padding: 16px; background: #20211f; }
body[data-scenario="realty"] .project-specs b,
body[data-scenario="realty"] .project-specs small { display: block; }
body[data-scenario="realty"] .project-specs b { font-size: 24px; }
body[data-scenario="realty"] .project-specs small { margin-top: 3px; color: #aaa99f; font-size: 10px; text-transform: uppercase; }
body[data-scenario="realty"] .project-copy > button { align-self: flex-start; color: #181918; background: #f4f1e8; }
body[data-scenario="realty"] .gallery-preview .link-btn { color: #d7d2c5; }
body[data-scenario="realty"] .home-view .gp-grid { height: auto; grid-template-columns: 1.5fr 1fr 1fr; grid-template-rows: 320px; }
body[data-scenario="realty"] .home-view .gp-grid .tile:first-child { grid-column: auto; grid-row: auto; }
body[data-scenario="realty"] .home-view .gp-grid .tile:nth-child(4) { display: none; }
body[data-scenario="realty"] .info-strip { margin: 0; border-color: #4a4c49; background: #20211f; }
body[data-scenario="realty"] .info-strip div { color: #f4f1e8; border-color: #4a4c49; }
body[data-scenario="realty"] .info-strip small { color: #aaa99f; }
body[data-scenario="realty"] .hl { color: #f4f1e8; border-left-color: #d7d2c5; }
body[data-scenario="realty"] .hl small { color: #aaa99f; }

/* Automotores: catálogo utilitario con filtros y fichas de stock */
body[data-scenario="auto"] .web-site,
body[data-scenario="auto"] .chat-demo { --green: #bdf32f; --night: #171918; --soft: #edf7d2; --line: #cfd3cc; --white: #f8f9f6; --ink: #222522; --muted: #666c66; }
body[data-scenario="auto"] .mini-brand span,
body[data-scenario="auto"] .mini-cta,
body[data-scenario="auto"] .mini-links button.active { color: #171918; background: #bdf32f; }
body[data-scenario="auto"] .mini-body { padding: 0; background: #f8f9f6; }
body[data-scenario="auto"] .home-view { gap: 0; }
body[data-scenario="auto"] .home-view > .hero { display: none; }
body[data-scenario="auto"] .home-view > .scenario-feature { grid-column: 1 / -1; grid-row: 1; padding: 0; color: #222522; background: #f8f9f6; }
body[data-scenario="auto"] .home-view > .info-strip { grid-row: 2; margin: 0; }
body[data-scenario="auto"] .home-view > .highlights { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(3, 1fr); padding: 26px; }
body[data-scenario="auto"] .home-view > .gallery-preview { display: none; }
.auto-catalog { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 690px; }
.auto-filters { padding: 32px 24px; border-right: 1px solid #d5d8d2; background: #f1f2ee; }
.auto-filters fieldset { display: grid; gap: 10px; margin: 0; padding: 18px 0; border: 0; border-top: 1px solid #adb2aa; }
.auto-filters legend { padding: 0 0 12px; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.auto-filters label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.auto-filters input { accent-color: #171918; }
.auto-filters #sellCarBtn { width: 100%; margin-top: 12px; padding: 11px; border: 1px solid #171918; color: #171918; background: #bdf32f; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.auto-stock { padding: 32px; }
.auto-stock > header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.auto-stock h3 { color: #222522; font-size: 30px; text-transform: uppercase; }
.auto-stock header small { color: #666c66; font-size: 11px; }
.auto-stock header label { display: grid; gap: 5px; color: #666c66; font-size: 10px; }
.auto-stock header select { min-width: 150px; padding: 9px; border: 0; border-bottom: 1px solid #7c827b; background: transparent; }
.auto-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.auto-product { display: grid; grid-template-rows: 180px auto auto auto 1fr auto; min-width: 0; padding: 0 0 16px; overflow: hidden; text-align: left; border: 1px solid #d5d8d2; color: #222522; background: #fff; }
.auto-product[hidden] { display: none; }
.auto-product img { width: 100%; height: 180px; object-fit: cover; }
.auto-product span,
.auto-product h4,
.auto-product small,
.auto-product strong,
.auto-product em { margin-inline: 16px; }
.auto-product span { margin-top: 15px; color: #697166; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.auto-product h4 { margin-block: 5px 0; font: 600 15px/1.25 "Space Grotesk", sans-serif; }
.auto-product small { margin-top: 8px; color: #666c66; font-size: 10px; }
.auto-product strong { align-self: end; width: fit-content; margin-top: 18px; padding: 5px 8px; color: #171918; background: #bdf32f; font-size: 18px; }
.auto-product em { margin-top: 12px; color: #343934; font-size: 10px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.auto-product:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(23,25,24,.1); }
body[data-scenario="auto"] .info-strip { border-top-color: #bdf32f; }
body[data-scenario="auto"] .hl .ic { color: #171918; background: #bdf32f; }

@media (prefers-reduced-motion: reduce) {
  .theme-enter { animation: none; }
}

/* ===== responsive ===== */
@media (max-width: 900px) {
  .home-view { display: block; }
  .home-view > * + * { margin-top: 16px; }
  .home-view > .info-strip,
  body[data-scenario] .home-view > .info-strip { margin: 16px 0; }
  body[data-scenario="realty"] .home-view > .scenario-feature { display: grid; grid-template-columns: repeat(2, 1fr); }
  body[data-scenario="realty"] .scenario-feature > div { grid-column: 1 / -1; }
  body[data-scenario="realty"] .scenario-feature #propertySearchBtn { width: 100%; }
  body[data-scenario="realty"] .home-view .gp-grid { height: auto; }
  body[data-scenario="auto"] .home-view > .highlights { grid-template-columns: repeat(3, 1fr); }
  .mini-nav { flex-wrap: wrap; }
  .mini-brand { margin-right: 0; }
  .mini-cta { margin-left: auto; }
  .mini-links { order: 3; display: flex; width: 100%; overflow: hidden; scrollbar-width: none; }
  .mini-links::-webkit-scrollbar { display: none; }
  .mini-links button { flex: 1 1 25%; min-width: 0; min-height: 42px; padding-inline: 6px; }
  .hero { min-height: 300px; }
  .info-strip, .highlights { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr 1fr; }
  .gp-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .cotizador .offer-list { grid-template-columns: 1fr; }
  body[data-scenario="tattoo"] .tattoo-drop { grid-template-columns: 1fr 1fr; }
  body[data-scenario="tattoo"] .tattoo-drop > button { width: 100%; }
  body[data-scenario="beauty"] .home-view > .scenario-feature { grid-template-columns: 1fr; }
  body[data-scenario="beauty"] .beauty-booking { padding: 24px 0 0; border-left: 0; border-top: 1px solid #a9c4c6; }
  body[data-scenario="realty"] .home-view > .scenario-feature { grid-template-columns: 1fr 1fr; }
  .auto-catalog { grid-template-columns: 180px minmax(0, 1fr); }
  .auto-product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .site-header { align-items: flex-start; gap: 12px; padding: 14px 16px; }
  .ae-brand span { font-size: 14px; }
  .restart { flex: 0 0 auto; padding: 8px 10px; font-size: 11px; }
  .intro { padding: 30px 16px 20px; }
  .intro h1 { font-size: 34px; line-height: 1.02; }
  .intro > span { margin-top: 10px; font-size: 14px; }
  .scenario-picker { gap: 8px; padding: 0 16px 16px; }
  .scenario { min-height: 58px; padding: 6px; }
  .scenario b { font-size: 12px; }
  .scenario small { display: block; font-size: 9px; }
  .channel-switch { gap: 7px; padding: 0 16px 24px; }
  .channel { padding: 12px; }
  .demo-shell { margin: 0 10px 32px; border-radius: 6px; }
  .mini-nav { padding: 12px 14px; }
  .mini-links { gap: 2px; padding-top: 3px; border-top: 1px solid var(--line); }
  .mini-links button { min-height: 44px; padding: 8px 3px; font-size: 10px; }
  .mini-cta { padding: 8px 12px; font-size: 12px; }
  .mini-body { padding: 16px 16px 82px; }
  .hero { min-height: 260px; }
  .scenario-feature { padding: 22px 18px; }
  body[data-scenario="tattoo"] .home-view > .hero,
  body[data-scenario="beauty"] .home-view > .hero,
  body[data-scenario="realty"] .home-view > .hero,
  body[data-scenario="auto"] .home-view > .hero { min-height: 360px; }
  body[data-scenario="realty"] .home-view > .scenario-feature { grid-template-columns: 1fr; }
  body[data-scenario="realty"] .scenario-feature > div { grid-column: auto; }
  body[data-scenario="auto"] .home-view > .highlights { grid-template-columns: 1fr; }
  .inventory-list { grid-template-columns: 1fr; }
  .inventory-list button { border-right: 0; border-bottom: 1px solid #3d4243; }
  .inventory-list button:last-child { border-bottom: 0; }
  .hero-copy h2 { font-size: 27px; }
  .contact-grid { grid-template-columns: 1fr; }
  .contact-cta { flex-direction: column; align-items: flex-start; }
  .contact-cta .btn-primary { width: 100%; }
  .gp-grid, .gallery-grid { grid-template-columns: 1fr 1fr; }
  .cotizador .offer-list { grid-template-columns: 1fr; }
  .detail-fields { grid-template-columns: 1fr; }
  .offer { min-height: 72px; padding: 11px; }
  .quote-panel { grid-template-columns: 1fr; padding: 14px 0; }
  .date-row, .time-row { grid-template-columns: repeat(2, 1fr); }
  .request-row { grid-template-columns: 1fr; }
  .request-row button { min-height: 46px; }
  .web-pop { right: 12px; bottom: 12px; height: 66vh; width: calc(100% - 24px); }
  .web-fab { right: 14px; bottom: 14px; }
  .chat-log { min-height: 420px; padding: 14px; }
  .bubble { max-width: 90%; font-size: 13px; }
  .chat-input { gap: 6px; padding: 10px; }
  .chat-input input { min-height: 44px; }
  .chat-input button { min-height: 44px; padding: 0 11px; }
  .attach { width: 36px; height: 44px; }

  body[data-scenario="realty"] .info-strip { margin: 14px 0 20px; }
  body[data-scenario="realty"] .info-strip div { border-right: 0; border-bottom: 1px solid #c9d7d2; }
  body[data-scenario="realty"] .info-strip div:last-child { border-bottom: 0; }
  body[data-scenario="realty"] .gp-grid .tile:first-child { grid-row: auto; }
  body[data-scenario="realty"] .gp-grid .tile:nth-child(4) { display: block; }
  body[data-scenario="tattoo"] .hero-copy h2,
  body[data-scenario="auto"] .hero-copy h2 { font-size: 36px; }
  body[data-scenario="beauty"] .hero-copy h2,
  body[data-scenario="realty"] .hero-copy h2 { font-size: 34px; }
  body[data-scenario="tattoo"] .mini-body { padding: 12px 12px 82px; }
  body[data-scenario="tattoo"] .home-view > .hero { min-height: 520px; }
  body[data-scenario="tattoo"] .hero-copy h2 { font-size: 50px; line-height: .86; }
  body[data-scenario="tattoo"] .tattoo-drop { grid-template-columns: 1fr; padding: 20px; }
  body[data-scenario="tattoo"] .tattoo-drop .feature-stack { grid-template-columns: 1fr; }
  body[data-scenario="tattoo"] .home-view > .info-strip { grid-template-columns: 1fr; }
  body[data-scenario="beauty"] .beauty-signature { grid-template-columns: 1fr; gap: 16px; }
  body[data-scenario="beauty"] .beauty-signature h3 { font-size: 82px; }
  body[data-scenario="beauty"] .beauty-tagline { font-size: 24px; }
  body[data-scenario="realty"] .home-view > .scenario-feature { grid-template-columns: 1fr; }
  body[data-scenario="realty"] .project-visual { min-height: 320px; }
  body[data-scenario="realty"] .project-copy { padding: 30px 22px; }
  body[data-scenario="realty"] .project-status { position: static; align-self: flex-start; margin-bottom: 24px; }
  body[data-scenario="realty"] .home-view .gp-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  body[data-scenario="realty"] .home-view .gp-grid .tile:first-child { grid-column: 1 / -1; }
  .auto-catalog { grid-template-columns: 1fr; }
  .auto-filters { padding: 22px 18px; border-right: 0; border-bottom: 1px solid #d5d8d2; }
  .auto-filters fieldset { grid-template-columns: repeat(3, 1fr); }
  .auto-filters legend { grid-column: 1 / -1; }
  .auto-stock { padding: 24px 18px; }
  .auto-stock > header { align-items: start; }
  .auto-stock header select { min-width: 120px; }
  .auto-product-grid { grid-template-columns: 1fr; }
  .auto-product { grid-template-rows: 210px auto auto auto 1fr auto; }
  .auto-product img { height: 210px; }
}

@media (pointer: coarse) {
  .scenario, .channel, .mini-links button, .mini-cta, .btn-primary, .btn-ghost,
  .offer, .date-row button, .time-row button, .request-row button, .web-fab { min-height: 44px; }
}

/* ===== Pulida final UI/UX Pro Max ===== */
.skip-link {
  position: fixed;
  z-index: 2000;
  top: 10px;
  left: 10px;
  padding: 12px 16px;
  transform: translateY(-160%);
  color: #fff;
  background: #102a22;
  border-radius: 4px;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
:where(button, a, input, select):focus-visible {
  outline: 3px solid #1677ff;
  outline-offset: 3px;
}
:where(button, a, input, select) { touch-action: manipulation; }
:where(button, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])) { min-height: 44px; }
button:active { transform: translateY(1px); }
button:disabled { transform: none; }
.restart,
.mini-cta,
.mini-links button,
.hero-cta button,
.scenario-feature button,
.link-btn,
.web-pop-head button,
.web-pop-input button,
.chat-business button,
.chat-input button,
.confirmation button { min-height: 44px; }
.scenario,
.channel,
.offer,
.auto-product,
.staff-row button,
.date-row button,
.time-row button {
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.scenario:active,
.channel:active,
.offer:active,
.auto-product:active,
.staff-row button:active { transform: scale(.985); }
.scenario[aria-pressed="true"],
.channel[aria-pressed="true"],
.offer[aria-pressed="true"],
.staff-row button[aria-pressed="true"] { box-shadow: inset 0 0 0 1px currentColor; }
.mini-links button[aria-current="page"] { font-weight: 800; }
.quote-panel strong,
.auto-product strong,
#stockCount { font-variant-numeric: tabular-nums; }

/* CTA consistentes dentro de las cuatro vidrieras */
.scenario-feature > div > button,
.tattoo-drop > button,
.beauty-booking > button,
.project-copy > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 18px;
  border: 1px solid currentColor;
  border-radius: 3px;
  font: 700 12px/1 "DM Sans", sans-serif;
  text-decoration: none;
}
body[data-scenario="tattoo"] .tattoo-drop > button { color: #100f0d; border-color: #d9b63d; background: #d9b63d; }
body[data-scenario="beauty"] .beauty-booking > button { color: #fff; border-color: #6b9fa2; background: #6b9fa2; }
body[data-scenario="realty"] .project-copy > button { color: #10201c; border-color: #f3f1e9; background: #f3f1e9; }
body[data-scenario="realty"] .project-copy > button:hover { color: #f3f1e9; background: transparent; }
.staff-row button { min-height: 88px; }

/* Chat con controles claros y feedback de espera */
.web-fab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.web-fab svg,
.attach svg,
.web-pop-head button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.web-pop-head button { display: grid; place-items: center; width: 44px; padding: 0; }
.web-pop-input input:disabled,
.chat-input input:disabled { opacity: .72; cursor: wait; }
.web-pop-input button:disabled,
.chat-input button:disabled { opacity: .72; cursor: wait; }
.typing::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: ui-spin .8s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.attach { display: grid; place-items: center; min-width: 44px; width: 44px; height: 44px; }

/* Catálogo: filtros realmente táctiles y estado vacío */
.auto-filters label { min-height: 44px; cursor: pointer; }
.auto-filters label input { width: 18px; height: 18px; accent-color: #bdf32f; }
.auto-stock header select { min-height: 44px; cursor: pointer; }
.stock-empty {
  padding: 44px 24px;
  text-align: center;
  border: 1px dashed #a8ada6;
  background: #f7f8f5;
}
.stock-empty[hidden] { display: none; }
.stock-empty b,
.stock-empty span { display: block; }
.stock-empty span { margin-top: 6px; color: #666c66; font-size: 13px; }
.disabled-field { opacity: .45; }
.disabled-field input { cursor: not-allowed; }
.disabled-field output { color: inherit !important; }

@media (max-width: 560px) {
  .restart,
  .mini-cta { min-height: 44px; }
  .site-header { align-items: center; }
  .intro { padding-top: 26px; }
  .scenario-feature > div > button,
  .tattoo-drop > button,
  .beauty-booking > button,
  .project-copy > button { width: 100%; }
  .link-btn { min-height: 44px; padding: 8px 0; }
  .web-fab { min-width: 132px; }
  body[data-scenario="auto"] .mini-body { padding-bottom: 90px; }
  .chat-business button { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ===== Cuatro narrativas, cuatro recorridos ===== */
.intro { max-width: 1240px; }
.intro h1 { max-width: 960px; font-size: clamp(42px, 5.4vw, 72px); }
.intro > span { max-width: 800px; line-height: 1.6; }
.intro-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 34px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.intro-flow > div { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 20px 22px 20px 0; }
.intro-flow > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.intro-flow > div > b { color: var(--orange); font: 700 12px "Space Grotesk", sans-serif; }
.intro-flow span,
.intro-flow strong { display: block; }
.intro-flow strong { margin-bottom: 5px; font: 600 14px "Space Grotesk", sans-serif; }
.intro-flow span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.gallery-actions,
.carousel-controls { display: flex; align-items: center; gap: 8px; }
.carousel-controls[hidden] { display: none; }
.carousel-controls button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid currentColor; color: inherit; background: transparent; font-size: 18px; }
.highlights.is-empty { display: none !important; }
.highlights > section { grid-column: 1 / -1; }

/* Tattoo: portfolio primero, proceso después */
body[data-scenario="tattoo"] .tattoo-intake { display: grid; grid-template-columns: 1.05fr 1.2fr auto; gap: 34px; align-items: center; padding: 30px 32px; border: 1px solid #4a4123; color: #f7f4ec; }
body[data-scenario="tattoo"] .tattoo-intake h3 { max-width: 16ch; color: #f7f4ec; font-size: clamp(27px, 3vw, 42px); text-transform: none; }
body[data-scenario="tattoo"] .tattoo-intake .feature-copy { max-width: 48ch; color: #aaa69a; }
body[data-scenario="tattoo"] .tattoo-intake ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; background: #4a4123; }
body[data-scenario="tattoo"] .tattoo-intake li { min-height: 94px; padding: 15px; background: #11110f; }
body[data-scenario="tattoo"] .tattoo-intake li b,
body[data-scenario="tattoo"] .tattoo-intake li span { display: block; }
body[data-scenario="tattoo"] .tattoo-intake li b { color: #c6a640; font-size: 11px; }
body[data-scenario="tattoo"] .tattoo-intake li span { margin-top: 14px; font-size: 12px; line-height: 1.35; }
body[data-scenario="tattoo"] .tattoo-intake > button { min-width: 150px; color: #11100d; border-color: #c6a640; background: #c6a640; }
body[data-scenario="tattoo"] .tattoo-styles { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; padding: 42px 0 12px; border-top: 1px solid #332f24; color: #f7f4ec; }
body[data-scenario="tattoo"] .tattoo-styles h3 { max-width: 13ch; margin: 0; font: 600 clamp(28px, 3.5vw, 48px)/1 "Space Grotesk", sans-serif; }
body[data-scenario="tattoo"] .tattoo-styles p:not(.feature-kicker) { max-width: 42ch; color: #8f8b81; font-size: 13px; line-height: 1.5; }
body[data-scenario="tattoo"] .style-list { border-top: 1px solid #4a4123; }
body[data-scenario="tattoo"] .style-list button { display: grid; grid-template-columns: 1fr 1.3fr auto; align-items: center; gap: 18px; width: 100%; min-height: 76px; padding: 14px 0; text-align: left; border: 0; border-bottom: 1px solid #4a4123; color: #f7f4ec; background: transparent; }
body[data-scenario="tattoo"] .style-list button:hover { color: #c6a640; }
body[data-scenario="tattoo"] .style-list span { color: #8f8b81; font-size: 12px; }
body[data-scenario="tattoo"] .style-list button::after { content: "→"; font-size: 18px; }
body[data-scenario="tattoo"] .preview-tattoo { height: 620px; grid-template-columns: 1.2fr .8fr .8fr; grid-template-rows: 1fr 1fr; }
body[data-scenario="tattoo"] .preview-tattoo .tile { aspect-ratio: auto; }
body[data-scenario="tattoo"] .preview-tattoo .tile:first-child { grid-row: 1 / 3; }
body[data-scenario="tattoo"] .preview-tattoo .tile:nth-child(4) { grid-row: 1 / 3; }

/* Estética: carta de servicios y lookbook editorial */
body[data-scenario="beauty"] .beauty-menu { display: grid; grid-template-columns: .72fr 1.28fr; gap: 54px; padding: 42px 0; border-top: 1px solid #b9cfd1; border-bottom: 1px solid #b9cfd1; }
body[data-scenario="beauty"] .beauty-menu h3 { margin: 0; color: #26383a; font: 500 clamp(28px, 3.2vw, 44px)/1.05 "Fraunces", serif; }
body[data-scenario="beauty"] .beauty-menu header > span { display: block; max-width: 30ch; margin-top: 12px; color: #60777a; font-size: 13px; }
body[data-scenario="beauty"] .beauty-menu > div { border-top: 1px solid #a9c4c6; }
body[data-scenario="beauty"] .beauty-menu button { display: grid; grid-template-columns: 1fr auto 74px; align-items: center; gap: 18px; width: 100%; min-height: 78px; padding: 13px 0; text-align: left; border: 0; border-bottom: 1px solid #a9c4c6; color: #26383a; background: transparent; }
body[data-scenario="beauty"] .beauty-menu button span,
body[data-scenario="beauty"] .beauty-menu button b,
body[data-scenario="beauty"] .beauty-menu button small { display: block; }
body[data-scenario="beauty"] .beauty-menu button small { margin-top: 4px; color: #6f8587; }
body[data-scenario="beauty"] .beauty-menu button strong { font-variant-numeric: tabular-nums; }
body[data-scenario="beauty"] .beauty-menu button em { color: #6f979a; font-size: 11px; font-style: normal; font-weight: 800; text-align: right; text-transform: uppercase; }
body[data-scenario="beauty"] .preview-beauty { height: 520px; grid-template-columns: 1.25fr .75fr .75fr; grid-template-rows: 1fr 1fr; }
body[data-scenario="beauty"] .preview-beauty .tile { aspect-ratio: auto; }
body[data-scenario="beauty"] .preview-beauty .tile:first-child { grid-row: 1 / 3; }
body[data-scenario="beauty"] .preview-beauty .tile:nth-child(4) { grid-column: 3; grid-row: 1 / 3; }

/* Inmobiliaria: recorrido visual horizontal y disponibilidad */
body[data-scenario="realty"] .home-view > .info-strip { margin: 0; }
body[data-scenario="realty"] .preview-realty { display: flex; gap: 16px; height: auto; padding-bottom: 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; }
body[data-scenario="realty"] .preview-realty .tile,
body[data-scenario="realty"] .preview-realty .tile:first-child,
body[data-scenario="realty"] .preview-realty .tile:nth-child(4) { display: block; flex: 0 0 min(430px, 72vw); height: auto; aspect-ratio: 4 / 3; scroll-snap-align: start; }
body[data-scenario="realty"] .realty-availability { padding: 36px 0 0; color: #f4f1e8; border-top: 1px solid #4a4c49; }
body[data-scenario="realty"] .realty-availability > header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
body[data-scenario="realty"] .realty-availability h3 { margin: 0; font: 500 clamp(30px, 3.5vw, 48px)/1 "Fraunces", serif; }
body[data-scenario="realty"] .realty-availability > header > span { color: #aaa99f; font-size: 12px; }
body[data-scenario="realty"] .realty-availability > div { border-top: 1px solid #4a4c49; }
body[data-scenario="realty"] .realty-availability button { display: grid; grid-template-columns: 1.15fr 1fr .7fr .55fr; align-items: center; gap: 20px; width: 100%; min-height: 70px; padding: 12px 0; text-align: left; border: 0; border-bottom: 1px solid #4a4c49; color: #f4f1e8; background: transparent; }
body[data-scenario="realty"] .realty-availability button span { color: #aaa99f; font-size: 12px; }
body[data-scenario="realty"] .realty-availability button em { color: #a8c9be; font-size: 9px; font-style: normal; font-weight: 800; text-align: right; }
body[data-scenario="realty"] .realty-availability footer { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 24px 0 8px; color: #aaa99f; font-size: 11px; text-transform: uppercase; }

/* Automotores: seis unidades visibles, sin bloques genéricos debajo */
body[data-scenario="auto"] .auto-catalog { min-height: 920px; }
body[data-scenario="auto"] .auto-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-scenario="auto"] .auto-product { grid-template-rows: 170px auto auto auto 1fr auto; }
body[data-scenario="auto"] .auto-product img { height: 170px; }

@media (max-width: 900px) {
  .intro-flow { grid-template-columns: 1fr; }
  .intro-flow > div,
  .intro-flow > div + div { padding: 16px 0; border-left: 0; border-top: 1px solid var(--line); }
  .intro-flow > div:first-child { border-top: 0; }
  body[data-scenario="tattoo"] .tattoo-intake { grid-template-columns: 1fr; }
  body[data-scenario="tattoo"] .tattoo-styles,
  body[data-scenario="beauty"] .beauty-menu { grid-template-columns: 1fr; gap: 24px; }
  body[data-scenario="auto"] .auto-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .intro h1 { font-size: 34px; }
  .intro-flow { margin-top: 22px; }
  .gallery-actions { align-items: flex-end; }
  .gallery-actions .link-btn { display: none; }
  body[data-scenario="tattoo"] .tattoo-intake { padding: 22px 18px; }
  body[data-scenario="tattoo"] .tattoo-intake ol { grid-template-columns: 1fr; }
  body[data-scenario="tattoo"] .tattoo-intake li { min-height: 66px; }
  body[data-scenario="tattoo"] .tattoo-intake li span { margin-top: 7px; }
  body[data-scenario="tattoo"] .tattoo-styles { padding-top: 28px; }
  body[data-scenario="tattoo"] .style-list button { grid-template-columns: 1fr auto; }
  body[data-scenario="tattoo"] .style-list span { grid-column: 1 / -1; }
  body[data-scenario="tattoo"] .preview-tattoo { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 190px); }
  body[data-scenario="tattoo"] .preview-tattoo .tile:first-child,
  body[data-scenario="tattoo"] .preview-tattoo .tile:nth-child(4) { grid-row: auto; }
  body[data-scenario="beauty"] .beauty-menu button { grid-template-columns: 1fr auto; }
  body[data-scenario="beauty"] .beauty-menu button em { display: none; }
  body[data-scenario="beauty"] .preview-beauty { height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 190px); }
  body[data-scenario="beauty"] .preview-beauty .tile:first-child,
  body[data-scenario="beauty"] .preview-beauty .tile:nth-child(4) { grid-column: auto; grid-row: auto; }
  body[data-scenario="realty"] .realty-availability button { grid-template-columns: 1fr auto; gap: 6px 14px; padding: 16px 0; }
  body[data-scenario="realty"] .realty-availability button span { grid-column: 1 / -1; }
  body[data-scenario="realty"] .realty-availability button em { display: none; }
  body[data-scenario="auto"] .auto-catalog { min-height: 0; }
  body[data-scenario="auto"] .auto-product-grid { grid-template-columns: 1fr; }
}

/* Correcciones de composición verificadas en navegador */
.skip-link { top: -90px; transform: none; }
.skip-link:focus { top: -90px; transform: none; }
.skip-link:focus-visible { top: 10px; }
body[data-scenario="tattoo"] .preview-tattoo {
  height: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 320px);
}
body[data-scenario="tattoo"] .preview-tattoo .tile,
body[data-scenario="tattoo"] .preview-tattoo .tile:first-child,
body[data-scenario="tattoo"] .preview-tattoo .tile:nth-child(4) {
  grid-column: auto;
  grid-row: auto;
  aspect-ratio: auto;
}
body[data-scenario="beauty"] .preview-beauty {
  height: 520px;
  grid-template-columns: 1.2fr .8fr 1.2fr .8fr;
  grid-template-rows: repeat(2, 1fr);
}
body[data-scenario="beauty"] .preview-beauty .tile,
body[data-scenario="beauty"] .preview-beauty .tile:nth-child(even) { aspect-ratio: auto; }
body[data-scenario="beauty"] .preview-beauty .tile:first-child { grid-column: 1; grid-row: 1 / 3; }
body[data-scenario="beauty"] .preview-beauty .tile:nth-child(4) { grid-column: 3; grid-row: 1 / 3; }

@media (max-width: 560px) {
  body[data-scenario="tattoo"] .preview-tattoo,
  body[data-scenario="beauty"] .preview-beauty,
  body[data-scenario="realty"] .preview-realty {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 12px;
    height: auto;
    padding-bottom: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  body[data-scenario="tattoo"] .preview-tattoo .tile,
  body[data-scenario="beauty"] .preview-beauty .tile,
  body[data-scenario="realty"] .preview-realty .tile,
  body[data-scenario="realty"] .preview-realty .tile:first-child,
  body[data-scenario="realty"] .preview-realty .tile:nth-child(4) {
    display: block;
    flex: 0 0 78%;
    width: auto;
    height: 280px;
    aspect-ratio: auto;
    align-self: stretch;
    grid-column: auto;
    grid-row: auto;
    scroll-snap-align: start;
  }
  body[data-scenario="realty"] .preview-realty .tile { height: auto; aspect-ratio: 4 / 3; }
  body[data-scenario="tattoo"] .preview-tattoo .tile img,
  body[data-scenario="beauty"] .preview-beauty .tile img { min-height: 280px; }
}