/* ==========================================================================
   Grupo Canalla — hoja de estilos unica.
   Mobile-first. Los colores base llegan como variables desde head.php.

   Indice:
     01 Tipografias        06 Cabecera y navegacion   11 Formularios
     02 Reset y base       07 Portada (hero)          12 Pie
     03 Escala y tokens    08 Restaurantes            13 Flotantes
     04 Contenedor         09 Ficha de restaurante    14 Utilidades
     05 Botones            10 Bloques de contenido    15 Movimiento
                                                      16 Acabado visual
   ========================================================================== */

/* 01 · TIPOGRAFIAS ======================================================== */
/* Variables self-hosted. font-display:swap = el texto se ve desde el primer
   frame con la fuente de sistema y no hay salto de layout perceptible. */
@font-face{
  font-family:'Playfair Display';font-style:normal;font-weight:400 900;
  font-display:swap;src:url('/assets/fonts/PlayfairDisplay-normal-400-900-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Playfair Display';font-style:normal;font-weight:400 900;
  font-display:swap;src:url('/assets/fonts/PlayfairDisplay-normal-400-900-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Playfair Display';font-style:italic;font-weight:400 700;
  font-display:swap;src:url('/assets/fonts/PlayfairDisplay-italic-400-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:300 700;
  font-display:swap;src:url('/assets/fonts/Inter-normal-300-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:300 700;
  font-display:swap;src:url('/assets/fonts/Inter-normal-300-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* 03 · TOKENS ============================================================= */
:root{
  --display:'Playfair Display',Georgia,'Times New Roman',serif;
  --texto:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Rojo SOLO para texto pequeno. El rojo de marca (#E40613) da 4,06:1 sobre
     negro y 4,30:1 sobre crema: vale para rellenos y filetes (min 3:1) pero se
     queda corto para texto de 12-14 px, que necesita 4,5:1. Estos dos son el
     mismo rojo corregido en luminosidad, no un color nuevo.
     El valor esta elegido para cumplir 4,5:1 sobre las TRES superficies
     oscuras (negro, superficie y superficie-2), no solo sobre el fondo:
       #F24343 -> 5,30 / 4,96 / 4,58
       #C20B19 sobre crema -> 5,56                                             */
  --rojo-texto:#F24343;

  --superficie:#141416;
  --superficie-2:#1C1C1F;
  --borde:rgba(245,241,234,.14);
  --borde-fuerte:rgba(245,241,234,.28);
  --tenue:rgba(245,241,234,.62);
  --muy-tenue:rgba(245,241,234,.44);

  /* Escala de 8 px */
  --e1:8px;  --e2:16px; --e3:24px; --e4:32px;
  --e5:48px; --e6:64px; --e7:96px; --e8:128px;

  --radio:4px;
  --transicion:.25s cubic-bezier(.22,.61,.36,1);
  --alto-cabecera:64px;
}

/* 02 · RESET Y BASE ======================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--alto-cabecera) + 16px)}
body{
  margin:0;
  background:var(--negro);
  color:var(--crema);
  font-family:var(--texto);
  font-size:17px;           /* >=16px: evita el zoom automatico de iOS */
  line-height:1.65;
  font-weight:350;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;          /* red de seguridad; el layout ya no desborda */
}
img,picture,svg,video{display:block;max-width:100%;height:auto}
picture{display:contents}
a{color:inherit;text-decoration-color:rgba(245,241,234,.35);text-underline-offset:.22em}
a:hover{text-decoration-color:var(--rojo)}
ul,ol{margin:0;padding:0;list-style:none}
address{font-style:normal}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--rojo);outline-offset:3px;border-radius:2px}
::selection{background:var(--rojo);color:#fff}

.skip-link{
  position:absolute;left:var(--e2);top:-100px;z-index:200;
  background:var(--rojo);color:#fff;padding:12px 20px;border-radius:var(--radio);
  font-weight:600;text-decoration:none;transition:top var(--transicion);
}
.skip-link:focus{top:var(--e2)}

/* Titulares --------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:700;line-height:1.06;
  letter-spacing:-.015em;margin:0;text-wrap:balance;
}
h1{font-size:clamp(2.6rem,9vw,5.4rem)}
h2{font-size:clamp(2rem,6vw,3.6rem)}
h3{font-size:clamp(1.35rem,3.4vw,2rem);line-height:1.18}
h4{font-size:clamp(1.1rem,2.4vw,1.3rem);line-height:1.3}
p{margin:0 0 var(--e2)}
p:last-child{margin-bottom:0}

.cursiva{font-style:italic}
.rojo{color:var(--rojo)}

/* Antetitulo: el hilo visual que repite toda la web */
.antetitulo{
  display:flex;align-items:center;gap:12px;
  font-family:var(--texto);font-size:.75rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--rojo-texto);
  margin:0 0 var(--e2);
}
.antetitulo::before{content:"";width:34px;height:2px;background:var(--rojo);flex:none}

.entradilla{
  font-size:clamp(1.05rem,2.4vw,1.3rem);line-height:1.6;
  color:var(--tenue);max-width:62ch;
}

/* 04 · CONTENEDOR ========================================================= */
/* Ancho fluido + tope + padding lateral FIJO en px. Nunca porcentajes. */
.contenedor{
  width:100%;max-width:1200px;margin-inline:auto;
  padding-inline:16px;
}
.contenedor--estrecho{max-width:760px}
.contenedor--medio{max-width:960px}

.seccion{padding-block:var(--e6)}
.seccion--holgada{padding-block:var(--e7)}
/* En fondo claro se redefinen los tokens en vez de parchear cada regla:
   asi cualquier bloque reutilizado (destacados, entradillas, bordes) tiene
   contraste AA sin escribir excepciones una por una. */
.seccion--clara{
  background:var(--crema);color:var(--negro);
  --rojo-texto:#C20B19;              /* el aclarado no se ve sobre crema */
  --tenue:rgba(11,11,12,.70);
  --muy-tenue:rgba(11,11,12,.55);
  --borde:rgba(11,11,12,.16);
  --borde-fuerte:rgba(11,11,12,.32);
}
.seccion--clara a{text-decoration-color:rgba(11,11,12,.35)}
.seccion--gris{background:var(--superficie)}
.seccion--roja{background:var(--rojo);color:#fff}

.seccion__cabeza{max-width:62ch;margin-bottom:var(--e5)}
.seccion__cabeza p{margin-top:var(--e2)}

/* 05 · BOTONES ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 26px;                /* toca >=44px */
  font-family:var(--texto);font-size:.95rem;font-weight:600;
  letter-spacing:.01em;text-decoration:none;
  border:1.5px solid transparent;border-radius:var(--radio);
  cursor:pointer;transition:background var(--transicion),color var(--transicion),
    border-color var(--transicion),transform var(--transicion);
}
.btn:active{transform:translateY(1px)}
.btn--rojo{background:var(--rojo);border-color:var(--rojo);color:#fff}
.btn--rojo:hover{background:var(--rojo-osc);border-color:var(--rojo-osc);color:#fff}
.btn--fantasma{background:transparent;border-color:var(--borde-fuerte);color:var(--crema)}
.btn--fantasma:hover{border-color:var(--crema);background:rgba(245,241,234,.07)}
.seccion--clara .btn--fantasma{border-color:rgba(11,11,12,.3);color:var(--negro)}
.seccion--clara .btn--fantasma:hover{border-color:var(--negro);background:rgba(11,11,12,.05)}
.btn--claro{background:var(--crema);border-color:var(--crema);color:var(--negro)}
.btn--claro:hover{background:#fff;border-color:#fff}
.btn--sm{min-height:44px;padding:9px 18px;font-size:.88rem}
.btn--ancho{width:100%}

.botonera{display:flex;flex-wrap:wrap;gap:12px}

/* Enlace con flecha. El padding vertical no es estetico: sube el area
   pulsable a 44 px, que es el minimo comodo en movil. */
.enlace-flecha{
  display:inline-flex;align-items:center;gap:9px;min-height:44px;
  font-weight:600;font-size:.95rem;text-decoration:none;
  border-bottom:1.5px solid var(--rojo);padding:10px 0 8px;
}
.enlace-flecha svg{transition:transform var(--transicion)}
.enlace-flecha:hover svg{transform:translateX(4px)}

/* 06 · CABECERA =========================================================== */
/* OJO: el desenfoque va en un ::before, NO en .cabecera.
   Un elemento con backdrop-filter se convierte en bloque contenedor de sus
   descendientes position:fixed. Con el filtro puesto en .cabecera, el panel
   del menu movil (que es hijo suyo y va fixed) se quedaba encerrado dentro de
   los 64 px de la cabecera: solo se veia el primer enlace y el fondo no
   cubria la pagina. En el pseudoelemento el efecto es identico y el panel
   vuelve a medirse contra la ventana. */
.cabecera{
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--borde);
}
.cabecera::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(11,11,12,.86);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
}
.cabecera__fila{
  display:flex;align-items:center;justify-content:space-between;
  min-height:var(--alto-cabecera);gap:var(--e2);
}
.marca{
  display:inline-flex;align-items:baseline;gap:4px;
  font-family:var(--display);font-weight:800;font-size:1.32rem;
  letter-spacing:-.02em;text-decoration:none;color:var(--crema);
  padding-block:6px;
}
.marca__punto{width:7px;height:7px;border-radius:50%;background:var(--rojo);flex:none}
.marca:hover{color:#fff}

.menu-btn{
  display:inline-flex;align-items:center;gap:9px;
  min-height:44px;padding:8px 12px;margin-right:-12px;
  background:none;border:0;cursor:pointer;
  font-size:.82rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.menu-btn__barras{display:block;width:22px;height:12px;position:relative}
.menu-btn__barras span{
  position:absolute;left:0;width:100%;height:2px;background:currentColor;
  border-radius:2px;transition:transform var(--transicion),opacity var(--transicion);
}
.menu-btn__barras span:first-child{top:0}
.menu-btn__barras span:last-child{bottom:0}
.menu-btn[aria-expanded="true"] .menu-btn__barras span:first-child{transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__barras span:last-child{transform:translateY(-5px) rotate(-45deg)}

/* Navegacion — movil: panel a pantalla completa */
.nav{
  /* +1px = el borde inferior de la cabecera, para que no quede costura */
  position:fixed;inset:calc(var(--alto-cabecera) + 1px) 0 0 0;z-index:99;
  background:var(--negro);
  padding:var(--e3) 16px var(--e6);
  overflow-y:auto;overscroll-behavior:contain;
  transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:opacity var(--transicion),transform var(--transicion),visibility var(--transicion);
}
.nav.abierto{transform:none;opacity:1;visibility:visible}
.nav__lista{display:flex;flex-direction:column;gap:2px}
.nav__item > a{
  display:flex;align-items:center;gap:8px;
  padding:14px 4px;min-height:48px;
  font-family:var(--display);font-size:1.6rem;font-weight:600;
  text-decoration:none;color:var(--crema);
  border-bottom:1px solid var(--borde);
}
.nav__item > a[aria-current]{color:var(--rojo-texto)}
.nav__caret{display:none}

.submenu{padding:var(--e1) 0 var(--e3) 4px;display:flex;flex-direction:column;gap:2px}
.submenu a{
  display:flex;align-items:center;gap:14px;
  padding:11px 8px;min-height:48px;text-decoration:none;border-radius:var(--radio);
}
.submenu a:hover,.submenu a:focus-visible{background:var(--superficie)}
.submenu a[aria-current]{color:var(--rojo-texto)}
.submenu__num{
  font-family:var(--display);font-size:.86rem;color:var(--rojo-texto);
  min-width:24px;font-weight:700;
}
.submenu strong{display:block;font-weight:600;font-size:1rem;line-height:1.3}
.submenu small{display:block;font-size:.8rem;color:var(--muy-tenue)}

.nav__item--cta{margin-top:var(--e3)}
.nav__item--cta a{font-family:var(--texto)}

body.menu-abierto{overflow:hidden}

@media (min-width:1024px){
  .menu-btn{display:none}
  .nav{
    position:static;inset:auto;padding:0;background:none;overflow:visible;
    transform:none;opacity:1;visibility:visible;
  }
  .nav__lista{flex-direction:row;align-items:center;gap:var(--e1)}
  .nav__item{position:relative}
  .nav__item > a{
    font-family:var(--texto);font-size:.94rem;font-weight:500;
    padding:10px 14px;min-height:44px;border-bottom:0;border-radius:var(--radio);
    color:var(--tenue);
  }
  .nav__item > a:hover{color:var(--crema);background:rgba(245,241,234,.06)}
  .nav__item > a[aria-current]{color:var(--crema)}
  .nav__item > a[aria-current]::after{
    content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--rojo);
  }
  .nav__caret{display:block;opacity:.6}

  /* Submenu de escritorio: hover + focus-within, sin depender de JS */
  .submenu{
    position:absolute;top:calc(100% + 6px);left:0;z-index:5;
    min-width:290px;padding:var(--e1);
    background:var(--superficie);border:1px solid var(--borde);
    border-radius:8px;box-shadow:0 22px 48px rgba(0,0,0,.6);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity var(--transicion),transform var(--transicion),visibility var(--transicion);
  }
  .nav__item--desplegable:hover .submenu,
  .nav__item--desplegable:focus-within .submenu{opacity:1;visibility:visible;transform:none}
  .nav__item--cta{margin-top:0;margin-left:var(--e1)}
}

/* 07 · PORTADA ============================================================ */
.hero{position:relative;isolation:isolate;overflow:hidden;background:var(--negro)}
.hero__foto{position:absolute;inset:0;z-index:-2}
.hero__foto img{width:100%;height:100%;object-fit:cover;object-position:center 62%}

/* ── Triptico de la portada: una foto por casa ────────────────────────────
   Es lo que distingue la home de las fichas, que llevan una sola foto a
   sangre. Aqui ninguna marca manda sobre las otras.

   MOVIL: tira horizontal ENCIMA del texto. Tres columnas verticales de
   130 px no se entienden, se leen como textura; y ademas el titular caeria
   sobre la zona mas cargada de las fotos.
   TABLET Y ESCRITORIO: las tres franjas pasan a ser el fondo. */
.hero__mosaico{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--borde);
  height:clamp(190px,32svh,290px);
}
.hero__pieza{overflow:hidden;display:block}
.hero__pieza img{width:100%;height:100%;object-fit:cover}
/* Cada franja arranca su acercamiento un poco despues: evita que las tres
   se muevan como un bloque y da profundidad. */
.hero__pieza:nth-child(2) img{animation-delay:.5s}
.hero__pieza:nth-child(3) img{animation-delay:1s}

/* En movil el texto va sobre negro liso, asi que sobran velo y vineta. */
.hero--triptico .hero__velo{display:none}
.hero--triptico::after{display:none}
.hero--triptico .hero__cuerpo{min-height:0;padding-block:var(--e5) var(--e4)}

@media (min-width:768px){
  .hero__mosaico{position:absolute;inset:0;z-index:-2;height:auto}
  .hero--triptico::after{display:block}
  .hero--triptico .hero__cuerpo{
    min-height:clamp(560px,88svh,900px);
    padding-block:var(--e7) var(--e5);
  }
  /* Con tres fotos hay mas zonas claras, asi que el velo carga la mano por la
     izquierda, que es donde va el texto. Medido sobre el render: el titular
     queda a 4,3:1 (texto grande, pide 3) y la entradilla a 6,0:1 (pide 4,5). */
  .hero--triptico .hero__velo{
    display:block;
    background:
      linear-gradient(180deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.30) 40%,rgba(11,11,12,.96) 100%),
      linear-gradient(90deg,rgba(11,11,12,.86) 0%,rgba(11,11,12,.62) 40%,rgba(11,11,12,.22) 82%);
  }
}
.hero__velo{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(11,11,12,.82) 0%,rgba(11,11,12,.5) 42%,rgba(11,11,12,.94) 100%),
    linear-gradient(90deg,rgba(11,11,12,.9) 0%,rgba(11,11,12,.25) 70%);
}
.hero__cuerpo{
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(560px,88svh,900px);
  padding-block:var(--e7) var(--e5);
}
.hero__titulo{margin-bottom:var(--e3)}
.hero__titulo .linea{display:block}
.hero__titulo .cursiva{color:var(--rojo);font-style:italic}
.hero__texto{max-width:52ch;color:rgba(245,241,234,.86);margin-bottom:var(--e4)}
.hero__botones{margin-bottom:var(--e5)}

/* Tira de marcas al pie del hero */
.hero__marcas{
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--borde);border-block:1px solid var(--borde);
}
.hero__marca{
  display:flex;align-items:baseline;gap:12px;
  /* Sin sangrado lateral en movil: el numero tiene que caer justo en la
     misma linea vertical que el titular del hero. */
  padding:16px 0;background:var(--negro);text-decoration:none;
  transition:background var(--transicion);
}
.hero__marca:hover{background:var(--superficie)}
.hero__marca-num{font-family:var(--display);font-size:.8rem;color:var(--rojo-texto);font-weight:700}
.hero__marca-nom{font-family:var(--display);font-size:1.15rem;font-weight:700}
.hero__marca-tipo{font-size:.8rem;color:var(--muy-tenue);margin-left:auto;text-align:right}

@media (min-width:768px){
  .hero__marcas{grid-template-columns:repeat(3,1fr)}
  .hero__marca{flex-direction:column;gap:6px;padding:22px 20px;background:rgba(11,11,12,.6)}
  .hero__marca-tipo{margin-left:0;text-align:left}
  /* El sangrado de la primera celda sacaba "La Capital" 20 px a la derecha
     del titular. Se compensa tirando de la tira hacia fuera: el texto vuelve
     a la linea de la rejilla y la franja queda simetrica. */
  .hero__marcas{margin-inline:-20px}
}

/* 08 · RESTAURANTES ======================================================= */
/* Fila alterna: numero enorme de fondo, foto y texto. */
.marca-fila{position:relative;padding-block:var(--e6);border-top:1px solid var(--borde)}
.marca-fila:first-of-type{border-top:0}
.marca-fila__rejilla{display:grid;gap:var(--e4);align-items:center}

.marca-fila__foto{position:relative;overflow:hidden;border-radius:var(--radio);background:var(--superficie)}
.marca-fila__foto img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.marca-fila:hover .marca-fila__foto img{transform:scale(1.04)}
.marca-fila__indice{
  position:absolute;top:12px;left:14px;z-index:2;
  font-family:var(--display);font-size:3rem;font-weight:800;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(245,241,234,.75);
}

.marca-fila__logo{
  display:inline-block;background:var(--crema);border-radius:var(--radio);
  padding:12px 18px;margin-bottom:var(--e3);line-height:0;
}
.marca-fila__logo img{height:50px;width:auto;max-width:200px;object-fit:contain}
.marca-fila__tipo{
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rojo-texto);margin-bottom:10px;
}
.marca-fila__texto{color:var(--tenue);margin-bottom:var(--e3);max-width:56ch}
.marca-fila__datos{
  display:flex;flex-wrap:wrap;gap:8px 20px;
  font-size:.88rem;color:var(--muy-tenue);margin-bottom:var(--e3);
}
.marca-fila__datos strong{color:var(--crema);font-weight:600}

@media (min-width:768px){
  .marca-fila{padding-block:var(--e7)}
  .marca-fila__rejilla{grid-template-columns:1fr 1fr;gap:var(--e6)}
  .marca-fila--invertida .marca-fila__foto{order:2}
  .marca-fila__indice{font-size:5rem;top:18px;left:22px}
  .marca-fila__foto img{aspect-ratio:5/4}
}

/* Tarjetas compactas (home) */
.tarjetas{display:grid;gap:var(--e3);grid-template-columns:1fr}
@media (min-width:768px){.tarjetas{grid-template-columns:repeat(3,1fr);gap:var(--e2)}}

.tarjeta{
  position:relative;display:flex;flex-direction:column;
  background:var(--superficie);border:1px solid var(--borde);
  border-radius:var(--radio);overflow:hidden;
  transition:border-color var(--transicion),transform var(--transicion);
}
.tarjeta:hover{border-color:var(--borde-fuerte);transform:translateY(-4px)}
.tarjeta__foto{overflow:hidden}
.tarjeta__foto img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.tarjeta:hover .tarjeta__foto img{transform:scale(1.05)}
.tarjeta__cuerpo{padding:var(--e3);display:flex;flex-direction:column;flex:1;gap:10px}
.tarjeta__titulo{font-size:1.5rem}
.tarjeta__titulo a{text-decoration:none}
/* El enlace cubre toda la tarjeta: area de click grande sin anidar enlaces */
.tarjeta__titulo a::after{content:"";position:absolute;inset:0;z-index:1}
.tarjeta__tipo{
  font-size:.74rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--rojo-texto);
}
.tarjeta__texto{color:var(--tenue);font-size:.95rem;flex:1}
.tarjeta__pie{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:12px;border-top:1px solid var(--borde);
  font-size:.85rem;color:var(--muy-tenue);
}
.tarjeta__web{position:relative;z-index:2}

/* 09 · FICHA DE RESTAURANTE =============================================== */
.ficha-hero{position:relative;isolation:isolate;overflow:hidden}
.ficha-hero__foto{position:absolute;inset:0;z-index:-2}
.ficha-hero__foto img{width:100%;height:100%;object-fit:cover}
/* Doble velo: uno vertical para asentar la cabecera y el pie del bloque, y
   otro lateral que oscurece justo la banda donde va el texto. Las fotos de
   comida tienen zonas muy claras (pizza flambeada, pan) y sin esto el
   antetitulo rojo se pierde. Medido para cumplir contraste AA. */
.ficha-hero__velo{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(11,11,12,.72) 0%,rgba(11,11,12,.26) 42%,rgba(11,11,12,.95) 100%),
    linear-gradient(90deg,rgba(11,11,12,.90) 0%,rgba(11,11,12,.62) 44%,rgba(11,11,12,.04) 88%);
}
.ficha-hero__cuerpo{
  display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(440px,66svh,680px);padding-block:var(--e6) var(--e5);
}
/* Chapa clara para el logotipo: las tres marcas tienen el logo en negro o
   rojo sobre blanco, asi que se presentan sobre crema en vez de recolorearlos.
   align-self evita que la chapa se estire al ancho del contenedor flex. */
.ficha-hero__logo{
  align-self:flex-start;
  background:var(--crema);border-radius:var(--radio);
  padding:12px 18px;margin-bottom:var(--e3);line-height:0;
}
.ficha-hero__logo img{height:56px;width:auto;max-width:220px;object-fit:contain}
.ficha-hero__texto{max-width:56ch;color:rgba(245,241,234,.88);margin-top:var(--e2)}

/* Barra de datos practicos.
   La banda pinta los filetes de borde a borde de la pantalla; la rejilla va
   dentro del .contenedor para que la primera columna arranque en la misma
   linea vertical que el resto de la pagina. Las celdas no llevan padding
   lateral por el mismo motivo: lo pone ya el contenedor. */
/* La banda va en negro (si llevara el color del separador, ese gris asomaria
   por fuera del contenedor). El gris solo se ve por los huecos de 1 px que
   deja la rejilla, y eso lo pinta el fondo de .datos. */
.datos-banda{border-block:1px solid var(--borde);background:var(--negro)}
.datos{display:grid;gap:1px;background:var(--borde)}
/* En 1 columna NINGUNA celda lleva sangrado; el separador entre columnas se
   anade solo cuando de verdad hay columnas (ver los @media de abajo). */
.dato{background:var(--negro);padding:var(--e3) 0}
.dato__etiqueta{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rojo-texto);margin-bottom:8px;
}
.dato__valor{font-size:.97rem;line-height:1.55}
.dato__valor a{font-weight:500}
.dato dl{margin:0}
.dato dt{font-size:.86rem;color:var(--muy-tenue);margin-top:6px}
.dato dd{margin:0;font-size:.95rem}
@media (min-width:600px){
  .datos{grid-template-columns:repeat(2,1fr)}
  .datos > .dato:nth-child(even){padding-left:var(--e3)}   /* solo la 2a columna */
}
@media (min-width:1024px){
  .datos{grid-template-columns:repeat(4,1fr)}
  .dato{padding:var(--e4) 0}
  .datos > .dato:not(:first-child){padding-left:var(--e4)} /* columnas 2, 3 y 4 */
}

/* Destacados */
.destacados{display:grid;gap:var(--e3);grid-template-columns:1fr}
@media (min-width:768px){.destacados{grid-template-columns:repeat(3,1fr);gap:var(--e4)}}
.destacado{padding-top:var(--e2);border-top:2px solid var(--rojo)}
.destacado h3{font-size:1.2rem;margin-bottom:10px}
.destacado p{color:var(--tenue);font-size:.95rem}

/* 10 · BLOQUES DE CONTENIDO ============================================== */
/* Mosaico de galeria: en movil 1 columna, en tablet+ mosaico real. */
.galeria{display:grid;gap:var(--e1);grid-template-columns:1fr}
.galeria img{width:100%;height:100%;object-fit:cover;border-radius:var(--radio);aspect-ratio:3/2}
.galeria figure{margin:0;overflow:hidden;border-radius:var(--radio);background:var(--superficie)}
@media (min-width:600px){
  .galeria{grid-template-columns:repeat(2,1fr);gap:var(--e2)}
  .galeria figure:first-child{grid-column:span 2}
  .galeria figure:first-child img{aspect-ratio:16/9}
}
@media (min-width:1024px){
  .galeria{grid-template-columns:repeat(3,1fr)}
  .galeria figure:first-child{grid-column:span 2;grid-row:span 2}
  .galeria figure:first-child img{aspect-ratio:auto;height:100%;min-height:100%}
}

/* Cifras */
.cifras{display:grid;gap:var(--e4);grid-template-columns:repeat(2,1fr);text-align:center}
@media (min-width:768px){.cifras{grid-template-columns:repeat(4,1fr)}}
.cifra__numero{
  font-family:var(--display);font-size:clamp(2.4rem,7vw,3.6rem);
  font-weight:800;line-height:1;display:block;
}
.cifra__texto{font-size:.85rem;letter-spacing:.06em;color:rgba(255,255,255,.8);margin-top:8px}
.seccion--roja .cifra__numero{color:#fff}

/* Linea de tiempo.
   Antes era un carril con puntos y sangraba el contenido 26 px, asi que los
   anos no cuadraban con el titular de la seccion. Ahora es una tabla
   editorial: filete a todo el ancho, el ano en su columna y el texto en la
   suya. Todo arranca en la linea de la rejilla. */
.hito{
  position:relative;display:grid;gap:6px;
  padding-block:var(--e4);border-top:1px solid var(--borde);
}
.hito:last-child{border-bottom:1px solid var(--borde)}
.hito::after{                       /* el filete se tine de rojo al pasar */
  content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;
  background:var(--rojo);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.hito:hover::after{transform:none}
.hito__anyo{
  font-family:var(--display);font-size:1.9rem;font-weight:800;
  color:var(--rojo);line-height:1;margin:0;
}
.hito h3{margin-bottom:4px}
/* El :not() no es cosmetico: .hito__anyo tambien es un <p>, y sin el
   `.hito p` lo pisaba por especificidad y el ano salia gris. */
.hito p:not(.hito__anyo){color:var(--tenue)}
@media (min-width:768px){
  .hito{grid-template-columns:130px 1fr;column-gap:var(--e5);align-items:start}
  .hito__anyo{grid-column:1;grid-row:1 / span 4;font-size:2.4rem;padding-top:4px}
}

/* Texto largo (legales) */
.prosa{max-width:72ch}
.prosa h2{font-size:clamp(1.5rem,4vw,2.1rem);margin:var(--e5) 0 var(--e2)}
.prosa h3{font-size:1.15rem;margin:var(--e4) 0 var(--e1)}
.prosa p,.prosa li{color:var(--tenue)}
.prosa ul{list-style:disc;padding-left:22px;margin:0 0 var(--e2)}
.prosa li{margin-bottom:8px}
.prosa table{width:100%;border-collapse:collapse;font-size:.9rem;margin-bottom:var(--e3)}
.prosa th,.prosa td{text-align:left;padding:10px 12px;border:1px solid var(--borde);vertical-align:top}
.prosa th{background:var(--superficie);font-weight:600;color:var(--crema)}
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Migas */
.migas{border-bottom:1px solid var(--borde);background:var(--negro)}
.migas ol{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding-block:12px;font-size:.82rem;color:var(--muy-tenue);
}
.migas li+li::before{content:"/";margin-right:8px;color:var(--borde-fuerte)}
.migas a{text-decoration:none}
.migas a:hover{color:var(--crema)}
.migas [aria-current]{color:var(--tenue)}

/* Aviso de dato pendiente: tiene que MOLESTAR para que no se publique asi */
.pendiente{
  display:inline-block;background:#FFE8A3;color:#5C4300;
  padding:2px 8px;border-radius:3px;font-size:.85rem;font-weight:600;
}

/* 11 · FORMULARIOS ======================================================== */
.form{display:grid;gap:var(--e3);max-width:640px}
.campo{display:grid;gap:7px}
.campo label{font-size:.9rem;font-weight:600}
.campo .ayuda{font-size:.83rem;color:var(--muy-tenue);font-weight:400}
.campo input,.campo textarea,.campo select{
  width:100%;padding:13px 15px;min-height:50px;
  font-family:inherit;font-size:16px;      /* 16px exactos: sin zoom en iOS */
  color:var(--crema);background:var(--superficie);
  border:1.5px solid var(--borde);border-radius:var(--radio);
  transition:border-color var(--transicion),background var(--transicion);
}
.campo textarea{min-height:140px;resize:vertical;line-height:1.6}
.campo input:hover,.campo textarea:hover,.campo select:hover{border-color:var(--borde-fuerte)}
.campo input:focus,.campo textarea:focus,.campo select:focus{
  outline:0;border-color:var(--rojo);background:var(--superficie-2);
  box-shadow:0 0 0 3px rgba(228,6,19,.22);
}
.campo input[aria-invalid="true"],.campo textarea[aria-invalid="true"]{border-color:#FF6B6B}
.campo .error{color:#FF9A9A;font-size:.85rem;font-weight:500}
.campo--fila{display:grid;gap:var(--e3)}
@media (min-width:600px){.campo--fila{grid-template-columns:1fr 1fr}}

.consentimiento{display:flex;gap:12px;align-items:flex-start;font-size:.9rem;color:var(--tenue)}
.consentimiento input{
  width:22px;height:22px;min-height:22px;margin-top:2px;flex:none;
  accent-color:var(--rojo);
}
/* Honeypot: fuera de pantalla, invisible para humanos, visible para bots */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.aviso{
  padding:var(--e3);border-radius:var(--radio);border:1.5px solid;
  display:flex;gap:12px;align-items:flex-start;
}
.aviso--ok{border-color:#3FBF6A;background:rgba(63,191,106,.12)}
.aviso--ko{border-color:#FF6B6B;background:rgba(255,107,107,.1)}
.aviso p{margin:0}
.aviso strong{display:block;margin-bottom:4px}

/* Fichas de confianza junto al formulario */
.confianza{display:grid;gap:var(--e2)}
.confianza__item{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:var(--tenue)}
.confianza__item svg{flex:none;margin-top:3px;color:var(--rojo)}

.mapa{
  width:100%;aspect-ratio:16/10;border:1px solid var(--borde);
  border-radius:var(--radio);background:var(--superficie);
}
@media (min-width:768px){.mapa{aspect-ratio:16/7}}

/* Formulario + columna de apoyo. En movil el formulario va SIEMPRE primero:
   la barra lateral es contexto, no es lo que ha venido a hacer el visitante. */
.dos-col{display:grid;gap:var(--e5);grid-template-columns:1fr}
@media (min-width:900px){.dos-col{grid-template-columns:1.55fr 1fr;gap:var(--e6)}}
.dos-col aside h2,.dos-col aside h3{font-size:1.25rem}
.dos-col aside{font-size:.95rem}

.atajo-reservas{margin-bottom:var(--e5)}
.dos-col .aviso{margin-bottom:var(--e3)}

/* 12 · PIE ================================================================ */
.pie{background:var(--superficie);border-top:1px solid var(--borde);margin-top:var(--e6)}
.pie__cta{
  padding-block:var(--e6);border-bottom:1px solid var(--borde);text-align:center;
}
.pie__cta-titulo{
  font-family:var(--display);font-size:clamp(1.9rem,5vw,2.8rem);
  font-weight:700;line-height:1.1;margin-bottom:10px;
}
.pie__cta-texto{color:var(--tenue);max-width:46ch;margin-inline:auto;margin-bottom:var(--e3)}

.pie__rejilla{display:grid;gap:var(--e5);padding-block:var(--e5);grid-template-columns:1fr}
@media (min-width:600px){.pie__rejilla{grid-template-columns:repeat(2,1fr);gap:var(--e4)}}
@media (min-width:1024px){.pie__rejilla{grid-template-columns:1.5fr 1.2fr 1fr 1fr}}

.pie__marca{font-family:var(--display);font-size:1.35rem;font-weight:800;margin-bottom:8px}
.pie__claim{color:var(--muy-tenue);font-size:.9rem;margin-bottom:var(--e2);max-width:34ch}
.pie__dir{font-size:.92rem;color:var(--tenue);line-height:1.85}
.pie__titulo{
  font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rojo-texto);margin-bottom:var(--e2);
}
.pie__lista{display:flex;flex-direction:column;gap:14px;font-size:.94rem}
.pie__lista--simple{gap:11px}
.pie__lista a{text-decoration:none;color:var(--tenue)}
.pie__lista a:hover{color:var(--crema);text-decoration:underline;text-decoration-color:var(--rojo)}
.pie__lista > li > a{color:var(--crema);font-weight:500}
.pie__mini{display:block;font-size:.83rem;color:var(--muy-tenue)}
/* Padding vertical para que el telefono y la web del pie no sean una diana
   de 22 px: no son la accion principal, pero se pulsan mucho desde el movil. */
.pie__mini a{display:inline-block;padding-block:9px}

.pie__base{
  display:flex;flex-wrap:wrap;gap:6px var(--e3);justify-content:space-between;
  padding-block:var(--e3);border-top:1px solid var(--borde);
  font-size:.82rem;color:var(--muy-tenue);
}
.pie__base p{margin:0}

/* 13 · FLOTANTES ========================================================== */
.arriba{
  position:fixed;right:16px;bottom:16px;z-index:80;
  width:48px;height:48px;display:grid;place-items:center;
  background:var(--rojo);color:#fff;border:0;border-radius:50%;
  box-shadow:0 8px 24px rgba(0,0,0,.5);cursor:pointer;
  opacity:0;transform:translateY(10px);
  transition:opacity var(--transicion),transform var(--transicion),background var(--transicion);
}
.arriba[hidden]{display:none}
.arriba.visible{opacity:1;transform:none}
.arriba:hover{background:var(--rojo-osc)}

.cookies{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:90;
  background:var(--superficie-2);border:1px solid var(--borde-fuerte);
  border-radius:8px;padding:var(--e3);
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  display:flex;flex-direction:column;gap:var(--e2);
}
.cookies[hidden]{display:none}
.cookies__texto{font-size:.9rem;color:var(--tenue);margin:0}
.cookies__acciones{display:flex;gap:10px}
.cookies__acciones .btn{flex:1}
@media (min-width:768px){
  .cookies{left:auto;right:24px;bottom:24px;max-width:420px}
  .cookies__acciones .btn{flex:none}
  .arriba{right:24px;bottom:24px}
}

/* 14 · UTILIDADES ========================================================= */
.solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.centrado{text-align:center}
.centrado .antetitulo{justify-content:center}
.centrado .entradilla{margin-inline:auto}
.centrado .botonera{justify-content:center}
.centrado .seccion__cabeza{margin-inline:auto}
.tenue{color:var(--tenue)}
.mini{color:var(--muy-tenue);font-size:.9rem}
.cita{color:var(--tenue);font-style:italic}
.mt-3{margin-top:var(--e3)}
.mt-4{margin-top:var(--e4)}
.mt-5{margin-top:var(--e5)}

/* 15 · MOVIMIENTO ========================================================= */
/* Aparicion suave al hacer scroll.
   El estado oculto SOLO existe si hay JS (la clase .js la pone un script
   inline en el <head>). Si el JS falla o esta bloqueado, el contenido se ve
   igualmente: nunca se esconde texto de forma irreversible. */
.js .aparece{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1);
}
.js .aparece.visible{opacity:1;transform:none}

/* ── Entrada de los titulares ─────────────────────────────────────────────
   Dos gestos, los dos ligados a la clase .visible que ya pone el observador,
   asi que no cuestan ni un evento mas de scroll:

   1) El filete del antetitulo se DIBUJA de izquierda a derecha.
   2) El titular se descubre desde abajo con un recorte. El -14% de abajo
      es a proposito: si fuera 0 cortaria las colas de la "g" y la "p".

   Es el gesto editorial de toda la vida (la linea de texto que asoma) y aqui
   pega, porque toda la tipografia es una serif de revista. */
.js .aparece .antetitulo::before{width:0;transition:width .55s .12s cubic-bezier(.22,.61,.36,1)}
.js .aparece.visible .antetitulo::before{width:34px}

.js .aparece h1,
.js .aparece h2,
.js .aparece .pie__cta-titulo{
  clip-path:inset(0 0 102% 0);
  transition:clip-path .85s cubic-bezier(.22,.61,.36,1);
}
.js .aparece.visible h1,
.js .aparece.visible h2,
.js .aparece.visible .pie__cta-titulo{clip-path:inset(0 0 -14% 0)}

/* Escalonado: dentro de una misma rejilla cada elemento entra un pelin
   despues que el anterior. Da sensacion de secuencia en vez de bloque. */
.js .destacados > .aparece:nth-child(2),
.js .tarjetas   > .aparece:nth-child(2),
.js .cifras     > .aparece:nth-child(2){transition-delay:.09s}
.js .destacados > .aparece:nth-child(3),
.js .tarjetas   > .aparece:nth-child(3),
.js .cifras     > .aparece:nth-child(3){transition-delay:.18s}
.js .destacados > .aparece:nth-child(4),
.js .cifras     > .aparece:nth-child(4){transition-delay:.27s}
.js .destacados > .aparece:nth-child(5){transition-delay:.36s}
.js .destacados > .aparece:nth-child(6){transition-delay:.45s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
  .js .aparece{opacity:1;transform:none}
  /* Sin recorte ni filete animado: el texto tiene que estar entero desde ya */
  .js .aparece h1,.js .aparece h2,.js .aparece .pie__cta-titulo{clip-path:none}
  .js .aparece .antetitulo::before{width:34px}

  /* Los decorativos que quedarian raros congelados a mitad: */
  .cinta__pista{                                   /* la cinta de marcas */
    animation:none!important;transform:none!important;
    width:auto;overflow-x:auto;
  }
  .cinta{-webkit-mask-image:none;mask-image:none}
  .progreso{display:none}                          /* la barra de lectura */
}

/* ==========================================================================
   16 · ACABADO VISUAL
   Todo lo de esta seccion es decorativo y esta pensado para no costar nada:
   sin librerias, sin imagenes extra y sin JavaScript salvo donde se indique.
   Todo se apaga solo con prefers-reduced-motion.
   ========================================================================== */

/* ── Grano de pelicula ────────────────────────────────────────────────────
   Le quita el plano digital a los fondos negros y hace que las fotos de
   comida parezcan impresas. Solo en pantallas grandes: en movil un overlay
   fijo a pantalla completa repinta en cada scroll y no compensa. */
@media (min-width:1024px){
  body::after{
    content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
    opacity:.035;mix-blend-mode:overlay;contain:strict;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* ── Barra de progreso de lectura ─────────────────────────────────────────
   Animacion dirigida por scroll, sin JavaScript. Donde el navegador no la
   soporta se queda en scaleX(0), o sea invisible: degrada sola. */
.progreso{
  position:fixed;inset:0 0 auto 0;height:3px;z-index:110;
  background:linear-gradient(90deg,var(--rojo),var(--rojo-osc));
  transform:scaleX(0);transform-origin:0 50%;
}
@supports (animation-timeline:scroll()){
  .progreso{animation:progreso linear;animation-timeline:scroll(root block)}
}
@keyframes progreso{to{transform:scaleX(1)}}

/* ── Hero: zoom lentisimo y vineta ────────────────────────────────────────
   24 s de recorrido: no se percibe como animacion, solo hace que la foto
   deje de parecer un fondo muerto. */
.hero__foto img,.ficha-hero__foto img,.hero__pieza img{
  animation:acercar 24s ease-out both;
  transform-origin:center 60%;
}
@keyframes acercar{from{transform:scale(1.075)}to{transform:scale(1)}}

/* Vineta suave: cierra los bordes sin apagar la foto. Va encima de los velos,
   asi que se queda corta a proposito (los tres sumados oscurecian demasiado y
   la comida dejaba de verse, que es justo lo que hay que enseniar). */
.hero::after,.ficha-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(125% 85% at 50% 44%,transparent 52%,rgba(11,11,12,.38) 100%);
}

/* ── Botones: barrido de relleno al pasar por encima ──────────────────── */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:currentColor;opacity:0;
  transform:translateY(101%);transition:transform .34s cubic-bezier(.22,.61,.36,1);
}
.btn--fantasma::before{opacity:.1}
.btn--rojo::before{background:#000;opacity:.22}
.btn--claro::before{background:#000;opacity:.08}
.btn:hover::before{transform:none}

/* ── Navegacion: subrayado que entra desde la izquierda ───────────────── */
@media (min-width:1024px){
  .nav__item > a::before{
    content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;
    background:var(--rojo);transform:scaleX(0);transform-origin:0 50%;
    transition:transform .3s cubic-bezier(.22,.61,.36,1);
  }
  .nav__item > a:hover::before{transform:none}
  .nav__item > a[aria-current]::before{transform:none}
  .nav__item > a[aria-current]::after{content:none}   /* lo sustituye ::before */
}

/* ── Marca: el punto late al pasar por el logotipo ────────────────────── */
.marca:hover .marca__punto{animation:latir 1.1s ease-in-out infinite}
@keyframes latir{50%{transform:scale(1.5)}}

/* ── Tarjetas: velo, flecha que aparece y borde rojo ──────────────────── */
.tarjeta__foto{position:relative}
.tarjeta__foto::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(11,11,12,.55) 100%);
  opacity:0;transition:opacity var(--transicion);
}
.tarjeta:hover .tarjeta__foto::after{opacity:1}
.tarjeta::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--rojo);transform:scaleX(0);transform-origin:0 50%;z-index:2;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.tarjeta:hover::before{transform:none}
.tarjeta__titulo a{position:relative;display:inline-flex;align-items:center;gap:10px}
.tarjeta__titulo a::before{
  content:"→";font-family:var(--texto);font-size:1rem;color:var(--rojo-texto);
  opacity:0;max-width:0;transition:opacity var(--transicion),max-width var(--transicion);
}
.tarjeta:hover .tarjeta__titulo a::before{opacity:1;max-width:1.5em}

/* ── Filas de restaurante: el numero enorme se tine de rojo ───────────── */
.marca-fila__indice{transition:color .5s ease,-webkit-text-stroke-color .5s ease}
.marca-fila:hover .marca-fila__indice{-webkit-text-stroke-color:var(--rojo)}
.marca-fila__foto::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(245,241,234,.1);border-radius:var(--radio);
}

/* ── Galeria: acercamiento y un punto de rojo al pasar ────────────────── */
.galeria figure{position:relative}
.galeria img{transition:transform .8s cubic-bezier(.22,.61,.36,1),filter .5s ease}
.galeria figure:hover img{transform:scale(1.045)}
.galeria figure::after{
  content:"";position:absolute;inset:0;border-radius:var(--radio);pointer-events:none;
  background:linear-gradient(140deg,rgba(228,6,19,.28),transparent 55%);
  opacity:0;transition:opacity .45s ease;
}
.galeria figure:hover::after{opacity:1}

/* ── Cifras: separadores finos entre columnas ─────────────────────────── */
.cifras{position:relative}
.cifra{position:relative;padding-inline:8px}
@media (min-width:768px){
  .cifra + .cifra::before{
    content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;
    background:rgba(255,255,255,.28);
  }
}
.cifra__numero{
  background:linear-gradient(180deg,#fff 55%,rgba(255,255,255,.72));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ── Cinta de marcas (solo portada) ───────────────────────────────────────
   Editorial y muy "canalla": los tres nombres pasando en bucle. La segunda
   copia esta aria-hidden para que un lector de pantalla no lo lea dos veces. */
.cinta{
  overflow:hidden;border-block:1px solid var(--borde);
  padding-block:var(--e3);background:var(--negro);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.cinta__pista{display:flex;width:max-content;animation:desfilar 38s linear infinite}
.cinta:hover .cinta__pista{animation-play-state:paused}
.cinta__grupo{display:flex;align-items:center;gap:var(--e5);padding-right:var(--e5)}
.cinta__texto{
  font-family:var(--display);font-size:clamp(1.6rem,4vw,2.6rem);font-weight:700;
  white-space:nowrap;color:var(--crema);
}
.cinta__sep{width:9px;height:9px;border-radius:50%;background:var(--rojo);flex:none}
@keyframes desfilar{to{transform:translateX(-50%)}}

/* ── Pie: marca de agua enorme detras del contenido ───────────────────── */
.pie{position:relative;overflow:hidden}
.pie::before{
  content:"Canalla";position:absolute;left:50%;bottom:-.34em;
  transform:translateX(-50%);pointer-events:none;
  font-family:var(--display);font-weight:900;font-size:clamp(7rem,22vw,17rem);
  line-height:1;color:rgba(245,241,234,.032);white-space:nowrap;
}
.pie > .contenedor{position:relative;z-index:1}

/* ── Pagina de obra social ────────────────────────────────────────────── */
.obras-punto{
  display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--rojo);margin-left:6px;vertical-align:middle;flex:none;
  animation:pulso 2s ease-in-out infinite;
}
@keyframes pulso{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(228,6,19,.55)}
  50%{opacity:.65;box-shadow:0 0 0 6px rgba(228,6,19,0)}
}
.antetitulo .obras-punto{margin-left:0;margin-right:2px}

.obras{
  position:relative;display:flex;gap:var(--e3);
  background:var(--superficie);border:1px solid var(--borde);
  border-radius:var(--radio);overflow:hidden;
}
/* Cinta de obras a rayas: el codigo visual universal de "aqui se trabaja" */
.obras__cinta{
  flex:none;width:10px;
  background:repeating-linear-gradient(45deg,
    var(--rojo) 0 10px,transparent 10px 20px);
  background-color:rgba(228,6,19,.14);
}
.obras__cuerpo{padding:var(--e4) var(--e3) var(--e4) 0;flex:1}
.obras__cuerpo h2{margin-bottom:var(--e2)}
@media (min-width:768px){
  .obras__cinta{width:14px}
  .obras__cuerpo{padding:var(--e5) var(--e5) var(--e5) var(--e2)}
}
.obras__lista{display:grid;gap:var(--e2);margin-top:var(--e4)}
.obras__lista li{display:flex;gap:14px;align-items:flex-start;color:var(--tenue);font-size:.96rem}
.obras__lista strong{color:var(--crema);font-weight:600}
.obras__marca{
  flex:none;width:10px;height:10px;margin-top:7px;
  border:2px solid var(--rojo);border-radius:1px;transform:rotate(45deg);
}

.obras-cta{
  display:grid;gap:var(--e3);margin-top:var(--e5);
  padding:var(--e4) 0 0;border-top:1px solid var(--borde);
}
.obras-cta h3{margin-bottom:8px}
@media (min-width:900px){
  .obras-cta{grid-template-columns:1.4fr auto;align-items:center;gap:var(--e5)}
}

/* Impresion: que una carta o una direccion se pueda imprimir en limpio. */
@media print{
  .cabecera,.nav,.arriba,.cookies,.pie__cta,.hero__foto,.hero__velo{display:none!important}
  body{background:#fff;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
}