/* Estilos exclusivos de la página de Teclas. */
.teclas-detail { display: grid; gap: 28px; }

.teclas-detail-hero,
.teclas-detail-section {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .055);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .16);
}

.teclas-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(260px, .92fr);
  gap: 32px;
  align-items: center;
  padding: clamp(28px, 5vw, 52px);
  background: radial-gradient(circle at 88% 12%, rgba(0, 157, 255, .28), transparent 32%), rgba(255, 255, 255, .055);
}

.teclas-detail h1,
.teclas-detail h2,
.teclas-detail h3 { color: var(--white); }

.teclas-detail h1 { margin: 8px 0 16px; font-size: clamp(2.2rem, 5vw, 4.1rem); line-height: 1.04; }
.teclas-detail .lead,
.teclas-detail p { color: #d8e6f2; }
.teclas-detail .lead { max-width: 620px; margin: 0; font-size: 1.08rem; line-height: 1.65; }

.teclas-brand { display: flex; align-items: center; gap: 14px; }
.teclas-brand img { width: 68px; height: 68px; flex: 0 0 auto; border-radius: 15px; box-shadow: 0 10px 24px rgba(0, 112, 235, .22); }
.teclas-brand .eyebrow { margin: 0; }

.teclas-detail-badges,
.teclas-trust-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }

.teclas-detail-badges span,
.teclas-trust-list span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  font-size: .82rem;
  font-weight: 800;
}

.teclas-downloads { padding: 20px; border: 1px solid #cfe3fb; border-radius: var(--radius); background: #f7fbff; box-shadow: 0 16px 36px rgba(0, 112, 235, .10); }
.teclas-downloads-heading { margin-bottom: 14px; }
.teclas-downloads-heading .eyebrow { margin-bottom: 3px; }
.teclas-downloads h2 { margin: 0; color: var(--g0-blue) !important; font-size: 1.35rem; }
.teclas-download-card { padding: 12px; border: 1px solid #d7e6f6; border-radius: 12px; background: var(--white); }
.teclas-download-card + .teclas-download-card { margin-top: 10px; }
.teclas-download-card .btn { width: 100%; justify-content: center; }
.teclas-download-qr { width: 96px; height: 96px; margin: 12px auto 0; }
.teclas-download-meta { display: grid; gap: 3px; margin-top: 11px; }
.teclas-download-meta strong { color: var(--dark) !important; font-size: .84rem; overflow-wrap: anywhere; }
.teclas-download-meta span { color: var(--body); font-size: .81rem; }
.teclas-checksum { display: grid; gap: 5px; margin-top: 11px; padding: 10px; border-radius: 9px; background: #f1f7fe; }
.teclas-checksum strong { color: #62758a !important; font-size: .72rem; letter-spacing: .04em; }
.teclas-checksum code { color: #06499e; font-size: .67rem; line-height: 1.45; overflow-wrap: anywhere; }
.teclas-release-links { display: flex; flex-wrap: wrap; gap: 9px 14px; margin-top: 15px; }
.teclas-release-links a { color: #06499e; font-size: .8rem; font-weight: 800; text-decoration: none; }
.teclas-release-links a:hover,
.teclas-release-links a:focus-visible { text-decoration: underline; }

.teclas-detail-section { padding: clamp(26px, 4vw, 42px); }
.teclas-detail-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); gap: 28px; align-items: center; }
.teclas-section-heading { max-width: 700px; margin-bottom: 24px; }
.teclas-section-heading h2,
.teclas-detail-intro h2,
.teclas-detail-closing h2 { margin: 7px 0 12px; font-size: clamp(1.65rem, 3vw, 2.5rem); line-height: 1.12; }
.teclas-section-heading p:not(.eyebrow),
.teclas-detail-intro p:not(.eyebrow),
.teclas-detail-closing p:not(.eyebrow) { margin: 0; line-height: 1.65; }
.teclas-feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.teclas-feature-grid article { min-height: 156px; padding: 20px; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius); background: rgba(255, 255, 255, .06); }
.teclas-feature-grid strong { display: block; margin-bottom: 9px; color: var(--white); }
.teclas-feature-grid p { margin: 0; font-size: .93rem; line-height: 1.5; }
.teclas-screenshot-placeholder { display: grid; min-height: 220px; margin-top: 26px; padding: 24px; place-items: center; color: #9ed8ff; border: 1px dashed rgba(141, 204, 255, .56); border-radius: var(--radius); background: rgba(0, 112, 235, .08); text-align: center; }
.teclas-screenshot-placeholder--hero { min-height: 300px; margin: 0; }
.teclas-screenshot-placeholder span { font-weight: 800; line-height: 1.45; }
.teclas-screenshot { overflow: hidden; min-height: 220px; margin: 26px 0 0; border: 1px solid rgba(141, 204, 255, .38); border-radius: var(--radius); background: rgba(0, 112, 235, .08); }
.teclas-screenshot img { display: block; width: 100%; min-height: 220px; max-height: 620px; object-fit: cover; }
.teclas-screenshot figcaption { padding: 11px 14px; color: #d8e6f2; border-top: 1px solid rgba(141, 204, 255, .2); font-size: .84rem; font-weight: 750; }
.teclas-screenshot--hero { min-height: 300px; margin: 0; }
.teclas-screenshot--hero img { min-height: 300px; }
.teclas-flow-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.teclas-flow-list li { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(0, 1.2fr); gap: 18px; padding: 17px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.teclas-flow-list li:last-child { border-bottom: 0; }
.teclas-flow-list strong { color: var(--white); }
.teclas-flow-list span { color: #d8e6f2; }
.teclas-detail-closing { background: radial-gradient(circle at 84% 18%, rgba(0, 157, 255, .24), transparent 34%), rgba(255, 255, 255, .055); }

/* Adaptación de Teclas al fondo claro de las páginas de detalle. */
.app-detail-section .teclas-detail-hero,
.app-detail-section .teclas-detail-section { border-color: var(--line); background: radial-gradient(circle at 88% 12%, rgba(0, 157, 255, .11), transparent 32%), var(--white); box-shadow: var(--card-shadow); }
.app-detail-section .teclas-detail h1,
.app-detail-section .teclas-detail h2,
.app-detail-section .teclas-detail h3,
.app-detail-section .teclas-feature-grid strong,
.app-detail-section .teclas-flow-list strong { color: var(--g0-blue); }
.app-detail-section .teclas-detail .lead,
.app-detail-section .teclas-detail p,
.app-detail-section .teclas-flow-list span { color: #243b53 !important; }
.app-detail-section .teclas-detail-badges span,
.app-detail-section .teclas-trust-list span { color: #06499e; border-color: #cfe3fb; background: #eef6ff; }
.app-detail-section .teclas-feature-grid article { border-color: var(--line); background: #f7fbff; }
.app-detail-section .teclas-flow-list li { border-color: var(--line); }
.app-detail-section .teclas-detail-closing { background: radial-gradient(circle at 84% 18%, rgba(0, 157, 255, .13), transparent 34%), #f2f8ff; }
.app-detail-section .teclas-screenshot { border-color: #cfe3fb; background: #f3f9ff; }
.app-detail-section .teclas-screenshot figcaption { color: var(--body); border-color: #dceaf8; }

@media (max-width: 860px) {
  .teclas-detail-hero,
  .teclas-detail-intro { grid-template-columns: 1fr; }
  .teclas-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .teclas-feature-grid,
  .teclas-flow-list li { grid-template-columns: 1fr; }
  .teclas-screenshot-placeholder--hero { min-height: 220px; }
  .teclas-screenshot--hero,
  .teclas-screenshot--hero img { min-height: 220px; }
}