/* Karim Kebab · Fusion Restaurant · Collado Villalba
 *
 * REGISTRO: el PÚRPURA de su rótulo, que es enorme y se ve desde toda la calle
 * Batalla de Bailén, con el rojo del «SERVICIO A DOMICILIO» como acento. No hay
 * que inventar nada: su fachada ya tiene una identidad muy fuerte, más que la de
 * casi cualquier kebab.
 *
 * Va clara con bloques de púrpura, no oscura entera: la comida se ve mejor sobre
 * blanco, y aquí la comida es el producto.
 *
 * Tipografía: Red Hat Display para los rótulos y Lexend para leer. Ninguna
 * repetida de las otras nueve webs.
 */

@font-face { font-family:'RedHat'; src:url(fonts/redhat.woff2) format('woff2'); font-weight:400 900; font-display:swap; }
@font-face { font-family:'Lexend'; src:url(fonts/lexend.woff2) format('woff2'); font-weight:400 700; font-display:swap; }

:root {
  --purpura:    #6b2d8f;   /* el rótulo */
  --purpura-os: #46175f;
  --lila:       #b478d6;
  --rojo:       #d92d2d;   /* el «servicio a domicilio» */
  --crema:      #faf7fb;
  --crema-2:    #ece2f0;
  --blanco:     #ffffff;
  --tinta:      #241429;
  --tinta-ap:   #6f5c78;
  --rotulo: 'RedHat', ui-sans-serif, system-ui, sans-serif;
  --texto: 'Lexend', ui-sans-serif, system-ui, sans-serif;
  --ancho: 1160px;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
body { margin:0; background:var(--crema); color:var(--tinta); font-family:var(--texto); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img, picture, canvas, svg { max-width:100%; }
img { height:auto; display:block; }
a { color:inherit; }
.saltar { position:absolute; left:-9999px; top:0; z-index:99; background:var(--purpura); color:#fff; padding:.8rem 1.2rem; font-weight:700; text-decoration:none; }
.saltar:focus { left:0; }
:focus-visible { outline:3px solid var(--rojo); outline-offset:3px; }

/* ── Cabecera ─────────────────────────────────────────────────────── */
.cab { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:1.3rem; padding:.7rem clamp(1rem,4vw,2.2rem); background:var(--purpura); color:#fff; transition:box-shadow .25s; }
.cab--pegada { box-shadow:0 8px 26px -18px #2a0f3aaa; }
.cab__marca { display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.cab__marca svg { width:36px; height:36px; flex:none; }
/* SU logotipo. Es un escudo (272x199) con transparencia; se le da alto fijo y
   el ancho sale solo. Un poco de sombra para que despegue del púrpura de la
   cabecera, que es casi del mismo tono que el fondo del propio escudo. */
.cab__logo { height:56px; width:auto; flex:none; filter:drop-shadow(0 2px 7px #2a0f3a90); }
@media (max-width:520px) { .cab__logo { height:46px; } }
.cab__nom { font-family:var(--rotulo); font-weight:900; font-size:1.14rem; line-height:1.08; letter-spacing:-0.01em; display:flex; flex-direction:column; gap:.24rem; }
.cab__nom span { font-family:var(--texto); font-size:.58rem; font-weight:600; letter-spacing:.2em; color:#ffffffa8; text-transform:uppercase; white-space:nowrap; }
.nav { display:flex; gap:1.4rem; margin-left:auto; }
.nav a { text-decoration:none; font-size:.86rem; font-weight:600; color:#ffffffc0; padding:.3rem 0; border-bottom:2px solid transparent; transition:color .18s, border-color .18s; }
.nav a:hover { color:#fff; border-color:#fff; }
.cab__carta { display:inline-flex; align-items:center; gap:.5rem; margin-left:auto; white-space:nowrap;
  background:#ffffff1a; border:1.5px solid #ffffff40; color:#fff; text-decoration:none;
  padding:.58rem 1.05rem; border-radius:999px; font-weight:700; font-size:.87rem;
  transition:background .18s, border-color .18s, transform .18s; }
.cab__carta svg { width:17px; height:17px; flex:none; }
.cab__carta:hover { background:#ffffff2e; border-color:#fff; transform:translateY(-1px); }
@media (max-width:520px) { .cab__carta { font-size:.78rem; padding:.5rem .75rem; gap:.38rem; }
  .cab__carta svg { width:15px; height:15px; } }
.cab__wa { display:inline-flex; align-items:center; gap:.5rem; background:var(--rojo); color:#fff; text-decoration:none; padding:.6rem 1.15rem; border-radius:999px; font-weight:700; font-size:.87rem; transition:filter .18s, transform .18s; }
.cab__wa svg { width:17px; height:17px; flex:none; }
.cab__wa:hover { filter:brightness(1.12); transform:translateY(-1px); }
@media (max-width:960px) { .nav { display:none; } }

/* ── Portada ──────────────────────────────────────────────────────── */
.portada { background:linear-gradient(150deg, var(--purpura) 0%, var(--purpura-os) 100%); color:#fff; }
.portada__caja { max-width:var(--ancho); margin:0 auto; padding:clamp(2.2rem,5.5vw,4rem) clamp(1rem,4vw,2.2rem); display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.6rem,4vw,3rem); align-items:center; }
@media (max-width:940px) { .portada__caja { grid-template-columns:1fr; } }
.rotulo { margin:0 0 1rem; font-size:.71rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:#f0c8ff; display:flex; align-items:center; gap:.7rem; }
.rotulo::before { content:''; width:26px; height:3px; background:var(--rojo); flex:none; }
.portada h1 { font-family:var(--rotulo); font-weight:900; font-size:clamp(2.2rem,5.6vw,4.1rem); line-height:1.08; letter-spacing:-0.01em; margin:0 0 1.1rem; max-width:14ch; text-wrap:balance; }
.portada h1 em { font-style:normal; color:#f5c542; }
.portada__bajo { margin:0 0 1.6rem; max-width:33rem; font-size:clamp(1rem,1.5vw,1.12rem); color:#ffffffc8; }
.portada__acc { display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.7rem; align-items:center; }
.bot { display:inline-flex; align-items:center; gap:.55rem; padding:.85rem 1.5rem; text-decoration:none; font-weight:700; font-size:.94rem; min-height:44px; border-radius:999px; transition:transform .18s, filter .18s, border-color .18s, color .18s; }
.bot svg { width:18px; height:18px; flex:none; }
.bot--fuerte { background:var(--rojo); color:#fff; }
.bot--fuerte:hover { filter:brightness(1.12); transform:translateY(-2px); }
.bot--linea { border:1.5px solid #ffffff4d; color:#fff; }
.bot--linea:hover { border-color:#f5c542; color:#f5c542; transform:translateY(-2px); }
.estado { display:inline-flex; align-items:baseline; gap:.5rem; padding:.55rem .95rem; border-radius:999px; font-size:.86rem; border:1px solid #ffffff2e; background:#ffffff12; }
.estado b { font-weight:700; }
.estado--si b { color:#8ee87a; }
.estado--no b { color:#ffb3a8; }
.estado span { color:#ffffffa8; }
.portada__pie { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding-top:1.2rem; border-top:1px solid #ffffff2e; font-size:.81rem; color:#ffffffa0; }
.portada__pie b { display:block; font-family:var(--rotulo); font-weight:900; font-size:1.75rem; line-height:1.1; color:#fff; letter-spacing:-0.01em; }
@media (max-width:560px) { .portada__pie { gap:.65rem; font-size:.73rem; } .portada__pie b { font-size:1.4rem; } }
/* La tarjeta de SU app, en el sitio donde estaba el pincho dibujado.
   El QR es un SVG: nitido a cualquier tamano y 1,8 KB. Se le da fondo BLANCO
   sobre el morado a proposito, porque un QR sobre color oscuro no lo lee
   ningun movil. Comprobado que se lee desde 120px. */
.app { display:flex; flex-direction:column; align-items:center; gap:1.1rem;
  background:#ffffff14; border:1px solid #ffffff2e; border-radius:20px;
  padding:1.6rem 1.4rem; backdrop-filter:blur(6px); max-width:340px;
  justify-self:center; align-self:center; }
.app__qr { display:block; background:#fff; border-radius:14px; padding:.7rem; line-height:0;
  box-shadow:0 16px 34px -20px #12061d; transition:transform .3s; }
.app__qr:hover { transform:translateY(-2px); }
.app__qr img { display:block; width:170px; height:170px; }
.app__txt { text-align:center; }
.app__rot { margin:0 0 .3rem; font-size:.68rem; font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:#f5c542; }
.app__ti { margin:0 0 .35rem; font-family:var(--rotulo); font-weight:900; font-size:1.28rem;
  line-height:1.1; color:#fff; }
.app__su { margin:0 0 1rem; font-size:.86rem; line-height:1.45; color:#ffffffbb; }
.app__bot { display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
  background:#fff; color:#3d1259; font-weight:700; font-size:.9rem;
  padding:.62rem 1.1rem; border-radius:999px; text-decoration:none; transition:transform .2s; }
.app__bot svg { width:17px; height:17px; flex:none; }
.app__bot:hover { transform:translateY(-1px); }
.app__su--movil { display:none; }
@media (max-width:900px) { .app { max-width:none; width:min(340px,100%); } }
/* En el movil no hay nada que escanear: el QR se va y queda la tarjeta con
   el boton, que es lo unico util ahi. */
@media (max-width:700px) {
  .app__qr { display:none; }
  .app__su--pc { display:none; }
  .app__su--movil { display:block; }
  .app { flex-direction:row; align-items:center; gap:1rem; text-align:left;
    padding:1.1rem 1.2rem; width:100%; }
  .app__txt { text-align:left; }
}

/* ── Secciones ────────────────────────────────────────────────────── */
.sec { padding:clamp(3rem,7vw,5.4rem) clamp(1rem,4vw,2.2rem); }
.sec__caja { max-width:var(--ancho); margin:0 auto; }
.sec--blanco { background:var(--blanco); }
h2 { font-family:var(--rotulo); font-weight:900; font-size:clamp(1.8rem,4vw,2.7rem); line-height:1.08; letter-spacing:-0.01em; margin:0 0 1rem; max-width:22ch; text-wrap:balance; }
.entradilla { margin:0 0 2.2rem; max-width:58ch; font-size:1.04rem; color:var(--tinta-ap); }
.sube { opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.sube.dentro { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .sube { opacity:1; transform:none; } }

/* ── 1998 ─────────────────────────────────────────────────────────── */
.hito { display:grid; grid-template-columns:auto 1fr; gap:clamp(1.4rem,4vw,3rem); align-items:center; }
@media (max-width:760px) { .hito { grid-template-columns:1fr; } }
.hito__ano { font-family:var(--rotulo); font-weight:900; font-size:clamp(4rem,13vw,8.5rem); line-height:1.08; letter-spacing:-0.01em; color:var(--purpura); }
.hito p { margin:0 0 .8rem; font-size:1.08rem; }
.hito p:last-child { margin-bottom:0; color:var(--tinta-ap); font-size:.98rem; }

/* ── La carta ─────────────────────────────────────────────────────── */
.platos { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; list-style:none; margin:0; padding:0; }
@media (max-width:940px) { .platos { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .platos { grid-template-columns:1fr; } }
.platos li { background:var(--blanco); border:1px solid var(--crema-2); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.platos img { width:100%; aspect-ratio:1; object-fit:cover; }
.platos div { padding:1.1rem 1.1rem 1.3rem; }
.platos h3 { margin:0 0 .25rem; font-family:var(--rotulo); font-weight:700; font-size:1.04rem; }
.platos p { margin:0; font-size:.9rem; color:var(--tinta-ap); }

/* ── Horario ──────────────────────────────────────────────────────── */
.donde { display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.6rem); align-items:stretch; }
@media (max-width:860px) { .donde { grid-template-columns:1fr; } }
.ficha { display:grid; gap:1.15rem; align-content:center; }
.ficha__fila { display:flex; gap:.9rem; align-items:flex-start; }
.ficha__fila svg { width:21px; height:21px; color:var(--purpura); flex:none; margin-top:.2rem; }
.ficha__fila b { display:block; font-size:.7rem; letter-spacing:.19em; text-transform:uppercase; color:var(--tinta-ap); font-weight:700; margin-bottom:.18rem; }
.ficha__fila > div { font-size:1.01rem; }
.horario { background:var(--purpura); color:#fff; border-radius:14px; padding:1.6rem 1.5rem; display:grid; align-content:center; }
.horario h3 { font-family:var(--rotulo); font-weight:700; font-size:1.08rem; margin:0 0 .9rem; }
.horario table { width:100%; border-collapse:collapse; font-size:.95rem; }
.horario td { padding:.44rem 0; border-bottom:1px solid #ffffff1f; vertical-align:top; }
.horario tr:last-child td { border-bottom:0; }
.horario td:last-child { text-align:right; font-weight:600; }
.horario .cerrado { color:#ffb3a8; }
.horario tr.hoy td { color:#f5c542; font-weight:700; }
.horario__nota { margin:.9rem 0 0; font-size:.82rem; color:#ffffff9c; }

/* ── Pie ──────────────────────────────────────────────────────────── */
.pie { background:var(--purpura-os); color:#ffffff9c; padding:clamp(2.4rem,5vw,3.4rem) clamp(1rem,4vw,2.2rem) 1.9rem; font-size:.87rem; }
.pie__caja { max-width:var(--ancho); margin:0 auto; display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:2rem; }
@media (max-width:780px) { .pie__caja { grid-template-columns:1fr; } }
.pie h3 { font-family:var(--rotulo); font-weight:700; color:#fff; font-size:1rem; margin:0 0 .7rem; }
.pie a { color:#ffffffbb; text-decoration:none; }
.pie a:hover { color:#f5c542; text-decoration:underline; }
.pie ul { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.pie__legal { max-width:var(--ancho); margin:2rem auto 0; padding-top:1.3rem; border-top:1px solid #ffffff1f; display:flex; flex-wrap:wrap; gap:1.2rem; justify-content:space-between; font-size:.79rem; }

/* ── Legales ──────────────────────────────────────────────────────── */
.legal { max-width:46rem; margin:0 auto; padding:clamp(2.4rem,6vw,4.2rem) clamp(1rem,4vw,2.2rem); }
.legal h1 { font-family:var(--rotulo); font-weight:900; font-size:clamp(1.8rem,4.6vw,2.5rem); line-height:1.08; margin:0 0 1.5rem; letter-spacing:-0.01em; }
.legal h2 { font-size:1.16rem; margin:2.1rem 0 .6rem; max-width:none; }
.legal a { color:var(--purpura); }
.legal .volver { display:inline-block; margin-bottom:1.5rem; font-weight:700; text-decoration:none; color:var(--purpura); }
.legal .volver:hover { text-decoration:underline; }

/* MEDIDO en un móvil de 390 px: el subtítulo de la marca lleva "nowrap" y, al no
   poder encoger, empujaba el botón de WhatsApp fuera de la pantalla — la página
   se movía de lado. En móvil el subtítulo sobra: el nombre ya está ahí. */
@media (max-width: 560px) {
  .cab__nom { display: none; }
  .cab__marca { min-width: 0; }

}

/* ── La carta, en sus cinco hojas ─────────────────────────────────── *
 * Columnas calculadas: tres arriba y dos abajo centradas, para que no quede
 * un renglón a medias con cinco elementos.                           */
.carta { display:grid; grid-template-columns:repeat(6,1fr); gap:1rem; list-style:none; margin:0 0 1.2rem; padding:0; }
.carta li { grid-column:span 2; }
.carta li:nth-child(4) { grid-column:2 / span 2; }
.carta li:nth-child(5) { grid-column:4 / span 2; }
.carta a { display:block; border-radius:12px; overflow:hidden; border:1px solid var(--crema-2); background:#000; transition:transform .25s, box-shadow .25s; }
.carta a:hover { transform:translateY(-3px); box-shadow:0 18px 36px -22px #2a0f3a99; }
.carta img { width:100%; height:auto; display:block; }
.carta__pie { margin:0; font-size:.9rem; color:var(--tinta-ap); }
@media (max-width:820px) {
  .carta { grid-template-columns:repeat(2,1fr); }
  .carta li, .carta li:nth-child(4), .carta li:nth-child(5) { grid-column:span 1; }
}
@media (max-width:600px) {
  .carta { grid-template-columns:1fr; gap:.9rem; }
}