/* Landing page. The cobalt header continues into the Quick Settings shade. */

.cortina-panel {
  background: var(--rim); color: var(--on-rim);
  border-radius: 0 0 40px 40px; padding: 14px var(--gutter) 18px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .2);
  animation: bajar .7s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes bajar { from { transform: translateY(-28px); } to { transform: none; } }
.estado { display: flex; justify-content: space-between; font-size: .9375rem; color: var(--on-rim-soft); max-width: 1200px; margin: 0 auto; }
.mosaicos {
  list-style: none; margin: 22px auto 0; padding: 0; max-width: 1200px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
.mosaicos li:not(.mosaico) { display: contents; }
.mosaico {
  min-height: 68px; border-radius: 34px; background: rgba(246, 243, 234, .16); color: var(--on-rim);
  display: flex; align-items: center; padding: 0 24px; font-family: inherit; font-weight: 600; font-size: 1.0625rem; line-height: 1.2; border: 0;
}
.mosaico.apagado { background: rgba(246, 243, 234, .07); color: var(--on-rim-soft); }
.mosaico-senora {
  background: var(--action); color: var(--on-action); cursor: pointer; text-align: left;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .22);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s;
}
.mosaico-senora:hover { transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0, 0, 0, .26); }
.mosaico-senora:focus-visible { outline-color: var(--bar); }
.barra {
  max-width: 1200px; margin: 22px auto 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 24px;
}
.barra .marca { justify-self: start; }
.barra nav { justify-self: end; }
.barra nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0; padding: 0; font-weight: 600; }
.barra nav a { display: inline-block; padding: 10px 0; text-decoration: none; color: var(--on-rim-soft); }
.barra nav a:hover, .barra nav a[aria-current="page"] { color: var(--on-rim); text-decoration: underline; }
.tirador { width: 64px; height: 6px; border-radius: 3px; background: var(--on-rim-soft); opacity: .7; }

.portada {
  max-width: 1200px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(48px, 7vw, 96px);
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 32px; align-items: center;
  box-sizing: content-box;
}
.portada h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); line-height: 1; letter-spacing: -.03em; margin: 0; max-width: 13ch; }
.portada p { font-size: clamp(1.125rem, 1.6vw, 1.3125rem); line-height: 1.5; color: var(--ink-soft); max-width: 34em; margin: 24px 0 0; }
.portada p strong { color: var(--ink); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
.pronto { font-weight: 600; color: var(--ink-soft); }
.portada-senora { margin: 0; color: var(--ink); justify-self: center; width: min(100%, 360px); }
.portada-senora svg { width: 100%; height: auto; display: block; }
.portada-senora .arm { transform-box: view-box; transform-origin: 152px 186px; animation: chancla 2.8s ease-in-out infinite; }
@keyframes chancla { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }

.bloque { max-width: 1200px; margin: 0 auto; padding: clamp(56px, 8vw, 112px) var(--gutter) 0; box-sizing: content-box; }
.bloque h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 0; max-width: 18ch; }
.entrada { font-size: 1.1875rem; color: var(--ink-soft); max-width: 40em; margin: 16px 0 0; }

.pasos { list-style: none; counter-reset: paso; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 3px solid var(--rim); }
.pasos li { counter-increment: paso; padding: 20px 20px 0 0; display: flex; flex-direction: column; gap: 10px; }
.pasos li::before { content: counter(paso); font-weight: 700; font-size: 2.75rem; line-height: 1; color: var(--rim); }
.pregunta { font-weight: 700; font-size: 1.1875rem; line-height: 1.25; }
.respuesta { color: var(--ink-soft); }
.cifra { font-variant-numeric: tabular-nums; }
.veredicto { margin: 36px 0 0; font-size: clamp(1.375rem, 2.6vw, 2rem); line-height: 1.25; font-weight: 600; max-width: 30ch; }
.quien { color: var(--today); text-decoration: underline; text-decoration-color: var(--bar); text-decoration-thickness: 5px; text-underline-offset: .18em; }
.nota { margin: 10px 0 0; font-size: .9375rem; color: var(--ink-soft); }

.frases { margin: 36px 0 0; display: grid; gap: 0; }
.frases div { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 8px 32px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.frases dt { font-weight: 600; color: var(--ink-soft); }
.frases dd { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.3; font-weight: 600; }

.privado-plato {
  background: var(--surface); border-radius: 16px; box-shadow: var(--shadow);
  padding: clamp(28px, 5vw, 64px);
}
.privado-plato { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px 56px; align-items: start; }
.privado-plato > p { grid-column: 1; margin: 0; }
.privado-plato h2 { grid-column: 1; }
.hechos { grid-column: 2; grid-row: 1 / span 2; list-style: none; margin: 0; padding: 0; }
.hechos li { display: grid; grid-template-columns: minmax(0, 15em) 1fr; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); }
.hechos li:first-child { padding-top: 4px; }
.hechos strong { color: var(--ink); font-size: 1.125rem; }

.lista-demas { margin: 32px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px 48px; }
.lista-demas dt { font-weight: 700; font-size: 1.1875rem; }
.lista-demas dd { margin: 6px 0 0; color: var(--ink-soft); }

.cierre {
  margin: clamp(64px, 9vw, 128px) 0 0; background: var(--rim); color: var(--on-rim);
  border-radius: 40px 40px 0 0; padding: clamp(48px, 7vw, 96px) var(--gutter);
  text-align: center;
}
.cierre h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); margin: 0 auto; }
.cierre p { color: var(--on-rim-soft); max-width: 36em; margin: 18px auto 30px; font-size: 1.125rem; }
.cierre a { color: var(--on-rim); }
.inicio .pie { border-top: 0; }

/* The capture card, as in the app: a card over the page with the background frosted. */
.tarjeta {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0;
  border-radius: 28px; background: var(--surface); color: var(--ink); box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
}
.tarjeta { transform-origin: center; }
.tarjeta::backdrop { background: rgba(14, 20, 48, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tarjeta-form { padding: 24px clamp(20px, 5vw, 32px) 24px; display: flex; flex-direction: column; gap: 16px; }
.tarjeta-cabeza { display: flex; justify-content: space-between; align-items: center; }
.tarjeta-paso { margin: 0; color: var(--ink-soft); font-weight: 600; }
.cerrar { width: 48px; height: 48px; border-radius: 24px; border: 0; background: transparent; color: var(--ink); cursor: pointer; display: grid; place-items: center; margin-right: -10px; }
.cerrar:hover { background: var(--selected); }
.cerrar svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; fill: none; }
.tarjeta-pregunta { font-size: clamp(1.75rem, 5vw, 2.25rem); margin: 0; outline: none; }
.tarjeta-cuerpo { min-height: 120px; }
.campo {
  width: 100%; min-height: 60px; border: 2px solid var(--line); border-radius: 14px; background: var(--ground);
  color: var(--ink); font-family: inherit; font-size: 1.3125rem; line-height: 1.2; padding: 12px 16px; caret-color: var(--action);
}
.campo:focus { outline: none; border-color: var(--rim); }
.campo-monto { font-size: 2.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.opciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.opcion {
  min-height: 48px; border-radius: 10px; border: 1.5px solid var(--line); background: transparent; color: var(--ink);
  font-family: inherit; font-weight: 600; font-size: 1rem; line-height: 1.2; padding: 10px 16px; cursor: pointer; text-align: left;
}
.opcion:hover { border-color: var(--ink-soft); }
.opcion[aria-pressed="true"] { background: var(--selected); border-color: var(--rim); color: var(--ink); }
.ayuda { margin: 10px 0 0; color: var(--ink-soft); font-size: .9375rem; }
.tarjeta-aviso { margin: 0; font-size: .875rem; color: var(--ink-soft); }
.tarjeta-botones { display: flex; justify-content: space-between; gap: 12px; }
.tarjeta-botones .boton { flex: 1; white-space: nowrap; }
.tarjeta-botones #siguiente { flex: 1.5; }
.boton:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.reaccion { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; color: var(--ink); }
.reaccion svg { width: 100%; height: auto; }
.reaccion blockquote { margin: 0; font-size: 1.25rem; line-height: 1.35; font-weight: 600; }
.reaccion .resumen-gasto { margin: 10px 0 0; color: var(--ink-soft); font-size: 1rem; font-weight: 400; }

@media (max-width: 860px) {
  .mosaicos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mosaico { min-height: 56px; padding: 0 18px; font-size: 1rem; }
  .mosaicos li:nth-child(n+5) { display: none; }
  .barra { grid-template-columns: auto 1fr; }
  .barra .tirador { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .barra nav { grid-column: 1 / -1; justify-self: start; }
  .privado-plato { grid-template-columns: 1fr; }
  .privado-plato h2, .privado-plato > p, .hechos { grid-column: 1; grid-row: auto; }
  .hechos li { grid-template-columns: 1fr; }
  .portada { grid-template-columns: 1fr; }
  .portada-senora { width: 200px; justify-self: start; order: -1; }
  .pasos { grid-template-columns: 1fr; border-top: 0; }
  .pasos li { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .pasos li::before { font-size: 1.75rem; width: 1.2em; }
  .respuesta { flex-basis: 100%; padding-left: calc(1.2em * 1.75 / 1.0625 + 14px); }
  .frases div { grid-template-columns: 1fr; }
  .reaccion { grid-template-columns: 96px 1fr; }
}
@media (prefers-reduced-motion: reduce) { .portada-senora .arm { animation: none; } }