/* ==========================================================================
   MEVITAL® — SISTEMA DE DISEÑO v1.0
   Fase 1 — Prototipo premium
   Doctrina cromática: ~70% claro · ~30% negro
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Color — base */
  --negro:        #0A0A0A;
  --negro-2:      #141414;
  --negro-3:      #1E1E1E;
  --blanco:       #FFFFFF;
  --hueso:        #FAFAF8;
  --hueso-2:      #F4F3F0;

  /* Color — líneas y texto */
  --linea:        #E7E5E1;
  --linea-oscura: rgba(255,255,255,.14);
  --texto:        #14110F;
  --texto-2:      #6A6560;
  --texto-3:      #9B958E;
  --texto-inv:    #FFFFFF;
  --texto-inv-2:  rgba(255,255,255,.62);

  /* Color — acento unico: azul navy — verificacion y cierre */
  --navy:         #17304F;
  --navy-claro:   #ECF0F6;

  /* Estados CRM */
  --est-nuevo:    #3B6FD4;
  --est-contacto: #B07A16;
  --est-agenda:   #6B4BC4;
  --est-valorado: #17304F;
  --est-cerrado:  #0A0A0A;
  --est-perdido:  #B03A2E;

  /* Tipografía */
  --f-display: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --f-texto:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala tipográfica */
  --t-xs:   0.6875rem;  /* 11 */
  --t-sm:   0.8125rem;  /* 13 */
  --t-base: 0.9375rem;  /* 15 */
  --t-md:   1.0625rem;  /* 17 */
  --t-lg:   1.375rem;   /* 22 */
  --t-xl:   1.875rem;   /* 30 */
  --t-2xl:  2.625rem;   /* 42 */
  --t-3xl:  3.75rem;    /* 60 */
  --t-4xl:  5rem;       /* 80 */

  /* Espacio */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;  --e-6: 32px;  --e-7: 48px;  --e-8: 64px;
  --e-9: 96px;  --e-10: 128px; --e-11: 160px;

  /* Contenedor */
  --ancho: 1280px;
  --ancho-texto: 680px;

  /* Otros */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --sombra: 0 1px 2px rgba(20,17,15,.04), 0 8px 32px rgba(20,17,15,.06);
  --sombra-alta: 0 2px 4px rgba(20,17,15,.05), 0 24px 64px rgba(20,17,15,.10);
  --trans: 260ms cubic-bezier(.22,.61,.36,1);
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 56px)}
body{
  margin:0;
  font-family:var(--f-texto);
  font-size:var(--t-base);
  line-height:1.65;
  color:var(--texto);
  background:var(--blanco);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4,h5,p,figure,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
::selection{background:var(--negro);color:var(--blanco)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* --------------------------------------------------------------------------
   3. UTILIDADES TIPOGRÁFICAS
   -------------------------------------------------------------------------- */
.display{
  font-family:var(--f-display);
  font-weight:300;
  line-height:1.06;
  letter-spacing:-.015em;
}
.display-xl{font-size:clamp(2.5rem,6.2vw,var(--t-4xl))}
.display-l {font-size:clamp(2rem,4.6vw,var(--t-3xl))}
.display-m {font-size:clamp(1.6rem,3.2vw,var(--t-2xl))}
.display-s {font-size:clamp(1.35rem,2.2vw,var(--t-xl))}

/* Etiqueta: microtipografía con tracking amplio — firma de la marca */
.etiqueta{
  font-family:var(--f-display);
  font-size:var(--t-xs);
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--texto-3);
}
.etiqueta-oscura{color:var(--texto-inv-2)}
.etiqueta-navy{color:var(--navy)}

.plomo{
  font-size:var(--t-md);
  line-height:1.7;
  color:var(--texto-2);
  max-width:var(--ancho-texto);
}
.plomo-inv{color:var(--texto-inv-2)}
.texto-centro{text-align:center}
.centrar{margin-left:auto;margin-right:auto}

/* --------------------------------------------------------------------------
   4. ESTRUCTURA
   -------------------------------------------------------------------------- */
.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin:0 auto;
  padding-inline:clamp(20px,5vw,56px);
}
.seccion{padding-block:clamp(64px,9vw,var(--e-10))}
.seccion-corta{padding-block:clamp(48px,6vw,var(--e-9))}
.negro{background:var(--negro);color:var(--texto-inv)}
.negro .display,.negro h1,.negro h2,.negro h3{color:var(--texto-inv)}
.hueso{background:var(--hueso)}
.linea-sup{border-top:1px solid var(--linea)}

.seccion-cabecera{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--e-5);margin-bottom:var(--e-7);
}
.seccion-cabecera .etiqueta{display:block;margin-bottom:var(--e-3)}

/* --------------------------------------------------------------------------
   5. BOTONES
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-display);
  font-size:var(--t-sm);
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:16px 30px;
  border:1px solid transparent;
  border-radius:var(--r-sm);
  transition:background var(--trans),color var(--trans),border-color var(--trans),transform var(--trans);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-primario{background:var(--negro);color:var(--blanco);border-color:var(--negro)}
.btn-primario:hover{background:var(--negro-3);border-color:var(--negro-3)}
.btn-fantasma{background:transparent;color:var(--texto);border-color:var(--linea)}
.btn-fantasma:hover{border-color:var(--negro);background:var(--negro);color:var(--blanco)}
.btn-inv{background:var(--blanco);color:var(--negro);border-color:var(--blanco)}
.btn-inv:hover{background:transparent;color:var(--blanco)}
.btn-inv-fantasma{background:transparent;color:var(--blanco);border-color:var(--linea-oscura)}
.btn-inv-fantasma:hover{background:var(--blanco);color:var(--negro);border-color:var(--blanco)}
.btn-sm{padding:10px 18px;font-size:var(--t-xs);letter-spacing:.14em}
.btn-bloque{width:100%}
.btn-navy,.btn-wa{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-wa:hover{background:#0F2039;border-color:#0F2039}

/* Enlace subrayado editorial */
.enlace{
  font-family:var(--f-display);font-size:var(--t-sm);letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:5px;border-bottom:1px solid currentColor;transition:opacity var(--trans);
}
.enlace:hover{opacity:.55}

/* --------------------------------------------------------------------------
   6. INSIGNIA DE VERIFICACIÓN — activo de marca
   -------------------------------------------------------------------------- */
.verificado{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--navy);
  background:var(--navy-claro);
  border:1px solid rgba(23,48,79,.18);
  padding:7px 13px 6px;border-radius:100px;
}
.verificado svg{width:13px;height:13px;flex:none}
.verificado-inv{
  color:#9DBBE0;background:rgba(157,187,224,.10);border-color:rgba(157,187,224,.24);
}

/* --------------------------------------------------------------------------
   7. CABECERA
   -------------------------------------------------------------------------- */
.cabecera{
  position:sticky;top:0;z-index:80;
  background:var(--negro);color:var(--blanco);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cabecera-int{
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:var(--e-6);
}
.logo{
  font-family:var(--f-display);font-weight:300;font-size:1.3rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--blanco);line-height:1;padding-left:2px;
}
.logo sup{font-size:.42em;letter-spacing:0;vertical-align:super;opacity:.7}
.logo img{display:block;width:auto}
a.logo{display:inline-flex;align-items:center;line-height:0}
.pie .logo{display:inline-block;line-height:0;margin-bottom:var(--e-2)}
.nav{display:flex;align-items:center;gap:var(--e-6)}
.nav a{
  font-family:var(--f-display);font-size:var(--t-sm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-inv-2);transition:color var(--trans);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--blanco)}
.cabecera-acciones{display:flex;align-items:center;gap:var(--e-4)}
.menu-btn{display:none;color:#fff;padding:8px;margin-right:-8px}
.menu-btn svg{width:22px;height:22px}

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */
.hero{
  background:var(--negro);color:var(--texto-inv);
  padding-block:clamp(72px,11vw,150px) clamp(64px,9vw,120px);
  position:relative;overflow:hidden;
}
.hero::after{ /* halo sutil, no decorativo agresivo */
  content:'';position:absolute;inset:auto -20% -60% 30%;
  height:70%;background:radial-gradient(ellipse at center,rgba(255,255,255,.055),transparent 65%);
  pointer-events:none;
}

/* Hero con fotografía de fondo.
   Dos velos superpuestos: uno horizontal que protege la columna de texto
   y otro vertical que ancla la cabecera y el borde inferior. */
.hero-con-foto{
  background-image:var(--hero-foto);
  background-size:cover;
  background-position:var(--hero-foco,center);
  background-repeat:no-repeat;
}
.hero-con-foto::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,
      rgba(10,10,10,calc(var(--hero-velo,.72) + .16)) 0%,
      rgba(10,10,10,var(--hero-velo,.72)) 38%,
      rgba(10,10,10,calc(var(--hero-velo,.72) * .5)) 72%,
      rgba(10,10,10,calc(var(--hero-velo,.72) * .34)) 100%),
    linear-gradient(180deg,
      rgba(10,10,10,.55) 0%,
      rgba(10,10,10,0) 34%,
      rgba(10,10,10,.5) 100%);
}
.hero-con-foto::after{display:none}
.hero-int{position:relative;z-index:1;max-width:900px}
.hero h1{margin-block:var(--e-5) var(--e-5)}
.hero .plomo{max-width:520px}
.hero-ciudades{
  display:flex;flex-wrap:wrap;gap:var(--e-4);align-items:center;
  margin-top:var(--e-8);padding-top:var(--e-5);border-top:1px solid var(--linea-oscura);
}
.hero-ciudades span{
  font-family:var(--f-display);font-size:var(--t-sm);letter-spacing:.2em;text-transform:uppercase;
  color:var(--texto-inv-2);
}
.hero-ciudades .sep{opacity:.3}
.hero-acciones{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:var(--e-7)}

/* --------------------------------------------------------------------------
   9. BUSCADOR
   -------------------------------------------------------------------------- */
.buscador{
  background:var(--blanco);
  border:1px solid var(--linea);
  box-shadow:var(--sombra-alta);
  display:grid;grid-template-columns:1.35fr 1fr auto;
  max-width:960px;
}
.buscador-flotante{margin-top:calc(var(--e-8) * -1);position:relative;z-index:5}
.buscador-campo{padding:20px 26px;border-right:1px solid var(--linea);min-width:0}
.buscador-campo label{display:block;margin-bottom:6px}
.buscador-campo input,.buscador-campo select{
  width:100%;border:0;background:none;padding:0;
  font-size:var(--t-md);color:var(--texto);
  appearance:none;-webkit-appearance:none;
}
.buscador-campo input::placeholder{color:var(--texto-3)}
.buscador-campo select{cursor:pointer}
.buscador .btn{border-radius:0;padding-inline:40px;align-self:stretch}

/* --------------------------------------------------------------------------
   10. RETRATOS Y MARCOS FOTOGRÁFICOS
   -------------------------------------------------------------------------- */
.foto{
  position:relative;overflow:hidden;background:var(--hueso-2);
}
.foto img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
.foto-3-4{aspect-ratio:3/4}
.foto-1-1{aspect-ratio:1/1}
.foto-4-5{aspect-ratio:4/5}
/* Marcador de posición editorial (cuando aún no hay fotografía) */
.foto-vacia{
  background:
    linear-gradient(160deg,#EDEBE7 0%,#E3E0DB 55%,#D9D5CF 100%);
  display:flex;align-items:flex-end;justify-content:center;
}
.foto-vacia::before{
  content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:62%;aspect-ratio:1/1.35;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;
  background:linear-gradient(180deg,rgba(10,10,10,.13),rgba(10,10,10,.05));
}
.foto-vacia::after{
  content:'';position:absolute;left:50%;top:16%;transform:translateX(-50%);
  width:27%;aspect-ratio:1/1;border-radius:50%;
  background:linear-gradient(180deg,rgba(10,10,10,.15),rgba(10,10,10,.08));
}
.foto-nota{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-family:var(--f-display);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(20,17,15,.42);
}

/* --------------------------------------------------------------------------
   11. TARJETA DE ESPECIALISTA
   -------------------------------------------------------------------------- */
.rejilla{display:grid;gap:var(--e-5)}
.rejilla-2{grid-template-columns:repeat(2,1fr)}
.rejilla-3{grid-template-columns:repeat(3,1fr)}
.rejilla-4{grid-template-columns:repeat(4,1fr)}

.tarjeta-esp{display:block;background:var(--blanco);transition:transform var(--trans)}
.tarjeta-esp:hover{transform:translateY(-4px)}
.tarjeta-esp:hover .tarjeta-esp-nombre{opacity:.6}
.tarjeta-esp .foto{margin-bottom:var(--e-4)}
.tarjeta-esp-meta{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tarjeta-esp-nombre{
  font-family:var(--f-display);font-weight:400;font-size:var(--t-lg);
  letter-spacing:.005em;line-height:1.25;transition:opacity var(--trans);
}
.tarjeta-esp-esp{font-size:var(--t-sm);color:var(--texto-2);margin-top:5px}
.tarjeta-esp-ciudad{
  font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--texto-3);margin-top:10px;
}

/* --------------------------------------------------------------------------
   12. TARJETAS GENÉRICAS / PROCEDIMIENTOS
   -------------------------------------------------------------------------- */
.tarjeta{
  background:var(--blanco);border:1px solid var(--linea);
  padding:var(--e-5);transition:border-color var(--trans),box-shadow var(--trans);
}
.tarjeta:hover{border-color:#CFCBC5;box-shadow:var(--sombra)}
.tarjeta-negra{background:var(--negro-2);border-color:rgba(255,255,255,.10);color:var(--texto-inv)}
.tarjeta-negra:hover{border-color:rgba(255,255,255,.24);box-shadow:none}

.proc{
  display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);
  padding:20px 22px;border:1px solid var(--linea);background:var(--blanco);
  transition:background var(--trans),border-color var(--trans),padding-left var(--trans);
}
.proc:hover{background:var(--negro);border-color:var(--negro);color:var(--blanco);padding-left:28px}
.proc-izq{display:flex;align-items:center;gap:16px;min-width:0}
.proc-num{
  font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.16em;
  color:var(--texto-3);flex:none;width:22px;transition:color var(--trans);
}
.proc:hover .proc-num{color:rgba(255,255,255,.55)}
.proc-nombre{font-family:var(--f-display);font-size:var(--t-md);font-weight:400;letter-spacing:.01em}
.proc-flecha{opacity:.35;transition:opacity var(--trans),transform var(--trans)}
.proc:hover .proc-flecha{opacity:1;transform:translateX(4px)}

/* Catálogo de procedimientos en lista ordenada */
.catalogo{border-top:1px solid var(--linea)}
.cat-fila{
  display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,290px) 24px;
  align-items:center;gap:var(--e-5);
  padding:var(--e-5) var(--e-3);border-bottom:1px solid var(--linea);
  transition:background var(--trans),padding-left var(--trans);
}
.cat-fila:hover{background:var(--negro);color:var(--blanco);padding-left:var(--e-5)}
.cat-num{
  font-family:var(--f-display);font-size:var(--t-sm);letter-spacing:.14em;
  color:var(--texto-3);transition:color var(--trans);
}
.cat-fila:hover .cat-num{color:rgba(255,255,255,.5)}
.cat-cuerpo{display:block;min-width:0}
.cat-nombre{
  display:block;font-family:var(--f-display);font-size:var(--t-lg);
  font-weight:400;letter-spacing:.005em;line-height:1.25;
}
.cat-resumen{
  display:block;margin-top:6px;font-size:var(--t-sm);line-height:1.6;
  color:var(--texto-2);transition:color var(--trans);
}
.cat-fila:hover .cat-resumen{color:rgba(255,255,255,.66)}
.cat-datos{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.cat-etq{
  font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy);background:var(--navy-claro);border:1px solid rgba(23,48,79,.16);
  padding:4px 10px;border-radius:100px;transition:all var(--trans);
}
.cat-fila:hover .cat-etq{color:#9DBBE0;background:rgba(157,187,224,.12);border-color:rgba(157,187,224,.26)}
.cat-dato{font-size:var(--t-xs);color:var(--texto-3);transition:color var(--trans)}
.cat-fila:hover .cat-dato{color:rgba(255,255,255,.5)}
.cat-fila .proc-flecha{opacity:.3;transition:opacity var(--trans),transform var(--trans)}
.cat-fila:hover .proc-flecha{opacity:1;transform:translateX(4px)}

@media (max-width:900px){
  .cat-fila{grid-template-columns:34px minmax(0,1fr);gap:var(--e-4);row-gap:var(--e-3);padding-inline:0}
  .cat-datos{grid-column:2;flex-direction:row;flex-wrap:wrap;gap:10px;align-items:center}
  .cat-fila .proc-flecha{display:none}
  .cat-fila:hover{padding-left:var(--e-3)}
}

/* --------------------------------------------------------------------------
   13. CIFRAS / MÉTRICAS
   -------------------------------------------------------------------------- */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea)}
.negro .cifras{background:rgba(255,255,255,.10)}
.cifra{background:var(--blanco);padding:var(--e-6) var(--e-5)}
.negro .cifra{background:var(--negro)}
.cifra-valor{
  font-family:var(--f-display);font-weight:300;font-size:clamp(2rem,3.4vw,3rem);
  line-height:1;letter-spacing:-.02em;
}
.cifra-etq{margin-top:var(--e-3)}
.cifra-delta{font-size:var(--t-xs);color:var(--navy);margin-top:6px;font-weight:500}
.cifra-delta.baja{color:var(--est-perdido)}

/* --------------------------------------------------------------------------
   14. PASOS / PROCESO
   -------------------------------------------------------------------------- */
.pasos{counter-reset:paso;display:grid;gap:1px;background:var(--linea);grid-template-columns:repeat(3,1fr)}
.paso{background:var(--hueso);padding:var(--e-6) var(--e-5);counter-increment:paso}
.paso::before{
  content:counter(paso,decimal-leading-zero);
  font-family:var(--f-display);font-size:var(--t-sm);letter-spacing:.2em;color:var(--texto-3);
  display:block;margin-bottom:var(--e-4);
}
.paso h3{font-family:var(--f-display);font-weight:400;font-size:var(--t-lg);margin-bottom:10px}
.paso p{font-size:var(--t-sm);color:var(--texto-2);line-height:1.7}

/* --------------------------------------------------------------------------
   15. PIE
   -------------------------------------------------------------------------- */
.pie{background:var(--negro);color:var(--texto-inv-2);padding-block:var(--e-9) var(--e-6)}
.pie-rejilla{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--e-6);margin-bottom:var(--e-8)}
.pie h4{
  font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;
  color:var(--blanco);margin-bottom:var(--e-4);font-weight:400;
}
.pie li{margin-bottom:10px;font-size:var(--t-sm)}
.pie a:hover{color:var(--blanco)}
.pie-legal{
  border-top:1px solid var(--linea-oscura);padding-top:var(--e-5);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--e-4);
  font-size:var(--t-xs);color:rgba(255,255,255,.42);
}
.aviso-demo{
  background:#2A2100;color:#F0D98A;border:1px solid rgba(240,217,138,.25);
  padding:10px 16px;font-size:var(--t-xs);letter-spacing:.06em;text-align:center;
}

/* --------------------------------------------------------------------------
   16. PERFIL DEL ESPECIALISTA
   -------------------------------------------------------------------------- */
.perfil-hero{background:var(--negro);color:var(--texto-inv)}
.perfil-hero-int{
  display:grid;grid-template-columns:minmax(0,52fr) minmax(0,48fr);
  align-items:stretch;min-height:min(78vh,720px);
}
.perfil-foto{position:relative;background:var(--negro-2)}
.perfil-foto .foto{height:100%;min-height:420px}
.perfil-datos{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,5.5vw,var(--e-9)) clamp(24px,4.5vw,var(--e-9));
}
.perfil-datos h1{margin-block:var(--e-5) var(--e-4)}
.perfil-sub{
  font-family:var(--f-display);font-size:var(--t-md);letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-inv-2);
}
.perfil-sub .sep{opacity:.35;margin-inline:10px}
.perfil-bio{margin-top:var(--e-5);max-width:46ch;color:var(--texto-inv-2);line-height:1.75}
.perfil-acciones{display:flex;flex-wrap:wrap;gap:var(--e-3);margin-top:var(--e-7)}

.nav-perfil{
  position:sticky;top:var(--header-h);z-index:60;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--linea);
}
.nav-perfil ul{display:flex;gap:var(--e-6);overflow-x:auto;scrollbar-width:none}
.nav-perfil ul::-webkit-scrollbar{display:none}
.nav-perfil a{
  display:block;padding:18px 0;white-space:nowrap;
  font-family:var(--f-display);font-size:var(--t-sm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-2);border-bottom:1px solid transparent;transition:color var(--trans),border-color var(--trans);
}
.nav-perfil a:hover{color:var(--texto)}
.nav-perfil a.activo{color:var(--texto);border-bottom-color:var(--negro)}

.bloque{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,5vw,var(--e-8))}
.bloque-titulo{position:sticky;top:calc(var(--header-h) + 80px);align-self:start}
.bloque-titulo h2{font-family:var(--f-display);font-weight:400;font-size:var(--t-lg);margin-top:10px}

.credencial{display:flex;gap:var(--e-4);padding-block:var(--e-4);border-bottom:1px solid var(--linea)}
.credencial:last-child{border-bottom:0}
.credencial-anio{
  font-family:var(--f-display);font-size:var(--t-sm);letter-spacing:.14em;color:var(--texto-3);
  flex:none;width:64px;padding-top:3px;
}
.credencial-t{font-weight:500}
.credencial-d{font-size:var(--t-sm);color:var(--texto-2);margin-top:2px}

.faq details{border-bottom:1px solid var(--linea)}
.faq summary{
  list-style:none;cursor:pointer;padding-block:var(--e-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);
  font-family:var(--f-display);font-size:var(--t-md);font-weight:400;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.4rem;color:var(--texto-3);font-weight:300;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq p{padding-bottom:var(--e-5);color:var(--texto-2);max-width:62ch}

.cta-movil{display:none}

/* --------------------------------------------------------------------------
   17. FORMULARIO
   -------------------------------------------------------------------------- */
.campo{margin-bottom:var(--e-5)}
.campo label{display:block;margin-bottom:8px}
.campo input,.campo select,.campo textarea{
  width:100%;padding:14px 16px;background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--r-sm);
  font-size:var(--t-base);transition:border-color var(--trans);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-color:var(--negro)}
.campo-fila{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-4)}
.campo-nota{font-size:var(--t-xs);color:var(--texto-3);margin-top:8px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:var(--t-sm);color:var(--texto-2)}
.check input{width:16px;height:16px;flex:none;margin-top:3px}

.progreso{display:flex;gap:6px;margin-bottom:var(--e-6)}
.progreso span{height:2px;flex:1;background:var(--linea)}
.progreso span.on{background:var(--negro)}

/* --------------------------------------------------------------------------
   18. PANEL / CRM
   -------------------------------------------------------------------------- */
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.lateral{background:var(--negro);color:var(--texto-inv-2);padding:var(--e-5) 0;position:sticky;top:0;height:100vh;overflow:auto}
.lateral .logo{padding-inline:var(--e-5);margin-bottom:var(--e-7);font-size:1.05rem}
.lateral h5{
  font-family:var(--f-display);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.34);padding:var(--e-5) var(--e-5) 10px;font-weight:400;
}
.lateral a{
  display:flex;align-items:center;gap:12px;padding:11px var(--e-5);font-size:var(--t-sm);
  border-left:2px solid transparent;transition:color var(--trans),background var(--trans);
}
.lateral a:hover{color:#fff;background:rgba(255,255,255,.04)}
.lateral a.activo{color:#fff;border-left-color:#fff;background:rgba(255,255,255,.06)}
.lateral-pie{margin-top:var(--e-7);padding:var(--e-5);border-top:1px solid var(--linea-oscura);font-size:var(--t-xs)}

.panel{background:var(--hueso);min-width:0}
.panel-barra{
  background:var(--blanco);border-bottom:1px solid var(--linea);
  padding:var(--e-4) clamp(20px,3vw,var(--e-6));
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--e-4);
  position:sticky;top:0;z-index:20;
}
.panel-cuerpo{padding:clamp(24px,3vw,var(--e-7)) clamp(20px,3vw,var(--e-6))}
.panel-cuerpo > * + *{margin-top:var(--e-6)}

.filtros{display:flex;flex-wrap:wrap;gap:8px}
.filtro{
  padding:8px 14px;border:1px solid var(--linea);background:var(--blanco);
  font-size:var(--t-sm);border-radius:100px;transition:all var(--trans);
}
.filtro:hover{border-color:var(--texto-3)}
.filtro.on{background:var(--negro);border-color:var(--negro);color:var(--blanco)}

.pastilla{
  display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:100px;
  font-size:var(--t-xs);font-weight:500;letter-spacing:.03em;
  background:var(--hueso-2);color:var(--texto-2);
}
.pastilla::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.p-nuevo{background:rgba(59,111,212,.10);color:var(--est-nuevo)}
.p-contacto{background:rgba(176,122,22,.12);color:var(--est-contacto)}
.p-agenda{background:rgba(107,75,196,.10);color:var(--est-agenda)}
.p-valorado{background:rgba(23,48,79,.10);color:var(--est-valorado)}
.p-cerrado{background:rgba(10,10,10,.08);color:var(--est-cerrado)}
.p-perdido{background:rgba(176,58,46,.10);color:var(--est-perdido)}

.tabla{background:var(--blanco);border:1px solid var(--linea)}
.tabla th{
  text-align:left;padding:12px var(--e-4);font-family:var(--f-display);
  font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--texto-3);
  font-weight:400;border-bottom:1px solid var(--linea);white-space:nowrap;
}
.tabla td{padding:14px var(--e-4);border-bottom:1px solid var(--linea);font-size:var(--t-sm);vertical-align:middle}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr{transition:background var(--trans)}
.tabla tbody tr:hover{background:var(--hueso)}
.tabla-envoltura{overflow-x:auto}

/* Ficha de contacto */
.ficha-cabecera{background:var(--blanco);border:1px solid var(--linea);padding:var(--e-5)}
.ficha-cabecera-sup{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--e-4)}
.ficha-nombre{font-family:var(--f-display);font-weight:400;font-size:var(--t-xl);line-height:1.15}
.ficha-meta{display:flex;flex-wrap:wrap;gap:var(--e-4);margin-top:10px;font-size:var(--t-sm);color:var(--texto-2)}
.ficha-meta b{font-weight:500;color:var(--texto)}
.ficha-acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--e-5);padding-top:var(--e-5);border-top:1px solid var(--linea)}
.ficha-cols{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--e-5)}

.linea-tiempo{position:relative;padding-left:26px}
.linea-tiempo::before{content:'';position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--linea)}
.evento{position:relative;padding-bottom:var(--e-5)}
.evento::before{
  content:'';position:absolute;left:-26px;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--blanco);border:2px solid var(--texto-3);
}
.evento.hito::before{background:var(--navy);border-color:var(--navy)}
.evento-fecha{
  font-family:var(--f-display);font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--texto-3);
}
.evento-t{font-weight:500;margin-top:3px}
.evento-d{font-size:var(--t-sm);color:var(--texto-2);margin-top:2px}

.lista-datos{display:grid;gap:0}
.lista-datos div{display:flex;justify-content:space-between;gap:var(--e-4);padding:11px 0;border-bottom:1px solid var(--linea);font-size:var(--t-sm)}
.lista-datos div:last-child{border-bottom:0}
.lista-datos dt{color:var(--texto-2)}
.lista-datos dd{margin:0;font-weight:500;text-align:right}

/* Embudo */
.embudo{display:grid;gap:10px}
.embudo-fila{display:grid;grid-template-columns:150px minmax(0,1fr) 64px;align-items:center;gap:var(--e-4);font-size:var(--t-sm)}
.embudo-barra{height:26px;background:var(--hueso-2);position:relative}
.embudo-barra i{position:absolute;inset:0 auto 0 0;background:var(--negro);display:block}
.embudo-fila:nth-child(2) .embudo-barra i{background:var(--negro-3)}
.embudo-fila:nth-child(3) .embudo-barra i{background:#3A3A3A}
.embudo-fila:nth-child(4) .embudo-barra i{background:var(--navy)}
.embudo-fila:nth-child(5) .embudo-barra i{background:var(--navy)}
.embudo-fila span:last-child{text-align:right;font-weight:500}

/* Jerarquía nacional */
.jerarquia{display:flex;align-items:center;gap:10px;font-size:var(--t-sm);color:var(--texto-2);flex-wrap:wrap}
.jerarquia b{color:var(--texto);font-weight:500}
.jerarquia .sep{color:var(--texto-3)}

/* --------------------------------------------------------------------------
   19. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1080px){
  .rejilla-4{grid-template-columns:repeat(2,1fr)}
  .pie-rejilla{grid-template-columns:1fr 1fr}
  .cifras{grid-template-columns:repeat(2,1fr)}
  .app{grid-template-columns:1fr}
  .lateral{position:static;height:auto;display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:var(--e-4)}
  .lateral .logo{margin:0 var(--e-5) 0 0;padding:0}
  .lateral h5{display:none}
  .lateral a{border-left:0;border-bottom:2px solid transparent;padding:8px 12px}
  .lateral a.activo{border-left:0;border-bottom-color:#fff}
  .lateral-pie{display:none}
  .ficha-cols{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nav{display:none}
  .menu-btn{display:block}
  .cabecera-acciones .btn{display:none}
  .perfil-hero-int{grid-template-columns:1fr}
  .perfil-foto .foto{min-height:0;aspect-ratio:4/5}
  .perfil-datos{padding-block:var(--e-7) var(--e-8)}
  .bloque{grid-template-columns:1fr;gap:var(--e-5)}
  .bloque-titulo{position:static}
  .buscador{grid-template-columns:1fr}
  .buscador-campo{border-right:0;border-bottom:1px solid var(--linea)}
  .buscador-flotante{margin-top:calc(var(--e-6) * -1)}
  .pasos{grid-template-columns:1fr}
  .rejilla-3{grid-template-columns:repeat(2,1fr)}
  /* CTA persistente móvil en el perfil */
  .cta-movil{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
    border-top:1px solid var(--linea);padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    display:grid;grid-template-columns:1fr auto;gap:8px;
  }
  body.con-cta-movil{padding-bottom:88px}
}
@media (max-width:900px){
  .hero-con-foto::before{
    background:
      linear-gradient(180deg,
        rgba(10,10,10,calc(var(--hero-velo,.72) + .12)) 0%,
        rgba(10,10,10,calc(var(--hero-velo,.72) + .06)) 55%,
        rgba(10,10,10,calc(var(--hero-velo,.72) + .18)) 100%);
  }
}
@media (max-width:620px){
  :root{--header-h:64px}
  .rejilla-3,.rejilla-4,.rejilla-2{grid-template-columns:1fr}
  .cifras{grid-template-columns:1fr}
  .pie-rejilla{grid-template-columns:1fr}
  .seccion-cabecera{flex-direction:column;align-items:flex-start}
  .embudo-fila{grid-template-columns:110px minmax(0,1fr) 52px;gap:10px}
  .hero-acciones .btn{width:100%}
  .logo{font-size:1.05rem;letter-spacing:.28em}
}

/* --------------------------------------------------------------------------
   20. IMPRESIÓN / MOVIMIENTO REDUCIDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* --------------------------------------------------------------------------
   21. FORMULARIO — AVISOS Y ÉXITO
   -------------------------------------------------------------------------- */
.form-aviso{margin-top:var(--e-3);font-size:var(--t-sm);min-height:1.2em}
.form-aviso.error{color:var(--est-perdido)}
.form-exito{text-align:center;padding:var(--e-6) 0}
.form-exito .display{margin:var(--e-3) 0 var(--e-5);max-width:22ch;margin-inline:auto}

/* --------------------------------------------------------------------------
   22. MENÚ MÓVIL DESPLEGADO
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .nav.abierto{
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
    position:absolute;left:0;right:0;top:var(--header-h);
    background:var(--negro);border-bottom:1px solid rgba(255,255,255,.10);
    padding:var(--e-4) clamp(20px,5vw,56px) var(--e-6);
  }
  .nav.abierto a{padding:14px 0;width:100%;border-bottom:1px solid rgba(255,255,255,.08);font-size:var(--t-md)}
  .nav.abierto a:last-child{border-bottom:0}
  .cabecera{position:sticky}
  .cabecera-int{position:relative}
}

/* --------------------------------------------------------------------------
   23. PAGINACIÓN
   -------------------------------------------------------------------------- */
.nav-links,.page-numbers{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
a.page-numbers,span.page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 12px;
  border:1px solid var(--linea);background:var(--blanco);
  font-family:var(--f-display);font-size:var(--t-sm);letter-spacing:.08em;
  transition:all var(--trans);
}
a.page-numbers:hover{border-color:var(--negro)}
span.page-numbers.current{background:var(--negro);border-color:var(--negro);color:var(--blanco)}

/* --------------------------------------------------------------------------
   24. AJUSTES FINOS DEL PERFIL
   -------------------------------------------------------------------------- */
.perfil-datos .verificado{align-self:flex-start}
.tarjeta-esp-meta .verificado{padding:5px 10px 4px;font-size:10px;letter-spacing:.16em}
.bloque-titulo .etiqueta{display:block}
.cifra .display{display:block;line-height:1.2}

/* La página de valoración vuelve a una sola columna en móvil */
@media (max-width:900px){
  .seccion .contenedor[style*="grid-template-columns"]{grid-template-columns:1fr!important}
}