/* ====================================================================
   Directorio de Diseñadores Ecuador — Estilos globales
   Estilo: moderno minimalista
   ==================================================================== */

/* Area Normal: si el visitante la tiene instalada en su sistema, se usa.
   Si no, el logo cae en Manrope (geometría/peso similar) cargada desde Google Fonts. */
@font-face {
  font-family: 'Area Normal Black';
  src: local('Area Normal Black'), local('AreaNormal-Black'), local('AreaNormalBlack'),
       local('Area Normal'), local('AreaNormal');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Paleta estricta: blanco, negro y grises */
  --bg: #ffffff;
  --surface: #ffffff;
  --ink: #111111;          /* negro principal */
  --ink-soft: #4a4a4a;     /* gris oscuro para texto */
  --ink-muted: #8a8a8a;    /* gris medio */
  --line: #e4e4e4;         /* gris claro para bordes */
  --hover: #f5f5f5;        /* gris muy claro para hover */
  --accent: #111111;       /* el acento también es negro */
  --accent-soft: #f0f0f0;  /* gris claro para fondos sutiles */
  --gold: #6a6a6a;         /* gris medio (antes dorado) */
  --platinum: #1e1e1e;
  --premium-plus: #2b2b2b;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.04);
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 18px;
  --container: 1200px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Escalas de tamaño de texto por grupo (1 = 100%). Editables desde el panel admin,
     que inyecta estos valores en :root según la configuración (config_sitio). */
  --escala-titulos: 1;
  --escala-subtitulos: 1;
  --escala-cuerpo: 1;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--sans);
  font-size: calc(16px * var(--escala-cuerpo));
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink-soft); }

/* Focus visible para accesibilidad por teclado */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}

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

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
/* Tipografía fluida — escala con el viewport sin saltos bruscos */
h1 { font-size: calc(clamp(1.75rem, 1.2rem + 2.5vw, 3.4rem) * var(--escala-titulos)); }
h2 { font-size: calc(clamp(1.4rem, 1.1rem + 1.5vw, 2.2rem) * var(--escala-subtitulos)); }
h3 { font-size: calc(clamp(1.1rem, 1rem + 0.5vw, 1.35rem) * var(--escala-subtitulos)); }
h4 { font-size: calc(clamp(1rem, 0.95rem + 0.25vw, 1.1rem) * var(--escala-subtitulos)); }

p { margin: 0 0 var(--space-2); color: var(--ink-soft); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-3); }
@media (max-width: 600px) {
  .container { padding: 0 16px; }
}

/* Skip-to-content link (a11y) */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 8px 16px;
  z-index: 9999; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* Respeto a prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Navegación ---------- */
.nav {
  background: #111;
  border-bottom: 1px solid #000;
  position: sticky; top: 0; z-index: 50;
  color: #fff;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-2) var(--space-3); max-width: var(--container); margin: 0 auto;
}
.nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em;
  color: #fff;
}
.nav-brand img { height: 52px; width: auto; display: block; max-width: 60vw; }
@media (max-width: 600px) {
  .nav-brand img { height: 40px; }
}
.nav-brand span { color: #c9c9c9; }
.nav-links { display: flex; gap: var(--space-3); align-items: center; }
.nav-links a { font-size: 0.95rem; color: #fff; transition: color .15s; }
.nav-links a:hover { color: #c9c9c9; }
.nav-links a.active { color: #fff; border-bottom: 1px solid #fff; padding-bottom: 2px; }
.nav-links .btn-outline {
  color: #fff; border-color: #fff; background: transparent;
}
.nav-links .btn-outline:hover { background: #fff; color: #111; border-color: #fff; }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: #fff; }

/* Link "Iniciar sesión" en el nav */
.nav-login-link { font-size: .95rem; color: #fff; }

/* Menú de usuario logueado */
.nav-usuario { position: relative; }
.nav-usuario-btn {
  display: flex; align-items: center; gap: 8px;
  background: transparent; border: 1px solid #fff;
  color: #fff; padding: 6px 12px 6px 6px; border-radius: 999px;
  cursor: pointer; font-family: inherit; font-size: .9rem;
  transition: background .15s, color .15s;
}
.nav-usuario-btn:hover { background: #fff; color: #111; }
.nav-usuario-iniciales {
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; color: #111;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: .8rem;
}
.nav-usuario-menu {
  display: none;
  position: absolute; right: 0; top: 100%; margin-top: 8px;
  background: #fff; color: #111; min-width: 180px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px; z-index: 100;
}
.nav-usuario.open .nav-usuario-menu { display: block; }
.nav-usuario-menu a {
  display: block; padding: 8px 12px; border-radius: 4px;
  font-size: .9rem; color: var(--ink);
}
.nav-usuario-menu a:hover { background: var(--hover); color: var(--ink); }

/* Modal de login global */
#login-modal-global {
  position: fixed; inset: 0; z-index: 200;
  display: none; align-items: center; justify-content: center;
}
#login-modal-global.open { display: flex; }
.login-modal-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.55);
}
.login-modal-card {
  position: relative; background: #fff; border-radius: var(--radius);
  padding: var(--space-3); width: 100%; max-width: 420px; margin: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  max-height: calc(100vh - 32px); overflow-y: auto;
}
.login-modal-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: var(--ink-muted);
}
.login-modal-close:hover { color: var(--ink); }

.social-login { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.btn-social {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--radius-sm);
  font-size: .92rem; font-weight: 500; cursor: pointer;
  transition: transform .15s, opacity .15s; text-decoration: none;
}
.btn-social:hover { transform: translateY(-1px); opacity: .92; }
.btn-social svg { flex-shrink: 0; }
.btn-social-google { background: #fff; color: #3c4043; border: 1px solid #dadce0; }
.btn-social-facebook { background: #1877f2; color: #fff; border: 1px solid #1877f2; }
.btn-social-apple { background: #000; color: #fff; border: 1px solid #000; }

.separador-o {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink-muted); font-size: .8rem; margin: 8px 0 12px;
}
.separador-o::before, .separador-o::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav-inner { position: relative; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; background: #111;
    flex-direction: column; gap: 0; padding: var(--space-2);
    border-bottom: 1px solid #000; display: none;
    box-shadow: 0 12px 24px rgba(0,0,0,.4);
    max-height: calc(100vh - 80px); overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px var(--space-2); width: 100%; min-height: 44px; display: flex; align-items: center; }
  .nav-links .btn-outline { width: 100%; padding: 12px 18px !important; justify-content: center; }
  .nav-usuario { width: 100%; }
  .nav-usuario-btn { width: 100%; justify-content: flex-start; }
  .nav-usuario-menu {
    position: static; box-shadow: none; border: 0; margin-top: 0; padding: 0;
    background: transparent;
  }
  .nav-usuario-menu a { color: #fff; padding-left: 36px; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid var(--ink);
  background: var(--ink); color: #fff; font-weight: 500; font-size: .95rem;
  cursor: pointer; transition: transform .15s, background .15s;
  min-height: 44px;  /* touch target */
  font-family: inherit; line-height: 1.2;
}
.btn:active { transform: translateY(0) scale(.98); }
.btn:hover { background: #333; border-color: #333; color: #fff; transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Tarjetas ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--space-3);
  transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: var(--shadow); }

/* ---------- Etiquetas / chips ---------- */
.tag {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  font-size: .78rem; border: 1px solid var(--line); color: var(--ink-soft);
  background: var(--surface); margin: 2px 4px 2px 0;
}
.tag.accent { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Campos ya llenados en el registro y mostrados solo-lectura en "completar perfil" */
.campo-solo-lectura { background: #f3f4f6 !important; color: var(--ink-soft) !important; cursor: not-allowed; }

/* Modal: invitación a anunciar al hacer clic en un espacio publicitario vacío */
.modal-pub-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.55); align-items: center; justify-content: center; padding: 16px;
}
.modal-pub-overlay.open { display: flex; }
.modal-pub {
  background: #fff; border-radius: 16px; max-width: 470px; width: 100%;
  padding: 30px 28px; text-align: center; position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,.32); animation: modalPubIn .18s ease-out;
}
@keyframes modalPubIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-pub__close {
  position: absolute; top: 10px; right: 14px; background: none; border: 0;
  font-size: 1.7rem; line-height: 1; cursor: pointer; color: var(--ink-muted);
}
.modal-pub__close:hover { color: var(--ink); }
.modal-pub__icono { font-size: 2.6rem; margin-bottom: 6px; }
.modal-pub h3 { margin: 0 0 12px; font-family: var(--serif); font-size: 1.3rem; }
.modal-pub p { color: var(--ink-soft); margin: 0 0 12px; line-height: 1.55; font-size: .96rem; }
.modal-pub__cta { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; }
/* El cursor en banners vacíos sugiere que son interactivos */
.banner-link--vacio { cursor: pointer; }
/* La etiqueta de plan solo es visible para usuarios con sesión iniciada */
.tag--plan { display: none; }
body.usuario-autenticado .tag--plan { display: inline-block; }

/* Banner de plan superior (etiqueta sobre el banner) */
.plan-badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(0,0,0,.78); color: #fff; padding: 4px 10px;
  border-radius: 999px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
}
.plan-badge.platinum { background: #111; }
.plan-badge.gold { background: #555; }
.plan-badge.premium-plus { background: #2b2b2b; }

/* ---------- Hero del Home ---------- */
.hero {
  padding: var(--space-5) 0 var(--space-4);
}
.hero h1 { max-width: 18ch; }
.hero .lead { max-width: 50ch; color: var(--ink-soft); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1rem); margin-top: var(--space-2); }
@media (max-width: 600px) {
  .hero { padding: var(--space-4) 0 var(--space-3); }
}
.hero-actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- Banners destacados del Home ---------- */
.banners-section { padding: var(--space-3) 0 var(--space-5); }
.banners-section h2 { margin-bottom: var(--space-2); }
.banners-section .subtitle { color: var(--ink-muted); margin-bottom: var(--space-3); }

/* Banners clickeables: el <a> envuelve cada banner sin afectar su layout */
.banner-link {
  display: block; text-decoration: none; color: inherit;
  transition: transform .2s, box-shadow .2s;
}
.banner-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.banner-link:hover .banner-platinum,
.banner-link:hover .banner-gold,
.banner-link:hover .banner-pp { filter: brightness(1.05); }
.banner-link-platinum { margin-bottom: var(--space-3); }

/* Platinum: banner único ancho */
.banner-platinum {
  position: relative; aspect-ratio: 21 / 6;
  background: linear-gradient(135deg, #0a0a0a, #2a2a2a);
  border-radius: var(--radius-lg); overflow: hidden; color: #fff;
  display: flex; align-items: flex-end; padding: var(--space-3);
}
.banner-platinum img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.banner-platinum .content {
  position: relative; z-index: 2;
}
.banner-platinum h3 { color: #fff; font-size: 1.5rem; }
.banner-platinum p { color: rgba(255,255,255,.85); margin: 0; }
.banner-platinum::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55));
}

/* Gold: 2 banners en fila */
.banners-gold {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.banner-gold {
  position: relative; aspect-ratio: 16 / 7;
  background: linear-gradient(135deg, #2f2f2f, #5a5a5a);
  border-radius: var(--radius); overflow: hidden; color: #fff;
  display: flex; align-items: flex-end; padding: var(--space-3);
}
.banner-gold img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-gold::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.55));
}
.banner-gold .content { position: relative; z-index: 2; }
.banner-gold h4 { color: #fff; font-size: 1.1rem; margin: 0; font-family: var(--serif); }

/* Premium+: cuadrícula de 8 banners cuadrados */
.banners-premium-plus {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
.banner-pp {
  position: relative; aspect-ratio: 1 / 1;
  background: #f0f0f0;
  border-radius: var(--radius); overflow: hidden;
  display: flex; align-items: flex-end; padding: var(--space-2);
}
.banner-pp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner-pp::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.6));
}
.banner-pp .content { position: relative; z-index: 2; color: #fff; }
.banner-pp .content h5 { margin: 0; font-family: var(--serif); font-weight: 600; font-size: .95rem; }
.banner-pp .empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); font-size: .85rem; text-align: center; padding: 12px;
}

@media (max-width: 900px) {
  .banners-gold { grid-template-columns: 1fr; }
  .banners-premium-plus { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Vista previa directorio en home ---------- */
.section { padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.section-header {
  display: flex; align-items: end; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3);
}
.section-header p { margin: 0; max-width: 55ch; }

/* Cuadrícula de diseñadores con auto-fit para evitar saltos bruscos */
.designers-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
}

/* "Cómo funciona": cards de color con número grande e icono en la esquina */
.step-card {
  border-radius: 16px;
  padding: 22px 24px 22px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: Arial, sans-serif;
}
.step-card--blue { background: #4366b0; }
.step-card--purple { background: #6c56a4; }
.step-card--green { background: #51ba65; }

/* === Parallax de "Cómo funciona": cards entran desde la izquierda en cascada === */
/* Las reglas usan .steps-grid como prefijo para tener mayor especificidad que .step-card.is-clickable */
.steps-grid .step-card,
.steps-grid .step-card.is-clickable {
  opacity: 0;
  transform: translate3d(-150px, 0, 0);
  transition:
    opacity 1.1s cubic-bezier(.22, .61, .36, 1),
    transform 1.3s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
.steps-grid.is-visible .step-card,
.steps-grid.is-visible .step-card.is-clickable {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* Stagger: card 1 entra primero, luego 2, luego 3 (efecto barrido izquierda → derecha) */
.steps-grid.is-visible .step-card:nth-child(1),
.steps-grid.is-visible .step-card.is-clickable:nth-child(1) { transition-delay: 0ms; }
.steps-grid.is-visible .step-card:nth-child(2),
.steps-grid.is-visible .step-card.is-clickable:nth-child(2) { transition-delay: 280ms; }
.steps-grid.is-visible .step-card:nth-child(3),
.steps-grid.is-visible .step-card.is-clickable:nth-child(3) { transition-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
  .steps-grid .step-card,
  .steps-grid .step-card.is-clickable { opacity: 1; transform: none; transition: none; }
}
.step-card.is-clickable {
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.step-card.is-clickable:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.step-card.is-clickable:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.step-card__head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.step-card__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  opacity: .95;
}
.step-card__title-row {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 4px 0 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
}
.step-card__num {
  font-family: inherit;
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.step-card h3 {
  color: #fff;
  font-family: inherit;
  font-size: 1.1rem;
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.step-card p {
  color: #fff;
  margin: 0;
  font-size: .92rem;
  font-weight: 400;
  line-height: 1.6;
}

.designer-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-3); display: flex; flex-direction: column; gap: 10px;
  transition: box-shadow .2s, transform .2s;
}
.designer-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

/* Toggle Persona / Agencia en la página de planes */
.tipo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 18px auto 0;
  padding: 6px;
  border: 1.5px solid #4f8df9;
  border-radius: 999px;
  background: #fff;
}
.tipo-toggle__opt {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 8px 22px;
  font: 700 1rem/1 var(--sans, inherit);
  color: var(--ink);
  border-radius: 999px;
  position: relative;
  transition: color .15s;
}
.tipo-toggle__opt:hover:not(.is-active) { color: var(--ink-soft); }
.tipo-toggle__opt.is-active {
  color: #4f8df9;
}
.tipo-toggle__opt.is-active::after {
  content: '';
  position: absolute;
  left: 22px; right: 22px;
  bottom: 2px;
  height: 2px;
  background: #4f8df9;
  border-radius: 2px;
}
.tipo-toggle__opt:focus-visible { outline: 2px solid #4f8df9; outline-offset: 2px; }

/* Centrar el toggle si va dentro de un .hero o sección con texto centrado */
section .container > .tipo-toggle { display: flex; width: max-content; }

/* Selector de tipo de cuenta en /registro.html */
.tipo-cuenta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.tipo-cuenta-opcion {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.tipo-cuenta-opcion:hover { border-color: var(--ink); }
.tipo-cuenta-opcion.is-active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; }
.tipo-cuenta-opcion input[type=radio] { display: none; }
.tipo-cuenta-nombre { font-weight: 600; font-size: .98rem; }
.tipo-cuenta-hint { font-size: .82rem; color: var(--ink-soft); }

/* Selección de espacio publicitario en /pago.html */
.publicidad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.publi-opcion {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  background: #fff;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.publi-opcion:hover { border-color: var(--ink); }
.publi-opcion.is-active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; }
.publi-opcion input[type=radio] { display: none; }
.publi-nombre { font-weight: 600; font-size: .92rem; }
.publi-precio { font-size: .9rem; color: var(--ink-soft); }
.publi-precio-zero { color: var(--ink-muted); font-style: italic; }
.publi-estado-tag { display:inline-block; margin-top:4px; padding:2px 8px; font-size:.75rem; border-radius:999px; background:var(--ink); color:#fff; align-self:flex-start; }
.publi-opcion.publi-opcion--disabled { opacity: .55; cursor: not-allowed; background: var(--accent-soft, #f5f5f5); }
.publi-opcion.publi-opcion--disabled:hover { border-color: var(--line); box-shadow: none; }
.publi-opcion.publi-opcion--disabled .publi-nombre { color: var(--ink-muted); }

/* Wireframe / mockup de ubicación del banner */
.wireframe { max-width: 380px; margin: 0; }
.wireframe figcaption { font-size: .82rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
.wf-page { background: #fafafa; border: 1px solid var(--line); padding: 8px; border-radius: 6px; display: flex; flex-direction: column; gap: 6px; }
.wf-header { height: 14px; background: var(--ink, #1a1a1a); border-radius: 3px; }
.wf-hero { height: 28px; background: #e9e9e9; border-radius: 3px; }
.wf-slot {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; border-radius: 4px;
  transition: opacity .15s, box-shadow .15s;
}
.wf-slot--platinum { aspect-ratio: 21/6; background: #1a1a1a; }
.wf-slots-gold { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.wf-slot--gold { aspect-ratio: 16/7; background: #b78b30; }
.wf-slots-pp { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.wf-slot--premium_plus { aspect-ratio: 1/1; background: #2b2b2b; font-size: 0; }
.wf-pp-label { font-size: .7rem; color: var(--ink-muted); text-align: center; margin-top: 2px; }
.wf-slot.is-active { box-shadow: 0 0 0 2px #2e7dd7, 0 0 0 4px rgba(46, 125, 215, .25); }
.wf-slot.is-muted { opacity: .25; }
.banner-wireframes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin: 14px 0 18px; }

/* Carrusel de imágenes en las páginas */
.carrusel { position: relative; overflow: hidden; border-radius: var(--radius); background: #000; }
.carrusel-slides { position: relative; aspect-ratio: 21 / 6; width: 100%; }
.carrusel-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.1s cubic-bezier(.22, .61, .36, 1),
              transform 1.4s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
  will-change: opacity, transform;
}
.carrusel-slide.is-active { opacity: 1; transform: scale(1); pointer-events: auto; }
.carrusel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: center; }
.carrusel-slide.is-active img { animation: carruselParallax 8s ease-out forwards; }
@keyframes carruselParallax {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(0, -1.2%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .carrusel-slide { transition: opacity .3s linear; transform: none; }
  .carrusel-slide.is-active img { animation: none; }
}
/* Página Planes: imagen estática, sin animación parallax */
[data-carrusel="planes"] .carrusel-slide {
  opacity: 1;
  transform: none;
  transition: none;
}
[data-carrusel="planes"] .carrusel-slide.is-active img {
  animation: none;
}
/* Encuadre: priorizar la parte superior para que la cara del diseñador no se corte */
[data-carrusel="planes"] .carrusel-slide img { object-position: center 20%; }

/* Página Contacto: imagen a pantalla completa (cover) sin animación, con el encuadre
   bajado para que no se corte la cara de la chica. */
[data-carrusel="contacto"] .carrusel-slide {
  opacity: 1;
  transform: none;
  transition: none;
}
[data-carrusel="contacto"] .carrusel-slide.is-active img { animation: none; }
[data-carrusel="contacto"] .carrusel-slide img { object-position: center 25%; }
.carrusel-slide a { display: block; width: 100%; height: 100%; }
.carrusel-flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.85); color: var(--ink);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.carrusel-flecha:hover { background: #fff; }
.carrusel-prev { left: 12px; }
.carrusel-next { right: 12px; }
.carrusel-dots {
  position: absolute; bottom: 12px; left: 0; right: 0;
  display: flex; gap: 6px; justify-content: center;
}
.carrusel-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.5); cursor: pointer; padding: 0;
  transition: background .15s, transform .15s;
}
.carrusel-dot.is-active { background: #fff; transform: scale(1.3); }
@media (max-width: 600px) {
  .carrusel-slides { aspect-ratio: 16 / 9; }
  .carrusel-flecha { width: 32px; height: 32px; font-size: 1.2rem; }
}

/* Hero con carrusel como fondo (Inicio, Directorios, Planes, Contacto) */
.hero--carrusel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 480px;
}
@media (max-width: 600px) { .hero--carrusel { min-height: 320px; } }
.hero--carrusel .hero__carrusel { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero--carrusel .hero__carrusel > div { height: 100%; } /* contenedor de montaje del carrusel */
.hero--carrusel .hero__carrusel .carrusel { border-radius: 0; height: 100%; background: transparent; }
.hero--carrusel .hero__carrusel .carrusel-slides { aspect-ratio: auto; height: 100%; }
.hero--carrusel .hero__carrusel .carrusel-flecha,
.hero--carrusel .hero__carrusel .carrusel-dots { display: none; } /* la UI del carrusel queda como ambiente */
.hero--carrusel > .container { position: relative; z-index: 2; }
.hero--carrusel .eyebrow,
.hero--carrusel h1,
.hero--carrusel .lead { color: #fff; }
/* Resaltado tipo marcador: rectángulo translúcido detrás de cada línea de texto */
.hero--carrusel .hl-text {
  background-color: rgba(232, 29, 232, 0.85);
  color: #fff;
  padding: 0.08em 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
/* Variante de color para el párrafo lead del hero */
.hero--carrusel .lead .hl-text {
  background-color: rgba(24, 226, 219, 0.85);
  color: #000;
}

/* Hero del directorio de Diseñadores:
   - eyebrow + h1 → fondo magenta (#e81de8 al 85%) con texto blanco (igual que el index)
   - lead → fondo cyan (#18e2db al 85%) con texto negro (igual que el index) */
.hero--directorio .eyebrow,
.hero--directorio h1 { color: #fff; }
.hero--directorio .lead { color: #000; }
.hero--directorio .hl-text {
  background-color: rgba(232, 29, 232, 0.85);
  color: #fff;
}
.hero--directorio .lead .hl-text {
  background-color: rgba(24, 226, 219, 0.85);
  color: #000;
}
/* Variante para Agencias: fondo azul #003ec9 al 85% en eyebrow + h1 */
.hero--directorio--agencia .hl-text {
  background-color: rgba(0, 62, 201, 0.85);
}
/* Lead de Agencias: fondo magenta #e81de8 al 85% (igual que el index) con texto blanco */
.hero--directorio--agencia .lead .hl-text {
  background-color: rgba(232, 29, 232, 0.85);
  color: #fff;
}
/* Variante para Proveedores: fondo naranja #ff5b01 al 85% en eyebrow + h1 */
.hero--directorio--aliados .hl-text {
  background-color: rgba(255, 91, 1, 0.85);
}
/* Lead de Proveedores: fondo azul #003fcf al 85% con texto blanco */
.hero--directorio--aliados .lead .hl-text {
  background-color: rgba(0, 63, 207, 0.85);
  color: #fff;
}

/* Hero del Blog: fondo violeta #9700cf al 85% con texto blanco */
.hero--blog .eyebrow,
.hero--blog h1 { color: #fff; }
.hero--blog .lead { color: #000; }
.hero--blog .hl-text {
  background-color: rgba(151, 0, 207, 0.85);
  color: #fff;
}
/* Lead del Blog: fondo amarillo #f6ed55 al 85% con texto negro */
.hero--blog .lead .hl-text {
  background-color: rgba(246, 237, 85, 0.85);
  color: #000;
}

/* CTA "Mejora tu plan" en perfiles del plan Básico */
.upgrade-cta {
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.upgrade-cta > h2 { margin-top: 0; }
.upgrade-cta__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: var(--space-2);
}
button.upgrade-plan {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
button.upgrade-plan:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--ink);
}
button.upgrade-plan:disabled {
  opacity: .55;
  cursor: default;
}
button.upgrade-plan:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.upgrade-plan__name {
  font-weight: 700;
  font-family: var(--serif);
  font-size: 1.05rem;
}
.upgrade-plan__price {
  color: var(--ink-soft);
  font-size: 1rem;
  font-weight: 600;
}
.upgrade-plan__price small { font-weight: 400; color: var(--ink-muted); font-size: .82rem; }
.upgrade-plan__cupos {
  font-size: .78rem;
  color: var(--ink-muted);
}
.upgrade-plan__features {
  list-style: none;
  margin: 8px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.upgrade-plan__features li {
  font-size: .82rem;
  color: var(--ink-soft);
  padding-left: 18px;
  position: relative;
  line-height: 1.35;
}
.upgrade-plan__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent, #18e2db);
  font-weight: 700;
}
.upgrade-plan__action {
  margin-top: 6px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink);
}

/* En las tarjetas del Directorio (página /directorio.html) y el preview del home,
   las redes y el sitio web no se muestran: solo aparecen al entrar al perfil del diseñador. */
#grid-directorio .redes-icons,
#preview-directorio .redes-icons { display: none; }

/* Listado de plan Básico: 3 columnas con nombres clicables */
.basicos-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--space-4);
  row-gap: 0;
}
.basicos-list li {
  border-bottom: 1px solid var(--line);
}
.basicos-list li a {
  display: block;
  padding: 10px 4px;
  color: var(--ink);
  text-decoration: none;
  font-size: .95rem;
  transition: color .15s;
}
.basicos-list li a:hover,
.basicos-list li a:focus-visible {
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (max-width: 800px) { .basicos-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .basicos-list { grid-template-columns: 1fr; } }

/* Paginación tipo "← 1 2 3 4 →" */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.pagination .page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  border: none;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  font: 500 .95rem/1 var(--sans, inherit);
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.pagination .page-btn:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--ink);
}
.pagination .page-btn.active {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.pagination .page-btn--arrow {
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 1.1rem;
}
.pagination .page-btn--arrow:disabled {
  background: var(--accent-soft);
  color: var(--ink-muted);
  opacity: .5;
  cursor: default;
}
.pagination .page-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.designer-card .avatar {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 1.4rem; color: var(--ink);
  overflow: hidden; flex-shrink: 0;
}
.designer-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.designer-card h4 { margin: 0; font-size: 1.05rem; }
.designer-card .role { color: var(--ink-muted); font-size: .85rem; }
.designer-card .tags { margin-top: 4px; }
.designer-card .meta { display: flex; gap: 12px; color: var(--ink-muted); font-size: .8rem; flex-wrap: wrap; }
.designer-card .card-portafolio {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  margin-top: 4px;
}
.designer-card .card-portafolio-item {
  aspect-ratio: 1/1; background: var(--accent-soft);
  border-radius: 4px; overflow: hidden;
}
.designer-card .card-portafolio-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Filtros del directorio ---------- */
.filtros {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-3);
  display: grid; grid-template-columns: 2fr 1fr auto; gap: var(--space-2);
}
.filtros.filtros-cascada {
  grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr auto;
}
@media (max-width: 900px) {
  .filtros.filtros-cascada { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) { .filtros, .filtros.filtros-cascada { grid-template-columns: 1fr; } }
.filtros input, .filtros select {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff; font-family: inherit; font-size: .95rem;
}
.filtros input:focus, .filtros select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }

/* ---------- Formularios ---------- */
.form { max-width: 560px; margin: 0 auto; }
.form .field { margin-bottom: var(--space-2); }
.form label {
  display: block; font-size: .85rem; font-weight: 500; margin-bottom: 6px; color: var(--ink);
}
.form label .req { color: var(--ink); }
.form input, .form select, .form textarea {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff; font-family: inherit;
  font-size: 16px;  /* >= 16px evita el auto-zoom de iOS al hacer focus */
  transition: border-color .15s, box-shadow .15s;
  min-height: 44px;
}
@media (min-width: 700px) {
  .form input, .form select, .form textarea { font-size: 1rem; }
}
/* Reset para casillas de verificación y radios: que mantengan su tamaño nativo */
.form input[type="checkbox"], .form input[type="radio"] {
  width: auto; height: auto; padding: 0; margin: 0;
  border: 1px solid var(--line); background: #fff;
  flex-shrink: 0; box-shadow: none;
  accent-color: var(--ink);
}
.form input[type="file"] {
  padding: 8px; background: #fff;
}
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } }

/* Redes sociales en formulario */
.redes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 700px) { .redes-grid { grid-template-columns: 1fr; } }
.redes-row {
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.redes-row .red-icon {
  width: 28px; height: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff;
}
.redes-row input {
  flex: 1; border: 0 !important; padding: 6px 4px !important;
  background: transparent !important; font-size: .9rem;
  box-shadow: none !important;
}
.redes-row input:focus { outline: none; }
.redes-row .red-nombre { font-size: .72rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; min-width: 70px; }

/* Iconos de redes en tarjeta y perfil público */
.redes-icons { display: flex; gap: 8px; flex-wrap: wrap; }
.redes-icons a {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff;
  transition: transform .15s, background .15s;
}
.redes-icons a:hover { transform: translateY(-2px); }
.redes-icons.color a.red-instagram { background: #E1306C; }
.redes-icons.color a.red-behance { background: #1769FF; }
.redes-icons.color a.red-dribbble { background: #EA4C89; }
.redes-icons.color a.red-linkedin { background: #0A66C2; }
.redes-icons.color a.red-facebook { background: #1877F2; }
.redes-icons.color a.red-twitter { background: #000; }
.redes-icons.color a.red-tiktok { background: #000; }
.redes-icons.color a.red-youtube { background: #FF0000; }
.redes-icons.color a.red-vimeo { background: #1AB7EA; }
.redes-icons.color a.red-pinterest { background: #E60023; }
.redes-icons.color a.red-sitio_web { background: #444; }

/* Botón "Ver perfil" en la tarjeta */
.designer-card .btn-ver-perfil {
  margin-top: 8px; align-self: flex-start;
  padding: 6px 14px; border-radius: 999px;
  background: transparent; color: var(--ink); border: 1px solid var(--ink);
  font-size: .82rem; text-decoration: none; transition: background .15s, color .15s;
}
.designer-card .btn-ver-perfil:hover { background: var(--ink); color: #fff; }

/* Perfil público (CV) */
.cv {
  max-width: 880px; margin: 0 auto;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 40px;
}
@media (max-width: 700px) { .cv { padding: 24px; } }
.cv-header {
  display: flex; gap: 24px; align-items: center;
  border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 24px;
  flex-wrap: wrap;
}
.cv-foto {
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 2.5rem; color: var(--ink);
  overflow: hidden; flex-shrink: 0;
}
.cv-foto img { width: 100%; height: 100%; object-fit: cover; }
.cv-titulo h1 { font-size: 2rem; margin-bottom: 4px; }
.cv-titulo .role { color: var(--ink-muted); font-size: 1rem; }
.cv-titulo .alias { color: var(--ink-soft); font-size: 1.05rem; margin-bottom: 4px; }
.cv-seccion { margin-bottom: 32px; }
.cv-seccion h2 {
  font-size: 1.1rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-muted); font-weight: 600; font-family: var(--sans);
  border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 14px;
}
.cv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .cv-grid { grid-template-columns: 1fr; } }
.cv-dato { display: flex; flex-direction: column; gap: 2px; }
.cv-dato .lbl { font-size: .75rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; }
.cv-dato .val { color: var(--ink); }
.cv-cat-titulo { font-weight: 600; color: var(--ink); margin: 12px 0 4px; }
.cv-cat-subs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cv-cat-subs .tag { font-size: .82rem; }
.cv-portafolio { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 700px) { .cv-portafolio { grid-template-columns: repeat(2, 1fr); } }
.cv-portafolio-item {
  aspect-ratio: 1/1; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--accent-soft); border: 1px solid var(--line);
}
.cv-portafolio-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Lightbox del portafolio */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0, 0, 0, .9);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; gap: 8px;
}
.lightbox[hidden] { display: none; }
.lightbox__figura {
  margin: 0; max-width: 90vw; max-height: 90vh;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.lightbox__img {
  max-width: 88vw; max-height: 82vh;
  object-fit: contain; border-radius: var(--radius-sm);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}
.lightbox__caption {
  color: #fff; font-size: .95rem; text-align: center;
  max-width: 80vw; opacity: .9;
}
.lightbox__cerrar {
  position: absolute; top: 16px; right: 20px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lightbox__nav {
  flex: 0 0 auto;
  width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  font-size: 2rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__cerrar:hover, .lightbox__nav:hover { background: rgba(255, 255, 255, .28); }
@media (max-width: 700px) {
  .lightbox { padding: 12px; }
  .lightbox__nav { width: 42px; height: 42px; font-size: 1.6rem; }
}
.cv-banner {
  width: 100%; border-radius: var(--radius); overflow: hidden;
  background: var(--accent-soft);
}
.cv-banner img { width: 100%; display: block; }
.cv-volver { display: flex; justify-content: center; margin-top: 40px; }

/* Panel de administración */
.admin-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px;
}
@media (max-width: 900px) { .admin-stats { grid-template-columns: repeat(2, 1fr); } }
.admin-stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; display: flex; flex-direction: column;
}
.admin-stat .num { font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: var(--ink); }
.admin-stat .lbl { color: var(--ink-soft); font-size: .9rem; margin-top: 6px; }
.admin-stat .sub { color: var(--ink-muted); font-size: .78rem; margin-top: 4px; }
.admin-stat-wide { grid-column: span 4; }
@media (max-width: 900px) { .admin-stat-wide { grid-column: span 2; } }
.admin-stat-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.admin-stat-mini { display: flex; flex-direction: column; }
.admin-stat-mini .num { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); }
.admin-stat-mini .lbl { font-size: .78rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; }

.admin-tabs {
  display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 20px;
  overflow-x: auto; flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.admin-tabs::-webkit-scrollbar { height: 4px; }
.admin-tabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
@media (min-width: 900px) { .admin-tabs { flex-wrap: wrap; overflow-x: visible; } }
.admin-tab { white-space: nowrap; flex-shrink: 0; min-height: 44px; }
.admin-fila { flex-direction: row; }
@media (max-width: 600px) {
  .admin-fila { flex-direction: column; align-items: stretch; }
  .admin-fila > div:last-child { display: flex; justify-content: flex-end; flex-wrap: wrap; }
  .admin-stats { grid-template-columns: 1fr 1fr; }
}
.admin-tab {
  background: transparent; border: 0; padding: 10px 16px;
  font-family: inherit; font-size: .95rem; color: var(--ink-muted);
  cursor: pointer; border-bottom: 2px solid transparent;
  display: inline-flex; align-items: center; gap: 8px;
}
.admin-tab:hover { color: var(--ink); }
.admin-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.admin-tab .badge {
  background: var(--accent-soft); color: var(--ink); padding: 2px 8px; border-radius: 999px;
  font-size: .75rem; font-weight: 500;
}
.admin-tab.active .badge { background: var(--ink); color: #fff; }
.admin-panel { display: none; }
.admin-panel.active { display: block; }

.admin-fila {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 8px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.admin-mensaje { align-items: flex-start; }
.admin-vacio {
  padding: 32px 16px; text-align: center; color: var(--ink-muted);
  border: 2px dashed var(--line); border-radius: var(--radius-sm); background: #fff;
}

/* Portafolio */
.portafolio-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 700px) { .portafolio-grid { grid-template-columns: repeat(2, 1fr); } }
/* Cada cuadro = foto cuadrada arriba + texto opcional debajo */
.portafolio-item { display: flex; flex-direction: column; gap: 6px; }
.portafolio-foto {
  position: relative; aspect-ratio: 1/1;
  background: var(--accent-soft);
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line);
}
.portafolio-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portafolio-num {
  position: absolute; top: 6px; left: 6px; z-index: 1;
  background: rgba(0,0,0,.6); color: #fff; font-size: .7rem; font-weight: 600;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.portafolio-foto .eliminar {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  background: rgba(0,0,0,.7); color: #fff;
  width: 24px; height: 24px; border-radius: 50%; border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: .9rem; line-height: 1;
}
.portafolio-foto .eliminar:hover { background: #c00; }
/* Texto opcional debajo de cada foto */
.portafolio-caption {
  width: 100%; font-size: .8rem; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.portafolio-caption.guardado { border-color: #1db954; background: #f0fbf3; }
.portafolio-caption--placeholder {
  color: var(--ink-muted); font-size: .76rem; text-align: center; padding: 6px 4px;
}
/* Cuadro vacío para subir (según el límite del plan) */
.portafolio-slot {
  width: 100%; aspect-ratio: 1/1;
  border: 2px dashed var(--line); border-radius: var(--radius-sm);
  background: #fafafa; font: inherit; color: var(--ink-muted); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  transition: border-color .15s, color .15s, background .15s;
}
.portafolio-slot:hover { border-color: var(--ink); color: var(--ink); background: var(--accent-soft); }
.portafolio-slot-mas { font-size: 1.8rem; line-height: 1; font-weight: 300; }
.portafolio-slot-num { font-size: .75rem; }

/* Banner del home */
.banner-preview-actual {
  background: var(--accent-soft); border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  min-height: 160px; color: var(--ink-muted);
}
.banner-preview-actual.platinum { aspect-ratio: 21/6; }
.banner-preview-actual.gold { aspect-ratio: 16/7; }
.banner-preview-actual.premium-plus { aspect-ratio: 1/1; max-width: 240px; margin: 0 auto; }
.banner-preview-actual img {
  width: 100%; height: 100%; object-fit: cover;
}
.banner-preview-actual .placeholder { padding: 24px; text-align: center; font-size: .9rem; }

/* Uploader de foto de perfil */
.foto-uploader { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.foto-preview {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--accent-soft); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); overflow: hidden; flex-shrink: 0;
}
.foto-preview img { width: 100%; height: 100%; object-fit: cover; }
.foto-uploader .hint { margin-top: 6px; }

.checkbox-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.checkbox-grid label { display: flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }

/* Taxonomía (registro) — cuadrícula de categorías en cards grises */
.taxonomia {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (max-width: 700px) { .taxonomia { grid-template-columns: 1fr; } }

.taxonomia-categoria.is-locked { opacity: .45; pointer-events: none; }
/* 3 niveles: sección intermedia (Servicios / Productos / Tecnología / Equipamiento) */
.taxonomia-secciones { display: flex; flex-direction: column; gap: 10px; }
.taxonomia-seccion { padding: 10px 0; }
.taxonomia-seccion-nombre { font-weight: 600; font-size: .9rem; color: var(--ink); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .05em; }
.taxonomia-secciones .taxonomia-subs { padding: 0; }
.taxonomia-categoria {
  background: #f1f1f1;
  border: 1px solid #e0e0e0;
  border-radius: var(--radius);
  padding: 14px 16px;
}
.taxonomia-header {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid #d8d8d8;
}
.taxonomia-header .nombre {
  flex: 1; font-weight: 600; font-size: .95rem; color: var(--ink);
  user-select: none;
}
.taxonomia-header .contador {
  font-size: .72rem; color: var(--ink-muted);
  background: #fff; padding: 2px 8px; border-radius: 999px;
  border: 1px solid #d8d8d8; min-width: 22px; text-align: center;
}
.taxonomia-header .contador.activo {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.taxonomia-subs {
  display: grid; grid-template-columns: 1fr; gap: 4px;
}
.taxonomia-subs label {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; color: var(--ink-soft); cursor: pointer; padding: 3px 0;
}
.taxonomia-subs input[type="checkbox"] { cursor: pointer; }
.taxonomia-subs .otros-opcion { font-style: italic; }
.taxonomia-subs .otros-text {
  width: 100%; margin: 4px 0 2px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: .86rem;
}
.taxonomia-buscador {
  width: 100%; padding: 10px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); margin-bottom: 10px; font-size: .9rem;
}
.taxonomia-resumen {
  font-size: .82rem; color: var(--ink-muted); margin-top: 10px;
}
.taxonomia-resumen strong { color: var(--ink); }

.hint { font-size: .82rem; color: var(--ink-muted); margin-top: 4px; }
.error { color: #b00020; font-size: .9rem; padding: 10px 12px; background: #fde7ea; border-radius: var(--radius-sm); margin: 12px 0; display: none; }
.success { color: #1b6e3a; font-size: .9rem; padding: 10px 12px; background: #e7f7ed; border-radius: var(--radius-sm); margin: 12px 0; display: none; }
.error.show, .success.show { display: block; }

/* ---------- Página de planes ---------- */
.plans-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
  margin-top: var(--space-3);
}
@media (max-width: 900px) { .plans-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .plans-grid { grid-template-columns: 1fr; } }

.plan-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-3); display: flex; flex-direction: column;
  position: relative; transition: transform .2s, box-shadow .2s;
}
.plan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.plan-card.featured { border-color: var(--ink); }
.plan-card.is-current { opacity: .6; }
.plan-card.is-current:hover { transform: none; box-shadow: none; }
.plan-card.is-current .btn[disabled] { background: var(--ink-muted); color: #fff; cursor: default; opacity: 1; }
.plan-card.featured::before {
  content: "Más elegido"; position: absolute; top: -10px; right: var(--space-3);
  background: var(--ink); color: #fff; font-size: .7rem; padding: 4px 10px;
  border-radius: 999px; letter-spacing: .05em;
}
.plan-card__icono { position: absolute; top: 16px; right: 16px; width: 65px; height: 65px; object-fit: contain; pointer-events: none; }

/* Entrada simple (plan gratis) en el directorio: fila ligera, sin tarjeta, ocupa todo el ancho del grid */
/* Listado de usuarios del plan gratis: ocupa todo el ancho y agrupa las filas como una lista compacta */
.usuarios-lista {
  grid-column: 1 / -1;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
/* Renglón de lista de texto (NO es tarjeta): sin foto, sin caja; todo el renglón es enlace */
.usuario-simple {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  margin: 0;
  text-decoration: none;
  color: var(--ink);
}
.usuario-simple:hover { background: var(--accent-soft, #f5f5f5); }
.usuario-simple__nombre { font-weight: 600; }
.usuario-simple__meta { color: var(--ink-soft); font-size: .85rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario-simple__chev { margin-left: auto; color: var(--ink-soft); flex: 0 0 auto; }
.usuario-simple .avatar--sm { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--accent-soft); font-weight: 600; font-size: .85rem; }
.usuario-simple .avatar--sm img { width: 100%; height: 100%; object-fit: cover; }
.usuario-simple__info { flex: 1; min-width: 0; }
.usuario-simple__info h4 { margin: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-simple__info .role { font-size: .82rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario-simple__link { white-space: nowrap; font-size: .85rem; font-weight: 500; color: var(--ink); }
.plan-card h3 { font-family: var(--serif); }
.plan-card h3 .plan-card__tipo { display: block; font-family: var(--sans); font-size: .68em; font-weight: 500; color: var(--ink-soft); margin-top: 2px; }
.plan-card .price { font-family: var(--serif); font-size: 2.2rem; font-weight: 600; margin: 8px 0; }
.plan-card .price small { font-size: .9rem; color: var(--ink-muted); }
.plan-card ul { list-style: none; padding: 0; margin: var(--space-2) 0; }
.plan-card li { padding: 6px 0; color: var(--ink-soft); font-size: .92rem; display: flex; gap: 8px; }
.plan-card li::before { content: "—"; color: var(--ink); }
.plan-card .cupos { font-size: .8rem; color: var(--ink-muted); margin-bottom: var(--space-2); }
.plan-card__info-label { margin: 4px 0 0; font-size: .88rem; color: var(--ink); }
.plan-card .btn { margin-top: auto; }

/* ---------- Página de pago ---------- */
.pago-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: var(--space-3); }
.pago-tabs button {
  padding: var(--space-2) var(--space-3); background: transparent; border: 0;
  font-family: inherit; font-size: 1rem; cursor: pointer; color: var(--ink-muted);
  border-bottom: 2px solid transparent;
}
.pago-tabs button.active { color: var(--ink); border-bottom-color: var(--ink); }
.pago-panel { display: none; }
.pago-panel.active { display: block; }

.qr-box {
  display: flex; gap: var(--space-3); align-items: flex-start; flex-wrap: wrap;
}
.qr-box img { width: 220px; height: 220px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.qr-data { flex: 1; min-width: 240px; }
.qr-data dt { font-size: .78rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 8px; }
.qr-data dd { margin: 2px 0 0; font-weight: 500; }

/* ---------- Pasos (stepper) ---------- */
.steps { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-3); justify-content: center; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: .9rem; }
.step .num { width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size: .8rem; }
.step.active { color: var(--ink); }
.step.active .num { background: var(--ink); color: #fff; border-color: var(--ink); }
.step.done .num { background: var(--ink-soft); color: #fff; border-color: var(--ink-soft); }
.step-sep { width: 32px; height: 1px; background: var(--line); }

/* ---------- Footer ---------- */
.footer {
  background: #111; color: #d7d4cf; padding: var(--space-5) 0 var(--space-3); margin-top: var(--space-5);
}
.footer .grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-3);
}
.footer .grid > * + * {
  padding-left: var(--space-3);
}
@media (max-width: 800px) {
  .footer .grid { grid-template-columns: 1fr 1fr; }
  .footer .grid > * + * { padding-left: 0; }
  .footer .grid > *:nth-child(even) {
    padding-left: var(--space-3);
  }
}
@media (max-width: 500px) {
  .footer .grid { grid-template-columns: 1fr; }
  .footer .grid > * + * { border-left: 0; padding-left: 0; padding-top: var(--space-2); border-top: 1px solid #5f6062; }
}
.footer h4 { color: #fff; font-size: 1rem; font-family: var(--serif); margin-bottom: var(--space-2); }
.footer-logo { display: inline-block; margin-bottom: 12px; }
.footer-logo img { height: 32px; width: auto; display: block; }
.footer a { color: #d7d4cf; display: block; padding: 4px 0; font-size: .9rem; }
.footer a:hover { color: #fff; }
.footer .brand-block p { color: #9a9690; max-width: 30ch; font-size: .9rem; }
.footer .social { display: flex; gap: 12px; margin-top: var(--space-2); }
.footer .social a {
  width: 36px; height: 36px; border: 1px solid #2a2a2a; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.footer .social a:hover { background: #fff; border-color: #fff; color: #111; }
.footer-bottom {
  border-top: 1px solid #222; padding-top: var(--space-2); margin-top: var(--space-3);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
  color: #8a857e; font-size: .82rem;
}

/* ---------- Estados de UI (loading, empty, error) ---------- */
.estado-vacio, .estado-error, .estado-loading {
  padding: 48px 24px; text-align: center; color: var(--ink-muted);
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: #fff;
}
.estado-vacio .icono, .estado-error .icono, .estado-loading .icono {
  font-size: 2rem; margin-bottom: 12px; opacity: 0.4;
}
.estado-error { border-color: #f5c2c7; background: #fde7ea; color: #842029; }
.spinner {
  display: inline-block; width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--ink);
  animation: spinner-rot .8s linear infinite; vertical-align: middle;
}
@keyframes spinner-rot { to { transform: rotate(360deg); } }

/* Skeleton genérico para placeholders mientras carga */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 0%, #e8e8e8 50%, #f0f0f0 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: 6px; display: inline-block; height: 1em;
}
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Back-to-top */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: #fff; border: 0;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.2);
  z-index: 50; transition: transform .2s, opacity .2s;
}
.back-to-top:hover { transform: translateY(-2px); }
.back-to-top.visible { display: flex; }
@media (max-width: 600px) {
  .back-to-top { bottom: 16px; right: 16px; }
}

/* ---------- Utilidades ---------- */
.eyebrow { color: var(--ink-muted); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.muted { color: var(--ink-muted); }
.spacer-sm { height: var(--space-2); }
.spacer-md { height: var(--space-3); }
.hidden { display: none !important; }

/* ===== Feed de proyectos (marquesina vertical automática) ===== */
.feed-proyectos { padding: 14px 0 30px; }
.feed-proyectos[hidden] { display: none; }
.feed-proyectos__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 18px;
}
.feed-proyectos__head h2 { margin: .15em 0 0; }
.feed-proyectos__sub { color: var(--ink-soft); margin: .4em 0 0; max-width: 60ch; }
.feed-proyectos__viewport {
  position: relative;
  height: 340px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  background: var(--accent-soft);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.feed-proyectos__track {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
  will-change: transform;
  animation: feed-scroll-up var(--feed-dur, 40s) linear infinite;
}
.feed-proyectos__viewport:hover .feed-proyectos__track,
.feed-proyectos__viewport:focus-within .feed-proyectos__track { animation-play-state: paused; }
@keyframes feed-scroll-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
.feed-proyectos__track > li { display: block; }
.feed-proyectos__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 16px;
  color: inherit; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.feed-proyectos__item:hover {
  border-color: var(--ink);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
a.card.proyecto-link { transition: border-color .15s ease, box-shadow .15s ease; }
a.card.proyecto-link:hover { border-color: var(--ink); }
.feed-proyectos__item-main { flex: 1; min-width: 0; }
.feed-proyectos__item-title {
  font-weight: 600; margin: 0; font-size: 1rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feed-proyectos__item-meta { color: var(--ink-muted); font-size: .82rem; margin-top: 3px; }
.feed-proyectos__item-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.feed-proyectos__count { flex-shrink: 0; text-align: center; min-width: 64px; }
.feed-proyectos__count strong { display: block; font-size: 1.25rem; line-height: 1; color: var(--ink); }
.feed-proyectos__count span { font-size: .68rem; color: var(--ink-muted); }
@media (max-width: 640px) {
  .feed-proyectos__viewport { height: 300px; }
  .feed-proyectos__count { min-width: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .feed-proyectos__track { animation: none; }
  .feed-proyectos__viewport {
    height: auto; max-height: 340px; overflow-y: auto;
    -webkit-mask-image: none; mask-image: none;
  }
}