/* =========================================================================
   Restaurante Robert · rob-tema · direccion «Brasa»
   Todo sale de DESIGN.md (clientes/restauranterobert). Un valor que no este
   alli no se escribe aqui: se anade alli primero.

   Movil primero. Todo bajo .rob-scope, puesto una vez en el body.

    1. Fuentes          7. Cabecera, menu y barra    13. Como llegar y horario
    2. Tokens           8. Bloques y titulos         14. Blog y prosa
    3. Base             9. Heroe y cabeceras         15. Pie
    4. Utilidades      10. Carta                     16. Movimiento
    5. Fotos y huecos  11. Banda de la portada
    6. Botones         12. Celebraciones
   ========================================================================= */

/* 1. Fuentes ------------------------------------------------------------- */

@font-face {
	font-family: "Big Shoulders Display";
	src: url("../fonts/big-shoulders-display-latin-wght.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope-latin-wght.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

/* Respaldos con metricas cercanas: el cambio de fuente no mueve las lineas. */
@font-face {
	font-family: "Big Shoulders respaldo";
	src: local("Arial Narrow"), local("Roboto Condensed"), local("Arial");
	size-adjust: 92%;
	ascent-override: 100%;
	descent-override: 25%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Manrope respaldo";
	src: local("Arial");
	size-adjust: 104%;
	ascent-override: 102%;
	descent-override: 28%;
	line-gap-override: 0%;
}

/* 2. Tokens -------------------------------------------------------------- */

.rob-scope {
	--rob-carbon: #16120f;
	--rob-carbon-alto: #211b17;
	--rob-hollin: #3a322b;
	--rob-crema: #f3ede4;
	--rob-ceniza: #cfc6ba;
	--rob-ascua: #f06a2a;
	--rob-ascua-viva: #ff8a4c;
	--rob-velo: rgb(22 18 15 / 0.5);
	--rob-velo-fuerte: rgb(22 18 15 / 0.72);

	--rob-f-titular: "Big Shoulders Display", "Big Shoulders respaldo", "Arial Narrow", sans-serif;
	--rob-f-texto: "Manrope", "Manrope respaldo", Arial, sans-serif;

	--rob-t-0: 0.85rem;
	--rob-t-1: 1.0625rem;
	--rob-t-2: 1.375rem;
	--rob-t-3: 1.875rem;
	--rob-t-4: clamp(2.2rem, 1.4rem + 2.6vw, 2.75rem);
	--rob-t-5: clamp(3rem, 1.6rem + 4.6vw, 4.75rem);
	--rob-t-6: clamp(3.6rem, 1rem + 11vw, 10.5rem);

	--rob-e-1: 4px;
	--rob-e-2: 8px;
	--rob-e-3: 12px;
	--rob-e-4: 16px;
	--rob-e-5: 24px;
	--rob-e-6: 32px;
	--rob-e-7: 48px;
	--rob-e-8: 72px;
	--rob-e-9: 112px;
	--rob-lado: clamp(20px, 4.5vw, 48px);
	--rob-sec: var(--rob-e-8);
	--rob-ancho: 82.5rem;

	--rob-r-btn: 2px;
	--rob-cabecera-alto: 68px;

	--rob-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--rob-d-pulsa: 120ms;
	--rob-d-despliega: 180ms;
	--rob-d-panel: 260ms;

	color-scheme: dark;
}

@media (min-width: 900px) {
	.rob-scope {
		--rob-sec: var(--rob-e-9);
		--rob-cabecera-alto: 80px;
	}
}

/* 3. Base ---------------------------------------------------------------- */

.rob-scope {
	margin: 0;
	background: var(--rob-carbon);
	color: var(--rob-crema);
	font-family: var(--rob-f-texto);
	font-size: var(--rob-t-1);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.rob-scope :where(*, *::before, *::after) { box-sizing: border-box; }
.rob-scope :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, address) { margin: 0; }
.rob-scope :where(h1, h2, h3, h4) {
	font-family: var(--rob-f-titular);
	font-weight: 800;
	line-height: 0.95;
	text-transform: uppercase;
	text-wrap: balance;
}
.rob-scope :where(p, li, dd) { text-wrap: pretty; }
.rob-scope :where(ul[role="list"], ol[role="list"]) { list-style: none; padding: 0; }
.rob-scope :where(img, svg, video, iframe) { display: block; max-width: 100%; }
.rob-scope :where(img) { height: auto; }
.rob-scope :where(a) { color: inherit; }
.rob-scope :where(button) { font: inherit; color: inherit; cursor: pointer; }
.rob-scope :where(address) { font-style: normal; }
.rob-scope :where(:focus-visible) { outline: 3px solid var(--rob-ascua); outline-offset: 3px; }
/* Sobre ascua el foco pasa a crema. */
.rob-scope :where(.rob-banda__ascua, .rob-barra__accion--principal, .rob-btn--principal) :where(:focus-visible),
.rob-scope .rob-btn--principal:focus-visible { outline-color: var(--rob-crema); }
.rob-scope :where(::selection) { background: var(--rob-ascua); color: var(--rob-carbon); }

html:where(.lenis) { height: auto; }
html:where(.lenis-stopped) { overflow: hidden; }

/* 4. Utilidades ---------------------------------------------------------- */

.rob-scope .rob-contenedor { width: min(100% - 2 * var(--rob-lado), var(--rob-ancho)); margin-inline: auto; }
.rob-scope .rob-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.rob-scope .rob-saltar {
	position: absolute;
	left: var(--rob-e-4);
	top: var(--rob-e-2);
	z-index: 100;
	padding: var(--rob-e-3) var(--rob-e-5);
	background: var(--rob-ascua);
	color: var(--rob-carbon);
	font-weight: 700;
	transform: translateY(-200%);
}
.rob-scope .rob-saltar:focus-visible { transform: none; }
.rob-scope .rob-cifras { font-variant-numeric: tabular-nums; }
.rob-scope .rob-medida { max-width: 66ch; }
.rob-scope .rob-apagado { color: var(--rob-ceniza); }
.rob-scope .rob-pila > * + * { margin-top: var(--rob-e-3); }
.rob-scope .rob-acciones { display: flex; flex-wrap: wrap; gap: var(--rob-e-3); margin-top: var(--rob-e-6); }
.rob-scope .rob-acciones:empty { display: none; }

/* El rotulo: antetitulo corto, en ascua. */
.rob-scope .rob-rotulo {
	display: block;
	margin: 0 0 var(--rob-e-4);
	font-family: var(--rob-f-texto);
	font-size: var(--rob-t-0);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--rob-ascua);
}
.rob-scope .rob-rotulo__enlace { color: inherit; text-underline-offset: 0.25em; }

/* 5. Fotos y huecos ------------------------------------------------------ */

.rob-scope .rob-marco { position: relative; display: block; overflow: hidden; background: var(--rob-carbon-alto); }
.rob-scope .rob-marco > .rob-foto,
.rob-scope .rob-marco > img { width: 100%; height: 100%; object-fit: cover; }
.rob-scope .rob-marco--hueco { display: grid; place-items: center; outline: 1px dashed var(--rob-ceniza); outline-offset: -1px; }
.rob-scope .rob-marco__rotulo { max-width: 28ch; padding: var(--rob-e-4); font-size: var(--rob-t-0); line-height: 1.4; color: var(--rob-ceniza); text-align: center; }

/* 6. Botones y enlaces --------------------------------------------------- */

/* Interfaz: solo se anima transform. El color cambia al instante. */
.rob-scope .rob-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	min-height: 48px;
	padding: 0.75rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--rob-r-btn);
	font-family: var(--rob-f-texto);
	font-size: var(--rob-t-1);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--rob-d-pulsa) var(--rob-ease-out);
}
.rob-scope .rob-btn:active { transform: scale(0.97); }
.rob-scope .rob-btn--principal { background: var(--rob-ascua); color: var(--rob-carbon); }
.rob-scope .rob-btn--linea,
.rob-scope .rob-btn--linea-clara { border-color: var(--rob-crema); color: var(--rob-crema); background: transparent; }
.rob-scope .rob-btn--tinta { background: var(--rob-carbon); color: var(--rob-crema); }
.rob-scope .rob-btn--blanco { background: var(--rob-crema); color: var(--rob-carbon); }

@media (hover: hover) {
	.rob-scope .rob-btn--principal:hover { background: var(--rob-ascua-viva); }
	.rob-scope .rob-btn--linea:hover,
	.rob-scope .rob-btn--linea-clara:hover { background: var(--rob-crema); color: var(--rob-carbon); }
	.rob-scope .rob-btn--blanco:hover { background: var(--rob-ascua-viva); }
	.rob-scope .rob-btn--tinta:hover { background: var(--rob-carbon-alto); }
}

.rob-scope .rob-enlace { color: var(--rob-ascua); font-weight: 700; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.rob-scope .rob-enlace--claro { color: var(--rob-crema); font-weight: 500; }
@media (hover: hover) {
	.rob-scope .rob-enlace:hover { text-decoration-thickness: 2px; }
}

/* 7. Cabecera, menu de movil y barra de acciones ------------------------- */

.rob-scope .rob-cabecera { position: sticky; top: 0; z-index: 50; background: var(--rob-carbon); border-bottom: 1px solid var(--rob-hollin); }
.rob-scope .rob-cabecera__fila { display: flex; align-items: center; gap: var(--rob-e-5); min-height: var(--rob-cabecera-alto); }
.rob-scope .rob-cabecera__marca { margin-right: auto; text-decoration: none; color: var(--rob-crema); }

/* El logo en dos pisos: el nombre en condensada y el lema en ascua. */
.rob-scope .rob-logo { display: inline-block; }
.rob-scope .rob-logo > span[aria-hidden] { display: grid; }
.rob-scope .rob-logo__nombre { font-family: var(--rob-f-titular); font-size: var(--rob-t-3); font-weight: 900; line-height: 0.9; letter-spacing: 0.02em; text-transform: uppercase; }
.rob-scope .rob-logo__lema { margin-top: 4px; font-size: var(--rob-t-0); font-weight: 700; line-height: 1.1; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rob-ascua); }
.rob-scope .rob-logo--pie .rob-logo__nombre { font-size: var(--rob-t-5); }

.rob-scope .rob-nav { display: none; }
.rob-scope .rob-nav__lista { display: flex; gap: var(--rob-e-6); }
.rob-scope .rob-nav__enlace { font-weight: 500; text-decoration: none; padding-block: var(--rob-e-2); background: linear-gradient(var(--rob-ascua), var(--rob-ascua)) left bottom / 0 2px no-repeat; }
.rob-scope .rob-nav__enlace[aria-current="page"] { background-size: 100% 2px; }
@media (hover: hover) {
	.rob-scope .rob-nav__enlace:hover { background-size: 100% 2px; }
}

.rob-scope .rob-cabecera__acciones { display: flex; align-items: center; gap: var(--rob-e-3); }
.rob-scope .rob-cabecera__llamar { min-height: 44px; padding: 0.6rem 1.1rem; }
.rob-scope .rob-cabecera__numero { display: none; }

.rob-scope .rob-menu-boton { display: inline-flex; align-items: center; gap: var(--rob-e-2); min-height: 44px; padding: 0 var(--rob-e-2); border: 0; background: transparent; font-weight: 700; }
.rob-scope .rob-menu-boton__rayas,
.rob-scope .rob-menu-boton__rayas::before { display: block; width: 22px; height: 2px; background: currentColor; }
.rob-scope .rob-menu-boton__rayas { position: relative; }
.rob-scope .rob-menu-boton__rayas::before { content: ""; position: absolute; top: 7px; width: 14px; background: var(--rob-ascua); }

/* Menu de movil: dialog a pantalla completa. */
.rob-scope .rob-menu {
	position: fixed;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: var(--rob-e-4) var(--rob-lado) calc(var(--rob-e-6) + env(safe-area-inset-bottom));
	border: 0;
	background: var(--rob-carbon);
	color: var(--rob-crema);
	overflow-y: auto;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--rob-d-panel) var(--rob-ease-out), transform var(--rob-d-panel) var(--rob-ease-out), overlay var(--rob-d-panel) allow-discrete, display var(--rob-d-panel) allow-discrete;
}
.rob-scope .rob-menu[open] { display: flex; flex-direction: column; opacity: 1; transform: none; }
@starting-style {
	.rob-scope .rob-menu[open] { opacity: 0; transform: translateY(12px); }
}
.rob-scope .rob-menu::backdrop { background: transparent; }
.rob-scope .rob-menu__alto { display: flex; align-items: center; justify-content: space-between; min-height: var(--rob-cabecera-alto); border-bottom: 1px solid var(--rob-hollin); margin-bottom: var(--rob-e-6); }
.rob-scope .rob-menu__cerrar { min-height: 44px; padding: 0 var(--rob-e-4); border: 2px solid var(--rob-crema); border-radius: var(--rob-r-btn); background: transparent; font-weight: 700; }
.rob-scope .rob-menu__lista { display: grid; gap: var(--rob-e-1); }
.rob-scope .rob-menu__enlace { display: block; padding-block: var(--rob-e-2); font-family: var(--rob-f-titular); font-size: var(--rob-t-5); font-weight: 800; line-height: 1; text-transform: uppercase; text-decoration: none; }
.rob-scope .rob-menu__enlace[aria-current="page"] { color: var(--rob-ascua); }
.rob-scope .rob-menu__pie { margin-top: auto; padding-top: var(--rob-e-7); display: grid; gap: var(--rob-e-4); justify-items: start; color: var(--rob-ceniza); }

/* Barra fija de movil: carta, llamar y como llegar a un toque. */
.rob-scope .rob-barra { position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; padding-bottom: env(safe-area-inset-bottom); background: var(--rob-carbon-alto); border-top: 1px solid var(--rob-hollin); }
.rob-scope .rob-barra__accion { display: grid; place-items: center; min-height: 56px; font-weight: 700; text-decoration: none; }
.rob-scope .rob-barra__accion + .rob-barra__accion { border-left: 1px solid var(--rob-hollin); }
.rob-scope .rob-barra__accion--principal { background: var(--rob-ascua); color: var(--rob-carbon); }
.rob-scope:has(.rob-barra) { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }

@media (min-width: 900px) {
	.rob-scope .rob-nav { display: block; }
	.rob-scope .rob-menu-boton,
	.rob-scope .rob-barra { display: none; }
	.rob-scope:has(.rob-barra) { padding-bottom: 0; }
}

@media (min-width: 1400px) {
	.rob-scope .rob-cabecera__numero { display: inline; }
}

/* Telefonos de contacto: etiqueta pequena encima de cada numero. */
.rob-scope .rob-telefonos { display: grid; gap: var(--rob-e-4); }
.rob-scope .rob-telefonos li { display: grid; gap: 2px; }
.rob-scope .rob-telefonos__tipo { font-size: var(--rob-t-0); color: var(--rob-ceniza); }
.rob-scope .rob-ficha .rob-telefonos a { font-family: var(--rob-f-titular); font-size: var(--rob-t-3); font-weight: 800; text-decoration: none; }

/* 8. Bloques y titulos --------------------------------------------------- */

.rob-scope .rob-bloque { padding-block: var(--rob-sec); }
.rob-scope .rob-bloque--alto { background: var(--rob-carbon-alto); }
.rob-scope .rob-bloque--corto { padding-block: var(--rob-e-8); border-top: 1px solid var(--rob-hollin); }
.rob-scope .rob-titulo { font-family: var(--rob-f-titular); font-size: var(--rob-t-5); font-weight: 800; line-height: 0.95; text-transform: uppercase; }
.rob-scope .rob-texto { max-width: 46ch; margin-top: var(--rob-e-5); color: var(--rob-ceniza); }
.rob-scope .rob-titular { margin: 0; font-family: var(--rob-f-titular); font-weight: 800; text-transform: uppercase; }
.rob-scope .rob-titular--2 { font-size: var(--rob-t-5); line-height: 0.95; }
.rob-scope .rob-titular--3 { font-size: var(--rob-t-4); line-height: 0.98; }
.rob-scope .rob-entradilla { max-width: 48ch; margin-top: var(--rob-e-5); font-size: var(--rob-t-2); line-height: 1.45; color: var(--rob-ceniza); }
.rob-scope .rob-seccion { padding-block: var(--rob-e-8); }
.rob-scope .rob-seccion--corta { padding-block: var(--rob-e-7); }
.rob-scope .rob-banda { padding-block: var(--rob-e-8); }
.rob-scope .rob-banda--viga { background: var(--rob-carbon-alto); border-block: 1px solid var(--rob-hollin); }
.rob-scope .rob-banda__fila { display: grid; gap: var(--rob-e-5); align-items: center; }
@media (min-width: 900px) {
	.rob-scope .rob-banda__fila { grid-template-columns: 1fr auto; }
}

/* 9. Heroe y cabeceras de pagina ----------------------------------------- */

/* El heroe: la foto de las ascuas a sangre y el titular encima, sobre el
   humo. La entradilla y los botones van debajo, sobre carbon liso: el texto
   pequeno nunca se apoya en la foto. */
.rob-scope .rob-heroe { position: relative; isolation: isolate; display: grid; align-items: end; min-height: min(72svh, 700px); overflow: hidden; }
.rob-scope .rob-heroe__foto { position: absolute; inset: 0; z-index: -2; }
.rob-scope .rob-heroe__foto .rob-marco { position: absolute; inset: 0; width: 100%; height: 100%; }
.rob-scope .rob-heroe__foto .rob-foto { object-position: center 70%; }
.rob-scope .rob-heroe__velo { position: absolute; inset: 0; z-index: -1; background: var(--rob-velo); }
.rob-scope .rob-heroe__dentro { padding-block: var(--rob-e-8) var(--rob-e-7); }
.rob-scope .rob-heroe__titulo {
	position: relative;
	max-width: 11ch;
	font-family: var(--rob-f-titular);
	font-size: var(--rob-t-6);
	font-weight: 900;
	line-height: 0.88;
	text-transform: uppercase;
}
/* Momento firma: el titular se enciende. La copia en ascua (pintada desde el
   data-texto, sin duplicar texto en el DOM) sube como el calor al bajar. Sin
   JS o con movimiento reducido, apagada: --encendido vale 0. */
.rob-scope .rob-heroe__titulo::after {
	content: attr(data-texto);
	position: absolute;
	inset: 0;
	color: var(--rob-ascua);
	clip-path: inset(calc(100% - var(--encendido, 0) * 100%) 0 0 0);
	pointer-events: none;
}
.rob-scope .rob-heroe__pie { display: grid; gap: var(--rob-e-5); padding-block: var(--rob-e-6) var(--rob-e-8); border-bottom: 1px solid var(--rob-hollin); }
.rob-scope .rob-heroe__entrada { max-width: 46ch; font-size: var(--rob-t-2); line-height: 1.45; }
.rob-scope .rob-heroe__pie .rob-acciones { margin-top: 0; }
@media (min-width: 900px) {
	.rob-scope .rob-heroe__pie { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--rob-e-8); }
}

.rob-scope .rob-cabeza { padding-block: var(--rob-e-8) var(--rob-e-7); border-bottom: 1px solid var(--rob-hollin); }
.rob-scope .rob-cabeza--viga { background: var(--rob-carbon-alto); }
.rob-scope .rob-cabeza__fecha { margin-top: var(--rob-e-4); color: var(--rob-ceniza); }
.rob-scope .rob-cabeza--foto .rob-contenedor { display: grid; gap: var(--rob-e-7); align-items: end; }
@media (min-width: 900px) {
	.rob-scope .rob-cabeza--foto .rob-contenedor { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--rob-e-8); }
}

/* 10. Carta -------------------------------------------------------------- */

.rob-scope .rob-carta { display: grid; gap: var(--rob-e-8); }
.rob-scope .rob-carta__aviso { font-size: var(--rob-t-0); color: var(--rob-ceniza); }
.rob-scope .rob-carta__cabeza { display: grid; gap: var(--rob-e-2); padding-bottom: var(--rob-e-4); border-bottom: 2px solid var(--rob-ascua); }
.rob-scope .rob-carta__titulo { margin: 0; font-family: var(--rob-f-titular); font-size: var(--rob-t-4); font-weight: 800; line-height: 0.98; text-transform: uppercase; }
.rob-scope .rob-carta__nota { max-width: 52ch; font-size: var(--rob-t-1); line-height: 1.5; color: var(--rob-ceniza); }
.rob-scope .rob-carta__lista { display: grid; align-content: start; }
.rob-scope .rob-plato { display: grid; gap: var(--rob-e-1); padding-block: var(--rob-e-5); border-bottom: 1px solid var(--rob-hollin); }
.rob-scope .rob-plato__linea { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rob-e-5); }
.rob-scope .rob-plato__nombre { margin: 0; font-family: var(--rob-f-titular); font-size: var(--rob-t-3); font-weight: 800; line-height: 1; text-transform: uppercase; }
.rob-scope .rob-plato__precio { flex: none; font-size: var(--rob-t-2); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--rob-ascua); }
.rob-scope .rob-plato__desc,
.rob-scope .rob-plato__nota { max-width: 52ch; font-size: var(--rob-t-1); line-height: 1.5; color: var(--rob-ceniza); }
.rob-scope .rob-plato__alergenos { font-size: var(--rob-t-0); color: var(--rob-ceniza); }
.rob-scope .rob-plato__marcas { display: flex; gap: var(--rob-e-2); }
.rob-scope .rob-distintivo { padding: 2px var(--rob-e-2); border: 1px solid currentColor; border-radius: var(--rob-r-btn); font-size: var(--rob-t-0); font-weight: 700; }

/* La brasa en la portada: titulo y foto a un lado, los cortes al otro. */
.rob-scope .rob-brasa { display: grid; gap: var(--rob-e-7); }
.rob-scope .rob-brasa__foto { margin-top: var(--rob-e-7); }
.rob-scope .rob-brasa__mas { margin-top: var(--rob-e-6); color: var(--rob-ceniza); }
@media (min-width: 900px) {
	.rob-scope .rob-brasa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--rob-e-8); }
}

/* Pagina de carta: secciones a un toque, pegadas bajo la cabecera. */
.rob-scope .rob-carta-nav { position: sticky; top: var(--rob-cabecera-alto); z-index: 30; background: var(--rob-carbon); border-bottom: 1px solid var(--rob-hollin); }
.rob-scope .rob-carta-nav__lista { display: flex; gap: var(--rob-e-6); overflow-x: auto; scrollbar-width: none; }
.rob-scope .rob-carta-nav__enlace { display: block; padding-block: var(--rob-e-4); font-weight: 700; white-space: nowrap; text-decoration: none; }
@media (hover: hover) {
	.rob-scope .rob-carta-nav__enlace:hover { color: var(--rob-ascua); }
}
.rob-scope .rob-carta__seccion { scroll-margin-top: calc(var(--rob-cabecera-alto) + 64px); }
@media (min-width: 900px) {
	.rob-scope.rob-page-carta .rob-carta__lista { grid-template-columns: 1fr 1fr; column-gap: var(--rob-e-8); }
}

/* 11. Banda de la portada ------------------------------------------------ */

/* Tres piezas de igual alto: salon, bloque en ascua, salon de fiesta. */
.rob-scope .rob-banda3 { display: grid; }
.rob-scope .rob-banda3__ascua { display: grid; align-content: center; gap: var(--rob-e-4); padding: var(--rob-e-7) var(--rob-lado); background: var(--rob-ascua); color: var(--rob-carbon); }
.rob-scope .rob-banda3__ascua .rob-titulo { font-size: var(--rob-t-4); font-weight: 900; }
.rob-scope .rob-banda3__ascua .rob-enlace { color: var(--rob-carbon); }
@media (min-width: 900px) {
	.rob-scope .rob-banda3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 11b. Secciones de la portada ------------------------------------------- */

/* Cabecera de seccion con enlace a la derecha. */
.rob-scope .rob-bloque__cabeza { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--rob-e-5); margin-bottom: var(--rob-e-7); }
.rob-scope .rob-bloque__cabeza .rob-texto { margin-top: var(--rob-e-4); }

/* Los arroces: tarjetas sobre carbon, en una banda algo mas clara. */
.rob-scope .rob-arroces { background: var(--rob-carbon-alto); }
.rob-scope .rob-arroces .rob-carta__lista { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--rob-e-4); }
.rob-scope .rob-arroces .rob-plato { align-content: start; gap: var(--rob-e-3); padding: var(--rob-e-5); background: var(--rob-carbon); border: 1px solid var(--rob-hollin); }
.rob-scope .rob-arroces .rob-plato__linea { flex-direction: column; align-items: flex-start; gap: var(--rob-e-3); }

/* La casa: texto a un lado y tres fotos al otro; la de la calle, alta. */
.rob-scope .rob-casa { display: grid; gap: var(--rob-e-7); }
.rob-scope .rob-casa__fotos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rob-e-4); align-items: start; }
.rob-scope .rob-casa__fotos > :first-child { grid-row: span 2; }
@media (min-width: 900px) {
	.rob-scope .rob-casa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: var(--rob-e-8); }
}

/* Tambien en la carta: entrantes y Robert Gourmet, lado a lado. */
.rob-scope .rob-picar__listas { display: grid; gap: var(--rob-e-7); }
.rob-scope .rob-picar .rob-plato__nombre { font-size: var(--rob-t-2); }
@media (min-width: 900px) {
	.rob-scope .rob-picar__listas { grid-template-columns: 1fr 1fr; column-gap: var(--rob-e-8); }
}

/* 11c. Paginas de la casa ------------------------------------------------
   La brasa, Arroces y La casa: portadilla con foto, fichas de tres en fondo
   alto, galeria de salones y un cierre en ascua. */

.rob-scope .rob-heroe--pagina { min-height: min(56svh, 560px); }
.rob-scope .rob-heroe--pagina .rob-heroe__titulo { max-width: 14ch; font-size: var(--rob-t-5); line-height: 0.92; }
/* Las fotos de las paginas son claras (azulejo, cal): velo mas denso y el
   rotulo en crema, para que el texto pequeno pase el contraste. */
.rob-scope .rob-heroe--pagina .rob-heroe__velo { background: var(--rob-velo-fuerte); }
.rob-scope .rob-heroe--pagina .rob-rotulo { color: var(--rob-crema); }

.rob-scope .rob-tres { display: grid; gap: var(--rob-e-4); align-self: start; }
.rob-scope .rob-ficha { display: grid; gap: var(--rob-e-3); align-content: start; padding: var(--rob-e-6) var(--rob-e-5); background: var(--rob-carbon-alto); border-top: 3px solid var(--rob-ascua); }
.rob-scope .rob-ficha__titulo { font-family: var(--rob-f-titular); font-size: var(--rob-t-4); font-weight: 800; line-height: 0.98; text-transform: uppercase; }
.rob-scope .rob-ficha p { color: var(--rob-ceniza); }
.rob-scope .rob-bloque--alto .rob-ficha { background: var(--rob-carbon); }
.rob-scope .rob-tras { margin-top: var(--rob-e-6); }

.rob-scope .rob-galeria { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rob-e-4); align-items: start; }
.rob-scope .rob-galeria > :first-child { grid-column: 1 / -1; }

.rob-scope .rob-cierre { background: var(--rob-ascua); color: var(--rob-carbon); }
.rob-scope .rob-cierre__fila { display: grid; gap: var(--rob-e-5); align-items: center; padding-block: var(--rob-e-8); }
.rob-scope .rob-cierre .rob-titulo { font-size: var(--rob-t-4); font-weight: 900; }
.rob-scope .rob-cierre p { max-width: 46ch; margin-top: var(--rob-e-3); }
.rob-scope .rob-cierre .rob-acciones { margin-top: 0; }
.rob-scope .rob-cierre .rob-btn--linea { border-color: var(--rob-carbon); color: var(--rob-carbon); }
@media (hover: hover) {
	.rob-scope .rob-cierre .rob-btn--linea:hover { background: var(--rob-carbon); color: var(--rob-crema); }
}

@media (min-width: 900px) {
	.rob-scope .rob-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rob-e-5); }
	.rob-scope .rob-tres--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rob-scope .rob-galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rob-e-5); }
	.rob-scope .rob-galeria > :first-child { grid-column: span 2; grid-row: span 2; }
	.rob-scope .rob-cierre__fila { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--rob-e-8); }
}

/* Pizzas: la lista a dos columnas, como en la carta. */
@media (min-width: 900px) {
	.rob-scope .rob-pizzas .rob-carta__lista { grid-template-columns: 1fr 1fr; column-gap: var(--rob-e-8); }
}

/* Con siete enlaces, la navegacion de escritorio necesita sitio: entre 900 y
   1200 px sigue el boton de menu. */
@media (min-width: 900px) and (max-width: 1199px) {
	.rob-scope .rob-nav { display: none; }
	.rob-scope .rob-menu-boton { display: inline-flex; }
}

/* 12. Celebraciones (pagina) --------------------------------------------- */

.rob-scope .rob-ocasiones { display: grid; gap: var(--rob-e-7) var(--rob-e-6); }
.rob-scope .rob-ocasion { display: grid; gap: var(--rob-e-4); align-content: start; }
.rob-scope .rob-ocasion__titulo { margin-top: var(--rob-e-2); font-family: var(--rob-f-titular); font-size: var(--rob-t-4); font-weight: 800; line-height: 0.98; text-transform: uppercase; }
.rob-scope .rob-ocasion p { max-width: 44ch; color: var(--rob-ceniza); }
.rob-scope .rob-celebra__tira { margin-top: var(--rob-e-8); }
.rob-scope .rob-celebra__cierre { display: grid; gap: var(--rob-e-4); margin-top: var(--rob-e-8); padding: var(--rob-e-7) var(--rob-lado); background: var(--rob-ascua); color: var(--rob-carbon); }
.rob-scope .rob-celebra__cierre .rob-titulo { font-size: var(--rob-t-4); font-weight: 900; }
@media (min-width: 900px) {
	.rob-scope .rob-ocasiones { grid-template-columns: 1fr 1fr; }
}

/* 13. Como llegar, horario y mapa ---------------------------------------- */

.rob-scope .rob-llegar { display: grid; gap: var(--rob-e-6); }
.rob-scope .rob-llegar__datos:empty { display: none; }
.rob-scope .rob-horario { display: grid; gap: var(--rob-e-1); margin: 0; }
.rob-scope .rob-horario__fila { display: flex; justify-content: space-between; gap: var(--rob-e-4); padding-block: var(--rob-e-2); border-bottom: 1px solid var(--rob-hollin); }
.rob-scope .rob-horario dt { font-weight: 700; }
.rob-scope .rob-horario dd { margin: 0; font-variant-numeric: tabular-nums; }
.rob-scope .rob-horario__fila--cerrado dd { color: var(--rob-ceniza); }
.rob-scope .rob-estado { margin-top: var(--rob-e-4); font-weight: 700; color: var(--rob-ascua); }
.rob-scope .rob-direccion { display: grid; }
.rob-scope .rob-mapa { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--rob-carbon-alto); }
.rob-scope .rob-mapa__pie { margin-top: var(--rob-e-3); }
.rob-scope .rob-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 900px) {
	.rob-scope .rob-llegar:has(.rob-llegar__datos:not(:empty)) { grid-template-columns: 1fr 1fr; column-gap: var(--rob-e-8); }
}

/* 14. Blog y prosa ------------------------------------------------------- */

.rob-scope .rob-prosa { max-width: 66ch; }
.rob-scope .rob-prosa > * + * { margin-top: 1.1em; }
.rob-scope .rob-prosa :where(h2) { margin-top: 1.6em; font-size: var(--rob-t-4); line-height: 0.98; }
.rob-scope .rob-prosa :where(h3) { margin-top: 1.4em; font-size: var(--rob-t-3); line-height: 1; }
.rob-scope .rob-prosa :where(ul, ol) { padding-left: 1.25em; }
.rob-scope .rob-prosa :where(li + li) { margin-top: 0.4em; }
.rob-scope .rob-prosa :where(li::marker) { color: var(--rob-ascua); }
.rob-scope .rob-prosa :where(a) { color: var(--rob-ascua); text-underline-offset: 0.2em; }
.rob-scope .rob-prosa :where(strong) { color: var(--rob-crema); }
.rob-scope .rob-prosa :where(blockquote) { padding-left: var(--rob-e-5); border-left: 4px solid var(--rob-ascua); font-size: var(--rob-t-2); line-height: 1.4; }
.rob-scope .rob-prosa :where(figcaption) { margin-top: var(--rob-e-2); font-size: var(--rob-t-0); color: var(--rob-ceniza); }
.rob-scope .rob-prosa :where(hr) { border: 0; height: 2px; background: var(--rob-hollin); }
.rob-scope .rob-prosa :where(table) { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.rob-scope .rob-prosa :where(th, td) { padding: var(--rob-e-2) var(--rob-e-3); border-bottom: 1px solid var(--rob-hollin); text-align: left; }

/* La entrada: titulo, foto y texto en una sola columna centrada. */
.rob-scope .rob-articulo .rob-contenedor { width: min(100% - 2 * var(--rob-lado), 46rem); }
.rob-scope .rob-articulo .rob-cabeza { border-bottom: 0; padding-bottom: var(--rob-e-6); }

.rob-scope .rob-entradas { display: grid; gap: var(--rob-e-7); }
.rob-scope .rob-entrada__enlace { display: grid; gap: var(--rob-e-3); text-decoration: none; }
.rob-scope .rob-entrada__foto { order: -1; margin-bottom: var(--rob-e-2); }
.rob-scope .rob-entrada__meta { display: flex; flex-wrap: wrap; gap: var(--rob-e-3); font-size: var(--rob-t-0); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rob-ascua); }
.rob-scope .rob-entrada__titulo { margin: 0; font-family: var(--rob-f-titular); font-size: var(--rob-t-4); font-weight: 800; line-height: 0.98; text-transform: uppercase; }
.rob-scope .rob-entrada__extracto { margin: var(--rob-e-2) 0 0; color: var(--rob-ceniza); }
@media (hover: hover) {
	.rob-scope .rob-entrada__enlace:hover .rob-entrada__titulo { color: var(--rob-ascua); }
}
.rob-scope .rob-vecinas { display: grid; gap: var(--rob-e-5); }
.rob-scope .rob-vecina { display: grid; gap: var(--rob-e-1); text-decoration: none; }
.rob-scope .rob-vecina__titulo { font-family: var(--rob-f-titular); font-size: var(--rob-t-3); font-weight: 800; line-height: 1; text-transform: uppercase; }
.rob-scope .rob-paginacion { display: flex; flex-wrap: wrap; gap: var(--rob-e-2); margin-top: var(--rob-e-7); }
.rob-scope .rob-paginacion :where(a, span) { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 var(--rob-e-3); border: 1px solid var(--rob-hollin); text-decoration: none; font-variant-numeric: tabular-nums; }
.rob-scope .rob-paginacion :where(.current) { background: var(--rob-ascua); color: var(--rob-carbon); border-color: var(--rob-ascua); }
@media (min-width: 900px) {
	.rob-scope .rob-entradas { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--rob-e-7); }
	.rob-scope .rob-vecinas { grid-template-columns: 1fr 1fr; }
}

/* 15. Pie ---------------------------------------------------------------- */

.rob-scope .rob-pie { border-top: 1px solid var(--rob-hollin); padding-bottom: var(--rob-e-6); }
.rob-scope .rob-pie > .rob-viga { display: none; }
.rob-scope .rob-pie__reticula { display: grid; gap: var(--rob-e-7); padding-block: var(--rob-e-8) var(--rob-e-7); }
.rob-scope .rob-pie__lugar { margin-top: var(--rob-e-4); max-width: 30ch; color: var(--rob-ceniza); }
.rob-scope .rob-pie__nav { display: grid; gap: var(--rob-e-2); }
.rob-scope .rob-pie__nav .rob-enlace { text-decoration: none; }
@media (hover: hover) {
	.rob-scope .rob-pie__nav .rob-enlace:hover { color: var(--rob-ascua); }
}
.rob-scope .rob-pie__bajo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--rob-e-4); padding-top: var(--rob-e-5); border-top: 1px solid var(--rob-hollin); font-size: var(--rob-t-0); color: var(--rob-ceniza); }
.rob-scope .rob-pie__legal { display: flex; flex-wrap: wrap; gap: var(--rob-e-2) var(--rob-e-5); }
.rob-scope .rob-firma { margin-left: auto; }
@media (min-width: 900px) {
	.rob-scope .rob-pie__reticula { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
}

/* 16. Movimiento --------------------------------------------------------- */

/* Titulares por lineas: SplitText envuelve cada linea en una mascara que
   recorta. Con el interlineado apretado de la condensada, la mascara se come
   las tildes de las mayusculas (RINCÓN, ÚNICO): se le da aire por arriba y
   por abajo sin mover nada. */
.rob-scope [data-rob-lineas] > * { padding-block: 0.14em; margin-block: -0.14em; }

@media (prefers-reduced-motion: reduce) {
	.rob-scope .rob-menu,
	.rob-scope .rob-menu[open] { transform: none; transition-property: opacity, overlay, display; }
	@starting-style {
		.rob-scope .rob-menu[open] { transform: none; }
	}
	.rob-scope .rob-btn { transition: none; }
	.rob-scope .rob-btn:active { transform: none; }
}