/* =============================================================
   KNT — Agenda Selecta de Meseros
   Sistema de diseño, utilidades y componentes
   Colores, tipografías, grid y A11y AA
   ============================================================= */

/* Reset ligero + box sizing */
*, *::before, *::after { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }
body, h1, h2, h3, p, ul, ol, figure { margin: 0; }
img, picture { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
:root {
  /* Paleta principal */
  --knt-red: #A20021;
  --knt-black: #0B0B0B;
  --knt-beige: #D9C6A5;
  --knt-white: #FFFFFF;

  /* Derivados */
  --knt-red-600: #8F001D;   /* ~10% más oscuro */
  --knt-beige-200: #E9DDC5; /* ~20% más claro */

  /* Tipografía */
  --font-display: "DM Serif Display", ui-serif, Georgia, serif;
  --font-ui: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;

  /* Tamaños base */
  --fs-hero: clamp(2rem, 1.1rem + 3.5vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 1rem + 1.8vw, 2.25rem);
  --fs-h3: 1.125rem;
  --fs-body: 1rem;

  /* Espaciado (escala 4/8px) */
  --space-2: .125rem;
  --space-4: .25rem;
  --space-6: .375rem;
  --space-8: .5rem;
  --space-12: .75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;

  /* Layout */
  --container: 1200px;
  --pad-x: clamp(1rem, 4vw, 2rem);

  /* Radius y sombras */
  --radius: 14px;
  --shadow-1: 0 6px 20px rgba(0,0,0,.18);
  --shadow-2: 0 14px 38px rgba(0,0,0,.28);

  /* Z-index */
  --z-nav: 50;
  --z-modal: 100;

  /* Transiciones */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-quick: 160ms;
  --dur: 260ms;
}

/* Base */
body {
  background: var(--knt-black);
  color: var(--knt-white);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  letter-spacing: .2px;
}

/* Enlace de salto */
.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus { position: fixed; left: var(--pad-x); top: var(--pad-x); width: auto; height: auto; padding: .5rem 1rem; background: var(--knt-red); color: #fff; z-index: 999; }

/* Contenedor y grid utilitario */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }
.grid { display: grid; gap: var(--space-24); }
.cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }

@media (max-width: 1024px) { .cols-2, .cols-3 { grid-template-columns: 1fr; } }

/* NAV */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: rgba(11,11,11,.75); backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(217,198,165,.12);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: .5rem; color: var(--knt-white); text-decoration: none; }
.logo__text { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: .5px; }
.logo__tag { font-size: .75rem; opacity: .75; }

.nav__menu {
  display: none; border: 1px solid rgba(233,221,197,.2);
  background: transparent; color: var(--knt-white);
  padding: .5rem; border-radius: 10px;
}
.nav__links ul { display: flex; gap: 1rem; list-style: none; }
.nav__links a { color: var(--knt-white); text-decoration: none; padding: .5rem .75rem; border-radius: 10px; }
.nav__links a:hover, .nav__links a:focus-visible { background: rgba(233,221,197,.12); outline: none; }

@media (max-width: 1024px) {
  .nav__menu { display: inline-flex; }
  .nav__links {
    position: fixed; inset: 64px 0 auto 0; background: #0B0B0B; padding: 1rem var(--pad-x);
    transform: translateY(-110%); transition: transform var(--dur) var(--ease);
  }
  .nav--open .nav__links { transform: translateY(0); }
  body.nav-lock { overflow: hidden; }
  .nav__links ul { flex-direction: column; gap: .25rem; }
}

/* HERO */
.hero { position: relative; min-height: clamp(64vh, 72vh, 86vh); display: grid; place-items: center; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.6) saturate(1.05); }
.hero__content { position: relative; text-align: center; padding-block: var(--space-64); }
.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1.15;
  letter-spacing: .6px;
}
.hero__sub { margin-top: .75rem; color: var(--knt-beige-200); font-weight: 500; }
.hero__ctas { margin-top: var(--space-24); display: inline-flex; gap: .75rem; flex-wrap: wrap; justify-content: center; }

/* Secciones */
.section { padding-block: var(--space-64); background: var(--knt-black); }
.section--alt { background: #121212; }
.section--accent { background: linear-gradient(180deg, #121212 0%, #0B0B0B 100%); border-top: 1px solid rgba(233,221,197,.12); }
.section__header { margin-bottom: var(--space-24); }
.section__title { font-family: var(--font-display); font-size: var(--fs-h2); }
.section__lead { color: var(--knt-beige-200); max-width: 56ch; }

/* Botones */
.btn {
  --bg: transparent; --fg: var(--knt-white); --bd: rgba(233,221,197,.28);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .65rem 1rem; border-radius: 999px; border: 1px solid var(--bd);
  background: var(--bg); color: var(--fg); text-decoration: none; cursor: pointer;
  transition: transform var(--dur-quick) var(--ease), box-shadow var(--dur-quick) var(--ease), background var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.btn:hover, .btn:focus-visible { transform: translateY(-1px); box-shadow: var(--shadow-1); outline: none; }
.btn--lg { padding: .85rem 1.25rem; }
.btn--small { padding: .5rem .75rem; font-size: .9rem; }

.btn--primary { --bg: var(--knt-red); --bd: var(--knt-red); }
.btn--primary:hover, .btn--primary:focus-visible { --bg: var(--knt-red-600); --bd: var(--knt-red-600); }
.btn--ghost { --bg: transparent; --bd: rgba(233,221,197,.4); color: var(--knt-beige-200); }
.btn--ghost:hover, .btn--ghost:focus-visible { --bd: rgba(233,221,197,.7); }

/* Cards servicios */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-24); }
.card {
  background: #151515; border: 1px solid rgba(233,221,197,.12); border-radius: var(--radius);
  padding: var(--space-24); box-shadow: 0 0 0 rgba(0,0,0,0); transition: box-shadow var(--dur) var(--ease), transform var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.card:hover, .card:focus-within { box-shadow: var(--shadow-1); transform: translateY(-2px); border-color: rgba(233,221,197,.28); }
.card__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: rgba(162,0,33,.12); margin-bottom: .75rem; }
.card__title { font-family: var(--font-display); font-size: var(--fs-h3); margin-bottom: .25rem; }
.card__text { color: #E5E5E5; }
.card--service .btn { margin-top: .75rem; }

/* Bullets + pills */
.bullets { list-style: none; padding: 0; display: grid; gap: .5rem; }
.pill {
  display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(233,221,197,.28);
  padding: .35rem .65rem; border-radius: 999px; color: var(--knt-beige-200); margin: .25rem .25rem 0 0;
}

/* Rating estrellas */
.rating svg { margin-right: .125rem; fill: var(--knt-beige); }

/* Formulario */
.form { background: #121212; border: 1px solid rgba(233,221,197,.12); border-radius: var(--radius); padding: var(--space-24); }
.field { display: grid; gap: .35rem; margin-bottom: .9rem; }
.field--check { grid-template-columns: auto 1fr; align-items: start; gap: .75rem; }
label { font-weight: 600; }
input, select, textarea {
  background: #0E0E0E; color: var(--knt-white); border: 1px solid rgba(233,221,197,.18);
  border-radius: 10px; padding: .65rem .75rem;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--knt-beige); outline-offset: 2px; }
.hint { color: #C9C9C9; font-size: .875rem; }
.error { color: #FFB3B3; font-size: .875rem; min-height: 1.1em; }
.form__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.form__msg { margin-top: .25rem; min-height: 1.25em; }
.legal { color: var(--knt-beige-200); font-size: .9rem; margin-top: .5rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Enlaces */
.link, .link-wa { color: var(--knt-beige); text-underline-offset: 2px; }
.link:hover, .link:focus-visible, .link-wa:hover, .link-wa:focus-visible { color: var(--knt-white); outline: none; }

/* Carousel */

/* ===== FIX: CARRUSEL MOSTRANDO SOLO UNA IMAGEN ===== */
.carousel {
  position: relative;
  overflow: hidden; /* asegura que no haya scroll lateral */
}

.carousel__viewport {
  display: flex;                /* cambia de grid a flex */
  flex-wrap: nowrap;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 100%;               /* cada slide ocupa todo el ancho */
  width: 100%;
  margin: 0;
}

.carousel__slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Botones arriba de las imágenes */
.carousel__btn {
  z-index: 2;
}
.carousel__btn--prev { left: .5rem; }
.carousel__btn--next { right: .5rem; }
.carousel__btn:hover, .carousel__btn:focus-visible { background: rgba(11,11,11,.8); outline: none; }
.carousel__dots { display: flex; justify-content: center; gap: .4rem; margin-top: .5rem; }
.carousel__dots button {
  width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(233,221,197,.6); background: transparent;
}
.carousel__dots button[aria-selected="true"] { background: var(--knt-beige); }

/* Footer */
.footer { border-top: 1px solid rgba(233,221,197,.12); background: #0A0A0A; }
.footer__inner { display: grid; gap: 1rem; padding-block: var(--space-24); align-items: center; }
.footer__brand { display: inline-flex; align-items: center; gap: .5rem; }
.footer__links { list-style: none; display: inline-flex; gap: .75rem; padding: 0; margin: 0; }
.footer__links a { color: var(--knt-beige-200); text-decoration: none; }
.footer__links a:hover, .footer__links a:focus-visible { color: var(--knt-white); outline: none; }
.footer__copy { color: #CFCFCF; font-size: .95rem; }

/* Modal */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; background: rgba(0,0,0,.5); }
.modal__panel {
  background: #151515; border: 1px solid rgba(233,221,197,.22); border-radius: 16px; padding: 1.25rem;
  width: min(92vw, 460px); box-shadow: var(--shadow-2);
}
.modal__close {
  position: absolute; right: .75rem; top: .75rem; background: transparent; border: 1px solid rgba(233,221,197,.25);
  border-radius: 999px; padding: .35rem; color: #fff;
}
.modal__actions { margin-top: 1rem; display: flex; justify-content: end; }

/* Focus visible */
a:focus-visible, button:focus-visible { outline: 2px solid var(--knt-beige); outline-offset: 2px; }

/* Animaciones sobrias */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero__content, .section__header, .card, .form, .footer__inner { animation: fadeUp 600ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Breakpoints */
@media (max-width: 480px) { .hero__title { letter-spacing: .3px; } }
@media (max-width: 768px) { .hero__content { padding-block: var(--space-48); } }
@media (min-width: 1200px) {
  .section__title { font-size: calc(var(--fs-h2) * 1.06); }
  .hero__title { font-size: calc(var(--fs-hero) * 1.04); }
}
* --- NAV fixes --- */

/* Evita que algo se superponga encima del hero cuando el panel abre */
.nav__links{ z-index: calc(var(--z-nav) + 1); }

/* Hacer que la CTA solo exista visualmente en un lugar correcto */
.header-cta{ display:none; } /* por si tenías una suelta fuera del <nav> */

/* Estilo de CTA dentro del panel móvil: bloque, ancho completo */
@media (max-width:1024px){
  .nav__links .btn{
    display:block;
    width:100%;
    margin-top: 100%;
    text-align:center;
    padding:.8rem 1rem;
    border-radius:999px;
  }
  .nav__links li + li a{ /* separadores suaves entre items */
    border-top: 1px solid rgba(233,221,197,.10);
  }
  .nav__links ul > li:first-child a{ border-top: none; }
  .nav__links{ border-bottom:1px solid rgba(233,221,197,.12); }
}

/* Desktop: CTA al final del row, aspecto pill compacto */
@media (min-width:1025px){
  .nav__cta .btn{ padding:.55rem .9rem; }
}

/* Mejora de toque y legibilidad en móvil */
@media (max-width:1024px){
  #site-nav a{
    padding:.8rem .5rem;
    font-size:1.05rem;
  }
}

/* Sombra cuando hay scroll (si no la tienes ya) */
.nav--shadow{ box-shadow: 0 6px 20px rgba(0,0,0,.18); }