/* Ajustes de lectura para la propuesta de textos; se conserva el diseño original. */
.hero-diorama h1 { font-size: clamp(2.3rem, 4.8vw, 4.1rem); text-wrap: balance; }
.hero-diorama .hero-lead { font-size: 1rem; line-height: 1.65; max-width: 46ch; }
.hero-diorama .hero-actions { flex-wrap: wrap; }
.card h3, .page-card h3 { text-wrap: balance; }
.card p, .page-card p { font-size: 1rem; line-height: 1.65; }
.hero-diorama .hero-actions .btn { font-size: .95rem; }
.prototype-form-note { color: var(--cyan); font-size: .875rem; line-height: 1.5; }
.zones {
  width: min(1120px, calc(100% - 2 * var(--gutter)));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: 22px;
}
.zones button { white-space: normal; justify-content: center; text-align: center; line-height: 1.3; min-width: 0; min-height: 44px; }
.diorama-label { max-width: min(180px, 42vw); white-space: normal; text-align: center; line-height: 1.35; letter-spacing: .06em; font-size: .75rem; }
.zp-eyebrow:empty { display: none; }
.zp-title { padding-right: 2rem; text-wrap: balance; }
.zp-list li { font-size: 1rem; line-height: 1.5; }
.zone-panel { top: calc(var(--header-h) + 1rem); transform: translateX(28px); max-height: calc(100% - var(--header-h) - 12rem); overflow-y: auto; overscroll-behavior: contain; }
.zone-panel.open { transform: none; }
/* Ejemplos de uso de las seis funcionalidades. */
.service-card { scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.service-card .idx { font-size: .875rem; letter-spacing: .1em; line-height: 1.4; color: var(--cyan); }
.service-card h3 { font-size: clamp(1.35rem, 2vw, 1.65rem); line-height: 1.25; }
.service-card > p { max-width: none; }
.service-card .card-links { margin-top: 0; min-height: 3.5rem; justify-content: flex-start; }
.service-card .card-link { line-height: 1.5; }
.service-card .card-more { font-size: .875rem; }
.service-example { margin: auto 0 0; padding: 1rem; border: 1px solid var(--line-strong); border-radius: 14px; background: rgba(0,0,0,.22); display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.service-example figcaption { font-size: .875rem; color: var(--ink-soft); line-height: 1.5; }
.example-web { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1rem; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(120deg,rgba(79,216,245,.08),rgba(139,124,255,.06)); }
.example-web > span:first-child { font-size: .875rem; color: var(--ink-soft); }
.example-web strong { font-size: 1rem; font-family: var(--font-head); }
.example-tag { display: inline-block; font-size: .875rem; color: var(--cyan); }
.example-flow { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.2rem; list-style: none; padding: 0; margin: 0; }
.example-flow li { min-width: 0; position: relative; display: flex; flex-direction: column; gap: .3rem; padding: .75rem .5rem; text-align: center; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.025); }
.example-flow li:not(:last-child)::after { content: '→'; position: absolute; right: -1rem; top: 40%; color: var(--cyan); font-size: .9rem; }
.example-flow b { font-size: .875rem; line-height: 1.5; overflow-wrap: anywhere; }
.example-flow li > span { font-size: .875rem; color: var(--ink-soft); line-height: 1.45; }
.example-records { margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.example-records > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: .6rem; padding: .75rem; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.example-records dt { font-size: .9375rem; line-height: 1.5; }
.example-records dd { margin: 0; font-size: .875rem; line-height: 1.5; color: var(--cyan); text-align: right; }
.service-card .example-note { max-width: none; font-size: .875rem; line-height: 1.5; color: var(--muted); margin: 0; }
.example-timeline { list-style: none; display: flex; flex-direction: column; gap: .8rem; margin: 0; padding: 0; }
.example-timeline li { display: flex; align-items: flex-start; gap: .8rem; }
.example-timeline li > span { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--violet-soft); color: var(--cyan); font-size: .875rem; }
.example-timeline div { display: flex; flex-direction: column; gap: .25rem; }
.example-timeline b { font-size: .9375rem; }
.example-timeline small { font-size: .875rem; line-height: 1.5; color: var(--ink-soft); }
.example-conversation { display: flex; flex-direction: column; gap: .65rem; }
.service-card .example-message { display: flex; flex-direction: column; gap: .35rem; font-size: .9375rem; line-height: 1.5; padding: .8rem 1rem; margin: 0; max-width: 90%; border-radius: 12px; }
.example-message > span { font-size: .875rem; color: var(--ink-soft); }
.example-message.is-user { align-self: flex-end; background: rgba(255,255,255,.07); }
.example-message.is-assistant { align-self: flex-start; background: var(--violet-soft); border: 1px solid rgba(139,124,255,.25); }
.example-network { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.example-sources { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.example-sources > span { padding: .45rem .7rem; border-radius: 8px; border: 1px solid var(--line); font-size: .875rem; line-height: 1.4; }
.example-arrow { color: var(--cyan); font-size: 1.1rem; }
.example-hub { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .7rem 1.2rem; border-radius: 10px; border: 1px solid rgba(79,216,245,.4); background: rgba(79,216,245,.06); text-align: center; }
.example-hub b { font-size: 1rem; }
.example-hub span { font-size: .875rem; color: var(--ink-soft); }
.example-review { display: flex; gap: .65rem; align-items: flex-start; padding-top: .2rem; font-size: .875rem; line-height: 1.5; color: var(--ink-soft); }
.example-review > span { color: var(--cyan); }
.services-example-note { max-width: 76ch; margin: 1.5rem 0 0; font-size: .875rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 600px) {
  .service-card { padding: 1.25rem; }
  .service-example { padding: .875rem; }
  .example-flow { grid-template-columns: minmax(0,1fr); gap: 1.25rem; }
  .example-flow li { padding: .65rem; }
  .example-flow li:not(:last-child)::after { content: '↓'; top: auto; bottom: -1.15rem; right: calc(50% - .3rem); }
  .example-records > div { grid-template-columns: minmax(0,1fr); gap: .2rem; }
  .example-records dd { text-align: left; }
}
@media (min-width: 961px) and (max-height: 760px) {
  .hero-diorama { min-height: 780px; }
}
@media (max-width: 960px) {
  .hero-diorama { min-height: max(900px, 100svh); }
  .hero-diorama h1 { font-size: clamp(2.3rem, 7.5vw, 3.2rem); }
  .hero-diorama .hero-lead { max-width: 48ch; }
  .zones { width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zones button { font-size: .875rem; }
  .zone-panel { top: calc(var(--header-h) + 1rem); bottom: auto; max-height: calc(100% - var(--header-h) - 14rem); }
}