:root{
  --ink:#000000; --ink-soft:#4a4a48; --paper:#ffffff; --smoke:#fafafa;
  --smoke2:#f3f2ee; --line:#e7e6e0;
  --accent:#ffd618; /* amarillo de marca del manual, RGB 255/213/23 */
  /* --accent-deep: derivado (no es color oficial del manual) para hovers/estados sobre --accent */
  --accent-deep:#d4ac00;
  --accent-soft:#FFF4CE;
  --display:"Archivo","Arial Black","Helvetica Neue",sans-serif;
  --sans:"Poppins","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--smoke);font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font:inherit}
a{color:var(--ink);text-decoration:none}
::selection{background:var(--accent);color:var(--ink)}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* articulos.html: colapso a una columna del layout galería+texto en pantallas angostas */
@media (max-width:860px){
  #art-layout{grid-template-columns:1fr!important;gap:32px!important}
  #art-gallery{position:static!important}
}

/* Shared layout: allow columns and long contact details to shrink naturally. */
.site-container, .site-container > *, .responsive-cta > *,
.contact-layout > *, .form-fields > *, #grid > *, #art-layout > * { min-width:0; }
main h1, main h2, main h3, .contact-details, .footer-grid, #art-desc { overflow-wrap:anywhere; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline:3px solid var(--accent-deep); outline-offset:4px;
}
.site-logo { flex-shrink:0; }
.nav-toggle { display:none; }
#feat-track { --feat-visible:3; }
.project-card { flex:0 0 calc((100% - 40px) / 3); }
.hero-actions a, .responsive-cta a { text-align:center; }
.responsive-cta a > span { flex-shrink:0; }
.dialog-open #wa-float, .menu-open #wa-float { visibility:hidden; }

@media (max-width:1100px) {
  .site-header > .site-container { height:66px!important; gap:16px!important; }
  .site-logo img { height:50px!important; }
  .nav-toggle { display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; width:44px; height:44px; margin-left:auto; flex-shrink:0;
    border:1px solid var(--line); border-radius:10px; background:#fff; }
  .nav-toggle span { width:20px; height:2px; background:var(--ink); transition:transform .2s,opacity .2s; }
  .site-header[data-menu-open="true"] .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .site-header[data-menu-open="true"] .nav-toggle span:nth-child(2) { opacity:0; }
  .site-header[data-menu-open="true"] .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  #site-nav { display:none!important; position:absolute; top:100%; left:0; right:0;
    margin-left:0!important; padding:12px 24px 20px; background:var(--paper);
    border-bottom:1px solid var(--line); box-shadow:0 14px 24px rgba(0,0,0,.08);
    max-height:calc(100vh - 66px); max-height:calc(100dvh - 66px); overflow-y:auto; }
  .site-header[data-menu-open="true"] #site-nav { display:flex!important; flex-direction:column; align-items:stretch!important; gap:4px!important; }
  #site-nav a { display:flex; align-items:center; min-height:44px; padding:12px!important; }
  #site-nav a[data-nav="contacto"] { margin:8px 0 0!important; justify-content:center; }
}

@media (max-width:960px) {
  .services-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .responsive-cta { grid-template-columns:1fr!important; padding:40px 32px!important; gap:28px!important; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:32px!important; }
  #grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .contact-layout { grid-template-columns:minmax(0,1fr)!important; gap:32px!important; }
  input, textarea, select { min-width:0; max-width:100%; font-size:16px!important; }
  #feat-track { --feat-visible:2; }
  .project-card { flex-basis:calc((100% - 20px) / 2); }
  .sw-overlay, .sw-caption { opacity:1!important; }
  .sw-caption { transform:none!important; }
}

@media (max-width:760px) {
  .site-container { padding-left:20px!important; padding-right:20px!important; }
  main h1 { font-size:clamp(32px,8vw,40px)!important; line-height:1.12!important; white-space:normal!important; }
  main h2 { font-size:clamp(26px,6.8vw,32px)!important; line-height:1.18!important; }
  .home-hero { min-height:calc(100vh - 66px)!important; min-height:calc(100svh - 66px)!important; }
  .hero-inner { padding-top:48px!important; padding-bottom:48px!important; }
  .home-hero h1 { font-size:clamp(36px,10vw,52px)!important; line-height:1.03!important; }
  .home-hero p { font-size:16px!important; }
  .section-heading { flex-wrap:wrap; align-items:flex-start!important; gap:18px!important; }
  .contact-layout, .form-fields { grid-template-columns:minmax(0,1fr)!important; }
  .contact-layout { gap:32px!important; }
  #contact-form { padding:24px!important; }
  input, textarea, select { min-width:0; max-width:100%; font-size:16px!important; }
  #contact-form a { text-align:center; }
  #search-form { flex-basis:100%!important; }
  #cat-tabs, #subcat-row { width:100%; }
  #cat-tabs > span, #subcat-row > span { flex-basis:100%; }
  #cat-tabs button, #subcat-row button { min-height:44px; max-width:100%; overflow-wrap:anywhere; }
  .technical-intro { gap:24px!important; }
  .technical-copy { padding-top:0!important; }
  .technical-difference { padding:32px 24px!important; }
  .technical-difference > div:last-child { padding-right:0!important; }
  .about-intro { gap:32px!important; }
  .about-summary { padding:28px 24px!important; }
  #team-profiles article { flex-direction:column!important; align-items:stretch!important; gap:32px!important; }
  #team-profiles article > div { flex:0 1 auto!important; width:100%; max-width:100%!important; }
  #team-profiles h3 { font-size:28px!important; }
  #team-profiles [aria-hidden="true"][style*="position:absolute"] { width:48px!important; height:48px!important; left:auto!important; right:0!important; bottom:-16px!important; }
  #art-layout { gap:24px!important; }
  #art-wa { width:100%; text-align:center; }
  #art-carousel-dots { gap:2px!important; flex-wrap:wrap; }
  .footer-grid { gap:28px!important; }
  .footer-grid a { display:flex; align-items:center; min-height:44px; }
  .footer-grid > div > div:last-child { gap:4px!important; }
  footer > div:last-child > .site-container { padding-bottom:88px!important; }
  #wa-float { width:52px!important; height:52px!important; right:16px!important;
    bottom:calc(16px + env(safe-area-inset-bottom,0px))!important; }
  #sw-lightbox { padding:72px 12px 24px!important; }
  #sw-lightbox-image { max-width:100%!important; max-height:calc(100vh - 108px)!important;
    max-height:calc(100dvh - 108px)!important; }
}

@media (max-width:620px) {
  .services-grid, .footer-grid, #grid { grid-template-columns:minmax(0,1fr)!important; }
  .responsive-cta { padding:32px 22px!important; gap:24px!important; }
  .responsive-cta a { padding:16px!important; }
  .hero-actions { flex-direction:column; align-items:stretch; }
  .hero-actions a { width:100%; }
  #feat-track { --feat-visible:1; }
  .project-card { flex-basis:100%; }
  #feat-prev, #feat-next { width:44px!important; height:44px!important; }
  #proyecto-modal { padding:16px 12px!important; padding-top:max(16px,env(safe-area-inset-top))!important; }
  #proyecto-modal > div { padding:28px 20px!important; border-radius:14px!important; }
  #proyecto-modal-close { top:12px!important; right:12px!important; width:44px!important; height:44px!important; }
  #proyecto-modal-info { padding-right:40px; }
  #proyecto-modal-info > div:last-child { flex-wrap:wrap; gap:16px!important; }
  #proyecto-modal-collage > div { column-count:1!important; }
  #contact-form { padding:20px!important; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .nav-toggle span, #feat-track, #art-carousel-track { transition:none!important; }
}

@media (hover:none), (pointer:coarse) {
  input, textarea, select { font-size:16px!important; }
  .sw-overlay, .sw-caption { opacity:1!important; }
  .sw-caption { transform:none!important; }
}