/*
Theme Name: Recuerdos en USB
Theme URI: https://recuerdosenusb.com
Author: Fabian Luna
Description: Tema a medida para recuerdosenusb.com — conversión de cintas VHS/Hi8/Video8/8mm/MiniDV a digital. Un solo template de una página, sin dependencias de build. Todo el camino de conversión apunta a WhatsApp. Aún nada es editable desde el editor de WordPress (menús, textos, precios están fijos en el código) — se irá robusteciendo por etapas.
Version: 1.0.0
License: Uso privado — no distribuir
Text Domain: recuerdosenusb
*/

:root{
  --bg:#0d0a42;
  --bg-alt:#171257;
  --ink:#EAF0FF;
  --muted:#93a0cf;
  --line: rgba(234,240,255,0.12);
  --rec:#FF9398;
  --coral:#FF9398;
  --teal:#49C5B6;
  --glitch-blue: rgba(73,197,182,.55);
  --glitch-red: rgba(255,147,152,.55);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'VT323', 'Space Mono', monospace;
  font-size:clamp(18.4px, 1.4vw, 23px);
  line-height:1.4;
  position:relative;
  transition:background-color .35s ease, color .35s ease;
}

/* ---------- background: static + glitch bars ---------- */
.noise{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:url('assets/noise.svg');
  background-size:280px 280px;
  opacity:0.05; mix-blend-mode:overlay;
  animation:staticShift 0.5s steps(3) infinite;
}
@keyframes staticShift{
  0%{background-position:0 0;}
  33%{background-position:-90px 40px;}
  66%{background-position:60px -70px;}
  100%{background-position:0 0;}
}

.glow{
  display:none;
}

.scan{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.05) 0px,
    rgba(255,255,255,0.05) 1px,
    transparent 1px,
    transparent 3px
  );
  opacity:0.6;
}

.glitch-bar{
  position:fixed; left:0; right:0; height:9px; z-index:2;
  pointer-events:none; opacity:0;
  background:var(--ink);
  animation:glitchBar 6s cubic-bezier(.2,.9,.3,1) infinite;
}
.glitch-bar::before, .glitch-bar::after{
  content:''; position:absolute; inset:0;
  mix-blend-mode:screen;
}
.glitch-bar::before{background:var(--coral); transform:translateX(-6px);}
.glitch-bar::after{background:var(--teal); transform:translateX(6px);}
@keyframes glitchBar{
  0%,88%,100%{opacity:0; top:20%; height:9px;}
  89%{opacity:.9; top:28%; height:14px;}
  90.5%{opacity:.9; top:28%; height:6px;}
  92%{opacity:0; top:28%;}
  93%{opacity:.85; top:58%; height:22px;}
  94.5%{opacity:.85; top:58%; height:4px;}
  96%{opacity:0; top:58%;}
}

a{color:inherit; text-decoration:none;}
h1,h2,h3{font-weight:600; line-height:1.08; margin:0 0 .3em 0; letter-spacing:-0.01em;}
p{margin:0 0 1em 0; color:var(--ink);}
blockquote{margin:0;}

/* ---------- glitch link interaction ---------- */
.mark, .bar-cta, .cta, .google-link, .price, .faq-q, .row h3 a{
  position:relative;
  transition:text-shadow .08s ease, color .12s ease;
}
.mark:hover, .bar-cta:hover, .cta:hover, .google-link:hover, .price:hover .p-range,
.faq-q:hover{
  text-shadow: -2px 0 var(--coral), 2px 0 var(--teal);
  animation:glitchText .35s steps(2) 1;
}
@keyframes glitchText{
  0%{text-shadow: -2px 0 var(--coral), 2px 0 var(--teal);}
  25%{text-shadow: 2px 1px var(--coral), -2px -1px var(--teal);}
  50%{text-shadow: -1px -1px var(--coral), 1px 1px var(--teal);}
  75%{text-shadow: 1px 0 var(--coral), -1px 0 var(--teal);}
  100%{text-shadow: -2px 0 var(--coral), 2px 0 var(--teal);}
}

.mono, .tag, .p-range, .p-go, .tc, .meta, .row-n, .mark, .bar-cta, .fine, footer p{
  font-family:'Space Mono', monospace;
}

/* ---------- top bar ---------- */
.bar{
  position:relative; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:28px 32px;
  max-width:1220px; margin:0 auto;
}
.mark{
  font-size:29.9px; letter-spacing:0.04em; color:var(--ink);
  animation:autoGlitch 5s steps(1) infinite;
}
@keyframes autoGlitch{
  0%, 92%, 100%{ text-shadow:none; }
  93%{ text-shadow:-2px 0 var(--coral), 2px 0 var(--teal); }
  94%{ text-shadow:2px 1px var(--coral), -2px -1px var(--teal); }
  95%{ text-shadow:-1px -1px var(--coral), 1px 1px var(--teal); }
  96%{ text-shadow:none; }
  97%{ text-shadow:1px 0 var(--teal), -1px 0 var(--coral); }
  98%{ text-shadow:none; }
}
.mark span{color:var(--rec); margin:0 2px;}
.bar-cta{font-size:14.9px; color:var(--muted); border-bottom:1px solid transparent;}
.bar-cta:hover{color:var(--ink); border-color:var(--ink);}

/* ---------- layout ---------- */
main{position:relative; z-index:2;}
.channel{
  max-width:1220px; margin:0 auto;
  padding:64px 32px;
  border-top:1px solid var(--line);
}
.channel:first-of-type{border-top:none; padding-top:40px;}

.tag{
  font-size:13.8px; color:var(--rec); letter-spacing:0.06em;
  margin:0 0 22px 0;
}

/* ---------- hero ---------- */
.hero{
  display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center;
}
.hero-photo img{
  width:100%; display:block;
  filter:grayscale(0.45) contrast(1.05) brightness(0.95) drop-shadow(0 24px 40px rgba(0,0,0,0.45));
}
.compat{
  grid-column:1 / -1;
  margin-top:44px; padding-top:28px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:26px; flex-wrap:wrap;
}
.compat-label{font-size:12.6px; color:var(--muted); letter-spacing:0.06em; flex:none;}
.compat-logos{display:flex; align-items:center; gap:30px; flex-wrap:wrap;}
.compat-logos img{height:20px; width:auto; opacity:0.75; filter:brightness(0) invert(1);}
.compat-logos img:hover{opacity:1;}

h1{font-size:clamp(48.3px,7vw,85.1px); text-shadow: 1px 0 var(--glitch-blue), -1px 0 var(--glitch-red); max-width:22ch; white-space:normal;}
.lede{font-size:20.7px; color:var(--muted); max-width:44ch;}
.meta{font-size:13.8px; color:var(--muted); margin-top:34px; letter-spacing:0.02em;}

.cta{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Space Mono', monospace; font-size:16.1px; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:4px; margin-top:26px;
}
.cta:hover{color:var(--rec); border-color:var(--rec);}
.wa-icon{flex:none; filter:drop-shadow(0 0 3px rgba(37,211,102,0.5));}
.bar-cta{display:inline-flex; align-items:center; gap:7px;}
.bar-right{display:flex; align-items:center; gap:12px;}

/* ---------- theme dropdown (kept quiet so the WhatsApp CTA leads) ---------- */
.theme-switch{position:relative;}
.theme-trigger{
  font-family:inherit; cursor:pointer;
  display:flex; align-items:center; gap:7px;
  padding:5px 9px; border-radius:999px; border:none; background:none;
  opacity:0.7; transition:opacity .15s ease;
}
.theme-switch:hover .theme-trigger, .theme-switch.open .theme-trigger{opacity:1;}
.theme-current-dot{
  width:11px; height:11px; border-radius:50%; flex:none;
  background:var(--bg); border:1.5px solid #fff;
}
.theme-current-label{font-family:'Space Mono',monospace; font-size:13.8px; color:var(--ink);}
.theme-caret{font-size:10px; color:var(--ink);}
.theme-options{
  position:absolute; top:calc(100% + 8px); left:0; z-index:20;
  list-style:none; margin:0; padding:6px;
  background:var(--bg-alt); border:1px solid var(--line); border-radius:8px;
  min-width:140px;
  box-shadow:0 12px 24px rgba(0,0,0,0.35);
}
.theme-options[hidden]{display:none;}
.theme-options li{margin:0;}
.theme-options button{
  width:100%; display:flex; align-items:center; gap:10px;
  background:none; border:none; color:var(--ink); font-family:inherit;
  font-size:13.8px;
  padding:8px 10px; border-radius:5px; cursor:pointer; text-align:left;
}
.theme-options button:hover{background:rgba(255,255,255,0.06);}
.theme-options button.active{color:var(--rec);}
.opt-dot{
  width:16px; height:16px; border-radius:50%; flex:none;
  background:linear-gradient(135deg, var(--swatch) 0%, var(--swatch) 50%, var(--swatch-tint) 50%, var(--swatch-tint) 100%);
  border:1px solid rgba(255,255,255,0.4);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.35);
}

/* ---------- rows (por qué) ---------- */
.rows{display:grid; grid-template-columns:repeat(3,1fr); gap:40px;}
.row{display:flex; gap:18px; align-items:flex-start;}
.row-n{color:var(--rec); font-size:14.9px; padding-top:5px; flex:none; width:24px;}
.row h3{font-size:21.8px;}
.row p{color:var(--muted); font-size:17.2px; max-width:52ch;}

/* ---------- steps ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
.tc{display:block; color:var(--rec); font-size:13.8px; margin-bottom:12px;}
.step h3{font-size:18.4px;}
.step p{color:var(--muted); font-size:16.1px; margin:0;}

/* ---------- prices ---------- */
.prices{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.price{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:22px 4px; border-bottom:1px solid var(--line);
  gap:16px; flex-wrap:wrap;
}
.price:hover{background:var(--bg-alt);}
.price.featured .p-amount{color:var(--teal);}
.p-icon{height:52px; width:auto; flex:none; margin-right:6px;}
.p-range{font-size:14.9px; color:var(--muted); flex:1; min-width:140px;}
.p-amount{font-size:41.4px; font-family:'VT323',monospace; font-weight:600;}
.p-amount small{font-family:'Space Mono',monospace; font-size:13.8px; color:var(--muted); font-weight:400; margin-left:4px;}
.p-go{font-size:13.8px; color:var(--muted);}
.price:hover .p-go{color:var(--ink);}
.fine{font-size:13.8px; color:var(--muted); margin-top:20px; max-width:56ch;}

/* ---------- quotes ---------- */
.rating-summary{font-size:16.1px; color:var(--muted); margin-bottom:26px;}
.quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
blockquote{font-style:italic; font-size:19px; max-width:38ch;}
.g-stars{display:block; color:var(--rec); font-style:normal; letter-spacing:2px; margin-bottom:10px; font-size:18.4px;}
cite{display:block; margin-top:10px; font-style:normal; font-family:'Space Mono',monospace; font-size:13.8px; color:var(--muted);}
.google-link{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:30px; font-size:14.9px; color:var(--muted);
  border-bottom:1px solid var(--line); padding-bottom:4px;
}
.google-link:hover{color:var(--ink); border-color:var(--ink);}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; color:var(--ink);
  font-family:'VT323',monospace; font-size:25.3px; padding:20px 0;
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
}
.faq-q span{color:var(--rec); font-family:'Space Mono',monospace; transition:transform .2s ease;}
.faq-item.open .faq-q span{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-item.open .faq-a{max-height:160px; padding-bottom:20px;}
.faq-a p{color:var(--muted); font-size:16.7px; max-width:54ch;}

/* ---------- end ---------- */
.end{text-align:left;}
.end h2{font-size:clamp(32.2px,4vw,43.7px); max-width:16ch;}

/* ---------- footer ---------- */
footer{
  position:relative; z-index:2;
  max-width:1220px; margin:0 auto; padding:32px 32px 60px;
  font-size:13.8px; color:var(--muted);
}
.foot-note{margin-top:6px; opacity:0.7;}
.map-link{text-decoration:underline; text-underline-offset:2px;}
.map-link:hover{color:var(--ink);}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .quotes{grid-template-columns:1fr 1fr;}
  .rows{grid-template-columns:1fr 1fr;}
}
@media (max-width: 640px){
  .steps{grid-template-columns:1fr 1fr;}
  .rows{grid-template-columns:1fr;}
  .quotes{grid-template-columns:1fr;}
  .row{gap:14px;}
  .hero{grid-template-columns:1fr;}
  .hero-photo{order:-1;}

  .bar{flex-wrap:wrap; row-gap:10px; padding:20px 20px;}
  .mark{font-size:22.4px;}
  .bar-right{flex-wrap:wrap; justify-content:flex-end; gap:8px 10px;}
  .theme-trigger{padding:5px 7px;}
  .bar-cta{font-size:13.4px;}
}