.elementor-3669 .elementor-element.elementor-element-be38bb8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3669 .elementor-element.elementor-element-857d8ac{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3669 .elementor-element.elementor-element-8ed684e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3669 .elementor-element.elementor-element-a152f6b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3669 .elementor-element.elementor-element-c07cd3b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for container, class: .elementor-element-a152f6b *//* ═══════════════════════════════════════════════════════════════════
   COMENTARIOS · VÍDEOANIMACIÓN.ES
   Rediseño del formulario y la lista de comentarios estándar de
   WordPress / Elementor. Sin tocar el HTML: solo CSS.

   DÓNDE PEGARLO
   Elementor → Personalizar → CSS adicional
   (o Apariencia → Personalizar → CSS adicional, o el style.css del
   tema hijo). Si usas el widget "Comentarios de entrada" de Elementor
   Pro también funciona: cubre ambas marcas de clases.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --c-bg:#faf9ff;
  --c-card:#ffffff;
  --c-ink:#241f3d;
  --c-muted:#6b6488;
  --c-violet:#6c5ce7;
  --c-magenta:#c936e8;
  --c-key:#e8940f;
  --c-line:rgba(108,92,231,.18);
  --c-radius:16px;
}

/* ───────────────────────────────────────────────
   1. CONTENEDOR GENERAL
   ─────────────────────────────────────────────── */
#comments,
.elementor-widget-post-comments{
  max-width:820px;
  margin:56px auto 0;
  padding:0 22px;
  font-family:'Poppins','Segoe UI',system-ui,sans-serif;
  color:var(--c-ink);
  line-height:1.7;
}

/* Título "X comentarios" y "Deja una respuesta" */
#comments .comments-title,
#respond .comment-reply-title{
  font-size:clamp(20px,3.2vw,26px);
  font-weight:700;
  letter-spacing:-.01em;
  margin:0 0 22px;
  display:flex;
  align-items:center;
  gap:12px;
}
#comments .comments-title::before,
#respond .comment-reply-title::before{
  content:"";
  width:11px;height:11px;flex:none;
  transform:rotate(45deg);
  background:var(--c-key);
  border-radius:2px;
}
/* El "Cancelar respuesta" que se cuela dentro del h3 */
#respond .comment-reply-title small{
  font-size:13px;font-weight:500;margin-left:auto;
}
#respond .comment-reply-title small a{
  color:var(--c-muted);text-decoration:none;
  border-bottom:1px dashed var(--c-line);
}
#respond .comment-reply-title small a:hover{color:var(--c-magenta)}


/* ───────────────────────────────────────────────
   2. LISTA DE COMENTARIOS
   ─────────────────────────────────────────────── */
.comment-list,
ol.comment-list{
  list-style:none;
  margin:0 0 46px;
  padding:0;
}
.comment-list li{list-style:none}

/* Cada comentario = tarjeta */
.comment-list .comment-body,
.comment-list .comment .comment-body{
  position:relative;
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:var(--c-radius);
  padding:22px 26px 20px 78px;
  margin:0 0 16px;
  box-shadow:0 3px 12px rgba(36,31,61,.05);
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.comment-list .comment-body:hover{
  transform:translateY(-2px);
  border-color:var(--c-violet);
  box-shadow:0 12px 28px rgba(108,92,231,.14);
}

/* Avatar */
.comment-list .comment-author img.avatar,
.comment-list img.avatar{
  position:absolute;
  left:22px;top:22px;
  width:44px;height:44px;
  border-radius:14px;
  border:2px solid var(--c-card);
  box-shadow:0 4px 12px rgba(36,31,61,.16);
  transition:transform .3s;
}
.comment-list .comment-body:hover img.avatar{
  transform:rotate(-6deg) scale(1.06);
}

/* Nombre del autor */
.comment-list .comment-author .fn,
.comment-list .comment-author cite{
  font-style:normal;
  font-weight:700;
  font-size:15.5px;
  color:var(--c-ink);
}
.comment-list .comment-author .fn a{
  color:var(--c-ink);text-decoration:none;
}
.comment-list .comment-author .fn a:hover{color:var(--c-violet)}
/* El "dice:" sobra visualmente */
.comment-list .comment-author .says{display:none}

/* Autor de la entrada: distintivo */
.comment-list .bypostauthor > .comment-body{
  border-color:rgba(232,148,15,.45);
  background:linear-gradient(120deg,rgba(232,148,15,.05),var(--c-card) 60%);
}
.comment-list .bypostauthor > .comment-body .fn::after{
  content:"Autor";
  display:inline-block;
  margin-left:8px;
  padding:2px 9px;
  font-size:10px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:700;
  color:#fff;
  border-radius:20px;
  background:linear-gradient(120deg,var(--c-violet),var(--c-magenta));
  vertical-align:middle;
}

/* Fecha */
.comment-list .comment-metadata{
  font-size:12.5px;
  color:var(--c-muted);
  margin:2px 0 12px;
}
.comment-list .comment-metadata a{
  color:var(--c-muted);text-decoration:none;
}
.comment-list .comment-metadata a:hover{color:var(--c-violet)}
.comment-list .comment-metadata .edit-link{margin-left:10px}

/* Texto del comentario */
.comment-list .comment-content p{
  margin:0 0 10px;
  font-size:15.5px;
  color:#3d3660;
}
.comment-list .comment-content p:last-child{margin-bottom:0}
.comment-list .comment-content a{color:var(--c-violet)}

/* Botón responder */
.comment-list .reply{margin-top:12px}
.comment-list .comment-reply-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 16px;
  border-radius:40px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  color:var(--c-violet);
  background:rgba(108,92,231,.07);
  border:1px solid var(--c-line);
  transition:all .25s;
}
.comment-list .comment-reply-link::before{content:"↩"}
.comment-list .comment-reply-link:hover{
  color:#fff;
  border-color:transparent;
  background:linear-gradient(120deg,var(--c-violet),var(--c-magenta));
  box-shadow:0 8px 18px rgba(108,92,231,.3);
  transform:translateY(-2px);
}

/* Respuestas anidadas: línea guía en vez de sangría a secas */
.comment-list .children{
  list-style:none;
  margin:0 0 0 34px;
  padding:0 0 0 24px;
  border-left:2px solid var(--c-line);
}
@media(max-width:600px){
  .comment-list .children{margin-left:10px;padding-left:14px}
}

/* Comentario pendiente de moderación */
.comment-list .comment-awaiting-moderation{
  display:inline-block;
  margin:0 0 10px;
  padding:6px 14px;
  border-radius:10px;
  font-size:13px;
  color:#8a5a00;
  background:rgba(232,148,15,.12);
  border:1px solid rgba(232,148,15,.3);
}


/* ───────────────────────────────────────────────
   3. FORMULARIO
   ─────────────────────────────────────────────── */
#respond{
  background:var(--c-card);
  border:1px solid var(--c-line);
  border-radius:22px;
  padding:32px 34px 30px;
  box-shadow:0 8px 28px rgba(36,31,61,.07);
  position:relative;
  overflow:hidden;
}
/* Filo de color arriba */
#respond::before{
  content:"";
  position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--c-violet),var(--c-magenta),var(--c-key),var(--c-violet));
  background-size:300% 100%;
  animation:c-flow 7s ease infinite;
}
@keyframes c-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

#respond .comment-notes,
#respond .logged-in-as{
  font-size:13.5px;
  color:var(--c-muted);
  margin:0 0 22px;
}
#respond .comment-notes a,
#respond .logged-in-as a{color:var(--c-violet)}
#respond .required{color:var(--c-magenta)}

/* Etiquetas */
#commentform label,
.comment-form label{
  display:block;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--c-muted);
  margin:0 0 7px;
}

/* Campos */
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"],
#commentform textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
  width:100%;
  padding:14px 16px;
  font-family:inherit;
  font-size:15px;
  color:var(--c-ink);
  background:var(--c-bg);
  border:1.5px solid var(--c-line);
  border-radius:12px;
  outline:none;
  transition:border-color .25s,box-shadow .25s,background .25s;
  -webkit-appearance:none;
}
#commentform textarea,
.comment-form textarea{
  min-height:150px;
  resize:vertical;
  line-height:1.7;
}
#commentform input::placeholder,
#commentform textarea::placeholder{color:#a49dc0}

#commentform input:focus,
#commentform textarea:focus,
.comment-form input:focus,
.comment-form textarea:focus{
  background:var(--c-card);
  border-color:var(--c-violet);
  box-shadow:0 0 0 4px rgba(108,92,231,.14);
}

/* Nombre / email / web en tres columnas */
.comment-form-author,
.comment-form-email,
.comment-form-url{
  display:inline-block;
  vertical-align:top;
  width:calc(33.333% - 9px);
  margin:0 12px 18px 0;
}
.comment-form-url{margin-right:0}
@media(max-width:700px){
  .comment-form-author,
  .comment-form-email,
  .comment-form-url{width:100%;margin-right:0}
}
.comment-form-comment{margin:0 0 18px}

/* Casilla de cookies */
.comment-form-cookies-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 24px;
  font-size:13.5px;
  color:var(--c-muted);
}
.comment-form-cookies-consent input[type="checkbox"]{
  width:18px;height:18px;
  margin:3px 0 0;
  accent-color:var(--c-violet);
  flex:none;
  cursor:pointer;
}
.comment-form-cookies-consent label{
  text-transform:none;
  letter-spacing:0;
  font-size:13.5px;
  font-weight:400;
  color:var(--c-muted);
  margin:0;
  cursor:pointer;
  line-height:1.6;
}

/* Botón enviar */
.form-submit{margin:0}
#commentform input[type="submit"],
.comment-form input[type="submit"],
#respond #submit{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:16px 38px;
  font-family:inherit;
  font-size:15.5px;
  font-weight:700;
  color:#fff;
  border:0;
  border-radius:60px;
  cursor:pointer;
  background:linear-gradient(120deg,var(--c-violet),var(--c-magenta),var(--c-key),var(--c-violet));
  background-size:300% 300%;
  animation:c-flow 6s ease infinite;
  box-shadow:0 12px 30px rgba(108,92,231,.32);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.4),box-shadow .3s;
  -webkit-appearance:none;
}
#commentform input[type="submit"]:hover,
.comment-form input[type="submit"]:hover,
#respond #submit:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 18px 40px rgba(201,54,232,.4);
}
#commentform input[type="submit"]:active,
#respond #submit:active{transform:translateY(-1px) scale(.99)}

/* Foco visible por teclado */
#commentform input[type="submit"]:focus-visible,
#respond #submit:focus-visible,
.comment-list .comment-reply-link:focus-visible{
  outline:3px solid var(--c-key);
  outline-offset:3px;
}

/* Navegación entre páginas de comentarios */
.comment-navigation a,
.comments-pagination a{
  color:var(--c-violet);
  text-decoration:none;
  font-weight:600;
}

/* Aviso de comentarios cerrados */
.no-comments,
.nocomments{
  text-align:center;
  color:var(--c-muted);
  font-size:14px;
  padding:20px;
  background:var(--c-card);
  border:1px dashed var(--c-line);
  border-radius:var(--c-radius);
}


/* ───────────────────────────────────────────────
   4. ACCESIBILIDAD
   ─────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  #respond::before,
  #commentform input[type="submit"],
  #respond #submit{animation:none}
  .comment-list .comment-body,
  .comment-list img.avatar,
  .comment-list .comment-reply-link,
  #commentform input[type="submit"],
  #respond #submit{transition:none}
  .comment-list .comment-body:hover,
  #respond #submit:hover{transform:none}
}/* End custom CSS */