/* =========================================================
   CARVIN360 — Miami Content Studio
   Estructura basada en modelo.jpg
   ========================================================= */

:root{
  /* =====================================================
     PALETA
     Fondo   #050505
     Texto   #FFFFFF
     Acento  #6E3BFF
     ===================================================== */
  --black:     #050505;
  --offwhite:  #FFFFFF;
  --accent:    #6E3BFF;

  /* Tonos derivados del acento */
  --accent-deep:  #5227D6;   /* fondo de degradados */
  --accent-light: #8B5CFF;   /* ver nota de contraste abajo */

  /* Grises intermedios, escalonados desde el fondo */
  --graphite:  #141414;
  --bg:        var(--black);
  --bg-2:      #090909;
  --panel:     #0C0C0C;
  --panel-2:   var(--graphite);
  --line:      rgba(255,255,255,.09);
  --line-soft: rgba(255,255,255,.05);

  --text:      var(--offwhite);
  --muted:     #9A9AA2;
  --muted-2:   #6C6C74;

  /* NOTA DE CONTRASTE
     #6E3BFF sobre #050505 da 3.6:1 — por debajo del minimo AA (4.5:1)
     para texto pequeño. Por eso el texto en color de acento (kickers,
     enlaces) usa --accent-light (#8B5CFF, 4.9:1) y el acento puro se
     reserva para rellenos, bordes y fondos, donde el contraste no aplica
     igual. Si no te importa la norma, pon --accent-text: var(--accent). */
  --accent-text: var(--accent-light);
  --accent-line: rgba(110,59,255,.42);
  --accent-soft: rgba(110,59,255,.14);

  --grad:      linear-gradient(90deg, var(--accent-deep), var(--accent));
  --grad-soft: linear-gradient(100deg, #5A2BE8 0%, #6E3BFF 50%, #8B5CFF 100%);

  --radius:    16px;
  --radius-sm: 10px;
  --shadow:    0 20px 60px rgba(0,0,0,.55);
  --maxw:      1240px;
}

*,*::before,*::after{ box-sizing:border-box; }

/* ---------- Iconos SVG ----------
   Todos heredan el color del texto y miden 1em salvo que se indique.
   Trazo sin relleno = look consistente en todos los sistemas. */
.ico{
  width:1em; height:1em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.75;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:0 0 auto;
  display:block;
}

html{ scroll-behavior:smooth; scroll-padding-top:90px; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }

.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.section{ padding:26px 0; }
.section-tight{ padding:13px 0; }

/* ---------- Bloques / paneles ---------- */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
}

.kicker{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--accent-text);
  margin:0 0 20px;
}
.kicker.center{ text-align:center; }
.center{ text-align:center; }

.grad-text{
  background:var(--grad-soft);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Filete fino bajo el titular. Sustituye a la antigua barra arcoíris:
   una línea de un solo trazo que se desvanece, mucho más sobria. */
.hairline{
  display:block;
  width:190px; height:1px;
  background:linear-gradient(90deg, var(--accent) 0%, rgba(110,59,255,0) 100%);
  margin:26px 0;
  border:0;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px;
  border-radius:99px;
  font-size:13px; font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  white-space:nowrap;
  font-family:inherit;
}
.btn .ico-arrow,
.link-arrow .ico-arrow{ font-size:15px; transition:transform .2s ease; }
.btn:hover .ico-arrow,
.link-arrow:hover .ico-arrow{ transform:translateX(3px); }

.btn-primary{
  background:var(--grad-soft);
  color:var(--offwhite);
  box-shadow:0 8px 28px rgba(110,59,255,.28);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 36px rgba(110,59,255,.42); }

.btn-ghost{
  background:rgba(255,255,255,.03);
  border-color:var(--line);
  color:var(--text);
}
.btn-ghost:hover{ border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.06); }

.btn-outline{
  background:transparent;
  border-color:var(--accent);
  color:var(--offwhite);
}
.btn-outline:hover{ background:var(--accent-soft); box-shadow:0 0 24px rgba(110,59,255,.28); }

.btn-block{ display:flex; width:100%; }
.btn-lg{ padding:14px 24px; font-size:14px; }
.btn-xs{ padding:6px 12px; font-size:9px; gap:5px; }

.link-arrow{
  font-size:12px; font-weight:600; color:var(--accent-text);
  display:inline-flex; align-items:center; gap:6px;
}
.link-arrow:hover{ color:var(--offwhite); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(5,5,5,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:74px;
}

/* Logo original, sin anillo de color. El PNG ya trae su círculo negro. */
.logo{ display:inline-flex; flex:0 0 auto; }
.logo-ring{
  position:relative;
  display:grid; place-items:center;
  width:64px; height:64px;
  border-radius:50%;
  transition:opacity .25s ease, transform .25s ease;
}
.logo:hover .logo-ring{ transform:scale(1.04); opacity:.88; }
.logo-img{
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
}
.logo-sm .logo-ring{ width:50px; height:50px; }

.nav{ display:flex; align-items:center; gap:30px; }
.nav-link{
  position:relative;
  font-size:13.5px; font-weight:500; color:var(--muted);
  transition:color .2s ease;
}
.nav-link:hover{ color:var(--offwhite); }
.nav-link.active{ color:var(--offwhite); }
.nav-link.active::after{
  content:''; position:absolute; left:50%; bottom:-9px;
  transform:translateX(-50%);
  width:5px; height:5px; border-radius:50%;
  background:var(--accent);
}

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:8px;
}
.nav-toggle span{ width:22px; height:2px; background:#fff; border-radius:2px; transition:.25s; }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   IMÁGENES
   Cada regla apunta a un archivo en /images y tiene un
   degradado de respaldo debajo. Si el .jpg todavía no existe,
   se ve el degradado — nunca una imagen rota.
   Basta con copiar tus fotos a /images con estos nombres.
   Ver images/LEEME.txt
   ========================================================= */
.ph{
  position:relative;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}

.ph-camera      { background-image:url('images/hero-camera.jpg'),    linear-gradient(135deg,#141414,#1F1F1F 55%,#0F0F0F); }
.ph-set         { background-image:url('images/hero-set.jpg'),       linear-gradient(135deg,#141414,#1F1F1F 55%,#0F0F0F); }
.ph-interview   { background-image:url('images/hero-interview.jpg'), linear-gradient(135deg,#141414,#1F1F1F 55%,#0F0F0F); }
.ph-food        { background-image:url('images/food-beverage.jpg'),  linear-gradient(135deg,#141414,#1F1F1F 55%,#0F0F0F); }
.ph-car         { background-image:url('images/automotive.jpg'),     linear-gradient(135deg,#141414,#1F1F1F 55%,#0F0F0F); }
.ph-car2        { background-image:url('images/automotive-2.jpg'),   linear-gradient(135deg,#141414,#1F1F1F 55%,#0F0F0F); }
.ph-portrait    { background-image:url('images/portrait.jpg'),       linear-gradient(135deg,#141414,#1F1F1F 55%,#0F0F0F); }
.ph-law         { background-image:url('images/law-firms.jpg'),      linear-gradient(135deg,#141414,#1F1F1F 55%,#0F0F0F); }
.ph-construction{ background-image:url('images/construction.jpg'),   linear-gradient(135deg,#141414,#1F1F1F 55%,#0F0F0F); }
.ph-events      { background-image:url('images/events.jpg'),         linear-gradient(135deg,#141414,#1F1F1F 55%,#0F0F0F); }
.ph-wedding     { background-image:url('images/weddings.jpg'),       linear-gradient(135deg,#141414,#1F1F1F 55%,#0F0F0F); }
.ph-personal    { background-image:url('images/personal-brands.jpg'),linear-gradient(135deg,#141414,#1F1F1F 55%,#0F0F0F); }
.ph-toyota      { background-image:url('images/case-toyota.jpg'),    linear-gradient(135deg,#141414,#1F1F1F 55%,#0F0F0F); }
.ph-studio      { background-image:url('images/studio.jpg'),         linear-gradient(135deg,#141414,#1F1F1F 55%,#0F0F0F); }
.ph-av1         { background-image:url('images/avatar-1.jpg'),       linear-gradient(135deg,#141414,#1F1F1F 55%,#0F0F0F); }
.ph-av2         { background-image:url('images/avatar-2.jpg'),       linear-gradient(135deg,#141414,#1F1F1F 55%,#0F0F0F); }
.ph-av3         { background-image:url('images/avatar-3.jpg'),       linear-gradient(135deg,#141414,#1F1F1F 55%,#0F0F0F); }

/* Encuadre para las fotos verticales (fotos propias de Carvin360).
   El % vertical decide qué parte se ve al recortar: menor = más arriba. */
.ph-wedding  { background-position:center 22%; }
.ph-personal { background-position:center 16%; }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; }
.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:stretch;
  min-height:520px;
}

.hero-copy{ padding:56px 24px 40px 0; padding-left:max(24px,calc((100vw - var(--maxw))/2 + 24px)); }

.eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:700; color:var(--accent); margin:0 0 18px;
}
.hero-title{
  margin:0;
  font-size:clamp(34px,4.4vw,56px);
  line-height:1.06;
  font-weight:800;
  letter-spacing:-.02em;
}
.hero-sub{ color:var(--muted); font-size:15px; margin:0 0 28px; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:44px; }

.hero-stats{ display:flex; gap:0; flex-wrap:wrap; }
.stat{
  display:flex; align-items:center; gap:10px;
  padding:0 26px;
  border-right:1px solid var(--line);
}
.stat:first-child{ padding-left:0; }
.stat:last-child{ border-right:0; }
.stat-ico{
  font-size:19px;
  color:var(--accent);
}
.stat strong{ display:block; font-size:17px; font-weight:800; line-height:1.2; }
.stat small{ display:block; font-size:10.5px; color:var(--muted-2); }

/* Video del showreel — solo se muestra si images/showreel.mp4 existe */
.hero-video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:2;
  display:none;
}
.hero-video.is-ready{ display:block; }
.hero-visual.has-video .collage{ opacity:0; }
.hero-visual::after{
  /* degradado que funde el visual con el fondo, sobre foto o video */
  content:''; position:absolute; inset:0; z-index:3;
  background:linear-gradient(90deg, var(--bg) 0%, rgba(5,5,5,.55) 22%, rgba(5,5,5,0) 60%);
  pointer-events:none;
}

/* Collage */
.hero-visual{ position:relative; }
.collage{
  position:absolute; inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:3px;
}
.collage{ transition:opacity .4s ease; }
.collage .ph{ width:100%; height:100%; }

/* Mockup de teléfono */
.phone{
  position:absolute;
  right:12%; bottom:-62px;
  width:172px; height:330px;
  background:#0b0b12;
  border:2px solid rgba(255,255,255,.18);
  border-radius:24px;
  padding:10px 9px;
  box-shadow:0 30px 70px rgba(0,0,0,.7);
  z-index:5;
}
.phone-notch{
  position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:46px; height:5px; border-radius:99px; background:#000;
}
.phone-screen{ height:100%; overflow:hidden; border-radius:16px; padding-top:6px; }
.phone-bar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.phone-logo{ width:34px; height:34px; border-radius:50%; }
.phone-menu{ font-size:11px; color:var(--muted); }
.phone-title{ font-size:11px; line-height:1.25; font-weight:800; margin:0 0 6px; }
.phone-sub{ font-size:6.5px; color:var(--muted); margin:0 0 10px; line-height:1.5; }
.phone-btns{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; align-items:flex-start; }
.phone-thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.phone-thumbs .ph{ height:44px; border-radius:4px; display:block; }

/* =========================================================
   TRUSTED BY
   ========================================================= */
.trusted{ padding:22px 28px; }
.trusted .kicker{ margin-bottom:18px; }
.trusted-row{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.trusted-item{
  display:flex; align-items:center; gap:10px;
  flex:1; min-width:150px; justify-content:center;
  border-right:1px solid var(--line);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:#d6d6de; font-weight:600;
}
.trusted-item:last-child{ border-right:0; }
.t-ico{
  font-size:24px; color:#e8e8f0; opacity:.7;
  transition:opacity .25s ease, color .25s ease;
}
.trusted-item:hover .t-ico{
  opacity:1;
  color:var(--accent);
}

/* =========================================================
   SERVICES
   ========================================================= */
.services-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin-bottom:32px;
}
.service-card{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:18px;
  transition:border-color .25s ease, transform .25s ease;
}
.service-card:hover{ border-color:var(--accent-line); transform:translateY(-3px); }
.svc-ico{
  display:grid; place-items:center;
  width:34px; height:34px; margin-bottom:12px;
  border:1px solid var(--accent-line);
  border-radius:9px;
  font-size:17px; color:var(--accent);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.service-card:hover .svc-ico{
  background:var(--grad-soft);
  border-color:transparent;
  color:var(--offwhite);
}
.service-card h3{ font-size:13.5px; font-weight:700; margin:0 0 10px; }
.service-card li{
  font-size:11.5px; color:var(--muted); padding-left:11px; position:relative; margin-bottom:5px;
}
.service-card li::before{
  content:''; position:absolute; left:0; top:8px;
  width:3px; height:3px; border-radius:50%; background:var(--accent);
}

/* =========================================================
   PORTFOLIO
   ========================================================= */
.portfolio-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.portfolio-head .kicker{ margin:0; }

.portfolio-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
  margin-bottom:12px;
}
.portfolio-grid-3{ grid-template-columns:repeat(3,1fr); margin-bottom:0; }

.pf-card{
  /* Es un <button> — se resetea sin usar el shorthand `background`
     para no borrar la imagen que define .ph-* */
  background-color:transparent;
  border:0; padding:0; margin:0;
  font-family:inherit; color:inherit; text-align:left;
  cursor:pointer;
  width:100%;

  position:relative;
  height:150px;
  border-radius:var(--radius-sm);
  display:flex; align-items:flex-end;
  transition:transform .35s ease, box-shadow .35s ease;
  background-size:cover;
}
.pf-card::before{
  content:''; position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.85) 100%);
  transition:background .35s ease;
}
.pf-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  background-size:112%;   /* zoom lento de la foto */
}
.pf-card:hover::before{
  background:linear-gradient(180deg, rgba(110,59,255,.18) 0%, rgba(0,0,0,.9) 100%);
}
.pf-card:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.pf-zoom{
  position:absolute; top:12px; right:12px; z-index:2;
  display:grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  background:rgba(10,10,16,.65);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);
  font-size:14px; color:var(--offwhite);
  opacity:0; transform:scale(.8);
  transition:opacity .3s ease, transform .3s ease;
}
.pf-card:hover .pf-zoom,
.pf-card:focus-visible .pf-zoom{ opacity:1; transform:scale(1); }

.pf-meta{ display:block; position:relative; z-index:1; padding:14px; }
.pf-t{
  display:block; margin-bottom:2px;
  font-size:12px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
}
.pf-d{ display:block; font-size:10.5px; color:var(--muted); line-height:1.4; }

/* =========================================================
   PACKAGES + CASE STUDY
   ========================================================= */
.split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px; align-items:start;
}

.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }

.price-card{
  position:relative;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:20px 16px;
  display:flex; flex-direction:column;
}
.price-card.featured{
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(110,59,255,.32), 0 14px 44px rgba(110,59,255,.18);
}
.badge{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  background:var(--grad-soft); color:var(--offwhite);
  font-size:8px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 10px; border-radius:99px; white-space:nowrap;
}
.price-card h3{ font-size:15px; font-weight:700; margin:0 0 6px; }
.price{ font-size:26px; font-weight:800; margin:0 0 16px; letter-spacing:-.02em; }
.price span{ font-size:11px; font-weight:500; color:var(--muted-2); }

.checks li{
  position:relative; padding-left:18px; margin-bottom:7px;
  font-size:11.5px; color:var(--muted);
}
.checks li::before{
  content:'✓'; position:absolute; left:0; top:0;
  color:var(--accent); font-size:11px; font-weight:700;
}
.price-card .checks{ margin-bottom:18px; flex:1; }

.note{ font-size:10.5px; color:var(--muted-2); margin:14px 0 0; }

/* Case study */
.case-study{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.case-img{ height:210px; border-radius:var(--radius-sm); }
.case-body h3{ font-size:19px; font-weight:700; margin:0 0 8px; }
.case-body > p{ font-size:12px; color:var(--muted); margin:0 0 14px; }
.case-body .checks{ margin-bottom:18px; }

/* =========================================================
   WHY CARVIN360
   ========================================================= */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.why-item{
  display:flex; gap:12px; align-items:flex-start;
  padding:0 22px;
  border-right:1px solid var(--line);
}
.why-item:first-child{ padding-left:0; }
.why-item:last-child{ border-right:0; padding-right:0; }
.why-ico{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--accent-line);
  font-size:17px; color:var(--accent);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.why-item:hover .why-ico{
  background:var(--grad-soft); border-color:transparent; color:var(--offwhite);
}
.why-item h4{ margin:0 0 4px; font-size:13px; font-weight:700; }
.why-item p{ margin:0; font-size:11px; color:var(--muted); line-height:1.5; }

/* =========================================================
   ABOUT + TESTIMONIALS
   ========================================================= */
.about-wrap{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:26px; }
.about-inner{ display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; }
.about-text p{ font-size:12px; color:var(--muted); margin:0 0 12px; line-height:1.7; }

.studio{ text-align:center; }
.studio-ring{
  width:120px; height:120px; border-radius:50%;
  background:var(--accent-line);
  padding:1px;
  display:grid; place-items:center;
  margin-bottom:10px;
}
.studio-ring .ph{
  width:100%; height:100%; border-radius:50%;
  display:block;
}
.studio-tag{
  margin:0;
  font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}

.testi-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.testi{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:16px;
  margin:0;
  display:flex; flex-direction:column;
}
.quote{
  font-size:26px; line-height:1; color:var(--accent);
  font-weight:700; display:block; margin-bottom:6px;
}
.testi p{ font-size:11px; color:var(--muted); margin:0 0 16px; flex:1; line-height:1.6; }
.testi footer{ display:flex; align-items:center; gap:9px; }
.avatar{ width:26px; height:26px; border-radius:50%; flex:0 0 auto; }
.testi footer strong{ display:block; font-size:10.5px; font-weight:700; }
.testi footer small{ display:block; font-size:9.5px; color:var(--muted-2); }

/* =========================================================
   CONTACT
   ========================================================= */
.contact-panel{ padding:34px; }
.contact-wrap{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:34px; align-items:start; }

.contact-copy h2{ font-size:26px; font-weight:800; margin:0 0 8px; letter-spacing:-.02em; }
.contact-sub{ font-size:12px; color:var(--muted); margin:0 0 26px; }

.contact-info{ display:flex; flex-wrap:wrap; gap:26px; }
.ci{ display:flex; gap:10px; align-items:flex-start; }
.ci-ico{
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  border:1px solid var(--line); font-size:14px; color:var(--accent);
}
.ci strong{ display:block; font-size:11.5px; font-weight:700; }
.ci a{ font-size:11px; color:var(--muted); }
.ci a:hover{ color:var(--accent); }

.contact-form{ display:flex; flex-direction:column; gap:10px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.contact-form input,
.contact-form select,
.contact-form textarea{
  width:100%;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:11px 13px;
  color:var(--text);
  font-size:12px;
  font-family:inherit;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-form textarea{ resize:vertical; min-height:86px; }
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:var(--muted-2); }
.contact-form select{ color:var(--muted-2); appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%236f6f7d' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center;
}
.contact-form select:valid{ color:var(--text); }
.contact-form select option{ background:#12121d; color:var(--text); }

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(110,59,255,.20);
}
.contact-form input.invalid,
.contact-form select.invalid,
.contact-form textarea.invalid{ border-color:#ff4d6a; }

.form-status{ font-size:11.5px; margin:2px 0 0; min-height:16px; color:var(--muted); }
.form-status.ok{ color:#4ade80; }
.form-status.err{ color:#ff6b81; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ margin-top:26px; }
.footer-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding-top:18px; padding-bottom:22px;
}
.socials{ display:flex; gap:8px; }
.socials a{
  display:grid; place-items:center;
  width:30px; height:30px; border-radius:8px;
  border:1px solid var(--line);
  font-size:14px; color:var(--muted);
  transition:.2s;
}
.socials a:hover{ color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }

.footer-site{ font-size:12px; color:#cfcfd8; text-decoration:underline; text-underline-offset:3px; }
.footer-site:hover{ color:var(--accent); }
.footer-tags{ font-size:11px; color:var(--muted-2); margin:0; }

.footer-bar{
  height:1px;
  background:linear-gradient(90deg,
    rgba(110,59,255,0) 0%,
    var(--accent-line) 50%,
    rgba(110,59,255,0) 100%);
}

/* =========================================================
   ANIMACIONES DE ENTRADA (scroll reveal)
   .reveal  = el elemento entra con fundido + desplazamiento
   .stagger = sus hijos entran uno detrás de otro
   El JS añade .is-visible cuando el elemento llega a pantalla.
   ========================================================= */
.reveal,
.stagger > *{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),
             transform .7s cubic-bezier(.2,.7,.3,1);
  will-change:opacity, transform;
}
.reveal.is-visible,
.stagger.is-visible > *{
  opacity:1;
  transform:none;
}

/* Retardo escalonado de los hijos */
.stagger.is-visible > *:nth-child(1){ transition-delay:0s; }
.stagger.is-visible > *:nth-child(2){ transition-delay:.09s; }
.stagger.is-visible > *:nth-child(3){ transition-delay:.18s; }
.stagger.is-visible > *:nth-child(4){ transition-delay:.27s; }
.stagger.is-visible > *:nth-child(5){ transition-delay:.36s; }
.stagger.is-visible > *:nth-child(6){ transition-delay:.45s; }
.stagger.is-visible > *:nth-child(7){ transition-delay:.54s; }

/* El hero entra escalonado nada más cargar */
.hero-copy .reveal{ transition-delay:calc(var(--i, 0) * .1s); }

/* Accesibilidad: si el usuario pidió menos movimiento, nada se anima */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal, .stagger > *{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .pf-card, .btn, .service-card, .testi{ transition:none !important; }
}

/* =========================================================
   LIGHTBOX DEL PORTFOLIO
   ========================================================= */
.lightbox{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  padding:36px 64px;
  background:rgba(4,4,9,.94);
  backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .3s ease;
}
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity:1; }

.lb-stage{
  margin:0;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  max-width:100%; max-height:100%;
}
.lb-stage img{
  max-width:100%;
  max-height:74vh;
  border-radius:var(--radius-sm);
  box-shadow:0 30px 90px rgba(0,0,0,.75);
  transform:scale(.97);
  opacity:0;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), opacity .35s ease;
}
.lightbox.is-open .lb-stage img{ transform:none; opacity:1; }

.lb-caption{ text-align:center; }
.lb-caption h4{
  margin:0 0 3px; font-size:14px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
}
.lb-caption p{ margin:0 0 6px; font-size:12px; color:var(--muted); }
.lb-count{ font-size:10.5px; color:var(--muted-2); letter-spacing:.1em; }

.lb-close,
.lb-nav{
  position:absolute;
  display:grid; place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--offwhite);
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.lb-close:hover,
.lb-nav:hover{ background:rgba(110,59,255,.20); border-color:var(--accent); }
.lb-close:focus-visible,
.lb-nav:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.lb-close{ top:22px; right:22px; width:40px; height:40px; font-size:18px; }
.lb-nav{ top:50%; margin-top:-22px; width:44px; height:44px; font-size:20px; }
.lb-prev{ left:16px; }
.lb-next{ right:16px; }
.lb-nav:hover{ transform:scale(1.08); }

/* Bloquea el scroll del fondo con el lightbox abierto */
body.lb-open{ overflow:hidden; }

@media (max-width:640px){
  .lightbox{ padding:60px 12px 24px; }
  .lb-stage img{ max-height:62vh; }
  .lb-nav{ width:38px; height:38px; margin-top:-19px; font-size:17px; }
  .lb-prev{ left:6px; }
  .lb-next{ right:6px; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1100px){
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .portfolio-grid{ grid-template-columns:repeat(2,1fr); }
  .portfolio-grid-3{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; }
  .why-grid{ grid-template-columns:repeat(2,1fr); gap:22px 0; }
  .why-item:nth-child(2){ border-right:0; }
  .why-item:nth-child(3){ padding-left:0; }
  .about-wrap{ grid-template-columns:1fr; }
  .testi-grid{ grid-template-columns:1fr; }
  .contact-wrap{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .nav{
    position:absolute; top:74px; left:0; right:0;
    flex-direction:column; gap:0;
    background:rgba(8,8,14,.98);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  .nav.open{ max-height:340px; }
  .nav-link{ padding:14px 24px; width:100%; border-bottom:1px solid var(--line-soft); }
  .nav-link.active::after{ display:none; }
  .nav-toggle{ display:flex; }
  .btn-book{ display:none; }

  .hero-grid{ grid-template-columns:1fr; }
  .hero-copy{ padding:44px 24px 30px; }
  .hero-visual{ height:400px; }
  .hero-visual::after{ background:linear-gradient(180deg, rgba(5,5,5,.75) 0%, rgba(5,5,5,.15) 45%, rgba(5,5,5,.9) 100%); }
  .phone{ right:6%; bottom:-40px; width:150px; height:290px; }

  .case-study{ grid-template-columns:1fr; }
  .about-inner{ grid-template-columns:1fr; }
  .studio{ margin:0 auto; }
}

@media (max-width:640px){
  .panel{ padding:20px; }
  .services-grid{ grid-template-columns:1fr; }
  .portfolio-grid,.portfolio-grid-3{ grid-template-columns:1fr; }
  .pricing-grid{ grid-template-columns:1fr; }
  .badge{ top:-8px; }
  .why-grid{ grid-template-columns:1fr; }
  .why-item{ border-right:0; padding:0; }
  .form-row{ grid-template-columns:1fr; }
  .trusted-item{ border-right:0; min-width:120px; }
  .stat{ padding:0 16px; }
  .hero-stats{ gap:14px 0; }
  .footer-inner{ justify-content:center; text-align:center; }
}