/* Arias Bodegón · Parrilla — marca de su Instagram y su carta: serif de alto contraste, itálica, crema y rojo, ilustraciones propias */
:root {
  --crema: #f4ecdc;
  --papel: #efe2c9;
  --arena: #ecdfc8;
  --tinta: #1d1412;
  --gris: #6b5853;
  --linea: rgba(29, 20, 18, .08);
  --linea-fuerte: rgba(29, 20, 18, .13);
  --rojo: #c0281b;
  --rojo-hondo: #9f2016;
  --sobre-rojo: #f3e3c8;
  --noche: #1f1513;
  --pizarra: #232722;
  --verde: #4f7a38;
  --radio: 6px;
  --titulos: 'Gloock', Georgia, serif;
  --italica: 'Libre Caslon Text', Georgia, serif;
  --texto: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ancho: 1240px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--crema); color: var(--tinta); font: 400 17px/1.65 var(--texto); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
::selection { background: var(--rojo); color: var(--sobre-rojo); }
h1, h2, h3, h4 { font-family: var(--titulos); font-weight: 400; line-height: 1.04; margin: 0; letter-spacing: -.005em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.wrap { max-width: var(--ancho); margin: 0 auto; padding: 0 28px; }
.it { font-family: var(--italica); font-style: italic; font-weight: 400; letter-spacing: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 28px; border-radius: 99px; border: 1.5px solid var(--rojo); background: var(--rojo); color: var(--sobre-rojo); font: 600 15px/1 var(--texto); text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, color .2s, transform .2s; }
.btn:hover { background: var(--rojo-hondo); border-color: var(--rojo-hondo); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-linea { background: transparent; color: var(--tinta); border-color: rgba(29, 20, 18, .26); }
.btn-linea:hover { background: transparent; border-color: var(--tinta); }
.btn-crema { background: var(--sobre-rojo); color: var(--rojo-hondo); border-color: var(--sobre-rojo); }
.btn-crema:hover { background: #f8ecd6; border-color: #f8ecd6; }
.btn-hueco { background: transparent; color: var(--sobre-rojo); border-color: rgba(251, 238, 224, .5); }
.btn-hueco:hover { background: transparent; border-color: var(--sobre-rojo); }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: inherit; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.link svg { width: 16px; height: 16px; transition: transform .2s; }
.link:hover svg { transform: translateX(3px); }

/* Mantel cuadrillé: solo como detalle */
.mantel { background-color: #f3e3c8; background-image: linear-gradient(90deg, rgba(192, 40, 27, .62) 50%, transparent 50%), linear-gradient(rgba(192, 40, 27, .62) 50%, transparent 50%); background-size: 22px 22px; }

/* Barra */
.barra { position: relative; z-index: 40; background: var(--crema); }
/* Copia fija de la barra: baja al pasar la primera sección y sube al volver */
.barra.flotante { position: fixed; top: 0; left: 0; right: 0; background: rgba(244, 236, 220, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translateY(-100%); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.barra.flotante.visible { transform: none; }
@media (prefers-reduced-motion: reduce) { .barra.flotante { transition: none; } }
.barra .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 32px; height: 74px; }
.marca { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--rojo); flex: none; }
.marca b { font: 400 30px/1 var(--titulos); letter-spacing: .02em; }
.marca span { font: italic 400 15px/1 var(--italica); }
.nav { display: flex; gap: 28px; justify-self: center; }
.barra-acciones { justify-self: end; }
.nav a { font: 500 15px/1 var(--texto); white-space: nowrap; text-decoration: none; color: var(--tinta); padding: 8px 0; border-bottom: 1.5px solid transparent; }
.nav a:hover, .nav a[aria-current] { border-color: var(--rojo); }
.barra-acciones { display: flex; align-items: center; gap: 14px; }
.barra .btn { min-height: 42px; padding: 0 20px; font-size: 14px; }
.ingresar { font: 500 15px/1 var(--texto); text-decoration: none; padding: 10px 4px; }
.ingresar:hover { color: var(--rojo); }
.menu-btn { display: none; margin-left: auto; width: 46px; height: 46px; border: 1px solid rgba(29, 20, 18, .26); border-radius: 50%; background: transparent; cursor: pointer; }
.menu-btn span { display: block; width: 18px; height: 1.5px; background: var(--tinta); margin: 4px auto; transition: transform .25s; }
@media (max-width: 1120px) {
  .barra .nav, .barra .barra-acciones { display: none; }
  .menu-btn { display: block; }
}
/* Menú del celular: capa a pantalla completa */
.menu-cel { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--crema); overflow-y: auto; }
.menu-cel[hidden] { display: none; }
.menu-cel-cabeza { display: flex; align-items: center; justify-content: space-between; height: 74px; padding: 0 28px; flex: none; }
.menu-cel-cerrar { width: 46px; height: 46px; border: 1px solid rgba(29, 20, 18, .26); border-radius: 50%; background: transparent; cursor: pointer; }
.menu-cel-cerrar span { display: block; width: 18px; height: 1.5px; background: var(--tinta); margin: 0 auto; }
.menu-cel-cerrar span:first-child { transform: translateY(.75px) rotate(45deg); }
.menu-cel-cerrar span:last-child { transform: translateY(-.75px) rotate(-45deg); }
.menu-cel .nav { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 24px 28px; flex: 1; }
.menu-cel .nav a { font: 400 34px/1.1 var(--titulos); padding: 18px 0; border-bottom: 1px solid var(--linea); }
.menu-cel .nav a:last-child { border-bottom: 0; }
.menu-cel .nav a[aria-current] { color: var(--rojo); border-bottom-color: var(--linea); }
.menu-cel .barra-acciones { display: flex; gap: 14px; padding: 20px 28px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); }
.menu-cel .barra-acciones .btn { flex: 1; min-height: 52px; }
.con-menu, .con-menu body { overflow: hidden; }
.con-menu .wa { display: none; }
@media (min-width: 1121px) { .menu-cel { display: none !important; } }

/* Hero: el nombre con los dos mozos que reciben */
.hero { padding: 56px 0 0; text-align: center; }
.portada { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 0 2vw; color: var(--rojo); }
.portada-nombre { font: 400 clamp(110px, 21vw, 300px)/.78 var(--titulos); letter-spacing: .01em; padding-top: .08em; }
.portada img { height: clamp(150px, 19vw, 270px); width: auto; }
.portada img:first-child { justify-self: end; }
.portada img:last-child { justify-self: start; }
.portada-bajo { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 20px; color: var(--rojo); }
.portada-bajo .it { font-size: clamp(22px, 2.4vw, 30px); }
.portada-bajo i { width: 46px; height: 1px; background: currentColor; opacity: .5; }
.hero h1 { font-size: clamp(30px, 3.4vw, 44px); margin: 64px auto 0; max-width: 22ch; }
.hero-bajada { margin: 18px auto 0; font-size: 18px; color: var(--gris); max-width: 54ch; text-wrap: balance; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; justify-content: center; }
.hero-foto { position: relative; margin-top: 72px; }
.hero-foto img.foto { width: 100%; aspect-ratio: 16 / 7.2; object-fit: cover; border-radius: var(--radio); }
.abierto { display: inline-flex; align-items: center; gap: 8px; }
.abierto i { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 3px rgba(79, 122, 56, .18); }
.abierto.cerrado i { background: var(--gris); box-shadow: 0 0 0 3px rgba(107, 88, 83, .15); }
.hero-pie { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 2px 0; font-size: 14px; color: var(--gris); }
.hero-pie a { text-decoration: none; }
.hero-pie strong { color: var(--tinta); font-weight: 600; }
.estrellas { color: var(--rojo); letter-spacing: 2px; }
@media (max-width: 760px) {
  .hero { padding-top: 34px; }
  .portada { grid-template-columns: 1fr; }
  .portada img { display: none; }
  .hero h1 { margin-top: 40px; }
  .hero-foto { margin: 44px -28px 0; }
  .hero-foto img.foto { aspect-ratio: 4 / 3.4; border-radius: 0; }
  .hero-pie { flex-direction: column; gap: 6px; padding: 16px 0 0; }
}

/* Secciones y horas del día */
.sec { padding: 150px 0; }
.sec-arena { background: var(--arena); }
/* Óvalo como el de sus posts de Instagram ("NOCHES DE") */
.hora { display: inline-block; border: 1.5px solid currentColor; border-radius: 50%; padding: 13px 30px; font: 400 clamp(17px, 1.7vw, 21px)/1 var(--titulos); letter-spacing: .02em; text-transform: uppercase; color: var(--rojo); margin-bottom: 30px; }
.titulo-grande { font-size: clamp(46px, 6.4vw, 92px); }
.bajada { font-size: 19px; color: var(--gris); max-width: 46ch; margin-top: 24px; text-wrap: balance; }
.sec-cabeza { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px 80px; align-items: end; margin-bottom: 72px; }
.sec-cabeza h2 { font-size: clamp(40px, 5vw, 68px); }
.sec-cabeza p { color: var(--gris); font-size: 18px; max-width: 44ch; }
.centro { text-align: center; margin-left: auto; margin-right: auto; }
@media (max-width: 800px) { .sec { padding: 96px 0; } .sec-cabeza { grid-template-columns: 1fr; margin-bottom: 44px; } }

/* 9 h: desayunos y meriendas, como la tapa de su carta */
.desayunos { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.cartel { font: 400 clamp(56px, 8vw, 118px)/.88 var(--titulos); color: var(--rojo); text-transform: uppercase; letter-spacing: .01em; }
.cartel span { display: block; }
.cartel .amp { font-family: var(--italica); font-style: italic; text-transform: none; font-size: .62em; line-height: 1.2; }
.desayunos-foto { position: relative; }
.desayunos-foto img.foto { width: 100%; border-radius: var(--radio); transform: rotate(2deg); box-shadow: 0 30px 60px rgba(29, 20, 18, .18); }
.desayunos-foto .ilus { position: absolute; left: -64px; bottom: -40px; width: 150px; }
@media (max-width: 900px) { .desayunos { grid-template-columns: 1fr; gap: 64px; } .desayunos-foto .ilus { left: auto; right: -6px; width: 110px; } }

/* Mediodía: todo en rojo */
.rojo { background: var(--rojo); color: var(--sobre-rojo); }
.rojo .hora { color: var(--sobre-rojo); }
.rojo .bajada, .rojo .sec-cabeza p { color: rgba(251, 238, 224, .82); }
.carta { display: grid; grid-template-columns: 1.05fr .95fr; gap: 80px; align-items: start; }
.carta-foto { position: sticky; top: 110px; }
.carta-foto img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: var(--radio); }
.carta-lista { list-style: none; margin: 0; padding: 0; }
.carta-lista li { padding: 28px 0; border-top: 1px solid rgba(243, 227, 200, .16); }
.carta-lista li:last-child { border-bottom: 1px solid rgba(243, 227, 200, .16); }
.carta-lista h3 { font-size: clamp(30px, 3vw, 40px); }
.carta-lista p { margin-top: 8px; color: rgba(251, 238, 224, .82); font-size: 16px; max-width: 46ch; }
/* Pizarra ilustrada, en la estética de sus dibujos: plana, roja oscura, línea beige doble y caballete */
.pizarra { position: relative; margin-top: 72px; padding-bottom: 92px; rotate: -1.2deg; }
.pz { position: relative; text-align: center; padding: 50px 40px 46px; background: var(--rojo); color: var(--sobre-rojo); border: 4px solid var(--sobre-rojo); border-radius: 18px 12px 20px 14px / 14px 20px 12px 18px; box-shadow: inset 0 0 0 9px var(--rojo), inset 0 0 0 11px var(--sobre-rojo); z-index: 1; }
.pz::before { content: ''; position: absolute; left: 50%; top: -22px; width: 54px; height: 22px; translate: -50% 0; border: 4px solid var(--sobre-rojo); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--rojo); }
.pz .ovalo { font-size: 18px; padding: 11px 26px; }
.pz h3 { font-size: clamp(46px, 4.6vw, 62px); margin-top: 18px; }
.pz .pz-onda { display: block; width: 120px; height: 12px; margin: 18px auto 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M3 7c10-5 18 3 28 0s18-5 28 0 18 4 28 0 18-4 30 0' fill='none' stroke='%23f3e3c8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pz ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.pz li { padding: 20px 0; font: 400 clamp(24px, 2.2vw, 28px)/1.15 var(--titulos); text-wrap: balance; }
.pz li + li { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M3 7c10-5 18 3 28 0s18-5 28 0 18 4 28 0 18-4 30 0' fill='none' stroke='%23f3e3c8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") top center / 70px 8px no-repeat; }
.pz li small { display: block; margin-bottom: 6px; font: italic 400 18px/1.2 var(--italica); color: var(--sobre-rojo); }
.pz .pz-pie { margin-top: 22px; }
.pz .pz-pie a { display: inline-flex; align-items: center; gap: 10px; font: italic 400 21px/1.2 var(--italica); color: var(--sobre-rojo); text-decoration: none; border-bottom: 1.5px solid rgba(243, 227, 200, .5); padding-bottom: 4px; transition: border-color .2s; }
.pz .pz-pie a:hover { border-color: var(--sobre-rojo); }
.pz .pz-pie svg { width: 18px; height: 18px; }
.pz .pz-pie small { display: block; margin-top: 14px; font: italic 400 16px/1.3 var(--italica); color: rgba(243, 227, 200, .6); }
.pz-patas { position: absolute; left: 50%; bottom: 0; width: 78%; height: 120px; translate: -50% 0; }
@media (max-width: 600px) { .pz { padding: 40px 22px 34px; } }
@media (max-width: 900px) { .carta { grid-template-columns: 1fr; gap: 48px; } .carta-foto { position: static; } }

/* Tickets para llevar y para empresas */
.tickets { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 110px; }
.ticket { position: relative; display: grid; grid-template-columns: 1fr 150px; gap: 20px; align-items: end; background: var(--sobre-rojo); color: var(--tinta); border-radius: 4px; padding: 34px 30px 0 34px; text-decoration: none; overflow: hidden; transition: transform .3s; }
.ticket:hover { transform: translateY(-4px) rotate(-.4deg); }
.ticket::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 16px; background: radial-gradient(circle at 8px 8px, var(--rojo) 6px, transparent 6.5px) 0 0 / 16px 16px repeat-x; }
.ticket > div { padding-bottom: 34px; }
.ticket .it { color: var(--rojo); font-size: 18px; }
.ticket h3 { font-size: clamp(32px, 3.2vw, 44px); margin: 8px 0 12px; }
.ticket p { color: var(--gris); font-size: 16px; }
.ticket .link { margin-top: 22px; color: var(--rojo-hondo); }
.ticket img { max-height: 190px; width: auto; justify-self: center; }
@media (max-width: 900px) { .tickets { grid-template-columns: 1fr; margin-top: 80px; } .ticket { grid-template-columns: 1fr 100px; padding: 30px 22px 0 26px; } .ticket img { max-height: 130px; } }

/* Noches de Arias */
.noche { background: var(--noche); color: var(--sobre-rojo); }
.noche-titulo { text-align: center; }
.ovalo { display: inline-block; border: 1.5px solid currentColor; border-radius: 50%; padding: 14px 34px; font: 400 clamp(18px, 2vw, 26px)/1 var(--titulos); letter-spacing: .02em; }
.noche-titulo b { display: block; font: 400 clamp(96px, 17vw, 240px)/.86 var(--titulos); color: #f4ead0; margin-top: 18px; letter-spacing: .01em; }
.noche-titulo .it { display: block; font-size: clamp(20px, 2.2vw, 28px); margin-top: 18px; color: rgba(251, 238, 224, .8); }
.noche-grilla { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; margin-top: 110px; }
.noche-fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.noche-fotos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radio); }
.noche-fotos img:last-child { margin-top: 64px; }
.noche h2 { font-size: clamp(36px, 4vw, 54px); }
.noche p.bajada { color: rgba(251, 238, 224, .75); }
.momentos { list-style: none; margin: 34px 0 38px; padding: 0; }
.momentos li { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: baseline; padding: 18px 0; border-top: 1px solid rgba(243, 227, 200, .08); font-size: 16px; }
.momentos li:last-child { border-bottom: 1px solid rgba(243, 227, 200, .08); }
.momentos b { font: italic 400 17px/1.5 var(--italica); color: var(--sobre-rojo); white-space: nowrap; }
@media (min-width: 1100px) { .momentos span { white-space: nowrap; } }
.momentos span { color: rgba(251, 238, 224, .85); }
.reels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 110px; }
.reel { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radio); overflow: hidden; text-decoration: none; color: var(--sobre-rojo); background: #000; }
.reel img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.reel:hover img { transform: scale(1.04); }
.reel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .75)); }
.reel-pie { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; font-size: 14px; line-height: 1.35; }
.reel-pie b { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; opacity: .85; margin-bottom: 4px; }
.reel-pie svg { width: 12px; height: 12px; }
.reels-pie { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 24px; font-size: 15px; color: rgba(251, 238, 224, .75); flex-wrap: wrap; }
@media (max-width: 900px) {
  .noche-grilla { grid-template-columns: 1fr; gap: 56px; margin-top: 72px; }
  .reels { grid-template-columns: repeat(4, 62%); overflow-x: auto; scroll-snap-type: x mandatory; margin: 72px -28px 0; padding: 0 28px 8px; }
  .reel { scroll-snap-align: start; }
}

/* La familia */
.familia { text-align: center; }
.familia-ilus { width: 230px; margin: 0 auto 48px; }
.familia .frase { max-width: 1000px; margin: 0 auto; font: 400 clamp(30px, 3.6vw, 48px)/1.18 var(--titulos); text-wrap: balance; }
.familia .firma { margin-top: 28px; font: italic 400 20px/1 var(--italica); color: var(--rojo); }
.tira-fotos { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 16px; margin-top: 96px; align-items: end; }
.tira-fotos figure { margin: 0; text-align: left; }
.tira-fotos img { width: 100%; object-fit: cover; border-radius: var(--radio); }
.tira-fotos figure:nth-child(1) img { aspect-ratio: 3 / 4; }
.tira-fotos figure:nth-child(2) img { aspect-ratio: 4 / 3.3; }
.tira-fotos figure:nth-child(3) img { aspect-ratio: 3 / 4.4; }
.tira-fotos figcaption { margin-top: 12px; font: italic 400 16px/1.3 var(--italica); color: var(--gris); }
@media (max-width: 800px) { .tira-fotos { grid-template-columns: 1fr 1fr; } .tira-fotos figure:nth-child(2) { grid-column: span 2; order: -1; } }

/* Reseñas */
.resenas-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: 64px; }
.resenas-nota { display: flex; align-items: flex-end; gap: 30px; }
.resenas-nota b { font: 400 clamp(110px, 13vw, 180px)/.8 var(--titulos); color: var(--rojo); }
.resenas-nota p { padding-bottom: 10px; }
.resenas-nota .estrellas { display: block; font-size: 22px; letter-spacing: 4px; margin-bottom: 10px; }
.resenas-nota strong { display: block; font: 400 clamp(28px, 2.8vw, 38px)/1.1 var(--titulos); }
.resenas-cabeza .btn svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .resenas-nota { gap: 18px; } .resenas-cabeza .btn { width: 100%; } }
.cinta { overflow: hidden; }
.cinta-pista { display: flex; gap: 20px; width: max-content; animation: pasar 70s linear infinite; }
.cinta:hover .cinta-pista { animation-play-state: paused; }
.resena { width: 400px; flex: none; margin: 0; background: var(--papel); border-radius: var(--radio); padding: 26px 30px 26px; display: flex; flex-direction: column; gap: 14px; }
.resena .comilla { font: 400 72px/.6 var(--titulos); color: var(--rojo); height: 34px; margin-top: 10px; }
.resena p { font: 400 21px/1.35 var(--titulos); }
.resena cite { font-style: normal; font-size: 14px; color: var(--gris); margin-top: auto; }
.resena cite .estrellas { margin-right: 8px; }
@keyframes pasar { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cinta-pista { animation: none; } .cinta { overflow-x: auto; } }
@media (max-width: 600px) { .resena { width: 300px; } .resena p { font-size: 19px; } }

/* Cómo llegar */
.fachada img { width: 100%; aspect-ratio: 1786 / 760; object-fit: cover; object-position: center 30%; border-radius: var(--radio); }
.llegar { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 56px; margin-top: 56px; }
.llegar h3 { font: italic 400 18px/1 var(--italica); color: var(--rojo); margin-bottom: 18px; }
.llegar address { font: 400 30px/1.2 var(--titulos); font-style: normal; }
.llegar address small { display: block; font: 400 16px/1.5 var(--texto); color: var(--gris); margin-top: 10px; }
.horarios { width: 100%; border-collapse: collapse; font-size: 16px; }
.horarios td { padding: 10px 0; border-bottom: 1px solid var(--linea); }
.horarios td:last-child { text-align: right; font-weight: 600; }
.horarios tr.hoy td { color: var(--rojo); }
.contacto-links { display: grid; gap: 0; }
.contacto-links a { display: flex; align-items: center; gap: 10px; font-size: 16px; text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.contacto-links a:hover { color: var(--rojo); }
.contacto-links svg { width: 18px; height: 18px; color: var(--rojo); }
.mapa { position: relative; height: 420px; margin-top: 64px; border-radius: var(--radio); overflow: hidden; background: var(--arena); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.75) sepia(.15); }
@media (max-width: 900px) { .llegar { grid-template-columns: 1fr; gap: 40px; } .fachada img { aspect-ratio: 4 / 3; } .mapa { height: 320px; } }

/* Preguntas */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }
.faq > div:first-child { position: sticky; top: 110px; }
.faq h2 { font-size: clamp(40px, 4.6vw, 62px); }
.faq .bajada { font-size: 17px; text-wrap: balance; max-width: 34ch; }
.faq .faq-ilus { width: 150px; margin-top: 40px; }
.preguntas details { border-top: 1px solid var(--linea-fuerte); }
.preguntas details:last-child { border-bottom: 1px solid var(--linea-fuerte); }
.preguntas summary { transition: color .25s; list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 26px 0; font: 400 23px/1.25 var(--titulos); }
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; font: 300 30px/1 var(--texto); color: var(--rojo); flex: none; }
.preguntas summary:hover { color: var(--rojo); }
.preguntas summary::after { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas .respuesta { overflow: hidden; }
.preguntas details p { padding: 0 48px 28px 0; color: var(--gris); font-size: 17px; }
.preguntas details a { color: var(--rojo-hondo); }
.falta { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 3px 10px; border-radius: 99px; background: var(--rojo); color: var(--sobre-rojo); font: 600 12px/1.4 var(--texto); vertical-align: middle; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; gap: 36px; } .faq > div:first-child { position: static; } .faq .faq-ilus { display: none; } }

/* Pie en rojo, con el mantel como borde de la mesa */
.pie { background: var(--rojo); color: var(--sobre-rojo); font-size: 15px; overflow: hidden; }
.pie-cierre { display: grid; grid-template-columns: 1fr 260px; gap: 40px; align-items: end; padding-top: 130px; }
.pie-cierre h2 { font-size: clamp(48px, 6.4vw, 92px); }
.pie-cierre p { font-size: 19px; margin: 22px 0 34px; max-width: 42ch; color: rgba(251, 238, 224, .86); }
.pie-cierre .hero-acciones { justify-content: flex-start; }
.pie-ilus { background: var(--sobre-rojo); border-radius: 200px 200px 0 0; padding: 34px 30px 0; align-self: end; overflow: hidden; }
.pie-ilus img { margin-bottom: -14%; }
.pie-nombre { font: 400 clamp(110px, 24vw, 360px)/.76 var(--titulos); letter-spacing: .01em; margin: 110px 0 0; color: var(--sobre-rojo); white-space: nowrap; text-align: center; }
.pie-nombre span { display: inline-block; }
.pie-grilla { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; padding: 64px 0 56px; border-top: 1px solid rgba(243, 227, 200, .16); margin-top: 48px; }
.pie h4 { font: italic 400 18px/1 var(--italica); margin-bottom: 18px; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; color: rgba(251, 238, 224, .86); }
.pie a { text-decoration: none; }
.pie a:not(.btn):hover { color: #f8ecd6; text-decoration: underline; text-underline-offset: 3px; }
.pie-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-bottom: 30px; font-size: 13px; color: rgba(251, 238, 224, .75); }
.hecha { display: inline-flex; align-items: center; gap: 10px; }
.hecha a { display: inline-flex; padding: 6px 2px; opacity: .85; transition: opacity .2s, transform .2s; }
.hecha a:hover { opacity: 1; transform: translateY(-1px); text-decoration: none !important; }
.hecha img { height: 18px; width: auto; }
.pie-legal { padding-bottom: 104px !important; }
.pie .mantel { height: 44px; }
@media (max-width: 900px) { .pie-cierre { grid-template-columns: 1fr; padding-top: 96px; } .pie-ilus { width: 200px; } .pie-grilla { grid-template-columns: 1fr 1fr; } .pie-grilla > div:first-child { grid-column: span 2; } }

/* WhatsApp con chat */
.wa { position: fixed; right: 20px; bottom: 20px; z-index: 50; }
.wa-chat { position: absolute; right: 0; bottom: calc(100% + 12px); }
/* Píldora flotante: abierto ahora + WhatsApp */
.wa-boton { display: flex; align-items: center; gap: 14px; padding: 8px 8px 8px 10px; border: 1px solid rgba(29, 20, 18, .08); border-radius: 99px; background: #f7ecd8; color: var(--tinta); font: 400 14px/1.35 var(--texto); text-align: left; cursor: pointer; transition: transform .2s; }
.wa-boton:hover { transform: translateY(-2px); }
.wa-logo { width: 40px; height: 40px; flex: none; }
.wa-txt { display: block; }
.wa-txt b { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.wa-txt .estado-detalle { display: block; color: var(--gris); margin-top: 2px; }
.abierto.cerrado i { background: var(--rojo); box-shadow: 0 0 0 3px rgba(192, 40, 27, .15); }
.wa-ico { display: grid; place-items: center; width: 46px; height: 46px; flex: none; margin-left: 6px; border-radius: 50%; background: rgba(192, 40, 27, .1); color: var(--rojo); transition: background .2s, color .2s; }
.wa-boton:hover .wa-ico { background: var(--rojo); color: var(--sobre-rojo); }
.wa-ico svg { width: 24px; height: 24px; }
@media (max-width: 560px) { .wa { right: 14px; bottom: 14px; } .wa-boton { gap: 10px; font-size: 13px; } .wa-logo { width: 34px; height: 34px; } .wa-ico { width: 40px; height: 40px; } .wa-chat { width: calc(100vw - 28px); } }
.wa-chat[hidden] { pointer-events: none; }
.wa-chat { width: 310px; background: #e9dcc3; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); transform-origin: bottom right; transition: transform .25s, opacity .25s; }
.wa-chat[hidden] { display: block; transform: scale(.9); opacity: 0; pointer-events: none; visibility: hidden; }
.wa-chat header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #075e54; color: #fff; }
.wa-chat header img { width: 40px; height: 40px; border-radius: 50%; background: #f3e3c8; }
.wa-chat header b { display: block; font-size: 15px; }
.wa-chat header small { font-size: 12px; opacity: .8; }
.wa-burbuja { margin: 16px; background: #f8eedc; border-radius: 0 10px 10px 10px; padding: 10px 12px; font-size: 14px; line-height: 1.45; }
.wa-opciones { display: flex; flex-direction: column; gap: 8px; padding: 0 16px 16px; }
.wa-opciones a { background: #f8eedc; border-radius: 20px; padding: 10px 14px; font-size: 14px; color: #075e54; font-weight: 600; text-decoration: none; text-align: center; }
.wa-opciones a:hover { background: #dcf8c6; }

/* Aparición al hacer scroll */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.js .rv.si { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ─────────── Páginas internas ─────────── */
.cabecera { padding: 60px 0 120px; }
.migas { font-size: 14px; color: var(--gris); margin-bottom: 40px; }
.migas a { text-decoration: none; }
.migas a:hover { color: var(--rojo); }
.cabecera-grilla { display: grid; grid-template-columns: 1.2fr .8fr; gap: 56px; align-items: end; }
.cabecera h1 { font-size: clamp(50px, 7vw, 104px); color: var(--rojo); }
.cabecera .hero-bajada { margin: 26px 0 0; max-width: 44ch; }
.cabecera .hero-acciones { justify-content: flex-start; }
.cabecera-ilus { justify-self: center; height: clamp(300px, 33vw, 470px); width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 900px) { .cabecera { padding: 36px 0 80px; } .cabecera-grilla { grid-template-columns: 1fr; gap: 40px; } .cabecera-ilus { height: 260px; } }

.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; counter-reset: paso; }
.paso { display: flex; flex-direction: column; gap: 12px; }
.paso-ilus { height: 210px; display: grid; place-items: end start; margin-bottom: 22px; }
.paso-ilus img { max-height: 200px; width: auto; }
.paso h3 { font-size: 32px; }
.paso h3::before { counter-increment: paso; content: counter(paso) '.'; display: block; font: italic 400 20px/1 var(--italica); color: var(--rojo); margin-bottom: 14px; }
.paso p { color: var(--gris); font-size: 16px; }
@media (max-width: 900px) { .pasos { grid-template-columns: 1fr; gap: 64px; } }

.paquetes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.paquete { position: relative; background: var(--sobre-rojo); color: var(--tinta); border-radius: 4px; padding: 36px 32px 32px; display: flex; flex-direction: column; gap: 4px; }
.paquete.destacado { background: #3a2018; color: var(--sobre-rojo); }
.paquete.destacado .it { color: var(--sobre-rojo); }
.paquete.destacado .cuantos, .paquete.destacado .precio small { color: rgba(251, 238, 224, .7); }
.paquete.destacado dl div { border-color: rgba(251, 238, 224, .18); }
.paquete.destacado .ahorro { color: #b5d99a; }
.paquete .cinta-mejor { background: var(--rojo); color: var(--sobre-rojo); font: 600 12px/1 var(--texto); padding: 8px 12px; border-radius: 99px; }
.paquete .it { color: var(--rojo); font-size: 17px; }
.paquete h3 { font-size: 40px; margin-top: 8px; }
.paquete .cuantos { color: var(--gris); font-size: 16px; }
.paquete .precio { font: 400 56px/1 var(--titulos); margin: 28px 0 4px; }
.paquete .precio small { font: 500 15px/1 var(--texto); color: var(--gris); }
.paquete dl { margin: 20px 0 0; font-size: 15px; }
.paquete dl div { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--linea); }
.paquete dd { margin: 0; font-weight: 600; }
.paquete .ahorro { color: var(--verde); }
.precios-pie { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; margin-top: 36px; }
.nota-pie { font-size: 15px; color: rgba(251, 238, 224, .82); max-width: 52ch; }
.precios-pie .btn { flex: none; }
@media (max-width: 700px) { .precios-pie { flex-direction: column; align-items: flex-start; } }
@media (max-width: 900px) { .paquetes { grid-template-columns: 1fr; } }

.beneficios { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.hito { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center; padding: 26px 0; border-top: 1px solid var(--linea-fuerte); }
.hito:last-child { border-bottom: 1px solid var(--linea-fuerte); }
.hito b { font: 400 76px/1 var(--titulos); color: var(--rojo); }
.hito strong { display: block; font: 400 28px/1.1 var(--titulos); }
.hito span { color: var(--gris); font-size: 15px; }
@media (max-width: 900px) { .beneficios { grid-template-columns: 1fr; gap: 48px; } .hito { grid-template-columns: 84px 1fr; } .hito b { font-size: 56px; } }

.categorias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
.categoria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); margin-bottom: 18px; }
.foto-falta { aspect-ratio: 4 / 3; margin-bottom: 18px; border-radius: var(--radio); border: 1.5px dashed var(--linea-fuerte); background: var(--papel); display: grid; place-items: center; }
.foto-falta .falta { margin: 0; }
.categoria h3 { font-size: 28px; }
.categoria p { color: var(--gris); font-size: 15px; margin-top: 6px; }
@media (max-width: 900px) { .categorias { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .categorias { grid-template-columns: 1fr; } }

.funciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 48px; }
.funcion svg { width: 28px; height: 28px; color: var(--rojo); margin-bottom: 18px; }
.funcion h3 { font-size: 28px; margin-bottom: 10px; }
.funcion p { color: var(--gris); font-size: 16px; }
@media (max-width: 900px) { .funciones { grid-template-columns: 1fr; } }

.panel-demo { position: relative; background: var(--sobre-rojo); color: var(--tinta); border-radius: 4px; padding: 30px 32px 28px; font-size: 15px; overflow: hidden; }
.panel-demo::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 16px; background: radial-gradient(circle at 8px 8px, var(--rojo) 6px, transparent 6.5px) 0 0 / 16px 16px repeat-x; }
.panel-demo header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.panel-demo header b { display: block; font: 400 30px/1.05 var(--titulos); }
.panel-demo header .it { display: block; margin-top: 6px; font-size: 16px; color: var(--rojo); }
.panel-demo header em { font-style: normal; font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 99px; background: var(--rojo); color: var(--sobre-rojo); white-space: nowrap; }
.panel-numeros { display: grid; grid-template-columns: repeat(3, 1fr); margin: 26px 0 8px; }
.panel-numeros div + div { padding-left: 22px; border-left: 1px solid var(--linea); }
.panel-numeros strong { display: block; font: 400 52px/1 var(--titulos); color: var(--rojo); }
.panel-numeros small { display: block; margin-top: 6px; font: italic 400 15px/1.2 var(--italica); color: var(--gris); }
.panel-filas > div { display: grid; grid-template-columns: 42px 1fr auto 118px; gap: 14px; align-items: center; padding: 12px 0; }
.panel-filas > div + div { border-top: 1px solid var(--linea); }
.panel-filas img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.panel-filas .cant { font-weight: 600; color: var(--gris); }
.panel-filas .estado { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--verde); }
.panel-filas .estado::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.panel-filas .estado.espera { color: #b8791a; }
.panel-demo footer { display: flex; align-items: center; gap: 16px; margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--gris); }
.panel-demo footer i { flex: 1; height: 6px; border-radius: 99px; background: rgba(29, 20, 18, .08); overflow: hidden; }
.panel-demo footer i b { display: block; height: 100%; border-radius: inherit; background: var(--rojo); }
@media (max-width: 560px) { .panel-demo { padding: 26px 20px 22px; } .panel-filas > div { grid-template-columns: 36px 1fr auto; } .panel-filas .estado { grid-column: 2 / -1; } .panel-numeros strong { font-size: 40px; } }

.formulario { background: var(--papel); border-radius: var(--radio); padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.formulario .todo { grid-column: span 2; }
.formulario label { display: flex; flex-direction: column; gap: 8px; font-size: 14px; font-weight: 600; }
.formulario label small { font-weight: 400; color: var(--gris); }
.formulario input, .formulario textarea { font: 400 16px/1.4 var(--texto); padding: 14px; border: 1px solid rgba(29, 20, 18, .2); border-radius: 6px; background: #f7ecd8; color: var(--tinta); }
.formulario input:focus, .formulario textarea:focus { outline: 2px solid var(--rojo); outline-offset: 1px; border-color: transparent; }
.formulario textarea { min-height: 110px; resize: vertical; }
.formulario .btn { width: 100%; }
.formulario .aviso { font-size: 14px; color: var(--gris); text-align: center; }
@media (max-width: 640px) { .formulario { grid-template-columns: 1fr; padding: 26px; } .formulario .todo { grid-column: auto; } }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.dos h2 { font-size: clamp(40px, 4.8vw, 64px); margin-bottom: 24px; }
.dos > div > p { color: var(--gris); font-size: 18px; }
.rojo .dos > div > p { color: rgba(251, 238, 224, .82); }
.dos > div > p + p { margin-top: 16px; }
.lista { list-style: none; padding: 0; margin: 32px 0; }
.lista li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--linea); font-size: 16px; }
.lista li:last-child { border-bottom: 1px solid var(--linea); }
.lista svg { width: 20px; height: 20px; color: var(--rojo); margin-top: 3px; }
.lista b { display: block; font-weight: 600; }
.lista span { color: var(--gris); }
.lista a { color: var(--rojo-hondo); }
@media (max-width: 900px) { .dos { grid-template-columns: 1fr; gap: 56px; } }
@media (max-width: 520px) { .marca span { display: none; } }
/* Reseñas en el crema de la sección de abajo */
.resena { background: var(--crema); color: var(--tinta); }
.resena .comilla { color: var(--rojo); }
.resena cite { color: var(--gris); }
.resena cite .estrellas { color: var(--rojo); }
/* Regla: las listas con divisores no llevan línea arriba de la primera fila ni abajo de la última */
.preguntas details:first-child, .carta-lista li:first-child, .momentos li:first-child, .hito:first-child, .lista li:first-child, .paquete dl div:first-child { border-top: 0; }
.preguntas details:last-child, .carta-lista li:last-child, .momentos li:last-child, .hito:last-child, .lista li:last-child { border-bottom: 0; }
.horarios tr:last-child td, .contacto-links a:last-child { border-bottom: 0; }
.preguntas details:first-child summary { padding-top: 0; }
.carta-lista li:first-child, .momentos li:first-child, .hito:first-child, .lista li:first-child { padding-top: 0; }
/* Borde de ticket arriba, como las tarjetas de llevar y empresas */
.paquete { overflow: hidden; padding-top: 44px; }
.paquete::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 16px; background: radial-gradient(circle at 8px 8px, var(--rojo) 6px, transparent 6.5px) 0 0 / 16px 16px repeat-x; }
.paquete-arriba { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Cotización: la sección en marrón y el formulario como un ticket beige troquelado */
.marron { background: #3a2018; color: var(--sobre-rojo); }
.marron .dos > div > p { color: rgba(243, 227, 200, .75); }
.marron .lista li { border-color: rgba(243, 227, 200, .1); }
.marron .lista svg { color: #ef7a64; }
.marron .lista span, .marron .lista a { color: rgba(243, 227, 200, .8); }
.marron .formulario { position: relative; overflow: hidden; background: var(--sobre-rojo); color: var(--tinta); padding-top: 52px; }
.marron .formulario::before { content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 16px; background: radial-gradient(circle at 8px 8px, #3a2018 6px, transparent 6.5px) 0 0 / 16px 16px repeat-x; }
.marron .formulario input, .marron .formulario textarea { background: #f9f0de; }
.rojo .cartel { color: var(--sobre-rojo); }
/* La píldora entra un rato después de cargar la página */
.js .wa { opacity: 0; transform: translateY(18px); pointer-events: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.js .wa.a-la-vista { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .js .wa { transform: none; } }

/* Entrada al cargar: solo CSS. El título y la foto se mueven sin esconderse (no atrasan el LCP ni corren el diseño) */
@media (prefers-reduced-motion: no-preference) {
  .js .barra:not(.flotante) { animation: entra-baja .7s cubic-bezier(.2, .7, .2, 1) both; }
  .js .portada-nombre { display: inline-block; animation: solo-sube .9s .1s cubic-bezier(.2, .7, .2, 1) both; }
  .js .portada img:first-child { animation: entra-izq 1s .3s cubic-bezier(.2, .7, .2, 1) both; }
  .js .portada img:last-child { animation: entra-der 1s .3s cubic-bezier(.2, .7, .2, 1) both; }
  .js .portada-bajo { animation: aparece-sube .8s .3s cubic-bezier(.2, .7, .2, 1) both; }
  .js .cabecera h1 { animation: solo-sube .9s .1s cubic-bezier(.2, .7, .2, 1) both; }
  .js .hero h1 { animation: solo-sube .9s .45s cubic-bezier(.2, .7, .2, 1) both; }
  .js .hero .hero-bajada { animation: aparece-sube .8s .6s cubic-bezier(.2, .7, .2, 1) both; }
  .js .hero .hero-acciones { animation: aparece-sube .8s .72s cubic-bezier(.2, .7, .2, 1) both; }
  .js .hero-foto img.foto { animation: foto-asienta 1.4s .8s cubic-bezier(.2, .7, .2, 1) both; }
  .js .hero-pie { animation: aparece-sube .8s 1.05s cubic-bezier(.2, .7, .2, 1) both; }
  .js .cabecera .hero-bajada { animation: aparece-sube .8s .4s cubic-bezier(.2, .7, .2, 1) both; }
  .js .cabecera .hero-acciones { animation: aparece-sube .8s .52s cubic-bezier(.2, .7, .2, 1) both; }
  .js .cabecera-ilus { animation: entra-der 1s .3s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes entra-baja { from { opacity: 0; transform: translateY(-14px); } }
@keyframes entra-izq { from { opacity: 0; transform: translateX(-36px) rotate(-4deg); } }
@keyframes entra-der { from { opacity: 0; transform: translateX(36px) rotate(4deg); } }
@keyframes aparece-sube { from { opacity: 0; transform: translateY(18px); } }
@keyframes solo-sube { from { transform: translateY(28px); } }
@keyframes foto-asienta { from { transform: translateY(40px) scale(1.03); } }
@media (max-width: 1120px) { .barra .wrap { display: flex; } }
/* Contacto de la cotización: el número a la derecha de cada fila */
.marron .lista li { align-items: center; }
.marron .lista li > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.marron .lista li > div b { display: inline; }
.marron .lista svg { margin-top: 0; }

/* ─────────── La carta: como la impresa (Grand Cru → Gloock, Helvetica, Josefin Sans en los precios) ─────────── */
.carta-impresa { --ct-rojo: #c0281b; --ct-fondo: var(--crema); background: var(--ct-fondo); color: var(--ct-rojo); }
.carta-impresa .rv { --d: 0s; }
.btn-crema svg { width: 16px; height: 16px; }
.ct-portada { display: grid; grid-template-columns: 1fr minmax(0, 620px) 1fr; align-items: center; gap: 24px; padding: 64px 0 72px; text-align: center; overflow: hidden; }
.ct-figs { display: flex; flex-direction: column; gap: 28px; }
.ct-figs img { height: clamp(220px, 25vw, 360px); width: auto; }
.ct-figs-izq { align-items: flex-start; }
.ct-figs-der { align-items: flex-end; }
.ct-marca { display: block; margin-bottom: 14px; font: 400 clamp(26px, 2.6vw, 36px)/1 var(--titulos); letter-spacing: .04em; }
.ct-arias { display: block; font: 400 clamp(64px, 8vw, 112px)/.9 var(--titulos); letter-spacing: .04em; }
.ct-sub { display: block; margin-top: 12px; font: 700 clamp(12px, 1.4vw, 17px)/1 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: .5em; padding-left: .5em; }
.ct-portada p { margin: 22px auto 0; max-width: 46ch; font: 400 clamp(14px, 1.3vw, 16px)/1.55 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; text-wrap: balance; }
@media (max-width: 700px) { .ct-portada { grid-template-columns: 64px 1fr 64px; gap: 6px; padding: 36px 0 40px; } .ct-figs img { height: 130px; } .ct-sub { letter-spacing: .3em; } .ct-portada p { display: none; } }
.ct-indice { position: sticky; top: 74px; z-index: 5; background: rgba(244, 236, 220, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ct-indice-pista { display: flex; gap: 6px; justify-content: center; overflow-x: auto; padding: 12px 20px; scrollbar-width: none; }
.ct-indice-pista::-webkit-scrollbar { display: none; }
.ct-indice a { flex: none; padding: 8px 14px; border-radius: 99px; text-decoration: none; font: 700 12px/1 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; transition: background .2s, color .2s; }
.ct-indice a:hover, .ct-indice a.activo { background: var(--ct-rojo); color: var(--ct-fondo); }
.ct-cuerpo { max-width: 920px; padding-bottom: 96px; }
.ct-seccion { padding: 96px 0 0; scroll-margin-top: 140px; }
.ct-cabeza { display: flex; align-items: flex-end; gap: 28px; margin-bottom: 44px; }
.ct-cabeza h2 > span { display: flex; flex-direction: column; font: 400 clamp(72px, 11vw, 128px)/.88 var(--titulos); letter-spacing: .02em; }
.ct-cabeza img { width: auto; max-height: clamp(180px, 26vw, 290px); max-width: 46%; }
.ct-bajo { font: 700 clamp(18px, 2.2vw, 26px)/1 var(--titulos); letter-spacing: .03em; margin-top: 10px; padding-left: 4px; }
.ct-nota { margin-top: 12px; font: 400 clamp(16px, 1.8vw, 20px)/1.3 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; padding-left: 4px; }
.ct-iconos, .ct-fila { display: grid; grid-template-columns: 1fr 112px 112px; gap: 12px; align-items: baseline; }
.ct-iconos span { grid-column: auto; display: flex; justify-content: center; }
.ct-iconos span:first-child { grid-column: 2; }
.ct-iconos svg { width: 30px; height: 20px; }
.ct-lista { list-style: none; margin: 0; padding: 0; }
.ct-fila { padding: 15px 0; }
.ct-nombre, .ct-grupo.ct-plato { display: block; font: 400 clamp(16px, 1.9vw, 23px)/1.25 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.ct-nombre small { font-size: .62em; letter-spacing: .12em; text-transform: none; margin-left: 6px; }
.ct-nombre em { font-size: .6em; letter-spacing: 0; text-transform: none; margin-left: 6px; }
.ct-detalle { display: block; margin-top: 6px; font: 400 clamp(11px, 1.15vw, 13px)/1.6 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; max-width: 58ch; }
.ct-precio { justify-self: center; font: 400 clamp(15px, 1.6vw, 19px)/1 'Josefin Sans', sans-serif; letter-spacing: .1em; white-space: nowrap; }
.ct-variante { padding: 9px 0 9px 4px; }
.ct-variante .ct-nombre { font-size: clamp(13px, 1.4vw, 17px); letter-spacing: .2em; }
.ct-grupo { margin-top: 36px; font: 700 clamp(22px, 2.6vw, 30px)/1 var(--titulos); letter-spacing: .03em; text-transform: uppercase; }
.ct-grupo.ct-plato { margin-top: 30px; font-weight: 400; }
.ct-grupo.ct-varietal { margin-top: 28px; font: 700 clamp(16px, 1.8vw, 21px)/1 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: .02em; }
.ct-grupo.ct-centro { text-align: center; margin-top: 56px; font-size: clamp(18px, 2.1vw, 25px); }
.ct-angosta { width: min(100%, 820px); margin-inline: auto; }
.ct-angosta .ct-nombre { font-size: clamp(14px, 1.6vw, 19px); }
.ct-pie { margin-top: 14px; font: italic 400 13px/1.4 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.ct-leyenda { margin-top: 110px; text-align: center; font: 400 13px/1.6 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: .22em; }
.ct-leyenda p:first-child { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; }
.ct-leyenda svg { width: 30px; height: 20px; vertical-align: middle; }
.ct-leyenda i { font-style: normal; }
.ct-cubierto { margin-top: 10px; letter-spacing: 0; font-size: 16px; }
.ct-fecha { margin-top: 6px; letter-spacing: 0; opacity: .7; }
@media (max-width: 700px) {
  .ct-indice { top: 74px; }
  .ct-indice-pista { justify-content: flex-start; }
  .ct-seccion { padding-top: 72px; scroll-margin-top: 70px; }
  .ct-cabeza { gap: 14px; margin-bottom: 28px; }
  .ct-cabeza img { max-height: 170px; }
  .ct-iconos, .ct-fila { grid-template-columns: 1fr 58px 58px; gap: 8px; }
  .ct-iconos svg { width: 24px; height: 16px; }
  .ct-fila { padding: 12px 0; }
  .ct-nombre, .ct-grupo.ct-plato { font-size: 14px; letter-spacing: .1em; }
  .ct-variante .ct-nombre { font-size: 13px; letter-spacing: .14em; }
  .ct-detalle { font-size: 10.5px; letter-spacing: .1em; }
  .ct-precio { font-size: 13.5px; letter-spacing: .04em; }
  .ct-leyenda { letter-spacing: .12em; font-size: 11px; }
}

/* En la carta no va la píldora flotante de WhatsApp */
.carta-impresa ~ .wa { display: none; }

/* Figuras de la tapa de la carta, pegadas al borde de la página como en la impresa */
.con-fig { position: relative; overflow: clip; }
.con-fig > .wrap { position: relative; z-index: 1; }
.borde-fig { position: absolute; z-index: 0; width: auto; pointer-events: none; }
.fig-der { right: 0; }
.fig-izq { left: 0; }
.fig-mediodia { top: 120px; height: clamp(260px, 30vw, 440px); }
.fig-noches { top: 150px; height: clamp(190px, 19vw, 270px); }
.fig-resenas { top: clamp(130px, 13vw, 190px); height: clamp(200px, 19vw, 290px); }
.con-fig > .resenas-cabeza, .con-fig > .cinta { position: relative; z-index: 1; }
@media (min-width: 1101px) { .con-fig > .resenas-cabeza { padding-right: clamp(150px, 14vw, 210px); } }
@media (max-width: 1100px) { .borde-fig { display: none; } }
/* Índice de la carta en el celular: se esfuma en los costados para que se note que se desliza */


/* Portada: figuras de la tapa de la carta, cortadas por el borde de la página (como en la impresa) */
.portada .fig-tapa { display: none; }
@media (min-width: 761px) {
  .hero { position: relative; overflow: clip; }
  .portada { grid-template-columns: 1fr; }
  .portada > img:not(.fig-tapa) { display: none; }
  .portada .fig-tapa { display: block; position: absolute; top: clamp(170px, 17vw, 260px); height: clamp(190px, 19vw, 290px); width: auto; z-index: 0; }
  .portada .fig-izq { left: 0; }
  .portada .fig-der { right: 0; }
  .portada-nombre, .hero h1, .hero-bajada, .hero-acciones { position: relative; z-index: 1; }
}
/* Portada de la carta: los dos mozos que reciben, a los costados del título */
.ct-figs-izq.ct-mozos { align-items: flex-end !important; }
.ct-figs-der.ct-mozos { align-items: flex-start !important; }
.ct-mozos img { height: clamp(220px, 22vw, 320px); }

/* Las figuras también entran: desde su borde, al cargar (portadas) o al llegar a ellas (secciones) */
@media (prefers-reduced-motion: no-preference) {
  .js .portada .fig-izq, .js .ct-figs-izq img { animation: entra-izq 1.1s .2s cubic-bezier(.2, .7, .2, 1) both; }
  .js .portada .fig-der, .js .ct-figs-der img { animation: entra-der 1.1s .28s cubic-bezier(.2, .7, .2, 1) both; }
  .js .borde-fig { opacity: 0; transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1.1s cubic-bezier(.2, .7, .2, 1); }
  .js .borde-fig.fig-der { transform: translateX(70px) rotate(5deg); }
  .js .borde-fig.fig-izq { transform: translateX(-70px) rotate(-5deg); }
  .js .borde-fig.si { opacity: 1; transform: none; }
}
/* Figuras dadas vuelta para que miren hacia el texto */
.pie-ilus img, .faq-ilus { scale: -1 1; }
/* Índice de la carta con el mismo ancho que el resto de la página */
.ct-indice-pista { max-width: var(--ancho); margin: 0 auto; padding-inline: 28px; justify-content: space-between; }
.ct-indice a:first-child { margin-left: -14px; }
.ct-indice a:last-child { margin-right: -14px; }
.ct-indice-pista.desborda { justify-content: flex-start; -webkit-mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 64px), transparent); }
.ct-indice-pista.desborda a:first-child, .ct-indice-pista.desborda a:last-child { margin-inline: 0; }

/* Tipografía de la carta impresa llevada a la web: platos y rótulos en Helvetica mayúscula espaciada, precios en Josefin Sans */
:root { --helvetica: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.carta-lista h3 { font: 400 clamp(18px, 1.8vw, 23px)/1.25 var(--helvetica); letter-spacing: .16em; text-transform: uppercase; }
.carta-lista p { margin-top: 10px; font: 400 clamp(11px, 1.1vw, 13px)/1.65 var(--helvetica); letter-spacing: .16em; text-transform: uppercase; max-width: 52ch; }
.carta-lista li { padding: 22px 0; }
.ticket .it, .llegar h3, .pz li small, .momentos b, .paquete .it, .tira-fotos figcaption, .pz .ovalo { font-family: var(--helvetica); font-style: normal; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.ticket .it, .llegar h3, .paquete .it { font-size: 12px; }
.pz li small { font-size: 11px; color: var(--sobre-rojo); }
.momentos b { font-size: 12px; line-height: 1.9; }
.tira-fotos figcaption { font-size: 11px; }
.paquete .precio, .hero-pie strong, .pz li { font-family: var(--titulos); }
.paquete .precio { font: 400 50px/1 'Josefin Sans', sans-serif; letter-spacing: .02em; }
.panel-numeros strong { font-family: 'Josefin Sans', sans-serif; }
.titulo-cartel { font-size: clamp(48px, 6vw, 84px) !important; text-transform: uppercase; color: var(--rojo); letter-spacing: .01em; }

/* Epígrafes de las fotos de la familia: en rojo y un poco más grandes */
.tira-fotos figcaption { font-size: 13px; color: var(--rojo); margin-top: 14px; }
/* "BODEGÓN - PARRILLA" de la portada, como en la carta */
.portada-bajo .ct-sub { display: block; margin-top: 8px; font: 700 clamp(14px, 1.6vw, 21px)/1 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: .5em; padding-left: .5em; color: var(--rojo); }

/* Entrada de la portada de la carta, con el mismo orden que el inicio: título, rótulo, texto, figuras e índice */
@media (prefers-reduced-motion: no-preference) {
  .js .ct-marca { animation: aparece-sube .8s .05s cubic-bezier(.2, .7, .2, 1) both; }
  .js .ct-arias { display: block; animation: solo-sube .9s .1s cubic-bezier(.2, .7, .2, 1) both; }
  .js .ct-portada .ct-sub { animation: aparece-sube .8s .3s cubic-bezier(.2, .7, .2, 1) both; }
  .js .ct-portada p { animation: aparece-sube .8s .45s cubic-bezier(.2, .7, .2, 1) both; }
  .js .ct-indice { animation: aparece-sube .8s .6s cubic-bezier(.2, .7, .2, 1) both; }
}
/* Títulos de las columnas del pie, como los rótulos de la carta */
.pie h4 { font: 700 13px/1 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 22px; }
.reels-pie .it { font: 700 13px/1.4 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif !important; letter-spacing: .2em; text-transform: uppercase; }

/* Celular: la barra queda siempre fija arriba (sin la que baja al pasar la portada) */
@media (max-width: 1120px) {
  .barra:not(.flotante), .js .barra:not(.flotante) { position: sticky; top: 0; background: rgba(244, 236, 220, .96); animation: none; opacity: 1; transform: none; }
  .barra.flotante { display: none; }
}