/* 
  Barceló LAB — prototype
  Circular is loaded from the existing Barceló Estudio uploads folder.
  If your real font filenames/extensions differ, edit ONLY the src URLs below.
*/
@font-face{font-family:"Circular";src:url("https://barceloestudio.com/wp-content/uploads/circular/CircularAir-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Circular";src:url("https://barceloestudio.com/wp-content/uploads/circular/CircularAir-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Circular";src:url("https://barceloestudio.com/wp-content/uploads/circular/CircularAir-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{--ink:#111;--paper:#f2f0eb;--white:#fff;--line:rgba(17,17,17,.18);--acid:#d7ff42;--flow:#111d25;--flow-accent:#15d8c5;--ai:#ded9ff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Circular","Helvetica Neue",Arial,sans-serif;font-weight:300}
a{color:inherit;text-decoration:none}
.topbar{height:92px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:10}
.brand{font-size:18px;line-height:.88;font-weight:700;display:flex;flex-direction:column;letter-spacing:-.04em}
.brand span:last-child{font-weight:300}
nav{display:flex;gap:28px;font-size:14px;     align-content: center;
    align-items: center;}
nav a:hover{opacity:.5}
.logo-image{display:flex;align-items:center;width:clamp(118px,12vw,168px)}
.logo-image img{display:block;width:100%;height:auto;max-height:42px}
@media(max-width:640px){
  .logo-image{width:126px}
  .logo-image img{max-height:36px}
}
.hero{min-height:calc(100vh - 92px);padding:7vh 4vw 4vw;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--line)}
.eyebrow,.kicker,.section-no,.product-meta{font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.hero h1{font-size:clamp(58px,8.7vw,145px);line-height:.82;letter-spacing:-.075em;font-weight:300;margin:28px 0 38px;max-width:1250px;position:relative;z-index:2}
.hero h1 em,.method h2 em{font-style:normal;font-weight:700}
.lead{font-size:clamp(18px,1.55vw,25px);line-height:1.35;max-width:690px;margin:0 0 32px}
.text-link{font-size:15px;border-bottom:1px solid;align-self:flex-start;padding-bottom:5px}
.hero-mark{position:absolute;right:-3vw;bottom:-7vw;width:33vw;height:33vw;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;opacity:.9}
.hero-mark span{font-size:8vw;font-weight:700;letter-spacing:-.08em}
.hero-mark i{position:absolute;width:140%;height:1px;background:var(--ink);transform:rotate(-42deg)}
.section-pad{padding:9vw 4vw}
.intro{display:grid;grid-template-columns:.5fr 1.3fr 1fr;gap:4vw;border-bottom:1px solid var(--line);align-items:start}
.intro h2,.apps h2{font-size:clamp(44px,5.5vw,88px);line-height:.92;letter-spacing:-.055em;font-weight:300;margin:12px 0}
.body-copy,.apps-copy>p{font-size:21px;line-height:1.45;margin-top:28px}
.products{padding:4vw}
.product{min-height:720px;margin-bottom:4vw;padding:28px;display:grid;grid-template-columns:1fr 1.2fr;grid-template-rows:auto 1fr;gap:30px;overflow:hidden}
.product-meta{grid-column:1/-1;display:flex;justify-content:space-between}
.product-copy{padding:5vw 2vw 2vw;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.product-copy h2{font-size:clamp(44px,4.8vw,78px);line-height:.94;letter-spacing:-.055em;font-weight:300;margin:42px 0 24px}
.product-copy p{font-size:19px;line-height:1.45;max-width:540px}
.mini-logo{display:flex;align-items:center;gap:13px;font-size:14px;line-height:.95}
.mini-logo b{width:48px;height:48px;border:1px solid currentColor;display:grid;place-items:center;font-size:20px}
.chips{display:flex;gap:8px;margin:18px 0 30px;flex-wrap:wrap}
.chips span{border:1px solid currentColor;border-radius:30px;padding:7px 12px;font-size:12px}
.button{border-radius: 30px; padding:14px 20px;border:1px solid;display:inline-flex;font-size:14px;transition:.2s}
.button:hover{transform:translateY(-2px)}
.button.light{border-color:#fff}
.button.dark{background:#111;color:#fff;border-color:#111}
.muted-button{opacity:.42;pointer-events:none}
.visual{display:grid;place-items:center;min-width:0}
.product-flow{background:var(--flow);color:#fff}
.flow-logo b{color:var(--flow-accent)}
.browser{width:min(92%,720px);aspect-ratio:1.18;background:#e8e8e4;border-radius:8px;padding:12px;box-shadow:0 30px 70px rgba(0,0,0,.25);transform:rotate(2deg)}
.browser-bar{height:28px;display:flex;gap:6px}
.browser-bar i{width:7px;height:7px;background:#888;border-radius:50%}
.screen{height:calc(100% - 28px);background:#0f171c;color:#fff;position:relative;padding:7%;display:flex;align-items:center}
.screen span{position:absolute;top:7%;left:7%;font-size:12px}
.screen strong{font-size:clamp(48px,6vw,94px);line-height:.77;letter-spacing:-.08em}
.screen small{position:absolute;bottom:7%;right:7%}
.dots{position:absolute;right:4%;top:50%;display:flex;flex-direction:column;gap:7px}
.dots b{width:5px;height:5px;border:1px solid #fff;border-radius:50%}
.dots b:nth-child(2){background:#fff}
.product-ai{background:var(--ai)}
.ai-logo b{background:#111;color:#fff}
.grid-card{width:min(92%,680px);aspect-ratio:1.1;background:#111;color:#fff;padding:8%;position:relative;display:flex;flex-direction:column;gap:18px;box-shadow:25px 25px 0 rgba(255,255,255,.45);transform:rotate(-2deg)}
.prompt{font-size:15px;color:#aaa;margin-bottom:8%}
.wire{height:12%;border:1px solid #777}
.w2{width:65%}
.wire-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;height:28%}
.wire-row div{border:1px solid #777}
.grid-card strong{position:absolute;right:7%;bottom:3%;font-size:10vw;line-height:1;color:var(--ai);letter-spacing:-.1em}
.coming{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:7vw 0;display:grid;grid-template-columns:.4fr 1.3fr 1fr .3fr;align-items:center;gap:3vw}
.coming h3{font-size:clamp(38px,4.5vw,72px);line-height:.95;font-weight:300;letter-spacing:-.05em;margin:0}
.coming p{font-size:18px;line-height:1.45}
.plus{font-size:90px;font-weight:300;text-align:right}
.apps{display:grid;grid-template-columns:.45fr 1.25fr 1fr;gap:4vw}
.apps-copy{padding-top:22px}
.services{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0}
.services span{border:1px solid var(--ink);padding:8px 12px;border-radius:30px;font-size:12px}
.method{background:#111;color:#fff;padding:9vw 4vw}
.method-head span{font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.method h2{font-size:clamp(48px,6.6vw,105px);line-height:.88;letter-spacing:-.065em;font-weight:300;margin:30px 0 8vw}
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #555}
.steps>div{padding:25px 25px 0 16px;border-right:1px solid #555;min-height:200px}
.steps b{display:block;font-size:12px;margin-bottom:45px;color:#aaa}
.steps strong{font-size:24px;font-weight:400}
.steps p{color:#aaa;line-height:1.45;max-width:240px}
footer{padding:8vw 4vw 4vw;min-height:65vh;display:flex;justify-content:space-between;align-items:flex-end}
.footer-brand{font-size:13px;letter-spacing:.12em}
footer h2{font-size:clamp(52px,7vw,110px);line-height:.85;letter-spacing:-.07em;font-weight:300;margin:30px 0 0}
.footer-contact{display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.footer-contact small{margin-top:28px;color:#777}
@media(max-width:850px){
 .topbar{height:auto;min-height:84px;align-items:flex-start;padding-top:22px;padding-bottom:18px;gap:20px}
 nav{gap:12px;flex-wrap:wrap;justify-content:flex-end;font-size:12px}
 .hero{min-height:80vh;padding-top:10vh}
 .hero-mark{width:52vw;height:52vw;opacity:.2}
 .intro,.apps{grid-template-columns:1fr}
 .intro .section-no,.apps .section-no{margin-bottom:20px}
 .product{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:20px;min-height:auto}
 .product-meta{font-size:10px}
 .product-copy{padding:50px 5px 30px}
 .visual{padding:20px 0 50px}
 .browser,.grid-card{width:100%}
 .coming{grid-template-columns:1fr;gap:22px}
 .plus{text-align:left}
 .steps{grid-template-columns:1fr 1fr}
 footer{flex-direction:column;align-items:flex-start;gap:80px}
 .footer-contact{align-items:flex-start}
}
@media(max-width:520px){
 .topbar{display:block}
 nav{margin-top:18px;justify-content:flex-start}
 .hero h1{font-size:16vw}
 .lead{font-size:17px}
 .section-pad{padding:80px 6vw}
 .products{padding:6vw}
 .product-copy h2{font-size:12vw}
 .steps{grid-template-columns:1fr}
 .steps>div{border-right:0;border-bottom:1px solid #555}
 footer{padding:90px 6vw 40px}
}

/* Secondary link back to Barceló Estudio design site */
nav .design-link{opacity:.45}
nav .design-link:hover{opacity:1}
.design-link {
    border: 1px solid var(--ink);
    border-radius: 50px;
    padding: 11px 16px;
 }


/* 03 · Más herramientas */
.more-tools{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:7vw 0 0}
.more-tools-head{display:grid;grid-template-columns:.4fr 1.3fr 1fr;align-items:start;gap:3vw;padding-bottom:5vw}
.more-tools-head .kicker{margin:0 0 16px}
.more-tools-head h3{font-size:clamp(38px,4.5vw,72px);line-height:.95;font-weight:300;letter-spacing:-.05em;margin:0}
.more-tools-intro{font-size:18px;line-height:1.45;margin:28px 0 0;max-width:520px}
.more-tools-featured,.more-tools-secondary{display:grid;border-top:1px solid var(--line)}
.more-tools-featured{grid-template-columns:repeat(2,minmax(0,1fr))}
.more-tools-secondary{grid-template-columns:repeat(3,minmax(0,1fr))}
.tool-card{min-width:0;color:var(--ink);padding:32px;display:flex;flex-direction:column;justify-content:space-between;transition:background .2s ease,color .2s ease}
.more-tools-featured .tool-card:first-child,.more-tools-secondary .tool-card:not(:last-child){border-right:1px solid var(--line)}
.tool-card-featured{min-height:430px}
.tool-card-dark{background:#111;color:#fff}
.tool-card-lilac{background:var(--ai);color:var(--ink)}
.tool-card-small{min-height:280px}
.tool-card-small:hover{background:#fff}
.tool-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:400}
.tool-main{display:flex;justify-content:space-between;gap:30px;align-items:flex-start;margin:70px 0 42px}
.tool-main h4{margin:0;font-size:clamp(34px,4vw,64px);line-height:.92;letter-spacing:-.05em;font-weight:300}
.tool-card-small .tool-main{margin:48px 0 32px}
.tool-card-small .tool-main h4{font-size:clamp(28px,2.5vw,42px)}
.tool-arrow{font-size:24px;line-height:1;transition:transform .2s ease}
.tool-card:hover .tool-arrow{transform:translate(4px,-4px)}
.tool-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-top:22px;border-top:1px solid currentColor}
.tool-bottom span{font-size:14px;line-height:1.35;max-width:300px;opacity:.72}
.tool-bottom strong{font-size:16px;font-weight:400;white-space:nowrap}
@media(max-width:850px){
  .more-tools-head{grid-template-columns:1fr;gap:22px;padding-bottom:60px}
  .more-tools-featured,.more-tools-secondary{grid-template-columns:1fr}
  .more-tools-featured .tool-card:first-child,.more-tools-secondary .tool-card:not(:last-child){border-right:0;border-bottom:1px solid var(--line)}
  .tool-card-featured,.tool-card-small{min-height:320px}
}
@media(max-width:520px){
  .more-tools{padding-top:80px}
  .tool-card{padding:26px 0}
  .tool-main{margin:50px 0 34px}
  .tool-bottom{align-items:flex-start;flex-direction:column;gap:12px}
}

.lang-switch a.lang-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}