:root{--background:#161616;--text:#efede6;--muted:#b6b5af;--accent:#e66b37;--line:#62625d;--space:clamp(20px,3vw,48px)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--background);color:var(--text);font:16px/1.5 Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:5px}header{position:absolute;z-index:10;top:20px;left:20px;right:20px;display:flex;align-items:start;justify-content:space-between}.brand{background:var(--text);color:var(--background);font-size:20px;font-weight:bold;letter-spacing:-3px;padding:5px 11px 5px 7px}nav{display:flex;gap:36px;background:var(--text);color:var(--background);padding:10px 28px;font-size:14px}nav a:hover{text-decoration:underline;text-underline-offset:4px}.menu-toggle{display:none}.hero{min-height:100vh;min-height:100dvh;height:auto;max-height:none;padding:20px;background:linear-gradient(0deg,#0003,#0001),url('assets/portada.avif') center/cover;display:flex;align-items:flex-end}.hero-content{border-top:1px solid #d6d1c28c;display:grid;grid-template-columns:2fr 1fr;gap:48px;width:100%;padding:20px 0 12vh}h1{font-size:clamp(38px,4.3vw,76px);line-height:1.03;font-weight:400;letter-spacing:-1.5px;margin:0}p{margin:0 0 30px}.hero-content>div{max-width:355px}.button{display:inline-block;border:1px solid var(--text);border-radius:0;background:var(--text);color:var(--background);padding:12px 24px;font-size:14px;transition:background .2s,color .2s}.button:hover{background:var(--accent);border-color:var(--accent);color:#151515}.split{display:grid;grid-template-columns:1fr 2fr;gap:30px}h2{font-size:16px;line-height:1.3;font-weight:400;margin:0}.intro{padding:65px 20px 230px}.statement{font-size:clamp(25px,2.45vw,40px);line-height:1.12;letter-spacing:-.6px;position:relative;padding-left:28px;color:var(--muted)}.statement:before{content:'';position:absolute;top:5px;left:5px;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:9px solid var(--text)}.services{padding:0 20px 150px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.service{display:block;position:relative;aspect-ratio:.82;overflow:hidden}.service:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 45%,#0009)}.service img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.service:hover img{transform:scale(1.035)}h3{font-weight:400;margin:0}.service h3{position:absolute;bottom:16px;left:16px;right:16px;font-size:clamp(22px,2.4vw,36px);line-height:1.1;z-index:1}.section-copy{margin-top:60px}.section-copy h2:before{content:none}.section-copy .button{margin-left:28px}.team{padding:70px 20px 140px;border-top:1px solid #484844}.team .split h2,.section-copy h2{font-size:clamp(24px,3vw,48px);max-width:min(100%,560px);text-wrap:balance}.sample{font-size:14px;color:var(--muted);margin-left:28px}.people{margin-top:70px;display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.people article{display:flex;align-items:flex-end;border-top:1px solid var(--line);padding-top:20px;gap:20px}.people img{width:110px;height:135px;object-fit:cover;filter:grayscale(1)}.people h3{font-size:23px}.people p{font-size:14px;color:var(--muted);margin:5px 0}.contact{margin:0 20px;border-top:1px solid var(--line);padding:65px 0 110px;display:grid;grid-template-columns:2fr 1fr;gap:40px}.contact h2{font-size:clamp(24px,3vw,48px);line-height:1.3;max-width:min(100%,560px);text-wrap:balance}.contact>div{align-self:end;max-width:320px}footer{padding:55px 20px 20px;background:#242421;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}.wordmark{font-size:40px;line-height:1;letter-spacing:-2px}footer a:not(.wordmark){display:block;margin-bottom:8px}footer p{margin-bottom:12px}.muted{color:var(--muted)}footer small{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px;color:var(--muted);font-size:13px}dialog{background:#242421;color:var(--text);border:1px solid var(--line);padding:40px;width:min(540px,90vw)}dialog::backdrop{background:#000b}dialog h2{font-size:34px;margin-bottom:25px}.close{position:absolute;right:15px;top:8px;background:none;color:var(--text);border:0;font-size:30px}.eyebrow{color:var(--accent);font-size:14px;letter-spacing:2px}@media(max-width:750px){header{align-items:start}.menu-toggle{display:block;background:var(--text);border:0;padding:8px 18px}nav{display:none;position:absolute;top:49px;right:0;flex-direction:column;gap:18px;min-width:190px}nav.open{display:flex}.hero{background-position:62% center}.hero-content{grid-template-columns:1fr;gap:25px;padding-bottom:36px}h1{font-size:42px;letter-spacing:-1.2px}h1 br{display:none}.hero-content p{max-width:300px;margin-bottom:20px}.split{grid-template-columns:1fr;gap:30px}.intro{padding:55px 20px 90px}.statement{font-size:27px}.cards{grid-template-columns:1fr;gap:24px}.service{aspect-ratio:1.15}.services{padding-bottom:80px}.service h3{font-size:30px}.team{padding:55px 20px 80px}.people{grid-template-columns:1fr;margin-top:35px}.people article{gap:25px}.people img{width:100px;height:120px}.contact{grid-template-columns:1fr;padding:55px 0 80px}.contact h2{font-size:clamp(28px,5vw,38px)}footer{grid-template-columns:1fr 1fr;gap:35px}.wordmark{grid-column:1/-1}.section-copy{margin-top:40px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Floating navigation, matching the reference proportions. */
header{position:fixed;top:26px;left:30px;right:30px;align-items:center;transition:transform .28s ease,opacity .2s ease;pointer-events:none}
header>*{pointer-events:auto}
header.is-hidden{transform:translateY(calc(-100% - 30px));opacity:0;pointer-events:none}
header.is-hidden>*{pointer-events:none}
.brand{width:59px;height:59px;padding:10px;display:grid;place-items:center;background:#f2f0eb;letter-spacing:normal}
.brand img{display:block;width:100%;height:100%;object-fit:contain}
nav{min-height:61px;gap:clamp(28px,3vw,50px);padding:13px 32px;align-items:center;background:#f2f0eb;font-size:clamp(16px,1.2vw,23px)}
nav a[aria-current]{text-decoration:underline;text-underline-offset:4px}
@media(max-width:750px){header{top:20px;left:20px;right:20px;align-items:start}.brand{width:45px;height:45px;padding:8px}.menu-toggle{min-height:45px}nav{top:55px;min-height:0;padding:24px;align-items:flex-start;font-size:18px;gap:20px}}
@media(prefers-reduced-motion:reduce){header{transition:none}}

/* Reserved entry point for the future application. */
.login-button{display:inline-flex;align-items:center;gap:14px;border:0;background:transparent;color:inherit;padding:0;font:inherit;white-space:nowrap;min-height:36px}
.login-button svg{width:36px;height:36px;flex-shrink:0}
.login-button:hover span{text-decoration:underline;text-underline-offset:4px}
@media(max-width:750px){.login-button{padding-top:8px;border-top:1px solid #ccc8c0;width:100%}.login-button svg{width:30px;height:30px}}

/* 50% frosted glass: opacity belongs to the surface, never the logo or text. */
header nav,header .brand,header .menu-toggle{
  background:rgba(35,38,40,.5);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 5px 22px rgba(0,0,0,.12);
  color:#fff;
}
.brand img{background:transparent;filter:none}
.login-button svg circle:first-child{fill:none;stroke:currentColor;stroke-width:1.5}
.login-button svg circle:nth-child(2),.login-button svg path{fill:currentColor}
@media(max-width:750px){.login-button{border-top-color:rgba(255,255,255,.22)}}


/* Navigation at 70% of its previous visual size, anchored to the right. */
header nav{transform:scale(.7);transform-origin:top right}

/* Interior pages share the CGP navigation and footer. */
.about-hero{background-image:linear-gradient(0deg,#0005,#0002),url('assets/nosotros.avif')}
.page-heading{font-size:clamp(24px,3vw,48px);max-width:min(100%,560px);text-wrap:balance}
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:65px}
.profile-grid img{width:100%;height:420px;object-fit:cover;object-position:top;filter:grayscale(1)}
.profile-grid h3{font-size:28px;margin-top:20px}.profile-grid p{margin:12px 0}




.inquiry-form{margin-left:auto;width:58%;background:#202020;padding:40px}
.inquiry-form h2{font-size:24px;margin:15px 0 35px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.field-grid label{display:flex;flex-direction:column;gap:12px}.full{grid-column:1/-1}
.field-grid input:not([type=checkbox]),.field-grid textarea{width:100%;border:0;border-bottom:1px solid #787875;color:#fff;background:transparent;font:inherit;border-radius:0;padding:10px 0;min-height:44px}
.field-grid textarea{resize:vertical}.field-grid input:focus-visible,.field-grid textarea:focus-visible{outline:2px solid #388bff;outline-offset:3px}
.field-grid fieldset{border:0;padding:0;margin:0;min-width:0}.field-grid legend{margin-bottom:15px}
.checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.checkbox-grid label{flex-direction:row;align-items:start;font-size:14px}.checkbox-grid input{accent-color:#388bff;width:17px;height:17px;flex-shrink:0;margin:2px 0}
.form-note{font-size:14px;color:var(--muted);margin:25px 0}#area-status,#form-status{font-size:14px;margin:18px 0 0;color:#a7caff}
.service-page{padding:65px 20px 100px;background:var(--background)}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:80px 24px}.service-grid img{width:100%;aspect-ratio:1;object-fit:cover}.service-number{margin:25px 0 15px}.service-grid h2{font-size:30px;margin-bottom:20px}.service-grid details{border-top:1px solid var(--line);padding-top:16px}.service-grid summary{cursor:pointer;text-decoration:underline;text-underline-offset:5px}.service-grid details p{margin:22px 0}.service-grid details[open] summary{color:#a7caff}
@media(max-width:750px){.profile-grid,.service-grid{grid-template-columns:1fr}.profile-grid img{height:440px}.inquiry-form{width:100%;padding:25px}.field-grid{grid-template-columns:1fr}.checkbox-grid{grid-template-columns:1fr}.service-page{padding-top:55px}.service-grid{gap:55px}.profile-grid{gap:45px}}


/* Image covers end before the separate dark content sections. */
.contact-hero{background-image:linear-gradient(#0005,#0007),url("assets/contacto.avif")}
.services-hero{background-image:linear-gradient(#0005,#0007),url("assets/comercial.avif")}
.contact-form-section{padding:65px 20px 90px;background:var(--background)}
.contact-form-section .inquiry-form{background:transparent;padding-top:0}
@media(max-width:750px){.contact-hero{background-position:40% center}.contact-form-section{padding:55px 20px 80px}.contact-form-section .inquiry-form{padding:0}}

/* Left-column headings use the available column instead of a narrow fixed cap. */
@media(max-width:750px){.page-heading,.team .split h2,.section-copy h2{font-size:clamp(28px,5vw,38px)}}



/* Slightly larger cover descriptions, with a modest left shift on desktop. */
.hero-content>div>p{font-size:18px;line-height:1.5}
@media(min-width:751px){.hero-content>div,.error-message>div{position:relative;left:clamp(-48px,-2.5vw,-20px);max-width:390px}}

/* One animation controls scrolling; hide the fixed blurred header during the descent. */
html.cover-scrolling{scroll-behavior:auto!important}
.cover-scrolling header{visibility:hidden;transition:none}
/* Shared action buttons: 30% transparency (70% surface opacity). */
.button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:260px;max-width:100%;min-height:52px;padding:12px 16px;
  background:rgba(35,38,40,.7);color:var(--text);
  border:1px solid rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(14px) saturate(130%);
  backdrop-filter:blur(14px) saturate(130%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.button:hover{background:rgba(60,63,65,.7);border-color:rgba(255,255,255,.5);color:var(--text)}


/* Custom not-found page, using the site's architectural imagery and glass buttons. */
.error-page{min-height:100vh;min-height:100dvh;padding:150px 20px 90px;display:flex;align-items:center;background:linear-gradient(90deg,#161616e8,#16161685),url('assets/portada.avif') center/cover}
.error-content{width:100%}.error-code{font-size:clamp(110px,19vw,290px);line-height:1;letter-spacing:-.06em;margin:0 0 40px;font-weight:400;color:var(--text)}
.error-message{border-top:1px solid #d6d1c28c;padding-top:26px;display:grid;grid-template-columns:2fr 1fr;gap:48px}
.error-message>div{max-width:420px}.error-message p{font-size:18px;line-height:1.5}
.error-actions{display:flex;flex-direction:column;align-items:flex-start;gap:22px}.error-contact{text-decoration:underline;text-underline-offset:5px}
@media(max-width:750px){.error-page{padding:125px 20px 65px}.error-code{margin-bottom:30px}.error-message{grid-template-columns:1fr;gap:28px}.error-message h1 br{display:block}}

/* Align the 404 divider with the two-line titles on the main covers. */
@media(min-width:751px){
  .error-page{
    align-items:flex-start;
    padding-top:calc(100dvh - 41px - 12vh - clamp(78.28px,8.858vw,156.56px));
    padding-bottom:20px;
  }
  .error-content{position:relative}
  .error-code{position:absolute;bottom:calc(100% + 40px);left:0;margin:0;font-size:clamp(110px,19vw,290px);max-height:calc(100dvh - 380px)}
  .error-message{padding-top:20px}
}


/* Full-width contact form with compact, responsive field groups. */
.contact-form-section{width:100%;padding:55px clamp(20px,3vw,56px) 60px}
.contact-form-section .inquiry-form{width:100%;margin:0;padding:0}
.contact-form-section .inquiry-form h2{margin:0 0 32px}
.contact-form-section .field-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 30px}
.contact-form-section .field-grid>label{min-width:0;gap:8px}
.contact-form-section .field-grid>label:has(input[name="asunto"]){grid-column:1/3}
.contact-form-section .field-grid>fieldset{grid-column:1/3;grid-row:3}
.contact-form-section .field-grid>label:has(textarea){grid-column:3/5;grid-row:2/4}
.contact-form-section .field-grid textarea{flex:1;min-height:180px}
.contact-form-section .checkbox-grid{gap:12px 24px}
.contact-form-section .form-note{margin:24px 0 20px}
.contact-form-section #area-status:empty,.contact-form-section #form-status:empty{margin:0}
@media(max-width:1000px){
  .contact-form-section .field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-form-section .field-grid>label:has(input[name="asunto"]),
  .contact-form-section .field-grid>fieldset,
  .contact-form-section .field-grid>label:has(textarea){grid-column:1/-1;grid-row:auto}
}
@media(max-width:600px){
  .contact-form-section{padding:40px 20px 50px}
  .contact-form-section .field-grid{grid-template-columns:1fr;gap:22px}
  .contact-form-section .checkbox-grid{grid-template-columns:1fr}
  .contact-form-section .inquiry-form h2{font-size:24px}
}

/* Shared cover divider position, independent of the length of each page's copy. */
@media(min-width:751px){
  .hero,.error-page{
    align-items:flex-start;
    padding-top:calc(100dvh - 41px - 12vh - clamp(78.28px,8.858vw,156.56px));
  }
}
@media(max-width:750px){
  .hero,.error-page{
    align-items:flex-start;
    padding: max(180px,calc(100dvh - 330px)) 20px 28px;
  }
  .hero-content,.error-message{
    padding:20px 0 0;gap:22px;grid-template-columns:1fr;
  }
  .hero-content h1,.error-message h1{
    font-size:clamp(30px,8.5vw,40px);line-height:1.08;
    letter-spacing:-1px;min-height:2.16em;margin:0;
  }
  .hero-content h1 br,.error-message h1 br{display:none}
  .hero-content>div,.error-message>div{max-width:100%}
  .hero-content p,.error-message p{max-width:100%;margin-bottom:20px}
  .error-content{position:relative}
  .error-code{position:absolute;bottom:calc(100% + 30px);left:0;margin:0;font-size:110px}
}

/* Equal description rows keep mobile cover buttons at the same height. */
@media(max-width:750px){
  .hero-content>div{display:flex;flex-direction:column;align-items:flex-start}
  .hero-content>div>p{min-height:4.5em;margin:0 0 20px}
  .hero-content>div>.button{flex-shrink:0}
}

/* CGP photographic direction: cool slate, soft blacks and a subtle haze. */
.hero,.error-page{position:relative;isolation:isolate;background:#17212b;--cover-photo:url('assets/cgp-inicio.jpg');--cover-position:center 58%}
.about-hero{--cover-photo:url('assets/cgp-nosotros.jpg');--cover-position:35% 50%;--cover-desaturation:1}
.contact-hero{--cover-photo:url('assets/cgp-contacto.jpg');--cover-position:center;--cover-brightness:.85}
.services-hero{--cover-photo:url('assets/cgp-servicios.jpg');--cover-position:center 48%}
.hero::before,.error-page::before{content:'';position:absolute;inset:0;z-index:-2;background-image:var(--cover-photo);background-size:cover;background-position:var(--cover-position);filter:grayscale(var(--cover-desaturation,.65)) brightness(var(--cover-brightness,.68)) contrast(.88);pointer-events:none}
.hero::after,.error-page::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(108,129,148,.12),rgba(18,30,42,.15) 35%,rgba(9,17,25,.68) 100%),linear-gradient(90deg,rgba(25,41,58,.25),rgba(48,69,87,.10));pointer-events:none}
.service img,.service-grid img{filter:grayscale(.7) brightness(.72) contrast(.88)}
@media(max-width:750px){.hero{--cover-position:center}.about-hero{--cover-position:32% center}.contact-hero{--cover-position:52% center}}

/* Team invitation: one group photograph followed by a clear route to About. */
.team-invitation{padding-bottom:90px}
.team-group-photo{position:relative;margin:0 0 48px;overflow:hidden;background:#263747}
.team-group-photo img{display:block;width:100%;height:clamp(280px,34vw,560px);object-fit:cover;object-position:center 45%;filter:grayscale(.8) brightness(.72) contrast(.88)}
.team-group-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(62,88,112,.22),rgba(15,27,39,.16));pointer-events:none}
.team-link{margin-left:28px}
@media(max-width:750px){.team-invitation{padding-bottom:60px}.team-group-photo{margin-bottom:32px}.team-group-photo img{height:auto;aspect-ratio:4/3}.team-link{margin-left:28px;max-width:calc(100% - 28px)}}

/* Two directors: cool-toned portraits reveal their original color on hover/focus. */
.about-team .profile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;max-width:1280px;margin:65px auto 0}
.director-photo{position:relative;overflow:hidden;background:#263747;aspect-ratio:4/3}
.profile-grid .director-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 25%;filter:grayscale(1) brightness(.8) contrast(.9);transform:scale(1);transition:transform .65s ease,filter .65s ease}
.director-photo::after{content:'';position:absolute;inset:0;pointer-events:none;background:rgba(54,86,119,.32);mix-blend-mode:color;opacity:1;transition:opacity .65s ease}
.director-photo:hover img,.director-photo:focus-visible img{filter:none;transform:scale(1.045)}
.director-photo:hover::after,.director-photo:focus-visible::after{opacity:0}
.director-photo:focus-visible{outline:2px solid var(--text);outline-offset:5px}
@media(max-width:750px){.about-team .profile-grid{grid-template-columns:1fr;gap:40px;margin-top:35px}}
@media(prefers-reduced-motion:reduce){.director-photo:hover img,.director-photo:focus-visible img{transform:none}}

/* A smaller, three-person row below the directors. */
.collaborators{margin:0 20px;padding:60px 0 90px;border-top:1px solid var(--line)}
.collaborators>h2{font-size:clamp(28px,3vw,48px);line-height:1.3}
.collaborators-note{font-size:14px;margin:20px 0 0}
.collaborator-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;max-width:1100px;margin:40px auto 0}
.collaborator-grid h3{font-size:24px}
@media(max-width:750px){.collaborators{padding:40px 0 60px}.collaborator-grid{grid-template-columns:1fr;max-width:460px;gap:32px}.collaborator-grid .director-photo{aspect-ratio:3/2}}

/* All five profiles share one section; the second row retains its smaller scale. */
.about-team .collaborator-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1100px;gap:30px;margin:60px auto 0}
@media(max-width:750px){.about-team .collaborator-grid{grid-template-columns:1fr;max-width:460px;gap:32px;margin-top:40px}}

/* Contact choices retain native checkbox behavior with clearer visual states. */
.contact-form-section .checkbox-grid{gap:10px 12px}
.contact-form-section .checkbox-grid label{
  align-items:center;min-height:48px;padding:11px 14px;gap:12px;
  border:1px solid rgba(239,237,230,.24);background:rgba(106,125,143,.08);
  cursor:pointer;transition:background .2s,border-color .2s;
}
.contact-form-section .checkbox-grid input{
  appearance:none;-webkit-appearance:none;display:grid;place-content:center;
  width:18px;height:18px;margin:0;border:1px solid rgba(239,237,230,.55);
  border-radius:3px;background:transparent;flex-shrink:0;cursor:pointer;
}
.contact-form-section .checkbox-grid input::before{
  content:'';width:9px;height:5px;border-left:2px solid #17212b;
  border-bottom:2px solid #17212b;transform:translateY(-1px) rotate(-45deg) scale(0);
}
.contact-form-section .checkbox-grid input:checked{background:var(--text);border-color:var(--text)}
.contact-form-section .checkbox-grid input:checked::before{transform:translateY(-1px) rotate(-45deg) scale(1)}
.contact-form-section .checkbox-grid label:has(input:checked){background:rgba(112,141,166,.22);border-color:rgba(220,232,241,.65)}
.contact-form-section .checkbox-grid label:hover{border-color:rgba(239,237,230,.6)}
.contact-form-section .checkbox-grid label:has(input:focus-visible){outline:2px solid var(--text);outline-offset:3px}
.contact-form-section .field-grid textarea{
  padding:16px;min-height:210px;border:1px solid rgba(239,237,230,.32);border-radius:4px;
  background:rgba(125,147,167,.2);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);cursor:text;
  transition:border-color .2s,background .2s;
}
.contact-form-section .field-grid textarea:hover{border-color:rgba(239,237,230,.55)}
.contact-form-section .field-grid textarea:focus-visible{
  border-color:var(--text);outline:2px solid rgba(184,210,233,.65);outline-offset:3px;
  background:rgba(125,147,167,.24);
}
@media(forced-colors:active){.contact-form-section .checkbox-grid input{appearance:auto;-webkit-appearance:auto}.contact-form-section .checkbox-grid input::before{content:none}}

/* Subtle form surfaces: unboxed choices and barely visible message glass. */
.contact-form-section .checkbox-grid label,
.contact-form-section .checkbox-grid label:hover,
.contact-form-section .checkbox-grid label:has(input:checked){
  border:0;background:transparent;padding:5px 0;min-height:36px;box-shadow:none;
}
.contact-form-section .checkbox-grid input{
  width:19px;height:19px;border-radius:5px;
  border-color:rgba(239,237,230,.45);background:rgba(170,192,210,.03);
  transition:background .2s,border-color .2s;
}
.contact-form-section .checkbox-grid input:checked{
  background:rgba(170,192,210,.12);border-color:rgba(239,237,230,.8);
}
.contact-form-section .checkbox-grid input::before{border-color:var(--text)}
.contact-form-section .checkbox-grid label:hover input{border-color:var(--text)}
.contact-form-section .checkbox-grid label:has(input:focus-visible){outline:none}
.contact-form-section .checkbox-grid input:focus-visible{outline:2px solid var(--text);outline-offset:4px}
.contact-form-section .field-grid textarea{
  background:rgba(125,147,167,.045);border-color:rgba(239,237,230,.14);
  box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.contact-form-section .field-grid textarea:hover{border-color:rgba(239,237,230,.25)}
.contact-form-section .field-grid textarea:focus-visible{
  background:rgba(125,147,167,.065);border-color:rgba(239,237,230,.45);
  outline:1px solid rgba(184,210,233,.35);outline-offset:2px;
}

/* Inline validation replaces the browser tooltip when JavaScript is available. */
.contact-form-section .field-error{display:block;font-size:13px;line-height:1.4;color:#c9d8e4;padding:7px 10px;border-left:2px solid #91a9bd;background:rgba(125,147,167,.055)}
.contact-form-section .field-error[hidden]{display:none}
.contact-form-section .field-grid input[aria-invalid="true"],.contact-form-section .field-grid textarea[aria-invalid="true"]{border-color:#91a9bd}
.contact-form-section .field-grid input:not([type="checkbox"]):focus-visible{outline:1px solid rgba(184,210,233,.55);outline-offset:3px}

/* Floating validation bubbles never contribute to the form's layout. */
.contact-form-section .field-grid>label{position:relative}
.contact-form-section .field-error{
  position:absolute;top:calc(100% + 9px);left:0;z-index:5;
  width:max-content;max-width:100%;padding:9px 14px;
  border:1px solid rgba(188,210,226,.22);border-radius:12px;
  color:var(--text);background:rgba(32,43,53,.88);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 5px 18px rgba(0,0,0,.2);font-size:13px;line-height:1.4;
}
.contact-form-section .field-error::before{
  content:'';position:absolute;top:-5px;left:18px;width:8px;height:8px;
  background:rgba(32,43,53,.98);border-top:1px solid rgba(188,210,226,.22);
  border-left:1px solid rgba(188,210,226,.22);transform:rotate(45deg);
}
.contact-form-section .field-grid input:not([type="checkbox"]):focus-visible{
  outline:none;border-bottom-color:#c9d8e4;box-shadow:0 1px 0 #c9d8e4;
}

/* Team meeting: retain detail in highlights and frame the people in the lower half. */
.team-group-photo img{object-position:center 70%;filter:grayscale(.65) brightness(.62) contrast(1.02)}
.team-group-photo::after{background:linear-gradient(135deg,rgba(35,61,86,.16),rgba(13,26,39,.12))}

/* Closing contact invitation follows the same columns and copy as the sections above. */
.contact{grid-template-columns:1fr 2fr;gap:30px}
.contact>div{align-self:start;max-width:none;min-width:0}
.contact>div>.button{margin-left:28px;max-width:calc(100% - 28px)}
@media(max-width:750px){.contact{grid-template-columns:1fr}}

/* Balanced spacing around the About introduction. */
#conoce-despacho{padding-block:65px}
#conoce-despacho>.statement{margin-bottom:0}
@media(max-width:750px){#conoce-despacho{padding-block:55px}}

/* Empty spaces for About and Contact, retaining the shared slate treatment. */
.about-hero{--cover-photo:url('assets/cgp-sala-juntas.jpg');--cover-position:center 58%;--cover-desaturation:.85;--cover-brightness:.57}
.contact-hero{--cover-photo:url('assets/cgp-sillones.jpg');--cover-position:center 65%;--cover-desaturation:.85;--cover-brightness:.68}
@media(max-width:750px){.about-hero{--cover-position:57% center}.contact-hero{--cover-position:68% center}}


/* ==========================================================================
   Refinamiento 2026-10-09 (Impeccable + Emil Kowalski + Taste).
   Para deshacer solo este bloque, borra desde aquí hasta el final.
   ========================================================================== */

/* Self-hosted typeface: geometric like the CGP wordmark, readable at text sizes. */
@font-face{font-family:'Albert Sans';font-style:normal;font-display:swap;font-weight:100 900;src:url('assets/fonts/albert-sans-latin-wght-normal.woff2') format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Albert Sans';font-style:normal;font-display:swap;font-weight:100 900;src:url('assets/fonts/albert-sans-latin-ext-wght-normal.woff2') format('woff2-variations');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --slate:#91a9bd;
  color-scheme:dark;
}
body{font-family:'Albert Sans',Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1{font-weight:380;letter-spacing:-.025em}
h2,h3,.statement{font-weight:380}
.statement{letter-spacing:-.018em;text-wrap:pretty}
p{text-wrap:pretty}
.wordmark{font-weight:500;letter-spacing:-.04em}

/* Browser surfaces carry the palette too. */
::selection{background:rgba(145,169,189,.42);color:#fff}
html{scrollbar-color:#4b5258 #161616}
input,textarea{caret-color:var(--text)}
a:focus-visible,button:focus-visible{outline-color:var(--slate);outline-offset:4px}

/* Navigation at its real size instead of a 70% transform (sharper text, correct hit areas). */
header{transition:transform 360ms var(--ease-out),opacity 220ms ease}
header nav{transform:none;min-height:44px;padding:8px 22px;gap:clamp(20px,2.1vw,34px);font-size:clamp(13px,.9vw,16px)}
header .brand{width:52px;height:52px;padding:9px}
.login-button{gap:10px;min-height:28px}
.login-button svg{width:26px;height:26px}
nav a{text-underline-offset:5px;text-decoration-thickness:1px}
@media(max-width:750px){
  header .brand{width:45px;height:45px;padding:8px}
  header nav{top:55px;min-width:220px;padding:22px;gap:16px;font-size:16px}
  nav.open{animation:menu-in 200ms var(--ease-out)}
}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px) scale(.98)}}

/* Buttons: precise transitions, press feedback, hover only where a pointer can hover. */
.button{transition:background-color 200ms ease,border-color 200ms ease,transform 160ms var(--ease-out)}
.button:active{transform:scale(.97)}
@media(hover:none){.button:hover{background:rgba(35,38,40,.7);border-color:rgba(255,255,255,.3)}}
.icon{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform 240ms var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .button:hover .icon-down{transform:translateY(2px)}
  .button:hover .icon-out{transform:translate(2px,-2px)}
}

/* Service cards reuse the site's own "colour returns on hover" gesture from the team portraits. */
.service img{transition:transform 900ms var(--ease-out),filter 900ms var(--ease-out)}
.service h3{transition:transform 500ms var(--ease-out)}
@media(hover:hover) and (pointer:fine){
  .service:hover img{transform:scale(1.04);filter:none}
  .service:hover h3{transform:translateY(-4px)}
}
.service:focus-visible{outline:2px solid var(--slate);outline-offset:4px}
.service:focus-visible img{filter:none}

/* One authored moment: the cover settles in on arrival. */
.hero-content{border-top-color:transparent;position:relative}
.hero-content::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:#d6d1c28c;animation:rule-draw 1400ms var(--ease-in-out) both}
.hero-content h1{animation:rise-in 1100ms var(--ease-out) 250ms both}
.hero-content>div>*{animation:rise-in 900ms var(--ease-out) both}
.hero-content>div>p{animation-delay:480ms}
.hero-content>div>.button{animation-delay:560ms}
.hero{overflow:clip}
.hero::before{animation:cover-settle 2200ms var(--ease-out) both}
@keyframes rule-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@keyframes rise-in{from{opacity:0;transform:translateY(18px);filter:blur(6px)}}
@keyframes cover-settle{from{transform:scale(1.05);opacity:.6}}

@media(prefers-reduced-motion:reduce){
  .hero-content::before,.hero::before{animation:none}
  .hero-content h1,.hero-content>div>*{animation:fade-in 400ms ease both}
  nav.open{animation:none}
  .icon,.service img,.service h3{transition:none}
}
@keyframes fade-in{from{opacity:0}}
/* Lanzamiento 2026-10-09: aviso de privacidad, contacto directo y consentimiento. */
.legal-page{padding:clamp(130px,16vw,190px) 20px 100px}
.legal{max-width:70ch;margin:0 auto}
.legal h1{font-size:clamp(36px,4.3vw,64px);margin-bottom:12px}
.legal-updated{color:var(--muted);font-size:14px;margin-bottom:48px}
.legal h2{font-size:clamp(20px,1.6vw,24px);margin:52px 0 16px}
.legal p,.legal li{color:#d6d4cd;line-height:1.65}
.legal p{margin:0 0 16px}
.legal ul{margin:0 0 16px;padding-left:1.2em}
.legal li{margin-bottom:8px}
.legal li::marker{color:var(--slate)}
.legal strong{color:var(--text);font-weight:560}
.legal a,.form-direct a,.form-privacy a{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:rgba(239,237,230,.45)}
.legal a:hover,.form-direct a:hover,.form-privacy a:hover{text-decoration-color:currentColor}
.legal-pending{background:#5c3a1e;color:#ffd9b8;padding:0 4px}
footer small a{text-decoration:underline;text-underline-offset:4px}
.form-direct{color:var(--muted);margin:-16px 0 32px}
.form-privacy{max-width:90ch}
.form-privacy .form-note{line-height:1.6}
.contact-form-section .consent{grid-template-columns:1fr;margin:0 0 28px}
.contact-form-section .consent label{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5}
.contact-form-section .consent input{margin-top:1px}
/* Selector de idioma: botón de vidrio junto al menú; el panel crece desde su esquina. */
header{justify-content:flex-start;gap:10px}
header .brand{margin-right:auto}
.lang-switch{position:relative}
header .lang-toggle{
  display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 14px;
  font:inherit;font-size:13px;letter-spacing:.04em;color:#fff;cursor:pointer;
  background:rgba(35,38,40,.5);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 5px 22px rgba(0,0,0,.12);
  transition:background-color 200ms ease,transform 160ms var(--ease-out);
}
header .lang-toggle:active{transform:scale(.97)}
@media(hover:hover) and (pointer:fine){header .lang-toggle:hover{background:rgba(60,63,65,.6)}}
.icon-globe{width:18px;height:18px;stroke-width:1.4}
.lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:168px;padding:6px;
  display:flex;flex-direction:column;gap:2px;
  background:rgba(30,33,36,.82);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 32px rgba(0,0,0,.28);
  transform-origin:top right;opacity:0;transform:scale(.96) translateY(-4px);visibility:hidden;pointer-events:none;
  transition:opacity 120ms ease,transform 120ms ease,visibility 0s linear 120ms;
}
.lang-switch[data-open="true"] .lang-menu{
  opacity:1;transform:none;visibility:visible;pointer-events:auto;
  transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out),visibility 0s;
}
.lang-menu button{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:40px;padding:0 12px;border:0;background:transparent;color:var(--text);
  font:inherit;font-size:15px;text-align:left;cursor:pointer;transition:background-color 150ms ease;
}
.lang-menu button:hover,.lang-menu button:focus-visible{background:rgba(255,255,255,.08)}
.lang-menu button:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--slate)}
.icon-check{width:15px;height:15px;opacity:0}
.lang-menu [aria-checked="true"] .icon-check{opacity:1}
@media(max-width:750px){
  header{gap:8px}
  header .menu-toggle{order:2}
  header .lang-toggle{height:45px;padding:0 12px}
}

/* Cambio de idioma sin parpadeo: atenúa y desenfoca el contenido mientras se cambian las palabras. */
html.i18n-pending body{visibility:hidden}
main,footer,header nav{transition:opacity 220ms var(--ease-out),filter 220ms var(--ease-out)}
html.lang-switching main,html.lang-switching footer,html.lang-switching header nav{opacity:.25;filter:blur(3px);transition-duration:150ms;transition-timing-function:ease}
html:not([lang="en"]) [data-lang-only="en"]{display:none}
.legal-translation{color:var(--muted);font-size:14px;border-left:1px solid var(--line);padding-left:14px;margin:-32px 0 40px}
@media(prefers-reduced-motion:reduce){.lang-menu,.lang-switch[data-open="true"] .lang-menu{transition:none;transform:none}}
/* Servicios: la foto recupera su color con un zoom suave; un clic abre su "Más información". */
.service-photo{overflow:hidden;background:#263747;cursor:pointer;transition:transform 160ms var(--ease-out)}
.service-photo img{display:block;transition:transform 900ms var(--ease-out),filter 900ms var(--ease-out)}
.service-photo:active{transform:scale(.985)}
@media(hover:hover) and (pointer:fine){.service-photo:hover img{transform:scale(1.04);filter:none}}
.service-grid article:has(details[open]) .service-photo img{filter:none}
:root{interpolate-size:allow-keywords}
.service-grid details::details-content{height:0;overflow:clip;transition:height 320ms var(--ease-out),content-visibility 320ms allow-discrete}
.service-grid details[open]::details-content{height:auto}
@media(prefers-reduced-motion:reduce){.service-photo img,.service-grid details::details-content{transition:none}}
/* Portadas propias para 404 (escalera en espiral) y Gracias (luz en el pasillo), con el mismo tratamiento pizarra. */
.error-page{--cover-photo:url('assets/cgp-espiral.jpg');--cover-position:center 40%}
.thanks-page{--cover-photo:url('assets/cgp-pasillo-luz.jpg');--cover-position:center 55%}
/* Animaciones de 404, Gracias y Aviso: la misma llegada que las portadas principales. */
.error-page{overflow:clip}
.error-page::before{animation:cover-settle 2200ms var(--ease-out) both}
.error-message{position:relative;border-top-color:transparent}
.error-message::before{content:'';position:absolute;top:-1px;left:0;right:0;height:1px;background:#d6d1c28c;animation:rule-draw 1400ms var(--ease-in-out) both}
.error-message h1{animation:rise-in 1100ms var(--ease-out) 250ms both}
.error-message>div>*{animation:rise-in 900ms var(--ease-out) both}
.error-message>div>p{animation-delay:480ms}
.error-message>div>.error-actions{animation-delay:560ms}
/* The large 404 is unveiled top to bottom while it settles into place. */
.error-code{animation:code-reveal 1300ms var(--ease-out) 120ms both}
@keyframes code-reveal{from{clip-path:inset(0 0 100% 0);transform:translateY(.08em)}to{clip-path:inset(0 0 -12% 0)}}
.legal h1{animation:rise-in 1000ms var(--ease-out) 100ms both}
.legal-updated,.legal-translation{animation:rise-in 900ms var(--ease-out) 260ms both}

/* Team photo on Inicio: a single top-to-bottom reveal the first time it enters the screen. */
.team-group-photo{clip-path:inset(0);transition:clip-path 1200ms var(--ease-in-out)}
.team-group-photo img{transition:transform 1600ms var(--ease-out),filter .65s ease}
.team-group-photo.reveal-pending{clip-path:inset(0 0 100% 0)}
.team-group-photo.reveal-pending img{transform:scale(1.08)}

@media(prefers-reduced-motion:reduce){
  .error-page::before,.error-message::before,.error-code{animation:none}
  .error-message h1,.error-message>div>*,.legal h1,.legal-updated,.legal-translation{animation:fade-in 400ms ease both}
  .team-group-photo.reveal-pending{clip-path:none}
  .team-group-photo.reveal-pending img{transform:none}
}
/* Equipo en Nosotros: monograma en tono pizarra mientras no haya retratos reales. */
.monogram-photo{display:grid;place-items:center;background:linear-gradient(160deg,#2b3a47 0%,#1a242e 100%);border:1px solid rgba(239,237,230,.08)}
.monogram-photo::after{content:none}
.monogram{font-weight:300;font-size:clamp(56px,7vw,112px);line-height:1;letter-spacing:.04em;color:rgba(239,237,230,.82);transition:transform 900ms var(--ease-out),color 600ms ease}
.collaborator-grid .monogram{font-size:clamp(44px,4.6vw,76px)}
.profile-grid .director-photo img.monogram-mark{width:18%;height:auto;object-fit:contain;filter:none;opacity:.35;transform:none;transition:transform 900ms var(--ease-out),opacity 600ms ease}
@media(hover:hover) and (pointer:fine){
  .person:hover .monogram{transform:scale(1.04);color:#fff}
  .profile-grid .person:hover .director-photo img.monogram-mark{transform:scale(1.06);opacity:.55}
}

/* Equipo con retratos: más aire sobre la cabeza en la fila de colaboradores. */
.about-team .collaborator-grid .director-photo img{object-position:center 12%}

/* Socios: Cuitláhuac se acerca (zoom sobre su rostro), sube y se centra en su recuadro; Virginia baja un poco, para que ambos rostros
   tengan tamaño y altura parecidos. El hover conserva el mismo zoom extra (×1.045) que el resto. */
.about-team .director-photo img[src*="equipo-cuitlahuac-sanchez"]{object-position:center 3%;transform-origin:61% 16%;transform:translate(-11.5%,-8.8%) scale(1.35)}
.about-team .director-photo:hover img[src*="equipo-cuitlahuac-sanchez"]{transform:translate(-11.5%,-8.8%) scale(1.41)}
.about-team .director-photo img[src*="equipo-virginia-portela"]{object-position:center 12%}
@media(prefers-reduced-motion:reduce){.about-team .director-photo:hover img[src*="equipo-cuitlahuac-sanchez"]{transform:translate(-11.5%,-8.8%) scale(1.35)}}