/* =========================================================
   MAQUETEO.COM — Sistema de diseño
   Dark + verde fluorescente + tipografía tech-editorial
   ========================================================= */

:root{
  /* Paleta */
  --bg-0: #050805;
  --bg-1: #0A0F0A;
  --bg-2: #0F1614;
  --surface: rgba(16, 24, 20, 0.55);
  --border: rgba(57, 255, 20, 0.14);
  --border-strong: rgba(57, 255, 20, 0.35);

  --neon: #39FF14;
  --neon-2: #7FFFB2;
  --neon-soft: rgba(57, 255, 20, 0.85);
  --neon-glow: 0 0 24px rgba(57, 255, 20, 0.45);
  --neon-glow-sm: 0 0 12px rgba(57, 255, 20, 0.35);

  --text: #E8FFE8;
  --text-dim: #A6B8A6;
  --text-mute: #6B7A6B;

  /* Tipografía */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Space Mono", ui-monospace, monospace;

  /* Layout */
  --container: 1240px;
  --radius: 14px;
  --radius-lg: 22px;

  /* Timing */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* Reset y base ------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-body);
  background: var(--bg-0);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; transition: color .2s var(--ease); }
button{ font: inherit; cursor:pointer; border:none; background:none; color:inherit; }
input, textarea, select{ font: inherit; color:inherit; background:none; border:none; outline:none; }

/* Canvas de fondo (aurora animado) --------------------------- */
#bg-canvas{
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}
.bg-grid{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(57, 255, 20, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 255, 20, 0.035) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
}
.bg-vignette{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, transparent 0%, rgba(5,8,5,.6) 70%, rgba(5,8,5,.95) 100%);
}

/* Utilidades --------------------------------------------------- */
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--neon);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before{
  content:"";
  width: 8px; height: 8px;
  background: var(--neon);
  border-radius: 50%;
  box-shadow: var(--neon-glow-sm);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:.5; transform:scale(1.3); }
}

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
h1{ font-size: clamp(2.4rem, 6.5vw, 5.4rem); }
h2{ font-size: clamp(1.9rem, 4vw, 3.4rem); }
h3{ font-size: clamp(1.3rem, 2vw, 1.7rem); }
.accent{ color: var(--neon); text-shadow: 0 0 20px rgba(57, 255, 20, .35); }
.accent-outline{
  -webkit-text-stroke: 1.5px var(--neon);
  color: transparent;
  text-shadow: 0 0 24px rgba(57, 255, 20, .25);
}

.lede{
  color: var(--text-dim);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  max-width: 62ch;
}

/* Botones ------------------------------------------------------ */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: all .3s var(--ease);
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary{
  background: var(--neon);
  color: #041004;
  box-shadow: var(--neon-glow);
}
.btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(57,255,20,.65);
}
.btn-ghost{
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: rgba(57,255,20,0.04);
}
.btn-ghost:hover{
  border-color: var(--neon);
  color: var(--neon);
  box-shadow: var(--neon-glow-sm);
}
.btn .arrow{
  display: inline-block;
  transition: transform .3s var(--ease);
}
.btn:hover .arrow{ transform: translateX(4px); }

/* Navegación --------------------------------------------------- */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 0;
  transition: all .3s var(--ease);
  backdrop-filter: blur(0px);
}
.nav.scrolled{
  padding: 12px 0;
  background: rgba(5,8,5,0.7);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.logo{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.logo-mark{
  width: 32px; height: 32px;
  position: relative;
}
.logo-mark svg{ width:100%; height:100%; filter: drop-shadow(0 0 8px rgba(57,255,20,.6)); }
.logo strong{ color: var(--neon); }
.logo em{ font-style: normal; color: var(--text-dim); font-weight: 400; }

.nav-links{
  display: flex;
  gap: 4px;
  list-style: none;
}
.nav-links a{
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  color: var(--text-dim);
  transition: all .2s var(--ease);
  position: relative;
}
.nav-links a:hover, .nav-links a.active{
  color: var(--neon);
  background: rgba(57,255,20,.06);
}
.nav-cta{
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--neon);
  color: #041004;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: all .3s var(--ease);
  box-shadow: var(--neon-glow-sm);
}
.nav-cta:hover{ transform: translateY(-1px); box-shadow: var(--neon-glow); }

.nav-toggle{
  display: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--border);
  align-items: center;
  justify-content: center;
}
.nav-toggle span{
  display:block; width:18px; height:2px; background: var(--neon);
  position: relative;
}
.nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; left:0; width:100%; height:2px; background: var(--neon);
}
.nav-toggle span::before{ top:-6px; }
.nav-toggle span::after{ top:6px; }

/* Hero --------------------------------------------------------- */
.hero{
  padding: 160px 0 100px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
}
.hero-inner{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}
.hero h1{
  margin: 24px 0 20px;
}
.hero h1 .line{
  display: block;
  overflow: hidden;
}
.hero h1 .line > span{
  display: inline-block;
  animation: rise .9s var(--ease-out) both;
}
.hero h1 .line:nth-child(2) > span{ animation-delay: .1s; }
.hero h1 .line:nth-child(3) > span{ animation-delay: .2s; }
@keyframes rise{
  from{ transform: translateY(100%); opacity: 0; }
  to{ transform: translateY(0); opacity: 1; }
}
.hero-cta{
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.hero-meta{
  margin-top: 42px;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.hero-meta div strong{
  display: block;
  color: var(--neon);
  font-size: 26px;
  font-family: var(--font-display);
  letter-spacing: -.02em;
  margin-bottom: 4px;
  text-transform: none;
}

/* Objeto 3D del hero (maqueta animada) */
.hero-visual{
  position: relative;
  aspect-ratio: 1;
  max-width: 520px;
  margin-left: auto;
}
.wireframe-box{
  position: absolute;
  inset: 0;
  perspective: 1200px;
  animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-16px); }
}
.wireframe-box .cube{
  position: absolute;
  inset: 15%;
  transform-style: preserve-3d;
  animation: spin 22s linear infinite;
}
@keyframes spin{
  from{ transform: rotateX(-15deg) rotateY(0deg); }
  to{ transform: rotateX(-15deg) rotateY(360deg); }
}
.wireframe-box .face{
  position: absolute;
  inset: 0;
  border: 1px solid var(--neon);
  box-shadow: 0 0 30px rgba(57,255,20,.25), inset 0 0 30px rgba(57,255,20,.08);
  background: rgba(57,255,20,.02);
}
.face.front  { transform: translateZ(150px); }
.face.back   { transform: rotateY(180deg) translateZ(150px); }
.face.right  { transform: rotateY(90deg) translateZ(150px); }
.face.left   { transform: rotateY(-90deg) translateZ(150px); }
.face.top    { transform: rotateX(90deg) translateZ(150px); }
.face.bottom { transform: rotateX(-90deg) translateZ(150px); }
.face::before, .face::after{
  content:""; position:absolute; background: rgba(57,255,20,.4);
}
.face::before{ inset: 0 50% 0 0; width:1px; height:100%; left:50%; }
.face::after{ inset: 50% 0 0 0; height:1px; width:100%; top:50%; }

.orbit-ring{
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(57,255,20,.2);
  border-radius: 50%;
  animation: rotate 30s linear infinite;
}
.orbit-ring::before{
  content:"";
  position: absolute;
  top: -6px; left: 50%;
  width: 12px; height: 12px;
  background: var(--neon);
  border-radius: 50%;
  box-shadow: var(--neon-glow);
}
.orbit-ring.two{ inset: 10%; animation-duration: 20s; animation-direction: reverse; }
.orbit-ring.three{ inset: 20%; animation-duration: 40s; }
@keyframes rotate{ to{ transform: rotate(360deg); } }

/* Chip flotante */
.hero-chip{
  position: absolute;
  padding: 8px 14px;
  background: rgba(15,22,20,.9);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--neon);
  backdrop-filter: blur(10px);
  animation: floatChip 4s ease-in-out infinite;
}
.hero-chip.top-left{ top: 8%; left: -8%; }
.hero-chip.bottom-right{ bottom: 12%; right: -6%; animation-delay: -2s; }
.hero-chip.mid-right{ top: 42%; right: -12%; animation-delay: -1s; }
@keyframes floatChip{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* Ticker de scroll infinito ---------------------------------- */
.ticker{
  padding: 30px 0;
  border-block: 1px solid var(--border);
  overflow: hidden;
  background: rgba(10, 15, 10, 0.5);
}
.ticker-track{
  display: flex;
  gap: 60px;
  animation: scroll-x 40s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.ticker-item{
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  color: var(--text-mute);
  display: flex;
  align-items: center;
  gap: 60px;
  font-weight: 600;
}
.ticker-item span{ color: var(--neon); }
@keyframes scroll-x{
  to{ transform: translateX(-50%); }
}

/* Secciones estándar ----------------------------------------- */
section{
  padding: 100px 0;
  position: relative;
}
.section-head{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 60px;
  align-items: end;
  margin-bottom: 60px;
}
.section-head .head-left h2{ margin-top: 20px; }
.section-head .head-right{ color: var(--text-dim); max-width: 40ch; justify-self: end; }

/* Servicios grid --------------------------------------------- */
.services-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.service-card{
  padding: 36px 28px;
  background: var(--bg-1);
  transition: all .4s var(--ease);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.service-card::before{
  content:"";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(57,255,20,.15), transparent 60%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
}
.service-card:hover::before{ opacity: 1; }
.service-card:hover{ background: var(--bg-2); }
.service-num{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: .1em;
  margin-bottom: 24px;
}
.service-icon{
  width: 44px; height: 44px;
  color: var(--neon);
  margin-bottom: 20px;
  transition: transform .3s var(--ease);
}
.service-card:hover .service-icon{ transform: scale(1.1) rotate(-6deg); }
.service-card h3{
  margin-bottom: 10px;
  font-size: 1.35rem;
}
.service-card p{
  color: var(--text-dim);
  font-size: .95rem;
  margin-bottom: 20px;
  flex: 1;
}
.service-link{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--neon);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.service-link:hover{ gap: 12px; }

/* Portafolio destacado --------------------------------------- */
.portfolio-featured{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}
.pf-card{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 4/3;
  transition: all .4s var(--ease);
  cursor: pointer;
  background: var(--bg-2);
}
.pf-card:hover{
  border-color: var(--border-strong);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0,0,0,.4), 0 0 40px rgba(57,255,20,.1);
}
.pf-card.wide{ grid-column: span 4; }
.pf-card.tall{ grid-column: span 2; aspect-ratio: 3/4; }
.pf-card.normal{ grid-column: span 3; }
.pf-thumb{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(20%) contrast(1.05);
  transition: transform .6s var(--ease);
}
.pf-card:hover .pf-thumb{ transform: scale(1.05); filter: grayscale(0%); }
.pf-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(5,8,5,.95) 100%);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.pf-tag{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 8px;
}
.pf-card h4{
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.pf-card .pf-year{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mute);
}

/* Agendador ---------------------------------------------------- */
.scheduler{
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 50px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
  position: relative;
  overflow: hidden;
}
.scheduler::before{
  content:"";
  position: absolute;
  top: -50%; right: -30%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(57,255,20,.15) 0%, transparent 60%);
  filter: blur(60px);
  pointer-events: none;
}
.sched-intro{ position: relative; }
.sched-intro h2{ margin: 20px 0 16px; }
.sched-intro p{ color: var(--text-dim); margin-bottom: 32px; }
.sched-types{ display: flex; flex-direction: column; gap: 12px; }
.sched-type{
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .3s var(--ease);
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(10,15,10,.4);
  text-align: left;
  width: 100%;
}
.sched-type:hover{ border-color: var(--border-strong); }
.sched-type.active{
  border-color: var(--neon);
  background: rgba(57,255,20,.06);
  box-shadow: var(--neon-glow-sm);
}
.sched-type-dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--text-mute);
  transition: all .3s var(--ease);
  flex-shrink: 0;
}
.sched-type.active .sched-type-dot{
  background: var(--neon);
  box-shadow: var(--neon-glow-sm);
}
.sched-type-info{ flex: 1; }
.sched-type-info strong{ display:block; font-family: var(--font-display); font-size: 1rem; margin-bottom: 2px; }
.sched-type-info span{ font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); letter-spacing: .1em; text-transform: uppercase; }

.sched-form{ position: relative; }
.sched-step{
  display: none;
  animation: fadeIn .4s var(--ease-out);
}
.sched-step.active{ display: block; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform: translateY(0); } }
.sched-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sched-label .step-badge{ color: var(--text-mute); }

/* Calendario */
.calendar{
  background: rgba(5,8,5,.5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.cal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.cal-header button{
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text-dim);
  transition: all .2s var(--ease);
}
.cal-header button:hover{ color: var(--neon); border-color: var(--neon); }
.cal-header h4{
  font-family: var(--font-display);
  font-size: 1rem;
  text-transform: capitalize;
}
.cal-weekdays, .cal-days{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-weekdays{
  margin-bottom: 8px;
}
.cal-weekdays span{
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: .1em;
  padding: 6px 0;
}
.cal-day{
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text);
  transition: all .2s var(--ease);
  cursor: pointer;
  border: 1px solid transparent;
}
.cal-day.other{ color: var(--text-mute); opacity: .3; cursor: default; }
.cal-day.disabled{ color: var(--text-mute); opacity: .3; cursor: not-allowed; }
.cal-day.today{ border-color: var(--border-strong); }
.cal-day:not(.other):not(.disabled):hover{ background: rgba(57,255,20,.1); color: var(--neon); }
.cal-day.selected{
  background: var(--neon);
  color: #041004;
  font-weight: 600;
  box-shadow: var(--neon-glow-sm);
}

/* Horarios */
.time-slots{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 20px;
}
.time-slot{
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all .2s var(--ease);
}
.time-slot:hover{ border-color: var(--border-strong); color: var(--neon); }
.time-slot.selected{
  background: var(--neon);
  color: #041004;
  border-color: var(--neon);
  font-weight: 600;
}

/* Form fields */
.form-field{
  margin-bottom: 16px;
}
.form-field label{
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 8px;
}
.form-field input, .form-field textarea, .form-field select{
  width: 100%;
  padding: 14px 16px;
  background: rgba(5,8,5,.6);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  transition: all .2s var(--ease);
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(57,255,20,.1);
}
.form-field textarea{ resize: vertical; min-height: 90px; }
.form-check{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-dim);
  margin: 20px 0;
}
.form-check input{
  width: 18px; height: 18px;
  margin-top: 2px;
  accent-color: var(--neon);
}
.form-check a{ color: var(--neon); text-decoration: underline; }

.sched-summary{
  padding: 14px 16px;
  background: rgba(57,255,20,.05);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--text-dim);
}
.sched-summary strong{ color: var(--neon); font-family: var(--font-mono); }

.sched-nav{
  display: flex;
  gap: 10px;
  margin-top: 24px;
}
.sched-nav .btn{ flex: 1; justify-content: center; }
.sched-back{
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: all .2s var(--ease);
}
.sched-back:hover{ color: var(--neon); border-color: var(--neon); }

.sched-success{
  text-align: center;
  padding: 40px 20px;
}
.sched-success svg{ width: 60px; height: 60px; color: var(--neon); margin: 0 auto 20px; filter: drop-shadow(0 0 20px rgba(57,255,20,.6)); }
.sched-success h3{ margin-bottom: 10px; }
.sched-success p{ color: var(--text-dim); margin-bottom: 24px; }

/* Proceso ------------------------------------------------------ */
.process{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: proc;
}
.process-step{
  padding: 32px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-1);
  position: relative;
  transition: all .3s var(--ease);
}
.process-step:hover{
  border-color: var(--border-strong);
  transform: translateY(-4px);
}
.process-step::before{
  counter-increment: proc;
  content: counter(proc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--neon);
  letter-spacing: .1em;
  display: block;
  margin-bottom: 20px;
}
.process-step h4{ font-size: 1.1rem; margin-bottom: 8px; }
.process-step p{ color: var(--text-dim); font-size: .9rem; }

/* Testimonios -------------------------------------------------- */
.testimonials{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.testimonial{
  padding: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-1);
  position: relative;
}
.testimonial-quote{
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.5;
  margin-bottom: 24px;
  color: var(--text);
}
.testimonial-quote::before{
  content: "«";
  color: var(--neon);
  font-size: 2.5rem;
  line-height: 0.5;
  vertical-align: -0.15em;
  margin-right: 6px;
}
.testimonial-who{
  display: flex;
  align-items: center;
  gap: 14px;
}
.testimonial-avatar{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--neon), var(--neon-2));
  color: #041004;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}
.testimonial-who strong{ display:block; font-size: .95rem; }
.testimonial-who span{ font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); letter-spacing: .1em; text-transform: uppercase; }

/* CTA final ---------------------------------------------------- */
.cta-final{
  text-align: center;
  padding: 120px 0;
  position: relative;
}
.cta-final h2{ max-width: 20ch; margin: 20px auto 20px; }
.cta-final p{ color: var(--text-dim); max-width: 50ch; margin: 0 auto 36px; }

/* Footer ------------------------------------------------------- */
.footer{
  border-top: 1px solid var(--border);
  padding: 80px 0 40px;
  background: rgba(5,8,5,.6);
}
.footer-grid{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}
.footer-brand p{ color: var(--text-dim); max-width: 40ch; margin: 16px 0 24px; font-size: .95rem; }
.footer-brand .socials{
  display: flex;
  gap: 10px;
}
.footer-brand .socials a{
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  transition: all .2s var(--ease);
}
.footer-brand .socials a:hover{ color: var(--neon); border-color: var(--neon); box-shadow: var(--neon-glow-sm); }

.footer-col h5{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 20px;
}
.footer-col ul{ list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a{ color: var(--text-dim); font-size: .95rem; }
.footer-col a:hover{ color: var(--neon); }

.footer-bottom{
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: .05em;
}

/* Páginas de servicio ----------------------------------------- */
.page-hero{
  padding: 180px 0 80px;
  text-align: left;
}
.page-hero .eyebrow{ margin-bottom: 20px; }
.page-hero h1{
  max-width: 20ch;
  margin-bottom: 24px;
}
.page-hero .lede{ font-size: 1.2rem; }

.two-col{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}
.two-col.reverse .two-col-visual{ order: -1; }
.two-col-content h2{ margin-bottom: 20px; }
.two-col-content p{ color: var(--text-dim); margin-bottom: 16px; }
.check-list{
  list-style: none;
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.check-list li{
  display: flex;
  gap: 12px;
  color: var(--text-dim);
  padding: 12px 16px;
  background: rgba(10,15,10,.4);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all .2s var(--ease);
}
.check-list li:hover{ border-color: var(--border-strong); color: var(--text); }
.check-list li::before{
  content:"→";
  color: var(--neon);
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.two-col-visual{
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, rgba(57,255,20,.08), rgba(57,255,20,.02));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.two-col-visual::before{
  content:"";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent 0,
    transparent 20px,
    rgba(57,255,20,.03) 20px,
    rgba(57,255,20,.03) 21px
  );
}
.svc-icon-big{
  width: 40%;
  color: var(--neon);
  filter: drop-shadow(0 0 30px rgba(57,255,20,.5));
  animation: floatY 6s ease-in-out infinite;
}

.stats-strip{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 60px 0;
  border-block: 1px solid var(--border);
  margin: 60px 0;
}
.stat strong{
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  color: var(--neon);
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 8px;
}
.stat span{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* Portafolio página completa ---------------------------------- */
.filters{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.filter-btn{
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: all .2s var(--ease);
}
.filter-btn:hover{ color: var(--neon); border-color: var(--border-strong); }
.filter-btn.active{
  background: var(--neon);
  color: #041004;
  border-color: var(--neon);
}

.pf-grid-full{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pf-grid-full .pf-card{ grid-column: auto; aspect-ratio: 4/3; }

/* Equipo ------------------------------------------------------ */
.team-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.team-card{
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-1);
  transition: all .3s var(--ease);
  text-align: center;
}
.team-card:hover{ border-color: var(--border-strong); transform: translateY(-6px); }
.team-avatar{
  width: 100px; height: 100px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(57,255,20,.3), rgba(57,255,20,.05));
  border: 2px solid var(--neon);
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--neon);
  box-shadow: var(--neon-glow);
}
.team-card h4{ font-size: 1.2rem; margin-bottom: 4px; }
.team-role{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 16px;
}
.team-bio{ color: var(--text-dim); font-size: .95rem; }

/* Páginas legales --------------------------------------------- */
.legal{
  max-width: 780px;
  margin: 0 auto;
  padding: 160px 24px 80px;
}
.legal h1{ margin-bottom: 12px; }
.legal .eyebrow{ margin-bottom: 20px; }
.legal-updated{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mute);
  letter-spacing: .1em;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.legal h2{ font-size: 1.6rem; margin: 40px 0 16px; color: var(--neon); }
.legal h3{ font-size: 1.15rem; margin: 24px 0 12px; }
.legal p, .legal li{ color: var(--text-dim); margin-bottom: 12px; line-height: 1.7; }
.legal ul, .legal ol{ padding-left: 20px; margin-bottom: 16px; }
.legal a{ color: var(--neon); text-decoration: underline; }
.legal strong{ color: var(--text); }

/* Animaciones de scroll --------------------------------------- */
.reveal{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.in{
  opacity: 1;
  transform: translateY(0);
}

/* Popup contacto ---------------------------------------------- */
.popup{
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(5,8,5,.85);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.popup.open{ display: flex; }
.popup-inner{
  max-width: 500px;
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 40px;
  position: relative;
  box-shadow: 0 0 60px rgba(57,255,20,.2);
  animation: popIn .3s var(--ease-out);
}
@keyframes popIn{
  from{ transform: scale(.95); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}
.popup-close{
  position: absolute;
  top: 16px; right: 16px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s var(--ease);
}
.popup-close:hover{ color: var(--neon); border-color: var(--neon); }
.popup-inner h3{ margin-bottom: 8px; }
.popup-inner p{ color: var(--text-dim); margin-bottom: 24px; }
.popup-actions{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.popup-action{
  padding: 18px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  transition: all .2s var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.popup-action:hover{ border-color: var(--neon); color: var(--neon); box-shadow: var(--neon-glow-sm); }
.popup-action svg{ width: 24px; height: 24px; }
.popup-action span{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

/* Responsive -------------------------------------------------- */
@media (max-width: 1024px){
  .services-grid{ grid-template-columns: repeat(2, 1fr); }
  .portfolio-featured{ grid-template-columns: repeat(2, 1fr); }
  .pf-card.wide, .pf-card.normal, .pf-card.tall{ grid-column: span 1; aspect-ratio: 4/3; }
  .process{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .stats-strip{ grid-template-columns: repeat(2, 1fr); }
  .team-grid{ grid-template-columns: repeat(2, 1fr); }
  .pf-grid-full{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px){
  .container{ padding: 0 20px; }
  .nav-links, .nav-cta{ display: none; }
  .nav-toggle{ display: inline-flex; }
  .nav.open .nav-links{
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(5,8,5,.98);
    backdrop-filter: blur(20px);
    flex-direction: column;
    padding: 24px;
    gap: 10px;
    border-bottom: 1px solid var(--border);
  }
  .hero{ padding: 130px 0 60px; min-height: auto; }
  .hero-inner{ grid-template-columns: 1fr; gap: 40px; }
  .hero-visual{ max-width: 320px; margin: 0 auto; }
  .hero-chip{ display: none; }

  section{ padding: 60px 0; }
  .section-head{ grid-template-columns: 1fr; gap: 20px; }
  .section-head .head-right{ justify-self: start; }

  .services-grid{ grid-template-columns: 1fr; }
  .portfolio-featured, .pf-grid-full{ grid-template-columns: 1fr; }
  .process, .footer-grid, .stats-strip, .team-grid, .testimonials{ grid-template-columns: 1fr; }

  .scheduler{ padding: 30px 24px; grid-template-columns: 1fr; gap: 30px; }
  .two-col{ grid-template-columns: 1fr; gap: 40px; }
  .two-col.reverse .two-col-visual{ order: 0; }
  .time-slots{ grid-template-columns: repeat(2, 1fr); }
  .popup-actions{ grid-template-columns: 1fr; }
  .popup-inner{ padding: 30px 24px; }

  .cta-final{ padding: 60px 0; }
  .legal{ padding: 120px 20px 60px; }

  .footer-bottom{ flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Equipo — extras ---------------------------------------------- */
.team-card p{
  color: var(--text-dim);
  font-size: .95rem;
  text-align: left;
  margin-bottom: 12px;
  line-height: 1.6;
}
.team-card p em{ color: var(--text); font-style: normal; }
.team-skills{
  list-style: none;
  padding: 16px 0 0;
  margin-top: 16px;
  border-top: 1px solid var(--border);
  text-align: left;
}
.team-skills li{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text-mute);
  padding: 4px 0;
  position: relative;
  padding-left: 16px;
}
.team-skills li::before{
  content: "›";
  position: absolute;
  left: 0;
  color: var(--neon);
  font-weight: 700;
}
.team-avatar svg{ width: 60%; height: 60%; }

/* Legal — CTA final ------------------------------------------- */
.legal .lede{
  color: var(--text);
  font-size: 1.05rem;
  margin-bottom: 30px;
  padding: 20px 24px;
  border-left: 3px solid var(--neon);
  background: rgba(57,255,20,.03);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.legal-cta{
  margin-top: 60px;
  padding: 40px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  text-align: center;
  background: linear-gradient(135deg, rgba(57,255,20,.05), transparent);
}
.legal-cta p{ margin-bottom: 20px; color: var(--text); }
.legal-cta .btn{ margin-top: 8px; }

/* ============================================================= */
/* CURSOR PIXELADO RETRO                                          */
/* ============================================================= */
html, body {
  cursor: url('../img/cursor-arrow.png') 0 0, default;
}
a, button, [role="button"], .btn, .service-card, .pf-card, .filter-btn,
.nav-toggle, .nav-links a, .team-card, label, select, summary,
.popup-close, .sched-type, .cal-day, .time-slot {
  cursor: url('../img/cursor-pointer.png') 8 2, pointer;
}
input, textarea {
  cursor: url('../img/cursor-text.png') 12 12, text;
}
input[type="checkbox"], input[type="radio"] {
  cursor: url('../img/cursor-pointer.png') 8 2, pointer;
}

/* ============================================================= */
/* LOGO IMÁGENES (reemplazan al SVG "M")                          */
/* ============================================================= */
.logo{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
}
.logo-img{
  height: 38px;
  width: auto;
  display: block;
  transition: filter .3s var(--ease);
}
.logo:hover .logo-img{
  filter: drop-shadow(0 0 12px rgba(198,255,0,.5));
}
.footer .logo-img{ height: 42px; }
/* Cuando cargue tu logo.png el texto "maqueteo.com" se oculta */
.logo .logo-textmark{ display: none; }
.logo.no-image .logo-textmark{ display: inline; }
.logo.no-image .logo-img{ display: none; }

/* ============================================================= */
/* LOADING SCREEN — TERMINAL VINTAGE                              */
/* ============================================================= */
#page-loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .8s var(--ease-out), visibility .8s;
}
#page-loader.done{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-inner{
  text-align: center;
  padding: 40px 20px;
  max-width: 92vw;
  font-family: var(--font-mono);
  color: var(--neon);
}
.loader-crt{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(57,255,20,0) 50%, rgba(0,0,0,.35) 50%),
    linear-gradient(90deg, rgba(255,0,0,.03), rgba(0,255,0,.02), rgba(0,0,255,.03));
  background-size: 100% 3px, 100% 100%;
  z-index: 2;
  animation: crt-flicker 4s infinite;
}
.loader-vignette{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.9) 100%);
  z-index: 2;
}
@keyframes crt-flicker{
  0%,100%{ opacity: 1; }
  50%{ opacity: .96; }
  55%{ opacity: 1; }
}
.loader-brand{
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.6rem);
  color: #fff;
  letter-spacing: -.03em;
  margin-bottom: 30px;
  line-height: 1;
}
.loader-brand .accent{ color: #C6FF00; font-weight: 700; }
.loader-lines{
  text-align: left;
  display: inline-block;
  font-size: 13px;
  line-height: 2;
  letter-spacing: .05em;
  min-height: 180px;
  min-width: 320px;
}
.loader-lines .line{
  opacity: 0;
  animation: line-in .3s forwards;
}
.loader-lines .line:nth-child(1){ animation-delay: .1s; }
.loader-lines .line:nth-child(2){ animation-delay: .35s; }
.loader-lines .line:nth-child(3){ animation-delay: .6s; }
.loader-lines .line:nth-child(4){ animation-delay: .85s; }
.loader-lines .line:nth-child(5){ animation-delay: 1.1s; }
.loader-lines .line:nth-child(6){ animation-delay: 1.35s; color: #C6FF00; font-weight: 700; }
@keyframes line-in{
  from{ opacity: 0; transform: translateX(-8px); }
  to{ opacity: 1; transform: translateX(0); }
}
.loader-lines .prompt{ color: var(--neon-2); margin-right: 8px; }
.loader-lines .ok{ color: #C6FF00; }
.loader-cursor{
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--neon);
  vertical-align: middle;
  animation: cursor-blink 1s steps(1) infinite;
  margin-left: 4px;
}
@keyframes cursor-blink{
  0%,50%{ opacity: 1; }
  51%,100%{ opacity: 0; }
}
.loader-bar{
  width: 100%;
  height: 6px;
  background: rgba(57,255,20,.1);
  border: 1px solid rgba(57,255,20,.3);
  margin-top: 20px;
  overflow: hidden;
  position: relative;
}
.loader-bar-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--neon), #C6FF00);
  width: 0;
  animation: bar-fill 1.5s cubic-bezier(.4,.9,.5,1) forwards;
  box-shadow: 0 0 10px var(--neon);
}
@keyframes bar-fill{
  from{ width: 0; }
  to{ width: 100%; }
}

/* Ocultar todo el body hasta que loader se vaya (evita FOUC) */
body.loading{ overflow: hidden; }

/* ============================================================= */
/* IMÁGENES SWAPPABLES EN PORTAFOLIO Y TICKER                     */
/* ============================================================= */
/* La .pf-thumb original ya está definida arriba (position:absolute; inset:0).
   Acá solo agregamos soporte de <img> y del fallback pixelado sin redefinirla. */
.pf-thumb{ overflow: hidden; }
.pf-thumb img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  transition: transform .6s var(--ease-out), opacity .3s;
}
.pf-thumb img[data-loaded="false"]{ opacity: 0; }
.pf-card:hover .pf-thumb img{ transform: scale(1.06); }
.pf-thumb-fallback{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  text-align: center;
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  z-index: 0;
}
.pf-thumb-fallback::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg, transparent 48%, rgba(57,255,20,.15) 49%, rgba(57,255,20,.15) 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, rgba(57,255,20,.08) 49%, rgba(57,255,20,.08) 51%, transparent 52%);
  background-size: 20px 20px;
  opacity: .6;
}
.pf-thumb-fallback span{ position: relative; z-index: 1; color: var(--neon); font-weight: 700; letter-spacing: .05em; }

/* Ticker con soporte de logos */
.ticker-item{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 0 32px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--text-dim);
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color .3s;
}
.ticker-item:hover{ color: var(--neon); }
.ticker-item img{
  height: 46px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  /* Todos los logos en un solo tono: blanco suave sobre el fondo oscuro */
  filter: brightness(0) invert(1) opacity(.58);
  transition: filter .35s var(--ease), transform .35s var(--ease);
}
.ticker-item:hover img{
  filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 10px rgba(57,255,20,.55));
  transform: scale(1.06);
}
.ticker-item .dot{
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon);
  opacity: .5;
}

/* ============================================================= */
/* CTA BADGE PRICING (para landing de redes sociales)             */
/* ============================================================= */
.price-badge{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--neon);
  border-radius: 999px;
  background: rgba(57,255,20,.08);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 16px;
  box-shadow: 0 0 20px rgba(57,255,20,.15);
}
.price-badge strong{ color: #fff; font-family: var(--font-display); font-size: 14px; }

.pricing-card{
  padding: 40px 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(57,255,20,.04), transparent);
  position: relative;
  overflow: hidden;
  transition: all .3s var(--ease);
}
.pricing-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--neon), transparent);
}
.pricing-card:hover{
  border-color: var(--border-strong);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(57,255,20,.08);
}
.pricing-card.featured{
  border-color: var(--neon);
  background: linear-gradient(180deg, rgba(57,255,20,.08), rgba(57,255,20,.02));
  box-shadow: 0 20px 60px rgba(57,255,20,.15);
}
.pricing-card.featured::before{
  height: 6px;
  background: var(--neon);
}
.pricing-title{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 12px;
}
.pricing-price{
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 8px;
}
.pricing-price small{
  font-size: .35em;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: .05em;
}
.pricing-tag{
  font-size: .9rem;
  color: var(--text-dim);
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.pricing-list{
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}
.pricing-list li{
  padding: 10px 0 10px 26px;
  position: relative;
  color: var(--text);
  font-size: .95rem;
  line-height: 1.5;
}
.pricing-list li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--neon);
  border-bottom: 2px solid var(--neon);
  transform: rotate(-45deg);
}
.pricing-list li.excluded{ color: var(--text-mute); text-decoration: line-through; }
.pricing-list li.excluded::before{
  border-color: var(--text-mute);
  transform: rotate(45deg) scale(.7);
}
.pricing-list li strong{ color: var(--neon); }

/* Grid de pricing */
.pricing-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin: 60px 0;
  align-items: stretch;
}

/* ============================================================= */
/* WORKFLOW / STEPS con números vintage                           */
/* ============================================================= */
.workflow{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 60px 0;
  counter-reset: step;
}
.workflow-step{
  padding: 30px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-1);
  position: relative;
  counter-increment: step;
}
.workflow-step::before{
  content: "0" counter(step);
  position: absolute;
  top: -18px;
  left: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #000;
  background: var(--neon);
  padding: 4px 10px;
  letter-spacing: .1em;
  font-weight: 700;
}
.workflow-step h4{
  font-size: 1.1rem;
  margin: 12px 0 8px;
  color: var(--text);
}
.workflow-step p{
  color: var(--text-dim);
  font-size: .9rem;
  line-height: 1.6;
}

/* ============================================================= */
/* Ads Pricing tiers                                              */
/* ============================================================= */
.ads-tiers{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 30px 0;
}
.ads-tier{
  padding: 24px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: rgba(57,255,20,.03);
  text-align: center;
  transition: all .3s var(--ease);
}
.ads-tier:hover{
  border-color: var(--neon);
  background: rgba(57,255,20,.06);
  transform: translateY(-4px);
}
.ads-tier .tier-name{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.ads-tier .tier-price{
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--neon);
  font-weight: 600;
  letter-spacing: -.02em;
}
.ads-tier .tier-note{
  font-size: .8rem;
  color: var(--text-mute);
  margin-top: 6px;
  font-family: var(--font-mono);
}

/* ============================================================= */
/* Sales page — panel de 4 pilares                                */
/* ============================================================= */
.pillars-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 40px 0;
}
.pillar{
  padding: 28px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-1);
  text-align: center;
  transition: all .3s var(--ease);
}
.pillar:hover{
  border-color: var(--neon);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(57,255,20,.08);
}
.pillar-icon{
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border: 2px solid var(--neon);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--neon);
  box-shadow: var(--neon-glow);
}
.pillar h4{
  font-size: 1.1rem;
  margin-bottom: 8px;
  color: var(--text);
}
.pillar p{ color: var(--text-dim); font-size: .9rem; line-height: 1.6; }
.pillar .big-num{
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--neon);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  margin-bottom: 8px;
}

/* ============================================================= */
/* T&C — cards estilo terminal                                    */
/* ============================================================= */
.terms-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 30px 0;
}
.term-card{
  padding: 20px 24px;
  border-left: 3px solid var(--neon);
  background: rgba(57,255,20,.03);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.term-card h5{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--neon);
  margin-bottom: 8px;
}
.term-card p{ color: var(--text-dim); font-size: .9rem; line-height: 1.6; }

/* ============================================================= */
/* Responsive                                                     */
/* ============================================================= */
@media (max-width: 1024px){
  .workflow, .pillars-grid{ grid-template-columns: repeat(2, 1fr); }
  .terms-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  .workflow, .pillars-grid, .ads-tiers{ grid-template-columns: 1fr; }
  .loader-lines{ font-size: 11px; min-width: 260px; }
  .logo-img{ height: 32px; }
}

/* ============================================================= */
/* FAQ Accordion (details/summary)                                */
/* ============================================================= */
.faq-item{
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color .2s var(--ease);
}
.faq-item[open]{ border-color: var(--border-strong); background: rgba(57,255,20,.03); }
.faq-item summary{
  padding: 20px 24px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  position: relative;
  padding-right: 60px;
  transition: color .2s;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--neon);
  transition: transform .2s;
  line-height: 1;
}
.faq-item[open] summary::after{ content: "−"; }
.faq-item summary:hover{ color: var(--neon); }
.faq-item p{
  padding: 0 24px 24px;
  color: var(--text-dim);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================= */
/* BANDERAS SVG (funcionan en Windows, iOS, Android, Linux)       */
/* ============================================================= */
.flag{
  display: inline-block;
  width: 26px;
  height: 18px;
  border-radius: 2px;
  vertical-align: -3px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.flag-lg{ width: 64px; height: 44px; border-radius: 4px; vertical-align: middle; }
.flag-sm{ width: 20px; height: 14px; }

.flag-co{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 4'><rect width='6' height='2' fill='%23FCD116'/><rect y='2' width='6' height='1' fill='%23003893'/><rect y='3' width='6' height='1' fill='%23CE1126'/></svg>");
}
.flag-cl{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'><rect width='30' height='10' fill='%23ffffff'/><rect y='10' width='30' height='10' fill='%23D52B1E'/><rect width='10' height='10' fill='%230039A6'/><polygon points='5,2 6.2,5.5 9.5,5.5 6.7,7.7 7.9,11 5,8.9 2.1,11 3.3,7.7 0.5,5.5 3.8,5.5' fill='%23ffffff'/></svg>");
}
.flag-us{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39 20'><rect width='39' height='20' fill='%23B22234'/><g fill='%23ffffff'><rect y='1.5' width='39' height='1.6'/><rect y='4.6' width='39' height='1.6'/><rect y='7.7' width='39' height='1.6'/><rect y='10.8' width='39' height='1.6'/><rect y='13.9' width='39' height='1.6'/><rect y='17' width='39' height='1.6'/></g><rect width='15.6' height='10.8' fill='%233C3B6E'/></svg>");
}
.flag-tv{
  background: linear-gradient(135deg, #39FF14 0%, #7FFFB2 100%);
  position: relative;
}
.flag-tv::after{
  content: "TV";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #050805;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 8px;
  letter-spacing: .05em;
}
.flag-lg.flag-tv::after{ font-size: 18px; }

/* Alcance con bandera grande dentro de .big-num */
.pillar .big-num .flag,
.big-num.flag{
  vertical-align: middle;
}

/* ============================================================= */
/* LANGUAGE SWITCHER ES/EN                                        */
/* ============================================================= */
.lang-switcher{
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: rgba(57,255,20,.05);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-right: 12px;
}
.lang-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: transparent;
  border: none;
  color: var(--text-mute);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .05em;
  border-radius: 999px;
  transition: all .2s;
}
.lang-btn:hover{ color: var(--text); background: rgba(255,255,255,.05); }
.lang-btn.active{
  background: var(--neon);
  color: #050805;
}
.lang-btn.active .flag{
  box-shadow: 0 0 0 1px rgba(0,0,0,.15);
}
.lang-btn .flag{ width: 18px; height: 12px; vertical-align: -1px; }

@media (max-width: 900px){
  .lang-switcher{ margin: 0; padding: 2px; }
  .lang-btn{ padding: 4px 8px; font-size: 10px; }
  .lang-btn .flag{ display: none; }
}

/* ============================================================= */
/* TICKER DE CLIENTES · ajustes logos monocromo                   */
/* ============================================================= */
.ticker{
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track{ gap: 0; align-items: center; animation-duration: 75s; }
.ticker:hover .ticker-track{ animation-play-state: paused; }
.ticker-item{ padding: 0 0 0 44px; gap: 44px; }
@media (max-width: 720px){
  .ticker{ padding: 22px 0; }
  .ticker-track{ animation-duration: 55s; }
  .ticker-item{ padding-left: 30px; gap: 30px; }
  .ticker-item img{ height: 36px; max-width: 150px; }
}
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation: none; flex-wrap: wrap; justify-content: center; row-gap: 24px; width: auto; }
  .ticker-item[aria-hidden="true"]{ display: none; }
}