/* ============================================================
   VELMA · capa de movimiento
   Sin cambios de diseño: solo fondo vivo, entradas al scroll,
   stickers con física y la BOX en 3D.
   ============================================================ */

/* ---------- 0. Sin rebote blanco al llegar al límite ----------
   Webflow deja `body { background-color: #fff }`. Ese es el color que
   Safari pinta cuando estiras la página más allá del final, y por eso
   asomaba una franja blanca. Se tiñe del rojo oscuro del sitio y además
   se desactiva el rebote. */

html,
body {
  background-color: #1a0303;
  overscroll-behavior: none;
}

html {
  scrollbar-color: #540808 #1a0303;
}

/* ---------- 1. Fondo con degradado en movimiento ---------- */

.velma-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* mismo color base que el sitio, por si el navegador no anima */
  background: linear-gradient(90deg, #000, #280404 49%, #540808);
}

.velma-bg__flow,
.velma-bg__glow {
  position: absolute;
  inset: -25%;
  will-change: transform, background-position;
}

.velma-bg__flow {
  background-image: linear-gradient(100deg,
      #000 0%,
      #1a0303 22%,
      #280404 45%,
      #5c0909 68%,
      #2e0505 85%,
      #000 100%);
  background-size: 260% 260%;
  background-position: 0% 50%;
  animation: velma-flow 34s ease-in-out infinite;
}

.velma-bg__glow {
  background-image:
    radial-gradient(38% 45% at 22% 32%, rgba(150, 14, 14, .55), rgba(0, 0, 0, 0) 62%),
    radial-gradient(34% 40% at 78% 68%, rgba(84, 8, 8, .5), rgba(0, 0, 0, 0) 60%);
  opacity: .75;
  animation: velma-glow 46s ease-in-out infinite;
}

@keyframes velma-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes velma-glow {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1); }
  33%  { transform: translate3d(5%, 4%, 0) scale(1.12); }
  66%  { transform: translate3d(3%, -5%, 0) scale(1.05); }
  100% { transform: translate3d(-4%, -3%, 0) scale(1); }
}

/* ---------- 2. Entradas al scroll (fade + escala) ---------- */

.v-rev {
  opacity: 0;
  transform: translate3d(0, var(--v-dy, 34px), 0) scale(var(--v-s, .955)) var(--v-base, );
  transition:
    opacity .85s cubic-bezier(.16, .84, .28, 1),
    transform .95s cubic-bezier(.16, .84, .28, 1);
  will-change: opacity, transform;
}

.v-rev.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1) var(--v-base, );
}

/* lo que ya se ve al abrir la página entra rápido, para poder leerlo
   enseguida; lo de más abajo conserva la entrada larga */
.v-rev--entrada {
  --v-dy: 20px;
  --v-s: .975;
  transition-duration: .42s, .5s;
}

/* elementos que ya traen su propia animación o que no deben moverse */
.v-rev--fade {
  transform: none;
}

.v-rev--fade.is-in {
  transform: none;
}

/* ---------- 3. Navegación ---------- */

/* la navbar vivía dentro del carrusel horizontal y se iba con él;
   al reubicarla queda fija de verdad sobre la experiencia */
.velma-nav-fixed {
  position: fixed;
  inset: auto 0% 0%;
  z-index: 900;
}

.nav-link {
  transition: transform .38s cubic-bezier(.16, .84, .28, 1),
              background-color .38s ease,
              color .38s ease;
  transform-origin: 50% 100%;
}

.nav-link:hover {
  transform: translateY(-6px) scale(1.06);
  background-color: #fff;
  color: #000;
}

.nav-link:hover .link-text {
  color: #000;
}

.link-text {
  transition: color .38s ease;
}

/* ---------- 4. Stickers arrastrables ---------- */

.sticker {
  /* el CSS original pedía una imagen a via.placeholder.com en cada sticker */
  background-image: none !important;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: filter .35s ease;
}

.sticker img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

.sticker.is-grabbed {
  cursor: grabbing;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .55));
}

.sticker.is-flying {
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .4));
}

/* ---------- 5. BOX 3D ---------- */

.velma-box3d {
  position: relative;
  touch-action: none;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  perspective: 2200px;
  perspective-origin: 50% 50%;
}

.velma-box3d.is-grabbed {
  cursor: grabbing;
}

.velma-box3d__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.velma-box3d__cube {
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform;
}

.velma-box3d__face {
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #0c0c0d;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  backface-visibility: hidden;
  transform-style: flat;
  outline: 1px solid rgba(0, 0, 0, 0);
  /* evita costuras de subpíxel entre caras */
  box-shadow: 0 0 0 1px #0c0c0d;
}

/* sombreado por cara: da volumen sin tocar las texturas */
.velma-box3d__face::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: var(--face-shade, 0);
  pointer-events: none;
}

.velma-box3d__shadow {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
  pointer-events: none;
  will-change: transform, opacity;
}

.velma-box3d__hint {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  font-family: 'Figtree Variablefont Wght', Verdana, sans-serif;
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .62);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}

.velma-box3d__hint.is-on {
  opacity: 1;
}

/* ---------- 6. Carrusel horizontal ---------- */

/* Las dos pantallas del home se encogían dentro del carril flex:
   faltaba flex-shrink:0 y la segunda estaba declarada a 40vw
   (576px en una pantalla de 1440). Por eso su contenido se montaba
   encima de la primera y el recorrido horizontal se quedaba corto. */
/* El contenido de la primera pantalla está compuesto sobre un lienzo de
   1440 px (posiciones en píxeles fijos). Si la ventana es más estrecha y
   dejamos que la sección la siga, ese contenido se desborda sobre la
   segunda. Se le da siempre su lienzo: la ventana solo enseña un trozo. */
.full-page-1,
.full-page-1.is-horizontal-scroll-section {
  flex-shrink: 0;
  width: 100vw;
  min-width: 1440px;
}

/* La segunda pantalla no ocupa una ventana entera: mide lo que mide su
   contenido más un respiro a los lados. Así el recorrido es un lienzo
   continuo y apretado, en vez de dos diapositivas separadas por un
   hueco muerto. */
.full-page-2,
.full-page-2.is-horizontal-scroll-section {
  flex-shrink: 0;
  width: max-content;
  padding-left: 48px;
  padding-right: 96px;
  position: relative;
  /* se monta sobre el final de la primera pantalla: la banda roja entra
     por detrás de la caja en vez de esperar su turno a la derecha */
  margin-left: -268px !important;
  z-index: 1;
}

/* la caja y todo lo de la primera pantalla mandan sobre lo que se cuela
   por debajo */
.full-page-1,
.full-page-1.is-horizontal-scroll-section {
  position: relative;
  z-index: 2;
}

/* ---------- Segunda pantalla del home: composición compacta ----------
   Con la segunda pantalla ya a ancho completo, el collage quedaba muy
   disperso: el bloque nacía descentrado (`margin-left: -236px`) y el
   enlace NOSOTROS se quedaba solo en la esquina inferior izquierda.
   Se junta todo en un grupo centrado, sin cambiar tamaños ni recortes. */

.quick-stack {
  margin-top: 26px;
  margin-left: 0;
  padding-left: 0;
  row-gap: 4px;
  column-gap: 12px;
}

/* NOSOTROS y LLÁMANOS estaban clavados con coordenadas absolutas sobre
   todo el carril (left: 1480px / 1800px), así que cualquier cambio de
   ancho los descolocaba. Ahora se posicionan dentro de su propia
   pantalla: NOSOTROS remata la marquesina y LLÁMANOS corona el grupo. */
.img-superior-1,
.llamanos {
  position: absolute;
}

/* anclados al centro vertical: el resto del grupo va centrado, así que
   con un `top` fijo se descuadraban en ventanas más altas */
/* NOSOTROS es un enlace: se corre a la derecha para que la caja no le
   coma la palabra (la que sí pasa por detrás es la banda roja) */
.img-superior-1 {
  left: 158px;
  top: calc(50% + 172px);
}

.llamanos {
  left: 394px;
  top: calc(50% - 318px);
}

/* El QR de Instagram estaba clavado en left:1080/top:560, justo donde
   cae la caja: quedaba tapado por ella. Se mueve al hueco libre que
   queda bajo la fila de fotos, sin cambiar su tamaño ni su estilo. */
.img-superior {
  left: 640px;
  top: 700px;
}

.img-superior a,
.img-superior-1 a {
  display: block;
  transition: transform .4s cubic-bezier(.16, .84, .28, 1);
}

.img-superior a:hover,
.img-superior-1 a:hover {
  transform: scale(1.08) rotate(-3deg);
}

/* Los paneles de NOSOTROS son artes 16:9 a pantalla completa con
   background-size:cover. En una ventana 1440x900 (16:10) el cover
   recortaba 160px a lo ancho y se comía el final de los textos.
   Con `contain` el arte entra entero y las franjas que sobran se
   funden con el negro del propio diseño. */
.full-page-3.is-horizontal-scroll-section,
.full-page-4.is-horizontal-scroll-section,
.full-page-5.is-horizontal-scroll-section {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.velma-track {
  will-change: transform;
}

/* ---------- 7. Accesibilidad: menos movimiento ---------- */

@media (prefers-reduced-motion: reduce) {

  .velma-bg__flow,
  .velma-bg__glow {
    animation: none;
  }

  .v-rev,
  .v-rev.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .nav-link,
  .sticker {
    transition: none;
  }
}

/* ---------- 8. Las fotos, con el criterio del menú ----------
   Las imágenes del recorrido salían a su tamaño natural, sin recorte y
   sin radio: se veían pegadas y con los bordes duros. Se les da el mismo
   trato que a las tarjetas del menú (radio 15px) y `object-fit: cover`
   para que encuadren en lugar de deformarse. */

/* OJO: estas clases de Webflow se repiten en el sitio móvil con otro
   significado (.image-4 es la flecha del MENÚ y .image-7 una foto dentro
   de una retícula). Por eso van acotadas a la segunda pantalla del home,
   que solo existe en escritorio. */
.full-page-2 .image-4,
.full-page-2 .image-10 {
  width: 268px;
  height: 190px;
  /* sin esto, el `max-width:100%` de Webflow las dejaba a distinto
     tamaño según el ancho de su celda, y no casaban entre sí */
  max-width: none;
  object-fit: cover;
  border-radius: 15px;
  display: block;
  align-self: center;
}

.full-page-2 .image-4 {
  margin-left: 0;
}

/* la tira de tres fotos del inicio, con el mismo radio y sin deformar */
.img-home {
  width: 250px;
  height: 290px;
  object-fit: cover;
  border-radius: 15px;
  padding-right: 0;
  margin-right: 14px;
}

.img-home:last-child {
  margin-right: 0;
}

/* las fotos del menú también dejan de estirarse */
.img-card {
  object-fit: cover;
}

/* ---------- 9. El sushi grande, anclado a la esquina ----------
   Flotaba en medio del grupo, sin relación con nada. Se saca del grid y
   se ancla a la esquina inferior derecha del lienzo, con un sangrado
   que lo deja cortado por el borde: deja de flotar y cierra la
   composición. */

.full-page-2 > .image-7 {
  position: absolute;
  right: -54px;
  bottom: -78px;
  left: auto;
  top: auto;
  width: 420px;
  margin: 0;
  z-index: 0;
}

/* ---------- 10. Sin parpadeo al entrar ----------
   Las entradas al scroll las montaba el JS: el navegador pintaba la
   página, y un instante después el script la ocultaba para animarla.
   Se veía cargar, desaparecer y volver. Aquí se deja el estado inicial
   listo desde el primer pintado (lo activa un script en el <head>), y
   `:not(.is-in)` hace que deje de aplicar en cuanto el elemento entra.
   Solo opacidad: el desplazamiento lo pone el JS, que antes necesita
   leer la transformación original de cada elemento. */

html.velma-anim .sub-title-1:not(.is-in),
html.velma-anim .image-2:not(.is-in),
html.velma-anim .img-home:not(.is-in),
html.velma-anim .menu:not(.is-in),
html.velma-anim .img-principal:not(.is-in),
html.velma-anim .quick-stack .w-layout-cell:not(.is-in),
html.velma-anim .img-superior:not(.is-in),
html.velma-anim .img-superior-1:not(.is-in),
html.velma-anim .llamanos:not(.is-in),
html.velma-anim .velma-box3d:not(.is-in),
html.velma-anim .image-3:not(.is-in),
html.velma-anim .menu-card:not(.is-in),
html.velma-anim .menu-description:not(.is-in),
html.velma-anim .txt-sections:not(.is-in),
html.velma-anim .ubicaciones .w-layout-cell:not(.is-in),
html.velma-anim .cajas-sushi .w-layout-cell:not(.is-in),
html.velma-anim .menu-title:not(.is-in) {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.velma-anim *:not(.is-in) {
    opacity: 1 !important;
  }
}

/* ---------- 11. NOSOTROS: una sola sección, no tres bloques ----------
   Los tres paneles eran artes con su propio fondo plano (negro, granate y
   rojo), así que al pasar de uno a otro se veía un corte seco. Se les
   recortó el fondo (ahora son PNG/WebP con transparencia) y por detrás
   corre un único degradado: cada panel enseña su tercio, de modo que el
   negro se funde con el granate y el granate con el rojo fuerte sin
   costuras. Las palabras siguen sobre su color de siempre. */

.full-page-3.is-horizontal-scroll-section,
.full-page-4.is-horizontal-scroll-section,
.full-page-5.is-horizontal-scroll-section {
  background-color: transparent;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, 300% 100%;
  background-attachment: scroll, scroll;
}

.full-page-3.is-horizontal-scroll-section {
  background-image: url('../images/about1.webp'), var(--velma-degradado);
  background-position: center center, 0% 50%;
}

.full-page-4.is-horizontal-scroll-section {
  background-image: url('../images/about2.webp'), var(--velma-degradado);
  background-position: center center, 50% 50%;
}

.full-page-5.is-horizontal-scroll-section {
  background-image: url('../images/about3.webp'), var(--velma-degradado);
  background-position: center center, 100% 50%;
}

/* el degradado completo del recorrido: el centro de cada panel cae sobre
   el color que ese arte tenía originalmente */
:root {
  --velma-degradado: linear-gradient(90deg,
      #000 0%,
      #000 16.67%,
      #270404 50%,
      #7d0a0b 83.33%,
      #7d0a0b 100%);
}

/* el velo negro opaco que cubría toda la pantalla en esta página ya no
   hace falta: taparía el degradado en las franjas de arriba y abajo */
.nosotros-section::after {
  background: transparent !important;
}

/* ---------- 12. NOSOTROS en móvil: el mismo criterio ----------
   Ahí las tres secciones van apiladas, así que el degradado corre de
   arriba abajo. Además, en horizontal (tablet o teléfono girado) el CSS
   pedía `about_1_dt-8.jpg`, `about_2_dt-8.jpg` y `about_3_dt-8.jpg`,
   que no existen en el sitio: esas tres secciones se quedaban sin fondo. */

.first-section-about,
.second-section-about,
.third-section-about {
  background-color: transparent !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: contain, 100% 300% !important;
}

.first-section-about {
  background-image: url('../images/about_1_mv-8.webp'), var(--velma-degradado-v) !important;
  background-position: center center, 50% 0% !important;
}

.second-section-about {
  background-image: url('../images/about_2_mv-8.webp'), var(--velma-degradado-v) !important;
  background-position: center center, 50% 50% !important;
}

.third-section-about {
  background-image: url('../images/about_3_mv-8.webp'), var(--velma-degradado-v) !important;
  background-position: center center, 50% 100% !important;
}

/* en horizontal entra el arte apaisado, que es el que corresponde */
@media screen and (min-width: 768px) and (orientation: landscape) {
  .first-section-about {
    background-image: url('../images/about1.webp'), var(--velma-degradado-v) !important;
  }

  .second-section-about {
    background-image: url('../images/about2.webp'), var(--velma-degradado-v) !important;
  }

  .third-section-about {
    background-image: url('../images/about3.webp'), var(--velma-degradado-v) !important;
  }
}

:root {
  --velma-degradado-v: linear-gradient(180deg,
      #000 0%,
      #000 16.67%,
      #270404 50%,
      #7d0a0b 83.33%,
      #7d0a0b 100%);
}

/* ---------- 13. Contacto ----------
   Era la única página sin nada de movimiento. Entra en cascada, los
   iconos responden al puntero y el sticker se puede arrastrar. */

.redes-contact > a img,
.redes-contact .whatsapp-button img {
  transition: transform .38s cubic-bezier(.16, .84, .28, 1),
              filter .38s ease;
}

.redes-contact > a:hover img,
.redes-contact .whatsapp-button:hover img {
  transform: scale(1.22) rotate(-7deg);
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .55));
}

.titulo-contact {
  transform-origin: 50% 100%;
}

/* el ojo respira despacio, para que la página no se quede quieta */
.ojo-contact .image-17 {
  animation: velma-flota 7s ease-in-out infinite;
}

@keyframes velma-flota {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-1.5deg); }
}

/* el sticker lo mueve el motor de arrastre, así que solo se le hace
   aparecer: nada de tocarle la transformación */
.sticker-contact {
  animation: velma-aparece .8s .3s both;
  cursor: grab;
  touch-action: none;
}

.sticker-contact.is-grabbed {
  cursor: grabbing;
}

.sticker-contact img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

@keyframes velma-aparece {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* estado inicial de las entradas de contacto, antes del primer pintado */
html.velma-anim .titulo-contact:not(.is-in),
html.velma-anim .text-block-4:not(.is-in),
html.velma-anim .ojo-contact:not(.is-in),
html.velma-anim .redes-contact > a:not(.is-in),
html.velma-anim .redes-contact > .whatsapp-menu:not(.is-in),
html.velma-anim .sushi-home:not(.is-in),
html.velma-anim .arrow-menu:not(.is-in),
html.velma-anim .sub-ubi:not(.is-in),
html.velma-anim .imgs-ubi .w-layout-cell:not(.is-in),
html.velma-anim .instagram-qr:not(.is-in),
html.velma-anim .gifs-v .w-layout-cell:not(.is-in),
html.velma-anim .nosotros:not(.is-in),
html.velma-anim .eye:not(.is-in),
html.velma-anim .sign-gif:not(.is-in),
html.velma-anim .sushi-2:not(.is-in),
html.velma-anim .menu-card-1:not(.is-in),
html.velma-anim .boxes:not(.is-in),
html.velma-anim .sushi:not(.is-in),
html.velma-anim .menu-text:not(.is-in),
html.velma-anim .menu-text-1:not(.is-in),
html.velma-anim .heading-11:not(.is-in),
html.velma-anim .text-contact:not(.is-in),
html.velma-anim .paragraph-3:not(.is-in),
html.velma-anim .links > a:not(.is-in),
html.velma-anim .links > .whatsapp-menu:not(.is-in) {
  opacity: 0;
}

/* iconos de redes del móvil: mismo trato que en escritorio */
.links > a img,
.links .whatsapp-button img {
  transition: transform .38s cubic-bezier(.16, .84, .28, 1);
}

.links > a:active img,
.links .whatsapp-button:active img {
  transform: scale(1.18);
}

@media (prefers-reduced-motion: reduce) {
  .ojo-contact .image-17,
  .sticker-contact {
    animation: none;
  }
}

/* ---------- 14. Tarjetas de ubicación parejas ----------
   Las tres tarjetas ya medían lo mismo (la retícula las estira), pero su
   contenido no se alineaba: la dirección de Bugambilias ocupa una línea y
   las otras dos, así que los iconos y el botón quedaban 26 px más arriba.
   Con la tarjeta en columna y `margin-top:auto` en los iconos, el bloque
   de abajo se ancla al pie y las tres coinciden.
   Va acotado a .ubicaciones porque .menu-third y .menu-card también
   existen en el sitio móvil. */

.ubicaciones .menu-third .menu-card {
  display: flex;
  flex-direction: column;
}

.ubicaciones .menu-third .card-icons {
  margin-top: auto;
}

/* el texto justificado abría huecos entre palabras en las direcciones
   largas ("Av.   de   la   Mancha"); alineado a la izquierda queda parejo */
.ubicaciones .menu-third .text-card {
  text-align: left;
}