/* Eben-ezer · enlaces (estilo Linktree). Colores y tipografía de la web principal. */
@font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url('assets/fonts/barlow-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url('assets/fonts/barlow-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-weight:700;font-display:swap;src:url('assets/fonts/barlow-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url('assets/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2')}

:root{
  --azul:#002FA6; --cobalto:#3560D0; --cielo:#A8BDF0; --noche:#0B1D4D; --fondo:#071435;
  --wa:#128C4A; --texto:#fff; --suave:#C9D6F5;
  --ancho:520px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;font-family:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--texto);line-height:1.4;background:var(--fondo);
  background-image:
    radial-gradient(900px 520px at 50% -8%,rgba(53,96,208,.45),transparent 70%),
    radial-gradient(700px 500px at 100% 100%,rgba(0,47,166,.4),transparent 70%),
    linear-gradient(180deg,#0B1D4D 0%,#071435 100%);
  background-repeat:no-repeat;background-color:var(--fondo)}
a{color:inherit;-webkit-tap-highlight-color:transparent}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid #8FB2FF;outline-offset:3px}

.pagina{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 20px max(32px,env(safe-area-inset-bottom));position:relative}

/* ---- Portada con la foto de la grúa ---- */
.portada{position:relative;margin:0 -20px;height:clamp(190px,46vw,260px);overflow:hidden}
.portada__foto{position:absolute;inset:0;background:url('assets/img/grua.jpg') center 38%/cover no-repeat;transform:scale(1.04)}
.portada::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,20,53,.15) 0%,rgba(7,20,53,.55) 62%,var(--fondo) 100%)}
.compartir{position:absolute;top:max(14px,env(safe-area-inset-top));right:18px;z-index:2;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(11,29,77,.55);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,transform .2s}
.compartir:hover{background:rgba(53,96,208,.7)}
.compartir:active{transform:scale(.94)}
.compartir svg{width:22px;height:22px}

/* ---- Perfil ---- */
.perfil{position:relative;z-index:1;margin-top:-62px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.perfil__logo{width:min(78%,300px);padding:14px 20px;border-radius:14px;background:var(--noche);border:1px solid rgba(168,189,240,.28);box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 6px rgba(53,96,208,.12);line-height:0}
.perfil__logo img{width:100%;height:auto;display:block}
.perfil__texto{margin:6px 0 0;font-size:18px;color:var(--suave);max-width:34ch}
.perfil__texto strong{color:#fff}
.insignias{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.insignias li{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(168,189,240,.25);font-size:14px;font-weight:600;color:#E7EEFF}
.insignias b{font-family:'Barlow Condensed',sans-serif;font-size:19px;letter-spacing:.3px;color:#fff}
.punto{width:8px;height:8px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:pulso 2s infinite}
@keyframes pulso{70%{box-shadow:0 0 0 9px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}

/* ---- Botones ---- */
.enlaces{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.boton{--c:var(--azul);position:relative;display:flex;align-items:center;gap:14px;min-height:72px;padding:12px 16px;border-radius:14px;text-decoration:none;color:#fff;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.boton::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s ease}
.boton:hover{transform:translateY(-2px);border-color:rgba(168,189,240,.6);background:rgba(255,255,255,.12);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.boton:hover::before{transform:translateX(120%)}
.boton:active{transform:scale(.985)}
.boton__ico{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--azul);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.boton__ico svg{width:24px;height:24px}
.boton__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.boton__txt b{font-size:18px;font-weight:700;line-height:1.2}
.boton__txt small{font-size:14px;color:var(--suave);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boton__flecha{flex:none;width:20px;height:20px;color:var(--cielo);transition:transform .18s}
.boton:hover .boton__flecha{transform:translateX(4px)}

/* principales */
.boton--llamar{background:#fff;color:var(--noche);border-color:#fff;min-height:80px;box-shadow:0 14px 34px rgba(0,0,0,.4)}
.boton--llamar:hover{background:#F3F7FF;border-color:#fff}
.boton--llamar .boton__ico{background:var(--azul)}
.boton--llamar .boton__txt b{font-size:21px}
.boton--llamar .boton__txt small{color:#3B4A73}
.boton--llamar .boton__flecha{color:var(--azul)}
.boton--wa{background:var(--wa);border-color:rgba(255,255,255,.35);min-height:80px;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.boton--wa:hover{background:#0E7A40;border-color:#fff}
.boton--wa .boton__ico{background:rgba(255,255,255,.18)}
.boton--wa .boton__ico svg{width:28px;height:28px}
.boton--wa .boton__txt b{font-size:21px}
.boton--wa .boton__txt small,.boton--wa .boton__flecha{color:#E4F6EB}

/* redes: color de marca solo en el ícono */
.boton--ig .boton__ico{background:linear-gradient(45deg,#F9A03F,#E1306C 50%,#7A3FD0)}
.boton--fb .boton__ico{background:#1877F2}

.separador{display:flex;align-items:center;gap:12px;margin:10px 0 0;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--cielo)}
.separador::before,.separador::after{content:"";flex:1;height:1px;background:rgba(168,189,240,.28)}

/* ---- Pie ---- */
.pie{margin-top:34px;text-align:center;font-size:14px;color:var(--suave);display:flex;flex-direction:column;gap:6px;align-items:center}
.pie p{margin:0}
.credito{font-size:12.5px;opacity:.95}
.credito a{display:inline-block;padding:13px 6px;color:#8FB2FF;font-weight:700;text-decoration:none;text-shadow:0 0 6px rgba(79,128,255,.85),0 0 14px rgba(0,47,166,.9);transition:text-shadow .2s,color .2s}
.credito a:hover,.credito a:focus-visible{color:#BFD3FF;text-shadow:0 0 8px rgba(120,160,255,1),0 0 20px rgba(53,96,208,1)}

/* ---- Aviso al copiar ---- */
.aviso{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translate(-50%,30px);opacity:0;pointer-events:none;background:#fff;color:var(--noche);font-weight:700;font-size:15px;padding:12px 20px;border-radius:999px;box-shadow:0 12px 30px rgba(0,0,0,.4);transition:opacity .25s,transform .25s;z-index:20}
.aviso.ver{opacity:1;transform:translate(-50%,0)}

/* ---- Entrada escalonada (solo con JS) ---- */
.js .perfil>*,.js .enlaces>*,.js .pie{opacity:0;transform:translateY(14px)}
.js.listo .perfil>*,.js.listo .enlaces>*,.js.listo .pie{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.js.listo .boton:hover{transform:translateY(-2px)}

/* ---- Pantallas grandes: tarjeta centrada ---- */
@media (min-width:640px){
  body{padding:32px 0}
  .pagina{background:rgba(7,20,53,.55);border:1px solid rgba(168,189,240,.2);border-radius:24px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);padding-bottom:34px}
  .portada{height:260px}
}
@media (max-width:360px){
  .boton{padding:10px 12px;gap:12px}
  .boton__ico{width:42px;height:42px}
  .boton__txt b{font-size:17px}
  .boton--llamar .boton__txt b,.boton--wa .boton__txt b{font-size:19px}
  .perfil__texto{font-size:17px}
}
@media (max-height:520px) and (orientation:landscape){.portada{height:150px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .perfil>*,.js .enlaces>*,.js .pie{opacity:1;transform:none}
}