/* ═══════════════════════════════════════════════════════════════════
   LIC. FERNANDO ECHEVERRÍA · HÉROE (DEMOS V.2 · ÁREA LEGAL · DEMO 1)
   ≥1025px y horizontal → réplica de la referencia (negro + amarillo,
                           nombre gigante en contorno detrás, cabe en 100svh)
   ≤1024px o vertical   → app móvil/tableta (dock "Consulta tu caso" +
                           5 secciones + pestañas + barra Llamar/WhatsApp)
   Foto: JPG original tal cual; B/N, desvanecido y posición solo con CSS.
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:"Poppins";font-weight:400;font-display:swap;src:url(../fonts/poppins-400.woff) format("woff")}
@font-face{font-family:"Poppins";font-weight:500;font-display:swap;src:url(../fonts/poppins-500.woff) format("woff")}
@font-face{font-family:"Poppins";font-weight:700;font-display:swap;src:url(../fonts/poppins-700.woff) format("woff")}
@font-face{font-family:"Lora";font-weight:400;font-display:swap;src:url(../fonts/lora-400.woff) format("woff")}
@font-face{font-family:"Lora";font-weight:500;font-display:swap;src:url(../fonts/lora-500.woff) format("woff")}
:root{
  --y:#f3e12b;           /* amarillo de la referencia */
  --y-2:#e2cf12;
  --ink:#0c0c0c;         /* negro del fondo */
  --ink-2:#151515;
  --ink-3:#1d1d1d;
  --line:rgba(255,255,255,.1);
  --txt:#f4f4f2;
  --txt-soft:rgba(244,244,242,.66);
  --wa:#25c766;
  --font:"Poppins","Avenir Next","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --serif:"Lora",Georgia,"Times New Roman",serif;
  --ease:cubic-bezier(.22,.8,.24,1);
  --H:max(600px,100svh);
  --pad:16px;
}
@supports not (height:100svh){:root{--H:max(600px,100vh)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink)}
body{margin:0;font-family:var(--font);color:var(--txt);background:var(--ink);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
p,h1,h2,ul{margin:0}
img{display:block}
button{font:inherit}
.fe-sprite{position:absolute;width:0;height:0;overflow:hidden}
.fe-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fe-ic{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fe-ic--fill{fill:currentColor;stroke:none}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--y);outline-offset:3px}
.fe-mark{width:2em;height:2em;flex:none}

/* botones: rectángulos amarillos de esquina recta (como la referencia) */
.fe-btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;height:46px;padding:0 1.35em;border:0;border-radius:2px;font-weight:500;font-size:14px;white-space:nowrap;cursor:pointer;
  transition:translate .3s var(--ease),background-color .25s,box-shadow .3s}
.fe-btn--y{background:var(--y);color:var(--ink)}
.fe-btn--y:hover{translate:0 -2px;background:#fff;box-shadow:0 14px 30px -16px rgba(243,225,43,.55)}
.fe-btn .fe-ic{width:1.05em;height:1.05em;stroke-width:2}

/* ───────────── héroe · escritorio ───────────── */
.fe-hero{position:relative;isolation:isolate;overflow:hidden;height:var(--H);container-type:size;
  background:radial-gradient(ellipse 36cqw 62cqh at 48% 44%,#222 0%,#141414 48%,var(--ink) 100%);
  --side:4.4cqw;--top:2.4cqh;--tb:clamp(52px,7.6cqh,84px);
  --sh:min(166cqh,96cqw);                       /* alto del JPG (2048×2048; el pelo empieza en y≈9.3%) */
  --st:calc(24.5cqh - var(--sh)*.093)}         /* la cabeza arranca al 24% de la pantalla, como en la referencia */

/* barra superior: marca · secciones · agendar */
.fe-topbar{position:absolute;z-index:10;top:var(--top);left:var(--side);right:var(--side);height:var(--tb);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;animation:fade .7s var(--ease) .05s backwards}
.fe-brand{justify-self:start;display:flex;align-items:center;gap:.75em;font-size:clamp(13px,min(.95cqw,1.8cqh),18px)}
.fe-brand .fe-mark{width:2.1em;height:2.1em}
.fe-brand__txt{display:flex;flex-direction:column;line-height:1}
.fe-brand__txt b{font-weight:500;font-size:1em;letter-spacing:.14em;text-transform:uppercase}
.fe-brand__txt small{display:none}
.fe-menu{display:flex;align-items:center;gap:clamp(8px,2.6cqw,56px)}
.fe-menu>a,.fe-dd>a{position:relative;display:inline-flex;align-items:center;gap:.5em;padding:.6em 0;font-size:clamp(11px,min(.74cqw,1.42cqh),13.5px);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--txt);transition:color .2s}
.fe-menu>a::after,.fe-dd>a::after{content:"";position:absolute;left:0;right:100%;bottom:.15em;height:1px;background:var(--y);transition:right .35s var(--ease)}
.fe-menu>a:hover,.fe-dd:hover>a,.fe-dd:focus-within>a{color:var(--y)}
.fe-menu>a:hover::after,.fe-dd:hover>a::after,.fe-menu>a.is-cur::after{right:0}
.fe-dd{position:relative}
.fe-dd>a .fe-ic{width:1.15em;height:1.15em;stroke-width:1.6;transition:rotate .3s var(--ease)}
.fe-dd:hover>a .fe-ic,.fe-dd:focus-within>a .fe-ic{rotate:180deg}
.fe-dd__pn{position:absolute;top:100%;left:50%;translate:-50% 8px;min-width:250px;padding:10px;display:grid;background:rgba(18,18,18,.96);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 50px -24px #000;opacity:0;visibility:hidden;transition:opacity .25s,translate .3s var(--ease),visibility .25s}
.fe-dd:hover .fe-dd__pn,.fe-dd:focus-within .fe-dd__pn{opacity:1;visibility:visible;translate:-50% 0}
.fe-dd__pn a{padding:.8em 1em;font-size:13.5px;color:var(--txt-soft);border-left:2px solid transparent;transition:color .2s,border-color .2s,background-color .2s}
.fe-dd__pn a:hover{color:var(--txt);border-color:var(--y);background:rgba(255,255,255,.04)}
.fe-topbar__cta{justify-self:end;height:clamp(38px,5.4cqh,56px);padding:0 clamp(14px,1.3cqw,26px);font-size:clamp(12.5px,min(.82cqw,1.6cqh),15.5px)}
.fe-share,.fe-h1{display:none}

/* escena: nombre gigante + abogado */
.fe-stage{position:absolute;inset:0;z-index:1}
.fe-giant{position:absolute;z-index:0;left:var(--side);right:var(--side);top:13.4cqh;height:31cqh;width:calc(100% - 2*var(--side));overflow:visible;
  animation:giant-in 1.4s var(--ease) .1s backwards}
.fe-giant--m{display:none}
@keyframes giant-in{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}

/* JPG original tal cual: blanco y negro + desvanecido hacia el negro (solo CSS) */
.fe-subject{position:absolute;z-index:1;left:50.5%;top:var(--st);translate:-50% 0;height:var(--sh);width:auto;max-width:none;pointer-events:none;
  filter:grayscale(1) contrast(1.24) brightness(.94);
  -webkit-mask-image:linear-gradient(180deg,transparent 3.5%,#000 10.5%,#000 40%,transparent 57%),radial-gradient(ellipse 33% 52% at 47% 37%,#000 52%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 3.5%,#000 10.5%,#000 40%,transparent 57%),radial-gradient(ellipse 33% 52% at 47% 37%,#000 52%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  animation:subject-in 1.3s var(--ease) .25s backwards}
@keyframes subject-in{from{opacity:0;transform:translateY(3%)}}

/* texto principal (izquierda) */
.fe-copy{position:absolute;z-index:4;left:9cqw;top:49.5cqh;width:min(30cqw,62cqh)}
.fe-head{font-family:var(--serif);font-weight:400;font-size:min(5.1cqh,2.85cqw);line-height:1.12;letter-spacing:.005em;text-transform:uppercase;color:var(--txt);
  text-shadow:0 2px 24px rgba(0,0,0,.55);animation:rise .9s var(--ease) .55s backwards}
.fe-lead{margin-top:3.4cqh;max-width:24em;font-size:clamp(12px,min(.86cqw,1.62cqh),17px);line-height:1.62;color:var(--txt-soft);text-shadow:0 1px 14px #000;animation:rise .9s var(--ease) .7s backwards}
.fe-btn--lg{margin-top:4.6cqh;height:clamp(46px,7cqh,76px);padding:0 clamp(18px,1.6cqw,32px);font-size:clamp(13px,min(.9cqw,1.72cqh),17px);animation:rise .9s var(--ease) .85s backwards}

/* insignia giratoria con flecha */
.fe-badge{position:absolute;z-index:4;right:10.5cqw;top:51cqh;width:min(15.5cqh,9cqw);aspect-ratio:1;display:grid;place-items:center;color:var(--txt);
  animation:fade 1s var(--ease) 1s backwards}
.fe-badge__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:spin 26s linear infinite}
.fe-badge__ring text{fill:currentColor;font-family:var(--font);font-size:8.6px;font-weight:500;letter-spacing:.1em}
.fe-badge__arrow{position:relative;z-index:1;width:18%;height:auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:translate .4s var(--ease),stroke .3s}
.fe-badge::before{content:"";position:absolute;inset:21%;border:1px solid rgba(255,255,255,.14);border-radius:50%;transition:border-color .3s,background-color .3s}
.fe-badge:hover::before{border-color:var(--y);background:rgba(243,225,43,.06)}
.fe-badge:hover .fe-badge__arrow{translate:0 10%;stroke:var(--y)}
@keyframes spin{to{rotate:360deg}}

/* solo celular */
.fe-dock,.fe-soc,.fe-mobile-only{display:none}

/* ───────────── navegación fija de escritorio ───────────── */
.fe-snav{position:fixed;z-index:60;top:12px;left:50%;translate:-50% -160%;width:min(1180px,calc(100% - 24px));
  display:flex;align-items:center;gap:18px;padding:8px 8px 8px 16px;
  background:rgba(14,14,14,.86);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--line);box-shadow:0 20px 40px -24px #000;
  opacity:0;visibility:hidden;transition:translate .45s var(--ease),opacity .3s,visibility .3s}
.fe-snav.is-on{translate:-50% 0;opacity:1;visibility:visible}
.fe-snav__brand{display:flex;align-items:center;gap:10px;font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.fe-snav__brand .fe-mark{width:30px;height:30px}
.fe-snav__links{flex:1;display:flex;justify-content:center;gap:2px}
.fe-snav__links a{padding:.7em .95em;font-size:13px;font-weight:500;color:var(--txt-soft);transition:background-color .2s,color .2s}
.fe-snav__links a:hover{color:var(--txt);background:rgba(255,255,255,.06)}
.fe-snav__links a.fe-is-cur{background:var(--y);color:var(--ink)}
.fe-snav .fe-btn{height:42px;font-size:13.5px}

/* ───────────── movimiento ───────────── */
@keyframes rise{from{opacity:0;translate:0 16px}}
@keyframes fade{from{opacity:0}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(243,225,43,.7)}70%,100%{box-shadow:0 0 0 16px rgba(243,225,43,0)}}

/* ═══════════════════════════════════════════════════════════════════
   APP MÓVIL / TABLETA (≤1024px o vertical)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width:1024px),(max-aspect-ratio:10/11){
  :root{--pad:16px;--mbar-h:calc(72px + env(safe-area-inset-bottom,0px))}
  body{padding-bottom:var(--mbar-h)}
  .fe-desktop-only{display:none!important}
  .fe-mobile-only{display:revert}

  /* héroe + bloque de navegación caben completos arriba de la barra Llamar/WhatsApp */
  .fe-hero{height:calc(100svh - var(--mbar-h));min-height:540px;container-type:normal;display:flex;flex-direction:column;
    background:radial-gradient(ellipse 80% 44% at 48% 40%,#232323 0%,#131313 55%,var(--ink) 100%)}

  /* barra superior: marca + compartir */
  .fe-topbar{position:relative;inset:auto;margin-top:env(safe-area-inset-top,0px);height:auto;grid-template-columns:1fr auto;padding:var(--pad) var(--pad) 0}
  .fe-menu,.fe-topbar__cta{display:none}
  .fe-brand{font-size:clamp(13px,3.7vw,17px)}
  .fe-brand .fe-mark{width:2.6em;height:2.6em}
  .fe-brand__txt b{letter-spacing:.12em}
  .fe-brand__txt small{display:block;margin-top:.45em;font-size:.74em;letter-spacing:.04em;color:var(--txt-soft)}
  .fe-share{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:none;color:var(--txt);cursor:pointer;transition:background-color .25s,color .25s}
  .fe-share .fe-ic{width:19px;height:19px}
  .fe-share:active{background:var(--y);color:var(--ink);border-color:var(--y)}

  /* "Lic. Fernando" + nombre gigante en contorno (lo especial de la referencia llevado al celular) */
  .fe-h1{display:flex;align-items:center;justify-content:center;gap:12px;position:relative;z-index:3;margin-top:clamp(8px,2.4vw,20px);
    font-family:var(--serif);font-weight:400;font-size:clamp(19px,5.4vw,32px);line-height:1.1;letter-spacing:.01em;animation:rise .8s var(--ease) .1s backwards}
  .fe-h1::before,.fe-h1::after{content:"";width:clamp(22px,7vw,48px);height:1px;background:var(--y)}

  .fe-stage{position:relative;inset:auto;flex:1 1 0;min-height:0;overflow:hidden;container-type:size}
  .fe-giant{left:var(--pad);right:var(--pad);width:calc(100% - 2*var(--pad));top:3cqh;height:min(34cqh,46cqw)}
  .fe-giant--d{display:none}
  .fe-giant--m{display:block}

  /* el abogado: la foto se ajusta al espacio que queda (cabeza bajo el nombre, hasta el pecho/manos) */
  .fe-subject{--sh:min(172cqh,172cqw);left:50.5%;top:calc(min(34cqh,46cqw)*.62 + 3cqh - var(--sh)*.093);
    -webkit-mask-image:linear-gradient(180deg,transparent 3.5%,#000 10.5%,#000 44%,transparent 60%),radial-gradient(ellipse 36% 54% at 47% 37%,#000 55%,transparent 100%);
            mask-image:linear-gradient(180deg,transparent 3.5%,#000 10.5%,#000 44%,transparent 60%),radial-gradient(ellipse 36% 54% at 47% 37%,#000 55%,transparent 100%);
    animation:subject-in 1.1s var(--ease) .2s backwards}

  /* insignia giratoria (sobre el saco, lejos de la cara) */
  .fe-badge{right:3.5%;left:auto;top:auto;bottom:calc(26px + 4%);width:clamp(78px,21vw,128px);z-index:4}
  .fe-badge::before{background:rgba(12,12,12,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
  .fe-copy{display:none}

  /* redes flotantes */
  .fe-soc{display:block;position:absolute;z-index:4;inset:0;pointer-events:none}
  .fe-soc a{pointer-events:auto;position:absolute;display:grid;place-items:center;width:clamp(42px,11.5vw,58px);aspect-ratio:1;border-radius:50%;color:var(--ink);background:var(--y);
    box-shadow:0 14px 26px -12px rgba(0,0,0,.9),0 0 0 4px rgba(243,225,43,.16);
    animation:soc-in .7s cubic-bezier(.3,1.6,.5,1) backwards,soc-float 5.5s ease-in-out infinite}
  .fe-soc .fe-ic{width:46%;height:46%}
  .fe-soc__wa{left:4.5%;top:41%;animation-delay:1s,0s!important}
  .fe-soc__in{right:5%;top:calc(min(34cqh,46cqw) + 10cqh);animation-delay:1.15s,-1.8s!important}
  .fe-soc__ig{left:7%;top:64%;animation-delay:1.3s,-3.6s!important}

  /* dock tipo hoja inferior */
  .fe-dock{display:grid;position:relative;z-index:5;margin-top:-26px;gap:10px;padding:18px var(--pad) var(--pad);
    background:var(--ink-2);border-top:1px solid var(--line);border-radius:26px 26px 0 0;box-shadow:0 -18px 34px -18px #000;animation:dock-up .9s var(--ease) .45s backwards}
  @keyframes dock-up{from{transform:translateY(80px)}}
  .fe-cta,.fe-sections{width:100%;max-width:640px;margin-inline:auto}
  .fe-cta{display:grid;grid-template-columns:1fr auto;grid-template-areas:"title go" "sub go";align-items:center;column-gap:12px;
    padding:14px 14px 14px 20px;border-radius:20px;background:var(--y);color:var(--ink);box-shadow:0 22px 40px -24px rgba(243,225,43,.6);animation:rise .7s var(--ease) .7s backwards}
  .fe-cta__title{grid-area:title;font-family:var(--serif);font-weight:500;font-size:clamp(19px,5.4vw,24px);line-height:1.1;letter-spacing:-.005em}
  .fe-cta__sub{grid-area:sub;margin-top:4px;font-size:12.5px;line-height:1.35;color:rgba(12,12,12,.72)}
  .fe-go{grid-area:go;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--y);animation:ring 2.4s ease-out 2.4s 3}
  .fe-go .fe-ic{width:23px;height:23px;stroke-width:2.1}

  .fe-sections{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
  .fe-card{display:flex;border-radius:18px;background:var(--ink-3);border:1px solid rgba(255,255,255,.06);color:var(--txt);animation:rise .7s var(--ease) backwards;animation-delay:calc(.75s + var(--i,0)*.07s);transition:transform .2s var(--ease),background-color .2s}
  .fe-card:active{transform:scale(.97);background:#262626}
  .fe-card__ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;background:rgba(243,225,43,.12);color:var(--y)}
  .fe-card__ic .fe-ic{width:19px;height:19px}
  .fe-card__title{font-weight:500;font-size:clamp(13px,3.7vw,15.5px);line-height:1.15}
  .fe-card--row{grid-column:span 3;align-items:center;gap:12px;padding:10px 12px 10px 10px;min-height:58px}
  .fe-card--tall{grid-column:span 2;flex-direction:column;justify-content:space-between;gap:12px;min-height:84px;padding:12px}
  .fe-card--tall .fe-card__ic{width:32px;height:32px;border-radius:10px}

  /* pestañas arriba (aparecen al salir del héroe) */
  .fe-appbar{display:flex;position:fixed;z-index:60;top:calc(8px + env(safe-area-inset-top,0px));left:50%;width:min(720px,calc(100% - 16px));
    align-items:center;gap:8px;padding:6px;border-radius:18px;
    background:rgba(16,16,16,.9);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
    border:1px solid var(--line);box-shadow:0 16px 32px -18px #000;
    translate:-50% -160%;opacity:0;visibility:hidden;transition:translate .45s var(--ease),opacity .3s,visibility .3s}
  .fe-appbar.is-on{translate:-50% 0;opacity:1;visibility:visible}
  .fe-appbar__brand{flex:none;width:40px;height:40px;display:grid;place-items:center}
  .fe-appbar__brand svg{width:34px;height:34px}
  .fe-appbar__tabs{flex:1;min-width:0;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-right:14px;
    -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
  .fe-appbar__tabs::-webkit-scrollbar{display:none}
  .fe-appbar__tabs a{flex:none;padding:.72em 1.05em;border-radius:12px;font-size:13.5px;font-weight:500;white-space:nowrap;color:var(--txt-soft);transition:background-color .2s,color .2s}
  .fe-appbar__tabs a.fe-is-cur{background:var(--y);color:var(--ink)}

  /* barra fija inferior: Llamar + WhatsApp */
  .fe-mbar{display:grid;position:fixed;z-index:70;left:50%;translate:-50% 0;bottom:0;width:min(560px,100%);grid-template-columns:1fr 1fr;gap:10px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(14,14,14,.92);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
    border-top:1px solid var(--line);box-shadow:0 -16px 36px -20px #000}
  .fe-mbar__btn{display:flex;align-items:center;justify-content:center;gap:.6em;height:52px;border-radius:15px;font-weight:700;font-size:16px;transition:transform .2s var(--ease)}
  .fe-mbar__btn:active{transform:scale(.97)}
  .fe-mbar__btn .fe-ic{width:21px;height:21px}
  .fe-mbar__btn--call{background:var(--y);color:var(--ink)}
  .fe-mbar__btn--wa{background:linear-gradient(160deg,#25c766,#128c44);color:#fff;box-shadow:0 12px 20px -14px rgba(18,140,68,.95)}
}
@media (min-width:561px) and (max-width:1024px){ .fe-mbar{border-radius:24px 24px 0 0} }
/* celulares bajitos: dock compacto para que todo quepa en la primera pantalla */
@media (max-width:1024px) and (max-height:780px),(max-aspect-ratio:10/11) and (max-height:780px){
  .fe-dock{gap:8px;padding-top:16px}
  .fe-cta{padding:11px 12px 11px 18px}
  .fe-cta__sub{font-size:12px}
  .fe-go{width:44px;height:44px}
  .fe-card--row{min-height:52px;padding:8px 10px 8px 8px}
  .fe-card--tall{min-height:74px;gap:8px;padding:10px}
  .fe-h1{margin-top:6px}
}
@media (max-width:360px){
  .fe-card__title{font-size:12.5px}
  .fe-card--tall{padding:10px}
}
/* tableta: más aire */
@media (min-width:700px) and (max-width:1024px){
  .fe-brand{font-size:17px}
  .fe-sections{gap:10px}
  .fe-card--row{min-height:64px}
  .fe-card--tall{min-height:92px}
}
@keyframes soc-in{from{opacity:0;transform:scale(.2)}}
@keyframes soc-float{0%,100%{translate:0 0;rotate:0deg}25%{translate:3px -9px;rotate:-6deg}50%{translate:0 -4px;rotate:0deg}75%{translate:-3px -10px;rotate:6deg}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}