:root {
  --rd-fondo: #0a0a0a;
  --rd-texto: #f4f4f4;
  --rd-suave: rgba(255, 255, 255, .56);
  --rd-tenue: rgba(255, 255, 255, .07);
  --rd-borde: rgba(255, 255, 255, .12);
  --rd-tarjeta: linear-gradient(180deg, #161616, #101010);
  --rd-rojo: #ff5a4e;                       
  --rd-verde: #3ccf6e;                      
  
  --rd-papel: #f3f3f1;
  --rd-papel-sombra: #dcdcd8;
  --rd-curva: cubic-bezier(.22, 1, .36, 1);
}
:root[data-tema="claro"] {
  --rd-fondo: #eeeeee;
  --rd-texto: #0a0a0a;
  --rd-suave: rgba(0, 0, 0, .56);
  --rd-tenue: rgba(0, 0, 0, .04);
  --rd-borde: rgba(0, 0, 0, .12);
  --rd-tarjeta: linear-gradient(180deg, #ffffff, #fafafa);
  --rd-rojo: #d93a2f;
  --rd-verde: #1f9d4c;
  --rd-papel: #ffffff;
  --rd-papel-sombra: #e4e4e0;
}

* { box-sizing: border-box; }



.rd-seccion { height: 100%; display: grid; grid-template-columns: 1fr 520px; gap: clamp(30px, 6vw, 90px); align-items: center; padding: 40px clamp(16px, 6vw, 90px); max-width: 1280px; margin: 0 auto; }
.rd-antetitulo { margin: 0 0 12px; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rd-suave); }
.rd-titulo { margin: 0; font-size: clamp(3rem, 8vw, 6.4rem); font-weight: 600; line-height: .92; letter-spacing: -.06em; }
.rd-intro { max-width: 380px; margin: 22px 0 34px; color: var(--rd-suave); font-size: 1.05rem; line-height: 1.5; }
.rd-datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.rd-datos li { display: flex; align-items: center; gap: 14px; font-size: .98rem; }
.rd-datos small { display: block; font-size: .76rem; color: var(--rd-suave); margin-bottom: 1px; }
.rd-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--rd-tenue); box-shadow: inset 0 0 0 1px var(--rd-borde); flex: none; }
.rd-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.rd-copia { position: relative; height: 30px; padding: 0 12px; border: 0; border-radius: 99px; background: var(--rd-tenue); box-shadow: inset 0 0 0 1px var(--rd-borde); color: var(--rd-texto); font: inherit; font-size: .8rem; font-weight: 500; cursor: pointer; overflow: hidden; display: grid; }
.rd-copia > span { grid-area: 1 / 1; line-height: 30px; transition: transform .45s var(--rd-curva), opacity .3s; }
.rd-copia-ok { transform: translateY(100%); opacity: 0; }
.rd-copia.is-copiado .rd-copia-txt { transform: translateY(-100%); opacity: 0; }
.rd-copia.is-copiado .rd-copia-ok { transform: none; opacity: 1; }
.rd-copia:focus-visible { outline: 2px solid var(--rd-texto); outline-offset: 2px; }

.rd-tarjeta { position: relative; padding: 30px; border-radius: 28px; background: var(--rd-tarjeta); box-shadow: inset 0 0 0 1px var(--rd-borde), 0 40px 80px -44px rgba(0, 0, 0, .9); overflow: hidden; }
.rd-form { display: grid; gap: 16px; }


.rd-campo { position: relative; }
.rd-campo input, .rd-campo textarea {
  width: 100%; padding: 24px 44px 10px 16px; border: 0; border-radius: 14px; background: var(--rd-tenue); color: var(--rd-texto);
  box-shadow: inset 0 0 0 1px var(--rd-borde); font: inherit; font-size: 1rem; outline: none; resize: none; transition: box-shadow .25s;
}
.rd-campo textarea { min-height: 120px; padding-right: 50px; line-height: 1.45; }
.rd-campo input:focus, .rd-campo textarea:focus { box-shadow: inset 0 0 0 1.5px var(--rd-texto); }
.rd-campo label { position: absolute; left: 17px; top: 18px; color: var(--rd-suave); font-size: 1rem; pointer-events: none; transform-origin: 0 0; transition: transform .35s var(--rd-curva), color .25s; }
.rd-campo input:focus + label, .rd-campo input:not(:placeholder-shown) + label,
.rd-campo textarea:focus + label, .rd-campo textarea:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.76); }
.rd-campo input:focus + label, .rd-campo textarea:focus + label { color: var(--rd-texto); }

.rd-valido { position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: var(--rd-verde); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .45s var(--rd-curva); }
.rd-campo.is-valido .rd-valido { stroke-dashoffset: 0; }

.rd-cuenta { position: absolute; right: 14px; top: 14px; width: 22px; height: 22px; transform: rotate(-90deg); fill: none; stroke-width: 2.4; }
.rd-cuenta-fondo { stroke: var(--rd-borde); }
.rd-cuenta-valor { stroke: var(--rd-texto); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--rd-lleno, 0)); stroke-linecap: round; transition: stroke-dashoffset .2s, stroke .2s; }
.rd-campo.is-casi .rd-cuenta-valor { stroke: var(--rd-rojo); }

.rd-error { display: block; max-height: 0; overflow: hidden; color: var(--rd-rojo); font-size: .82rem; opacity: 0; transition: max-height .3s var(--rd-curva), opacity .25s, margin .3s; }
.rd-campo.is-error input, .rd-campo.is-error textarea { box-shadow: inset 0 0 0 1.5px var(--rd-rojo); }
.rd-campo.is-error { animation: rd-niega .45s var(--rd-curva); }
.rd-campo.is-error .rd-error { max-height: 2em; opacity: 1; margin-top: 6px; }
@keyframes rd-niega { 25% { transform: translateX(-8px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }

.rd-temas { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; padding: 0; border: 0; }
.rd-temas legend { width: 100%; margin-bottom: 8px; padding: 0; font-size: .84rem; color: var(--rd-suave); }
.rd-temas label { cursor: pointer; }
.rd-temas input { position: absolute; opacity: 0; pointer-events: none; }
.rd-temas span { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 99px; background: var(--rd-tenue); box-shadow: inset 0 0 0 1px var(--rd-borde); font-size: .9rem; transition: background-color .25s, color .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.rd-temas input:checked + span { background: var(--rd-texto); color: var(--rd-fondo); box-shadow: none; transform: scale(1.04); }
.rd-temas input:focus-visible + span { outline: 2px solid var(--rd-texto); outline-offset: 2px; }

.rd-envia { position: relative; display: grid; place-items: center; height: 54px; margin-top: 4px; border: 0; border-radius: 16px; cursor: pointer; background: var(--rd-texto); color: var(--rd-fondo); font: inherit; font-weight: 600; font-size: 1rem; transition: transform .3s var(--rd-curva); }
.rd-envia > * { grid-area: 1 / 1; transition: opacity .25s, transform .4s var(--rd-curva); }
.rd-envia:hover { transform: translateY(-1px); }
.rd-envia:focus-visible { outline: 2px solid var(--rd-texto); outline-offset: 3px; }
.rd-gira { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; opacity: 0; transform: scale(.6); }
.rd-gira circle { stroke-dasharray: 40 60; transform-origin: 12px 12px; animation: rd-gira .8s linear infinite; }
@keyframes rd-gira { to { transform: rotate(360deg); } }
.is-enviando .rd-envia-txt { opacity: 0; transform: translateY(-8px); }
.is-enviando .rd-gira { opacity: 1; transform: none; }



.is-enviado .rd-form > * { animation: rd-sale .4s calc(var(--i) * 45ms) var(--rd-curva) both; }
@keyframes rd-sale { to { opacity: 0; transform: translateY(-14px) scale(.98); } }
.rd-sobre { position: absolute; left: 50%; top: 50%; width: 210px; height: 132px; margin: -66px 0 0 -105px; opacity: 0; pointer-events: none; perspective: 600px; }
.rd-sobre > * { position: absolute; inset: 0; border-radius: 6px; }
.rd-sobre-fondo { background: var(--rd-papel-sombra); box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); }
.rd-carta { inset: 10px 14px auto; height: 120px; border-radius: 4px; background: var(--rd-papel); padding: 16px 16px 0; display: grid; align-content: start; gap: 8px; z-index: 2; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.rd-carta i { display: block; height: 4px; border-radius: 2px; background: #cfcfcb; }
.rd-carta i:nth-child(1) { width: 40%; background: #9a9a96; } .rd-carta i:nth-child(3) { width: 85%; } .rd-carta i:nth-child(4) { width: 60%; }
.rd-sobre-frente { z-index: 3; background: var(--rd-papel); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06); }
.rd-sobre-solapa { z-index: 1; height: 62%; background: linear-gradient(#ececea, var(--rd-papel)); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transform: rotateX(180deg); }
.is-enviado .rd-sobre { animation: rd-sobre 1.9s .25s both; }
.is-enviado .rd-carta { animation: rd-carta 1.9s .25s both; }
.is-enviado .rd-sobre-solapa { animation: rd-solapa 1.9s .25s both; }
@keyframes rd-sobre {
  0% { opacity: 0; transform: scale(.82) translateY(16px); }
  16% { opacity: 1; transform: none; animation-timing-function: linear; }
  66% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.55, 0, .75, .25); }
  100% { opacity: 0; transform: translate(190px, -190px) rotate(-16deg) scale(.42); }
}
@keyframes rd-carta {
  0%, 14% { transform: translateY(-112px); animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
  40%, 100% { transform: translateY(4px); }
}
@keyframes rd-solapa {
  0%, 42% { transform: rotateX(180deg); z-index: 1; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  43% { z-index: 4; }
  58%, 100% { transform: rotateX(0deg); z-index: 4; }
}

.rd-listo { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 8px; padding: 30px; opacity: 0; pointer-events: none; }
.rd-listo-ico { width: 72px; height: 72px; margin-bottom: 10px; fill: none; stroke: var(--rd-texto); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rd-listo-ico circle { stroke-dasharray: 190; stroke-dashoffset: 190; stroke-width: 2; }
.rd-listo-ico path { stroke-dasharray: 40; stroke-dashoffset: 40; }
.rd-listo h3 { margin: 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -.035em; }
.rd-listo p { margin: 0; color: var(--rd-suave); }
.rd-otro { margin-top: 18px; height: 42px; padding: 0 18px; border: 0; border-radius: 99px; background: var(--rd-tenue); box-shadow: inset 0 0 0 1px var(--rd-borde); color: var(--rd-texto); font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; }
.rd-otro:focus-visible { outline: 2px solid var(--rd-texto); outline-offset: 2px; }
.is-enviado .rd-listo { animation: rd-listo .6s 1.75s var(--rd-curva) both; pointer-events: auto; }
.is-enviado .rd-listo-ico circle { animation: rd-traza .7s 1.85s var(--rd-curva) forwards; }
.is-enviado .rd-listo-ico path { animation: rd-traza .45s 2.25s var(--rd-curva) forwards; }
@keyframes rd-listo { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes rd-traza { to { stroke-dashoffset: 0; } }


@media (max-width: 900px) {

  .rd-seccion { height: auto; grid-template-columns: 1fr; padding: 36px 16px; }
  .rd-tarjeta { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .rd-campo.is-error { animation: none; }
  .is-enviado .rd-form > * { animation-duration: .01s; animation-delay: 0s; }
  .is-enviado .rd-sobre, .is-enviado .rd-carta, .is-enviado .rd-sobre-solapa { animation: none; }
  .is-enviado .rd-listo { animation-delay: 0s; animation-duration: .01s; }
  .is-enviado .rd-listo-ico circle, .is-enviado .rd-listo-ico path { animation-delay: 0s; animation-duration: .01s; }
}