/* ==========================================================================
   Key visual gtocalini — aplicado al home
   Fondos claros/oscuros alternados, halos violeta/mint, tarjetas y numeración
   como en los carruseles de LinkedIn. Todo scoped a body.home para poder
   revertir quitando el <link> de css/kv.css en index.html.
   ========================================================================== */

body.home,
body.kv-page,
body.proyectos {
  --kv-violet: #8A2BE2;
  --kv-violet-deep: #6A1FB0;
  --kv-mint: #37FDB5;
  --kv-mint-deep: #0F9D6B;
  --kv-text: #1A1A1A;
  --kv-muted: #5E5E66;
  --kv-line: #E0D0F0;
  --kv-tint-violet: #EFEAF7;
  --kv-tint-mint: #EAF9F2;
}

/* ---------- Secciones oscuras: dos tonos alternados + halo ---------- */
body.home .how-section,
body.home .who-we-are-section,
body.home .experience-section,
body.home .services-section,
body.home .work-section,
body.home .recommendations-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Tono base (#121212) en Cómo trabajo, Experiencia y Proyectos;
   tono más profundo (#0A0B12) en Sobre mí, Servicios y Testimonios */
body.home .who-we-are-section,
body.home .services-section,
body.home .recommendations-section { background-color: #0A0B12; }

body.home .how-section::before,
body.home .who-we-are-section::before,
body.home .experience-section::before,
body.home .services-section::before,
body.home .work-section::before,
body.home .recommendations-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  filter: blur(90px);
}
/* Cómo trabajo: violeta abajo a la izquierda */
body.home .how-section::before {
  left: -260px; bottom: -380px;
  background: radial-gradient(circle, rgba(138,43,226,.55) 0%, rgba(138,43,226,0) 68%);
}
/* Sobre mí: violeta arriba a la derecha */
body.home .who-we-are-section::before {
  right: -320px; top: -300px;
  background: radial-gradient(circle, rgba(138,43,226,.42) 0%, rgba(138,43,226,0) 68%);
}
/* Experiencia: mint arriba a la derecha, más sutil */
body.home .experience-section::before {
  right: -300px; top: -360px;
  background: radial-gradient(circle, rgba(55,253,181,.28) 0%, rgba(55,253,181,0) 68%);
}
/* Servicios: violeta a la izquierda, al centro */
body.home .services-section::before {
  left: -380px; top: 10%;
  background: radial-gradient(circle, rgba(138,43,226,.40) 0%, rgba(138,43,226,0) 68%);
}
/* Proyectos: mint tenue abajo a la derecha */
body.home .work-section::before {
  right: -340px; bottom: -380px;
  background: radial-gradient(circle, rgba(55,253,181,.18) 0%, rgba(55,253,181,0) 68%);
}
/* Testimonios: violeta arriba a la derecha */
body.home .recommendations-section::before {
  right: -240px; top: -160px;
  background: radial-gradient(circle, rgba(138,43,226,.45) 0%, rgba(138,43,226,0) 68%);
}

/* ---------- Tarjetas "Oscura" del KV (Cómo trabajo) ---------- */
body.home .how-step {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.home .how-step:hover { border-color: rgba(55,253,181,.55); }
body.home .how-step-num {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--kv-violet);
  color: #fff;
  letter-spacing: .08em;
}

/* ==========================================================================
   Ronda 2 — ritmo, paddings, botones, Cómo trabajo, portfolio
   ========================================================================== */

/* ---------- Paddings parejos entre bloques ---------- */
body.home,
body.kv-page,
body.proyectos {
  --kv-pad-y: clamp(64px, 8vw, 112px);
}
body.home .how-section,
body.home .who-we-are-section,
body.home .experience-section,
body.home .work-section,
body.home .recommendations-section {
  padding-top: var(--kv-pad-y);
  padding-bottom: var(--kv-pad-y);
}
body.home .services-section {
  padding-top: var(--kv-pad-y);
  padding-bottom: var(--kv-pad-y);
}
/* Se evita que el último elemento de cada bloque sume margen extra */
body.home .how-section > :last-child,
body.home .who-we-are-section > :last-child,
body.home .experience-section > :last-child,
body.home .work-section > :last-child,
body.home .recommendations-section > :last-child { margin-bottom: 0; }
body.home .main-title { margin-bottom: 40px; }

/* ---------- Botones con radio ---------- */
body.home .services-cta,
body.home .all-projects {
  border-radius: 999px;
}
body.home .services-cta { padding: 14px 34px; font-weight: 500; }
body.home .all-projects {
  border: 1px solid rgba(255,255,255,.35);
  padding: 8px 20px;
  font-size: 14px;
  letter-spacing: .06em;
  top: 14px;
  transition: background .2s, color .2s, border-color .2s;
}
body.home .all-projects::after { display: none; }
body.home .all-projects:hover { background: var(--kv-mint); border-color: var(--kv-mint); color: #0A0A0A; }

/* ---------- Cómo trabajo: solo números ---------- */
body.home .how-step { padding: 30px 26px 28px; }
body.home .how-step-num {
  display: block;
  padding: 0;
  background: none;
  border-radius: 0;
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: 52px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--kv-mint);
  margin-bottom: 22px;
}
body.home .how-step--identidad .how-step-num { color: #B57BFF; }
body.home .how-step--uxui .how-step-num { color: #FF3DAD; }

/* ---------- Portfolio: grilla uniforme de tarjetas ---------- */
:is(body.home .work-list.bento-grid, body.proyectos .work-list) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  counter-reset: kv-work;
}
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item {
  grid-column: span 1;
  counter-increment: kv-work;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 0 24px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item:hover {
  transform: translateY(-5px);
  border-color: rgba(55,253,181,.6);
  box-shadow: 0 22px 40px -22px rgba(138,43,226,.6);
}
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item .work-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
}
/* Número tipo "Contador" del KV */
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item::before {
  content: counter(kv-work, decimal-leading-zero);
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--kv-violet);
  color: #fff;
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: .08em;
}
/* Flecha que aparece en hover */
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item::after {
  content: "→";
  position: absolute;
  right: 18px; bottom: 18px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--kv-mint);
  color: #0A0A0A;
  font-size: 18px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s, transform .2s;
}
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item:hover::after { opacity: 1; transform: none; }

:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item .heading {
  margin: 22px 22px 14px;
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
}
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item .work-category-group,
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item > .work-category {
  margin: auto 22px 0;
}
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item > .work-category { align-self: flex-start; }
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item .work-category-group { padding-right: 52px; }

/* Chips redondeados, sin acento lateral */
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-category {
  border-left: 0;
  border-radius: 999px;
  padding: 6px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  background: rgba(255,255,255,.08);
}
:is(body.home, body.proyectos) .work-category.cat-dev { color: var(--kv-mint); background: rgba(55,253,181,.12); }
:is(body.home, body.proyectos) .work-category.cat-uxui { color: #FF6FC4; background: rgba(255,61,173,.14); }
:is(body.home, body.proyectos) .work-category.cat-identidad { color: #C79BFF; background: rgba(138,43,226,.25); }

@media (max-width: 991px) {
  :is(body.home .work-list.bento-grid, body.proyectos .work-list) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  :is(body.home .work-list.bento-grid, body.proyectos .work-list) { grid-template-columns: 1fr; }
  body.home .how-step-num { font-size: 44px; }
}


/* ---------- Servicios (oscuro) ---------- */
body.home .services-section .service-number {
  background: var(--kv-violet);
  border-color: var(--kv-violet);
  border-radius: 999px;
  color: #fff;
}
body.home .services-section .services-cta {
  background: var(--kv-violet);
  border-color: var(--kv-violet);
  color: #fff;
}
body.home .services-section .services-cta:hover {
  background: var(--kv-mint);
  border-color: var(--kv-mint);
  color: #0A0A0A;
}

/* ---------- Testimonios (oscuro, tarjeta del KV) ---------- */
:is(body.home, body.sobre-mi) .rec-card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  border-radius: 6px 16px 16px 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
:is(body.home, body.sobre-mi) .rec-card:hover { background: rgba(255,255,255,.09); }
:is(body.home, body.sobre-mi) .rec-arrow { border-color: rgba(255,255,255,.25); }


/* ==========================================================================
   Página Proyectos (body.proyectos)
   Reutiliza las tarjetas de arriba (:is con body.home) + título, filtros y halos.
   ========================================================================== */

body.proyectos { background-color: #121212; }

/* Título de la página: tarjeta translúcida con halo violeta */
body.kv-page .sitemap { position: relative; isolation: isolate; overflow: hidden; margin-top: 20px; }
body.kv-page .sitemap::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  right: -240px; top: -320px;
  width: 640px; height: 640px;
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(circle, rgba(138,43,226,.42) 0%, rgba(138,43,226,0) 68%);
}
body.kv-page .inner-sitemap {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.kv-page .sitemap-heading {
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.1;
}
body.kv-page .stemap-text {
  border-color: rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
}

/* Sección de grilla: mismo tono y halo mint que el bloque de Proyectos del home */
body.proyectos .work-section.work-page-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #121212;
  margin-top: 40px;
  padding-top: var(--kv-pad-y);
  padding-bottom: var(--kv-pad-y);
}
body.proyectos .work-section.work-page-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  right: -340px; bottom: -380px;
  width: 720px; height: 720px;
  border-radius: 50%;
  filter: blur(90px);
  background: radial-gradient(circle, rgba(55,253,181,.18) 0%, rgba(55,253,181,0) 68%);
}
body.proyectos .work-list { gap: 24px; }

/* Filtros: píldoras del KV */
body.proyectos .filter-bar { margin-bottom: 36px; }
body.proyectos .filter-btn {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  padding: 10px 20px;
}
body.proyectos .filter-btn:hover { border-color: var(--kv-mint); color: #F5F5F0; }
body.proyectos .filter-btn.is-active { border-color: transparent; }
body.proyectos .filter-btn.is-active[data-filter="all"] { background: var(--kv-violet); color: #fff; }

/* El filtro oculta con .is-filtered-out; las tarjetas del KV usan display:flex
   con más especificidad, así que se refuerza acá para que el filtro funcione. */
body.proyectos .work-list .work-item.is-filtered-out { display: none; }


/* ==========================================================================
   Home — uniones suaves entre bloques
   Cada sección esconde su borde superior con su propio color y se funde hacia
   el color de la siguiente en el borde inferior: el halo ya no se corta en seco
   y el cambio entre #121212 y #0A0B12 queda como un degradé.
   ========================================================================== */
body.home {
  --kv-bg-a: #121212;
  --kv-bg-b: #0A0B12;
  --kv-fade: clamp(120px, 22vh, 220px);
}
body.home .how-section,
body.home .experience-section,
body.home .work-section        { --kv-own: var(--kv-bg-a); --kv-next: var(--kv-bg-b); }
body.home .who-we-are-section,
body.home .services-section,
body.home .recommendations-section { --kv-own: var(--kv-bg-b); --kv-next: var(--kv-bg-a); }

body.home .how-section::after,
body.home .who-we-are-section::after,
body.home .experience-section::after,
body.home .services-section::after,
body.home .work-section::after,
body.home .recommendations-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--kv-own) 0,
    transparent var(--kv-fade),
    transparent calc(100% - var(--kv-fade)),
    var(--kv-next) 100%);
}


/* ==========================================================================
   Sobre mí / Servicios / Contacto (body.kv-page + clase de cada página)
   Mismo criterio que el home: dos tonos, halos, tarjetas translúcidas,
   píldoras y degradés suaves entre bloques.
   ========================================================================== */
body.kv-page { background-color: #121212; }

/* Secciones: contexto de apilado, halo, padding parejo, uniones suaves */
body.sobre-mi .who-we-are-section,
body.sobre-mi .recommendations-section,
body.servicios .services-section,
body.servicios .faq-section,
body.servicios .services-cta,
body.contacto .contact-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: var(--kv-pad-y);
  padding-bottom: var(--kv-pad-y);
  margin-top: 0;
  border-top: 0;
  --kv-bg-a: #121212;
  --kv-bg-b: #0A0B12;
  --kv-fade: clamp(100px, 18vh, 180px);
}
body.sobre-mi .who-we-are-section,
body.servicios .services-section,
body.servicios .services-cta,
body.contacto .contact-section { background-color: #0A0B12; --kv-own: var(--kv-bg-b); --kv-next: var(--kv-bg-a); }
body.sobre-mi .recommendations-section,
body.servicios .faq-section { background-color: #121212; --kv-own: var(--kv-bg-a); --kv-next: var(--kv-bg-b); }
/* Última sección antes del footer: se funde hacia el fondo base */
body.sobre-mi .recommendations-section,
body.servicios .services-cta,
body.contacto .contact-section { --kv-next: var(--kv-bg-a); }

body.sobre-mi .who-we-are-section::before,
body.sobre-mi .recommendations-section::before,
body.servicios .services-section::before,
body.servicios .faq-section::before,
body.servicios .services-cta::before,
body.contacto .contact-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 720px; height: 720px;
  border-radius: 50%;
  filter: blur(90px);
}
body.sobre-mi .who-we-are-section::before     { right: -320px; top: -300px; background: radial-gradient(circle, rgba(138,43,226,.42) 0%, rgba(138,43,226,0) 68%); }
body.sobre-mi .recommendations-section::before { right: -240px; top: -160px; background: radial-gradient(circle, rgba(138,43,226,.40) 0%, rgba(138,43,226,0) 68%); }
body.servicios .services-section::before       { left: -380px; top: 10%;     background: radial-gradient(circle, rgba(138,43,226,.40) 0%, rgba(138,43,226,0) 68%); }
body.servicios .faq-section::before            { right: -340px; top: 20%;    background: radial-gradient(circle, rgba(55,253,181,.16) 0%, rgba(55,253,181,0) 68%); }
body.servicios .services-cta::before           { left: 50%; top: -280px; margin-left: -360px; background: radial-gradient(circle, rgba(138,43,226,.38) 0%, rgba(138,43,226,0) 68%); }
body.contacto .contact-section::before         { right: -320px; top: -260px; background: radial-gradient(circle, rgba(138,43,226,.40) 0%, rgba(138,43,226,0) 68%); }

body.sobre-mi .who-we-are-section::after,
body.sobre-mi .recommendations-section::after,
body.servicios .services-section::after,
body.servicios .faq-section::after,
body.servicios .services-cta::after,
body.contacto .contact-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--kv-own) 0,
    transparent var(--kv-fade),
    transparent calc(100% - var(--kv-fade)),
    var(--kv-next) 100%);
}

/* Etiquetas mono: píldora de borde fino en vez de línea */
body.sobre-mi .sm-label,
body.servicios .faq-label {
  display: inline-block;
  padding: 7px 16px;
  margin-bottom: 28px;
  border-radius: 999px;
  border: 1px solid rgba(55,253,181,.45);
  background: rgba(55,253,181,.08);
}

/* ---------- Sobre mí: filas como tarjetas ---------- */
body.sobre-mi .sm-exp-list,
body.sobre-mi .sm-formation-list { border-top: 0; gap: 16px 24px; }
body.sobre-mi .sm-exp-item,
body.sobre-mi .sm-formation-item {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 22px 24px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .25s, background-color .25s;
}
body.sobre-mi .sm-exp-item:hover,
body.sobre-mi .sm-formation-item:hover { border-color: rgba(55,253,181,.55); background-color: rgba(255,255,255,.07); }
body.sobre-mi .sm-formation-year {
  align-self: start;
  justify-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--kv-violet);
  color: #fff;
}
@media (max-width: 768px) {
  body.sobre-mi .sm-exp-item,
  body.sobre-mi .sm-formation-item { padding: 18px; }
}

/* ---------- Servicios: cada servicio es una tarjeta ---------- */
body.servicios .services-list { gap: 20px; }
body.servicios .service {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 36px 32px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .4s ease, transform .4s ease, border-color .25s, box-shadow .25s;
}
body.servicios .service:first-child { border-top: 1px solid rgba(255,255,255,.12); }
body.servicios .service.is-visible:hover {
  border-color: rgba(55,253,181,.55);
  box-shadow: 0 22px 40px -22px rgba(138,43,226,.6);
}
body.servicios .service-number {
  justify-self: start;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--kv-violet);
  color: #fff;
  letter-spacing: .08em;
}
body.servicios .service-title {
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}
body.servicios .service-tag {
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #DDD;
  padding: 6px 14px;
}
@media (max-width: 768px) {
  body.servicios .service { padding: 26px 20px; }
}

/* FAQ: preguntas como tarjetas */
body.servicios .faq-list { display: grid; gap: 14px; }
body.servicios .faq-item {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 24px 26px;
}
body.servicios .faq-question { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 1rem; line-height: 1.35; }

/* CTA final */
body.servicios .services-cta .services-cta-inner {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  padding: clamp(36px, 6vw, 72px) 24px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.servicios .services-cta .services-cta-link {
  border-radius: 999px;
  padding: 14px 34px;
  background: var(--kv-violet);
  color: #fff;
}
body.servicios .services-cta .services-cta-link:hover { background: var(--kv-mint); color: #0A0A0A; }



/* ==========================================================================
   Casos de portfolio (body.kv-page.case-page)
   Se aplica a todos los *-dw / *-dg / freelo-uxui. El acento por categoría
   sigue viniendo de --cat-accent (.cs-wrap.cat-dev / cat-identidad / cat-uxui).
   ========================================================================== */
body.case-page .cs-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #121212;
}
/* Halos del fondo: violeta arriba a la derecha, acento de la categoría abajo a la izquierda */
body.case-page .cs-wrap::before,
body.case-page .cs-wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 720px; height: 720px;
  border-radius: 50%;
  filter: blur(90px);
}
body.case-page .cs-wrap::before {
  right: -320px; top: 520px;
  background: radial-gradient(circle, rgba(138,43,226,.32) 0%, rgba(138,43,226,0) 68%);
}
body.case-page .cs-wrap::after {
  left: -340px; bottom: -200px;
  background: radial-gradient(circle, color-mix(in srgb, var(--cat-accent) 22%, transparent) 0%, transparent 68%);
}

/* ---------- Hero ---------- */
body.case-page .cs-category-badge {
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cat-accent) 16%, transparent);
  padding: 7px 16px;
  font-weight: 500;
}
body.case-page .cs-hero-title {
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  line-height: 1.12;
}
body.case-page .cs-hero-meta {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  padding: 16px 24px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.case-page .cs-hero-meta-item + .cs-hero-meta-item::before { background: rgba(255,255,255,.2); }
body.case-page .cs-hero-img-wrap .cs-hero-img { border-radius: 18px; }

/* ---------- Bloques: cada sección es una tarjeta ---------- */
body.case-page .cs-section {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: rgba(255,255,255,.04);
  padding: clamp(28px, 4vw, 52px);
  margin-top: 24px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.case-page .cs-label {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--kv-violet);
  color: #fff;
  letter-spacing: .1em;
  margin-bottom: 22px;
}
body.case-page .cs-heading {
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  line-height: 1.25;
}
body.case-page .cs-step-title { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 1rem; line-height: 1.3; }

/* Stack */
body.case-page .cs-tag {
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #E6E6E6;
  padding: 7px 16px;
}

/* Proceso */
body.case-page .cs-timeline::before { background: rgba(255,255,255,.14); }
body.case-page .cs-timeline-icon { background: color-mix(in srgb, var(--cat-accent) 14%, #121212); border-color: transparent; }
body.case-page .cs-step-num { color: var(--cat-accent); }

/* Galería */
body.case-page .cs-gallery-item img { border-radius: 14px; border: 1px solid rgba(255,255,255,.12); }
body.case-page .cs-single-img-wrap img { border-radius: 14px; }

/* Resultado: cada métrica en su tarjeta */
body.case-page .cs-metric {
  padding: 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.04);
}

/* Card de contacto y navegación */
body.case-page .cs-contact-cta {
  margin-top: 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: rgba(255,255,255,.05);
  padding: 28px 32px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
body.case-page .cs-contact-cta-text { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 1.05rem; line-height: 1.3; }
body.case-page .cs-contact-cta-link {
  border: 0;
  border-radius: 999px;
  background: var(--kv-violet);
  color: #fff;
  padding: 12px 26px;
}
body.case-page .cs-contact-cta-link:hover { background: var(--kv-mint); color: #0A0A0A; }

body.case-page .cs-nav { border: 0; padding: 0; margin-top: 8px; }
body.case-page .cs-nav-link {
  padding: 10px 20px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  font-size: 14px;
  transition: background .2s, border-color .2s, color .2s;
}
body.case-page .cs-nav-link:hover { background: var(--kv-mint); border-color: var(--kv-mint); color: #0A0A0A; }

@media (max-width: 768px) {
  body.case-page .cs-section { border-radius: 18px; }
  body.case-page .cs-hero-meta { padding: 14px 18px; }
  body.case-page .cs-contact-cta { padding: 22px 20px; }
}


/* ==========================================================================
   AJUSTE — menos "efecto IA"
   Todo este bloque va al final a propósito: para volver al estilo anterior
   alcanza con borrarlo. Qué cambia:
   · sin vidrio esmerilado (backdrop-filter), superficies planas con borde fino
   · halos mucho más suaves
   · esquinas menos redondeadas, botones ya no son píldora
   · etiquetas y números sin pastilla violeta/mint
   · sin brillo violeta al pasar el mouse
   ========================================================================== */

/* 1. Sin vidrio esmerilado */
body.home *,
body.kv-page * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 2. Halos más tenues */
body.home [class$="-section"]:not(.hero-section)::before,
body.home .services-section::before,
body.kv-page .sitemap::before,
body.kv-page [class$="-section"]::before,
body.kv-page .services-cta::before,
body.case-page .cs-wrap::before,
body.case-page .cs-wrap::after {
  opacity: .45;
}

/* 3. Superficies: planas, esquinas más chicas, borde fino */
body.home .how-step,
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item,
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item,
body.home .rec-card,
body.sobre-mi .rec-card,
body.sobre-mi .sm-exp-item,
body.sobre-mi .sm-formation-item,
body.servicios .service,
body.servicios .faq-item,
body.contacto .contact-stack > .single-cell,
body.case-page .cs-metric {
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.09);
}
body.home .rec-card,
body.sobre-mi .rec-card { border-radius: 4px 10px 10px 4px; }
body.kv-page .inner-sitemap,
body.servicios .services-cta .services-cta-inner,
body.case-page .cs-section,
body.case-page .cs-contact-cta,
body.case-page .cs-hero-meta {
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.09);
}
body.case-page .cs-gallery-item img,
body.case-page .cs-single-img-wrap img,
body.case-page .cs-hero-img-wrap .cs-hero-img { border-radius: 8px; }
body.contacto .input-style { border-radius: 8px; }

/* 4. Sin brillo violeta al hover: solo cambia el borde */
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item:hover,
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item:hover,
body.servicios .service.is-visible:hover { box-shadow: none; transform: translateY(-3px); border-color: rgba(55,253,181,.45); }
body.servicios .service.is-visible:hover { transform: none; }

/* 5. Botones: esquinas suaves en vez de píldora */
body.home .services-cta,
body.home .all-projects,
body.proyectos .filter-btn,
body.servicios .services-cta .services-cta-link,
body.contacto .social-item,
body.contacto .submit-button,
body.case-page .cs-contact-cta-link,
body.case-page .cs-nav-link { border-radius: 8px; }
body.home .services-cta,
body.servicios .services-cta .services-cta-link,
body.contacto .submit-button,
body.case-page .cs-contact-cta-link { background: #7A28C8; }
body.home .services-cta:hover,
body.servicios .services-cta .services-cta-link:hover,
body.contacto .submit-button:hover,
body.case-page .cs-contact-cta-link:hover { background: var(--kv-mint); }
body.proyectos .filter-btn { background: transparent; border-color: rgba(255,255,255,.18); }
body.proyectos .filter-btn.is-active[data-filter="all"] { background: #7A28C8; }

/* 6. Etiquetas y números: texto, sin pastilla */
body.sobre-mi .sm-label,
body.servicios .faq-label {
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  border-radius: 0;
  background: none;
  display: block;
}
body.case-page .cs-label {
  padding: 0;
  background: none;
  color: var(--kv-violet);
  border-radius: 0;
}
body.servicios .service-number,
body.home .services-section .service-number {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--kv-mint);
}
body.sobre-mi .sm-formation-year {
  padding: 0;
  background: none;
  border-radius: 0;
  color: var(--kv-mint);
}
/* Número de las tarjetas del portfolio: chip oscuro en vez de píldora violeta */
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item::before,
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item::before {
  background: rgba(10,10,18,.78);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px;
  padding: 4px 9px;
}
/* Flecha de hover: cuadrada con esquinas suaves en vez de círculo */
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item::after,
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-item::after { border-radius: 8px; width: 34px; height: 34px; }
/* Chips de categoría y tags: menos redondos */
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-category,
:is(body.home .work-list.bento-grid, body.proyectos .work-list) .work-category,
body.servicios .service-tag,
body.case-page .cs-tag { border-radius: 6px; }
body.case-page .cs-category-badge { border-radius: 6px; }
body.kv-page .stemap-text { border-radius: 8px; }

/* 7. Páginas internas: sin el blob rosa/azul del fondo (queda solo en el hero del home) */
body.kv-page { background-image: none; }


/* ==========================================================================
   Sobre mí — versión 2: menos texto corrido, bloques parejos
   Perfil (2 columnas + cifras) · Experiencia (6 actuales en tarjetas + lista
   plegable del resto) · Formación (4 tarjetas, una por institución).
   ========================================================================== */
body.sobre-mi .sm-exp-section,
body.sobre-mi .sm-form-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  border: 0;
  padding-top: var(--kv-pad-y);
  padding-bottom: var(--kv-pad-y);
  --kv-bg-a: #121212;
  --kv-bg-b: #0A0B12;
  --kv-fade: clamp(100px, 18vh, 180px);
}
body.sobre-mi .sm-exp-section  { background-color: #121212; --kv-own: var(--kv-bg-a); --kv-next: var(--kv-bg-b); }
body.sobre-mi .sm-form-section { background-color: #0A0B12; --kv-own: var(--kv-bg-b); --kv-next: var(--kv-bg-a); }
body.sobre-mi .sm-exp-section::before,
body.sobre-mi .sm-form-section::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: 720px; height: 720px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .45;
}
body.sobre-mi .sm-exp-section::before  { left: -340px; top: 20%;   background: radial-gradient(circle, rgba(55,253,181,.22) 0%, rgba(55,253,181,0) 68%); }
body.sobre-mi .sm-form-section::before { right: -320px; top: -200px; background: radial-gradient(circle, rgba(138,43,226,.42) 0%, rgba(138,43,226,0) 68%); }
body.sobre-mi .sm-exp-section::after,
body.sobre-mi .sm-form-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    var(--kv-own) 0,
    transparent var(--kv-fade),
    transparent calc(100% - var(--kv-fade)),
    var(--kv-next) 100%);
}

/* ---------- Perfil ---------- */
body.sobre-mi .sm-profile-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
body.sobre-mi .sm-bio-lead {
  max-width: none;
  margin: 0;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  line-height: 1.6;
  color: #F0F0EC;
}
body.sobre-mi .sm-profile-side { display: grid; gap: 20px; }
body.sobre-mi .sm-profile-side .sm-bio-text {
  max-width: none;
  margin: 0;
  color: #BDBDBD;
}
body.sobre-mi .sm-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid rgba(255,255,255,.09);
}
body.sobre-mi .sm-stat { display: flex; flex-direction: column; gap: 6px; }
body.sobre-mi .sm-stat-value {
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  color: #F5F5F0;
}
body.sobre-mi .sm-stat-label { font-size: var(--text-small); color: #999; }

/* ---------- Experiencia: 6 actuales en tarjetas (3 × 2) ---------- */
body.sobre-mi .sm-exp-list--now {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 0;
  border-top: 0;
}
body.sobre-mi .sm-exp-list--now .sm-exp-item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
}
body.sobre-mi .sm-exp-list--now .sm-exp-role { color: #CFCFCF; font-weight: 400; }

/* Trayectoria anterior: plegable, en filas */
body.sobre-mi .sm-exp-more { margin-top: 20px; }
body.sobre-mi .sm-exp-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #F5F5F0;
  transition: border-color .2s;
}
body.sobre-mi .sm-exp-more > summary::-webkit-details-marker { display: none; }
body.sobre-mi .sm-exp-more > summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--kv-mint); }
body.sobre-mi .sm-exp-more[open] > summary::after { content: "–"; }
body.sobre-mi .sm-exp-more > summary:hover { border-color: rgba(55,253,181,.45); }
body.sobre-mi .sm-exp-more-count { margin-left: 12px; color: #888; letter-spacing: .02em; text-transform: none; }
body.sobre-mi .sm-exp-list--past { display: block; margin-top: 8px; border-top: 0; }
body.sobre-mi .sm-exp-list--past .sm-exp-item {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px;
  padding: 18px 4px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 0;
}
body.sobre-mi .sm-exp-list--past .sm-exp-item:hover { background: none; }
body.sobre-mi .sm-exp-list--past .sm-exp-role { color: #BDBDBD; }

/* ---------- Formación: una tarjeta por institución (2 × 2) ---------- */
body.sobre-mi .sm-formation-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  border-top: 0;
}
body.sobre-mi .sm-formation-item { display: block; padding: 24px; }
body.sobre-mi .sm-formation-institution {
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.3;
  margin-bottom: 14px;
}
body.sobre-mi .sm-formation-courses { list-style: none; margin: 0; padding: 0; }
body.sobre-mi .sm-formation-courses li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
body.sobre-mi .sm-formation-courses li:first-child { border-top: 0; padding-top: 0; }
body.sobre-mi .sm-formation-courses .sm-formation-year { font-size: 12px; padding-top: 2px; }
body.sobre-mi .sm-formation-courses .sm-formation-course { margin: 0; }

@media (max-width: 991px) {
  body.sobre-mi .sm-exp-list--now { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.sobre-mi .sm-profile-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 768px) {
  body.sobre-mi .sm-exp-list--now,
  body.sobre-mi .sm-formation-list { grid-template-columns: 1fr; }
  body.sobre-mi .sm-exp-list--past .sm-exp-item { grid-template-columns: 1fr; gap: 6px; }
  body.sobre-mi .sm-stats { gap: 12px; margin-top: 36px; }
  body.sobre-mi .sm-exp-more > summary { padding: 16px; }
  body.sobre-mi .sm-formation-courses li { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 820px) {
  body.sobre-mi .sm-profile-grid { grid-template-columns: 1fr; gap: 24px; }
}


/* ==========================================================================
   Cortes en páginas internas + header fijo
   ========================================================================== */

/* Título de página: sin halo recortado por el borde de la sección; el tinte
   violeta vive dentro de la tarjeta, así no hay línea de corte a la derecha. */
body.kv-page .sitemap { overflow: visible; }
body.kv-page .sitemap::before { display: none; }
body.kv-page .inner-sitemap {
  background: linear-gradient(115deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.035) 55%, rgba(138,43,226,.14) 100%);
}

/* Primer bloque debajo del título: arranca con el color del fondo y se funde
   hacia su propio tono, en vez de empezar con un corte recto. */
body.sobre-mi .who-we-are-section,
body.servicios .services-section,
body.contacto .contact-section { --kv-own: #121212; }

/* Header fijo */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding-top: 14px;
  padding-bottom: 12px;
  background: linear-gradient(to bottom, #121212 0%, #121212 78%, rgba(18,18,18,0) 100%);
}
@media (max-width: 768px) {
  .header { padding-top: 10px; padding-bottom: 8px; }
}



/* ==========================================================================
   Home — hero: bloque central más ancho
   Las palabras gigantes (DÑO / WEB) hacían que las columnas laterales crecieran
   a su ancho mínimo y el centro quedaba en ~120px. Ahora el tamaño de las
   palabras sigue el ancho del contenedor (cqw) y las columnas se reparten el
   espacio, así el texto central tiene entre ~390px y ~480px.
   (Por debajo de 992px el hero ya se apila en una columna.)
   ========================================================================== */
@media (min-width: 992px) {
  body.home .hero-section > .main-container { container-type: inline-size; }
  body.home .hero-big-text {
    font-size: 8.6vw !important;
    font-size: clamp(4.5rem, 10.2cqw, 13rem) !important;
  }
  body.home .hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .95fr) minmax(0, 1.1fr);
    align-items: center;
  }
  body.home .hero-mid { padding: 0 10px; }
  body.home .hero-paragraph { max-width: none; font-size: clamp(1.4rem, 1.9vw, 2.1rem); }
  body.home .hero-subtitle { max-width: none; }
}


/* ==========================================================================
   Contacto — sin formulario: mail y WhatsApp en dos tarjetas + redes
   ========================================================================== */
body.contacto .contact-intro { max-width: 900px; margin-bottom: 48px; }
body.contacto .contact-text {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 20px;
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: clamp(22px, 2.8vw, 34px);
  line-height: 1.3;
}
body.contacto .contact-location { margin: 0; color: #9A9A9A; font-size: var(--text-body); }

body.contacto .contact-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
body.contacto .contact-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(24px, 3.4vw, 40px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
  color: #fff;
  text-decoration: none;
  transition: border-color .25s, background-color .25s;
}
body.contacto .contact-card:hover { border-color: rgba(55,253,181,.45); background: rgba(255,255,255,.055); }
body.contacto .contact-card-label {
  font-family: 'DM Mono', monospace;
  font-size: var(--text-xsmall);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--kv-mint);
}
body.contacto .contact-card-value {
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: clamp(1.05rem, 2vw, 1.6rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
body.contacto .contact-card-action {
  margin-top: 18px;
  font-size: var(--text-body);
  color: #BDBDBD;
  transition: color .2s;
}
body.contacto .contact-card:hover .contact-card-action { color: var(--kv-mint); }

body.contacto .contact-follow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}
body.contacto .contact-follow-label {
  font-family: 'DM Mono', monospace;
  font-size: var(--text-xsmall);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #8C8C8C;
}
body.contacto .contact-socials { flex-wrap: wrap; gap: 10px; margin-top: 0; }
body.contacto .social-item {
  margin-right: 0;
  padding: 9px 16px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  transition: border-color .2s, background .2s, color .2s;
}
body.contacto .social-item:hover { background: var(--kv-mint); border-color: var(--kv-mint); color: #0A0A0A; }
body.contacto .social-text-2 { text-decoration: none; }

@media (max-width: 768px) {
  body.contacto .contact-cards { grid-template-columns: 1fr; }
  body.contacto .contact-intro { margin-bottom: 32px; }
}
body.contacto .contact-socials { flex-direction: row; justify-content: flex-start; align-self: auto; width: auto; }
body.contacto .contact-socials .social-item { width: auto; }
body.contacto .contact-socials { display: flex; }
body.contacto .contact-socials .social-item { margin: 0; display: flex; }