/* ==========================================================================
   JMV CONSULTORES — SISTEMA VISUAL DEL SITIO PÚBLICO
   landing.html · login.html · registro.html

   Por qué un CSS aparte de app.css: el design system de la aplicación
   (/css/app.css) es oscuro, denso y está afinado para pantallas de trabajo
   (tablas, formularios, KPIs). El sitio público es una superficie editorial
   con otra jerarquía, otra densidad y otro tono. Mezclarlos obliga a
   sobreescribir tokens en cada página (exactamente lo que pasaba antes:
   lp-*, lg-*, reg-* replicados en tres <style>).

   Este archivo es la ÚNICA fuente de identidad de las tres páginas públicas:
   las tres cargan solo este CSS y comparten tokens, componentes y motion.
   No toca /css/app.css ni el SPA /sistema/.

   Dirección de arte: papel marfil + tinta grafito + acento bronce.
   Secciones oscuras (grafito profundo) solo para el escaparate 3D.
   Sin dependencias nuevas: las tipografías (Sora display / Inter texto) ya se
   cargaban en las páginas.
   ========================================================================== */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */
:root {
  /* Superficies cálidas */
  --pv-canvas:      #faf7f2;
  --pv-surface:     #ffffff;
  --pv-elevated:    #f4efe6;
  --pv-ink-canvas:  #14120f;   /* secciones oscuras de alto contraste */
  --pv-ink-surface: #1e1b17;

  /* Tinta */
  --pv-ink:         #1a1815;
  --pv-ink-2:       #4c463e;
  --pv-ink-3:       #7b7469;
  --pv-ink-inv:     #f7f3ec;
  --pv-ink-inv-2:   #c9c2b6;

  /* Acento bronce */
  --pv-accent:      #8a5a2b;
  --pv-accent-2:    #6d4419;   /* hover / pressed */
  --pv-accent-soft: #f5e9d9;
  --pv-accent-line: #e2cbb0;

  /* Bordes */
  --pv-line:        #e7e0d4;
  --pv-line-2:      #d6ccbb;
  --pv-line-inv:    rgba(247,243,236,0.14);

  /* Estados */
  --pv-ok:          #2f6b4f;   --pv-ok-soft:  #e6f1ea;
  --pv-danger:      #9f2f2f;   --pv-danger-soft: #f8e8e6;
  --pv-warn:        #8a6516;   --pv-warn-soft: #f7efdd;

  /* Tipografía */
  --pv-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --pv-font-display:'Sora', 'Inter', sans-serif;
  --pv-fs-xs:   0.8125rem;
  --pv-fs-sm:   0.9063rem;
  --pv-fs-md:   1rem;
  --pv-fs-lg:   1.125rem;
  --pv-fs-xl:   1.375rem;
  --pv-fs-2xl:  1.75rem;
  --pv-fs-3xl:  clamp(2rem, 4.2vw, 3rem);
  --pv-fs-hero: clamp(2.3rem, 4.6vw, 3.7rem);
  --pv-lh:      1.6;
  --pv-lh-tight:1.1;

  /* Espaciado */
  --pv-s1: 0.25rem; --pv-s2: 0.5rem;  --pv-s3: 0.75rem; --pv-s4: 1rem;
  --pv-s5: 1.5rem;  --pv-s6: 2rem;    --pv-s7: 2.5rem;  --pv-s8: 3.5rem;
  --pv-s9: 5rem;    --pv-s10: 7rem;

  /* Radios y sombras */
  --pv-r-sm: 8px; --pv-r-md: 12px; --pv-r-lg: 18px; --pv-r-xl: 26px; --pv-r-full: 999px;
  --pv-sh-1: 0 1px 2px rgba(26,24,21,0.05), 0 1px 3px rgba(26,24,21,0.04);
  --pv-sh-2: 0 8px 24px -12px rgba(26,24,21,0.18), 0 2px 6px rgba(26,24,21,0.05);
  --pv-sh-3: 0 26px 60px -28px rgba(26,24,21,0.32), 0 10px 24px -18px rgba(26,24,21,0.2);
  --pv-sh-ink: 0 30px 70px -30px rgba(0,0,0,0.7);

  /* Motion */
  --pv-dur-1: 140ms; --pv-dur-2: 260ms; --pv-dur-3: 460ms;
  --pv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Layout */
  --pv-wrap: 1180px;
  --pv-wrap-narrow: 760px;
}

/* ── 2. BASE ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.pv {
  margin: 0;
  background: var(--pv-canvas);
  color: var(--pv-ink);
  font-family: var(--pv-font);
  font-size: var(--pv-fs-md);
  line-height: var(--pv-lh);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--pv-accent); text-decoration: none; }
a:hover { color: var(--pv-accent-2); }
h1, h2, h3, h4 { font-family: var(--pv-font-display); color: var(--pv-ink); margin: 0; line-height: 1.15; letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; }
:focus-visible { outline: 2px solid var(--pv-accent); outline-offset: 3px; border-radius: 4px; }
.pv-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--pv-ink); color: var(--pv-ink-inv); padding: var(--pv-s3) var(--pv-s5); border-radius: 0 0 var(--pv-r-md) 0;
}
.pv-skip:focus { left: 0; }
.pv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 3. LAYOUT ───────────────────────────────────────────────────────────── */
.pv-wrap { width: 100%; max-width: var(--pv-wrap); margin: 0 auto; padding: 0 var(--pv-s5); }
.pv-wrap--narrow { max-width: var(--pv-wrap-narrow); }
.pv-section { padding: var(--pv-s9) 0; }
.pv-ink { background: var(--pv-ink-canvas); color: var(--pv-ink-inv); }
.pv-ink h2, .pv-ink h3 { color: var(--pv-ink-inv); }
.pv-ink a { color: #e0b98c; }
.pv-ink a:hover { color: #f0d3ae; }
.pv-surface-band { background: var(--pv-surface); border-top: 1px solid var(--pv-line); border-bottom: 1px solid var(--pv-line); }
.pv-center { text-align: center; max-width: 680px; margin: 0 auto; }

/* ── 4. TIPOGRAFÍA ───────────────────────────────────────────────────────── */
.pv-eyebrow {
  display: inline-flex; align-items: center; gap: var(--pv-s2);
  font-size: var(--pv-fs-xs); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--pv-accent);
  background: var(--pv-accent-soft); border: 1px solid var(--pv-accent-line);
  padding: var(--pv-s1) var(--pv-s4); border-radius: var(--pv-r-full);
}
.pv-ink .pv-eyebrow { background: rgba(224,185,140,0.12); border-color: rgba(224,185,140,0.28); color: #e0b98c; }
.pv-h1 { font-size: var(--pv-fs-hero); font-weight: 700; }
.pv-h2 { font-size: var(--pv-fs-3xl); font-weight: 700; }
.pv-h3 { font-size: var(--pv-fs-lg); font-weight: 600; }
.pv-lead { font-size: var(--pv-fs-lg); color: var(--pv-ink-2); line-height: 1.55; }
.pv-ink .pv-lead, .pv-ink .pv-sub { color: var(--pv-ink-inv-2); }
.pv-sub { color: var(--pv-ink-2); font-size: var(--pv-fs-sm); }
.pv-muted { color: var(--pv-ink-3); font-size: var(--pv-fs-sm); }
.pv-accent-text { color: var(--pv-accent); }
.pv-body { color: var(--pv-ink-2); font-size: var(--pv-fs-sm); line-height: var(--pv-lh); }

/* ── 5. BOTONES ──────────────────────────────────────────────────────────── */
.pv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pv-s2);
  font-family: var(--pv-font); font-size: var(--pv-fs-sm); font-weight: 600;
  padding: 0.72rem 1.25rem; min-height: 44px;
  border-radius: var(--pv-r-md); border: 1px solid transparent;
  cursor: pointer; text-align: center;
  transition: transform var(--pv-dur-1) var(--pv-ease), background var(--pv-dur-1), border-color var(--pv-dur-1), box-shadow var(--pv-dur-2), color var(--pv-dur-1);
}
.pv-btn:active { transform: translateY(1px); }
.pv-btn--primary { background: var(--pv-accent); color: #fff; box-shadow: var(--pv-sh-2); }
.pv-btn--primary:hover { background: var(--pv-accent-2); color: #fff; box-shadow: var(--pv-sh-3); transform: translateY(-1px); }
.pv-btn--ghost { background: var(--pv-surface); color: var(--pv-ink); border-color: var(--pv-line-2); }
.pv-btn--ghost:hover { border-color: var(--pv-ink-3); color: var(--pv-ink); transform: translateY(-1px); }
.pv-btn--quiet { background: transparent; color: var(--pv-ink-2); border-color: transparent; }
.pv-btn--quiet:hover { color: var(--pv-ink); background: var(--pv-elevated); }
.pv-btn--light { background: var(--pv-ink-inv); color: var(--pv-ink-canvas); }
.pv-btn--light:hover { background: #fff; color: var(--pv-ink-canvas); transform: translateY(-1px); }
.pv-btn--lg { font-size: var(--pv-fs-md); padding: 0.9rem 1.6rem; min-height: 52px; }
.pv-btn--sm { font-size: var(--pv-fs-xs); padding: 0.5rem 0.9rem; min-height: 40px; }
.pv-btn--block { width: 100%; }
.pv-register-cta { margin-top: var(--pv-s3); }
.pv-btn[disabled], .pv-btn[aria-disabled='true'] { opacity: 0.65; pointer-events: none; }
.pv-btn .pv-spin {
  width: 15px; height: 15px; border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: pv-girar 0.75s linear infinite;
}
@keyframes pv-girar { to { transform: rotate(360deg); } }

/* ── 6. HEADER ───────────────────────────────────────────────────────────── */
.pv-bar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(250,247,242,0.86);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--pv-line);
}
.pv-bar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--pv-s4); padding: var(--pv-s3) 0; }
.pv-brand { display: flex; align-items: center; gap: var(--pv-s3); font-family: var(--pv-font-display); font-weight: 700; font-size: var(--pv-fs-lg); color: var(--pv-ink); letter-spacing: -0.02em; }
.pv-brand:hover { color: var(--pv-ink); }
.pv-brand img { height: 38px; width: auto; display: block; }
.pv-brand small { display: block; font-family: var(--pv-font); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pv-ink-3); }
.pv-nav { display: flex; align-items: center; gap: var(--pv-s5); }
.pv-nav a { font-size: var(--pv-fs-sm); color: var(--pv-ink-2); font-weight: 500; }
.pv-nav a:hover { color: var(--pv-accent); }
.pv-bar__cta { display: flex; align-items: center; gap: var(--pv-s3); }
.pv-burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: var(--pv-surface); border: 1px solid var(--pv-line-2); border-radius: var(--pv-r-md);
  color: var(--pv-ink); font-size: var(--pv-fs-lg); cursor: pointer;
}
.pv-drawer { display: none; }
@media (max-width: 980px) {
  .pv-nav, .pv-bar__cta { display: none; }
  .pv-burger { display: inline-flex; }
  .pv-drawer {
    position: absolute; left: 0; right: 0; top: 100%;
    display: none; flex-direction: column; gap: var(--pv-s1);
    background: var(--pv-surface); border-bottom: 1px solid var(--pv-line-2);
    box-shadow: var(--pv-sh-3); padding: var(--pv-s4);
  }
  .pv-drawer[data-open='true'] { display: flex; }
  .pv-drawer a { padding: var(--pv-s3) var(--pv-s4); border-radius: var(--pv-r-md); color: var(--pv-ink); font-size: var(--pv-fs-md); font-weight: 500; }
  .pv-drawer a:hover { background: var(--pv-elevated); }
  .pv-drawer .pv-btn { margin-top: var(--pv-s2); }
}

/* ── 7. HERO + ESCENARIO 3D ──────────────────────────────────────────────── */
.pv-hero { position: relative; overflow: hidden; padding: var(--pv-s9) 0 var(--pv-s8); }
.pv-hero::before {
  content: ''; position: absolute; inset: -20% -10% auto -10%; height: 70%;
  background: radial-gradient(60% 60% at 30% 20%, rgba(138,90,43,0.10), transparent 70%),
              radial-gradient(50% 50% at 80% 0%, rgba(30,27,23,0.06), transparent 70%);
  pointer-events: none;
}
.pv-hero__in { position: relative; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: var(--pv-s8); align-items: center; }
.pv-hero__copy { max-width: 620px; }
.pv-hero__copy h1 { margin: var(--pv-s5) 0 var(--pv-s4); }
.pv-hero__cta { display: flex; flex-wrap: wrap; gap: var(--pv-s3); margin-top: var(--pv-s6); }
.pv-hero__nota { margin-top: var(--pv-s4); font-size: var(--pv-fs-xs); color: var(--pv-ink-3); }
@media (max-width: 980px) {
  .pv-hero__in { grid-template-columns: 1fr; gap: var(--pv-s7); }
  .pv-hero { padding-top: var(--pv-s7); }
}

/* Escenario con perspectiva: paneles apilados en profundidad real (CSS 3D) */
.pv-stage { position: relative; perspective: 1400px; perspective-origin: 60% 40%; min-height: 420px; }
.pv-stage__deck { position: relative; transform-style: preserve-3d; transform: rotateX(6deg) rotateY(-13deg) translateZ(0); }
.pv-panel {
  background: var(--pv-surface); border: 1px solid var(--pv-line-2);
  border-radius: var(--pv-r-lg); box-shadow: var(--pv-sh-3);
  padding: var(--pv-s4) var(--pv-s5); transform-style: preserve-3d;
}
.pv-panel--main { transform: translateZ(0); }
.pv-panel--float {
  position: absolute; transform: translate3d(0,0,90px);
  background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
  border: 1px solid var(--pv-accent-line); box-shadow: var(--pv-sh-3);
}
.pv-panel--a { top: -18px; right: -6%; width: 200px; transform: translate3d(0,0,140px); }
.pv-panel--b { bottom: 34px; left: -8%; width: 215px; transform: translate3d(0,0,110px); }
.pv-panel--c {
  position: absolute; right: 2%; bottom: -22px; width: 190px;
  background: var(--pv-ink-surface); border-color: rgba(247,243,236,0.12); color: var(--pv-ink-inv);
  transform: translate3d(0,0,60px);
}
.pv-panel--c .pv-kpi__label, .pv-panel--c .pv-sub { color: var(--pv-ink-inv-2); }
.pv-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--pv-s3); margin-bottom: var(--pv-s4); }
.pv-dots { display: flex; gap: 5px; }
.pv-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--pv-line-2); }
.pv-kpis { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--pv-s3); }
.pv-kpi { background: var(--pv-elevated); border: 1px solid var(--pv-line); border-radius: var(--pv-r-md); padding: var(--pv-s3) var(--pv-s4); min-width: 0; }
.pv-kpi__label { display: block; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pv-ink-3); margin-bottom: 6px; }
.pv-kpi__val { display: block; font-family: var(--pv-font-display); font-weight: 700; font-size: var(--pv-fs-lg); color: var(--pv-ink); }
.pv-bars { display: flex; align-items: flex-end; gap: 6px; height: 96px; margin-top: var(--pv-s4); }
.pv-bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--pv-accent), rgba(138,90,43,0.28)); min-height: 10%; }
.pv-bars i:nth-child(even) { background: linear-gradient(180deg, var(--pv-line-2), rgba(214,204,187,0.35)); }
.pv-bar-line { height: 1px; background: var(--pv-line); margin: var(--pv-s3) 0; }
.pv-li { display: flex; align-items: center; justify-content: space-between; gap: var(--pv-s3); font-size: var(--pv-fs-xs); color: var(--pv-ink-2); padding: 6px 0; }
.pv-li b { color: var(--pv-ink); font-weight: 600; }
.pv-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.6875rem; font-weight: 600;
  padding: 2px 10px; border-radius: var(--pv-r-full);
  background: var(--pv-ok-soft); color: var(--pv-ok);
}
.pv-chip--warn { background: var(--pv-warn-soft); color: var(--pv-warn); }
.pv-chip--ink { background: rgba(247,243,236,0.14); color: #e0b98c; }
@media (max-width: 980px) {
  .pv-stage { min-height: 380px; }
  .pv-stage__deck { transform: rotateX(4deg) rotateY(-8deg); }
}
@media (max-width: 620px) {
  .pv-stage { min-height: 0; }
  .pv-stage__deck { transform: none; }
  .pv-panel--float, .pv-panel--c { position: static; width: auto; margin-top: var(--pv-s3); transform: none; }
}
/* A 320-420 px la rejilla de 2 KPIs deja celdas de ~71 px y la palabra
   «DOCUMENTOS» (11 px, mayúsculas y letter-spacing) mide ~85: se salía de su
   tarjeta. Una columna en pantallas angostas. */
@media (max-width: 420px) {
  .pv-kpis { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  .pv-panel--a { animation: pv-float 7s ease-in-out infinite; }
  .pv-panel--b { animation: pv-float 8.5s ease-in-out infinite reverse; }
  .pv-bars i { animation: pv-grow 0.8s var(--pv-ease) backwards; }
  .pv-bars i:nth-child(2) { animation-delay: 60ms; }  .pv-bars i:nth-child(3) { animation-delay: 120ms; }
  .pv-bars i:nth-child(4) { animation-delay: 180ms; } .pv-bars i:nth-child(5) { animation-delay: 240ms; }
  .pv-bars i:nth-child(6) { animation-delay: 300ms; } .pv-bars i:nth-child(7) { animation-delay: 360ms; }
  .pv-bars i:nth-child(8) { animation-delay: 420ms; }
  @keyframes pv-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -10px; } }
  @keyframes pv-grow { from { transform: scaleY(0); transform-origin: bottom; } }
}

/* Aparición progresiva (se activa por JS; sin JS todo es visible) */
.pv-reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .pv-js .pv-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--pv-dur-3) var(--pv-ease), transform var(--pv-dur-3) var(--pv-ease); }
  .pv-js .pv-reveal.pv-in { opacity: 1; transform: none; }
}

/* ── 8. TARJETAS / GRIDS ─────────────────────────────────────────────────── */
.pv-grid { display: grid; gap: var(--pv-s5); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
/* min() en la pista: a 320 px de viewport el mínimo fijo de 300 px más el
   padding del wrap forzaba un layout de 324 px (zoom-out de ~1 %). */
.pv-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.pv-card {
  background: var(--pv-surface); border: 1px solid var(--pv-line);
  border-radius: var(--pv-r-lg); padding: var(--pv-s6);
  transition: transform var(--pv-dur-2) var(--pv-ease), box-shadow var(--pv-dur-2), border-color var(--pv-dur-2);
}
.pv-card:hover { transform: translateY(-4px); box-shadow: var(--pv-sh-2); border-color: var(--pv-line-2); }
.pv-card h3 { margin-bottom: var(--pv-s2); }
.pv-card p { color: var(--pv-ink-2); font-size: var(--pv-fs-sm); }
.pv-card__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--pv-r-md); margin-bottom: var(--pv-s4);
  background: var(--pv-accent-soft); border: 1px solid var(--pv-accent-line);
  color: var(--pv-accent); font-size: 1.25rem;
}
.pv-card__link { display: inline-block; margin-top: var(--pv-s4); font-size: var(--pv-fs-sm); font-weight: 600; }
.pv-ink .pv-card { background: var(--pv-ink-surface); border-color: rgba(247,243,236,0.1); }
.pv-ink .pv-card p { color: var(--pv-ink-inv-2); }
.pv-ink .pv-card__ico { background: rgba(224,185,140,0.12); border-color: rgba(224,185,140,0.26); color: #e0b98c; }

/* ── 9. PASOS / METODOLOGÍA ──────────────────────────────────────────────── */
.pv-flow { display: grid; gap: var(--pv-s4); grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); }
.pv-step { position: relative; background: var(--pv-surface); border: 1px solid var(--pv-line); border-radius: var(--pv-r-lg); padding: var(--pv-s5); }
.pv-step__n {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--pv-accent); color: #fff;
  font-family: var(--pv-font-display); font-weight: 700; font-size: var(--pv-fs-sm); margin-bottom: var(--pv-s3);
}
.pv-step b { display: block; font-family: var(--pv-font-display); font-size: var(--pv-fs-md); margin-bottom: var(--pv-s1); }
.pv-step span { display: block; color: var(--pv-ink-2); font-size: var(--pv-fs-xs); line-height: 1.55; }
.pv-ink .pv-step { background: var(--pv-ink-surface); border-color: rgba(247,243,236,0.1); }
.pv-ink .pv-step span { color: var(--pv-ink-inv-2); }
.pv-ink .pv-step b { color: var(--pv-ink-inv); }

/* ── 10. CONFIANZA (sin cifras inventadas) ───────────────────────────────── */
.pv-chips { display: flex; flex-wrap: wrap; gap: var(--pv-s2); justify-content: center; margin-top: var(--pv-s6); }
.pv-chips span {
  display: inline-flex; align-items: center; gap: var(--pv-s2);
  padding: var(--pv-s2) var(--pv-s4); border-radius: var(--pv-r-full);
  background: var(--pv-surface); border: 1px solid var(--pv-line);
  font-size: var(--pv-fs-xs); color: var(--pv-ink-2);
}
.pv-chips b { color: var(--pv-ink); font-weight: 600; }
.pv-ink .pv-chips span { background: rgba(247,243,236,0.06); border-color: rgba(247,243,236,0.12); color: var(--pv-ink-inv-2); }
.pv-ink .pv-chips b { color: var(--pv-ink-inv); }

/* ── 11. FORMULARIOS ─────────────────────────────────────────────────────── */
.pv-field { margin-bottom: var(--pv-s4); }
.pv-row { display: grid; gap: var(--pv-s4); grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .pv-row { grid-template-columns: 1fr; } }
.pv-label { display: block; font-size: var(--pv-fs-xs); font-weight: 600; color: var(--pv-ink-2); margin-bottom: 6px; letter-spacing: 0.01em; }
.pv-input, .pv-textarea {
  width: 100%; font-family: var(--pv-font); font-size: 16px; color: var(--pv-ink);
  background: var(--pv-surface); border: 1px solid var(--pv-line-2);
  border-radius: var(--pv-r-md); padding: 0.72rem 0.9rem; min-height: 46px;
  transition: border-color var(--pv-dur-1), box-shadow var(--pv-dur-1);
}
.pv-input:hover, .pv-textarea:hover { border-color: var(--pv-ink-3); }
.pv-input:focus, .pv-textarea:focus { outline: none; border-color: var(--pv-accent); box-shadow: 0 0 0 3px rgba(138,90,43,0.15); }
.pv-textarea { min-height: 108px; resize: vertical; }
.pv-hint { font-size: var(--pv-fs-xs); color: var(--pv-ink-3); margin-top: 5px; }
.pv-msg { border-radius: var(--pv-r-md); padding: var(--pv-s3) var(--pv-s4); font-size: var(--pv-fs-sm); margin-bottom: var(--pv-s4); }
.pv-msg:empty { display: none; }
.pv-msg--ok { background: var(--pv-ok-soft); color: var(--pv-ok); }
.pv-msg--err { background: var(--pv-danger-soft); color: var(--pv-danger); }
.pv-msg--info { background: var(--pv-accent-soft); color: var(--pv-accent-2); }
.pv-ok-txt { color: var(--pv-ok); font-size: var(--pv-fs-xs); }
.pv-bad-txt { color: var(--pv-danger); font-size: var(--pv-fs-xs); }
.pv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.pv-check { display: flex; gap: var(--pv-s3); align-items: flex-start; font-size: var(--pv-fs-xs); color: var(--pv-ink-2); }
.pv-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--pv-accent); flex: none; }
.pv-details { border-top: 1px solid var(--pv-line); margin-top: var(--pv-s4); padding-top: var(--pv-s3); font-size: var(--pv-fs-xs); color: var(--pv-ink-3); }
.pv-details summary { cursor: pointer; color: var(--pv-ink-2); font-weight: 600; min-height: 32px; }
.pv-details p { margin-top: var(--pv-s2); line-height: 1.6; }

/* ── 12. FAQ (acordeón accesible nativo) ─────────────────────────────────── */
.pv-faq { display: flex; flex-direction: column; gap: var(--pv-s3); margin-top: var(--pv-s6); }
.pv-faq details { background: var(--pv-surface); border: 1px solid var(--pv-line); border-radius: var(--pv-r-lg); overflow: hidden; }
.pv-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pv-s4);
  padding: var(--pv-s4) var(--pv-s5); cursor: pointer; font-weight: 600;
  font-size: var(--pv-fs-md); color: var(--pv-ink); list-style: none; min-height: 52px;
}
.pv-faq summary::-webkit-details-marker { display: none; }
.pv-faq summary::after { content: '+'; font-family: var(--pv-font-display); font-size: var(--pv-fs-xl); color: var(--pv-accent); transition: transform var(--pv-dur-2) var(--pv-ease); }
.pv-faq details[open] summary::after { transform: rotate(45deg); }
.pv-faq .pv-faq__b { padding: 0 var(--pv-s5) var(--pv-s5); color: var(--pv-ink-2); font-size: var(--pv-fs-sm); line-height: 1.65; }

/* ── 13. SPLIT (acceso / contacto) ───────────────────────────────────────── */
.pv-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--pv-s8); align-items: start; }
.pv-split > * { min-width: 0; }
@media (max-width: 900px) { .pv-split { grid-template-columns: 1fr; gap: var(--pv-s6); } }
.pv-panel-card {
  background: var(--pv-surface); border: 1px solid var(--pv-line-2);
  border-radius: var(--pv-r-xl); box-shadow: var(--pv-sh-3); padding: var(--pv-s7);
}
.pv-panel-card h2, .pv-panel-card h3 { margin-bottom: var(--pv-s2); }
@media (max-width: 420px) { .pv-panel-card { padding: var(--pv-s5) var(--pv-s4); } }
.pv-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--pv-s3); margin-top: var(--pv-s5); }
.pv-list li { display: flex; gap: var(--pv-s3); align-items: baseline; color: var(--pv-ink-2); font-size: var(--pv-fs-sm); }
.pv-list li b { color: var(--pv-ink); font-weight: 600; }
.pv-list .pv-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pv-accent-soft); color: var(--pv-accent); font-size: 0.7rem; }
.pv-datos { list-style: none; padding: 0; margin-top: var(--pv-s5); display: flex; flex-direction: column; gap: var(--pv-s3); }
.pv-datos li { display: flex; gap: var(--pv-s3); align-items: baseline; color: var(--pv-ink-2); font-size: var(--pv-fs-sm); }
.pv-datos b { color: var(--pv-ink); font-weight: 600; }

/* ── 14. PÁGINA DE ACCESO (login / registro) ─────────────────────────────── */
.pv-auth { min-height: 100svh; display: flex; flex-direction: column; }
.pv-auth__main {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--pv-s8);
  align-items: center; width: 100%; max-width: 1080px; margin: 0 auto;
  padding: var(--pv-s8) var(--pv-s5);
  padding-top: calc(var(--pv-s8) + env(safe-area-inset-top));
  padding-bottom: calc(var(--pv-s8) + env(safe-area-inset-bottom));
}
.pv-auth__main > * { min-width: 0; }
@media (max-width: 900px) { .pv-auth__main { grid-template-columns: 1fr; gap: var(--pv-s6); padding-top: var(--pv-s6); } }
/* Formularios anchos (registro): una sola columna para que el split interno
   (formulario + aside) use el ancho completo en vez de repartir la mitad. */
.pv-auth__main--single { grid-template-columns: 1fr; max-width: 1120px; align-items: start; }
.pv-auth__intro h1 { margin: var(--pv-s4) 0 var(--pv-s3); font-size: clamp(1.75rem, 3.6vw, 2.5rem); }
.pv-form-foot { margin-top: var(--pv-s5); text-align: center; font-size: var(--pv-fs-xs); color: var(--pv-ink-3); }
.pv-form-foot a { color: var(--pv-accent); font-weight: 600; }
.pv-pass-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pv-s3); }
.pv-pass-toggle { background: none; border: none; color: var(--pv-accent); font-family: var(--pv-font); font-size: var(--pv-fs-xs); font-weight: 600; cursor: pointer; padding: 0; min-height: 32px; }
.pv-exito { text-align: center; padding: var(--pv-s8) var(--pv-s6); }
.pv-exito .pv-exito__ico { font-size: 2.75rem; }
.pv-legal { padding: var(--pv-s6) var(--pv-s5) var(--pv-s7); text-align: center; font-size: var(--pv-fs-xs); color: var(--pv-ink-3); border-top: 1px solid var(--pv-line); }
.pv-legal a { color: var(--pv-ink-2); font-weight: 500; }
.pv-legal a:hover { color: var(--pv-accent); }
.pv-legal__links { display: flex; flex-wrap: wrap; gap: var(--pv-s4); justify-content: center; margin-top: var(--pv-s3); }
.pv-aviso { margin-top: var(--pv-s3); font-size: 0.75rem; color: var(--pv-ink-3); }

/* ── 15. TOAST / UTILIDADES ──────────────────────────────────────────────── */
.pv-toast {
  position: fixed; left: 50%; bottom: var(--pv-s5); transform: translateX(-50%) translateY(10px);
  background: var(--pv-ink); color: var(--pv-ink-inv);
  border-radius: var(--pv-r-full); padding: var(--pv-s3) var(--pv-s6);
  font-size: var(--pv-fs-sm); box-shadow: var(--pv-sh-3);
  opacity: 0; pointer-events: none; transition: opacity var(--pv-dur-2), transform var(--pv-dur-2) var(--pv-ease); z-index: 200;
  max-width: min(92vw, 560px); text-align: center;
}
.pv-toast[data-on='true'] { opacity: 1; transform: translateX(-50%) translateY(0); }
.pv-divider { height: 1px; background: var(--pv-line); margin: var(--pv-s8) 0; }
.pv-ink .pv-divider { background: rgba(247,243,236,0.12); }

/* ── 16. PREFERENCIAS DEL USUARIO ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .pv-panel--float, .pv-panel--c, .pv-stage__deck { transform: none !important; }
  .pv-reveal { opacity: 1 !important; transform: none !important; }
}
@media (prefers-contrast: more) {
  :root { --pv-ink-2: #37322b; --pv-ink-3: #5c554b; --pv-line: #c9bfae; --pv-line-2: #a99d89; }
}
@media print {
  .pv-bar, .pv-toast, .pv-hero__cta, .pv-legal, .pv-foot { display: none; }
  body.pv { background: #fff; color: #000; }
}

/* ── 17. PÁGINAS INTERNAS (encabezado, prosa y pie editorial) ──────────────
   Componentes del sitio multipágina (/servicios/, /nosotros/, legales). Se
   apoyan en los tokens de arriba: nada nuevo en color ni tipografía. Se
   agregan al final para no reordenar las secciones existentes (las reglas de
   prefers-reduced-motion de §16 siguen aplicando: acá no hay movimiento). */

/* Encabezado de página interna con migas de pan */
.pv-page-head {
  padding: var(--pv-s8) 0 var(--pv-s7);
  background: var(--pv-surface); border-bottom: 1px solid var(--pv-line);
}
.pv-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pv-s2);
  font-size: var(--pv-fs-xs); color: var(--pv-ink-3); margin-bottom: var(--pv-s4);
}
.pv-crumbs a { color: var(--pv-ink-2); }
.pv-crumbs a:hover { color: var(--pv-accent); }
.pv-crumbs [aria-hidden] { color: var(--pv-line-2); }
.pv-crumbs [aria-current] { color: var(--pv-ink); font-weight: 600; }
.pv-page-head h1 { font-size: var(--pv-fs-3xl); max-width: 24ch; }
.pv-page-head p { margin-top: var(--pv-s4); max-width: 62ch; color: var(--pv-ink-2); font-size: var(--pv-fs-lg); }

/* Prosa larga (legales, artículos): longitud de línea controlada */
.pv-prose { max-width: 72ch; }
.pv-prose h2 { font-size: var(--pv-fs-xl); margin: var(--pv-s7) 0 var(--pv-s3); }
.pv-prose h3 { font-size: var(--pv-fs-lg); margin: var(--pv-s5) 0 var(--pv-s2); }
.pv-prose p { margin-top: var(--pv-s3); color: var(--pv-ink-2); }
.pv-prose ul, .pv-prose ol { margin-top: var(--pv-s3); padding-left: var(--pv-s5); display: grid; gap: var(--pv-s2); color: var(--pv-ink-2); }
.pv-prose a { color: var(--pv-accent); text-decoration: underline; text-underline-offset: 2px; }
.pv-prose strong { color: var(--pv-ink); }
.pv-prose__fecha { font-size: var(--pv-fs-xs); color: var(--pv-ink-3); margin-top: var(--pv-s3); }

/* Pie de página editorial en columnas (reemplaza la franja mínima) */
.pv-foot { background: var(--pv-elevated); border-top: 1px solid var(--pv-line); padding: var(--pv-s8) 0 var(--pv-s5); }
.pv-foot__cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--pv-s6); }
.pv-foot h2 {
  font-family: var(--pv-font); font-size: var(--pv-fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--pv-ink-3);
  margin: 0 0 var(--pv-s3);
}
.pv-foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--pv-s2); }
.pv-foot a { color: var(--pv-ink-2); font-size: var(--pv-fs-sm); }
.pv-foot a:hover { color: var(--pv-accent); }
.pv-foot__brand img { width: 34px; height: 26px; }
.pv-foot__brand p { margin-top: var(--pv-s3); font-size: var(--pv-fs-sm); color: var(--pv-ink-3); max-width: 36ch; }
.pv-foot__bottom {
  margin-top: var(--pv-s6); padding-top: var(--pv-s4); border-top: 1px solid var(--pv-line);
  display: flex; flex-wrap: wrap; gap: var(--pv-s3) var(--pv-s5); justify-content: space-between;
  font-size: var(--pv-fs-xs); color: var(--pv-ink-3);
}
.pv-foot__bottom a { font-size: var(--pv-fs-xs); }
.pv-foot__social { display: flex; flex-wrap: wrap; gap: var(--pv-s4); }
.pv-foot__social a { display: inline-flex; align-items: center; gap: 6px; }

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