/* Landing de atletismomaster.es (E9 · T9.4). Complementa el Bulma local (micss.css).
   Tokens: tinta #16232e (hero), turquesa #00d1b2 (acción, la de la app), turquesa oscura
   #0a8f7c (números sobre claro), beige #EFF0EB (fondo del sitio), papel #fff. */

.ld { --tinta: #16232e; --accion: #00d1b2; --accion-oscura: #0a8f7c; --papel: #fff; --linea: #d7d9d3;
      --texto: #2b2f33; --texto-suave: #5a6168; }
.ld p, .ld li { color: var(--texto); max-width: 65ch; line-height: 1.6; }
.ld h1, .ld h2, .ld h3 { color: var(--tinta); font-weight: 700; letter-spacing: -0.01em; }
.ld h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.15; margin-bottom: 1rem; }
.ld h3 { font-size: 1.25rem; margin-bottom: .35rem; }
.ld .ld-num { font-variant-numeric: tabular-nums; }
.ld a:not(.button) { color: var(--accion-oscura); text-decoration: underline; text-underline-offset: .15em; }
.ld a:not(.button):hover, .ld a:not(.button):focus { color: var(--tinta); }
.ld .button.is-primary { background: var(--accion); color: var(--tinta); font-weight: 700; }
.ld .button.is-primary:hover, .ld .button.is-primary:focus { background: #00b89c; }
.ld :focus-visible { outline: 3px solid var(--accion); outline-offset: 2px; }

/* Hero: banda de tinta con el titular y la fila de acta. */
.ld-hero { background: var(--tinta); color: #fff; padding: 3.5rem 0 3rem; }
.ld-hero h1 { color: #fff; font-size: clamp(2.2rem, 5.2vw, 3.6rem); line-height: 1.05; margin-bottom: 1rem; }
.ld-hero p { color: #d5dbe1; font-size: 1.15rem; }
.ld-hero .buttons { margin-top: 1.5rem; }
.ld-hero .button.is-light { background: transparent; color: #fff; border: 2px solid #ffffff55; }
.ld-hero .button.is-light:hover, .ld-hero .button.is-light:focus { border-color: #fff; background: transparent; color: #fff; }

/* La acta: una hoja de resultados con la fila del ejemplo. */
.ld-acta { background: var(--papel); color: var(--tinta); border-radius: 4px; padding: 1.25rem 1.5rem 1rem;
           box-shadow: 0 18px 40px rgba(0, 0, 0, .35); max-width: 30rem; margin-left: auto; }
.ld-acta header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--tinta);
                  padding-bottom: .5rem; margin-bottom: .75rem; font-weight: 700; }
.ld-acta header span:last-child { color: var(--texto-suave); font-weight: 400; font-size: .9rem; }
.ld-acta dl { display: grid; grid-template-columns: 1fr auto; row-gap: .35rem; column-gap: 1rem; margin: 0; }
.ld-acta dt { color: var(--texto-suave); }
.ld-acta dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ld-acta .ld-total { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline;
                     border-top: 1px solid var(--linea); margin-top: .5rem; padding-top: .6rem; }
.ld-acta .ld-total strong { font-size: 2.6rem; line-height: 1; color: var(--accion-oscura); font-variant-numeric: tabular-nums; }
.ld-acta figcaption, .ld-acta .ld-pie { color: var(--texto-suave); font-size: .8rem; margin-top: .75rem; max-width: none; }

/* Secciones. */
.ld-seccion { padding: 4rem 0; }
.ld-seccion + .ld-seccion { border-top: 1px solid var(--linea); }
.ld-intro { font-size: 1.1rem; margin-bottom: 2rem; }

/* Cómo se calcula: tres pasos, que sí son una secuencia. */
.ld-pasos { list-style: none; margin: 0; padding: 0; counter-reset: paso; display: grid; gap: 1.5rem; }
@media (min-width: 769px) { .ld-pasos { grid-template-columns: repeat(3, 1fr); } }
.ld-pasos li { counter-increment: paso; padding-top: .75rem; border-top: 3px solid var(--accion); max-width: none; }
.ld-pasos li::before { content: counter(paso); display: block; font-size: 2rem; font-weight: 700; color: var(--tinta);
                       line-height: 1; margin-bottom: .5rem; }
.ld-pasos li p { margin-bottom: .5rem; }
.ld-formula { font-family: "Roboto Mono", "DejaVu Sans Mono", monospace; font-size: .95rem; background: var(--papel);
              padding: .5rem .75rem; border-radius: 4px; display: inline-block; }
.ld-categorias { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.ld-categorias li { background: var(--papel); border: 1px solid var(--linea); border-radius: 999px; padding: .15rem .7rem;
                    font-variant-numeric: tabular-nums; font-size: .9rem; }

/* Calculadoras: filas con captura real, separadas por una línea; no tarjetas. */
.ld-calcs { list-style: none; margin: 0; padding: 0; }
.ld-calcs li { display: grid; gap: 1.25rem 2rem; padding: 1.75rem 0; border-top: 1px solid var(--linea); max-width: none; }
.ld-calcs li:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 769px) { .ld-calcs li { grid-template-columns: 2fr 3fr; align-items: center; } }
.ld-calcs img { display: block; width: 100%; border-radius: 4px; border: 1px solid var(--linea); background: var(--papel); }
.ld-calcs .buttons { margin-top: .75rem; }
.ld-calcs .button.is-small { font-weight: 600; }

/* Guías: lista simple con título, avance y hueco de vídeo. */
.ld-guias { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem 2.5rem; }
@media (min-width: 769px) { .ld-guias { grid-template-columns: 1fr 1fr; } }
.ld-guias li { max-width: none; border-left: 3px solid var(--accion); padding-left: 1rem; }
.ld-guias h3 a { text-decoration: none; color: var(--tinta); }
.ld-guias h3 a:hover, .ld-guias h3 a:focus { color: var(--accion-oscura); text-decoration: underline; }
.ld-guias p { margin-bottom: .25rem; }

/* Cuenta y colaborar. */
.ld-cuenta { background: var(--papel); border-radius: 6px; padding: 2rem; display: grid; gap: 1.5rem; }
@media (min-width: 769px) { .ld-cuenta { grid-template-columns: 3fr 2fr; align-items: center; } }
.ld-cuenta .buttons { justify-content: flex-start; }
.ld-colabora { display: grid; gap: 1.5rem; }
@media (min-width: 769px) { .ld-colabora { grid-template-columns: 1fr 1fr 1fr; } }
.ld-colabora > div { max-width: none; }
.ld-colabora form { margin-top: .75rem; }

@media (prefers-reduced-motion: no-preference) {
    .ld-acta { animation: ld-posar .6s ease-out both; }
    @keyframes ld-posar { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
}