@font-face {
  font-family: "RobotoLocal";
  src: url("../fonts/roboto-regular-webfont.woff") format("woff");
  font-weight: 400;
}

@font-face {
  font-family: "RobotoLocal";
  src: url("../fonts/roboto-bold-webfont.woff") format("woff");
  font-weight: 700;
}

:root {
  --ink: #101517;
  --muted: #677477;
  --paper: #ffffff;
  --soft: #f4f8f8;
  --line: #dce6e7;
  --brand: #007083;
  --brand-dark: #004e5c;
  --green: #8bbd3f;
  --cyan: #00a6b2;
  --blue: #2d7dd2;
  --orange: #e46f3a;
  --violet: #745bd6;
  --shadow: 0 24px 70px rgba(0, 31, 36, .13);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "RobotoLocal", Arial, sans-serif;
  line-height: 1.5;
  background: var(--paper);
}

a {
  color: var(--brand);
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

.brand-mark {
  position: fixed;
  left: 24px;
  top: 22px;
  z-index: 55;
  width: 118px;
  opacity: .76;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(10px);
}

.remote-fixed {
  position: fixed;
  right: 22px;
  top: 14px;
  z-index: 80;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 999px;
  background: rgba(16, 21, 23, .90);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
  backdrop-filter: blur(10px);
}

.remote-fixed:hover {
  color: #fff;
  background: var(--brand);
}

.floating-menu {
  position: fixed;
  right: 22px;
  top: 72px;
  z-index: 70;
}

.menu-button {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  background: rgba(16, 21, 23, .88);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .22);
}

.menu-panel {
  position: absolute;
  right: 0;
  top: 60px;
  width: min(280px, calc(100vw - 32px));
  display: none;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}

.menu-panel.is-open {
  display: grid;
}

.menu-panel a {
  padding: 12px 14px;
  border-radius: 8px;
  color: #172326;
  font-weight: 700;
}

.menu-panel a:hover {
  background: #e8f5f7;
  color: var(--brand);
}

.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  color: #fff;
  background: #0f1b1e;
}

.hero-copy {
  padding: clamp(92px, 10vw, 150px) clamp(24px, 7vw, 92px) 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-visual {
  min-height: 100vh;
  background:
    linear-gradient(90deg, #0f1b1e 0%, rgba(15, 27, 30, .15) 48%, rgba(15, 27, 30, .02)),
    url("../images/network.jpg") center / cover;
}

.eyebrow {
  margin: 0 0 18px;
  color: #bdebf1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 880px;
  margin: 0;
  font-size: clamp(48px, 8vw, 96px);
  line-height: .92;
}

.hero p {
  max-width: 680px;
  margin: 24px 0 0;
  color: #dcecee;
  font-size: clamp(19px, 2.1vw, 26px);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
}

.button:hover {
  background: var(--brand-dark);
  color: #fff;
}

.button.ghost {
  border-color: rgba(255, 255, 255, .48);
  background: transparent;
}

.section {
  padding: 86px clamp(22px, 6vw, 92px);
}

.section.dark {
  background: #101517;
  color: #fff;
}

.section.soft {
  background: var(--soft);
}

.section-head {
  width: min(1120px, 100%);
  margin-bottom: 42px;
}

h2 {
  margin: 0;
  color: var(--brand-dark);
  font-size: clamp(36px, 5.8vw, 72px);
  line-height: .95;
}

.dark h2 {
  color: #fff;
}

.section-head p,
.lead {
  max-width: 760px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 20px;
}

.dark .section-head p,
.dark .lead {
  color: #dcecee;
}

.service-canvas {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.services-grid .service-card {
  grid-column: span 4;
}

.service-card {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  grid-column: span 4;
  padding: 28px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(145deg, var(--a), var(--b));
  box-shadow: var(--shadow);
}

.service-card.wide {
  grid-column: span 6;
}

.service-card img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.service-card h3 {
  margin: 22px 0 10px;
  font-size: 30px;
  line-height: 1.05;
}

.service-card p {
  margin: 0;
  color: rgba(255, 255, 255, .88);
}

.service-mini-button {
  width: fit-content;
  margin-top: 18px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.service-mini-button:hover {
  background: #fff;
  color: var(--brand-dark);
}

.ai-examples {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(18px, 4vw, 44px);
  background: rgba(16, 21, 23, .52);
  backdrop-filter: blur(8px);
}

.ai-examples.is-open {
  display: flex;
}

.ai-examples-panel {
  position: relative;
  width: min(1080px, 100%);
  max-height: calc(100vh - 56px);
  min-height: min(620px, calc(100vh - 88px));
  display: grid;
  align-items: center;
  overflow-y: auto;
  padding: clamp(48px, 6vw, 72px) clamp(24px, 6vw, 72px) clamp(30px, 4vw, 52px);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  color: var(--ink);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .28);
}

.ai-examples-close {
  position: absolute;
  right: 16px;
  top: 14px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: #edf5f6;
  color: var(--ink);
  font-size: 24px;
  cursor: pointer;
}

.ai-slide {
  display: none;
  position: relative;
  isolation: isolate;
  padding-right: min(330px, 34vw);
}

.slide-technical {
  overflow: hidden;
}

.ai-slide.is-active {
  display: block;
}

.ai-slide::before {
  content: "";
  position: absolute;
  right: -34px;
  top: 2px;
  z-index: 0;
  width: min(430px, 42vw);
  aspect-ratio: 1;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .38;
  pointer-events: none;
  animation: aiBackgroundFloat 9s ease-in-out infinite;
}

.ai-slide > * {
  position: relative;
  z-index: 1;
}

.slide-restaurant::before {
  content: none;
}

.slide-shop::before {
  content: none;
}

.slide-technical::before {
  background-image: url("../images/ai-slide-technical.svg");
}

.slide-count {
  margin: 0 0 12px;
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ai-slide h3 {
  margin: 0 0 18px;
  color: var(--brand-dark);
  font-size: clamp(38px, 5.6vw, 72px);
  line-height: 1;
}

.ai-slide > p:not(.slide-count) {
  margin: 0;
  color: var(--muted);
  max-width: 660px;
  font-size: clamp(20px, 2.1vw, 25px);
}

.ai-slide.is-active.slide-restaurant,
.ai-slide.is-active.slide-shop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(24px, 5vw, 56px);
  align-content: center;
  align-items: center;
  padding-right: 0;
}

.slide-restaurant h3,
.slide-shop h3 {
  font-size: clamp(30px, 4vw, 52px);
}

.slide-restaurant h3,
.slide-restaurant > p,
.slide-shop h3,
.slide-shop > p {
  grid-column: 1;
}

.phone-demo {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-rows: auto auto;
  gap: 14px;
  align-content: center;
  justify-items: center;
}

.phone-frame {
  position: relative;
  width: min(300px, 100%);
  min-height: min(430px, 52vh);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 46px 18px 18px;
  border: 10px solid #11191b;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(0, 112, 131, .1), rgba(255, 255, 255, .96)),
    #fff;
  box-shadow: 0 26px 70px rgba(0, 31, 36, .24);
  overflow: hidden;
  animation: phoneFloat 7.2s ease-in-out infinite;
}

.phone-frame::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 18px;
  width: 78px;
  height: 8px;
  border-radius: 999px;
  background: #11191b;
  transform: translateX(-50%);
}

.phone-top {
  width: 68px;
  height: 68px;
  flex: none;
  margin: 0 auto 4px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 35%, #fff 0 10px, transparent 11px),
    linear-gradient(135deg, var(--brand), var(--green));
  box-shadow: 0 18px 34px rgba(0, 112, 131, .22);
  animation: phoneAppMorph 4.8s ease-in-out infinite;
}

.phone-shop .phone-top {
  background:
    linear-gradient(180deg, #fff 0 22%, transparent 23%),
    linear-gradient(135deg, var(--orange), var(--violet));
}

.chat-line {
  position: relative;
  max-width: 84%;
  padding: 10px 13px;
  border-radius: 15px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: 0 12px 26px rgba(0, 31, 36, .09);
  opacity: 0;
  animation: messageIn 7.2s cubic-bezier(.22, 1, .36, 1) infinite;
}

.chat-line.incoming {
  align-self: flex-start;
  background: #eef6f7;
  transform-origin: left bottom;
}

.chat-line.outgoing {
  align-self: flex-end;
  background: #dbf4e0;
  transform-origin: right bottom;
  animation-name: messageInRight;
}

.chat-line.m1 {
  animation-delay: .4s;
}

.chat-line.m2 {
  animation-delay: 1.6s;
}

.chat-line.m3 {
  animation-delay: 2.5s;
}

/* Indicador "escribiendo" que se colapsa al llegar la respuesta */
.chat-typing {
  align-self: flex-end;
  width: 54px;
  height: 32px;
  flex: none;
  border-radius: 15px;
  background:
    radial-gradient(circle at 15px 50%, var(--brand) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 27px 50%, var(--brand) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 39px 50%, var(--brand) 0 3.5px, transparent 4.5px),
    #eef6f7;
  box-shadow: 0 12px 26px rgba(0, 31, 36, .09);
  opacity: 0;
  animation: typingDots 7.2s ease-in-out infinite;
  animation-delay: .95s;
}

.phone-confirm {
  position: relative;
  margin-top: auto;
  padding: 13px;
  border-radius: 16px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 14px 34px rgba(16, 21, 23, .22);
  opacity: 0;
  transform: translateY(20px) scale(.94);
  animation: confirmService 7.2s cubic-bezier(.22, 1, .36, 1) infinite;
  animation-delay: 3.1s;
}

.phone-shop .phone-confirm {
  background: var(--brand);
}

.service-result {
  display: flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  padding: 11px 20px 11px 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--brand-dark);
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 18px 40px rgba(0, 31, 36, .12);
  opacity: 0;
  animation: resultBadge 7.2s cubic-bezier(.22, 1, .36, 1) infinite;
  animation-delay: 3.9s;
}

.service-result::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 999px;
  background:
    linear-gradient(45deg, transparent 0 42%, #fff 42% 52%, transparent 52%) 1px 1px / 14px 14px no-repeat,
    linear-gradient(135deg, var(--green, #4fae4f), var(--brand));
  box-shadow: 0 6px 14px rgba(0, 112, 131, .35);
  animation: resultCheck 7.2s cubic-bezier(.22, 1, .36, 1) infinite;
  animation-delay: 4.05s;
}

.slide-visual {
  max-width: 640px;
  min-height: 150px;
  margin-top: 34px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #f7fbfb, #e7f3f4);
  box-shadow: 0 18px 46px rgba(0, 31, 36, .1);
}

.visual-restaurant {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.visual-restaurant .table {
  min-height: 78px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  animation: tablePulse 4.5s ease-in-out infinite;
}

.visual-restaurant .table:nth-child(2) {
  animation-delay: .45s;
}

.visual-restaurant .table:nth-child(3) {
  animation-delay: .9s;
}

.visual-restaurant .reserved {
  background: var(--orange);
}

.visual-restaurant .free {
  background: var(--green);
}

.visual-restaurant .active {
  background: var(--brand);
}

.visual-restaurant .order-line {
  grid-column: 1 / -1;
  padding: 13px 14px;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0, 31, 36, .08);
  animation: reservationSlide 5s ease-in-out infinite;
}

.visual-shop {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 14px;
  align-items: center;
}

.visual-shop span,
.visual-shop strong,
.visual-shop em,
.visual-shop small,
.visual-mail span {
  padding: 13px 14px;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(0, 31, 36, .08);
}

.visual-shop span,
.visual-shop strong,
.visual-shop em,
.visual-shop small {
  animation: shopOrderFlow 5.8s ease-in-out infinite;
}

.visual-shop strong {
  animation-delay: .25s;
}

.visual-shop em {
  animation-delay: .5s;
}

.visual-shop small {
  animation-delay: .75s;
}

.visual-shop strong {
  color: var(--brand-dark);
}

.visual-shop em {
  width: fit-content;
  background: #e7f7eb;
  color: #2f6f25;
  font-style: normal;
  font-weight: 700;
}

.visual-shop small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 14px;
}

.visual-mail {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.visual-mail span:first-child {
  grid-column: 1 / -1;
  background: var(--ink);
  color: #fff;
}

.visual-mail span {
  animation: mailSort 5.5s ease-in-out infinite;
}

.visual-mail span:nth-child(2) {
  animation-delay: .3s;
}

.visual-mail span:nth-child(3) {
  animation-delay: .6s;
}

.visual-mail span:nth-child(4) {
  animation-delay: .9s;
}

.visual-mail span:not(:first-child)::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 999px;
  background: var(--brand);
}


.ai-slide-controls button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

.ai-slide-controls button:hover {
  background: var(--brand);
}

@keyframes aiBackgroundFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate3d(-5px, 7px, 0) rotate(-1deg) scale(1.02);
  }
}

@keyframes tablePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: none;
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 12px 28px rgba(0, 31, 36, .16);
  }
}

@keyframes reservationSlide {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(12px);
  }
}

@keyframes shopOrderFlow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes mailSort {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(9px);
  }
}

@keyframes phoneAppMorph {
  0%, 24% {
    border-radius: 24px;
    transform: scale(.96);
  }
  45%, 72% {
    border-radius: 999px;
    transform: scale(1.06);
  }
  100% {
    border-radius: 24px;
    transform: scale(.96);
  }
}

/* Vaivén suave del conjunto, al estilo de la diapositiva de correo */
@keyframes phoneFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -9px, 0) rotate(-.6deg);
  }
}

/* Burbuja entrante: entra desde la izquierda con rebote */
@keyframes messageIn {
  0% {
    opacity: 0;
    transform: translate3d(-16px, 10px, 0) scale(.86);
  }
  5% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.04);
  }
  9% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  88% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -12px, 0) scale(.97);
  }
}

/* Burbuja de respuesta: entra desde la derecha */
@keyframes messageInRight {
  0% {
    opacity: 0;
    transform: translate3d(16px, 10px, 0) scale(.86);
  }
  5% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.04);
  }
  9% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  88% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate3d(0, -12px, 0) scale(.97);
  }
}

/* "Escribiendo...": late y luego colapsa para dejar sitio a la respuesta */
@keyframes typingDots {
  0% {
    opacity: 0;
    height: 32px;
    margin-bottom: 0;
    transform: scale(.9);
  }
  3% {
    opacity: 1;
    transform: scale(1);
  }
  5%, 7% {
    transform: translateY(-3px) scale(1);
  }
  6% {
    transform: translateY(0) scale(1);
  }
  8% {
    opacity: 1;
    height: 32px;
    margin-bottom: 0;
  }
  10% {
    opacity: 0;
    height: 0;
    margin-bottom: -12px;
    transform: scale(.9);
  }
  100% {
    opacity: 0;
    height: 0;
    margin-bottom: -12px;
  }
}

@keyframes confirmService {
  0% {
    opacity: 0;
    transform: translate3d(0, 22px, 0) scale(.9);
  }
  6% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.05);
  }
  11% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  74% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  86%, 100% {
    opacity: 0;
    transform: translate3d(0, -12px, 0) scale(.97);
  }
}

@keyframes resultBadge {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(.85);
  }
  6% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.08);
  }
  12% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  20%, 30% {
    transform: translate3d(0, -4px, 0) scale(1.02);
  }
  25%, 35% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  66% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  78%, 100% {
    opacity: 0;
    transform: translate3d(0, -12px, 0) scale(.95);
  }
}

/* El check dibuja su giro justo al aparecer la insignia */
@keyframes resultCheck {
  0% {
    transform: rotate(-140deg) scale(.4);
  }
  8% {
    transform: rotate(0deg) scale(1.15);
  }
  14%, 100% {
    transform: rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-slide::before,
  .visual-restaurant .table,
  .visual-restaurant .order-line,
  .visual-shop span,
  .visual-shop strong,
  .visual-shop em,
  .visual-shop small,
  .visual-mail span,
  .phone-top,
  .phone-frame,
  .chat-line,
  .phone-confirm,
  .service-result,
  .service-result::before {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .chat-typing {
    display: none;
  }
}

.s1 { --a: #007083; --b: #004e5c; }
.s2 { --a: #79aa36; --b: #3e641f; }
.s3 { --a: #2d7dd2; --b: #194b82; }
.s4 { --a: #e46f3a; --b: #963816; }
.s5 { --a: #745bd6; --b: #392b86; }
.s6 { --a: #00a6b2; --b: #00636c; }
.s7 { --a: #334155; --b: #0f766e; }

.ai-stage {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 36px;
  align-items: center;
}

.ai-copy {
  max-width: 620px;
}

.ai-visual {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.ai-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.ai-chips span {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  color: #dcecee;
  font-size: 14px;
}

.solutions-layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.solution {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  position: relative;
  overflow: hidden;
  padding: 30px;
  border-radius: 8px;
  color: #fff;
  background-position: center;
  background-size: cover;
  box-shadow: var(--shadow);
}

.solution::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(6, 25, 28, .90));
}

.solution > * {
  position: relative;
}

.solution-logo {
  width: 126px;
  max-height: 78px;
  object-fit: contain;
  margin-bottom: 18px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .86);
}

.solution h3 {
  margin: 0 0 10px;
  font-size: 34px;
}

.solution p {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, .88);
}

.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
}

.about img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.about img.partner-logo {
  max-width: 420px;
  aspect-ratio: auto;
  object-fit: contain;
  justify-self: center;
  padding: 34px;
  background: #fff;
}

.contact-grid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 46px;
}

.contact-data {
  display: grid;
  gap: 14px;
  margin-top: 24px;
}

.contact-data strong {
  display: block;
  color: #fff;
  font-size: 24px;
}

.form {
  display: grid;
  gap: 14px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  background: rgba(255, 255, 255, .06);
}

.form label {
  display: grid;
  gap: 7px;
  color: #fff;
}

.form input,
.form textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  padding: 12px;
  font: inherit;
}

.form textarea {
  min-height: 150px;
  resize: vertical;
}

.form label.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #dcecee;
  font-size: 14px;
  line-height: 1.45;
  cursor: pointer;
}

.form label.check input[type="checkbox"] {
  position: relative;
  top: .12em;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 5px;
  background: rgba(255, 255, 255, .94);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.form label.check input[type="checkbox"]:hover {
  border-color: var(--cyan);
}

.form label.check input[type="checkbox"]:checked {
  border-color: var(--cyan);
  background: var(--cyan);
}

.form label.check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form label.check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.form label.captcha-campo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.form label.captcha-campo input {
  flex: 0 0 auto;
  width: 130px;
}

.form .captcha-pregunta {
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

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

.form [data-form-status].is-ok {
  color: #a9e0a0;
  font-weight: 700;
}

.form [data-form-status].is-error {
  color: #ffb4a2;
  font-weight: 700;
}

.form button[disabled] {
  opacity: .6;
  cursor: default;
}

.footer {
  padding: 42px 22px;
  background: #f2f7f7;
  text-align: center;
}

.footer img {
  width: 150px;
  opacity: .82;
}

.footer-bottom {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
}

.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  z-index: 50;
}

.legal-main {
  padding: 110px clamp(22px, 6vw, 92px) 80px;
  max-width: 1080px;
}

.legal-main h1 {
  color: var(--brand-dark);
  font-size: clamp(40px, 6vw, 70px);
}

.legal-main p,
.legal-main li {
  color: var(--muted);
  font-size: 18px;
}

.sap-hero {
  min-height: 100vh;
  display: grid;
  place-items: center start;
  padding: 110px clamp(22px, 6vw, 92px);
  color: #fff;
  background:
    linear-gradient(90deg, rgba(8, 25, 28, .94), rgba(8, 25, 28, .48)),
    url("../images/sap_img_banner.jpg") center / cover;
}

.sap-hero h1 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(50px, 8vw, 98px);
  line-height: .92;
}

.sap-hero p {
  max-width: 720px;
  color: #dcecee;
  font-size: 21px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.feature {
  min-height: 250px;
  padding: 28px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.feature img {
  height: 58px;
  object-fit: contain;
}

@media (max-width: 980px) {
  .hero,
  .ai-stage,
  .about,
  .contact-grid,
  .solutions-layout {
    grid-template-columns: 1fr;
  }

  .hero-visual {
    min-height: 420px;
  }

  .service-card,
  .service-card.wide,
  .services-grid .service-card,
  .services-grid .service-card:nth-child(n+5) {
    grid-column: span 6;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .brand-mark {
    width: 96px;
    left: 14px;
    top: 14px;
  }

  .remote-fixed {
    right: 12px;
    top: 10px;
    min-height: 40px;
    max-width: 62vw;
    padding: 0 12px;
    font-size: 10px;
    text-align: center;
  }

  .floating-menu {
    right: 12px;
    top: 60px;
  }

  .hero-copy {
    padding: 112px 22px 64px;
  }

  .section,
  .legal-main,
  .sap-hero {
    padding-left: 22px;
    padding-right: 22px;
  }

  .ai-examples {
    align-items: flex-end;
    padding: 14px;
  }

  .ai-examples-panel {
    min-height: min(620px, calc(100vh - 28px));
    padding: 44px 22px 26px;
  }

  .ai-slide {
    padding-right: 0;
  }

  .slide-technical {
    padding-top: 128px;
  }

  .ai-slide.is-active.slide-restaurant,
  .ai-slide.is-active.slide-shop {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .phone-demo {
    grid-column: 1;
    grid-row: auto;
    justify-items: center;
  }

  .phone-frame {
    width: min(300px, 100%);
    min-height: min(400px, 46vh);
    justify-self: center;
  }

  .ai-slide::before {
    right: 12px;
    top: 6px;
    width: 150px;
    opacity: .34;
  }

  .visual-restaurant,
  .visual-shop,
  .visual-mail {
    grid-template-columns: 1fr;
  }

  .service-card,
  .service-card.wide,
  .services-grid .service-card,
  .services-grid .service-card:nth-child(n+5) {
    grid-column: 1 / -1;
    min-height: 220px;
  }
}

/* ---- Aviso de cookies bloqueante ---------------------------------------
   Mientras el <html> lleva .pide-cookies no se ve nada de la web: el
   contenido queda con visibility:hidden (que ademas lo saca del recorrido
   del tabulador) y solo se ve el aviso. La clase la pone js/aviso-cookies.js
   desde el <head>, antes de pintar.                                        */

html.pide-cookies,
html.pide-cookies body {
  overflow: hidden;
}

html.pide-cookies body > *:not(.aviso-cookies) {
  visibility: hidden;
}

.aviso-cookies {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(8, 12, 14, .94);
}

.aviso-cookies-caja {
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.aviso-cookies-caja h2 {
  margin: 0 0 16px;
  font-size: 26px;
  line-height: 1.25;
}

.aviso-cookies-caja p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.6;
}

.aviso-cookies-boton {
  display: block;
  width: 100%;
  min-height: 56px;
  margin: 22px 0 16px;
  padding: 14px 22px;
  border: 2px solid var(--brand-dark);
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 19px;
  font-weight: 700;
  cursor: pointer;
}

.aviso-cookies-boton:hover,
.aviso-cookies-boton:focus-visible {
  background: var(--brand-dark);
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

.aviso-cookies-enlaces {
  margin: 0;
  font-size: 16px;
  text-align: center;
}

.aviso-cookies-enlaces a {
  color: var(--brand-dark);
  text-decoration: underline;
}

@media (max-width: 520px) {
  .aviso-cookies-caja {
    padding: 24px 20px;
  }

  .aviso-cookies-caja h2 {
    font-size: 23px;
  }
}

/* ====================================================================
   APARTADO DE IA  (02/10/2026)
   Va delante de los servicios y es la sección con más peso de la home.
   Las escenas de las tarjetas son CSS puro, sin imágenes: cada una se
   distingue por su FORMA y su movimiento, nunca solo por el color.
   ==================================================================== */

.ia-zona {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 90% at 15% 0%, #15323a 0%, #101517 58%);
  color: #fff;
}

/* Malla de fondo: respira muy despacio para no distraer de la lectura */
.ia-malla {
  position: absolute;
  inset: -40px;
  background-image:
    radial-gradient(rgba(0, 166, 178, .30) 1px, transparent 1px),
    radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 54px 54px, 27px 27px;
  background-position: 0 0, 13px 13px;
  animation: iaMallaFlota 26s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes iaMallaFlota {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-26px, -18px, 0); }
}

.ia-portada {
  position: relative;
  max-width: 880px;
  margin: 0 auto 10px;
  text-align: center;
}

.ia-portada h2 {
  margin: 10px 0 18px;
  color: #fff;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.12;
}

.ia-portada .lead {
  margin: 0 auto;
  max-width: 720px;
  font-size: 19px;
  line-height: 1.6;
  color: #d6e7ea;
}

.ia-portada .ai-chips {
  justify-content: center;
  margin-top: 24px;
}

/* ---- Los tres pasos ---------------------------------------------- */

.ia-flujo {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 12px;
  max-width: 1080px;
  margin: 54px auto 0;
}

.ia-paso {
  padding: 26px 22px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .05);
}

.ia-paso-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--cyan);
  color: #06232a;
  font-size: 21px;
  font-weight: 700;
}

.ia-paso h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.ia-paso p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #cfe3e6;
}

/* La chispa recorre la línea de un paso al siguiente */
.ia-union {
  position: relative;
  align-self: center;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .18);
}

.ia-chispa {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px 3px rgba(0, 166, 178, .65);
  animation: iaChispa 2.6s ease-in-out infinite;
}

.ia-union:last-of-type .ia-chispa {
  animation-delay: .5s;
}

@keyframes iaChispa {
  0%        { left: 0;    opacity: 0; }
  18%       { opacity: 1; }
  82%       { opacity: 1; }
  100%      { left: 44px; opacity: 0; }
}

/* ---- Catálogo de proyectos --------------------------------------- */

.ia-catalogo {
  position: relative;
  margin-top: 72px;
}

.ia-catalogo-head {
  margin-bottom: 30px;
}

.ia-catalogo-head h3 {
  margin: 0 0 8px;
  font-size: clamp(24px, 3vw, 32px);
}

.ia-catalogo-head p {
  margin: 0;
  color: #cfe3e6;
  font-size: 17px;
}

.ia-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
  max-width: 1180px;
  margin: 0 auto;
}

.ia-proyecto {
  display: flex;
  flex-direction: column;
  padding: 0 0 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}

.ia-proyecto:hover,
.ia-proyecto:focus-within {
  transform: translateY(-4px);
  border-color: var(--cyan);
  background: rgba(255, 255, 255, .09);
}

.ia-proyecto h4 {
  margin: 0 22px 10px;
  font-size: 21px;
  line-height: 1.25;
}

.ia-proyecto > p {
  margin: 0 22px 14px;
  font-size: 16px;
  line-height: 1.58;
  color: #cfe3e6;
}

.ia-sector {
  margin: 18px 22px 8px !important;
  color: #9fd9df !important;
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ia-marca {
  margin-right: 6px;
  font-size: 11px;
  vertical-align: middle;
}

.ia-resultado {
  margin: auto 22px 18px !important;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  color: #bfe9c4 !important;
  font-weight: 700;
  font-size: 15px !important;
}

.ia-resultado span {
  margin-right: 6px;
}

.ia-proyecto .service-mini-button {
  align-self: flex-start;
  margin: 0 22px;
}

.ia-cierre {
  max-width: 760px;
  margin: 44px auto 0;
  text-align: center;
  font-size: 18px;
  color: #d6e7ea;
}

.ia-cierre a {
  color: #fff;
  text-decoration: underline;
  font-weight: 700;
}

/* ---- Escenas de cada tarjeta -------------------------------------- */

.ia-escena {
  position: relative;
  height: 128px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  background: linear-gradient(160deg, rgba(0, 166, 178, .20), rgba(255, 255, 255, .02));
  overflow: hidden;
}

.ia-escena > span {
  position: absolute;
}

/* 1 · burbujas de conversación */
.esc-chat .burbuja {
  height: 15px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  opacity: 0;
  animation: escAparece 4.2s ease-in-out infinite;
}
.esc-chat .b1 { top: 26px; left: 24px; width: 94px; }
.esc-chat .b2 { top: 55px; right: 24px; width: 118px; background: var(--cyan); animation-delay: .9s; }
.esc-chat .b3 { top: 84px; left: 24px; width: 68px; animation-delay: 1.8s; }

@keyframes escAparece {
  0%, 8%    { opacity: 0; transform: translateY(8px); }
  18%, 76%  { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; transform: translateY(-6px); }
}

/* 2 · lista que se va marcando */
.esc-lista .linea {
  left: 30px;
  height: 13px;
  width: 128px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .34);
}
.esc-lista .l1 { top: 28px; }
.esc-lista .l2 { top: 57px; }
.esc-lista .l3 { top: 86px; }
.esc-lista .linea::after {
  content: "";
  position: absolute;
  left: -22px;
  top: -2px;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .6);
  border-radius: 4px;
  background: transparent;
  animation: escMarca 4.2s ease-in-out infinite;
}
.esc-lista .l2::after { animation-delay: .7s; }
.esc-lista .l3::after { animation-delay: 1.4s; }

@keyframes escMarca {
  0%, 20%   { background: transparent; border-color: rgba(255, 255, 255, .6); }
  32%, 88%  { background: var(--cyan); border-color: var(--cyan); }
  100%      { background: transparent; border-color: rgba(255, 255, 255, .6); }
}

/* 3 · un sobre que se reparte en carpetas */
.esc-correo .sobre {
  top: 20px;
  left: 50%;
  width: 46px;
  height: 32px;
  margin-left: -23px;
  border: 2px solid #fff;
  border-radius: 4px;
  background: rgba(255, 255, 255, .18);
  animation: escBaja 3.6s ease-in-out infinite;
}
.esc-correo .sobre::after {
  content: "";
  position: absolute;
  inset: 2px 2px auto;
  height: 14px;
  border-bottom: 2px solid #fff;
  transform: skewY(-12deg);
}
.esc-correo .carpeta {
  bottom: 20px;
  width: 42px;
  height: 28px;
  border-radius: 3px 6px 6px 6px;
  background: rgba(255, 255, 255, .30);
}
.esc-correo .c1 { left: 24px; }
.esc-correo .c2 { left: 50%; margin-left: -21px; background: var(--cyan); }
.esc-correo .c3 { right: 24px; }

@keyframes escBaja {
  0%, 10%   { transform: translateY(0); opacity: 1; }
  60%       { transform: translateY(34px); opacity: 1; }
  75%, 100% { transform: translateY(44px); opacity: 0; }
}

/* 4 · documento protegido con aviso */
.esc-escudo .doc {
  top: 24px;
  left: 50%;
  width: 56px;
  height: 72px;
  margin-left: -28px;
  border: 2px solid rgba(255, 255, 255, .75);
  border-radius: 4px;
  background: rgba(255, 255, 255, .12);
}
.esc-escudo .escudo {
  top: 46px;
  left: 50%;
  width: 34px;
  height: 38px;
  margin-left: -17px;
  background: var(--cyan);
  clip-path: polygon(50% 0, 100% 22%, 100% 62%, 50% 100%, 0 62%, 0 22%);
  animation: escLate 3s ease-in-out infinite;
}
.esc-escudo .alerta {
  top: 28px;
  right: 40px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffb4a2;
  animation: escParpadea 1.5s steps(1) infinite;
}
.esc-escudo .alerta::after {
  content: "!";
  position: absolute;
  inset: 0;
  color: #5a1200;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  line-height: 20px;
}

@keyframes escLate {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

@keyframes escParpadea {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: .25; }
}

/* 5 · llamada entrando */
.esc-telefono .auricular {
  top: 50%;
  left: 50%;
  width: 10px;
  height: 40px;
  margin: -20px 0 0 -5px;
  border-radius: 5px;
  background: #fff;
  transform: rotate(-45deg);
  animation: escTimbra 1.8s ease-in-out infinite;
}

.esc-telefono .auricular::before,
.esc-telefono .auricular::after {
  content: "";
  position: absolute;
  left: -7px;
  width: 24px;
  height: 15px;
  background: #fff;
}

.esc-telefono .auricular::before {
  top: -3px;
  border-radius: 12px 12px 3px 3px;
}

.esc-telefono .auricular::after {
  bottom: -3px;
  border-radius: 3px 3px 12px 12px;
}
.esc-telefono .onda {
  top: 50%;
  left: 50%;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  animation: escOnda 2.4s ease-out infinite;
}
.esc-telefono .o1 { width: 70px;  height: 70px;  margin: -35px 0 0 -35px; }
.esc-telefono .o2 { width: 104px; height: 104px; margin: -52px 0 0 -52px; animation-delay: .7s; }

@keyframes escTimbra {
  0%, 70%, 100% { transform: rotate(-38deg); }
  78%           { transform: rotate(-48deg); }
  86%           { transform: rotate(-28deg); }
}

@keyframes escOnda {
  0%   { opacity: .9; transform: scale(.55); }
  100% { opacity: 0;  transform: scale(1.15); }
}

/* 6 · lupa recorriendo un documento */
.esc-lupa .hoja {
  top: 22px;
  left: 50%;
  width: 72px;
  height: 86px;
  margin-left: -36px;
  border-radius: 4px;
  background:
    linear-gradient(rgba(255, 255, 255, .55) 2px, transparent 2px) 0 14px / 100% 16px repeat-y,
    rgba(255, 255, 255, .14);
  border: 2px solid rgba(255, 255, 255, .6);
}
.esc-lupa .lupa {
  top: 34px;
  left: 50%;
  width: 34px;
  height: 34px;
  margin-left: -10px;
  border: 4px solid var(--cyan);
  border-radius: 50%;
  background: rgba(0, 166, 178, .18);
  animation: escBusca 3.8s ease-in-out infinite;
}
.esc-lupa .lupa::after {
  content: "";
  position: absolute;
  right: -12px;
  bottom: -10px;
  width: 15px;
  height: 4px;
  border-radius: 3px;
  background: var(--cyan);
  transform: rotate(45deg);
}

@keyframes escBusca {
  0%, 100% { transform: translate(0, 0); }
  35%      { transform: translate(-34px, 16px); }
  70%      { transform: translate(-10px, 38px); }
}

/* 7 · voz dictando */
.esc-voz .micro {
  top: 40px;
  left: 42px;
  width: 22px;
  height: 38px;
  border-radius: 11px;
  background: #fff;
}
.esc-voz .micro::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 2px;
  height: 14px;
  margin-left: -1px;
  background: #fff;
}
.esc-voz .barra {
  bottom: 40px;
  width: 9px;
  border-radius: 5px;
  background: var(--cyan);
  animation: escVoz 1.1s ease-in-out infinite;
}
.esc-voz .v1 { left: 106px; height: 22px; }
.esc-voz .v2 { left: 124px; height: 40px; animation-delay: .15s; }
.esc-voz .v3 { left: 142px; height: 30px; animation-delay: .3s; }
.esc-voz .v4 { left: 160px; height: 48px; animation-delay: .45s; }

@keyframes escVoz {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}

/* 8 · albaranes que se apilan en una factura */
.esc-papeles .papel {
  top: 30px;
  left: 30px;
  width: 44px;
  height: 56px;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 3px;
  background: rgba(255, 255, 255, .16);
  animation: escApila 4s ease-in-out infinite;
}
.esc-papeles .p2 { animation-delay: .35s; }
.esc-papeles .p3 { animation-delay: .7s; }
.esc-papeles .factura {
  top: 26px;
  right: 32px;
  width: 50px;
  height: 64px;
  border-radius: 3px;
  background: var(--cyan);
}
.esc-papeles .factura::after {
  content: "";
  position: absolute;
  inset: 10px 8px auto;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 10px 0 rgba(255, 255, 255, .9), 0 20px 0 rgba(255, 255, 255, .9);
}

@keyframes escApila {
  0%, 12%   { transform: translateX(0) scale(1); opacity: 1; }
  62%       { transform: translateX(104px) scale(.86); opacity: 1; }
  74%, 100% { transform: translateX(104px) scale(.86); opacity: 0; }
}

/* 9 · barras del resumen */
.esc-barras .col {
  bottom: 26px;
  width: 22px;
  border-radius: 5px 5px 0 0;
  background: rgba(255, 255, 255, .55);
  transform-origin: bottom;
  animation: escCrece 3.4s ease-in-out infinite;
}
.esc-barras .g1 { left: 48px;  height: 34px; }
.esc-barras .g2 { left: 80px;  height: 54px; animation-delay: .2s; }
.esc-barras .g3 { left: 112px; height: 42px; animation-delay: .4s; background: var(--cyan); }
.esc-barras .g4 { left: 144px; height: 68px; animation-delay: .6s; }

@keyframes escCrece {
  0%, 100% { transform: scaleY(.25); }
  45%, 60% { transform: scaleY(1); }
}

/* ---- Pantallas estrechas ------------------------------------------ */

@media (max-width: 900px) {
  .ia-flujo {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* En vertical la chispa baja en lugar de cruzar */
  .ia-union {
    justify-self: center;
    width: 3px;
    height: 34px;
  }

  .ia-chispa {
    left: 50%;
    margin: 0 0 0 -6px;
    animation-name: iaChispaVertical;
  }

  @keyframes iaChispaVertical {
    0%   { top: 0;    opacity: 0; }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { top: 26px; opacity: 0; }
  }

}

/* Quien pide menos movimiento en su sistema, lo recibe quieto */
@media (prefers-reduced-motion: reduce) {
  .ia-malla,
  .ia-chispa,
  .ia-escena > span,
  .ia-escena > span::after {
    animation: none !important;
  }

  .ia-escena > span {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Las burbujas de chat se reparten como una conversacion ya escrita */
  .esc-chat .b2 { top: 55px; }
  .esc-chat .b3 { top: 84px; }

  /* La inclinacion del auricular es su forma, no su animacion */
  .esc-telefono .auricular {
    transform: rotate(-45deg) !important;
  }

  /* Sin el movimiento de apilado, los albaranes se colocan en abanico */
  .esc-papeles .p2 { left: 46px !important; top: 26px !important; }
  .esc-papeles .p3 { left: 62px !important; top: 22px !important; }
}

/* ====================================================================
   DEMOS ANIMADAS DEL "VER COMO FUNCIONA"  (02/10/2026)
   Seis escenas, cada una con su secuencia encadenada por retardos sobre
   un ciclo comun de 9 s. Van sobre el panel CLARO del modal.
   ==================================================================== */

/* Titular mas contenido que el de las slides con ilustracion: estas demos
   necesitan el alto para la escena. */
.slide-fraude h3,
.slide-telefono h3,
.slide-buscador h3,
.slide-partes h3,
.slide-albaranes h3,
.slide-resumen h3 {
  margin-bottom: 12px;
  font-size: clamp(26px, 3.2vw, 40px);
}

.slide-fraude > p,
.slide-telefono > p,
.slide-buscador > p,
.slide-partes > p,
.slide-albaranes > p,
.slide-resumen > p {
  font-size: clamp(16px, 1.6vw, 19px);
}

.demo {
  position: relative;
  margin-top: 26px;
}

.demo .service-result {
  margin-top: 22px;
}

/* Las piezas en absoluto no ocupan sitio, asi que hay que reservarselo para
   que el distintivo del final no se les monte encima. */
.demo-telefono .d-llamada { margin-bottom: 186px; }
.demo-albaranes { padding-top: 178px; }

/* ---- 1 · Factura falsa -------------------------------------------- */

.d-bandeja {
  position: relative;
  max-width: min(460px, 56%);
  padding: 16px 18px;
  overflow: hidden;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 10px 26px rgba(0, 31, 36, .10);
  animation: demoEntra 9s ease-in-out infinite;
}

.d-correo {
  display: block;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink);
}

.d-dominio {
  font-family: "Courier New", monospace;
  font-weight: 700;
}

/* La letra cambiada se marca sola a media escena */
.d-trampa {
  position: relative;
  font-style: normal;
  animation: demoMarca 9s ease-in-out infinite;
}

.d-escaner {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 34px;
  background: linear-gradient(rgba(0, 166, 178, 0), rgba(0, 166, 178, .45), rgba(0, 166, 178, 0));
  animation: demoEscanea 9s ease-in-out infinite;
}

.d-cotejo {
  max-width: 460px;
  margin-top: 14px;
}

.d-fila {
  display: block;
  margin-bottom: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 6px solid var(--line);
  background: var(--soft);
  font-family: "Courier New", monospace;
  font-size: 15px;
  opacity: 0;
  animation: demoEntra 9s ease-in-out infinite;
}

.d-fila b {
  margin-right: 8px;
  font-family: inherit;
  color: var(--muted);
}

.d-ok  { border-left-color: var(--green); animation-delay: 2.4s; }
.d-mal { border-left-color: #c2410c; animation-delay: 3.1s; }

.d-mal i {
  display: inline-block;
  padding: 0 3px;
  border-radius: 3px;
  background: #ffd9cc;
  color: #8a2c06;
  font-style: normal;
  font-weight: 700;
  animation: demoLate 1.2s ease-in-out 4s infinite;
}

.d-sello {
  position: absolute;
  top: 18px;
  right: 10px;
  padding: 12px 20px;
  border: 3px solid #c2410c;
  border-radius: 8px;
  color: #8a2c06;
  background: rgba(228, 111, 58, .14);
  font-weight: 700;
  font-size: 18px;
  opacity: 0;
  transform: rotate(-8deg) scale(1.6);
  animation: demoSello 9s ease-in-out infinite;
}

@keyframes demoEscanea {
  0%, 8%    { top: 0; opacity: 0; }
  12%       { opacity: 1; }
  26%       { top: calc(100% - 34px); opacity: 1; }
  30%, 100% { opacity: 0; }
}

@keyframes demoMarca {
  0%, 28%   { background: transparent; color: inherit; }
  34%, 92%  { background: #ffd9cc; color: #8a2c06; }
  96%, 100% { background: transparent; color: inherit; }
}

@keyframes demoSello {
  0%, 48%   { opacity: 0; transform: rotate(-8deg) scale(1.6); }
  56%       { opacity: 1; transform: rotate(-8deg) scale(.94); }
  60%, 92%  { opacity: 1; transform: rotate(-8deg) scale(1); }
  98%, 100% { opacity: 0; transform: rotate(-8deg) scale(1); }
}

/* ---- 2 · Telefono -------------------------------------------------- */

.d-llamada {
  position: relative;
  width: 120px;
  height: 120px;
  margin-bottom: 10px;
}

.d-auricular {
  position: absolute;
  top: 52px;
  left: 56px;
  width: 9px;
  height: 36px;
  border-radius: 5px;
  background: var(--brand);
  transform: rotate(-45deg);
  animation: demoTimbra 9s ease-in-out infinite;
}

.d-auricular::before,
.d-auricular::after {
  content: "";
  position: absolute;
  left: -6px;
  width: 21px;
  height: 13px;
  background: var(--brand);
}

.d-auricular::before { top: -3px;    border-radius: 11px 11px 3px 3px; }
.d-auricular::after  { bottom: -3px; border-radius: 3px 3px 11px 11px; }

.d-onda {
  position: absolute;
  top: 60px;
  left: 60px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
  animation: demoOnda 2s ease-out infinite;
}

.d-o1 { width: 62px;  height: 62px;  margin: -31px 0 0 -31px; }
.d-o2 { width: 100px; height: 100px; margin: -50px 0 0 -50px; animation-delay: .6s; }

.d-hora {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.d-dialogo {
  position: absolute;
  top: 0;
  left: 140px;
  width: min(330px, 42%);
}

.d-dice {
  display: block;
  max-width: 100%;
  margin-bottom: 10px;
  padding: 11px 15px;
  border-radius: 14px;
  background: var(--soft);
  border: 1px solid var(--line);
  font-size: 15px;
  opacity: 0;
  animation: demoEntra 9s ease-in-out infinite;
}

.d-d1 { animation-delay: 1.6s; }
.d-d2 {
  margin-left: auto;
  background: rgba(0, 112, 131, .12);
  border-color: var(--brand);
  color: var(--brand-dark);
  font-weight: 700;
  animation-delay: 2.8s;
}
.d-d3 { animation-delay: 4s; }

.d-ficha {
  position: absolute;
  top: 186px;
  left: 140px;
  width: 230px;
  padding: 16px;
  border: 2px solid var(--brand);
  border-radius: 10px;
  background: var(--paper);
  opacity: 0;
  animation: demoEntra 9s ease-in-out 5s infinite;
}

.d-ficha .d-linea {
  display: block;
  height: 8px;
  margin-bottom: 7px;
  border-radius: 4px;
  background: var(--line);
}

.d-ficha .d-linea:nth-child(2) { width: 80%; }
.d-ficha .d-linea:nth-child(3) { width: 60%; }

.d-ficha b {
  display: block;
  margin-top: 10px;
  color: var(--brand-dark);
  font-size: 15px;
}

@keyframes demoTimbra {
  0%, 44%, 100% { transform: rotate(-45deg); }
  6%            { transform: rotate(-58deg); }
  12%           { transform: rotate(-32deg); }
  18%           { transform: rotate(-58deg); }
  24%           { transform: rotate(-45deg); }
}

@keyframes demoOnda {
  0%   { opacity: .85; transform: scale(.5); }
  100% { opacity: 0;   transform: scale(1.15); }
}

/* ---- 3 · Buscador -------------------------------------------------- */

.d-caja-busqueda {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 520px;
  height: 52px;
  padding: 0 18px;
  border: 2px solid var(--brand);
  border-radius: 26px;
  background: var(--paper);
  overflow: hidden;
}

.d-escribe {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  font-size: 16px;
  color: var(--ink);
  animation: demoTeclea 9s steps(48, end) infinite;
}

.d-cursor {
  width: 2px;
  height: 22px;
  margin-left: 2px;
  background: var(--brand);
  animation: demoCursor .7s steps(1) infinite;
}

.d-pila {
  position: relative;
  height: 160px;
  margin-top: 22px;
}

.d-doc {
  position: absolute;
  top: 10px;
  width: 74px;
  height: 94px;
  border: 2px solid var(--line);
  border-radius: 5px;
  background:
    linear-gradient(var(--line) 2px, transparent 2px) 10px 16px / 54px 14px repeat-y,
    var(--paper);
  opacity: 0;
  animation: demoPasa 9s ease-in-out infinite;
}

.d-p1 { left: 0;    animation-delay: 3.2s; }
.d-p2 { left: 88px; animation-delay: 3.5s; }
.d-p3 { left: 176px; animation-delay: 3.8s; }
.d-p4 { left: 264px; animation-delay: 4.1s; }

.d-encontrado {
  left: 352px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  border-color: var(--brand);
  border-width: 3px;
  box-shadow: 0 12px 30px rgba(0, 112, 131, .32);
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 14px;
  animation: demoEncuentra 9s ease-in-out 4.6s infinite;
}

@keyframes demoTeclea {
  0%        { width: 0; }
  28%, 100% { width: 100%; }
}

@keyframes demoCursor {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes demoPasa {
  0%, 2%    { opacity: 0; transform: translateY(14px); }
  8%, 48%   { opacity: 1; transform: translateY(0); }
  58%, 100% { opacity: .25; transform: translateY(0); }
}

@keyframes demoEncuentra {
  0%, 2%    { opacity: 0; transform: translateY(14px) scale(.9); }
  10%       { opacity: 1; transform: translateY(-10px) scale(1.06); }
  16%, 92%  { opacity: 1; transform: translateY(-10px) scale(1); }
  98%, 100% { opacity: 0; transform: translateY(-10px) scale(1); }
}

/* ---- 4 · Partes dictados ------------------------------------------- */

.d-audio {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 330px;
  height: 64px;
  padding: 0 70px 0 20px;
  border-radius: 32px;
  background: var(--soft);
  border: 2px solid var(--line);
}

.d-audio .d-b {
  width: 6px;
  height: 30px;
  border-radius: 3px;
  background: var(--brand);
  transform-origin: center;
  animation: demoVoz 1.1s ease-in-out infinite;
}

.d-audio .d-b:nth-child(2)  { animation-delay: .08s; }
.d-audio .d-b:nth-child(3)  { animation-delay: .16s; }
.d-audio .d-b:nth-child(4)  { animation-delay: .24s; }
.d-audio .d-b:nth-child(5)  { animation-delay: .32s; }
.d-audio .d-b:nth-child(6)  { animation-delay: .40s; }
.d-audio .d-b:nth-child(7)  { animation-delay: .48s; }
.d-audio .d-b:nth-child(8)  { animation-delay: .56s; }
.d-audio .d-b:nth-child(9)  { animation-delay: .64s; }
.d-audio .d-b:nth-child(10) { animation-delay: .72s; }
.d-audio .d-b:nth-child(11) { animation-delay: .80s; }
.d-audio .d-b:nth-child(12) { animation-delay: .88s; }

.d-seg {
  position: absolute;
  right: 20px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
}

.d-parte {
  margin-top: 20px;
  max-width: 520px;
}

.d-r {
  display: block;
  margin-bottom: 9px;
  padding: 11px 15px;
  border-radius: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 15px;
  opacity: 0;
  animation: demoEntra 9s ease-in-out infinite;
}

.d-r b { color: var(--brand-dark); }

.d-r1 { animation-delay: 2.2s; }
.d-r2 { animation-delay: 3.2s; }
.d-r3 { animation-delay: 4.2s; }

.d-firma {
  display: inline-block;
  margin-top: 4px;
  padding: 9px 18px;
  border-radius: 20px;
  background: rgba(139, 189, 63, .18);
  border: 2px solid var(--green);
  color: #35550f;
  font-weight: 700;
  font-size: 15px;
  opacity: 0;
  animation: demoEntra 9s ease-in-out 5.2s infinite;
}

@keyframes demoVoz {
  0%, 100% { transform: scaleY(.3); }
  50%      { transform: scaleY(1.5); }
}

/* ---- 5 · Albaranes a facturas -------------------------------------- */

.demo-albaranes .d-monton,
.demo-albaranes .d-salida {
  position: absolute;
  top: 10px;
  width: 210px;
  height: 150px;
}

.demo-albaranes .d-monton { left: 0; }
.demo-albaranes .d-salida { left: 300px; }

.d-alb,
.d-fact {
  position: absolute;
  width: 72px;
  height: 94px;
  border-radius: 4px;
  border: 2px solid var(--line);
  background:
    linear-gradient(var(--line) 2px, transparent 2px) 9px 14px / 52px 13px repeat-y,
    var(--paper);
}

.d-alb {
  left: 20px;
  top: 10px;
  animation: demoApila 9s ease-in-out infinite;
}

.d-a1 { animation-delay: .2s; }
.d-a2 { animation-delay: .5s; }
.d-a3 { animation-delay: .8s; }
.d-a4 { animation-delay: 1.1s; }
.d-a5 { animation-delay: 1.4s; }

.d-fact {
  top: 10px;
  border-color: var(--brand);
  background:
    linear-gradient(rgba(0, 112, 131, .35) 2px, transparent 2px) 9px 14px / 52px 13px repeat-y,
    rgba(0, 112, 131, .10);
  opacity: 0;
  animation: demoEntra 9s ease-in-out infinite;
}

.d-f1 { left: 0;   animation-delay: 3.4s; }
.d-f2 { left: 30px; animation-delay: 3.7s; }
.d-f3 { left: 60px; animation-delay: 4s; }

.d-cuenta {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 7px 14px;
  border-radius: 20px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.d-cuenta-fin {
  background: var(--brand);
  opacity: 0;
  animation: demoEntra 9s ease-in-out 4.4s infinite;
}

.d-flecha {
  position: absolute;
  top: 66px;
  left: 222px;
  width: 66px;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}

.d-flecha::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--brand);
  animation: demoViaja 2s ease-in-out infinite;
}

@keyframes demoApila {
  0%, 4%    { transform: translate(0, 24px); opacity: 0; }
  12%, 28%  { transform: translate(0, 0); opacity: 1; }
  44%       { transform: translate(14px, -6px) rotate(-5deg); opacity: 1; }
  58%, 100% { transform: translate(260px, -6px) rotate(-5deg); opacity: 0; }
}

@keyframes demoViaja {
  0%   { left: 0;    opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 52px; opacity: 0; }
}

/* ---- 6 · Resumen diario -------------------------------------------- */

.d-grafico {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 140px;
  padding-bottom: 26px;
}

.d-col {
  position: relative;
  width: 40px;
  border-radius: 6px 6px 0 0;
  background: var(--brand);
  transform-origin: bottom;
  animation: demoCrece 9s ease-in-out infinite;
}

.d-col i {
  position: absolute;
  bottom: -24px;
  left: 0;
  width: 100%;
  color: var(--muted);
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.d-c1 { height: 54px;  animation-delay: .1s; }
.d-c2 { height: 78px;  animation-delay: .25s; }
.d-c3 { height: 30px;  animation-delay: .4s; }
.d-c4 { height: 86px;  animation-delay: .55s; }
.d-c5 { height: 66px;  animation-delay: .7s; }
.d-c6 { height: 74px;  animation-delay: .85s; }

/* La tienda que se sale de lo normal se marca con borde y aviso, no con color */
.d-rara {
  background: #e46f3a;
}

.d-rara::after {
  content: "\26A0";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -11px;
  font-size: 20px;
  opacity: 0;
  animation: demoAvisa 9s ease-in-out 2.6s infinite;
}

.d-correo-res {
  max-width: 440px;
  margin-top: 10px;
  padding: 16px 18px;
  border: 2px solid var(--brand);
  border-radius: 10px;
  background: var(--paper);
  opacity: 0;
  animation: demoEntra 9s ease-in-out 3.6s infinite;
}

.d-correo-res b {
  display: block;
  margin-bottom: 10px;
  color: var(--brand-dark);
  font-size: 15px;
}

.d-t {
  display: block;
  margin-bottom: 6px;
  padding-left: 20px;
  position: relative;
  font-size: 15px;
  opacity: 0;
  animation: demoEntra 9s ease-in-out infinite;
}

.d-t::before {
  content: "\2022";
  position: absolute;
  left: 4px;
  color: var(--brand);
  font-weight: 700;
}

.d-t1 { animation-delay: 4.2s; }
.d-t2 { animation-delay: 4.8s; }
.d-t2::before { content: "\26A0"; font-size: 13px; }

@keyframes demoCrece {
  0%, 4%    { transform: scaleY(0); }
  18%, 92%  { transform: scaleY(1); }
  100%      { transform: scaleY(1); }
}

@keyframes demoAvisa {
  0%, 4%    { opacity: 0; transform: translateY(8px); }
  12%, 80%  { opacity: 1; transform: translateY(0); }
  90%, 100% { opacity: 0; }
}

/* ---- Comunes ------------------------------------------------------- */

@keyframes demoEntra {
  0%, 4%    { opacity: 0; transform: translateY(12px); }
  12%, 90%  { opacity: 1; transform: translateY(0); }
  97%, 100% { opacity: 0; transform: translateY(-8px); }
}

@keyframes demoLate {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.22); }
}

@media (max-width: 760px) {
  .demo-telefono .d-llamada { margin-bottom: 14px; }

  .demo-albaranes { padding-top: 0; }

  .d-bandeja { max-width: 100%; }

  .d-sello {
    position: static;
    display: inline-block;
    margin-top: 14px;
  }

  .d-dialogo { position: static; width: 100%; margin-top: 14px; }

  .d-ficha { position: static; width: 100%; margin-top: 14px; }

  .demo-albaranes .d-monton,
  .demo-albaranes .d-salida { position: static; width: 100%; height: 130px; }

  .demo-albaranes .d-salida { margin-top: 48px; }

  .d-flecha { display: none; }

  .d-pila { height: 130px; overflow: hidden; }
}

/* Si el sistema pide menos movimiento, la escena se ve quieta y completa */
@media (prefers-reduced-motion: reduce) {
  .demo *,
  .demo *::before,
  .demo *::after {
    animation: none !important;
    opacity: 1 !important;
  }

  .d-escaner { display: none; }

  .d-auricular { transform: rotate(-45deg) !important; }

  .d-alb { position: static; display: inline-block; margin-right: 6px; }

  .d-sello { transform: rotate(-8deg) !important; }

  .d-escribe { width: auto !important; }
}

/* ---- Preguntas frecuentes ----------------------------------------- */

.faq-lista {
  max-width: 880px;
  margin: 0 auto;
}

.faq-item {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  overflow: hidden;
}

.faq-item summary {
  position: relative;
  padding: 20px 56px 20px 22px;
  color: var(--brand-dark);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* El signo cambia de + a - : se distingue por la forma, no por el color */
.faq-item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 20px;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  line-height: 27px;
  text-align: center;
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item summary:hover {
  background: var(--soft);
}

.faq-item summary:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: -3px;
}

.faq-item p {
  margin: 0;
  padding: 0 22px 22px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
}

/* ---- Pagina del fraude BEC ---------------------------------------- */

.ia-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 22px !important;
}

.ia-saber-mas {
  color: #9fd9df !important;
  font-size: 15px;
  font-weight: 700;
  text-decoration: underline;
}

.ia-saber-mas:hover {
  color: #fff !important;
}

.senales-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
}

.senal {
  padding: 24px;
  border: 1px solid var(--line);
  border-left: 6px solid var(--brand);
  border-radius: 10px;
  background: var(--paper);
}

.senal h3 {
  margin: 0 0 10px;
  color: var(--brand-dark);
  font-size: 19px;
  line-height: 1.3;
}

.senal p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.caso-cuerpo {
  max-width: 820px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.7;
}

.caso-cuerpo code {
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--soft);
  border: 1px solid var(--line);
  font-size: 16px;
}

.caso-cuerpo code strong {
  padding: 0 2px;
  border-radius: 3px;
  background: #ffd9cc;
  color: #8a2c06;
}

#contacto-bec .button {
  margin: 0 8px 10px;
}