/* ==========================================
   RESTAURANT - ESTILOS GENERALES
========================================== */

:root {
  --green: #075e54;
  --green-dark: #123d35;
  --green-soft: #e7f1ec;
  --cream: #f7f6f0;
  --ink: #1d2925;
  --muted: #68756f;
  --gold: #c49a55;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--cream);
  font-family: Inter, Arial, sans-serif;
}

/* ==========================================
   ENCABEZADO
========================================== */

.site-header {
  height: 82px;
  padding: 0 clamp(22px, 6vw, 88px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border-bottom: 1px solid #e8ebe6;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--green);
  color: white;
  font-family: Georgia, serif;
  font-size: 27px;
}

.brand-copy {
  display: grid;
  gap: 2px;
}

.brand-copy strong {
  font-family: Georgia, serif;
  font-size: 21px;
}

.brand-copy small {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.header-note,
.availability {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 13px;
}

.status-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: #36a56f;
  box-shadow: 0 0 0 3px #36a56f1c;
}

/* ==========================================
   CONTENIDO PRINCIPAL
========================================== */

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 76px 28px 54px;
}

.hero {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  align-items: center;
  gap: clamp(40px, 8vw, 110px);
}

.eyebrow {
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
}

h1 {
  margin: 18px 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.04;
  font-weight: 500;
  letter-spacing: -.04em;
}

h1 em {
  color: var(--green);
  font-weight: 400;
}

.intro {
  max-width: 540px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75;
}

/* ==========================================
   BOTONES
========================================== */

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 30px;
}

.primary-button {
  border: 0;
  border-radius: 999px;
  padding: 15px 23px;
  color: #fff;
  background: var(--green);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 9px 22px #075e5425;
  transition: transform .2s, background .2s;
}

.primary-button:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
}

.primary-button span {
  margin-right: 7px;
  color: #d9c18d;
}

/* ==========================================
   TARJETA DE BIENVENIDA
========================================== */

.hero-card {
  position: relative;
  overflow: hidden;
  padding: 42px;
  min-height: 340px;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(145deg, #164d41, #092e28);
  box-shadow: 0 24px 60px #153d3524;
}

.hero-card::after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -100px;
  top: -100px;
  border: 1px solid #ffffff24;
  border-radius: 50%;
  box-shadow:
    0 0 0 28px #ffffff09,
    0 0 0 58px #ffffff06;
}

.card-icon {
  font-size: 42px;
  margin-bottom: 26px;
}

.card-label {
  color: #d9c18d;
  font-size: 10px;
  letter-spacing: .18em;
  font-weight: 800;
}

.hero-card h2 {
  max-width: 320px;
  margin: 12px 0;
  font: 500 31px/1.15 Georgia, serif;
}

.hero-card p:not(.card-label) {
  color: #d1dfd9;
  line-height: 1.65;
  font-size: 14px;
}

.suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.suggestions span {
  padding: 8px 12px;
  border: 1px solid #ffffff35;
  border-radius: 99px;
  color: #edf5f0;
  font-size: 11px;
}

/* ==========================================
   INFORMACIÓN INFERIOR
========================================== */

.info-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 76px;
  padding: 25px 0;
  border-top: 1px solid #e3e6df;
  border-bottom: 1px solid #e3e6df;
}

.info-strip > div {
  display: flex;
  align-items: center;
  gap: 14px;
}

.info-symbol {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: var(--green);
  background: var(--green-soft);
  font-size: 23px;
}

.info-strip strong,
.info-strip small {
  display: block;
}

.info-strip strong {
  font-size: 13px;
}

.info-strip small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

/* ==========================================
   PIE DE PÁGINA
========================================== */

footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 24px clamp(22px, 6vw, 88px);
  color: var(--muted);
  font-size: 11px;
  border-top: 1px solid #e8ebe6;
  background: #fff;
}

/* ==========================================
   N8N CHAT - CONFIGURACIÓN GENERAL
========================================== */

:root {
  --chat--color--primary: #075e54;
  --chat--color--primary-shade-50: #064f47;
  --chat--color--primary-shade-100: #043f39;
  --chat--color--secondary: #c49a55;

  --chat--color-white: #ffffff;
  --chat--color-light: #f7f6f0;
  --chat--color-light-shade-50: #eeeee8;
  --chat--color-light-shade-100: #dedfd8;
  --chat--color-medium: #d7ddd7;
  --chat--color-dark: #1d2925;
  --chat--color-disabled: #a0aaa4;
  --chat--color-typing: #075e54;

  --chat--font-family: Arial, sans-serif;
  --chat--spacing: 12px;
  --chat--border-radius: 12px;
  --chat--transition-duration: .2s;

  /* Ventana de escritorio */
  --chat--window--width: 370px;
  --chat--window--height: 540px;
  --chat--window--bottom: 20px;
  --chat--window--right: 20px;
  --chat--window--z-index: 9999;
  --chat--window--border-radius: 18px;
  --chat--window--margin-bottom: 15px;

  /* Cabecera */
  --chat--header-height: auto;
  --chat--header--padding: 16px;
  --chat--header--background: #075e54;
  --chat--header--color: #ffffff;

  --chat--heading--font-size: 20px;
  --chat--subtitle--font-size: 13px;
  --chat--subtitle--line-height: 1.4;

  /* Mensajes */
  --chat--message--font-size: 14px;
  --chat--message--padding: 12px;
  --chat--message--border-radius: 12px;
  --chat--message-line-height: 1.5;

  --chat--message--bot--background: #f0f3ef;
  --chat--message--bot--color: #1d2925;

  --chat--message--user--background: #d9f1e5;
  --chat--message--user--color: #173b32;

  /* Botón flotante */
  --chat--toggle--background: #075e54;
  --chat--toggle--hover--background: #064f47;
  --chat--toggle--active--background: #043f39;
  --chat--toggle--color: #ffffff;
  --chat--toggle--size: 60px;

  /* Entrada de texto */
  --chat--textarea--height: 50px;
  --chat--input--font-size: 14px;
  --chat--input--placeholder--font-size: 14px;
  --chat--input--background: #ffffff;
  --chat--input--text-color: #1d2925;
}

/* ==========================================
   VENTANA DEL CHAT
========================================== */

.chat-window {
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .18) !important;
}

.chat-header {
  padding: 16px !important;
  min-height: auto !important;
  background: #075e54 !important;
  color: #fff !important;
}

.chat-header h1,
.chat-header h2,
.chat-heading {
  font-size: 20px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

/* Botón flotante */
.chat-window-toggle {
  background: #075e54 !important;
  border-radius: 50% !important;
  box-shadow: 0 5px 18px rgba(7, 94, 84, .3) !important;
}

/* ==========================================
   TABLETS
========================================== */

@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --chat--window--width: 350px;
    --chat--window--height: 520px;
    --chat--window--right: 15px;
    --chat--window--bottom: 15px;
  }
}

/* ==========================================
   CELULARES
========================================== */

@media (max-width: 480px) {

  html,
  body {
    overflow-x: hidden;
  }

  .site-header {
    height: 72px;
    padding: 0 20px;
  }

  .header-note {
    font-size: 11px;
  }

  main {
    padding: 48px 20px 36px;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  h1 {
    font-size: clamp(38px, 11vw, 52px);
  }

  .intro {
    font-size: 15px;
  }

  .hero-card {
    min-height: auto;
    padding: 30px;
  }

  .info-strip {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 48px;
  }

  footer {
    flex-direction: column;
    padding: 22px 20px;
  }

  /* Ventana n8n */
  :root {
    --chat--window--width: calc(100vw - 20px);
    --chat--window--height: calc(100dvh - 90px);
    --chat--window--right: 10px;
    --chat--window--bottom: 10px;
    --chat--window--border-radius: 16px;
    --chat--toggle--size: 54px;
  }

  .chat-window {
    position: fixed !important;
    width: calc(100vw - 20px) !important;
    height: calc(100dvh - 90px) !important;
    max-height: calc(100dvh - 90px) !important;
    right: 10px !important;
    bottom: 10px !important;
    left: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .chat-header {
    padding: 14px !important;
  }

  .chat-header h1,
  .chat-header h2 {
    font-size: 19px !important;
  }

  .chat-message {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .chat-input {
    font-size: 16px !important;
  }

  .chat-window-toggle {
    width: 54px !important;
    height: 54px !important;
    right: 15px !important;
    bottom: 15px !important;
  }
}

/* ==========================================
   CELULARES PEQUEÑOS
========================================== */

@media (max-width: 360px) {

  .site-header {
    padding: 0 14px;
  }

  .brand-copy strong {
    font-size: 19px;
  }

  main {
    padding-left: 15px;
    padding-right: 15px;
  }

  .chat-window {
    width: calc(100vw - 12px) !important;
    right: 6px !important;
  }
}

/* ==========================================
   PANTALLAS CON POCA ALTURA
========================================== */

@media (max-height: 600px) and (max-width: 480px) {
  .chat-window {
    height: calc(100dvh - 60px) !important;
    max-height: calc(100dvh - 60px) !important;
  }
}



/* ==========================================
   CORRECCIÓN DEFINITIVA - CHAT EN CELULARES
========================================== */

@media screen and (max-width: 480px) {

  /* Evitar desbordamiento horizontal */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  /* Dimensiones de la ventana */
  .chat-window-wrapper,
  .chat-window {
    position: fixed !important;
    width: calc(100vw - 20px) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 20px) !important;

    height: calc(100dvh - 100px) !important;
    max-height: calc(100dvh - 100px) !important;

    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;

    margin: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  /* ENCABEZADO COMPACTO */
  .chat-header {
    height: auto !important;
    min-height: 0 !important;
    max-height: 90px !important;

    padding: 12px 14px !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    overflow: hidden !important;
    background: #075e54 !important;
  }

  /* Título Restaurant */
  .chat-header h1,
  .chat-header h2,
  .chat-heading {
    font-family: Georgia, serif !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;

    margin: 0 0 4px 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Subtítulo */
  .chat-header p,
  .chat-header small,
  .chat-subtitle {
    font-family: Arial, sans-serif !important;
    font-size: 11px !important;
    line-height: 1.3 !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Cuerpo del chat */
  .chat-body {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Mensajes */
  .chat-message {
    max-width: 90% !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere !important;
  }

  /* Área de escritura */
  .chat-footer {
    width: 100% !important;
    min-width: 0 !important;
  }

  .chat-input,
  .chat-input textarea,
  .chat-inputs textarea,
  textarea {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  /* Botón flotante */
  .chat-window-toggle {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;

    right: 15px !important;
    bottom: 15px !important;

    background: #075e54 !important;
  }
}

/* ==========================================
   CELULARES PEQUEÑOS
========================================== */

@media screen and (max-width: 360px) {

  .chat-header {
    max-height: 82px !important;
    padding: 10px 12px !important;
  }

  .chat-header h1,
  .chat-header h2,
  .chat-heading {
    font-size: 18px !important;
  }

  .chat-window-wrapper,
  .chat-window {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    left: 6px !important;
    right: 6px !important;
  }
}