/* WooFarmasi — chat de WhatsApp y formulario de captación. Linkeia Network · https://linkeia.com */

/* Banderas: en Windows los emoji de bandera no se dibujan; esta fuente solo cubre las banderas. */
@font-face {
  font-family: "Twemoji Country Flags";
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url("https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2") format("woff2");
  font-display: swap;
}

/* ---------- Campos comunes ---------- */
.wfx-form { --wfx-color: var(--wff-color, var(--wfc-enviar, #111)); margin: 0; font-family: inherit; color: #1d1d1f }
.wfx-form *, .wfx-modal * { box-sizing: border-box }
.wfx-campo { margin: 0 0 14px; min-width: 0 }
.wfx-campo > label, .wff-opciones legend { display: block; margin: 0 0 6px; font-size: .86rem; font-weight: 600; color: #222; line-height: 1.3 }
.wfx-req { color: #c62828; font-weight: 700 }
.wfx-opcional { color: #888; font-weight: 400; font-size: .8rem }
.wfx-form input[type="text"], .wfx-form input[type="email"], .wfx-form input[type="date"], .wfx-form select, .wfx-form textarea, .wfx-tel {
  display: block; width: 100%; min-height: 46px; margin: 0; border: 1px solid #d9d9de; border-radius: 10px; background: #fff;
  font: inherit; font-size: .98rem; color: #111; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.wfx-form input[type="text"], .wfx-form input[type="email"], .wfx-form input[type="date"], .wfx-form select { padding: 0 14px; height: 46px }
.wfx-form textarea { padding: 10px 14px; resize: vertical; min-height: 78px; line-height: 1.45 }
.wfx-form select { appearance: auto; padding-right: 8px }
.wfx-form input::placeholder, .wfx-form textarea::placeholder { color: #8b8b8b }
.wfx-form input:focus, .wfx-form select:focus, .wfx-form textarea:focus, .wfx-tel:focus-within {
  outline: 0; border-color: var(--wfx-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wfx-color) 14%, transparent);
}
.wfx-tel input[type="tel"]:focus { box-shadow: none }
.wfx-invalido input, .wfx-invalido select, .wfx-invalido textarea, .wfx-invalido .wfx-tel, .wfx-invalido .wff-opciones { border-color: #d63638 !important }
.wfx-error { margin: 5px 2px 0; font-size: .8rem; line-height: 1.35; color: #c62828 }
.wfx-error:empty { display: none }
.wfx-sugerencia { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer }
.wfx-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.wfx-prueba { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #fff8e5; color: #7a5a00; font-size: .84rem; text-align: left }

/* Teléfono con selector de país */
.wfx-tel { position: relative; display: flex; align-items: stretch; height: 46px }
.wfx-pais {
  display: flex; align-items: center; gap: 6px; padding: 0 8px 0 12px; margin: 0; border: 0; border-right: 1px solid #ececf0;
  background: none; cursor: pointer; font: inherit; font-size: .98rem; color: #111; white-space: nowrap; border-radius: 10px 0 0 10px; box-shadow: none;
}
.wfx-pais:hover { background: #f6f6f8 }
.wfx-bandera { font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 1.2rem; line-height: 1 }
.wfx-flecha { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #555; margin-left: 2px }
.wfx-form .wfx-tel input[type="tel"] { flex: 1; min-width: 0; height: 100%; min-height: 0; padding: 0 12px; border: 0; background: transparent; font: inherit; font-size: .98rem; color: #111; outline: 0 }
.wfx-lista {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; background: #fff; border: 1px solid #e5e5e5;
  border-radius: 12px; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .3); overflow: hidden;
}
.wfx-lista[hidden] { display: none }
.wfx-form .wfx-buscar { display: block; width: 100%; height: 42px; min-height: 0; padding: 0 14px; border: 0; border-bottom: 1px solid #eee; border-radius: 0; font: inherit; font-size: .92rem; outline: 0; box-shadow: none }
.wfx-lista ul { list-style: none; margin: 0; padding: 4px 0; max-height: 220px; overflow: auto }
.wfx-lista li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 14px; cursor: pointer; font-size: .92rem; outline: 0; color: #111 }
.wfx-lista li:hover, .wfx-lista li:focus, .wfx-lista li[aria-selected="true"] { background: #f3f4f6 }
.wfx-lista .wfx-nombre-pais { flex: 1 }
.wfx-lista .wfx-prefijo { color: #777; font-size: .85rem }
.wfx-lista .wfx-sin-resultados { color: #777; cursor: default }
.wfx-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px }

/* ======================================================= Chat ======================================================= */
.wfc {
  --wfc-tam: 60px; --wfc-x: 20px; --wfc-y: 20px;
  position: fixed; bottom: var(--wfc-y); z-index: 999990; font-family: inherit; line-height: 1.4;
}
.wfc-derecha { right: var(--wfc-x) }
.wfc-izquierda { left: var(--wfc-x) }
.wfc * { box-sizing: border-box }
.wfc-boton {
  position: relative; display: grid; place-items: center; width: var(--wfc-tam); height: var(--wfc-tam); margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: var(--wfc-color); color: var(--wfc-icono); cursor: pointer;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .45); transition: transform .18s ease;
}
.wfc-izquierda .wfc-boton { margin-right: auto }
.wfc-derecha .wfc-boton { margin-left: auto }
.wfc-boton:hover { transform: scale(1.06) }
.wfc-boton:focus-visible { outline: 3px solid color-mix(in srgb, var(--wfc-color) 45%, transparent); outline-offset: 3px }
.wfc-boton svg { width: 56%; height: 56% }
.wfc-pulso:not(.wfc-abierto) .wfc-boton::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wfc-color); animation: wfc-pulso 2.4s ease-out infinite;
}
@keyframes wfc-pulso { 0% { transform: scale(1); opacity: .7 } 80%, 100% { transform: scale(1.55); opacity: 0 } }

.wfc-etiqueta {
  position: absolute; bottom: calc(var(--wfc-tam) / 2 - 18px); white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
  margin: 0; padding: 9px 14px; border: 0; border-radius: 10px; background: #fff; color: #222; font: inherit; font-size: .9rem; font-weight: 600;
  box-shadow: 0 8px 26px -8px rgba(0, 0, 0, .35); cursor: pointer; animation: wfc-entrar .3s ease;
}
.wfc-derecha .wfc-etiqueta { right: calc(var(--wfc-tam) + 12px) }
.wfc-izquierda .wfc-etiqueta { left: calc(var(--wfc-tam) + 12px) }
.wfc-etiqueta[hidden] { display: none }

.wfc-panel {
  position: absolute; bottom: calc(var(--wfc-tam) + 14px); width: 370px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - var(--wfc-tam) - var(--wfc-y) - 34px); display: flex; flex-direction: column;
  background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .45); animation: wfc-entrar .22s ease;
}
.wfc-panel[hidden] { display: none }
.wfc-derecha .wfc-panel { right: 0 }
.wfc-izquierda .wfc-panel { left: 0 }
@keyframes wfc-entrar { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
.wfc-cabecera { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: var(--wfc-cab); color: var(--wfc-cab-txt) }
.wfc-avatar { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: rgba(255, 255, 255, .18) }
.wfc-avatar img { width: 100%; height: 100%; object-fit: cover }
.wfc-avatar svg { width: 60%; height: 60% }
.wfc-cab-textos { flex: 1; min-width: 0; display: flex; flex-direction: column }
.wfc-cab-textos strong { font-size: 1rem; line-height: 1.25 }
.wfc-cab-textos span { font-size: .8rem; opacity: .85 }
.wfc-cerrar { flex: 0 0 auto; width: 32px; height: 32px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font-size: 24px; line-height: 1; cursor: pointer }
.wfc-cerrar:hover { background: rgba(255, 255, 255, .16) }
.wfc-cuerpo { overflow-y: auto; padding: 14px 16px 16px; background: #f4f1ec }
.wfc-bienvenida {
  position: relative; margin: 0 0 14px; padding: 10px 12px; max-width: 92%; background: #fff; border-radius: 0 10px 10px 10px;
  font-size: .9rem; line-height: 1.45; color: #222; box-shadow: 0 1px 1px rgba(0, 0, 0, .08); white-space: pre-line;
}
.wfc .wfx-campo { margin-bottom: 10px }
.wfc .wfx-form input[type="text"], .wfc .wfx-form input[type="email"], .wfc .wfx-tel { height: 42px; min-height: 42px; font-size: .92rem }
.wfc .wfx-form textarea { min-height: 70px; font-size: .92rem }
.wfc-enviar {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin: 6px 0 0; padding: 0 16px;
  border: 0; border-radius: 999px; background: var(--wfc-enviar); color: #fff; font: inherit; font-size: .98rem; font-weight: 700; cursor: pointer;
  transition: opacity .15s ease, filter .15s ease;
}
.wfc-enviar svg { width: 20px; height: 20px }
.wfc-enviar:hover:not([disabled]) { filter: brightness(1.05) }
.wfc-enviar[disabled] { opacity: .45; cursor: not-allowed }
.wfc .wfx-error-general { text-align: center }

@media (max-width: 767px) {
  .wfc-sin-movil { display: none !important }
  .wfc-panel { position: fixed; left: 8px !important; right: 8px !important; width: auto; max-width: none; bottom: calc(var(--wfc-tam) + var(--wfc-y) + 10px); max-height: calc(100vh - var(--wfc-tam) - var(--wfc-y) - 24px) }
}
@media (min-width: 768px) { .wfc-sin-escritorio { display: none !important } }

/* ======================================================= Formulario ======================================================= */
.wff { --wff-color: #111; max-width: 640px }
.wff-con-ventana { max-width: none }
.wff-titulo { margin: 0 0 8px; font-size: 1.25rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-align: center; color: #111 }
.wff-descripcion { margin: 0 0 18px; text-align: center; color: #555; font-size: .95rem; line-height: 1.55 }
.wff-titulo + .wff-form { margin-top: 18px }
.wff-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px }
.wff-ancho { grid-column: 1 / -1 }
.wff-opciones { margin: 0; padding: 8px 14px 6px; border: 1px solid #d9d9de; border-radius: 10px }
.wff-opciones legend { padding: 0 6px; margin: 0 }
.wff-opciones label { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: .95rem; font-weight: 400; cursor: pointer }
.wff-opciones input { width: 17px; height: 17px; margin: 0; accent-color: var(--wff-color) }
.wff-enviar, .wff-abrir {
  display: block; width: 100%; height: 50px; margin: 8px 0 0; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--wff-color); color: #fff; font: inherit; font-size: 1rem; font-weight: 700; transition: filter .15s ease, opacity .15s ease;
}
.wff-abrir { display: inline-block; width: auto; margin: 0 }
.wff-enviar:hover:not([disabled]), .wff-abrir:hover { filter: brightness(1.12) }
.wff-enviar[disabled] { opacity: .6; cursor: wait }
.wff .wfx-error-general, .wfx-modal .wfx-error-general { text-align: center; margin-top: 10px }
.wff-exito { padding: 30px 10px; text-align: center }
.wff-exito[hidden] { display: none }
.wff-exito p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: #222 }
.wff-check { display: block; width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%; background: var(--wff-color); position: relative }
.wff-check::after { content: ""; position: absolute; left: 21px; top: 14px; width: 13px; height: 24px; border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg) }

/* Ventana del formulario */
html.wfx-bloqueo { overflow: hidden }
.wfx-modal {
  position: fixed; inset: 0; z-index: 999995; display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; transition: opacity .2s ease; font-family: inherit;
}
.wfx-modal[hidden] { display: none }
.wfx-modal.wfx-visible { opacity: 1 }
.wfx-fondo { position: absolute; inset: 0; background: rgba(15, 15, 18, .6); backdrop-filter: blur(3px) }
.wfx-caja {
  position: relative; width: 100%; max-width: 580px; max-height: calc(100vh - 32px); overflow: auto; background: #fff;
  border-radius: 18px; padding: 30px 28px 26px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45);
  transform: translateY(10px) scale(.98); transition: transform .2s ease;
}
.wfx-modal.wfx-visible .wfx-caja { transform: none }
.wfx-cerrar { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #333; font-size: 26px; line-height: 1; cursor: pointer }
.wfx-cerrar:hover { background: #f1f1f1 }
.wfx-modal .wff-titulo { margin-right: 30px; margin-left: 30px }

@media (max-width: 560px) {
  .wff-grid, .wfx-fila { grid-template-columns: 1fr }
  .wfx-modal { align-items: flex-end; padding: 0 }
  .wfx-caja { max-width: none; border-radius: 18px 18px 0 0; padding: 26px 18px 22px; max-height: 94vh }
}
@media (prefers-reduced-motion: reduce) {
  .wfc-pulso .wfc-boton::after { animation: none }
  .wfc-panel, .wfc-etiqueta, .wfx-modal, .wfx-caja { animation: none; transition: none }
}