/* ===== PRYZMA STUDIO — Design System ===== */
:root{
  --bg:#14120f;
  --bg-alt:#1b1812;
  --panel:#211d16;
  --paper:#ece6d8;
  --paper-dim:#c9c2b0;
  --yellow:#f5b700;
  --yellow-dim:#a97e08;
  --rec:#c8492c;
  --steel:#8a8577;
  --line:rgba(236,230,216,0.12);
  --line-strong:rgba(236,230,216,0.22);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--paper);
  font-family:'Archivo', sans-serif;
  line-height:1.5;
  overflow-x:hidden;
}
::selection{background:var(--yellow); color:var(--bg);}
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:999;
  opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px; letter-spacing:0.18em; text-transform:uppercase; color:var(--yellow);
}
h1,h2,h3{
  font-family:'Big Shoulders Display', sans-serif;
  text-transform:uppercase; line-height:0.92; letter-spacing:0.005em;
}
.wrap{ max-width:1180px; margin:0 auto; padding:0 32px; }

/* Ticker */
.ticker-bar{ background:var(--bg); border-bottom:1px solid var(--line); font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; color:var(--steel); padding:9px 0; }
.ticker-inner{ max-width:1180px; margin:0 auto; padding:0 32px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
.rec-dot{ display:inline-flex; align-items:center; gap:6px; color:var(--rec); }
.rec-dot span.dot{ width:7px; height:7px; border-radius:50%; background:var(--rec); animation:pulse 1.6s infinite ease-in-out; }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:0.25;} }

/* Header */
header{ position:sticky; top:0; z-index:100; background:rgba(20,18,15,0.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
nav{ max-width:1180px; margin:0 auto; padding:18px 32px; display:flex; align-items:center; justify-content:space-between; }
.logo{ font-family:'Big Shoulders Display', sans-serif; font-weight:800; font-size:26px; letter-spacing:0.02em; color:var(--paper); text-decoration:none; display:flex; align-items:center; gap:10px; }
.logo .sq{ width:11px; height:11px; background:var(--yellow); display:inline-block; }
.navlinks{ display:flex; gap:36px; list-style:none; }
.navlinks a{ color:var(--paper-dim); text-decoration:none; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.1em; text-transform:uppercase; transition:color .2s; position:relative; padding-bottom:4px; }
.navlinks a:hover, .navlinks a.active{ color:var(--yellow); }
.navlinks a.active{ border-bottom:1px solid var(--yellow); }
.btn{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; padding:12px 22px; border:1px solid var(--yellow); color:var(--yellow); text-decoration:none; background:transparent; transition:all .25s ease; display:inline-block; white-space:nowrap; cursor:pointer; }
.btn:hover{ background:var(--yellow); color:var(--bg); }
.btn-solid{ background:var(--yellow); color:var(--bg); }
.btn-solid:hover{ background:var(--paper); border-color:var(--paper); color:var(--bg); }
.navcta{ display:flex; align-items:center; gap:20px; }

/* Page hero (interior pages) */
.page-hero{ position:relative; padding:150px 0 90px; border-bottom:1px solid var(--line); overflow:hidden; }
.page-hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 20%, rgba(245,183,0,0.08), transparent 55%); pointer-events:none; }
.page-hero .slate-meta{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; color:var(--paper-dim); text-transform:uppercase; display:flex; gap:26px; flex-wrap:wrap; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--line-strong); }
.page-hero .slate-meta b{ color:var(--yellow); font-weight:500; }
.page-hero h1{ font-size:clamp(40px,7vw,84px); color:var(--paper); max-width:820px; }
.page-hero p.lead{ color:var(--paper-dim); font-size:18px; max-width:560px; margin-top:22px; }

/* Hero (home) */
.hero{ position:relative; min-height:92vh; display:flex; flex-direction:column; justify-content:center; padding:0; }
.letterbox-top, .letterbox-bottom{ position:absolute; left:0; right:0; height:34px; background:var(--bg); z-index:2; }
.letterbox-top{ top:0; } .letterbox-bottom{ bottom:0; }
.hero-inner{ position:relative; z-index:1; }
.slate-meta{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.1em; color:var(--paper-dim); text-transform:uppercase; display:flex; gap:26px; flex-wrap:wrap; margin-bottom:26px; padding-bottom:16px; border-bottom:1px solid var(--line-strong); }
.slate-meta b{ color:var(--yellow); font-weight:500; }
.hero h1{ font-size:clamp(46px, 8vw, 108px); color:var(--paper); max-width:920px; margin-bottom:26px; }
.hero h1 em{ font-style:normal; color:var(--yellow); }
.hero-sub{ font-size:19px; color:var(--paper-dim); max-width:520px; margin-bottom:38px; font-weight:400; }
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.timecode{ margin-top:56px; display:flex; gap:36px; flex-wrap:wrap; font-family:'IBM Plex Mono', monospace; }
.timecode .tc-num{ font-size:13px; color:var(--yellow); letter-spacing:0.05em; }
.timecode .tc-label{ font-size:10px; color:var(--steel); letter-spacing:0.12em; text-transform:uppercase; margin-top:3px;}

/* Marquee */
.marquee-wrap{ background:var(--yellow); overflow:hidden; padding:14px 0; border-top:1px solid var(--bg); border-bottom:1px solid var(--bg); }
.marquee{ display:flex; white-space:nowrap; animation:scroll 32s linear infinite; }
.marquee span{ font-family:'Big Shoulders Display', sans-serif; font-weight:700; font-size:20px; text-transform:uppercase; color:var(--bg); padding:0 28px; display:flex; align-items:center; gap:28px; }
.marquee span::after{ content:"●"; font-size:10px; color:var(--bg); }
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

section{ padding:120px 0; position:relative; }
.section-head{ margin-bottom:64px; max-width:680px; }
.section-head .eyebrow{ margin-bottom:14px; display:block; }
.section-head h2{ font-size:clamp(34px,5vw,58px); color:var(--paper); }
.section-head p{ color:var(--paper-dim); font-size:17px; margin-top:18px; max-width:560px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* About */
.about{ background:var(--bg); border-top:1px solid var(--line); }
.about-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:70px; align-items:start; }
.about-text p{ color:var(--paper-dim); font-size:17px; margin-bottom:20px; max-width:520px; }
.about-text strong{ color:var(--paper); font-weight:600; }
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.stat-card{ background:var(--bg); padding:32px 26px; }
.stat-card .num{ font-family:'Big Shoulders Display'; font-size:52px; color:var(--yellow); line-height:1;}
.stat-card .lbl{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel); margin-top:10px;}

/* Services (compact list, used on home) */
.services{ background:var(--bg-alt); }
.service-list{ border-top:1px solid var(--line-strong); }
.service-row{ display:grid; grid-template-columns:90px 1fr 1.3fr 140px; align-items:center; gap:30px; padding:34px 0; border-bottom:1px solid var(--line); transition:background .25s; text-decoration:none; }
.service-row:hover{ background:rgba(245,183,0,0.03); }
.service-row .idx{ font-family:'IBM Plex Mono', monospace; color:var(--yellow-dim); font-size:14px; }
.service-row h3{ font-family:'Big Shoulders Display'; font-size:26px; color:var(--paper); text-transform:none; letter-spacing:0; }
.service-row p{ color:var(--paper-dim); font-size:15px; }
.service-row .tag{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--steel); letter-spacing:0.06em; text-transform:uppercase; text-align:right; }

/* Services detail (services page) */
.service-detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line); }
.service-detail-card{ background:var(--bg); padding:50px 44px; }
.service-detail-card .idx{ font-family:'IBM Plex Mono', monospace; color:var(--yellow-dim); font-size:13px; letter-spacing:0.08em; display:block; margin-bottom:18px; }
.service-detail-card h3{ font-family:'Big Shoulders Display'; font-size:32px; color:var(--paper); text-transform:none; letter-spacing:0; margin-bottom:14px; }
.service-detail-card p{ color:var(--paper-dim); font-size:15.5px; margin-bottom:20px; }
.service-detail-card ul{ list-style:none; }
.service-detail-card li{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--steel); letter-spacing:0.03em; padding:8px 0; border-top:1px solid var(--line); }
.service-detail-card li:first-child{ border-top:none; }
.service-detail-card li::before{ content:"— "; color:var(--yellow-dim); }

/* Portfolio grid */
.portfolio{ background:var(--bg); }
.pf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.pf-item{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--panel); text-decoration:none; display:block; cursor:pointer; }
.pf-item iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.pf-item img{ width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(35%) contrast(1.05); transition:transform .6s ease, filter .4s ease; }
.pf-item:hover img{ transform:scale(1.06); filter:grayscale(0%) contrast(1.05); }
.pf-overlay{ position:absolute; inset:0; z-index:2; background:linear-gradient(0deg, rgba(20,18,15,0.92) 0%, rgba(20,18,15,0) 50%); display:flex; align-items:flex-end; padding:22px; }
.pf-overlay .pf-cat{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--yellow); display:block; margin-bottom:4px;}
.pf-overlay .pf-title{ font-family:'Archivo'; font-size:14px; color:var(--paper); font-weight:600;}
.pf-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; border:1px solid var(--paper); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s, transform .3s; z-index:3;}
.pf-item:hover .pf-play{ opacity:1; }
.pf-play::before{ content:""; width:0; height:0; border-style:solid; border-width:7px 0 7px 12px; border-color:transparent transparent transparent var(--paper); margin-left:3px;}

.filter-row{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:46px; }
.filter-btn{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; padding:9px 16px; border:1px solid var(--line-strong); color:var(--paper-dim); background:transparent; cursor:pointer; transition:all .2s; }
.filter-btn:hover{ border-color:var(--yellow); color:var(--yellow); }
.filter-btn.active{ background:var(--yellow); border-color:var(--yellow); color:var(--bg); }

/* Team */
.team{ background:var(--bg-alt); }
.team-card{ display:grid; grid-template-columns:280px 1fr; gap:56px; align-items:center; }
.team-photo{ position:relative; }
.team-photo img{ width:100%; aspect-ratio:3/4; object-fit:cover; filter:grayscale(20%); border:1px solid var(--line-strong); }
.team-photo .frame-tag{ position:absolute; bottom:-1px; left:-1px; background:var(--yellow); color:var(--bg); font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em; padding:6px 10px; text-transform:uppercase; }
.team-copy h3{ font-size:38px; color:var(--paper); margin-bottom:16px; }
.team-copy p{ color:var(--paper-dim); font-size:16px; margin-bottom:14px; max-width:520px; }
.team-copy .role{ color:var(--yellow); font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:18px; display:block;}
.social-row{ display:flex; gap:18px; margin-top:22px; }
.social-row a{ color:var(--paper-dim); text-decoration:none; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.05em; border-bottom:1px solid var(--line-strong); padding-bottom:3px; transition:color .2s, border-color .2s;}
.social-row a:hover{ color:var(--yellow); border-color:var(--yellow); }

/* Process steps (nosotros page) */
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.process-card{ background:var(--bg); padding:34px 28px; }
.process-card .idx{ font-family:'Big Shoulders Display'; font-size:40px; color:var(--yellow-dim); display:block; margin-bottom:14px;}
.process-card h4{ font-family:'Archivo'; font-weight:700; font-size:16px; color:var(--paper); text-transform:uppercase; letter-spacing:0.02em; margin-bottom:10px;}
.process-card p{ font-size:14px; color:var(--paper-dim); }

/* Testimonials */
.testimonials{ background:var(--bg); }
.test-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.test-card{ background:var(--bg); padding:38px 32px; display:flex; flex-direction:column; justify-content:space-between; min-height:260px;}
.stars{ color:var(--yellow); font-size:14px; letter-spacing:2px; margin-bottom:18px; }
.test-card p{ color:var(--paper-dim); font-size:15.5px; line-height:1.65; flex-grow:1; }
.test-card .who{ margin-top:24px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--paper); letter-spacing:0.05em; text-transform:uppercase; border-top:1px solid var(--line); padding-top:16px;}

/* CTA banner */
.cta-banner{ background:var(--yellow); color:var(--bg); text-align:center; padding:110px 0; }
.cta-banner .eyebrow{ color:var(--bg); opacity:0.65; }
.cta-banner h2{ color:var(--bg); font-size:clamp(36px,6vw,72px); margin:18px 0 34px; }
.cta-banner .btn{ border-color:var(--bg); color:var(--bg); }
.cta-banner .btn:hover{ background:var(--bg); color:var(--yellow); }

/* Contact page */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line); }
.contact-panel{ background:var(--bg); padding:50px 44px; }
.form-group{ margin-bottom:24px; }
.form-group label{ display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel); margin-bottom:10px; }
.form-group input, .form-group select, .form-group textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-strong);
  color:var(--paper); font-family:'Archivo'; font-size:15px; padding:10px 2px; outline:none; transition:border-color .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ border-color:var(--yellow); }
.form-group select option{ background:var(--bg); }
.form-group textarea{ resize:vertical; min-height:100px; }
.contact-info-item{ margin-bottom:32px; }
.contact-info-item .lbl{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--steel); margin-bottom:8px; display:block;}
.contact-info-item .val{ font-size:19px; color:var(--paper); text-decoration:none; display:block; }
.contact-info-item .val:hover{ color:var(--yellow); }

/* Footer */
footer{ background:var(--bg); padding:70px 0 30px; border-top:1px solid var(--line); }
.foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:50px; margin-bottom:60px; }
.foot-logo{ font-family:'Big Shoulders Display'; font-size:28px; color:var(--paper); text-transform:uppercase; margin-bottom:16px; }
.foot-grid p, .foot-grid a{ color:var(--paper-dim); font-size:14.5px; text-decoration:none; line-height:1.9; }
.foot-grid a:hover{ color:var(--yellow); }
.foot-col h4{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel); margin-bottom:16px; }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; border-top:1px solid var(--line); padding-top:26px; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--steel); letter-spacing:0.05em; }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

@media (max-width: 860px){
  .navlinks{ display:none; }
  .about-grid, .team-card, .contact-grid{ grid-template-columns:1fr; }
  .pf-grid{ grid-template-columns:repeat(2,1fr); }
  .test-grid, .service-detail-grid{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:34px; }
  .service-row{ grid-template-columns:50px 1fr; grid-template-areas:"idx title" ". desc" ". tag"; }
  .service-row .idx{grid-area:idx;} .service-row h3{grid-area:title;} .service-row p{grid-area:desc;} .service-row .tag{grid-area:tag; text-align:left; margin-top:6px;}
}
@media (max-width:560px){
  .pf-grid{ grid-template-columns:1fr 1fr; }
  .process-grid{ grid-template-columns:1fr; }
  section{ padding:80px 0; }
}