/* Bermellón — portada pública del sitio.
   Se carga después de estilo.css, de modo que reutiliza la misma paleta,
   la misma tipografía y los mismos botones que la aplicación. Aquí sólo
   está lo propio de la portada: el relato, el panel ilustrativo y el
   bloque de cierre. */

/* El desplazamiento suave se activa sólo en la portada, que es la única
   pantalla con enlaces a secciones de la misma página. */
.portada-raiz { scroll-behavior: smooth; }

body.portada {
  background: var(--panel);
}

.portada-ancho { max-width: 1280px; margin: 0 auto; }

/* --- Encabezado --- */
.portada-encabezado {
  padding: 28px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.portada-encabezado .marca { font-size: 30px; letter-spacing: -1.3px; }
.portada-menu { display: flex; align-items: center; gap: 30px; font-size: 14px; flex-wrap: wrap; }
.portada-menu a { color: var(--tinta); }
.portada-menu a:hover { color: var(--rojo); text-decoration: none; }
.portada-menu .boton:hover { color: #fff; }

/* --- Antetítulos --- */
.antetitulo {
  font-size: 11.5px; letter-spacing: 2px; font-weight: 700;
  text-transform: uppercase; display: flex; align-items: center; gap: 10px;
  color: var(--tinta);
}
.punto {
  width: 7px; height: 7px; background: var(--rojo);
  border-radius: 50%; display: inline-block; flex: none;
}

/* --- Portada principal --- */
.portada-principal { overflow: hidden; }
.heroe {
  padding: 70px 48px 90px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.heroe h1 {
  font-family: var(--letra-titulo);
  font-size: clamp(46px, 5.2vw, 74px);
  line-height: 1.04;
  letter-spacing: -3.4px;
  margin: 26px 0;
}
.heroe h1 em { color: var(--rojo); font-style: normal; }
.bajada { font-size: 17.5px; line-height: 1.65; color: var(--apagado); max-width: 410px; }
.heroe-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.heroe-acciones .boton { padding: 15px 26px; font-size: 14px; }
.nota { font-size: 12px; color: var(--apagado); margin-top: 20px; }

/* --- Panel ilustrativo --- */
.lamina {
  position: relative;
  background: var(--fondo);
  border-radius: 44px;
  min-height: 440px;
  padding: 44px 28px;
  display: flex;
  align-items: center;
}
.orbe {
  position: absolute;
  width: 250px; height: 250px;
  background: var(--rojo);
  border-radius: 50%;
  right: -45px; top: -28px;
}
.maqueta {
  position: relative;
  z-index: 1;
  background: var(--panel);
  width: 100%;
  border: 1px solid var(--borde);
  box-shadow: 0 22px 55px rgba(23, 45, 59, .07);
  border-radius: var(--radio-l);
  padding: 24px;
  transform: rotate(-3deg);
}
.maqueta-titulo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; font-size: 14px; font-weight: 700;
}
.marbete {
  font-size: 10px; color: var(--apagado); background: var(--fondo);
  padding: 6px 11px; border-radius: var(--pastilla); white-space: nowrap;
}
.cifras { display: flex; gap: 12px; margin: 22px 0; }
.cifra {
  flex: 1; background: var(--panel-tenue); padding: 14px;
  border-radius: var(--radio-m); font-size: 11px; color: var(--apagado);
}
.cifra strong {
  display: block; font-family: var(--letra-titulo);
  font-size: 26px; margin-top: 8px; color: var(--tinta); letter-spacing: -1px;
}
.grafico {
  height: 92px; display: flex; align-items: flex-end; gap: 14px;
  border-bottom: 1px solid var(--borde); padding: 0 8px;
}
.barra { flex: 1; border-radius: 6px 6px 0 0; background: #dfe7ec; }
.barra:nth-last-child(-n+2) { background: var(--rojo); }
.maqueta-filas { margin-top: 18px; }
.maqueta-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--borde);
  font-size: 11.5px;
}
.maqueta-fila:last-of-type { border-bottom: 0; }
.maqueta-fila b { font-weight: 400; flex: 1; }
.marca-estado {
  color: var(--verde); background: var(--verde-fondo);
  padding: 5px 10px; border-radius: var(--pastilla); font-size: 10.5px;
  font-weight: 600; white-space: nowrap;
}
.marca-estado.pendiente { color: var(--ambar); background: var(--ambar-fondo); }
.flotante {
  position: absolute;
  /* Apoyado en el borde inferior de la maqueta: cruza la tarjeta, pero no
     se come las etiquetas de estado. */
  right: -14px; bottom: -12px;
  background: var(--tinta); color: #fff;
  border-radius: var(--radio-l);
  padding: 18px 22px;
  box-shadow: 0 15px 30px rgba(23, 45, 59, .13);
  z-index: 2; font-size: 12px;
  transform: rotate(3deg);
}
.flotante strong { display: block; font-size: 16px; margin-top: 6px; }

/* --- Banda de claims --- */
.banda {
  max-width: 1184px; margin: 0 auto; padding: 24px 0;
  border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px 30px;
  color: var(--apagado); font-size: 13px;
}
.banda span { display: flex; align-items: center; gap: 10px; }

/* --- Secciones --- */
.portada-seccion { max-width: 1280px; padding: 90px 48px; margin: 0 auto; }
.portada-seccion.seguida { padding-top: 0; }
.encabeza {
  display: flex; justify-content: space-between; gap: 50px;
  align-items: flex-end; flex-wrap: wrap; margin-bottom: 44px;
}
.encabeza h2 {
  font-family: var(--letra-titulo);
  font-size: 40px; letter-spacing: -1.6px; line-height: 1.14; margin: 18px 0 0;
}
.encabeza p { max-width: 370px; color: var(--apagado); line-height: 1.7; font-size: 16px; margin: 0; }

.rasgos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 38px; }
.rasgo { border-top: 2px solid var(--tinta); padding-top: 24px; }
.rasgo-numero { font-size: 11.5px; color: var(--rojo); font-weight: 700; letter-spacing: 1.2px; }
.rasgo h3 {
  font-family: var(--letra-titulo);
  font-size: 22px; font-weight: 600; margin: 22px 0 12px;
  color: var(--tinta); text-transform: none; letter-spacing: -.5px;
}
.rasgo p { font-size: 15px; line-height: 1.7; color: var(--apagado); margin: 0; }

/* --- Muestra interactiva --- */
.muestra {
  background: var(--fondo);
  border-radius: var(--radio-xl);
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 50px;
  align-items: center;
}
.muestra h2 {
  font-family: var(--letra-titulo);
  font-size: 34px; letter-spacing: -1.3px; line-height: 1.15; margin: 18px 0 16px;
}
.muestra p { color: var(--apagado); line-height: 1.7; margin: 0 0 10px; }
.muestra-panel { background: var(--panel); border-radius: var(--radio-l); padding: 24px; }
.muestra-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.muestra-filtro {
  border: 0; background: var(--fondo); border-radius: var(--pastilla);
  padding: 9px 16px; font-size: 12px; color: var(--tinta);
  font-family: inherit; cursor: pointer;
}
.muestra-filtro.activo { background: var(--tinta); color: #fff; }
.muestra-panel .maqueta-fila { font-size: 13px; padding: 15px 0; }
.muestra-panel .marca-estado { font-size: 11px; }
.muestra-conteo { font-size: 11px; color: var(--apagado); margin: 12px 0 0; }

/* --- Cierre --- */
.cierre {
  background: var(--rojo);
  color: #fff;
  padding: 60px;
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.cierre h2 {
  font-family: var(--letra-titulo);
  margin: 0 0 10px; font-size: 42px; letter-spacing: -1.7px; line-height: 1.1;
}
.cierre p { opacity: .9; line-height: 1.6; margin: 0; }
.cierre .boton {
  background: var(--panel); color: var(--tinta);
  border-color: var(--panel); white-space: nowrap; padding: 15px 26px;
}
.cierre .boton:hover { background: var(--fondo); color: var(--tinta); border-color: var(--fondo); }

/* --- Pie --- */
.portada-pie {
  max-width: 1280px; padding: 0 48px 38px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px 30px; flex-wrap: wrap;
  font-size: 12px; color: var(--apagado);
}
.portada-pie .marca { font-size: 24px; }

@media (max-width: 900px) {
  .portada-encabezado { padding: 22px 20px; gap: 12px; }
  .portada-menu { gap: 14px; }
  .portada-menu .solo-ancho { display: none; }
  .heroe { grid-template-columns: 1fr; padding: 40px 20px 60px; gap: 56px; }
  .heroe h1 { letter-spacing: -2.2px; }
  .lamina { max-width: 540px; width: 100%; margin: 0 auto; min-height: 400px; }
  .orbe { right: -25px; }
  .flotante { right: 0; }
  .banda { margin: 0 20px; }
  .portada-seccion { padding: 60px 20px; }
  .encabeza h2 { font-size: 32px; }
  .rasgos { grid-template-columns: 1fr; gap: 26px; }
  .muestra { grid-template-columns: 1fr; padding: 24px; gap: 26px; }
  .muestra h2 { font-size: 29px; }
  .cierre { padding: 34px; }
  .cierre h2 { font-size: 31px; }
  .portada-pie { padding: 0 20px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}