/* ============================================================
   juanleopoldo.com — hoja de estilo única
   Mundo visual: manual de campo a dos tintas.
   Navy #102843 · Naranja #FF4B12 · Blanco #FFFFFF
   Para cambiar un color, edita las variables de :root.
   ============================================================ */

/* ---------- tipografías auto-alojadas (sin dependencias externas) ---------- */
@font-face{
  font-family:"Archivo";font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url("fonts/archivo-latin-standard-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:"Archivo";font-style:normal;font-display:swap;
  font-weight:100 900;font-stretch:62% 125%;
  src:url("fonts/archivo-latin-ext-standard-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;
}
@font-face{
  font-family:"Bricolage Grotesque";font-style:normal;font-display:swap;
  font-weight:200 800;font-stretch:75% 100%;
  src:url("fonts/bricolage-grotesque-latin-standard-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:"Bricolage Grotesque";font-style:normal;font-display:swap;
  font-weight:200 800;font-stretch:75% 100%;
  src:url("fonts/bricolage-grotesque-latin-ext-standard-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{
  --ink:#102843;
  --ink-deep:#081826;
  --ink-mid:#2C4C74;
  --flag:#FF4B12;
  --paper:#FFFFFF;
  --char:#0F141A;
  --char-60:#5A6470;
  --hair:rgba(15,20,26,.20);
  --rule:2px;
  --pad-s:clamp(2rem,4vw,3.25rem);
  --pad-m:clamp(3rem,6vw,5.25rem);
  --pad-l:clamp(4rem,9vw,7.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--char);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;
  font-variation-settings:"wdth" 100;
  font-size:clamp(1rem,0.95rem + 0.25vw,1.125rem);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--flag);color:#fff}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:#EBEFF4}
::-webkit-scrollbar-thumb{background:var(--ink);border:3px solid #EBEFF4}
::-webkit-scrollbar-thumb:hover{background:var(--flag)}
html{scrollbar-color:var(--ink) #EBEFF4}
:focus-visible{outline:3px solid var(--flag);outline-offset:3px}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}

.wrap{width:min(1320px,100% - 2.5rem);margin-inline:auto}
@media (max-width:640px){.wrap{width:min(1320px,100% - 1.75rem)}}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--flag);color:var(--char);
  padding:0.75rem 1.1rem;font-weight:700;z-index:50;text-decoration:none;
}
.skip:focus{left:0}

.display{
  font-family:"Bricolage Grotesque","Archivo",system-ui,sans-serif;
  font-weight:800;line-height:0.88;letter-spacing:-0.035em;
  font-variation-settings:"wdth" 92,"opsz" 96;
  text-wrap:balance;
}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- masthead ---------- */
.masthead{background:var(--ink);color:#fff;position:relative;z-index:3}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.15rem 0}
.mark{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:0.95rem;
  letter-spacing:0.02em;font-variation-settings:"wdth" 80;text-decoration:none;
  display:inline-flex;align-items:center;gap:0.55rem;color:#fff;
}
.mark svg{flex:none}
.masthead nav ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0}
.masthead nav a{
  text-decoration:none;font-size:0.875rem;letter-spacing:0.01em;color:#fff;
  padding-bottom:2px;border-bottom:2px solid transparent;transition:border-color .18s ease;
}
.masthead nav a:hover,.masthead nav a[aria-current]{border-color:var(--flag)}

/* ---------- page header (páginas interiores) ---------- */
.pagehead{background:var(--ink);color:#fff;padding:var(--pad-m) 0 var(--pad-s)}
.pagehead .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:end}
.pagehead--solo .wrap{grid-template-columns:minmax(0,1fr)}
.pagehead h1{font-size:clamp(2.5rem,1rem + 6.2vw,6rem);color:#fff}
.pagehead .lede{
  font-size:clamp(1.02rem,0.92rem + 0.5vw,1.3rem);line-height:1.42;color:#CBD8E8;
  max-width:38ch;padding-bottom:0.4rem;
}
@media (max-width:820px){
  .pagehead .wrap{grid-template-columns:1fr;align-items:start;gap:1.5rem}
}

/* ---------- botones ---------- */
.cta{
  display:inline-flex;align-items:center;gap:0.85rem;align-self:flex-start;
  background:var(--flag);color:var(--char);text-decoration:none;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-variation-settings:"wdth" 85;
  font-size:clamp(1rem,0.95rem + 0.3vw,1.2rem);letter-spacing:-0.01em;
  padding:0.95rem 1.4rem;border:var(--rule) solid var(--char);cursor:pointer;
  box-shadow:0 0 0 0 var(--char);
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s cubic-bezier(.2,.8,.3,1);
}
.cta:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 0 var(--char)}
.cta:active{transform:translate(0,0);box-shadow:0 0 0 0 var(--char)}
.cta[disabled]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.cta svg{flex:none}
.cta--ghost{
  background:transparent;color:var(--ink);border-color:var(--ink);
  box-shadow:0 0 0 0 var(--ink);
}
.cta--ghost:hover{box-shadow:6px 6px 0 0 var(--ink)}

/* ---------- etiquetas de sección ---------- */
.seclabel{
  font-size:0.75rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--char-60);
  font-weight:600;border-top:var(--rule) solid var(--char);padding-top:0.7rem;
  margin:0 0 clamp(1.5rem,3vw,2.5rem);
}

/* ---------- listas con filete (gramática compartida) ---------- */
.ruled{list-style:none;margin:0;padding:0}
.ruled > li{
  border-top:1px solid var(--hair);
  padding:clamp(1.1rem,2.2vw,1.6rem) 0;
}
.ruled > li:last-child{border-bottom:1px solid var(--hair)}

/* ---------- pie ---------- */
footer{background:var(--ink-deep);color:#B9C6D6;padding:clamp(2.75rem,5vw,4rem) 0}
footer .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:2rem}
footer .name{
  color:#fff;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-variation-settings:"wdth" 85;font-size:1.15rem;letter-spacing:-0.02em;margin:0 0 0.4rem;
}
footer p{margin:0.25rem 0;font-size:0.9rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:0.4rem;font-size:0.9rem}
footer a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.32);padding-bottom:1px}
footer a:hover{border-color:var(--flag);color:var(--flag)}
.legal{font-size:0.8rem;color:#7C8DA1}

/* ============================================================
   INICIO
   ============================================================ */
.hero{background:var(--ink);color:#fff;position:relative}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:rgba(255,255,255,.22)}
.hero .wrap{
  display:grid;grid-template-columns:minmax(0,1.58fr) minmax(0,0.86fr);
  gap:clamp(2rem,4vw,4.5rem);align-items:stretch;
}
.hero-left{
  display:flex;flex-direction:column;justify-content:space-between;
  gap:clamp(2.5rem,5vw,4.5rem);padding:var(--pad-m) 0 clamp(2.5rem,4.5vw,3.75rem);
}
.hero-right{
  display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.5rem);
  padding-top:var(--pad-m);position:relative;z-index:2;
}
.hero h1{font-size:clamp(3.4rem,10.6vw,9.5rem);color:#fff;line-height:0.86}
.hero h1 .l{display:block}
.hero h1 .l:nth-child(2){padding-left:0.07em}
.hero .sub{
  font-size:clamp(1.05rem,0.9rem + 0.62vw,1.5rem);line-height:1.34;
  letter-spacing:-0.012em;color:#CBD8E8;max-width:34ch;
}
.hero .sub b{color:#fff;font-weight:600}
.hero-act{display:flex;flex-direction:column;gap:1.25rem}
.langs{
  display:flex;gap:0.6rem;align-items:center;font-size:0.8rem;letter-spacing:0.12em;
  text-transform:uppercase;color:#93A8C2;margin:0;
}
.langs span:not(:last-child)::after{
  content:"";display:inline-block;width:14px;height:1px;background:#42618A;
  vertical-align:middle;margin-left:0.6rem;
}

.plate{
  position:relative;margin-bottom:calc(-1 * clamp(2.5rem,6vw,5.5rem));
  border:var(--rule) solid var(--char);background:#E8EDF3;
  flex:1;min-height:clamp(16rem,32vw,26rem);overflow:hidden;
}
.plate img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:saturate(1.02) contrast(1.02)}

.statement{padding:var(--pad-l) 0 clamp(3.5rem,7vw,6rem)}
.statement .wrap{display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem)}
.statement .seclabel{margin:0}
.statement .quote{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:400;
  font-variation-settings:"wdth" 100,"opsz" 48;
  font-size:clamp(1.35rem,0.95rem + 1.65vw,2.65rem);line-height:1.22;letter-spacing:-0.024em;
  text-wrap:pretty;max-width:min(100%,26em);
}
.statement mark{background:transparent;color:var(--ink);box-shadow:inset 0 -0.14em 0 0 rgba(255,75,18,.9)}
.statement .coda{
  display:block;margin-top:0.9rem;font-size:clamp(1.1rem,0.9rem + 0.9vw,1.85rem);
  color:var(--flag);font-weight:700;font-variation-settings:"wdth" 88;
}

.chain{padding-bottom:clamp(4rem,8vw,7rem)}
.link{
  display:grid;grid-template-columns:minmax(0,4.5rem) minmax(0,1.05fr) minmax(0,1.35fr);
  gap:clamp(1.25rem,3vw,3rem);
  padding:clamp(1.75rem,3.4vw,2.75rem) 0;
  border-top:1px solid var(--hair);position:relative;align-items:stretch;
}
.link:last-of-type{border-bottom:1px solid var(--hair)}
.node{position:relative}
.node svg{
  position:absolute;top:calc(-1 * clamp(1.75rem,3.4vw,2.75rem));left:0;width:100%;
  height:calc(100% + 2 * clamp(1.75rem,3.4vw,2.75rem));overflow:visible;
}
.node::after{
  content:"";position:absolute;left:0;top:calc(0.62 * clamp(1.5rem,2.6vw,2.1rem));
  width:clamp(0.9rem,1.5vw,1.1rem);aspect-ratio:1;border-radius:50%;
  background:var(--paper);border:3px solid var(--ink);
  transform:translateX(calc(-50% + 3px));margin-left:14px;z-index:1;
}
.link:last-of-type .node::after{background:var(--ink)}
.link h3{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-variation-settings:"wdth" 88,"opsz" 48;
  font-size:clamp(1.5rem,1.05rem + 1.5vw,2.6rem);line-height:1.02;letter-spacing:-0.03em;
  color:var(--ink);text-wrap:balance;
}
.link p{margin-top:0.15rem;max-width:56ch;color:#2A2C34}

/* ---------- banda de cierre ---------- */
.close{background:var(--flag);color:var(--char);border-top:var(--rule) solid var(--char)}
.close .wrap{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem;
  padding:clamp(3rem,6vw,5rem) 0;
}
.close .display{font-size:clamp(2.6rem,1.4rem + 5.4vw,6rem);letter-spacing:-0.04em}
.close a.big{
  text-decoration:none;display:inline-flex;align-items:center;
  gap:clamp(0.75rem,1.6vw,1.5rem);color:var(--char);
}
.close a.big svg{flex:none;width:clamp(2rem,3.4vw,3.25rem);height:auto}
.close a.big:hover .display{text-decoration:underline;text-decoration-thickness:0.06em;text-underline-offset:0.1em}
.close .aside{font-size:0.95rem;max-width:32ch;line-height:1.45}
.close .aside a{font-weight:600}

/* ============================================================
   SOBRE MÍ
   ============================================================ */
.bio{padding:var(--pad-l) 0 clamp(2.5rem,5vw,4rem)}
.bio .wrap{display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem)}
.bio .prose > p{max-width:68ch;font-size:clamp(1.05rem,0.98rem + 0.35vw,1.2rem);line-height:1.6}
.bio .prose > p + p{margin-top:1.35rem}
.bio .prose > p:first-child{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:400;
  font-variation-settings:"wdth" 100,"opsz" 40;
  font-size:clamp(1.25rem,1rem + 1.05vw,1.9rem);line-height:1.28;letter-spacing:-0.02em;
  max-width:30ch;color:var(--ink);
}

.block{padding:clamp(2.5rem,5vw,4rem) 0}
.block .wrap{display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem)}
.block .seclabel{margin:0}

.facts > li{
  display:grid;grid-template-columns:minmax(0,1.2rem) minmax(0,1fr);
  gap:clamp(0.9rem,2vw,1.5rem);align-items:start;
}
.facts .dot{
  width:0.7rem;height:0.7rem;background:var(--flag);margin-top:0.55em;
}
.facts p{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-variation-settings:"wdth" 88,"opsz" 40;
  font-size:clamp(1.15rem,0.95rem + 0.85vw,1.8rem);line-height:1.14;
  letter-spacing:-0.026em;color:var(--ink);text-wrap:balance;
}

.awards > li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(1rem,2.5vw,2.5rem)}
.awards h3{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-variation-settings:"wdth" 88,"opsz" 36;
  font-size:clamp(1.1rem,0.95rem + 0.6vw,1.5rem);line-height:1.1;letter-spacing:-0.025em;color:var(--ink);
}
.awards p{color:#2A2C34;max-width:52ch}

.edu > li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(0.75rem,2vw,2.5rem)}
.edu strong{font-weight:600;font-variation-settings:"wdth" 96;color:var(--ink)}
.edu span{color:var(--char-60);font-size:0.95rem}

.clients > li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(0.75rem,2vw,2.5rem)}
.clients h3{
  font-size:0.8rem;letter-spacing:0.11em;text-transform:uppercase;
  color:var(--char-60);font-weight:600;line-height:1.35;
}
.clients p{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;
  font-variation-settings:"wdth" 90,"opsz" 32;
  font-size:clamp(1rem,0.92rem + 0.42vw,1.25rem);line-height:1.35;
  letter-spacing:-0.018em;color:var(--ink);
}
.clients p .sep{color:var(--flag);padding:0 0.15em}

/* ============================================================
   SERVICIOS
   ============================================================ */
.svc-intro{padding:clamp(2.5rem,5vw,4rem) 0 0}
.svc-intro p{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:400;
  font-variation-settings:"wdth" 100,"opsz" 40;
  font-size:clamp(1.2rem,0.95rem + 1.1vw,1.95rem);line-height:1.26;letter-spacing:-0.022em;
  max-width:30ch;color:var(--ink);
}
.services{padding:clamp(2rem,4vw,3.25rem) 0 clamp(3rem,6vw,5rem)}
.svc{
  display:grid;grid-template-columns:minmax(0,3.5rem) minmax(0,1.05fr) minmax(0,1.35fr);
  gap:clamp(1rem,2.5vw,3rem);
  border-top:1px solid var(--hair);
  padding:clamp(1.4rem,2.8vw,2.15rem) 0;
  transition:background-color .16s ease;
}
.svc:last-of-type{border-bottom:var(--rule) solid var(--char)}
.svc:hover{background:#F3F6FA}
.svc .n{
  font-variant-numeric:tabular-nums;font-weight:700;font-size:0.95rem;
  color:var(--flag);padding-top:0.4em;letter-spacing:0.02em;
}
.svc h3{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-variation-settings:"wdth" 88,"opsz" 44;
  font-size:clamp(1.2rem,0.98rem + 0.95vw,1.95rem);line-height:1.06;
  letter-spacing:-0.028em;color:var(--ink);text-wrap:balance;
}
.svc p{max-width:58ch;color:#2A2C34}
.howwork{padding:0 0 clamp(3rem,6vw,5rem)}
.howwork .wrap{display:grid;grid-template-columns:minmax(0,7rem) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem)}
.howwork p{max-width:56ch;font-size:clamp(1.02rem,0.95rem + 0.35vw,1.2rem)}

/* ============================================================
   PUBLICACIONES
   ============================================================ */
.pubs{padding:clamp(2.75rem,5.5vw,4.5rem) 0 clamp(2.75rem,5.5vw,4.5rem)}
.newsletter{
  border:var(--rule) solid var(--char);background:var(--ink);color:#fff;
  padding:clamp(1.75rem,4vw,3.25rem);
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  gap:clamp(1.5rem,3.5vw,3.5rem);align-items:end;
}
.newsletter h2{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
  font-variation-settings:"wdth" 90,"opsz" 72;
  font-size:clamp(1.9rem,1.2rem + 3vw,3.6rem);line-height:0.98;letter-spacing:-0.035em;color:#fff;
}
.newsletter > .cta{justify-self:start}
.newsletter p{margin-top:0.9rem;color:#CBD8E8;font-size:clamp(1.02rem,0.95rem + 0.4vw,1.25rem);max-width:34ch}
@media (max-width:760px){.newsletter{grid-template-columns:1fr;align-items:start}}

.soon{
  margin-top:clamp(2rem,4vw,3.25rem);border-top:var(--rule) solid var(--char);
  padding-top:clamp(1.25rem,2.5vw,2rem);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0.9rem 1.5rem;
}
.soon h2{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-variation-settings:"wdth" 88,"opsz" 56;
  font-size:clamp(1.6rem,1.1rem + 2.2vw,2.8rem);letter-spacing:-0.032em;color:var(--ink);
}
.soon .badge{
  font-size:0.75rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:700;
  background:var(--flag);color:var(--char);padding:0.4rem 0.7rem;border:var(--rule) solid var(--char);
}

/* ============================================================
   CONTACTO
   ============================================================ */
.contact{padding:var(--pad-l) 0 clamp(3rem,6vw,5rem)}
.contact .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(2.25rem,5vw,5rem);align-items:start}
.channels{margin-top:clamp(1.75rem,3.5vw,2.75rem)}
.channels > li{display:grid;grid-template-columns:minmax(0,5.5rem) minmax(0,1fr);gap:1rem;align-items:baseline}
.channels .k{font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--char-60);font-weight:600}
.channels a{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-variation-settings:"wdth" 88,"opsz" 32;
  font-size:clamp(1.02rem,0.9rem + 0.6vw,1.35rem);letter-spacing:-0.022em;
  color:var(--ink);text-decoration:none;
  border-bottom:2px solid rgba(255,75,18,.55);padding-bottom:1px;word-break:break-word;
}
.channels a:hover{border-color:var(--flag);color:var(--flag)}
.contact .intro{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:400;
  font-variation-settings:"wdth" 100,"opsz" 40;
  font-size:clamp(1.15rem,0.95rem + 0.9vw,1.75rem);line-height:1.28;letter-spacing:-0.02em;
  max-width:28ch;color:var(--ink);
}

form{border:var(--rule) solid var(--char);padding:clamp(1.25rem,3vw,2.25rem)}
.field{display:grid;gap:0.4rem;margin-bottom:1.1rem}
.field label{font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;color:var(--char-60)}
.field .req{color:var(--flag)}
.field input,.field select,.field textarea{
  font:inherit;font-size:1rem;color:var(--char);background:#fff;
  border:1px solid var(--ink);border-radius:0;padding:0.75rem 0.85rem;width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field textarea{min-height:8.5rem;resize:vertical;line-height:1.5}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' stroke='%23102843' stroke-width='2' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:right 0.85rem center;padding-right:2.5rem;
}
.field input::placeholder,.field textarea::placeholder{color:#6C7681}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-mid)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--flag);box-shadow:inset 0 0 0 1px var(--flag);
}
.field input:user-invalid,.field textarea:user-invalid{border-color:#B3200A;box-shadow:inset 0 0 0 1px #B3200A}
.check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0.7rem;align-items:start;margin-bottom:1.4rem}
.check input{width:1.2rem;height:1.2rem;accent-color:var(--flag);margin-top:0.2rem;flex:none}
.check label{font-size:0.95rem;color:#2A2C34;letter-spacing:0;text-transform:none;font-weight:400}
.formnote{margin-top:1rem;font-size:0.85rem;color:var(--char-60);line-height:1.45}
.msg{margin-top:1.1rem;padding:0.9rem 1.1rem;border:var(--rule) solid var(--char);font-size:0.95rem;line-height:1.45}
.msg[hidden]{display:none}
.msg--ok{background:#E9F3EC;border-color:#14563C;color:#0E3F2B}
.msg--err{background:#FDEDE8;border-color:#B3200A;color:#7A1607}
.msg a{font-weight:600}

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;align-items:start;gap:2rem}
  .hero-left{padding:2.5rem 0 0;gap:1.75rem;justify-content:flex-start}
  .hero-right{padding-top:0;gap:1.5rem}
  .plate{max-width:19rem;min-height:0;margin-bottom:calc(-1 * 3rem)}
  .statement .wrap,.bio .wrap,.block .wrap,.howwork .wrap{grid-template-columns:1fr}
  .link{grid-template-columns:2.25rem minmax(0,1fr);row-gap:0.75rem}
  .link p{grid-column:2}
  .svc{grid-template-columns:2.5rem minmax(0,1fr);row-gap:0.55rem}
  .svc .n{grid-column:1;grid-row:1}
  .svc h3{grid-column:2;grid-row:1}
  .svc > p:not(.n){grid-column:2;grid-row:2}
  .awards > li,.edu > li,.clients > li{grid-template-columns:1fr;gap:0.45rem}
  .contact .wrap{grid-template-columns:1fr}
  .masthead nav ul{gap:1rem}
  .masthead nav a{font-size:0.8rem}
}
@media (max-width:560px){
  .masthead .wrap{flex-wrap:wrap;gap:0.65rem 1rem;padding:0.9rem 0}
  .masthead nav ul{gap:0.85rem;flex-wrap:wrap}
  .masthead nav a{font-size:0.78rem}
  .channels > li{grid-template-columns:1fr;gap:0.15rem}
}


/* ============================================================
   MOVIMIENTO
   El contenido es visible por defecto. La clase js-motion la añade
   js/motion.js; solo entonces se oculta para revelarse.
   ============================================================ */
.mask{display:block;overflow:hidden;padding-block:0.14em;margin-block:-0.14em}
.mask--word{display:inline-block;vertical-align:top}
.mask-in{display:block;will-change:transform}

/* reglas de sección que se trazan */
.seclabel{border-top:0;position:relative}
.seclabel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:var(--rule);
  background:var(--char);transform-origin:left center;
}
.js-motion .seclabel::before{
  transform:scaleX(0);
  transition:transform .75s cubic-bezier(.16,1,.3,1);
}
.js-motion .seclabel.is-in::before{transform:scaleX(1)}

/* nodos de la cadena */
.node--hidden::after{transform:translateX(calc(-50% + 3px)) scale(0)}
.node::after{transition:transform .45s cubic-bezier(.34,1.4,.44,1)}

/* letras del cierre */
.close .display .word{display:inline-block;white-space:nowrap}
.close .display .letter{
  display:inline-block;transform-origin:50% 100%;
  will-change:transform;
}
.close .display .letter:not(:has(*)){white-space:pre}

@media (prefers-reduced-motion:reduce){
  .js-motion .seclabel::before{transform:scaleX(1);transition:none}
  .node::after{transition:none}
}


/* botones sociales del pie */
.social-item{margin-top:0.6rem}
.social{display:flex;flex-wrap:wrap;gap:0.6rem;margin:0;padding:0;list-style:none}
.social li{margin:0}
footer a.sbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.75rem;height:2.75rem;padding:0;
  border:var(--rule) solid rgba(255,255,255,.62);
  color:#fff;background:transparent;text-decoration:none;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,
             transform .18s cubic-bezier(.2,.8,.3,1);
}
footer a.sbtn:hover,footer a.sbtn:focus-visible{
  background:var(--flag);border-color:var(--flag);color:var(--char);
  transform:translateY(-3px);
}
.sbtn svg{width:1.15rem;height:1.15rem;display:block;flex:none}
@media (prefers-reduced-motion:reduce){
  footer a.sbtn:hover,footer a.sbtn:focus-visible{transform:none}
}

/* ============================================================
   SELECTOR DE IDIOMA  /  LANGUAGE SWITCHER
   ES en la raíz · EN en /en/ · PT-BR en /pt/
   ============================================================ */
.langs a{
  color:inherit;text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:1px;
}
.langs a:hover,.langs a:focus-visible{color:var(--flag);border-color:var(--flag)}
.langs a[aria-current="true"]{color:#fff;border-bottom-color:rgba(255,255,255,.45)}

.langs-foot{margin:0.25rem 0;font-size:0.9rem}
.langs-foot a[aria-current="true"]{color:var(--flag);border-color:var(--flag)}

/* ------------------------------------------------------------
   Etiqueta de sección a doble tamaño (solo "Qué resuelvo" en Inicio)
   ------------------------------------------------------------ */
.seclabel--xl{font-size:1.5rem;letter-spacing:0.1em}

/* ------------------------------------------------------------
   Banderas de idioma, fijas abajo a la derecha
   Floating language flags, fixed to the bottom-right of the screen.
   México = español · Estados Unidos = inglés · Brasil = portugués
   ------------------------------------------------------------ */
.langflags{
  position:fixed;z-index:40;
  right:clamp(0.9rem,2.4vw,1.75rem);bottom:clamp(0.9rem,2.4vw,1.75rem);
  display:flex;gap:0.45rem;padding:0.45rem;
  background:var(--paper);border:var(--rule) solid var(--char);
}
.langflags a{
  display:block;line-height:0;text-decoration:none;opacity:.55;
  border:var(--rule) solid transparent;
  transition:opacity .18s ease,border-color .18s ease,
             transform .18s cubic-bezier(.2,.8,.3,1);
}
.langflags a:hover,.langflags a:focus-visible{
  opacity:1;border-color:var(--flag);transform:translateY(-2px);
}
.langflags a[aria-current="true"]{opacity:1;border-color:var(--char)}
.langflags svg{display:block;width:30px;height:20px}

@media (max-width:560px){
  .langflags{padding:0.3rem;gap:0.3rem}
  .langflags svg{width:24px;height:16px}
}
@media (prefers-reduced-motion:reduce){
  .langflags a:hover,.langflags a:focus-visible{transform:none}
}

/* ---------- campo trampa del formulario (anti robots) ---------- */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}