.alexis {
  --alexis-bg: #0D0302;
  --alexis-bg-soft: #470E0A;
  --alexis-bg-soft-2:#1E0604;
  --alexis-red: #E4002B;
  --alexis-red-bright: #F90018;
  --alexis-border: #FF0000;
  --alexis-red-num:#F21927;
  --alexis-cream: #FBF0D3;
  --alexis-gray: #BFB6B5;
  --alexis-radius: 14px;
  --alexis-font-display: Georgia, 'Times New Roman', serif;
  --alexis-font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 
  position: relative;
  min-height:calc(100vh - 100px) ;
  background: linear-gradient(0deg, var(--alexis-bg-soft) 0%,  var(--alexis-bg-soft-2) 64%, var(--alexis-bg) 100%);
  color: var(--alexis-cream);
  font-family: var(--alexis-font-body);
  display: flex;
  flex-direction: column;
  padding: 32px 24px 65px 24px;
  box-sizing: border-box;
}
 
.alexis * {
  box-sizing: border-box;
}
 
.is-hidden {
  display: none !important;
}
 
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.alexis__wrapper{
  position: relative;
  max-width: 1333px;
  margin: 0 auto;
  width: 100%;
}
.alexis__wrapper-bg{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5;
}
.alexis__wrapper-bg div{
  position: absolute;
  width: 44%;
  height: calc(100% - 42.2px);
  right: 0px;
  border-right: 3px solid #75191f;
  top: 72px;
}
.alexis__wrapper-bg div:first-child{
  right: inherit;
  left: 4px;
  border-left: 3px solid #75191f;
  border-right: 0;
}
.alexis__wrapper-bg:before{
  content: '';
  display: block;
  width: 43%;
  background-repeat: no-repeat;
  height: 42.2px;
  position: absolute;
  background-size: contain;
  margin-top: 32px;
  left: 0;
   top: 0;
background-image: url("data:image/svg+xml,%3Csvg width='576' height='41' viewBox='0 0 576 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_491_126125)'%3E%3Cpath opacity='0.63' d='M2.8501 976V42.1723L22.2149 21.0862H234.439L253.803 0H577.85' stroke='%23B0262F' stroke-width='2.6' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_491_126125'%3E%3Crect width='576' height='40.2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}
.alexis__wrapper-bg:after{
  content: '';
  display: block;
  width: 43%;
  background-repeat: no-repeat;
  height: 42.2px;
  position: absolute;
  margin-top: 32px;
  right: 0;
  top: 0;
  background-size: contain;
  background-position: right;
background-image: url("data:image/svg+xml,%3Csvg width='576' height='41' viewBox='0 0 576 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_491_126125)'%3E%3Cpath opacity='0.63' d='M574.85 894V39.5859L555.485 20.293H343.262L323.897 1H-0.149924' stroke='%23B0262F' stroke-width='2.6' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_491_126125'%3E%3Crect width='576' height='40.2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");}
.alexis__landing{
    width: 100%;
    position: relative;
    z-index: 10;
}


/* ---------- Landing: marca ---------- */
 
.alexis__brand {
  text-align: center;
  margin-bottom: 24px;
}
 
.alexis__brand-logo {
  font-family: var(--alexis-font-display);
  font-style: italic;
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--alexis-cream);
}
 
/* ---------- Landing: hero ---------- */
 
.alexis__hero {
  max-width: 100%;
  margin: 0 auto 32px;
  text-align: left;
  padding: 25px 53px;
  z-index: 2;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  gap: 116px; 
}

.alexis__hero-logo{
  height: 241px;
  overflow: hidden;
}
.alexis__hero-logo img{
  max-width: 603px;
}
.alexis__hero-ai{
  max-width: 486px;
}
.alexis__eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  color: var(--alexis-red-bright);
  margin: 0 0 8px;
}
 
.alexis__title {
  font-family: var(--alexis-font-display);
  font-style: italic;
  font-size: 64px;
  line-height: 1;
  margin: 0 0 12px;
  border: 1px solid var(--alexis-border);
  border-radius: var(--alexis-radius);
  padding: 12px 20px;
  display: inline-block;
  background: rgba(0, 0, 0, 0.25);
}
 
.alexis__tagline {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 28px;
  margin: 0px auto 16px auto;
  color: var(--alexis-cream);
  letter-spacing: -5%;
}
 
.alexis__description {
  font-size: 21px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--alexis-cream);
  margin: 0;
  text-transform: uppercase;
}
 
.alexis__description strong {
  color: var(--alexis-red-bright);
}
 
/* ---------- Input (compartido landing / chat) ---------- */
 
.alexis__inputbar {
  max-width: calc(100% - 106px);
  width: 100%;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--alexis-border);
  border-radius: 999px;
  padding: 10px 40px 10px 20px;
  background: rgba(0, 0, 0, 0.3);
  position: relative;
  z-index: 10;
}
 
.alexis__inputbar-star {
  color: var(--alexis-red-bright);
  font-size: 14px;
  width: 33px;
  height: 19px;
  background-position: center;
  background-repeat: no-repeat;
  border-right: 1px solid  var(--alexis-red-bright);
  background-image: url("data:image/svg+xml,%3Csvg width='22' height='20' viewBox='0 0 22 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5379 0L13.0146 7.63029H21.0601L14.5606 12.3501L17.0374 19.9803L10.5379 15.2606L4.02271 19.9803L6.49944 12.3501L0 7.63029H8.04542L10.5379 0Z' fill='%23B0262F'/%3E%3C/svg%3E%0A");
}
 
.alexis__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--alexis-cream);
  font-size: 17px;
}
 
.alexis__input::placeholder {
  color: rgba(244, 236, 224, 0.55);
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: 0.5px;
}
 
.alexis__mic {
  background: transparent;
  border: none;
  color: var(--alexis-red-bright);
  cursor: pointer;
  font-size: 16px;
}
 
.alexis__send {
  background: #B0262F;
  border: none;
  color: #fff;
  width: 165px;
  height: 43px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  transition: filter 0.15s ease;
  background-repeat: no-repeat;
  background-position: 90% center;
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='14' viewBox='0 0 9 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.38601 13.2291C2.81195 12.8044 7.78115 7.78567 7.78115 7.78567C7.78115 7.36089 8.15974 6.98331 8.15974 6.98331C8.15974 6.55853 7.78115 6.13376 7.78115 5.70898C7.78115 5.70898 2.81195 0.721758 2.38601 0.312712C1.96008 -0.096334 1.12399 -0.112067 0.31945 0.312712C-0.106483 0.737491 -0.106483 1.58705 0.31945 2.37367L4.87854 6.98331L0.31945 11.5929C-0.106483 11.9705 -0.106483 12.8201 0.31945 13.2449C1.12399 13.6696 1.96008 13.6696 2.38601 13.2449' fill='%23F9EDEE'/%3E%3C/svg%3E%0A");
}
 
.alexis__send:hover {
  filter: brightness(1.1);
}
 
.alexis__send:disabled,
.alexis__mic:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
 
/* ---------- Landing: sugerencias ---------- */
 
.alexis__suggestions {
  max-width: calc(100% - 106px);
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  position: relative;
  z-index: 10;
}
 
.alexis__suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--alexis-border);
  border-radius: 21px;
  padding: 14px 16px;
  color: var(--alexis-cream);
  cursor: pointer;
  position: relative;
  font-family: var(--alexis-font-body);
  transition: background 0.15s ease, transform 0.15s ease;
  overflow: hidden;
}
.alexis__suggestion::before{
  content: '';
  width: 18px;
  background-color: var(--alexis-red-bright);
  height: 100%;
  position: absolute;
  background-image: url("data:image/svg+xml,%3Csvg width='5' height='10' viewBox='0 0 5 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.27149 9.05837C1.49262 8.77661 4.16092 5.32044 4.16092 5.32044C4.16092 5.03868 4.3673 4.77571 4.3673 4.77571C4.3673 4.49396 4.16092 4.19342 4.16092 3.91167C4.16092 3.91167 1.49262 0.493068 1.27149 0.211315C1.05036 -0.0704383 0.593362 -0.0704383 0.165847 0.211315C-0.0552822 0.493068 -0.0552822 1.07536 0.165847 1.62008L2.61301 4.77571L0.165847 7.93135C-0.0552822 8.19432 -0.0552822 8.77661 0.165847 9.05837C0.593362 9.34012 1.05036 9.34012 1.27149 9.05837Z' fill='%23F9EDEE'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  right: 0;
  top: 0;
  background-position: center;
  opacity: 51%;
}
.alexis__suggestion:hover {
  background: rgba(211, 29, 29, 0.15);
  transform: translateY(-1px);
}
.alexis__suggestion:hover .alexis__suggestion-text,.alexis__suggestion:hover .alexis__suggestion-num, .alexis__suggestion:hover::before{
  opacity: 100%;
}
 

 
.alexis__suggestion-num {
  font-size: 48px;
  font-weight: 900;
  color: var(--alexis-red-num);
  flex-shrink: 0;
  opacity: 65%;
}
 
.alexis__suggestion-text {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--alexis-cream);
  text-transform: uppercase;
  opacity: 51%;
}
 
/* ---------- Chat: header ---------- */
 
.alexis__chat {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 160px);
  position: relative;
  padding: 25px 53px;
  z-index: 10;
}

.alexis__inputbar--chat{
  max-width: 100% !important;
}

 
.alexis__chat-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  border-bottom: 1px solid var(--alexis-border);
  padding-bottom: 16px;
  margin-bottom: 20px;
}
 
.alexis__chat-logo {
  width: 323px;
    height: 115px;
    overflow: hidden;
    position: relative;
}
.alexis__chat-logo img{
  width: 100%;
    height: 112%;
    object-fit: cover;
}
 
.alexis__chat-actions {
  display: flex;
  gap: 10px;
}
 
.alexis__btn {
  border: none;
  border-radius: 8px;
  padding: 13px 14px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  color: var(--alexis-cream);
  background: rgba(161, 21, 21, 0.6);
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  gap: 3px;
  justify-content: center;
}
 
.alexis__btn:hover {
  background: rgba(211, 29, 29, 0.8);
}
 
/* ---------- Chat: mensajes ---------- */
 
.alexis__messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding: 8px 4px 24px;
  margin-bottom: 16px;
}
 
.alexis__msg {
  max-width: 65%;
  border-radius: var(--alexis-radius);
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.5;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #E23A2A;
  white-space: pre-wrap;
  min-width: 465px;
}
 
.alexis__msg--alexis {
  align-self: flex-start;
  border-left: 48px solid #E23A2A;
}
 
.alexis__msg--user {
  align-self: flex-end;
  border: 1px solid var(--alexis-gray);
  border-left: 48px solid var(--alexis-gray);
  color: var(--alexis-cream);
}
 
.alexis__msg--pending {
  opacity: 0.6;
}
 
.alexis__msg--error {
  border-left-color: #ff5c5c;
  color: #ffb3b3;
}
 
.alexis__typing span {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--alexis-red-bright);
  animation: alexis-blink 1.2s infinite ease-in-out;
}
 
.alexis__typing span:nth-child(2) { animation-delay: 0.2s; }
.alexis__typing span:nth-child(3) { animation-delay: 0.4s; }
 
@keyframes alexis-blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}
 
/* ---------- Responsive ---------- */
 
@media (max-width: 720px) {
  .alexis__inputbar-star{
    min-width: 33px;
  }
  .alexis__input{
    width: 90%;
  }
  .alexis__chat-logo img{
    height: auto;
  }
  .alexis__wrapper-bg{
    display: none;
  }
  .alexis__hero-ai{
    width: 100%;
  }
  .alexis__hero-logo img{
    width: 100%;
  }
  .alexis__hero-logo{
    width: 300px;
    max-width: 300px;
    height: 123px;
    margin: 0px auto 15px auto;
  }
  .alexis__hero{
    grid-template-columns: repeat(1, 1fr);
    gap: 25px;
    padding: 25px 9px;
  }
  .alexis__tagline{
    text-align: center;
  }
  .alexis__tagline::after{
    content: '';
    background-color: var(--alexis-cream);
    width: 102px;
    height: 6px;
    position: relative;
    display: block;
    margin: 20px auto 20px auto;
  }
  .alexis__description{
    font-size: 12px;
    text-align: center;
  }
  .alexis__inputbar {
    max-width: calc(100% - 40px);
    padding: 10px 23px 10px 20px;
  }
  .alexis__input::placeholder{
    font-size: 12px;
  }
  .alexis__chat-logo{
    max-width: 100%;
  }
  .alexis__suggestions {
    grid-template-columns: 1fr;
    max-width: calc(100% - 40px);
  }
  .alexis__send{
    width: 16px;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='13' height='21' viewBox='0 0 13 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.66232 20.3848C4.30845 19.7295 11.9773 11.992 11.9773 11.992C11.9773 11.3367 12.5599 10.7659 12.5599 10.7659C12.5599 10.1105 11.9773 9.46571 11.9773 8.81035C11.9773 8.81035 4.31905 1.13631 3.66232 0.491519C3.01618 -0.16384 1.71332 -0.16384 0.484602 0.491519C-0.161534 1.14688 -0.161534 2.44702 0.484602 3.67318L7.49676 10.7659L0.484602 17.8585C-0.161534 18.4399 -0.161534 19.74 0.484602 20.3954C1.71332 21.0508 3.01618 21.0508 3.66232 20.3954' fill='%23B0262F'/%3E%3C/svg%3E%0A");
  }
 
  .alexis__suggestion-text{
    font-size: 11px;
  }
 
  .alexis__title {
    font-size: 44px;
  }
 
  .alexis__msg {
    max-width: 85%;
    min-width: 252px;
  }
  .alexis__chat{
    padding: 25px 20px;
  }
  .alexis__chat-header{
    flex-direction: column;
  }
  .alexis__chat-logo{
    margin: 0 auto 12px auto;
  }
  .alexis__chat-actions{
    width: 100%;
  }
  .alexis__btn{
    width: 50%;
    padding: 19px 16px;
  }
  .alexis__msg--alexis{
    border-left: 24px solid #E23A2A;
  }
  .alexis__msg--user{
    border-left: 24px solid var(--alexis-gray);
  }
}
 
/* ---------- Accesibilidad: foco visible ---------- */
 
.alexis__input:focus-visible,
.alexis__send:focus-visible,
.alexis__mic:focus-visible,
.alexis__btn:focus-visible,
.alexis__suggestion:focus-visible {
  outline: 2px solid var(--alexis-red-bright);
  outline-offset: 2px;
}
 
@media (prefers-reduced-motion: reduce) {
  .alexis__suggestion,
  .alexis__send,
  .alexis__typing span {
    animation: none !important;
    transition: none !important;
  }
}
/* Tiendas cercanas (flujo B2O), dentro de la misma burbuja del mensaje. */
.alexis__tiendas {
  margin-top: 8px;
}
.alexis__tienda {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.alexis__tienda-title strong {
  font-size: 1.05em;
}
.alexis__tienda-addr,
.alexis__tienda-dist {
  opacity: 0.85;
  font-size: 0.9em;
}
.alexis__tienda-link,
.alexis__tienda-link:link,
.alexis__tienda-link:visited,
.alexis__tienda-link:hover,
.alexis__tienda-link:focus {
  margin-top: 6px;
  align-self: flex-start;
  font-weight: 600;
  text-decoration: underline;
  color: #fff;
}

/* Botón "Compartir ubicación": el GPS se pide solo al hacer clic. */
/* Block + ancho al contenido → queda en su propia línea, debajo del texto. */
.alexis__location-btn {
  display: block;
  width: fit-content;
  margin-top: 10px;
  align-self: flex-start;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--alexis-red);
  color: var(--alexis-cream);
  font-weight: 600;
  cursor: pointer;
}
.alexis__location-btn:hover {
  background: var(--alexis-red-bright);
}
.alexis__location-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Quick-replies: opciones de menú como botones. */
.alexis__menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.alexis__menu-btn {
  padding: 8px 14px;
  border: 1px solid var(--alexis-red);
  border-radius: 999px;
  background: transparent;
  color: var(--alexis-cream);
  font-weight: 600;
  cursor: pointer;
}
.alexis__menu-btn:hover {
  background: var(--alexis-red);
}
.alexis__menu-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Honeypot anti-bot: oculto para humanos, presente en el DOM para bots. */
.alexis__hp {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}