/* Creativa Lab — tema claro (prueba basada en el flyer "Diseña, personaliza y cotiza todo online").
   Layout: fondo blanco limpio, tarjetas redondeadas con sombra suave, botones píldora en degradé azul
   y arcos celestes en los bordes. Las escenas 3D quedan en "pantallas" azul noche, como el portátil del flyer. */
:root{
  --night:#ffffff;
  --soft:#f3f7fc;
  --surface:#ffffff;
  --surface-2:#f6f9fd;
  --ink:#2f3033;
  --heading:#464545;
  --muted:#5f6368;
  --led:#0070d3;
  --led-deep:#0052b6;
  --cyan:#0098e7;
  --sky:#2ab8f6;
  --neon:#d61f7a;
  --line:#e3e8ef;
  --screen:#0f1b2d;
  --grad:linear-gradient(135deg,#1a9bf0 0%,#0070d3 55%,#0052b6 100%);
  --shadow:0 6px 24px rgba(16,48,96,.08);
  --shadow-hi:0 14px 36px rgba(0,82,182,.16);
  --r:18px;
  --f-display:"Montserrat","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-body:"Nunito Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"Montserrat","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
html,body{background:var(--night);color:var(--ink)}
body{font-size:17px}

/* tipografía */
h1,h2,h3{font-family:var(--f-display);font-weight:800;text-transform:none;letter-spacing:-.02em;line-height:1.04;color:var(--heading)}
h2{font-size:clamp(34px,4.6vw,58px)}
h3{font-size:22px;line-height:1.15}
.eyebrow{font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.08em;color:var(--led)}
.lead{color:var(--muted);font-size:18px}

/* botones píldora */
.btn{border-radius:999px;font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:0;text-transform:none;padding:14px 26px;border:1.5px solid var(--line);color:var(--led);background:#fff;box-shadow:var(--shadow)}
.btn:hover{border-color:var(--led)}
.btn-led{background:var(--grad);border:0;color:#fff;box-shadow:0 10px 24px rgba(0,82,182,.28)}
.btn-led:hover{filter:brightness(1.08);background:var(--grad)}
.nav .btn{color:#fff;padding:10px 20px}

/* header */
.site-head{background:rgba(255,255,255,.88);border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(16,48,96,.05)}
.nav a{color:var(--heading);font-weight:600}
.nav a:hover{color:var(--led)}
.menu-btn{border-radius:999px;color:var(--heading);font-family:var(--f-display);font-weight:700;letter-spacing:0;text-transform:none}

/* muros → fondos limpios con arcos azules */
.wall-sec{background-color:var(--night);background-image:none!important;overflow:hidden}
.wall-sec::before{background:none}
.wall-sec[data-wall]::after{display:none}
.wall-zinc,.wall-wood,.wall-stucco{background-color:var(--soft)}
.wall-sec::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:auto -140px -160px auto;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#56c6f8,#0098e7 60%,#0070d3);opacity:.12}
.wall-zinc::before,.wall-stucco::before{inset:-180px auto auto -160px;opacity:.1}
.services,.svc:hover{background:none}
.why-list li{background:#fff}

/* hero */
.hero{padding-block:130px 70px}
.hero.wall-sec::before{inset:-220px -180px auto auto;width:620px;height:620px;opacity:1;background:radial-gradient(circle at 35% 65%,#6fd2fb 0,#2ab8f6 38%,#0098e7 62%,#0070d3 100%);clip-path:circle(50%)}
.hero h1.hero-h1{font-family:var(--f-display);font-weight:700;font-size:14px;letter-spacing:.08em;color:var(--led)}
.ch{color:#e7ecf2;text-shadow:1px 1px 0 #dce3ea,2px 2px 0 #d4dce5,3px 3px 0 #cbd4de,4px 4px 0 #c3ccd7,5px 5px 0 #bac4d0,6px 6px 0 #b2bdca,12px 18px 26px rgba(16,48,96,.18)}
.ch .on{color:var(--heading);text-shadow:1px 1px 0 #3a3939,2px 2px 0 #333232,3px 3px 0 #2c2b2b,4px 4px 0 #262525,5px 5px 0 #201f1f,6px 6px 0 #1a1a1a,12px 18px 26px rgba(16,48,96,.25)}
.sign .row-2 .ch .on{color:var(--led);text-shadow:1px 1px 0 #0066c2,2px 2px 0 #005db1,3px 3px 0 #0054a0,4px 4px 0 #004c91,5px 5px 0 #004382,6px 6px 0 #003b73,0 0 40px rgba(0,152,231,.35),12px 18px 26px rgba(16,48,96,.25)}
.sign{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;text-transform:uppercase}
.hero-copy .tagline{font-family:var(--f-display);font-weight:800;text-transform:none;letter-spacing:-.02em;line-height:1.08;color:var(--heading)}
.hero-copy .tagline em{position:relative;color:var(--led);white-space:nowrap}
.hero-copy .tagline em::after{content:"";position:absolute;left:-2%;right:-4%;bottom:-.18em;height:.22em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 9C50 3 120 1 198 5' stroke='%230070d3' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.meta{font-family:var(--f-display);font-weight:600;letter-spacing:0;text-transform:none;font-size:14px}
.meta span::before{content:"✓ ";color:var(--led);font-weight:800}

/* franja azul */
.marquee{background:var(--grad);border:0}
.marquee-track span{font-family:var(--f-display);font-weight:800;font-size:24px;text-transform:none;letter-spacing:-.01em;color:rgba(255,255,255,.78)}
.marquee-track span:nth-child(odd){color:#fff}
.marquee-track b{color:#bfe8ff}

/* tarjetas */
.services{gap:18px;border:0}
.svc{border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s,border-color .3s}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-hi);border-color:#cfe2f6;background:#fff}
.svc::after{display:none}
.svc svg{stroke:var(--led);stroke-width:2;width:46px;height:46px}
.svc .tag{font-family:var(--f-display);font-weight:700;letter-spacing:.04em;color:var(--cyan)}
.svc-link{color:var(--led);font-weight:700}

/* pantallas oscuras: anatomía y escena 3D */
.anat,.p3d-stage{--ink:#f4f6f7;--muted:#a9b6c8;--line:rgba(255,255,255,.14);--led:#2ab8f6;color:var(--ink)}
.anat{background:radial-gradient(ellipse at 70% 40%,#16304f,#0b1424 70%);border:0}
.anat h2,.anat h3{color:#fff}
.anat .eyebrow{color:#2ab8f6}
.p3d-stage{background:radial-gradient(ellipse at 50% 45%,#1b3a5e,#0b1424 72%);border:8px solid #1c2633;border-radius:22px;box-shadow:0 24px 50px rgba(16,48,96,.25)}
.p3d-tabs button,.g-filters button{border-radius:999px;font-family:var(--f-display);font-weight:700;letter-spacing:0;text-transform:none;font-size:14px;background:#fff;color:var(--heading);border:1.5px solid var(--line)}
.p3d-tabs button:hover,.g-filters button:hover{border-color:var(--led);color:var(--led)}
.p3d-tabs button[aria-selected="true"],.g-filters button[aria-pressed="true"],.fruit-chips button[aria-pressed="true"]{background:var(--grad);color:#fff;border-color:transparent}
.fruit-chips button{border-color:#bcd7f2;color:var(--heading)}
.p3d-info{border-radius:var(--r);box-shadow:var(--shadow)}
.p3d-note,.tools-note{font-family:var(--f-body);font-size:14px}
.spec{font-family:var(--f-body);font-size:14px}
.spec dt{font-weight:700}

/* proceso */
.pnum{background:var(--grad);border:0;color:#fff;font-family:var(--f-display);font-weight:800;box-shadow:0 8px 20px rgba(0,82,182,.3)}
.process-line line{stroke:#bcd7f2;stroke-dasharray:6 6}
.pchip{border-radius:999px;font-family:var(--f-display);font-weight:700;letter-spacing:0;text-transform:none;font-size:13px;background:#e8f3fd;border:0;color:var(--led)}

/* por qué + garantía */
.why-list{gap:16px;background:none;border:0}
.why-list li{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.why-list b{font-family:var(--f-display);font-weight:800;font-size:20px;text-transform:none;color:var(--heading)}
.guarantee{border:0;border-radius:24px;background:linear-gradient(110deg,#e8f4fe,#f6fbff 60%);box-shadow:var(--shadow)}
.seal svg{stroke:var(--led);filter:none}

/* diseña en línea */
.tool{border-radius:22px;box-shadow:var(--shadow);border-color:var(--line)}
.tool:hover{box-shadow:var(--shadow-hi);border-color:#cfe2f6}
.tool-art{background:linear-gradient(160deg,#eaf4fe,#f8fbff);border-bottom:1px solid var(--line)}
.tool-art .cards rect{fill:#fff;stroke:#9ccaf2}
.tool-art .stamp rect,.tool-art .flag{fill:var(--led)}
.tool-art .stamp path{stroke:#fff}.tool-art .stamp circle{fill:#fff}
.tool-art .mug .dot{fill:var(--led)}
.tool-art .shirt{fill:#fff;stroke:#b9c6d3}
.tool-url{font-family:var(--f-display);font-weight:700;letter-spacing:0;color:var(--cyan)}
.tool h3{font-size:24px}
.tool-list li{border-radius:999px;font-family:var(--f-display);font-weight:600;letter-spacing:0;text-transform:none;font-size:12.5px;background:var(--soft);border:0;color:var(--heading);padding:5px 11px}
.tool .go,.panel .go{font-family:var(--f-display);font-weight:700;letter-spacing:0;text-transform:none;font-size:15px;color:var(--led)}

/* galería */
.g-item{border-radius:16px;border:0;box-shadow:var(--shadow);background:#e9eef4}
.g-item figcaption b{color:#fff;font-family:var(--f-display);font-weight:800;text-transform:none;font-size:18px}
.g-item figcaption span{color:#9fdcff;font-family:var(--f-display);font-weight:600;letter-spacing:0;text-transform:none;font-size:12px}
.lightbox{background:rgba(10,22,40,.94)}
.lb-fig figcaption{color:#c5d2e2;font-family:var(--f-display);text-transform:none;letter-spacing:0}
.lb-fig figcaption b{color:#fff;font-family:var(--f-display);font-weight:800}
.lb-nav,.lb-x{color:#fff;border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08)}
.panel{border-radius:var(--r);box-shadow:var(--shadow)}
a.panel:hover{border-color:#cfe2f6;background:#fff;box-shadow:var(--shadow-hi)}
.panel.neon h3{color:var(--neon);text-shadow:none}

/* agencias: banda azul como el botón del flyer */
.pro{background:var(--grad);border:0;border-radius:28px;box-shadow:0 18px 40px rgba(0,82,182,.25)}
.pro h3,.pro p,.pro .eyebrow{color:#fff}
.pro p{opacity:.9}
.pro .btn{background:#fff;color:var(--led);border:0}

/* preguntas */
.faq summary{font-family:var(--f-display);font-weight:700;color:var(--heading);font-size:18px}
.faq summary::after{font-family:var(--f-display);font-weight:600;color:#fff;background:var(--grad);width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:20px;flex:none}

/* contacto */
.form{border-radius:24px;box-shadow:var(--shadow-hi)}
.field label,.info-list dt{font-family:var(--f-display);font-weight:700;letter-spacing:.02em;text-transform:none;font-size:13px}
.field input,.field select,.field textarea{background:var(--soft);border:1.5px solid var(--line);border-radius:12px}
.field input:focus,.field select:focus,.field textarea:focus{background:#fff}
.info-list dd{font-family:var(--f-display);font-weight:600;color:var(--heading)}
.copy{border-radius:999px;font-family:var(--f-display);text-transform:none;letter-spacing:0;font-weight:600}

/* footer */
.site-foot{background:var(--soft);border-top:1px solid var(--line)}
.site-foot .wrap{font-family:var(--f-display);letter-spacing:0;font-weight:500;font-size:13px}

/* asistente */
.chat-launch{background:var(--grad);color:#fff;font-family:var(--f-display);font-weight:700;letter-spacing:0;text-transform:none;font-size:15px;box-shadow:0 12px 28px rgba(0,82,182,.35)}
.chat-launch svg{fill:#fff}.chat-launch svg circle{fill:var(--led)}
.chat-launch::after{border-color:var(--cyan)}
.chat{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(16,48,96,.25)}
.chat-head{background:var(--grad);border:0;color:#fff}
.chat-ava{background:#fff;color:var(--led);font-family:var(--f-display);font-weight:800}
.chat-who b{color:#fff;font-family:var(--f-display)}
.chat-who span{color:rgba(255,255,255,.85)}
.chat-x{color:rgba(255,255,255,.8)}.chat-x:hover{color:#fff}
.msg.bot{background:var(--soft);color:var(--ink)}
.msg.me{background:var(--grad);color:#fff}
.chat-quick button{border-color:#bcd7f2;color:var(--heading);font-weight:600}
.chat-form,.chat-foot{background:#fff}
.chat-form input{background:var(--soft);color:var(--ink);border-color:var(--line)}
.chat-form button{background:var(--grad)}
.chat-form button svg{fill:#fff}
@media (max-width:520px){.chat{border-radius:0}}

/* responsive */
@media (max-width:760px){
  .nav{background:#fff;box-shadow:0 12px 24px rgba(16,48,96,.1)}
  .hero.wall-sec::before{width:360px;height:360px;inset:-150px -150px auto auto}
}