/*
  kālēa · página en construcción.
  Paleta oficial en oklch (brand book § 3). Tinta sobre fondos claros, Crema
  sobre oscuros, Rayo solo para el destello (botón principal, estado).
*/
:root {
  --espuma: oklch(0.9604 0.0133 179.47);
  --aguamarina: oklch(0.8742 0.0462 187.83);
  --turquesa: oklch(0.7663 0.0864 189.84);
  --mar: oklch(0.5984 0.0881 203.03);
  --rayo: oklch(0.9281 0.1309 97.57);
  --destello: oklch(0.8817 0.0751 79.12);
  --tinta: oklch(0.3348 0.0504 224.58);
  --crema: oklch(0.9768 0.0126 86.83);
  --abismo: oklch(0.3803 0.0595 224.4);
  --rojo: oklch(0.55 0.17 25);

  --display: 'Unbounded', system-ui, sans-serif;
  --body: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --flow: cubic-bezier(0.16, 1, 0.3, 1);
  --wave: cubic-bezier(0.65, 0, 0.35, 1);
  --safe: clamp(1rem, 4vw, 3rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--tinta);
  background: var(--espuma);
  font-family: var(--body);
  font-size: clamp(1rem, 1.05vw, 1.0625rem);
  line-height: 1.6;
  overflow-x: hidden;
}

::selection {
  background: var(--rayo);
  color: var(--tinta);
}

a {
  color: inherit;
}

h1,
h2,
p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: 2px solid var(--mar);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ——— El agua ——— */

.ocean {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(
    to bottom in oklab,
    var(--espuma) 0%,
    var(--aguamarina) 55%,
    var(--turquesa) 100%
  );
}

/*
  En la portada el degradado es el del descenso (brand book § 3) y cuatro
  veces más alto que la pantalla: el JS lo desplaza con --depth. Es lo que se
  ve sin WebGL; con WebGL, el lienzo lo tapa.
*/
.landing .ocean {
  background: linear-gradient(
    to bottom in oklab,
    var(--espuma) 0%,
    var(--aguamarina) 20%,
    var(--turquesa) 40%,
    var(--mar) 60%,
    var(--abismo) 85%,
    var(--tinta) 100%
  );
  background-size: 100% 400%;
  background-position: 50% calc(var(--depth, 0) * 100%);
}

.water {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1600ms var(--flow);
}

.has-water .water {
  opacity: 1;
}

/* Rayos en CSS: solo cuando no hay agua en WebGL. */
.rays {
  position: absolute;
  inset: -20% -10% 0;
  filter: blur(18px);
  mix-blend-mode: soft-light;

  .has-water & {
    display: none;
  }

  i {
    position: absolute;
    top: 0;
    width: 9vw;
    height: 120%;
    background: linear-gradient(to bottom in oklab, oklch(1 0 0 / 0.85), transparent 80%);
    transform-origin: top center;
    animation: sway 11s var(--wave) infinite alternate;
  }

  i:nth-child(1) { left: 12%; transform: rotate(14deg); animation-duration: 13s; }
  i:nth-child(2) { left: 30%; width: 5vw; transform: rotate(9deg); animation-delay: -4s; }
  i:nth-child(3) { left: 52%; width: 12vw; transform: rotate(6deg); animation-duration: 15s; }
  i:nth-child(4) { left: 70%; width: 6vw; transform: rotate(2deg); animation-delay: -7s; }
  i:nth-child(5) { left: 86%; width: 8vw; transform: rotate(-3deg); animation-duration: 12s; }
}

@keyframes sway {
  from { translate: -2vw 0; opacity: 0.55; }
  to { translate: 2vw 0; opacity: 1; }
}

/* ——— Cabecera ——— */

.top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem var(--safe);
}

.wordmark {
  font-family: var(--display);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  text-decoration: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid oklch(0.9768 0.0126 86.83 / 0.7);
  border-radius: 999px;
  background: oklch(0.9768 0.0126 86.83 / 0.6);
  backdrop-filter: blur(14px);
  font-weight: 600;
  text-decoration: none;

  svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
  }
}

/* ——— 0 m · La superficie ——— */

main {
  flex: 1;
}

.hero {
  position: relative;
  display: grid;
  gap: 2.5rem;
  align-items: center;
  max-width: 80rem;
  min-height: calc(100svh - 5.5rem);
  margin: 0 auto;
  padding: clamp(0.5rem, 3vw, 2rem) var(--safe) 5rem;

  @media (min-width: 900px) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3vw;
  }
}

.hero-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 1rem;
  border: 1px solid oklch(0.3348 0.0504 224.58 / 0.15);
  border-radius: 999px;
  background: oklch(0.9768 0.0126 86.83 / 0.55);
  backdrop-filter: blur(10px);
  font-size: 0.9rem;
  font-weight: 500;
}

.dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--rayo);
  box-shadow: 0 0 0 0 oklch(0.9281 0.1309 97.57 / 0.8);
  animation: pulse 2.2s var(--flow) infinite;
}

@keyframes pulse {
  to { box-shadow: 0 0 0 0.6rem oklch(0.9281 0.1309 97.57 / 0); }
}

/* Titular de marca: Unbounded en minúscula, contenido (nada de tamaño "mega"). */
h1 {
  max-width: 13ch;
  font-family: var(--display);
  font-size: clamp(2.3rem, 4.7vw, 4.4rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.lead {
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.35vw, 1.2rem);
  line-height: 1.55;
}

/* El analizador: una píldora de cristal; al analizar, la misma caja pasa a ser
   la barra de progreso (dos líneas, como los macrones de kālēa). */
.audit {
  position: relative;
  width: min(100%, 36rem);
  margin-top: 0.5rem;
}

/* Mientras analiza, la nota de abajo deja sitio a la caja de progreso, que es más alta. */
.hero-text:has(.audit[data-state='busy']) .fine {
  opacity: 0;
  transition: opacity 300ms var(--flow);
}

.audit-field {
  display: flex;
  padding: 0.4rem;
  border: 1px solid oklch(0.9768 0.0126 86.83 / 0.8);
  border-radius: 999px;
  background: oklch(0.9768 0.0126 86.83 / 0.85);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 48px -28px oklch(0.3348 0.0504 224.58 / 0.6);
  transition:
    opacity 350ms var(--flow),
    transform 600ms var(--flow),
    visibility 0s 350ms;

  input {
    flex: 1;
    min-width: 0;
    padding: 0 1.1rem;
    border: 0;
    background: transparent;
    color: var(--tinta);
    font: inherit;
    font-size: 1.05rem;

    &:focus {
      outline: none;
    }
  }

  &:focus-within {
    outline: 2px solid var(--mar);
    outline-offset: 2px;
  }

  button {
    flex-shrink: 0;
    height: 3.1rem;
    padding: 0 1.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--rayo);
    color: var(--tinta);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: transform 250ms var(--flow);

    &:hover {
      transform: translateY(-2px);
    }
  }

  @media (max-width: 480px) {
    flex-direction: column;
    gap: 0.4rem;
    border-radius: 1.6rem;

    input {
      height: 3rem;
    }
  }
}

.audit-progress {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.4rem;
  border: 1px solid oklch(0.9768 0.0126 86.83 / 0.8);
  border-radius: 1.6rem;
  background: oklch(0.9768 0.0126 86.83 / 0.9);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 48px -28px oklch(0.3348 0.0504 224.58 / 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 350ms var(--flow),
    transform 700ms var(--flow),
    visibility 0s 350ms;

  p {
    font-size: 0.95rem;
  }

  b {
    font-weight: 600;
    word-break: break-all;
  }
}

.progress-step {
  opacity: 0.75;
}

.audit[data-state='busy'] {
  .audit-field {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.97);
  }

  .audit-progress {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 500ms var(--flow) 150ms,
      transform 800ms var(--flow) 150ms,
      visibility 0s;
  }
}

.macron-bar {
  display: grid;
  gap: 4px;

  i {
    position: relative;
    display: block;
    height: 3px;
    overflow: hidden;
    border-radius: 3px;
    background: oklch(0.3348 0.0504 224.58 / 0.12);
  }

  /* La primera línea es el progreso; la segunda, más corta, es luz que pasa. */
  i:first-child::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg in oklab, var(--mar), var(--turquesa));
    transform: scaleX(var(--p, 0));
    transform-origin: left;
    transition: transform 700ms var(--flow);
  }

  i:last-child {
    width: 60%;
  }

  i:last-child::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg in oklab, transparent, oklch(0.9281 0.1309 97.57), transparent);
    transform: translateX(-100%);
    animation: glint 1600ms var(--wave) infinite;
  }
}

@keyframes glint {
  to { transform: translateX(100%); }
}

.form-error {
  color: var(--rojo);
  font-size: 0.9rem;
  font-weight: 500;

  a {
    color: var(--tinta);
    font-weight: 600;
  }
}

.fine {
  max-width: 46ch;
  font-size: 0.85rem;
  opacity: 0.75;
}

.turnstile:empty {
  display: none;
}

/* El escenario: el símbolo de cristal en el centro y una órbita inclinada con
   las cuatro áreas. La mitad delantera del anillo pasa por delante de la K. */
.stage {
  position: relative;
  justify-self: center;
  width: min(100%, 34rem);
  aspect-ratio: 1;
  touch-action: pan-y;

  @media (max-width: 899px) {
    width: min(92%, 26rem);
    margin-top: -1rem;
  }
}

.halo {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 46% in oklab,
    oklch(0.9768 0.0126 86.83 / 0.85),
    oklch(0.9768 0.0126 86.83 / 0.2) 46%,
    transparent 70%
  );
  filter: blur(8px);
}

.symbol {
  position: absolute;
  inset: 15%;
  z-index: 2;
  transform: translate3d(var(--sx, 0px), var(--sy, 0px), 0) rotate(var(--sr, 0deg));
  animation: float 7s var(--wave) infinite alternate;

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 34px 38px oklch(0.3348 0.0504 224.58 / 0.28));
  }
}

@keyframes float {
  from { translate: 0 -2.5%; }
  to { translate: 0 2.5%; }
}

/* Destello: un barrido de luz Rayo que recorre solo el cristal del símbolo. */
.sweep {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 38%,
    oklch(0.9281 0.1309 97.57 / 0.85) 48%,
    oklch(1 0 0 / 0.9) 50%,
    oklch(0.9281 0.1309 97.57 / 0.85) 52%,
    transparent 62%
  );
  background-size: 300% 100%;
  background-position: 120% 0;
  mix-blend-mode: screen;
  opacity: 0;
  -webkit-mask: url('/assets/img/simbolo-kalea-512.webp') center / contain no-repeat;
  mask: url('/assets/img/simbolo-kalea-512.webp') center / contain no-repeat;

  &.flash {
    animation: sweep 1400ms var(--flow);
  }
}

@keyframes sweep {
  0% { background-position: 120% 0; opacity: 1; }
  80% { opacity: 1; }
  100% { background-position: -20% 0; opacity: 0; }
}

.orbit {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 33.3%;
  overflow: visible;
  translate: 0 -50%;
  rotate: -12deg;

  ellipse {
    fill: none;
    stroke: oklch(0.9768 0.0126 86.83 / 0.75);
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
  }

  &.back {
    z-index: 1;
    opacity: 0.6;
  }

  &.front {
    z-index: 3;
    clip-path: inset(50% -5% -5% -5%);
  }
}

.chip {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  padding: 0.45rem 1rem;
  border: 1px solid oklch(0.9768 0.0126 86.83 / 0.85);
  border-radius: 999px;
  background: oklch(0.9768 0.0126 86.83 / 0.88);
  backdrop-filter: blur(10px);
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  translate: -50% -50%;
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scale(var(--s, 1));
  opacity: var(--o, 1);
  transition:
    background-color 500ms var(--flow),
    color 500ms var(--flow),
    box-shadow 500ms var(--flow);

  /* Área ya revisada durante un análisis: se enciende un momento. */
  &[data-on] {
    border-color: transparent;
    background: var(--tinta);
    color: var(--crema);
    box-shadow:
      0 0 0 4px oklch(0.9281 0.1309 97.57 / 0.35),
      0 0 28px oklch(0.9281 0.1309 97.57 / 0.55);
  }
}

/* Sin JS, los chips se quedan quietos en la órbita. */
.chip:nth-of-type(1) { --x: -40%; --y: -10%; }
.chip:nth-of-type(2) { --x: 140%; --y: -30%; }
.chip:nth-of-type(3) { --x: 110%; --y: 260%; }
.chip:nth-of-type(4) { --x: -260%; --y: 190%; }

.dive {
  position: absolute;
  bottom: 1.75rem;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  translate: -50% 0;
  opacity: 0.8;

  @media (max-width: 899px) {
    display: none;
  }
}

.macron-lines {
  display: grid;
  justify-items: center;
  gap: 4px;

  i {
    display: block;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    animation: dive 2.4s var(--wave) infinite;
  }

  i:last-child {
    width: 18px;
    animation-delay: 0.25s;
  }
}

@keyframes dive {
  0% { transform: translateY(-4px); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(10px); opacity: 0; }
}

/* Entrada de la portada: el único momento orquestado al cargar. El titular
   sube palabra a palabra y el símbolo emerge del agua. Mientras llega el JS,
   los dos esperan ocultos; si no llega, aparecen igual a los 1,2 s. */
@media (prefers-reduced-motion: no-preference) {
  .landing h1,
  .landing .stage {
    animation: appear 1ms 1.2s both;
  }
}

@keyframes appear {
  from { opacity: 0; }
}

.motion {
  h1 {
    animation: none;
  }

  h1 .w {
    display: inline-block;
    animation: word-in 1100ms var(--flow) both;
    animation-delay: calc(150ms + var(--i) * 70ms);
  }

  .stage {
    animation: emerge 1600ms var(--flow) 350ms both;
  }
}

@keyframes word-in {
  from { opacity: 0; transform: translateY(0.45em); }
}

@keyframes emerge {
  from { opacity: 0; transform: translateY(40px) scale(0.94); }
}

/* ——— A media agua: los servicios, en burbujas ——— */

.current {
  position: relative;
  display: grid;
  gap: 2rem 4vw;
  max-width: 80rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vh, 4.5rem) var(--safe);

  @media (min-width: 900px) {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
  }
}

.current-text {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;

  /* Arriba, no centrado en la pecera: menos hueco después de la portada. */
  @media (min-width: 900px) {
    align-self: start;
    padding-top: clamp(1rem, 7vh, 4.5rem);
  }

  h2 {
    font-family: var(--display);
    font-size: clamp(1.9rem, 3.4vw, 3.1rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
  }

  p {
    max-width: 30ch;
    font-size: clamp(1.2rem, 1.7vw, 1.5rem);
    line-height: 1.42;
    letter-spacing: -0.01em;
  }

  .hint {
    font-size: 0.95rem;
    letter-spacing: 0;
    opacity: 0.75;
  }
}

/* Al pasar el umbral de Mar, lo que queda arriba cambia a Crema. */
.current {
  transition: color 700ms var(--flow);

  .is-deep & {
    color: var(--crema);
  }
}

.is-deep .bubble:not([data-open]) {
  color: var(--crema);
}

/* Texto que se enciende palabra a palabra al bajar. */
[data-light] .w {
  opacity: 0.2;
  transition: opacity 600ms var(--flow);

  &.on {
    opacity: 1;
  }
}

/*
  Sin JS (o con el movimiento reducido) las burbujas se quedan quietas en
  filas. Con JS, .live las suelta: cada una sube por su carril.
*/
.tank {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;

  &.live {
    position: relative;
    display: block;
    height: clamp(26rem, 68vh, 38rem);
    -webkit-mask: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
    mask: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);

    li {
      display: contents;
    }

    .bubble {
      position: absolute;
      top: 0;
      left: 0;
      translate: -50% -50%;
      will-change: transform;
    }
  }
}

.bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: var(--d, 8.5rem);
  aspect-ratio: 1;
  padding: 1rem;
  border: 1px solid oklch(0.9768 0.0126 86.83 / 0.85);
  border-radius: 50%;
  color: var(--tinta);
  background:
    radial-gradient(circle at 30% 24% in oklab, oklch(1 0 0 / 0.9) 0 3%, oklch(1 0 0 / 0) 16%),
    radial-gradient(circle at 50% 50% in oklab, oklch(0.9768 0.0126 86.83 / 0.26) 50%, oklch(0.9768 0.0126 86.83 / 0.68) 100%);
  box-shadow:
    inset 0 -14px 26px oklch(0.5984 0.0881 203.03 / 0.18),
    0 24px 40px -26px oklch(0.3348 0.0504 224.58 / 0.45);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition:
    width 650ms var(--flow),
    background-color 400ms var(--flow);

  b {
    font-size: clamp(0.82rem, 1vw, 1.02rem);
    font-weight: 600;
    line-height: 1.15;
    hyphens: auto;
  }

  small,
  em {
    display: none;
  }

  @media (max-width: 559px) {
    padding: 0.6rem;

    /* Quietas en filas (sin JS o con movimiento reducido): algo más pequeñas en el móvil. */
    .tank:not(.live) & {
      width: calc(var(--d, 8.5rem) * 0.82);
    }
  }

  small {
    max-width: 17ch;
    font-size: 0.84rem;
    line-height: 1.35;
  }

  em {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  &:focus-visible {
    outline: 2px solid var(--tinta);
    outline-offset: 3px;
  }

  /* Abierta: se para, crece y dice qué incluye. */
  &[data-open] {
    z-index: 5;
    width: max(var(--d, 8.5rem), 13.5rem);
    background-color: oklch(0.9768 0.0126 86.83 / 0.9);

    small,
    em {
      display: block;
      animation: appear 500ms var(--flow) both;
    }
  }
}

/* ——— El fondo: hablar con Luz ——— */

/* Capa propia hacia Tinta: el texto Crema tiene contraste aunque no haya WebGL. */
.deep {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: clamp(5rem, 13vh, 8rem);
  color: var(--crema);
  background: linear-gradient(
    to bottom in oklab,
    transparent,
    oklch(0.3348 0.0504 224.58 / 0.6) 22%,
    oklch(0.3348 0.0504 224.58 / 0.88) 62%,
    oklch(0.3348 0.0504 224.58 / 0.94)
  );

  ::selection {
    background: var(--rayo);
    color: var(--tinta);
  }

  :focus-visible {
    outline-color: var(--rayo);
  }
}

.deep-inner {
  display: grid;
  gap: 2rem 6vw;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 var(--safe);

  @media (min-width: 900px) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
  }

  h2 {
    max-width: 13ch;
    font-family: var(--display);
    font-size: clamp(1.9rem, 3.6vw, 3.3rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.035em;
  }

  p {
    max-width: 32ch;
    font-size: clamp(1.2rem, 1.7vw, 1.5rem);
    line-height: 1.45;
  }

  .talk-actions {
    margin-top: 1.75rem;
  }

  .ghost {
    border-color: oklch(0.9768 0.0126 86.83 / 0.4);
    color: var(--crema);
  }

  .primary {
    box-shadow: 0 14px 44px -14px oklch(0.9281 0.1309 97.57 / 0.7);
  }
}

.sign {
  width: 100%;
  max-width: 80rem;
  margin: clamp(3rem, 8vh, 5rem) auto 0;
  padding: 0 var(--safe);
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 300;
  letter-spacing: -0.01em;
  opacity: 0.85;
}

.magnetic {
  transition: transform 450ms var(--flow);
}

.talk-actions {
  display: flex;
  gap: 0.75rem;

  .button {
    white-space: nowrap;
  }

  /* En el móvil, los dos botones en una sola fila y a todo el ancho
     (solo bajan a dos filas en pantallas de menos de ~330 px). */
  @media (max-width: 479px) {
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;

    .button {
      flex: 1 1 auto;
      padding: 0 0.9rem;
      font-size: 0.9375rem;
    }
  }
}

@media (max-width: 479px) {
  .wide-only {
    display: none;
  }
}

/* Lenis (scroll suave), sus reglas mínimas. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 3.1rem;
  padding: 0 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 250ms var(--flow);

  svg {
    flex-shrink: 0;
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
  }

  &:hover {
    transform: translateY(-2px);
  }
}

.primary {
  background: var(--rayo);
  color: var(--tinta);
}

.ghost {
  border-color: oklch(0.3348 0.0504 224.58 / 0.3);
  background: transparent;
  color: var(--tinta);
}

.wide {
  width: 100%;
}

.bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1.5rem var(--safe);
  color: var(--crema);
  background: oklch(0.3348 0.0504 224.58 / 0.85);
  font-size: 0.9rem;

  nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
  }

  /* En la portada el pie ya está en el fondo marino. */
  .deep & {
    width: 100%;
    max-width: 80rem;
    margin: 2rem auto 0;
    background: transparent;
    border-top: 1px solid oklch(0.9768 0.0126 86.83 / 0.15);
  }
}

/* ——— Ventanas (análisis, informe, contacto) ——— */

.sheet {
  width: min(100% - 1.5rem, 52rem);
  max-height: min(100dvh - 1.5rem, 56rem);
  padding: 0;
  border: 1px solid oklch(0.9768 0.0126 86.83 / 0.8);
  border-radius: 1.75rem;
  color: var(--tinta);
  background: var(--crema);
  box-shadow: 0 50px 100px -40px oklch(0.3348 0.0504 224.58 / 0.7);

  &::backdrop {
    background: oklch(0.3348 0.0504 224.58 / 0.5);
    backdrop-filter: blur(8px);
  }

  /* El informe emerge del agua. */
  &[open] {
    animation: open 900ms var(--flow);
  }
}

.small {
  width: min(100% - 1.5rem, 32rem);
}

@keyframes open {
  from { opacity: 0; transform: translateY(16vh) scale(0.96); }
}

.close {
  position: sticky;
  top: 0.75rem;
  float: right;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0.75rem 0.75rem 0 0;
  border: 0;
  border-radius: 50%;
  background: oklch(0.3348 0.0504 224.58 / 0.08);
  color: var(--tinta);
  cursor: pointer;

  svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }
}

.sheet-body,
.contact {
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

.sheet h2 {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.muted {
  opacity: 0.7;
}

/* Informe. */
.report-head {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  margin-top: 0.5rem;

  @media (min-width: 640px) {
    grid-template-columns: auto 1fr;
  }
}

.ring {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--size, 8rem);
  aspect-ratio: 1;

  svg {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
  }

  circle {
    fill: none;
    stroke-width: 8;
  }

  .track {
    stroke: oklch(0.3348 0.0504 224.58 / 0.1);
  }

  .value {
    stroke-linecap: round;
    transition: stroke-dashoffset 1200ms var(--flow);
  }

  b {
    font-family: var(--display);
    font-size: calc(var(--size, 8rem) * 0.28);
    font-weight: 700;
    letter-spacing: -0.03em;
  }
}

.report-url {
  font-size: 0.875rem;
  font-weight: 500;
  word-break: break-all;
  opacity: 0.7;
}

.summary {
  margin-top: 0.5rem;
  font-size: 1.05rem;
  line-height: 1.55;
}

.areas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.75rem 0;

  @media (min-width: 640px) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 0.5rem;
    border-radius: 1.1rem;
    background: oklch(0.3348 0.0504 224.58 / 0.05);
    font-size: 0.875rem;
    font-weight: 600;

    small {
      margin-top: -0.3rem;
      font-size: 0.75rem;
      font-weight: 500;
      opacity: 0.7;
    }
  }
}

.report-cols {
  display: grid;
  gap: 1.75rem;

  /* La columna de la captura solo existe si PageSpeed la ha devuelto. */
  @media (min-width: 720px) {
    &:has(.shot) {
      grid-template-columns: minmax(0, 1fr) 12rem;
    }
  }
}

.shot {
  overflow: hidden;
  align-self: start;
  border: 6px solid var(--tinta);
  border-radius: 1.4rem;
  box-shadow: 0 24px 48px -24px oklch(0.3348 0.0504 224.58 / 0.6);

  @media (max-width: 719px) {
    width: 12rem;
    margin: 0 auto;
  }
}

.issues h3,
.strengths h3 {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

.issue {
  padding: 1rem 0;
  border-top: 1px solid oklch(0.3348 0.0504 224.58 / 0.12);

  p {
    margin-top: 0.3rem;
    font-size: 0.95rem;
    line-height: 1.5;
  }
}

.issue-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.6rem;

  b {
    font-weight: 600;
  }
}

.tag {
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: oklch(0.3348 0.0504 224.58 / 0.08);
  font-size: 0.75rem;
  font-weight: 600;
}

.tag.critico {
  background: oklch(0.55 0.17 25 / 0.12);
  color: oklch(0.45 0.15 25);
}

.fix {
  opacity: 0.85;

  strong {
    font-weight: 600;
  }
}

.strengths {
  margin-top: 1.5rem;

  ul {
    margin: 0;
    padding-left: 1.1rem;
  }

  li {
    margin-bottom: 0.35rem;
  }
}

.report-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: 1.4rem;
  color: var(--crema);
  background: var(--tinta);

  h3 {
    margin: 0;
    font-family: var(--display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  p {
    margin-top: 0.3rem;
    font-size: 0.95rem;
    opacity: 0.85;
  }

  .ghost {
    border-color: oklch(0.9768 0.0126 86.83 / 0.4);
    color: var(--crema);
  }

  /* Dentro del informe hay menos ancho: botones algo más compactos para que
     sigan en una fila hasta en móviles de 360 px. */
  @media (max-width: 479px) {
    padding: 1.25rem 0.875rem;

    .talk-actions .button {
      padding: 0 0.8rem;
      font-size: 0.875rem;
    }
  }
}

.disclaimer {
  margin-top: 1rem;
  font-size: 0.8rem;
  opacity: 0.65;
}

/* Formulario de contacto. */
.contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
  }

  input:not([type='checkbox']),
  textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid oklch(0.3348 0.0504 224.58 / 0.2);
    border-radius: 0.8rem;
    color: var(--tinta);
    background: oklch(1 0 0 / 0.6);
    font: inherit;
    font-weight: 400;
    resize: vertical;

    &:focus {
      border-color: var(--mar);
      outline: 2px solid oklch(0.5984 0.0881 203.03 / 0.3);
    }
  }

  .pair {
    display: grid;
    gap: 1rem;

    @media (min-width: 520px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  .consent {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.6rem;
    font-weight: 400;
    line-height: 1.45;

    input {
      flex-shrink: 0;
      width: 1.05rem;
      height: 1.05rem;
      margin-top: 0.15rem;
      accent-color: var(--mar);
    }
  }
}

.trap {
  position: absolute;
  left: -9999px;
}

/* ——— Páginas legales ——— */

.legal {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem var(--safe) 4rem;

  h1 {
    max-width: none;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    margin-bottom: 1.5rem;
  }

  h2 {
    margin: 2rem 0 0.5rem;
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 700;
  }

  p,
  li {
    max-width: 62ch;
  }

  p + p {
    margin-top: 0.75rem;
  }
}

/* ——— Dos herramientas: selector ——— */

.modes {
  display: inline-flex;
  gap: 0.25rem;
  margin-top: 0.25rem;
  padding: 0.3rem;
  border: 1px solid oklch(0.9768 0.0126 86.83 / 0.75);
  border-radius: 999px;
  background: oklch(0.9768 0.0126 86.83 / 0.45);
  backdrop-filter: blur(12px);

  button {
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 999px;
    color: var(--tinta);
    background: transparent;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition:
      background-color 300ms var(--flow),
      box-shadow 300ms var(--flow);

    &[aria-selected='true'] {
      background: var(--crema);
      box-shadow: 0 8px 20px -12px oklch(0.3348 0.0504 224.58 / 0.5);
    }

    &:focus-visible {
      outline: 2px solid var(--mar);
      outline-offset: 2px;
    }
  }

  @media (max-width: 420px) {
    button {
      padding: 0.5rem 0.75rem;
      font-size: 0.86rem;
    }
  }
}

/* ——— «¿Te recomienda la IA?»: el formulario se lee como la pregunta ——— */

.ia-form {
  /* Por encima de lo que viene después: el desplegable de sugerencias sobresale de la caja. */
  position: relative;
  z-index: 3;
  display: grid;
  gap: 0.6rem;
  width: min(100%, 36rem);
  padding: 0.9rem 1rem 1rem;
  border: 1px solid oklch(0.9768 0.0126 86.83 / 0.8);
  border-radius: 1.6rem;
  background: oklch(0.9768 0.0126 86.83 / 0.85);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 48px -28px oklch(0.3348 0.0504 224.58 / 0.6);

  &[hidden] {
    display: none;
  }

  button {
    justify-self: start;
    height: 3.1rem;
    padding: 0 1.4rem;
    border: 0;
    border-radius: 999px;
    color: var(--tinta);
    background: var(--rayo);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: transform 250ms var(--flow);

    &:hover {
      transform: translateY(-2px);
    }

    &:disabled {
      opacity: 0.6;
      cursor: progress;
    }

    @media (max-width: 480px) {
      justify-self: stretch;
    }
  }
}

.ia-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
}

.ia-field {
  display: flex;
  flex: 1 1 12rem;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 1.05rem;
  font-weight: 500;

  &.wide {
    flex-basis: 100%;
  }

  span {
    flex-shrink: 0;
    opacity: 0.75;
  }

  input {
    flex: 1;
    min-width: 0;
    padding: 0.3rem 0.1rem;
    border: 0;
    border-bottom: 2px solid oklch(0.3348 0.0504 224.58 / 0.2);
    border-radius: 0;
    color: var(--tinta);
    background: transparent;
    font: inherit;
    font-weight: 600;

    &::placeholder {
      font-weight: 500;
      opacity: 0.45;
    }

    &:focus {
      border-bottom-color: var(--mar);
      outline: none;
    }
  }
}

/* Nombre del negocio con sugerencias de Google Maps. */
.ia-combo {
  position: relative;

  > label {
    flex-shrink: 0;
    opacity: 0.75;
  }
}

.ia-suggest {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  left: 0;
  z-index: 10;
  overflow: hidden;
  border: 1px solid oklch(0.3348 0.0504 224.58 / 0.12);
  border-radius: 1rem;
  background: var(--crema);
  box-shadow: 0 24px 48px -20px oklch(0.3348 0.0504 224.58 / 0.5);
  font-size: 0.95rem;

  &[hidden] {
    display: none;
  }

  ul {
    max-height: 17rem;
    margin: 0;
    padding: 0.3rem;
    overflow-y: auto;
    list-style: none;
  }

  li {
    display: grid;
    gap: 0.1rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.7rem;
    cursor: pointer;

    &[aria-selected='true'],
    &:hover {
      background: oklch(0.3348 0.0504 224.58 / 0.07);
    }

    b {
      font-weight: 600;
    }

    span {
      font-size: 0.82rem;
      opacity: 0.7;
    }

    &.none {
      border-top: 1px solid oklch(0.3348 0.0504 224.58 / 0.08);
      border-radius: 0 0 0.7rem 0.7rem;
    }
  }
}

/* Atribución que piden las condiciones de Google al mostrar sus sugerencias. */
.ia-google {
  padding: 0.35rem 0.9rem 0.5rem;
  font-size: 0.75rem;
  text-align: right;
  opacity: 0.65;
}

.ia-picked {
  flex-basis: 100%;
  margin-top: -0.2rem;
  font-size: 0.85rem;
  opacity: 0.75;

  &[hidden] {
    display: none;
  }
}

.ia-place {
  margin-bottom: 0.4rem;
  font-size: 0.92rem;
  line-height: 1.5;

  b,
  a {
    font-weight: 600;
  }
}

/* ——— Informe de «¿Te recomienda la IA?» ——— */

.ia-question {
  margin: 0.5rem 0 1.25rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--mar);
  border-radius: 0 1rem 1rem 0;
  background: oklch(0.3348 0.0504 224.58 / 0.05);
  font-family: var(--display);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.ia-asked {
  margin-top: 0.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0.75;
}

.ia-phase {
  margin-top: 1rem;

  &[hidden] {
    display: none;
  }
}

.ia-status {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 600;

  .typing {
    padding: 0;
  }
}

.ia-searches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;

  &:empty {
    display: none;
  }

  li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    background: oklch(0.3348 0.0504 224.58 / 0.07);
    font-size: 0.85rem;
    animation: appear 400ms var(--flow) both;
  }

  svg {
    width: 0.9rem;
    height: 0.9rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }
}

.ia-answer {
  margin-top: 0.9rem;
  font-size: 0.98rem;
  line-height: 1.6;

  &:empty {
    display: none;
  }

  p + p,
  p + ul,
  ul + p {
    margin-top: 0.6rem;
  }

  ul {
    margin: 0;
    padding-left: 1.2rem;
  }

  strong {
    font-weight: 600;
  }
}

.ia-verdict {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  align-items: center;
  margin: 0.5rem 0 1.5rem;
  padding: 1.25rem;
  border-radius: 1.4rem;
  background: oklch(0.3348 0.0504 224.58 / 0.05);

  > b {
    display: grid;
    place-items: center;
    width: 5.5rem;
    aspect-ratio: 1;
    border: 6px solid oklch(0.3348 0.0504 224.58 / 0.12);
    border-radius: 50%;
    font-family: var(--display);
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -0.04em;
  }

  &[data-appears='true'] > b {
    border-color: var(--mar);
    box-shadow: 0 0 34px oklch(0.9281 0.1309 97.57 / 0.55);
  }

  h3 {
    font-family: var(--display);
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  @media (max-width: 480px) {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

.ia-list {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding-left: 1.4rem;

  li {
    padding-left: 0.2rem;
  }

  li::marker {
    font-weight: 700;
  }

  b {
    display: block;
    font-weight: 600;
  }

  span {
    font-size: 0.92rem;
    opacity: 0.85;
  }

  /* El negocio del cliente, si aparece. */
  .you {
    margin-left: -0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.8rem;
    background: oklch(0.9281 0.1309 97.57 / 0.35);
  }
}

.issues + .issues {
  margin-top: 1.5rem;
}

.ia-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.75rem 0;
  border-top: 1px solid oklch(0.3348 0.0504 224.58 / 0.12);

  .tag {
    justify-self: start;
  }

  b {
    font-weight: 600;
  }

  p {
    margin-top: 0.15rem;
    font-size: 0.92rem;
    line-height: 1.45;
  }

  @media (max-width: 480px) {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}

.tag.bien {
  background: oklch(0.5984 0.0881 203.03 / 0.16);
}

.tag.mejorable {
  background: oklch(0.75 0.13 80 / 0.25);
}

.ia-full {
  margin-top: 1.75rem;
  padding: 0.9rem 1.1rem;
  border-radius: 1.1rem;
  background: oklch(0.3348 0.0504 224.58 / 0.04);

  summary {
    font-weight: 600;
    cursor: pointer;
  }

  .muted {
    margin-top: 1rem;
    font-size: 0.85rem;
  }
}

.ia-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin: 0.35rem 0 0;
  padding: 0;
  font-size: 0.85rem;
  list-style: none;
}

/* ——— Asistente (chat en la esquina) ——— */

.assistant-launcher {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: 3.5rem;
  padding: 0 1.25rem 0 0.45rem;
  border: 1px solid oklch(0.9768 0.0126 86.83 / 0.85);
  border-radius: 999px;
  color: var(--tinta);
  background: oklch(0.9768 0.0126 86.83 / 0.88);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 40px -18px oklch(0.3348 0.0504 224.58 / 0.55);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 300ms var(--flow),
    opacity 300ms var(--flow);

  img {
    width: 2.6rem;
    height: 2.6rem;
    object-fit: contain;
  }

  &:hover {
    transform: translateY(-2px);
  }

  /* En el móvil, solo el símbolo; con el chat abierto (a pantalla completa) se esconde. */
  @media (max-width: 640px) {
    padding: 0 0.45rem;

    span {
      display: none;
    }

    .assistant-open & {
      opacity: 0;
      pointer-events: none;
    }
  }
}

.assistant-panel {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.25rem);
  z-index: 41;
  display: flex;
  flex-direction: column;
  width: min(24.5rem, calc(100vw - 2rem));
  height: min(38rem, calc(100dvh - 7rem));
  overflow: hidden;
  border: 1px solid oklch(0.9768 0.0126 86.83 / 0.9);
  border-radius: 1.5rem;
  color: var(--tinta);
  background: oklch(0.9768 0.0126 86.83 / 0.95);
  backdrop-filter: blur(20px);
  box-shadow: 0 40px 80px -30px oklch(0.3348 0.0504 224.58 / 0.6);
  transform-origin: bottom right;
  animation: assistant-in 450ms var(--flow);

  &[hidden] {
    display: none;
  }

  @media (max-width: 640px) {
    inset: 0;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@keyframes assistant-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
}

.assistant-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid oklch(0.3348 0.0504 224.58 / 0.08);

  img {
    width: 2.4rem;
    height: 2.4rem;
    object-fit: contain;
  }

  div {
    flex: 1;
    min-width: 0;
  }

  h2 {
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  p {
    font-size: 0.8rem;
    line-height: 1.35;
    opacity: 0.75;
  }
}

.assistant-close {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  color: var(--tinta);
  background: oklch(0.3348 0.0504 224.58 / 0.07);
  cursor: pointer;

  svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
  }
}

.assistant-log {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 0.9rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.msg {
  max-width: 88%;
  padding: 0.65rem 0.9rem;
  border-radius: 1.1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  overflow-wrap: anywhere;

  p + p,
  p + ul,
  ul + p {
    margin-top: 0.5rem;
  }

  ul {
    margin: 0;
    padding-left: 1.1rem;
  }

  li + li {
    margin-top: 0.25rem;
  }

  strong,
  a {
    font-weight: 600;
  }

  &.bot {
    align-self: flex-start;
    border: 1px solid oklch(0.3348 0.0504 224.58 / 0.07);
    border-bottom-left-radius: 0.35rem;
    background: oklch(1 0 0 / 0.75);
  }

  &.user {
    align-self: flex-end;
    border-bottom-right-radius: 0.35rem;
    color: var(--crema);
    background: var(--tinta);
  }

  &.error {
    color: oklch(0.45 0.15 25);
    background: oklch(0.55 0.17 25 / 0.08);
  }
}

/* Escribiendo: los dos macrones, como en la barra del analizador. */
.typing {
  display: grid;
  gap: 4px;
  padding: 0.35rem 0;

  i {
    display: block;
    width: 1.6rem;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg in oklab, var(--mar), var(--turquesa));
    animation: typing 1.1s var(--wave) infinite alternate;
  }

  i:last-child {
    width: 1rem;
    animation-delay: 0.25s;
  }
}

@keyframes typing {
  from { opacity: 0.3; transform: scaleX(0.6); }
  to { opacity: 1; transform: scaleX(1); }
}

.assistant-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 0.9rem 0.65rem;

  &[hidden] {
    display: none;
  }

  button {
    padding: 0.4rem 0.8rem;
    border: 1px solid oklch(0.3348 0.0504 224.58 / 0.2);
    border-radius: 999px;
    color: var(--tinta);
    background: oklch(1 0 0 / 0.5);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;

    &:hover {
      border-color: var(--mar);
    }
  }
}

.assistant-form {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin: 0 0.75rem;
  padding: 0.35rem;
  border: 1px solid oklch(0.3348 0.0504 224.58 / 0.15);
  border-radius: 1.4rem;
  background: oklch(1 0 0 / 0.7);

  &:focus-within {
    outline: 2px solid var(--mar);
    outline-offset: 1px;
  }

  textarea {
    flex: 1;
    max-height: 132px;
    padding: 0.5rem 0.6rem;
    border: 0;
    color: var(--tinta);
    background: transparent;
    font: inherit;
    font-size: 1rem;
    line-height: 1.4;
    resize: none;

    &:focus {
      outline: none;
    }
  }

  button {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    border-radius: 50%;
    color: var(--tinta);
    background: var(--rayo);
    cursor: pointer;

    &:disabled {
      opacity: 0.5;
      cursor: default;
    }

    svg {
      width: 1.1rem;
      height: 1.1rem;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  }
}

.assistant-note {
  padding: 0.5rem 1rem 0.8rem;
  font-size: 0.75rem;
  text-align: center;
  opacity: 0.75;
}

/* Que el botón del chat no tape los enlaces del pie en el móvil. */
@media (max-width: 640px) {
  .deep .bottom {
    padding-bottom: 5.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

}