:root{ --burdeos:#800020; --black:#000; --white:#fff; --radius:16px; }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{ font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--black); background:var(--white); line-height:1.5; }
h1,h2,h3,.brand-name,.page-title{font-family:'Montserrat','Inter',sans-serif}
.site-header{ position:fixed; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; background:rgba(255,255,255,0.9); backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:1px solid rgba(128,0,32,0.12); z-index:20; }
.brand-full{ height:90px; width:auto; display:block }
@media (max-width: 480px){ .brand-full{ height:78px; } }
.brand--claim{ display:none } .brand--sinclaim{ display:block }
@media (min-width: 1200px){ .brand--claim{ display:block } .brand--sinclaim{ display:none } }
.nav{display:flex; gap:20px; list-style:none; margin:0; padding:0}
.nav a{color:var(--black); text-decoration:none; padding:8px 10px; border-radius:10px}
.nav a[aria-current="page"]{background:rgba(128,0,32,0.08)}
.nav a:hover{background:rgba(128,0,32,0.08)}
main{padding-top:130px}
@media (max-width: 768px){ main{ padding-top:110px } }
/* Home hero */
.hero-stage{ position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
.hero-anim{ position:relative; width:min(60vmin,560px); height:min(60vmin,560px); }
.frame-svg{ position:absolute; inset:0; width:100%; height:100%; }
.draw-path{ stroke-dasharray:1000; stroke-dashoffset:1000; animation: draw 3s ease-in-out forwards; animation-delay:.32s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.letter-A{
  --A-x: -2%; --A-y: 0%;
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:'Montserrat','Inter',sans-serif; font-weight:900; letter-spacing:0.02em;
  font-size:min(34vmin, 300px); color:#000; opacity:0;
  transform: translate(var(--A-x), var(--A-y)) scale(.96);
  animation: A_in .28s ease-out forwards;
}
@keyframes A_in{ to { opacity:1; transform: translate(var(--A-x), var(--A-y)) scale(1);} }
@media (max-width: 480px){ .letter-A{ --A-x: -1.5%; } }
.brush-mask{ position:absolute; inset:0; -webkit-mask-image:url('assets/brush/brush_mask.png'); mask-image:url('assets/brush/brush_mask.png');
  -webkit-mask-size:cover; mask-size:cover; background: radial-gradient(circle at 50% 50%, rgba(128,0,32,0.4), rgba(128,0,32,0.0) 70%); opacity:0.2; pointer-events:none; }
.hero-content{opacity:0; transform:translateY(8px); transition:opacity .35s ease, transform .35s ease; text-align:center; max-width:900px; padding:0 20px}
.home.ready .hero-content{opacity:1; transform:none}
.cta-group{display:flex; gap:16px; justify-content:center}
.btn{display:inline-block; padding:12px 18px; border-radius:999px; text-decoration:none; font-weight:600}
.btn.primary{background:var(--burdeos); color:var(--white);}
.btn.primary:hover{opacity:.92}
.btn.link{color:var(--burdeos)}
/* Proyectos */
.page-title{font-weight:800; letter-spacing:.06em; margin:8px 0}
.intro{max-width:900px; margin:0 auto; padding:40px 20px 10px}
.lead{color:#222}
.cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px; max-width:1100px; margin:20px auto 60px; padding:0 20px}
.card{ border:1px solid rgba(128,0,32,0.18); border-radius:var(--radius); overflow:hidden; background:#fff; transition:transform .18s ease, box-shadow .18s ease; }
.card:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.08)}
.card-img{aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; background:#fff}
.card-img img{max-width:90%; max-height:90%}
.card-body{padding:16px}
/* Contacto */
.contact-form{max-width:760px; margin:10px auto 80px; padding:0 20px}
.field{display:flex; flex-direction:column; gap:6px; margin:14px 0}
.field label{font-weight:600}
.field input, .field textarea{ border:1.5px solid rgba(0,0,0,.16); border-radius:12px; padding:12px 14px; font-size:16px; transition:border-color .15s ease, box-shadow .15s ease; }
.field input:focus, .field textarea:focus{outline:none; border-color:var(--burdeos); box-shadow:0 0 0 3px rgba(128,0,32,.15)}
.field.checkbox{flex-direction:row; align-items:center; gap:10px}
.error{color:#9c0020; min-height:1em}
.legal{max-width:900px; margin:0 auto; padding:40px 20px}
/* Quiénes */
.quienes .mv{ padding:10px 20px 0 }
.mv-grid{ max-width:1100px; margin:0 auto; display:grid; gap:20px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.mv-item{ border:1px solid rgba(128,0,32,.18); border-radius:var(--radius); padding:16px 18px; background:#fff }
.valores{ max-width:1100px; margin:20px auto; padding:0 20px }
.pill-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px }
.pill{ border:1px solid rgba(0,0,0,.12); border-radius:12px; background:#fff }
.pill-btn{ width:100%; text-align:left; background:transparent; border:0; padding:12px 14px; font-weight:600; cursor:pointer }
.pill-btn:hover{ background:rgba(128,0,32,.06) }
.pill-panel{ padding:0 14px 12px 14px; color:#222 }
.equipo{ max-width:1100px; margin:20px auto 0; padding:0 20px }
.team-grid{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
.person{ display:flex; gap:14px; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:14px; background:#fff }
.avatar{ width:120px; height:120px; border-radius:50%; object-fit:cover; flex:0 0 120px }
.person .role{ margin:.1rem 0 .2rem; color:#222 }
.site-footer{padding:32px 20px; text-align:center; color:#222; border-top:1px solid rgba(128,0,32,0.12)}
.footer-brand{max-width:min(250px, 60vw); margin:0 auto 14px}
.footer-brand img{width:100%; height:auto; display:block}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .draw-path{animation:none; stroke-dashoffset:0}
  .home.ready .hero-content{opacity:1; transform:none}
}

.toggle-desc{margin-top:6px; padding:6px 12px; font-size:14px; border:1px solid #999; background:#f5f5f5; border-radius:8px; cursor:pointer; color:#333}
.toggle-desc:hover{background:#e0e0e0}
.desc-panel{margin-top:8px; color:#222}

/* CAMBIO WORD (AMBAS VERSIONES): Equipo en 2 columnas en desktop */
@media (min-width: 1024px){
  .team-grid{ grid-template-columns: repeat(2, minmax(300px, 1fr)); }
}

/* MOBILE ONLY: navegación hamburguesa */
.nav-toggle{ display:none; }
@media (max-width: 768px){
  .nav-toggle{ display:flex; align-items:center; gap:8px; background:transparent; border:1px solid rgba(0,0,0,.18); 
    border-radius:10px; padding:8px 10px; cursor:pointer }
  .nav-toggle .bar{ display:block; width:18px; height:2px; background:#000; position:relative }
  .nav-toggle .bar + .bar{ margin-left:-18px; transform:translateY(6px) }
  .nav-toggle .bar + .bar + .bar{ margin-left:-18px; transform:translateY(12px) }
  .nav-toggle:focus-visible{ outline:3px solid rgba(128,0,32,.35); outline-offset:2px }
  nav#site-nav{ position:fixed; inset:70px 12px auto 12px; background:#fff; border:1px solid rgba(0,0,0,.12); 
    border-radius:14px; padding:12px; box-shadow:0 10px 30px rgba(0,0,0,.12); transform:scale(.98); opacity:0; pointer-events:none; transition:.2s }
  nav#site-nav.open{ transform:none; opacity:1; pointer-events:auto }
  .nav{ flex-direction:column; gap:6px }
  .nav a{ display:block; padding:12px 10px }
  body.menu-open{ overflow:hidden }
}
/* FIN MOBILE ONLY */

/* Desktop: ocultar navegación hasta fin de animación del hero en home */
@media (min-width: 1024px){
  body.home-start .nav a{ visibility:hidden }
  body.home-start .nav{ pointer-events:none }
}

/* CAMBIO WORD (AMBAS VERSIONES): Contacto sobrio */
.contact--sober .field input,
.contact--sober .field textarea{
  border:1px solid #111;
  border-radius:10px;
}
.contact--sober .field input:focus,
.contact--sober .field textarea:focus{
  outline:none; border-color:#000; box-shadow:0 0 0 3px rgba(0,0,0,.12);
}
.btn-dark{ background:#000; color:#fff; border-radius:999px; padding:12px 18px; font-weight:600; border:0 }
.btn-dark:hover{ background: var(--burdeos); }
@media (max-width: 768px){ /* MOBILE ONLY */
  .btn-dark{ width:100%; }
  .contact-form{ padding-bottom: 80px; }
}