/*
Theme Name: Palanca
Description: Tema propio de Palanca — agencia de tecnologia y marketing digital. Landing clasica (PHP), sin tema padre ni dependencias de terceros.
Author: Palanca
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: palanca
*/

/* ============================================================
   PALANCA — Brand tokens
   Negro #171717 · Verde oscuro #218157 · Verde neón #00eb8e
   Gris claro #f8f8f8 · Blanco #FFFFFF
   Flat palette · NO gradients · high contrast only
   ============================================================ */
:root{
  --negro:#171717;
  --verde-osc:#218157;
  --neon:#00eb8e;
  --gris:#f8f8f8;
  --blanco:#ffffff;
  --font: 'PP Neue Machina','Space Grotesk','Montserrat',sans-serif;
  --maxw:1200px;
  --radius:18px;
  --radius-sm:12px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--negro);
  color:var(--blanco);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
section{position:relative}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* Angle-bracket motif */
.br{color:var(--neon);font-weight:700}
.hl{color:var(--neon)}

/* Headings */
h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.05}
h2.section-title{font-size:clamp(2rem,4.5vw,3.4rem);margin-bottom:.4em}
.eyebrow{
  display:inline-block;font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--neon);margin-bottom:18px;
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font);font-weight:700;font-size:1rem;
  padding:15px 28px;border-radius:100px;cursor:pointer;border:2px solid transparent;
  transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.btn-primary{background:var(--neon);color:var(--negro)}
.btn-primary:hover{transform:translateY(-3px)}
.btn-ghost{background:transparent;color:var(--blanco);border-color:rgba(255,255,255,.28)}
.btn-ghost:hover{border-color:var(--neon);color:var(--neon)}
.btn-dark{background:var(--negro);color:var(--blanco)}
.btn-dark:hover{background:var(--neon);color:var(--negro);transform:translateY(-3px)}

/* ============================= NAV ============================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(23,23,23,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .3s ease,padding .3s ease;
}
.nav.scrolled{background:rgba(23,23,23,.96)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:74px}
.nav-logo img{height:30px}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a.link{font-size:.95rem;font-weight:500;color:rgba(255,255,255,.82);transition:color .18s}
.nav-links a.link:hover{color:var(--neon)}
.nav-cta{font-size:.9rem;padding:11px 22px}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.hamburger span{width:26px;height:2px;background:var(--blanco);transition:.25s}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile menu */
.mobile-menu{
  position:fixed;inset:74px 0 auto 0;z-index:99;background:var(--negro);
  border-bottom:1px solid rgba(255,255,255,.08);
  transform:translateY(-120%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  padding:22px 24px 30px;
}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{display:block;padding:14px 0;font-size:1.1rem;font-weight:600;border-bottom:1px solid rgba(255,255,255,.06)}
.mobile-menu .btn{width:100%;justify-content:center;margin-top:18px}

/* ============================= HERO ============================= */
.hero{
  min-height:100vh;display:flex;align-items:center;
  padding:130px 0 90px;
  background:var(--negro);
  overflow:hidden;
}
/* subtle flat line-grid texture (SVG lines, no color gradients) */
.hero::before{
  content:"";position:absolute;inset:0;opacity:.6;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'><path d='M64 0H0V64' fill='none' stroke='rgba(255,255,255,0.035)' stroke-width='1'/></svg>");
  background-size:64px 64px;
}
/* flat neon accent block — decorative corner, not a background fill */
.hero::after{
  content:"";position:absolute;top:12%;right:-60px;width:220px;height:220px;
  border:2px solid rgba(0,235,142,.22);border-radius:26px;transform:rotate(12deg);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:2;max-width:920px}
.hero h1{font-size:clamp(2.7rem,7vw,5.4rem);margin:14px 0 22px}
.hero .lead{font-size:clamp(1.05rem,2.2vw,1.35rem);color:rgba(255,255,255,.72);max-width:640px;margin-bottom:16px}
.hero .position{font-size:clamp(1.1rem,2.4vw,1.5rem);font-weight:600;margin-bottom:38px}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hero-link{font-weight:600;color:var(--neon);display:inline-flex;align-items:center;gap:8px}
.hero-link:hover{text-decoration:underline}

/* ============================= SERVICES ============================= */
.services{padding:110px 0;background:var(--negro)}
.section-head{max-width:680px;margin-bottom:54px}
.section-head p{color:rgba(255,255,255,.66);font-size:1.08rem;margin-top:10px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{
  background:#1f1f1f;border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);padding:30px 26px;
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.card:hover{transform:translateY(-8px);border-color:var(--neon);background:#232323}
.card .ico{
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(0,235,142,.10);border:1px solid rgba(0,235,142,.25);margin-bottom:20px;
}
.card .ico svg{width:26px;height:26px;stroke:var(--neon);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{font-size:1.18rem;margin-bottom:8px}
.card p{font-size:.94rem;color:rgba(255,255,255,.6);line-height:1.5}

/* ============================= WHY ============================= */
.why{background:var(--gris);color:var(--negro);padding:110px 0}
.why h2.section-title{color:var(--verde-osc)}
.why .section-head p{color:rgba(23,23,23,.7)}
.why-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center}
.why-list{display:flex;flex-direction:column;gap:26px}
.why-item{display:flex;gap:18px}
.why-item .dot{
  flex:0 0 44px;height:44px;border-radius:12px;background:var(--negro);
  display:flex;align-items:center;justify-content:center;
}
.why-item .dot svg{width:22px;height:22px;stroke:var(--neon);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.why-item h3{font-size:1.18rem;margin-bottom:5px;color:var(--negro)}
.why-item p{color:rgba(23,23,23,.68);font-size:.98rem}
.why-visual{
  background:var(--negro);border-radius:var(--radius);padding:48px 40px;color:var(--blanco);
}
.why-visual .logo-mark{height:34px;margin-bottom:28px}
.why-visual .quote{font-size:1.5rem;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.why-visual .sign{margin-top:26px;font-size:.9rem;color:rgba(255,255,255,.55);letter-spacing:.04em}

/* ============================= STATS ============================= */
.stats{background:var(--negro);padding:78px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.stat .num{font-size:clamp(2.6rem,5vw,3.8rem);font-weight:700;color:var(--neon);letter-spacing:-.03em;line-height:1}
.stat .label{margin-top:10px;font-size:.95rem;color:rgba(255,255,255,.62);font-weight:500}
.stats-note{text-align:center;margin-top:30px;font-size:.78rem;color:rgba(255,255,255,.3);letter-spacing:.03em}

/* ============================= FINAL CTA ============================= */
.cta{padding:120px 0;background:var(--negro);text-align:center}
.cta-box{
  max-width:820px;margin:0 auto;background:#1c1c1c;
  border:1px solid rgba(0,235,142,.28);border-radius:26px;padding:70px 40px;
}
.cta-box h2{font-size:clamp(2rem,4.6vw,3.2rem);margin-bottom:18px}
.cta-box p{color:rgba(255,255,255,.7);font-size:1.1rem;max-width:520px;margin:0 auto 34px}
.cta-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}

/* ============================= FOOTER ============================= */
.footer{background:var(--negro);padding:70px 0 40px;border-top:1px solid rgba(255,255,255,.07)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:50px}
.footer-logo img{height:32px;margin-bottom:18px}
.footer-brand p{color:rgba(255,255,255,.55);font-size:.95rem;max-width:320px}
.footer h4{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:18px;font-weight:600}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.footer ul a{color:rgba(255,255,255,.72);font-size:.96rem;transition:color .18s}
.footer ul a:hover{color:var(--neon)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:26px;border-top:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.4);font-size:.85rem}

/* ============================= PORTFOLIO ============================= */
.portfolio{padding:110px 0;background:var(--negro)}
.filters{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 44px}
.filter-btn{
  padding:10px 20px;border-radius:100px;border:1px solid rgba(255,255,255,.18);
  background:transparent;color:rgba(255,255,255,.75);font-family:var(--font);
  font-weight:600;font-size:.9rem;cursor:pointer;transition:background .18s,color .18s,border-color .18s;
}
.filter-btn:hover{border-color:var(--neon);color:var(--neon)}
.filter-btn.active{background:var(--neon);color:var(--negro);border-color:var(--neon)}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.project{
  background:#1f1f1f;border:1px solid rgba(255,255,255,.07);border-radius:var(--radius);
  overflow:hidden;transition:transform .25s ease,border-color .25s ease;
}
.project:hover{transform:translateY(-8px);border-color:var(--neon)}
.project.hide{display:none}
.project .thumb{
  height:180px;display:flex;align-items:center;justify-content:center;padding:24px;
  border-bottom:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden;
}
.project .thumb::before{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M40 0H0V40' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/></svg>");
  background-size:40px 40px;
}
.project .thumb span{position:relative;z-index:1;font-weight:700;font-size:1.35rem;letter-spacing:-.02em;text-align:center;line-height:1.12}
.thumb.t-verde{background:var(--verde-osc);color:#fff}
.thumb.t-dark{background:#232323;color:var(--neon)}
.thumb.t-black{background:#101010;color:var(--neon)}
.thumb.t-graphite{background:#1a1a1a;color:#fff}
.project .body{padding:22px 22px 26px}
/* La pildora de categoria. Sale en DOS lugares con la misma clase: la tarjeta
   del portfolio (inc/render.php, adentro de .project) y el encabezado de la
   ficha del caso (single-trabajo.php, adentro de .caso-hero). Van los dos
   selectores en la MISMA regla y no una copia en el bloque del caso: son la
   misma pildora, y dos reglas gemelas se desincronizan en el primer retoque.

   El ancestro no se puede sacar para dejar un '.tag' pelado: esta hoja la carga
   el sitio entero y esa clase es demasiado generica para soltarla. */
.project .tag,.caso-hero .tag{
  display:inline-block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--neon);border:1px solid rgba(0,235,142,.3);border-radius:100px;padding:4px 12px;margin-bottom:14px;
}
.project h3{font-size:1.15rem;margin-bottom:8px}
.project .desc{font-size:.92rem;color:rgba(255,255,255,.6);margin-bottom:18px;line-height:1.5}
.project .metric{display:flex;align-items:baseline;gap:8px;border-top:1px solid rgba(255,255,255,.08);padding-top:16px}
.project .metric .val{font-size:1.5rem;font-weight:700;color:var(--neon);letter-spacing:-.02em}
.project .metric .mlabel{font-size:.82rem;color:rgba(255,255,255,.55)}

/* Miniatura con imagen de portada: la foto va a sangre, asi que se apaga el
   relleno del recuadro y su trama, que con una imagen encima solo la ensucian.
   El .thumb sigue siendo el mismo flex de 180px y conserva su color de fondo,
   que es lo que se ve mientras la imagen carga. */
.project .thumb.t-img{padding:0}
.project .thumb.t-img::before{display:none}
.thumb-img{width:100%;height:100%;object-fit:cover;display:block}

/* Un trabajo destacado se marca con el borde ya encendido, el mismo que las
   demas tarjetas estrenan recien al pasarle el mouse por encima. El neon va
   literal y no como var(--neon) porque hace falta con alfa, igual que en el
   borde de .tag de aca arriba: no hay token con las componentes sueltas y esta
   hoja no agrega ninguno.

   La segunda regla no es un adorno: .project:hover esta MAS ARRIBA en la hoja y
   empata en especificidad, asi que sin ella la tarjeta destacada seria la unica
   que no enciende el borde al pasarle el mouse. */
.project.is-destacado{border-color:rgba(0,235,142,.45)}
.project.is-destacado:hover{border-color:var(--neon)}

/* La pildora del estado va pegada a la de categoria —en el html son dos spans
   sin nada en el medio—, asi que la separacion es este margen y no un espacio.
   Es deliberadamente mas apagada que .tag: la categoria es por donde se filtra
   el portfolio y el estado es una nota al pie del caso. */
.project .estado{
  display:inline-block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.16);border-radius:100px;
  padding:3px 10px;margin:0 0 14px 8px;
}

/* ============================= CASO DE ESTUDIO ============================= */
/* Ficha de un trabajo (single-trabajo.php). El nav es fijo y de 74px, asi que
   el padding de arriba tiene que despejarlo: son los mismos 130px que usa
   .hero, para que la ficha arranque a la altura de la portada.

   VAN LAS DOS PROPIEDADES SUELTAS Y NO EL ATAJO padding. El article lleva
   tambien .wrap, que ya define padding:0 24px, y las dos reglas empatan en
   especificidad; como esta va despues, un atajo aca reescribia los cuatro lados
   y le comia a la caja los 24px laterales, con lo que el caso entero quedaba
   pegado al borde de la pantalla. Es la misma trampa que documenta .servicio,
   mas abajo en esta hoja. */
.caso{padding-top:130px;padding-bottom:90px;background:var(--negro)}

/* Encabezado. El ancho va acotado a proposito: una bajada a los 1200px del
   contenedor se lee salteando renglones. */
.caso-hero{max-width:860px;margin-bottom:46px}
.caso-hero h1{font-size:clamp(2.2rem,5.2vw,3.6rem);margin:14px 0 18px}
.caso-bajada{font-size:1.15rem;color:rgba(255,255,255,.72);max-width:70ch}

/* Los botones de aca adentro son .btn + .btn-primary / .btn-ghost, que ya estan
   definidos arriba en la hoja: esta regla solo los acomoda en fila, no los
   vuelve a pintar. */
.caso-links{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:30px}

/* Portada. La imagen o el video van a sangre y el overflow es lo que les
   recorta las esquinas: sin el, el radio del contenedor no se ve. El fondo es
   lo que queda a la vista mientras la imagen carga. */
.caso-portada{border-radius:var(--radius);overflow:hidden;background:#1f1f1f;margin-bottom:54px}
.caso-portada img{width:100%;height:auto;display:block}
.caso-portada iframe{width:100%;aspect-ratio:16/9;border:0;display:block}

/* Ficha de datos (cliente, ano, rol, servicios). auto-fit con minimo de 180px
   porque la cantidad de datos la decide el contenido, no la hoja: con tres se
   reparten el ancho y con seis bajan solos a dos filas. */
.caso-ficha{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;
  background:#1f1f1f;border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);padding:28px;
}
.caso-dato .k{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.caso-dato .v{font-size:1.05rem;font-weight:600;margin-top:6px}

/* Metricas del resultado. El minimo es mas chico que el de la ficha (160 contra
   180) para que cuatro entren en una sola fila; el auto-fit hace que una sola
   metrica ocupe todo el ancho en vez de quedar desbalanceada en un cuarto. */
.caso-metricas{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;margin-top:34px}
.caso-metrica{border-top:1px solid rgba(255,255,255,.08);padding-top:16px}
.caso-metrica .val{font-size:clamp(2rem,4vw,2.8rem);font-weight:700;color:var(--neon);letter-spacing:-.02em;line-height:1.05}
.caso-metrica .mlabel{font-size:.9rem;color:rgba(255,255,255,.55)}
.caso-metrica .detalle{font-size:.85rem;color:rgba(255,255,255,.4);margin-top:6px}

/* Bloques narrativos (desafio, solucion, resultados) y CUALQUIER contenido que
   escriba el editor. El cuerpo lo escribe una persona en el editor, asi que hay
   que vestir etiquetas sueltas: TODAS cuelgan de un ancestro a proposito, porque
   un `p` o un `a` sin ancestro pisarian el sitio entero. Los titulos vuelven al
   blanco pleno: heredarian el .82 del cuerpo y se verian apagados contra el.

   .entry-content VA EN CADA REGLA, y no es un adorno. index.php es la plantilla
   de RESPALDO —cubre las paginas comunes, los resultados de busqueda y el 404,
   porque el tema no tiene page.php, search.php ni 404.php— y ahi el contenido
   salia con `a{color:inherit;text-decoration:none}` del reset global encima: los
   enlaces que escribiera el editor quedaban del mismo color que el texto y sin
   subrayado, o sea INVISIBLES como enlaces. Tampoco tenia tamanos de titulo ni
   sangria de vinetas.

   El margin-top de abajo NO se comparte: son 54px pensados para separar el
   bloque del caso de la seccion que lo precede, y en una pagina comun —donde el
   contenido va justo debajo de su propio titulo— abren un hueco que nadie pidio. */
.caso-bloque{margin-top:54px}
.caso-bloque,.entry-content{line-height:1.7;color:rgba(255,255,255,.82)}
.caso-bloque h2,.entry-content h2{font-size:clamp(1.5rem,3vw,2.1rem);color:var(--blanco);margin-bottom:16px}
.caso-bloque h3,.entry-content h3{font-size:1.25rem;color:var(--blanco);margin:30px 0 10px}
.caso-bloque h4,.entry-content h4{font-size:1.05rem;color:var(--blanco);margin:24px 0 8px}
.caso-bloque p,.entry-content p{margin-bottom:16px}
/* El reset global pone padding 0 en todo, y sin sangria las vinetas quedan
   fuera de la caja y se cortan: por eso la lista se sangra con margen. */
.caso-bloque ul,.entry-content ul{list-style:disc;margin:0 0 16px 22px}
.caso-bloque ol,.entry-content ol{list-style:decimal;margin:0 0 16px 22px}
.caso-bloque li,.entry-content li{margin-bottom:8px}
.caso-bloque strong,.entry-content strong{color:var(--blanco);font-weight:700}
.caso-bloque a,.entry-content a{color:var(--neon)}
.caso-bloque a:hover,.entry-content a:hover{text-decoration:underline}

/* Galeria. auto-fill y no auto-fit: con dos o tres fotos conviene que
   conserven el ancho de una columna y no que se estiren a media pantalla. */
.caso-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:34px}
.caso-galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);display:block}

/* Testimonio del caso. No reusa .tcard: esa tarjeta esta hecha para la franja
   clara de clientes y aca el fondo es negro. */
.caso-testimonio{
  margin-top:54px;background:#1f1f1f;border-left:3px solid var(--neon);
  border-radius:var(--radius);padding:32px 34px;
}
.caso-testimonio .quote{font-size:1.2rem;line-height:1.55;color:rgba(255,255,255,.9)}
.caso-testimonio .who{margin-top:18px;font-size:.9rem;color:rgba(255,255,255,.55)}
.caso-testimonio .name{font-weight:600;color:var(--blanco)}

/* Otros trabajos. Adentro van las mismas tarjetas .project del portfolio, asi
   que aca solo va el remate de la seccion: la grilla se deja en manos de
   .portfolio-grid porque redefinirla desde este ancestro le ganaria en
   especificidad a los media queries y romperia el responsive de las tarjetas. */
.caso-relacionados{margin-top:70px;padding-top:44px;border-top:1px solid rgba(255,255,255,.07)}
.caso-relacionados h2{font-size:1.5rem;margin-bottom:24px}

/* ACA HABIA UN BLOQUE .caso-nav (anterior / siguiente entre casos) y se borro.
   Eran cuatro reglas que ningun elemento del sitio podia usar: ningun PHP del
   tema emite esa clase. single-trabajo.php no dibuja esa navegacion —el
   visitante sigue por .caso-relacionados y por el cierre de aca abajo— asi que
   el bloque viajaba a produccion sin poder aplicarse a nada. Si algun dia se
   decide agregar la navegacion, el CSS se escribe junto con el markup y no
   antes. El banco de C12 cruza las clases .caso-* de esta hoja contra los PHP
   del tema, asi que un bloque huerfano nuevo se pone rojo. */

/* Cierre del caso. Es la idea de .cta-box de la portada pero mas contenida: aca
   el visitante ya leyo el caso entero y el bloque no compite con nada. Lo reusa
   tambien la ficha del servicio (single-servicio.php), que es la hermana corta
   de esta pagina y termina en el mismo llamado. */
.caso-cta{
  margin-top:70px;text-align:center;background:#1c1c1c;
  border:1px solid rgba(0,235,142,.28);border-radius:26px;padding:54px 34px;
}
.caso-cta h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:14px}
.caso-cta p{color:rgba(255,255,255,.7);max-width:520px;margin:0 auto 26px}

/* Paginacion del listado. paginate_links() marca cada enlace con .page-numbers,
   asi que se estila por esa clase y no por la etiqueta: la pagina actual es un
   <span> y el resto son <a>, y de este modo los dos toman la misma pildora.
   .current va despues del :hover porque empatan en especificidad. */
.paginacion{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:54px}
.paginacion .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 14px;
  border:1px solid rgba(255,255,255,.18);border-radius:100px;
  font-size:.9rem;font-weight:600;color:rgba(255,255,255,.75);
  transition:background .18s,color .18s,border-color .18s;
}
.paginacion .page-numbers:hover{border-color:var(--neon);color:var(--neon)}
.paginacion .page-numbers.current{background:var(--neon);color:var(--negro);border-color:var(--neon)}
.paginacion .page-numbers.dots{border-color:transparent}

/* ============================= CLIENTES ============================= */
.clientes{background:var(--gris);color:var(--negro);padding:110px 0}
.clientes h2.section-title{color:var(--verde-osc)}
.clientes .section-head p{color:rgba(23,23,23,.7)}
.logo-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-bottom:70px}
.logo-chip{
  display:flex;align-items:center;justify-content:center;height:82px;background:#fff;
  border:1px solid rgba(23,23,23,.12);border-radius:var(--radius-sm);
  color:rgba(23,23,23,.45);font-weight:700;font-size:1rem;letter-spacing:-.01em;
  transition:color .2s,border-color .2s;text-align:center;padding:8px;
}
.logo-chip:hover{color:var(--verde-osc);border-color:var(--verde-osc)}
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tcard{
  background:#fff;border:1px solid rgba(23,23,23,.1);border-radius:var(--radius);padding:32px 28px;
  transition:transform .25s ease,border-color .25s ease;
}
.tcard:hover{transform:translateY(-6px);border-color:var(--neon)}
.tcard .qmark{font-size:2.6rem;line-height:.6;color:var(--neon);font-weight:700;margin-bottom:14px;display:block}
.tcard .quote{font-size:1rem;color:rgba(23,23,23,.82);line-height:1.6;margin-bottom:24px}
.tcard .who{display:flex;align-items:center;gap:12px}
.tcard .avatar{
  width:44px;height:44px;border-radius:50%;background:var(--negro);color:var(--neon);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex:0 0 44px;
}
.tcard .name{font-weight:600;font-size:.95rem;color:var(--negro)}
.tcard .role{font-size:.82rem;color:rgba(23,23,23,.55)}
.clientes-note{margin-top:40px;font-size:.78rem;color:rgba(23,23,23,.4);letter-spacing:.03em}

/* ============================= REVEAL ANIM ============================= */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* ============================= RESPONSIVE ============================= */
@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:40px 24px}
  .why-grid{grid-template-columns:1fr;gap:44px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .portfolio-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials{grid-template-columns:1fr}
  .logo-strip{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .cards{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .cta-box{padding:50px 26px}
  .why-visual{padding:38px 28px}
  .portfolio-grid{grid-template-columns:1fr}
  .logo-strip{grid-template-columns:repeat(2,1fr)}

  /* En el telefono los botones del caso van uno por fila —apilados y a todo
     el ancho, como los del menu movil— y la galeria baja el minimo de la
     columna para seguir mostrando dos fotos por fila y no una gigante. */
  /* Sueltas por lo mismo que la regla de escritorio: el atajo le comeria los
     24px laterales de .wrap, y en el telefono eso es todo el margen que hay. */
  .caso{padding-top:110px;padding-bottom:66px}
  .caso-links .btn{width:100%;justify-content:center}
  .caso-ficha{padding:22px}
  .caso-galeria{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .caso-testimonio{padding:26px 22px}
  .caso-cta{padding:40px 24px}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ============================= SERVICIO ============================= */
/* Ficha de un servicio (single-servicio.php). Es la hermana corta del caso de
   estudio y por eso comparte con el .caso-bajada y .caso-bloque: son la misma
   clase de pagina, y clonar esos dos estilos con otro nombre hace que dentro de
   un mes se vean distintas sin que nadie lo haya decidido. Lo que estrena
   nombre es lo que el caso no tiene: beneficios, FAQ, precio y trabajos.

   TODOS LOS SELECTORES DE ELEMENTO DE ESTE BLOQUE CUELGAN DE UN .servicio-*, por
   el mismo motivo que los de .caso-bloque: esta hoja la carga el sitio ENTERO,
   asi que un ul, un li, un p o un summary sueltos pisarian de paso la portada,
   /trabajos/ y /servicios/.

   El neon con alfa va escrito literal —rgba(0,235,142,...)— y no como
   var(--neon): los nueve tokens de la hoja son colores enteros, no traen las
   componentes sueltas, y este bloque no agrega ninguno. */

/* El nav es fijo y mide 74px, asi que el padding de arriba tiene que
   despejarlo: son los mismos 130px de .hero y de .caso, para que la ficha
   arranque a la altura de la portada.

   VAN LAS DOS PROPIEDADES SUELTAS Y NO EL ATAJO padding. El article lleva
   tambien .wrap, que ya define padding:0 24px; un atajo aca reescribiria los
   cuatro lados y le comeria a la caja los 24px laterales, con lo que el texto
   quedaria pegado al borde en el telefono. */
.servicio{padding-top:130px;padding-bottom:90px}

/* Encabezado. El ancho va acotado por la misma razon que en .caso-hero: una
   bajada a los 1200px del contenedor se lee salteando renglones. */
.servicio-hero{max-width:860px;margin-bottom:46px}

/* Solo separa el link de volver del icono. No repinta .hero-link: el color y el
   inline-flex ya se los da su propia regla, mas arriba en la hoja. */
.servicio-hero .hero-link{margin-bottom:26px}

/* El recuadro del icono. Es el de .card .ico un poco mas grande, y va aca
   entero porque aquella regla exige el ancestro .card, y ponerle esa clase al
   div del hero le arrastraria de arriba el fondo, el borde, el padding y el
   levantarse al pasar el mouse, que en una ficha no van.

   El SVG que imprime palanca_icono() no trae fill ni stroke propios (ver
   palanca_icono_svg() en el plugin: es un svg con viewBox y un path adentro),
   asi que sin la segunda regla el icono se dibujaria negro sobre negro y la
   pagina abriria con un cuadrado vacio. */
.servicio-hero .ico{
  width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  background:rgba(0,235,142,.10);border:1px solid rgba(0,235,142,.25);margin-bottom:22px;
}
.servicio-hero .ico svg{width:30px;height:30px;stroke:var(--neon);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* El titulo lleva .section-title, pero la regla que le da tamano a esa clase
   esta calificada como h2.section-title y aca el titulo es un h1: sin esta
   linea caeria en el tamano por defecto del navegador. El clamp es el mismo de
   .caso-hero h1. */
.servicio-hero h1{font-size:clamp(2.2rem,5.2vw,3.6rem);margin:14px 0 18px}

/* La portada, cuando el servicio tiene foto cargada. Es la misma caja que
   .caso-portada en la ficha del caso, y le toma el token del redondeo en vez de
   copiarle el valor: son la misma pieza en las dos fichas y con el numero a mano
   se separan en el primer retoque.

   NO REUSA la clase .caso-portada, que seria lo mas corto, por dos motivos: alla
   la caja abre el cuerpo y aca cierra el encabezado, o sea que el margen va del
   otro lado; y .caso-portada viste ademas el iframe del video del caso, que un
   servicio no tiene.

   El fondo oscuro se ve mientras la imagen carga y en el borde de una foto que
   no llene la caja. Va literal y no como token por lo mismo que el neon con alfa
   del encabezado de este bloque: los nueve tokens de la hoja son colores
   enteros y este es un gris de relleno que no usa nadie mas. */
.servicio-foto{border-radius:var(--radius);overflow:hidden;background:#1f1f1f;margin-top:30px}
.servicio-foto img{width:100%;height:auto;display:block}

/* Beneficios. auto-fit con minimo de 300px: la cantidad la decide el contenido,
   asi que con tres se reparten el ancho y con ocho bajan solos a dos columnas,
   sin que la hoja tenga que saber cuantos son.

   La lista va sin vineta nativa y con un cuadradito neon dibujado en el
   ::before. Es por lo mismo que .caso-bloque ul se sangra a mano: el reset
   global pone padding 0 en todo, y una vineta nativa sin sangria queda fuera de
   la caja y se corta. Aca ademas el marcador es una caja y no un caracter, asi
   que no depende de la tipografia. */
.servicio-beneficios{margin-top:54px}
.servicio-beneficios h2{font-size:1.5rem;margin-bottom:22px}
.servicio-beneficios ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 30px}
.servicio-beneficios li{
  position:relative;padding:11px 0 11px 26px;line-height:1.55;
  color:rgba(255,255,255,.82);border-top:1px solid rgba(255,255,255,.07);
}
.servicio-beneficios li::before{content:"";position:absolute;left:0;top:1.15em;width:9px;height:9px;border-radius:3px;background:var(--neon)}

/* Preguntas frecuentes. Es un details nativo por pregunta: abre y cierra sin
   una linea de JS, anda con el teclado y con el lector de pantalla, y si el CSS
   no cargara seguiria siendo una lista de preguntas que se pueden abrir.

   La flecha propia obliga a apagar el triangulo nativo, y eso son TRES cosas
   distintas segun el navegador: display:flex en el summary lo saca en Chrome
   (deja de ser un list-item), list-style:none en Firefox y la pseudo
   ::-webkit-details-marker en Safari. Con una sola quedan dos marcadores.

   El chevron es un cuadrado con dos bordes girado 45 grados, no un caracter:
   una cruz o una flecha de texto se la lee en voz alta el lector de pantalla y
   ademas cambia de forma con la tipografia. Al abrirse gira a -135 y baja los
   dos pixeles que el giro le corre al centro optico. */
.servicio-faq{margin-top:54px}
.servicio-faq h2{font-size:1.5rem;margin-bottom:22px}
.servicio-faq details{border-top:1px solid rgba(255,255,255,.08)}
.servicio-faq details:last-of-type{border-bottom:1px solid rgba(255,255,255,.08)}
.servicio-faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  list-style:none;cursor:pointer;padding:18px 2px;
  font-weight:600;color:var(--blanco);transition:color .18s;
}
.servicio-faq summary::-webkit-details-marker{display:none}
.servicio-faq summary:hover{color:var(--neon)}
.servicio-faq summary::after{
  content:"";flex:0 0 9px;width:9px;height:9px;margin-top:-4px;
  border-right:2px solid var(--neon);border-bottom:2px solid var(--neon);
  transform:rotate(45deg);transition:transform .18s;
}
.servicio-faq details[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.servicio-faq details p{padding:0 2px 22px;max-width:70ch;line-height:1.7;color:rgba(255,255,255,.72)}

/* Precio orientativo. Es inline-block a proposito: el texto es libre y va de "a
   convenir" a "desde USD 1.200", asi que la caja se ajusta a lo que haya en vez
   de estirarse a todo el ancho con el dato perdido contra la izquierda. */
.servicio-precio{
  display:inline-block;margin-top:40px;padding:14px 22px;
  background:#1c1c1c;border:1px solid rgba(0,235,142,.28);border-radius:var(--radius-sm);
  color:var(--neon);font-weight:700;font-size:1.05rem;
}

/* Trabajos hechos con este servicio. Adentro van las mismas tarjetas .project
   del portfolio, asi que aca solo va el remate de la seccion: la grilla se deja
   en manos de .portfolio-grid, porque redefinirla desde este ancestro le ganaria
   en especificidad a los media queries y las tarjetas se quedarian en tres
   columnas en el telefono.

   No reusa .caso-relacionados aunque hoy midan lo mismo: son dos paginas
   distintas y compartir la clase ata los dos margenes para siempre, que es lo
   que se descubre cuando alguien mueve uno y se le mueve el otro. */
.servicio-casos{margin-top:70px;padding-top:44px;border-top:1px solid rgba(255,255,255,.07)}
.servicio-casos h2{font-size:1.5rem;margin-bottom:24px}

/* En el telefono la ficha se aprieta igual que el caso (110/66 en vez de
   130/90) y el precio pasa a ocupar la fila entera, como los botones del caso:
   una cajita chica alineada a la izquierda se lee como un boton que no anda.

   Va en su propio @media y no adentro del bloque de mas arriba para que este
   agregado no toque ni una linea de las que ya estaban. */
@media (max-width:720px){
  .servicio{padding-top:110px;padding-bottom:66px}
  .servicio-hero{margin-bottom:34px}
  .servicio-beneficios,.servicio-faq{margin-top:40px}
  .servicio-casos{margin-top:54px;padding-top:34px}
  .servicio-precio{display:block;text-align:center}
}