/* =========================================================
   Neura Cloud — sections.css
   Estilos de cada sección de la landing
   ========================================================= */

/* ---------- Hero ---------- */

.hero {
  padding-top: calc(var(--header-h) + 72px);
  padding-bottom: 96px;
  background: linear-gradient(180deg, #e9f2f5 0%, var(--paper) 70%);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 64px;
  align-items: center;
}

.hero-copy h1 {
  margin-bottom: 22px;
}

.hero-copy .lead {
  max-width: 50ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 28px;
}

.hero-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.87rem;
  color: var(--ink-soft);
}

.hero-trust svg {
  color: var(--brand);
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ---------- Features (bento) ---------- */

.features-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.feature-card p {
  margin-top: 10px;
  font-size: 0.94rem;
  color: var(--ink-soft);
}

.feature-card--wide {
  grid-column: span 4;
}

.feature-card--half {
  grid-column: span 2;
}

.feature-card--full {
  grid-column: span 6;
}

.feature-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

/* Tarjeta IA con chat de ejemplo */

.ai-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.ai-card .feature-card-copy p {
  color: var(--on-panel-muted);
}

/* --brand-soft y --brand-pale son teales aclarados para leerse sobre el fondo
   casi negro que tenia esta tarjeta. Sobre el panel claro se lavan, asi que
   pasan al teal de marca a plena saturacion. */
.ai-card .icon-chip {
  background: var(--brand-tint);
  color: var(--brand);
}

.ai-demo {
  background: var(--panel-raised);
  border: 1px solid var(--on-panel-line);
  border-radius: var(--radius-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-demo-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-panel-muted);
}

.ai-demo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
}

.ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ai-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--panel-raised);
  border: 1px solid var(--on-panel-line);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--on-panel);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.ai-action:hover:not(.ai-action--active) {
  background: var(--brand-tint);
  border-color: var(--brand-pale);
}

.ai-action:active {
  transform: scale(0.97);
}

.ai-action:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.ai-action svg {
  color: var(--brand);
}

.ai-action--active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.ai-action--active svg {
  color: #fff;
}

.ai-result {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  color: var(--ink);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

.ai-result-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand-deep);
}

.ai-result strong {
  display: block;
  font-size: 0.9rem;
}

.ai-result span {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.ai-result.is-loading {
  opacity: 0.7;
}

.ai-result.is-loading .ai-result-icon {
  animation: ai-pulse 0.9s ease-in-out infinite;
}

.ai-result.is-done {
  animation: ai-fade-in 0.3s ease;
}

@keyframes ai-pulse {
  50% {
    transform: scale(0.8);
    opacity: 0.5;
  }
}

@keyframes ai-fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  .features-grid {
    grid-template-columns: 1fr 1fr;
  }

  .feature-card--wide,
  .feature-card--full {
    grid-column: span 2;
  }

  .feature-card--half {
    grid-column: span 1;
  }

  .ai-card {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 640px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature-card--wide,
  .feature-card--half,
  .feature-card--full {
    grid-column: span 1;
  }
}

/* ---------- Comparación antes / después ---------- */

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 980px;
  margin-inline: auto;
}

.compare-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.compare-card h3 {
  font-size: 1.35rem;
  margin-bottom: 18px;
}

.compare-card--before .compare-label {
  color: var(--ink-faint);
}

/* Iconos distintivos por fila (estilo del diseño original) */
.cmp-ic {
  flex-shrink: 0;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  width: 26px;
  margin-top: 1px;
}

.compare-card--before .cmp-ic {
  color: #f59e0b; /* ámbar */
}

/* Tarjeta "Con Neura Cloud": rellena en teal, iconos claros */
.compare-card--after {
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-deep) 100%);
  border-color: transparent;
  color: #fff;
}

.compare-card--after:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}

.compare-card--after .compare-label {
  color: var(--brand-pale);
}

.compare-card--after h3,
.compare-card--after .li-title {
  color: #fff;
}

.compare-card--after .li-text {
  color: rgba(233, 241, 243, 0.85);
}

.compare-card--after .cmp-ic {
  color: var(--brand-pale); /* teal claro */
}

.compare-card--after .check-list li + li {
  border-top-color: rgba(255, 255, 255, 0.16);
}

@media (max-width: 860px) {
  .compare-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Cómo funciona (pasos) ---------- */

.steps-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  counter-reset: step;
}

.step-item {
  display: flex;
  gap: 18px;
  width: 100%;
  text-align: left;
  padding: 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.step-item:hover {
  background: rgba(255, 255, 255, 0.7);
}

.step-item.is-active {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.step-num {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ink-faint);
  padding-top: 2px;
  transition: color 0.25s ease;
}

.step-item.is-active .step-num {
  color: var(--clay);
}

.step-body {
  flex: 1;
}

.step-title {
  display: block;
  font-weight: 600;
  font-size: 1rem;
}

.step-desc {
  display: block;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 3px;
}

.step-progress {
  display: block;
  height: 3px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.step-item.is-active .step-progress {
  opacity: 1;
}

.step-progress i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
}

.steps-layout.is-running .step-item.is-active .step-progress i {
  animation: step-fill 7s linear forwards;
}

.steps-layout:hover .step-progress i {
  animation-play-state: paused;
}

@keyframes step-fill {
  to {
    transform: scaleX(1);
  }
}

.steps-panels {
  position: relative;
  min-height: 340px;
}

.step-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.step-panel.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.step-panel svg {
  width: min(360px, 100%);
  height: auto;
}

@media (max-width: 980px) {
  .steps-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .steps-panels {
    order: -1;
    min-height: 300px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .steps-layout.is-running .step-item.is-active .step-progress i {
    animation: none;
    transform: scaleX(1);
  }
}

/* --- Animaciones de las ilustraciones de cada paso ---
   Se disparan al activarse el panel y se reinician en cada cambio,
   porque solo aplican bajo .step-panel.is-active. */

.steps-panels svg * {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes sv-fade {
  from {
    opacity: 0;
  }
}

@keyframes sv-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes sv-pop {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
}

@keyframes sv-grow-x {
  from {
    transform: scaleX(0);
  }
}

@keyframes sv-slide-22 {
  from {
    transform: translateX(-22px);
  }
}

@keyframes sv-slide-38 {
  from {
    transform: translateX(-38px);
  }
}

@keyframes s1-toggle-fill {
  from {
    fill: #dbe6ea;
  }
}

@keyframes s2-drop {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  35% {
    opacity: 1;
    transform: translateY(-8px);
  }
  55% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(34px);
  }
}

@keyframes s3-ring {
  0%,
  40%,
  100% {
    transform: rotate(0deg);
  }
  8% {
    transform: rotate(12deg);
  }
  16% {
    transform: rotate(-10deg);
  }
  24% {
    transform: rotate(8deg);
  }
  32% {
    transform: rotate(-5deg);
  }
}

@keyframes s4-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* Paso 1: perfil y configuración */

.steps-layout.is-running .step-panel.is-active .s1-card {
  animation: sv-fade 0.45s ease both;
}

.steps-layout.is-running .step-panel.is-active .s1-item-1 {
  animation: sv-fade-up 0.45s ease 0.2s both;
}

.steps-layout.is-running .step-panel.is-active .s1-item-2 {
  animation: sv-fade-up 0.45s ease 0.4s both;
}

.steps-layout.is-running .step-panel.is-active .s1-item-3 {
  animation: sv-fade-up 0.45s ease 0.6s both;
}

.steps-layout.is-running .step-panel.is-active .s1-toggle-bg {
  animation: s1-toggle-fill 0.35s ease 1.1s both;
}

.steps-layout.is-running .step-panel.is-active .s1-toggle-knob {
  animation: sv-slide-22 0.35s ease 1.1s both;
}

.steps-layout.is-running .step-panel.is-active .s1-slider-fill {
  transform-origin: left center;
  animation: sv-grow-x 0.5s ease 1.5s both;
}

.steps-layout.is-running .step-panel.is-active .s1-slider-knob {
  animation: sv-slide-38 0.5s ease 1.5s both;
}

.steps-layout.is-running .step-panel.is-active .s1-badge {
  animation: sv-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.2s both;
}

/* Paso 2: expediente que se guarda en la carpeta segura */

.steps-layout.is-running .step-panel.is-active .s2-folder {
  animation: sv-fade-up 0.5s ease both;
}

.steps-layout.is-running .step-panel.is-active .s2-doc {
  animation: s2-drop 1.7s ease-in-out 0.5s both;
}

.steps-layout.is-running .step-panel.is-active .s2-lock {
  animation: sv-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.3s both;
}

/* Paso 3: agenda con citas y recordatorio */

.steps-layout.is-running .step-panel.is-active .s3-card {
  animation: sv-fade 0.45s ease both;
}

.steps-layout.is-running .step-panel.is-active .s3-evt {
  animation: sv-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.steps-layout.is-running .step-panel.is-active .s3-evt-1 {
  animation-delay: 0.3s;
}

.steps-layout.is-running .step-panel.is-active .s3-evt-2 {
  animation-delay: 0.5s;
}

.steps-layout.is-running .step-panel.is-active .s3-evt-3 {
  animation-delay: 0.7s;
}

.steps-layout.is-running .step-panel.is-active .s3-evt-4 {
  animation-delay: 1s;
}

.steps-layout.is-running .step-panel.is-active .s3-bell {
  animation: sv-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s both;
}

.steps-layout.is-running .step-panel.is-active .s3-bell-glyph {
  transform-origin: 50% 15%;
  animation: s3-ring 2.6s ease-in-out 2.1s infinite;
}

/* Paso 4: informe que se redacta con IA */

.steps-layout.is-running .step-panel.is-active .s4-doc {
  animation: sv-fade-up 0.45s ease both;
}

.steps-layout.is-running .step-panel.is-active .s4-line {
  transform-origin: left center;
  animation: sv-grow-x 0.4s ease both;
}

.steps-layout.is-running .step-panel.is-active .s4-line-1 {
  animation-delay: 0.4s;
}

.steps-layout.is-running .step-panel.is-active .s4-line-2 {
  animation-delay: 0.55s;
}

.steps-layout.is-running .step-panel.is-active .s4-line-3 {
  animation-delay: 0.7s;
}

.steps-layout.is-running .step-panel.is-active .s4-chip {
  animation: sv-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.05s both;
}

.steps-layout.is-running .step-panel.is-active .s4-line-4 {
  animation-delay: 1.5s;
}

.steps-layout.is-running .step-panel.is-active .s4-line-5 {
  animation-delay: 1.75s;
}

.steps-layout.is-running .step-panel.is-active .s4-line-6 {
  animation-delay: 2s;
}

.steps-layout.is-running .step-panel.is-active .s4-spark {
  animation: sv-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 1.3s both;
}

.steps-layout.is-running .step-panel.is-active .s4-spark-2 {
  animation-delay: 1.6s;
}

.steps-layout.is-running .step-panel.is-active .s4-spark-star {
  animation: s4-pulse 2.4s ease-in-out 2.2s infinite;
}

@media (prefers-reduced-motion: reduce) {
  .steps-panels svg *,
  .steps-layout.is-running .step-panel.is-active .s4-spark-star,
  .steps-layout.is-running .step-panel.is-active .s3-bell-glyph {
    animation: none !important;
  }
}

/* ---------- Portal del paciente ---------- */

.portal-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.portal-list {
  margin-top: 12px;
}

.portal-lead {
  margin-top: 16px;
}

.portal-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
}

.portal-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(420px, 90%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--brand-tint) 0%,
    rgba(230, 243, 246, 0) 70%
  );
}

.portal-visual img {
  position: relative;
  width: min(300px, 70%);
  filter: drop-shadow(0 30px 50px rgba(13, 42, 51, 0.25));
}

@media (max-width: 980px) {
  .portal-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ---------- Nosotros ---------- */

.about-inner {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.about-quote {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 32px;
}

.about-text {
  color: var(--ink-soft);
  max-width: 62ch;
  margin-inline: auto;
}

.about-text + .about-text {
  margin-top: 16px;
}

/* Frase puente que entrega el lector al recorrido de un día. Va en el
   acento cálido para que se lea como voz del autor, no como cuerpo. */
.about-bridge {
  margin-top: 36px;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--clay);
}

.about-founders {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

.founder-avatars {
  display: flex;
}

.founder-avatars span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  border: 2px solid var(--paper);
}

/* Solapamiento y color alterno solo a partir del SEGUNDO avatar. Con
   `:last-child` un único avatar se pintaba de arcilla y se desplazaba
   -10px, porque también es el último. */
.founder-avatars span + span {
  margin-left: -10px;
  background: var(--clay);
}

.about-founders p {
  text-align: left;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.about-founders strong {
  display: block;
  color: var(--ink);
  font-size: 0.95rem;
}

/* ---------- Calculadora ---------- */

.calc-card {
  max-width: 980px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: var(--shadow-md);
}

.calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}

.calc-field + .calc-field {
  margin-top: 32px;
}

.calc-field label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
}

.calc-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--brand-deep);
  margin: 6px 0 10px;
}

.calc-result {
  background: var(--panel);
  color: var(--on-panel);
  border-radius: var(--radius-md);
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.calc-result-label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-panel-muted);
}

.calc-result-main {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5vw, 3.6rem);
  font-weight: 600;
  line-height: 1;
  color: var(--brand);
  margin: 14px 0 4px;
}

.calc-result-main small {
  font-size: 0.35em;
  font-weight: 500;
  color: var(--on-panel-muted);
  font-family: var(--font-body);
}

.calc-breakdown {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--on-panel-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calc-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.9rem;
  color: var(--on-panel-muted);
}

.calc-breakdown strong {
  color: var(--on-panel);
  font-weight: 600;
  white-space: nowrap;
}

.calc-footer {
  margin-top: 36px;
  text-align: center;
}

.calc-footer .btn {
  display: inline-block;
  white-space: normal;
  max-width: 100%;
}

.calc-note {
  margin-top: 14px;
  font-size: 0.78rem;
  color: var(--ink-faint);
}

@media (max-width: 900px) {
  .calc-card {
    padding: 28px;
  }

  .calc-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 520px) {
  .calc-breakdown li {
    flex-direction: column;
    gap: 2px;
  }
}

/* ---------- Precios ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.price-card {
  display: flex;
  flex-direction: column;
  position: relative;
}

.price-card--featured {
  box-shadow: var(--shadow-lg);
}

.price-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--clay);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.price-plan {
  font-size: 1.1rem;
}

.price-desc {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 4px;
  min-height: 42px;
}

.card--panel .price-desc {
  color: var(--on-panel-muted);
}

.price-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 24px 0;
}

.price-amount strong {
  font-family: var(--font-display);
  font-size: 2.9rem;
  font-weight: 600;
  line-height: 1;
}

.price-amount span {
  color: var(--ink-faint);
  font-size: 0.9rem;
}

.card--panel .price-amount span {
  color: var(--on-panel-muted);
}

.price-features {
  margin-top: 28px;
  flex: 1;
}

.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-block: 8px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.card--panel .price-features li {
  color: var(--on-panel-muted);
}

.price-features svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--brand);
}

.card--panel .price-features svg {
  color: var(--brand);
}

.price-features strong {
  color: var(--ink);
}

.card--panel .price-features strong {
  color: var(--on-panel);
}

.pricing-note {
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-faint);
  margin-top: 40px;
}

@media (max-width: 980px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
}

/* ---------- CTA final ---------- */

.cta-final {
  background: var(--panel);
  color: var(--on-panel);
  padding-block: 112px;
  position: relative;
  overflow: hidden;
}

/* Trama de puntos: textura de papel pautado, que es de lo que trata el
   producto. Se desvanece con una máscara antes de llegar al texto para
   que dé materia sin competir con la lectura. Sustituye al orbe radial
   centrado de 720px que había aquí: ese destello detrás de un titular
   centrado es el fondo más repetido del género y no decía nada de esta
   marca en concreto. */
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 135, 145, 0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 58%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 58%);
  pointer-events: none;
}

/* Luz lateral, fuera de eje: sugiere volumen sin anunciarse. */
.cta-final::after {
  content: "";
  position: absolute;
  top: -25%;
  left: -12%;
  width: 68%;
  height: 150%;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 135, 145, 0.3) 0%,
    rgba(14, 40, 48, 0) 68%
  );
  pointer-events: none;
}

/* z-index explícito: ::after es el último hijo y, sin esto, su degradado
   se pintaría por encima del titular. */
.cta-final .container {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
}

.cta-final h2 {
  color: var(--on-panel);
  font-size: clamp(2rem, 4vw, 3rem);
}

.cta-final .lead {
  color: var(--on-panel-muted);
  margin-top: 20px;
}

.cta-final .hero-actions {
  justify-content: center;
}

.cta-final .btn-ghost {
  background: transparent;
  border-color: var(--on-panel-line);
  color: var(--on-panel);
}

.cta-final .btn-ghost:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.cta-final-note {
  margin-top: 24px;
  font-size: 0.85rem;
  color: var(--on-panel-muted);
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--panel);
  border-top: 1px solid var(--on-panel-line);
  color: var(--on-panel-muted);
  padding-block: 64px 40px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer-brand .brand {
  color: var(--on-panel);
  margin-bottom: 14px;
}

.footer-brand p {
  font-size: 0.9rem;
  max-width: 30ch;
}

.footer-col h4 {
  color: var(--on-panel);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.footer-col li + li {
  margin-top: 10px;
}

.footer-col a {
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--brand);
}

.footer-bottom {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--on-panel-line);
  font-size: 0.82rem;
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

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

/* =========================================================
   SECCIÓN "EL INFORME" — recreación fiel de la interfaz
   ---------------------------------------------------------
   El documento de la derecha NO es una captura: es HTML con
   los mismos tokens que usa el informe real que genera el
   sistema. Nítido en retina, sin peso de imagen, y se
   actualiza solo cuando cambie el producto.

   Rompe deliberadamente el centrado del resto de la página:
   copy anclado a la izquierda, documento sangrando hacia el
   borde derecho. Es la única sección con esa tensión, y por
   eso funciona.
   ========================================================= */

.report {
  background: var(--panel);
  color: var(--on-panel);
  overflow: hidden;
}

/* El documento va a la IZQUIERDA y el texto a la derecha: es la única
   sección del recorrido que invierte el eje. Sin esto, portal, informe y
   facturación caen las tres con el visual a la derecha y el bloque entero
   se lee como la misma sección repetida. */
.report-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 64px;
  align-items: center;
}

.report-doc-wrap { order: 1; }
.report-copy { order: 2; }

.report-copy .eyebrow { color: var(--brand); }

.report-copy h2 {
  color: var(--on-panel);
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

.report-copy h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--brand);
  font-size: 1.06em;
}

.report-copy > p {
  color: var(--on-panel-muted);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 46ch;
}

/* Lista de capacidades: sin iconos de librería. Una regla
   vertical y un dato duro por línea. */
.report-points {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  gap: 18px;
}

.report-points li {
  border-left: 2px solid var(--on-panel-line);
  padding-left: 16px;
}

.report-points strong {
  display: block;
  color: var(--on-panel);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 3px;
}

.report-points span {
  color: var(--on-panel-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ---------- El documento ---------- */

.report-doc-wrap {
  position: relative;
  /* Sangra hacia el borde izquierdo del viewport: el documento
     se sale de la caja del contenedor a propósito. */
  margin-left: -110px;
  perspective: 1600px;
}

.report-doc {
  position: relative;
  z-index: 1;
  background: #ffffff;
  color: #1f2937;
  border-radius: 4px;
  padding: 30px 32px;
  font-size: 11.5px;
  line-height: 1.5;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.6);
  /* Inclinación espejada respecto al eje: el documento nace del borde
     izquierdo, así que el punto de fuga es el derecho. */
  transform: rotateY(7deg) rotateX(1.5deg);
  transform-origin: right center;
}

.report-doc-head {
  border-bottom: 2px solid var(--brand);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.report-doc-kicker {
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 4px;
}

.report-doc-head h3 {
  font-size: 17px;
  margin: 0;
  color: #111827;
  letter-spacing: -0.01em;
}

.report-doc-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 14px;
  font-size: 10px;
  margin-bottom: 16px;
}

.report-doc-meta dt { color: #9ca3af; }
.report-doc-meta dd { margin: 0; color: #374151; font-weight: 500; }

.report-doc h4 {
  font-size: 10.5px;
  color: var(--brand);
  text-transform: none;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 4px;
  margin: 16px 0 8px;
  letter-spacing: 0;
}

/* Aviso de alcance: el detalle que ningún competidor imprime */
.report-doc-note {
  border-left: 3px solid #b45309;
  background: #fffbeb;
  padding: 8px 10px;
  font-size: 9.5px;
  color: #78350f;
  line-height: 1.5;
  margin: 10px 0 0;
}

.report-doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}

.report-doc-table th {
  background: #f3f4f6;
  text-align: left;
  padding: 5px 7px;
  border: 1px solid #e5e7eb;
  font-weight: 700;
  color: #374151;
  font-size: 9px;
}

.report-doc-table td {
  padding: 5px 7px;
  border: 1px solid #eef0f2;
}

.report-doc-up { color: #b91c1c; font-weight: 700; }
.report-doc-down { color: #047857; font-weight: 700; }
.report-doc-flat { color: #6b7280; font-weight: 700; }

.report-doc-serie {
  font-variant-numeric: tabular-nums;
  color: #4b5563;
}

/* Etiqueta flotante que señala el dato diferencial */
/* La etiqueta iba a la izquierda y quedaba PISADA por el documento: el
   rotateY acerca su borde izquierdo al espectador y lo tapaba, dejando ver
   solo un trozo de recuadro verde sin sentido. Ahora va abajo, apuntando al
   aviso de alcance del que habla, y con z-index por encima. */
.report-flag {
  position: absolute;
  right: -30px;
  bottom: 54px;
  z-index: 5;
  background: var(--brand);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 12px;
  border-radius: 6px;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.55);
  max-width: 196px;
  line-height: 1.4;
}

@media (max-width: 900px) {
  .report-grid { grid-template-columns: 1fr; gap: 40px; }
  /* En una columna manda el texto: la inversión del eje no aplica. */
  .report-copy { order: 1; }
  .report-doc-wrap { order: 2; margin-inline: 0; perspective: none; }
  .report-doc { transform: none; }
  .report-flag { display: none; }
}



/* =========================================================
   HERO: LA MISMA CONSULTA EN EL BOLSILLO
   ---------------------------------------------------------
   Proporción REAL de teléfono: 9/19.5, la de un iPhone o un
   Pixel actual. La versión anterior dejaba que el alto lo
   marcara el contenido y salía 1:1.6 — rechoncho, de juguete.
   El aspect-ratio manda y el contenido se reparte dentro.

   Bisel uniforme de 6px por los cuatro lados y radio interior
   = radio exterior menos bisel. Un bisel desigual es lo que
   delata un mockup mal hecho.
   ========================================================= */

.hero-devices { position: relative; }

.hero-phone {
  position: absolute;
  right: -24px;
  bottom: -38px;
  width: 138px;
  aspect-ratio: 9 / 19.5;
  padding: 6px;
  border-radius: 21px;
  background: #0f2429;
  box-shadow: 0 30px 56px -20px rgba(13, 42, 51, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  display: flex;
  z-index: 3;
}

.hero-phone-screen {
  flex: 1;
  min-height: 0;
  border-radius: 15px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.hero-phone-top {
  background: var(--brand);
  color: #ffffff;
  padding: 14px 10px 10px;
  flex-shrink: 0;
}

.hero-phone-top small {
  display: block;
  font-size: 6.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-bottom: 3px;
}

.hero-phone-top strong { font-size: 11px; font-weight: 700; letter-spacing: -0.01em; }

.hero-phone-list {
  flex: 1;
  min-height: 0;
  padding: 8px 7px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-phone-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 5px;
  border-radius: 7px;
  border: 1px solid var(--line);
}

.hero-phone-row--now { background: var(--brand-tint); border-color: transparent; }

.hero-phone-time {
  font-size: 7.5px;
  font-weight: 700;
  color: var(--brand-deep);
  font-variant-numeric: tabular-nums;
}

.hero-phone-who {
  flex: 1;
  min-width: 0;
  font-size: 7.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-phone-who span { display: block; font-size: 6px; font-weight: 500; color: var(--ink-faint); }

.hero-phone-go {
  font-size: 6px;
  font-weight: 700;
  color: #ffffff;
  background: var(--brand);
  border-radius: 99px;
  padding: 3px 5px;
}

/* Empuja el aviso al fondo de la pantalla: así el hueco vertical
   se reparte como en una app real, no queda un vacío arriba. */
.hero-phone-note {
  margin-top: auto;
  padding: 7px;
  border-radius: 7px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 6px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.hero-phone-note b { color: var(--ink); font-weight: 700; }

@media (max-width: 900px) { .hero-phone { width: 116px; right: -10px; bottom: -26px; } }
@media (max-width: 560px) { .hero-phone { display: none; } }

/* =========================================================
   SECCIÓN "UN CAMBIO, TODO SE ACOMODA"
   ---------------------------------------------------------
   El argumento de la centralización no se gana enumerando
   módulos: se gana enseñando que un solo hecho mueve el resto
   del sistema. Un paciente cancela y hay cuatro consecuencias
   que, con cuaderno y Excel, harías a mano una por una.

   La línea vertical con el pulso viajando es la ÚNICA
   animación decorativa de la página. Si hubiera cinco, no
   significaría nada; siendo una, dirige la mirada del hecho
   a sus consecuencias.
   ========================================================= */

.ripple-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 0 44px;
  align-items: center;
}

/* El hecho que dispara todo */
.ripple-trigger {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  box-shadow: var(--shadow-md);
}

.ripple-trigger-when {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 8px;
}

.ripple-trigger p {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ripple-trigger p b { color: var(--clay); font-weight: 700; }

.ripple-trigger-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* La columna que conecta el hecho con sus consecuencias */
/* Aqui vivia .ripple-spine: una linea vertical con un destello que la recorria
   en bucle. Imitaba una barra de progreso sin serlo y no decia nada sobre el
   contenido. La relacion causa-efecto que intentaba sugerir ahora se enuncia
   con palabras sobre las tarjetas, que ademas aporta el dato de cuantas son. */
.ripple-effects-label {
  margin: 0 0 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}


.ripple-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ripple-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 15px 16px;
}

.ripple-card h3 {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}

/* Fragmentos de interfaz real dentro de cada tarjeta */
.ripple-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.78rem;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--paper);
}

.ripple-line + .ripple-line { margin-top: 5px; }
.ripple-line--gone { color: var(--ink-faint); text-decoration: line-through; }
.ripple-line--free { background: var(--brand-tint); color: var(--brand-deep); font-weight: 700; }

.ripple-num {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-variant-numeric: tabular-nums;
}

.ripple-num s { color: var(--ink-faint); font-size: 1.05rem; }
.ripple-num strong { color: var(--ink); font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; }
.ripple-num span { font-size: 0.76rem; color: var(--ink-soft); }

.ripple-msg {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ink-soft);
  background: var(--paper);
  border-radius: 6px;
  padding: 9px 10px;
}

.ripple-msg b { color: var(--ink); font-weight: 600; }

.ripple-foot {
  margin: 40px 0 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.ripple-foot b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .ripple-grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 560px) {
  .ripple-cards { grid-template-columns: 1fr; }
}

/* =========================================================
   SECCIÓN "PLAN DE TRATAMIENTO"
   ---------------------------------------------------------
   Espejo de la sección del informe: allí el copy va a la
   izquierda y el documento a la derecha; aquí al revés. La
   alternancia crea ritmo sin que ninguna de las dos parezca
   la plantilla de la otra.

   La tarjeta reproduce el módulo real: objetivo tomado de la
   biblioteca del enfoque, avance de 1 a 10 registrado sesión
   a sesión, y las tareas que cuelgan de ese objetivo.
   ========================================================= */

.plan-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  gap: 64px;
  align-items: center;
}

.plan-copy h2 em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--brand-deep);
  font-size: 1.06em;
}

.plan-copy > p {
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.65;
  margin: 0 0 26px;
  max-width: 48ch;
}

.plan-points { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 16px; }
.plan-points li { border-left: 2px solid var(--line); padding-left: 16px; }
.plan-points strong { display: block; color: var(--ink); font-size: 0.95rem; font-weight: 600; margin-bottom: 3px; }
.plan-points span { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.55; }

/* ---------- La tarjeta del plan ---------- */

.plan-card-wrap { position: relative; }

.plan-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.plan-card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.plan-card-head p { margin: 0; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.plan-card-head h3 { margin: 3px 0 0; font-size: 15px; color: var(--ink); letter-spacing: -0.01em; }

.plan-phase {
  display: inline-block;
  margin: 14px 20px 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-deep);
  background: var(--brand-tint);
  border-radius: 99px;
  padding: 4px 10px;
}

.plan-obj { padding: 12px 20px 18px; }

.plan-obj-title { font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 0 0 3px; }
.plan-obj-desc { font-size: 11.5px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 14px; }

/* Evolución del objetivo: el dato que convierte una impresión en una curva */
.plan-progress {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.plan-progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}

.plan-progress-top span { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.plan-progress-top b { font-size: 17px; color: var(--brand-deep); font-variant-numeric: tabular-nums; }
.plan-progress-top b i { font-size: 11px; font-style: normal; color: var(--ink-faint); font-weight: 500; }

.plan-spark { display: block; width: 100%; height: 46px; }

.plan-progress-foot {
  margin: 9px 0 0;
  font-size: 10.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  border-top: 1px dashed var(--line);
  padding-top: 8px;
}

.plan-progress-foot b { color: var(--ink); font-weight: 600; }

/* Tareas colgadas del objetivo */
.plan-tasks { margin: 14px 0 0; padding: 0; list-style: none; }

.plan-tasks li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  color: var(--ink);
  padding: 7px 0;
  border-top: 1px solid var(--line2, #eef2f4);
}

.plan-tasks li:first-child { border-top: none; }

.plan-check {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  flex-shrink: 0;
  border: 1.5px solid var(--line);
  position: relative;
}

.plan-check--done { background: var(--brand); border-color: var(--brand); }

.plan-check--done::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Mismo caso que .dash-appt em: "Hecha" y "Vence el 19" son estado de
   interfaz, no énfasis. Sin `font-family: inherit` salen en serif. */
.plan-tasks li em { font-family: inherit; font-style: normal; color: var(--ink-faint); font-size: 10.5px; margin-left: auto; }
.plan-tasks li.is-done { color: var(--ink-soft); }

@media (max-width: 900px) {
  .plan-grid { grid-template-columns: 1fr; gap: 36px; }
  .plan-card-wrap { order: 2; }
}

/* Nota de la recaída en el plan, en el tono del acento cálido */
.plan-dip { display: inline-block; margin-top: 4px; color: var(--clay); font-size: 10px; }

/* =========================================================
   SECCIÓN "FACTURACIÓN"
   ---------------------------------------------------------
   Compacta a propósito. La página ya va larga y este bloque
   no necesita una pantalla entera: el argumento se agota en
   una tabla y tres frases.
   ========================================================= */

.bill-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.bill-copy > p { color: var(--ink-soft); font-size: 1.02rem; line-height: 1.65; margin: 0 0 24px; max-width: 46ch; }

.bill-note {
  border-left: 2px solid var(--brand);
  padding-left: 16px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 28px;
}

.bill-note b { color: var(--ink); font-weight: 600; }

.bill-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.bill-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.bill-head p { margin: 0; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.bill-head strong { font-size: 19px; color: var(--ink); font-variant-numeric: tabular-nums; }

.bill-rows { padding: 6px 8px 10px; }

.bill-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
}

.bill-row + .bill-row { border-top: 1px solid var(--line2, #eef2f4); border-radius: 0; }
.bill-who { color: var(--ink); font-weight: 600; }
.bill-who span { display: block; font-size: 10.5px; font-weight: 500; color: var(--ink-faint); }
.bill-amount { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

.bill-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 99px;
  white-space: nowrap;
}

.bill-tag--paid { background: #ecfdf5; color: #047857; }
.bill-tag--due { background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line); }
.bill-tag--late { background: #fef2f2; color: #b91c1c; }

.bill-foot {
  border-top: 1px solid var(--line);
  padding: 12px 20px;
  background: var(--paper);
  font-size: 11.5px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}

.bill-foot b { color: var(--ink); }

/* =========================================================
   SECCIÓN "EL DASHBOARD"
   ---------------------------------------------------------
   Recreación del panel de inicio. Va a ancho completo, sin
   columna de texto al lado: es lo primero que un terapeuta ve
   cada mañana y merece ocupar el ancho como lo ocupa en la app.
   ========================================================= */

.dash-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.dash-kpi {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}

.dash-kpi p { margin: 0 0 6px; font-size: 11px; color: var(--ink-soft); line-height: 1.35; }
.dash-kpi strong { font-size: 1.6rem; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dash-kpi--brand strong { color: var(--brand-deep); }

.dash-panels { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; }

.dash-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

.dash-panel h3 { margin: 0 0 14px; font-size: 13px; color: var(--ink); }

.dash-appt {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 12.5px;
}

.dash-appt--now { background: var(--brand-tint); }
.dash-appt time { font-weight: 700; color: var(--brand-deep); font-variant-numeric: tabular-nums; }
.dash-appt span { color: var(--ink); font-weight: 600; }
/* `font-family: inherit` es imprescindible: la regla global de `em` impone
   la serif del acento editorial, y aquí estos <em> no son énfasis de autor
   sino etiquetas de interfaz de la simulación. Deben ir en la tipografía
   del resto del panel. */
.dash-appt em { font-family: inherit; font-style: normal; font-size: 10.5px; color: var(--ink-faint); }

/* Se cualifica con .dash-appt a propósito: la regla genérica
   `.dash-appt span` (0,1,1) le ganaba a `.dash-join` (0,1,0) y pintaba
   el texto del botón en color de tinta sobre el fondo de marca. */
.dash-appt .dash-join {
  font-size: 10px;
  font-weight: 700;
  color: #ffffff;
  background: var(--brand);
  border-radius: 99px;
  padding: 4px 10px;
}

.dash-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--paper);
  font-size: 12px;
  color: var(--ink);
}

.dash-alert + .dash-alert { margin-top: 8px; }
.dash-alert b { font-size: 15px; font-variant-numeric: tabular-nums; }
.dash-alert--late b { color: #b91c1c; }
.dash-alert--note b { color: var(--clay); }

@media (max-width: 900px) {
  .bill-grid { grid-template-columns: 1fr; gap: 34px; }
  .dash-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-panels { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .dash-strip { grid-template-columns: 1fr; }
}