/* ==========================================================================
   JB Innovation — sitio de la fábrica
   Sin recursos externos: ni tipografías de Google ni CDNs. Todo sale de este
   dominio, que es lo que promete el aviso de privacidad.
   ========================================================================== */

:root {
  /* Color */
  --noche: #040a08;
  --noche-2: #09140f;
  --noche-3: #0f2219;
  --vidrio: rgba(130, 200, 165, 0.06);
  --vidrio-fuerte: rgba(130, 200, 165, 0.1);
  --borde: rgba(140, 200, 170, 0.16);
  --borde-fuerte: rgba(140, 200, 170, 0.3);
  --texto: #ecf5ef;
  --tenue: #a3b8ad;
  --apagado: #6b8077;
  --esmeralda: #4be3a0;
  --jade: #129b78;
  --lima: #c6f36b;
  --verde: #7dffb8;
  --ambar: #ffc75c;
  --aurora: linear-gradient(100deg, var(--lima) 0%, var(--esmeralda) 50%, var(--jade) 100%);

  /* Tipografía: sólo del sistema operativo. Títulos en serif de alto contraste
     (Sitka en Windows, Iowan Old Style en Apple); el resto en la sans del sistema. */
  --f-titulo: "Sitka Display", "Sitka Heading", "Iowan Old Style", "Palatino Linotype",
    "Book Antiqua", Palatino, Georgia, serif;
  --f-texto: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --f-codigo: "Cascadia Code", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Movimiento */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Medidas */
  --ancho: 1180px;
  --canal: clamp(16px, 4vw, 40px);
  --radio-s: 10px;
  --radio-m: 18px;
  --radio-l: 28px;

  color-scheme: dark;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--noche);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--f-titulo); font-weight: 700; letter-spacing: -0.025em; }

:focus-visible { outline: 2px solid var(--esmeralda); outline-offset: 3px; border-radius: 6px; }

.saltar {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--esmeralda); color: var(--noche); padding: 10px 16px; border-radius: 10px;
  font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 16px; }

.env { width: min(var(--ancho), 100% - 2 * var(--canal)); margin-inline: auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Fondo: ruido y resplandores fijos. Decoración pura, nunca encima del texto.
   -------------------------------------------------------------------------- */
.fondo {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 40vmax at 85% -10%, rgba(18, 155, 120, 0.22), transparent 60%),
    radial-gradient(50vmax 40vmax at -10% 30%, rgba(75, 227, 160, 0.12), transparent 60%),
    radial-gradient(50vmax 40vmax at 60% 110%, rgba(198, 243, 107, 0.1), transparent 60%),
    var(--noche);
}
.fondo::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background-image:
    linear-gradient(rgba(140, 200, 170, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 200, 170, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
}

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.boton {
  --mx: 0px; --my: 0px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px;
  font: 600 16px/1 var(--f-texto); text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transform: translate(var(--mx), var(--my));
  transition: transform 160ms var(--ease-out), background-color 200ms ease, border-color 200ms ease,
    box-shadow 200ms ease;
}
.boton:active { transform: translate(var(--mx), var(--my)) scale(0.97); }
.boton svg { width: 20px; height: 20px; flex: 0 0 auto; }

.boton-primario {
  color: #04100a; background: var(--aurora); background-size: 160% 100%;
  box-shadow: 0 10px 40px -10px rgba(18, 155, 120, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.boton-secundario {
  color: var(--texto); background: var(--vidrio); border-color: var(--borde-fuerte);
  backdrop-filter: blur(10px);
}
@media (hover: hover) and (pointer: fine) {
  .boton-primario:hover { box-shadow: 0 14px 50px -8px rgba(18, 155, 120, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
  .boton-secundario:hover { background: var(--vidrio-fuerte); border-color: var(--esmeralda); }
}

/* --------------------------------------------------------------------------
   Encabezado
   -------------------------------------------------------------------------- */
.encabezado {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background-color 250ms ease, border-color 250ms ease, backdrop-filter 250ms ease;
  border-bottom: 1px solid transparent;
}
.encabezado.con-fondo {
  background: rgba(4, 10, 8, 0.72); border-bottom-color: var(--borde);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.encabezado .env { display: flex; align-items: center; gap: 24px; height: 72px; }

.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.marca-sello {
  position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: var(--noche-3); border: 1px solid var(--borde-fuerte); overflow: hidden;
  font: 700 15px/1 var(--f-titulo); letter-spacing: 0.02em;
}
.marca-sello::before {
  content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, var(--esmeralda), var(--jade), var(--lima), var(--esmeralda));
  animation: girar 6s linear infinite; opacity: 0.85;
}
.marca-sello::after { content: ""; position: absolute; inset: 2px; border-radius: 9px; background: var(--noche-2); }
.marca-sello span { position: relative; z-index: 1; }
.marca-nombre { font: 600 19px/1 var(--f-titulo); letter-spacing: 0.01em; }

.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  padding: 8px 14px; border-radius: 999px; color: var(--tenue); text-decoration: none; font-size: 15px;
  transition: color 200ms ease, background-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--texto); background: var(--vidrio); } }
.encabezado .boton { min-height: 42px; padding: 0 18px; font-size: 15px; }

@media (max-width: 880px) {
  .nav { display: none; }
  .encabezado .boton { margin-left: auto; }
}
@media (max-width: 420px) {
  .marca-nombre { display: none; }
}

@keyframes girar { to { transform: rotate(1turn); } }

/* --------------------------------------------------------------------------
   Portada
   -------------------------------------------------------------------------- */
.portada {
  position: relative; isolation: isolate; padding: 128px 0 40px; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; gap: 56px; overflow: hidden;
}

/* La foto de fondo: entra con un acercamiento lento y se desplaza más
   despacio que la página al bajar (paralaje, lo pone app.js en --py). */
.portada-foto { position: absolute; inset: 0; z-index: -2; transform: translate3d(0, var(--py, 0px), 0); }
.portada-foto picture, .portada-foto img { display: block; width: 100%; height: 100%; }
.portada-foto img { object-fit: cover; object-position: 70% 50%; }
.js .portada-foto img { animation: acercar 2400ms var(--ease-out) both; }
@keyframes acercar { from { transform: scale(1.08); opacity: 0; } to { transform: none; opacity: 1; } }
.portada-foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 10, 8, 0.96) 0%, rgba(4, 10, 8, 0.82) 34%, rgba(4, 10, 8, 0.28) 62%, rgba(4, 10, 8, 0.1) 100%),
    linear-gradient(180deg, rgba(4, 10, 8, 0.55) 0%, transparent 22%, transparent 70%, var(--noche) 100%);
}
@media (max-width: 960px) {
  .portada-foto img { object-position: 78% 50%; }
  .portada-foto::after {
    background: linear-gradient(180deg, rgba(4, 10, 8, 0.9) 0%, rgba(4, 10, 8, 0.78) 45%, rgba(4, 10, 8, 0.6) 70%, var(--noche) 100%);
  }
}
.portada-campo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; opacity: 0.55; mix-blend-mode: screen; mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 75%); }

/* Tira inferior de la portada, como en una ficha de producto */
.portada .portada-tira {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: stretch; border-radius: var(--radio-m);
  background: rgba(7, 16, 12, 0.45); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
}
.tira-item {
  display: flex; align-items: center; gap: 14px; padding: 18px 22px; text-decoration: none;
  transition: background-color 200ms ease;
}
.tira-item + .tira-item { border-left: 1px solid rgba(255, 255, 255, 0.1); }
.tira-item svg { width: 26px; height: 26px; color: var(--esmeralda); flex: 0 0 auto; }
.tira-item b { display: block; font-weight: 600; font-size: 16px; line-height: 1.2; }
.tira-item small { color: var(--tenue); font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .tira-item:hover { background: rgba(255, 255, 255, 0.04); } }
@media (max-width: 760px) {
  .portada .portada-tira { grid-template-columns: 1fr; }
  .tira-item + .tira-item { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
}

.portada .env {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 960px) { .portada .env { grid-template-columns: 1fr; } }

.estado-fabrica {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 28px;
  padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--vidrio); color: var(--tenue); font-size: 14px;
}
.estado-fabrica i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--verde);
  box-shadow: 0 0 0 0 rgba(125, 255, 184, 0.6); animation: latido 2.4s var(--ease-out) infinite;
}
@keyframes latido {
  0% { box-shadow: 0 0 0 0 rgba(125, 255, 184, 0.55); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(125, 255, 184, 0); }
}

.titulo-portada {
  font-size: clamp(46px, 6vw, 88px); line-height: 0.98; letter-spacing: -0.045em; font-weight: 700; text-wrap: balance;
}
.titulo-portada .linea { display: block; overflow: hidden; padding-bottom: 0.2em; margin-bottom: -0.2em; }
.titulo-portada .linea > span { display: inline-block; }
.titulo-portada .brillo {
  background: var(--aurora); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: 0.14em; margin-bottom: -0.14em; /* el degradé tiene que cubrir la cola de la "g" */
  animation: brillo 8s ease-in-out infinite alternate;
}
@keyframes brillo { to { background-position: 100% 0; } }

.bajada { margin-top: 28px; max-width: 54ch; color: var(--tenue); font-size: clamp(17px, 1.6vw, 20px); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* Entrada orquestada de la portada (una sola vez, al cargar) */
.js .portada [data-entra] {
  opacity: 0; transform: translateY(24px); filter: blur(6px);
  animation: entrar 900ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}
.js .titulo-portada .linea > span {
  transform: translateY(105%);
  animation: subir 1000ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 110ms + 80ms);
}
@keyframes entrar { to { opacity: 1; transform: none; filter: none; } }
@keyframes subir { to { transform: none; } }

/* --------------------------------------------------------------------------
   Escena viva de la portada: agenda → WhatsApp → confirmado.
   Coordenadas internas fijas (520 × 560) escaladas con unidades de contenedor.
   -------------------------------------------------------------------------- */
.escena-marco { container-type: inline-size; width: 100%; max-width: 560px; margin-inline: auto; perspective: 1400px; }
.escena {
  --rx: 0deg; --ry: 0deg;
  position: relative; aspect-ratio: 520 / 560;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform 600ms var(--ease-out);
}
.escena > * { position: absolute; }
.escena-cables { inset: 0; width: 100%; height: 100%; overflow: visible; }
.cable { fill: none; stroke: var(--borde-fuerte); stroke-width: 1.5; stroke-dasharray: 3 5; }
.pulso {
  fill: none; stroke: url(#grad-pulso); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 14 86; stroke-dashoffset: 14; opacity: 0;
  filter: drop-shadow(0 0 6px var(--esmeralda));
}

.tarjeta-agenda {
  left: 0; top: 22%; width: 58%; padding: 4.2cqw; border-radius: 4cqw;
  background: rgba(7, 16, 12, 0.55); border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateZ(40px);
}
.agenda-cabeza { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 3cqw; }
.agenda-cabeza b { font: 600 3.6cqw/1.1 var(--f-titulo); }
.agenda-cabeza span { color: var(--apagado); font-size: 2.5cqw; }
.franja { display: grid; grid-template-columns: 9cqw 1fr; gap: 2cqw; align-items: center; margin-top: 1.8cqw; }
.franja time { color: var(--apagado); font: 2.4cqw/1 var(--f-codigo); }
.bloque {
  position: relative; padding: 2cqw 2.4cqw; border-radius: 2cqw; font-size: 2.6cqw; line-height: 1.25;
  background: var(--vidrio-fuerte); border-left: 0.8cqw solid var(--apagado);
}
.bloque small { display: block; color: var(--tenue); font-size: 2.2cqw; }
.bloque.vacio { background: transparent; border: 1px dashed var(--borde); border-left-width: 1px; height: 6.4cqw; }
.bloque.otro { border-left-color: var(--jade); }
.bloque.foco { border-left-color: var(--ambar); transition: border-color 400ms ease, background-color 400ms ease, box-shadow 400ms ease; }
.bloque.foco .etiqueta-estado {
  position: absolute; right: 1.6cqw; top: 50%; translate: 0 -50%;
  padding: 0.6cqw 1.6cqw; border-radius: 999px; font-size: 2cqw; font-weight: 600;
  background: rgba(255, 199, 92, 0.16); color: var(--ambar);
  transition: background-color 300ms ease, color 300ms ease;
}

/* La conversación de WhatsApp: una tarjeta de vidrio, no un teléfono dibujado
   (el teléfono ya está en la foto). */
.telefono {
  right: 0; top: 0; width: 58%; padding: 0; border-radius: 4.4cqw; overflow: hidden;
  background: rgba(5, 12, 9, 0.62); border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateZ(80px);
}
.pantalla { position: relative; display: flex; flex-direction: column; }
.pantalla-cabeza { display: flex; align-items: center; gap: 2cqw; padding: 2.6cqw 3cqw; background: rgba(31, 44, 52, 0.7); }
.telefono .chat { background: transparent; padding: 3cqw; }
.avatar { width: 6cqw; height: 6cqw; border-radius: 50%; background: var(--aurora); display: grid; place-items: center; font: 700 2.4cqw/1 var(--f-titulo); color: #04100a; }
.pantalla-cabeza b { display: block; font-size: 2.6cqw; line-height: 1.2; }
.pantalla-cabeza small { color: #8ba0ac; font-size: 2cqw; }
.chat { flex: 1; display: flex; flex-direction: column; gap: 1.8cqw; padding: 3cqw 2.4cqw; justify-content: flex-end;
  background: radial-gradient(circle at 30% 20%, rgba(75, 227, 160, 0.05), transparent 60%), #0b141a; }
.globo {
  max-width: 88%; padding: 2cqw 2.4cqw; border-radius: 2.4cqw; font-size: 2.4cqw; line-height: 1.35; color: #e9edef;
  opacity: 0; transform: translateY(2cqw) scale(0.96); transform-origin: bottom left;
  transition: opacity 350ms var(--ease-out), transform 450ms var(--ease-out);
}
.globo.recibido { background: #202c33; border-top-left-radius: 0.6cqw; align-self: flex-start; }
.globo.enviado { background: #005c4b; border-top-right-radius: 0.6cqw; align-self: flex-end; transform-origin: bottom right; }
.globo .hora { display: block; text-align: right; color: rgba(233, 237, 239, 0.55); font-size: 1.8cqw; margin-top: 0.6cqw; }
.botones-plantilla { display: grid; gap: 1cqw; margin-top: 1.4cqw; }
.botones-plantilla span {
  display: block; text-align: center; padding: 1.4cqw; border-radius: 1.6cqw; background: rgba(255, 255, 255, 0.06);
  color: #4be3a0; font-weight: 600; font-size: 2.2cqw; transition: background-color 200ms ease, transform 160ms var(--ease-out);
}
.escribiendo { display: flex; gap: 0.8cqw; padding: 2.2cqw 2.6cqw; align-self: flex-start; border-radius: 2.4cqw; background: #202c33; opacity: 0; transition: opacity 200ms ease; }
.escribiendo i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #8696a0; animation: punto 1.2s ease-in-out infinite; }
.escribiendo i:nth-child(2) { animation-delay: 0.15s; }
.escribiendo i:nth-child(3) { animation-delay: 0.3s; }
@keyframes punto { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-0.8cqw); opacity: 1; } }

.ficha-flotante {
  display: flex; align-items: center; gap: 2cqw; padding: 2.2cqw 3cqw; border-radius: 3cqw;
  background: rgba(7, 16, 12, 0.6); border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  font-size: 2.6cqw; box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.6);
  opacity: 0; transform: translateY(2cqw) translateZ(60px) scale(0.96);
  transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out);
}
.ficha-flotante b { display: block; font-weight: 600; }
.ficha-flotante small { color: var(--tenue); font-size: 2.2cqw; }
.ficha-flotante .icono { width: 6cqw; height: 6cqw; border-radius: 1.8cqw; display: grid; place-items: center; flex: 0 0 auto; }
.ficha-flotante .icono svg { width: 3.4cqw; height: 3.4cqw; }
.ficha-envio { left: 0; top: 2%; }
.ficha-respuesta { left: 4%; top: 68%; }
.ficha-respuesta .icono { background: rgba(37, 211, 102, 0.16); color: #1fa855; }
.ficha-envio .icono { background: rgba(75, 227, 160, 0.14); color: var(--esmeralda); }
.ficha-ok { left: 22%; top: 84%; }
.ficha-ok .icono { background: rgba(125, 255, 184, 0.14); color: var(--verde); }

.escena-pie { margin-top: 18px; text-align: center; color: var(--tenue); font-size: 14px; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }

/* Pasos de la escena (los pone app.js en data-paso) */
.escena[data-paso="1"] .pulso.ida,
.escena[data-paso="5"] .pulso.vuelta { animation: viajar 1100ms var(--ease-in-out) forwards; }
@keyframes viajar { 0% { stroke-dashoffset: 14; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: -86; opacity: 0; } }

.escena[data-paso="2"] .escribiendo { opacity: 1; }
.escena:is([data-paso="3"], [data-paso="4"], [data-paso="5"], [data-paso="6"]) .globo.recibido,
.escena:is([data-paso="2"], [data-paso="3"], [data-paso="4"], [data-paso="5"], [data-paso="6"]) .ficha-envio,
.escena:is([data-paso="4"], [data-paso="5"], [data-paso="6"]) .globo.enviado,
.escena[data-paso="6"] .ficha-ok, .escena:is([data-paso="4"], [data-paso="5"], [data-paso="6"]) .ficha-respuesta { opacity: 1; transform: none; }
.escena:is([data-paso="2"], [data-paso="3"], [data-paso="4"], [data-paso="5"], [data-paso="6"]) .ficha-envio,
.escena[data-paso="6"] .ficha-ok, .escena:is([data-paso="4"], [data-paso="5"], [data-paso="6"]) .ficha-respuesta { transform: translateZ(60px); }
.escena[data-paso="4"] .botones-plantilla span:first-child { background: rgba(75, 227, 160, 0.22); transform: scale(0.97); }
.escena[data-paso="6"] .bloque.foco { border-left-color: var(--verde); background: rgba(125, 255, 184, 0.08); box-shadow: 0 0 0 1px rgba(125, 255, 184, 0.35), 0 0 30px -6px rgba(125, 255, 184, 0.5); }
.escena[data-paso="6"] .bloque.foco .etiqueta-estado { background: rgba(125, 255, 184, 0.16); color: var(--verde); }

/* --------------------------------------------------------------------------
   Secciones
   -------------------------------------------------------------------------- */
.seccion { position: relative; isolation: isolate; padding: clamp(56px, 7vw, 96px) 0; }
/* Cada sección tiene su propio fondo: un resplandor detrás del título */
.seccion::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 55% at 8% 0%, rgba(75, 227, 160, 0.1), transparent 70%),
    radial-gradient(40% 50% at 100% 100%, rgba(198, 243, 107, 0.05), transparent 70%);
}
/* Banda: fondo más oscuro con trama de puntos */
.seccion.banda { background: linear-gradient(180deg, #071410 0%, #040c09 100%); border-block: 1px solid var(--borde); }
.seccion.banda::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(140, 200, 170, 0.14) 1px, transparent 1.2px); background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 80%);
}
/* Con foto: la imagen va oscurecida detrás de todo el bloque */
.seccion.con-foto { background: var(--noche); }
.seccion.con-foto::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: url("img/portada.webp") center / cover no-repeat; opacity: 0.35;
  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
}
.seccion.con-foto::before { background: linear-gradient(90deg, rgba(4, 10, 8, 0.92) 0%, rgba(4, 10, 8, 0.7) 60%, rgba(4, 10, 8, 0.5) 100%); }
.cabeza-seccion { max-width: 760px; margin-bottom: clamp(26px, 3.5vw, 44px); }
.cabeza-seccion h2 { font-size: clamp(36px, 5vw, 62px); line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.cabeza-seccion p { margin-top: 20px; color: var(--tenue); font-size: clamp(17px, 1.5vw, 19px); max-width: 60ch; }

/* Revelado al hacer scroll: una sola vez por elemento */
.js .revelar { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js .revelar.visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Cinta de rubros
   -------------------------------------------------------------------------- */
.cinta { border-block: 1px solid var(--borde); background: rgba(9, 20, 15, 0.5); overflow: hidden; padding: 22px 0; }
.cinta-pista { display: flex; width: max-content; gap: 56px; animation: cinta 40s linear infinite; }
.cinta-pista span { display: inline-flex; align-items: center; gap: 56px; font: 500 clamp(20px, 2.4vw, 28px)/1 var(--f-titulo); color: var(--tenue); white-space: nowrap; }
.cinta-pista span::after { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--aurora); transform: rotate(45deg); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Qué fabricamos: grilla de piezas de distinto tamaño
   -------------------------------------------------------------------------- */
.piezas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.pieza {
  --x: 50%; --y: 50%;
  position: relative; grid-column: span 2; padding: 28px; border-radius: var(--radio-l); overflow: hidden;
  background: linear-gradient(180deg, rgba(14, 30, 22, 0.7), rgba(7, 16, 12, 0.7));
  border: 1px solid var(--borde); isolation: isolate;
  display: flex; flex-direction: column; min-height: 320px;
}
.pieza::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 300ms ease;
  background: radial-gradient(400px circle at var(--x) var(--y), rgba(75, 227, 160, 0.12), transparent 50%);
}
@media (hover: hover) and (pointer: fine) { .pieza:hover::before { opacity: 1; } .pieza:hover { border-color: var(--borde-fuerte); } }
.pieza.ancha { grid-column: span 4; }
.pieza.media { grid-column: span 3; }
.pieza h3 { font-size: 26px; line-height: 1.1; margin-top: auto; padding-top: 24px; }
.pieza p { margin-top: 10px; color: var(--tenue); font-size: 16px; max-width: 48ch; }
.demo-pieza { position: relative; height: 150px; border-radius: var(--radio-m); background: rgba(3, 8, 6, 0.6); border: 1px solid var(--borde); overflow: hidden; }

@media (max-width: 960px) {
  .piezas { grid-template-columns: repeat(2, 1fr); }
  .pieza, .pieza.media { grid-column: span 1; }
  .pieza.ancha { grid-column: span 2; }
}
@media (max-width: 640px) {
  .piezas { grid-template-columns: 1fr; }
  .pieza, .pieza.media, .pieza.ancha { grid-column: span 1; min-height: 0; }
}

/* Las animaciones de cada pieza sólo corren cuando se ve (.visible) */
.demo-pieza * { animation-play-state: paused !important; }
.visible .demo-pieza * { animation-play-state: running !important; }

/* Web: un navegador que se arma solo */
.dp-web { padding: 14px; display: grid; grid-template-rows: auto 1fr; gap: 10px; }
.dp-web .barra { display: flex; gap: 6px; }
.dp-web .barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--borde-fuerte); }
.dp-web .barra i:nth-child(1) { background: var(--lima); }
.dp-web .barra i:nth-child(2) { background: var(--ambar); }
.dp-web .barra i:nth-child(3) { background: var(--verde); }
.dp-web .lienzo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; }
.dp-web .lienzo > div { border-radius: 8px; background: var(--vidrio-fuerte); transform-origin: left; animation: armar 5s var(--ease-out) infinite; }
.dp-web .lienzo .h { grid-column: 1 / -1; height: 18px; background: var(--aurora); opacity: 0.8; }
.dp-web .lienzo .b { height: 52px; animation-delay: 0.3s; }
.dp-web .lienzo .c { height: 52px; animation-delay: 0.5s; background: rgba(18, 155, 120, 0.25); }
.dp-web .lienzo .d { grid-column: 1 / -1; height: 10px; width: 60%; animation-delay: 0.7s; }
@keyframes armar { 0% { transform: scaleX(0.2); opacity: 0; } 18%, 82% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }

/* Sistemas: barras de un tablero */
.dp-sistema { display: flex; align-items: flex-end; gap: 8px; padding: 18px 18px 0; }
.dp-sistema i { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(var(--esmeralda), rgba(75, 227, 160, 0.1)); transform-origin: bottom; animation: barra 4s var(--ease-out) infinite; }
.dp-sistema i:nth-child(even) { background: linear-gradient(var(--jade), rgba(18, 155, 120, 0.1)); }
.dp-sistema i:nth-child(1) { height: 40%; animation-delay: 0s; }
.dp-sistema i:nth-child(2) { height: 65%; animation-delay: 0.1s; }
.dp-sistema i:nth-child(3) { height: 50%; animation-delay: 0.2s; }
.dp-sistema i:nth-child(4) { height: 85%; animation-delay: 0.3s; }
.dp-sistema i:nth-child(5) { height: 70%; animation-delay: 0.4s; }
.dp-sistema i:nth-child(6) { height: 95%; animation-delay: 0.5s; }
.dp-sistema i:nth-child(7) { height: 60%; animation-delay: 0.6s; }
@keyframes barra { 0% { transform: scaleY(0.1); } 30%, 80% { transform: none; } 100% { transform: scaleY(0.1); } }

/* Automatizaciones: nodos con un pulso que los recorre */
.dp-flujo svg { width: 100%; height: 100%; }
.dp-flujo .nodo { fill: var(--noche-3); stroke: var(--borde-fuerte); stroke-width: 1.5; }
.dp-flujo .nodo-txt { fill: var(--tenue); font: 600 11px var(--f-texto); text-anchor: middle; }
.dp-flujo .via { stroke: var(--borde-fuerte); stroke-width: 1.5; fill: none; stroke-dasharray: 3 4; }
.dp-flujo .chispa { fill: none; stroke: var(--esmeralda); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 8 92; animation: chispa 3s linear infinite; filter: drop-shadow(0 0 4px var(--esmeralda)); }
@keyframes chispa { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* WhatsApp: globos que aparecen */
.dp-chat { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 14px 18px; }
.dp-chat span { max-width: 75%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.3; animation: globo 6s var(--ease-out) infinite; opacity: 0; }
.dp-chat span:nth-child(1) { background: #202c33; align-self: flex-start; }
.dp-chat span:nth-child(2) { background: #005c4b; align-self: flex-end; animation-delay: 0.8s; }
.dp-chat span:nth-child(3) { background: #202c33; align-self: flex-start; animation-delay: 1.6s; }
@keyframes globo { 0% { opacity: 0; transform: translateY(8px) scale(0.96); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* App instalable */
.dp-app { display: grid; place-items: center; }
.dp-app .tel { width: 70px; height: 124px; border-radius: 14px; border: 1.5px solid var(--borde-fuerte); background: var(--noche-2); display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 16px 8px; align-content: start; }
.dp-app .tel i { aspect-ratio: 1; border-radius: 5px; background: var(--vidrio-fuerte); }
.dp-app .tel i.nueva { background: var(--aurora); animation: instalar 4s var(--ease-out) infinite; }
@keyframes instalar { 0% { transform: scale(0.6); opacity: 0; } 20%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }

/* Seguridad: candado con anillo que escanea */
.dp-seguro { display: grid; place-items: center; }
.dp-seguro .anillo { position: absolute; width: 110px; height: 110px; border-radius: 50%; border: 1.5px solid rgba(125, 255, 184, 0.5); animation: escanear 3s var(--ease-out) infinite; }
.dp-seguro .anillo:nth-child(2) { animation-delay: 1s; }
.dp-seguro svg { width: 48px; height: 48px; color: var(--verde); }
@keyframes escanear { from { transform: scale(0.5); opacity: 1; } to { transform: scale(1.4); opacity: 0; } }

/* Soporte: puntos de disponibilidad */
.dp-soporte { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; align-content: center; padding: 0 18px; }
.dp-soporte i { height: 34px; border-radius: 3px; background: rgba(125, 255, 184, 0.65); animation: encender 3s ease infinite; animation-delay: calc(var(--n) * 60ms); }
@keyframes encender { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* --------------------------------------------------------------------------
   Elegí tu rubro: pestañas
   -------------------------------------------------------------------------- */
.rubros { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 900px) { .rubros { grid-template-columns: 1fr; } .pestanas { position: relative; top: 0; } }

.pestanas { position: sticky; top: 96px; display: grid; gap: 6px; padding: 6px; border-radius: var(--radio-m); background: var(--vidrio); border: 1px solid var(--borde); }
.pestanas .indicador {
  position: absolute; left: 6px; right: 6px; top: 0; height: var(--h, 64px); border-radius: 12px;
  background: linear-gradient(100deg, rgba(75, 227, 160, 0.16), rgba(18, 155, 120, 0.18)); border: 1px solid var(--borde-fuerte);
  transform: translateY(var(--y, 6px)); transition: transform 280ms var(--ease-out), height 280ms var(--ease-out);
}
.pestana {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px;
  padding: 12px 16px; border: 0; border-radius: 12px; background: transparent; color: var(--tenue);
  font: 500 18px/1.2 var(--f-texto); text-align: left; cursor: pointer; transition: color 200ms ease;
}
.pestana[aria-selected="true"] { color: var(--texto); }
.pestana svg { width: 24px; height: 24px; flex: 0 0 auto; }
@media (hover: hover) and (pointer: fine) { .pestana:hover { color: var(--texto); } }

.panel-rubro { padding: clamp(24px, 3vw, 36px); border-radius: var(--radio-l); background: linear-gradient(180deg, rgba(14, 30, 22, 0.7), rgba(7, 16, 12, 0.7)); border: 1px solid var(--borde); min-height: 100%; }
.panel-rubro[hidden] { display: none; }
.panel-rubro.entrando > * { animation: panel 420ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes panel { from { opacity: 0; transform: translateY(10px); } }
.panel-rubro h3 { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; }

/* Foto del rubro con fichas de vidrio que flotan encima */
.rubro-foto {
  position: relative; margin: calc(-1 * clamp(24px, 3vw, 36px)) calc(-1 * clamp(24px, 3vw, 36px)) 28px;
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radio-l) var(--radio-l) 0 0;
}
.rubro-foto picture, .rubro-foto img { display: block; width: 100%; height: 100%; }
.rubro-foto img { object-fit: cover; transition: transform 6s var(--ease-out); }
.panel-rubro.entrando .rubro-foto img { animation: acercar-suave 1400ms var(--ease-out) both; }
@keyframes acercar-suave { from { transform: scale(1.06); } }
.rubro-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(7, 16, 12, 0.9)); pointer-events: none; }
.chip-vidrio {
  position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--texto); white-space: nowrap;
  background: rgba(7, 16, 12, 0.55); border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
  animation: flotar 5s ease-in-out infinite;
}
.chip-a { left: 18px; top: 18px; }
.chip-b { right: 18px; bottom: 18px; animation-delay: -2.5s; }
.panel-rubro.entrando .chip-vidrio { animation: chip-entra 600ms var(--ease-out) both, flotar 5s ease-in-out 600ms infinite; }
.panel-rubro.entrando .chip-b { animation-delay: 250ms, 850ms; }
@keyframes chip-entra { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
@keyframes flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.punto { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.punto.verde { background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.punto.cian { background: var(--esmeralda); box-shadow: 0 0 10px var(--esmeralda); }
.punto.ambar { background: var(--ambar); box-shadow: 0 0 10px var(--ambar); }
@media (max-width: 480px) { .chip-vidrio { font-size: 12.5px; padding: 7px 11px; } .chip-a { left: 12px; top: 12px; } .chip-b { right: 12px; bottom: 12px; } }

/* Rubros sin foto todavía: un tablero de vidrio sobre un resplandor */
.rubro-sintetico {
  display: grid; place-items: center;
  background:
    radial-gradient(60% 80% at 20% 20%, rgba(75, 227, 160, 0.28), transparent 60%),
    radial-gradient(60% 80% at 80% 80%, rgba(198, 243, 107, 0.24), transparent 60%),
    radial-gradient(70% 90% at 70% 10%, rgba(18, 155, 120, 0.35), transparent 60%),
    var(--noche-3);
}
.rubro-sintetico::after { display: none; }
.mini-panel {
  width: min(62%, 340px); padding: 18px; border-radius: 18px;
  background: rgba(7, 16, 12, 0.5); border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.mini-panel b { font: 600 15px/1 var(--f-titulo); color: var(--tenue); }
.mini-barras { display: flex; align-items: flex-end; gap: 8px; height: 90px; margin-top: 14px; }
.mini-barras i { flex: 1; height: var(--h); border-radius: 5px 5px 0 0; background: linear-gradient(var(--esmeralda), rgba(75, 227, 160, 0.15)); transform-origin: bottom; }
.panel-rubro.entrando .mini-barras i { animation: barra-entra 900ms var(--ease-out) both; }
.mini-barras i:nth-child(2n) { background: linear-gradient(var(--jade), rgba(18, 155, 120, 0.15)); }
.mini-barras i:nth-child(2) { animation-delay: 60ms !important; } .mini-barras i:nth-child(3) { animation-delay: 120ms !important; }
.mini-barras i:nth-child(4) { animation-delay: 180ms !important; } .mini-barras i:nth-child(5) { animation-delay: 240ms !important; }
.mini-barras i:nth-child(6) { animation-delay: 300ms !important; } .mini-barras i:nth-child(7) { animation-delay: 360ms !important; }
@keyframes barra-entra { from { transform: scaleY(0.1); } }
.mini-agenda { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 14px; }
.mini-agenda i { height: 36px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); border-left: 3px solid var(--apagado); }
.mini-agenda i.ok { background: rgba(125, 255, 184, 0.12); border-left-color: var(--verde); }
.panel-rubro.entrando .mini-agenda i { animation: chip-entra 500ms var(--ease-out) both; }
.panel-rubro > p { margin-top: 10px; color: var(--tenue); }
.lista-rubro { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.lista-rubro li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; background: rgba(3, 8, 6, 0.45); border: 1px solid var(--borde); }
.lista-rubro li svg { width: 22px; height: 22px; color: var(--esmeralda); margin-top: 2px; }
.lista-rubro b { display: block; font-weight: 600; }
.lista-rubro small { color: var(--tenue); font-size: 15px; }
.sello-estado { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.sello-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sello-estado.vivo { color: var(--verde); background: rgba(125, 255, 184, 0.1); }
.sello-estado.obra { color: var(--ambar); background: rgba(255, 199, 92, 0.1); }
.sello-estado.listo { color: var(--esmeralda); background: rgba(75, 227, 160, 0.1); }

/* --------------------------------------------------------------------------
   Lo que ya fabricamos
   -------------------------------------------------------------------------- */
.proyecto {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 64px); align-items: center;
  padding: clamp(24px, 4vw, 48px); border-radius: 36px; border: 1px solid var(--borde);
  background: linear-gradient(140deg, rgba(14, 30, 22, 0.75), rgba(8, 13, 38, 0.75));
  position: relative; overflow: hidden;
}
.proyecto + .proyecto { margin-top: 24px; }
.proyecto::before { content: ""; position: absolute; width: 520px; height: 520px; right: -160px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(18, 155, 120, 0.28), transparent 65%); pointer-events: none; }
.proyecto.invertido { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.proyecto.invertido .proyecto-texto { order: 2; }
.proyecto.invertido::before { left: -160px; right: auto; background: radial-gradient(circle, rgba(198, 243, 107, 0.2), transparent 65%); }
@media (max-width: 960px) {
  .proyecto, .proyecto.invertido { grid-template-columns: 1fr; }
  .proyecto.invertido .proyecto-texto { order: 0; }
}

/* Foto de ambiente detrás de cada proyecto, apenas visible */
.proyecto-foto {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.22;
  background-size: cover; background-position: center;
  mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 55%);
}
.proyecto.invertido .proyecto-foto { mask-image: linear-gradient(270deg, transparent 0%, #000 55%); -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 55%); }
.foto-clinica { background-image: url("img/clinica.webp"); }
.foto-resto { background-image: url("img/restaurante.webp"); }
.maqueta-marco { position: relative; z-index: 1; }
.proyecto-texto { position: relative; z-index: 1; }
.proyecto-texto h3 { font-size: clamp(32px, 4vw, 48px); line-height: 1; margin-top: 14px; }
.proyecto-texto > p { margin-top: 16px; color: var(--tenue); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding: 0; list-style: none; }
.chips li { padding: 7px 12px; border-radius: 999px; font-size: 14px; color: var(--texto); background: var(--vidrio); border: 1px solid var(--borde); }
.proyecto-texto .acciones { margin-top: 28px; }
.proyecto-texto .nota { margin-top: 12px; color: var(--apagado); font-size: 14px; }

.maqueta-marco { perspective: 1400px; }
.maqueta {
  --rx: 0deg; --ry: 0deg;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 600ms var(--ease-out); transform-style: preserve-3d;
}

/* Maqueta del sistema dental: ventana con agenda semanal y odontograma */
.ventana { border-radius: 18px; overflow: hidden; border: 1px solid var(--borde-fuerte); background: #07120d; box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.75); container-type: inline-size; }
.ventana-barra { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #0d1d15; border-bottom: 1px solid var(--borde); }
.ventana-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--borde-fuerte); }
.ventana-barra span { margin-left: 12px; padding: 4px 12px; border-radius: 8px; background: rgba(3, 8, 6, 0.6); color: var(--apagado); font: 12px/1.2 var(--f-codigo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ventana-cuerpo { display: grid; grid-template-columns: 18cqw 1fr; min-height: 56cqw; }
.ventana-menu { padding: 3cqw 2cqw; border-right: 1px solid var(--borde); display: grid; gap: 1.4cqw; align-content: start; }
.ventana-menu i { height: 2.6cqw; border-radius: 1cqw; background: var(--vidrio-fuerte); }
.ventana-menu i.activo { background: linear-gradient(90deg, rgba(75, 227, 160, 0.4), rgba(75, 227, 160, 0.08)); }
.ventana-menu i:nth-child(odd) { width: 80%; }
.semana { padding: 2.4cqw; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: auto repeat(8, 4.2cqw); gap: 0.8cqw; }
.semana b { font: 600 1.8cqw/1 var(--f-texto); color: var(--tenue); text-align: center; padding-bottom: 0.8cqw; }
.turno { border-radius: 1cqw; padding: 0.8cqw 1cqw; font-size: 1.5cqw; line-height: 1.2; color: var(--texto); overflow: hidden; border-left: 0.6cqw solid; }
.turno.c { background: rgba(125, 255, 184, 0.12); border-color: var(--verde); }
.turno.p { background: rgba(255, 199, 92, 0.12); border-color: var(--ambar); }
.turno.v { background: rgba(18, 155, 120, 0.15); border-color: var(--jade); }
.js .maqueta .turno { opacity: 0; transform: scale(0.94); transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: calc(var(--n, 0) * 60ms + 300ms); }
.js .visible .maqueta .turno { opacity: 1; transform: none; }

.odontograma {
  position: absolute; right: -4%; bottom: -12%; width: 46%; padding: 14px; border-radius: 16px;
  background: rgba(9, 22, 16, 0.94); border: 1px solid var(--borde-fuerte); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
  transform: translateZ(60px); backdrop-filter: blur(8px);
}
.odontograma small { display: block; color: var(--tenue); font-size: 12px; margin-bottom: 8px; }
.odontograma svg { width: 100%; height: auto; }
.diente-cara { fill: rgba(255, 255, 255, 0.06); stroke: rgba(140, 200, 170, 0.4); stroke-width: 0.8; }
.diente-cara.caries { fill: #ff5470; }
.diente-cara.arreglo { fill: var(--ambar); }
.maqueta-dental { position: relative; padding-bottom: 8%; }

/* Maqueta del sistema de restaurantes: dos teléfonos y una comanda */
.maqueta-resto { position: relative; display: flex; justify-content: flex-end; align-items: flex-end; gap: 3cqw; padding: 2% 0 4%; container-type: inline-size; }
.tel-resto { width: 33cqw; aspect-ratio: 9 / 18; border-radius: 5.2cqw; padding: 1.2cqw; background: linear-gradient(160deg, #14291f, #06100b); border: 1px solid var(--borde-fuerte); box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.7); }
.tel-resto:nth-child(2) { transform: translateY(-6cqw) translateZ(40px); }
.tel-resto .pantalla { background: #08130e; border-radius: 4.2cqw; padding: 3cqw 2.4cqw; gap: 1.8cqw; }
.tel-resto h4 { margin: 0; font: 600 2.8cqw/1.1 var(--f-titulo); }
.plato { display: grid; grid-template-columns: 8cqw 1fr; gap: 1.8cqw; align-items: center; padding: 1.4cqw; border-radius: 2cqw; background: var(--vidrio-fuerte); }
.plato i { aspect-ratio: 1; border-radius: 1.6cqw; }
.plato:nth-of-type(1) i { background: radial-gradient(circle at 35% 35%, #ffcf8a, #b4532a); }
.plato:nth-of-type(2) i { background: radial-gradient(circle at 35% 35%, #c9f29b, #3d7d3a); }
.plato:nth-of-type(3) i { background: radial-gradient(circle at 35% 35%, #ffe6a1, #c47f1a); }
.plato b { display: block; font-size: 2.1cqw; line-height: 1.2; }
.plato small { color: var(--tenue); font-size: 1.8cqw; }
.cuenta-mesa { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1cqw; padding: 1.8cqw; border-radius: 2cqw; background: rgba(3, 8, 6, 0.8); border: 1px solid var(--borde); }
.cuenta-mesa small { color: var(--tenue); font-size: 1.6cqw; display: block; }
.cuenta-mesa b { font: 600 2.4cqw/1.1 var(--f-titulo); }
.cuenta-mesa .tuyo b { color: var(--esmeralda); }
.pedir { padding: 1.6cqw; border-radius: 2cqw; text-align: center; font-weight: 600; font-size: 2cqw; color: #04100a; background: var(--aurora); }
.comanda {
  position: absolute; left: 0; top: 22%; width: 29cqw; padding: 2.4cqw; border-radius: 2.4cqw;
  background: rgba(9, 22, 16, 0.94); border: 1px solid var(--borde-fuerte); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7); transform: translateZ(80px);
}
.comanda b { display: flex; justify-content: space-between; font: 600 2.4cqw/1.2 var(--f-titulo); }
.comanda b span { color: var(--ambar); font: 500 1.8cqw/1.2 var(--f-texto); }
.comanda ul { list-style: none; margin: 1.4cqw 0 0; padding: 0; display: grid; gap: 0.8cqw; font-size: 1.9cqw; color: var(--tenue); }
.comanda .eta { margin-top: 1.4cqw; height: 0.8cqw; border-radius: 1cqw; background: var(--vidrio-fuerte); overflow: hidden; }
.comanda .eta i { display: block; height: 100%; width: 100%; background: var(--aurora); transform-origin: left; animation: eta 6s linear infinite; }
@keyframes eta { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 960px) { .comanda { left: 0; } }

/* El próximo proyecto */
.proximo {
  margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(28px, 4vw, 44px); border-radius: 36px; border: 1px dashed var(--borde-fuerte); background: var(--vidrio);
}
.proximo h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; }
.proximo p { margin-top: 8px; color: var(--tenue); max-width: 52ch; }

/* --------------------------------------------------------------------------
   Cómo trabajamos: una secuencia real, por eso lleva números
   -------------------------------------------------------------------------- */
.pasos { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; list-style: none; margin: 0; padding: 0; }
.pasos::before {
  content: ""; position: absolute; left: 28px; right: 28px; top: 28px; height: 2px; background: var(--borde);
}
.pasos::after {
  content: ""; position: absolute; left: 28px; right: 28px; top: 28px; height: 2px; background: var(--aurora);
  transform: scaleX(0); transform-origin: left; transition: transform 1600ms var(--ease-in-out) 200ms;
}
.pasos.visible::after { transform: scaleX(1); }
.paso { position: relative; padding: 0 0 24px; }
.paso h3, .paso p { position: relative; }
.paso-num {
  position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  background: var(--noche-2); border: 1px solid var(--borde-fuerte); font: 600 22px/1 var(--f-titulo);
}
.paso h3 { margin-top: 22px; font-size: 24px; line-height: 1.15; }
.paso p { margin-top: 8px; color: var(--tenue); font-size: 16px; }
@media (max-width: 900px) {
  .pasos { grid-template-columns: 1fr; gap: 28px; }
  .pasos::before, .pasos::after { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; }
  .pasos::after { transform: scaleY(0); transform-origin: top; }
  .pasos.visible::after { transform: scaleY(1); }
  .paso { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; }
  .paso h3 { margin-top: 12px; }
  .paso p { grid-column: 2; }
}

/* --------------------------------------------------------------------------
   Cómo pensamos
   -------------------------------------------------------------------------- */
.principios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; border-radius: var(--radio-l); overflow: hidden; background: var(--borde); border: 1px solid var(--borde); }
.principio { padding: clamp(24px, 3vw, 40px); background: var(--noche-2); }
.principio svg { width: 30px; height: 30px; color: var(--esmeralda); }
.principio h3 { margin-top: 18px; font-size: 24px; line-height: 1.15; }
.principio p { margin-top: 8px; color: var(--tenue); font-size: 16px; }
@media (max-width: 760px) { .principios { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Preguntas
   -------------------------------------------------------------------------- */
.preguntas { max-width: 860px; display: grid; gap: 10px; }
.pregunta { border-radius: var(--radio-m); border: 1px solid var(--borde); background: var(--vidrio); transition: border-color 200ms ease, background-color 200ms ease; }
.pregunta[open] { border-color: var(--borde-fuerte); background: var(--vidrio-fuerte); }
.pregunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; cursor: pointer; list-style: none;
  font: 600 19px/1.3 var(--f-texto);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary i { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
.pregunta summary i::before, .pregunta summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--esmeralda); border-radius: 2px; transition: transform 220ms var(--ease-out); }
.pregunta summary i::after { transform: rotate(90deg); }
.pregunta[open] summary i::after { transform: rotate(0deg); }
.pregunta div { padding: 0 24px 22px; color: var(--tenue); max-width: 68ch; }
.pregunta[open] div { animation: abrir 260ms var(--ease-out); }
@keyframes abrir { from { opacity: 0; transform: translateY(-6px); } }

/* --------------------------------------------------------------------------
   Contacto
   -------------------------------------------------------------------------- */
.contacto { text-align: center; }
.contacto-caja {
  position: relative; overflow: hidden; padding: clamp(48px, 8vw, 110px) clamp(20px, 5vw, 64px); border-radius: 44px;
  border: 1px solid var(--borde-fuerte); background: linear-gradient(160deg, rgba(16, 36, 27, 0.85), rgba(8, 13, 38, 0.9));
}
.contacto-caja::before {
  content: ""; position: absolute; inset: -50%; z-index: 0; opacity: 0.35;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, var(--esmeralda) 40deg, transparent 90deg, var(--jade) 200deg, transparent 260deg, var(--lima) 320deg, transparent 360deg);
  filter: blur(80px); animation: girar 24s linear infinite;
}
.contacto-caja::after {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0.28;
  background: url("img/clinica.webp") center 30% / cover no-repeat;
  mask-image: radial-gradient(ellipse at 50% 50%, transparent 20%, #000 90%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, transparent 20%, #000 90%);
}
.contacto-caja > * { position: relative; z-index: 1; }
.contacto h2 { font-size: clamp(38px, 6.4vw, 84px); line-height: 0.98; text-wrap: balance; max-width: 16ch; margin-inline: auto; }
.contacto p { margin: 22px auto 0; color: var(--tenue); max-width: 52ch; font-size: clamp(17px, 1.5vw, 19px); }
.contacto .acciones { justify-content: center; }
.datos-contacto { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 32px; color: var(--tenue); font-size: 15px; }
.datos-contacto a { color: var(--texto); text-decoration-color: var(--borde-fuerte); text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   Pie
   -------------------------------------------------------------------------- */
.pie { border-top: 1px solid var(--borde); padding: 48px 0 calc(40px + env(safe-area-inset-bottom, 0px)); color: var(--tenue); font-size: 15px; }
.pie .env { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.pie h4 { margin: 0 0 12px; color: var(--texto); font: 600 15px/1.2 var(--f-texto); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pie a { color: var(--tenue); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pie a:hover { color: var(--texto); } }
.pie .marca { margin-bottom: 14px; }
.pie-legal { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--borde); color: var(--apagado); font-size: 14px; }
@media (max-width: 760px) { .pie .env { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Movimiento reducido: se quedan los fundidos, se va todo desplazamiento
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-iteration-count: 1 !important; }
  .marca-sello::before, .contacto-caja::before, .cinta-pista, .titulo-portada .brillo, .estado-fabrica i,
  .demo-pieza *, .comanda .eta i { animation: none !important; }
  .js .portada [data-entra] { animation: fundido 400ms ease forwards; transform: none; filter: none; }
  .js .titulo-portada .linea > span { animation: none; transform: none; }
  .js .revelar { transform: none; transition: opacity 400ms ease; }
  .escena, .maqueta { transform: none !important; }
  .globo, .ficha-flotante { transition: opacity 300ms ease; transform: none !important; }
  .pasos::after { transition: none; }
  .boton { transform: none !important; }
  .js .portada-foto img { animation: fundido 600ms ease both; }
  .portada-foto { transform: none !important; }
  .chip-vidrio { animation: none !important; }
  .cinta-pista { flex-wrap: wrap; width: auto; justify-content: center; row-gap: 14px; }
}
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
   TEMA CLARO (fondo blanco). Se activa con data-tema="claro" en <html>.
   Las maquetas de los productos siguen oscuras: son pantallas.
   ========================================================================== */
:root[data-tema="claro"] {
  --noche: #ffffff;
  --noche-2: #ffffff;
  --noche-3: #eaf4ee;
  --vidrio: rgba(11, 80, 55, 0.04);
  --vidrio-fuerte: rgba(11, 80, 55, 0.07);
  --borde: rgba(11, 70, 48, 0.12);
  --borde-fuerte: rgba(11, 70, 48, 0.22);
  --texto: #0b1f17;
  --tenue: #4a6358;
  --apagado: #7b8f86;
  --lima: #6fb31b;
  --esmeralda: #0f9f6e;
  --jade: #0b6e52;
  --verde: #12a465;
  --ambar: #b97d00;
  --aurora: linear-gradient(100deg, #5aa514 0%, #0f9f6e 50%, #0b6e52 100%);
  color-scheme: light;
}
/* Tokens oscuros para lo que representa una pantalla */
[data-tema="claro"] :is(.ventana, .tel-resto, .comanda, .odontograma, .demo-pieza.dp-chat) {
  --texto: #ecf5ef; --tenue: #a3b8ad; --apagado: #6b8077; --borde: rgba(140, 200, 170, 0.16);
  --borde-fuerte: rgba(140, 200, 170, 0.3); --vidrio: rgba(130, 200, 165, 0.06); --vidrio-fuerte: rgba(130, 200, 165, 0.1);
  --noche-2: #09140f; --noche-3: #0f2219; --esmeralda: #4be3a0; --verde: #7dffb8; --ambar: #ffc75c;
  color: var(--texto);
}
[data-tema="claro"] .fondo {
  background:
    radial-gradient(60vmax 40vmax at 85% -10%, rgba(15, 159, 110, 0.1), transparent 60%),
    radial-gradient(50vmax 40vmax at -10% 30%, rgba(111, 179, 27, 0.08), transparent 60%),
    #ffffff;
}
[data-tema="claro"] .fondo::after { opacity: 0.8; }
[data-tema="claro"] .encabezado.con-fondo { background: rgba(255, 255, 255, 0.82); }
[data-tema="claro"] .boton-primario { color: #ffffff; box-shadow: 0 10px 30px -10px rgba(15, 159, 110, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
[data-tema="claro"] .boton-secundario { background: #ffffff; }

/* Portada: la foto se funde a blanco por la izquierda */
[data-tema="claro"] .portada-foto::after {
  background:
    linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.92) 32%, rgba(255, 255, 255, 0.25) 60%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, transparent 20%, transparent 72%, #ffffff 100%);
}
@media (max-width: 960px) {
  [data-tema="claro"] .portada-foto::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.7) 75%, #ffffff 100%); }
}
[data-tema="claro"] .portada-campo { mix-blend-mode: normal; opacity: 0.6; }
[data-tema="claro"] .escena-pie { color: #ffffff; }

/* Vidrio blanco sobre las fotos */
[data-tema="claro"] :is(.tarjeta-agenda, .telefono, .ficha-flotante, .portada .portada-tira, .chip-vidrio, .mini-panel) {
  background: rgba(255, 255, 255, 0.78); border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 50px -20px rgba(4, 30, 20, 0.45);
}
[data-tema="claro"] .pantalla-cabeza { background: rgba(240, 247, 243, 0.95); }
[data-tema="claro"] .pantalla-cabeza small { color: #667781; }
[data-tema="claro"] .globo { color: #111b21; }
[data-tema="claro"] .globo.recibido { background: #ffffff; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }
[data-tema="claro"] .globo.enviado { background: #d9fdd3; }
[data-tema="claro"] .globo .hora { color: rgba(17, 27, 33, 0.5); }
[data-tema="claro"] .botones-plantilla span { background: rgba(0, 0, 0, 0.04); color: #0f9f6e; }
[data-tema="claro"] .escena[data-paso="4"] .botones-plantilla span:first-child { background: rgba(15, 159, 110, 0.15); }
[data-tema="claro"] .escribiendo { background: #ffffff; }
[data-tema="claro"] .telefono .chat { background: rgba(239, 234, 226, 0.6); }

/* Tarjetas y paneles */
[data-tema="claro"] :is(.pieza, .panel-rubro, .proyecto) {
  background: #ffffff; box-shadow: 0 30px 60px -40px rgba(4, 40, 26, 0.35);
}
[data-tema="claro"] .demo-pieza { background: #f2f8f4; }
[data-tema="claro"] .demo-pieza.dp-chat { background: #0b141a; }
[data-tema="claro"] .lista-rubro li { background: #f5faf7; }
[data-tema="claro"] .rubro-foto::after { background: linear-gradient(180deg, transparent 55%, rgba(255, 255, 255, 0.95)); }
[data-tema="claro"] .rubro-sintetico {
  background:
    radial-gradient(60% 80% at 20% 20%, rgba(111, 179, 27, 0.22), transparent 60%),
    radial-gradient(70% 90% at 80% 80%, rgba(15, 159, 110, 0.25), transparent 60%),
    #e7f3ec;
}
[data-tema="claro"] .proyecto-foto { opacity: 0.14; }
[data-tema="claro"] .cinta { background: #f3f9f5; }
[data-tema="claro"] .cinta-pista span { color: #2f4a3f; }

/* Fondos de sección */
[data-tema="claro"] .seccion.banda { background: linear-gradient(180deg, #f3f9f5 0%, #eaf4ee 100%); }
[data-tema="claro"] .seccion.banda::after { background-image: radial-gradient(rgba(11, 80, 55, 0.14) 1px, transparent 1.2px); }
[data-tema="claro"] .seccion.con-foto::after { opacity: 0.18; }
[data-tema="claro"] .seccion.con-foto::before { background: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 60%, rgba(255, 255, 255, 0.7) 100%); }
[data-tema="claro"] .contacto-caja { background: linear-gradient(160deg, #e8f6ee 0%, #ffffff 100%); }
[data-tema="claro"] .contacto-caja::before { opacity: 0.25; }
[data-tema="claro"] .contacto-caja::after { opacity: 0.12; }
[data-tema="claro"] .principio { background: #ffffff; }

[data-tema="claro"] .dp-soporte i { background: var(--esmeralda); }
[data-tema="claro"] .dp-seguro .anillo { border-color: rgba(15, 159, 110, 0.5); }

/* Leyenda de la escena: pastilla legible sobre la foto */
.escena-pie { display: table; margin: 18px auto 0; padding: 8px 16px; border-radius: 999px; background: rgba(4, 10, 8, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
[data-tema="claro"] .escena-pie { color: var(--texto); text-shadow: none; background: rgba(255, 255, 255, 0.8); }
[data-tema="claro"] .portada-foto img { object-position: 60% 50%; }

/* ==========================================================================
   VIDRIO ESTILO iOS (tema claro): paneles esmerilados semitransparentes sobre
   manchas de luz verdes que se mueven despacio en el fondo.
   ========================================================================== */
:root[data-tema="claro"] {
  --vidrio-ios: rgba(255, 255, 255, 0.52);
  --vidrio-ios-fuerte: rgba(255, 255, 255, 0.7);
  --vidrio-ios-borde: rgba(255, 255, 255, 0.75);
  --vidrio-ios-sombra: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(11, 70, 48, 0.04),
    0 0 0 0.5px rgba(11, 70, 48, 0.08), 0 24px 60px -28px rgba(4, 40, 26, 0.28);
  --desenfoque: blur(28px) saturate(180%);
}

/* Manchas de luz del fondo */
[data-tema="claro"] .fondo { background: #f7fbf8; overflow: hidden; }
[data-tema="claro"] .fondo::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(28vmax 28vmax at 18% 22%, rgba(111, 179, 27, 0.32), transparent 70%),
    radial-gradient(32vmax 32vmax at 82% 30%, rgba(15, 159, 110, 0.3), transparent 70%),
    radial-gradient(30vmax 30vmax at 55% 85%, rgba(125, 230, 180, 0.38), transparent 70%),
    radial-gradient(22vmax 22vmax at 10% 80%, rgba(11, 110, 82, 0.18), transparent 70%);
  filter: blur(20px);
  animation: deriva 36s ease-in-out infinite alternate;
}
@keyframes deriva {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(3%, -4%, 0) rotate(8deg); }
  100% { transform: translate3d(-3%, 3%, 0) rotate(-6deg); }
}
[data-tema="claro"] .fondo::after { opacity: 0.35; }

/* Las bandas dejan ver el fondo */
[data-tema="claro"] .seccion.banda { background: rgba(255, 255, 255, 0.28); border-color: rgba(255, 255, 255, 0.6); }
[data-tema="claro"] .cinta { background: rgba(255, 255, 255, 0.45); backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque); border-color: rgba(255, 255, 255, 0.7); }

/* Menú flotante tipo píldora */
[data-tema="claro"] .encabezado { top: 12px; border-bottom: 0; background: transparent; }
[data-tema="claro"] .encabezado.con-fondo { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
[data-tema="claro"] .encabezado .env {
  height: 60px; padding: 0 8px 0 14px; border-radius: 999px;
  background: var(--vidrio-ios); border: 1px solid var(--vidrio-ios-borde); box-shadow: var(--vidrio-ios-sombra);
  backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque);
  transition: background-color 250ms ease;
}
[data-tema="claro"] .encabezado.con-fondo .env { background: rgba(255, 255, 255, 0.84); }
[data-tema="claro"] .encabezado .boton { min-height: 44px; }
[data-tema="claro"] .nav a { color: var(--texto); }

/* Paneles de vidrio */
[data-tema="claro"] :is(.pieza, .panel-rubro, .proyecto, .pestanas, .pregunta, .proximo, .principios, .contacto-caja) {
  background: var(--vidrio-ios); border: 1px solid var(--vidrio-ios-borde); box-shadow: var(--vidrio-ios-sombra);
  backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque);
}
[data-tema="claro"] .pregunta[open] { background: var(--vidrio-ios-fuerte); }
[data-tema="claro"] .proximo { border-style: solid; }
[data-tema="claro"] .principios { gap: 0; }
[data-tema="claro"] .principio { background: transparent; border: 0.5px solid rgba(11, 70, 48, 0.08); }
[data-tema="claro"] .demo-pieza { background: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.8); }
[data-tema="claro"] .demo-pieza.dp-chat { background: #0b141a; }
[data-tema="claro"] .lista-rubro li { background: rgba(255, 255, 255, 0.55); border-color: rgba(255, 255, 255, 0.85); }
[data-tema="claro"] .chips li { background: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.85); }
[data-tema="claro"] .pestanas .indicador { background: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.95); box-shadow: 0 6px 20px -8px rgba(4, 40, 26, 0.3); }
[data-tema="claro"] .paso-num { background: var(--vidrio-ios-fuerte); border-color: var(--vidrio-ios-borde); box-shadow: var(--vidrio-ios-sombra); backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque); }
[data-tema="claro"] .boton-secundario { background: var(--vidrio-ios-fuerte); border-color: var(--vidrio-ios-borde); box-shadow: var(--vidrio-ios-sombra); backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque); }
[data-tema="claro"] .estado-fabrica { background: var(--vidrio-ios-fuerte); border-color: var(--vidrio-ios-borde); backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque); }
[data-tema="claro"] .contacto-caja::after { opacity: 0.1; }
[data-tema="claro"] .rubro-foto::after { background: linear-gradient(180deg, transparent 60%, rgba(255, 255, 255, 0.55)); }
[data-tema="claro"] .proyecto-foto { opacity: 0.12; }
[data-tema="claro"] .pie { background: rgba(255, 255, 255, 0.4); backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque); }

/* Vidrio más esmerilado sobre la foto de portada, como las tarjetas de iOS */
[data-tema="claro"] :is(.tarjeta-agenda, .ficha-flotante, .portada .portada-tira, .chip-vidrio, .mini-panel) {
  background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: var(--vidrio-ios-sombra);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
}

@media (prefers-reduced-motion: reduce) { [data-tema="claro"] .fondo::before { animation: none; } }

/* ==========================================================================
   FORMATO "VENTANAS" (referencia visionOS): títulos serif, ventanas de vidrio
   con borde luminoso, menú de íconos con el activo brillando y dock inferior.
   ========================================================================== */
h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; }
.titulo-portada { font-weight: 500; letter-spacing: -0.035em; line-height: 1; font-size: clamp(48px, 6.4vw, 96px); }
.cabeza-seccion h2, .contacto h2, .proyecto-texto h3 { font-weight: 500; letter-spacing: -0.03em; }
.pieza h3, .paso h3, .principio h3, .panel-rubro h3, .proximo h3 { font-weight: 600; letter-spacing: -0.015em; }
.marca-nombre { font-family: var(--f-titulo); font-weight: 600; font-size: 21px; letter-spacing: 0.01em; }
.agenda-cabeza b { font-family: var(--f-texto); font-weight: 600; letter-spacing: 0; }

/* Menú: ícono arriba, texto abajo; el activo brilla en verde */
.nav { gap: 2px; }
.nav a { display: grid; justify-items: center; gap: 3px; padding: 7px 12px; border-radius: 16px; font-size: 12.5px; line-height: 1;
  transition: color 200ms ease, background-color 250ms ease, box-shadow 250ms ease; }
.nav a svg { width: 19px; height: 19px; }
.nav a.activo { color: var(--texto); background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.95), 0 0 24px -2px rgba(15, 159, 110, 0.55), inset 0 1px 0 #fff; }
.nav a.activo svg { color: var(--esmeralda); }
:root:not([data-tema="claro"]) .nav a.activo { background: rgba(75, 227, 160, 0.14);
  box-shadow: 0 0 0 1px rgba(75, 227, 160, 0.4), 0 0 22px -2px rgba(75, 227, 160, 0.6); }
[data-tema="claro"] .encabezado .env { height: 70px; }
@media (max-width: 1060px) { .nav a { padding: 7px 8px; } }

/* Ventanas: degradé de vidrio, borde luminoso y reflejo arriba a la izquierda */
[data-tema="claro"] :is(.pieza, .panel-rubro, .proyecto, .pestanas, .proximo, .principios, .contacto-caja, .tarjeta-agenda, .ficha-flotante, .chip-vidrio, .mini-panel, .tira-item) {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.5) 55%, rgba(255, 255, 255, 0.64) 100%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 1px 0 #ffffff, inset 1px 0 0 rgba(255, 255, 255, 0.6), 0 0 0 0.5px rgba(11, 70, 48, 0.1),
    0 30px 70px -34px rgba(4, 40, 26, 0.38);
  backdrop-filter: blur(30px) saturate(190%); -webkit-backdrop-filter: blur(30px) saturate(190%);
}
.pieza, .panel-rubro, .proyecto, .contacto-caja { border-radius: 32px; }
.tarjeta-agenda { border-radius: 5cqw; }

/* Dock de la portada: fichas sueltas; la última brilla */
.portada .portada-tira { grid-template-columns: repeat(3, 1fr) 1.15fr; gap: 12px; background: none; border: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; }
.tira-item { border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(7, 16, 12, 0.5);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.portada .tira-item + .tira-item { border: 1px solid rgba(255, 255, 255, 0.14); }
[data-tema="claro"] .portada .tira-item + .tira-item { border: 1px solid rgba(255, 255, 255, 0.95); }
.tira-brilla { justify-content: space-between; color: #fff; }
.tira-brilla small { color: rgba(255, 255, 255, 0.88) !important; }
.tira-brilla svg { color: #fff !important; }
.portada .tira-item.tira-brilla, [data-tema="claro"] .portada .tira-item.tira-brilla {
  background: linear-gradient(135deg, #5aa514 0%, #0f9f6e 55%, #0b6e52 100%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(15, 159, 110, 0.35), 0 0 40px -6px rgba(15, 159, 110, 0.75);
}
@media (hover: hover) and (pointer: fine) {
  .portada .tira-item.tira-brilla:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(15, 159, 110, 0.45), 0 0 56px -4px rgba(15, 159, 110, 0.9); }
}
@media (max-width: 960px) { .portada .portada-tira { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .portada .portada-tira { grid-template-columns: 1fr; } }
[data-tema="claro"] .portada .portada-tira { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.escena-pie { display: block; width: fit-content; max-width: 100%; text-align: center; }

/* ==========================================================================
   CAPTURAS REALES del sistema, en ventanas de vidrio.
   Van sólo en «Lo que ya salió de la fábrica»: ahí lo que se muestra es el
   producto andando, no una ilustración. Las fotos de ambiente se quedan en la
   portada y en los rubros (decisión del dueño, 12/11/2026).
   ========================================================================== */
.ventana-real {
  border-radius: 16px; overflow: hidden;
  background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 1px 0 #ffffff, 0 0 0 0.5px rgba(11, 70, 48, 0.12), 0 40px 80px -30px rgba(4, 40, 26, 0.5);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
:root:not([data-tema="claro"]) .ventana-real {
  background: rgba(9, 20, 15, 0.6); border-color: var(--borde-fuerte);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7);
}
.ventana-real .ventana-barra {
  display: flex; align-items: center; gap: 6px; padding: 9px 13px;
  background: rgba(255, 255, 255, 0.55); border-bottom: 1px solid rgba(11, 70, 48, 0.08);
}
:root:not([data-tema="claro"]) .ventana-real .ventana-barra { background: rgba(13, 29, 21, 0.8); border-bottom-color: var(--borde); }
.ventana-real .ventana-barra i { width: 9px; height: 9px; border-radius: 50%; background: rgba(11, 70, 48, 0.18); }
.ventana-real .ventana-barra span {
  margin-left: 10px; padding: 3px 11px; border-radius: 7px; background: rgba(11, 70, 48, 0.06);
  color: var(--apagado); font: 11.5px/1.4 var(--f-codigo);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ventana-real img { display: block; width: 100%; height: auto; }

/* Las dos capturas, una encima de la otra */
.capturas { position: relative; padding-bottom: 13%; }
.capturas .ventana-encima { position: absolute; right: -5%; bottom: 0; width: 62%; transform: translateZ(60px); }
@media (max-width: 640px) {
  .capturas { padding-bottom: 0; }
  .capturas .ventana-encima { position: static; width: 100%; margin-top: 14px; }
}

/* ==========================================================================
   Aire justo: las secciones respiran sin dejar pantallas en blanco, y la
   columna de las pestañas se completa con la invitación a preguntar.
   ========================================================================== */
.rubros { align-items: stretch; }
.columna-rubros { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 96px; }
.pestanas { position: static; top: auto; }
.tarjeta-aparte { padding: 22px 24px; border-radius: var(--radio-m); border: 1px solid var(--borde); background: var(--vidrio); }
[data-tema="claro"] .tarjeta-aparte {
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.5) 100%);
  border-color: rgba(255, 255, 255, 0.95); box-shadow: var(--vidrio-ios-sombra);
  backdrop-filter: var(--desenfoque); -webkit-backdrop-filter: var(--desenfoque);
}
.tarjeta-aparte b { display: block; font: 600 17px/1.25 var(--f-texto); }
.tarjeta-aparte p { margin-top: 6px; color: var(--tenue); font-size: 15px; }
.tarjeta-aparte .boton { margin-top: 16px; width: 100%; min-height: 46px; font-size: 15px; }
@media (max-width: 900px) { .columna-rubros { position: static; } }

/* ==========================================================================
   El encabezado no estorba: es una píldora del ancho de su contenido y se va
   al bajar, vuelve al subir. Antes ocupaba todo el ancho y tapaba la portada.
   ========================================================================== */
.encabezado .env { width: fit-content; max-width: calc(100% - 2 * var(--canal)); gap: 32px; }
.encabezado { transition: transform 420ms var(--ease-out), opacity 300ms ease; }
.encabezado.oculto { transform: translateY(calc(-100% - 20px)); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .encabezado { transition: opacity 200ms ease; } .encabezado.oculto { transform: none; } }
@media (max-width: 880px) { .encabezado .env { gap: 16px; } }

/* La última pieza ocupa la fila entera: antes dejaba dos columnas en blanco */
.pieza.completa { grid-column: span 6; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; min-height: 0; }
.pieza.completa .demo-pieza { height: 100%; min-height: 160px; }
.pieza.completa .bloque-texto { display: flex; flex-direction: column; justify-content: center; }
.pieza.completa h3 { margin-top: 0; padding-top: 0; }
@media (max-width: 960px) { .pieza.completa { grid-column: span 2; grid-template-columns: 1fr; } }
@media (max-width: 640px) { .pieza.completa { grid-column: span 1; } }

/* ==========================================================================
   Tarjetas sin aire muerto: el dibujo estira para ocupar lo que sobra en vez
   de dejar un vacío arriba del título, y los íconos se ven de lejos.
   ========================================================================== */
.pieza { min-height: 300px; }
.pieza .demo-pieza { flex: 1 1 auto; height: auto; min-height: 148px; }
.pieza h3 { margin-top: 20px; padding-top: 0; }
.pieza.completa .demo-pieza { min-height: 170px; }
.dp-seguro svg { width: 68px; height: 68px; }
.dp-seguro .anillo { width: 150px; height: 150px; }
.dp-app .tel { width: 92px; height: 164px; border-radius: 18px; padding: 20px 10px; gap: 8px; }
.dp-app .tel i { border-radius: 6px; }
.dp-web { padding: 18px; }
.dp-sistema { padding: 24px 24px 0; }
.dp-chat { padding: 20px 24px; }
.dp-chat span { font-size: 14px; padding: 10px 14px; }
.dp-soporte i { height: 46px; }
.dp-flujo { display: grid; place-items: center; }
.dp-flujo svg { max-height: 150px; }

/* ==========================================================================
   PORTADA A PANTALLA COMPLETA, al estilo de la referencia que eligió el dueño:
   la foto es una lámina redondeada que ocupa toda la pantalla, el encabezado
   es una barra blanca apoyada arriba, y del lado del texto baja una sombra
   para que se lea sin tapar la imagen.
   ========================================================================== */

/* El encabezado deja de flotar en el medio: es una barra al tope */
[data-tema="claro"] .encabezado { top: 0; }
[data-tema="claro"] .encabezado .env {
  width: min(var(--ancho), 100% - 2 * var(--canal)); max-width: none;
  height: 72px; padding: 0 10px 0 18px;
  border-radius: 0 0 26px 26px; border-top: 0;
  background: #ffffff; box-shadow: 0 10px 30px -18px rgba(4, 40, 26, 0.3);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
[data-tema="claro"] .encabezado::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 50%;
  background: #ffffff; z-index: -1;
}
[data-tema="claro"] .encabezado.con-fondo .env { background: #ffffff; }

/* La lámina de la portada */
.portada { padding: 0; min-height: auto; display: block; overflow: visible; }
.portada-lamina {
  position: relative; isolation: isolate;
  margin: 0 var(--canal) 0; border-radius: 32px; overflow: hidden;
  min-height: min(780px, calc(100svh - 24px));
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(92px, 11vw, 132px) 0 clamp(20px, 3vw, 32px);
}
.portada-foto, .portada-luz { position: absolute; inset: 0; z-index: -2; }
.portada-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }

/* La sombra del lado del texto: fuerte a la izquierda, nula a la derecha */
.portada-foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(246, 251, 248, 0.97) 0%, rgba(246, 251, 248, 0.9) 26%, rgba(246, 251, 248, 0.55) 46%, rgba(246, 251, 248, 0.12) 64%, rgba(246, 251, 248, 0) 80%),
    linear-gradient(180deg, rgba(246, 251, 248, 0.8) 0%, rgba(246, 251, 248, 0) 24%),
    linear-gradient(0deg, rgba(246, 251, 248, 0.75) 0%, rgba(246, 251, 248, 0) 26%);
}
:root:not([data-tema="claro"]) .portada-foto::after {
  background:
    linear-gradient(90deg, rgba(4, 10, 8, 0.97) 0%, rgba(4, 10, 8, 0.88) 26%, rgba(4, 10, 8, 0.5) 48%, rgba(4, 10, 8, 0.1) 66%, rgba(4, 10, 8, 0) 82%),
    linear-gradient(180deg, rgba(4, 10, 8, 0.7) 0%, rgba(4, 10, 8, 0) 24%),
    linear-gradient(0deg, rgba(4, 10, 8, 0.8) 0%, rgba(4, 10, 8, 0) 26%);
}
.portada-campo { z-index: -1; opacity: 0.4; }

.portada .env { align-items: center; }
.prueba { margin-top: 18px; color: var(--tenue); font-size: 15px; }

/* La escena deja de ser un collage absoluto: columna, sin pisarse nunca */
.escena-marco { max-width: 440px; margin-left: auto; perspective: none; }
.escena {
  position: static; aspect-ratio: auto; transform: none !important;
  display: flex; flex-direction: column; align-items: stretch; gap: 12px;
}
.escena > * { position: static; }
.escena .ficha-flotante {
  max-width: none; width: auto; left: auto; right: auto; top: auto; bottom: auto;
  transform: translateY(10px) scale(0.98);
}
.escena:is([data-paso="2"], [data-paso="3"], [data-paso="4"], [data-paso="5"], [data-paso="6"]) .ficha-envio,
.escena:is([data-paso="4"], [data-paso="5"], [data-paso="6"]) .ficha-respuesta,
.escena[data-paso="6"] .ficha-ok { transform: none; }
.escena .ficha-envio { align-self: flex-start; }
.escena .ficha-ok { align-self: flex-end; }
.escena .tarjeta-agenda {
  position: static; width: auto; padding: 20px 22px; border-radius: 22px; transform: none;
}
/* La agenda deja de medirse en unidades del contenedor */
.agenda-cabeza { margin-bottom: 12px; }
.agenda-cabeza b { font-size: 17px; }
.agenda-cabeza span { font-size: 13px; }
.franja { grid-template-columns: 46px 1fr; gap: 10px; margin-top: 8px; }
.franja time { font-size: 12.5px; }
.bloque { padding: 9px 12px; border-radius: 10px; font-size: 14px; border-left-width: 4px; }
.bloque small { font-size: 12.5px; }
.bloque.vacio { height: 32px; }
.bloque.foco .etiqueta-estado { right: 8px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; }
.ficha-flotante { padding: 13px 18px; border-radius: 18px; font-size: 15px; gap: 12px; }
.ficha-flotante small { font-size: 13px; }
.ficha-flotante .icono { width: 34px; height: 34px; border-radius: 11px; }
.ficha-flotante .icono svg { width: 19px; height: 19px; }

/* La tira de abajo vive dentro de la lámina */
.portada .portada-tira { margin-top: clamp(24px, 4vw, 44px); }

@media (max-width: 960px) {
  .portada-lamina { min-height: auto; padding-top: 104px; }
  .escena-marco { max-width: 520px; margin-inline: auto; }
  .portada-foto img { object-position: 72% 50%; }
  .portada-foto::after {
    background:
      linear-gradient(180deg, rgba(246, 251, 248, 0.95) 0%, rgba(246, 251, 248, 0.86) 42%, rgba(246, 251, 248, 0.7) 70%, rgba(246, 251, 248, 0.92) 100%);
  }
  :root:not([data-tema="claro"]) .portada-foto::after {
    background: linear-gradient(180deg, rgba(4, 10, 8, 0.92) 0%, rgba(4, 10, 8, 0.8) 42%, rgba(4, 10, 8, 0.7) 70%, rgba(4, 10, 8, 0.95) 100%);
  }
  [data-tema="claro"] .encabezado .env { border-radius: 0 0 20px 20px; }
}
@media (max-width: 520px) {
  .portada-lamina { margin-inline: 8px; border-radius: 24px; }
}

/* ==========================================================================
   UN SOLO AVISO POR VEZ (patrón «hero-centric»: imagen fuerte, poco texto).
   Las tres fichas comparten el mismo lugar y se van turnando, así nunca se
   pisan entre ellas ni tapan a la notebook de la foto.
   ========================================================================== */
.portada .escena-marco { max-width: 330px; margin-left: auto; }
.portada .escena { position: relative; display: block; min-height: 86px; }
.portada .escena .ficha-flotante {
  position: absolute; inset: 0 0 auto 0; width: 100%; max-width: none;
  opacity: 0; transform: translateY(8px) scale(0.98);
  transition: opacity 420ms var(--ease-out), transform 520ms var(--ease-out);
}
/* Sólo una visible por paso */
.portada .escena:is([data-paso="2"], [data-paso="3"]) .ficha-envio,
.portada .escena:is([data-paso="4"], [data-paso="5"]) .ficha-respuesta,
.portada .escena[data-paso="6"] .ficha-ok { opacity: 1; transform: none; }
@media (max-width: 960px) {
  .portada .escena-marco { max-width: 360px; margin-inline: 0; }
}
/* El aviso va arriba a la derecha, sobre la ventana: la zona tranquila de la foto */
.portada .env > :last-child { align-self: start; padding-top: clamp(8px, 3vh, 36px); }
/* Las fichas de la tira miden todas igual y su texto no se parte */
.portada .portada-tira { align-items: stretch; }
.portada .tira-item { align-items: center; }
.portada .tira-item small { white-space: nowrap; }
@media (max-width: 1100px) { .portada .tira-item small { white-space: normal; } }

/* La foto de la portada llega a los dos bordes: antes quedaba una franja del
   fondo a los costados. Sólo se redondea abajo, donde empieza el contenido. */
.portada-lamina { margin: 0; border-radius: 0 0 36px 36px; }
@media (max-width: 520px) { .portada-lamina { margin-inline: 0; border-radius: 0 0 24px 24px; } }

/* ==========================================================================
   El encabezado como barra apoyada arriba vale para los dos temas: en oscuro
   es vidrio ahumado, no blanco.
   ========================================================================== */
.encabezado { top: 0; }
.encabezado .env {
  width: min(var(--ancho), 100% - 2 * var(--canal)); max-width: none;
  height: 72px; padding: 0 10px 0 18px; border-radius: 0 0 26px 26px; border-top: 0;
}
:root:not([data-tema="claro"]) .encabezado .env {
  background: rgba(7, 16, 12, 0.82); border: 1px solid var(--borde); border-top: 0;
  box-shadow: 0 16px 40px -24px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
}
:root:not([data-tema="claro"]) .encabezado::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 50%; z-index: -1;
  background: var(--noche);
}
:root:not([data-tema="claro"]) .encabezado.con-fondo .env { background: rgba(7, 16, 12, 0.92); }
@media (max-width: 960px) { .encabezado .env { border-radius: 0 0 20px 20px; } }
/* En oscuro la foto del bloque de contacto queda azulada: se baja y se tiñe */
:root:not([data-tema="claro"]) .contacto-caja::after { opacity: 0.12; filter: saturate(0.5) hue-rotate(60deg); }
:root:not([data-tema="claro"]) .seccion.con-foto::after { opacity: 0.18; }

/* ==========================================================================
   Los avisos SALEN DEL TELÉFONO de la foto y se van apilando en orden, como
   las notificaciones de un celular. Los tres ocupan su lugar desde el
   principio (sólo cambia la opacidad), así ninguno empuja al otro al aparecer.
   ========================================================================== */
.portada .escena { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.portada .escena .ficha-flotante {
  position: relative; inset: auto; width: 100%; max-width: none;
  opacity: 0; transform: translate(54px, 78px) scale(0.72); transform-origin: 88% 160%;
  filter: blur(2px);
  transition: opacity 260ms ease, transform 560ms var(--ease-out), filter 360ms ease;
}
/* Se van sumando: cada paso deja prendidos los anteriores */
.portada .escena:is([data-paso="2"], [data-paso="3"], [data-paso="4"], [data-paso="5"], [data-paso="6"]) .ficha-envio,
.portada .escena:is([data-paso="4"], [data-paso="5"], [data-paso="6"]) .ficha-respuesta,
.portada .escena[data-paso="6"] .ficha-ok {
  opacity: 1; transform: none; filter: none;
  transition: opacity 320ms ease, transform 620ms var(--ease-out), filter 420ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .portada .escena .ficha-flotante { transform: none !important; filter: none !important; transition: opacity 300ms ease; }
}
/* Sobre la foto los avisos necesitan más cuerpo para leerse */
:root:not([data-tema="claro"]) .portada .escena .ficha-flotante {
  background: rgba(6, 14, 10, 0.82); border: 1px solid rgba(140, 200, 170, 0.28);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
}
:root:not([data-tema="claro"]) .portada .escena .ficha-flotante small { color: #b9cfc4; }

/* ==========================================================================
   SIN LÍNEAS ENTRE SECCIONES: el corte seco se reemplaza por un degradado
   que funde una sección con la siguiente. El paso tiene que sentirse fluido.
   ========================================================================== */
.seccion.banda, .cinta, .pie { border-block: 0; border-top: 0; }
.seccion.banda {
  background: linear-gradient(180deg, rgba(7, 20, 16, 0) 0%, rgba(7, 20, 16, 0.85) 12%, rgba(7, 20, 16, 0.85) 88%, rgba(7, 20, 16, 0) 100%);
}
[data-tema="claro"] .seccion.banda {
  background: linear-gradient(180deg, rgba(240, 248, 243, 0) 0%, rgba(240, 248, 243, 0.9) 12%, rgba(240, 248, 243, 0.9) 88%, rgba(240, 248, 243, 0) 100%);
}
/* La cinta de rubros se funde por los cuatro lados */
.cinta {
  background: linear-gradient(180deg, rgba(9, 20, 15, 0) 0%, rgba(9, 20, 15, 0.6) 30%, rgba(9, 20, 15, 0.6) 70%, rgba(9, 20, 15, 0) 100%);
}
[data-tema="claro"] .cinta {
  background: linear-gradient(180deg, rgba(243, 249, 245, 0) 0%, rgba(243, 249, 245, 0.75) 30%, rgba(243, 249, 245, 0.75) 70%, rgba(243, 249, 245, 0) 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* El pie se separa con un degradado, no con una raya */
.pie { position: relative; }
.pie::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 140px; pointer-events: none;
  background: linear-gradient(180deg, rgba(125, 255, 184, 0.05), transparent);
}
.pie-legal { border-top: 0; position: relative; }
.pie-legal::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--borde) 18%, var(--borde) 82%, transparent);
}
/* En celular el velo tapaba casi toda la foto: se afloja para que se vea */
@media (max-width: 960px) {
  :root:not([data-tema="claro"]) .portada-foto::after {
    background: linear-gradient(180deg, rgba(4, 10, 8, 0.88) 0%, rgba(4, 10, 8, 0.58) 38%, rgba(4, 10, 8, 0.5) 62%, rgba(4, 10, 8, 0.92) 100%);
  }
  [data-tema="claro"] .portada-foto::after {
    background: linear-gradient(180deg, rgba(246, 251, 248, 0.92) 0%, rgba(246, 251, 248, 0.66) 38%, rgba(246, 251, 248, 0.58) 62%, rgba(246, 251, 248, 0.95) 100%);
  }
}

/* ==========================================================================
   SECCIONES QUE SE TURNAN: una oscura, una clara. La clara lleva
   data-tema="claro" en la propia sección, así todo lo que ya estaba escrito
   para el tema claro vale adentro sin repetirlo.
   ========================================================================== */
.seccion.clarito {
  --noche: #f7fbf8; --noche-2: #ffffff; --noche-3: #eaf4ee;
  --vidrio: rgba(11, 80, 55, 0.04); --vidrio-fuerte: rgba(11, 80, 55, 0.07);
  --borde: rgba(11, 70, 48, 0.12); --borde-fuerte: rgba(11, 70, 48, 0.22);
  --texto: #0b1f17; --tenue: #4a6358; --apagado: #7b8f86;
  --lima: #6fb31b; --esmeralda: #0f9f6e; --jade: #0b6e52;
  --verde: #12a465; --ambar: #b97d00;
  --aurora: linear-gradient(100deg, #5aa514 0%, #0f9f6e 50%, #0b6e52 100%);
  color: var(--texto);
  background:
    radial-gradient(60vmax 40vmax at 85% 0%, rgba(15, 159, 110, 0.1), transparent 60%),
    radial-gradient(50vmax 40vmax at 0% 100%, rgba(111, 179, 27, 0.08), transparent 60%),
    #f7fbf8;
}
/* Las juntas se funden: arriba y abajo de cada bloque claro */
.seccion.clarito::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--noche) 0%, transparent 10%, transparent 90%, var(--noche) 100%);
  opacity: 0; /* el fondo ya es plano: la junta la hace el degradé de abajo */
}
.seccion.clarito::before {
  background: linear-gradient(180deg, rgba(4, 10, 8, 0.1), transparent 14%),
              linear-gradient(0deg, rgba(4, 10, 8, 0.1), transparent 14%);
}
.seccion.clarito .boton-primario { color: #ffffff; }
.seccion.clarito .ventana-real { background: rgba(255, 255, 255, 0.7); border-color: rgba(255, 255, 255, 0.95); }
.seccion.clarito .ventana-real .ventana-barra { background: rgba(255, 255, 255, 0.6); border-bottom-color: rgba(11, 70, 48, 0.08); }
.seccion.clarito .demo-pieza.dp-chat { background: #0b141a; }

/* ==========================================================================
   VITRINA: los trabajos en burbujas que se corren al costado, como una
   tienda. Menos scroll hacia abajo y se recorre con el dedo, la rueda o las
   flechas.
   ========================================================================== */
.vitrina-marco { position: relative; }
.vitrina {
  display: flex; gap: 20px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 10px var(--canal) 28px;
  scrollbar-width: none;
}
.vitrina::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) { .vitrina { scroll-behavior: auto; } }
.vitrina:focus-visible { outline: 2px solid var(--esmeralda); outline-offset: -4px; border-radius: 28px; }

.burbuja {
  flex: 0 0 min(420px, 82vw); scroll-snap-align: center;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 28px; border: 1px solid var(--borde);
  background: linear-gradient(180deg, rgba(20, 30, 22, 0.9), rgba(9, 20, 15, 0.9));
  box-shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.8);
  transition: transform 420ms var(--ease-out), border-color 300ms ease, box-shadow 420ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .burbuja:hover { transform: translateY(-6px); border-color: var(--borde-fuerte); box-shadow: 0 40px 80px -36px rgba(0, 0, 0, 0.9); }
}
.burbuja-foto { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--noche-3); }
.burbuja-foto picture, .burbuja-foto img { display: block; width: 100%; height: 100%; }
.burbuja-foto img { object-fit: cover; object-position: top left; transition: transform 900ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .burbuja:hover .burbuja-foto img { transform: scale(1.04); } }
.burbuja-foto .sello-estado {
  position: absolute; left: 14px; top: 14px; margin: 0; font-size: 12.5px; padding: 6px 12px;
  background: rgba(6, 14, 10, 0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.burbuja-texto { display: flex; flex-direction: column; gap: 10px; padding: 24px; flex: 1; }
.burbuja-texto h3 { font-size: 26px; line-height: 1.1; }
.burbuja-texto p { color: var(--tenue); font-size: 15.5px; }
.burbuja-texto .chips { margin-top: 2px; }
.burbuja-texto .chips li { font-size: 13px; padding: 5px 10px; }
.burbuja-texto .boton { margin-top: auto; align-self: flex-start; min-height: 46px; font-size: 15px; }
.burbuja-cta {
  background: linear-gradient(150deg, rgba(18, 155, 120, 0.22), rgba(9, 20, 15, 0.9));
  border-color: var(--borde-fuerte);
}
.burbuja-cta .burbuja-texto { justify-content: center; padding: 34px 28px; }
.burbuja-cta h3 { font-size: 30px; }

/* Maqueta chica del sistema de restaurantes */
.maqueta-resto-chica { display: grid; place-items: center; background: radial-gradient(70% 90% at 50% 20%, rgba(18, 155, 120, 0.3), transparent 70%), var(--noche-3); }
.mini-resto { display: flex; gap: 14px; }
.mini-tel {
  width: 94px; padding: 12px 10px; border-radius: 16px; display: grid; gap: 7px; align-content: start;
  background: rgba(6, 14, 10, 0.75); border: 1px solid var(--borde-fuerte);
}
.mini-tel:last-child { transform: translateY(-14px); }
.mini-tel b { font-size: 11px; color: var(--texto); }
.mini-tel i { height: 13px; border-radius: 4px; background: var(--vidrio-fuerte); }
.mini-tel span { margin-top: 2px; padding: 5px; border-radius: 8px; text-align: center; font-size: 9.5px; font-weight: 600; color: #04100a; background: var(--aurora); }

/* Flechas */
.vitrina-mando { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.flecha {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: var(--vidrio); border: 1px solid var(--borde-fuerte); color: var(--texto);
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms var(--ease-out);
}
.flecha svg { width: 20px; height: 20px; }
.flecha[disabled] { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .flecha:not([disabled]):hover { background: var(--vidrio-fuerte); border-color: var(--esmeralda); }
}
.flecha:not([disabled]):active { transform: scale(0.94); }

/* Entrada escalonada de las burbujas */
.js .vitrina .burbuja { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); }
.js .vitrina .burbuja:nth-child(2) { transition-delay: 80ms; }
.js .vitrina .burbuja:nth-child(3) { transition-delay: 160ms; }
.js .vitrina .burbuja:nth-child(4) { transition-delay: 240ms; }
.js .vitrina .burbuja:nth-child(5) { transition-delay: 320ms; }
.js .visible .vitrina .burbuja, .js .vitrina-marco.visible .burbuja { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .vitrina .burbuja { transform: none; } }

/* La imagen de ejemplo dentro de la tarjeta de servicios */
.demo-imagen { padding: 0; overflow: hidden; }
.demo-imagen picture, .demo-imagen img { display: block; width: 100%; height: 100%; }
.demo-imagen img { object-fit: cover; object-position: top center; }
/* ==========================================================================
   La tarjeta de landings muestra dos capturas de diseño, una apoyada sobre la
   otra, en vez del dibujo que había antes.
   ========================================================================== */
.demo-dos { position: relative; display: block; overflow: hidden; }
.demo-dos picture {
  position: absolute; display: block; overflow: hidden; border-radius: 10px;
  border: 1px solid var(--borde-fuerte); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.85);
  transition: transform 600ms var(--ease-out);
}
.demo-dos img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* La de atrás, corrida a la izquierda y un poco más chica */
.demo-dos picture:first-child { left: 4%; top: 10%; width: 62%; height: 66%; }
/* La de adelante, pisando la esquina de abajo a la derecha */
.demo-dos picture:last-child { right: 4%; bottom: 8%; width: 62%; height: 66%; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .pieza:hover .demo-dos picture:first-child { transform: translate(-6px, -6px); }
  .pieza:hover .demo-dos picture:last-child { transform: translate(6px, 6px); }
}
/* Las capturas de landing, más grandes dentro de su tarjeta */
.demo-dos picture:first-child { left: 3%; top: 8%; width: 66%; height: 70%; }
.demo-dos picture:last-child { right: 3%; bottom: 7%; width: 66%; height: 70%; }
.pieza.media .demo-pieza.demo-dos { min-height: 210px; }

/* ==========================================================================
   «Cómo trabajamos» lleva de fondo la foto del taller. El orden de capas va
   explícito: foto, velo y recién después el texto, para que se lea siempre.
   ========================================================================== */
.seccion.con-foto { background: var(--noche); }
.seccion.con-foto::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("img/taller.webp") center / cover no-repeat;
  opacity: 0.55; filter: none;
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.seccion.con-foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--noche) 0%, rgba(247, 251, 248, 0.92) 34%, rgba(247, 251, 248, 0.62) 62%, rgba(247, 251, 248, 0.35) 100%),
              linear-gradient(180deg, var(--noche) 0%, transparent 16%, transparent 84%, var(--noche) 100%);
}
:root:not([data-tema="claro"]) .seccion.con-foto::before,
.seccion.con-foto:not([data-tema="claro"])::before {
  background: linear-gradient(90deg, rgba(4, 10, 8, 0.96) 0%, rgba(4, 10, 8, 0.86) 34%, rgba(4, 10, 8, 0.6) 62%, rgba(4, 10, 8, 0.35) 100%),
              linear-gradient(180deg, #040a08 0%, transparent 16%, transparent 84%, #040a08 100%);
}
.seccion.con-foto > .env { position: relative; z-index: 2; }
@media (max-width: 900px) {
  .seccion.con-foto::after { opacity: 0.35; }
  .seccion.con-foto::before { background: linear-gradient(180deg, var(--noche) 0%, rgba(247, 251, 248, 0.9) 18%, rgba(247, 251, 248, 0.9) 82%, var(--noche) 100%); }
}
/* La sección clara manda sobre el velo oscuro del tema general */
.seccion.con-foto[data-tema="claro"]::after { opacity: 0.4; }
.seccion.con-foto[data-tema="claro"]::before {
  background: linear-gradient(90deg, #f7fbf8 0%, rgba(247, 251, 248, 0.95) 38%, rgba(247, 251, 248, 0.7) 66%, rgba(247, 251, 248, 0.45) 100%),
              linear-gradient(180deg, #f7fbf8 0%, rgba(247, 251, 248, 0.2) 16%, rgba(247, 251, 248, 0.2) 84%, #f7fbf8 100%);
}
@media (max-width: 900px) {
  .seccion.con-foto[data-tema="claro"]::before {
    background: linear-gradient(180deg, #f7fbf8 0%, rgba(247, 251, 248, 0.93) 18%, rgba(247, 251, 248, 0.93) 82%, #f7fbf8 100%);
  }
}
/* Pesa más que la regla del tema oscuro, que si no se impone igual */
.seccion.clarito.con-foto[data-tema="claro"]::after { opacity: 0.42; }
.seccion.clarito.con-foto[data-tema="claro"]::before {
  background: linear-gradient(90deg, #f7fbf8 0%, rgba(247, 251, 248, 0.95) 38%, rgba(247, 251, 248, 0.7) 66%, rgba(247, 251, 248, 0.45) 100%),
              linear-gradient(180deg, #f7fbf8 0%, rgba(247, 251, 248, 0.2) 16%, rgba(247, 251, 248, 0.2) 84%, #f7fbf8 100%);
}
@media (max-width: 900px) {
  .seccion.clarito.con-foto[data-tema="claro"]::after { opacity: 0.3; }
  .seccion.clarito.con-foto[data-tema="claro"]::before {
    background: linear-gradient(180deg, #f7fbf8 0%, rgba(247, 251, 248, 0.93) 18%, rgba(247, 251, 248, 0.93) 82%, #f7fbf8 100%);
  }
}
/* Se afloja el velo: la foto del taller tiene que verse más */
.seccion.clarito.con-foto[data-tema="claro"]::after { opacity: 0.68; }
.seccion.clarito.con-foto[data-tema="claro"]::before {
  background: linear-gradient(90deg, rgba(247, 251, 248, 0.96) 0%, rgba(247, 251, 248, 0.86) 34%, rgba(247, 251, 248, 0.5) 60%, rgba(247, 251, 248, 0.12) 86%, rgba(247, 251, 248, 0) 100%),
              linear-gradient(180deg, #f7fbf8 0%, rgba(247, 251, 248, 0.1) 14%, rgba(247, 251, 248, 0.1) 86%, #f7fbf8 100%);
}
@media (max-width: 900px) {
  .seccion.clarito.con-foto[data-tema="claro"]::after { opacity: 0.45; }
  .seccion.clarito.con-foto[data-tema="claro"]::before {
    background: linear-gradient(180deg, #f7fbf8 0%, rgba(247, 251, 248, 0.88) 16%, rgba(247, 251, 248, 0.88) 84%, #f7fbf8 100%);
  }
}

/* ==========================================================================
   AVISO DE COOKIES. Hoy no hay ninguna de seguimiento, así que el cartel lo
   dice en vez de pedir permiso por algo que no pasa. La elección se guarda en
   el navegador (localStorage, no una cookie) y se respeta si algún día se
   suma medición.
   ========================================================================== */
.aviso-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 0 var(--canal) calc(16px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.aviso-cookies[hidden] { display: none; }
.aviso-caja {
  pointer-events: auto; display: flex; align-items: center; gap: 22px;
  width: min(var(--ancho), 100%); margin-inline: auto; padding: 18px 22px;
  border-radius: var(--radio-m); border: 1px solid var(--borde-fuerte);
  background: rgba(7, 16, 12, 0.92); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
  animation: aviso-entra 520ms var(--ease-out) both;
}
[data-tema="claro"] .aviso-caja {
  background: rgba(255, 255, 255, 0.95); border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 30px 70px -30px rgba(4, 40, 26, 0.45);
}
@keyframes aviso-entra { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .aviso-caja { animation: none; } }
.aviso-caja b { display: block; font: 600 16px/1.3 var(--f-texto); }
.aviso-caja p { margin-top: 5px; color: var(--tenue); font-size: 14.5px; max-width: 78ch; }
.aviso-caja a { color: var(--esmeralda); }
.aviso-botones { display: flex; gap: 10px; margin-left: auto; flex: 0 0 auto; }
.aviso-botones .boton { min-height: 44px; padding: 0 20px; font-size: 15px; }
@media (max-width: 760px) {
  .aviso-caja { flex-direction: column; align-items: stretch; gap: 14px; }
  .aviso-botones { margin-left: 0; }
  .aviso-botones .boton { flex: 1; }
}
.pie-nota { display: block; margin-top: 8px; color: var(--apagado); font-size: 13px; max-width: 80ch; }
/* El panel de ejemplo ocupa toda la caja de la tarjeta */
.demo-panel { padding: 0; }
.demo-panel picture, .demo-panel img { display: block; width: 100%; height: 100%; }
.demo-panel img { object-fit: cover; object-position: center top; }
/* El panel no puede estirar la tarjeta: entra entero dentro de la caja de
   siempre, centrado, con el fondo de la tarjeta haciendo de marco. */
.pieza .demo-pieza.demo-panel { flex: 1 1 auto; height: auto; min-height: 150px; max-height: 210px; padding: 12px; }
.demo-panel picture { display: block; width: 100%; height: 100%; }
.demo-panel img { width: 100%; height: 100%; object-fit: contain; object-position: center; }