/* =====================================================================
   Radron Valencia — sistema de diseño
   Dirección: GALERÍA. Casi monocromo a propósito: el único color de la
   página lo pone el material aéreo del cliente. Sin acento de neón, sin
   fondo negro con "pop" naranja (el patrón típico de IA), sin arcoíris.
   La marca es un placeholder neutro hasta que llegue el logo del cliente.
   Motion: curvas fuertes, <300ms, respetando reduced-motion.
   ===================================================================== */

:root {
  /* Neutros elegidos (ni blanco puro ni crema): grises con leve sesgo frío */
  --paper:    #ECEDEC;   /* fondo base */
  --paper-2:  #F6F6F5;   /* superficie elevada (tarjetas) */
  --paper-3:  #E3E4E3;   /* superficie alterna */
  --ink:      #121417;   /* texto principal / botones */
  --ink-2:    #2B2F34;
  --soft:     #5F656B;   /* texto secundario */
  --faint:    #8B9096;   /* texto terciario */
  --line:     #D3D5D4;
  --line-2:   #C2C5C4;

  /* Motion */
  --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);

  --wrap: 1180px;
  --r: 4px;              /* radio mínimo: galería, no "rounded-lg" por defecto */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: "Archivo", system-ui, sans-serif; margin: 0; text-wrap: balance; }
p { margin: 0; }
img, video { max-width: 100%; display: block; }

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--soft); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 16px; }
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.lbl {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--faint); display: inline-block;
}
.muted { color: var(--faint); }
.note { font-size: 14px; }

/* ---------- marca: placeholder neutro, se sustituye por el logo del cliente ---------- */
.brand {
  font-family: "Archivo", sans-serif; font-weight: 700;
  font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
}
.brand img { height: 30px; width: auto; }

/* ---------- botones: tinta sólida, sin color de relleno ---------- */
.btn {
  display: inline-block; font-family: "Archivo", sans-serif; font-weight: 600;
  font-size: 14.5px; letter-spacing: 0.02em;
  background: var(--ink); color: var(--paper);
  padding: 13px 24px; border: 1px solid var(--ink); border-radius: var(--r);
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-sm { padding: 9px 16px; font-size: 13px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--ink-2); color: var(--paper); }
  .btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
}

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(236,237,236,0.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav-in { display: flex; align-items: center; gap: 22px; padding-top: 15px; padding-bottom: 15px; }
.nav nav { margin-left: auto; display: flex; gap: 24px; }
.nav nav a { font-size: 14.5px; color: var(--soft); }
.nav nav a:hover { color: var(--ink); }
@media (max-width: 640px) { .nav nav { display: none; } .nav .btn { margin-left: auto; } }

/* ---------- hero: texto sobre papel, vídeo debajo como panel ---------- */
.hero { padding-top: 18px; }
.hud {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding-bottom: 46px;
  font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.08em;
  color: var(--faint);
}
.hud .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.hud .sep { opacity: 0.4; }

.hero h1 { font-size: clamp(40px, 8vw, 92px); font-weight: 700; line-height: 0.98; letter-spacing: -0.035em; }
.hero .lead { margin-top: 20px; font-size: clamp(16px, 2vw, 20px); color: var(--soft); max-width: 44ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }

/* panel de vídeo a pantalla: la pieza protagonista */
.hero-media { margin-top: 62px; background: var(--ink); overflow: hidden; }
.reel-video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.reel-ph {
  aspect-ratio: 16 / 9; background: var(--paper-3);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--faint);
}
.reel-ph p { font-size: 13.5px; }

/* ---------- secciones ---------- */
.sec { padding: 88px 0; }
.sec.alt { background: var(--paper-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec h2 { font-size: clamp(28px, 4.2vw, 46px); font-weight: 700; letter-spacing: -0.025em; margin-top: 14px; line-height: 1.05; }
.sec-lead { margin-top: 16px; color: var(--soft); max-width: 52ch; }

/* servicios */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1px; margin-top: 40px; background: var(--line); border: 1px solid var(--line); }
.card { background: var(--paper-2); padding: 28px 26px; transition: background-color 200ms var(--ease-out); }
.sec.alt .card { background: var(--paper); }
@media (hover: hover) and (pointer: fine) { .card:hover { background: #fff; } .sec.alt .card:hover { background: var(--paper-2); } }
.card h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.card p { margin-top: 10px; color: var(--soft); font-size: 15px; }
.card .for { display: block; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }

/* trabajos: galería grande, el material manda */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; margin-top: 40px; }
.work { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-3); border: 1px solid var(--line); }
.work video, .work img { width: 100%; height: 100%; object-fit: cover; }
.work figcaption { position: absolute; left: 0; bottom: 0; padding: 10px 14px; background: var(--ink); color: var(--paper); font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.work-ph { display: flex; align-items: center; justify-content: center; }
@media (hover: hover) and (pointer: fine) { .work { transition: transform 260ms var(--ease-out); } .work:hover { transform: scale(1.012); } }

/* confianza */
.trust { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.trust li { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line-2); padding: 9px 14px; color: var(--soft); }

/* contacto */
.contact-in { display: flex; flex-wrap: wrap; gap: 36px; justify-content: space-between; align-items: flex-end; }
.contact-actions { display: flex; flex-direction: column; gap: 10px; min-width: 264px; }

/* prose */
.prose { max-width: 68ch; }
.prose h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 700; letter-spacing: -0.025em; }
.prose p { margin-top: 15px; color: var(--soft); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding-top: 52px; }
.foot-in { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
@media (max-width: 700px) { .foot-in { grid-template-columns: 1fr; } .contact-in { align-items: flex-start; } }
.foot-col { display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; }
.foot-col a, .foot-col span:not(.lbl) { color: var(--soft); }
.foot p { margin-top: 10px; font-size: 14.5px; color: var(--soft); }
.foot-btm { padding-top: 30px; padding-bottom: 34px; margin-top: 34px; border-top: 1px solid var(--line); font-size: 13px; }

/* ---------- cookies ---------- */
.cc { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 540px; margin: 0 auto; background: var(--paper-2); border: 1px solid var(--line-2); padding: 18px 20px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cc p { font-size: 14px; color: var(--soft); flex: 1 1 240px; margin: 0; }
.cc-btns { display: flex; gap: 8px; margin-left: auto; }
[hidden] { display: none !important; }

/* ---------- menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .reel-video { display: none; }
}