:root {
  --bg:#fbfaf7;
  --bg2:#f4f1e9;
  --card:#ffffff;
  --text:#121212;
  --muted:#746f66;
  --line:rgba(18,18,18,.09);
  --black:#111111;
  --gold:#b89445;
  --gold2:#d7bc7a;
  --gold-soft:#f4ecd9;
  --green:#2fbe73;
  --shadow:0 24px 60px rgba(45,37,21,.08);
  --shadow-lg:0 36px 90px rgba(45,37,21,.12);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Manrope",sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 5% 0%,rgba(184,148,69,.07),transparent 25%),
    radial-gradient(circle at 100% 5%,rgba(0,0,0,.025),transparent 22%),
    var(--bg);
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.017;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
img{display:block;max-width:100%}
.container{width:min(1160px,calc(100% - 30px));margin:auto}
.section{padding:94px 0;position:relative}
.kicker{
  display:inline-flex;align-items:center;gap:9px;
  color:#8c6d2d;font-size:9px;font-weight:800;letter-spacing:.15em;text-transform:uppercase
}
.kicker::before{content:"";width:24px;height:1px;background:var(--gold)}
.cursor-glow{
  position:fixed;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:-1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(184,148,69,.075),transparent 65%)
}

header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  border-bottom:1px solid transparent;transition:.25s ease
}
header.scrolled{
  background:rgba(251,250,247,.9);
  backdrop-filter:blur(18px);
  border-color:var(--line);
  box-shadow:0 10px 30px rgba(45,37,21,.035)
}
.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{
  width:48px;height:48px;border-radius:50%;object-fit:cover;border:1px solid rgba(184,148,69,.28);
  box-shadow:0 8px 24px rgba(45,37,21,.11);transition:.25s ease
}
.brand:hover img{transform:rotate(-4deg) scale(1.04)}
.brand-copy{display:grid}
.brand-copy strong{font:700 16px "Space Grotesk";letter-spacing:-.02em}
.brand-copy small{font-size:9px;color:#8a8377;margin-top:2px}
.nav-links{display:flex;align-items:center;gap:26px;font-size:12px;font-weight:700;color:#504a42}
.nav-links>a:not(.nav-cta){position:relative;padding:8px 0}
.nav-links>a:not(.nav-cta)::after{
  content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--gold);transition:.22s ease
}
.nav-links>a:not(.nav-cta):hover::after{right:0}
.nav-cta{
  padding:12px 16px;border-radius:13px;background:var(--black);color:white;
  box-shadow:0 10px 26px rgba(0,0,0,.13);transition:.22s ease
}
.nav-cta:hover{transform:translateY(-2px)}
.menu{display:none;border:0;background:none;font-size:24px;color:var(--black);cursor:pointer}

.hero{
  min-height:100vh;display:grid;align-items:center;padding:126px 0 78px;overflow:hidden;position:relative
}
.hero::before{
  content:"";position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);
  background-size:70px 70px;
  mask-image:linear-gradient(to bottom,black,transparent 82%)
}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:78px;align-items:center;position:relative;z-index:2}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;padding:8px 12px;border:1px solid var(--line);
  border-radius:999px;background:rgba(255,255,255,.82);font-size:9px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:#5d574f
}
.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(47,190,115,.09)}
h1{
  font:700 clamp(52px,7vw,86px)/.95 "Space Grotesk";
  letter-spacing:-.06em;margin:24px 0 22px
}
h1 span{
  color:transparent;background:linear-gradient(90deg,#1b1b1b,#6e6659 55%,#a47e34);
  -webkit-background-clip:text;background-clip:text
}
.hero-copy p{max-width:630px;color:var(--muted);font-size:16px;line-height:1.75;margin:0 0 30px}
.hero-actions{display:flex;gap:11px;flex-wrap:wrap}
.btn{
  min-height:52px;padding:0 20px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  gap:10px;font-size:12px;font-weight:800;border:1px solid var(--line);position:relative;overflow:hidden;transition:.22s ease
}
.btn::before{
  content:"";position:absolute;left:-120%;top:0;width:85%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-20deg);transition:left .55s ease
}
.btn:hover::before{left:140%}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--black);color:white;border-color:var(--black);box-shadow:0 14px 34px rgba(0,0,0,.14)}
.btn.secondary{background:#fff;color:var(--black)}
.hero-meta{display:flex;flex-wrap:wrap;gap:20px;margin-top:33px;color:#7c756b;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.hero-meta span::before{content:"•";color:var(--gold);margin-right:8px}

.hero-showcase{min-height:560px;position:relative}
.device{
  position:absolute;border-radius:26px;border:1px solid rgba(20,20,20,.09);background:white;
  box-shadow:var(--shadow-lg);overflow:hidden;transition:.3s ease
}
.device:hover{transform:translateY(-6px)!important}
.device.main{width:78%;right:0;top:6%;transform:rotate(1.8deg)}
.device.second{width:54%;left:0;bottom:7%;transform:rotate(-4deg)}
.device.third{width:38%;right:-2%;bottom:-1%;transform:rotate(5deg)}
.browser-top{height:28px;background:#f1eee8;display:flex;align-items:center;gap:5px;padding:0 10px}
.browser-top i{width:5px;height:5px;border-radius:50%;background:#c7beb0}
.preview{aspect-ratio:1.25/1;display:grid;place-items:center;text-align:center;padding:22px;position:relative;overflow:hidden}
.preview small{font-size:7px;letter-spacing:.18em;font-weight:800;opacity:.65}
.preview strong{font:700 clamp(18px,3vw,34px)/1 "Space Grotesk";letter-spacing:.04em;margin-top:8px}
.preview.urban{background:radial-gradient(circle at 50% 28%,rgba(184,148,69,.20),transparent 35%),linear-gradient(145deg,#18191b,#2c2d2f);color:white}
.preview.exclusiv{background:linear-gradient(145deg,#171717,#050505);color:#eee2c5}
.preview.angeles{background:linear-gradient(145deg,#faedf3,#efcad9);color:#722c49}
.project-bubble{
  position:absolute;left:20%;top:2%;padding:10px 12px;border:1px solid var(--line);border-radius:13px;
  background:rgba(255,255,255,.91);backdrop-filter:blur(12px);box-shadow:0 12px 28px rgba(45,37,21,.08);
  font-size:9px;color:#5f594f;animation:bubble 5s ease-in-out infinite
}
@keyframes bubble{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

.trust-strip{border-block:1px solid var(--line);background:rgba(255,255,255,.52)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust-item{padding:22px;border-right:1px solid var(--line);text-align:center}
.trust-item:last-child{border-right:0}
.trust-item strong{display:block;font:700 20px "Space Grotesk"}
.trust-item span{display:block;color:#817a70;font-size:9px;margin-top:4px;text-transform:uppercase;letter-spacing:.08em}

.section-head{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:end;margin-bottom:44px}
.section-head h2{font:700 clamp(36px,5vw,58px)/1 "Space Grotesk";letter-spacing:-.05em;margin:10px 0 0}
.section-head p{color:var(--muted);font-size:12px;line-height:1.7;justify-self:end;max-width:470px;margin:0}

.portfolio-section{background:linear-gradient(180deg,#fff,rgba(255,255,255,0))}
.portfolio-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px}
.project-card{
  border-radius:28px;border:1px solid var(--line);background:#fff;overflow:hidden;box-shadow:0 14px 40px rgba(45,37,21,.045);
  transition:.28s ease
}
.project-card:hover{transform:translateY(-7px);box-shadow:var(--shadow-lg);border-color:rgba(184,148,69,.2)}
.project-card.large{grid-row:span 2}
.project-media{min-height:330px;position:relative;display:grid;place-items:center;overflow:hidden}
.large .project-media{min-height:520px}
.project-card:nth-child(1) .project-media{background:radial-gradient(circle at 50% 30%,rgba(184,148,69,.20),transparent 35%),linear-gradient(145deg,#17181a,#292b2e);color:white}
.project-card:nth-child(2) .project-media{background:linear-gradient(145deg,#171717,#050505);color:#f0e4c6}
.project-card:nth-child(3) .project-media{background:linear-gradient(145deg,#faedf3,#f1c9da);color:#6d2744}
.project-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.15),transparent 55%);opacity:0;transition:.3s ease}
.project-card:hover .project-media::after{opacity:1}
.project-logo{font:700 clamp(30px,5vw,58px)/1 "Space Grotesk";letter-spacing:.06em;text-align:center;transition:.3s ease}
.project-card:hover .project-logo{transform:scale(1.035)}
.project-content{padding:23px}
.project-content small{font-size:7px;color:var(--gold-dark,#87682e);font-weight:800;letter-spacing:.15em}
.project-content h3{font:700 24px "Space Grotesk";margin:6px 0 7px}
.project-content p{font-size:10px;color:#7b746a;line-height:1.65;margin:0 0 14px}
.project-points{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:17px}
.project-points span{padding:6px 8px;border-radius:999px;background:#f6f1e6;color:#776746;font-size:8px;font-weight:700}
.live-link{display:inline-flex;align-items:center;gap:8px;color:#8a6b2d;font-size:9px;font-weight:800}
.live-link span{transition:.2s ease}
.project-card:hover .live-link span{transform:translateX(4px)}

.services-section{background:linear-gradient(180deg,rgba(244,241,233,.7),rgba(251,250,247,0))}
.services-carousel{overflow:hidden}
.service-track{
  display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;padding:4px 0 12px
}
.service-track::-webkit-scrollbar{display:none}
.service-card{
  flex:0 0 calc((100% - 28px)/3);scroll-snap-align:start;min-height:510px;padding:26px;
  border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 40px rgba(45,37,21,.04);
  transition:.28s ease;position:relative;overflow:hidden
}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(184,148,69,.2)}
.service-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:26px}
.service-num{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--gold-soft);color:#85682f;font-size:9px;font-weight:800}
.service-badge{padding:7px 10px;border-radius:999px;background:#171717;color:#f1dfb1;font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.service-card h3{font:700 24px "Space Grotesk";margin:0 0 8px}
.service-intro{font-size:11px;color:#777064;line-height:1.7;margin:0 0 18px}
.service-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.service-list li{position:relative;padding-left:24px;color:#554f47;font-size:10px;font-weight:600;line-height:1.45}
.service-list li::before{
  content:"✓";position:absolute;left:0;top:-1px;width:17px;height:17px;border-radius:6px;
  display:grid;place-items:center;background:#f4ecd9;color:#886b2f;font-size:9px;font-weight:900
}
.service-foot{margin-top:20px;padding-top:15px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#8b8377}
.carousel-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:14px}
.carousel-dots{display:flex;gap:7px}
.carousel-dot{width:7px;height:7px;border:0;border-radius:999px;background:#d9d0c0;padding:0;transition:.2s ease}
.carousel-dot.active{width:24px;background:linear-gradient(90deg,#171717,var(--gold))}
.carousel-arrows{display:flex;gap:8px}
.carousel-arrow{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#fff;cursor:pointer;transition:.2s ease}
.carousel-arrow:hover{background:#171717;color:#f1dfb1;transform:translateY(-2px)}

.pricing-section{background:#f2eee5;border-block:1px solid rgba(16,16,16,.05)}
.plan-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 0 18px;margin-bottom:17px}
.plan-tabs::-webkit-scrollbar{display:none}
.plan-tab{flex:0 0 auto;border:1px solid var(--line);background:#fff;color:#6b645a;border-radius:999px;padding:11px 15px;font-size:9px;font-weight:800;cursor:pointer;transition:.2s ease}
.plan-tab.active{background:#171717;color:#f1dfb1;border-color:#171717;box-shadow:0 10px 24px rgba(0,0,0,.1)}
.plan-panel{display:none;animation:fade .3s ease}
.plan-panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.plan-intro{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:20px;padding:18px 20px;border-radius:18px;background:rgba(255,255,255,.58);border:1px solid var(--line)}
.plan-intro h3{font:700 24px "Space Grotesk";margin:4px 0 0}
.plan-intro p{max-width:520px;color:#746d62;font-size:9px;line-height:1.65;margin:0}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.price-card{padding:28px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 36px rgba(45,37,21,.045);position:relative;transition:.28s ease}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.price-card.featured{border-color:rgba(184,148,69,.28);box-shadow:0 20px 50px rgba(82,63,27,.09)}
.popular{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#171717;color:#f1dfb1;padding:5px 10px;border-radius:999px;font-size:7px;font-weight:800;letter-spacing:.1em;white-space:nowrap}
.price-tag{font-size:8px;color:#896b2e;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.price-card h3{font:700 23px "Space Grotesk";margin:9px 0 23px}
.price-label{font-size:8px;color:#91897e;text-transform:uppercase;letter-spacing:.1em}
.price{font:700 35px "Space Grotesk";letter-spacing:-.045em;padding:5px 0 21px;border-bottom:1px solid var(--line)}
.price-card ul{list-style:none;padding:20px 0;margin:0;display:grid;gap:10px;min-height:275px}
.price-card li{font-size:10px;color:#696258}
.price-card li::before{content:"✓";color:#8b6d31;margin-right:8px}
.price-btn{display:block;text-align:center;padding:13px;border-radius:11px;background:#faf7f0;border:1px solid var(--line);font-size:9px;font-weight:800;transition:.2s ease}
.price-btn:hover{background:#f3ebda}
.featured .price-btn{background:#171717;color:#fff;border-color:#171717}
.price-note{margin:18px 0 0;color:#8a8378;font-size:9px;line-height:1.65}

.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.process-card{padding:24px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(45,37,21,.035)}
.process-card span{font:700 12px "Space Grotesk";color:#9a7a39}
.process-card h3{font:700 19px "Space Grotesk";margin:18px 0 8px}
.process-card p{margin:0;color:#7a7368;font-size:10px;line-height:1.65}

.contact-section{padding-top:30px}
.contact-box{
  border-radius:30px;background:
    radial-gradient(circle at 88% 10%,rgba(184,148,69,.18),transparent 26%),
    linear-gradient(135deg,#101010,#1d1d1d);
  color:#fff;padding:54px;display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;
  box-shadow:var(--shadow-lg);overflow:hidden;position:relative
}
.contact-box h2{font:700 clamp(36px,5vw,56px)/1 "Space Grotesk";letter-spacing:-.05em;margin:10px 0 12px}
.contact-box p{color:#bdb6ab;font-size:11px;line-height:1.7;margin:0;max-width:500px}
.contact-points{display:grid;gap:10px;margin-top:24px}
.contact-points span{font-size:9px;color:#d4cfc6}
.contact-points span::before{content:"✓";color:#d7bc7a;margin-right:8px}
.contact-actions{display:grid;gap:12px}
.whatsapp-card{padding:20px;border-radius:20px;background:#fff;color:#171717;display:flex;align-items:center;justify-content:space-between;gap:20px}
.whatsapp-card .icon{width:48px;height:48px;border-radius:15px;background:#25D366;color:#fff;display:grid;place-items:center;font-size:23px;box-shadow:0 12px 28px rgba(37,211,102,.2)}
.whatsapp-card strong{display:block;font:700 16px "Space Grotesk"}
.whatsapp-card small{display:block;color:#837d74;font-size:8px;margin-top:3px}
.whatsapp-btn{padding:11px 13px;border:0;border-radius:11px;background:#25D366;color:white;font-size:9px;font-weight:800;cursor:pointer}
.contact-mini{padding:17px 19px;border:1px solid rgba(255,255,255,.1);border-radius:18px;color:#c7c1b7;font-size:9px;line-height:1.6}

footer{padding:32px 0;border-top:1px solid var(--line);background:#fff}
footer .container{display:flex;align-items:center;justify-content:space-between;gap:20px}
footer p{margin:0;color:#80796f;font-size:9px}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .72s cubic-bezier(.2,.8,.2,1),transform .72s cubic-bezier(.2,.8,.2,1)}
.reveal.visible{opacity:1;transform:none}
.delay1{transition-delay:.08s}
.delay2{transition-delay:.16s}

@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:50px}
  .hero-showcase{min-height:520px}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .trust-item:nth-child(2){border-right:0}
  .trust-item:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .section-head{grid-template-columns:1fr;gap:18px}
  .section-head p{justify-self:start}
  .portfolio-grid{grid-template-columns:1fr}
  .project-card.large{grid-row:auto}
  .large .project-media,.project-media{min-height:330px}
  .service-card{flex-basis:calc((100% - 14px)/2)}
  .price-grid{grid-template-columns:1fr;max-width:680px;margin:auto}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .contact-box{grid-template-columns:1fr}
}
@media(max-width:700px){
  .container{width:min(100% - 24px,1160px)}
  .section{padding:72px 0}
  .nav{min-height:70px}
  .brand-copy small{display:none}
  .menu{display:block;position:relative;z-index:70}
  .nav-links{
    position:fixed;inset:70px 0 auto 0;background:rgba(251,250,247,.98);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);display:none;flex-direction:column;align-items:stretch;padding:20px;gap:10px
  }
  .nav-links.open{display:flex}
  .nav-links>a{padding:12px 4px!important}
  .nav-cta{text-align:center}
  .hero{min-height:auto;padding:116px 0 68px}
  h1{font-size:clamp(48px,15vw,68px)}
  .hero-copy p{font-size:14px}
  .hero-actions{display:grid;grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
  .hero-showcase{min-height:420px}
  .device.main{width:84%}
  .device.second{width:58%}
  .device.third{width:42%}
  .trust-grid{grid-template-columns:1fr 1fr}
  .trust-item{padding:18px 10px}
  .section-head h2{font-size:40px}
  .service-card{flex-basis:calc(100% - 28px);min-height:auto}
  .carousel-dots{display:none}
  .plan-tabs{margin-right:-12px;padding-right:28px}
  .plan-intro{flex-direction:column;align-items:flex-start}
  .price-card ul{min-height:0}
  .process-grid{grid-template-columns:1fr}
  .contact-box{padding:34px 24px}
  .whatsapp-card{align-items:flex-start;flex-wrap:wrap}
  footer .container{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

/* ===== SERVICIOS XL / MÁS PROTAGONISTAS ===== */
.services-section{
  padding-top:110px;
  padding-bottom:110px;
}

.services-section .section-head{
  margin-bottom:54px;
}

.services-section .section-head h2{
  font-size:clamp(44px,5.5vw,68px);
  max-width:760px;
}

.services-section .section-head p{
  font-size:13px;
  max-width:520px;
}

.service-track{
  gap:20px;
  padding:8px 0 18px;
}

.service-card{
  flex:0 0 calc((100% - 20px)/2) !important;
  min-height:650px;
  padding:34px;
  border-radius:28px;
  border:1px solid rgba(18,18,18,.10);
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.94));
  box-shadow:0 18px 48px rgba(45,37,21,.055);
}

.service-card::after{
  content:"";
  position:absolute;
  width:240px;
  height:240px;
  border-radius:50%;
  right:-110px;
  bottom:-120px;
  background:radial-gradient(circle,rgba(184,148,69,.13),transparent 67%);
  pointer-events:none;
  transition:transform .35s ease;
}

.service-card::before{
  content:"";
  position:absolute;
  left:28px;
  right:28px;
  top:0;
  height:3px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,var(--black),var(--gold),transparent);
  opacity:.7;
}

.service-card:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 72px rgba(45,37,21,.11);
}

.service-card:hover::after{
  transform:scale(1.15);
}

.service-top{
  margin-bottom:34px;
}

.service-num{
  width:54px;
  height:54px;
  border-radius:16px;
  font-size:11px;
  box-shadow:inset 0 0 0 1px rgba(184,148,69,.08);
}

.service-badge{
  padding:9px 13px;
  font-size:9px;
  letter-spacing:.12em;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.service-card h3{
  font-size:32px;
  line-height:1.02;
  letter-spacing:-.04em;
  margin-bottom:12px;
}

.service-intro{
  font-size:13px;
  line-height:1.75;
  max-width:92%;
  margin-bottom:24px;
  color:#6d675e;
}

.service-list{
  gap:13px;
}

.service-list li{
  padding-left:30px;
  font-size:12px;
  line-height:1.5;
  color:#4d4841;
}

.service-list li::before{
  width:20px;
  height:20px;
  border-radius:7px;
  font-size:10px;
  top:-1px;
  background:linear-gradient(135deg,#f6efdf,#efe1c2);
  color:#7c5f29;
  box-shadow:inset 0 0 0 1px rgba(184,148,69,.12);
}

.service-foot{
  margin-top:28px;
  padding-top:20px;
  font-size:9px;
}

.carousel-row{
  margin-top:22px;
}

.carousel-arrow{
  width:50px;
  height:50px;
  font-size:18px;
  box-shadow:0 10px 24px rgba(45,37,21,.06);
}

.carousel-dot{
  width:8px;
  height:8px;
}

.carousel-dot.active{
  width:30px;
}

/* pequeño encabezado interior para dar más presencia */
.service-card .service-badge,
.service-card .service-num,
.service-card h3,
.service-card .service-intro,
.service-card .service-list,
.service-card .service-foot{
  position:relative;
  z-index:2;
}

@media(max-width:980px){
  .service-card{
    flex-basis:calc((100% - 14px)/2) !important;
    min-height:620px;
    padding:30px;
  }
  .service-card h3{
    font-size:28px;
  }
  .service-list li{
    font-size:11px;
  }
}

@media(max-width:700px){
  .services-section{
    padding-top:82px;
    padding-bottom:82px;
  }

  .services-section .section-head{
    margin-bottom:34px;
  }

  .services-section .section-head h2{
    font-size:43px;
  }

  .service-track{
    gap:14px;
    padding-right:26px;
  }

  .service-card{
    flex-basis:calc(100% - 18px) !important;
    min-height:auto;
    padding:28px 24px 30px;
    border-radius:26px;
  }

  .service-card::before{
    left:22px;
    right:22px;
  }

  .service-top{
    margin-bottom:28px;
  }

  .service-num{
    width:50px;
    height:50px;
  }

  .service-card h3{
    font-size:31px;
  }

  .service-intro{
    font-size:12px;
    max-width:100%;
    margin-bottom:22px;
  }

  .service-list{
    gap:12px;
  }

  .service-list li{
    font-size:11.5px;
    padding-left:28px;
  }

  .service-list li::before{
    width:19px;
    height:19px;
  }

  .carousel-row{
    margin-top:16px;
  }

  .carousel-arrow{
    width:46px;
    height:46px;
  }
}


/* ===== MEJORA GLOBAL DE LEGIBILIDAD ===== */

/* navegación y marca */
.brand-copy small{
  font-size:11px !important;
}
.nav-links{
  font-size:13px !important;
}
.nav-cta{
  font-size:12px !important;
}

/* etiquetas superiores */
.eyebrow{
  font-size:11px !important;
}
.kicker{
  font-size:11px !important;
}
.hero-meta{
  font-size:11px !important;
  gap:18px 24px !important;
}

/* cuerpo general */
.hero-copy p{
  font-size:18px !important;
  line-height:1.7 !important;
}
.section-head p{
  font-size:14px !important;
  line-height:1.75 !important;
}

/* franja de confianza */
.trust-item span{
  font-size:11px !important;
}
.trust-item strong{
  font-size:24px !important;
}

/* portafolio */
.project-content small{
  font-size:9px !important;
}
.project-content h3{
  font-size:27px !important;
}
.project-content p{
  font-size:12px !important;
  line-height:1.7 !important;
}
.project-points span{
  font-size:10px !important;
  padding:7px 10px !important;
}
.live-link{
  font-size:11px !important;
}

/* servicios */
.service-badge{
  font-size:10px !important;
}
.service-intro{
  font-size:14px !important;
}
.service-list li{
  font-size:13px !important;
}
.service-foot{
  font-size:10px !important;
}

/* tabs de planes */
.plan-tab{
  font-size:11px !important;
  padding:12px 17px !important;
}
.plan-intro p{
  font-size:11px !important;
  line-height:1.7 !important;
}

/* cards de precio */
.price-tag{
  font-size:10px !important;
}
.price-label{
  font-size:10px !important;
}
.price-card li{
  font-size:12px !important;
  line-height:1.5 !important;
}
.price-btn{
  font-size:11px !important;
  padding:14px !important;
}
.price-note{
  font-size:11px !important;
  line-height:1.7 !important;
}

/* proceso */
.process-card span{
  font-size:14px !important;
}
.process-card h3{
  font-size:22px !important;
}
.process-card p{
  font-size:12px !important;
  line-height:1.7 !important;
}

/* contacto */
.contact-box p{
  font-size:13px !important;
}
.contact-points span{
  font-size:11px !important;
}
.whatsapp-card small{
  font-size:10px !important;
}
.whatsapp-btn{
  font-size:11px !important;
  padding:12px 15px !important;
}
.contact-mini{
  font-size:11px !important;
  line-height:1.7 !important;
}

/* footer */
footer p{
  font-size:11px !important;
}

/* textos dentro de previews */
.preview small{
  font-size:9px !important;
}
.project-bubble{
  font-size:11px !important;
}

/* botones generales */
.btn{
  font-size:13px !important;
}

/* escritorio grande */
@media(min-width:1100px){
  .hero-copy p{
    font-size:19px !important;
  }
  .section-head p{
    font-size:15px !important;
  }
  .service-list li{
    font-size:13.5px !important;
  }
  .price-card li{
    font-size:12.5px !important;
  }
}

/* tablet */
@media(max-width:980px){
  .hero-copy p{
    font-size:17px !important;
  }
  .section-head p{
    font-size:13.5px !important;
  }
  .service-list li{
    font-size:12.5px !important;
  }
}

/* celular */
@media(max-width:700px){
  .brand-copy strong{
    font-size:16px !important;
  }

  .nav-links{
    font-size:15px !important;
  }

  .eyebrow{
    font-size:10px !important;
  }

  .hero-copy p{
    font-size:16px !important;
  }

  .hero-meta{
    font-size:10px !important;
  }

  .section-head p{
    font-size:13px !important;
  }

  .trust-item span{
    font-size:10px !important;
  }

  .project-content small{
    font-size:9px !important;
  }

  .project-content h3{
    font-size:24px !important;
  }

  .project-content p{
    font-size:12px !important;
  }

  .project-points span{
    font-size:9.5px !important;
  }

  .live-link{
    font-size:10.5px !important;
  }

  .service-badge{
    font-size:9px !important;
  }

  .service-intro{
    font-size:13px !important;
  }

  .service-list li{
    font-size:12px !important;
    line-height:1.55 !important;
  }

  .service-foot{
    font-size:9.5px !important;
  }

  .plan-tab{
    font-size:10px !important;
  }

  .plan-intro p{
    font-size:11px !important;
  }

  .price-tag{
    font-size:9px !important;
  }

  .price-label{
    font-size:9px !important;
  }

  .price-card li{
    font-size:11.5px !important;
  }

  .price-btn{
    font-size:11px !important;
  }

  .price-note{
    font-size:10px !important;
  }

  .process-card span{
    font-size:13px !important;
  }

  .process-card h3{
    font-size:21px !important;
  }

  .process-card p{
    font-size:11.5px !important;
  }

  .contact-box p{
    font-size:12px !important;
  }

  .contact-points span{
    font-size:10.5px !important;
  }

  .whatsapp-card strong{
    font-size:17px !important;
  }

  .whatsapp-card small{
    font-size:9.5px !important;
  }

  .contact-mini{
    font-size:10.5px !important;
  }

  footer p{
    font-size:10px !important;
  }
}


/* ===== LOGOS REALES DE PROYECTOS ===== */
.preview.project-logo-preview{
  padding:22px;
}
.preview.project-logo-preview img{
  width:min(72%,240px);
  max-height:75%;
  object-fit:contain;
  border-radius:18px;
  box-shadow:0 14px 34px rgba(0,0,0,.16);
  transition:.3s ease;
}
.device:hover .project-logo-preview img{
  transform:scale(1.035);
}

.project-media.real-logo{
  padding:28px;
}
.project-media.real-logo img{
  position:relative;
  z-index:2;
  width:min(76%,340px);
  max-height:78%;
  object-fit:contain;
  border-radius:24px;
  box-shadow:0 22px 55px rgba(0,0,0,.16);
  transition:.32s ease;
}
.project-card:hover .project-media.real-logo img{
  transform:scale(1.035);
}
.project-card:nth-child(1) .project-media.real-logo{
  background:
    radial-gradient(circle at 50% 30%,rgba(184,148,69,.16),transparent 36%),
    linear-gradient(145deg,#17181a,#292b2e);
}
.project-card:nth-child(2) .project-media.real-logo{
  background:
    radial-gradient(circle at 50% 32%,rgba(184,148,69,.12),transparent 38%),
    linear-gradient(145deg,#111,#242424);
}
.project-card:nth-child(3) .project-media.real-logo{
  background:
    radial-gradient(circle at 50% 34%,rgba(255,255,255,.34),transparent 42%),
    linear-gradient(145deg,#f9eaf1,#edc3d5);
}

@media(max-width:700px){
  .preview.project-logo-preview img{
    width:min(78%,210px);
    border-radius:15px;
  }
  .project-media.real-logo{
    padding:20px;
  }
  .project-media.real-logo img{
    width:min(82%,300px);
    border-radius:20px;
  }
}


/* ===== TIPOGRAFÍA MÁS GRANDE + TEXTOS MÁS LIMPIOS ===== */
body{
  font-size:16px;
}

/* Header */
.brand-copy strong{
  font-size:18px !important;
}
.brand-copy small{
  font-size:12px !important;
}
.nav-links{
  font-size:14px !important;
}
.nav-cta{
  font-size:13px !important;
}

/* Hero */
.eyebrow{
  font-size:12px !important;
  padding:9px 14px !important;
}
.hero-copy p{
  font-size:20px !important;
  line-height:1.65 !important;
  max-width:650px !important;
}
.hero-meta{
  font-size:12px !important;
}
.btn{
  font-size:14px !important;
  min-height:54px !important;
}

/* Generic section headings */
.kicker{
  font-size:12px !important;
}
.section-head h2{
  font-size:clamp(44px,5.3vw,64px) !important;
}
.section-head p{
  font-size:16px !important;
  line-height:1.65 !important;
  max-width:430px !important;
}

/* Trust strip */
.trust-item strong{
  font-size:28px !important;
}
.trust-item span{
  font-size:12px !important;
}

/* Portfolio */
.project-content{
  padding:26px !important;
}
.project-content small{
  font-size:10px !important;
}
.project-content h3{
  font-size:30px !important;
}
.project-content p{
  font-size:14px !important;
  line-height:1.6 !important;
  max-width:560px;
}
.project-points span{
  font-size:11px !important;
  padding:8px 11px !important;
}
.live-link{
  font-size:12px !important;
}

/* Services */
.service-card{
  padding:38px !important;
}
.service-num{
  font-size:12px !important;
}
.service-badge{
  font-size:11px !important;
}
.service-card h3{
  font-size:36px !important;
  line-height:1.02 !important;
}
.service-intro{
  font-size:15px !important;
  line-height:1.55 !important;
  margin-bottom:24px !important;
}
.service-list{
  gap:14px !important;
}
.service-list li{
  font-size:14px !important;
  line-height:1.5 !important;
  padding-left:31px !important;
}
.service-list li::before{
  width:21px !important;
  height:21px !important;
  font-size:11px !important;
}
.service-foot{
  font-size:11px !important;
}

/* Plan tabs and plan intro */
.plan-tab{
  font-size:12px !important;
  padding:13px 18px !important;
}
.plan-intro h3{
  font-size:28px !important;
}
.plan-intro p{
  font-size:13px !important;
  line-height:1.55 !important;
  max-width:420px !important;
}

/* Pricing */
.price-tag{
  font-size:11px !important;
}
.price-card h3{
  font-size:27px !important;
}
.price-label{
  font-size:11px !important;
}
.price{
  font-size:40px !important;
}
.price-card li{
  font-size:13.5px !important;
  line-height:1.5 !important;
}
.price-btn{
  font-size:12px !important;
  padding:15px !important;
}
.price-note{
  font-size:12px !important;
  line-height:1.6 !important;
}

/* Process */
.process-card{
  padding:28px !important;
}
.process-card span{
  font-size:15px !important;
}
.process-card h3{
  font-size:24px !important;
}
.process-card p{
  font-size:13.5px !important;
  line-height:1.6 !important;
}

/* Contact */
.contact-box p{
  font-size:14px !important;
  line-height:1.6 !important;
}
.contact-points span{
  font-size:12px !important;
}
.whatsapp-card strong{
  font-size:18px !important;
}
.whatsapp-card small{
  font-size:11px !important;
}
.whatsapp-btn{
  font-size:12px !important;
}
.contact-mini{
  font-size:12px !important;
  line-height:1.6 !important;
}

/* Footer */
footer p{
  font-size:12px !important;
}

/* Small project bubble */
.project-bubble{
  font-size:12px !important;
}

/* Mobile readability */
@media(max-width:700px){
  .brand-copy strong{
    font-size:17px !important;
  }
  .nav-links{
    font-size:16px !important;
  }
  .eyebrow{
    font-size:11px !important;
  }
  .hero-copy p{
    font-size:17px !important;
  }
  .hero-meta{
    font-size:11px !important;
  }
  .section-head h2{
    font-size:42px !important;
  }
  .section-head p{
    font-size:14.5px !important;
  }
  .trust-item strong{
    font-size:25px !important;
  }
  .trust-item span{
    font-size:10.5px !important;
  }
  .project-content h3{
    font-size:27px !important;
  }
  .project-content p{
    font-size:13px !important;
  }
  .project-points span{
    font-size:10px !important;
  }
  .service-card{
    padding:30px 25px !important;
  }
  .service-card h3{
    font-size:32px !important;
  }
  .service-intro{
    font-size:14px !important;
  }
  .service-list li{
    font-size:13px !important;
    line-height:1.55 !important;
  }
  .plan-tab{
    font-size:11px !important;
  }
  .plan-intro h3{
    font-size:25px !important;
  }
  .plan-intro p{
    font-size:12px !important;
  }
  .price-card h3{
    font-size:25px !important;
  }
  .price{
    font-size:37px !important;
  }
  .price-card li{
    font-size:12.5px !important;
  }
  .process-card h3{
    font-size:23px !important;
  }
  .process-card p{
    font-size:12.5px !important;
  }
  .contact-box p{
    font-size:13px !important;
  }
  .contact-points span{
    font-size:11px !important;
  }
  footer p{
    font-size:11px !important;
  }
}


/* ===== HERO CINEMATICO / ANIMACION PREMIUM ===== */
.hero-showcase.cinematic{
  min-height:590px;
  display:grid;
  place-items:center;
  perspective:1400px;
}

.cinema-stage{
  width:min(560px,100%);
  aspect-ratio:1/1.05;
  position:relative;
  border-radius:38px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 45%,rgba(202,164,81,.12),transparent 31%),
    linear-gradient(145deg,#080808,#11100d 60%,#050505);
  border:1px solid rgba(214,188,125,.18);
  box-shadow:
    0 45px 100px rgba(0,0,0,.23),
    inset 0 0 60px rgba(255,255,255,.015);
  transform-style:preserve-3d;
  transition:transform .18s ease-out;
}

.cinema-stage::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 20%,rgba(255,231,178,.055) 43%,transparent 58%);
  transform:translateX(-120%);
  animation:stageSweep 7s ease-in-out infinite;
  pointer-events:none;
  z-index:8;
}
@keyframes stageSweep{
  0%,58%{transform:translateX(-125%)}
  78%,100%{transform:translateX(125%)}
}

.stage-grid{
  position:absolute;
  inset:0;
  opacity:.15;
  background-image:
    linear-gradient(rgba(218,185,111,.15) 1px,transparent 1px),
    linear-gradient(90deg,rgba(218,185,111,.15) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at center,black,transparent 75%);
  animation:gridDrift 12s linear infinite;
}
@keyframes gridDrift{
  to{background-position:46px 46px}
}

.stage-stars{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 12% 20%,rgba(255,255,255,.75) 0 1px,transparent 1.7px),
    radial-gradient(circle at 84% 18%,rgba(214,188,125,.8) 0 1px,transparent 1.8px),
    radial-gradient(circle at 74% 73%,rgba(255,255,255,.55) 0 1px,transparent 1.7px),
    radial-gradient(circle at 22% 79%,rgba(214,188,125,.65) 0 1px,transparent 1.8px),
    radial-gradient(circle at 51% 11%,rgba(255,255,255,.45) 0 1px,transparent 1.7px),
    radial-gradient(circle at 90% 49%,rgba(255,255,255,.5) 0 1px,transparent 1.7px);
  animation:starsPulse 4s ease-in-out infinite alternate;
}
@keyframes starsPulse{
  from{opacity:.45;transform:scale(1)}
  to{opacity:1;transform:scale(1.02)}
}

.stage-glow{
  position:absolute;
  width:390px;
  height:390px;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(197,153,61,.18),rgba(197,153,61,.05) 33%,transparent 68%);
  filter:blur(4px);
  animation:glowPulse 3.8s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{transform:translate(-50%,-50%) scale(.94);opacity:.65}
  50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}
}

.stage-label{
  position:absolute;
  left:24px;
  top:22px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
  color:#d9c28c;
  z-index:7;
}

.orbit{
  position:absolute;
  left:50%;
  top:49%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(214,188,125,.12);
  pointer-events:none;
}
.orbit-a{
  width:78%;
  height:78%;
  animation:orbitSpin 18s linear infinite;
}
.orbit-b{
  width:61%;
  height:61%;
  border-style:dashed;
  animation:orbitSpinReverse 13s linear infinite;
}
.orbit-c{
  width:43%;
  height:43%;
  animation:orbitSpin 8s linear infinite;
}
.orbit-a::after,.orbit-b::after,.orbit-c::after{
  content:"";
  position:absolute;
  width:7px;height:7px;border-radius:50%;
  background:#e2c77f;
  box-shadow:0 0 17px rgba(226,199,127,.85);
  left:50%;top:-4px;
}
@keyframes orbitSpin{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes orbitSpinReverse{
  to{transform:translate(-50%,-50%) rotate(-360deg)}
}

.energy-core{
  position:absolute;
  left:50%;
  top:49%;
  width:210px;
  height:210px;
  transform:translate(-50%,-50%);
  display:grid;
  place-items:center;
  z-index:5;
}

.core-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(224,194,125,.2);
}
.ring-1{animation:ringSpin 8s linear infinite}
.ring-2{
  inset:12px;
  border-style:dashed;
  animation:ringSpinReverse 6s linear infinite;
}
.ring-3{
  inset:26px;
  border-color:rgba(255,255,255,.08);
  animation:ringBreathe 3s ease-in-out infinite;
}
@keyframes ringSpin{to{transform:rotate(360deg)}}
@keyframes ringSpinReverse{to{transform:rotate(-360deg)}}
@keyframes ringBreathe{
  0%,100%{transform:scale(.95);opacity:.4}
  50%{transform:scale(1.05);opacity:1}
}

.brand-core{
  width:132px;
  height:132px;
  border-radius:50%;
  padding:7px;
  background:linear-gradient(145deg,#f2d89f,#8c6b2c);
  box-shadow:
    0 0 0 8px rgba(201,159,70,.06),
    0 0 42px rgba(201,159,70,.22);
  animation:coreFloat 4s ease-in-out infinite;
  overflow:hidden;
}
.brand-core img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
}
@keyframes coreFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

.core-caption{
  position:absolute;
  top:calc(100% + 15px);
  display:grid;
  justify-items:center;
  text-align:center;
  width:240px;
}
.core-caption strong{
  color:#fff;
  font:700 18px "Space Grotesk";
  letter-spacing:.12em;
}
.core-caption span{
  color:#948b7b;
  font-size:8px;
  margin-top:4px;
  letter-spacing:.08em;
}

.orbit-card{
  position:absolute;
  z-index:7;
  display:flex;
  align-items:center;
  gap:10px;
  width:155px;
  padding:9px;
  border-radius:14px;
  background:rgba(19,19,17,.78);
  backdrop-filter:blur(14px);
  border:1px solid rgba(216,187,121,.17);
  color:white;
  box-shadow:0 16px 40px rgba(0,0,0,.22);
  transition:.25s ease;
}
.orbit-card:hover{
  transform:translateY(-6px) scale(1.02) !important;
  border-color:rgba(216,187,121,.4);
  box-shadow:0 24px 50px rgba(0,0,0,.33);
}
.orbit-thumb{
  width:46px;height:46px;border-radius:11px;overflow:hidden;flex-shrink:0;background:#111;
}
.orbit-thumb img{
  width:100%;height:100%;object-fit:cover;
}
.orbit-card small{
  display:block;
  font-size:7px;
  letter-spacing:.14em;
  color:#c7aa69;
  margin-bottom:3px;
}
.orbit-card strong{
  display:block;
  font:700 11px "Space Grotesk";
  line-height:1.1;
}
.project-one{
  top:16%;right:5%;
  animation:projectFloat1 5.5s ease-in-out infinite;
}
.project-two{
  bottom:15%;left:4%;
  animation:projectFloat2 6.2s ease-in-out infinite;
}
.project-three{
  bottom:10%;right:7%;
  animation:projectFloat3 5.8s ease-in-out infinite;
}
@keyframes projectFloat1{
  0%,100%{transform:translateY(0) rotate(1deg)}
  50%{transform:translateY(-10px) rotate(-1deg)}
}
@keyframes projectFloat2{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-9px) rotate(1deg)}
}
@keyframes projectFloat3{
  0%,100%{transform:translateY(0) rotate(2deg)}
  50%{transform:translateY(-12px) rotate(0)}
}

.scan-line{
  position:absolute;
  left:8%;
  right:8%;
  height:1px;
  top:18%;
  background:linear-gradient(90deg,transparent,rgba(226,198,132,.7),transparent);
  box-shadow:0 0 12px rgba(226,198,132,.35);
  opacity:.5;
  animation:scan 6s ease-in-out infinite;
}
@keyframes scan{
  0%,100%{top:18%;opacity:0}
  12%{opacity:.6}
  75%{top:82%;opacity:.6}
  90%{opacity:0}
}

.stage-bottom{
  position:absolute;
  left:24px;
  right:24px;
  bottom:20px;
  display:flex;
  align-items:center;
  gap:10px;
  z-index:7;
  color:#776e5d;
  font-size:8px;
  font-weight:800;
}
.stage-progress{
  flex:1;
  height:2px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.stage-progress i{
  display:block;
  width:34%;
  height:100%;
  background:linear-gradient(90deg,#7d6028,#e6ca89);
  animation:progressMove 4s ease-in-out infinite alternate;
}
@keyframes progressMove{
  from{transform:translateX(0)}
  to{transform:translateX(190%)}
}

@media(max-width:980px){
  .hero-showcase.cinematic{min-height:560px}
  .cinema-stage{width:min(560px,92vw)}
}
@media(max-width:700px){
  .hero-showcase.cinematic{min-height:470px}
  .cinema-stage{
    width:100%;
    border-radius:28px;
  }
  .stage-label{
    left:18px;top:17px;font-size:7px;
  }
  .energy-core{
    width:180px;height:180px;
  }
  .brand-core{
    width:112px;height:112px;
  }
  .core-caption{
    width:200px;
  }
  .core-caption strong{font-size:15px}
  .core-caption span{font-size:7px}
  .orbit-card{
    width:125px;
    padding:7px;
    gap:7px;
  }
  .orbit-thumb{
    width:38px;height:38px;
  }
  .orbit-card strong{font-size:9px}
  .project-one{top:15%;right:3%}
  .project-two{bottom:14%;left:2%}
  .project-three{bottom:8%;right:3%}
  .stage-bottom{left:18px;right:18px;bottom:15px}
}
@media(prefers-reduced-motion:reduce){
  .cinema-stage *, .cinema-stage::before{
    animation:none !important;
  }
}


/* ===== CARRUSEL PREMIUM DE PLANES ===== */
.plan-panel{
  position:relative;
}

.plan-panel .price-grid{
  display:flex !important;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
  padding:14px 4px 18px;
  max-width:none;
}

.plan-panel .price-grid::-webkit-scrollbar{
  display:none;
}

.plan-panel .price-card{
  flex:0 0 calc((100% - 18px)/2);
  scroll-snap-align:start;
  min-height:610px;
  display:flex;
  flex-direction:column;
}

.plan-panel .price-card ul{
  flex:1;
}

.plan-carousel-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:14px;
}

.plan-carousel-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.plan-carousel-dots{
  display:flex;
  align-items:center;
  gap:7px;
}

.plan-carousel-dot{
  width:8px;
  height:8px;
  border:0;
  padding:0;
  border-radius:999px;
  background:#d7cec0;
  cursor:pointer;
  transition:.24s ease;
}

.plan-carousel-dot.active{
  width:30px;
  background:linear-gradient(90deg,#171717,#b89445);
}

.plan-carousel-count{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  color:#8d857a;
}

.plan-carousel-count b{
  color:#1c1a17;
}

.plan-carousel-arrows{
  display:flex;
  gap:8px;
}

.plan-carousel-arrow{
  width:50px;
  height:50px;
  border-radius:50%;
  border:1px solid rgba(16,16,16,.10);
  background:#fff;
  color:#171717;
  display:grid;
  place-items:center;
  font-size:18px;
  cursor:pointer;
  box-shadow:0 10px 24px rgba(45,37,21,.06);
  transition:.22s ease;
}

.plan-carousel-arrow:hover{
  transform:translateY(-2px);
  background:#171717;
  color:#f1dfb1;
  border-color:#171717;
}

.plan-carousel-arrow:disabled{
  opacity:.35;
  cursor:default;
  transform:none;
}

.plan-carousel-hint{
  display:none;
  align-items:center;
  gap:7px;
  color:#8f877c;
  font-size:10px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.plan-carousel-hint span{
  color:#b89445;
  font-size:15px;
}

@media(max-width:980px){
  .plan-panel .price-card{
    flex-basis:calc((100% - 14px)/2);
  }
}

@media(max-width:700px){
  .plan-panel .price-grid{
    gap:14px;
    padding-right:30px;
  }

  .plan-panel .price-card{
    flex-basis:calc(100% - 20px);
    min-height:auto;
  }

  .plan-carousel-dots{
    display:none;
  }

  .plan-carousel-hint{
    display:flex;
  }

  .plan-carousel-arrow{
    width:46px;
    height:46px;
  }

  .plan-carousel-count{
    font-size:10px;
  }
}


/* ===== ULTRA INTRO PORTADA ===== */
html.intro-lock,
html.intro-lock body{
  overflow:hidden;
}

.mw-intro{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 50%,rgba(192,151,69,.12),transparent 28%),
    radial-gradient(circle at 20% 15%,rgba(255,255,255,.04),transparent 16%),
    radial-gradient(circle at 80% 80%,rgba(212,187,124,.08),transparent 18%),
    linear-gradient(145deg,#040404,#0e0d0a 58%,#040404);
  isolation:isolate;
  opacity:1;
  visibility:visible;
  transition:opacity .85s ease, visibility .85s ease;
}

.mw-intro.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.mw-intro-bg{
  position:absolute;
  inset:-12%;
  background:
    conic-gradient(from 90deg at 50% 50%,rgba(255,255,255,.05),transparent 18%,rgba(184,148,69,.08),transparent 45%,rgba(255,255,255,.04),transparent 72%,rgba(184,148,69,.06),transparent);
  filter:blur(70px);
  animation:introBgSpin 18s linear infinite;
  opacity:.75;
}

@keyframes introBgSpin{
  to{transform:rotate(360deg)}
}

.mw-intro-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(214,187,120,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(214,187,120,.13) 1px,transparent 1px);
  background-size:46px 46px;
  opacity:.18;
  mask-image:
    radial-gradient(circle at center,black 0 36%,transparent 82%),
    linear-gradient(to bottom,transparent,black 15%,black 86%,transparent);
  animation:introGridMove 10s linear infinite;
}

@keyframes introGridMove{
  to{background-position:46px 46px}
}

.mw-intro-rings{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
}

.mw-intro-rings span{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(223,196,132,.18);
  box-shadow:0 0 20px rgba(223,196,132,.06), inset 0 0 18px rgba(255,255,255,.01);
}

.mw-intro-rings span:nth-child(1){
  width:min(58vw,620px);
  height:min(58vw,620px);
  animation:introRingSpin 14s linear infinite;
}
.mw-intro-rings span:nth-child(2){
  width:min(44vw,470px);
  height:min(44vw,470px);
  border-style:dashed;
  animation:introRingSpinReverse 10s linear infinite;
}
.mw-intro-rings span:nth-child(3){
  width:min(30vw,320px);
  height:min(30vw,320px);
  animation:introRingBreath 4s ease-in-out infinite;
}
.mw-intro-rings span:nth-child(4){
  width:min(70vw,760px);
  height:min(70vw,760px);
  opacity:.35;
  animation:introRingSpin 24s linear infinite;
}

.mw-intro-rings span::after{
  content:"";
  position:absolute;
  width:10px;
  height:10px;
  left:50%;
  top:-5px;
  margin-left:-5px;
  border-radius:50%;
  background:#e8cb89;
  box-shadow:0 0 16px rgba(232,203,137,.8);
}

@keyframes introRingSpin{
  to{transform:rotate(360deg)}
}
@keyframes introRingSpinReverse{
  to{transform:rotate(-360deg)}
}
@keyframes introRingBreath{
  0%,100%{transform:scale(.96);opacity:.4}
  50%{transform:scale(1.05);opacity:1}
}

.mw-intro-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  opacity:.9;
}

.mw-intro-center{
  position:relative;
  z-index:5;
  width:min(920px,calc(100% - 28px));
  display:grid;
  justify-items:center;
  text-align:center;
}

.mw-intro-logo-wrap{
  position:relative;
  width:180px;
  height:180px;
  display:grid;
  place-items:center;
  margin-bottom:22px;
}

.mw-intro-logo-glow{
  position:absolute;
  inset:-24px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(227,198,133,.28),rgba(227,198,133,.08) 34%,transparent 68%);
  filter:blur(10px);
  animation:introGlowPulse 3.2s ease-in-out infinite;
}

.mw-intro-logo-pulse{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(227,198,133,.2);
  animation:introPulseRing 2.4s ease-out infinite;
}

@keyframes introGlowPulse{
  0%,100%{transform:scale(.95);opacity:.6}
  50%{transform:scale(1.08);opacity:1}
}

@keyframes introPulseRing{
  0%{transform:scale(.85);opacity:.8}
  75%{transform:scale(1.25);opacity:0}
  100%{transform:scale(1.25);opacity:0}
}

.mw-intro-logo{
  width:148px;
  height:148px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(231,203,139,.55);
  box-shadow:
    0 0 0 10px rgba(231,203,139,.06),
    0 0 38px rgba(231,203,139,.22),
    0 30px 80px rgba(0,0,0,.3);
  animation:introLogoFloat 4.8s ease-in-out infinite;
}

@keyframes introLogoFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

.mw-intro-copy{
  max-width:760px;
}

.mw-intro-kicker{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(223,196,132,.18);
  background:rgba(255,255,255,.03);
  color:#dbc389;
  font-size:12px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:18px;
  backdrop-filter:blur(10px);
}

.mw-intro-title{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
  font:700 clamp(52px,9vw,112px)/.92 "Space Grotesk";
  letter-spacing:-.06em;
  color:#fff;
}

.mw-intro-title span{
  display:inline-block;
  opacity:0;
  transform:translateY(28px) scale(.92);
  animation:introLetterIn .65s cubic-bezier(.2,.85,.2,1) forwards;
}

.mw-intro-title span:nth-child(1){animation-delay:.05s}
.mw-intro-title span:nth-child(2){animation-delay:.12s}
.mw-intro-title span:nth-child(3){animation-delay:.19s}
.mw-intro-title span:nth-child(4){animation-delay:.26s}
.mw-intro-title span:nth-child(5){animation-delay:.33s}
.mw-intro-title span:nth-child(6){animation-delay:.40s}
.mw-intro-title span:nth-child(8){animation-delay:.54s}
.mw-intro-title span:nth-child(9){animation-delay:.61s}
.mw-intro-title span:nth-child(10){animation-delay:.68s}

.mw-intro-title em{
  display:inline-block;
  width:42px;
}

@keyframes introLetterIn{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.mw-intro-sub{
  margin:18px auto 0;
  color:#bfb7a8;
  font-size:18px;
  line-height:1.6;
  max-width:640px;
  opacity:0;
  animation:introFadeUp .7s ease forwards;
  animation-delay:.85s;
}

@keyframes introFadeUp{
  to{
    opacity:1;
    transform:none;
  }
}
.mw-intro-sub,
.mw-intro-loading{
  transform:translateY(18px);
}

.mw-intro-loading{
  width:min(560px,100%);
  margin:28px auto 0;
  opacity:0;
  animation:introFadeUp .7s ease forwards;
  animation-delay:1.05s;
}

.mw-intro-loading-bar{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
  border:1px solid rgba(223,196,132,.12);
  box-shadow:inset 0 0 16px rgba(255,255,255,.02);
}

.mw-intro-loading-bar i{
  display:block;
  width:0%;
  height:100%;
  border-radius:999px;
  background:
    linear-gradient(90deg,#74561c,#d9bc78 35%,#fff2ce 52%,#c89f4b 74%,#795a1f);
  box-shadow:0 0 16px rgba(217,188,120,.5);
  animation:introBarFill 3s cubic-bezier(.22,.75,.2,1) forwards;
}

@keyframes introBarFill{
  to{width:100%}
}

.mw-intro-loading-meta{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#948c7c;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.mw-intro-loading-meta strong{
  color:#fff;
  font-size:14px;
  letter-spacing:.05em;
}

.mw-intro-skip{
  position:absolute;
  right:18px;
  bottom:18px;
  z-index:6;
  min-height:42px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid rgba(223,196,132,.16);
  background:rgba(255,255,255,.04);
  color:#d5c29c;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:.22s ease;
  backdrop-filter:blur(8px);
}
.mw-intro-skip:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.08);
}

body.intro-ended .hero{
  overflow:hidden;
}

body.intro-ended .hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 76% 22%,rgba(184,148,69,.12),transparent 26%),
    radial-gradient(circle at 19% 85%,rgba(255,255,255,.06),transparent 18%);
  animation:heroAmbientFloat 8s ease-in-out infinite alternate;
}

@keyframes heroAmbientFloat{
  from{transform:translateY(0) scale(1)}
  to{transform:translateY(-10px) scale(1.03)}
}

@media(max-width:700px){
  .mw-intro-center{
    width:min(100% - 22px,920px);
  }
  .mw-intro-logo-wrap{
    width:142px;
    height:142px;
    margin-bottom:18px;
  }
  .mw-intro-logo{
    width:118px;
    height:118px;
  }
  .mw-intro-kicker{
    font-size:9px;
    padding:7px 12px;
  }
  .mw-intro-title{
    font-size:clamp(42px,13vw,64px);
    gap:4px;
  }
  .mw-intro-title em{
    width:16px;
  }
  .mw-intro-sub{
    font-size:15px;
    margin-top:14px;
    max-width:330px;
  }
  .mw-intro-loading{
    margin-top:22px;
  }
  .mw-intro-loading-meta{
    font-size:9px;
  }
  .mw-intro-loading-meta strong{
    font-size:11px;
  }
  .mw-intro-skip{
    right:12px;
    bottom:12px;
    min-height:38px;
    font-size:11px;
  }
}


/* ===== MATIAS WEB · BRUTAL INTRO V2 ===== */
.brutal-intro{
  background:
    radial-gradient(circle at 50% 48%,rgba(185,145,60,.16),transparent 20%),
    radial-gradient(circle at 15% 15%,rgba(255,255,255,.035),transparent 18%),
    radial-gradient(circle at 82% 86%,rgba(194,151,63,.07),transparent 18%),
    #030303;
}

.brutal-vignette{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  box-shadow:inset 0 0 180px 80px rgba(0,0,0,.88);
}

.intro-curtain{
  position:absolute;top:0;bottom:0;width:50.5%;z-index:50;background:#020202;
  transition:transform 1.25s cubic-bezier(.77,0,.18,1);
  pointer-events:none;
}
.curtain-left{left:0;transform-origin:left}
.curtain-right{right:0;transform-origin:right}
.brutal-intro.hide .curtain-left{transform:translateX(-102%)}
.brutal-intro.hide .curtain-right{transform:translateX(102%)}

.brutal-beam{
  position:absolute;z-index:1;width:2px;height:140%;top:-20%;
  background:linear-gradient(to bottom,transparent,rgba(237,207,141,.7),transparent);
  filter:blur(.2px);
  opacity:.25;
  transform-origin:center;
}
.beam-a{left:20%;transform:rotate(22deg);animation:beamDriftA 8s ease-in-out infinite}
.beam-b{left:50%;transform:rotate(-12deg);animation:beamDriftB 10s ease-in-out infinite}
.beam-c{right:18%;transform:rotate(17deg);animation:beamDriftA 9s ease-in-out infinite reverse}

@keyframes beamDriftA{50%{transform:translateX(60px) rotate(24deg);opacity:.55}}
@keyframes beamDriftB{50%{transform:translateX(-70px) rotate(-15deg);opacity:.42}}

.portal-system{
  position:absolute;left:50%;top:47%;width:min(72vw,760px);height:min(72vw,760px);
  transform:translate(-50%,-50%);z-index:2;pointer-events:none;perspective:1200px;
}
.portal-ring{
  position:absolute;left:50%;top:50%;border-radius:50%;
  transform:translate(-50%,-50%);
  border:1px solid rgba(223,193,126,.16);
  box-shadow:0 0 22px rgba(199,154,60,.05),inset 0 0 18px rgba(255,255,255,.015);
}
.pr-1{width:100%;height:100%;animation:portalSpin 22s linear infinite}
.pr-2{width:84%;height:84%;border-style:dashed;animation:portalSpinReverse 16s linear infinite}
.pr-3{width:68%;height:68%;border-color:rgba(240,216,157,.25);animation:portalSpin 10s linear infinite}
.pr-4{width:50%;height:50%;border-style:dotted;animation:portalSpinReverse 7s linear infinite}
.pr-5{width:34%;height:34%;border-color:rgba(255,255,255,.1);animation:portalPulse 3s ease-in-out infinite}

.pr-1::before,.pr-2::before,.pr-3::before,.pr-4::before{
  content:"";position:absolute;width:9px;height:9px;border-radius:50%;
  top:-5px;left:50%;margin-left:-5px;background:#eed290;
  box-shadow:0 0 18px 5px rgba(238,210,144,.35);
}

@keyframes portalSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes portalSpinReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes portalPulse{50%{transform:translate(-50%,-50%) scale(1.08);opacity:.45}}

.portal-crosshair{
  position:absolute;background:linear-gradient(90deg,transparent,rgba(214,182,111,.2),transparent);
  opacity:.4;
}
.portal-crosshair.horizontal{left:8%;right:8%;top:50%;height:1px}
.portal-crosshair.vertical{top:8%;bottom:8%;left:50%;width:1px;background:linear-gradient(180deg,transparent,rgba(214,182,111,.2),transparent)}

.brand-system{
  position:relative;width:230px;height:230px;display:grid;place-items:center;margin:0 auto 18px;
}
.brand-energy{
  position:absolute;inset:-45px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent,rgba(234,203,133,.22),transparent 22%,rgba(255,255,255,.08),transparent 54%,rgba(196,147,50,.18),transparent);
  filter:blur(8px);
  animation:energySpin 6s linear infinite;
}
@keyframes energySpin{to{transform:rotate(360deg)}}

.brand-shockwave{
  position:absolute;inset:42px;border-radius:50%;border:1px solid rgba(234,205,139,.34);
  opacity:0;animation:shockwave 3.2s ease-out infinite;
}
.sw-2{animation-delay:1s}
.sw-3{animation-delay:2s}
@keyframes shockwave{
  0%{transform:scale(.55);opacity:.8}
  78%{transform:scale(1.55);opacity:0}
  100%{opacity:0}
}

.brutal-logo-wrap{width:180px!important;height:180px!important;margin:0!important;z-index:4}
.brutal-logo{
  width:152px!important;height:152px!important;
  border:2px solid rgba(237,207,139,.68)!important;
  box-shadow:
    0 0 0 9px rgba(230,198,126,.05),
    0 0 60px rgba(230,198,126,.28),
    0 35px 90px rgba(0,0,0,.42)!important;
  animation:brutalLogoIn 1.5s cubic-bezier(.2,.9,.2,1) both, introLogoFloat 4.5s ease-in-out 1.5s infinite!important;
}
@keyframes brutalLogoIn{
  0%{opacity:0;transform:scale(.25) rotate(-20deg);filter:blur(12px)}
  55%{opacity:1;transform:scale(1.08) rotate(2deg);filter:blur(0)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}

.brutal-center{width:min(980px,calc(100% - 28px));}
.brutal-copy{margin-top:-12px}

.brutal-title{
  position:relative;
  text-shadow:0 0 30px rgba(255,255,255,.06);
}
.brutal-glitch-wrap{position:relative}
.brutal-glitch-wrap::before,
.brutal-glitch-wrap::after{
  content:"MATIAS WEB";
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  font:700 clamp(52px,9vw,112px)/.92 "Space Grotesk";
  letter-spacing:-.06em;white-space:nowrap;pointer-events:none;
  opacity:0;
}
.brutal-glitch-wrap::before{color:#d7b564;animation:glitchGold 4.6s steps(1) infinite}
.brutal-glitch-wrap::after{color:#fff;animation:glitchWhite 4.6s steps(1) infinite}
@keyframes glitchGold{
  0%,89%,100%{opacity:0;transform:translate(-50%,-50%)}
  90%{opacity:.36;transform:translate(calc(-50% + 5px),calc(-50% - 2px));clip-path:inset(18% 0 62% 0)}
  92%{opacity:.2;transform:translate(calc(-50% - 4px),calc(-50% + 2px));clip-path:inset(68% 0 12% 0)}
  94%{opacity:0}
}
@keyframes glitchWhite{
  0%,91%,100%{opacity:0}
  92%{opacity:.17;transform:translate(calc(-50% - 5px),-50%);clip-path:inset(40% 0 40% 0)}
  94%{opacity:0}
}

.brutal-sub{font-size:17px!important;max-width:700px!important;color:#c7c0b2!important}
.intro-capabilities{
  display:flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap;
  margin:16px auto 0;color:#e2ca92;font-size:10px;font-weight:800;letter-spacing:.16em;
  opacity:0;animation:introFadeUp .7s ease forwards 1.05s;
}
.intro-capabilities i{width:4px;height:4px;border-radius:50%;background:#8e6a28;box-shadow:0 0 8px rgba(216,181,105,.6)}

.brutal-loading{margin-top:24px!important}
.brutal-bar{height:7px!important;background:rgba(255,255,255,.05)!important}
.brutal-bar i{animation:introBarFill 3.15s cubic-bezier(.16,.78,.2,1) forwards!important}

.project-orbit{
  position:absolute;z-index:7;width:120px;
  padding:8px;border-radius:14px;background:rgba(12,12,10,.72);
  border:1px solid rgba(218,186,116,.17);backdrop-filter:blur(12px);
  box-shadow:0 18px 45px rgba(0,0,0,.3);text-align:center;
  opacity:0;animation:projectCardIn .8s ease forwards;
}
.project-orbit img{
  width:100%;aspect-ratio:1.35/1;object-fit:cover;border-radius:9px;
}
.project-orbit span{
  display:block;margin-top:7px;color:#d9c08a;font-size:8px;font-weight:800;letter-spacing:.1em;
}
.project-orbit-1{left:8%;top:20%;animation-delay:1s}
.project-orbit-2{right:8%;top:24%;animation-delay:1.2s}
.project-orbit-3{right:12%;bottom:14%;animation-delay:1.4s}

@keyframes projectCardIn{
  from{opacity:0;transform:translateY(20px) scale(.92)}
  to{opacity:.92;transform:none}
}
.project-orbit-1{animation:projectCardIn .8s ease 1s forwards,orbitFloatA 5s ease-in-out 1.8s infinite}
.project-orbit-2{animation:projectCardIn .8s ease 1.2s forwards,orbitFloatB 5.7s ease-in-out 2s infinite}
.project-orbit-3{animation:projectCardIn .8s ease 1.4s forwards,orbitFloatA 6.1s ease-in-out 2.2s infinite}
@keyframes orbitFloatA{50%{transform:translateY(-10px) rotate(-1deg)}}
@keyframes orbitFloatB{50%{transform:translateY(8px) rotate(1deg)}}

.brutal-hud{
  position:absolute;z-index:8;display:grid;gap:3px;color:#ddc58c;
  font-size:10px;font-weight:800;letter-spacing:.14em;
}
.brutal-hud small{font-size:8px;color:#766d5c;letter-spacing:.1em}
.hud-top-left{left:22px;top:20px}
.hud-top-right{right:22px;top:20px;text-align:right}

.brutal-bottom-line{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;z-index:8;color:#8f8572;
  font-size:9px;font-weight:800;letter-spacing:.16em;
}
.pulse-dot{
  width:5px;height:5px;border-radius:50%;background:#d5b66e;
  box-shadow:0 0 9px rgba(213,182,110,.7);animation:tinyPulse 1.4s ease-in-out infinite;
}
@keyframes tinyPulse{50%{opacity:.25}}

.brutal-intro.hide .portal-system,
.brutal-intro.hide .project-orbit,
.brutal-intro.hide .brutal-center,
.brutal-intro.hide .brutal-hud,
.brutal-intro.hide .brutal-bottom-line{
  animation:exitBlast .75s cubic-bezier(.6,0,.7,1) forwards!important;
}
@keyframes exitBlast{
  to{opacity:0;transform:scale(1.12);filter:blur(10px)}
}

@media(max-width:800px){
  .project-orbit{width:92px;padding:6px}
  .project-orbit-1{left:3%;top:17%}
  .project-orbit-2{right:3%;top:20%}
  .project-orbit-3{right:5%;bottom:12%}
  .project-orbit span{font-size:6.5px}
}
@media(max-width:700px){
  .brand-system{width:180px;height:180px;margin-bottom:10px}
  .brutal-logo-wrap{width:145px!important;height:145px!important}
  .brutal-logo{width:120px!important;height:120px!important}
  .portal-system{width:96vw;height:96vw;top:42%}
  .project-orbit{width:78px;border-radius:10px}
  .project-orbit-1{left:2%;top:15%}
  .project-orbit-2{right:2%;top:16%}
  .project-orbit-3{right:3%;bottom:13%}
  .brutal-sub{font-size:14px!important;max-width:330px!important}
  .intro-capabilities{font-size:8px;gap:7px;max-width:330px}
  .brutal-bottom-line{bottom:58px;font-size:7px;gap:8px;white-space:nowrap}
  .brutal-hud small{display:none}
  .brutal-hud{font-size:8px}
  .hud-top-left{left:12px;top:12px}
  .hud-top-right{right:12px;top:12px}
}


/* =========================================================
   MATIAS WEB — MOTION SYSTEM
   Animaciones dentro de la página
   ========================================================= */

/* barra dorada de progreso */
.mw-scroll-progress{
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:3px;
  z-index:1100;
  pointer-events:none;
  background:rgba(0,0,0,.025);
}
.mw-scroll-progress i{
  display:block;
  width:0%;
  height:100%;
  background:linear-gradient(90deg,#111,#b89445 55%,#f0d99d);
  box-shadow:0 0 12px rgba(184,148,69,.35);
  transition:width .08s linear;
}

/* navbar más refinado al bajar */
header .nav,
header .brand img{
  transition:min-height .28s ease,width .28s ease,height .28s ease,transform .28s ease;
}
header.scrolled .nav{
  min-height:64px;
}
header.scrolled .brand img{
  width:40px;
  height:40px;
}
header.scrolled{
  box-shadow:0 12px 34px rgba(35,29,18,.055);
}

/* títulos por palabras */
.motion-words{
  overflow:hidden;
}
.motion-words .mw-word{
  display:inline-block;
  opacity:0;
  transform:translateY(34px) rotate(1.5deg);
  filter:blur(8px);
  transition:
    opacity .62s cubic-bezier(.2,.8,.2,1),
    transform .62s cubic-bezier(.2,.8,.2,1),
    filter .62s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--word-index) * 65ms);
}
.motion-words.words-visible .mw-word{
  opacity:1;
  transform:translateY(0) rotate(0);
  filter:blur(0);
}

/* PORTAFOLIO — entrada diferenciada */
#trabajos .project-card{
  transform-style:preserve-3d;
  will-change:transform;
}
#trabajos .project-card.motion-project{
  opacity:0;
  filter:blur(8px);
  transition:
    opacity .72s cubic-bezier(.2,.8,.2,1),
    filter .72s cubic-bezier(.2,.8,.2,1),
    transform .18s ease-out,
    box-shadow .28s ease,
    border-color .28s ease;
}
#trabajos .project-card.motion-project:nth-child(1){
  transform:translateY(48px) scale(.96);
}
#trabajos .project-card.motion-project:nth-child(2){
  transform:translateX(42px) scale(.96);
}
#trabajos .project-card.motion-project:nth-child(3){
  transform:translateX(-34px) scale(.95);
}
#trabajos .project-card.motion-project.project-visible{
  opacity:1;
  filter:blur(0);
  transform:
    perspective(1100px)
    translate3d(0,var(--tilt-lift,0px),0)
    rotateX(var(--tilt-x,0deg))
    rotateY(var(--tilt-y,0deg))
    scale(1);
}
#trabajos .project-card.motion-project.project-visible:hover{
  --tilt-lift:-9px;
  box-shadow:0 34px 88px rgba(45,37,21,.14);
}
#trabajos .project-media img{
  transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .45s ease;
}
#trabajos .project-card:hover .project-media img{
  transform:scale(1.06) translateZ(18px);
}

/* pequeña luz que recorre el proyecto */
#trabajos .project-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  opacity:0;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.18) 44%,transparent 63%);
  transform:translateX(-125%);
  transition:opacity .25s ease;
}
#trabajos .project-card{
  position:relative;
}
#trabajos .project-card:hover::after{
  opacity:1;
  animation:mwCardShine .9s ease forwards;
}
@keyframes mwCardShine{
  to{transform:translateX(125%)}
}

/* SERVICIOS — profundidad de carrusel */
#servicios .service-card{
  will-change:transform,filter,opacity;
}
#servicios .service-card.carousel-depth{
  --depth-scale:1;
  --depth-y:0px;
  --depth-blur:0px;
  --depth-opacity:1;
  transform:translateY(var(--depth-y)) scale(var(--depth-scale));
  filter:blur(var(--depth-blur));
  opacity:var(--depth-opacity);
  transition:
    transform .42s cubic-bezier(.2,.8,.2,1),
    filter .42s ease,
    opacity .42s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}
#servicios .service-card.carousel-depth:hover{
  transform:translateY(calc(var(--depth-y) - 6px)) scale(var(--depth-scale));
}

/* checks uno por uno */
#servicios .service-card.motion-checks .service-list li{
  opacity:0;
  transform:translateX(-13px);
  filter:blur(3px);
  transition:
    opacity .44s ease,
    transform .44s cubic-bezier(.2,.8,.2,1),
    filter .44s ease;
  transition-delay:calc(var(--check-index) * 55ms);
}
#servicios .service-card.motion-checks.checks-visible .service-list li{
  opacity:1;
  transform:translateX(0);
  filter:blur(0);
}
#servicios .service-card.motion-checks .service-list li::before{
  transform:scale(.6) rotate(-15deg);
  transition:transform .42s cubic-bezier(.2,.9,.2,1);
  transition-delay:calc(var(--check-index) * 55ms + 80ms);
}
#servicios .service-card.motion-checks.checks-visible .service-list li::before{
  transform:scale(1) rotate(0);
}

/* PLANES — cambio con blur / slide */
#precios .plan-panel.active{
  animation:mwPlanPanelIn .52s cubic-bezier(.2,.8,.2,1) both;
}
#precios .plan-panel.active .price-card{
  animation:mwPriceCardIn .6s cubic-bezier(.2,.85,.2,1) both;
}
#precios .plan-panel.active .price-card:nth-child(1){animation-delay:.04s}
#precios .plan-panel.active .price-card:nth-child(2){animation-delay:.12s}
#precios .plan-panel.active .price-card:nth-child(3){animation-delay:.20s}

@keyframes mwPlanPanelIn{
  from{opacity:0;filter:blur(10px);transform:translateY(18px)}
  to{opacity:1;filter:blur(0);transform:none}
}
@keyframes mwPriceCardIn{
  from{opacity:0;filter:blur(7px);transform:translateX(28px) scale(.97)}
  to{opacity:1;filter:blur(0);transform:none}
}

/* plan recomendado con borde dorado vivo */
#precios .price-card.featured{
  overflow:hidden;
}
#precios .price-card.featured::before{
  content:"";
  position:absolute;
  inset:-1px;
  padding:1px;
  border-radius:inherit;
  background:
    conic-gradient(
      from var(--mw-angle,0deg),
      transparent 0 22%,
      rgba(226,196,126,.95) 28%,
      transparent 35% 72%,
      rgba(184,148,69,.55) 80%,
      transparent 88%
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  animation:mwGoldBorder 5s linear infinite;
}
@property --mw-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:0deg;
}
@keyframes mwGoldBorder{
  to{--mw-angle:360deg}
}

/* contador de precios */
.price.price-counting{
  font-variant-numeric:tabular-nums;
}

/* PROCESO — línea que se dibuja */
#proceso .process-grid{
  --process-fill:0%;
  position:relative;
  isolation:isolate;
}
#proceso .process-grid::before{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  top:32px;
  height:2px;
  z-index:-2;
  background:rgba(184,148,69,.14);
}
#proceso .process-grid::after{
  content:"";
  position:absolute;
  left:8%;
  top:32px;
  width:calc(84% * var(--process-progress,0));
  height:2px;
  z-index:-1;
  background:linear-gradient(90deg,#171717,#b89445,#efdba4);
  box-shadow:0 0 12px rgba(184,148,69,.26);
  transition:width .12s linear;
}
#proceso .process-card{
  transition:
    transform .42s cubic-bezier(.2,.8,.2,1),
    box-shadow .42s ease,
    border-color .42s ease,
    background .42s ease;
}
#proceso .process-card.process-active{
  transform:translateY(-7px);
  border-color:rgba(184,148,69,.25);
  box-shadow:0 20px 46px rgba(60,47,20,.09);
}
#proceso .process-card span{
  display:inline-grid;
  place-items:center;
  min-width:42px;
  min-height:42px;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(184,148,69,.16);
  transition:.35s ease;
}
#proceso .process-card.process-active span{
  background:#171717;
  color:#f0d999;
  border-color:#171717;
  box-shadow:0 0 0 7px rgba(184,148,69,.08);
}

/* botones magnéticos + sheen */
.mw-magnetic{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:
    translate .18s ease-out,
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}
.mw-magnetic::after{
  content:"";
  position:absolute;
  top:-30%;
  left:-85%;
  width:48%;
  height:160%;
  z-index:-1;
  background:linear-gradient(90deg,transparent,rgba(239,216,160,.34),transparent);
  transform:skewX(-18deg);
  transition:left .65s ease;
  pointer-events:none;
}
.mw-magnetic:hover::after{
  left:135%;
}

/* cursor dorado responde a elementos interactivos */
.cursor-glow{
  transition:
    width .22s ease,
    height .22s ease,
    opacity .22s ease,
    background .22s ease;
}
.cursor-glow.mw-cursor-active{
  width:560px;
  height:560px;
  opacity:.95;
  background:radial-gradient(circle,rgba(184,148,69,.13),transparent 64%);
}

/* CONTACTO — iluminación que sigue el mouse */
#contacto .contact-box{
  --contact-x:50%;
  --contact-y:50%;
}
#contacto .contact-box::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  opacity:.72;
  background:
    radial-gradient(
      430px circle at var(--contact-x) var(--contact-y),
      rgba(213,179,102,.18),
      transparent 58%
    );
  transition:opacity .3s ease;
}
#contacto .contact-box > *{
  position:relative;
  z-index:1;
}
#contacto .contact-box:hover::before{
  opacity:1;
}

/* WhatsApp pulso discreto */
#contacto .whatsapp-btn.mw-soft-pulse{
  animation:mwWhatsPulse 2.4s ease-in-out 2;
}
@keyframes mwWhatsPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
  50%{box-shadow:0 0 0 9px rgba(37,211,102,.10)}
}

/* transición atmosférica al entrar a secciones */
.section.motion-section::before{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  top:12%;
  right:-150px;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle,rgba(184,148,69,.07),transparent 68%);
  transform:scale(.7);
  transition:opacity .8s ease,transform .8s ease;
}
.section.motion-section.section-visible::before{
  opacity:1;
  transform:scale(1);
}

/* móvil: menos movimiento, misma sensación premium */
@media(max-width:700px){
  #trabajos .project-card.motion-project,
  #trabajos .project-card.motion-project:nth-child(1),
  #trabajos .project-card.motion-project:nth-child(2),
  #trabajos .project-card.motion-project:nth-child(3){
    transform:translateY(28px) scale(.98);
  }
  #trabajos .project-card.motion-project.project-visible{
    transform:translateY(0) scale(1);
  }

  #servicios .service-card.carousel-depth{
    filter:none!important;
  }

  #proceso .process-grid::before{
    left:20px;
    right:auto;
    top:24px;
    bottom:24px;
    width:2px;
    height:auto;
  }
  #proceso .process-grid::after{
    left:20px;
    top:24px;
    width:2px;
    height:calc((100% - 48px) * var(--process-progress,0));
    transition:height .12s linear;
  }
  #proceso .process-card{
    margin-left:18px;
  }

  .mw-scroll-progress{
    height:2px;
  }
}

@media(prefers-reduced-motion:reduce){
  .motion-words .mw-word,
  #trabajos .project-card.motion-project,
  #servicios .service-card.motion-checks .service-list li,
  #servicios .service-card.motion-checks .service-list li::before{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    transition:none!important;
  }
  #precios .plan-panel.active,
  #precios .plan-panel.active .price-card,
  #precios .price-card.featured::before,
  #contacto .whatsapp-btn.mw-soft-pulse{
    animation:none!important;
  }
}


/* ===== FIX INTRO: las cortinas ahora se abren al cargar ===== */
.brutal-intro .curtain-left{
  animation:mwCurtainOpenLeft 1.15s cubic-bezier(.77,0,.18,1) .12s forwards !important;
}
.brutal-intro .curtain-right{
  animation:mwCurtainOpenRight 1.15s cubic-bezier(.77,0,.18,1) .12s forwards !important;
}

@keyframes mwCurtainOpenLeft{
  0%{transform:translateX(0)}
  100%{transform:translateX(-102%)}
}
@keyframes mwCurtainOpenRight{
  0%{transform:translateX(0)}
  100%{transform:translateX(102%)}
}

.brutal-intro.hide .intro-curtain{
  pointer-events:none;
}

/* destello al abrirse */
.brutal-intro::after{
  content:"";
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  z-index:49;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    transparent,
    rgba(245,218,153,.95),
    transparent
  );
  box-shadow:0 0 34px 10px rgba(218,181,98,.28);
  opacity:0;
  animation:mwOpeningFlash 1.25s ease .16s forwards;
}

@keyframes mwOpeningFlash{
  0%{opacity:0;transform:scaleY(.15)}
  22%{opacity:1;transform:scaleY(1)}
  72%{opacity:.45}
  100%{opacity:0;transform:scaleY(1.08)}
}


/* =====================================================
   MATIAS WEB V2 — enfoque simple, flexible y a medida
   ===================================================== */

.portfolio-grid{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px !important;
}
.project-card.large{
  grid-row:auto !important;
}
.project-card{
  min-width:0;
}
.project-media{
  min-height:260px;
}
.project-card:nth-child(4) .project-media{
  background:linear-gradient(145deg,#0a0a0a,#1b1710);
}
.richking-media{
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
}
.richking-media::before{
  content:"";
  position:absolute;
  width:210px;
  height:210px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(203,167,83,.22),transparent 68%);
  animation:richkingGlow 4s ease-in-out infinite;
}
.richking-mark{
  position:relative;
  z-index:2;
  display:flex;
  align-items:baseline;
  gap:4px;
  color:white;
  font-family:"Space Grotesk",sans-serif;
  letter-spacing:-.05em;
}
.richking-mark span,
.richking-mark strong{
  font-size:clamp(34px,4vw,56px);
  line-height:1;
}
.richking-mark span{font-weight:400}
.richking-mark strong{font-weight:800;color:#d7b76e}
.richking-mark small{
  font-size:13px;
  color:#8f836c;
  letter-spacing:.04em;
}
@keyframes richkingGlow{
  50%{transform:scale(1.12);opacity:.7}
}

.custom-solution-banner{
  margin-bottom:26px;
  padding:34px;
  border-radius:26px;
  background:#111;
  color:white;
  border:1px solid rgba(216,187,121,.14);
  position:relative;
  overflow:hidden;
}
.custom-solution-banner::after{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  right:-110px;
  top:-120px;
  background:radial-gradient(circle,rgba(210,174,93,.2),transparent 68%);
  pointer-events:none;
}
.custom-solution-banner span{
  display:block;
  margin-bottom:10px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  color:#d3b66f;
}
.custom-solution-banner h3{
  position:relative;
  z-index:1;
  max-width:820px;
  margin:0 0 10px;
  font:700 clamp(28px,4vw,46px)/1.04 "Space Grotesk",sans-serif;
  letter-spacing:-.04em;
}
.custom-solution-banner p{
  position:relative;
  z-index:1;
  max-width:720px;
  margin:0;
  color:#aaa397;
  font-size:15px;
  line-height:1.65;
}

#servicios .service-card{
  min-height:500px !important;
}
#servicios .service-list{
  margin-top:6px;
}
#servicios .service-list li{
  font-size:14px !important;
}

#precios{
  margin-top:30px;
}
#precios .section-head{
  margin-bottom:28px;
}

@media(max-width:800px){
  .portfolio-grid{
    grid-template-columns:1fr !important;
  }
  .project-media{
    min-height:220px;
  }
  .custom-solution-banner{
    padding:26px 22px;
    border-radius:22px;
  }
  .custom-solution-banner h3{
    font-size:30px;
  }
  .custom-solution-banner p{
    font-size:14px;
  }
  #servicios .service-card{
    min-height:auto !important;
  }
}


/* ======================================================
   INTRO FAILSAFE CSS
   Incluso sin JavaScript, la intro jamás queda bloqueada.
   ====================================================== */
@keyframes mwIntroAbsoluteFailsafe {
  0%, 82% {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  99%, 100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* JS usa .hide antes; esta animación es sólo el último seguro. */
.mw-intro {
  animation:
    mwIntroAbsoluteFailsafe 4s linear forwards;
}

/* Mantener las animaciones internas existentes sin que el shorthand
   anterior las afecte: sólo se aplica al contenedor principal. */
.mw-intro.hide {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Si el usuario desactiva animaciones, no lo hacemos esperar. */
@media (prefers-reduced-motion: reduce) {
  .mw-intro {
    animation: mwIntroAbsoluteFailsafe .8s linear forwards !important;
  }
}


/* ==========================================================
   MATIAS WEB V4 — servicios completos, rubros y sistemas
   ========================================================== */

.richking-photo{
  padding:0 !important;
  background:#0c0a08 !important;
  overflow:hidden;
}
.richking-photo img{
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center 42% !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.project-card:hover .richking-photo img{
  transform:scale(1.045) !important;
}

#servicios .service-card{
  min-height:660px !important;
  padding:34px !important;
}
#servicios .service-card h3{
  font-size:34px !important;
}
#servicios .service-list{
  gap:13px !important;
}
#servicios .service-list li{
  font-size:13.5px !important;
  line-height:1.5 !important;
}

/* Rubros */
.solutions-section{
  background:#f4f1eb;
}
.industry-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.industry-card{
  min-height:245px;
  padding:28px;
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(20,20,20,.075);
  box-shadow:0 14px 36px rgba(45,37,21,.045);
  position:relative;
  overflow:hidden;
  transition:.28s ease;
}
.industry-card::after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  border-radius:50%;
  right:-70px;
  bottom:-75px;
  background:radial-gradient(circle,rgba(184,148,69,.11),transparent 70%);
  transition:.35s ease;
}
.industry-card:hover{
  transform:translateY(-7px);
  border-color:rgba(184,148,69,.24);
  box-shadow:0 24px 56px rgba(45,37,21,.08);
}
.industry-card:hover::after{
  transform:scale(1.35);
}
.industry-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  margin-bottom:30px;
  background:#171717;
  color:#e6ca86;
  font-size:11px;
  font-weight:800;
}
.industry-card h3{
  margin:0 0 10px;
  font:700 22px/1.08 "Space Grotesk",sans-serif;
  letter-spacing:-.035em;
}
.industry-card p{
  margin:0;
  color:#716b61;
  font-size:13px;
  line-height:1.65;
}
.industry-card-wide{
  grid-column:span 2;
  background:#171717;
  color:white;
}
.industry-card-wide h3{
  font-size:30px;
}
.industry-card-wide p{
  max-width:720px;
  color:#a9a294;
}
.industry-card-wide a{
  display:inline-flex;
  gap:10px;
  margin-top:22px;
  color:#e5ca8a;
  font-size:12px;
  font-weight:800;
}

/* Sistemas */
.systems-section{
  background:#fff;
}
.systems-hero{
  display:grid;
  grid-template-columns:1fr .9fr;
  align-items:center;
  gap:34px;
  padding:38px;
  margin-bottom:18px;
  border-radius:28px;
  overflow:hidden;
  background:#10100f;
  color:#fff;
  border:1px solid rgba(216,187,121,.15);
  box-shadow:0 24px 60px rgba(0,0,0,.08);
}
.systems-copy > span{
  display:block;
  margin-bottom:12px;
  color:#d2b46e;
  font-size:10px;
  font-weight:800;
  letter-spacing:.17em;
}
.systems-copy h3{
  max-width:700px;
  margin:0 0 14px;
  font:700 clamp(30px,4vw,50px)/1.02 "Space Grotesk",sans-serif;
  letter-spacing:-.045em;
}
.systems-copy p{
  max-width:660px;
  margin:0;
  color:#aaa397;
  font-size:14px;
  line-height:1.7;
}

.systems-dashboard{
  min-height:330px;
  padding:17px;
  border-radius:22px;
  background:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),
    #090909;
  background-size:28px 28px;
  border:1px solid rgba(219,189,121,.14);
  box-shadow:inset 0 0 50px rgba(205,163,72,.03);
}
.dash-top{
  display:flex;
  align-items:center;
  gap:6px;
  color:#8f8674;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
}
.dash-top i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#4d473c;
}
.dash-top i:first-child{background:#d5b263}
.dash-top span{margin-left:auto}
.dash-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:22px;
}
.dash-grid > div{
  min-height:98px;
  padding:16px;
  border-radius:15px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.05);
}
.dash-grid small{
  display:block;
  color:#766e61;
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
}
.dash-grid strong{
  display:block;
  margin-top:8px;
  font:700 27px "Space Grotesk",sans-serif;
}
.dash-grid em{
  display:block;
  margin-top:5px;
  color:#c8aa62;
  font-size:8px;
  font-style:normal;
  font-weight:800;
}
.dash-chart{
  grid-column:span 2;
  min-height:95px !important;
  display:flex;
  align-items:flex-end;
  gap:9px;
}
.dash-chart span{
  flex:1;
  border-radius:5px 5px 2px 2px;
  background:linear-gradient(to top,#6d5220,#dcc17f);
  animation:dashBars 2.7s ease-in-out infinite alternate;
}
.dash-chart span:nth-child(1){height:28%}
.dash-chart span:nth-child(2){height:46%;animation-delay:.2s}
.dash-chart span:nth-child(3){height:36%;animation-delay:.4s}
.dash-chart span:nth-child(4){height:68%;animation-delay:.1s}
.dash-chart span:nth-child(5){height:55%;animation-delay:.5s}
.dash-chart span:nth-child(6){height:82%;animation-delay:.3s}
@keyframes dashBars{
  to{filter:brightness(1.2);transform:scaleY(.86)}
}

.system-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.system-card{
  padding:28px;
  min-height:310px;
  border-radius:22px;
  background:#faf9f6;
  border:1px solid rgba(20,20,20,.07);
  transition:.27s ease;
}
.system-card:hover{
  transform:translateY(-6px);
  background:#fff;
  border-color:rgba(184,148,69,.24);
  box-shadow:0 20px 50px rgba(45,37,21,.075);
}
.system-card > span{
  display:inline-block;
  padding:7px 9px;
  border-radius:999px;
  background:#171717;
  color:#e5c77e;
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.system-card h3{
  margin:21px 0 17px;
  font:700 24px/1.08 "Space Grotesk",sans-serif;
  letter-spacing:-.035em;
}
.system-card ul{
  display:grid;
  gap:11px;
  margin:0;
  padding:0;
  list-style:none;
}
.system-card li{
  position:relative;
  padding-left:21px;
  color:#69645b;
  font-size:12.5px;
  line-height:1.5;
}
.system-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#bc9745;
  box-shadow:0 0 0 4px rgba(188,151,69,.08);
}

.systems-note{
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:18px;
  padding:28px;
  border-radius:22px;
  background:#f4f0e8;
  border:1px solid rgba(184,148,69,.12);
}
.systems-note strong{
  min-width:max-content;
  font:700 21px "Space Grotesk",sans-serif;
}
.systems-note p{
  flex:1;
  margin:0;
  color:#6e675b;
  font-size:12.5px;
  line-height:1.6;
}
.systems-note .btn{
  flex-shrink:0;
}

.pricing-custom-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin-bottom:18px;
  padding:22px 24px;
  border-radius:18px;
  background:#171717;
  color:white;
}
.pricing-custom-note span{
  display:block;
  margin-bottom:5px;
  color:#c5a65f;
  font-size:8px;
  font-weight:800;
  letter-spacing:.14em;
}
.pricing-custom-note strong{
  font:600 15px "Space Grotesk",sans-serif;
}
.pricing-custom-note a{
  flex-shrink:0;
  color:#e3c783;
  font-size:11px;
  font-weight:800;
}

@media(max-width:980px){
  .industry-grid,
  .system-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .industry-card-wide{
    grid-column:span 2;
  }
  .systems-hero{
    grid-template-columns:1fr;
  }
  .systems-note{
    align-items:flex-start;
    flex-wrap:wrap;
  }
}

@media(max-width:700px){
  #servicios .service-card{
    min-height:auto !important;
    padding:28px 24px !important;
  }
  #servicios .service-card h3{
    font-size:30px !important;
  }
  #servicios .service-list li{
    font-size:13px !important;
  }

  .industry-grid,
  .system-grid{
    grid-template-columns:1fr;
  }
  .industry-card-wide{
    grid-column:auto;
  }
  .industry-card{
    min-height:auto;
    padding:24px;
  }
  .industry-card-wide h3{
    font-size:26px;
  }

  .systems-hero{
    padding:25px 20px;
  }
  .systems-copy h3{
    font-size:31px;
  }
  .systems-dashboard{
    min-height:290px;
  }
  .system-card{
    min-height:auto;
    padding:24px;
  }
  .systems-note{
    display:grid;
    gap:14px;
    padding:22px;
  }
  .systems-note strong{
    min-width:0;
  }
  .pricing-custom-note{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* ==========================================================
   V5 — CATÁLOGO COMPLETO DE SERVICIOS
   Todos los servicios quedan visibles, sin carrusel.
   ========================================================== */

.services-full{
  background:#fff;
}
.services-full-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.service-full-card{
  min-height:610px;
  padding:34px;
  border-radius:26px;
  background:#faf9f6;
  border:1px solid rgba(20,20,20,.075);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}
.service-full-card::after{
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  border-radius:50%;
  right:-120px;
  top:-130px;
  background:radial-gradient(circle,rgba(184,148,69,.12),transparent 68%);
  pointer-events:none;
  transition:.35s ease;
}
.service-full-card:hover{
  transform:translateY(-7px);
  border-color:rgba(184,148,69,.26);
  box-shadow:0 28px 65px rgba(45,37,21,.09);
}
.service-full-card:hover::after{
  transform:scale(1.35);
}
.service-full-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:44px;
}
.service-full-number{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#171717;
  color:#e6c77e;
  font-size:11px;
  font-weight:800;
}
.service-full-tag{
  padding:8px 11px;
  border-radius:999px;
  background:#eee9df;
  color:#61594c;
  font-size:9px;
  font-weight:800;
  letter-spacing:.11em;
}
.service-full-card h3{
  max-width:520px;
  margin:0 0 14px;
  font:700 34px/1.02 "Space Grotesk",sans-serif;
  letter-spacing:-.045em;
}
.service-full-card > p{
  max-width:560px;
  margin:0 0 25px;
  color:#756e63;
  font-size:14px;
  line-height:1.65;
}
.service-full-card ul{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:13px 18px;
  padding:0;
  margin:0 0 28px;
  list-style:none;
}
.service-full-card li{
  position:relative;
  padding-left:25px;
  color:#4f4a43;
  font-size:12.5px;
  line-height:1.5;
}
.service-full-card li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(184,148,69,.12);
  color:#9b772c;
  font-size:9px;
  font-weight:900;
}
.service-full-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:auto;
  padding-top:22px;
  border-top:1px solid rgba(20,20,20,.075);
  color:#6e665a;
  font-size:11px;
  font-weight:800;
}
.service-full-foot span:last-child{
  color:#b58b37;
  font-size:16px;
}

.featured-service{
  background:
    radial-gradient(circle at 90% 10%,rgba(210,173,87,.18),transparent 25%),
    #f5f1e8;
  border-color:rgba(184,148,69,.21);
}

.dark-service{
  background:#121211;
  color:#fff;
  border-color:rgba(219,189,120,.13);
}
.dark-service::after{
  background:radial-gradient(circle,rgba(214,178,94,.18),transparent 68%);
}
.dark-service .service-full-number{
  background:#e0c37d;
  color:#171717;
}
.dark-service .service-full-tag{
  background:rgba(255,255,255,.07);
  color:#d2b873;
}
.dark-service > p{
  color:#aaa397;
}
.dark-service li{
  color:#d1cbc0;
}
.dark-service li::before{
  background:rgba(214,178,94,.12);
  color:#e0c37d;
}
.dark-service .service-full-foot{
  border-color:rgba(255,255,255,.09);
  color:#aaa397;
}

.custom-service{
  grid-column:span 2;
  min-height:480px;
  background:
    radial-gradient(circle at 82% 30%,rgba(214,177,91,.16),transparent 26%),
    linear-gradient(135deg,#171717,#242018);
  color:#fff;
  border-color:rgba(214,178,94,.18);
}
.custom-service > p{
  color:#aaa397;
  max-width:720px;
}
.custom-service ul{
  grid-template-columns:repeat(4,1fr);
}
.custom-service li{
  color:#d1cbc0;
}
.custom-service li::before{
  background:rgba(214,178,94,.12);
  color:#e0c37d;
}
.custom-service .service-full-tag{
  background:rgba(255,255,255,.07);
  color:#dfc477;
}
.custom-service .service-full-foot{
  border-color:rgba(255,255,255,.09);
  color:#aaa397;
}

.service-bottom-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-top:18px;
  padding:30px;
  border-radius:24px;
  background:#f2eee6;
  border:1px solid rgba(184,148,69,.13);
}
.service-bottom-cta > div > span{
  display:block;
  margin-bottom:7px;
  color:#a47e31;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
}
.service-bottom-cta h3{
  margin:0 0 6px;
  font:700 25px/1.06 "Space Grotesk",sans-serif;
  letter-spacing:-.035em;
}
.service-bottom-cta p{
  margin:0;
  color:#756e62;
  font-size:12.5px;
}

@media(max-width:980px){
  .service-full-card ul{
    grid-template-columns:1fr;
  }
  .custom-service ul{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:760px){
  .services-full-grid{
    grid-template-columns:1fr;
  }
  .service-full-card,
  .custom-service{
    grid-column:auto;
    min-height:auto;
    padding:26px 22px;
    border-radius:22px;
  }
  .service-full-top{
    margin-bottom:30px;
  }
  .service-full-card h3{
    font-size:30px;
  }
  .service-full-card > p{
    font-size:13.5px;
  }
  .service-full-card ul,
  .custom-service ul{
    grid-template-columns:1fr;
  }
  .service-bottom-cta{
    align-items:flex-start;
    flex-direction:column;
    padding:24px 22px;
  }
}

.service-full-card{
  opacity:0;
  transform:translateY(26px);
}
.service-full-card.service-full-visible{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .58s ease var(--service-delay,0ms),
    transform .58s cubic-bezier(.2,.8,.2,1) var(--service-delay,0ms),
    box-shadow .28s ease,
    border-color .28s ease;
}
.service-full-card.service-full-visible:hover{
  transform:translateY(-7px);
}
@media(prefers-reduced-motion:reduce){
  .service-full-card{
    opacity:1!important;
    transform:none!important;
  }
}


/* ==========================================================
   V6 — SERVICIOS COMO SOLUCIONES A PROBLEMAS
   ========================================================== */
.solution-statement{
  display:grid;
  grid-template-columns:1.45fr .55fr;
  gap:28px;
  align-items:center;
  margin-bottom:18px;
  padding:34px;
  border-radius:26px;
  background:#161615;
  color:#fff;
  border:1px solid rgba(211,177,97,.16);
  overflow:hidden;
  position:relative;
}
.solution-statement::after{
  content:"";
  position:absolute;
  width:390px;
  height:390px;
  border-radius:50%;
  right:-180px;
  top:-210px;
  background:radial-gradient(circle,rgba(214,178,94,.19),transparent 68%);
}
.solution-statement-copy{
  position:relative;
  z-index:1;
}
.solution-statement-copy > span{
  display:block;
  margin-bottom:10px;
  color:#d5b76f;
  font-size:9px;
  font-weight:800;
  letter-spacing:.16em;
}
.solution-statement-copy h3{
  max-width:850px;
  margin:0 0 13px;
  font:700 clamp(28px,4vw,46px)/1.02 "Space Grotesk",sans-serif;
  letter-spacing:-.045em;
}
.solution-statement-copy p{
  max-width:800px;
  margin:0;
  color:#aaa397;
  font-size:14px;
  line-height:1.7;
}
.solution-statement-pillbox{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.solution-statement-pillbox span{
  padding:9px 11px;
  border-radius:999px;
  border:1px solid rgba(230,202,137,.16);
  background:rgba(255,255,255,.04);
  color:#d8c18c;
  font-size:9px;
  font-weight:800;
  letter-spacing:.09em;
}

.services-solution-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.solution-service-card{
  min-height:560px;
  padding:32px;
  border-radius:26px;
  background:#faf9f6;
  border:1px solid rgba(20,20,20,.075);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  transition:.28s ease;
}
.solution-service-card:hover{
  transform:translateY(-7px);
  border-color:rgba(184,148,69,.25);
  box-shadow:0 28px 68px rgba(45,37,21,.085);
}
.solution-service-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:40px;
}
.solution-service-head > span{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#171717;
  color:#e3c578;
  font-size:11px;
  font-weight:800;
}
.solution-service-head strong{
  padding:8px 10px;
  border-radius:999px;
  background:#eee9de;
  color:#6d6250;
  font-size:9px;
  letter-spacing:.11em;
}
.solution-service-card h3{
  margin:0 0 13px;
  font:700 33px/1.03 "Space Grotesk",sans-serif;
  letter-spacing:-.045em;
}
.solution-service-card > p{
  max-width:560px;
  margin:0 0 24px;
  color:#756e63;
  font-size:14px;
  line-height:1.65;
}
.solution-service-card ul{
  display:grid;
  gap:13px;
  padding:0;
  margin:0;
  list-style:none;
}
.solution-service-card li{
  position:relative;
  padding-left:28px;
  color:#4f4a43;
  font-size:13px;
  line-height:1.5;
}
.solution-service-card li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  display:grid;
  place-items:center;
  width:19px;
  height:19px;
  border-radius:6px;
  background:#f0e5ca;
  color:#9c7629;
  font-size:10px;
  font-weight:900;
}

.solution-service-dark{
  background:#131312;
  color:#fff;
  border-color:rgba(213,180,103,.14);
}
.solution-service-dark .solution-service-head > span{
  background:#e0c27a;
  color:#171717;
}
.solution-service-dark .solution-service-head strong{
  background:rgba(255,255,255,.06);
  color:#d4b970;
}
.solution-service-dark > p{
  color:#aaa397;
}
.solution-service-dark li{
  color:#d0c9bd;
}
.solution-service-dark li::before{
  background:rgba(219,184,101,.13);
  color:#e0c27a;
}

.solution-service-custom{
  grid-column:span 2;
  min-height:auto;
  padding:38px;
  background:
    radial-gradient(circle at 86% 28%,rgba(215,179,94,.18),transparent 27%),
    linear-gradient(135deg,#171717,#231f18);
  color:#fff;
  border-color:rgba(213,178,95,.17);
}
.solution-service-custom .solution-service-head > span{
  background:#e2c57e;
  color:#171717;
}
.solution-service-custom .solution-service-head strong{
  background:rgba(255,255,255,.06);
  color:#ddc17a;
}
.solution-service-custom > p{
  max-width:820px;
  color:#b2aa9c;
}
.custom-examples{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 26px;
}
.custom-examples span{
  padding:9px 11px;
  border-radius:999px;
  border:1px solid rgba(225,198,135,.14);
  background:rgba(255,255,255,.045);
  color:#d7c18d;
  font-size:10px;
  font-weight:700;
}
.solution-service-custom > a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
  color:#e8ce8d;
  font-size:12px;
  font-weight:800;
}

.problem-solver-block{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-top:18px;
  padding:30px;
  border-radius:24px;
  background:#f1ede5;
  border:1px solid rgba(184,148,69,.13);
}
.problem-solver-block > div > span{
  display:block;
  margin-bottom:8px;
  color:#a77f2f;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
}
.problem-solver-block h3{
  margin:0 0 7px;
  font:700 27px/1.04 "Space Grotesk",sans-serif;
  letter-spacing:-.04em;
}
.problem-solver-block p{
  max-width:760px;
  margin:0;
  color:#746d61;
  font-size:13px;
  line-height:1.6;
}

@media(max-width:900px){
  .solution-statement{
    grid-template-columns:1fr;
  }
  .solution-statement-pillbox{
    justify-content:flex-start;
  }
}
@media(max-width:760px){
  .services-solution-grid{
    grid-template-columns:1fr;
  }
  .solution-service-card,
  .solution-service-custom{
    grid-column:auto;
    min-height:auto;
    padding:25px 22px;
    border-radius:22px;
  }
  .solution-service-card h3{
    font-size:29px;
  }
  .solution-service-card > p{
    font-size:13.5px;
  }
  .solution-statement{
    padding:25px 22px;
    border-radius:22px;
  }
  .solution-statement-copy h3{
    font-size:30px;
  }
  .problem-solver-block{
    align-items:flex-start;
    flex-direction:column;
    padding:24px 22px;
  }
}

.solution-service-card{
  opacity:0;
  transform:translateY(24px);
}
.solution-service-card.solution-service-visible{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .58s ease var(--solution-delay,0ms),
    transform .58s cubic-bezier(.2,.8,.2,1) var(--solution-delay,0ms),
    box-shadow .28s ease,
    border-color .28s ease;
}
.solution-service-card.solution-service-visible:hover{
  transform:translateY(-7px);
}
@media(prefers-reduced-motion:reduce){
  .solution-service-card{
    opacity:1!important;
    transform:none!important;
  }
}


/* ==========================================================
   V7 — SERVICIOS EN CARRUSEL
   Toda la información, menos saturación visual.
   ========================================================== */

.solutions-carousel-shell{
  position:relative;
  margin-top:4px;
}

.solutions-carousel-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:16px;
  padding:0 3px;
}
.solutions-carousel-top > div:first-child{
  display:grid;
  gap:5px;
}
.solutions-carousel-top > div:first-child span{
  color:#a47e31;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
}
.solutions-carousel-top > div:first-child strong{
  font:600 14px/1.4 "Space Grotesk",sans-serif;
  color:#4d473f;
}
.solutions-carousel-counter{
  display:flex;
  align-items:baseline;
  gap:5px;
  flex-shrink:0;
  color:#a59c8e;
  font-family:"Space Grotesk",sans-serif;
}
.solutions-carousel-counter b{
  color:#171717;
  font-size:28px;
  line-height:1;
}
.solutions-carousel-counter span,
.solutions-carousel-counter em{
  font-size:11px;
  font-style:normal;
  font-weight:700;
}

/* Replace grid with horizontal carousel */
.services-solution-grid{
  display:flex !important;
  grid-template-columns:none !important;
  gap:16px !important;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
  padding:3px 3px 20px;
}
.services-solution-grid::-webkit-scrollbar{
  display:none;
}

.solution-service-card{
  flex:0 0 calc((100% - 16px) / 2);
  width:auto !important;
  min-width:0;
  min-height:585px;
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

/* System-related cards become light to avoid a heavy black block */
.solution-service-dark{
  background:
    radial-gradient(circle at 88% 10%,rgba(184,148,69,.095),transparent 25%),
    #f4f1eb !important;
  color:#171717 !important;
  border-color:rgba(20,20,20,.075) !important;
}
.solution-service-dark .solution-service-head > span{
  background:#171717 !important;
  color:#e3c578 !important;
}
.solution-service-dark .solution-service-head strong{
  background:#e8e1d3 !important;
  color:#786742 !important;
}
.solution-service-dark > p{
  color:#756e63 !important;
}
.solution-service-dark li{
  color:#4f4a43 !important;
}
.solution-service-dark li::before{
  background:#eadfC6 !important;
  color:#9a762b !important;
}

/* Final custom card stays special, but sized like the others */
.solution-service-custom{
  grid-column:auto !important;
  flex-basis:calc((100% - 16px) / 2);
  min-height:585px;
}
.solution-service-custom .custom-examples{
  margin-top:2px;
}
.solution-service-custom .custom-examples span{
  padding:8px 10px;
}

/* Controls */
.solutions-carousel-controls{
  display:flex;
  align-items:center;
  gap:22px;
  margin-top:2px;
}
.solutions-progress{
  flex:1;
  height:3px;
  border-radius:999px;
  overflow:hidden;
  background:#e7e1d7;
}
.solutions-progress i{
  display:block;
  width:12.5%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#171717,#b89445,#e2c781);
  transition:width .3s cubic-bezier(.2,.8,.2,1);
}
.solutions-carousel-arrows{
  display:flex;
  gap:8px;
  flex-shrink:0;
}
.solutions-arrow{
  width:50px;
  height:50px;
  border-radius:50%;
  border:1px solid rgba(20,20,20,.10);
  background:#fff;
  color:#171717;
  display:grid;
  place-items:center;
  font-size:18px;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(45,37,21,.05);
  transition:.22s ease;
}
.solutions-arrow:hover{
  transform:translateY(-2px);
  background:#171717;
  color:#e8cd89;
  border-color:#171717;
}
.solutions-arrow:disabled{
  opacity:.34;
  cursor:default;
  transform:none;
}

.solutions-swipe-hint{
  display:none;
  align-items:center;
  gap:7px;
  margin-top:0;
  margin-bottom:10px;
  color:#8c8375;
  font-size:9px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.solutions-swipe-hint span{
  color:#b48b39;
  font-size:14px;
}

/* Keep cards readable but slightly more compact */
.solution-service-card h3{
  font-size:31px !important;
}
.solution-service-card > p{
  font-size:13.5px !important;
  margin-bottom:21px !important;
}
.solution-service-card ul{
  gap:11px !important;
}
.solution-service-card li{
  font-size:12.5px !important;
}

/* Cleaner statement above carousel */
.solution-statement{
  margin-bottom:28px !important;
}
.solution-statement-pillbox{
  max-width:320px;
}

/* Prevent old reveal transition from fighting horizontal carousel */
.solution-service-card.solution-service-visible{
  transform:translateY(0);
}
.solution-service-card.solution-service-visible:hover{
  transform:translateY(-6px);
}

@media(max-width:980px){
  .solution-service-card,
  .solution-service-custom{
    flex-basis:calc((100% - 14px) / 2);
  }
}

@media(max-width:760px){
  .solutions-carousel-top{
    align-items:flex-start;
    margin-bottom:13px;
  }
  .solutions-carousel-top > div:first-child strong{
    font-size:12px;
    max-width:240px;
  }
  .solutions-carousel-counter b{
    font-size:23px;
  }

  .services-solution-grid{
    gap:13px !important;
    padding-right:24px;
  }
  .solution-service-card,
  .solution-service-custom{
    flex:0 0 calc(100% - 18px);
    min-height:auto;
    padding:26px 22px !important;
  }
  .solution-service-card h3{
    font-size:29px !important;
  }
  .solution-service-card > p{
    font-size:13px !important;
  }
  .solution-service-card li{
    font-size:12.5px !important;
  }

  .solutions-swipe-hint{
    display:flex;
  }
  .solutions-carousel-controls{
    gap:14px;
  }
  .solutions-arrow{
    width:46px;
    height:46px;
  }
}

/* very small phones */
@media(max-width:430px){
  .solution-statement-pillbox span:nth-child(n+5){
    display:none;
  }
  .solutions-carousel-top > div:first-child strong{
    max-width:200px;
  }
}


/* ==========================================================
   V8 — MOBILE COMPACT
   Reduce el largo de la web sin perder contenido.
   ========================================================== */

@media(max-width:760px){

  /* Menos espacio vertical entre secciones */
  .section{
    padding-top:58px !important;
    padding-bottom:58px !important;
  }
  .section-head{
    margin-bottom:26px !important;
  }
  .section-head h2{
    font-size:34px !important;
    line-height:1.02 !important;
  }
  .section-head p{
    font-size:13px !important;
  }

  /* ------------------------------------------------------
     PORTAFOLIO: 4 proyectos = 2 x 2
     ------------------------------------------------------ */
  #trabajos .portfolio-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  #trabajos .project-card{
    border-radius:18px !important;
    overflow:hidden;
    min-width:0;
  }

  #trabajos .project-media,
  #trabajos .large .project-media{
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    padding:12px !important;
  }

  #trabajos .project-media.real-logo img{
    width:88% !important;
    max-height:88% !important;
    border-radius:14px !important;
  }

  #trabajos .richking-photo{
    padding:0 !important;
  }
  #trabajos .richking-photo img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center 39% !important;
  }

  #trabajos .project-content{
    padding:15px 14px 16px !important;
  }

  #trabajos .project-content small{
    font-size:7px !important;
    letter-spacing:.11em !important;
  }

  #trabajos .project-content h3{
    font-size:19px !important;
    line-height:1.05 !important;
    margin:7px 0 8px !important;
  }

  #trabajos .project-content p{
    font-size:10.5px !important;
    line-height:1.45 !important;
    margin-bottom:12px !important;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  /* En móvil quitamos chips redundantes: la tarjeta queda mucho más limpia. */
  #trabajos .project-points{
    display:none !important;
  }

  #trabajos .live-link{
    margin-top:12px !important;
    font-size:9px !important;
  }

  /* Evitar el tilt vertical en tarjetas pequeñas */
  #trabajos .project-card.motion-project,
  #trabajos .project-card.motion-project:nth-child(1),
  #trabajos .project-card.motion-project:nth-child(2),
  #trabajos .project-card.motion-project:nth-child(3),
  #trabajos .project-card.motion-project.project-visible{
    transform:none !important;
  }


  /* ------------------------------------------------------
     RUBROS: 2 por fila
     ------------------------------------------------------ */
  #soluciones .industry-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  #soluciones .industry-card{
    min-height:0 !important;
    padding:17px 15px !important;
    border-radius:18px !important;
  }

  #soluciones .industry-icon{
    width:32px !important;
    height:32px !important;
    margin-bottom:18px !important;
    font-size:9px !important;
  }

  #soluciones .industry-card h3{
    font-size:17px !important;
    line-height:1.08 !important;
    margin-bottom:8px !important;
  }

  #soluciones .industry-card p{
    font-size:10.5px !important;
    line-height:1.5 !important;
  }

  #soluciones .industry-card-wide{
    grid-column:span 2 !important;
    padding:20px !important;
  }

  #soluciones .industry-card-wide h3{
    font-size:23px !important;
  }

  #soluciones .industry-card-wide a{
    margin-top:14px !important;
    font-size:10px !important;
  }


  /* ------------------------------------------------------
     APP / SISTEMAS
     Dashboard más compacto + módulos 2 por fila
     ------------------------------------------------------ */
  #sistemas .systems-hero{
    padding:22px 18px !important;
    gap:20px !important;
    border-radius:22px !important;
  }

  #sistemas .systems-copy h3{
    font-size:28px !important;
  }

  #sistemas .systems-copy p{
    font-size:12px !important;
  }

  #sistemas .systems-dashboard{
    min-height:215px !important;
    padding:13px !important;
  }

  #sistemas .dash-grid{
    gap:7px !important;
    margin-top:14px !important;
  }

  #sistemas .dash-grid > div{
    min-height:70px !important;
    padding:11px !important;
  }

  #sistemas .dash-grid strong{
    font-size:20px !important;
  }

  #sistemas .dash-chart{
    min-height:66px !important;
  }

  #sistemas .system-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  #sistemas .system-card{
    min-height:0 !important;
    padding:17px 15px !important;
    border-radius:18px !important;
  }

  #sistemas .system-card > span{
    padding:6px 7px !important;
    font-size:7px !important;
  }

  #sistemas .system-card h3{
    margin:14px 0 12px !important;
    font-size:17px !important;
    line-height:1.08 !important;
  }

  #sistemas .system-card ul{
    gap:8px !important;
  }

  #sistemas .system-card li{
    padding-left:15px !important;
    font-size:10px !important;
    line-height:1.35 !important;
  }

  #sistemas .system-card li::before{
    width:5px !important;
    height:5px !important;
    box-shadow:0 0 0 3px rgba(188,151,69,.07) !important;
  }

  #sistemas .systems-note{
    padding:19px 17px !important;
    border-radius:18px !important;
  }

  #sistemas .systems-note strong{
    font-size:18px !important;
  }

  #sistemas .systems-note p{
    font-size:11px !important;
  }


  /* ------------------------------------------------------
     PROCESO: 2 x 2, sin línea vertical interminable
     ------------------------------------------------------ */
  #proceso .process-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  #proceso .process-grid::before,
  #proceso .process-grid::after{
    display:none !important;
  }

  #proceso .process-card{
    margin-left:0 !important;
    padding:18px 15px !important;
    min-height:180px;
    border-radius:18px !important;
  }

  #proceso .process-card span{
    min-width:34px !important;
    min-height:34px !important;
    width:34px !important;
    height:34px !important;
    font-size:10px !important;
  }

  #proceso .process-card h3{
    font-size:18px !important;
    line-height:1.08 !important;
    margin:18px 0 8px !important;
  }

  #proceso .process-card p{
    font-size:10.5px !important;
    line-height:1.5 !important;
  }

  #proceso .process-card.process-active{
    transform:translateY(-3px) !important;
  }


  /* ------------------------------------------------------
     SERVICIOS EN CARRUSEL:
     mantener 1 por pantalla, pero algo más compacto
     ------------------------------------------------------ */
  #servicios .solution-service-card,
  #servicios .solution-service-custom{
    padding:23px 20px !important;
  }

  #servicios .solution-service-head{
    margin-bottom:27px !important;
  }

  #servicios .solution-service-card h3{
    font-size:27px !important;
  }

  #servicios .solution-service-card > p{
    font-size:12.5px !important;
  }

  #servicios .solution-service-card li{
    font-size:11.5px !important;
    line-height:1.4 !important;
  }

  #servicios .solution-service-card ul{
    gap:9px !important;
  }

  /* ------------------------------------------------------
     Contacto algo más compacto
     ------------------------------------------------------ */
  #contacto .contact-box{
    padding:27px 20px !important;
    gap:26px !important;
  }
}

/* Teléfonos muy angostos: seguimos 2x2, ajustando texto */
@media(max-width:390px){
  #trabajos .project-content{
    padding:13px 11px 14px !important;
  }
  #trabajos .project-content h3{
    font-size:17px !important;
  }
  #trabajos .project-content p{
    font-size:9.5px !important;
    -webkit-line-clamp:2;
  }

  #soluciones .industry-card,
  #sistemas .system-card{
    padding:15px 12px !important;
  }

  #soluciones .industry-card h3,
  #sistemas .system-card h3{
    font-size:15.5px !important;
  }

  #soluciones .industry-card p,
  #sistemas .system-card li{
    font-size:9px !important;
  }

  #proceso .process-card{
    min-height:165px;
    padding:16px 13px !important;
  }
  #proceso .process-card h3{
    font-size:16.5px !important;
  }
}


/* Responsive containment: carousels scroll inside the viewport. */
html { overflow-x: clip; }
body { width: 100%; min-width: 0; }
#precios .container, .plan-panel, .plan-intro > *,
.plan-carousel-left { min-width: 0; }
.plan-panel .price-grid { width: 100%; max-width: 100%; min-width: 0; }
.plan-panel .price-card { min-width: 0; overflow-wrap: anywhere; }
.plan-tabs { max-width: 100%; overscroll-behavior-x: contain; }
@media (max-width: 700px) {
  .plan-panel .price-grid {
    padding: 14px 0 18px;
    gap: 14px;
    scroll-padding-inline: 0;
  }
  .plan-panel .price-card {
    flex: 0 0 100%;
    padding: 26px 22px;
    scroll-snap-stop: always;
  }
  .plan-carousel-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }
  .plan-carousel-left { grid-column: 1 / -1; }
  .plan-carousel-count { grid-column: 2; grid-row: 2; }
  .plan-carousel-arrows { grid-column: 1; grid-row: 2; }
  .plan-carousel-hint { font-size: 9px; letter-spacing: .05em; }
  .plan-intro { gap: 14px; }
}

/* Project previews and direct quotations. */
#trabajos .project-card .project-screen {
  display:block !important; padding:0 !important; height:auto !important;
  min-height:0 !important; aspect-ratio:auto !important; background:#eae6dc;
}
.project-browser {display:flex;align-items:center;gap:5px;padding:12px 14px;background:#171717;color:#cfc5ae;font-size:10px;}
.project-browser i {width:6px;height:6px;border-radius:50%;background:#b89445;}
.project-browser span {margin-left:8px;}
#trabajos .project-screen img {width:100% !important;max-height:none !important;height:auto !important;aspect-ratio:1.65;object-fit:cover !important;object-position:top !important;border-radius:0 !important;transform:none !important;}
.quote-conditions {margin-top:32px;padding:28px;border:1px solid rgba(184,148,69,.25);border-radius:22px;background:#fbf9f3;}
.quote-conditions h3 {font:700 26px 'Space Grotesk',sans-serif;margin:12px 0 24px;}
.quote-conditions-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
.quote-conditions-grid strong {font-size:14px;}
.quote-conditions-grid p,.faq-item p {font-size:13px;line-height:1.75;color:#746f66;}
.faq-section {background:#fff;}
.faq-list {display:grid;gap:10px;max-width:900px;margin:auto;}
.faq-item {border:1px solid var(--line);border-radius:16px;background:#fbfaf7;}
.faq-item summary {position:relative;cursor:pointer;list-style:none;padding:22px 54px 22px 22px;font-weight:700;font-size:15px;line-height:1.5;}
.faq-item summary::-webkit-details-marker {display:none;}
.faq-item summary::after {content:'+';position:absolute;right:22px;top:20px;color:#957434;font-size:22px;}
.faq-item[open] {border-color:#b89445;}
.faq-item[open] summary::after {content:'−';}
.faq-item p {margin:0;padding:0 22px 22px;max-width:780px;}
.faq-bottom {text-align:center;margin-top:28px;}
.faq-bottom p {font-size:14px;color:#746f66;margin-bottom:18px;}
.floating-whatsapp {position:fixed;z-index:60;right:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;padding:14px 20px;border-radius:100px;background:#171717;color:#fff;border:1px solid #b89445;box-shadow:0 8px 30px #0003;font-size:13px;font-weight:800;transition:background .2s ease;}
.floating-whatsapp svg {width:27px;height:27px;color:#e0c27b;flex:none;}
.floating-whatsapp:hover {background:#353024;}
a:focus-visible,button:focus-visible,summary:focus-visible {outline:3px solid #b89445;outline-offset:4px;}
footer {padding-bottom:100px;}
@media(max-width:700px) {
  .quote-conditions {padding:22px 20px;}
  .quote-conditions-grid {grid-template-columns:1fr;gap:16px;}
  .quote-conditions h3 {font-size:24px;}
  .quote-conditions-grid p {margin-bottom:0;}
  .faq-item summary {font-size:14px;padding:19px 48px 19px 18px;}
  .faq-item p {padding:0 18px 19px;}
  .floating-whatsapp {right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));padding:13px;}
  .floating-whatsapp span {display:none;}
  #trabajos .project-screen img {aspect-ratio:1.2;}
  .project-browser {padding:8px;gap:3px;}
  .project-browser span {font-size:8px;margin-left:4px;}
}
#trabajos .project-content p {display:block !important;-webkit-line-clamp:unset !important;line-clamp:unset !important;overflow:visible !important;}
.whatsapp-btn {display:inline-flex;align-items:center;justify-content:center;}

/* Clear service entry prices and contained detailed plans. */
.service-starting-price {display:flex;align-items:baseline;flex-wrap:wrap;gap:7px 10px;margin:0 0 20px;padding:16px 0;border-block:1px solid rgba(184,148,69,.2);}
.service-starting-price > span {font-size:12px;color:#746f66;}
.service-starting-price > strong {font:700 32px 'Space Grotesk',sans-serif;letter-spacing:-.04em;}
.service-starting-price > small {font-size:11px;color:#746f66;}
.service-plan-actions {margin-top:auto;padding-top:24px;display:grid;gap:14px;}
.solution-service-card .service-plan-link {display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;background:#171717;border:1px solid #171717;border-radius:12px;color:#f1dfb1;font-size:13px;font-weight:800;}
.solution-service-card .service-plan-link:hover {background:#393124;}
.service-redesign-link {font-size:12px;color:#785b25;text-decoration:underline;text-underline-offset:4px;line-height:1.6;}
.service-custom-price {font-size:13px;color:#746f66;margin:0;}
#precios {scroll-margin-top:100px;}
#precios .plan-panel {scroll-margin-top:100px;outline:none;}
#precios .container {max-width:1160px;}
#solutionsTrack {min-width:0;max-width:100%;}
@media(max-width:760px) {
  /* Category buttons wrap instead of scrolling their ancestors on iOS. */
  #precios .plan-tabs {display:flex;flex-wrap:wrap;gap:8px;width:100%;overflow:visible;padding:4px 0 12px;}
  #precios .plan-tab {flex:1 1 calc(33.333% - 8px);min-width:0;text-align:center;padding:12px 10px !important;font-size:11px !important;white-space:normal;}
  /* All three plans are readable vertically, with no horizontal drag. */
  #precios .plan-panel .price-grid {display:grid !important;grid-template-columns:minmax(0,1fr);gap:18px;width:100%;max-width:100%;padding:12px 0 18px;overflow:visible;scroll-snap-type:none;}
  #precios .plan-panel .price-card {width:100%;max-width:100%;min-width:0;min-height:0;flex:none;}
  #precios .plan-carousel-controls {display:none;}
  #precios .price-card:hover {transform:none;}
  #precios .plan-intro {display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:14px;}
  #precios .price-card ul {min-height:0;}
  .service-starting-price > strong {font-size:30px;}
  .solution-service-card ul {margin-bottom:0;}
  #solutionsTrack .solution-service-card:nth-child(-n+4) li:nth-child(n+4) {display:none;}
  .service-plan-actions {padding-top:20px;}
}

/* Project consultation, matching the black and gold contact panel. */
#contacto .project-enquiry {grid-column:1 / -1;min-width:0;margin-top:4px;padding:30px;border:1px solid rgba(215,188,122,.28);border-radius:22px;background:rgba(12,12,12,.65);}
#contacto .enquiry-intro {margin-bottom:26px;}
#contacto .enquiry-intro .kicker {color:#d7bc7a;}
#contacto .enquiry-intro h3 {font:700 clamp(24px,3vw,34px)/1.15 'Space Grotesk',sans-serif;letter-spacing:-.025em;margin:12px 0;max-width:650px;color:#fff;}
#contacto .enquiry-intro p {font-size:14px !important;max-width:660px;}
.enquiry-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
.enquiry-field {display:grid;gap:10px;min-width:0;}
.enquiry-wide {grid-column:1 / -1;}
.enquiry-field label {font-size:14px;font-weight:700;color:#e5dfd3;line-height:1.5;}
.enquiry-field label > span {color:#d7bc7a;}
.enquiry-field label small {font-size:11px;font-weight:500;color:#a49e93;margin-left:6px;}
.enquiry-field input,.enquiry-field select,.enquiry-field textarea {display:block;width:100%;min-width:0;max-width:100%;border:1px solid #7a693f;border-radius:12px;padding:15px 16px;background:#202020;color:#fff;font:400 16px/1.5 'Manrope',sans-serif;box-shadow:none;transition:border-color .2s ease;}
.enquiry-field textarea {resize:vertical;min-height:150px;}
.enquiry-field select {color-scheme:dark;}
.enquiry-field input::placeholder,.enquiry-field textarea::placeholder {color:#a39e94;opacity:1;}
.enquiry-field input:focus,.enquiry-field select:focus,.enquiry-field textarea:focus {outline:2px solid #d7bc7a;outline-offset:3px;border-color:#d7bc7a;}
.enquiry-submit {display:flex;align-items:center;justify-content:center;gap:18px;width:100%;min-height:54px;padding:16px 20px;border:1px solid #e1c582;border-radius:12px;background:#d7bc7a;color:#15130e;font-size:15px;font-weight:800;cursor:pointer;}
.enquiry-submit:hover {background:#e5ce98;}
.enquiry-submit:disabled {opacity:.5;cursor:not-allowed;}
#contacto .enquiry-required {font-size:11px !important;color:#aaa394;margin:16px 0 !important;}
#contacto .enquiry-note {font-size:12px !important;line-height:1.7 !important;margin:16px 0 0 !important;max-width:700px;color:#bdb6ab;}
#contacto .enquiry-status {font-size:12px !important;line-height:1.6 !important;margin-top:12px;color:#e1c582;}
.enquiry-status:empty {display:none;}
@media(max-width:760px) {
  #contacto .project-enquiry {padding:22px 16px;border-radius:18px;}
  .enquiry-grid {grid-template-columns:minmax(0,1fr);gap:20px;}
  .enquiry-wide {grid-column:auto;}
  #contacto .enquiry-intro h3 {font-size:26px;}
  #contacto .enquiry-intro p {font-size:13px !important;}
  .enquiry-submit {font-size:14px;gap:10px;}
  .enquiry-field input,.enquiry-field select,.enquiry-field textarea {padding:14px 12px;}
}

/* A shorter journey from a service to its quote. */
.hero-copy h1 {font-size:clamp(35px,4.2vw,58px) !important;line-height:1.06 !important;}
.optional-services {display:grid;gap:12px;padding:0 0 40px;}
.service-more {min-width:0;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;}
.service-more > summary {display:flex;align-items:center;justify-content:space-between;gap:18px;list-style:none;padding:22px;font-size:14px;font-weight:800;cursor:pointer;}
.service-more > summary::-webkit-details-marker {display:none;}
.service-more > summary span {font-size:22px;color:#967534;transition:transform .2s;}
.service-more[open] > summary span {transform:rotate(45deg);}
.service-more-content {min-width:0;}
.service-more-content .section {padding:36px 0 !important;}
.service-more-content .reveal {opacity:1;transform:none;filter:none;}
.plan-guidance {display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px;padding:26px;border-radius:20px;background:#fff;border:1px solid rgba(184,148,69,.25);}
.plan-guidance h3 {font:700 24px 'Space Grotesk',sans-serif;margin:0 0 8px;}
.plan-guidance p {font-size:13px;color:#746f66;line-height:1.7;margin:0;}
.plan-guidance .btn {flex-shrink:0;}
@media(max-width:760px) {
  .hero-copy h1 {font-size:clamp(34px,8.6vw,44px) !important;}
  .service-more > summary {font-size:13px;padding:18px;}
  .plan-guidance {display:grid;grid-template-columns:minmax(0,1fr);padding:22px;gap:18px;}
  .plan-guidance h3 {font-size:23px;}
}

/* Horizontal project gallery, contained inside the page. */
#trabajos .portfolio-carousel {position:relative;display:flex !important;grid-template-columns:none !important;gap:20px !important;min-width:0;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:8px 0 18px;}
#trabajos .portfolio-carousel::-webkit-scrollbar {display:none;}
#trabajos .portfolio-carousel .project-card {flex:0 0 100%;width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:stretch;scroll-snap-align:start;scroll-snap-stop:always;opacity:1 !important;transform:none !important;filter:none !important;transition:border-color .2s,box-shadow .2s;}
#trabajos .portfolio-carousel .project-card .project-screen {display:flex !important;flex-direction:column;min-width:0;justify-content:center;background:#eae6dc;}
#trabajos .portfolio-carousel .project-screen img {width:100% !important;height:auto !important;aspect-ratio:1.55 !important;object-fit:contain !important;object-position:center !important;background:#eae6dc;}
#trabajos .portfolio-carousel .project-content {display:flex;flex-direction:column;min-width:0;padding:30px !important;}
#trabajos .portfolio-carousel .project-content p {font-size:14px !important;line-height:1.65 !important;}
#trabajos .portfolio-carousel .project-content h3 {font-size:30px !important;}
#trabajos .portfolio-carousel .project-points {display:flex !important;flex-wrap:wrap;margin-top:18px;}
#trabajos .portfolio-carousel .live-link {margin-top:auto;padding-top:24px;}
.portfolio-controls {display:grid;gap:14px;margin-top:4px;}
.portfolio-controls[hidden] {display:none;}
.portfolio-controls-copy,.portfolio-navigation {display:flex;align-items:center;justify-content:space-between;gap:16px;}
.portfolio-controls-copy > span:first-child {font-size:11px;font-weight:800;color:#8d784e;text-transform:uppercase;letter-spacing:.08em;}
.portfolio-count {font-size:12px;color:#8a8378;white-space:nowrap;}
.portfolio-count b {color:#171717;}
.portfolio-dots,.portfolio-arrows {display:flex;align-items:center;gap:8px;}
.portfolio-dots button {width:10px;height:10px;border:0;padding:0;border-radius:100px;background:#ded7c9;cursor:pointer;position:relative;}
.portfolio-dots button::before {content:'';position:absolute;inset:-10px;}
.portfolio-dots button[aria-current] {width:28px;background:#9c7a34;}
.portfolio-arrows button {width:46px;height:46px;border-radius:50%;border:1px solid #ded7c9;background:#fff;color:#171717;font-size:22px;cursor:pointer;}
.portfolio-arrows button:disabled {opacity:.35;cursor:default;}
@media(max-width:760px) {
  #trabajos .portfolio-carousel {gap:14px !important;}
  #trabajos .portfolio-carousel .project-card {flex-basis:90%;width:90%;display:flex;flex-direction:column;}
  #trabajos .portfolio-carousel .project-content {padding:24px !important;flex:1;}
  #trabajos .portfolio-carousel .project-content h3 {font-size:27px !important;}
  #trabajos .portfolio-carousel .project-content p {font-size:13px !important;}
  #trabajos .portfolio-carousel .project-screen img {aspect-ratio:1.55 !important;}
  .portfolio-controls-copy > span:first-child {font-size:10px;letter-spacing:.05em;}
}
@media(prefers-reduced-motion:reduce) {
  #trabajos .portfolio-carousel {scroll-behavior:auto;}
}

/* A small working example of a custom application. */
.custom-demo-section {background:#f5f1e8;}
.custom-app-callout {display:flex;align-items:center;justify-content:space-between;gap:32px;margin-bottom:34px;}
.custom-app-callout > div {min-width:0;max-width:760px;}
.custom-app-callout h2 {font:700 clamp(30px,4vw,46px)/1.08 'Space Grotesk',sans-serif;letter-spacing:-.035em;margin:12px 0 18px;}
.custom-app-callout p {font-size:14px;line-height:1.8;color:#746f66;margin:10px 0 0;}
.custom-app-callout > .btn {flex-shrink:0;}
.menu-demo {padding:30px;border-radius:26px;background:#fff;border:1px solid #ded4be;scroll-margin-top:100px;}
.menu-demo-heading {display:flex;align-items:center;justify-content:space-between;gap:24px;}
.menu-demo-heading h3 {font:700 30px/1.15 'Space Grotesk',sans-serif;margin:12px 0;letter-spacing:-.025em;}
.menu-demo-heading p {font-size:13px;line-height:1.75;color:#746f66;max-width:680px;}
.demo-tour-btn {flex-shrink:0;border:1px solid #b89445;border-radius:12px;background:#f8f3e7;color:#37290e;font-size:12px;font-weight:800;min-height:46px;padding:12px 16px;cursor:pointer;}
.demo-tour-btn:disabled {opacity:.5;}
.demo-tour-btn[hidden],.demo-reset[hidden] {display:none;}
.demo-steps {display:flex;flex-wrap:wrap;gap:10px;margin:20px 0;}
.demo-steps span {padding:8px 12px;border-radius:100px;font-size:11px;font-weight:800;background:#f2eee5;color:#7b6128;}
.demo-workspace {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
.demo-editor,.demo-preview {min-width:0;padding:24px;border-radius:18px;}
.demo-editor {background:#171717;color:#fff;display:flex;flex-direction:column;}
.demo-panel-heading {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:22px;font-size:13px;font-weight:800;}
.demo-panel-heading small {font-size:8px;letter-spacing:.08em;color:#b89445;}
.demo-editor label {display:block;font-size:12px;font-weight:700;margin:0 0 8px;}
.demo-editor input:not([type=checkbox]),.demo-editor select {width:100%;min-width:0;border:1px solid #79643a;border-radius:10px;background:#262626;color:#fff;padding:12px;font:400 16px/1.5 'Manrope',sans-serif;margin-bottom:18px;color-scheme:dark;}
.demo-input-row {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.demo-editor .demo-check {display:flex;align-items:center;gap:10px;line-height:1.6;margin:0 0 20px;cursor:pointer;}
.demo-check input {width:20px;height:20px;accent-color:#b89445;}
.demo-save {margin-top:auto;background:#d7bc7a;border:1px solid #d7bc7a;color:#171717;border-radius:10px;padding:14px;font-size:13px;font-weight:800;cursor:pointer;}
.demo-reset {border:0;background:transparent;color:#d7bc7a;text-decoration:underline;text-underline-offset:4px;font-size:12px;cursor:pointer;padding:14px 8px 0;}
.demo-preview {background:#f6f2e8;border:1px solid #e4dbca;}
.demo-menu-brand {padding:10px 0 24px;}
.demo-menu-brand > span {font-size:9px;letter-spacing:.15em;color:#8c6d2d;display:block;margin-bottom:8px;}
.demo-menu-brand strong {font:700 26px 'Space Grotesk',sans-serif;}
.demo-menu-product {padding:22px;border:1px solid #e4dbca;border-radius:14px;background:#fff;}
.demo-product-category {color:#8c6d2d;font-size:11px;font-weight:800;}
.demo-menu-product h4 {font:700 23px 'Space Grotesk',sans-serif;margin:12px 0;overflow-wrap:anywhere;}
.demo-menu-product p {font-size:12px;color:#746f66;line-height:1.7;}
.demo-product-bottom {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:24px;}
.demo-product-bottom strong {font:700 26px 'Space Grotesk',sans-serif;}
.demo-product-bottom span {font-size:11px;font-weight:700;color:#365940;background:#edf4ec;padding:7px 10px;border-radius:100px;}
.demo-product-bottom span.unavailable {color:#775d40;background:#f2e9dd;}
.demo-live-status {min-height:44px;color:#6d5831;font-size:12px;line-height:1.7;margin:20px 0 0;}
.demo-disclaimer {font-size:11px;color:#827a6b;line-height:1.7;margin-top:20px;}
.demo-plans-link {display:inline-block;font-size:13px;font-weight:800;line-height:1.6;color:#785b25;text-decoration:underline;text-underline-offset:4px;}
@media(max-width:760px) {
  .custom-app-callout,.menu-demo-heading {display:grid;grid-template-columns:minmax(0,1fr);gap:20px;}
  .custom-app-callout > .btn {justify-self:start;}
  .menu-demo {padding:22px 16px;}
  .menu-demo-heading h3 {font-size:26px;}
  .demo-workspace {grid-template-columns:minmax(0,1fr);}
  .demo-editor,.demo-preview {padding:20px 16px;}
  .demo-tour-btn {justify-self:start;}
}
@media(max-width:350px) {.demo-input-row {grid-template-columns:minmax(0,1fr);gap:0;}}