/* Estilos por pantalla. Un bloque por pantalla, nombrado como su archivo en js/screens/. */

/* ---------- P0 · Hola ---------- */
.hello { justify-content: space-between; text-align: center; }

.hello__top { display: flex; justify-content: center; padding-top: var(--space-4); }
.hello__badge {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--route-border);
  border-radius: var(--radius-pill);
  color: var(--route-text-secondary);
}

.hello__hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }

.hello__avatar-btn {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  transition: transform var(--dur-press) var(--ease-out);
}
.hello__avatar-btn:active { transform: scale(0.97); }

.hello__name {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em;
}
.hello__role { margin: 0; color: var(--route-text-secondary); font-weight: var(--fw-medium); }
.hello__line {
  min-height: calc(var(--lh-h1) * 2);
  max-width: 300px;
  margin: var(--space-6) 0 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  font-weight: var(--fw-medium);
  color: var(--copilot-text);
  animation: screen-in var(--dur-base) var(--ease-out) both;
}
.hello__line:empty { animation: none; }

.hello__actions { display: grid; gap: var(--space-2); }
.hello__actions .btn--primary:disabled { opacity: 0.45; cursor: not-allowed; }
.hello__lab { color: var(--accent-label); }

/* ---------- P1 · Inicio ---------- */
.inicio { gap: var(--space-4); padding-bottom: 0; }
.inicio__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-2); }
.inicio__date { margin: 0; color: var(--text-secondary); font-size: var(--fs-label); text-transform: capitalize; }
.inicio__hello { margin: 2px 0 0; font-size: var(--fs-display-l); line-height: var(--lh-display-l); font-weight: var(--fw-extrabold); letter-spacing: -0.01em; }

/* La tarjeta de comisión es verde oscuro en ambos temas: su texto siempre es claro */
.earn { background: linear-gradient(150deg, var(--primary-700), var(--primary-900)); color: #eaf5f0; border: 0; }
.earn__label { margin: 0; color: var(--primary-200); font-weight: var(--fw-medium); }
.earn__value {
  margin: var(--space-1) 0 var(--space-4);
  font-size: var(--fs-hero); line-height: var(--lh-hero); font-weight: var(--fw-extrabold);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.earn__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.earn__stat { display: grid; gap: 4px; padding: var(--space-3); border-radius: var(--radius-md); background: rgba(255, 255, 255, 0.06); }
.earn__stat span { font-size: var(--fs-label); color: var(--primary-200); }
.earn__stat strong { font-size: var(--fs-display-m); font-variant-numeric: tabular-nums; justify-self: start; }
.earn__stat .tag-yellow { font-size: var(--fs-h1); }

.avail { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); transition: box-shadow 200ms ease; }
.avail.is-on { box-shadow: var(--shadow-1), inset 0 0 0 2px var(--success-light); }
.avail__title { margin: 0; font-size: var(--fs-h1); font-weight: var(--fw-extrabold); }
.avail__sub { margin: 2px 0 0; color: var(--text-secondary); }

.radar { position: relative; display: grid; place-items: center; min-height: 170px; flex: 1; }
.radar__ring {
  position: absolute; width: 140px; height: 140px; border-radius: 50%;
  border: 2px solid var(--copilot); opacity: 0;
}
.radar.is-on .radar__ring { animation: radar 2.4s var(--ease-out) infinite; }
.radar.is-on .radar__ring:nth-child(2) { animation-delay: 0.8s; }
.radar.is-on .radar__ring:nth-child(3) { animation-delay: 1.6s; }
.radar__me {
  position: relative; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--switch-off); color: var(--neutral-0);
  transition: background-color 200ms ease;
}
.radar.is-on .radar__me { background: var(--copilot-strong); box-shadow: 0 0 0 8px var(--copilot-soft); }
.radar__caption { position: absolute; bottom: 0; margin: 0; color: var(--text-secondary); font-size: var(--fs-label); font-weight: var(--fw-medium); }
@keyframes radar { 0% { opacity: 0.7; transform: scale(0.35); } 100% { opacity: 0; transform: scale(1.25); } }

/* ---------- P2 · Caso entrante ---------- */
.offer { gap: var(--space-3); transform: translateY(24px); opacity: 0; transition: transform 380ms var(--ease-drawer), opacity 240ms ease; }
.offer.is-in { transform: none; opacity: 1; }
.offer__top { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-2); }
.offer__kicker {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--copilot-strong); color: #fff;
  font-size: var(--fs-label); font-weight: var(--fw-extrabold); letter-spacing: 0.02em;
}
.countdown { position: relative; width: 56px; height: 56px; }
.countdown svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.countdown__track { fill: none; stroke: var(--route-border); stroke-width: 4; }
.countdown__bar { fill: none; stroke: var(--primary-300); stroke-width: 4; stroke-linecap: round; }
.offer.is-urgent .countdown__bar { stroke: var(--warning); }
.countdown__num { position: absolute; inset: 0; display: grid; place-items: center; font-weight: var(--fw-extrabold); font-size: var(--fs-h1); font-variant-numeric: tabular-nums; }

.offer__rulo { display: grid; justify-items: center; gap: var(--space-2); text-align: center; }
.offer__line { margin: 0; max-width: 300px; font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-medium); color: var(--copilot-text); }

.offer-card {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--route-surface-2), var(--route-surface));
  border: 1px solid var(--route-border);
  box-shadow: 0 20px 40px rgba(0, 27, 16, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
}
.offer-card__who { display: flex; align-items: center; gap: var(--space-3); }
.offer-card__name { margin: 0; font-weight: var(--fw-extrabold); font-size: var(--fs-h1); }
.offer-card__meta { margin: 0; color: var(--route-text-secondary); font-size: var(--fs-label); }
.offer-card__label { margin: var(--space-4) 0 0; color: var(--route-text-secondary); font-size: var(--fs-label); }
.offer-card__amount { margin: 0; font-size: var(--fs-hero); line-height: var(--lh-hero); font-weight: var(--fw-extrabold); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.offer-card__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.offer-card__earn {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--space-4); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); background: var(--accent-bg);
}
.offer-card__earn span { color: var(--accent-text); }
.offer-card__earn strong { font-size: var(--fs-display-m); color: var(--mint); font-variant-numeric: tabular-nums; }
.offer-card__why { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-3) 0 0; color: var(--route-text-secondary); font-size: var(--fs-label); line-height: var(--lh-label); }

.offer__actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--space-2); margin-top: auto; }

/* ---------- P3 · Prepárate ---------- */
.prep { gap: var(--space-3); }
.prep__stage { display: grid; justify-items: center; gap: var(--space-3); text-align: center; }
.prep__caption {
  width: 100%; max-width: 340px; height: 176px; margin: 0;
  font-size: var(--fs-display-m); line-height: var(--lh-display-m); font-weight: var(--fw-bold);
  color: var(--route-text);
}

.anchors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.anchor {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--route-surface); border: 1px solid var(--route-border);
  opacity: 0.28; transform: translateY(6px) scale(0.98);
  transition: opacity 260ms ease, transform 320ms var(--ease-out), border-color 260ms ease;
}
.anchor.is-on { opacity: 1; transform: none; border-color: var(--anchor-on); }
.anchor--risk { grid-column: 1 / -1; }
.anchor--medio.is-on { border-color: rgba(255, 206, 0, 0.5); }
.anchor--alto.is-on { border-color: rgba(244, 50, 50, 0.6); }
.anchor__k { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-label); }
.anchor__v { margin: 2px 0 0; font-size: var(--fs-display-l); line-height: var(--lh-display-l); font-weight: var(--fw-extrabold); }
.anchor__v--money { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.anchor__s { margin: 2px 0 0; color: var(--route-text-secondary); font-size: var(--fs-label); line-height: var(--lh-label); }
.anchor__risk { margin: var(--space-1) 0; }

.prep__actions { display: grid; gap: var(--space-2); margin-top: auto; }
.prep__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

/* ---------- P4 · En ruta ---------- */
.ruta { gap: var(--space-3); }
.ruta__map { position: relative; height: 260px; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--route-border); flex: none; }
.map { width: 100%; height: 100%; display: block; }
.map__bg { fill: var(--map-bg); }
.map__park { fill: var(--map-park); }
.map__grid path { stroke: var(--map-grid); stroke-width: 10; }
.map__avenue { stroke: var(--map-avenue); stroke-width: 18; fill: none; }
.map__route-bg { fill: none; stroke: var(--map-route-bg); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.map__route { fill: none; stroke: var(--map-route); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px var(--map-route-bg)); }
.map__route.is-drawing { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1.4s var(--ease-out) 200ms forwards; }
.map__runner { fill: #fff; stroke: var(--map-route); stroke-width: 2; filter: drop-shadow(0 0 6px var(--map-route)); }
.map__me-dot { fill: #34c0d7; stroke: #fff; stroke-width: 3; }
.map__me-pulse { fill: rgba(52, 192, 215, 0.25); animation: pulse-dot 2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.map__pin path { fill: #f43232; stroke: #fff; stroke-width: 2.5; }
.map__pin-hole { fill: #fff; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pulse-dot { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

.ruta__eta {
  position: absolute; left: 12px; bottom: 12px;
  display: grid; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md); background: var(--eta-bg); backdrop-filter: blur(8px);
  border: 1px solid var(--route-border);
}
.ruta__eta strong { font-size: var(--fs-display-m); line-height: var(--lh-display-m); font-variant-numeric: tabular-nums; }
.ruta__eta span { font-size: var(--fs-label); color: var(--route-text-secondary); }

.dest__k { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-label); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent-label); }
.dest__addr { margin: var(--space-1) 0 0; font-size: var(--fs-display-m); line-height: var(--lh-display-m); font-weight: var(--fw-extrabold); }
.dest__col { margin: 0; color: var(--route-text-secondary); }
.dest__facts { display: grid; gap: var(--space-2); margin: var(--space-3) 0 0; }
.dest__facts dt { font-size: var(--fs-label); color: var(--route-text-secondary); }
.dest__facts dd { margin: 0; font-weight: var(--fw-medium); }

.ruta__line { max-height: 96px; padding-left: var(--space-3); border-left: 3px solid var(--copilot); color: var(--copilot-text); font-weight: var(--fw-medium); }
.ruta__line:empty { display: none; }
.ruta__actions { margin-top: auto; }

/* ---------- P5 · Repaso en la puerta ---------- */
.door { gap: var(--space-3); }
.door__facade { margin: 0; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--route-border); background: #eef6f2; }
.facade { display: block; width: 100%; height: auto; }
.facade__sign { font: 800 9px var(--font-sans); fill: #2c3539; letter-spacing: 0.06em; }
.facade__sign--inv { fill: #f2f2f2; }
.facade__num { font: 800 9px var(--font-sans); fill: #2c3539; }
.door__facade figcaption { display: flex; align-items: center; gap: 6px; padding: var(--space-2) var(--space-3); background: var(--route-surface); color: var(--route-text-secondary); font-size: var(--fs-label); }

.door__rulo { display: flex; align-items: center; gap: var(--space-3); }
.door__k { margin: 0; font-size: var(--fs-label); font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--copilot-text); }
.door__line { max-height: 120px; margin: 2px 0 0; font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-bold); }

.recall { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.recall li { display: grid; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--route-surface); border: 1px solid var(--route-border); }
.recall span { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--route-text-secondary); font-weight: var(--fw-bold); }
.recall strong { font-size: var(--fs-body); line-height: var(--lh-body); }
.recall--medio { border-color: rgba(255, 206, 0, 0.45) !important; }
.recall--alto { border-color: rgba(244, 50, 50, 0.55) !important; }

.door__actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--space-2); margin-top: auto; }

/* ---------- P6 · Cobra ---------- */
.cobra { gap: var(--space-4); }
.cobra__title { margin: 0; font-size: var(--fs-display-l); line-height: var(--lh-display-l); font-weight: var(--fw-extrabold); }
.cobra__sub { margin: var(--space-1) 0 0; color: var(--text-secondary); }
.cobra__sub strong { color: var(--text-default); }

.outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.outcome {
  display: grid; gap: var(--space-2); justify-items: start; text-align: left;
  padding: var(--space-4); border-radius: var(--radius-lg);
  border: 1px solid var(--card-border); background: var(--bg-surface); box-shadow: var(--card-shadow);
  cursor: pointer; color: inherit;
  transition: transform var(--dur-press) var(--ease-out), border-color 160ms ease, box-shadow 160ms ease;
}
.outcome:active { transform: scale(0.97); }
.outcome strong { display: block; font-size: var(--fs-h1); }
.outcome small { color: var(--text-secondary); font-size: var(--fs-label); }
.outcome[aria-checked="true"] { border-color: var(--primary-500); box-shadow: inset 0 0 0 1px var(--primary-500), var(--card-shadow); background: var(--accent-bg); }
.outcome__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); }
.outcome__ico--ok { background: var(--success-subtle); color: var(--success-strong); }
.outcome__ico--info { background: var(--info-subtle); color: var(--info-strong); }
.outcome__ico--warn { background: var(--error-subtle); color: var(--error-strong); }

.detail { animation: screen-in 240ms var(--ease-out) both; }
.detail__label { margin: 0 0 var(--space-2); font-weight: var(--fw-bold); }
.keypad__display { margin: 0 0 var(--space-3); font-size: var(--fs-hero); line-height: var(--lh-hero); font-weight: var(--fw-extrabold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.keypad__key {
  min-height: 52px; border: 0; border-radius: var(--radius-md);
  background: var(--bg-surface); box-shadow: var(--card-shadow); border: 1px solid var(--card-border); color: inherit;
  font-size: var(--fs-display-m); font-weight: var(--fw-bold); cursor: pointer;
  transition: transform var(--dur-press) var(--ease-out), background-color 120ms ease;
}
.keypad__key:active { transform: scale(0.95); background: var(--accent-bg); }
.cobra__actions { margin-top: auto; }

/* ---------- P7 · Cierre ---------- */
.cierre { gap: var(--space-4); background: radial-gradient(420px 300px at 50% 12%, var(--glow), transparent 70%), var(--bg-app); }
.cierre.is-win { background: radial-gradient(460px 340px at 50% 12%, var(--win-glow), transparent 70%), var(--bg-app); }
.cierre__hero { display: grid; justify-items: center; gap: var(--space-3); padding-top: var(--space-6); text-align: center; }
.cierre__line { margin: 0; max-width: 320px; font-size: var(--fs-display-m); line-height: var(--lh-display-m); font-weight: var(--fw-bold); }
.cierre__who { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.cierre__name { margin: 0; font-weight: var(--fw-extrabold); font-size: var(--fs-h1); }
.cierre__meta { margin: 0; color: var(--text-secondary); font-size: var(--fs-label); }
.cierre__earn {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--space-4); padding: var(--space-4);
  border-radius: var(--radius-md); background: var(--success-subtle);
}
.cierre__earn span { color: var(--success-strong); font-weight: var(--fw-bold); }
.cierre__earn strong { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); color: var(--success-strong); font-variant-numeric: tabular-nums; }
.cierre__actions { display: grid; gap: var(--space-1); margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .offer { transform: none; transition: opacity 200ms ease; }
  .anchor { transform: none; }
  .map__me-pulse, .radar__ring { animation: none !important; }
}

/* Tema oscuro: los tonos "subtle" de feedback del kit son para fondo claro; aquí se oscurecen */
:root:not([data-theme="light"]) .outcome__ico--ok { background: rgba(30, 177, 0, 0.16); color: #6fe08a; }
:root:not([data-theme="light"]) .outcome__ico--info { background: rgba(52, 192, 215, 0.16); color: #7fdcec; }
:root:not([data-theme="light"]) .outcome__ico--warn { background: rgba(244, 50, 50, 0.16); color: #ff8a8a; }
:root:not([data-theme="light"]) .cierre__earn { background: rgba(30, 177, 0, 0.14); }
:root:not([data-theme="light"]) .cierre__earn span,
:root:not([data-theme="light"]) .cierre__earn strong { color: #6fe08a; }

/* ---------- Flujo de frases (lo nuevo abajo, lo anterior sube y se desvanece) ---------- */
.stream {
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2);
  overflow: hidden;
}
/* Sin máscara ni scale: el degradado sobre el texto y el escalado fraccional lo hacían ver manchado */
.stream__line {
  margin: 0; flex: none;
  transition: opacity 320ms ease;
}
.stream__line[data-age="0"] { animation: line-in 380ms var(--ease-out) both; }
.stream__line[data-age="1"] { opacity: 0.5; }
.stream__line[data-age="2"] { opacity: 0.25; }
@keyframes line-in { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } }
@media (prefers-reduced-motion: reduce) {
  .stream__line[data-age="0"] { animation-name: fade; }
  .stream__line { transition: opacity 200ms ease; }
}


/* ---------- Mis casos ---------- */
.casos { gap: var(--space-4); padding-bottom: 0; }
.casos__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: 0; }
.casos__stats div { display: grid; gap: 2px; padding: var(--space-3); border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--card-border); }
.casos__stats dt { font-size: var(--fs-caption); color: var(--text-secondary); font-weight: var(--fw-medium); }
.casos__stats dd { margin: 0; font-size: var(--fs-h1); font-weight: var(--fw-extrabold); font-variant-numeric: tabular-nums; }
.casos__win { background: var(--success-subtle) !important; border-color: transparent !important; }
.casos__win dt, .casos__win dd { color: var(--success-strong); }
.casos__list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.log { padding: var(--space-4); }
.log__head { display: flex; align-items: center; gap: var(--space-3); }
.log__who { flex: 1; min-width: 0; }
.log__name { margin: 0; font-weight: var(--fw-extrabold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log__meta { margin: 0; color: var(--text-secondary); font-size: var(--fs-label); }
.log__result {
  display: inline-flex; align-items: center; min-height: 28px; margin: var(--space-3) 0 0; padding: 0 var(--space-3);
  border-radius: var(--radius-pill); font-size: var(--fs-label); font-weight: var(--fw-bold);
}
.log__result--ok    { background: var(--success-subtle); color: var(--success-strong); }
.log__result--info  { background: var(--info-subtle);    color: var(--info-strong); }
.log__result--warn  { background: var(--warning-light);  color: var(--warning-strong); }
.log__result--bad   { background: var(--error-subtle);   color: var(--error-strong); }
.log__result--muted { background: var(--chip-bg);        color: var(--text-secondary); }
.log__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-3) 0 0; }
.log__facts dt { font-size: var(--fs-caption); color: var(--text-secondary); }
.log__facts dd { margin: 0; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.log__earn { color: var(--success-strong); }
.casos__empty { display: grid; justify-items: center; gap: var(--space-2); text-align: center; color: var(--text-secondary); }
.casos__empty-title { margin: 0; color: var(--text-default); font-weight: var(--fw-extrabold); font-size: var(--fs-h1); }
.casos__empty-text { margin: 0 0 var(--space-2); max-width: 280px; }
:root:not([data-theme="light"]) .log__result--ok,
:root:not([data-theme="light"]) .casos__win { background: rgba(30, 177, 0, 0.16) !important; }
:root:not([data-theme="light"]) .log__result--ok,
:root:not([data-theme="light"]) .casos__win dt,
:root:not([data-theme="light"]) .casos__win dd,
:root:not([data-theme="light"]) .log__earn { color: #6fe08a; }
:root:not([data-theme="light"]) .log__result--info { background: rgba(52, 192, 215, 0.16); color: #7fdcec; }
:root:not([data-theme="light"]) .log__result--warn { background: rgba(255, 206, 0, 0.16); color: var(--warning); }
:root:not([data-theme="light"]) .log__result--bad  { background: rgba(244, 50, 50, 0.18); color: #ff8a8a; }
.casos__sub { text-transform: none; }