/* =============================
   Extuid Landing — styles.css
   Moderno, SEO-friendly, Poppins
   ============================= */
:root{
  --color-primary:#00BBD4; --color-accent:#8AE4EE; --color-black:#0B0B0B;
  --bg:#F5F8FC; --surface:#FFFFFF; --text:#0F1216; --muted:#6C7480; --line:#E7ECF3;
  --radius:16px; --radius-lg:22px;
  --shadow-1:0 6px 24px rgba(16,24,40,.06); --shadow-2:0 14px 40px rgba(16,24,40,.10);
  --container:1200px;
  --glass: color-mix(in srgb, var(--surface) 86%, transparent);
  --g1:linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 80%, #fff) 0%, var(--color-primary) 60%, var(--color-accent) 100%);
  --g2:radial-gradient(60% 60% at 10% 0%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 60%), radial-gradient(50% 50% at 90% 10%, color-mix(in srgb, var(--color-accent) 28%, transparent), transparent 60%);
  --t-fast:.18s; --t-med:.28s;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0C0F14; --surface:#121821; --text:#E6EBF2; --muted:#9AA4B2; --line:#243041;
    --glass: color-mix(in srgb, var(--surface) 80%, transparent);
    --shadow-1:0 6px 24px rgba(0,0,0,.35); --shadow-2:0 20px 60px rgba(0,0,0,.55);
  }
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto}
a{color:var(--color-primary); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .6rem; line-height:1.2; letter-spacing:-.01em}
p{margin:0 0 1rem}
h1{font-size:clamp(1.9rem,2.8vw,3.2rem)}
h2{font-size:clamp(1.45rem,2vw,2.1rem)}
h3{font-size:clamp(1.12rem,1.3vw,1.3rem)}
.container{max-width:var(--container); margin:0 auto; padding:0 1rem}
.muted{color:var(--muted)}
:focus-visible{outline:2px solid var(--color-accent); outline-offset:3px}
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; background:var(--surface); padding:.45rem .8rem; border-radius:12px; box-shadow:var(--shadow-1)}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px) saturate(160%); background:var(--glass); border-bottom:1px solid var(--line)}
.header-grid{display:flex; align-items:center; justify-content:space-between; min-height:68px}
.brand-logo{display:block; max-height:65px; height:auto; width:auto} /* evita aplastado */
.brand-text{font-weight:800; font-size:1.2rem}
.nav-toggle{display:none; border:none; background:transparent; font-size:1.6rem; cursor:pointer; color:var(--text)}
.nav-list{display:flex; gap:.25rem; list-style:none; margin:0; padding:0}
.nav-list a{display:block; padding:.56rem .9rem; border-radius:12px; position:relative; transition:background var(--t-fast), transform var(--t-fast)}
.nav-list a:hover{text-decoration:none; background:color-mix(in srgb,var(--color-primary) 10%,transparent)}
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav-list{position:absolute; right:1rem; top:68px; flex-direction:column; gap:.4rem; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:.6rem; display:none; min-width:230px; box-shadow:var(--shadow-2)}
  .nav-list.open{display:flex}
}

/* Hero */
.hero{position:relative; padding:clamp(56px,8vw,50px) 0 clamp(40px,6vw,72px); background:var(--g2),var(--surface); overflow:hidden}
.hero::before{content:""; position:absolute; inset:-30% -10% auto -10%; height:70%; background:conic-gradient(from 180deg at 50% 50%, color-mix(in srgb,var(--color-primary) 45%, transparent), transparent 30%, color-mix(in srgb,var(--color-accent) 45%, transparent)); filter:blur(70px); opacity:.35; pointer-events:none}
.hero[style*="--hero-bg"]{background-image:var(--g2),var(--hero-bg); background-size:auto,cover; background-position:center,center}
.hero-inner{display:grid; align-items:center; min-height:320px}
.lead{color:var(--muted); font-size:clamp(1.06rem,1.1vw,1.2rem); max-width:62ch}

/* Secciones */
.section{padding:clamp(48px,6vw,50px) 0}
.section.alt{background:color-mix(in srgb,var(--surface) 92%,transparent)}
.section-head{margin:0 0 26px}

/* Cards */
.card{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-1); transition:transform var(--t-med) cubic-bezier(.2,.7,.2,1), box-shadow var(--t-fast)}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-2)}

/* Helpers de layout */
.grid{display:grid; gap:clamp(12px,1.4vw,20px)}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* Interlude — Banner */
.highlight-box{
  text-align:center;
  padding:2rem 1.5rem;
  background:var(--g1);
  color:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2);
}
.highlight-box h2{font-size:clamp(1.6rem,2vw,2rem); margin-bottom:.8rem}
.highlight-box p{font-size:1.05rem; max-width:70ch; margin:0 auto}
.highlight-box strong{color:#001218}

/* Interlude — Cards */
.highlight-cards{text-align:center}
.highlight-title{font-size:clamp(1.5rem,2vw,1.9rem); margin-bottom:.25rem}
.highlight-sub{color:var(--muted); margin:0 auto 1rem; max-width:70ch}
.mini-cards{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.mini-card{padding:14px}
.mini-card .mini-ico{font-size:1.6rem; line-height:1}
.mini-card h3{margin:.4rem 0 .2rem; font-size:1.05rem}
.mini-card p{margin:0; font-size:.95rem; color:color-mix(in srgb,var(--text) 85%, #000)}

/* Botones */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.82rem 1.1rem; border-radius:14px; font-weight:800; border:1px solid transparent; cursor:pointer; transition:transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast)}
.btn:hover{text-decoration:none; transform:translateY(-1.5px); box-shadow:var(--shadow-1)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--g1); color:#001218; border-color:transparent}
.btn-secondary{background:var(--surface); color:var(--text); border-color:var(--line)}
.cta-row{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1rem}

/* Contacto */
.contact-grid{display:grid; gap:clamp(12px,1.4vw,20px); grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.contact-card ul{margin:.25rem 0 1rem; padding-left:1.1rem}
.wa-list{list-style:none; padding:0; margin:.25rem 0 1rem}
.wa-list li{display:flex; align-items:center; gap:.5rem; margin:.25rem 0}
.wa-ico{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:999px; background:#25d366; color:#fff}
.tally-embed, .tally-card iframe.tally-embed{border:0; border-radius:16px; box-shadow:var(--shadow-1); width:100%; height:500px}
.map-wrap{margin-top:16px; border-radius:22px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-1)}
.map-wrap iframe{width:100%; height:360px; border:0}

/* CTA final */
.cta-final{text-align:center}
.cta-final h2{margin-bottom:.7rem}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:26px 0; background:color-mix(in srgb,var(--surface) 94%,transparent)}
.footer-grid{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.site-footer nav a{margin-right:.75rem; padding:.25rem .5rem; border-radius:10px; transition:background var(--t-fast), transform var(--t-fast)}
.site-footer nav a:hover{background:color-mix(in srgb,var(--color-primary) 12%,transparent); text-decoration:none; transform:translateY(-1px)}

/* Motion safe */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}





@media (min-width: 768px) {
    #marcas .enla-notion-cols, #servicios .enla-notion-cols {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}



.section-title-1 {
    font-size: 34px;
}

.enla-notion-col {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    box-shadow: var(--shadow-1);
    transition: transform var(--t-med) 
cubic-bezier(.2, .7, .2, 1), box-shadow var(--t-fast);
}


#marcas .enla-notion-figure {
    margin: initial;
    border-radius: initial;
    background: initial;
    box-shadow: initial;
    overflow: hidden;
}

details.enla-notion-toggle {
    background: #ddfbff !important;
}