/* ==========================================================================
   MIIA Technologies — base.css
   Fuentes autoalojadas, reset, utilidades y mecánicas compartidas por los 3 temas.
   ========================================================================== */

@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-style:normal;font-display:swap;src:url("../assets/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url("../assets/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url("../assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/space-grotesk-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:500;font-style:normal;font-display:swap;src:url("../assets/fonts/space-grotesk-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Space Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url("../assets/fonts/space-grotesk-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url("../assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url("../assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/fraunces-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-weight:600;font-style:normal;font-display:swap;src:url("../assets/fonts/fraunces-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-weight:400;font-style:italic;font-display:swap;src:url("../assets/fonts/fraunces-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/dm-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:500;font-style:normal;font-display:swap;src:url("../assets/fonts/dm-sans-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"DM Sans";font-weight:700;font-style:normal;font-display:swap;src:url("../assets/fonts/dm-sans-latin-700-normal.woff2") format("woff2")}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;min-height:100vh;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,figure,ul,ol,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
address{font-style:normal}
:focus-visible{outline:3px solid var(--focus,#00c55e);outline-offset:3px}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;left:12px;top:-60px;z-index:999;background:#fff;color:#000;padding:10px 16px;border-radius:6px;transition:top .2s}
.skip-link:focus{top:12px}
.container{width:min(1200px,100% - 2*clamp(20px,4vw,48px));margin-inline:auto}
.mono{font-family:var(--font-mono,ui-monospace,monospace)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Revelado al hacer scroll (solo si hay JS) */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js [data-reveal].is-visible{opacity:1;transform:none}

.brand__logo{width:auto;object-fit:contain}
.footer-logo{width:auto;background:#fff;padding:6px 10px;border-radius:6px;margin-bottom:18px;object-fit:contain}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:.85em 1.5em;font-weight:600;line-height:1.1;transition:transform .2s,background .2s,color .2s,box-shadow .2s,border-color .2s;text-align:center}
.btn--sm{padding:.6em 1.1em;font-size:.9rem}
.btn--lg{padding:1.05em 1.9em;font-size:1.02rem}
.btn:active{transform:translateY(1px)}

/* Formulario */
.form{display:block}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;margin-bottom:24px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field--wide{grid-column:1/-1}
.field label{font-size:.88rem;font-weight:600}
.field input,.field select,.field textarea{width:100%;font:inherit;color:inherit;padding:.85em 1em;background:var(--field-bg,#fff);border:1.5px solid var(--field-border,#c9d3dd);border-radius:var(--field-radius,8px);transition:border-color .2s,box-shadow .2s}
.field textarea{resize:vertical;min-height:140px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring,rgba(0,197,94,.22))}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#d6372f}
.field--check{flex-direction:row;align-items:flex-start;gap:12px}
.field--check input{width:20px;height:20px;margin-top:3px;flex:none;accent-color:var(--accent)}
.field--check label{font-weight:400}
.alert{padding:16px 20px;border-radius:var(--field-radius,8px);margin-bottom:22px;font-size:.95rem}
.alert--ok{background:#e4f6ea;color:#14532d;border:1px solid #9bd8b1}
.alert--error{background:#fdeceb;color:#7a1712;border:1px solid #f1aaa6}
.alert ul{margin-top:6px;padding-left:18px;list-style:disc}

/* Filtros y proyectos */
.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.filter{padding:.55em 1.1em;font-size:.9rem;font-weight:500;transition:all .2s}
.filter span{opacity:.6;margin-left:.35em;font-size:.85em}
.projects{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px}
.project{display:flex;flex-direction:column;text-align:left;overflow:hidden;transition:transform .35s,box-shadow .35s}
.project.is-hidden{display:none}
.project__media{position:relative;display:block;overflow:hidden;aspect-ratio:4/3}
.project__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.project:hover .project__media img{transform:scale(1.06)}
.project__count{position:absolute;right:12px;bottom:12px;font-size:.75rem;padding:.3em .7em;background:rgba(0,0,0,.65);color:#fff;border-radius:99px}
.project__body{display:flex;flex-direction:column;gap:4px;padding:16px 18px 20px}
.project__cat{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.project__title{font-weight:600;line-height:1.3}

/* Galería */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.gallery__item{position:relative;overflow:hidden;text-align:left;aspect-ratio:4/3}
.gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.gallery__item:hover img{transform:scale(1.06)}
.gallery__cap{position:absolute;inset:auto 0 0 0;padding:28px 16px 14px;color:#fff;font-size:.88rem;font-weight:500;background:linear-gradient(transparent,rgba(0,0,0,.75))}

/* Logos */
.logo-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:34px}
.logo-tile{display:flex;align-items:center;justify-content:center;height:110px;padding:14px 18px;background:#fff;overflow:hidden;transition:transform .3s,box-shadow .3s}
.logo-tile img{width:100%;height:100%;object-fit:contain}
.logo-tile:hover{transform:translateY(-3px)}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:300;display:grid;place-items:center;background:rgba(5,10,16,.94);padding:24px}
.lightbox[hidden]{display:none}
.lightbox__figure{max-width:min(1100px,86vw);text-align:center}
.lightbox__img{max-height:78vh;width:auto;margin:auto;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox__caption{margin-top:14px;color:#dfe7ee;font-size:.95rem}
.lightbox__close,.lightbox__nav{position:absolute;color:#fff;font-size:2.4rem;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;transition:background .2s}
.lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.14)}
.lightbox__close{top:18px;right:18px}
.lightbox__nav{top:50%;transform:translateY(-50%)}
.lightbox__nav--prev{left:14px}
.lightbox__nav--next{right:14px}
.lightbox[data-single="true"] .lightbox__nav{display:none}

/* Selector de diseño (vista para cliente) */
.switcher{position:fixed;left:50%;bottom:18px;z-index:200;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:7px 8px 7px 16px;background:rgba(16,22,30,.92);color:#fff;border-radius:99px;box-shadow:0 14px 40px rgba(0,0,0,.35);backdrop-filter:blur(10px);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:.8rem;max-width:calc(100vw - 20px)}
.switcher__label{opacity:.65;white-space:nowrap;letter-spacing:.03em}
.switcher__options{display:flex;gap:4px}
.switcher__btn{display:inline-flex;align-items:center;gap:8px;padding:.55em 1em;border-radius:99px;font-weight:500;color:#cfd8e1;transition:all .2s;white-space:nowrap}
.switcher__btn:hover{background:rgba(255,255,255,.1);color:#fff}
.switcher__btn.is-active{background:#fff;color:#0b141d}
.switcher__dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.switcher__dot--corporate{background:linear-gradient(135deg,#14181c 50%,#00c55e 50%)}
.switcher__dot--editorial{background:linear-gradient(135deg,#0b0e12 50%,#00c55e 50%)}
.switcher__dot--calido{background:linear-gradient(135deg,#0a7f3d 50%,#f6eee2 50%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
@media (max-width:640px){.switcher__label{display:none}.switcher{padding:6px;bottom:12px}.switcher__btn{padding:.55em .8em}}

/* Estados comunes */
.list-check li{position:relative;padding-left:1.9em;margin:.55em 0}
.list-check li::before{content:"";position:absolute;left:0;top:.45em;width:1.05em;height:.6em;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);transform:rotate(-45deg) scale(.9)}
.chips{display:flex;flex-wrap:wrap;gap:8px}

@media (max-width:720px){.form__grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
    .js [data-reveal]{opacity:1;transform:none}
}

/* Página 404 */
.notfound{padding:clamp(60px,10vw,130px) 0}
.notfound__inner{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,72px);align-items:center}
.notfound__code{font-size:clamp(6rem,20vw,15rem);font-weight:700;line-height:.8;letter-spacing:-.04em;color:var(--accent);opacity:.9;user-select:none}
.notfound__title{font-size:clamp(2rem,4.6vw,3.6rem);max-width:18ch;margin-bottom:16px}
.notfound__text{max-width:52ch;opacity:.8;margin-bottom:28px}
.notfound__actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:720px){.notfound__inner{grid-template-columns:1fr}}