/* ═════════ Ferromateriales El Castillo · capa visual y efectos ═════════ */

/* textura de plano metálico en todo el fondo */
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.6;
  background-image:linear-gradient(rgba(120,128,140,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(120,128,140,.075) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 80%)}

/* barra de progreso de lectura arriba */
.progreso{position:fixed;left:0;top:0;height:3px;width:100%;z-index:100;transform-origin:left;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,var(--verde2),var(--verde-luz),#fff);box-shadow:0 0 12px rgba(155,224,106,.9)}

/* palabras gigantes de fondo */
.bloque{position:relative}
.palabra-fondo{position:absolute;top:30px;right:-10px;font-family:Archivo;font-weight:900;font-size:clamp(70px,13vw,200px);line-height:1;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.08);pointer-events:none;white-space:nowrap;user-select:none;z-index:0;
  transform:translateX(var(--px,0));transition:transform .2s linear}
.palabra-fondo.claro{-webkit-text-stroke:1.5px rgba(43,47,54,.08)}
.bloque-cab,.carrusel,.galeria,.cinta-videos,.cats{position:relative;z-index:1}
.bloque-cab h2{background:linear-gradient(100deg,var(--tinta) 0%,#555d69 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.bloque-oscuro .bloque-cab h2,.ubic-cab h2{background:linear-gradient(100deg,#fff 30%,var(--verde-luz) 130%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* aparición al bajar */
.rev{opacity:0;transform:translateY(46px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
.rev.vista{opacity:1;transform:none}
.rev .cat,.rev .tj-luz{opacity:0}
.rev.vista .cat,.rev.vista .tj-luz{opacity:1;animation:sube-tj .8s calc(var(--i,0) * 80ms) cubic-bezier(.2,.8,.2,1) backwards}
@keyframes sube-tj{from{opacity:0;transform:translateY(28px) scale(.96)}}
.cat,.tj-luz{transition:transform .25s,box-shadow .35s,border-color .35s,background .35s}

/* chispas del hero */
.chispas{position:absolute;inset:0;z-index:2;pointer-events:none;width:100%;height:100%}

/* destello metálico que recorre tarjetas y botones */
.atajos a,.btn-verde,.btn-luz,.cat,.tj-luz{position:relative;overflow:hidden}
.atajos a:after,.btn-verde:after,.btn-luz:after,.cat:after,.tj-luz:after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transition:left .9s ease}
.tj-luz:after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}
.btn-verde:after{animation:destello 4.5s ease-in-out infinite}
@keyframes destello{0%,70%{left:-70%}100%{left:140%}}

/* luz que sigue al cursor dentro de las tarjetas */
.foco{--mx:50%;--my:50%}
.foco:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;z-index:0;
  background:radial-gradient(260px circle at var(--mx) var(--my),rgba(155,224,106,.32),transparent 60%)}
.foco:hover:before{opacity:1}
.foco>*{position:relative;z-index:1}

/* categorías */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;perspective:900px}
.cat{display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left;padding:24px 22px 20px;border-radius:22px;
  background:linear-gradient(160deg,#fff 0%,#f3f5f7 60%,#e7eaee 100%);border:1px solid rgba(255,255,255,.95);box-shadow:var(--luz);transform-style:preserve-3d}
.cat-ico{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;color:#10300a;transition:box-shadow .3s,transform .4s;
  background:linear-gradient(145deg,var(--verde-luz),var(--verde) 55%,var(--verde2));box-shadow:0 10px 24px -10px rgba(76,154,39,.9),0 1px 0 rgba(255,255,255,.7) inset}
.cat-ico .ico{width:28px;height:28px}
.cat b{font-family:Archivo;font-size:19px;margin-top:6px}
.cat small{font-size:14px;color:var(--gris);line-height:1.45}
.cat-ir{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:8px;font-weight:700;font-size:13.5px;color:var(--verde2);opacity:.75;transition:gap .3s,opacity .3s}

/* ── ubicación ── */
.ubic{position:relative;margin-top:100px;padding:110px 20px 100px;color:#fff;background:#14171c center/cover no-repeat;background-attachment:fixed;overflow:hidden}
.ubic-luz{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 380px at 15% 10%,rgba(155,224,106,.2),transparent 70%),radial-gradient(600px 400px at 90% 90%,rgba(255,255,255,.08),transparent 70%)}
.ubic .palabra-fondo{top:40px}
.ubic-in{position:relative;z-index:1;max-width:var(--anc);margin:0 auto}
.ubic-cab{max-width:680px;margin-bottom:40px}
.ubic-cab .eti{color:var(--verde-luz)}
.ubic-cab h2{font-size:clamp(34px,4.6vw,58px);font-weight:900;margin:12px 0}
.ubic-cab p{color:#c9ced6;font-size:17.5px}
.ubic-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:24px;align-items:stretch}
.ubic-mapa{position:relative;min-height:480px}
.ubic-marco{position:absolute;inset:0;border-radius:28px;overflow:hidden;padding:5px;isolation:isolate;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 70px -20px rgba(155,224,106,.55);transition:box-shadow .4s}
.ubic-marco:before{content:"";position:absolute;inset:-50%;z-index:-1;
  background:conic-gradient(from var(--giro,0deg),var(--verde-luz),rgba(255,255,255,.15),rgba(255,255,255,.05),var(--verde),rgba(255,255,255,.15),var(--verde-luz));animation:gira 6s linear infinite}
@property --giro{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes gira{to{--giro:360deg}}
.ubic-marco iframe{width:100%;height:100%;border:0;border-radius:23px;filter:grayscale(.3) contrast(1.05);display:block}
.ubic-placa{position:absolute;left:22px;right:22px;bottom:22px;display:flex;align-items:center;gap:14px;padding:14px 14px 14px 16px;border-radius:20px;z-index:2;
  background:rgba(18,21,26,.8);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.14)}
.ubic-placa>div{flex:1;min-width:0}
.ubic-placa small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--verde-luz)}
.ubic-placa b{display:block;font-size:17px}
.ubic-placa .btn{padding:12px 18px}
.pulso{position:relative;flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#10300a;background:linear-gradient(145deg,var(--verde-luz),var(--verde2))}
.pulso .ico{width:24px;height:24px;position:relative;z-index:1}
.pulso i,.pulso:before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--verde-luz);animation:onda 2.4s ease-out infinite}
.pulso:before{animation-delay:1.2s}
@keyframes onda{from{transform:scale(1);opacity:.9}to{transform:scale(2.4);opacity:0}}
.ubic-tarjetas{display:flex;flex-direction:column;gap:14px}
.tj-luz{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:22px;text-decoration:none;color:#fff;text-align:left;width:100%;flex:1;
  background:linear-gradient(150deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.tj-ico{flex:none;width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:rgba(155,224,106,.16);color:var(--verde-luz);transition:background .3s,color .3s,box-shadow .3s}
.tj-ico .ico{width:26px;height:26px}
.tj-luz small{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#aab2bd}
.tj-luz b{display:block;font-family:Archivo;font-size:22px;letter-spacing:-.01em;margin-top:2px}
.tj-luz b em{font-family:Inter;font-style:normal;font-weight:500;font-size:15px;color:#c9ced6}
.tj-ir{margin-left:auto;width:22px;height:22px;opacity:.5;transition:transform .3s,opacity .3s}
.tj-wa{background:linear-gradient(150deg,rgba(108,191,60,.42),rgba(76,154,39,.15));border-color:rgba(155,224,106,.5)}
.tj-wa .tj-ico{background:linear-gradient(145deg,var(--verde-luz),var(--verde2));color:#10300a}

/* ── encendido al pasar el cursor ── */
@media (hover:hover){
  .tj-luz:hover{transform:translateX(6px);border-color:rgba(155,224,106,.85);background:linear-gradient(150deg,rgba(155,224,106,.24),rgba(255,255,255,.06));
    box-shadow:0 0 0 1px rgba(155,224,106,.5),0 0 44px -6px rgba(155,224,106,.75)}
  .tj-luz:hover:after,.cat:hover:after,.atajos a:hover:after,.btn-luz:hover:after{left:140%}
  .tj-luz:hover .tj-ico{background:linear-gradient(145deg,var(--verde-luz),var(--verde2));color:#10300a;box-shadow:0 0 26px rgba(155,224,106,.95)}
  .tj-luz:hover .tj-ir{opacity:1;transform:translate(3px,-3px)}
  .ubic-marco:hover{box-shadow:0 40px 90px -30px rgba(0,0,0,.8),0 0 100px -10px rgba(155,224,106,.85)}
  .cat:hover{border-color:rgba(108,191,60,.6);box-shadow:0 0 0 1.5px rgba(108,191,60,.5),0 0 50px -8px rgba(155,224,106,.85),0 30px 50px -24px rgba(30,36,46,.45)}
  .cat:hover .cat-ico{transform:translateZ(30px) rotate(-6deg) scale(1.08);box-shadow:0 0 34px rgba(155,224,106,1),0 1px 0 rgba(255,255,255,.7) inset}
  .cat:hover .cat-ir{gap:10px;opacity:1}
  .hero-texto h1 em{transition:filter .4s}
  .hero-texto:hover h1 em{filter:drop-shadow(0 0 18px rgba(155,224,106,.9))}
}

/* el hero entra con fuerza */
.hero-texto>*{animation:entra 1.1s cubic-bezier(.2,.8,.2,1) both}
.hero-texto>*:nth-child(2){animation-delay:.12s}.hero-texto>*:nth-child(3){animation-delay:.24s}.hero-texto>*:nth-child(4){animation-delay:.36s}
@keyframes entra{from{opacity:0;transform:translateY(34px);filter:blur(6px)}}
.hero-texto h1 em{background:linear-gradient(90deg,#fff,var(--verde-luz),#fff,var(--verde-luz));background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brillo-texto 6s linear infinite}
@keyframes brillo-texto{to{background-position:300% 0}}
.hero .scroll-abajo{position:absolute;left:50%;bottom:64px;z-index:3;width:26px;height:42px;border:2px solid rgba(255,255,255,.6);border-radius:14px;transform:translateX(-50%)}
.hero .scroll-abajo:after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:rueda 1.6s ease-in-out infinite}
@keyframes rueda{to{transform:translateY(14px);opacity:0}}

/* el botón del chat con halo */


/* galería con inclinación 3D en la foto activa */
.gal-foto.activa{transform-style:preserve-3d}
.gal-foto.activa.inclina{transition:transform .15s,opacity .7s,filter .7s,box-shadow .7s}

@media (max-width:980px){.cats{grid-template-columns:repeat(2,1fr)}.ubic-grid{grid-template-columns:1fr}.ubic-mapa{min-height:420px}.ubic{background-attachment:scroll}}
@media (max-width:760px){
  .cats{gap:10px}.cat{padding:18px 16px}.cat small{font-size:13px}.cat-ico{width:48px;height:48px}.cat b{font-size:17px}
  .ubic{padding:80px 16px 70px}.ubic-mapa{min-height:440px}
  .ubic-placa{flex-wrap:wrap;left:12px;right:12px;bottom:12px}.ubic-placa .btn{width:100%}
  .tj-luz b{font-size:19px}
  .palabra-fondo{font-size:64px;top:18px}
  .hero .scroll-abajo{display:none}
}
@media (prefers-reduced-motion:reduce){.rev,.rev .cat,.rev .tj-luz{opacity:1;transform:none}.chispas{display:none}}
.bloque-cab h2,.ubic-cab h2{transition:filter .4s}
@media (hover:hover){.bloque-cab:hover h2,.ubic-cab:hover h2{text-shadow:none;filter:drop-shadow(0 0 16px rgba(155,224,106,.65))}}