/* ==========================================================
   Nuestros servicios · tarjetas clicables y ventana con la descripción
   (se carga después de styles.css; el comportamiento está en js/servicios.js)
   ========================================================== */
.srv-card{position:relative;cursor:pointer}
/* el nombre es un botón que ocupa toda la tarjeta */
.srv-btn{margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:inherit;cursor:pointer}
.srv-btn::after{content:"";position:absolute;inset:0;border-radius:var(--r)}
.srv-btn:focus{outline:none}
.srv-btn:focus-visible::after{outline:3px solid var(--orange);outline-offset:2px}
/* indicador "+" en la esquina para que se note que se puede abrir */
.srv-card::before{content:"+";position:absolute;top:10px;right:10px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--glass-border);background:var(--glass-strong);color:var(--text-em);font:600 16px/1 var(--font);transition:background .15s,color .15s}
.srv-card:hover::before,.srv-card:focus-within::before{background:var(--orange);color:var(--navy);border-color:transparent}

.srv-dlg{width:min(480px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:var(--r);
  background:var(--bg-base);color:var(--text);box-shadow:0 24px 80px rgba(7,21,26,.55);overflow:hidden}
.srv-dlg::backdrop{background:rgba(7,21,26,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.srv-dlg[open]{animation:srv-in .3s cubic-bezier(.23,1,.32,1)}
.srv-dlg[open]::backdrop{animation:srv-fondo .3s ease}
.srv-dlg.is-saliendo{animation:srv-out .2s ease forwards}
.srv-dlg.is-saliendo::backdrop{animation:srv-fondo-out .2s ease forwards}
@keyframes srv-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes srv-out{to{opacity:0;transform:translateY(8px) scale(.98)}}
@keyframes srv-fondo{from{opacity:0}to{opacity:1}}
@keyframes srv-fondo-out{to{opacity:0}}

.srv-dlg-card{display:flex;flex-direction:column;align-items:center;gap:10px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:var(--sp-l) var(--sp-m) var(--sp-m);text-align:center}
.srv-dlg-card:focus{outline:none}
.srv-dlg .srv-ico{width:84px;height:84px;flex:none}
.srv-dlg .srv-ico svg{width:40px;height:40px}
.srv-dlg .caption{margin:6px 0 0}
.srv-dlg h3{margin:0;font:600 24px/30px var(--font);letter-spacing:-.01em;text-wrap:balance}
.srv-dlg p{margin:0;color:var(--text-em);line-height:1.7;text-wrap:pretty}
.srv-dlg-x{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--glass-border);border-radius:50%;
  background:var(--bg-base);color:var(--text);cursor:pointer;box-shadow:0 2px 12px rgba(7,21,26,.3);transition:background .15s,color .15s,transform .15s}
.srv-dlg-x svg{width:18px;height:18px}
.srv-dlg-x:hover{background:var(--orange);color:var(--navy);transform:scale(1.06)}
.srv-dlg :focus-visible{outline:3px solid var(--orange);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .srv-dlg[open],.srv-dlg[open]::backdrop,.srv-dlg.is-saliendo,.srv-dlg.is-saliendo::backdrop{animation:none}
  .srv-dlg-x,.srv-card::before{transition:none}
}