/* Contenido didáctico añadido sin cambiar la composición existente. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

#funciones .module-index { color: var(--lc-accent); text-decoration: none; }
#funciones .module-body h3 a { color: inherit; text-decoration: none; }
#funciones .module-index:hover,
#funciones .module-body h3 a:hover { color: var(--lc-accent); }
#funciones .module-body h3 a:focus-visible,
#funciones .module-index:focus-visible,
.module-jump:focus-visible,
.detail-zoom:focus-visible,
.detail-action:focus-visible,
.guide-detail-link:focus-visible,
#sim-detail-link:focus-visible { outline: 3px solid var(--lc-accent); outline-offset: 4px; border-radius: 4px; }
.module-jump { display: inline-flex; align-items: center; gap: 8px; margin-top: 15px; color: var(--lc-accent); font-size: .85rem; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
.module-jump:hover { color: var(--lc-text); }

.depth-intro { margin: 48px 0 18px; padding: 26px 28px; border: 1px solid var(--lc-border); border-radius: 14px; background: var(--lc-panel-bg); }
.depth-intro .eyebrow { margin-bottom: 8px; }
.depth-intro h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.13; margin: 0 0 10px; }
.depth-intro p { max-width: 760px; margin: 0; color: var(--lc-muted); line-height: 1.6; }
.depth-difference { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.depth-difference span { display: inline-flex; align-items: center; border: 1px solid var(--lc-border); border-radius: 99px; padding: 7px 12px; color: var(--lc-text); font-size: .82rem; }
.depth-difference b { color: var(--lc-accent); margin-right: 5px; }
.product-details { display: grid; gap: 14px; }
.product-detail { scroll-margin-top: 80px; border: 1px solid var(--lc-border); border-radius: 14px; background: var(--lc-panel-bg); overflow: hidden; }
.product-detail[open] { box-shadow: 0 18px 38px #0004; }
.product-detail > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 18px; padding: 19px 25px; cursor: pointer; list-style: none; }
.product-detail > summary::-webkit-details-marker { display: none; }
.product-detail > summary:focus-visible { outline: 3px solid var(--lc-accent); outline-offset: -4px; }
.product-detail > summary:hover { background: var(--lc-soft); }
.product-detail[open] > summary { border-bottom: 1px solid var(--lc-border); }
.detail-kicker { grid-column: 1 / -1; color: var(--lc-accent); font-size: .68rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.product-detail > summary strong { color: var(--lc-text); font-size: clamp(1.12rem, 2vw, 1.45rem); line-height: 1.2; }
.detail-switch { color: var(--lc-accent); font-size: .82rem; font-weight: 800; white-space: nowrap; }
.detail-switch::before { content: 'Abrir explicación +'; }
.product-detail[open] .detail-switch::before { content: 'Cerrar explicación −'; }
.detail-content { padding: clamp(22px, 3vw, 35px); }
.detail-lead { max-width: 870px; margin: 0 0 24px; color: var(--lc-text) !important; font-size: 1.04rem; line-height: 1.58; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(20px, 3vw, 38px); }
.detail-steps { list-style: none; display: grid; gap: 17px; padding: 0; margin: 0; }
.detail-steps li { position: relative; padding-left: 43px; color: var(--lc-muted); line-height: 1.55; }
.detail-steps li::before { content: attr(data-step); position: absolute; top: 1px; left: 0; display: grid; place-items: center; height: 27px; width: 27px; border-radius: 50%; border: 1px solid var(--lc-accent); color: var(--lc-accent); font-size: .68rem; font-weight: 800; }
.detail-steps strong { display: block; margin-bottom: 3px; color: var(--lc-text); font-size: 1rem; }
.detail-visuals { display: grid; gap: 15px; min-width: 0; }
.detail-visuals.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.detail-visuals figure { min-width: 0; margin: 0; }
.detail-visuals .wide { grid-column: 1 / -1; }
.detail-zoom { display: block; width: 100%; padding: 0; border: 1px solid #9fb1bf; border-radius: 8px; background: #f4f8fa; overflow: hidden; cursor: zoom-in; }
.detail-zoom:hover { border-color: var(--lc-accent); }
.detail-zoom img { display: block; width: 100%; height: auto; }
.detail-visuals figcaption { margin: 7px 2px 0; color: var(--lc-muted); font-size: .78rem; line-height: 1.45; }
.detail-example { margin-top: 25px; border-left: 3px solid var(--lc-accent); background: var(--lc-soft); padding: 16px 18px; color: var(--lc-text); }
.detail-example span { display: block; color: var(--lc-accent); font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 5px; }
.detail-example p { margin: 0; color: var(--lc-text) !important; line-height: 1.55; }
.detail-output { margin-top: 23px; padding-top: 18px; border-top: 1px solid var(--lc-border); }
.detail-output h4 { margin: 0 0 10px; color: var(--lc-text); font-size: 1rem; }
.detail-output ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 0; padding-left: 19px; color: var(--lc-muted); line-height: 1.5; }
.detail-output li::marker { color: var(--lc-accent); }
.detail-caution { margin: 15px 0 0; color: var(--lc-muted); font-size: .84rem; line-height: 1.5; }
.detail-action { display: inline-block; margin-top: 19px; color: var(--lc-accent); font-size: .87rem; font-weight: 800; text-underline-offset: 4px; }

.guide-depth { margin: 0 0 18px; padding: 14px 16px; border: 1px solid #ffffff23; border-radius: 8px; background: #ffffff08; }
.guide-depth strong { display: block; color: var(--lc-accent); font-size: .76rem; margin-bottom: 4px; }
.guide-depth p { margin: 0 0 11px !important; font-size: .84rem !important; line-height: 1.48; }
.guide-depth p:last-of-type { margin-bottom: 7px !important; }
.guide-detail-link { display: inline-block; color: var(--lc-accent); font-size: .81rem; font-weight: 800; text-underline-offset: 4px; }
.demo-learn { margin: 10px 0 12px; padding-left: 11px; border-left: 2px solid var(--lc-accent); color: var(--lc-muted); font-size: .82rem; line-height: 1.45; }
#sim-detail-link { display: inline-block; margin-top: 14px; color: var(--lc-accent); font-size: .82rem; font-weight: 800; text-underline-offset: 4px; }

@media (max-width: 800px) { .detail-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .depth-intro { padding: 20px; margin-top: 34px; }
  .product-detail > summary { padding: 17px 18px; }
  .detail-switch { grid-column: 1 / -1; }
  .detail-content { padding: 19px; }
  .detail-output ul { grid-template-columns: 1fr; }
  .detail-visuals.two-up { grid-template-columns: 1fr; }
  .detail-visuals .wide { grid-column: auto; }
}