/* Portada de alphateklab (Med, Food y alphatend) y la página de Food. Sobre los tokens de atk.css; la cabecera viene
   de citas.css. Clases propias: portada-*, app*, vidrio*, mini*, producto*, vitrina*, marco*, accion*, ej-* (pantallas
   de ejemplo en HTML), caso* y sm-* (página de Food; con prefijo porque citas.css ya usa .seccion, .pasos y .preguntas).
   Todo lo que se mueve se queda quieto con «reducir movimiento». */

.portada {
  background: var(--papel);
  color: var(--tinta);
}

/* ── íconos de app: el glifo en blanco sobre el degradado del producto, con brillo de vidrio arriba ── */
.app {
  --g1: #4f46e5;
  --g2: #7c3aed;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, var(--g1), var(--g2));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    inset 0 -3px 8px rgb(0 0 0 / 0.18),
    0 12px 24px -12px var(--g2);
}
.app::after {
  content: "";
  position: absolute;
  inset: 0 0 52% 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.3), transparent);
  pointer-events: none;
}
.app .ico {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
}
.app--grande {
  width: 60px;
  height: 60px;
  border-radius: 18px;
}
.app--grande .ico {
  width: 32px;
  height: 32px;
}
.app--chica {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  vertical-align: middle;
}
.app--chica .ico {
  width: 20px;
  height: 20px;
}
.app--med {
  --g1: #14b8a6;
  --g2: #0e7490;
}
.app--food {
  --g1: #f59e0b;
  --g2: #e11d48;
}
.app--alphatend {
  --g1: #3b82f6;
  --g2: #4f46e5;
}
.app--sobremesa {
  --g1: #fb923c;
  --g2: #e11d48;
}
.app--racha {
  --g1: #ec4899;
  --g2: #7c3aed;
}
.app--medida {
  --g1: #22d3ee;
  --g2: #2563eb;
}

/* ── héroe: fondo oscuro con luces de color y vidrios encima ── */
.portada-heroe {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(72px, 10vw, 128px) clamp(64px, 8vw, 104px);
  background: #0b0f1f;
  color: #fff;
  text-align: center;
}
.portada-heroe--producto {
  padding-block: clamp(64px, 8vw, 112px) clamp(56px, 7vw, 96px);
}
.portada-heroe__luces {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.portada-heroe__luces span {
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--c), transparent);
  opacity: 0.55;
  animation: portada-deriva 24s ease-in-out infinite alternate;
}
.portada-heroe__luces span:nth-child(1) {
  --c: #4f46e5;
  left: -18vmax;
  top: -30vmax;
}
.portada-heroe__luces span:nth-child(2) {
  --c: #0d9488;
  right: -22vmax;
  top: -14vmax;
  animation-delay: -8s;
}
.portada-heroe__luces span:nth-child(3) {
  --c: #7c3aed;
  left: 8vmax;
  bottom: -40vmax;
  animation-delay: -14s;
}
.portada-heroe__luces span:nth-child(4) {
  --c: #f59e0b;
  right: 4vmax;
  bottom: -46vmax;
  opacity: 0.32;
  animation-delay: -4s;
}
@keyframes portada-deriva {
  to {
    transform: translate3d(5vmax, 4vmax, 0) scale(1.08);
  }
}
.portada-heroe__marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 var(--e-4);
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-l);
}
.portada-heroe__marca > span:last-child {
  font-family: var(--f-texto);
  font-weight: 600;
  font-size: var(--t-xs);
  color: rgb(255 255 255 / 0.8);
}
.portada-heroe__titulo {
  margin: 0 auto;
  max-width: 14ch;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(2.75rem, 7.6vw, 6.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
  color: #fff;
}
.portada-heroe--producto .portada-heroe__titulo {
  max-width: 22ch;
  font-size: clamp(2.375rem, 6vw, 4.75rem);
}
.portada-heroe__resalte {
  display: block;
  background: linear-gradient(90deg, #c7d2fe 0%, #5eead4 55%, #fde68a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.portada-heroe__bajada {
  margin: var(--e-6) auto 0;
  max-width: 56ch;
  color: rgb(255 255 255 / 0.84);
  font-size: var(--t-l);
  line-height: 1.5;
  text-wrap: pretty;
}
.portada-heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-3);
  margin-top: var(--e-6);
}
.portada-heroe__vidrios {
  list-style: none;
  margin: var(--e-7) auto 0;
  padding: 0;
  max-width: 1120px;
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  text-align: left;
}

/* Vidrio: translúcido sobre las luces, con borde y brillo arriba; cada producto, su luz en la esquina. */
.vidrio {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 24px 22px;
  border-radius: 24px;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.17) 0%, rgb(255 255 255 / 0.07) 55%, rgb(255 255 255 / 0.04) 100%);
  border: 1px solid rgb(255 255 255 / 0.24);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    inset 0 -20px 32px -28px rgb(255 255 255 / 0.35),
    0 28px 56px -28px rgb(0 0 0 / 0.7);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  transition:
    transform 0.28s var(--ease-salida, ease),
    border-color 0.28s ease,
    background 0.28s ease;
}
.vidrio::after {
  content: "";
  position: absolute;
  right: -34%;
  bottom: -46%;
  width: 90%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--luz), transparent);
  opacity: 0.5;
  pointer-events: none;
  z-index: -1;
}
.vidrio--med {
  --luz: #2dd4bf;
}
.vidrio--food,
.vidrio--sobremesa {
  --luz: #f59e0b;
}
.vidrio--racha {
  --luz: #f472b6;
}
.vidrio--alphatend,
.vidrio--medida {
  --luz: #60a5fa;
}
.vidrio__brillo {
  position: absolute;
  inset: -45% -10% auto -10%;
  height: 90%;
  background: radial-gradient(60% 50% at 28% 22%, rgb(255 255 255 / 0.3), transparent 70%);
  opacity: 0.65;
  pointer-events: none;
  transition:
    transform 0.45s var(--ease-salida, ease),
    opacity 0.45s ease;
}
.vidrio__cabeza {
  display: flex;
  align-items: center;
  gap: 14px;
}
.vidrio__cabeza > span:last-child {
  display: grid;
  gap: 2px;
}
.vidrio__nombre {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.vidrio__sector {
  color: rgb(255 255 255 / 0.8);
  font-size: var(--t-xs);
  font-weight: 600;
}
.vidrio__resumen {
  margin-top: var(--e-4);
  color: rgb(255 255 255 / 0.94);
  font-size: var(--t-s);
  line-height: 1.4;
}
.vidrio__ir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: var(--e-4);
  font-weight: 600;
  font-size: var(--t-s);
}
.vidrio__ir .ico {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .vidrio:hover {
    transform: translateY(-5px);
    border-color: rgb(255 255 255 / 0.42);
    background: linear-gradient(160deg, rgb(255 255 255 / 0.23) 0%, rgb(255 255 255 / 0.09) 55%, rgb(255 255 255 / 0.05) 100%);
  }
  .vidrio:hover .vidrio__brillo {
    transform: translateX(10%);
    opacity: 1;
  }
  .vidrio:hover .vidrio__ir .ico {
    transform: translateX(4px);
  }
}
.vidrio:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Miniaturas dentro de los vidrios: lo que hace cada producto, de un vistazo. */
.mini {
  display: grid;
  gap: 8px;
  margin-top: var(--e-4);
  padding: 12px 14px;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.14);
}
.mini__fila {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mini--med .ico {
  width: 16px;
  height: 16px;
  color: #5eead4;
}
.mini__onda {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  height: 22px;
}
.mini__onda i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: #5eead4;
  transform-origin: center;
  animation: mini-onda 1.1s ease-in-out infinite;
}
.mini__onda i:nth-child(3n) {
  animation-delay: -0.3s;
}
.mini__onda i:nth-child(3n + 1) {
  animation-delay: -0.6s;
}
.mini__onda i:nth-child(4n) {
  animation-duration: 0.9s;
}
@keyframes mini-onda {
  0%,
  100% {
    transform: scaleY(0.3);
  }
  50% {
    transform: scaleY(1);
  }
}
.mini__linea {
  height: 7px;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.3);
}
.mini__linea--corta {
  width: 62%;
}
.mini__pastilla {
  padding: 2px 9px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.16);
  font-size: 0.75rem;
  font-weight: 700;
}
.mini__pastilla--nuevo {
  background: #fbbf24;
  color: #1c1406;
}
.mini__sellos {
  display: flex;
  gap: 6px;
}
.mini__sellos i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 0.6);
}
.mini__sellos i.lleno {
  background: #fbbf24;
  border-color: #fbbf24;
}
.mini--alphatend {
  gap: 7px;
}
.mini__barra {
  width: var(--l);
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #60a5fa, #a78bfa);
}

/* ── un producto por sección: ícono de app, texto y su vitrina con resplandor ── */
.producto {
  border-top: 1px solid var(--linea);
  padding-block: var(--e-seccion);
  scroll-margin-top: 72px;
  overflow: hidden;
}
.portada-heroe + .producto {
  border-top: 0;
}
.producto__fila {
  display: grid;
  gap: var(--e-7);
  align-items: center;
}
@media (min-width: 920px) {
  .producto__fila {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--e-8);
  }
  .producto--al-reves .producto__fila {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }
  .producto--al-reves .producto__texto {
    order: 2;
  }
}
.producto__cabeza {
  display: flex;
  align-items: center;
  gap: 14px;
}
.producto__sector,
.sm-seccion__antetitulo {
  margin: 0;
  color: var(--acento);
  font-weight: 600;
  font-size: var(--t-s);
}
.producto__nombre {
  margin: var(--e-4) 0 0;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-4xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.producto__firma {
  margin-left: 0.35em;
  font-family: var(--f-texto);
  font-weight: 600;
  font-size: var(--t-s);
  letter-spacing: 0;
  color: var(--tinta-3);
  white-space: nowrap;
}
.producto__frase {
  margin: var(--e-4) 0 0;
  font-size: var(--t-l);
  font-weight: 600;
  line-height: 1.4;
  text-wrap: balance;
}
.producto__puntos,
.sm-funciones {
  list-style: none;
  margin: var(--e-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--e-3);
  color: var(--tinta-2);
  line-height: 1.5;
}
.producto__puntos li,
.sm-funciones li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--e-3);
}
.producto__puntos .ico,
.sm-funciones .ico {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--acento);
}
.producto__nota {
  margin: var(--e-5) 0 0;
  padding-left: var(--e-4);
  border-left: 3px solid var(--apoyo);
  color: var(--tinta-2);
  font-size: var(--t-s);
}
.producto__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin: var(--e-6) 0 0;
}

/* Vitrina: el visual de cada producto, con un resplandor de su color detrás. */
.vitrina {
  position: relative;
  isolation: isolate;
  margin: 0;
}
.vitrina::before {
  content: "";
  position: absolute;
  inset: -10% -8%;
  z-index: -1;
  border-radius: 48px;
  background:
    radial-gradient(55% 55% at 25% 30%, var(--v1), transparent 70%),
    radial-gradient(50% 50% at 78% 72%, var(--v2), transparent 70%);
  filter: blur(6px);
}
.vitrina--med {
  --v1: rgb(20 184 166 / 0.38);
  --v2: rgb(79 70 229 / 0.3);
}
.vitrina--food {
  --v1: rgb(245 158 11 / 0.4);
  --v2: rgb(225 29 72 / 0.28);
}
.vitrina--racha {
  --v1: rgb(236 72 153 / 0.36);
  --v2: rgb(124 58 237 / 0.36);
}
.vitrina--alphatend {
  --v1: rgb(59 130 246 / 0.36);
  --v2: rgb(167 139 250 / 0.32);
}
.vitrina figcaption,
.caso figcaption {
  margin-top: var(--e-3);
  color: var(--tinta-3);
  font-size: var(--t-xs);
}

/* Marco de navegador para las capturas. */
.marco {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--linea);
  background: var(--papel);
  box-shadow: 0 32px 64px -32px rgb(20 25 34 / 0.5);
}
.marco__barra {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  background: var(--papel-2);
  border-bottom: 1px solid var(--linea);
}
.marco__barra i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f87171;
}
.marco__barra i:nth-child(2) {
  background: #fbbf24;
}
.marco__barra i:nth-child(3) {
  background: #34d399;
}
.producto__captura {
  display: block;
  width: 100%;
  height: auto;
}

/* ── botones: el principal con degradado y flecha; el secundario, claro; el de vidrio, sobre los héroes ── */
.accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 12px 24px;
  border-radius: 14px;
  font-weight: 600;
  font-size: var(--t-m);
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 0.2s var(--ease-salida, ease),
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}
.accion .ico {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}
button.accion {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}
.accion--principal {
  color: #fff;
  background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.28),
    0 12px 28px -12px rgb(79 70 229 / 0.7);
}
.accion--secundaria {
  color: var(--tinta);
  background: var(--papel-2);
  border: 1px solid var(--linea-fuerte);
}
.accion--vidrio {
  color: #fff;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.3);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}
@media (hover: hover) and (pointer: fine) {
  .accion--principal:hover {
    transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.32),
      0 18px 36px -14px rgb(79 70 229 / 0.8);
  }
  .accion:hover .ico {
    transform: translateX(4px);
  }
  .accion--secundaria:hover {
    background: var(--papel-3);
  }
  .accion--vidrio:hover {
    background: rgb(255 255 255 / 0.2);
  }
}
.accion:focus-visible {
  outline: 3px solid var(--foco, #4f46e5);
  outline-offset: 3px;
}
.portada-heroe .accion:focus-visible,
.sm-medida .accion:focus-visible {
  outline-color: #fff;
}

/* ── pantallas de ejemplo en HTML ── */
.ej {
  position: relative;
  border-radius: 22px;
  padding: clamp(20px, 4vw, 36px);
  background: linear-gradient(135deg, color-mix(in oklab, #f59e0b 16%, var(--papel)), color-mix(in oklab, #e11d48 14%, var(--papel)));
}
.ej p {
  margin: 0;
}
.ej--food {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
  grid-template-areas:
    "cel barra"
    "cel racha";
  align-items: start;
}
.ej--food .ej-cel {
  grid-area: cel;
  align-self: center;
}
.ej--food .ej-barra {
  grid-area: barra;
}
.ej--food .ej-racha {
  grid-area: racha;
}
@media (max-width: 559px) {
  .ej--food {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "cel" "barra" "racha";
  }
}
.ej-cel,
.ej-barra {
  border-radius: 16px;
  padding: var(--e-5);
  background: var(--papel);
  border: 1px solid var(--linea);
  box-shadow: 0 20px 44px -26px rgb(20 25 34 / 0.55);
}
.ej-cel {
  border-radius: 26px;
}
.ej-cel__mesa span,
.ej-insignia {
  display: inline-block;
  border-radius: 6px;
  padding: 2px 8px;
  background: var(--senal-suave);
  color: var(--senal-fuerte);
  font-size: var(--t-xs);
  font-weight: 700;
}
.ej-cel__titulo {
  margin-top: var(--e-3) !important;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-l);
}
.ej-cel__lista {
  list-style: none;
  margin: var(--e-3) 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: var(--t-xs);
}
.ej-cel__lista li {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
}
.ej-cel__nota {
  margin-top: var(--e-2) !important;
  color: var(--tinta-3);
  font-size: 0.75rem;
  text-align: center;
}
.ej-barra__cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--tinta-3);
  font-size: var(--t-xs);
  font-weight: 600;
}
.ej-barra__mesa {
  margin-top: var(--e-3) !important;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-2xl);
  line-height: 1.1;
}
.ej-barra__mesa span {
  margin-left: 6px;
  font-family: var(--f-texto);
  font-weight: 400;
  font-size: var(--t-xs);
  color: var(--tinta-3);
  white-space: nowrap;
}
.ej-barra__lista {
  list-style: none;
  margin: var(--e-3) 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: var(--t-m);
}
.ej-barra__lista span {
  display: block;
  padding-left: 26px;
  color: var(--tinta-3);
  font-size: var(--t-xs);
}
.ej-barra__acciones {
  display: flex;
  gap: var(--e-2);
  margin-top: var(--e-4) !important;
}
.ej-boton {
  flex: 1;
  white-space: nowrap;
  border-radius: 10px;
  padding: 9px 10px;
  text-align: center;
  font-size: var(--t-xs);
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #6d28d9);
}
.ej-boton--ancho {
  margin-top: var(--e-4) !important;
}
.ej-boton--linea {
  background: transparent;
  color: var(--tinta);
  border: 1px solid var(--linea-fuerte);
}

/* Racha: la tarjeta con su degradado (rosa a violeta, el blanco contrasta), inclinada y con otra detrás. */
.ej--racha {
  display: grid;
  justify-items: center;
  padding-block: clamp(36px, 5vw, 56px) clamp(64px, 8vw, 84px);
  background: linear-gradient(135deg, color-mix(in oklab, #ec4899 16%, var(--papel)), color-mix(in oklab, #7c3aed 20%, var(--papel)));
}
.ej--racha::before {
  content: "";
  position: absolute;
  width: min(62%, 330px);
  aspect-ratio: 1.55;
  top: clamp(26px, 4vw, 44px);
  border-radius: 22px;
  background: linear-gradient(150deg, #fbbf24, #f97316);
  transform: rotate(7deg) translateX(14%);
  opacity: 0.55;
}
.ej-racha {
  position: relative;
  width: min(100%, 360px);
  border-radius: 22px;
  padding: var(--e-5) var(--e-6) var(--e-6);
  background: linear-gradient(150deg, #db2777 0%, #7c3aed 58%, #4c1d95 100%);
  color: #fff;
  box-shadow: 0 30px 60px -26px rgb(124 58 237 / 0.75);
}
.ej--racha .ej-racha {
  width: min(86%, 360px);
  transform: rotate(-3deg);
}
.ej-racha__cabeza {
  display: flex;
  justify-content: space-between;
  gap: var(--e-2);
  font-size: var(--t-s);
  font-weight: 600;
}
.ej-racha__marca {
  font-family: var(--f-titulo);
  font-weight: 700;
}
.ej-racha__cuenta {
  margin-top: var(--e-5) !important;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 2.75rem;
  line-height: 1;
}
.ej-racha__cuenta span {
  font-family: var(--f-texto);
  font-weight: 400;
  font-size: var(--t-s);
}
.ej-racha__sellos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: var(--e-5) !important;
}
.ej-racha__sellos i {
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 0.7);
}
.ej-racha__sellos i.lleno {
  background: #fff;
  border-color: #fff;
  box-shadow: inset 0 -3px 0 rgb(124 58 237 / 0.25);
}
.ej-racha__premio {
  margin-top: var(--e-5) !important;
  font-size: var(--t-s);
}
.ej-racha--chica {
  padding: 16px 18px;
}
.ej-racha--chica .ej-racha__cuenta {
  margin-top: 10px !important;
  font-size: 2rem;
}
.ej-racha--chica .ej-racha__sellos {
  gap: 6px;
  margin-top: 12px !important;
}
.ej-aviso {
  position: absolute;
  bottom: clamp(18px, 3vw, 28px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--papel);
  border: 1px solid var(--linea);
  box-shadow: 0 14px 30px -18px rgb(20 25 34 / 0.6);
  font-size: var(--t-xs);
  font-weight: 600;
  animation: flotar 3.2s ease-in-out infinite;
}
.ej-aviso .ico {
  width: 16px;
  height: 16px;
  color: var(--acento);
}
@keyframes flotar {
  50% {
    transform: translateY(-6px);
  }
}

/* ── el caso real: tableta y celular sobre un panel de color ── */
.caso {
  position: relative;
  isolation: isolate;
  margin: var(--e-7) 0 0;
  padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 48px) clamp(30px, 4vw, 40px);
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(135deg, #fb923c 0%, #e11d48 48%, #7c3aed 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.34fr);
  grid-template-areas:
    "etiqueta etiqueta"
    "tableta tel"
    "pie pie";
  gap: var(--e-5) var(--e-4);
  align-items: end;
}
.caso::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto auto;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.35), transparent);
  z-index: -1;
}
.caso__etiqueta {
  grid-area: etiqueta;
  justify-self: start;
  padding: 6px 14px;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  font-size: var(--t-s);
  background: rgb(255 255 255 / 0.18);
  border: 1px solid rgb(255 255 255 / 0.35);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.caso__tableta,
.caso__tel {
  background: #0b0f1f;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.12),
    0 36px 72px -30px rgb(0 0 0 / 0.65);
}
.caso__tableta {
  grid-area: tableta;
  padding: 12px;
  border-radius: 22px;
}
.caso__tel {
  grid-area: tel;
  padding: 8px;
  border-radius: 30px;
  margin-bottom: -6%;
  transform: rotate(3deg);
}
.caso img {
  display: block;
  width: 100%;
  height: auto;
}
.caso__tableta img {
  border-radius: 12px;
}
.caso__tel img {
  border-radius: 24px;
}
.caso figcaption {
  grid-area: pie;
  margin-top: var(--e-2);
  color: rgb(255 255 255 / 0.95);
  font-size: var(--t-s);
}
@media (max-width: 640px) {
  .caso {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "etiqueta" "tel" "tableta" "pie";
    justify-items: center;
  }
  .caso__tel {
    width: 62%;
    margin-bottom: 0;
    transform: none;
  }
}

/* ── página de Food: secciones con color, pasos vivos, a la medida y preguntas ── */
.sm-seccion {
  --p1: #4f46e5;
  --p2: #7c3aed;
  border-top: 1px solid var(--linea);
  padding-block: var(--e-seccion);
  scroll-margin-top: 72px;
  /* El resplandor de las vitrinas no se sale por los lados en el teléfono (como en .producto de la portada). */
  overflow-x: hidden; /* Safari 15 y anteriores */
  overflow-x: clip;
}
.portada-heroe + .sm-seccion {
  border-top: 0;
}
.sm-seccion--sobremesa {
  --p1: #fb923c;
  --p2: #e11d48;
  background: linear-gradient(180deg, color-mix(in oklab, #fb923c 12%, var(--papel)) 0%, var(--papel) 70%);
}
.sm-seccion--racha {
  --p1: #ec4899;
  --p2: #7c3aed;
  background: linear-gradient(180deg, color-mix(in oklab, #ec4899 11%, var(--papel)) 0%, var(--papel) 70%);
}
.sm-seccion__titulo {
  margin: var(--e-4) 0 0;
  max-width: 24ch;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-3xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.sm-seccion__bajada {
  margin: var(--e-4) 0 0;
  max-width: 62ch;
  color: var(--tinta-2);
  font-size: var(--t-l);
  line-height: 1.5;
}
.sm-seccion__fila {
  display: grid;
  gap: var(--e-7);
  align-items: center;
  margin-top: var(--e-7);
}
@media (min-width: 920px) {
  .sm-seccion__fila {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--e-8);
  }
}

/* Pasos: tarjetas con número en degradado, ícono y barra de color; se elevan y aparecen al bajar. */
.sm-pasos {
  list-style: none;
  counter-reset: paso;
  margin: var(--e-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.sm-seccion__fila .sm-pasos {
  margin-top: 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.sm-pasos li {
  position: relative;
  counter-increment: paso;
  overflow: hidden;
  padding: 26px 22px 22px;
  border-radius: 22px;
  background: var(--papel);
  border: 1px solid var(--linea);
  box-shadow: 0 20px 44px -30px rgb(20 25 34 / 0.45);
  transition:
    transform 0.25s var(--ease-salida, ease),
    box-shadow 0.25s ease;
}
.sm-pasos li::before {
  content: counter(paso);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #fff;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.125rem;
  background: linear-gradient(145deg, var(--p1), var(--p2));
  box-shadow: 0 12px 22px -12px var(--p2);
}
.sm-pasos li::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--p1), var(--p2));
}
.sm-pasos__icono {
  position: absolute;
  top: 24px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--p2);
  background: color-mix(in oklab, var(--p1) 16%, var(--papel));
}
.sm-pasos__icono .ico {
  width: 22px;
  height: 22px;
}
.sm-pasos h3 {
  margin: var(--e-4) 0 0;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: var(--t-l);
}
.sm-pasos p {
  margin: var(--e-2) 0 0;
  color: var(--tinta-2);
  line-height: 1.5;
}
@media (hover: hover) and (pointer: fine) {
  .sm-pasos li:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 52px -28px color-mix(in oklab, var(--p2) 55%, transparent);
  }
}
.sm-funciones {
  margin-top: 0;
  gap: var(--e-4);
}
.sm-funciones--rejilla {
  margin-top: var(--e-7);
  gap: var(--e-5) var(--e-7);
}
@media (min-width: 760px) {
  .sm-funciones--rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.sm-funciones strong {
  color: var(--tinta);
}
.sm-medida {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--e-5);
  padding: clamp(28px, 5vw, 56px);
  border-radius: 28px;
  background: #0b0f1f;
  color: #fff;
}
@media (min-width: 920px) {
  .sm-medida {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}
.sm-medida .portada-heroe__luces span {
  opacity: 0.45;
}
.sm-medida .sm-seccion__antetitulo {
  color: #5eead4;
}
.sm-medida .sm-seccion__titulo {
  max-width: 26ch;
  color: #fff;
}
.sm-medida .sm-seccion__bajada {
  color: rgb(255 255 255 / 0.86);
}
.sm-preguntas {
  margin-top: var(--e-6);
  border-top: 1px solid var(--linea);
}
.sm-preguntas details {
  border-bottom: 1px solid var(--linea);
}
.sm-preguntas summary {
  cursor: pointer;
  padding: var(--e-4) 0;
  font-weight: 600;
  font-size: var(--t-m);
}
.sm-preguntas details p {
  margin: 0 0 var(--e-4);
  max-width: 70ch;
  color: var(--tinta-2);
  line-height: 1.5;
}

/* Contacto: panel de color (violeta → rosa → naranja) con un brillo que respira detrás del formulario. El texto queda
   sobre la parte oscura del degradado (blanco sobre violeta y rosa: más de 6 a 1); el naranja va debajo de la tarjeta. */
.sm-seccion--contacto {
  border-top: 0;
  padding-top: 0;
}
.sm-contacto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--e-6);
  align-items: center;
  padding: clamp(24px, 5vw, 64px);
  border-radius: 28px;
  background: linear-gradient(135deg, #5b21b6 0%, #6d28d9 22%, #be185d 58%, #ea580c 100%);
  color: #fff;
}
.sm-contacto::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -18%;
  bottom: -36%;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(251 191 36 / 0.6), transparent);
  animation: contacto-brillo 9s ease-in-out infinite alternate;
}
@keyframes contacto-brillo {
  to {
    transform: translate(-14%, -10%) scale(1.15);
  }
}
@media (min-width: 920px) {
  .sm-contacto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
    gap: var(--e-8);
  }
}
.sm-contacto .sm-seccion__antetitulo {
  color: #fde68a;
}
.sm-contacto .sm-seccion__titulo {
  color: #fff;
}
.sm-contacto .sm-seccion__bajada {
  color: rgb(255 255 255 / 0.9);
}

/* El formulario: una tarjeta con borde de vidrio y los campos de Med (.campo, en citas.css). */
.sm-form {
  display: grid;
  gap: 14px;
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--r-3);
  background: var(--superficie);
  color: var(--tinta);
  box-shadow:
    0 0 0 8px rgb(255 255 255 / 0.16),
    var(--sombra-3);
}
.sm-form .accion {
  width: 100%;
  margin-top: 4px;
}
.sm-form .accion[aria-disabled="true"] {
  opacity: 0.7;
  cursor: progress;
}
.sm-form__estado,
.sm-form__recibido {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--r-1);
  font-weight: 600;
  line-height: 1.45;
}
/* Vacío sigue en la página (para que el lector de pantalla anuncie lo que aparezca), sin ocupar lugar. */
.sm-form__estado:empty {
  margin-top: -14px;
  padding: 0;
}
.sm-form__estado[data-tipo="ok"],
.sm-form__recibido {
  color: var(--ok);
  background: var(--ok-fondo);
}
.sm-form__estado[data-tipo="error"] {
  color: var(--peligro);
  background: var(--peligro-fondo);
}
/* Lo que se ve al volver de FormSubmit sin JavaScript (llega con #enviado). */
.sm-form__recibido {
  display: none;
  align-items: center;
  gap: 8px;
  scroll-margin-top: 96px;
}
.sm-form__recibido:target {
  display: flex;
}
.sm-form__recibido .ico {
  flex: none;
  width: 20px;
  height: 20px;
}
.sm-form__nota {
  margin: 0;
  color: var(--tinta-3);
  font-size: var(--t-xs);
}
.sm-form__nota a {
  color: inherit;
  text-underline-offset: 3px;
}

/* ── aparecer al bajar: solo donde el navegador lo hace con CSS, y nunca con «reducir movimiento» ── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sm-pasos li,
    .vitrina,
    .caso,
    .sm-form,
    .producto__texto {
      animation: aparecer linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
    .sm-pasos li:nth-child(2) {
      animation-range: entry 6% cover 32%;
    }
    .sm-pasos li:nth-child(3) {
      animation-range: entry 12% cover 36%;
    }
    .sm-pasos li:nth-child(4) {
      animation-range: entry 18% cover 40%;
    }
  }
}
@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.98);
  }
}
@media (prefers-reduced-motion: reduce) {
  .portada-heroe__luces span,
  .mini__onda i,
  .ej-aviso,
  .sm-contacto::before {
    animation: none;
  }
  .vidrio,
  .vidrio__brillo,
  .vidrio__ir .ico,
  .accion,
  .accion .ico,
  .sm-pasos li {
    transition: none;
  }
}

/* ── pie ── */
.portada-pie {
  border-top: 1px solid var(--linea);
  padding-block: var(--e-7);
  color: var(--tinta-2);
  font-size: var(--t-s);
}
.portada-pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-5) var(--e-7);
}
.portada-pie ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  margin: 0;
  padding: 0;
}
.portada-pie a {
  color: inherit;
  text-underline-offset: 3px;
}
.portada-pie__nota {
  margin: 0 0 0 auto;
  color: var(--tinta-3);
}
.portada-pie .logo {
  height: 28px;
  width: auto;
}