/* ==========================================================================
   LUMEN DENTAL — portada de la demo de consultorio. 14/10/2026.

   Referencia visual pedida por el dueño: dos diseños de salud claros (un
   "Medical" de fondo blanco, y un "ProHealth" con celestes y vidrio). Lo que se
   toma de ellos, y no es decoración:
     - titular liviano con UNA palabra en azul,
     - foto con una esquina mordida (el hueco donde apoya el botón),
     - tarjeta de vidrio con degradé celeste a lila encima de la foto,
     - tarjetas de servicio con ícono de línea y flecha en la esquina,
     - el bloque de "Reservar" a la vista, no escondido al final.
   Todo en una hoja a mano: no pasa por Tailwind, a propósito, para que cada
   proporción sea la del diseño y no la de una utilidad.
   ========================================================================== */

:root {
  --ink: #1b1f4a;
  --ink-2: #4b5273;
  --ink-3: #7b82a0;
  --azul: #2f63e6;
  --azul-2: #5b8cf8;
  --azul-hondo: #2a63ad;
  --palido: #e6edfd;
  --cielo: #d6eaf8;
  --cielo-2: #eaf4fc;
  --linea: #e1e7f3;
  --fondo: #ffffff;
  --fondo-2: #f4f8fd;
  --vidrio: linear-gradient(150deg, #a9dfe8 0%, #c6c4ec 52%, #ecb9e3 100%);
  --radio: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--ink);
  font: 400 1rem/1.6 "Instrument Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-weight: 400; letter-spacing: -0.03em; margin: 0; }
.az { color: var(--azul); }
.contenedor { width: min(1180px, 100% - 3rem); margin-inline: auto; }

/* ---- cabecera ---- */
.cabecera { position: relative; z-index: 5; padding: 1.1rem 0; }
.cabecera .contenedor { display: flex; align-items: center; gap: 2.5rem; }
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.marca svg { width: 38px; height: 38px; }
.marca span { font: 500 1.65rem/1 "Newsreader", Georgia, serif; letter-spacing: -0.01em; color: var(--ink); }
.nav { display: flex; gap: 1.9rem; font-size: .95rem; }
.nav a { text-decoration: none; color: var(--ink); }
.nav a:hover { color: var(--azul); }
.cabecera .btn-borde { margin-left: auto; }

/* ---- botones ---- */
.btn, .btn-borde, .btn-lleno {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: 500 .95rem/1 "Instrument Sans", system-ui, sans-serif;
  border-radius: 999px; padding: 1rem 1.7rem; text-decoration: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-lleno { border: 0; color: #fff; background: linear-gradient(180deg, var(--azul-2), var(--azul)); box-shadow: 0 10px 22px -10px rgba(47, 99, 230, .65); }
.btn-lleno:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -10px rgba(47, 99, 230, .75); }
.btn-lleno:disabled { opacity: .55; cursor: wait; transform: none; }
.btn-borde { border: 1.5px solid var(--azul); color: var(--azul); background: #fff; padding: .85rem 1.5rem; }
.btn-borde:hover { background: var(--palido); }
.btn-borde.oscuro { border-color: var(--ink); color: var(--ink); }
.btn-borde.oscuro:hover { background: var(--fondo-2); }

/* ---- hero ---- */
.hero { padding: 2.2rem 0 4.5rem; }
.hero .contenedor { display: grid; grid-template-columns: 1.02fr 1fr; gap: 3rem; align-items: center; }
.pildora {
  display: inline-flex; align-items: center; gap: .55rem; font-size: .8rem; color: var(--ink-2);
  background: var(--palido); border-radius: 999px; padding: .5rem .95rem .5rem .6rem;
}
.pildora i { width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.pildora i::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); }
.hero h1 { font-size: clamp(2.7rem, 5.3vw, 4.4rem); line-height: 1.03; margin-top: 1.4rem; max-width: 12ch; }
.hero .bajada { font-size: 1.2rem; line-height: 1.45; color: var(--ink-2); margin: 1.5rem 0 0; max-width: 31rem; }
.hero .acciones { display: flex; gap: .9rem; flex-wrap: wrap; margin-top: 2.2rem; }
.confianza { display: flex; align-items: center; gap: 1rem; margin-top: 3.4rem; padding-top: 1.4rem; border-top: 1px solid var(--linea); max-width: 21rem; }
.confianza .cara { display: flex; }
.confianza .cara img { object-position: center 18%; width: 52px; height: 52px; border-radius: 15px; object-fit: cover; border: 3px solid #fff; box-shadow: 0 6px 16px -8px rgba(27, 31, 74, .4); }
.confianza .cara img:nth-child(2) { margin-left: -14px; transform: rotate(4deg); }
.confianza .cara img:nth-child(1) { transform: rotate(-5deg); }
.confianza p { margin: 0; font-size: .85rem; line-height: 1.4; color: var(--ink-2); }

.foto-hero { position: relative; }
.mordida {
  border-radius: 36px; overflow: hidden; background: var(--cielo);
  }
.foto-hero .mordida { aspect-ratio: 4 / 5; }
.mordida img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }
.vidrio {
  position: absolute; left: -9%; bottom: 7%; width: min(300px, 62%);
  padding: 1.35rem 1.4rem 1.2rem; border-radius: 26px; color: #fff;
  background: var(--vidrio); box-shadow: 0 24px 44px -22px rgba(60, 70, 160, .55);
  border: 1px solid rgba(255, 255, 255, .55);
}
.vidrio .rotulo { display: flex; align-items: center; gap: .5rem; font-size: .85rem; opacity: .95; }
.vidrio .rotulo b { width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.vidrio .rotulo b::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--azul); }
.vidrio h3 { font-size: 1.5rem; line-height: 1.15; margin: .9rem 0 .5rem; font-weight: 500; letter-spacing: -0.02em; }
.vidrio p { margin: 0; font-size: .82rem; line-height: 1.4; opacity: .92; }
.vidrio .pie { display: flex; align-items: center; justify-content: space-between; margin-top: 1.1rem; font-size: 1.05rem; font-weight: 500; }
.vidrio .flecha { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--azul); display: grid; place-items: center; }
.vidrio .flecha svg { width: 18px; height: 18px; }

/* ---- bloque de cómo funciona ---- */
.bloque { padding: 4.5rem 0; }
.bloque .contenedor { display: grid; grid-template-columns: 1fr 1.05fr; gap: 4.5rem; align-items: center; }
.bloque .mordida { aspect-ratio: 5 / 5.6; background: #2a2f9c; }
.bloque h2, .seccion h2 { font-size: clamp(2.1rem, 3.6vw, 3.1rem); line-height: 1.08; }
.bloque .texto > p { color: var(--ink-2); font-size: 1.02rem; margin: 1.3rem 0 0; max-width: 33rem; border-bottom: 1px solid var(--linea); padding-bottom: 1.6rem; }
.lista { list-style: none; padding: 0; margin: 1.7rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
.lista li { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; color: var(--ink); }
.lista li::before {
  content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  border: 1.5px solid var(--ink-2);
  background: no-repeat center / 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.4l2.3 2.3 4.7-5' fill='none' stroke='%231b1f4a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- tratamientos ---- */
.seccion { padding: 4.5rem 0; }
.seccion.celeste { background: linear-gradient(180deg, var(--cielo) 0%, var(--cielo-2) 60%, #fff 100%); }
.encabezado { text-align: center; max-width: 40rem; margin: 0 auto 3rem; }
.encabezado .sobre { display: block; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--azul-hondo); font-weight: 500; margin-bottom: .9rem; }
.encabezado p { color: var(--ink-2); margin: 1rem 0 0; }
.tratamientos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.trat {
  display: block; text-decoration: none; color: inherit; position: relative; background: #fff; border-radius: 22px; padding: 1.8rem 1.7rem 4.6rem;
  box-shadow: 0 18px 40px -26px rgba(42, 99, 173, .35); border: 1px solid rgba(255, 255, 255, .8);
  transition: transform .25s ease, box-shadow .25s ease;
}
.trat:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -24px rgba(42, 99, 173, .45); }
.trat svg.ico { width: 44px; height: 44px; color: var(--azul-hondo); }
.trat h3 { font-size: 1.35rem; margin: 1.1rem 0 .55rem; font-weight: 500; letter-spacing: -0.02em; }
.trat p { margin: 0; color: var(--ink-2); font-size: .92rem; line-height: 1.5; }
.trat .tab {
  position: absolute; right: 0; bottom: 0; width: 84px; height: 56px; border-radius: 22px 0 22px 0;
  background: #a7c1e6; color: #fff; display: grid; place-items: center; transition: background .2s ease;
}
.trat:hover .tab { background: var(--azul-hondo); }
.trat .tab svg { width: 22px; height: 22px; }

/* ---- reservar ---- */
.reservar { padding: 1rem 0 4.5rem; }
.panel {
  background: #fff; border-radius: 28px; padding: 2.2rem 2.4rem 2rem;
  box-shadow: 0 30px 70px -36px rgba(42, 99, 173, .5); border: 1px solid var(--linea);
}
.panel .cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.panel h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.panel .sobre { display: block; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--azul-hondo); font-weight: 500; margin-bottom: .5rem; }
.panel .charla { display: inline-flex; align-items: center; gap: .55rem; }
.campos { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 1rem; align-items: end; }
.campo label { display: block; font-size: .78rem; color: var(--ink-3); margin: 0 0 .4rem .2rem; letter-spacing: .02em; }
.campo select, .campo input {
  width: 100%; min-width: 0; font: inherit; color: var(--ink); background: var(--fondo-2);
  border: 1.5px solid transparent; border-radius: 14px; padding: .95rem 1rem; appearance: none;
  transition: border-color .2s ease, background .2s ease;
}
.campo select { background: var(--fondo-2) no-repeat right 1rem center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237b82a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); padding-right: 2.4rem; }
.campo select:focus, .campo input:focus { outline: none; border-color: var(--azul-2); background: #fff; }
.pie-form { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.3rem; font-size: .85rem; color: var(--ink-3); }
.pie-form p { margin: 0; }
.pie-form a { color: var(--azul); }
#estado { color: var(--ink-2); overflow-wrap: anywhere; }

/* ---- equipo ---- */
.equipo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem; max-width: 880px; margin: 0 auto; }
.medico { background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 22px 46px -30px rgba(42, 99, 173, .45); border: 1px solid var(--linea); }
.medico .retrato { aspect-ratio: 4 / 5; background: var(--cielo-2); overflow: hidden; }
.medico .retrato img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.medico .datos { padding: 1.3rem 1.5rem 1.4rem; }
.medico h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; }
.medico .esp { color: var(--ink-3); font-size: .9rem; margin: .15rem 0 0; }
.medico .franja { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; padding: .75rem 1rem; border-radius: 14px; background: var(--azul-hondo); color: #fff; font-size: .85rem; }
.medico .franja a { color: #fff; text-decoration: none; font-weight: 500; }

/* ---- pie ---- */
.pie-pagina { padding: 2.4rem 0 7rem; border-top: 1px solid var(--linea); }
.pie-pagina .contenedor { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: center; font-size: .85rem; color: var(--ink-3); }
.pie-pagina .aviso { max-width: 38rem; }
.pie-pagina .enlaces { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.pie-pagina .enlaces a { color: var(--ink-2); text-decoration: none; }
.pie-pagina .enlaces a:hover { color: var(--azul); }

/* ---- celular ---- */
@media (max-width: 980px) {
  .nav { display: none; }
  .hero .contenedor, .bloque .contenedor { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero h1 { max-width: 14ch; }
  .foto-hero { margin-inline: auto; width: min(100%, 520px); }
  .vidrio { left: 4%; bottom: -6%; }
  .bloque .mordida { max-width: 540px; }
  .tratamientos { grid-template-columns: 1fr 1fr; }
  .campos { grid-template-columns: 1fr 1fr; }
  .campos .btn-lleno { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .contenedor { width: min(1180px, 100% - 2rem); }
  .cabecera .btn-borde { padding: .75rem 1.1rem; font-size: .85rem; }
  .marca span { font-size: 1.4rem; }
  .hero { padding-bottom: 3rem; }
  .confianza { margin-top: 2.6rem; }
  .lista { grid-template-columns: 1fr; }
  .tratamientos, .equipo { grid-template-columns: 1fr; }
  .panel { padding: 1.6rem 1.2rem; }
  .campos { grid-template-columns: 1fr; }
  .vidrio { bottom: -9%; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---- la chispa de 4 puntas: la marca de "esto lo hace la IA" ----
   Una sola máscara SVG, así toma el color que le toque y se reusa en los botones,
   en la lista y en el chat. */
:root {
  --chispa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1.5c.9 5.8 4.7 9.6 10.5 10.5-5.8.9-9.6 4.7-10.5 10.5C11.100 16.700 7.300 12.900 1.500 12 7.300 11.100 11.100 7.300 12 1.500z'/%3E%3C/svg%3E");
  --chispa-color: linear-gradient(135deg, #4f86f7 0%, #9a8bea 55%, #d68fe0 100%);
}
.chispa {
  display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -0.2em;
  background: var(--chispa-color);
  -webkit-mask: var(--chispa) center / contain no-repeat; mask: var(--chispa) center / contain no-repeat;
}
.btn-borde .chispa { width: 1.2em; height: 1.2em; }
.bajada .chispa { margin-right: .15em; }
.lista li.ia::before {
  border: 0; border-radius: 0; width: 20px; height: 20px; background: var(--chispa-color);
  -webkit-mask: var(--chispa) center / contain no-repeat; mask: var(--chispa) center / contain no-repeat;
}
/* el chat de la página (el widget es del kit, el estilo es de esta página) */
.lw-panel__titulo::before {
  content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin-right: .5em; vertical-align: -0.15em;
  background: linear-gradient(135deg, #bcd3ff, #e7c9f4);
  -webkit-mask: var(--chispa) center / contain no-repeat; mask: var(--chispa) center / contain no-repeat;
}
.lw-lanzador svg { display: none; }
.lw-lanzador::before {
  content: ""; display: block; width: 26px; height: 26px; background: #fff;
  -webkit-mask: var(--chispa) center / contain no-repeat; mask: var(--chispa) center / contain no-repeat;
}
/* ---- calendario real para elegir día y horario ---- */
.reserva-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.4rem; align-items: start; }
.col-hor h3 { font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; margin: 0 0 1rem; }
.cal { margin-top: 1.1rem; background: var(--fondo-2); border-radius: 22px; padding: 1.1rem 1.1rem 1.2rem; }
.cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.cal-cab strong { font-weight: 500; text-transform: capitalize; font-size: 1.02rem; }
.cal-cab button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: var(--azul); font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 10px -6px rgba(27, 31, 74, .35); }
.cal-cab button:disabled { opacity: .35; cursor: default; }
.cal-sem, .cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; text-align: center; }
.cal-sem span { font-size: .72rem; color: var(--ink-3); padding: .2rem 0; }
.dia { aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; color: #aab1c8; font: inherit; font-size: .9rem; cursor: default; padding: 0; }
.dia.libre { background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 4px 10px -8px rgba(27, 31, 74, .5); }
.dia.libre:hover { background: var(--palido); }
.dia.sel, .dia.libre.sel { background: linear-gradient(180deg, var(--azul-2), var(--azul)); color: #fff; }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: .55rem; margin-bottom: 1.3rem; max-height: 216px; overflow: auto; padding: .15rem; }
.horas:empty::before { content: "Elegí un día del calendario para ver los horarios."; grid-column: 1 / -1; color: var(--ink-3); font-size: .9rem; }
.hora { border: 1.5px solid var(--linea); background: #fff; color: var(--ink); border-radius: 12px; padding: .6rem 0; font: inherit; font-size: .92rem; cursor: pointer; transition: border-color .15s ease; }
.hora:hover { border-color: var(--azul-2); }
.hora.sel { background: linear-gradient(180deg, var(--azul-2), var(--azul)); color: #fff; border-color: transparent; }
.datos-dos { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: 1.1rem; }
.col-hor .btn-lleno { width: 100%; }
@media (max-width: 980px) { .reserva-grid { grid-template-columns: 1fr; gap: 1.6rem; } }
@media (max-width: 620px) { .datos-dos { grid-template-columns: 1fr; } }

/* ---- preguntas sugeridas del chat ---- */
.lw-sugerencias { display: flex; flex-wrap: wrap; gap: .45rem; margin: .1rem 0 .5rem; }
.lw-sug { border: 1.5px solid #cbd8f5; background: #fff; color: #2f63e6; border-radius: 999px; padding: .5rem .85rem; font: inherit; font-size: .82rem; line-height: 1.2; cursor: pointer; text-align: left; transition: background .15s ease; }
.lw-sug:hover { background: #eef3ff; }