/*
 * Hoja de intercambio de contacto — estilo de plataforma, compartido por todas
 * las tarjetas. Los colores NO se fijan aquí: llegan como tokens --cx-* que cada
 * tarjeta define (teal/dorado en LARIA, noir/champagne en Amaury, navy en 305),
 * así una sola hoja sirve a todas sin que ninguna herede la paleta de otra.
 * Todo va prefijado .cx- porque comparte documento con el CSS de cada tarjeta.
 */

/* Autosuficiente a propósito: la hoja se monta FUERA del scope de cada tarjeta
   y tiene que verse igual en un proyecto con reset global (Tailwind) y en una
   tarjeta estática sin ninguno. Sin esto, el padding del panel se suma al 100%
   de ancho y la hoja se desborda del teléfono. */
.cx-backdrop,.cx-backdrop *{box-sizing:border-box}

/* Tokens DERIVADOS del par fondo/texto que declare la tarjeta.
 * Motivo medido, no estético: un tenant de tema claro (crema) traía el gris
 * secundario de su página y en la hoja daba 2.56:1 — por debajo del mínimo
 * legible—, y los bordes por defecto (blancos translúcidos) desaparecían sobre
 * fondo claro. Derivándolos del propio texto, la hoja funciona igual en un tema
 * noir que en uno crema sin que cada negocio tenga que calcular nada.
 * Las líneas planas son el fallback para navegadores sin color-mix. */
.cx-backdrop{
  /* 70% y no menos: medido contra un tema crema real, al 62% el texto
     secundario daba 4.25:1 — por debajo del mínimo legible (4.5). */
  --cx-muted:#6b7280;
  --cx-muted:color-mix(in srgb, var(--cx-fg) 70%, var(--cx-bg));
  --cx-line:rgba(128,128,128,.34);
  --cx-line:color-mix(in srgb, var(--cx-fg) 26%, transparent);
  --cx-field:rgba(128,128,128,.08);
  --cx-field:color-mix(in srgb, var(--cx-fg) 6%, transparent);
}

.cx-backdrop{position:fixed;inset:0;z-index:2147482000;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(4,8,14,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  animation:cx-fade .18s ease}
@media(min-width:600px){.cx-backdrop{align-items:center}}

.cx-panel{position:relative;width:100%;max-width:460px;max-height:92vh;overflow-y:auto;
  background:var(--cx-bg);color:var(--cx-fg);border:1px solid var(--cx-line);
  border-radius:20px 20px 0 0;padding:26px 24px calc(24px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 50px rgba(0,0,0,.5);animation:cx-up .24s cubic-bezier(.22,.61,.36,1);
  font-family:inherit;-webkit-font-smoothing:antialiased}
@media(min-width:600px){.cx-panel{border-radius:18px;padding-bottom:26px;animation:cx-pop .2s ease}}

.cx-x{position:absolute;top:12px;right:12px;width:38px;height:38px;border:0;background:none;
  color:var(--cx-muted);font-size:26px;line-height:1;cursor:pointer;border-radius:50%}
.cx-x:hover{color:var(--cx-fg)}

.cx-title{margin:0;padding-right:34px;font-size:20px;font-weight:600;letter-spacing:.01em}
.cx-intro{margin:8px 0 20px;color:var(--cx-muted);font-size:13.5px;line-height:1.55}

.cx-f{display:block;margin-bottom:12px}
.cx-f>span{display:block;margin-bottom:6px;font-size:12px;letter-spacing:.06em;color:var(--cx-muted)}
/* Borde en longhand y con el ancestro en el selector a propósito. El proyecto
   anfitrión puede traer un reset global que ponga `border-width:0` en `*` (el
   preflight de Tailwind lo hace), y en longhand un color que fallara se lleva
   solo el color, nunca el grosor. Medido: 1px sólido derivado del tema. */
.cx-backdrop .cx-f input,.cx-backdrop .cx-f textarea{
  width:100%;padding:13px 14px;border-radius:10px;
  border-width:1px;border-style:solid;border-color:var(--cx-line);
  background:var(--cx-field);color:var(--cx-fg);font:inherit;font-size:16px; /* 16px: iOS no hace zoom */
  -webkit-appearance:none;appearance:none}
.cx-f textarea{resize:vertical;min-height:60px;line-height:1.5}
.cx-f input:focus,.cx-f textarea:focus{outline:2px solid var(--cx-accent);outline-offset:1px;border-color:transparent}
.cx-f input::placeholder,.cx-f textarea::placeholder{color:var(--cx-muted);opacity:.7}

.cx-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:359px){.cx-row{grid-template-columns:1fr}}

.cx-consent{display:flex;align-items:flex-start;gap:10px;margin:14px 0 4px;
  font-size:13px;line-height:1.5;color:var(--cx-fg);cursor:pointer}
.cx-consent input{width:19px;height:19px;flex:0 0 19px;margin-top:1px;accent-color:var(--cx-accent);cursor:pointer}
.cx-legal{margin:10px 0 0;color:var(--cx-muted);font-size:11.5px;line-height:1.5}

.cx-err{margin:12px 0 0;padding:10px 12px;border-radius:8px;
  background:rgba(220,60,70,.14);color:#ff9ba3;font-size:13px;line-height:1.45}

.cx-btn{display:block;width:100%;margin-top:16px;padding:15px 18px;border:0;border-radius:10px;
  background:var(--cx-accent);color:var(--cx-accent-ink);font:inherit;font-size:14px;font-weight:600;
  letter-spacing:.06em;cursor:pointer}
.cx-btn:disabled{opacity:.6;cursor:default}
.cx-skip{display:block;width:100%;margin-top:10px;padding:10px;border:0;background:none;
  color:var(--cx-muted);font:inherit;font-size:13px;cursor:pointer}
.cx-skip:hover{color:var(--cx-fg)}

/* honeypot: fuera de pantalla, nunca display:none (los bots lo detectan) */
.cx-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

.cx-done{text-align:center;padding:14px 4px 6px}
.cx-check{width:52px;height:52px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:26px;background:var(--cx-accent);color:var(--cx-accent-ink)}
.cx-done h3{margin:0;font-size:19px;font-weight:600}
.cx-done p{margin:8px 0 20px;color:var(--cx-muted);font-size:14px;line-height:1.55}

@keyframes cx-fade{from{opacity:0}to{opacity:1}}
@keyframes cx-up{from{transform:translateY(18px);opacity:.4}to{transform:translateY(0);opacity:1}}
@keyframes cx-pop{from{transform:scale(.97);opacity:.5}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){
  .cx-backdrop,.cx-panel{animation:none}
}