/* ═══════════════════════════════════════════════════════════════════
   SEVILLA WEB & IT SERVICES — Tema visual "Grafito & Cobre"
   Se carga la última: redefine la paleta y afina la tipografía y los
   detalles sin tocar el build ni la funcionalidad.

   Carbón  #0e0e10  ·  Grafito  #17171a / #1f1f23
   Blanco cálido #f5f0ea  ·  Gris claro #a8a29a
   Cobre  #c8693a → terracota #b5522b  (solo acentos)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --accent: #c8693a;
  --accent-2: #b5522b;
  --accent-light: #e29a6b;
  --accent-pale: #f3d3bd;
  --bg: #0e0e10;
  --bg-deep: #08080a;
  --graphite: #17171a;
  --graphite-2: #1f1f23;
  --ink: #f5f0ea;
  --ink-soft: #a8a29a;
  --line: rgba(245, 240, 234, .10);
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Instrument Serif', 'Playfair Display', Georgia, serif;
}

/* ── Base: fondo carbón, con un leve calor cobre arriba ───────────── */

html { background-color: var(--bg); }

body {
  color: var(--ink);
  font-family: var(--font-ui);
  background-color: var(--bg);
  background-image:
    radial-gradient(90% 55% at 50% -12%, rgba(200, 105, 58, .13), transparent 60%),
    radial-gradient(70% 50% at 100% 100%, rgba(200, 105, 58, .05), transparent 65%);
  -webkit-tap-highlight-color: rgba(200, 105, 58, .18);
}

::selection { background: rgba(200, 105, 58, .35); color: #fff; }

/* Titulares en serif editorial; el resto de la interfaz en sans moderna */
h1, h2, h3, .swd-title, .swd-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--ink);
}

h1 em, h2 em, h3 em { color: var(--accent-light); }

p, li { font-family: var(--font-ui); }

.text-white { color: var(--ink); }

/* ── Secciones: alternan carbón y grafito ─────────────────────────── */

.section:nth-of-type(even) {
  background: linear-gradient(180deg, rgba(31, 31, 35, .55), rgba(23, 23, 26, .55));
}

.section + .section::before,
#demos::before {
  background: linear-gradient(90deg, transparent, rgba(200, 105, 58, .45) 20%, rgba(226, 154, 107, .25) 80%, transparent);
}

/* ── Tarjetas y superficies ───────────────────────────────────────── */

.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .015));
  border-color: var(--line);
  border-radius: 1.25rem;
}

.card:hover {
  border-color: rgba(200, 105, 58, .5);
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 18px 50px -24px rgba(200, 105, 58, .55);
}

.card-accent {
  background-image: linear-gradient(150deg, rgba(200, 105, 58, .14), rgba(31, 31, 35, .4));
  border-color: rgba(200, 105, 58, .35);
}

.liquid-glass {
  background: rgba(23, 23, 26, .55);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}

/* ── Botones, iconos, etiquetas ───────────────────────────────────── */

.btn-accent {
  background-image: linear-gradient(120deg, #e08a4f, #c96a35);
  color: #1a0e07;
  font-weight: 600;
  box-shadow: 0 8px 26px -10px rgba(200, 105, 58, .8), inset 0 1px rgba(255, 255, 255, .25);
}

.btn-accent:hover { filter: brightness(1.08); }

.icon-badge {
  color: var(--accent-light);
  background-image: linear-gradient(140deg, rgba(200, 105, 58, .22), rgba(200, 105, 58, .06));
  box-shadow: inset 0 0 0 1px rgba(226, 154, 107, .35);
}

.tag {
  color: #ecd2bf;
  background: rgba(200, 105, 58, .10);
  box-shadow: inset 0 0 0 1px rgba(226, 154, 107, .22);
}

.tag:hover { background: rgba(200, 105, 58, .2); }

.text-gradient {
  background-image: linear-gradient(100deg, #f0b48a, #d9773f 55%, #b5522b);
}

/* ── Cabecera de marca ────────────────────────────────────────────── */

.swb-brand-name { color: var(--ink); }
.swb-brand-sub { color: rgba(168, 162, 154, .9); }
.swb-brand:hover .swb-brand-sub { color: var(--accent-light); }

/* ── Demos ────────────────────────────────────────────────────────── */

.swd-lead, .swd-card-text { color: var(--ink-soft); }
.swd-eyebrow-text { color: var(--ink-soft); }
.swd-badge { color: var(--accent-pale); }

/* ── Foco accesible en cobre ──────────────────────────────────────── */

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO — "Tecnología que hace crecer tu negocio"
   Composición de mockups en CSS puro (sin imágenes de stock). Todo el
   escenario escala con el ancho gracias a container queries (em).
   ═══════════════════════════════════════════════════════════════════ */

.hs-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--bg-deep);
  isolation: isolate;
}

/* Fondo: brillo cobre + trama geométrica sevillana (estrella de ocho puntas) */
.hs-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.hs-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72' fill='none' stroke='%23e29a6b' stroke-width='1'%3E%3Crect x='18' y='18' width='36' height='36'/%3E%3Crect x='18' y='18' width='36' height='36' transform='rotate(45 36 36)'/%3E%3Ccircle cx='36' cy='36' r='5'/%3E%3C/svg%3E");
  opacity: .07;
  -webkit-mask-image: radial-gradient(70% 70% at 78% 40%, #000, transparent 75%);
  mask-image: radial-gradient(70% 70% at 78% 40%, #000, transparent 75%);
}

.hs-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 55% at 78% 42%, rgba(200, 105, 58, .20), transparent 70%),
    radial-gradient(60% 50% at 0% 0%, rgba(31, 31, 35, .9), transparent 70%),
    linear-gradient(180deg, transparent 70%, var(--bg) 100%);
}

.hs-wrap {
  width: 100%;
  max-width: 78rem;
  margin: 0 auto;
  padding: 7rem 1.25rem 3.5rem;
  display: grid;
  gap: 3.5rem;
  align-items: center;
}

@media (min-width: 640px) { .hs-wrap { padding: 8rem 2rem 4rem; } }

@media (min-width: 1024px) {
  .hs-wrap { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 3rem; padding: 8rem 3rem 4rem; }
}

/* ── Texto ─────────────────────────────────────────────────────────── */

.hs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: .45rem .9rem;
  border-radius: 9999px;
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px var(--line);
}

.hs-dot {
  width: 6px; height: 6px; border-radius: 9999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(200, 105, 58, .2);
}

.hs-title {
  margin: 1.5rem 0 0;
  font-size: clamp(2.6rem, 6.2vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: var(--ink);
}

.hs-grad {
  background-image: linear-gradient(100deg, #f3b98f 0%, #d9773f 50%, #b5522b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}

.hs-lead {
  margin: 1.5rem 0 0;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.hs-cta { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2.25rem; }

.hs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s, background-color .2s, border-color .2s, filter .2s;
}

.hs-btn svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }
.hs-btn-main:hover svg { transform: translateX(3px); }
.hs-btn-main svg { transition: transform .2s; }

.hs-btn-ghost {
  color: var(--ink);
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(245, 240, 234, .22);
}

.hs-btn-ghost:hover { background: rgba(200, 105, 58, .12); box-shadow: inset 0 0 0 1px rgba(226, 154, 107, .6); transform: translateY(-1px); }
.hs-btn-ghost svg { color: var(--accent-light); }

.hs-points {
  list-style: none;
  margin: 2.75rem 0 0;
  padding: 1.5rem 0 0;
  display: grid;
  gap: 1.1rem;
  border-top: 1px solid var(--line);
}

@media (min-width: 640px) { .hs-points { grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 1.25rem; } }

.hs-points li { display: flex; align-items: flex-start; gap: .75rem; }

.hs-pico {
  flex-shrink: 0;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: 9999px;
  color: var(--accent-light);
  background: linear-gradient(140deg, rgba(200, 105, 58, .22), rgba(200, 105, 58, .06));
  box-shadow: inset 0 0 0 1px rgba(226, 154, 107, .3);
}

.hs-pico svg { width: 1.05rem; height: 1.05rem; }
.hs-points b { display: block; font-size: .875rem; font-weight: 600; color: var(--ink); }
.hs-points small { display: block; margin-top: .2rem; font-size: .75rem; line-height: 1.45; color: var(--ink-soft); }

/* ── Escenario de mockups ──────────────────────────────────────────── */

.hs-visual { container-type: inline-size; width: 100%; max-width: 36rem; margin: 0 auto; }
.hs-stage { position: relative; width: 100%; aspect-ratio: 56 / 54; font-size: 1.7857cqw; font-family: var(--font-ui); }

.hs-glow {
  position: absolute; inset: 8% 6%;
  background: radial-gradient(closest-side, rgba(200, 105, 58, .28), transparent);
  filter: blur(2em);
}

.hs-stage b { font-weight: 600; }
.hs-stage small { font-size: 1em; }

/* Ordenador + web */
.hs-laptop { position: absolute; left: 0; top: 8em; width: 43em; filter: drop-shadow(0 3em 3em rgba(0, 0, 0, .55)); }

.hs-screen {
  border: .8em solid #2c2c32;
  border-bottom-width: .9em;
  border-radius: 1.5em 1.5em .5em .5em;
  background: #0d0d10;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.hs-base {
  height: 1.5em; width: 47em; margin-left: -2em;
  border-radius: 0 0 2.4em 2.4em;
  background: linear-gradient(180deg, #3a3a41, #1d1d21);
  box-shadow: inset 0 1px rgba(255, 255, 255, .18);
}

.hs-bar { display: flex; align-items: center; gap: .5em; height: 2.6em; padding: 0 1em; background: #17171a; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.hs-bar i { width: .8em; height: .8em; border-radius: 50%; background: #3a3a41; }
.hs-bar i:first-child { background: var(--accent); }
.hs-bar span { margin-left: 1em; padding: .35em 1.2em; border-radius: 2em; font-size: 1em; color: var(--ink-soft); background: rgba(255, 255, 255, .05); }

.hs-site { padding: 1.5em 1.8em; }
.hs-s-nav { display: flex; align-items: center; gap: 1.2em; }
.hs-s-nav b { width: 3em; height: 1em; border-radius: .3em; background: linear-gradient(90deg, #e08a4f, #c96a35); margin-right: auto; }
.hs-s-nav span { width: 3em; height: .45em; border-radius: .3em; background: rgba(245, 240, 234, .18); }
.hs-s-nav em { width: 4.4em; height: 1.5em; border-radius: 2em; box-shadow: inset 0 0 0 1px rgba(226, 154, 107, .7); }

.hs-s-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.6em; align-items: center; margin-top: 1.3em; }
.hs-s-title { margin: 0; font-family: var(--font-display); font-size: 2.4em; line-height: 1.04; color: var(--ink); }
.hs-s-title u { text-decoration: none; color: #e29a6b; font-style: italic; }
.hs-s-line { height: .55em; margin: .9em 0 0; width: 92%; border-radius: .3em; background: rgba(245, 240, 234, .16); }
.hs-s-line.short { width: 62%; margin-top: .6em; }
.hs-s-btn { display: inline-block; margin-top: 1.3em; padding: .65em 1.3em; border-radius: 2em; font-size: 1.05em; font-weight: 600; color: #1a0e07; background: linear-gradient(120deg, #e08a4f, #c96a35); }

.hs-s-art { position: relative; aspect-ratio: 1.25; }
.hs-s-art i { position: absolute; border-radius: 1.2em; }
.hs-s-art i:nth-child(1) { inset: 0 12% 22% 0; background: linear-gradient(150deg, #d9773f, #7c3519); }
.hs-s-art i:nth-child(2) { inset: 26% 0 0 30%; background: #1f1f23; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.hs-s-art i:nth-child(3) { width: 34%; aspect-ratio: 1; left: 8%; bottom: 6%; border-radius: 50%; background: #f5f0ea; opacity: .92; }

.hs-s-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; margin-top: 1.2em; }
.hs-s-cards div { height: 3.1em; border-radius: .9em; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); position: relative; }
.hs-s-cards div::before { content: ""; position: absolute; left: 1em; top: .9em; width: 1.2em; height: 1.2em; border-radius: .4em; background: rgba(200, 105, 58, .8); }
.hs-s-cards div::after { content: ""; position: absolute; left: 3.2em; right: 25%; top: 1.3em; height: .45em; border-radius: .3em; background: rgba(245, 240, 234, .18); }

/* Smartphone: soporte */
.hs-phone {
  position: absolute; right: 0; top: 17em; width: 16.5em; height: 34em; z-index: 2;
  border: .75em solid #2c2c32; border-radius: 3.2em;
  background: #111114;
  box-shadow: 0 3em 4em -1em rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .08);
  padding: 2.8em 1.1em 1em; overflow: hidden;
  animation: hs-float 7s ease-in-out infinite;
}

.hs-notch { position: absolute; top: .8em; left: 50%; width: 5em; height: 1.3em; margin-left: -2.5em; border-radius: 1em; background: #000; }
.hs-p-head { display: flex; align-items: center; gap: .8em; padding-bottom: 1em; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.hs-p-av { width: 2.6em; height: 2.6em; border-radius: 50%; background: linear-gradient(140deg, #e08a4f, #c96a35); }
.hs-p-head b { display: block; font-size: 1.25em; color: var(--ink); }
.hs-p-head small { display: block; font-size: 1em; color: #7fbf8f; }
.hs-p-chat { display: flex; flex-direction: column; gap: .7em; margin-top: 1.2em; }
.hs-p-chat p { margin: 0; max-width: 88%; padding: .75em 1em; border-radius: 1.2em; font-size: 1.15em; line-height: 1.35; }
.hs-p-chat .in { align-self: flex-start; background: #26262b; color: var(--ink); border-bottom-left-radius: .3em; }
.hs-p-chat .out { align-self: flex-end; background: linear-gradient(120deg, #e08a4f, #c96a35); color: #1a0e07; font-weight: 500; border-bottom-right-radius: .3em; }
.hs-p-input { position: absolute; left: 1em; right: 1em; bottom: 1em; display: flex; align-items: center; justify-content: space-between; padding: .7em .8em .7em 1.1em; border-radius: 2em; background: #1d1d21; font-size: 1.05em; color: var(--ink-soft); }
.hs-p-input i { width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--accent); }

/* Tarjeta NFC */
.hs-nfc {
  position: absolute; left: 3em; top: 36em; width: 26em; height: 16.4em;
  padding: 1.6em; border-radius: 1.7em; rotate: -7deg;
  background: linear-gradient(135deg, #2f2f36 0%, #17171a 60%, #101013 100%);
  box-shadow: 0 2.5em 3.5em -1em rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px rgba(255, 255, 255, .2);
  overflow: hidden;
  animation: hs-float 8s ease-in-out -2s infinite;
}

.hs-nfc::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 100% 0%, rgba(200, 105, 58, .28), transparent 65%); pointer-events: none; }
.hs-nfc img { height: 5.2em; width: auto; display: block; }
.hs-waves { position: absolute; right: 1.6em; top: 1.6em; width: 4.2em; height: 4.2em; color: var(--accent-light); }
.hs-nfc-foot { position: absolute; left: 1.6em; bottom: 1.4em; z-index: 1; }
.hs-nfc-foot b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 2.3em; line-height: 1; color: var(--ink); }
.hs-nfc-foot small { display: block; margin-top: .5em; letter-spacing: .12em; text-transform: uppercase; font-size: .85em; color: var(--ink-soft); }

/* Código QR */
.hs-qr {
  position: absolute; right: 5em; top: -1em; width: 11em; z-index: 3; padding: 1.1em 1.1em .8em;
  border-radius: 1.4em; rotate: 6deg; background: #f5f0ea;
  box-shadow: 0 2em 3em -1em rgba(0, 0, 0, .7);
  animation: hs-float 6s ease-in-out -1s infinite;
}
.hs-qr svg { display: block; width: 100%; height: auto; }
.hs-qr small { display: block; margin-top: .6em; text-align: center; font-size: 1em; font-weight: 500; color: #3a3a40; }

/* Chip: incidencia resuelta */
.hs-chip {
  position: absolute; display: flex; align-items: center; gap: 1em;
  padding: .9em 1.4em .9em 1em; border-radius: 1.6em;
  background: rgba(31, 31, 35, .85);
  -webkit-backdrop-filter: blur(1em); backdrop-filter: blur(1em);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 1.5em 2.5em -1em rgba(0, 0, 0, .6);
}
.hs-chip-ticket { left: 2em; top: 0; animation: hs-float 5s ease-in-out infinite; z-index: 2; }
.hs-chip b { display: block; font-size: 1.35em; color: var(--ink); }
.hs-chip small { display: block; margin-top: .2em; font-size: 1.05em; color: var(--ink-soft); }
.hs-tick { width: 2.8em; height: 2.8em; border-radius: 50%; display: grid; place-items: center; color: #1a0e07; background: linear-gradient(140deg, #e08a4f, #c96a35); }
.hs-tick svg { width: 1.5em; height: 1.5em; }

.hs-coords { position: absolute; right: 0; bottom: -.5em; margin: 0; font-size: 1em; letter-spacing: .14em; text-transform: uppercase; color: rgba(168, 162, 154, .9); }

@keyframes hs-float { 50% { translate: 0 -.9em; } }

@media (prefers-reduced-motion: reduce) {
  .hs-phone, .hs-nfc, .hs-qr, .hs-chip-ticket { animation: none; }
}
/* ═══════════════════════════════════════════════════════════════════
   MENÚ — navegación sencilla + "Pide presupuesto"
   Escritorio (≥1024px): enlaces + Área cliente + botón destacado.
   Móvil/tablet: botón hamburguesa y panel a pantalla completa.
   ═══════════════════════════════════════════════════════════════════ */

.swb-header {
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s, padding .3s;
}

.swb-header.is-scrolled {
  background: rgba(14, 14, 16, .78);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--line);
}

.swb-nav { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.swb-nav-desktop { display: none; align-items: center; gap: .25rem; }
.swb-links { display: flex; align-items: center; gap: .125rem; margin: 0 .5rem 0 0; padding: 0; list-style: none; }

.swb-links a {
  display: block;
  padding: .5rem .85rem;
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-size: .875rem;
  color: rgba(245, 240, 234, .78);
  transition: color .2s, background-color .2s;
}

.swb-links a:hover { color: #fff; background: rgba(255, 255, 255, .07); }

.swb-area {
  padding: .55rem 1rem;
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-size: .875rem;
  color: var(--ink-soft);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  transition: color .2s, box-shadow .2s;
}

.swb-area:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(226, 154, 107, .6); }

.swb-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: .375rem;
  padding: .65rem 1.3rem;
  border-radius: 9999px;
  font-family: var(--font-ui);
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.swb-burger {
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
}

.swb-burger-ico { position: relative; display: block; width: 1.25rem; height: 1rem; }

.swb-burger-ico i {
  position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px;
  background: var(--ink);
  transition: transform .3s, opacity .2s, top .3s;
}

.swb-burger-ico i:nth-child(1) { top: 0; }
.swb-burger-ico i:nth-child(2) { top: calc(50% - .75px); }
.swb-burger-ico i:nth-child(3) { top: calc(100% - 1.5px); }
.swb-burger-ico.is-open i:nth-child(1) { top: calc(50% - .75px); transform: rotate(45deg); }
.swb-burger-ico.is-open i:nth-child(2) { opacity: 0; }
.swb-burger-ico.is-open i:nth-child(3) { top: calc(50% - .75px); transform: rotate(-45deg); }

.swb-menu {
  position: fixed; inset: 0; z-index: 35;
  display: flex;
  padding: calc(6rem + env(safe-area-inset-top, 0px)) 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  background:
    radial-gradient(70% 45% at 85% 0%, rgba(200, 105, 58, .16), transparent 70%),
    #0e0e10;
  opacity: 0; visibility: hidden;
  transition: opacity .35s, visibility .35s;
}

.swb-menu.is-open { opacity: 1; visibility: visible; }
.swb-menu-inner { width: 100%; max-width: 28rem; margin: auto; }
.swb-menu ul { margin: 0; padding: 0; list-style: none; }

.swb-menu li {
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1);
}

.swb-menu.is-open li { opacity: 1; transform: none; }

.swb-menu li a {
  display: block;
  padding: clamp(.4rem, 1.4vh, .7rem) 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.6vh, 2.1rem);
  line-height: 1.1;
  color: var(--ink);
}

.swb-menu li a:hover { color: var(--accent-light); }
.swb-menu-actions { display: grid; gap: .75rem; margin-top: 2rem; }
.swb-menu-actions .swb-cta { margin: 0; padding: 1rem; font-size: 1rem; }
.swb-menu-actions .swb-area { padding: .95rem; font-size: 1rem; }

@media (min-width: 1024px) {
  .swb-nav-desktop { display: flex; }
  .swb-burger, .swb-menu { display: none; }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .swb-links a { padding: .5rem .6rem; font-size: .8125rem; }
  .swb-area { padding: .5rem .8rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   SOLUCIONES SEGÚN TIPO DE NEGOCIO
   ═══════════════════════════════════════════════════════════════════ */

.sol-grid { display: grid; gap: 1rem; margin-top: 4rem; }
@media (min-width: 720px) { .sol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .sol-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.sol-card { display: flex; flex-direction: column; padding: 1.75rem; border-radius: 1.5rem; }
.sol-card:hover { transform: translateY(-4px); }
.sol-ico { width: 2.75rem; height: 2.75rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; }
.sol-title { margin: 1.25rem 0 0; font-size: 1.55rem; line-height: 1.15; color: var(--ink); }
.sol-text { margin: .75rem 0 0; font-size: .875rem; line-height: 1.7; color: var(--ink-soft); }
.sol-list { flex: 1; margin: 1.25rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; align-content: start; }

.sol-list li {
  position: relative;
  padding-left: 1.2rem;
  font-family: var(--font-ui);
  font-size: .8125rem;
  line-height: 1.5;
  color: #d6d0c8;
}

.sol-list li::before {
  content: "";
  position: absolute; left: .1rem; top: .5em;
  width: .4rem; height: .4rem;
  background: var(--accent);
  transform: rotate(45deg);
}

.sol-link {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: 1.5rem;
  font-family: var(--font-ui); font-size: .875rem;
  color: var(--accent-light);
  transition: filter .2s, gap .2s;
}

.sol-link:hover { filter: brightness(1.2); gap: .6rem; }

/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════ */

.swf {
  position: relative;
  padding: 4rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg-deep);
  border-top: 1px solid var(--line);
  font-family: var(--font-ui);
}

.swf::before {
  content: "";
  position: absolute; top: -1px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 105, 58, .55) 30%, rgba(226, 154, 107, .3) 70%, transparent);
}

.swf-in { max-width: 64rem; margin: 0 auto; }
.swf-grid { display: grid; gap: 2.5rem; }
@media (min-width: 768px) { .swf-grid { grid-template-columns: 1.4fr 1fr 1.3fr; gap: 3rem; } }

.swf-name { margin: 0; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; color: var(--ink); }
.swf-text { margin: .85rem 0 0; max-width: 22rem; font-size: .875rem; line-height: 1.7; color: var(--ink-soft); }
.swf-h { margin: 0 0 1rem; font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-light); }
.swf ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .65rem; }
.swf ul a { font-size: .875rem; color: #d6d0c8; transition: color .2s; word-break: break-word; }
.swf ul a:hover { color: var(--accent-light); }

.swf-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: .75rem; color: var(--ink-soft);
}

.swf-bottom a:hover { color: var(--ink); }
/* ═══════════════════════════════════════════════════════════════════
   SERVICIOS — enfocados en el resultado para el cliente
   ═══════════════════════════════════════════════════════════════════ */

.svc-grid { display: grid; gap: 1rem; margin-top: 4rem; }
@media (min-width: 900px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-feature, .svc-wide { grid-column: 1 / -1; }

.svc-card { display: flex; flex-direction: column; padding: 1.75rem; border-radius: 1.5rem; scroll-margin-top: 6rem; }
@media (min-width: 640px) { .svc-card { padding: 2.25rem; } }

.svc-top { display: flex; align-items: center; gap: 1rem; }
.svc-ico { width: 2.75rem; height: 2.75rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svc-num { font-family: var(--font-ui); font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--accent-light); }

.svc-badge {
  margin-left: auto;
  padding: .3rem .75rem;
  border-radius: 9999px;
  font-family: var(--font-ui); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600;
  color: #1a0e07;
  background: linear-gradient(120deg, #e08a4f, #c96a35);
}

.svc-title { margin: 1.4rem 0 0; font-size: clamp(1.7rem, 3.4vw, 2.2rem); line-height: 1.1; color: var(--ink); }
.svc-text { margin: .9rem 0 0; max-width: 34rem; font-size: .9375rem; line-height: 1.7; color: var(--ink-soft); }

.svc-label {
  margin: 1.75rem 0 .8rem;
  font-family: var(--font-ui); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(168, 162, 154, .9);
}

.svc-tags { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1; align-content: flex-start; }
.svc-tags .tag { font-family: var(--font-ui); font-size: .75rem; padding: .4rem .85rem; border-radius: 9999px; }

.svc-cta {
  display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start;
  margin-top: 1.75rem;
  font-family: var(--font-ui); font-size: .875rem;
  color: var(--accent-light);
  transition: filter .2s, gap .2s;
}

.svc-cta:hover { filter: brightness(1.2); gap: .6rem; }

/* NFC y QR: tarjeta destacada con composición visual */
.svc-feature { display: grid; gap: 2rem; }
.svc-fcopy { display: flex; flex-direction: column; min-width: 0; }
.svc-fvis { align-self: center; }

@media (min-width: 900px) {
  .svc-feature { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 2.5rem; }
}

.svc-apps { margin: 0; padding: 0; list-style: none; display: grid; gap: .65rem .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 560px) { .svc-apps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.svc-apps li {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-ui); font-size: .8125rem; line-height: 1.3; color: #e4ded6;
}

.svc-app-ico {
  flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 9999px;
  display: grid; place-items: center;
  color: var(--accent-light);
  background: rgba(200, 105, 58, .12);
  box-shadow: inset 0 0 0 1px rgba(226, 154, 107, .25);
}

.svc-app-ico svg { width: 1rem; height: 1rem; }

.svc-stage.hs-stage { aspect-ratio: 56 / 46; }
.svc-stage .hs-qr { right: 4em; top: 1em; }
.svc-stage .hs-nfc { left: 2em; top: 13em; }
.svc-stage .svc-chip1 { left: 2em; top: 2em; animation: hs-float 5s ease-in-out infinite; }
.svc-stage .svc-chip2 { right: 0; top: 33em; animation: hs-float 6s ease-in-out -2s infinite; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .svc-stage .hs-chip { animation: none; } }

.svc-more { margin: 2.5rem 0 0; font-family: var(--font-ui); font-size: .875rem; color: var(--ink-soft); }
.svc-more a { color: var(--accent-light); text-decoration: underline; text-decoration-color: rgba(200, 105, 58, .5); text-underline-offset: 4px; }
/* Soluciones por negocio: 5 tarjetas (3 + 2) con etiquetas */
@media (min-width: 1024px) {
  .sol-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sol-card { grid-column: span 2; }
  .sol-card:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .sol-card:last-child { grid-column: 1 / -1; }
}
.sol-chips { flex: 1; display: flex; flex-wrap: wrap; gap: .5rem; align-content: flex-start; margin-top: 1.25rem; }
.sol-chips .tag { font-family: var(--font-ui); font-size: .75rem; padding: .4rem .85rem; border-radius: 9999px; }
/* ═══════════════════════════════════════════════════════════════════
   PROYECTOS — solo proyectos propios
   ═══════════════════════════════════════════════════════════════════ */

.prj-grid { display: grid; gap: 1rem; margin-top: 4rem; }
@media (min-width: 768px) { .prj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.prj-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; border-radius: 1.5rem; }
.prj-card:hover { transform: translateY(-4px); }

.prj-shot {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: radial-gradient(60% 80% at 75% 15%, rgba(200, 105, 58, .22), transparent 70%), #101013;
  border-bottom: 1px solid var(--line);
}

.prj-shot > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.prj-card:hover .prj-shot > img { transform: scale(1.04); }

.prj-shot > img + *, .prj-shot::after { pointer-events: none; }
.prj-shot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14, 14, 16, .55), transparent 45%); }

.prj-badge {
  position: absolute; top: .875rem; left: .875rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .75rem; border-radius: 9999px;
  font-family: var(--font-ui); font-size: .6875rem; letter-spacing: .04em;
  color: var(--accent-pale);
  background: rgba(14, 14, 16, .7);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(226, 154, 107, .3);
}

.prj-dot { width: 6px; height: 6px; border-radius: 9999px; background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }

.prj-body { display: flex; flex-direction: column; flex: 1; padding: 1.75rem; }
.prj-kicker { margin: 0 0 .5rem; font-family: var(--font-ui); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(168, 162, 154, .9); }
.prj-title { margin: 0; font-size: 1.75rem; line-height: 1.1; color: var(--ink); }
.prj-text { margin: .8rem 0 0; font-size: .875rem; line-height: 1.7; color: var(--ink-soft); }
.prj-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; flex: 1; align-content: flex-start; }
.prj-tags .tag { font-family: var(--font-ui); font-size: .75rem; padding: .4rem .85rem; border-radius: 9999px; }
.prj-cta { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; margin-top: 1.5rem; font-family: var(--font-ui); font-size: .875rem; color: var(--accent-light); transition: filter .2s, gap .2s; }
.prj-cta:hover { filter: brightness(1.2); gap: .6rem; }

.prj-next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 1rem; padding: 2rem 2.25rem; border-radius: 1.5rem; }
.prj-next h3 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.1rem); line-height: 1.1; color: var(--ink); }
.prj-next p { margin: .6rem 0 0; max-width: 30rem; font-family: var(--font-ui); font-size: .875rem; line-height: 1.6; color: var(--ink-soft); }
.prj-next-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .9rem 1.6rem; border-radius: 9999px; font-family: var(--font-ui); font-size: .9375rem; font-weight: 600; white-space: nowrap; }

/* Maquetas de VaultCo, MyLife y la web corporativa (CSS puro) */
.prj-mock { position: absolute; inset: 0; }
.pm { position: absolute; inset: 0; font-size: 2.0833cqw; font-family: var(--font-ui); }
.pm em, .pm i { font-style: normal; }

.pm-panel { position: absolute; left: 4em; top: 4.6em; width: 27em; padding: 1.6em; border-radius: 1.6em; background: #17171a; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 2em 3em -1em rgba(0, 0, 0, .7); }
.pm-head { display: flex; align-items: center; gap: .8em; }
.pm-head b { font-size: 1.5em; font-weight: 600; color: var(--ink); }
.pm-head i { margin-left: auto; font-size: 1em; color: var(--accent-light); }
.pm-ico { flex-shrink: 0; width: 2.4em; height: 2.4em; border-radius: 50%; display: grid; place-items: center; color: var(--accent-light); background: rgba(200, 105, 58, .16); box-shadow: inset 0 0 0 1px rgba(226, 154, 107, .3); }
.pm-ico svg { width: 1.3em; height: 1.3em; }
.pm-row { display: flex; align-items: center; justify-content: space-between; gap: .8em; margin-top: .7em; padding: .9em 1em; border-radius: .8em; background: rgba(255, 255, 255, .045); }
.pm-row em { flex: 1; font-size: 1.15em; color: var(--ink-soft); }
.pm-row span:last-child { font-size: 1.15em; color: var(--ink); letter-spacing: .08em; }
.pm-gen { display: flex; align-items: center; justify-content: space-between; margin-top: 1em; }
.pm-gen span { font-size: 1em; color: var(--ink-soft); }
.pm-gen code { padding: .3em .7em; border-radius: .6em; font-family: ui-monospace, Consolas, monospace; font-size: 1.25em; color: var(--accent-light); background: rgba(200, 105, 58, .12); }
.pm-alert { position: absolute; right: 1.6em; bottom: 1.2em; display: flex; align-items: center; gap: .7em; padding: .8em 1.3em .8em .8em; border-radius: 1.2em; font-size: 1.2em; color: var(--ink); background: rgba(31, 31, 35, .95); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 1.5em 2.5em -1em rgba(0, 0, 0, .6); }

.pm-check { flex-shrink: 0; width: 1.6em; height: 1.6em; border-radius: .5em; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgba(226, 154, 107, .5); color: #1a0e07; }
.pm-check svg { width: 1em; height: 1em; }
.pm-row.done .pm-check { background: linear-gradient(140deg, #e08a4f, #c96a35); box-shadow: none; }
.pm-row.done em { text-decoration: line-through; opacity: .6; }
.pm-life .pm-row span:last-child { font-size: 1em; letter-spacing: 0; color: var(--ink-soft); }
.pm-date { position: absolute; right: 4em; top: 5em; width: 9em; padding: 1.1em 0 1em; border-radius: 1.4em; text-align: center; color: #17171a; background: #f5f0ea; rotate: 5deg; box-shadow: 0 2em 3em -1em rgba(0, 0, 0, .7); }
.pm-date b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 4.2em; line-height: 1; }
.pm-date small { display: block; margin-top: .3em; font-size: 1.1em; letter-spacing: .2em; color: #b5522b; font-weight: 600; }

.pm-sw { inset: 5em 4em -2em; border-radius: 1.4em 1.4em 0 0; overflow: hidden; background: #0d0d10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.pm-bar { display: flex; align-items: center; gap: .5em; height: 2.8em; padding: 0 1em; background: #17171a; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.pm-bar i { width: .8em; height: .8em; border-radius: 50%; background: #3a3a41; }
.pm-bar i:first-child { background: var(--accent); }
.pm-bar span { margin-left: 1em; padding: .3em 1.2em; border-radius: 2em; font-size: 1em; color: var(--ink-soft); background: rgba(255, 255, 255, .05); }
.pm-page { padding: 3em 3em 0; }
.pm-h { margin: 0; font-family: var(--font-display); font-size: 3.6em; line-height: 1.05; color: var(--ink); }
.pm-h u { text-decoration: none; font-style: italic; color: #e29a6b; }
.pm-btn { display: inline-block; margin-top: 1.4em; padding: .7em 1.4em; border-radius: 2em; font-size: 1.2em; font-weight: 600; color: #1a0e07; background: linear-gradient(120deg, #e08a4f, #c96a35); }
/* ═══════════════════════════════════════════════════════════════════
   TECNOLOGÍA — elemento discreto de confianza, junto al pie
   ═══════════════════════════════════════════════════════════════════ */

.swt { padding: 3rem 1.25rem 3.5rem; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .swt { padding-left: 2rem; padding-right: 2rem; } }
.swt-in { max-width: 44rem; margin: 0 auto; text-align: center; }
.swt-h { margin: 0; font-family: var(--font-ui); font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(168, 162, 154, .9); }
.swt-text { margin: .8rem auto 0; max-width: 32rem; font-family: var(--font-ui); font-size: .8125rem; line-height: 1.7; color: rgba(168, 162, 154, .9); }
.swt-list { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.swt-list li { padding: .3rem .7rem; border-radius: 9999px; font-family: var(--font-ui); font-size: .6875rem; color: rgba(168, 162, 154, .9); box-shadow: inset 0 0 0 1px var(--line); }
/* ═══════════════════════════════════════════════════════════════════
   POR QUÉ ELEGIRNOS — composición visual (bento)
   ═══════════════════════════════════════════════════════════════════ */

.wy-grid { display: grid; gap: 1rem; margin-top: 4rem; }
@media (min-width: 720px) { .wy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wy-wide { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .wy-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wy-c1 { grid-column: span 4; }
  .wy-c2 { grid-column: span 2; }
  .wy-c3, .wy-c4, .wy-c5 { grid-column: span 2; }
  .wy-c6 { grid-column: 1 / -1; }
}

.wy-card { display: flex; flex-direction: column; padding: 1.75rem; border-radius: 1.5rem; overflow: hidden; }
.wy-card:hover { transform: translateY(-3px); }
.wy-k { margin: 1.5rem 0 0; font-family: var(--font-ui); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-light); }
.wy-card h3 { margin: .6rem 0 0; font-size: 1.6rem; line-height: 1.12; color: var(--ink); }
.wy-card p:not(.wy-k):not(.wy-ghosts):not(.in):not(.out) { margin: .8rem 0 0; font-family: var(--font-ui); font-size: .875rem; line-height: 1.7; color: var(--ink-soft); }
.wy-vis { position: relative; }

/* Tarjetas anchas: texto + visual en dos columnas */
@media (min-width: 720px) {
  .wy-wide { flex-direction: row; align-items: center; gap: 2rem; padding: 2.25rem; }
  .wy-wide .wy-copy { flex: 1 1 50%; min-width: 0; }
  .wy-wide .wy-vis { flex: 1 1 50%; min-width: 0; }
  .wy-wide .wy-k { margin-top: 0; }
}

@media (max-width: 719px) {
  .wy-wide .wy-vis { order: -1; margin-bottom: 1.5rem; }
  .wy-wide .wy-k { margin-top: 0; }
}

/* 1 · Directo */
.wy-flow { display: flex; align-items: center; gap: .75rem; }
.wy-node { display: grid; justify-items: center; gap: .5rem; text-align: center; }
.wy-node small { font-family: var(--font-ui); font-size: .6875rem; color: var(--ink-soft); }
.wy-av { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); background: #1f1f23; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.wy-us .wy-av { background: linear-gradient(140deg, rgba(200, 105, 58, .3), rgba(31, 31, 35, .9)); box-shadow: inset 0 0 0 1px rgba(226, 154, 107, .5), 0 0 2rem -.4rem rgba(200, 105, 58, .6); }
.wy-av img { width: 2.6rem; height: auto; }
.wy-line { position: relative; flex: 1; height: 2rem; display: grid; align-items: center; }
.wy-line i { display: block; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(226, 154, 107, .1), #e29a6b, rgba(226, 154, 107, .1)); background-size: 200% 100%; animation: wy-flow 2.6s linear infinite; }
.wy-line em { position: absolute; left: 50%; top: -.35rem; translate: -50% 0; padding: .15rem .6rem; border-radius: 9999px; font-family: var(--font-ui); font-style: normal; font-size: .6875rem; color: #1a0e07; background: linear-gradient(120deg, #e08a4f, #c96a35); }
.wy-ghosts { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 1.5rem 0 0; }
.wy-ghosts span { padding: .25rem .7rem; border-radius: 9999px; font-family: var(--font-ui); font-size: .6875rem; color: rgba(168, 162, 154, .9); text-decoration: line-through; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }

/* 2 · Respuesta */
.wy-stat b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 4.4rem; line-height: 1; letter-spacing: -.02em; background: linear-gradient(100deg, #f3b98f, #d9773f 55%, #b5522b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wy-stat small { font-size: 2rem; margin-left: .15rem; }
.wy-bar { display: block; height: .4rem; margin-top: 1rem; border-radius: 9999px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.wy-bar i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e08a4f, #c96a35); transform-origin: left; animation: wy-grow 3.2s ease-in-out infinite; }

/* 3 · Chat */
.wy-chat { display: grid; gap: .5rem; }
.wy-chat p { margin: 0; max-width: 88%; padding: .7rem 1rem; border-radius: 1.1rem; font-family: var(--font-ui); font-size: .8125rem; line-height: 1.4; }
.wy-chat .in { justify-self: start; color: var(--ink); background: #26262b; border-bottom-left-radius: .3rem; }
.wy-chat .out { justify-self: end; color: #1a0e07; font-weight: 500; background: linear-gradient(120deg, #e08a4f, #c96a35); border-bottom-right-radius: .3rem; }

/* 4 · A medida */
.wy-blocks { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1.6rem; gap: .4rem; }
.wy-blocks i { border-radius: .5rem; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.wy-blocks i:nth-child(1) { grid-column: span 2; background: linear-gradient(120deg, rgba(224, 138, 79, .85), rgba(181, 82, 43, .85)); box-shadow: none; }
.wy-blocks i:nth-child(2) { grid-row: span 2; }
.wy-blocks i:nth-child(4) { grid-column: span 2; }
.wy-blocks span { grid-column: 1 / -1; justify-self: start; padding: .2rem .7rem; border-radius: 9999px; font-family: var(--font-ui); font-size: .6875rem; color: var(--accent-pale); box-shadow: inset 0 0 0 1px rgba(226, 154, 107, .35); }

/* 5 · Remoto */
.wy-scr { position: relative; height: 6.5rem; padding: 1rem; border-radius: .9rem; background: #0d0d10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); overflow: hidden; }
.wy-scr > span { display: block; height: .4rem; margin-bottom: .55rem; border-radius: .3rem; background: rgba(245, 240, 234, .14); }
.wy-l1 { width: 70%; } .wy-l2 { width: 45%; } .wy-l3 { width: 58%; }
.wy-scr em { position: absolute; left: 1rem; bottom: .8rem; padding: .15rem .6rem; border-radius: 9999px; font-family: var(--font-ui); font-style: normal; font-size: .6875rem; color: var(--accent-pale); background: rgba(200, 105, 58, .16); box-shadow: inset 0 0 0 1px rgba(226, 154, 107, .35); }
.wy-cursor { position: absolute; width: 1.4rem; height: 1.4rem; right: 22%; top: 38%; animation: wy-cursor 4s ease-in-out infinite; }

/* 6 · Mapa */
.wy-map svg { display: block; width: 100%; height: auto; max-height: 16rem; }
.wy-pulse { transform-box: fill-box; transform-origin: center; animation: wy-pulse 2.4s ease-out infinite; }

@keyframes wy-flow { to { background-position: -200% 0; } }
@keyframes wy-grow { 0% { transform: scaleX(.08); } 70%, 100% { transform: scaleX(1); } }
@keyframes wy-cursor { 50% { translate: -1.6rem 1rem; } }
@keyframes wy-pulse { from { scale: 1; opacity: .9; } to { scale: 4; opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .wy-line i, .wy-bar i, .wy-cursor, .wy-pulse { animation: none; } }
/* ═══════════════════════════════════════════════════════════════════
   OPINIONES — testimonios reales (se rellena en opiniones.js)
   ═══════════════════════════════════════════════════════════════════ */

.op-grid { display: grid; gap: 1rem; margin-top: 3.5rem; }
@media (min-width: 720px) { .op-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .op-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.op-card { display: flex; flex-direction: column; margin: 0; padding: 1.75rem; border-radius: 1.5rem; }
.op-card:hover { transform: translateY(-3px); }

.op-stars { display: flex; gap: .2rem; }
.op-stars svg { fill: rgba(255, 255, 255, .12); }
.op-stars svg.on { fill: #e29a6b; }

.op-quote { flex: 1; margin: 1.1rem 0 0; font-family: var(--font-ui); font-size: .9375rem; line-height: 1.7; color: #e4ded6; }

.op-who { display: flex; align-items: center; gap: .85rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.op-av { flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 9999px; display: grid; place-items: center; font-family: var(--font-ui); font-size: .8125rem; font-weight: 600; }
.op-id { min-width: 0; display: grid; }
.op-name { font-family: var(--font-ui); font-size: .9375rem; font-weight: 600; color: var(--ink); }
.op-co { font-family: var(--font-ui); font-size: .8125rem; color: var(--ink-soft); }
.op-tag { align-self: flex-start; margin-top: 1.1rem; font-family: var(--font-ui); font-size: .75rem; padding: .4rem .85rem; border-radius: 9999px; }

.op-summary { display: flex; align-items: baseline; gap: .6rem; margin: 2rem 0 0; font-family: var(--font-ui); font-size: .875rem; color: var(--ink-soft); }
.op-avg { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--ink); }
.op-preview { margin: 2rem 0 0; padding: .6rem 1rem; border-radius: .8rem; font-family: var(--font-ui); font-size: .8125rem; color: var(--accent-pale); background: rgba(200, 105, 58, .12); box-shadow: inset 0 0 0 1px rgba(226, 154, 107, .3); }
/* ═══════════════════════════════════════════════════════════════════
   CONTACTO — formulario simple + WhatsApp muy visible
   ═══════════════════════════════════════════════════════════════════ */

.wa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.5rem; border-radius: 9999px;
  font-family: var(--font-ui); font-size: .9375rem; font-weight: 600; text-decoration: none;
  color: #052e14; background: #25d366;
  box-shadow: 0 10px 28px -10px rgba(37, 211, 102, .7), inset 0 1px rgba(255, 255, 255, .35);
  transition: filter .2s, transform .2s;
}

.wa-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.wa-btn svg { flex-shrink: 0; }

.cf-layout { display: grid; gap: 1rem; margin-top: 3.5rem; align-items: start; }
@media (min-width: 900px) { .cf-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.25rem; } }

.cf-side { display: grid; gap: 1rem; }

.cf-wa { padding: 1.75rem; border-radius: 1.5rem; }
.cf-wa-k { margin: 0; font-family: var(--font-ui); font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-light); }
.cf-wa h3 { margin: .6rem 0 0; font-size: 1.8rem; line-height: 1.1; color: var(--ink); }
.cf-wa > p:not(.cf-wa-k) { margin: .7rem 0 0; font-family: var(--font-ui); font-size: .875rem; line-height: 1.6; color: var(--ink-soft); }
.cf-wa-btn { width: 100%; margin-top: 1.4rem; padding: 1.05rem 1.25rem; font-size: 1rem; }

.cf-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.cf-item { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; border-radius: 1.1rem; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, background-color .2s; }
a.cf-item:hover { background: rgba(200, 105, 58, .08); box-shadow: inset 0 0 0 1px rgba(226, 154, 107, .4); }
.cf-ico { flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 9999px; display: grid; place-items: center; }
.cf-txt { min-width: 0; display: grid; }
.cf-txt small { font-family: var(--font-ui); font-size: .6875rem; color: var(--ink-soft); }
.cf-txt b { font-family: var(--font-ui); font-size: .875rem; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cf-form { padding: 1.75rem; border-radius: 1.5rem; }
@media (min-width: 640px) { .cf-form { padding: 2.25rem; } }
.cf-title { margin: 0; font-size: 1.9rem; line-height: 1.1; color: var(--ink); }
.cf-sub { margin: .6rem 0 0; font-family: var(--font-ui); font-size: .875rem; color: var(--ink-soft); }

.cf-grid { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 560px) { .cf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-full { grid-column: 1 / -1; } }

.cf-field { display: grid; gap: .45rem; }
.cf-field > span { font-family: var(--font-ui); font-size: .8125rem; font-weight: 500; color: #d6d0c8; }

.cf-field input, .cf-field select, .cf-field textarea {
  width: 100%; padding: .85rem 1rem; border: 0; border-radius: .9rem; outline: none;
  font-family: var(--font-ui); font-size: 1rem; color: var(--ink);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .2s, background-color .2s;
}

.cf-field select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e29a6b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }
.cf-field select option { background: #17171a; color: var(--ink); }
.cf-field textarea { resize: vertical; min-height: 6.5rem; line-height: 1.5; }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: rgba(168, 162, 154, .9); }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1.5px var(--accent-light); }

.cf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.cf-msg { margin: 1.1rem 0 0; padding: .75rem 1rem; border-radius: .9rem; font-family: var(--font-ui); font-size: .875rem; line-height: 1.5; }
.cf-msg.error { color: #fca5a5; background: rgba(239, 68, 68, .1); box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .3); }
.cf-msg.ok { color: #86efac; background: rgba(34, 197, 94, .1); box-shadow: inset 0 0 0 1px rgba(34, 197, 94, .3); }

.cf-submit { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 1.4rem; padding: 1.05rem 1.5rem; border: 0; border-radius: 9999px; font-family: var(--font-ui); font-size: 1rem; font-weight: 600; cursor: pointer; }
.cf-submit:disabled { opacity: .6; cursor: default; }
.cf-legal { margin: .9rem 0 0; text-align: center; font-family: var(--font-ui); font-size: .75rem; color: rgba(168, 162, 154, .9); }

/* Botón flotante de WhatsApp: visible en toda la web, más grande en móvil */
.wa-float {
  position: fixed; z-index: 30;
  right: calc(1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 3.5rem; padding: 0 1.3rem 0 1.05rem; border-radius: 9999px;
  font-family: var(--font-ui); font-size: 1rem; font-weight: 600; text-decoration: none;
  color: #052e14; background: #25d366;
  box-shadow: 0 14px 34px -8px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .18) inset;
  transition: transform .2s, filter .2s;
}

.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); animation: wa-ring 2.8s ease-out infinite; pointer-events: none; }
.wa-float:hover { transform: translateY(-2px); filter: brightness(1.06); }
.wa-float svg { width: 1.6rem; height: 1.6rem; }

@media (min-width: 900px) {
  .wa-float { right: 1.75rem; bottom: 1.75rem; }
  .wa-float-t::after { content: " · ¿Hablamos?"; font-weight: 500; }
}

@keyframes wa-ring { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); } 70%, 100% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); } }
@media (prefers-reduced-motion: reduce) { .wa-float::before { animation: none; } }

.swb-menu-wa { padding: 1rem; font-size: 1rem; }

/* Enlaces internos a las páginas de servicio (SEO) */
.svc-more-l, .sol-more-l { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 1.1rem 0 0; font-family: var(--font-ui); font-size: .8125rem; }
.svc-more-l a, .sol-more-l a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: rgba(200, 105, 58, .5); text-underline-offset: 4px; transition: color .2s; }
.svc-more-l a:hover, .sol-more-l a:hover { color: var(--accent-light); }
@media (min-width: 768px) { .swf-grid { grid-template-columns: 1.2fr .8fr 1.3fr 1.1fr; } }
.swf ul a { display: inline-block; }
/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE Y RENDIMIENTO — móvil, tablet y escritorio
   ═══════════════════════════════════════════════════════════════════ */

/* Toques más ágiles y sin zoom accidental al pulsar dos veces */
a, button, summary, label, select { touch-action: manipulation; }

/* El fondo fijo obliga a repintar en cada scroll en móviles y tablets */
@media (max-width: 1023px), (hover: none) {
  body { background-attachment: scroll; }
}

/* Cada bloque avisa al navegador de su animación solo mientras entra */
.reveal { will-change: auto; }
.reveal:not(.reveal-in) { will-change: opacity, transform; }

/* Márgenes cómodos y textos bien escalados en móvil */
@media (max-width: 639px) {
  .section, #demos { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .section h2 { text-wrap: balance; }
  .card, .svc-card, .sol-card, .wy-card, .op-card, .cf-form, .cf-wa, .prj-next { border-radius: 1.25rem; }
  .svc-card, .sol-card, .wy-card, .op-card, .cf-wa { padding: 1.5rem 1.35rem; }
  .cf-form { padding: 1.5rem 1.25rem; }
  .prj-body { padding: 1.5rem 1.35rem; }
  .prj-next { padding: 1.6rem 1.35rem; }
  .prj-next-btn, .cf-wa-btn { width: 100%; }
  .swf { padding-top: 3rem; }
}

/* Que el botón flotante no tape el final de la página */
@media (max-width: 899px) {
  .swf { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
}

/* Móviles muy estrechos (320–360 px) */
@media (max-width: 360px) {
  .hs-wrap { padding-left: 1rem; padding-right: 1rem; }
  .hs-title { font-size: 2.35rem; }
  .hs-btn { width: 100%; }
  .swb-menu li a { font-size: clamp(1.5rem, 4.4vh, 1.9rem); }
  .wa-float { padding: 0 1.1rem 0 .9rem; }
  .svc-title, .sol-title, .prj-title { font-size: 1.5rem; }
}

/* Zonas táctiles de al menos 44 px en los enlaces pequeños */
@media (pointer: coarse) {
  .swf ul { gap: .1rem; }
  .swf ul a, .svc-more-l a, .sol-more-l a, .svc-cta, .sol-link, .prj-cta {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .svc-more-l, .sol-more-l { gap: 0 1.1rem; margin-top: .4rem; }
  .swb-links a { min-height: 44px; }
  .hs-points li { padding: .15rem 0; }
}

/* En pantallas táctiles no dejamos tarjetas «levantadas» tras pulsar */
@media (hover: none) {
  .card:hover, .sol-card:hover, .wy-card:hover, .op-card:hover, .prj-card:hover, .svc-card:hover, .c:hover { transform: none; }
  .btn-accent:hover, .wa-btn:hover, .hs-btn-ghost:hover, .wa-float:hover { transform: none; }
}

/* Móvil en horizontal: portada sin altura forzada */
@media (max-height: 500px) and (orientation: landscape) {
  .hs-hero { min-height: 0; }
  .hs-wrap { padding-top: 6rem; }
  .swb-menu { align-items: flex-start; }
}

/* Pantallas grandes: el contenido no se estira sin fin */
@media (min-width: 1600px) {
  .hs-wrap { max-width: 84rem; }
}
/* Portátiles pequeños (1024–1180 px): cabecera compacta sin saltos de línea */
.swb-area, .swb-cta, .swb-links a { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1180px) {
  header.swb-header { padding-left: calc(1.5rem + env(safe-area-inset-left, 0px)); padding-right: calc(1.5rem + env(safe-area-inset-right, 0px)); }
  .swb-nav { gap: .75rem; }
  .swb-links { margin-right: .25rem; }
  .swb-links a { padding: .5rem .5rem; font-size: .8125rem; }
  .swb-area { padding: .5rem .75rem; font-size: .8125rem; }
  .swb-cta { padding: .6rem 1rem; font-size: .8125rem; margin-left: 0; }
  .swb-brand-name { font-size: 1.15rem; }
}
/* ═══════════════════════════════════════════════════════════════════
   MOVIMIENTO, ACCESIBILIDAD Y RENDIMIENTO
   Todo en CSS (sin librerías), solo con transform/opacity y con mejora
   progresiva: si el navegador no lo soporta, la web se ve igual, sin
   movimiento. Se desactiva por completo con «reducir movimiento».
   ═══════════════════════════════════════════════════════════════════ */

/* ── Accesibilidad: enlace de salto y foco visible ───────────────── */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .7rem 1.1rem; border-radius: .7rem;
  font: 600 .875rem/1 var(--font-ui); color: #1a0e07; background: #e08a4f;
  transition: top .2s;
}
.skip-link:focus { top: 1rem; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-light); outline-offset: 3px;
}
.wa-float:focus-visible, .wa-btn:focus-visible { outline-color: #fff; }
.swb-burger:focus-visible, .swb-area:focus-visible { outline-offset: 2px; }
.cf-field input:focus-visible, .cf-field select:focus-visible, .cf-field textarea:focus-visible { outline: none; }

/* ── Entradas suaves al hacer scroll (refinadas) ─────────────────── */
.reveal { transform: translateY(18px); transition-duration: .8s; }

/* ── Botones dinámicos: brillo que recorre el botón al pasar/enfocar ─ */
.btn-accent { position: relative; overflow: hidden; isolation: isolate; }
.btn-accent::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .3) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}
.btn-accent:hover::after, .btn-accent:focus-visible::after { transform: translateX(130%); }
.btn-accent:active { transform: scale(.98); }

/* ── Tarjetas: elevación y borde con brillo cobre ────────────────── */
.card, .c { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s, border-color .35s, background-color .35s; }

/* ── Fondo del hero: deriva lenta y sutil ────────────────────────── */
.hs-bg::after { inset: -6%; animation: hs-drift 22s ease-in-out infinite alternate; }
.hs-glow { animation: hs-breathe 9s ease-in-out infinite alternate; }

/* Degradado del titular: desplazamiento discreto */
.hs-grad { background-size: 200% 100%; animation: grad-shift 10s ease-in-out infinite alternate; }

@keyframes hs-drift { from { transform: translate3d(-1.5%, 1%, 0) scale(1); } to { transform: translate3d(2%, -1.5%, 0) scale(1.04); } }
@keyframes hs-breathe { from { opacity: .75; scale: 1; } to { opacity: 1; scale: 1.06; } }
@keyframes grad-shift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ── Parallax muy ligero (solo navegadores con scroll-driven CSS) ─── */
@supports (animation-timeline: scroll()) {
  .hs-laptop { animation: par-laptop linear both; animation-timeline: scroll(root block); animation-range: 0 70vh; }
  .hs-bg::before { animation: par-pattern linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
  @keyframes par-laptop { to { translate: 0 -16px; } }
  @keyframes par-pattern { to { translate: 0 -36px; } }
}

/* ── Preferencia de movimiento reducido: sin animaciones ─────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   HERO v2 — ambiente premium: Giralda decorativa, luz cobre, mockups
   y tarjetas flotantes de servicios. Todo vectorial y en CSS.
   ═══════════════════════════════════════════════════════════════════ */

.hs-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Giralda: elemento decorativo, tenue y con brillo cobre */
.hs-giralda {
  position: absolute; left: 37%; bottom: 0; z-index: 0;
  height: min(88%, 48rem); width: auto; aspect-ratio: 120 / 432;
  opacity: .24; filter: drop-shadow(0 0 30px rgba(200, 105, 58, .4));
}

/* Perfil lejano de la ciudad, muy sutil, en la base izquierda */
.hs-skyline {
  position: absolute; left: 0; bottom: 0; width: 72%; height: 24%; max-height: 14rem; opacity: .11;
  -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 100%); mask-image: linear-gradient(90deg, #000 30%, transparent 100%);
}

/* Luces lejanas (bokeh) */
.hs-bokeh {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(243, 185, 143, .9), rgba(200, 105, 58, 0) 70%);
  opacity: .32; animation: bokeh 7s ease-in-out infinite alternate;
}
.hs-bokeh:nth-of-type(1) { left: 8%; bottom: 15%; width: 22px; height: 22px; }
.hs-bokeh:nth-of-type(2) { left: 19%; bottom: 9%; width: 14px; height: 14px; animation-delay: -2s; }
.hs-bokeh:nth-of-type(3) { left: 31%; bottom: 19%; width: 10px; height: 10px; animation-delay: -4s; }
.hs-bokeh:nth-of-type(4) { right: 10%; top: 24%; width: 18px; height: 18px; animation-delay: -1s; }
.hs-bokeh:nth-of-type(5) { right: 27%; top: 13%; width: 10px; height: 10px; animation-delay: -3s; }
@keyframes bokeh { from { opacity: .12; scale: .85; } to { opacity: .5; scale: 1.1; } }

/* Luz ambiental: horizonte cálido abajo, foco tras los mockups y viñeta */
.hs-bg::after {
  background:
    radial-gradient(46% 32% at 22% 100%, rgba(200, 105, 58, .26), transparent 72%),
    radial-gradient(50% 55% at 78% 42%, rgba(200, 105, 58, .2), transparent 70%),
    radial-gradient(60% 50% at 0% 0%, rgba(31, 31, 35, .9), transparent 70%),
    linear-gradient(180deg, transparent 70%, var(--bg) 100%);
}
.hs-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 35%, transparent 55%, rgba(8, 8, 10, .6) 100%);
}
.hs-wrap { position: relative; z-index: 1; }

/* Texto siempre legible sobre la Giralda: velo oscuro suave tras el bloque */
.hs-copy { position: relative; isolation: isolate; }
.hs-copy::before {
  content: ""; position: absolute; z-index: -1; inset: -2.5rem -3rem -2.5rem -2rem; pointer-events: none;
  background: radial-gradient(70% 70% at 30% 50%, rgba(14, 14, 16, .65), transparent 78%);
}

/* Suelo luminoso bajo los dispositivos */
.hs-stage::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3%; height: 14%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(200, 105, 58, .32), transparent 70%); filter: blur(12px);
}

/* Portátil: la pantalla enseña la web con la Giralda */
.hs-s-art { position: relative; aspect-ratio: 1.25; background: radial-gradient(70% 70% at 60% 62%, rgba(200, 105, 58, .38), transparent 72%); }
.hs-s-art svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }

/* Móvil del mockup: pantalla de inicio con la Giralda */
.hs-phone { padding: 0; }
.hs-p-screen {
  position: absolute; inset: 0; padding: 3.4em 1.3em 1.5em; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  background: radial-gradient(90% 60% at 50% 112%, rgba(200, 105, 58, .5), transparent 70%), #0b0b0d;
}
.hs-p-tower { position: absolute; right: -1.2em; bottom: 0; height: 80%; width: auto; aspect-ratio: 120 / 432; opacity: .6; }
.hs-p-words { position: relative; z-index: 1; margin: 0; font: 700 1.55em/1.32 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.hs-p-words span { display: block; }
.hs-p-words .cu { color: #e08a4f; }
.hs-p-btn { position: relative; z-index: 1; align-self: flex-start; padding: .7em 1.2em; border-radius: 2em; font-size: 1.05em; font-weight: 600; color: #1a0e07; background: linear-gradient(120deg, #e08a4f, #c96a35); }

/* Tarjetas flotantes de servicios */
.hs-services { grid-column: 1 / -1; list-style: none; display: none; gap: .8rem; margin-top: .5rem; }
@media (min-width: 640px) { .hs-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .hs-services { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
.hs-services li { animation: svc-float 9s ease-in-out infinite; }
.hs-services li:nth-child(2) { animation-delay: -2.2s; }
.hs-services li:nth-child(3) { animation-delay: -4.5s; }
.hs-services li:nth-child(4) { animation-delay: -6.7s; }
@keyframes svc-float { 50% { translate: 0 -.35rem; } }
.hs-services a {
  display: flex; align-items: center; gap: .9rem; padding: 1rem 1.15rem; border-radius: 1.2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -24px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s;
}
.hs-services a:hover, .hs-services a:focus-visible { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(226, 154, 107, .5), 0 22px 50px -22px rgba(200, 105, 58, .55); }
.hs-sico { flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; color: var(--accent-light); background: linear-gradient(140deg, rgba(200, 105, 58, .24), rgba(200, 105, 58, .06)); box-shadow: inset 0 0 0 1px rgba(226, 154, 107, .35); }
.hs-sico svg { width: 1.2rem; height: 1.2rem; }
.hs-services b { display: block; font-family: var(--font-ui); font-size: .9375rem; font-weight: 600; color: var(--ink); }
.hs-services small { display: block; margin-top: .15rem; font-family: var(--font-ui); font-size: .75rem; line-height: 1.4; color: var(--ink-soft); }

/* Móvil: composición simplificada (menos capas, Giralda más discreta) */
@media (max-width: 639px) {
  .hs-chip-ticket, .hs-qr, .hs-skyline, .hs-bokeh { display: none; }
  .hs-giralda { left: auto; right: -4%; height: min(46%, 26rem); opacity: .16; }
  .hs-stage { aspect-ratio: 56 / 50; }
  .hs-laptop { top: 2em; }
  .hs-phone { top: 11em; }
  .hs-nfc { top: 30em; }
  .hs-coords { bottom: 0; }
  .hs-copy::before { inset: -1.5rem -1rem; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .hs-giralda { left: 58%; opacity: .18; }
}
@media (prefers-reduced-motion: reduce) { .hs-services li, .hs-bokeh { animation: none !important; } }

/* Ajuste fino: Giralda más discreta y portada compacta para que las tarjetas se vean en pantalla */
.hs-giralda { left: 42%; height: min(72%, 38rem); opacity: .17; }
@media (min-width: 1024px) {
  .hs-wrap { padding-top: 6.5rem; padding-bottom: 2.25rem; gap: 1.75rem 3rem; }
  .hs-points { margin-top: 1.75rem; padding-top: 1.1rem; }
  .hs-title { margin-top: 1.1rem; }
  .hs-lead { margin-top: 1.1rem; }
  .hs-cta { margin-top: 1.6rem; }
}
@media (min-width: 640px) and (max-width: 1023px) { .hs-giralda { left: 60%; } }
/* ═══════════════════════════════════════════════════════════════════
   HERO v3 — la imagen de referencia como fondo de portada
   La foto va en una capa propia (img, carga prioritaria) y un degradado
   oscuro a la izquierda garantiza la legibilidad del texto.
   ═══════════════════════════════════════════════════════════════════ */

.hs-bg::before, .hs-hero::after, .hs-copy::before { display: none; }
.hs-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 40%; }
.hs-bg::after {
  inset: 0; z-index: 1; animation: none; transform: none;
  background:
    linear-gradient(90deg, rgba(8, 8, 10, .95) 0%, rgba(8, 8, 10, .84) 30%, rgba(8, 8, 10, .38) 54%, rgba(8, 8, 10, 0) 72%),
    linear-gradient(180deg, rgba(8, 8, 10, .72) 0%, rgba(8, 8, 10, 0) 20%, rgba(8, 8, 10, 0) 72%, var(--bg) 100%);
}
@media (min-width: 1024px) {
  .hs-wrap { grid-template-columns: minmax(0, 40rem); justify-content: start; padding-bottom: 4rem; }
  .hs-title { font-size: clamp(2.8rem, 4.6vw, 4.5rem); }
}

/* Tablet y móvil: texto arriba y la foto como banda inferior, sin tapar el texto */
@media (max-width: 1023px) {
  .hs-hero { --ph: clamp(16rem, 82vw, 34rem); padding-bottom: var(--ph); }
  .hs-wrap { padding-bottom: 2.5rem; }
  .hs-photo {
    inset: auto 0 0 0; height: var(--ph); object-position: 72% 50%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
  }
  .hs-bg::after { background: linear-gradient(180deg, rgba(8, 8, 10, 0) 78%, var(--bg) 100%); }
}

/* Ajuste: el bloque de texto no invade el portátil de la foto */
@media (min-width: 1024px) {
  .hs-wrap { grid-template-columns: minmax(0, min(34rem, 46vw)); }
  .hs-photo { transform-origin: 0% 40%; scale: 1.08; }
  .hs-bg::after {
    background:
      linear-gradient(90deg, rgba(8, 8, 10, .95) 0%, rgba(8, 8, 10, .86) 28%, rgba(8, 8, 10, .4) 46%, rgba(8, 8, 10, 0) 60%),
      linear-gradient(180deg, rgba(8, 8, 10, .72) 0%, rgba(8, 8, 10, 0) 20%, rgba(8, 8, 10, 0) 72%, var(--bg) 100%);
  }
}
/* Móvil: portada más limpia; la foto sube a la primera pantalla (los 3 puntos siguen en «Por qué elegirnos») */
@media (max-width: 639px) {
  .hs-points { display: none; }
  .hs-wrap { padding-bottom: 1.5rem; }
  .hs-hero { --ph: clamp(16rem, 88vw, 26rem); }
}