/* ============================================================================
   flowfood.css  -  Adaptacion de marca sobre la plantilla Landing Page
   ----------------------------------------------------------------------------
   La plantilla original (Start Bootstrap, licencia MIT) viene con la paleta
   azul de Bootstrap. Este archivo NO modifica styles.css: se carga despues y
   solo redefine los colores y algunos detalles tipograficos.

   Se hace asi a proposito. Editar el CSS compilado de la plantilla haria
   imposible distinguir que es de la plantilla y que es nuestro, y actualizarla
   despues seria rehacer el trabajo. Separado, la adaptacion cabe en un archivo
   que se lee entero.

   Los colores NO son inventados: son los mismos que usa la aplicacion real,
   tomados de apps/web/src/app/globals.css del repositorio de FlowFood.
   ============================================================================ */

:root {
  --ff-ambar: #F59E0B;        /* Amber 500  - el color de marca */
  --ff-ambar-fuerte: #B45309; /* Amber 700  - sobre blanco, para que contraste */
  --ff-verde: #10B981;        /* Emerald 500 */
  --ff-texto: #1F2937;        /* Gris 800 */
  --ff-texto-suave: #6B7280;  /* Gris 500 */
  --ff-fondo: #F9FAFB;
  --ff-borde: #E5E7EB;
}

/* ---------------------------------------------------------------------------
   Botones
   ---------------------------------------------------------------------------
   Sobre blanco se usa el ambar FUERTE y no el claro: el ambar 500 sobre blanco
   da un contraste de 2.1:1, que no alcanza el minimo de accesibilidad. El 700
   llega a 5.0:1. Es la misma regla que sigue la aplicacion en sus graficas.
   --------------------------------------------------------------------------- */
.btn-primary {
  --bs-btn-bg: var(--ff-ambar-fuerte);
  --bs-btn-border-color: var(--ff-ambar-fuerte);
  --bs-btn-hover-bg: #92400E;
  --bs-btn-hover-border-color: #92400E;
  --bs-btn-active-bg: #78350F;
  --bs-btn-active-border-color: #78350F;
  --bs-btn-disabled-bg: var(--ff-ambar-fuerte);
  --bs-btn-disabled-border-color: var(--ff-ambar-fuerte);
  font-weight: 600;
}

/* Sobre el fondo oscuro de la portada el ambar claro si funciona, y destaca
   mucho mas. El texto va oscuro porque sobre ambar claro el blanco no se lee. */
.btn-marca-clara {
  background-color: var(--ff-ambar);
  border-color: var(--ff-ambar);
  color: var(--ff-texto);
  font-weight: 700;
}
.btn-marca-clara:hover,
.btn-marca-clara:focus {
  background-color: #FBBF24;
  border-color: #FBBF24;
  color: var(--ff-texto);
}

.btn-outline-light {
  --bs-btn-hover-color: var(--ff-texto);
}

.text-primary { color: var(--ff-ambar-fuerte) !important; }

/* ---------------------------------------------------------------------------
   Portada y llamada final: el velo pasa de azul marino a gris oscuro
   --------------------------------------------------------------------------- */
header.masthead:before,
.call-to-action:before {
  background-color: var(--ff-texto);
  opacity: 0.68;
}

header.masthead h1 {
  font-weight: 800;
  letter-spacing: -0.5px;
}

.entradilla {
  font-size: 1.15rem;
  line-height: 1.6;
  opacity: 0.95;
}

/* ---------------------------------------------------------------------------
   Tipografia y secciones
   --------------------------------------------------------------------------- */
body { color: var(--ff-texto); }

.bg-light { background-color: var(--ff-fondo) !important; }

.features-icons .features-icons-item h3,
.showcase-text h2,
.testimonials h2 {
  font-weight: 700;
}

.showcase-text .lead,
.features-icons .lead {
  color: var(--ff-texto-suave);
  font-size: 1.05rem;
}

/* El numero de cada paso de "Como funciona" */
.paso-numero {
  width: 3.2rem;
  height: 3.2rem;
  line-height: 3.2rem;
  border-radius: 50%;
  background-color: var(--ff-ambar);
  color: var(--ff-texto);
  font-weight: 800;
  font-size: 1.4rem;
  margin: 0 auto 1rem auto;
}

.paso h5 { font-weight: 700; }
.paso p { color: var(--ff-texto-suave); }

/* La etiqueta de "proyecto formativo", para que nadie confunda esto con un
   producto comercial en venta. */
.distintivo {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 0.3rem 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  margin-bottom: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Pie de pagina
   --------------------------------------------------------------------------- */
footer.footer {
  background-color: #fff;
  border-top: 1px solid var(--ff-borde);
}
footer.footer .creditos {
  font-size: 0.9rem;
  color: var(--ff-texto-suave);
  line-height: 1.7;
}
footer.footer a { color: var(--ff-ambar-fuerte); }

.marca-nav {
  font-weight: 800;
  color: var(--ff-texto) !important;
  font-size: 1.25rem;
}
.marca-nav .punto { color: var(--ff-ambar-fuerte); }