/* 02 · O custo de estar disponível (prefijo cd-). Contador plateado hasta 15.939 €.
   Reutiliza tokens de landing.css y el botón .cta-capsula. */

.cd { --cd-fundo: #05070b; --cd-fundo2: #090e16; --cd-cartao: #0b111b; --cd-azul: #00c8ff; --cd-luz: #35d8ff; --cd-azul-prof: #075b86;
  --cd-verde: #b5ff55; --cd-branco: #f5f8fc; --cd-branco2: #b8c4d3; --cd-discreto: #7f8b9a; --cd-linha: rgba(143, 183, 211, .16);
  position: relative; padding: clamp(80px, 10vw, 136px) 0; color: var(--cd-branco);
  background:
    radial-gradient(ellipse 48% 42% at 28% 40%, rgba(0, 200, 255, .13), transparent 70%),
    radial-gradient(ellipse 40% 50% at 86% 30%, rgba(7, 91, 134, .22), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 1px, transparent 1px 6px),
    linear-gradient(180deg, var(--cd-fundo) 0%, var(--cd-fundo2) 50%, var(--cd-fundo) 100%);
  border-top: 1px solid var(--cd-linha); border-bottom: 1px solid var(--cd-linha); }
.cd-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Momento 1 y 2: editorial + número protagonista + cálculo */
.cd__topo { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.cd__rot { display: flex; align-items: center; gap: 12px; font: 600 .76rem var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--cd-luz); }
.cd__rot span { width: 22px; height: 2px; background: var(--cd-azul); box-shadow: 0 0 8px var(--cd-azul); }
.cd__tit { margin: 18px 0 8px; max-width: 22ch; font: 800 clamp(1.35rem, 2.6vw, 2rem)/1.08 var(--f-tit); text-transform: uppercase; color: var(--cd-branco); }

.cd__numero { display: flex; align-items: baseline; gap: .2em; margin: clamp(6px, 1.5vw, 14px) 0 4px; line-height: .9; white-space: nowrap; }
.cd__valor, .cd__euro { font-family: var(--f-tit); font-weight: 800; letter-spacing: -.035em; color: #e4e9ee; }
.cd__valor { display: inline-block; text-align: right; font-size: clamp(3.6rem, 12.4vw, 10.4rem); font-variant-numeric: tabular-nums; }
.cd__euro { font-size: clamp(2.6rem, 8.6vw, 7.2rem); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cd__valor, .cd__euro {
    background-image: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.95) 50%, transparent 58%), linear-gradient(180deg, #f3f5f7 0%, #ffffff 20%, #d5dbe1 38%, #aeb7c2 49%, #697481 53%, #c4ccd4 68%, #eef1f4 86%, #aeb7c2 100%);
    background-size: 260% 100%, 100% 100%; background-position: 160% 0, 0 0; background-repeat: no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 2px 0 rgba(20, 28, 38, .9)) drop-shadow(0 0 34px rgba(0, 200, 255, .14)); }
}
.cd__numero.cd-brilho .cd__valor, .cd__numero.cd-brilho .cd__euro { animation: cd-brilho 1.4s .1s ease-out 1 both; }
@keyframes cd-brilho { from { background-position: 160% 0, 0 0; } to { background-position: -60% 0, 0 0; } }

.cd__legenda { font: 700 clamp(.95rem, 1.6vw, 1.15rem)/1.3 var(--f-tit); text-transform: uppercase; letter-spacing: .04em; color: var(--cd-branco); }
.cd__ref { margin-top: 8px; max-width: 58ch; font-size: .95rem; color: var(--cd-branco2); }

.cd__calculo { padding: 22px; border-radius: 18px; border: 1px solid rgba(0, 200, 255, .22); background: linear-gradient(170deg, rgba(11, 17, 27, .92), rgba(5, 7, 11, .92)); box-shadow: 0 0 0 5px rgba(0, 200, 255, .03), 0 30px 70px rgba(0,0,0,.45); }
.cd__calculo-cab { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--cd-linha); font: 600 .66rem var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--cd-discreto); }
.cd__calculo-cab span:first-child { color: var(--cd-luz); }
.cd__linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cd__linhas li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--cd-linha); background: var(--cd-cartao); }
.cd__n { font: 800 1.35rem/1 var(--f-tit); font-style: italic; color: var(--cd-luz); }
.cd__l { font-size: .9rem; line-height: 1.3; color: var(--cd-branco2); }
.cd__linhas b { font: 800 1.05rem var(--f-tit); color: var(--cd-branco); white-space: nowrap; }
.cd__linhas .cd__total { border-color: rgba(0, 200, 255, .45); background: linear-gradient(90deg, rgba(0, 200, 255, .1), rgba(0, 200, 255, .02)); }
.cd__total .cd__l { color: var(--cd-branco); font-weight: 700; }
.cd__total b { color: #fff; }
.cd__nota { margin-top: 14px; font-size: .8rem; line-height: 1.45; color: var(--cd-discreto); }
.cd__fontes { margin-top: 8px; font-size: .8rem; color: var(--cd-discreto); }
.cd__fontes a { color: var(--cd-branco2); text-underline-offset: 3px; }
.cd__fontes a:hover, .cd__fontes a:focus-visible { color: var(--cd-luz); }

/* Momento 3: puente honesto + cuatro capacidades + precio */
.cd__ponte { margin-top: clamp(56px, 7vw, 88px); padding-top: clamp(40px, 5vw, 56px); border-top: 1px solid var(--cd-linha); display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px 48px; align-items: end; }
.cd__frase { font: 800 clamp(1.6rem, 3.6vw, 2.8rem)/1.02 var(--f-tit); text-transform: uppercase; letter-spacing: -.01em; }
.cd__frase span { display: block; color: var(--cd-branco2); }
.cd__frase strong { display: block; font-style: italic; color: var(--cd-luz); text-shadow: 0 0 28px rgba(0, 200, 255, .3); }
.cd__ponte p { color: var(--cd-branco2); max-width: 52ch; }

.cd__cartoes { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cd-cartao { position: relative; padding: 22px 20px 24px; border-radius: 14px; border: 1px solid var(--cd-linha); background: linear-gradient(180deg, #0d1420, var(--cd-cartao)); transition: border-color .25s, box-shadow .25s, transform .25s; }
.cd-cartao::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 2px; background: linear-gradient(90deg, var(--cd-azul), transparent); opacity: .55; }
.cd-cartao:hover { border-color: rgba(0, 200, 255, .45); box-shadow: 0 0 30px rgba(0, 200, 255, .1); transform: translateY(-2px); }
.cd-cartao__n { font: 600 .7rem var(--f-mono); letter-spacing: .2em; color: var(--cd-verde); }
.cd-cartao h4 { margin: 10px 0 8px; font: 800 1.12rem/1.1 var(--f-tit); text-transform: uppercase; color: var(--cd-branco); }
.cd-cartao p { font-size: .93rem; line-height: 1.5; color: var(--cd-branco2); }

.cd__fecho { margin-top: clamp(36px, 5vw, 56px); display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; }
.cd__preco { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 2px 18px; }
.cd__preco span { grid-column: 1 / -1; font: 600 .72rem var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--cd-luz); }
.cd__preco b { font: 800 clamp(2.4rem, 4vw, 3.2rem)/1 var(--f-tit); color: #fff; }
.cd__preco small { max-width: 30ch; font-size: .85rem; line-height: 1.4; color: var(--cd-branco2); }
.cd__fecho .cta-capsula { margin-top: 0; }

/* Aparición discreta (el contenido es visible sin JS: solo se anima si JS lo marca) */
.cd-entra.cd-visto { animation: cd-entra .6s ease both; }
@keyframes cd-entra { from { opacity: .001; transform: translateY(12px); } }

@media (max-width: 1080px) {
  .cd__topo { grid-template-columns: 1fr; }
  .cd__calculo { max-width: 640px; }
  .cd__cartoes { grid-template-columns: repeat(2, 1fr); }
  .cd__ponte { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cd__cartoes { grid-template-columns: 1fr; }
  .cd__linhas li { grid-template-columns: auto 1fr; }
  .cd__linhas b { grid-column: 2; }
  .cd__calculo-cab { flex-direction: column; gap: 4px; }
  .cd__fecho .cta-capsula { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cd__numero.cd-brilho .cd__valor, .cd__numero.cd-brilho .cd__euro { animation: none; }
  .cd-entra.cd-visto { animation: none; }
  .cd-cartao { transition: none; }
}