/* CV web v3 · Alberto Herrera Lara · convertido desde el lienzo de Claude Design (Web-v3.dc.html) */
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/atkinson-hyperlegible-next-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/atkinson-hyperlegible-next-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/atkinson-hyperlegible-next-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/atkinson-hyperlegible-next-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/atkinson-hyperlegible-next-latin-800-normal.woff2) format("woff2")}

body{margin:0;background:#FFFFFF}
.w3{--blue:#0E4C73;--ink:#1E2328;--head:#0F2F52;--muted:#4E5761;--line:#DDE3EA;--band:#F2F4F7;--warm:#B8321F;color:var(--ink);font-family:"Atkinson Hyperlegible Next",Arial,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.w3 *{box-sizing:border-box}
:where(.w3) :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure){margin:0}
:where(.w3) button{font:inherit;color:inherit;cursor:pointer}
.w3 ::selection{background:#CFE0EC;color:#0B2A40}
.w3 a{color:var(--blue);text-underline-offset:3px;text-decoration-thickness:1px}
.w3 :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:1rem;top:-4rem;z-index:10;padding:.6rem 1rem;border-radius:8px;background:var(--head);color:#FFFFFF !important;font-weight:700;text-decoration:none}
.skip:focus{top:1rem}
.in{max-width:72rem;margin:0 auto;padding:0 1.25rem}
.top3{border-bottom:1px solid var(--line);background:#FFFFFF}
.top3 .in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;padding-top:.9rem;padding-bottom:.9rem}
.who{display:grid;line-height:1.2}
.who b{font-size:1.05rem;color:var(--head)}
.who span{font-size:.85rem;color:var(--muted)}
.top3 nav{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.1rem;font-size:.95rem;font-weight:600}
.top3 nav a{text-decoration:none;color:var(--head)}
.top3 nav a:hover{text-decoration:underline}
.btn3{display:inline-flex;align-items:center;min-height:44px;padding:0 1.15rem;border-radius:999px;background:var(--blue);color:#FFFFFF !important;text-decoration:none !important;font-weight:700;transition:background-color .2s}
.btn3:hover{background:#0A2F4A}
.btn3.ghost{background:transparent;color:var(--blue) !important;box-shadow:inset 0 0 0 1.5px var(--blue)}
.btn3.ghost:hover{background:#E8F0F6}
.btn3.lg{min-height:52px;padding:0 1.4rem}
.hero3{background:var(--head);color:#FFFFFF;padding:3.5rem 0 4rem}
.hero3 h1{font-size:clamp(2.6rem,7vw,4.6rem);line-height:1.02;font-weight:800;letter-spacing:-0.025em;text-wrap:balance}
.role3{margin-top:.8rem;font-size:clamp(1.05rem,2.3vw,1.3rem);font-weight:700;color:#BFD6EA}
.claim3{margin-top:1.1rem;max-width:40rem;font-size:clamp(1.1rem,2.3vw,1.35rem);line-height:1.45;color:#EAF1F8;text-wrap:pretty}
.w3 h2{font-size:clamp(1.5rem,3.2vw,2.1rem);line-height:1.18;font-weight:800;color:var(--head);letter-spacing:-0.01em;text-wrap:balance}
.band{background:var(--band);padding:4rem 0}
.plain3{padding:4rem 0}
.lead3{margin-top:.9rem;max-width:44rem;font-size:1.12rem;line-height:1.6;color:#2A3138;text-wrap:pretty}
.lead3.sm{font-size:1rem}
.h3s{margin-top:2.5rem;font-size:1.2rem;font-weight:800;color:var(--head)}
.strengths{list-style:none;padding:0;margin-top:1rem;display:grid;grid-template-columns:1fr;gap:.9rem}
.st-card{padding:1.15rem 1.2rem;border-radius:14px;background:#FFFFFF;box-shadow:0 1px 2px rgba(15,47,82,.06)}
.st-card h4,.op h4{font-size:1.05rem;font-weight:800;color:var(--head)}
.st-card p{margin-top:.35rem;font-size:.97rem}
.src{font-size:.8rem !important;font-weight:700;color:var(--muted)}
.chans{list-style:none;padding:0;margin-top:1rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.chn{padding:.95rem 1rem;border-radius:12px;background:#FFFFFF;font-size:.93rem;line-height:1.4}
.chn-n{font-weight:800;color:var(--head);font-size:1rem}
.chn-h{font-weight:700;font-size:.88rem;margin-bottom:.3rem}
.chn.new{background:transparent;box-shadow:inset 0 0 0 1.5px #BFCBD8}
.chn.new .chn-h{color:var(--warm)}
.opps{list-style:none;padding:0;margin-top:1rem;display:grid;grid-template-columns:1fr;gap:.9rem}
.op{display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:.75rem;align-items:start}
.op-n{display:grid;place-items:center;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--blue);color:#FFFFFF;font-weight:800}
.op p{margin-top:.2rem;font-size:.97rem}
.tag{font-size:.82rem !important;font-weight:700;color:var(--warm)}
.role-list{list-style:none;padding:0;margin-top:1.5rem;display:grid;grid-template-columns:1fr;gap:1rem}
.rl3{padding:1.3rem;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line)}
.rl3 h3{font-size:1.15rem;font-weight:800;color:var(--head);text-wrap:balance}
.rl3 p{margin-top:.5rem;font-size:.97rem}
.lbl{font-weight:700;color:var(--blue)}
.case3{margin-top:1.75rem;display:grid;gap:1.25rem}
.case-img{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}
.case-img img{grid-row:1;width:100%;height:auto;border-radius:12px;box-shadow:0 18px 40px rgba(15,47,82,.16)}
.case-img img:first-child{grid-column:1/11}
.case-img .ph{grid-column:9/13;margin-bottom:-6%;border-radius:18px}
.case-tabs{background:#FFFFFF;border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(15,47,82,.06)}
.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.tab{min-height:48px;padding:.5rem .6rem;border:0;background:#F7F9FB;font-weight:700;font-size:.92rem;line-height:1.25;color:var(--muted)}
.tab.on{background:#FFFFFF;color:var(--head);box-shadow:inset 0 -3px 0 var(--warm)}
.panel{padding:1.25rem 1.3rem 1.4rem;animation:rise .4s cubic-bezier(.16,1,.3,1) both}
.panel .sence{margin-top:.6rem}
.panel .go{margin-top:.8rem;font-weight:700;overflow-wrap:anywhere}
.shots{list-style:none;padding:0;margin-top:1.25rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.shots img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:10px;box-shadow:0 8px 22px rgba(15,47,82,.12);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.shots li:hover img{transform:translateY(-4px)}
.shots p{margin-top:.5rem;font-weight:700;font-size:.92rem;color:var(--head)}
.route{list-style:none;padding:0 0 0 1.5rem;margin-top:1.5rem;background:linear-gradient(#BFD0DC,#BFD0DC) no-repeat 4.5px .6rem/1px calc(100% - 1.2rem)}
.stop{display:grid;grid-template-columns:1fr;gap:.25rem;padding:0 0 2rem;margin-left:-1.5rem;padding-left:1.5rem;background:radial-gradient(circle,var(--blue) 0 4px,#FFFFFF 4.5px 5.5px,transparent 6px) no-repeat 0 .3rem/10px 10px}
.stop:last-child{padding-bottom:0}
.when{font-variant-numeric:tabular-nums;font-weight:700;color:var(--blue);font-size:.95rem}
.what h3{font-size:1.15rem;line-height:1.3;font-weight:800;color:var(--head);text-wrap:balance}
.org{color:var(--muted);font-size:.98rem}
.org b{font-weight:700;color:var(--ink)}
.w3 .f{margin-top:.35rem;max-width:46rem;text-wrap:pretty}
.list{list-style:none;padding:0}
.list li{padding-left:1rem;margin-top:.4rem;background:linear-gradient(var(--warm),var(--warm)) no-repeat 0 .68em/6px 6px}
.grid2{display:grid;grid-template-columns:1fr;gap:2rem}
.w3 h2.sub{font-size:1.15rem;margin:2rem 0 .75rem}
.end3{background:var(--head);color:#FFFFFF;padding:4rem 0 3rem}
.q3{font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.2;font-weight:800;max-width:28ch;text-wrap:balance}
.acts3{margin-top:1.75rem;display:flex;flex-wrap:wrap;gap:.75rem}
.end3 .btn3{background:#FFFFFF;color:var(--head) !important}
.end3 .btn3.ghost{background:transparent;color:#FFFFFF !important;box-shadow:inset 0 0 0 1.5px #FFFFFF}
.disc{margin-top:2.5rem;max-width:44rem;font-size:.85rem;color:#BFD0E0}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (min-width:760px){
 .in{padding:0 2.5rem}
 .hero3{padding:4.5rem 0 5rem}
 .strengths{grid-template-columns:repeat(3,minmax(0,1fr))}
 .chans{grid-template-columns:repeat(4,minmax(0,1fr))}
 .opps{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 2rem}
 .role-list{grid-template-columns:repeat(3,minmax(0,1fr))}
 .case3{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:2.5rem}
 .shots{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
 .stop{grid-template-columns:8.5rem minmax(0,1fr);gap:1.5rem}
 .when{padding-top:.15rem}
 .grid2{grid-template-columns:1fr 1fr;gap:3rem}
}
@media (prefers-reduced-motion:reduce){
 .w3 *{animation:none !important;transition:none !important}
}