/*
Theme Name: Vinilgraph
Theme URI: https://vinilgraph.com.ar
Author: Vinilgraph
Description: Theme a medida para Vinilgraph — Servicios gráficos y cartelería en Rosario. Convertido desde el diseño original hecho en Claude.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: vinilgraph
*/

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #ffffff;
  font-family: 'Inter', system-ui, sans-serif;
}

img { max-width: 100%; }

a { -webkit-tap-highlight-color: transparent; }

/* Hover states (reemplazan los style-hover del artifact original) */
.vg-hover-card:hover { background: rgba(198,24,111,0.28); border-color: #C6186F; transform: translateY(-6px); box-shadow: 0 20px 44px rgba(150,13,83,0.45); }
.vg-hover-circle:hover { background: #C6186F; transform: scale(1.08); }
.vg-hover-link:hover { color: #fff; }
.vg-hover-btn-pink:hover { background: #C6186F; }
.vg-hover-btn-white:hover { background: #f0eef0; transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,0.25); }
.vg-hover-border:hover { border-color: #960D53; }
.vg-hover-lift:hover { transform: translateY(-5px); box-shadow: 0 28px 60px rgba(0,0,0,0.22); }
.vg-hover-lift-light:hover { border-color: #960D53; transform: translateY(-5px); }
.vg-hover-zoom:hover img { transform: scale(1.04); }
.vg-hover-border-pink:hover { border-color: rgba(150,13,83,0.4); }
.vg-hover-white:hover { background: rgba(255,255,255,0.08); }

/* Tarjeta clara con lift + tinte rosa al hover (igual espíritu que
   .vg-hover-card, pero pensada para fondo blanco en vez de vidrio oscuro). */
.vg-hover-service-card { border: 1px solid transparent; transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.vg-hover-service-card:hover { background: rgba(150,13,83,0.06); border-color: rgba(150,13,83,0.22); transform: translateY(-6px); box-shadow: 0 20px 40px rgba(150,13,83,0.16); }
.vg-service-icon { transition: background .25s ease; }
.vg-service-icon svg { transition: stroke .25s ease; }
.vg-hover-service-card:hover .vg-service-icon { background: #960D53; }
.vg-hover-service-card:hover .vg-service-icon svg { stroke: #fff; }

@keyframes vg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Lightbox */
.vg-lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(8,8,10,0.92); display: none; align-items: center; justify-content: center; padding: 28px; cursor: zoom-out; }
.vg-lightbox.is-open { display: flex; }
.vg-lightbox img { max-width: min(1100px,92vw); max-height: 88vh; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }

/* Header transición sólida al hacer scroll */
.vg-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; font-family: 'Inter', system-ui, sans-serif; background: linear-gradient(180deg,rgba(8,8,10,0.62) 0%,rgba(8,8,10,0.28) 55%,rgba(8,8,10,0) 100%); border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease; }
.vg-header.is-solid { background: rgba(13,13,15,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: rgba(255,255,255,0.08); }

.vg-mobile-toggle-bar { width: 17px; height: 2px; background: #fff; display: block; border-radius: 2px; }

/* Logo: el archivo trae el isotipo + "VINILGRAPH" + la bajada de texto en
   una sola imagen muy apaisada (1214x144). A 54px de alto ya mide ~455px
   de ancho, así que en mobile hay que achicarlo para que no tape el menú. */
.vg-logo { height: 54px; }
@media (max-width: 939px) {
  .vg-logo { height: 24px; }
}

/* Offset del header fijo cuando está visible la barra de admin de WordPress */
body.admin-bar .vg-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .vg-header { top: 46px; }
}

@media (max-width: 939px) {
  .vg-nav-desktop { display: none !important; }
  .vg-mobile-controls { display: flex !important; }
}
@media (min-width: 940px) {
  .vg-mobile-controls { display: none !important; }
  .vg-mobile-panel { display: none !important; }
}

/* Home en mobile: el mapa de contacto no necesita ser tan alto en una
   pantalla angosta — en desktop ocupa la mitad del bloque de contacto,
   en el celular es una columna más y 460px es demasiado scroll. */
@media (max-width: 680px) {
  .vg-mapa-embed,
  .vg-mapa-embed iframe { min-height: 280px !important; }
}

/* Ficha técnica de especificaciones (página "Ya tengo diseño"): lista en
   dos columnas estilo hoja impresa, que se apila en una sola columna en
   mobile. column-fill:balance reparte los 8 puntos 4 y 4. */
.vg-specs-sheet { columns: 2; column-gap: 48px; }
.vg-specs-row { break-inside: avoid; -webkit-column-break-inside: avoid; }
@media (max-width: 720px) {
  .vg-specs-sheet { columns: 1; }
}