/* Auto Cerraduras Bosco 1.5.5.20 — acabado visual público.
   La fuente University se carga desde assets/fonts/University.otf cuando existe una copia con licencia válida. */
@font-face{
  font-family:"Bosco University";
  src:url("./fonts/University.otf") format("opentype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

.bosco-ui{
  --bosco-display-font:"Bosco University","Rockwell Extra Bold",Rockwell,"Roboto Slab",Georgia,serif;
  --bosco-control-bg:#fff;
  --bosco-control-text:#17202a;
  --bosco-control-muted:#68727c;
  --bosco-control-border:#cfd5da;
  --bosco-control-border-hover:#b9a04a;
  --bosco-control-focus:#f5b900;
  --bosco-control-soft:#fff8dd;
  --bosco-control-dark:#111d29;
}

/* Tipografía display solo en títulos de alto valor visual.
   University tiene un juego de caracteres reducido; evitamos aplicarla a títulos fijos con acentos españoles. */
.bosco-ui .hero h1,
.bosco-ui #services-title,
.bosco-ui #contact-title,
.bosco-ui .page-heading h1,
.bosco-ui .not-found h1,
.bosco-ui #compat-title,
.bosco-ui .checkout-heading>h2,
.bosco-ui .heading>h1,
.bosco-ui #result-title{
  font-family:var(--bosco-display-font);
  font-weight:400;
  font-synthesis:none;
  line-height:1.04;
  letter-spacing:.015em;
  text-transform:uppercase;
}

/* Select nativo: fallback sin JavaScript. Con JS, el mismo selector enriquecido se usa en PC y móvil. */
.bosco-ui select:not([multiple]){
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  min-height:50px;
  padding:11px 48px 11px 14px;
  border:1px solid var(--bosco-control-border);
  border-radius:11px;
  background-color:var(--bosco-control-bg);
  background-image:
    linear-gradient(45deg,transparent 50%,#495663 50%),
    linear-gradient(135deg,#495663 50%,transparent 50%),
    linear-gradient(to right,#e7eaed,#e7eaed);
  background-position:
    calc(100% - 20px) calc(50% - 2px),
    calc(100% - 15px) calc(50% - 2px),
    calc(100% - 38px) 50%;
  background-size:5px 5px,5px 5px,1px 24px;
  background-repeat:no-repeat;
  color:var(--bosco-control-text);
  cursor:pointer;
  font:inherit;
  font-weight:680;
  line-height:1.35;
  box-shadow:0 1px 0 rgba(17,29,41,.03),0 5px 16px rgba(17,29,41,.035);
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.bosco-ui select:not([multiple]):hover:not(:disabled){
  border-color:var(--bosco-control-border-hover);
  background-color:#fffdf6;
}
.bosco-ui select:not([multiple]):focus{
  border-color:var(--bosco-control-focus);
  outline:0;
  box-shadow:0 0 0 4px rgba(245,185,0,.16),0 7px 22px rgba(17,29,41,.05);
}
.bosco-ui select:not([multiple]):disabled{
  border-color:#e1e5e8;
  background-color:#f3f5f6;
  background-image:
    linear-gradient(45deg,transparent 50%,#a5adb4 50%),
    linear-gradient(135deg,#a5adb4 50%,transparent 50%),
    linear-gradient(to right,#e4e7e9,#e4e7e9);
  color:#8a949d;
  cursor:not-allowed;
  box-shadow:none;
}
.bosco-ui select option{background:#fff;color:#17202a;font-weight:600}
.bosco-ui select option:checked{background:#fff5c7;color:#111d29}

/* Select enriquecido en PC y móvil. El select real sigue en el formulario para conservar valor, validación y accesibilidad. */
.bosco-ui .bosco-select-shell{
  position:relative;
  width:100%;
  min-width:0;
}
/* Mientras un desplegable esta abierto, su propio contexto y el primer
   ancestro que crea un stacking context quedan por encima del contenido
   posterior. Evita que textos/secciones posteriores tapen las ultimas opciones. */
.bosco-ui .bosco-select-shell.is-open{
  z-index:1000;
}
.bosco-ui .bosco-select-stack-open{
  position:relative;
  z-index:300;
  overflow:visible;
}
.bosco-ui .bosco-select-shell>.bosco-select-source{
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  min-height:0;
  padding:0;
  border:0;
  opacity:0;
  pointer-events:none;
}
.bosco-ui .bosco-select-trigger{
  position:relative;
  z-index:1;
  display:flex;
  width:100%;
  min-height:50px;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 14px 11px 15px;
  border:1px solid var(--bosco-control-border);
  border-radius:11px;
  background:#fff;
  color:var(--bosco-control-text);
  cursor:pointer;
  font:inherit;
  font-weight:680;
  line-height:1.35;
  text-align:left;
  box-shadow:0 1px 0 rgba(17,29,41,.03),0 5px 16px rgba(17,29,41,.035);
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease,transform .18s ease;
}
.bosco-ui .bosco-select-trigger::after{
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-right:2px solid #4b5864;
  border-bottom:2px solid #4b5864;
  content:"";
  transform:translateY(-2px) rotate(45deg);
  transition:transform .18s ease,border-color .18s ease;
}
.bosco-ui .bosco-select-trigger:hover:not(:disabled){
  border-color:var(--bosco-control-border-hover);
  background:#fffdf6;
}
.bosco-ui .bosco-select-trigger:focus-visible{
  border-color:var(--bosco-control-focus);
  outline:0;
  box-shadow:0 0 0 4px rgba(245,185,0,.16),0 7px 22px rgba(17,29,41,.05);
}
.bosco-ui .bosco-select-shell.is-open>.bosco-select-trigger{
  border-color:var(--bosco-control-focus);
  background:#fffdf6;
  box-shadow:0 0 0 4px rgba(245,185,0,.13),0 12px 28px rgba(17,29,41,.10);
}
.bosco-ui .bosco-select-shell.is-open>.bosco-select-trigger::after{
  border-color:#806000;
  transform:translateY(2px) rotate(225deg);
}
.bosco-ui .bosco-select-trigger:disabled{
  border-color:#e1e5e8;
  background:#f3f5f6;
  color:#8a949d;
  cursor:not-allowed;
  box-shadow:none;
}
.bosco-ui .bosco-select-trigger:disabled::after{border-color:#a5adb4}
.bosco-ui .bosco-select-value{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.bosco-ui .bosco-select-menu{
  position:absolute;
  z-index:80;
  top:calc(100% + 8px);
  right:0;
  left:0;
  display:grid;
  max-height:min(320px,48vh);
  gap:3px;
  padding:7px;
  overflow:auto;
  border:1px solid #d7dde1;
  border-radius:13px;
  background:rgba(255,255,255,.985);
  box-shadow:0 22px 52px rgba(17,29,41,.18),0 4px 14px rgba(17,29,41,.08);
  opacity:0;
  pointer-events:none;
  transform:translateY(-6px) scale(.985);
  transform-origin:top center;
  visibility:hidden;
  scrollbar-color:#c2c9ce transparent;
  scrollbar-width:thin;
  transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
}
.bosco-ui .bosco-select-shell.is-up>.bosco-select-menu{
  top:auto;
  bottom:calc(100% + 8px);
  transform-origin:bottom center;
  transform:translateY(6px) scale(.985);
}
.bosco-ui .bosco-select-shell.is-open>.bosco-select-menu{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  visibility:visible;
}
.bosco-ui .bosco-select-option{
  display:flex;
  width:100%;
  min-height:42px;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#26333e;
  cursor:pointer;
  font:inherit;
  font-size:.93rem;
  font-weight:620;
  line-height:1.3;
  text-align:left;
}
.bosco-ui .bosco-select-option:hover,
.bosco-ui .bosco-select-option.is-keyboard{
  background:#f5f6f7;
  color:#111d29;
}
.bosco-ui .bosco-select-option[aria-selected="true"]{
  background:var(--bosco-control-soft);
  color:#5e4800;
  font-weight:800;
}
.bosco-ui .bosco-select-option[aria-selected="true"]::before{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:var(--bosco-control-focus);
  box-shadow:0 0 0 3px rgba(245,185,0,.18);
  content:"";
}
.bosco-ui .bosco-select-option:disabled{
  color:#9ba3aa;
  cursor:not-allowed;
}

/* CTA: partículas breves desde el borde. Solo se crean al interactuar. */
.bosco-ui .bosco-particle-button{
  position:relative;
  isolation:isolate;
  overflow:visible;
}
.bosco-ui .bosco-particle-button::after{
  position:absolute;
  z-index:-1;
  inset:-4px;
  border:1px solid rgba(245,185,0,0);
  border-radius:inherit;
  content:"";
  pointer-events:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.bosco-ui .bosco-particle-button:hover::after,
.bosco-ui .bosco-particle-button:focus-visible::after{
  border-color:rgba(245,185,0,.35);
  box-shadow:0 0 20px rgba(245,185,0,.12);
}
.bosco-ui .bosco-cta-particle{
  position:absolute;
  z-index:4;
  left:var(--particle-x);
  top:var(--particle-y);
  width:var(--particle-size);
  height:var(--particle-size);
  border-radius:50%;
  background:var(--particle-color,#f5b900);
  box-shadow:0 0 11px color-mix(in srgb,var(--particle-color,#f5b900) 68%,transparent),0 0 3px rgba(255,255,255,.5);
  opacity:0;
  pointer-events:none;
  animation:bosco-particle-flight var(--particle-duration,620ms) cubic-bezier(.18,.74,.28,1) forwards;
}
@keyframes bosco-particle-flight{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}
  18%{opacity:1}
  72%{opacity:.72}
  100%{opacity:0;transform:translate(calc(-50% + var(--particle-dx)),calc(-50% + var(--particle-dy))) scale(.08)}
}

@media(max-width:680px){
  .bosco-ui .hero h1,
  .bosco-ui .page-heading h1,
  .bosco-ui .not-found h1,
  .bosco-ui .heading>h1,
  .bosco-ui #result-title{line-height:1.07;letter-spacing:.01em}
  .bosco-ui select:not([multiple]){min-height:52px;border-radius:12px;padding-block:12px}
}


@media(max-width:680px){
  .bosco-ui .bosco-select-trigger{min-height:52px;border-radius:12px;padding:12px 14px 12px 15px;touch-action:manipulation}
  .bosco-ui .bosco-select-menu{max-height:min(360px,52vh);gap:4px;padding:8px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .bosco-ui .bosco-select-option{min-height:48px;padding:11px 12px;border-radius:9px;font-size:1rem;touch-action:manipulation}
}

@media(prefers-reduced-motion:reduce){
  .bosco-ui .bosco-cta-particle{display:none}
  .bosco-ui .bosco-particle-button::after,
  .bosco-ui .bosco-select-trigger,
  .bosco-ui .bosco-select-menu{transition:none}
}