/* FuaFlow Love Log: la marca es roja (carmesí #C8102E, como la app); el
   sitio y el CRM usan naranja. Se carga DESPUÉS de /css/site.css y solo en
   /lovelog/: cambia las variables del acento y rehace en rojo los degradados
   que site.css trae con el naranja escrito a mano. */
:root {
  --oro: #ff5a67;        /* rojo de texto sobre oscuro (AppColors.accentTextDark) */
  --oro-claro: #ff8f98;
  --oro-hondo: #c8102e;  /* carmesí de la marca */
  --ambar: #e0263e;
}

body {
  background-image:
    radial-gradient(ellipse 130% 60% at 50% -18%, rgba(200, 16, 46, 0.22), transparent 62%),
    radial-gradient(ellipse 90% 50% at 85% 4%, rgba(255, 90, 103, 0.08), transparent 60%);
}

.lang-pill:hover {
  border-color: rgba(255, 90, 103, 0.45);
}

.documento .divisor {
  background: linear-gradient(90deg, transparent, rgba(255, 90, 103, 0.4), transparent);
}

.dock a.activo {
  background: linear-gradient(180deg, rgba(200, 16, 46, 0.24), rgba(200, 16, 46, 0.07));
}

/* El hero con el iPhone (como el del CRM): el brillo detrás del teléfono y la
   pastilla «Próximamente», en rojo. */
.telefono-zona::before {
  background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(200, 16, 46, 0.26), transparent 70%);
}

.pastilla {
  border-color: rgba(255, 90, 103, 0.35);
  background: linear-gradient(180deg, rgba(200, 16, 46, 0.18), rgba(200, 16, 46, 0.05));
}

/* El brillo del teléfono (un ::before con inset negativo) se salía 24 px a lo
   ancho en un teléfono y dejaba mover la página de lado. */
body {
  overflow-x: clip;
}

/* La línea de la cita (.jornada), sus puntos y el riel de «Qué mide»: el
   degradado y el brillo que site.css trae en naranja, en rojo. */
.jornada::before {
  background: linear-gradient(180deg, rgba(255, 90, 103, 0.5), rgba(255, 90, 103, 0.08));
}

.momento .hora::after {
  box-shadow: 0 0 0 4px rgba(255, 90, 103, 0.16);
}

.etapa::after {
  background: linear-gradient(90deg, rgba(255, 90, 103, 0.55), rgba(255, 90, 103, 0.12));
}


/* Las tarjetas de ejemplo de la línea de la cita: en un teléfono se cortaban
   («llegas bien, sal…»); aquí se parten en renglones en vez de deslizarse. */
.muestra {
  white-space: normal;
}

/* «Qué mide» en un teléfono: el riel de 6 columnas (mínimo 780 px) se
   deslizaba a lo ancho y se veía cortado («Bananome…»). Aquí, dos columnas
   que se leen completas. */
@media (max-width: 640px) {
  .riel-envoltura { overflow-x: visible; }
  .riel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    row-gap: 10px;
  }
  .etapa { padding-right: 14px; }
  .etapa:last-child::after { right: 0; }
}