/*
Theme Name:  Astra child
Description: Tema hijo para hacer personalizaciones de código
Author:      Clelia Angulo
Author URL:  www.cleliaangulo.com
Template:    astra
Version:     1.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
*/

/*MENU */
 .main-header-bar {
    border-bottom-width: 0px !important;
  }
.ast-primary-header-bar {
  background-color: #000;
}

.entry-content p {
  margin-bottom: 0.5em;
}

/* =========================================================
   TI — SINGLE (Platzi-like) SIN CONFLICTOS
   ✅ No repite: .ti-hero, .ti-chip, .ti-chips, .ti-cta, .ti-chip__icon
   Scope: SOLO body.single .ti-post
   Pegar al FINAL del style.css
   ========================================================= */

/* TOKENS (no :root) */
body.single .ti-post{
  --ti-max: 1100px;
  --ti-content: 800px;
  --ti-side: 370px;

  --ti-bg-1: #13151D;
  --ti-bg-2: #13151D;

  --ti-text: rgba(231,242,238,.92);
  --ti-muted: rgba(231,242,238,.72);
  --ti-border: rgba(231,242,238,.10);

  --ti-accent: #7dffbc;

  --ti-radius-lg: 22px;
  --ti-radius-md: 16px;
  --ti-radius-sm: 12px;

  --ti-shadow: 0 18px 70px rgba(0,0,0,.35);

  background:
    radial-gradient(900px 420px at 70% -80px, rgba(125,255,188,.10), transparent 60%),
    linear-gradient(180deg, var(--ti-bg-1) 0%, var(--ti-bg-2) 100%);
  color:#fff;
}

  .ast-narrow-container .site-content > .ast-container {
    max-width: 1100px;
  }

/* Container */
body.single .ti-post .ti-container{
  width: min(var(--ti-max), calc(100% - 0px));
  margin: 0 auto;
}

/* =========================================================
   HERO (tiS-*)
   ========================================================= */
body.single .ti-post .tiS-hero{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-radius: 0;

  position: relative;
  min-height: clamp(240px, 34vh, 360px);
  background-size: cover;
  background-position: center;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-bottom: 0 !important;
}

body.single .ti-post .tiS-hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 34px;
  background: linear-gradient(
    to bottom,
    rgba(19,21,29,0) 0%,
    rgba(19,21,29,.65) 55%,
    rgba(19,21,29,1) 100%
  );
  pointer-events:none;
}

body.single .ti-post .tiS-hero__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 70% 15%, rgba(0,0,0,.10), rgba(0,0,0,.58)),
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.35) 46%, rgba(6,26,18,.82) 100%);
  pointer-events:none;
}

body.single .ti-post .tiS-hero .ti-container{
  position:relative;
  padding: 19px;
}

/* Breadcrumb */
body.single .ti-post .tiS-bc{
  font-size: 0.7em;
	padding-bottom: 50px;
  color: rgba(231,242,238,.75);
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
body.single .ti-post .tiS-bc a{ color: rgba(231,242,238,.75); text-decoration:none; }
body.single .ti-post .tiS-bc a:hover{ color:#fff; }
body.single .ti-post .tiS-bc__current{ color: rgba(231,242,238,.82); }

/* Title */
body.single .ti-post .tiS-h1{
  margin: 10px 0 12px;
  max-width: 920px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.06;
  font-size:2em;
}

/* Meta row */
body.single .ti-post .tiS-metaRow{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap:wrap;
}

/* Chips (tiS-*) */
body.single .ti-post .tiS-chips{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}
body.single .ti-post .tiS-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--ti-radius-sm);
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(231,242,238,.10);
  font-size: 13px;
  color: rgba(231,242,238,.85);
  backdrop-filter: blur(6px);
}
body.single .ti-post .tiS-chip--heart{ min-width: 46px; justify-content:center; }
body.single .ti-post .tiS-chip__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 14px;
  line-height: 1;
  color: #ff4d6d;
  opacity: .9;
  transform: translateY(-.5px);
}

/* Author (tiS-*) */
body.single .ti-post .tiS-author{ min-width: 260px; }
body.single .ti-post .tiS-author__label{
  font-size: 11px;
  letter-spacing: .12em;
  font-weight: 900;
  color: rgba(231,242,238,.60);
  margin: 0 0 8px;
}
body.single .ti-post .tiS-author__card{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--ti-radius-md);
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(231,242,238,.10);
  text-decoration:none;
  color:#fff;
  backdrop-filter: blur(6px);
}
body.single .ti-post .tiS-author__avatar{ border-radius: 999px; }
body.single .ti-post .tiS-author__name{ font-weight: 900; font-size: 14px; }
body.single .ti-post .tiS-author__chev{ margin-left:auto; opacity:.8; font-size: 20px; line-height:1; }

/* =========================================================
   BODY / LAYOUT
   ========================================================= */
body.single .ti-post .ti-body{
  width: 100%;
  padding: 12px 0 28px;
}

body.single .ti-post .ti-layout{
  display: grid;
  align-items: start;
}

body.single .ti-post .ti-layout.has-sidebar{
  grid-template-columns: minmax(0, var(--ti-content)) var(--ti-side);
  justify-content: space-between;
  column-gap: 0;
}
body.single .ti-post .ti-layout.no-sidebar{
  grid-template-columns: minmax(0, var(--ti-content));
}

body.single .ti-post .ti-layout > .ti-article,
body.single .ti-post .ti-layout > .ti-side{
  float: none !important;
  flex: none !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Article card 
body.single .ti-post .ti-article{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(231,242,238,.10);
  border-radius: var(--ti-radius-lg);
  box-shadow: var(--ti-shadow);
  overflow: hidden;
}*/

/* Prose 
body.single .ti-post .ti-prose{
  padding: 18px 22px 22px;
  color: var(--ti-text);
  font-size: 16px;
  line-height: 1.85;
  letter-spacing: .01em;
}
@media (max-width: 560px){
  body.single .ti-post .ti-prose{ padding: 16px 16px 18px; }
}*/

/* Typography 
body.single .ti-post .ti-prose h2,
body.single .ti-post .ti-prose h3,
body.single .ti-post .ti-prose h4{
  color:#fff;
  font-weight: 900;
  letter-spacing:-0.02em;
  line-height:1.18;
  margin: 22px 0 12px;
}
body.single .ti-post .ti-prose h2{ font-size: 24px; }
body.single .ti-post .ti-prose h3{ font-size: 20px; }
body.single .ti-post .ti-prose h4{ font-size: 16px; }

body.single .ti-post .ti-prose p{ margin: 0 0 14px; }
body.single .ti-post .ti-prose a{
  color: var(--ti-accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(125,255,188,.45);
}
body.single .ti-post .ti-prose a:hover{
  color:#fff;
  text-decoration-color: rgba(125,255,188,.85);
}

body.single .ti-post .ti-prose img{
  max-width:100%;
  height:auto;
  border-radius: 16px;
  border: 1px solid rgba(231,242,238,.10);
  box-shadow: 0 16px 55px rgba(0,0,0,.35);
  display:block;
}

body.single .ti-post .ti-prose blockquote{
  margin: 16px 0;
  padding: 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(231,242,238,.12);
  box-shadow: 0 12px 42px rgba(0,0,0,.25);
  color: rgba(231,242,238,.82);
  position: relative;
}
body.single .ti-post .ti-prose blockquote::before{
  content:"";
  position:absolute;
  left:0; top:14px; bottom:14px;
  width:3px; border-radius:3px;
  background: rgba(125,255,188,.9);
}*/

/* Sidebar */
body.single .ti-post .ti-side{
  width: var(--ti-side);
  position: sticky;
  top: 24px;
  display:flex;
  flex-direction: column;
  gap: 16px;
  padding-left: 28px;
}
@media (max-width: 980px){
  body.single .ti-post .ti-layout.has-sidebar,
  body.single .ti-post .ti-layout.no-sidebar{ grid-template-columns: 1fr; }
  body.single .ti-post .ti-side{
    width:100%;
    position: static;
    padding-left: 0;
    margin-top: 18px;
  }
}

/* Ads */
body.single .ti-post .ti-ad{
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(231,242,238,.14);
  background: rgba(12,16,14,.55);
  box-shadow: 0 14px 44px rgba(0,0,0,.25);
}
body.single .ti-post .ti-ad__link{
  position: relative;
  display:block;
  width:100%;
  aspect-ratio: 16/10;
  text-decoration:none;
  color:#fff;
	height:240px;
}
body.single .ti-post .ti-ad__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.02);
}
body.single .ti-post .ti-ad__bg--fallback{
  position:absolute;
  inset:0;
  background:
    radial-gradient(70% 80% at 30% 20%, rgba(125,255,188,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.75));
}
body.single .ti-post .ti-ad__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(70% 80% at 70% 20%, rgba(0,0,0,.05), rgba(0,0,0,.40)),
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.78) 100%);
}
body.single .ti-post .ti-ad__brand{
  position:absolute;
  top: 12px; left: 12px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  opacity: .95;
  text-transform: lowercase;
}
body.single .ti-post .ti-ad__content{
  position:absolute;
  left: 14px; right: 14px; bottom: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
body.single .ti-post .ti-ad__title{
  margin:0;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
  text-shadow: 0 8px 30px rgba(0,0,0,.45);
}
body.single .ti-post .ti-ad__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: max-content;
  padding: 10px 12px;
  border-radius: 12px;
  background:#fff;
  color:#0b0f0d;
  font-weight: 900;
  font-size: 13px;
}
body.single .ti-post .ti-ad__link:hover .ti-ad__bg{
  transform: scale(1.05);
  transition: transform .18s ease;
}



/* =========================================================
   TI — COMMENTS (Platzi UI) COMPLETO + FIX línea izquierda
   Scope: body.single .ti-post .ti-comments
   ========================================================= */

/* Wrapper general */
body.single .ti-post .ti-comments{
  margin-top: 16px;
  padding: 18px;
}

/* Título */
body.single .ti-post .ti-comments .tiS-commentsTitle,
body.single .ti-post .ti-comments .comments-title{
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
}

/* Barra login tipo Platzi (si la usas) */
body.single .ti-post .ti-comments .tiS-loginBar{
  display:flex;
  align-items:center;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(231,242,238,.12);
  margin-bottom: 14px;
}
body.single .ti-post .ti-comments .tiS-loginLink{
  color: #fff;
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.single .ti-post .ti-comments .tiS-loginText{
  color: rgba(231,242,238,.72);
  font-size: 13px;
}

/* Lista (tu lista real es tiS-commentsList) */
body.single .ti-post .ti-comments .tiS-commentsList{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap: 14px;
}

/* Por si Astra mete su lista */
body.single .ti-post .ti-comments .ast-comment-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap: 14px;
}

/* Item */
body.single .ti-post .ti-comments .tiS-com{
  margin: 0;
  padding: 0;
}

/* Card */
body.single .ti-post .ti-comments .tiS-comCard{
  display:flex;
  gap: 1px;
  align-items: stretch;          /* ✅ importantísimo */
}

/* =========================================================
   Columna izquierda (avatar + línea + like)
   ========================================================= */
body.single .ti-post .ti-comments .tiS-comSide{
  position: relative;
  flex: 0 0 44px;
  display:flex;
  flex-direction: column;
  align-items:center;
  padding: 10px 0 12px;
}

/* Oculta rail viejo si existe */
body.single .ti-post .ti-comments .tiS-comRail{
  display:none !important;
}

/* Avatar */
body.single .ti-post .ti-comments .tiS-comAvatarImg{
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px;
  border: 1px solid rgba(231,242,238,.14);
  background: rgba(255,255,255,.04);
}

/* Like button (tu clase real) */
body.single .ti-post .ti-comments .tiLk-comBtn,
body.single .ti-post .ti-comments .tiLk-comBtn.is-guest{
  margin-top: auto;              /* ✅ baja el like al fondo */
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 6px;
  padding: 6px 0 0;
  background: transparent;
  border: 0;
  line-height: 1;
  position: relative;
  z-index: 2;                    /* encima de la línea */
}

/* Ícono + count */
body.single .ti-post .ti-comments .tiLk-comIcon{
  font-size: 18px;
  color: rgba(231,242,238,.45);
  transition: color .12s ease, transform .12s ease;
}
body.single .ti-post .ti-comments .tiLk-comCount{
  font-size: 12px;
  font-weight: 900;
  color: rgba(231,242,238,.72);
}
body.single .ti-post .ti-comments .tiLk-comBtn.is-liked .tiLk-comIcon{
  color: #ff4d6d;
  opacity: .95;
}
body.single .ti-post .ti-comments .tiLk-comBtn:hover .tiLk-comIcon{
  transform: translateY(-1px);
  color: rgba(255,77,109,.92);
}

/* ✅ Línea vertical estilo Platzi
   - Empieza debajo del avatar
   - Termina encima del like
*/
body.single .ti-post .ti-comments .tiS-comSide::after{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50px;           /* debajo del avatar */
  bottom: 42px;        /* arriba del corazón */
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    rgba(231,242,238,.04),
    rgba(231,242,238,.14),
    rgba(231,242,238,.04)
  );
  pointer-events:none;
}

/* =========================================================
   Caja principal del comentario
   ========================================================= */
body.single .ti-post .ti-comments .tiS-comMain{
  min-width: 0;
  flex: 1;
  background: rgba(45,50,58,.92);
  border: 1px solid rgba(231,242,238,.10);
  border-radius: 14px;
  padding: 14px 14px 12px;
}

/* Header */
body.single .ti-post .ti-comments .tiS-comHead{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  margin-bottom: 6px;
}
body.single .ti-post .ti-comments .tiS-comWho{
  display:flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body.single .ti-post .ti-comments .tiS-comName a,
body.single .ti-post .ti-comments .tiS-comName{
  color:#fff;
  font-weight: 600;
  font-size: .7em;
  text-decoration:none;
}
body.single .ti-post .ti-comments .tiS-comMeta{
  color: rgba(231,242,238,.58);
  font-size: 12px;
}
body.single .ti-post .ti-comments .tiS-comDot{
  margin: 0 6px;
  opacity: .7;
}
body.single .ti-post .ti-comments .tiS-comTime{
  margin-left:auto;
  color: rgba(231,242,238,.50);
  font-size: 12px;
  white-space: nowrap;
}

/* Body texto */
body.single .ti-post .ti-comments .tiS-comBody{
  color: rgba(231,242,238,.86);
  font-size: .7em;
  font-weight: 400;
  line-height: 1.7;
}
body.single .ti-post .ti-comments .tiS-comBody p{
  margin: 10px 0;
}
body.single .ti-post .ti-comments .tiS-comBody p:first-child{
  margin-top: 0;
}

/* Moderación */
body.single .ti-post .ti-comments .tiS-comPending{
  margin: 0 0 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(125,255,188,.10);
  border: 1px solid rgba(125,255,188,.18);
  color: rgba(231,242,238,.86);
  font-size: 12.5px;
}

/* Footer / Responder */
body.single .ti-post .ti-comments .tiS-comFoot{
  margin-top: 10px;
}
body.single .ti-post .ti-comments .comment-reply-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 2px 6px 4px 6px;
  border-radius: 5px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(231,242,238,.12);
  color: rgba(231,242,238,.90);
  text-decoration:none !important;
  font-size: .65em;
  font-weight:500;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}
body.single .ti-post .ti-comments .comment-reply-link:hover{
  border-color: rgba(125,255,188,.26);
  transform: translateY(-1px);
  filter: brightness(1.05);
  color:#fff;
}

/* =========================================================
   Children (respuestas)
   - Sin doble línea
   - Indent limpio
   ========================================================= */	
body.single .ti-post .ti-comments .children{
  list-style:none;
  margin: 17px 0px 0px -9px;
  padding: 0 0 0 30px;
  display:grid;
  gap: 12px;
  border-left: 0 !important;
}

/* Línea más suave en replies */
body.single .ti-post .ti-comments .children .tiS-comSide::after{
  opacity: .70;
}

/* Si Astra pone overflow que corta la línea, lo evitamos */
body.single .ti-post .ti-comments .tiS-com,
body.single .ti-post .ti-comments .tiS-comCard{
  overflow: visible !important;
}

/* =========================================================
   TI — COMMENTS: línea SOLO en replies + like pegado al avatar
   (override final)
   ========================================================= */

/* 1) Like debajo del avatar (no al fondo) */
body.single .ti-post .ti-comments .tiLk-comBtn,
body.single .ti-post .ti-comments .tiLk-comBtn.is-guest{
  margin-top: 8px !important;     /* ✅ pegado al avatar */
  margin-bottom: 0 !important;
  padding-top: 0 !important;
}

/* 2) Quitar línea vertical en comentarios top-level */
body.single .ti-post .ti-comments .tiS-commentsList > .tiS-com .tiS-comSide::after{
  content: none !important;
}

/* 3) Activar línea SOLO en replies (.children) */
body.single .ti-post .ti-comments .children .tiS-comSide::after{
  content: "" !important;
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50px;                /* debajo del avatar */
  bottom: 10px;             /* hasta abajo del reply */
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    rgba(231,242,238,.03),
    rgba(231,242,238,.12),
    rgba(231,242,238,.03)
  );
  opacity: .85;
  pointer-events:none;
}

/* 4) En replies: que el corazón quede encima de la línea */
body.single .ti-post .ti-comments .children .tiLk-comBtn,
body.single .ti-post .ti-comments .children .tiLk-comBtn.is-guest{
  position: relative;
  z-index: 2;
}

/* 5) Ajuste: columna izquierda compacta */
body.single .ti-post .ti-comments .tiS-comSide{
  flex: 0 0 44px;
  padding: 10px 0 12px;
}

/* 6) Si el avatar se ve muy separado, compacta */
body.single .ti-post .ti-comments .tiS-comAvatarImg{
  width: 32px !important;
  height: 32px !important;
}

/* 7) Indent replies limpio (sin doble línea) */
body.single .ti-post .ti-comments .children{
  border-left: 0 !important;
  padding-left: 30px;
}


/* =========================================================
   TI — Árbol completo replies (vertical padre + hijos)
   ========================================================= */

/* 1️⃣ Espacio replies */
body.single .ti-post .ti-comments .children{
  padding-left: 60px !important;
  position: relative;
  border-left: 0 !important;
}

/* 2️⃣ Línea vertical del bloque replies */
body.single .ti-post .ti-comments .children::before{
  content: "";
  position: absolute;
  top: -76px;              /* 🔥 conecta con el padre */
  bottom: 0;
  left: 30px;
  width: 1px;
  background: rgba(231,242,238,.18);
  border-radius: 2px;
}

/* 3️⃣ Cada reply */
body.single .ti-post .ti-comments .children > .tiS-com{
  position: relative;
}

/* 4️⃣ Línea horizontal hacia avatar */
body.single .ti-post .ti-comments .children > .tiS-com::before{
  content: "";
  position: absolute;
  top: 22px;               /* centro avatar */
  left: -30px;
  width: 12px;
  height: 1px;
  background: rgba(231,242,238,.18);
  border-radius: 2px;
}

/* 5️⃣ Cortar vertical después del último reply */
body.single .ti-post .ti-comments .children > .tiS-com:last-child::after{
  content: "";
  position: absolute;
  left: -30px;
  top: 22px;
  bottom: -20px;
  width: 2px;
  background: #13151D;     /* color fondo */
}




/* ARTUCILOS RELACIONADOS*/
/* =========================================================
   TI RELATED (Platzi-like) — tiRel-*
   ========================================================= */

body.single .tiRel{
  padding: 26px 0 56px;
}

body.single .tiRel__h2{
  margin: 0 0 16px;
  font-size: 26px;
  /*font-weight: 900;*/
  letter-spacing: -0.02em;
  color: #fff;
}

body.single .tiRel__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 1100px){
  body.single .tiRel__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  body.single .tiRel__grid{ grid-template-columns: 1fr; }
}

/* Card */
body.single .tiRelCard{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #fff;

  border-radius: 18px;
  overflow: hidden;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(231,242,238,.10);
  box-shadow: 0 18px 70px rgba(0,0,0,.30);

  transition: transform .14s ease, border-color .14s ease, filter .14s ease;
  min-height: 300px;
}

body.single .tiRelCard:hover{
  border-color: rgba(125,255,188,.22);
  transform: translateY(-2px);
  filter: brightness(1.02);
}

/* Media */
body.single .tiRelCard__media{
  aspect-ratio: 16/9;
  background: rgba(231,242,238,.06);
  overflow: hidden;
}

body.single .tiRelCard__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.03);
}

body.single .tiRelCard__fallback{
  width: 100%;
  height: 100%;
  background:
    radial-gradient(70% 80% at 30% 20%, rgba(125,255,188,.14), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.72));
}

/* Body */
body.single .tiRelCard__body{
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.18));
}

body.single .tiRelCard__title{
  margin: 0;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -0.01em;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.single .tiRelCard__excerpt{
  margin: 0;
  color: rgba(231,242,238,.75);
  font-size: 13px;
  line-height: 1.55;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Footer */
body.single .tiRelCard__foot{
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
}

body.single .tiRelCard__author{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.single .tiRelCard__avatar{
  border-radius: 999px;
  flex: 0 0 auto;
  box-shadow: 0 10px 22px rgba(0,0,0,.30);
}

body.single .tiRelCard__name{
  font-size: 13px;
  font-weight: 800;
  color: rgba(231,242,238,.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* Likes pill */
body.single .tiRelCard__likes{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(231,242,238,.75);
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(231,242,238,.10);
  backdrop-filter: blur(6px);
}

body.single .tiRelCard__heart{
  opacity: .9;
  color: #ff4d6d;
}

/* =========================================================
   TI — LIKES (tiLk-*)  ✅ clases nuevas, sin duplicar style.css
   Scope: body.single .ti-post
   ========================================================= */
.site-content{
	background:#13161C;
}
/* Post like chip (button) */
body.single .ti-post .tiLk-postBtn{
  appearance:none;
  border: 1px solid rgba(231,242,238,.10);
  background: rgba(0,0,0,.32);
  color: #0AE98A;
  cursor: pointer;
}
body.single .ti-post .tiLk-postBtn .tiS-chip__icon{
  color: rgba(231,242,238,.60);
}
body.single .ti-post .tiLk-postBtn.is-liked .tiS-chip__icon{
  color: #ff4d6d;
}
body.single .ti-post .tiLk-postBtn:disabled{
  opacity: .7;
  cursor: not-allowed;
}
body.single .ti-post .tiLk-postBtn.is-guest{
  pointer-events:none;
  opacity:.75;
}

/* Comment like button */
body.single .ti-post .tiLk-comBtn{
  appearance:none;
  /*border: 1px solid rgba(231,242,238,.12);
  background: rgba(0,0,0,.18);
  color: rgba(231,242,238,.86);
  border-radius: 12px;*/
	 background: transparent;
  padding: 8px 8px;
  width: 36px;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 6px;
  cursor:pointer;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}
body.single .ti-post .tiLk-comBtn:hover{
  border-color: rgba(125,255,188,.25);
  transform: translateY(-1px);
  filter: brightness(1.03);
}
body.single .ti-post .tiLk-comBtn:disabled{
  opacity:.7;
  cursor:not-allowed;
  transform:none;
}
body.single .ti-post .tiLk-comBtn.is-guest{
  pointer-events:none;
  opacity:.75;
}

body.single .ti-post .tiLk-comIcon{
  line-height: 1;
  font-size: 16px;
  color: rgba(231,242,238,.55);
}
body.single .ti-post .tiLk-comBtn.is-liked .tiLk-comIcon{
  color: #ff4d6d;
}
body.single .ti-post .tiLk-comCount{
  font-weight: 900;
  font-size: 12px;
  color: rgba(231,242,238,.75);
}

/* =========================================================
   TI — Comments UX (tiCmt-*)  ✅ nuevas clases
   ========================================================= */

body.single .ti-post .tiCmt-loginOnly{  
  padding: 14px 16px;  
	font-size:.8em;
}

body.single .ti-post .tiCmt-loginBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 2px 7px;
  border-radius: 8px;
  border: 1px solid rgba(38, 138, 87, 0.84);
  background: rgba(24, 77, 49, 0.41);
  color: #fff;
  text-decoration: none;
}


body.single .ti-post .tiCmt-loginBtn:hover{
  filter: brightness(1.08);
}

body.single .ti-post .tiCmt-more{
  height: 1px;
}

/* =========================================================
   TI — Composer compacto comentarios (tiCmt-*) FIX
   ========================================================= */

body.single .ti-post .tiCmt-composer{
  position: relative;
  border: 1px solid rgba(231,242,238,.12);
  background: rgba(0,0,0,.20);
  border-radius: 14px;
  padding: 10px 52px 10px 14px; /* espacio botón */
}
body.single .ti-post .tiCmt-composer:hover{
  
  border: 1px solid #0AE98A;
  background: #000000;
}

body.single .ti-post .tiCmt-input{
  width: 100%;
  min-height: 24px;
  max-height: 160px;
  resize: none;              /* ✅ quita esquina */
  overflow: hidden;          /* ✅ evita scroll raro */
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important; /* ✅ quita borde azul */
  background: none !important;
  color: rgba(231,242,238,.92);
  font-size: .7em;
  line-height: 1.35;
  padding: 0;
  margin: 0;
}

body.single .ti-post .tiCmt-input:focus{
  outline: none !important;
  box-shadow: none !important;
}

/* Botón dentro del composer, a la derecha */
body.single .ti-post .tiCmt-sendBtn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(231,242,238,.18);
  background: rgba(255,255,255,.92);
  color: #0b0f0e;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

body.single .ti-post .tiCmt-sendBtn:hover{
  filter: brightness(1.06);
}

body.single .ti-post .tiCmt-sendIcon{
  font-size: 16px;
  line-height: 1;
}

/* Compacta márgenes que WP suele meter */
body.single .ti-post .comment-respond,
body.single .ti-post .comment-form{
  margin: 0;
}
body.single .ti-post .comment-form-comment{
  margin: 0;
}

/* ==========================================
TI – Bloque Apoyo Footer Single
========================================== */

.ti-support{
  background: linear-gradient(135deg, #0f1f1a 0%, #122b22 100%);
  padding: 40px 24px;
border-radius:15px;
  margin-top: 15px;
	margin-bottom:30px;
  border-top: 1px solid rgba(125,255,188,.15);
}

.ti-support__container{
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: center;
  flex-wrap: wrap;
}

.ti-support__left{
  flex: 1;
  min-width: 280px;
}

.ti-support__title{
  color: #ffffff;
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 12px;
}

.ti-support__text{
  color: rgba(255,255,255,.75);
  font-size: 0.8em;
  line-height: 1.6;
  margin-bottom: 20px;
}

.ti-support__text strong{
  color: #7DFFBC;
}

.ti-support__brand{
  display: flex;
  flex-direction: column; /* ← ahora en dos filas */
  align-items: center;    /* ← centrado horizontal */
  justify-content: center;
  text-align: center;
  gap: 14px;
  margin-top: 20px;
}

.ti-support__logo{
  height: 60px;
  width: auto;
}

.ti-support__tagline{
	color:#b3b3b3;
  font-size: 1em;
  max-width: 600px;
  font-weight: 500;
}

.ti-support__right{
  display: flex;
  align-items: center;
}

.ti-support__btn{
  background: #f4b400;
  color: #000;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: 10px;
  text-decoration: none;
  transition: all .25s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}

.ti-support__btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(0,0,0,.35);
  opacity: .95;
  color:#FFFFFF;
	background: #05BE50;
}

/* Responsive */
@media (max-width: 768px){
  .ti-support__container{
    flex-direction: column;
    text-align: center;
  }

  .ti-support__brand{
    justify-content: center;
  }
}

/* =========================================================
   TI — Estado activo botón enviar comentario
   ========================================================= */

body.single .ti-post .tiCmt-sendBtn{
  background: rgba(255,255,255,.90);
  color: #0b0f0e;
  transition: background .18s ease, transform .12s ease;
}

/* Estado activo (cuando hay texto) */
body.single .ti-post .tiCmt-sendBtn.is-active{
  background: #7DFFBC;          /* tu verde */
  color: #042017;
  border-color: rgba(125,255,188,.60);
}

/* Hover cuando activo 
body.single .ti-post .tiCmt-sendBtn.is-active:hover{
  transform: scale(1.05);
}*/


  /* =========================================================
    3 COMENTARIOS ULTIMOS DEL BLOG
     ========================================================= */

  .tiRpz-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 20px;
  }

  @media (max-width: 1024px){
    .tiRpz-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  }

  @media (max-width: 640px){
    .tiRpz-grid{ grid-template-columns: 1fr; }
  }

  .tiRpz-card{
    display:flex;
    flex-direction:column;
    background: rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    overflow:hidden;
    text-decoration:none !important;
    transition:.18s ease;
  }

  .tiRpz-card:hover{
    transform:translateY(-3px);
    border-color:rgba(125,255,188,.25);
  }

  .tiRpz-media{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
  }

  .tiRpz-media img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .tiRpz-tag{
    position:absolute;
    top:14px;
    left:14px;
    padding:6px 12px;
    font-size:.6em;
    font-weight:500;
    letter-spacing:.08em;
    border-radius:999px;
    background:rgba(0,0,0,.55);
    border:1px solid rgba(255,255,255,.2);
    color:#fff;
	text-transform: uppercase;
  }

  .tiRpz-body{
    padding:18px;
    display:flex;
    flex-direction:column;
    flex:1;
  }

  .tiRpz-h3{
    margin:0 0 8px;
    font-size:.9em;
    font-weight:600;
    color:#b3b3b3;
    line-height:1.25;
  }

  .tiRpz-excerpt{
    font-size:.8em;
    line-height:1.5;
    color:#b3b3b3;
    margin:0 0 18px;
    flex:1;
  }

  /* 🔥 Meta perfectamente alineado */
  .tiRpz-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:auto;
  }

  .tiRpz-author{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }

  .tiRpz-ava{
    width:30px;
    height:30px;
    border-radius:50%;
    overflow:hidden;
    flex-shrink:0;
  }

  .tiRpz-ava img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .tiRpz-name{
     font-size:.8em;
    font-weight:500;
    color:#b3b3b3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .tiRpz-likes{
    display:flex;
    align-items:center;
    gap:6px;
     font-size:.8em;
    font-weight:500;
    color:#22C55E;
    flex-shrink:0;
  }

  .tiRpz-heart{
    opacity:.6;
  }



/* =========================================================
   TI — BLOG “Platzi-like” (tiBz-*)  ✅ sin choques
   Scope: .tiBz-wrap
   ========================================================= */
body.page-template-home-php .site-content .ast-container{
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100% !important;
}
.tiBz-bg{
  background:
    radial-gradient(900px 520px at 70% 0%, rgba(125,255,188,.10), transparent 60%),
    linear-gradient(180deg, #0b0f14, #0b0f14);
}

.tiBz-wrap{

  padding: 28px 0 40px;
	
}

.tiBz-shell{
  width: min(1000px, calc(100% - 28px));
  margin: 0 auto;
}
/* ---------- Titulo (horizontal) ---------- */
.tiBz-latestTitle{
  margin: 15px 0 20px 0;
  font-weight: 500;
font-size:2em;
  opacity: .9;
}

/* ---------- Featured (horizontal) ---------- */
.tiBz-feature{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(231,242,238,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  overflow:hidden;
  margin-bottom: 18px;
}

.tiBz-feature__body{
  padding: 16px 16px 14px;
}

.tiBz-feature__kpis{
  font-size: 12px;
  color: rgba(231,242,238,.68);
  display:flex;
  align-items:center;
  gap: 8px;
  margin-bottom: 10px;
}
.tiBz-dot{ opacity:.6; }

.tiBz-feature__title{
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.tiBz-feature__title a{
  color:#fff;
  text-decoration:none;
}
.tiBz-feature__title a:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tiBz-feature__excerpt{
  margin: 0 0 12px;
  color: rgba(231,242,238,.78);
  font-size: 13px;
  line-height: 1.55;
}

.tiBz-feature__meta{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.tiBz-metaItem{
  font-size: 12px;
  color: rgba(231,242,238,.78);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(231,242,238,.10);
  padding: 4px 8px;
  border-radius: 10px;
}

.tiBz-feature__by{
  font-size: 12px;
  color: rgba(231,242,238,.72);
}

.tiBz-feature__media{
  position: relative;
  height: 230px;          /* altura fija */
  padding: 8px;           /* espacio interno */
  overflow: hidden;
 
  box-sizing: border-box;
}

.tiBz-feature__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: transform .25s ease, filter .25s ease;
  display:block;
}

/* Hover elegante */
.tiBz-feature__media:hover img{
  transform: scale(1.04);
  filter: brightness(1.05);
}
.tiBz-feature__ph{
  display:block;
  width:100%;
  height:100%;
  background: linear-gradient(135deg, rgba(125,255,188,.18), rgba(0,0,0,.25));
}
.tiBz-feature__by{
  display:flex;
  align-items:center;
  gap: 10px;
  font-size: 13px;
  color: rgba(231,242,238,.72);
  margin-top: 10px;
}

.tiBz-feature__ava{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(231,242,238,.15);
}
/* ---------- Main layout ---------- */
.tiBz-main{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  align-items:start;
}

/* Sidebar */
.tiBz-side{
  position: sticky;
  top: 18px;
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.tiBz-search{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(231,242,238,.10);
}
.tiBz-searchIcon{
  opacity: .75;
}
#tiBz-searchInput{
  width:100%;
  background: transparent;
  border: 0;
  outline: none;
  color: rgba(231,242,238,.92);
  font-size: 13px;
}
#tiBz-searchInput::placeholder{ color: rgba(231,242,238,.50); }

.tiBz-cats{
  display:flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(231,242,238,.10);
}

.tiBz-cat{
  appearance:none;
  border: 1px solid rgba(231,242,238,.10);
  background: rgba(0,0,0,.20);
  color: rgba(231,242,238,.86);
  padding: 9px 10px;
  border-radius: 10px;
  text-align:left;
  cursor:pointer;
  font-size: 13px;
}
.tiBz-cat:hover{
  border-color: rgba(125,255,188,.22);
}
.tiBz-cat.is-active{
  border-color: rgba(125,255,188,.35);
  background: rgba(125,255,188,.10);
}

/* Grid */
.tiBz-gridWrap{ min-width: 0; }
.tiBz-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.tiBz-card{
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(231,242,238,.10);
  overflow:hidden;
  box-shadow: 0 14px 44px rgba(0,0,0,.25);
  display:flex;
  flex-direction: column;
  min-height: 280px;
}

.tiBz-card__media{
  display:block;
  aspect-ratio: 16/9;
  background: rgba(0,0,0,.22);
}
.tiBz-card__media img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.tiBz-card__ph{
  display:block;
  width:100%;
  height:100%;
  background: linear-gradient(135deg, rgba(125,255,188,.18), rgba(0,0,0,.25));
}

.tiBz-card__body{
  padding: 12px 12px 12px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.tiBz-card__top{
  display:flex;
  align-items:center;
  justify-content: flex-start;
  gap: 6px;
}

.tiBz-pill{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(231,242,238,.10);
}

.tiBz-read{
  font-size: 12px;
  color: rgba(231,242,238,.68);
}

.tiBz-card__title{
  margin:0;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 900;
}
.tiBz-card__title a{
  color:#fff;
  text-decoration:none;
}
.tiBz-card__title a:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tiBz-card__author{
  display:flex;
  align-items:center;
  gap: 8px;
  color: rgba(231,242,238,.78);
  font-size: 12px;
  margin-top: auto;
}

.tiBz-ava{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(231,242,238,.10);
  display:block;
}

.tiBz-card__meta{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}

/* Loader / sentinel */
.tiBz-loader{
  margin-top: 12px;
  font-size: 13px;
  color: rgba(231,242,238,.72);
}
.tiBz-sentinel{ height: 1px; }

/* Responsive */
@media (max-width: 980px){
  .tiBz-main{ grid-template-columns: 1fr; }
  .tiBz-side{ position: static; }
  .tiBz-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiBz-feature{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .tiBz-grid{ grid-template-columns: 1fr; }
}


/* =========================================================
   TI — BLOG FIX: alineación + imagen uniforme + hover
   ========================================================= */

/* 1) Card: estructura consistente */
.tiBz-card{
  display: flex;
  flex-direction: column;
}

/* 2) Media: altura uniforme (misma altura en todas) */
.tiBz-card__media{
  position: relative;
  display: block;
  height: 170px;            /* ✅ alto fijo uniforme */
  aspect-ratio: auto;       /* anula el 16/9 previo */
  overflow: hidden;
  background: rgba(0,0,0,.22);
}

.tiBz-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .18s ease, filter .18s ease;
  display:block;
}

/* Hover: escala mínima */
.tiBz-card:hover .tiBz-card__media img{
  transform: scale(1.04);
  filter: brightness(1.02);
}

/* 3) Body: forzar “zona inferior” fija */
.tiBz-card__body{
  display:flex;
  flex-direction: column;
  flex: 1;                  /* ✅ ocupa el alto disponible */
  min-height: 180px;        /* ayuda a uniformar la parte texto */
}

/* 4) Título: limitar a 2 líneas para que no rompa la altura */
.tiBz-card__title{
  display: -webkit-box;
  -webkit-line-clamp: 2;    /* ✅ máximo 2 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2); /* reserva espacio fijo */
}

/* 5) Autor + meta siempre abajo y alineados */
.tiBz-card__author{
  margin-top: auto;         /* empuja al fondo */
  min-height: 28px;         /* reserva altura igual */
  display:flex;
  align-items:center;
}

.tiBz-card__meta{
  min-height: 26px;         /* reserva altura igual */
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: nowrap;        /* evita saltos raros */
}

/* Si los textos son largos, que no rompan la fila */
.tiBz-card__meta .tiBz-metaItem{
  white-space: nowrap;
}

/* Responsive: ajusta alto de imagen */
@media (max-width: 980px){
  .tiBz-card__media{ height: 160px; }
}
@media (max-width: 560px){
  .tiBz-card__media{ height: 190px; }
}

/* =========================================================
   TI — Astra: Acceder (guest) + Avatar dropdown (logged)
   Reemplaza completo el CSS anterior
   ========================================================= */

/* -----------------------------
   1) BOTÓN "ACCEDER" (guest)
   ----------------------------- */
.ti-nav-acceder { display:flex; align-items:center; }

.ti-nav-acceder > a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 33px;
  padding: 0 14px !important;

  border-radius: 10px;
  background: rgba(125,255,188,.14);
  border: 1px solid rgba(125,255,188,.45);

  color: #7DFFBC !important;
  font-weight: 400;

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

.ti-nav-acceder > a:hover{
  background: rgba(125,255,188,.22);
  border-color: rgba(125,255,188,.70);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.25);
}

.ti-nav-acceder > a:after{ display:none !important; }

/* -----------------------------
   2) AVATAR + SUBMENU (logged)
   ----------------------------- */
.ti-user-menu{
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 12px;
}

/* Trigger (link que contiene el avatar) */
.ti-user-menu > .ti-user-trigger{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  text-decoration: none !important;
}

/* Avatar redondo */
.ti-user-menu .ti-user-avatar-img{
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  object-fit: cover;
  border: 1px solid rgba(125,255,188,.55);
  transition: transform .18s ease, border-color .18s ease;
}

.ti-user-menu > .ti-user-trigger:hover .ti-user-avatar-img{
  transform: scale(1.04);
  border-color: rgba(125,255,188,.85);
}

/* Quita decoraciones del theme */
.ti-user-menu > .ti-user-trigger:after{ display:none !important; }

/* -----------------------------
   3) DESKTOP: dropdown flotante con hover
   ----------------------------- */
@media (min-width: 922px){
  .ti-user-menu > .ti-user-dropdown{
    position: absolute;
    top: calc(100% + 10px);
    /* centrado respecto al avatar para que NO se salga */
    left: 50%;
    transform: translateX(-50%);   
    max-width: min(120px, calc(100vw - 24px));
    width: max-content;    
    border-radius: 5px;
    background: #000000 !important;
    border: 1px solid rgba(125,255,188,.28);
    box-shadow: 0 14px 40px rgba(0,0,0,.45);
    display: none; /* oculto en desktop */
    z-index: 9999;
  }
  .ti-user-menu:hover > .ti-user-dropdown{
    display: block;
  }
	.ti-user-menu > .ti-user-dropdown{
		margin-top: -11px !important;
	}
  .ti-user-menu > .ti-user-dropdown a{
    display: block;
   padding: 5px 20px;
    color: rgba(231,242,238,.95) !important;
    font-weight: 400;
	  font-size:0.8em;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
  }

  .ti-user-menu > .ti-user-dropdown a:hover{
    background: rgba(125,255,188,.12);
    color: #7DFFBC !important;
  }
}

/* -----------------------------
   4) MÓVIL: Off-canvas (hamburguesa)
   - Aquí forzamos que el submenú SIEMPRE se vea.
   - Evita depender del toggle de Astra.
   ----------------------------- */
@media (max-width: 921px){

  /* Avatar como item normal del menú off-canvas */
  .ti-user-menu{
    display: block;
    margin: 0;
  }
.ti-user-menu > .ti-user-trigger {
		margin-bottom: 10px;
	}

 
  /* IMPORTANTE: mostrar submenu SIEMPRE en móvil */
  .ti-user-menu > .ti-user-dropdown{
    position: static !important;
    transform: none !important;

    display: block !important;     /* <- lo que faltaba */
    opacity: 1 !important;
    visibility: visible !important;
   

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

  
  }

  .ti-user-menu > .ti-user-dropdown a{
    display: block;
    padding:0px 20px;
    border-radius: 8px;
    color: rgba(231,242,238,.95) !important;
    text-decoration: none !important;
  }

  .ti-user-menu > .ti-user-dropdown a:hover{
    background: rgba(125,255,188,.10);
    color: #7DFFBC !important;
  }

  /* En móvil no necesitamos flechitas/indicadores */
  .ti-user-menu.menu-item-has-children > a:after{
    display: none !important;
  }
}

/* =========================================================
   TI — Página Mi Cuenta (/mi-cuenta)
   ========================================================= */
.tiAcc-wrap{
  padding: 28px 16px 56px;
}
.tiAcc-card{
  max-width: 1100px;
  margin: 0 auto;
  background: #0b1511;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 320px 1fr;
  box-shadow: 0 16px 50px rgba(0,0,0,.40);
}
.tiAcc-side{
  padding: 22px 18px;
  border-right: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(125,255,188,.08), transparent 40%);
}
.tiAcc-user{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 8px 6px 16px;
}
.tiAcc-avatar{
  border-radius: 999px !important;
  border: 2px solid rgba(125,255,188,.45);
  width: 56px !important;
  height: 56px !important;
}
.tiAcc-userName{
  font-weight: 800;
  color: rgba(231,242,238,.95);
  line-height: 1.1;
}
.tiAcc-userEmail{
  font-size: 13px;
  color: rgba(231,242,238,.65);
  margin-top: 4px;
}
.tiAcc-nav{
  margin-top: 8px;
  display:flex;
  flex-direction: column;
  gap: 6px;
}
.tiAcc-link{
  padding: 12px 12px;
  border-radius: 12px;
  text-decoration: none !important;
  color: rgba(231,242,238,.90) !important;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.tiAcc-link:hover{
  transform: translateY(-1px);
  background: rgba(125,255,188,.08);
  border-color: rgba(125,255,188,.22);
}
.tiAcc-link.is-active{
  background: rgba(125,255,188,.12);
  border-color: rgba(125,255,188,.35);
  color: #7DFFBC !important;
  font-weight: 800;
}
.tiAcc-link--danger:hover{
  background: rgba(255,80,120,.10);
  border-color: rgba(255,80,120,.25);
}

.tiAcc-main{
  padding: 26px 22px;
}
.tiAcc-title{
  margin: 0 0 16px;
  color: rgba(231,242,238,.98);
  font-weight: 900;
  font-size: 22px;
}
.tiAcc-notice{
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(125,255,188,.10);
  border: 1px solid rgba(125,255,188,.25);
  color: rgba(231,242,238,.92);
  margin-bottom: 14px;
  transition: opacity .4s ease, transform .4s ease;
}
.tiAcc-form{
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.tiAcc-row{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap: 12px;
  align-items:center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.tiAcc-label{
  color: rgba(231,242,238,.70);
  font-weight: 700;
}
.tiAcc-input{
  width: 100%;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: rgba(231,242,238,.95);
  outline: none;
  height: 46px;
  display: flex;
  align-items: center;	
  padding-top: 0;
  padding-bottom: 0;
  line-height: 46px;
}
.tiAcc-input:focus{
  border-color: rgba(125,255,188,.40);
  box-shadow: 0 0 0 3px rgba(125,255,188,.10);
}
.tiAcc-help{
  grid-column: 2 / -1;
  font-size: 12px;
  color: rgba(231,242,238,.55);
  margin-top: -6px;
}
.tiAcc-btn{
  align-self: flex-start;
  margin-top: 14px;
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(125,255,188,.40);
  background: rgba(125,255,188,.16);
  color: #7DFFBC;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}
.tiAcc-btn:hover{
  transform: translateY(-1px);
  background: rgba(125,255,188,.22);
}

/* Responsive */
@media (max-width: 920px){
  .tiAcc-card{ grid-template-columns: 1fr; }
  .tiAcc-side{ border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  .tiAcc-row{ grid-template-columns: 1fr; }
  .tiAcc-help{ grid-column: 1 / -1; }
}
/* Tab Notificaciones */
.tiAcc-checks{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.tiAcc-check{
  display:flex;
  gap: 10px;
  align-items:center;
  color: rgba(231,242,238,.90);
  font-weight: 600;
}
.tiAcc-check input{
  width: 18px;
  height: 18px;
  accent-color: #7DFFBC;
}
.tiAcc-stack{
  display:flex;
  flex-direction: column;
  gap: 10px;
}