/* Base común de todas las demos de Veraxis.
   Cada sector pone su diseño en css/estilos.css y define estas variables en :root:
   --fondo --superficie --texto --texto-suave --linea --acento --sobre-acento --acento-texto
   --fuente-titulos --fuente-texto --radio --ancho
   Lo de aquí es lo que comparten todas: reinicio, accesibilidad, avisos de demo, ventana,
   formulario a WhatsApp, mapa a petición, reseñas y páginas legales. */

:root {
  --fondo: #ffffff;
  --superficie: #ffffff;
  --texto: #15171a;
  --texto-suave: #545a63;
  --linea: #d9dce0;
  --acento: #1f6feb;
  --sobre-acento: #ffffff;
  --acento-texto: #1f5fc8;
  --fuente-titulos: system-ui, sans-serif;
  --fuente-texto: system-ui, sans-serif;
  --radio: 6px;
  --ancho: 72rem;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --rapido: 160ms;
  --medio: 280ms;
  /* Marca Veraxis (solo en el modo demo) */
  --vx-tinta: #0E1A2B;
  --vx-tinta-2: #59616F;
  --vx-menta: #3ED598;
  --vx-menta-texto: #1D6B4E;
  --vx-menta-suave: #E2F8EE;
  --vx-aviso: #F7EBD3;
  --vx-aviso-texto: #6A4A12;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
h1, h2, h3, h4 { font-family: var(--fuente-titulos); line-height: 1.1; margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { padding-left: 1.2em; }
[hidden] { display: none !important; }
.personalizando body { visibility: hidden; }

.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
@supports (padding: max(0px)) {
  .contenedor { width: min(100% - 2.5rem - env(safe-area-inset-left) - env(safe-area-inset-right), var(--ancho)); }
}

.oculto-visual {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--texto); color: var(--fondo); padding: .7rem 1rem; border-radius: var(--radio);
  text-decoration: none; font-weight: 600;
}
.saltar:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--acento-texto); outline-offset: 3px; }

.falta {
  background: var(--vx-aviso); color: var(--vx-aviso-texto);
  padding: .05em .35em; border-radius: 3px; font-size: .92em;
}

/* ---------- Aviso superior del modo demo ---------- */
.demo-aviso {
  position: relative; z-index: 60;
  background: var(--vx-tinta); color: #fff;
  font: 400 .875rem/1.45 "IBM Plex Sans", system-ui, sans-serif;
}
.demo-aviso .contenedor { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: center; justify-content: space-between; padding: .55rem 0; }
.demo-aviso p { margin: 0; }
.demo-aviso a { color: var(--vx-menta); font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }

/* ---------- Bloque de Veraxis al final de la demo ---------- */
.vx-planes {
  background: var(--vx-tinta); color: #fff;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  padding: clamp(3rem, 8vw, 5.5rem) 0;
}
.vx-planes h2 { font-family: inherit; font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -.01em; max-width: 26ch; }
.vx-planes__intro { color: #c5cbd3; max-width: 60ch; }
.vx-planes__lista { list-style: none; padding: 0; margin: 2rem 0; border-top: 1px solid #2a3647; }
.vx-planes__lista li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1.5rem;
  padding: 1.1rem 0; border-bottom: 1px solid #2a3647;
}
.vx-planes__lista strong { font-weight: 600; }
.vx-planes__lista span { color: #c5cbd3; font-size: .95rem; grid-column: 1; }
.vx-planes__precio { font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--vx-menta); text-align: right; grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: .95rem; }
.vx-planes__precio small { display: block; color: #c5cbd3; font-size: .85rem; }
.vx-planes__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.vx-boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: .75rem 1.3rem; border-radius: 8px; font-weight: 600; text-decoration: none;
  background: var(--vx-menta); color: var(--vx-tinta); border: 1px solid var(--vx-menta);
  transition: transform var(--rapido) var(--curva), background-color var(--rapido);
}
.vx-boton--linea { background: transparent; color: #fff; border-color: #50607a; }
.vx-boton:active { transform: scale(.97); }
.vx-planes__nota { color: #9aa4b1; font-size: .875rem; margin-top: 1.5rem; }
@media (max-width: 34rem) {
  .vx-planes__lista li { grid-template-columns: minmax(0, 1fr); }
  .vx-planes__precio { grid-row: auto; grid-column: 1; text-align: left; }
}

/* ---------- Ventana de "esto es lo que pasaría" ---------- */
.demo-dialogo {
  width: min(100% - 2rem, 30rem); border: 0; border-radius: 14px; padding: 0;
  background: #fff; color: var(--vx-tinta); box-shadow: 0 24px 60px rgba(14, 26, 43, .35);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}
.demo-dialogo::backdrop { background: rgba(14, 26, 43, .55); }
.demo-dialogo[open] { animation: dialogo-entra var(--medio) var(--curva); }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.demo-dialogo__cuerpo { padding: 1.5rem 1.5rem 1.25rem; }
.demo-dialogo h2 { font-family: inherit; font-size: 1.25rem; font-weight: 600; margin-bottom: .6rem; }
.demo-dialogo p { color: var(--vx-tinta-2); font-size: .975rem; }
.demo-dialogo__mensaje {
  background: var(--vx-menta-suave); border-radius: 10px 10px 10px 2px; padding: .8rem 1rem;
  white-space: pre-wrap; font-size: .95rem; color: var(--vx-tinta); margin: 0 0 1rem;
}
.demo-dialogo__acciones { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; padding: 0 1.5rem 1.5rem; }
.demo-dialogo__acciones .vx-boton { min-height: 44px; }
.demo-dialogo__acciones .vx-boton--linea { color: var(--vx-tinta); border-color: #c9ced6; }

/* ---------- Formulario que prepara un WhatsApp ---------- */
.wa-form { display: grid; gap: 1rem; }
.wa-form__campo { display: grid; gap: .35rem; }
.wa-form label { font-weight: 600; font-size: .95rem; }
.wa-form input, .wa-form select, .wa-form textarea {
  width: 100%; min-height: 48px; padding: .7rem .85rem;
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); color: var(--texto);
}
.wa-form textarea { min-height: 7rem; resize: vertical; }
.wa-form input:focus-visible, .wa-form select:focus-visible, .wa-form textarea:focus-visible { outline-offset: 1px; }
.wa-form p.wa-form__nota { font-size: .875rem; color: #5B6068; margin: 0; max-width: none; }

/* ---------- Mapa que solo se carga si se pide (sin cookies al entrar) ---------- */
.mapa {
  position: relative; display: grid; place-items: center; text-align: center;
  aspect-ratio: 4 / 3; border-radius: var(--radio); overflow: hidden;
  background: var(--superficie); border: 1px solid var(--linea);
}
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapa__aviso { max-width: 26ch; font-size: .9rem; color: var(--texto-suave); padding: 1rem; }
.mapa__aviso button { margin-top: .75rem; }
@media (max-width: 30rem) { .mapa { aspect-ratio: 1; } }

/* ---------- Reseñas ---------- */
.resenas-hueco {
  border: 1.5px dashed var(--vx-aviso-texto); background: var(--vx-aviso); color: var(--vx-aviso-texto);
  border-radius: var(--radio); padding: 1.25rem 1.4rem; font-family: "IBM Plex Sans", system-ui, sans-serif;
}
.resenas-hueco p { margin: 0; max-width: 62ch; }
.resenas-hueco strong { display: block; margin-bottom: .25rem; }

/* ---------- Botón fijo de llamada en el móvil ---------- */
.fijo-movil { display: none; }
@media (max-width: 47.99rem) {
  .fijo-movil {
    position: fixed; z-index: 50; left: .75rem; right: .75rem;
    bottom: max(.75rem, env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  }
  .fijo-movil a {
    display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px;
    border-radius: var(--radio); font-weight: 700; text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
    transition: transform var(--rapido) var(--curva);
  }
  .fijo-movil a:active { transform: scale(.96); }
  body.tiene-fijo { padding-bottom: 5.25rem; }
}

/* ---------- Páginas legales ---------- */
.legal { padding: clamp(2.5rem, 6vw, 4rem) 0 4rem; }
.legal .contenedor { max-width: 46rem; }
.legal h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.legal h2 { font-size: 1.3rem; margin-top: 2rem; }
.legal__fecha { color: var(--texto-suave); font-size: .95rem; }
.legal__volver { display: inline-block; margin-bottom: 2rem; font-weight: 600; color: var(--acento-texto); }
.legal__tabla { overflow-x: auto; }
.legal table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.legal th, .legal td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--linea); vertical-align: top; }

/* Ratón: solo entonces hay hover (en el móvil se quedaría pegado) */
@media (hover: hover) and (pointer: fine) {
  .vx-boton:hover { background: #63e2ad; }
  .vx-boton--linea:hover { background: rgba(255, 255, 255, .06); }
  .demo-dialogo__acciones .vx-boton--linea:hover { background: #f1f3f6; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .demo-dialogo[open] { animation: dialogo-funde 200ms ease both !important; }
  @keyframes dialogo-funde { from { opacity: 0; } }
}

@media print {
  .demo-aviso, .vx-planes, .fijo-movil, .demo-dialogo { display: none !important; }
}

/* ---------- Nota de Veraxis dentro de la demo (en lugar de cajas de aviso grandes) ---------- */
.nota-demo {
  display: flex; gap: .5rem; align-items: baseline; margin: 1rem 0 0; max-width: 70ch;
  font: 400 .875rem/1.45 "IBM Plex Sans", system-ui, sans-serif; color: var(--texto-suave);
}
.nota-demo::before { content: ""; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--vx-menta); transform: translateY(-.05rem); }
.nota-demo strong { color: var(--texto); font-weight: 600; }
.marcos { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.marcos li {
  aspect-ratio: 4 / 3; max-width: 100%; display: grid; place-items: end start; padding: .75rem;
  border-radius: var(--radio); border: 1.5px dashed color-mix(in srgb, var(--texto) 28%, transparent);
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--texto) 5%, transparent) 0 10px, transparent 10px 20px);
}
.marcos span { font: 500 .8rem "IBM Plex Sans", system-ui, sans-serif; color: var(--texto-suave); background: var(--fondo); padding: .15rem .45rem; border-radius: 4px; }
@media (max-width: 40rem) { .marcos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .marcos li:nth-child(3) { display: none; } }

/* ---------- Asistente de ejemplo ---------- */
.asistente-boton {
  position: fixed; z-index: 55; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .6rem 1.1rem; border: 0; border-radius: 999px;
  background: var(--texto); color: var(--fondo); font: 600 .95rem var(--fuente-texto); cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25); transition: transform var(--rapido) var(--curva);
}
.asistente-boton:active { transform: scale(.96); }
.asistente-boton__punto { width: .55rem; height: .55rem; border-radius: 50%; background: #3BD16F; box-shadow: 0 0 0 3px rgba(59, 209, 111, .25); }
.asistente {
  position: fixed; z-index: 56; right: max(1rem, env(safe-area-inset-right)); bottom: max(5rem, calc(env(safe-area-inset-bottom) + 4.25rem));
  width: min(23rem, calc(100vw - 2rem)); max-height: min(34rem, calc(100dvh - 7rem)); display: flex; flex-direction: column;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28); font-family: var(--fuente-texto);
}
.asistente[hidden] { display: none !important; }
.asistente__cabeza { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .85rem 1rem; background: var(--texto); color: var(--fondo); }
.asistente__titulo { margin: 0; font-weight: 700; line-height: 1.2; }
.asistente__sub { margin: 0; font-size: .8rem; opacity: .8; }
.asistente__cerrar { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.asistente__cerrar svg { width: 18px; stroke: currentColor; stroke-width: 2; fill: none; }
.asistente__nota { margin: 0; padding: .55rem 1rem; font: 400 .8rem/1.4 "IBM Plex Sans", system-ui, sans-serif; background: var(--vx-menta-suave); color: var(--vx-tinta); }
.asistente__mensajes { flex: 1; overflow-y: auto; padding: 1rem; display: grid; gap: .6rem; align-content: start; min-height: 9rem; }
.asistente__msg { max-width: 88%; }
.asistente__msg p { margin: 0; padding: .6rem .8rem; border-radius: 14px; white-space: pre-line; font-size: .95rem; line-height: 1.45; }
.asistente__msg--negocio p { background: color-mix(in srgb, var(--texto) 7%, var(--superficie)); border-bottom-left-radius: 4px; }
.asistente__msg--cliente { justify-self: end; }
.asistente__msg--cliente p { background: var(--acento); color: var(--sobre-acento); border-bottom-right-radius: 4px; }
.asistente__accion { display: inline-flex; margin-top: .4rem; min-height: 40px; align-items: center; padding: .4rem .8rem; border-radius: 999px; border: 1px solid var(--linea); color: var(--texto); font-weight: 600; font-size: .9rem; text-decoration: none; }
.asistente__sugerencias { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .6rem; }
.asistente__sugerencias button { border: 1px solid var(--linea); background: var(--superficie); color: var(--texto); border-radius: 999px; padding: .4rem .75rem; min-height: 36px; font: 500 .85rem var(--fuente-texto); cursor: pointer; text-align: left; }
.asistente__form { display: flex; gap: .4rem; padding: .75rem; border-top: 1px solid var(--linea); }
.asistente__form input { flex: 1; min-width: 0; min-height: 44px; padding: .5rem .8rem; border: 1px solid var(--linea); border-radius: 999px; background: var(--superficie); color: var(--texto); font: inherit; }
.asistente__form button { min-height: 44px; padding: .5rem 1rem; border: 0; border-radius: 999px; background: var(--acento); color: var(--sobre-acento); font: 600 .9rem var(--fuente-texto); cursor: pointer; }
@media (max-width: 47.99rem) {
  body.tiene-fijo .asistente-boton { bottom: calc(max(.75rem, env(safe-area-inset-bottom)) + 4.1rem); }
  body.tiene-fijo .asistente { bottom: calc(max(.75rem, env(safe-area-inset-bottom)) + 8.5rem); max-height: calc(100dvh - 11rem); }
}

/* ---------- Reserva con huecos ---------- */
.huecos__texto { color: var(--texto-suave); max-width: 52ch; }
.huecos__panel { margin-top: 1.5rem; display: grid; gap: 1.25rem; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); max-width: 46rem; }
.huecos__fila { display: flex; flex-wrap: wrap; gap: 1rem; }
.huecos__campo { display: grid; gap: .3rem; flex: 1 1 12rem; min-width: 0; }
.huecos__campo label, .huecos__grupo legend { font-weight: 600; font-size: .95rem; }
.huecos__campo select { min-height: 48px; padding: .6rem .8rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); color: var(--texto); font: inherit; }
.huecos__grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.huecos__grupo legend { padding: 0; margin-bottom: .5rem; }
.huecos__dias, .huecos__horas { display: flex; flex-wrap: wrap; gap: .45rem; }
.huecos__dias input, .huecos__horas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.huecos__dias label, .huecos__horas label {
  min-height: 44px; display: inline-flex; align-items: center; padding: .45rem .8rem; border: 1px solid var(--linea); border-radius: var(--radio);
  cursor: pointer; font-weight: 500; font-variant-numeric: tabular-nums; text-transform: capitalize; background: var(--superficie); color: var(--texto);
  transition: background-color var(--rapido), border-color var(--rapido);
}
.huecos__dias input:checked + label, .huecos__horas input:checked + label { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.huecos__dias input:focus-visible + label, .huecos__horas input:focus-visible + label { outline: 3px solid var(--acento-texto); outline-offset: 2px; }
.huecos__horas input:disabled + label { cursor: not-allowed; color: var(--texto-suave); text-decoration: line-through; background: transparent; border-style: dashed; }
.huecos__vacio { margin: 0; color: var(--texto-suave); }
.huecos__pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--linea); }
.huecos__resumen { margin: 0; font-weight: 600; }
.huecos__pie .boton:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Bloque de Veraxis: automatizaciones del sector ---------- */
.vx-extra { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem 3rem; margin: 2rem 0 1rem; }
.vx-extra h3 { font: 600 1.05rem "IBM Plex Sans", system-ui, sans-serif; color: var(--vx-menta); margin: 0 0 .75rem; }
.vx-extra ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.vx-extra li { color: #C5CBD3; font-size: .95rem; line-height: 1.5; padding-left: 1rem; border-left: 2px solid #2A3647; }
.vx-extra strong { display: block; color: #fff; font-weight: 600; }
@media (max-width: 47.99rem) { .vx-extra { grid-template-columns: minmax(0, 1fr); } }

@media (hover: hover) and (pointer: fine) {
  .asistente__sugerencias button:hover, .asistente__accion:hover { border-color: var(--texto); }
  .huecos__dias label:hover, .huecos__horas input:not(:disabled) + label:hover { border-color: var(--texto); }
}
@media print { .asistente-boton, .asistente { display: none !important; } }

/* Redes del negocio en el pie */
.pie-redes { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0; }
.pie-redes a { color: inherit; text-underline-offset: .2em; min-height: 44px; display: inline-flex; align-items: center; }