:root{
  --bg:#fff9f6;
  --paper:rgba(255,255,255,.88);
  --text:#161116;
  --muted:#71686d;
  --line:#eadfda;
  --red:#e31837;
  --red-dark:#a50b21;
  --red-soft:#fff0f3;
  --green:#198754;
  --green-soft:#eaf8f1;
  --black:#0b0b0d;

  --shadow:0 28px 80px rgba(73,24,28,.13);
  --shadow-soft:0 12px 30px rgba(73,24,28,.08);

  --radius-xl:34px;
  --radius-lg:24px;
  --radius-md:18px;

  --ui:"DM Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:"Playfair Display",Georgia,serif;
}


*{
  box-sizing:border-box;
}


html{
  scroll-behavior:smooth;
}


body{
  margin:0;
  min-height:100vh;

  font-family:var(--ui);
  color:var(--text);

  background:
    radial-gradient(circle at 12% 12%, rgba(227,24,55,.08), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(227,24,55,.07), transparent 22%),
    radial-gradient(circle at 80% 88%, rgba(173,13,34,.05), transparent 25%),
    linear-gradient(180deg,#fffaf8 0%,#f8f1ed 100%);

  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}


body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.23;

  background-image:
    linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.4) 1px, transparent 1px);

  background-size:42px 42px;

  mask-image:
    linear-gradient(to bottom,black,transparent 70%);
}


button,
input{
  font:inherit;
}


button{
  border:0;
}


img{
  display:block;
  max-width:100%;
}


/* ==========================================================
   AMBIENTE
========================================================== */

.ambient{
  position:fixed;
  border-radius:999px;
  filter:blur(2px);
  pointer-events:none;
  opacity:.85;
  animation:float 9s ease-in-out infinite;
}


.ambient-a{
  width:190px;
  height:190px;
  left:-70px;
  top:12%;
  background:rgba(227,24,55,.07);
}


.ambient-b{
  width:250px;
  height:250px;
  right:-90px;
  top:28%;
  background:rgba(125,0,22,.055);
  animation-delay:-3s;
}


.ambient-c{
  width:160px;
  height:160px;
  left:16%;
  bottom:-65px;
  background:rgba(227,24,55,.045);
  animation-delay:-6s;
}


@keyframes float{
  0%,
  100%{
    transform:translate3d(0,0,0);
  }

  50%{
    transform:translate3d(0,-16px,0);
  }
}


/* ==========================================================
   PÁGINA
========================================================== */

.page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:44px 18px;
  position:relative;
  z-index:1;
}


/* ==========================================================
   TARJETA
========================================================== */

.registration-card{
  width:min(100%,760px);

  border:1px solid rgba(255,255,255,.86);
  border-radius:var(--radius-xl);

  background:var(--paper);

  backdrop-filter:blur(18px);

  box-shadow:var(--shadow);

  padding:34px;

  position:relative;

  overflow:hidden;
}


.registration-card::before{
  content:"";

  position:absolute;

  left:0;
  right:0;
  top:0;

  height:5px;

  background:
    linear-gradient(
      90deg,
      #8e081d,
      #e31837,
      #ff4d69,
      #e31837,
      #8e081d
    );

  background-size:220% 100%;

  animation:headerGlow 7s linear infinite;
}


@keyframes headerGlow{
  to{
    background-position:220% 0;
  }
}


/* ==========================================================
   CABECERA
========================================================== */

.card-header{
  text-align:center;
  position:relative;
}


.logo-shell{
  width:152px;
  height:112px;
  margin:0 auto 18px;

  display:grid;
  place-items:center;

  border-radius:28px;

  background:#fff;

  box-shadow:0 12px 28px rgba(81,19,25,.1);

  border:1px solid #f2e8e4;

  transform:rotate(-1.2deg);
}


.logo{
  width:128px;

  filter:
    drop-shadow(0 6px 12px rgba(0,0,0,.05));
}


.eyebrow,
.modal-kicker,
.success-kicker{
  margin:0 0 10px;

  text-transform:uppercase;

  letter-spacing:.28em;

  font-size:.78rem;

  font-weight:800;

  color:var(--red);
}


.card-header h1{
  margin:0;

  font-family:var(--display);

  font-size:clamp(2.55rem,7vw,4.6rem);

  line-height:.98;

  letter-spacing:-.045em;
}


.card-header h1 span{
  color:var(--red);
  font-style:italic;
}


.lead{
  max-width:570px;

  margin:16px auto 0;

  color:var(--muted);

  font-size:1rem;

  line-height:1.7;
}


.soft-divider{
  height:1px;

  margin:28px 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--line),
      transparent
    );
}


/* ==========================================================
   FORMULARIO
========================================================== */

#registroForm{
  display:flex;
  flex-direction:column;
  gap:18px;
}


.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}


.field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}


label{
  font-size:.93rem;
  font-weight:800;
  color:#20181c;
}


/* ==========================================================
   INPUTS
========================================================== */

.input-wrap{
  position:relative;

  display:flex;
  align-items:center;

  min-height:62px;

  border-radius:20px;

  border:1.5px solid var(--line);

  background:rgba(255,255,255,.94);

  box-shadow:0 3px 0 rgba(75,28,32,.025);

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease,
    background .2s ease;
}


.input-wrap:focus-within{
  border-color:rgba(227,24,55,.65);

  box-shadow:
    0 0 0 5px rgba(227,24,55,.08),
    0 10px 24px rgba(77,24,29,.06);

  transform:translateY(-1px);
}


.field-icon{
  width:48px;

  display:grid;

  place-items:center;

  flex:0 0 auto;

  font-size:1.05rem;

  filter:saturate(.85);
}


.input-wrap input{
  width:100%;

  height:60px;

  border:0;

  outline:0;

  background:transparent;

  color:#181114;

  padding:0 46px 0 0;

  font-size:1rem;
}


.input-wrap input::placeholder{
  color:#aaa0a5;
}


/* ==========================================================
   VALIDACIÓN VERDE
========================================================== */

.valid-mark{
  position:absolute;

  right:14px;

  top:50%;

  width:28px;

  height:28px;

  border-radius:50%;

  display:grid;

  place-items:center;

  background:var(--green);

  box-shadow:0 8px 18px rgba(25,135,84,.22);

  opacity:0;

  transform:
    translateY(-50%)
    scale(.45)
    rotate(-12deg);

  pointer-events:none;
}


.valid-mark svg{
  width:17px;
  height:17px;

  stroke:#fff;

  stroke-width:2.8;

  stroke-linecap:round;

  stroke-linejoin:round;
}


.input-wrap.is-valid{
  border-color:rgba(25,135,84,.4);

  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #fbfffd 100%
    );
}


.input-wrap.is-valid .valid-mark{
  animation:
    checkPop
    .42s
    cubic-bezier(.2,.9,.3,1.35)
    forwards;
}


@keyframes checkPop{
  0%{
    opacity:0;

    transform:
      translateY(-50%)
      scale(.35)
      rotate(-14deg);
  }

  65%{
    opacity:1;

    transform:
      translateY(-50%)
      scale(1.15)
      rotate(4deg);
  }

  100%{
    opacity:1;

    transform:
      translateY(-50%)
      scale(1)
      rotate(0);
  }
}


/* ==========================================================
   ERROR
========================================================== */

.input-wrap.is-invalid{
  border-color:#e05a6e;

  background:#fffafb;

  animation:shake .28s ease;
}


@keyframes shake{
  0%,
  100%{
    transform:translateX(0);
  }

  30%{
    transform:translateX(-4px);
  }

  65%{
    transform:translateX(4px);
  }
}


.error{
  min-height:18px;

  color:#af1730;

  font-size:.82rem;

  font-weight:700;

  padding-left:4px;
}


/* ==========================================================
   HONEYPOT
========================================================== */

.honeypot{
  position:absolute!important;

  left:-9999px!important;

  opacity:0!important;

  pointer-events:none!important;
}


/* ==========================================================
   CONSENTIMIENTOS
========================================================== */

.consent-card{
  border-radius:22px;

  background:
    linear-gradient(
      180deg,
      #fff 0%,
      #fffaf7 100%
    );

  border:1px solid var(--line);

  overflow:hidden;

  box-shadow:var(--shadow-soft);
}


.consent-row{
  position:relative;

  display:flex;

  align-items:flex-start;

  gap:12px;

  padding:15px 16px;

  color:#4e4449;

  font-size:.91rem;

  line-height:1.55;

  cursor:pointer;
}


.consent-row + .consent-row{
  border-top:1px solid var(--line);
}


.consent-row input{
  position:absolute;

  opacity:0;

  pointer-events:none;
}


.fake-checkbox{
  width:23px;

  height:23px;

  margin-top:1px;

  border-radius:7px;

  border:1.5px solid #d5c7c1;

  background:#fff;

  display:grid;

  place-items:center;

  flex:0 0 auto;

  transition:all .22s ease;
}


.fake-checkbox svg{
  width:15px;

  height:15px;

  stroke:#fff;

  stroke-width:2.8;

  stroke-linecap:round;

  stroke-linejoin:round;

  transform:scale(.35);

  opacity:0;
}


.consent-row input:checked + .fake-checkbox{
  background:var(--red);

  border-color:var(--red);

  box-shadow:0 7px 16px rgba(227,24,55,.2);
}


.consent-row input:checked + .fake-checkbox svg{
  animation:tinyCheck .3s ease forwards;
}


@keyframes tinyCheck{
  to{
    opacity:1;
    transform:scale(1);
  }
}


.consent-text{
  flex:1;
}


.consent-text small{
  display:inline-block;

  margin-left:5px;

  padding:2px 7px;

  border-radius:999px;

  background:#f9e9ed;

  color:#a30f27;

  font-size:.72rem;

  font-weight:800;
}


.consent-text small.optional{
  background:#f0efef;

  color:#6d686a;
}


.legal-link{
  padding:0;

  background:none;

  color:var(--red-dark);

  font-weight:800;

  text-decoration:underline;

  text-underline-offset:2px;

  cursor:pointer;
}


/* ==========================================================
   ERROR GENERAL
========================================================== */

.general-error{
  border-radius:16px;

  border:1px solid #efc5cd;

  background:#fff1f4;

  color:#9e1830;

  padding:13px 15px;

  font-size:.9rem;

  font-weight:700;

  line-height:1.45;
}


/* ==========================================================
   BOTÓN
========================================================== */

.submit-button{
  position:relative;

  overflow:hidden;

  width:100%;

  min-height:62px;

  border-radius:19px;

  background:
    linear-gradient(
      135deg,
      #a90c23 0%,
      #e31837 48%,
      #c40d2b 100%
    );

  color:#fff;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:12px;

  font-weight:800;

  font-size:1.02rem;

  cursor:pointer;

  box-shadow:0 16px 30px rgba(204,16,47,.24);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease,
    opacity .2s ease;
}


.submit-button:hover:not(:disabled){
  transform:translateY(-2px);

  box-shadow:0 20px 36px rgba(204,16,47,.3);

  filter:saturate(1.08);
}


.submit-button:active:not(:disabled){
  transform:
    translateY(0)
    scale(.995);
}


.submit-button:disabled{
  cursor:not-allowed;

  opacity:.46;

  box-shadow:none;
}


.button-arrow{
  font-size:1.2rem;

  transition:transform .2s ease;
}


.submit-button:hover:not(:disabled) .button-arrow{
  transform:translateX(4px);
}


.button-shine{
  position:absolute;

  top:-30%;

  left:-35%;

  width:25%;

  height:160%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.32),
      transparent
    );

  transform:skewX(-18deg);

  animation:shine 4.5s ease-in-out infinite;
}


@keyframes shine{
  0%,
  55%{
    left:-35%;
  }

  76%,
  100%{
    left:125%;
  }
}


.spinner{
  display:none;

  width:18px;

  height:18px;

  border-radius:50%;

  border:2px solid rgba(255,255,255,.3);

  border-top-color:#fff;

  animation:spin .75s linear infinite;
}


.submit-button.loading .spinner{
  display:block;
}


.submit-button.loading .button-arrow{
  display:none;
}


@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}


.security-text{
  margin:0;

  text-align:center;

  color:#867d81;

  font-size:.82rem;

  line-height:1.5;
}


/* ==========================================================
   ANIMACIONES
========================================================== */

.reveal{
  opacity:0;

  transform:translateY(14px);

  animation:
    reveal
    .7s
    cubic-bezier(.2,.75,.2,1)
    forwards;
}


.reveal-1{
  animation-delay:.08s;
}


.reveal-2{
  animation-delay:.18s;
}


@keyframes reveal{
  to{
    opacity:1;

    transform:translateY(0);
  }
}


/* ==========================================================
   SUCCESS
========================================================== */

.success-overlay[hidden]{
  display:none!important;
}


.success-overlay{
  position:fixed;

  inset:0;

  z-index:3000;

  display:grid;

  place-items:center;

  padding:20px;

  background:rgba(12,8,10,.56);

  backdrop-filter:blur(10px);
}


.success-modal{
  width:min(92vw,440px);

  text-align:center;

  background:#fff;

  border-radius:30px;

  padding:34px 28px 28px;

  box-shadow:0 32px 90px rgba(0,0,0,.25);

  animation:
    modalIn
    .48s
    cubic-bezier(.2,.9,.2,1.2);
}


@keyframes modalIn{
  from{
    opacity:0;

    transform:
      translateY(18px)
      scale(.94);
  }

  to{
    opacity:1;

    transform:
      translateY(0)
      scale(1);
  }
}


.success-ring{
  width:92px;

  height:92px;

  margin:0 auto 18px;

  border-radius:50%;

  display:grid;

  place-items:center;

  background:
    conic-gradient(
      var(--green) 0deg,
      var(--green) 360deg
    );

  animation:ringDraw .65s ease both;
}


@keyframes ringDraw{
  from{
    transform:
      scale(.5)
      rotate(-50deg);

    opacity:0;
  }

  to{
    transform:
      scale(1)
      rotate(0);

    opacity:1;
  }
}


.success-icon{
  width:72px;

  height:72px;

  border-radius:50%;

  display:grid;

  place-items:center;

  background:#fff;
}


.success-icon svg{
  width:42px;

  height:42px;

  stroke:var(--green);

  stroke-width:2.8;

  stroke-linecap:round;

  stroke-linejoin:round;

  stroke-dasharray:40;

  stroke-dashoffset:40;

  animation:drawCheck .55s .32s ease forwards;
}


@keyframes drawCheck{
  to{
    stroke-dashoffset:0;
  }
}


.success-kicker{
  margin-bottom:7px;
}


.success-modal h2{
  margin:0;

  font-family:var(--display);

  font-size:2.7rem;

  line-height:1;
}


.success-modal h3{
  margin:10px 0 8px;

  font-size:1.08rem;
}


.success-modal p{
  margin:0;

  color:var(--muted);
}


.success-button{
  margin-top:22px;

  width:100%;

  min-height:52px;

  border-radius:16px;

  background:var(--black);

  color:#fff;

  font-weight:800;

  cursor:pointer;
}


/* ==========================================================
   MODALES LEGALES
========================================================== */

.legal-modal{
  width:min(92vw,720px);

  max-height:88vh;

  padding:0;

  border:0;

  border-radius:26px;

  box-shadow:0 30px 90px rgba(0,0,0,.25);
}


.legal-modal::backdrop{
  background:rgba(12,8,10,.55);

  backdrop-filter:blur(7px);
}


.legal-modal article{
  position:relative;

  padding:28px;
}


.modal-close{
  position:absolute;

  top:14px;

  right:14px;

  width:40px;

  height:40px;

  border-radius:50%;

  background:#f4efec;

  color:#21191d;

  font-size:1.4rem;

  display:grid;

  place-items:center;

  cursor:pointer;

  transition:
    background .2s ease,
    transform .2s ease;
}


.modal-close:hover{
  background:#ece3df;

  transform:rotate(5deg);
}


.legal-modal h2{
  margin:0 0 12px;

  font-family:var(--display);

  font-size:2rem;
}


.legal-body{
  max-height:59vh;

  overflow:auto;

  padding-right:10px;

  color:#50474b;

  line-height:1.75;

  font-size:.94rem;
}


.legal-body::-webkit-scrollbar{
  width:8px;
}


.legal-body::-webkit-scrollbar-track{
  background:#f3efed;

  border-radius:999px;
}


.legal-body::-webkit-scrollbar-thumb{
  background:#d5c4c3;

  border-radius:999px;
}


.legal-body h3{
  margin:22px 0 8px;

  color:#1b1518;

  font-size:1rem;
}


.legal-body p{
  margin:0 0 11px;
}


.legal-body a{
  color:var(--red-dark);

  font-weight:700;
}


.legal-version{
  color:#8b8186;

  font-size:.86rem;

  margin-top:25px!important;
}


.modal-action{
  width:100%;

  margin-top:16px;

  min-height:50px;

  border-radius:15px;

  background:var(--red);

  color:#fff;

  font-weight:800;

  cursor:pointer;

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}


.modal-action:hover{
  transform:translateY(-1px);

  box-shadow:0 10px 22px rgba(227,24,55,.22);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:700px){

  .page{
    padding:18px 12px;
  }


  .registration-card{
    border-radius:26px;

    padding:24px 16px;
  }


  .logo-shell{
    width:132px;

    height:96px;

    border-radius:23px;
  }


  .logo{
    width:112px;
  }


  .field-grid{
    grid-template-columns:1fr;
  }


  .input-wrap{
    min-height:58px;
  }


  .input-wrap input{
    height:56px;
  }


  .consent-row{
    padding:14px;
  }


  .legal-modal article{
    padding:24px 18px 20px;
  }


  .legal-modal h2{
    font-size:1.7rem;
  }


  .legal-body{
    max-height:61vh;
  }

}


/* ==========================================================
   REDUCIR MOVIMIENTO
========================================================== */

@media (prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;

    animation-iteration-count:1!important;

    scroll-behavior:auto!important;

    transition-duration:.01ms!important;
  }

}
/* ==========================================================
   TOMY 3.0 — TEMA ROJO + NEGRO
   Mantiene verde únicamente para la validación correcta.
========================================================== */

:root{
  --bg:#080808;
  --paper:rgba(17,17,18,.96);
  --text:#f8f8f8;
  --muted:#b6b0b2;
  --line:#332629;
  --red:#e31837;
  --red-dark:#b20d27;
  --red-soft:#2b0d14;
  --black:#050505;
  --shadow:0 30px 85px rgba(0,0,0,.55);
  --shadow-soft:0 12px 30px rgba(0,0,0,.30);
}

body{
  color:var(--text);
  background:
    radial-gradient(circle at 12% 12%, rgba(227,24,55,.22), transparent 27%),
    radial-gradient(circle at 88% 18%, rgba(227,24,55,.14), transparent 24%),
    radial-gradient(circle at 72% 85%, rgba(150,0,25,.12), transparent 28%),
    linear-gradient(145deg,#050505 0%,#0d0d0e 48%,#16070a 100%);
}

body::before{
  opacity:.11;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.10) 1px, transparent 1px);
}

.ambient-a{background:rgba(227,24,55,.18)}
.ambient-b{background:rgba(130,0,22,.18)}
.ambient-c{background:rgba(227,24,55,.10)}

.registration-card{
  border:1px solid rgba(227,24,55,.24);
  background:
    linear-gradient(160deg,rgba(22,22,23,.97),rgba(10,10,11,.97));
  box-shadow:
    0 32px 90px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.025) inset;
}

.registration-card::before{
  background:
    linear-gradient(
      90deg,
      #5c0615,
      #e31837,
      #ff3657,
      #e31837,
      #5c0615
    );
}

.logo-shell{
  background:#fff;
  border:1px solid rgba(227,24,55,.18);
  box-shadow:
    0 14px 34px rgba(0,0,0,.38),
    0 0 24px rgba(227,24,55,.08);
}

.card-header h1{
  color:#fff;
}

.card-header h1 span{
  color:#ef1f40;
}

.lead{
  color:#aaa4a6;
}

.soft-divider{
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(227,24,55,.35),
      transparent
    );
}

label{
  color:#f3edef;
}

.input-wrap{
  border-color:#382a2d;
  background:#151516;
  box-shadow:0 4px 16px rgba(0,0,0,.20);
}

.input-wrap:hover{
  border-color:#563139;
}

.input-wrap:focus-within{
  border-color:#e31837;
  background:#181214;
  box-shadow:
    0 0 0 4px rgba(227,24,55,.12),
    0 12px 28px rgba(0,0,0,.28);
}

.field-icon{
  filter:none;
}

.input-wrap input{
  color:#fff;
}

.input-wrap input::placeholder{
  color:#746d70;
}

.input-wrap.is-valid{
  background:#101915;
}

.input-wrap.is-invalid{
  background:#1d1013;
}

.consent-card{
  border-color:#342629;
  background:
    linear-gradient(180deg,#151516 0%,#0f0f10 100%);
  box-shadow:0 14px 32px rgba(0,0,0,.30);
}

.consent-row{
  color:#c9c2c4;
}

.consent-row + .consent-row{
  border-top-color:#302326;
}

.fake-checkbox{
  border-color:#554247;
  background:#0d0d0e;
}

.consent-row input:checked + .fake-checkbox{
  background:#e31837;
  border-color:#e31837;
  box-shadow:0 7px 18px rgba(227,24,55,.30);
}

.consent-text small{
  background:#351018;
  color:#ff7b90;
}

.consent-text small.optional{
  background:#242425;
  color:#aaa4a6;
}

.legal-link{
  color:#ff4964;
}

.general-error{
  border-color:#712536;
  background:#260c12;
  color:#ff9aac;
}

.submit-button{
  background:
    linear-gradient(135deg,#0a0a0a 0%,#181818 34%,#e31837 100%);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:
    0 18px 34px rgba(0,0,0,.38),
    0 10px 32px rgba(227,24,55,.16);
}

.submit-button:hover:not(:disabled){
  box-shadow:
    0 22px 42px rgba(0,0,0,.46),
    0 12px 36px rgba(227,24,55,.24);
}

.submit-button:disabled{
  opacity:.38;
  background:#252526;
}

.security-text{
  color:#918a8d;
}

.success-overlay{
  background:rgba(0,0,0,.78);
}

.success-modal{
  color:#fff;
  background:
    linear-gradient(160deg,#181819,#090909);
  border:1px solid rgba(227,24,55,.25);
}

.success-modal p{
  color:#aaa4a6;
}

.success-button{
  background:
    linear-gradient(135deg,#e31837,#a90c23);
}

.legal-modal{
  color:#fff;
  background:#111112;
  border:1px solid rgba(227,24,55,.20);
}

.legal-modal::backdrop{
  background:rgba(0,0,0,.78);
}

.legal-modal article{
  background:
    linear-gradient(160deg,#171718,#0d0d0e);
}

.modal-close{
  background:#242425;
  color:#fff;
}

.modal-close:hover{
  background:#e31837;
}

.legal-modal h2{
  color:#fff;
}

.legal-body{
  color:#c6bfc1;
}

.legal-body::-webkit-scrollbar-track{
  background:#171718;
}

.legal-body::-webkit-scrollbar-thumb{
  background:#6f1b2b;
}

.legal-body h3{
  color:#ff4964;
}

.legal-body a{
  color:#ff637b;
}

.legal-version{
  color:#817a7d;
}

.modal-action{
  background:
    linear-gradient(135deg,#e31837,#a50b21);
  color:#fff;
  box-shadow:0 10px 25px rgba(227,24,55,.18);
}

.modal-action:hover{
  box-shadow:0 14px 30px rgba(227,24,55,.30);
}

.derechos-cliente{
  margin-top:30px;
  padding:19px 20px;
  border-radius:18px;
  background:#151516;
  border:1px solid #342629;
  color:#bdb6b8;
}

.derechos-cliente strong{
  display:block;
  margin-bottom:7px;
  color:#fff;
}

.derechos-cliente p{
  margin:0;
}

@media (max-width:700px){
  .registration-card{
    box-shadow:0 20px 55px rgba(0,0,0,.48);
  }
}