:root{
  --bg:#07111f;
  --bg-soft:#0d1b2e;
  --card:#ffffff;
  --card-soft:#f8fafc;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --primary:#7c3aed;
  --primary-2:#2563eb;
  --accent:#06b6d4;
  --danger:#dc2626;
  --success:#15803d;
  --shadow:0 18px 50px rgba(15,23,42,.12);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;background:#f4f7fb;color:var(--text);line-height:1.5}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1180px,calc(100% - 2rem));margin:0 auto}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(7,17,31,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0}
.brand{display:inline-flex;align-items:center;gap:.65rem;font-weight:800;font-size:1.15rem;color:#fff}
.brand-mark{
  width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 10px 30px rgba(124,58,237,.35)
}

/* --- LOGOTIPO: TAMAÑO NORMAL Y RECORTADO --- */
.brand-logo {
  display: inline-flex;
  align-items: center;
  height: 45px;
  overflow: hidden;
}
.brand-logo img {
  height: 150px;
  width: auto;
  margin-top: -25px;
  margin-bottom: -25px;
  display: block;
  transition: transform 0.3s ease;
}
.brand-logo img:hover {
  transform: scale(1.05);
}

.main-nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.main-nav a,.link-button{
  color:rgba(255,255,255,.92);font-weight:600;font-size:.96rem
}
.main-nav a:hover,.link-button:hover{color:#fff}
.nav-cta{
  padding:.75rem 1rem;border-radius:999px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff !important;box-shadow:0 16px 30px rgba(37,99,235,.25)
}
.nav-toggle{display:none;border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;padding:.7rem .9rem;border-radius:12px}

/* Main generic */
.main-content{min-height:60vh}
.section{padding:4.5rem 0}
.alt-section{background:linear-gradient(180deg,#f8fbff 0%,#eef4fb 100%)}
.section-overlap{margin-top:-3rem;position:relative;z-index:3}
.section-header{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.section-header h2,.cta-box h2{margin:.2rem 0 0;font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.05}
.section-kicker,.hero-kicker{
  display:inline-block;margin-bottom:.45rem;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--accent)
}
.text-link{color:var(--primary);font-weight:700}
.card{
  background:var(--card);border:1px solid rgba(148,163,184,.18);border-radius:var(--radius);
  padding:1.2rem;box-shadow:var(--shadow)
}
.narrow{max-width:680px;margin-inline:auto}
.alert{padding:.95rem 1rem;border-radius:16px;margin:1rem auto}
.alert.success{background:#dcfce7;color:#166534}
.alert.error{background:#fee2e2;color:#991b1b}
.inline-form{display:inline}
.link-button{background:transparent;border:0;cursor:pointer;padding:0}
button,.button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:auto;padding:.95rem 1.25rem;border-radius:14px;border:0;cursor:pointer;
  font:inherit;font-weight:800;transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease
}
button:hover,.button:hover{transform:translateY(-1px)}
.button-primary,button{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;
  box-shadow:0 14px 30px rgba(37,99,235,.22)
}
.button-secondary{
  background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22)
}
input,textarea,select{
  width:100%;padding:.95rem 1rem;border-radius:14px;border:1px solid #cbd5e1;
  background:#fff;font:inherit;color:var(--text)
}
input:focus,textarea:focus,select:focus{outline:none;border-color:#93c5fd;box-shadow:0 0 0 4px rgba(147,197,253,.22)}
.grid-form{display:grid;gap:1rem}
.grid-form.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-form.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-form .full{grid-column:1/-1}

/* Hero */
.hero-video-section{
  position:relative;min-height:76vh;display:flex;align-items:center;overflow:hidden;
  background:#050b14
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at top left, rgba(124,58,237,.32), transparent 32%),
    radial-gradient(circle at right center, rgba(6,182,212,.24), transparent 26%),
    linear-gradient(180deg, rgba(5,11,20,.24) 0%, rgba(5,11,20,.76) 70%, rgba(5,11,20,.92) 100%);
}
.hero-content{position:relative;z-index:2;padding:7rem 0 6.5rem}
.hero-copy{max-width:760px;color:#fff}
.hero-copy h1{
  margin:.15rem 0 1rem;font-size:clamp(2.6rem,6vw,5rem);line-height:.95;letter-spacing:-.03em
}
.hero-copy p{
  margin:0 0 1.5rem;font-size:clamp(1rem,2vw,1.2rem);max-width:720px;color:rgba(255,255,255,.9)
}
.hero-actions{display:flex;gap:.9rem;flex-wrap:wrap}
.hero-metrics{
  display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem
}
.hero-metrics div{
  min-width:150px;padding:1rem 1.1rem;border-radius:18px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px)
}
.hero-metrics strong{display:block;font-size:1.35rem;color:#fff}
.hero-metrics span{font-size:.92rem;color:rgba(255,255,255,.82)}

/* Search block */
.search-card{padding:1.3rem}
.search-card form{margin-top:1rem}
.search-card button{width:100%}

/* Cards and lists */
.list-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ad-card{transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;background:linear-gradient(180deg,#fff,#fbfdff)}
.ad-card:hover{transform:translateY(-4px);box-shadow:0 18px 46px rgba(15,23,42,.14);border-color:rgba(124,58,237,.22)}
.ad-card h3{margin:.9rem 0 .6rem;font-size:1.2rem;line-height:1.15}
.ad-card p{margin:0 0 1rem;color:#475569}
.card-top{display:flex;justify-content:space-between;gap:1rem;align-items:center;flex-wrap:wrap}
.badge{
  display:inline-flex;align-items:center;padding:.4rem .75rem;background:#ede9fe;color:#6d28d9;
  border-radius:999px;font-weight:700;font-size:.82rem
}
.ad-pill{
  display:inline-flex;align-items:center;padding:.38rem .7rem;border-radius:999px;background:#e0f2fe;color:#0c4a6e;font-size:.82rem;font-weight:700
}
.meta,.meta-row{display:flex;gap:.75rem;flex-wrap:wrap;color:var(--muted);font-size:.95rem}
.meta-row{justify-content:space-between;align-items:center}
.actions{display:flex;gap:.8rem;justify-content:space-between;align-items:center;flex-wrap:wrap}
.image-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.image-grid img{width:100%;height:220px;object-fit:cover;border-radius:18px;border:1px solid var(--line)}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:.85rem;border-bottom:1px solid var(--line)}
.status.published{color:var(--success)}
.status.pending{color:#b45309}
.status.rejected{color:var(--danger)}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.list-item{padding:.95rem 0;border-bottom:1px solid var(--line)}
.list-item:last-child{border-bottom:0}

/* Home extra */
.category-grid,.steps-grid{
  display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))
}
.category-card,.step-card{
  background:#fff;border:1px solid rgba(148,163,184,.16);border-radius:24px;padding:1.2rem;box-shadow:var(--shadow)
}
.category-card h3,.step-card h3{margin:.7rem 0 .35rem;font-size:1.1rem}
.category-icon,.step-number{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-weight:800
}
.category-icon{background:linear-gradient(135deg,#ede9fe,#dbeafe);color:#5b21b6;font-size:1.3rem}
.step-number{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff}
.cta-section{padding-top:0}
.cta-box{
  display:flex;justify-content:space-between;align-items:center;gap:1.25rem;flex-wrap:wrap;
  color:#fff;border-radius:30px;padding:2rem;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.14), transparent 28%),
    linear-gradient(135deg,var(--primary),var(--primary-2),#0f766e);
  box-shadow:0 26px 60px rgba(37,99,235,.25)
}
.cta-box p{max-width:700px;color:rgba(255,255,255,.88);margin:.5rem 0 0}

/* Avatar and profile */
.avatar-wrap{
  width:64px;height:64px;border-radius:18px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;font-weight:800;box-shadow:var(--shadow)
}
.avatar-wrap.large{width:96px;height:96px;border-radius:24px}
.avatar-img{width:100%;height:100%;object-fit:cover}
.avatar-fallback{font-size:1.8rem;line-height:1}
.profile-summary{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}

/* Pagination */
.pagination{display:flex;gap:.65rem;justify-content:center;align-items:center;margin:1.75rem 0 0;flex-wrap:wrap}
.page-link{
  display:inline-flex;min-width:44px;height:44px;padding:0 .9rem;align-items:center;justify-content:center;
  border-radius:999px;background:#fff;border:1px solid rgba(148,163,184,.24);box-shadow:0 6px 18px rgba(15,23,42,.06)
}
.page-link.is-active{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border-color:transparent}

/* Footer */
.site-footer{background:#07111f;color:rgba(255,255,255,.82);padding:3rem 0;margin-top:3rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2rem}
.site-footer h4{margin:0 0 .8rem;color:#fff}
.site-footer a{display:block;color:rgba(255,255,255,.82);margin:.45rem 0}

/* LOGO FOOTER */
.footer-brand { height: 38px; overflow: hidden; display: flex; align-items: center; margin-bottom: 1rem; }
.footer-brand img { height: 85px; width: auto; margin-top: -23px; margin-bottom: -23px; }

/* Reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease, transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}

@media (max-width: 900px){
  .grid-form.cols-2,.grid-form.cols-4,.cols,.footer-grid{grid-template-columns:1fr}
  .hero-video-section{min-height:68vh}
  .section-overlap{margin-top:-2rem}
}
@media (max-width: 760px){
  .nav{align-items:flex-start}
  .nav-toggle{display:inline-flex}
  .main-nav{
    display:none;position:absolute;top:74px;left:1rem;right:1rem;padding:1rem;border-radius:20px;
    background:rgba(7,17,31,.97);border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow)
  }
  .main-nav.is-open{display:flex;flex-direction:column;align-items:flex-start}
  .hero-copy h1{font-size:clamp(2.3rem,10vw,3.4rem)}
  .hero-actions,.cta-box{align-items:stretch}
  .hero-actions .button,.cta-box .button{width:100%}
  .section{padding:3.4rem 0}

  /* Ajuste Logo móvil */
  .brand-logo { height: 35px; }
  .brand-logo img { height: 75px; margin-top: -20px; margin-bottom: -20px; }
}

.auth-card .muted-line, .muted-line {opacity:.78; font-size:.95rem;}
.checkbox-row {display:flex; gap:.75rem; align-items:flex-start;}
.checkbox-row input {margin-top:.35rem; width:auto;}
.legal-card {max-width: 900px; line-height:1.75;}
.legal-card h1 {margin-bottom:1rem;}
.legal-card p + p {margin-top:1rem;}

.legal-page {
    padding: 48px 20px;
    background: #f5f7fb;
    color: #1f2937;
    line-height: 1.75;
    min-height: calc(100vh - 140px);
}

.legal-page .container {
    max-width: 900px;
    margin: 0 auto;
}

.legal-page h1 {
    font-size: 2.2rem;
    margin-bottom: 1.5rem;
    color: #111827;
}

.legal-page h2 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
    color: #111827;
}

.legal-page p {
    margin-bottom: 1rem;
    color: #374151;
}

.legal-page ul {
    margin: 0 0 1.2rem 1.2rem;
    padding: 0;
}

.legal-page li {
    margin-bottom: 0.45rem;
    color: #374151;
}

.legal-page strong {
    color: #111827;
}
/* --- DISEÑO DEL CHAT BIDIRECCIONAL --- */
.chat-list { display: flex; flex-direction: column; gap: 0.5rem; }
.chat-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 16px; background: var(--card-soft); border: 1px solid var(--line); transition: border-color 0.2s; }
.chat-item:hover { border-color: var(--primary); }
.chat-item.unread { border-left: 4px solid var(--primary); background: #f5f3ff; }
.chat-item-info { flex: 1; }
.chat-item-info h3 { margin: 0 0 0.2rem; font-size: 1.1rem; }
.chat-item-info p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.chat-item-meta { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }

.chat-box { display: flex; flex-direction: column; height: 75vh; max-height: 800px; padding: 0; overflow: hidden; }
.chat-header { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--line); background: var(--card-soft); }
.chat-contact { display: flex; align-items: center; gap: 0.8rem; }
.chat-contact h3 { margin: 0; font-size: 1.1rem; }
.btn-back { padding: 0.4rem 0.8rem; font-size: 0.9rem; color: var(--text); border: 1px solid var(--line); background: #fff; border-radius: 10px; }

.chat-messages { flex: 1; padding: 1.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; background: #f4f7fb; }
.msg-bubble-wrap { display: flex; width: 100%; }
.msg-left { justify-content: flex-start; }
.msg-right { justify-content: flex-end; }
.msg-bubble { max-width: 75%; padding: 0.8rem 1.2rem; border-radius: 18px; position: relative; line-height: 1.4; font-size: 0.95rem; }
.msg-left .msg-bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); }
.msg-right .msg-bubble { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; border-bottom-right-radius: 4px; box-shadow: 0 4px 10px rgba(37,99,235,0.2); }
.msg-time { display: block; font-size: 0.7rem; margin-top: 0.4rem; opacity: 0.7; text-align: right; }

.chat-form { display: flex; gap: 0.8rem; padding: 1rem 1.5rem; border-top: 1px solid var(--line); background: var(--card); }
.chat-form textarea { flex: 1; resize: none; border-radius: 18px; padding: 0.8rem 1.2rem; outline: none; border: 1px solid var(--line); font-family: inherit; }
.chat-form textarea:focus { border-color: var(--primary); }

/* --- MEJORAS PERFIL PÚBLICO --- */
.profile-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.5rem;
    align-items: start;
}

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

.location-badge { margin-top: 0.5rem; color: var(--muted); font-weight: 500; }

/* Botón de contacto con efecto */
.btn-contact-glow {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, var(--primary), #6366f1);
    color: white !important;
    padding: 1rem;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    margin-bottom: 1.5rem;
}

.btn-contact-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.5);
    filter: brightness(1.1);
}

.btn-contact-glow .icon { font-size: 1.5rem; }
.btn-contact-glow .btn-text strong { display: block; font-size: 1.1rem; }
.btn-contact-glow .btn-text small { opacity: 0.8; font-size: 0.75rem; }

/* Caja de Bio */
.bio-content {
    background: #f8fafc; /* Gris muy clarito para que resalte el texto */
    padding: 1.5rem;
    border-radius: 12px;
    line-height: 1.7;
    color: #334155;
    border-left: 4px solid var(--primary);
    font-size: 1.05rem;
}

.info-list .info-item { margin-bottom: 1.2rem; }
.info-list .info-item strong { display: block; font-size: 0.8rem; text-transform: uppercase; color: var(--muted); letter-spacing: 0.05em; margin-bottom: 0.3rem; }
.info-list .info-item p { font-weight: 600; color: var(--text); }

/* Valoraciones */
.rating-card { padding: 1rem; border-bottom: 1px solid var(--line); }
.rating-card:last-child { border: none; }
.rating-card .stars { color: #f59e0b; margin-right: 0.5rem; }
.rating-card p { font-style: italic; margin-top: 0.5rem; color: var(--text); }

/* --- SELECTOR DE ESTRELLAS INTERACTIVO --- */
.star-rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.5rem;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.star-rating-input input { display: none; }

.star-rating-input label {
    cursor: pointer;
    color: #cbd5e1; /* Gris apagado */
    transition: all 0.2s ease;
}

/* Magia: ilumina la estrella seleccionada y todas las anteriores */
.star-rating-input label:hover,
.star-rating-input label:hover ~ label,
.star-rating-input input:checked ~ label {
    color: #f59e0b; /* Dorado */
    transform: scale(1.1);
}

.rating-submission-form textarea {
    width: 100%;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #f8fafc;
    font-family: inherit;
    resize: none;
}
/* --- BUSCADOR GLOBAL: ALTO CONTRASTE --- */
.grid-results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
    align-items: start;
}

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

.search-item-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #ffffff; /* Fondo blanco puro */
    border: 1px solid #e2e8f0; /* Borde gris muy clarito */
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.search-item-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.search-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: bold;
    font-size: 1.1rem;
}

.search-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-info {
    flex: 1;
    min-width: 0; /* Evita que el texto empuje la caja */
}

.search-info h4 {
    margin: 0;
    font-size: 1rem;
    color: #1e293b; /* Azul muy oscuro/negro para máximo contraste */
    font-weight: 700;
    /* Por si acaso hay algún otro nombre largo, esto lo mantiene a raya */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-info p {
    margin: 0.2rem 0 0;
    font-size: 0.85rem;
    color: #64748b; /* Gris medio para info secundaria */
}

/* Títulos de las columnas */
.column-title {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
    border-left: 4px solid var(--primary);
}