

html[data-pagina="web-restaurantes"] {
  --wr-col: calc((100% - 5 * var(--calle)) / 6);
}

[data-pagina="web-restaurantes"] .wr-cab { position: relative; }
.wr-cab__foto { position: absolute; inset: 0; z-index: 0; margin: 0; overflow: clip; background: var(--superficie-oscura); }
.wr-cab__foto picture { position: absolute; inset: 0; }
.wr-cab__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 42%; }
.wr-cab__velo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--fondo-oscuro) 78%, transparent) 0, transparent calc(var(--cab) + 120px)),
    linear-gradient(90deg, var(--fondo-oscuro) 0%, color-mix(in srgb, var(--fondo-oscuro) 90%, transparent) 30%, color-mix(in srgb, var(--fondo-oscuro) 45%, transparent) 46%, transparent 62%);
}
[data-pagina="web-restaurantes"] .wr-cab .wr-cab__int {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(640px, 92svh, 880px);
  padding-top: calc(var(--cab) + 48px);
  padding-bottom: clamp(56px, 11svh, 96px);
}


@media (min-width: 1024px) {
  html.con-lanza[data-pagina="web-restaurantes"] .wr-cab .wr-cab__int { padding-top: calc(var(--cab) + 34px); }
}
.wr-cab__texto { max-width: calc(50% - 12px); }
[data-pagina="web-restaurantes"] .wr-cab .lead { max-width: 26em; }
.wr-cab__rotulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.wr-cinco { display: inline-flex; align-items: center; gap: 10px; }
.wr-cinco__barra { position: relative; display: block; width: 160px; height: 2px; overflow: clip; background: color-mix(in srgb, var(--texto-secundario-sobre-oscuro) 45%, transparent); }
.wr-cinco__lleno { position: absolute; inset: 0; background: var(--accion); transform-origin: 0 50%; }
.wr-cinco__s { color: var(--texto-secundario-sobre-oscuro); letter-spacing: 0.02em; }

[data-pagina="web-restaurantes"] .wr-problema__int {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: var(--calle);
}
[data-pagina="web-restaurantes"] .wr-problema__grafico { position: relative; overflow: clip; grid-column: 1 / 4; grid-row: 1 / 5; margin-top: 0; }
[data-pagina="web-restaurantes"] .wr-problema h2 { grid-column: 4 / 7; grid-row: 2; padding-left: 48px; }

.wr-g { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
.wr-g__lado { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
[data-grafico] .wr-g__rotulo { color: var(--g-sec); }
[data-grafico] .wr-g__lado--con .wr-g__rotulo { color: var(--g-texto); }
.wr-g__tarjeta { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 20px 20px 24px; }
.wr-g__lado--sin .wr-g__tarjeta { border: 1px dashed var(--g-sec); color: var(--g-sec); }
.wr-g__lado--con .wr-g__tarjeta { background: var(--g-fondo); border: 1px solid var(--g-linea); color: var(--g-texto); }
.wr-g__busca { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--g-linea-suave); font-size: 1rem; line-height: 1.25; }
.wr-g__lado--sin .wr-g__busca { border: 1px dashed var(--g-sec); }
.wr-g__lupa { width: 18px; height: 18px; }
.wr-g__ficha { display: flex; flex-direction: column; gap: 6px; padding-bottom: 18px; border-bottom: 1px solid var(--g-linea-suave); }
.wr-g__lado--sin .wr-g__ficha { border-bottom: 1px dashed var(--g-sec); }
.wr-g__nombre { font-size: var(--fs-destacado); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.wr-g__web { font-family: var(--f-etiqueta); font-size: var(--fs-etiqueta); font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.wr-g__lado--con .wr-g__web { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wr-g__lista { display: flex; flex-direction: column; gap: 12px; }
.wr-g__punto, .wr-g__falta { display: flex; align-items: flex-start; gap: 10px; font-size: 1rem; line-height: 1.3; }
.wr-g__punto { font-weight: 500; }
.wr-g__punto .g-ico, .wr-g__falta .g-ico { width: 18px; height: 18px; margin-top: 1px; }
.wr-g__reservar, .wr-g__llamar { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: auto; padding: 10px 16px; text-align: center; }
.wr-g__llamar { border: 1px dashed var(--g-sec); }
.wr-g__reservar { background: var(--texto); }
[data-grafico] .wr-g__reservar { color: var(--texto-sobre-oscuro); }
.wr-g__union { display: flex; align-items: center; justify-content: center; padding-block: 18px; color: var(--g-sec); }
.wr-g__union .g-ico { transform: rotate(90deg); }
@media (min-width: 1200px) {
  .wr-g { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-rows: repeat(7, auto); column-gap: 16px; row-gap: 0; }
  .wr-g__lado { grid-row: 1 / 8; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .wr-g__lado--sin { grid-column: 1; }
  .wr-g__lado--con { grid-column: 3; }
  .wr-g__rotulo { grid-row: 1; margin-bottom: 12px; }
  .wr-g__tarjeta { grid-row: 2 / 8; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .wr-g__lista { display: contents; }
  .wr-g__busca, .wr-g__ficha { margin-bottom: 20px; }
  .wr-g__punto, .wr-g__falta { margin-bottom: 12px; }
  :is(.wr-g__punto, .wr-g__falta):nth-child(3) { margin-bottom: 20px; }
  .wr-g__reservar, .wr-g__llamar { align-self: end; margin-top: 0; }
  .wr-g__union { grid-column: 2; grid-row: 2 / 8; align-self: center; padding-block: 0; }
  .wr-g__union .g-ico { transform: none; }
}
[data-pagina="web-restaurantes"] .wr-problema__texto { grid-column: 4 / 7; grid-row: 3; margin-top: 32px; padding-left: 48px; }

.wr-demos__cab { max-width: calc(var(--wr-col) * 4 + 3 * var(--calle)); }
.wr-demos__cab h2 + p { margin-top: 24px; }
.wr-demos__fila {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--calle);
  align-items: end;
  margin-top: 72px;
}
.wr-demo__enlace { display: flex; flex-direction: column; align-items: center; color: inherit; text-decoration: none; }
.wr-demo__objeto { width: 100%; }
.wr-demo__nombre { margin-top: 20px; padding-block: 12px; text-align: center; }
.wr-demo__enlace:hover .wr-demo__nombre, .wr-demo__enlace:focus-visible .wr-demo__nombre { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.wr-demo:first-child .mon { transform: rotateY(12deg); }
.wr-demo:last-child .mon { transform: rotateY(-12deg); }
.wr-demo--masia .objeto { --ancho: 34.87cqw; }
.wr-demo__enlace:hover .pantalla__img { animation-play-state: paused; }
.wr-demos__pie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 32px; margin-top: 48px; }
.wr-demos__nota { font-size: 1rem; color: var(--texto); }

[data-pagina="web-restaurantes"] .wr-pasos__lista { margin-top: 48px; border-top: 1px solid var(--linea); }
.wr-pasos__lista li {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--calle);
  align-items: baseline;
  padding-block: 32px;
  border-bottom: 1px solid var(--linea);
}
.wr-pasos__n { grid-column: 1; color: var(--texto-secundario); }
[data-pagina="web-restaurantes"] .wr-pasos__lista p { grid-column: 2 / 6; max-width: 34em; font-size: var(--fs-destacado); font-weight: 500; line-height: 1.35; letter-spacing: -0.01em; }

[data-pagina="web-restaurantes"] .wr-distinto__titulo { max-width: 20em; margin-inline: auto; text-align: center; }
[data-pagina="web-restaurantes"] .wr-distinto__rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px var(--calle);
  margin-top: 72px;
}
.wr-distinto__rejilla li { padding-top: 24px; border-top: 1px solid var(--texto); }
.wr-distinto__rejilla h3 { font-size: var(--fs-destacado); line-height: 1.3; }
.wr-distinto__rejilla h3 + p { margin-top: 12px; }

[data-pagina="web-restaurantes"] .wr-precio__titulo + .wr-ficha { margin-top: 40px; }
.wr-ficha {
  --sup: var(--superficie);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 4fr);
  background: var(--superficie);
  border: 1px solid var(--linea);
}
.wr-ficha__precio { padding: 48px; }
.wr-ficha__incluye { padding: 48px; border-left: 1px solid var(--linea); }
.wr-ficha__rotulo { color: var(--texto-secundario); }
.wr-ficha__cifra { margin-top: 16px; }
.wr-ficha__alta { margin-top: 8px; font-size: 1rem; }
.wr-ficha__alta .iva { margin-left: 6px; }
.wr-ficha__cuota { margin-top: 24px; border-top: 1px solid var(--linea); }
.wr-ficha__cuota li { padding-block: 10px; border-bottom: 1px solid var(--linea); font-size: 1rem; font-variant-numeric: tabular-nums; }
[data-pagina="web-restaurantes"] .wr-ficha__nota { margin-top: 24px; font-size: 1rem; }
.wr-ficha__nota + .enlace { margin-top: 8px; }
[data-pagina="web-restaurantes"] .wr-ficha__lista { columns: 2; column-gap: 48px; max-width: none; margin-top: -6px; }
.wr-ficha__lista li { break-inside: avoid; padding-block: 6px; }
[data-pagina="web-restaurantes"] .wr-ficha__lista li + li { margin-top: 0; }
.wr-ficha__lista li::before { top: calc(6px + 0.62em); }

@media (min-width: 821px) and (max-width: 1199px) {
  .wr-ficha { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .wr-ficha__precio, .wr-ficha__incluye { padding: 40px 32px; }
  [data-pagina="web-restaurantes"] .wr-ficha__lista { columns: 1; }
}

.wr-faq__titulo { font-stretch: 62%; font-weight: 800; font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.02em; }
@media (min-width: 821px) { .wr-faq__titulo { font-size: clamp(4.6875rem, 2.25rem + 2.708vw, 5rem); } }
[data-pagina="web-restaurantes"] .wr-faq__lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: calc(var(--calle) * 2);
  align-items: start;
  margin-top: 56px;
}
.wr-faq__col { border-bottom: 1px solid var(--linea); }

@media (max-width: 820px) {
  [data-pagina="web-restaurantes"] .wr-cab { display: flex; flex-direction: column; }
  .wr-cab__foto {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: 70svh;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, var(--texto) 64px);
    mask-image: linear-gradient(180deg, transparent 0, var(--texto) 64px);
  }
  .wr-cab__foto img { object-position: 50% 45%; }
  .wr-cab__velo { display: none; }
  [data-pagina="web-restaurantes"] .wr-cab .wr-cab__int { order: 1; min-height: 0; padding-top: calc(var(--cab) + 40px); padding-bottom: 32px; }
  .wr-cab__texto { max-width: none; }
  .wr-cinco__barra { width: 96px; }

  [data-pagina="web-restaurantes"] .wr-problema__int { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  [data-pagina="web-restaurantes"] .wr-problema h2,
  [data-pagina="web-restaurantes"] .wr-problema__grafico,
  [data-pagina="web-restaurantes"] .wr-problema__texto { grid-column: 1; grid-row: auto; }
  [data-pagina="web-restaurantes"] .wr-problema__grafico { width: 100%; max-width: 480px; margin-top: 32px; }
  .wr-g__tarjeta { gap: 16px; padding: 16px 16px 20px; }
  .wr-g__ficha { padding-bottom: 14px; }
  [data-pagina="web-restaurantes"] .wr-problema h2, [data-pagina="web-restaurantes"] .wr-problema__texto { padding-left: 0; }

  .wr-demos__cab { max-width: none; }
  .wr-demos__fila { grid-template-columns: minmax(0, 1fr); row-gap: 40px; margin-top: 48px; }
  .wr-demo:first-child .mon { transform: rotateY(6deg); }
  .wr-demo:last-child .mon { transform: rotateY(-6deg); }
  .wr-demo--masia .objeto { --ancho: calc(min(60svh, 420px) * 0.4753); }
  .wr-demo__nombre { margin-top: 12px; }
  .wr-demos__pie { margin-top: 40px; }

  [data-pagina="web-restaurantes"] .wr-pasos__lista { margin-top: 32px; }
  .wr-pasos__lista li { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding-block: 24px; }
  .wr-pasos__n, [data-pagina="web-restaurantes"] .wr-pasos__lista p { grid-column: 1; }

  [data-pagina="web-restaurantes"] .wr-distinto__titulo { max-width: none; text-align: left; }
  [data-pagina="web-restaurantes"] .wr-distinto__rejilla { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 40px; }

  .wr-ficha { grid-template-columns: minmax(0, 1fr); }
  .wr-ficha__precio { padding: 32px 20px; }
  .wr-ficha__incluye { padding: 32px 20px; border-left: 0; border-top: 1px solid var(--linea); }
  [data-pagina="web-restaurantes"] .wr-ficha__lista { columns: 1; margin-top: -6px; }
  [data-pagina="web-restaurantes"] .wr-precio__titulo + .wr-ficha { margin-top: 32px; }

  [data-pagina="web-restaurantes"] .wr-faq__lista { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .wr-faq__col:first-child { border-bottom: 0; }
}
