/*
 * Base del sistema de diseño (equivalente a src/styles/global.css de Astro).
 *
 * Los colores, fuentes y tamaños son variables de Elementor v4 que salen
 * en :root con su nombre: --rosa-soul, --negro-soul, --font-heading,
 * --text-sm, --spacing-section... Se definen en inc/design-tokens.php y se
 * vuelcan con `wp soul tokens sync`. Aquí no se repiten valores.
 *
 * Breakpoints: los de Tailwind en Astro (sm 640, md 768, lg 1024). En el
 * panel de Elementor: móvil ≤767 (≈ md) y tablet ≤1024 (≈ lg).
 */

/* ---------- Elementos ---------- */

body {
  font-family: var(--font-sans), system-ui, sans-serif;
  line-height: 1.5;
}

/* Como el preflight de Tailwind: sin márgenes ni pesos heredados de Hello
   Elementor; el espaciado lo dan los gap/padding de cada sección. */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

h2 {
  text-transform: uppercase;
}

a {
  color: inherit;
}

/* ---------- Tipografía ---------- */

/* Karantina siempre en bold en los títulos (en Astro, regla .font-heading). */
h1,
h2,
.font-heading {
  font-family: var(--font-heading), sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.font-sans {
  font-family: var(--font-sans), system-ui, sans-serif;
}

.font-decorative {
  font-family: var(--font-decorative), cursive;
  font-weight: 400;
  letter-spacing: normal;
}

.font-graffiti {
  font-family: var(--font-graffiti), cursive;
  font-weight: 400;
  letter-spacing: normal;
}

/* ---------- Layout ---------- */

/* max-w-7xl + px-4 sm:px-6 lg:px-8. Con ".elementor" para ganar al
   padding: 10px de los Div block atómicos. */
.soul-container,
.elementor .soul-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-block: 0;
  padding-inline: 1rem;
}

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

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

/* Secciones: espacio vertical estándar (96px) o amplio (144px); por debajo
   de 768px, 2/3 (64px / 96px). */
.soul-section,
.elementor .soul-section {
  padding-block: var(--spacing-section);
}

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

/* Sin padding lateral (el del Div block descuadraría el contenedor de
   dentro), salvo que la sección sea a la vez el .soul-container. */
.elementor :is(.soul-section, .soul-section-lg):not(.soul-container) {
  padding-inline: 0;
}

@media (max-width: 767px) {
  .soul-section,
  .elementor .soul-section {
    padding-block: calc(var(--spacing-section) * 2 / 3);
  }

  .soul-section-lg,
  .elementor .soul-section-lg {
    padding-block: calc(var(--spacing-section-lg) * 2 / 3);
  }
}

/* Los loops atómicos (Atomic Loop) llevan .e-con y heredan el padding por
   defecto de los contenedores de Elementor (10px): sin él, su contenido se
   alinea con el resto del .soul-container. */
.elementor .e-collection-loop-base {
  padding: 0;
}

/* ---------- Estructura de página ----------
 *
 * Base común para las páginas interiores (Carta, Contacto…). Todo lo
 * alineado a la izquierda cae en la misma línea porque cuelga de un
 * .soul-container (el mismo que usa el header):
 *
 *   .soul-page-header                       banda negra bajo el header fijo
 *     .soul-container > h1.soul-page-title
 *   section.soul-section
 *     .soul-container.soul-stack.soul-stack--lg   bloques separados 80px
 *       .soul-stack                         título + contenido, separados 32px
 *         h2.soul-section-title             la negrita va en rosa
 *         contenido
 */
.soul-page-header,
.elementor .soul-page-header {
  padding: calc(var(--header-height) + 2rem) 0 2rem;
  background-color: var(--negro-soul);
}

@media (min-width: 768px) {
  .soul-page-header,
  .elementor .soul-page-header {
    padding-block: calc(var(--header-height) + 3rem) 3rem;
  }
}

/* Variante con imagen de fondo (.soul-page-header--image):
 *   Imagen .soul-page-header__bg        a sangre, recortada (cover)
 *   .soul-page-header__overlay          negro al 60 % arriba que llega al 100 % al 80 % del alto
 *   .soul-container > h1                encima, pegado abajo
 * El alto sigue la proporción de la foto (--page-header-ratio = ancho / alto;
 * 2356×479 en la Carta) para que se vea casi entera, con un mínimo para que
 * quepan el header fijo y el título. El título queda al pie. */
.elementor .soul-page-header--image {
  --page-header-ratio: 4.92;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: max(13rem, calc(100vw / var(--page-header-ratio)));
  overflow: hidden;
  isolation: isolate;
}

.elementor .soul-page-header--image > :not(.soul-page-header__bg, .soul-page-header__overlay) {
  position: relative;
  z-index: 1;
}

.elementor .soul-page-header__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.elementor .soul-page-header__overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background-image: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--negro-soul) 60%, transparent) 0%,
    color-mix(in srgb, var(--negro-soul) 90%, transparent) 80%,
    var(--negro-soul) 100%
  );
  pointer-events: none;
}

@media (min-width: 768px) {
  .elementor .soul-page-header--image {
    min-height: max(15rem, calc(100vw / var(--page-header-ratio)));
  }
}

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

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

/* Subtítulo bajo el h1 de la página (Párrafo con la clase). */
.soul-page-lead,
.elementor .soul-page-lead {
  display: block;
  margin-top: 0.75rem;
  color: color-mix(in srgb, var(--blanco-soul) 80%, transparent);
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: var(--text-sm);
  line-height: 1.5;
  cursor: default;
}

/* Desde tablet, en una sola línea (en móvil no cabe y salta). */
@media (min-width: 768px) {
  .soul-page-lead,
  .elementor .soul-page-lead {
    font-size: var(--text-base);
    white-space: nowrap;
  }
}

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

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

@media (min-width: 640px) {
  .soul-section-title,
  .elementor .soul-section-title {
    font-size: calc(var(--text-5xl) * 0.85);
  }
}

.soul-stack,
.elementor .soul-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Solo el gap: el padding lo pone .soul-container cuando van juntas. */
.elementor .soul-stack:not(.soul-container) {
  padding: 0;
}

.soul-stack--md,
.elementor .soul-stack--md {
  gap: 3rem;
}

@media (min-width: 768px) {
  .soul-stack--md,
  .elementor .soul-stack--md {
    gap: 3.5rem;
  }
}

.soul-stack--lg,
.elementor .soul-stack--lg {
  gap: 4rem;
}

@media (min-width: 768px) {
  .soul-stack--lg,
  .elementor .soul-stack--lg {
    gap: 5rem;
  }
}

/* Título con una palabra en grafiti rosa, marcada con <span> (no <strong>:
   es decorativa, no un énfasis): "Nuestra <span>carta</span>". Va junto a
   soul-page-title o soul-section-title. */
.soul-title-graffiti span {
  display: inline-block;
  margin-inline: 0.05em;
  color: var(--rosa-soul);
  font-family: var(--font-graffiti), cursive;
  font-size: 1.15em;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 0.9;
  transform: rotate(-3deg);
}

/* Spray: salpicado rosa hacia el final de la palabra, detrás del texto. Es
   un dibujo fijo (pocas gotas grandes y medianas pegadas a las letras, puntitos
   alrededor y un ruido fino repartido;
   fuente en assets/svg/spray.svg, aquí en línea con el # como %23) que se
   escala con el tamaño del texto (em), así que se ve igual en todos los títulos. */
.soul-title-graffiti span {
  position: relative;
  isolation: isolate;
}

.soul-title-graffiti span::after {
  content: '';
  position: absolute;
  top: -0.45em;
  right: -0.75em;
  z-index: -1;
  width: 2.8em;
  height: 1.7em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 170' fill='%23f912a4'%3E%3Ccircle cx='168' cy='133' r='6.8'/%3E%3Ccircle cx='206' cy='43' r='5.2'/%3E%3Ccircle cx='218' cy='91' r='3.4'/%3E%3Ccircle cx='195' cy='41' r='3.1'/%3E%3Ccircle cx='156' cy='51' r='3.1'/%3E%3Ccircle cx='210' cy='115' r='2.6'/%3E%3Ccircle cx='212' cy='67' r='2.7'/%3E%3Ccircle cx='187' cy='136' r='3.0'/%3E%3Ccircle cx='161' cy='69' r='1.4'/%3E%3Ccircle cx='123' cy='140' r='1.4'/%3E%3Ccircle cx='81' cy='122' r='0.5'/%3E%3Ccircle cx='82' cy='147' r='0.9'/%3E%3Ccircle cx='203' cy='66' r='1.3'/%3E%3Ccircle cx='185' cy='46' r='1.2'/%3E%3Ccircle cx='108' cy='141' r='1.0'/%3E%3Ccircle cx='216' cy='129' r='0.5'/%3E%3Ccircle cx='199' cy='75' r='1.2'/%3E%3Ccircle cx='215' cy='40' r='0.5'/%3E%3Ccircle cx='150' cy='132' r='1.2'/%3E%3Ccircle cx='161' cy='144' r='0.9'/%3E%3Ccircle cx='227' cy='119' r='0.6'/%3E%3Ccircle cx='117' cy='155' r='0.9'/%3E%3Ccircle cx='225' cy='53' r='1.3'/%3E%3Ccircle cx='70' cy='138' r='0.5'/%3E%3Ccircle cx='185' cy='65' r='1.2'/%3E%3Ccircle cx='225' cy='87' r='1.3'/%3E%3Ccircle cx='100' cy='137' r='0.9'/%3E%3Ccircle cx='14' cy='83' r='0.4'/%3E%3Ccircle cx='25' cy='37' r='0.3'/%3E%3Ccircle cx='169' cy='73' r='0.4'/%3E%3Ccircle cx='71' cy='69' r='0.3'/%3E%3Ccircle cx='73' cy='109' r='0.6'/%3E%3Ccircle cx='191' cy='147' r='0.6'/%3E%3Ccircle cx='179' cy='81' r='0.6'/%3E%3Ccircle cx='144' cy='77' r='0.6'/%3E%3Ccircle cx='64' cy='108' r='0.3'/%3E%3Ccircle cx='123' cy='82' r='0.6'/%3E%3Ccircle cx='104' cy='95' r='0.6'/%3E%3Ccircle cx='67' cy='157' r='0.6'/%3E%3Ccircle cx='19' cy='144' r='0.6'/%3E%3Ccircle cx='212' cy='146' r='0.3'/%3E%3Ccircle cx='170' cy='37' r='0.4'/%3E%3Ccircle cx='95' cy='50' r='0.6'/%3E%3Ccircle cx='84' cy='55' r='0.4'/%3E%3Ccircle cx='7' cy='121' r='0.4'/%3E%3Ccircle cx='46' cy='48' r='0.6'/%3E%3Ccircle cx='126' cy='24' r='0.5'/%3E%3Ccircle cx='73' cy='85' r='0.4'/%3E%3Ccircle cx='105' cy='62' r='0.5'/%3E%3Ccircle cx='220' cy='149' r='0.5'/%3E%3Ccircle cx='6' cy='138' r='0.6'/%3E%3Ccircle cx='111' cy='40' r='0.7'/%3E%3Ccircle cx='64' cy='86' r='0.7'/%3E%3Ccircle cx='10' cy='102' r='0.3'/%3E%3Ccircle cx='199' cy='125' r='0.6'/%3E%3Ccircle cx='85' cy='86' r='0.6'/%3E%3Ccircle cx='107' cy='104' r='0.6'/%3E%3Ccircle cx='69' cy='30' r='0.4'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  opacity: 0.8;
  pointer-events: none;
}

/* Unos pocos puntos al principio de la palabra (assets/svg/spray-start.svg). */
.soul-title-graffiti span::before {
  content: '';
  position: absolute;
  top: -0.45em;
  left: -0.5em;
  z-index: -1;
  width: 1.2em;
  height: 1.7em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 170' fill='%23f912a4'%3E%3Ccircle cx='40' cy='101' r='3.0'/%3E%3Ccircle cx='62' cy='89' r='1.2'/%3E%3Ccircle cx='32' cy='126' r='1.2'/%3E%3Ccircle cx='59' cy='100' r='0.7'/%3E%3Ccircle cx='51' cy='106' r='0.6'/%3E%3Ccircle cx='27' cy='130' r='1.1'/%3E%3Ccircle cx='32' cy='147' r='0.9'/%3E%3Ccircle cx='101' cy='105' r='0.4'/%3E%3Ccircle cx='112' cy='37' r='0.7'/%3E%3Ccircle cx='108' cy='47' r='0.4'/%3E%3Ccircle cx='95' cy='99' r='0.5'/%3E%3Ccircle cx='39' cy='116' r='0.4'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  opacity: 0.8;
  pointer-events: none;
}

/* Desplazamiento suave en páginas con barra de categorías (Carta), salvo si
   se pide reducir el movimiento. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.soul-menu-nav) {
    scroll-behavior: smooth;
  }
}

/* ---------- SVG ---------- */

.soul-svg > svg {
  display: block;
}

/* SVG al 100% del ancho de su wrapper (frames, marcas de agua, franjas). */
.svg-fill > svg {
  width: 100%;
  height: auto;
}

/* ---------- Botones (src/components/Button.astro) ----------
 *
 * Tres variantes, cada una es una clase global en Elementor:
 *   button-primary     fondo rosa, texto negro
 *   button-secondary   fondo blanco, texto negro
 *   button-outline     texto y borde blancos; al pasar el ratón se rellena de blanco
 *
 * Dos formas de montarlo en Elementor, con las mismas clases:
 *   - Solo texto: un Botón atómico con la clase de la variante.
 *   - Con icono: un Div block (etiqueta "a" o "button", con enlace) con la
 *     clase de la variante y dentro un Párrafo (etiqueta "span") con el texto
 *     y un SVG con la clase "button-icon". El icono puede ir delante o detrás,
 *     o no ir. Cualquier SVG subido se pinta con el color del texto.
 *
 * Extras: "button--disabled" (desactivado) y, dentro del texto, un <span>
 * sin clase va en minúsculas (p. ej. "Reservar en Madrid <span>(soon)</span>").
 * "soul-open-reserve" no es de estilo: abre el popup de reserva.
 *
 * El aspecto lo controla esta hoja: en el panel, solo márgenes y alineación.
 * Cada regla lleva la versión ".elementor ..." para ganar a los estilos base
 * de los widgets atómicos (".elementor .e-button-base", fondo azul; los Div
 * block, padding 10px y ancho 100 %).
 *
 * En primary y secondary, main.js envuelve el contenido en dos copias para el
 * hover (el texto sube y entra la copia desde abajo, con el icono incluido).
 * Sin JS, o en el editor, se ve el botón sin esa animación.
 */
:is(.button-primary, .button-secondary, .button-outline),
.elementor :is(.button-primary, .button-secondary, .button-outline) {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: auto;
  min-width: 0;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 0;
  font-family: var(--font-sans), system-ui, sans-serif;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.025em;
  line-height: 1.25rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.button-primary,
.button-primary:hover,
.button-primary:focus-visible,
.elementor .button-primary,
.elementor .button-primary:hover,
.elementor .button-primary:focus-visible {
  background: var(--rosa-soul-light);
  color: var(--negro-soul);
}

.button-secondary,
.button-secondary:hover,
.button-secondary:focus-visible,
.elementor .button-secondary,
.elementor .button-secondary:hover,
.elementor .button-secondary:focus-visible {
  background: var(--blanco-soul);
  color: var(--negro-soul);
}

.button-outline,
.elementor .button-outline {
  padding: 0.75rem 1rem;
  border: 1px solid var(--blanco-soul);
  background: transparent;
  color: var(--blanco-soul);
  font-weight: 700;
}

.button-outline:hover,
.button-outline:focus-visible,
.elementor .button-outline:hover,
.elementor .button-outline:focus-visible {
  background: var(--blanco-soul);
  color: var(--negro-soul);
}

/* <span> sin clase dentro del texto: en minúsculas. */
:is(.button-primary, .button-secondary, .button-outline) span:not([class]) {
  text-transform: none;
}

/* Icono: 18px y del color del texto (también en el hover de outline). Se
   sobrescriben fill y stroke de cualquier SVG subido, salvo los "none". */
.button-icon,
.elementor .button-icon {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  min-width: 0;
  padding: 0;
}

.button-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.button-icon :is(svg, svg *)[fill]:not([fill='none']) {
  fill: currentColor;
}

.button-icon :is(svg, svg *)[stroke]:not([stroke='none']) {
  stroke: currentColor;
}

/* Elementor cambia el fill de la raíz del SVG a currentColor al pintarlo.
   En los iconos de línea (con stroke en la raíz) eso los rellenaría: ahí la
   raíz vuelve a fill none (los trazos con fill propio siguen pintados). */
.button-icon svg[stroke]:not([stroke='none']) {
  fill: none;
}

/* Desactivado (main.js pone disabled o aria-disabled). */
.button--disabled,
.elementor .button--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Animación del texto que sube (primary y secondary). */
.button__track {
  position: relative;
  display: block;
  overflow: hidden;
}

.button__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform 0.3s ease-out;
}

.button__label--clone {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}

:is(.button-primary, .button-secondary):is(:hover, :focus-visible) .button__label {
  transform: translateY(-100%);
}

:is(.button-primary, .button-secondary):is(:hover, :focus-visible) .button__label--clone {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .button__label {
    transition: none;
  }
}