/* ============================================================
   SINGLE PREMIUM · COMENTARIOS
   HORIZONTAL · COMPACTO · 5 RANGOS

   1 · XL          >= 1440px
   2 · DESKTOP     1024px - 1439px
   3 · TABLET      768px  - 1023px
   4 · MOBILE      480px  - 767px
   5 · MOBILE XS   <= 479px
   ============================================================ */


/* ============================================================
   01 · VARIABLES
   ============================================================ */

body.rl-single-premium {
  --rl-cm-aqua-500: #00d8a0;
  --rl-cm-aqua-400: #20e6b4;
  --rl-cm-aqua-300: #72f3d1;
  --rl-cm-aqua-200: #a7f9e3;

  --rl-cm-gold-500: #e7bd5a;
  --rl-cm-gold-400: #f4d77d;

  --rl-cm-copy:
    rgba(243, 248, 255, 0.94);

  --rl-cm-soft:
    rgba(205, 220, 240, 0.81);

  --rl-cm-muted:
    rgba(179, 200, 227, 0.70);

  --rl-cm-radius: 24px;
}


/* ============================================================
   02 · AREA GENERAL
   ============================================================ */

body.rl-single-premium #comments,
body.rl-single-premium .comments-area {
  position: relative;

  width:
    min(
      calc(100% - 64px),
      980px
    );

  max-width: 980px;

  margin:
    18px
    auto
    82px;

  padding: 0;

  overflow: visible;

  color:
    var(--rl-cm-copy);

  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}

body.rl-single-premium #comments::before,
body.rl-single-premium #comments::after,
body.rl-single-premium .comments-area::before,
body.rl-single-premium .comments-area::after {
  display: none !important;

  content: none !important;
}


/* ============================================================
   03 · TARJETA UNICA
   ============================================================ */

body.rl-single-premium #respond,
body.rl-single-premium .comment-respond {
  position: relative;
  isolation: isolate;

  width: 100%;

  margin: 0;

  padding:
    28px
    36px
    27px;

  overflow: hidden;

  color:
    var(--rl-cm-copy);

  border:
    1px solid
    rgba(72, 230, 194, 0.31);

  border-radius:
    var(--rl-cm-radius);

  background:
    radial-gradient(
      ellipse 450px 240px
      at 92% 0%,
      rgba(32, 230, 180, 0.075),
      transparent 70%
    ),
    linear-gradient(
      145deg,
      rgba(8, 34, 70, 0.97),
      rgba(3, 18, 43, 0.99)
    );

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.06),
    0 22px 56px
      rgba(0, 6, 23, 0.23);
}


/* ============================================================
   04 · LINEA PREMIUM
   ============================================================ */

body.rl-single-premium #respond::before,
body.rl-single-premium .comment-respond::before {
  position: absolute;

  top: 0;
  left: 36px;

  width: 142px;
  height: 3px;

  content: "";

  pointer-events: none;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--rl-cm-gold-400),
      var(--rl-cm-gold-500) 40%,
      var(--rl-cm-aqua-400) 76%,
      transparent
    );
}


/* SIN SEGUNDA CAJA */

body.rl-single-premium #respond::after,
body.rl-single-premium .comment-respond::after {
  display: none !important;

  content: none !important;

  border: 0 !important;

  background: none !important;

  box-shadow: none !important;
}


/* ============================================================
   05 · TITULO
   ============================================================ */

body.rl-single-premium
#reply-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap:
    10px
    15px;

  margin:
    0
    0
    18px;

  padding: 0;

  color: #ffffff;

  font-size:
    clamp(
      1.75rem,
      2.6vw,
      2.5rem
    );

  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.045em;
}

body.rl-single-premium
#reply-title::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 28px;

  padding:
    5px
    10px;

  content: "CONVERSACIÓN";

  color:
    var(--rl-cm-aqua-200);

  font-size: 0.55rem;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.10em;

  border:
    1px solid
    rgba(72, 230, 194, 0.42);

  border-radius: 999px;

  background:
    rgba(4, 28, 59, 0.80);
}


/* ============================================================
   06 · TEXTO AUXILIAR
   ============================================================ */

body.rl-single-premium
.logged-in-as,

body.rl-single-premium
.comment-notes,

body.rl-single-premium
.must-log-in {
  margin:
    0
    0
    15px;

  color:
    var(--rl-cm-soft);

  font-size: 0.85rem;
  line-height: 1.5;
}

body.rl-single-premium
.logged-in-as a,

body.rl-single-premium
.comment-notes a,

body.rl-single-premium
.must-log-in a {
  color:
    var(--rl-cm-aqua-300);

  font-weight: 730;

  text-underline-offset:
    0.17em;
}

body.rl-single-premium
.required {
  color:
    var(--rl-cm-gold-400);

  font-weight: 900;
}


/* ============================================================
   07 · FORMULARIO
   ============================================================ */

body.rl-single-premium
.comment-form {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    13px
    16px;

  width: 100%;

  margin: 0;
  padding: 0;
}

body.rl-single-premium
.comment-form > p {
  margin: 0;
  padding: 0;
}


/* Ancho completo */

body.rl-single-premium
.comment-form-comment,

body.rl-single-premium
.logged-in-as,

body.rl-single-premium
.comment-notes,

body.rl-single-premium
.must-log-in,

body.rl-single-premium
.comment-form-url,

body.rl-single-premium
.comment-form-cookies-consent,

body.rl-single-premium
.form-submit {
  grid-column:
    1 / -1;
}


/* ============================================================
   08 · LABELS
   ============================================================ */

body.rl-single-premium
.comment-form label {
  display: block;

  margin:
    0
    0
    6px;

  color:
    rgba(232, 241, 253, 0.91);

  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.35;
}


/* ============================================================
   09 · INPUTS
   ============================================================ */

body.rl-single-premium
.comment-form
input[type="text"],

body.rl-single-premium
.comment-form
input[type="email"],

body.rl-single-premium
.comment-form
input[type="url"],

body.rl-single-premium
.comment-form
textarea {
  display: block;

  width: 100%;
  max-width: none;

  margin: 0;

  color:
    rgba(248, 251, 255, 0.96);

  caret-color:
    var(--rl-cm-aqua-300);

  border:
    1px solid
    rgba(104, 159, 218, 0.28);

  border-radius: 14px;

  outline: none;

  background:
    linear-gradient(
      145deg,
      rgba(1, 13, 32, 0.90),
      rgba(4, 25, 54, 0.90)
    );

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.035);

  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}


/* Inputs */

body.rl-single-premium
.comment-form
input[type="text"],

body.rl-single-premium
.comment-form
input[type="email"],

body.rl-single-premium
.comment-form
input[type="url"] {
  min-height: 46px;

  padding:
    10px
    13px;

  font-size: 0.9rem;
}


/* ============================================================
   10 · TEXTAREA HORIZONTAL Y BAJO
   ============================================================ */

body.rl-single-premium
.comment-form textarea {
  height: 112px !important;
  min-height: 112px !important;
  max-height: 280px;

  padding:
    13px
    14px;

  resize: vertical;

  font-size: 0.94rem;
  line-height: 1.55;
}


/* ============================================================
   11 · FOCUS
   ============================================================ */

body.rl-single-premium
.comment-form input:focus,

body.rl-single-premium
.comment-form textarea:focus {
  border-color:
    rgba(72, 230, 194, 0.74);

  background:
    linear-gradient(
      145deg,
      rgba(3, 19, 44, 0.97),
      rgba(5, 31, 64, 0.96)
    );

  box-shadow:
    0 0 0 3px
      rgba(32, 230, 180, 0.06),
    0 12px 28px
      rgba(0, 7, 25, 0.14);
}


/* ============================================================
   12 · BOTON
   ============================================================ */

body.rl-single-premium
.comment-form
input[type="submit"],

body.rl-single-premium
.comment-form
button[type="submit"],

body.rl-single-premium
.form-submit
.submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: fit-content;

  min-height: 46px;

  margin-top: 1px;

  padding:
    10px
    20px;

  cursor: pointer;

  color: #ffffff;

  font-size: 0.83rem;
  font-weight: 880;

  border:
    1px solid
    rgba(167, 255, 233, 0.82);

  border-radius: 14px;

  background:
    linear-gradient(
      105deg,
      #55e5bf,
      #16d8ab 43%,
      #00c795 73%,
      #00b985
    );

  box-shadow:
    inset 0 1px 0
      rgba(255, 255, 255, 0.35),
    0 13px 28px
      rgba(0, 214, 159, 0.18);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}


@media (hover: hover) and (pointer: fine) {

  body.rl-single-premium
  .form-submit
  .submit:hover {
    color: #ffffff;

    transform:
      translateY(-2px);

    filter:
      brightness(1.05);

    box-shadow:
      0 18px 36px
      rgba(0, 214, 159, 0.24);
  }
}


/* ============================================================
   13 · CHECKBOX
   ============================================================ */

body.rl-single-premium
.comment-form-cookies-consent {
  display: grid;

  grid-template-columns:
    18px
    minmax(0, 1fr);

  gap: 9px;

  align-items: start;
}

body.rl-single-premium
.comment-form-cookies-consent
input[type="checkbox"] {
  width: 18px;
  height: 18px;

  margin-top: 1px;

  accent-color:
    var(--rl-cm-aqua-500);
}

body.rl-single-premium
.comment-form-cookies-consent
label {
  margin: 0;

  color:
    var(--rl-cm-muted);

  font-size: 0.76rem;
  line-height: 1.45;
}


/* ============================================================
   14 · COMENTARIOS PUBLICADOS
   ============================================================ */

body.rl-single-premium
.comments-title {
  margin:
    0
    0
    24px;

  color: #ffffff;

  font-size:
    clamp(
      1.7rem,
      2.5vw,
      2.4rem
    );

  font-weight: 900;
}

body.rl-single-premium
.comment-list {
  display: grid;

  gap: 18px;

  margin:
    0
    0
    38px;

  padding: 0;

  list-style: none;
}

body.rl-single-premium
.comment-list li {
  margin: 0;
  padding: 0;

  list-style: none;
}

body.rl-single-premium
.comment-body {
  position: relative;

  padding:
    21px
    23px;

  color:
    var(--rl-cm-copy);

  border:
    1px solid
    rgba(90, 151, 216, 0.21);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(10, 38, 76, 0.78),
      rgba(3, 20, 47, 0.84)
    );
}

body.rl-single-premium
.comment-body::before {
  position: absolute;

  top: 22px;
  left: 0;

  width: 4px;
  height: 38px;

  content: "";

  border-radius:
    0
    999px
    999px
    0;

  background:
    linear-gradient(
      180deg,
      var(--rl-cm-aqua-300),
      var(--rl-cm-aqua-500)
    );
}


/* ============================================================
   RANGO 1 · XL
   >= 1440
   ============================================================ */

@media (min-width: 1440px) {

  body.rl-single-premium
  #comments,

  body.rl-single-premium
  .comments-area {
    width:
      min(
        calc(100% - 80px),
        980px
      );

    margin-top: 20px;
  }

  body.rl-single-premium
  .comment-form textarea {
    height: 112px !important;
    min-height: 112px !important;
  }
}


/* ============================================================
   RANGO 2 · DESKTOP
   1024 - 1439
   ============================================================ */

@media
(min-width: 1024px)
and
(max-width: 1439px) {

  body.rl-single-premium
  #comments,

  body.rl-single-premium
  .comments-area {
    width:
      min(
        calc(100% - 64px),
        900px
      );

    margin-top: 18px;
  }

  body.rl-single-premium
  #respond,

  body.rl-single-premium
  .comment-respond {
    padding:
      27px
      32px
      26px;
  }

  body.rl-single-premium
  .comment-form textarea {
    height: 108px !important;
    min-height: 108px !important;
  }
}


/* ============================================================
   RANGO 3 · TABLET
   768 - 1023
   ============================================================ */

@media
(min-width: 768px)
and
(max-width: 1023px) {

  body.rl-single-premium
  #comments,

  body.rl-single-premium
  .comments-area {
    width:
      min(
        calc(100% - 48px),
        720px
      );

    margin:
      16px
      auto
      72px;
  }

  body.rl-single-premium
  #respond,

  body.rl-single-premium
  .comment-respond {
    padding:
      26px
      28px
      24px;
  }

  body.rl-single-premium
  #respond::before,

  body.rl-single-premium
  .comment-respond::before {
    left: 28px;

    width: 120px;
  }

  body.rl-single-premium
  .comment-form textarea {
    height: 108px !important;
    min-height: 108px !important;
  }
}


/* ============================================================
   RANGO 4 · MOBILE
   480 - 767
   ============================================================ */

@media
(min-width: 480px)
and
(max-width: 767px) {

  body.rl-single-premium
  #comments,

  body.rl-single-premium
  .comments-area {
    width:
      calc(100% - 28px);

    margin:
      12px
      auto
      66px;
  }

  body.rl-single-premium
  #respond,

  body.rl-single-premium
  .comment-respond {
    padding:
      23px
      20px
      20px;

    border-radius: 21px;
  }

  body.rl-single-premium
  #respond::before,

  body.rl-single-premium
  .comment-respond::before {
    left: 20px;

    width: 100px;
  }

  body.rl-single-premium
  #reply-title {
    flex-direction: column;
    align-items: flex-start;

    gap: 10px;

    margin-bottom: 16px;

    font-size:
      clamp(
        1.6rem,
        6.8vw,
        2rem
      );
  }

  body.rl-single-premium
  .comment-form {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  body.rl-single-premium
  .comment-form > p {
    grid-column: 1;
  }

  body.rl-single-premium
  .comment-form textarea {
    height: 104px !important;
    min-height: 104px !important;
  }

  body.rl-single-premium
  .form-submit
  .submit {
    width: 100%;
  }
}


/* ============================================================
   RANGO 5 · MOBILE XS
   SAMSUNG A16 / <= 479
   ============================================================ */

@media (max-width: 479px) {

  body.rl-single-premium
  #comments,

  body.rl-single-premium
  .comments-area {
    width:
      calc(100% - 18px);

    margin:
      8px
      auto
      58px;
  }

  body.rl-single-premium
  #respond,

  body.rl-single-premium
  .comment-respond {
    padding:
      20px
      14px
      17px;

    border-radius: 18px;
  }

  body.rl-single-premium
  #respond::before,

  body.rl-single-premium
  .comment-respond::before {
    left: 14px;

    width: 88px;
  }

  body.rl-single-premium
  #reply-title {
    flex-direction: column;
    align-items: flex-start;

    gap: 9px;

    margin-bottom: 14px;

    font-size:
      clamp(
        1.45rem,
        7.8vw,
        1.82rem
      );

    line-height: 1.06;
  }

  body.rl-single-premium
  #reply-title::before {
    min-height: 25px;

    padding:
      4px
      8px;

    font-size: 0.49rem;
  }

  body.rl-single-premium
  .logged-in-as,

  body.rl-single-premium
  .comment-notes,

  body.rl-single-premium
  .must-log-in {
    margin-bottom: 12px;

    font-size: 0.78rem;
    line-height: 1.45;
  }

  body.rl-single-premium
  .comment-form {
    grid-template-columns: 1fr;

    gap: 10px;
  }

  body.rl-single-premium
  .comment-form > p {
    grid-column: 1;
  }

  body.rl-single-premium
  .comment-form label {
    margin-bottom: 5px;

    font-size: 0.70rem;
  }

  body.rl-single-premium
  .comment-form
  input[type="text"],

  body.rl-single-premium
  .comment-form
  input[type="email"],

  body.rl-single-premium
  .comment-form
  input[type="url"] {
    min-height: 43px;

    padding:
      9px
      11px;

    font-size: 0.86rem;
  }

  body.rl-single-premium
  .comment-form textarea {
    height: 92px !important;
    min-height: 92px !important;
    max-height: 220px;

    padding:
      11px
      12px;

    font-size: 0.88rem;
    line-height: 1.48;
  }

  body.rl-single-premium
  .form-submit
  .submit,

  body.rl-single-premium
  .comment-form
  input[type="submit"],

  body.rl-single-premium
  .comment-form
  button[type="submit"] {
    width: 100%;

    min-height: 45px;

    padding:
      10px
      14px;
  }

  body.rl-single-premium
  .comment-form-cookies-consent label {
    font-size: 0.72rem;
  }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

  body.rl-single-premium
  .comment-form input,

  body.rl-single-premium
  .comment-form textarea,

  body.rl-single-premium
  .form-submit
  .submit {
    transition: none;
  }
}