/* =====================================================================
   PRUEBA · Tema "Portfolio": la web con la paleta del portfolio de David.
   Violeta #6B1FFF · Amarillo #FFD400 · Tinta #111111 · Papel #F6F6F4
   (valores exactos sacados de portfolio-interactivo-v1.pdf)
   Se carga DESPUÉS del CSS de cada página y solo sobrescribe colores.
   Reglas de logo: sobre violeta, blanco; sobre amarillo, violeta;
   sobre blanco, tinta. Nunca negro sobre color (manual, usos incorrectos).
   ===================================================================== */
:root{
  --pv:#6B1FFF; --py:#FFD400; --ink:#111111; --paper-2:#F6F6F4;
  --black:#111111; --g1:#F6F6F4;
}
::selection{background:var(--py);color:var(--ink)}
body{color:var(--ink)}

/* ---------- Comunes a las dos páginas ---------- */
.btn-solid{background:var(--pv);border-color:var(--pv);color:#fff}
.btn-solid:hover{background:#fff;color:var(--pv);border-color:var(--pv)}
.btn-line{border-color:var(--ink);color:var(--ink)}
.btn-line:hover{background:var(--ink);color:#fff}
.lbl::before{background:var(--pv)}
.lt{background-image:linear-gradient(var(--py),var(--py));background-repeat:no-repeat;background-size:100% 30%;background-position:0 85.7%;padding:0 .04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Cabecera: violeta sobre el hero, blanca al hacer scroll */
header:not(.scrolled){background:var(--pv)!important;backdrop-filter:none}
header:not(.scrolled) .logo{color:#fff}
header:not(.scrolled) .nav-links a{color:rgba(255,255,255,.82)}
header:not(.scrolled) .nav-links a:hover,header:not(.scrolled) .nav-links a[aria-current]{color:#fff}
header:not(.scrolled) .nav-cta{border-color:var(--py);background:var(--py);color:var(--ink)}
header:not(.scrolled) .nav-cta:hover{background:transparent;color:var(--py)}
header:not(.scrolled) .burger span{background:#fff}
header:not(.scrolled) .mnav{color:#fff}
header.scrolled .nav-cta{border-color:var(--pv);background:var(--pv);color:#fff}
header.scrolled .nav-cta:hover{background:#fff;color:var(--pv)}
.nav-links a[aria-current]{text-decoration-color:var(--py)}
.mobile-menu{background:var(--pv);color:#fff}
.mobile-menu a:hover{color:var(--py)}

/* Pie: blanco, logo en tinta y detalles en violeta */
footer{background:#fff;color:var(--ink);border-top:0}
.foot .flogo{color:var(--ink)!important}
.foot .fc{color:var(--g4)}
.foot .fc a{color:var(--pv)}
.foot .fs a{border-color:var(--pv);color:var(--pv)}
.foot .fs a:hover{background:var(--pv);border-color:var(--pv);color:#fff}
.legal{border-top-color:var(--g2);color:var(--g4)}
.legal a:hover{color:var(--pv)}

/* ---------- index.html ---------- */
/* Hero violeta (portada del PDF) */
.hero{background:var(--pv);color:#fff}
.hero .lbl{color:#fff} .hero .lbl::before{background:var(--py)}
.hero h1{color:#fff}
.hero h1 .lt{color:var(--py);background:none;padding:0}
.hero-sub{color:rgba(255,255,255,.85)}
.hero-note{color:var(--py)}
.hero-bottom{border-top-color:rgba(255,255,255,.25)}
.hero .btn-solid{background:var(--py);border-color:var(--py);color:var(--ink)}
.hero .btn-solid:hover{background:transparent;color:var(--py)}
.hero .btn-line{color:#fff;border-color:#fff}
.hero .btn-line:hover{background:#fff;color:var(--pv)}

/* Secciones claras en papel del PDF */
.light{background:var(--paper-2)}
.benefit .sq{background:var(--pv)}
.an-visual img{border-color:transparent}

/* Cifras en amarillo, logo violeta */
.dark:not(.final){background:var(--py);color:var(--ink)}
.dark:not(.final) .lbl{color:var(--ink)} .dark:not(.final) .lbl::before{background:var(--pv)}
.dark:not(.final) .flogo{color:var(--pv)!important}
.dark:not(.final) .stat,.dark:not(.final) .stats-head,.dark:not(.final) .stats-cta{border-color:rgba(17,17,17,.18)!important}
.dark:not(.final) .stat .big{color:var(--pv)}
.dark:not(.final) .stat .lbl2{color:rgba(17,17,17,.75)}
.dark:not(.final) h2{color:var(--ink)}
.dark:not(.final) .lt{background:none;color:var(--pv);padding:0}
.dark:not(.final) .btn-solid{background:var(--pv);border-color:var(--pv);color:#fff}
.dark:not(.final) .btn-solid:hover{background:transparent;color:var(--pv);border-color:var(--pv)}

/* Proceso, casos, más allá */
.step .n{color:var(--pv)}
.steps,.step{border-color:var(--g2)}
.case{background:var(--pv)}
.case .n{color:var(--py)}
.case p{color:rgba(255,255,255,.85)}
.mc{border-top-color:var(--pv)} .mc svg{stroke:var(--pv)}

/* Quién hay detrás: el retrato en semitono sobre violeta, como en el PDF */
#nosotros{background:var(--pv);color:#fff}
#nosotros .lbl{color:#fff} #nosotros .lbl::before{background:var(--py)}
#nosotros .role{color:var(--py)}
#nosotros .bio{color:rgba(255,255,255,.85)}
#nosotros .checks,#nosotros .checks li{border-color:rgba(255,255,255,.2)}
#nosotros .checks .tick{color:var(--py)}

/* FAQ */
.faq-q:hover{color:var(--pv)}
.faq-item.open .plus{background:var(--pv);border-color:var(--pv);color:#fff}

/* Cierre: violeta con titular amarillo (invertido a petición del cliente) */
.final{background:var(--pv);color:#fff}
.final .lbl{color:#fff} .final .lbl::before{background:var(--py)}
.final h2{color:var(--py)}
.final .lt{background:none;padding:0}
.final .logo-big{color:#fff}
.final .btn-solid{background:var(--py);border-color:var(--py);color:var(--ink)}
.final .btn-solid:hover{background:transparent;color:var(--py);border-color:var(--py)}

/* Modal y cookies */
.modal .btn-solid{background:var(--pv);border-color:var(--pv);color:#fff}
.field input:focus,.field textarea:focus{border-color:var(--pv)}
.consent input{accent-color:var(--pv)}
.thanks .mark{border-color:var(--pv);color:var(--pv)}
.cookie{background:var(--pv)}
.cookie button.acc{background:var(--py);border-color:var(--py);color:var(--ink)}

/* ---------- portfolio.html ---------- */
/* Hero: igual que la portada del PDF */
.p-hero{background:var(--pv);color:#fff}
.p-top span:first-child{color:#fff}
.p-top span:last-child{color:var(--py)}
.p-intro .who{color:#fff}
.p-intro .what{color:var(--py)}
.p-intro .note{color:rgba(255,255,255,.8)}
.p-word{color:#fff}
.p-word .o{color:var(--py);-webkit-text-stroke:0}

/* Índice y filtros */
.rows{border-top-color:var(--ink)}
.row:hover .t{color:var(--pv)}
.row .go{color:var(--pv)}
.filters button:hover{border-color:var(--pv)}
.filters button[aria-pressed="true"]{background:var(--pv);border-color:var(--pv);color:#fff}

/* Proyectos */
.chip{background:var(--py);color:var(--ink)}
.proj-n{color:var(--pv)}
.proj-info h2{color:var(--ink)}
.proj-info h2 .lt{background:none;padding:0;color:var(--pv)}
.meta li span:first-child{color:var(--pv)}
.gallery .ph{background:var(--paper-2)}

/* Cierre "Gracias por llegar hasta aquí": violeta con titular amarillo (igual que el cierre de la portada) */
.p-end{background:var(--pv);color:#fff}
.p-end .lbl{color:#fff} .p-end .lbl::before{background:var(--py)}
.p-end h2{color:var(--py)}
.p-end .lt{background:none;padding:0;color:var(--py)}
.p-end .mail{color:rgba(255,255,255,.85)}
.p-end .mail a{color:#fff}
.p-end .btn-solid{background:var(--py);border-color:var(--py);color:var(--ink)}
.p-end .btn-solid:hover{background:transparent;color:var(--py);border-color:var(--py)}
.p-end .btn-line{color:#fff;border-color:#fff}
.p-end .btn-line:hover{background:#fff;color:var(--pv)}

/* Logo en negro (tinta) sobre fondos claros (cabecera al hacer scroll, pie).
   Sobre violeta sigue en blanco; sobre amarillo, violeta. */
header.scrolled .logo{color:var(--ink)}
header .logo{transition:color .3s ease}

/* ---------- gracias.html ---------- */
:is(.page-gracias,.page-404){background:var(--pv);color:#fff}
:is(.page-gracias,.page-404) header{background:transparent!important}
:is(.page-gracias,.page-404) .logo{color:#fff!important}
:is(.page-gracias,.page-404) .mark{border-color:var(--py)}
:is(.page-gracias,.page-404) .mark path{stroke:var(--py)}
:is(.page-gracias,.page-404) .lbl{color:#fff} :is(.page-gracias,.page-404) .lbl::before{background:var(--py)}
:is(.page-gracias,.page-404) h1{color:#fff}
:is(.page-gracias,.page-404) h1 .lt{color:var(--py);background:none;padding:0}
:is(.page-gracias,.page-404) p{color:rgba(255,255,255,.85)}
:is(.page-gracias,.page-404) .btn{background:var(--py);border-color:var(--py);color:var(--ink)}
:is(.page-gracias,.page-404) .btn:hover{background:transparent;color:var(--py)}
:is(.page-gracias,.page-404) footer{background:transparent;color:rgba(255,255,255,.7);border-top:1px solid rgba(255,255,255,.2)}

/* ---------- privacidad.html (y futuras páginas legales: body.page-legal) ---------- */
.page-legal .head{background:var(--pv)}
.page-legal header .logo{color:#fff}
.page-legal .back{border-color:var(--py);background:var(--py);color:var(--ink)}
.page-legal .back:hover{background:transparent;color:var(--py)}
.page-legal .head .lbl::before{background:var(--py)}
.page-legal .head h1 .lt{color:var(--py);background:none;padding:0}
.page-legal .head .url{color:rgba(255,255,255,.8)}
.page-legal .doc h3{color:var(--pv)}
.page-legal .doc a{color:var(--pv)}
.page-legal .doc h2{border-top-color:var(--pv)}
/* Botón "Volver a la web" del final de las páginas legales: violeta y blanco */
.page-legal .doc-back .btn{background:var(--pv);border-color:var(--pv);color:#fff}
.page-legal .doc-back .btn:hover{background:#fff;color:var(--pv);border-color:var(--pv)}
/* 404: segundo botón con borde blanco */
.page-404 .btn-ghost{background:transparent;border-color:#fff;color:#fff}
.page-404 .btn-ghost:hover{background:#fff;color:var(--pv);border-color:#fff}

/* ---------- Páginas de contenido (servicios y recursos) ---------- */
.final .btn-line{color:#fff;border-color:#fff}
.final .btn-line:hover{background:#fff;color:var(--pv)}
.card:hover{border-color:var(--pv)}
.card .go{color:var(--pv)}
.callout{border-left-color:var(--pv);background:var(--paper-2)}
.prose a{color:var(--pv)}
.pg-hero .crumbs a:hover{color:var(--py)}
.article-head .meta{color:var(--py)}