/* Portada ercabrera.com: composiciones propias sobre el sistema de pagina.css */
.hero{padding:clamp(28px,4vw,56px) 0 clamp(40px,5vw,72px);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% -12% auto auto;width:64vw;height:64vw;max-width:900px;max-height:900px;
  background:radial-gradient(closest-side,var(--tomL),rgba(253,238,233,0) 72%);pointer-events:none}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(var(--line2) 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 80% 40%,#000,transparent 70%);mask-image:radial-gradient(ellipse 60% 70% at 80% 40%,#000,transparent 70%)}
.hero .w{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,80px);align-items:center;position:relative;z-index:1}
.ojo{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12.5px;color:var(--ink2);
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 14px;margin-bottom:22px;box-shadow:var(--sh)}
.vivo{width:8px;height:8px;border-radius:50%;background:#1FA855;box-shadow:0 0 0 0 rgba(31,168,85,.5);animation:pulso 2s infinite}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(31,168,85,.5)}70%{box-shadow:0 0 0 9px rgba(31,168,85,0)}100%{box-shadow:0 0 0 0 rgba(31,168,85,0)}}
.hero h1{font-size:clamp(40px,5vw,70px);line-height:1.02;letter-spacing:-.05em;font-weight:680;max-width:16.5ch}
.hero h1 em{font-style:normal;color:var(--tom);position:relative;white-space:nowrap}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.12em;border-radius:4px;background:var(--tom);opacity:.22;
  transform-origin:left;animation:subraya 1s 1s var(--ease) both}
@keyframes subraya{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .sub{margin-top:24px;font-size:clamp(17px,1.45vw,20px);color:var(--ink2);max-width:48ch;line-height:1.55}
.hero .sub b{color:var(--ink);font-weight:600}
.hero .btns{margin-top:32px}
.sellos{list-style:none;margin:30px 0 0;padding:22px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px 24px;font-size:14px;color:var(--ink2)}
.sellos li{display:inline-flex;align-items:center;gap:8px}
.sellos .ph{font-size:19px;color:var(--tom)}
.escena{position:relative;padding:28px 0 36px}
.marco{position:relative;margin:0 auto;width:min(100%,430px);aspect-ratio:4/5;border-radius:30px;overflow:hidden;
  background:linear-gradient(160deg,#1b2733,#0d141b);box-shadow:0 40px 90px rgba(18,21,24,.25)}
.marco::before{content:"";position:absolute;inset:auto -30% -35% -30%;height:75%;background:radial-gradient(closest-side,rgba(241,83,48,.55),transparent);z-index:0}
.marco img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;object-position:center 12%}
.escena .t-sup{top:0;left:-6%}
.escena .t-der{top:38%;right:-8%}
.escena .t-inf{bottom:0;left:-4%}
.escena .t-izq{top:56%;left:-14%;display:none}
@media(max-width:1180px){.escena .t-der{right:-2%}.escena .t-sup{left:0}}
@media(max-width:900px){.hero .w{grid-template-columns:1fr}.escena{max-width:460px;margin:0 auto;width:100%}
  .escena .t-der{right:0}.escena .t-sup,.escena .t-inf{left:0}.flt{max-width:220px;font-size:12px}.flt b{font-size:14px}}
@media(max-width:480px){.escena .t-der{top:44%}.flt .fi{width:32px;height:32px;font-size:17px}}

/* prueba con gráfica real */
.prueba{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.prueba .w{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:900px){.prueba .w{grid-template-columns:1fr}}
.lista-i{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.lista-i li{display:grid;grid-template-columns:24px 1fr;gap:10px;color:var(--ink2);font-size:16px;line-height:1.5}
.lista-i .ph{font-size:22px;color:var(--tom)}
.lista-i b{color:var(--ink);font-weight:600}

/* cifras propias */
.cifras{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.cifras .w{display:grid;grid-template-columns:repeat(5,1fr)}
.cifras .w>div{padding:26px 18px 24px;border-left:1px solid var(--line)}
.cifras .w>div:first-child{border-left:0;padding-left:0}
.cifras b{display:block;font-size:clamp(28px,3.2vw,42px);font-weight:650;letter-spacing:-.04em;line-height:1}
.cifras b i{font-style:normal;color:var(--tom)}
.cifras span{display:block;margin-top:8px;font-size:13.5px;color:var(--ink3);line-height:1.4;max-width:22ch}
@media(max-width:900px){.cifras .w{grid-template-columns:1fr 1fr}.cifras .w>div{border-left:0;padding-left:0;border-top:1px solid var(--line)}}

/* bloque título genérico */
.blq{padding:clamp(64px,9vw,120px) 0}
.blq h2{font-size:clamp(30px,4vw,52px);line-height:1.06;letter-spacing:-.04em;max-width:20ch}
.blq h2 em{font-style:normal;color:var(--tom)}
.blq .ent{margin-top:16px;font-size:clamp(17px,1.4vw,19px);color:var(--ink2);max-width:60ch}

/* tres buscadores: lista grande */
.tres{margin-top:clamp(36px,5vw,56px);display:grid;gap:0}
.tres a{display:grid;grid-template-columns:56px 1fr 1.2fr auto;gap:24px;align-items:center;padding:28px 0;
  border-top:1px solid var(--line);text-decoration:none;transition:background .2s}
.tres a:last-child{border-bottom:1px solid var(--line)}
.tres .sig{display:block;font-family:var(--mono);font-size:12px;color:var(--tom2);margin-bottom:2px}
.tres a:hover .ico{background:var(--tom);color:#fff}.tres .ico{transition:background .2s,color .2s}
.tres h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.03em}
.tres p{color:var(--ink2);font-size:16px}
.tres .fl{font-size:22px;color:var(--ink3);transition:transform .25s var(--ease),color .2s}
.tres a:hover .fl{transform:translateX(6px);color:var(--tom)}
@media(max-width:820px){.tres a{grid-template-columns:46px 1fr;gap:6px 16px}.tres p{grid-column:2}.tres .fl{display:none}}

/* escalera de servicios: bento */
.bento{margin-top:clamp(36px,5vw,56px);display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(200px,auto);gap:16px}
.bento a{position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--line);background:var(--paper2);
  padding:clamp(22px,2.6vw,30px);text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .3s var(--ease),box-shadow .3s}
.bento a:hover{transform:translateY(-3px);box-shadow:0 18px 48px rgba(18,21,24,.10)}
.bento h3{font-size:clamp(20px,2vw,26px);letter-spacing:-.03em;position:relative}
.bento p{margin-top:8px;color:var(--ink2);font-size:15px;max-width:40ch;position:relative}
.bento .pre{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:var(--tom2);margin-bottom:auto;position:relative}
.bento .ico{margin-bottom:18px}.bento .pre .ph{font-size:15px}
.bento .b1{grid-column:span 4;grid-row:span 2;color:#fff;border:0;background:#1a1d20}
.bento .b1 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.bento .b1::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,21,24,.62) 0%,rgba(18,21,24,.28) 38%,rgba(18,21,24,.9) 100%)}
.bento .b1 h3,.bento .b1 p,.bento .b1 .pre{z-index:1}
.bento .b1 p{color:rgba(255,255,255,.86)}
.bento .b1 .pre{color:#FFB39E}
.bento .b2{grid-column:span 2;grid-row:span 2;color:#fff;border:0;background:#1a1d20}
.bento .b2 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.bento .b2::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,21,24,.55) 0%,rgba(18,21,24,0) 30%,rgba(18,21,24,.92) 100%)}
.bento .b2 h3,.bento .b2 p,.bento .b2 .pre{z-index:1}.bento .b2 p{color:rgba(255,255,255,.86)}.bento .b2 .pre{color:#FFB39E}
.bento .b3{grid-column:span 2;grid-row:span 1}
.bento .b3,.bento .b4{justify-content:flex-start}.bento .b3 .pre,.bento .b4 .pre{margin-bottom:8px}
.bento .b4{grid-column:span 2}
.bento .b5{grid-column:span 2;color:#fff;border:0;background:#1a1d20}
.bento .b5 img{position:absolute;right:-8%;top:-6%;width:78%;border-radius:12px;opacity:.85;transform:rotate(-4deg);transition:transform .5s var(--ease)}
.bento .b5:hover img{transform:rotate(-2deg) scale(1.03)}
.bento .b5::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(26,29,32,0) 20%,rgba(26,29,32,.95) 70%)}.bento .b5 h3,.bento .b5 p,.bento .b5 .pre{z-index:1}
.bento .b5 p{color:rgba(255,255,255,.8)}.bento .b5 .pre{color:#FFB39E}
@media(max-width:900px){.bento{grid-template-columns:1fr}.bento a{grid-column:auto!important;grid-row:auto!important;min-height:220px}
  .bento .b1{min-height:380px}.bento .b5 img{width:70%;right:-10%}}

/* portafolio en carrusel */
.carrusel{margin-top:clamp(32px,4vw,48px);display:grid;grid-auto-flow:column;grid-auto-columns:min(78vw,520px);gap:20px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding:4px clamp(20px,4vw,48px) 20px;scrollbar-width:thin}
.carrusel a{scroll-snap-align:start;text-decoration:none}
.carrusel img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:16px;border:1px solid var(--line);
  transition:transform .35s var(--ease),box-shadow .35s}
.carrusel a:hover img{transform:translateY(-4px);box-shadow:0 20px 50px rgba(18,21,24,.12)}
.carrusel h3{margin-top:14px;font-size:19px;letter-spacing:-.02em}
.carrusel p{margin-top:4px;color:var(--ink2);font-size:15px}
.carrusel p b{color:var(--tom2);font-weight:600}

/* cursos: foto + índice */
.cursos-h{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,64px);align-items:start;margin-top:clamp(32px,4vw,48px)}
.cursos-h img{width:100%;border-radius:20px;display:block;aspect-ratio:4/5;object-fit:cover}
.cursos-h ol{list-style:none;margin:0;padding:0;counter-reset:c}
.cursos-h li{counter-increment:c;display:grid;grid-template-columns:44px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.cursos-h li:last-child{border-bottom:1px solid var(--line)}
.cursos-h li::before{content:counter(c,decimal-leading-zero);font-family:var(--mono);font-size:13px;color:var(--tom2);padding-top:4px}
.cursos-h li b{display:block;font-size:17.5px;letter-spacing:-.015em}
.cursos-h li span{display:block;color:var(--ink2);font-size:15px;margin-top:2px}
@media(max-width:860px){.cursos-h{grid-template-columns:1fr}.cursos-h img{aspect-ratio:16/10}}

/* investigación propia */
.inv{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.inv .w{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
.inv .num{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.inv .num div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.inv .num b{display:block;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.04em;font-weight:650;line-height:1}
.inv .num span{display:block;margin-top:8px;font-size:14px;color:var(--ink3)}
.inv .num div:first-child{grid-column:span 2;background:var(--ink);color:#fff;border:0}
.inv .num div:first-child span{color:rgba(255,255,255,.7)}
.inv .num .ico{margin-bottom:14px;background:rgba(255,255,255,.1);color:#fff}
@media(max-width:860px){.inv .w{grid-template-columns:1fr}}

/* sobre mí corto */
.yo{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(28px,5vw,64px);align-items:center}
.yo img{width:100%;border-radius:20px;aspect-ratio:3/4;object-fit:cover;display:block}
.yo blockquote{max-width:28ch;margin:0 0 22px}
.yo p{color:var(--ink2);max-width:56ch}
.yo p+p{margin-top:14px}
@media(max-width:860px){.yo{grid-template-columns:1fr}.yo img{max-width:420px;aspect-ratio:4/5}}
.faq-inicio .faq{margin-top:0}
/* ajustes v2 */
.cifras b .cnt{display:inline;margin:0;font-size:inherit;color:inherit;max-width:none;line-height:inherit}
.inv .num span.ico{display:inline-grid;margin:0 0 14px;font-size:24px;width:46px;height:46px;background:rgba(255,255,255,.1);color:#fff}
.carrusel{padding-left:max(clamp(20px,4vw,48px),calc((100vw - 1240px)/2 + 48px));scroll-padding-left:max(clamp(20px,4vw,48px),calc((100vw - 1240px)/2 + 48px))}
.bento .b2::after{background:linear-gradient(180deg,rgba(18,21,24,.55) 0%,rgba(18,21,24,0) 25%,rgba(18,21,24,.55) 55%,rgba(18,21,24,.96) 80%)}
.bento .b5 img{width:64%;right:-6%;top:-14%}
.bento .b5 .pre{background:rgba(26,29,32,.85);padding:4px 8px;border-radius:6px;align-self:flex-start}

/* ===== hero azul noche con foto recortada (15-oct, pedido de Roberto) ===== */
.hero.oscuro{background:radial-gradient(1100px 600px at 78% 40%,#1d3354 0%,rgba(29,51,84,0) 62%),linear-gradient(160deg,#0d1828 0%,#0b1422 55%,#101d31 100%);
  color:#fff;padding-bottom:0;border-bottom:1px solid #0b1422}
.hero.oscuro::before{display:none}
.hero.oscuro::after{opacity:.18;background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1px)}
.hero.oscuro .w{align-items:end}
.hero.oscuro .w>div:first-child{padding-bottom:clamp(40px,5vw,72px)}
.hero.oscuro h1{color:#fff}
.hero.oscuro h1 em{color:#FF6A47}
.hero.oscuro h1 em::after{background:#FF6A47;opacity:.35}
.hero.oscuro .sub{color:rgba(255,255,255,.78)}
.hero.oscuro .sub b{color:#fff}
.hero.oscuro .ojo{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.85);box-shadow:none}
.hero.oscuro .sellos{border-top-color:rgba(255,255,255,.14);color:rgba(255,255,255,.78)}
.hero.oscuro .sellos .ph{color:#FF6A47}
.hero.oscuro .escena{padding:0;align-self:end;min-height:clamp(420px,46vw,600px);display:flex;justify-content:center;align-items:flex-end}
.aro{position:absolute;left:50%;bottom:6%;width:min(88%,500px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ff8a6b 0%,#F15330 45%,#c23a1b 100%);box-shadow:0 0 0 18px rgba(241,83,48,.10),0 0 0 40px rgba(241,83,48,.05),0 40px 120px rgba(241,83,48,.35)}
.persona{position:relative;z-index:2;display:block;width:min(100%,560px);height:auto;margin:0 auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.hero.oscuro .t-sup{top:16%;left:0;bottom:auto}
.hero.oscuro .t-inf{bottom:14%;right:0;left:auto}
@media(prefers-reduced-motion:no-preference){.aro{animation:respira 7s ease-in-out infinite}}
@keyframes respira{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.035)}}
@media(max-width:900px){
  .hero.oscuro .w{text-align:center;justify-items:center;align-items:center}
  .hero.oscuro .w>div:first-child{padding-bottom:0}
  .hero.oscuro h1,.hero.oscuro .sub{margin-left:auto;margin-right:auto}
  .hero.oscuro .btns{justify-content:center}
  .hero.oscuro .sellos{justify-content:center}
  .hero.oscuro .escena{min-height:0;width:100%;max-width:440px;margin:8px auto 0}
  .hero.oscuro .t-sup{top:6%;left:0}.hero.oscuro .t-inf{bottom:10%;right:0}
}
@media(max-width:600px){.hero.oscuro .btns{display:grid;width:100%}.hero.oscuro .flt{max-width:190px;padding:9px 12px 9px 9px}.hero.oscuro .flt span{display:none}.hero.oscuro .flt .est{display:flex}}
.persona{-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%)}
@media(max-width:600px){.hero.oscuro .ojo{font-size:11px;padding:6px 12px}}
