/*
 * Efectos reutilizables. Lo específico de cada sección de la home se irá
 * añadiendo al final, con un bloque por sección.
 */

/* ---------- Reveal on scroll (src/lib/reveal.ts) ----------
 *
 * - "reveal": fade + subida de 24px al entrar en pantalla (una vez).
 * - "reveal-group" en un contenedor: todos sus "reveal" se disparan juntos
 *   cuando entra el contenedor (para que el escalonado vaya en orden).
 * - "reveal-delay-1/2/3": retraso de 100/200/300 ms para escalonar grids.
 *
 * Solo se ocultan si hay JS (.soul-js en <html>), y nunca en el editor de
 * Elementor, para poder editar sin que desaparezcan.
 */
.soul-js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition-property: opacity, transform;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.soul-js .reveal.is-revealed,
.elementor-editor-active .reveal {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 {
  transition-delay: 100ms;
}

.reveal-delay-2 {
  transition-delay: 200ms;
}

.reveal-delay-3 {
  transition-delay: 300ms;
}

@media (prefers-reduced-motion: reduce) {
  .soul-js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Viñeta (src/components/Vignette.astro) ----------
 *
 * Capa que oscurece los bordes hacia negro-soul para fundir una imagen con
 * el fondo. Se pone en un elemento absoluto que cubra la imagen.
 * Modificadores: "vignette--sides" (también laterales) y "vignette--no-top"
 * (solo abajo).
 */
.vignette {
  --vignette-stops:
    var(--negro-soul) 0%, transparent 15%, transparent 85%, var(--negro-soul) 100%;
  --vignette-stops-bottom:
    transparent 0%, transparent 85%, var(--negro-soul) 100%;
  pointer-events: none;
  background-image: linear-gradient(to bottom, var(--vignette-stops));
}

.vignette.vignette--no-top {
  background-image: linear-gradient(to bottom, var(--vignette-stops-bottom));
}

.vignette.vignette--sides {
  background-image:
    linear-gradient(to bottom, var(--vignette-stops)),
    linear-gradient(to right, var(--vignette-stops));
}

.vignette.vignette--sides.vignette--no-top {
  background-image:
    linear-gradient(to bottom, var(--vignette-stops-bottom)),
    linear-gradient(to right, var(--vignette-stops));
}

/* ---------- Patrón de cuadrados (src/components/SquaresPattern.astro) ----------
 *
 * Franja que repite squares-tile.svg en horizontal a toda la altura del
 * elemento: darle altura en el panel.
 */
.squares-pattern {
  background-image: url('../svg/squares-tile.svg');
  background-repeat: repeat-x;
  background-size: auto 100%;
}

/* ---------- Header (src/components/Header.astro) ----------
 *
 * Plantilla Header del Theme Builder (clases globales en el panel):
 *
 *   .soul-header                        Div block <header>, fijo arriba
 *     .soul-header__bar.soul-container  fila: logo a la izquierda, menú a la derecha
 *       Imagen con enlace a "/"         .soul-logo en la imagen (logo-black-bg.svg)
 *       .soul-nav                       Div block <nav>, menú de escritorio (≥768px)
 *         .soul-nav__link ×2            Párrafos con enlace: Carta, Contacto
 *         .button-primary.soul-open-reserve   Botón "Reserva o pide"
 *       .soul-mobile-menu               Div block, menú móvil (<768px)
 *         .soul-menu-toggle             Botón "Menú" (el texto no se ve: icono por CSS)
 *         .soul-menu-panel              Div block <nav>, panel lateral
 *           .soul-menu-close            Botón "Cerrar menú" (icono X por CSS)
 *           .soul-nav__link ×2
 *           .button-primary.soul-open-reserve
 *
 * main.js añade .is-scrolled a .soul-header al bajar, crea el fondo oscuro
 * del menú móvil (.soul-menu-backdrop) y abre/cierra el panel.
 *
 * Los widgets atómicos traen estilos base con selectores ".elementor
 * .e-*-base" (padding: 10px en los Div block, fondo azul en los botones,
 * all: unset en los enlaces de los párrafos). Por eso estas reglas van con
 * ".elementor" delante: misma especificidad y, al cargar después, ganan.
 */
/* Alto del header (lo usan las páginas para empezar debajo y la barra de
   la carta para pegarse justo bajo él):
   - móvil: logo de 60px de alto + 8px arriba y abajo = 76px;
   - ≥768px: manda el menú de escritorio (botón de 44px + 12px arriba y
     abajo = 68px) + 8px arriba y abajo = 84px.
   --header-offset suma la barra de admin de WordPress cuando hay sesión
   (en móvil esa barra no es fija y el header se queda arriba). */
:root {
  --header-height: 4.75rem;
  --header-offset: var(--header-height);
}

@media (min-width: 768px) {
  :root {
    --header-height: 5.25rem;
  }
}

@media (min-width: 601px) {
  .admin-bar {
    --header-offset: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 32px));
  }
}

.elementor .soul-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  padding: 0;
}

/* Header que se oculta al bajar y vuelve al subir (solo en páginas con
   barra de categorías; main.js pone las clases en <html>). */
.soul-header-autohide .elementor .soul-header {
  transition: transform 0.3s ease;
}

.soul-header-hidden .elementor .soul-header {
  transform: translateY(-100%);
}

/* Con la barra de admin (sesión iniciada), el header va debajo. En móvil
   esa barra no es fija, así que ahí se queda arriba. */
@media (min-width: 601px) {
  .admin-bar .soul-header {
    top: var(--wp-admin--admin-bar--height, 32px);
  }
}

.elementor .soul-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.5rem;
}

/* Logo: gira una vuelta sobre el eje X al pasar el ratón. La perspectiva
   va en el enlace que envuelve la imagen, para que el punto de fuga quede
   en el centro. */
.elementor a:has(> .soul-logo) {
  display: inline-block;
  flex-shrink: 0;
  perspective: 400px;
}

.elementor .soul-logo {
  display: block;
  width: 130px;
  height: auto;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  backface-visibility: hidden;
}

.elementor a:hover > .soul-logo {
  transform: rotateX(360deg);
}

/* Fondo que aparece al hacer scroll (menú de escritorio y hamburguesa). */
.elementor .soul-nav,
.elementor .soul-menu-toggle {
  background-color: transparent;
  transition: background-color 0.3s;
}

.elementor .soul-header.is-scrolled .soul-nav,
.elementor .soul-header.is-scrolled .soul-menu-toggle {
  background-color: color-mix(in srgb, var(--negro-soul) 80%, transparent);
}

.elementor .soul-nav {
  display: none;
  align-items: center;
  gap: 2rem;
  width: auto;
  padding: 0.75rem 1.5rem;
}

/* Enlaces del menú: párrafo con el <a> dentro. */
.elementor .soul-nav__link,
.elementor .soul-nav__link a {
  color: var(--blanco-soul);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.025em;
  text-decoration: none;
  text-transform: uppercase;
}

/* Hover: un trazo rosa hecho a mano (underline-hand.svg como máscara) se
   dibuja debajo de izquierda a derecha, recortándolo con clip-path. Al
   salir se recoge hacia la izquierda. */
.elementor .soul-nav__link a {
  position: relative;
  display: inline-block;
}

.elementor .soul-nav__link a::after {
  content: '';
  position: absolute;
  left: -0.15em;
  right: -0.15em;
  bottom: -0.5em;
  height: 0.5em;
  background-color: var(--rosa-soul);
  mask: url('../svg/underline-hand.svg') no-repeat center / 100% 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.3s cubic-bezier(0.65, 0, 0.35, 1);
  pointer-events: none;
}

.elementor .soul-nav__link a:hover::after,
.elementor .soul-nav__link a:focus-visible::after {
  clip-path: inset(0 0 0 0);
}

.elementor .soul-menu-panel .soul-nav__link,
.elementor .soul-menu-panel .soul-nav__link a {
  font-size: var(--text-base);
}

.elementor .soul-mobile-menu {
  position: relative;
  width: auto;
  padding: 0;
}

@media (min-width: 768px) {
  .elementor .soul-nav {
    display: flex;
  }

  .elementor .soul-mobile-menu {
    display: none;
  }
}

/* Botones del menú móvil: el texto ("Menú", "Cerrar menú") queda para los
   lectores de pantalla y el icono se pinta con una máscara del SVG, así
   que toma el color del texto (currentColor). */
.elementor .soul-menu-toggle,
.elementor .soul-menu-close {
  position: relative;
  display: block;
  border: 0;
  border-radius: 0;
  color: var(--blanco-soul);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
}

.elementor .soul-menu-toggle::before,
.elementor .soul-menu-toggle::after,
.elementor .soul-menu-close::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.elementor .soul-menu-toggle::after,
.elementor .soul-menu-close::before {
  width: 1.5rem;
  height: 1.5rem;
  mask-image: url('../svg/close.svg');
}

/* Caja del icono: 36×24 + padding 8px (como en Astro). */
.elementor .soul-menu-toggle {
  width: calc(2.25rem + 1rem);
  height: calc(1.5rem + 1rem);
  padding: 0.5rem;
}

.elementor .soul-menu-toggle::before {
  width: 2.25rem;
  height: 1.5rem;
  mask-image: url('../svg/burger-menu.svg');
}

/* Hamburguesa y X superpuestas: al abrir se cruzan con un fundido. */
.elementor .soul-menu-toggle::before,
.elementor .soul-menu-toggle::after {
  transition: opacity 0.3s ease;
}

.elementor .soul-menu-toggle::after,
.elementor .soul-menu-toggle[aria-expanded='true']::before {
  opacity: 0;
}

.elementor .soul-menu-toggle[aria-expanded='true']::after {
  opacity: 1;
}

.elementor .soul-menu-toggle:hover,
.elementor .soul-menu-toggle:focus-visible {
  background-color: transparent;
  color: var(--blanco-soul);
}

.elementor .soul-header.is-scrolled .soul-menu-toggle:hover,
.elementor .soul-header.is-scrolled .soul-menu-toggle:focus-visible {
  background-color: color-mix(in srgb, var(--negro-soul) 80%, transparent);
}

.elementor .soul-menu-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: none;
  transition: color 0.15s;
}

.elementor .soul-menu-close:hover,
.elementor .soul-menu-close:focus-visible {
  background: none;
  color: var(--rosa-soul);
}

.elementor .soul-menu-backdrop {
  position: fixed;
  inset: 0;
  background-color: color-mix(in srgb, var(--negro-soul) 60%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.elementor .soul-menu-panel {
  position: fixed;
  inset-block: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 80%;
  max-width: 24rem;
  padding: 6rem 1.5rem 2rem;
  background-color: var(--negro-soul);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}

.elementor .soul-mobile-menu.is-open .soul-menu-panel {
  transform: none;
}

.elementor .soul-mobile-menu.is-open .soul-menu-backdrop {
  opacity: 1;
  pointer-events: auto;
}

html.soul-menu-open {
  overflow: hidden;
}

/* Editando la plantilla Header, el panel se ve en su sitio (no fuera de
   pantalla) para poder editarlo. Usar la vista móvil del editor. */
.elementor-editor-active .elementor-edit-area-active .soul-menu-panel {
  position: relative;
  width: 100%;
  max-width: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .elementor .soul-logo,
  .elementor .soul-nav__link a::after,
  .elementor .soul-menu-toggle::before,
  .elementor .soul-menu-toggle::after,
  .elementor .soul-menu-panel,
  .elementor .soul-menu-backdrop {
    transition: none;
  }

  .elementor a:hover > .soul-logo {
    transform: none;
  }
}

/* ---------- Footer (src/components/Footer.astro) ----------
 *
 * Plantilla Footer del Theme Builder (clases globales en el panel):
 *
 *   .soul-footer                          Div block raíz, fondo negro
 *     .squares-pattern.soul-footer__squares  franja de cuadrados (64px)
 *     .soul-footer__inner.soul-container
 *       .soul-footer__grid                1 / 2 (≥640px) / 3 (≥1024px) columnas
 *         columna 1: Imagen con enlace (.soul-footer__logo) + párrafo .soul-footer__tagline
 *         columna 2: título .soul-footer__heading "Contacto" + .soul-footer__contact
 *           .soul-footer__location ×2     nombre (.soul-footer__location-name),
 *                                         dirección y teléfono (.soul-footer__item)
 *           .soul-footer__item            correo
 *         columna 3: título "Síguenos" + .soul-footer__social
 *           .soul-social ×4               botones con enlace; el texto queda oculto
 *                                         y el icono lo pinta el CSS
 *       .soul-footer__bottom              copyright (.soul-footer__copy) y legales
 *         .soul-footer__legal > .soul-footer__legal-link ×3
 *
 * Iconos de .soul-footer__item: modificador --address, --phone o --email.
 * Redes: .soul-social--instagram / --youtube / --tiktok / --facebook.
 * Como en el header, todo con ".elementor" delante para ganar a los estilos
 * base de los widgets atómicos.
 */
.elementor .soul-footer {
  position: relative;
  padding: 0;
  background-color: var(--negro-soul);
  color: var(--blanco-soul);
  font-family: var(--font-sans), system-ui, sans-serif;
}

.elementor .soul-footer__squares {
  height: 4rem;
  padding: 0;
}

.elementor .soul-footer__inner {
  padding-block: 3rem 0;
}

.elementor .soul-footer__grid {
  display: grid;
  gap: 6rem;
  padding: 0;
}

.elementor .soul-footer__grid > *,
.elementor .soul-footer__contact,
.elementor .soul-footer__social,
.elementor .soul-footer__legal {
  padding: 0;
}

@media (min-width: 640px) {
  .elementor .soul-footer__inner {
    padding-top: 4rem;
  }

  .elementor .soul-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .elementor .soul-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.elementor .soul-footer__logo {
  display: block;
  width: 140px;
  height: auto;
}

.elementor .soul-footer__tagline {
  margin-top: 1rem;
  color: color-mix(in srgb, var(--blanco-soul) 70%, transparent);
  font-size: var(--text-sm);
  line-height: 1.625;
}

.elementor .soul-footer__heading {
  display: block;
  margin-bottom: 1rem;
  color: var(--blanco-soul);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1.25rem;
  text-transform: uppercase;
  cursor: default;
}

.elementor .soul-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.elementor .soul-footer__location {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0;
}

.elementor .soul-footer__location-name {
  color: var(--blanco-soul);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

/* Fila con icono: el icono es una máscara del SVG en ::before, así toma
   el color del texto. */
.elementor .soul-footer__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: color-mix(in srgb, var(--blanco-soul) 80%, transparent);
  font-size: var(--text-sm);
  line-height: 1.25rem;
}

.elementor .soul-footer__item::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.0625rem;
  background-color: currentColor;
  mask: var(--soul-icon) no-repeat center / contain;
}

.soul-footer__item--address {
  --soul-icon: url('../svg/map-pin.svg');
}

.soul-footer__item--phone {
  --soul-icon: url('../svg/phone.svg');
}

.soul-footer__item--email {
  --soul-icon: url('../svg/mail.svg');
}

.elementor .soul-footer__item a {
  color: inherit;
  transition: color 0.15s;
}

.elementor .soul-footer__item a:hover,
.elementor .soul-footer__item a:focus-visible {
  color: var(--blanco-soul);
}

/* Redes: botón atómico con enlace; el texto ("Instagram"...) queda para
   los lectores de pantalla. */
.elementor .soul-footer__social {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.elementor .soul-social {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--blanco-soul);
  font-size: 0;
  line-height: 0;
  transition: color 0.15s;
}

.elementor .soul-social:hover,
.elementor .soul-social:focus-visible {
  background: none;
  color: var(--rosa-soul);
}

.elementor .soul-social::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  mask: var(--soul-icon) no-repeat center / contain;
}

.soul-social--instagram {
  --soul-icon: url('../svg/instagram.svg');
}

.soul-social--youtube {
  --soul-icon: url('../svg/youtube.svg');
}

.soul-social--tiktok {
  --soul-icon: url('../svg/tiktok.svg');
}

.soul-social--facebook {
  --soul-icon: url('../svg/facebook.svg');
}

.elementor .soul-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
  padding: 2rem 0;
  border-top: 1px solid color-mix(in srgb, var(--blanco-soul) 10%, transparent);
  text-align: center;
}

@media (min-width: 640px) {
  .elementor .soul-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.elementor .soul-footer__copy {
  color: color-mix(in srgb, var(--blanco-soul) 60%, transparent);
  font-size: var(--text-xs);
  line-height: 1rem;
}

.elementor .soul-footer__legal {
  display: flex;
  gap: 1.5rem;
}

.elementor .soul-footer__legal-link a {
  color: color-mix(in srgb, var(--blanco-soul) 60%, transparent);
  font-size: var(--text-xs);
  letter-spacing: 0.025em;
  line-height: 1rem;
  text-transform: uppercase;
  transition: color 0.15s;
}

.elementor .soul-footer__legal-link a:hover,
.elementor .soul-footer__legal-link a:focus-visible {
  color: var(--blanco-soul);
}

/* ---------- Popup de reserva (src/components/ReserveModal.astro) ----------
 *
 * Popup de Elementor Pro "Reserva o pide" (ID 390). En sus ajustes:
 * condición "todo el sitio", "Open By Selector" = .soul-open-reserve (la
 * clase de los botones "Reserva o pide"), ancho 576px (móvil 100vw), en
 * móvil abajo con slideInUp y en escritorio centrado con fadeIn, fondo
 * negro al 60 % y clase soul-reserve-popup en el modal. El fondo oscuro y
 * la sombra van ahí porque Elementor los genera con selectores de ID.
 *
 *   .soul-reserve                     tarjeta negra
 *     .soul-reserve__cols             columnas Reservar / Pedir (en fila ≥768px)
 *       .soul-reserve__col ×2
 *         .soul-reserve__title        h2 en Gochi Hand
 *         .soul-reserve__actions
 *           .button-outline           botones con borde (+ button--disabled: "Madrid (soon)")
 *
 * El CSS de los popups de Pro se carga después del tema: por eso las reglas
 * del modal llevan .elementor-popup-modal.soul-reserve-popup.
 *
 * Corte a 768px (no 640px como en Astro) para coincidir con el móvil de
 * Elementor, que es donde el popup pasa de abajo a centrado.
 */
.elementor-popup-modal.soul-reserve-popup .dialog-widget-content {
  background-color: transparent;
}

/* La X de Elementor se sustituye por close.svg (como en Astro). */
.elementor-popup-modal.soul-reserve-popup .dialog-close-button {
  top: 1rem;
  inset-inline-end: 1.75rem;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--blanco-soul);
  transition: color 0.15s;
}

.elementor-popup-modal.soul-reserve-popup .dialog-close-button svg {
  display: none;
}

.elementor-popup-modal.soul-reserve-popup .dialog-close-button::before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: currentColor;
  mask: url('../svg/close.svg') no-repeat center / contain;
}

.elementor-popup-modal.soul-reserve-popup .dialog-close-button:hover,
.elementor-popup-modal.soul-reserve-popup .dialog-close-button:focus-visible {
  color: var(--rosa-soul);
}

@media (min-width: 768px) {
  .elementor-popup-modal.soul-reserve-popup .dialog-close-button {
    inset-inline-end: 1rem;
  }
}

/* Tarjeta: en móvil deja 12px a cada lado y como mucho 384px de ancho. */
.elementor .soul-reserve {
  width: calc(100% - 1.5rem);
  max-width: 24rem;
  margin-inline: auto;
  padding: 3rem 1.5rem 4rem;
  background-color: var(--negro-soul);
}

@media (min-width: 768px) {
  .elementor .soul-reserve {
    width: 100%;
    max-width: none;
    padding-bottom: 3rem;
  }
}

.elementor .soul-reserve__cols {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 0;
}

@media (min-width: 768px) {
  .elementor .soul-reserve__cols {
    flex-direction: row;
    justify-content: center;
    gap: 4rem;
  }
}

.elementor .soul-reserve__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  padding: 0;
}

.elementor .soul-reserve__title {
  display: block;
  color: var(--blanco-soul);
  font-family: var(--font-decorative), cursive;
  font-size: var(--text-3xl);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 2.25rem;
  text-align: center;
  text-transform: none;
  cursor: default;
}

.elementor .soul-reserve__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0;
}

/* ---------- Home: bloque negro superior (src/pages/index.astro) ----------
 *
 *   .soul-home-top                 Div block: fondo negro, envuelve Hero +
 *                                  PressStrip + SoulerStrip
 *     Imagen .soul-home-top__texture  textura de pared (fade-in al cargar)
 *     .soul-hero ...
 *     .soul-home-top__band         franja texture-band.svg abajo (≥768px)
 *
 * La textura es la imagen más pesada de arriba: se oculta hasta que carga
 * (main.js le pone .is-loaded) para que no salte de negro a textura.
 */
.elementor .soul-home-top {
  position: relative;
  overflow: hidden;
  padding: 0;
  background-color: var(--negro-soul);
}

.elementor .soul-home-top__texture {
  --texture-opacity: 0.6;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--texture-opacity);
  transition: opacity 0.6s ease-out;
}

@media (max-width: 767px) {
  .elementor .soul-home-top__texture {
    --texture-opacity: 0.4;
  }
}

.soul-js body:not(.elementor-editor-active) .soul-home-top__texture:not(.is-loaded) {
  opacity: 0;
}

.elementor .soul-home-top__band {
  display: none;
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 10;
  aspect-ratio: 1440 / 103;
  padding: 0;
  background: url('../svg/texture-band.svg') center bottom / 100% 100% no-repeat;
  transform: translateY(2px);
  pointer-events: none;
}

@media (min-width: 768px) {
  .elementor .soul-home-top__band {
    display: block;
  }
}

/* ---------- Home: Hero (src/sections/Hero.astro) ----------
 *
 *   .soul-hero                     Div block <section>, alto mínimo de pantalla
 *     Imagen .soul-hero__bg        fondo con máscara animada
 *     .soul-hero__inner.soul-container   2 columnas desde 1024px
 *       .soul-hero__text
 *         Título h1 .soul-hero__title    el <span> es la línea pequeña de
 *                                        arriba y la negrita (<strong>) va en rosa
 *                                        (Elementor quita las clases del texto)
 *         Párrafo .soul-hero__lead       con el enlace a Burgerdudes
 *         Botón .button-primary.soul-open-reserve.soul-hero__cta
 *       .soul-hero__media
 *         .soul-hero__frame        marco girado 6°: papel (::before), foto y
 *           Imagen .soul-hero__photo   cintas (::after, frame-hero-tapes.svg)
 *
 * Las posiciones del papel y de la foto salen del viewBox de frame-hero.svg
 * (1200×998): así coinciden con las cintas.
 */
.elementor .soul-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow: hidden;
  padding: 0;
}

/* --reveal se registra como <percentage> para poder animarla. */
@property --reveal {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* Fondo: en móvil, ampliado y debajo del título; desde 640px, a pantalla
   completa. La máscara radial se abre desde el centro (--reveal) y la
   lineal funde arriba y abajo; solo se ve donde las dos son opacas. */
.elementor .soul-hero__bg {
  --radial-mask: radial-gradient(
    circle farthest-corner at center,
    black 0%,
    black calc(var(--reveal) / 2),
    transparent var(--reveal)
  );
  --linear-mask: linear-gradient(
    to bottom,
    transparent 0%,
    black 10%,
    black 60%,
    rgb(0 0 0 / 40%) 80%,
    transparent 100%
  );
  position: absolute;
  top: 12rem;
  inset-inline: 0;
  width: 100%;
  height: auto;
  max-height: 65vh;
  object-fit: cover;
  opacity: 0.4;
  mix-blend-mode: color-dodge;
  transform: scale(2.25);
  -webkit-mask-image: var(--radial-mask), var(--linear-mask);
  -webkit-mask-composite: source-in;
  mask-image: var(--radial-mask), var(--linear-mask);
  mask-composite: intersect;
  animation: soul-hero-bg-reveal 2.6s ease-out 0.8s forwards;
}

@media (min-width: 640px) {
  .elementor .soul-hero__bg {
    inset: 0;
    height: 100%;
    max-height: none;
    transform: none;
  }
}

@keyframes soul-hero-bg-reveal {
  from {
    --reveal: 0%;
  }

  to {
    --reveal: 200%;
  }
}

.elementor .soul-hero__inner {
  position: relative;
  z-index: 10;
  display: grid;
  flex: 1;
  gap: 3rem;
  padding-block: 9rem 3rem;
}

@media (min-width: 1024px) {
  .elementor .soul-hero__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }
}

.elementor .soul-hero__text {
  padding: 0 0.75rem;
}

@media (min-width: 1024px) {
  .elementor .soul-hero__text {
    padding-inline: 0;
  }
}

.elementor .soul-hero__title {
  display: block;
  color: var(--blanco-soul);
  font-family: var(--font-heading), sans-serif;
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.7));
  cursor: default;
}

.elementor .soul-hero__title span {
  display: block;
  font-size: var(--text-2xl);
  font-weight: 400;
}

.elementor .soul-hero__title strong {
  color: var(--rosa-soul-light);
  font-weight: inherit;
}

@media (min-width: 640px) {
  .elementor .soul-hero__title {
    font-size: var(--text-5xl);
  }

  .elementor .soul-hero__title span {
    font-size: var(--text-3xl);
  }
}

@media (min-width: 1024px) {
  .elementor .soul-hero__title {
    font-size: var(--text-6xl);
  }
}

.elementor .soul-hero__lead {
  margin-top: 1.5rem;
  color: var(--blanco-soul);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: var(--text-lg);
  line-height: 1.75rem;
  text-wrap: pretty;
}

.elementor .soul-hero__lead a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  cursor: pointer;
}

.elementor .soul-hero__lead a:hover {
  text-decoration: none;
}

.elementor .soul-hero__cta {
  margin-top: 2rem;
}

.elementor .soul-hero__media {
  display: flex;
  justify-content: center;
  padding: 0;
}

@media (min-width: 1024px) {
  .elementor .soul-hero__media {
    justify-content: flex-end;
  }
}

.elementor .soul-hero__frame {
  position: relative;
  width: 100%;
  max-width: 32rem;
  aspect-ratio: 1200 / 998;
  padding: 0;
  transform: rotate(6deg);
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.15));
}

/* Papel blanco del marco (el primer <rect> de frame-hero.svg). */
.elementor .soul-hero__frame::before {
  content: '';
  position: absolute;
  left: calc(80.6885 / 1200 * 100%);
  top: calc(72.3965 / 998 * 100%);
  width: calc(1043.58 / 1200 * 100%);
  height: calc(823.597 / 998 * 100%);
  background-color: var(--blanco-soul);
}

/* Cintas, por encima de la foto. */
.elementor .soul-hero__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../svg/frame-hero-tapes.svg') center / 100% 100% no-repeat;
  pointer-events: none;
}

/* Foto en la ventana del marco (el <rect> gris de frame-hero.svg). */
.elementor .soul-hero__photo {
  position: absolute;
  left: calc(120.688 / 1200 * 100%);
  top: calc(112.396 / 998 * 100%);
  width: calc(963.577 / 1200 * 100%);
  height: calc(743.597 / 998 * 100%);
  object-fit: cover;
}

/* ---------- Home: PressStrip (src/sections/PressStrip.astro) ----------
 *
 *   .soul-press                    Div block <section>, dentro de .soul-home-top
 *     .soul-press__grid.reveal-group   2 columnas; desde 1280px, en fila
 *       .soul-press__item.reveal (+ reveal-delay-1/2/3)  ×4
 *         .soul-press__logo        caja 4:3 de 80px de alto
 *           Imagen .soul-press__img
 *           Párrafo .soul-press__overlay   texto que aparece al pasar el ratón (≥1280px)
 *         Párrafo .soul-press__caption     el mismo texto, fijo debajo (<1280px)
 *
 * El hover solo existe desde 1280px, que es donde hay ratón; por debajo el
 * texto va fijo bajo el logo. El texto es también el alt de cada imagen
 * (biblioteca de medios); main.js oculta el overlay a lectores de pantalla.
 */
.elementor .soul-press {
  position: relative;
  z-index: 10;
  padding: 0;
}

.elementor .soul-press__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 4rem 3rem;
  max-width: 48rem;
  margin-inline: auto;
  padding: 3rem 2rem;
}

@media (min-width: 640px) {
  .elementor .soul-press__grid {
    column-gap: 6rem;
  }
}

@media (min-width: 1280px) {
  .elementor .soul-press__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 10rem;
    max-width: var(--container-max);
  }
}

.elementor .soul-press__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  padding: 0;
}

.elementor .soul-press__logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: 5rem;
  aspect-ratio: 4 / 3;
  padding: 0;
}

.elementor .soul-press__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter 0.5s;
}

.elementor .soul-press__overlay,
.elementor .soul-press__caption {
  color: var(--blanco-soul);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.025em;
  line-height: 1rem;
  text-align: center;
  text-transform: uppercase;
  cursor: default;
}

.elementor .soul-press__overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  width: max-content;
  max-width: 12.5rem;
  padding: 0.375rem 0.75rem;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s;
  pointer-events: none;
}

.elementor .soul-press__caption {
  display: block;
  max-width: 14rem;
  margin-inline: auto;
  padding-inline: 0.5rem;
}

@media (min-width: 1280px) {
  .elementor .soul-press__overlay {
    display: block;
  }

  .elementor .soul-press__caption {
    display: none;
  }

  .elementor .soul-press__item:hover .soul-press__img {
    filter: blur(4px) brightness(0.25);
  }

  .elementor .soul-press__item:hover .soul-press__overlay {
    opacity: 1;
  }
}

/* ---------- Home: SoulerStrip (src/sections/SoulerStrip.astro) ----------
 *
 *   .soul-souler                   Div block <section>, dentro de .soul-home-top
 *     .soul-souler__inner          girado -6°
 *       .soul-souler__row          fila gris: iconos y texto
 *         .soul-souler__icon.soul-souler__icon--lines
 *         Párrafo .soul-souler__text   "¡I'm a natural<br> born souler!"
 *         .soul-souler__icon--planet, .soul-souler__icon--heart
 *
 * main.js clona la fila en una copia blanca (.soul-souler__row--reveal)
 * encima de la gris y la va descubriendo de izquierda a derecha según se
 * hace scroll (--souler-wipe, con algo de inercia). Los iconos son
 * máscaras de los SVG, así toman el color de cada fila. El padding de
 * abajo deja sitio a la franja .soul-home-top__band.
 */
.elementor .soul-souler {
  position: relative;
  padding: 2.5rem 0 16rem;
}

@media (min-width: 640px) {
  .elementor .soul-souler {
    padding-block: 4rem 18rem;
  }
}

@media (min-width: 768px) {
  .elementor .soul-souler {
    padding-block: 8rem 24rem;
  }
}

.elementor .soul-souler__inner {
  position: relative;
  width: fit-content;
  max-width: 56rem;
  margin-inline: auto;
  padding: 0;
  transform: rotate(-6deg);
}

.elementor .soul-souler__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 0;
  color: #3f3f46; /* zinc-700 de Tailwind: gris de reposo, no es un token */
}

.elementor .soul-souler__row--reveal {
  position: absolute;
  inset: 0;
  color: var(--blanco-soul);
  clip-path: inset(0 var(--souler-wipe, 100%) 0 0);
}

/* En el editor no hay copia blanca: la gris se ve en blanco. */
.elementor-editor-active .soul-souler__row {
  color: var(--blanco-soul);
}

@media (min-width: 640px) {
  .elementor .soul-souler__row {
    gap: 2.5rem;
  }
}

.elementor .soul-souler__icon {
  width: auto;
  min-width: 0;
  height: 1.25rem;
  padding: 0;
  background-color: currentColor;
  mask: var(--soul-icon) no-repeat center / contain;
}

@media (min-width: 640px) {
  .elementor .soul-souler__icon {
    height: 2.25rem;
  }
}

.soul-souler__icon--lines {
  --soul-icon: url('../svg/lines.svg');
  aspect-ratio: 77 / 29;
}

.soul-souler__icon--planet {
  --soul-icon: url('../svg/planet.svg');
  aspect-ratio: 57 / 35;
}

.soul-souler__icon--heart {
  --soul-icon: url('../svg/heart.svg');
  aspect-ratio: 35 / 32;
}

.elementor .soul-souler__text {
  font-family: var(--font-decorative), cursive;
  font-size: var(--text-2xl);
  line-height: 2rem;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: default;
}

@media (min-width: 640px) {
  .elementor .soul-souler__text {
    font-size: var(--text-3xl);
    line-height: 2.25rem;
  }
}

@media (min-width: 768px) {
  .elementor .soul-souler__text {
    font-size: var(--text-4xl);
    line-height: 2.5rem;
  }
}

/* El salto de línea solo en pantallas estrechas. */
@media (min-width: 1024px) {
  .elementor .soul-souler__text br {
    display: none;
  }
}

/* ---------- Home: Catering (src/sections/Catering.astro) ----------
 *
 *   .soul-catering                 Div block <section>, fondo blanco-soul
 *     .soul-catering__stage        ancho y márgenes; sube sobre el bloque negro
 *       .soul-catering__card.reveal    tarjeta rosa con efecto "unfold"
 *         Imagen .soul-catering__paper     textura de papel en multiply
 *         .soul-catering__watermark        isotipo negro al 10 %
 *         .soul-catering__grid             2 columnas desde 1280px
 *           .soul-catering__content
 *             Título h2 .soul-catering__title  (los <span> van en blanco)
 *             .soul-catering__body > Párrafos
 *             .soul-catering__actions
 *               Div block .button-secondary  "Contacta" (Párrafo + SVG .button-icon)
 *               Imagen .soul-catering__stamp   sello "¡Aplasta Soul!"
 *           .soul-catering__photo-frame        marco (sombra, giro y cinta)
 *             Imagen .soul-catering__photo     foodtruck con borde blanco
 *
 * El escenario sube sobre el bloque negro con "translate" y la tarjeta entra
 * con "scale", así el efecto de entrada no pisa el desplazamiento.
 *
 * Sombra de papel (la luz viene de arriba a la izquierda):
 * - drop-shadow en tres capas sobre el escenario (contacto, media y halo),
 *   que sigue el borde irregular de la tarjeta;
 * - ::before y ::after del escenario: dos bloques sin fondo, detrás de las
 *   esquinas de abajo y girados hacia fuera, que solo proyectan sombra. Así
 *   las esquinas parecen más levantadas que el centro (la derecha, más).
 */
.elementor .soul-catering {
  position: relative;
  padding: 0;
  background-color: var(--blanco-soul);
}

.elementor .soul-catering__stage {
  --stage-pad: 1rem;
  position: relative;
  z-index: 10;
  max-width: 56rem;
  margin: 0 auto -9rem;
  padding: 0 var(--stage-pad);
  translate: 0 -12rem;
  filter:
    drop-shadow(1px 1px 1px rgb(0 0 0 / 0.18))
    drop-shadow(3px 6px 8px rgb(0 0 0 / 0.12))
    drop-shadow(4px 18px 32px rgb(0 0 0 / 0.1));
}

@media (min-width: 640px) {
  .elementor .soul-catering__stage {
    --stage-pad: 1.5rem;
  }
}

@media (min-width: 768px) {
  .elementor .soul-catering__stage {
    translate: 0 -14rem;
  }
}

@media (min-width: 1024px) {
  .elementor .soul-catering__stage {
    --stage-pad: 2rem;
  }
}

@media (min-width: 1280px) {
  .elementor .soul-catering__stage {
    max-width: 79rem;
  }
}

/* Esquinas levantadas: z-index -1 las deja detrás de la tarjeta (el
   escenario es su propio contexto de apilamiento). */
/* El spread negativo encoge la sombra para que solo asome por debajo de la
   tarjeta y nunca por los laterales (al girar, el bloque saca la esquina
   hacia fuera). */
.elementor .soul-catering__stage::before,
.elementor .soul-catering__stage::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: auto; /* el ::before de un Div block trae top: 0 de Elementor (.e-con) */
  bottom: 16px;
  width: 38%;
  height: 4rem;
  transition: opacity 0.7s;
}

.elementor .soul-catering__stage::before {
  left: calc(var(--stage-pad) + 24px);
  box-shadow: 0 14px 12px -8px rgb(0 0 0 / 0.22);
  transform: rotate(-2deg);
}

.elementor .soul-catering__stage::after {
  right: calc(var(--stage-pad) + 24px);
  box-shadow: 0 16px 14px -8px rgb(0 0 0 / 0.28);
  transform: rotate(2.5deg);
}

/* Las sombras de las esquinas aparecen con la tarjeta, no antes. */
.soul-js .elementor .soul-catering__stage:not(:has(.is-revealed))::before,
.soul-js .elementor .soul-catering__stage:not(:has(.is-revealed))::after {
  opacity: 0;
}

.elementor-editor-active .elementor .soul-catering__stage::before,
.elementor-editor-active .elementor .soul-catering__stage::after {
  opacity: 1;
}

/* Borde de papel: los lados se desvían 0–4px de la línea recta, distinto
   en cada tramo y en cada esquina, como papel que no está del todo plano. */
.elementor .soul-catering__card {
  position: relative;
  overflow: hidden;
  padding: 0;
  background-color: var(--rosa-soul-lighter);
  clip-path: polygon(
    /* arriba */
    0 3px, 7% 1px, 16% 3px, 27% 0, 39% 2px, 52% 4px, 64% 1px, 76% 3px, 88% 0, calc(100% - 1px) 2px,
    /* derecha */
    100% 9%, calc(100% - 3px) 21%, calc(100% - 1px) 34%, 100% 48%, calc(100% - 4px) 61%,
    calc(100% - 1px) 74%, 100% 87%,
    /* abajo */
    calc(100% - 2px) calc(100% - 3px), 93% 100%, 81% calc(100% - 3px), 69% calc(100% - 1px),
    57% 100%, 45% calc(100% - 4px), 33% calc(100% - 1px), 21% 100%, 10% calc(100% - 2px),
    2px calc(100% - 1px),
    /* izquierda */
    0 88%, 3px 75%, 1px 62%, 0 49%, 2px 36%, 0 23%, 3px 11%
  );
}

/* Luz y sombra muy suaves: la esquina de arriba a la derecha parece más
   levantada que la de abajo a la izquierda. */
.elementor .soul-catering__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 100% 0%, rgb(255 255 255 / 0.14), transparent 45%),
    radial-gradient(ellipse at 0% 100%, rgb(0 0 0 / 0.07), transparent 50%);
  pointer-events: none;
}

/* Entrada "unfold": la tarjeta crece de 0.92 a 1 con un rebote. Sustituye
   al fade + subida genérico de .reveal. */
.soul-js .elementor .soul-catering__card.reveal {
  opacity: 0;
  transform: none;
  scale: 0.92;
  transition-property: scale, opacity;
  transition-duration: 0.7s;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.soul-js .elementor .soul-catering__card.reveal.is-revealed,
.elementor-editor-active .elementor .soul-catering__card.reveal {
  opacity: 1;
  scale: 1;
}

.elementor .soul-catering__paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.elementor .soul-catering__watermark {
  position: absolute;
  bottom: -5rem;
  left: -6.25rem;
  width: 31.25rem;
  aspect-ratio: 233 / 171;
  padding: 0;
  background-color: var(--negro-soul);
  mask: url('../svg/isotipo.svg') no-repeat center / contain;
  opacity: 0.1;
  mix-blend-mode: multiply;
  transform: rotate(-12deg);
  pointer-events: none;
}

.elementor .soul-catering__grid {
  position: relative;
  display: grid;
  gap: 4rem;
  padding: 3rem 1.5rem;
}

@media (min-width: 640px) {
  .elementor .soul-catering__grid {
    padding-inline: 2.5rem;
  }
}

@media (min-width: 1280px) {
  .elementor .soul-catering__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5rem;
    padding: 4rem 5rem;
  }
}

.elementor .soul-catering__content {
  padding: 0;
}

.elementor .soul-catering__title {
  display: block;
  color: var(--negro-soul);
  font-family: var(--font-heading), sans-serif;
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-transform: uppercase;
  cursor: default;
}

.elementor .soul-catering__title span {
  color: var(--blanco-soul);
}

@media (min-width: 640px) {
  .elementor .soul-catering__title {
    font-size: var(--text-5xl);
  }
}

.elementor .soul-catering__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 0;
}

.elementor .soul-catering__body p {
  color: var(--negro-soul);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.625;
}

.elementor .soul-catering__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 2rem;
  padding: 0;
}

@media (min-width: 640px) {
  .elementor .soul-catering__actions {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
  }
}

.elementor .soul-catering__stamp {
  width: 250px;
  height: auto;
  margin-inline-start: auto;
  padding-right: 1.5rem;
  mix-blend-mode: lighten;
  transform: rotate(-6deg);
}

@media (min-width: 640px) {
  .elementor .soul-catering__stamp {
    margin-inline-start: 0;
  }
}

/* Foto del foodtruck como una copia impresa pegada al papel: borde blanco,
   borde algo irregular, un poco girada, con sombra propia (luz de arriba a
   la izquierda, como la tarjeta) y un trozo de cinta arriba (::before).
   La sombra va en el marco para que siga el borde irregular de la foto. */
.elementor .soul-catering__photo-frame {
  position: relative;
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
  padding: 0;
  transform: rotate(1.5deg);
  filter:
    drop-shadow(1px 1px 1px rgb(0 0 0 / 0.2))
    drop-shadow(3px 8px 10px rgb(0 0 0 / 0.16));
}

/* Cinta: blanco translúcido con los extremos rasgados. */
.elementor .soul-catering__photo-frame::before {
  content: '';
  position: absolute;
  top: -0.75rem;
  left: 50%;
  z-index: 1;
  width: 7rem;
  height: 1.75rem;
  background-color: color-mix(in srgb, var(--blanco-soul) 55%, transparent);
  clip-path: polygon(
    2% 0, 98% 0, 100% 20%, 97% 40%, 100% 60%, 97% 80%, 99% 100%,
    1% 100%, 3% 80%, 0 60%, 3% 40%, 0 20%
  );
  transform: translateX(-50%) rotate(-3deg);
  pointer-events: none;
}

.elementor .soul-catering__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  padding: 0.625rem;
  background-color: var(--blanco-soul);
  object-fit: cover;
  clip-path: polygon(
    0 1px, 23% 0, 48% 2px, 74% 0, calc(100% - 1px) 1px,
    100% 31%, calc(100% - 2px) 58%, 100% 82%, calc(100% - 1px) calc(100% - 1px),
    71% 100%, 44% calc(100% - 2px), 19% 100%, 1px calc(100% - 1px),
    0 69%, 2px 42%, 0 17%
  );
}

@media (min-width: 1280px) {
  .elementor .soul-catering__photo-frame {
    max-width: none;
    height: 100%;
    transform: rotate(1deg);
  }

  .elementor .soul-catering__photo {
    height: 100%;
    aspect-ratio: auto;
  }
}

/* ---------- Home: Reviews (src/sections/Reviews.astro) ----------
 *
 *   .soul-reviews                  Div block <section>, fondo blanco-soul
 *     .soul-reviews__inner.soul-container
 *       Título h2 .soul-reviews__title.reveal   (la negrita va en rosa)
 *       .soul-reviews__grid.reveal-group        3 columnas desde 768px
 *         .soul-review.reveal (+ reveal-delay-1/2)  ×3
 *           Párrafo .soul-review__mark     comilla rosa
 *           Párrafo .soul-review__quote
 *           Párrafo .soul-review__name
 *           Párrafo .soul-review__role
 *       .soul-reviews__cta
 *         Botón .button-primary.reveal.reveal-delay-2   "¡Déjanos tu reseña en Google!"
 *
 * Las 5 estrellas (::before del nombre) las pinta el CSS.
 */
.elementor .soul-reviews {
  position: relative;
  padding: 0;
  background-color: var(--blanco-soul);
}

.elementor .soul-reviews__inner {
  padding-block: var(--spacing-section);
}

.elementor .soul-reviews__title {
  display: block;
  color: var(--negro-soul);
  font-family: var(--font-heading), sans-serif;
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  cursor: default;
}

.elementor .soul-reviews__title strong {
  color: var(--rosa-soul);
  font-weight: inherit;
}

@media (min-width: 640px) {
  .elementor .soul-reviews__title {
    font-size: var(--text-5xl);
  }
}

.elementor .soul-reviews__grid {
  display: grid;
  gap: 2.5rem;
  margin-top: 4rem;
  padding: 0;
}

@media (min-width: 768px) {
  .elementor .soul-reviews__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.elementor .soul-review {
  padding: 2rem;
  background-color: var(--negro-soul);
  box-shadow: 10px 10px 0 0 var(--rosa-soul);
}

/* Comilla decorativa: un elemento más de la tarjeta (dentro del padding).
   Con line-height 1 el glifo de Karantina se sale de su caja por arriba;
   con 1.25 queda dentro. El glifo solo ocupa la parte de arriba de esa
   línea de 60px, así que la caja se recorta a 28px para que el párrafo no
   quede lejos. */
.elementor .soul-review__mark {
  display: block;
  height: 1.75rem;
  color: var(--rosa-soul);
  font-family: var(--font-heading), sans-serif;
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: 1.25;
  cursor: default;
}

.elementor .soul-review__quote,
.elementor .soul-review__name,
.elementor .soul-review__role {
  color: var(--blanco-soul);
  font-family: var(--font-sans), system-ui, sans-serif;
  cursor: default;
}

.elementor .soul-review__quote {
  margin-top: 0.75rem;
  font-size: var(--text-base);
  line-height: 1.625;
}

/* 5 estrellas encima del nombre: star.svg repetida con "space" (18px y
   4px de separación). */
.elementor .soul-review__name {
  margin-top: 1.5rem;
  font-weight: 700;
}

.elementor .soul-review__name::before {
  content: '';
  display: block;
  width: calc(5 * 18px + 4 * 4px);
  height: 18px;
  margin-bottom: 1rem;
  background: url('../svg/star.svg') 0 0 / 18px 18px space no-repeat;
}

.elementor .soul-review__role {
  color: color-mix(in srgb, var(--blanco-soul) 70%, transparent);
  font-size: var(--text-sm);
  line-height: 1.25rem;
}

.elementor .soul-reviews__cta {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
  padding: 0;
}

/* ---------- Home: JoinUs (src/sections/JoinUs.astro) ----------
 *
 *   .soul-joinus                   Div block <section>
 *     Imagen .soul-joinus__bg      foto del rótulo a sangre
 *     .soul-joinus__overlay        negro al 85 %
 *     .soul-joinus__inner          columna centrada de 672px
 *       Título h2 .soul-joinus__title.reveal   (la negrita va en rosa)
 *       .soul-joinus__body.reveal.reveal-delay-1 > Párrafos
 *         el último con .soul-joinus__perks: iconos de hamburguesa y fuego al final
 *       .soul-joinus__cta.reveal.reveal-delay-2
 *         Div block .button-secondary  "Enviar CV" (Párrafo + SVG .button-icon)
 */
.elementor .soul-joinus {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: var(--spacing-section) 0;
}

.elementor .soul-joinus__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.elementor .soul-joinus__overlay {
  position: absolute;
  inset: 0;
  padding: 0;
  background-color: color-mix(in srgb, var(--negro-soul) 85%, transparent);
}

.elementor .soul-joinus__inner {
  position: relative;
  z-index: 10;
  max-width: 42rem;
  margin-inline: auto;
  padding: 0 1rem;
  text-align: center;
}

@media (min-width: 640px) {
  .elementor .soul-joinus__inner {
    padding-inline: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .elementor .soul-joinus__inner {
    padding-inline: 2rem;
  }
}

.elementor .soul-joinus__title {
  display: block;
  color: var(--blanco-soul);
  font-family: var(--font-heading), sans-serif;
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-transform: uppercase;
  cursor: default;
}

.elementor .soul-joinus__title strong {
  color: var(--rosa-soul);
  font-weight: inherit;
}

@media (min-width: 640px) {
  .elementor .soul-joinus__title {
    font-size: var(--text-5xl);
  }
}

.elementor .soul-joinus__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 0;
}

.elementor .soul-joinus__body p {
  color: var(--blanco-soul);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: var(--text-lg);
  line-height: 1.625;
  text-wrap: balance;
}

/* Hamburguesa (0.9em) y fuego (1.2em) al final del texto, separados 12px.
   Los dos SVG son blancos. */
.elementor .soul-joinus__perks::after {
  content: '';
  display: inline-block;
  width: calc(0.9em * 12 / 10 + 0.75rem + 1.2em);
  height: 1.2em;
  margin-left: 0.5rem;
  vertical-align: middle;
  background:
    url('../svg/burger-icon.svg') left center / auto 0.9em no-repeat,
    url('../svg/fire-icon.svg') right center / auto 1.2em no-repeat;
}

.elementor .soul-joinus__cta {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  padding: 0;
}

/* ---------- Home: Social (src/sections/Social.astro) ----------
 *
 *   .soul-follow                   Div block <section>, fondo negro
 *     Imagen .soul-follow__bg      ladrillo a sangre
 *     .vignette.vignette--no-top.soul-follow__vignette   funde abajo con negro
 *     .soul-follow__inner.soul-container
 *       .soul-follow__ig
 *         Imagen .soul-follow__stamp      "It's not the same" en overlay, girada
 *         .soul-follow__ig-grid           2 columnas desde 1024px
 *           .soul-follow__ig-text
 *             Título h2 .soul-follow__title.soul-follow__title--instagram.reveal
 *             .soul-follow__cta.reveal.reveal-delay-1
 *               Div block .button-outline  (Párrafo + SVG .button-icon de Instagram)
 *           .soul-follow__posts.reveal-group
 *             .soul-follow__tile.soul-follow__tile--post.reveal ×4
 *       .soul-follow__yt
 *         Título h2 .soul-follow__title.soul-follow__title--youtube.reveal
 *         .soul-follow__videos.reveal-group
 *           .soul-follow__tile.soul-follow__tile--video.reveal ×3
 *         .soul-follow__cta.reveal.reveal-delay-2
 *           Div block .button-outline  (Párrafo + SVG .button-icon de YouTube)
 *
 * Prefijo soul-follow (no soul-social, que es la clase de los iconos del
 * footer). Las publicaciones y vídeos son huecos de relleno (como en Astro): cuadros
 * con un icono pintado por CSS. En los títulos, la negrita lleva el color
 * de la red (degradado de Instagram, rojo de YouTube).
 */
.elementor .soul-follow {
  position: relative;
  overflow: hidden;
  padding: var(--spacing-section-lg) 0;
  background-color: var(--negro-soul);
}

/* Ladrillo al 45 % sobre el negro de la sección: textura de fondo, sin
   competir con títulos y huecos. */
.elementor .soul-follow__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.elementor .soul-follow__vignette {
  position: absolute;
  inset: 0;
  padding: 0;
}

.elementor .soul-follow__inner {
  position: relative;
}

.elementor .soul-follow__ig {
  position: relative;
  padding: 0;
}

.elementor .soul-follow__stamp {
  position: absolute;
  top: 6rem;
  left: 5.25rem;
  width: 14rem;
  height: auto;
  aspect-ratio: 313 / 326;
  mix-blend-mode: overlay;
  transform: rotate(-12deg);
  pointer-events: none;
  user-select: none;
}

@media (min-width: 640px) {
  .elementor .soul-follow__stamp {
    top: 7rem;
    width: 18rem;
  }
}

@media (min-width: 1024px) {
  .elementor .soul-follow__stamp {
    top: 10.5rem;
    width: 20rem;
  }
}

.elementor .soul-follow__ig-grid {
  position: relative;
  z-index: 10;
  display: grid;
  gap: 2.5rem;
  padding: 0;
}

@media (min-width: 1024px) {
  .elementor .soul-follow__ig-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 4rem;
  }
}

.elementor .soul-follow__ig-text {
  padding: 0;
}

.elementor .soul-follow__title {
  display: block;
  color: var(--blanco-soul);
  font-family: var(--font-heading), sans-serif;
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-transform: uppercase;
  cursor: default;
}

@media (min-width: 640px) {
  .elementor .soul-follow__title {
    font-size: var(--text-5xl);
  }
}

/* Colores de cada red (no son tokens de la marca). */
.elementor .soul-follow__title--instagram strong {
  font-weight: inherit;
  background-image: linear-gradient(to right, #ff3d5c, var(--rosa-soul), #ffb84d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.elementor .soul-follow__title--youtube strong {
  font-weight: inherit;
  color: #f00;
}

.elementor .soul-follow__cta {
  margin-top: 1.5rem;
  padding: 0;
}

.elementor .soul-follow__posts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 0;
}

.elementor .soul-follow__tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--blanco-soul) 10%, transparent);
  background-color: color-mix(in srgb, var(--blanco-soul) 5%, transparent);
}

/* Publicación: cuadrado con el icono de imagen. */
.elementor .soul-follow__tile--post {
  aspect-ratio: 1;
}

/* Los Div block llevan .e-con, y Elementor pone su ::before en absoluto
   arriba a la izquierda (lo usa para el overlay): aquí se devuelve al flujo
   para que el flex lo centre. */
.elementor .soul-follow__tile::before {
  position: relative;
  inset: auto;
}

.elementor .soul-follow__tile--post::before {
  content: '';
  width: 28px;
  height: 28px;
  background-color: color-mix(in srgb, var(--blanco-soul) 30%, transparent);
  mask: url('../svg/icon-image.svg') no-repeat center / contain;
}

/* Vídeo: 16:9 con el botón de play (círculo rojo y triángulo blanco en un
   solo SVG). */
.elementor .soul-follow__tile--video {
  aspect-ratio: 16 / 9;
}

.elementor .soul-follow__tile--video::before {
  content: '';
  width: 3.5rem;
  height: 3.5rem;
  background: url('../svg/youtube-play.svg') center / contain no-repeat;
}

.elementor .soul-follow__yt {
  position: relative;
  z-index: 10;
  margin-top: 6rem;
  padding: 0;
  text-align: center;
}

@media (min-width: 640px) {
  .elementor .soul-follow__yt {
    margin-top: 8rem;
  }
}

.elementor .soul-follow__videos {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding: 0;
}

@media (min-width: 640px) {
  .elementor .soul-follow__videos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.elementor .soul-follow__yt .soul-follow__cta {
  margin-top: 2.5rem;
}

/* ---------- Home: DyeTrying (src/sections/DyeTrying.astro) ----------
 *
 *   .soul-dye                      Div block <section>, fondo negro
 *     .soul-dye__frame             3:1, como mucho 1400px
 *       Imagen .soul-dye__img.reveal   neón en "screen", algo ampliado
 *       .vignette.vignette--sides.soul-dye__vignette
 *
 * El desplazamiento y el zoom van con "translate" y "scale" (no transform),
 * porque .reveal usa transform para su entrada. La entrada es más lenta que
 * en el resto de la web: es la última pieza de la home.
 */
.elementor .soul-dye {
  padding: 2rem 0 4rem;
  background-color: var(--negro-soul);
}

.elementor .soul-dye__frame {
  position: relative;
  max-width: 87.5rem;
  margin-inline: auto;
  overflow: hidden;
  aspect-ratio: 3 / 1;
  padding: 0;
}

.elementor .soul-dye__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  translate: -5% 0;
  scale: 1.15;
}

.soul-js .elementor .soul-dye__img.reveal {
  transition-delay: 0.3s;
  transition-duration: 1.1s;
}

.elementor .soul-dye__vignette {
  position: absolute;
  inset: 0;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .soul-js .elementor .soul-catering__card.reveal,
  .elementor .soul-catering__stage::before,
  .elementor .soul-catering__stage::after {
    scale: 1;
    transition: none;
  }

  .elementor .soul-press__img,
  .elementor .soul-press__overlay,
  .elementor .soul-home-top__texture {
    transition: none;
  }

  .elementor .soul-hero__bg {
    --reveal: 100%;
    animation: none;
  }
}

/* ---------- Carta (página 59, loops del plugin soul-carta) ----------
 *
 *   .soul-page-header … h1.soul-page-title  (Karantina blanca, sin grafiti)
 *   nav.soul-menu-nav                        barra fija bajo el header
 *     .soul-container.soul-menu-nav__list
 *       Div block <a> .soul-menu-nav__link ×N   enlace "#<id de la categoría>"
 *         SVG .soul-menu-nav__icon  (un color: toma el del texto)
 *         Párrafo <span> .soul-menu-nav__text
 *   .soul-menu-body > .soul-container.soul-stack.soul-stack--lg
 *     section.soul-menu-cat.soul-stack  (ID = slug: burgers, entrantes…)
 *       .soul-menu-cat__head
 *         h2.soul-section-title.soul-title-graffiti
 *         SVG .soul-menu-cat__icon  (rosa; su negro se pinta en blanco)
 *       loop con layout .soul-menu-grid  → items .soul-product (tarjeta con foto)
 *       loop con layout .soul-menu-list  → items .soul-menu-row (fila sin foto)
 *     En Burgers, entre el título y los loops: .soul-stack.soul-stack--md con
 *     dos bloques (h3.soul-subsection-title + loop).
 *
 * main.js (initMenuNav) marca la categoría visible en la barra, centra su
 * enlace en móvil y pone .is-stuck a la barra cuando está pegada.
 */
.elementor .soul-menu-nav {
  --menu-nav-height: 3.5rem;
  position: sticky;
  top: var(--header-offset);
  z-index: 40;
  transition: top 0.3s ease;
  padding: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--blanco-soul) 10%, transparent);
  background-color: var(--negro-soul);
}

/* Con el header oculto, la barra sube hasta arriba (o bajo la barra de
   admin, si es fija). La banda negra de .is-stuck queda fuera de pantalla. */
.soul-header-hidden .elementor .soul-menu-nav {
  top: 0;
}

@media (min-width: 601px) {
  .soul-header-hidden .admin-bar .elementor .soul-menu-nav {
    top: var(--wp-admin--admin-bar--height, 32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .soul-header-autohide .elementor .soul-header,
  .elementor .soul-menu-nav {
    transition: none;
  }
}

/* Pegada: banda negra por encima, detrás del header transparente, para que
   no se vea pasar el contenido. (::after, no ::before: el ::before de un
   Div block lo posiciona Elementor.) */
.elementor .soul-menu-nav.is-stuck::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  height: var(--header-height);
  background-color: var(--negro-soul);
}

.elementor .soul-menu-nav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.elementor .soul-menu-nav__list::-webkit-scrollbar {
  display: none;
}

.elementor .soul-menu-nav__link {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  min-height: var(--menu-nav-height);
  padding: 0 1.25rem;
  border-radius: 0;
  background-color: transparent;
  color: color-mix(in srgb, var(--blanco-soul) 70%, transparent);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  scroll-snap-align: center;
  transition: background-color 0.15s, color 0.15s;
}

.elementor .soul-menu-nav__link:hover,
.elementor .soul-menu-nav__link:focus-visible {
  background-color: transparent;
  color: var(--blanco-soul);
}

.elementor .soul-menu-nav__link.is-active,
.elementor .soul-menu-nav__link.is-active:hover {
  background-color: var(--rosa-soul);
  color: var(--negro-soul);
}

/* Icono de la tab: SVG de un color, con fill="currentColor" en sus trazos,
   así que sigue al texto (blanco, y negro en la activa). */
.elementor .soul-menu-nav__icon {
  flex-shrink: 0;
  width: 1.375rem;
  height: 1.375rem;
}

.elementor .soul-menu-nav__text {
  cursor: inherit;
}

/* Marca que crea main.js justo antes de la barra para saber si está pegada. */
.soul-menu-nav-sentinel {
  height: 1px;
}

/* Contenido de la carta: poco aire arriba (va justo bajo la barra) y el
   espacio normal de sección abajo. */
.elementor .soul-menu-body {
  padding: calc(4rem * 2 / 3) 0 calc(var(--spacing-section) * 2 / 3);
}

@media (min-width: 768px) {
  .elementor .soul-menu-body {
    padding-block: 4rem var(--spacing-section);
  }
}

/* Al entrar con un "#id" en la URL, el título queda bajo header + barra (con
   su borde) + 24px: la misma línea que usa main.js para el salto de las tabs
   y para marcar la activa. */
.elementor .soul-menu-cat {
  scroll-margin-top: calc(var(--header-offset) + 3.5rem + 1px + 1.5rem); /* 3.5rem = --menu-nav-height */
}

/* Cabecera de categoría: título a la izquierda e icono pegado a la derecha,
   centrados en altura. */
.elementor .soul-menu-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0;
}

.elementor .soul-menu-cat__icon {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
}

/* El negro de los SVG (#0D0D0D) no se ve sobre el fondo: va en blanco. */
.soul-menu-cat__icon [fill='#0D0D0D' i] {
  fill: var(--blanco-soul);
}

@media (min-width: 640px) {
  .elementor .soul-menu-cat__head {
    gap: 1rem;
  }

  .elementor .soul-menu-cat__icon {
    width: 4.5rem;
    height: 4.5rem;
  }
}

.elementor .soul-subsection-title {
  display: block;
  color: color-mix(in srgb, var(--blanco-soul) 80%, transparent);
  font-family: var(--font-heading), sans-serif;
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  cursor: default;
}

/* Rejilla de tarjetas: 1 / 2 (≥640) / 3 (≥1024). La base del layout de
   Elementor iguala las filas con 1fr: aquí, auto. */
.elementor .soul-menu-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: 1.5rem;
  padding: 0;
}

@media (min-width: 640px) {
  .elementor .soul-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .elementor .soul-menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}

/* Tarjeta: foto a sangre arriba y textos con margen; los alérgenos van al
   pie para que las tarjetas de una fila igualen la base. */
.elementor .soul-product {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
  padding: 0 0 1.5rem;
  border: 1px solid color-mix(in srgb, var(--blanco-soul) 8%, transparent);
  background-color: color-mix(in srgb, var(--blanco-soul) 4%, var(--negro-soul));
}

.elementor .soul-product > :not(.soul-product__img) {
  margin-inline: 1.25rem;
}

.elementor .soul-product__img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0.75rem;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Producto sin foto: el mismo hueco con el isotipo de marca de agua. */
.elementor .soul-product__img:not([src]) {
  background: url('../svg/isotipo.svg') center / 40% auto no-repeat;
  opacity: 0.15;
}

.elementor .soul-product__name {
  display: block;
  color: var(--blanco-soul);
  font-family: var(--font-heading), sans-serif;
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  cursor: default;
}

.elementor .soul-product__desc {
  color: color-mix(in srgb, var(--blanco-soul) 75%, transparent);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.elementor .soul-product__allergens {
  margin-top: auto;
  padding-top: 0.5rem;
  color: color-mix(in srgb, var(--blanco-soul) 45%, transparent);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  line-height: 1rem;
  text-transform: uppercase;
}

/* Lista sin fotos (Cervezas, Bebidas): filas con línea inferior; 2
   columnas desde 768px. */
.elementor .soul-menu-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: 0 3rem;
  padding: 0;
}

@media (min-width: 768px) {
  .elementor .soul-menu-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.elementor .soul-menu-row {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--blanco-soul) 10%, transparent);
}

.elementor .soul-menu-row .soul-product__name {
  font-size: var(--text-2xl);
}

.elementor .soul-menu-row .soul-product__allergens {
  margin-top: 0;
  padding-top: 0.25rem;
}