/* ============================================================
   Cotiza tu seguro: boton flotante, formulario y popup de gracias.
   Usa las variables del sitio (--brand, --brand-rgb, --brand-2...), asi
   toma el color de marca del comercio.
   ============================================================ */

/* ---------- Boton flotante ---------- */
.seguros-fab {
  position: fixed; left: 20px; bottom: 20px; z-index: 40;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px 14px 16px;
  border: 0; border-radius: 999px; cursor: pointer;
  font: 800 1rem/1 'Inter', system-ui, sans-serif; letter-spacing: .01em; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 14px 34px rgba(var(--brand-rgb), .45), inset 0 1px 0 rgba(255,255,255,.35);
  overflow: hidden; isolation: isolate;
  animation: segLatido 5.5s ease-in-out infinite;
  transition: transform .2s ease, box-shadow .2s ease;
}
.seguros-fab:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 40px rgba(var(--brand-rgb), .6), inset 0 1px 0 rgba(255,255,255,.4); }
.seguros-fab:active { transform: scale(.97); }
.seguros-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* brillo que cruza el boton */
.seguros-fab::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg); animation: segBrillo 3.2s ease-in-out infinite;
}
/* anillo que se expande */
.seguros-fab-ring {
  position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .65); animation: segOnda 2.4s ease-out infinite;
}
.seguros-fab-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.22); }
.seguros-fab-icon svg { width: 18px; height: 20px; color: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.seguros-fab-icon svg path:first-child { fill: rgba(255,255,255,.95); }
.seguros-fab-icon svg path:last-child { stroke: var(--brand); }
.seguros-fab-text { white-space: nowrap; }

@keyframes segBrillo { 0%, 55% { left: -60%; } 100% { left: 140%; } }
@keyframes segOnda { 0% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .65); } 70%, 100% { box-shadow: 0 0 0 22px rgba(var(--brand-rgb), 0); } }
@keyframes segLatido {
  0%, 80%, 100% { transform: translateY(0) rotate(0); }
  84% { transform: translateY(-7px) rotate(-3deg); }
  88% { transform: translateY(0) rotate(3deg); }
  92% { transform: translateY(-4px) rotate(-2deg); }
  96% { transform: translateY(0) rotate(0); }
}

@media (max-width: 760px) {
  .seguros-fab { left: 14px; bottom: 14px; padding: 12px 20px 12px 12px; font-size: .95rem; }
}

/* ---------- Modal ---------- */
.seguros-modal { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; padding: 14px; }
.seguros-modal[hidden], .seguros-gracias[hidden] { display: none; }
html.seguros-abierto { overflow: hidden; }
.seguros-backdrop { position: absolute; inset: 0; background: rgba(5,7,12,.78); backdrop-filter: blur(6px); animation: segFundido .25s ease; }
.seguros-panel {
  position: relative; width: min(760px, 100%); max-height: min(94vh, 980px); overflow-y: auto;
  background:
    radial-gradient(520px 260px at 100% 0, rgba(var(--brand-rgb), .20), transparent 70%),
    linear-gradient(180deg, #151a24, #0e1118);
  border: 1px solid rgba(255,255,255,.12); border-radius: 28px;
  box-shadow: 0 40px 100px rgba(0,0,0,.6);
  padding: 30px 30px 24px; color: var(--text, #f5f7fb);
  animation: segEntrar .35s cubic-bezier(.2,.9,.3,1.2);
  scrollbar-width: thin;
}
.seguros-close {
  position: absolute; top: 14px; right: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff;
  font-size: 1.7rem; line-height: 1; cursor: pointer; transition: background .2s, transform .2s;
}
.seguros-close:hover { background: rgba(255,255,255,.14); transform: rotate(90deg); }

.seguros-head { display: flex; gap: 16px; align-items: center; padding-right: 44px; }
.seguros-head h2 { margin: 0 0 6px; font-size: clamp(1.5rem, 3.4vw, 2rem); letter-spacing: -.01em; }
.seguros-head p { margin: 0; color: var(--muted, #aab3c2); line-height: 1.55; font-size: .98rem; }
.seguros-head-icon {
  flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 20px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 12px 28px rgba(var(--brand-rgb), .45);
}
.seguros-head-icon svg { width: 30px; height: 34px; }
.seguros-head-icon svg path:first-child { fill: rgba(255,255,255,.95); }
.seguros-head-icon svg path:last-child { stroke: var(--brand); }

/* ---------- Logos de las companias (un solo tono, flotando) ---------- */
.seguros-logos {
  margin: 22px 0 6px; padding: 16px 18px 12px; text-align: center;
  border: 1px solid rgba(255,255,255,.10); border-radius: 20px; background: rgba(255,255,255,.04);
}
.seguros-logos-label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #aab3c2); }
.seguros-logos-row { display: flex; align-items: center; justify-content: space-around; gap: 14px; margin-top: 14px; padding-bottom: 8px; }
.seguros-logo { width: auto; opacity: .92; animation: segFlotar 3.6s ease-in-out infinite; will-change: transform; }
.seguros-logo-m { height: 22px; }
.seguros-logo-b { height: 40px; animation-delay: -.9s;  animation-duration: 3.9s; }
.seguros-logo-s { height: 30px; animation-delay: -1.8s; animation-duration: 3.3s; }
.seguros-logo-h { height: 40px; animation-delay: -2.7s; animation-duration: 4.1s; }
@keyframes segFlotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---------- Formulario ---------- */
.seguros-form { margin-top: 8px; }
.seguros-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.seguros-seccion { margin: 18px 0 10px; font-size: .95rem; font-weight: 800; letter-spacing: .02em; color: #fff; display: flex; align-items: center; gap: 10px; }
.seguros-seccion::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,.18), transparent); }
.seguros-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.seg-completo { grid-column: 1 / -1; }
.seg-campo { display: grid; gap: 6px; }
.seg-campo > span { font-size: .8rem; font-weight: 600; color: #c9d1de; }
.seguros-form input[type="text"], .seguros-form input[type="email"], .seguros-form input[type="tel"], .seguros-form input[type="number"], .seguros-form select {
  width: 100%; padding: 13px 14px; border-radius: 14px; font: 500 1rem 'Inter', system-ui, sans-serif;
  border: 1px solid rgba(255,255,255,.14); background: rgba(20,25,35,.92); color: #fff; outline: none;
  -webkit-appearance: none; appearance: none; transition: border-color .2s, box-shadow .2s;
}
.seguros-form select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23aab3c2' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.seguros-form input::placeholder { color: #7f8b9d; }
.seguros-form input:focus, .seguros-form select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .25); }
.seguros-form input:disabled { opacity: .5; }
.seguros-form input:user-invalid, .seguros-form select:user-invalid { border-color: #ff6b6b; }

/* ---------- Libreta ---------- */
.seg-modo { display: grid; gap: 12px; }
.seg-modo[hidden] { display: none; }
.seg-archivo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.seg-subir {
  display: grid; justify-items: center; gap: 6px; text-align: center; cursor: pointer;
  padding: 26px 20px; border-radius: 20px; border: 2px dashed rgba(var(--brand-rgb), .55);
  background: rgba(var(--brand-rgb), .07); transition: background .2s, border-color .2s, transform .2s;
}
.seg-subir:hover, .seg-subir.arrastrando { background: rgba(var(--brand-rgb), .15); border-color: var(--brand); transform: translateY(-1px); }
.seg-archivo:focus-visible + .seg-vista, .seg-subir:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.seg-subir-icono { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--brand); background: rgba(var(--brand-rgb), .16); }
.seg-subir-icono svg { width: 28px; height: 28px; }
.seg-subir strong { font-size: 1.05rem; }
.seg-subir small { color: var(--muted, #aab3c2); line-height: 1.5; max-width: 440px; }
.seg-subir-archivo { margin-top: 4px; font-weight: 700; color: #4fe08c; word-break: break-all; }
.seg-vista { width: 100%; max-height: 230px; object-fit: contain; border-radius: 14px; background: #0a0d13; border: 1px solid rgba(255,255,255,.12); }
.seg-vista[hidden] { display: none; }
.seg-alternar {
  justify-self: center; padding: 11px 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); color: #fff;
  font: 700 .92rem 'Inter', system-ui, sans-serif; transition: background .2s, border-color .2s;
}
.seg-alternar:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.4); }

/* ---------- Enviar ---------- */
.seguros-error { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(255,90,90,.13); border: 1px solid rgba(255,107,107,.45); color: #ffb3b3; font-size: .93rem; line-height: 1.5; }
.seguros-error[hidden] { display: none; }
.seguros-enviar {
  position: relative; width: 100%; margin-top: 18px; padding: 16px 20px; border: 0; border-radius: 16px; cursor: pointer;
  font: 800 1.05rem 'Inter', system-ui, sans-serif; color: #fff; letter-spacing: .01em;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 14px 30px rgba(var(--brand-rgb), .4); transition: transform .2s, box-shadow .2s, opacity .2s;
}
.seguros-enviar:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(var(--brand-rgb), .55); }
.seguros-enviar:disabled { opacity: .75; cursor: wait; }
.seguros-enviar-spinner { display: none; position: absolute; right: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; animation: segGirar .8s linear infinite; }
.seguros-enviar.enviando .seguros-enviar-spinner { display: block; }
.seguros-legal { margin: 12px 0 0; text-align: center; font-size: .8rem; color: #8a96a8; }

/* ---------- Popup de gracias ---------- */
.seguros-gracias { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.seguros-gracias-fondo { position: absolute; inset: 0; background: rgba(5,7,12,.82); backdrop-filter: blur(7px); animation: segFundido .3s ease; }
.seguros-gracias-caja {
  position: relative; width: min(470px, 100%); text-align: center; padding: 38px 30px 30px; color: #fff;
  background:
    radial-gradient(360px 220px at 50% 0, rgba(var(--brand-rgb), .28), transparent 70%),
    linear-gradient(180deg, #171c27, #0e1118);
  border: 1px solid rgba(255,255,255,.14); border-radius: 30px; box-shadow: 0 40px 100px rgba(0,0,0,.65);
  animation: segRebote .6s cubic-bezier(.2,1.2,.3,1);
}
.seguros-gracias-caja h2 { margin: 18px 0 10px; font-size: clamp(1.35rem, 4vw, 1.7rem); line-height: 1.25; letter-spacing: -.01em; }
.seguros-gracias-caja p { margin: 0; color: #c3ccda; line-height: 1.6; font-size: 1.02rem; }
.seguros-gracias-aviso { margin-top: 14px !important; padding: 11px 14px; border-radius: 14px; background: rgba(255,200,80,.12); border: 1px solid rgba(255,200,80,.4); color: #ffe2a3 !important; font-size: .92rem !important; }
.seguros-gracias-aviso[hidden] { display: none; }
.seguros-gracias-boton {
  margin-top: 22px; padding: 14px 38px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 1rem 'Inter', system-ui, sans-serif; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 12px 28px rgba(var(--brand-rgb), .45); transition: transform .2s;
}
.seguros-gracias-boton:hover { transform: translateY(-2px) scale(1.03); }

.seguros-check { width: 116px; height: 116px; overflow: visible; }
.seguros-check-halo { fill: rgba(var(--brand-rgb), .16); animation: segHalo 2.2s ease-in-out infinite; transform-origin: center; }
.seguros-check-circulo { fill: none; stroke: var(--brand); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 290; stroke-dashoffset: 290; transform: rotate(-90deg); transform-origin: center; animation: segTrazo .7s .15s ease-out forwards; }
.seguros-check-tilde { fill: none; stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; animation: segTrazo .45s .75s ease-out forwards; }

.seguros-confeti { position: absolute; left: 50%; top: 38%; width: 0; height: 0; pointer-events: none; }
.seguros-confeti span { position: absolute; width: 9px; height: 14px; border-radius: 2px; opacity: 0; animation: segConfeti 1.5s var(--r, .4s) cubic-bezier(.15,.7,.3,1) forwards; }

@keyframes segFundido { from { opacity: 0; } to { opacity: 1; } }
@keyframes segEntrar { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes segRebote { 0% { opacity: 0; transform: scale(.7) translateY(30px); } 100% { opacity: 1; transform: none; } }
@keyframes segTrazo { to { stroke-dashoffset: 0; } }
@keyframes segHalo { 0%, 100% { transform: scale(.94); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes segGirar { to { transform: rotate(360deg); } }
@keyframes segConfeti {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--g)); }
}

/* ---------- Celular ---------- */
@media (max-width: 760px) {
  .seguros-modal { padding: 0; align-items: flex-end; }
  .seguros-panel { max-height: 96vh; border-radius: 26px 26px 0 0; padding: 24px 18px 20px; }
  .seguros-grid { grid-template-columns: 1fr; }
  .seguros-head { gap: 12px; }
  .seguros-head-icon { width: 52px; height: 52px; border-radius: 16px; }
  .seguros-logos-row { gap: 8px; }
  .seguros-logo-m { height: 17px; } .seguros-logo-b { height: 32px; } .seguros-logo-s { height: 24px; } .seguros-logo-h { height: 32px; }
  .seguros-form input[type="text"], .seguros-form input[type="email"], .seguros-form input[type="tel"], .seguros-form input[type="number"], .seguros-form select { font-size: 16px; }
}

/* ---------- Sin movimiento, para quien lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  .seguros-fab, .seguros-fab::after, .seguros-fab-ring, .seguros-logo, .seguros-check-halo { animation: none !important; }
  .seguros-check-circulo, .seguros-check-tilde { animation-duration: .01s !important; animation-delay: 0s !important; }
  .seguros-confeti { display: none; }
  .seguros-panel, .seguros-gracias-caja { animation: none; }
}