/* Pasaje Empresalia · sitio y presentación comercial
   Diseño y desarrollo: Lazarillo Studio (lazarillo.studio)
   ¿Necesitas ajustar algo? Con gusto te ayudamos: WhatsApp +52 1 722 322 2354.
   Las modificaciones realizadas fuera del estudio quedan fuera del alcance de nuestro soporte; si algo deja de
   funcionar después de un cambio externo, podemos revisarlo como un trabajo aparte. */
/* ==========================================================================
   Pasaje Empresalia · Drawer de contacto ("Consultar disponibilidad")
   Panel lateral que entra desde la derecha (ref. details.so "Navigation Drawer":
   panel 560px con inset 8px, revelado por clip-path, sombra con blur, campos escalonados).
   Estados: [data-state="form"] → "sending" → "done" (gracias, se cierra solo).
   ========================================================================== */
.contact-drawer{position:fixed;inset:0;z-index:80;pointer-events:none;color:var(--text);--drawer-ease:cubic-bezier(.165,.84,.44,1)}
.contact-drawer__shade{position:absolute;inset:0;background:var(--scrim-30);backdrop-filter:blur(10px);opacity:0;transition:opacity .6s ease}
.contact-drawer__panel{position:absolute;top:var(--space-2);right:var(--space-2);bottom:var(--space-2);display:flex;flex-direction:column;width:min(520px,calc(100% - var(--space-4)));padding:var(--space-6) var(--space-7) var(--space-5);background:var(--bg);border-radius:var(--radius-4);overflow:auto;clip-path:var(--clip-from,inset(0 -1px 0 100% round var(--radius-4)));opacity:0;transition:clip-path .5s var(--drawer-ease),opacity .2s ease .28s;will-change:clip-path}
/* el panel nace del botón: al abrir, el recorte parte del rectángulo del botón (lo calcula contacto.js) y el fondo verde del botón se disuelve en papel */
/* la capa verde va por encima de todo el contenido: al cerrar lo cubre en .2s antes de que el panel se encoja; al abrir se disuelve en .45s */
.contact-drawer__panel::before{content:'';position:absolute;inset:0;background:var(--brand);opacity:1;pointer-events:none;transition:opacity .2s ease;z-index:4}
.contact-drawer[data-open] .contact-drawer__panel::before{opacity:0;transition:opacity .45s ease .1s}
.contact-drawer__panel>*{position:relative;z-index:2}
.contact-drawer[data-open]{pointer-events:auto}
.contact-drawer[data-open] .contact-drawer__shade{opacity:1}
.contact-drawer[data-open] .contact-drawer__panel{clip-path:inset(0 round var(--radius-4));opacity:1;transition:clip-path .6s var(--drawer-ease),opacity 0s}
.contact-drawer__close{z-index:3}

/* cerrar */
.contact-drawer__close{position:absolute;top:var(--space-4);right:var(--space-4);width:44px;height:44px;border:0;border-radius:var(--radius-2);background:var(--glass);color:var(--text);display:grid;place-items:center;cursor:pointer;transition:background .3s}
.contact-drawer__close svg{width:20px;height:20px;stroke-width:1.5}
@media(hover:hover){.contact-drawer__close:hover{background:rgb(15 21 19 / .1)}}

/* cabecera */
.contact-drawer__kicker{font-size:var(--text-xs);font-weight:var(--fw-medium);letter-spacing:var(--track-wide);text-transform:uppercase;color:var(--text-mute);margin:0 0 var(--space-4)}
.contact-drawer__title{font-size:var(--display-4);font-weight:var(--fw-semibold);letter-spacing:var(--track-snug);line-height:var(--lh-tight);margin:0 0 var(--space-3);text-wrap:balance}
.contact-drawer__intro{font-size:var(--text-base);color:var(--text-soft);margin:0 0 var(--space-5);max-width:40ch}

/* campos: entran escalonados al abrir */
.contact-form{display:grid;gap:var(--space-3)}
.contact-form .field,.contact-form .contact-form__actions{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .8s var(--drawer-ease);transition-delay:calc(.15s + var(--i,0) * 50ms)}
.contact-drawer[data-open] .contact-form .field,.contact-drawer[data-open] .contact-form__actions{opacity:1;transform:none}
.contact-form .field{display:grid;gap:6px}
.contact-form label{font-size:var(--text-sm);font-weight:var(--fw-medium)}
.contact-form label small{font-weight:var(--fw-regular);color:var(--text-mute)}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;min-height:44px;padding:0 var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-2);background:var(--white);color:var(--text);font:inherit;font-size:var(--text-base);transition:border-color .2s,box-shadow .2s}
.contact-form select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23162d26' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right var(--space-3) center;background-size:16px;padding-right:calc(var(--space-3) * 2 + 16px)}
.contact-form textarea{min-height:116px;padding:var(--space-2) var(--space-3);resize:vertical}
.contact-form input:focus-visible,.contact-form select:focus-visible,.contact-form textarea:focus-visible{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px rgb(18 62 50 / .15)}
.contact-form [aria-invalid="true"]{border-color:#b3453a}
.contact-form .field__error{display:none;font-size:var(--text-xs);color:#b3453a}
.contact-form .field.is-invalid .field__error{display:block}
.contact-form__actions{display:grid;gap:var(--space-2);margin-top:var(--space-1)}
.contact-form__submit{width:100%;height:52px;padding:0 var(--space-5);border:0;border-radius:var(--radius-2);background:var(--brand);color:var(--white);font:inherit;font-size:var(--text-sm);font-weight:var(--fw-medium);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s,opacity .3s}
.contact-form__submit:hover{background:var(--brand-hover)}
.contact-form__submit:disabled{opacity:.6;cursor:default}
.contact-form__submit .ico{width:16px;height:16px;stroke-width:1.5}
.contact-form__privacy{font-size:var(--text-xs);color:var(--text-mute);margin:0;text-align:center}
.contact-form__error{display:none;font-size:var(--text-sm);color:#b3453a;margin:0}
.contact-drawer[data-state="error"] .contact-form__error{display:block}

/* gracias */
.contact-thanks{display:none;flex:1;flex-direction:column;justify-content:center;gap:var(--space-4)}
.contact-drawer[data-state="done"] .contact-form,.contact-drawer[data-state="done"] .contact-drawer__intro,.contact-drawer[data-state="done"] .contact-drawer__title,.contact-drawer[data-state="done"] .contact-drawer__kicker{display:none}
.contact-drawer[data-state="done"] .contact-thanks{display:flex}
.contact-thanks__mark{width:56px;height:56px;border-radius:var(--radius-pill);background:var(--brand);color:var(--white);display:grid;place-items:center;animation:contact-pop .6s var(--drawer-ease)}
.contact-thanks__mark svg{width:24px;height:24px;stroke-width:1.75}
.contact-thanks h2{font-size:var(--display-4);font-weight:var(--fw-semibold);letter-spacing:var(--track-snug);line-height:var(--lh-tight);margin:0}
.contact-thanks p{margin:0;color:var(--text-soft);max-width:38ch}
.contact-thanks__person{display:grid;gap:2px;padding-top:var(--space-4);border-top:1px solid var(--line)}
.contact-thanks__person strong{font-weight:var(--fw-semibold)}
.contact-thanks__person span{font-size:var(--text-sm);color:var(--text-soft)}
.contact-thanks__person a{color:inherit;text-decoration:none;font-size:var(--text-sm)}
.contact-thanks__timer{height:2px;background:var(--line);border-radius:1px;overflow:hidden;margin-top:var(--space-2)}
.contact-thanks__timer span{display:block;height:100%;width:100%;background:var(--brand);transform-origin:left;transform:scaleX(1)}
.contact-drawer[data-state="done"] .contact-thanks__timer span{animation:contact-countdown var(--thanks-ms,6s) linear forwards}
.contact-thanks__hint{font-size:var(--text-xs);color:var(--text-mute)}
@keyframes contact-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes contact-countdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}

@media(max-width:760px){.contact-drawer__panel{padding:var(--space-6) var(--space-5) var(--space-5)}}
@media(prefers-reduced-motion:reduce){.contact-drawer__panel,.contact-drawer__shade,.contact-form .field,.contact-form__actions{transition:none}.contact-thanks__mark{animation:none}}

/* móvil (2026-09-28, Joaquín): el título arranca debajo del botón de cerrar, no a su lado */
@media(max-width:760px){.contact-drawer__panel{padding-top:80px}}

.contact-form label small{font-size:12px} /* mínimo 12 px (QA 2026-10-02) */