/* ── Capa 3D de Abellis ─────────────────────────────────────────────────
   Profundidad sobre la identidad navy+oro de la plantilla: sombras en capas,
   elevación al pasar el ratón, brillo dorado sutil y relieve en las tarjetas.
   Nada de librerías: solo transform/box-shadow, y se apaga con
   prefers-reduced-motion. */

:root{
  --sombra-baja: 0 1px 2px rgba(1,42,80,.06), 0 4px 10px rgba(1,42,80,.07);
  --sombra-alta: 0 2px 4px rgba(1,42,80,.08), 0 12px 28px rgba(1,42,80,.14),
                 0 30px 60px rgba(1,42,80,.12);
  --brillo-oro: linear-gradient(120deg, transparent 30%, rgba(233,165,11,.10) 48%,
                transparent 62%);
}

/* Tarjetas con cuerpo: elevación y micro-inclinación al entrar el ratón. */
.tcard, .vcard, .resi-card, .tp-box, .why-c, .off-c, .svc-block,
.algo-step, .form-wrap{
  box-shadow: var(--sombra-baja);
  transition: transform .28s cubic-bezier(.2,.8,.25,1), box-shadow .28s ease;
  will-change: transform;
}
.tcard:hover, .vcard:hover, .resi-card:hover, .tp-box:hover, .why-c:hover,
.off-c:hover, .algo-step:hover{
  transform: translateY(-6px) perspective(900px) rotateX(1.6deg);
  box-shadow: var(--sombra-alta);
}

/* Borde superior con canto dorado en relieve, como pieza fresada. */
.why-c, .tcard, .vcard{position:relative; overflow:hidden}
.off-c{position:relative; overflow:visible}
.why-c::after, .off-c::after, .tcard::after, .vcard::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: var(--brillo-oro); background-size:220% 100%;
  background-position: 120% 0; transition: background-position .6s ease;
}
.off-c::after{border-radius:20px}
.why-c:hover::after, .off-c:hover::after, .tcard:hover::after, .vcard:hover::after{
  background-position: -20% 0;
}

/* El hero gana atmósfera: halo dorado que respira detrás del titular. */
.hero{perspective:1000px}
.hero::before{animation: halo 9s ease-in-out infinite alternate}
@keyframes halo{from{transform:scale(1) translateY(0)}to{transform:scale(1.15) translateY(24px)}}

/* Botones con peso físico. */
.btn{box-shadow: 0 2px 0 rgba(1,42,80,.18), 0 8px 18px rgba(1,42,80,.12)}
.btn:active{transform: translateY(2px); box-shadow: 0 0 0 rgba(0,0,0,0), 0 3px 8px rgba(1,42,80,.14)}
.btn-gold{box-shadow: 0 2px 0 #b57f06, 0 10px 22px rgba(233,165,11,.32)}

/* La navegación flota como lámina de vidrio. */
nav{box-shadow: 0 6px 24px rgba(1,42,80,.07)}

@media (prefers-reduced-motion: reduce){
  .tcard, .vcard, .resi-card, .tp-box, .why-c, .off-c, .svc-block, .algo-step,
  .form-wrap{transition:none}
  .hero::before{animation:none}
}

/* ── Avisos flash de los formularios ── */
.avisos-flash{position:fixed;top:84px;left:50%;transform:translateX(-50%);z-index:90;
  display:grid;gap:8px;width:min(560px,92vw)}
.aviso{padding:13px 18px;border-radius:12px;font-family:var(--body);font-size:.93rem;
  box-shadow:var(--sombra-alta);background:var(--card);border:1px solid var(--line);
  animation:aviso-entra .35s ease}
.aviso.success{border-left:4px solid var(--green)}
.aviso.danger{border-left:4px solid #b3261e}
@keyframes aviso-entra{from{opacity:0;transform:translateY(-8px)}to{opacity:1}}

/* ── Widget del asistente ── */
#chat-burbuja{position:fixed;right:20px;bottom:20px;z-index:95;width:58px;height:58px;
  border-radius:50%;border:0;cursor:pointer;background:linear-gradient(145deg,var(--navy),var(--navy-deep));
  color:#fff;font-size:1.5rem;display:grid;place-items:center;
  box-shadow:0 4px 0 rgba(1,26,48,.5), 0 14px 30px rgba(1,42,80,.35);
  transition:transform .2s ease}
#chat-burbuja:hover{transform:translateY(-3px) scale(1.05)}
#chat-caja{position:fixed;right:20px;bottom:90px;z-index:96;width:min(360px,calc(100vw - 40px));
  background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:var(--sombra-alta);display:none;flex-direction:column;max-height:min(70vh,600px)}
#chat-caja.abierto{display:flex}
#chat-cab{background:linear-gradient(150deg,var(--navy-deep),var(--navy));color:#fff;
  padding:14px 14px 14px 18px;font-family:var(--disp);font-weight:600;
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none}
#chat-cab small{display:block;font-family:var(--body);font-weight:400;font-size:.74rem;opacity:.75}
#chat-cerrar{flex:none;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.4rem;line-height:1;display:grid;place-items:center}
#chat-cerrar:hover{background:var(--gold);color:var(--navy-deep)}
#chat-hilo{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px;display:grid;gap:10px;
  align-content:start;background:var(--bg);min-height:180px;overscroll-behavior:contain}
.chat-msg{max-width:85%;padding:10px 14px;border-radius:14px;font-size:.9rem;line-height:1.45;
  box-shadow:var(--sombra-baja);white-space:pre-wrap;overflow-wrap:anywhere}
.chat-msg.yo{justify-self:end;background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.chat-msg.bot{justify-self:start;background:var(--card);border:1px solid var(--line);
  border-bottom-left-radius:4px}
.chat-msg.pensando{color:var(--slate);font-style:italic}
#chat-pie{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--card);flex:none}
#chat-texto{flex:1;min-width:0;border:1.6px solid var(--line);border-radius:10px;padding:10px 12px;
  font-family:var(--body);font-size:16px}  /* 16px: iOS no hace zoom al enfocar */
#chat-texto:focus{outline:none;border-color:var(--navy)}
#chat-envia{border:0;border-radius:10px;padding:0 16px;cursor:pointer;flex:none;
  background:var(--gold);color:var(--navy-deep);font-family:var(--disp);font-weight:600}

/* Teléfono: el chat es una hoja a pantalla completa (altura dinámica, que
   respeta el teclado y las barras del navegador), con cierre en la cabecera.
   La burbuja se esconde mientras está abierto para no tapar el campo. */
@media(max-width:640px){
  #chat-caja{inset:0;right:0;bottom:0;width:100%;max-height:none;height:100vh;height:100dvh;
    border-radius:0;border:0}
  #chat-caja.abierto{display:flex}
  #chat-cab{padding-top:calc(14px + env(safe-area-inset-top))}
  #chat-pie{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  #chat-hilo{min-height:0}
  .chat-msg{max-width:88%}
  body.chat-abierto{overflow:hidden}
  body.chat-abierto #chat-burbuja{display:none}
  #chat-burbuja{right:14px;bottom:14px;width:54px;height:54px}
}

/* Honeypot anti-bots: invisible para personas, irresistible para bots. */
.hp-campo{position:absolute !important;left:-9999px !important;top:-9999px !important;
  height:1px;width:1px;overflow:hidden}

/* ── Validación de formularios: el error se ve donde está ── */
.field-f input.error,.field-f select.error,.field-f textarea.error{border-color:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.campo-error{display:block;color:#b3261e;font-size:.78rem;margin-top:5px;font-weight:600}
.gracias{max-width:640px;margin:0 auto;text-align:center;padding:40px 24px}
.gracias .icono{width:84px;height:84px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;font-size:2.2rem;
  background:linear-gradient(135deg,var(--navy),var(--navy-deep));color:var(--gold);box-shadow:var(--sombra-alta)}
.gracias h2{font-family:var(--disp);color:var(--navy-deep);font-size:1.7rem;margin-bottom:10px}
.gracias p{color:var(--slate);font-size:1.02rem}
.gracias .pasos{text-align:left;margin:22px auto 0;display:grid;gap:10px;max-width:440px}
.gracias .pasos div{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;box-shadow:var(--sombra-baja);font-size:.92rem}