/* ==========================================================================
   Salesforce Popup Form — Frontend Styles v3.4
   ========================================================================== */

:root {
  --spf-accent:        #0066cc;
  --spf-accent-hover:  #0052a3;
  --spf-surface:       #ffffff;
  --spf-text:          #152A35;
  --spf-text-muted:    #6b7280;
  --spf-border:        #d1d5db;
  --spf-border-focus:  #0066cc;
  --spf-info-bg:       #f3f4f6;
  --spf-error:         #dc2626;
  --spf-success:       #16a34a;
  --spf-radius:        8px;
  --spf-radius-pill:   50px;
  --spf-shadow:        0 20px 60px rgba(0,0,0,0.22);
  --spf-overlay-bg:    rgba(0,0,0,0.55);
  --spf-transition:    180ms ease;
  --spf-z-overlay:     100000;
  --spf-z-dialog:      100001;
}

@media (prefers-reduced-motion: reduce) {
  .spf-overlay, .spf-dialog,
  .spf-overlay.is-visible, .spf-dialog.is-visible {
    transition: none !important; animation: none !important;
  }
}

/* ── Botón disparador ─────────────────────────────────────────── */
.spf-trigger-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         0.6em 1.4em;
  background:      var(--spf-accent);
  color:           #fff;
  font-family:     inherit;
  font-size:       0.95rem;
  font-weight:     600;
  line-height:     1.4;
  border:          2px solid transparent;
  border-radius:   var(--spf-radius);
  cursor:          pointer;
  white-space:     nowrap;
  transition:      background var(--spf-transition);
}
.spf-trigger-btn:hover        { background: var(--spf-accent-hover); }
.spf-trigger-btn:focus-visible{ outline: 3px solid var(--spf-accent); outline-offset: 3px; }
.spf-trigger-btn:active       { box-shadow: inset 0 0 0 4px var(--spf-accent-hover), inset 0 0 0 6px #fff; }

.spf-response-btn,
.spf-trigger-btn,
.spf-float-card-btn,
/* .spf-card, .spf-card button,  */
.spf-float-card-wrap, .spf-float-card-wrap button,
.spf-mobile-bar, .spf-mobile-bar button
{
  font-family: 'Bariol Regular', sans-serif;
}

.spf-card, .spf-card button {
  font-family: 'Bariol Regular', sans-serif;
  line-height: 1.2em;
}

.spf-trigger-btn .spf-btn-icon,
.spf-response-btn .spf-btn-icon {
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.spf-trigger-btn .spf-btn-icon img {
  width:       24px;
  height:      24px;
  object-fit:  contain;
  display:     block;
  filter:      brightness(0) invert(1);
}
.spf-response-btn .spf-btn-icon img {
  width:       24px;
  height:      24px;
  object-fit:  contain;
  display:     block;
}
.spf-trigger-btn .spf-btn-icon + .spf-btn-label,
.spf-trigger-btn .spf-btn-label + .spf-btn-icon { margin-left: var(--spf-icon-gap, 8px); }
.spf-trigger-btn .spf-btn-label { text-transform: uppercase; }

/* Wrap que JS inserta en la cabecera */
.spf-header-inject-wrap {
  display:     inline-flex;
  align-items: center;
  margin-left: 12px;
  flex-shrink: 0;
}


/* ── Overlay ──────────────────────────────────────────────────── */
.spf-overlay {
  position:        fixed; inset: 0;
  background:      var(--spf-overlay-bg);
  z-index:         var(--spf-z-overlay);
  opacity:         0; visibility: hidden;
  transition:      opacity var(--spf-transition), visibility var(--spf-transition);
  backdrop-filter: blur(2px);
}
.spf-overlay.is-visible { opacity: 1; visibility: visible; }

/* ── Diálogo ──────────────────────────────────────────────────── */
.spf-dialog {
  /* font-family: --family-title-main-font,'Nunito', sans-serif; */
  font-family: 'Bariol Regular', sans-serif;
  line-height: 1.2em;
  position:    fixed; /* El bloque de respuesta y botón de cierre usan position:absolute relativo a este */
  top: 50%; left: 50%;
  transform:   translate(-50%, -48%);
  z-index:     var(--spf-z-dialog);
  width:       570px;
  min-height:  184px;
  max-height:  calc(100vh - 4rem);
  background:  var(--spf-surface);
  border-radius: 4px;
  box-shadow:  var(--spf-shadow);
  display:     flex;
  flex-direction: column;
  overflow:    hidden;
  opacity: 0; visibility: hidden;
  transition: opacity var(--spf-transition), transform var(--spf-transition), visibility var(--spf-transition), height .2s ease;
}
.spf-dialog.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.spf-dialog.has-response { width: 525px; }
.spf-dialog.has-response .spf-dialog__topbar { display: none; }

/* En móvil cancelamos el transform del estado is-visible */
@media (max-width: 600px) {
  .spf-dialog.is-visible { transform: none; }
}
.spf-dialog[hidden]    { display: none; }
.spf-dialog__inner {
  flex:                       1;
  display:                    flex;
  flex-direction:             column;
  min-height:                 0;
  overflow-y:                 auto;
  overflow-x:                 hidden;
  padding:                    0 24px 24px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:            none;
}
.spf-dialog__inner::-webkit-scrollbar { display: none; }
.spf-dialog__inner p { padding-bottom: 0; }

/* ── Barra superior fija (no scrollea) ────────────────────────── */
.spf-dialog__topbar {
    flex-shrink:     0;
    display:         flex;
    align-items:     flex-start;
    justify-content: flex-end;
    padding:         16px 16px 0;
    background:      #ffffff;
}

/* ── Botón de cierre ──────────────────────────────────────────── */
.spf-dialog__close {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    color:           #152A35;
    line-height:     1;
    transition:      color .15s;
}
.spf-dialog__close:focus-visible{ outline: 3px solid var(--spf-accent); outline-offset: 2px; }

/* ── Cabecera del popup (imagen + título + intro) ───────────── */
.spf-dialog__header {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            16px;
  width:          412px;
  max-width:      100%;
  margin:         0 auto 16px;
}

.spf-dialog__heading  { text-align: center; margin: 0; }
.spf-dialog__title    { font-size: 36px; font-weight: 700; color: var(--spf-text); margin: 0; line-height: 1.25; padding-bottom: 0; }

/* ── Imagen del popup ───────────────────────────────────────── */
.spf-dialog__image {
  display: flex; justify-content: center;
}
.spf-dialog__img {
  width: 80px; height: 80px; border-radius: 50%; object-fit: cover; display: block;
}

/* ── Texto introductorio (WYSIWYG) ──────────────────────────── */
.spf-dialog__intro {
  font-size:   16px;
  color:       var(--spf-text);
  line-height: 1.55;
  margin:      0;
  text-align:  center;
  font-weight: 400;
}
.spf-dialog__intro strong, .spf-dialog__intro b { color: var(--spf-text); font-weight: 700; }
.spf-dialog__intro a  { color: var(--spf-accent); text-decoration: underline; }
.spf-dialog__intro p  { margin: 0; padding: 0; }
.spf-dialog__intro p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .spf-dialog {
    /* width:auto con left/right es más fiable que width:100% con left:0
       para evitar desbordamiento en position:fixed */
    width:         auto;
    max-width:     none;
    left:          0;
    right:         0;
    top:           0;
    bottom:        0;
    transform:     none;
    border-radius: 0;
    max-height:    100vh;
    max-height:    100dvh; /* dynamic viewport height en navegadores modernos */
  }
  .spf-dialog__inner    { padding: 0 24px 24px; }
  .spf-dialog__title    { font-size: 1.25rem; }

  /* Compensa la barra de administración de WordPress en móvil (46px) */
  .admin-bar .spf-dialog {
    top:        46px;
    max-height: calc(100vh - 46px);
    max-height: calc(100dvh - 46px);
  }

  /* Bloque de respuesta en móvil: bottom sheet de 558px */
  .spf-dialog.has-response {
    top:           auto;
    bottom:        0;
    height:        558px;
    max-height:    558px;
    width:         auto;
    border-radius: 4px;
    overflow:      hidden;
  }

  .spf-dialog.has-response .spf-response-block {
    width:         100%;
    min-height:    558px;
    padding:       40px 24px;
    box-sizing:    border-box;
    border-radius: 0;
    transform:     translateY(40px);
  }

  .spf-dialog.has-response .spf-response-block.is-visible {
    transform: translateY(0);
  }
}

/* Compensa la barra de administración en escritorio (32px) */
@media (min-width: 601px) {
  .admin-bar .spf-dialog {
    top: calc(50% + 16px); /* 32px/2 — el translate(-50%,-48%) ya centra verticalmente */
  }
}

/* ── Fila scroll-wrapper + scrollbar personalizado ──────────── */
.spf-dialog__scroll-row {
  flex:       1;
  display:    flex;
  min-height: 0;
}

.spf-scrollbar {
  box-sizing:    border-box; /* sin esto, el border de 1px se suma al width y
                                 descuadra 2px el ancho de .spf-dialog__inner
                                 en temas sin reset global de box-sizing */
  width:         4px;
  height:        285px;
  max-height:    100%;
  flex-shrink:   0;
  align-self:    center;
  position:      relative;
  margin-left:   0;
  margin-right:  8px;
  background:    transparent;
  border:        1px solid #4D5D66;
  border-radius: 20px;
}
.spf-scrollbar[hidden] { display: none; }

.spf-scrollbar__thumb {
  position:      absolute;
  left:          -1px;
  width:         4px;
  height:        95px;
  flex-shrink:   0;
  top:           0;
  background:    #4D5D66;
  border-radius: 20px;
  cursor:        grab;
}
.spf-scrollbar__thumb:active { cursor: grabbing; }


.spf-panel--cf7 .wpcf7 { margin: 0; }

/* Inputs y textareas de CF7 heredan los estilos del popup */
.spf-panel--cf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.spf-panel--cf7 textarea {
    width:         100%;
    padding:       12px 16px;
    background:    #fff;
    color:         var(--spf-text);
    border:        1.5px solid var(--spf-border);
    border-radius: 2px;
    font-family:   inherit;
    font-size:     .9rem;
    line-height:   1.5;
    box-sizing:    border-box;
    transition:    border-color var(--spf-transition), box-shadow var(--spf-transition);
    -webkit-appearance: none; appearance: none;
}
.spf-panel--cf7 select {
    width:         100%;
    padding:       12px 16px;
    background:    #fff;
    color:         #4D5D66;
    border:        1.5px solid var(--spf-border);
    border-radius: 2px;
    font-family:   inherit;
    font-size:     16px;
    font-weight:   400;
    line-height:   1.5;
    box-sizing:    border-box;
    transition:    border-color var(--spf-transition), box-shadow var(--spf-transition);
    -webkit-appearance: none; appearance: none;
}
.spf-panel--cf7 input:focus,
.spf-panel--cf7 textarea:focus,
.spf-panel--cf7 select:focus {
    border-color: var(--spf-border-focus);
    box-shadow:   0 0 0 3px rgba(0,102,204,.15);
    outline:      none;
}
.spf-panel--cf7 textarea { resize: vertical; min-height: 90px; }

/* Etiquetas */
.spf-panel--cf7 .wpcf7-form-control-wrap { display: block; margin-bottom: 0; }
.spf-panel--cf7 label {
    display:     block;
    font-size:   .75rem;
    font-weight: 500;
    color:       var(--spf-text-muted);
    margin-bottom: 4px;
}

/* Wrapper del submit — <div class="spf-submit-wrap"> definido en la plantilla CF7 */
.spf-panel--cf7 .spf-submit-wrap {
    display:         flex !important;
    justify-content: center !important;
    align-items:     center !important;
    gap:             8px !important;
    margin-top:      32px !important;
    padding:         0 !important;
}

/* Botón submit de CF7 */
.spf-panel--cf7 input[type="submit"].wpcf7-submit,
.spf-panel--cf7 button[type="submit"].wpcf7-submit {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             8px !important;
    width:           auto !important;
    padding:         12px 24px !important;
    background:      #CC4E00 !important;
    color:           #fff !important;
    font-family:     inherit !important;
    font-size:       16px !important;
    font-weight:     700 !important;
    text-transform:  uppercase !important;
    letter-spacing:  .05em !important;
    border:          none !important;
    border-radius:   26px !important;
    cursor:          pointer !important;
    transition:      background var(--spf-transition) !important;
    text-indent:     0 !important;
}
.spf-panel--cf7 input[type="submit"].wpcf7-submit:hover,
.spf-panel--cf7 button[type="submit"].wpcf7-submit:hover {
    background: #E86600 !important;
}
.spf-panel--cf7 input[type="submit"].wpcf7-submit:active,
.spf-panel--cf7 button[type="submit"].wpcf7-submit:active {
    box-shadow: inset 0 0 0 4px #E86600, inset 0 0 0 6px #fff !important;
}

/* Anular flechas que Divi inyecta via ::before / ::after en et_pb_button */
.spf-panel--cf7 .wpcf7-submit::before,
.spf-panel--cf7 .wpcf7-submit::after {
    display: none !important;
    content: '' !important;
}

.spf-panel--cf7 .spf-submit-icon {
    display:     inline-flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    margin:      0 !important;
    padding:     0 !important;
}
.spf-panel--cf7 .spf-submit-icon svg { display: block; }

/* Mensajes de respuesta de CF7 */
.spf-panel--cf7 .wpcf7-response-output {
    display:       none !important;
    margin:        8px 0 0 !important;
    padding:       .875rem 1rem !important;
    border-radius: var(--spf-radius) !important;
    font-size:     .875rem !important;
    border:        none !important;
}
.spf-panel--cf7 .wpcf7-mail-sent-ok {
    background: #f0fdf4 !important;
    color:      var(--spf-success) !important;
    border:     1px solid #bbf7d0 !important;
}
.spf-panel--cf7 .wpcf7-mail-sent-ng,
.spf-panel--cf7 .wpcf7-aborted,
.spf-panel--cf7 .wpcf7-validation-errors,
.spf-panel--cf7 .wpcf7-spam-blocked {
    background: #fef2f2 !important;
    color:      var(--spf-error) !important;
    border:     1px solid #fecaca !important;
}

/* Errores de campo CF7 */
.spf-panel--cf7 .wpcf7-not-valid {
    background:   #FFE3E8 !important;
    border:       1px solid #E42530 !important;
    box-shadow:   none !important;
}
/* Mensajes de error de campo ocultos — los mensajes inline no son necesarios
   porque el estado de error ya se indica visualmente con borde + fondo rosa.
   Se conserva el CSS original comentado para restaurarlo si se necesita:
.spf-panel--cf7 .wpcf7-not-valid-tip {
    font-size:   .75rem !important;
    color:       var(--spf-error) !important;
    font-weight: 500;
    margin-top:  2px;
    display:     block;
}
*/
.spf-panel--cf7 .wpcf7-not-valid-tip {
    display: none !important;
}

/* Spinner de CF7 — el botón es el contexto de posicionamiento */
.spf-panel--cf7 .spf-submit-btn {
    position: relative;
    overflow:  visible;
}

/* Spinner siempre absoluto a la derecha del botón, nunca en el flujo */
.spf-panel--cf7 .wpcf7-spinner {
    position:  absolute !important;
    left:      calc(100% + 8px);
    top:       50%;
    transform: translateY(-50%);
    margin:    0 !important;
}

/* Bloquea reenvíos mientras CF7 está procesando */
.spf-panel--cf7 .wpcf7-form.submitting .wpcf7-submit {
    pointer-events: none !important;
    cursor:         not-allowed !important;
}

/* Aviso de CF7 no configurado */
.spf-cf7-notice {
    padding:       1rem;
    background:    #fef9c3;
    border:        1px solid #fde047;
    border-radius: var(--spf-radius);
    font-size:     .875rem;
    color:         #713f12;
    margin:        0;
}

/* ── CF7 form — layout del formulario de contacto ────────────────
 * Clases específicas del formulario CF7: fila doble columna,
 * labels apilados, bloque Anliegen con fondo, aceptación y submit
 * deshabilitado hasta que se marque el checkbox.
 * ────────────────────────────────────────────────────────────── */

/* Fila dos columnas: Vorname + Nachname */
.spf-panel--cf7 .spf-cf7-row {
    display:       flex;
    gap:           16px;
    margin-bottom: 12px;
}
.spf-panel--cf7 .spf-cf7-row  > * {
    flex:      1;
    min-width: 0; /* evita desbordamiento en flex */
}

/* Label con texto + campo apilados verticalmente */
.spf-panel--cf7 .spf-cf7-label {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    font-size:      16px;
    font-weight:    400;
    color:          #4D5D66;
    margin-bottom:  12px;
}

/* Grupo Anliegen con fondo azul-violeta */
.spf-panel--cf7 .spf-cf7-anliegen {
    background:  #F5E4EF;
    padding:     16px;
    border-radius: 6px;
    margin-top:  4px; /* email (12px) + 4px = 16px de separación total */
    font-family: 'Nunito', sans-serif;
}
.spf-panel--cf7 .spf-cf7-anliegen__label {
    font-size:   14px;
    font-weight: 700;
    color:       #152A35;
    margin:      0 0 10px;
}

/* Checkbox de aceptación de política de privacidad */
.spf-panel--cf7 .spf-cf7-acceptance {
    margin-top:  24px;
    font-family: 'Nunito', sans-serif;
}

/* CF7 genera: .wpcf7-acceptance > .wpcf7-list-item > label > input + .wpcf7-list-item-label */
.spf-panel--cf7 .spf-cf7-acceptance .wpcf7-list-item label {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    cursor:      pointer;
}
.spf-panel--cf7 .spf-cf7-acceptance .wpcf7-list-item,
.spf-panel--cf7 .spf-cf7-acceptance .wpcf7-acceptance,
.spf-panel--cf7 .spf-cf7-acceptance .wpcf7-form-control-wrap {
    display: block;
    width:   100%;
    margin: 0;
}
.spf-panel--cf7 .spf-cf7-acceptance input[type="checkbox"] {
    width:        24px;
    height:       24px;
    flex-shrink:  0;
    margin-top:   1px;
    cursor:       pointer;
    accent-color: #6366f1;
}
.spf-panel--cf7 .spf-cf7-acceptance .wpcf7-list-item-label,
.spf-panel--cf7 .spf-cf7-acceptance .wpcf7-list-item-label * {
    font-size:   14px;
    line-height: 1.55;
    color:       #4D5D66;
    font-weight: 400;
}
.spf-panel--cf7 .spf-cf7-acceptance .wpcf7-list-item-label a {
    color:           #4D5D66;
    text-decoration: underline;
}

/* Submit deshabilitado hasta que se acepte la política (controlado por cf7-form.js) */
/* Selector idéntico al de la regla base + :disabled para ganar en especificidad */
.spf-panel--cf7 input[type="submit"].wpcf7-submit:disabled,
.spf-panel--cf7 button[type="submit"].wpcf7-submit:disabled {
    background: #BDC4C9 !important;
    color:      #fff !important;
    opacity:    1 !important;
    cursor:     not-allowed !important;
}

/* Responsive: una columna en móvil */
@media (max-width: 600px) {
    .spf-panel--cf7 .spf-cf7-row {
        flex-direction: column;
        gap: 0;
    }
}

/* ── Bloque de respuesta post-envío ─────────────────────────────
 * Sustituye al formulario CF7 cuando se recibe la respuesta de
 * Salesforce. Flujo normal en el DOM — el diálogo se adapta al
 * tamaño del bloque.
 * ────────────────────────────────────────────────────────────── */
.spf-response-block {
    display:        flex;
    box-sizing:     border-box;
    width:          525px;
    min-height:     184px;
    padding:        40px 32px;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    gap:            16px;
    border-radius:  4px;
    background:     #fff;
    position:       relative; /* necesario para el botón de cierre */
    opacity:        0;
    transform:      translateY(8px);
    transition:     opacity .3s ease, transform .3s ease;
}
.spf-response-block > * { padding-bottom: 0; }
/* Reset estilos globales de Gutenberg (theme.json añade margin/padding a p, h*) */
.spf-response-block p,
.spf-response-block h1, .spf-response-block h2, .spf-response-block h3 {
    margin-block-start: 0;
    margin-block-end:   0;
    padding-top:        0;
    padding-bottom:     0;
}
.spf-response-block.is-visible {
    opacity:   1;
    transform: translateY(0);
}

/* Botón de cierre */
.spf-response-block__close {
    position:        absolute;
    top:             16px;
    right:           16px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         0;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    color:           #152A35;
    line-height:     1;
    transition:      color .15s;
}

/* Icono — base */
.spf-response-block__icon {
    font-size:   2rem;
    line-height: 1;
    flex-shrink: 0;
}

/* Icono — contenedor redondeado por variante */
.spf-response-block--ok      .spf-response-block__icon,
.spf-response-block--error   .spf-response-block__icon,
.spf-response-block--warning .spf-response-block__icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           56px;
    height:          56px;
    padding:         12px;
    box-sizing:      border-box;
    border-radius:   40px;
    margin:          0;
    flex-shrink:     0;
}
.spf-response-block--ok      .spf-response-block__icon { background: #E9F5E9; }
.spf-response-block--error   .spf-response-block__icon { background: #FDF8DF; }
.spf-response-block--warning .spf-response-block__icon { background: #FDF8DF; }

/* Imagen subida desde la biblioteca de medios */
.spf-response-block__icon .spf-response-icon-img {
    width:      32px;
    height:     32px;
    object-fit: contain;
    display:    block;
}

/* Título */
.spf-response-block__title {
    color:       #333;
    text-align:  center;
    font-family:"Bariol Bold", sans-serif;
    font-size:   36px;
    font-style:  normal;
    font-weight: 700;
    line-height: 120%;
    margin:      0;
}

/* Subtítulo */
.spf-response-block__subtitle {
    color:       #152A35;
    text-align:  center;
    font-family: "Bariol Regular", sans-serif;
    font-size:   16px;
    font-style:  normal;
    font-weight: 400;
    line-height: 150%;
    margin:      0;
}

/* Detalle técnico (mensaje de SF en errores) */

.spf-response-block__actions {
    margin-top: 1.25rem;
    display:    flex;
    justify-content: center;
}

/* ==========================================================================
   Popup intermedio (card)
   ========================================================================== */

/* ── Wrapper para el card inline (cabecera con card="1") ─────────── */
/* ── Card base ───────────────────────────────────────────────────── */
.spf-card {
  background:    #fff;
  border-radius: 4px;
  box-shadow:    0 8px 32px rgba(0, 0, 0, .18);
  width:         280px;
  padding:       20px 20px 16px;
  box-sizing:    border-box;
  text-align:    left;
}

.spf-card[hidden] { display: none; }

/* Card inline: posicionado con position:fixed por JS bajo el botón que lo abre */
.spf-card:not(.spf-card--float) {
  position: fixed;
  z-index:  99999;
}

/* Card del flotante: integrado en el wrapper flex (no necesita posicionamiento propio) */
.spf-card--float {
  position: relative;
}

/* ── Botón de cierre ─────────────────────────────────────────────── */
.spf-card__close {
  position:   absolute;
  top:        10px;
  right:      10px;
  background: none;
  border:     none;
  padding:    4px;
  cursor:     pointer;
  /* color:      #9ca3af; */
  line-height: 1;
  display:    flex;
  align-items: center;
  transition: color .15s;
}
/* .spf-card__close:hover { color: #374151; } */

/* ── Imagen circular ─────────────────────────────────────────────── */
.spf-card__image { margin-bottom: 12px; }
.spf-card__img   {
  width:         52px;
  height:        52px;
  border-radius: 50%;
  object-fit:    cover;
  display:       block;
}

/* ── Título ──────────────────────────────────────────────────────── */
.spf-card__title {
  font-size:   24px;
  font-weight: 700;
  color:       var(--spf-accent, #0066cc);
  line-height: 140%;
  margin:      0 0 8px;
}

/* ── Subtítulo ───────────────────────────────────────────────────── */
.spf-card__subtitle {
  font-size:   16px;
  color:       #374151;
  line-height: 150%;
  margin:      0 0 16px;
}

.spf-card__subtitle p {
  margin: 0px;
}

/* ── Bloque de teléfono ──────────────────────────────────────────── */
.spf-card__phone-block {
  border-radius: 8px;
  padding:       10px 14px;
  margin-bottom: 16px;
}

.spf-card__phone {
  display:         flex;
  align-items:     center;
  gap:             6px;
  font-size:       16px;
  font-weight:     700;
  color:           var(--spf-accent, #0066cc);
  text-decoration: none;
  margin-bottom:   2px;
}
.spf-card__phone:hover { text-decoration: underline; }

.spf-card__hours {
  display:   block;
  font-size: 14px;
  color:     #6b7280;
}

/* ── Botón CTA ───────────────────────────────────────────────────── */
.spf-card__cta {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--spf-icon-gap, 8px);
  width:           100%;
  border:          none;
  cursor:          pointer;
  text-align:      center;
  text-transform:  uppercase;
  transition:      background .18s;
  box-sizing:      border-box;
}
.spf-card__cta .spf-btn-icon img { width: 24px; height: 24px; object-fit: contain; display: block; }

/* ── Botón flotante+card ── */
.spf-float-card-btn {
  flex-shrink:           0;
  -webkit-user-select:   none;
  user-select:           none;
}
.spf-float-card-btn.is-hidden { display: none; }

/* ── Botón de cierre del flotante+card (oculto por defecto, visible con .is-visible) ── */
.spf-float-card-btn .spf-btn-icon {
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.spf-float-card-btn .spf-btn-icon img {
  width:      24px;
  height:     24px;
  object-fit: contain;
  display:    block;
  filter:     brightness(0) invert(1);
}
.spf-float-card-close {
  flex-shrink:           0;
  -webkit-user-select:   none;
  user-select:           none;
}
.spf-float-card-close .spf-btn-icon img {
  width:  24px;
  height: 24px;
  object-fit: contain;
  display: block;
}

@media (hover: none) {
  .spf-float-card-btn,
  .spf-float-card-close { touch-action: manipulation; }
}

/* ==========================================================================
   Barra mobile fija (visible solo en ≤600px)
   ========================================================================== */

.spf-mobile-bar {
  display:      none;
  position:     fixed;
  bottom:       0;
  left:         0;
  right:        0;
  z-index:      99992;
  padding:      12px 16px;
  box-sizing:   border-box;
  background:   #fff;
  box-shadow:   0 -2px 8px rgba(0,0,0,.12);
}

@media (max-width: 600px) {
  .spf-mobile-bar {
    display:         flex;
    align-items:     center;
    justify-content: center;
  }
}

.spf-mobile-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--spf-icon-gap, 8px);
  width:           100%;
  border:          none;
  font-family:     inherit;
  cursor:          pointer;
  white-space:     nowrap;
  line-height:     1.4;
  transition:      background .18s;
  box-sizing:      border-box;
}

.spf-mobile-btn .spf-btn-icon {
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.spf-mobile-btn .spf-btn-icon img {
  width:      24px;
  height:     24px;
  object-fit: contain;
  display:    block;
  filter:     brightness(0) invert(1);
}
.spf-mobile-btn .spf-btn-label { text-transform: uppercase; }

/* En mobile: oculta triggers de escritorio y posiciona la card sobre la barra */
@media (max-width: 600px) {
  .spf-header-btn,
  .spf-float-btn,
  .spf-float-card-wrap { display: none !important; }

  /* Card inline: full-width fija sobre la barra mobile */
  .spf-card:not(.spf-card--float) {
    left:          0;
    right:         0;
    bottom:        var(--spf-mobile-bar-h, 72px);
    top:           auto;
    width:         auto;
    padding:       24px 16px;
    border-radius: 12px 12px 0 0;
  }
}