
/* =========================================================================
   Almuzara - formulario de contacto conversacional (Typeform-like, embebido)
   Mobile-first, accesible, degradacion perfecta sin JS, reduced-motion.
   Paleta fiel al Typeform original: pregunta #181818, texto #606060,
   boton #505050, fondo #F5F5F5. Open Sans, esquinas pequenas.
   Se imprime en wp_footer (fuera de wpautop/wptexturize de Elementor).
   ========================================================================= */

.alm-contacto{
  --alm-q:#181818;
  --alm-text:#606060;
  --alm-btn:#505050;
  --alm-btn-hover:#3a3a3a;
  --alm-bg:#f5f5f5;
  --alm-card:#fff;
  --alm-border:#d8d8d8;
  --alm-err:#b3261e;
  --alm-radius:6px;
  --alm-font:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --alm-ease:cubic-bezier(.22,.61,.36,1);
  max-width:720px;margin:0 auto;font-family:var(--alm-font);color:var(--alm-text);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.alm-contacto, .alm-contacto *{box-sizing:border-box}

/* ---------- Sin JS: form plano usable (degradacion) ---------- */
.alm-c-nojs-note{display:none}
.alm-contacto:not(.alm-c-js) .alm-c-nojs-note{display:block;color:#909090;font-size:.82rem;margin:0 0 18px}
.alm-contacto:not(.alm-c-js) .alm-c-form{background:var(--alm-bg);padding:32px 24px;border-radius:var(--alm-radius)}
.alm-contacto:not(.alm-c-js) .alm-c-step{margin:0 0 22px}
.alm-contacto:not(.alm-c-js) .alm-c-fieldset{border:0;padding:0}
.alm-contacto:not(.alm-c-js) label, .alm-contacto:not(.alm-c-js) legend{display:block;color:var(--alm-q);font-weight:600;font-size:.98rem;margin:0 0 8px}
.alm-contacto:not(.alm-c-js) input[type=email],
.alm-contacto:not(.alm-c-js) textarea,
.alm-contacto:not(.alm-c-js) select{width:100%;padding:12px 14px;border:1px solid var(--alm-border);border-radius:4px;font:400 1rem var(--alm-font);color:var(--alm-q);background:#fff}
.alm-contacto:not(.alm-c-js) textarea{min-height:120px;resize:vertical}
.alm-contacto:not(.alm-c-js) .alm-c-radios{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.alm-contacto:not(.alm-c-js) .alm-c-opt{font-weight:400;display:flex;align-items:center;gap:8px}
.alm-contacto:not(.alm-c-js) .alm-c-other{margin-top:8px;display:none}
.alm-contacto:not(.alm-c-js) .alm-c-rgpd{display:flex;gap:10px;font-weight:400;align-items:flex-start}
.alm-contacto:not(.alm-c-js) .alm-c-rgpd a{color:var(--alm-btn);text-decoration:underline}
.alm-contacto:not(.alm-c-js) .alm-c-submit{background:var(--alm-btn);color:#fff;border:0;border-radius:var(--alm-radius);padding:14px 28px;font:600 1rem/1 var(--alm-font);cursor:pointer;margin-top:8px}

/* Honeypot SIEMPRE fuera de vista (con o sin JS) */
.alm-c-hp{position:absolute !important;left:-9999px !important;top:auto;width:1px;height:1px;overflow:hidden}

/* Visually-hidden: oculta el submit nativo conservandolo en el form */
.alm-c-vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px}

/* ---------- Con JS: experiencia conversacional ---------- */
.alm-contacto.alm-c-js .alm-c-form{margin:0;padding:0;background:none}

/* Escenario */
.alm-c-stage{position:relative;background:var(--alm-bg);border-radius:var(--alm-radius);overflow:hidden}

/* Barra de progreso */
.alm-c-progress{position:relative;height:4px;background:rgba(80,80,80,.14)}
.alm-c-progress-bar{position:absolute;inset:0 auto 0 0;height:100%;width:0%;background:var(--alm-btn);transition:width .45s var(--alm-ease)}

/* Viewport de altura generosa fija; los slides deslizan DENTRO */
.alm-c-viewport{position:relative;height:520px;overflow:hidden}
.alm-c-track{position:relative;height:100%;width:100%}

/* Cada slide ocupa todo el viewport (absoluto) */
.alm-c-slide{position:absolute;inset:0;display:flex;align-items:center;padding:48px;opacity:0;transform:translateX(0);will-change:transform,opacity}
.alm-c-slide[hidden]{display:none}
.alm-c-slide.is-active{opacity:1;transform:translateX(0);transition:transform .42s var(--alm-ease),opacity .42s var(--alm-ease);z-index:2}
.alm-c-slide.enter-fwd{opacity:0;transform:translateX(40px)}
.alm-c-slide.enter-bwd{opacity:0;transform:translateX(-40px)}
.alm-c-slide.leave-fwd{opacity:0;transform:translateX(-40px);transition:transform .42s var(--alm-ease),opacity .42s var(--alm-ease);z-index:1}
.alm-c-slide.leave-bwd{opacity:0;transform:translateX(40px);transition:transform .42s var(--alm-ease),opacity .42s var(--alm-ease);z-index:1}

.alm-c-slide-inner{width:100%;max-width:560px;margin:0 auto}

/* Pregunta GRANDE */
.alm-c-q,
.alm-c-slide label.alm-c-q,
.alm-c-slide legend.alm-c-q{display:block;color:var(--alm-q);font-weight:600;font-size:1.75rem;line-height:1.3;margin:0 0 20px;padding:0}
.alm-c-q span[aria-hidden]{color:var(--alm-btn);font-weight:400}
.alm-c-intro{font-size:1.4rem;font-weight:600;line-height:1.4;margin:0 0 24px}

/* Campos en modo conversacional */
.alm-c-slide .alm-c-fieldset{border:0;padding:0;margin:0}
.alm-c-slide input[type=email],
.alm-c-slide textarea{width:100%;padding:12px 4px;border:0;border-bottom:2px solid var(--alm-border);background:transparent;font:400 1.35rem/1.4 var(--alm-font);color:var(--alm-q);border-radius:0;-webkit-appearance:none;appearance:none}
.alm-c-slide textarea{resize:vertical;min-height:92px;line-height:1.5}
.alm-c-slide select{width:100%;padding:12px 28px 12px 4px;border:0;border-bottom:2px solid var(--alm-border);background:transparent;font:400 1.35rem/1.4 var(--alm-font);color:var(--alm-q);border-radius:0;-webkit-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23505050' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center}
.alm-c-slide input[type=email]:focus,
.alm-c-slide textarea:focus,
.alm-c-slide select:focus{outline:none;border-bottom-color:var(--alm-btn)}
.alm-c-invalid input[type=email],
.alm-c-invalid textarea,
.alm-c-invalid select{border-bottom-color:var(--alm-err)}

/* Opciones "como me conocio" como tarjetas tactiles grandes */
.alm-c-slide .alm-c-radios{display:flex;flex-direction:column;gap:10px}
.alm-c-opt{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border:1.5px solid var(--alm-border);border-radius:var(--alm-radius);background:var(--alm-card);color:var(--alm-text);font-weight:400;font-size:1.05rem;cursor:pointer;transition:border-color .18s var(--alm-ease),background .18s var(--alm-ease)}
.alm-c-opt:hover{border-color:var(--alm-btn)}
.alm-c-opt input[type=radio]{width:20px;height:20px;accent-color:var(--alm-btn);margin:0;flex:none}
.alm-c-opt:focus-within{border-color:var(--alm-btn);box-shadow:0 0 0 3px rgba(80,80,80,.18)}
.alm-c-opt.is-sel{border-color:var(--alm-btn);background:#ececec;color:var(--alm-q)}
.alm-c-slide .alm-c-other{margin-top:10px;width:100%;padding:12px 4px;border:0;border-bottom:2px solid var(--alm-border);background:transparent;font:400 1.1rem var(--alm-font);color:var(--alm-q);display:none}
.alm-c-slide .alm-c-other:focus{outline:none;border-bottom-color:var(--alm-btn)}

/* RGPD */
.alm-c-slide .alm-c-rgpd{display:flex;align-items:flex-start;gap:12px;font-size:1.15rem;font-weight:400;color:var(--alm-text);line-height:1.5;cursor:pointer;margin:0}
.alm-c-slide .alm-c-rgpd input[type=checkbox]{width:22px;height:22px;margin-top:2px;accent-color:var(--alm-btn);flex:none}
.alm-c-slide .alm-c-rgpd a{color:var(--alm-btn);text-decoration:underline}

/* Controles del paso */
.alm-c-controls{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:28px}
.alm-c-btn{display:inline-flex;align-items:center;gap:9px;background:var(--alm-btn);color:#fff;border:0;border-radius:var(--alm-radius);padding:13px 30px;font:600 1.05rem/1 var(--alm-font);cursor:pointer;transition:background .18s var(--alm-ease),opacity .18s var(--alm-ease)}
.alm-c-btn:hover{background:var(--alm-btn-hover)}
.alm-c-btn:focus-visible{outline:3px solid rgba(80,80,80,.4);outline-offset:2px}
.alm-c-btn:disabled{opacity:.6;cursor:default}
.alm-c-btn .alm-c-arrow{font-size:1.05em;line-height:1;transition:transform .2s var(--alm-ease)}
.alm-c-btn:hover .alm-c-arrow{transform:translateX(3px)}
.alm-c-link{background:none;border:0;color:var(--alm-text);font:400 .95rem var(--alm-font);text-decoration:underline;cursor:pointer;padding:8px 4px}
.alm-c-link:hover{color:var(--alm-q)}
.alm-c-link:focus-visible{outline:2px solid rgba(80,80,80,.4);outline-offset:2px;border-radius:3px}
.alm-c-hint{color:#909090;font-size:.85rem;margin:0}
.alm-c-hint kbd{background:#e7e7e7;border-radius:3px;padding:1px 6px;font:inherit;font-size:.82em;color:#555}

/* Error inline por paso */
.alm-c-step-err{color:var(--alm-err);font-size:.92rem;margin:12px 0 0;min-height:1.2em}

/* Pantallas de resultado */
.alm-c-msg{display:none;padding:48px 32px;border-radius:var(--alm-radius);text-align:center}
.alm-c-msg.is-active{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:520px}
.alm-c-ok{background:var(--alm-bg)}
.alm-c-ok-icon{width:58px;height:58px;border-radius:50%;background:var(--alm-btn);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.7rem;margin:0 auto 20px}
.alm-c-ok h3{color:var(--alm-q);margin:0 0 14px;font-size:1.6rem;font-weight:600}
.alm-c-ok p{color:var(--alm-text);margin:0 auto;max-width:520px;line-height:1.65;font-size:1.05rem}
.alm-c-error{background:#fbeaea;color:var(--alm-err);margin-top:16px}

/* ---------- Tablet ---------- */
@media (max-width:860px){
  .alm-c-viewport{height:480px}
  .alm-c-slide{padding:32px}
  .alm-c-q,.alm-c-slide label.alm-c-q,.alm-c-slide legend.alm-c-q{font-size:1.5rem}
  .alm-c-intro{font-size:1.25rem}
  .alm-c-msg.is-active{min-height:480px}
}

/* ---------- Movil ---------- */
@media (max-width:560px){
  .alm-c-viewport{height:auto;min-height:460px}
  .alm-c-slide{padding:28px 20px;align-items:flex-start}
  .alm-c-slide.is-active{position:relative}
  .alm-c-slide[hidden]{display:none}
  .alm-c-slide-inner{max-width:100%}
  .alm-c-q,.alm-c-slide label.alm-c-q,.alm-c-slide legend.alm-c-q{font-size:1.3rem;margin-bottom:16px}
  .alm-c-intro{font-size:1.15rem}
  .alm-c-slide input[type=email],
  .alm-c-slide textarea,
  .alm-c-slide select{font-size:1.1rem}
  .alm-c-slide .alm-c-rgpd{font-size:1rem}
  .alm-c-btn{width:100%;justify-content:center;padding:15px 24px}
  .alm-c-controls{gap:10px}
  .alm-c-hint{order:3;flex-basis:100%}
  .alm-c-msg{padding:36px 20px}
  .alm-c-msg.is-active{min-height:420px}
}

/* ---------- Reduced motion: sin animaciones de slide ---------- */
@media (prefers-reduced-motion:reduce){
  .alm-c-progress-bar{transition:none}
  .alm-c-slide,
  .alm-c-slide.is-active,
  .alm-c-slide.leave-fwd,
  .alm-c-slide.leave-bwd{transition:none !important;transform:none !important}
  .alm-c-slide.enter-fwd,
  .alm-c-slide.enter-bwd{opacity:1;transform:none}
  .alm-c-btn,.alm-c-btn .alm-c-arrow{transition:none !important}
}
.alm-contacto .alm-c-slide{overflow-y:auto}
    