/* =========================================================
   GVC MULTISERVICIOS — Sistema de diseño (v2.1)
   Azul corporativo + slate, fiel a la identidad original.
   Efectos mejorados: glow, parallax sutil, micro-interacciones.
   ========================================================= */

:root{
  --ink:        #0f172a;   /* slate-900 */
  --ink-soft:   #1e293b;   /* slate-800 */
  --paper:      #f8fafc;   /* slate-50 */
  --paper-2:    #e2e8f0;   /* slate-200 */
  --paper-3:    #cbd5e1;   /* slate-300 */
  --steel:      #2563eb;   /* blue-600 — color de marca */
  --steel-dark: #1d4ed8;   /* blue-700 */
  --steel-light:#3b82f6;   /* blue-500 */
  --hazard:     #06b6d4;   /* cyan-500 — acento secundario */
  --hazard-dark:#0891b2;
  --muted:      #64748b;   /* slate-500 */
  --muted-light:#94a3b8;   /* slate-400 */
  --line:       rgba(15,23,42,0.08);
  --line-dark:  rgba(255,255,255,0.14);
  --radius:     16px;
  --radius-sm:  10px;
  --radius-pill: 50px;
  --shadow:     0 20px 40px rgba(15,23,42,0.12);
  --shadow-blue:0 12px 30px rgba(37,99,235,0.28);
  --shadow-blue-lg: 0 24px 55px rgba(37,99,235,0.32);
  --ease:       cubic-bezier(.22,1,.36,1);

  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Inter', system-ui, -apple-system, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); line-height:1.6; font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); margin:0; line-height:1.15; letter-spacing:-0.01em; font-weight:700; }
p{ margin:0 0 1rem; }
button{ font-family:inherit; }
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }
.mono{ font-family:var(--font-mono); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* --- reveal on scroll --- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* --- eyebrow / labels --- */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:13px; letter-spacing:.04em;
  color:var(--steel); margin-bottom:14px; font-weight:600;
}
.eyebrow::before{ content:""; width:22px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--steel),var(--hazard)); display:inline-block; }

/* =============== TOP BAR / NAV =============== */
/* Sin backdrop-filter en el header (rompe el menú móvil fijo) */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(15,23,42,0.98);
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
  transition:box-shadow .3s;
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ height:38px; width:auto; transition:transform .35s var(--ease); }
.brand:hover img{ transform:scale(1.08) rotate(-2deg); }
.brand-text{ color:#fff; font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:.01em; }
.nav-links{ display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0; }
.nav-links a{ color:#cbd5e1; font-size:14px; font-weight:500; transition:color .25s; position:relative; }
.nav-links a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:var(--steel-light);
  transition:width .3s var(--ease);
}
.nav-links a:not(.nav-cta):hover::after{ width:100%; }
.nav-links a:hover{ color:#fff; }
.nav-cta{
  background:var(--steel); color:#fff !important; padding:10px 22px; border-radius:var(--radius-pill);
  font-weight:600; font-size:13px; transition:all .35s var(--ease); box-shadow:0 4px 14px rgba(37,99,235,0.3);
}
.nav-cta:hover{ background:var(--steel-dark); transform:translateY(-2px); box-shadow:var(--shadow-blue-lg); }
.nav-toggle{ display:none; background:none; border:0; color:#fff; font-size:22px; cursor:pointer; }
@media (max-width:860px){
  .nav-links{ position:fixed; inset:64px 0 0 0; background:var(--ink); flex-direction:column; padding:32px 24px; gap:22px; transform:translateY(-110%); transition:transform .4s var(--ease); }
  .nav-links.open{ transform:translateY(0); }
  .nav-toggle{ display:block; }
}

/* =============== HERO =============== */
.hero{
  background:linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%); color:#fff; position:relative; overflow:hidden;
  padding:64px 0 0;
}
.hero::before{
  content:""; position:absolute; top:-50%; right:-50%; width:200%; height:200%;
  background:radial-gradient(circle, rgba(37,99,235,0.18) 0%, transparent 70%);
  animation:rotateBg 26s linear infinite; pointer-events:none;
}
.hero::after{
  content:""; position:absolute; bottom:-30%; left:-20%; width:70%; height:70%;
  background:radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 70%);
  animation:floatBg 14s ease-in-out infinite alternate; pointer-events:none;
}
@keyframes rotateBg{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes floatBg{ from{ transform:translate(0,0); } to{ transform:translate(40px,-30px); } }
.hero-grid{
  position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:end; padding-bottom:56px;
}
.hero-kicker{ font-family:var(--font-mono); font-size:13px; letter-spacing:.06em; color:var(--muted-light); margin-bottom:18px; font-weight:600; }
.hero h1{
  font-size:clamp(2.4rem, 5vw, 4rem); font-weight:800; max-width:15ch;
  background:linear-gradient(135deg, #fff 0%, var(--muted-light) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero .lead{ color:#cbd5e1; font-size:1.08rem; max-width:46ch; margin:22px 0 30px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 26px; font-weight:600; font-size:14px;
  border-radius:var(--radius-pill); border:1px solid transparent; cursor:pointer; transition:all .35s var(--ease);
  position:relative; overflow:hidden;
}
.btn::before{
  content:""; position:absolute; inset:0; background:rgba(255,255,255,0.25); transform:translateX(-100%);
  transition:transform .5s var(--ease);
}
.btn:hover::before{ transform:translateX(0); }
.btn-hazard{ background:var(--steel); color:#fff; }
.btn-hazard:hover{ background:var(--steel-dark); transform:translateY(-3px); box-shadow:var(--shadow-blue-lg); }
.btn-ghost{ border-color:rgba(255,255,255,.3); color:#fff; background:rgba(255,255,255,.06); }
.btn-ghost:hover{ border-color:#fff; transform:translateY(-3px); background:rgba(255,255,255,.14); }
.btn-steel{ background:var(--ink-soft); color:#fff; }
.btn-steel:hover{ background:var(--ink); transform:translateY(-3px); box-shadow:var(--shadow); }

/* Ficha técnica -> panel de cristal con degradado azul (elemento distintivo) */
.spec-sheet{
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius);
  padding:26px 28px; position:relative; backdrop-filter:blur(14px); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.spec-sheet:hover{ transform:translateY(-4px); box-shadow:0 30px 60px rgba(0,0,0,0.35); }
.spec-sheet::before{
  content:"RESUMEN"; position:absolute; top:-12px; left:24px;
  background:linear-gradient(90deg,var(--steel),var(--hazard)); color:#fff;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; padding:4px 14px; font-weight:700; border-radius:var(--radius-pill);
}
.spec-row{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.1); transition:padding-left .3s var(--ease); }
.spec-row:hover{ padding-left:6px; }
.spec-row:last-child{ border-bottom:0; }
.spec-label{ color:var(--muted-light); font-size:12.5px; letter-spacing:.02em; }
.spec-value{ font-family:var(--font-display); font-size:1.6rem; font-weight:800; color:#fff; }
.spec-value span{
  background:linear-gradient(135deg, var(--steel-light), var(--hazard));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* =============== SERVICE STRIP =============== */
.service-strip{ background:var(--paper); margin-top:-46px; position:relative; z-index:5; }
.service-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.service-card{ background:#fff; padding:30px 26px; border-radius:var(--radius); box-shadow:var(--shadow); transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.service-card:hover{ transform:translateY(-8px); box-shadow:0 30px 55px rgba(15,23,42,0.18); }
.service-card .icon{ color:var(--steel); margin-bottom:14px; width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:#eff6ff; border-radius:var(--radius-sm); transition:transform .4s var(--ease), background .4s; }
.service-card:hover .icon{ transform:scale(1.12) rotate(-6deg); background:linear-gradient(135deg,#dbeafe,#cffafe); }
.service-card h3{ font-size:1.05rem; margin-bottom:8px; }
.service-card p{ color:var(--muted); font-size:.92rem; margin:0; }
@media (max-width:760px){ .service-cards{ grid-template-columns:1fr; } .hero-grid{ grid-template-columns:1fr; } }

/* =============== SECTION GENERIC =============== */
section{ padding:96px 0; }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(1.8rem,3.4vw,2.6rem); }
.section-head p{ color:var(--muted); margin-top:14px; font-size:1.02rem; }

/* =============== ABOUT =============== */
.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center; }
.about-media{ position:relative; }
.about-media img{ border-radius:20px; box-shadow:var(--shadow); transition:transform .5s var(--ease); }
.about-media:hover img{ transform:scale(1.02); }
.about-media::after{
  content:""; position:absolute; top:20px; left:20px; right:-20px; bottom:-20px; z-index:-1;
  border-radius:20px; background:linear-gradient(135deg, var(--steel), var(--hazard)); opacity:.15;
  transition:opacity .4s;
}
.about-media:hover::after{ opacity:.3; }
.about-media{ margin-right:20px; margin-bottom:20px; }
.about-text p{ color:var(--ink-soft); }
.about-text .lead-line{ font-size:1.15rem; font-weight:700; color:var(--ink); margin-bottom:14px; }
@media (max-width:860px){ .about-grid{ grid-template-columns:1fr; } }

/* =============== SERVICIOS GRID =============== */
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.service-tile{ background:#fff; padding:28px 24px; border-radius:var(--radius); border:1px solid var(--line); transition:all .4s var(--ease); }
.service-tile:hover{ border-color:transparent; box-shadow:var(--shadow-blue-lg); transform:translateY(-6px); }
.service-tile .tile-index{
  font-family:var(--font-mono); font-size:13px; font-weight:800; margin-bottom:14px;
  background:linear-gradient(135deg,var(--steel),var(--hazard)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.service-tile h4{ font-size:1rem; margin-bottom:10px; }
.service-tile ul{ margin:0; padding:0; list-style:none; color:var(--muted); font-size:.88rem; }
.service-tile li{ padding:3px 0; position:relative; padding-left:14px; transition:color .3s, padding-left .3s; }
.service-tile li::before{ content:"—"; position:absolute; left:0; color:var(--steel); }
.service-tile:hover li{ padding-left:18px; }
@media (max-width:960px){ .services-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .services-grid{ grid-template-columns:1fr; } }

/* =============== GALERÍA / PORTAFOLIO =============== */
.gallery-toolbar{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:36px; }
.filter-row{ display:flex; gap:8px; flex-wrap:wrap; }
.filter-chip{
  font-family:var(--font-mono); font-size:12.5px; padding:9px 16px; border:1px solid var(--line);
  background:#fff; cursor:pointer; color:var(--muted); border-radius:var(--radius-pill); transition:all .3s var(--ease);
}
.filter-chip.active, .filter-chip:hover{ border-color:var(--steel); color:#fff; background:var(--steel); transform:translateY(-2px); box-shadow:0 6px 16px rgba(37,99,235,0.25); }

.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.work-card{
  position:relative; background:#fff; border:1px solid var(--line); overflow:hidden; border-radius:20px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.work-card:hover{ transform:translateY(-8px); box-shadow:0 30px 55px rgba(15,23,42,0.2); }
.work-thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--paper-2); }
.work-thumb::after{
  content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,23,42,.55), transparent 55%);
  opacity:0; transition:opacity .4s;
}
.work-card:hover .work-thumb::after{ opacity:1; }
.work-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.work-card:hover .work-thumb img{ transform:scale(1.1); }
.work-tag{
  position:absolute; top:14px; left:14px; background:linear-gradient(135deg,var(--steel),var(--hazard)); color:#fff; font-family:var(--font-mono);
  font-size:11px; font-weight:700; letter-spacing:.02em; padding:5px 12px; border-radius:var(--radius-pill); display:flex; align-items:center; gap:5px;
  z-index:2; animation:pulseTag 2.4s ease-in-out infinite;
}
@keyframes pulseTag{ 0%,100%{ box-shadow:0 0 0 0 rgba(37,99,235,.5);} 50%{ box-shadow:0 0 0 6px rgba(37,99,235,0);} }
.work-tag::before{ content:"●"; font-size:8px; }
.work-code{ position:absolute; top:14px; right:14px; background:rgba(15,23,42,.7); backdrop-filter:blur(6px); color:#fff; font-family:var(--font-mono); font-size:11px; padding:5px 10px; border-radius:var(--radius-pill); z-index:2; }
.work-body{ padding:20px 22px 22px; }
.work-cat{ font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--steel); }
.work-title{ font-size:1.08rem; margin:8px 0 6px; }
.work-meta{ display:flex; justify-content:space-between; align-items:center; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.work-date{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); }
.work-link{ font-size:12.5px; font-weight:700; color:var(--steel); display:flex; align-items:center; gap:4px; }
.work-link svg{ width:13px; height:13px; transition:transform .3s var(--ease); }
.work-card:hover .work-link svg{ transform:translateX(5px); }

@media (max-width:960px){ .work-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .work-grid{ grid-template-columns:1fr; } }

.load-more-wrap{ display:flex; justify-content:center; margin-top:40px; }

/* =============== STATS =============== */
.stats-band{ background:linear-gradient(135deg, var(--ink) 0%, var(--steel-dark) 100%); color:#fff; position:relative; overflow:hidden; }
.stats-band::before{
  content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size:20px 20px;
  opacity:.5;
}
.stats-grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stats-grid > div{ transition:transform .35s var(--ease); }
.stats-grid > div:hover{ transform:translateY(-4px); }
.stat-num{ font-family:var(--font-display); font-size:clamp(2rem,4vw,2.9rem); font-weight:800; }
.stat-num .hz{ background:linear-gradient(135deg,#fff,var(--hazard)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-lbl{ font-size:.86rem; color:#cbd5e1; margin-top:6px; }
@media (max-width:760px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }

/* =============== ALIADOS (carrusel infinito) =============== */
.partners-viewport{
  overflow:hidden; position:relative; padding:10px 0;
  -webkit-mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.partners-track{ display:flex; align-items:center; gap:64px; width:max-content; animation:partnersScroll 32s linear infinite; }
.partners-track:hover{ animation-play-state:paused; }
.partners-track img{ height:40px; width:auto; filter:grayscale(1); opacity:.55; transition:.3s var(--ease); flex:0 0 auto; }
.partners-track img:hover{ filter:none; opacity:1; transform:scale(1.1); }
@keyframes partnersScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (max-width:640px){ .partners-track{ gap:36px; } .partners-track img{ height:30px; } }
@media (prefers-reduced-motion: reduce){ .partners-track{ animation:none; overflow-x:auto; } }

/* =============== CONTACTO =============== */
.contact-wrap{ background:var(--ink); color:#fff; border-radius:24px; overflow:hidden; display:grid; grid-template-columns:1fr 1.1fr; box-shadow:var(--shadow); transition:box-shadow .4s; }
.contact-wrap:hover{ box-shadow:0 30px 70px rgba(15,23,42,0.25); }
.contact-info{ padding:52px 44px; background:linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%); }
.contact-info h2{ color:#fff; font-size:1.9rem; }
.contact-item{ display:flex; gap:14px; margin-top:22px; transition:transform .3s var(--ease); }
.contact-item:hover{ transform:translateX(4px); }
.contact-item .ic{ color:var(--hazard); flex:0 0 auto; margin-top:2px; width:36px; height:36px; background:rgba(255,255,255,0.08); border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; }
.contact-item h6{ font-size:.8rem; color:var(--muted-light); margin-bottom:3px; font-weight:600; }
.contact-item p{ margin:0; color:#e7ebed; }
.contact-form{ background:#fff; color:var(--ink); padding:52px 44px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.8rem; color:var(--muted); margin-bottom:6px; font-weight:600; }
.field input, .field textarea{
  width:100%; border:1px solid var(--line); background:var(--paper); padding:12px 16px; font-family:var(--font-body);
  font-size:.95rem; border-radius:var(--radius-sm); transition:border-color .3s, box-shadow .3s, transform .2s;
}
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--steel); box-shadow:0 0 0 4px rgba(37,99,235,0.14); transform:translateY(-1px); }
@media (max-width:860px){ .contact-wrap{ grid-template-columns:1fr; } }

/* =============== FOOTER =============== */
.site-footer{ background:var(--ink); color:var(--muted-light); padding:48px 0 24px; border-top:1px solid rgba(255,255,255,0.08); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.footer-grid h6{ color:#fff; font-size:.85rem; font-weight:700; margin-bottom:14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; }
.footer-grid li{ margin-bottom:8px; }
.footer-grid a{ transition:color .25s, padding-left .25s; display:inline-block; }
.footer-grid a:hover{ color:#fff; padding-left:4px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.08); margin-top:34px; padding-top:20px; font-size:.82rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }

/* =============== WHATSAPP FLOTANTE =============== */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:900; background:#25d366; color:#fff; width:58px; height:58px;
  border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,.28);
  transition:transform .3s var(--ease), box-shadow .3s;
  animation:floatPulse 2.6s ease-in-out infinite;
}
.wa-float:hover{ transform:scale(1.12); box-shadow:0 14px 34px rgba(0,0,0,.35); animation-play-state:paused; }
@keyframes floatPulse{ 0%,100%{ box-shadow:0 10px 26px rgba(0,0,0,.28), 0 0 0 0 rgba(37,211,102,.4);} 50%{ box-shadow:0 10px 26px rgba(0,0,0,.28), 0 0 0 10px rgba(37,211,102,0);} }

/* =============== LIGHTBOX (galería individual) =============== */
.lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.95); z-index:2000; display:none;
  align-items:center; justify-content:center; padding:24px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(1100px,92vw); max-height:86vh; object-fit:contain; border-radius:14px; box-shadow:0 25px 50px rgba(0,0,0,.4); }
.lb-close, .lb-prev, .lb-next{
  position:absolute; background:rgba(255,255,255,.15); backdrop-filter:blur(10px); border:none; color:#fff;
  width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .3s var(--ease);
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover{ background:var(--steel); transform:scale(1.12); }
.lb-close{ top:20px; right:20px; }
.lb-prev{ left:20px; top:50%; transform:translateY(-50%); }
.lb-next{ right:20px; top:50%; transform:translateY(-50%); }
.lb-counter{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); color:#cbd5e1; font-family:var(--font-mono); font-size:13px; }

/* =============== PAGE HEADER (galeria.html) =============== */
.page-hero{ background:linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%); color:#fff; padding:150px 0 60px; position:relative; overflow:hidden; }
.page-hero::before{
  content:""; position:absolute; top:-50%; right:-50%; width:200%; height:200%;
  background:radial-gradient(circle, rgba(37,99,235,0.14) 0%, transparent 70%); animation:rotateBg 24s linear infinite;
}
.page-hero .container{ position:relative; }
.page-hero .eyebrow{ color:var(--hazard); }
.back-link{ display:inline-flex; align-items:center; gap:6px; color:#cbd5e1; font-size:13px; margin-bottom:22px; transition:gap .3s, color .3s; }
.back-link:hover{ color:#fff; gap:10px; }
.page-hero h1{
  font-size:clamp(2rem,4.2vw,3.1rem); max-width:20ch;
  background:linear-gradient(135deg, #fff 0%, var(--muted-light) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.page-hero .meta-row{ display:flex; gap:24px; margin-top:20px; flex-wrap:wrap; }
.page-hero .meta-row span{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted-light); }
.page-hero .meta-row b{ color:#fff; }

.grid-gallery{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:20px; }
.grid-gallery .g-item{ position:relative; aspect-ratio:16/9; overflow:hidden; cursor:pointer; background:var(--paper-2); border-radius:20px; transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.grid-gallery .g-item:hover{ transform:translateY(-6px); box-shadow:0 26px 50px rgba(15,23,42,0.2); }
.grid-gallery .g-item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.grid-gallery .g-item:hover img{ transform:scale(1.1); }
.grid-gallery .g-item::after{ content:"＋"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:#fff; background:linear-gradient(to top, rgba(15,23,42,.85), transparent 60%); opacity:0; transition:opacity .35s; }
.grid-gallery .g-item:hover::after{ opacity:1; }
@media (max-width:760px){ .grid-gallery{ grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); } }

.empty-state{ text-align:center; padding:60px 20px; color:var(--muted); }

/* Skeleton loading */
.skel{ background:linear-gradient(90deg, var(--paper-2) 25%, #f1f5f9 37%, var(--paper-2) 63%); background-size:400% 100%; animation:skel-loop 1.4s ease infinite; border-radius:20px; }
@keyframes skel-loop{ 0%{background-position:100% 0;} 100%{background-position:0 0;} }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--steel); outline-offset:2px;
}

/* --- Campo trampa antispam: invisible para las personas, visible
   para los robots que completan todos los inputs del formulario.
   No se usa display:none porque algunos bots lo detectan. --- */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px; height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
}